@volter/twin-openrouter 0.1.0

package/client/openrouter-mirror.tsx

@@ -0,0 +1,221 @@
+import React, { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+
+type Model = { id: string; name: string; context_length: number; architecture?: { modality?: string }; pricing?: { prompt?: string; completion?: string } };
+type ModelEndpoints = Model & { endpoints?: Array<{ name: string; provider_name: string; context_length: number }> };
+type Generation = { id: string; model: string; created_at: string; total_cost: number; tokens_prompt: number; tokens_completion: number; streamed: boolean; provider_name?: string; finish_reason?: string };
+
+async function json<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(`${WIRE_BASE}${path}`, init);
+  const body = await response.json();
+  if (!response.ok) throw new Error(body?.error?.message ?? `request failed: ${response.status}`);
+  return body as T;
+}
+
+function ModelDetail({ model, onClose }: { model: string; onClose: () => void }) {
+  const [detail, setDetail] = useState<ModelEndpoints | null>(null);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    void json<{ data: ModelEndpoints }>(`/api/v1/models/${model}/endpoints`)
+      .then((body) => setDetail(body.data))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+  }, [model]);
+  return (
+    <div className="detail model-detail">
+      <div className="detail-head">
+        <h3>Model detail</h3>
+        <button onClick={onClose}>Close</button>
+      </div>
+      {error ? <div className="error">{error}</div> : null}
+      {detail ? (
+        <div className="detail-body">
+          <div className="mono">{detail.id}</div>
+          <div className="kv"><span>Context</span><span className="mono">{detail.context_length.toLocaleString()}</span></div>
+          <div className="kv"><span>Prompt $/tok</span><span className="mono">{detail.pricing?.prompt ?? '-'}</span></div>
+          <div className="kv"><span>Completion $/tok</span><span className="mono">{detail.pricing?.completion ?? '-'}</span></div>
+          <h4>Endpoints</h4>
+          {(detail.endpoints ?? []).map((endpoint) => (
+            <div className="row endpoint-row" key={endpoint.provider_name}>
+              <span>{endpoint.name}</span>
+              <span className="mono">{endpoint.provider_name}</span>
+              <span className="mono">{endpoint.context_length.toLocaleString()} ctx</span>
+            </div>
+          ))}
+        </div>
+      ) : (error ? null : <div className="empty">Loading…</div>)}
+    </div>
+  );
+}
+
+function Models({ models, onSelect }: { models: Model[]; onSelect: (id: string) => void }) {
+  return (
+    <section className="panel models-panel">
+      <h2>Models</h2>
+      <div className="rows">
+        {models.map((model) => (
+          <button className="row model-row" key={model.id} onClick={() => onSelect(model.id)}>
+            <div>
+              <strong>{model.name}</strong>
+              <span className="mono">{model.id}</span>
+            </div>
+            <span>{model.architecture?.modality ?? 'text->text'}</span>
+            <span className="mono">{model.context_length.toLocaleString()} ctx</span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function GenerationDetail({ id, onClose }: { id: string; onClose: () => void }) {
+  const [detail, setDetail] = useState<Generation | null>(null);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    void json<{ data: Generation }>(`/api/v1/generation?id=${encodeURIComponent(id)}`)
+      .then((body) => setDetail(body.data))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+  }, [id]);
+  return (
+    <div className="detail generation-detail">
+      <div className="detail-head">
+        <h3>Generation detail</h3>
+        <button onClick={onClose}>Close</button>
+      </div>
+      {error ? <div className="error">{error}</div> : null}
+      {detail ? (
+        <div className="detail-body">
+          <div className="mono">{detail.id}</div>
+          <div className="kv"><span>Model</span><span className="mono">{detail.model}</span></div>
+          <div className="kv"><span>Provider</span><span className="mono">{detail.provider_name ?? 'twin'}</span></div>
+          <div className="kv"><span>Finish</span><span className="mono">{detail.finish_reason ?? '-'}</span></div>
+          <div className="kv"><span>Prompt tokens</span><span className="mono">{detail.tokens_prompt}</span></div>
+          <div className="kv"><span>Completion tokens</span><span className="mono">{detail.tokens_completion}</span></div>
+          <div className="kv"><span>Total cost</span><span className="mono">${detail.total_cost.toFixed(8)}</span></div>
+        </div>
+      ) : (error ? null : <div className="empty">Loading…</div>)}
+    </div>
+  );
+}
+
+function Generations({ generations, onSelect }: { generations: Generation[]; onSelect: (id: string) => void }) {
+  return (
+    <section className="panel generations-panel">
+      <h2>Generations</h2>
+      <div className="rows">
+        {generations.length === 0 ? <div className="empty">No generations yet.</div> : null}
+        {generations.map((generation) => (
+          <button className="row generation-row" key={generation.id} onClick={() => onSelect(generation.id)}>
+            <div>
+              <strong>{generation.model}</strong>
+              <span className="mono">{generation.id}</span>
+            </div>
+            <span>{generation.streamed ? 'streamed' : 'standard'}</span>
+            <span className="mono">${generation.total_cost.toFixed(8)}</span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function Playground({ onComplete }: { onComplete: () => void }) {
+  const [model, setModel] = useState('google/gemini-3-flash-preview');
+  const [prompt, setPrompt] = useState('Summarize the OpenRouter twin.');
+  const [result, setResult] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function send() {
+    setBusy(true);
+    setError('');
+    setResult('');
+    try {
+      const body = await json<any>('/api/v1/chat/completions', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ model, messages: [{ role: 'user', content: prompt }] }),
+      });
+      setResult(body.choices?.[0]?.message?.content ?? '');
+      onComplete();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <section className="panel playground-panel">
+      <h2>Playground</h2>
+      <label>
+        <span>Model</span>
+        <input value={model} onChange={(event) => setModel(event.target.value)} />
+      </label>
+      <label>
+        <span>Prompt</span>
+        <textarea rows={4} value={prompt} onChange={(event) => setPrompt(event.target.value)} />
+      </label>
+      <button onClick={send} disabled={busy}>{busy ? 'Sending...' : 'Send'}</button>
+      {error ? <div className="error">{error}</div> : null}
+      {result ? (
+        <div className="stub-output">
+          <div className="stub-banner">Stub completion: deterministic twin output, no provider model was run.</div>
+          <pre>{result}</pre>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function App() {
+  const [models, setModels] = useState<Model[]>([]);
+  const [generations, setGenerations] = useState<Generation[]>([]);
+  const [loadError, setLoadError] = useState('');
+  const [selectedModel, setSelectedModel] = useState('');
+  const [selectedGeneration, setSelectedGeneration] = useState('');
+
+  async function load() {
+    try {
+      const [modelsBody, generationBody] = await Promise.all([
+        json<{ data: Model[] }>('/api/v1/models'),
+        json<{ data: Generation[] }>('/api/v1/generations'),
+      ]);
+      setModels(modelsBody.data);
+      setGenerations(generationBody.data);
+    } catch (err) {
+      setLoadError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  return (
+    <main className="app openrouter-mirror">
+      <header>
+        <div>
+          <h1>OpenRouter Twin</h1>
+          <p>OpenAI-compatible API simulation with deterministic stub output.</p>
+        </div>
+        <button onClick={() => void load()}>Refresh</button>
+      </header>
+      {loadError ? <div className="error">{loadError}</div> : null}
+      <div className="grid">
+        <Playground onComplete={() => void load()} />
+        <Models models={models} onSelect={setSelectedModel} />
+        <Generations generations={generations} onSelect={setSelectedGeneration} />
+      </div>
+      {selectedModel ? <ModelDetail model={selectedModel} onClose={() => setSelectedModel('')} /> : null}
+      {selectedGeneration ? <GenerationDetail id={selectedGeneration} onClose={() => setSelectedGeneration('')} /> : null}
+    </main>
+  );
+}
+
+const root = document.getElementById('root');
+if (root) createRoot(root).render(<App />);