@kazzle/app 0.1.693

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

@@ -0,0 +1,181 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ *  Kazzle app theme — the ONE styling entry point for this app.
+ *
+ *  This file is the design system. It is imported once (in `main.tsx`) and
+ *  gives you three things, in order:
+ *
+ *    1. Tailwind v4            — every utility class (`flex`, `gap-4`,
+ *                                `rounded-xl`, `text-zinc-500`, …) works in
+ *                                your JSX. No config file, no PostCSS setup.
+ *    2. Design tokens (@theme) — colors, radius, fonts as CSS variables. Edit
+ *                                these to re-skin the whole app at once.
+ *    3. Primitives (@layer)    — a few ready-made classes (`.btn`, `.card`,
+ *                                `.input`, `.field`, `.page`, `.stack`,
+ *                                `.row`) so common UI looks good with zero
+ *                                effort.
+ *
+ *  HOW TO STYLE — pick whichever is easier, mix freely:
+ *    • Tailwind utilities in `className` for one-off layout/spacing.
+ *    • A primitive class (`.btn`, `.card`) for the common building blocks.
+ *
+ *  WHY IT'S BUILT THIS WAY: styles live in the markup (utilities) or in named
+ *  primitives here — never in a separate per-screen stylesheet keyed to class
+ *  names you have to keep in sync. Rewriting a component can't silently strip
+ *  its styling, because the styling travels with the elements.
+ *
+ *  TO EXTEND: add new design tokens under `@theme`, and add new reusable
+ *  building blocks under `@layer components`. Keep app-specific one-offs as
+ *  inline Tailwind utilities in the component instead of adding a class here.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+@import "tailwindcss";
+
+/* ── Design tokens ──────────────────────────────────────────────────────────
+ * Exposed to Tailwind as `bg-surface`, `text-fg`, `text-muted`,
+ * `bg-accent`, `rounded-app`, etc. Change a value here and every utility and
+ * primitive that references it updates at once. */
+@theme {
+  --color-bg: #0b0f1a;
+  --color-surface: #131a2a;
+  --color-surface-raised: #1b2438;
+  --color-fg: #e8edf7;
+  --color-muted: #94a3b8;
+  --color-border: rgba(148, 163, 184, 0.18);
+  --color-accent: #6366f1;
+  --color-accent-hover: #4f46e5;
+  --color-accent-fg: #ffffff;
+  --color-danger: #f87171;
+
+  --radius-app: 0.875rem;
+
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* ── Base ────────────────────────────────────────────────────────────────────
+ * Sensible document defaults so even unstyled markup reads well. */
+@layer base {
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1 {
+    font-size: 1.875rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
+/* ── Primitives ──────────────────────────────────────────────────────────────
+ * Reusable building blocks. Use them directly (`<button class="btn btn-primary">`)
+ * or layer Tailwind utilities on top. Add new ones here when a pattern repeats. */
+@layer components {
+  /* Page wrapper — centers content with comfortable gutters. */
+  .page {
+    width: min(100% - 2rem, 48rem);
+    margin-inline: auto;
+    padding-block: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  /* Vertical / horizontal stacks. */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  /* Card surface. */
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-app);
+    padding: 1.25rem;
+  }
+
+  /* Buttons. `.btn` is the neutral base; add `.btn-primary` for the accent. */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1rem;
+    border-radius: var(--radius-app);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-raised);
+    color: var(--color-fg);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
+  }
+  .btn:hover {
+    background: color-mix(in srgb, var(--color-surface-raised) 80%, white);
+  }
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .btn-primary {
+    background: var(--color-accent);
+    border-color: transparent;
+    color: var(--color-accent-fg);
+  }
+  .btn-primary:hover {
+    background: var(--color-accent-hover);
+  }
+
+  /* Text input / select. */
+  .input {
+    width: 100%;
+    min-width: 0;
+    padding: 0.625rem 0.875rem;
+    border-radius: var(--radius-app);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-raised);
+    color: var(--color-fg);
+    font: inherit;
+    outline: none;
+  }
+  .input:focus {
+    border-color: var(--color-accent);
+  }
+
+  /* Labelled field: <label class="field"><span>Label</span><input class="input"/></label> */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--color-muted);
+  }
+
+  /* Muted helper / secondary text. */
+  .muted {
+    color: var(--color-muted);
+  }
+}

package/templates/ai-app/components/ui/src/tabs/chat-tab.tsx

