npm - @asrunjs/asrun - Versions diffs - 0.2.0 → 0.5.3 - Mend

@asrunjs/asrun 0.2.0 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/.claude/commands/explore-case.md +18 -15
package/.claude/commands/gen-spec.md +16 -13
package/.claude/commands/heal-spec.md +26 -23
package/.claude/commands/make-case.md +11 -8
package/.claude/skills/exploring-cases/SKILL.md +146 -132
package/.claude/skills/exploring-cases/references/open-questions.md +116 -112
package/.claude/skills/exploring-cases/references/readiness.md +146 -137
package/.claude/skills/exploring-cases/references/user-handoff.md +157 -147
package/.claude/skills/generating-specs/SKILL.md +219 -207
package/.claude/skills/generating-specs/references/conventions.md +148 -148
package/.claude/skills/making-cases/SKILL.md +72 -64
package/.claude/skills/making-cases/references/normalizing.md +39 -38
package/.claude/skills/making-cases/references/writes-and-email.md +37 -36
package/AGENTS.md +169 -154
package/CLAUDE.md +2 -1
package/README.md +221 -410
package/dist/lib/build-artifacts.d.ts +8 -0
package/dist/lib/build-artifacts.js +10 -0
package/dist/lib/case-doc.d.ts +311 -0
package/dist/lib/case-doc.js +1117 -0
package/dist/lib/cases.d.ts +2 -15
package/dist/lib/cases.js +5 -78
package/dist/lib/command.d.ts +24 -0
package/dist/lib/command.js +90 -0
package/dist/lib/fixtures.js +2 -2
package/dist/lib/login-card.d.ts +22 -0
package/dist/lib/login-card.js +183 -0
package/dist/lib/node-cli.d.ts +6 -2
package/dist/lib/node-cli.js +16 -6
package/dist/lib/profiles.d.ts +25 -1
package/dist/lib/profiles.js +54 -1
package/dist/lib/run-filters.js +10 -2
package/dist/lib/session.d.ts +13 -1
package/dist/lib/session.js +73 -7
package/dist/lib/targets.d.ts +5 -13
package/dist/lib/targets.js +4 -29
package/dist/lib/values.js +2 -2
package/dist/scripts/build.js +2 -1
package/dist/scripts/check-cases.js +74 -6
package/dist/scripts/doctor.js +115 -4
package/dist/scripts/explore.js +22 -1
package/dist/scripts/go.mjs +188 -188
package/dist/scripts/init.d.ts +7 -1
package/dist/scripts/init.js +62 -14
package/dist/scripts/lint-specs.js +4 -1
package/dist/scripts/login.js +30 -2
package/dist/ui/server/actions.d.ts +4 -0
package/dist/ui/server/actions.js +25 -12
package/dist/ui/server/ai-models.d.ts +3 -0
package/dist/ui/server/ai-models.js +347 -0
package/dist/ui/server/ai-stream.d.ts +34 -9
package/dist/ui/server/ai-stream.js +283 -77
package/dist/ui/server/app.js +74 -12
package/dist/ui/server/jobs.d.ts +7 -1
package/dist/ui/server/jobs.js +69 -15
package/dist/ui/server/profiles.d.ts +20 -1
package/dist/ui/server/profiles.js +214 -38
package/dist/ui/shared/ai-commands.d.ts +16 -6
package/dist/ui/shared/ai-commands.js +35 -12
package/dist/ui/shared/types.d.ts +114 -0
package/docs/agents/case-format.md +193 -0
package/docs/agents/framework-dev.md +167 -0
package/docs/ai-workflow.md +235 -0
package/docs/cases.md +189 -0
package/docs/commands.md +175 -0
package/docs/install.md +174 -0
package/docs/profiles.md +139 -0
package/docs/theme-guide.html +922 -692
package/docs/troubleshooting.md +101 -0
package/docs/web-ui.md +139 -0
package/package.json +20 -1
package/templates/.claude/commands/explore-case.md +22 -21
package/templates/.claude/commands/gen-spec.md +21 -20
package/templates/.claude/commands/heal-spec.md +31 -30
package/templates/.claude/commands/make-case.md +13 -12
package/templates/.mcp.json +8 -8
package/templates/AGENTS.md +66 -45
package/templates/cases/_template.md +57 -63
package/templates/opencode.jsonc +16 -11
package/templates/profiles.yaml +42 -29
package/ui/dist/assets/{dist-D_I45xgJ.js → dist-BudNAjOv.js} +1 -1
package/ui/dist/assets/{dist-CBV7_vDN.js → dist-C-eCSFja.js} +1 -1
package/ui/dist/assets/{dist-gF2bFn-5.js → dist-CO4heSzh.js} +1 -1
package/ui/dist/assets/{dist-DX8knLVr.js → dist-CPLhRzom.js} +1 -1
package/ui/dist/assets/{dist-BqAROxzI.js → dist-DEPJZ3Me.js} +1 -1
package/ui/dist/assets/{dist-BwYRbe5s.js → dist-DZ7RiqmA.js} +1 -1
package/ui/dist/assets/{dist-BHaIOZdW.js → dist-LixzGniF.js} +1 -1
package/ui/dist/assets/{dist-DHCY9KpV.js → dist-O_RVi4tP.js} +1 -1
package/ui/dist/assets/{dist-BiE4suo9.js → dist-jPS6HCJ5.js} +1 -1
package/ui/dist/assets/{dist-BSJMM_jp.js → dist-vmf3fnkM.js} +1 -1
package/ui/dist/assets/index-BIGt8Hfz.js +338 -0
package/ui/dist/assets/index-CTmnF0Wp.css +2 -0
package/ui/dist/help/ai-tools.png +0 -0
package/ui/dist/help/case-explore.png +0 -0
package/ui/dist/help/case-generate.png +0 -0
package/ui/dist/help/cases-memo.png +0 -0
package/ui/dist/help/profile-form.png +0 -0
package/ui/dist/help/profiles-login.png +0 -0
package/ui/dist/help/reports.png +0 -0
package/ui/dist/help/run-tests.png +0 -0
package/ui/dist/index.html +22 -16
package/ui/dist/assets/index-DmasQ6Rq.css +0 -2
package/ui/dist/assets/index-I7uU93kk.js +0 -294

package/docs/theme-guide.html CHANGED Viewed

