claude-spotter 1.4.29 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.5.0 — 2026-08-04
+
+- **評価結果を端末別Web dashboardで表示。** 各端末の`~/.spotter/evaluation.db`をrequestごとに読み、
+  `S/P/I/C/A/M`、提案率`P/S`、採用率`A/C`、project/tool内訳、非採用caseと詳細を
+  dependency-freeのserver-side HTMLで表示する。request、auditorへ渡したcontext、Throughline
+  observer snapshotは混同せず別欄に置く。
+- **端末選択hubを追加。** 静的な4端末mapから一覧を表示し、`/devices/<id>/`を各device serverへ
+  proxyする。healthは一覧request時に各端末1回だけ取得し、offlineやtimeoutは該当端末だけ502にする。
+  DB同期、background monitor、retry queue、reconcilerは追加しない。
+- **運用面を同梱。** `spotter dashboard device` / `hub`、Mac LaunchAgent、Linux systemd user、
+  Windows Task Scheduler、SSH reverse tunnel、main-server hub config、Caddy/Cloudflare Accessの
+  配備手順を追加した。評価データは端末内に留め、公開面だけをowner emailのAccessで保護する。
+- **検証。** dashboard focused test 16件、fixture SQLiteからdevice HTTP・hub proxyまでの経路、
+  full suite 584件（582 pass / 2 platform skip）を通過した。
+
 ## 1.4.29 — 2026-08-04
 
 - **提案率とtool採用率の端末内評価を追加。** Claude / Codexの成功UserPromptSubmitを母数に、

package/README.ja.md

@@ -223,6 +223,10 @@ spotter evaluation cases --outcome not-adopted
                          # 提案されたが同じturnで使われなかったtool itemを一覧
 spotter evaluation case <observation-id>
                          # request、2種類の文脈、提案、利用、outcomeを確認
+spotter dashboard device --id mac --name Mac
+                         # この端末の評価DBを127.0.0.1:53940で配信
+spotter dashboard hub --config dashboard-hub.json --host 172.18.0.1
+                         # 端末一覧と/devices/<id>/の端末別proxyを配信
 spotter codex risk-check --findings findings.json --host-agent claude
                          # Spotter finding を codex-sidecar に渡して read-only risk analysis
 spotter codex review|explore|opinion --findings findings.json --host-agent claude
@@ -239,6 +243,17 @@ spotter auditor model-matrix --fixtures test/fixtures/auditor-model-matrix.v2.js
 spotter uninstall        # hook 登録を解除 (~/.spotter は残す)
 ```
 
+### 端末別評価dashboard
+
+dashboardはlocal-firstで動く。各端末が自身の`~/.spotter/evaluation.db`を読み、hubは固定の
+端末・upstream対応だけを持つ。評価データをcloud DBへ複製しない。端末画面では
+`S/P/I/C/A/M`、提案率、採用率、project/tool内訳、非採用case、別々に取得した2種類の文脈を
+確認できる。health確認は端末一覧request時だけなので、端末がofflineでもbackground監視や
+retry queueを作らず、その端末だけを切り離せる。
+
+4端末のservice、reverse tunnel、Caddy/Cloudflare構成は
+[docs/11_dashboard-operations.md](docs/11_dashboard-operations.md)を参照。
+
 Codex risk dispatch を daemon から非同期に流す場合:
 
 ```bash

package/README.md

@@ -232,6 +232,10 @@ spotter evaluation cases --outcome not-adopted
                          # list proposed tools that were not used in the same turn
 spotter evaluation case <observation-id>
                          # inspect request, Spotter context, Throughline snapshot, proposal, usage, and outcome
+spotter dashboard device --id mac --name Mac
+                         # serve this terminal's local evaluation DB on 127.0.0.1:53940
+spotter dashboard hub --config dashboard-hub.json --host 172.18.0.1
+                         # list terminals and proxy /devices/<id>/ to their local servers
 spotter codex risk-check --findings findings.json --host-agent claude
                          # run read-only codex-sidecar risk analysis for Spotter findings
 spotter codex review|explore|opinion --findings findings.json --host-agent claude
@@ -248,6 +252,18 @@ spotter auditor model-matrix --fixtures test/fixtures/auditor-model-matrix.v2.js
 spotter uninstall        # remove hooks from this project (leaves ~/.spotter intact)
 ```
 
+### Device-routed evaluation dashboard
+
+The dashboard is local-first. Every terminal reads its own `~/.spotter/evaluation.db`; the hub
+keeps only a static device-to-upstream map and does not copy evaluation data into a cloud database.
+The device view shows `S/P/I/C/A/M`, proposal and adoption rates, project/tool breakdowns,
+non-adopted cases, and the two separately captured context sources. The hub checks health only
+when the device list is requested, so an offline terminal is isolated without a background monitor
+or retry queue.
+
+The reference four-terminal service, reverse-tunnel, and Caddy/Cloudflare layout is documented in
+[docs/11_dashboard-operations.md](docs/11_dashboard-operations.md).
+
 Optional async Codex risk dispatch:
 
 ```bash

package/bin/spotter.mjs

@@ -12,6 +12,7 @@ import { runCodexHookCommand } from '../src/cli/codex-hook-cmd.mjs';
 import { runAuditorCommand } from '../src/cli/auditor-cmd.mjs';
 import { runDiagnosticsCommand } from '../src/cli/diagnostics-cmd.mjs';
 import { runEvaluationCommand } from '../src/cli/evaluation-cmd.mjs';
+import { runDashboardCommand } from '../src/cli/dashboard-cmd.mjs';
 import { runFactoryDiagnostics } from '../src/cli/factory-diagnostics.mjs';
 import { runDaemonStart } from '../src/cli/daemon-cmd.mjs';
 import { runSessionStart } from '../src/hooks/session-start.mjs';
@@ -50,6 +51,9 @@ Usage:
   spotter evaluation cases --outcome OUTCOME [filters] [--json]
   spotter evaluation case OBSERVATION_ID [--json]
                                         read saved proposal-adoption observations
+  spotter dashboard device --id ID [--name NAME] [--host HOST] [--port PORT] [--db PATH]
+  spotter dashboard hub --config FILE [--host HOST] [--port PORT]
+                                        serve the local device-routed evaluation dashboard
   spotter codex risk-check --findings FILE
                                         run read-only codex-sidecar risk analysis
   spotter codex review|explore|opinion --findings FILE
