First cut

src/App.jsx

@@ -0,0 +1,154 @@
+import { useState, useCallback, useReducer } from 'react';
+import { ImageDrop } from './components/ImageDrop.jsx';
+import { JobCard } from './components/JobCard.jsx';
+import { useJobSocket } from './hooks/useJobSocket.js';
+import { submitJob } from './lib/api.js';
+import { MODELS, DEFAULT_MODEL_ID } from './models.js';
+
+// Group models for the dropdown optgroup
+const GATEWAY_MODELS = MODELS.filter(m => m.provider !== 'ollama');
+const OLLAMA_MODELS  = MODELS.filter(m => m.provider === 'ollama');
+
+// ---------------------------------------------------------------------------
+// Jobs state reducer
+// ---------------------------------------------------------------------------
+function jobsReducer(state, action) {
+  switch (action.type) {
+    case 'init':   return action.jobs;
+    case 'upsert': {
+      const idx = state.findIndex(j => j.id === action.job.id);
+      if (idx === -1) return [action.job, ...state];
+      const next = [...state];
+      next[idx] = action.job;
+      return next;
+    }
+    default: return state;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// App
+// ---------------------------------------------------------------------------
+export default function App() {
+  const [jobs, dispatch]    = useReducer(jobsReducer, []);
+  const [prompt, setPrompt] = useState('');
+  const [imageFile, setImageFile] = useState(null);
+  const [modelId, setModelId]     = useState(DEFAULT_MODEL_ID);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError]   = useState('');
+  const [pending, setPending] = useState(0);
+
+  useJobSocket(useCallback(msg => {
+    if (msg.type === 'init')       dispatch({ type: 'init',   jobs: msg.jobs });
+    if (msg.type === 'job_update') dispatch({ type: 'upsert', job:  msg.job  });
+    if (msg.type === 'queue_stats') setPending(msg.pending);
+  }, []));
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!prompt.trim()) return setError('Please enter a prompt.');
+    if (!imageFile)     return setError('Please select or drop an image.');
+    setError('');
+    setSubmitting(true);
+    try {
+      await submitJob(prompt, imageFile, modelId);
+      setPrompt('');
+      setImageFile(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <div className="header-inner">
+          <h1 className="app-title">
+            <span className="title-eye">◉</span> Vision Jobs
+          </h1>
+          <p className="app-subtitle">Powered by Vercel AI Gateway · Ollama Cloud</p>
+        </div>
+      </header>
+
+      <main className="app-main">
+        <section className="submit-section">
+          <form className="submit-form" onSubmit={handleSubmit} noValidate>
+            <ImageDrop file={imageFile} onFile={setImageFile} />
+
+            {/* Model selector */}
+            <div className="model-row">
+              <label className="model-label" htmlFor="model-select">Model</label>
+              <select
+                id="model-select"
+                className="model-select"
+                value={modelId}
+                onChange={e => setModelId(e.target.value)}
+                disabled={submitting}
+              >
+                <optgroup label="Cloud Providers">
+                  {GATEWAY_MODELS.map(m => (
+                    <option key={m.id} value={m.id}>{m.label}</option>
+                  ))}
+                </optgroup>
+                <optgroup label="Ollama Cloud">
+                  {OLLAMA_MODELS.map(m => (
+                    <option key={m.id} value={m.id}>{m.label}</option>
+                  ))}
+                </optgroup>
+              </select>
+            </div>
+
+            <div className="prompt-row">
+              <textarea
+                className="prompt-input"
+                placeholder="Describe what you want to know about this image…"
+                value={prompt}
+                onChange={e => setPrompt(e.target.value)}
+                rows={3}
+                disabled={submitting}
+              />
+              <button
+                type="submit"
+                className="submit-btn"
+                disabled={submitting || !prompt.trim() || !imageFile}
+              >
+                {submitting ? <span className="spinner" /> : (
+                  <>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
+                      stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                      <path d="M5 12h14M12 5l7 7-7 7"/>
+                    </svg>
+                    Analyze
+                  </>
+                )}
+              </button>
+            </div>
+
+            {error && <p className="form-error" role="alert">{error}</p>}
+          </form>
+        </section>
+
+        <section className="jobs-section">
+          <div className="jobs-header">
+            <h2 className="jobs-title">Jobs</h2>
+            {pending > 0 && (
+              <span className="queue-badge">{pending} queued</span>
+            )}
+          </div>
+
+          {jobs.length === 0 ? (
+            <div className="jobs-empty">
+              <span>No jobs yet — submit an image above.</span>
+            </div>
+          ) : (
+            <div className="jobs-list">
+              {jobs.map(job => <JobCard key={job.id} job={job} />)}
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}

src/components/ImageDrop.jsx

@@ -0,0 +1,57 @@
+import { useRef, useState, useCallback } from 'react';
+
+export function ImageDrop({ file, onFile }) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    setDragging(false);
+    const dropped = e.dataTransfer.files[0];
+    if (dropped?.type.startsWith('image/')) onFile(dropped);
+  }, [onFile]);
+
+  const preview = file ? URL.createObjectURL(file) : null;
+
+  return (
+    <div
+      className={`drop-zone ${dragging ? 'drag-over' : ''} ${file ? 'has-file' : ''}`}
+      onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current?.click()}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === 'Enter' && inputRef.current?.click()}
+      aria-label="Drop image or click to select"
+    >
+      {/* Hidden file input — `capture` triggers camera on mobile */}
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        capture="environment"
+        style={{ display: 'none' }}
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          if (f) onFile(f);
+          e.target.value = '';
+        }}
+      />
+
+      {preview ? (
+        <img src={preview} alt="Preview" className="drop-preview" />
+      ) : (
+        <div className="drop-placeholder">
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="17 8 12 3 7 8"/>
+            <line x1="12" y1="3" x2="12" y2="15"/>
+          </svg>
+          <span>Drop image / tap to capture</span>
+          <small>JPEG, PNG, WEBP, GIF — up to 20 MB</small>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/JobCard.jsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { findModel } from '../models.js';
+
+const STATUS_LABEL = {
+  queued:  'Queued',
+  running: 'Running',
+  done:    'Done',
+  error:   'Error',
+};
+
+function ErrorDetail({ message }) {
+  const [expanded, setExpanded] = useState(false);
+  const firstNewline = message.indexOf('\n');
+  const firstChunk   = firstNewline !== -1 ? message.slice(0, firstNewline) : message;
+  const summary      = firstChunk.length > 80 ? firstChunk.slice(0, 80) + '…' : firstChunk;
+  const hasMore      = message.length > summary.length;
+
+  return (
+    <div className="job-error">
+      <div className="job-error-summary">
+        <span>{summary}</span>
+        {hasMore && (
+          <button
+            className="job-error-toggle"
+            onClick={() => setExpanded(e => !e)}
+            aria-expanded={expanded}
+          >
+            {expanded ? '▲ less' : '▼ more'}
+          </button>
+        )}
+      </div>
+      {expanded && <pre className="job-error-detail">{message}</pre>}
+    </div>
+  );
+}
+
+export function JobCard({ job }) {
+  const ts = new Date(job.createdAt).toLocaleTimeString([], {
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+  });
+
+  // Resolve a human-readable model label; fall back to the raw ID
+  const modelMeta  = findModel(job.model);
+  const modelLabel = modelMeta ? modelMeta.label : (job.model ?? '—');
+  const modelBadge = modelMeta?.provider === 'ollama' ? 'Ollama Cloud' : 'AI Gateway';
+
+  return (
+    <article className={`job-card status-${job.status}`}>
+      <header className="job-header">
+        <span className={`status-badge status-${job.status}`}>
+          {job.status === 'running' && <span className="spinner" aria-hidden="true" />}
+          {STATUS_LABEL[job.status]}
+        </span>
+
+        {/* Model pill */}
+        <span className="model-pill" title={`${modelBadge} · ${job.model}`}>
+          {modelLabel}
+        </span>
+
+        <time className="job-time">{ts}</time>
+        {job.inputTokens != null && (
+          <span className="job-tokens">
+            {job.inputTokens}↑ {job.outputTokens}↓
+          </span>
+        )}
+      </header>
+
+      <p className="job-prompt">{job.prompt}</p>
+
+      {job.status === 'done' && job.result && (
+        <p className="job-result">{job.result}</p>
+      )}
+
+      {job.status === 'error' && job.errorMessage && (
+        <ErrorDetail message={job.errorMessage} />
+      )}
+    </article>
+  );
+}

src/hooks/useJobSocket.js

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useCallback } from 'react';
+
+/**
+ * Connect to the server WebSocket.
+ * @param {(msg: object) => void} onMessage  Called with parsed JSON messages.
+ */
+export function useJobSocket(onMessage) {
+  const wsRef = useRef(null);
+  const onMessageRef = useRef(onMessage);
+  onMessageRef.current = onMessage;
+
+  const connect = useCallback(() => {
+    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+    const ws = new WebSocket(`${proto}://${location.host}/ws`);
+    wsRef.current = ws;
+
+    ws.onmessage = (e) => {
+      try {
+        onMessageRef.current(JSON.parse(e.data));
+      } catch (_) {}
+    };
+
+    ws.onclose = () => {
+      // Auto-reconnect after 2 s
+      setTimeout(connect, 2000);
+    };
+
+    return ws;
+  }, []);
+
+  useEffect(() => {
+    const ws = connect();
+    return () => ws.close();
+  }, [connect]);
+}

src/lib/api.js

@@ -0,0 +1,25 @@
+/**
+ * Submit a new vision job.
+ * @param {string} prompt
+ * @param {File}   imageFile
+ * @param {string} modelId   — must match an id in src/models.js
+ */
+export async function submitJob(prompt, imageFile, modelId) {
+  const form = new FormData();
+  form.append('prompt',  prompt);
+  form.append('modelId', modelId);
+  form.append('image',   imageFile);
+
+  const res = await fetch('/api/jobs', { method: 'POST', body: form });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error ?? 'Unknown error');
+  }
+  return res.json();
+}
+
+export async function fetchJobs() {
+  const res = await fetch('/api/jobs');
+  if (!res.ok) throw new Error('Failed to load jobs');
+  return res.json();
+}

