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
30 changed files with 1706 additions and 121 deletions
@@ -16,3 +16,5 @@ dist
 tsconfig.tsbuildinfo
 .claude-sessions/*
 .cursor/*
@@ -211,7 +211,7 @@ DISCOVERY directives  (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critiq
  + active SKILL.md    (19 skills available)
  + project metadata   (kind, fidelity, speakerNotes, animations, inspiration ids)
  + skill side files   (auto-injected pre-flight: read assets/template.html + references/*.md)
-  + (deck mode only)   DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)
+  + (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)
 ```
 Every layer is composable. Every layer is a file you can edit. Read [`src/prompts/system.ts`](src/prompts/system.ts) and [`src/prompts/discovery.ts`](src/prompts/discovery.ts) to see the actual contract.
@@ -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:
@@ -211,7 +211,7 @@ DISCOVERY 指令         （turn-1 表单、turn-2 品牌分支、TodoWrite、
  + 激活的 SKILL.md    （19 套备选）
  + 项目元数据          （kind、fidelity、speakerNotes、animations、灵感 system id）
  + Skill 副文件       （自动注入 pre-flight：先读 assets/template.html + references/*.md）
-  + （仅 deck 模式）    DECK_FRAMEWORK_DIRECTIVE   （nav / counter / scroll / print）
+  + （deck kind 且无 skill 种子时） DECK_FRAMEWORK_DIRECTIVE   （nav / counter / scroll / print）
 ```
 每一层都可组合。每一层都是一个你能改的文件。看 [`src/prompts/system.ts`](src/prompts/system.ts) 和 [`src/prompts/discovery.ts`](src/prompts/discovery.ts) 就知道真实契约长什么样。
@@ -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.
+// Per-agent model picker.
-// `buildArgs(prompt, imagePaths)` returns argv for the child process.
+//
 //   - `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) => [
+    // `claude` has no list-models subcommand; the CLI accepts both short
-      '-p',
+    // aliases (sonnet/opus/haiku) and the full ids, so we ship both as
-      prompt,
+    // hints. Users who want a non-shipped model can paste it via the
-      '--output-format',
+    // Settings dialog's custom-model input.
-      'stream-json',
+    fallbackModels: [
-      '--verbose',
+      DEFAULT_MODEL_OPTION,
-      '--include-partial-messages',
+      { 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;
@@ -2,9 +2,9 @@
 // front-matter, returns listing. No watching in this MVP — re-scans on every
 // GET /api/skills, which is fine for dozens of skills.
-import { readdir, readFile, stat } from 'node:fs/promises';
+import { readdir, readFile, stat } from "node:fs/promises";
-import path from 'node:path';
+import path from "node:path";
-import { parseFrontmatter } from './frontmatter.js';
+import { parseFrontmatter } from "./frontmatter.js";
 export async function listSkills(skillsRoot) {
  const out = [];
@@ -17,26 +17,32 @@ export async function listSkills(skillsRoot) {
  for (const entry of entries) {
    if (!entry.isDirectory()) continue;
    const dir = path.join(skillsRoot, entry.name);
-    const skillPath = path.join(dir, 'SKILL.md');
+    const skillPath = path.join(dir, "SKILL.md");
    try {
      const stats = await stat(skillPath);
      if (!stats.isFile()) continue;
-      const raw = await readFile(skillPath, 'utf8');
+      const raw = await readFile(skillPath, "utf8");
      const { data, body } = parseFrontmatter(raw);
      const hasAttachments = await dirHasAttachments(dir);
      const mode = data.od?.mode || inferMode(body, data.description);
      out.push({
        id: data.name || entry.name,
        name: data.name || entry.name,
-        description: data.description || '',
+        description: data.description || "",
        triggers: Array.isArray(data.triggers) ? data.triggers : [],
        mode,
-        platform: normalizePlatform(data.od?.platform, mode, body, data.description),
+        platform: normalizePlatform(
          data.od?.platform,
          mode,
          body,
          data.description
        ),
        scenario: normalizeScenario(data.od?.scenario, body, data.description),
-        previewType: data.od?.preview?.type || 'html',
+        previewType: data.od?.preview?.type || "html",
        designSystemRequired: data.od?.design_system?.requires ?? true,
        defaultFor: normalizeDefaultFor(data.od?.default_for),
-        upstream: typeof data.od?.upstream === 'string' ? data.od.upstream : null,
+        upstream:
          typeof data.od?.upstream === "string" ? data.od.upstream : null,
        featured: normalizeFeatured(data.od?.featured),
        // Optional metadata hints used by 'Use this prompt' fast-create so
        // the resulting project mirrors the shipped example.html. Each hint
@@ -63,15 +69,15 @@ export async function listSkills(skillsRoot) {
 // open those files via absolute paths.
 function withSkillRootPreamble(body, dir) {
  const preamble = [
-    '> **Skill root (absolute):** `' + dir + '`',
+    "> **Skill root (absolute):** `" + dir + "`",
-    '>',
+    ">",
-    '> This skill ships side files alongside `SKILL.md`. When the workflow',
+    "> This skill ships side files alongside `SKILL.md`. When the workflow",
-    '> below references relative paths such as `assets/template.html` or',
+    "> below references relative paths such as `assets/template.html` or",
-    '> `references/layouts.md`, resolve them against the skill root above and',
+    "> `references/layouts.md`, resolve them against the skill root above and",
-    '> open them via their full absolute path.',
+    "> open them via their full absolute path.",
-    '',
+    "",
-    '',
+    "",
-  ].join('\n');
+  ].join("\n");
  return preamble + body;
 }
@@ -79,7 +85,9 @@ async function dirHasAttachments(dir) {
  try {
    const entries = await readdir(dir, { withFileTypes: true });
    return entries.some(
-      (e) => e.name !== 'SKILL.md' && (e.isDirectory() || /\.(md|html|css|js|json|txt)$/i.test(e.name)),
+      (e) =>
        e.name !== "SKILL.md" &&
        (e.isDirectory() || /\.(md|html|css|js|json|txt)$/i.test(e.name))
    );
  } catch {
    return false;
@@ -96,7 +104,7 @@ function normalizeDefaultFor(value) {
 // 'high-fidelity' are meaningful — anything else collapses to null so the
 // caller falls back to the form default ('high-fidelity').
 function normalizeFidelity(value) {
-  if (value === 'wireframe' || value === 'high-fidelity') return value;
+  if (value === "wireframe" || value === "high-fidelity") return value;
  return null;
 }
@@ -104,11 +112,11 @@ function normalizeFidelity(value) {
 // to a real boolean. Returns null for anything we can't interpret so the
 // caller knows to fall back to the form default.
 function normalizeBoolHint(value) {
-  if (typeof value === 'boolean') return value;
+  if (typeof value === "boolean") return value;
-  if (typeof value === 'string') {
+  if (typeof value === "string") {
    const v = value.trim().toLowerCase();
-    if (v === 'true' || v === 'yes' || v === '1') return true;
+    if (v === "true" || v === "yes" || v === "1") return true;
-    if (v === 'false' || v === 'no' || v === '0') return false;
+    if (v === "false" || v === "no" || v === "0") return false;
  }
  return null;
 }
@@ -119,8 +127,8 @@ function normalizeBoolHint(value) {
 // natural alphabetical order.
 function normalizeFeatured(value) {
  if (value === true) return 1;
-  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === "number" && Number.isFinite(value)) return value;
-  if (typeof value === 'string' && value.trim()) {
+  if (typeof value === "string" && value.trim()) {
    const n = Number(value);
    if (Number.isFinite(n)) return n;
  }
@@ -133,66 +141,70 @@ function normalizeFeatured(value) {
 // serves as a passable starter prompt.
 function derivePrompt(data) {
  const explicit = data.od?.example_prompt;
-  if (typeof explicit === 'string' && explicit.trim()) return explicit.trim();
+  if (typeof explicit === "string" && explicit.trim()) return explicit.trim();
-  const desc = typeof data.description === 'string' ? data.description.trim() : '';
+  const desc =
-  if (!desc) return '';
+    typeof data.description === "string" ? data.description.trim() : "";
-  const collapsed = desc.replace(/\s+/g, ' ').trim();
+  if (!desc) return "";
  const collapsed = desc.replace(/\s+/g, " ").trim();
  const firstSentence = collapsed.match(/^.+?[.!?。！？](?:\s|$)/)?.[0]?.trim();
  return (firstSentence || collapsed).slice(0, 320);
 }
 function inferMode(body, description) {
-  const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
+  const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
-  if (/\bppt|deck|slide|presentation|幻灯|投影/.test(hay)) return 'deck';
+  if (/\bppt|deck|slide|presentation|幻灯|投影/.test(hay)) return "deck";
-  if (/\bdesign[- ]system|\bdesign\.md|\bdesign tokens/.test(hay)) return 'design-system';
+  if (/\bdesign[- ]system|\bdesign\.md|\bdesign tokens/.test(hay))
-  if (/\btemplate\b/.test(hay)) return 'template';
+    return "design-system";
-  return 'prototype';
+  if (/\btemplate\b/.test(hay)) return "template";
  return "prototype";
 }
 // Validate platform tag — only desktop / mobile are meaningful for the
 // Examples gallery. Falls back to autodetecting "mobile" from descriptions
 // so legacy skills sort under the right pill without authoring changes.
 function normalizePlatform(value, mode, body, description) {
-  if (value === 'desktop' || value === 'mobile') return value;
+  if (value === "desktop" || value === "mobile") return value;
-  if (mode !== 'prototype') return null;
+  if (mode !== "prototype") return null;
-  const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
+  const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
-  if (/mobile|phone|ios|android|手机|移动端/.test(hay)) return 'mobile';
+  if (/mobile|phone|ios|android|手机|移动端/.test(hay)) return "mobile";
-  return 'desktop';
+  return "desktop";
 }
 // Normalise a scenario tag to a small fixed vocabulary so the filter pills
 // stay tidy. Unknown values pass through verbatim so authors can experiment;
 // missing values default to "general".
 const KNOWN_SCENARIOS = new Set([
-  'general',
+  "general",
-  'engineering',
+  "engineering",
-  'product',
+  "product",
-  'design',
+  "design",
-  'marketing',
+  "marketing",
-  'sales',
+  "sales",
-  'finance',
+  "finance",
-  'hr',
+  "hr",
-  'operations',
+  "operations",
-  'support',
+  "support",
-  'legal',
+  "legal",
-  'education',
+  "education",
-  'personal',
+  "personal",
 ]);
 function normalizeScenario(value, body, description) {
-  if (typeof value === 'string') {
+  if (typeof value === "string") {
    const v = value.trim().toLowerCase();
    if (v) return v;
  }
-  const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
+  const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
-  if (/finance|invoice|expense|budget|p&l|revenue/.test(hay)) return 'finance';
+  if (/finance|invoice|expense|budget|p&l|revenue/.test(hay)) return "finance";
-  if (/\bhr\b|onboarding|payroll|employee|人事/.test(hay)) return 'hr';
+  if (/\bhr\b|onboarding|payroll|employee|人事/.test(hay)) return "hr";
-  if (/marketing|campaign|brand|landing/.test(hay)) return 'marketing';
+  if (/marketing|campaign|brand|landing/.test(hay)) return "marketing";
-  if (/runbook|incident|deploy|engineering|sre|api/.test(hay)) return 'engineering';
+  if (/runbook|incident|deploy|engineering|sre|api/.test(hay))
-  if (/spec|prd|roadmap|product manager|product team/.test(hay)) return 'product';
+    return "engineering";
-  if (/design system|moodboard|mockup|ui kit/.test(hay)) return 'design';
+  if (/spec|prd|roadmap|product manager|product team/.test(hay))
-  if (/sales|quote|proposal|lead/.test(hay)) return 'sales';
+    return "product";
-  if (/operations|ops|logistics|inventory/.test(hay)) return 'operations';
+  if (/design system|moodboard|mockup|ui kit/.test(hay)) return "design";
-  return 'general';
+  if (/sales|quote|proposal|lead/.test(hay)) return "sales";
  if (/operations|ops|logistics|inventory/.test(hay)) return "operations";
  return "general";
 }
 // Surface the vocabulary so callers (frontend filter UI) could mirror it
 // later if they want to. Not exported today, kept here for documentation.
@@ -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
+              <div className="avatar-section-label">{t('avatar.codeAgent')}</div>
                style={{
                  fontSize: 10.5,
                  textTransform: 'uppercase',
                  letterSpacing: '0.06em',
                  color: 'var(--text-faint)',
                  fontWeight: 600,
                  padding: '8px 10px 4px',
                }}
              >
                {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={() => {
+            onClick={() => onSave(cfg)}
              onSave(cfg);
              onClose();
            }}
          >
            {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%;
@@ -313,6 +313,22 @@ Decks regress when each turn re-authors the scale-to-fit logic, the keyboard han
 **You do not write any of that. You do not modify any of that.** Your job is to fill content slots only.
 ## Workflow — copy framework first, then fill content
 When the user asks for slides, your TodoWrite plan **must** start with "copy the deck framework verbatim" before any content step. The intended order is:
 \`\`\`
 1.  Bind the active direction's palette + fonts to :root in the framework
 2.  Copy the canonical skeleton below as index.html (nothing else first)
 3.  Plan the slide arc and theme rhythm (state aloud before writing)
 4.  Add per-deck classes inside the second <style> block
 5.  Replace each <section class="slide"> SLOT with real content
 6.  Self-check (no rewriting framework chrome / @media print / nav script)
 7.  Emit single <artifact>
 \`\`\`
 If you find yourself writing \`<style>\` rules for \`.deck-shell\`, \`.deck-stage\`, \`.slide\`, \`.canvas\`, \`fit()\`, \`@media print\`, or a keyboard handler — STOP. The framework already has them. Re-read this directive, then keep going from "fill SLOT content".
 ## The contract
 When you start a new deck, your output is a single HTML file built from the canonical skeleton below. **Copy the skeleton verbatim**, including its first \`<style>\` block, the \`.deck-shell\` / \`.deck-stage\` / \`.deck-counter\` / \`.deck-hint\` chrome, and the entire trailing \`<script>\`.
@@ -142,6 +142,8 @@ The standard plan template (adapt the middle steps to the brief):
 - 9.  Emit single <artifact>
 \`\`\`
 **Decks especially — framework first, content second.** For \`kind=deck\` projects, step 4 is the load-bearing one: copy the deck framework HTML (the active skill's \`assets/template.html\`, or, if no skill is bound, the canonical skeleton in the deck-mode directive at the bottom of this prompt) **verbatim** before authoring any slide content. Do NOT write your own scale-to-fit logic, keyboard handler, slide visibility toggle, counter, or print stylesheet — every freeform attempt at this re-introduces the same iframe positioning / scaling bugs we have already fixed in the framework. Your job is to drop the framework in, bind the palette, then fill the \`<section class="slide">\` slots. That's it.
 After TodoWrite, immediately update — **mark step 1 \`in_progress\` before starting it, \`completed\` the moment it's done, mark step 2 \`in_progress\`**, etc. Do not batch updates at the end of the turn; the live progress is the point. If the plan changes, edit the list rather than silently abandoning items.
 Step 7 (checklist) and step 8 (critique) are non-negotiable.
@@ -14,11 +14,17 @@
 *      (`assets/template.html`) and references (`references/layouts.md`,
 *      `references/checklist.md`), we inject a hard pre-flight rule above
 *      the skill body so the agent reads them BEFORE writing any code.
- *   4. For decks (skillMode === 'deck'), the deck framework directive
+ *   4. For decks (skillMode === 'deck' OR metadata.kind === 'deck'), the
- *      (./deck-framework.ts) is pinned LAST so it overrides any softer
+ *      deck framework directive (./deck-framework.ts) is pinned LAST so it
- *      slide-handling wording earlier in the stack — this is the
+ *      overrides any softer slide-handling wording earlier in the stack —
- *      load-bearing nav / counter / scroll JS / print stylesheet contract
+ *      this is the load-bearing nav / counter / scroll JS / print
- *      that PDF stitching depends on.
+ *      stylesheet contract that PDF stitching depends on. We also fire on
 *      the metadata path so deck-kind projects without a bound skill
 *      (skill_id null) still get a framework, instead of having the agent
 *      re-author scaling / nav / print logic from scratch each turn. When
 *      the active skill ships its own seed (skill body references
 *      `assets/template.html`), we defer to that seed and skip the generic
 *      skeleton — the skill's framework wins to avoid double-injection.
 *
 * The composed string is what the daemon sees as `systemPrompt` and what
 * the Anthropic path sends as `system`.
@@ -85,7 +91,23 @@ export function composeSystemPrompt({
  // Decks have a load-bearing framework (nav, counter, scroll JS, print
  // stylesheet for PDF stitching). Pin it last so it overrides any softer
  // wording earlier in the stack ("write a script that handles arrows…").
-  if (skillMode === 'deck') {
+  //
  // We fire on either (a) the active skill is a deck skill OR (b) the
  // project metadata declares kind=deck. Case (b) catches projects created
  // without a skill (skill_id null) — without this, a deck-kind project
  // with no bound skill gets neither a skill seed nor the framework
  // skeleton, and the agent writes scaling / nav / print logic from scratch
  // with the same buggy `place-items: center` + transform pattern we keep
  // having to fix at runtime. Skill seeds (when present) win — they
  // already define their own opinionated framework (simple-deck's
  // scroll-snap, guizang-ppt's magazine layout) and re-pinning the generic
  // skeleton would conflict. The skill-seed path takes over via
  // `derivePreflight` above, so we only fire the generic skeleton when no
  // skill seed is on offer.
  const isDeckProject = skillMode === 'deck' || metadata?.kind === 'deck';
  const hasSkillSeed =
    !!skillBody && /assets\/template\.html/.test(skillBody);
  if (isDeckProject && !hasSkillSeed) {
    parts.push(`\n\n---\n\n${DECK_FRAMEWORK_DIRECTIVE}`);
  }
@@ -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 = '';
@@ -16,10 +16,10 @@
 */
 export function buildSrcdoc(
  html: string,
-  options: { deck?: boolean } = {},
+  options: { deck?: boolean } = {}
 ): string {
  const head = html.trimStart().slice(0, 64).toLowerCase();
-  const isFullDoc = head.startsWith('<!doctype') || head.startsWith('<html');
+  const isFullDoc = head.startsWith("<!doctype") || head.startsWith("<html");
  const wrapped = isFullDoc
    ? html
    : `<!doctype html>
@@ -68,8 +68,10 @@ function injectSandboxShim(doc: string): string {
  tryShim('localStorage');
  tryShim('sessionStorage');
 })();</script>`;
-  if (/<head[^>]*>/i.test(doc)) return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
+  if (/<head[^>]*>/i.test(doc))
-  if (/<body[^>]*>/i.test(doc)) return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
+    return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
  if (/<body[^>]*>/i.test(doc))
    return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
  return shim + doc;
 }
@@ -101,10 +103,10 @@ function injectDeckBridge(doc: string): string {
 .stage, .deck-stage, .deck-shell { place-content: center !important; }
 </style>`;
  const docWithStyle = /<\/head>/i.test(doc)
-    ? doc.replace(/<\/head>/i, styleFix + '</head>')
+    ? doc.replace(/<\/head>/i, styleFix + "</head>")
    : /<head[^>]*>/i.test(doc)
-      ? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
+    ? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
-      : styleFix + doc;
+    : styleFix + doc;
  doc = docWithStyle;
  const script = `<script>(function(){
  function slides(){ return document.querySelectorAll('.slide'); }
@@ -265,6 +267,7 @@ function injectDeckBridge(doc: string): string {
  }
  observeSlides();
 })();</script>`;
-  if (/<\/body>/i.test(doc)) return doc.replace(/<\/body>/i, `${script}</body>`);
+  if (/<\/body>/i.test(doc))
    return doc.replace(/<\/body>/i, `${script}</body>`);
  return doc + script;
 }
@@ -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