@@ -132,6 +136,9 @@ async function main() {
     case 'evaluation':
       await runEvaluationCommand({ argv: rest });
       return;
+    case 'dashboard':
+      await runDashboardCommand({ argv: rest });
+      return;
     case 'daemon': {
       const sub = rest[0];
       if (sub === 'start') { await runDaemonStart({ argv: rest.slice(1) }); return; }

package/docs/11_dashboard-operations.md

@@ -0,0 +1,118 @@
+# Spotter評価dashboard運用
+
+## 固定構成
+
+各端末のdevice serverは`127.0.0.1:53940`だけで待ち受ける。main-serverのhubは
+Docker Caddyから到達できる`172.18.0.1:53940`で待ち受ける。評価DBは各端末の
+`~/.spotter/evaluation.db`をその場で読み、端末外へ複製しない。
+
+| 端末 | device ID | main-server側upstream |
+|---|---|---|
+| main-server Ubuntu | `main-server` | `127.0.0.1:53940` |
+| Mac | `mac` | `127.0.0.1:53941` |
+| FOX WSL2 | `fox-wsl` | `127.0.0.1:53942` |
+| FOX Windows native | `fox-windows` | `127.0.0.1:53943` |
+
+hub設定の正本は`ops/dashboard/hub-config.json`である。hubは一覧request時に各upstreamの
+healthを1回だけ確認し、端末をonline/offline表示する。常時監視、再試行queue、DB同期は行わない。
+
+## Mac
+
+`ops/dashboard/launchd/`の2 plistを`~/Library/LaunchAgents/`へ配置する。既存labelを更新する時は
+`launchctl bootout gui/$(id -u) <plist>`の後、`launchctl bootstrap gui/$(id -u) <plist>`を実行する。
+deviceはMac実DB、tunnelはmain-serverの`53941`へ接続する。
+
+確認:
+
+```sh
+curl --fail http://127.0.0.1:53940/_spotter/health
+ssh main-server curl --fail http://127.0.0.1:53941/_spotter/health
+```
+
+## main-server Ubuntu
+
+`ops/dashboard/systemd/spotter-dashboard-device.service`と
+`spotter-dashboard-hub.service`を`~/.config/systemd/user/`へ配置する。
+`~/.config/spotter/dashboard-device.env`は次の2行、hub configはrepo正本をコピーする。
+
+```ini
+SPOTTER_DEVICE_ID=main-server
+SPOTTER_DEVICE_NAME=main-server
+```
+
+```sh
+systemctl --user daemon-reload
+systemctl --user enable --now spotter-dashboard-device.service spotter-dashboard-hub.service
+curl --fail http://127.0.0.1:53940/_spotter/health
+curl --fail http://172.18.0.1:53940/
+```
+
+systemd user managerの`PATH`から`spotter`が見えない場合だけ、ユーザー環境の実際のnpm binを
+unitの`Environment=PATH=...`として追加する。別の起動経路へfallbackしない。
+
+## FOX WSL2
+
+device unitとtunnel unitを`~/.config/systemd/user/`へ配置する。device env:
+
+```ini
+SPOTTER_DEVICE_ID=fox-wsl
+SPOTTER_DEVICE_NAME=FOX-WSL2
+```
+
+tunnel env:
+
+```ini
+SPOTTER_REMOTE_FORWARD=127.0.0.1:53942:127.0.0.1:53940
+SPOTTER_TUNNEL_TARGET=main-server
+```
+
+```sh
+systemctl --user daemon-reload
+systemctl --user enable --now spotter-dashboard-device.service spotter-dashboard-tunnel.service
+```
+
+## FOX Windows native
+
+管理者権限は不要。`ops/dashboard/windows/`を固定pathへ配置し、Windows側から解決できる
+main-serverのSSH host名またはIPを明示して次を1回実行する。
+
+```powershell
+.\install-dashboard-tasks.ps1 -MainServer '<main-server-host-or-ip>'
+```
+
+登録される2 taskはログオン時にdevice serverとreverse tunnelを起動する。確認:
+
+```powershell
+Invoke-RestMethod http://127.0.0.1:53940/_spotter/health
+Get-ScheduledTask -TaskName 'Spotter dashboard *' | Get-ScheduledTaskInfo
+```
+
+## 公開経路
+
+Caddyへ次を追加する。`spotter.kitepon.dev`はcase詳細に会話文脈を含むため、Cloudflare側では
+同hostname全体をAccess applicationの対象にし、owner emailだけをallowする。
+
+```caddyfile
+spotter.kitepon.dev {
+  import cf-origin-tls
+  import security-headers-base
+  reverse_proxy 172.18.0.1:53940
+}
+```
+
+既存Cloudflare Tunnelのcatch-all 404より前に、hostname `spotter.kitepon.dev`、service
+`https://caddy:443`、`noTLSVerify: true`、`matchSNItoHost: true`のingressを追加する。
+DNSは同tunnel UUIDの`cfargotunnel.com`へCNAMEする。
+
+## 受入と切り分け
+
+確認順序はdevice loopback、main-serverの各upstream、hub、Caddy、Cloudflare Tunnel、Accessとする。
+端末がofflineならhub一覧のその端末だけがofflineになる。選択時の502は該当upstreamのserviceまたは
+reverse tunnelを確認する。hubや別端末を再起動する必要はない。
+
+公開受入:
+
+1. 未認証`https://spotter.kitepon.dev/`がCloudflare Accessへredirectされる。
+2. 認証後の`/`が4端末を表示する。
+3. online端末のoverview、project/tool内訳、非採用case、case詳細を表示できる。
+4. 1端末を停止しても一覧と他端末が表示でき、停止端末だけoffline/502になる。

package/ops/dashboard/hub-config.json

@@ -0,0 +1 @@
+{"devices":[{"id":"main-server","name":"main-server","upstream":"http://127.0.0.1:53940"},{"id":"mac","name":"Mac","upstream":"http://127.0.0.1:53941"},{"id":"fox-wsl","name":"FOX WSL2","upstream":"http://127.0.0.1:53942"},{"id":"fox-windows","name":"FOX Windows native","upstream":"http://127.0.0.1:53943"}]}

package/ops/dashboard/launchd/dev.kitepon.spotter-dashboard-device.plist

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>Label</key><string>dev.kitepon.spotter-dashboard-device</string>
+  <key>ProgramArguments</key>
+  <array>
+    <string>/opt/homebrew/bin/spotter</string>
+    <string>dashboard</string><string>device</string>
+    <string>--id</string><string>mac</string>
+    <string>--name</string><string>Mac</string>
+    <string>--host</string><string>127.0.0.1</string>
+    <string>--port</string><string>53940</string>
+  </array>
+  <key>RunAtLoad</key><true/>
+  <key>KeepAlive</key><true/>
+  <key>ThrottleInterval</key><integer>10</integer>
+  <key>StandardOutPath</key><string>/Users/kite/.spotter/dashboard-device.log</string>
+  <key>StandardErrorPath</key><string>/Users/kite/.spotter/dashboard-device.log</string>
+</dict>
+</plist>

package/ops/dashboard/launchd/dev.kitepon.spotter-dashboard-tunnel.plist

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>Label</key><string>dev.kitepon.spotter-dashboard-tunnel</string>
+  <key>ProgramArguments</key>
+  <array>
+    <string>/usr/bin/ssh</string><string>-N</string>
+    <string>-o</string><string>BatchMode=yes</string>
+    <string>-o</string><string>ExitOnForwardFailure=yes</string>
+    <string>-o</string><string>ServerAliveInterval=30</string>
+    <string>-o</string><string>ServerAliveCountMax=3</string>
+    <string>-o</string><string>TCPKeepAlive=yes</string>
+    <string>-R</string><string>127.0.0.1:53941:127.0.0.1:53940</string>
+    <string>main-server</string>
+  </array>
+  <key>RunAtLoad</key><true/>
+  <key>KeepAlive</key><true/>
+  <key>ThrottleInterval</key><integer>10</integer>
+  <key>StandardOutPath</key><string>/Users/kite/.spotter/dashboard-tunnel.log</string>
+  <key>StandardErrorPath</key><string>/Users/kite/.spotter/dashboard-tunnel.log</string>
+</dict>
+</plist>

package/ops/dashboard/systemd/spotter-dashboard-device.service

@@ -0,0 +1,13 @@
+[Unit]
+Description=Spotter evaluation dashboard device server
+After=network.target
+
+[Service]
+Type=simple
+EnvironmentFile=%h/.config/spotter/dashboard-device.env
+ExecStart=/usr/bin/env spotter dashboard device --id ${SPOTTER_DEVICE_ID} --name ${SPOTTER_DEVICE_NAME} --host 127.0.0.1 --port 53940
+Restart=on-failure
+RestartSec=10
+
+[Install]
+WantedBy=default.target

package/ops/dashboard/systemd/spotter-dashboard-hub.service

@@ -0,0 +1,12 @@
+[Unit]
+Description=Spotter evaluation dashboard hub
+After=network.target
+
+[Service]
+Type=simple
+ExecStart=/usr/bin/env spotter dashboard hub --config %h/.config/spotter/dashboard-hub.json --host 172.18.0.1 --port 53940
+Restart=on-failure
+RestartSec=10
+
+[Install]
+WantedBy=default.target

package/ops/dashboard/systemd/spotter-dashboard-tunnel.service

@@ -0,0 +1,14 @@
+[Unit]
+Description=Spotter evaluation dashboard reverse tunnel
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+EnvironmentFile=%h/.config/spotter/dashboard-tunnel.env
+ExecStart=/usr/bin/ssh -N -o BatchMode=yes -o ExitOnForwardFailure=yes -o ServerAliveInterval=30 -o ServerAliveCountMax=3 -o TCPKeepAlive=yes -R ${SPOTTER_REMOTE_FORWARD} ${SPOTTER_TUNNEL_TARGET}
+Restart=on-failure
+RestartSec=10
+
+[Install]
+WantedBy=default.target

package/ops/dashboard/windows/install-dashboard-tasks.ps1

@@ -0,0 +1,16 @@
+param([Parameter(Mandatory = $true)][string]$MainServer)
+$ErrorActionPreference = 'Stop'
+$ops = Split-Path -Parent $MyInvocation.MyCommand.Path
+$powershell = "$env:WINDIR\System32\WindowsPowerShell\v1.0\powershell.exe"
+$principal = New-ScheduledTaskPrincipal -UserId $env:USERNAME -LogonType Interactive -RunLevel Limited
+$settings = New-ScheduledTaskSettingsSet -RestartCount 999 -RestartInterval (New-TimeSpan -Minutes 1) -ExecutionTimeLimit ([TimeSpan]::Zero)
+$trigger = New-ScheduledTaskTrigger -AtLogOn -User $env:USERNAME
+
+$deviceAction = New-ScheduledTaskAction -Execute $powershell -Argument "-NoProfile -ExecutionPolicy Bypass -File `"$ops\spotter-dashboard-device.ps1`""
+Register-ScheduledTask -TaskName 'Spotter dashboard device' -Action $deviceAction -Trigger $trigger -Principal $principal -Settings $settings -Force | Out-Null
+
+$tunnelAction = New-ScheduledTaskAction -Execute $powershell -Argument "-NoProfile -ExecutionPolicy Bypass -File `"$ops\spotter-dashboard-tunnel.ps1`" -MainServer `"$MainServer`""
+Register-ScheduledTask -TaskName 'Spotter dashboard tunnel' -Action $tunnelAction -Trigger $trigger -Principal $principal -Settings $settings -Force | Out-Null
+
+Start-ScheduledTask -TaskName 'Spotter dashboard device'
+Start-ScheduledTask -TaskName 'Spotter dashboard tunnel'

package/ops/dashboard/windows/spotter-dashboard-device.ps1

@@ -0,0 +1,4 @@
+$ErrorActionPreference = 'Stop'
+$spotter = Join-Path $env:APPDATA 'npm\spotter.cmd'
+& $spotter dashboard device --id fox-windows --name 'FOX Windows native' --host 127.0.0.1 --port 53940
+exit $LASTEXITCODE

package/ops/dashboard/windows/spotter-dashboard-tunnel.ps1

@@ -0,0 +1,7 @@
+param([Parameter(Mandatory = $true)][string]$MainServer)
+$ErrorActionPreference = 'Stop'
+& "$env:WINDIR\System32\OpenSSH\ssh.exe" -N `
+  -o BatchMode=yes -o ExitOnForwardFailure=yes `
+  -o ServerAliveInterval=30 -o ServerAliveCountMax=3 -o TCPKeepAlive=yes `
+  -R '127.0.0.1:53943:127.0.0.1:53940' $MainServer
+exit $LASTEXITCODE

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-spotter",
-  "version": "1.4.29",
+  "version": "1.5.0",
   "description": "Audit agent running alongside Claude Code that catches missed tool calls — 気づく役と実行する役の分離",
   "type": "module",
   "bin": {
@@ -48,6 +48,8 @@
     "bin",
     "src",
     "scripts",
+    "ops/dashboard",
+    "docs/11_dashboard-operations.md",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"

package/src/cli/dashboard-cmd.mjs

@@ -0,0 +1,129 @@
+import { readFile } from 'node:fs/promises';
+import { isAbsolute, resolve } from 'node:path';
+import { createDeviceServer } from '../dashboard/device-server.mjs';
+import { createHubServer } from '../dashboard/hub-server.mjs';
+
+const USAGE = `spotter dashboard — local evaluation dashboard servers
+
+Usage:
+  spotter dashboard device --id ID [--name NAME] [--host HOST] [--port PORT] [--db PATH]
+  spotter dashboard hub --config FILE [--host HOST] [--port PORT]
+`;
+
+export async function runDashboardCommand({
+  argv = process.argv.slice(2),
+  cwd = process.cwd(),
+  createDeviceServerFn = createDeviceServer,
+  createHubServerFn = createHubServer,
+  readFileFn = readFile,
+  writeOutput = (text) => process.stdout.write(text),
+} = {}) {
+  const subcommand = argv[0];
+  if (subcommand === 'device') {
+    const options = parseOptions(argv.slice(1), { mode: 'device', cwd });
+    const server = createDeviceServerFn({
+      deviceId: options.id,
+      deviceName: options.name ?? options.id,
+      databasePath: options.databasePath,
+    });
+    await listen(server, options.port, options.host);
+    writeOutput(`spotter dashboard device listening on ${formatAddress(server.address())}\n`);
+    return server;
+  }
+  if (subcommand === 'hub') {
+    const options = parseOptions(argv.slice(1), { mode: 'hub', cwd });
+    const config = parseHubConfig(await readFileFn(options.configPath, 'utf8'));
+    const server = createHubServerFn({ devices: config.devices });
+    await listen(server, options.port, options.host);
+    writeOutput(`spotter dashboard hub listening on ${formatAddress(server.address())}\n`);
+    return server;
+  }
+  throw usageError();
+}
+
+function parseOptions(argv, { mode, cwd }) {
+  const values = { host: '127.0.0.1', port: 53940 };
+  const seen = new Set();
+  for (let index = 0; index < argv.length; index += 1) {
+    const option = argv[index];
+    if (seen.has(option)) throw usageError();
+    seen.add(option);
+    if (option === '--id' && mode === 'device') values.id = requiredValue(argv, ++index, option);
+    else if (option === '--name' && mode === 'device') values.name = requiredValue(argv, ++index, option);
+    else if (option === '--db' && mode === 'device') {
+      const value = requiredValue(argv, ++index, option);
+      values.databasePath = isAbsolute(value) ? value : resolve(cwd, value);
+    } else if (option === '--config' && mode === 'hub') {
+      const value = requiredValue(argv, ++index, option);
+      values.configPath = isAbsolute(value) ? value : resolve(cwd, value);
+    } else if (option === '--host') {
+      values.host = requiredValue(argv, ++index, option);
+    } else if (option === '--port') {
+      values.port = parsePort(requiredValue(argv, ++index, option));
+    } else throw usageError();
+  }
+  if (mode === 'device' && values.id === undefined) throw usageError('--id is required');
+  if (mode === 'device' && /[/?#]/.test(values.id)) throw usageError('--id must be a path segment');
+  if (mode === 'hub' && values.configPath === undefined) throw usageError('--config is required');
+  return values;
+}
+
+function parseHubConfig(text) {
+  let value;
+  try { value = JSON.parse(text); } catch { throw usageError('dashboard hub config is not valid JSON'); }
+  if (!value || !Array.isArray(value.devices) || value.devices.length === 0) {
+    throw usageError('dashboard hub config requires devices');
+  }
+  const ids = new Set();
+  for (const device of value.devices) {
+    if (!device || typeof device.id !== 'string' || device.id.length === 0
+      || typeof device.name !== 'string' || device.name.length === 0
+      || typeof device.upstream !== 'string' || device.upstream.length === 0
+      || ids.has(device.id)) throw usageError('dashboard hub config has an invalid device');
+    let upstream;
+    try { upstream = new URL(device.upstream); } catch { throw usageError('dashboard hub config has an invalid upstream'); }
+    if (upstream.protocol !== 'http:' && upstream.protocol !== 'https:') {
+      throw usageError('dashboard hub config has an invalid upstream');
+    }
+    ids.add(device.id);
+  }
+  return value;
+}
+
+function requiredValue(argv, index, option) {
+  const value = argv[index];
+  if (typeof value !== 'string' || value.length === 0 || value.startsWith('--')) {
+    throw usageError(`${option} requires a value`);
+  }
+  return value;
+}
+
+function parsePort(value) {
+  const port = Number(value);
+  if (!Number.isSafeInteger(port) || port < 1 || port > 65535) throw usageError('--port requires an integer from 1 to 65535');
+  return port;
+}
+
+function listen(server, port, host) {
+  return new Promise((resolveListen, reject) => {
+    const onError = (error) => { server.off('listening', onListening); reject(error); };
+    const onListening = () => { server.off('error', onError); resolveListen(); };
+    server.once('error', onError);
+    server.once('listening', onListening);
+    server.listen(port, host);
+  });
+}
+
+function formatAddress(address) {
+  if (typeof address === 'string') return address;
+  if (!address) return '(unknown)';
+  const host = address.family === 'IPv6' ? `[${address.address}]` : address.address;
+  return `http://${host}:${address.port}`;
+}
+
+function usageError(message = 'invalid dashboard arguments') {
+  const error = new Error(`${message}\n${USAGE}`);
+  error.stack = '';
+  error.exitCode = 2;
+  return error;
+}

package/src/dashboard/device-server.mjs

@@ -0,0 +1,216 @@
+import { createServer } from 'node:http';
+import { createEvaluationStore, defaultEvaluationStorePath } from '../core/evaluation-store.mjs';
+import { buildDashboardModel } from './model.mjs';
+import { renderDeviceDashboard } from './render.mjs';
+
+const FILTER_NAMES = new Set(['project', 'from', 'to']);
+
+export function createDeviceServer({
+  deviceId,
+  deviceName = deviceId,
+  databasePath = defaultEvaluationStorePath(),
+  createStoreFn = createEvaluationStore,
+  onError = (error) => console.error('Spotter device server request failed:', error),
+} = {}) {
+  const id = requiredString(deviceId, 'deviceId');
+  const name = requiredString(deviceName, 'deviceName');
+  if (typeof createStoreFn !== 'function') throw new TypeError('createStoreFn must be a function');
+  if (typeof onError !== 'function') throw new TypeError('onError must be a function');
+
+  return createServer((request, response) => {
+    try {
+      handleRequest({ request, response, deviceId: id, deviceName: name, databasePath, createStoreFn });
+    } catch (error) {
+      if (!(error instanceof HttpError) || error.statusCode >= 500) onError(error);
+      if (response.headersSent) {
+        response.destroy();
+        return;
+      }
+      const httpError = error instanceof HttpError
+        ? error
+        : new HttpError(500, 'internal_error', 'device request failed', { cause: error });
+      sendJson(response, httpError.statusCode, { error: httpError.code, message: httpError.publicMessage }, httpError.headers);
+    }
+  });
+}
+
+function handleRequest({ request, response, deviceId, deviceName, databasePath, createStoreFn }) {
+  if (request.method !== 'GET') {
+    throw new HttpError(405, 'method_not_allowed', 'only GET is supported', { headers: { Allow: 'GET' } });
+  }
+
+  let url;
+  try {
+    url = new URL(request.url ?? '/', 'http://spotter.local');
+  } catch (error) {
+    throw new HttpError(400, 'invalid_url', 'request URL is invalid', { cause: error });
+  }
+
+  if (url.pathname === '/_spotter/health') {
+    if (url.search !== '') throw badRequest('health endpoint does not accept query parameters');
+    sendJson(response, 200, { ok: true, deviceId });
+    return;
+  }
+
+  const route = matchDeviceRoute(url.pathname);
+  if (route === null || route.deviceId !== deviceId) throw notFound();
+  const parsedFilters = parseFilters(url.searchParams);
+  const overviewPath = `/devices/${encodeURIComponent(deviceId)}/`;
+
+  let projection;
+  try {
+    projection = withStore({ createStoreFn, databasePath }, (store) => {
+      const model = buildDashboardModel(store, parsedFilters.store);
+      return {
+        model: {
+          ...model,
+          notAdoptedCases: model.notAdoptedCases.map((item) => ({
+            ...item,
+            href: caseHref(deviceId, item.observationId, parsedFilters.display),
+          })),
+        },
+        caseDetail: route.observationId === null ? null : store.getCase(route.observationId),
+      };
+    });
+  } catch (error) {
+    throw new HttpError(500, 'evaluation_store_error', 'evaluation store request failed', { cause: error });
+  }
+
+  if (route.observationId !== null && projection.caseDetail === null) throw notFound('evaluation case was not found');
+  const html = renderDeviceDashboard({
+    devices: [{ id: deviceId, name: deviceName, online: true, href: overviewPath }],
+    selectedDeviceId: deviceId,
+    model: projection.model,
+    caseDetail: projection.caseDetail,
+    filters: parsedFilters.display,
+    action: overviewPath,
+  });
+  sendHtml(response, 200, html);
+}
+
+function withStore({ createStoreFn, databasePath }, operation) {
+  const store = createStoreFn({ databasePath });
+  try {
+    return operation(store);
+  } finally {
+    store.close();
+  }
+}
+
+function matchDeviceRoute(pathname) {
+  const overview = /^\/devices\/([^/]+)\/$/.exec(pathname);
+  if (overview) return { deviceId: decodePathSegment(overview[1]), observationId: null };
+  const detail = /^\/devices\/([^/]+)\/cases\/([^/]+)$/.exec(pathname);
+  if (detail) {
+    return {
+      deviceId: decodePathSegment(detail[1]),
+      observationId: decodePathSegment(detail[2]),
+    };
+  }
+  return null;
+}
+
+function decodePathSegment(value) {
+  try {
+    const decoded = decodeURIComponent(value);
+    if (decoded.length === 0) throw new Error('empty path segment');
+    return decoded;
+  } catch (error) {
+    throw new HttpError(400, 'invalid_path', 'path contains invalid encoding', { cause: error });
+  }
+}
+
+function parseFilters(searchParams) {
+  for (const name of searchParams.keys()) {
+    if (!FILTER_NAMES.has(name)) throw badRequest(`unknown query parameter: ${name}`);
+  }
+
+  const display = {};
+  const store = {};
+  const project = singleValue(searchParams, 'project');
+  const from = singleValue(searchParams, 'from');
+  const to = singleValue(searchParams, 'to');
+  if (project !== null) {
+    if (project.length === 0) throw badRequest('project must not be empty');
+    display.project = project;
+    store.projectPath = project;
+  }
+  if (from !== null) {
+    display.from = from;
+    store.fromMs = parseTimestamp(from, 'from');
+  }
+  if (to !== null) {
+    display.to = to;
+    store.toMs = parseTimestamp(to, 'to');
+  }
+  if (store.fromMs !== undefined && store.toMs !== undefined && store.fromMs > store.toMs) {
+    throw badRequest('from must not be later than to');
+  }
+  return { display, store };
+}
+
+function singleValue(searchParams, name) {
+  const values = searchParams.getAll(name);
+  if (values.length > 1) throw badRequest(`${name} must be specified once`);
+  return values.length === 0 ? null : values[0];
+}
+
+function parseTimestamp(value, name) {
+  const milliseconds = Date.parse(value);
+  if (!Number.isFinite(milliseconds)) throw badRequest(`${name} must be an ISO timestamp`);
+  return milliseconds;
+}
+
+function caseHref(deviceId, observationId, displayFilters) {
+  const path = `/devices/${encodeURIComponent(deviceId)}/cases/${encodeURIComponent(observationId)}`;
+  const query = new URLSearchParams(displayFilters).toString();
+  return query.length === 0 ? path : `${path}?${query}`;
+}
+
+function sendHtml(response, statusCode, html) {
+  const body = Buffer.from(html, 'utf8');
+  response.writeHead(statusCode, {
+    'Content-Type': 'text/html; charset=utf-8',
+    'Content-Length': body.length,
+    'Cache-Control': 'no-store',
+    'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; frame-ancestors 'none'",
+    'X-Content-Type-Options': 'nosniff',
+  });
+  response.end(body);
+}
+
+function sendJson(response, statusCode, value, extraHeaders = {}) {
+  const body = Buffer.from(`${JSON.stringify(value)}\n`, 'utf8');
+  response.writeHead(statusCode, {
+    'Content-Type': 'application/json; charset=utf-8',
+    'Content-Length': body.length,
+    'Cache-Control': 'no-store',
+    'X-Content-Type-Options': 'nosniff',
+    ...extraHeaders,
+  });
+  response.end(body);
+}
+
+function requiredString(value, name) {
+  if (typeof value !== 'string' || value.length === 0) throw new TypeError(`${name} must be a non-empty string`);
+  return value;
+}
+
+function badRequest(message) {
+  return new HttpError(400, 'invalid_request', message);
+}
+
+function notFound(message = 'route was not found') {
+  return new HttpError(404, 'not_found', message);
+}
+
+class HttpError extends Error {
+  constructor(statusCode, code, publicMessage, { cause, headers = {} } = {}) {
+    super(publicMessage, { cause });
+    this.name = 'HttpError';
+    this.statusCode = statusCode;
+    this.code = code;
+    this.publicMessage = publicMessage;
+    this.headers = headers;
+  }
+}

package/src/dashboard/hub-server.mjs

@@ -0,0 +1,214 @@
+import http from 'node:http';
+import https from 'node:https';
+
+import { renderHubDashboard } from './render.mjs';
+
+const HOP_BY_HOP_HEADERS = new Set([
+  'connection',
+  'keep-alive',
+  'proxy-authenticate',
+  'proxy-authorization',
+  'proxy-connection',
+  'te',
+  'trailer',
+  'transfer-encoding',
+  'upgrade',
+]);
+
+const DEFAULT_PROBE_TIMEOUT_MS = 1_500;
+const DEFAULT_PROXY_TIMEOUT_MS = 30_000;
+
+/**
+ * Create the main-server hub for device-routed dashboard requests.
+ *
+ * `devices` is static for the lifetime of the server. Health is deliberately
+ * sampled only while rendering the device list; no background monitor or retry
+ * path exists here.
+ */
+export function createHubServer({
+  devices,
+  probeTimeoutMs = DEFAULT_PROBE_TIMEOUT_MS,
+  fetchFn = fetch,
+  proxyTimeoutMs = DEFAULT_PROXY_TIMEOUT_MS,
+  onError = (error) => console.error('Spotter hub server request failed:', error),
+} = {}) {
+  const configuredDevices = normalizeDevices(devices);
+  const byId = new Map(configuredDevices.map((device) => [device.id, device]));
+  assertPositiveTimeout(probeTimeoutMs, 'probeTimeoutMs');
+  assertPositiveTimeout(proxyTimeoutMs, 'proxyTimeoutMs');
+  if (typeof fetchFn !== 'function') throw new TypeError('fetchFn must be a function');
+  if (typeof onError !== 'function') throw new TypeError('onError must be a function');
+
+  return http.createServer((request, response) => {
+    handleRequest({
+      request,
+      response,
+      devices: configuredDevices,
+      byId,
+      probeTimeoutMs,
+      fetchFn,
+      proxyTimeoutMs,
+    }).catch((error) => {
+      onError(error);
+      if (response.headersSent) {
+        response.destroy();
+        return;
+      }
+      sendText(response, 500, 'Internal Server Error\n');
+    });
+  });
+}
+
+async function handleRequest({ request, response, devices, byId, probeTimeoutMs, fetchFn, proxyTimeoutMs }) {
+  if (request.method !== 'GET') {
+    sendText(response, 404, 'Not Found\n');
+    return;
+  }
+
+  const requestUrl = new URL(request.url ?? '/', 'http://spotter.invalid');
+  if (requestUrl.pathname === '/' || requestUrl.pathname === '/devices/') {
+    const statuses = await Promise.all(devices.map(async (device) => ({
+      id: device.id,
+      name: device.name,
+      href: `/devices/${encodeURIComponent(device.id)}/`,
+      online: await probeDevice(device, probeTimeoutMs, fetchFn),
+    })));
+    const html = renderHubDashboard({ devices: statuses });
+    response.writeHead(200, {
+      'cache-control': 'no-store',
+      'content-type': 'text/html; charset=utf-8',
+    });
+    response.end(html);
+    return;
+  }
+
+  const deviceId = deviceIdFromPath(requestUrl.pathname);
+  const device = deviceId === null ? null : byId.get(deviceId);
+  if (!device) {
+    sendText(response, 404, 'Not Found\n');
+    return;
+  }
+
+  proxyGet({ request, response, requestUrl, device, timeoutMs: proxyTimeoutMs });
+}
+
+async function probeDevice(device, timeoutMs, fetchFn) {
+  try {
+    const response = await fetchFn(new URL('/_spotter/health', device.upstream), {
+      method: 'GET',
+      redirect: 'manual',
+      signal: AbortSignal.timeout(timeoutMs),
+    });
+    await response.body?.cancel();
+    return response.ok;
+  } catch {
+    return false;
+  }
+}
+
+function proxyGet({ request, response, requestUrl, device, timeoutMs }) {
+  const target = new URL(`${requestUrl.pathname}${requestUrl.search}`, device.upstream);
+  const headers = withoutHopByHopHeaders(request.headers);
+  delete headers['content-length'];
+  headers.host = target.host;
+
+  const upstreamRequest = clientFor(target).request(target, {
+    method: 'GET',
+    headers,
+    agent: false,
+  }, (upstreamResponse) => {
+    upstreamResponse.on('error', () => {
+      if (response.headersSent) response.destroy();
+      else sendText(response, 502, 'Bad Gateway\n');
+    });
+    response.writeHead(
+      upstreamResponse.statusCode ?? 502,
+      withoutHopByHopHeaders(upstreamResponse.headers),
+    );
+    upstreamResponse.pipe(response);
+  });
+
+  upstreamRequest.setTimeout(timeoutMs, () => {
+    upstreamRequest.destroy(new Error('device proxy request timed out'));
+  });
+  upstreamRequest.on('error', () => {
+    if (response.headersSent) response.destroy();
+    else sendText(response, 502, 'Bad Gateway\n');
+  });
+  response.on('close', () => {
+    if (!upstreamRequest.destroyed) upstreamRequest.destroy();
+  });
+  upstreamRequest.end();
+}
+
+function withoutHopByHopHeaders(headers) {
+  const connectionTokens = String(headers.connection ?? '')
+    .split(',')
+    .map((value) => value.trim().toLowerCase())
+    .filter(Boolean);
+  const excluded = new Set([...HOP_BY_HOP_HEADERS, ...connectionTokens]);
+  return Object.fromEntries(
+    Object.entries(headers).filter(([name, value]) => (
+      value !== undefined && !excluded.has(name.toLowerCase())
+    )),
+  );
+}
+
+function deviceIdFromPath(pathname) {
+  const match = /^\/devices\/([^/]+)(?:\/.*)?$/.exec(pathname);
+  if (!match) return null;
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return null;
+  }
+}
+
+function normalizeDevices(devices) {
+  if (!Array.isArray(devices)) throw new TypeError('devices must be an array');
+  const ids = new Set();
+  return devices.map((device, index) => {
+    if (!device || typeof device !== 'object') {
+      throw new TypeError(`devices[${index}] must be an object`);
+    }
+    const { id, name, upstream } = device;
+    if (typeof id !== 'string' || id.length === 0 || /[/?#]/.test(id)) {
+      throw new TypeError(`devices[${index}].id must be a non-empty path segment`);
+    }
+    if (ids.has(id)) throw new TypeError(`duplicate device id: ${id}`);
+    ids.add(id);
+    if (typeof name !== 'string' || name.length === 0) {
+      throw new TypeError(`devices[${index}].name must be a non-empty string`);
+    }
+
+    let upstreamUrl;
+    try {
+      upstreamUrl = new URL(upstream);
+    } catch {
+      throw new TypeError(`devices[${index}].upstream must be an absolute HTTP URL`);
+    }
+    if (!['http:', 'https:'].includes(upstreamUrl.protocol)
+        || upstreamUrl.username || upstreamUrl.password
+        || upstreamUrl.pathname !== '/' || upstreamUrl.search || upstreamUrl.hash) {
+      throw new TypeError(`devices[${index}].upstream must be an HTTP origin URL`);
+    }
+    return Object.freeze({ id, name, upstream: upstreamUrl });
+  });
+}
+
+function clientFor(url) {
+  return url.protocol === 'https:' ? https : http;
+}
+
+function assertPositiveTimeout(value, name) {
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new TypeError(`${name} must be a positive number`);
+  }
+}
+
+function sendText(response, statusCode, body) {
+  response.writeHead(statusCode, {
+    'content-type': 'text/plain; charset=utf-8',
+  });
+  response.end(body);
+}

