@kazzle/app 0.1.693

package/templates/ai-app/components/server/index.ts

@@ -0,0 +1,238 @@
+/**
+ * {{APP_NAME}} — server component for the AI template.
+ *
+ * Thin proxy over Kazzle's AI gateway. Demonstrates the full modality
+ * surface customers can build on top of one `kzl_…` API key:
+ *
+ *   POST /chat        →  /ai/chat/completions     (OpenAI-shape, including structured output)
+ *   POST /image       →  /ai/images/generations   (standardized)
+ *   POST /speech      →  /ai/audio/speech         (binary audio)
+ *   POST /transcribe  →  /ai/audio/transcriptions (multipart in)
+ *   POST /video       →  /ai/video/generations    (async job)
+ *   GET  /video/:id   →  /ai/responses/:id        (poll)
+ *   GET  /health      →  local server/proxy health    (no upstream call)
+ *
+ * The browser only ever talks to this server, never to Kazzle directly —
+ * that's how the `kzl_…` key stays server-side and how customers add
+ * their own auth/rate-limits/business rules around AI usage.
+ *
+ * Env:
+ *   - `KAZZLE_API_KEY`              required.
+ *   - `KAZZLE_API_URL`              required API root, for example `https://api.kazzle.app`.
+ *   - `KAZZLE_AI_MODEL`             default `openai/gpt-5.5`.
+ *   - `KAZZLE_IMAGE_MODEL`          default `@cf/black-forest-labs/flux-1-schnell`.
+ *   - `KAZZLE_SPEECH_MODEL`         default `openai/tts-1`.
+ *   - `KAZZLE_TRANSCRIPTION_MODEL`  default `openai/whisper-1`.
+ *   - `KAZZLE_VIDEO_MODEL`          default `openai/sora-2`.
+ *
+ * Override any model via the request body (`{ model: '…' }`); the env
+ * default is just a sensible fallback.
+ */
+
+import { serve } from '@hono/node-server';
+import { Hono } from 'hono';
+import type { Context } from 'hono';
+import { cors } from 'hono/cors';
+
+const apiKey = process.env.KAZZLE_API_KEY;
+if (!apiKey) throw new Error('KAZZLE_API_KEY is required (mint with `api_key { action: "create" }`)');
+const apiUrl = process.env.KAZZLE_API_URL;
+if (!apiUrl) throw new Error('KAZZLE_API_URL is required and must point at the matching Kazzle API environment');
+
+const baseUrl = `${apiUrl.replace(/\/$/, '')}/ai`;
+const defaults = {
+  chat: process.env.KAZZLE_AI_MODEL || 'openai/gpt-5.5',
+  image: process.env.KAZZLE_IMAGE_MODEL || '@cf/black-forest-labs/flux-1-schnell',
+  speech: process.env.KAZZLE_SPEECH_MODEL || 'openai/tts-1',
+  transcription: process.env.KAZZLE_TRANSCRIPTION_MODEL || 'openai/whisper-1',
+  video: process.env.KAZZLE_VIDEO_MODEL || 'openai/sora-2',
+};
+
+type ChatMessage = { role: 'system' | 'user' | 'assistant'; content: string };
+type ChatCompletionPayload = { choices?: Array<{ message?: ChatMessage }>; model?: string };
+type JsonSchemaResponseFormat = { type: 'json_schema'; json_schema?: unknown };
+type ChatResponseBody = { message: ChatMessage; model: string; structured?: unknown };
+const authHeader = `Bearer ${apiKey}`;
+
+const app = new Hono();
+app.use('*', cors());
+
+app.get('/health', c => c.json({ ok: true, defaults }));
+
+// ── Chat ─────────────────────────────────────────────────────────────
+app.post('/chat', async c => {
+  const body = await readJsonBody(c);
+  if (!body) return c.json({ error: 'Invalid JSON body' }, 400);
+  const messages = Array.isArray(body.messages) ? body.messages : null;
+  if (!messages || messages.length === 0) {
+    return c.json({ error: '`messages` must be a non-empty array' }, 400);
+  }
+  for (const m of messages as Partial<ChatMessage>[]) {
+    if (m.role !== 'system' && m.role !== 'user' && m.role !== 'assistant') {
+      return c.json({ error: 'Each message needs role of system|user|assistant' }, 400);
+    }
+    if (typeof m.content !== 'string') {
+      return c.json({ error: 'Each message needs string content' }, 400);
+    }
+  }
+  const { model, stream, messages: _m, ...rest } = body;
+  const upstream = await fetch(`${baseUrl}/chat/completions`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: authHeader },
+    body: JSON.stringify({ model: model || defaults.chat, messages, ...rest, stream: false }),
+  });
+  if (!upstream.ok) return c.json({ error: `Upstream ${upstream.status}: ${await upstream.text()}` }, 502);
+  const data = await upstream.json() as ChatCompletionPayload;
+  const assistant = data.choices?.[0]?.message;
+  if (!assistant?.content) return c.json({ error: 'Upstream returned no assistant message' }, 502);
+  const response: ChatResponseBody = {
+    message: assistant,
+    model: data.model ?? (typeof model === 'string' ? model : defaults.chat),
+  };
+  if (isJsonSchemaResponseFormat(body.response_format)) {
+    const parsed = parseStructuredContent(assistant.content);
+    if (!parsed.ok) return c.json({ error: parsed.error }, 502);
+    response.structured = parsed.value;
+  }
+  return c.json(response);
+});
+
+// ── Image ────────────────────────────────────────────────────────────
+// Standardized output: `{ images: [{ url? b64? mimeType }] }`. The proxy
+// hands us this shape regardless of provider so the UI can render either
+// a data URL (from b64) or a remote URL without provider branching.
+app.post('/image', async c => {
+  const body = await readJsonBody(c);
+  if (!body || typeof body.prompt !== 'string' || !body.prompt.trim()) {
+    return c.json({ error: '`prompt` is required' }, 400);
+  }
+  const { model, prompt, ...rest } = body;
+  const upstream = await fetch(`${baseUrl}/images/generations`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: authHeader },
+    body: JSON.stringify({ model: model || defaults.image, prompt, ...rest }),
+  });
+  return passthroughJson(upstream);
+});
+
+// ── Speech (TTS, binary) ─────────────────────────────────────────────
+// Returns raw audio bytes. The Content-Type tells the browser/client
+// which decoder to use; the UI just hands it to <audio>.
+app.post('/speech', async c => {
+  const body = await readJsonBody(c);
+  if (!body || typeof body.text !== 'string' || !body.text.trim()) {
+    return c.json({ error: '`text` is required' }, 400);
+  }
+  const { model, voice, format, ...rest } = body;
+  const upstream = await fetch(`${baseUrl}/audio/speech`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: authHeader },
+    body: JSON.stringify({
+      model: model || defaults.speech,
+      voice: voice || 'alloy',
+      format: format || 'mp3',
+      ...rest,
+      text: body.text,
+    }),
+  });
+  if (!upstream.ok) return c.json({ error: `Upstream ${upstream.status}: ${await upstream.text()}` }, 502);
+  const bytes = new Uint8Array(await upstream.arrayBuffer());
+  return new Response(bytes, {
+    status: 200,
+    headers: { 'content-type': upstream.headers.get('content-type') || 'audio/mpeg' },
+  });
+});
+
+// ── Transcription (multipart in, JSON out) ──────────────────────────
+// Accepts `multipart/form-data` with `file` (audio bytes) and optional
+// `model`, `language`, `prompt`. Forwards as multipart to Kazzle.
+app.post('/transcribe', async c => {
+  const form = await c.req.parseBody();
+  const file = form.file as Blob | undefined;
+  if (!file || typeof (file as Blob).arrayBuffer !== 'function') {
+    return c.json({ error: '`file` is required (multipart/form-data)' }, 400);
+  }
+  const upstreamForm = new FormData();
+  upstreamForm.append('model', String(form.model || defaults.transcription));
+  if (typeof form.language === 'string') upstreamForm.append('language', form.language);
+  if (typeof form.prompt === 'string') upstreamForm.append('prompt', form.prompt);
+  // Re-wrap as a Blob so undici/Bun's FormData sets a clean file part —
+  // forwarding the parsed Blob directly preserves whatever Hono parsed.
+  const audio = new Blob([new Uint8Array(await file.arrayBuffer())], { type: file.type || 'audio/mpeg' });
+  upstreamForm.append('file', audio, (file as Blob & { name?: string }).name || 'audio.bin');
+  const upstream = await fetch(`${baseUrl}/audio/transcriptions`, {
+    method: 'POST',
+    headers: { Authorization: authHeader },
+    body: upstreamForm,
+  });
+  return passthroughJson(upstream);
+});
+
+// ── Video (async) ────────────────────────────────────────────────────
+// Returns `{ jobId, status, pollUrl }`. The UI submits a prompt, gets a
+// job id, and polls `/video/:id` until status is `succeeded` (then
+// reads `output.videoUrl`) or `failed`.
+app.post('/video', async c => {
+  const body = await readJsonBody(c);
+  if (!body || typeof body.prompt !== 'string' || !body.prompt.trim()) {
+    return c.json({ error: '`prompt` is required' }, 400);
+  }
+  const { model, prompt, ...rest } = body;
+  const upstream = await fetch(`${baseUrl}/video/generations`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: authHeader },
+    body: JSON.stringify({ model: model || defaults.video, prompt, ...rest }),
+  });
+  return passthroughJson(upstream);
+});
+
+app.get('/video/:id', async c => {
+  const id = c.req.param('id');
+  const upstream = await fetch(`${baseUrl}/responses/${encodeURIComponent(id)}`, {
+    headers: { Authorization: authHeader },
+  });
+  return passthroughJson(upstream);
+});
+
+// ── helpers ──────────────────────────────────────────────────────────
+
+async function readJsonBody(c: Context): Promise<Record<string, unknown> | null> {
+  try { return await c.req.json<Record<string, unknown>>(); } catch { return null; }
+}
+
+function isJsonSchemaResponseFormat(value: unknown): value is JsonSchemaResponseFormat {
+  return typeof value === 'object'
+    && value !== null
+    && 'type' in value
+    && value.type === 'json_schema';
+}
+
+function parseStructuredContent(content: string): { ok: true; value: unknown } | { ok: false; error: string } {
+  try {
+    return { ok: true, value: JSON.parse(content) as unknown };
+  } catch {
+    return { ok: false, error: 'Upstream returned invalid structured JSON' };
+  }
+}
+
+async function passthroughJson(upstream: Response): Promise<Response> {
+  // We don't trust the upstream's content-encoding/length when we
+  // re-emit. The Kazzle proxy may pass through Cloudflare's framing
+  // headers; reading the body as text strips that.
+  const text = await upstream.text();
+  return new Response(text, {
+    status: upstream.status,
+    headers: { 'content-type': 'application/json' },
+  });
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+//  DO NOT CHANGE THE NEXT 4 LINES.  DO NOT ADD FALLBACKS.  DO NOT HARDCODE.
+//  PORT and HOST are injected by `kazzle run`. Missing values must throw.
+// ─────────────────────────────────────────────────────────────────────────
+if (!process.env.PORT || !process.env.HOST) {
+  throw new Error('PORT and HOST must be set by "kazzle run" — never hardcode them.');
+}
+const port = Number(process.env.PORT);
+const hostname = process.env.HOST;
+serve({ fetch: app.fetch, port, hostname });

package/templates/ai-app/components/server/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{APP_SLUG}}-server",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "bun run index.ts",
+    "dev": "kazzle run -- bun --watch index.ts",
+    "typecheck": "tsc --noEmit --allowImportingTsExtensions",
+    "check": "bun run typecheck"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.13.0",
+    "hono": "^4.12.16"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.6",
+    "typescript": "^5.8.3"
+  }
+}