src/main.jsx

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

src/models.js

@@ -0,0 +1,52 @@
+// models.js — shared model configuration
+// Used by the frontend dropdown AND the backend router.
+//
+// provider values map to individual AI SDK packages:
+//   "anthropic" → @ai-sdk/anthropic  (ANTHROPIC_API_KEY)
+//   "openai"    → @ai-sdk/openai     (OPENAI_API_KEY)
+//   "google"    → @ai-sdk/google     (GOOGLE_API_KEY)
+//   "ollama"    → ollama-ai-provider-v2 (OLLAMA_API_KEY)
+
+export const MODELS = [
+  {
+    id:       'claude-sonnet-4-6-20250929',
+    label:    'Claude Sonnet 4.6',
+    provider: 'anthropic',
+    creator:  'Anthropic',
+    vision:   true,
+  },
+  {
+    id:       'gpt-5.2',
+    label:    'GPT-5.2',
+    provider: 'openai',
+    creator:  'OpenAI',
+    vision:   true,
+  },
+  {
+    id:       'gemini-3-flash-preview',
+    label:    'Gemini 3 Flash',
+    provider: 'google',
+    creator:  'Google',
+    vision:   true,
+  },
+  {
+    id:       'qwen3.5:397b-cloud',
+    label:    'Qwen 3.5 397B',
+    provider: 'ollama',
+    creator:  'Qwen / Ollama Cloud',
+    vision:   true,
+  },
+  {
+    id:       'llama4:maverick-cloud',
+    label:    'Llama 4 Maverick',
+    provider: 'ollama',
+    creator:  'Meta / Ollama Cloud',
+    vision:   true,
+  },
+];
+
+export const DEFAULT_MODEL_ID = 'claude-sonnet-4-6-20250929';
+
+export function findModel(id) {
+  return MODELS.find(m => m.id === id);
+}

