From 5a1e185b1a609f8719306e1a2f8b912a6b2e0d46 Mon Sep 17 00:00:00 2001
From: wangjia <809946525@qq.com>
Date: Sat, 13 Jun 2026 14:29:07 +0800
Subject: [PATCH] =?UTF-8?q?docs(design):=20=E8=A7=A3=E5=8E=8B=20Maestro=20?=
 =?UTF-8?q?Design=20System=20=E5=88=B0=20design/=EF=BC=88=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E5=8F=82=E7=85=A7=E6=9D=90=E6=96=99=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/
typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile)
+ assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 design/CLAUDE.md                              |   76 +
 design/SKILL.md                               |   50 +
 design/_adherence.oxlintrc.json               |  389 ++
 design/_ds_bundle.js                          | 6186 +++++++++++++++++
 design/_ds_manifest.json                      |    1 +
 design/assets/icons/add.svg                   |    1 +
 design/assets/icons/close.svg                 |    1 +
 design/assets/icons/config.svg                |    1 +
 design/assets/icons/deps.svg                  |    1 +
 design/assets/icons/event.svg                 |    1 +
 design/assets/icons/flow.svg                  |    1 +
 design/assets/icons/gate.svg                  |    1 +
 design/assets/icons/git.svg                   |    1 +
 design/assets/icons/project.svg               |    1 +
 design/assets/icons/ready.svg                 |    1 +
 design/assets/icons/reason.svg                |    1 +
 design/assets/icons/running.svg               |    1 +
 design/assets/icons/search.svg                |    1 +
 design/assets/icons/sync.svg                  |    1 +
 design/assets/icons/task.svg                  |    1 +
 design/components/core/Button.d.ts            |   16 +
 design/components/core/Button.jsx             |   31 +
 design/components/core/Button.prompt.md       |   10 +
 design/components/core/ComplexityBadge.d.ts   |    7 +
 design/components/core/ComplexityBadge.jsx    |   17 +
 .../components/core/ComplexityBadge.prompt.md |    6 +
 design/components/core/CountBadge.d.ts        |   11 +
 design/components/core/CountBadge.jsx         |   40 +
 design/components/core/CountBadge.prompt.md   |    9 +
 design/components/core/QuotaMeter.d.ts        |   15 +
 design/components/core/QuotaMeter.jsx         |   24 +
 design/components/core/QuotaMeter.prompt.md   |    9 +
 design/components/core/SectionHead.d.ts       |   14 +
 design/components/core/SectionHead.jsx        |   17 +
 design/components/core/SectionHead.prompt.md  |    6 +
 design/components/core/StatusChip.d.ts        |   12 +
 design/components/core/StatusChip.jsx         |   46 +
 design/components/core/StatusChip.prompt.md   |    9 +
 design/components/core/core.card.html         |   53 +
 design/components/forms/ComplexitySeg.d.ts    |   16 +
 design/components/forms/ComplexitySeg.jsx     |   32 +
 .../components/forms/ComplexitySeg.prompt.md  |   11 +
 design/components/forms/Input.d.ts            |   17 +
 design/components/forms/Input.jsx             |   28 +
 design/components/forms/Input.prompt.md       |    6 +
 design/components/forms/Select.d.ts           |   13 +
 design/components/forms/Select.jsx            |   69 +
 design/components/forms/Select.prompt.md      |    8 +
 design/components/forms/Textarea.d.ts         |   16 +
 design/components/forms/Textarea.jsx          |   17 +
 design/components/forms/Textarea.prompt.md    |    6 +
 design/components/forms/forms.card.html       |   27 +
 design/components/surfaces/EventItem.d.ts     |   14 +
 design/components/surfaces/EventItem.jsx      |   38 +
 .../components/surfaces/EventItem.prompt.md   |    8 +
 design/components/surfaces/GateCard.d.ts      |   33 +
 design/components/surfaces/GateCard.jsx       |   61 +
 design/components/surfaces/GateCard.prompt.md |   10 +
 design/components/surfaces/Panel.d.ts         |    9 +
 design/components/surfaces/Panel.jsx          |   10 +
 design/components/surfaces/Panel.prompt.md    |    5 +
 design/components/surfaces/Timeline.d.ts      |   18 +
 design/components/surfaces/Timeline.jsx       |   28 +
 design/components/surfaces/Timeline.prompt.md |    9 +
 design/components/surfaces/Toast.d.ts         |   10 +
 design/components/surfaces/Toast.jsx          |   17 +
 design/components/surfaces/Toast.prompt.md    |    6 +
 design/components/surfaces/surfaces.card.html |   46 +
 design/guidelines/brand-glyphs.card.html      |   28 +
 design/guidelines/brand-logo.card.html        |   64 +
 design/guidelines/brand-motion.card.html      |   13 +
 design/guidelines/brand-texture.card.html     |   11 +
 design/guidelines/colors-ink.card.html        |   10 +
 design/guidelines/colors-light.card.html      |   26 +
 design/guidelines/colors-signals.card.html    |   52 +
 design/guidelines/colors-surfaces.card.html   |   13 +
 design/guidelines/colors-tints.card.html      |   13 +
 design/guidelines/spacing-borders.card.html   |   11 +
 design/guidelines/spacing-glow.card.html      |   10 +
 design/guidelines/spacing-radius.card.html    |   11 +
 design/guidelines/spacing-scale.card.html     |   14 +
 design/guidelines/type-family.card.html       |   12 +
 design/guidelines/type-scale.card.html        |   14 +
 design/guidelines/type-tracking.card.html     |   13 +
 design/readme.md                              |   79 +
 design/styles.css                             |    4 +
 design/tokens/colors.css                      |   81 +
 design/tokens/effects.css                     |   45 +
 design/tokens/fonts.css                       |    4 +
 design/tokens/typography.css                  |   30 +
 design/ui_kits/console/ArchiveSection.jsx     |  182 +
 design/ui_kits/console/EventPanel.jsx         |   45 +
 design/ui_kits/console/GateSection.jsx        |  101 +
 design/ui_kits/console/Sidebar.jsx            |  397 ++
 design/ui_kits/console/TaskTree.jsx           |  317 +
 design/ui_kits/console/Topbar.jsx             |  172 +
 design/ui_kits/console/data.js                |   99 +
 design/ui_kits/console/i18n.js                |  231 +
 design/ui_kits/console/index.html             |  183 +
 .../ui_kits/console_mobile/MobileChrome.jsx   |   93 +
 design/ui_kits/console_mobile/MobileViews.jsx |  198 +
 design/ui_kits/console_mobile/index.html      |   90 +
 102 files changed, 10323 insertions(+)
 create mode 100644 design/CLAUDE.md
 create mode 100644 design/SKILL.md
 create mode 100644 design/_adherence.oxlintrc.json
 create mode 100644 design/_ds_bundle.js
 create mode 100644 design/_ds_manifest.json
 create mode 100644 design/assets/icons/add.svg
 create mode 100644 design/assets/icons/close.svg
 create mode 100644 design/assets/icons/config.svg
 create mode 100644 design/assets/icons/deps.svg
 create mode 100644 design/assets/icons/event.svg
 create mode 100644 design/assets/icons/flow.svg
 create mode 100644 design/assets/icons/gate.svg
 create mode 100644 design/assets/icons/git.svg
 create mode 100644 design/assets/icons/project.svg
 create mode 100644 design/assets/icons/ready.svg
 create mode 100644 design/assets/icons/reason.svg
 create mode 100644 design/assets/icons/running.svg
 create mode 100644 design/assets/icons/search.svg
 create mode 100644 design/assets/icons/sync.svg
 create mode 100644 design/assets/icons/task.svg
 create mode 100644 design/components/core/Button.d.ts
 create mode 100644 design/components/core/Button.jsx
 create mode 100644 design/components/core/Button.prompt.md
 create mode 100644 design/components/core/ComplexityBadge.d.ts
 create mode 100644 design/components/core/ComplexityBadge.jsx
 create mode 100644 design/components/core/ComplexityBadge.prompt.md
 create mode 100644 design/components/core/CountBadge.d.ts
 create mode 100644 design/components/core/CountBadge.jsx
 create mode 100644 design/components/core/CountBadge.prompt.md
 create mode 100644 design/components/core/QuotaMeter.d.ts
 create mode 100644 design/components/core/QuotaMeter.jsx
 create mode 100644 design/components/core/QuotaMeter.prompt.md
 create mode 100644 design/components/core/SectionHead.d.ts
 create mode 100644 design/components/core/SectionHead.jsx
 create mode 100644 design/components/core/SectionHead.prompt.md
 create mode 100644 design/components/core/StatusChip.d.ts
 create mode 100644 design/components/core/StatusChip.jsx
 create mode 100644 design/components/core/StatusChip.prompt.md
 create mode 100644 design/components/core/core.card.html
 create mode 100644 design/components/forms/ComplexitySeg.d.ts
 create mode 100644 design/components/forms/ComplexitySeg.jsx
 create mode 100644 design/components/forms/ComplexitySeg.prompt.md
 create mode 100644 design/components/forms/Input.d.ts
 create mode 100644 design/components/forms/Input.jsx
 create mode 100644 design/components/forms/Input.prompt.md
 create mode 100644 design/components/forms/Select.d.ts
 create mode 100644 design/components/forms/Select.jsx
 create mode 100644 design/components/forms/Select.prompt.md
 create mode 100644 design/components/forms/Textarea.d.ts
 create mode 100644 design/components/forms/Textarea.jsx
 create mode 100644 design/components/forms/Textarea.prompt.md
 create mode 100644 design/components/forms/forms.card.html
 create mode 100644 design/components/surfaces/EventItem.d.ts
 create mode 100644 design/components/surfaces/EventItem.jsx
 create mode 100644 design/components/surfaces/EventItem.prompt.md
 create mode 100644 design/components/surfaces/GateCard.d.ts
 create mode 100644 design/components/surfaces/GateCard.jsx
 create mode 100644 design/components/surfaces/GateCard.prompt.md
 create mode 100644 design/components/surfaces/Panel.d.ts
 create mode 100644 design/components/surfaces/Panel.jsx
 create mode 100644 design/components/surfaces/Panel.prompt.md
 create mode 100644 design/components/surfaces/Timeline.d.ts
 create mode 100644 design/components/surfaces/Timeline.jsx
 create mode 100644 design/components/surfaces/Timeline.prompt.md
 create mode 100644 design/components/surfaces/Toast.d.ts
 create mode 100644 design/components/surfaces/Toast.jsx
 create mode 100644 design/components/surfaces/Toast.prompt.md
 create mode 100644 design/components/surfaces/surfaces.card.html
 create mode 100644 design/guidelines/brand-glyphs.card.html
 create mode 100644 design/guidelines/brand-logo.card.html
 create mode 100644 design/guidelines/brand-motion.card.html
 create mode 100644 design/guidelines/brand-texture.card.html
 create mode 100644 design/guidelines/colors-ink.card.html
 create mode 100644 design/guidelines/colors-light.card.html
 create mode 100644 design/guidelines/colors-signals.card.html
 create mode 100644 design/guidelines/colors-surfaces.card.html
 create mode 100644 design/guidelines/colors-tints.card.html
 create mode 100644 design/guidelines/spacing-borders.card.html
 create mode 100644 design/guidelines/spacing-glow.card.html
 create mode 100644 design/guidelines/spacing-radius.card.html
 create mode 100644 design/guidelines/spacing-scale.card.html
 create mode 100644 design/guidelines/type-family.card.html
 create mode 100644 design/guidelines/type-scale.card.html
 create mode 100644 design/guidelines/type-tracking.card.html
 create mode 100644 design/readme.md
 create mode 100644 design/styles.css
 create mode 100644 design/tokens/colors.css
 create mode 100644 design/tokens/effects.css
 create mode 100644 design/tokens/fonts.css
 create mode 100644 design/tokens/typography.css
 create mode 100644 design/ui_kits/console/ArchiveSection.jsx
 create mode 100644 design/ui_kits/console/EventPanel.jsx
 create mode 100644 design/ui_kits/console/GateSection.jsx
 create mode 100644 design/ui_kits/console/Sidebar.jsx
 create mode 100644 design/ui_kits/console/TaskTree.jsx
 create mode 100644 design/ui_kits/console/Topbar.jsx
 create mode 100644 design/ui_kits/console/data.js
 create mode 100644 design/ui_kits/console/i18n.js
 create mode 100644 design/ui_kits/console/index.html
 create mode 100644 design/ui_kits/console_mobile/MobileChrome.jsx
 create mode 100644 design/ui_kits/console_mobile/MobileViews.jsx
 create mode 100644 design/ui_kits/console_mobile/index.html

diff --git a/design/CLAUDE.md b/design/CLAUDE.md
new file mode 100644
index 0000000..484b57c
--- /dev/null
+++ b/design/CLAUDE.md
@@ -0,0 +1,76 @@
+# CLAUDE.md — Maestro Design System
+
+Engineering conventions for working in this design-system repo. Read alongside `README.md` (design foundations) and `SKILL.md` (the design language quick-start). The phosphor-console aesthetic and the rules in SKILL.md are binding — this file covers **how the code is organized and how to extend it correctly**.
+
+## What this repo is
+
+A compiler-backed design system. On every change an automated compiler reads the sources and regenerates three files — **never hand-edit these**:
+
+- `_ds_bundle.js` — the compiled component library, exposed as `window.MaestroDesignSystem_a6a290`
+- `_ds_manifest.json` — card / token / component index
+- `_adherence.oxlintrc.json` — lint rules
+
+The only fixed entry point is `styles.css` (root). It must stay a list of `@import` lines — never inline rules there.
+
+## Layout
+
+```
+styles.css                 # entry — @import only
+tokens/                    # CSS custom properties, one file per concern
+  colors.css               # base + signal + -dim + semantic aliases + [data-theme=light] scope
+  typography.css           # --mono family, size/leading/tracking scale
+  effects.css              # spacing, radii, borders, shadows, @keyframes
+  fonts.css                # Google Fonts @import (IBM Plex Mono + Noto Sans SC)
+guidelines/*.card.html     # specimen cards for the Design System tab
+components/<group>/        # core | forms | surfaces
+  Name.jsx                 # the component (named export)
+  Name.d.ts                # props contract (+ @startingPoint JSDoc if applicable)
+  Name.prompt.md           # one-line what/when + JSX example
+  <group>.card.html        # @dsCard showcase for the whole group
+ui_kits/console/           # desktop console recreation (composes components)
+ui_kits/console_mobile/    # 390px mobile recreation
+assets/icons/*.svg         # double-tone icon set
+```
+
+## Authoring a component (the contract the compiler enforces)
+
+A component is discovered when a directory holds **all three**: `Name.jsx` (PascalCase, with `export function Name(props)`), `Name.d.ts`, and ideally `Name.prompt.md`. To add or change one:
+
+1. Write `Name.jsx` — React only, no npm deps, no CSS-in-JS libs. Style via the CSS custom properties (`var(--…)`). Self-contained; siblings may import each other by relative path.
+2. Inject component CSS once via an `ensure<X>Css()` guard that appends a `<style id="…">` (see any existing component) — keeps class rules out of global scope and idempotent.
+3. Write `Name.d.ts` with the full props interface and JSDoc. Write `Name.prompt.md`: line 1 = what & when, then a small JSX example, then notable variants.
+4. Add the variant/state to the directory's `<group>.card.html` so it shows in the Design System tab. Load the bundle via `<script src="…/_ds_bundle.js">` and read `const { Name } = window.MaestroDesignSystem_a6a290`. **Never `<script src>` a `.jsx` directly** — the export is unreachable that way.
+5. Run `check_design_system` and fix anything it reports until clean.
+
+Do **not** write `_ds_bundle.js`, `_ds_manifest.json`, `_adherence.oxlintrc.json`, or a barrel `index.js` — all generated.
+
+## Styling rules
+
+- All color/spacing/radius/motion values come from tokens. If a value isn't a token yet and is reused, add it to the right `tokens/*.css` file rather than hardcoding.
+- New tokens: base value + a semantic alias when it has meaning (`--violet` + `--status-gate`). Theme overrides go under the `[data-theme="light"]` scope in `colors.css`.
+- Respect the five-signal-color discipline (SKILL.md). Approval = violet, MED = amber — do not collapse them.
+- Radii use `--radius-xs/sm/md/lg`; never `border-radius: 0` for new surfaces (zero-radius was retired in v1.1) and never a raw px circle except status dots.
+
+## UI-kit conventions (`ui_kits/console`)
+
+- `index.html` is the React entry (Babel-in-browser, pinned versions + integrity hashes — keep them). Each surface is its own `*.jsx` file attached to `window.MaestroKit*`; `data.js` holds the mock, `i18n.js` holds all strings.
+- **Every user-facing string goes through `t.<key>` in i18n.js across all 5 languages (zh/en/es/ja/fr).** Never hardcode display text in a component. Status/gate/event/autonomy labels are passed as props from `t`.
+- Persisted UI state (sidebar/event collapse, column widths, language, theme) uses `localStorage` keys prefixed `maestro-kit-`. Never clear keys you didn't write.
+- Flyout panels that live inside the `overflow:hidden` rails must use `position: fixed` with a measured anchor rect (see `GlobalConfigRow` / `AgentsRow` / `UserRow`) so they aren't clipped.
+- Three-column grid widths are drag-resizable with min/max clamps that guarantee a ≥480px center; collapsed rails are 52px. Keep that invariant if you touch the layout.
+
+## Icons
+
+Add new icons to `assets/icons/` on the same grid: 24×24, `fill="none"`, `stroke="currentColor"`, `stroke-width="2"`, round caps/joins. Two-tone semantic strokes use `var(--icon-accent, <signal fallback>)`. Don't add a third-party icon library. Brand glyphs (`▍ ▮ → ↳ · « »`) stay as mono characters, not SVG.
+
+## Before finishing any change
+
+1. `check_design_system` → resolve all reported issues.
+2. Verify the affected `ui_kits/*/index.html` renders with no console errors, in both themes and at least zh + en.
+3. Keep `README.md` INDEX and component lists in sync if you add/remove files.
+
+## Known caveats
+
+- Fonts are CDN-loaded; no woff2 binaries in-repo. For offline/production, drop woff2 into the project and convert `tokens/fonts.css` to local `@font-face`.
+- The logo is a 15×12 pixel-octopus drawn in canvas/CSS (see `guidelines/brand-logo.card.html`) — there is no logo image file.
+- `_ds_bundle.js` recompiles at end of turn; a freshly edited component may look stale in the preview until then.
diff --git a/design/SKILL.md b/design/SKILL.md
new file mode 100644
index 0000000..3d9c20a
--- /dev/null
+++ b/design/SKILL.md
@@ -0,0 +1,50 @@
+---
+name: maestro-design
+description: Generate well-branded interfaces, components, and assets for Maestro (多项目任务调度平台) — production code or throwaway prototypes/mocks. Contains the full design language (colors, type, fonts, motion, iconography), reusable React components, and two pixel-accurate UI kits (desktop console + mobile). Invoke for any Maestro UI, screen, slide, or asset work.
+user-invocable: true
+---
+
+# Maestro Design Skill
+
+Maestro is a local-first multi-project task-orchestration daemon. Its one product surface is the **Web 调度台 (console)** — a three-column board: project rail · approval-gates + task tree · event stream, refreshed over WebSocket, with in-page accept/reject of agent work. The brand metaphor is a **phosphor console**: a carbon-green CRT scheduling terminal, not a SaaS dashboard.
+
+## How to use this skill
+
+1. **Read `README.md` first** — it carries the full CONTENT, VISUAL, and ICONOGRAPHY foundations plus the file index. Treat it as the source of truth; this file is the quick-start.
+2. **Reuse, don't reinvent.** Components live in `components/{core,forms,surfaces}/` and compile into `_ds_bundle.js` under namespace `window.MaestroDesignSystem_a6a290`. The two UI kits in `ui_kits/` show exactly how to compose them.
+3. **Match the language exactly** — fonts, colors, motion, copy tone below. When unsure, open the matching `guidelines/*.card.html` specimen.
+4. For **throwaway artifacts** (slides, mocks, one-off prototypes): copy the assets/tokens you need and emit standalone HTML the user can open. For **production code**: read the rules here and the component `.prompt.md` / `.d.ts` files to become an expert, then write against the real tokens.
+5. If invoked with no brief, **ask what to build**, ask a few scoping questions, then act as an expert Maestro designer.
+
+## Non-negotiable rules (the "do / don't")
+
+- **One type family only:** `--mono` = IBM Plex Mono + Noto Sans SC fallback. There is no heading font. Build hierarchy from size (10–20px, body 13px), weight (400/500/600/700), and letter-spacing (.04em–.35em). Uppercase + wide tracking is the strongest hierarchy signal.
+- **Five signal colors, fixed meanings:** green = runnable/success/brand · **violet** = approval gate / awaiting decision · amber = warning / MED complexity / waiting-on-deps · red = failed/reject/Hard · cyan = executing/agent/link. Each has a `-dim` companion for borders and 5–8% tint fills. Never repurpose a signal color. (Approval was amber pre-v1.1 — it is violet now, to separate it from MED.)
+- **Glow, not shadow.** Ambient emphasis is a same-color `0 0 8–18px` glow (brand word, status dots, running chips, button hover). Black drop-shadows are reserved for floating layers only (popovers / modals / toasts). No inner shadows.
+- **Small, restrained radii:** badge/chip 3px, button/input 4px, panel/card 6px, modal/popover 10px (`--radius-xs/sm/md/lg`). True circles are status dots ONLY.
+- **Borders carry structure:** 1px `--line` / `--line-soft`; dashed = empty/placeholder/weak-group; 2px left solid = current/active/doc-block.
+- **Motion is fast and hard:** transitions .1–.12s; entrances use `rise` (5px up + fade, .18–.25s); attention via `blink` (steps(1) cursor) and `pulse` (.8–2.2s, for awaiting/executing). No bounce, no easing flourishes. Honor `prefers-reduced-motion`.
+- **No emoji.** Icons are the double-tone SVG set in `assets/icons/` (24×24, 2px round-cap, `currentColor` + `--icon-accent`). Brand glyphs `▍ ▮ → ↳ · — « »` stay as mono characters. Never pull in lucide/heroicons.
+- **Copy:** Chinese-first, terse telegraphic 2–4-char labels, `·` interpunct as the lead separator, English terms kept verbatim (HARD/MED/EASY, plan/spec/operations, agent, worktree, accept/reject). Address the user as 「你」; the system has no self-name. Required fields use a red `*`; placeholders give real examples (`/path/to/repo`, `npm test（可空）`).
+- **Full-screen surfaces** get the `body::before` ambience layer (1px scanlines + vignette, opacity .5 dark / .12 light) and `::selection` green-on-white.
+
+## Theming & i18n (build these in from the start)
+
+- **Dark is default; light via `<html data-theme="light">`.** Every color flows through CSS variables, so components adapt automatically — never hardcode a hex; use `var(--…)`.
+- **UI chrome is bilingual+ (zh/en/es/ja/fr)** in `ui_kits/console/i18n.js`. Status/gate/event labels are injected through component `label`/`kindLabel` props. User content (task titles, paths) is never translated.
+
+## Components (namespace `window.MaestroDesignSystem_a6a290`)
+
+- **core:** `Button` (variants default/solid/ghost/accept/reject, size xs) · `StatusChip` (16 状态机状态) · `ComplexityBadge` (hard/medium/easy) · `ComplexitySeg` (segmented picker, optional cyan `auto`/「智能」 = model-decides) · `CountBadge` (gate/ready/run/blocked, hover-expands) · `QuotaMeter` (LED bar, ≤80 cyan / >80 amber / >95 red) · `SectionHead` (▍ + uppercase title + action)
+- **forms:** `Input` · `Select` · `Textarea` (danger variant for reject reasons)
+- **surfaces:** `Panel` · `GateCard` (collapsible, double-click → fullscreen, accept/reject footer) · `Toast` (ok/err/warn) · `EventItem` (square color-coded marker) · `Timeline`
+
+Each component has a sibling `.prompt.md` (what/when + JSX example) and `.d.ts` (props contract). Read them before using.
+
+## UI kits (copy these patterns)
+
+- `ui_kits/console/` — full desktop console: resizable collapsible rails, project status dots + pending badges, global Agents/Settings/user flyouts, approval gates, filterable task tree with dependency jump + complexity re-pick, archive with paging + detail modal, quota meters, 5-language + light/dark toggles. `data.js` = mock, `i18n.js` = strings.
+- `ui_kits/console_mobile/` — 390px single column + bottom tab bar (tasks/gates/events/projects), ≥44px touch targets.
+
+## Files
+`styles.css` (entry, @import only) → `tokens/{colors,typography,effects,fonts}.css` · `guidelines/*.card.html` (specimens) · `assets/icons/*.svg` · component dirs · `ui_kits/*`. Fonts load from Google Fonts CDN (IBM Plex Mono + Noto Sans SC); no binaries shipped — supply woff2 for offline use.
diff --git a/design/_adherence.oxlintrc.json b/design/_adherence.oxlintrc.json
new file mode 100644
index 0000000..6490a3f
--- /dev/null
+++ b/design/_adherence.oxlintrc.json
@@ -0,0 +1,389 @@
+{
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "rules": {
+    "react/forbid-elements": [
+      "warn",
+      {
+        "forbid": []
+      }
+    ],
+    "no-restricted-imports": [
+      "warn",
+      {
+        "patterns": [
+          {
+            "group": [
+              "components/core/**",
+              "components/forms/**",
+              "components/surfaces/**",
+              "ui_kits/console/**",
+              "ui_kits/console_mobile/**"
+            ],
+            "message": "Import design-system components from 'index.js', not component internals."
+          }
+        ]
+      }
+    ],
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
+        "message": "Raw hex color — use a design-system color token via var()."
+      },
+      {
+        "selector": "Literal[value=/\\b\\d+px\\b/]",
+        "message": "Raw px value — use a design-system spacing token via var()."
+      },
+      {
+        "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:IBM Plex Mono|Noto Sans SC))/i]",
+        "message": "Font not provided by the design system. Available: IBM Plex Mono, Noto Sans SC."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|disabled|type|onClick|style|children|key|ref|className|style|children)$/]",
+        "message": "<Button> doesn't accept that prop. Declared props: variant, size, disabled, type, onClick, style, children."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|solid|ghost|accept|reject)$/]",
+        "message": "<Button> variant must be one of 'default' | 'solid' | 'ghost' | 'accept' | 'reject'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:xs)$/]",
+        "message": "<Button> size must be one of 'xs'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit)$/]",
+        "message": "<Button> type must be one of 'button' | 'submit'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ComplexityBadge'] > JSXAttribute > JSXIdentifier[name!=/^(?:complexity|key|ref|className|style|children)$/]",
+        "message": "<ComplexityBadge> doesn't accept that prop. Declared props: complexity."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ComplexityBadge'] > JSXAttribute[name.name='complexity'] > Literal[value!=/^(?:hard|medium|easy)$/]",
+        "message": "<ComplexityBadge> complexity must be one of 'hard' | 'medium' | 'easy'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ComplexitySeg'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|defaultValue|onChange|includeAuto|autoLabel|labels|key|ref|className|style|children)$/]",
+        "message": "<ComplexitySeg> doesn't accept that prop. Declared props: value, defaultValue, onChange, includeAuto, autoLabel, labels."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ComplexitySeg'] > JSXAttribute[name.name='value'] > Literal[value!=/^(?:hard|medium|easy|auto)$/]",
+        "message": "<ComplexitySeg> value must be one of 'hard' | 'medium' | 'easy' | 'auto'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ComplexitySeg'] > JSXAttribute[name.name='defaultValue'] > Literal[value!=/^(?:hard|medium|easy|auto)$/]",
+        "message": "<ComplexitySeg> defaultValue must be one of 'hard' | 'medium' | 'easy' | 'auto'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='CountBadge'] > JSXAttribute > JSXIdentifier[name!=/^(?:kind|count|label|title|key|ref|className|style|children)$/]",
+        "message": "<CountBadge> doesn't accept that prop. Declared props: kind, count, label, title."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='CountBadge'] > JSXAttribute[name.name='kind'] > Literal[value!=/^(?:gate|ready|run|blocked|total)$/]",
+        "message": "<CountBadge> kind must be one of 'gate' | 'ready' | 'run' | 'blocked' | 'total'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='EventItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:type|time|detail|label|key|ref|className|style|children)$/]",
+        "message": "<EventItem> doesn't accept that prop. Declared props: type, time, detail, label."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='EventItem'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:task\\.created|task\\.updated|status\\.changed|approval\\.requested|approval\\.granted|approval\\.rejected|run\\.started|run\\.finished|project\\.synced)$/]",
+        "message": "<EventItem> type must be one of 'task.created' | 'task.updated' | 'status.changed' | 'approval.requested' | 'approval.granted' | 'approval.rejected' | 'run.started' | 'run.finished' | 'project.synced'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='GateCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:gate|kindLabel|title|meta|docLabel|doc|actions|collapsed|foldable|onToggleFold|foldTitle|headerExtra|onHeaderDoubleClick|headerTitle|children|style|key|ref|className|style|children)$/]",
+        "message": "<GateCard> doesn't accept that prop. Declared props: gate, kindLabel, title, meta, docLabel, doc, actions, collapsed, foldable, onToggleFold, foldTitle, headerExtra, onHeaderDoubleClick, headerTitle, children, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='GateCard'] > JSXAttribute[name.name='gate'] > Literal[value!=/^(?:plan|spec|exec)$/]",
+        "message": "<GateCard> gate must be one of 'plan' | 'spec' | 'exec'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|required|type|placeholder|value|defaultValue|onChange|width|style|key|ref|className|style|children)$/]",
+        "message": "<Input> doesn't accept that prop. Declared props: label, required, type, placeholder, value, defaultValue, onChange, width, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:text|number)$/]",
+        "message": "<Input> type must be one of 'text' | 'number'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Panel'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|padding|style|key|ref|className|style|children)$/]",
+        "message": "<Panel> doesn't accept that prop. Declared props: children, padding, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='QuotaMeter'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|pct|detail|cells|style|key|ref|className|style|children)$/]",
+        "message": "<QuotaMeter> doesn't accept that prop. Declared props: label, pct, detail, cells, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='SectionHead'] > JSXAttribute > JSXIdentifier[name!=/^(?:mark|title|action|sticky|style|key|ref|className|style|children)$/]",
+        "message": "<SectionHead> doesn't accept that prop. Declared props: mark, title, action, sticky, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='SectionHead'] > JSXAttribute[name.name='mark'] > Literal[value!=/^(?:green|violet|amber|cyan)$/]",
+        "message": "<SectionHead> mark must be one of 'green' | 'violet' | 'amber' | 'cyan'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Select'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|required|options|value|defaultValue|onChange|style|key|ref|className|style|children)$/]",
+        "message": "<Select> doesn't accept that prop. Declared props: label, required, options, value, defaultValue, onChange, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='StatusChip'] > JSXAttribute > JSXIdentifier[name!=/^(?:status|label|key|ref|className|style|children)$/]",
+        "message": "<StatusChip> doesn't accept that prop. Declared props: status, label."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='StatusChip'] > JSXAttribute[name.name='status'] > Literal[value!=/^(?:init|analyzing|plan_review|decomposed|speccing|spec_review|ready|blocked|queued|executing|exec_review|failed|needs_attention|done|paused|cancelled)$/]",
+        "message": "<StatusChip> status must be one of 'init' | 'analyzing' | 'plan_review' | 'decomposed' | 'speccing' | 'spec_review' | 'ready' | 'blocked' | 'queued' | 'executing' | 'exec_review' | 'failed' | 'needs_attention' | 'done' | 'paused' | 'cancelled'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Textarea'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|required|placeholder|value|defaultValue|onChange|minHeight|danger|style|key|ref|className|style|children)$/]",
+        "message": "<Textarea> doesn't accept that prop. Declared props: label, required, placeholder, value, defaultValue, onChange, minHeight, danger, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='TimelineItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:time|text|who|color|key|ref|className|style|children)$/]",
+        "message": "<TimelineItem> doesn't accept that prop. Declared props: time, text, who, color."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute > JSXIdentifier[name!=/^(?:kind|children|style|key|ref|className|style|children)$/]",
+        "message": "<Toast> doesn't accept that prop. Declared props: kind, children, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute[name.name='kind'] > Literal[value!=/^(?:ok|err|warn)$/]",
+        "message": "<Toast> kind must be one of 'ok' | 'err' | 'warn'."
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/index.js"
+      ],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ],
+  "x-omelette": {
+    "components": {
+      "Button": {
+        "replaces": []
+      },
+      "ComplexityBadge": {
+        "replaces": []
+      },
+      "ComplexitySeg": {
+        "replaces": []
+      },
+      "CountBadge": {
+        "replaces": []
+      },
+      "EventItem": {
+        "replaces": []
+      },
+      "GateCard": {
+        "replaces": []
+      },
+      "Input": {
+        "replaces": []
+      },
+      "Panel": {
+        "replaces": []
+      },
+      "QuotaMeter": {
+        "replaces": []
+      },
+      "SectionHead": {
+        "replaces": []
+      },
+      "Select": {
+        "replaces": []
+      },
+      "StatusChip": {
+        "replaces": []
+      },
+      "Textarea": {
+        "replaces": []
+      },
+      "TimelineItem": {
+        "replaces": []
+      },
+      "Toast": {
+        "replaces": []
+      }
+    },
+    "tokens": [
+      "--accent",
+      "--accent-dim",
+      "--amber",
+      "--amber-dim",
+      "--bg",
+      "--bg-deep",
+      "--border-accent-w",
+      "--border-default",
+      "--border-soft",
+      "--border-w",
+      "--cyan",
+      "--cyan-dim",
+      "--ease-base",
+      "--ease-fast",
+      "--faint",
+      "--font-body",
+      "--glow-cyan",
+      "--glow-green",
+      "--glow-red",
+      "--glow-violet",
+      "--green",
+      "--green-dim",
+      "--ink",
+      "--leading-body",
+      "--leading-doc",
+      "--line",
+      "--line-soft",
+      "--mono",
+      "--muted",
+      "--pad-btn",
+      "--pad-btn-xs",
+      "--pad-card",
+      "--pad-chip",
+      "--pad-input",
+      "--panel",
+      "--panel-2",
+      "--radius-dot",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-sm",
+      "--radius-xs",
+      "--red",
+      "--red-dim",
+      "--shadow-modal",
+      "--shadow-pop",
+      "--shadow-toast",
+      "--space-1",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-7",
+      "--space-8",
+      "--space-9",
+      "--status-bad",
+      "--status-gate",
+      "--status-go",
+      "--status-run",
+      "--surface-card",
+      "--surface-page",
+      "--surface-rail",
+      "--surface-raised",
+      "--text-2xl",
+      "--text-2xs",
+      "--text-body",
+      "--text-disabled",
+      "--text-lg",
+      "--text-md",
+      "--text-num",
+      "--text-secondary",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--tracking-badge",
+      "--tracking-head",
+      "--tracking-label",
+      "--tracking-logo",
+      "--tracking-tight",
+      "--tracking-widest",
+      "--violet",
+      "--violet-dim"
+    ],
+    "tokenKinds": {
+      "--bg": "color",
+      "--bg-deep": "color",
+      "--panel": "color",
+      "--panel-2": "color",
+      "--line": "color",
+      "--line-soft": "color",
+      "--ink": "color",
+      "--muted": "color",
+      "--faint": "color",
+      "--green": "color",
+      "--green-dim": "color",
+      "--violet": "color",
+      "--violet-dim": "color",
+      "--amber": "color",
+      "--amber-dim": "color",
+      "--red": "color",
+      "--red-dim": "color",
+      "--cyan": "color",
+      "--cyan-dim": "color",
+      "--glow-green": "shadow",
+      "--glow-violet": "shadow",
+      "--glow-cyan": "shadow",
+      "--glow-red": "shadow",
+      "--surface-page": "color",
+      "--surface-rail": "color",
+      "--surface-card": "color",
+      "--surface-raised": "color",
+      "--text-body": "font",
+      "--text-secondary": "font",
+      "--text-disabled": "font",
+      "--border-default": "color",
+      "--border-soft": "color",
+      "--accent": "color",
+      "--accent-dim": "color",
+      "--status-go": "color",
+      "--status-gate": "color",
+      "--status-bad": "color",
+      "--status-run": "color",
+      "--mono": "font",
+      "--font-body": "font",
+      "--text-2xs": "font",
+      "--text-xs": "font",
+      "--text-sm": "font",
+      "--text-md": "font",
+      "--text-lg": "font",
+      "--text-xl": "font",
+      "--text-2xl": "font",
+      "--text-num": "font",
+      "--leading-body": "font",
+      "--leading-doc": "font",
+      "--tracking-tight": "font",
+      "--tracking-label": "font",
+      "--tracking-badge": "font",
+      "--tracking-head": "font",
+      "--tracking-logo": "font",
+      "--tracking-widest": "font",
+      "--radius-xs": "radius",
+      "--radius-sm": "radius",
+      "--radius-md": "radius",
+      "--radius-lg": "radius",
+      "--radius-dot": "radius",
+      "--border-w": "spacing",
+      "--border-accent-w": "spacing",
+      "--space-1": "spacing",
+      "--space-2": "spacing",
+      "--space-3": "spacing",
+      "--space-4": "spacing",
+      "--space-5": "spacing",
+      "--space-6": "spacing",
+      "--space-7": "spacing",
+      "--space-8": "spacing",
+      "--space-9": "spacing",
+      "--pad-btn": "spacing",
+      "--pad-btn-xs": "spacing",
+      "--pad-input": "spacing",
+      "--pad-chip": "spacing",
+      "--pad-card": "spacing",
+      "--shadow-pop": "shadow",
+      "--shadow-modal": "shadow",
+      "--shadow-toast": "shadow",
+      "--ease-fast": "other",
+      "--ease-base": "other"
+    },
+    "fontFamilies": [
+      "IBM Plex Mono",
+      "Noto Sans SC"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/design/_ds_bundle.js b/design/_ds_bundle.js
new file mode 100644
index 0000000..24b4c36
--- /dev/null
+++ b/design/_ds_bundle.js
@@ -0,0 +1,6186 @@
+/* @ds-bundle: {"format":3,"namespace":"MaestroDesignSystem_a6a290","components":[{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"ComplexityBadge","sourcePath":"components/core/ComplexityBadge.jsx"},{"name":"CountBadge","sourcePath":"components/core/CountBadge.jsx"},{"name":"QuotaMeter","sourcePath":"components/core/QuotaMeter.jsx"},{"name":"SectionHead","sourcePath":"components/core/SectionHead.jsx"},{"name":"StatusChip","sourcePath":"components/core/StatusChip.jsx"},{"name":"ComplexitySeg","sourcePath":"components/forms/ComplexitySeg.jsx"},{"name":"Input","sourcePath":"components/forms/Input.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Textarea","sourcePath":"components/forms/Textarea.jsx"},{"name":"EventItem","sourcePath":"components/surfaces/EventItem.jsx"},{"name":"GateCard","sourcePath":"components/surfaces/GateCard.jsx"},{"name":"GateStripe","sourcePath":"components/surfaces/GateCard.jsx"},{"name":"Panel","sourcePath":"components/surfaces/Panel.jsx"},{"name":"Timeline","sourcePath":"components/surfaces/Timeline.jsx"},{"name":"Toast","sourcePath":"components/surfaces/Toast.jsx"}],"sourceHashes":{"components/core/Button.jsx":"82f8de85de83","components/core/ComplexityBadge.jsx":"e71cc98656b7","components/core/CountBadge.jsx":"af4b823012b9","components/core/QuotaMeter.jsx":"117017318e01","components/core/SectionHead.jsx":"8981650002b2","components/core/StatusChip.jsx":"91c76c66e4e8","components/forms/ComplexitySeg.jsx":"f73ca6817593","components/forms/Input.jsx":"bfd5125bd134","components/forms/Select.jsx":"d92be9b2fe0e","components/forms/Textarea.jsx":"f3edac5339bb","components/surfaces/EventItem.jsx":"920a78b6471d","components/surfaces/GateCard.jsx":"b63adae94ec3","components/surfaces/Panel.jsx":"5b7d37e41487","components/surfaces/Timeline.jsx":"e1ba0c783e7f","components/surfaces/Toast.jsx":"5a232f396e93","ui_kits/console/ArchiveSection.jsx":"89fbdb79f86a","ui_kits/console/EventPanel.jsx":"52e17c973784","ui_kits/console/GateSection.jsx":"b204aa1c8247","ui_kits/console/Sidebar.jsx":"b620fd3f8eae","ui_kits/console/TaskTree.jsx":"91f34a1b00b2","ui_kits/console/Topbar.jsx":"0f5231451246","ui_kits/console/data.js":"60a42c054328","ui_kits/console/i18n.js":"275b4e5a8c43","ui_kits/console_mobile/MobileChrome.jsx":"9b8c0929ccd7","ui_kits/console_mobile/MobileViews.jsx":"1babdab6d1af"},"inlinedExternals":[],"unexposedExports":[{"name":"ensureFieldCss","sourcePath":"components/forms/Input.jsx"}]} */
+
+(() => {
+
+const __ds_ns = (window.MaestroDesignSystem_a6a290 = window.MaestroDesignSystem_a6a290 || {});
+
+const __ds_scope = {};
+
+(__ds_ns.__errors = __ds_ns.__errors || []);
+
+// components/core/Button.jsx
+try { (() => {
+const css = `
+.m-btn{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:transparent;color:var(--ink);border:1px solid var(--line);padding:6px 14px;cursor:pointer;transition:all .12s;border-radius:var(--radius-sm,4px);white-space:nowrap}
+.m-btn:hover{border-color:var(--muted);background:var(--panel-2)}
+.m-btn--xs{padding:2px 8px;font-size:11px}
+.m-btn--ghost{border-color:transparent;color:var(--muted)}
+.m-btn--ghost:hover{color:var(--green);border-color:var(--green-dim);background:transparent}
+.m-btn--solid{background:var(--green);color:var(--bg-deep);border-color:var(--green)}
+.m-btn--solid:hover{background:#79ec94;border-color:#79ec94;box-shadow:0 0 14px rgba(95,221,125,.35)}
+.m-btn--accept{border-color:var(--green-dim);color:var(--green)}
+.m-btn--accept:hover{background:var(--green);color:var(--bg-deep);border-color:var(--green);box-shadow:0 0 14px rgba(95,221,125,.3)}
+.m-btn--reject{border-color:var(--red-dim);color:var(--red)}
+.m-btn--reject:hover{background:var(--red);color:var(--bg-deep);border-color:var(--red);box-shadow:0 0 14px rgba(255,93,93,.3)}
+.m-btn:disabled{opacity:.4;cursor:not-allowed}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-btn-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-btn-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+function Button({
+  variant = 'default',
+  size,
+  disabled,
+  onClick,
+  type = 'button',
+  style,
+  children
+}) {
+  ensureCss();
+  const cls = ['m-btn'];
+  if (variant !== 'default') cls.push('m-btn--' + variant);
+  if (size === 'xs') cls.push('m-btn--xs');
+  return /*#__PURE__*/React.createElement("button", {
+    type: type,
+    className: cls.join(' '),
+    disabled: disabled,
+    onClick: onClick,
+    style: style
+  }, children);
+}
+Object.assign(__ds_scope, { Button });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Button.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/ComplexityBadge.jsx
+try { (() => {
+const css = `
+.m-cplx{flex:none;display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;padding:1px 7px;border:1px solid;border-radius:var(--radius-xs,3px)}
+.m-cplx--hard{color:var(--red);border-color:var(--red-dim);background:rgba(255,93,93,.07)}
+.m-cplx--medium{color:var(--amber);border-color:var(--amber-dim);background:rgba(240,180,41,.07)}
+.m-cplx--easy{color:var(--green);border-color:var(--green-dim);background:rgba(95,221,125,.07)}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-cplx-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-cplx-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+const LABEL = {
+  hard: 'HARD',
+  medium: 'MED',
+  easy: 'EASY'
+};
+function ComplexityBadge({
+  complexity = 'medium'
+}) {
+  ensureCss();
+  return /*#__PURE__*/React.createElement("span", {
+    className: 'm-cplx m-cplx--' + complexity
+  }, LABEL[complexity] || complexity);
+}
+Object.assign(__ds_scope, { ComplexityBadge });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/ComplexityBadge.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/CountBadge.jsx
+try { (() => {
+const css = `
+.m-bdg{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;line-height:1;letter-spacing:.08em;height:28px;padding:0 10px;cursor:default;white-space:nowrap;border-radius:var(--radius-sm,4px)}
+.m-bdg .m-bdg-ico{margin-right:5px;font-size:12px;line-height:1;font-family:var(--mono)}
+.m-bdg .m-bdg-n{font-weight:700}
+.m-bdg .m-bdg-label{max-width:0;opacity:0;overflow:hidden;transition:max-width .28s ease,opacity .22s ease,margin-left .28s ease}
+.m-bdg:hover .m-bdg-label{max-width:8em;opacity:1;margin-left:5px}
+.m-bdg--gate{color:var(--violet);border:1px solid var(--violet-dim)}
+.m-bdg--gate:not(.m-bdg--zero){animation:maestro-pulse 2.2s infinite}
+.m-bdg--ready{color:var(--green);border:1px solid var(--green-dim)}
+.m-bdg--run{color:var(--cyan);border:1px solid var(--cyan-dim)}
+.m-bdg--run:not(.m-bdg--zero) .m-bdg-ico{animation:maestro-pulse .9s infinite}
+.m-bdg--blocked{color:var(--amber);border:1px dashed var(--amber-dim)}
+.m-bdg--total{color:var(--ink);border:1px solid var(--line)}
+.m-bdg--zero{color:var(--faint);border-color:var(--line-soft);animation:none}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-bdg-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-bdg-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+const META = {
+  gate: {
+    ico: '⚠',
+    label: '项待审批'
+  },
+  ready: {
+    ico: '▸',
+    label: '待执行'
+  },
+  run: {
+    ico: '◉',
+    label: '执行中'
+  },
+  blocked: {
+    ico: '⛓',
+    label: '被阻塞'
+  },
+  total: {
+    ico: 'Σ',
+    label: '总量'
+  }
+};
+function CountBadge({
+  kind = 'ready',
+  count = 0,
+  label,
+  title
+}) {
+  ensureCss();
+  const m = META[kind] || META.ready;
+  const cls = 'm-bdg m-bdg--' + kind + (count === 0 ? ' m-bdg--zero' : '');
+  return /*#__PURE__*/React.createElement("span", {
+    className: cls,
+    title: title
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "m-bdg-ico"
+  }, m.ico), /*#__PURE__*/React.createElement("span", {
+    className: "m-bdg-n"
+  }, count), /*#__PURE__*/React.createElement("span", {
+    className: "m-bdg-label"
+  }, label || m.label));
+}
+Object.assign(__ds_scope, { CountBadge });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/CountBadge.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/QuotaMeter.jsx
+try { (() => {
+// 额度计量条：LED 分段 + 用量分级变色（≤80% 青 / >80% 琥珀 / >95% 红，与产品 .agent-usage 阈值对齐）
+function QuotaMeter({
+  label,
+  pct = 0,
+  detail,
+  cells = 16,
+  style
+}) {
+  const p = Math.max(0, Math.min(100, pct));
+  const filled = Math.round(p / 100 * cells);
+  const color = p > 95 ? 'var(--red)' : p > 80 ? 'var(--amber)' : 'var(--cyan)';
+  const glow = p > 95 ? 'rgba(255,93,93,.4)' : p > 80 ? 'rgba(240,180,41,.35)' : 'rgba(89,200,216,.4)';
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 8,
+      fontFamily: 'var(--mono)',
+      ...style
+    },
+    title: (label ? label + ' · ' : '') + p + '%' + (detail ? ' · ' + detail : '')
+  }, label ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: 'var(--muted)',
+      letterSpacing: '.08em',
+      flex: 'none'
+    }
+  }, label) : null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      gap: 2,
+      padding: 3,
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line-soft)',
+      borderRadius: 3
+    }
+  }, Array.from({
+    length: cells
+  }, (_, i) => /*#__PURE__*/React.createElement("span", {
+    key: i,
+    style: {
+      width: 4,
+      height: 9,
+      borderRadius: 1,
+      background: i < filled ? color : 'var(--panel-2)',
+      boxShadow: i < filled ? '0 0 5px ' + glow : 'none'
+    }
+  }))), /*#__PURE__*/React.createElement("b", {
+    style: {
+      fontSize: 12,
+      color
+    }
+  }, p, "%"), detail ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--faint)'
+    }
+  }, detail) : null);
+}
+Object.assign(__ds_scope, { QuotaMeter });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/QuotaMeter.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/SectionHead.jsx
+try { (() => {
+function SectionHead({
+  mark = 'green',
+  title,
+  action,
+  sticky,
+  style
+}) {
+  const markColor = {
+    green: 'var(--green)',
+    amber: 'var(--amber)',
+    cyan: 'var(--cyan)',
+    violet: 'var(--violet)'
+  }[mark] || 'var(--green)';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      fontFamily: 'var(--mono)',
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: '.22em',
+      color: 'var(--muted)',
+      textTransform: 'uppercase',
+      padding: '18px 0 10px',
+      ...(sticky ? {
+        position: 'sticky',
+        top: 0,
+        zIndex: 5,
+        background: 'linear-gradient(var(--bg) 75%, transparent)'
+      } : {}),
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: markColor,
+      flex: 'none'
+    }
+  }, "\u258D"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      whiteSpace: 'nowrap',
+      display: 'inline-flex',
+      alignItems: 'center',
+      minWidth: 0
+    }
+  }, title), action ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      flex: 'none'
+    }
+  }, action) : null);
+}
+Object.assign(__ds_scope, { SectionHead });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/SectionHead.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/StatusChip.jsx
+try { (() => {
+const STATUS_LABEL = {
+  init: '新建',
+  analyzing: '分析拆解中',
+  plan_review: '待确认拆解',
+  decomposed: '已拆解',
+  speccing: '写方案中',
+  spec_review: '待确认方案',
+  ready: '可执行',
+  blocked: '被依赖阻塞',
+  queued: '排队中',
+  executing: '执行中',
+  exec_review: '待审/合',
+  failed: '失败',
+  needs_attention: '需人工',
+  done: '完成',
+  paused: '暂停',
+  cancelled: '取消'
+};
+const STATUS_GROUP = {
+  init: 'idle',
+  analyzing: 'work',
+  speccing: 'work',
+  plan_review: 'gate',
+  spec_review: 'gate',
+  exec_review: 'gate',
+  decomposed: 'container',
+  ready: 'go',
+  queued: 'go',
+  executing: 'run',
+  blocked: 'hold',
+  paused: 'hold',
+  failed: 'bad',
+  needs_attention: 'bad',
+  done: 'done',
+  cancelled: 'dead'
+};
+const css = `
+.m-chip{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;padding:1px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;border-radius:var(--radius-xs,3px)}
+.m-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
+.m-chip--work{color:var(--cyan);border-color:var(--cyan-dim)}
+.m-chip--gate{color:var(--violet);border-color:var(--violet-dim)}
+.m-chip--gate::before{animation:maestro-pulse 1.4s infinite}
+.m-chip--container{color:#9bb4c8;border-color:#2c3c4a}
+.m-chip--go{color:var(--green);border-color:var(--green-dim)}
+.m-chip--run{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(89,200,216,.25)}
+.m-chip--run::before{animation:maestro-pulse .8s infinite}
+.m-chip--hold{color:var(--faint)}
+.m-chip--bad{color:var(--red);border-color:var(--red-dim)}
+.m-chip--bad::before{animation:maestro-pulse 1s infinite}
+.m-chip--done{color:var(--bg-deep);background:var(--green);border-color:var(--green);font-weight:700}
+.m-chip--dead{color:var(--faint);text-decoration:line-through}
+.m-chip--dead::before{background:var(--faint)}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-chip-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-chip-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+function StatusChip({
+  status = 'init',
+  label
+}) {
+  ensureCss();
+  const group = STATUS_GROUP[status] || 'idle';
+  return /*#__PURE__*/React.createElement("span", {
+    className: 'm-chip m-chip--' + group
+  }, label || STATUS_LABEL[status] || status);
+}
+Object.assign(__ds_scope, { StatusChip });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/StatusChip.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/ComplexitySeg.jsx
+try { (() => {
+const css = `
+.m-seg{display:inline-flex;border:1px solid var(--line);font-family:var(--mono);border-radius:var(--radius-sm,4px);overflow:hidden}
+.m-seg button{font-family:var(--mono);padding:7px 13px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--faint);background:transparent;border:none;border-radius:0}
+.m-seg button + button{border-left:1px solid var(--line)}
+.m-seg button.on-hard{background:var(--red-dim);color:var(--red)}
+.m-seg button.on-medium{background:var(--amber-dim);color:var(--amber)}
+.m-seg button.on-easy{background:var(--green-dim);color:var(--green)}
+.m-seg button.on-auto{background:var(--cyan-dim);color:var(--cyan)}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-seg-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-seg-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+const BASE_OPTS = [['hard', 'HARD'], ['medium', 'MEDIUM'], ['easy', 'EASY']];
+function ComplexitySeg({
+  value,
+  defaultValue = 'medium',
+  onChange,
+  includeAuto,
+  autoLabel = 'AUTO',
+  labels
+}) {
+  ensureCss();
+  const [inner, setInner] = React.useState(defaultValue);
+  const cur = value !== undefined ? value : inner;
+  const opts = includeAuto ? [...BASE_OPTS, ['auto', autoLabel]] : BASE_OPTS;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "m-seg"
+  }, opts.map(([v, lab]) => /*#__PURE__*/React.createElement("button", {
+    key: v,
+    type: "button",
+    className: cur === v ? 'on-' + v : '',
+    onClick: () => {
+      setInner(v);
+      if (onChange) onChange(v);
+    }
+  }, labels && labels[v] || lab)));
+}
+Object.assign(__ds_scope, { ComplexitySeg });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/ComplexitySeg.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Input.jsx
+try { (() => {
+const css = `
+.m-label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
+.m-input{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);padding:7px 10px;outline:none;transition:border-color .12s;border-radius:var(--radius-sm,4px)}
+.m-input:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)}
+.m-input::placeholder{color:var(--faint)}
+.m-req{color:var(--red)}
+`;
+function ensureFieldCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-field-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-field-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+function Input({
+  label,
+  required,
+  type = 'text',
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  width,
+  style
+}) {
+  ensureFieldCss();
+  const ctrl = /*#__PURE__*/React.createElement("input", {
+    className: "m-input",
+    type: type,
+    placeholder: placeholder,
+    value: value,
+    defaultValue: defaultValue,
+    style: {
+      width,
+      ...style
+    },
+    autoComplete: "off",
+    onChange: onChange ? e => onChange(e.target.value) : undefined,
+    readOnly: value !== undefined && !onChange
+  });
+  if (!label) return ctrl;
+  return /*#__PURE__*/React.createElement("label", {
+    className: "m-label"
+  }, /*#__PURE__*/React.createElement("span", null, label, required ? /*#__PURE__*/React.createElement("span", {
+    className: "m-req"
+  }, " *") : null), ctrl);
+}
+Object.assign(__ds_scope, { ensureFieldCss, Input });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Input.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Select.jsx
+try { (() => {
+const css = `
+.m-select{position:relative;display:inline-flex;flex-direction:column;min-width:120px}
+.m-select-trigger{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:7px 10px;cursor:pointer;outline:none;transition:border-color .12s;display:flex;align-items:center;gap:10px;text-align:left;width:100%}
+.m-select-trigger:hover{border-color:var(--muted)}
+.m-select-trigger.open,.m-select-trigger:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)}
+.m-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.m-select-caret{flex:none;font-size:8px;color:var(--faint);transition:transform .12s}
+.m-select-trigger.open .m-select-caret{transform:rotate(180deg)}
+.m-select-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:80;display:grid;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius-md,6px);padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.65);animation:maestro-rise .12s ease both;max-height:260px;overflow-y:auto}
+.m-select-opt{font-family:var(--mono);font-size:12.5px;text-align:left;background:transparent;color:var(--ink);border:none;border-radius:4px;padding:7px 10px 7px 8px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.m-select-opt:hover{background:var(--panel)}
+.m-select-opt.on{background:var(--panel-2);color:var(--green);font-weight:700}
+.m-select-mark{flex:none;width:8px;color:var(--green);font-size:10px}
+`;
+function ensureSelectCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-select-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-select-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+function Select({
+  label,
+  required,
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  style
+}) {
+  __ds_scope.ensureFieldCss();
+  ensureSelectCss();
+  const opts = options.map(o => typeof o === 'string' ? {
+    value: o,
+    label: o
+  } : o);
+  const [inner, setInner] = React.useState(defaultValue !== undefined ? defaultValue : opts[0] ? opts[0].value : '');
+  const cur = value !== undefined ? value : inner;
+  const curOpt = opts.find(o => o.value === cur);
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = e => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = e => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+  const pick = v => {
+    setInner(v);
+    setOpen(false);
+    if (onChange) onChange(v);
+  };
+  const ctrl = /*#__PURE__*/React.createElement("span", {
+    className: "m-select",
+    ref: ref,
+    style: style
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: 'm-select-trigger' + (open ? ' open' : ''),
+    onClick: () => setOpen(!open)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "m-select-value"
+  }, curOpt ? curOpt.label : cur), /*#__PURE__*/React.createElement("span", {
+    className: "m-select-caret"
+  }, "\u25BC")), open ? /*#__PURE__*/React.createElement("span", {
+    className: "m-select-menu"
+  }, opts.map(o => /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    key: o.value,
+    className: 'm-select-opt' + (o.value === cur ? ' on' : ''),
+    onClick: () => pick(o.value)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "m-select-mark"
+  }, o.value === cur ? '▍' : ''), o.label))) : null);
+  if (!label) return ctrl;
+  return /*#__PURE__*/React.createElement("label", {
+    className: "m-label"
+  }, /*#__PURE__*/React.createElement("span", null, label, required ? /*#__PURE__*/React.createElement("span", {
+    className: "m-req"
+  }, " *") : null), ctrl);
+}
+Object.assign(__ds_scope, { Select });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Select.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Textarea.jsx
+try { (() => {
+function Textarea({
+  label,
+  required,
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  minHeight = 72,
+  danger,
+  style
+}) {
+  __ds_scope.ensureFieldCss();
+  const ctrl = /*#__PURE__*/React.createElement("textarea", {
+    className: "m-input",
+    placeholder: placeholder,
+    value: value,
+    defaultValue: defaultValue,
+    style: {
+      resize: 'vertical',
+      minHeight,
+      width: '100%',
+      ...(danger ? {
+        borderColor: 'var(--red-dim)'
+      } : {}),
+      ...style
+    },
+    onChange: onChange ? e => onChange(e.target.value) : undefined,
+    readOnly: value !== undefined && !onChange
+  });
+  if (!label) return ctrl;
+  return /*#__PURE__*/React.createElement("label", {
+    className: "m-label",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("span", null, label, required ? /*#__PURE__*/React.createElement("span", {
+    className: "m-req"
+  }, " *") : null), ctrl);
+}
+Object.assign(__ds_scope, { Textarea });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Textarea.jsx", error: String((e && e.message) || e) }); }
+
+// components/surfaces/EventItem.jsx
+try { (() => {
+const css = `
+.m-ev{font-family:var(--mono);padding:7px 0 7px 12px;border-bottom:1px solid var(--line-soft);position:relative;font-size:11.5px;color:var(--ink);animation:maestro-rise .25s ease both;list-style:none}
+.m-ev::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--m-ev-c,var(--muted));border-radius:1.5px}
+.m-ev-head{display:flex;gap:8px;align-items:baseline}
+.m-ev-type{font-weight:600;color:var(--m-ev-c,var(--ink));letter-spacing:.04em}
+.m-ev-time{color:var(--faint);font-size:10.5px;margin-left:auto;flex:none}
+.m-ev-detail{color:var(--muted);margin-top:1px;word-break:break-word}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-ev-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-ev-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+const TYPE_META = {
+  'task.created': ['任务创建', 'var(--green)'],
+  'task.updated': ['任务更新', 'var(--muted)'],
+  'status.changed': ['状态变更', 'var(--cyan)'],
+  'approval.requested': ['请求审批', 'var(--violet)'],
+  'approval.granted': ['审批通过', 'var(--green)'],
+  'approval.rejected': ['审批驳回', 'var(--red)'],
+  'run.started': ['运行开始', 'var(--cyan)'],
+  'run.finished': ['运行结束', 'var(--cyan)'],
+  'project.synced': ['todo 同步', 'var(--green)']
+};
+function EventItem({
+  type = 'task.updated',
+  time,
+  detail,
+  label
+}) {
+  ensureCss();
+  const [lab, color] = TYPE_META[type] || [type, 'var(--muted)'];
+  return /*#__PURE__*/React.createElement("li", {
+    className: "m-ev",
+    style: {
+      '--m-ev-c': color
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "m-ev-head"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "m-ev-type"
+  }, label || lab), time ? /*#__PURE__*/React.createElement("span", {
+    className: "m-ev-time"
+  }, time) : null), detail ? /*#__PURE__*/React.createElement("div", {
+    className: "m-ev-detail"
+  }, detail) : null);
+}
+Object.assign(__ds_scope, { EventItem });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/surfaces/EventItem.jsx", error: String((e && e.message) || e) }); }
+
+// components/surfaces/GateCard.jsx
+try { (() => {
+const css = `
+.m-gate{background:var(--panel);border:1px solid var(--violet-dim);font-family:var(--mono);color:var(--ink);animation:maestro-rise .25s ease both;border-radius:var(--radius-md,6px);overflow:hidden}
+.m-gate-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
+.m-gate--collapsed .m-gate-head{border-bottom:none}
+.m-gate-hx{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
+.m-gate-fold{font-family:var(--mono);font-size:12px;line-height:1;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:3px 7px;transition:color .12s,border-color .12s}
+.m-gate-fold:hover{color:var(--violet);border-color:var(--violet-dim)}
+.m-gate-kind{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--bg);background:var(--violet);padding:2px 8px;border-radius:var(--radius-xs,3px)}
+.m-gate-title{font-weight:600;font-size:13px}
+.m-gate-body{padding:12px 14px;font-size:12.5px}
+.m-gate-actions{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-soft)}
+.m-gate-doclabel{font-size:10.5px;color:var(--muted);letter-spacing:.18em;margin:8px 0 4px}
+.m-gate-doclabel:first-child{margin-top:0}
+.m-gate-doc{background:var(--bg-deep);border:1px solid var(--line-soft);border-left:2px solid var(--green-dim);padding:10px 12px;font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;color:var(--ink);margin:0;border-radius:var(--radius-sm,4px)}
+.m-gate-stripe{height:5px;background:repeating-linear-gradient(-45deg,var(--violet) 0 9px,transparent 9px 18px);opacity:.8;border-radius:3px}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-gate-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-gate-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+const GATE_LABEL = {
+  plan: '拆解评审',
+  spec: '方案评审',
+  exec: '结果评审'
+};
+function GateCard({
+  gate = 'spec',
+  kindLabel,
+  title,
+  meta,
+  docLabel,
+  doc,
+  actions,
+  children,
+  style,
+  collapsed,
+  foldable,
+  onToggleFold,
+  foldTitle,
+  headerExtra,
+  onHeaderDoubleClick,
+  headerTitle
+}) {
+  ensureCss();
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'm-gate' + (collapsed ? ' m-gate--collapsed' : ''),
+    style: style,
+    onDoubleClick: onHeaderDoubleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "m-gate-head",
+    title: headerTitle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "m-gate-kind"
+  }, kindLabel || GATE_LABEL[gate] || gate), /*#__PURE__*/React.createElement("span", {
+    className: "m-gate-title"
+  }, title), meta ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: 'var(--muted)'
+    }
+  }, meta) : null, headerExtra || foldable ? /*#__PURE__*/React.createElement("span", {
+    className: "m-gate-hx"
+  }, headerExtra, foldable ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "m-gate-fold",
+    title: foldTitle,
+    onClick: e => {
+      e.stopPropagation();
+      onToggleFold && onToggleFold();
+    }
+  }, collapsed ? '▸' : '▾') : null) : null), !collapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "m-gate-body"
+  }, docLabel ? /*#__PURE__*/React.createElement("div", {
+    className: "m-gate-doclabel"
+  }, docLabel) : null, doc ? /*#__PURE__*/React.createElement("pre", {
+    className: "m-gate-doc"
+  }, doc) : null, children), actions ? /*#__PURE__*/React.createElement("div", {
+    className: "m-gate-actions"
+  }, actions) : null) : null);
+}
+function GateStripe() {
+  ensureCss();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "m-gate-stripe"
+  });
+}
+Object.assign(__ds_scope, { GateCard, GateStripe });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/surfaces/GateCard.jsx", error: String((e && e.message) || e) }); }
+
+// components/surfaces/Panel.jsx
+try { (() => {
+function Panel({
+  children,
+  padding = '14px',
+  style
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--panel)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-md, 6px)',
+      fontFamily: 'var(--mono)',
+      color: 'var(--ink)',
+      padding,
+      ...style
+    }
+  }, children);
+}
+Object.assign(__ds_scope, { Panel });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/surfaces/Panel.jsx", error: String((e && e.message) || e) }); }
+
+// components/surfaces/Timeline.jsx
+try { (() => {
+const css = `
+.m-tl{display:grid;font-family:var(--mono)}
+.m-tl-item{display:flex;gap:12px;align-items:baseline;padding:5px 0 5px 14px;font-size:12px;border-left:2px solid var(--line);position:relative;color:var(--ink)}
+.m-tl-item::before{content:'';position:absolute;left:-4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--m-tl-c,var(--muted))}
+.m-tl-time{flex:none;color:var(--faint);font-size:11px;min-width:130px}
+.m-tl-text{color:var(--ink)}
+.m-tl-who{color:var(--muted);font-size:11px}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-tl-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-tl-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+function Timeline({
+  items = [],
+  style
+}) {
+  ensureCss();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "m-tl",
+    style: style
+  }, items.map((it, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    className: "m-tl-item",
+    style: it.color ? {
+      '--m-tl-c': it.color
+    } : null
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "m-tl-time"
+  }, it.time), /*#__PURE__*/React.createElement("span", {
+    className: "m-tl-text"
+  }, it.text), it.who ? /*#__PURE__*/React.createElement("span", {
+    className: "m-tl-who"
+  }, it.who) : null)));
+}
+Object.assign(__ds_scope, { Timeline });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/surfaces/Timeline.jsx", error: String((e && e.message) || e) }); }
+
+// components/surfaces/Toast.jsx
+try { (() => {
+const css = `
+.m-toast{font-family:var(--mono);font-size:12.5px;background:var(--bg-deep);border:1px solid var(--line);color:var(--ink);padding:9px 16px;max-width:70vw;animation:m-toast-in .18s ease both;box-shadow:0 8px 30px rgba(0,0,0,.55);border-radius:var(--radius-md,6px)}
+.m-toast--err{border-color:var(--red);color:var(--red)}
+.m-toast--ok{border-color:var(--green-dim);color:var(--green)}
+.m-toast--warn{border-color:var(--amber-dim);color:var(--amber)}
+@keyframes m-toast-in{from{opacity:0;transform:translateY(8px)}}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-toast-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-toast-css';
+  s.textContent = css;
+  document.head.appendChild(s);
+}
+function Toast({
+  kind,
+  children,
+  style
+}) {
+  ensureCss();
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'm-toast' + (kind ? ' m-toast--' + kind : ''),
+    style: style
+  }, children);
+}
+Object.assign(__ds_scope, { Toast });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/surfaces/Toast.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/ArchiveSection.jsx
+try { (() => {
+// 已归档区（done / 取消，时间倒序分页）+ 归档详情模态
+function ArchiveRow({
+  item,
+  t,
+  onOpen
+}) {
+  const {
+    ComplexityBadge,
+    StatusChip
+  } = window.MaestroDesignSystem_a6a290;
+  const [hover, setHover] = React.useState(false);
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: () => onOpen(item),
+    title: t.archiveTip,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      cursor: 'pointer',
+      padding: '7px 12px',
+      fontSize: 12.5,
+      borderBottom: '1px dashed var(--line-soft)',
+      background: hover ? 'var(--panel)' : 'transparent'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--muted)',
+      fontWeight: 500,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, item.title, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--faint)',
+      fontSize: 10.5,
+      marginLeft: 6
+    }
+  }, item.id)), item.subs ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      fontSize: 10.5,
+      color: 'var(--faint)'
+    }
+  }, t.archiveSubs.replace('{n}', item.subs)) : null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 8
+    }
+  }), /*#__PURE__*/React.createElement(ComplexityBadge, {
+    complexity: item.cplx
+  }), /*#__PURE__*/React.createElement(StatusChip, {
+    status: item.status,
+    label: t.status[item.status]
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      fontSize: 11,
+      color: 'var(--faint)'
+    },
+    title: item.timeFull
+  }, item.time));
+}
+function SizeSelect({
+  size,
+  setSize,
+  t
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [hover, setHover] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = e => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    style: {
+      position: 'relative',
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setOpen(!open),
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      fontFamily: 'var(--mono)',
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: '.04em',
+      background: 'transparent',
+      color: hover || open ? 'var(--green)' : 'var(--muted)',
+      border: '1px solid ' + (hover || open ? 'var(--green-dim)' : 'var(--line)'),
+      borderRadius: 'var(--radius-sm, 4px)',
+      padding: '3px 9px',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 7,
+      transition: 'color .12s, border-color .12s'
+    }
+  }, t.perPage, " ", /*#__PURE__*/React.createElement("b", {
+    style: {
+      color: 'var(--green)',
+      fontSize: 11.5
+    }
+  }, size), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 8,
+      color: 'var(--faint)',
+      transform: open ? 'rotate(180deg)' : 'none',
+      transition: 'transform .12s'
+    }
+  }, "\u25BC")), open ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      bottom: 'calc(100% + 5px)',
+      right: 0,
+      zIndex: 60,
+      display: 'grid',
+      minWidth: '100%',
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-md, 6px)',
+      padding: 4,
+      boxShadow: '0 10px 30px rgba(0,0,0,.65)',
+      animation: 'maestro-rise .12s ease both'
+    }
+  }, [10, 20, 50, 100].map(n => {
+    const active = n === size;
+    return /*#__PURE__*/React.createElement("button", {
+      key: n,
+      onClick: () => {
+        setSize(n);
+        setOpen(false);
+      },
+      style: {
+        fontFamily: 'var(--mono)',
+        fontSize: 11.5,
+        fontWeight: active ? 700 : 400,
+        textAlign: 'left',
+        background: active ? 'var(--panel-2)' : 'transparent',
+        color: active ? 'var(--green)' : 'var(--ink)',
+        border: 'none',
+        borderRadius: 4,
+        padding: '6px 12px 6px 8px',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 7
+      },
+      onMouseEnter: e => {
+        if (!active) e.currentTarget.style.background = 'var(--panel)';
+      },
+      onMouseLeave: e => {
+        if (!active) e.currentTarget.style.background = 'transparent';
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: 8,
+        color: 'var(--green)',
+        fontSize: 10
+      }
+    }, active ? '▍' : ''), n);
+  })) : null);
+}
+function ArchivePager({
+  page,
+  pages,
+  size,
+  setPage,
+  setSize,
+  t
+}) {
+  const {
+    Button
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
+      padding: '10px 0',
+      justifyContent: 'center',
+      fontFamily: 'var(--mono)'
+    }
+  }, pages > 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    size: "xs",
+    disabled: page <= 1,
+    onClick: () => setPage(page - 1)
+  }, t.pagePrev), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: 'var(--muted)'
+    }
+  }, t.pageOf.replace('{a}', page).replace('{b}', pages)), /*#__PURE__*/React.createElement(Button, {
+    size: "xs",
+    disabled: page >= pages,
+    onClick: () => setPage(page + 1)
+  }, t.pageNext)) : null, /*#__PURE__*/React.createElement(SizeSelect, {
+    size: size,
+    setSize: setSize,
+    t: t
+  }));
+}
+function ArchiveSection({
+  items,
+  t,
+  onOpen
+}) {
+  const [page, setPage] = React.useState(1);
+  const [size, setSize] = React.useState(20);
+  if (!items.length) return null;
+  const pages = Math.max(1, Math.ceil(items.length / size));
+  const cur = Math.min(page, pages);
+  const slice = items.slice((cur - 1) * size, cur * size);
+  return /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginTop: 28,
+      opacity: .82
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      fontFamily: 'var(--mono)',
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: '.22em',
+      color: 'var(--muted)',
+      textTransform: 'uppercase',
+      padding: '18px 0 10px'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--faint)'
+    }
+  }, "\u25A3"), t.archive, " \xB7 ", items.length), /*#__PURE__*/React.createElement("div", null, slice.map(it => /*#__PURE__*/React.createElement(ArchiveRow, {
+    key: it.id,
+    item: it,
+    t: t,
+    onOpen: onOpen
+  }))), /*#__PURE__*/React.createElement(ArchivePager, {
+    page: cur,
+    pages: pages,
+    size: size,
+    setPage: setPage,
+    setSize: n => {
+      setSize(n);
+      setPage(1);
+    },
+    t: t
+  }));
+}
+
+// 归档详情模态（只读：属性 / 产出 / 执行历史 / 结果 / 审批 / 时间线）
+function ArchiveModal({
+  item,
+  t,
+  onClose
+}) {
+  const {
+    ComplexityBadge,
+    StatusChip,
+    Timeline
+  } = window.MaestroDesignSystem_a6a290;
+  React.useEffect(() => {
+    const onKey = e => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  if (!item) return null;
+  const d = item.detail || {};
+  const label = text => /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--muted)',
+      letterSpacing: '.18em',
+      margin: '14px 0 4px'
+    }
+  }, text);
+  const doc = text => /*#__PURE__*/React.createElement("pre", {
+    style: {
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line-soft)',
+      borderLeft: '2px solid var(--green-dim)',
+      borderRadius: 4,
+      padding: '10px 12px',
+      fontFamily: 'var(--mono)',
+      fontSize: 12.5,
+      lineHeight: 1.7,
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      margin: 0,
+      color: 'var(--ink)'
+    }
+  }, text);
+  const kvGrid = {
+    fontSize: 12,
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    gap: '3px 12px',
+    margin: 0
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 1100,
+      display: 'grid',
+      placeItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: onClose,
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: 'rgba(4,6,5,.78)',
+      backdropFilter: 'blur(2px)'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'min(860px, 94vw)',
+      maxHeight: '92vh',
+      background: 'var(--panel)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-lg, 10px)',
+      overflow: 'hidden',
+      boxShadow: '0 24px 64px rgba(0,0,0,.6)',
+      animation: 'maestro-rise .18s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      flexWrap: 'wrap',
+      padding: '12px 16px',
+      borderBottom: '1px solid var(--line)',
+      background: 'var(--panel-2)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      fontWeight: 700,
+      letterSpacing: '.18em',
+      color: 'var(--bg-deep)',
+      background: 'var(--muted)',
+      padding: '2px 8px',
+      borderRadius: 3
+    }
+  }, t.archiveDetail), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 700,
+      fontSize: 15
+    }
+  }, item.title), /*#__PURE__*/React.createElement(ComplexityBadge, {
+    complexity: item.cplx
+  }), /*#__PURE__*/React.createElement(StatusChip, {
+    status: item.status,
+    label: t.status[item.status]
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: onClose,
+    title: t.closeTip,
+    style: {
+      fontFamily: 'var(--mono)',
+      fontSize: 13,
+      background: 'transparent',
+      color: 'var(--muted)',
+      border: 'none',
+      cursor: 'pointer',
+      padding: '4px 8px'
+    }
+  }, "\u2715")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflowY: 'auto',
+      padding: '14px 20px 24px',
+      fontFamily: 'var(--mono)'
+    }
+  }, d.attrs ? /*#__PURE__*/React.createElement("dl", {
+    style: kvGrid
+  }, d.attrs.map(([k, v], i) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, /*#__PURE__*/React.createElement("dt", {
+    style: {
+      color: 'var(--muted)'
+    }
+  }, k), /*#__PURE__*/React.createElement("dd", {
+    style: {
+      margin: 0,
+      wordBreak: 'break-all'
+    }
+  }, v)))) : null, d.spec ? /*#__PURE__*/React.createElement(React.Fragment, null, label('SPEC · 方案'), doc(d.spec)) : null, d.ops ? /*#__PURE__*/React.createElement(React.Fragment, null, label('OPERATIONS · 操作'), doc(d.ops)) : null, d.runs && d.runs.length ? /*#__PURE__*/React.createElement(React.Fragment, null, label(t.runsLabel + '（' + d.runs.length + '）'), /*#__PURE__*/React.createElement("dl", {
+    style: kvGrid
+  }, d.runs.map((r, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, /*#__PURE__*/React.createElement("dt", {
+    style: {
+      color: 'var(--muted)'
+    }
+  }, r.kind, " \xB7 ", r.status), /*#__PURE__*/React.createElement("dd", {
+    style: {
+      margin: 0
+    }
+  }, r.span, r.ref ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'block',
+      color: 'var(--faint)',
+      fontSize: 10.5
+    }
+  }, r.ref) : null))))) : null, d.result ? /*#__PURE__*/React.createElement(React.Fragment, null, label(t.resultLabel), /*#__PURE__*/React.createElement("dl", {
+    style: kvGrid
+  }, /*#__PURE__*/React.createElement("dt", {
+    style: {
+      color: 'var(--muted)'
+    }
+  }, t.branch), /*#__PURE__*/React.createElement("dd", {
+    style: {
+      margin: 0
+    }
+  }, d.result.branch), /*#__PURE__*/React.createElement("dt", {
+    style: {
+      color: 'var(--muted)'
+    }
+  }, "commits"), /*#__PURE__*/React.createElement("dd", {
+    style: {
+      margin: 0
+    }
+  }, d.result.commits.join(' · ')), /*#__PURE__*/React.createElement("dt", {
+    style: {
+      color: 'var(--muted)'
+    }
+  }, "diff"), /*#__PURE__*/React.createElement("dd", {
+    style: {
+      margin: 0
+    }
+  }, d.result.diff))) : null, d.approvals && d.approvals.length ? /*#__PURE__*/React.createElement(React.Fragment, null, label(t.approvalsLabel), /*#__PURE__*/React.createElement("dl", {
+    style: kvGrid
+  }, d.approvals.map((a, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, /*#__PURE__*/React.createElement("dt", {
+    style: {
+      color: a.action === 'accept' ? 'var(--green)' : 'var(--red)',
+      fontWeight: 700
+    }
+  }, a.gate, " \xB7 ", a.action === 'accept' ? t.accepted : t.rejected), /*#__PURE__*/React.createElement("dd", {
+    style: {
+      margin: 0
+    }
+  }, t.approver, " ", a.actor, " \xB7 ", a.at, a.reason ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'block',
+      color: 'var(--amber)'
+    }
+  }, "\u21B3 ", a.reason) : null))))) : null, d.timeline && d.timeline.length ? /*#__PURE__*/React.createElement(React.Fragment, null, label(t.timelineLabel), /*#__PURE__*/React.createElement(Timeline, {
+    items: d.timeline
+  })) : null)));
+}
+Object.assign(window, {
+  MaestroKitArchiveSection: ArchiveSection,
+  MaestroKitArchiveModal: ArchiveModal
+});
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/ArchiveSection.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/EventPanel.jsx
+try { (() => {
+// 右栏：事件流 · 可折叠（折叠后仅图标）
+function MaestroEventIcon({
+  size = 16
+}) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      flex: 'none'
+    }
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "2 12 7 12 10 5 14 19 17 12 22 12"
+  }));
+}
+function maestroPanelToggleProps(onClick, title) {
+  return {
+    onClick,
+    title,
+    style: {
+      cursor: 'pointer',
+      flex: 'none',
+      fontFamily: 'var(--mono)',
+      fontSize: 12,
+      lineHeight: 1,
+      background: 'transparent',
+      color: 'var(--muted)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-sm, 4px)',
+      padding: '4px 7px'
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.color = 'var(--green)';
+      e.currentTarget.style.borderColor = 'var(--green-dim)';
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.color = 'var(--muted)';
+      e.currentTarget.style.borderColor = 'var(--line)';
+    }
+  };
+}
+function EventPanel({
+  events,
+  collapsed,
+  onToggleCollapse,
+  t
+}) {
+  const {
+    EventItem,
+    SectionHead
+  } = window.MaestroDesignSystem_a6a290;
+  if (collapsed) {
+    return /*#__PURE__*/React.createElement("aside", {
+      style: {
+        background: 'var(--bg-deep)',
+        borderLeft: '1px solid var(--line)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '16px 0',
+        gap: 14
+      }
+    }, /*#__PURE__*/React.createElement("button", maestroPanelToggleProps(onToggleCollapse, t.expandEvents), "\xAB"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--muted)'
+      },
+      title: t.events + ' · ' + events.length
+    }, /*#__PURE__*/React.createElement(MaestroEventIcon, {
+      size: 18
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 10.5,
+        color: 'var(--faint)',
+        letterSpacing: '.04em'
+      }
+    }, events.length));
+  }
+  return /*#__PURE__*/React.createElement("aside", {
+    style: {
+      background: 'var(--bg-deep)',
+      borderLeft: '1px solid var(--line)',
+      overflowY: 'auto',
+      paddingBottom: 30
+    }
+  }, /*#__PURE__*/React.createElement(SectionHead, {
+    title: t.events,
+    action: /*#__PURE__*/React.createElement("button", maestroPanelToggleProps(onToggleCollapse, t.collapseEvents), "\xBB"),
+    style: {
+      padding: '14px 14px 10px',
+      position: 'sticky',
+      top: 0,
+      zIndex: 5,
+      background: 'linear-gradient(var(--bg-deep) 75%, transparent)'
+    }
+  }), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      listStyle: 'none',
+      padding: '0 14px',
+      margin: 0
+    }
+  }, events.map((e, i) => /*#__PURE__*/React.createElement(EventItem, {
+    key: i,
+    type: e.type,
+    label: t.eventTypes[e.type],
+    time: e.time,
+    detail: e.detail
+  }))));
+}
+window.MaestroKitEventPanel = EventPanel;
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/EventPanel.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/GateSection.jsx
+try { (() => {
+// 全屏预览：读完整方案 + 就地裁决
+function GatePreview({
+  item,
+  t,
+  onDecide,
+  onClose
+}) {
+  const {
+    ComplexityBadge,
+    Button,
+    Textarea
+  } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(false);
+  const [reason, setReason] = React.useState('');
+  React.useEffect(() => {
+    const onKey = e => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  if (!item) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 1100,
+      display: 'grid',
+      placeItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: onClose,
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: 'rgba(4,6,5,.86)',
+      backdropFilter: 'blur(3px)'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'min(1080px, 94vw)',
+      height: '94vh',
+      background: 'var(--panel)',
+      border: '1px solid var(--violet-dim)',
+      borderRadius: 'var(--radius-lg, 10px)',
+      overflow: 'hidden',
+      boxShadow: '0 0 0 1px var(--line-soft), 0 24px 64px rgba(0,0,0,.6)',
+      animation: 'maestro-rise .18s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      flexWrap: 'wrap',
+      padding: '12px 16px',
+      borderBottom: '1px solid var(--line)',
+      background: 'var(--panel-2)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      fontWeight: 700,
+      letterSpacing: '.18em',
+      color: 'var(--bg)',
+      background: 'var(--violet)',
+      padding: '2px 8px',
+      borderRadius: 3
+    }
+  }, t.gates[item.gate]), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 700,
+      fontSize: 15
+    }
+  }, item.title), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: 'var(--muted)'
+    }
+  }, item.meta), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: onClose,
+    title: t.closeTip,
+    style: {
+      fontFamily: 'var(--mono)',
+      fontSize: 13,
+      background: 'transparent',
+      color: 'var(--muted)',
+      border: 'none',
+      cursor: 'pointer',
+      padding: '4px 8px'
+    }
+  }, "\u2715")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflowY: 'auto',
+      padding: '16px 20px 28px',
+      fontFamily: 'var(--mono)'
+    }
+  }, item.docLabel ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--muted)',
+      letterSpacing: '.18em',
+      marginBottom: 6
+    }
+  }, item.docLabel) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line-soft)',
+      borderLeft: '2px solid var(--green-dim)',
+      borderRadius: 4,
+      padding: '12px 16px',
+      fontSize: 13.5,
+      lineHeight: 1.7,
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      color: 'var(--ink)'
+    }
+  }, item.doc)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      flexWrap: 'wrap',
+      padding: '12px 16px',
+      borderTop: '1px solid var(--line)',
+      background: 'var(--panel-2)'
+    }
+  }, rejecting ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flexBasis: '100%',
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Textarea, {
+    danger: true,
+    placeholder: t.rejectPlaceholder,
+    minHeight: 56,
+    value: reason,
+    onChange: setReason
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "reject",
+    disabled: !reason.trim(),
+    onClick: () => {
+      onDecide(item, 'reject', reason);
+      onClose();
+    }
+  }, t.confirmReject), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      setRejecting(false);
+      setReason('');
+    }
+  }, t.cancel)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "accept",
+    onClick: () => {
+      onDecide(item, 'accept');
+      onClose();
+    }
+  }, t.accept), /*#__PURE__*/React.createElement(Button, {
+    variant: "reject",
+    onClick: () => setRejecting(true)
+  }, t.reject)))));
+}
+
+// 审批闸区：斜纹条 + GateCard 列表（accept/reject + 驳回必填理由）
+function GateSection({
+  approvals,
+  onDecide,
+  t
+}) {
+  const {
+    GateCard,
+    GateStripe,
+    Button,
+    Textarea,
+    SectionHead
+  } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(null);
+  const [reason, setReason] = React.useState('');
+  const [preview, setPreview] = React.useState(null);
+  const [folded, setFolded] = React.useState(() => new Set());
+  const toggleFold = id => setFolded(prev => {
+    const next = new Set(prev);
+    next.has(id) ? next.delete(id) : next.add(id);
+    return next;
+  });
+  if (approvals.length === 0) return null;
+  return /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginTop: 18
+    }
+  }, /*#__PURE__*/React.createElement(GateStripe, null), /*#__PURE__*/React.createElement(SectionHead, {
+    mark: "violet",
+    title: t.gateSection,
+    style: {
+      paddingTop: 12,
+      color: 'var(--violet)'
+    }
+  }), approvals.map(a => {
+    const isFolded = folded.has(a.id);
+    return /*#__PURE__*/React.createElement("div", {
+      key: a.id,
+      style: {
+        marginBottom: 12
+      }
+    }, /*#__PURE__*/React.createElement(GateCard, {
+      gate: a.gate,
+      kindLabel: t.gates[a.gate],
+      title: a.title,
+      meta: a.meta,
+      docLabel: a.docLabel,
+      doc: a.doc,
+      collapsed: isFolded,
+      foldable: true,
+      onToggleFold: () => toggleFold(a.id),
+      foldTitle: isFolded ? t.gateExpand : t.gateCollapse,
+      onHeaderDoubleClick: () => setPreview(a),
+      headerTitle: t.gateDblTip,
+      headerExtra: /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: t.fullRead,
+        onClick: () => setPreview(a),
+        style: {
+          fontFamily: 'var(--mono)',
+          fontSize: 12,
+          lineHeight: 1,
+          cursor: 'pointer',
+          background: 'transparent',
+          color: 'var(--muted)',
+          border: '1px solid var(--line)',
+          borderRadius: 'var(--radius-sm,4px)',
+          padding: '3px 7px'
+        },
+        onMouseEnter: e => {
+          e.currentTarget.style.color = 'var(--violet)';
+          e.currentTarget.style.borderColor = 'var(--violet-dim)';
+        },
+        onMouseLeave: e => {
+          e.currentTarget.style.color = 'var(--muted)';
+          e.currentTarget.style.borderColor = 'var(--line)';
+        }
+      }, "\u26F6"),
+      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+        variant: "accept",
+        onClick: () => onDecide(a, 'accept')
+      }, t.accept), /*#__PURE__*/React.createElement(Button, {
+        variant: "reject",
+        onClick: () => setRejecting(rejecting === a.id ? null : a.id)
+      }, t.reject), /*#__PURE__*/React.createElement("span", {
+        style: {
+          marginLeft: 'auto'
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        variant: "ghost",
+        size: "xs",
+        title: t.fullRead,
+        onClick: () => setPreview(a)
+      }, "\u26F6 ", t.fullRead)))
+    }, rejecting === a.id ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: 10,
+        alignItems: 'flex-start',
+        marginTop: 10
+      }
+    }, /*#__PURE__*/React.createElement(Textarea, {
+      danger: true,
+      placeholder: t.rejectPlaceholder,
+      minHeight: 56,
+      value: reason,
+      onChange: setReason
+    }), /*#__PURE__*/React.createElement(Button, {
+      variant: "reject",
+      disabled: !reason.trim(),
+      onClick: () => {
+        onDecide(a, 'reject', reason);
+        setRejecting(null);
+        setReason('');
+      }
+    }, t.confirmReject)) : null));
+  }), /*#__PURE__*/React.createElement(GatePreview, {
+    item: preview,
+    t: t,
+    onDecide: onDecide,
+    onClose: () => setPreview(null)
+  }));
+}
+window.MaestroKitGateSection = GateSection;
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/GateSection.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/Sidebar.jsx
+try { (() => {
+// 左栏：logo + 项目列表（git 图标）+ WS 状态脚 · 可折叠（折叠后仅图标）
+// 项目 logo：图片优先（原型无图），回退首字母色块 hsl(h 45% 60%)
+function ProjectLogo({
+  project,
+  size = 26
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      width: size,
+      height: size,
+      borderRadius: 5,
+      display: 'grid',
+      placeItems: 'center',
+      fontSize: size * 0.5,
+      fontWeight: 700,
+      color: '#0a0d0b',
+      background: 'hsl(' + (project.hue || 140) + ' 45% 60%)'
+    }
+  }, (project.name || '?')[0].toUpperCase());
+}
+function MaestroGitIcon({
+  size = 16
+}) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      flex: 'none'
+    }
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: "6",
+    y1: "3",
+    x2: "6",
+    y2: "15"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "18",
+    cy: "6",
+    r: "3"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "6",
+    cy: "18",
+    r: "3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18 9a9 9 0 0 1-9 9"
+  }));
+}
+
+// 像素章鱼 mark（折叠态 logo）
+function MaestroMark({
+  scale = 2.2
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const MAP = ['.....LLLLL.....', '...LLLLLLLLL...', '..GGGGGGGGGGG..', '..GGEEGGGEEGG..', '..GGEEGGGEEGG..', '..GGGGGGGGGGG..', '...GGGGGGGGG...', '...G..G.G..G...', '...G..G.G..G...', '..G...G.G...G..', '..D...D.D...D..', '.D...D...D...D.'];
+    const INK = {
+      L: '#79ec94',
+      G: '#5fdd7d',
+      D: '#2e6b3d',
+      E: '#070908'
+    };
+    const ctx = ref.current.getContext('2d');
+    MAP.forEach((row, y) => [...row].forEach((ch, x) => {
+      if (INK[ch]) {
+        ctx.fillStyle = INK[ch];
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }));
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: ref,
+    width: "15",
+    height: "12",
+    style: {
+      width: 15 * scale,
+      height: 12 * scale,
+      imageRendering: 'pixelated',
+      filter: 'drop-shadow(0 0 6px rgba(95,221,125,.4))'
+    }
+  });
+}
+
+// 项目状态：运行中(青脉冲) / 暂停(faint) / 阻塞(琥珀) / 空闲(muted)
+function projStateMeta(state, t) {
+  return {
+    running: {
+      color: 'var(--cyan)',
+      pulse: true,
+      label: t.projRunning
+    },
+    paused: {
+      color: 'var(--faint)',
+      pulse: false,
+      label: t.projPaused
+    },
+    blocked: {
+      color: 'var(--amber)',
+      pulse: true,
+      label: t.projBlocked
+    },
+    idle: {
+      color: 'var(--muted)',
+      pulse: false,
+      label: t.projIdle
+    }
+  }[state] || {
+    color: 'var(--muted)',
+    pulse: false,
+    label: t.projIdle
+  };
+}
+function ProjStatusDot({
+  meta,
+  size = 7
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      width: size,
+      height: size,
+      borderRadius: '50%',
+      background: meta.color,
+      boxShadow: '0 0 7px ' + meta.color,
+      animation: meta.pulse ? 'maestro-pulse 1.4s infinite' : 'none'
+    }
+  });
+}
+
+// 侧栏底部小行：图标 + 主文 + 副文（折叠时仅图标，hover 高亮）
+function SideRow({
+  icon,
+  label,
+  detail,
+  onClick,
+  collapsed,
+  title,
+  accent
+}) {
+  const interactive = !!onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    title: title || label,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      padding: collapsed ? '9px 0' : '8px 12px',
+      minHeight: 40,
+      justifyContent: collapsed ? 'center' : 'flex-start',
+      cursor: interactive ? 'pointer' : 'default',
+      transition: 'background .1s'
+    },
+    onMouseEnter: interactive ? e => {
+      e.currentTarget.style.background = 'var(--panel)';
+    } : undefined,
+    onMouseLeave: interactive ? e => {
+      e.currentTarget.style.background = 'transparent';
+    } : undefined
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      color: accent || 'var(--muted)',
+      display: 'inline-flex'
+    }
+  }, icon), !collapsed ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1,
+      minWidth: 0,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12,
+      fontWeight: 600,
+      color: 'var(--ink)',
+      whiteSpace: 'nowrap'
+    }
+  }, label), detail ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10,
+      color: 'var(--faint)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, detail) : null) : null, !collapsed && interactive ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      color: 'var(--faint)',
+      fontSize: 11
+    }
+  }, "\u203A") : null);
+}
+const sIco = {
+  width: 16,
+  height: 16,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  style: {
+    flex: 'none'
+  }
+};
+function IcoAgents() {
+  return /*#__PURE__*/React.createElement("svg", sIco, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "8"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3",
+    fill: "currentColor",
+    stroke: "none"
+  }));
+}
+function IcoGlobalCfg() {
+  return /*#__PURE__*/React.createElement("svg", sIco, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "3",
+    y1: "12",
+    x2: "21",
+    y2: "12"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 3a14 14 0 0 0 0 18a14 14 0 0 0 0-18"
+  }));
+}
+function UserRow({
+  user,
+  t,
+  collapsed
+}) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = e => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  const avatar = /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      width: 26,
+      height: 26,
+      borderRadius: '50%',
+      display: 'grid',
+      placeItems: 'center',
+      fontSize: 12,
+      fontWeight: 700,
+      color: '#0a0d0b',
+      background: 'hsl(' + (user.hue || 200) + ' 50% 62%)'
+    }
+  }, user.initial);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      position: 'relative',
+      borderTop: '1px solid var(--line-soft)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: () => setOpen(!open),
+    title: user.name + ' · ' + user.plan,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      padding: collapsed ? '10px 0' : '10px 12px',
+      justifyContent: collapsed ? 'center' : 'flex-start',
+      cursor: 'pointer',
+      transition: 'background .1s'
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.background = 'var(--panel)';
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.background = 'transparent';
+    }
+  }, avatar, !collapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1,
+      minWidth: 0,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      fontWeight: 600,
+      color: 'var(--ink)',
+      whiteSpace: 'nowrap'
+    }
+  }, user.name), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10,
+      color: 'var(--green)',
+      whiteSpace: 'nowrap'
+    }
+  }, user.plan)), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      color: 'var(--faint)',
+      fontSize: 11,
+      transform: open ? 'rotate(180deg)' : 'none',
+      transition: 'transform .12s'
+    }
+  }, "\u25B4")) : null), open ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: collapsed ? 'fixed' : 'absolute',
+      ...(collapsed ? {
+        left: 58,
+        bottom: 14,
+        width: 180
+      } : {
+        bottom: 'calc(100% + 4px)',
+        left: 12,
+        right: 12,
+        minWidth: 160
+      }),
+      zIndex: 80,
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-md,6px)',
+      boxShadow: '0 10px 30px rgba(0,0,0,.65)',
+      padding: 6,
+      animation: 'maestro-rise .12s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '6px 10px',
+      borderBottom: '1px solid var(--line-soft)',
+      marginBottom: 4
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      fontWeight: 600
+    }
+  }, user.name, " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--faint)',
+      fontWeight: 400
+    }
+  }, user.handle)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--green)',
+      marginTop: 2
+    }
+  }, t.gUserPlan, " \xB7 ", user.plan)), [t.gUserSettings, t.gUserSignOut].map((label, i) => /*#__PURE__*/React.createElement("div", {
+    key: label,
+    style: {
+      padding: '6px 10px',
+      fontSize: 12,
+      color: i === 1 ? 'var(--red)' : 'var(--ink)',
+      cursor: 'pointer',
+      borderRadius: 3
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.background = 'var(--panel-2)';
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.background = 'transparent';
+    }
+  }, label))) : null);
+}
+function fmtTokens(n) {
+  if (n >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
+  if (n >= 1e3) return Math.round(n / 1e3) + 'K';
+  return String(n);
+}
+function AgentsRow({
+  global,
+  summary,
+  t,
+  collapsed
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [pos, setPos] = React.useState(null);
+  const ref = React.useRef(null);
+  const rowRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = e => {
+      if (ref.current && !ref.current.contains(e.target) && rowRef.current && !rowRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  const toggle = () => {
+    if (!open && rowRef.current) {
+      const r = rowRef.current.getBoundingClientRect();
+      const W = 286;
+      const left = collapsed ? r.right + 6 : Math.min(r.left, window.innerWidth - W - 8);
+      setPos({
+        left,
+        bottom: window.innerHeight - r.top + 6,
+        width: W
+      });
+    }
+    setOpen(o => !o);
+  };
+  const maxTok = Math.max(...summary.byProject.map(p => p.tokens), 1);
+  const detail = t.gAgentsDetail.replace('{p}', global.runningProjects).replace('{P}', global.projectCount).replace('{a}', global.runningAgents);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: rowRef
+  }, /*#__PURE__*/React.createElement(SideRow, {
+    collapsed: collapsed,
+    icon: /*#__PURE__*/React.createElement(IcoAgents, null),
+    accent: "var(--cyan)",
+    onClick: toggle,
+    label: t.gAgents,
+    detail: detail,
+    title: t.gAgents + ' · ' + detail
+  })), open && pos ? /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      position: 'fixed',
+      left: pos.left,
+      bottom: pos.bottom,
+      width: pos.width,
+      zIndex: 1000,
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-md,6px)',
+      boxShadow: '0 12px 34px rgba(0,0,0,.7)',
+      padding: '12px 14px',
+      animation: 'maestro-rise .12s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 7,
+      fontSize: 10.5,
+      fontWeight: 700,
+      letterSpacing: '.18em',
+      color: 'var(--muted)',
+      marginBottom: 10
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--cyan)'
+    }
+  }, "\u258D"), t.gAgents.toUpperCase(), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      fontWeight: 400,
+      letterSpacing: '.04em',
+      color: 'var(--faint)'
+    }
+  }, t.apWeek)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      gap: 1,
+      background: 'var(--line-soft)',
+      border: '1px solid var(--line-soft)',
+      borderRadius: 4,
+      overflow: 'hidden',
+      marginBottom: 12
+    }
+  }, [[fmtTokens(summary.tokensWeek), t.apTokens, 'var(--cyan)'], ['$' + summary.costWeek.toFixed(1), t.apCost, 'var(--green)'], [summary.runsWeek, t.apRuns, 'var(--ink)'], [summary.activeNow + ' / ' + global.maxAgents, t.apActive, summary.activeNow ? 'var(--cyan)' : 'var(--faint)']].map(([v, k, c], i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      background: 'var(--bg-deep)',
+      padding: '8px 10px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 16,
+      fontWeight: 700,
+      color: c,
+      letterSpacing: '.02em'
+    }
+  }, v), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10,
+      color: 'var(--muted)',
+      letterSpacing: '.06em',
+      marginTop: 1
+    }
+  }, k)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10,
+      fontWeight: 700,
+      letterSpacing: '.18em',
+      color: 'var(--faint)',
+      marginBottom: 7
+    }
+  }, t.apPerProj), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gap: 9
+    }
+  }, summary.byProject.map(p => /*#__PURE__*/React.createElement("div", {
+    key: p.id
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      marginBottom: 3
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      width: 16,
+      height: 16,
+      borderRadius: 4,
+      display: 'grid',
+      placeItems: 'center',
+      fontSize: 9,
+      fontWeight: 700,
+      color: '#0a0d0b',
+      background: 'hsl(' + p.hue + ' 45% 60%)'
+    }
+  }, p.name[0].toUpperCase()), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12,
+      fontWeight: 600,
+      color: 'var(--ink)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, p.name), p.active > 0 ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 4,
+      fontSize: 9.5,
+      color: 'var(--cyan)',
+      border: '1px solid var(--cyan-dim)',
+      borderRadius: 3,
+      padding: '0 5px'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 5,
+      height: 5,
+      borderRadius: '50%',
+      background: 'var(--cyan)',
+      boxShadow: '0 0 6px var(--cyan)',
+      animation: 'maestro-pulse .9s infinite'
+    }
+  }), p.active) : /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      fontSize: 9.5,
+      color: 'var(--faint)'
+    }
+  }, t.apIdle), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      flex: 'none',
+      fontSize: 11,
+      fontWeight: 600,
+      color: 'var(--cyan)'
+    }
+  }, fmtTokens(p.tokens))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      paddingLeft: 24
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      height: 4,
+      background: 'var(--panel-2)',
+      borderRadius: 2,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'block',
+      height: '100%',
+      width: p.tokens / maxTok * 100 + '%',
+      background: 'var(--cyan)',
+      boxShadow: '0 0 6px rgba(89,200,216,.5)'
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      fontSize: 10,
+      color: 'var(--faint)'
+    }
+  }, p.runs, " ", t.apRuns)))))) : null);
+}
+function GlobalConfigRow({
+  global,
+  t,
+  collapsed
+}) {
+  const {
+    Select
+  } = window.MaestroDesignSystem_a6a290;
+  const [open, setOpen] = React.useState(false);
+  const [pos, setPos] = React.useState(null);
+  const ref = React.useRef(null);
+  const rowRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = e => {
+      if (ref.current && !ref.current.contains(e.target) && rowRef.current && !rowRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  const toggle = () => {
+    if (!open && rowRef.current) {
+      const r = rowRef.current.getBoundingClientRect();
+      const W = 250;
+      // 优先在行上方对齐左缘；折叠态贴侧栏右侧
+      const left = collapsed ? r.right + 6 : Math.min(r.left, window.innerWidth - W - 8);
+      setPos({
+        left,
+        bottom: window.innerHeight - r.top + 6,
+        width: W
+      });
+    }
+    setOpen(o => !o);
+  };
+  const stat = (k, v, accent) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
+      gap: 12,
+      padding: '5px 0',
+      borderBottom: '1px solid var(--line-soft)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--muted)',
+      letterSpacing: '.06em'
+    }
+  }, k), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12,
+      fontWeight: 600,
+      color: accent || 'var(--ink)'
+    }
+  }, v));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: rowRef
+  }, /*#__PURE__*/React.createElement(SideRow, {
+    collapsed: collapsed,
+    icon: /*#__PURE__*/React.createElement(IcoGlobalCfg, null),
+    onClick: toggle,
+    label: t.gConfig,
+    detail: t.gConfigDetail.replace('{n}', global.maxAgents).replace('{v}', global.daemon),
+    title: t.gConfig
+  })), open && pos ? /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      position: 'fixed',
+      left: pos.left,
+      bottom: pos.bottom,
+      width: pos.width,
+      zIndex: 1000,
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-md,6px)',
+      boxShadow: '0 12px 34px rgba(0,0,0,.7)',
+      padding: '12px 14px',
+      animation: 'maestro-rise .12s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 7,
+      fontSize: 10.5,
+      fontWeight: 700,
+      letterSpacing: '.18em',
+      color: 'var(--muted)',
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--cyan)'
+    }
+  }, "\u258D"), t.gConfig.toUpperCase()), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 12
+    }
+  }, stat('daemon', global.daemon, 'var(--green)'), stat('port', ':' + global.port), stat('uptime', global.uptime), stat(t.gAgents, global.runningAgents + ' / ' + global.maxAgents, 'var(--cyan)')), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+      fontSize: 11,
+      color: 'var(--muted)',
+      letterSpacing: '.08em'
+    }
+  }, /*#__PURE__*/React.createElement("span", null, t.maxConcurrency), /*#__PURE__*/React.createElement(Select, {
+    defaultValue: String(global.maxAgents),
+    style: {
+      width: '100%'
+    },
+    options: ['1', '2', '4', '6', '8'].map(n => ({
+      value: n,
+      label: n
+    }))
+  })), /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+      fontSize: 11,
+      color: 'var(--muted)',
+      letterSpacing: '.08em'
+    }
+  }, /*#__PURE__*/React.createElement("span", null, t.workMode), /*#__PURE__*/React.createElement(Select, {
+    defaultValue: global.autonomy,
+    style: {
+      width: '100%'
+    },
+    options: Object.entries(t.autonomy).map(([value, label]) => ({
+      value,
+      label
+    }))
+  })))) : null);
+}
+function Sidebar({
+  projects,
+  currentId,
+  onSelect,
+  onNewProject,
+  collapsed,
+  onToggleCollapse,
+  t,
+  global,
+  user,
+  summary,
+  onGlobalConfig
+}) {
+  const {
+    Button
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("aside", {
+    style: {
+      background: 'var(--bg-deep)',
+      borderRight: '1px solid var(--line)',
+      display: 'flex',
+      flexDirection: 'column',
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: collapsed ? '16px 0 12px' : '20px 16px 14px',
+      borderBottom: '1px solid var(--line-soft)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: collapsed ? 'center' : 'flex-start'
+    }
+  }, collapsed ? /*#__PURE__*/React.createElement(MaestroMark, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement(MaestroMark, {
+    scale: 1.8
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 19,
+      fontWeight: 700,
+      letterSpacing: '.28em',
+      color: 'var(--green)',
+      textShadow: '0 0 12px rgba(95,221,125,.45)'
+    }
+  }, "MAESTRO", /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 1,
+      animation: 'maestro-blink 1.1s steps(1) infinite'
+    }
+  }, "\u25AE"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 5,
+      fontSize: 9,
+      fontWeight: 600,
+      color: 'var(--muted)',
+      letterSpacing: '.2em',
+      lineHeight: 1.7,
+      textTransform: 'uppercase'
+    }
+  }, t.logoSub))), !collapsed ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: '.22em',
+      color: 'var(--muted)',
+      padding: '16px 16px 8px'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--green)'
+    }
+  }, "\u258D"), t.projects, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    size: "xs",
+    onClick: onNewProject
+  }, t.newProject))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 12
+    }
+  }), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      listStyle: 'none',
+      flex: 1,
+      margin: 0,
+      padding: 0
+    }
+  }, projects.map(p => {
+    const active = p.id === currentId;
+    const meta = projStateMeta(p.state, t);
+    return /*#__PURE__*/React.createElement("li", {
+      key: p.id,
+      onClick: () => onSelect(p.id),
+      title: p.name + ' · ' + meta.label + (p.pending ? ' · ' + t.projPendingTip.replace('{n}', p.pending) : ''),
+      style: {
+        position: 'relative',
+        padding: collapsed ? '10px 0' : '9px 14px 9px 12px',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 9,
+        justifyContent: collapsed ? 'center' : 'flex-start',
+        borderLeft: '2px solid ' + (active ? 'var(--green)' : 'transparent'),
+        background: active ? 'var(--panel-2)' : 'transparent',
+        color: active ? 'var(--green)' : 'var(--muted)'
+      },
+      onMouseEnter: e => {
+        if (!active) e.currentTarget.style.background = 'var(--panel)';
+      },
+      onMouseLeave: e => {
+        if (!active) e.currentTarget.style.background = 'transparent';
+      }
+    }, /*#__PURE__*/React.createElement(ProjectLogo, {
+      project: p,
+      size: collapsed ? 26 : 24
+    }), !collapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        minWidth: 0,
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 600,
+        fontSize: 13,
+        color: active ? 'var(--green)' : 'var(--ink)'
+      }
+    }, p.name), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 10.5,
+        color: 'var(--faint)',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }
+    }, p.path)), /*#__PURE__*/React.createElement("span", {
+      style: {
+        flex: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6
+      }
+    }, p.pending > 0 ? /*#__PURE__*/React.createElement("span", {
+      title: t.projPendingTip.replace('{n}', p.pending),
+      style: {
+        fontFamily: 'var(--mono)',
+        fontSize: 9.5,
+        fontWeight: 700,
+        lineHeight: '15px',
+        minWidth: 15,
+        height: 15,
+        textAlign: 'center',
+        padding: '0 4px',
+        color: 'var(--bg-deep)',
+        background: 'var(--violet)',
+        borderRadius: 8
+      }
+    }, p.pending) : null, /*#__PURE__*/React.createElement(ProjStatusDot, {
+      meta: meta
+    }))) : /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        top: 7,
+        right: 9,
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(ProjStatusDot, {
+      meta: meta,
+      size: p.pending > 0 ? 8 : 6
+    })));
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderTop: '1px solid var(--line-soft)'
+    }
+  }, /*#__PURE__*/React.createElement(AgentsRow, {
+    global: global,
+    summary: summary,
+    t: t,
+    collapsed: collapsed
+  }), /*#__PURE__*/React.createElement(GlobalConfigRow, {
+    global: global,
+    t: t,
+    collapsed: collapsed
+  })), /*#__PURE__*/React.createElement(UserRow, {
+    user: user,
+    t: t,
+    collapsed: collapsed
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderTop: '1px solid var(--line-soft)',
+      padding: collapsed ? '10px 0' : '10px 12px',
+      fontSize: 11,
+      color: 'var(--muted)',
+      display: 'flex',
+      alignItems: 'center',
+      gap: 7,
+      justifyContent: collapsed ? 'center' : 'flex-start'
+    }
+  }, !collapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 7,
+      height: 7,
+      borderRadius: '50%',
+      background: 'var(--green)',
+      boxShadow: '0 0 8px var(--green)',
+      display: 'inline-block',
+      flex: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }
+  }, t.connected)) : null, /*#__PURE__*/React.createElement("button", {
+    onClick: onToggleCollapse,
+    title: collapsed ? t.expandSide : t.collapseSide,
+    style: {
+      marginLeft: collapsed ? 0 : 'auto',
+      flex: 'none',
+      cursor: 'pointer',
+      fontFamily: 'var(--mono)',
+      fontSize: 12,
+      lineHeight: 1,
+      background: 'transparent',
+      color: 'var(--muted)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-sm, 4px)',
+      padding: '4px 7px'
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.color = 'var(--green)';
+      e.currentTarget.style.borderColor = 'var(--green-dim)';
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.color = 'var(--muted)';
+      e.currentTarget.style.borderColor = 'var(--line)';
+    }
+  }, collapsed ? '»' : '«')));
+}
+window.MaestroKitSidebar = Sidebar;
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/Sidebar.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/TaskTree.jsx
+try { (() => {
+// 任务树：筛选栏（搜索+复杂度+状态分组）+ 折叠层级 + 复杂度可点换档 + 依赖可视化跳转 + 展开详情；新建任务表单
+const KIT_FILTER_GROUPS = [['todo', ['init', 'ready', 'blocked']], ['doing', ['analyzing', 'speccing', 'queued', 'executing', 'decomposed']], ['gate', ['plan_review', 'spec_review', 'exec_review']], ['bad', ['failed', 'needs_attention']], ['hold', ['paused', 'cancelled']], ['done', ['done']]];
+function kitFlatten(tasks, map = new Map()) {
+  for (const tk of tasks) {
+    map.set(tk.id, tk);
+    if (tk.children) kitFlatten(tk.children, map);
+  }
+  return map;
+}
+
+// 复杂度徽章 + 点击换档下拉
+function CplxPicker({
+  task,
+  cplx,
+  onChange
+}) {
+  const {
+    ComplexityBadge
+  } = window.MaestroDesignSystem_a6a290;
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = e => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    style: {
+      position: 'relative',
+      display: 'inline-flex',
+      flex: 'none'
+    },
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setOpen(!open),
+    title: "\u70B9\u51FB\u8C03\u6574\u590D\u6742\u5EA6",
+    style: {
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: 'pointer',
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/React.createElement(ComplexityBadge, {
+    complexity: cplx
+  })), open ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: 'absolute',
+      top: 'calc(100% + 5px)',
+      right: 0,
+      zIndex: 60,
+      display: 'flex',
+      gap: 5,
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-md, 6px)',
+      padding: 6,
+      boxShadow: '0 10px 30px rgba(0,0,0,.65)',
+      animation: 'maestro-rise .12s ease both'
+    }
+  }, ['hard', 'medium', 'easy'].map(v => /*#__PURE__*/React.createElement("button", {
+    key: v,
+    onClick: () => {
+      onChange(task.id, v);
+      setOpen(false);
+    },
+    style: {
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: 'pointer',
+      display: 'inline-flex',
+      outline: v === cplx ? '1px solid currentColor' : 'none',
+      outlineOffset: 1,
+      filter: 'none'
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.filter = 'brightness(1.35)';
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.filter = 'none';
+    }
+  }, /*#__PURE__*/React.createElement(ComplexityBadge, {
+    complexity: v
+  })))) : null);
+}
+function FilterBar({
+  t,
+  kw,
+  setKw,
+  cplxSet,
+  toggleCplx,
+  statusSet,
+  toggleGroup,
+  matchCount,
+  filtering,
+  onClear
+}) {
+  const {
+    Button
+  } = window.MaestroDesignSystem_a6a290;
+  const chip = (on, color, dim, label, onClick) => /*#__PURE__*/React.createElement("button", {
+    key: label,
+    onClick: onClick,
+    style: {
+      fontFamily: 'var(--mono)',
+      fontSize: 10,
+      fontWeight: 700,
+      letterSpacing: '.1em',
+      background: on ? 'rgba(95,221,125,.08)' : 'transparent',
+      color: on ? color : 'var(--faint)',
+      border: '1px solid ' + (on ? dim : 'var(--line)'),
+      borderRadius: 3,
+      padding: '2px 8px',
+      cursor: 'pointer',
+      transition: 'all .1s',
+      whiteSpace: 'nowrap'
+    }
+  }, label);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--panel)',
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      padding: '8px 10px',
+      marginBottom: 12,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    value: kw,
+    onChange: e => setKw(e.target.value),
+    placeholder: t.searchPh,
+    autoComplete: "off",
+    style: {
+      fontFamily: 'var(--mono)',
+      fontSize: 12,
+      width: 190,
+      padding: '4px 9px',
+      background: 'var(--bg-deep)',
+      color: 'var(--ink)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-sm, 4px)',
+      outline: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      gap: 6
+    }
+  }, chip(cplxSet.has('hard'), 'var(--red)', 'var(--red-dim)', 'HARD', () => toggleCplx('hard')), chip(cplxSet.has('medium'), 'var(--amber)', 'var(--amber-dim)', 'MED', () => toggleCplx('medium')), chip(cplxSet.has('easy'), 'var(--green)', 'var(--green-dim)', 'EASY', () => toggleCplx('easy'))), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1
+    }
+  }), filtering ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: 'var(--amber)',
+      letterSpacing: '.08em'
+    }
+  }, t.matchCount.replace('{n}', matchCount)) : null, filtering ? /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    size: "xs",
+    onClick: onClear
+  }, t.clearFilter) : null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, KIT_FILTER_GROUPS.map(([g, sts]) => {
+    const on = sts.every(s => statusSet.has(s));
+    const part = !on && sts.some(s => statusSet.has(s));
+    return /*#__PURE__*/React.createElement("button", {
+      key: g,
+      onClick: () => toggleGroup(sts),
+      style: {
+        fontFamily: 'var(--mono)',
+        fontSize: 10.5,
+        letterSpacing: '.04em',
+        background: 'transparent',
+        color: on ? 'var(--green)' : part ? 'var(--amber)' : 'var(--muted)',
+        border: '1px dashed ' + (on ? 'var(--green-dim)' : part ? 'var(--amber-dim)' : 'var(--line-soft)'),
+        borderRadius: 3,
+        padding: '2px 9px',
+        cursor: 'pointer',
+        whiteSpace: 'nowrap'
+      }
+    }, t.fgroups[g]);
+  })));
+}
+function TaskRow({
+  task,
+  depth,
+  ctx,
+  expandedId,
+  setExpandedId,
+  openIds,
+  toggleOpen,
+  t,
+  byId,
+  cplxOf,
+  onChangeCplx,
+  flashId,
+  onJump,
+  visibleSet
+}) {
+  const {
+    StatusChip
+  } = window.MaestroDesignSystem_a6a290;
+  const kids = (task.children || []).filter(k => !visibleSet || visibleSet.has(k.id));
+  const open = openIds.has(task.id) || !!visibleSet; // 筛选时自动展开可见节点
+  const expanded = expandedId === task.id;
+  const isGate = ['plan_review', 'spec_review', 'exec_review'].includes(task.status);
+  const flashing = flashId === task.id;
+  const [hover, setHover] = React.useState(false);
+  return /*#__PURE__*/React.createElement("div", {
+    style: depth > 0 ? {
+      borderLeft: '1px solid var(--line-soft)'
+    } : null
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: () => setExpandedId(expanded ? null : task.id),
+    "data-task-id": task.id,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      padding: '8px 10px 8px 6px',
+      borderBottom: '1px solid var(--line-soft)',
+      cursor: 'pointer',
+      transition: 'background .1s',
+      background: expanded ? 'var(--panel-2)' : isGate ? 'rgba(184,142,245,.05)' : hover ? 'var(--panel)' : 'transparent',
+      opacity: ctx ? .55 : 1,
+      animation: flashing ? 'maestro-locate 1.8s ease-out' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: e => {
+      e.stopPropagation();
+      if (kids.length) toggleOpen(task.id);
+    },
+    style: {
+      width: 16,
+      flex: 'none',
+      textAlign: 'center',
+      fontSize: 10,
+      userSelect: 'none',
+      color: kids.length ? open ? 'var(--green)' : 'var(--muted)' : 'var(--faint)',
+      transform: kids.length && open ? 'rotate(90deg)' : 'none',
+      transition: 'transform .12s'
+    }
+  }, kids.length ? '▶' : '·'), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 500,
+      color: ctx ? 'var(--muted)' : 'var(--ink)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, task.title, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--faint)',
+      fontSize: 10.5,
+      marginLeft: 6
+    }
+  }, task.id)), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 8
+    }
+  }), task.deps ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      fontSize: 10.5,
+      letterSpacing: '.06em',
+      color: 'var(--amber)',
+      border: '1px dashed var(--amber-dim)',
+      borderRadius: 3,
+      padding: '1px 7px',
+      lineHeight: 1.5,
+      whiteSpace: 'nowrap'
+    }
+  }, t.depsWait, " ", task.deps.length) : null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      color: task.prio === 'P0' ? 'var(--amber)' : 'var(--faint)',
+      flex: 'none'
+    }
+  }, task.prio), /*#__PURE__*/React.createElement(CplxPicker, {
+    task: task,
+    cplx: cplxOf(task),
+    onChange: onChangeCplx
+  }), /*#__PURE__*/React.createElement(StatusChip, {
+    status: task.status,
+    label: t.status[task.status]
+  })), expanded ? /*#__PURE__*/React.createElement(TaskDetail, {
+    task: task,
+    t: t,
+    byId: byId,
+    onJump: onJump
+  }) : null, kids.length && open ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: 22
+    }
+  }, kids.map(k => /*#__PURE__*/React.createElement(TaskRow, {
+    key: k.id,
+    task: k,
+    depth: depth + 1,
+    ctx: visibleSet ? visibleSet.ctx.has(k.id) : false,
+    expandedId: expandedId,
+    setExpandedId: setExpandedId,
+    openIds: openIds,
+    toggleOpen: toggleOpen,
+    t: t,
+    byId: byId,
+    cplxOf: cplxOf,
+    onChangeCplx: onChangeCplx,
+    flashId: flashId,
+    onJump: onJump,
+    visibleSet: visibleSet
+  }))) : null);
+}
+function TaskDetail({
+  task,
+  t,
+  byId,
+  onJump
+}) {
+  const label = task.doc ? t.specLabel : task.ops ? t.opsLabel : null;
+  const text = task.doc || task.ops;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--panel)',
+      borderBottom: '1px solid var(--line)',
+      borderLeft: '2px solid var(--green-dim)',
+      padding: '14px 16px',
+      animation: 'maestro-rise .2s ease both',
+      display: 'grid',
+      gap: 14
+    }
+  }, label ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--muted)',
+      letterSpacing: '.18em',
+      marginBottom: 4
+    }
+  }, label), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line-soft)',
+      borderLeft: '2px solid var(--green-dim)',
+      padding: '10px 12px',
+      fontFamily: 'var(--mono)',
+      fontSize: 12.5,
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      margin: 0,
+      color: 'var(--ink)',
+      borderRadius: 4
+    }
+  }, text)) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px 12px',
+      border: '1px dashed var(--line)',
+      borderRadius: 6,
+      color: 'var(--faint)',
+      fontStyle: 'italic',
+      fontSize: 12
+    }
+  }, t.pendingDoc), task.deps && task.deps.length ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--muted)',
+      letterSpacing: '.18em',
+      marginBottom: 4
+    }
+  }, t.depsLabel), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gap: 4
+    }
+  }, task.deps.map(d => {
+    const dep = byId.get(d);
+    const ok = dep && dep.status === 'done';
+    return /*#__PURE__*/React.createElement("div", {
+      key: d,
+      onClick: e => {
+        e.stopPropagation();
+        onJump(d);
+      },
+      title: "\u2192",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        fontSize: 12,
+        padding: '4px 10px',
+        cursor: 'pointer',
+        background: 'var(--bg-deep)',
+        border: '1px solid var(--line-soft)',
+        borderRadius: 4,
+        borderLeft: '2px solid ' + (ok ? 'var(--green-dim)' : 'var(--amber-dim)'),
+        transition: 'border-color .12s, background .12s'
+      },
+      onMouseEnter: e => {
+        e.currentTarget.style.background = 'var(--panel-2)';
+      },
+      onMouseLeave: e => {
+        e.currentTarget.style.background = 'var(--bg-deep)';
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: ok ? 'var(--green)' : 'var(--amber)',
+        flex: 'none'
+      }
+    }, ok ? '✓' : '◌'), /*#__PURE__*/React.createElement("span", {
+      style: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }
+    }, dep ? dep.title : d), /*#__PURE__*/React.createElement("span", {
+      style: {
+        flex: 'none',
+        fontSize: 10.5,
+        color: ok ? 'var(--green)' : 'var(--amber)'
+      }
+    }, ok ? t.depDone : t.depWait), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginLeft: 'auto',
+        color: 'var(--faint)',
+        fontSize: 12
+      }
+    }, "\u2192"));
+  }))) : null);
+}
+function NewTaskPanel({
+  tasks,
+  onCancel,
+  onCreate,
+  t
+}) {
+  const {
+    Button,
+    Input,
+    Select,
+    ComplexitySeg
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("form", {
+    style: {
+      background: 'var(--panel)',
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      padding: 14,
+      marginBottom: 14
+    },
+    onSubmit: e => {
+      e.preventDefault();
+      onCreate();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 14,
+      alignItems: 'flex-end',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 320,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: t.titleLabel,
+    required: true,
+    placeholder: t.titlePlaceholder,
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 14,
+      alignItems: 'flex-end',
+      flexWrap: 'wrap',
+      marginTop: 12
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+      fontSize: 11,
+      color: 'var(--muted)',
+      letterSpacing: '.08em'
+    }
+  }, /*#__PURE__*/React.createElement("span", null, t.complexity, " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--red)'
+    }
+  }, "*")), /*#__PURE__*/React.createElement(ComplexitySeg, {
+    defaultValue: "auto",
+    includeAuto: true,
+    autoLabel: t.cplxAuto
+  })), /*#__PURE__*/React.createElement(Select, {
+    label: t.priority,
+    defaultValue: "1",
+    options: [{
+      value: '0',
+      label: t.p0
+    }, {
+      value: '1',
+      label: t.p1
+    }, {
+      value: '2',
+      label: t.p2
+    }]
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 240,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: t.parentTask,
+    style: {
+      width: '100%'
+    },
+    options: [{
+      value: '',
+      label: t.topLevel
+    }, ...tasks.map(tk => ({
+      value: tk.id,
+      label: tk.title
+    }))]
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10,
+      justifyContent: 'flex-end',
+      marginTop: 14,
+      paddingTop: 12,
+      borderTop: '1px solid var(--line-soft)'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onCancel
+  }, t.cancel), /*#__PURE__*/React.createElement(Button, {
+    variant: "solid",
+    type: "submit"
+  }, t.create)));
+}
+function TaskSection({
+  tasks,
+  onToast,
+  t
+}) {
+  const {
+    Button,
+    SectionHead
+  } = window.MaestroDesignSystem_a6a290;
+  const [expandedId, setExpandedId] = React.useState(null);
+  const [openIds, setOpenIds] = React.useState(() => new Set(['t1']));
+  const [showNew, setShowNew] = React.useState(false);
+  const [kw, setKw] = React.useState('');
+  const [cplxSet, setCplxSet] = React.useState(() => new Set());
+  const [statusSet, setStatusSet] = React.useState(() => new Set());
+  const [cplxOverride, setCplxOverride] = React.useState({});
+  const [flashId, setFlashId] = React.useState(null);
+  const byId = React.useMemo(() => kitFlatten(tasks), [tasks]);
+  const cplxOf = task => cplxOverride[task.id] || task.cplx;
+  const onChangeCplx = (id, v) => setCplxOverride(m => ({
+    ...m,
+    [id]: v
+  }));
+  const toggleOpen = id => setOpenIds(prev => {
+    const next = new Set(prev);
+    next.has(id) ? next.delete(id) : next.add(id);
+    return next;
+  });
+  const toggleCplx = v => setCplxSet(prev => {
+    const next = new Set(prev);
+    next.has(v) ? next.delete(v) : next.add(v);
+    return next;
+  });
+  const toggleGroup = sts => setStatusSet(prev => {
+    const next = new Set(prev);
+    const allOn = sts.every(s => next.has(s));
+    for (const s of sts) allOn ? next.delete(s) : next.add(s);
+    return next;
+  });
+  const filtering = kw.trim() !== '' || cplxSet.size > 0 || statusSet.size > 0;
+  const clearFilters = () => {
+    setKw('');
+    setCplxSet(new Set());
+    setStatusSet(new Set());
+  };
+
+  // 筛选：自身命中 → 显示；祖先链作为上下文淡显；命中节点的父级自动展开
+  const {
+    visibleSet,
+    matchCount
+  } = React.useMemo(() => {
+    if (!filtering) return {
+      visibleSet: null,
+      matchCount: 0
+    };
+    const matches = tk => (kw.trim() === '' || tk.title.toLowerCase().includes(kw.trim().toLowerCase())) && (cplxSet.size === 0 || cplxSet.has(cplxOverride[tk.id] || tk.cplx)) && (statusSet.size === 0 || statusSet.has(tk.status));
+    const vis = new Set();
+    const ctx = new Set();
+    let count = 0;
+    const walk = tk => {
+      let childHit = false;
+      for (const k of tk.children || []) if (walk(k)) childHit = true;
+      const hit = matches(tk);
+      if (hit) count++;
+      if (hit || childHit) {
+        vis.add(tk.id);
+        if (!hit) ctx.add(tk.id);
+        return true;
+      }
+      return false;
+    };
+    for (const tk of tasks) walk(tk);
+    const set = new Set(vis);
+    set.ctx = ctx;
+    return {
+      visibleSet: set,
+      matchCount: count
+    };
+  }, [filtering, kw, cplxSet, statusSet, tasks, cplxOverride]);
+
+  // 依赖跳转：展开所有祖先 + flash 定位
+  const onJump = id => {
+    setOpenIds(prev => {
+      const next = new Set(prev);
+      const openAncestors = (list, chain) => {
+        for (const tk of list) {
+          if (tk.id === id) {
+            for (const c of chain) next.add(c);
+            return true;
+          }
+          if (tk.children && openAncestors(tk.children, [...chain, tk.id])) return true;
+        }
+        return false;
+      };
+      openAncestors(tasks, []);
+      return next;
+    });
+    setFlashId(null);
+    requestAnimationFrame(() => setFlashId(id));
+    setTimeout(() => setFlashId(f => f === id ? null : f), 1900);
+  };
+  const roots = visibleSet ? tasks.filter(tk => visibleSet.has(tk.id)) : tasks;
+  return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(SectionHead, {
+    title: t.taskSection,
+    sticky: true,
+    action: /*#__PURE__*/React.createElement(Button, {
+      variant: "ghost",
+      size: "xs",
+      onClick: () => setShowNew(!showNew)
+    }, t.newTask)
+  }), showNew ? /*#__PURE__*/React.createElement(NewTaskPanel, {
+    tasks: tasks,
+    t: t,
+    onCancel: () => setShowNew(false),
+    onCreate: () => {
+      setShowNew(false);
+      onToast('ok', t.toastCreated);
+    }
+  }) : null, /*#__PURE__*/React.createElement(FilterBar, {
+    t: t,
+    kw: kw,
+    setKw: setKw,
+    cplxSet: cplxSet,
+    toggleCplx: toggleCplx,
+    statusSet: statusSet,
+    toggleGroup: toggleGroup,
+    matchCount: matchCount,
+    filtering: filtering,
+    onClear: clearFilters
+  }), /*#__PURE__*/React.createElement("div", null, roots.map(tk => /*#__PURE__*/React.createElement(TaskRow, {
+    key: tk.id,
+    task: tk,
+    depth: 0,
+    ctx: visibleSet ? visibleSet.ctx.has(tk.id) : false,
+    expandedId: expandedId,
+    setExpandedId: setExpandedId,
+    openIds: openIds,
+    toggleOpen: toggleOpen,
+    t: t,
+    byId: byId,
+    cplxOf: cplxOf,
+    onChangeCplx: onChangeCplx,
+    flashId: flashId,
+    onJump: onJump,
+    visibleSet: visibleSet
+  }))));
+}
+Object.assign(window, {
+  MaestroKitTaskSection: TaskSection
+});
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/TaskTree.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/Topbar.jsx
+try { (() => {
+// 顶栏动作：默认仅图标，hover 横向展开文字（与 CountBadge 同交互）
+const maestroIconActionCss = `
+.m-iact{display:inline-flex;align-items:center;height:28px;padding:0 8px;cursor:pointer;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;line-height:1;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm,4px);transition:color .12s,border-color .12s;white-space:nowrap}
+.m-iact svg{flex:none}
+.m-iact .m-iact-label{max-width:0;opacity:0;overflow:hidden;transition:max-width .28s ease,opacity .22s ease,margin-left .28s ease}
+.m-iact:hover{color:var(--green);border-color:var(--green-dim)}
+.m-iact:hover .m-iact-label{max-width:9em;opacity:1;margin-left:6px}
+`;
+function ensureIconActionCss() {
+  if (document.getElementById('m-iact-css')) return;
+  const s = document.createElement('style');
+  s.id = 'm-iact-css';
+  s.textContent = maestroIconActionCss;
+  document.head.appendChild(s);
+}
+function IconAction({
+  icon,
+  label,
+  title,
+  onClick
+}) {
+  ensureIconActionCss();
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "m-iact",
+    title: title || label,
+    onClick: onClick
+  }, icon, /*#__PURE__*/React.createElement("span", {
+    className: "m-iact-label"
+  }, label));
+}
+const iactSvg = {
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  width: 14,
+  height: 14,
+  viewBox: '0 0 24 24'
+};
+function SyncIcon() {
+  return /*#__PURE__*/React.createElement("svg", iactSvg, /*#__PURE__*/React.createElement("path", {
+    d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21 3v5h-5"
+  }));
+}
+function ConfigIcon() {
+  return /*#__PURE__*/React.createElement("svg", iactSvg, /*#__PURE__*/React.createElement("line", {
+    x1: "3",
+    y1: "6",
+    x2: "12",
+    y2: "6"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "15",
+    cy: "6",
+    r: "2.5"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "18",
+    y1: "6",
+    x2: "21",
+    y2: "6"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "3",
+    y1: "12",
+    x2: "5.5",
+    y2: "12"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "9",
+    cy: "12",
+    r: "2.5"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12.5",
+    y1: "12",
+    x2: "21",
+    y2: "12"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "3",
+    y1: "18",
+    x2: "12.5",
+    y2: "18"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "16",
+    cy: "18",
+    r: "2.5"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "19.5",
+    y1: "18",
+    x2: "21",
+    y2: "18"
+  }));
+}
+function LangIcon() {
+  return /*#__PURE__*/React.createElement("svg", iactSvg, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 12h18"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18"
+  }));
+}
+function SunIcon() {
+  return /*#__PURE__*/React.createElement("svg", iactSvg, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "4"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    y1: "2",
+    x2: "12",
+    y2: "5"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    y1: "19",
+    x2: "12",
+    y2: "22"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "2",
+    y1: "12",
+    x2: "5",
+    y2: "12"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "19",
+    y1: "12",
+    x2: "22",
+    y2: "12"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "4.9",
+    y1: "4.9",
+    x2: "7",
+    y2: "7"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "17",
+    y1: "17",
+    x2: "19.1",
+    y2: "19.1"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "4.9",
+    y1: "19.1",
+    x2: "7",
+    y2: "17"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "17",
+    y1: "7",
+    x2: "19.1",
+    y2: "4.9"
+  }));
+}
+function MoonIcon() {
+  return /*#__PURE__*/React.createElement("svg", iactSvg, /*#__PURE__*/React.createElement("path", {
+    d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"
+  }));
+}
+function LangMenu({
+  t,
+  lang,
+  onSelectLang
+}) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = e => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    style: {
+      position: 'relative',
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: () => setOpen(!open)
+  }, /*#__PURE__*/React.createElement(IconAction, {
+    icon: /*#__PURE__*/React.createElement(LangIcon, null),
+    label: t.lang,
+    title: t.langTip,
+    onClick: () => {}
+  })), open ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 'calc(100% + 5px)',
+      right: 0,
+      zIndex: 60,
+      display: 'grid',
+      minWidth: 124,
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line)',
+      borderRadius: 'var(--radius-md, 6px)',
+      padding: 4,
+      boxShadow: '0 10px 30px rgba(0,0,0,.65)',
+      animation: 'maestro-rise .12s ease both'
+    }
+  }, window.MAESTRO_LANGS.map(([code, name]) => {
+    const active = code === lang;
+    return /*#__PURE__*/React.createElement("button", {
+      key: code,
+      onClick: () => {
+        onSelectLang(code);
+        setOpen(false);
+      },
+      style: {
+        fontFamily: 'var(--mono)',
+        fontSize: 12,
+        textAlign: 'left',
+        background: active ? 'var(--panel-2)' : 'transparent',
+        color: active ? 'var(--green)' : 'var(--ink)',
+        border: 'none',
+        borderRadius: 4,
+        padding: '7px 10px',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      },
+      onMouseEnter: e => {
+        if (!active) e.currentTarget.style.background = 'var(--panel)';
+      },
+      onMouseLeave: e => {
+        if (!active) e.currentTarget.style.background = 'transparent';
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: 12,
+        color: 'var(--green)'
+      }
+    }, active ? '▍' : ''), name);
+  })) : null);
+}
+
+// 顶栏：项目标题 + 徽章组 + 动作；agent 执行面板
+function Topbar({
+  project,
+  counts,
+  onSync,
+  onToggleConfig,
+  t,
+  theme,
+  onToggleTheme,
+  lang,
+  onSelectLang
+}) {
+  const {
+    Button,
+    CountBadge
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("header", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-end',
+      gap: 14,
+      padding: '22px 0 14px',
+      borderBottom: '1px solid var(--line)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: 0,
+      flex: '0 1 auto'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 20,
+      fontWeight: 700,
+      letterSpacing: '.04em',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, project.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: 'var(--muted)',
+      marginTop: 2,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    title: project.path + ' · ' + project.branch + ' · ' + project.autonomy
+  }, project.path, " \xB7 ", project.branch, " \xB7 ", project.autonomy)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement(CountBadge, {
+    kind: "gate",
+    count: counts.gate,
+    label: t.badgeGate,
+    title: t.badgeGateTip
+  }), /*#__PURE__*/React.createElement(CountBadge, {
+    kind: "ready",
+    count: counts.ready,
+    label: t.badgeReady,
+    title: t.badgeReadyTip
+  }), /*#__PURE__*/React.createElement(CountBadge, {
+    kind: "run",
+    count: counts.run,
+    label: t.badgeRun,
+    title: t.badgeRunTip
+  }), /*#__PURE__*/React.createElement(CountBadge, {
+    kind: "blocked",
+    count: counts.blocked,
+    label: t.badgeBlocked,
+    title: t.badgeBlockedTip
+  }), /*#__PURE__*/React.createElement(CountBadge, {
+    kind: "total",
+    count: counts.total,
+    label: t.badgeTotal,
+    title: t.badgeTotalTip
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement(IconAction, {
+    icon: /*#__PURE__*/React.createElement(ConfigIcon, null),
+    label: t.config,
+    title: t.configTip,
+    onClick: onToggleConfig
+  }), /*#__PURE__*/React.createElement(LangMenu, {
+    t: t,
+    lang: lang,
+    onSelectLang: onSelectLang
+  }), /*#__PURE__*/React.createElement(IconAction, {
+    icon: theme === 'light' ? /*#__PURE__*/React.createElement(MoonIcon, null) : /*#__PURE__*/React.createElement(SunIcon, null),
+    label: theme === 'light' ? t.themeDark : t.themeLight,
+    title: t.themeTip,
+    onClick: onToggleTheme
+  })));
+}
+function ConfigPanel({
+  project,
+  onSave,
+  onClose,
+  onSync,
+  t
+}) {
+  const {
+    Button,
+    Input,
+    Select
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("section", {
+    style: {
+      position: 'relative',
+      zIndex: 30,
+      background: 'var(--panel)',
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      padding: '12px 14px',
+      marginTop: 12,
+      animation: 'maestro-rise .18s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 14,
+      alignItems: 'flex-end',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: t.maxConcurrency,
+    type: "number",
+    defaultValue: String(project.concurrency),
+    width: 76
+  }), /*#__PURE__*/React.createElement(Select, {
+    label: t.workMode,
+    defaultValue: project.autonomy,
+    options: Object.entries(t.autonomy).map(([value, label]) => ({
+      value,
+      label
+    }))
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: 'var(--muted)',
+      letterSpacing: '.06em',
+      marginLeft: 'auto',
+      paddingBottom: 7
+    }
+  }, t.current, "\uFF1A", project.concurrency, " \xB7 ", project.autonomy), /*#__PURE__*/React.createElement(Button, {
+    variant: "solid",
+    onClick: onSave
+  }, t.save), /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose
+  }, t.collapse)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 14,
+      alignItems: 'flex-end',
+      flexWrap: 'wrap',
+      marginTop: 12
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 2,
+      minWidth: 220,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: t.projLogo,
+    placeholder: t.logoPh,
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 170,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: t.verifyCmd,
+    placeholder: t.verifyPh,
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 170,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: t.model,
+    placeholder: t.modelPh,
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      marginTop: 10,
+      paddingTop: 10,
+      borderTop: '1px dashed var(--line-soft)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--faint)',
+      letterSpacing: '.06em'
+    }
+  }, t.lastSync), /*#__PURE__*/React.createElement(Button, {
+    size: "xs",
+    onClick: onSync
+  }, "\u27F3 ", t.sync)));
+}
+function AgentSection({
+  agents,
+  quota,
+  t
+}) {
+  const {
+    SectionHead,
+    QuotaMeter
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(SectionHead, {
+    mark: "cyan",
+    title: /*#__PURE__*/React.createElement("span", null, t.agentSection, /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--cyan)',
+        letterSpacing: '.08em',
+        marginLeft: 8
+      }
+    }, agents.length > 0 ? agents.length : '')),
+    sticky: true
+  }), quota ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 22,
+      flexWrap: 'wrap',
+      fontFamily: 'var(--mono)',
+      margin: '0 0 12px'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      fontWeight: 600,
+      color: 'var(--muted)',
+      letterSpacing: '.08em'
+    }
+  }, t.quota), /*#__PURE__*/React.createElement(QuotaMeter, {
+    label: "5h",
+    pct: quota.five.pct,
+    detail: t.quotaReset.replace('{t}', quota.five.reset)
+  }), /*#__PURE__*/React.createElement(QuotaMeter, {
+    label: t.quotaWeek,
+    pct: quota.week.pct,
+    detail: t.quotaReset.replace('{t}', quota.week.reset)
+  })) : null, agents.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '12px 14px',
+      color: 'var(--faint)',
+      fontSize: 12,
+      border: '1px dashed var(--line)',
+      borderRadius: 6
+    }
+  }, t.agentEmpty) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 20,
+      alignItems: 'stretch',
+      background: 'var(--panel)',
+      border: '1px solid var(--cyan-dim)',
+      borderRadius: 6,
+      padding: '12px 16px',
+      animation: 'maestro-rise .2s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: 64,
+      padding: '4px 8px',
+      borderRight: '1px solid var(--line-soft)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 40,
+      fontWeight: 700,
+      lineHeight: 1,
+      color: 'var(--cyan)',
+      textShadow: '0 0 18px rgba(89,200,216,.5)'
+    }
+  }, agents.length), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 9,
+      fontWeight: 600,
+      letterSpacing: '.3em',
+      color: 'var(--muted)',
+      marginTop: 6
+    }
+  }, "RUNNING")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      display: 'grid',
+      gap: 10,
+      minWidth: 0,
+      alignContent: 'center'
+    }
+  }, agents.map(a => /*#__PURE__*/React.createElement("div", {
+    key: a.id,
+    style: {
+      display: 'flex',
+      gap: 8,
+      alignItems: 'center',
+      fontSize: 12,
+      padding: '3px 0'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+      background: 'var(--cyan)',
+      boxShadow: '0 0 8px var(--cyan)',
+      animation: 'maestro-pulse .9s infinite'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, a.title), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      fontSize: 10,
+      letterSpacing: '.1em',
+      color: 'var(--cyan)',
+      border: '1px solid var(--cyan-dim)',
+      padding: '0 6px',
+      borderRadius: 3
+    }
+  }, a.kind), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 'none',
+      marginLeft: 'auto',
+      fontSize: 10.5,
+      color: 'var(--faint)'
+    }
+  }, a.meta, " \xB7 ", a.time, " ", t.since))))));
+}
+Object.assign(window, {
+  MaestroKitTopbar: Topbar,
+  MaestroKitConfigPanel: ConfigPanel,
+  MaestroKitAgentSection: AgentSection
+});
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/Topbar.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/data.js
+try { (() => {
+// MAESTRO 调度台 · UI kit 假数据（与 src/model 状态机对齐）
+window.MAESTRO_MOCK = {
+  projects: [{
+    id: 'p1',
+    name: 'maestro',
+    path: '~/dev/maestro',
+    branch: 'main',
+    autonomy: 'auto-easy',
+    concurrency: 2,
+    hue: 140,
+    state: 'running',
+    pending: 1,
+    agents: 1
+  }, {
+    id: 'p2',
+    name: 'blog-engine',
+    path: '~/dev/blog-engine',
+    branch: 'main',
+    autonomy: 'manual',
+    concurrency: 1,
+    hue: 38,
+    state: 'paused',
+    pending: 0,
+    agents: 0
+  }, {
+    id: 'p3',
+    name: 'dotfiles',
+    path: '~/.dotfiles',
+    branch: 'master',
+    autonomy: 'auto-approved',
+    concurrency: 1,
+    hue: 265,
+    state: 'blocked',
+    pending: 0,
+    agents: 0
+  }],
+  agents: [{
+    id: 'r1',
+    project: 'maestro',
+    title: '把轮询改为 WS 推送',
+    kind: 'EXECUTOR',
+    time: '06:12',
+    meta: 'wt-127 · claude-sonnet'
+  }],
+  // 全局：跨项目 agent 概览 / daemon 配置 / 当前用户
+  global: {
+    projectCount: 3,
+    runningProjects: 1,
+    runningAgents: 1,
+    maxAgents: 4,
+    autonomy: 'auto-easy',
+    daemon: 'v0.4.2',
+    port: 4517,
+    uptime: '3d 04h'
+  },
+  // Agent 汇总：本周窗口，按项目 + 总结
+  agentSummary: {
+    tokensWeek: 12400000,
+    runsWeek: 47,
+    costWeek: 38.6,
+    activeNow: 1,
+    byProject: [{
+      id: 'p1',
+      name: 'maestro',
+      hue: 140,
+      active: 1,
+      runs: 32,
+      tokens: 8900000
+    }, {
+      id: 'p2',
+      name: 'blog-engine',
+      hue: 38,
+      active: 0,
+      runs: 9,
+      tokens: 2100000
+    }, {
+      id: 'p3',
+      name: 'dotfiles',
+      hue: 265,
+      active: 0,
+      runs: 6,
+      tokens: 1400000
+    }]
+  },
+  user: {
+    name: 'jun',
+    handle: '@jun',
+    plan: 'Claude Max',
+    initial: 'J',
+    hue: 200
+  },
+  quota: {
+    five: {
+      pct: 50,
+      reset: '3h 8m'
+    },
+    week: {
+      pct: 58,
+      reset: '16h 38m'
+    }
+  },
+  approvals: [{
+    id: 'a1',
+    gate: 'spec',
+    taskId: 't4',
+    title: '重构 sync 模块',
+    meta: 'maestro · MED',
+    docLabel: '改动方案（SPEC）',
+    doc: '把轮询改为 WS 推送：\n1. store 层加 events 订阅接口\n2. daemon 广播 status.changed\n3. web 端断线重连 + 指数退避\n\n为什么：轮询 2s 间隔在多项目下放大为 N 路请求；WS 已有依赖，无新增包。'
+  }],
+  tasks: [{
+    id: 't1',
+    title: '接入 Claude Agent SDK',
+    cplx: 'hard',
+    status: 'decomposed',
+    prio: 'P0',
+    children: [{
+      id: 't1a',
+      title: 'PoC：worktree 起 headless CC',
+      cplx: 'medium',
+      status: 'done',
+      prio: 'P0'
+    }, {
+      id: 't1b',
+      title: 'executor 封装 + verify 钩子',
+      cplx: 'medium',
+      status: 'executing',
+      prio: 'P0'
+    }, {
+      id: 't1c',
+      title: '失败重试 n 次 → needs_attention',
+      cplx: 'easy',
+      status: 'blocked',
+      prio: 'P1',
+      deps: ['t1b']
+    }]
+  }, {
+    id: 't4',
+    title: '重构 sync 模块',
+    cplx: 'medium',
+    status: 'spec_review',
+    prio: 'P1',
+    doc: '把轮询改为 WS 推送：store 层加 events 订阅…'
+  }, {
+    id: 't5',
+    title: '看板移动端单栏适配',
+    cplx: 'easy',
+    status: 'ready',
+    prio: 'P2',
+    ops: '将执行的操作：@media 1100px 断点改单栏；侧栏折叠为顶部条。'
+  }, {
+    id: 't6',
+    title: '事件流 append-only 审计导出',
+    cplx: 'easy',
+    status: 'done',
+    prio: 'P2'
+  }],
+  archived: [{
+    id: 't6',
+    title: '事件流 append-only 审计导出',
+    cplx: 'easy',
+    status: 'done',
+    subs: 0,
+    time: '2 小时前',
+    timeFull: '2026-06-13 04:21:09',
+    detail: {
+      attrs: [['id', 't6'], ['复杂度', 'EASY'], ['优先级', 'P2'], ['状态', '完成'], ['深度', '1'], ['创建时间', '2026-06-12 22:03:44'], ['最后更新', '2026-06-13 04:21:09']],
+      ops: '将执行的操作：store 层加 events 导出接口（JSONL）；CLI 加 maestro events export。',
+      runs: [{
+        kind: '执行',
+        status: '成功',
+        span: '2026-06-13 03:58:12 → 2026-06-13 04:11:47 · 时长 13 分 35 秒',
+        ref: '转录 runs/r-0613-0358.jsonl'
+      }],
+      result: {
+        branch: 'maestro/t6-events-export',
+        commits: ['a3f9c21 feat(store): events export JSONL'],
+        diff: '+182 −12 · 4 files'
+      },
+      approvals: [{
+        gate: '结果评审',
+        action: 'accept',
+        actor: 'you',
+        at: '2026-06-13 04:21:09'
+      }],
+      timeline: [{
+        time: '06-12 22:03',
+        text: '任务创建',
+        who: 'you'
+      }, {
+        time: '06-13 03:58',
+        text: 'run 开始（执行）',
+        who: '编排器',
+        color: 'var(--cyan)'
+      }, {
+        time: '06-13 04:11',
+        text: '执行中 → 待审/合',
+        who: '编排器',
+        color: 'var(--violet)'
+      }, {
+        time: '06-13 04:21',
+        text: '审批通过（结果评审）· 合并',
+        who: 'you',
+        color: 'var(--green)'
+      }]
+    }
+  }, {
+    id: 't3',
+    title: '旧 todo.json 导入器',
+    cplx: 'medium',
+    status: 'done',
+    subs: 2,
+    time: '昨天',
+    timeFull: '2026-06-12 09:14:02',
+    detail: {
+      attrs: [['id', 't3'], ['复杂度', 'MED'], ['优先级', 'P1'], ['状态', '完成'], ['深度', '1'], ['创建时间', '2026-06-10 11:40:12'], ['最后更新', '2026-06-12 09:14:02']],
+      spec: '读旧 todo/todo.json，tier1/2/3 → hard/medium/easy，导入为一个项目；重复标题跳过。',
+      runs: [{
+        kind: '执行',
+        status: '成功',
+        span: '2026-06-12 08:31:00 → 2026-06-12 08:54:18 · 时长 23 分 18 秒',
+        ref: '转录 runs/r-0612-0831.jsonl'
+      }],
+      approvals: [{
+        gate: '方案评审',
+        action: 'reject',
+        actor: 'you',
+        at: '2026-06-11 19:02:51',
+        reason: '未处理重复导入'
+      }, {
+        gate: '方案评审',
+        action: 'accept',
+        actor: 'you',
+        at: '2026-06-12 07:48:20'
+      }, {
+        gate: '结果评审',
+        action: 'accept',
+        actor: 'you',
+        at: '2026-06-12 09:14:02'
+      }],
+      timeline: [{
+        time: '06-10 11:40',
+        text: '任务创建',
+        who: 'you'
+      }, {
+        time: '06-11 19:02',
+        text: '审批驳回（方案评审）：未处理重复导入',
+        who: 'you',
+        color: 'var(--red)'
+      }, {
+        time: '06-12 07:48',
+        text: '审批通过（方案评审）',
+        who: 'you',
+        color: 'var(--green)'
+      }, {
+        time: '06-12 08:31',
+        text: 'run 开始（执行）',
+        who: '编排器',
+        color: 'var(--cyan)'
+      }, {
+        time: '06-12 09:14',
+        text: '审批通过（结果评审）· 合并',
+        who: 'you',
+        color: 'var(--green)'
+      }]
+    }
+  }, {
+    id: 't2',
+    title: '远程看板（可选）调研',
+    cplx: 'easy',
+    status: 'cancelled',
+    subs: 0,
+    time: '3 天前',
+    timeFull: '2026-06-10 16:02:33',
+    detail: {
+      attrs: [['id', 't2'], ['复杂度', 'EASY'], ['优先级', 'P2'], ['状态', '取消'], ['深度', '1'], ['创建时间', '2026-06-09 10:12:00'], ['最后更新', '2026-06-10 16:02:33']],
+      timeline: [{
+        time: '06-09 10:12',
+        text: '任务创建',
+        who: 'you'
+      }, {
+        time: '06-10 16:02',
+        text: '可执行 → 取消',
+        who: 'you',
+        color: 'var(--faint)'
+      }]
+    }
+  }],
+  events: [{
+    type: 'run.started',
+    time: '06:12:09',
+    detail: 'executor · 把轮询改为 WS 推送 · wt-127'
+  }, {
+    type: 'approval.requested',
+    time: '06:10:44',
+    detail: 'spec_review · 重构 sync 模块'
+  }, {
+    type: 'approval.rejected',
+    time: '05:58:02',
+    detail: '重构 sync 模块 ↳ 缺少回滚方案'
+  }, {
+    type: 'status.changed',
+    time: '05:31:18',
+    detail: 'PoC：worktree 起 headless CC：执行中 → 完成'
+  }, {
+    type: 'task.created',
+    time: '05:02:51',
+    detail: '看板移动端单栏适配'
+  }, {
+    type: 'project.synced',
+    time: '04:48:00',
+    detail: 'maestro · 3 项导入'
+  }]
+};
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/data.js", error: String((e && e.message) || e) }); }
+
+// ui_kits/console/i18n.js
+try { (() => {
+// MAESTRO 调度台 · 界面语言包（zh / en / es / ja / fr）— UI chrome 文案；任务/事件内容为用户数据不翻译
+window.MAESTRO_LANGS = [['zh', '中文'], ['en', 'English'], ['es', 'Español'], ['ja', '日本語'], ['fr', 'Français']];
+window.MAESTRO_I18N = {
+  zh: {
+    logoSub: '多项目任务调度台',
+    projects: '项目',
+    newProject: '+ 新建',
+    connected: '已连接 · :4517',
+    expandSide: '展开侧栏',
+    collapseSide: '折叠侧栏',
+    badgeGate: '项待审批',
+    badgeReady: '待执行',
+    badgeRun: '执行中',
+    badgeBlocked: '被阻塞',
+    badgeTotal: '总量',
+    badgeGateTip: '等待你裁决的审批闸',
+    badgeReadyTip: '可执行（依赖已满足）+ 排队中',
+    badgeRunTip: 'agent 正在执行',
+    badgeBlockedTip: '被依赖阻塞（依赖完成后自动放行）',
+    badgeTotalTip: '未完成任务总量（不含 done / 已拆解容器 / 取消）',
+    sync: '同步 todo',
+    lastSync: '上次同步 06:12',
+    config: '配置',
+    configTip: '项目配置（并发 / 工作模式 / todo 同步）',
+    archive: '已归档',
+    archiveTip: '点击查看完整详情',
+    archiveSubs: '含 {n} 子任务',
+    archiveDetail: '归档详情',
+    pagePrev: '‹ 上一页',
+    pageNext: '下一页 ›',
+    pageOf: '第 {a} / {b} 页',
+    perPage: '每页',
+    attrsLabel: '属性',
+    runsLabel: '执行历史',
+    resultLabel: '执行结果',
+    approvalsLabel: '审批记录',
+    timelineLabel: '状态流转时间线',
+    branch: '分支',
+    accepted: '接受',
+    rejected: '驳回',
+    approver: '审批人',
+    opinion: '意见',
+    closeTip: '关闭（Esc）',
+    lang: '中文',
+    langTip: '切换语言 / Language',
+    themeLight: '浅色',
+    themeDark: '深色',
+    themeTip: '切换 light/dark',
+    maxConcurrency: '最大并发',
+    workMode: '工作模式',
+    current: '当前',
+    save: '保存配置',
+    collapse: '收起',
+    autonomy: {
+      manual: '手动',
+      'auto-easy': '自动 · Easy',
+      'auto-approved': '自动 · 已批准'
+    },
+    agentSection: 'Agent 执行',
+    agentEmpty: '无运行中的 agent',
+    running: 'RUNNING',
+    since: '起',
+    projRunning: '运行中',
+    projPaused: '暂停',
+    projBlocked: '阻塞',
+    projIdle: '空闲',
+    projPendingTip: '{n} 项待你审批',
+    gAgents: '全局 Agent',
+    gAgentsDetail: '{p}/{P} 个项目运行 · {a} 个 agent',
+    apActive: '运行',
+    apRuns: '次运行',
+    apTokens: 'token',
+    apWeek: '本周',
+    apCost: '花费',
+    apTotal: '所有项目',
+    apPerProj: '按项目',
+    apIdle: '空闲',
+    gConfig: '全局配置',
+    gConfigDetail: '并发上限 {n} · daemon {v}',
+    gUserPlan: '订阅',
+    gUserSignOut: '退出登录',
+    gUserSettings: '账户设置',
+    gateExpand: '展开',
+    gateCollapse: '折叠',
+    gateDblTip: '双击全屏阅读',
+    quota: '额度',
+    quotaWeek: '周',
+    quotaReset: '{t} 后重置',
+    projLogo: '项目 Logo',
+    logoPh: '图片 URL 或仓库内相对路径；留空=自动',
+    verifyCmd: '校验命令',
+    verifyPh: 'npm test · go test ./...（可空）',
+    model: '模型',
+    modelPh: 'claude-opus-4-5（可空）',
+    searchPh: '⌕ 搜索标题…',
+    clearFilter: '✕ 清除筛选',
+    matchCount: '{n} 项匹配',
+    fgroups: {
+      todo: '待办',
+      doing: '进行中',
+      gate: '待审批',
+      bad: '异常',
+      hold: '挂起',
+      done: '完成'
+    },
+    fullRead: '全屏阅读',
+    depsLabel: 'DEPS · 依赖（全部完成才可执行）',
+    depDone: '完成',
+    depWait: '等待',
+    gateSection: '审批闸 · 等待裁决',
+    accept: '✓ 通过',
+    reject: '✕ 驳回',
+    confirmReject: '确认驳回',
+    rejectPlaceholder: '改进意见（必填）',
+    taskSection: '任务树',
+    newTask: '+ 新建任务',
+    titleLabel: '标题',
+    titlePlaceholder: '要做什么',
+    complexity: '复杂度',
+    cplxAuto: '智能',
+    parentTask: '父任务',
+    topLevel: '（顶层）',
+    priority: '优先级',
+    p0: 'P0 · 高',
+    p1: 'P1 · 中',
+    p2: 'P2 · 低',
+    create: '创建任务',
+    cancel: '取消',
+    depsWait: '待依赖',
+    specLabel: '改动方案（SPEC）',
+    opsLabel: '将执行的操作（OPERATIONS）',
+    pendingDoc: '待 Claude Code 产出（经 MCP 写入并提交评审）',
+    emptyTasks: '该项目暂无任务 —— 点「+ 新建任务」或经 MCP 创建',
+    empty: '空',
+    events: '事件流',
+    expandEvents: '展开事件流',
+    collapseEvents: '折叠事件流',
+    toastCreated: '任务已创建 · init',
+    toastAccepted: '已通过 · ',
+    toastRejected: '已驳回 · 退回重做',
+    toastSynced: 'todo 已同步 · 0 项变更',
+    toastSaved: '配置已保存',
+    toastModal: '原型：新建项目模态未接',
+    gatePassed: ' 通过',
+    status: {
+      init: '新建',
+      analyzing: '分析拆解中',
+      plan_review: '待确认拆解',
+      decomposed: '已拆解',
+      speccing: '写方案中',
+      spec_review: '待确认方案',
+      ready: '可执行',
+      blocked: '被依赖阻塞',
+      queued: '排队中',
+      executing: '执行中',
+      exec_review: '待审/合',
+      failed: '失败',
+      needs_attention: '需人工',
+      done: '完成',
+      paused: '暂停',
+      cancelled: '取消'
+    },
+    gates: {
+      plan: '拆解评审',
+      spec: '方案评审',
+      exec: '结果评审'
+    },
+    eventTypes: {
+      'task.created': '任务创建',
+      'task.updated': '任务更新',
+      'status.changed': '状态变更',
+      'approval.requested': '请求审批',
+      'approval.granted': '审批通过',
+      'approval.rejected': '审批驳回',
+      'run.started': '运行开始',
+      'run.finished': '运行结束',
+      'project.synced': 'todo 同步'
+    }
+  },
+  en: {
+    logoSub: 'MULTI-PROJECT ORCHESTRATOR',
+    projects: 'PROJECTS',
+    newProject: '+ New',
+    connected: 'Connected · :4517',
+    expandSide: 'Expand sidebar',
+    collapseSide: 'Collapse sidebar',
+    badgeGate: 'pending review',
+    badgeReady: 'to run',
+    badgeRun: 'running',
+    badgeBlocked: 'blocked',
+    badgeTotal: 'total',
+    badgeGateTip: 'Approval gates awaiting your decision',
+    badgeReadyTip: 'Ready (deps met) + queued',
+    badgeRunTip: 'Agents currently executing',
+    badgeBlockedTip: 'Blocked (auto-released when deps complete)',
+    badgeTotalTip: 'Open tasks (excl. done / decomposed containers / cancelled)',
+    sync: 'Sync todo',
+    lastSync: 'Last sync 06:12',
+    config: 'Config',
+    configTip: 'Project config (concurrency / autonomy / todo sync)',
+    archive: 'Archive',
+    archiveTip: 'Click for full detail',
+    archiveSubs: '{n} subtasks',
+    archiveDetail: 'ARCHIVE',
+    pagePrev: '‹ Prev',
+    pageNext: 'Next ›',
+    pageOf: 'Page {a} / {b}',
+    perPage: 'Per page',
+    attrsLabel: 'ATTRIBUTES',
+    runsLabel: 'RUN HISTORY',
+    resultLabel: 'RESULT',
+    approvalsLabel: 'APPROVALS',
+    timelineLabel: 'STATUS TIMELINE',
+    branch: 'Branch',
+    accepted: 'accepted',
+    rejected: 'rejected',
+    approver: 'Approver',
+    opinion: 'Feedback',
+    closeTip: 'Close (Esc)',
+    lang: 'English',
+    langTip: 'Switch language',
+    themeLight: 'Light',
+    themeDark: 'Dark',
+    themeTip: 'Toggle light/dark',
+    maxConcurrency: 'Max concurrency',
+    workMode: 'Autonomy',
+    current: 'Current',
+    save: 'Save config',
+    collapse: 'Close',
+    autonomy: {
+      manual: 'Manual',
+      'auto-easy': 'Auto · Easy',
+      'auto-approved': 'Auto · Approved'
+    },
+    agentSection: 'Agent runs',
+    agentEmpty: 'No running agents',
+    running: 'RUNNING',
+    since: '',
+    projRunning: 'Running',
+    projPaused: 'Paused',
+    projBlocked: 'Blocked',
+    projIdle: 'Idle',
+    projPendingTip: '{n} awaiting your review',
+    gAgents: 'Agents',
+    gAgentsDetail: '{p}/{P} projects · {a} agents',
+    apActive: 'active',
+    apRuns: 'runs',
+    apTokens: 'tokens',
+    apWeek: 'this week',
+    apCost: 'cost',
+    apTotal: 'All projects',
+    apPerProj: 'BY PROJECT',
+    apIdle: 'idle',
+    gConfig: 'Settings',
+    gConfigDetail: 'Max concurrency {n} · daemon {v}',
+    gUserPlan: 'Plan',
+    gUserSignOut: 'Sign out',
+    gUserSettings: 'Account settings',
+    gateExpand: 'Expand',
+    gateCollapse: 'Collapse',
+    gateDblTip: 'Double-click for fullscreen',
+    quota: 'Quota',
+    quotaWeek: 'week',
+    quotaReset: 'resets in {t}',
+    projLogo: 'Project logo',
+    logoPh: 'Image URL or repo-relative path; empty = auto',
+    verifyCmd: 'Verify command',
+    verifyPh: 'npm test · go test ./... (optional)',
+    model: 'Model',
+    modelPh: 'claude-opus-4-5 (optional)',
+    searchPh: '⌕ Search titles…',
+    clearFilter: '✕ Clear filters',
+    matchCount: '{n} matches',
+    fgroups: {
+      todo: 'To do',
+      doing: 'In progress',
+      gate: 'Pending review',
+      bad: 'Issues',
+      hold: 'On hold',
+      done: 'Done'
+    },
+    fullRead: 'Read fullscreen',
+    depsLabel: 'DEPS (all must complete to run)',
+    depDone: 'done',
+    depWait: 'waiting',
+    gateSection: 'Approval gates · awaiting decision',
+    accept: '✓ Accept',
+    reject: '✕ Reject',
+    confirmReject: 'Confirm reject',
+    rejectPlaceholder: 'Improvement feedback (required)',
+    taskSection: 'Task tree',
+    newTask: '+ New task',
+    titleLabel: 'Title',
+    titlePlaceholder: 'What needs doing',
+    complexity: 'Complexity',
+    cplxAuto: 'AUTO',
+    parentTask: 'Parent',
+    topLevel: '(top level)',
+    priority: 'Priority',
+    p0: 'P0 · high',
+    p1: 'P1 · medium',
+    p2: 'P2 · low',
+    create: 'Create task',
+    cancel: 'Cancel',
+    depsWait: 'deps',
+    specLabel: 'CHANGE SPEC',
+    opsLabel: 'PLANNED OPERATIONS',
+    pendingDoc: 'Awaiting Claude Code output (written via MCP, then submitted for review)',
+    emptyTasks: 'No tasks in this project — hit "+ New task" or create via MCP',
+    empty: 'EMPTY',
+    events: 'Events',
+    expandEvents: 'Expand events',
+    collapseEvents: 'Collapse events',
+    toastCreated: 'Task created · init',
+    toastAccepted: 'Accepted · ',
+    toastRejected: 'Rejected · sent back',
+    toastSynced: 'Todo synced · 0 changes',
+    toastSaved: 'Config saved',
+    toastModal: 'Prototype: new-project modal not wired',
+    gatePassed: ' approved',
+    status: {
+      init: 'New',
+      analyzing: 'Analyzing',
+      plan_review: 'Plan review',
+      decomposed: 'Decomposed',
+      speccing: 'Drafting spec',
+      spec_review: 'Spec review',
+      ready: 'Ready',
+      blocked: 'Blocked',
+      queued: 'Queued',
+      executing: 'Executing',
+      exec_review: 'Review & merge',
+      failed: 'Failed',
+      needs_attention: 'Needs attention',
+      done: 'Done',
+      paused: 'Paused',
+      cancelled: 'Cancelled'
+    },
+    gates: {
+      plan: 'PLAN REVIEW',
+      spec: 'SPEC REVIEW',
+      exec: 'EXEC REVIEW'
+    },
+    eventTypes: {
+      'task.created': 'Task created',
+      'task.updated': 'Task updated',
+      'status.changed': 'Status changed',
+      'approval.requested': 'Approval requested',
+      'approval.granted': 'Approval granted',
+      'approval.rejected': 'Approval rejected',
+      'run.started': 'Run started',
+      'run.finished': 'Run finished',
+      'project.synced': 'Todo synced'
+    }
+  },
+  es: {
+    logoSub: 'ORQUESTADOR MULTIPROYECTO',
+    projects: 'PROYECTOS',
+    newProject: '+ Nuevo',
+    connected: 'Conectado · :4517',
+    expandSide: 'Expandir panel',
+    collapseSide: 'Plegar panel',
+    badgeGate: 'por revisar',
+    badgeReady: 'por ejecutar',
+    badgeRun: 'en curso',
+    badgeBlocked: 'bloqueadas',
+    badgeTotal: 'total',
+    badgeGateTip: 'Puertas de aprobación esperando tu decisión',
+    badgeReadyTip: 'Listas (deps cumplidas) + en cola',
+    badgeRunTip: 'Agents en ejecución',
+    badgeBlockedTip: 'Bloqueadas (se liberan al completar deps)',
+    badgeTotalTip: 'Tareas abiertas (sin done / contenedores / canceladas)',
+    sync: 'Sincronizar todo',
+    lastSync: 'Última sinc. 06:12',
+    config: 'Config',
+    configTip: 'Configuración (concurrencia / modo / sinc. todo)',
+    archive: 'Archivo',
+    archiveTip: 'Clic para ver detalle',
+    archiveSubs: '{n} subtareas',
+    archiveDetail: 'ARCHIVO',
+    pagePrev: '‹ Anterior',
+    pageNext: 'Siguiente ›',
+    pageOf: 'Página {a} / {b}',
+    perPage: 'Por página',
+    attrsLabel: 'ATRIBUTOS',
+    runsLabel: 'HISTORIAL DE RUNS',
+    resultLabel: 'RESULTADO',
+    approvalsLabel: 'APROBACIONES',
+    timelineLabel: 'LÍNEA DE TIEMPO',
+    branch: 'Rama',
+    accepted: 'aceptada',
+    rejected: 'rechazada',
+    approver: 'Aprobador',
+    opinion: 'Comentario',
+    closeTip: 'Cerrar (Esc)',
+    lang: 'Español',
+    langTip: 'Cambiar idioma',
+    themeLight: 'Claro',
+    themeDark: 'Oscuro',
+    themeTip: 'Cambiar tema',
+    maxConcurrency: 'Concurrencia máx.',
+    workMode: 'Modo',
+    current: 'Actual',
+    save: 'Guardar',
+    collapse: 'Cerrar',
+    autonomy: {
+      manual: 'manual',
+      'auto-easy': 'auto · Easy',
+      'auto-approved': 'auto · aprob.'
+    },
+    agentSection: 'Ejecución de agents',
+    agentEmpty: 'Sin agents en ejecución',
+    running: 'RUNNING',
+    since: '',
+    projRunning: 'En curso',
+    projPaused: 'Pausado',
+    projBlocked: 'Bloqueado',
+    projIdle: 'Inactivo',
+    projPendingTip: '{n} esperan tu revisión',
+    gAgents: 'Agents globales',
+    gAgentsDetail: '{p}/{P} proyectos · {a} agents',
+    apActive: 'activos',
+    apRuns: 'ejecuciones',
+    apTokens: 'tokens',
+    apWeek: 'esta semana',
+    apCost: 'coste',
+    apTotal: 'Todos los proyectos',
+    apPerProj: 'POR PROYECTO',
+    apIdle: 'inactivo',
+    gConfig: 'Config global',
+    gConfigDetail: 'Concurrencia máx {n} · daemon {v}',
+    gUserPlan: 'Plan',
+    gUserSignOut: 'Cerrar sesión',
+    gUserSettings: 'Ajustes de cuenta',
+    gateExpand: 'Expandir',
+    gateCollapse: 'Plegar',
+    gateDblTip: 'Doble clic para pantalla completa',
+    quota: 'Cuota',
+    quotaWeek: 'semana',
+    quotaReset: 'reinicio en {t}',
+    projLogo: 'Logo del proyecto',
+    logoPh: 'URL o ruta relativa; vacío = auto',
+    verifyCmd: 'Comando de verificación',
+    verifyPh: 'npm test · go test ./... (opcional)',
+    model: 'Modelo',
+    modelPh: 'claude-opus-4-5 (opcional)',
+    searchPh: '⌕ Buscar títulos…',
+    clearFilter: '✕ Limpiar filtros',
+    matchCount: '{n} coincidencias',
+    fgroups: {
+      todo: 'Pendientes',
+      doing: 'En curso',
+      gate: 'Por revisar',
+      bad: 'Incidencias',
+      hold: 'En pausa',
+      done: 'Hechas'
+    },
+    fullRead: 'Pantalla completa',
+    depsLabel: 'DEPS (todas deben completarse)',
+    depDone: 'hecha',
+    depWait: 'esperando',
+    gateSection: 'Puertas de aprobación · pendientes',
+    accept: '✓ Aceptar',
+    reject: '✕ Rechazar',
+    confirmReject: 'Confirmar rechazo',
+    rejectPlaceholder: 'Comentario de mejora (obligatorio)',
+    taskSection: 'Árbol de tareas',
+    newTask: '+ Nueva tarea',
+    titleLabel: 'Título',
+    titlePlaceholder: 'Qué hay que hacer',
+    complexity: 'Complejidad',
+    cplxAuto: 'AUTO',
+    parentTask: 'Padre',
+    topLevel: '(raíz)',
+    priority: 'Prioridad',
+    p0: 'P0 · alta',
+    p1: 'P1 · media',
+    p2: 'P2 · baja',
+    create: 'Crear tarea',
+    cancel: 'Cancelar',
+    depsWait: 'deps',
+    specLabel: 'SPEC DE CAMBIOS',
+    opsLabel: 'OPERACIONES PREVISTAS',
+    pendingDoc: 'Esperando salida de Claude Code (vía MCP, luego a revisión)',
+    emptyTasks: 'Sin tareas — pulsa "+ Nueva tarea" o crea vía MCP',
+    empty: 'VACÍO',
+    events: 'Eventos',
+    expandEvents: 'Expandir eventos',
+    collapseEvents: 'Plegar eventos',
+    toastCreated: 'Tarea creada · init',
+    toastAccepted: 'Aceptada · ',
+    toastRejected: 'Rechazada · devuelta',
+    toastSynced: 'Todo sincronizado · 0 cambios',
+    toastSaved: 'Config guardada',
+    toastModal: 'Prototipo: modal no conectado',
+    gatePassed: ' aprobada',
+    status: {
+      init: 'Nueva',
+      analyzing: 'Analizando',
+      plan_review: 'Revisión de plan',
+      decomposed: 'Descompuesta',
+      speccing: 'Redactando spec',
+      spec_review: 'Revisión de spec',
+      ready: 'Lista',
+      blocked: 'Bloqueada',
+      queued: 'En cola',
+      executing: 'Ejecutando',
+      exec_review: 'Revisar y fusionar',
+      failed: 'Fallida',
+      needs_attention: 'Requiere atención',
+      done: 'Hecha',
+      paused: 'Pausada',
+      cancelled: 'Cancelada'
+    },
+    gates: {
+      plan: 'REVISIÓN DE PLAN',
+      spec: 'REVISIÓN DE SPEC',
+      exec: 'REVISIÓN DE RESULTADO'
+    },
+    eventTypes: {
+      'task.created': 'Tarea creada',
+      'task.updated': 'Tarea actualizada',
+      'status.changed': 'Cambio de estado',
+      'approval.requested': 'Aprobación solicitada',
+      'approval.granted': 'Aprobación concedida',
+      'approval.rejected': 'Aprobación rechazada',
+      'run.started': 'Run iniciado',
+      'run.finished': 'Run terminado',
+      'project.synced': 'Todo sincronizado'
+    }
+  },
+  ja: {
+    logoSub: 'マルチプロジェクト・オーケストレーター',
+    projects: 'プロジェクト',
+    newProject: '+ 新規',
+    connected: '接続済み · :4517',
+    expandSide: 'サイドバーを開く',
+    collapseSide: 'サイドバーを畳む',
+    badgeGate: '件 承認待ち',
+    badgeReady: '実行待ち',
+    badgeRun: '実行中',
+    badgeBlocked: 'ブロック中',
+    badgeTotal: '合計',
+    badgeGateTip: 'あなたの裁定を待つ承認ゲート',
+    badgeReadyTip: '実行可能（依存解決済み）+ キュー',
+    badgeRunTip: 'agent が実行中',
+    badgeBlockedTip: '依存でブロック（解決後に自動開放）',
+    badgeTotalTip: '未完了タスク数（done / 分解済み / キャンセル除く）',
+    sync: 'todo 同期',
+    lastSync: '最終同期 06:12',
+    config: '設定',
+    configTip: 'プロジェクト設定（並列数 / モード / todo 同期）',
+    archive: 'アーカイブ',
+    archiveTip: 'クリックで詳細表示',
+    archiveSubs: 'サブタスク {n} 件',
+    archiveDetail: 'アーカイブ詳細',
+    pagePrev: '‹ 前へ',
+    pageNext: '次へ ›',
+    pageOf: '{a} / {b} ページ',
+    perPage: '表示件数',
+    attrsLabel: '属性',
+    runsLabel: '実行履歴',
+    resultLabel: '実行結果',
+    approvalsLabel: '承認記録',
+    timelineLabel: 'ステータス・タイムライン',
+    branch: 'ブランチ',
+    accepted: '承認',
+    rejected: '却下',
+    approver: '承認者',
+    opinion: 'コメント',
+    closeTip: '閉じる（Esc）',
+    lang: '日本語',
+    langTip: '言語を切替',
+    themeLight: 'ライト',
+    themeDark: 'ダーク',
+    themeTip: 'テーマ切替',
+    maxConcurrency: '最大並列数',
+    workMode: 'モード',
+    current: '現在',
+    save: '保存',
+    collapse: '閉じる',
+    autonomy: {
+      manual: '手動',
+      'auto-easy': '自動 · Easy',
+      'auto-approved': '自動 · 承認済'
+    },
+    agentSection: 'Agent 実行',
+    agentEmpty: '実行中の agent はありません',
+    running: 'RUNNING',
+    since: '開始',
+    projRunning: '実行中',
+    projPaused: '一時停止',
+    projBlocked: 'ブロック',
+    projIdle: 'アイドル',
+    projPendingTip: '{n} 件があなたの承認待ち',
+    gAgents: 'グローバル Agent',
+    gAgentsDetail: '{p}/{P} プロジェクト · {a} 個の agent',
+    apActive: '実行中',
+    apRuns: '回実行',
+    apTokens: 'token',
+    apWeek: '今週',
+    apCost: 'コスト',
+    apTotal: '全プロジェクト',
+    apPerProj: 'プロジェクト別',
+    apIdle: 'アイドル',
+    gConfig: 'グローバル設定',
+    gConfigDetail: '並列上限 {n} · daemon {v}',
+    gUserPlan: 'プラン',
+    gUserSignOut: 'ログアウト',
+    gUserSettings: 'アカウント設定',
+    gateExpand: '展開',
+    gateCollapse: '折り畳む',
+    gateDblTip: 'ダブルクリックで全画面',
+    quota: 'クォータ',
+    quotaWeek: '週',
+    quotaReset: '{t} 後にリセット',
+    projLogo: 'プロジェクトロゴ',
+    logoPh: '画像 URL またはリポジトリ相対パス；空=自動',
+    verifyCmd: '検証コマンド',
+    verifyPh: 'npm test · go test ./...（任意）',
+    model: 'モデル',
+    modelPh: 'claude-opus-4-5（任意）',
+    searchPh: '⌕ タイトルを検索…',
+    clearFilter: '✕ フィルタをクリア',
+    matchCount: '{n} 件一致',
+    fgroups: {
+      todo: '未着手',
+      doing: '進行中',
+      gate: '承認待ち',
+      bad: '異常',
+      hold: '保留',
+      done: '完了'
+    },
+    fullRead: '全画面で読む',
+    depsLabel: 'DEPS · 依存（全完了で実行可）',
+    depDone: '完了',
+    depWait: '待機',
+    gateSection: '承認ゲート · 裁定待ち',
+    accept: '✓ 承認',
+    reject: '✕ 却下',
+    confirmReject: '却下を確定',
+    rejectPlaceholder: '改善フィードバック（必須）',
+    taskSection: 'タスクツリー',
+    newTask: '+ 新規タスク',
+    titleLabel: 'タイトル',
+    titlePlaceholder: '何をしますか',
+    complexity: '複雑度',
+    cplxAuto: '智能',
+    parentTask: '親タスク',
+    topLevel: '（トップ）',
+    priority: '優先度',
+    p0: 'P0 · 高',
+    p1: 'P1 · 中',
+    p2: 'P2 · 低',
+    create: 'タスク作成',
+    cancel: 'キャンセル',
+    depsWait: '依存待ち',
+    specLabel: 'SPEC · 変更案',
+    opsLabel: 'OPERATIONS · 操作',
+    pendingDoc: 'Claude Code の出力待ち（MCP 経由で書き込み後レビューへ）',
+    emptyTasks: 'タスクなし — 「+ 新規タスク」または MCP で作成',
+    empty: '空',
+    events: 'イベント',
+    expandEvents: 'イベントを開く',
+    collapseEvents: 'イベントを畳む',
+    toastCreated: 'タスク作成済み · init',
+    toastAccepted: '承認済み · ',
+    toastRejected: '却下 · 差し戻し',
+    toastSynced: 'todo 同期完了 · 変更 0 件',
+    toastSaved: '設定を保存しました',
+    toastModal: 'プロトタイプ：新規モーダル未接続',
+    gatePassed: ' 承認',
+    status: {
+      init: '新規',
+      analyzing: '分析・分解中',
+      plan_review: '分解確認待ち',
+      decomposed: '分解済み',
+      speccing: '方針作成中',
+      spec_review: '方針確認待ち',
+      ready: '実行可能',
+      blocked: '依存ブロック',
+      queued: 'キュー待ち',
+      executing: '実行中',
+      exec_review: 'レビュー/マージ',
+      failed: '失敗',
+      needs_attention: '要対応',
+      done: '完了',
+      paused: '一時停止',
+      cancelled: 'キャンセル'
+    },
+    gates: {
+      plan: '分解レビュー',
+      spec: '方針レビュー',
+      exec: '結果レビュー'
+    },
+    eventTypes: {
+      'task.created': 'タスク作成',
+      'task.updated': 'タスク更新',
+      'status.changed': 'ステータス変更',
+      'approval.requested': '承認リクエスト',
+      'approval.granted': '承認',
+      'approval.rejected': '却下',
+      'run.started': 'run 開始',
+      'run.finished': 'run 終了',
+      'project.synced': 'todo 同期'
+    }
+  },
+  fr: {
+    logoSub: 'ORCHESTRATEUR MULTI-PROJETS',
+    projects: 'PROJETS',
+    newProject: '+ Nouveau',
+    connected: 'Connecté · :4517',
+    expandSide: 'Déplier le panneau',
+    collapseSide: 'Replier le panneau',
+    badgeGate: 'à approuver',
+    badgeReady: 'à exécuter',
+    badgeRun: 'en cours',
+    badgeBlocked: 'bloquées',
+    badgeTotal: 'total',
+    badgeGateTip: "Portes d'approbation en attente de décision",
+    badgeReadyTip: 'Prêtes (deps OK) + en file',
+    badgeRunTip: 'Agents en cours d’exécution',
+    badgeBlockedTip: 'Bloquées (libérées quand les deps aboutissent)',
+    badgeTotalTip: 'Tâches ouvertes (hors done / conteneurs / annulées)',
+    sync: 'Synchroniser todo',
+    lastSync: 'Dernière sync 06:12',
+    config: 'Config',
+    configTip: 'Config projet (concurrence / mode / sync todo)',
+    archive: 'Archives',
+    archiveTip: 'Cliquer pour le détail',
+    archiveSubs: '{n} sous-tâches',
+    archiveDetail: 'ARCHIVE',
+    pagePrev: '‹ Préc.',
+    pageNext: 'Suiv. ›',
+    pageOf: 'Page {a} / {b}',
+    perPage: 'Par page',
+    attrsLabel: 'ATTRIBUTS',
+    runsLabel: 'HISTORIQUE DES RUNS',
+    resultLabel: 'RÉSULTAT',
+    approvalsLabel: 'APPROBATIONS',
+    timelineLabel: 'CHRONOLOGIE',
+    branch: 'Branche',
+    accepted: 'acceptée',
+    rejected: 'rejetée',
+    approver: 'Approbateur',
+    opinion: 'Retour',
+    closeTip: 'Fermer (Échap)',
+    lang: 'Français',
+    langTip: 'Changer de langue',
+    themeLight: 'Clair',
+    themeDark: 'Sombre',
+    themeTip: 'Basculer le thème',
+    maxConcurrency: 'Concurrence max',
+    workMode: 'Mode',
+    current: 'Actuel',
+    save: 'Enregistrer',
+    collapse: 'Fermer',
+    autonomy: {
+      manual: 'manual',
+      'auto-easy': 'auto · Easy',
+      'auto-approved': 'auto · approuv.'
+    },
+    agentSection: 'Exécutions agent',
+    agentEmpty: 'Aucun agent en cours',
+    running: 'RUNNING',
+    since: '',
+    projRunning: 'En cours',
+    projPaused: 'En pause',
+    projBlocked: 'Bloqué',
+    projIdle: 'Inactif',
+    projPendingTip: '{n} en attente de votre revue',
+    gAgents: 'Agents globaux',
+    gAgentsDetail: '{p}/{P} projets · {a} agents',
+    apActive: 'actifs',
+    apRuns: 'exécutions',
+    apTokens: 'tokens',
+    apWeek: 'cette semaine',
+    apCost: 'coût',
+    apTotal: 'Tous les projets',
+    apPerProj: 'PAR PROJET',
+    apIdle: 'inactif',
+    gConfig: 'Config globale',
+    gConfigDetail: 'Concurrence max {n} · daemon {v}',
+    gUserPlan: 'Forfait',
+    gUserSignOut: 'Se déconnecter',
+    gUserSettings: 'Paramètres du compte',
+    gateExpand: 'Déplier',
+    gateCollapse: 'Replier',
+    gateDblTip: 'Double-clic pour le plein écran',
+    quota: 'Quota',
+    quotaWeek: 'semaine',
+    quotaReset: 'reset dans {t}',
+    projLogo: 'Logo du projet',
+    logoPh: 'URL ou chemin relatif ; vide = auto',
+    verifyCmd: 'Commande de vérification',
+    verifyPh: 'npm test · go test ./... (optionnel)',
+    model: 'Modèle',
+    modelPh: 'claude-opus-4-5 (optionnel)',
+    searchPh: '⌕ Rechercher…',
+    clearFilter: '✕ Effacer les filtres',
+    matchCount: '{n} résultats',
+    fgroups: {
+      todo: 'À faire',
+      doing: 'En cours',
+      gate: 'À approuver',
+      bad: 'Anomalies',
+      hold: 'En attente',
+      done: 'Terminées'
+    },
+    fullRead: 'Plein écran',
+    depsLabel: 'DEPS (toutes requises)',
+    depDone: 'terminée',
+    depWait: 'en attente',
+    gateSection: "Portes d'approbation · en attente",
+    accept: '✓ Accepter',
+    reject: '✕ Rejeter',
+    confirmReject: 'Confirmer le rejet',
+    rejectPlaceholder: "Retour d'amélioration (obligatoire)",
+    taskSection: 'Arbre des tâches',
+    newTask: '+ Nouvelle tâche',
+    titleLabel: 'Titre',
+    titlePlaceholder: 'Que faut-il faire',
+    complexity: 'Complexité',
+    cplxAuto: 'AUTO',
+    parentTask: 'Parent',
+    topLevel: '(racine)',
+    priority: 'Priorité',
+    p0: 'P0 · haute',
+    p1: 'P1 · moyenne',
+    p2: 'P2 · basse',
+    create: 'Créer la tâche',
+    cancel: 'Annuler',
+    depsWait: 'deps',
+    specLabel: 'SPEC DES CHANGEMENTS',
+    opsLabel: 'OPÉRATIONS PRÉVUES',
+    pendingDoc: 'En attente de la sortie de Claude Code (via MCP, puis revue)',
+    emptyTasks: 'Aucune tâche — « + Nouvelle tâche » ou via MCP',
+    empty: 'VIDE',
+    events: 'Événements',
+    expandEvents: 'Déplier les événements',
+    collapseEvents: 'Replier les événements',
+    toastCreated: 'Tâche créée · init',
+    toastAccepted: 'Acceptée · ',
+    toastRejected: 'Rejetée · renvoyée',
+    toastSynced: 'Todo synchronisé · 0 changement',
+    toastSaved: 'Config enregistrée',
+    toastModal: 'Prototype : modale non câblée',
+    gatePassed: ' approuvée',
+    status: {
+      init: 'Nouvelle',
+      analyzing: 'Analyse',
+      plan_review: 'Revue du plan',
+      decomposed: 'Décomposée',
+      speccing: 'Rédaction spec',
+      spec_review: 'Revue de spec',
+      ready: 'Prête',
+      blocked: 'Bloquée',
+      queued: 'En file',
+      executing: 'En exécution',
+      exec_review: 'Revue & fusion',
+      failed: 'Échouée',
+      needs_attention: 'À traiter',
+      done: 'Terminée',
+      paused: 'En pause',
+      cancelled: 'Annulée'
+    },
+    gates: {
+      plan: 'REVUE DU PLAN',
+      spec: 'REVUE DE SPEC',
+      exec: 'REVUE DU RÉSULTAT'
+    },
+    eventTypes: {
+      'task.created': 'Tâche créée',
+      'task.updated': 'Tâche mise à jour',
+      'status.changed': "Changement d'état",
+      'approval.requested': 'Approbation demandée',
+      'approval.granted': 'Approbation accordée',
+      'approval.rejected': 'Approbation rejetée',
+      'run.started': 'Run démarré',
+      'run.finished': 'Run terminé',
+      'project.synced': 'Todo synchronisé'
+    }
+  }
+};
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console/i18n.js", error: String((e && e.message) || e) }); }
+
+// ui_kits/console_mobile/MobileChrome.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// 移动版 · 头部 + 底部 Tab 栏
+const mIcon = {
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  viewBox: '0 0 24 24'
+};
+function MIconTask({
+  s = 22
+}) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, mIcon, {
+    width: s,
+    height: s
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "4",
+    y: "4",
+    width: "16",
+    height: "16",
+    rx: "2.5"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "8 12 11 15 16 9"
+  }));
+}
+function MIconGate({
+  s = 22
+}) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, mIcon, {
+    width: s,
+    height: s
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 3 L22 21 L2 21 Z"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    y1: "10",
+    x2: "12",
+    y2: "14"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    y1: "17.5",
+    x2: "12",
+    y2: "17.51"
+  }));
+}
+function MIconEvent({
+  s = 22
+}) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, mIcon, {
+    width: s,
+    height: s
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "2 12 7 12 10 5 14 19 17 12 22 12"
+  }));
+}
+function MIconGit({
+  s = 22
+}) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, mIcon, {
+    width: s,
+    height: s
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "6",
+    y1: "3",
+    x2: "6",
+    y2: "15"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "18",
+    cy: "6",
+    r: "3"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "6",
+    cy: "18",
+    r: "3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18 9a9 9 0 0 1-9 9"
+  }));
+}
+function MobileMark({
+  scale = 1.6
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const MAP = ['.....LLLLL.....', '...LLLLLLLLL...', '..GGGGGGGGGGG..', '..GGEEGGGEEGG..', '..GGEEGGGEEGG..', '..GGGGGGGGGGG..', '...GGGGGGGGG...', '...G..G.G..G...', '...G..G.G..G...', '..G...G.G...G..', '..D...D.D...D..', '.D...D...D...D.'];
+    const INK = {
+      L: '#79ec94',
+      G: '#5fdd7d',
+      D: '#2e6b3d',
+      E: '#070908'
+    };
+    const ctx = ref.current.getContext('2d');
+    MAP.forEach((row, y) => [...row].forEach((ch, x) => {
+      if (INK[ch]) {
+        ctx.fillStyle = INK[ch];
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }));
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: ref,
+    width: "15",
+    height: "12",
+    style: {
+      width: 15 * scale,
+      height: 12 * scale,
+      imageRendering: 'pixelated',
+      filter: 'drop-shadow(0 0 5px rgba(95,221,125,.4))'
+    }
+  });
+}
+function MobileHeader({
+  project,
+  counts
+}) {
+  const {
+    CountBadge
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("header", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      padding: '12px 14px',
+      borderBottom: '1px solid var(--line)',
+      background: 'var(--bg-deep)',
+      position: 'sticky',
+      top: 0,
+      zIndex: 20
+    }
+  }, /*#__PURE__*/React.createElement(MobileMark, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 15,
+      fontWeight: 700,
+      letterSpacing: '.04em',
+      whiteSpace: 'nowrap'
+    }
+  }, project.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10,
+      color: 'var(--faint)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, project.branch, " \xB7 ", project.autonomy)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: 'auto',
+      display: 'flex',
+      gap: 6
+    }
+  }, /*#__PURE__*/React.createElement(CountBadge, {
+    kind: "gate",
+    count: counts.gate
+  }), /*#__PURE__*/React.createElement(CountBadge, {
+    kind: "run",
+    count: counts.run
+  })));
+}
+function MobileTabBar({
+  tab,
+  setTab,
+  gateCount
+}) {
+  const tabs = [{
+    id: 'tasks',
+    label: '任务',
+    icon: MIconTask
+  }, {
+    id: 'gates',
+    label: '审批',
+    icon: MIconGate,
+    badge: gateCount
+  }, {
+    id: 'events',
+    label: '事件',
+    icon: MIconEvent
+  }, {
+    id: 'projects',
+    label: '项目',
+    icon: MIconGit
+  }];
+  return /*#__PURE__*/React.createElement("nav", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4,1fr)',
+      borderTop: '1px solid var(--line)',
+      background: 'var(--bg-deep)',
+      position: 'sticky',
+      bottom: 0,
+      zIndex: 20
+    }
+  }, tabs.map(t => {
+    const active = tab === t.id;
+    const Icon = t.icon;
+    return /*#__PURE__*/React.createElement("button", {
+      key: t.id,
+      onClick: () => setTab(t.id),
+      style: {
+        fontFamily: 'var(--mono)',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 3,
+        padding: '9px 0 10px',
+        minHeight: 56,
+        position: 'relative',
+        color: active ? 'var(--green)' : 'var(--faint)',
+        textShadow: active ? '0 0 10px rgba(95,221,125,.45)' : 'none'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'relative',
+        filter: active ? 'drop-shadow(0 0 6px rgba(95,221,125,.5))' : 'none'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, null), t.badge ? /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        top: -4,
+        right: -8,
+        minWidth: 15,
+        height: 15,
+        fontSize: 9.5,
+        fontWeight: 700,
+        lineHeight: '15px',
+        textAlign: 'center',
+        background: 'var(--violet)',
+        color: 'var(--bg-deep)',
+        borderRadius: 8,
+        padding: '0 3px'
+      }
+    }, t.badge) : null), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 10,
+        letterSpacing: '.12em'
+      }
+    }, t.label));
+  }));
+}
+Object.assign(window, {
+  MaestroMobHeader: MobileHeader,
+  MaestroMobTabBar: MobileTabBar
+});
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console_mobile/MobileChrome.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/console_mobile/MobileViews.jsx
+try { (() => {
+// 移动版 · 四个 Tab 视图：任务 / 审批 / 事件 / 项目
+function MobTaskRow({
+  task,
+  depth = 0,
+  expandedId,
+  setExpandedId
+}) {
+  const {
+    ComplexityBadge,
+    StatusChip
+  } = window.MaestroDesignSystem_a6a290;
+  const kids = task.children || [];
+  const expanded = expandedId === task.id;
+  const isGate = ['plan_review', 'spec_review', 'exec_review'].includes(task.status);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    onClick: () => setExpandedId(expanded ? null : task.id),
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 6,
+      padding: '12px 14px',
+      minHeight: 44,
+      cursor: 'pointer',
+      paddingLeft: 14 + depth * 16,
+      borderBottom: '1px solid var(--line-soft)',
+      borderLeft: depth ? '1px solid var(--line-soft)' : 'none',
+      background: expanded ? 'var(--panel-2)' : isGate ? 'rgba(184,142,245,.05)' : 'transparent'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'baseline',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 500,
+      fontSize: 14,
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, task.title), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--faint)',
+      fontSize: 10.5,
+      flex: 'none'
+    }
+  }, task.id)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement(ComplexityBadge, {
+    complexity: task.cplx
+  }), /*#__PURE__*/React.createElement(StatusChip, {
+    status: task.status
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      fontSize: 10.5,
+      color: task.prio === 'P0' ? 'var(--amber)' : 'var(--faint)'
+    }
+  }, task.prio))), expanded ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--panel)',
+      borderBottom: '1px solid var(--line)',
+      borderLeft: '2px solid var(--green-dim)',
+      padding: '12px 14px',
+      animation: 'maestro-rise .2s ease both'
+    }
+  }, task.doc || task.ops ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--muted)',
+      letterSpacing: '.18em',
+      marginBottom: 4
+    }
+  }, task.doc ? '改动方案（SPEC）' : '将执行的操作（OPERATIONS）'), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line-soft)',
+      borderLeft: '2px solid var(--green-dim)',
+      borderRadius: 4,
+      padding: '10px 12px',
+      fontFamily: 'var(--mono)',
+      fontSize: 12,
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      margin: 0,
+      color: 'var(--ink)',
+      lineHeight: 1.6
+    }
+  }, task.doc || task.ops)) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px 12px',
+      border: '1px dashed var(--line)',
+      borderRadius: 6,
+      color: 'var(--faint)',
+      fontStyle: 'italic',
+      fontSize: 12
+    }
+  }, "\u5F85 Claude Code \u4EA7\u51FA\uFF08\u7ECF MCP \u5199\u5165\u5E76\u63D0\u4EA4\u8BC4\u5BA1\uFF09")) : null, kids.map(k => /*#__PURE__*/React.createElement(MobTaskRow, {
+    key: k.id,
+    task: k,
+    depth: depth + 1,
+    expandedId: expandedId,
+    setExpandedId: setExpandedId
+  })));
+}
+function MobTasks({
+  tasks,
+  agents
+}) {
+  const {
+    SectionHead
+  } = window.MaestroDesignSystem_a6a290;
+  const [expandedId, setExpandedId] = React.useState(null);
+  return /*#__PURE__*/React.createElement("div", null, agents.length ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '12px 14px 0',
+      display: 'flex',
+      gap: 10,
+      alignItems: 'center',
+      background: 'var(--panel)',
+      border: '1px solid var(--cyan-dim)',
+      borderRadius: 6,
+      padding: '10px 12px'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+      background: 'var(--cyan)',
+      boxShadow: '0 0 8px var(--cyan)',
+      animation: 'maestro-pulse .9s infinite',
+      flex: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12,
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, agents[0].title), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      flex: 'none',
+      fontSize: 10,
+      letterSpacing: '.1em',
+      color: 'var(--cyan)',
+      border: '1px solid var(--cyan-dim)',
+      borderRadius: 3,
+      padding: '0 6px'
+    }
+  }, agents[0].kind)) : null, /*#__PURE__*/React.createElement(SectionHead, {
+    title: "\u4EFB\u52A1\u6811",
+    style: {
+      padding: '14px 14px 8px'
+    }
+  }), /*#__PURE__*/React.createElement("div", null, tasks.map(t => /*#__PURE__*/React.createElement(MobTaskRow, {
+    key: t.id,
+    task: t,
+    expandedId: expandedId,
+    setExpandedId: setExpandedId
+  }))));
+}
+function MobGatePreview({
+  item,
+  onDecide,
+  onClose
+}) {
+  const {
+    ComplexityBadge,
+    Button,
+    Textarea
+  } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(false);
+  const [reason, setReason] = React.useState('');
+  if (!item) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 1300,
+      display: 'flex',
+      flexDirection: 'column',
+      background: 'var(--bg)',
+      animation: 'maestro-rise .18s ease both'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      padding: '12px 14px',
+      borderBottom: '1px solid var(--line)',
+      background: 'var(--panel-2)',
+      flex: 'none'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      fontWeight: 700,
+      letterSpacing: '.18em',
+      color: 'var(--bg)',
+      background: 'var(--violet)',
+      padding: '2px 8px',
+      borderRadius: 3,
+      flex: 'none'
+    }
+  }, item.gateLabel), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 700,
+      fontSize: 14,
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, item.title), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: onClose,
+    title: "\u5173\u95ED",
+    style: {
+      fontFamily: 'var(--mono)',
+      fontSize: 15,
+      background: 'transparent',
+      color: 'var(--muted)',
+      border: 'none',
+      cursor: 'pointer',
+      padding: '8px 10px',
+      minHeight: 44
+    }
+  }, "\u2715")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflowY: 'auto',
+      padding: '14px 16px 24px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: 'var(--muted)',
+      marginBottom: 10
+    }
+  }, item.meta), item.docLabel ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: 'var(--muted)',
+      letterSpacing: '.18em',
+      margin: '0 0 6px'
+    }
+  }, item.docLabel) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--bg-deep)',
+      border: '1px solid var(--line-soft)',
+      borderLeft: '2px solid var(--green-dim)',
+      borderRadius: 4,
+      padding: '12px 14px',
+      fontFamily: 'var(--mono)',
+      fontSize: 13.5,
+      lineHeight: 1.7,
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      color: 'var(--ink)'
+    }
+  }, item.doc)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 'none',
+      padding: '12px 14px calc(12px + env(safe-area-inset-bottom))',
+      borderTop: '1px solid var(--line)',
+      background: 'var(--panel-2)',
+      display: 'grid',
+      gap: 10
+    }
+  }, rejecting ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textarea, {
+    danger: true,
+    placeholder: "\u6539\u8FDB\u610F\u89C1\uFF08\u5FC5\u586B\uFF09",
+    minHeight: 56,
+    value: reason,
+    onChange: setReason
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "reject",
+    disabled: !reason.trim(),
+    style: {
+      flex: 1,
+      minHeight: 44
+    },
+    onClick: () => {
+      onDecide(item, 'reject', reason);
+      onClose();
+    }
+  }, "\u786E\u8BA4\u9A73\u56DE"), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1,
+      minHeight: 44
+    },
+    onClick: () => {
+      setRejecting(false);
+      setReason('');
+    }
+  }, "\u53D6\u6D88"))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "accept",
+    style: {
+      flex: 1,
+      minHeight: 44
+    },
+    onClick: () => {
+      onDecide(item, 'accept');
+      onClose();
+    }
+  }, "\u2713 \u901A\u8FC7"), /*#__PURE__*/React.createElement(Button, {
+    variant: "reject",
+    style: {
+      flex: 1,
+      minHeight: 44
+    },
+    onClick: () => setRejecting(true)
+  }, "\u2715 \u9A73\u56DE"))));
+}
+function MobGates({
+  approvals,
+  onDecide
+}) {
+  const {
+    GateCard,
+    GateStripe,
+    Button,
+    Textarea,
+    SectionHead
+  } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(null);
+  const [reason, setReason] = React.useState('');
+  const [preview, setPreview] = React.useState(null);
+  if (!approvals.length) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '24px 14px',
+        padding: '38px 0',
+        textAlign: 'center',
+        color: 'var(--faint)',
+        border: '1px dashed var(--line)',
+        borderRadius: 6,
+        fontSize: 12
+      }
+    }, "\u65E0\u5F85\u88C1\u51B3\u5BA1\u6279");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '12px 14px'
+    }
+  }, /*#__PURE__*/React.createElement(GateStripe, null), /*#__PURE__*/React.createElement(SectionHead, {
+    mark: "violet",
+    title: "\u5BA1\u6279\u95F8 \xB7 \u7B49\u5F85\u88C1\u51B3",
+    style: {
+      padding: '10px 0 8px',
+      color: 'var(--violet)'
+    }
+  }), approvals.map(a => /*#__PURE__*/React.createElement("div", {
+    key: a.id,
+    style: {
+      marginBottom: 12
+    }
+  }, /*#__PURE__*/React.createElement(GateCard, {
+    gate: a.gate,
+    title: a.title,
+    meta: a.meta,
+    docLabel: a.docLabel,
+    doc: a.doc,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      variant: "accept",
+      style: {
+        flex: 1,
+        minHeight: 44
+      },
+      onClick: () => onDecide(a, 'accept')
+    }, "\u2713 \u901A\u8FC7"), /*#__PURE__*/React.createElement(Button, {
+      variant: "reject",
+      style: {
+        flex: 1,
+        minHeight: 44
+      },
+      onClick: () => setRejecting(rejecting === a.id ? null : a.id)
+    }, "\u2715 \u9A73\u56DE"), /*#__PURE__*/React.createElement(Button, {
+      variant: "ghost",
+      style: {
+        minHeight: 44
+      },
+      title: "\u5168\u5C4F\u9605\u8BFB",
+      onClick: () => setPreview({
+        ...a,
+        gateLabel: {
+          plan: '拆解评审',
+          spec: '方案评审',
+          exec: '结果评审'
+        }[a.gate] || a.gate
+      })
+    }, "\u26F6"))
+  }, rejecting === a.id ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gap: 10,
+      marginTop: 10
+    }
+  }, /*#__PURE__*/React.createElement(Textarea, {
+    danger: true,
+    placeholder: "\u6539\u8FDB\u610F\u89C1\uFF08\u5FC5\u586B\uFF09",
+    minHeight: 56,
+    value: reason,
+    onChange: setReason
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "reject",
+    disabled: !reason.trim(),
+    style: {
+      minHeight: 44
+    },
+    onClick: () => {
+      onDecide(a, 'reject', reason);
+      setRejecting(null);
+      setReason('');
+    }
+  }, "\u786E\u8BA4\u9A73\u56DE")) : null))), /*#__PURE__*/React.createElement(MobGatePreview, {
+    item: preview,
+    onDecide: onDecide,
+    onClose: () => setPreview(null)
+  }));
+}
+function MobEvents({
+  events
+}) {
+  const {
+    EventItem,
+    SectionHead
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionHead, {
+    title: "\u4E8B\u4EF6\u6D41",
+    style: {
+      padding: '14px 14px 8px'
+    }
+  }), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      listStyle: 'none',
+      padding: '0 14px',
+      margin: 0
+    }
+  }, events.map((e, i) => /*#__PURE__*/React.createElement(EventItem, {
+    key: i,
+    type: e.type,
+    time: e.time,
+    detail: e.detail
+  }))));
+}
+function MobProjects({
+  projects,
+  currentId,
+  onSelect,
+  project
+}) {
+  const {
+    SectionHead,
+    Select,
+    Input,
+    Button
+  } = window.MaestroDesignSystem_a6a290;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionHead, {
+    title: "\u9879\u76EE",
+    style: {
+      padding: '14px 14px 8px'
+    }
+  }), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      listStyle: 'none',
+      margin: 0,
+      padding: 0
+    }
+  }, projects.map(p => {
+    const active = p.id === currentId;
+    return /*#__PURE__*/React.createElement("li", {
+      key: p.id,
+      onClick: () => onSelect(p.id),
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        minHeight: 52,
+        padding: '10px 14px',
+        cursor: 'pointer',
+        borderBottom: '1px solid var(--line-soft)',
+        borderLeft: '2px solid ' + (active ? 'var(--green)' : 'transparent'),
+        background: active ? 'var(--panel-2)' : 'transparent',
+        color: active ? 'var(--green)' : 'var(--muted)'
+      }
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: {
+        flex: 'none'
+      }
+    }, /*#__PURE__*/React.createElement("line", {
+      x1: "6",
+      y1: "3",
+      x2: "6",
+      y2: "15"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "18",
+      cy: "6",
+      r: "3"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "6",
+      cy: "18",
+      r: "3"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M18 9a9 9 0 0 1-9 9"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 600,
+        fontSize: 13,
+        color: active ? 'var(--green)' : 'var(--ink)'
+      }
+    }, p.name), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 10.5,
+        color: 'var(--faint)'
+      }
+    }, p.path)), active ? /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginLeft: 'auto',
+        fontSize: 10,
+        letterSpacing: '.12em',
+        color: 'var(--green)'
+      }
+    }, "\u5F53\u524D") : null);
+  })), /*#__PURE__*/React.createElement(SectionHead, {
+    title: "\u9879\u76EE\u914D\u7F6E",
+    style: {
+      padding: '18px 14px 8px'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '0 14px',
+      background: 'var(--panel)',
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      padding: 14,
+      display: 'grid',
+      gap: 12
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "\u6700\u5927\u5E76\u53D1",
+    type: "number",
+    defaultValue: String(project.concurrency)
+  }), /*#__PURE__*/React.createElement(Select, {
+    label: "\u5DE5\u4F5C\u6A21\u5F0F",
+    defaultValue: project.autonomy,
+    options: [{
+      value: 'manual',
+      label: 'manual · 手动'
+    }, {
+      value: 'auto-easy',
+      label: 'auto-easy · 自动执行 Easy'
+    }, {
+      value: 'auto-approved',
+      label: 'auto-approved · 自动执行已批准'
+    }]
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "solid",
+    style: {
+      minHeight: 44
+    }
+  }, "\u4FDD\u5B58\u914D\u7F6E")));
+}
+Object.assign(window, {
+  MaestroMobTasks: MobTasks,
+  MaestroMobGates: MobGates,
+  MaestroMobEvents: MobEvents,
+  MaestroMobProjects: MobProjects
+});
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/console_mobile/MobileViews.jsx", error: String((e && e.message) || e) }); }
+
+__ds_ns.Button = __ds_scope.Button;
+
+__ds_ns.ComplexityBadge = __ds_scope.ComplexityBadge;
+
+__ds_ns.CountBadge = __ds_scope.CountBadge;
+
+__ds_ns.QuotaMeter = __ds_scope.QuotaMeter;
+
+__ds_ns.SectionHead = __ds_scope.SectionHead;
+
+__ds_ns.StatusChip = __ds_scope.StatusChip;
+
+__ds_ns.ComplexitySeg = __ds_scope.ComplexitySeg;
+
+__ds_ns.Input = __ds_scope.Input;
+
+__ds_ns.Select = __ds_scope.Select;
+
+__ds_ns.Textarea = __ds_scope.Textarea;
+
+__ds_ns.EventItem = __ds_scope.EventItem;
+
+__ds_ns.GateCard = __ds_scope.GateCard;
+
+__ds_ns.GateStripe = __ds_scope.GateStripe;
+
+__ds_ns.Panel = __ds_scope.Panel;
+
+__ds_ns.Timeline = __ds_scope.Timeline;
+
+__ds_ns.Toast = __ds_scope.Toast;
+
+})();
diff --git a/design/_ds_manifest.json b/design/_ds_manifest.json
new file mode 100644
index 0000000..468908f
--- /dev/null
+++ b/design/_ds_manifest.json
@@ -0,0 +1 @@
+{"namespace":"MaestroDesignSystem_a6a290","components":[{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"ComplexityBadge","sourcePath":"components/core/ComplexityBadge.jsx"},{"name":"CountBadge","sourcePath":"components/core/CountBadge.jsx"},{"name":"QuotaMeter","sourcePath":"components/core/QuotaMeter.jsx"},{"name":"SectionHead","sourcePath":"components/core/SectionHead.jsx"},{"name":"StatusChip","sourcePath":"components/core/StatusChip.jsx"},{"name":"ComplexitySeg","sourcePath":"components/forms/ComplexitySeg.jsx"},{"name":"Input","sourcePath":"components/forms/Input.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Textarea","sourcePath":"components/forms/Textarea.jsx"},{"name":"EventItem","sourcePath":"components/surfaces/EventItem.jsx"},{"name":"GateCard","sourcePath":"components/surfaces/GateCard.jsx"},{"name":"GateStripe","sourcePath":"components/surfaces/GateCard.jsx"},{"name":"Panel","sourcePath":"components/surfaces/Panel.jsx"},{"name":"Timeline","sourcePath":"components/surfaces/Timeline.jsx"},{"name":"Toast","sourcePath":"components/surfaces/Toast.jsx"}],"startingPoints":[{"name":"Button","path":"components/core/Button.jsx","previewPath":"components/core/core.card.html","kind":"component","section":"Components","subtitle":"五种变体的等宽直角按钮","viewport":"700x180"},{"name":"console","path":"ui_kits/console/index.html","previewPath":"ui_kits/console/index.html","kind":"screen","section":"Screens","subtitle":"Maestro Web 调度台整屏","viewport":"1440x900"}],"cards":[{"path":"guidelines/brand-glyphs.card.html","group":"Brand","viewport":"700x280","subtitle":"双色调图标集：基础笔画中性灰 + 语义元素信号色 · 24×24 · 2px 圆头描边 · assets/icons/","name":"图标 · Icons"},{"path":"guidelines/brand-logo.card.html","group":"Brand","viewport":"700x230","subtitle":"像素章鱼图案：一脑多臂 · 横排锁定 + 独立方形徽标","name":"Logo"},{"path":"guidelines/brand-motion.card.html","group":"Brand","viewport":"700x150","subtitle":"动效三件套：blink（光标）· pulse（等待/执行）· rise（入场）","name":"动效 · Motion"},{"path":"guidelines/brand-texture.card.html","group":"Brand","viewport":"700x160","subtitle":"氛围层：1px 扫描线 + 暗角；琥珀斜纹警示条","name":"质感 · Texture"},{"path":"guidelines/colors-ink.card.html","group":"Colors","viewport":"700x130","subtitle":"文字三档：ink / muted / faint","name":"文字色 · Ink"},{"path":"guidelines/colors-light.card.html","group":"Colors","viewport":"700x180","subtitle":"Light 主题：<html data-theme=&quot;light&quot;> 激活，信号色加深保对比","name":"Light 主题"},{"path":"guidelines/colors-signals.card.html","group":"Colors","viewport":"700x300","subtitle":"五个磷光信号色 + 状态机分组全展示（审批闸已由琥珀改为磷光紫）","name":"信号色 · Signals"},{"path":"guidelines/colors-surfaces.card.html","group":"Colors","viewport":"700x150","subtitle":"碳绿基底四层抬升 + 两档描边","name":"基底 · Surfaces"},{"path":"guidelines/colors-tints.card.html","group":"Colors","viewport":"700x140","subtitle":"信号色 7–8% 透明底 + dim 边框的 chip 配方","name":"信号底 · Tints"},{"path":"components/core/core.card.html","group":"Components","viewport":"700x280","subtitle":"Button 五变体 · StatusChip · ComplexityBadge · CountBadge · QuotaMeter · SectionHead","name":"Core · 按钮与徽章"},{"path":"components/forms/forms.card.html","group":"Components","viewport":"700x240","subtitle":"Input · Select · Textarea(danger) · ComplexitySeg（含智能段）","name":"Forms · 表单控件"},{"path":"components/surfaces/surfaces.card.html","group":"Components","viewport":"700x400","subtitle":"GateCard 审批闸 · Toast · EventItem 事件流 · Timeline 时间线 · Panel","name":"Surfaces · 面板与反馈"},{"path":"ui_kits/console_mobile/index.html","group":"Console","viewport":"390x760","subtitle":"单栏 + 底部 Tab（任务/审批/事件/项目）· 触控目标 ≥44px · 可点击","name":"移动版调度台"},{"path":"ui_kits/console/index.html","group":"Console","viewport":"1440x900","subtitle":"三栏看板整屏复刻：项目 · 审批闸+任务树 · 事件流（可点击）","name":"Web 调度台"},{"path":"guidelines/spacing-borders.card.html","group":"Spacing","viewport":"700x150","subtitle":"边框语言：细线两档 · 虚线空态 · 2px 左侧强调边","name":"边框 · Borders"},{"path":"guidelines/spacing-glow.card.html","group":"Spacing","viewport":"700x150","subtitle":"辉光替代阴影；黑色外阴影只给浮层","name":"辉光 · Glow"},{"path":"guidelines/spacing-radius.card.html","group":"Spacing","viewport":"700x150","subtitle":"圆角体系：控件 3–4px · 面板 6px · 浮层 10px · 圆形只属于状态点","name":"圆角 · Radius"},{"path":"guidelines/spacing-scale.card.html","group":"Spacing","viewport":"700x160","subtitle":"间距阶 4–22px 与控件内边距","name":"间距 · Scale"},{"path":"guidelines/type-family.card.html","group":"Type","viewport":"700x170","subtitle":"单字族：IBM Plex Mono + Noto Sans SC 等宽中文混排","name":"字族 · Mono"},{"path":"guidelines/type-scale.card.html","group":"Type","viewport":"700x200","subtitle":"字号阶 10–40px，正文基准 13px","name":"字号阶 · Scale"},{"path":"guidelines/type-tracking.card.html","group":"Type","viewport":"700x170","subtitle":"层级靠字距：.04em 标题 → .35em logo 副标","name":"字距 · Tracking"}],"templates":[],"globalCssPaths":["tokens/fonts.css","tokens/colors.css","tokens/typography.css","tokens/effects.css","styles.css"],"tokens":[{"name":"--bg","value":"#0a0d0b","kind":"color","definedIn":"tokens/colors.css"},{"name":"--bg-deep","value":"#070908","kind":"color","definedIn":"tokens/colors.css"},{"name":"--panel","value":"#10140f","kind":"color","definedIn":"tokens/colors.css"},{"name":"--panel-2","value":"#151b14","kind":"color","definedIn":"tokens/colors.css"},{"name":"--line","value":"#232d23","kind":"color","definedIn":"tokens/colors.css"},{"name":"--line-soft","value":"#1a221a","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ink","value":"#d8e4d4","kind":"color","definedIn":"tokens/colors.css"},{"name":"--muted","value":"#76876f","kind":"color","definedIn":"tokens/colors.css"},{"name":"--faint","value":"#4a5747","kind":"color","definedIn":"tokens/colors.css"},{"name":"--green","value":"#5fdd7d","kind":"color","definedIn":"tokens/colors.css"},{"name":"--green-dim","value":"#2e6b3d","kind":"color","definedIn":"tokens/colors.css"},{"name":"--violet","value":"#b88ef5","kind":"color","definedIn":"tokens/colors.css"},{"name":"--violet-dim","value":"#503070","kind":"color","definedIn":"tokens/colors.css"},{"name":"--amber","value":"#f0b429","kind":"color","definedIn":"tokens/colors.css"},{"name":"--amber-dim","value":"#6b5414","kind":"color","definedIn":"tokens/colors.css"},{"name":"--red","value":"#ff5d5d","kind":"color","definedIn":"tokens/colors.css"},{"name":"--red-dim","value":"#6b2424","kind":"color","definedIn":"tokens/colors.css"},{"name":"--cyan","value":"#59c8d8","kind":"color","definedIn":"tokens/colors.css"},{"name":"--cyan-dim","value":"#1e4e57","kind":"color","definedIn":"tokens/colors.css"},{"name":"--glow-green","value":"0 0 12px rgba(95, 221, 125, .45)","kind":"shadow","definedIn":"tokens/colors.css"},{"name":"--glow-violet","value":"0 0 14px rgba(184, 142, 245, .4)","kind":"shadow","definedIn":"tokens/colors.css"},{"name":"--glow-cyan","value":"0 0 18px rgba(89, 200, 216, .5)","kind":"shadow","definedIn":"tokens/colors.css"},{"name":"--glow-red","value":"0 0 14px rgba(255, 93, 93, .3)","kind":"shadow","definedIn":"tokens/colors.css"},{"name":"--surface-page","value":"var(--bg)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-rail","value":"var(--bg-deep)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-card","value":"var(--panel)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-raised","value":"var(--panel-2)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--text-body","value":"var(--ink)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-secondary","value":"var(--muted)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-disabled","value":"var(--faint)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--border-default","value":"var(--line)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--border-soft","value":"var(--line-soft)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--accent","value":"var(--green)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--accent-dim","value":"var(--green-dim)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-go","value":"var(--green)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-gate","value":"var(--violet)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-bad","value":"var(--red)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-run","value":"var(--cyan)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--bg","value":"#f3f6f1","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--bg-deep","value":"#e9eee6","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--panel","value":"#fcfdfb","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--panel-2","value":"#e4ebe1","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--line","value":"#c9d4c6","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--line-soft","value":"#dbe3d8","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--ink","value":"#1d251b","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--muted","value":"#5c6b57","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--faint","value":"#92a08c","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--green","value":"#1b8f46","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--green-dim","value":"#b5e2c3","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--violet","value":"#7747d1","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--violet-dim","value":"#dcccf6","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--amber","value":"#946d06","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--amber-dim","value":"#ecd9a0","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--red","value":"#cd3434","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--red-dim","value":"#f2baba","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--cyan","value":"#0b7488","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--cyan-dim","value":"#b2dfe7","kind":"color","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--glow-green","value":"0 0 10px rgba(27, 143, 70, .25)","kind":"shadow","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--glow-violet","value":"0 0 10px rgba(119, 71, 209, .22)","kind":"shadow","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--glow-cyan","value":"0 0 12px rgba(11, 116, 136, .25)","kind":"shadow","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--glow-red","value":"0 0 10px rgba(205, 52, 52, .2)","kind":"shadow","definedIn":"tokens/colors.css","scope":"[data-theme=\"light\"]"},{"name":"--mono","value":"'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace","kind":"font","definedIn":"tokens/typography.css","annotation":"font"},{"name":"--font-body","value":"var(--mono)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-2xs","value":"10px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-xs","value":"11px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-sm","value":"12px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-md","value":"13px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-lg","value":"15px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-xl","value":"19px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-2xl","value":"20px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-num","value":"40px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-body","value":"1.55","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-doc","value":"1.7","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-tight","value":".04em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-label","value":".08em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-badge","value":".12em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-head","value":".22em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-logo","value":".28em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-widest","value":".35em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--radius-xs","value":"3px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-sm","value":"4px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-md","value":"6px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-lg","value":"10px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-dot","value":"50%","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--border-w","value":"1px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--border-accent-w","value":"2px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-1","value":"4px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-2","value":"6px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-3","value":"8px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-4","value":"10px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-5","value":"12px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-6","value":"14px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-7","value":"16px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-8","value":"20px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--space-9","value":"22px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--pad-btn","value":"6px 14px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--pad-btn-xs","value":"2px 8px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--pad-input","value":"7px 10px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--pad-chip","value":"1px 8px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--pad-card","value":"12px 14px","kind":"spacing","definedIn":"tokens/effects.css"},{"name":"--shadow-pop","value":"0 10px 30px rgba(0, 0, 0, .65)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--shadow-modal","value":"0 18px 60px rgba(0, 0, 0, .6)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--shadow-toast","value":"0 8px 30px rgba(0, 0, 0, .55)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--ease-fast","value":".12s","kind":"other","definedIn":"tokens/effects.css","annotation":"other"},{"name":"--ease-base","value":".2s ease","kind":"other","definedIn":"tokens/effects.css","annotation":"other"}],"themes":[{"selector":"[data-theme=\"light\"]","label":"Light"}],"fonts":[],"brandFonts":[{"family":"IBM Plex Mono","status":"ok","tokens":["--mono"],"path":"tokens/typography.css"}],"source":"spa"}
\ No newline at end of file
diff --git a/design/assets/icons/add.svg b/design/assets/icons/add.svg
new file mode 100644
index 0000000..3d96d3f
--- /dev/null
+++ b/design/assets/icons/add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="4" x2="12" y2="20" stroke="var(--icon-accent, #5fdd7d)"></line><line x1="4" y1="12" x2="20" y2="12" stroke="var(--icon-accent, #5fdd7d)"></line></svg>
\ No newline at end of file
diff --git a/design/assets/icons/close.svg b/design/assets/icons/close.svg
new file mode 100644
index 0000000..9bce1ff
--- /dev/null
+++ b/design/assets/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="5" x2="19" y2="19"></line><line x1="19" y1="5" x2="5" y2="19"></line></svg>
\ No newline at end of file
diff --git a/design/assets/icons/config.svg b/design/assets/icons/config.svg
new file mode 100644
index 0000000..30052e3
--- /dev/null
+++ b/design/assets/icons/config.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="12" y2="6"></line><circle cx="15" cy="6" r="2.5" stroke="var(--icon-accent, #5fdd7d)"></circle><line x1="18" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="5.5" y2="12"></line><circle cx="9" cy="12" r="2.5" stroke="var(--icon-accent, #5fdd7d)"></circle><line x1="12.5" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="12.5" y2="18"></line><circle cx="16" cy="18" r="2.5" stroke="var(--icon-accent, #5fdd7d)"></circle><line x1="19.5" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file
diff --git a/design/assets/icons/deps.svg b/design/assets/icons/deps.svg
new file mode 100644
index 0000000..c8a2cf2
--- /dev/null
+++ b/design/assets/icons/deps.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"></rect><rect x="14" y="14" width="7" height="7" rx="1.5"></rect><line x1="10" y1="10" x2="14" y2="14" stroke="var(--icon-accent, #f0b429)"></line></svg>
\ No newline at end of file
diff --git a/design/assets/icons/event.svg b/design/assets/icons/event.svg
new file mode 100644
index 0000000..5efd235
--- /dev/null
+++ b/design/assets/icons/event.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 12 7 12 10 5 14 19 17 12 22 12" stroke="var(--icon-accent, #59c8d8)"></polyline></svg>
\ No newline at end of file
diff --git a/design/assets/icons/flow.svg b/design/assets/icons/flow.svg
new file mode 100644
index 0000000..c1e2502
--- /dev/null
+++ b/design/assets/icons/flow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="12" x2="19" y2="12"></line><polyline points="13 6 19 12 13 18" stroke="var(--icon-accent, #59c8d8)"></polyline></svg>
\ No newline at end of file
diff --git a/design/assets/icons/gate.svg b/design/assets/icons/gate.svg
new file mode 100644
index 0000000..c44e9d5
--- /dev/null
+++ b/design/assets/icons/gate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 L22 21 L2 21 Z"></path><line x1="12" y1="10" x2="12" y2="14" stroke="var(--icon-accent, #b88ef5)"></line><line x1="12" y1="17.5" x2="12" y2="17.51" stroke="var(--icon-accent, #b88ef5)"></line></svg>
\ No newline at end of file
diff --git a/design/assets/icons/git.svg b/design/assets/icons/git.svg
new file mode 100644
index 0000000..e5d0c12
--- /dev/null
+++ b/design/assets/icons/git.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9" stroke="var(--icon-accent, #5fdd7d)"></path></svg>
\ No newline at end of file
diff --git a/design/assets/icons/project.svg b/design/assets/icons/project.svg
new file mode 100644
index 0000000..a768d24
--- /dev/null
+++ b/design/assets/icons/project.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7 a2 2 0 0 1 2-2 h4 l2 3 h8 a2 2 0 0 1 2 2 v8 a2 2 0 0 1-2 2 H5 a2 2 0 0 1-2-2 Z"></path></svg>
\ No newline at end of file
diff --git a/design/assets/icons/ready.svg b/design/assets/icons/ready.svg
new file mode 100644
index 0000000..de52463
--- /dev/null
+++ b/design/assets/icons/ready.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4 L19 12 L7 20 Z" stroke="var(--icon-accent, #5fdd7d)"></path></svg>
\ No newline at end of file
diff --git a/design/assets/icons/reason.svg b/design/assets/icons/reason.svg
new file mode 100644
index 0000000..36064bb
--- /dev/null
+++ b/design/assets/icons/reason.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 4 5 14 18 14"></polyline><polyline points="13 9 18 14 13 19" stroke="var(--icon-accent, #f0b429)"></polyline></svg>
\ No newline at end of file
diff --git a/design/assets/icons/running.svg b/design/assets/icons/running.svg
new file mode 100644
index 0000000..ee82d11
--- /dev/null
+++ b/design/assets/icons/running.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="3" fill="var(--icon-accent, #59c8d8)" stroke="none"></circle></svg>
\ No newline at end of file
diff --git a/design/assets/icons/search.svg b/design/assets/icons/search.svg
new file mode 100644
index 0000000..a181aa6
--- /dev/null
+++ b/design/assets/icons/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5"></circle><line x1="15.5" y1="15.5" x2="21" y2="21" stroke="var(--icon-accent, #5fdd7d)"></line></svg>
\ No newline at end of file
diff --git a/design/assets/icons/sync.svg b/design/assets/icons/sync.svg
new file mode 100644
index 0000000..21da67a
--- /dev/null
+++ b/design/assets/icons/sync.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5" stroke="var(--icon-accent, #5fdd7d)"></path></svg>
\ No newline at end of file
diff --git a/design/assets/icons/task.svg b/design/assets/icons/task.svg
new file mode 100644
index 0000000..de7baf9
--- /dev/null
+++ b/design/assets/icons/task.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2.5"></rect><polyline points="8 12 11 15 16 9" stroke="var(--icon-accent, #5fdd7d)"></polyline></svg>
\ No newline at end of file
diff --git a/design/components/core/Button.d.ts b/design/components/core/Button.d.ts
new file mode 100644
index 0000000..e120964
--- /dev/null
+++ b/design/components/core/Button.d.ts
@@ -0,0 +1,16 @@
+/**
+ * Maestro 按钮。直角、等宽字体、hover 抬升或辉光。
+ * @startingPoint section="Components" subtitle="五种变体的等宽直角按钮" viewport="700x180"
+ */
+export interface ButtonProps {
+  /** 'default' 描边 · 'solid' 实心绿(主操作) · 'ghost' 无边框 · 'accept' 绿描边(通过) · 'reject' 红描边(驳回) */
+  variant?: 'default' | 'solid' | 'ghost' | 'accept' | 'reject';
+  /** 'xs' 紧凑尺寸（区块头内联动作） */
+  size?: 'xs';
+  disabled?: boolean;
+  type?: 'button' | 'submit';
+  onClick?: () => void;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+export declare function Button(props: ButtonProps): JSX.Element;
diff --git a/design/components/core/Button.jsx b/design/components/core/Button.jsx
new file mode 100644
index 0000000..fe5f3d5
--- /dev/null
+++ b/design/components/core/Button.jsx
@@ -0,0 +1,31 @@
+const css = `
+.m-btn{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:transparent;color:var(--ink);border:1px solid var(--line);padding:6px 14px;cursor:pointer;transition:all .12s;border-radius:var(--radius-sm,4px);white-space:nowrap}
+.m-btn:hover{border-color:var(--muted);background:var(--panel-2)}
+.m-btn--xs{padding:2px 8px;font-size:11px}
+.m-btn--ghost{border-color:transparent;color:var(--muted)}
+.m-btn--ghost:hover{color:var(--green);border-color:var(--green-dim);background:transparent}
+.m-btn--solid{background:var(--green);color:var(--bg-deep);border-color:var(--green)}
+.m-btn--solid:hover{background:#79ec94;border-color:#79ec94;box-shadow:0 0 14px rgba(95,221,125,.35)}
+.m-btn--accept{border-color:var(--green-dim);color:var(--green)}
+.m-btn--accept:hover{background:var(--green);color:var(--bg-deep);border-color:var(--green);box-shadow:0 0 14px rgba(95,221,125,.3)}
+.m-btn--reject{border-color:var(--red-dim);color:var(--red)}
+.m-btn--reject:hover{background:var(--red);color:var(--bg-deep);border-color:var(--red);box-shadow:0 0 14px rgba(255,93,93,.3)}
+.m-btn:disabled{opacity:.4;cursor:not-allowed}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-btn-css')) return;
+  const s = document.createElement('style'); s.id = 'm-btn-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+
+export function Button({ variant = 'default', size, disabled, onClick, type = 'button', style, children }) {
+  ensureCss();
+  const cls = ['m-btn'];
+  if (variant !== 'default') cls.push('m-btn--' + variant);
+  if (size === 'xs') cls.push('m-btn--xs');
+  return (
+    <button type={type} className={cls.join(' ')} disabled={disabled} onClick={onClick} style={style}>
+      {children}
+    </button>
+  );
+}
diff --git a/design/components/core/Button.prompt.md b/design/components/core/Button.prompt.md
new file mode 100644
index 0000000..170905d
--- /dev/null
+++ b/design/components/core/Button.prompt.md
@@ -0,0 +1,10 @@
+Maestro 的按钮：直角等宽，描边为默认形态，实心绿仅用于每屏最多一个主操作；accept/reject 成对出现在审批闸。
+
+```jsx
+<Button variant="solid">创建任务</Button>
+<Button variant="accept">✓ 通过</Button>
+<Button variant="reject">✕ 驳回</Button>
+<Button variant="ghost" size="xs">+ 新建</Button>
+```
+
+变体：`default`（描边）· `solid`（主操作）· `ghost`（低调内联）· `accept` / `reject`（审批对，hover 填充信号色+辉光）。`size="xs"` 用于区块头内的小动作。disabled = opacity .4。
diff --git a/design/components/core/ComplexityBadge.d.ts b/design/components/core/ComplexityBadge.d.ts
new file mode 100644
index 0000000..db2eae2
--- /dev/null
+++ b/design/components/core/ComplexityBadge.d.ts
@@ -0,0 +1,7 @@
+/**
+ * 复杂度徽章：HARD（红）/ MED（琥珀）/ EASY（绿），信号色 7% 透明底。
+ */
+export interface ComplexityBadgeProps {
+  complexity?: 'hard' | 'medium' | 'easy';
+}
+export declare function ComplexityBadge(props: ComplexityBadgeProps): JSX.Element;
diff --git a/design/components/core/ComplexityBadge.jsx b/design/components/core/ComplexityBadge.jsx
new file mode 100644
index 0000000..897b146
--- /dev/null
+++ b/design/components/core/ComplexityBadge.jsx
@@ -0,0 +1,17 @@
+const css = `
+.m-cplx{flex:none;display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;padding:1px 7px;border:1px solid;border-radius:var(--radius-xs,3px)}
+.m-cplx--hard{color:var(--red);border-color:var(--red-dim);background:rgba(255,93,93,.07)}
+.m-cplx--medium{color:var(--amber);border-color:var(--amber-dim);background:rgba(240,180,41,.07)}
+.m-cplx--easy{color:var(--green);border-color:var(--green-dim);background:rgba(95,221,125,.07)}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-cplx-css')) return;
+  const s = document.createElement('style'); s.id = 'm-cplx-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+const LABEL = { hard: 'HARD', medium: 'MED', easy: 'EASY' };
+
+export function ComplexityBadge({ complexity = 'medium' }) {
+  ensureCss();
+  return <span className={'m-cplx m-cplx--' + complexity}>{LABEL[complexity] || complexity}</span>;
+}
diff --git a/design/components/core/ComplexityBadge.prompt.md b/design/components/core/ComplexityBadge.prompt.md
new file mode 100644
index 0000000..431ae5b
--- /dev/null
+++ b/design/components/core/ComplexityBadge.prompt.md
@@ -0,0 +1,6 @@
+复杂度徽章：任务行右侧的 HARD / MED / EASY 三级标签，红/琥珀/绿 + 7% 透明信号底。
+
+```jsx
+<ComplexityBadge complexity="hard" />
+<ComplexityBadge complexity="easy" />
+```
diff --git a/design/components/core/CountBadge.d.ts b/design/components/core/CountBadge.d.ts
new file mode 100644
index 0000000..407c33d
--- /dev/null
+++ b/design/components/core/CountBadge.d.ts
@@ -0,0 +1,11 @@
+/**
+ * 顶栏计数徽章：⚠ 待审批（紫脉冲）· ▸ 待执行（绿）· ◉ 执行中（青）· ⛓ 被阻塞（琥珀虚线边）· Σ 总量（中性）。hover 展开文字标签；count 为 0 时灰化。
+ */
+export interface CountBadgeProps {
+  kind?: 'gate' | 'ready' | 'run' | 'blocked' | 'total';
+  count?: number;
+  /** 覆盖默认中文标签 */
+  label?: string;
+  title?: string;
+}
+export declare function CountBadge(props: CountBadgeProps): JSX.Element;
diff --git a/design/components/core/CountBadge.jsx b/design/components/core/CountBadge.jsx
new file mode 100644
index 0000000..01ac41d
--- /dev/null
+++ b/design/components/core/CountBadge.jsx
@@ -0,0 +1,40 @@
+const css = `
+.m-bdg{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;line-height:1;letter-spacing:.08em;height:28px;padding:0 10px;cursor:default;white-space:nowrap;border-radius:var(--radius-sm,4px)}
+.m-bdg .m-bdg-ico{margin-right:5px;font-size:12px;line-height:1;font-family:var(--mono)}
+.m-bdg .m-bdg-n{font-weight:700}
+.m-bdg .m-bdg-label{max-width:0;opacity:0;overflow:hidden;transition:max-width .28s ease,opacity .22s ease,margin-left .28s ease}
+.m-bdg:hover .m-bdg-label{max-width:8em;opacity:1;margin-left:5px}
+.m-bdg--gate{color:var(--violet);border:1px solid var(--violet-dim)}
+.m-bdg--gate:not(.m-bdg--zero){animation:maestro-pulse 2.2s infinite}
+.m-bdg--ready{color:var(--green);border:1px solid var(--green-dim)}
+.m-bdg--run{color:var(--cyan);border:1px solid var(--cyan-dim)}
+.m-bdg--run:not(.m-bdg--zero) .m-bdg-ico{animation:maestro-pulse .9s infinite}
+.m-bdg--blocked{color:var(--amber);border:1px dashed var(--amber-dim)}
+.m-bdg--total{color:var(--ink);border:1px solid var(--line)}
+.m-bdg--zero{color:var(--faint);border-color:var(--line-soft);animation:none}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-bdg-css')) return;
+  const s = document.createElement('style'); s.id = 'm-bdg-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+const META = {
+  gate: { ico: '⚠', label: '项待审批' },
+  ready: { ico: '▸', label: '待执行' },
+  run: { ico: '◉', label: '执行中' },
+  blocked: { ico: '⛓', label: '被阻塞' },
+  total: { ico: 'Σ', label: '总量' },
+};
+
+export function CountBadge({ kind = 'ready', count = 0, label, title }) {
+  ensureCss();
+  const m = META[kind] || META.ready;
+  const cls = 'm-bdg m-bdg--' + kind + (count === 0 ? ' m-bdg--zero' : '');
+  return (
+    <span className={cls} title={title}>
+      <span className="m-bdg-ico">{m.ico}</span>
+      <span className="m-bdg-n">{count}</span>
+      <span className="m-bdg-label">{label || m.label}</span>
+    </span>
+  );
+}
diff --git a/design/components/core/CountBadge.prompt.md b/design/components/core/CountBadge.prompt.md
new file mode 100644
index 0000000..f84ffa7
--- /dev/null
+++ b/design/components/core/CountBadge.prompt.md
@@ -0,0 +1,9 @@
+顶栏徽章：图标 + 数字，hover 横向展开中文标签。三种语义固定：gate ⚠ 琥珀 / ready ▸ 绿 / run ◉ 青。
+
+```jsx
+<CountBadge kind="gate" count={2} />
+<CountBadge kind="ready" count={5} />
+<CountBadge kind="run" count={1} />
+```
+
+count=0 自动灰化并停掉脉冲动画。
diff --git a/design/components/core/QuotaMeter.d.ts b/design/components/core/QuotaMeter.d.ts
new file mode 100644
index 0000000..a368db8
--- /dev/null
+++ b/design/components/core/QuotaMeter.d.ts
@@ -0,0 +1,15 @@
+/**
+ * 额度/用量计量条：LED 分段小灯 + 同色加粗百分比，用量分级自动变色（≤80% 青 / >80% 琥珀 / >95% 红），已用格带辉光。
+ */
+export interface QuotaMeterProps {
+  /** 左侧小标签，如 "5h" / "周" */
+  label?: string;
+  /** 用量百分比 0–100 */
+  pct?: number;
+  /** 右侧弱化说明，如 "3h 8m 后重置" */
+  detail?: string;
+  /** 分段格数，默认 16 */
+  cells?: number;
+  style?: React.CSSProperties;
+}
+export declare function QuotaMeter(props: QuotaMeterProps): JSX.Element;
diff --git a/design/components/core/QuotaMeter.jsx b/design/components/core/QuotaMeter.jsx
new file mode 100644
index 0000000..e2c388d
--- /dev/null
+++ b/design/components/core/QuotaMeter.jsx
@@ -0,0 +1,24 @@
+// 额度计量条：LED 分段 + 用量分级变色（≤80% 青 / >80% 琥珀 / >95% 红，与产品 .agent-usage 阈值对齐）
+export function QuotaMeter({ label, pct = 0, detail, cells = 16, style }) {
+  const p = Math.max(0, Math.min(100, pct));
+  const filled = Math.round((p / 100) * cells);
+  const color = p > 95 ? 'var(--red)' : p > 80 ? 'var(--amber)' : 'var(--cyan)';
+  const glow = p > 95 ? 'rgba(255,93,93,.4)' : p > 80 ? 'rgba(240,180,41,.35)' : 'rgba(89,200,216,.4)';
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)', ...style }}
+      title={(label ? label + ' · ' : '') + p + '%' + (detail ? ' · ' + detail : '')}>
+      {label ? <span style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '.08em', flex: 'none' }}>{label}</span> : null}
+      <span style={{ display: 'inline-flex', gap: 2, padding: 3, background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderRadius: 3 }}>
+        {Array.from({ length: cells }, (_, i) => (
+          <span key={i} style={{
+            width: 4, height: 9, borderRadius: 1,
+            background: i < filled ? color : 'var(--panel-2)',
+            boxShadow: i < filled ? '0 0 5px ' + glow : 'none',
+          }}></span>
+        ))}
+      </span>
+      <b style={{ fontSize: 12, color }}>{p}%</b>
+      {detail ? <span style={{ fontSize: 10.5, color: 'var(--faint)' }}>{detail}</span> : null}
+    </span>
+  );
+}
diff --git a/design/components/core/QuotaMeter.prompt.md b/design/components/core/QuotaMeter.prompt.md
new file mode 100644
index 0000000..e42b499
--- /dev/null
+++ b/design/components/core/QuotaMeter.prompt.md
@@ -0,0 +1,9 @@
+额度计量条：agent 用量/配额的 LED 分段显示，按用量自动变色（青→琥珀→红），已用格带辉光。
+
+```jsx
+<QuotaMeter label="5h" pct={50} detail="3h 8m 后重置" />
+<QuotaMeter label="周" pct={78} detail="16h 38m 后重置" />
+<QuotaMeter pct={94} cells={24} />
+```
+
+`pct` 决定填充与颜色（≥70% 琥珀、≥90% 红）；`detail` 放重置时间等弱化说明；`cells` 调分段密度。
diff --git a/design/components/core/SectionHead.d.ts b/design/components/core/SectionHead.d.ts
new file mode 100644
index 0000000..f730f71
--- /dev/null
+++ b/design/components/core/SectionHead.d.ts
@@ -0,0 +1,14 @@
+/**
+ * 区块标题：▍色块标记 + 全大写宽字距标题，可挂右侧动作。
+ */
+export interface SectionHeadProps {
+  /** ▍标记颜色：绿（默认）/ 紫（审批）/ 琥珀（警示）/ 青（agent） */
+  mark?: 'green' | 'violet' | 'amber' | 'cyan';
+  title?: React.ReactNode;
+  /** 右侧动作（通常是 ghost xs 按钮） */
+  action?: React.ReactNode;
+  /** 滚动容器内吸顶 + 底缘淡出 */
+  sticky?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function SectionHead(props: SectionHeadProps): JSX.Element;
diff --git a/design/components/core/SectionHead.jsx b/design/components/core/SectionHead.jsx
new file mode 100644
index 0000000..17271fd
--- /dev/null
+++ b/design/components/core/SectionHead.jsx
@@ -0,0 +1,17 @@
+export function SectionHead({ mark = 'green', title, action, sticky, style }) {
+  const markColor = { green: 'var(--green)', amber: 'var(--amber)', cyan: 'var(--cyan)', violet: 'var(--violet)' }[mark] || 'var(--green)';
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 6,
+      fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.22em',
+      color: 'var(--muted)', textTransform: 'uppercase',
+      padding: '18px 0 10px',
+      ...(sticky ? { position: 'sticky', top: 0, zIndex: 5, background: 'linear-gradient(var(--bg) 75%, transparent)' } : {}),
+      ...style,
+    }}>
+      <span style={{ color: markColor, flex: 'none' }}>▍</span>
+      <span style={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', minWidth: 0 }}>{title}</span>
+      {action ? <span style={{ marginLeft: 'auto', flex: 'none' }}>{action}</span> : null}
+    </div>
+  );
+}
diff --git a/design/components/core/SectionHead.prompt.md b/design/components/core/SectionHead.prompt.md
new file mode 100644
index 0000000..d708390
--- /dev/null
+++ b/design/components/core/SectionHead.prompt.md
@@ -0,0 +1,6 @@
+区块标题：▍ + 全大写 .22em 字距小标题，Maestro 每个区块的开头。mark 颜色表达区块语义（amber=审批闸、cyan=agent）。
+
+```jsx
+<SectionHead title="任务树" action={<Button variant="ghost" size="xs">+ 新建任务</Button>} />
+<SectionHead mark="amber" title="审批闸 · 等待裁决" />
+```
diff --git a/design/components/core/StatusChip.d.ts b/design/components/core/StatusChip.d.ts
new file mode 100644
index 0000000..89234f2
--- /dev/null
+++ b/design/components/core/StatusChip.d.ts
@@ -0,0 +1,12 @@
+/**
+ * 任务状态 chip：圆点 + 压缩状态词，按状态机分组上色（等待类脉冲动画）。
+ */
+export interface StatusChipProps {
+  /** 状态机 16 态之一；决定颜色组与动画 */
+  status?: 'init' | 'analyzing' | 'plan_review' | 'decomposed' | 'speccing' | 'spec_review'
+    | 'ready' | 'blocked' | 'queued' | 'executing' | 'exec_review' | 'failed'
+    | 'needs_attention' | 'done' | 'paused' | 'cancelled';
+  /** 覆盖默认中文标签 */
+  label?: string;
+}
+export declare function StatusChip(props: StatusChipProps): JSX.Element;
diff --git a/design/components/core/StatusChip.jsx b/design/components/core/StatusChip.jsx
new file mode 100644
index 0000000..14421b1
--- /dev/null
+++ b/design/components/core/StatusChip.jsx
@@ -0,0 +1,46 @@
+const STATUS_LABEL = {
+  init: '新建', analyzing: '分析拆解中', plan_review: '待确认拆解',
+  decomposed: '已拆解', speccing: '写方案中', spec_review: '待确认方案',
+  ready: '可执行', blocked: '被依赖阻塞', queued: '排队中',
+  executing: '执行中', exec_review: '待审/合', failed: '失败',
+  needs_attention: '需人工', done: '完成', paused: '暂停', cancelled: '取消',
+};
+const STATUS_GROUP = {
+  init: 'idle', analyzing: 'work', speccing: 'work',
+  plan_review: 'gate', spec_review: 'gate', exec_review: 'gate',
+  decomposed: 'container', ready: 'go', queued: 'go', executing: 'run',
+  blocked: 'hold', paused: 'hold', failed: 'bad', needs_attention: 'bad',
+  done: 'done', cancelled: 'dead',
+};
+const css = `
+.m-chip{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;padding:1px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;border-radius:var(--radius-xs,3px)}
+.m-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
+.m-chip--work{color:var(--cyan);border-color:var(--cyan-dim)}
+.m-chip--gate{color:var(--violet);border-color:var(--violet-dim)}
+.m-chip--gate::before{animation:maestro-pulse 1.4s infinite}
+.m-chip--container{color:#9bb4c8;border-color:#2c3c4a}
+.m-chip--go{color:var(--green);border-color:var(--green-dim)}
+.m-chip--run{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(89,200,216,.25)}
+.m-chip--run::before{animation:maestro-pulse .8s infinite}
+.m-chip--hold{color:var(--faint)}
+.m-chip--bad{color:var(--red);border-color:var(--red-dim)}
+.m-chip--bad::before{animation:maestro-pulse 1s infinite}
+.m-chip--done{color:var(--bg-deep);background:var(--green);border-color:var(--green);font-weight:700}
+.m-chip--dead{color:var(--faint);text-decoration:line-through}
+.m-chip--dead::before{background:var(--faint)}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-chip-css')) return;
+  const s = document.createElement('style'); s.id = 'm-chip-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+
+export function StatusChip({ status = 'init', label }) {
+  ensureCss();
+  const group = STATUS_GROUP[status] || 'idle';
+  return (
+    <span className={'m-chip m-chip--' + group}>
+      {label || STATUS_LABEL[status] || status}
+    </span>
+  );
+}
diff --git a/design/components/core/StatusChip.prompt.md b/design/components/core/StatusChip.prompt.md
new file mode 100644
index 0000000..07a4dec
--- /dev/null
+++ b/design/components/core/StatusChip.prompt.md
@@ -0,0 +1,9 @@
+状态 chip：把 16 个状态机状态渲染成「圆点 + 中文短词」，颜色按组（gate=琥珀脉冲、run=青辉光、done=实心绿、bad=红脉冲）。
+
+```jsx
+<StatusChip status="executing" />
+<StatusChip status="exec_review" />
+<StatusChip status="done" />
+```
+
+传 `status` 即可，标签与颜色自动对应；`label` 可覆盖文字。等待审批/执行中/失败的圆点会脉冲。
diff --git a/design/components/core/core.card.html b/design/components/core/core.card.html
new file mode 100644
index 0000000..8d263b0
--- /dev/null
+++ b/design/components/core/core.card.html
@@ -0,0 +1,53 @@
+<!-- @dsCard group="Components" viewport="700x280" name="Core · 按钮与徽章" subtitle="Button 五变体 · StatusChip · ComplexityBadge · CountBadge · QuotaMeter · SectionHead" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:14px 16px}</style>
+</head><body><div id="root"></div>
+<script type="text/babel">
+const { Button, StatusChip, ComplexityBadge, CountBadge, SectionHead, QuotaMeter } = window.MaestroDesignSystem_a6a290;
+const row = { display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' };
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <div style={{ display: 'grid', gap: 12 }}>
+    <div style={row}>
+      <Button>默认</Button>
+      <Button variant="solid">创建任务</Button>
+      <Button variant="accept">✓ 通过</Button>
+      <Button variant="reject">✕ 驳回</Button>
+      <Button variant="ghost">+ 新建</Button>
+      <Button size="xs">⟳ 同步 todo</Button>
+      <Button disabled>禁用</Button>
+    </div>
+    <div style={row}>
+      <StatusChip status="ready" />
+      <StatusChip status="executing" />
+      <StatusChip status="exec_review" />
+      <StatusChip status="blocked" />
+      <StatusChip status="failed" />
+      <StatusChip status="done" />
+      <StatusChip status="cancelled" />
+    </div>
+    <div style={row}>
+      <ComplexityBadge complexity="hard" />
+      <ComplexityBadge complexity="medium" />
+      <ComplexityBadge complexity="easy" />
+      <span style={{ width: 10 }}></span>
+      <CountBadge kind="gate" count={2} />
+      <CountBadge kind="ready" count={5} />
+      <CountBadge kind="run" count={1} />
+      <CountBadge kind="blocked" count={1} />
+      <CountBadge kind="total" count={5} />
+      <CountBadge kind="run" count={0} />
+    </div>
+    <div style={row}>
+      <QuotaMeter label="5h" pct={50} detail="3h 8m 后重置" />
+      <QuotaMeter label="周" pct={78} detail="16h 38m 后重置" />
+      <QuotaMeter pct={94} />
+    </div>
+    <SectionHead title="任务树" style={{ padding: '4px 0 0' }} action={<Button variant="ghost" size="xs">+ 新建任务</Button>} />
+  </div>
+);
+</script></body></html>
diff --git a/design/components/forms/ComplexitySeg.d.ts b/design/components/forms/ComplexitySeg.d.ts
new file mode 100644
index 0000000..3d8b89d
--- /dev/null
+++ b/design/components/forms/ComplexitySeg.d.ts
@@ -0,0 +1,16 @@
+/**
+ * 复杂度分段选择：HARD / MEDIUM / EASY 三段，选中段填充对应信号色 dim 底。
+ * 可选第四段 auto（智能 · 由模型决定复杂度），青色信号。
+ */
+export interface ComplexitySegProps {
+  value?: 'hard' | 'medium' | 'easy' | 'auto';
+  defaultValue?: 'hard' | 'medium' | 'easy' | 'auto';
+  onChange?: (value: 'hard' | 'medium' | 'easy' | 'auto') => void;
+  /** 追加 auto 段（青色）：由模型决定复杂度 */
+  includeAuto?: boolean;
+  /** auto 段文字，默认 'AUTO'（可传本地化「智能」） */
+  autoLabel?: string;
+  /** 覆盖各段文字：{ hard, medium, easy, auto } 局部即可 */
+  labels?: Partial<Record<'hard' | 'medium' | 'easy' | 'auto', string>>;
+}
+export declare function ComplexitySeg(props: ComplexitySegProps): JSX.Element;
diff --git a/design/components/forms/ComplexitySeg.jsx b/design/components/forms/ComplexitySeg.jsx
new file mode 100644
index 0000000..f351905
--- /dev/null
+++ b/design/components/forms/ComplexitySeg.jsx
@@ -0,0 +1,32 @@
+const css = `
+.m-seg{display:inline-flex;border:1px solid var(--line);font-family:var(--mono);border-radius:var(--radius-sm,4px);overflow:hidden}
+.m-seg button{font-family:var(--mono);padding:7px 13px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--faint);background:transparent;border:none;border-radius:0}
+.m-seg button + button{border-left:1px solid var(--line)}
+.m-seg button.on-hard{background:var(--red-dim);color:var(--red)}
+.m-seg button.on-medium{background:var(--amber-dim);color:var(--amber)}
+.m-seg button.on-easy{background:var(--green-dim);color:var(--green)}
+.m-seg button.on-auto{background:var(--cyan-dim);color:var(--cyan)}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-seg-css')) return;
+  const s = document.createElement('style'); s.id = 'm-seg-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+const BASE_OPTS = [['hard', 'HARD'], ['medium', 'MEDIUM'], ['easy', 'EASY']];
+
+export function ComplexitySeg({ value, defaultValue = 'medium', onChange, includeAuto, autoLabel = 'AUTO', labels }) {
+  ensureCss();
+  const [inner, setInner] = React.useState(defaultValue);
+  const cur = value !== undefined ? value : inner;
+  const opts = includeAuto ? [...BASE_OPTS, ['auto', autoLabel]] : BASE_OPTS;
+  return (
+    <span className="m-seg">
+      {opts.map(([v, lab]) => (
+        <button key={v} type="button" className={cur === v ? 'on-' + v : ''}
+          onClick={() => { setInner(v); if (onChange) onChange(v); }}>
+          {(labels && labels[v]) || lab}
+        </button>
+      ))}
+    </span>
+  );
+}
diff --git a/design/components/forms/ComplexitySeg.prompt.md b/design/components/forms/ComplexitySeg.prompt.md
new file mode 100644
index 0000000..7dbe932
--- /dev/null
+++ b/design/components/forms/ComplexitySeg.prompt.md
@@ -0,0 +1,11 @@
+复杂度三段选择器，建任务表单用。选中段填充信号色 dim 底（红/琥珀/绿）。
+
+```jsx
+<ComplexitySeg defaultValue="medium" onChange={(v) => setCplx(v)} />
+```
+
+可加第四段 `auto`（青色，「智能」= 由模型决定复杂度）。`autoLabel` 传本地化文字，`labels` 覆盖任意段：
+
+```jsx
+<ComplexitySeg defaultValue="auto" includeAuto autoLabel="智能" />
+```
diff --git a/design/components/forms/Input.d.ts b/design/components/forms/Input.d.ts
new file mode 100644
index 0000000..07ef3cd
--- /dev/null
+++ b/design/components/forms/Input.d.ts
@@ -0,0 +1,17 @@
+/**
+ * 文本/数字输入框：深底直角，focus 绿 dim 边框 + 1px ring。可带顶部小标签与红色必填星。
+ */
+export interface InputProps {
+  /** 顶部 11px 字距标签 */
+  label?: string;
+  /** 标签后追加红色 * */
+  required?: boolean;
+  type?: 'text' | 'number';
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  width?: number | string;
+  style?: React.CSSProperties;
+}
+export declare function Input(props: InputProps): JSX.Element;
diff --git a/design/components/forms/Input.jsx b/design/components/forms/Input.jsx
new file mode 100644
index 0000000..b555a16
--- /dev/null
+++ b/design/components/forms/Input.jsx
@@ -0,0 +1,28 @@
+const css = `
+.m-label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
+.m-input{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);padding:7px 10px;outline:none;transition:border-color .12s;border-radius:var(--radius-sm,4px)}
+.m-input:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)}
+.m-input::placeholder{color:var(--faint)}
+.m-req{color:var(--red)}
+`;
+export function ensureFieldCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-field-css')) return;
+  const s = document.createElement('style'); s.id = 'm-field-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+
+export function Input({ label, required, type = 'text', placeholder, value, defaultValue, onChange, width, style }) {
+  ensureFieldCss();
+  const ctrl = (
+    <input className="m-input" type={type} placeholder={placeholder} value={value}
+      defaultValue={defaultValue} style={{ width, ...style }} autoComplete="off"
+      onChange={onChange ? (e) => onChange(e.target.value) : undefined} readOnly={value !== undefined && !onChange} />
+  );
+  if (!label) return ctrl;
+  return (
+    <label className="m-label">
+      <span>{label}{required ? <span className="m-req"> *</span> : null}</span>
+      {ctrl}
+    </label>
+  );
+}
diff --git a/design/components/forms/Input.prompt.md b/design/components/forms/Input.prompt.md
new file mode 100644
index 0000000..5061fb9
--- /dev/null
+++ b/design/components/forms/Input.prompt.md
@@ -0,0 +1,6 @@
+输入框：bg-deep 底、直角、focus 时绿 dim 描边+ring。占位文案给真实示例（如 `/path/to/repo`）。
+
+```jsx
+<Input label="名称" required placeholder="my-project" />
+<Input label="校验命令" placeholder="npm test（可空）" />
+```
diff --git a/design/components/forms/Select.d.ts b/design/components/forms/Select.d.ts
new file mode 100644
index 0000000..badd0d8
--- /dev/null
+++ b/design/components/forms/Select.d.ts
@@ -0,0 +1,13 @@
+/**
+ * 下拉选择（自绘弹层，非原生 select）：触发器与 Input 同形制，弹出磷光风格选项菜单——当前项绿色 ▍ 标记 + 抬升底。选项文案用「值 · 中文」格式（如 "manual · 手动"）。
+ */
+export interface SelectProps {
+  label?: string;
+  required?: boolean;
+  options?: Array<string | { value: string; label: string }>;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  style?: React.CSSProperties;
+}
+export declare function Select(props: SelectProps): JSX.Element;
diff --git a/design/components/forms/Select.jsx b/design/components/forms/Select.jsx
new file mode 100644
index 0000000..d00c937
--- /dev/null
+++ b/design/components/forms/Select.jsx
@@ -0,0 +1,69 @@
+import { ensureFieldCss } from './Input.jsx';
+
+const css = `
+.m-select{position:relative;display:inline-flex;flex-direction:column;min-width:120px}
+.m-select-trigger{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:7px 10px;cursor:pointer;outline:none;transition:border-color .12s;display:flex;align-items:center;gap:10px;text-align:left;width:100%}
+.m-select-trigger:hover{border-color:var(--muted)}
+.m-select-trigger.open,.m-select-trigger:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)}
+.m-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.m-select-caret{flex:none;font-size:8px;color:var(--faint);transition:transform .12s}
+.m-select-trigger.open .m-select-caret{transform:rotate(180deg)}
+.m-select-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:80;display:grid;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius-md,6px);padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.65);animation:maestro-rise .12s ease both;max-height:260px;overflow-y:auto}
+.m-select-opt{font-family:var(--mono);font-size:12.5px;text-align:left;background:transparent;color:var(--ink);border:none;border-radius:4px;padding:7px 10px 7px 8px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.m-select-opt:hover{background:var(--panel)}
+.m-select-opt.on{background:var(--panel-2);color:var(--green);font-weight:700}
+.m-select-mark{flex:none;width:8px;color:var(--green);font-size:10px}
+`;
+function ensureSelectCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-select-css')) return;
+  const s = document.createElement('style'); s.id = 'm-select-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+
+export function Select({ label, required, options = [], value, defaultValue, onChange, style }) {
+  ensureFieldCss();
+  ensureSelectCss();
+  const opts = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  const [inner, setInner] = React.useState(defaultValue !== undefined ? defaultValue : (opts[0] ? opts[0].value : ''));
+  const cur = value !== undefined ? value : inner;
+  const curOpt = opts.find((o) => o.value === cur);
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
+  }, [open]);
+  const pick = (v) => {
+    setInner(v); setOpen(false);
+    if (onChange) onChange(v);
+  };
+  const ctrl = (
+    <span className="m-select" ref={ref} style={style}>
+      <button type="button" className={'m-select-trigger' + (open ? ' open' : '')} onClick={() => setOpen(!open)}>
+        <span className="m-select-value">{curOpt ? curOpt.label : cur}</span>
+        <span className="m-select-caret">▼</span>
+      </button>
+      {open ? (
+        <span className="m-select-menu">
+          {opts.map((o) => (
+            <button type="button" key={o.value} className={'m-select-opt' + (o.value === cur ? ' on' : '')}
+              onClick={() => pick(o.value)}>
+              <span className="m-select-mark">{o.value === cur ? '▍' : ''}</span>{o.label}
+            </button>
+          ))}
+        </span>
+      ) : null}
+    </span>
+  );
+  if (!label) return ctrl;
+  return (
+    <label className="m-label">
+      <span>{label}{required ? <span className="m-req"> *</span> : null}</span>
+      {ctrl}
+    </label>
+  );
+}
diff --git a/design/components/forms/Select.prompt.md b/design/components/forms/Select.prompt.md
new file mode 100644
index 0000000..547a6eb
--- /dev/null
+++ b/design/components/forms/Select.prompt.md
@@ -0,0 +1,8 @@
+下拉选择，与 Input 同形制。选项标签遵循「英文值 · 中文说明」惯例。
+
+```jsx
+<Select label="工作模式" options={[
+  { value: 'manual', label: 'manual · 手动' },
+  { value: 'auto-easy', label: 'auto-easy · 自动执行 Easy' },
+]} />
+```
diff --git a/design/components/forms/Textarea.d.ts b/design/components/forms/Textarea.d.ts
new file mode 100644
index 0000000..c21905b
--- /dev/null
+++ b/design/components/forms/Textarea.d.ts
@@ -0,0 +1,16 @@
+/**
+ * 多行文本：纵向可拉伸。danger 形态（红 dim 边）用于驳回意见（reject 必填理由）。
+ */
+export interface TextareaProps {
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  minHeight?: number;
+  /** 红 dim 边框 — 驳回意见输入 */
+  danger?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Textarea(props: TextareaProps): JSX.Element;
diff --git a/design/components/forms/Textarea.jsx b/design/components/forms/Textarea.jsx
new file mode 100644
index 0000000..4b9463a
--- /dev/null
+++ b/design/components/forms/Textarea.jsx
@@ -0,0 +1,17 @@
+import { ensureFieldCss } from './Input.jsx';
+
+export function Textarea({ label, required, placeholder, value, defaultValue, onChange, minHeight = 72, danger, style }) {
+  ensureFieldCss();
+  const ctrl = (
+    <textarea className="m-input" placeholder={placeholder} value={value} defaultValue={defaultValue}
+      style={{ resize: 'vertical', minHeight, width: '100%', ...(danger ? { borderColor: 'var(--red-dim)' } : {}), ...style }}
+      onChange={onChange ? (e) => onChange(e.target.value) : undefined} readOnly={value !== undefined && !onChange} />
+  );
+  if (!label) return ctrl;
+  return (
+    <label className="m-label" style={{ width: '100%' }}>
+      <span>{label}{required ? <span className="m-req"> *</span> : null}</span>
+      {ctrl}
+    </label>
+  );
+}
diff --git a/design/components/forms/Textarea.prompt.md b/design/components/forms/Textarea.prompt.md
new file mode 100644
index 0000000..75e81fe
--- /dev/null
+++ b/design/components/forms/Textarea.prompt.md
@@ -0,0 +1,6 @@
+多行文本框。`danger` 形态用于驳回意见——Maestro 规定 reject 必须带改进意见。
+
+```jsx
+<Textarea label="改动方案" placeholder="改动内容 + 为什么这么做" />
+<Textarea danger placeholder="驳回理由（必填）" minHeight={56} />
+```
diff --git a/design/components/forms/forms.card.html b/design/components/forms/forms.card.html
new file mode 100644
index 0000000..c51626a
--- /dev/null
+++ b/design/components/forms/forms.card.html
@@ -0,0 +1,27 @@
+<!-- @dsCard group="Components" viewport="700x240" name="Forms · 表单控件" subtitle="Input · Select · Textarea(danger) · ComplexitySeg（含智能段）" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:14px 16px}</style>
+</head><body><div id="root"></div>
+<script type="text/babel">
+const { Input, Select, Textarea, ComplexitySeg } = window.MaestroDesignSystem_a6a290;
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <div style={{ display: 'grid', gap: 12 }}>
+    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap' }}>
+      <Input label="名称" required placeholder="my-project" />
+      <Input label="仓库路径" required placeholder="/path/to/repo" width={180} />
+      <Select label="工作模式" options={[
+        { value: 'manual', label: 'manual · 手动' },
+        { value: 'auto-easy', label: 'auto-easy · 自动执行 Easy' },
+        { value: 'auto-approved', label: 'auto-approved · 自动执行已批准' },
+      ]} />
+      <ComplexitySeg defaultValue="auto" includeAuto autoLabel="智能" />
+    </div>
+    <Textarea danger placeholder="驳回理由（必填）" minHeight={56} />
+  </div>
+);
+</script></body></html>
diff --git a/design/components/surfaces/EventItem.d.ts b/design/components/surfaces/EventItem.d.ts
new file mode 100644
index 0000000..d4e278b
--- /dev/null
+++ b/design/components/surfaces/EventItem.d.ts
@@ -0,0 +1,14 @@
+/**
+ * 事件流条目：左侧 5px 方形色标 + 事件类型 + 时间 + 详情，类型决定颜色。放在 ul 里使用。
+ */
+export interface EventItemProps {
+  /** 事件类型 → 中文标签 + 色标颜色 */
+  type?: 'task.created' | 'task.updated' | 'status.changed' | 'approval.requested'
+    | 'approval.granted' | 'approval.rejected' | 'run.started' | 'run.finished' | 'project.synced';
+  /** 右对齐时间文字，如 "14:02:31" */
+  time?: string;
+  detail?: React.ReactNode;
+  /** 覆盖默认类型标签 */
+  label?: string;
+}
+export declare function EventItem(props: EventItemProps): JSX.Element;
diff --git a/design/components/surfaces/EventItem.jsx b/design/components/surfaces/EventItem.jsx
new file mode 100644
index 0000000..8cd1cad
--- /dev/null
+++ b/design/components/surfaces/EventItem.jsx
@@ -0,0 +1,38 @@
+const css = `
+.m-ev{font-family:var(--mono);padding:7px 0 7px 12px;border-bottom:1px solid var(--line-soft);position:relative;font-size:11.5px;color:var(--ink);animation:maestro-rise .25s ease both;list-style:none}
+.m-ev::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--m-ev-c,var(--muted));border-radius:1.5px}
+.m-ev-head{display:flex;gap:8px;align-items:baseline}
+.m-ev-type{font-weight:600;color:var(--m-ev-c,var(--ink));letter-spacing:.04em}
+.m-ev-time{color:var(--faint);font-size:10.5px;margin-left:auto;flex:none}
+.m-ev-detail{color:var(--muted);margin-top:1px;word-break:break-word}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-ev-css')) return;
+  const s = document.createElement('style'); s.id = 'm-ev-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+const TYPE_META = {
+  'task.created': ['任务创建', 'var(--green)'],
+  'task.updated': ['任务更新', 'var(--muted)'],
+  'status.changed': ['状态变更', 'var(--cyan)'],
+  'approval.requested': ['请求审批', 'var(--violet)'],
+  'approval.granted': ['审批通过', 'var(--green)'],
+  'approval.rejected': ['审批驳回', 'var(--red)'],
+  'run.started': ['运行开始', 'var(--cyan)'],
+  'run.finished': ['运行结束', 'var(--cyan)'],
+  'project.synced': ['todo 同步', 'var(--green)'],
+};
+
+export function EventItem({ type = 'task.updated', time, detail, label }) {
+  ensureCss();
+  const [lab, color] = TYPE_META[type] || [type, 'var(--muted)'];
+  return (
+    <li className="m-ev" style={{ '--m-ev-c': color }}>
+      <div className="m-ev-head">
+        <span className="m-ev-type">{label || lab}</span>
+        {time ? <span className="m-ev-time">{time}</span> : null}
+      </div>
+      {detail ? <div className="m-ev-detail">{detail}</div> : null}
+    </li>
+  );
+}
diff --git a/design/components/surfaces/EventItem.prompt.md b/design/components/surfaces/EventItem.prompt.md
new file mode 100644
index 0000000..3a6c6d3
--- /dev/null
+++ b/design/components/surfaces/EventItem.prompt.md
@@ -0,0 +1,8 @@
+事件流条目：右栏审计流的一行——方形色标（注意：方的，不是圆点）+ 类型 + 时间 + 详情。
+
+```jsx
+<ul style={{ padding: 0 }}>
+  <EventItem type="approval.rejected" time="14:02" detail="重构 sync 模块 ↳ 缺少回滚方案" />
+  <EventItem type="run.started" time="14:05" detail="executor · worktree wt-127" />
+</ul>
+```
diff --git a/design/components/surfaces/GateCard.d.ts b/design/components/surfaces/GateCard.d.ts
new file mode 100644
index 0000000..71ec660
--- /dev/null
+++ b/design/components/surfaces/GateCard.d.ts
@@ -0,0 +1,33 @@
+/**
+ * 审批闸卡片：琥珀 dim 边 + 实心琥珀闸标签 + 产出文档块 + accept/reject 动作脚。配套 GateStripe 斜纹警示条。
+ */
+export interface GateCardProps {
+  /** 闸类型颜色：plan 拆解评审 · spec 方案评审 · exec 结果评审 */
+  gate?: 'plan' | 'spec' | 'exec';
+  /** 覆盖闸标签文字（多语言场景） */
+  kindLabel?: string;
+  title?: React.ReactNode;
+  /** 头部右侧 meta 文字 */
+  meta?: React.ReactNode;
+  /** 文档块上方 .18em 字距小标签，如 "改动方案（SPEC）" */
+  docLabel?: string;
+  /** 产出文本，渲染进 pre.doc（左侧绿 dim 强调边） */
+  doc?: string;
+  /** 底部动作行（accept / reject 按钮对） */
+  actions?: React.ReactNode;
+  /** 折叠时隐藏正文与动作脚，仅留头部 */
+  collapsed?: boolean;
+  /** 显示头部右上的折叠/展开 ▾▸ 按钮 */
+  foldable?: boolean;
+  onToggleFold?: () => void;
+  foldTitle?: string;
+  /** 头部右侧自定义元素（折叠按钮左侧） */
+  headerExtra?: React.ReactNode;
+  /** 头部双击回调（如全屏阅读） */
+  onHeaderDoubleClick?: () => void;
+  /** 头部/整卡 title 提示（如「双击全屏」） */
+  headerTitle?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function GateCard(props: GateCardProps): JSX.Element;
diff --git a/design/components/surfaces/GateCard.jsx b/design/components/surfaces/GateCard.jsx
new file mode 100644
index 0000000..a88608b
--- /dev/null
+++ b/design/components/surfaces/GateCard.jsx
@@ -0,0 +1,61 @@
+const css = `
+.m-gate{background:var(--panel);border:1px solid var(--violet-dim);font-family:var(--mono);color:var(--ink);animation:maestro-rise .25s ease both;border-radius:var(--radius-md,6px);overflow:hidden}
+.m-gate-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
+.m-gate--collapsed .m-gate-head{border-bottom:none}
+.m-gate-hx{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
+.m-gate-fold{font-family:var(--mono);font-size:12px;line-height:1;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:3px 7px;transition:color .12s,border-color .12s}
+.m-gate-fold:hover{color:var(--violet);border-color:var(--violet-dim)}
+.m-gate-kind{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--bg);background:var(--violet);padding:2px 8px;border-radius:var(--radius-xs,3px)}
+.m-gate-title{font-weight:600;font-size:13px}
+.m-gate-body{padding:12px 14px;font-size:12.5px}
+.m-gate-actions{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-soft)}
+.m-gate-doclabel{font-size:10.5px;color:var(--muted);letter-spacing:.18em;margin:8px 0 4px}
+.m-gate-doclabel:first-child{margin-top:0}
+.m-gate-doc{background:var(--bg-deep);border:1px solid var(--line-soft);border-left:2px solid var(--green-dim);padding:10px 12px;font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;color:var(--ink);margin:0;border-radius:var(--radius-sm,4px)}
+.m-gate-stripe{height:5px;background:repeating-linear-gradient(-45deg,var(--violet) 0 9px,transparent 9px 18px);opacity:.8;border-radius:3px}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-gate-css')) return;
+  const s = document.createElement('style'); s.id = 'm-gate-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+const GATE_LABEL = { plan: '拆解评审', spec: '方案评审', exec: '结果评审' };
+
+export function GateCard({ gate = 'spec', kindLabel, title, meta, docLabel, doc, actions, children, style, collapsed, foldable, onToggleFold, foldTitle, headerExtra, onHeaderDoubleClick, headerTitle }) {
+  ensureCss();
+  return (
+    <div className={'m-gate' + (collapsed ? ' m-gate--collapsed' : '')} style={style} onDoubleClick={onHeaderDoubleClick}>
+      <div className="m-gate-head" title={headerTitle}>
+        <span className="m-gate-kind">{kindLabel || GATE_LABEL[gate] || gate}</span>
+        <span className="m-gate-title">{title}</span>
+        {meta ? <span style={{ fontSize: 11, color: 'var(--muted)' }}>{meta}</span> : null}
+        {(headerExtra || foldable) ? (
+          <span className="m-gate-hx">
+            {headerExtra}
+            {foldable ? (
+              <button type="button" className="m-gate-fold" title={foldTitle}
+                onClick={(e) => { e.stopPropagation(); onToggleFold && onToggleFold(); }}>
+                {collapsed ? '▸' : '▾'}
+              </button>
+            ) : null}
+          </span>
+        ) : null}
+      </div>
+      {!collapsed ? (
+        <React.Fragment>
+          <div className="m-gate-body">
+            {docLabel ? <div className="m-gate-doclabel">{docLabel}</div> : null}
+            {doc ? <pre className="m-gate-doc">{doc}</pre> : null}
+            {children}
+          </div>
+          {actions ? <div className="m-gate-actions">{actions}</div> : null}
+        </React.Fragment>
+      ) : null}
+    </div>
+  );
+}
+
+export function GateStripe() {
+  ensureCss();
+  return <div className="m-gate-stripe"></div>;
+}
diff --git a/design/components/surfaces/GateCard.prompt.md b/design/components/surfaces/GateCard.prompt.md
new file mode 100644
index 0000000..af4cfca
--- /dev/null
+++ b/design/components/surfaces/GateCard.prompt.md
@@ -0,0 +1,10 @@
+审批闸卡片——Maestro 的核心交互单元。琥珀边框 + 实心琥珀闸标签，体内放 agent 产出文档，脚部放 accept/reject 按钮对（reject 必填理由）。
+
+```jsx
+<GateStripe />
+<GateCard gate="spec" title="重构 sync 模块" meta="maestro · MED"
+  docLabel="改动方案（SPEC）" doc={specText}
+  actions={<><Button variant="accept">✓ 通过</Button><Button variant="reject">✕ 驳回</Button></>} />
+```
+
+`GateStripe` 是审批区顶部的琥珀斜纹警示条，整区一条即可。
diff --git a/design/components/surfaces/Panel.d.ts b/design/components/surfaces/Panel.d.ts
new file mode 100644
index 0000000..14e4bff
--- /dev/null
+++ b/design/components/surfaces/Panel.d.ts
@@ -0,0 +1,9 @@
+/**
+ * 基础面板：--panel 底 + 1px --line 边，直角无阴影。表单、配置区的容器。
+ */
+export interface PanelProps {
+  children?: React.ReactNode;
+  padding?: string | number;
+  style?: React.CSSProperties;
+}
+export declare function Panel(props: PanelProps): JSX.Element;
diff --git a/design/components/surfaces/Panel.jsx b/design/components/surfaces/Panel.jsx
new file mode 100644
index 0000000..2f128fa
--- /dev/null
+++ b/design/components/surfaces/Panel.jsx
@@ -0,0 +1,10 @@
+export function Panel({ children, padding = '14px', style }) {
+  return (
+    <div style={{
+      background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md, 6px)',
+      fontFamily: 'var(--mono)', color: 'var(--ink)', padding, ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
diff --git a/design/components/surfaces/Panel.prompt.md b/design/components/surfaces/Panel.prompt.md
new file mode 100644
index 0000000..4500c57
--- /dev/null
+++ b/design/components/surfaces/Panel.prompt.md
@@ -0,0 +1,5 @@
+基础面板容器：panel 底 + line 边 + 直角。无阴影——阴影只属于浮层。
+
+```jsx
+<Panel><SectionHead title="新建项目" style={{ padding: 0 }} /> …表单… </Panel>
+```
diff --git a/design/components/surfaces/Timeline.d.ts b/design/components/surfaces/Timeline.d.ts
new file mode 100644
index 0000000..ea6cd5a
--- /dev/null
+++ b/design/components/surfaces/Timeline.d.ts
@@ -0,0 +1,18 @@
+/**
+ * 状态流转时间线：左侧 2px 竖线 + 圆点的只读事件序列，用于归档详情/任务历史。
+ */
+export interface TimelineItem {
+  /** 时间文字，如 "2026-06-12 14:02:31" */
+  time: string;
+  /** 事件文字，如 "执行中 → 待审/合" */
+  text: string;
+  /** 操作者/来源，如 "编排器 · 依赖满足自动放行" */
+  who?: string;
+  /** 圆点颜色（CSS 值），默认 --muted */
+  color?: string;
+}
+export interface TimelineProps {
+  items?: TimelineItem[];
+  style?: React.CSSProperties;
+}
+export declare function Timeline(props: TimelineProps): JSX.Element;
diff --git a/design/components/surfaces/Timeline.jsx b/design/components/surfaces/Timeline.jsx
new file mode 100644
index 0000000..47c5674
--- /dev/null
+++ b/design/components/surfaces/Timeline.jsx
@@ -0,0 +1,28 @@
+const css = `
+.m-tl{display:grid;font-family:var(--mono)}
+.m-tl-item{display:flex;gap:12px;align-items:baseline;padding:5px 0 5px 14px;font-size:12px;border-left:2px solid var(--line);position:relative;color:var(--ink)}
+.m-tl-item::before{content:'';position:absolute;left:-4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--m-tl-c,var(--muted))}
+.m-tl-time{flex:none;color:var(--faint);font-size:11px;min-width:130px}
+.m-tl-text{color:var(--ink)}
+.m-tl-who{color:var(--muted);font-size:11px}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-tl-css')) return;
+  const s = document.createElement('style'); s.id = 'm-tl-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+
+export function Timeline({ items = [], style }) {
+  ensureCss();
+  return (
+    <div className="m-tl" style={style}>
+      {items.map((it, i) => (
+        <div key={i} className="m-tl-item" style={it.color ? { '--m-tl-c': it.color } : null}>
+          <span className="m-tl-time">{it.time}</span>
+          <span className="m-tl-text">{it.text}</span>
+          {it.who ? <span className="m-tl-who">{it.who}</span> : null}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/design/components/surfaces/Timeline.prompt.md b/design/components/surfaces/Timeline.prompt.md
new file mode 100644
index 0000000..c018f88
--- /dev/null
+++ b/design/components/surfaces/Timeline.prompt.md
@@ -0,0 +1,9 @@
+状态流转时间线：归档详情/任务历史的只读事件序列——左竖线 + 圆点 + 时间/文字/操作者三段。
+
+```jsx
+<Timeline items={[
+  { time: '06-12 05:58', text: '审批驳回（方案评审）：缺少回滚方案', who: '审批人 you', color: 'var(--red)' },
+  { time: '06-12 06:10', text: '写方案中 → 待确认方案', who: '编排器' },
+  { time: '06-12 06:31', text: '审批通过（方案评审）', color: 'var(--green)' },
+]} />
+```
diff --git a/design/components/surfaces/Toast.d.ts b/design/components/surfaces/Toast.d.ts
new file mode 100644
index 0000000..b4ad2d2
--- /dev/null
+++ b/design/components/surfaces/Toast.d.ts
@@ -0,0 +1,10 @@
+/**
+ * Toast 提示：深底 + 信号色边框与文字（ok/err/warn），底部居中堆叠，8px 上移入场。
+ */
+export interface ToastProps {
+  /** 无 kind = 中性 ink；ok 绿 · err 红 · warn 琥珀 */
+  kind?: 'ok' | 'err' | 'warn';
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Toast(props: ToastProps): JSX.Element;
diff --git a/design/components/surfaces/Toast.jsx b/design/components/surfaces/Toast.jsx
new file mode 100644
index 0000000..d126cd1
--- /dev/null
+++ b/design/components/surfaces/Toast.jsx
@@ -0,0 +1,17 @@
+const css = `
+.m-toast{font-family:var(--mono);font-size:12.5px;background:var(--bg-deep);border:1px solid var(--line);color:var(--ink);padding:9px 16px;max-width:70vw;animation:m-toast-in .18s ease both;box-shadow:0 8px 30px rgba(0,0,0,.55);border-radius:var(--radius-md,6px)}
+.m-toast--err{border-color:var(--red);color:var(--red)}
+.m-toast--ok{border-color:var(--green-dim);color:var(--green)}
+.m-toast--warn{border-color:var(--amber-dim);color:var(--amber)}
+@keyframes m-toast-in{from{opacity:0;transform:translateY(8px)}}
+`;
+function ensureCss() {
+  if (typeof document === 'undefined' || document.getElementById('m-toast-css')) return;
+  const s = document.createElement('style'); s.id = 'm-toast-css'; s.textContent = css;
+  document.head.appendChild(s);
+}
+
+export function Toast({ kind, children, style }) {
+  ensureCss();
+  return <div className={'m-toast' + (kind ? ' m-toast--' + kind : '')} style={style}>{children}</div>;
+}
diff --git a/design/components/surfaces/Toast.prompt.md b/design/components/surfaces/Toast.prompt.md
new file mode 100644
index 0000000..0b806bb
--- /dev/null
+++ b/design/components/surfaces/Toast.prompt.md
@@ -0,0 +1,6 @@
+Toast：屏幕底部居中堆叠的提示条，深底 + 信号色描边同色文字。文案短促：「已通过」「驳回需填理由」。
+
+```jsx
+<Toast kind="ok">已通过 · 合并到 main</Toast>
+<Toast kind="err">驳回必须填写改进意见</Toast>
+```
diff --git a/design/components/surfaces/surfaces.card.html b/design/components/surfaces/surfaces.card.html
new file mode 100644
index 0000000..475074f
--- /dev/null
+++ b/design/components/surfaces/surfaces.card.html
@@ -0,0 +1,46 @@
+<!-- @dsCard group="Components" viewport="700x400" name="Surfaces · 面板与反馈" subtitle="GateCard 审批闸 · Toast · EventItem 事件流 · Timeline 时间线 · Panel" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:14px 16px}</style>
+</head><body><div id="root"></div>
+<script type="text/babel">
+const { GateCard, GateStripe, Toast, EventItem, Button, Timeline } = window.MaestroDesignSystem_a6a290;
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <div style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: 14 }}>
+    <div>
+      <GateStripe />
+      <GateCard gate="spec" title="重构 sync 模块" meta="maestro · MED" style={{ marginTop: 10 }}
+        docLabel="改动方案（SPEC）"
+        doc={"把轮询改为 WS 推送：\n1. store 层加 events 订阅\n2. web 端断线重连 + 指数退避"}
+        actions={<>
+          <Button variant="accept">✓ 通过</Button>
+          <Button variant="reject">✕ 驳回</Button>
+        </>} />
+      <div style={{ display: 'grid', gap: 8, marginTop: 12, justifyItems: 'start' }}>
+        <Toast kind="ok">已通过 · 进入 ready</Toast>
+        <Toast kind="err">驳回必须填写改进意见</Toast>
+        <Toast kind="warn">daemon 重连中…</Toast>
+      </div>
+      <div style={{ marginTop: 14 }}>
+        <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', marginBottom: 6 }}>状态流转时间线</div>
+        <Timeline items={[
+          { time: '06-12 05:58', text: '审批驳回（方案评审）：缺少回滚方案', who: 'you', color: 'var(--red)' },
+          { time: '06-12 06:10', text: '写方案中 → 待确认方案', who: '编排器' },
+          { time: '06-12 06:31', text: '审批通过（方案评审）', who: 'you', color: 'var(--green)' },
+        ]} />
+      </div>
+    </div>
+    <ul style={{ padding: 0, margin: 0 }}>
+      <EventItem type="task.created" time="13:58" detail="重构 sync 模块" />
+      <EventItem type="approval.requested" time="14:00" detail="spec_review · 等待裁决" />
+      <EventItem type="approval.rejected" time="14:02" detail="↳ 缺少回滚方案" />
+      <EventItem type="run.started" time="14:05" detail="executor · worktree wt-127" />
+      <EventItem type="status.changed" time="14:09" detail="executing → exec_review" />
+    </ul>
+  </div>
+);
+</script></body></html>
diff --git a/design/guidelines/brand-glyphs.card.html b/design/guidelines/brand-glyphs.card.html
new file mode 100644
index 0000000..381395f
--- /dev/null
+++ b/design/guidelines/brand-glyphs.card.html
@@ -0,0 +1,28 @@
+<!-- @dsCard group="Brand" viewport="700x280" subtitle="双色调图标集：基础笔画中性灰 + 语义元素信号色 · 24×24 · 2px 圆头描边 · assets/icons/" name="图标 · Icons" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px;display:grid;gap:10px}
+.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
+.g{border:1px solid var(--line-soft);border-radius:6px;padding:12px 4px 8px;text-align:center;color:var(--muted)}
+.g svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.f{font-size:9.5px;color:var(--muted);letter-spacing:.04em;margin-top:6px}
+.note{font-size:10px;color:var(--faint);letter-spacing:.06em;line-height:1.6}</style></head><body>
+<div class="grid">
+<div class="g" style="--icon-accent:var(--violet)"><svg viewBox="0 0 24 24"><path d="M12 3 L22 21 L2 21 Z"/><line x1="12" y1="10" x2="12" y2="14" stroke="var(--icon-accent)"/><line x1="12" y1="17.5" x2="12" y2="17.51" stroke="var(--icon-accent)"/></svg><div class="f">gate 待审批</div></div>
+<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><path d="M7 4 L19 12 L7 20 Z" stroke="var(--icon-accent)"/></svg><div class="f">ready 可执行</div></div>
+<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="var(--icon-accent)" stroke="none"/></svg><div class="f">running 执行中</div></div>
+<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><polyline points="2 12 7 12 10 5 14 19 17 12 22 12" stroke="var(--icon-accent)"/></svg><div class="f">event 事件</div></div>
+<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2.5"/><polyline points="8 12 11 15 16 9" stroke="var(--icon-accent)"/></svg><div class="f">task 任务</div></div>
+<div class="g" style="--icon-accent:var(--amber)"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><line x1="10" y1="10" x2="14" y2="14" stroke="var(--icon-accent)"/></svg><div class="f">deps 依赖</div></div>
+<div class="g" style="--icon-accent:var(--amber)"><svg viewBox="0 0 24 24"><polyline points="5 4 5 14 18 14"/><polyline points="13 9 18 14 13 19" stroke="var(--icon-accent)"/></svg><div class="f">reason 原因</div></div>
+<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18" stroke="var(--icon-accent)"/></svg><div class="f">flow 流转</div></div>
+<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9" stroke="var(--icon-accent)"/></svg><div class="f">git 项目仓库</div></div>
+<div class="g"><svg viewBox="0 0 24 24"><path d="M3 7 a2 2 0 0 1 2-2 h4 l2 3 h8 a2 2 0 0 1 2 2 v8 a2 2 0 0 1-2 2 H5 a2 2 0 0 1-2-2 Z"/></svg><div class="f">project 项目</div></div>
+<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5" stroke="var(--icon-accent)"/></svg><div class="f">sync 同步</div></div>
+<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="12" y2="6"/><circle cx="15" cy="6" r="2.5" stroke="var(--icon-accent)"/><line x1="18" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="5.5" y2="12"/><circle cx="9" cy="12" r="2.5" stroke="var(--icon-accent)"/><line x1="12.5" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="12.5" y2="18"/><circle cx="16" cy="18" r="2.5" stroke="var(--icon-accent)"/><line x1="19.5" y1="18" x2="21" y2="18"/></svg><div class="f">config 配置</div></div>
+<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="21" y2="21" stroke="var(--icon-accent)"/></svg><div class="f">search 搜索</div></div>
+<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="12" y1="4" x2="12" y2="20" stroke="var(--icon-accent)"/><line x1="4" y1="12" x2="20" y2="12" stroke="var(--icon-accent)"/></svg><div class="f">add 新建</div></div>
+<div class="g"><svg viewBox="0 0 24 24"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg><div class="f">close 关闭</div></div>
+</div>
+<div class="note">双色调规则：基础笔画 currentColor（默认 --muted）；语义元素 stroke=var(--icon-accent, 信号色回退)——内联使用时按语境覆盖，&lt;img&gt; 引用时用内置回退色。纯工具图标（project/close）保持单色。文件：assets/icons/&lt;name&gt;.svg · ▍/▮ 为品牌字符保留</div>
+</body></html>
diff --git a/design/guidelines/brand-logo.card.html b/design/guidelines/brand-logo.card.html
new file mode 100644
index 0000000..6c3a78a
--- /dev/null
+++ b/design/guidelines/brand-logo.card.html
@@ -0,0 +1,64 @@
+<!-- @dsCard group="Brand" viewport="700x230" subtitle="像素章鱼图案：一脑多臂 · 横排锁定 + 独立方形徽标" name="Logo" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+body{margin:0;background:var(--bg-deep);font-family:var(--mono);height:230px;display:flex;align-items:center;justify-content:center;gap:56px}
+canvas{image-rendering:pixelated;filter:drop-shadow(0 0 7px rgba(95,221,125,.4))}
+.lockup{display:flex;align-items:center;gap:16px}
+.logo-word{font-size:24px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:0 0 12px rgba(95,221,125,.45)}
+.cursor{animation:maestro-blink 1.1s steps(1) infinite;margin-left:1px}
+.logo-sub{margin-top:3px;font-size:11px;color:var(--muted);letter-spacing:.35em}
+.badge{width:108px;height:108px;border:1px solid var(--green-dim);border-radius:10px;display:flex;align-items:center;justify-content:center}
+.lab{font-size:10px;color:var(--faint);letter-spacing:.1em;text-align:center;margin-top:10px;white-space:nowrap}
+.col{text-align:center}
+.divider{width:1px;height:120px;background:var(--line-soft)}
+</style></head><body>
+
+<div class="col">
+  <div class="lockup">
+    <canvas id="markA" width="15" height="12"></canvas>
+    <div>
+      <div class="logo-word">MAESTRO<span class="cursor">▮</span></div>
+      <div class="logo-sub">多项目任务调度台</div>
+    </div>
+  </div>
+  <div class="lab">横排锁定 · 侧栏 / 文档页眉</div>
+</div>
+
+<div class="divider"></div>
+
+<div class="col">
+  <div class="badge"><canvas id="markB" width="15" height="12"></canvas></div>
+  <div class="lab">方形徽标 · favicon / 头像</div>
+</div>
+
+<script>
+// 像素章鱼 15×12 — L 高光 / G 磷光绿 / D 暗位 / E 眼
+const MAP = [
+  '.....LLLLL.....',
+  '...LLLLLLLLL...',
+  '..GGGGGGGGGGG..',
+  '..GGEEGGGEEGG..',
+  '..GGEEGGGEEGG..',
+  '..GGGGGGGGGGG..',
+  '...GGGGGGGGG...',
+  '...G..G.G..G...',
+  '...G..G.G..G...',
+  '..G...G.G...G..',
+  '..D...D.D...D..',
+  '.D...D...D...D.',
+];
+const INK = { L: '#79ec94', G: '#5fdd7d', D: '#2e6b3d', E: '#070908' };
+function draw(id, scale) {
+  const c = document.getElementById(id);
+  const ctx = c.getContext('2d');
+  MAP.forEach((row, y) => [...row].forEach((ch, x) => {
+    if (INK[ch]) { ctx.fillStyle = INK[ch]; ctx.fillRect(x, y, 1, 1); }
+  }));
+  c.style.width = (15 * scale) + 'px';
+  c.style.height = (12 * scale) + 'px';
+}
+draw('markA', 4.4);
+draw('markB', 5.6);
+</script>
+</body></html>
diff --git a/design/guidelines/brand-motion.card.html b/design/guidelines/brand-motion.card.html
new file mode 100644
index 0000000..454abdd
--- /dev/null
+++ b/design/guidelines/brand-motion.card.html
@@ -0,0 +1,13 @@
+<!-- @dsCard group="Brand" viewport="700x150" subtitle="动效三件套：blink（光标）· pulse（等待/执行）· rise（入场）" name="动效 · Motion" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:20px;display:flex;align-items:center;gap:24px;font-size:10px}
+.c{flex:1;text-align:center;border:1px solid var(--line-soft);border-radius:8px;padding:16px 8px}
+.f{color:var(--muted);margin-top:10px}
+.blink{font-size:20px;color:var(--green);animation:maestro-blink 1.1s steps(1) infinite}
+.pulse{display:inline-block;font-size:11px;letter-spacing:.12em;color:var(--violet);border:1px solid var(--violet-dim);padding:4px 10px;border-radius:4px;animation:maestro-pulse 2.2s infinite}
+.rise{display:inline-block;font-size:11px;background:var(--panel);border:1px solid var(--line);padding:6px 12px;border-radius:6px;animation:maestro-rise .25s ease both infinite alternate;animation-duration:1.6s}</style></head><body>
+<div class="c"><span class="blink">▮</span><div class="f">blink · steps(1) 1.1s · 硬切</div></div>
+<div class="c"><span class="pulse">2 项待审批</span><div class="f">pulse · 透明度脉冲 .8–2.2s</div></div>
+<div class="c"><span class="rise">任务创建</span><div class="f">rise · 5px 上移淡入 .18–.25s</div></div>
+</body></html>
diff --git a/design/guidelines/brand-texture.card.html b/design/guidelines/brand-texture.card.html
new file mode 100644
index 0000000..06366a6
--- /dev/null
+++ b/design/guidelines/brand-texture.card.html
@@ -0,0 +1,11 @@
+<!-- @dsCard group="Brand" viewport="700x160" subtitle="氛围层：1px 扫描线 + 暗角；琥珀斜纹警示条" name="质感 · Texture" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:10px}
+.f{color:var(--muted);margin-top:6px}
+.scan{position:relative;height:96px;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
+.scan::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.5));opacity:.5}
+.stripe{height:5px;background:repeating-linear-gradient(-45deg,var(--violet) 0 9px,transparent 9px 18px);opacity:.8}</style></head><body>
+<div><div class="scan">扫描线 + 暗角 · body::before</div><div class="f">全屏界面统一氛围层 · opacity .5</div></div>
+<div><div style="height:96px;border:1px solid var(--violet-dim);border-radius:6px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column"><div class="stripe"></div><div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--violet);font-size:11px;letter-spacing:.22em">审批闸 · 等待裁决</div></div><div class="f">磷光紫斜纹 · 审批区警示条</div></div>
+</body></html>
diff --git a/design/guidelines/colors-ink.card.html b/design/guidelines/colors-ink.card.html
new file mode 100644
index 0000000..6031ddf
--- /dev/null
+++ b/design/guidelines/colors-ink.card.html
@@ -0,0 +1,10 @@
+<!-- @dsCard group="Colors" viewport="700x130" subtitle="文字三档：ink / muted / faint" name="文字色 · Ink" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);padding:18px 20px;display:grid;gap:12px;font-size:13px;line-height:1.55}
+.row{display:flex;align-items:baseline;gap:14px}
+.t{flex:1}.k{font-size:10px;letter-spacing:.12em;width:90px;flex:none}</style></head><body>
+<div class="row" style="color:var(--ink)"><span class="k">--ink</span><span class="t">正文与标题：建任务 → 审批闸 → ready → 执行 → 等你审。</span><span style="font-size:10px;opacity:.6">#d8e4d4</span></div>
+<div class="row" style="color:var(--muted)"><span class="k">--muted</span><span class="t">次要信息、区块头、表单 label、meta 行。</span><span style="font-size:10px;opacity:.8">#76876f</span></div>
+<div class="row" style="color:var(--faint)"><span class="k">--faint</span><span class="t">弱化：占位、路径、时间戳、disabled。</span><span style="font-size:10px">#4a5747</span></div>
+</body></html>
diff --git a/design/guidelines/colors-light.card.html b/design/guidelines/colors-light.card.html
new file mode 100644
index 0000000..c4e85ee
--- /dev/null
+++ b/design/guidelines/colors-light.card.html
@@ -0,0 +1,26 @@
+<!-- @dsCard group="Colors" viewport="700x180" subtitle="Light 主题：<html data-theme=&quot;light&quot;> 激活，信号色加深保对比" name="Light 主题" -->
+<!doctype html><html lang="zh-CN" data-theme="light"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:16px;display:grid;gap:12px}
+.row{display:flex;gap:10px}
+.sw{flex:1;height:56px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;padding:6px 9px}
+.n{font-size:10px;font-weight:600;letter-spacing:.06em}
+.demo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
+.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 8px;border:1px solid;border-radius:3px}
+.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}</style></head><body>
+<div class="row">
+<div class="sw" style="background:var(--bg-deep)"><span class="n">--bg-deep</span></div>
+<div class="sw" style="background:var(--bg)"><span class="n">--bg</span></div>
+<div class="sw" style="background:var(--panel)"><span class="n">--panel</span></div>
+<div class="sw" style="background:var(--panel-2)"><span class="n">--panel-2</span></div>
+<div class="sw" style="background:var(--line)"><span class="n">--line</span></div>
+</div>
+<div class="demo">
+<button style="font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:var(--green);color:var(--bg-deep);border:1px solid var(--green);border-radius:4px;padding:6px 14px">创建任务</button>
+<span class="chip" style="color:var(--violet);border-color:var(--violet-dim)">待审/合</span>
+<span class="chip" style="color:var(--cyan);border-color:var(--cyan)">执行中</span>
+<span class="chip" style="color:var(--red);border-color:var(--red-dim)">失败</span>
+<span style="font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--amber);border:1px solid var(--amber-dim);border-radius:3px;padding:1px 7px">MED</span>
+<span style="font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:var(--glow-green)">MAESTRO▮</span>
+</div>
+</body></html>
diff --git a/design/guidelines/colors-signals.card.html b/design/guidelines/colors-signals.card.html
new file mode 100644
index 0000000..ec89727
--- /dev/null
+++ b/design/guidelines/colors-signals.card.html
@@ -0,0 +1,52 @@
+<!-- @dsCard group="Colors" viewport="700x300" subtitle="五个磷光信号色 + 状态机分组全展示（审批闸已由琥珀改为磷光紫）" name="信号色 · Signals" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:16px;display:grid;gap:14px}
+.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
+.col{border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
+.main{height:64px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px;color:var(--bg-deep)}
+.dim{height:34px;display:flex;align-items:center;padding:0 10px;font-size:10px;color:var(--ink)}
+.n{font-size:11px;font-weight:700;letter-spacing:.08em}.v{font-size:10px;opacity:.75}
+.u{font-size:10px;color:var(--muted);padding:5px 10px;border-top:1px solid var(--line-soft)}
+.head{font-size:10px;color:var(--muted);letter-spacing:.18em}
+.chips{display:flex;gap:8px;flex-wrap:wrap}
+.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 8px;border:1px solid var(--line);color:var(--muted);border-radius:3px;white-space:nowrap}
+.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
+.c-gate{color:var(--violet);border-color:var(--violet-dim)}
+.c-go{color:var(--green);border-color:var(--green-dim)}
+.c-run{color:var(--cyan);border-color:var(--cyan)}
+.c-work{color:var(--cyan);border-color:var(--cyan-dim)}
+.c-hold{color:var(--faint)}
+.c-bad{color:var(--red);border-color:var(--red-dim)}
+.c-done{color:var(--bg-deep);background:var(--green);border-color:var(--green);font-weight:700}
+.c-dead{color:var(--faint);text-decoration:line-through}
+.c-container{color:#9bb4c8;border-color:#2c3c4a}</style></head><body>
+<div class="cols">
+<div class="col"><div class="main" style="background:var(--green)"><span class="n">--green</span><span class="v">#5fdd7d</span></div><div class="dim" style="background:var(--green-dim)">--green-dim</div><div class="u">可执行 · 完成 · 品牌</div></div>
+<div class="col"><div class="main" style="background:var(--violet)"><span class="n">--violet</span><span class="v">#b88ef5</span></div><div class="dim" style="background:var(--violet-dim)">--violet-dim</div><div class="u">审批闸 · 等待裁决</div></div>
+<div class="col"><div class="main" style="background:var(--cyan)"><span class="n">--cyan</span><span class="v">#59c8d8</span></div><div class="dim" style="background:var(--cyan-dim)">--cyan-dim</div><div class="u">执行中 · agent</div></div>
+<div class="col"><div class="main" style="background:var(--amber)"><span class="n">--amber</span><span class="v">#f0b429</span></div><div class="dim" style="background:var(--amber-dim)">--amber-dim</div><div class="u">警示 · MED · 待依赖</div></div>
+<div class="col"><div class="main" style="background:var(--red)"><span class="n">--red</span><span class="v">#ff5d5d</span></div><div class="dim" style="background:var(--red-dim)">--red-dim</div><div class="u">失败 · 驳回 · HARD</div></div>
+</div>
+<div>
+<div class="head" style="margin-bottom:8px">16 个任务状态 · 按状态机分组上色</div>
+<div class="chips">
+<span class="chip">新建</span>
+<span class="chip c-work">分析拆解中</span>
+<span class="chip c-gate">待确认拆解</span>
+<span class="chip c-container">已拆解</span>
+<span class="chip c-work">写方案中</span>
+<span class="chip c-gate">待确认方案</span>
+<span class="chip c-go">可执行</span>
+<span class="chip c-hold">被依赖阻塞</span>
+<span class="chip c-go">排队中</span>
+<span class="chip c-run">执行中</span>
+<span class="chip c-gate">待审/合</span>
+<span class="chip c-bad">失败</span>
+<span class="chip c-bad">需人工</span>
+<span class="chip c-done">完成</span>
+<span class="chip c-hold">暂停</span>
+<span class="chip c-dead">取消</span>
+</div>
+</div>
+</body></html>
diff --git a/design/guidelines/colors-surfaces.card.html b/design/guidelines/colors-surfaces.card.html
new file mode 100644
index 0000000..ec8a66a
--- /dev/null
+++ b/design/guidelines/colors-surfaces.card.html
@@ -0,0 +1,13 @@
+<!-- @dsCard group="Colors" viewport="700x150" subtitle="碳绿基底四层抬升 + 两档描边" name="基底 · Surfaces" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:16px;display:flex;gap:10px}
+.sw{flex:1;height:118px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px}
+.n{font-size:11px;font-weight:600;letter-spacing:.08em}.v{font-size:10px;color:var(--muted)}</style></head><body>
+<div class="sw" style="background:var(--bg-deep)"><span class="n">--bg-deep</span><span class="v">#070908 · 侧栏/输入</span></div>
+<div class="sw" style="background:var(--bg)"><span class="n">--bg</span><span class="v">#0a0d0b · 主背景</span></div>
+<div class="sw" style="background:var(--panel)"><span class="n">--panel</span><span class="v">#10140f · 卡片</span></div>
+<div class="sw" style="background:var(--panel-2)"><span class="n">--panel-2</span><span class="v">#151b14 · hover/抬升</span></div>
+<div class="sw" style="background:var(--line)"><span class="n">--line</span><span class="v">#232d23 · 描边</span></div>
+<div class="sw" style="background:var(--line-soft)"><span class="n">--line-soft</span><span class="v">#1a221a · 弱描边</span></div>
+</body></html>
diff --git a/design/guidelines/colors-tints.card.html b/design/guidelines/colors-tints.card.html
new file mode 100644
index 0000000..a442361
--- /dev/null
+++ b/design/guidelines/colors-tints.card.html
@@ -0,0 +1,13 @@
+<!-- @dsCard group="Colors" viewable="true" viewport="700x140" subtitle="信号色 7–8% 透明底 + dim 边框的 chip 配方" name="信号底 · Tints" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);padding:20px;display:flex;gap:10px;flex-wrap:wrap;align-content:center}
+.tile{flex:1;min-width:140px;height:96px;border:1px solid;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
+.lab{font-size:10px;font-weight:700;letter-spacing:.14em;padding:1px 7px;border:1px solid;border-radius:3px}
+.f{font-size:10px;color:var(--muted)}</style></head><body>
+<div class="tile" style="background:rgba(95,221,125,.07);border-color:var(--green-dim)"><span class="lab" style="color:var(--green);border-color:var(--green-dim)">EASY</span><span class="f">rgba(green,.07)</span></div>
+<div class="tile" style="background:rgba(240,180,41,.07);border-color:var(--amber-dim)"><span class="lab" style="color:var(--amber);border-color:var(--amber-dim)">MED</span><span class="f">rgba(amber,.07)</span></div>
+<div class="tile" style="background:rgba(255,93,93,.07);border-color:var(--red-dim)"><span class="lab" style="color:var(--red);border-color:var(--red-dim)">HARD</span><span class="f">rgba(red,.07)</span></div>
+<div class="tile" style="background:rgba(184,142,245,.08);border-color:var(--violet-dim)"><span class="lab" style="color:var(--violet);border-color:var(--violet-dim)">GATE</span><span class="f">rgba(violet,.08)</span></div>
+<div class="tile" style="background:rgba(89,200,216,.07);border-color:var(--cyan-dim)"><span class="lab" style="color:var(--cyan);border-color:var(--cyan-dim)">RUN</span><span class="f">rgba(cyan,.07)</span></div>
+</body></html>
diff --git a/design/guidelines/spacing-borders.card.html b/design/guidelines/spacing-borders.card.html
new file mode 100644
index 0000000..c756b8c
--- /dev/null
+++ b/design/guidelines/spacing-borders.card.html
@@ -0,0 +1,11 @@
+<!-- @dsCard group="Spacing" viewport="700x150" subtitle="边框语言：细线两档 · 虚线空态 · 2px 左侧强调边" name="边框 · Borders" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;font-size:11px}
+.b{height:110px;padding:10px;border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
+.f{color:var(--muted);font-size:10px}</style></head><body>
+<div class="b" style="background:var(--panel);border:1px solid var(--line)"><b>1px --line</b><span class="f">标准卡片边</span></div>
+<div class="b" style="background:var(--panel);border:1px solid var(--line-soft)"><b>1px --line-soft</b><span class="f">内部分隔</span></div>
+<div class="b" style="border:1px dashed var(--line)"><b>1px dashed</b><span class="f">空态 / 占位 / 弱分组</span></div>
+<div class="b" style="background:var(--panel);border-bottom:1px solid var(--line);border-left:2px solid var(--green-dim)"><b>2px 左侧强调</b><span class="f">激活项 / 详情 / doc 块</span></div>
+</body></html>
diff --git a/design/guidelines/spacing-glow.card.html b/design/guidelines/spacing-glow.card.html
new file mode 100644
index 0000000..7693c4f
--- /dev/null
+++ b/design/guidelines/spacing-glow.card.html
@@ -0,0 +1,10 @@
+<!-- @dsCard group="Spacing" viewport="700x150" subtitle="辉光替代阴影；黑色外阴影只给浮层" name="辉光 · Glow" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:20px;display:flex;align-items:center;gap:26px;font-size:10px}
+.c{text-align:center}.f{color:var(--muted);margin-top:8px}</style></head><body>
+<div class="c"><span style="font-size:17px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:0 0 12px rgba(95,221,125,.45)">MAESTRO</span><div class="f">品牌字辉光</div></div>
+<div class="c"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)"></span><div class="f">状态点辉光</div></div>
+<div class="c"><button style="font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:var(--green);color:var(--bg-deep);border:1px solid var(--green);padding:6px 14px;border-radius:4px;box-shadow:0 0 14px rgba(95,221,125,.35)">hover 发光</button><div class="f">按钮 hover 辉光</div></div>
+<div class="c"><div style="background:var(--bg-deep);border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-size:12px;box-shadow:0 8px 30px rgba(0,0,0,.55)">浮层</div><div class="f">黑阴影 · 仅弹层/Toast</div></div>
+</body></html>
diff --git a/design/guidelines/spacing-radius.card.html b/design/guidelines/spacing-radius.card.html
new file mode 100644
index 0000000..e5d68da
--- /dev/null
+++ b/design/guidelines/spacing-radius.card.html
@@ -0,0 +1,11 @@
+<!-- @dsCard group="Spacing" viewport="700x150" subtitle="圆角体系：控件 3–4px · 面板 6px · 浮层 10px · 圆形只属于状态点" name="圆角 · Radius" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:20px;display:flex;align-items:center;gap:22px;font-size:11px}
+.f{color:var(--muted);font-size:10px;margin-top:6px}.c{text-align:center}</style></head><body>
+<div class="c"><span style="display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--amber);border:1px solid var(--amber-dim);padding:1px 7px;border-radius:var(--radius-xs)">MED</span><div class="f">--radius-xs · 3px · 徽章/chip</div></div>
+<div class="c"><button style="font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:var(--green);color:var(--bg-deep);border:1px solid var(--green);padding:6px 14px;border-radius:var(--radius-sm)">按钮</button><div class="f">--radius-sm · 4px · 按钮/输入框</div></div>
+<div class="c"><div style="width:110px;height:56px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md)"></div><div class="f">--radius-md · 6px · 面板/卡片</div></div>
+<div class="c"><div style="width:110px;height:56px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 30px rgba(0,0,0,.55)"></div><div class="f">--radius-lg · 10px · 模态/浮层</div></div>
+<div class="c"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)"></span><div class="f">状态点 · 唯一的正圆</div></div>
+</body></html>
diff --git a/design/guidelines/spacing-scale.card.html b/design/guidelines/spacing-scale.card.html
new file mode 100644
index 0000000..4135bbf
--- /dev/null
+++ b/design/guidelines/spacing-scale.card.html
@@ -0,0 +1,14 @@
+<!-- @dsCard group="Spacing" viewport="700x160" subtitle="间距阶 4–22px 与控件内边距" name="间距 · Scale" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:18px 22px;display:grid;gap:8px;font-size:10px}
+.r{display:flex;align-items:center;gap:12px;color:var(--muted)}
+.bar{height:12px;background:var(--green-dim);flex:none}
+.k{width:110px;flex:none;letter-spacing:.08em}</style></head><body>
+<div class="r"><span class="k">--space-1 · 4px</span><span class="bar" style="width:4px"></span><span>chip 内 gap</span></div>
+<div class="r"><span class="k">--space-3 · 8px</span><span class="bar" style="width:8px"></span><span>行内元素 gap</span></div>
+<div class="r"><span class="k">--space-4 · 10px</span><span class="bar" style="width:10px"></span><span>按钮组 gap</span></div>
+<div class="r"><span class="k">--space-6 · 14px</span><span class="bar" style="width:14px"></span><span>卡片内边距 / 表单 gap</span></div>
+<div class="r"><span class="k">--space-7 · 16px</span><span class="bar" style="width:16px"></span><span>栏内边距</span></div>
+<div class="r"><span class="k">--space-9 · 22px</span><span class="bar" style="width:22px"></span><span>主栏左右留白</span></div>
+</body></html>
diff --git a/design/guidelines/type-family.card.html b/design/guidelines/type-family.card.html
new file mode 100644
index 0000000..dc95594
--- /dev/null
+++ b/design/guidelines/type-family.card.html
@@ -0,0 +1,12 @@
+<!-- @dsCard group="Type" viewport="700x170" subtitle="单字族：IBM Plex Mono + Noto Sans SC 等宽中文混排" name="字族 · Mono" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:18px 22px;display:grid;gap:10px}
+.big{font-size:21px;font-weight:700;letter-spacing:.04em}
+.mix{font-size:13px;line-height:1.55}
+.meta{font-size:11px;color:var(--muted);letter-spacing:.08em}</style></head><body>
+<div class="big">多项目任务调度台 MAESTRO 0123456789</div>
+<div class="mix">按任务复杂度（Hard / Medium / Easy）分级驱动审批闸，<span style="color:var(--cyan)">agent</span> 在隔离 git worktree 自动执行——改动不自动合并、等你审。</div>
+<div class="mix" style="color:var(--muted)">if (canTransition(task.status, 'exec_review')) → 待审/合 · P1 · 中</div>
+<div class="meta">IBM PLEX MONO 400 / 500 / 600 / 700 · NOTO SANS SC 中文回退 · 全站无第二字族</div>
+</body></html>
diff --git a/design/guidelines/type-scale.card.html b/design/guidelines/type-scale.card.html
new file mode 100644
index 0000000..3e8c2a3
--- /dev/null
+++ b/design/guidelines/type-scale.card.html
@@ -0,0 +1,14 @@
+<!-- @dsCard group="Type" viewport="700x200" subtitle="字号阶 10–40px，正文基准 13px" name="字号阶 · Scale" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px 22px;display:grid;gap:7px}
+.r{display:flex;align-items:baseline;gap:14px}
+.k{width:150px;flex:none;font-size:10px;color:var(--muted);letter-spacing:.1em}</style></head><body>
+<div class="r"><span class="k">--text-num · 40px 700</span><span style="font-size:40px;font-weight:700;color:var(--cyan);text-shadow:var(--glow-cyan);line-height:1">3</span><span style="font-size:9px;font-weight:600;letter-spacing:.3em;color:var(--muted)">RUNNING</span></div>
+<div class="r"><span class="k">--text-2xl · 20px 700</span><span style="font-size:20px;font-weight:700;letter-spacing:.04em">项目标题 maestro</span></div>
+<div class="r"><span class="k">--text-xl · 19px 700</span><span style="font-size:19px;font-weight:700;letter-spacing:.28em;color:var(--green)">MAESTRO</span></div>
+<div class="r"><span class="k">--text-md · 13px 400</span><span style="font-size:13px">正文基准 · 任务标题用 500</span></div>
+<div class="r"><span class="k">--text-sm · 12px 600</span><span style="font-size:12px;font-weight:600;letter-spacing:.08em">按钮文字</span></div>
+<div class="r"><span class="k">--text-xs · 11px 600</span><span style="font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--muted)">区块标题 UPPERCASE</span></div>
+<div class="r"><span class="k">--text-2xs · 10px 700</span><span style="font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--amber)">徽章 MED</span></div>
+</body></html>
diff --git a/design/guidelines/type-tracking.card.html b/design/guidelines/type-tracking.card.html
new file mode 100644
index 0000000..df45347
--- /dev/null
+++ b/design/guidelines/type-tracking.card.html
@@ -0,0 +1,13 @@
+<!-- @dsCard group="Type" viewport="700x170" subtitle="层级靠字距：.04em 标题 → .35em logo 副标" name="字距 · Tracking" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:18px 22px;display:grid;gap:9px}
+.r{display:flex;align-items:baseline;gap:14px;font-size:12px}
+.k{width:120px;flex:none;font-size:10px;color:var(--faint);letter-spacing:.06em}</style></head><body>
+<div class="r"><span class="k">.04em tight</span><span style="letter-spacing:.04em;font-weight:700;font-size:15px">标题 · proj-title</span></div>
+<div class="r"><span class="k">.08em label</span><span style="letter-spacing:.08em;font-weight:600">按钮 · BTN LABEL · meta</span></div>
+<div class="r"><span class="k">.12em badge</span><span style="letter-spacing:.12em;color:var(--amber)">2 项待审批</span></div>
+<div class="r"><span class="k">.22em head</span><span style="letter-spacing:.22em;font-weight:600;font-size:11px;color:var(--muted)">▍任务树 SECTION HEAD</span></div>
+<div class="r"><span class="k">.28em logo</span><span style="letter-spacing:.28em;font-weight:700;font-size:15px;color:var(--green)">MAESTRO</span></div>
+<div class="r"><span class="k">.35em widest</span><span style="letter-spacing:.35em;font-size:11px;color:var(--muted)">多项目任务调度台</span></div>
+</body></html>
diff --git a/design/readme.md b/design/readme.md
new file mode 100644
index 0000000..af6d481
--- /dev/null
+++ b/design/readme.md
@@ -0,0 +1,79 @@
+# Maestro Design System
+
+**Maestro（多项目任务调度平台）** 是一个本地优先的任务编排 daemon：管理多个本地 git 项目的任务树，按复杂度（Hard / Medium / Easy）分级驱动审批闸，用后台 agent（Claude Code，经 MCP + Agent SDK）在隔离 git worktree 自动执行任务——改动不自动合并，等人审。
+
+唯一的产品界面是 **Web 调度台（看板）**：三栏布局（项目侧栏 · 闸+任务树 · 事件流），实时 WebSocket 刷新，页面内 accept/reject。
+
+## 设计概念：phosphor console（磷光调度台）
+
+整个品牌是一台老式磷光终端的隐喻：碳绿近黑底、磷光绿/琥珀/信号红/青四色信号系统、全站等宽字体中英混排、扫描线+暗角氛围层、零圆角、辉光代替阴影。它看起来像机房里的调度终端，而不是 SaaS 仪表盘。
+
+## 来源
+
+- 代码库：本地挂载 `maestro/`（Node/TypeScript daemon + 无框架 vanilla JS 看板）
+  - 视觉唯一事实来源：`maestro/web/style.css`（自称 "MAESTRO 调度台 · phosphor console"）
+  - 结构：`maestro/web/index.html`；文案与状态模型：`maestro/web/app.js`、`maestro/DESIGN.md`、`maestro/README.md`
+- 无 Figma、无图片资产 —— logo = 像素章鱼图案（一脑多臂，喻多项目并行调度）+ 纯文字 `MAESTRO▮` 字标（见 ICONOGRAPHY 与 `guidelines/brand-logo.card.html`，15×12 像素图，磷光绿三档 + 暗眼，canvas 或 CSS 均可复现）。
+- 字体经 Google Fonts CDN 加载（IBM Plex Mono + Noto Sans SC），仓库内无字体二进制。
+
+---
+
+## CONTENT FUNDAMENTALS（文案基本面）
+
+- **语言：中文为主，术语保留英文。** 界面文案是简体中文，但状态机/复杂度/角色词保留英文原样：`HARD / MED / EASY`、`plan / spec / operations`、`agent`、`worktree`、`accept/reject`。中英文混排是常态：「待 Claude Code 产出（经 MCP 写入并提交评审）」。
+- **电报式短语，不写完整句。** 标签和状态是 2–4 字的压缩词：「可执行」「待审/合」「需人工」「被依赖阻塞」「分析拆解中」。按钮同样短：「+ 新建」「保存配置」「⟳ 同步 todo」。
+- **间隔号 `·` 是标点主角。** 用于并置短语：「多项目任务调度台」「审批闸 · 等待裁决」「manual · 手动」「P1 · 中」。其次是箭头 `→`（流转）和 `↳`（引用/原因）。
+- **称谓：直接称「你」，系统无自称。** 「等待你裁决的审批闸」「改动不自动合并、等你审」。语气是工程师对工程师：克制、精确、略带机房黑话（「闸」「裁决」「返工」「兜底」）。
+- **无 emoji。** 表意一律用 Unicode 几何字符与符号（▍ ▮ ⚠ ▸ ◉ ⟳ ⚙ ⌕ ✕ ↳ ·），见 ICONOGRAPHY。
+- **大写字母标签 + 宽字距** 用于结构性小标题：`DIFF 摘要`、`DEPS · 依赖`、区块头全大写 + `.22em` 字距。
+- **必填用红色 `*`；占位文案给真实示例**：`/path/to/repo`、`npm test（可空）`、「要做什么」。
+- **空态文案直白且短**：「暂无产出与历史」「连接中…」。
+
+## VISUAL FOUNDATIONS（视觉基本面）
+
+- **主题**：默认深色（磷光终端）；`<html data-theme="light">` 激活浅色主题——纸白绿灰底，信号色加深保对比，`-dim` 变淡色底，辉光减弱。全部组件走 CSS 变量，自动适配两套主题。
+- **多语言**：界面 chrome 文案双语（zh / en，见 `ui_kits/console/i18n.js`）；状态/闸/事件标签经组件的 `label`/`kindLabel` prop 注入；任务标题等用户内容不翻译。
+- **颜色**：碳绿近黑的底（`--bg #0a0d0b`，带极轻微绿味），三层抬升（bg-deep → panel → panel-2），全部偏绿灰。五个磷光信号色各司其职：**绿**=可执行/成功/品牌，**紫**=审批闸/等待裁决（v1.1 起由琥珀改紫，与 MED 复杂度区分），**琥珀**=警示/MED/待依赖，**红**=失败/驳回/Hard，**青**=执行中/agent/链接。每个信号色配一个 `-dim` 暗位，专门做边框和半透明底（`rgba(信号色, .05–.08)` 做 chip 底）。文字三档：ink / muted / faint。
+- **字体**：全站只有一个字族 `--mono`（IBM Plex Mono + Noto Sans SC 回退）。没有「标题字体」——层级靠字号（10–20px，正文 13px）、字重（400/500/600/700）和字距（.04em–.35em）。全大写 + 宽字距是最强的层级信号。
+- **圆角**：小而克制（v1.1 起由零圆角调整）：徽章/chip 3px、按钮/输入框 4px、面板/卡片 6px、模态/浮层 10px（`--radius-xs/sm/md/lg`）；正圆仍只允许出现在状态点（6–7px 圆点）。
+- **边框**：1px 细线是主要分界手段（`--line` / `--line-soft` 两档）；虚线（dashed）表示空态、占位、弱分组；左侧 2px 实色边表示「当前/激活/文档块」。
+- **阴影与辉光**：环境光是**辉光（glow）**而非阴影——品牌字、状态点、执行中 chip 都带 `0 0 8–18px` 的同色辉光；hover 按钮发光。黑色外阴影只用于浮层（弹层/模态/Toast）。无内阴影。
+- **背景质感**：全屏界面盖一层 `body::before` 氛围层——1px 重复扫描线 + 椭圆暗角，opacity .5。无图片、无渐变背景（唯一的「渐变」是 sticky 区块头下缘的淡出，和审批区的磷光紫斜纹警示条 `repeating-linear-gradient(-45deg)`）。
+- **动效**：快而硬。过渡 .1–.12s；入场统一 `rise`（5px 上移淡入，.18–.25s）；关键注意力靠 **blink**（光标方块，steps(1)）和 **pulse**（透明度脉冲，.8–2.2s，用于等待审批/执行中）。无弹跳、无缓动炫技。
+- **hover**：背景抬一层（panel → panel-2）或边框提亮（line → muted）；强按钮 hover 提亮自身色 + 辉光。**press 无单独状态**。disabled 是 opacity .4。
+- **focus**：输入框边框变 `--green-dim` + 1px 同色 ring（box-shadow），不用浏览器默认 outline。
+- **卡片**：`--panel` 底 + 1px `--line` 边，6px 圆角，无阴影；语义卡片用信号色 dim 边（闸卡片紫边、agent 面板青边）。卡片内部用 `--line-soft` 分隔头/体/脚。
+- **布局**：固定三栏 grid（232px / 1fr / 320px），整页 100vh、栏内各自滚动；1100px 以下退化为单栏纵排。区块头 sticky。
+- **透明与模糊**：模态遮罩 `rgba(4,6,5,.78) + blur(2px)`；信号色 chip 底用 7–8% 透明信号色。除此之外不用玻璃拟态。
+- **选区**：`::selection` 绿底白字。
+
+## ICONOGRAPHY（图标系统）
+
+- **统一 SVG 图标集**（`assets/icons/`，15 个，v1.1 起取代原纯 Unicode 方案）：24×24 网格、2px 圆头描边、**双色调**——基础笔画 `currentColor`（默认 --muted），语义元素 `stroke="var(--icon-accent, 信号色回退)"`：
+  - gate 紫 · ready/task/add/sync/config/search/git 绿 · running/event/flow 青 · deps/reason 琥珀 · project/close 保持单色
+  - 内联使用时可按语境覆盖 `--icon-accent`；`<img>` 引用时用内置回退色（暗色主题值）
+  - 不要引入 lucide/heroicons 等第三方图标库；新图标按同一网格/描边/双色规则绘制
+- **品牌字符保留**（非图标，锁 `--mono` 等宽字体渲染）：
+  - `▍` 区块标题前的色块标记（绿/紫/琥珀/青上色） · `▮` logo 末尾的闪烁光标（blink 动画）
+  - `→` 状态流转 · `↳` 驳回原因/引用 · `·` 间隔号 · `—` 空值 · `«`/`»` 面板折叠
+  - 状态点/agent 点：纯 CSS 圆点（非字符）
+- **emoji 禁用。**
+
+## 字体替代说明
+
+仓库不含字体文件；原产品本身就从 Google Fonts CDN 加载 **IBM Plex Mono** 与 **Noto Sans SC**（`tokens/fonts.css` 沿用同一来源，非替代品，无失真）。如需离线分发，请提供 woff2 文件。
+
+---
+
+## INDEX（目录清单）
+
+- `styles.css` — 全局入口，仅 @import
+- `tokens/` — `colors.css`（基底+信号色+语义别名）· `typography.css`（字族/字号/字距）· `effects.css`（间距/边框/阴影/动效）· `fonts.css`（Google Fonts）
+- `guidelines/` — 设计系统标签页的基础规范卡片（颜色/类型/间距/品牌等）
+- `components/core/` — Button · StatusChip · ComplexityBadge · CountBadge · QuotaMeter · SectionHead
+- `components/forms/` — Input · Select · Textarea · ComplexitySeg
+- `components/surfaces/` — Panel · GateCard · Toast · EventItem · Timeline
+- `ui_kits/console/` — Web 调度台整屏交互复刻（index.html 可点击，侧栏/事件流可折叠；含已归档区分页与归档详情模态）
+- `ui_kits/console_mobile/` — 移动版调度台（390px 单栏 + 底部 Tab：任务/审批/事件/项目）
+- `assets/icons/` — 双色调 SVG 图标集（24×24 · 2px 圆头描边 · currentColor + --icon-accent）
+- `SKILL.md` — Agent Skill 入口
diff --git a/design/styles.css b/design/styles.css
new file mode 100644
index 0000000..edc329c
--- /dev/null
+++ b/design/styles.css
@@ -0,0 +1,4 @@
+@import './tokens/fonts.css';
+@import './tokens/colors.css';
+@import './tokens/typography.css';
+@import './tokens/effects.css';
diff --git a/design/tokens/colors.css b/design/tokens/colors.css
new file mode 100644
index 0000000..df33292
--- /dev/null
+++ b/design/tokens/colors.css
@@ -0,0 +1,81 @@
+/* MAESTRO · 颜色令牌 — phosphor console palette
+   Source: maestro/web/style.css :root */
+:root {
+  /* ── 基底（碳绿底） ── */
+  --bg:        #0a0d0b;   /* 主背景 */
+  --bg-deep:   #070908;   /* 侧栏 / 输入框 / 更深一层 */
+  --panel:     #10140f;   /* 卡片 / 面板 */
+  --panel-2:   #151b14;   /* 面板 hover / 强调层 */
+  --line:      #232d23;   /* 标准描边 */
+  --line-soft: #1a221a;   /* 弱描边 / 分隔虚线 */
+
+  /* ── 文字 ── */
+  --ink:       #d8e4d4;   /* 正文 */
+  --muted:     #76876f;   /* 次要文字 / 标签 */
+  --faint:     #4a5747;   /* 弱化文字 / 占位 */
+
+  /* ── 磷光信号色（每色配 -dim 暗位用作边框/底色） ── */
+  --green:     #5fdd7d;   /* 成功 / 可执行 / 品牌主色 */
+  --green-dim: #2e6b3d;
+  --violet:    #b88ef5;   /* 审批闸 / 等待裁决 */
+  --violet-dim:#503070;
+  --amber:     #f0b429;   /* 警示 / MED 复杂度 / 等待依赖 */
+  --amber-dim: #6b5414;
+  --red:       #ff5d5d;   /* 失败 / 驳回 / Hard */
+  --red-dim:   #6b2424;
+  --cyan:      #59c8d8;   /* 执行中 / agent / 链接 */
+  --cyan-dim:  #1e4e57;
+
+  /* ── 辉光（text-shadow / box-shadow 用） ── */
+  --glow-green: 0 0 12px rgba(95, 221, 125, .45);
+  --glow-violet: 0 0 14px rgba(184, 142, 245, .4);
+  --glow-cyan:  0 0 18px rgba(89, 200, 216, .5);
+  --glow-red:   0 0 14px rgba(255, 93, 93, .3);
+
+  /* ── 语义别名 ── */
+  --surface-page:   var(--bg);
+  --surface-rail:   var(--bg-deep);
+  --surface-card:   var(--panel);
+  --surface-raised: var(--panel-2);
+  --text-body:      var(--ink);
+  --text-secondary: var(--muted);
+  --text-disabled:  var(--faint);
+  --border-default: var(--line);
+  --border-soft:    var(--line-soft);
+  --accent:         var(--green);
+  --accent-dim:     var(--green-dim);
+  --status-go:      var(--green);
+  --status-gate:    var(--violet);
+  --status-bad:     var(--red);
+  --status-run:     var(--cyan);
+}
+
+/* ── Light 主题：<html data-theme="light"> 激活 — 纸白底，信号色加深保对比，-dim 变淡色底 ── */
+[data-theme="light"] {
+  --bg:        #f3f6f1;
+  --bg-deep:   #e9eee6;
+  --panel:     #fcfdfb;
+  --panel-2:   #e4ebe1;
+  --line:      #c9d4c6;
+  --line-soft: #dbe3d8;
+
+  --ink:       #1d251b;
+  --muted:     #5c6b57;
+  --faint:     #92a08c;
+
+  --green:     #1b8f46;
+  --green-dim: #b5e2c3;
+  --violet:    #7747d1;
+  --violet-dim:#dcccf6;
+  --amber:     #946d06;
+  --amber-dim: #ecd9a0;
+  --red:       #cd3434;
+  --red-dim:   #f2baba;
+  --cyan:      #0b7488;
+  --cyan-dim:  #b2dfe7;
+
+  --glow-green: 0 0 10px rgba(27, 143, 70, .25);
+  --glow-violet: 0 0 10px rgba(119, 71, 209, .22);
+  --glow-cyan:  0 0 12px rgba(11, 116, 136, .25);
+  --glow-red:   0 0 10px rgba(205, 52, 52, .2);
+}
diff --git a/design/tokens/effects.css b/design/tokens/effects.css
new file mode 100644
index 0000000..362d859
--- /dev/null
+++ b/design/tokens/effects.css
@@ -0,0 +1,45 @@
+/* MAESTRO · 形制令牌 — 直角、细线、辉光、扫描线 */
+:root {
+  /* 圆角：小而克制 — 控件 3–4px、面板 6px、浮层 10px；圆形仍只用于状态点 */
+  --radius-xs:  3px;    /* chip / 徽章 / 小标签 */
+  --radius-sm:  4px;    /* 按钮 / 输入框 / doc 块 */
+  --radius-md:  6px;    /* 面板 / 卡片 / toast */
+  --radius-lg:  10px;   /* 模态 / 预览浮层 */
+  --radius-dot: 50%;
+
+  /* 边框 */
+  --border-w: 1px;
+  --border-accent-w: 2px;        /* 左侧强调边（active 项 / doc 块） */
+
+  /* 间距阶（px）— 从实际版式提取 */
+  --space-1: 4px;
+  --space-2: 6px;
+  --space-3: 8px;
+  --space-4: 10px;
+  --space-5: 12px;
+  --space-6: 14px;
+  --space-7: 16px;
+  --space-8: 20px;
+  --space-9: 22px;
+
+  /* 控件内边距 */
+  --pad-btn:    6px 14px;
+  --pad-btn-xs: 2px 8px;
+  --pad-input:  7px 10px;
+  --pad-chip:   1px 8px;
+  --pad-card:   12px 14px;
+
+  /* 阴影：外阴影只用于浮层；辉光是主角 */
+  --shadow-pop:   0 10px 30px rgba(0, 0, 0, .65);
+  --shadow-modal: 0 18px 60px rgba(0, 0, 0, .6);
+  --shadow-toast: 0 8px 30px rgba(0, 0, 0, .55);
+
+  /* 动效 */
+  --ease-fast: .12s; /* @kind other */
+  --ease-base: .2s ease; /* @kind other */
+}
+
+/* 扫描线 + 暗角氛围层：加在 body::before（全屏界面用） */
+@keyframes maestro-blink { 50% { opacity: 0; } }
+@keyframes maestro-pulse { 50% { opacity: .25; } }
+@keyframes maestro-rise  { from { opacity: 0; transform: translateY(5px); } }
diff --git a/design/tokens/fonts.css b/design/tokens/fonts.css
new file mode 100644
index 0000000..dbb89e7
--- /dev/null
+++ b/design/tokens/fonts.css
@@ -0,0 +1,4 @@
+/* MAESTRO · webfonts
+   原产品经 Google Fonts CDN 加载（maestro/web/index.html），仓库内无字体二进制。
+   此处沿用同一 CDN 源；如需离线可下载 woff2 后改为本地 @font-face。 */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');
diff --git a/design/tokens/typography.css b/design/tokens/typography.css
new file mode 100644
index 0000000..6586e93
--- /dev/null
+++ b/design/tokens/typography.css
@@ -0,0 +1,30 @@
+/* MAESTRO · 字体令牌 — 等宽中文混排
+   全站单字族：IBM Plex Mono（拉丁）+ Noto Sans SC（中文回退） */
+:root {
+  --mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace; /* @kind font */
+  --font-body: var(--mono);   /* 没有第二字族：标题、正文、按钮全部等宽 */
+
+  /* 字号阶（px） */
+  --text-2xs: 10px;    /* 徽章 / chip 标签 */
+  --text-xs:  11px;    /* 区块标题 / 表单 label / meta */
+  --text-sm:  12px;    /* 按钮 / 次要正文 */
+  --text-md:  13px;    /* 正文基准（body） */
+  --text-lg:  15px;    /* 预览标题 */
+  --text-xl:  19px;    /* logo 字 */
+  --text-2xl: 20px;    /* 项目标题 */
+  --text-num: 40px;    /* 大数字（agent 计数） */
+
+  /* 行高 */
+  --leading-body: 1.55;
+  --leading-doc:  1.7;
+
+  /* 字重：400 正文 · 500 任务标题 · 600 按钮/区块头 · 700 强调/徽章 */
+
+  /* 字距（全大写小标签是核心母题） */
+  --tracking-tight:  .04em;   /* 标题 */
+  --tracking-label:  .08em;   /* 按钮 / meta */
+  --tracking-badge:  .12em;   /* 徽章 / 计数 */
+  --tracking-head:   .22em;   /* 区块标题（uppercase） */
+  --tracking-logo:   .28em;   /* logo */
+  --tracking-widest: .35em;   /* logo 副标 */
+}
diff --git a/design/ui_kits/console/ArchiveSection.jsx b/design/ui_kits/console/ArchiveSection.jsx
new file mode 100644
index 0000000..99e8f5d
--- /dev/null
+++ b/design/ui_kits/console/ArchiveSection.jsx
@@ -0,0 +1,182 @@
+// 已归档区（done / 取消，时间倒序分页）+ 归档详情模态
+function ArchiveRow({ item, t, onOpen }) {
+  const { ComplexityBadge, StatusChip } = window.MaestroDesignSystem_a6a290;
+  const [hover, setHover] = React.useState(false);
+  return (
+    <div onClick={() => onOpen(item)} title={t.archiveTip}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
+        padding: '7px 12px', fontSize: 12.5,
+        borderBottom: '1px dashed var(--line-soft)',
+        background: hover ? 'var(--panel)' : 'transparent',
+      }}>
+      <span style={{ color: 'var(--muted)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        {item.title}<span style={{ color: 'var(--faint)', fontSize: 10.5, marginLeft: 6 }}>{item.id}</span>
+      </span>
+      {item.subs ? <span style={{ flex: 'none', fontSize: 10.5, color: 'var(--faint)' }}>{t.archiveSubs.replace('{n}', item.subs)}</span> : null}
+      <span style={{ flex: 1, minWidth: 8 }}></span>
+      <ComplexityBadge complexity={item.cplx} />
+      <StatusChip status={item.status} label={t.status[item.status]} />
+      <span style={{ flex: 'none', fontSize: 11, color: 'var(--faint)' }} title={item.timeFull}>{item.time}</span>
+    </div>
+  );
+}
+
+function SizeSelect({ size, setSize, t }) {
+  const [open, setOpen] = React.useState(false);
+  const [hover, setHover] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  return (
+    <span ref={ref} style={{ position: 'relative', display: 'inline-flex' }}>
+      <button onClick={() => setOpen(!open)}
+        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+        style={{
+          fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.04em',
+          background: 'transparent', color: hover || open ? 'var(--green)' : 'var(--muted)',
+          border: '1px solid ' + (hover || open ? 'var(--green-dim)' : 'var(--line)'),
+          borderRadius: 'var(--radius-sm, 4px)', padding: '3px 9px', cursor: 'pointer',
+          display: 'inline-flex', alignItems: 'center', gap: 7, transition: 'color .12s, border-color .12s',
+        }}>
+        {t.perPage} <b style={{ color: 'var(--green)', fontSize: 11.5 }}>{size}</b>
+        <span style={{ fontSize: 8, color: 'var(--faint)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .12s' }}>▼</span>
+      </button>
+      {open ? (
+        <div style={{
+          position: 'absolute', bottom: 'calc(100% + 5px)', right: 0, zIndex: 60,
+          display: 'grid', minWidth: '100%',
+          background: 'var(--bg-deep)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md, 6px)',
+          padding: 4, boxShadow: '0 10px 30px rgba(0,0,0,.65)', animation: 'maestro-rise .12s ease both',
+        }}>
+          {[10, 20, 50, 100].map((n) => {
+            const active = n === size;
+            return (
+              <button key={n} onClick={() => { setSize(n); setOpen(false); }} style={{
+                fontFamily: 'var(--mono)', fontSize: 11.5, fontWeight: active ? 700 : 400, textAlign: 'left',
+                background: active ? 'var(--panel-2)' : 'transparent',
+                color: active ? 'var(--green)' : 'var(--ink)',
+                border: 'none', borderRadius: 4, padding: '6px 12px 6px 8px', cursor: 'pointer',
+                display: 'flex', alignItems: 'center', gap: 7,
+              }}
+                onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'var(--panel)'; }}
+                onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
+                <span style={{ width: 8, color: 'var(--green)', fontSize: 10 }}>{active ? '▍' : ''}</span>{n}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </span>
+  );
+}
+
+function ArchivePager({ page, pages, size, setPage, setSize, t }) {
+  const { Button } = window.MaestroDesignSystem_a6a290;
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', justifyContent: 'center', fontFamily: 'var(--mono)' }}>
+      {pages > 1 ? (
+        <React.Fragment>
+          <Button size="xs" disabled={page <= 1} onClick={() => setPage(page - 1)}>{t.pagePrev}</Button>
+          <span style={{ fontSize: 11, color: 'var(--muted)' }}>{t.pageOf.replace('{a}', page).replace('{b}', pages)}</span>
+          <Button size="xs" disabled={page >= pages} onClick={() => setPage(page + 1)}>{t.pageNext}</Button>
+        </React.Fragment>
+      ) : null}
+      <SizeSelect size={size} setSize={setSize} t={t} />
+    </div>
+  );
+}
+
+function ArchiveSection({ items, t, onOpen }) {
+  const [page, setPage] = React.useState(1);
+  const [size, setSize] = React.useState(20);
+  if (!items.length) return null;
+  const pages = Math.max(1, Math.ceil(items.length / size));
+  const cur = Math.min(page, pages);
+  const slice = items.slice((cur - 1) * size, cur * size);
+  return (
+    <section style={{ marginTop: 28, opacity: .82 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.22em', color: 'var(--muted)', textTransform: 'uppercase', padding: '18px 0 10px' }}>
+        <span style={{ color: 'var(--faint)' }}>▣</span>{t.archive} · {items.length}
+      </div>
+      <div>{slice.map((it) => <ArchiveRow key={it.id} item={it} t={t} onOpen={onOpen} />)}</div>
+      <ArchivePager page={cur} pages={pages} size={size} setPage={setPage} setSize={(n) => { setSize(n); setPage(1); }} t={t} />
+    </section>
+  );
+}
+
+// 归档详情模态（只读：属性 / 产出 / 执行历史 / 结果 / 审批 / 时间线）
+function ArchiveModal({ item, t, onClose }) {
+  const { ComplexityBadge, StatusChip, Timeline } = window.MaestroDesignSystem_a6a290;
+  React.useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  if (!item) return null;
+  const d = item.detail || {};
+  const label = (text) => <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', margin: '14px 0 4px' }}>{text}</div>;
+  const doc = (text) => (
+    <pre style={{ background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderLeft: '2px solid var(--green-dim)', borderRadius: 4, padding: '10px 12px', fontFamily: 'var(--mono)', fontSize: 12.5, lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0, color: 'var(--ink)' }}>{text}</pre>
+  );
+  const kvGrid = { fontSize: 12, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '3px 12px', margin: 0 };
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 1100, display: 'grid', placeItems: 'center' }}>
+      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(4,6,5,.78)', backdropFilter: 'blur(2px)' }}></div>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', width: 'min(860px, 94vw)', maxHeight: '92vh', background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg, 10px)', overflow: 'hidden', boxShadow: '0 24px 64px rgba(0,0,0,.6)', animation: 'maestro-rise .18s ease both' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', padding: '12px 16px', borderBottom: '1px solid var(--line)', background: 'var(--panel-2)' }}>
+          <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.18em', color: 'var(--bg-deep)', background: 'var(--muted)', padding: '2px 8px', borderRadius: 3 }}>{t.archiveDetail}</span>
+          <span style={{ fontWeight: 700, fontSize: 15 }}>{item.title}</span>
+          <ComplexityBadge complexity={item.cplx} />
+          <StatusChip status={item.status} label={t.status[item.status]} />
+          <span style={{ flex: 1 }}></span>
+          <button onClick={onClose} title={t.closeTip} style={{ fontFamily: 'var(--mono)', fontSize: 13, background: 'transparent', color: 'var(--muted)', border: 'none', cursor: 'pointer', padding: '4px 8px' }}>✕</button>
+        </div>
+        <div style={{ flex: 1, overflowY: 'auto', padding: '14px 20px 24px', fontFamily: 'var(--mono)' }}>
+          {d.attrs ? <dl style={kvGrid}>{d.attrs.map(([k, v], i) => (
+            <React.Fragment key={i}><dt style={{ color: 'var(--muted)' }}>{k}</dt><dd style={{ margin: 0, wordBreak: 'break-all' }}>{v}</dd></React.Fragment>
+          ))}</dl> : null}
+          {d.spec ? <React.Fragment>{label('SPEC · 方案')}{doc(d.spec)}</React.Fragment> : null}
+          {d.ops ? <React.Fragment>{label('OPERATIONS · 操作')}{doc(d.ops)}</React.Fragment> : null}
+          {d.runs && d.runs.length ? <React.Fragment>
+            {label(t.runsLabel + '（' + d.runs.length + '）')}
+            <dl style={kvGrid}>{d.runs.map((r, i) => (
+              <React.Fragment key={i}>
+                <dt style={{ color: 'var(--muted)' }}>{r.kind} · {r.status}</dt>
+                <dd style={{ margin: 0 }}>{r.span}{r.ref ? <span style={{ display: 'block', color: 'var(--faint)', fontSize: 10.5 }}>{r.ref}</span> : null}</dd>
+              </React.Fragment>
+            ))}</dl>
+          </React.Fragment> : null}
+          {d.result ? <React.Fragment>
+            {label(t.resultLabel)}
+            <dl style={kvGrid}>
+              <dt style={{ color: 'var(--muted)' }}>{t.branch}</dt><dd style={{ margin: 0 }}>{d.result.branch}</dd>
+              <dt style={{ color: 'var(--muted)' }}>commits</dt><dd style={{ margin: 0 }}>{d.result.commits.join(' · ')}</dd>
+              <dt style={{ color: 'var(--muted)' }}>diff</dt><dd style={{ margin: 0 }}>{d.result.diff}</dd>
+            </dl>
+          </React.Fragment> : null}
+          {d.approvals && d.approvals.length ? <React.Fragment>
+            {label(t.approvalsLabel)}
+            <dl style={kvGrid}>{d.approvals.map((a, i) => (
+              <React.Fragment key={i}>
+                <dt style={{ color: a.action === 'accept' ? 'var(--green)' : 'var(--red)', fontWeight: 700 }}>{a.gate} · {a.action === 'accept' ? t.accepted : t.rejected}</dt>
+                <dd style={{ margin: 0 }}>{t.approver} {a.actor} · {a.at}{a.reason ? <span style={{ display: 'block', color: 'var(--amber)' }}>↳ {a.reason}</span> : null}</dd>
+              </React.Fragment>
+            ))}</dl>
+          </React.Fragment> : null}
+          {d.timeline && d.timeline.length ? <React.Fragment>
+            {label(t.timelineLabel)}
+            <Timeline items={d.timeline} />
+          </React.Fragment> : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, { MaestroKitArchiveSection: ArchiveSection, MaestroKitArchiveModal: ArchiveModal });
diff --git a/design/ui_kits/console/EventPanel.jsx b/design/ui_kits/console/EventPanel.jsx
new file mode 100644
index 0000000..c875a87
--- /dev/null
+++ b/design/ui_kits/console/EventPanel.jsx
@@ -0,0 +1,45 @@
+// 右栏：事件流 · 可折叠（折叠后仅图标）
+function MaestroEventIcon({ size = 16 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}>
+      <polyline points="2 12 7 12 10 5 14 19 17 12 22 12" />
+    </svg>
+  );
+}
+
+function maestroPanelToggleProps(onClick, title) {
+  return {
+    onClick, title,
+    style: {
+      cursor: 'pointer', flex: 'none', fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1,
+      background: 'transparent', color: 'var(--muted)',
+      border: '1px solid var(--line)', borderRadius: 'var(--radius-sm, 4px)', padding: '4px 7px',
+    },
+    onMouseEnter: (e) => { e.currentTarget.style.color = 'var(--green)'; e.currentTarget.style.borderColor = 'var(--green-dim)'; },
+    onMouseLeave: (e) => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--line)'; },
+  };
+}
+
+function EventPanel({ events, collapsed, onToggleCollapse, t }) {
+  const { EventItem, SectionHead } = window.MaestroDesignSystem_a6a290;
+  if (collapsed) {
+    return (
+      <aside style={{ background: 'var(--bg-deep)', borderLeft: '1px solid var(--line)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '16px 0', gap: 14 }}>
+        <button {...maestroPanelToggleProps(onToggleCollapse, t.expandEvents)}>«</button>
+        <span style={{ color: 'var(--muted)' }} title={t.events + ' · ' + events.length}><MaestroEventIcon size={18} /></span>
+        <span style={{ fontSize: 10.5, color: 'var(--faint)', letterSpacing: '.04em' }}>{events.length}</span>
+      </aside>
+    );
+  }
+  return (
+    <aside style={{ background: 'var(--bg-deep)', borderLeft: '1px solid var(--line)', overflowY: 'auto', paddingBottom: 30 }}>
+      <SectionHead title={t.events} action={<button {...maestroPanelToggleProps(onToggleCollapse, t.collapseEvents)}>»</button>}
+        style={{ padding: '14px 14px 10px', position: 'sticky', top: 0, zIndex: 5, background: 'linear-gradient(var(--bg-deep) 75%, transparent)' }} />
+      <ul style={{ listStyle: 'none', padding: '0 14px', margin: 0 }}>
+        {events.map((e, i) => <EventItem key={i} type={e.type} label={t.eventTypes[e.type]} time={e.time} detail={e.detail} />)}
+      </ul>
+    </aside>
+  );
+}
+window.MaestroKitEventPanel = EventPanel;
diff --git a/design/ui_kits/console/GateSection.jsx b/design/ui_kits/console/GateSection.jsx
new file mode 100644
index 0000000..ad301b6
--- /dev/null
+++ b/design/ui_kits/console/GateSection.jsx
@@ -0,0 +1,101 @@
+// 全屏预览：读完整方案 + 就地裁决
+function GatePreview({ item, t, onDecide, onClose }) {
+  const { ComplexityBadge, Button, Textarea } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(false);
+  const [reason, setReason] = React.useState('');
+  React.useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  if (!item) return null;
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 1100, display: 'grid', placeItems: 'center' }}>
+      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(4,6,5,.86)', backdropFilter: 'blur(3px)' }}></div>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', width: 'min(1080px, 94vw)', height: '94vh', background: 'var(--panel)', border: '1px solid var(--violet-dim)', borderRadius: 'var(--radius-lg, 10px)', overflow: 'hidden', boxShadow: '0 0 0 1px var(--line-soft), 0 24px 64px rgba(0,0,0,.6)', animation: 'maestro-rise .18s ease both' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', padding: '12px 16px', borderBottom: '1px solid var(--line)', background: 'var(--panel-2)' }}>
+          <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.18em', color: 'var(--bg)', background: 'var(--violet)', padding: '2px 8px', borderRadius: 3 }}>{t.gates[item.gate]}</span>
+          <span style={{ fontWeight: 700, fontSize: 15 }}>{item.title}</span>
+          <span style={{ fontSize: 11, color: 'var(--muted)' }}>{item.meta}</span>
+          <span style={{ flex: 1 }}></span>
+          <button onClick={onClose} title={t.closeTip} style={{ fontFamily: 'var(--mono)', fontSize: 13, background: 'transparent', color: 'var(--muted)', border: 'none', cursor: 'pointer', padding: '4px 8px' }}>✕</button>
+        </div>
+        <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px 28px', fontFamily: 'var(--mono)' }}>
+          {item.docLabel ? <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', marginBottom: 6 }}>{item.docLabel}</div> : null}
+          <div style={{ background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderLeft: '2px solid var(--green-dim)', borderRadius: 4, padding: '12px 16px', fontSize: 13.5, lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-word', color: 'var(--ink)' }}>{item.doc}</div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', padding: '12px 16px', borderTop: '1px solid var(--line)', background: 'var(--panel-2)' }}>
+          {rejecting ? (
+            <React.Fragment>
+              <span style={{ flexBasis: '100%', display: 'flex' }}>
+                <Textarea danger placeholder={t.rejectPlaceholder} minHeight={56} value={reason} onChange={setReason} />
+              </span>
+              <Button variant="reject" disabled={!reason.trim()} onClick={() => { onDecide(item, 'reject', reason); onClose(); }}>{t.confirmReject}</Button>
+              <Button onClick={() => { setRejecting(false); setReason(''); }}>{t.cancel}</Button>
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              <Button variant="accept" onClick={() => { onDecide(item, 'accept'); onClose(); }}>{t.accept}</Button>
+              <Button variant="reject" onClick={() => setRejecting(true)}>{t.reject}</Button>
+            </React.Fragment>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 审批闸区：斜纹条 + GateCard 列表（accept/reject + 驳回必填理由）
+function GateSection({ approvals, onDecide, t }) {
+  const { GateCard, GateStripe, Button, Textarea, SectionHead } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(null);
+  const [reason, setReason] = React.useState('');
+  const [preview, setPreview] = React.useState(null);
+  const [folded, setFolded] = React.useState(() => new Set());
+  const toggleFold = (id) => setFolded((prev) => {
+    const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next;
+  });
+  if (approvals.length === 0) return null;
+  return (
+    <section style={{ marginTop: 18 }}>
+      <GateStripe />
+      <SectionHead mark="violet" title={t.gateSection} style={{ paddingTop: 12, color: 'var(--violet)' }} />
+      {approvals.map((a) => {
+        const isFolded = folded.has(a.id);
+        return (
+        <div key={a.id} style={{ marginBottom: 12 }}>
+          <GateCard gate={a.gate} kindLabel={t.gates[a.gate]} title={a.title} meta={a.meta} docLabel={a.docLabel} doc={a.doc}
+            collapsed={isFolded} foldable onToggleFold={() => toggleFold(a.id)}
+            foldTitle={isFolded ? t.gateExpand : t.gateCollapse}
+            onHeaderDoubleClick={() => setPreview(a)} headerTitle={t.gateDblTip}
+            headerExtra={<button type="button" title={t.fullRead} onClick={() => setPreview(a)}
+              style={{ fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1, cursor: 'pointer', background: 'transparent', color: 'var(--muted)', border: '1px solid var(--line)', borderRadius: 'var(--radius-sm,4px)', padding: '3px 7px' }}
+              onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--violet)'; e.currentTarget.style.borderColor = 'var(--violet-dim)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--line)'; }}>⛶</button>}
+            actions={
+              <React.Fragment>
+                <Button variant="accept" onClick={() => onDecide(a, 'accept')}>{t.accept}</Button>
+                <Button variant="reject" onClick={() => setRejecting(rejecting === a.id ? null : a.id)}>{t.reject}</Button>
+                <span style={{ marginLeft: 'auto' }}>
+                  <Button variant="ghost" size="xs" title={t.fullRead} onClick={() => setPreview(a)}>⛶ {t.fullRead}</Button>
+                </span>
+              </React.Fragment>
+            }>
+            {rejecting === a.id ? (
+              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 10 }}>
+                <Textarea danger placeholder={t.rejectPlaceholder} minHeight={56} value={reason} onChange={setReason} />
+                <Button variant="reject" disabled={!reason.trim()}
+                  onClick={() => { onDecide(a, 'reject', reason); setRejecting(null); setReason(''); }}>
+                  {t.confirmReject}
+                </Button>
+              </div>
+            ) : null}
+          </GateCard>
+        </div>
+        );
+      })}
+      <GatePreview item={preview} t={t} onDecide={onDecide} onClose={() => setPreview(null)} />
+    </section>
+  );
+}
+window.MaestroKitGateSection = GateSection;
diff --git a/design/ui_kits/console/Sidebar.jsx b/design/ui_kits/console/Sidebar.jsx
new file mode 100644
index 0000000..85d4bf2
--- /dev/null
+++ b/design/ui_kits/console/Sidebar.jsx
@@ -0,0 +1,397 @@
+// 左栏：logo + 项目列表（git 图标）+ WS 状态脚 · 可折叠（折叠后仅图标）
+// 项目 logo：图片优先（原型无图），回退首字母色块 hsl(h 45% 60%)
+function ProjectLogo({ project, size = 26 }) {
+  return (
+    <span style={{
+      flex: 'none', width: size, height: size, borderRadius: 5,
+      display: 'grid', placeItems: 'center',
+      fontSize: size * 0.5, fontWeight: 700, color: '#0a0d0b',
+      background: 'hsl(' + (project.hue || 140) + ' 45% 60%)',
+    }}>{(project.name || '?')[0].toUpperCase()}</span>
+  );
+}
+
+function MaestroGitIcon({ size = 16 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}>
+      <line x1="6" y1="3" x2="6" y2="15" />
+      <circle cx="18" cy="6" r="3" />
+      <circle cx="6" cy="18" r="3" />
+      <path d="M18 9a9 9 0 0 1-9 9" />
+    </svg>
+  );
+}
+
+// 像素章鱼 mark（折叠态 logo）
+function MaestroMark({ scale = 2.2 }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const MAP = ['.....LLLLL.....','...LLLLLLLLL...','..GGGGGGGGGGG..','..GGEEGGGEEGG..','..GGEEGGGEEGG..','..GGGGGGGGGGG..','...GGGGGGGGG...','...G..G.G..G...','...G..G.G..G...','..G...G.G...G..','..D...D.D...D..','.D...D...D...D.'];
+    const INK = { L: '#79ec94', G: '#5fdd7d', D: '#2e6b3d', E: '#070908' };
+    const ctx = ref.current.getContext('2d');
+    MAP.forEach((row, y) => [...row].forEach((ch, x) => {
+      if (INK[ch]) { ctx.fillStyle = INK[ch]; ctx.fillRect(x, y, 1, 1); }
+    }));
+  }, []);
+  return <canvas ref={ref} width="15" height="12"
+    style={{ width: 15 * scale, height: 12 * scale, imageRendering: 'pixelated', filter: 'drop-shadow(0 0 6px rgba(95,221,125,.4))' }} />;
+}
+
+// 项目状态：运行中(青脉冲) / 暂停(faint) / 阻塞(琥珀) / 空闲(muted)
+function projStateMeta(state, t) {
+  return ({
+    running: { color: 'var(--cyan)', pulse: true, label: t.projRunning },
+    paused: { color: 'var(--faint)', pulse: false, label: t.projPaused },
+    blocked: { color: 'var(--amber)', pulse: true, label: t.projBlocked },
+    idle: { color: 'var(--muted)', pulse: false, label: t.projIdle },
+  })[state] || { color: 'var(--muted)', pulse: false, label: t.projIdle };
+}
+
+function ProjStatusDot({ meta, size = 7 }) {
+  return (
+    <span style={{
+      flex: 'none', width: size, height: size, borderRadius: '50%', background: meta.color,
+      boxShadow: '0 0 7px ' + meta.color,
+      animation: meta.pulse ? 'maestro-pulse 1.4s infinite' : 'none',
+    }}></span>
+  );
+}
+
+// 侧栏底部小行：图标 + 主文 + 副文（折叠时仅图标，hover 高亮）
+function SideRow({ icon, label, detail, onClick, collapsed, title, accent }) {
+  const interactive = !!onClick;
+  return (
+    <div onClick={onClick} title={title || label}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 10,
+        padding: collapsed ? '9px 0' : '8px 12px', minHeight: 40,
+        justifyContent: collapsed ? 'center' : 'flex-start',
+        cursor: interactive ? 'pointer' : 'default', transition: 'background .1s',
+      }}
+      onMouseEnter={interactive ? (e) => { e.currentTarget.style.background = 'var(--panel)'; } : undefined}
+      onMouseLeave={interactive ? (e) => { e.currentTarget.style.background = 'transparent'; } : undefined}>
+      <span style={{ flex: 'none', color: accent || 'var(--muted)', display: 'inline-flex' }}>{icon}</span>
+      {!collapsed ? (
+        <span style={{ display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0, flex: 1 }}>
+          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{label}</span>
+          {detail ? <span style={{ fontSize: 10, color: 'var(--faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{detail}</span> : null}
+        </span>
+      ) : null}
+      {!collapsed && interactive ? <span style={{ flex: 'none', color: 'var(--faint)', fontSize: 11 }}>›</span> : null}
+    </div>
+  );
+}
+
+const sIco = { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', style: { flex: 'none' } };
+function IcoAgents() { return <svg {...sIco}><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="3" fill="currentColor" stroke="none" /></svg>; }
+function IcoGlobalCfg() { return <svg {...sIco}><circle cx="12" cy="12" r="9" /><line x1="3" y1="12" x2="21" y2="12" /><path d="M12 3a14 14 0 0 0 0 18a14 14 0 0 0 0-18" /></svg>; }
+
+function UserRow({ user, t, collapsed }) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  const avatar = (
+    <span style={{
+      flex: 'none', width: 26, height: 26, borderRadius: '50%', display: 'grid', placeItems: 'center',
+      fontSize: 12, fontWeight: 700, color: '#0a0d0b', background: 'hsl(' + (user.hue || 200) + ' 50% 62%)',
+    }}>{user.initial}</span>
+  );
+  return (
+    <div ref={ref} style={{ position: 'relative', borderTop: '1px solid var(--line-soft)' }}>
+      <div onClick={() => setOpen(!open)} title={user.name + ' · ' + user.plan}
+        style={{ display: 'flex', alignItems: 'center', gap: 10, padding: collapsed ? '10px 0' : '10px 12px', justifyContent: collapsed ? 'center' : 'flex-start', cursor: 'pointer', transition: 'background .1s' }}
+        onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--panel)'; }}
+        onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
+        {avatar}
+        {!collapsed ? (
+          <React.Fragment>
+            <span style={{ display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0, flex: 1 }}>
+              <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{user.name}</span>
+              <span style={{ fontSize: 10, color: 'var(--green)', whiteSpace: 'nowrap' }}>{user.plan}</span>
+            </span>
+            <span style={{ flex: 'none', color: 'var(--faint)', fontSize: 11, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .12s' }}>▴</span>
+          </React.Fragment>
+        ) : null}
+      </div>
+      {open ? (
+        <div style={{
+          position: collapsed ? 'fixed' : 'absolute',
+          ...(collapsed
+            ? { left: 58, bottom: 14, width: 180 }
+            : { bottom: 'calc(100% + 4px)', left: 12, right: 12, minWidth: 160 }),
+          zIndex: 80,
+          background: 'var(--bg-deep)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md,6px)',
+          boxShadow: '0 10px 30px rgba(0,0,0,.65)', padding: 6, animation: 'maestro-rise .12s ease both',
+        }}>
+          <div style={{ padding: '6px 10px', borderBottom: '1px solid var(--line-soft)', marginBottom: 4 }}>
+            <div style={{ fontSize: 12, fontWeight: 600 }}>{user.name} <span style={{ color: 'var(--faint)', fontWeight: 400 }}>{user.handle}</span></div>
+            <div style={{ fontSize: 10.5, color: 'var(--green)', marginTop: 2 }}>{t.gUserPlan} · {user.plan}</div>
+          </div>
+          {[t.gUserSettings, t.gUserSignOut].map((label, i) => (
+            <div key={label} style={{ padding: '6px 10px', fontSize: 12, color: i === 1 ? 'var(--red)' : 'var(--ink)', cursor: 'pointer', borderRadius: 3 }}
+              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--panel-2)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>{label}</div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function fmtTokens(n) {
+  if (n >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
+  if (n >= 1e3) return Math.round(n / 1e3) + 'K';
+  return String(n);
+}
+
+function AgentsRow({ global, summary, t, collapsed }) {
+  const [open, setOpen] = React.useState(false);
+  const [pos, setPos] = React.useState(null);
+  const ref = React.useRef(null);
+  const rowRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target) && rowRef.current && !rowRef.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  const toggle = () => {
+    if (!open && rowRef.current) {
+      const r = rowRef.current.getBoundingClientRect();
+      const W = 286;
+      const left = collapsed ? r.right + 6 : Math.min(r.left, window.innerWidth - W - 8);
+      setPos({ left, bottom: window.innerHeight - r.top + 6, width: W });
+    }
+    setOpen((o) => !o);
+  };
+  const maxTok = Math.max(...summary.byProject.map((p) => p.tokens), 1);
+  const detail = t.gAgentsDetail.replace('{p}', global.runningProjects).replace('{P}', global.projectCount).replace('{a}', global.runningAgents);
+  return (
+    <div style={{ position: 'relative' }}>
+      <div ref={rowRef}>
+        <SideRow collapsed={collapsed} icon={<IcoAgents />} accent="var(--cyan)" onClick={toggle}
+          label={t.gAgents} detail={detail} title={t.gAgents + ' · ' + detail} />
+      </div>
+      {open && pos ? (
+        <div ref={ref} style={{
+          position: 'fixed', left: pos.left, bottom: pos.bottom, width: pos.width, zIndex: 1000,
+          background: 'var(--bg-deep)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md,6px)',
+          boxShadow: '0 12px 34px rgba(0,0,0,.7)', padding: '12px 14px', animation: 'maestro-rise .12s ease both',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 10.5, fontWeight: 700, letterSpacing: '.18em', color: 'var(--muted)', marginBottom: 10 }}>
+            <span style={{ color: 'var(--cyan)' }}>▍</span>{t.gAgents.toUpperCase()}
+            <span style={{ marginLeft: 'auto', fontWeight: 400, letterSpacing: '.04em', color: 'var(--faint)' }}>{t.apWeek}</span>
+          </div>
+          {/* 总结 */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--line-soft)', border: '1px solid var(--line-soft)', borderRadius: 4, overflow: 'hidden', marginBottom: 12 }}>
+            {[
+              [fmtTokens(summary.tokensWeek), t.apTokens, 'var(--cyan)'],
+              ['$' + summary.costWeek.toFixed(1), t.apCost, 'var(--green)'],
+              [summary.runsWeek, t.apRuns, 'var(--ink)'],
+              [summary.activeNow + ' / ' + global.maxAgents, t.apActive, summary.activeNow ? 'var(--cyan)' : 'var(--faint)'],
+            ].map(([v, k, c], i) => (
+              <div key={i} style={{ background: 'var(--bg-deep)', padding: '8px 10px' }}>
+                <div style={{ fontSize: 16, fontWeight: 700, color: c, letterSpacing: '.02em' }}>{v}</div>
+                <div style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '.06em', marginTop: 1 }}>{k}</div>
+              </div>
+            ))}
+          </div>
+          {/* 按项目 */}
+          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.18em', color: 'var(--faint)', marginBottom: 7 }}>{t.apPerProj}</div>
+          <div style={{ display: 'grid', gap: 9 }}>
+            {summary.byProject.map((p) => (
+              <div key={p.id}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
+                  <span style={{ flex: 'none', width: 16, height: 16, borderRadius: 4, display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, color: '#0a0d0b', background: 'hsl(' + p.hue + ' 45% 60%)' }}>{p.name[0].toUpperCase()}</span>
+                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
+                  {p.active > 0 ? (
+                    <span style={{ flex: 'none', display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 9.5, color: 'var(--cyan)', border: '1px solid var(--cyan-dim)', borderRadius: 3, padding: '0 5px' }}>
+                      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--cyan)', boxShadow: '0 0 6px var(--cyan)', animation: 'maestro-pulse .9s infinite' }}></span>{p.active}
+                    </span>
+                  ) : <span style={{ flex: 'none', fontSize: 9.5, color: 'var(--faint)' }}>{t.apIdle}</span>}
+                  <span style={{ marginLeft: 'auto', flex: 'none', fontSize: 11, fontWeight: 600, color: 'var(--cyan)' }}>{fmtTokens(p.tokens)}</span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingLeft: 24 }}>
+                  <span style={{ flex: 1, height: 4, background: 'var(--panel-2)', borderRadius: 2, overflow: 'hidden' }}>
+                    <span style={{ display: 'block', height: '100%', width: (p.tokens / maxTok * 100) + '%', background: 'var(--cyan)', boxShadow: '0 0 6px rgba(89,200,216,.5)' }}></span>
+                  </span>
+                  <span style={{ flex: 'none', fontSize: 10, color: 'var(--faint)' }}>{p.runs} {t.apRuns}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function GlobalConfigRow({ global, t, collapsed }) {
+  const { Select } = window.MaestroDesignSystem_a6a290;
+  const [open, setOpen] = React.useState(false);
+  const [pos, setPos] = React.useState(null);
+  const ref = React.useRef(null);
+  const rowRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target) && rowRef.current && !rowRef.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  const toggle = () => {
+    if (!open && rowRef.current) {
+      const r = rowRef.current.getBoundingClientRect();
+      const W = 250;
+      // 优先在行上方对齐左缘；折叠态贴侧栏右侧
+      const left = collapsed ? r.right + 6 : Math.min(r.left, window.innerWidth - W - 8);
+      setPos({ left, bottom: window.innerHeight - r.top + 6, width: W });
+    }
+    setOpen((o) => !o);
+  };
+  const stat = (k, v, accent) => (
+    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, padding: '5px 0', borderBottom: '1px solid var(--line-soft)' }}>
+      <span style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.06em' }}>{k}</span>
+      <span style={{ fontSize: 12, fontWeight: 600, color: accent || 'var(--ink)' }}>{v}</span>
+    </div>
+  );
+  return (
+    <div style={{ position: 'relative' }}>
+      <div ref={rowRef}>
+        <SideRow collapsed={collapsed} icon={<IcoGlobalCfg />} onClick={toggle}
+          label={t.gConfig}
+          detail={t.gConfigDetail.replace('{n}', global.maxAgents).replace('{v}', global.daemon)}
+          title={t.gConfig} />
+      </div>
+      {open && pos ? (
+        <div ref={ref} style={{
+          position: 'fixed', left: pos.left, bottom: pos.bottom, width: pos.width,
+          zIndex: 1000, background: 'var(--bg-deep)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md,6px)',
+          boxShadow: '0 12px 34px rgba(0,0,0,.7)', padding: '12px 14px', animation: 'maestro-rise .12s ease both',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 10.5, fontWeight: 700, letterSpacing: '.18em', color: 'var(--muted)', marginBottom: 8 }}>
+            <span style={{ color: 'var(--cyan)' }}>▍</span>{t.gConfig.toUpperCase()}
+          </div>
+          <div style={{ marginBottom: 12 }}>
+            {stat('daemon', global.daemon, 'var(--green)')}
+            {stat('port', ':' + global.port)}
+            {stat('uptime', global.uptime)}
+            {stat(t.gAgents, global.runningAgents + ' / ' + global.maxAgents, 'var(--cyan)')}
+          </div>
+          <div style={{ display: 'grid', gap: 10 }}>
+            <label style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11, color: 'var(--muted)', letterSpacing: '.08em' }}>
+              <span>{t.maxConcurrency}</span>
+              <Select defaultValue={String(global.maxAgents)} style={{ width: '100%' }} options={['1', '2', '4', '6', '8'].map((n) => ({ value: n, label: n }))} />
+            </label>
+            <label style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11, color: 'var(--muted)', letterSpacing: '.08em' }}>
+              <span>{t.workMode}</span>
+              <Select defaultValue={global.autonomy} style={{ width: '100%' }} options={Object.entries(t.autonomy).map(([value, label]) => ({ value, label }))} />
+            </label>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Sidebar({ projects, currentId, onSelect, onNewProject, collapsed, onToggleCollapse, t, global, user, summary, onGlobalConfig }) {
+  const { Button } = window.MaestroDesignSystem_a6a290;
+  return (
+    <aside style={{ background: 'var(--bg-deep)', borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column', overflowY: 'auto', overflowX: 'hidden' }}>
+      <div style={{ padding: collapsed ? '16px 0 12px' : '20px 16px 14px', borderBottom: '1px solid var(--line-soft)', display: 'flex', flexDirection: 'column', alignItems: collapsed ? 'center' : 'flex-start' }}>
+        {collapsed ? <MaestroMark /> : (
+          <React.Fragment>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <MaestroMark scale={1.8} />
+              <span style={{ fontSize: 19, fontWeight: 700, letterSpacing: '.28em', color: 'var(--green)', textShadow: '0 0 12px rgba(95,221,125,.45)' }}>
+                MAESTRO<span style={{ marginLeft: 1, animation: 'maestro-blink 1.1s steps(1) infinite' }}>▮</span>
+              </span>
+            </div>
+            <div style={{ marginTop: 5, fontSize: 9, fontWeight: 600, color: 'var(--muted)', letterSpacing: '.2em', lineHeight: 1.7, textTransform: 'uppercase' }}>{t.logoSub}</div>
+          </React.Fragment>
+        )}
+      </div>
+      {!collapsed ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600, letterSpacing: '.22em', color: 'var(--muted)', padding: '16px 16px 8px' }}>
+          <span style={{ color: 'var(--green)' }}>▍</span>{t.projects}
+          <span style={{ marginLeft: 'auto' }}><Button variant="ghost" size="xs" onClick={onNewProject}>{t.newProject}</Button></span>
+        </div>
+      ) : <div style={{ height: 12 }}></div>}
+      <ul style={{ listStyle: 'none', flex: 1, margin: 0, padding: 0 }}>
+        {projects.map((p) => {
+          const active = p.id === currentId;
+          const meta = projStateMeta(p.state, t);
+          return (
+            <li key={p.id} onClick={() => onSelect(p.id)} title={p.name + ' · ' + meta.label + (p.pending ? ' · ' + t.projPendingTip.replace('{n}', p.pending) : '')}
+              style={{
+                position: 'relative',
+                padding: collapsed ? '10px 0' : '9px 14px 9px 12px', cursor: 'pointer',
+                display: 'flex', alignItems: 'center', gap: 9,
+                justifyContent: collapsed ? 'center' : 'flex-start',
+                borderLeft: '2px solid ' + (active ? 'var(--green)' : 'transparent'),
+                background: active ? 'var(--panel-2)' : 'transparent',
+                color: active ? 'var(--green)' : 'var(--muted)',
+              }}
+              onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'var(--panel)'; }}
+              onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
+              <ProjectLogo project={p} size={collapsed ? 26 : 24} />
+              {!collapsed ? (
+                <React.Fragment>
+                  <span style={{ display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0, flex: 1 }}>
+                    <span style={{ fontWeight: 600, fontSize: 13, color: active ? 'var(--green)' : 'var(--ink)' }}>{p.name}</span>
+                    <span style={{ fontSize: 10.5, color: 'var(--faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.path}</span>
+                  </span>
+                  <span style={{ flex: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
+                    {p.pending > 0 ? (
+                      <span title={t.projPendingTip.replace('{n}', p.pending)} style={{
+                        fontFamily: 'var(--mono)', fontSize: 9.5, fontWeight: 700, lineHeight: '15px',
+                        minWidth: 15, height: 15, textAlign: 'center', padding: '0 4px',
+                        color: 'var(--bg-deep)', background: 'var(--violet)', borderRadius: 8,
+                      }}>{p.pending}</span>
+                    ) : null}
+                    <ProjStatusDot meta={meta} />
+                  </span>
+                </React.Fragment>
+              ) : (
+                <span style={{ position: 'absolute', top: 7, right: 9, display: 'flex', alignItems: 'center' }}>
+                  <ProjStatusDot meta={meta} size={p.pending > 0 ? 8 : 6} />
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      {/* ── 底部：全局 agent · 全局配置 · 用户 ── */}
+      <div style={{ borderTop: '1px solid var(--line-soft)' }}>
+        <AgentsRow global={global} summary={summary} t={t} collapsed={collapsed} />
+        <GlobalConfigRow global={global} t={t} collapsed={collapsed} />
+      </div>
+      <UserRow user={user} t={t} collapsed={collapsed} />
+      <div style={{ borderTop: '1px solid var(--line-soft)', padding: collapsed ? '10px 0' : '10px 12px', fontSize: 11, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 7, justifyContent: collapsed ? 'center' : 'flex-start' }}>
+        {!collapsed ? (
+          <React.Fragment>
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 8px var(--green)', display: 'inline-block', flex: 'none' }}></span>
+            <span style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{t.connected}</span>
+          </React.Fragment>
+        ) : null}
+        <button onClick={onToggleCollapse} title={collapsed ? t.expandSide : t.collapseSide}
+          style={{
+            marginLeft: collapsed ? 0 : 'auto', flex: 'none', cursor: 'pointer',
+            fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1,
+            background: 'transparent', color: 'var(--muted)',
+            border: '1px solid var(--line)', borderRadius: 'var(--radius-sm, 4px)', padding: '4px 7px',
+          }}
+          onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--green)'; e.currentTarget.style.borderColor = 'var(--green-dim)'; }}
+          onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--line)'; }}>
+          {collapsed ? '»' : '«'}
+        </button>
+      </div>
+    </aside>
+  );
+}
+window.MaestroKitSidebar = Sidebar;
diff --git a/design/ui_kits/console/TaskTree.jsx b/design/ui_kits/console/TaskTree.jsx
new file mode 100644
index 0000000..c9bab6b
--- /dev/null
+++ b/design/ui_kits/console/TaskTree.jsx
@@ -0,0 +1,317 @@
+// 任务树：筛选栏（搜索+复杂度+状态分组）+ 折叠层级 + 复杂度可点换档 + 依赖可视化跳转 + 展开详情；新建任务表单
+const KIT_FILTER_GROUPS = [
+  ['todo', ['init', 'ready', 'blocked']],
+  ['doing', ['analyzing', 'speccing', 'queued', 'executing', 'decomposed']],
+  ['gate', ['plan_review', 'spec_review', 'exec_review']],
+  ['bad', ['failed', 'needs_attention']],
+  ['hold', ['paused', 'cancelled']],
+  ['done', ['done']],
+];
+
+function kitFlatten(tasks, map = new Map()) {
+  for (const tk of tasks) { map.set(tk.id, tk); if (tk.children) kitFlatten(tk.children, map); }
+  return map;
+}
+
+// 复杂度徽章 + 点击换档下拉
+function CplxPicker({ task, cplx, onChange }) {
+  const { ComplexityBadge } = window.MaestroDesignSystem_a6a290;
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  return (
+    <span ref={ref} style={{ position: 'relative', display: 'inline-flex', flex: 'none' }} onClick={(e) => e.stopPropagation()}>
+      <button onClick={() => setOpen(!open)} title="点击调整复杂度" style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', display: 'inline-flex' }}>
+        <ComplexityBadge complexity={cplx} />
+      </button>
+      {open ? (
+        <span style={{
+          position: 'absolute', top: 'calc(100% + 5px)', right: 0, zIndex: 60,
+          display: 'flex', gap: 5, background: 'var(--bg-deep)', border: '1px solid var(--line)',
+          borderRadius: 'var(--radius-md, 6px)', padding: 6, boxShadow: '0 10px 30px rgba(0,0,0,.65)',
+          animation: 'maestro-rise .12s ease both',
+        }}>
+          {['hard', 'medium', 'easy'].map((v) => (
+            <button key={v} onClick={() => { onChange(task.id, v); setOpen(false); }} style={{
+              background: 'none', border: 'none', padding: 0, cursor: 'pointer', display: 'inline-flex',
+              outline: v === cplx ? '1px solid currentColor' : 'none', outlineOffset: 1,
+              filter: 'none',
+            }}
+              onMouseEnter={(e) => { e.currentTarget.style.filter = 'brightness(1.35)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.filter = 'none'; }}>
+              <ComplexityBadge complexity={v} />
+            </button>
+          ))}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function FilterBar({ t, kw, setKw, cplxSet, toggleCplx, statusSet, toggleGroup, matchCount, filtering, onClear }) {
+  const { Button } = window.MaestroDesignSystem_a6a290;
+  const chip = (on, color, dim, label, onClick) => (
+    <button key={label} onClick={onClick} style={{
+      fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 700, letterSpacing: '.1em',
+      background: on ? 'rgba(95,221,125,.08)' : 'transparent',
+      color: on ? color : 'var(--faint)',
+      border: '1px solid ' + (on ? dim : 'var(--line)'),
+      borderRadius: 3, padding: '2px 8px', cursor: 'pointer', transition: 'all .1s', whiteSpace: 'nowrap',
+    }}>{label}</button>
+  );
+  return (
+    <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 6, padding: '8px 10px', marginBottom: 12, display: 'flex', flexDirection: 'column', gap: 7 }}>
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+        <input value={kw} onChange={(e) => setKw(e.target.value)} placeholder={t.searchPh} autoComplete="off" style={{
+          fontFamily: 'var(--mono)', fontSize: 12, width: 190, padding: '4px 9px',
+          background: 'var(--bg-deep)', color: 'var(--ink)', border: '1px solid var(--line)',
+          borderRadius: 'var(--radius-sm, 4px)', outline: 'none',
+        }} />
+        <span style={{ display: 'inline-flex', gap: 6 }}>
+          {chip(cplxSet.has('hard'), 'var(--red)', 'var(--red-dim)', 'HARD', () => toggleCplx('hard'))}
+          {chip(cplxSet.has('medium'), 'var(--amber)', 'var(--amber-dim)', 'MED', () => toggleCplx('medium'))}
+          {chip(cplxSet.has('easy'), 'var(--green)', 'var(--green-dim)', 'EASY', () => toggleCplx('easy'))}
+        </span>
+        <span style={{ flex: 1 }}></span>
+        {filtering ? <span style={{ fontSize: 11, color: 'var(--amber)', letterSpacing: '.08em' }}>{t.matchCount.replace('{n}', matchCount)}</span> : null}
+        {filtering ? <Button variant="ghost" size="xs" onClick={onClear}>{t.clearFilter}</Button> : null}
+      </div>
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+        {KIT_FILTER_GROUPS.map(([g, sts]) => {
+          const on = sts.every((s) => statusSet.has(s));
+          const part = !on && sts.some((s) => statusSet.has(s));
+          return (
+            <button key={g} onClick={() => toggleGroup(sts)} style={{
+              fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '.04em',
+              background: 'transparent',
+              color: on ? 'var(--green)' : part ? 'var(--amber)' : 'var(--muted)',
+              border: '1px dashed ' + (on ? 'var(--green-dim)' : part ? 'var(--amber-dim)' : 'var(--line-soft)'),
+              borderRadius: 3, padding: '2px 9px', cursor: 'pointer', whiteSpace: 'nowrap',
+            }}>{t.fgroups[g]}</button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function TaskRow({ task, depth, ctx, expandedId, setExpandedId, openIds, toggleOpen, t, byId, cplxOf, onChangeCplx, flashId, onJump, visibleSet }) {
+  const { StatusChip } = window.MaestroDesignSystem_a6a290;
+  const kids = (task.children || []).filter((k) => !visibleSet || visibleSet.has(k.id));
+  const open = openIds.has(task.id) || !!visibleSet; // 筛选时自动展开可见节点
+  const expanded = expandedId === task.id;
+  const isGate = ['plan_review', 'spec_review', 'exec_review'].includes(task.status);
+  const flashing = flashId === task.id;
+  const [hover, setHover] = React.useState(false);
+  return (
+    <div style={depth > 0 ? { borderLeft: '1px solid var(--line-soft)' } : null}>
+      <div onClick={() => setExpandedId(expanded ? null : task.id)} data-task-id={task.id}
+        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+        style={{
+          display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px 8px 6px',
+          borderBottom: '1px solid var(--line-soft)', cursor: 'pointer', transition: 'background .1s',
+          background: expanded ? 'var(--panel-2)' : isGate ? 'rgba(184,142,245,.05)' : hover ? 'var(--panel)' : 'transparent',
+          opacity: ctx ? .55 : 1,
+          animation: flashing ? 'maestro-locate 1.8s ease-out' : 'none',
+        }}>
+        <span onClick={(e) => { e.stopPropagation(); if (kids.length) toggleOpen(task.id); }}
+          style={{
+            width: 16, flex: 'none', textAlign: 'center', fontSize: 10, userSelect: 'none',
+            color: kids.length ? (open ? 'var(--green)' : 'var(--muted)') : 'var(--faint)',
+            transform: kids.length && open ? 'rotate(90deg)' : 'none', transition: 'transform .12s',
+          }}>
+          {kids.length ? '▶' : '·'}
+        </span>
+        <span style={{ fontWeight: 500, color: ctx ? 'var(--muted)' : 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {task.title}<span style={{ color: 'var(--faint)', fontSize: 10.5, marginLeft: 6 }}>{task.id}</span>
+        </span>
+        <span style={{ flex: 1, minWidth: 8 }}></span>
+        {task.deps ? (
+          <span style={{ flex: 'none', fontSize: 10.5, letterSpacing: '.06em', color: 'var(--amber)', border: '1px dashed var(--amber-dim)', borderRadius: 3, padding: '1px 7px', lineHeight: 1.5, whiteSpace: 'nowrap' }}>
+            {t.depsWait} {task.deps.length}
+          </span>
+        ) : null}
+        <span style={{ fontSize: 10.5, color: task.prio === 'P0' ? 'var(--amber)' : 'var(--faint)', flex: 'none' }}>{task.prio}</span>
+        <CplxPicker task={task} cplx={cplxOf(task)} onChange={onChangeCplx} />
+        <StatusChip status={task.status} label={t.status[task.status]} />
+      </div>
+      {expanded ? <TaskDetail task={task} t={t} byId={byId} onJump={onJump} /> : null}
+      {kids.length && open ? (
+        <div style={{ marginLeft: 22 }}>
+          {kids.map((k) => (
+            <TaskRow key={k.id} task={k} depth={depth + 1} ctx={visibleSet ? visibleSet.ctx.has(k.id) : false}
+              expandedId={expandedId} setExpandedId={setExpandedId} openIds={openIds} toggleOpen={toggleOpen} t={t}
+              byId={byId} cplxOf={cplxOf} onChangeCplx={onChangeCplx} flashId={flashId} onJump={onJump} visibleSet={visibleSet} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function TaskDetail({ task, t, byId, onJump }) {
+  const label = task.doc ? t.specLabel : task.ops ? t.opsLabel : null;
+  const text = task.doc || task.ops;
+  return (
+    <div style={{ background: 'var(--panel)', borderBottom: '1px solid var(--line)', borderLeft: '2px solid var(--green-dim)', padding: '14px 16px', animation: 'maestro-rise .2s ease both', display: 'grid', gap: 14 }}>
+      {label ? (
+        <div>
+          <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', marginBottom: 4 }}>{label}</div>
+          <pre style={{ background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderLeft: '2px solid var(--green-dim)', padding: '10px 12px', fontFamily: 'var(--mono)', fontSize: 12.5, whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0, color: 'var(--ink)', borderRadius: 4 }}>{text}</pre>
+        </div>
+      ) : (
+        <div style={{ padding: '10px 12px', border: '1px dashed var(--line)', borderRadius: 6, color: 'var(--faint)', fontStyle: 'italic', fontSize: 12 }}>
+          {t.pendingDoc}
+        </div>
+      )}
+      {task.deps && task.deps.length ? (
+        <div>
+          <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', marginBottom: 4 }}>{t.depsLabel}</div>
+          <div style={{ display: 'grid', gap: 4 }}>
+            {task.deps.map((d) => {
+              const dep = byId.get(d);
+              const ok = dep && dep.status === 'done';
+              return (
+                <div key={d} onClick={(e) => { e.stopPropagation(); onJump(d); }} title="→" style={{
+                  display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, padding: '4px 10px', cursor: 'pointer',
+                  background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderRadius: 4,
+                  borderLeft: '2px solid ' + (ok ? 'var(--green-dim)' : 'var(--amber-dim)'),
+                  transition: 'border-color .12s, background .12s',
+                }}
+                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--panel-2)'; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--bg-deep)'; }}>
+                  <span style={{ color: ok ? 'var(--green)' : 'var(--amber)', flex: 'none' }}>{ok ? '✓' : '◌'}</span>
+                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dep ? dep.title : d}</span>
+                  <span style={{ flex: 'none', fontSize: 10.5, color: ok ? 'var(--green)' : 'var(--amber)' }}>{ok ? t.depDone : t.depWait}</span>
+                  <span style={{ marginLeft: 'auto', color: 'var(--faint)', fontSize: 12 }}>→</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function NewTaskPanel({ tasks, onCancel, onCreate, t }) {
+  const { Button, Input, Select, ComplexitySeg } = window.MaestroDesignSystem_a6a290;
+  return (
+    <form style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 6, padding: 14, marginBottom: 14 }}
+      onSubmit={(e) => { e.preventDefault(); onCreate(); }}>
+      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap' }}>
+        <span style={{ flex: 1, minWidth: 320, display: 'flex' }}><Input label={t.titleLabel} required placeholder={t.titlePlaceholder} style={{ width: '100%' }} /></span>
+      </div>
+      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap', marginTop: 12 }}>
+        <label style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11, color: 'var(--muted)', letterSpacing: '.08em' }}>
+          <span>{t.complexity} <span style={{ color: 'var(--red)' }}>*</span></span>
+          <ComplexitySeg defaultValue="auto" includeAuto autoLabel={t.cplxAuto} />
+        </label>
+        <Select label={t.priority} defaultValue="1" options={[
+          { value: '0', label: t.p0 }, { value: '1', label: t.p1 }, { value: '2', label: t.p2 },
+        ]} />
+        <span style={{ flex: 1, minWidth: 240, display: 'flex' }}>
+          <Select label={t.parentTask} style={{ width: '100%' }} options={[{ value: '', label: t.topLevel }, ...tasks.map((tk) => ({ value: tk.id, label: tk.title }))]} />
+        </span>
+      </div>
+      <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--line-soft)' }}>
+        <Button onClick={onCancel}>{t.cancel}</Button>
+        <Button variant="solid" type="submit">{t.create}</Button>
+      </div>
+    </form>
+  );
+}
+
+function TaskSection({ tasks, onToast, t }) {
+  const { Button, SectionHead } = window.MaestroDesignSystem_a6a290;
+  const [expandedId, setExpandedId] = React.useState(null);
+  const [openIds, setOpenIds] = React.useState(() => new Set(['t1']));
+  const [showNew, setShowNew] = React.useState(false);
+  const [kw, setKw] = React.useState('');
+  const [cplxSet, setCplxSet] = React.useState(() => new Set());
+  const [statusSet, setStatusSet] = React.useState(() => new Set());
+  const [cplxOverride, setCplxOverride] = React.useState({});
+  const [flashId, setFlashId] = React.useState(null);
+  const byId = React.useMemo(() => kitFlatten(tasks), [tasks]);
+  const cplxOf = (task) => cplxOverride[task.id] || task.cplx;
+  const onChangeCplx = (id, v) => setCplxOverride((m) => ({ ...m, [id]: v }));
+  const toggleOpen = (id) => setOpenIds((prev) => {
+    const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next;
+  });
+  const toggleCplx = (v) => setCplxSet((prev) => {
+    const next = new Set(prev); next.has(v) ? next.delete(v) : next.add(v); return next;
+  });
+  const toggleGroup = (sts) => setStatusSet((prev) => {
+    const next = new Set(prev);
+    const allOn = sts.every((s) => next.has(s));
+    for (const s of sts) allOn ? next.delete(s) : next.add(s);
+    return next;
+  });
+  const filtering = kw.trim() !== '' || cplxSet.size > 0 || statusSet.size > 0;
+  const clearFilters = () => { setKw(''); setCplxSet(new Set()); setStatusSet(new Set()); };
+
+  // 筛选：自身命中 → 显示；祖先链作为上下文淡显；命中节点的父级自动展开
+  const { visibleSet, matchCount } = React.useMemo(() => {
+    if (!filtering) return { visibleSet: null, matchCount: 0 };
+    const matches = (tk) =>
+      (kw.trim() === '' || tk.title.toLowerCase().includes(kw.trim().toLowerCase())) &&
+      (cplxSet.size === 0 || cplxSet.has(cplxOverride[tk.id] || tk.cplx)) &&
+      (statusSet.size === 0 || statusSet.has(tk.status));
+    const vis = new Set(); const ctx = new Set(); let count = 0;
+    const walk = (tk) => {
+      let childHit = false;
+      for (const k of tk.children || []) if (walk(k)) childHit = true;
+      const hit = matches(tk);
+      if (hit) count++;
+      if (hit || childHit) { vis.add(tk.id); if (!hit) ctx.add(tk.id); return true; }
+      return false;
+    };
+    for (const tk of tasks) walk(tk);
+    const set = new Set(vis); set.ctx = ctx;
+    return { visibleSet: set, matchCount: count };
+  }, [filtering, kw, cplxSet, statusSet, tasks, cplxOverride]);
+
+  // 依赖跳转：展开所有祖先 + flash 定位
+  const onJump = (id) => {
+    setOpenIds((prev) => {
+      const next = new Set(prev);
+      const openAncestors = (list, chain) => {
+        for (const tk of list) {
+          if (tk.id === id) { for (const c of chain) next.add(c); return true; }
+          if (tk.children && openAncestors(tk.children, [...chain, tk.id])) return true;
+        }
+        return false;
+      };
+      openAncestors(tasks, []);
+      return next;
+    });
+    setFlashId(null);
+    requestAnimationFrame(() => setFlashId(id));
+    setTimeout(() => setFlashId((f) => (f === id ? null : f)), 1900);
+  };
+
+  const roots = visibleSet ? tasks.filter((tk) => visibleSet.has(tk.id)) : tasks;
+  return (
+    <section>
+      <SectionHead title={t.taskSection} sticky action={<Button variant="ghost" size="xs" onClick={() => setShowNew(!showNew)}>{t.newTask}</Button>} />
+      {showNew ? <NewTaskPanel tasks={tasks} t={t} onCancel={() => setShowNew(false)}
+        onCreate={() => { setShowNew(false); onToast('ok', t.toastCreated); }} /> : null}
+      <FilterBar t={t} kw={kw} setKw={setKw} cplxSet={cplxSet} toggleCplx={toggleCplx}
+        statusSet={statusSet} toggleGroup={toggleGroup} matchCount={matchCount} filtering={filtering} onClear={clearFilters} />
+      <div>
+        {roots.map((tk) => (
+          <TaskRow key={tk.id} task={tk} depth={0} ctx={visibleSet ? visibleSet.ctx.has(tk.id) : false}
+            expandedId={expandedId} setExpandedId={setExpandedId} openIds={openIds} toggleOpen={toggleOpen} t={t}
+            byId={byId} cplxOf={cplxOf} onChangeCplx={onChangeCplx} flashId={flashId} onJump={onJump} visibleSet={visibleSet} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+Object.assign(window, { MaestroKitTaskSection: TaskSection });
diff --git a/design/ui_kits/console/Topbar.jsx b/design/ui_kits/console/Topbar.jsx
new file mode 100644
index 0000000..44ae3ae
--- /dev/null
+++ b/design/ui_kits/console/Topbar.jsx
@@ -0,0 +1,172 @@
+// 顶栏动作：默认仅图标，hover 横向展开文字（与 CountBadge 同交互）
+const maestroIconActionCss = `
+.m-iact{display:inline-flex;align-items:center;height:28px;padding:0 8px;cursor:pointer;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;line-height:1;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm,4px);transition:color .12s,border-color .12s;white-space:nowrap}
+.m-iact svg{flex:none}
+.m-iact .m-iact-label{max-width:0;opacity:0;overflow:hidden;transition:max-width .28s ease,opacity .22s ease,margin-left .28s ease}
+.m-iact:hover{color:var(--green);border-color:var(--green-dim)}
+.m-iact:hover .m-iact-label{max-width:9em;opacity:1;margin-left:6px}
+`;
+function ensureIconActionCss() {
+  if (document.getElementById('m-iact-css')) return;
+  const s = document.createElement('style'); s.id = 'm-iact-css'; s.textContent = maestroIconActionCss;
+  document.head.appendChild(s);
+}
+function IconAction({ icon, label, title, onClick }) {
+  ensureIconActionCss();
+  return (
+    <button type="button" className="m-iact" title={title || label} onClick={onClick}>
+      {icon}
+      <span className="m-iact-label">{label}</span>
+    </button>
+  );
+}
+const iactSvg = { fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', width: 14, height: 14, viewBox: '0 0 24 24' };
+function SyncIcon() {
+  return <svg {...iactSvg}><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /></svg>;
+}
+function ConfigIcon() {
+  return <svg {...iactSvg}><line x1="3" y1="6" x2="12" y2="6" /><circle cx="15" cy="6" r="2.5" /><line x1="18" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="5.5" y2="12" /><circle cx="9" cy="12" r="2.5" /><line x1="12.5" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="12.5" y2="18" /><circle cx="16" cy="18" r="2.5" /><line x1="19.5" y1="18" x2="21" y2="18" /></svg>;
+}
+
+function LangIcon() {
+  return <svg {...iactSvg}><circle cx="12" cy="12" r="9" /><path d="M3 12h18" /><path d="M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18" /></svg>;
+}
+function SunIcon() {
+  return <svg {...iactSvg}><circle cx="12" cy="12" r="4" /><line x1="12" y1="2" x2="12" y2="5" /><line x1="12" y1="19" x2="12" y2="22" /><line x1="2" y1="12" x2="5" y2="12" /><line x1="19" y1="12" x2="22" y2="12" /><line x1="4.9" y1="4.9" x2="7" y2="7" /><line x1="17" y1="17" x2="19.1" y2="19.1" /><line x1="4.9" y1="19.1" x2="7" y2="17" /><line x1="17" y1="7" x2="19.1" y2="4.9" /></svg>;
+}
+function MoonIcon() {
+  return <svg {...iactSvg}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" /></svg>;
+}
+
+function LangMenu({ t, lang, onSelectLang }) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+  return (
+    <span ref={ref} style={{ position: 'relative', display: 'inline-flex' }}>
+      <span onClick={() => setOpen(!open)}>
+        <IconAction icon={<LangIcon />} label={t.lang} title={t.langTip} onClick={() => {}} />
+      </span>
+      {open ? (
+        <div style={{
+          position: 'absolute', top: 'calc(100% + 5px)', right: 0, zIndex: 60,
+          display: 'grid', minWidth: 124,
+          background: 'var(--bg-deep)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md, 6px)',
+          padding: 4, boxShadow: '0 10px 30px rgba(0,0,0,.65)', animation: 'maestro-rise .12s ease both',
+        }}>
+          {window.MAESTRO_LANGS.map(([code, name]) => {
+            const active = code === lang;
+            return (
+              <button key={code} onClick={() => { onSelectLang(code); setOpen(false); }} style={{
+                fontFamily: 'var(--mono)', fontSize: 12, textAlign: 'left',
+                background: active ? 'var(--panel-2)' : 'transparent',
+                color: active ? 'var(--green)' : 'var(--ink)',
+                border: 'none', borderRadius: 4, padding: '7px 10px', cursor: 'pointer',
+                display: 'flex', alignItems: 'center', gap: 8,
+              }}
+                onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'var(--panel)'; }}
+                onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
+                <span style={{ width: 12, color: 'var(--green)' }}>{active ? '▍' : ''}</span>{name}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </span>
+  );
+}
+
+// 顶栏：项目标题 + 徽章组 + 动作；agent 执行面板
+function Topbar({ project, counts, onSync, onToggleConfig, t, theme, onToggleTheme, lang, onSelectLang }) {
+  const { Button, CountBadge } = window.MaestroDesignSystem_a6a290;
+  return (
+    <header style={{ display: 'flex', alignItems: 'flex-end', gap: 14, padding: '22px 0 14px', borderBottom: '1px solid var(--line)' }}>
+      <div style={{ minWidth: 0, flex: '0 1 auto' }}>
+        <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '.04em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{project.name}</div>
+        <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} title={project.path + ' · ' + project.branch + ' · ' + project.autonomy}>{project.path} · {project.branch} · {project.autonomy}</div>
+      </div>
+      <div style={{ flex: 1 }}></div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <CountBadge kind="gate" count={counts.gate} label={t.badgeGate} title={t.badgeGateTip} />
+        <CountBadge kind="ready" count={counts.ready} label={t.badgeReady} title={t.badgeReadyTip} />
+        <CountBadge kind="run" count={counts.run} label={t.badgeRun} title={t.badgeRunTip} />
+        <CountBadge kind="blocked" count={counts.blocked} label={t.badgeBlocked} title={t.badgeBlockedTip} />
+        <CountBadge kind="total" count={counts.total} label={t.badgeTotal} title={t.badgeTotalTip} />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <IconAction icon={<ConfigIcon />} label={t.config} title={t.configTip} onClick={onToggleConfig} />
+        <LangMenu t={t} lang={lang} onSelectLang={onSelectLang} />
+        <IconAction icon={theme === 'light' ? <MoonIcon /> : <SunIcon />} label={theme === 'light' ? t.themeDark : t.themeLight} title={t.themeTip} onClick={onToggleTheme} />
+      </div>
+    </header>
+  );
+}
+
+function ConfigPanel({ project, onSave, onClose, onSync, t }) {
+  const { Button, Input, Select } = window.MaestroDesignSystem_a6a290;
+  return (
+    <section style={{ position: 'relative', zIndex: 30, background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 6, padding: '12px 14px', marginTop: 12, animation: 'maestro-rise .18s ease both' }}>
+      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap' }}>
+        <Input label={t.maxConcurrency} type="number" defaultValue={String(project.concurrency)} width={76} />
+        <Select label={t.workMode} defaultValue={project.autonomy} options={Object.entries(t.autonomy).map(([value, label]) => ({ value, label }))} />
+        <span style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '.06em', marginLeft: 'auto', paddingBottom: 7 }}>
+          {t.current}：{project.concurrency} · {project.autonomy}
+        </span>
+        <Button variant="solid" onClick={onSave}>{t.save}</Button>
+        <Button onClick={onClose}>{t.collapse}</Button>
+      </div>
+      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap', marginTop: 12 }}>
+        <span style={{ flex: 2, minWidth: 220, display: 'flex' }}><Input label={t.projLogo} placeholder={t.logoPh} style={{ width: '100%' }} /></span>
+        <span style={{ flex: 1, minWidth: 170, display: 'flex' }}><Input label={t.verifyCmd} placeholder={t.verifyPh} style={{ width: '100%' }} /></span>
+        <span style={{ flex: 1, minWidth: 170, display: 'flex' }}><Input label={t.model} placeholder={t.modelPh} style={{ width: '100%' }} /></span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--line-soft)' }}>
+        <span style={{ fontSize: 10.5, color: 'var(--faint)', letterSpacing: '.06em' }}>{t.lastSync}</span>
+        <Button size="xs" onClick={onSync}>⟳ {t.sync}</Button>
+      </div>
+    </section>
+  );
+}
+
+function AgentSection({ agents, quota, t }) {
+  const { SectionHead, QuotaMeter } = window.MaestroDesignSystem_a6a290;
+  return (
+    <section>
+      <SectionHead mark="cyan" title={<span>{t.agentSection}<span style={{ color: 'var(--cyan)', letterSpacing: '.08em', marginLeft: 8 }}>{agents.length > 0 ? agents.length : ''}</span></span>} sticky />
+      {quota ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap', fontFamily: 'var(--mono)', margin: '0 0 12px' }}>
+          <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted)', letterSpacing: '.08em' }}>{t.quota}</span>
+          <QuotaMeter label="5h" pct={quota.five.pct} detail={t.quotaReset.replace('{t}', quota.five.reset)} />
+          <QuotaMeter label={t.quotaWeek} pct={quota.week.pct} detail={t.quotaReset.replace('{t}', quota.week.reset)} />
+        </div>
+      ) : null}
+      {agents.length === 0 ? (
+        <div style={{ padding: '12px 14px', color: 'var(--faint)', fontSize: 12, border: '1px dashed var(--line)', borderRadius: 6 }}>{t.agentEmpty}</div>
+      ) : (
+        <div style={{ display: 'flex', gap: 20, alignItems: 'stretch', background: 'var(--panel)', border: '1px solid var(--cyan-dim)', borderRadius: 6, padding: '12px 16px', animation: 'maestro-rise .2s ease both' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: 64, padding: '4px 8px', borderRight: '1px solid var(--line-soft)' }}>
+            <span style={{ fontSize: 40, fontWeight: 700, lineHeight: 1, color: 'var(--cyan)', textShadow: '0 0 18px rgba(89,200,216,.5)' }}>{agents.length}</span>
+            <span style={{ fontSize: 9, fontWeight: 600, letterSpacing: '.3em', color: 'var(--muted)', marginTop: 6 }}>RUNNING</span>
+          </div>
+          <div style={{ flex: 1, display: 'grid', gap: 10, minWidth: 0, alignContent: 'center' }}>
+            {agents.map((a) => (
+              <div key={a.id} style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12, padding: '3px 0' }}>
+                <span style={{ flex: 'none', width: 6, height: 6, borderRadius: '50%', background: 'var(--cyan)', boxShadow: '0 0 8px var(--cyan)', animation: 'maestro-pulse .9s infinite' }}></span>
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.title}</span>
+                <span style={{ flex: 'none', fontSize: 10, letterSpacing: '.1em', color: 'var(--cyan)', border: '1px solid var(--cyan-dim)', padding: '0 6px', borderRadius: 3 }}>{a.kind}</span>
+                <span style={{ flex: 'none', marginLeft: 'auto', fontSize: 10.5, color: 'var(--faint)' }}>{a.meta} · {a.time} {t.since}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
+
+Object.assign(window, { MaestroKitTopbar: Topbar, MaestroKitConfigPanel: ConfigPanel, MaestroKitAgentSection: AgentSection });
diff --git a/design/ui_kits/console/data.js b/design/ui_kits/console/data.js
new file mode 100644
index 0000000..cac40b1
--- /dev/null
+++ b/design/ui_kits/console/data.js
@@ -0,0 +1,99 @@
+// MAESTRO 调度台 · UI kit 假数据（与 src/model 状态机对齐）
+window.MAESTRO_MOCK = {
+  projects: [
+    { id: 'p1', name: 'maestro', path: '~/dev/maestro', branch: 'main', autonomy: 'auto-easy', concurrency: 2, hue: 140, state: 'running', pending: 1, agents: 1 },
+    { id: 'p2', name: 'blog-engine', path: '~/dev/blog-engine', branch: 'main', autonomy: 'manual', concurrency: 1, hue: 38, state: 'paused', pending: 0, agents: 0 },
+    { id: 'p3', name: 'dotfiles', path: '~/.dotfiles', branch: 'master', autonomy: 'auto-approved', concurrency: 1, hue: 265, state: 'blocked', pending: 0, agents: 0 },
+  ],
+  agents: [
+    { id: 'r1', project: 'maestro', title: '把轮询改为 WS 推送', kind: 'EXECUTOR', time: '06:12', meta: 'wt-127 · claude-sonnet' },
+  ],
+  // 全局：跨项目 agent 概览 / daemon 配置 / 当前用户
+  global: {
+    projectCount: 3, runningProjects: 1, runningAgents: 1, maxAgents: 4,
+    autonomy: 'auto-easy', daemon: 'v0.4.2', port: 4517, uptime: '3d 04h',
+  },
+  // Agent 汇总：本周窗口，按项目 + 总结
+  agentSummary: {
+    tokensWeek: 12400000, runsWeek: 47, costWeek: 38.6, activeNow: 1,
+    byProject: [
+      { id: 'p1', name: 'maestro', hue: 140, active: 1, runs: 32, tokens: 8900000 },
+      { id: 'p2', name: 'blog-engine', hue: 38, active: 0, runs: 9, tokens: 2100000 },
+      { id: 'p3', name: 'dotfiles', hue: 265, active: 0, runs: 6, tokens: 1400000 },
+    ],
+  },
+  user: { name: 'jun', handle: '@jun', plan: 'Claude Max', initial: 'J', hue: 200 },
+  quota: {
+    five: { pct: 50, reset: '3h 8m' },
+    week: { pct: 58, reset: '16h 38m' },
+  },
+  approvals: [
+    {
+      id: 'a1', gate: 'spec', taskId: 't4', title: '重构 sync 模块', meta: 'maestro · MED',
+      docLabel: '改动方案（SPEC）',
+      doc: '把轮询改为 WS 推送：\n1. store 层加 events 订阅接口\n2. daemon 广播 status.changed\n3. web 端断线重连 + 指数退避\n\n为什么：轮询 2s 间隔在多项目下放大为 N 路请求；WS 已有依赖，无新增包。',
+    },
+  ],
+  tasks: [
+    { id: 't1', title: '接入 Claude Agent SDK', cplx: 'hard', status: 'decomposed', prio: 'P0', children: [
+      { id: 't1a', title: 'PoC：worktree 起 headless CC', cplx: 'medium', status: 'done', prio: 'P0' },
+      { id: 't1b', title: 'executor 封装 + verify 钩子', cplx: 'medium', status: 'executing', prio: 'P0' },
+      { id: 't1c', title: '失败重试 n 次 → needs_attention', cplx: 'easy', status: 'blocked', prio: 'P1', deps: ['t1b'] },
+    ]},
+    { id: 't4', title: '重构 sync 模块', cplx: 'medium', status: 'spec_review', prio: 'P1',
+      doc: '把轮询改为 WS 推送：store 层加 events 订阅…' },
+    { id: 't5', title: '看板移动端单栏适配', cplx: 'easy', status: 'ready', prio: 'P2',
+      ops: '将执行的操作：@media 1100px 断点改单栏；侧栏折叠为顶部条。' },
+    { id: 't6', title: '事件流 append-only 审计导出', cplx: 'easy', status: 'done', prio: 'P2' },
+  ],
+  archived: [
+    { id: 't6', title: '事件流 append-only 审计导出', cplx: 'easy', status: 'done', subs: 0, time: '2 小时前', timeFull: '2026-06-13 04:21:09',
+      detail: {
+        attrs: [['id', 't6'], ['复杂度', 'EASY'], ['优先级', 'P2'], ['状态', '完成'], ['深度', '1'], ['创建时间', '2026-06-12 22:03:44'], ['最后更新', '2026-06-13 04:21:09']],
+        ops: '将执行的操作：store 层加 events 导出接口（JSONL）；CLI 加 maestro events export。',
+        runs: [{ kind: '执行', status: '成功', span: '2026-06-13 03:58:12 → 2026-06-13 04:11:47 · 时长 13 分 35 秒', ref: '转录 runs/r-0613-0358.jsonl' }],
+        result: { branch: 'maestro/t6-events-export', commits: ['a3f9c21 feat(store): events export JSONL'], diff: '+182 −12 · 4 files' },
+        approvals: [{ gate: '结果评审', action: 'accept', actor: 'you', at: '2026-06-13 04:21:09' }],
+        timeline: [
+          { time: '06-12 22:03', text: '任务创建', who: 'you' },
+          { time: '06-13 03:58', text: 'run 开始（执行）', who: '编排器', color: 'var(--cyan)' },
+          { time: '06-13 04:11', text: '执行中 → 待审/合', who: '编排器', color: 'var(--violet)' },
+          { time: '06-13 04:21', text: '审批通过（结果评审）· 合并', who: 'you', color: 'var(--green)' },
+        ],
+      } },
+    { id: 't3', title: '旧 todo.json 导入器', cplx: 'medium', status: 'done', subs: 2, time: '昨天', timeFull: '2026-06-12 09:14:02',
+      detail: {
+        attrs: [['id', 't3'], ['复杂度', 'MED'], ['优先级', 'P1'], ['状态', '完成'], ['深度', '1'], ['创建时间', '2026-06-10 11:40:12'], ['最后更新', '2026-06-12 09:14:02']],
+        spec: '读旧 todo/todo.json，tier1/2/3 → hard/medium/easy，导入为一个项目；重复标题跳过。',
+        runs: [{ kind: '执行', status: '成功', span: '2026-06-12 08:31:00 → 2026-06-12 08:54:18 · 时长 23 分 18 秒', ref: '转录 runs/r-0612-0831.jsonl' }],
+        approvals: [
+          { gate: '方案评审', action: 'reject', actor: 'you', at: '2026-06-11 19:02:51', reason: '未处理重复导入' },
+          { gate: '方案评审', action: 'accept', actor: 'you', at: '2026-06-12 07:48:20' },
+          { gate: '结果评审', action: 'accept', actor: 'you', at: '2026-06-12 09:14:02' },
+        ],
+        timeline: [
+          { time: '06-10 11:40', text: '任务创建', who: 'you' },
+          { time: '06-11 19:02', text: '审批驳回（方案评审）：未处理重复导入', who: 'you', color: 'var(--red)' },
+          { time: '06-12 07:48', text: '审批通过（方案评审）', who: 'you', color: 'var(--green)' },
+          { time: '06-12 08:31', text: 'run 开始（执行）', who: '编排器', color: 'var(--cyan)' },
+          { time: '06-12 09:14', text: '审批通过（结果评审）· 合并', who: 'you', color: 'var(--green)' },
+        ],
+      } },
+    { id: 't2', title: '远程看板（可选）调研', cplx: 'easy', status: 'cancelled', subs: 0, time: '3 天前', timeFull: '2026-06-10 16:02:33',
+      detail: {
+        attrs: [['id', 't2'], ['复杂度', 'EASY'], ['优先级', 'P2'], ['状态', '取消'], ['深度', '1'], ['创建时间', '2026-06-09 10:12:00'], ['最后更新', '2026-06-10 16:02:33']],
+        timeline: [
+          { time: '06-09 10:12', text: '任务创建', who: 'you' },
+          { time: '06-10 16:02', text: '可执行 → 取消', who: 'you', color: 'var(--faint)' },
+        ],
+      } },
+  ],
+  events: [
+    { type: 'run.started', time: '06:12:09', detail: 'executor · 把轮询改为 WS 推送 · wt-127' },
+    { type: 'approval.requested', time: '06:10:44', detail: 'spec_review · 重构 sync 模块' },
+    { type: 'approval.rejected', time: '05:58:02', detail: '重构 sync 模块 ↳ 缺少回滚方案' },
+    { type: 'status.changed', time: '05:31:18', detail: 'PoC：worktree 起 headless CC：执行中 → 完成' },
+    { type: 'task.created', time: '05:02:51', detail: '看板移动端单栏适配' },
+    { type: 'project.synced', time: '04:48:00', detail: 'maestro · 3 项导入' },
+  ],
+};
diff --git a/design/ui_kits/console/i18n.js b/design/ui_kits/console/i18n.js
new file mode 100644
index 0000000..c74abf9
--- /dev/null
+++ b/design/ui_kits/console/i18n.js
@@ -0,0 +1,231 @@
+// MAESTRO 调度台 · 界面语言包（zh / en / es / ja / fr）— UI chrome 文案；任务/事件内容为用户数据不翻译
+window.MAESTRO_LANGS = [
+  ['zh', '中文'], ['en', 'English'], ['es', 'Español'], ['ja', '日本語'], ['fr', 'Français'],
+];
+window.MAESTRO_I18N = {
+  zh: {
+    logoSub: '多项目任务调度台',
+    projects: '项目', newProject: '+ 新建', connected: '已连接 · :4517',
+    expandSide: '展开侧栏', collapseSide: '折叠侧栏',
+    badgeGate: '项待审批', badgeReady: '待执行', badgeRun: '执行中', badgeBlocked: '被阻塞', badgeTotal: '总量',
+    badgeGateTip: '等待你裁决的审批闸', badgeReadyTip: '可执行（依赖已满足）+ 排队中',
+    badgeRunTip: 'agent 正在执行', badgeBlockedTip: '被依赖阻塞（依赖完成后自动放行）',
+    badgeTotalTip: '未完成任务总量（不含 done / 已拆解容器 / 取消）',
+    sync: '同步 todo', lastSync: '上次同步 06:12', config: '配置', configTip: '项目配置（并发 / 工作模式 / todo 同步）',
+    archive: '已归档', archiveTip: '点击查看完整详情', archiveSubs: '含 {n} 子任务', archiveDetail: '归档详情',
+    pagePrev: '‹ 上一页', pageNext: '下一页 ›', pageOf: '第 {a} / {b} 页', perPage: '每页',
+    attrsLabel: '属性', runsLabel: '执行历史', resultLabel: '执行结果', approvalsLabel: '审批记录', timelineLabel: '状态流转时间线',
+    branch: '分支', accepted: '接受', rejected: '驳回', approver: '审批人', opinion: '意见', closeTip: '关闭（Esc）',
+    lang: '中文', langTip: '切换语言 / Language', themeLight: '浅色', themeDark: '深色', themeTip: '切换 light/dark',
+    maxConcurrency: '最大并发', workMode: '工作模式', current: '当前', save: '保存配置', collapse: '收起',
+    autonomy: { manual: '手动', 'auto-easy': '自动 · Easy', 'auto-approved': '自动 · 已批准' },
+    agentSection: 'Agent 执行', agentEmpty: '无运行中的 agent', running: 'RUNNING', since: '起',
+    projRunning: '运行中', projPaused: '暂停', projBlocked: '阻塞', projIdle: '空闲',
+    projPendingTip: '{n} 项待你审批',
+    gAgents: '全局 Agent', gAgentsDetail: '{p}/{P} 个项目运行 · {a} 个 agent',
+    apActive: '运行', apRuns: '次运行', apTokens: 'token', apWeek: '本周', apCost: '花费', apTotal: '所有项目', apPerProj: '按项目', apIdle: '空闲',
+    gConfig: '全局配置', gConfigDetail: '并发上限 {n} · daemon {v}',
+    gUserPlan: '订阅', gUserSignOut: '退出登录', gUserSettings: '账户设置',
+    gateExpand: '展开', gateCollapse: '折叠', gateDblTip: '双击全屏阅读',
+    quota: '额度', quotaWeek: '周', quotaReset: '{t} 后重置',
+    projLogo: '项目 Logo', logoPh: '图片 URL 或仓库内相对路径；留空=自动', verifyCmd: '校验命令', verifyPh: 'npm test · go test ./...（可空）', model: '模型', modelPh: 'claude-opus-4-5（可空）',
+    searchPh: '⌕ 搜索标题…', clearFilter: '✕ 清除筛选', matchCount: '{n} 项匹配',
+    fgroups: { todo: '待办', doing: '进行中', gate: '待审批', bad: '异常', hold: '挂起', done: '完成' },
+    fullRead: '全屏阅读', depsLabel: 'DEPS · 依赖（全部完成才可执行）', depDone: '完成', depWait: '等待',
+    gateSection: '审批闸 · 等待裁决', accept: '✓ 通过', reject: '✕ 驳回', confirmReject: '确认驳回',
+    rejectPlaceholder: '改进意见（必填）',
+    taskSection: '任务树', newTask: '+ 新建任务', titleLabel: '标题', titlePlaceholder: '要做什么',
+    complexity: '复杂度', cplxAuto: '智能', parentTask: '父任务', topLevel: '（顶层）', priority: '优先级',
+    p0: 'P0 · 高', p1: 'P1 · 中', p2: 'P2 · 低', create: '创建任务', cancel: '取消',
+    depsWait: '待依赖', specLabel: '改动方案（SPEC）', opsLabel: '将执行的操作（OPERATIONS）',
+    pendingDoc: '待 Claude Code 产出（经 MCP 写入并提交评审）',
+    emptyTasks: '该项目暂无任务 —— 点「+ 新建任务」或经 MCP 创建', empty: '空',
+    events: '事件流', expandEvents: '展开事件流', collapseEvents: '折叠事件流',
+    toastCreated: '任务已创建 · init', toastAccepted: '已通过 · ', toastRejected: '已驳回 · 退回重做',
+    toastSynced: 'todo 已同步 · 0 项变更', toastSaved: '配置已保存', toastModal: '原型：新建项目模态未接',
+    gatePassed: ' 通过',
+    status: { init: '新建', analyzing: '分析拆解中', plan_review: '待确认拆解', decomposed: '已拆解', speccing: '写方案中', spec_review: '待确认方案', ready: '可执行', blocked: '被依赖阻塞', queued: '排队中', executing: '执行中', exec_review: '待审/合', failed: '失败', needs_attention: '需人工', done: '完成', paused: '暂停', cancelled: '取消' },
+    gates: { plan: '拆解评审', spec: '方案评审', exec: '结果评审' },
+    eventTypes: { 'task.created': '任务创建', 'task.updated': '任务更新', 'status.changed': '状态变更', 'approval.requested': '请求审批', 'approval.granted': '审批通过', 'approval.rejected': '审批驳回', 'run.started': '运行开始', 'run.finished': '运行结束', 'project.synced': 'todo 同步' },
+  },
+  en: {
+    logoSub: 'MULTI-PROJECT ORCHESTRATOR',
+    projects: 'PROJECTS', newProject: '+ New', connected: 'Connected · :4517',
+    expandSide: 'Expand sidebar', collapseSide: 'Collapse sidebar',
+    badgeGate: 'pending review', badgeReady: 'to run', badgeRun: 'running', badgeBlocked: 'blocked', badgeTotal: 'total',
+    badgeGateTip: 'Approval gates awaiting your decision', badgeReadyTip: 'Ready (deps met) + queued',
+    badgeRunTip: 'Agents currently executing', badgeBlockedTip: 'Blocked (auto-released when deps complete)',
+    badgeTotalTip: 'Open tasks (excl. done / decomposed containers / cancelled)',
+    sync: 'Sync todo', lastSync: 'Last sync 06:12', config: 'Config', configTip: 'Project config (concurrency / autonomy / todo sync)',
+    archive: 'Archive', archiveTip: 'Click for full detail', archiveSubs: '{n} subtasks', archiveDetail: 'ARCHIVE',
+    pagePrev: '‹ Prev', pageNext: 'Next ›', pageOf: 'Page {a} / {b}', perPage: 'Per page',
+    attrsLabel: 'ATTRIBUTES', runsLabel: 'RUN HISTORY', resultLabel: 'RESULT', approvalsLabel: 'APPROVALS', timelineLabel: 'STATUS TIMELINE',
+    branch: 'Branch', accepted: 'accepted', rejected: 'rejected', approver: 'Approver', opinion: 'Feedback', closeTip: 'Close (Esc)',
+    lang: 'English', langTip: 'Switch language', themeLight: 'Light', themeDark: 'Dark', themeTip: 'Toggle light/dark',
+    maxConcurrency: 'Max concurrency', workMode: 'Autonomy', current: 'Current', save: 'Save config', collapse: 'Close',
+    autonomy: { manual: 'Manual', 'auto-easy': 'Auto · Easy', 'auto-approved': 'Auto · Approved' },
+    agentSection: 'Agent runs', agentEmpty: 'No running agents', running: 'RUNNING', since: '',
+    projRunning: 'Running', projPaused: 'Paused', projBlocked: 'Blocked', projIdle: 'Idle',
+    projPendingTip: '{n} awaiting your review',
+    gAgents: 'Agents', gAgentsDetail: '{p}/{P} projects · {a} agents',
+    apActive: 'active', apRuns: 'runs', apTokens: 'tokens', apWeek: 'this week', apCost: 'cost', apTotal: 'All projects', apPerProj: 'BY PROJECT', apIdle: 'idle',
+    gConfig: 'Settings', gConfigDetail: 'Max concurrency {n} · daemon {v}',
+    gUserPlan: 'Plan', gUserSignOut: 'Sign out', gUserSettings: 'Account settings',
+    gateExpand: 'Expand', gateCollapse: 'Collapse', gateDblTip: 'Double-click for fullscreen',
+    quota: 'Quota', quotaWeek: 'week', quotaReset: 'resets in {t}',
+    projLogo: 'Project logo', logoPh: 'Image URL or repo-relative path; empty = auto', verifyCmd: 'Verify command', verifyPh: 'npm test · go test ./... (optional)', model: 'Model', modelPh: 'claude-opus-4-5 (optional)',
+    searchPh: '⌕ Search titles…', clearFilter: '✕ Clear filters', matchCount: '{n} matches',
+    fgroups: { todo: 'To do', doing: 'In progress', gate: 'Pending review', bad: 'Issues', hold: 'On hold', done: 'Done' },
+    fullRead: 'Read fullscreen', depsLabel: 'DEPS (all must complete to run)', depDone: 'done', depWait: 'waiting',
+    gateSection: 'Approval gates · awaiting decision', accept: '✓ Accept', reject: '✕ Reject', confirmReject: 'Confirm reject',
+    rejectPlaceholder: 'Improvement feedback (required)',
+    taskSection: 'Task tree', newTask: '+ New task', titleLabel: 'Title', titlePlaceholder: 'What needs doing',
+    complexity: 'Complexity', cplxAuto: 'AUTO', parentTask: 'Parent', topLevel: '(top level)', priority: 'Priority',
+    p0: 'P0 · high', p1: 'P1 · medium', p2: 'P2 · low', create: 'Create task', cancel: 'Cancel',
+    depsWait: 'deps', specLabel: 'CHANGE SPEC', opsLabel: 'PLANNED OPERATIONS',
+    pendingDoc: 'Awaiting Claude Code output (written via MCP, then submitted for review)',
+    emptyTasks: 'No tasks in this project — hit "+ New task" or create via MCP', empty: 'EMPTY',
+    events: 'Events', expandEvents: 'Expand events', collapseEvents: 'Collapse events',
+    toastCreated: 'Task created · init', toastAccepted: 'Accepted · ', toastRejected: 'Rejected · sent back',
+    toastSynced: 'Todo synced · 0 changes', toastSaved: 'Config saved', toastModal: 'Prototype: new-project modal not wired',
+    gatePassed: ' approved',
+    status: { init: 'New', analyzing: 'Analyzing', plan_review: 'Plan review', decomposed: 'Decomposed', speccing: 'Drafting spec', spec_review: 'Spec review', ready: 'Ready', blocked: 'Blocked', queued: 'Queued', executing: 'Executing', exec_review: 'Review & merge', failed: 'Failed', needs_attention: 'Needs attention', done: 'Done', paused: 'Paused', cancelled: 'Cancelled' },
+    gates: { plan: 'PLAN REVIEW', spec: 'SPEC REVIEW', exec: 'EXEC REVIEW' },
+    eventTypes: { 'task.created': 'Task created', 'task.updated': 'Task updated', 'status.changed': 'Status changed', 'approval.requested': 'Approval requested', 'approval.granted': 'Approval granted', 'approval.rejected': 'Approval rejected', 'run.started': 'Run started', 'run.finished': 'Run finished', 'project.synced': 'Todo synced' },
+  },
+  es: {
+    logoSub: 'ORQUESTADOR MULTIPROYECTO',
+    projects: 'PROYECTOS', newProject: '+ Nuevo', connected: 'Conectado · :4517',
+    expandSide: 'Expandir panel', collapseSide: 'Plegar panel',
+    badgeGate: 'por revisar', badgeReady: 'por ejecutar', badgeRun: 'en curso', badgeBlocked: 'bloqueadas', badgeTotal: 'total',
+    badgeGateTip: 'Puertas de aprobación esperando tu decisión', badgeReadyTip: 'Listas (deps cumplidas) + en cola',
+    badgeRunTip: 'Agents en ejecución', badgeBlockedTip: 'Bloqueadas (se liberan al completar deps)',
+    badgeTotalTip: 'Tareas abiertas (sin done / contenedores / canceladas)',
+    sync: 'Sincronizar todo', lastSync: 'Última sinc. 06:12', config: 'Config', configTip: 'Configuración (concurrencia / modo / sinc. todo)',
+    archive: 'Archivo', archiveTip: 'Clic para ver detalle', archiveSubs: '{n} subtareas', archiveDetail: 'ARCHIVO',
+    pagePrev: '‹ Anterior', pageNext: 'Siguiente ›', pageOf: 'Página {a} / {b}', perPage: 'Por página',
+    attrsLabel: 'ATRIBUTOS', runsLabel: 'HISTORIAL DE RUNS', resultLabel: 'RESULTADO', approvalsLabel: 'APROBACIONES', timelineLabel: 'LÍNEA DE TIEMPO',
+    branch: 'Rama', accepted: 'aceptada', rejected: 'rechazada', approver: 'Aprobador', opinion: 'Comentario', closeTip: 'Cerrar (Esc)',
+    lang: 'Español', langTip: 'Cambiar idioma', themeLight: 'Claro', themeDark: 'Oscuro', themeTip: 'Cambiar tema',
+    maxConcurrency: 'Concurrencia máx.', workMode: 'Modo', current: 'Actual', save: 'Guardar', collapse: 'Cerrar',
+    autonomy: { manual: 'manual', 'auto-easy': 'auto · Easy', 'auto-approved': 'auto · aprob.' },
+    agentSection: 'Ejecución de agents', agentEmpty: 'Sin agents en ejecución', running: 'RUNNING', since: '',
+    projRunning: 'En curso', projPaused: 'Pausado', projBlocked: 'Bloqueado', projIdle: 'Inactivo',
+    projPendingTip: '{n} esperan tu revisión',
+    gAgents: 'Agents globales', gAgentsDetail: '{p}/{P} proyectos · {a} agents',
+    apActive: 'activos', apRuns: 'ejecuciones', apTokens: 'tokens', apWeek: 'esta semana', apCost: 'coste', apTotal: 'Todos los proyectos', apPerProj: 'POR PROYECTO', apIdle: 'inactivo',
+    gConfig: 'Config global', gConfigDetail: 'Concurrencia máx {n} · daemon {v}',
+    gUserPlan: 'Plan', gUserSignOut: 'Cerrar sesión', gUserSettings: 'Ajustes de cuenta',
+    gateExpand: 'Expandir', gateCollapse: 'Plegar', gateDblTip: 'Doble clic para pantalla completa',
+    quota: 'Cuota', quotaWeek: 'semana', quotaReset: 'reinicio en {t}',
+    projLogo: 'Logo del proyecto', logoPh: 'URL o ruta relativa; vacío = auto', verifyCmd: 'Comando de verificación', verifyPh: 'npm test · go test ./... (opcional)', model: 'Modelo', modelPh: 'claude-opus-4-5 (opcional)',
+    searchPh: '⌕ Buscar títulos…', clearFilter: '✕ Limpiar filtros', matchCount: '{n} coincidencias',
+    fgroups: { todo: 'Pendientes', doing: 'En curso', gate: 'Por revisar', bad: 'Incidencias', hold: 'En pausa', done: 'Hechas' },
+    fullRead: 'Pantalla completa', depsLabel: 'DEPS (todas deben completarse)', depDone: 'hecha', depWait: 'esperando',
+    gateSection: 'Puertas de aprobación · pendientes', accept: '✓ Aceptar', reject: '✕ Rechazar', confirmReject: 'Confirmar rechazo',
+    rejectPlaceholder: 'Comentario de mejora (obligatorio)',
+    taskSection: 'Árbol de tareas', newTask: '+ Nueva tarea', titleLabel: 'Título', titlePlaceholder: 'Qué hay que hacer',
+    complexity: 'Complejidad', cplxAuto: 'AUTO', parentTask: 'Padre', topLevel: '(raíz)', priority: 'Prioridad',
+    p0: 'P0 · alta', p1: 'P1 · media', p2: 'P2 · baja', create: 'Crear tarea', cancel: 'Cancelar',
+    depsWait: 'deps', specLabel: 'SPEC DE CAMBIOS', opsLabel: 'OPERACIONES PREVISTAS',
+    pendingDoc: 'Esperando salida de Claude Code (vía MCP, luego a revisión)',
+    emptyTasks: 'Sin tareas — pulsa "+ Nueva tarea" o crea vía MCP', empty: 'VACÍO',
+    events: 'Eventos', expandEvents: 'Expandir eventos', collapseEvents: 'Plegar eventos',
+    toastCreated: 'Tarea creada · init', toastAccepted: 'Aceptada · ', toastRejected: 'Rechazada · devuelta',
+    toastSynced: 'Todo sincronizado · 0 cambios', toastSaved: 'Config guardada', toastModal: 'Prototipo: modal no conectado',
+    gatePassed: ' aprobada',
+    status: { init: 'Nueva', analyzing: 'Analizando', plan_review: 'Revisión de plan', decomposed: 'Descompuesta', speccing: 'Redactando spec', spec_review: 'Revisión de spec', ready: 'Lista', blocked: 'Bloqueada', queued: 'En cola', executing: 'Ejecutando', exec_review: 'Revisar y fusionar', failed: 'Fallida', needs_attention: 'Requiere atención', done: 'Hecha', paused: 'Pausada', cancelled: 'Cancelada' },
+    gates: { plan: 'REVISIÓN DE PLAN', spec: 'REVISIÓN DE SPEC', exec: 'REVISIÓN DE RESULTADO' },
+    eventTypes: { 'task.created': 'Tarea creada', 'task.updated': 'Tarea actualizada', 'status.changed': 'Cambio de estado', 'approval.requested': 'Aprobación solicitada', 'approval.granted': 'Aprobación concedida', 'approval.rejected': 'Aprobación rechazada', 'run.started': 'Run iniciado', 'run.finished': 'Run terminado', 'project.synced': 'Todo sincronizado' },
+  },
+  ja: {
+    logoSub: 'マルチプロジェクト・オーケストレーター',
+    projects: 'プロジェクト', newProject: '+ 新規', connected: '接続済み · :4517',
+    expandSide: 'サイドバーを開く', collapseSide: 'サイドバーを畳む',
+    badgeGate: '件 承認待ち', badgeReady: '実行待ち', badgeRun: '実行中', badgeBlocked: 'ブロック中', badgeTotal: '合計',
+    badgeGateTip: 'あなたの裁定を待つ承認ゲート', badgeReadyTip: '実行可能（依存解決済み）+ キュー',
+    badgeRunTip: 'agent が実行中', badgeBlockedTip: '依存でブロック（解決後に自動開放）',
+    badgeTotalTip: '未完了タスク数（done / 分解済み / キャンセル除く）',
+    sync: 'todo 同期', lastSync: '最終同期 06:12', config: '設定', configTip: 'プロジェクト設定（並列数 / モード / todo 同期）',
+    archive: 'アーカイブ', archiveTip: 'クリックで詳細表示', archiveSubs: 'サブタスク {n} 件', archiveDetail: 'アーカイブ詳細',
+    pagePrev: '‹ 前へ', pageNext: '次へ ›', pageOf: '{a} / {b} ページ', perPage: '表示件数',
+    attrsLabel: '属性', runsLabel: '実行履歴', resultLabel: '実行結果', approvalsLabel: '承認記録', timelineLabel: 'ステータス・タイムライン',
+    branch: 'ブランチ', accepted: '承認', rejected: '却下', approver: '承認者', opinion: 'コメント', closeTip: '閉じる（Esc）',
+    lang: '日本語', langTip: '言語を切替', themeLight: 'ライト', themeDark: 'ダーク', themeTip: 'テーマ切替',
+    maxConcurrency: '最大並列数', workMode: 'モード', current: '現在', save: '保存', collapse: '閉じる',
+    autonomy: { manual: '手動', 'auto-easy': '自動 · Easy', 'auto-approved': '自動 · 承認済' },
+    agentSection: 'Agent 実行', agentEmpty: '実行中の agent はありません', running: 'RUNNING', since: '開始',
+    projRunning: '実行中', projPaused: '一時停止', projBlocked: 'ブロック', projIdle: 'アイドル',
+    projPendingTip: '{n} 件があなたの承認待ち',
+    gAgents: 'グローバル Agent', gAgentsDetail: '{p}/{P} プロジェクト · {a} 個の agent',
+    apActive: '実行中', apRuns: '回実行', apTokens: 'token', apWeek: '今週', apCost: 'コスト', apTotal: '全プロジェクト', apPerProj: 'プロジェクト別', apIdle: 'アイドル',
+    gConfig: 'グローバル設定', gConfigDetail: '並列上限 {n} · daemon {v}',
+    gUserPlan: 'プラン', gUserSignOut: 'ログアウト', gUserSettings: 'アカウント設定',
+    gateExpand: '展開', gateCollapse: '折り畳む', gateDblTip: 'ダブルクリックで全画面',
+    quota: 'クォータ', quotaWeek: '週', quotaReset: '{t} 後にリセット',
+    projLogo: 'プロジェクトロゴ', logoPh: '画像 URL またはリポジトリ相対パス；空=自動', verifyCmd: '検証コマンド', verifyPh: 'npm test · go test ./...（任意）', model: 'モデル', modelPh: 'claude-opus-4-5（任意）',
+    searchPh: '⌕ タイトルを検索…', clearFilter: '✕ フィルタをクリア', matchCount: '{n} 件一致',
+    fgroups: { todo: '未着手', doing: '進行中', gate: '承認待ち', bad: '異常', hold: '保留', done: '完了' },
+    fullRead: '全画面で読む', depsLabel: 'DEPS · 依存（全完了で実行可）', depDone: '完了', depWait: '待機',
+    gateSection: '承認ゲート · 裁定待ち', accept: '✓ 承認', reject: '✕ 却下', confirmReject: '却下を確定',
+    rejectPlaceholder: '改善フィードバック（必須）',
+    taskSection: 'タスクツリー', newTask: '+ 新規タスク', titleLabel: 'タイトル', titlePlaceholder: '何をしますか',
+    complexity: '複雑度', cplxAuto: '智能', parentTask: '親タスク', topLevel: '（トップ）', priority: '優先度',
+    p0: 'P0 · 高', p1: 'P1 · 中', p2: 'P2 · 低', create: 'タスク作成', cancel: 'キャンセル',
+    depsWait: '依存待ち', specLabel: 'SPEC · 変更案', opsLabel: 'OPERATIONS · 操作',
+    pendingDoc: 'Claude Code の出力待ち（MCP 経由で書き込み後レビューへ）',
+    emptyTasks: 'タスクなし — 「+ 新規タスク」または MCP で作成', empty: '空',
+    events: 'イベント', expandEvents: 'イベントを開く', collapseEvents: 'イベントを畳む',
+    toastCreated: 'タスク作成済み · init', toastAccepted: '承認済み · ', toastRejected: '却下 · 差し戻し',
+    toastSynced: 'todo 同期完了 · 変更 0 件', toastSaved: '設定を保存しました', toastModal: 'プロトタイプ：新規モーダル未接続',
+    gatePassed: ' 承認',
+    status: { init: '新規', analyzing: '分析・分解中', plan_review: '分解確認待ち', decomposed: '分解済み', speccing: '方針作成中', spec_review: '方針確認待ち', ready: '実行可能', blocked: '依存ブロック', queued: 'キュー待ち', executing: '実行中', exec_review: 'レビュー/マージ', failed: '失敗', needs_attention: '要対応', done: '完了', paused: '一時停止', cancelled: 'キャンセル' },
+    gates: { plan: '分解レビュー', spec: '方針レビュー', exec: '結果レビュー' },
+    eventTypes: { 'task.created': 'タスク作成', 'task.updated': 'タスク更新', 'status.changed': 'ステータス変更', 'approval.requested': '承認リクエスト', 'approval.granted': '承認', 'approval.rejected': '却下', 'run.started': 'run 開始', 'run.finished': 'run 終了', 'project.synced': 'todo 同期' },
+  },
+  fr: {
+    logoSub: 'ORCHESTRATEUR MULTI-PROJETS',
+    projects: 'PROJETS', newProject: '+ Nouveau', connected: 'Connecté · :4517',
+    expandSide: 'Déplier le panneau', collapseSide: 'Replier le panneau',
+    badgeGate: 'à approuver', badgeReady: 'à exécuter', badgeRun: 'en cours', badgeBlocked: 'bloquées', badgeTotal: 'total',
+    badgeGateTip: "Portes d'approbation en attente de décision", badgeReadyTip: 'Prêtes (deps OK) + en file',
+    badgeRunTip: 'Agents en cours d’exécution', badgeBlockedTip: 'Bloquées (libérées quand les deps aboutissent)',
+    badgeTotalTip: 'Tâches ouvertes (hors done / conteneurs / annulées)',
+    sync: 'Synchroniser todo', lastSync: 'Dernière sync 06:12', config: 'Config', configTip: 'Config projet (concurrence / mode / sync todo)',
+    archive: 'Archives', archiveTip: 'Cliquer pour le détail', archiveSubs: '{n} sous-tâches', archiveDetail: 'ARCHIVE',
+    pagePrev: '‹ Préc.', pageNext: 'Suiv. ›', pageOf: 'Page {a} / {b}', perPage: 'Par page',
+    attrsLabel: 'ATTRIBUTS', runsLabel: 'HISTORIQUE DES RUNS', resultLabel: 'RÉSULTAT', approvalsLabel: 'APPROBATIONS', timelineLabel: 'CHRONOLOGIE',
+    branch: 'Branche', accepted: 'acceptée', rejected: 'rejetée', approver: 'Approbateur', opinion: 'Retour', closeTip: 'Fermer (Échap)',
+    lang: 'Français', langTip: 'Changer de langue', themeLight: 'Clair', themeDark: 'Sombre', themeTip: 'Basculer le thème',
+    maxConcurrency: 'Concurrence max', workMode: 'Mode', current: 'Actuel', save: 'Enregistrer', collapse: 'Fermer',
+    autonomy: { manual: 'manual', 'auto-easy': 'auto · Easy', 'auto-approved': 'auto · approuv.' },
+    agentSection: 'Exécutions agent', agentEmpty: 'Aucun agent en cours', running: 'RUNNING', since: '',
+    projRunning: 'En cours', projPaused: 'En pause', projBlocked: 'Bloqué', projIdle: 'Inactif',
+    projPendingTip: '{n} en attente de votre revue',
+    gAgents: 'Agents globaux', gAgentsDetail: '{p}/{P} projets · {a} agents',
+    apActive: 'actifs', apRuns: 'exécutions', apTokens: 'tokens', apWeek: 'cette semaine', apCost: 'coût', apTotal: 'Tous les projets', apPerProj: 'PAR PROJET', apIdle: 'inactif',
+    gConfig: 'Config globale', gConfigDetail: 'Concurrence max {n} · daemon {v}',
+    gUserPlan: 'Forfait', gUserSignOut: 'Se déconnecter', gUserSettings: 'Paramètres du compte',
+    gateExpand: 'Déplier', gateCollapse: 'Replier', gateDblTip: 'Double-clic pour le plein écran',
+    quota: 'Quota', quotaWeek: 'semaine', quotaReset: 'reset dans {t}',
+    projLogo: 'Logo du projet', logoPh: 'URL ou chemin relatif ; vide = auto', verifyCmd: 'Commande de vérification', verifyPh: 'npm test · go test ./... (optionnel)', model: 'Modèle', modelPh: 'claude-opus-4-5 (optionnel)',
+    searchPh: '⌕ Rechercher…', clearFilter: '✕ Effacer les filtres', matchCount: '{n} résultats',
+    fgroups: { todo: 'À faire', doing: 'En cours', gate: 'À approuver', bad: 'Anomalies', hold: 'En attente', done: 'Terminées' },
+    fullRead: 'Plein écran', depsLabel: 'DEPS (toutes requises)', depDone: 'terminée', depWait: 'en attente',
+    gateSection: "Portes d'approbation · en attente", accept: '✓ Accepter', reject: '✕ Rejeter', confirmReject: 'Confirmer le rejet',
+    rejectPlaceholder: "Retour d'amélioration (obligatoire)",
+    taskSection: 'Arbre des tâches', newTask: '+ Nouvelle tâche', titleLabel: 'Titre', titlePlaceholder: 'Que faut-il faire',
+    complexity: 'Complexité', cplxAuto: 'AUTO', parentTask: 'Parent', topLevel: '(racine)', priority: 'Priorité',
+    p0: 'P0 · haute', p1: 'P1 · moyenne', p2: 'P2 · basse', create: 'Créer la tâche', cancel: 'Annuler',
+    depsWait: 'deps', specLabel: 'SPEC DES CHANGEMENTS', opsLabel: 'OPÉRATIONS PRÉVUES',
+    pendingDoc: 'En attente de la sortie de Claude Code (via MCP, puis revue)',
+    emptyTasks: 'Aucune tâche — « + Nouvelle tâche » ou via MCP', empty: 'VIDE',
+    events: 'Événements', expandEvents: 'Déplier les événements', collapseEvents: 'Replier les événements',
+    toastCreated: 'Tâche créée · init', toastAccepted: 'Acceptée · ', toastRejected: 'Rejetée · renvoyée',
+    toastSynced: 'Todo synchronisé · 0 changement', toastSaved: 'Config enregistrée', toastModal: 'Prototype : modale non câblée',
+    gatePassed: ' approuvée',
+    status: { init: 'Nouvelle', analyzing: 'Analyse', plan_review: 'Revue du plan', decomposed: 'Décomposée', speccing: 'Rédaction spec', spec_review: 'Revue de spec', ready: 'Prête', blocked: 'Bloquée', queued: 'En file', executing: 'En exécution', exec_review: 'Revue & fusion', failed: 'Échouée', needs_attention: 'À traiter', done: 'Terminée', paused: 'En pause', cancelled: 'Annulée' },
+    gates: { plan: 'REVUE DU PLAN', spec: 'REVUE DE SPEC', exec: 'REVUE DU RÉSULTAT' },
+    eventTypes: { 'task.created': 'Tâche créée', 'task.updated': 'Tâche mise à jour', 'status.changed': "Changement d'état", 'approval.requested': 'Approbation demandée', 'approval.granted': 'Approbation accordée', 'approval.rejected': 'Approbation rejetée', 'run.started': 'Run démarré', 'run.finished': 'Run terminé', 'project.synced': 'Todo synchronisé' },
+  },
+};
diff --git a/design/ui_kits/console/index.html b/design/ui_kits/console/index.html
new file mode 100644
index 0000000..745e707
--- /dev/null
+++ b/design/ui_kits/console/index.html
@@ -0,0 +1,183 @@
+<!-- @dsCard group="Console" viewport="1440x900" name="Web 调度台" subtitle="三栏看板整屏复刻：项目 · 审批闸+任务树 · 事件流（可点击）" -->
+<!-- @startingPoint section="Screens" subtitle="Maestro Web 调度台整屏" viewport="1440x900" -->
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>MAESTRO · 任务调度台</title>
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<script src="data.js"></script>
+<script src="i18n.js"></script>
+<style>
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body { background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.55; overflow: hidden; }
+  body::before {
+    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
+    background:
+      repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
+      radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.5));
+    opacity: .5;
+  }
+  [data-theme="light"] body::before { opacity: .12; }
+  @keyframes maestro-locate {
+    0%, 35% { background: var(--amber-dim); box-shadow: inset 2px 0 0 var(--amber); }
+    100% { background: transparent; box-shadow: none; }
+  }
+  ::selection { background: var(--green-dim); color: #fff; }
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel" src="Sidebar.jsx"></script>
+<script type="text/babel" src="EventPanel.jsx"></script>
+<script type="text/babel" src="Topbar.jsx"></script>
+<script type="text/babel" src="GateSection.jsx"></script>
+<script type="text/babel" src="TaskTree.jsx"></script>
+<script type="text/babel" src="ArchiveSection.jsx"></script>
+<script type="text/babel">
+const { Toast } = window.MaestroDesignSystem_a6a290;
+const M = window.MAESTRO_MOCK;
+const I18N = window.MAESTRO_I18N;
+
+function App() {
+  const [currentId, setCurrentId] = React.useState('p1');
+  const [approvals, setApprovals] = React.useState(M.approvals);
+  const [events, setEvents] = React.useState(M.events);
+  const [showConfig, setShowConfig] = React.useState(false);
+  const [archiveItem, setArchiveItem] = React.useState(null);
+  const [toasts, setToasts] = React.useState([]);
+  const [lang, setLang] = React.useState(() => {
+    const saved = localStorage.getItem('maestro-kit-lang');
+    return I18N[saved] ? saved : 'zh';
+  });
+  const [theme, setTheme] = React.useState(() => localStorage.getItem('maestro-kit-theme') || 'dark');
+  const t = I18N[lang];
+  React.useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    localStorage.setItem('maestro-kit-theme', theme);
+  }, [theme]);
+  React.useEffect(() => { localStorage.setItem('maestro-kit-lang', lang); }, [lang]);
+  const [collapsed, setCollapsed] = React.useState(() => localStorage.getItem('maestro-kit-sidebar') === 'collapsed');
+  const [evCollapsed, setEvCollapsed] = React.useState(() => localStorage.getItem('maestro-kit-events') === 'collapsed');
+  const toggleEvents = () => setEvCollapsed((c) => {
+    localStorage.setItem('maestro-kit-events', c ? 'open' : 'collapsed');
+    return !c;
+  });
+  const toggleCollapse = () => setCollapsed((c) => {
+    localStorage.setItem('maestro-kit-sidebar', c ? 'open' : 'collapsed');
+    return !c;
+  });
+  // 栏宽可拖拽（带最小/最大约束，持久化）；中栏保证 ≥ CENTER_MIN，避免被两侧挤压
+  const SIDE_MIN = 200, SIDE_MAX = 420, EV_MIN = 240, EV_MAX = 520, CENTER_MIN = 480;
+  const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+  const sideMax = () => Math.min(SIDE_MAX, window.innerWidth - (evCollapsed ? 52 : evW) - CENTER_MIN);
+  const evMax = () => Math.min(EV_MAX, window.innerWidth - (collapsed ? 52 : sideW) - CENTER_MIN);
+  const [sideW, setSideW] = React.useState(() => clamp(Number(localStorage.getItem('maestro-kit-sidew')) || 232, SIDE_MIN, SIDE_MAX));
+  const [evW, setEvW] = React.useState(() => clamp(Number(localStorage.getItem('maestro-kit-evw')) || 320, EV_MIN, EV_MAX));
+  const [dragging, setDragging] = React.useState(null);
+  React.useEffect(() => { localStorage.setItem('maestro-kit-sidew', sideW); }, [sideW]);
+  React.useEffect(() => { localStorage.setItem('maestro-kit-evw', evW); }, [evW]);
+  const startDrag = (which) => (e) => {
+    e.preventDefault();
+    setDragging(which);
+    const startX = e.clientX;
+    const startW = which === 'side' ? sideW : evW;
+    const onMove = (ev) => {
+      if (which === 'side') setSideW(clamp(startW + (ev.clientX - startX), SIDE_MIN, Math.max(SIDE_MIN, sideMax())));
+      else setEvW(clamp(startW - (ev.clientX - startX), EV_MIN, Math.max(EV_MIN, evMax())));
+    };
+    const onUp = () => {
+      setDragging(null);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      document.body.style.userSelect = '';
+    };
+    document.body.style.userSelect = 'none';
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+  };
+  const Resizer = ({ which }) => (
+    <div onPointerDown={startDrag(which)} title="拖拽调整宽度"
+      style={{
+        position: 'absolute', top: 0, bottom: 0, width: 9, cursor: 'col-resize', zIndex: 40,
+        ...(which === 'side' ? { left: sideW - 4 } : { right: evW - 4 }),
+        display: 'flex', justifyContent: 'center',
+      }}>
+      <span style={{ width: 1, background: dragging === which ? 'var(--green)' : 'var(--line-soft)', boxShadow: dragging === which ? '0 0 8px var(--green)' : 'none', transition: 'background .12s' }}></span>
+    </div>
+  );
+  const project = M.projects.find((p) => p.id === currentId);
+  const isMain = currentId === 'p1';
+  const tasks = isMain ? M.tasks : [];
+  const agents = isMain ? M.agents : [];
+  const gates = isMain ? approvals : [];
+
+  const toast = (kind, text) => {
+    const id = Date.now();
+    setToasts((t) => [...t, { id, kind, text }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2600);
+  };
+  const now = () => new Date().toTimeString().slice(0, 8);
+  const decide = (a, action, reason) => {
+    setApprovals((list) => list.filter((x) => x.id !== a.id));
+    if (action === 'accept') {
+      setEvents((ev) => [{ type: 'approval.granted', time: now(), detail: a.title + ' · ' + a.gate + '_review' + t.gatePassed }, ...ev]);
+      toast('ok', t.toastAccepted + a.title);
+    } else {
+      setEvents((ev) => [{ type: 'approval.rejected', time: now(), detail: a.title + ' ↳ ' + reason }, ...ev]);
+      toast('warn', t.toastRejected);
+    }
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: (collapsed ? '52px' : sideW + 'px') + ' minmax(0,1fr) ' + (evCollapsed ? '52px' : evW + 'px'), height: '100vh' }}>
+      {!collapsed ? <Resizer which="side" /> : null}
+      {!evCollapsed ? <Resizer which="ev" /> : null}
+      <window.MaestroKitSidebar projects={M.projects} currentId={currentId} t={t}
+        global={M.global} user={M.user} summary={M.agentSummary} onGlobalConfig={() => toast('warn', t.toastModal)}
+        collapsed={collapsed} onToggleCollapse={toggleCollapse}
+        onSelect={setCurrentId} onNewProject={() => toast('warn', t.toastModal)} />
+      <main style={{ overflowY: 'auto', padding: '0 22px 60px' }}>
+        <window.MaestroKitTopbar project={project} t={t} theme={theme}
+          onToggleTheme={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          lang={lang} onSelectLang={setLang}
+          counts={{ gate: gates.length, ready: isMain ? 1 : 0, run: agents.length, blocked: isMain ? 1 : 0, total: isMain ? 5 : 0 }}
+          onSync={() => toast('ok', t.toastSynced)}
+          onToggleConfig={() => setShowConfig(!showConfig)} />
+        {showConfig ? <window.MaestroKitConfigPanel project={project} t={t}
+          onSave={() => { setShowConfig(false); toast('ok', t.toastSaved); }}
+          onSync={() => toast('ok', t.toastSynced)}
+          onClose={() => setShowConfig(false)} /> : null}
+        <window.MaestroKitAgentSection agents={agents} quota={isMain ? M.quota : null} t={t} />
+        <window.MaestroKitGateSection approvals={gates} onDecide={decide} t={t} />
+        {tasks.length ? (
+          <window.MaestroKitTaskSection tasks={tasks} onToast={toast} t={t} />
+        ) : (
+          <div style={{ padding: '46px 0', textAlign: 'center', color: 'var(--faint)', border: '1px dashed var(--line)', borderRadius: 6, marginTop: 18 }}>
+            <b style={{ display: 'block', fontSize: 15, color: 'var(--muted)', marginBottom: 6, letterSpacing: '.2em' }}>{t.empty}</b>
+            {t.emptyTasks}
+          </div>
+        )}
+        {isMain ? <window.MaestroKitArchiveSection items={M.archived} t={t} onOpen={setArchiveItem} /> : null}
+      </main>
+      <window.MaestroKitEventPanel events={events} collapsed={evCollapsed} onToggleCollapse={toggleEvents} t={t} />
+      {archiveItem ? <window.MaestroKitArchiveModal item={archiveItem} t={t} onClose={() => setArchiveItem(null)} /> : null}
+      <div style={{ position: 'fixed', bottom: 18, left: '50%', transform: 'translateX(-50%)', zIndex: 1200, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
+        {toasts.map((t) => <Toast key={t.id} kind={t.kind}>{t.text}</Toast>)}
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>
diff --git a/design/ui_kits/console_mobile/MobileChrome.jsx b/design/ui_kits/console_mobile/MobileChrome.jsx
new file mode 100644
index 0000000..c134e54
--- /dev/null
+++ b/design/ui_kits/console_mobile/MobileChrome.jsx
@@ -0,0 +1,93 @@
+// 移动版 · 头部 + 底部 Tab 栏
+const mIcon = { fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', viewBox: '0 0 24 24' };
+function MIconTask({ s = 22 }) {
+  return <svg {...mIcon} width={s} height={s}><rect x="4" y="4" width="16" height="16" rx="2.5" /><polyline points="8 12 11 15 16 9" /></svg>;
+}
+function MIconGate({ s = 22 }) {
+  return <svg {...mIcon} width={s} height={s}><path d="M12 3 L22 21 L2 21 Z" /><line x1="12" y1="10" x2="12" y2="14" /><line x1="12" y1="17.5" x2="12" y2="17.51" /></svg>;
+}
+function MIconEvent({ s = 22 }) {
+  return <svg {...mIcon} width={s} height={s}><polyline points="2 12 7 12 10 5 14 19 17 12 22 12" /></svg>;
+}
+function MIconGit({ s = 22 }) {
+  return <svg {...mIcon} width={s} height={s}><line x1="6" y1="3" x2="6" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>;
+}
+
+function MobileMark({ scale = 1.6 }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const MAP = ['.....LLLLL.....','...LLLLLLLLL...','..GGGGGGGGGGG..','..GGEEGGGEEGG..','..GGEEGGGEEGG..','..GGGGGGGGGGG..','...GGGGGGGGG...','...G..G.G..G...','...G..G.G..G...','..G...G.G...G..','..D...D.D...D..','.D...D...D...D.'];
+    const INK = { L: '#79ec94', G: '#5fdd7d', D: '#2e6b3d', E: '#070908' };
+    const ctx = ref.current.getContext('2d');
+    MAP.forEach((row, y) => [...row].forEach((ch, x) => {
+      if (INK[ch]) { ctx.fillStyle = INK[ch]; ctx.fillRect(x, y, 1, 1); }
+    }));
+  }, []);
+  return <canvas ref={ref} width="15" height="12"
+    style={{ width: 15 * scale, height: 12 * scale, imageRendering: 'pixelated', filter: 'drop-shadow(0 0 5px rgba(95,221,125,.4))' }} />;
+}
+
+function MobileHeader({ project, counts }) {
+  const { CountBadge } = window.MaestroDesignSystem_a6a290;
+  return (
+    <header style={{
+      display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px',
+      borderBottom: '1px solid var(--line)', background: 'var(--bg-deep)',
+      position: 'sticky', top: 0, zIndex: 20,
+    }}>
+      <MobileMark />
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '.04em', whiteSpace: 'nowrap' }}>{project.name}</div>
+        <div style={{ fontSize: 10, color: 'var(--faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{project.branch} · {project.autonomy}</div>
+      </div>
+      <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
+        <CountBadge kind="gate" count={counts.gate} />
+        <CountBadge kind="run" count={counts.run} />
+      </div>
+    </header>
+  );
+}
+
+function MobileTabBar({ tab, setTab, gateCount }) {
+  const tabs = [
+    { id: 'tasks', label: '任务', icon: MIconTask },
+    { id: 'gates', label: '审批', icon: MIconGate, badge: gateCount },
+    { id: 'events', label: '事件', icon: MIconEvent },
+    { id: 'projects', label: '项目', icon: MIconGit },
+  ];
+  return (
+    <nav style={{
+      display: 'grid', gridTemplateColumns: 'repeat(4,1fr)',
+      borderTop: '1px solid var(--line)', background: 'var(--bg-deep)',
+      position: 'sticky', bottom: 0, zIndex: 20,
+    }}>
+      {tabs.map((t) => {
+        const active = tab === t.id;
+        const Icon = t.icon;
+        return (
+          <button key={t.id} onClick={() => setTab(t.id)} style={{
+            fontFamily: 'var(--mono)', background: 'transparent', border: 'none', cursor: 'pointer',
+            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+            padding: '9px 0 10px', minHeight: 56, position: 'relative',
+            color: active ? 'var(--green)' : 'var(--faint)',
+            textShadow: active ? '0 0 10px rgba(95,221,125,.45)' : 'none',
+          }}>
+            <span style={{ position: 'relative', filter: active ? 'drop-shadow(0 0 6px rgba(95,221,125,.5))' : 'none' }}>
+              <Icon />
+              {t.badge ? (
+                <span style={{
+                  position: 'absolute', top: -4, right: -8, minWidth: 15, height: 15,
+                  fontSize: 9.5, fontWeight: 700, lineHeight: '15px', textAlign: 'center',
+                  background: 'var(--violet)', color: 'var(--bg-deep)', borderRadius: 8, padding: '0 3px',
+                }}>{t.badge}</span>
+              ) : null}
+            </span>
+            <span style={{ fontSize: 10, letterSpacing: '.12em' }}>{t.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
+Object.assign(window, { MaestroMobHeader: MobileHeader, MaestroMobTabBar: MobileTabBar });
diff --git a/design/ui_kits/console_mobile/MobileViews.jsx b/design/ui_kits/console_mobile/MobileViews.jsx
new file mode 100644
index 0000000..36d013e
--- /dev/null
+++ b/design/ui_kits/console_mobile/MobileViews.jsx
@@ -0,0 +1,198 @@
+// 移动版 · 四个 Tab 视图：任务 / 审批 / 事件 / 项目
+function MobTaskRow({ task, depth = 0, expandedId, setExpandedId }) {
+  const { ComplexityBadge, StatusChip } = window.MaestroDesignSystem_a6a290;
+  const kids = task.children || [];
+  const expanded = expandedId === task.id;
+  const isGate = ['plan_review', 'spec_review', 'exec_review'].includes(task.status);
+  return (
+    <React.Fragment>
+      <div onClick={() => setExpandedId(expanded ? null : task.id)} style={{
+        display: 'flex', flexDirection: 'column', gap: 6,
+        padding: '12px 14px', minHeight: 44, cursor: 'pointer',
+        paddingLeft: 14 + depth * 16,
+        borderBottom: '1px solid var(--line-soft)',
+        borderLeft: depth ? '1px solid var(--line-soft)' : 'none',
+        background: expanded ? 'var(--panel-2)' : isGate ? 'rgba(184,142,245,.05)' : 'transparent',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
+          <span style={{ fontWeight: 500, fontSize: 14, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{task.title}</span>
+          <span style={{ color: 'var(--faint)', fontSize: 10.5, flex: 'none' }}>{task.id}</span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <ComplexityBadge complexity={task.cplx} />
+          <StatusChip status={task.status} />
+          <span style={{ marginLeft: 'auto', fontSize: 10.5, color: task.prio === 'P0' ? 'var(--amber)' : 'var(--faint)' }}>{task.prio}</span>
+        </div>
+      </div>
+      {expanded ? (
+        <div style={{ background: 'var(--panel)', borderBottom: '1px solid var(--line)', borderLeft: '2px solid var(--green-dim)', padding: '12px 14px', animation: 'maestro-rise .2s ease both' }}>
+          {(task.doc || task.ops) ? (
+            <React.Fragment>
+              <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', marginBottom: 4 }}>{task.doc ? '改动方案（SPEC）' : '将执行的操作（OPERATIONS）'}</div>
+              <pre style={{ background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderLeft: '2px solid var(--green-dim)', borderRadius: 4, padding: '10px 12px', fontFamily: 'var(--mono)', fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0, color: 'var(--ink)', lineHeight: 1.6 }}>{task.doc || task.ops}</pre>
+            </React.Fragment>
+          ) : (
+            <div style={{ padding: '10px 12px', border: '1px dashed var(--line)', borderRadius: 6, color: 'var(--faint)', fontStyle: 'italic', fontSize: 12 }}>待 Claude Code 产出（经 MCP 写入并提交评审）</div>
+          )}
+        </div>
+      ) : null}
+      {kids.map((k) => <MobTaskRow key={k.id} task={k} depth={depth + 1} expandedId={expandedId} setExpandedId={setExpandedId} />)}
+    </React.Fragment>
+  );
+}
+
+function MobTasks({ tasks, agents }) {
+  const { SectionHead } = window.MaestroDesignSystem_a6a290;
+  const [expandedId, setExpandedId] = React.useState(null);
+  return (
+    <div>
+      {agents.length ? (
+        <div style={{ margin: '12px 14px 0', display: 'flex', gap: 10, alignItems: 'center', background: 'var(--panel)', border: '1px solid var(--cyan-dim)', borderRadius: 6, padding: '10px 12px' }}>
+          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--cyan)', boxShadow: '0 0 8px var(--cyan)', animation: 'maestro-pulse .9s infinite', flex: 'none' }}></span>
+          <span style={{ fontSize: 12, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{agents[0].title}</span>
+          <span style={{ marginLeft: 'auto', flex: 'none', fontSize: 10, letterSpacing: '.1em', color: 'var(--cyan)', border: '1px solid var(--cyan-dim)', borderRadius: 3, padding: '0 6px' }}>{agents[0].kind}</span>
+        </div>
+      ) : null}
+      <SectionHead title="任务树" style={{ padding: '14px 14px 8px' }} />
+      <div>
+        {tasks.map((t) => <MobTaskRow key={t.id} task={t} expandedId={expandedId} setExpandedId={setExpandedId} />)}
+      </div>
+    </div>
+  );
+}
+
+function MobGatePreview({ item, onDecide, onClose }) {
+  const { ComplexityBadge, Button, Textarea } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(false);
+  const [reason, setReason] = React.useState('');
+  if (!item) return null;
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 1300, display: 'flex', flexDirection: 'column', background: 'var(--bg)', animation: 'maestro-rise .18s ease both' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 14px', borderBottom: '1px solid var(--line)', background: 'var(--panel-2)', flex: 'none' }}>
+        <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.18em', color: 'var(--bg)', background: 'var(--violet)', padding: '2px 8px', borderRadius: 3, flex: 'none' }}>{item.gateLabel}</span>
+        <span style={{ fontWeight: 700, fontSize: 14, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.title}</span>
+        <span style={{ flex: 1 }}></span>
+        <button onClick={onClose} title="关闭" style={{ fontFamily: 'var(--mono)', fontSize: 15, background: 'transparent', color: 'var(--muted)', border: 'none', cursor: 'pointer', padding: '8px 10px', minHeight: 44 }}>✕</button>
+      </div>
+      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 16px 24px' }}>
+        <div style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 10 }}>{item.meta}</div>
+        {item.docLabel ? <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', margin: '0 0 6px' }}>{item.docLabel}</div> : null}
+        <div style={{ background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderLeft: '2px solid var(--green-dim)', borderRadius: 4, padding: '12px 14px', fontFamily: 'var(--mono)', fontSize: 13.5, lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-word', color: 'var(--ink)' }}>{item.doc}</div>
+      </div>
+      <div style={{ flex: 'none', padding: '12px 14px calc(12px + env(safe-area-inset-bottom))', borderTop: '1px solid var(--line)', background: 'var(--panel-2)', display: 'grid', gap: 10 }}>
+        {rejecting ? (
+          <React.Fragment>
+            <Textarea danger placeholder="改进意见（必填）" minHeight={56} value={reason} onChange={setReason} />
+            <div style={{ display: 'flex', gap: 10 }}>
+              <Button variant="reject" disabled={!reason.trim()} style={{ flex: 1, minHeight: 44 }}
+                onClick={() => { onDecide(item, 'reject', reason); onClose(); }}>确认驳回</Button>
+              <Button style={{ flex: 1, minHeight: 44 }} onClick={() => { setRejecting(false); setReason(''); }}>取消</Button>
+            </div>
+          </React.Fragment>
+        ) : (
+          <div style={{ display: 'flex', gap: 10 }}>
+            <Button variant="accept" style={{ flex: 1, minHeight: 44 }} onClick={() => { onDecide(item, 'accept'); onClose(); }}>✓ 通过</Button>
+            <Button variant="reject" style={{ flex: 1, minHeight: 44 }} onClick={() => setRejecting(true)}>✕ 驳回</Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MobGates({ approvals, onDecide }) {
+  const { GateCard, GateStripe, Button, Textarea, SectionHead } = window.MaestroDesignSystem_a6a290;
+  const [rejecting, setRejecting] = React.useState(null);
+  const [reason, setReason] = React.useState('');
+  const [preview, setPreview] = React.useState(null);
+  if (!approvals.length) {
+    return <div style={{ margin: '24px 14px', padding: '38px 0', textAlign: 'center', color: 'var(--faint)', border: '1px dashed var(--line)', borderRadius: 6, fontSize: 12 }}>无待裁决审批</div>;
+  }
+  return (
+    <div style={{ padding: '12px 14px' }}>
+      <GateStripe />
+      <SectionHead mark="violet" title="审批闸 · 等待裁决" style={{ padding: '10px 0 8px', color: 'var(--violet)' }} />
+      {approvals.map((a) => (
+        <div key={a.id} style={{ marginBottom: 12 }}>
+          <GateCard gate={a.gate} title={a.title} meta={a.meta} docLabel={a.docLabel} doc={a.doc}
+            actions={
+              <React.Fragment>
+                <Button variant="accept" style={{ flex: 1, minHeight: 44 }} onClick={() => onDecide(a, 'accept')}>✓ 通过</Button>
+                <Button variant="reject" style={{ flex: 1, minHeight: 44 }} onClick={() => setRejecting(rejecting === a.id ? null : a.id)}>✕ 驳回</Button>
+                <Button variant="ghost" style={{ minHeight: 44 }} title="全屏阅读"
+                  onClick={() => setPreview({ ...a, gateLabel: { plan: '拆解评审', spec: '方案评审', exec: '结果评审' }[a.gate] || a.gate })}>⛶</Button>
+              </React.Fragment>
+            }>
+            {rejecting === a.id ? (
+              <div style={{ display: 'grid', gap: 10, marginTop: 10 }}>
+                <Textarea danger placeholder="改进意见（必填）" minHeight={56} value={reason} onChange={setReason} />
+                <Button variant="reject" disabled={!reason.trim()} style={{ minHeight: 44 }}
+                  onClick={() => { onDecide(a, 'reject', reason); setRejecting(null); setReason(''); }}>
+                  确认驳回
+                </Button>
+              </div>
+            ) : null}
+          </GateCard>
+        </div>
+      ))}
+      <MobGatePreview item={preview} onDecide={onDecide} onClose={() => setPreview(null)} />
+    </div>
+  );
+}
+
+function MobEvents({ events }) {
+  const { EventItem, SectionHead } = window.MaestroDesignSystem_a6a290;
+  return (
+    <div>
+      <SectionHead title="事件流" style={{ padding: '14px 14px 8px' }} />
+      <ul style={{ listStyle: 'none', padding: '0 14px', margin: 0 }}>
+        {events.map((e, i) => <EventItem key={i} type={e.type} time={e.time} detail={e.detail} />)}
+      </ul>
+    </div>
+  );
+}
+
+function MobProjects({ projects, currentId, onSelect, project }) {
+  const { SectionHead, Select, Input, Button } = window.MaestroDesignSystem_a6a290;
+  return (
+    <div>
+      <SectionHead title="项目" style={{ padding: '14px 14px 8px' }} />
+      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+        {projects.map((p) => {
+          const active = p.id === currentId;
+          return (
+            <li key={p.id} onClick={() => onSelect(p.id)} style={{
+              display: 'flex', alignItems: 'center', gap: 10, minHeight: 52,
+              padding: '10px 14px', cursor: 'pointer',
+              borderBottom: '1px solid var(--line-soft)',
+              borderLeft: '2px solid ' + (active ? 'var(--green)' : 'transparent'),
+              background: active ? 'var(--panel-2)' : 'transparent',
+              color: active ? 'var(--green)' : 'var(--muted)',
+            }}>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}>
+                <line x1="6" y1="3" x2="6" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" />
+              </svg>
+              <span style={{ display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }}>
+                <span style={{ fontWeight: 600, fontSize: 13, color: active ? 'var(--green)' : 'var(--ink)' }}>{p.name}</span>
+                <span style={{ fontSize: 10.5, color: 'var(--faint)' }}>{p.path}</span>
+              </span>
+              {active ? <span style={{ marginLeft: 'auto', fontSize: 10, letterSpacing: '.12em', color: 'var(--green)' }}>当前</span> : null}
+            </li>
+          );
+        })}
+      </ul>
+      <SectionHead title="项目配置" style={{ padding: '18px 14px 8px' }} />
+      <div style={{ margin: '0 14px', background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 6, padding: 14, display: 'grid', gap: 12 }}>
+        <Input label="最大并发" type="number" defaultValue={String(project.concurrency)} />
+        <Select label="工作模式" defaultValue={project.autonomy} options={[
+          { value: 'manual', label: 'manual · 手动' },
+          { value: 'auto-easy', label: 'auto-easy · 自动执行 Easy' },
+          { value: 'auto-approved', label: 'auto-approved · 自动执行已批准' },
+        ]} />
+        <Button variant="solid" style={{ minHeight: 44 }}>保存配置</Button>
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, { MaestroMobTasks: MobTasks, MaestroMobGates: MobGates, MaestroMobEvents: MobEvents, MaestroMobProjects: MobProjects });
diff --git a/design/ui_kits/console_mobile/index.html b/design/ui_kits/console_mobile/index.html
new file mode 100644
index 0000000..e90bff0
--- /dev/null
+++ b/design/ui_kits/console_mobile/index.html
@@ -0,0 +1,90 @@
+<!-- @dsCard group="Console" viewport="390x760" name="移动版调度台" subtitle="单栏 + 底部 Tab（任务/审批/事件/项目）· 触控目标 ≥44px · 可点击" -->
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>MAESTRO · 移动版调度台</title>
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<script src="../console/data.js"></script>
+<style>
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body { background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.55; display: flex; justify-content: center; }
+  body::before {
+    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
+    background:
+      repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
+      radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.5));
+    opacity: .5;
+  }
+  ::selection { background: var(--green-dim); color: #fff; }
+  #root { width: 100%; max-width: 430px; height: 100vh; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel" src="MobileChrome.jsx"></script>
+<script type="text/babel" src="MobileViews.jsx"></script>
+<script type="text/babel">
+const { Toast } = window.MaestroDesignSystem_a6a290;
+const M = window.MAESTRO_MOCK;
+
+function App() {
+  const [tab, setTab] = React.useState('tasks');
+  const [currentId, setCurrentId] = React.useState('p1');
+  const [approvals, setApprovals] = React.useState(M.approvals);
+  const [events, setEvents] = React.useState(M.events);
+  const [toasts, setToasts] = React.useState([]);
+  const project = M.projects.find((p) => p.id === currentId);
+  const isMain = currentId === 'p1';
+  const tasks = isMain ? M.tasks : [];
+  const agents = isMain ? M.agents : [];
+  const gates = isMain ? approvals : [];
+
+  const toast = (kind, text) => {
+    const id = Date.now();
+    setToasts((t) => [...t, { id, kind, text }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2600);
+  };
+  const now = () => new Date().toTimeString().slice(0, 8);
+  const decide = (a, action, reason) => {
+    setApprovals((list) => list.filter((x) => x.id !== a.id));
+    if (action === 'accept') {
+      setEvents((ev) => [{ type: 'approval.granted', time: now(), detail: a.title + ' · ' + a.gate + '_review 通过' }, ...ev]);
+      toast('ok', '已通过 · ' + a.title);
+    } else {
+      setEvents((ev) => [{ type: 'approval.rejected', time: now(), detail: a.title + ' ↳ ' + reason }, ...ev]);
+      toast('warn', '已驳回 · 退回重做');
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--line-soft)', borderRight: '1px solid var(--line-soft)', background: 'var(--bg)' }}>
+      <window.MaestroMobHeader project={project} counts={{ gate: gates.length, run: agents.length }} />
+      <main style={{ flex: 1, overflowY: 'auto', paddingBottom: 16 }}>
+        {tab === 'tasks' ? (
+          tasks.length
+            ? <window.MaestroMobTasks tasks={tasks} agents={agents} />
+            : <div style={{ margin: '24px 14px', padding: '38px 0', textAlign: 'center', color: 'var(--faint)', border: '1px dashed var(--line)', borderRadius: 6, fontSize: 12 }}>该项目暂无任务</div>
+        ) : null}
+        {tab === 'gates' ? <window.MaestroMobGates approvals={gates} onDecide={decide} /> : null}
+        {tab === 'events' ? <window.MaestroMobEvents events={events} /> : null}
+        {tab === 'projects' ? <window.MaestroMobProjects projects={M.projects} currentId={currentId} project={project}
+          onSelect={(id) => { setCurrentId(id); toast('ok', '已切换 · ' + M.projects.find((p) => p.id === id).name); }} /> : null}
+      </main>
+      <window.MaestroMobTabBar tab={tab} setTab={setTab} gateCount={gates.length} />
+      <div style={{ position: 'fixed', bottom: 72, left: '50%', transform: 'translateX(-50%)', zIndex: 1200, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', width: 'max-content', maxWidth: '90vw' }}>
+        {toasts.map((t) => <Toast key={t.id} kind={t.kind}>{t.text}</Toast>)}
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>