@@ -0,0 +1,75 @@
+import { FormEvent, useEffect, useRef, useState } from 'react';
+import { sendChat } from '../api';
+import type { ChatMessage } from '../types';
+
+const SYSTEM_PROMPT: ChatMessage = {
+  role: 'system',
+  content: 'You are a helpful assistant. Answer concisely.',
+};
+
+export function ChatTab() {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [draft, setDraft] = useState('');
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages, sending]);
+
+  async function onSubmit(event: FormEvent) {
+    event.preventDefault();
+    const content = draft.trim();
+    if (!content || sending) return;
+
+    const next: ChatMessage[] = [...messages, { role: 'user', content }];
+    setMessages(next);
+    setDraft('');
+    setSending(true);
+    setError(null);
+    try {
+      const assistant = await sendChat([SYSTEM_PROMPT, ...next]);
+      setMessages([...next, assistant]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className="tab-body">
+      <div className="transcript" ref={listRef} data-testid="transcript">
+        {messages.length === 0 ? <p className="empty">Ask the assistant anything to get started.</p> : null}
+        {messages.map((m, idx) => (
+          <article key={idx} className={`message message-${m.role}`} data-role={m.role}>
+            <span className="who">{m.role === 'user' ? 'You' : 'Assistant'}</span>
+            <p className="body">{m.content}</p>
+          </article>
+        ))}
+        {sending ? (
+          <article className="message message-assistant pending" data-testid="pending">
+            <span className="who">Assistant</span>
+            <p className="body">…</p>
+          </article>
+        ) : null}
+      </div>
+
+      {error ? <p className="error" data-testid="error">{error}</p> : null}
+
+      <form className="composer" onSubmit={onSubmit}>
+        <input
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          placeholder="Ask anything…"
+          disabled={sending}
+          data-testid="composer-input"
+        />
+        <button type="submit" disabled={sending || !draft.trim()} data-testid="composer-send">
+          {sending ? 'Sending…' : 'Send'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/ai-app/components/ui/src/tabs/extract-tab.tsx

@@ -0,0 +1,92 @@
+import { FormEvent, useState } from 'react';
+import { sendStructuredChat } from '../api';
+import type { ChatMessage, StructuredOutputSchema } from '../types';
+
+interface ExtractionResult {
+  summary: string;
+  sentiment: 'positive' | 'neutral' | 'negative';
+  keywords: string[];
+}
+
+const EXTRACTION_SCHEMA: StructuredOutputSchema = {
+  name: 'text_extraction',
+  strict: true,
+  schema: {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      summary: { type: 'string', description: 'One short sentence summarizing the input.' },
+      sentiment: { type: 'string', enum: ['positive', 'neutral', 'negative'] },
+      keywords: {
+        type: 'array',
+        items: { type: 'string' },
+        description: 'Three to five important keywords from the input.',
+      },
+    },
+    required: ['summary', 'sentiment', 'keywords'],
+  },
+};
+
+const SYSTEM_PROMPT: ChatMessage = {
+  role: 'system',
+  content: 'Extract structured facts from the user text. Return only data matching the JSON schema.',
+};
+
+export function ExtractTab() {
+  const [text, setText] = useState('Kazzle makes it much faster to turn rough ideas into working apps.');
+  const [extracting, setExtracting] = useState(false);
+  const [result, setResult] = useState<ExtractionResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSubmit(event: FormEvent) {
+    event.preventDefault();
+    const content = text.trim();
+    if (!content || extracting) return;
+
+    setExtracting(true);
+    setError(null);
+    try {
+      const extracted = await sendStructuredChat<ExtractionResult>(
+        [SYSTEM_PROMPT, { role: 'user', content }],
+        EXTRACTION_SCHEMA,
+        { max_completion_tokens: 512 },
+      );
+      setResult(extracted);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setExtracting(false);
+    }
+  }
+
+  return (
+    <div className="tab-body">
+      <p className="empty">
+        Use structured output when the app needs data, not prose. The server forwards
+        OpenAI-style <code>response_format.json_schema</code> and returns parsed JSON.
+      </p>
+
+      <form className="stack-form" onSubmit={onSubmit}>
+        <textarea
+          value={text}
+          onChange={event => setText(event.target.value)}
+          disabled={extracting}
+          data-testid="extract-input"
+        />
+        <button type="submit" disabled={extracting || !text.trim()} data-testid="extract-submit">
+          {extracting ? 'Extracting…' : 'Extract structured data'}
+        </button>
+      </form>
+
+      {error ? <p className="error" data-testid="error">{error}</p> : null}
+
+      {result ? (
+        <section className="structured-result" data-testid="structured-result">
+          <p><strong>Summary:</strong> {result.summary}</p>
+          <p><strong>Sentiment:</strong> {result.sentiment}</p>
+          <p><strong>Keywords:</strong> {result.keywords.join(', ')}</p>
+        </section>
+      ) : null}
+    </div>
+  );
+}

package/templates/ai-app/components/ui/src/tabs/image-tab.tsx

@@ -0,0 +1,51 @@
+import { FormEvent, useState } from 'react';
+import { generateImage } from '../api';
+import type { ImageResult } from '../types';
+
+export function ImageTab() {
+  const [prompt, setPrompt] = useState('a single red dot on white');
+  const [result, setResult] = useState<ImageResult | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!prompt.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    setResult(null);
+    try {
+      setResult(await generateImage(prompt));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="tab-body">
+      <form className="composer" onSubmit={onSubmit}>
+        <input
+          value={prompt}
+          onChange={e => setPrompt(e.target.value)}
+          placeholder="Describe an image…"
+          disabled={busy}
+          data-testid="image-prompt"
+        />
+        <button type="submit" disabled={busy || !prompt.trim()} data-testid="image-go">
+          {busy ? 'Generating…' : 'Generate'}
+        </button>
+      </form>
+
+      {error ? <p className="error">{error}</p> : null}
+
+      <div className="image-grid" data-testid="image-result">
+        {result?.images.map((img, idx) => {
+          const src = img.b64 ? `data:${img.mimeType};base64,${img.b64}` : img.url;
+          return src ? <img key={idx} src={src} alt="" /> : null;
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/ai-app/components/ui/src/tabs/speech-tab.tsx

@@ -0,0 +1,47 @@
+import { FormEvent, useState } from 'react';
+import { synthesizeSpeech } from '../api';
+
+export function SpeechTab() {
+  const [text, setText] = useState('Hello from Kazzle.');
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!text.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const blob = await synthesizeSpeech(text);
+      // Revoke the previous URL to avoid leaking blob handles across
+      // multiple syntheses in the same session.
+      if (audioUrl) URL.revokeObjectURL(audioUrl);
+      setAudioUrl(URL.createObjectURL(blob));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="tab-body">
+      <form className="composer" onSubmit={onSubmit}>
+        <input
+          value={text}
+          onChange={e => setText(e.target.value)}
+          placeholder="Text to speak…"
+          disabled={busy}
+          data-testid="speech-text"
+        />
+        <button type="submit" disabled={busy || !text.trim()} data-testid="speech-go">
+          {busy ? 'Synthesising…' : 'Speak'}
+        </button>
+      </form>
+
+      {error ? <p className="error">{error}</p> : null}
+      {audioUrl ? <audio src={audioUrl} controls data-testid="speech-audio" /> : null}
+    </div>
+  );
+}

package/templates/ai-app/components/ui/src/tabs/transcribe-tab.tsx

@@ -0,0 +1,42 @@
+import { ChangeEvent, useState } from 'react';
+import { transcribeAudio } from '../api';
+import type { TranscriptionResult } from '../types';
+
+export function TranscribeTab() {
+  const [result, setResult] = useState<TranscriptionResult | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onFile(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setBusy(true);
+    setError(null);
+    setResult(null);
+    try {
+      setResult(await transcribeAudio(file));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="tab-body">
+      <label className="upload">
+        <input type="file" accept="audio/*" onChange={onFile} disabled={busy} data-testid="transcribe-file" />
+        <span>{busy ? 'Transcribing…' : 'Choose an audio file'}</span>
+      </label>
+
+      {error ? <p className="error">{error}</p> : null}
+
+      {result ? (
+        <article className="message message-assistant" data-testid="transcribe-result">
+          <span className="who">Transcript</span>
+          <p className="body">{result.text}</p>
+        </article>
+      ) : null}
+    </div>
+  );
+}

package/templates/ai-app/components/ui/src/tabs/video-tab.tsx

@@ -0,0 +1,76 @@
+import { FormEvent, useEffect, useRef, useState } from 'react';
+import { pollVideoJob, startVideoJob } from '../api';
+import type { AsyncJob } from '../types';
+
+const POLL_INTERVAL_MS = 5_000;
+
+export function VideoTab() {
+  const [prompt, setPrompt] = useState('a fox running across a snowy field');
+  const [job, setJob] = useState<AsyncJob | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const pollTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (pollTimer.current) clearTimeout(pollTimer.current); }, []);
+
+  function schedulePoll(jobId: string) {
+    if (pollTimer.current) clearTimeout(pollTimer.current);
+    pollTimer.current = setTimeout(async () => {
+      try {
+        const next = await pollVideoJob(jobId);
+        setJob(next);
+        if (next.status === 'queued' || next.status === 'processing') schedulePoll(jobId);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    }, POLL_INTERVAL_MS);
+  }
+
+  async function onSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!prompt.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    setJob(null);
+    try {
+      const started = await startVideoJob(prompt);
+      setJob(started);
+      const id = started.jobId ?? started.id;
+      if (id && (started.status === 'queued' || started.status === 'processing')) schedulePoll(id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const videoUrl = (job?.output as { videoUrl?: string } | undefined)?.videoUrl;
+
+  return (
+    <div className="tab-body">
+      <form className="composer" onSubmit={onSubmit}>
+        <input
+          value={prompt}
+          onChange={e => setPrompt(e.target.value)}
+          placeholder="Describe a short clip…"
+          disabled={busy}
+          data-testid="video-prompt"
+        />
+        <button type="submit" disabled={busy || !prompt.trim()} data-testid="video-go">
+          {busy ? 'Submitting…' : 'Generate'}
+        </button>
+      </form>
+
+      {error ? <p className="error">{error}</p> : null}
+
+      {job ? (
+        <article className="message message-assistant" data-testid="video-status">
+          <span className="who">Job {(job.jobId ?? job.id ?? '').slice(0, 12)}…</span>
+          <p className="body">Status: {job.status}</p>
+        </article>
+      ) : null}
+
+      {videoUrl ? <video src={videoUrl} controls data-testid="video-player" /> : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+export type ChatRole = 'system' | 'user' | 'assistant';
+
+export interface ChatMessage {
+  role: ChatRole;
+  content: string;
+}
+
+export interface StructuredOutputSchema {
+  name: string;
+  schema: Record<string, unknown>;
+  strict?: boolean;
+}
+
+export interface ChatOptions {
+  model?: string;
+  max_completion_tokens?: number;
+  temperature?: number;
+  response_format?: {
+    type: 'json_schema';
+    json_schema: StructuredOutputSchema;
+  } | {
+    type: 'json_object';
+  } | {
+    type: 'text';
+  };
+  [key: string]: unknown;
+}
+
+export interface ChatResponse {
+  message: ChatMessage;
+  model: string;
+  structured?: unknown;
+}
+
+export interface ImageResult {
+  images: Array<{ url?: string; b64?: string; mimeType: string }>;
+}
+
+export interface AsyncJob {
+  jobId?: string;
+  id?: string;
+  status: 'queued' | 'processing' | 'succeeded' | 'failed';
+  pollUrl?: string;
+  output?: { videoUrl?: string; mimeType?: string } | Record<string, unknown>;
+  error?: string;
+}
+
+export interface TranscriptionResult {
+  text: string;
+  segments?: Array<{ start: number; end: number; text: string }>;
+}
+
+export type ModalityTab = 'chat' | 'extract' | 'image' | 'speech' | 'transcribe' | 'video';

package/templates/ai-app/components/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "vite.config.ts"],
+  "references": []
+}

package/templates/ai-app/components/ui/vite.config.ts

@@ -0,0 +1,22 @@
+/**
+ * Vite config for the UI component.
+ *
+ * Kazzle preview/runtime wiring (HOST/PORT binding, strictPort, allowedHosts,
+ * backend proxy) lives in @kazzle/app/vite — the ONE shared place that must
+ * never be reinvented. This template declares a backend `server` component; the
+ * browser calls relative owned routes (/chat, /image, …) and the helper proxies
+ * them to the sibling component. Add new backend routes to `proxyPaths`. Do not
+ * expose Kazzle's internal component URLs to the browser.
+ */
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { kazzleAppVite } from '@kazzle/app/vite';
+
+export default defineConfig(({ command }) => ({
+  plugins: [react(), tailwindcss()],
+  ...kazzleAppVite(command, {
+    apiComponent: 'server',
+    proxyPaths: ['/chat', '/image', '/speech', '/transcribe', '/video', '/health'],
+  }),
+}));

package/templates/ai-app/kazzle.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@kazzle/app';
+
+export default defineConfig({
+  icon: 'components/ui/public/favicon.svg',
+  components: [
+    { name: 'ui', type: 'ui', path: './components/ui' },
+    { name: 'server', type: 'process', path: './components/server/index.ts', runtime: { dev: 'bun run dev', run: 'bun run start' } },
+  ],
+});