src/styles.css

@@ -0,0 +1,538 @@
+/* ============================================================
+   Vision Jobs — Industrial dark theme
+   Fonts: Syne (display) + JetBrains Mono (data/code)
+   ============================================================ */
+
+:root {
+  --bg:        #0d0d0d;
+  --surface:   #141414;
+  --surface2:  #1c1c1c;
+  --border:    #2a2a2a;
+  --border2:   #383838;
+  --accent:    #e8a020;
+  --accent-dim:#7a5510;
+  --text:      #e8e0d0;
+  --text-muted:#7a7060;
+  --text-dim:  #4a4438;
+  --green:     #4caf6a;
+  --red:       #d94f4f;
+  --blue:      #4a8fd4;
+
+  --radius:    4px;
+  --radius-lg: 8px;
+  --font-ui:   'Syne', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Mono', monospace;
+
+  --transition: 150ms ease;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { font-size: 15px; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-ui);
+  min-height: 100dvh;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Scrollbar ─────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
+
+/* ── Layout ─────────────────────────────────────────────────── */
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.app-header {
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header-inner {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 14px 24px;
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+}
+
+.app-title {
+  font-size: 1.35rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  line-height: 1;
+}
+
+.title-eye {
+  color: var(--accent);
+  font-size: 1.1rem;
+  display: inline-block;
+  animation: pulse-eye 3s ease-in-out infinite;
+}
+
+@keyframes pulse-eye {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.6; transform: scale(0.88); }
+}
+
+.app-subtitle {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+}
+
+/* ── Main ───────────────────────────────────────────────────── */
+.app-main {
+  max-width: 860px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 32px 24px 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+/* ── Submit section ─────────────────────────────────────────── */
+.submit-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.submit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ── Drop zone ──────────────────────────────────────────────── */
+.drop-zone {
+  border: 1.5px dashed var(--border2);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  cursor: pointer;
+  transition: border-color var(--transition), background var(--transition);
+  overflow: hidden;
+  min-height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  outline: none;
+}
+
+.drop-zone:hover,
+.drop-zone:focus-visible {
+  border-color: var(--accent-dim);
+  background: var(--surface2);
+}
+
+.drop-zone.drag-over {
+  border-color: var(--accent);
+  background: rgba(232, 160, 32, 0.06);
+}
+
+.drop-zone.has-file {
+  border-style: solid;
+  border-color: var(--border2);
+  min-height: 200px;
+}
+
+.drop-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-muted);
+  padding: 32px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.drop-placeholder svg { color: var(--text-dim); }
+.drop-placeholder span { font-size: 0.9rem; font-weight: 600; }
+.drop-placeholder small { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
+
+.drop-preview {
+  width: 100%;
+  max-height: 320px;
+  object-fit: contain;
+  display: block;
+  padding: 8px;
+}
+
+/* ── Prompt row ─────────────────────────────────────────────── */
+.prompt-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.prompt-input {
+  flex: 1;
+  background: var(--surface);
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 0.92rem;
+  padding: 12px 14px;
+  resize: vertical;
+  min-height: 80px;
+  line-height: 1.5;
+  transition: border-color var(--transition);
+  outline: none;
+}
+
+.prompt-input::placeholder { color: var(--text-dim); }
+.prompt-input:focus { border-color: var(--accent-dim); }
+.prompt-input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ── Submit button ──────────────────────────────────────────── */
+.submit-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--accent);
+  color: #0d0d0d;
+  border: none;
+  border-radius: var(--radius);
+  font-family: var(--font-ui);
+  font-size: 0.88rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  padding: 12px 20px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: opacity var(--transition), transform var(--transition);
+  flex-shrink: 0;
+  height: fit-content;
+}
+
+.submit-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
+.submit-btn:active:not(:disabled) { transform: translateY(0); }
+.submit-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* ── Form error ─────────────────────────────────────────────── */
+.form-error {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--red);
+  padding: 8px 12px;
+  background: rgba(217, 79, 79, 0.08);
+  border: 1px solid rgba(217, 79, 79, 0.2);
+  border-radius: var(--radius);
+}
+
+/* ── Spinner ────────────────────────────────────────────────── */
+.spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.65s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── Jobs section ───────────────────────────────────────────── */
+.jobs-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.jobs-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.jobs-title {
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.queue-badge {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  background: rgba(232, 160, 32, 0.12);
+  color: var(--accent);
+  border: 1px solid var(--accent-dim);
+  border-radius: 99px;
+  padding: 2px 10px;
+}
+
+.jobs-empty {
+  color: var(--text-dim);
+  font-size: 0.88rem;
+  padding: 32px 0;
+  text-align: center;
+}
+
+.jobs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* ── Job card ───────────────────────────────────────────────── */
+.job-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: border-color var(--transition);
+  animation: card-in 200ms ease both;
+}
+
+@keyframes card-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: none; }
+}
+
+.job-card.status-running { border-color: var(--accent-dim); }
+.job-card.status-done    { border-color: var(--border); }
+.job-card.status-error   { border-color: rgba(217, 79, 79, 0.35); }
+
+.job-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ── Status badge ───────────────────────────────────────────── */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 3px 10px;
+  border-radius: 99px;
+  border: 1px solid transparent;
+}
+
+.status-badge.status-queued  {
+  background: rgba(122, 112, 96, 0.12);
+  color: var(--text-muted);
+  border-color: var(--border2);
+}
+.status-badge.status-running {
+  background: rgba(232, 160, 32, 0.1);
+  color: var(--accent);
+  border-color: var(--accent-dim);
+}
+.status-badge.status-done {
+  background: rgba(76, 175, 106, 0.1);
+  color: var(--green);
+  border-color: rgba(76, 175, 106, 0.3);
+}
+.status-badge.status-error {
+  background: rgba(217, 79, 79, 0.1);
+  color: var(--red);
+  border-color: rgba(217, 79, 79, 0.3);
+}
+
+.job-time {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: var(--text-dim);
+  margin-left: auto;
+}
+
+.job-tokens {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: var(--text-dim);
+  letter-spacing: 0.02em;
+}
+
+.job-prompt {
+  font-size: 0.88rem;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.job-result {
+  font-size: 0.88rem;
+  color: var(--text);
+  line-height: 1.65;
+  background: var(--surface2);
+  border-left: 3px solid var(--green);
+  padding: 10px 14px;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  white-space: pre-wrap;
+}
+
+.job-error {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--red);
+  background: rgba(217, 79, 79, 0.06);
+  border-left: 3px solid var(--red);
+  padding: 10px 14px;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  white-space: pre-wrap;
+}
+
+/* ── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 600px) {
+  .app-main { padding: 20px 16px 48px; }
+  .prompt-row { flex-direction: column; }
+  .submit-btn { width: 100%; justify-content: center; }
+  .header-inner { padding: 12px 16px; }
+}
+
+/* ── Expandable error detail ────────────────────────────────── */
+.job-error {
+  background: rgba(217, 79, 79, 0.06);
+  border-left: 3px solid var(--red);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.job-error-summary {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--red);
+}
+
+.job-error-toggle {
+  background: none;
+  border: 1px solid rgba(217, 79, 79, 0.4);
+  border-radius: var(--radius);
+  color: var(--red);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  padding: 1px 7px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  opacity: 0.8;
+  transition: opacity var(--transition);
+}
+
+.job-error-toggle:hover { opacity: 1; }
+
+.job-error-detail {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: rgba(217, 79, 79, 0.85);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.55;
+  border-top: 1px solid rgba(217, 79, 79, 0.2);
+  padding-top: 8px;
+  margin: 0;
+}
+
+/* ── Model selector row ─────────────────────────────────────── */
+.model-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.model-label {
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.model-select {
+  flex: 1;
+  background: var(--surface);
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 0.88rem;
+  padding: 8px 12px;
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--transition);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7060' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+.model-select:focus  { border-color: var(--accent-dim); }
+.model-select:hover  { border-color: var(--border2); }
+.model-select:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.model-select optgroup {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+.model-select option {
+  background: var(--surface2);
+  color: var(--text);
+}
+
+/* ── Model pill on job cards ────────────────────────────────── */
+.model-pill {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  padding: 2px 9px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+  cursor: default;
+}