package/templates/ai-app/components/server/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["bun"]
+  },
+  "include": ["*.ts"]
+}

package/templates/ai-app/components/ui/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{APP_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/ai-app/components/ui/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "{{APP_SLUG}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "kazzle run -- vite",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "preview": "kazzle run -- vite preview",
+    "check": "bun run typecheck && bun run build"
+  },
+  "dependencies": {
+    "@kazzle/app": "{{KAZZLE_APP_VERSION}}",
+    "@vitejs/plugin-react": "^4.5.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^6.3.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.8.3"
+  }
+}

package/templates/ai-app/components/ui/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="14" fill="hsl(230,65%,88%)"/>
+  <text x="32" y="46" text-anchor="middle" font-family="system-ui,sans-serif" font-size="40" font-weight="600" fill="hsl(230,50%,25%)">K</text>
+</svg>

package/templates/ai-app/components/ui/src/App.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { ChatTab } from './tabs/chat-tab';
+import { ExtractTab } from './tabs/extract-tab';
+import { ImageTab } from './tabs/image-tab';
+import { SpeechTab } from './tabs/speech-tab';
+import { TranscribeTab } from './tabs/transcribe-tab';
+import { VideoTab } from './tabs/video-tab';
+import type { ModalityTab } from './types';
+
+const TABS: Array<{ id: ModalityTab; label: string }> = [
+  { id: 'chat', label: 'Chat' },
+  { id: 'extract', label: 'Extract' },
+  { id: 'image', label: 'Image' },
+  { id: 'speech', label: 'Speech' },
+  { id: 'transcribe', label: 'Transcribe' },
+  { id: 'video', label: 'Video' },
+];
+
+export function App() {
+  const [tab, setTab] = useState<ModalityTab>('chat');
+
+  return (
+    <main className="app-shell">
+      <header className="header">
+        <p className="eyebrow">{'{{APP_NAME}}'}</p>
+        <h1>Kazzle AI playground</h1>
+      </header>
+
+      <nav className="tabs">
+        {TABS.map(t => (
+          <button
+            key={t.id}
+            className={t.id === tab ? 'tab active' : 'tab'}
+            onClick={() => setTab(t.id)}
+            data-testid={`tab-${t.id}`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </nav>
+
+      <section className="panel">
+        {tab === 'chat' ? <ChatTab /> : null}
+        {tab === 'extract' ? <ExtractTab /> : null}
+        {tab === 'image' ? <ImageTab /> : null}
+        {tab === 'speech' ? <SpeechTab /> : null}
+        {tab === 'transcribe' ? <TranscribeTab /> : null}
+        {tab === 'video' ? <VideoTab /> : null}
+      </section>
+    </main>
+  );
+}

package/templates/ai-app/components/ui/src/api.ts

@@ -0,0 +1,85 @@
+/**
+ * Browser → template-server client. Mirrors every endpoint in
+ * `components/server/index.ts`. Each function builds a request, throws on
+ * non-2xx with the server's error body, and parses the response — keeping
+ * the React components free of fetch boilerplate.
+ *
+ * IMPORTANT: keep these as relative requests. Kazzle injects the
+ * sibling server URL into Vite only so the dev-server proxy can route these
+ * calls inside the checkout computer. Browser code must not read or fetch
+ * KAZZLE_APP_COMPONENT_*_URL directly.
+ */
+
+import type {
+  AsyncJob,
+  ChatMessage,
+  ChatOptions,
+  ChatResponse,
+  ImageResult,
+  StructuredOutputSchema,
+  TranscriptionResult,
+} from './types';
+
+async function jsonRequest<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(`${path} failed: ${res.status} ${await res.text()}`);
+  return res.json() as Promise<T>;
+}
+
+export async function sendChat(messages: ChatMessage[], options: ChatOptions = {}): Promise<ChatMessage> {
+  const data = await jsonRequest<ChatResponse>('/chat', { messages, ...options });
+  return data.message;
+}
+
+export async function sendStructuredChat<T>(
+  messages: ChatMessage[],
+  jsonSchema: StructuredOutputSchema,
+  options: Omit<ChatOptions, 'response_format'> = {},
+): Promise<T> {
+  const data = await jsonRequest<ChatResponse>('/chat', {
+    messages,
+    ...options,
+    response_format: {
+      type: 'json_schema',
+      json_schema: jsonSchema,
+    },
+  });
+  if (!('structured' in data)) throw new Error('/chat returned no structured output');
+  return data.structured as T;
+}
+
+export async function generateImage(prompt: string): Promise<ImageResult> {
+  return jsonRequest<ImageResult>('/image', { prompt });
+}
+
+export async function synthesizeSpeech(text: string, voice = 'alloy'): Promise<Blob> {
+  const res = await fetch('/speech', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ text, voice }),
+  });
+  if (!res.ok) throw new Error(`/speech failed: ${res.status} ${await res.text()}`);
+  return res.blob();
+}
+
+export async function transcribeAudio(audio: Blob): Promise<TranscriptionResult> {
+  const form = new FormData();
+  form.append('file', audio, 'audio.mp3');
+  const res = await fetch('/transcribe', { method: 'POST', body: form });
+  if (!res.ok) throw new Error(`/transcribe failed: ${res.status} ${await res.text()}`);
+  return res.json() as Promise<TranscriptionResult>;
+}
+
+export async function startVideoJob(prompt: string): Promise<AsyncJob> {
+  return jsonRequest<AsyncJob>('/video', { prompt });
+}
+
+export async function pollVideoJob(jobId: string): Promise<AsyncJob> {
+  const res = await fetch(`/video/${encodeURIComponent(jobId)}`);
+  if (!res.ok) throw new Error(`/video/${jobId} failed: ${res.status} ${await res.text()}`);
+  return res.json() as Promise<AsyncJob>;
+}

