From 89557d3a36924125439b5b5de278b7f2724883e1 Mon Sep 17 00:00:00 2001
From: ghbvf <104540935+ghbvf@users.noreply.github.com>
Date: Wed, 3 Jun 2026 05:39:12 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(devboard):=20Batch=206=20DevTools=20?=
 =?UTF-8?q?=E5=8F=AA=E8=AF=BB=E5=9B=9B=E9=A1=B5=EF=BC=88Contracts/Deps/Cov?=
 =?UTF-8?q?erage/Groups=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

平台级只读浏览四页，全部落 @gocell/devboard，零跨包 import、零后端调用、
零图形库依赖（graph/tree/matrix 纯 SVG/CSS）。严守「绝不伪造」：可派生数据
走 CELL_MANIFEST 真实派生，不可派生数据走明确标注的静态快照。

- /contracts: registry 自所有 cell 的 produces/consumes 聚合派生（serve/call
  关系，useContractsRegistry）；governance gates CH-01..06 + typed response
  envelope 为静态快照，页头 banner 标注，待接 gocell validate --strict。
- /deps: cell 依赖图自 dependsOnCells 派生，4 视图 list/graph/tree/matrix，
  视图切换器复用 useRovingTablist（APG tablist + roving tabindex）。
- /coverage: 实施进度矩阵（手维护 meta，真相源 dev-coverage.jsx，PRD §514）。
- /groups: Smart Groups preview，规则静态、成员实时计算自真实 manifest 字段。

集成：4 路由（apps/web）+ 4 exports 子路径；PDP 门降级 requiredResource:'cell'
（后端无 contract/dep/group resource），/coverage 仅 requiresAuth（dev-tool 自览）。
i18n contracts/deps/coverage/groups 四命名空间（zh-CN + en-US）。

测试：devboard +191 新测试全绿（360 总），apps/web 74 绿，新文件覆盖率 98%。
ref: dev-coverage.jsx / dev-extras3.jsx / dev-develop.jsx / dev-cell.jsx

Closes #17

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/src/router/index.spec.ts             |  37 ++
 apps/web/src/router/index.ts                  |  38 ++
 packages/core/src/i18n/messages/en-US.ts      | 229 +++++++
 packages/core/src/i18n/messages/zh-CN.ts      | 229 +++++++
 packages/devboard/README.md                   |  17 +
 packages/devboard/package.json                |   6 +-
 .../contracts/GovernanceGatesPanel.spec.ts    | 100 +++
 .../contracts/GovernanceGatesPanel.vue        | 170 +++++
 .../src/components/deps/DepsGraphView.vue     | 216 +++++++
 .../src/components/deps/DepsListView.vue      | 134 ++++
 .../src/components/deps/DepsMatrixView.vue    | 161 +++++
 .../src/components/deps/DepsTreeView.vue      | 192 ++++++
 .../src/components/deps/DepsViewBar.spec.ts   | 132 ++++
 .../src/components/deps/DepsViewBar.vue       |  93 +++
 .../src/components/deps/DepsViews.spec.ts     | 304 +++++++++
 .../composables/useContractsRegistry.spec.ts  | 156 +++++
 .../src/composables/useContractsRegistry.ts   | 124 ++++
 .../src/composables/useDepsGraph.spec.ts      | 129 ++++
 .../devboard/src/composables/useDepsGraph.ts  | 112 ++++
 .../devboard/src/data/coverageMatrix.spec.ts  |  78 +++
 packages/devboard/src/data/coverageMatrix.ts  | 222 +++++++
 .../devboard/src/data/governanceGates.spec.ts |  39 ++
 packages/devboard/src/data/governanceGates.ts |  39 ++
 .../src/data/responseEnvelopes.spec.ts        |  38 ++
 .../devboard/src/data/responseEnvelopes.ts    |  52 ++
 .../devboard/src/data/smartGroups.spec.ts     | 122 ++++
 packages/devboard/src/data/smartGroups.ts     | 114 ++++
 .../devboard/src/views/ContractsView.spec.ts  | 171 +++++
 packages/devboard/src/views/ContractsView.vue | 603 ++++++++++++++++++
 .../devboard/src/views/CoverageView.spec.ts   | 305 +++++++++
 packages/devboard/src/views/CoverageView.vue  | 557 ++++++++++++++++
 packages/devboard/src/views/DepsView.spec.ts  | 209 ++++++
 packages/devboard/src/views/DepsView.vue      | 304 +++++++++
 .../devboard/src/views/GroupsView.spec.ts     | 265 ++++++++
 packages/devboard/src/views/GroupsView.vue    | 532 +++++++++++++++
 35 files changed, 6228 insertions(+), 1 deletion(-)
 create mode 100644 packages/devboard/src/components/contracts/GovernanceGatesPanel.spec.ts
 create mode 100644 packages/devboard/src/components/contracts/GovernanceGatesPanel.vue
 create mode 100644 packages/devboard/src/components/deps/DepsGraphView.vue
 create mode 100644 packages/devboard/src/components/deps/DepsListView.vue
 create mode 100644 packages/devboard/src/components/deps/DepsMatrixView.vue
 create mode 100644 packages/devboard/src/components/deps/DepsTreeView.vue
 create mode 100644 packages/devboard/src/components/deps/DepsViewBar.spec.ts
 create mode 100644 packages/devboard/src/components/deps/DepsViewBar.vue
 create mode 100644 packages/devboard/src/components/deps/DepsViews.spec.ts
 create mode 100644 packages/devboard/src/composables/useContractsRegistry.spec.ts
 create mode 100644 packages/devboard/src/composables/useContractsRegistry.ts
 create mode 100644 packages/devboard/src/composables/useDepsGraph.spec.ts
 create mode 100644 packages/devboard/src/composables/useDepsGraph.ts
 create mode 100644 packages/devboard/src/data/coverageMatrix.spec.ts
 create mode 100644 packages/devboard/src/data/coverageMatrix.ts
 create mode 100644 packages/devboard/src/data/governanceGates.spec.ts
 create mode 100644 packages/devboard/src/data/governanceGates.ts
 create mode 100644 packages/devboard/src/data/responseEnvelopes.spec.ts
 create mode 100644 packages/devboard/src/data/responseEnvelopes.ts
 create mode 100644 packages/devboard/src/data/smartGroups.spec.ts
 create mode 100644 packages/devboard/src/data/smartGroups.ts
 create mode 100644 packages/devboard/src/views/ContractsView.spec.ts
 create mode 100644 packages/devboard/src/views/ContractsView.vue
 create mode 100644 packages/devboard/src/views/CoverageView.spec.ts
 create mode 100644 packages/devboard/src/views/CoverageView.vue
 create mode 100644 packages/devboard/src/views/DepsView.spec.ts
 create mode 100644 packages/devboard/src/views/DepsView.vue
 create mode 100644 packages/devboard/src/views/GroupsView.spec.ts
 create mode 100644 packages/devboard/src/views/GroupsView.vue

diff --git a/apps/web/src/router/index.spec.ts b/apps/web/src/router/index.spec.ts
index 2f4a190..da94b46 100644
--- a/apps/web/src/router/index.spec.ts
+++ b/apps/web/src/router/index.spec.ts
@@ -87,4 +87,41 @@ describe('router layout fork', () => {
     expect(m.meta.requiredAction).toBe('read')
     expect(m.meta.requiredResource).toBe('cell')
   })
+
+  it('renders /contracts nested under the shell, gate degraded to cell (Batch 6)', () => {
+    const m = router.resolve('/contracts')
+    expect(m.name).toBe('contracts')
+    expect(m.matched.length).toBeGreaterThanOrEqual(2)
+    expect(m.meta.requiresAuth).toBe(true)
+    expect(m.meta.requiredAction).toBe('read')
+    expect(m.meta.requiredResource).toBe('cell')
+  })
+
+  it('renders /deps nested under the shell, gate degraded to cell (Batch 6)', () => {
+    const m = router.resolve('/deps')
+    expect(m.name).toBe('deps')
+    expect(m.matched.length).toBeGreaterThanOrEqual(2)
+    expect(m.meta.requiresAuth).toBe(true)
+    expect(m.meta.requiredAction).toBe('read')
+    expect(m.meta.requiredResource).toBe('cell')
+  })
+
+  it('renders /coverage behind only the auth gate — a self-referential meta page (Batch 6)', () => {
+    const m = router.resolve('/coverage')
+    expect(m.name).toBe('coverage')
+    expect(m.matched.length).toBeGreaterThanOrEqual(2)
+    expect(m.meta.requiresAuth).toBe(true)
+    // No PDP resource exists for a dev-tool self-overview — auth gate only.
+    expect(m.meta.requiredAction).toBeUndefined()
+    expect(m.meta.requiredResource).toBeUndefined()
+  })
+
+  it('renders /groups nested under the shell, gate degraded to cell (Batch 6)', () => {
+    const m = router.resolve('/groups')
+    expect(m.name).toBe('groups')
+    expect(m.matched.length).toBeGreaterThanOrEqual(2)
+    expect(m.meta.requiresAuth).toBe(true)
+    expect(m.meta.requiredAction).toBe('read')
+    expect(m.meta.requiredResource).toBe('cell')
+  })
 })
diff --git a/apps/web/src/router/index.ts b/apps/web/src/router/index.ts
index 17226f6..f6f1ec4 100644
--- a/apps/web/src/router/index.ts
+++ b/apps/web/src/router/index.ts
@@ -105,6 +105,44 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@gocell/devboard/views/cell-detail'),
         meta: { requiresAuth: true, requiredAction: 'read', requiredResource: 'cell' },
       },
+      {
+        // Build · Contract registry (Batch 6). Read-only; data derived from the
+        // static CELL_MANIFEST (governance gates / response envelopes are a
+        // labelled static snapshot). The backend has no `contract` PDP resource
+        // yet, so the gate degrades to `cell` — same gate as the cells list.
+        path: 'contracts',
+        name: 'contracts',
+        component: () => import('@gocell/devboard/views/contracts'),
+        meta: { requiresAuth: true, requiredAction: 'read', requiredResource: 'cell' },
+      },
+      {
+        // Build · Dependency explorer (Batch 6). Read-only; cell dependency
+        // graph derived from CELL_MANIFEST.dependsOnCells. No `dep` PDP resource
+        // exists, so the gate degrades to `cell`.
+        path: 'deps',
+        name: 'deps',
+        component: () => import('@gocell/devboard/views/deps'),
+        meta: { requiresAuth: true, requiredAction: 'read', requiredResource: 'cell' },
+      },
+      {
+        // Meta · Coverage matrix (Batch 6). gocell-web's own implementation
+        // progress board — static, self-referential, with no backend resource
+        // to authorize against, so it carries only the auth gate (a PDP
+        // `requiredAction` would fail-closed against a non-existent resource).
+        path: 'coverage',
+        name: 'coverage',
+        component: () => import('@gocell/devboard/views/coverage'),
+        meta: { requiresAuth: true },
+      },
+      {
+        // Operate · Smart Groups preview (Batch 6). Read-only; static group
+        // rules with membership computed live from CELL_MANIFEST. Same `cell`
+        // gate degradation as the other devboard views.
+        path: 'groups',
+        name: 'groups',
+        component: () => import('@gocell/devboard/views/groups'),
+        meta: { requiresAuth: true, requiredAction: 'read', requiredResource: 'cell' },
+      },
     ],
   },
 ]
diff --git a/packages/core/src/i18n/messages/en-US.ts b/packages/core/src/i18n/messages/en-US.ts
index f8af775..3cc3788 100644
--- a/packages/core/src/i18n/messages/en-US.ts
+++ b/packages/core/src/i18n/messages/en-US.ts
@@ -831,6 +831,235 @@ const enUS = {
       openFull: 'Open in audit page',
     },
   },
+  contracts: {
+    title: 'Contract registry',
+    subtitle: 'Platform-wide contract topology (serve / call) derived from CELL_MANIFEST.',
+    count: '{n} contracts',
+    search: {
+      label: 'Search contracts',
+      placeholder: 'Filter by contract or cell…',
+    },
+    kind: {
+      all: 'All',
+      http: 'HTTP',
+      event: 'Event',
+    },
+    table: {
+      contract: 'Contract',
+      kind: 'Kind',
+      servers: 'Served by',
+      callers: 'Called by',
+    },
+    empty: 'No matching contracts.',
+    snapshot: {
+      label: 'Static snapshot',
+      note: 'Governance gates and response envelopes are a static snapshot, pending the backend gocell validate --strict output.',
+    },
+    gates: {
+      title: 'Governance gates',
+      subtitle: 'Run by gocell validate --strict',
+      ch01: 'Contract id maps 1:1 to its filesystem path',
+      ch02: 'Owner cell exists and is not deprecated',
+      ch03: 'Consumer roles are valid for the contract kind',
+      ch04: 'Schema $ref resolves and conforms to JSON Schema 2020-12',
+      ch05: 'Breaking changes carry a waiver',
+      ch06: 'Typed response set is a bijection with generated Response structs',
+      new: 'new',
+      countLabel: '{passed} / {total} passing',
+      verdict: {
+        pass: 'pass',
+        warn: 'warn',
+        fail: 'fail',
+      },
+    },
+    detail: {
+      empty: 'Select a contract to see details.',
+      servers: 'Served by',
+      callers: 'Called by',
+      none: 'None',
+      envelope: 'Typed response envelope',
+      envelopeNone: 'No response envelope snapshot for this contract.',
+      status: 'Status',
+      object: 'Response struct',
+    },
+    envelopeKind: {
+      success: 'Success response',
+      clientError: 'Client error',
+      serverError: 'Server error',
+    },
+  },
+  deps: {
+    title: 'Dependencies',
+    subtitle: 'Cross-cell dependencies derived from CELL_MANIFEST (goda-style read-only explorer).',
+    count: '{n} cells',
+    viewsLabel: 'Dependency view switcher',
+    view: {
+      list: 'List',
+      graph: 'Graph',
+      tree: 'Tree',
+      matrix: 'Matrix',
+    },
+    list: {
+      cell: 'Cell',
+      dependsOn: 'Depends on',
+      requiredBy: 'Required by',
+      none: 'None',
+    },
+    matrix: {
+      caption: 'Cell dependency matrix: rows depend on columns.',
+      depends: 'depends on',
+      independent: 'no dependency',
+      self: 'self',
+    },
+    graph: {
+      label: 'Cell dependency directed graph',
+      empty: 'No dependencies to show.',
+    },
+    tree: {
+      caption: 'Dependency tree: expands downward from top-level consumers.',
+      leaf: 'no downstream dependency',
+    },
+    detail: {
+      empty: 'Select a cell to see its dependencies.',
+      dependsOn: 'Depends on',
+      requiredBy: 'Required by',
+      none: 'None',
+    },
+    empty: 'No cells to show.',
+  },
+  coverage: {
+    eyebrow: 'META · COVERAGE',
+    title: 'gocell-web ↔ devboard coverage',
+    subtitle: 'Design routes vs shipped Vue views. Hand-maintained; truth source dev-coverage.jsx.',
+    kpi: {
+      shipped: 'Routes shipped',
+      drafted: 'Routes drafted',
+      gaps: 'Gaps to close',
+      outOfScope: 'Out of scope',
+    },
+    legend: {
+      matched: 'Matched',
+      partial: 'Partial',
+      designOnly: 'Design-only',
+      backendOnly: 'Backend-only',
+      outOfScope: 'Out of scope',
+    },
+    filter: {
+      all: 'All',
+      matched: 'Matched',
+      partial: 'Partial',
+      designOnly: 'Design-only',
+      backendOnly: 'Backend-only',
+      outOfScope: 'Out of scope',
+    },
+    col: {
+      capability: 'Capability',
+      web: 'gocell-web (real)',
+      design: 'devboard (design)',
+    },
+    status: {
+      matched: 'Matched',
+      partial: 'Partially implemented',
+      designOnly: 'Design-only',
+      backendOnly: 'Backend-only',
+      outOfScope: 'Out of scope',
+    },
+    caption: 'gocell-web implementation progress against design coverage.',
+    none: '—',
+    section: {
+      auth: 'Auth & onboarding',
+      meta: 'Meta',
+      access: 'Access',
+      operate: 'Operate',
+      build: 'Build · DevTools',
+      observe: 'Observability',
+    },
+    cap: {
+      login: 'Login',
+      firstRun: 'First-run setup',
+      coverage: 'Coverage matrix',
+      home: 'Health overview',
+      identities: 'Identities',
+      policies: 'Policies',
+      decisions: 'Decisions',
+      audit: 'Audit log',
+      config: 'Configuration',
+      flags: 'Feature flags',
+      cells: 'Cells list',
+      cellDetail: 'Cell detail',
+      groups: 'Smart Groups',
+      contracts: 'Contract registry',
+      deps: 'Dependencies',
+      workflow: 'Workflows',
+      ai: 'AI Studio',
+      observe: 'Observability v1',
+    },
+  },
+  groups: {
+    title: 'Smart Groups',
+    subtitle: 'Rule-based cell groups (preview; membership computed live from CELL_MANIFEST).',
+    count: '{n} groups',
+    preview: {
+      label: 'Preview',
+      note: 'Preview feature: group rules are static; members are computed live from the rule, with no backend persistence.',
+    },
+    search: {
+      label: 'Search groups',
+      placeholder: 'Filter groups…',
+    },
+    listLabel: 'Group list',
+    empty: 'No matching groups.',
+    detail: {
+      empty: 'Select a group to see its rule and members.',
+      query: 'Rule',
+      members: 'Members',
+      memberCount: '{n} members',
+      noMembers: 'No cell currently satisfies this rule.',
+    },
+    member: {
+      cell: 'Cell',
+      domain: 'Domain',
+      tier: 'Consistency',
+    },
+    field: {
+      domain: 'Domain',
+      tier: 'Consistency',
+      durability: 'Durability',
+      dependsOnCount: 'Dependency count',
+      producesCount: 'Produced contracts',
+      consumesCount: 'Consumed contracts',
+    },
+    op: {
+      eq: '=',
+      neq: '≠',
+      gte: '≥',
+      lte: '≤',
+      gt: '>',
+      lt: '<',
+    },
+    defs: {
+      access: {
+        name: 'Access domain cells',
+        desc: 'All cells in the Access domain.',
+      },
+      strongConsistency: {
+        name: 'Strong-consistency cells',
+        desc: 'Cells at consistency level L3.',
+      },
+      foundation: {
+        name: 'Foundation cells',
+        desc: 'Root cells that depend on no other cell.',
+      },
+      highFanin: {
+        name: 'High fan-in cells',
+        desc: 'Cells consuming five or more contracts.',
+      },
+      durable: {
+        name: 'Durable cells',
+        desc: 'Cells whose durability mode is durable.',
+      },
+    },
+  },
   errors: {
     unknown: 'An unknown error occurred. Please try again.',
     network: 'Network connection failed. Please check your connection.',
diff --git a/packages/core/src/i18n/messages/zh-CN.ts b/packages/core/src/i18n/messages/zh-CN.ts
index 4debd4d..ac17ef3 100644
--- a/packages/core/src/i18n/messages/zh-CN.ts
+++ b/packages/core/src/i18n/messages/zh-CN.ts
@@ -818,6 +818,235 @@ const zhCN = {
       openFull: '在审计页打开',
     },
   },
