add /chat route — in-app chat against the gateway

Uses the user's JWT against /v1/models + /v1/chat/completions (the
gateway's /v1 routes already accept JWT — no API key needed for the
in-app chat path; API keys remain for external SDK usage).

Single-turn UX for now, no streaming. Model picker reads /v1/models.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/routes.ts

@@ -6,4 +6,5 @@ export default [
   route('verify', 'routes/verify.tsx'),
   route('login', 'routes/login.tsx'),
   route('account', 'routes/account.tsx'),
+  route('chat', 'routes/chat.tsx'),
 ] satisfies RouteConfig;

app/routes/chat.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from 'react';
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.t4t-gateway.com';
+
+type Model = { id: string; object: 'model'; created: number; owned_by: string };
+type Message = { role: 'user' | 'assistant' | 'system'; content: string };
+type ChoiceMessage = { role: 'assistant'; content: string };
+type Completion = {
+  id: string;
+  choices: { index: number; message: ChoiceMessage; finish_reason: string }[];
+  usage?: { prompt_tokens: number; completion_tokens: number; total_tokens: number };
+};
+
+export function meta() {
+  return [{ title: 'Chat · t4t Gateway' }];
+}
+
+async function api<T>(path: string, init: RequestInit = {}): Promise<T> {
+  const token = typeof window !== 'undefined' ? localStorage.getItem('jwt') : null;
+  if (!token) throw new Error('Not authenticated');
+  const res = await fetch(`${API_URL}${path}`, {
+    ...init,
+    headers: {
+      ...(init.headers ?? {}),
+      Authorization: `Bearer ${token}`,
+      ...(init.body ? { 'Content-Type': 'application/json' } : {}),
+    },
+  });
+  if (res.status === 401) {
+    localStorage.removeItem('jwt');
+    window.location.href = '/login';
+    throw new Error('Unauthorized');
+  }
+  const body = await res.json();
+  if (!res.ok) throw new Error(body?.message ?? body?.error ?? `Request failed (${res.status})`);
+  return body as T;
+}
+
+export default function Chat() {
+  const [models, setModels] = useState<Model[]>([]);
+  const [model, setModel] = useState<string>('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loadingModels, setLoadingModels] = useState(true);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!localStorage.getItem('jwt')) {
+      window.location.href = '/login';
+      return;
+    }
+    (async () => {
+      try {
+        const list = await api<{ data: Model[] }>('/v1/models');
+        setModels(list.data);
+        if (list.data.length > 0) setModel(list.data[0].id);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoadingModels(false);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  async function send(e: React.FormEvent) {
+    e.preventDefault();
+    if (!input.trim() || !model || sending) return;
+    setError(null);
+    const userMsg: Message = { role: 'user', content: input };
+    const next = [...messages, userMsg];
+    setMessages(next);
+    setInput('');
+    setSending(true);
+    try {
+      const completion = await api<Completion>('/v1/chat/completions', {
+        method: 'POST',
+        body: JSON.stringify({ model, messages: next }),
+      });
+      const reply = completion.choices[0]?.message;
+      if (reply) {
+        setMessages([...next, { role: reply.role, content: reply.content }]);
+      } else {
+        throw new Error('No reply from model');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <main className='flex min-h-screen flex-col'>
+      <header className='border-b border-neutral-200 bg-white px-6 py-3'>
+        <div className='mx-auto flex max-w-3xl items-center justify-between'>
+          <div className='flex items-center gap-3'>
+            <a href='/account' className='text-sm font-medium text-neutral-700 hover:underline'>
+              ← Account
+            </a>
+            <span className='text-neutral-300'>|</span>
+            <h1 className='text-sm font-semibold'>Chat</h1>
+          </div>
+          <select
+            aria-label='Model'
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+            disabled={loadingModels || models.length === 0}
+            className='rounded-md border border-neutral-300 bg-white px-2 py-1 text-sm shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900'
+          >
+            {loadingModels && <option>Loading models…</option>}
+            {!loadingModels && models.length === 0 && <option>No models available</option>}
+            {models.map((m) => (
+              <option key={m.id} value={m.id}>
+                {m.id}
+              </option>
+            ))}
+          </select>
+        </div>
+      </header>
+
+      <div
+        ref={scrollRef}
+        className='mx-auto w-full max-w-3xl flex-1 overflow-y-auto px-6 py-6'
+      >
+        {messages.length === 0 && (
+          <p className='text-center text-sm text-neutral-500'>
+            Pick a model and send a message to start.
+          </p>
+        )}
+        <ul className='space-y-4'>
+          {messages.map((m, i) => (
+            <li
+              key={i}
+              className={
+                m.role === 'user' ? 'flex justify-end' : 'flex justify-start'
+              }
+            >
+              <div
+                className={
+                  m.role === 'user'
+                    ? 'max-w-[80%] rounded-lg bg-neutral-900 px-4 py-2 text-sm text-white'
+                    : 'max-w-[80%] whitespace-pre-wrap rounded-lg border border-neutral-200 bg-white px-4 py-2 text-sm shadow-sm'
+                }
+              >
+                {m.content}
+              </div>
+            </li>
+          ))}
+          {sending && (
+            <li className='flex justify-start'>
+              <div className='rounded-lg border border-neutral-200 bg-white px-4 py-2 text-sm text-neutral-500 shadow-sm'>
+                Thinking…
+              </div>
+            </li>
+          )}
+        </ul>
+      </div>
+
+      {error && (
+        <p className='mx-auto w-full max-w-3xl px-6 pb-2 text-sm text-red-700'>
+          {error}
+        </p>
+      )}
+
+      <form
+        onSubmit={send}
+        className='border-t border-neutral-200 bg-white px-6 py-3'
+      >
+        <div className='mx-auto flex max-w-3xl gap-2'>
+          <input
+            type='text'
+            placeholder='Message…'
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            disabled={sending || !model}
+            className='flex-1 rounded-md border border-neutral-300 px-3 py-2 text-sm shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900 disabled:opacity-50'
+          />
+          <button
+            type='submit'
+            disabled={sending || !model || !input.trim()}
+            className='inline-flex h-10 items-center rounded-md bg-neutral-900 px-4 text-sm font-medium text-white hover:bg-neutral-700 disabled:opacity-50'
+          >
+            Send
+          </button>
+        </div>
+      </form>
+    </main>
+  );
+}