package/templates/ai-app/components/ui/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles/theme.css';
+import './styles/app.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/templates/ai-app/components/ui/src/styles/app.css

@@ -0,0 +1,210 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ *  App-specific component classes for the AI playground chrome.
+ *
+ *  The shared design system lives in `theme.css` (Tailwind v4 + design tokens
+ *  + generic primitives like `.btn`, `.card`, `.input`). This file adds the
+ *  few component classes that are specific to THIS app's layout — the tab
+ *  bar, chat transcript, and message bubbles — which are reused across every
+ *  tab in `src/tabs/`.
+ *
+ *  For NEW UI, prefer Tailwind utilities + the `theme.css` primitives. Only
+ *  add a class here when the same component markup repeats across tabs.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+@layer components {
+  .app-shell {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    min-height: 100vh;
+    max-width: 48rem;
+    margin: 0 auto;
+    padding: 1.5rem;
+    gap: 1rem;
+  }
+
+  .header {
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+  }
+  .header h1 {
+    font-size: 1.375rem;
+    flex: 1;
+  }
+  .eyebrow {
+    margin: 0;
+    letter-spacing: 0.12em;
+    font-size: 0.6875rem;
+    color: var(--color-muted);
+  }
+
+  .tabs {
+    display: flex;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--color-border);
+  }
+  .tab {
+    background: transparent;
+    border: none;
+    color: var(--color-muted);
+    padding: 0.5rem 0.875rem;
+    border-radius: 0.5rem 0.5rem 0 0;
+    cursor: pointer;
+    font: inherit;
+  }
+  .tab.active {
+    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
+    color: var(--color-fg);
+  }
+
+  .panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .tab-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-height: 0;
+  }
+
+  .image-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
+    gap: 0.75rem;
+  }
+  .image-grid img {
+    width: 100%;
+    border-radius: 0.625rem;
+    background: color-mix(in srgb, var(--color-muted) 10%, transparent);
+  }
+  audio,
+  video {
+    width: 100%;
+    border-radius: 0.625rem;
+  }
+
+  .upload {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 0.875rem;
+    border: 1px dashed var(--color-border);
+    border-radius: 0.625rem;
+    cursor: pointer;
+  }
+
+  .transcript {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow-y: auto;
+    padding: 0.5rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-app);
+    min-height: 17.5rem;
+  }
+  .message {
+    display: flex;
+    flex-direction: column;
+    padding: 0.625rem 0.875rem;
+    border-radius: 0.625rem;
+    background: color-mix(in srgb, var(--color-muted) 8%, transparent);
+  }
+  .message-user {
+    align-self: flex-end;
+    background: color-mix(in srgb, var(--color-accent) 25%, transparent);
+  }
+  .message-assistant {
+    align-self: flex-start;
+  }
+  .message .who {
+    font-size: 0.6875rem;
+    color: var(--color-muted);
+    letter-spacing: 0.08em;
+  }
+  .message .body {
+    margin: 0.25rem 0 0;
+    white-space: pre-wrap;
+    line-height: 1.5;
+  }
+  .message.pending .body {
+    color: var(--color-muted);
+  }
+
+  .empty {
+    margin: auto;
+    color: var(--color-muted);
+  }
+
+  .error {
+    margin: 0;
+    padding: 0.625rem 0.875rem;
+    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
+    color: var(--color-danger);
+    border-radius: 0.625rem;
+  }
+
+  .composer {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .composer input,
+  .stack-form textarea {
+    flex: 1;
+    padding: 0.625rem 0.75rem;
+    background: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    border-radius: 0.625rem;
+    color: inherit;
+    font: inherit;
+  }
+  .stack-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .stack-form textarea {
+    min-height: 8.75rem;
+    resize: vertical;
+  }
+  .composer button,
+  .stack-form button {
+    padding: 0.625rem 1rem;
+    background: var(--color-accent);
+    border: none;
+    border-radius: 0.625rem;
+    color: var(--color-accent-fg);
+    cursor: pointer;
+    font: inherit;
+  }
+  .composer button:disabled,
+  .stack-form button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .ghost {
+    background: transparent;
+    border: 1px solid var(--color-border);
+    color: var(--color-fg);
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font: inherit;
+  }
+  .ghost:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .structured-result {
+    padding: 0.75rem 0.875rem;
+    background: color-mix(in srgb, #22c55e 12%, transparent);
+    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
+    border-radius: 0.625rem;
+  }
+}