@hienlh/ppm 0.19.4 → 0.19.5

package/src/services/proxy.service.ts

@@ -3,6 +3,8 @@ 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 { forwardAgentChatCompletions } from "./proxy-agent-bridge.ts";
+import { forwardAgentMessages } from "./proxy-agent-anthropic-bridge.ts";
 import { randomBytes } from "node:crypto";
 
 const PROXY_ENABLED_KEY = "proxy_enabled";
@@ -168,6 +170,58 @@ class ProxyService {
     }
   }
 
+  /**
+   * Run a provider's agent behind one of the two API dialects. Account rotation
+   * is the provider's own concern here — codex picks a CODEX_HOME — so unlike
+   * forwardOpenAi this must not claim a Claude account.
+   */
+  private async forwardAgent(
+    providerId: string,
+    body: string,
+    path: string,
+    run: (providerId: string, parsed: any) => Promise<Response>,
+    invalidJson: Response,
+    caller?: ProxyCallerMeta,
+  ): Promise<Response> {
+    const endpoint = `/${providerId}/v1/${path}`;
+    let parsed: { model?: string };
+    try {
+      parsed = JSON.parse(body);
+    } catch {
+      return invalidJson;
+    }
+
+    const start = performance.now();
+    this.requestCount++;
+    const response = await run(providerId, parsed);
+    const durationMs = Math.round(performance.now() - start);
+    insertProxyRequest({
+      endpoint, model: parsed.model, accountLabel: providerId,
+      callerIp: caller?.callerIp, callerUa: caller?.callerUa,
+      status: response.ok ? "success" : "error", durationMs,
+    });
+    console.log(`[proxy] POST ${endpoint} → ${response.status} ${durationMs}ms caller=${caller?.callerIp ?? "unknown"}`);
+    return response;
+  }
+
+  /** OpenAI dialect: `/proxy/<provider>/v1/chat/completions`. */
+  async forwardAgentChat(providerId: string, body: string, caller?: ProxyCallerMeta): Promise<Response> {
+    return this.forwardAgent(providerId, body, "chat/completions", forwardAgentChatCompletions,
+      new Response(
+        JSON.stringify({ error: { message: "Invalid JSON body", type: "invalid_request_error" } }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      ), caller);
+  }
+
+  /** Anthropic dialect: `/proxy/<provider>/v1/messages`. */
+  async forwardAgentMessages(providerId: string, body: string, caller?: ProxyCallerMeta): Promise<Response> {
+    return this.forwardAgent(providerId, body, "messages", forwardAgentMessages,
+      new Response(
+        JSON.stringify({ type: "error", error: { type: "invalid_request_error", message: "Invalid JSON body" } }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      ), caller);
+  }
+
   /** Direct HTTP forward for API key accounts */
   private async forwardDirect(
     path: string,

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

@@ -4,11 +4,22 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { getProxySettings, updateProxySettings, type ProxySettings } from "@/lib/api-settings";
+import { getProxySettings, updateProxySettings, getAISettings, type ProxySettings } from "@/lib/api-settings";
 import { copyToClipboard } from "@/lib/clipboard";
 import { ProxyTestButton } from "./proxy-test-section";
 
 export function ProxySettingsSection() {
+  /** Provider the connection info targets; "" is the unscoped Claude path. */
+  const [provider, setProvider] = useState("");
+  /** Providers reachable as agents, minus the internal mock. */
+  const [agentProviders, setAgentProviders] = useState<string[]>([]);
+
+  useEffect(() => {
+    getAISettings()
+      .then((s) => setAgentProviders(Object.keys(s.providers ?? {}).filter((id) => id !== "mock" && id !== "claude")))
+      .catch(() => setAgentProviders([]));
+  }, []);
+
   const [settings, setSettings] = useState<ProxySettings | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -59,6 +70,16 @@ export function ProxySettingsSection() {
   const localEndpoint = settings.localEndpoint;
   const localBaseUrl = localEndpoint.replace(/\/proxy\/v1\/messages$/, "");
 
+  // Both dialects hang off one prefix, so selecting a provider moves them
+  // together and the card cannot show a mismatched pair.
+  //   default:   <root>/proxy        → /v1/messages, /v1/chat/completions
+  //   provider:  <root>/proxy/codex  → same two paths underneath
+  const prefix = `${hasTunnel ? settings.tunnelUrl : localBaseUrl}/proxy${provider ? `/${provider}` : ""}`;
+  const anthropicEndpoint = `${prefix}/v1/messages`;
+  const openAiEndpoint = `${prefix}/v1/chat/completions`;
+  const anthropicEnv = `ANTHROPIC_BASE_URL=${prefix}\nANTHROPIC_API_KEY=${settings.authKey}`;
+  const openAiEnv = `OPENAI_BASE_URL=${prefix}/v1\nOPENAI_API_KEY=${settings.authKey}`;
+
   return (
     <div className="space-y-4">
       <div className="space-y-1.5">
@@ -135,18 +156,43 @@ export function ProxySettingsSection() {
             <ProxyTestButton authKey={settings.authKey!} baseUrl={window.location.origin} />
           </div>
 
+          {/* Target provider — the only thing that differs between the two
+              dialects below, so both are derived from one prefix. */}
+          <div className="space-y-1">
+            <Label className="text-[10px] text-muted-foreground">Provider</Label>
+            <div className="flex flex-wrap gap-1.5">
+              {[{ id: "", label: "Claude (default)" }, ...agentProviders.map((id) => ({ id, label: id }))].map((p) => (
+                <button
+                  key={p.id || "default"}
+                  type="button"
+                  onClick={() => setProvider(p.id)}
+                  className={`text-[10px] px-2.5 min-h-[36px] rounded-md border transition-colors cursor-pointer ${
+                    provider === p.id ? "border-primary bg-primary/15" : "border-border bg-muted/40 hover:bg-muted"
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+            {provider && (
+              <p className="text-[10px] text-muted-foreground">
+                Runs the {provider} agent per request (read-only sandbox, one turn). Slower than the default path.
+              </p>
+            )}
+          </div>
+
           {/* Anthropic endpoint */}
           <div className="space-y-1">
             <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">
-                {hasTunnel ? settings.proxyEndpoint : localEndpoint}
+                {anthropicEndpoint}
               </code>
               <Button
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => handleCopy(hasTunnel ? settings.proxyEndpoint! : localEndpoint, "anthropic")}
+                onClick={() => handleCopy(anthropicEndpoint, "anthropic")}
               >
                 {copied === "anthropic" ? "Copied!" : <Copy className="size-3" />}
               </Button>
@@ -158,15 +204,13 @@ export function ProxySettingsSection() {
             <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}
+                {openAiEndpoint}
               </code>
               <Button
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => handleCopy(
-                  hasTunnel ? settings.openAiEndpoint! : settings.localOpenAiEndpoint, "openai",
-                )}
+                onClick={() => handleCopy(openAiEndpoint, "openai")}
               >
                 {copied === "openai" ? "Copied!" : <Copy className="size-3" />}
               </Button>
@@ -183,18 +227,12 @@ export function ProxySettingsSection() {
           <div className="space-y-1 pt-1">
             <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">
-{`ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : localBaseUrl + "/proxy"}
-ANTHROPIC_API_KEY=${settings.authKey}`}
-              </pre>
+              <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">{anthropicEnv}</pre>
               <Button
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => handleCopy(
-                  `ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : localBaseUrl + "/proxy"}\nANTHROPIC_API_KEY=${settings.authKey}`,
-                  "anthropic-env",
-                )}
+                onClick={() => handleCopy(anthropicEnv, "anthropic-env")}
               >
                 {copied === "anthropic-env" ? "Copied!" : <Copy className="size-2.5" />}
               </Button>
@@ -204,18 +242,12 @@ ANTHROPIC_API_KEY=${settings.authKey}`}
           <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>
+              <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">{openAiEnv}</pre>
               <Button
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => handleCopy(
-                  `OPENAI_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy/v1" : localBaseUrl + "/proxy/v1"}\nOPENAI_API_KEY=${settings.authKey}`,
-                  "openai-env",
-                )}
+                onClick={() => handleCopy(openAiEnv, "openai-env")}
               >
                 {copied === "openai-env" ? "Copied!" : <Copy className="size-2.5" />}
               </Button>

package/dist/web/assets/proxy-settings-section-wRbiyQiA.js

@@ -1,3 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{S as t,x as n}from"./vendor-markdown-Ls5AcU91.js";import"./vendor-ui-CaeeFO0B.js";import{t as r}from"./copy-BewHj66E.js";import{t as i}from"./flask-conical-tp8gyZGh.js";import{t as a}from"./loader-circle-DPMrnLQ2.js";import"./api-client-oY1tC3tM.js";import"./portal-container-context-a399Hd9F.js";import{t as o}from"./button-BZtEJcUv.js";import{$t as s,J as c,Jt as l,Kn as u,Qt as d,W as f,Xt as p,Y as m,Yn as h,Yt as g,en as _,tn as v}from"./index-B1bzKRjJ.js";import{getProxySettings as y,updateProxySettings as b}from"./api-settings-CTMdz_VF.js";var x=e(t(),1),S=[{value:`claude-opus-5`,label:`Claude Opus 5`,hint:`most powerful`},{value:`claude-fable-5-1`,label:`Claude Fable 5.1`,hint:`flagship`},{value:`claude-fable-5`,label:`Claude Fable 5`,hint:`flagship`},{value:`claude-opus-4-8`,label:`Claude Opus 4.8`,hint:`powerful`},{value:`claude-opus-4-7`,label:`Claude Opus 4.7`,hint:`powerful`},{value:`claude-opus-4-6`,label:`Claude Opus 4.6`,hint:`powerful`},{value:`claude-sonnet-5`,label:`Claude Sonnet 5`,hint:`fast`},{value:`claude-sonnet-4-6`,label:`Claude Sonnet 4.6`,hint:`fast`},{value:`claude-haiku-4-5`,label:`Claude Haiku 4.5`,hint:`cheap`}];S.map(e=>e.value);var C=n(),w=`Hello! Reply briefly.`,T=`claude-opus-5`;function E(e){let[t,n]=(0,x.useState)(!1);return(0,C.jsxs)(l,{open:t,onOpenChange:n,children:[(0,C.jsx)(_,{asChild:!0,children:(0,C.jsxs)(o,{variant:`outline`,size:`sm`,className:`h-7 text-[11px] gap-1.5 cursor-pointer`,children:[(0,C.jsx)(i,{className:`size-3`}),`Test`]})}),(0,C.jsxs)(g,{className:`sm:max-w-md max-h-[85vh] overflow-y-auto`,children:[(0,C.jsxs)(d,{children:[(0,C.jsx)(s,{className:`text-sm`,children:`Test Proxy`}),(0,C.jsx)(p,{className:`text-[11px]`,children:`Send a test request and inspect the raw response.`})]}),t&&(0,C.jsx)(D,{...e})]})]})}function D({authKey:e,baseUrl:t}){let[n,r]=(0,x.useState)(`anthropic`),[i,s]=(0,x.useState)(w),[l,u]=(0,x.useState)(T),[d,f]=(0,x.useState)(!0),[p,g]=(0,x.useState)(!1),[_,v]=(0,x.useState)(null),[y,b]=(0,x.useState)(null),[E,D]=(0,x.useState)(null),O=(0,x.useRef)(null),k=(0,x.useRef)(null);(0,x.useEffect)(()=>{O.current?.select()},[]),(0,x.useEffect)(()=>{k.current&&(k.current.scrollTop=k.current.scrollHeight)},[_]);let A=e=>{r(e),v(null),b(null),D(null)},j=async()=>{g(!0),v(null),b(null),D(null);let r=Date.now(),a=n===`openai`,o=a?`${t}/proxy/v1/chat/completions`:`${t}/proxy/v1/messages`,s=JSON.stringify({model:l,max_tokens:256,stream:d,messages:[{role:`user`,content:i}]}),c={"Content-Type":`application/json`};a?c.Authorization=`Bearer ${e}`:(c[`x-api-key`]=e,c[`anthropic-version`]=`2023-06-01`);try{let e=await fetch(o,{method:`POST`,headers:c,body:s});if(!e.ok){let t=await e.text();b(`HTTP ${e.status}: ${t}`),g(!1),D(Date.now()-r);return}if(d){let t=e.body?.getReader();if(!t){b(`No response body`),g(!1);return}let n=new TextDecoder,i=``;for(;;){let{done:e,value:r}=await t.read();if(e)break;i+=n.decode(r,{stream:!0}),v(i)}D(Date.now()-r)}else{let t=await e.text();try{v(JSON.stringify(JSON.parse(t),null,2))}catch{v(t)}D(Date.now()-r)}}catch(e){b(e.message)}finally{g(!1),D(e=>e??Date.now()-r)}};return(0,C.jsxs)(`div`,{className:`space-y-3 min-w-0`,children:[(0,C.jsxs)(`div`,{className:`space-y-1.5 min-w-0`,children:[(0,C.jsx)(c,{className:`text-[11px]`,children:`Auth Style`}),(0,C.jsx)(`div`,{className:`flex gap-1`,children:[`anthropic`,`openai`].map(e=>(0,C.jsx)(`button`,{onClick:()=>A(e),className:`flex-1 h-8 rounded-md text-[11px] font-medium border transition-colors cursor-pointer ${n===e?`bg-primary text-primary-foreground border-primary`:`bg-muted text-muted-foreground border-transparent hover:bg-muted/80`}`,children:e===`anthropic`?`Anthropic`:`OpenAI`},e))}),(0,C.jsx)(`p`,{className:`text-[9px] text-muted-foreground`,children:n===`anthropic`?`x-api-key header`:`Authorization: Bearer header`})]}),(0,C.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,C.jsx)(c,{className:`text-[11px]`,children:`Model`}),(0,C.jsx)(`select`,{value:l,onChange:e=>u(e.target.value),className:`h-8 w-full rounded-md border bg-background px-2 text-[11px]`,children:S.map(e=>(0,C.jsx)(`option`,{value:e.value,children:e.value},e.value))})]}),(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(c,{className:`text-[11px]`,children:`Streaming`}),(0,C.jsx)(`div`,{className:`flex gap-1`,children:[!0,!1].map(e=>(0,C.jsx)(`button`,{onClick:()=>f(e),className:`h-7 px-3 rounded-md text-[11px] font-medium border transition-colors cursor-pointer ${d===e?`bg-primary text-primary-foreground border-primary`:`bg-muted text-muted-foreground border-transparent hover:bg-muted/80`}`,children:e?`Stream`:`JSON`},String(e)))})]}),(0,C.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,C.jsx)(c,{className:`text-[11px]`,children:`Message`}),(0,C.jsxs)(`div`,{className:`flex gap-1.5`,children:[(0,C.jsx)(m,{ref:O,value:i,onChange:e=>s(e.target.value),placeholder:`Type a test message...`,className:`h-9 text-[11px] flex-1 min-w-0`,onKeyDown:e=>{e.key===`Enter`&&!p&&j()}}),(0,C.jsxs)(o,{size:`sm`,className:`h-9 px-3 cursor-pointer shrink-0`,onClick:j,disabled:p||!i.trim(),children:[p?(0,C.jsx)(a,{className:`size-3.5 animate-spin`}):(0,C.jsx)(h,{className:`size-3.5`}),(0,C.jsx)(`span`,{className:`ml-1 text-[11px]`,children:p?`...`:`Send`})]})]})]}),(_||y)&&(0,C.jsxs)(`div`,{className:`space-y-1 min-w-0`,children:[(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(c,{className:`text-[10px] text-muted-foreground`,children:`Raw Response`}),E!=null&&(0,C.jsxs)(`span`,{className:`text-[9px] font-mono text-muted-foreground`,children:[(E/1e3).toFixed(1),`s`]})]}),y?(0,C.jsx)(`pre`,{className:`text-[9px] font-mono bg-error/10 text-error p-2 rounded overflow-auto max-h-52 whitespace-pre-wrap break-all`,children:y}):(0,C.jsx)(`pre`,{ref:k,className:`text-[9px] font-mono bg-muted p-2 rounded overflow-auto max-h-52 whitespace-pre-wrap break-all`,children:_})]})]})}function O(){let[e,t]=(0,x.useState)(null),[n,i]=(0,x.useState)(!0),[a,s]=(0,x.useState)(!1),[l,d]=(0,x.useState)(null),[p,h]=(0,x.useState)(null);(0,x.useEffect)(()=>{i(!0),y().then(t).catch(e=>d(e.message)).finally(()=>i(!1))},[]);let g=async e=>{s(!0),d(null);try{t(await b(e))}catch(e){d(e.message)}finally{s(!1)}},_=(e,t)=>{v(e),h(t),setTimeout(()=>h(null),2e3)};if(n||!e)return(0,C.jsxs)(`div`,{className:`space-y-2`,children:[(0,C.jsx)(`h3`,{className:`text-xs font-medium text-text-secondary`,children:`API Proxy`}),(0,C.jsx)(`p`,{className:`text-[11px] text-text-subtle`,children:l?`Error: ${l}`:`Loading...`})]});let S=!!e.authKey,w=!!e.tunnelUrl,T=e.localEndpoint,D=T.replace(/\/proxy\/v1\/messages$/,``);return(0,C.jsxs)(`div`,{className:`space-y-4`,children:[(0,C.jsx)(`div`,{className:`space-y-1.5`,children:(0,C.jsx)(`p`,{className:`text-[11px] text-muted-foreground`,children:`Expose your Claude accounts as an Anthropic-compatible API endpoint. External tools (OpenCode, Cursor, etc.) can use your accounts via this proxy.`})}),(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,C.jsx)(c,{className:`text-xs`,children:`Enable Proxy`}),(0,C.jsx)(`p`,{className:`text-[11px] text-muted-foreground`,children:`Accept API requests on /proxy/v1/messages`})]}),(0,C.jsx)(f,{checked:e.enabled,onCheckedChange:e=>g({enabled:e}),disabled:a})]}),(0,C.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,C.jsx)(c,{className:`text-[11px]`,children:`Auth Key`}),S?(0,C.jsxs)(`div`,{className:`flex gap-1.5`,children:[(0,C.jsx)(m,{readOnly:!0,value:e.authKey,className:`h-7 text-[11px] font-mono flex-1`}),(0,C.jsx)(o,{variant:`outline`,size:`sm`,className:`h-7 px-2 cursor-pointer shrink-0`,onClick:()=>_(e.authKey,`key`),children:p===`key`?`Copied!`:(0,C.jsx)(r,{className:`size-3`})}),(0,C.jsx)(o,{variant:`outline`,size:`sm`,className:`h-7 px-2 cursor-pointer shrink-0`,onClick:()=>g({generateKey:!0}),disabled:a,children:(0,C.jsx)(u,{className:`size-3`})})]}):(0,C.jsx)(o,{variant:`outline`,size:`sm`,className:`h-7 text-xs cursor-pointer`,onClick:()=>g({generateKey:!0}),disabled:a,children:`Generate Auth Key`}),(0,C.jsx)(`p`,{className:`text-[10px] text-muted-foreground`,children:`Use as Bearer token or x-api-key when calling the proxy.`})]}),e.enabled&&S&&(0,C.jsxs)(`div`,{className:`space-y-2 rounded-md border p-3 bg-muted/30`,children:[(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(`h4`,{className:`text-[11px] font-medium`,children:`Connection Info`}),(0,C.jsx)(E,{authKey:e.authKey,baseUrl:window.location.origin})]}),(0,C.jsxs)(`div`,{className:`space-y-1`,children:[(0,C.jsx)(c,{className:`text-[10px] text-muted-foreground`,children:`Anthropic Endpoint`}),(0,C.jsxs)(`div`,{className:`flex gap-1.5 items-center`,children:[(0,C.jsx)(`code`,{className:`text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate`,children:w?e.proxyEndpoint:T}),(0,C.jsx)(o,{variant:`ghost`,size:`sm`,className:`h-6 px-1.5 cursor-pointer shrink-0`,onClick:()=>_(w?e.proxyEndpoint:T,`anthropic`),children:p===`anthropic`?`Copied!`:(0,C.jsx)(r,{className:`size-3`})})]})]}),(0,C.jsxs)(`div`,{className:`space-y-1`,children:[(0,C.jsx)(c,{className:`text-[10px] text-muted-foreground`,children:`OpenAI-Compatible Endpoint`}),(0,C.jsxs)(`div`,{className:`flex gap-1.5 items-center`,children:[(0,C.jsx)(`code`,{className:`text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate`,children:w?e.openAiEndpoint:e.localOpenAiEndpoint}),(0,C.jsx)(o,{variant:`ghost`,size:`sm`,className:`h-6 px-1.5 cursor-pointer shrink-0`,onClick:()=>_(w?e.openAiEndpoint:e.localOpenAiEndpoint,`openai`),children:p===`openai`?`Copied!`:(0,C.jsx)(r,{className:`size-3`})})]})]}),!w&&(0,C.jsx)(`p`,{className:`text-[10px] text-muted-foreground`,children:`Start a Cloudflare tunnel (Share) to get a public URL.`}),(0,C.jsxs)(`div`,{className:`space-y-1 pt-1`,children:[(0,C.jsx)(c,{className:`text-[10px] text-muted-foreground`,children:`Anthropic Format`}),(0,C.jsxs)(`div`,{className:`relative`,children:[(0,C.jsx)(`pre`,{className:`text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre`,children:`ANTHROPIC_BASE_URL=${w?e.tunnelUrl+`/proxy`:D+`/proxy`}
-ANTHROPIC_API_KEY=${e.authKey}`}),(0,C.jsx)(o,{variant:`ghost`,size:`sm`,className:`absolute top-1 right-1 h-5 px-1 cursor-pointer`,onClick:()=>_(`ANTHROPIC_BASE_URL=${w?e.tunnelUrl+`/proxy`:D+`/proxy`}\nANTHROPIC_API_KEY=${e.authKey}`,`anthropic-env`),children:p===`anthropic-env`?`Copied!`:(0,C.jsx)(r,{className:`size-2.5`})})]})]}),(0,C.jsxs)(`div`,{className:`space-y-1`,children:[(0,C.jsx)(c,{className:`text-[10px] text-muted-foreground`,children:`OpenAI Format`}),(0,C.jsxs)(`div`,{className:`relative`,children:[(0,C.jsx)(`pre`,{className:`text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre`,children:`OPENAI_BASE_URL=${w?e.tunnelUrl+`/proxy/v1`:D+`/proxy/v1`}
-OPENAI_API_KEY=${e.authKey}`}),(0,C.jsx)(o,{variant:`ghost`,size:`sm`,className:`absolute top-1 right-1 h-5 px-1 cursor-pointer`,onClick:()=>_(`OPENAI_BASE_URL=${w?e.tunnelUrl+`/proxy/v1`:D+`/proxy/v1`}\nOPENAI_API_KEY=${e.authKey}`,`openai-env`),children:p===`openai-env`?`Copied!`:(0,C.jsx)(r,{className:`size-2.5`})})]})]}),(0,C.jsx)(`div`,{className:`flex items-center gap-3 pt-1`,children:(0,C.jsxs)(`span`,{className:`text-[10px] text-muted-foreground`,children:[`Requests served: `,(0,C.jsx)(`span`,{className:`font-mono`,children:e.requestCount})]})})]}),a&&(0,C.jsx)(`p`,{className:`text-[11px] text-text-subtle`,children:`Saving...`}),l&&(0,C.jsx)(`p`,{className:`text-[11px] text-error`,children:l})]})}export{O as ProxySettingsSection};