@hienlh/ppm 0.9.26 → 0.9.28

package/src/services/proxy-openai-bridge.ts

@@ -0,0 +1,213 @@
+/**
+ * OpenAI-compatible proxy bridge — converts OpenAI Chat Completions
+ * requests into SDK query() calls and returns OpenAI-format responses.
+ *
+ * Endpoint: POST /proxy/v1/chat/completions
+ * Reference: https://github.com/fuergaosi233/claude-code-proxy
+ */
+import { query } from "@anthropic-ai/claude-agent-sdk";
+import { accountSelector } from "./account-selector.service.ts";
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+function mapModelToSdkModel(model: string): "sonnet" | "opus" | "haiku" {
+  if (model.includes("opus")) return "opus";
+  if (model.includes("haiku")) return "haiku";
+  return "sonnet";
+}
+
+function buildSdkEnv(accessToken: string): Record<string, string | undefined> {
+  const isOAuth = accessToken.startsWith("sk-ant-oat");
+  return {
+    ...process.env,
+    ANTHROPIC_API_KEY: isOAuth ? "" : accessToken,
+    CLAUDE_CODE_OAUTH_TOKEN: isOAuth ? accessToken : "",
+    ANTHROPIC_BASE_URL: "",
+  };
+}
+
+/** Extract system prompt and build text prompt from OpenAI messages format */
+function buildPromptFromOpenAiMessages(body: any): { prompt: string; systemPrompt?: string } {
+  const messages: any[] = body.messages ?? [];
+  let systemPrompt: string | undefined;
+  const conversationParts: string[] = [];
+
+  for (const m of messages) {
+    const text = typeof m.content === "string"
+      ? m.content
+      : Array.isArray(m.content)
+        ? m.content.filter((b: any) => b.type === "text").map((b: any) => b.text).join("\n")
+        : String(m.content ?? "");
+
+    if (m.role === "system") {
+      systemPrompt = systemPrompt ? `${systemPrompt}\n${text}` : text;
+    } else {
+      const role = m.role === "assistant" ? "Assistant" : "Human";
+      conversationParts.push(`${role}: ${text}`);
+    }
+  }
+
+  return { prompt: conversationParts.join("\n\n"), systemPrompt };
+}
+
+function openAiError(status: number, message: string): Response {
+  return new Response(JSON.stringify({
+    error: { message, type: "server_error", code: String(status) },
+  }), { status, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" } });
+}
+
+// ── Public API ───────────────────────────────────────────────────────
+
+interface SdkAccount {
+  id: string;
+  email?: string | null;
+  accessToken: string;
+}
+
+/** Forward an OpenAI-format chat completions request via SDK query() */
+export async function forwardOpenAiViaSdk(body: any, account: SdkAccount): Promise<Response> {
+  const model = mapModelToSdkModel(body.model || "sonnet");
+  const stream = body.stream ?? false;
+  const { prompt, systemPrompt } = buildPromptFromOpenAiMessages(body);
+  const env = buildSdkEnv(account.accessToken);
+
+  console.log(`[proxy-openai] ${stream ? "stream" : "non-stream"} → ${model} via ${account.email ?? account.id}`);
+
+  if (!stream) return handleNonStreaming(prompt, systemPrompt, model, env, body, account);
+  return handleStreaming(prompt, systemPrompt, model, env, body, account);
+}
+
+// ── Non-streaming ────────────────────────────────────────────────────
+
+async function handleNonStreaming(
+  prompt: string, systemPrompt: string | undefined,
+  model: "sonnet" | "opus" | "haiku",
+  env: Record<string, string | undefined>,
+  body: any, account: SdkAccount,
+): Promise<Response> {
+  try {
+    let fullContent = "";
+    const response = query({
+      prompt,
+      options: { maxTurns: 1, model, env, ...(systemPrompt && { systemPrompt }) },
+    });
+
+    for await (const message of response) {
+      if (message.type === "assistant") {
+        for (const block of (message as any).message?.content ?? []) {
+          if (block.type === "text") fullContent += block.text;
+        }
+      }
+    }
+
+    accountSelector.onSuccess(account.id);
+
+    return new Response(JSON.stringify({
+      id: `chatcmpl-${Date.now()}`,
+      object: "chat.completion",
+      created: Math.floor(Date.now() / 1000),
+      model: body.model || "claude-sonnet-4-6",
+      choices: [{
+        index: 0,
+        message: { role: "assistant", content: fullContent },
+        finish_reason: "stop",
+      }],
+      usage: { prompt_tokens: 0, completion_tokens: 0, total_tokens: 0 },
+    }), {
+      status: 200,
+      headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" },
+    });
+  } catch (error) {
+    console.error(`[proxy-openai] Non-stream error:`, (error as Error).message);
+    accountSelector.onRateLimit(account.id);
+    return openAiError(502, (error as Error).message);
+  }
+}
+
+// ── Streaming ────────────────────────────────────────────────────────
+
+async function handleStreaming(
+  prompt: string, systemPrompt: string | undefined,
+  model: "sonnet" | "opus" | "haiku",
+  env: Record<string, string | undefined>,
+  body: any, account: SdkAccount,
+): Promise<Response> {
+  const encoder = new TextEncoder();
+  const chatId = `chatcmpl-${Date.now()}`;
+  const created = Math.floor(Date.now() / 1000);
+  const modelName = body.model || "claude-sonnet-4-6";
+
+  const chunk = (delta: any, finishReason: string | null) => ({
+    id: chatId, object: "chat.completion.chunk", created, model: modelName,
+    choices: [{ index: 0, delta, finish_reason: finishReason }],
+  });
+
+  const readable = new ReadableStream({
+    async start(controller) {
+      const send = (data: any) => {
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\n\n`));
+      };
+
+      try {
+        const response = query({
+          prompt,
+          options: {
+            maxTurns: 1, model, env,
+            ...(systemPrompt && { systemPrompt }),
+            includePartialMessages: true,
+          },
+        });
+
+        // Initial chunk with role
+        send(chunk({ role: "assistant", content: "" }, null));
+
+        const skipBlockIndices = new Set<number>();
+
+        for await (const message of response) {
+          if (message.type !== "stream_event") continue;
+
+          const event = (message as any).event;
+          const eventType = event.type as string;
+          const eventIndex = event.index as number | undefined;
+
+          // Track and skip tool_use blocks
+          if (eventType === "content_block_start" && event.content_block?.type === "tool_use") {
+            if (eventIndex !== undefined) skipBlockIndices.add(eventIndex);
+            continue;
+          }
+          if (eventIndex !== undefined && skipBlockIndices.has(eventIndex)) continue;
+
+          // Text deltas → OpenAI content chunks
+          if (eventType === "content_block_delta" && event.delta?.type === "text_delta") {
+            const text = event.delta.text ?? "";
+            if (text) send(chunk({ content: text }, null));
+          }
+
+          // Message complete → finish chunk
+          if (eventType === "message_stop") {
+            send(chunk({}, "stop"));
+          }
+        }
+
+        accountSelector.onSuccess(account.id);
+        controller.enqueue(encoder.encode("data: [DONE]\n\n"));
+        controller.close();
+      } catch (error) {
+        console.error(`[proxy-openai] Stream error:`, (error as Error).message);
+        accountSelector.onRateLimit(account.id);
+        send(chunk({ content: `\n\nError: ${(error as Error).message}` }, "stop"));
+        controller.enqueue(encoder.encode("data: [DONE]\n\n"));
+        controller.close();
+      }
+    },
+  });
+
+  return new Response(readable, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      "Connection": "keep-alive",
+      "Access-Control-Allow-Origin": "*",
+    },
+  });
+}

package/src/services/proxy.service.ts

@@ -2,6 +2,7 @@ import { getConfigValue, setConfigValue } from "./db.service.ts";
 import { accountSelector } from "./account-selector.service.ts";
 import { accountService } from "./account.service.ts";
 import { forwardViaSdk } from "./proxy-sdk-bridge.ts";
+import { forwardOpenAiViaSdk } from "./proxy-openai-bridge.ts";
 import { randomBytes } from "node:crypto";
 
 const PROXY_ENABLED_KEY = "proxy_enabled";
@@ -86,6 +87,38 @@ class ProxyService {
     return this.forwardDirect(path, method, headers, body, token, account);
   }
 
+  /**
+   * Forward an OpenAI-format chat completions request via SDK query().
+   * Always uses SDK bridge (works for both OAuth and API key accounts).
+   */
+  async forwardOpenAi(body: string): Promise<Response> {
+    const account = accountSelector.next();
+    if (!account) {
+      return new Response(
+        JSON.stringify({ error: { message: "No active accounts available", type: "server_error" } }),
+        { status: 401, headers: { "Content-Type": "application/json" } },
+      );
+    }
+
+    let token = account.accessToken;
+    if (token.startsWith("sk-ant-oat")) {
+      const fresh = await accountService.ensureFreshToken(account.id);
+      if (fresh) token = fresh.accessToken;
+    }
+
+    try {
+      const parsed = JSON.parse(body);
+      this.requestCount++;
+      return await forwardOpenAiViaSdk(parsed, { id: account.id, email: account.email, accessToken: token });
+    } catch (e) {
+      console.error(`[proxy] OpenAI bridge error:`, (e as Error).message);
+      return new Response(
+        JSON.stringify({ error: { message: (e as Error).message, type: "server_error" } }),
+        { status: 502, headers: { "Content-Type": "application/json" } },
+      );
+    }
+  }
+
   /** Direct HTTP forward for API key accounts */
   private async forwardDirect(
     path: string,

package/src/web/components/settings/proxy-settings-section.tsx

@@ -131,46 +131,46 @@ export function ProxySettingsSection() {
         <div className="space-y-2 rounded-md border p-3 bg-muted/30">
           <div className="flex items-center justify-between">
             <h4 className="text-[11px] font-medium">Connection Info</h4>
-            <ProxyTestButton authKey={settings.authKey!} baseUrl={localBaseUrl} />
+            <ProxyTestButton authKey={settings.authKey!} baseUrl={window.location.origin} />
           </div>
 
-          {/* Local endpoint */}
+          {/* Anthropic endpoint */}
           <div className="space-y-1">
-            <Label className="text-[10px] text-muted-foreground">Local Endpoint</Label>
+            <Label className="text-[10px] text-muted-foreground">Anthropic Endpoint</Label>
             <div className="flex gap-1.5 items-center">
               <code className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate">
-                {localEndpoint}
+                {hasTunnel ? settings.proxyEndpoint : localEndpoint}
               </code>
               <Button
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => copyToClipboard(localEndpoint, "local")}
+                onClick={() => copyToClipboard(hasTunnel ? settings.proxyEndpoint! : localEndpoint, "anthropic")}
               >
-                {copied === "local" ? "Copied!" : <Copy className="size-3" />}
+                {copied === "anthropic" ? "Copied!" : <Copy className="size-3" />}
               </Button>
             </div>
           </div>
 
-          {/* Tunnel endpoint */}
-          {hasTunnel && settings.proxyEndpoint && (
-            <div className="space-y-1">
-              <Label className="text-[10px] text-muted-foreground">Public Endpoint (Tunnel)</Label>
-              <div className="flex gap-1.5 items-center">
-                <code className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate">
-                  {settings.proxyEndpoint}
-                </code>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-6 px-1.5 cursor-pointer shrink-0"
-                  onClick={() => copyToClipboard(settings.proxyEndpoint!, "tunnel")}
-                >
-                  {copied === "tunnel" ? "Copied!" : <Copy className="size-3" />}
-                </Button>
-              </div>
+          {/* OpenAI endpoint */}
+          <div className="space-y-1">
+            <Label className="text-[10px] text-muted-foreground">OpenAI-Compatible Endpoint</Label>
+            <div className="flex gap-1.5 items-center">
+              <code className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate">
+                {hasTunnel ? settings.openAiEndpoint : settings.localOpenAiEndpoint}
+              </code>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-1.5 cursor-pointer shrink-0"
+                onClick={() => copyToClipboard(
+                  hasTunnel ? settings.openAiEndpoint! : settings.localOpenAiEndpoint, "openai",
+                )}
+              >
+                {copied === "openai" ? "Copied!" : <Copy className="size-3" />}
+              </Button>
             </div>
-          )}
+          </div>
 
           {!hasTunnel && (
             <p className="text-[10px] text-muted-foreground">
@@ -178,21 +178,13 @@ export function ProxySettingsSection() {
             </p>
           )}
 
-          {/* Usage example */}
+          {/* Usage examples */}
           <div className="space-y-1 pt-1">
-            <Label className="text-[10px] text-muted-foreground">Usage Example</Label>
+            <Label className="text-[10px] text-muted-foreground">Anthropic Format</Label>
             <div className="relative">
               <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">
-{`# Set as base URL in your tool
-ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : localBaseUrl + "/proxy"}
-ANTHROPIC_API_KEY=${settings.authKey}
-
-# Or use curl
-curl ${hasTunnel ? settings.proxyEndpoint : localEndpoint} \\
-  -H "x-api-key: ${settings.authKey}" \\
-  -H "content-type: application/json" \\
-  -H "anthropic-version: 2023-06-01" \\
-  -d '{"model":"claude-sonnet-4-6","max_tokens":1024,"messages":[{"role":"user","content":"Hello"}]}'`}
+{`ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : localBaseUrl + "/proxy"}
+ANTHROPIC_API_KEY=${settings.authKey}`}
               </pre>
               <Button
                 variant="ghost"
@@ -200,10 +192,31 @@ curl ${hasTunnel ? settings.proxyEndpoint : localEndpoint} \\
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
                 onClick={() => copyToClipboard(
                   `ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : localBaseUrl + "/proxy"}\nANTHROPIC_API_KEY=${settings.authKey}`,
-                  "example",
+                  "anthropic-env",
+                )}
+              >
+                {copied === "anthropic-env" ? "Copied!" : <Copy className="size-2.5" />}
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <Label className="text-[10px] text-muted-foreground">OpenAI Format</Label>
+            <div className="relative">
+              <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">
+{`OPENAI_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy/v1" : localBaseUrl + "/proxy/v1"}
+OPENAI_API_KEY=${settings.authKey}`}
+              </pre>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
+                onClick={() => copyToClipboard(
+                  `OPENAI_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy/v1" : localBaseUrl + "/proxy/v1"}\nOPENAI_API_KEY=${settings.authKey}`,
+                  "openai-env",
                 )}
               >
-                {copied === "example" ? "Copied!" : <Copy className="size-2.5" />}
+                {copied === "openai-env" ? "Copied!" : <Copy className="size-2.5" />}
               </Button>
             </div>
           </div>

package/src/web/components/settings/proxy-test-section.tsx

@@ -14,7 +14,6 @@ type EndpointFormat = "anthropic" | "openai";
 
 interface ProxyTestDialogProps {
   authKey: string;
-  /** Current page origin, e.g. http://localhost:3210 */
   baseUrl: string;
 }
 
@@ -36,7 +35,7 @@ export function ProxyTestButton(props: ProxyTestDialogProps) {
             Send a test request and inspect the raw response.
           </DialogDescription>
         </DialogHeader>
-        <ProxyTestForm {...props} />
+        {open && <ProxyTestForm {...props} />}
       </DialogContent>
     </Dialog>
   );
@@ -58,9 +57,13 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
     if (outputRef.current) outputRef.current.scrollTop = outputRef.current.scrollHeight;
   }, [output]);
 