@@ -1,692 +1,922 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Inkstone theme guide · AsRun UI</title>
-<style>
-  /* Inkstone theme, designed and created by Zoro Chen. */
-  /* Tokens copied from ui/web/src/index.css. Keep both in sync. */
-  :root {
-    --paper: #f6f2e9;
-    --card: #ffffff;
-    --warm: #fcf9f3;
-    --ink: #1f1f1f;
-    --ink-2: #6b6b6b;
-    --ink-3: #9c9c9c;
-    --line: #e5e1d8;
-    --line-mid: #dcd7cb;
-    --seal: #b5443a;
-    --seal-deep: #8a2f28;
-    --seal-bg: #f1dad7;
-    --seal-soft: #e8a79f;
-    --seal-glow: #ff7b6e;
-    --gold: #c9a54a;
-    --gold-deep: #7a5a1e;
-    --gold-bg: #f4e9c9;
-    --gold-glow: #ffd23f;
-    --warn-ink: #6e5b24;
-    --qing: #5b8aa6;
-    --qing-deep: #33506b;
-    --qing-bg: #e2eaf0;
-    --qing-glow: #4fc3ff;
-    --jade: #4da791;
-    --jade-deep: #3a8572;
-    --jade-btn: #2e6b5a;
-    --jade-bg: #e0e8d5;
-    --jade-glow: #3de0b0;
-    --jiang: #a65998;
-    --cheng: #de8435;
-    --dai: #2e4a5c;
-    --dai-deep: #1e3340;
-    --dai-bg: #e2ecef;
-    --serif: 'Iowan Old Style', Georgia, 'Songti SC', 'Noto Serif SC', 'SimSun', serif;
-    --sans: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
-    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    --theme: var(--jade);
-    --theme-ink: #2e6b5a;
-    --theme-btn: #2e6b5a;
-    --theme-bg: #e0e8d5;
-  }
-  * { box-sizing: border-box; }
-  html { scroll-behavior: smooth; }
-  body {
-    margin: 0;
-    background: var(--paper);
-    color: var(--ink);
-    font-family: var(--sans);
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-  }
-  a { color: var(--qing-deep); }
-  code, .mono { font-family: var(--mono); font-size: 0.85em; }
-  code { background: var(--warm); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
-  .layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); max-width: 1100px; margin: 0 auto; }
-  nav.toc {
-    position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto;
-    padding: 32px 20px; border-right: 1px solid var(--line-mid);
-  }
-  nav.toc .brand { font-family: var(--serif); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 16px; }
-  nav.toc a {
-    display: block; padding: 4px 8px; margin: 1px 0; border-radius: 4px;
-    color: var(--ink-2); text-decoration: none; font-size: 14px;
-  }
-  nav.toc a:hover { background: var(--warm); color: var(--ink); }
-  main { padding: 32px 40px 80px; min-width: 0; }
-  @media (max-width: 800px) {
-    .layout { display: block; }
-    nav.toc { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-mid); }
-    main { padding: 24px 20px 60px; }
-  }
-  h1, h2, h3 { font-family: var(--serif); }
-  h1 { font-size: 30px; margin: 0 0 4px; border-left: 4px solid var(--jade); padding-left: 12px; }
-  h2 { font-size: 22px; margin: 48px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-mid); }
-  h3 { font-size: 16px; margin: 24px 0 8px; }
-  p { margin: 8px 0; }
-  .author { margin: 0 0 12px; padding-left: 16px; }
-  .lead { color: var(--ink-2); margin-bottom: 24px; }
-  .muted { color: var(--ink-2); }
-  .small { font-size: 13px; }
-  .card {
-    background:
-      radial-gradient(120% 100% at 16% -8%, color-mix(in srgb, var(--theme) 9%, white) 0%, transparent 58%),
-      var(--card);
-    border: 1px solid var(--line);
-    border-radius: 4px;
-    box-shadow:
-      0 1px 2px color-mix(in srgb, var(--theme) 16%, transparent),
-      0 8px 20px -10px color-mix(in srgb, var(--theme) 34%, transparent);
-    padding: 16px;
-  }
-  table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); border: 1px solid var(--line); }
-  th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
-  th { background: var(--warm); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
-  .grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
-  .swatch { border: 1px solid var(--line-mid); border-radius: 4px; overflow: hidden; background: var(--card); font-size: 12px; }
-  .swatch .chip { height: 52px; }
-  .swatch .meta { padding: 6px 8px; }
-  .swatch .meta b { display: block; font-size: 13px; }
-  .swatch .meta span { color: var(--ink-2); font-family: var(--mono); }
-  .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
-  .demo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px; background: var(--paper); border: 1px dashed var(--line-mid); border-radius: 4px; }
-  .label { font-size: 12px; color: var(--ink-2); font-family: var(--mono); }
-  /* Buttons (mirror buttonClass in ui/web/src/components/status.tsx). */
-  .btn {
-    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-    border: 0; border-radius: 4px; padding: 6px 12px; font: 500 14px var(--sans); cursor: pointer;
-    transition: transform .15s, filter .15s, box-shadow .15s, background .15s;
-  }
-  .btn:hover { transform: translateY(-1px); }
-  .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
-  .btn svg { flex: none; }
-  .btn-primary, .btn-success {
-    color: #fff;
-    background: var(--theme-btn);
-    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 3px 8px -2px color-mix(in srgb, var(--theme-btn) 50%, transparent);
-  }
-  .btn-success { background: var(--jade-btn); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 3px 8px -2px color-mix(in srgb, var(--jade-btn) 50%, transparent); }
-  .btn-primary:hover, .btn-success:hover { filter: brightness(1.1); }
-  .btn-stop { color: #fff; background: var(--seal); box-shadow: inset 0 0 0 0 transparent, 0 3px 8px -2px color-mix(in srgb, var(--seal) 50%, transparent); }
-  .btn-stop:hover { filter: brightness(1.1); }
-  .btn-secondary { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-mid); }
-  .btn-secondary:hover { background: var(--warm); }
-  .btn-info { background: var(--qing-bg); color: var(--qing-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qing) 50%, transparent); }
-  .btn-info:hover { filter: brightness(.95); }
-  .btn-danger { background: var(--card); color: var(--seal-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--seal) 40%, transparent); }
-  .btn-danger:hover { background: var(--seal-bg); }
-  /* Badges (mirror TONES in status.tsx). */
-  .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 500; }
-  .badge.green { background: var(--jade-bg); color: var(--jade-btn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jade-deep) 30%, transparent); }
-  .badge.red { background: var(--seal-bg); color: var(--seal-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal) 35%, transparent); }
-  .badge.amber { background: var(--gold-bg); color: var(--gold-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 30%, transparent); }
-  .badge.blue { background: var(--qing-bg); color: var(--qing-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qing) 40%, transparent); }
-  .badge.gray { background: var(--warm); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-mid); }
-  /* Environment markers (mirror envFillClass in status.tsx): solid fill, white text. */
-  .env { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: #fff; }
-  .env.production { background: var(--jiang); }
-  .env.staging { background: var(--cheng); }
-  .env.other { background: var(--gold-deep); }
-  /* AI command select (mirror AI_COMMAND_STYLE in ui/web/src/pages/cases.tsx). */
-  .cmd { position: relative; display: inline-block; }
-  .cmd .dot { position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); }
-  .cmd .fake {
-    display: inline-flex; align-items: center; height: 32px; padding: 0 12px 0 28px; border: 1px solid;
-    border-radius: 4px; font-size: 14px; font-weight: 500;
-  }
-  .cmd.review .fake { border-color: color-mix(in srgb, var(--qing) 50%, transparent); background: var(--qing-bg); color: var(--qing-deep); }
-  .cmd.review .dot { background: var(--qing); }
-  .cmd.gen .fake { border-color: color-mix(in srgb, var(--gold-deep) 40%, transparent); background: var(--gold-bg); color: var(--gold-deep); }
-  .cmd.gen .dot { background: var(--gold); }
-  .cmd.heal .fake { border-color: color-mix(in srgb, var(--seal) 40%, transparent); background: var(--seal-bg); color: var(--seal-deep); }
-  .cmd.heal .dot { background: var(--seal); }
-  /* Dropdown demo (mirror the Select component in ui/web/src/components/status.tsx). */
-  .select { position: relative; display: inline-block; }
-  .select .fake {
-    display: inline-flex; align-items: center; height: 32px; min-width: 120px; padding: 0 32px 0 8px; border: 1px solid var(--line-mid);
-    border-radius: 4px; background: #fff; color: var(--ink); font-size: 14px;
-  }
-  .select .chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
-  .select.focus .fake { border-color: var(--theme-demo, #5b8aa6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-demo, #5b8aa6) 25%, transparent); }
-  .select.invalid .fake { border-color: var(--seal); background: var(--seal-bg); color: var(--seal-deep); }
-  .select.invalid .chev { color: var(--seal-deep); }
-  .select.dotted .fake { padding-left: 28px; font-weight: 500; }
-  .select .dot { position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); background: var(--gold); }
-  .select.dotted .fake { border-color: color-mix(in srgb, var(--gold-deep) 40%, transparent); background: var(--gold-bg); color: var(--gold-deep); }
-  .select-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
-  .select-label.invalid { color: var(--seal-deep); }
-  /* Sidebar sections (mirror SectionHeader, CaseSearch and the case list in ui/web/src/pages/cases.tsx). */
-  .side { width: 300px; background: var(--card); border: 1px solid var(--line-mid); }
-  .side .sec {
-    display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--theme-btn); color: #fff; font-family: var(--serif);
-    font-size: 14px; font-weight: 700; letter-spacing: 0.12em; border-top: 1px solid var(--theme-btn); border-bottom: 1px solid var(--theme-btn);
-  }
-  .side .sec svg { flex: none; }
-  .side .sec .aside { margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / .75); }
-  .side .sec .toggle { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: rgb(255 255 255 / .15); flex: none; }
-  .side .sec .aside + .toggle { margin-left: 0; }
-  .side .search { position: relative; padding: 8px; border-bottom: 1px solid var(--line-mid); }
-  .side .search svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
-  .side .search .fake {
-    display: block; padding: 6px 8px 6px 32px; border: 1px solid var(--line-mid); border-radius: 4px; background: #fff;
-    color: var(--ink-3); font-size: 14px;
-  }
-  .side .folder { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--warm); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--ink-2); }
-  .side .item { padding: 8px 16px 8px 12px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; font-family: var(--mono); font-size: 14px; }
-  .side .item.selected { background: var(--theme-bg); border-left-color: var(--theme); }
-  .seal-stamp {
-    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 3px;
-    background: var(--seal); color: var(--paper); font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1;
-    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 32%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--seal) 55%, transparent);
-    transform: rotate(-3deg);
-  }
-  .theme-demo { padding: 12px 16px; border-radius: 4px; }
-  .nav-pill { display: inline-block; padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; background: var(--theme-bg); color: var(--theme-ink); position: relative; }
-  .nav-pill::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 2px; background: var(--theme); }
-  /* Markdown editor sample (mirror the .inkstone-editor rules in ui/web/src/index.css). */
-  .editor-demo { background: var(--warm); border: 1px solid var(--line-mid); border-radius: 4px; padding: 12px 16px; font: 13px/1.7 var(--mono); }
-  .editor-demo .ed-h { color: var(--seal-deep); font-weight: 700; }
-  .editor-demo .ed-mark { color: var(--ink-3); }
-  .editor-demo .ed-list { color: var(--gold-deep); font-weight: 700; }
-  .editor-demo .ed-prop { color: var(--qing-deep); }
-  .editor-demo .ed-punct { color: var(--ink-2); }
-  .editor-demo .ed-code { color: var(--jade-btn); background: color-mix(in srgb, var(--jade-bg) 70%, transparent); border-radius: 2px; }
-  .editor-demo .ed-url { color: var(--ink-3); text-decoration: underline; }
-  .editor-demo .ed-link { color: var(--qing-deep); }
-  .editor-demo .ed-quote { color: var(--ink-2); font-style: italic; }
-  .editor-demo .ed-active { background: color-mix(in srgb, var(--theme-bg) 40%, transparent); margin: 0 -16px; padding: 0 16px; }
-  .rule { border-left: 3px solid var(--gold); background: var(--gold-bg); color: var(--warn-ink); padding: 8px 12px; border-radius: 0 4px 4px 0; font-size: 14px; }
-  ul.tight { margin: 6px 0; padding-left: 20px; }
-  ul.tight li { margin: 2px 0; }
-  footer { margin-top: 64px; color: var(--ink-3); font-size: 12px; }
-  footer .creator { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
-  footer .creator span, footer .creator a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
-  footer .creator a:hover { color: var(--ink); }
-</style>
-</head>
-<body>
-<div class="layout">
-  <nav class="toc" aria-label="Contents">
-    <div class="brand">Inkstone</div>
-    <div class="small muted" style="margin:-10px 0 16px">AsRun UI theme</div>
-    <a href="#principles">Principles</a>
-    <a href="#palette">Color palette</a>
-    <a href="#page-themes">Page themes</a>
-    <a href="#typography">Typography</a>
-    <a href="#buttons">Buttons</a>
-    <a href="#badges">Badges</a>
-    <a href="#action-colors">Action colors</a>
-    <a href="#dropdowns">Dropdowns</a>
-    <a href="#icons">Icons</a>
-    <a href="#tooltips">Tooltips</a>
-    <a href="#editor">Markdown editor</a>
-    <a href="#surfaces">Surfaces</a>
-    <a href="#sections">Sidebar sections</a>
-    <a href="#checklist">Checklist</a>
-  </nav>
-  <main>
-    <h1>Inkstone theme guide</h1>
-    <p class="author small muted"><b>Inkstone</b> theme, designed and created by <b>Zoro Chen</b>.</p>
-    <p class="lead">
-      Inkstone is the look of the local web UI (<code>pnpm ui</code>): a rice-paper base, ink text and mineral pigments as accents.
-      Source of truth: <code>ui/web/src/index.css</code> (tokens) and <code>ui/web/src/components/status.tsx</code>
-      (buttons, badges). This page is static and has no dependencies; open it in any browser.
-    </p>
-    <h2 id="principles">Principles</h2>
-    <ul class="tight">
-      <li><b>Only the tokens below.</b> The default Tailwind palette is removed on purpose (<code>--color-*: initial</code>), so an unknown color class simply does nothing.</li>
-      <li><b>Color means impact.</b> Green = go / safe, blue = read-only or informational, amber = writes or needs attention, red = destructive, failed or rewrites existing data.</li>
-      <li><b>One accent per page.</b> Each top-level page sets <code>data-theme</code>; decorations, shadows and primary buttons follow it.</li>
-      <li><b>Text-safe pairs.</b> Use <code>-deep</code> / <code>-ink</code> for text, <code>-bg</code> for tinted backgrounds, <code>-btn</code> for fills that carry white text.</li>
-    </ul>
-    <h2 id="palette">Color palette</h2>
-    <h3>Base</h3>
-    <div class="grid">
-      <div class="swatch"><div class="chip" style="background:#f6f2e9"></div><div class="meta"><b>paper</b><span>#f6f2e9</span><br />page background</div></div>
-      <div class="swatch"><div class="chip" style="background:#ffffff"></div><div class="meta"><b>card</b><span>#ffffff</span><br />cards, inputs</div></div>
-      <div class="swatch"><div class="chip" style="background:#fcf9f3"></div><div class="meta"><b>warm</b><span>#fcf9f3</span><br />table heads, hover</div></div>
-      <div class="swatch"><div class="chip" style="background:#1f1f1f"></div><div class="meta"><b>ink</b><span>#1f1f1f</span><br />primary text</div></div>
-      <div class="swatch"><div class="chip" style="background:#6b6b6b"></div><div class="meta"><b>ink-2</b><span>#6b6b6b</span><br />secondary text</div></div>
-      <div class="swatch"><div class="chip" style="background:#9c9c9c"></div><div class="meta"><b>ink-3</b><span>#9c9c9c</span><br />placeholders</div></div>
-      <div class="swatch"><div class="chip" style="background:#e5e1d8"></div><div class="meta"><b>line</b><span>#e5e1d8</span><br />default borders</div></div>
-      <div class="swatch"><div class="chip" style="background:#dcd7cb"></div><div class="meta"><b>line-mid</b><span>#dcd7cb</span><br />stronger borders</div></div>
-    </div>
-    <h3>Pigments (semantic)</h3>
-    <table>
-      <thead><tr><th>Family</th><th>Tokens</th><th>Meaning</th></tr></thead>
-      <tbody>
-        <tr>
-          <td><b>jade</b> (green)</td>
-          <td>
-            <span class="badge green">jade-bg #e0e8d5</span>
-            <code>jade #4da791</code> <code>jade-deep #3a8572</code> <code>jade-btn #2e6b5a</code> <code>jade-glow #3de0b0</code>
-          </td>
-          <td>Success, logged in, Run buttons</td>
-        </tr>
-        <tr>
-          <td><b>qing</b> (blue)</td>
-          <td>
-            <span class="badge blue">qing-bg #e2eaf0</span>
-            <code>qing #5b8aa6</code> <code>qing-deep #33506b</code> <code>qing-glow #4fc3ff</code>
-          </td>
-          <td>Info, running, read-only actions</td>
-        </tr>
-        <tr>
-          <td><b>gold</b> (amber)</td>
-          <td>
-            <span class="badge amber">gold-bg #f4e9c9</span>
-            <code>gold #c9a54a</code> <code>gold-deep #7a5a1e</code> <code>gold-glow #ffd23f</code> <code>warn-ink #6e5b24</code>
-          </td>
-          <td>Warnings, unverified, actions that write files</td>
-        </tr>
-        <tr>
-          <td><b>seal</b> (red)</td>
-          <td>
-            <span class="badge red">seal-bg #f1dad7</span>
-            <code>seal #b5443a</code> <code>seal-deep #8a2f28</code> <code>seal-soft #e8a79f</code> <code>seal-glow #ff7b6e</code>
-          </td>
-          <td>Errors, expired sessions, cancel, actions that rewrite files</td>
-        </tr>
-        <tr>
-          <td><b>jiang</b> (purple)</td>
-          <td>
-            <code>jiang #a65998</code>
-          </td>
-          <td>The <b>production</b> environment marker only (white text, 4.7:1 contrast). Not red on purpose: production must not look like an error.</td>
-        </tr>
-        <tr>
-          <td><b>cheng</b> (orange)</td>
-          <td>
-            <code>cheng #de8435</code>
-          </td>
-          <td>The <b>staging</b> environment marker only (white text). Not amber (gold) on purpose: gold means warnings and writes.</td>
-        </tr>
-        <tr>
-          <td><b>dai</b> (deep teal)</td>
-          <td>
-            <span class="badge gray" style="background:#e2ecef;color:#1e3340">dai-bg #e2ecef</span>
-            <code>dai #2e4a5c</code> <code>dai-deep #1e3340</code>
-          </td>
-          <td>Reports page accent, code blocks, modal scrims</td>
-        </tr>
-      </tbody>
-    </table>
-    <h2 id="page-themes">Page themes</h2>
-    <p>
-      <code>Layout</code> picks <code>data-theme</code> from the route. The theme drives
-      <code>--theme</code>, <code>--theme-ink</code>, <code>--theme-btn</code>, <code>--theme-bg</code>
-      (and a neighbouring hue <code>--theme-adj</code> for the card gradient). Use the Tailwind tokens
-      <code>text-theme-ink</code>, <code>bg-theme-btn</code>, <code>bg-theme-bg</code>, <code>border-theme</code>.
-    </p>
-    <table>
-      <thead><tr><th>Page</th><th><code>data-theme</code></th><th>Accent</th><th>Preview</th></tr></thead>
-      <tbody>
-        <tr><td>Profiles</td><td><code>jade</code></td><td>#4da791</td>
-          <td><span class="nav-pill" style="--theme:#4da791;--theme-ink:#2e6b5a;--theme-bg:#e0e8d5">Profiles</span></td></tr>
-        <tr><td>Cases</td><td><code>qing</code></td><td>#5b8aa6</td>
-          <td><span class="nav-pill" style="--theme:#5b8aa6;--theme-ink:#33506b;--theme-bg:#e2eaf0">Cases</span></td></tr>
-        <tr><td>Run tests</td><td><code>seal</code></td><td>#b5443a</td>
-          <td><span class="nav-pill" style="--theme:#b5443a;--theme-ink:#8a2f28;--theme-bg:#f1dad7">Run tests</span></td></tr>
-        <tr><td>Reports</td><td><code>dai</code></td><td>#2e4a5c</td>
-          <td><span class="nav-pill" style="--theme:#2e4a5c;--theme-ink:#1e3340;--theme-bg:#e2ecef">Reports</span></td></tr>
-        <tr><td>AI guide</td><td><code>gold</code></td><td>#c9a54a</td>
-          <td><span class="nav-pill" style="--theme:#c9a54a;--theme-ink:#7a5a1e;--theme-bg:#f4e9c9">AI guide</span></td></tr>
-        <tr><td>Help (<code>?</code> icon, no label)</td><td><code>qing</code></td><td>#5b8aa6</td>
-          <td><span class="nav-pill" style="--theme:#5b8aa6;--theme-ink:#33506b;--theme-bg:#e2eaf0">?</span></td></tr>
-      </tbody>
-    </table>
-    <p class="small muted">
-      The page theme only decorates. It must not carry meaning: a green Run button stays green on the red "Run tests" page.
-      To add a page: add a nav entry with a theme in <code>layout.tsx</code>; for a new accent also add a
-      <code>[data-theme='name']</code> block in <code>index.css</code>.
-    </p>
-    <h2 id="typography">Typography</h2>
-    <div class="card">
-      <p style="font-family:var(--serif);font-size:24px;font-weight:700;margin:0">Serif: headings, brand name, eyebrows</p>
-      <p class="mono small muted" style="margin:2px 0 12px">Iowan Old Style, Georgia, Songti SC, Noto Serif SC, SimSun</p>
-      <p style="margin:0">Sans: body text, buttons, tables, forms. The quick brown fox jumps over the lazy dog.</p>
-      <p class="mono small muted" style="margin:2px 0 12px">PingFang SC, Noto Sans SC, Microsoft YaHei, system-ui</p>
-      <p class="mono" style="margin:0">Mono: commands, ids, paths, job output (pnpm asrun --profile example-production)</p>
-    </div>
-    <p class="small muted">Page titles: serif, bold, <code>text-2xl</code>, with a 4px accent bar on the left (<code>border-l-4 border-theme pl-3</code>).</p>
-    <h2 id="buttons">Buttons</h2>
-    <p>Use <code>buttonClass(variant)</code> from <code>status.tsx</code>. Never hand-style a button.</p>
-    <div class="demo">
-      <button class="btn btn-success">
-        <!-- Play icon from Feather (https://feathericons.com/) -->
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
-        Run tests
-      </button>
-      <button class="btn btn-success">
-        <!-- Send icon from Feather (https://feathericons.com/) -->
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-        Run AI
-      </button>
-      <button class="btn btn-stop">
-        <!-- XCircle icon from Feather (https://feathericons.com/) -->
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
-        Close browser
-      </button>
-      <button class="btn btn-primary">Log in</button>
-      <button class="btn btn-secondary">Verify</button>
-      <button class="btn btn-info">Full screen</button>
-      <button class="btn btn-danger">Cancel</button>
-      <button class="btn btn-secondary" disabled>Disabled</button>
-    </div>
-    <table>
-      <thead><tr><th>Variant</th><th>Use for</th></tr></thead>
-      <tbody>
-        <tr><td><code>success</code> (green)</td><td>Starting a run. Starting tests ("Run tests" on the Run page) always has the Feather <code>Play</code> icon. Sending a command to an AI tool or a shell job ("Run AI" in the case toolbar, "Make cases") always has the Feather <code>Send</code> icon. The icon goes on the left; never use <code>Play</code> for an AI command.</td></tr>
-        <tr><td><code>stop</code> (solid red)</td><td>Forcibly ends something that is running, shown in place of the button that started it: "Close browser" on the Profiles page. Always with the Feather <code>XCircle</code> icon.</td></tr>
-        <tr><td><code>primary</code> (page accent)</td><td>The main call to action of a page that is not a run: Log in, Save.</td></tr>
-        <tr><td><code>info</code> (light blue)</td><td>A view toggle that must be easy to find, not an action on data: "Full screen" / "Restore" in the Jobs drawer bar. Blue = read-only.</td></tr>
-        <tr><td><code>secondary</code> (white)</td><td>Everything else: Verify, Visit, Discard, Copy, navigation.</td></tr>
-        <tr><td><code>danger</code> (white, red text)</td><td>Cancel a running job, destructive confirmations.</td></tr>
-      </tbody>
-    </table>
-    <p class="small muted">Hover lifts the button 1px; disabled is 50% opacity with no shadow. With an icon, add <code>gap-1.5</code> to the button.</p>
-    <h2 id="badges">Badges</h2>
-    <div class="demo">
-      <span class="badge green">Logged in</span>
-      <span class="badge red">Session expired</span>
-      <span class="badge amber">Saved, not verified</span>
-      <span class="badge blue">Running</span>
-      <span class="badge amber">Needs your input</span>
-      <span class="badge gray">Cancelled</span>
-    </div>
-    <table>
-      <thead><tr><th>Tone</th><th>Profile status</th><th>Job status</th></tr></thead>
-      <tbody>
-        <tr><td><span class="badge green">green</span></td><td>ok: Logged in</td><td>Succeeded</td></tr>
-        <tr><td><span class="badge red">red</span></td><td>expired, missing</td><td>Failed</td></tr>
-        <tr><td><span class="badge amber">amber</span></td><td>unverified, error</td><td>Needs your input (an AI run that ended with <code>RESULT: needs-input</code>)</td></tr>
-        <tr><td><span class="badge blue">blue</span></td><td>-</td><td>Running</td></tr>
-        <tr><td><span class="badge gray">gray</span></td><td>-</td><td>Cancelled</td></tr>
-      </tbody>
-    </table>
-    <h3>Environment markers</h3>
-    <div class="demo">
-      <span class="env production">PRODUCTION</span>
-      <span class="env staging">STAGING</span>
-      <span class="env other">OTHER</span>
-    </div>
-    <p class="small muted">
-      The environment must never be missed, so it is a solid block with white text, from <code>envFillClass()</code> in <code>status.tsx</code>
-      (used by <code>EnvBadge</code> and the banner on top of the Reports page). Production is <code>jiang</code> (purple), staging <code>cheng</code> (orange),
-      any other environment <code>gold-deep</code>. Never red: red means errors, failures and writes, and production must not look like an error.
-    </p>
-    <h2 id="action-colors">Action colors (AI commands)</h2>
-    <p>
-      Each AI action has one color that tells how much it changes. The select, its dot and its options share the color;
-      a tooltip spells the impact out. Defined in <code>AI_COMMAND_STYLE</code> in <code>pages/cases.tsx</code>.
-    </p>
-    <div class="demo">
-      <span class="cmd review"><span class="dot"></span><span class="fake">Explore case</span></span>
-      <span class="cmd gen"><span class="dot"></span><span class="fake">Generate spec</span></span>
-      <span class="cmd heal"><span class="dot"></span><span class="fake">Heal spec</span></span>
-    </div>
-    <table>
-      <thead><tr><th>Action</th><th>Color</th><th>Impact</th></tr></thead>
-      <tbody>
-        <tr><td><code>explore-case</code></td><td>blue (qing)</td><td>Edits only the case file (wording, observations, open questions, inputs). The agent only reads pages; you do the steps that write data.</td></tr>
-        <tr><td><code>gen-spec</code></td><td>amber (gold)</td><td>Writes: creates the spec and fills the case's <code>## Values</code>. Does not run the tests.</td></tr>
-        <tr><td><code>heal-spec</code></td><td>red (seal)</td><td>Rewrites an existing spec and runs the tests.</td></tr>
-      </tbody>
-    </table>
-    <p class="small muted">
-      A new action must pick the color by impact, not by taste: read-only or touches only the case file is blue, adds files (spec, case values) is amber, rewrites or deletes is red. Two actions must never share a color.
-      The select itself is the <a href="#dropdowns">Dropdown</a> component with <code>tone</code> and <code>dot</code>. Native <code>&lt;option&gt;</code> backgrounds are honored by Chrome and Edge but ignored by Safari; the closed select is always colored.
-    </p>
-    <h2 id="dropdowns">Dropdowns</h2>
-    <p>
-      Every dropdown is the <code>Select</code> component from <code>ui/web/src/components/status.tsx</code>.
-      <b>Never write a bare <code>&lt;select&gt;</code></b> and never copy its classes: a native select draws the
-      browser's own arrow and a different height, so it looks wrong next to the others (this has gone wrong twice).
-    </p>
-    <div class="demo">
-      <span class="select"><span class="fake">staging</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
-      <span class="select focus"><span class="fake">staging</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
-      <span class="select-label invalid">Explore in
-        <span class="select invalid"><span class="fake">Choose...</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
-      </span>
-      <span class="select dotted"><span class="dot"></span><span class="fake">Generate spec</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
-    </div>
-    <p class="small muted">Left to right: normal, focused, required and empty (invalid), and colored with a dot (the AI command select).</p>
-    <pre class="card mono" style="overflow:auto">import {Select} from '../components/status';
-&lt;Select value={env} onChange={(e) =&gt; setEnv(e.target.value)} invalid={env === ''} aria-label="Environment"&gt;
-  &lt;option value=""&gt;Choose...&lt;/option&gt;
-  ...
-&lt;/Select&gt;</pre>
-    <table>
-      <thead><tr><th>Part</th><th>Rule</th></tr></thead>
-      <tbody>
-        <tr><td>Size</td><td>Height 32px (<code>h-8</code>), text <code>text-sm</code>, corners <code>rounded</code>. Same height as <code>buttonClass()</code> buttons, so they line up in a toolbar.</td></tr>
-        <tr><td>Arrow</td><td>One Feather <code>ChevronDown</code>, size 14, <code>text-ink-2</code>, at the right. The native arrow is removed with <code>appearance-none</code>. The component does both; do not add your own.</td></tr>
-        <tr><td>Normal</td><td>White background, <code>border-line-mid</code>, <code>text-ink</code>. Focus: <code>theme</code> border and a 2px ring at 25%.</td></tr>
-        <tr><td>Required and empty</td><td>Pass <code>invalid</code>: <code>seal</code> border, <code>seal-bg</code> background, <code>seal-deep</code> text and arrow. Also color the label <code>text-seal-deep</code> and set <code>required</code>. Do not add a separate error message when the placeholder option (<code>Choose...</code>) already says what to do.</td></tr>
-        <tr><td>Colored by choice</td><td>Pass <code>tone</code> (border, background, text and ring classes) and <code>dot</code> (dot background) when each option has a meaning color, as in <a href="#action-colors">Action colors</a>.</td></tr>
-        <tr><td>Code values</td><td>Pass <code>mono</code> for ids and file names.</td></tr>
-        <tr><td>Label</td><td>Put a visible label in front (<code>text-sm text-ink-2</code>) or an <code>aria-label</code>.</td></tr>
-        <tr><td>Remembering a choice</td><td>Use <code>usePersistedState(key, default, guard)</code> from <code>lib/persisted.ts</code> with the key prefix <code>asrun-ui.</code>. Treat a stored value that is no longer in the options as empty.</td></tr>
-      </tbody>
-    </table>
-    <h2 id="icons">Icons</h2>
-    <p>
-      Icons come from <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather</a> through the
-      <code>react-feather</code> package. <b>Do not draw or paste custom SVGs in the app.</b>
-    </p>
-    <div class="demo">
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
-      <span class="label">Play (run tests)</span>
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-      <span class="label">Send (run AI / shell commands)</span>
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
-      <span class="label">ChevronDown</span>
-    </div>
-    <pre class="card mono" style="overflow:auto">import {Play} from 'react-feather';
-&lt;button className={`${buttonClass('success')} gap-1.5`}&gt;
-  &lt;Play size={14} aria-hidden="true" /&gt;
-  Run tests
-&lt;/button&gt;</pre>
-    <ul class="tight">
-      <li>Size 14 inside buttons and selects, 16-20 elsewhere. Stroke width stays at Feather's default (2).</li>
-      <li>Icons inherit <code>currentColor</code>; color them with the text color classes, not fills.</li>
-      <li>Decorative icons get <code>aria-hidden="true"</code>; icon-only buttons need an <code>aria-label</code>.</li>
-      <li>A button that is just an icon in a dense list has no background or border: <code>text-jade-deep hover:text-jade-btn</code> for "run" (the run button in the Cases sidebar), <code>text-ink-3 hover:text-ink</code> for neutral ones (clear search).</li>
-      <li>Find names at <a href="https://feathericons.com/" target="_blank" rel="noopener">feathericons.com</a> and import them in PascalCase (<code>arrow-right</code> becomes <code>ArrowRight</code>).</li>
-      <li>Exception, brand logos: Feather has no logos of other products, so the Claude and OpenCode logos of the AI agent switch are static SVG files in <code>ui/web/public/logos/</code> (single path, <code>viewBox="0 0 24 24"</code>). Show them with the <code>Logo</code> mask in <code>components/tool-switch.tsx</code> so they take the text color. Never paste logo SVGs into components.</li>
-    </ul>
-    <h2 id="tooltips">Tooltips</h2>
-    <p>
-      Write a plain <code>title="..."</code> on the element. <code>lib/tooltip.ts</code> (tippy.js) turns every <code>title</code> into
-      a dark tooltip with an arrow on hover, so the browser's native tooltip never shows. Do not set up tippy per component and do not
-      use a <code>title</code> on an <code>iframe</code>. Each <code>\n</code> in the text starts a new paragraph, and a line that starts with <code># </code> is a bold heading. Keep it short: a heading, then one or two sentences. Never put a command line or other long raw text in a tooltip. Disabled buttons and inputs get the
-      tooltip too, so a <code>title</code> that says why something is disabled works. The box is styled by <code>.tippy-box[data-theme~='tip']</code>
-      in <code>index.css</code>; the keyword help of the case editor has its own <code>inkstone</code> theme.
-    </p>
-    <h2 id="editor">Markdown editor</h2>
-    <p class="muted">
-      The case editor (CodeMirror) is the "draft" next to the white preview "sheet". Layout and colors live in the
-      <code>.inkstone-editor</code> rules of <code>index.css</code>; <code>ui/web/src/lib/editor-theme.ts</code> maps syntax tags to
-      the <code>tok-*</code> classes. Use both for any new editor, and never the built-in CodeMirror themes.
-      The editor is monospace only: no serif or sans font, not even for headings.
-      The preview renders the front matter as a key/value table (keys in <code>warm</code> cells, list values as blue badges).
-    </p>
-    <div class="editor-demo">
-      <div class="ed-active"><span class="ed-mark">---</span></div>
-      <div><span class="ed-prop">suites</span><span class="ed-punct">:</span> <span class="ed-punct">[</span>smoke<span class="ed-punct">]</span></div>
-      <div><span class="ed-mark">---</span></div>
-      <div><span class="ed-mark">##</span> <span class="ed-h">Steps</span></div>
-      <div><span class="ed-list">1.</span> Open <span class="ed-mark">`</span><span class="ed-code">/app/documents</span><span class="ed-mark">`</span>.</div>
-      <div><span class="ed-list">-</span> See <span class="ed-mark">[</span><span class="ed-link">docs</span><span class="ed-mark">](</span><span class="ed-url">https://example.com</span><span class="ed-mark">)</span></div>
-      <div><span class="ed-mark">&gt;</span> <span class="ed-quote">A quoted note</span></div>
-    </div>
-    <table style="margin-top:12px">
-      <tr><th>Element</th><th>Token</th></tr>
-      <tr><td>Editor background</td><td><code>warm</code> over the paper grain; gutter <code>paper</code>, separated by a <code>line-mid</code> border</td></tr>
-      <tr><td>Cursor, active line, active line number</td><td><code>theme-btn</code>, <code>theme-bg</code> at 40%, <code>theme-ink</code>; they follow the page theme</td></tr>
-      <tr><td>Selection</td><td><code>theme</code> at 30%</td></tr>
-      <tr><td>Bracket match</td><td><code>gold-bg</code> with <code>gold-deep</code> text</td></tr>
-      <tr><td>Headings</td><td><code>seal-deep</code>, bold, monospace (<code>theme-ink</code> on the red <code>seal</code> page)</td></tr>
-      <tr><td>Marks (<code>#</code> <code>&gt;</code> backticks, <code>---</code>)</td><td><code>ink-3</code></td></tr>
-      <tr><td>List markers</td><td><code>gold-deep</code>, bold</td></tr>
-      <tr><td>Bold, italic</td><td><code>ink</code>, bold or italic</td></tr>
-      <tr><td>Quote</td><td><code>ink-2</code>, italic</td></tr>
-      <tr><td>Link text, URL</td><td><code>qing-deep</code>; <code>ink-3</code> underlined</td></tr>
-      <tr><td>Inline code</td><td><code>jade-btn</code> on <code>jade-bg</code></td></tr>
-      <tr><td>Front matter keys, types, tags</td><td><code>qing-deep</code></td></tr>
-      <tr><td>Code blocks</td><td>keywords <code>seal-deep</code>, strings <code>jade-btn</code>, numbers <code>gold-deep</code>, functions <code>dai</code>, comments <code>ink-3</code>, punctuation <code>ink-2</code></td></tr>
-    </table>
-    <h3>Keyword highlights and their tooltip</h3>
-    <p class="muted">
-      Words that need a human are marked in the editor and in the preview (<code>&lt;mark&gt;</code>) with the same
-      <code>kw-*</code> classes: <code>TODO [blocking]</code> <code>seal</code>, other <code>TODO</code> <code>gold</code>,
-      "to be confirmed by QA" / "not observed" <code>qing</code>, <code>Answer:</code> <code>jade</code>; the emoji in front
-      of a marker is part of it and takes the same color. Hovering one shows a
-      small dark card with an arrow (tippy.js, theme <code>inkstone</code>: <code>dai-deep</code> background like the preview code
-      blocks, <code>paper</code> text, <code>shadow-lift</code>) so that it stands out on both the white preview and the beige
-      editor. A 6px left bar and the title, both in the bright <code>*-glow</code> color of the kind (<code>seal-glow</code>,
-      <code>gold-glow</code>, <code>qing-glow</code>, <code>jade-glow</code>; they exist only for dark surfaces),
-      show the kind; below come one line of meaning (<code>line-mid</code>) and a numbered "You can:" list. The texts live in
-      <code>keywordHelp</code> in <code>ui/web/src/lib/highlight-keywords.ts</code>; keep every line short and direct.
-      Do not add another tooltip library: use <code>tippy.js</code> and the <code>inkstone</code> theme.
-    </p>
-    <p class="muted">
-      After every marker comes a small remove button (<code>kw-remove</code>, <code>kw-remove-&lt;kind&gt;</code>): the
-      Feather <code>X</code> at 14px in the same text and background colors as the marker, 20px square, 2px radius,
-      <code>theme</code> focus outline. It is a plain button (a CodeMirror widget in the editor, an element in the preview),
-      never a new icon. It deletes the marker, or the whole question block of a <code>TODO</code> (the sentence above stays),
-      or what is typed after an <code>Answer:</code>; the logic is in <code>ui/web/src/lib/keyword-removal.ts</code>.
-    </p>
-    <p class="muted">
-      The preview block that holds the editor caret is shaded with <code>theme-bg</code> at 60% and a 2px <code>theme</code> left
-      border (an overlay, so it follows the page theme). The editor and the preview scroll together and a click in the preview
-      moves the caret; the logic is in <code>ui/web/src/lib/preview-sync.ts</code>.
-    </p>
-    <h2 id="surfaces">Surfaces and shadows</h2>
-    <div class="row">
-      <div class="card" style="width:240px">
-        <b>card-paper</b>
-        <p class="small muted" style="margin:4px 0 0">White sheet, 4px radius, a faint accent tint at the top left, colored shadow that follows the page theme.</p>
-      </div>
-      <div style="display:flex;align-items:center;gap:10px">
-        <span class="seal-stamp">A</span>
-        <span class="small muted"><code>.seal</code>: the stamp. The only slightly rotated element; use it once, in the header.</span>
-      </div>
-    </div>
-    <ul class="tight">
-      <li>Radius: 4px for cards, buttons and inputs; 2px for badges; no pills.</li>
-      <li>Shadows are tinted with the page accent (<code>shadow-paper</code>, <code>shadow-lift</code>, <code>shadow-btn</code>, <code>shadow-btn-lift</code>), never plain gray.</li>
-      <li>The page background carries a subtle paper grain (<code>--grain</code>).</li>
-      <li>The Jobs drawer, header and top-level separators use a 2px <code>ink</code> border; everything inside uses <code>line</code> / <code>line-mid</code>.</li>
-      <li>The Jobs drawer's title bar is a solid <code>dai-deep</code> bar with white text, so it reads as a handle. It ends with the same small chevron block as a sidebar section header and brightens on hover.</li>
-      <li><b>Every expand/collapse animates.</b> Use <code>Collapse</code> from <code>components/collapse.tsx</code> (height and fade, 200ms, <code>ease-out</code>) for content that appears and disappears, and rotate the chevron with <code>transition-transform duration-200</code> instead of swapping two icons. Always add <code>motion-reduce:transition-none</code>. Turn transitions off while the user drags a resize handle.</li>
-    </ul>
-    <h2 id="sections">Sidebar sections and selection</h2>
-    <div class="row" style="align-items:flex-start">
-      <div class="side">
-        <div class="sec"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>New cases<span class="toggle"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span></div>
-        <div class="sec"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>Case list<span class="aside">3 / 12</span></div>
-        <div class="search">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-          <span class="fake">Search name, title, suite...</span>
-        </div>
-        <div class="folder">documents <span style="margin-left:auto;color:var(--ink-3)">2</span></div>
-        <div class="item selected">hub-landing</div>
-        <div class="item">header-logo</div>
-      </div>
-      <div style="flex:1;min-width:260px">
-        <ul class="tight">
-          <li>Sections of a sidebar (<code>SectionHeader</code> in <code>pages/cases.tsx</code>) are all on one level: a solid page-accent bar (<code>bg-theme-btn</code>, white text and icon, serif bold label), so a section header is never mistaken for a folder row (gray). A collapsible one ends with a small button block (<code>bg-white/15</code>, Feather <code>ChevronDown</code> when collapsed, <code>ChevronUp</code> when open, size 16) that brightens on hover; a static one has no block, only an optional count. The block is what says "this can be expanded".</li>
-          <li><code>bg-theme-bg</code> means <b>selected</b> and nothing else. Never use it for a header, so a header cannot be mistaken for a selected row. A selected row also gets <code>border-l-4 border-l-theme</code>.</li>
-          <li>Levels inside a list: section header, then folder (<code>bg-warm</code>, small, regular weight, no accent), then item.</li>
-          <li>A search box is a <code>fieldClass</code> input with a Feather <code>Search</code> icon at the left and a clear button (<code>X</code>, <code>aria-label</code>) at the right. It filters while typing, with no submit; <code>Esc</code> clears it.</li>
-        </ul>
-        <p class="small muted">The icons in the demo are inline only because this page has no build step; in the app they always come from <code>react-feather</code>.</p>
-      </div>
-    </div>
-    <h2 id="checklist">Checklist for a new UI element</h2>
-    <ol class="tight">
-      <li>Pick colors only from the tokens above (<code>text-ink-2</code>, <code>bg-warm</code>, <code>bg-seal-bg</code>, ...).</li>
-      <li>Decide the impact: safe/go = green, read-only/info = blue, writes/attention = amber, destructive/rewrite/error = red.</li>
-      <li>Use <code>buttonClass()</code> and <code>Badge</code> instead of new styles.</li>
-      <li>Dropdowns: use <code>Select</code>, never a bare <code>&lt;select&gt;</code> (see <a href="#dropdowns">Dropdowns</a>).</li>
-      <li>Icons: Feather via <code>react-feather</code> only.</li>
-      <li>If you add or change a token, update <code>index.css</code> and this page together.</li>
-    </ol>
-    <div class="rule" style="margin-top:16px">
-      Exception: if a color's meaning has to differ from this guide (for example a destructive action that is not red), say why in a code comment.
-    </div>
-    <footer>Inkstone theme guide for the AsRun UI. Static file: <code>docs/theme-guide.html</code>. Inkstone theme, designed and created by Zoro Chen.
-      <div class="creator">
-        <span>Created by Zoro Chen</span>
-      </div>
-    </footer>
-  </main>
-</div>
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Inkstone theme guide · AsRun UI</title>
+<!-- Same Google Fonts as ui/web/index.html: Calistoga, Inter, Ubuntu Mono. -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Ubuntu+Mono:wght@400;700&display=swap"
+/>
+<style>
+  /* Inkstone theme, designed and created by Zoro Chen. */
+  /* Tokens copied from ui/web/src/index.css. Keep both in sync. */
+  :root {
+    --paper: #f6f2e9;
+    --card: #ffffff;
+    --warm: #fcf9f3;
+    --ink: #1f1f1f;
+    --ink-2: #6b6b6b;
+    --ink-3: #9c9c9c;
+    --line: #e5e1d8;
+    --line-mid: #dcd7cb;
+    --seal: #b5443a;
+    --seal-deep: #8a2f28;
+    --seal-bg: #f1dad7;
+    --seal-soft: #e8a79f;
+    --seal-glow: #ff7b6e;
+    --gold: #c9a54a;
+    --gold-deep: #7a5a1e;
+    --gold-bg: #f4e9c9;
+    --gold-glow: #ffd23f;
+    --warn-ink: #6e5b24;
+    --qing: #5b8aa6;
+    --qing-deep: #33506b;
+    --qing-bg: #e2eaf0;
+    --qing-glow: #4fc3ff;
+    --jade: #4da791;
+    --jade-deep: #3a8572;
+    --jade-btn: #2e6b5a;
+    --jade-bg: #e0e8d5;
+    --jade-glow: #3de0b0;
+    --jiang: #a65998;
+    --cheng: #de8435;
+    --cheng-deep: #a05a1c;
+    --cheng-bg: #fbe9d7;
+    --dai: #2e4a5c;
+    --dai-deep: #1e3340;
+    --dai-bg: #e2ecef;
+    --serif: 'Calistoga', 'Iowan Old Style', Georgia, 'Songti SC', 'Noto Serif SC', 'SimSun', serif;
+    --sans: 'Inter', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
+    --mono: 'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --theme: var(--jade);
+    --theme-ink: #2e6b5a;
+    --theme-btn: #2e6b5a;
+    --theme-bg: #e0e8d5;
+  }
+  * { box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    margin: 0;
+    background: var(--paper);
+    color: var(--ink);
+    font-family: var(--sans);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+  a { color: var(--qing-deep); }
+  code, .mono { font-family: var(--mono); font-size: 0.85em; }
+  code { background: var(--warm); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
+  .layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); max-width: 1100px; margin: 0 auto; }
+  nav.toc {
+    position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto;
+    padding: 32px 20px; border-right: 1px solid var(--line-mid);
+  }
+  nav.toc .brand { font-family: var(--serif); font-weight: 400; letter-spacing: 0.1em; margin-bottom: 16px; }
+  nav.toc a {
+    display: block; padding: 4px 8px; margin: 1px 0; border-radius: 4px;
+    color: var(--ink-2); text-decoration: none; font-size: 14px;
+  }
+  nav.toc a:hover { background: var(--warm); color: var(--ink); }
+  main { padding: 32px 40px 80px; min-width: 0; }
+  @media (max-width: 800px) {
+    .layout { display: block; }
+    nav.toc { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-mid); }
+    main { padding: 24px 20px 60px; }
+  }
+  h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
+  h1 { font-size: 30px; margin: 0 0 4px; border-left: 4px solid var(--jade); padding-left: 12px; }
+  h2 { font-size: 22px; margin: 48px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-mid); }
+  h3 { font-size: 16px; margin: 24px 0 8px; }
+  p { margin: 8px 0; }
+  .author { margin: 0 0 12px; padding-left: 16px; }
+  .lead { color: var(--ink-2); margin-bottom: 24px; }
+  .muted { color: var(--ink-2); }
+  .small { font-size: 13px; }
+  .card {
+    background:
+      radial-gradient(120% 100% at 16% -8%, color-mix(in srgb, var(--theme) 9%, white) 0%, transparent 58%),
+      var(--card);
+    border: 1px solid var(--line);
+    border-radius: 4px;
+    box-shadow:
+      0 1px 2px color-mix(in srgb, var(--theme) 16%, transparent),
+      0 8px 20px -10px color-mix(in srgb, var(--theme) 34%, transparent);
+    padding: 16px;
+  }
+  table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); border: 1px solid var(--line); }
+  th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
+  th { background: var(--warm); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
+  .grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+  .swatch { border: 1px solid var(--line-mid); border-radius: 4px; overflow: hidden; background: var(--card); font-size: 12px; }
+  .swatch .chip { height: 52px; }
+  .swatch .meta { padding: 6px 8px; }
+  .swatch .meta b { display: block; font-size: 13px; }
+  .swatch .meta span { color: var(--ink-2); font-family: var(--mono); }
+  .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
+  .demo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px; background: var(--paper); border: 1px dashed var(--line-mid); border-radius: 4px; }
+  .label { font-size: 12px; color: var(--ink-2); font-family: var(--mono); }
+  /* Buttons (mirror buttonClass in ui/web/src/components/status.tsx). */
+  .btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    border: 0; border-radius: 4px; padding: 6px 12px; font: 500 14px var(--sans); cursor: pointer;
+    transition: transform .15s, filter .15s, box-shadow .15s, background .15s;
+  }
+  .btn:hover { transform: translateY(-1px); }
+  .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
+  .btn svg { flex: none; }
+  .btn-primary, .btn-success {
+    color: #fff;
+    background: var(--theme-btn);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 3px 8px -2px color-mix(in srgb, var(--theme-btn) 50%, transparent);
+  }
+  .btn-success { background: var(--jade-btn); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 3px 8px -2px color-mix(in srgb, var(--jade-btn) 50%, transparent); }
+  .btn-primary:hover, .btn-success:hover { filter: brightness(1.1); }
+  .btn-stop { color: #fff; background: var(--seal); box-shadow: inset 0 0 0 0 transparent, 0 3px 8px -2px color-mix(in srgb, var(--seal) 50%, transparent); }
+  .btn-stop:hover { filter: brightness(1.1); }
+  .btn-secondary { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-mid); }
+  .btn-secondary:hover { background: var(--warm); }
+  .btn-info { background: var(--qing-bg); color: var(--qing-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qing) 50%, transparent); }
+  .btn-info:hover { filter: brightness(.95); }
+  .btn-danger { background: var(--card); color: var(--seal-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--seal) 40%, transparent); }
+  .btn-danger:hover { background: var(--seal-bg); }
+  /* Badges (mirror TONES in status.tsx). */
+  .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 500; }
+  .badge.green { background: var(--jade-bg); color: var(--jade-btn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jade-deep) 30%, transparent); }
+  .badge.red { background: var(--seal-bg); color: var(--seal-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal) 35%, transparent); }
+  .badge.amber { background: var(--gold-bg); color: var(--gold-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 30%, transparent); }
+  .badge.blue { background: var(--qing-bg); color: var(--qing-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qing) 40%, transparent); }
+  .badge.gray { background: var(--warm); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-mid); }
+  /* WRITES (mirror WritesBadge in status.tsx): red text in a red outline, never a red fill, so it does not read as an error. */
+  .badge.writes { background: var(--card); color: var(--seal-deep); font-weight: 700; letter-spacing: 0.05em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal) 50%, transparent); }
+  /* Environment markers (mirror envFillClass in status.tsx): solid fill, white text. */
+  .env { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: #fff; }
+  .env.production { background: var(--jiang); }
+  .env.staging { background: var(--cheng); }
+  .env.other { background: var(--gold-deep); }
+  /* Target reference chips (mirror target-chip.tsx): an orange stamp that opens a card when clicked. */
+  .target-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 4px; border-radius: 2px; font-size: 12px; font-weight: 500; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cheng) 45%, transparent); }
+  .target-chip .stamp { padding: 2px 6px; border-radius: 2px; background: var(--cheng); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
+  .target-chip.warn { background: var(--gold-bg); color: var(--gold-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 30%, transparent); }
+  .target-chip.missing { background: var(--seal-bg); color: var(--seal-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal) 35%, transparent); }
+  /* AI command select (mirror AI_COMMAND_STYLE in ui/web/src/pages/cases.tsx). */
+  .cmd { position: relative; display: inline-block; }
+  .cmd .dot { position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); }
+  .cmd .fake {
+    display: inline-flex; align-items: center; height: 32px; padding: 0 12px 0 28px; border: 1px solid;
+    border-radius: 4px; font-size: 14px; font-weight: 500;
+  }
+  .cmd.review .fake { border-color: color-mix(in srgb, var(--qing) 50%, transparent); background: var(--qing-bg); color: var(--qing-deep); }
+  .cmd.review .dot { background: var(--qing); }
+  .cmd.gen .fake { border-color: color-mix(in srgb, var(--gold-deep) 40%, transparent); background: var(--gold-bg); color: var(--gold-deep); }
+  .cmd.gen .dot { background: var(--gold); }
+  .cmd.heal .fake { border-color: color-mix(in srgb, var(--seal) 40%, transparent); background: var(--seal-bg); color: var(--seal-deep); }
+  .cmd.heal .dot { background: var(--seal); }
+  /* Dropdown demo (mirror the Select component in ui/web/src/components/status.tsx). */
+  .select { position: relative; display: inline-block; }
+  .select .fake {
+    display: inline-flex; align-items: center; height: 32px; min-width: 120px; padding: 0 32px 0 8px; border: 1px solid var(--line-mid);
+    border-radius: 4px; background: #fff; color: var(--ink); font-size: 14px;
+  }
+  .select .chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
+  .select.focus .fake { border-color: var(--theme-demo, #5b8aa6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-demo, #5b8aa6) 25%, transparent); }
+  .select.invalid .fake { border-color: var(--seal); background: var(--seal-bg); color: var(--seal-deep); }
+  .select.invalid .chev { color: var(--seal-deep); }
+  .select.dotted .fake { padding-left: 28px; font-weight: 500; }
+  .select .dot { position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); background: var(--gold); }
+  .select.dotted .fake { border-color: color-mix(in srgb, var(--gold-deep) 40%, transparent); background: var(--gold-bg); color: var(--gold-deep); }
+  .select-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
+  .select-label.invalid { color: var(--seal-deep); }
+  /* Tag field demo (mirror components/case-panel/tag-field.tsx). */
+  .tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; min-width: 300px; padding: 4px 6px; border: 1px solid var(--line-mid); border-radius: 4px; background: #fff; }
+  .tags.focus { border-color: var(--theme-demo, #5b8aa6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-demo, #5b8aa6) 25%, transparent); }
+  .tags .tag { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 6px; border-radius: 2px; background: var(--warm); color: var(--ink-2); font-family: var(--mono); font-size: 12px; box-shadow: inset 0 0 0 1px var(--line-mid); }
+  .tags .tag svg { color: var(--ink-3); }
+  .tags .entry { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
+  .tags .entry .caret { display: inline-block; width: 1px; height: 14px; margin-left: 2px; background: var(--theme-btn); vertical-align: -3px; }
+  .suggest { display: inline-block; min-width: 224px; margin-top: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ink) 24%, transparent); }
+  .suggest .opt { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 2px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
+  .suggest .opt.on { background: var(--theme-bg, #e2eaf0); color: var(--theme-ink, #33506b); }
+  .suggest .opt .new { margin-left: auto; font-family: var(--sans); font-size: 11px; color: var(--ink-3); }
+  /* Environment toggle chips (mirror components/case-panel/env-chips.tsx). */
+  .env-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
+  .env-chip.on { color: #fff; }
+  .env-chip.on.production { background: var(--jiang); }
+  .env-chip.on.staging { background: var(--cheng); }
+  .env-chip.on.other { background: var(--gold-deep); }
+  .env-chip.off { background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-mid); }
+  .env-chip.blocked { background: var(--seal-bg); color: var(--seal-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal) 35%, transparent); }
+  /* Field-level help (mirror FieldHelp in components/case-panel/section.tsx). */
+  .field-label { display: inline-flex; align-items: flex-start; gap: 4px; font-family: var(--mono); font-size: 12px; line-height: 1.35; color: var(--ink-3); }
+  .field-label .help { margin: -2px 0; padding: 2px; border-radius: 4px; color: var(--ink-3); }
+  /* Sidebar sections (mirror SectionHeader, CaseSearch and the case list in ui/web/src/pages/cases.tsx). */
+  .side { width: 300px; background: var(--card); border: 1px solid var(--line-mid); }
+  .side .sec {
+    display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--theme-btn); color: #fff; font-family: var(--serif);
+    font-size: 14px; font-weight: 400; letter-spacing: 0.12em; border-top: 1px solid var(--theme-btn); border-bottom: 1px solid var(--theme-btn);
+  }
+  .side .sec svg { flex: none; }
+  .side .sec .aside { margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / .75); }
+  .side .sec .toggle { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: rgb(255 255 255 / .15); flex: none; }
+  .side .sec .aside + .toggle { margin-left: 0; }
+  .side .search { position: relative; padding: 8px; border-bottom: 1px solid var(--line-mid); }
+  .side .search svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
+  .side .search .fake {
+    display: block; padding: 6px 8px 6px 32px; border: 1px solid var(--line-mid); border-radius: 4px; background: #fff;
+    color: var(--ink-3); font-size: 14px;
+  }
+  .side .folder { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--warm); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--ink-2); }
+  .side .item { padding: 8px 16px 8px 12px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; font-family: var(--mono); font-size: 14px; }
+  .side .item.selected { background: var(--theme-bg); border-left-color: var(--theme); }
+  .seal-stamp {
+    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 3px;
+    background: var(--seal); color: var(--paper); font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1;
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 32%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--seal) 55%, transparent);
+    transform: rotate(-3deg);
+  }
+  .theme-demo { padding: 12px 16px; border-radius: 4px; }
+  .nav-pill { display: inline-block; padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; background: var(--theme-bg); color: var(--theme-ink); position: relative; }
+  .nav-pill::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 2px; background: var(--theme); }
+  /* Markdown editor sample (mirror the .inkstone-editor rules in ui/web/src/index.css). */
+  .editor-demo { background: var(--warm); border: 1px solid var(--line-mid); border-radius: 4px; padding: 12px 16px; font: 13px/1.7 var(--mono); }
+  .editor-demo .ed-h { color: var(--seal-deep); font-weight: 700; }
+  .editor-demo .ed-mark { color: var(--ink-3); }
+  .editor-demo .ed-list { color: var(--gold-deep); font-weight: 700; }
+  .editor-demo .ed-prop { color: var(--qing-deep); }
+  .editor-demo .ed-punct { color: var(--ink-2); }
+  .editor-demo .ed-code { color: var(--jade-btn); background: color-mix(in srgb, var(--jade-bg) 70%, transparent); border-radius: 2px; }
+  .editor-demo .ed-url { color: var(--ink-3); text-decoration: underline; }
+  .editor-demo .ed-link { color: var(--qing-deep); }
+  .editor-demo .ed-quote { color: var(--ink-2); font-style: italic; }
+  .editor-demo .ed-active { background: color-mix(in srgb, var(--theme-bg) 40%, transparent); margin: 0 -16px; padding: 0 16px; }
+  .rule { border-left: 3px solid var(--gold); background: var(--gold-bg); color: var(--warn-ink); padding: 8px 12px; border-radius: 0 4px 4px 0; font-size: 14px; }
+  ul.tight { margin: 6px 0; padding-left: 20px; }
+  ul.tight li { margin: 2px 0; }
+  footer { margin-top: 64px; color: var(--ink-3); font-size: 12px; }
+  footer .creator { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
+  footer .creator span, footer .creator a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
+  footer .creator a:hover { color: var(--ink); }
+</style>
+</head>
+<body>
+<div class="layout">
+  <nav class="toc" aria-label="Contents">
+    <div class="brand">Inkstone</div>
+    <div class="small muted" style="margin:-10px 0 16px">A standalone theme system</div>
+    <a href="#principles">Principles</a>
+    <a href="#palette">Color palette</a>
+    <a href="#page-themes">Page themes</a>
+    <a href="#typography">Typography</a>
+    <a href="#buttons">Buttons</a>
+    <a href="#badges">Badges</a>
+    <a href="#action-colors">Action colors</a>
+    <a href="#dropdowns">Dropdowns</a>
+    <a href="#multi-value">Multi-value fields</a>
+    <a href="#icons">Icons</a>
+    <a href="#tooltips">Tooltips</a>
+    <a href="#editor">Markdown editor</a>
+    <a href="#surfaces">Surfaces</a>
+    <a href="#sections">Sidebar sections</a>
+    <a href="#checklist">Checklist</a>
+  </nav>
+  <main>
+    <h1>Inkstone theme guide</h1>
+    <p class="author small muted"><b>Inkstone</b> theme, designed and created by <b>Zoro Chen</b>.</p>
+    <!-- Where this lives, for agents and maintainers (deliberately not page text: a reader does not need it).
+         - Inkstone is the theme of the local web UI, started with `pnpm ui` in the workspace root. That server is
+           `ui/server/app.ts`; it serves this file at /docs/theme-guide.html, linked from the top bar of
+           `ui/web/src/components/layout.tsx`.
+         - Source of truth: `ui/web/src/index.css` (tokens) and `ui/web/src/components/status.tsx` (buttons, badges).
+           A new or changed token means editing that CSS and this page together.
+         - Stack: React 19 + Vite 8, Tailwind CSS v4 (`@tailwindcss/vite`), react-feather icons, CodeMirror 6 for the
+           markdown/YAML editors, React Router, Hono for the server side; fonts Calistoga, Inter and Ubuntu Mono
+           (Google Fonts, the same three as `ui/web/index.html`).
+         - This page itself is static HTML with one inline <style>: no build step and no local dependencies, it only
+           loads the three fonts. Open it in any browser to compare a real element against the guide. -->
+    <p class="lead">
+      Inkstone comes from Chinese ink painting and its mineral pigments. The ground is rice paper, the text and the
+      structure are ink, and the colors are the ones painters grind and layer:
+      <span style="white-space:nowrap">石青 azurite</span>, <span style="white-space:nowrap">石绿 malachite</span>,
+      <span style="white-space:nowrap">朱砂 cinnabar</span>, <span style="white-space:nowrap">藤黄 gamboge</span>,
+      <span style="white-space:nowrap">赭石 ochre</span>. Like a painting, it separates form from material: paper and
+      ink carry the page, and a pigment appears only where it means something, never as decoration. A restrained
+      surface also keeps the eye on what matters, which for a test tool is the difference between safe and
+      destructive.
+    </p>
+    <p class="lead">
+      Inkstone is a standalone theme system: the tokens, the type scale, the button and badge recipes and the icon rules
+      on this page are the whole of it, and every value is defined once, so nothing is inherited from a component
+      library's defaults. It is plain CSS custom properties over a thin Tailwind CSS v4 layer whose default palette is
+      removed on purpose, plus three font families and Feather icons. A new surface adopts it by taking those tokens,
+      not by copying a component.
+    </p>
+    <h2 id="principles">Principles</h2>
+    <ul class="tight">
+      <li><b>Only the tokens below.</b> The default Tailwind palette is removed on purpose (<code>--color-*: initial</code>), so an unknown color class simply does nothing.</li>
+      <li><b>Color means impact.</b> Green = go / safe, blue = read-only or informational, amber = writes or needs attention, red = destructive, failed or rewrites existing data.</li>
+      <li><b>One accent per page.</b> Each top-level page sets <code>data-theme</code>; decorations, shadows and primary buttons follow it.</li>
+      <li><b>Text-safe pairs.</b> Use <code>-deep</code> / <code>-ink</code> for text, <code>-bg</code> for tinted backgrounds, <code>-btn</code> for fills that carry white text.</li>
+    </ul>
+    <h2 id="palette">Color palette</h2>
+    <h3>Base</h3>
+    <div class="grid">
+      <div class="swatch"><div class="chip" style="background:#f6f2e9"></div><div class="meta"><b>paper</b><span>#f6f2e9</span><br />page background</div></div>
+      <div class="swatch"><div class="chip" style="background:#ffffff"></div><div class="meta"><b>card</b><span>#ffffff</span><br />cards, inputs</div></div>
+      <div class="swatch"><div class="chip" style="background:#fcf9f3"></div><div class="meta"><b>warm</b><span>#fcf9f3</span><br />table heads, hover</div></div>
+      <div class="swatch"><div class="chip" style="background:#1f1f1f"></div><div class="meta"><b>ink</b><span>#1f1f1f</span><br />primary text</div></div>
+      <div class="swatch"><div class="chip" style="background:#6b6b6b"></div><div class="meta"><b>ink-2</b><span>#6b6b6b</span><br />secondary text</div></div>
+      <div class="swatch"><div class="chip" style="background:#9c9c9c"></div><div class="meta"><b>ink-3</b><span>#9c9c9c</span><br />placeholders</div></div>
+      <div class="swatch"><div class="chip" style="background:#e5e1d8"></div><div class="meta"><b>line</b><span>#e5e1d8</span><br />default borders</div></div>
+      <div class="swatch"><div class="chip" style="background:#dcd7cb"></div><div class="meta"><b>line-mid</b><span>#dcd7cb</span><br />stronger borders</div></div>
+    </div>
+    <h3>Pigments (semantic)</h3>
+    <table>
+      <thead><tr><th>Family</th><th>Tokens</th><th>Meaning</th></tr></thead>
+      <tbody>
+        <tr>
+          <td><b>jade</b> (green)</td>
+          <td>
+            <span class="badge green">jade-bg #e0e8d5</span>
+            <code>jade #4da791</code> <code>jade-deep #3a8572</code> <code>jade-btn #2e6b5a</code> <code>jade-glow #3de0b0</code>
+          </td>
+          <td>Success, logged in, Run buttons</td>
+        </tr>
+        <tr>
+          <td><b>qing</b> (blue)</td>
+          <td>
+            <span class="badge blue">qing-bg #e2eaf0</span>
+            <code>qing #5b8aa6</code> <code>qing-deep #33506b</code> <code>qing-glow #4fc3ff</code>
+          </td>
+          <td>Info, running, read-only actions</td>
+        </tr>
+        <tr>
+          <td><b>gold</b> (amber)</td>
+          <td>
+            <span class="badge amber">gold-bg #f4e9c9</span>
+            <code>gold #c9a54a</code> <code>gold-deep #7a5a1e</code> <code>gold-glow #ffd23f</code> <code>warn-ink #6e5b24</code>
+          </td>
+          <td>Warnings, unverified, actions that write files</td>
+        </tr>
+        <tr>
+          <td><b>seal</b> (red)</td>
+          <td>
+            <span class="badge red">seal-bg #f1dad7</span>
+            <code>seal #b5443a</code> <code>seal-deep #8a2f28</code> <code>seal-soft #e8a79f</code> <code>seal-glow #ff7b6e</code>
+          </td>
+          <td>Errors, expired sessions, cancel, actions that rewrite files</td>
+        </tr>
+        <tr>
+          <td><b>jiang</b> (purple)</td>
+          <td>
+            <code>jiang #a65998</code>
+          </td>
+          <td>The <b>production</b> environment marker only (white text, 4.7:1 contrast). Not red on purpose: production must not look like an error.</td>
+        </tr>
+        <tr>
+          <td><b>cheng</b> (orange)</td>
+          <td>
+            <code>cheng #de8435</code> <code>cheng-deep #a05a1c</code> <code>cheng-bg #fbe9d7</code>
+          </td>
+          <td>
+            A <b>reference</b> to something you can open: the <code>T1</code> stamp of a target card, its chips in the case panel
+            and the ring of a Targets row. Also the <b>staging</b> environment marker (white text) in the run and report
+            pages. Not amber (gold) on purpose: gold means warnings and writes.
+          </td>
+        </tr>
+        <tr>
+          <td><b>dai</b> (deep teal)</td>
+          <td>
+            <span class="badge gray" style="background:#e2ecef;color:#1e3340">dai-bg #e2ecef</span>
+            <code>dai #2e4a5c</code> <code>dai-deep #1e3340</code>
+          </td>
+          <td>Reports page accent, code blocks, modal scrims</td>
+        </tr>
+      </tbody>
+    </table>
+    <h2 id="page-themes">Page themes</h2>
+    <p>
+      <code>Layout</code> picks <code>data-theme</code> from the route. The theme drives
+      <code>--theme</code>, <code>--theme-ink</code>, <code>--theme-btn</code>, <code>--theme-bg</code>
+      (and a neighbouring hue <code>--theme-adj</code> for the card gradient). Use the Tailwind tokens
+      <code>text-theme-ink</code>, <code>bg-theme-btn</code>, <code>bg-theme-bg</code>, <code>border-theme</code>.
+    </p>
+    <table>
+      <thead><tr><th>Page</th><th><code>data-theme</code></th><th>Accent</th><th>Preview</th></tr></thead>
+      <tbody>
+        <tr><td>Profiles</td><td><code>jade</code></td><td>#4da791</td>
+          <td><span class="nav-pill" style="--theme:#4da791;--theme-ink:#2e6b5a;--theme-bg:#e0e8d5">Profiles</span></td></tr>
+        <tr><td>Cases</td><td><code>qing</code></td><td>#5b8aa6</td>
+          <td><span class="nav-pill" style="--theme:#5b8aa6;--theme-ink:#33506b;--theme-bg:#e2eaf0">Cases</span></td></tr>
+        <tr><td>Run tests</td><td><code>seal</code></td><td>#b5443a</td>
+          <td><span class="nav-pill" style="--theme:#b5443a;--theme-ink:#8a2f28;--theme-bg:#f1dad7">Run tests</span></td></tr>
+        <tr><td>Reports</td><td><code>dai</code></td><td>#2e4a5c</td>
+          <td><span class="nav-pill" style="--theme:#2e4a5c;--theme-ink:#1e3340;--theme-bg:#e2ecef">Reports</span></td></tr>
+        <tr><td>AI guide</td><td><code>gold</code></td><td>#c9a54a</td>
+          <td><span class="nav-pill" style="--theme:#c9a54a;--theme-ink:#7a5a1e;--theme-bg:#f4e9c9">AI guide</span></td></tr>
+        <tr><td>Help (<code>?</code> icon, no label)</td><td><code>qing</code></td><td>#5b8aa6</td>
+          <td><span class="nav-pill" style="--theme:#5b8aa6;--theme-ink:#33506b;--theme-bg:#e2eaf0">?</span></td></tr>
+      </tbody>
+    </table>
+    <p class="small muted">
+      The page theme only decorates. It must not carry meaning: a green Run button stays green on the red "Run tests" page.
+      To add a page: add a nav entry with a theme in <code>layout.tsx</code>; for a new accent also add a
+      <code>[data-theme='name']</code> block in <code>index.css</code>.
+    </p>
+    <h2 id="typography">Typography</h2>
+    <div class="card">
+      <p style="font-family:var(--serif);font-size:24px;font-weight:400;margin:0">Serif: headings, brand name, eyebrows</p>
+      <p class="mono small muted" style="margin:2px 0 12px">Calistoga (Google Fonts) → Iowan Old Style, Georgia, Songti SC, Noto Serif SC, SimSun</p>
+      <p style="margin:0">Sans: body text, buttons, tables, forms. The quick brown fox jumps over the lazy dog.</p>
+      <p class="mono small muted" style="margin:2px 0 12px">Inter (Google Fonts) → PingFang SC, Noto Sans SC, Microsoft YaHei, system-ui</p>
+      <p class="mono" style="margin:0">Mono: commands, ids, paths, job output (pnpm asrun --profile example-production)</p>
+      <p class="mono small muted" style="margin:2px 0 0">Ubuntu Mono (Google Fonts) → ui-monospace, SFMono-Regular, Menlo, Consolas</p>
+    </div>
+    <p class="small muted">Page titles: serif, regular weight, <code>text-2xl</code>, with a 4px accent bar on the left (<code>border-l-4 border-theme pl-3</code>).</p>
+    <h2 id="buttons">Buttons</h2>
+    <p>Use <code>buttonClass(variant)</code> from <code>status.tsx</code>. Never hand-style a button.</p>
+    <div class="demo">
+      <button class="btn btn-success">
+        <!-- Play icon from Feather (https://feathericons.com/) -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+        Run tests
+      </button>
+      <button class="btn btn-success">
+        <!-- Send icon from Feather (https://feathericons.com/) -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+        Run AI
+      </button>
+      <button class="btn btn-stop">
+        <!-- XCircle icon from Feather (https://feathericons.com/) -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+        Close browser
+      </button>
+      <button class="btn btn-primary">Log in</button>
+      <button class="btn btn-secondary">Verify</button>
+      <button class="btn btn-info">Full screen</button>
+      <button class="btn btn-danger">Cancel</button>
+      <button class="btn btn-secondary" disabled>Disabled</button>
+    </div>
+    <table>
+      <thead><tr><th>Variant</th><th>Use for</th></tr></thead>
+      <tbody>
+        <tr><td><code>success</code> (green)</td><td>Starting a run. Starting tests ("Run tests" on the Run page) always has the Feather <code>Play</code> icon. Sending a command to an AI tool or a shell job ("Run AI" in the case toolbar, "Make cases") always has the Feather <code>Send</code> icon. The icon goes on the left; never use <code>Play</code> for an AI command.</td></tr>
+        <tr><td><code>stop</code> (solid red)</td><td>Forcibly ends something that is running, shown in place of the button that started it: "Close browser" on the Profiles page. Always with the Feather <code>XCircle</code> icon.</td></tr>
+        <tr><td><code>primary</code> (page accent)</td><td>The main call to action of a page that is not a run: Log in, Save.</td></tr>
+        <tr><td><code>info</code> (light blue)</td><td>A view toggle that must be easy to find, not an action on data: "Full screen" / "Restore" in the Jobs drawer bar. Blue = read-only.</td></tr>
+        <tr><td><code>secondary</code> (white)</td><td>Everything else: Verify, Visit, Discard, Copy, navigation.</td></tr>
+        <tr><td><code>danger</code> (white, red text)</td><td>Cancel a running job, destructive confirmations.</td></tr>
+      </tbody>
+    </table>
+    <p class="small muted">Hover lifts the button 1px; disabled is 50% opacity with no shadow. With an icon, add <code>gap-1.5</code> to the button.</p>
+    <h2 id="badges">Badges</h2>
+    <div class="demo">
+      <span class="badge green">Logged in</span>
+      <span class="badge red">Session expired</span>
+      <span class="badge amber">Saved, not verified</span>
+      <span class="badge blue">Running</span>
+      <span class="badge amber">Needs your input</span>
+      <span class="badge gray">Cancelled</span>
+      <span class="badge writes">WRITES</span>
+    </div>
+    <table>
+      <thead><tr><th>Tone</th><th>Profile status</th><th>Job status</th></tr></thead>
+      <tbody>
+        <tr><td><span class="badge green">green</span></td><td>ok: Logged in</td><td>Succeeded</td></tr>
+        <tr><td><span class="badge red">red</span></td><td>expired, missing</td><td>Failed</td></tr>
+        <tr><td><span class="badge amber">amber</span></td><td>unverified, error</td><td>Needs your input (an AI run that ended with <code>RESULT: needs-input</code>)</td></tr>
+        <tr><td><span class="badge blue">blue</span></td><td>-</td><td>Running</td></tr>
+        <tr><td><span class="badge gray">gray</span></td><td>-</td><td>Cancelled</td></tr>
+      </tbody>
+    </table>
+    <p class="small muted">
+      <code>WRITES</code> is the one badge that is not a tone: red text in a red outline on the card color
+      (<code>WritesBadge</code>). A red fill reads as a failure of the case itself, and it must still be noticed wherever
+      cases are listed, so the outline carries it without the alarm.
+    </p>
+    <h3>Target reference chips</h3>
+    <div class="demo">
+      <span class="target-chip"><span class="stamp">T1</span> Conduit logo</span>
+      <span class="target-chip warn"><span class="stamp">T2</span> Top-bar username link</span>
+      <span class="target-chip missing"><span class="stamp">T9</span> no target card</span>
+    </div>
+    <p class="small muted">
+      A <code>[T1]</code> in a step, a ready signal or a check becomes this chip in the case panel (the Targets rows use
+      the same orange stamp): clicking it opens the card. Orange is the colour of a reference; the fill says whether the
+      card is ready (white), not ready (amber) or missing (red).
+    </p>
+    <h3>Environment markers</h3>
+    <div class="demo">
+      <span class="env production">PRODUCTION</span>
+      <span class="env staging">STAGING</span>
+      <span class="env other">OTHER</span>
+    </div>
+    <p class="small muted">
+      The environment must never be missed, so it is a solid block with white text, from <code>envFillClass()</code> in <code>status.tsx</code>
+      (used by <code>EnvBadge</code> and the banner on top of the Reports page). Production is <code>jiang</code> (purple), staging <code>cheng</code> (orange),
+      any other environment <code>gold-deep</code>. Never red: red means errors, failures and writes, and production must not look like an error.
+    </p>
+    <h3>Target ids (T1, T2)</h3>
+    <div class="demo">
+      <span class="badge blue" style="padding-left:4px;gap:6px"><span style="background:var(--dai);color:var(--paper);font-family:var(--mono);font-weight:600;padding:2px 6px;border-radius:2px;font-size:11px">T1</span> Conduit logo</span>
+      <span class="badge gray" style="padding-left:4px;gap:6px"><span style="background:var(--dai);color:var(--paper);font-family:var(--mono);font-weight:600;padding:2px 6px;border-radius:2px;font-size:11px">T2</span> Top-bar username link</span>
+    </div>
+    <p class="small muted">
+      A target id is always a solid <code>dai</code> stamp with <code>paper</code> mono text, from <code>TargetKey</code> in
+      <code>components/case-panel/target-chip.tsx</code>. It sits inside the chip, as the row marker of a Targets card and at the
+      start of the card window's title, so <code>T1</code> looks the same in all three places and never reads as part of the name.
+      The chip around it keeps the state colors: red no card, amber not ready, blue ready.
+    </p>
+    <h2 id="action-colors">Action colors (AI commands)</h2>
+    <p>
+      Each AI action has one color that tells how much it changes. The select, its dot and its options share the color;
+      a tooltip spells the impact out. Defined in <code>AI_COMMAND_STYLE</code> in <code>pages/cases.tsx</code>.
+    </p>
+    <div class="demo">
+      <span class="cmd review"><span class="dot"></span><span class="fake">Explore case</span></span>
+      <span class="cmd gen"><span class="dot"></span><span class="fake">Generate spec</span></span>
+      <span class="cmd heal"><span class="dot"></span><span class="fake">Heal spec</span></span>
+    </div>
+    <table>
+      <thead><tr><th>Action</th><th>Color</th><th>Impact</th></tr></thead>
+      <tbody>
+        <tr><td><code>explore-case</code></td><td>blue (qing)</td><td>Edits only the case file (wording, observations, open questions, inputs). The agent only reads pages; you do the steps that write data.</td></tr>
+        <tr><td><code>gen-spec</code></td><td>amber (gold)</td><td>Writes: creates the spec and fills the case's <code>## Values</code>. Does not run the tests.</td></tr>
+        <tr><td><code>heal-spec</code></td><td>red (seal)</td><td>Rewrites an existing spec and runs the tests.</td></tr>
+      </tbody>
+    </table>
+    <p class="small muted">
+      A new action must pick the color by impact, not by taste: read-only or touches only the case file is blue, adds files (spec, case values) is amber, rewrites or deletes is red. Two actions must never share a color.
+      The select itself is the <a href="#dropdowns">Dropdown</a> component with <code>tone</code> and <code>dot</code>; its list shows each choice with the dot of that action.
+    </p>
+    <h2 id="dropdowns">Dropdowns</h2>
+    <p>
+      Every dropdown is the <code>Select</code> component from <code>ui/web/src/components/status.tsx</code>.
+      <b>Never write a bare <code>&lt;select&gt;</code></b> and never copy its classes: a native popup is drawn by the
+      browser, with its own arrow, height and no shadow, so it looks wrong next to the others (this has gone wrong twice).
+      <code>Select</code> is a button that draws its own list under it, in a <code>card-popup</code> panel, which is what
+      gives every dropdown the same raised look.
+    </p>
+    <div class="demo">
+      <span class="select"><span class="fake">staging</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+      <span class="select focus"><span class="fake">staging</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+      <span class="select-label invalid">Explore in
+        <span class="select invalid"><span class="fake">Choose...</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+      </span>
+      <span class="select dotted"><span class="dot"></span><span class="fake">Generate spec</span><svg class="chev" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+    </div>
+    <p class="small muted">Left to right: normal, focused, required and empty (invalid), and colored with a dot (the AI command select).</p>
+    <pre class="card mono" style="overflow:auto">import {Select} from '../components/status';
+&lt;Select value={env} onChange={setEnv} invalid={env === ''} aria-label="Environment"&gt;
+  &lt;option value=""&gt;Choose...&lt;/option&gt;
+  ...
+&lt;/Select&gt;</pre>
+    <table>
+      <thead><tr><th>Part</th><th>Rule</th></tr></thead>
+      <tbody>
+        <tr><td>Size</td><td>Height 32px (<code>h-8</code>), text <code>text-sm</code>, corners <code>rounded</code>. Same height as <code>buttonClass()</code> buttons, so they line up in a toolbar.</td></tr>
+        <tr><td>Arrow</td><td>One Feather <code>ChevronDown</code>, size 14, <code>text-ink-2</code>, at the right. The component draws it; do not add your own.</td></tr>
+        <tr><td>Normal</td><td>White background, <code>border-line-mid</code>, <code>text-ink</code>. Focus: <code>theme</code> border and a 2px ring at 25%.</td></tr>
+        <tr><td>Required and empty</td><td>Pass <code>invalid</code>: <code>seal</code> border, <code>seal-bg</code> background, <code>seal-deep</code> text and arrow. Also color the label <code>text-seal-deep</code>. Do not add a separate error message when the placeholder option (<code>Choose...</code>) already says what to do.</td></tr>
+        <tr><td>Colored by choice</td><td>Pass <code>tone</code> (border, background, text and ring classes) and <code>dot</code> (dot background) when each option has a meaning color, as in <a href="#action-colors">Action colors</a>. Give each <code>&lt;option&gt;</code> the same dot as <code>data-dot</code>, so the open list shows the color of every choice.</td></tr>
+        <tr><td>Code values</td><td>Pass <code>mono</code> for ids and file names.</td></tr>
+        <tr><td>Label</td><td>Put a visible label in front (<code>text-sm text-ink-2</code>) or an <code>aria-label</code>. Never wrap the control in a <code>&lt;label&gt;</code>: a click on a row of the open list would be forwarded to the button and reopen it.</td></tr>
+        <tr><td>Open list</td><td>A <code>card-popup</code> panel under the control, at most <code>max-h-64</code>, one row per option, the current value with a <code>Check</code>. The row under the pointer or the arrow keys is <code>theme-bg</code>. Arrow keys move, Enter picks, Escape closes, a click outside closes, and the focus stays on the button (a <code>listbox</code> driven by <code>aria-activedescendant</code>).</td></tr>
+        <tr><td>Change</td><td><code>onChange(value: string)</code> receives the chosen value, not an event. The options are still written as <code>&lt;option value=...&gt;</code> children.</td></tr>
+        <tr><td>Remembering a choice</td><td>Use <code>usePersistedState(key, default, guard)</code> from <code>lib/persisted.ts</code> with the key prefix <code>asrun-ui.</code>. Treat a stored value that is no longer in the options as empty.</td></tr>
+      </tbody>
+    </table>
+    <h3 id="searchable">Searchable lists</h3>
+    <p>
+      A list the user has to search in is <code>SearchSelect</code> from
+      <code>ui/web/src/components/search-select.tsx</code>, never an <code>input</code> with a <code>&lt;datalist&gt;</code>:
+      a native suggestion list cannot be styled, and it has become a dropdown that looks like nothing else. It is a
+      text field with the filtered list under it; a native <code>&lt;select&gt;</code> takes no text, which is the only
+      reason it is not the <a href="#dropdowns">Dropdown</a>.
+    </p>
+    <pre class="card mono" style="overflow:auto">import {SearchSelect} from '../components/search-select';
+&lt;SearchSelect aria-label="Case to run" value={grep} onChange={setGrep} mono
+  placeholder="e.g. hub-landing" options={cases.map((c) =&gt; ({value: c.id, hint: c.title}))} /&gt;</pre>
+    <table>
+      <thead><tr><th>Part</th><th>Rule</th></tr></thead>
+      <tbody>
+        <tr><td>Shape</td><td>Same 32px height, <code>text-sm</code>, border and focus ring as the Dropdown, so a form that uses both still looks like one family.</td></tr>
+        <tr><td>Icons</td><td>Feather <code>Search</code> size 14 at the left; <code>ChevronDown</code> at the right while the field is empty, and a clear <code>X</code> once it holds text.</td></tr>
+        <tr><td>List</td><td><code>card-popup</code> panel under the field, at most <code>max-h-64</code>, one row per option with the optional <code>hint</code> as a second muted line. The row under the pointer or the arrow keys is <code>theme-bg</code>.</td></tr>
+        <tr><td>Picking</td><td>A picked row fills the field with its value, and focusing a picked value shows the whole list again. The <code>X</code> clears the field.</td></tr>
+        <tr><td>Keyboard</td><td>Arrow keys move, Enter picks, Escape closes, and the focus stays in the field. The list is a <code>listbox</code> driven by <code>aria-activedescendant</code>, not a menu.</td></tr>
+      </tbody>
+    </table>
+    <h2 id="multi-value">Multi-value fields</h2>
+    <p>
+      A field whose value is a list is never a <a href="#dropdowns">Dropdown</a> plus an "Add" text input: that mixes a
+      32px <code>text-sm</code> control with 12px tags, and the two ways to add a value overlap. The case settings panel
+      uses two components from <code>ui/web/src/components/case-panel/</code>, one per kind of list.
+    </p>
+    <h3>Tag field</h3>
+    <div class="demo">
+      <div>
+        <span class="tags focus">
+          <span class="tag">smoke
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </span>
+          <span class="tag">regression
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </span>
+          <span class="entry">hea<span class="caret"></span></span>
+        </span>
+        <div class="suggest">
+          <div class="opt on"><span>header-navigation</span></div>
+          <div class="opt"><span>header-links</span></div>
+          <div class="opt"><span>header-menu</span><span class="new">new</span></div>
+        </div>
+      </div>
+    </div>
+    <p class="small muted">Left: two committed tags and the entry with the caret. Under it, the open list: a matching name, another one, and a name no case uses yet ("new").</p>
+    <table>
+      <thead><tr><th>Part</th><th>Rule</th></tr></thead>
+      <tbody>
+        <tr><td>Box</td><td>Min height 32px (the height of a <code>Select</code> and a button), white, <code>border-line-mid</code>, <code>rounded</code>, <code>px-1.5 py-1</code>. Focus: <code>border-theme</code> and a 2px <code>theme</code> ring at 25%. The box is the input; the entry inside it has no border of its own.</td></tr>
+        <tr><td>Tag</td><td>24px high, <code>bg-warm</code>, <code>font-mono text-xs</code>, <code>ring-line-mid</code>. The X is a Feather <code>X</code>, size 12, with <code>aria-label="Remove &lt;value&gt;"</code>.</td></tr>
+        <tr><td>Entry</td><td><code>font-mono text-xs</code>, the same size as a tag, so the two never look like different controls. Placeholder says what to type ("Add a suite…").</td></tr>
+        <tr><td>Committing</td><td>Comma, Enter and leaving the field add the value. A comma in the middle of the text commits what is in front of it and keeps the rest in the entry, so <code>smoke, regression</code> becomes two tags. Backspace on an empty entry removes the last tag.</td></tr>
+        <tr><td>Suggestion list</td><td>At most 8 rows, <code>card-paper</code>, marked with <code>role="listbox"</code>/<code>"option"</code>. It is drawn on the body with fixed coordinates, because the case panel scrolls and would cut it off; any scroll, resize or outside click closes it (<code>row-menu.tsx</code> does the same). Arrow keys move, Enter picks, Escape closes.</td></tr>
+        <tr><td>New values</td><td>A typed name that no case uses yet is the last row, marked "new". It must match <code>^[a-z0-9]+(-[a-z0-9]+)*$</code>; a name that does not match turns the box red and never reaches the front matter.</td></tr>
+        <tr><td>Required</td><td><code>keepOne</code>: the X of the last tag is disabled and the tag's tooltip says why. Never leave a required list empty and let validation complain afterwards.</td></tr>
+      </tbody>
+    </table>
+    <h3>Environment toggle chips</h3>
+    <div class="demo">
+      <span class="env-chip on production"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>PRODUCTION</span>
+      <span class="env-chip off">STAGING</span>
+      <span class="env-chip blocked">SANDBOX</span>
+    </div>
+    <p class="small muted">Left to right: pressed, not pressed, and a value this form cannot offer (red; a click removes it).</p>
+    <table>
+      <thead><tr><th>Part</th><th>Rule</th></tr></thead>
+      <tbody>
+        <tr><td>Shape</td><td>One tag per value, 24px high, <code>text-xs font-bold tracking-wider</code>. The whole tag is the button (<code>aria-pressed</code>): no box around the group, so no part of a border looks clickable and is not.</td></tr>
+        <tr><td>On</td><td><code>envFillClass(env)</code> (see <a href="#badges">Environment markers</a>) plus a Feather <code>Check</code>, size 12. Color is never the only signal.</td></tr>
+        <tr><td>Off</td><td>White, <code>ring-line-mid</code>, <code>text-ink-2</code>; hover <code>bg-warm</code>.</td></tr>
+        <tr><td>No X</td><td>Never a removable tag for an on/off choice: pressing it again turns it off. An X on "only these" asks the opposite question ("not these?"), which is exactly the confusion to avoid.</td></tr>
+        <tr><td>Blocked value</td><td>A selected value the form cannot offer (a write environment the case does not run in) is <code>seal-bg</code> / <code>seal-deep</code>; its tooltip says what to do, and a click removes it.</td></tr>
+        <tr><td>Required</td><td><code>keepOne</code>: the last pressed tag stays on; its tooltip says why. The group is what lets the case run anywhere.</td></tr>
+      </tbody>
+    </table>
+    <h2 id="icons">Icons</h2>
+    <p>
+      Icons come from <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather</a> through the
+      <code>react-feather</code> package. <b>Do not draw or paste custom SVGs in the app.</b>
+    </p>
+    <div class="demo">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+      <span class="label">Play (run tests)</span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+      <span class="label">Send (run AI / shell commands)</span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+      <span class="label">ChevronDown</span>
+    </div>
+    <pre class="card mono" style="overflow:auto">import {Play} from 'react-feather';
+&lt;button className={`${buttonClass('success')} gap-1.5`}&gt;
+  &lt;Play size={14} aria-hidden="true" /&gt;
+  Run tests
+&lt;/button&gt;</pre>
+    <ul class="tight">
+      <li>Size 14 inside buttons and selects, 16-20 elsewhere. Stroke width stays at Feather's default (2).</li>
+      <li>Icons inherit <code>currentColor</code>; color them with the text color classes, not fills.</li>
+      <li>Decorative icons get <code>aria-hidden="true"</code>; icon-only buttons need an <code>aria-label</code>.</li>
+      <li>A button that is just an icon in a dense list has no background or border: <code>text-jade-deep hover:text-jade-btn</code> for "run", <code>text-ink-3 hover:text-ink</code> for neutral ones (clear search). The one exception is the run mark at the left of a Cases row (see <a href="#sections">Sidebar sections</a>): a solid green disc with a white icon, because the state of the row must be read before the row itself.</li>
+      <li>Find names at <a href="https://feathericons.com/" target="_blank" rel="noopener">feathericons.com</a> and import them in PascalCase (<code>arrow-right</code> becomes <code>ArrowRight</code>).</li>
+      <li>Exception, brand logos: Feather has no logos of other products, so the Claude and OpenCode logos of the AI agent switch are static SVG files in <code>ui/web/public/logos/</code> (single path, <code>viewBox="0 0 24 24"</code>). Show them with the <code>Logo</code> mask in <code>components/tool-switch.tsx</code> so they take the text color. Never paste logo SVGs into components.</li>
+    </ul>
+    <h2 id="tooltips">Tooltips</h2>
+    <p>
+      Write a plain <code>title="..."</code> on the element. <code>lib/tooltip.ts</code> (tippy.js) turns every <code>title</code> into
+      a dark tooltip with an arrow on hover, so the browser's native tooltip never shows. Do not set up tippy per component and do not
+      use a <code>title</code> on an <code>iframe</code>. Each <code>\n</code> in the text starts a new paragraph, and a line that starts with <code># </code> is a bold heading. Keep it short: a heading, then one or two sentences. Never put a command line or other long raw text in a tooltip. Disabled buttons and inputs get the
+      tooltip too, so a <code>title</code> that says why something is disabled works. The box is styled by <code>.tippy-box[data-theme~='tip']</code>
+      in <code>index.css</code>; the keyword help of the case editor and the ? help of the case panel have their own
+      <code>inkstone</code> theme, and both open on click (see <code>ui/web/src/lib/section-help.ts</code>).
+      A target card is too long for a tooltip: it opens as a window (<code>components/case-panel/target-card-dialog.tsx</code>).
+    </p>
+    <h3>Field help (the <code>?</code> after a label)</h3>
+    <div class="demo">
+      <span class="field-label">writes data in
+        <svg class="help" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+      </span>
+      <span class="field-label">suites
+        <svg class="help" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+      </span>
+    </div>
+    <p class="small muted">
+      A form row keeps its label short; the <code>?</code> right after it opens a card with that one field's meaning
+      (<code>FieldHelp</code> in <code>components/case-panel/section.tsx</code>, text in <code>FIELD_HELP</code> of
+      <code>lib/section-help.ts</code>). It is the same delegated tippy instance as the section help: click to open,
+      Escape closes. The icon is 12, not the usual 14, because it sits next to a 12px row label; it is an icon-only
+      button, so it needs <code>aria-label="About &lt;field&gt;"</code>.
+    </p>
+    <h2 id="editor">Markdown editor</h2>
+    <p class="muted">
+      The case editor (CodeMirror) is the "draft" next to the white preview "sheet". Layout and colors live in the
+      <code>.inkstone-editor</code> rules of <code>index.css</code>; <code>ui/web/src/lib/editor-theme.ts</code> maps syntax tags to
+      the <code>tok-*</code> classes. Use both for any new editor, and never the built-in CodeMirror themes.
+      The editor is monospace only: no serif or sans font, not even for headings.
+      The preview renders the front matter as a key/value table (keys in <code>warm</code> cells, list values as blue badges).
+      The small Markdown fields of the case panel (steps, bullets, answers, the writes-note) reuse the same theme in a
+      bordered, auto-growing box (<code>.inkstone-field</code>): same font and highlight colors, scrolling past a height
+      limit; a line revealed from the panel blinks three times (<code>.cm-flash</code>, <code>flashField</code>).
+    </p>
+    <div class="editor-demo">
+      <div class="ed-active"><span class="ed-mark">---</span></div>
+      <div><span class="ed-prop">suites</span><span class="ed-punct">:</span> <span class="ed-punct">[</span>smoke<span class="ed-punct">]</span></div>
+      <div><span class="ed-mark">---</span></div>
+      <div><span class="ed-mark">##</span> <span class="ed-h">Steps</span></div>
+      <div><span class="ed-list">1.</span> Open <span class="ed-mark">`</span><span class="ed-code">/app/documents</span><span class="ed-mark">`</span>.</div>
+      <div><span class="ed-list">-</span> See <span class="ed-mark">[</span><span class="ed-link">docs</span><span class="ed-mark">](</span><span class="ed-url">https://example.com</span><span class="ed-mark">)</span></div>
+      <div><span class="ed-mark">&gt;</span> <span class="ed-quote">A quoted note</span></div>
+    </div>
+    <table style="margin-top:12px">
+      <tr><th>Element</th><th>Token</th></tr>
+      <tr><td>Editor background</td><td><code>warm</code> over the paper grain; gutter <code>paper</code>, separated by a <code>line-mid</code> border</td></tr>
+      <tr><td>Cursor, active line, active line number</td><td><code>theme-btn</code>, <code>theme-bg</code> at 40%, <code>theme-ink</code>; they follow the page theme</td></tr>
+      <tr><td>Selection</td><td><code>theme</code> at 30%</td></tr>
+      <tr><td>Bracket match</td><td><code>gold-bg</code> with <code>gold-deep</code> text</td></tr>
+      <tr><td>Headings</td><td><code>seal-deep</code>, bold, monospace (<code>theme-ink</code> on the red <code>seal</code> page)</td></tr>
+      <tr><td>Marks (<code>#</code> <code>&gt;</code> backticks, <code>---</code>)</td><td><code>ink-3</code></td></tr>
+      <tr><td>List markers</td><td><code>gold-deep</code>, bold</td></tr>
+      <tr><td>Bold, italic</td><td><code>ink</code>, bold or italic</td></tr>
+      <tr><td>Quote</td><td><code>ink-2</code>, italic</td></tr>
+      <tr><td>Link text, URL</td><td><code>qing-deep</code>; <code>ink-3</code> underlined</td></tr>
+      <tr><td>Inline code</td><td><code>jade-btn</code> on <code>jade-bg</code></td></tr>
+      <tr><td>Front matter keys, types, tags</td><td><code>qing-deep</code></td></tr>
+      <tr><td>Code blocks</td><td>keywords <code>seal-deep</code>, strings <code>jade-btn</code>, numbers <code>gold-deep</code>, functions <code>dai</code>, comments <code>ink-3</code>, punctuation <code>ink-2</code></td></tr>
+    </table>
+    <h3>Keyword highlights and their tooltip</h3>
+    <p class="muted">
+      Words that need a human are marked in the editor and in the preview (<code>&lt;mark&gt;</code>) with the same
+      <code>kw-*</code> classes: <code>TODO [blocking]</code> <code>seal</code>, other <code>TODO</code> <code>gold</code>,
+      "to be confirmed by QA" / "not observed" <code>qing</code>, <code>Answer:</code> <code>jade</code>; the emoji in front
+      of a marker is part of it and takes the same color. Hovering one shows a
+      small dark card with an arrow (tippy.js, theme <code>inkstone</code>: <code>dai-deep</code> background like the preview code
+      blocks, <code>paper</code> text, <code>shadow-lift</code>) so that it stands out on both the white preview and the beige
+      editor. A 6px left bar and the title, both in the bright <code>*-glow</code> color of the kind (<code>seal-glow</code>,
+      <code>gold-glow</code>, <code>qing-glow</code>, <code>jade-glow</code>; they exist only for dark surfaces),
+      show the kind; below come one line of meaning (<code>line-mid</code>) and a numbered "You can:" list. The texts live in
+      <code>keywordHelp</code> in <code>ui/web/src/lib/highlight-keywords.ts</code>; keep every line short and direct.
+      Do not add another tooltip library: use <code>tippy.js</code> and the <code>inkstone</code> theme.
+    </p>
+    <p class="muted">
+      After every marker comes a small remove button (<code>kw-remove</code>, <code>kw-remove-&lt;kind&gt;</code>): the
+      Feather <code>X</code> at 14px in the same text and background colors as the marker, 20px square, 2px radius,
+      <code>theme</code> focus outline. It is a plain button (a CodeMirror widget in the editor, an element in the preview),
+      never a new icon. It deletes the marker, or the whole question block of a <code>TODO</code> (the sentence above stays),
+      or what is typed after an <code>Answer:</code>; the logic is in <code>ui/web/src/lib/keyword-removal.ts</code>.
+    </p>
+    <p class="muted">
+      The preview block that holds the editor caret is shaded with <code>theme-bg</code> at 60% and a 2px <code>theme</code> left
+      border (an overlay, so it follows the page theme). The editor and the preview scroll together and a click in the preview
+      moves the caret; the logic is in <code>ui/web/src/lib/preview-sync.ts</code>.
+    </p>
+    <p class="muted">
+      The previous / next buttons of the case toolbar move the caret to the next marker and blink that marker for a moment in
+      both panes (<code>cm-kw-flash</code> in the editor, <code>kw-flash</code> over the <code>&lt;mark&gt;</code> of the
+      document): <code>gold-glow</code> at 65% behind it and a 2px <code>dai-deep</code> ring with a wider
+      <code>gold-glow</code> glow around it, the ring blinking on and off three times (0.45&nbsp;s each), then it goes away.
+      The ring is what makes a marker findable whatever its own color is (a <code>TODO</code> is gold, a blocking one red);
+      the caret and the shaded block alone are not enough. Without motion (reduced motion) the highlight is shown for the
+      same 1.4&nbsp;s, steady.
+    </p>
+    <h2 id="surfaces">Surfaces and shadows</h2>
+    <div class="row">
+      <div class="card" style="width:240px">
+        <b>card-paper</b>
+        <p class="small muted" style="margin:4px 0 0">White sheet, 4px radius, a faint accent tint at the top left, colored shadow that follows the page theme.</p>
+      </div>
+      <div style="display:flex;align-items:center;gap:10px">
+        <span class="seal-stamp">A</span>
+        <span class="small muted"><code>.seal</code>: the stamp. The only slightly rotated element; use it once, in the header.</span>
+      </div>
+    </div>
+    <ul class="tight">
+      <li>Radius: 4px for cards, buttons and inputs; 2px for badges; no pills.</li>
+      <li>Shadows are tinted with the page accent (<code>shadow-paper</code>, <code>shadow-lift</code>, <code>shadow-btn</code>, <code>shadow-btn-lift</code>), never plain gray.</li>
+      <li><code>card-panel</code> (the case panel's sections): the white sheet without the accent gradients, with a neutral ink-tinted elevation, because the panel is dense with semantic colors (green/gold/red badges).</li>
+      <li><code>card-popup</code>: a flat white panel that floats over the page — every dropdown list, suggestion list and row menu — with a heavier elevation than the cards (a dark near shadow for definition plus a wide accent-tinted one), so it reads as above the content it covers rather than as another sheet on it. Its accent is the one of its own page: the shadow is declared in <code>index.css</code>, not taken from a <code>shadow-*</code> utility.</li>
+      <li>The page background carries a subtle paper grain (<code>--grain</code>).</li>
+      <li>The Jobs drawer, header and top-level separators use a 2px <code>ink</code> border; everything inside uses <code>line</code> / <code>line-mid</code>.</li>
+      <li>The Jobs drawer's title bar is a solid <code>dai-deep</code> bar with white text, so it reads as a handle. It ends with the same small chevron block as a sidebar section header and brightens on hover.</li>
+      <li>The job log is a <code>dai-deep</code> pane of monospace lines. An AI run's blocks use <code>paper</code> at
+        different weights: the timestamp and the time a call took at 30%, a tool's name in <code>qing-glow</code>, its
+        detail at 55%, its output at 60% behind a <code>paper/15</code> left border, and the agent's thinking at 45%
+        italic, because it is not a result. What the agent says is Markdown rendered inside the pane
+        (<code>prose prose-log</code> in <code>index.css</code>): dark <code>--tw-prose-*</code> tokens, sans body, the
+        page's serif headings. A failure is <code>seal-glow</code>, a hint <code>gold-glow</code>. Never color a block any
+        other way: the four weights are what makes the log scannable.</li>
+      <li><b>Every expand/collapse animates.</b> Use <code>Collapse</code> from <code>components/collapse.tsx</code> (height and fade, 200ms, <code>ease-out</code>) for content that appears and disappears, and rotate the chevron with <code>transition-transform duration-200</code> instead of swapping two icons. Always add <code>motion-reduce:transition-none</code>. Turn transitions off while the user drags a resize handle.</li>
+    </ul>
+    <h2 id="sections">Sidebar sections and selection</h2>
+    <div class="row" style="align-items:flex-start">
+      <div class="side">
+        <div class="sec"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>New cases<span class="toggle"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span></div>
+        <div class="sec"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>Case list<span class="aside">3 / 12</span></div>
+        <div class="search">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <span class="fake">Search name, title, suite...</span>
+        </div>
+        <div class="folder">documents <span style="margin-left:auto;color:var(--ink-3)">2</span></div>
+        <div class="item selected">hub-landing</div>
+        <div class="item">header-logo</div>
+      </div>
+      <div style="flex:1;min-width:260px">
+        <ul class="tight">
+          <li>Sections of a sidebar (<code>SectionHeader</code> in <code>pages/cases.tsx</code>) are all on one level: a solid page-accent bar (<code>bg-theme-btn</code>, white text and icon, serif label), so a section header is never mistaken for a folder row (gray). A collapsible one ends with a small button block (<code>bg-white/15</code>, Feather <code>ChevronDown</code> when collapsed, <code>ChevronUp</code> when open, size 16) that brightens on hover; a static one has no block, only an optional count. The block is what says "this can be expanded".</li>
+          <li><code>bg-theme-bg</code> means <b>selected</b> and nothing else. Never use it for a header, so a header cannot be mistaken for a selected row. A selected row also gets <code>border-l-4 border-l-theme</code>.</li>
+          <li>Levels inside a list: section header, then folder (<code>bg-warm</code>, small, regular weight, no accent), then item.</li>
+          <li>A search box is a <code>fieldClass</code> input with a Feather <code>Search</code> icon at the left and a clear button (<code>X</code>, <code>aria-label</code>) at the right. It filters while typing, with no submit; <code>Esc</code> clears it.</li>
+          <li>An item in the Cases list shows its two states at the left edge, never as badges: a solid green round button (<code>bg-jade</code>, white Feather <code>Play</code> 12, <code>hover:bg-jade-btn</code>) when its spec is generated, which opens the Run tests page for that case, and an amber <code>AlertTriangle</code> 15 in <code>text-gold</code> alone, with no disc or halo, when it has none: not a button, only a tooltip ("No spec yet"), because there is nothing to do yet. Both sit in the same 20px slot, so a row keeps its shape; the tooltip states the state in words, which keeps the row's badges free for suites, login and <code>WRITES</code>.</li>
+        </ul>
+        <p class="small muted">The icons in the demo are inline only because this page has no build step; in the app they always come from <code>react-feather</code>.</p>
+      </div>
+    </div>
+    <h2 id="checklist">Checklist for a new UI element</h2>
+    <ol class="tight">
+      <li>Pick colors only from the tokens above (<code>text-ink-2</code>, <code>bg-warm</code>, <code>bg-seal-bg</code>, ...).</li>
+      <li>Decide the impact: safe/go = green, read-only/info = blue, writes/attention = amber, destructive/rewrite/error = red.</li>
+      <li>Use <code>buttonClass()</code> and <code>Badge</code> instead of new styles.</li>
+      <li>Dropdowns: use <code>Select</code>, never a bare <code>&lt;select&gt;</code> (see <a href="#dropdowns">Dropdowns</a>).</li>
+      <li>Lists of values: use <code>TagField</code> (open list of names) or <code>EnvChips</code> (on/off environments), never <code>Select</code> + "Add" (see <a href="#multi-value">Multi-value fields</a>).</li>
+      <li>Fonts: only the three families in <code>--font-serif</code>, <code>--font-sans</code> and <code>--font-mono</code> (Calistoga, Inter, Ubuntu Mono). Never add a fourth.</li>
+      <li>Icons: Feather via <code>react-feather</code> only.</li>
+      <li>If you add or change a token, update <code>index.css</code> and this page together.</li>
+    </ol>
+    <div class="rule" style="margin-top:16px">
+      Exception: if a color's meaning has to differ from this guide (for example a destructive action that is not red), say why in a code comment.
+    </div>
+    <footer>Inkstone theme guide for the AsRun UI. Static file: <code>docs/theme-guide.html</code>. Inkstone theme, designed and created by Zoro Chen.
+      <div class="creator">
+        <span>Created by Zoro Chen</span>
+      </div>
+    </footer>
+  </main>
+</div>
+</body>
+</html>