package/src/dashboard/model.mjs

@@ -0,0 +1,14 @@
+// Dashboard projection over the host-local evaluation store.  This adapter
+// deliberately reuses the store's saved metric definitions instead of
+// recalculating proposal or adoption rates for the presentation layer.
+
+export function buildDashboardModel(store, filters = {}) {
+  const summary = store.summarize(filters);
+  const notAdoptedCases = store.listCases({ ...filters, outcome: 'not_adopted' });
+  return {
+    totals: summary.totals,
+    byProject: summary.byProject,
+    byTool: summary.byTool,
+    notAdoptedCases,
+  };
+}

package/src/dashboard/render.mjs

@@ -0,0 +1,225 @@
+// Pure, dependency-free HTML rendering for the device-routed evaluation viewer.
+// This module deliberately renders only the caller-provided projection: it never
+// opens EvaluationStore or asks Throughline for context.
+
+const METRIC_KEYS = ['S', 'P', 'I', 'C', 'A', 'M'];
+
+/**
+ * Render a complete dashboard document.
+ *
+ * The renderer accepts the dashboard projection as plain data. `overview` may be
+ * either an EvaluationStore summary (`totals`, `byProject`, `byTool`) or the
+ * equivalent display-oriented fields (`metrics`, `projects`, `tools`).
+ */
+export function renderDashboard({
+  title = 'Spotter evaluation dashboard',
+  devices = [],
+  selectedDeviceId = null,
+  device = null,
+  overview = {},
+  // `model` is the D1 projection: { totals, byProject, byTool,
+  // notAdoptedCases }. Top-level fields are accepted as well so a device
+  // server can spread that projection without an adapter.
+  model = null,
+  totals,
+  byProject,
+  byTool,
+  notAdoptedCases,
+  cases,
+  caseDetail = null,
+  filters = {},
+  action = '',
+} = {}) {
+  const selectedId = selectedDeviceId ?? device?.id ?? null;
+  const selectedDevice = device ?? devices.find((item) => item?.id === selectedId) ?? null;
+  const pageTitle = selectedDevice?.name ? `${selectedDevice.name} — ${title}` : title;
+  const dashboardModel = model ?? ((totals || byProject || byTool || notAdoptedCases)
+    ? { totals, byProject, byTool, notAdoptedCases }
+    : overview);
+  const renderedCases = cases ?? dashboardModel?.notAdoptedCases ?? [];
+  return `<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(pageTitle)}</title>
+<style>${DASHBOARD_CSS}</style>
+</head>
+<body>
+<main class="dashboard">
+  <header class="page-header">
+    <p class="eyebrow">Spotter</p>
+    <h1>${escapeHtml(title)}</h1>
+    ${selectedDevice ? `<p class="subtitle">端末: ${escapeHtml(selectedDevice.name ?? selectedDevice.id)}</p>` : '<p class="subtitle">端末を選択してください。</p>'}
+  </header>
+  ${renderDevices(devices, selectedId)}
+  ${selectedDevice ? renderDeviceContent({ overview: dashboardModel, cases: renderedCases, caseDetail, filters, action }) : ''}
+</main>
+</body>
+</html>`;
+}
+
+// Explicit aliases keep device and hub callers from needing to know document
+// composition details. Both remain pure functions.
+export const renderDeviceDashboard = renderDashboard;
+export const renderHubDashboard = renderDashboard;
+
+export function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function renderDevices(devices, selectedId) {
+  if (!Array.isArray(devices) || devices.length === 0) return '';
+  return `<nav class="device-nav" aria-label="端末一覧">
+  <h2>端末</h2>
+  <ul>${devices.map((device) => {
+    const id = String(device?.id ?? '');
+    const selected = id === selectedId;
+    const online = device?.online === true || device?.status === 'online';
+    const label = escapeHtml(device?.name ?? id);
+    const href = safeHref(device?.href) ?? `?device=${encodeURIComponent(id)}`;
+    return `<li><a${selected ? ' aria-current="page"' : ''} class="device ${online ? 'online' : 'offline'}" href="${escapeHtml(href)}"><span class="status-dot" aria-hidden="true"></span>${label}<small>${online ? 'online' : 'offline'}</small></a></li>`;
+  }).join('')}</ul>
+</nav>`;
+}
+
+function renderDeviceContent({ overview, cases, caseDetail, filters, action }) {
+  const totals = overview?.totals ?? overview?.metrics ?? overview ?? {};
+  const projects = normaliseBreakdown(overview?.byProject ?? overview?.projects);
+  const tools = normaliseBreakdown(overview?.byTool ?? overview?.tools);
+  const nonAdopted = Array.isArray(cases) ? cases : [];
+  return `${renderFilters(filters, action)}
+<section aria-labelledby="overview-heading">
+  <div class="section-heading"><h2 id="overview-heading">概要</h2>${renderRates(totals)}</div>
+  <div class="metrics" aria-label="評価メトリクス">${METRIC_KEYS.map((key) => `<article class="metric"><span>${key}</span><strong>${escapeHtml(metric(totals, key))}</strong></article>`).join('')}</div>
+</section>
+${renderBreakdown('project-breakdown', 'project別内訳', projects)}
+${renderBreakdown('tool-breakdown', 'tool別内訳', tools)}
+${renderCases(nonAdopted)}
+${caseDetail ? renderCaseDetail(caseDetail) : ''}`;
+}
+
+function renderFilters(filters, action) {
+  const project = filters?.project ?? filters?.projectPath ?? '';
+  const from = filters?.from ?? '';
+  const to = filters?.to ?? '';
+  return `<form class="filters" method="get" action="${escapeHtml(safeHref(action) ?? '')}">
+  <label>project <input name="project" value="${escapeHtml(project)}"></label>
+  <label>from <input name="from" type="datetime-local" value="${escapeHtml(from)}"></label>
+  <label>to <input name="to" type="datetime-local" value="${escapeHtml(to)}"></label>
+  <button type="submit">絞り込む</button>
+</form>`;
+}
+
+function renderRates(summary) {
+  const proposal = rate(metricNumber(summary, 'P'), metricNumber(summary, 'S'));
+  const adoption = rate(metricNumber(summary, 'A'), metricNumber(summary, 'C'));
+  return `<dl class="rates"><div><dt>提案率 P/S</dt><dd>${escapeHtml(proposal)}</dd></div><div><dt>採用率 A/C</dt><dd>${escapeHtml(adoption)}</dd></div></dl>`;
+}
+
+function renderBreakdown(id, title, rows) {
+  return `<section aria-labelledby="${id}">
+  <h2 id="${id}">${title}</h2>
+  ${rows.length === 0 ? '<p class="empty">該当するデータはありません。</p>' : `<div class="table-wrap"><table><thead><tr><th scope="col">項目</th>${METRIC_KEYS.map((key) => `<th scope="col">${key}</th>`).join('')}<th scope="col">提案率</th><th scope="col">採用率</th></tr></thead><tbody>${rows.map(([label, summary]) => `<tr><th scope="row">${escapeHtml(label)}</th>${METRIC_KEYS.map((key) => `<td>${escapeHtml(metric(summary, key))}</td>`).join('')}<td>${escapeHtml(rate(metricNumber(summary, 'P'), metricNumber(summary, 'S')))}</td><td>${escapeHtml(rate(metricNumber(summary, 'A'), metricNumber(summary, 'C')))}</td></tr>`).join('')}</tbody></table></div>`}
+</section>`;
+}
+
+function renderCases(cases) {
+  return `<section aria-labelledby="cases-heading">
+  <h2 id="cases-heading">非採用case</h2>
+  ${cases.length === 0 ? '<p class="empty">非採用caseはありません。</p>' : `<div class="table-wrap"><table><thead><tr><th scope="col">記録時刻</th><th scope="col">project</th><th scope="col">tool</th><th scope="col">outcome</th></tr></thead><tbody>${cases.map((item) => {
+    const label = escapeHtml(formatDate(item?.recordedAtMs ?? item?.recordedAt));
+    const caseHref = safeHref(item?.href) ?? (item?.observationId ? `?case=${encodeURIComponent(item.observationId)}` : null);
+    const project = escapeHtml(item?.projectPath ?? item?.project ?? '');
+    const tool = escapeHtml(item?.toolId ?? item?.tool ?? '');
+    const outcome = escapeHtml(item?.outcome ?? 'not_adopted');
+    return `<tr><td>${caseHref ? `<a href="${escapeHtml(caseHref)}">${label}</a>` : label}</td><td>${project}</td><td>${tool}</td><td>${outcome}</td></tr>`;
+  }).join('')}</tbody></table></div>`}
+</section>`;
+}
+
+function renderCaseDetail(item) {
+  return `<section class="case-detail" aria-labelledby="case-detail-heading">
+  <h2 id="case-detail-heading">case詳細</h2>
+  <dl class="metadata"><div><dt>observation</dt><dd>${escapeHtml(item.observationId)}</dd></div><div><dt>session</dt><dd>${escapeHtml(item.sessionId)}</dd></div><div><dt>host</dt><dd>${escapeHtml(item.host)}</dd></div></dl>
+  ${renderTextBlock('request', 'request', item.requestText)}
+  ${renderTextBlock('auditor-context', 'auditorへ渡したcontext', item.auditorSeenContext)}
+  ${renderTextBlock('observer-context', 'Throughline observer snapshot', formatSnapshot(item.observerSnapshot, item.observerContextStatus))}
+  ${renderJsonBlock('proposal-ids', '提案ID', item.proposedToolIds)}
+  ${renderJsonBlock('used-ids', '利用ID', item.usedToolIds)}
+  ${renderJsonBlock('item-outcomes', 'item結果', item.items)}
+</section>`;
+}
+
+function renderTextBlock(id, title, value) {
+  return `<section aria-labelledby="${id}"><h3 id="${id}">${title}</h3><pre>${escapeHtml(value === null || value === undefined || value === '' ? '(none)' : value)}</pre></section>`;
+}
+
+function renderJsonBlock(id, title, value) {
+  return renderTextBlock(id, title, JSON.stringify(value ?? [], null, 2));
+}
+
+function normaliseBreakdown(value) {
+  if (Array.isArray(value)) return value.map((item) => [item.label ?? item.name ?? item.projectPath ?? item.toolId ?? '', item.summary ?? item.metrics ?? item]);
+  if (value && typeof value === 'object') return Object.entries(value);
+  return [];
+}
+
+function metric(summary, key) {
+  return String(metricNumber(summary, key));
+}
+
+function metricNumber(summary, key) {
+  const value = Number(summary?.[key]);
+  return Number.isFinite(value) ? value : 0;
+}
+
+function rate(numerator, denominator) {
+  if (denominator === 0) return 'n/a';
+  return `${Math.round((numerator / denominator) * 100)}% (${numerator}/${denominator})`;
+}
+
+function formatDate(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) return new Date(value).toISOString();
+  return value === null || value === undefined || value === '' ? '(unknown)' : String(value);
+}
+
+function formatSnapshot(snapshot, status) {
+  if (snapshot === null || snapshot === undefined) return status ? `(status: ${status})` : '(none)';
+  return JSON.stringify(snapshot, null, 2);
+}
+
+function safeHref(value) {
+  if (typeof value !== 'string' || value.length === 0) return null;
+  try {
+    const url = new URL(value, 'https://spotter.invalid');
+    if (url.protocol !== 'https:' && url.protocol !== 'http:') return null;
+    return value.startsWith('/') || value.startsWith('?') || /^https?:\/\//i.test(value) ? value : null;
+  } catch { return null; }
+}
+
+const DASHBOARD_CSS = `
+:root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, sans-serif; color: #19212b; background: #f5f7fa; }
+* { box-sizing: border-box; }
+body { margin: 0; }
+.dashboard { max-width: 1200px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; }
+.page-header { border-bottom: 1px solid #d7dce2; margin-bottom: 1.5rem; }
+.eyebrow { color: #3565a0; font-weight: 700; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
+h1 { margin: .25rem 0; font-size: clamp(1.75rem, 4vw, 2.5rem); } h2 { margin-top: 2rem; } h3 { margin-bottom: .5rem; }
+.subtitle, .empty { color: #52606d; }
+.device-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .5rem 0; padding: 0; }
+.device { align-items: center; border: 1px solid #ccd4dd; border-radius: 999px; color: inherit; display: inline-flex; gap: .45rem; padding: .45rem .7rem; text-decoration: none; }
+.device[aria-current="page"] { border-color: #1c63b8; box-shadow: 0 0 0 2px #b8d6fa; }.device small { color: #52606d; }.status-dot { background: #a03333; border-radius: 50%; height: .55rem; width: .55rem; }.online .status-dot { background: #16803c; }
+.filters { align-items: end; display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }.filters label { display: grid; font-size: .85rem; gap: .25rem; }.filters input, button { border: 1px solid #aeb8c4; border-radius: .35rem; font: inherit; padding: .45rem; }button { background: #1c63b8; color: white; cursor: pointer; }
+.section-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }.rates { display: flex; gap: 1.25rem; margin: 0; }.rates div { display: flex; gap: .35rem; }.rates dt { color: #52606d; }.rates dd { font-weight: 700; margin: 0; }
+.metrics { display: grid; gap: .75rem; grid-template-columns: repeat(6, minmax(90px, 1fr)); }.metric { background: #fff; border: 1px solid #d7dce2; border-radius: .5rem; padding: .8rem; }.metric span { color: #52606d; display: block; }.metric strong { font-size: 1.5rem; }
+.table-wrap { overflow-x: auto; }table { border-collapse: collapse; min-width: 680px; width: 100%; }th, td { border-bottom: 1px solid #d7dce2; padding: .6rem; text-align: left; vertical-align: top; }thead { background: #eaf0f6; }tbody tr:nth-child(even) { background: #fbfcfd; }
+.case-detail { border-top: 2px solid #1c63b8; margin-top: 2.5rem; }.metadata { display: flex; flex-wrap: wrap; gap: 1rem; }.metadata div { min-width: 12rem; }.metadata dt { color: #52606d; }.metadata dd { margin: .2rem 0; overflow-wrap: anywhere; }pre { background: #1e2935; color: #e6edf3; margin: 0; overflow-x: auto; padding: 1rem; white-space: pre-wrap; word-break: break-word; }
+@media (max-width: 700px) { .dashboard { padding-top: 1rem; }.metrics { grid-template-columns: repeat(3, 1fr); }.filters { align-items: stretch; flex-direction: column; }.filters input, button { width: 100%; }.rates { flex-direction: column; gap: .25rem; } }
+@media (prefers-color-scheme: dark) { :root { color: #e8edf2; background: #111827; }.page-header, th, td { border-color: #364152; }.metric { background: #182230; border-color: #364152; }.subtitle, .empty, .device small, .rates dt, .metric span, .metadata dt { color: #b6c2cf; }thead { background: #243244; }tbody tr:nth-child(even) { background: #151f2c; }.device { border-color: #526173; } }
+`;