-  const endpoint = format === "anthropic"
-    ? `${baseUrl}/proxy/v1/messages`
-    : `${baseUrl}/proxy/v1/chat/completions`;
+  // Clear output when switching format
+  const switchFormat = (f: EndpointFormat) => {
+    setFormat(f);
+    setOutput(null);
+    setError(null);
+    setElapsed(null);
+  };
 
   const runTest = async () => {
     setTesting(true);
@@ -69,17 +72,21 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
     setElapsed(null);
     const start = Date.now();
 
-    const isAnthropic = format === "anthropic";
-    const body = isAnthropic
+    const isOpenAi = format === "openai";
+    const endpoint = isOpenAi
+      ? `${baseUrl}/proxy/v1/chat/completions`
+      : `${baseUrl}/proxy/v1/messages`;
+
+    const body = isOpenAi
       ? JSON.stringify({ model, max_tokens: 256, stream: true, messages: [{ role: "user", content: message }] })
       : JSON.stringify({ model, max_tokens: 256, stream: true, messages: [{ role: "user", content: message }] });
 
     const headers: Record<string, string> = { "Content-Type": "application/json" };
-    if (isAnthropic) {
+    if (isOpenAi) {
+      headers["Authorization"] = `Bearer ${authKey}`;
+    } else {
       headers["x-api-key"] = authKey;
       headers["anthropic-version"] = "2023-06-01";
-    } else {
-      headers["Authorization"] = `Bearer ${authKey}`;
     }
 
     try {
@@ -114,15 +121,15 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
   };
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 min-w-0">
       {/* Endpoint format toggle */}
-      <div className="space-y-1.5">
-        <Label className="text-[11px]">Endpoint Format</Label>
+      <div className="space-y-1.5 min-w-0">
+        <Label className="text-[11px]">Auth Style</Label>
         <div className="flex gap-1">
           {(["anthropic", "openai"] as const).map((f) => (
             <button
               key={f}
-              onClick={() => setFormat(f)}
+              onClick={() => switchFormat(f)}
               className={`flex-1 h-8 rounded-md text-[11px] font-medium border transition-colors cursor-pointer ${
                 format === f
                   ? "bg-primary text-primary-foreground border-primary"
@@ -133,7 +140,9 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
             </button>
           ))}
         </div>
-        <code className="block text-[9px] font-mono text-muted-foreground truncate">{endpoint}</code>
+        <p className="text-[9px] text-muted-foreground">
+          {format === "anthropic" ? "x-api-key header" : "Authorization: Bearer header"}
+        </p>
       </div>
 
       {/* Model */}
@@ -159,7 +168,7 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             placeholder="Type a test message..."
-            className="h-9 text-[11px] flex-1"
+            className="h-9 text-[11px] flex-1 min-w-0"
             onKeyDown={(e) => { if (e.key === "Enter" && !testing) runTest(); }}
           />
           <Button
@@ -176,7 +185,7 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
 
       {/* Raw output */}
       {(output || error) && (
-        <div className="space-y-1">
+        <div className="space-y-1 min-w-0">
           <div className="flex items-center justify-between">
             <Label className="text-[10px] text-muted-foreground">Raw Response</Label>
             {elapsed != null && (

package/src/web/lib/api-settings.ts

@@ -191,8 +191,10 @@ export interface ProxySettings {
   authKey: string | null;
   requestCount: number;
   localEndpoint: string;
+  localOpenAiEndpoint: string;
   tunnelUrl: string | null;
   proxyEndpoint: string | null;
+  openAiEndpoint: string | null;
 }
 
 export function getProxySettings(): Promise<ProxySettings> {

package/dist/web/assets/keybindings-store-Ch4LMTQO.js

@@ -1 +0,0 @@
-import"./react-nm2Ru1Pt.js";import"./api-client-BKIT_Qeg.js";import{W as e}from"./index-GUlcYGYH.js";export{e as useKeybindingsStore};