feat: OpenAI compatibility improvements & build fixes

- Fix hydration mismatches and initialization errors
- Add /v1/models endpoint for OpenAI clients
- Add Codex response translator (Responses → OpenAI)
- Fix circular dependencies and PropTypes
- Add Material Symbols font and CSS fixes
- Update README with deployment guide

Co-merged from PR #18 (14/15 commits, skipped debug)

open-sse/executors/codex.js

@@ -23,6 +23,16 @@ export class CodexExecutor extends BaseExecutor {
     // Ensure store is false (Codex requirement)
     body.store = false;
 
+    // Remove unsupported parameters for Codex API
+    delete body.temperature;
+    delete body.top_p;
+    delete body.frequency_penalty;
+    delete body.presence_penalty;
+    delete body.logprobs;
+    delete body.top_logprobs;
+    delete body.n;
+    delete body.seed;
+
     return body;
   }
 }

open-sse/translator/response/openai-responses.js

@@ -355,6 +355,153 @@ function flushEvents(state) {
   return events;
 }
 
-// Register
+/**
+ * Translate OpenAI Responses API chunk to OpenAI Chat Completions format
+ * This is for when Codex returns data and we need to send it to an OpenAI-compatible client
+ */
+function openaiResponsesToOpenAIResponse(chunk, state) {
+  if (!chunk) {
+    // Flush: send final chunk with finish_reason
+    if (!state.finishReasonSent && state.started) {
+      state.finishReasonSent = true;
+      return {
+        id: state.chatId || `chatcmpl-${Date.now()}`,
+        object: "chat.completion.chunk",
+        created: state.created || Math.floor(Date.now() / 1000),
+        model: state.model || "gpt-4",
+        choices: [{
+          index: 0,
+          delta: {},
+          finish_reason: "stop"
+        }]
+      };
+    }
+    return null;
+  }
+
+  // Handle different event types from Responses API
+  const eventType = chunk.type || chunk.event;
+  const data = chunk.data || chunk;
+
+  // Initialize state
+  if (!state.started) {
+    state.started = true;
+    state.chatId = `chatcmpl-${Date.now()}`;
+    state.created = Math.floor(Date.now() / 1000);
+    state.toolCallIndex = 0;
+    state.currentToolCallId = null;
+  }
+
+  // Text content delta
+  if (eventType === "response.output_text.delta") {
+    const delta = data.delta || "";
+    if (!delta) return null;
+
+    return {
+      id: state.chatId,
+      object: "chat.completion.chunk",
+      created: state.created,
+      model: state.model || "gpt-4",
+      choices: [{
+        index: 0,
+        delta: { content: delta },
+        finish_reason: null
+      }]
+    };
+  }
+
+  // Text content done (ignore, we handle via delta)
+  if (eventType === "response.output_text.done") {
+    return null;
+  }
+
+  // Function call started
+  if (eventType === "response.output_item.added" && data.item?.type === "function_call") {
+    const item = data.item;
+    state.currentToolCallId = item.call_id || `call_${Date.now()}`;
+
+    return {
+      id: state.chatId,
+      object: "chat.completion.chunk",
+      created: state.created,
+      model: state.model || "gpt-4",
+      choices: [{
+        index: 0,
+        delta: {
+          tool_calls: [{
+            index: state.toolCallIndex,
+            id: state.currentToolCallId,
+            type: "function",
+            function: {
+              name: item.name || "",
+              arguments: ""
+            }
+          }]
+        },
+        finish_reason: null
+      }]
+    };
+  }
+
+  // Function call arguments delta
+  if (eventType === "response.function_call_arguments.delta") {
+    const argsDelta = data.delta || "";
+    if (!argsDelta) return null;
+
+    return {
+      id: state.chatId,
+      object: "chat.completion.chunk",
+      created: state.created,
+      model: state.model || "gpt-4",
+      choices: [{
+        index: 0,
+        delta: {
+          tool_calls: [{
+            index: state.toolCallIndex,
+            function: { arguments: argsDelta }
+          }]
+        },
+        finish_reason: null
+      }]
+    };
+  }
+
+  // Function call done
+  if (eventType === "response.output_item.done" && data.item?.type === "function_call") {
+    state.toolCallIndex++;
+    return null;
+  }
+
+  // Response completed
+  if (eventType === "response.completed") {
+    if (!state.finishReasonSent) {
+      state.finishReasonSent = true;
+      return {
+        id: state.chatId,
+        object: "chat.completion.chunk",
+        created: state.created,
+        model: state.model || "gpt-4",
+        choices: [{
+          index: 0,
+          delta: {},
+          finish_reason: "stop"
+        }]
+      };
+    }
+    return null;
+  }
+
+  // Reasoning events (convert to content or skip)
+  if (eventType === "response.reasoning_summary_text.delta") {
+    // Optionally include reasoning as content, or skip
+    return null;
+  }
+
+  // Ignore other events
+  return null;
+}
+
+// Register both directions
 register(FORMATS.OPENAI, FORMATS.OPENAI_RESPONSES, null, openaiToOpenAIResponsesResponse);
+register(FORMATS.OPENAI_RESPONSES, FORMATS.OPENAI, null, openaiResponsesToOpenAIResponse);
 

open-sse/utils/stream.js

@@ -7,7 +7,7 @@ function getTimeString() {
   return new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
 
-// Extract usage from any format (Claude, OpenAI, Gemini)
+// Extract usage from any format (Claude, OpenAI, Gemini, Responses API)
 function extractUsage(chunk) {
   // Claude format (message_delta event)
   if (chunk.type === "message_delta" && chunk.usage) {
@@ -18,6 +18,16 @@ function extractUsage(chunk) {
       cache_creation_input_tokens: chunk.usage.cache_creation_input_tokens
     };
   }
+  // OpenAI Responses API format (response.completed or response.done)
+  if ((chunk.type === "response.completed" || chunk.type === "response.done") && chunk.response?.usage) {
+    const usage = chunk.response.usage;
+    return {
+      prompt_tokens: usage.input_tokens || usage.prompt_tokens || 0,
+      completion_tokens: usage.output_tokens || usage.completion_tokens || 0,
+      cached_tokens: usage.input_tokens_details?.cached_tokens,
+      reasoning_tokens: usage.output_tokens_details?.reasoning_tokens
+    };
+  }
   // OpenAI format
   if (chunk.usage?.prompt_tokens !== undefined) {
     return {
@@ -253,7 +263,12 @@ export function createSSEStream(options = {}) {
             reqLogger?.appendConvertedChunk?.(output);
             controller.enqueue(encoder.encode(output));
           }
-          if (usage) logUsage(provider, usage, model, connectionId);
+          if (usage) {
+            logUsage(provider, usage, model, connectionId);
+          } else {
+            // No usage data available - still mark request as completed
+            appendRequestLog({ model, provider, connectionId, tokens: null, status: "200 OK" }).catch(() => {});
+          }
           return;
         }
 
@@ -287,7 +302,12 @@ export function createSSEStream(options = {}) {
         reqLogger?.appendConvertedChunk?.(doneOutput);
         controller.enqueue(encoder.encode(doneOutput));
 
-        if (state?.usage) logUsage(state.provider || targetFormat, state.usage, model, connectionId);
+        if (state?.usage) {
+          logUsage(state.provider || targetFormat, state.usage, model, connectionId);
+        } else {
+          // No usage data available - still mark request as completed
+          appendRequestLog({ model, provider, connectionId, tokens: null, status: "200 OK" }).catch(() => {});
+        }
       } catch (error) {
         console.log("Error in flush:", error);
       }