feat(models): fetch live model lists from CLIs, allow custom ids

Each agent definition now declares an optional `listModels` spec; the daemon runs the CLI's own list-models command (e.g. `opencode models`, `cursor-agent models`) during agent detection and uses the result as the dropdown options. Hardcoded entries shrink to a `fallbackModels` hint that only kicks in when the CLI has no listing command (Claude, Codex, Gemini, Qwen) or when the listing fails (e.g. unauth'd cursor-agent). UI groups `provider/model` ids by provider via <optgroup> so opencode's ~175 live models stay navigable, and the Settings dialog gains a "Custom…" entry that opens a free-text input for any model id the listing didn't surface yet. Daemon validates picks against the live cache + fallback, with a permissive sanitizer for custom ids.
feat: per-CLI model picker for local agents (closes #8 )
2026-04-29 00:32:03 +08:00 · 2026-04-28 22:54:18 +08:00 · 2026-04-28 22:25:45 +08:00 · 2026-04-28 22:25:32 +08:00 · 2026-04-28 21:00:33 +08:00 · 2026-04-28 20:41:27 +08:00
23 changed files with 1571 additions and 41 deletions
@@ -15,4 +15,6 @@ dist

 tsconfig.tsbuildinfo

-.claude-sessions/*
+.claude-sessions/*
+
+.cursor/*
@@ -538,6 +538,14 @@ Phased delivery → [`docs/roadmap.md`](docs/roadmap.md).

 This is an early implementation — the closed loop (detect → pick skill + design system → chat → parse `<artifact>` → preview → save) runs end-to-end. The prompt stack and skill library are where most of the value lives, and they're stable. The component-level UI is shipping daily.

+## Star us
+
+<p align="center">
+  <a href="https://github.com/nexu-io/open-design"><img src="docs/assets/star-us.png" alt="Star Open Design on GitHub — github.com/nexu-io/open-design" width="100%" /></a>
+</p>
+
+If this saved you thirty minutes — give it a ★. Stars don't pay rent, but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, real signal: [github.com/nexu-io/open-design](https://github.com/nexu-io/open-design).
+
 ## Contributing

 Issues, PRs, new skills, and new design systems are all welcome. The highest-leverage contributions are usually one folder, one Markdown file, or one PR-sized adapter:
@@ -538,6 +538,14 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。

 这是一个早期实现 —— 闭环（检测 → 选 skill + design system → 对话 → 解析 `<artifact>` → 预览 → 保存）已经端到端跑通。提示词栈和 skill 库是价值最重的部分，目前已稳定。组件级 UI 仍在每天迭代。

+## 给我们点个 Star
+
+<p align="center">
+  <a href="https://github.com/nexu-io/open-design"><img src="docs/assets/star-us.png" alt="给 Open Design 点个 Star —— github.com/nexu-io/open-design" width="100%" /></a>
+</p>
+
+如果这套东西帮你省了半小时，给它一个 ★。Star 不付房租，但它告诉下一个设计师、Agent 和贡献者：这个实验值得他们的注意力。一次点击、三秒钟、真实信号：[github.com/nexu-io/open-design](https://github.com/nexu-io/open-design)。
+
 ## 贡献

 欢迎 issue、PR、新 skill、新 design system。收益最高的贡献往往就是一个文件夹、一份 Markdown，或者一个 PR 大小的 adapter：
@@ -6,27 +6,101 @@ import path from 'node:path';

 const execFileP = promisify(execFile);

-// Each entry defines how to invoke the agent in non-interactive "one-shot" mode.
-// `buildArgs(prompt, imagePaths)` returns argv for the child process.
+// Per-agent model picker.
+//
+//   - `listModels`         : optional spec for fetching the model list from
+//                            the CLI itself ({ args, parse, timeoutMs }).
+//                            When defined we run it during agent detection
+//                            (best-effort, with a timeout) and use the
+//                            result. If the listing fails we fall back to
+//                            `fallbackModels` so the UI still has something
+//                            to show.
+//   - `fallbackModels`     : static hint list. Used as the source of truth
+//                            for CLIs that don't expose a listing command
+//                            (Claude Code, Codex, Gemini CLI, Qwen Code)
+//                            and as the fallback for the others.
+//   - `reasoningOptions`   : optional reasoning-effort presets (currently
+//                            only Codex exposes this knob).
+//   - `buildArgs(prompt, imagePaths, extraAllowedDirs, options)` returns
+//     argv for the child process. `options = { model, reasoning }` carries
+//     whatever the user picked in the model menu — agents that don't take a
+//     model flag ignore them.
+//
+// Every model list is prefixed with a synthetic `'default'` entry meaning
+// "let the CLI pick" — the agent runs with no `--model` flag, so the
+// user's local CLI config wins.
+//
+// `extraAllowedDirs` is a list of absolute directories the agent must be
+// permitted to read files from (skill seeds, design-system specs) that live
+// outside the project cwd. Currently only Claude Code wires this through
+// (`--add-dir`); other agents either inherit broader access or run with cwd
+// boundaries we can't widen via flags.
+//
 // `streamFormat` hints to the daemon how to interpret stdout:
 //   - 'claude-stream-json' : line-delimited JSON emitted by Claude Code's
 //     `--output-format stream-json`. Daemon parses it into typed events
 //     (text / thinking / tool_use / tool_result / status) for the UI.
 //   - 'plain' (default)    : raw text, forwarded chunk-by-chunk.
+
+const DEFAULT_MODEL_OPTION = { id: 'default', label: 'Default (CLI config)' };
+
+// Parse one-id-per-line stdout from `<cli> models` and prepend the synthetic
+// default option. Used by opencode / cursor-agent.
+function parseLineSeparatedModels(stdout) {
+  const ids = String(stdout || '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0 && !line.startsWith('#'));
+  // De-dupe while preserving order — some CLIs print near-duplicates.
+  const seen = new Set();
+  const out = [DEFAULT_MODEL_OPTION];
+  for (const id of ids) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    out.push({ id, label: id });
+  }
+  return out;
+}
+
 export const AGENT_DEFS = [
  {
    id: 'claude',
    name: 'Claude Code',
    bin: 'claude',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => [
-      '-p',
-      prompt,
-      '--output-format',
-      'stream-json',
-      '--verbose',
-      '--include-partial-messages',
+    // `claude` has no list-models subcommand; the CLI accepts both short
+    // aliases (sonnet/opus/haiku) and the full ids, so we ship both as
+    // hints. Users who want a non-shipped model can paste it via the
+    // Settings dialog's custom-model input.
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'sonnet', label: 'Sonnet (alias)' },
+      { id: 'opus', label: 'Opus (alias)' },
+      { id: 'haiku', label: 'Haiku (alias)' },
+      { id: 'claude-opus-4-5', label: 'claude-opus-4-5' },
+      { id: 'claude-sonnet-4-5', label: 'claude-sonnet-4-5' },
+      { id: 'claude-haiku-4-5', label: 'claude-haiku-4-5' },
    ],
+    buildArgs: (prompt, _imagePaths, extraAllowedDirs = [], options = {}) => {
+      const args = [
+        '-p',
+        prompt,
+        '--output-format',
+        'stream-json',
+        '--verbose',
+        '--include-partial-messages',
+      ];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      const dirs = (extraAllowedDirs || []).filter(
+        (d) => typeof d === 'string' && d.length > 0,
+      );
+      if (dirs.length > 0) {
+        args.push('--add-dir', ...dirs);
+      }
+      return args;
+    },
    streamFormat: 'claude-stream-json',
  },
  {
@@ -34,7 +108,35 @@ export const AGENT_DEFS = [
    name: 'Codex CLI',
    bin: 'codex',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['exec', prompt],
+    // Codex doesn't have a `models` subcommand; ship the most common ids
+    // as a hint. Users can supply other ids via the custom-model input.
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'gpt-5-codex', label: 'gpt-5-codex' },
+      { id: 'gpt-5', label: 'gpt-5' },
+      { id: 'o3', label: 'o3' },
+      { id: 'o4-mini', label: 'o4-mini' },
+    ],
+    reasoningOptions: [
+      { id: 'default', label: 'Default' },
+      { id: 'minimal', label: 'Minimal' },
+      { id: 'low', label: 'Low' },
+      { id: 'medium', label: 'Medium' },
+      { id: 'high', label: 'High' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = ['exec'];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      if (options.reasoning && options.reasoning !== 'default') {
+        // Codex accepts `-c key=value` config overrides; reasoning effort
+        // is exposed as `model_reasoning_effort`.
+        args.push('-c', `model_reasoning_effort="${options.reasoning}"`);
+      }
+      args.push(prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -42,7 +144,19 @@ export const AGENT_DEFS = [
    name: 'Gemini CLI',
    bin: 'gemini',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['-p', prompt],
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'gemini-2.5-pro', label: 'gemini-2.5-pro' },
+      { id: 'gemini-2.5-flash', label: 'gemini-2.5-flash' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = [];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push('-p', prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -50,7 +164,26 @@ export const AGENT_DEFS = [
    name: 'OpenCode',
    bin: 'opencode',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['run', prompt],
+    // `opencode models` prints `provider/model` per line.
+    listModels: {
+      args: ['models'],
+      parse: parseLineSeparatedModels,
+      timeoutMs: 8000,
+    },
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'anthropic/claude-sonnet-4-5', label: 'anthropic/claude-sonnet-4-5' },
+      { id: 'openai/gpt-5', label: 'openai/gpt-5' },
+      { id: 'google/gemini-2.5-pro', label: 'google/gemini-2.5-pro' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = ['run'];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push(prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -58,7 +191,33 @@ export const AGENT_DEFS = [
    name: 'Cursor Agent',
    bin: 'cursor-agent',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['-p', prompt],
+    // `cursor-agent models` prints account-bound model ids per line. When
+    // the user isn't authed it prints "No models available for this
+    // account." — that's not a model list, so we detect it and fall back.
+    listModels: {
+      args: ['models'],
+      timeoutMs: 5000,
+      parse: (stdout) => {
+        const trimmed = String(stdout || '').trim();
+        if (!trimmed || /no models available/i.test(trimmed)) return null;
+        return parseLineSeparatedModels(trimmed);
+      },
+    },
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'auto', label: 'auto' },
+      { id: 'sonnet-4', label: 'sonnet-4' },
+      { id: 'sonnet-4-thinking', label: 'sonnet-4-thinking' },
+      { id: 'gpt-5', label: 'gpt-5' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = [];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push('-p', prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -66,7 +225,19 @@ export const AGENT_DEFS = [
    name: 'Qwen Code',
    bin: 'qwen',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['-p', prompt],
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'qwen3-coder-plus', label: 'qwen3-coder-plus' },
+      { id: 'qwen3-coder-flash', label: 'qwen3-coder-flash' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = [];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push('-p', prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
 ];
@@ -86,9 +257,36 @@ function resolveOnPath(bin) {
  return null;
 }

+async function fetchModels(def, resolvedBin) {
+  if (!def.listModels) return def.fallbackModels;
+  try {
+    const { stdout } = await execFileP(resolvedBin, def.listModels.args, {
+      timeout: def.listModels.timeoutMs ?? 5000,
+      // Models lists from popular CLIs (e.g. opencode) easily exceed the
+      // default 1MB buffer once you include every openrouter model. Bump
+      // it so we don't truncate the listing.
+      maxBuffer: 8 * 1024 * 1024,
+    });
+    const parsed = def.listModels.parse(stdout);
+    // Empty / null parse result means the CLI didn't actually return a
+    // usable list (e.g. cursor-agent's "No models available"); fall back
+    // to the static hint so the picker isn't stuck on Default-only.
+    if (!parsed || parsed.length === 0) return def.fallbackModels;
+    return parsed;
+  } catch {
+    return def.fallbackModels;
+  }
+}
+
 async function probe(def) {
  const resolved = resolveOnPath(def.bin);
-  if (!resolved) return { ...stripFns(def), available: false };
+  if (!resolved) {
+    return {
+      ...stripFns(def),
+      models: def.fallbackModels ?? [DEFAULT_MODEL_OPTION],
+      available: false,
+    };
+  }
  let version = null;
  try {
    const { stdout } = await execFileP(resolved, def.versionArgs, { timeout: 3000 });
@@ -96,18 +294,75 @@ async function probe(def) {
  } catch {
    // binary exists but --version failed; still mark available
  }
-  return { ...stripFns(def), available: true, path: resolved, version };
+  const models = await fetchModels(def, resolved);
+  return {
+    ...stripFns(def),
+    models,
+    available: true,
+    path: resolved,
+    version,
+  };
 }

 function stripFns(def) {
-  const { buildArgs, ...rest } = def;
+  // Drop the buildArgs / listModels closures but keep declarative metadata
+  // (reasoningOptions, streamFormat, name, bin, etc.). `models` is
+  // populated separately by `fetchModels`, so we strip the static
+  // `fallbackModels` slot here too.
+  const { buildArgs, listModels, fallbackModels, ...rest } = def;
  return rest;
 }

 export async function detectAgents() {
-  return Promise.all(AGENT_DEFS.map(probe));
+  const results = await Promise.all(AGENT_DEFS.map(probe));
+  // Refresh the validation cache from whatever we just surfaced to the UI
+  // so /api/chat can accept any model the user could have just picked,
+  // including ones that only showed up after a CLI re-auth.
+  for (const agent of results) {
+    rememberLiveModels(agent.id, agent.models);
+  }
+  return results;
 }

 export function getAgentDef(id) {
  return AGENT_DEFS.find((a) => a.id === id) || null;
 }
+
+// Daemon's /api/chat needs to validate the user's model pick against the
+// list we last surfaced to the UI. We keep a per-agent cache of the most
+// recent live list (refreshed every detectAgents() call) and additionally
+// trust any value present in the static fallback. A model that's neither
+// gets rejected so a stale or hostile value can't smuggle arbitrary flags.
+const liveModelCache = new Map();
+
+export function rememberLiveModels(agentId, models) {
+  if (!Array.isArray(models)) return;
+  liveModelCache.set(
+    agentId,
+    new Set(models.map((m) => m && m.id).filter((id) => typeof id === 'string')),
+  );
+}
+
+export function isKnownModel(def, modelId) {
+  if (!modelId) return false;
+  const live = liveModelCache.get(def.id);
+  if (live && live.has(modelId)) return true;
+  if (Array.isArray(def.fallbackModels)) {
+    return def.fallbackModels.some((m) => m.id === modelId);
+  }
+  return false;
+}
+
+// Permit user-typed model ids that didn't appear in either the live
+// listing or the static fallback (e.g. the user is on a brand-new model
+// the CLI's `models` command hasn't surfaced yet). The CLI gets the value
+// as a child-process arg — not a shell string — so injection isn't a
+// concern, but we still reject anything that could be misread as a flag
+// by a downstream CLI or that contains whitespace / control chars.
+export function sanitizeCustomModel(id) {
+  if (typeof id !== 'string') return null;
+  const trimmed = id.trim();
+  if (trimmed.length === 0 || trimmed.length > 200) return null;
+  if (!/^[A-Za-z0-9][A-Za-z0-9._/:@-]*$/.test(trimmed)) return null;
+  return trimmed;
+}
@@ -6,7 +6,12 @@ import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import fs from 'node:fs';
 import os from 'node:os';
-import { detectAgents, getAgentDef } from './agents.js';
+import {
+  detectAgents,
+  getAgentDef,
+  isKnownModel,
+  sanitizeCustomModel,
+} from './agents.js';
 import { listSkills } from './skills.js';
 import { listDesignSystems, readDesignSystem } from './design-systems.js';
 import { createClaudeStreamHandler } from './claude-stream.js';
@@ -690,6 +695,8 @@ export async function startServer({ port = 7456 } = {}) {
      imagePaths = [],
      projectId,
      attachments = [],
+      model,
+      reasoning,
    } = req.body || {};
    const def = getAgentDef(agentId);
    if (!def) return res.status(400).json({ error: `unknown agent: ${agentId}` });
@@ -769,7 +776,33 @@ export async function startServer({ port = 7456 } = {}) {
      safeImages.length ? `\n\n${safeImages.map((p) => `@${p}`).join(' ')}` : '',
    ].join('');

-    const args = def.buildArgs(composed, safeImages);
+    // Skill seeds (`skills/<id>/assets/template.html`) and design-system
+    // specs (`design-systems/<id>/DESIGN.md`) live outside the project cwd.
+    // The composed system prompt asks the agent to Read them via absolute
+    // paths in the skill-root preamble — without an explicit allowlist,
+    // Claude Code blocks those reads (issue #6: "no permission to read
+    // skills template"). We surface both roots so any agent that honours
+    // `--add-dir` can resolve those side files.
+    const extraAllowedDirs = [SKILLS_DIR, DESIGN_SYSTEMS_DIR].filter(
+      (d) => fs.existsSync(d),
+    );
+    // Per-agent model + reasoning the user picked in the model menu.
+    // Trust the value when it matches the most recent /api/agents listing
+    // (live or fallback). Otherwise allow it through if it passes a
+    // permissive sanitizer — that's the path for user-typed custom model
+    // ids the CLI's listing didn't surface yet.
+    const safeModel =
+      typeof model === 'string'
+        ? isKnownModel(def, model)
+          ? model
+          : sanitizeCustomModel(model)
+        : null;
+    const safeReasoning =
+      typeof reasoning === 'string' && Array.isArray(def.reasoningOptions)
+        ? def.reasoningOptions.find((r) => r.id === reasoning)?.id ?? null
+        : null;
+    const agentOptions = { model: safeModel, reasoning: safeReasoning };
+    const args = def.buildArgs(composed, safeImages, extraAllowedDirs, agentOptions);

    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache, no-transform');
@@ -788,6 +821,8 @@ export async function startServer({ port = 7456 } = {}) {
      streamFormat: def.streamFormat ?? 'plain',
      projectId: typeof projectId === 'string' ? projectId : null,
      cwd,
+      model: safeModel,
+      reasoning: safeReasoning,
    });

    let child;
@@ -0,0 +1,743 @@
+<!doctype html>
+<html lang='en'>
+<head>
+<meta charset='utf-8' />
+<title>Open Design — Star us on GitHub</title>
+<link rel='preconnect' href='https://fonts.googleapis.com'>
+<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
+<link href='https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap' rel='stylesheet'>
+<style>
+  :root {
+    --bg: #0d0a06;
+    --bg-2: #14100a;
+    --ink: #f3ead8;
+    --muted: #9b8f78;
+    --rule: #4a3f2c;
+    --accent: #f0833f;
+    --accent-2: #e85a2c;
+    --gold: #ffc83d;
+    --gold-2: #ffb000;
+    --paper: #f6efdd;
+
+    --gh-bg: #0d1117;
+    --gh-fg: #e6edf3;
+    --gh-muted: #8b949e;
+    --gh-border: #30363d;
+    --gh-border-2: #21262d;
+    --gh-btn: #21262d;
+    --gh-btn-hover: #30363d;
+    --gh-pill: #1f2328;
+    --gh-link: #4493f8;
+    --gh-tag-bg: #15295a;
+    --gh-tag-fg: #79c0ff;
+  }
+  * { box-sizing: border-box; }
+  html, body {
+    margin: 0;
+    padding: 0;
+    width: 1920px;
+    height: 1080px;
+    background: var(--bg);
+    color: var(--ink);
+    font-family: 'Inter', -apple-system, system-ui, sans-serif;
+    overflow: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body {
+    background:
+      radial-gradient(1200px 760px at 80% 18%, rgba(255,200,61,0.10), transparent 70%),
+      radial-gradient(900px 600px at 12% 80%, rgba(240,131,63,0.06), transparent 70%),
+      linear-gradient(180deg, #0e0b07 0%, #0a0805 100%);
+    padding: 56px 72px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mono {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 12px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+
+  header {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    padding-bottom: 22px;
+    border-bottom: 1px solid var(--rule);
+  }
+  header .l { text-align: left; }
+  header .r { text-align: right; }
+  header .center {
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 22px;
+    color: var(--ink);
+    letter-spacing: 0.01em;
+  }
+  header .center .star {
+    color: var(--gold);
+    margin-right: 6px;
+    font-size: 20px;
+    vertical-align: 1px;
+  }
+
+  main {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1.05fr 1fr;
+    column-gap: 64px;
+    padding-top: 56px;
+    align-items: stretch;
+  }
+
+  /* --------- LEFT: editorial copy --------- */
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 28px;
+  }
+  .pill {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    color: #f6e9d4;
+    background: rgba(240,131,63,0.16);
+    border: 1px solid rgba(240,131,63,0.45);
+    padding: 6px 12px;
+    border-radius: 999px;
+    text-transform: uppercase;
+  }
+  .pill.alt {
+    color: var(--muted);
+    background: transparent;
+    border-color: var(--rule);
+  }
+  .pill.gold {
+    color: #2a1a05;
+    background: linear-gradient(180deg, var(--gold), var(--gold-2));
+    border: 1px solid rgba(255,200,61,0.85);
+  }
+
+  h1 {
+    font-family: 'Fraunces', serif;
+    font-weight: 500;
+    font-size: 100px;
+    line-height: 0.94;
+    letter-spacing: -0.025em;
+    color: var(--ink);
+    margin: 0 0 32px 0;
+  }
+  h1 em {
+    font-style: italic;
+    color: var(--accent);
+    font-weight: 500;
+  }
+  h1 .star-glyph {
+    color: var(--gold);
+    font-style: normal;
+    font-weight: 500;
+    display: inline-block;
+    transform: translateY(8px);
+    text-shadow:
+      0 0 24px rgba(255,200,61,0.55),
+      0 0 60px rgba(255,176,0,0.35);
+  }
+  h1 .underline-accent {
+    position: relative;
+    display: inline-block;
+  }
+  h1 .underline-accent::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -6px;
+    height: 6px;
+    background: var(--accent);
+    border-radius: 4px;
+    opacity: 0.85;
+  }
+
+  .lede {
+    font-family: 'Fraunces', serif;
+    font-weight: 300;
+    font-size: 22px;
+    line-height: 1.5;
+    color: #d8cdb6;
+    max-width: 640px;
+    margin: 0 0 28px 0;
+  }
+  .lede b { font-weight: 500; color: #f3ead8; }
+
+  .url-card {
+    display: inline-flex;
+    align-items: center;
+    gap: 18px;
+    padding: 16px 22px;
+    border: 1px solid var(--rule);
+    border-radius: 14px;
+    background: rgba(255,255,255,0.02);
+    margin-bottom: 36px;
+    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
+  }
+  .url-card .arrow {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 0.22em;
+    color: var(--muted);
+    text-transform: uppercase;
+  }
+  .url-card .url {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 22px;
+    color: var(--ink);
+    letter-spacing: 0.01em;
+  }
+  .url-card .url b {
+    color: var(--accent);
+    font-weight: 500;
+  }
+  .url-card .copybtn {
+    margin-left: 8px;
+    border: 1px solid var(--rule);
+    color: var(--muted);
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+  }
+
+  .meta {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    border-top: 1px solid var(--rule);
+    padding-top: 22px;
+  }
+  .meta .cell {
+    border-right: 1px solid var(--rule);
+    padding-right: 18px;
+  }
+  .meta .cell:last-child { border-right: none; }
+  .meta .num {
+    font-family: 'Fraunces', serif;
+    font-weight: 500;
+    font-size: 42px;
+    line-height: 1;
+    color: var(--ink);
+    letter-spacing: -0.01em;
+  }
+  .meta .num em {
+    font-style: italic;
+    color: var(--accent);
+    font-weight: 500;
+  }
+  .meta .num .gold {
+    color: var(--gold);
+    text-shadow: 0 0 18px rgba(255,200,61,0.45);
+  }
+  .meta .lbl {
+    margin-top: 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10.5px;
+    letter-spacing: 0.18em;
+    color: var(--muted);
+    text-transform: uppercase;
+    line-height: 1.4;
+  }
+
+  /* --------- RIGHT: GitHub mock --------- */
+  .right {
+    position: relative;
+  }
+  .stage {
+    position: absolute;
+    inset: 0;
+  }
+
+  .window {
+    position: absolute;
+    top: 130px;
+    left: 0;
+    right: 0;
+    background: var(--gh-bg);
+    color: var(--gh-fg);
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid var(--gh-border);
+    box-shadow:
+      0 1px 0 rgba(255,255,255,0.04) inset,
+      0 24px 60px rgba(0,0,0,0.55),
+      0 6px 18px rgba(0,0,0,0.45);
+    transform: rotate(-1deg);
+  }
+  .winbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--gh-border);
+    background: linear-gradient(180deg, #15191e, #0f1216);
+  }
+  .winbar .dots { display: flex; gap: 6px; margin-right: 8px; }
+  .winbar .dot { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3a; }
+  .winbar .dot.r { background: #ff5f57; }
+  .winbar .dot.y { background: #febc2e; }
+  .winbar .dot.g { background: #28c840; }
+  .winbar .urlbar {
+    flex: 1;
+    background: #161b22;
+    border: 1px solid var(--gh-border);
+    border-radius: 8px;
+    padding: 6px 12px;
+    color: var(--gh-muted);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .winbar .urlbar .lock { color: #6e7681; font-size: 10px; }
+  .winbar .urlbar b { color: var(--gh-fg); font-weight: 500; }
+
+  .ghnav {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    padding: 10px 22px;
+    border-bottom: 1px solid var(--gh-border);
+    background: var(--gh-bg);
+    font-size: 13px;
+    color: var(--gh-fg);
+  }
+  .ghnav .logo { width: 22px; height: 22px; }
+  .ghnav .crumbs { color: var(--gh-fg); font-weight: 500; }
+  .ghnav .crumbs .slash { color: var(--gh-muted); margin: 0 6px; font-weight: 300; }
+  .ghnav .crumbs .repo { color: var(--gh-link); }
+  .ghnav .private {
+    margin-left: 8px;
+    font-size: 11px;
+    color: var(--gh-muted);
+    border: 1px solid var(--gh-border);
+    border-radius: 999px;
+    padding: 2px 10px;
+  }
+
+  .ghhead {
+    padding: 22px 26px 6px;
+  }
+  .ghhead .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: nowrap;
+  }
+  .ghhead .row > .repotitle { min-width: 0; flex-shrink: 1; }
+  .repotitle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 18px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .repotitle .icon { color: var(--gh-muted); }
+  .repotitle .org { color: var(--gh-link); }
+  .repotitle .name { color: var(--gh-link); font-weight: 600; }
+  .repotitle .sep { color: var(--gh-muted); font-weight: 300; }
+  .repotitle .badge {
+    margin-left: 10px;
+    border: 1px solid var(--gh-border);
+    color: var(--gh-muted);
+    border-radius: 999px;
+    padding: 2px 10px;
+    font-size: 11px;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+  .ghbtn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--gh-btn);
+    border: 1px solid var(--gh-border);
+    color: var(--gh-fg);
+    padding: 5px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    line-height: 1.2;
+  }
+  .ghbtn .icon { color: var(--gh-muted); width: 14px; height: 14px; }
+  .ghbtn .count {
+    margin-left: 4px;
+    padding: 1px 6px;
+    background: var(--gh-pill);
+    border-radius: 999px;
+    color: var(--gh-fg);
+    font-weight: 500;
+    font-size: 11px;
+  }
+  .ghbtn .caret {
+    width: 0; height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid var(--gh-muted);
+    margin-left: 6px;
+  }
+
+  .star-wrap {
+    position: relative;
+    padding: 6px;
+    margin: -6px;
+    border: 2px dashed var(--accent-2);
+    border-radius: 12px;
+    box-shadow:
+      0 0 0 4px rgba(232,90,44,0.10),
+      0 0 36px rgba(255,200,61,0.18);
+    background: rgba(232,90,44,0.04);
+  }
+  .ghbtn.star {
+    background: linear-gradient(180deg, #1c1f25, #14171c);
+    border-color: var(--gh-border);
+  }
+  .ghbtn.star .icon { color: var(--gold); }
+  .ghbtn.star .label { color: var(--gh-fg); font-weight: 600; }
+
+  /* CTA arrow & note pointing at the star */
+  .point {
+    position: absolute;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .point .note {
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 28px;
+    color: var(--accent);
+    line-height: 1.15;
+    text-shadow: 0 6px 18px rgba(0,0,0,0.55);
+  }
+  .point .note .gold { color: var(--gold); }
+  .point .sub {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    color: var(--muted);
+    text-transform: uppercase;
+    margin-top: 8px;
+  }
+  .point.tap {
+    top: -20px;
+    right: 60px;
+    text-align: right;
+  }
+  .arrow-svg {
+    position: absolute;
+    overflow: visible;
+    z-index: 9;
+    pointer-events: none;
+  }
+
+  /* floating sparkle */
+  .sparkle {
+    position: absolute;
+    color: var(--gold);
+    text-shadow: 0 0 16px rgba(255,200,61,0.6);
+    font-size: 22px;
+  }
+
+  .stamp {
+    position: absolute;
+    bottom: 30px;
+    right: 0;
+    width: 110px;
+    height: 110px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 35% 30%, #ffe27a, var(--gold-2) 80%);
+    color: #2a1a05;
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 1.15;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(8deg);
+    box-shadow: 0 14px 30px rgba(255,176,0,0.45);
+    z-index: 5;
+  }
+  .stamp .big { font-size: 28px; line-height: 1; display: block; margin-bottom: 2px; }
+
+  /* secondary stat strip below window */
+  .ghbody {
+    display: grid;
+    grid-template-columns: 1fr 220px;
+    gap: 0;
+    padding: 18px 26px 22px;
+    border-top: 1px solid var(--gh-border);
+    background: var(--gh-bg);
+  }
+  .ghbody .desc {
+    color: var(--gh-fg);
+    font-size: 13px;
+    line-height: 1.55;
+  }
+  .ghbody .desc .em { color: var(--gh-link); }
+  .ghbody .topics {
+    margin-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .topic {
+    font-size: 11px;
+    color: var(--gh-tag-fg);
+    background: var(--gh-tag-bg);
+    padding: 2px 10px;
+    border-radius: 999px;
+  }
+  .ghbody .stats {
+    font-size: 12px;
+    color: var(--gh-muted);
+    text-align: right;
+  }
+  .ghbody .stats .row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    margin-bottom: 6px;
+  }
+  .ghbody .stats .row .icon { color: var(--gh-muted); }
+  .ghbody .stats .row b { color: var(--gh-fg); font-weight: 500; }
+
+  footer {
+    margin-top: 48px;
+    padding-top: 22px;
+    border-top: 1px solid var(--rule);
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+  }
+  footer .l { text-align: left; }
+  footer .r { text-align: right; }
+  footer .c {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.28em;
+    color: var(--muted);
+    text-transform: uppercase;
+  }
+</style>
+</head>
+<body>
+  <header>
+    <div class='mono l'>Open Design · Community · 2026 Edition</div>
+    <div class='center'><span class='star'>★</span>open.design</div>
+    <div class='mono r'>Cover · 03 / 08 · Star Us</div>
+  </header>
+
+  <main>
+    <section class='left'>
+      <div>
+        <div class='eyebrow'>
+          <span class='pill gold'>★ STAR US</span>
+          <span class='pill alt'>Open Source · Apache 2.0</span>
+        </div>
+        <h1>
+          If this saved<br/>
+          you <em>thirty</em><br/>
+          minutes,<br/>
+          give it a <span class='star-glyph'>★</span>.
+        </h1>
+        <p class='lede'>
+          Open Design is built and maintained in the open. <b>Stars don't pay rent —</b>
+          but they tell the next designer, agent, and contributor that this experiment
+          is worth their attention. One click, three seconds, real signal.
+        </p>
+
+        <div class='url-card'>
+          <span class='arrow'>· DROP BY →</span>
+          <span class='url'>github.com/<b>nexu-io/open-design</b></span>
+          <span class='copybtn'>· COPY</span>
+        </div>
+      </div>
+
+      <div class='meta'>
+        <div class='cell'>
+          <div class='num'>71</div>
+          <div class='lbl'>Design<br/>Systems</div>
+        </div>
+        <div class='cell'>
+          <div class='num'>19</div>
+          <div class='lbl'>Composable<br/>Skills</div>
+        </div>
+        <div class='cell'>
+          <div class='num'>06</div>
+          <div class='lbl'>Coding<br/>Agents</div>
+        </div>
+        <div class='cell'>
+          <div class='num'><span class='gold'>★</span></div>
+          <div class='lbl'>One click =<br/>one signal</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- RIGHT: stylized GitHub repo header -->
+    <section class='right'>
+      <div class='stage'>
+
+        <!-- Pointing note above the star -->
+        <div class='point tap'>
+          <div class='note'>Tap the <span class='gold'>★</span> Star<br/>top-right.</div>
+          <div class='sub'>· three seconds · one click ·</div>
+        </div>
+
+        <!-- arc arrow from the note down to the Star button -->
+        <svg class='arrow-svg' style='top:30px; right:30px; width:200px; height:200px;' viewBox='0 0 200 200' fill='none'>
+          <path d='M 30 60 C 60 90, 120 120, 168 168' stroke='#f0833f' stroke-width='2.5' stroke-linecap='round' fill='none' stroke-dasharray='2 8'/>
+          <path d='M 152 156 L 168 170 L 162 150' stroke='#f0833f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/>
+        </svg>
+
+        <!-- sparkles -->
+        <span class='sparkle' style='top:200px; right:30px; font-size:18px;'>✦</span>
+        <span class='sparkle' style='top:260px; right:120px; font-size:14px; opacity:.7;'>✦</span>
+        <span class='sparkle' style='top:150px; right:240px; font-size:12px; opacity:.55;'>✦</span>
+
+        <div class='window'>
+          <div class='winbar'>
+            <div class='dots'>
+              <span class='dot r'></span><span class='dot y'></span><span class='dot g'></span>
+            </div>
+            <div class='urlbar'>
+              <span class='lock'>🔒</span>
+              <span>github.com/<b>nexu-io/open-design</b></span>
+            </div>
+          </div>
+
+          <div class='ghnav'>
+            <svg class='logo' viewBox='0 0 16 16' fill='currentColor'>
+              <path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/>
+            </svg>
+            <div class='crumbs'>
+              <span class='org'>nexu-io</span>
+              <span class='slash'>/</span>
+              <span class='repo'>open-design</span>
+            </div>
+            <span class='private'>Public</span>
+          </div>
+
+          <div class='ghhead'>
+            <div class='row'>
+              <div class='repotitle'>
+                <svg class='icon' width='18' height='18' viewBox='0 0 16 16' fill='currentColor'>
+                  <path fill-rule='evenodd' d='M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.692 1.72.75.75 0 0 1-1.034 1.084A2.5 2.5 0 0 1 2 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 0 1 1-1h8zM5 12.25v3.25a.25.25 0 0 0 .4.2l1.45-1.087a.25.25 0 0 1 .3 0L8.6 15.7a.25.25 0 0 0 .4-.2v-3.25a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25z'/>
+                </svg>
+                <span class='org'>nexu-io</span>
+                <span class='sep'>/</span>
+                <span class='name'>open-design</span>
+                <span class='badge'>Public</span>
+              </div>
+
+              <div class='actions'>
+                <span class='ghbtn'>
+                  <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.756l8.61-8.61Z'/></svg>
+                  <span>Edit Pins</span>
+                  <span class='caret'></span>
+                </span>
+                <span class='ghbtn'>
+                  <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.678 1.367-1.932 2.637-3.023C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z'/></svg>
+                  <span>Watch</span>
+                  <span class='count'>0</span>
+                  <span class='caret'></span>
+                </span>
+                <span class='ghbtn'>
+                  <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'/></svg>
+                  <span>Fork</span>
+                  <span class='count'>0</span>
+                  <span class='caret'></span>
+                </span>
+                <span class='star-wrap'>
+                  <span class='ghbtn star'>
+                    <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z'/></svg>
+                    <span class='label'>Star</span>
+                    <span class='count'>1</span>
+                    <span class='caret'></span>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class='ghbody'>
+            <div>
+              <div class='desc'>
+                <span class='em'>★</span> Local-first open replica of Anthropic's <b>Claude Design</b>.
+                ⚡ 19 Skills · ✶ 71 brand-grade Design Systems · ⛁ sandboxed preview ·
+                ⇩ HTML / PDF / PPTX export. Runs on Claude Code · Codex · Cursor · Gemini CLI · OpenCode · Qwen.
+              </div>
+              <div class='topics'>
+                <span class='topic'>react</span>
+                <span class='topic'>design</span>
+                <span class='topic'>design-systems</span>
+                <span class='topic'>typescript</span>
+                <span class='topic'>skills</span>
+                <span class='topic'>cursor</span>
+                <span class='topic'>local-first</span>
+                <span class='topic'>byok</span>
+                <span class='topic'>claude</span>
+                <span class='topic'>ai-agents</span>
+              </div>
+            </div>
+            <div class='stats'>
+              <div class='row'>
+                <span>Apache 2.0</span>
+                <svg class='icon' width='14' height='14' viewBox='0 0 16 16' fill='currentColor'><path d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Z'/></svg>
+              </div>
+              <div class='row'><b>3</b> Commits</div>
+              <div class='row'><b>2</b> Branches</div>
+              <div class='row'><b>0</b> Tags</div>
+              <div class='row'><b>0</b> Issues</div>
+              <div class='row' style='color:var(--gold);'>★ <b style='color:var(--gold);'>1</b> Star · be the next</div>
+            </div>
+          </div>
+        </div>
+
+        <div class='stamp'>
+          <span><span class='big'>★</span>STAR<br/>US!</span>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class='mono l'>Local-first · BYOK · Apache 2.0</div>
+    <div class='c'>· git clone · pnpm install · pnpm dev ·</div>
+    <div class='mono r'>github.com/nexu-io/open-design</div>
+  </footer>
+</body>
+</html>
@@ -11,7 +11,7 @@
  "scripts": {
    "daemon": "node daemon/cli.js --no-open",
    "dev": "vite",
-    "dev:all": "concurrently -k -n daemon,web -c cyan,magenta \"npm:daemon\" \"npm:dev\"",
+    "dev:all": "node scripts/dev-all.mjs",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "typecheck": "tsc -b --noEmit",
@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+// Launcher for `npm run dev:all`.
+//
+// Probes for free ports for the daemon (OD_PORT, default 7456) and the Vite
+// dev server (VITE_PORT, default 5173) before spawning `concurrently`, so a
+// stray process holding either port doesn't kill the whole boot. The
+// resolved ports are exported into the child env, which means:
+//   * the daemon's cli.js sees the new OD_PORT and binds to it
+//   * vite.config.ts reads the same OD_PORT and points its /api proxy at
+//     the daemon's actual port
+//   * Vite itself binds to VITE_PORT
+//
+// If a port is busy we walk forward up to PORT_SEARCH_RANGE steps and log
+// the switch so the user notices.
+
+import { spawn } from 'node:child_process';
+import net from 'node:net';
+
+const HOST = '127.0.0.1';
+const PORT_SEARCH_RANGE = 50;
+
+function isPortFree(port, host = HOST) {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.unref();
+    server.once('error', () => resolve(false));
+    server.listen({ port, host, exclusive: true }, () => {
+      server.close(() => resolve(true));
+    });
+  });
+}
+
+async function findFreePort(start, label) {
+  for (let port = start; port < start + PORT_SEARCH_RANGE; port++) {
+    if (await isPortFree(port)) return port;
+  }
+  throw new Error(
+    `[dev:all] could not find a free ${label} port near ${start} (tried ${PORT_SEARCH_RANGE})`,
+  );
+}
+
+const desiredDaemon = Number(process.env.OD_PORT) || 7456;
+const desiredVite = Number(process.env.VITE_PORT) || 5173;
+
+const daemonPort = await findFreePort(desiredDaemon, 'daemon');
+const vitePort = await findFreePort(desiredVite, 'vite');
+
+if (daemonPort !== desiredDaemon) {
+  console.log(
+    `[dev:all] daemon port ${desiredDaemon} is busy, switching to ${daemonPort}`,
+  );
+}
+if (vitePort !== desiredVite) {
+  console.log(
+    `[dev:all] vite port ${desiredVite} is busy, switching to ${vitePort}`,
+  );
+}
+
+const env = {
+  ...process.env,
+  OD_PORT: String(daemonPort),
+  VITE_PORT: String(vitePort),
+};
+
+// We spawn the local `concurrently` bin via shell so Windows .cmd shims
+// resolve correctly. The `npm:daemon` / `npm:dev` shorthand runs the
+// matching package.json scripts, so any future tweak to those scripts is
+// picked up automatically.
+const child = spawn(
+  'concurrently',
+  ['-k', '-n', 'daemon,web', '-c', 'cyan,magenta', 'npm:daemon', 'npm:dev'],
+  { env, stdio: 'inherit', shell: true },
+);
+
+child.on('exit', (code, signal) => {
+  if (signal) process.kill(process.pid, signal);
+  else process.exit(code ?? 0);
+});
+
+for (const sig of ['SIGINT', 'SIGTERM']) {
+  process.on(sig, () => {
+    if (!child.killed) child.kill(sig);
+  });
+}
@@ -116,6 +116,7 @@ export function App() {
    const withOnboarding: AppConfig = { ...next, onboardingCompleted: true };
    saveConfig(withOnboarding);
    setConfig(withOnboarding);
+    setSettingsOpen(false);
  }, []);

  const handleModeChange = useCallback(
@@ -136,6 +137,18 @@ export function App() {
    [config],
  );

+  const handleAgentModelChange = useCallback(
+    (agentId: string, choice: { model?: string; reasoning?: string }) => {
+      const prev = config.agentModels?.[agentId] ?? {};
+      const merged = { ...prev, ...choice };
+      const nextAgentModels = { ...(config.agentModels ?? {}), [agentId]: merged };
+      const next = { ...config, agentModels: nextAgentModels };
+      saveConfig(next);
+      setConfig(next);
+    },
+    [config],
+  );
+
  const handleChangeDefaultDesignSystem = useCallback(
    (designSystemId: string) => {
      const next = { ...config, designSystemId };
@@ -271,6 +284,7 @@ export function App() {
          daemonLive={daemonLive}
          onModeChange={handleModeChange}
          onAgentChange={handleAgentChange}
+          onAgentModelChange={handleAgentModelChange}
          onRefreshAgents={refreshAgents}
          onOpenSettings={openSettings}
          onBack={handleBack}
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useT } from '../i18n';
 import { AgentIcon } from './AgentIcon';
 import { Icon } from './Icon';
+import { renderModelOptions } from './modelOptions';
 import type { AgentInfo, AppConfig, ExecMode } from '../types';

 interface Props {
@@ -10,6 +11,10 @@ interface Props {
  daemonLive: boolean;
  onModeChange: (mode: ExecMode) => void;
  onAgentChange: (id: string) => void;
+  onAgentModelChange: (
+    id: string,
+    choice: { model?: string; reasoning?: string },
+  ) => void;
  onOpenSettings: () => void;
  onRefreshAgents: () => void;
  onBack?: () => void;
@@ -26,6 +31,7 @@ export function AvatarMenu({
  daemonLive,
  onModeChange,
  onAgentChange,
+  onAgentModelChange,
  onOpenSettings,
  onRefreshAgents,
  onBack,
@@ -58,6 +64,19 @@ export function AvatarMenu({

  const installedAgents = agents.filter((a) => a.available);

+  // Resolve the user's model + reasoning pick for the active agent. Falls
+  // back to the agent's first declared option (`'default'`) when the user
+  // hasn't touched the picker yet so the labels don't read as empty.
+  const currentChoice =
+    (config.agentId && config.agentModels?.[config.agentId]) || {};
+  const currentModelId =
+    currentChoice.model ?? currentAgent?.models?.[0]?.id ?? null;
+  const currentReasoningId =
+    currentChoice.reasoning ?? currentAgent?.reasoningOptions?.[0]?.id ?? null;
+  const currentModelLabel = currentAgent?.models?.find(
+    (m) => m.id === currentModelId,
+  )?.label;
+
  return (
    <div className="avatar-menu" ref={wrapRef}>
      <button
@@ -88,7 +107,7 @@ export function AvatarMenu({
              {config.mode === 'api'
                ? safeHost(config.baseUrl)
                : currentAgent
-                  ? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}`
+                  ? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}${currentModelLabel && currentModelId !== 'default' ? ` · ${currentModelLabel}` : ''}`
                  : t('avatar.noAgentSelected')}
            </span>
          </div>
@@ -133,18 +152,7 @@ export function AvatarMenu({

          {config.mode === 'daemon' && installedAgents.length > 0 ? (
            <>
-              <div
-                style={{
-                  fontSize: 10.5,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.06em',
-                  color: 'var(--text-faint)',
-                  fontWeight: 600,
-                  padding: '8px 10px 4px',
-                }}
-              >
-                {t('avatar.codeAgent')}
-              </div>
+              <div className="avatar-section-label">{t('avatar.codeAgent')}</div>
              {installedAgents.map((a) => (
                <button
                  type="button"
@@ -152,7 +160,8 @@ export function AvatarMenu({
                  className="avatar-item"
                  onClick={() => {
                    onAgentChange(a.id);
-                    setOpen(false);
+                    // Keep the popover open so the user can immediately
+                    // pick a model for the agent they just chose.
                  }}
                >
                  <AgentIcon id={a.id} size={18} />
@@ -166,6 +175,71 @@ export function AvatarMenu({
                  ) : null}
                </button>
              ))}
+              {currentAgent &&
+              currentAgent.available &&
+              ((currentAgent.models && currentAgent.models.length > 0) ||
+                (currentAgent.reasoningOptions &&
+                  currentAgent.reasoningOptions.length > 0)) ? (
+                <div className="avatar-model-section">
+                  <div className="avatar-section-label">
+                    {t('avatar.modelSection')}
+                  </div>
+                  {currentAgent.models && currentAgent.models.length > 0 ? (
+                    <label className="avatar-select-row">
+                      <span className="avatar-select-label">
+                        {t('avatar.modelLabel')}
+                      </span>
+                      <select
+                        className="avatar-select"
+                        value={currentModelId ?? ''}
+                        onChange={(e) =>
+                          onAgentModelChange(currentAgent.id, {
+                            model: e.target.value,
+                          })
+                        }
+                      >
+                        {renderModelOptions(currentAgent.models)}
+                        {/* When the user has typed a custom id in
+                            Settings, surface it here too so the dropdown
+                            actually shows the active selection rather
+                            than collapsing to "Default". */}
+                        {currentModelId &&
+                        !currentAgent.models.some(
+                          (m) => m.id === currentModelId,
+                        ) ? (
+                          <option value={currentModelId}>
+                            {currentModelId}{' '}
+                            {t('avatar.customSuffix')}
+                          </option>
+                        ) : null}
+                      </select>
+                    </label>
+                  ) : null}
+                  {currentAgent.reasoningOptions &&
+                  currentAgent.reasoningOptions.length > 0 ? (
+                    <label className="avatar-select-row">
+                      <span className="avatar-select-label">
+                        {t('avatar.reasoningLabel')}
+                      </span>
+                      <select
+                        className="avatar-select"
+                        value={currentReasoningId ?? ''}
+                        onChange={(e) =>
+                          onAgentModelChange(currentAgent.id, {
+                            reasoning: e.target.value,
+                          })
+                        }
+                      >
+                        {currentAgent.reasoningOptions.map((r) => (
+                          <option key={r.id} value={r.id}>
+                            {r.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                </div>
+              ) : null}
              <button
                type="button"
                className="avatar-item"
@@ -53,6 +53,10 @@ interface Props {
  daemonLive: boolean;
  onModeChange: (mode: AppConfig['mode']) => void;
  onAgentChange: (id: string) => void;
+  onAgentModelChange: (
+    id: string,
+    choice: { model?: string; reasoning?: string },
+  ) => void;
  onRefreshAgents: () => void;
  onOpenSettings: () => void;
  onBack: () => void;
@@ -72,6 +76,7 @@ export function ProjectView({
  daemonLive,
  onModeChange,
  onAgentChange,
+  onAgentModelChange,
  onRefreshAgents,
  onOpenSettings,
  onBack,
@@ -490,6 +495,7 @@ export function ProjectView({
          handlers.onError(new Error('Pick a local agent first (top bar).'));
          return;
        }
+        const choice = config.agentModels?.[config.agentId];
        void streamViaDaemon({
          agentId: config.agentId,
          history: nextHistory,
@@ -498,6 +504,8 @@ export function ProjectView({
          handlers,
          projectId: project.id,
          attachments: attachments.map((a) => a.path),
+          model: choice?.model ?? null,
+          reasoning: choice?.reasoning ?? null,
        });
      } else {
        pushEvent({ kind: 'status', label: 'requesting', detail: config.model });
@@ -728,6 +736,7 @@ export function ProjectView({
            daemonLive={daemonLive}
            onModeChange={onModeChange}
            onAgentChange={onAgentChange}
+            onAgentModelChange={onAgentModelChange}
            onOpenSettings={onOpenSettings}
            onRefreshAgents={onRefreshAgents}
            onBack={onBack}
@@ -2,6 +2,11 @@ import { useEffect, useMemo, useState } from 'react';
 import { LOCALE_LABEL, LOCALES, useI18n } from '../i18n';
 import type { Locale } from '../i18n';
 import { AgentIcon } from './AgentIcon';
+import {
+  CUSTOM_MODEL_SENTINEL,
+  isCustomModel,
+  renderModelOptions,
+} from './modelOptions';
 import type { AgentInfo, AppConfig, ExecMode } from '../types';

 interface Props {
@@ -183,6 +188,108 @@ export function SettingsDialog({
                })}
              </div>
            )}
+            {(() => {
+              const selected = agents.find(
+                (a) => a.id === cfg.agentId && a.available,
+              );
+              if (!selected) return null;
+              const hasModels =
+                Array.isArray(selected.models) && selected.models.length > 0;
+              const hasReasoning =
+                Array.isArray(selected.reasoningOptions) &&
+                selected.reasoningOptions.length > 0;
+              if (!hasModels && !hasReasoning) return null;
+              const choice = cfg.agentModels?.[selected.id] ?? {};
+              const setChoice = (
+                next: { model?: string; reasoning?: string },
+              ) => {
+                setCfg((c) => {
+                  const prev = c.agentModels?.[selected.id] ?? {};
+                  return {
+                    ...c,
+                    agentModels: {
+                      ...(c.agentModels ?? {}),
+                      [selected.id]: { ...prev, ...next },
+                    },
+                  };
+                });
+              };
+              const modelValue =
+                choice.model ?? selected.models?.[0]?.id ?? '';
+              const reasoningValue =
+                choice.reasoning ??
+                selected.reasoningOptions?.[0]?.id ?? '';
+              const customActive =
+                hasModels && isCustomModel(modelValue, selected.models!);
+              const selectValue = customActive
+                ? CUSTOM_MODEL_SENTINEL
+                : modelValue;
+              return (
+                <div className="agent-model-row">
+                  {hasModels ? (
+                    <label className="field">
+                      <span className="field-label">
+                        {t('settings.modelPicker')}
+                      </span>
+                      <select
+                        value={selectValue}
+                        onChange={(e) => {
+                          if (e.target.value === CUSTOM_MODEL_SENTINEL) {
+                            // Switching to "Custom…" should clear the
+                            // value so the input below opens empty for
+                            // typing — keeping the previous live id
+                            // would defeat the point.
+                            setChoice({ model: '' });
+                          } else {
+                            setChoice({ model: e.target.value });
+                          }
+                        }}
+                      >
+                        {renderModelOptions(selected.models!)}
+                        <option value={CUSTOM_MODEL_SENTINEL}>
+                          {t('settings.modelCustom')}
+                        </option>
+                      </select>
+                    </label>
+                  ) : null}
+                  {customActive ? (
+                    <label className="field">
+                      <span className="field-label">
+                        {t('settings.modelCustomLabel')}
+                      </span>
+                      <input
+                        type="text"
+                        value={modelValue}
+                        placeholder={t('settings.modelCustomPlaceholder')}
+                        onChange={(e) =>
+                          setChoice({ model: e.target.value.trim() })
+                        }
+                      />
+                    </label>
+                  ) : null}
+                  {hasReasoning ? (
+                    <label className="field">
+                      <span className="field-label">
+                        {t('settings.reasoningPicker')}
+                      </span>
+                      <select
+                        value={reasoningValue}
+                        onChange={(e) =>
+                          setChoice({ reasoning: e.target.value })
+                        }
+                      >
+                        {selected.reasoningOptions!.map((r) => (
+                          <option key={r.id} value={r.id}>
+                            {r.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                  <p className="hint">{t('settings.modelPickerHint')}</p>
+                </div>
+              );
+            })()}
          </section>
        ) : (
          <section className="settings-section">
@@ -276,10 +383,7 @@ export function SettingsDialog({
            type="button"
            className="primary"
            disabled={!canSave}
-            onClick={() => {
-              onSave(cfg);
-              onClose();
-            }}
+            onClick={() => onSave(cfg)}
          >
            {welcome ? t('settings.getStarted') : t('common.save')}
          </button>
@@ -0,0 +1,71 @@
+import type { AgentModelOption } from '../types';
+
+// Render the `<option>` children for a model `<select>`. When the list
+// contains `provider/model` ids (opencode's listing has hundreds), we
+// group them under `<optgroup>` so the dropdown is navigable. Flat lists
+// (Claude, Codex, Gemini, Qwen) are emitted as plain options.
+//
+// `'default'` is always pinned first (no group), so the user can return
+// to "let the CLI decide" with one click.
+export function renderModelOptions(models: AgentModelOption[]) {
+  const groups = new Map<string, AgentModelOption[]>();
+  const flat: AgentModelOption[] = [];
+  for (const m of models) {
+    const slash = m.id.indexOf('/');
+    if (m.id === 'default' || slash <= 0) {
+      flat.push(m);
+      continue;
+    }
+    const provider = m.id.slice(0, slash);
+    const arr = groups.get(provider) ?? [];
+    arr.push(m);
+    groups.set(provider, arr);
+  }
+  if (groups.size === 0) {
+    return (
+      <>
+        {flat.map((m) => (
+          <option key={m.id} value={m.id}>
+            {m.label}
+          </option>
+        ))}
+      </>
+    );
+  }
+  return (
+    <>
+      {flat.map((m) => (
+        <option key={m.id} value={m.id}>
+          {m.label}
+        </option>
+      ))}
+      {Array.from(groups.entries()).map(([provider, items]) => (
+        <optgroup key={provider} label={provider}>
+          {items.map((m) => (
+            <option key={m.id} value={m.id}>
+              {/* Strip the redundant `provider/` prefix from the label
+                  inside its own optgroup; keep it in the value so the
+                  CLI sees the fully-qualified id. */}
+              {m.label.startsWith(`${provider}/`)
+                ? m.label.slice(provider.length + 1)
+                : m.label}
+            </option>
+          ))}
+        </optgroup>
+      ))}
+    </>
+  );
+}
+
+// True when the picked model id isn't one of the listed options — i.e.
+// the user has typed a custom id and we should keep the custom input
+// visible / the dropdown showing "Custom…".
+export function isCustomModel(
+  modelId: string | null | undefined,
+  models: AgentModelOption[],
+): boolean {
+  if (!modelId) return false;
+  return !models.some((m) => m.id === modelId);
+}
+
+export const CUSTOM_MODEL_SENTINEL = '__custom__';
@@ -83,6 +83,13 @@ export const en: Dict = {
  'settings.noAgentSelected': 'no agent selected',
  'settings.language': 'Language',
  'settings.languageHint': 'Switch the interface language. Saved to this browser.',
+  'settings.modelPicker': 'Model',
+  'settings.reasoningPicker': 'Reasoning effort',
+  'settings.modelPickerHint':
+    'Fetched from the CLI when it exposes a `models` command. "Default" leaves the choice to the CLI’s own config; "Custom…" lets you type any model id the CLI accepts.',
+  'settings.modelCustom': 'Custom (type below)…',
+  'settings.modelCustomLabel': 'Custom model id',
+  'settings.modelCustomPlaceholder': 'e.g. anthropic/claude-sonnet-4-6',

  'entry.tabDesigns': 'Designs',
  'entry.tabExamples': 'Examples',
@@ -211,6 +218,10 @@ export const en: Dict = {
  'avatar.metaOffline': 'offline',
  'avatar.metaSelected': 'selected',
  'avatar.noAgentSelected': 'no agent selected',
+  'avatar.modelSection': 'Model',
+  'avatar.modelLabel': 'Model',
+  'avatar.reasoningLabel': 'Reasoning',
+  'avatar.customSuffix': '(custom)',

  'project.backToProjects': 'Back to projects',
  'project.metaFreeform': 'freeform',
@@ -82,6 +82,13 @@ export const zhCN: Dict = {
  'settings.noAgentSelected': '尚未选择代理',
  'settings.language': '界面语言',
  'settings.languageHint': '切换界面语言，设置仅保存在当前浏览器。',
+  'settings.modelPicker': '模型',
+  'settings.reasoningPicker': '推理强度',
+  'settings.modelPickerHint':
+    '当 CLI 提供 `models` 命令时会自动拉取。选择「默认」则沿用 CLI 自身的配置；选择「自定义」可手动输入任何 CLI 支持的模型 id。',
+  'settings.modelCustom': '自定义（在下方填写）…',
+  'settings.modelCustomLabel': '自定义模型 id',
+  'settings.modelCustomPlaceholder': '例如 anthropic/claude-sonnet-4-6',

  'entry.tabDesigns': '我的设计',
  'entry.tabExamples': '示例',
@@ -208,6 +215,10 @@ export const zhCN: Dict = {
  'avatar.metaOffline': '未运行',
  'avatar.metaSelected': '已选',
  'avatar.noAgentSelected': '尚未选择代理',
+  'avatar.modelSection': '模型',
+  'avatar.modelLabel': '模型',
+  'avatar.reasoningLabel': '推理',
+  'avatar.customSuffix': '（自定义）',

  'project.backToProjects': '返回项目列表',
  'project.metaFreeform': '自由设计',
@@ -93,6 +93,12 @@ export interface Dict {
  'settings.noAgentSelected': string;
  'settings.language': string;
  'settings.languageHint': string;
+  'settings.modelPicker': string;
+  'settings.reasoningPicker': string;
+  'settings.modelPickerHint': string;
+  'settings.modelCustom': string;
+  'settings.modelCustomLabel': string;
+  'settings.modelCustomPlaceholder': string;

  // Entry view / tabs
  'entry.tabDesigns': string;
@@ -224,6 +230,10 @@ export interface Dict {
  'avatar.metaOffline': string;
  'avatar.metaSelected': string;
  'avatar.noAgentSelected': string;
+  'avatar.modelSection': string;
+  'avatar.modelLabel': string;
+  'avatar.reasoningLabel': string;
+  'avatar.customSuffix': string;

  // Project view / chat pane / composer
  'project.backToProjects': string;
@@ -293,6 +293,45 @@ code {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
 }
+.avatar-section-label {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+  font-weight: 600;
+  padding: 8px 10px 4px;
+}
+.avatar-model-section {
+  padding: 2px 10px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-top: 1px dashed var(--border-soft);
+  margin-top: 4px;
+}
+.avatar-select-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.avatar-select-label {
+  flex-shrink: 0;
+  min-width: 64px;
+}
+.avatar-select {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+  color: var(--text);
+  cursor: pointer;
+}
+.avatar-select:focus { outline: 2px solid var(--accent-soft, var(--border-strong)); }

 /* Environment pill — only used in entry view header now */
 .env-pill {
@@ -827,6 +866,23 @@ code {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .agent-card-meta .muted { color: var(--text-soft); font-style: italic; }
+.agent-model-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm);
+  background: var(--bg-subtle);
+}
+.agent-model-row .field { gap: 4px; }
+.agent-model-row .field-label {
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+.agent-model-row .hint { margin: 0; font-size: 11.5px; }
 .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
@@ -30,6 +30,11 @@ export interface DaemonStreamOptions {
  // daemon resolves them inside the project folder, validates they
  // exist, and stitches them into the user message as `@<path>` hints.
  attachments?: string[];
+  // Per-CLI model + reasoning the user picked in the model menu. Both are
+  // optional; the daemon validates them against the agent's declared
+  // options and falls back to the CLI default when missing.
+  model?: string | null;
+  reasoning?: string | null;
 }

 export async function streamViaDaemon({
@@ -40,6 +45,8 @@ export async function streamViaDaemon({
  handlers,
  projectId,
  attachments,
+  model,
+  reasoning,
 }: DaemonStreamOptions): Promise<void> {
  // Local CLIs are single-turn print-mode programs, so we collapse the whole
  // chat into one string. If this becomes too noisy for long histories, the
@@ -53,6 +60,8 @@ export async function streamViaDaemon({
    message: transcript,
    projectId: projectId ?? null,
    attachments: attachments ?? [],
+    model: model ?? null,
+    reasoning: reasoning ?? null,
  });

  let acc = '';
@@ -11,6 +11,7 @@ export const DEFAULT_CONFIG: AppConfig = {
  skillId: null,
  designSystemId: null,
  onboardingCompleted: false,
+  agentModels: {},
 };

 export function loadConfig(): AppConfig {
@@ -1,5 +1,14 @@
 export type ExecMode = 'daemon' | 'api';

+// Per-CLI model + reasoning the user picked in the model menu. Each agent
+// keeps its own slot so flipping between Codex and Gemini doesn't reset the
+// other one's choice. Missing entries fall back to the agent's first
+// declared model (`'default'` — let the CLI pick).
+export interface AgentModelChoice {
+  model?: string;
+  reasoning?: string;
+}
+
 export interface AppConfig {
  mode: ExecMode;
  apiKey: string;
@@ -12,6 +21,10 @@ export interface AppConfig {
  // least once (saved or skipped). Bootstrap skips the auto-popup when
  // this is set so refreshing the page doesn't re-prompt.
  onboardingCompleted?: boolean;
+  // Per-CLI model picker state, keyed by agent id (e.g. `gemini`, `codex`).
+  // Pre-existing configs without this field fall through to the agent's
+  // declared default.
+  agentModels?: Record<string, AgentModelChoice>;
 }

 export type AgentEvent =
@@ -63,6 +76,11 @@ export interface ExamplePreview {
  html: string;
 }

+export interface AgentModelOption {
+  id: string;
+  label: string;
+}
+
 export interface AgentInfo {
  id: string;
  name: string;
@@ -70,6 +88,12 @@ export interface AgentInfo {
  available: boolean;
  path?: string;
  version?: string | null;
+  // Models surfaced in the model picker for this CLI. The first entry is
+  // treated as the default (typically the synthetic `'default'` option,
+  // meaning "let the CLI use whatever's in its own config").
+  models?: AgentModelOption[];
+  // Reasoning-effort presets — currently only Codex exposes this.
+  reasoningOptions?: AgentModelOption[];
 }

 export interface SkillSummary {
@@ -2,11 +2,12 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';

 const DAEMON_PORT = Number(process.env.OD_PORT) || 7456;
+const VITE_PORT = Number(process.env.VITE_PORT) || 5173;

 export default defineConfig({
  plugins: [react()],
  server: {
-    port: 5173,
+    port: VITE_PORT,
    proxy: {
      '/api': {
        target: `http://127.0.0.1:${DAEMON_PORT}`,
Author	SHA1	Message	Date
pftom	bbeb868040	feat(models): fetch live model lists from CLIs, allow custom ids Each agent definition now declares an optional `listModels` spec; the daemon runs the CLI's own list-models command (e.g. `opencode models`, `cursor-agent models`) during agent detection and uses the result as the dropdown options. Hardcoded entries shrink to a `fallbackModels` hint that only kicks in when the CLI has no listing command (Claude, Codex, Gemini, Qwen) or when the listing fails (e.g. unauth'd cursor-agent). UI groups `provider/model` ids by provider via <optgroup> so opencode's ~175 live models stay navigable, and the Settings dialog gains a "Custom…" entry that opens a free-text input for any model id the listing didn't surface yet. Daemon validates picks against the live cache + fallback, with a permissive sanitizer for custom ids.	2026-04-29 00:32:03 +08:00
pftom	f2d28a1cca	feat: per-CLI model picker for local agents (closes #8 ) Each agent CLI declares its selectable models (and reasoning effort, for Codex) on the daemon side; the frontend renders a model dropdown in the avatar menu and the Settings dialog scoped to the currently picked CLI, persists the choice per-agent in the AppConfig, and threads it through /api/chat to the spawn argv. "Default" leaves the flag off so the CLI's own config wins.	2026-04-28 22:54:18 +08:00
Tom Huang	94941f59a9	feat(dev): auto-switch ports on dev:all when defaults are busy (#9 ) * Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name. * Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic. * Enhance README and add star promotion assets - Added a "Star us" section in both English and Chinese README files to encourage users to star the project on GitHub. - Included a new image asset for the star promotion. - Introduced a new HTML file for a dedicated star promotion page. - Updated .gitignore to exclude new cursor-related files. * feat(dev): auto-switch ports on dev:all when defaults are busy Adds a small launcher (scripts/dev-all.mjs) that probes free ports for the daemon (OD_PORT, default 7456) and Vite (VITE_PORT, default 5173) before invoking concurrently, so a stray process holding either port no longer breaks the boot. The resolved ports are exported into the child env; vite.config.ts now reads VITE_PORT to keep its dev server and /api proxy aligned with the daemon's actual port. Made-with: Cursor	2026-04-28 22:25:45 +08:00
Tom Huang	d243b37d74	fix: allow Claude Code to read skill seeds and design-system specs (#6 ) (#7 ) * Allow Claude Code to read skill seeds and design-system specs (#6) The skill body's preamble points the agent at absolute paths like `<repo>/skills/guizang-ppt/assets/template.html`, but the agent's cwd is `.od/projects/<id>/`. Without an explicit allowlist Claude Code blocks Read on those paths and the user sees a permission error mid-conversation. Pass `SKILLS_DIR` and `DESIGN_SYSTEMS_DIR` through `buildArgs` and emit them as `--add-dir` for Claude so the seed template, references, and design-system DESIGN.md are all readable. Other agents ignore the extra dirs (no equivalent flag). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs: add verification screenshot for issue #6 fix Captures the agent successfully Read-ing skills/guizang-ppt/ side files through the new --add-dir allowlist, confirming the permission error from issue #6 is gone. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-28 22:25:32 +08:00
Tom Huang	1c942e6cb7	Feat/support star us (#5 ) * Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name. * Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic. * Enhance README and add star promotion assets - Added a "Star us" section in both English and Chinese README files to encourage users to star the project on GitHub. - Included a new image asset for the star promotion. - Introduced a new HTML file for a dedicated star promotion page. - Updated .gitignore to exclude new cursor-related files.	2026-04-28 21:00:33 +08:00
lakatos	d1c3230642	fix: welcome dialog Save overwriting user's agent pick (#4 ) The Save button fired both onSave and onClose. onClose's closed-over `config` still held the bootstrap default (agentId: 'claude'), so it re-ran setConfig with the stale value right after onSave wrote the user's choice — leaving the user with Claude Code even when they had clicked Codex on first run. Split the responsibilities: Save now owns close (handleConfigSave calls setSettingsOpen(false)); onClose stays scoped to dismiss flows (Skip / backdrop) where the stale-config write is harmless.	2026-04-28 20:41:27 +08:00
Tom Huang	bc2198103a	Feat/optimize naming (#2 ) * Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name. * Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic.	2026-04-28 16:28:19 +08:00