+  contracts: {
+    title: '契约登记',
+    subtitle: '由 CELL_MANIFEST 派生的全平台契约拓扑（serve / call 关系）。',
+    count: '{n} 个契约',
+    search: {
+      label: '搜索契约',
+      placeholder: '按契约或 cell 过滤…',
+    },
+    kind: {
+      all: '全部',
+      http: 'HTTP',
+      event: '事件',
+    },
+    table: {
+      contract: '契约',
+      kind: '类型',
+      servers: '提供方',
+      callers: '调用方',
+    },
+    empty: '无匹配的契约。',
+    snapshot: {
+      label: '静态快照',
+      note: '治理门禁与响应信封为静态快照，待接后端 gocell validate --strict 输出。',
+    },
+    gates: {
+      title: '治理门禁',
+      subtitle: '由 gocell validate --strict 执行',
+      ch01: '契约 id 与文件系统路径一一对应',
+      ch02: '归属 cell 存在且生命周期未废弃',
+      ch03: '消费方角色对该契约类型合法',
+      ch04: 'Schema $ref 可解析且符合 JSON Schema 2020-12',
+      ch05: '破坏性变更必须附 waiver',
+      ch06: '类型化响应集与生成的 Response struct 双射',
+      new: '新',
+      countLabel: '{passed} / {total} 通过',
+      verdict: {
+        pass: '通过',
+        warn: '告警',
+        fail: '失败',
+      },
+    },
+    detail: {
+      empty: '选择一个契约查看详情。',
+      servers: '提供方',
+      callers: '调用方',
+      none: '无',
+      envelope: '类型化响应信封',
+      envelopeNone: '该契约暂无响应信封快照。',
+      status: '状态码',
+      object: '响应结构',
+    },
+    envelopeKind: {
+      success: '成功响应',
+      clientError: '客户端错误',
+      serverError: '服务端错误',
+    },
+  },
+  deps: {
+    title: '依赖',
+    subtitle: '由 CELL_MANIFEST 派生的 cell 间依赖关系（goda 风格只读浏览）。',
+    count: '{n} 个 cell',
+    viewsLabel: '依赖视图切换',
+    view: {
+      list: '列表',
+      graph: '图',
+      tree: '树',
+      matrix: '矩阵',
+    },
+    list: {
+      cell: 'Cell',
+      dependsOn: '依赖',
+      requiredBy: '被依赖',
+      none: '无',
+    },
+    matrix: {
+      caption: 'cell 依赖矩阵：行依赖列。',
+      depends: '依赖',
+      independent: '不依赖',
+      self: '自身',
+    },
+    graph: {
+      label: 'cell 依赖有向图',
+      empty: '无依赖关系可展示。',
+    },
+    tree: {
+      caption: '依赖树：从顶层消费方向下展开。',
+      leaf: '无下游依赖',
+    },
+    detail: {
+      empty: '选择一个 cell 查看其依赖。',
+      dependsOn: '依赖',
+      requiredBy: '被依赖',
+      none: '无',
+    },
+    empty: '无 cell 可展示。',
+  },
+  coverage: {
+    eyebrow: 'META · 覆盖率',
+    title: 'gocell-web ↔ devboard 覆盖矩阵',
+    subtitle: '设计稿路由与已实现 Vue 视图的对照进度。手工维护，真相源 dev-coverage.jsx。',
+    kpi: {
+      shipped: '已交付路由',
+      drafted: '设计稿路由',
+      gaps: '待补差距',
+      outOfScope: '范围外',
+    },
+    legend: {
+      matched: '已对齐',
+      partial: '部分',
+      designOnly: '仅设计',
+      backendOnly: '待后端',
+      outOfScope: '范围外',
+    },
+    filter: {
+      all: '全部',
+      matched: '已对齐',
+      partial: '部分',
+      designOnly: '仅设计',
+      backendOnly: '待后端',
+      outOfScope: '范围外',
+    },
+    col: {
+      capability: '能力',
+      web: 'gocell-web（实现）',
+      design: 'devboard（设计）',
+    },
+    status: {
+      matched: '已对齐',
+      partial: '部分实现',
+      designOnly: '仅设计稿',
+      backendOnly: '待后端',
+      outOfScope: '范围外',
+    },
+    caption: 'gocell-web 实现进度与设计稿覆盖对照矩阵。',
+    none: '—',
+    section: {
+      auth: '认证与引导',
+      meta: 'Meta',
+      access: 'Access',
+      operate: 'Operate',
+      build: 'Build · DevTools',
+      observe: '可观测',
+    },
+    cap: {
+      login: '登录',
+      firstRun: '首次安装向导',
+      coverage: '覆盖矩阵',
+      home: '健康总览',
+      identities: '身份',
+      policies: '策略',
+      decisions: '决策',
+      audit: '审计日志',
+      config: '配置',
+      flags: '功能开关',
+      cells: 'Cells 列表',
+      cellDetail: 'Cell 详情',
+      groups: '智能分组',
+      contracts: '契约登记',
+      deps: '依赖浏览',
+      workflow: '工作流',
+      ai: 'AI Studio',
+      observe: '可观测 v1',
+    },
+  },
+  groups: {
+    title: '智能分组',
+    subtitle: '基于规则的 cell 分组（预览级，成员实时计算自 CELL_MANIFEST）。',
+    count: '{n} 个分组',
+    preview: {
+      label: '预览',
+      note: '预览能力：分组规则为静态，成员按规则实时计算，无后端持久化。',
+    },
+    search: {
+      label: '搜索分组',
+      placeholder: '过滤分组…',
+    },
+    listLabel: '分组列表',
+    empty: '无匹配的分组。',
+    detail: {
+      empty: '选择一个分组查看规则与成员。',
+      query: '规则',
+      members: '成员',
+      memberCount: '{n} 个成员',
+      noMembers: '当前无 cell 满足该规则。',
+    },
+    member: {
+      cell: 'Cell',
+      domain: '域',
+      tier: '一致性级别',
+    },
+    field: {
+      domain: '域',
+      tier: '一致性级别',
+      durability: '持久性',
+      dependsOnCount: '依赖数',
+      producesCount: '提供契约数',
+      consumesCount: '消费契约数',
+    },
+    op: {
+      eq: '=',
+      neq: '≠',
+      gte: '≥',
+      lte: '≤',
+      gt: '>',
+      lt: '<',
+    },
+    defs: {
+      access: {
+        name: 'Access 域 cell',
+        desc: '归属 Access 域的所有 cell。',
+      },
+      strongConsistency: {
+        name: '强一致 cell',
+        desc: '一致性级别为 L3 的 cell。',
+      },
+      foundation: {
+        name: '基础 cell',
+        desc: '不依赖任何其他 cell 的根 cell。',
+      },
+      highFanin: {
+        name: '高扇入 cell',
+        desc: '消费 5 个及以上契约的 cell。',
+      },
+      durable: {
+        name: '持久化 cell',
+        desc: '持久性模式为 durable 的 cell。',
+      },
+    },
+  },
   errors: {
     unknown: '发生未知错误，请稍后重试',
     network: '网络连接失败，请检查网络后重试',
diff --git a/packages/devboard/README.md b/packages/devboard/README.md
index 4049fd0..23cb975 100644
--- a/packages/devboard/README.md
+++ b/packages/devboard/README.md
@@ -9,9 +9,26 @@
 - `.` → `src/index.ts`：manifest 类型、`CELL_MANIFEST`、`useCellsStore`、共享组件（`CellDurabilityBadge` / `UnavailablePanel`）
 - `./views/cells-list` → `CellsListView.vue`（`/cells` 列表页，T503）
 - `./views/cell-detail` → `CellDetailView.vue`（`/cells/:id` 12-tab 详情，T504）
+- `./views/contracts` → `ContractsView.vue`（`/contracts` 平台级 contract registry，T601）
+- `./views/deps` → `DepsView.vue`（`/deps` cell 依赖 explorer，4 视图 list/graph/tree/matrix，T602）
+- `./views/coverage` → `CoverageView.vue`（`/coverage` 实施进度矩阵，T603）
+- `./views/groups` → `GroupsView.vue`（`/groups` Smart Groups preview，T604）
 
 未列出的路径外部不可访问（`package.json#exports` 唯一收口）。
 
+## Batch 6 DevTools 只读页（平台级，区别于 cell-detail 内同名 tab）
+
+四页全部落本包，零跨包 import、零后端调用、零图形库依赖（graph/tree/matrix 纯 SVG/CSS）。数据分两类，严守 **绝不伪造**：
+
+| 页面 | 真实派生（自 `CELL_MANIFEST`） | 静态快照（明确标注，待后端） |
+|---|---|---|
+| `/contracts` | contract registry：聚合所有 cell 的 `produces`/`consumes` → serve/call 关系（`composables/useContractsRegistry.ts`） | governance gates CH-01..06 + typed response envelope（`data/governanceGates.ts` / `data/responseEnvelopes.ts`，页头 `静态快照` banner，待接 `gocell validate --strict`） |
+| `/deps` | cell 间依赖图：自 `dependsOnCells`/`requiredByCells` 派生 edges/forest/matrix（`composables/useDepsGraph.ts`） | —（不引入 go mod 包级快照，避免伪造；cell 级依赖随后端真实增长） |
+| `/coverage` | —（与 `CELL_MANIFEST` 正交） | 实施进度矩阵（`data/coverageMatrix.ts`，手维护 meta，真相源 `dev-coverage.jsx`，PRD §514） |
+| `/groups` | 成员实时计算：predicate 对真实 manifest 字段求值（`data/smartGroups.ts` `groupMembers`） | 分组规则定义（5 条，predicate 仅用可派生字段 domain/tier/durability/依赖数/契约数，preview 级无持久化） |
+
+PDP 门：后端无 `contract`/`dep`/`group` resource，路由守卫降级到 `requiredResource: 'cell'`（同 `/cells`）；`/coverage` 为 dev-tool 自览，仅 `requiresAuth`（设 `requiredAction` 会对不存在的 resource fail-closed）。
+
 ## Cell manifest 派生（T502，AI-robust Hard）
 
 `tools/cell-manifest/` 镜像 `tools/codegen` 模式：构建期读后端 `cell.yaml` + `slice.yaml` → 派生 `src/manifest/cells.generated.ts`（`/* eslint-disable */` + DO-NOT-EDIT banner，prettier-ignored）。
diff --git a/packages/devboard/package.json b/packages/devboard/package.json
index 321427c..7d21489 100644
--- a/packages/devboard/package.json
+++ b/packages/devboard/package.json
@@ -6,7 +6,11 @@
   "exports": {
     ".": "./src/index.ts",
     "./views/cells-list": "./src/views/CellsListView.vue",
-    "./views/cell-detail": "./src/views/CellDetailView.vue"
+    "./views/cell-detail": "./src/views/CellDetailView.vue",
+    "./views/contracts": "./src/views/ContractsView.vue",
+    "./views/deps": "./src/views/DepsView.vue",
+    "./views/coverage": "./src/views/CoverageView.vue",
+    "./views/groups": "./src/views/GroupsView.vue"
   },
   "files": [
     "src"
diff --git a/packages/devboard/src/components/contracts/GovernanceGatesPanel.spec.ts b/packages/devboard/src/components/contracts/GovernanceGatesPanel.spec.ts
new file mode 100644
index 0000000..b285464
--- /dev/null
+++ b/packages/devboard/src/components/contracts/GovernanceGatesPanel.spec.ts
@@ -0,0 +1,100 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import GovernanceGatesPanel from './GovernanceGatesPanel.vue'
+import { GOVERNANCE_GATES } from '../../data/governanceGates'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (k: string, params?: Record<string, unknown>) => {
+      if (params !== undefined) return `${k}(${JSON.stringify(params)})`
+      return k
+    },
+  }),
+}))
+
+function mountPanel() {
+  return mount(GovernanceGatesPanel)
+}
+
+describe('GovernanceGatesPanel', () => {
+  it('renders exactly 6 gate rows', () => {
+    const wrapper = mountPanel()
+    const rows = wrapper.findAll('[data-testid="gate-row"]')
+    expect(rows.length).toBe(6)
+    expect(GOVERNANCE_GATES.length).toBe(6)
+  })
+
+  it('renders the panel title and subtitle', () => {
+    const wrapper = mountPanel()
+    expect(wrapper.text()).toContain('contracts.gates.title')
+    expect(wrapper.text()).toContain('contracts.gates.subtitle')
+  })
+
+  it('every gate row shows the gate id', () => {
+    const wrapper = mountPanel()
+    for (const gate of GOVERNANCE_GATES) {
+      expect(wrapper.text()).toContain(gate.id)
+    }
+  })
+
+  it('every gate verdict badge contains sr-only text (not color-only)', () => {
+    const wrapper = mountPanel()
+    const srOnlyEls = wrapper.findAll('.sr-only')
+    // Each gate has a verdict badge with sr-only text
+    expect(srOnlyEls.length).toBeGreaterThanOrEqual(GOVERNANCE_GATES.length)
+    const allSrText = srOnlyEls.map((el) => el.text())
+    // Each verdict key should appear: pass, warn, or fail
+    const verdictKeys = [
+      'contracts.gates.verdict.pass',
+      'contracts.gates.verdict.warn',
+      'contracts.gates.verdict.fail',
+    ]
+    const someVerdictPresent = verdictKeys.some((k) => allSrText.some((t) => t.includes(k)))
+    expect(someVerdictPresent).toBe(true)
+  })
+
+  it('CH-06 gate has the "new" affordance', () => {
+    const wrapper = mountPanel()
+    const ch06Row = wrapper
+      .findAll('[data-testid="gate-row"]')
+      .find((row) => row.text().includes('CH-06'))
+    expect(ch06Row).toBeDefined()
+    expect(ch06Row!.text()).toContain('contracts.gates.new')
+  })
+
+  it('renders passed/total counts for each gate', () => {
+    const wrapper = mountPanel()
+    for (const gate of GOVERNANCE_GATES) {
+      expect(wrapper.text()).toContain(
+        `contracts.gates.countLabel(${JSON.stringify({ passed: gate.passed, total: gate.total })})`,
+      )
+    }
+  })
+
+  it('CH-04 has warn verdict badge', () => {
+    const wrapper = mountPanel()
+    // CH-04 has verdict: 'warn'
+    const ch04Row = wrapper
+      .findAll('[data-testid="gate-row"]')
+      .find((row) => row.text().includes('CH-04'))
+    expect(ch04Row).toBeDefined()
+    // The sr-only text should be 'contracts.gates.verdict.warn'
+    const srOnly = ch04Row!.find('.sr-only')
+    expect(srOnly.exists()).toBe(true)
+    expect(srOnly.text()).toContain('contracts.gates.verdict.warn')
+  })
+
+  it('all pass gates have pass verdict sr-only text', () => {
+    const wrapper = mountPanel()
+    const passGates = GOVERNANCE_GATES.filter((g) => g.verdict === 'pass')
+    for (const gate of passGates) {
+      const row = wrapper
+        .findAll('[data-testid="gate-row"]')
+        .find((r) => r.text().includes(gate.id))
+      expect(row).toBeDefined()
+      const srOnly = row!.find('.sr-only')
+      expect(srOnly.exists()).toBe(true)
+      expect(srOnly.text()).toContain('contracts.gates.verdict.pass')
+    }
+  })
+})
diff --git a/packages/devboard/src/components/contracts/GovernanceGatesPanel.vue b/packages/devboard/src/components/contracts/GovernanceGatesPanel.vue
new file mode 100644
index 0000000..7d0eb35
--- /dev/null
+++ b/packages/devboard/src/components/contracts/GovernanceGatesPanel.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { GOVERNANCE_GATES } from '../../data/governanceGates'
+import type { GateVerdict } from '../../data/governanceGates'
+
+const { t } = useI18n()
+
+function verdictKey(verdict: GateVerdict): string {
+  if (verdict === 'pass') return 'contracts.gates.verdict.pass'
+  if (verdict === 'warn') return 'contracts.gates.verdict.warn'
+  return 'contracts.gates.verdict.fail'
+}
+</script>
+
+<template>
+  <section class="gates-panel" aria-labelledby="gates-panel-title">
+    <div class="gates-panel__head">
+      <h2 id="gates-panel-title" class="gates-panel__title">
+        {{ t('contracts.gates.title') }}
+      </h2>
+      <p class="gates-panel__subtitle">{{ t('contracts.gates.subtitle') }}</p>
+    </div>
+
+    <ul class="gates-panel__list" role="list">
+      <li
+        v-for="gate in GOVERNANCE_GATES"
+        :key="gate.id"
+        class="gates-panel__row"
+        data-testid="gate-row"
+      >
+        <span class="gates-panel__gate-id">{{ gate.id }}</span>
+
+        <span class="gates-panel__desc">{{ t(gate.descKey) }}</span>
+
+        <span
+          class="gates-panel__badge"
+          :class="`gates-panel__badge--${gate.verdict}`"
+          :aria-label="t(verdictKey(gate.verdict))"
+        >
+          <span class="sr-only">{{ t(verdictKey(gate.verdict)) }}</span>
+          <span aria-hidden="true">{{ gate.verdict }}</span>
+        </span>
+
+        <span class="gates-panel__count">
+          {{ t('contracts.gates.countLabel', { passed: gate.passed, total: gate.total }) }}
+        </span>
+
+        <span v-if="gate.isNew" class="gates-panel__new">
+          {{ t('contracts.gates.new') }}
+        </span>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.gates-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--bg-raised);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r);
+  box-shadow: var(--shadow-sm);
+}
+
+.gates-panel__head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.gates-panel__title {
+  margin: 0;
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--fg);
+  font-family: var(--font-sans);
+}
+
+.gates-panel__subtitle {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+.gates-panel__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gates-panel__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 0;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.gates-panel__row:last-child {
+  border-bottom: none;
+}
+
+.gates-panel__gate-id {
+  flex: 0 0 52px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--fg);
+}
+
+.gates-panel__desc {
+  flex: 1 1 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+.gates-panel__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 7px;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  border-radius: var(--r-sm);
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.gates-panel__badge--pass {
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
+  background: color-mix(in srgb, var(--ok) 8%, transparent);
+}
+
+.gates-panel__badge--warn {
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
+  background: color-mix(in srgb, var(--warn) 8%, transparent);
+}
+
+.gates-panel__badge--fail {
+  color: var(--err);
+  border-color: color-mix(in srgb, var(--err) 30%, transparent);
+  background: color-mix(in srgb, var(--err) 8%, transparent);
+}
+
+.gates-panel__count {
+  flex: 0 0 auto;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--fg-faint);
+}
+
+.gates-panel__new {
+  flex: 0 0 auto;
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: var(--text-xs);
+  font-family: var(--font-sans);
+  color: var(--accent);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  border-radius: var(--r-sm);
+}
+</style>
diff --git a/packages/devboard/src/components/deps/DepsGraphView.vue b/packages/devboard/src/components/deps/DepsGraphView.vue
new file mode 100644
index 0000000..c0c9714
--- /dev/null
+++ b/packages/devboard/src/components/deps/DepsGraphView.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { CellEntry } from '../../manifest/types'
+import type { DependencyEdge } from '../../composables/useDepsGraph'
+
+const props = defineProps<{
+  cells: readonly CellEntry[]
+  edges: readonly DependencyEdge[]
+  selectedCellId: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', id: string): void
+}>()
+
+const { t } = useI18n()
+
+// SVG layout constants — use CSS tokens via inline style where possible,
+// but these are pure geometric values (no token equiv).
+const SVG_W = 600
+const SVG_H = 400
+const CX = SVG_W / 2
+const CY = SVG_H / 2
+const RADIUS = 140
+const NODE_W = 110
+const NODE_H = 36
+const ARROW_ID = 'deps-graph-arrow'
+
+interface NodeLayout {
+  id: string
+  x: number
+  y: number
+}
+
+const nodeLayouts = computed<readonly NodeLayout[]>(() => {
+  const n = props.cells.length
+  if (n === 0) return []
+  return props.cells.map((cell, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2
+    return {
+      id: cell.id,
+      x: CX + RADIUS * Math.cos(angle),
+      y: CY + RADIUS * Math.sin(angle),
+    }
+  })
+})
+
+const posMap = computed<ReadonlyMap<string, NodeLayout>>(() => {
+  return new Map(nodeLayouts.value.map((n) => [n.id, n]))
+})
+
+// Compute edge path endpoints accounting for node rectangle so arrows
+// touch the border, not the center.
+interface EdgePath {
+  from: string
+  to: string
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+function clampToRect(
+  sx: number,
+  sy: number,
+  tx: number,
+  ty: number,
+  hw: number,
+  hh: number,
+): { x: number; y: number } {
+  const dx = tx - sx
+  const dy = ty - sy
+  const dist = Math.sqrt(dx * dx + dy * dy)
+  if (dist === 0) return { x: sx, y: sy }
+  const ux = dx / dist
+  const uy = dy / dist
+  // clamp to rectangle border of target
+  const tScaleX = hw / Math.abs(ux || 1e-9)
+  const tScaleY = hh / Math.abs(uy || 1e-9)
+  const tScale = Math.min(tScaleX, tScaleY)
+  return {
+    x: tx - ux * tScale,
+    y: ty - uy * tScale,
+  }
+}
+
+const edgePaths = computed<readonly EdgePath[]>(() => {
+  const hw = NODE_W / 2
+  const hh = NODE_H / 2
+  return props.edges.flatMap((e) => {
+    const src = posMap.value.get(e.from)
+    const tgt = posMap.value.get(e.to)
+    if (!src || !tgt) return []
+    const end = clampToRect(src.x, src.y, tgt.x, tgt.y, hw, hh)
+    const start = clampToRect(tgt.x, tgt.y, src.x, src.y, hw, hh)
+    return [{ from: e.from, to: e.to, x1: start.x, y1: start.y, x2: end.x, y2: end.y }]
+  })
+})
+</script>
+
+<template>
+  <div class="deps-graph">
+    <svg
+      v-if="cells.length > 0"
+      :viewBox="`0 0 ${SVG_W} ${SVG_H}`"
+      class="deps-graph__svg"
+      role="img"
+      :aria-label="t('deps.graph.label')"
+    >
+      <title>{{ t('deps.graph.label') }}</title>
+
+      <defs>
+        <marker
+          :id="ARROW_ID"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerWidth="6"
+          markerHeight="6"
+          orient="auto-start-reverse"
+        >
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--line)" aria-hidden="true" />
+        </marker>
+      </defs>
+
+      <!-- Edges -->
+      <line
+        v-for="(ep, idx) in edgePaths"
+        :key="`edge-${idx}`"
+        :x1="ep.x1"
+        :y1="ep.y1"
+        :x2="ep.x2"
+        :y2="ep.y2"
+        stroke="var(--line)"
+        stroke-width="1"
+        :marker-end="`url(#${ARROW_ID})`"
+        aria-hidden="true"
+      />
+
+      <!-- Nodes -->
+      <g
+        v-for="node in nodeLayouts"
+        :key="node.id"
+        :transform="`translate(${node.x - NODE_W / 2}, ${node.y - NODE_H / 2})`"
+        tabindex="0"
+        role="button"
+        :aria-label="node.id"
+        :aria-pressed="selectedCellId === node.id ? 'true' : 'false'"
+        class="deps-graph__node"
+        :class="{ 'deps-graph__node--selected': selectedCellId === node.id }"
+        @click="emit('select', node.id)"
+        @keydown.enter.space.prevent="emit('select', node.id)"
+      >
+        <rect
+          :width="NODE_W"
+          :height="NODE_H"
+          rx="4"
+          fill="var(--bg-raised)"
+          :stroke="selectedCellId === node.id ? 'var(--accent)' : 'var(--line)'"
+          stroke-width="1"
+        />
+        <text
+          :x="NODE_W / 2"
+          :y="NODE_H / 2"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          fill="var(--fg)"
+          font-family="var(--font-mono)"
+          font-size="11"
+        >
+          {{ node.id }}
+        </text>
+      </g>
+    </svg>
+
+    <p v-else class="deps-graph__empty">
+      {{ t('deps.graph.empty') }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.deps-graph {
+  width: 100%;
+}
+
+.deps-graph__svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.deps-graph__node {
+  cursor: pointer;
+  outline: none;
+}
+
+.deps-graph__node:focus-visible rect {
+  stroke: var(--accent);
+  stroke-width: 2;
+}
+
+.deps-graph__empty {
+  color: var(--fg-faint);
+  font-size: var(--text-sm);
+  text-align: center;
+  padding: 40px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .deps-graph__node {
+    transition: none;
+  }
+}
+</style>
diff --git a/packages/devboard/src/components/deps/DepsListView.vue b/packages/devboard/src/components/deps/DepsListView.vue
new file mode 100644
index 0000000..23edb07
--- /dev/null
+++ b/packages/devboard/src/components/deps/DepsListView.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { CellEntry } from '../../manifest/types'
+
+defineProps<{
+  cells: readonly CellEntry[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', id: string): void
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="deps-list">
+    <table class="deps-list__table">
+      <thead>
+        <tr>
+          <th scope="col" class="deps-list__th">{{ t('deps.list.cell') }}</th>
+          <th scope="col" class="deps-list__th">{{ t('deps.list.dependsOn') }}</th>
+          <th scope="col" class="deps-list__th">{{ t('deps.list.requiredBy') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="cell in cells" :key="cell.id" class="deps-list__row">
+          <td class="deps-list__td">
+            <button type="button" class="deps-list__cell-btn" @click="emit('select', cell.id)">
+              <span class="deps-list__mono">{{ cell.id }}</span>
+            </button>
+          </td>
+          <td class="deps-list__td">
+            <span v-if="cell.dependsOnCells.length === 0" class="deps-list__none">
+              {{ t('deps.list.none') }}
+            </span>
+            <ul v-else class="deps-list__dep-list">
+              <li v-for="dep in cell.dependsOnCells" :key="dep" class="deps-list__dep-item">
+                <span class="deps-list__mono">{{ dep }}</span>
+              </li>
+            </ul>
+          </td>
+          <td class="deps-list__td">
+            <span v-if="cell.requiredByCells.length === 0" class="deps-list__none">
+              {{ t('deps.list.none') }}
+            </span>
+            <ul v-else class="deps-list__dep-list">
+              <li v-for="dep in cell.requiredByCells" :key="dep" class="deps-list__dep-item">
+                <span class="deps-list__mono">{{ dep }}</span>
+              </li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.deps-list {
+  overflow-x: auto;
+}
+
+.deps-list__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-base);
+}
+
+.deps-list__th {
+  text-align: left;
+  padding: 8px 12px;
+  font-weight: 500;
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+
+.deps-list__row {
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.deps-list__row:last-child {
+  border-bottom: none;
+}
+
+.deps-list__td {
+  padding: 8px 12px;
+  vertical-align: top;
+}
+
+.deps-list__cell-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--accent);
+  font-size: var(--text-base);
+}
+
+.deps-list__cell-btn:hover {
+  text-decoration: underline;
+}
+
+.deps-list__cell-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--r-sm);
+}
+
+.deps-list__mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+.deps-list__none {
+  color: var(--fg-faint);
+  font-size: var(--text-sm);
+}
+
+.deps-list__dep-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.deps-list__dep-item {
+  color: var(--fg-muted);
+}
+</style>
diff --git a/packages/devboard/src/components/deps/DepsMatrixView.vue b/packages/devboard/src/components/deps/DepsMatrixView.vue
new file mode 100644
index 0000000..e606ed0
--- /dev/null
+++ b/packages/devboard/src/components/deps/DepsMatrixView.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { CellEntry } from '../../manifest/types'
+
+defineProps<{
+  cells: readonly CellEntry[]
+  dependsOn: (from: string, to: string) => boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="deps-matrix">
+    <table class="deps-matrix__table">
+      <caption class="deps-matrix__caption">
+        {{
+          t('deps.matrix.caption')
+        }}
+      </caption>
+      <thead>
+        <tr>
+          <!-- top-left empty corner — no scope, not a header -->
+          <td class="deps-matrix__corner" aria-hidden="true"></td>
+          <th
+            v-for="col in cells"
+            :key="col.id"
+            scope="col"
+            class="deps-matrix__th deps-matrix__th--col"
+          >
+            <span class="deps-matrix__mono">{{ col.id }}</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in cells" :key="row.id" class="deps-matrix__row">
+          <th scope="row" class="deps-matrix__th deps-matrix__th--row">
+            <span class="deps-matrix__mono">{{ row.id }}</span>
+          </th>
+          <td
+            v-for="col in cells"
+            :key="col.id"
+            class="deps-matrix__cell"
+            :class="{
+              'deps-matrix__cell--depends': row.id !== col.id && dependsOn(row.id, col.id),
+              'deps-matrix__cell--self': row.id === col.id,
+            }"
+          >
+            <template v-if="row.id === col.id">
+              <span class="sr-only">{{ t('deps.matrix.self') }}</span>
+              <span aria-hidden="true" class="deps-matrix__dot deps-matrix__dot--self">·</span>
+            </template>
+            <template v-else-if="dependsOn(row.id, col.id)">
+              <span aria-hidden="true" class="deps-matrix__dot deps-matrix__dot--yes">●</span>
+              <span class="sr-only">{{ t('deps.matrix.depends') }}</span>
+            </template>
+            <template v-else>
+              <span aria-hidden="true" class="deps-matrix__dot deps-matrix__dot--no">·</span>
+              <span class="sr-only">{{ t('deps.matrix.independent') }}</span>
+            </template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.deps-matrix {
+  overflow-x: auto;
+}
+
+.deps-matrix__table {
+  border-collapse: collapse;
+  font-size: var(--text-base);
+}
+
+.deps-matrix__caption {
+  caption-side: top;
+  text-align: left;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  font-weight: 500;
+  padding: 0 0 8px;
+}
+
+.deps-matrix__corner {
+  /* empty */
+}
+
+.deps-matrix__th {
+  padding: 6px 10px;
+  font-weight: 500;
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+}
+
+.deps-matrix__th--col {
+  border-bottom: 1px solid var(--line);
+  text-align: center;
+}
+
+.deps-matrix__th--row {
+  border-right: 1px solid var(--line);
+  text-align: right;
+}
+
+.deps-matrix__row {
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.deps-matrix__row:last-child {
+  border-bottom: none;
+}
+
+.deps-matrix__cell {
+  padding: 6px 10px;
+  text-align: center;
+  min-width: 48px;
+}
+
+.deps-matrix__cell--depends {
+  background: var(--accent-soft);
+}
+
+.deps-matrix__cell--self {
+  background: var(--bg-sunken);
+}
+
+.deps-matrix__dot {
+  font-size: var(--text-lg);
+  line-height: 1;
+}
+
+.deps-matrix__dot--yes {
+  color: var(--accent);
+}
+
+.deps-matrix__dot--no,
+.deps-matrix__dot--self {
+  color: var(--fg-faint);
+}
+
+.deps-matrix__mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>
diff --git a/packages/devboard/src/components/deps/DepsTreeView.vue b/packages/devboard/src/components/deps/DepsTreeView.vue
new file mode 100644
index 0000000..54c06fa
--- /dev/null
+++ b/packages/devboard/src/components/deps/DepsTreeView.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { h, defineComponent, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { DependencyTreeNode } from '../../composables/useDepsGraph'
+
+defineProps<{
+  forest: readonly DependencyTreeNode[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', id: string): void
+}>()
+
+const { t } = useI18n()
+
+// Inline recursive subtree renderer — avoids a separate file and the
+// multiple-default-export problem from dual <script> blocks.
+const DepsTreeSubtree = defineComponent({
+  name: 'DepsTreeSubtree',
+  props: {
+    nodes: {
+      type: Array as PropType<readonly DependencyTreeNode[]>,
+      required: true,
+    },
+  },
+  emits: ['select'],
+  setup(subtreeProps, { emit: subtreeEmit }) {
+    function renderNode(node: DependencyTreeNode): ReturnType<typeof h> {
+      if (node.children.length > 0) {
+        return h('li', { class: 'deps-tree__item' }, [
+          h('details', { open: true, class: 'deps-tree__details' }, [
+            h('summary', { class: 'deps-tree__summary' }, [
+              h(
+                'button',
+                {
+                  type: 'button',
+                  class: 'deps-tree__node-btn',
+                  onClick: (ev: MouseEvent) => {
+                    ev.stopPropagation()
+                    subtreeEmit('select', node.id)
+                  },
+                },
+                [h('span', { class: 'deps-tree__mono' }, node.id)],
+              ),
+            ]),
+            h(DepsTreeSubtree, {
+              nodes: node.children,
+              onSelect: (id: string) => subtreeEmit('select', id),
+            }),
+          ]),
+        ])
+      }
+      return h('li', { class: 'deps-tree__item' }, [
+        h(
+          'button',
+          {
+            type: 'button',
+            class: 'deps-tree__node-btn deps-tree__node-btn--leaf',
+            onClick: () => subtreeEmit('select', node.id),
+          },
+          [h('span', { class: 'deps-tree__mono' }, node.id)],
+        ),
+      ])
+    }
+
+    return () =>
+      h(
+        'ul',
+        { class: 'deps-tree__subtree' },
+        subtreeProps.nodes.map((n) => renderNode(n)),
+      )
+  },
+})
+</script>
+
+<template>
+  <div class="deps-tree" :aria-label="t('deps.tree.caption')">
+    <p class="deps-tree__caption" aria-hidden="true">{{ t('deps.tree.caption') }}</p>
+    <ul class="deps-tree__root-list">
+      <li v-for="node in forest" :key="node.id" class="deps-tree__item">
+        <template v-if="node.children.length > 0">
+          <details open class="deps-tree__details">
+            <summary class="deps-tree__summary">
+              <button
+                type="button"
+                class="deps-tree__node-btn"
+                @click.stop="emit('select', node.id)"
+              >
+                <span class="deps-tree__mono">{{ node.id }}</span>
+              </button>
+            </summary>
+            <DepsTreeSubtree :nodes="node.children" @select="emit('select', $event)" />
+          </details>
+        </template>
+        <template v-else>
+          <button
+            type="button"
+            class="deps-tree__node-btn deps-tree__node-btn--leaf"
+            @click="emit('select', node.id)"
+          >
+            <span class="deps-tree__mono">{{ node.id }}</span>
+          </button>
+          <span class="sr-only">{{ t('deps.tree.leaf') }}</span>
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.deps-tree {
+  font-size: var(--text-base);
+}
+
+.deps-tree__caption {
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  font-weight: 500;
+  margin: 0 0 8px;
+}
+
+.deps-tree__root-list,
+:deep(.deps-tree__subtree) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.deps-tree__subtree) {
+  margin-left: 20px;
+  border-left: 1px solid var(--line-soft);
+  padding-left: 12px;
+}
+
+.deps-tree__item {
+  margin: 4px 0;
+}
+
+.deps-tree__summary {
+  list-style: none;
+  cursor: default;
+}
+
+.deps-tree__summary::-webkit-details-marker {
+  display: none;
+}
+
+.deps-tree__node-btn {
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: var(--fg);
+  border-radius: var(--r-sm);
+  font-size: var(--text-base);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.deps-tree__node-btn:hover {
+  background: var(--bg-sunken);
+}
+
+.deps-tree__node-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.deps-tree__mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .deps-tree__node-btn {
+    transition: none;
+  }
+}
+</style>
diff --git a/packages/devboard/src/components/deps/DepsViewBar.spec.ts b/packages/devboard/src/components/deps/DepsViewBar.spec.ts
new file mode 100644
index 0000000..6df800a
--- /dev/null
+++ b/packages/devboard/src/components/deps/DepsViewBar.spec.ts
@@ -0,0 +1,132 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DepsViewBar from './DepsViewBar.vue'
+import type { DepsViewId } from './DepsViewBar.vue'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (k: string) => k }),
+}))
+
+const VIEWS: readonly { id: DepsViewId; labelKey: string }[] = [
+  { id: 'list', labelKey: 'deps.view.list' },
+  { id: 'graph', labelKey: 'deps.view.graph' },
+  { id: 'tree', labelKey: 'deps.view.tree' },
+  { id: 'matrix', labelKey: 'deps.view.matrix' },
+] as const
+
+describe('DepsViewBar', () => {
+  it('renders a tablist with role=tablist', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+    })
+    expect(wrapper.find('[role="tablist"]').exists()).toBe(true)
+  })
+
+  it('renders 4 buttons with role=tab', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+    })
+    const tabs = wrapper.findAll('[role="tab"]')
+    expect(tabs).toHaveLength(4)
+  })
+
+  it('tablist has aria-label from i18n key', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+    })
+    expect(wrapper.find('[role="tablist"]').attributes('aria-label')).toBe('deps.viewsLabel')
+  })
+
+  it('active tab has aria-selected=true and tabindex=0', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'graph' },
+    })
+    const active = wrapper.find('[aria-selected="true"]')
+    expect(active.exists()).toBe(true)
+    expect(active.attributes('tabindex')).toBe('0')
+    expect(active.attributes('id')).toBe('deps-tab-graph')
+  })
+
+  it('inactive tabs have aria-selected=false and tabindex=-1', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+    })
+    const inactive = wrapper.findAll('[aria-selected="false"]')
+    expect(inactive).toHaveLength(3)
+    for (const btn of inactive) {
+      expect(btn.attributes('tabindex')).toBe('-1')
+    }
+  })
+
+  it('active tab has aria-controls pointing to its panel id', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'tree' },
+    })
+    const active = wrapper.find('[aria-selected="true"]')
+    expect(active.attributes('aria-controls')).toBe('deps-panel-tree')
+  })
+
+  it('inactive tabs have no aria-controls attribute', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+    })
+    const inactive = wrapper.findAll('[aria-selected="false"]')
+    for (const btn of inactive) {
+      expect(btn.attributes('aria-controls')).toBeUndefined()
+    }
+  })
+
+  it('click emits select with the view id', async () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+    })
+    const graphBtn = wrapper.find('#deps-tab-graph')
+    await graphBtn.trigger('click')
+    expect(wrapper.emitted('select')).toBeTruthy()
+    expect(wrapper.emitted('select')?.[0]).toEqual(['graph'])
+  })
+
+  it('ArrowRight keydown moves focus to next tab and emits select', async () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+      attachTo: document.body,
+    })
+    const listBtn = wrapper.find('#deps-tab-list')
+    const graphBtn = wrapper.find('#deps-tab-graph')
+    const focusSpy = vi.spyOn(graphBtn.element as HTMLElement, 'focus')
+    await listBtn.trigger('keydown', { key: 'ArrowRight' })
+    expect(focusSpy).toHaveBeenCalled()
+    expect(wrapper.emitted('select')?.[0]).toEqual(['graph'])
+    wrapper.unmount()
+  })
+
+  it('ArrowLeft keydown emits select with the previous tab id', async () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'graph' },
+      attachTo: document.body,
+    })
+    const graphBtn = wrapper.find('#deps-tab-graph')
+    await graphBtn.trigger('keydown', { key: 'ArrowLeft' })
+    expect(wrapper.emitted('select')?.[0]).toEqual(['list'])
+    wrapper.unmount()
+  })
+
+  it('ArrowRight wraps around from last to first tab', async () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'matrix' },
+      attachTo: document.body,
+    })
+    const matrixBtn = wrapper.find('#deps-tab-matrix')
+    await matrixBtn.trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('select')?.[0]).toEqual(['list'])
+    wrapper.unmount()
+  })
+
+  it('button text is the labelKey via t()', () => {
+    const wrapper = mount(DepsViewBar, {
+      props: { views: VIEWS, activeId: 'list' },
+    })
+    const firstBtn = wrapper.findAll('[role="tab"]')[0]
+    expect(firstBtn?.text()).toBe('deps.view.list')
+  })
+})
diff --git a/packages/devboard/src/components/deps/DepsViewBar.vue b/packages/devboard/src/components/deps/DepsViewBar.vue
new file mode 100644
index 0000000..d95d2ee
--- /dev/null
+++ b/packages/devboard/src/components/deps/DepsViewBar.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRovingTablist } from '../../composables/useRovingTablist'
+
+export type DepsViewId = 'list' | 'graph' | 'tree' | 'matrix'
+
+const props = defineProps<{
+  views: readonly { id: DepsViewId; labelKey: string }[]
+  activeId: DepsViewId
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', id: DepsViewId): void
+}>()
+
+const { t } = useI18n()
+
+const tabBtnId = (id: string) => `deps-tab-${id}`
+const panelId = (id: string) => `deps-panel-${id}`
+
+const { onKeydown } = useRovingTablist({
+  tabIds: () => props.views.map((v) => v.id),
+  idFor: tabBtnId,
+  onActivate: (id) => emit('select', id as DepsViewId),
+})
+</script>
+
+<template>
+  <div role="tablist" :aria-label="t('deps.viewsLabel')" class="tab-bar">
+    <button
+      v-for="view in views"
+      :id="tabBtnId(view.id)"
+      :key="view.id"
+      type="button"
+      role="tab"
+      :aria-selected="view.id === activeId"
+      :aria-controls="view.id === activeId ? panelId(view.id) : undefined"
+      :tabindex="view.id === activeId ? 0 : -1"
+      class="tab-bar__btn"
+      :class="{ 'tab-bar__btn--active': view.id === activeId }"
+      @click="emit('select', view.id)"
+      @keydown="onKeydown($event, view.id)"
+    >
+      {{ t(view.labelKey) }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.tab-bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.tab-bar__btn {
+  padding: 8px 14px;
+  font-size: var(--text-base);
+  font-weight: 400;
+  color: var(--fg-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  cursor: pointer;
+  outline: none;
+  transition:
+    color 0.12s,
+    border-color 0.12s;
+  line-height: 1.4;
+}
+
+.tab-bar__btn:hover {
+  color: var(--fg);
+}
+
+.tab-bar__btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.tab-bar__btn--active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+  font-weight: 500;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab-bar__btn {
+    transition: none;
+  }
+}
+</style>
diff --git a/packages/devboard/src/components/deps/DepsViews.spec.ts b/packages/devboard/src/components/deps/DepsViews.spec.ts
new file mode 100644
index 0000000..eb975ec
--- /dev/null
+++ b/packages/devboard/src/components/deps/DepsViews.spec.ts
@@ -0,0 +1,304 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DepsListView from './DepsListView.vue'
+import DepsGraphView from './DepsGraphView.vue'
+import DepsTreeView from './DepsTreeView.vue'
+import DepsMatrixView from './DepsMatrixView.vue'
+import type { CellEntry } from '../../manifest/types'
+import type { DependencyEdge, DependencyTreeNode } from '../../composables/useDepsGraph'
+import {
+  buildDependencyEdges,
+  buildDependencyForest,
+  buildDependsOnIndex,
+} from '../../composables/useDepsGraph'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (k: string, params?: Record<string, unknown>) => {
+      if (params !== undefined) return `${k}(${JSON.stringify(params)})`
+      return k
+    },
+  }),
+}))
+
+const makeCell = (overrides: Partial<CellEntry>): CellEntry => ({
+  id: 'testcore',
+  name: 'TestCore',
+  domain: 'Test',
+  type: 'core',
+  consistencyLevel: 'L2',
+  lifecycle: 'asset',
+  durabilityMode: 'durable',
+  owner: { team: 'platform', role: 'cell-owner' },
+  goStructName: 'TestCore',
+  schemaPrimary: null,
+  requires: [],
+  l0Dependencies: [],
+  smokeTests: [],
+  slices: [],
+  produces: [],
+  consumes: [],
+  dependsOnCells: [],
+  requiredByCells: [],
+  ...overrides,
+})
+
+// 3 cells that mirror the real manifest topology:
+// configcore (root) → accesscore → auditcore
+const CELLS: readonly CellEntry[] = [
+  makeCell({ id: 'configcore', dependsOnCells: [], requiredByCells: ['accesscore', 'auditcore'] }),
+  makeCell({ id: 'accesscore', dependsOnCells: ['configcore'], requiredByCells: ['auditcore'] }),
+  makeCell({
+    id: 'auditcore',
+    dependsOnCells: ['accesscore', 'configcore'],
+    requiredByCells: [],
+  }),
+]
+
+const EDGES: readonly DependencyEdge[] = buildDependencyEdges(CELLS)
+const FOREST: readonly DependencyTreeNode[] = buildDependencyForest(CELLS)
+const DEPENDS_ON = buildDependsOnIndex(CELLS)
+
+// ─── DepsListView ──────────────────────────────────────────────────────────
+
+describe('DepsListView', () => {
+  it('renders one table row per cell', () => {
+    const wrapper = mount(DepsListView, { props: { cells: CELLS } })
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows.length).toBe(3)
+  })
+
+  it('all th elements have scope=col', () => {
+    const wrapper = mount(DepsListView, { props: { cells: CELLS } })
+    const headers = wrapper.findAll('th')
+    expect(headers.length).toBeGreaterThan(0)
+    for (const th of headers) {
+      expect(th.attributes('scope')).toBe('col')
+    }
+  })
+
+  it('cell ids appear in mono spans', () => {
+    const wrapper = mount(DepsListView, { props: { cells: CELLS } })
+    expect(wrapper.text()).toContain('configcore')
+    expect(wrapper.text()).toContain('accesscore')
+    expect(wrapper.text()).toContain('auditcore')
+  })
+
+  it('shows deps.list.none for cells with no dependsOnCells', () => {
+    const wrapper = mount(DepsListView, { props: { cells: CELLS } })
+    // configcore has no dependsOnCells
+    expect(wrapper.text()).toContain('deps.list.none')
+  })
+
+  it('emits select when cell id button clicked', async () => {
+    const wrapper = mount(DepsListView, { props: { cells: CELLS } })
+    const firstBtn = wrapper.find('button')
+    await firstBtn.trigger('click')
+    expect(wrapper.emitted('select')).toBeTruthy()
+    expect(typeof wrapper.emitted('select')?.[0]?.[0]).toBe('string')
+  })
+})
+
+// ─── DepsGraphView ─────────────────────────────────────────────────────────
+
+describe('DepsGraphView', () => {
+  it('renders an svg element with role=img', () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: CELLS, edges: EDGES, selectedCellId: null },
+    })
+    const svg = wrapper.find('svg')
+    expect(svg.exists()).toBe(true)
+    expect(svg.attributes('role')).toBe('img')
+  })
+
+  it('renders at least 3 rect elements (one per cell)', () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: CELLS, edges: EDGES, selectedCellId: null },
+    })
+    const rects = wrapper.findAll('rect')
+    expect(rects.length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('renders exactly as many line elements as there are edges', () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: CELLS, edges: EDGES, selectedCellId: null },
+    })
+    const lines = wrapper.findAll('line')
+    expect(lines.length).toBe(EDGES.length)
+  })
+
+  it('renders 3 node groups (one per cell) with role=button', () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: CELLS, edges: EDGES, selectedCellId: null },
+    })
+    const nodes = wrapper.findAll('[role="button"]')
+    expect(nodes.length).toBe(3)
+  })
+
+  it('emits select when a node is clicked', async () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: CELLS, edges: EDGES, selectedCellId: null },
+    })
+    const firstNode = wrapper.find('[role="button"]')
+    await firstNode.trigger('click')
+    expect(wrapper.emitted('select')).toBeTruthy()
+  })
+
+  it('shows empty message when cells array is empty', () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: [], edges: [], selectedCellId: null },
+    })
+    expect(wrapper.find('svg').exists()).toBe(false)
+    expect(wrapper.text()).toContain('deps.graph.empty')
+  })
+
+  it('svg has a title element for accessibility', () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: CELLS, edges: EDGES, selectedCellId: null },
+    })
+    const title = wrapper.find('title')
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('deps.graph.label')
+  })
+
+  it('selected node has aria-pressed=true', () => {
+    const wrapper = mount(DepsGraphView, {
+      props: { cells: CELLS, edges: EDGES, selectedCellId: 'accesscore' },
+    })
+    const pressed = wrapper.find('[aria-pressed="true"]')
+    expect(pressed.exists()).toBe(true)
+    expect(pressed.attributes('aria-label')).toBe('accesscore')
+  })
+})
+
+// ─── DepsTreeView ──────────────────────────────────────────────────────────
+
+describe('DepsTreeView', () => {
+  it('renders details elements for nodes with children', () => {
+    const wrapper = mount(DepsTreeView, { props: { forest: FOREST } })
+    const details = wrapper.findAll('details')
+    expect(details.length).toBeGreaterThan(0)
+  })
+
+  it('details elements are open by default', () => {
+    const wrapper = mount(DepsTreeView, { props: { forest: FOREST } })
+    const details = wrapper.findAll('details')
+    for (const d of details) {
+      expect(d.attributes('open')).toBeDefined()
+    }
+  })
+
+  it('renders cell ids in the tree', () => {
+    const wrapper = mount(DepsTreeView, { props: { forest: FOREST } })
+    expect(wrapper.text()).toContain('auditcore')
+    expect(wrapper.text()).toContain('accesscore')
+    expect(wrapper.text()).toContain('configcore')
+  })
+
+  it('emits select when a node button is clicked', async () => {
+    const wrapper = mount(DepsTreeView, { props: { forest: FOREST } })
+    const btn = wrapper.find('button')
+    await btn.trigger('click')
+    expect(wrapper.emitted('select')).toBeTruthy()
+  })
+
+  it('renders caption text from i18n', () => {
+    const wrapper = mount(DepsTreeView, { props: { forest: FOREST } })
+    expect(wrapper.text()).toContain('deps.tree.caption')
+  })
+
+  it('leaf nodes have sr-only text', () => {
+    // configcore is a leaf (its only appearance as a child has no further children in the forest)
+    const singleLeafCells: readonly CellEntry[] = [
+      makeCell({ id: 'configcore', dependsOnCells: [], requiredByCells: [] }),
+    ]
+    const singleForest = buildDependencyForest(singleLeafCells)
+    const wrapper = mount(DepsTreeView, { props: { forest: singleForest } })
+    expect(wrapper.find('.sr-only').exists()).toBe(true)
+    expect(wrapper.find('.sr-only').text()).toBe('deps.tree.leaf')
+  })
+})
+
+// ─── DepsMatrixView ────────────────────────────────────────────────────────
+
+describe('DepsMatrixView', () => {
+  it('renders a table with a caption', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    expect(wrapper.find('table').exists()).toBe(true)
+    expect(wrapper.find('caption').text()).toBe('deps.matrix.caption')
+  })
+
+  it('all col header th elements have scope=col', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    const colHeaders = wrapper.findAll('thead th[scope="col"]')
+    // 3 data cell columns (corner is a td, not th)
+    expect(colHeaders.length).toBe(3)
+  })
+
+  it('all row header th elements have scope=row', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    const rowHeaders = wrapper.findAll('th[scope="row"]')
+    expect(rowHeaders.length).toBe(3)
+  })
+
+  it('dependency cells have accent-soft background class', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    const dependCells = wrapper.findAll('.deps-matrix__cell--depends')
+    // auditcore depends on accesscore + configcore = 2 cells
+    // accesscore depends on configcore = 1 cell
+    // total = 3 dependency cells
+    expect(dependCells.length).toBe(3)
+  })
+
+  it('dependency cells contain a sr-only deps.matrix.depends text', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    const srTexts = wrapper.findAll('.sr-only').filter((el) => el.text() === 'deps.matrix.depends')
+    expect(srTexts.length).toBe(3)
+  })
+
+  it('self cells (diagonal) have the self class', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    const selfCells = wrapper.findAll('.deps-matrix__cell--self')
+    expect(selfCells.length).toBe(3)
+  })
+
+  it('self cells contain sr-only deps.matrix.self text', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    const srSelf = wrapper.findAll('.sr-only').filter((el) => el.text() === 'deps.matrix.self')
+    expect(srSelf.length).toBe(3)
+  })
+
+  it('independent cells contain sr-only deps.matrix.independent text', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    // 3x3 grid = 9; self=3, deps=3, independent=3
+    const srIndep = wrapper
+      .findAll('.sr-only')
+      .filter((el) => el.text() === 'deps.matrix.independent')
+    expect(srIndep.length).toBe(3)
+  })
+
+  it('cell ids appear in mono spans in headers', () => {
+    const wrapper = mount(DepsMatrixView, {
+      props: { cells: CELLS, dependsOn: DEPENDS_ON },
+    })
+    expect(wrapper.text()).toContain('configcore')
+    expect(wrapper.text()).toContain('accesscore')
+    expect(wrapper.text()).toContain('auditcore')
+  })
+})
diff --git a/packages/devboard/src/composables/useContractsRegistry.spec.ts b/packages/devboard/src/composables/useContractsRegistry.spec.ts
new file mode 100644
index 0000000..550c51f
--- /dev/null
+++ b/packages/devboard/src/composables/useContractsRegistry.spec.ts
@@ -0,0 +1,156 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { buildContractRegistry, contractKind, useContractsRegistry } from './useContractsRegistry'
+import type { CellEntry } from '../manifest/types'
+
+const makeCell = (overrides: Partial<CellEntry>): CellEntry => ({
+  id: 'testcore',
+  name: 'TestCore',
+  domain: 'Test',
+  type: 'core',
+  consistencyLevel: 'L2',
+  lifecycle: 'asset',
+  durabilityMode: 'durable',
+  owner: { team: 'platform', role: 'cell-owner' },
+  goStructName: 'TestCore',
+  schemaPrimary: null,
+  requires: [],
+  l0Dependencies: [],
+  smokeTests: [],
+  slices: [],
+  produces: [],
+  consumes: [],
+  dependsOnCells: [],
+  requiredByCells: [],
+  ...overrides,
+})
+
+const FIXTURE: CellEntry[] = [
+  makeCell({
+    id: 'configcore',
+    produces: [
+      { contract: 'http.config.get.v1', role: 'serve' },
+      { contract: 'event.config.entry-upserted.v1', role: 'publish' },
+    ],
+    consumes: [{ contract: 'event.config.entry-upserted.v1', role: 'subscribe' }],
+  }),
+  makeCell({
+    id: 'accesscore',
+    produces: [{ contract: 'event.user.created.v1', role: 'publish' }],
+    consumes: [{ contract: 'http.config.get.v1', role: 'call' }],
+  }),
+  makeCell({
+    id: 'auditcore',
+    produces: [],
+    consumes: [
+      { contract: 'event.user.created.v1', role: 'subscribe' },
+      { contract: 'event.config.entry-upserted.v1', role: 'subscribe' },
+    ],
+  }),
+]
+
+describe('contractKind', () => {
+  it('classifies event.* contracts as event', () => {
+    expect(contractKind('event.user.created.v1')).toBe('event')
+  })
+  it('classifies http.* contracts as http', () => {
+    expect(contractKind('http.config.get.v1')).toBe('http')
+  })
+})
+
+describe('buildContractRegistry', () => {
+  it('aggregates a served contract to its serving cell', () => {
+    const reg = buildContractRegistry(FIXTURE)
+    const entry = reg.find((e) => e.contract === 'http.config.get.v1')
+    expect(entry).toBeDefined()
+    expect(entry!.servers).toEqual(['configcore'])
+    expect(entry!.callers).toEqual(['accesscore'])
+    expect(entry!.kind).toBe('http')
+  })
+
+  it('aggregates a published event to its publisher and subscribers', () => {
+    const reg = buildContractRegistry(FIXTURE)
+    const entry = reg.find((e) => e.contract === 'event.user.created.v1')
+    expect(entry!.servers).toEqual(['accesscore'])
+    expect(entry!.callers).toEqual(['auditcore'])
+    expect(entry!.kind).toBe('event')
+  })
+
+  it('handles a contract both produced and consumed by overlapping cells', () => {
+    const reg = buildContractRegistry(FIXTURE)
+    const entry = reg.find((e) => e.contract === 'event.config.entry-upserted.v1')
+    // configcore both publishes and subscribes; auditcore subscribes
+    expect(entry!.servers).toEqual(['configcore'])
+    expect(entry!.callers).toEqual(['auditcore', 'configcore'])
+  })
+
+  it('returns entries sorted by contract id', () => {
+    const reg = buildContractRegistry(FIXTURE)
+    const ids = reg.map((e) => e.contract)
+    expect(ids).toEqual([...ids].sort((a, b) => a.localeCompare(b)))
+  })
+
+  it('produces exactly one entry per unique contract', () => {
+    const reg = buildContractRegistry(FIXTURE)
+    const ids = reg.map((e) => e.contract)
+    expect(new Set(ids).size).toBe(ids.length)
+    expect(ids).toHaveLength(3)
+  })
+
+  it('returns an empty registry for no cells', () => {
+    expect(buildContractRegistry([])).toEqual([])
+  })
+})
+
+describe('useContractsRegistry', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('builds a registry from the real manifest store', () => {
+    const { registry } = useContractsRegistry()
+    expect(registry.value.length).toBeGreaterThan(0)
+    // http.config.get.v1 is served by configcore, called by accesscore in the real manifest
+    const entry = registry.value.find((e) => e.contract === 'http.config.get.v1')
+    expect(entry).toBeDefined()
+    expect(entry!.servers).toContain('configcore')
+    expect(entry!.callers).toContain('accesscore')
+  })
+
+  it('filters by free-text query against contract id', () => {
+    const { filtered, query } = useContractsRegistry()
+    const before = filtered.value.length
+    query.value = 'http.auth.login'
+    expect(filtered.value.length).toBeLessThan(before)
+    expect(filtered.value.every((e) => e.contract.includes('http.auth.login'))).toBe(true)
+  })
+
+  it('filters by free-text query against a cell id', () => {
+    const { filtered, query } = useContractsRegistry()
+    query.value = 'auditcore'
+    expect(filtered.value.length).toBeGreaterThan(0)
+    expect(
+      filtered.value.every(
+        (e) => e.servers.includes('auditcore') || e.callers.includes('auditcore'),
+      ),
+    ).toBe(true)
+  })
+
+  it('filters by kind', () => {
+    const { filtered, kindFilter } = useContractsRegistry()
+    kindFilter.value = 'event'
+    expect(filtered.value.every((e) => e.kind === 'event')).toBe(true)
+    kindFilter.value = 'http'
+    expect(filtered.value.every((e) => e.kind === 'http')).toBe(true)
+  })
+
+  it('selects and resolves a contract for the detail panel', () => {
+    const { select, selectedEntry, selectedContract } = useContractsRegistry()
+    expect(selectedEntry.value).toBeNull()
+    select('http.config.get.v1')
+    expect(selectedContract.value).toBe('http.config.get.v1')
+    expect(selectedEntry.value?.contract).toBe('http.config.get.v1')
+    select(null)
+    expect(selectedEntry.value).toBeNull()
+  })
+})
diff --git a/packages/devboard/src/composables/useContractsRegistry.ts b/packages/devboard/src/composables/useContractsRegistry.ts
new file mode 100644
index 0000000..eb08630
--- /dev/null
+++ b/packages/devboard/src/composables/useContractsRegistry.ts
@@ -0,0 +1,124 @@
+import { computed, readonly, ref, type Ref, type ComputedRef } from 'vue'
+import { useCellsStore } from '../stores/useCellsStore'
+import type { CellEntry } from '../manifest/types'
+
+/**
+ * Contract registry — derived view of the platform's contract topology.
+ *
+ * The registry is built entirely from the static CELL_MANIFEST: each cell's
+ * `produces` (role serve|publish) and `consumes` (role call|subscribe) are
+ * aggregated by contract id into the set of serving cells and calling cells.
+ * No backend call — this is real, derivable data (governance gates and typed
+ * response envelopes, which are NOT derivable, live in src/data as labelled
+ * static snapshots).
+ */
+
+export type ContractKind = 'http' | 'event'
+export type ContractKindFilter = ContractKind | 'all'
+
+export interface ContractRegistryEntry {
+  readonly contract: string
+  /** Transport kind, derived from the contract id prefix. */
+  readonly kind: ContractKind
+  /** Cells that serve/publish this contract, sorted by id. */
+  readonly servers: readonly string[]
+  /** Cells that call/subscribe to this contract, sorted by id. */
+  readonly callers: readonly string[]
+}
+
+/** Classify a contract by its id prefix (`event.*` → event, else http). */
+export function contractKind(contract: string): ContractKind {
+  return contract.startsWith('event.') ? 'event' : 'http'
+}
+
+/**
+ * Aggregate every cell's produces/consumes into one registry entry per
+ * contract id. Pure function — the single place the derivation lives, so it
+ * can be unit-tested against fixtures without a Pinia instance.
+ */
+export function buildContractRegistry(cells: readonly CellEntry[]): ContractRegistryEntry[] {
+  const servers = new Map<string, Set<string>>()
+  const callers = new Map<string, Set<string>>()
+
+  const add = (m: Map<string, Set<string>>, contract: string, cellId: string): void => {
+    let set = m.get(contract)
+    if (!set) {
+      set = new Set<string>()
+      m.set(contract, set)
+    }
+    set.add(cellId)
+  }
+
+  for (const cell of cells) {
+    for (const usage of cell.produces) add(servers, usage.contract, cell.id)
+    for (const usage of cell.consumes) add(callers, usage.contract, cell.id)
+  }
+
+  const all = new Set<string>([...servers.keys(), ...callers.keys()])
+  return [...all]
+    .sort((a, b) => a.localeCompare(b))
+    .map((contract) => ({
+      contract,
+      kind: contractKind(contract),
+      servers: [...(servers.get(contract) ?? [])].sort((a, b) => a.localeCompare(b)),
+      callers: [...(callers.get(contract) ?? [])].sort((a, b) => a.localeCompare(b)),
+    }))
+}
+
+export interface UseContractsRegistry {
+  /** The full registry, sorted by contract id. */
+  readonly registry: ComputedRef<readonly ContractRegistryEntry[]>
+  /** Free-text search across contract id / server / caller. */
+  readonly query: Ref<string>
+  /** Filter by transport kind. */
+  readonly kindFilter: Ref<ContractKindFilter>
+  /** Registry filtered by query + kind. */
+  readonly filtered: ComputedRef<readonly ContractRegistryEntry[]>
+  /** The contract id currently selected for the detail panel, or null. */
+  readonly selectedContract: Readonly<Ref<string | null>>
+  /** The selected registry entry, or null. */
+  readonly selectedEntry: ComputedRef<ContractRegistryEntry | null>
+  /** Select (or clear) the detail contract. */
+  select(contract: string | null): void
+}
+
+export function useContractsRegistry(): UseContractsRegistry {
+  const store = useCellsStore()
+  const registry = computed(() => buildContractRegistry(store.cells))
+
+  const query = ref('')
+  const kindFilter = ref<ContractKindFilter>('all')
+  const selectedContract = ref<string | null>(null)
+
+  const filtered = computed<readonly ContractRegistryEntry[]>(() => {
+    const q = query.value.trim().toLowerCase()
+    return registry.value.filter((entry) => {
+      if (kindFilter.value !== 'all' && entry.kind !== kindFilter.value) return false
+      if (q === '') return true
+      return (
+        entry.contract.toLowerCase().includes(q) ||
+        entry.servers.some((s) => s.toLowerCase().includes(q)) ||
+        entry.callers.some((c) => c.toLowerCase().includes(q))
+      )
+    })
+  })
+
+  const selectedEntry = computed<ContractRegistryEntry | null>(() => {
+    if (selectedContract.value === null) return null
+    return registry.value.find((e) => e.contract === selectedContract.value) ?? null
+  })
+
+  function select(contract: string | null): void {
+    selectedContract.value = contract
+  }
+
+  return {
+    registry,
+    query,
+    kindFilter,
+    filtered,
+    selectedContract: readonly(selectedContract),
+    selectedEntry,
+    select,
+  }
+}
diff --git a/packages/devboard/src/composables/useDepsGraph.spec.ts b/packages/devboard/src/composables/useDepsGraph.spec.ts
new file mode 100644
index 0000000..8c0e311
--- /dev/null
+++ b/packages/devboard/src/composables/useDepsGraph.spec.ts
@@ -0,0 +1,129 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import {
+  buildDependencyEdges,
+  buildDependencyForest,
+  buildDependsOnIndex,
+  useDepsGraph,
+} from './useDepsGraph'
+import type { CellEntry } from '../manifest/types'
+
+const makeCell = (overrides: Partial<CellEntry>): CellEntry => ({
+  id: 'testcore',
+  name: 'TestCore',
+  domain: 'Test',
+  type: 'core',
+  consistencyLevel: 'L2',
+  lifecycle: 'asset',
+  durabilityMode: 'durable',
+  owner: { team: 'platform', role: 'cell-owner' },
+  goStructName: 'TestCore',
+  schemaPrimary: null,
+  requires: [],
+  l0Dependencies: [],
+  smokeTests: [],
+  slices: [],
+  produces: [],
+  consumes: [],
+  dependsOnCells: [],
+  requiredByCells: [],
+  ...overrides,
+})
+
+// configcore (root: nothing depends on it being a leaf) <- accesscore <- auditcore
+const FIXTURE: CellEntry[] = [
+  makeCell({ id: 'accesscore', dependsOnCells: ['configcore'], requiredByCells: ['auditcore'] }),
+  makeCell({
+    id: 'auditcore',
+    dependsOnCells: ['accesscore', 'configcore'],
+    requiredByCells: [],
+  }),
+  makeCell({ id: 'configcore', dependsOnCells: [], requiredByCells: ['accesscore', 'auditcore'] }),
+]
+
+describe('buildDependencyEdges', () => {
+  it('flattens dependsOnCells into a sorted edge list', () => {
+    expect(buildDependencyEdges(FIXTURE)).toEqual([
+      { from: 'accesscore', to: 'configcore' },
+      { from: 'auditcore', to: 'accesscore' },
+      { from: 'auditcore', to: 'configcore' },
+    ])
+  })
+
+  it('returns no edges when no cell has dependencies', () => {
+    expect(buildDependencyEdges([makeCell({ id: 'solo' })])).toEqual([])
+  })
+})
+
+describe('buildDependencyForest', () => {
+  it('roots the forest at cells nothing depends on', () => {
+    const forest = buildDependencyForest(FIXTURE)
+    expect(forest).toHaveLength(1)
+    expect(forest[0]!.id).toBe('auditcore')
+  })
+
+  it('nests dependsOnCells as children', () => {
+    const forest = buildDependencyForest(FIXTURE)
+    const audit = forest[0]!
+    expect(audit.children.map((c) => c.id)).toEqual(['accesscore', 'configcore'])
+    const access = audit.children.find((c) => c.id === 'accesscore')!
+    expect(access.children.map((c) => c.id)).toEqual(['configcore'])
+  })
+
+  it('guards against cycles', () => {
+    const cyclic: CellEntry[] = [
+      makeCell({ id: 'a', dependsOnCells: ['b'], requiredByCells: ['b'] }),
+      makeCell({ id: 'b', dependsOnCells: ['a'], requiredByCells: ['a'] }),
+    ]
+    // No cell has empty requiredByCells → fallback roots = all; must terminate.
+    const forest = buildDependencyForest(cyclic)
+    expect(forest.length).toBeGreaterThan(0)
+    // Depth is bounded — a path never repeats an id, so depth ≤ cells + 1.
+    const depth = (n: { children: readonly { children: readonly unknown[] }[] }): number =>
+      1 + Math.max(0, ...n.children.map((c) => depth(c as never)))
+    expect(depth(forest[0]! as never)).toBeLessThanOrEqual(cyclic.length + 1)
+  })
+})
+
+describe('buildDependsOnIndex', () => {
+  it('answers dependency membership in O(1)', () => {
+    const dependsOn = buildDependsOnIndex(FIXTURE)
+    expect(dependsOn('auditcore', 'accesscore')).toBe(true)
+    expect(dependsOn('auditcore', 'configcore')).toBe(true)
+    expect(dependsOn('configcore', 'auditcore')).toBe(false)
+    expect(dependsOn('accesscore', 'auditcore')).toBe(false)
+  })
+
+  it('returns false for unknown cells', () => {
+    const dependsOn = buildDependsOnIndex(FIXTURE)
+    expect(dependsOn('ghost', 'configcore')).toBe(false)
+  })
+})
+
+describe('useDepsGraph', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('exposes edges derived from the real manifest', () => {
+    const { edges } = useDepsGraph()
+    // Real manifest: accesscore→configcore, auditcore→accesscore, auditcore→configcore
+    expect(edges.value).toContainEqual({ from: 'accesscore', to: 'configcore' })
+    expect(edges.value).toContainEqual({ from: 'auditcore', to: 'configcore' })
+  })
+
+  it('exposes a non-empty cell list', () => {
+    const { cells } = useDepsGraph()
+    expect(cells.value.length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('selects and resolves a cell', () => {
+    const { select, selectedCell, selectedCellId } = useDepsGraph()
+    expect(selectedCell.value).toBeNull()
+    select('configcore')
+    expect(selectedCellId.value).toBe('configcore')
+    expect(selectedCell.value?.id).toBe('configcore')
+    select(null)
+    expect(selectedCell.value).toBeNull()
+  })
+})
diff --git a/packages/devboard/src/composables/useDepsGraph.ts b/packages/devboard/src/composables/useDepsGraph.ts
new file mode 100644
index 0000000..821046f
--- /dev/null
+++ b/packages/devboard/src/composables/useDepsGraph.ts
@@ -0,0 +1,112 @@
+import { computed, readonly, ref, type Ref, type ComputedRef } from 'vue'
+import { useCellsStore } from '../stores/useCellsStore'
+import type { CellEntry } from '../manifest/types'
+
+/**
+ * Cell dependency graph — derived from the static CELL_MANIFEST.
+ *
+ * `dependsOnCells` is the canonical edge source (cross-cell consume→produce
+ * resolution done at manifest-generation time); `requiredByCells` is its
+ * mirror. The four explorer views (list / graph / tree / matrix) all project
+ * this single edge set — no backend, no `go mod graph`, just the real cell
+ * topology the manifest already carries.
+ */
+
+export interface DependencyEdge {
+  /** The dependent cell. */
+  readonly from: string
+  /** The cell being depended upon. */
+  readonly to: string
+}
+
+export interface DependencyTreeNode {
+  readonly id: string
+  readonly children: readonly DependencyTreeNode[]
+}
+
+/** Flatten every cell's `dependsOnCells` into a sorted edge list. */
+export function buildDependencyEdges(cells: readonly CellEntry[]): DependencyEdge[] {
+  const edges: DependencyEdge[] = []
+  for (const cell of cells) {
+    for (const to of cell.dependsOnCells) edges.push({ from: cell.id, to })
+  }
+  return edges.sort((a, b) => a.from.localeCompare(b.from) || a.to.localeCompare(b.to))
+}
+
+/**
+ * Build a dependency forest. Roots are cells nothing else depends on
+ * (`requiredByCells` empty) — the top of the dependency chains; each node's
+ * children are its `dependsOnCells`. A path set guards against cycles. Falls
+ * back to all cells as roots if every cell is depended upon (pure cycle).
+ */
+export function buildDependencyForest(cells: readonly CellEntry[]): DependencyTreeNode[] {
+  const byId = new Map<string, CellEntry>(cells.map((c) => [c.id, c]))
+  const rootCells = cells.filter((c) => c.requiredByCells.length === 0)
+  const roots = rootCells.length > 0 ? rootCells : cells
+
+  const build = (id: string, path: ReadonlySet<string>): DependencyTreeNode => {
+    const cell = byId.get(id)
+    if (!cell || path.has(id)) return { id, children: [] }
+    const next = new Set(path)
+    next.add(id)
+    return {
+      id,
+      children: [...cell.dependsOnCells]
+        .sort((a, b) => a.localeCompare(b))
+        .map((dep) => build(dep, next)),
+    }
+  }
+
+  return roots.map((r) => build(r.id, new Set<string>())).sort((a, b) => a.id.localeCompare(b.id))
+}
+
+/**
+ * Build an O(1) `dependsOn(from, to)` predicate for the matrix view.
+ */
+export function buildDependsOnIndex(
+  cells: readonly CellEntry[],
+): (from: string, to: string) => boolean {
+  const index = new Map<string, ReadonlySet<string>>(
+    cells.map((c) => [c.id, new Set(c.dependsOnCells)]),
+  )
+  return (from, to) => index.get(from)?.has(to) ?? false
+}
+
+export interface UseDepsGraph {
+  readonly cells: ComputedRef<readonly CellEntry[]>
+  readonly edges: ComputedRef<readonly DependencyEdge[]>
+  readonly forest: ComputedRef<readonly DependencyTreeNode[]>
+  /** O(1) matrix predicate: does `from` depend on `to`? */
+  readonly dependsOn: ComputedRef<(from: string, to: string) => boolean>
+  readonly selectedCellId: Readonly<Ref<string | null>>
+  readonly selectedCell: ComputedRef<CellEntry | null>
+  select(id: string | null): void
+}
+
+export function useDepsGraph(): UseDepsGraph {
+  const store = useCellsStore()
+  const cells = computed(() => store.cells)
+  const edges = computed(() => buildDependencyEdges(store.cells))
+  const forest = computed(() => buildDependencyForest(store.cells))
+  const dependsOn = computed(() => buildDependsOnIndex(store.cells))
+
+  const selectedCellId = ref<string | null>(null)
+  const selectedCell = computed<CellEntry | null>(() => {
+    if (selectedCellId.value === null) return null
+    return store.cells.find((c) => c.id === selectedCellId.value) ?? null
+  })
+
+  function select(id: string | null): void {
+    selectedCellId.value = id
+  }
+
+  return {
+    cells,
+    edges,
+    forest,
+    dependsOn,
+    selectedCellId: readonly(selectedCellId),
+    selectedCell,
+    select,
+  }
+}
diff --git a/packages/devboard/src/data/coverageMatrix.spec.ts b/packages/devboard/src/data/coverageMatrix.spec.ts
new file mode 100644
index 0000000..895209d
--- /dev/null
+++ b/packages/devboard/src/data/coverageMatrix.spec.ts
@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import {
+  COVERAGE_MATRIX,
+  COVERAGE_STATUSES,
+  coverageCounts,
+  type CoverageSection,
+} from './coverageMatrix'
+
+describe('COVERAGE_MATRIX', () => {
+  it('has at least one section with rows', () => {
+    expect(COVERAGE_MATRIX.length).toBeGreaterThan(0)
+    expect(COVERAGE_MATRIX.every((s) => s.rows.length > 0)).toBe(true)
+  })
+
+  it('uses only known statuses', () => {
+    for (const section of COVERAGE_MATRIX) {
+      for (const row of section.rows) {
+        expect(COVERAGE_STATUSES).toContain(row.status)
+      }
+    }
+  })
+
+  it('uses unique route paths', () => {
+    const routes = COVERAGE_MATRIX.flatMap((s) => s.rows.map((r) => r.route))
+    expect(new Set(routes).size).toBe(routes.length)
+  })
+
+  it('matched rows have a shipped web ref', () => {
+    for (const section of COVERAGE_MATRIX) {
+      for (const row of section.rows) {
+        if (row.status === 'matched') expect(row.web).not.toBeNull()
+      }
+    }
+  })
+
+  it('design-only rows have no web ref', () => {
+    for (const section of COVERAGE_MATRIX) {
+      for (const row of section.rows) {
+        if (row.status === 'design-only') expect(row.web).toBeNull()
+      }
+    }
+  })
+
+  it('references an i18n capabilityKey + section titleKey', () => {
+    for (const section of COVERAGE_MATRIX) {
+      expect(section.titleKey).toMatch(/^coverage\.section\./)
+      for (const row of section.rows) {
+        expect(row.capabilityKey).toMatch(/^coverage\.cap\./)
+      }
+    }
+  })
+})
+
+describe('coverageCounts', () => {
+  it('totals all rows across sections', () => {
+    const counts = coverageCounts()
+    const expectedTotal = COVERAGE_MATRIX.reduce((sum, s) => sum + s.rows.length, 0)
+    expect(counts.total).toBe(expectedTotal)
+  })
+
+  it('per-status counts sum to the total', () => {
+    const counts = coverageCounts()
+    const sum =
+      counts.matched +
+      counts.partial +
+      counts['design-only'] +
+      counts['backend-only'] +
+      counts['out-of-scope']
+    expect(sum).toBe(counts.total)
+  })
+
+  it('handles an empty matrix', () => {
+    const empty: CoverageSection[] = []
+    const counts = coverageCounts(empty)
+    expect(counts.total).toBe(0)
+    expect(counts.matched).toBe(0)
+  })
+})
diff --git a/packages/devboard/src/data/coverageMatrix.ts b/packages/devboard/src/data/coverageMatrix.ts
new file mode 100644
index 0000000..c76cd41
--- /dev/null
+++ b/packages/devboard/src/data/coverageMatrix.ts
@@ -0,0 +1,222 @@
+/**
+ * Coverage matrix — STATIC, hand-maintained meta data.
+ *
+ * This page is gocell-web's own implementation-progress board: which design
+ * routes have shipped as real Vue views vs which remain design-only. It does
+ * NOT describe backend cells (orthogonal to CELL_MANIFEST) and is curated by
+ * hand against the router — the legitimate truth source is the design file
+ * `dev-coverage.jsx` (PRD §514). `route`/`web`/`design` are code & route
+ * literals (not translated); the capability name + status are i18n keys.
+ */
+
+export type CoverageStatus = 'matched' | 'partial' | 'design-only' | 'backend-only' | 'out-of-scope'
+
+export interface CoverageRow {
+  /** Route path literal, e.g. '/login'. */
+  readonly route: string
+  /** i18n key for the capability name. */
+  readonly capabilityKey: string
+  /** Shipped Vue implementation ref (import subpath), or null if not built. */
+  readonly web: string | null
+  /** Design source ref (jsx file), or null if no design. */
+  readonly design: string | null
+  readonly status: CoverageStatus
+}
+
+export interface CoverageSection {
+  /** i18n key for the section heading. */
+  readonly titleKey: string
+  readonly rows: readonly CoverageRow[]
+}
+
+export const COVERAGE_MATRIX: readonly CoverageSection[] = [
+  {
+    titleKey: 'coverage.section.auth',
+    rows: [
+      {
+        route: '/login',
+        capabilityKey: 'coverage.cap.login',
+        web: '@gocell/access/views/login',
+        design: 'v1-linear.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/first-run-setup',
+        capabilityKey: 'coverage.cap.firstRun',
+        web: '@gocell/access/views/first-run',
+        design: 'first-run-setup.jsx',
+        status: 'matched',
+      },
+    ],
+  },
+  {
+    titleKey: 'coverage.section.meta',
+    rows: [
+      {
+        route: '/coverage',
+        capabilityKey: 'coverage.cap.coverage',
+        web: '@gocell/devboard/views/coverage',
+        design: 'dev-coverage.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/',
+        capabilityKey: 'coverage.cap.home',
+        web: 'apps/web/views/HomeView.vue',
+        design: 'dev-observe.jsx',
+        status: 'partial',
+      },
+    ],
+  },
+  {
+    titleKey: 'coverage.section.access',
+    rows: [
+      {
+        route: '/access/identities',
+        capabilityKey: 'coverage.cap.identities',
+        web: '@gocell/access/views/identities',
+        design: 'dev-pages.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/access/policies',
+        capabilityKey: 'coverage.cap.policies',
+        web: '@gocell/access/views/policies',
+        design: 'dev-pages.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/access/decisions',
+        capabilityKey: 'coverage.cap.decisions',
+        web: null,
+        design: 'dev-extras.jsx',
+        status: 'design-only',
+      },
+    ],
+  },
+  {
+    titleKey: 'coverage.section.operate',
+    rows: [
+      {
+        route: '/audit',
+        capabilityKey: 'coverage.cap.audit',
+        web: '@gocell/audit/views/audit',
+        design: 'dev-audit.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/config',
+        capabilityKey: 'coverage.cap.config',
+        web: '@gocell/config/views/config',
+        design: 'dev-pages.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/flags',
+        capabilityKey: 'coverage.cap.flags',
+        web: '@gocell/config/views/flags',
+        design: 'dev-pages.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/cells',
+        capabilityKey: 'coverage.cap.cells',
+        web: '@gocell/devboard/views/cells-list',
+        design: 'dev-cell.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/cells/:id',
+        capabilityKey: 'coverage.cap.cellDetail',
+        web: '@gocell/devboard/views/cell-detail',
+        design: 'dev-cell.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/groups',
+        capabilityKey: 'coverage.cap.groups',
+        web: '@gocell/devboard/views/groups',
+        design: 'dev-cell.jsx',
+        status: 'partial',
+      },
+    ],
+  },
+  {
+    titleKey: 'coverage.section.build',
+    rows: [
+      {
+        route: '/contracts',
+        capabilityKey: 'coverage.cap.contracts',
+        web: '@gocell/devboard/views/contracts',
+        design: 'dev-extras3.jsx',
+        status: 'matched',
+      },
+      {
+        route: '/deps',
+        capabilityKey: 'coverage.cap.deps',
+        web: '@gocell/devboard/views/deps',
+        design: 'dev-extras3.jsx',
+        status: 'partial',
+      },
+      {
+        route: '/workflow',
+        capabilityKey: 'coverage.cap.workflow',
+        web: null,
+        design: 'dev-develop.jsx',
+        status: 'design-only',
+      },
+      {
+        route: '/ai',
+        capabilityKey: 'coverage.cap.ai',
+        web: null,
+        design: 'dev-wave4.jsx',
+        status: 'design-only',
+      },
+    ],
+  },
+  {
+    titleKey: 'coverage.section.observe',
+    rows: [
+      {
+        route: '/observe',
+        capabilityKey: 'coverage.cap.observe',
+        web: null,
+        design: 'dev-observe.jsx',
+        status: 'backend-only',
+      },
+    ],
+  },
+]
+
+export type CoverageCounts = Readonly<Record<CoverageStatus, number>> & { readonly total: number }
+
+const STATUSES: readonly CoverageStatus[] = [
+  'matched',
+  'partial',
+  'design-only',
+  'backend-only',
+  'out-of-scope',
+]
+
+/** Tally rows by status across all sections. */
+export function coverageCounts(
+  matrix: readonly CoverageSection[] = COVERAGE_MATRIX,
+): CoverageCounts {
+  const counts: Record<CoverageStatus, number> = {
+    matched: 0,
+    partial: 0,
+    'design-only': 0,
+    'backend-only': 0,
+    'out-of-scope': 0,
+  }
+  let total = 0
+  for (const section of matrix) {
+    for (const row of section.rows) {
+      counts[row.status] += 1
+      total += 1
+    }
+  }
+  return { ...counts, total }
+}
+
+export { STATUSES as COVERAGE_STATUSES }
diff --git a/packages/devboard/src/data/governanceGates.spec.ts b/packages/devboard/src/data/governanceGates.spec.ts
new file mode 100644
index 0000000..52fdc7d
--- /dev/null
+++ b/packages/devboard/src/data/governanceGates.spec.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { GOVERNANCE_GATES } from './governanceGates'
+
+describe('GOVERNANCE_GATES snapshot', () => {
+  it('covers CH-01 through CH-06', () => {
+    expect(GOVERNANCE_GATES.map((g) => g.id)).toEqual([
+      'CH-01',
+      'CH-02',
+      'CH-03',
+      'CH-04',
+      'CH-05',
+      'CH-06',
+    ])
+  })
+
+  it('has unique gate ids', () => {
+    const ids = GOVERNANCE_GATES.map((g) => g.id)
+    expect(new Set(ids).size).toBe(ids.length)
+  })
+
+  it('uses only valid verdicts and passed ≤ total', () => {
+    for (const gate of GOVERNANCE_GATES) {
+      expect(['pass', 'warn', 'fail']).toContain(gate.verdict)
+      expect(gate.passed).toBeLessThanOrEqual(gate.total)
+      expect(gate.passed).toBeGreaterThanOrEqual(0)
+    }
+  })
+
+  it('marks only CH-06 as new', () => {
+    const newOnes = GOVERNANCE_GATES.filter((g) => g.isNew).map((g) => g.id)
+    expect(newOnes).toEqual(['CH-06'])
+  })
+
+  it('references an i18n descKey for every gate', () => {
+    for (const gate of GOVERNANCE_GATES) {
+      expect(gate.descKey).toMatch(/^contracts\.gates\./)
+    }
+  })
+})
diff --git a/packages/devboard/src/data/governanceGates.ts b/packages/devboard/src/data/governanceGates.ts
new file mode 100644
index 0000000..022a02d
--- /dev/null
+++ b/packages/devboard/src/data/governanceGates.ts
@@ -0,0 +1,39 @@
+/**
+ * Governance gates — STATIC SNAPSHOT.
+ *
+ * The CH-01..CH-06 contract-health gates are produced by the backend
+ * `gocell validate --strict` pipeline; there is no HTTP endpoint exposing
+ * their live verdicts yet. This is a labelled snapshot for the /contracts
+ * page — the UI must render it under a visible "snapshot" affordance and must
+ * NOT present it as a live result. Descriptions are i18n keys (zero hardcode).
+ */
+
+export type GateVerdict = 'pass' | 'warn' | 'fail'
+
+export interface GovernanceGate {
+  /** Gate id, e.g. 'CH-01'. */
+  readonly id: string
+  /** i18n key for the human description of what the gate checks. */
+  readonly descKey: string
+  readonly verdict: GateVerdict
+  readonly passed: number
+  readonly total: number
+  /** Recently-introduced gate (renders a "new" affordance). */
+  readonly isNew?: boolean
+}
+
+export const GOVERNANCE_GATES: readonly GovernanceGate[] = [
+  { id: 'CH-01', descKey: 'contracts.gates.ch01', verdict: 'pass', passed: 45, total: 45 },
+  { id: 'CH-02', descKey: 'contracts.gates.ch02', verdict: 'pass', passed: 45, total: 45 },
+  { id: 'CH-03', descKey: 'contracts.gates.ch03', verdict: 'pass', passed: 45, total: 45 },
+  { id: 'CH-04', descKey: 'contracts.gates.ch04', verdict: 'warn', passed: 44, total: 45 },
+  { id: 'CH-05', descKey: 'contracts.gates.ch05', verdict: 'pass', passed: 45, total: 45 },
+  {
+    id: 'CH-06',
+    descKey: 'contracts.gates.ch06',
+    verdict: 'pass',
+    passed: 45,
+    total: 45,
+    isNew: true,
+  },
+] as const
diff --git a/packages/devboard/src/data/responseEnvelopes.spec.ts b/packages/devboard/src/data/responseEnvelopes.spec.ts
new file mode 100644
index 0000000..a21a371
--- /dev/null
+++ b/packages/devboard/src/data/responseEnvelopes.spec.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { RESPONSE_ENVELOPES, responseEnvelopeFor } from './responseEnvelopes'
+
+describe('RESPONSE_ENVELOPES snapshot', () => {
+  it('keys are http.* contract ids', () => {
+    for (const key of Object.keys(RESPONSE_ENVELOPES)) {
+      expect(key).toMatch(/^http\./)
+    }
+  })
+
+  it('every entry has a valid kind matching its status class', () => {
+    for (const entries of Object.values(RESPONSE_ENVELOPES)) {
+      for (const e of entries) {
+        expect(['2xx', '4xx', '5xx']).toContain(e.kind)
+        const cls = `${Math.floor(e.status / 100)}xx`
+        expect(e.kind).toBe(cls)
+      }
+    }
+  })
+
+  it('each contract has exactly one 2xx success entry', () => {
+    for (const entries of Object.values(RESPONSE_ENVELOPES)) {
+      expect(entries.filter((e) => e.kind === '2xx')).toHaveLength(1)
+    }
+  })
+})
+
+describe('responseEnvelopeFor', () => {
+  it('returns entries for a known contract', () => {
+    const entries = responseEnvelopeFor('http.auth.login.v1')
+    expect(entries).not.toBeNull()
+    expect(entries!.length).toBeGreaterThan(0)
+  })
+
+  it('returns null for a contract without a snapshot', () => {
+    expect(responseEnvelopeFor('event.user.created.v1')).toBeNull()
+  })
+})
diff --git a/packages/devboard/src/data/responseEnvelopes.ts b/packages/devboard/src/data/responseEnvelopes.ts
new file mode 100644
index 0000000..9deeffe
--- /dev/null
+++ b/packages/devboard/src/data/responseEnvelopes.ts
@@ -0,0 +1,52 @@
+/**
+ * Typed response envelopes — STATIC SNAPSHOT.
+ *
+ * Each HTTP contract's response set (status → generated response struct) is
+ * declared in the backend contract.yaml and surfaced by `gocell validate
+ * --strict` (gate CH-06 enforces the 1:1 bijection). No HTTP endpoint exposes
+ * it yet, so this is a labelled snapshot covering a representative subset of
+ * the real contract ids in CELL_MANIFEST. Struct names are code identifiers
+ * (not translated); the kind drives the semantic colour + screen-reader text.
+ */
+
+export type EnvelopeKind = '2xx' | '4xx' | '5xx'
+
+export interface ResponseEnvelopeEntry {
+  readonly status: number
+  /** Generated response struct name (code identifier — not translated). */
+  readonly object: string
+  readonly kind: EnvelopeKind
+}
+
+/** contractId → ordered response entries. */
+export const RESPONSE_ENVELOPES: Readonly<Record<string, readonly ResponseEnvelopeEntry[]>> = {
+  'http.auth.login.v1': [
+    { status: 200, object: 'LoginResponse', kind: '2xx' },
+    { status: 400, object: 'Login400ErrorResponse', kind: '4xx' },
+    { status: 401, object: 'Login401ErrorResponse', kind: '4xx' },
+    { status: 429, object: 'Login429ErrorResponse', kind: '4xx' },
+  ],
+  'http.auth.user.create.v1': [
+    { status: 201, object: 'UserCreateResponse', kind: '2xx' },
+    { status: 400, object: 'UserCreate400ErrorResponse', kind: '4xx' },
+    { status: 409, object: 'UserCreate409ErrorResponse', kind: '4xx' },
+  ],
+  'http.audit.list.v1': [
+    { status: 200, object: 'AuditListResponse', kind: '2xx' },
+    { status: 400, object: 'AuditList400ErrorResponse', kind: '4xx' },
+    { status: 500, object: 'AuditList500ErrorResponse', kind: '5xx' },
+  ],
+  'http.config.get.v1': [
+    { status: 200, object: 'ConfigGetResponse', kind: '2xx' },
+    { status: 404, object: 'ConfigGet404ErrorResponse', kind: '4xx' },
+  ],
+  'http.config.publish.v1': [
+    { status: 200, object: 'ConfigPublishResponse', kind: '2xx' },
+    { status: 409, object: 'ConfigPublish409ErrorResponse', kind: '4xx' },
+  ],
+} as const
+
+/** Response envelope entries for a contract, or null if no snapshot exists. */
+export function responseEnvelopeFor(contract: string): readonly ResponseEnvelopeEntry[] | null {
+  return RESPONSE_ENVELOPES[contract] ?? null
+}
diff --git a/packages/devboard/src/data/smartGroups.spec.ts b/packages/devboard/src/data/smartGroups.spec.ts
new file mode 100644
index 0000000..f0a281b
--- /dev/null
+++ b/packages/devboard/src/data/smartGroups.spec.ts
@@ -0,0 +1,122 @@
+import { describe, it, expect } from 'vitest'
+import { SMART_GROUPS, cellFieldValue, evalPredicate, groupMembers } from './smartGroups'
+import type { CellEntry } from '../manifest/types'
+
+const makeCell = (overrides: Partial<CellEntry>): CellEntry => ({
+  id: 'testcore',
+  name: 'TestCore',
+  domain: 'Test',
+  type: 'core',
+  consistencyLevel: 'L2',
+  lifecycle: 'asset',
+  durabilityMode: 'durable',
+  owner: { team: 'platform', role: 'cell-owner' },
+  goStructName: 'TestCore',
+  schemaPrimary: null,
+  requires: [],
+  l0Dependencies: [],
+  smokeTests: [],
+  slices: [],
+  produces: [],
+  consumes: [],
+  dependsOnCells: [],
+  requiredByCells: [],
+  ...overrides,
+})
+
+const ACCESS = makeCell({
+  id: 'accesscore',
+  domain: 'Access',
+  consistencyLevel: 'L3',
+  dependsOnCells: ['configcore'],
+  produces: [{ contract: 'http.auth.login.v1', role: 'serve' }],
+  consumes: [
+    { contract: 'http.config.get.v1', role: 'call' },
+    { contract: 'event.role.assigned.v1', role: 'subscribe' },
+    { contract: 'event.role.revoked.v1', role: 'subscribe' },
+    { contract: 'event.config.entry-deleted.v1', role: 'subscribe' },
+    { contract: 'event.config.entry-upserted.v1', role: 'subscribe' },
+  ],
+})
+const CONFIG = makeCell({
+  id: 'configcore',
+  domain: 'Config',
+  consistencyLevel: 'L3',
+  durabilityMode: 'durable',
+  dependsOnCells: [],
+})
+const AUDIT = makeCell({
+  id: 'auditcore',
+  domain: 'Audit',
+  consistencyLevel: 'L2',
+  dependsOnCells: ['accesscore', 'configcore'],
+})
+
+const CELLS = [ACCESS, CONFIG, AUDIT]
+
+describe('cellFieldValue', () => {
+  it('maps tier to consistencyLevel', () => {
+    expect(cellFieldValue(ACCESS, 'tier')).toBe('L3')
+  })
+  it('maps dependsOnCount to dependsOnCells length', () => {
+    expect(cellFieldValue(ACCESS, 'dependsOnCount')).toBe(1)
+    expect(cellFieldValue(CONFIG, 'dependsOnCount')).toBe(0)
+  })
+  it('maps consumesCount to consumes length', () => {
+    expect(cellFieldValue(ACCESS, 'consumesCount')).toBe(5)
+  })
+  it('maps domain and durability directly', () => {
+    expect(cellFieldValue(ACCESS, 'domain')).toBe('Access')
+    expect(cellFieldValue(CONFIG, 'durability')).toBe('durable')
+  })
+})
+
+describe('evalPredicate', () => {
+  it('eq matches string fields', () => {
+    expect(evalPredicate(ACCESS, { field: 'domain', op: 'eq', value: 'Access' })).toBe(true)
+    expect(evalPredicate(AUDIT, { field: 'domain', op: 'eq', value: 'Access' })).toBe(false)
+  })
+  it('gte matches numeric fields', () => {
+    expect(evalPredicate(ACCESS, { field: 'consumesCount', op: 'gte', value: 5 })).toBe(true)
+    expect(evalPredicate(AUDIT, { field: 'consumesCount', op: 'gte', value: 5 })).toBe(false)
+  })
+  it('numeric ops return false against non-numeric fields', () => {
+    expect(evalPredicate(ACCESS, { field: 'domain', op: 'gte', value: 5 })).toBe(false)
+  })
+  it('neq inverts eq', () => {
+    expect(evalPredicate(AUDIT, { field: 'domain', op: 'neq', value: 'Access' })).toBe(true)
+  })
+})
+
+describe('groupMembers', () => {
+  it('returns cells satisfying all predicates (real membership)', () => {
+    const access = SMART_GROUPS.find((g) => g.id === 'sg-access')!
+    expect(groupMembers(access, CELLS).map((c) => c.id)).toEqual(['accesscore'])
+  })
+
+  it('foundation group selects cells with no dependencies', () => {
+    const foundation = SMART_GROUPS.find((g) => g.id === 'sg-foundation')!
+    expect(groupMembers(foundation, CELLS).map((c) => c.id)).toEqual(['configcore'])
+  })
+
+  it('strong-consistency group selects L3 cells', () => {
+    const strong = SMART_GROUPS.find((g) => g.id === 'sg-strong-consistency')!
+    expect(
+      groupMembers(strong, CELLS)
+        .map((c) => c.id)
+        .sort(),
+    ).toEqual(['accesscore', 'configcore'])
+  })
+})
+
+describe('SMART_GROUPS definitions', () => {
+  it('have unique ids and i18n name/desc keys', () => {
+    const ids = SMART_GROUPS.map((g) => g.id)
+    expect(new Set(ids).size).toBe(ids.length)
+    for (const g of SMART_GROUPS) {
+      expect(g.nameKey).toMatch(/^groups\.defs\./)
+      expect(g.descKey).toMatch(/^groups\.defs\./)
+      expect(g.predicates.length).toBeGreaterThan(0)
+    }
+  })
+})
diff --git a/packages/devboard/src/data/smartGroups.ts b/packages/devboard/src/data/smartGroups.ts
new file mode 100644
index 0000000..d7a2c67
--- /dev/null
+++ b/packages/devboard/src/data/smartGroups.ts
@@ -0,0 +1,114 @@
+/**
+ * Smart Groups — STATIC group definitions, REAL membership.
+ *
+ * Preview-level feature: the group rules (predicate sets) are hand-authored
+ * here, but membership is evaluated live against the real CELL_MANIFEST using
+ * only derivable cell fields — no fabricated runtime metrics (QPS / health /
+ * p95). This keeps the preview honest: every member shown is a real cell that
+ * actually satisfies the predicate. Names/descriptions are i18n keys.
+ */
+
+import type { CellEntry } from '../manifest/types'
+
+/** Cell fields a predicate can match against — all derivable from the manifest. */
+export type CellField =
+  | 'domain'
+  | 'tier'
+  | 'durability'
+  | 'dependsOnCount'
+  | 'producesCount'
+  | 'consumesCount'
+
+export type PredicateOp = 'eq' | 'neq' | 'gte' | 'lte' | 'gt' | 'lt'
+
+export interface Predicate {
+  readonly field: CellField
+  readonly op: PredicateOp
+  readonly value: string | number
+}
+
+export interface SmartGroup {
+  readonly id: string
+  /** i18n key for the group name. */
+  readonly nameKey: string
+  /** i18n key for the group description. */
+  readonly descKey: string
+  /** AND-combined predicates. */
+  readonly predicates: readonly Predicate[]
+}
+
+export const SMART_GROUPS: readonly SmartGroup[] = [
+  {
+    id: 'sg-access',
+    nameKey: 'groups.defs.access.name',
+    descKey: 'groups.defs.access.desc',
+    predicates: [{ field: 'domain', op: 'eq', value: 'Access' }],
+  },
+  {
+    id: 'sg-strong-consistency',
+    nameKey: 'groups.defs.strongConsistency.name',
+    descKey: 'groups.defs.strongConsistency.desc',
+    predicates: [{ field: 'tier', op: 'eq', value: 'L3' }],
+  },
+  {
+    id: 'sg-foundation',
+    nameKey: 'groups.defs.foundation.name',
+    descKey: 'groups.defs.foundation.desc',
+    predicates: [{ field: 'dependsOnCount', op: 'eq', value: 0 }],
+  },
+  {
+    id: 'sg-high-fanin',
+    nameKey: 'groups.defs.highFanin.name',
+    descKey: 'groups.defs.highFanin.desc',
+    predicates: [{ field: 'consumesCount', op: 'gte', value: 5 }],
+  },
+  {
+    id: 'sg-durable',
+    nameKey: 'groups.defs.durable.name',
+    descKey: 'groups.defs.durable.desc',
+    predicates: [{ field: 'durability', op: 'eq', value: 'durable' }],
+  },
+]
+
+/** Resolve a derivable field value for a cell. */
+export function cellFieldValue(cell: CellEntry, field: CellField): string | number {
+  switch (field) {
+    case 'domain':
+      return cell.domain
+    case 'tier':
+      return cell.consistencyLevel
+    case 'durability':
+      return cell.durabilityMode
+    case 'dependsOnCount':
+      return cell.dependsOnCells.length
+    case 'producesCount':
+      return cell.produces.length
+    case 'consumesCount':
+      return cell.consumes.length
+  }
+}
+
+/** Evaluate a single predicate against a cell. */
+export function evalPredicate(cell: CellEntry, predicate: Predicate): boolean {
+  const actual = cellFieldValue(cell, predicate.field)
+  const { op, value } = predicate
+  switch (op) {
+    case 'eq':
+      return actual === value
+    case 'neq':
+      return actual !== value
+    case 'gte':
+      return typeof actual === 'number' && typeof value === 'number' && actual >= value
+    case 'lte':
+      return typeof actual === 'number' && typeof value === 'number' && actual <= value
+    case 'gt':
+      return typeof actual === 'number' && typeof value === 'number' && actual > value
+    case 'lt':
+      return typeof actual === 'number' && typeof value === 'number' && actual < value
+  }
+}
+
+/** Cells that satisfy ALL of a group's predicates (real membership). */
+export function groupMembers(group: SmartGroup, cells: readonly CellEntry[]): CellEntry[] {
+  return cells.filter((cell) => group.predicates.every((p) => evalPredicate(cell, p)))
+}
diff --git a/packages/devboard/src/views/ContractsView.spec.ts b/packages/devboard/src/views/ContractsView.spec.ts
new file mode 100644
index 0000000..2b999e4
--- /dev/null
+++ b/packages/devboard/src/views/ContractsView.spec.ts
@@ -0,0 +1,171 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { defineComponent } from 'vue'
+import ContractsView from './ContractsView.vue'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (k: string, params?: Record<string, unknown>) => {
+      if (params !== undefined) return `${k}(${JSON.stringify(params)})`
+      return k
+    },
+  }),
+}))
+
+// Stub RouterLink
+const RouterLinkStub = defineComponent({
+  name: 'RouterLink',
+  props: { to: { type: String, required: true } },
+  template: '<a :href="to"><slot /></a>',
+})
+
+// Stub GovernanceGatesPanel so we can test its presence without testing its internals
+const GovernanceGatesPanelStub = defineComponent({
+  name: 'GovernanceGatesPanel',
+  template: '<div class="gates-panel-stub" data-testid="governance-gates-panel"></div>',
+})
+
+function mountView() {
+  return mount(ContractsView, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,
+          stubActions: false,
+        }),
+      ],
+      stubs: {
+        RouterLink: RouterLinkStub,
+        GovernanceGatesPanel: GovernanceGatesPanelStub,
+      },
+    },
+  })
+}
+
+describe('ContractsView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders table rows equal to the registry length', () => {
+    const wrapper = mountView()
+    const rows = wrapper.findAll('tbody tr')
+    // The real manifest has contracts; rows should be > 0
+    expect(rows.length).toBeGreaterThan(0)
+    // The count badge in the header should reflect the registry count
+    expect(wrapper.text()).toContain('contracts.count')
+  })
+
+  it('thead th elements all have scope="col"', () => {
+    const wrapper = mountView()
+    const headers = wrapper.findAll('thead th')
+    expect(headers.length).toBeGreaterThan(0)
+    headers.forEach((th) => {
+      expect(th.attributes('scope')).toBe('col')
+    })
+  })
+
+  it('search input has an associated label (for/id pair)', () => {
+    const wrapper = mountView()
+    const input = wrapper.find('input[type="search"]')
+    expect(input.exists()).toBe(true)
+    const inputId = input.attributes('id')
+    expect(inputId).toBeTruthy()
+    const label = wrapper.find(`label[for="${inputId}"]`)
+    expect(label.exists()).toBe(true)
+  })
+
+  it('typing a query filters the displayed rows', async () => {
+    const wrapper = mountView()
+    const allRows = wrapper.findAll('tbody tr')
+    const totalRows = allRows.length
+    expect(totalRows).toBeGreaterThan(1)
+
+    const input = wrapper.find('input[type="search"]')
+    await input.setValue('http.auth.login')
+    const filteredRows = wrapper.findAll('tbody tr')
+    expect(filteredRows.length).toBeLessThan(totalRows)
+  })
+
+  it('shows empty state when query has no matches', async () => {
+    const wrapper = mountView()
+    const input = wrapper.find('input[type="search"]')
+    await input.setValue('zzz-no-match-at-all')
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows.length).toBe(1)
+    expect(wrapper.text()).toContain('contracts.empty')
+  })
+
+  it('clicking a row shows the detail aside with that contract', async () => {
+    const wrapper = mountView()
+    // Initially no detail aside visible
+    expect(wrapper.find('[data-testid="contract-detail"]').exists()).toBe(false)
+    // Click the first data row
+    const firstRow = wrapper.find('tbody tr')
+    await firstRow.trigger('click')
+    // Detail aside should now appear
+    const detail = wrapper.find('[data-testid="contract-detail"]')
+    expect(detail.exists()).toBe(true)
+  })
+
+  it('snapshot banner exists with role="note"', () => {
+    const wrapper = mountView()
+    const banner = wrapper.find('[role="note"]')
+    expect(banner.exists()).toBe(true)
+    expect(banner.text()).toContain('contracts.snapshot.note')
+  })
+
+  it('contains the GovernanceGatesPanel component', () => {
+    const wrapper = mountView()
+    const panel = wrapper.find('[data-testid="governance-gates-panel"]')
+    expect(panel.exists()).toBe(true)
+  })
+
+  it('kind filter buttons have role="group" container', () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    expect(group.exists()).toBe(true)
+    const buttons = group.findAll('button')
+    expect(buttons.length).toBe(3) // all, http, event
+  })
+
+  it('kind filter buttons have aria-pressed attributes', () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    const buttons = group.findAll('button')
+    buttons.forEach((btn) => {
+      expect(btn.attributes('aria-pressed')).toMatch(/^true|false$/)
+    })
+  })
+
+  it('"all" filter button is aria-pressed=true initially', () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    const allBtn = group.findAll('button').find((btn) => btn.text().includes('contracts.kind.all'))
+    expect(allBtn).toBeDefined()
+    expect(allBtn!.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('detail aside shows "empty" placeholder when no contract selected', () => {
+    const wrapper = mountView()
+    // Since nothing is selected by default, detail placeholder should say empty
+    expect(wrapper.text()).toContain('contracts.detail.empty')
+  })
+
+  it('clicking a row sets aria-selected on that row', async () => {
+    const wrapper = mountView()
+    const firstRow = wrapper.find('tbody tr')
+    await firstRow.trigger('click')
+    expect(firstRow.attributes('aria-selected')).toBe('true')
+  })
+
+  it('table contains expected column headers', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    expect(text).toContain('contracts.table.contract')
+    expect(text).toContain('contracts.table.kind')
+    expect(text).toContain('contracts.table.servers')
+    expect(text).toContain('contracts.table.callers')
+  })
+})
diff --git a/packages/devboard/src/views/ContractsView.vue b/packages/devboard/src/views/ContractsView.vue
new file mode 100644
index 0000000..952cc60
--- /dev/null
+++ b/packages/devboard/src/views/ContractsView.vue
@@ -0,0 +1,603 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useContractsRegistry } from '../composables/useContractsRegistry'
+import { responseEnvelopeFor } from '../data/responseEnvelopes'
+import type { EnvelopeKind } from '../data/responseEnvelopes'
+import GovernanceGatesPanel from '../components/contracts/GovernanceGatesPanel.vue'
+
+const { t } = useI18n()
+
+const { registry, query, kindFilter, filtered, selectedContract, selectedEntry, select } =
+  useContractsRegistry()
+
+const KIND_OPTIONS = ['all', 'http', 'event'] as const
+
+function envelopeKindKey(kind: EnvelopeKind): string {
+  if (kind === '2xx') return 'contracts.envelopeKind.success'
+  if (kind === '4xx') return 'contracts.envelopeKind.clientError'
+  return 'contracts.envelopeKind.serverError'
+}
+</script>
+
+<template>
+  <div class="contracts">
+    <!-- Header -->
+    <div class="contracts__head">
+      <div class="contracts__title-group">
+        <h1 class="contracts__h1">
+          {{ t('contracts.title') }}
+          <span class="contracts__count">{{ t('contracts.count', { n: registry.length }) }}</span>
+        </h1>
+        <p class="contracts__subtitle">{{ t('contracts.subtitle') }}</p>
+      </div>
+    </div>
+
+    <!-- Snapshot note banner -->
+    <div class="contracts__snapshot-banner" role="note">
+      <span class="contracts__snapshot-label">{{ t('contracts.snapshot.label') }}</span>
+      {{ t('contracts.snapshot.note') }}
+    </div>
+
+    <!-- Governance gates panel -->
+    <GovernanceGatesPanel />
+
+    <!-- Toolbar -->
+    <div class="contracts__toolbar">
+      <label for="contracts-search" class="contracts__search-label">
+        {{ t('contracts.search.label') }}
+      </label>
+      <input
+        id="contracts-search"
+        v-model="query"
+        type="search"
+        class="contracts__search"
+        :placeholder="t('contracts.search.placeholder')"
+      />
+
+      <div class="contracts__seg" role="group" :aria-label="t('contracts.kind.filterLabel')">
+        <button
+          v-for="kind in KIND_OPTIONS"
+          :key="kind"
+          class="contracts__seg-btn"
+          :aria-pressed="kindFilter === kind ? 'true' : 'false'"
+          @click="kindFilter = kind"
+        >
+          {{ t(`contracts.kind.${kind}`) }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Main content: table + detail aside -->
+    <div class="contracts__body">
+      <!-- Registry table -->
+      <div class="contracts__table-wrap">
+        <table class="contracts__table" :aria-label="t('contracts.title')">
+          <thead>
+            <tr>
+              <th scope="col">{{ t('contracts.table.contract') }}</th>
+              <th scope="col">{{ t('contracts.table.kind') }}</th>
+              <th scope="col">{{ t('contracts.table.servers') }}</th>
+              <th scope="col">{{ t('contracts.table.callers') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="filtered.length > 0">
+              <tr
+                v-for="entry in filtered"
+                :key="entry.contract"
+                class="contracts__row"
+                :class="{ 'contracts__row--selected': selectedContract === entry.contract }"
+                :aria-selected="selectedContract === entry.contract ? 'true' : 'false'"
+                tabindex="0"
+                @click="select(entry.contract)"
+                @keydown.enter="select(entry.contract)"
+                @keydown.space.prevent="select(entry.contract)"
+              >
+                <td class="contracts__contract-col">
+                  <span class="contracts__contract-id">{{ entry.contract }}</span>
+                </td>
+                <td>
+                  <span class="contracts__kind-chip">{{ entry.kind }}</span>
+                </td>
+                <td class="contracts__cell-list">
+                  <span v-for="server in entry.servers" :key="server" class="contracts__cell-id">{{
+                    server
+                  }}</span>
+                  <span v-if="entry.servers.length === 0" class="contracts__cell-none">—</span>
+                </td>
+                <td class="contracts__cell-list">
+                  <span v-for="caller in entry.callers" :key="caller" class="contracts__cell-id">{{
+                    caller
+                  }}</span>
+                  <span v-if="entry.callers.length === 0" class="contracts__cell-none">—</span>
+                </td>
+              </tr>
+            </template>
+            <template v-else>
+              <tr>
+                <td colspan="4" class="contracts__empty">
+                  {{ t('contracts.empty') }}
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Detail aside -->
+      <aside class="contracts__detail" :aria-label="t('contracts.detail.panelLabel')">
+        <template v-if="selectedEntry !== null">
+          <div class="contracts__detail-content" data-testid="contract-detail">
+            <h2 class="contracts__detail-title">
+              <span class="contracts__detail-id">{{ selectedEntry.contract }}</span>
+            </h2>
+
+            <div class="contracts__detail-section">
+              <h3 class="contracts__detail-section-title">
+                {{ t('contracts.detail.servers') }}
+              </h3>
+              <ul class="contracts__detail-list">
+                <li
+                  v-for="server in selectedEntry.servers"
+                  :key="server"
+                  class="contracts__cell-id"
+                >
+                  {{ server }}
+                </li>
+                <li v-if="selectedEntry.servers.length === 0" class="contracts__cell-none">—</li>
+              </ul>
+            </div>
+
+            <div class="contracts__detail-section">
+              <h3 class="contracts__detail-section-title">
+                {{ t('contracts.detail.callers') }}
+              </h3>
+              <ul class="contracts__detail-list">
+                <li
+                  v-for="caller in selectedEntry.callers"
+                  :key="caller"
+                  class="contracts__cell-id"
+                >
+                  {{ caller }}
+                </li>
+                <li v-if="selectedEntry.callers.length === 0" class="contracts__cell-none">—</li>
+              </ul>
+            </div>
+
+            <!-- Response envelope -->
+            <div class="contracts__detail-section">
+              <h3 class="contracts__detail-section-title">
+                {{ t('contracts.detail.envelope') }}
+              </h3>
+              <template v-if="responseEnvelopeFor(selectedEntry.contract) !== null">
+                <table class="contracts__envelope-table">
+                  <thead>
+                    <tr>
+                      <th scope="col">{{ t('contracts.detail.status') }}</th>
+                      <th scope="col">{{ t('contracts.detail.object') }}</th>
+                      <th scope="col" class="sr-only">{{ t('contracts.detail.kind') }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="envEntry in responseEnvelopeFor(selectedEntry.contract)!"
+                      :key="envEntry.status"
+                      class="contracts__envelope-row"
+                    >
+                      <td class="contracts__envelope-status">{{ envEntry.status }}</td>
+                      <td class="contracts__envelope-object">{{ envEntry.object }}</td>
+                      <td>
+                        <span
+                          class="contracts__envelope-kind"
+                          :class="`contracts__envelope-kind--${envEntry.kind}`"
+                        >
+                          <span class="sr-only">{{ t(envelopeKindKey(envEntry.kind)) }}</span>
+                          <span aria-hidden="true">{{ envEntry.kind }}</span>
+                        </span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </template>
+              <p v-else class="contracts__detail-none">
+                {{ t('contracts.detail.envelopeNone') }}
+              </p>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <p class="contracts__detail-empty">
+            {{ t('contracts.detail.empty') }}
+          </p>
+        </template>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── Layout ────────────────────────────────────────────────────── */
+.contracts {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.contracts__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.contracts__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.contracts__h1 {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--fg);
+  font-family: var(--font-sans);
+}
+
+.contracts__count {
+  font-size: var(--text-sm);
+  font-weight: 400;
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+}
+
+.contracts__subtitle {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+/* ── Snapshot banner ───────────────────────────────────────────── */
+.contracts__snapshot-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  background: var(--bg-sunken);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-sm);
+}
+
+.contracts__snapshot-label {
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--fg-muted);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+}
+
+/* ── Toolbar ───────────────────────────────────────────────────── */
+.contracts__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.contracts__search-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.contracts__search {
+  width: 220px;
+  min-height: 30px;
+  padding: 4px 8px;
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  outline: none;
+}
+
+.contracts__search:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+/* Segmented control */
+.contracts__seg {
+  display: inline-flex;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  overflow: hidden;
+}
+
+.contracts__seg-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  padding: 4px 10px;
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  color: var(--fg-muted);
+  background: var(--bg);
+  border: none;
+  border-left: 1px solid var(--line);
+  cursor: pointer;
+  line-height: 1.4;
+  transition:
+    background 100ms,
+    color 100ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .contracts__seg-btn {
+    transition: none;
+  }
+}
+
+.contracts__seg-btn:first-child {
+  border-left: none;
+}
+
+.contracts__seg-btn[aria-pressed='true'] {
+  background: var(--bg-sunken);
+  color: var(--fg);
+  font-weight: 500;
+}
+
+.contracts__seg-btn:hover:not([aria-pressed='true']) {
+  background: var(--bg-sunken);
+}
+
+.contracts__seg-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* ── Body: table + detail ──────────────────────────────────────── */
+.contracts__body {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 16px;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .contracts__body {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Table ─────────────────────────────────────────────────────── */
+.contracts__table-wrap {
+  overflow-x: auto;
+}
+
+.contracts__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--fg);
+}
+
+.contracts__table thead th {
+  padding: 6px 12px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--fg-muted);
+  border-bottom: 1px solid var(--line-soft);
+  white-space: nowrap;
+}
+
+.contracts__table tbody td {
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--line-soft);
+  vertical-align: middle;
+}
+
+.contracts__row {
+  cursor: pointer;
+}
+
+.contracts__row:hover td {
+  background: var(--bg-sunken);
+}
+
+.contracts__row--selected td {
+  background: var(--accent-soft);
+}
+
+.contracts__row:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.contracts__contract-col {
+  min-width: 200px;
+}
+
+.contracts__contract-id {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--fg);
+}
+
+.contracts__kind-chip {
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--fg-muted);
+  background: var(--bg-sunken);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+}
+
+.contracts__cell-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.contracts__cell-id {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+}
+
+.contracts__cell-none {
+  font-size: var(--text-xs);
+  color: var(--fg-faint);
+}
+
+.contracts__empty {
+  padding: 28px 12px;
+  text-align: center;
+  color: var(--fg-muted);
+}
+
+/* ── Detail aside ──────────────────────────────────────────────── */
+.contracts__detail {
+  padding: 14px 16px;
+  background: var(--bg-raised);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r);
+  box-shadow: var(--shadow-sm);
+  min-height: 120px;
+}
+
+.contracts__detail-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.contracts__detail-title {
+  margin: 0;
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.contracts__detail-id {
+  font-family: var(--font-mono);
+  word-break: break-all;
+}
+
+.contracts__detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.contracts__detail-section-title {
+  margin: 0;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.contracts__detail-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.contracts__detail-none {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-faint);
+}
+
+.contracts__detail-empty {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+/* Envelope table */
+.contracts__envelope-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-xs);
+}
+
+.contracts__envelope-table thead th {
+  padding: 4px 8px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--fg-muted);
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.contracts__envelope-table tbody td {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--line-soft);
+  vertical-align: middle;
+}
+
+.contracts__envelope-status {
+  font-family: var(--font-mono);
+  color: var(--fg);
+}
+
+.contracts__envelope-object {
+  font-family: var(--font-mono);
+  color: var(--fg-muted);
+}
+
+.contracts__envelope-kind {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 5px;
+  font-family: var(--font-mono);
+  border-radius: var(--r-sm);
+  border: 1px solid transparent;
+}
+
+.contracts__envelope-kind--2xx {
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
+  background: color-mix(in srgb, var(--ok) 8%, transparent);
+}
+
+.contracts__envelope-kind--4xx {
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
+  background: color-mix(in srgb, var(--warn) 8%, transparent);
+}
+
+.contracts__envelope-kind--5xx {
+  color: var(--err);
+  border-color: color-mix(in srgb, var(--err) 30%, transparent);
+  background: color-mix(in srgb, var(--err) 8%, transparent);
+}
+</style>
diff --git a/packages/devboard/src/views/CoverageView.spec.ts b/packages/devboard/src/views/CoverageView.spec.ts
new file mode 100644
index 0000000..afaa311
--- /dev/null
+++ b/packages/devboard/src/views/CoverageView.spec.ts
@@ -0,0 +1,305 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CoverageView from './CoverageView.vue'
+import { COVERAGE_MATRIX, coverageCounts } from '../data/coverageMatrix'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (k: string, params?: Record<string, unknown>) => {
+      if (params !== undefined) return `${k}(${JSON.stringify(params)})`
+      return k
+    },
+  }),
+}))
+
+function mountView() {
+  return mount(CoverageView, {
+    global: {},
+  })
+}
+
+// Compute expected totals from the data layer
+const TOTAL_ROWS = COVERAGE_MATRIX.reduce((sum, s) => sum + s.rows.length, 0)
+const SECTION_COUNT = COVERAGE_MATRIX.length
+const COUNTS = coverageCounts()
+const SHIPPED = COVERAGE_MATRIX.flatMap((s) => s.rows).filter((r) => r.web !== null).length
+const DRAFTED = COVERAGE_MATRIX.flatMap((s) => s.rows).filter((r) => r.design !== null).length
+
+describe('CoverageView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // ── Structure ─────────────────────────────────────────────────────────────
+
+  it('renders all section headings', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    COVERAGE_MATRIX.forEach((section) => {
+      expect(text).toContain(section.titleKey)
+    })
+  })
+
+  it('renders total row count matching COVERAGE_MATRIX', () => {
+    const wrapper = mountView()
+    // All data rows: tbody tr elements (excluding section header rows)
+    const dataRows = wrapper.findAll('tr[data-row]')
+    expect(dataRows.length).toBe(TOTAL_ROWS)
+  })
+
+  it('renders header with eyebrow, h1, subtitle', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    expect(text).toContain('coverage.eyebrow')
+    expect(text).toContain('coverage.title')
+    expect(text).toContain('coverage.subtitle')
+  })
+
+  // ── Table accessibility ───────────────────────────────────────────────────
+
+  it('thead th elements have scope="col"', () => {
+    const wrapper = mountView()
+    const headers = wrapper.findAll('thead th[scope="col"]')
+    expect(headers.length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('table has a caption or aria-label', () => {
+    const wrapper = mountView()
+    const caption = wrapper.find('caption')
+    const tableWithLabel = wrapper.find('table[aria-label]')
+    // At least one of caption or aria-label must be present
+    expect(caption.exists() || tableWithLabel.exists()).toBe(true)
+  })
+
+  it('thead contains col headers for capability, web, and design', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    expect(text).toContain('coverage.col.capability')
+    expect(text).toContain('coverage.col.web')
+    expect(text).toContain('coverage.col.design')
+  })
+
+  // ── Status marks & sr-only ────────────────────────────────────────────────
+
+  it('each status has at least one sr-only text element with coverage.status.* key', () => {
+    const wrapper = mountView()
+    const srOnly = wrapper.findAll('.sr-only')
+    const srTexts = srOnly.map((el) => el.text())
+    // We must have sr-only text for status labels — check that at least
+    // one of the status key patterns appears
+    const hasStatusText = srTexts.some((t) => t.startsWith('coverage.status.'))
+    expect(hasStatusText).toBe(true)
+  })
+
+  it('matched status renders sr-only text with coverage.status.matched', () => {
+    const wrapper = mountView()
+    const srOnly = wrapper.findAll('.sr-only')
+    const srTexts = srOnly.map((el) => el.text())
+    expect(srTexts).toContain('coverage.status.matched')
+  })
+
+  it('designOnly status renders sr-only text with coverage.status.designOnly', () => {
+    const wrapper = mountView()
+    const srOnly = wrapper.findAll('.sr-only')
+    const srTexts = srOnly.map((el) => el.text())
+    expect(srTexts).toContain('coverage.status.designOnly')
+  })
+
+  // ── Legend ────────────────────────────────────────────────────────────────
+
+  it('renders legend with all 5 status entries', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    expect(text).toContain('coverage.legend.matched')
+    expect(text).toContain('coverage.legend.partial')
+    expect(text).toContain('coverage.legend.designOnly')
+    expect(text).toContain('coverage.legend.backendOnly')
+    expect(text).toContain('coverage.legend.outOfScope')
+  })
+
+  // ── KPI strip ─────────────────────────────────────────────────────────────
+
+  it('renders KPI labels for shipped, drafted, gaps, outOfScope', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    expect(text).toContain('coverage.kpi.shipped')
+    expect(text).toContain('coverage.kpi.drafted')
+    expect(text).toContain('coverage.kpi.gaps')
+    expect(text).toContain('coverage.kpi.outOfScope')
+  })
+
+  it('KPI shipped number matches rows with non-null web', () => {
+    const wrapper = mountView()
+    const kpi = wrapper.find('[data-testid="kpi-shipped"]')
+    expect(kpi.exists()).toBe(true)
+    expect(kpi.text()).toContain(String(SHIPPED))
+  })
+
+  it('KPI drafted number matches rows with non-null design', () => {
+    const wrapper = mountView()
+    const kpi = wrapper.find('[data-testid="kpi-drafted"]')
+    expect(kpi.exists()).toBe(true)
+    expect(kpi.text()).toContain(String(DRAFTED))
+  })
+
+  it('KPI gaps = total - matched', () => {
+    const wrapper = mountView()
+    const kpi = wrapper.find('[data-testid="kpi-gaps"]')
+    expect(kpi.exists()).toBe(true)
+    const expectedGaps = COUNTS.total - COUNTS.matched
+    expect(kpi.text()).toContain(String(expectedGaps))
+  })
+
+  it('KPI outOfScope matches counts', () => {
+    const wrapper = mountView()
+    const kpi = wrapper.find('[data-testid="kpi-out-of-scope"]')
+    expect(kpi.exists()).toBe(true)
+    expect(kpi.text()).toContain(String(COUNTS['out-of-scope']))
+  })
+
+  // ── Filter chips ──────────────────────────────────────────────────────────
+
+  it('filter chips group has role="group" and aria-label', () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"][aria-label]')
+    expect(group.exists()).toBe(true)
+  })
+
+  it('renders 6 filter chips (all + 5 statuses)', () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    expect(group.exists()).toBe(true)
+    const chips = group.findAll('button')
+    expect(chips.length).toBe(6)
+  })
+
+  it('filter chips have aria-pressed attributes', () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    const chips = group.findAll('button')
+    chips.forEach((chip) => {
+      expect(chip.attributes('aria-pressed')).toMatch(/^true|false$/)
+    })
+  })
+
+  it('"all" chip is aria-pressed=true initially', () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    const allChip = group.findAll('button').find((b) => b.text().includes('coverage.filter.all'))
+    expect(allChip).toBeDefined()
+    expect(allChip!.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('clicking a status filter chip filters rows to that status only', async () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    // Click "matched" filter
+    const matchedChip = group
+      .findAll('button')
+      .find((b) => b.text().includes('coverage.filter.matched'))
+    expect(matchedChip).toBeDefined()
+    await matchedChip!.trigger('click')
+
+    expect(matchedChip!.attributes('aria-pressed')).toBe('true')
+    const dataRows = wrapper.findAll('tr[data-row]')
+    const expectedMatchedCount = COVERAGE_MATRIX.flatMap((s) => s.rows).filter(
+      (r) => r.status === 'matched',
+    ).length
+    expect(dataRows.length).toBe(expectedMatchedCount)
+  })
+
+  it('clicking active filter again returns to "all"', async () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    const matchedChip = group
+      .findAll('button')
+      .find((b) => b.text().includes('coverage.filter.matched'))!
+    await matchedChip.trigger('click')
+    // Now click "all" chip
+    const allChip = group.findAll('button').find((b) => b.text().includes('coverage.filter.all'))!
+    await allChip.trigger('click')
+    const dataRows = wrapper.findAll('tr[data-row]')
+    expect(dataRows.length).toBe(TOTAL_ROWS)
+  })
+
+  it('active chip has aria-pressed=true, others false', async () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    const matchedChip = group
+      .findAll('button')
+      .find((b) => b.text().includes('coverage.filter.matched'))!
+    await matchedChip.trigger('click')
+
+    const chips = group.findAll('button')
+    chips.forEach((chip) => {
+      if (chip.text().includes('coverage.filter.matched')) {
+        expect(chip.attributes('aria-pressed')).toBe('true')
+      } else {
+        expect(chip.attributes('aria-pressed')).toBe('false')
+      }
+    })
+  })
+
+  // ── Section hiding when filter active ────────────────────────────────────
+
+  it('sections with no matching rows are hidden when filter active', async () => {
+    const wrapper = mountView()
+    const group = wrapper.find('[role="group"]')
+    // Filter to out-of-scope — there are none in COVERAGE_MATRIX
+    const oosFitler = COUNTS['out-of-scope']
+    if (oosFitler === 0) {
+      // With zero out-of-scope rows, all sections should be hidden
+      const oosChip = group
+        .findAll('button')
+        .find((b) => b.text().includes('coverage.filter.outOfScope'))!
+      await oosChip.trigger('click')
+      const dataRows = wrapper.findAll('tr[data-row]')
+      expect(dataRows.length).toBe(0)
+      // No section headings should be visible
+      const sectionHeadings = wrapper.findAll('[data-section]')
+      expect(sectionHeadings.length).toBe(0)
+    } else {
+      // Just verify that filter reduces sections shown
+      const oosChip = group
+        .findAll('button')
+        .find((b) => b.text().includes('coverage.filter.outOfScope'))!
+      await oosChip.trigger('click')
+      const dataRows = wrapper.findAll('tr[data-row]')
+      expect(dataRows.length).toBe(oosFitler)
+    }
+  })
+
+  // ── Row content ───────────────────────────────────────────────────────────
+
+  it('null web ref renders coverage.none placeholder', () => {
+    const wrapper = mountView()
+    // coverage matrix has rows with web=null; find at least one null-web cell
+    const hasNullWeb = COVERAGE_MATRIX.flatMap((s) => s.rows).some((r) => r.web === null)
+    if (hasNullWeb) {
+      expect(wrapper.text()).toContain('coverage.none')
+    }
+  })
+
+  it('route references are rendered in data rows', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    // Check a couple of known routes from the matrix
+    expect(text).toContain('/login')
+    expect(text).toContain('/coverage')
+  })
+
+  it('capability keys are translated via t()', () => {
+    const wrapper = mountView()
+    const text = wrapper.text()
+    // With identity t(), key is passed through — should see cap keys
+    expect(text).toContain('coverage.cap.login')
+  })
+
+  // ── Sections count ────────────────────────────────────────────────────────
+
+  it(`renders exactly ${SECTION_COUNT} section groups when filter=all`, () => {
+    const wrapper = mountView()
+    const sections = wrapper.findAll('[data-section]')
+    expect(sections.length).toBe(SECTION_COUNT)
+  })
+})
diff --git a/packages/devboard/src/views/CoverageView.vue b/packages/devboard/src/views/CoverageView.vue
new file mode 100644
index 0000000..b78aeb8
--- /dev/null
+++ b/packages/devboard/src/views/CoverageView.vue
@@ -0,0 +1,557 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  COVERAGE_MATRIX,
+  COVERAGE_STATUSES,
+  coverageCounts,
+  type CoverageStatus,
+} from '../data/coverageMatrix'
+
+const { t } = useI18n()
+
+// ── Filter state ────────────────────────────────────────────────────────────
+type FilterValue = 'all' | CoverageStatus
+
+const activeFilter = ref<FilterValue>('all')
+
+function setFilter(value: FilterValue): void {
+  activeFilter.value = value
+}
+
+// ── Derived data ─────────────────────────────────────────────────────────────
+const counts = coverageCounts()
+const allRows = COVERAGE_MATRIX.flatMap((s) => s.rows)
+const shipped = allRows.filter((r) => r.web !== null).length
+const drafted = allRows.filter((r) => r.design !== null).length
+const gaps = counts.total - counts.matched
+
+const filteredSections = computed(() => {
+  if (activeFilter.value === 'all') return COVERAGE_MATRIX
+  return COVERAGE_MATRIX.map((section) => ({
+    ...section,
+    rows: section.rows.filter((row) => row.status === activeFilter.value),
+  })).filter((section) => section.rows.length > 0)
+})
+
+// ── Status helpers ───────────────────────────────────────────────────────────
+
+// kebab-case status → camelCase i18n key suffix
+const STATUS_CAMEL: Readonly<Record<CoverageStatus, string>> = {
+  matched: 'matched',
+  partial: 'partial',
+  'design-only': 'designOnly',
+  'backend-only': 'backendOnly',
+  'out-of-scope': 'outOfScope',
+}
+
+// Filter chip i18n key suffixes (must match STATUS_CAMEL)
+const FILTER_KEY: Readonly<Record<FilterValue, string>> = {
+  all: 'all',
+  matched: 'matched',
+  partial: 'partial',
+  'design-only': 'designOnly',
+  'backend-only': 'backendOnly',
+  'out-of-scope': 'outOfScope',
+}
+
+// Mark symbol (aria-hidden; sr-only text carries the meaning)
+const STATUS_MARK: Readonly<Record<CoverageStatus, string>> = {
+  matched: '●',
+  partial: '◐',
+  'design-only': '◇',
+  'backend-only': '✗',
+  'out-of-scope': '–',
+}
+
+// token variable for each status color
+const STATUS_COLOR_VAR: Readonly<Record<CoverageStatus, string>> = {
+  matched: 'var(--ok)',
+  partial: 'var(--warn)',
+  'design-only': 'var(--accent)',
+  'backend-only': 'var(--err)',
+  'out-of-scope': 'var(--fg-faint)',
+}
+
+const FILTER_VALUES: readonly FilterValue[] = ['all', ...COVERAGE_STATUSES]
+</script>
+
+<template>
+  <div class="coverage">
+    <!-- ── Header ─────────────────────────────────────────────────────── -->
+    <div class="coverage__head">
+      <p class="coverage__eyebrow">{{ t('coverage.eyebrow') }}</p>
+      <h1 class="coverage__h1">{{ t('coverage.title') }}</h1>
+      <p class="coverage__subtitle">{{ t('coverage.subtitle') }}</p>
+    </div>
+
+    <!-- ── KPI strip ──────────────────────────────────────────────────── -->
+    <div class="coverage__kpi-strip" role="list" :aria-label="t('coverage.kpi.regionLabel')">
+      <div class="coverage__kpi-card" role="listitem" data-testid="kpi-shipped">
+        <span class="coverage__kpi-number">{{ shipped }}</span>
+        <span class="coverage__kpi-label">{{ t('coverage.kpi.shipped') }}</span>
+        <div class="coverage__kpi-bar" role="presentation">
+          <div
+            class="coverage__kpi-bar-fill coverage__kpi-bar-fill--ok"
+            :style="{ width: counts.total > 0 ? `${(shipped / counts.total) * 100}%` : '0%' }"
+          />
+        </div>
+      </div>
+
+      <div class="coverage__kpi-card" role="listitem" data-testid="kpi-drafted">
+        <span class="coverage__kpi-number">{{ drafted }}</span>
+        <span class="coverage__kpi-label">{{ t('coverage.kpi.drafted') }}</span>
+        <div class="coverage__kpi-bar" role="presentation">
+          <div
+            class="coverage__kpi-bar-fill coverage__kpi-bar-fill--accent"
+            :style="{ width: counts.total > 0 ? `${(drafted / counts.total) * 100}%` : '0%' }"
+          />
+        </div>
+      </div>
+
+      <div class="coverage__kpi-card" role="listitem" data-testid="kpi-gaps">
+        <span class="coverage__kpi-number">{{ gaps }}</span>
+        <span class="coverage__kpi-label">{{ t('coverage.kpi.gaps') }}</span>
+        <div class="coverage__kpi-bar" role="presentation">
+          <div
+            class="coverage__kpi-bar-fill coverage__kpi-bar-fill--warn"
+            :style="{ width: counts.total > 0 ? `${(gaps / counts.total) * 100}%` : '0%' }"
+          />
+        </div>
+      </div>
+
+      <div class="coverage__kpi-card" role="listitem" data-testid="kpi-out-of-scope">
+        <span class="coverage__kpi-number">{{ counts['out-of-scope'] }}</span>
+        <span class="coverage__kpi-label">{{ t('coverage.kpi.outOfScope') }}</span>
+        <div class="coverage__kpi-bar" role="presentation">
+          <div
+            class="coverage__kpi-bar-fill coverage__kpi-bar-fill--faint"
+            :style="{
+              width: counts.total > 0 ? `${(counts['out-of-scope'] / counts.total) * 100}%` : '0%',
+            }"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Legend ─────────────────────────────────────────────────────── -->
+    <div class="coverage__legend" role="list" :aria-label="t('coverage.legend.regionLabel')">
+      <div
+        v-for="status in COVERAGE_STATUSES"
+        :key="status"
+        class="coverage__legend-item"
+        role="listitem"
+      >
+        <span
+          class="coverage__legend-mark"
+          aria-hidden="true"
+          :style="{ color: STATUS_COLOR_VAR[status] }"
+          >{{ STATUS_MARK[status] }}</span
+        >
+        <span class="coverage__legend-label">{{
+          t(`coverage.legend.${STATUS_CAMEL[status]}`)
+        }}</span>
+      </div>
+    </div>
+
+    <!-- ── Filter chips ───────────────────────────────────────────────── -->
+    <div class="coverage__filters" role="group" :aria-label="t('coverage.filter.groupLabel')">
+      <button
+        v-for="fv in FILTER_VALUES"
+        :key="fv"
+        class="coverage__filter-chip"
+        :aria-pressed="activeFilter === fv ? 'true' : 'false'"
+        @click="setFilter(fv)"
+      >
+        {{ t(`coverage.filter.${FILTER_KEY[fv]}`) }}
+      </button>
+    </div>
+
+    <!-- ── Matrix table ───────────────────────────────────────────────── -->
+    <div class="coverage__table-wrap">
+      <table class="coverage__table">
+        <caption class="sr-only">
+          {{
+            t('coverage.caption')
+          }}
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">{{ t('coverage.col.capability') }}</th>
+            <th scope="col">{{ t('coverage.col.web') }}</th>
+            <th scope="col">{{ t('coverage.col.design') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="section in filteredSections" :key="section.titleKey">
+            <!-- Section heading row -->
+            <tr class="coverage__section-row" data-section>
+              <th colspan="3" scope="colgroup" class="coverage__section-heading">
+                {{ t(section.titleKey) }}
+              </th>
+            </tr>
+            <!-- Data rows -->
+            <tr v-for="row in section.rows" :key="row.route" class="coverage__row" data-row>
+              <!-- Capability + route + status badge -->
+              <td class="coverage__cap-cell">
+                <div class="coverage__cap-name">{{ t(row.capabilityKey) }}</div>
+                <code class="coverage__route">{{ row.route }}</code>
+                <span class="coverage__badge" :style="{ color: STATUS_COLOR_VAR[row.status] }">
+                  <span aria-hidden="true">{{ STATUS_MARK[row.status] }}</span>
+                  <span class="sr-only">{{
+                    t(`coverage.status.${STATUS_CAMEL[row.status]}`)
+                  }}</span>
+                </span>
+              </td>
+
+              <!-- Web ref -->
+              <td class="coverage__ref-cell">
+                <span
+                  class="coverage__status-mark"
+                  aria-hidden="true"
+                  :style="{ color: STATUS_COLOR_VAR[row.status] }"
+                  >{{ STATUS_MARK[row.status] }}</span
+                >
+                <span class="sr-only">{{ t(`coverage.status.${STATUS_CAMEL[row.status]}`) }}</span>
+                <code v-if="row.web !== null" class="coverage__ref">{{ row.web }}</code>
+                <span v-else class="coverage__none" aria-label="t('coverage.none')">{{
+                  t('coverage.none')
+                }}</span>
+              </td>
+
+              <!-- Design ref -->
+              <td class="coverage__ref-cell">
+                <span
+                  class="coverage__status-mark"
+                  aria-hidden="true"
+                  :style="{ color: STATUS_COLOR_VAR[row.status] }"
+                  >{{ STATUS_MARK[row.status] }}</span
+                >
+                <span class="sr-only">{{ t(`coverage.status.${STATUS_CAMEL[row.status]}`) }}</span>
+                <code v-if="row.design !== null" class="coverage__ref">{{ row.design }}</code>
+                <span v-else class="coverage__none" aria-label="t('coverage.none')">{{
+                  t('coverage.none')
+                }}</span>
+              </td>
+            </tr>
+          </template>
+
+          <!-- Empty state when filter yields no results -->
+          <tr v-if="filteredSections.length === 0">
+            <td colspan="3" class="coverage__empty">
+              {{ t('coverage.empty') }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── Utility ──────────────────────────────────────────────────────────────── */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Root ─────────────────────────────────────────────────────────────────── */
+.coverage {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────────── */
+.coverage__head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.coverage__eyebrow {
+  margin: 0;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: 500;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.coverage__h1 {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--fg);
+  font-family: var(--font-sans);
+}
+
+.coverage__subtitle {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+/* ── KPI strip ────────────────────────────────────────────────────────────── */
+.coverage__kpi-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+@media (max-width: 700px) {
+  .coverage__kpi-strip {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.coverage__kpi-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--bg-raised);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r);
+  box-shadow: var(--shadow-sm);
+}
+
+.coverage__kpi-number {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--fg);
+  line-height: 1.2;
+}
+
+.coverage__kpi-label {
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  line-height: 1.4;
+}
+
+.coverage__kpi-bar {
+  height: 3px;
+  background: var(--bg-sunken);
+  border-radius: var(--r-sm);
+  overflow: hidden;
+  margin-top: 4px;
+}
+
+.coverage__kpi-bar-fill {
+  height: 100%;
+  border-radius: var(--r-sm);
+  transition: width 200ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .coverage__kpi-bar-fill {
+    transition: none;
+  }
+}
+
+.coverage__kpi-bar-fill--ok {
+  background: var(--ok);
+}
+
+.coverage__kpi-bar-fill--accent {
+  background: var(--accent);
+}
+
+.coverage__kpi-bar-fill--warn {
+  background: var(--warn);
+}
+
+.coverage__kpi-bar-fill--faint {
+  background: var(--fg-faint);
+}
+
+/* ── Legend ───────────────────────────────────────────────────────────────── */
+.coverage__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 20px;
+}
+
+.coverage__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.coverage__legend-mark {
+  font-size: var(--text-base);
+  line-height: 1;
+}
+
+.coverage__legend-label {
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+/* ── Filter chips ─────────────────────────────────────────────────────────── */
+.coverage__filters {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  overflow: hidden;
+}
+
+.coverage__filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  padding: 4px 10px;
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  color: var(--fg-muted);
+  background: var(--bg);
+  border: none;
+  border-left: 1px solid var(--line);
+  cursor: pointer;
+  line-height: 1.4;
+  transition:
+    background 100ms,
+    color 100ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .coverage__filter-chip {
+    transition: none;
+  }
+}
+
+.coverage__filter-chip:first-child {
+  border-left: none;
+}
+
+.coverage__filter-chip[aria-pressed='true'] {
+  background: var(--bg-sunken);
+  color: var(--fg);
+  font-weight: 500;
+}
+
+.coverage__filter-chip:hover:not([aria-pressed='true']) {
+  background: var(--bg-sunken);
+}
+
+.coverage__filter-chip:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* ── Table ────────────────────────────────────────────────────────────────── */
+.coverage__table-wrap {
+  overflow-x: auto;
+}
+
+.coverage__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--fg);
+}
+
+.coverage__table thead th {
+  padding: 6px 12px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--fg-muted);
+  border-bottom: 2px solid var(--line);
+  white-space: nowrap;
+}
+
+.coverage__section-row {
+  background: var(--bg-sunken);
+}
+
+.coverage__section-heading {
+  padding: 6px 12px;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  text-align: left;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.coverage__row td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line-soft);
+  vertical-align: middle;
+}
+
+.coverage__row:last-child td {
+  border-bottom: none;
+}
+
+/* ── Capability cell ──────────────────────────────────────────────────────── */
+.coverage__cap-cell {
+  display: table-cell;
+  min-width: 200px;
+}
+
+.coverage__cap-name {
+  font-weight: 500;
+  color: var(--fg);
+  margin-bottom: 2px;
+}
+
+.coverage__route {
+  display: block;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--fg-muted);
+  margin-bottom: 4px;
+}
+
+.coverage__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-xs);
+}
+
+/* ── Ref cell ─────────────────────────────────────────────────────────────── */
+.coverage__ref-cell {
+  white-space: nowrap;
+  min-width: 160px;
+}
+
+.coverage__status-mark {
+  font-size: var(--text-base);
+  margin-right: 6px;
+}
+
+.coverage__ref {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  word-break: break-all;
+}
+
+.coverage__none {
+  font-size: var(--text-sm);
+  color: var(--fg-faint);
+}
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+.coverage__empty {
+  padding: 32px 12px;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+}
+</style>
diff --git a/packages/devboard/src/views/DepsView.spec.ts b/packages/devboard/src/views/DepsView.spec.ts
new file mode 100644
index 0000000..6a4c9ef
--- /dev/null
+++ b/packages/devboard/src/views/DepsView.spec.ts
@@ -0,0 +1,209 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { defineComponent } from 'vue'
+import DepsView from './DepsView.vue'
+import type { CellEntry } from '../manifest/types'
+import { useCellsStore } from '../stores/useCellsStore'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (k: string, params?: Record<string, unknown>) => {
+      if (params !== undefined) return `${k}(${JSON.stringify(params)})`
+      return k
+    },
+  }),
+}))
+
+vi.mock('../stores/useCellsStore', () => ({
+  useCellsStore: vi.fn(),
+}))
+
+const RouterLinkStub = defineComponent({
+  name: 'RouterLink',
+  props: { to: { type: String, required: true } },
+  template: '<a :href="to"><slot /></a>',
+})
+
+const makeCell = (overrides: Partial<CellEntry>): CellEntry => ({
+  id: 'testcore',
+  name: 'TestCore',
+  domain: 'Test',
+  type: 'core',
+  consistencyLevel: 'L2',
+  lifecycle: 'asset',
+  durabilityMode: 'durable',
+  owner: { team: 'platform', role: 'cell-owner' },
+  goStructName: 'TestCore',
+  schemaPrimary: null,
+  requires: [],
+  l0Dependencies: [],
+  smokeTests: [],
+  slices: [],
+  produces: [],
+  consumes: [],
+  dependsOnCells: [],
+  requiredByCells: [],
+  ...overrides,
+})
+
+const STUB_CELLS: CellEntry[] = [
+  makeCell({ id: 'configcore', dependsOnCells: [], requiredByCells: ['accesscore', 'auditcore'] }),
+  makeCell({ id: 'accesscore', dependsOnCells: ['configcore'], requiredByCells: ['auditcore'] }),
+  makeCell({
+    id: 'auditcore',
+    dependsOnCells: ['accesscore', 'configcore'],
+    requiredByCells: [],
+  }),
+]
+
+function setupStoreMock(cells: CellEntry[] = STUB_CELLS): void {
+  vi.mocked(useCellsStore).mockReturnValue({
+    cells: cells as unknown as ReturnType<typeof useCellsStore>['cells'],
+    selectedId: null,
+    selectedCell: null,
+    byId: (id: string) => cells.find((c) => c.id === id) ?? null,
+    selectCell: vi.fn(),
+    $id: 'devboard.cells',
+    $patch: vi.fn(),
+    $reset: vi.fn(),
+    $subscribe: vi.fn(),
+    $onAction: vi.fn(),
+    $dispose: vi.fn(),
+  } as unknown as ReturnType<typeof useCellsStore>)
+}
+
+function mountView(cells: CellEntry[] = STUB_CELLS) {
+  setupStoreMock(cells)
+  return mount(DepsView, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,
+          stubActions: false,
+        }),
+      ],
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+    },
+  })
+}
+
+describe('DepsView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders the page title from i18n', () => {
+    const wrapper = mountView()
+    expect(wrapper.find('h1').text()).toContain('deps.title')
+  })
+
+  it('renders the cell count in the header', () => {
+    const wrapper = mountView()
+    expect(wrapper.text()).toContain('deps.count')
+  })
+
+  it('renders DepsViewBar with 4 tabs', () => {
+    const wrapper = mountView()
+    const tabs = wrapper.findAll('[role="tab"]')
+    expect(tabs).toHaveLength(4)
+  })
+
+  it('list view panel is visible by default', () => {
+    const wrapper = mountView()
+    const listPanel = wrapper.find('#deps-panel-list')
+    expect(listPanel.exists()).toBe(true)
+    // The list panel should not be hidden
+    expect(listPanel.attributes('hidden')).toBeUndefined()
+  })
+
+  it('other panels are hidden by default', () => {
+    const wrapper = mountView()
+    for (const id of ['graph', 'tree', 'matrix']) {
+      const panel = wrapper.find(`#deps-panel-${id}`)
+      expect(panel.exists()).toBe(true)
+      expect(panel.attributes('hidden')).toBeDefined()
+    }
+  })
+
+  it('clicking graph tab shows graph panel and hides list panel', async () => {
+    const wrapper = mountView()
+    const graphTab = wrapper.find('#deps-tab-graph')
+    await graphTab.trigger('click')
+
+    const graphPanel = wrapper.find('#deps-panel-graph')
+    expect(graphPanel.attributes('hidden')).toBeUndefined()
+
+    const listPanel = wrapper.find('#deps-panel-list')
+    expect(listPanel.attributes('hidden')).toBeDefined()
+  })
+
+  it('clicking tree tab shows tree panel', async () => {
+    const wrapper = mountView()
+    const treeTab = wrapper.find('#deps-tab-tree')
+    await treeTab.trigger('click')
+
+    const treePanel = wrapper.find('#deps-panel-tree')
+    expect(treePanel.attributes('hidden')).toBeUndefined()
+  })
+
+  it('clicking matrix tab shows matrix panel', async () => {
+    const wrapper = mountView()
+    const matrixTab = wrapper.find('#deps-tab-matrix')
+    await matrixTab.trigger('click')
+
+    const matrixPanel = wrapper.find('#deps-panel-matrix')
+    expect(matrixPanel.attributes('hidden')).toBeUndefined()
+  })
+
+  it('detail aside shows empty state message when no cell selected', () => {
+    const wrapper = mountView()
+    const aside = wrapper.find('aside')
+    expect(aside.exists()).toBe(true)
+    expect(aside.text()).toContain('deps.detail.empty')
+  })
+
+  it('selecting a cell in list view shows detail aside with cell info', async () => {
+    const wrapper = mountView()
+    // Click on first cell button in the list view
+    const cellBtn = wrapper.find('.deps-list__cell-btn')
+    await cellBtn.trigger('click')
+
+    const aside = wrapper.find('aside')
+    // After selection, the detail aside should no longer show the empty state
+    expect(aside.text()).not.toContain('deps.detail.empty')
+    // Should show dependsOn/requiredBy headings
+    expect(aside.text()).toContain('deps.detail.dependsOn')
+    expect(aside.text()).toContain('deps.detail.requiredBy')
+  })
+
+  it('all tabpanels have role=tabpanel', () => {
+    const wrapper = mountView()
+    const panels = wrapper.findAll('[role="tabpanel"]')
+    expect(panels).toHaveLength(4)
+  })
+
+  it('tabpanel aria-labelledby corresponds to tab id', () => {
+    const wrapper = mountView()
+    const listPanel = wrapper.find('#deps-panel-list')
+    expect(listPanel.attributes('aria-labelledby')).toBe('deps-tab-list')
+  })
+
+  it('close button in detail aside calls select(null)', async () => {
+    const wrapper = mountView()
+    // First select a cell
+    const cellBtn = wrapper.find('.deps-list__cell-btn')
+    await cellBtn.trigger('click')
+
+    // Now close button should be visible
+    const closeBtn = wrapper.find('.deps-view__detail-close')
+    expect(closeBtn.exists()).toBe(true)
+    await closeBtn.trigger('click')
+
+    // After closing, empty state should reappear
+    const aside = wrapper.find('aside')
+    expect(aside.text()).toContain('deps.detail.empty')
+  })
+})
diff --git a/packages/devboard/src/views/DepsView.vue b/packages/devboard/src/views/DepsView.vue
new file mode 100644
index 0000000..4312b5e
--- /dev/null
+++ b/packages/devboard/src/views/DepsView.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDepsGraph } from '../composables/useDepsGraph'
+import DepsViewBar from '../components/deps/DepsViewBar.vue'
+import DepsListView from '../components/deps/DepsListView.vue'
+import DepsGraphView from '../components/deps/DepsGraphView.vue'
+import DepsTreeView from '../components/deps/DepsTreeView.vue'
+import DepsMatrixView from '../components/deps/DepsMatrixView.vue'
+import type { DepsViewId } from '../components/deps/DepsViewBar.vue'
+
+const { t } = useI18n()
+
+const { cells, edges, forest, dependsOn, selectedCellId, selectedCell, select } = useDepsGraph()
+
+const activeView = ref<DepsViewId>('list')
+
+const VIEWS: readonly { id: DepsViewId; labelKey: string }[] = [
+  { id: 'list', labelKey: 'deps.view.list' },
+  { id: 'graph', labelKey: 'deps.view.graph' },
+  { id: 'tree', labelKey: 'deps.view.tree' },
+  { id: 'matrix', labelKey: 'deps.view.matrix' },
+]
+
+const panelId = (id: DepsViewId) => `deps-panel-${id}`
+
+function onSelectView(id: DepsViewId): void {
+  activeView.value = id
+}
+</script>
+
+<template>
+  <div class="deps-view">
+    <!-- Header -->
+    <header class="deps-view__header">
+      <h1 class="deps-view__h1">
+        {{ t('deps.title') }}
+        <span class="deps-view__count">{{ t('deps.count', { n: cells.length }) }}</span>
+      </h1>
+      <p class="deps-view__subtitle">{{ t('deps.subtitle') }}</p>
+    </header>
+
+    <!-- View switcher -->
+    <DepsViewBar :views="VIEWS" :active-id="activeView" @select="onSelectView" />
+
+    <!-- Main content + detail aside -->
+    <div class="deps-view__body">
+      <div class="deps-view__panel-wrap">
+        <!-- List view panel -->
+        <section
+          :id="panelId('list')"
+          role="tabpanel"
+          :aria-labelledby="`deps-tab-list`"
+          class="deps-view__panel"
+          :class="{ 'deps-view__panel--hidden': activeView !== 'list' }"
+          :hidden="activeView !== 'list'"
+        >
+          <DepsListView :cells="cells" @select="select" />
+        </section>
+
+        <!-- Graph view panel -->
+        <section
+          :id="panelId('graph')"
+          role="tabpanel"
+          :aria-labelledby="`deps-tab-graph`"
+          class="deps-view__panel"
+          :class="{ 'deps-view__panel--hidden': activeView !== 'graph' }"
+          :hidden="activeView !== 'graph'"
+        >
+          <DepsGraphView
+            :cells="cells"
+            :edges="edges"
+            :selected-cell-id="selectedCellId"
+            @select="select"
+          />
+        </section>
+
+        <!-- Tree view panel -->
+        <section
+          :id="panelId('tree')"
+          role="tabpanel"
+          :aria-labelledby="`deps-tab-tree`"
+          class="deps-view__panel"
+          :class="{ 'deps-view__panel--hidden': activeView !== 'tree' }"
+          :hidden="activeView !== 'tree'"
+        >
+          <DepsTreeView :forest="forest" @select="select" />
+        </section>
+
+        <!-- Matrix view panel -->
+        <section
+          :id="panelId('matrix')"
+          role="tabpanel"
+          :aria-labelledby="`deps-tab-matrix`"
+          class="deps-view__panel"
+          :class="{ 'deps-view__panel--hidden': activeView !== 'matrix' }"
+          :hidden="activeView !== 'matrix'"
+        >
+          <DepsMatrixView :cells="cells" :depends-on="dependsOn" />
+        </section>
+      </div>
+
+      <!-- Detail aside -->
+      <aside class="deps-view__detail" :aria-label="t('deps.detail.label')">
+        <template v-if="selectedCell !== null">
+          <h2 class="deps-view__detail-title">
+            <span class="deps-view__mono">{{ selectedCell.id }}</span>
+          </h2>
+
+          <div class="deps-view__detail-section">
+            <h3 class="deps-view__detail-subtitle">{{ t('deps.detail.dependsOn') }}</h3>
+            <p v-if="selectedCell.dependsOnCells.length === 0" class="deps-view__detail-none">
+              {{ t('deps.detail.none') }}
+            </p>
+            <ul v-else class="deps-view__detail-list">
+              <li
+                v-for="dep in selectedCell.dependsOnCells"
+                :key="dep"
+                class="deps-view__detail-item"
+              >
+                <span class="deps-view__mono">{{ dep }}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div class="deps-view__detail-section">
+            <h3 class="deps-view__detail-subtitle">{{ t('deps.detail.requiredBy') }}</h3>
+            <p v-if="selectedCell.requiredByCells.length === 0" class="deps-view__detail-none">
+              {{ t('deps.detail.none') }}
+            </p>
+            <ul v-else class="deps-view__detail-list">
+              <li
+                v-for="dep in selectedCell.requiredByCells"
+                :key="dep"
+                class="deps-view__detail-item"
+              >
+                <span class="deps-view__mono">{{ dep }}</span>
+              </li>
+            </ul>
+          </div>
+
+          <button
+            type="button"
+            class="deps-view__detail-close"
+            :aria-label="t('deps.detail.close')"
+            @click="select(null)"
+          >
+            {{ t('deps.detail.close') }}
+          </button>
+        </template>
+
+        <template v-else>
+          <p class="deps-view__detail-empty">{{ t('deps.detail.empty') }}</p>
+        </template>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.deps-view {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: 100%;
+  font-size: var(--text-base);
+}
+
+.deps-view__header {
+  padding: 20px 24px 12px;
+}
+
+.deps-view__h1 {
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--fg);
+  margin: 0 0 4px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.deps-view__count {
+  font-size: var(--text-base);
+  font-weight: 400;
+  color: var(--fg-muted);
+}
+
+.deps-view__subtitle {
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  margin: 0;
+}
+
+.deps-view__body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  gap: 0;
+  padding: 16px 24px;
+  align-items: flex-start;
+}
+
+.deps-view__panel-wrap {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
+.deps-view__panel {
+  width: 100%;
+}
+
+.deps-view__panel--hidden {
+  display: none;
+}
+
+.deps-view__detail {
+  width: 240px;
+  flex-shrink: 0;
+  margin-left: 20px;
+  background: var(--bg-raised);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r);
+  padding: 16px;
+  font-size: var(--text-base);
+}
+
+.deps-view__detail-title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--fg);
+  margin: 0 0 12px;
+}
+
+.deps-view__detail-section {
+  margin-bottom: 12px;
+}
+
+.deps-view__detail-subtitle {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--fg-muted);
+  margin: 0 0 4px;
+}
+
+.deps-view__detail-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.deps-view__detail-item {
+  color: var(--fg);
+}
+
+.deps-view__detail-none {
+  color: var(--fg-faint);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+.deps-view__detail-empty {
+  color: var(--fg-faint);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+.deps-view__detail-close {
+  margin-top: 8px;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  background: none;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  padding: 4px 10px;
+  cursor: pointer;
+}
+
+.deps-view__detail-close:hover {
+  color: var(--fg);
+  border-color: var(--line);
+  background: var(--bg-sunken);
+}
+
+.deps-view__detail-close:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.deps-view__mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .deps-view__detail-close {
+    transition: none;
+  }
+}
+</style>
diff --git a/packages/devboard/src/views/GroupsView.spec.ts b/packages/devboard/src/views/GroupsView.spec.ts
new file mode 100644
index 0000000..412caad
--- /dev/null
+++ b/packages/devboard/src/views/GroupsView.spec.ts
@@ -0,0 +1,265 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import GroupsView from './GroupsView.vue'
+import { useCellsStore } from '../stores/useCellsStore'
+import type { CellEntry } from '../manifest/types'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (k: string, params?: Record<string, unknown>) => {
+      if (params !== undefined) return `${k}(${JSON.stringify(params)})`
+      return k
+    },
+  }),
+}))
+
+// Mock useCellsStore so we control `cells` (real store reads static manifest).
+vi.mock('../stores/useCellsStore', () => ({
+  useCellsStore: vi.fn(),
+}))
+
+const makeCell = (overrides: Partial<CellEntry>): CellEntry => ({
+  id: 'testcore',
+  name: 'TestCore',
+  domain: 'Test',
+  type: 'core',
+  consistencyLevel: 'L2',
+  lifecycle: 'asset',
+  durabilityMode: 'durable',
+  owner: { team: 'platform', role: 'cell-owner' },
+  goStructName: 'TestCore',
+  schemaPrimary: null,
+  requires: [],
+  l0Dependencies: [],
+  smokeTests: [],
+  slices: [],
+  produces: [],
+  consumes: [],
+  dependsOnCells: [],
+  requiredByCells: [],
+  ...overrides,
+})
+
+// Real cells from manifest — keep in sync with cells.generated.ts membership
+const STUB_CELLS: CellEntry[] = [
+  makeCell({
+    id: 'accesscore',
+    name: 'AccessCore',
+    domain: 'Access',
+    consistencyLevel: 'L3',
+    durabilityMode: 'durable',
+    dependsOnCells: ['configcore'],
+    consumes: [
+      { contract: 'event.config.entry-deleted.v1', role: 'subscribe' },
+      { contract: 'event.config.entry-upserted.v1', role: 'subscribe' },
+      { contract: 'event.role.assigned.v1', role: 'subscribe' },
+      { contract: 'event.role.revoked.v1', role: 'subscribe' },
+      { contract: 'http.config.get.v1', role: 'call' },
+      { contract: 'http.config.internal.get.v1', role: 'call' },
+    ],
+  }),
+  makeCell({
+    id: 'auditcore',
+    name: 'AuditCore',
+    domain: 'Audit',
+    consistencyLevel: 'L2',
+    durabilityMode: 'durable',
+    dependsOnCells: ['accesscore', 'configcore'],
+  }),
+  makeCell({
+    id: 'configcore',
+    name: 'ConfigCore',
+    domain: 'Config',
+    consistencyLevel: 'L3',
+    durabilityMode: 'durable',
+    dependsOnCells: [],
+  }),
+]
+
+function setupStoreMock(cells: CellEntry[] = STUB_CELLS): void {
+  vi.mocked(useCellsStore).mockReturnValue({
+    cells: cells as unknown as ReturnType<typeof useCellsStore>['cells'],
+    selectedId: null,
+    selectedCell: null,
+    byId: (id: string) => cells.find((c) => c.id === id) ?? null,
+    selectCell: vi.fn(),
+    $id: 'devboard.cells',
+    $patch: vi.fn(),
+    $reset: vi.fn(),
+    $subscribe: vi.fn(),
+    $onAction: vi.fn(),
+    $dispose: vi.fn(),
+  } as unknown as ReturnType<typeof useCellsStore>)
+}
+
+function mountView(cells: CellEntry[] = STUB_CELLS) {
+  setupStoreMock(cells)
+  return mount(GroupsView, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,
+          stubActions: false,
+        }),
+      ],
+    },
+  })
+}
+
+describe('GroupsView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // ── Header ───────────────────────────────────────────────────────────────
+
+  it('renders all 5 group rows in the list', () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    expect(groupBtns.length).toBe(5)
+  })
+
+  it('preview badge is present with role="status"', () => {
+    const wrapper = mountView()
+    const badge = wrapper.find('[role="status"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.text()).toContain('groups.preview.label')
+  })
+
+  it('preview note is present with role="note"', () => {
+    const wrapper = mountView()
+    const note = wrapper.find('[role="note"]')
+    expect(note.exists()).toBe(true)
+    expect(note.text()).toContain('groups.preview.note')
+  })
+
+  // ── Search ───────────────────────────────────────────────────────────────
+
+  it('search input has an associated label (for/id pair)', () => {
+    const wrapper = mountView()
+    const input = wrapper.find('input[type="search"]')
+    expect(input.exists()).toBe(true)
+    const inputId = input.attributes('id')
+    expect(inputId).toBeTruthy()
+    const label = wrapper.find(`label[for="${inputId}"]`)
+    expect(label.exists()).toBe(true)
+  })
+
+  it('typing filters the group list', async () => {
+    const wrapper = mountView()
+    const input = wrapper.find('input[type="search"]')
+    await input.setValue('access')
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    // Only the access group should match by nameKey
+    expect(groupBtns.length).toBeLessThan(5)
+  })
+
+  it('shows empty state when no groups match the search query', async () => {
+    const wrapper = mountView()
+    const input = wrapper.find('input[type="search"]')
+    await input.setValue('zzz-no-match-at-all')
+    expect(wrapper.text()).toContain('groups.empty')
+  })
+
+  // ── Group selection ──────────────────────────────────────────────────────
+
+  it('clicking a group shows its detail panel', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    await groupBtns[0]!.trigger('click')
+    // Detail panel should show query section
+    expect(wrapper.text()).toContain('groups.detail.query')
+  })
+
+  it('selected group button has aria-pressed="true"', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    await groupBtns[0]!.trigger('click')
+    expect(groupBtns[0]!.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('unselected group buttons have aria-pressed="false"', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    // Select first button
+    await groupBtns[0]!.trigger('click')
+    // Second button should be unselected
+    expect(groupBtns[1]!.attributes('aria-pressed')).toBe('false')
+  })
+
+  // ── Detail panel ─────────────────────────────────────────────────────────
+
+  it('detail panel shows predicate chips for the selected group', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    await groupBtns[0]!.trigger('click')
+    // Predicate chips should be present
+    const chips = wrapper.findAll('[data-testid="predicate-chip"]')
+    expect(chips.length).toBeGreaterThan(0)
+  })
+
+  it('member table has th elements with scope="col"', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    await groupBtns[0]!.trigger('click')
+    const headers = wrapper.findAll('table th[scope="col"]')
+    expect(headers.length).toBeGreaterThan(0)
+  })
+
+  it('sg-foundation selected: members contain configcore (no dependencies)', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    // sg-foundation is index 2 in SMART_GROUPS
+    await groupBtns[2]!.trigger('click')
+    expect(wrapper.text()).toContain('configcore')
+  })
+
+  it('sg-access selected: members contain accesscore', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    // sg-access is index 0 in SMART_GROUPS
+    await groupBtns[0]!.trigger('click')
+    expect(wrapper.text()).toContain('accesscore')
+  })
+
+  it('shows no-members message when a group has no matching cells', async () => {
+    // sg-high-fanin requires consumesCount >= 5 — only accesscore qualifies (6 consumes),
+    // but here we pass cells with fewer consumes so the group is empty
+    const emptyCells = STUB_CELLS.map((c) => makeCell({ ...c, consumes: [] }))
+    const wrapper = mountView(emptyCells)
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    // sg-high-fanin is index 3
+    await groupBtns[3]!.trigger('click')
+    expect(wrapper.text()).toContain('groups.detail.noMembers')
+  })
+
+  it('shows placeholder when no group is selected (detail empty state)', () => {
+    // Default: first group is auto-selected so click a scenario where nothing is selected
+    // We test the empty state by checking default render before any interaction
+    // — with default auto-select the first group is shown. We verify detail.empty
+    // is shown when explicitly deselecting (if supported), or just verify initial state.
+    // Since the component auto-selects the first group, we just verify the member count
+    // badge appears in the detail panel on initial render.
+    const wrapper = mountView()
+    expect(wrapper.text()).toContain('groups.detail.members')
+  })
+
+  // ── Accessibility ────────────────────────────────────────────────────────
+
+  it('group list container has an accessible label', () => {
+    const wrapper = mountView()
+    // Should have aria-label or role on the list container
+    const nav = wrapper.find('[aria-label]')
+    expect(nav.exists()).toBe(true)
+  })
+
+  it('cell ids in member table use mono font class', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    await groupBtns[0]!.trigger('click')
+    // cell-id span should have mono class
+    const monoSpan = wrapper.find('.groups__member-id')
+    expect(monoSpan.exists()).toBe(true)
+  })
+})
diff --git a/packages/devboard/src/views/GroupsView.vue b/packages/devboard/src/views/GroupsView.vue
new file mode 100644
index 0000000..2a08535
--- /dev/null
+++ b/packages/devboard/src/views/GroupsView.vue
@@ -0,0 +1,532 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useCellsStore } from '../stores/useCellsStore'
+import { SMART_GROUPS, groupMembers, type SmartGroup } from '../data/smartGroups'
+
+const { t } = useI18n()
+
+const store = useCellsStore()
+const cells = computed(() => store.cells ?? [])
+
+// ── Search ─────────────────────────────────────────────────────────────────
+const searchQuery = ref('')
+
+const filteredGroups = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase()
+  if (q === '') return SMART_GROUPS
+  return SMART_GROUPS.filter((g) => t(g.nameKey).toLowerCase().includes(q))
+})
+
+// ── Selection (default to first group) ────────────────────────────────────
+const selectedGroupId = ref<string | null>(
+  SMART_GROUPS[0] !== undefined ? SMART_GROUPS[0].id : null,
+)
+
+const selectedGroup = computed<SmartGroup | null>(() => {
+  if (selectedGroupId.value === null) return null
+  return SMART_GROUPS.find((g) => g.id === selectedGroupId.value) ?? null
+})
+
+function selectGroup(id: string): void {
+  selectedGroupId.value = id
+}
+
+// ── Members (real-time derived) ────────────────────────────────────────────
+const selectedMembers = computed(() => {
+  if (selectedGroup.value === null) return []
+  return groupMembers(selectedGroup.value, cells.value)
+})
+
+// ── Predicate op symbol map (resolved via i18n keys) ──────────────────────
+// The actual symbol (= ≠ ≥ etc.) lives in i18n values, not hardcoded here.
+function memberCount(group: SmartGroup): number {
+  return groupMembers(group, cells.value).length
+}
+</script>
+
+<template>
+  <div class="groups">
+    <!-- ── Header ──────────────────────────────────────────────────────── -->
+    <div class="groups__head">
+      <div class="groups__title-group">
+        <h1 class="groups__h1">
+          {{ t('groups.title') }}
+          <span class="groups__count">{{ t('groups.count', { n: SMART_GROUPS.length }) }}</span>
+          <span class="groups__preview-badge" role="status">
+            {{ t('groups.preview.label') }}
+          </span>
+        </h1>
+        <p class="groups__subtitle">{{ t('groups.subtitle') }}</p>
+      </div>
+      <p class="groups__preview-note" role="note">
+        {{ t('groups.preview.note') }}
+      </p>
+    </div>
+
+    <!-- ── Two-column layout ───────────────────────────────────────────── -->
+    <div class="groups__body">
+      <!-- ── Left: Group list ──────────────────────────────────────────── -->
+      <nav class="groups__list" :aria-label="t('groups.listLabel')">
+        <!-- Search -->
+        <div class="groups__search-wrap">
+          <label for="groups-search" class="groups__search-label">
+            {{ t('groups.search.label') }}
+          </label>
+          <input
+            id="groups-search"
+            v-model="searchQuery"
+            type="search"
+            class="groups__search"
+            :placeholder="t('groups.search.placeholder')"
+          />
+        </div>
+
+        <!-- Group rows -->
+        <template v-if="filteredGroups.length > 0">
+          <button
+            v-for="group in filteredGroups"
+            :key="group.id"
+            class="groups__group-btn"
+            data-testid="group-btn"
+            :aria-pressed="selectedGroupId === group.id ? 'true' : 'false'"
+            :aria-current="selectedGroupId === group.id ? 'true' : undefined"
+            @click="selectGroup(group.id)"
+          >
+            <span class="groups__group-name">{{ t(group.nameKey) }}</span>
+            <span class="groups__group-count">{{
+              t('groups.detail.memberCount', { n: memberCount(group) })
+            }}</span>
+          </button>
+        </template>
+        <template v-else>
+          <p class="groups__empty">{{ t('groups.empty') }}</p>
+        </template>
+      </nav>
+
+      <!-- ── Right: Detail panel ───────────────────────────────────────── -->
+      <section class="groups__detail" aria-live="polite">
+        <template v-if="selectedGroup !== null">
+          <!-- Group name + description -->
+          <h2 class="groups__detail-title">{{ t(selectedGroup.nameKey) }}</h2>
+          <p class="groups__detail-desc">{{ t(selectedGroup.descKey) }}</p>
+
+          <!-- Query / Predicates -->
+          <div class="groups__query-block">
+            <h3 class="groups__block-heading">{{ t('groups.detail.query') }}</h3>
+            <div class="groups__predicates">
+              <template
+                v-for="(predicate, idx) in selectedGroup.predicates"
+                :key="`${predicate.field}-${predicate.op}-${predicate.value}`"
+              >
+                <span v-if="idx > 0" class="groups__and-sep" aria-hidden="true">{{
+                  t('groups.detail.and')
+                }}</span>
+                <span class="groups__predicate-chip" data-testid="predicate-chip">
+                  <span class="groups__pred-field">{{ t(`groups.field.${predicate.field}`) }}</span>
+                  <span class="groups__pred-op">{{ t(`groups.op.${predicate.op}`) }}</span>
+                  <span class="groups__pred-value">{{ predicate.value }}</span>
+                </span>
+              </template>
+            </div>
+          </div>
+
+          <!-- Members -->
+          <div class="groups__members-block">
+            <h3 class="groups__block-heading">
+              {{ t('groups.detail.members') }}
+              <span class="groups__member-count-badge">{{
+                t('groups.detail.memberCount', { n: selectedMembers.length })
+              }}</span>
+            </h3>
+
+            <template v-if="selectedMembers.length > 0">
+              <div class="groups__table-wrap">
+                <table class="groups__table">
+                  <thead>
+                    <tr>
+                      <th scope="col">{{ t('groups.member.cell') }}</th>
+                      <th scope="col">{{ t('groups.member.domain') }}</th>
+                      <th scope="col">{{ t('groups.member.tier') }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="cell in selectedMembers" :key="cell.id" class="groups__member-row">
+                      <td>
+                        <span class="groups__member-id">{{ cell.id }}</span>
+                      </td>
+                      <td class="groups__member-domain">{{ cell.domain }}</td>
+                      <td>
+                        <span class="groups__tier-chip">{{ cell.consistencyLevel }}</span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </template>
+            <template v-else>
+              <p class="groups__no-members">{{ t('groups.detail.noMembers') }}</p>
+            </template>
+          </div>
+        </template>
+        <template v-else>
+          <p class="groups__detail-empty">{{ t('groups.detail.empty') }}</p>
+        </template>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── Root ──────────────────────────────────────────────────────────────── */
+.groups {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ── Header ────────────────────────────────────────────────────────────── */
+.groups__head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.groups__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.groups__h1 {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--fg);
+  font-family: var(--font-sans);
+}
+
+.groups__count {
+  font-size: var(--text-sm);
+  font-weight: 400;
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+}
+
+.groups__preview-badge {
+  display: inline-block;
+  padding: 1px 8px;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  font-family: var(--font-sans);
+  color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
+  border-radius: var(--r-pill);
+  white-space: nowrap;
+}
+
+.groups__subtitle {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+.groups__preview-note {
+  margin: 0;
+  padding: 8px 12px;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  background: var(--bg-sunken);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r);
+}
+
+/* ── Two-column body ───────────────────────────────────────────────────── */
+.groups__body {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 16px;
+  align-items: start;
+  min-height: 0;
+}
+
+/* ── Left list ─────────────────────────────────────────────────────────── */
+.groups__list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  overflow: hidden;
+  background: var(--bg);
+  box-shadow: var(--shadow-sm);
+}
+
+.groups__search-wrap {
+  padding: 8px;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.groups__search-label {
+  /* visually hidden, linked via for/id */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.groups__search {
+  width: 100%;
+  min-height: 30px;
+  padding: 4px 8px;
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  color: var(--fg);
+  background: var(--bg-sunken);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.groups__search:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.groups__group-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  color: var(--fg-muted);
+  background: var(--bg);
+  border: none;
+  border-bottom: 1px solid var(--line-soft);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background 100ms,
+    color 100ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .groups__group-btn {
+    transition: none;
+  }
+}
+
+.groups__group-btn:last-child {
+  border-bottom: none;
+}
+
+.groups__group-btn[aria-pressed='true'] {
+  background: var(--bg-sunken);
+  color: var(--fg);
+  font-weight: 500;
+  border-left: 2px solid var(--accent);
+  padding-left: 10px;
+}
+
+.groups__group-btn:hover:not([aria-pressed='true']) {
+  background: var(--bg-sunken);
+  color: var(--fg);
+}
+
+.groups__group-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.groups__group-name {
+  flex: 1;
+}
+
+.groups__group-count {
+  flex-shrink: 0;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--fg-faint);
+}
+
+.groups__group-btn[aria-pressed='true'] .groups__group-count {
+  color: var(--fg-muted);
+}
+
+.groups__empty {
+  padding: 20px 12px;
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  text-align: center;
+}
+
+/* ── Detail panel ──────────────────────────────────────────────────────── */
+.groups__detail {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  background: var(--bg);
+  box-shadow: var(--shadow-sm);
+  min-height: 240px;
+}
+
+.groups__detail-empty {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+.groups__detail-title {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--fg);
+  font-family: var(--font-sans);
+}
+
+.groups__detail-desc {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+
+.groups__block-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 10px;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ── Predicates ────────────────────────────────────────────────────────── */
+.groups__predicates {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.groups__predicate-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  color: var(--fg);
+  background: var(--bg-sunken);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+}
+
+.groups__pred-op {
+  color: var(--accent);
+}
+
+.groups__pred-value {
+  font-weight: 500;
+}
+
+.groups__and-sep {
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--fg-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ── Members ───────────────────────────────────────────────────────────── */
+.groups__member-count-badge {
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--fg-faint);
+}
+
+.groups__table-wrap {
+  overflow-x: auto;
+}
+
+.groups__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--fg);
+}
+
+.groups__table thead th {
+  padding: 6px 10px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--fg-muted);
+  border-bottom: 1px solid var(--line-soft);
+  white-space: nowrap;
+}
+
+.groups__table tbody td {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line-soft);
+  vertical-align: middle;
+}
+
+.groups__member-row:last-child td {
+  border-bottom: none;
+}
+
+.groups__member-row:hover td {
+  background: var(--bg-sunken);
+}
+
+.groups__member-id {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--fg);
+}
+
+.groups__member-domain {
+  color: var(--fg-muted);
+}
+
+.groups__tier-chip {
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--fg-muted);
+  background: var(--bg-sunken);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+}
+
+.groups__no-members {
+  margin: 0;
+  padding: 16px 0;
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+</style>

From 38ab86c7e0ee5539e40c18e92ee0f9b50ef8369b Mon Sep 17 00:00:00 2001
From: ghbvf <104540935+ghbvf@users.noreply.github.com>
Date: Wed, 3 Jun 2026 05:57:41 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix(devboard):=20PR=20#37=20=E5=85=AD?=
 =?UTF-8?q?=E7=BB=B4=E5=BA=A6=20review=20=E2=80=94=20i18n=20=E7=BC=BA?=
 =?UTF-8?q?=E9=94=AE=20+=20a11y=20+=20=E7=B1=BB=E5=9E=8B/=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

review 实跑 6 reviewer（diff≥1500），修复全部 Cx1/Cx2 IN_SCOPE finding：

i18n（最关键，运行时 bug）:
- 补全 10 个被引用但未定义的 key（contracts.detail.{panelLabel,kind}、
  contracts.kind.filterLabel、coverage.{empty,kpi.regionLabel,legend.regionLabel,
  filter.groupLabel}、deps.detail.{label,close}、groups.detail.and）——vue-i18n
  非 key-typed + spec mock t 导致 typecheck/test/build 全过、仅 review 抓到。
  另补 deps.list.tableLabel 供 a11y 修复用。zh-CN + en-US 同步，MessageSchema 校验。

a11y:
- CoverageView: aria-label 漏冒号绑定（渲染字面量）→ :aria-label；section
  heading scope=colgroup → role=rowheader。
- ContractsView: <tr aria-selected>（table 角色非法）→ aria-current。
- GovernanceGatesPanel: 删除徽章重复 aria-label（保留 sr-only），避免双重朗读。
- DepsTreeView: 递归子树叶节点补 sr-only leaf 文本；外层 div+aria-label 无 role
  → section + aria-labelledby。
- DepsViewBar: aria-controls 覆盖所有 tab（panel 常驻 DOM，APG）。
- DepsListView / GroupsView: 表格补 aria-label / aria-labelledby；groups 详情区补标签。

类型/性能:
- ContractsView: selectedEnvelope computed 消除 responseEnvelopeFor 重复调用 + ! 断言；合并同源 import。
- useRovingTablist 泛型化 <T extends string = string>，DepsViewBar 去 as 强转（CellTabBar 向后兼容）。
- DepsGraphView: SVG font-size=11 魔法数字 → CSS class var(--text-xs)；边 :key 用稳定 from-to。
- GroupsView: 去冗余 ?? []；memberCount 改 computed Map 备忘。
- DepsTreeView 递归子组件 emits 类型化。

延后（OUT_OF_SCOPE 既有债，非本 PR 文件）：CellDetailView v1-mono 未定义类、
CellsListView ?? [] 冗余。

devboard 366 测试绿、覆盖率 98%；apps/web 74 绿、build OK；-w lint/typecheck 0 issue。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/core/src/i18n/messages/en-US.ts      | 11 ++++++++
 packages/core/src/i18n/messages/zh-CN.ts      | 11 ++++++++
 .../contracts/GovernanceGatesPanel.vue        |  6 +----
 .../src/components/deps/DepsGraphView.vue     | 10 +++++---
 .../src/components/deps/DepsListView.vue      |  2 +-
 .../src/components/deps/DepsTreeView.vue      | 13 +++++++---
 .../src/components/deps/DepsViewBar.spec.ts   |  8 +++---
 .../src/components/deps/DepsViewBar.vue       |  6 ++---
 .../src/components/deps/DepsViews.spec.ts     | 25 +++++++++++++++++++
 .../src/composables/useRovingTablist.ts       | 18 +++++++------
 .../devboard/src/views/ContractsView.spec.ts  |  4 +--
 packages/devboard/src/views/ContractsView.vue | 14 +++++++----
 .../devboard/src/views/CoverageView.spec.ts   | 13 ++++++++++
 packages/devboard/src/views/CoverageView.vue  |  6 ++---
 packages/devboard/src/views/DepsView.vue      |  8 +++---
 .../devboard/src/views/GroupsView.spec.ts     | 17 +++++++++++++
 packages/devboard/src/views/GroupsView.vue    | 19 +++++++-------
 17 files changed, 139 insertions(+), 52 deletions(-)

diff --git a/packages/core/src/i18n/messages/en-US.ts b/packages/core/src/i18n/messages/en-US.ts
index 3cc3788..649b889 100644
--- a/packages/core/src/i18n/messages/en-US.ts
+++ b/packages/core/src/i18n/messages/en-US.ts
@@ -843,6 +843,7 @@ const enUS = {
       all: 'All',
       http: 'HTTP',
       event: 'Event',
+      filterLabel: 'Filter by kind',
     },
     table: {
       contract: 'Contract',
@@ -874,6 +875,7 @@ const enUS = {
     },
     detail: {
       empty: 'Select a contract to see details.',
+      panelLabel: 'Contract details',
       servers: 'Served by',
       callers: 'Called by',
       none: 'None',
@@ -881,6 +883,7 @@ const enUS = {
       envelopeNone: 'No response envelope snapshot for this contract.',
       status: 'Status',
       object: 'Response struct',
+      kind: 'Response kind',
     },
     envelopeKind: {
       success: 'Success response',
@@ -904,6 +907,7 @@ const enUS = {
       dependsOn: 'Depends on',
       requiredBy: 'Required by',
       none: 'None',
+      tableLabel: 'Cell dependency list',
     },
     matrix: {
       caption: 'Cell dependency matrix: rows depend on columns.',
@@ -921,6 +925,8 @@ const enUS = {
     },
     detail: {
       empty: 'Select a cell to see its dependencies.',
+      label: 'Cell dependency detail',
+      close: 'Dismiss',
       dependsOn: 'Depends on',
       requiredBy: 'Required by',
       none: 'None',
@@ -932,12 +938,14 @@ const enUS = {
     title: 'gocell-web ↔ devboard coverage',
     subtitle: 'Design routes vs shipped Vue views. Hand-maintained; truth source dev-coverage.jsx.',
     kpi: {
+      regionLabel: 'KPI summary',
       shipped: 'Routes shipped',
       drafted: 'Routes drafted',
       gaps: 'Gaps to close',
       outOfScope: 'Out of scope',
     },
     legend: {
+      regionLabel: 'Legend',
       matched: 'Matched',
       partial: 'Partial',
       designOnly: 'Design-only',
@@ -945,6 +953,7 @@ const enUS = {
       outOfScope: 'Out of scope',
     },
     filter: {
+      groupLabel: 'Filter by status',
       all: 'All',
       matched: 'Matched',
       partial: 'Partial',
@@ -966,6 +975,7 @@ const enUS = {
     },
     caption: 'gocell-web implementation progress against design coverage.',
     none: '—',
+    empty: 'No capabilities match the current filter.',
     section: {
       auth: 'Auth & onboarding',
       meta: 'Meta',
@@ -1012,6 +1022,7 @@ const enUS = {
     detail: {
       empty: 'Select a group to see its rule and members.',
       query: 'Rule',
+      and: 'AND',
       members: 'Members',
       memberCount: '{n} members',
       noMembers: 'No cell currently satisfies this rule.',
diff --git a/packages/core/src/i18n/messages/zh-CN.ts b/packages/core/src/i18n/messages/zh-CN.ts
index ac17ef3..3c005fb 100644
--- a/packages/core/src/i18n/messages/zh-CN.ts
+++ b/packages/core/src/i18n/messages/zh-CN.ts
@@ -830,6 +830,7 @@ const zhCN = {
       all: '全部',
       http: 'HTTP',
       event: '事件',
+      filterLabel: '按类型筛选',
     },
     table: {
       contract: '契约',
@@ -861,6 +862,7 @@ const zhCN = {
     },
     detail: {
       empty: '选择一个契约查看详情。',
+      panelLabel: '契约详情',
       servers: '提供方',
       callers: '调用方',
       none: '无',
@@ -868,6 +870,7 @@ const zhCN = {
       envelopeNone: '该契约暂无响应信封快照。',
       status: '状态码',
       object: '响应结构',
+      kind: '响应类型',
     },
     envelopeKind: {
       success: '成功响应',
@@ -891,6 +894,7 @@ const zhCN = {
       dependsOn: '依赖',
       requiredBy: '被依赖',
       none: '无',
+      tableLabel: 'cell 依赖列表',
     },
     matrix: {
       caption: 'cell 依赖矩阵：行依赖列。',
@@ -908,6 +912,8 @@ const zhCN = {
     },
     detail: {
       empty: '选择一个 cell 查看其依赖。',
+      label: 'Cell 依赖详情',
+      close: '关闭',
       dependsOn: '依赖',
       requiredBy: '被依赖',
       none: '无',
@@ -919,12 +925,14 @@ const zhCN = {
     title: 'gocell-web ↔ devboard 覆盖矩阵',
     subtitle: '设计稿路由与已实现 Vue 视图的对照进度。手工维护，真相源 dev-coverage.jsx。',
     kpi: {
+      regionLabel: 'KPI 汇总',
       shipped: '已交付路由',
       drafted: '设计稿路由',
       gaps: '待补差距',
       outOfScope: '范围外',
     },
     legend: {
+      regionLabel: '图例',
       matched: '已对齐',
       partial: '部分',
       designOnly: '仅设计',
@@ -932,6 +940,7 @@ const zhCN = {
       outOfScope: '范围外',
     },
     filter: {
+      groupLabel: '按状态筛选',
       all: '全部',
       matched: '已对齐',
       partial: '部分',
@@ -953,6 +962,7 @@ const zhCN = {
     },
     caption: 'gocell-web 实现进度与设计稿覆盖对照矩阵。',
     none: '—',
+    empty: '当前筛选无匹配的能力。',
     section: {
       auth: '认证与引导',
       meta: 'Meta',
@@ -999,6 +1009,7 @@ const zhCN = {
     detail: {
       empty: '选择一个分组查看规则与成员。',
       query: '规则',
+      and: 'AND',
       members: '成员',
       memberCount: '{n} 个成员',
       noMembers: '当前无 cell 满足该规则。',
diff --git a/packages/devboard/src/components/contracts/GovernanceGatesPanel.vue b/packages/devboard/src/components/contracts/GovernanceGatesPanel.vue
index 7d0eb35..b94f2df 100644
--- a/packages/devboard/src/components/contracts/GovernanceGatesPanel.vue
+++ b/packages/devboard/src/components/contracts/GovernanceGatesPanel.vue
@@ -32,11 +32,7 @@ function verdictKey(verdict: GateVerdict): string {
 
         <span class="gates-panel__desc">{{ t(gate.descKey) }}</span>
 
-        <span
-          class="gates-panel__badge"
-          :class="`gates-panel__badge--${gate.verdict}`"
-          :aria-label="t(verdictKey(gate.verdict))"
-        >
+        <span class="gates-panel__badge" :class="`gates-panel__badge--${gate.verdict}`">
           <span class="sr-only">{{ t(verdictKey(gate.verdict)) }}</span>
           <span aria-hidden="true">{{ gate.verdict }}</span>
         </span>
diff --git a/packages/devboard/src/components/deps/DepsGraphView.vue b/packages/devboard/src/components/deps/DepsGraphView.vue
index c0c9714..4b0460c 100644
--- a/packages/devboard/src/components/deps/DepsGraphView.vue
+++ b/packages/devboard/src/components/deps/DepsGraphView.vue
@@ -126,8 +126,8 @@ const edgePaths = computed<readonly EdgePath[]>(() => {
 
       <!-- Edges -->
       <line
-        v-for="(ep, idx) in edgePaths"
-        :key="`edge-${idx}`"
+        v-for="ep in edgePaths"
+        :key="`${ep.from}-${ep.to}`"
         :x1="ep.x1"
         :y1="ep.y1"
         :x2="ep.x2"
@@ -167,7 +167,7 @@ const edgePaths = computed<readonly EdgePath[]>(() => {
           dominant-baseline="middle"
           fill="var(--fg)"
           font-family="var(--font-mono)"
-          font-size="11"
+          class="deps-graph__label"
         >
           {{ node.id }}
         </text>
@@ -201,6 +201,10 @@ const edgePaths = computed<readonly EdgePath[]>(() => {
   stroke-width: 2;
 }
 
+.deps-graph__label {
+  font-size: var(--text-xs);
+}
+
 .deps-graph__empty {
   color: var(--fg-faint);
   font-size: var(--text-sm);
diff --git a/packages/devboard/src/components/deps/DepsListView.vue b/packages/devboard/src/components/deps/DepsListView.vue
index 23edb07..461e7a1 100644
--- a/packages/devboard/src/components/deps/DepsListView.vue
+++ b/packages/devboard/src/components/deps/DepsListView.vue
@@ -15,7 +15,7 @@ const { t } = useI18n()
 
 <template>
   <div class="deps-list">
-    <table class="deps-list__table">
+    <table class="deps-list__table" :aria-label="t('deps.list.tableLabel')">
       <thead>
         <tr>
           <th scope="col" class="deps-list__th">{{ t('deps.list.cell') }}</th>
diff --git a/packages/devboard/src/components/deps/DepsTreeView.vue b/packages/devboard/src/components/deps/DepsTreeView.vue
index 54c06fa..df04f46 100644
--- a/packages/devboard/src/components/deps/DepsTreeView.vue
+++ b/packages/devboard/src/components/deps/DepsTreeView.vue
@@ -11,6 +11,8 @@ const emit = defineEmits<{
   (e: 'select', id: string): void
 }>()
 
+const CAPTION_ID = 'deps-tree-caption'
+
 const { t } = useI18n()
 
 // Inline recursive subtree renderer — avoids a separate file and the
@@ -23,7 +25,9 @@ const DepsTreeSubtree = defineComponent({
       required: true,
     },
   },
-  emits: ['select'],
+  emits: {
+    select: (id: string) => typeof id === 'string',
+  },
   setup(subtreeProps, { emit: subtreeEmit }) {
     function renderNode(node: DependencyTreeNode): ReturnType<typeof h> {
       if (node.children.length > 0) {
@@ -60,6 +64,7 @@ const DepsTreeSubtree = defineComponent({
           },
           [h('span', { class: 'deps-tree__mono' }, node.id)],
         ),
+        h('span', { class: 'sr-only' }, t('deps.tree.leaf')),
       ])
     }
 
@@ -74,8 +79,8 @@ const DepsTreeSubtree = defineComponent({
 </script>
 
 <template>
-  <div class="deps-tree" :aria-label="t('deps.tree.caption')">
-    <p class="deps-tree__caption" aria-hidden="true">{{ t('deps.tree.caption') }}</p>
+  <section class="deps-tree" :aria-labelledby="CAPTION_ID">
+    <p :id="CAPTION_ID" class="deps-tree__caption">{{ t('deps.tree.caption') }}</p>
     <ul class="deps-tree__root-list">
       <li v-for="node in forest" :key="node.id" class="deps-tree__item">
         <template v-if="node.children.length > 0">
@@ -104,7 +109,7 @@ const DepsTreeSubtree = defineComponent({
         </template>
       </li>
     </ul>
-  </div>
+  </section>
 </template>
 
 <style scoped>
diff --git a/packages/devboard/src/components/deps/DepsViewBar.spec.ts b/packages/devboard/src/components/deps/DepsViewBar.spec.ts
index 6df800a..4f058a2 100644
--- a/packages/devboard/src/components/deps/DepsViewBar.spec.ts
+++ b/packages/devboard/src/components/deps/DepsViewBar.spec.ts
@@ -66,13 +66,13 @@ describe('DepsViewBar', () => {
     expect(active.attributes('aria-controls')).toBe('deps-panel-tree')
   })
 
-  it('inactive tabs have no aria-controls attribute', () => {
+  it('all tabs have aria-controls pointing to their panel id', () => {
     const wrapper = mount(DepsViewBar, {
       props: { views: VIEWS, activeId: 'list' },
     })
-    const inactive = wrapper.findAll('[aria-selected="false"]')
-    for (const btn of inactive) {
-      expect(btn.attributes('aria-controls')).toBeUndefined()
+    for (const view of VIEWS) {
+      const btn = wrapper.find(`#deps-tab-${view.id}`)
+      expect(btn.attributes('aria-controls')).toBe(`deps-panel-${view.id}`)
     }
   })
 
diff --git a/packages/devboard/src/components/deps/DepsViewBar.vue b/packages/devboard/src/components/deps/DepsViewBar.vue
index d95d2ee..45944f3 100644
--- a/packages/devboard/src/components/deps/DepsViewBar.vue
+++ b/packages/devboard/src/components/deps/DepsViewBar.vue
@@ -18,10 +18,10 @@ const { t } = useI18n()
 const tabBtnId = (id: string) => `deps-tab-${id}`
 const panelId = (id: string) => `deps-panel-${id}`
 
-const { onKeydown } = useRovingTablist({
+const { onKeydown } = useRovingTablist<DepsViewId>({
   tabIds: () => props.views.map((v) => v.id),
   idFor: tabBtnId,
-  onActivate: (id) => emit('select', id as DepsViewId),
+  onActivate: (id) => emit('select', id),
 })
 </script>
 
@@ -34,7 +34,7 @@ const { onKeydown } = useRovingTablist({
       type="button"
       role="tab"
       :aria-selected="view.id === activeId"
-      :aria-controls="view.id === activeId ? panelId(view.id) : undefined"
+      :aria-controls="panelId(view.id)"
       :tabindex="view.id === activeId ? 0 : -1"
       class="tab-bar__btn"
       :class="{ 'tab-bar__btn--active': view.id === activeId }"
diff --git a/packages/devboard/src/components/deps/DepsViews.spec.ts b/packages/devboard/src/components/deps/DepsViews.spec.ts
index eb975ec..bb77370 100644
--- a/packages/devboard/src/components/deps/DepsViews.spec.ts
+++ b/packages/devboard/src/components/deps/DepsViews.spec.ts
@@ -97,6 +97,12 @@ describe('DepsListView', () => {
     expect(wrapper.emitted('select')).toBeTruthy()
     expect(typeof wrapper.emitted('select')?.[0]?.[0]).toBe('string')
   })
+
+  it('table has aria-label from i18n key', () => {
+    const wrapper = mount(DepsListView, { props: { cells: CELLS } })
+    const table = wrapper.find('table')
+    expect(table.attributes('aria-label')).toBe('deps.list.tableLabel')
+  })
 })
 
 // ─── DepsGraphView ─────────────────────────────────────────────────────────
@@ -217,6 +223,25 @@ describe('DepsTreeView', () => {
     expect(wrapper.find('.sr-only').exists()).toBe(true)
     expect(wrapper.find('.sr-only').text()).toBe('deps.tree.leaf')
   })
+
+  it('leaf nodes inside subtrees also have sr-only text', () => {
+    // auditcore is root; accesscore is its child; configcore is leaf inside subtree
+    const wrapper = mount(DepsTreeView, { props: { forest: FOREST } })
+    const srOnlyNodes = wrapper.findAll('.sr-only').filter((el) => el.text() === 'deps.tree.leaf')
+    // There must be at least one sr-only leaf inside a subtree
+    expect(srOnlyNodes.length).toBeGreaterThan(0)
+  })
+
+  it('outer wrapper is a section with aria-labelledby pointing to caption', () => {
+    const wrapper = mount(DepsTreeView, { props: { forest: FOREST } })
+    const section = wrapper.find('section.deps-tree')
+    expect(section.exists()).toBe(true)
+    const captionId = section.attributes('aria-labelledby')
+    expect(captionId).toBeTruthy()
+    const caption = wrapper.find(`#${captionId}`)
+    expect(caption.exists()).toBe(true)
+    expect(caption.text()).toBe('deps.tree.caption')
+  })
 })
 
 // ─── DepsMatrixView ────────────────────────────────────────────────────────
diff --git a/packages/devboard/src/composables/useRovingTablist.ts b/packages/devboard/src/composables/useRovingTablist.ts
index ff9365c..24e2f06 100644
--- a/packages/devboard/src/composables/useRovingTablist.ts
+++ b/packages/devboard/src/composables/useRovingTablist.ts
@@ -7,25 +7,27 @@
  * Blinding coverage: does not handle vertical arrow keys (ArrowUp/Down),
  * nor does it update tabindex attributes — that is the caller's responsibility.
  */
-export interface RovingTablistOptions {
+export interface RovingTablistOptions<T extends string = string> {
   /** Returns the ordered list of tab ids (called on every keydown for live lists). */
-  tabIds: () => readonly string[]
+  tabIds: () => readonly T[]
   /** Maps a tab id to the DOM element id of its button. */
-  idFor: (id: string) => string
+  idFor: (id: T) => string
   /**
    * Optional automatic-activation callback (APG pattern).
    * Called with the target tab id after focus moves on Arrow/Home/End.
    * Keeps roving "home" position in sync with the active tab.
    */
-  onActivate?: ((id: string) => void) | undefined
+  onActivate?: ((id: T) => void) | undefined
 }
 
-export interface RovingTablistReturn {
-  onKeydown(e: KeyboardEvent, currentId: string): void
+export interface RovingTablistReturn<T extends string = string> {
+  onKeydown(e: KeyboardEvent, currentId: T): void
 }
 
-export function useRovingTablist(opts: RovingTablistOptions): RovingTablistReturn {
-  function onKeydown(e: KeyboardEvent, currentId: string): void {
+export function useRovingTablist<T extends string = string>(
+  opts: RovingTablistOptions<T>,
+): RovingTablistReturn<T> {
+  function onKeydown(e: KeyboardEvent, currentId: T): void {
     const ids = opts.tabIds()
     const current = ids.indexOf(currentId)
     if (current === -1) return
diff --git a/packages/devboard/src/views/ContractsView.spec.ts b/packages/devboard/src/views/ContractsView.spec.ts
index 2b999e4..40790b8 100644
--- a/packages/devboard/src/views/ContractsView.spec.ts
+++ b/packages/devboard/src/views/ContractsView.spec.ts
@@ -153,11 +153,11 @@ describe('ContractsView', () => {
     expect(wrapper.text()).toContain('contracts.detail.empty')
   })
 
-  it('clicking a row sets aria-selected on that row', async () => {
+  it('clicking a row sets aria-current on that row', async () => {
     const wrapper = mountView()
     const firstRow = wrapper.find('tbody tr')
     await firstRow.trigger('click')
-    expect(firstRow.attributes('aria-selected')).toBe('true')
+    expect(firstRow.attributes('aria-current')).toBe('true')
   })
 
   it('table contains expected column headers', () => {
diff --git a/packages/devboard/src/views/ContractsView.vue b/packages/devboard/src/views/ContractsView.vue
index 952cc60..8cd3987 100644
--- a/packages/devboard/src/views/ContractsView.vue
+++ b/packages/devboard/src/views/ContractsView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useContractsRegistry } from '../composables/useContractsRegistry'
-import { responseEnvelopeFor } from '../data/responseEnvelopes'
-import type { EnvelopeKind } from '../data/responseEnvelopes'
+import { responseEnvelopeFor, type EnvelopeKind } from '../data/responseEnvelopes'
 import GovernanceGatesPanel from '../components/contracts/GovernanceGatesPanel.vue'
 
 const { t } = useI18n()
@@ -12,6 +12,10 @@ const { registry, query, kindFilter, filtered, selectedContract, selectedEntry,
 
 const KIND_OPTIONS = ['all', 'http', 'event'] as const
 
+const selectedEnvelope = computed(() =>
+  selectedEntry.value ? responseEnvelopeFor(selectedEntry.value.contract) : null,
+)
+
 function envelopeKindKey(kind: EnvelopeKind): string {
   if (kind === '2xx') return 'contracts.envelopeKind.success'
   if (kind === '4xx') return 'contracts.envelopeKind.clientError'
@@ -87,7 +91,7 @@ function envelopeKindKey(kind: EnvelopeKind): string {
                 :key="entry.contract"
                 class="contracts__row"
                 :class="{ 'contracts__row--selected': selectedContract === entry.contract }"
-                :aria-selected="selectedContract === entry.contract ? 'true' : 'false'"
+                :aria-current="selectedContract === entry.contract ? 'true' : undefined"
                 tabindex="0"
                 @click="select(entry.contract)"
                 @keydown.enter="select(entry.contract)"
@@ -169,7 +173,7 @@ function envelopeKindKey(kind: EnvelopeKind): string {
               <h3 class="contracts__detail-section-title">
                 {{ t('contracts.detail.envelope') }}
               </h3>
-              <template v-if="responseEnvelopeFor(selectedEntry.contract) !== null">
+              <template v-if="selectedEnvelope !== null">
                 <table class="contracts__envelope-table">
                   <thead>
                     <tr>
@@ -180,7 +184,7 @@ function envelopeKindKey(kind: EnvelopeKind): string {
                   </thead>
                   <tbody>
                     <tr
-                      v-for="envEntry in responseEnvelopeFor(selectedEntry.contract)!"
+                      v-for="envEntry in selectedEnvelope"
                       :key="envEntry.status"
                       class="contracts__envelope-row"
                     >
diff --git a/packages/devboard/src/views/CoverageView.spec.ts b/packages/devboard/src/views/CoverageView.spec.ts
index afaa311..8afcb10 100644
--- a/packages/devboard/src/views/CoverageView.spec.ts
+++ b/packages/devboard/src/views/CoverageView.spec.ts
@@ -280,6 +280,19 @@ describe('CoverageView', () => {
     }
   })
 
+  it('coverage.none span has :aria-label bound to t("coverage.none") (not static literal)', () => {
+    const wrapper = mountView()
+    const noneSpans = wrapper.findAll('.coverage__none')
+    // At least one none-span must exist (matrix has null web/design refs)
+    expect(noneSpans.length).toBeGreaterThan(0)
+    noneSpans.forEach((span) => {
+      // With identity mock, t('coverage.none') returns 'coverage.none'
+      // Correct binding: :aria-label="t('coverage.none')" → attribute = 'coverage.none'
+      // Bug form: aria-label="t('coverage.none')" → attribute = literal string "t('coverage.none')"
+      expect(span.attributes('aria-label')).toBe('coverage.none')
+    })
+  })
+
   it('route references are rendered in data rows', () => {
     const wrapper = mountView()
     const text = wrapper.text()
diff --git a/packages/devboard/src/views/CoverageView.vue b/packages/devboard/src/views/CoverageView.vue
index b78aeb8..47ddd27 100644
--- a/packages/devboard/src/views/CoverageView.vue
+++ b/packages/devboard/src/views/CoverageView.vue
@@ -186,7 +186,7 @@ const FILTER_VALUES: readonly FilterValue[] = ['all', ...COVERAGE_STATUSES]
           <template v-for="section in filteredSections" :key="section.titleKey">
             <!-- Section heading row -->
             <tr class="coverage__section-row" data-section>
-              <th colspan="3" scope="colgroup" class="coverage__section-heading">
+              <th colspan="3" role="rowheader" class="coverage__section-heading">
                 {{ t(section.titleKey) }}
               </th>
             </tr>
@@ -214,7 +214,7 @@ const FILTER_VALUES: readonly FilterValue[] = ['all', ...COVERAGE_STATUSES]
                 >
                 <span class="sr-only">{{ t(`coverage.status.${STATUS_CAMEL[row.status]}`) }}</span>
                 <code v-if="row.web !== null" class="coverage__ref">{{ row.web }}</code>
-                <span v-else class="coverage__none" aria-label="t('coverage.none')">{{
+                <span v-else class="coverage__none" :aria-label="t('coverage.none')">{{
                   t('coverage.none')
                 }}</span>
               </td>
@@ -229,7 +229,7 @@ const FILTER_VALUES: readonly FilterValue[] = ['all', ...COVERAGE_STATUSES]
                 >
                 <span class="sr-only">{{ t(`coverage.status.${STATUS_CAMEL[row.status]}`) }}</span>
                 <code v-if="row.design !== null" class="coverage__ref">{{ row.design }}</code>
-                <span v-else class="coverage__none" aria-label="t('coverage.none')">{{
+                <span v-else class="coverage__none" :aria-label="t('coverage.none')">{{
                   t('coverage.none')
                 }}</span>
               </td>
diff --git a/packages/devboard/src/views/DepsView.vue b/packages/devboard/src/views/DepsView.vue
index 4312b5e..cba4d6d 100644
--- a/packages/devboard/src/views/DepsView.vue
+++ b/packages/devboard/src/views/DepsView.vue
@@ -50,7 +50,7 @@ function onSelectView(id: DepsViewId): void {
         <section
           :id="panelId('list')"
           role="tabpanel"
-          :aria-labelledby="`deps-tab-list`"
+          aria-labelledby="deps-tab-list"
           class="deps-view__panel"
           :class="{ 'deps-view__panel--hidden': activeView !== 'list' }"
           :hidden="activeView !== 'list'"
@@ -62,7 +62,7 @@ function onSelectView(id: DepsViewId): void {
         <section
           :id="panelId('graph')"
           role="tabpanel"
-          :aria-labelledby="`deps-tab-graph`"
+          aria-labelledby="deps-tab-graph"
           class="deps-view__panel"
           :class="{ 'deps-view__panel--hidden': activeView !== 'graph' }"
           :hidden="activeView !== 'graph'"
@@ -79,7 +79,7 @@ function onSelectView(id: DepsViewId): void {
         <section
           :id="panelId('tree')"
           role="tabpanel"
-          :aria-labelledby="`deps-tab-tree`"
+          aria-labelledby="deps-tab-tree"
           class="deps-view__panel"
           :class="{ 'deps-view__panel--hidden': activeView !== 'tree' }"
           :hidden="activeView !== 'tree'"
@@ -91,7 +91,7 @@ function onSelectView(id: DepsViewId): void {
         <section
           :id="panelId('matrix')"
           role="tabpanel"
-          :aria-labelledby="`deps-tab-matrix`"
+          aria-labelledby="deps-tab-matrix"
           class="deps-view__panel"
           :class="{ 'deps-view__panel--hidden': activeView !== 'matrix' }"
           :hidden="activeView !== 'matrix'"
diff --git a/packages/devboard/src/views/GroupsView.spec.ts b/packages/devboard/src/views/GroupsView.spec.ts
index 412caad..e303c4e 100644
--- a/packages/devboard/src/views/GroupsView.spec.ts
+++ b/packages/devboard/src/views/GroupsView.spec.ts
@@ -254,6 +254,23 @@ describe('GroupsView', () => {
     expect(nav.exists()).toBe(true)
   })
 
+  it('detail section has aria-live="polite" and an aria-label', () => {
+    const wrapper = mountView()
+    const section = wrapper.find('section[aria-live="polite"]')
+    expect(section.exists()).toBe(true)
+    expect(section.attributes('aria-label')).toBeTruthy()
+  })
+
+  it('members table has aria-labelledby pointing to the members heading id', async () => {
+    const wrapper = mountView()
+    const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
+    await groupBtns[0]!.trigger('click')
+    const heading = wrapper.find('#groups-members-heading')
+    expect(heading.exists()).toBe(true)
+    const table = wrapper.find('table[aria-labelledby="groups-members-heading"]')
+    expect(table.exists()).toBe(true)
+  })
+
   it('cell ids in member table use mono font class', async () => {
     const wrapper = mountView()
     const groupBtns = wrapper.findAll('[data-testid="group-btn"]')
diff --git a/packages/devboard/src/views/GroupsView.vue b/packages/devboard/src/views/GroupsView.vue
index 2a08535..7b8d1d3 100644
--- a/packages/devboard/src/views/GroupsView.vue
+++ b/packages/devboard/src/views/GroupsView.vue
@@ -7,7 +7,7 @@ import { SMART_GROUPS, groupMembers, type SmartGroup } from '../data/smartGroups
 const { t } = useI18n()
 
 const store = useCellsStore()
-const cells = computed(() => store.cells ?? [])
+const cells = computed(() => store.cells)
 
 // ── Search ─────────────────────────────────────────────────────────────────
 const searchQuery = ref('')
@@ -38,11 +38,10 @@ const selectedMembers = computed(() => {
   return groupMembers(selectedGroup.value, cells.value)
 })
 
-// ── Predicate op symbol map (resolved via i18n keys) ──────────────────────
-// The actual symbol (= ≠ ≥ etc.) lives in i18n values, not hardcoded here.
-function memberCount(group: SmartGroup): number {
-  return groupMembers(group, cells.value).length
-}
+// ── Member counts precomputed (perf: avoid re-running groupMembers per render) ──
+const groupMemberCounts = computed(
+  () => new Map(SMART_GROUPS.map((g) => [g.id, groupMembers(g, cells.value).length])),
+)
 </script>
 
 <template>
@@ -95,7 +94,7 @@ function memberCount(group: SmartGroup): number {
           >
             <span class="groups__group-name">{{ t(group.nameKey) }}</span>
             <span class="groups__group-count">{{
-              t('groups.detail.memberCount', { n: memberCount(group) })
+              t('groups.detail.memberCount', { n: groupMemberCounts.get(group.id) ?? 0 })
             }}</span>
           </button>
         </template>
@@ -105,7 +104,7 @@ function memberCount(group: SmartGroup): number {
       </nav>
 
       <!-- ── Right: Detail panel ───────────────────────────────────────── -->
-      <section class="groups__detail" aria-live="polite">
+      <section class="groups__detail" aria-live="polite" :aria-label="t('groups.title')">
         <template v-if="selectedGroup !== null">
           <!-- Group name + description -->
           <h2 class="groups__detail-title">{{ t(selectedGroup.nameKey) }}</h2>
@@ -133,7 +132,7 @@ function memberCount(group: SmartGroup): number {
 
           <!-- Members -->
           <div class="groups__members-block">
-            <h3 class="groups__block-heading">
+            <h3 id="groups-members-heading" class="groups__block-heading">
               {{ t('groups.detail.members') }}
               <span class="groups__member-count-badge">{{
                 t('groups.detail.memberCount', { n: selectedMembers.length })
@@ -142,7 +141,7 @@ function memberCount(group: SmartGroup): number {
 
             <template v-if="selectedMembers.length > 0">
               <div class="groups__table-wrap">
-                <table class="groups__table">
+                <table class="groups__table" aria-labelledby="groups-members-heading">
                   <thead>
                     <tr>
                       <th scope="col">{{ t('groups.member.cell') }}</th>

From 63a8fe67122cddbbf0bc25e49bd232fd36ef5844 Mon Sep 17 00:00:00 2001
From: ghbvf <104540935+ghbvf@users.noreply.github.com>
Date: Wed, 3 Jun 2026 06:49:16 +0800
Subject: [PATCH 3/4] fix(contracts): regen audit/list/v1 response for backend
 traceId field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

后端 ghbvf/gocell e5670302e（trace_id → audit reverse lookup）给 http/audit/list/v1
response 增加了 traceId 字段。codegen-readonly CI 对最新后端默认分支重新派生时检出
本仓库生成物漂移而变红。本地 `pnpm codegen` 后提交，解除门禁。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/contracts/src/http/audit/list/v1/response.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/contracts/src/http/audit/list/v1/response.ts b/packages/contracts/src/http/audit/list/v1/response.ts
index 47df78a..3219cd5 100644
--- a/packages/contracts/src/http/audit/list/v1/response.ts
+++ b/packages/contracts/src/http/audit/list/v1/response.ts
@@ -16,6 +16,10 @@ export interface HttpAuditListV1Response {
      * Opaque cross-cell correlation identifier from the originating request context. Lets consumers stitch an audited action back to its request. Empty for entries predating its introduction.
      */
     correlationId?: string;
+    /**
+     * Opaque distributed trace identifier from the originating request context. Lets consumers correlate an audited action back to its trace. Empty for entries predating its introduction.
+     */
+    traceId?: string;
     occurredAt?: string;
     timestamp: string;
     payload?: unknown;

From f8c3972574a817682d38dd2208c9a4cfe6ce87d0 Mon Sep 17 00:00:00 2001
From: ghbvf <104540935+ghbvf@users.noreply.github.com>
Date: Wed, 3 Jun 2026 06:49:17 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix(devboard):=20PR=20#37=20review=20?=
 =?UTF-8?q?=E2=80=94=20a11y=20polish=EF=BC=88=E5=8F=AF=E9=80=89=E8=A1=8C?=
 =?UTF-8?q?=E2=86=92button=E3=80=81=E7=A7=BB=E9=99=A4=E8=AF=AF=E7=94=A8=20?=
 =?UTF-8?q?role=3Dstatus=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ContractsView：可选择表格行从 `<tr tabindex=0>`+keydown 改为首列真实 `<button>`
  （aria-pressed 表达选中态），消除 tr-as-button a11y 反模式，与 CellsListView /
  DepsListView 的"首列交互件"house pattern 一致
- GroupsView：移除静态 Preview badge 上误用的 `role="status"`（live-region 语义）
- DepsGraphView：为 SVG `rx="4"` 补 --r-sm token 豁免注释
- 同步更新 ContractsView / GroupsView 单测

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/deps/DepsGraphView.vue     |  2 +
 .../devboard/src/views/ContractsView.spec.ts  | 15 ++++---
 packages/devboard/src/views/ContractsView.vue | 43 +++++++++++++------
 .../devboard/src/views/GroupsView.spec.ts     |  6 ++-
 packages/devboard/src/views/GroupsView.vue    |  2 +-
 5 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/packages/devboard/src/components/deps/DepsGraphView.vue b/packages/devboard/src/components/deps/DepsGraphView.vue
index 4b0460c..675d2af 100644
--- a/packages/devboard/src/components/deps/DepsGraphView.vue
+++ b/packages/devboard/src/components/deps/DepsGraphView.vue
@@ -152,6 +152,8 @@ const edgePaths = computed<readonly EdgePath[]>(() => {
         @click="emit('select', node.id)"
         @keydown.enter.space.prevent="emit('select', node.id)"
       >
+        <!-- rx="4" = the --r-sm radius token. SVG presentation attributes can't
+             reference CSS vars, so the numeric literal is the token's only carrier here. -->
         <rect
           :width="NODE_W"
           :height="NODE_H"
diff --git a/packages/devboard/src/views/ContractsView.spec.ts b/packages/devboard/src/views/ContractsView.spec.ts
index 40790b8..691be28 100644
--- a/packages/devboard/src/views/ContractsView.spec.ts
+++ b/packages/devboard/src/views/ContractsView.spec.ts
@@ -97,13 +97,14 @@ describe('ContractsView', () => {
     expect(wrapper.text()).toContain('contracts.empty')
   })
 
-  it('clicking a row shows the detail aside with that contract', async () => {
+  it('clicking the contract button shows the detail aside with that contract', async () => {
     const wrapper = mountView()
     // Initially no detail aside visible
     expect(wrapper.find('[data-testid="contract-detail"]').exists()).toBe(false)
-    // Click the first data row
-    const firstRow = wrapper.find('tbody tr')
-    await firstRow.trigger('click')
+    // Activate the first row's selection button
+    const firstBtn = wrapper.find('tbody tr .contracts__select-btn')
+    expect(firstBtn.exists()).toBe(true)
+    await firstBtn.trigger('click')
     // Detail aside should now appear
     const detail = wrapper.find('[data-testid="contract-detail"]')
     expect(detail.exists()).toBe(true)
@@ -153,11 +154,13 @@ describe('ContractsView', () => {
     expect(wrapper.text()).toContain('contracts.detail.empty')
   })
 
-  it('clicking a row sets aria-current on that row', async () => {
+  it('selecting a contract sets aria-current on its row and aria-pressed on its button', async () => {
     const wrapper = mountView()
     const firstRow = wrapper.find('tbody tr')
-    await firstRow.trigger('click')
+    const firstBtn = firstRow.find('.contracts__select-btn')
+    await firstBtn.trigger('click')
     expect(firstRow.attributes('aria-current')).toBe('true')
+    expect(firstBtn.attributes('aria-pressed')).toBe('true')
   })
 
   it('table contains expected column headers', () => {
diff --git a/packages/devboard/src/views/ContractsView.vue b/packages/devboard/src/views/ContractsView.vue
index 8cd3987..7b12967 100644
--- a/packages/devboard/src/views/ContractsView.vue
+++ b/packages/devboard/src/views/ContractsView.vue
@@ -92,13 +92,19 @@ function envelopeKindKey(kind: EnvelopeKind): string {
                 class="contracts__row"
                 :class="{ 'contracts__row--selected': selectedContract === entry.contract }"
                 :aria-current="selectedContract === entry.contract ? 'true' : undefined"
-                tabindex="0"
-                @click="select(entry.contract)"
-                @keydown.enter="select(entry.contract)"
-                @keydown.space.prevent="select(entry.contract)"
               >
                 <td class="contracts__contract-col">
-                  <span class="contracts__contract-id">{{ entry.contract }}</span>
+                  <!-- Selection via a real <button> (keyboard-native, aria-pressed conveys
+                       selected state), mirroring the link-in-first-cell pattern used by
+                       CellsListView / DepsListView. Avoids the <tr tabindex> button anti-pattern. -->
+                  <button
+                    type="button"
+                    class="contracts__select-btn"
+                    :aria-pressed="selectedContract === entry.contract ? 'true' : 'false'"
+                    @click="select(entry.contract)"
+                  >
+                    <span class="contracts__contract-id">{{ entry.contract }}</span>
+                  </button>
                 </td>
                 <td>
                   <span class="contracts__kind-chip">{{ entry.kind }}</span>
@@ -421,10 +427,6 @@ function envelopeKindKey(kind: EnvelopeKind): string {
   vertical-align: middle;
 }
 
-.contracts__row {
-  cursor: pointer;
-}
-
 .contracts__row:hover td {
   background: var(--bg-sunken);
 }
@@ -433,15 +435,28 @@ function envelopeKindKey(kind: EnvelopeKind): string {
   background: var(--accent-soft);
 }
 
-.contracts__row:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-}
-
 .contracts__contract-col {
   min-width: 200px;
 }
 
+/* Reset the native button so it reads as the contract-id cell, keeping a
+   keyboard-visible focus ring. The whole row highlights via .contracts__row--selected. */
+.contracts__select-btn {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--r-sm);
+}
+
+.contracts__select-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 .contracts__contract-id {
   font-family: var(--font-mono);
   font-size: var(--text-sm);
diff --git a/packages/devboard/src/views/GroupsView.spec.ts b/packages/devboard/src/views/GroupsView.spec.ts
index e303c4e..65b9464 100644
--- a/packages/devboard/src/views/GroupsView.spec.ts
+++ b/packages/devboard/src/views/GroupsView.spec.ts
@@ -120,11 +120,13 @@ describe('GroupsView', () => {
     expect(groupBtns.length).toBe(5)
   })
 
-  it('preview badge is present with role="status"', () => {
+  it('preview badge is present (static label, no live-region role)', () => {
     const wrapper = mountView()
-    const badge = wrapper.find('[role="status"]')
+    const badge = wrapper.find('.groups__preview-badge')
     expect(badge.exists()).toBe(true)
     expect(badge.text()).toContain('groups.preview.label')
+    // It is a static visual label, not a live region — must not claim role="status".
+    expect(badge.attributes('role')).toBeUndefined()
   })
 
   it('preview note is present with role="note"', () => {
diff --git a/packages/devboard/src/views/GroupsView.vue b/packages/devboard/src/views/GroupsView.vue
index 7b8d1d3..c3912d2 100644
--- a/packages/devboard/src/views/GroupsView.vue
+++ b/packages/devboard/src/views/GroupsView.vue
@@ -52,7 +52,7 @@ const groupMemberCounts = computed(
         <h1 class="groups__h1">
           {{ t('groups.title') }}
           <span class="groups__count">{{ t('groups.count', { n: SMART_GROUPS.length }) }}</span>
-          <span class="groups__preview-badge" role="status">
+          <span class="groups__preview-badge">
             {{ t('groups.preview.label') }}
           </span>
         </h1>