From f5db0b8997b459a8d008024ddc5c0ac9841d7374 Mon Sep 17 00:00:00 2001
From: William Pelrine <drawncloser@gmail.com>
Date: Tue, 14 Apr 2026 12:30:56 -0700
Subject: [PATCH] feat(night-shift): Implement the repo-local Dash browser
 front door

---
 .codex/skills/qa-night-shift/SKILL.md         |  11 +-
 docs/getting-started.md                       |   6 +-
 docs/providers-and-delivery.md                |   9 +-
 docs/run-lifecycle.md                         |   6 +-
 src/night_shift/app.gleam                     |  11 +-
 src/night_shift/cli.gleam                     |  24 +-
 src/night_shift/dashboard.gleam               | 271 +++----
 src/night_shift/dashboard_view.gleam          | 686 ++++++++++++++++++
 src/night_shift/types.gleam                   |   4 +-
 test/night_shift_cli_config_test.gleam        |   9 +-
 ...ight_shift_persistence_provider_test.gleam |   6 +-
 11 files changed, 838 insertions(+), 205 deletions(-)
 create mode 100644 src/night_shift/dashboard_view.gleam

diff --git a/.codex/skills/qa-night-shift/SKILL.md b/.codex/skills/qa-night-shift/SKILL.md
index 46078ca..503e8e0 100644
--- a/.codex/skills/qa-night-shift/SKILL.md
+++ b/.codex/skills/qa-night-shift/SKILL.md
@@ -131,8 +131,9 @@ Typical flow:
    resume attempt when the run was interrupted
 10. use `night-shift resolve` or `night-shift resume` only if the run actually
    requires it
-11. use `night-shift dash` when the QA pass needs browser-visible bootstrap,
-    SSE, command, audit, or raw artifact validation
+11. use `night-shift dash` when the QA pass needs browser-visible guided init,
+    bootstrap, SSE, DAG/detail sync, command, audit, or raw artifact
+    validation
 
 For review-driven investigations, replace steps 3-4 with:
 
@@ -145,8 +146,12 @@ In review-driven runs, pay attention to repo-state evidence:
 
 - the stored open-PR snapshot captured during planning
 - whether `status`, `report`, or the dashboard show repo-state drift
+- whether `night-shift dash` guided init can move an uninitialized repo into
+  the normal initialized workspace without restarting Dash
 - whether `night-shift dash` bootstrap and SSE payloads stay aligned with the
   journal-backed repo-state snapshot
+- whether the Dash workspace shows the pending or active DAG with synchronized
+  graph, list, and detail panes wired to the persisted task metadata
 - whether `night-shift report` shows the actionable/impacted subtree and
   replacement lineage, while the persisted `report.md` remains readable
   without live GitHub refresh
@@ -180,7 +185,7 @@ In review-driven runs, pay attention to repo-state evidence:
 - whether `status`, `report`, and the dashboard agree on the confidence posture
   and its reasons
 - whether Dash command handlers mutate the same durable run state as the CLI,
-  without scraping command output
+  without scraping command output or inventing a separate control plane
 - whether `provenance` records the expected prompt paths, payload artifacts,
   verification evidence, worktree paths, and PR linkage
 - whether `doctor` classifies interrupted tasks as `safe_to_resume`,
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 2402d22..5fec765 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -176,5 +176,9 @@ If you want a dry proof that the end-to-end harness is wired correctly:
 
 ```sh
 night-shift --demo
-night-shift --demo --ui
+night-shift dash
 ```
+
+`night-shift --demo` keeps validating the fixture-backed CLI flow. Use
+`night-shift dash` when you want the real browser workspace and its live audit
+surface.
diff --git a/docs/providers-and-delivery.md b/docs/providers-and-delivery.md
index 2f3bd2b..86f9fe1 100644
--- a/docs/providers-and-delivery.md
+++ b/docs/providers-and-delivery.md
@@ -114,8 +114,10 @@ leave that disabled and still use the PR-body overlay.
 The local dashboard now uses `night-shift dash`. It binds to `127.0.0.1` and
 serves a Dash backend for:
 
-- structured bootstrap state for the current repository
-- SSE-first live updates
+- structured bootstrap state for the current repository, including init state,
+  selected-run audit data, DAG metadata, repo-state drift, delivery context,
+  and runtime identity
+- SSE-first live updates for the selected run and audit surface
 - browser command handlers for `init`, `plan`, `plan --from-reviews`,
   `resolve`, `start`, and `resume`
 - audit and raw artifact routes for reports, provenance, logs, payloads, and
@@ -128,7 +130,8 @@ shelling out to `night-shift` subprocesses.
 
 `night-shift --demo` exercises a fixture-backed flow and prints a compact proof
 summary. The headless demo validates `plan`, `start`, `status`, and `report`.
-The UI demo validates Dash bootstrap plus browser-command execution as well.
+The UI demo validates Dash bootstrap plus browser-command execution as well,
+but the supported human entrypoint is `night-shift dash`.
 
 Demo artifacts live under:
 
diff --git a/docs/run-lifecycle.md b/docs/run-lifecycle.md
index bd4197e..1606911 100644
--- a/docs/run-lifecycle.md
+++ b/docs/run-lifecycle.md
@@ -61,13 +61,17 @@ and the next action becomes `night-shift start`.
 night-shift doctor
 night-shift resume --explain
 night-shift resume
-night-shift resume --run run-123 --ui
+night-shift dash
 ```
 
 Night Shift reloads the saved run, validates the saved environment, recovers
 in-flight tasks, and continues orchestration. It does not re-resolve provider
 or environment settings; it reuses what the run journal already saved.
 
+Use `night-shift dash` when you want the browser workflow for the same durable
+run state. Use `resume --explain` and `resume` when you prefer the CLI
+recovery path.
+
 `doctor` and `resume --explain` are the read-only recovery surfaces. They
 inspect the saved run, active lock, worktrees, logs, review drift, and
 interrupted task states, then classify each task as `safe_to_resume`,
diff --git a/src/night_shift/app.gleam b/src/night_shift/app.gleam
index 76decd9..4e7c535 100644
--- a/src/night_shift/app.gleam
+++ b/src/night_shift/app.gleam
@@ -134,20 +134,15 @@ fn run_initialized_command(
           )
         Error(message) -> message
       })
-    types.Start(run, False) -> io.println(start(repo_root, run, config))
+    types.Start(run) -> io.println(start(repo_root, run, config))
     types.Status(run) -> io.println(status(repo_root, run, config))
     types.Report(run) -> io.println(report(repo_root, run, config))
     types.Provenance(run, task_id, format) ->
       io.println(provenance(repo_root, run, task_id, format, config))
     types.Doctor(run) -> io.println(doctor(repo_root, run, config))
     types.Resolve(run) -> io.println(resolve(repo_root, run, config))
-    types.Resume(run, False, False) ->
-      io.println(resume(repo_root, run, config))
-    types.Resume(run, False, True) -> io.println(doctor(repo_root, run, config))
-    types.Start(_, True) | types.Resume(_, True, False) ->
-      io.println(
-        "The `--ui` entrypoint was replaced by `night-shift dash`.",
-      )
+    types.Resume(run, False) -> io.println(resume(repo_root, run, config))
+    types.Resume(run, True) -> io.println(doctor(repo_root, run, config))
     _ -> io.println("Unsupported command.")
   }
 }
diff --git a/src/night_shift/cli.gleam b/src/night_shift/cli.gleam
index 838da11..1afdc0b 100644
--- a/src/night_shift/cli.gleam
+++ b/src/night_shift/cli.gleam
@@ -31,7 +31,7 @@ pub fn usage() -> String {
 ///
 /// ```gleam
 /// > parse(["start", "--run", "latest"])
-/// Ok(types.Start(types.LatestRun, False))
+/// Ok(types.Start(types.LatestRun))
 /// ```
 ///
 /// ```gleam
@@ -225,7 +225,7 @@ fn parse_init_flags(
 }
 
 fn parse_start(args: List(String)) -> Result(types.Command, String) {
-  parse_start_flags(args, types.LatestRun, False)
+  parse_start_flags(args, types.LatestRun)
 }
 
 fn parse_reset(args: List(String)) -> Result(types.Command, String) {
@@ -248,35 +248,31 @@ fn parse_reset_flags(
 fn parse_start_flags(
   args: List(String),
   run: types.RunSelector,
-  ui_enabled: Bool,
 ) -> Result(types.Command, String) {
   case args {
-    [] -> Ok(types.Start(run, ui_enabled))
-    ["--run", "latest", ..rest] ->
-      parse_start_flags(rest, types.LatestRun, ui_enabled)
-    ["--run", run_id, ..rest] ->
-      parse_start_flags(rest, types.RunId(run_id), ui_enabled)
+    [] -> Ok(types.Start(run))
+    ["--run", "latest", ..rest] -> parse_start_flags(rest, types.LatestRun)
+    ["--run", run_id, ..rest] -> parse_start_flags(rest, types.RunId(run_id))
     [flag, ..] -> Error("Unsupported start flag: " <> flag)
   }
 }
 
 fn parse_resume(args: List(String)) -> Result(types.Command, String) {
-  parse_resume_flags(args, types.LatestRun, False, False)
+  parse_resume_flags(args, types.LatestRun, False)
 }
 
 fn parse_resume_flags(
   args: List(String),
   run: types.RunSelector,
-  ui_enabled: Bool,
   explain_only: Bool,
 ) -> Result(types.Command, String) {
   case args {
-    [] -> Ok(types.Resume(run, ui_enabled, explain_only))
+    [] -> Ok(types.Resume(run, explain_only))
     ["--run", "latest", ..rest] ->
-      parse_resume_flags(rest, types.LatestRun, ui_enabled, explain_only)
+      parse_resume_flags(rest, types.LatestRun, explain_only)
     ["--run", run_id, ..rest] ->
-      parse_resume_flags(rest, types.RunId(run_id), ui_enabled, explain_only)
-    ["--explain", ..rest] -> parse_resume_flags(rest, run, ui_enabled, True)
+      parse_resume_flags(rest, types.RunId(run_id), explain_only)
+    ["--explain", ..rest] -> parse_resume_flags(rest, run, True)
     [flag, ..] -> Error("Unsupported flag: " <> flag)
   }
 }
diff --git a/src/night_shift/dashboard.gleam b/src/night_shift/dashboard.gleam
index 8f94529..38a1db3 100644
--- a/src/night_shift/dashboard.gleam
+++ b/src/night_shift/dashboard.gleam
@@ -9,6 +9,7 @@ import gleam/result
 import gleam/string
 import night_shift/agent_config
 import night_shift/config
+import night_shift/dashboard_view
 import night_shift/domain/confidence
 import night_shift/domain/decisions as decision_domain
 import night_shift/domain/provenance
@@ -24,8 +25,8 @@ import night_shift/types
 import night_shift/usecase/init as init_usecase
 import night_shift/usecase/plan as plan_usecase
 import night_shift/usecase/resolve as resolve_usecase
-import night_shift/usecase/resume as resume_usecase
 import night_shift/usecase/result as workflow
+import night_shift/usecase/resume as resume_usecase
 import night_shift/usecase/start as start_usecase
 import simplifile
 
@@ -120,52 +121,7 @@ pub fn start_resume_session(
 }
 
 pub fn index_html(_initial_run_id: String) -> String {
-  "<!doctype html>\n"
-  <> "<html lang=\"en\">\n"
-  <> "<head>\n"
-  <> "  <meta charset=\"utf-8\">\n"
-  <> "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"
-  <> "  <title>Night Shift Dash</title>\n"
-  <> "  <style>\n"
-  <> "    :root { color-scheme: light; font-family: Georgia, 'Iowan Old Style', serif; }\n"
-  <> "    * { box-sizing: border-box; }\n"
-  <> "    body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #fbf8f2 0%, #efe8dd 100%); color: #211a14; }\n"
-  <> "    main { padding: 24px; display: grid; gap: 18px; max-width: 1180px; margin: 0 auto; }\n"
-  <> "    section { padding: 18px; border-radius: 18px; background: rgba(255, 252, 247, 0.92); border: 1px solid rgba(72, 48, 26, 0.12); box-shadow: 0 14px 40px rgba(66, 43, 24, 0.08); }\n"
-  <> "    h1, h2 { margin: 0 0 10px 0; }\n"
-  <> "    pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: 'SFMono-Regular', 'Menlo', monospace; font-size: 0.9rem; }\n"
-  <> "    .muted { opacity: 0.7; }\n"
-  <> "  </style>\n"
-  <> "</head>\n"
-  <> "<body>\n"
-  <> "  <main>\n"
-  <> "    <section>\n"
-  <> "      <h1>Night Shift Dash</h1>\n"
-  <> "      <p class=\"muted\">This backend now serves a structured bootstrap plus SSE-first state updates.</p>\n"
-  <> "    </section>\n"
-  <> "    <section>\n"
-  <> "      <h2>Bootstrap</h2>\n"
-  <> "      <pre id=\"bootstrap\">Loading bootstrap...</pre>\n"
-  <> "    </section>\n"
-  <> "    <section>\n"
-  <> "      <h2>Live State</h2>\n"
-  <> "      <pre id=\"events\">Connecting...</pre>\n"
-  <> "    </section>\n"
-  <> "  </main>\n"
-  <> "  <script>\n"
-  <> "    const bootstrapNode = document.getElementById('bootstrap');\n"
-  <> "    const eventsNode = document.getElementById('events');\n"
-  <> "    fetch('/api/bootstrap', { cache: 'no-store' })\n"
-  <> "      .then((response) => response.json())\n"
-  <> "      .then((payload) => { bootstrapNode.textContent = JSON.stringify(payload, null, 2); })\n"
-  <> "      .catch((error) => { bootstrapNode.textContent = error.message; });\n"
-  <> "    const stream = new EventSource('/api/events');\n"
-  <> "    stream.addEventListener('bootstrap', (event) => { eventsNode.textContent = event.data; });\n"
-  <> "    stream.addEventListener('state', (event) => { eventsNode.textContent = event.data; });\n"
-  <> "    stream.onerror = () => { eventsNode.textContent = 'Event stream disconnected.'; };\n"
-  <> "  </script>\n"
-  <> "</body>\n"
-  <> "</html>\n"
+  dashboard_view.index_html()
 }
 
 pub fn bootstrap_json(
@@ -233,14 +189,12 @@ pub fn command_json(
     "start" -> start_command_json(repo_root, body)
     "resume" -> resume_command_json(repo_root, body)
     _ ->
-      Error(
-        command_error_json(
-          repo_root,
-          command,
-          "Unsupported dash command: " <> command,
-          None,
-        ),
-      )
+      Error(command_error_json(
+        repo_root,
+        command,
+        "Unsupported dash command: " <> command,
+        None,
+      ))
   }
 }
 
@@ -279,14 +233,18 @@ fn bootstrap_payload(
   let runs = list_runs_or_empty(repo_root)
   let active_run_id = active_run_id_or_none(repo_root)
   let latest_run_id = latest_run_id(runs)
-  let selected_run_id = choose_selected_run_id(requested_run_id, active_run_id, runs)
+  let selected_run_id =
+    choose_selected_run_id(requested_run_id, active_run_id, runs)
 
   json.object([
     #("mode", json.string("dash")),
     #("repo_root", json.string(repo_root)),
     #("initialized", json.bool(configuration.initialized)),
     #("config_path", json.string(project.config_path(repo_root))),
-    #("worktree_setup_path", json.string(project.worktree_setup_path(repo_root))),
+    #(
+      "worktree_setup_path",
+      json.string(project.worktree_setup_path(repo_root)),
+    ),
     #(
       "config_error",
       json.nullable(from: repo_config_error(configuration), of: json.string),
@@ -379,14 +337,8 @@ fn run_payload_json(
     #("state_path", json.string(run.state_path)),
     #("events_path", json.string(run.events_path)),
     #("lock_path", json.string(run.lock_path)),
-    #(
-      "planning_agent",
-      agent_json(run.planning_agent),
-    ),
-    #(
-      "execution_agent",
-      agent_json(run.execution_agent),
-    ),
+    #("planning_agent", agent_json(run.planning_agent)),
+    #("execution_agent", agent_json(run.execution_agent)),
     #("environment_name", json.string(run.environment_name)),
     #("max_workers", json.int(run.max_workers)),
     #("planning_dirty", json.bool(run.planning_dirty)),
@@ -395,17 +347,15 @@ fn run_payload_json(
     #("updated_at", json.string(run.updated_at)),
     #(
       "planning_provenance",
-      json.nullable(
-        from: run.planning_provenance,
-        of: fn(value) { json.string(types.planning_provenance_label(value)) },
-      ),
+      json.nullable(from: run.planning_provenance, of: fn(value) {
+        json.string(types.planning_provenance_label(value))
+      }),
     ),
     #(
       "notes_source",
-      json.nullable(
-        from: run.notes_source,
-        of: fn(value) { json.string(types.notes_source_label(value)) },
-      ),
+      json.nullable(from: run.notes_source, of: fn(value) {
+        json.string(types.notes_source_label(value))
+      }),
     ),
     #(
       "confidence_posture",
@@ -417,14 +367,14 @@ fn run_payload_json(
       "confidence_reasons",
       json.array(confidence_assessment.reasons, json.string),
     ),
-    #(
-      "decision_requests",
-      json.array(pending_decisions, pending_decision_json),
-    ),
+    #("decision_requests", json.array(pending_decisions, pending_decision_json)),
     #("recorded_decisions", json.array(run.decisions, recorded_decision_json)),
     #(
       "repo_state",
-      json.nullable(from: review_projection, of: review_projection_repo_state_json),
+      json.nullable(
+        from: review_projection,
+        of: review_projection_repo_state_json,
+      ),
     ),
     #(
       "review_lineage",
@@ -530,9 +480,10 @@ fn plan_command_json(
       command_error_json(repo_root, command_name, decode_message(message), None)
     }),
   )
-  use configuration <- result.try(
-    require_initialized_config(repo_root, command_name)
-  )
+  use configuration <- result.try(require_initialized_config(
+    repo_root,
+    command_name,
+  ))
   use agent_overrides <- result.try(
     agent_overrides_from_strings(
       request.profile,
@@ -545,7 +496,10 @@ fn plan_command_json(
     }),
   )
   use planning_agent <- result.try(
-    agent_config.resolve_plan_agent(extract_config(configuration), agent_overrides)
+    agent_config.resolve_plan_agent(
+      extract_config(configuration),
+      agent_overrides,
+    )
     |> result.map_error(fn(message) {
       command_error_json(repo_root, command_name, message, None)
     }),
@@ -591,11 +545,9 @@ fn resolve_command_json(
   let selector = run_selector(request.run_id)
 
   case
-    resolve_usecase.execute(
-      repo_root,
-      selector,
-      fn(run, tasks) { collect_dash_decisions(run, tasks, request.answers) },
-    )
+    resolve_usecase.execute(repo_root, selector, fn(run, tasks) {
+      collect_dash_decisions(run, tasks, request.answers)
+    })
   {
     Ok(view) ->
       Ok(command_success_json(
@@ -615,10 +567,7 @@ fn resolve_command_json(
   }
 }
 
-fn start_command_json(
-  repo_root: String,
-  body: String,
-) -> Result(String, String) {
+fn start_command_json(repo_root: String, body: String) -> Result(String, String) {
   use request <- result.try(
     decode_or_default(body, run_request_decoder(), RawRunRequest(run_id: ""))
     |> result.map_error(fn(message) {
@@ -627,7 +576,13 @@ fn start_command_json(
   )
   use configuration <- result.try(require_initialized_config(repo_root, "start"))
 
-  case start_usecase.execute(repo_root, run_selector(request.run_id), extract_config(configuration)) {
+  case
+    start_usecase.execute(
+      repo_root,
+      run_selector(request.run_id),
+      extract_config(configuration),
+    )
+  {
     Ok(view) ->
       Ok(command_success_json(
         repo_root,
@@ -656,15 +611,18 @@ fn resume_command_json(
       command_error_json(repo_root, "resume", decode_message(message), None)
     }),
   )
-  use configuration <- result.try(
-    require_initialized_config(repo_root, "resume")
-  )
-
-  case resume_usecase.execute(
+  use configuration <- result.try(require_initialized_config(
     repo_root,
-    run_selector(request.run_id),
-    extract_config(configuration),
-  ) {
+    "resume",
+  ))
+
+  case
+    resume_usecase.execute(
+      repo_root,
+      run_selector(request.run_id),
+      extract_config(configuration),
+    )
+  {
     Ok(view) ->
       Ok(command_success_json(
         repo_root,
@@ -759,7 +717,8 @@ fn task_json(
   let relevant_events =
     events
     |> list.filter(fn(event) { event.task_id == Some(task.id) })
-  let delivered_link = delivered_pr_link(task, run.handoff_states, relevant_events)
+  let delivered_link =
+    delivered_pr_link(task, run.handoff_states, relevant_events)
 
   json.object([
     #("id", json.string(task.id)),
@@ -779,10 +738,7 @@ fn task_json(
         decision_request_json,
       ),
     ),
-    #(
-      "superseded_pr_numbers",
-      json.array(task.superseded_pr_numbers, json.int),
-    ),
+    #("superseded_pr_numbers", json.array(task.superseded_pr_numbers, json.int)),
     #("task_kind", json.string(types.task_kind_to_string(task.kind))),
     #(
       "execution_mode",
@@ -857,8 +813,8 @@ fn task_dag_json(tasks: List(types.Task)) -> json.Json {
       "ready_task_ids",
       json.array(
         tasks
-        |> list.filter(fn(task) { task.state == types.Ready })
-        |> list.map(fn(task) { task.id }),
+          |> list.filter(fn(task) { task.state == types.Ready })
+          |> list.map(fn(task) { task.id }),
         json.string,
       ),
     ),
@@ -866,8 +822,8 @@ fn task_dag_json(tasks: List(types.Task)) -> json.Json {
       "running_task_ids",
       json.array(
         tasks
-        |> list.filter(fn(task) { task.state == types.Running })
-        |> list.map(fn(task) { task.id }),
+          |> list.filter(fn(task) { task.state == types.Running })
+          |> list.map(fn(task) { task.id }),
         json.string,
       ),
     ),
@@ -875,10 +831,10 @@ fn task_dag_json(tasks: List(types.Task)) -> json.Json {
       "blocked_task_ids",
       json.array(
         tasks
-        |> list.filter(fn(task) {
-          task.state == types.Blocked || task.state == types.ManualAttention
-        })
-        |> list.map(fn(task) { task.id }),
+          |> list.filter(fn(task) {
+            task.state == types.Blocked || task.state == types.ManualAttention
+          })
+          |> list.map(fn(task) { task.id }),
         json.string,
       ),
     ),
@@ -886,8 +842,8 @@ fn task_dag_json(tasks: List(types.Task)) -> json.Json {
       "completed_task_ids",
       json.array(
         tasks
-        |> list.filter(fn(task) { task.state == types.Completed })
-        |> list.map(fn(task) { task.id }),
+          |> list.filter(fn(task) { task.state == types.Completed })
+          |> list.map(fn(task) { task.id }),
         json.string,
       ),
     ),
@@ -920,10 +876,7 @@ fn review_projection_repo_state_json(
   let summary = projection.repo_state
 
   json.object([
-    #(
-      "captured_open_pr_count",
-      json.int(summary.captured_open_pr_count),
-    ),
+    #("captured_open_pr_count", json.int(summary.captured_open_pr_count)),
     #(
       "captured_actionable_pr_count",
       json.int(summary.captured_actionable_pr_count),
@@ -1019,18 +972,9 @@ fn handoff_state_json(state: types.TaskHandoffState) -> json.Json {
   json.object([
     #("task_id", json.string(state.task_id)),
     #("delivered_pr_number", json.string(state.delivered_pr_number)),
-    #(
-      "last_delivered_commit_sha",
-      json.string(state.last_delivered_commit_sha),
-    ),
-    #(
-      "last_handoff_files",
-      json.array(state.last_handoff_files, json.string),
-    ),
-    #(
-      "last_verification_digest",
-      json.string(state.last_verification_digest),
-    ),
+    #("last_delivered_commit_sha", json.string(state.last_delivered_commit_sha)),
+    #("last_handoff_files", json.array(state.last_handoff_files, json.string)),
+    #("last_verification_digest", json.string(state.last_verification_digest)),
     #("last_risks", json.array(state.last_risks, json.string)),
     #("last_handoff_updated_at", json.string(state.last_handoff_updated_at)),
     #("body_region_present", json.bool(state.body_region_present)),
@@ -1107,13 +1051,10 @@ fn recorded_decision_json(decision: types.RecordedDecision) -> json.Json {
 fn repo_configuration(repo_root: String) -> RepoConfiguration {
   let config_path = project.config_path(repo_root)
   let initialized = file_exists(config_path)
-  RepoConfiguration(
-    initialized: initialized,
-    config_result: case initialized {
-      True -> config.load(config_path)
-      False -> Ok(types.default_config())
-    },
-  )
+  RepoConfiguration(initialized: initialized, config_result: case initialized {
+    True -> config.load(config_path)
+    False -> Ok(types.default_config())
+  })
 }
 
 fn require_initialized_config(
@@ -1123,14 +1064,12 @@ fn require_initialized_config(
   let configuration = repo_configuration(repo_root)
   case configuration.initialized, configuration.config_result {
     False, _ ->
-      Error(
-        command_error_json(
-          repo_root,
-          command,
-          "Night Shift is not initialized for this repository. Run `night-shift init` or POST `/api/commands/init` first.",
-          None,
-        ),
-      )
+      Error(command_error_json(
+        repo_root,
+        command,
+        "Night Shift is not initialized for this repository. Run `night-shift init` or POST `/api/commands/init` first.",
+        None,
+      ))
     True, Ok(_) -> Ok(configuration)
     True, Error(message) ->
       Error(command_error_json(repo_root, command, message, None))
@@ -1273,7 +1212,11 @@ fn init_request_decoder() -> decode.Decoder(RawInitRequest) {
   use provider <- decode.optional_field("provider", "", decode.string)
   use model <- decode.optional_field("model", "", decode.string)
   use reasoning <- decode.optional_field("reasoning", "", decode.string)
-  use generate_setup <- decode.optional_field("generate_setup", False, decode.bool)
+  use generate_setup <- decode.optional_field(
+    "generate_setup",
+    False,
+    decode.bool,
+  )
   decode.success(RawInitRequest(
     profile: profile,
     provider: provider,
@@ -1351,7 +1294,8 @@ fn decision_answer_decoder() -> decode.Decoder(RawDecisionAnswer) {
 
 fn decode_message(error: json.DecodeError) -> String {
   case error {
-    json.UnexpectedEndOfInput -> "Invalid JSON payload: unexpected end of input."
+    json.UnexpectedEndOfInput ->
+      "Invalid JSON payload: unexpected end of input."
     json.UnexpectedByte(byte) ->
       "Invalid JSON payload: unexpected byte `" <> byte <> "`."
     json.UnexpectedSequence(sequence) ->
@@ -1449,8 +1393,7 @@ fn collect_dash_decisions(
   case prompts {
     [] ->
       Error("No unresolved manual-attention decisions were found for this run.")
-    _ ->
-      collect_dash_decisions_loop(prompts, answers, [], [])
+    _ -> collect_dash_decisions_loop(prompts, answers, [], [])
   }
 }
 
@@ -1497,13 +1440,12 @@ fn resolve_dash_answer(
   use answer <- result.try(find_decision_answer(answers, request.key))
   case request.options {
     [] ->
-      Ok(#(
-        answer,
-        case request.allow_freeform {
+      Ok(
+        #(answer, case request.allow_freeform {
           True -> None
           False -> Some(decision_contract_warning_event(task, request))
-        },
-      ))
+        }),
+      )
     options ->
       case list.any(options, fn(option) { option.label == answer }) {
         True -> Ok(#(answer, None))
@@ -1548,10 +1490,7 @@ fn decision_contract_warning_event(
 fn resolve_message(view: workflow.ResolveResult) -> String {
   case view.summary {
     Some(summary) -> summary
-    None ->
-      "Resolved run "
-      <> view.run.run_id
-      <> "."
+    None -> "Resolved run " <> view.run.run_id <> "."
   }
 }
 
@@ -1694,9 +1633,7 @@ fn runtime_manifest_path(
   }
 }
 
-fn runtime_handoff_path(
-  context: Option(types.RuntimeContext),
-) -> Option(String) {
+fn runtime_handoff_path(context: Option(types.RuntimeContext)) -> Option(String) {
   case context {
     Some(value) -> existing_file(value.handoff_path)
     None -> None
@@ -1711,7 +1648,8 @@ fn runtime_env_path(context: Option(types.RuntimeContext)) -> Option(String) {
 }
 
 fn existing_files(paths: List(String)) -> List(String) {
-  paths |> list.filter_map(fn(path) {
+  paths
+  |> list.filter_map(fn(path) {
     case existing_file(path) {
       Some(value) -> Ok(value)
       None -> Error(Nil)
@@ -1751,10 +1689,9 @@ fn agent_json(agent: types.ResolvedAgentConfig) -> json.Json {
     #("model", json.nullable(from: agent.model, of: json.string)),
     #(
       "reasoning",
-      json.nullable(
-        from: agent.reasoning,
-        of: fn(level) { json.string(types.reasoning_to_string(level)) },
-      ),
+      json.nullable(from: agent.reasoning, of: fn(level) {
+        json.string(types.reasoning_to_string(level))
+      }),
     ),
   ])
 }
diff --git a/src/night_shift/dashboard_view.gleam b/src/night_shift/dashboard_view.gleam
new file mode 100644
index 0000000..d5a4d08
--- /dev/null
+++ b/src/night_shift/dashboard_view.gleam
@@ -0,0 +1,686 @@
+import gleam/string
+
+pub fn index_html() -> String {
+  [
+    "<!doctype html>",
+    "<html lang='en'>",
+    "<head>",
+    "  <meta charset='utf-8'>",
+    "  <meta name='viewport' content='width=device-width, initial-scale=1'>",
+    "  <title>Night Shift Dash</title>",
+    "  <style>",
+    "    :root {",
+    "      color-scheme: light;",
+    "      --ink: #17201f;",
+    "      --muted: #5f6f6a;",
+    "      --panel: rgba(252, 249, 242, 0.92);",
+    "      --panel-strong: #fffdf8;",
+    "      --line: rgba(39, 58, 50, 0.14);",
+    "      --accent: #0f766e;",
+    "      --accent-soft: rgba(15, 118, 110, 0.14);",
+    "      --warning: #a16207;",
+    "      --danger: #b42318;",
+    "      --shadow: 0 16px 40px rgba(20, 30, 27, 0.12);",
+    "      font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;",
+    "    }",
+    "    * { box-sizing: border-box; }",
+    "    body {",
+    "      margin: 0;",
+    "      min-height: 100vh;",
+    "      color: var(--ink);",
+    "      background:",
+    "        radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 34%),",
+    "        radial-gradient(circle at top right, rgba(180, 35, 24, 0.12), transparent 28%),",
+    "        linear-gradient(180deg, #f5efe3 0%, #ece6d8 100%);",
+    "    }",
+    "    a { color: #125f70; }",
+    "    button, input, select, textarea { font: inherit; }",
+    "    button {",
+    "      border: 1px solid transparent;",
+    "      border-radius: 999px;",
+    "      background: var(--ink);",
+    "      color: #fffdf8;",
+    "      padding: 0.68rem 1rem;",
+    "      cursor: pointer;",
+    "    }",
+    "    button.secondary { background: #f2ede3; color: var(--ink); border-color: var(--line); }",
+    "    button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }",
+    "    button:disabled { opacity: 0.45; cursor: not-allowed; }",
+    "    input, select, textarea {",
+    "      width: 100%;",
+    "      border: 1px solid rgba(27, 38, 35, 0.18);",
+    "      border-radius: 14px;",
+    "      padding: 0.75rem 0.85rem;",
+    "      background: rgba(255, 252, 247, 0.96);",
+    "      color: var(--ink);",
+    "    }",
+    "    textarea { min-height: 7rem; resize: vertical; }",
+    "    code, pre { font-family: 'SFMono-Regular', 'Menlo', monospace; }",
+    "    pre { white-space: pre-wrap; word-break: break-word; }",
+    "    .shell {",
+    "      max-width: 1520px;",
+    "      margin: 0 auto;",
+    "      padding: 24px 20px 32px;",
+    "      display: grid;",
+    "      gap: 18px;",
+    "    }",
+    "    .hero, .panel {",
+    "      background: var(--panel);",
+    "      border: 1px solid var(--line);",
+    "      border-radius: 24px;",
+    "      box-shadow: var(--shadow);",
+    "      backdrop-filter: blur(14px);",
+    "    }",
+    "    .hero { padding: 24px; display: grid; gap: 16px; }",
+    "    .hero-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: start; }",
+    "    .title { font-size: clamp(2rem, 4vw, 3.6rem); margin: 0; line-height: 0.95; letter-spacing: -0.04em; }",
+    "    .lede { margin: 0; max-width: 60rem; color: var(--muted); font-size: 1.02rem; }",
+    "    .badge-row, .meta-row, .button-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }",
+    "    .badge {",
+    "      display: inline-flex;",
+    "      align-items: center;",
+    "      gap: 0.4rem;",
+    "      padding: 0.42rem 0.7rem;",
+    "      border-radius: 999px;",
+    "      background: rgba(20, 30, 27, 0.08);",
+    "      color: var(--ink);",
+    "      font-size: 0.82rem;",
+    "      letter-spacing: 0.02em;",
+    "      text-transform: uppercase;",
+    "    }",
+    "    .badge.good { background: rgba(15, 118, 110, 0.12); color: #0f5e58; }",
+    "    .badge.warn { background: rgba(161, 98, 7, 0.14); color: #8b5a00; }",
+    "    .badge.danger { background: rgba(180, 35, 24, 0.14); color: var(--danger); }",
+    "    .layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }",
+    "    .sidebar, .workspace { display: grid; gap: 18px; }",
+    "    .panel { padding: 18px; }",
+    "    .panel h2, .panel h3, .panel h4, .hero h2 { margin: 0 0 0.6rem 0; }",
+    "    .panel p { margin-top: 0; }",
+    "    .muted { color: var(--muted); }",
+    "    .panel-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }",
+    "    .run-list, .task-list, .timeline-list, .artifact-list, .decision-list { display: grid; gap: 0.7rem; }",
+    "    .run-card, .task-row, .timeline-card, .artifact-card, .decision-card, .dag-node, .summary-card {",
+    "      border: 1px solid var(--line);",
+    "      border-radius: 18px;",
+    "      padding: 0.9rem;",
+    "      background: var(--panel-strong);",
+    "    }",
+    "    .run-card.active, .task-row.active, .dag-node.active { border-color: rgba(15, 118, 110, 0.55); box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.24); }",
+    "    .run-card button, .task-row button, .dag-node button { width: 100%; text-align: left; background: transparent; color: inherit; border: none; padding: 0; }",
+    "    .run-card button:hover, .task-row button:hover, .dag-node button:hover { opacity: 0.88; }",
+    "    .dag-shell { display: grid; gap: 1rem; }",
+    "    .dag-columns { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; }",
+    "    .dag-column { display: grid; gap: 0.75rem; }",
+    "    .dag-column h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }",
+    "    .node-state { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }",
+    "    .node-title { font-size: 1.05rem; margin: 0.25rem 0 0; }",
+    "    .node-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }",
+    "    .pill {",
+    "      padding: 0.26rem 0.55rem;",
+    "      border-radius: 999px;",
+    "      background: rgba(20, 30, 27, 0.07);",
+    "      font-size: 0.78rem;",
+    "    }",
+    "    .columns-2 { display: grid; gap: 18px; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }",
+    "    .detail-grid { display: grid; gap: 0.9rem; }",
+    "    .kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0.45rem 0.7rem; }",
+    "    .kv dt { color: var(--muted); }",
+    "    .kv dd { margin: 0; }",
+    "    .stack { display: grid; gap: 0.65rem; }",
+    "    .split-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }",
+    "    .notice { border-radius: 16px; padding: 0.85rem 0.95rem; border: 1px solid var(--line); background: rgba(20, 30, 27, 0.05); }",
+    "    .notice.error { border-color: rgba(180, 35, 24, 0.22); background: rgba(180, 35, 24, 0.08); }",
+    "    .notice.success { border-color: rgba(15, 118, 110, 0.22); background: rgba(15, 118, 110, 0.08); }",
+    "    .empty { padding: 1rem; border: 1px dashed rgba(23, 32, 31, 0.22); border-radius: 18px; color: var(--muted); }",
+    "    .mini { font-size: 0.86rem; color: var(--muted); }",
+    "    .mono { font-family: 'SFMono-Regular', 'Menlo', monospace; }",
+    "    .form-grid { display: grid; gap: 0.75rem; }",
+    "    .form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }",
+    "    .link-list { display: grid; gap: 0.4rem; }",
+    "    .section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }",
+    "    @media (max-width: 1180px) {",
+    "      .layout, .columns-2, .panel-grid { grid-template-columns: minmax(0, 1fr); }",
+    "      .sidebar { order: 2; }",
+    "    }",
+    "    @media (max-width: 700px) {",
+    "      .shell { padding: 16px 12px 24px; }",
+    "      .hero, .panel { padding: 16px; border-radius: 20px; }",
+    "      .form-grid.compact, .kv { grid-template-columns: minmax(0, 1fr); }",
+    "      .title { font-size: 2.2rem; }",
+    "    }",
+    "  </style>",
+    "</head>",
+    "<body>",
+    "  <div class='shell'>",
+    "    <section class='hero'>",
+    "      <div class='hero-top'>",
+    "        <div>",
+    "          <p class='badge-row' id='hero-badges'></p>",
+    "          <h1 class='title'>Night Shift Dash</h1>",
+    "          <p class='lede'>A localhost-only front door for bootstrap, planning, execution, recovery, and audit. The browser consumes the same durable journal and repo-state artifacts as the CLI, which is a mildly radical way to avoid inventing yet another control plane.</p>",
+    "        </div>",
+    "        <div class='summary-card' id='hero-summary'></div>",
+    "      </div>",
+    "      <div id='hero-notice'></div>",
+    "    </section>",
+    "    <div class='layout'>",
+    "      <aside class='sidebar'>",
+    "        <section class='panel' id='command-center'></section>",
+    "        <section class='panel' id='run-history'></section>",
+    "      </aside>",
+    "      <main class='workspace'>",
+    "        <section class='panel' id='dag-panel'></section>",
+    "        <div class='columns-2'>",
+    "          <section class='panel' id='task-list-panel'></section>",
+    "          <section class='panel' id='task-detail-panel'></section>",
+    "        </div>",
+    "        <div class='panel-grid'>",
+    "          <section class='panel' id='timeline-panel'></section>",
+    "          <section class='panel' id='audit-panel'></section>",
+    "        </div>",
+    "      </main>",
+    "    </div>",
+    "  </div>",
+    "  <script>",
+    "    const state = {",
+    "      bootstrap: null,",
+    "      selectedRunId: '',",
+    "      selectedTaskId: '',",
+    "      stream: null,",
+    "      streamKey: '',",
+    "      liveStatus: 'connecting',",
+    "      notice: '',",
+    "      noticeKind: 'neutral',",
+    "      providerModels: {},",
+    "    };",
+    "",
+    "    const ids = {",
+    "      heroBadges: document.getElementById('hero-badges'),",
+    "      heroSummary: document.getElementById('hero-summary'),",
+    "      heroNotice: document.getElementById('hero-notice'),",
+    "      commandCenter: document.getElementById('command-center'),",
+    "      runHistory: document.getElementById('run-history'),",
+    "      dagPanel: document.getElementById('dag-panel'),",
+    "      taskList: document.getElementById('task-list-panel'),",
+    "      taskDetail: document.getElementById('task-detail-panel'),",
+    "      timeline: document.getElementById('timeline-panel'),",
+    "      audit: document.getElementById('audit-panel'),",
+    "    };",
+    "",
+    "    function escapeHtml(value) {",
+    "      return String(value ?? '')",
+    "        .replaceAll('&', '&amp;')",
+    "        .replaceAll('<', '&lt;')",
+    "        .replaceAll('>', '&gt;')",
+    "        .replaceAll('\"', '&quot;')",
+    "        .replaceAll(\"'\", '&#39;');",
+    "    }",
+    "",
+    "    function asArray(value) {",
+    "      return Array.isArray(value) ? value : [];",
+    "    }",
+    "",
+    "    function selectedRun() {",
+    "      return state.bootstrap && state.bootstrap.selected_run ? state.bootstrap.selected_run : null;",
+    "    }",
+    "",
+    "    function tasks() {",
+    "      const run = selectedRun();",
+    "      return run ? asArray(run.tasks) : [];",
+    "    }",
+    "",
+    "    function selectedTask() {",
+    "      const runTasks = tasks();",
+    "      return runTasks.find((task) => task.id === state.selectedTaskId) || runTasks[0] || null;",
+    "    }",
+    "",
+    "    function runQuery(runId) {",
+    "      return runId ? '?run_id=' + encodeURIComponent(runId) : '';",
+    "    }",
+    "",
+    "    async function requestJson(path, options) {",
+    "      const response = await fetch(path, Object.assign({ cache: 'no-store' }, options || {}));",
+    "      const text = await response.text();",
+    "      let payload = {};",
+    "      if (text) {",
+    "        payload = JSON.parse(text);",
+    "      }",
+    "      if (!response.ok) {",
+    "        const error = new Error(payload.message || (response.status + ' ' + response.statusText));",
+    "        error.payload = payload;",
+    "        throw error;",
+    "      }",
+    "      return payload;",
+    "    }",
+    "",
+    "    function setNotice(message, kind) {",
+    "      state.notice = message || '';",
+    "      state.noticeKind = kind || 'neutral';",
+    "      renderHero();",
+    "    }",
+    "",
+    "    function formatList(items, emptyLabel) {",
+    "      const values = asArray(items);",
+    "      if (!values.length) {",
+    "        return '<div class=' + \"'\" + 'empty' + \"'\" + '>' + escapeHtml(emptyLabel || 'No entries yet.') + '</div>';",
+    "      }",
+    "      return '<div class=' + \"'\" + 'stack' + \"'\" + '>' + values.map((item) => '<div class=' + \"'\" + 'artifact-card' + \"'\" + '>' + escapeHtml(item) + '</div>').join('') + '</div>';",
+    "    }",
+    "",
+    "    function artifactLinks(items) {",
+    "      const values = asArray(items);",
+    "      if (!values.length) {",
+    "        return '<div class=' + \"'\" + 'empty' + \"'\" + '>No artifact paths recorded.</div>';",
+    "      }",
+    "      return '<div class=' + \"'\" + 'artifact-list' + \"'\" + '>' + values.map((item) => {",
+    "        return '<div class=' + \"'\" + 'artifact-card' + \"'\" + '><a href=' + \"'\" + escapeHtml(item.route) + \"'\" + ' target=' + \"'\" + '_blank' + \"'\" + ' rel=' + \"'\" + 'noreferrer' + \"'\" + '>' + escapeHtml(item.path) + '</a></div>';",
+    "      }).join('') + '</div>';",
+    "    }",
+    "",
+    "    function statusTone(status) {",
+    "      switch (status) {",
+    "        case 'completed': return 'good';",
+    "        case 'blocked':",
+    "        case 'manual_attention': return 'warn';",
+    "        case 'failed': return 'danger';",
+    "        default: return '';",
+    "      }",
+    "    }",
+    "",
+    "    function ensureSelectedTask() {",
+    "      const runTasks = tasks();",
+    "      if (!runTasks.length) {",
+    "        state.selectedTaskId = '';",
+    "        return;",
+    "      }",
+    "      if (!runTasks.some((task) => task.id === state.selectedTaskId)) {",
+    "        state.selectedTaskId = runTasks[0].id;",
+    "      }",
+    "    }",
+    "",
+    "    function applyBootstrap(payload) {",
+    "      state.bootstrap = payload;",
+    "      state.selectedRunId = payload && payload.runs ? (payload.runs.selected_run_id || '') : '';",
+    "      ensureSelectedTask();",
+    "      render();",
+    "      ensureStream();",
+    "      const provider = readInitProvider();",
+    "      if (provider) {",
+    "        void loadProviderModels(provider);",
+    "      }",
+    "    }",
+    "",
+    "    function buildDagColumns(runTasks) {",
+    "      const map = new Map(runTasks.map((task) => [task.id, task]));",
+    "      const depths = new Map();",
+    "      function depthFor(task) {",
+    "        if (depths.has(task.id)) return depths.get(task.id);",
+    "        const dependencies = asArray(task.dependencies).map((id) => map.get(id)).filter(Boolean);",
+    "        const value = dependencies.length ? Math.max(...dependencies.map(depthFor)) + 1 : 0;",
+    "        depths.set(task.id, value);",
+    "        return value;",
+    "      }",
+    "      runTasks.forEach(depthFor);",
+    "      const groups = [];",
+    "      runTasks.forEach((task) => {",
+    "        const depth = depths.get(task.id) || 0;",
+    "        if (!groups[depth]) groups[depth] = [];",
+    "        groups[depth].push(task);",
+    "      });",
+    "      return groups.filter(Boolean);",
+    "    }",
+    "",
+    "    function renderHero() {",
+    "      const bootstrap = state.bootstrap;",
+    "      const run = selectedRun();",
+    "      const badges = [];",
+    "      badges.push('<span class=' + \"'\" + 'badge ' + (bootstrap && bootstrap.initialized ? 'good' : 'warn') + \"'\" + '>' + escapeHtml(bootstrap && bootstrap.initialized ? 'initialized' : 'awaiting init') + '</span>');",
+    "      badges.push('<span class=' + \"'\" + 'badge ' + statusTone(run ? run.status : '') + \"'\" + '>' + escapeHtml(run ? run.status : 'no active run') + '</span>');",
+    "      badges.push('<span class=' + \"'\" + 'badge ' + (state.liveStatus === 'live' ? 'good' : state.liveStatus === 'disconnected' ? 'warn' : '') + \"'\" + '>sse ' + escapeHtml(state.liveStatus) + '</span>');",
+    "      ids.heroBadges.innerHTML = badges.join('');",
+    "      ids.heroSummary.innerHTML = bootstrap ? [",
+    "        '<div class=' + \"'\" + 'stack' + \"'\" + '>',",
+    "        '<div><strong>Repo</strong><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(bootstrap.repo_root) + '</div></div>',",
+    "        '<div><strong>Selected run</strong><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(state.selectedRunId || 'none') + '</div></div>',",
+    "        '<div><strong>Config</strong><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(bootstrap.config_path) + '</div></div>',",
+    "        '</div>'",
+    "      ].join('') : '<div class=' + \"'\" + 'mini' + \"'\" + '>Loading repo bootstrap...</div>';",
+    "      ids.heroNotice.innerHTML = state.notice ? '<div class=' + \"'\" + 'notice ' + (state.noticeKind === 'error' ? 'error' : state.noticeKind === 'success' ? 'success' : '') + \"'\" + '>' + escapeHtml(state.notice) + '</div>' : '';",
+    "    }",
+    "",
+    "    function renderCommandCenter() {",
+    "      const bootstrap = state.bootstrap;",
+    "      const run = selectedRun();",
+    "      if (!bootstrap) {",
+    "        ids.commandCenter.innerHTML = '<h2>Command Center</h2><div class=' + \"'\" + 'empty' + \"'\" + '>Loading command surface...</div>';",
+    "        return;",
+    "      }",
+    "      const initModels = asArray(state.providerModels[readInitProvider()] || []);",
+    "      const initModelOptions = initModels.map((model) => '<option value=' + \"'\" + escapeHtml(model.id) + \"'\" + '>' + escapeHtml(model.label) + (model.is_default ? ' (default)' : '') + '</option>').join('');",
+    "      const actionButtons = run ? [",
+    "        '<button type=' + \"'\" + 'button' + \"'\" + ' data-command=' + \"'\" + 'start' + \"'\" + '>' + 'Start selected run' + '</button>',",
+    "        '<button type=' + \"'\" + 'button' + \"'\" + ' class=' + \"'\" + 'secondary' + \"'\" + ' data-command=' + \"'\" + 'resume' + \"'\" + '>' + 'Resume selected run' + '</button>'",
+    "      ].join('') : '<button type=' + \"'\" + 'button' + \"'\" + ' disabled>No run selected</button>';",
+    "      const decisionCards = run && asArray(run.decision_requests).length ? '<form id=' + \"'\" + 'resolve-form' + \"'\" + ' class=' + \"'\" + 'form-grid' + \"'\" + '>' + asArray(run.decision_requests).map((entry) => {",
+    "        const request = entry.request || {};",
+    "        const options = asArray(request.options).map((option) => '<option value=' + \"'\" + escapeHtml(option.label) + \"'\" + '>' + escapeHtml(option.label + ' - ' + option.description) + '</option>').join('');",
+    "        const recommended = request.recommended_option ? '<div class=' + \"'\" + 'mini' + \"'\" + '>Recommended: ' + escapeHtml(request.recommended_option) + '</div>' : '';",
+    "        const input = options ? '<select name=' + \"'\" + escapeHtml(request.key) + \"'\" + '><option value=' + \"'\" + '' + \"'\" + '>Select an answer</option>' + options + '</select>' : '<textarea name=' + \"'\" + escapeHtml(request.key) + \"'\" + ' placeholder=' + \"'\" + 'Write the decision answer' + \"'\" + '></textarea>';",
+    "        return '<div class=' + \"'\" + 'decision-card' + \"'\" + '><strong>' + escapeHtml(entry.task_title || entry.task_id) + '</strong><div>' + escapeHtml(request.question || '') + '</div><div class=' + \"'\" + 'mini' + \"'\" + '>' + escapeHtml(request.rationale || '') + '</div>' + recommended + input + '</div>';",
+    "      }).join('') + '<button type=' + \"'\" + 'submit' + \"'\" + '>Resolve decisions</button></form>' : '<div class=' + \"'\" + 'empty' + \"'\" + '>No unresolved decisions for the selected run.</div>';",
+    "      ids.commandCenter.innerHTML = [",
+    "        '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Command Center</h2><span class=' + \"'\" + 'mini' + \"'\" + '>POST-backed commands mutate the same journal as the CLI.</span></div>',",
+    "        bootstrap.initialized ? '' : [",
+    "          '<div class=' + \"'\" + 'stack' + \"'\" + '>',",
+    "          '<p class=' + \"'\" + 'muted' + \"'\" + '>Initialize in place and keep the Dash session alive.</p>',",
+    "          '<form id=' + \"'\" + 'init-form' + \"'\" + ' class=' + \"'\" + 'form-grid' + \"'\" + '>',",
+    "          '<label>Provider<select id=' + \"'\" + 'init-provider' + \"'\" + ' name=' + \"'\" + 'provider' + \"'\" + '><option value=' + \"'\" + 'codex' + \"'\" + '>codex</option><option value=' + \"'\" + 'cursor' + \"'\" + '>cursor</option></select></label>',",
+    "          '<label>Model<select id=' + \"'\" + 'init-model' + \"'\" + ' name=' + \"'\" + 'model' + \"'\" + '><option value=' + \"'\" + '' + \"'\" + '>Choose a local model</option>' + initModelOptions + '</select></label>',",
+    "          '<label>Reasoning<select name=' + \"'\" + 'reasoning' + \"'\" + '><option value=' + \"'\" + '' + \"'\" + '>default</option><option value=' + \"'\" + 'low' + \"'\" + '>low</option><option value=' + \"'\" + 'medium' + \"'\" + '>medium</option><option value=' + \"'\" + 'high' + \"'\" + '>high</option><option value=' + \"'\" + 'xhigh' + \"'\" + '>xhigh</option></select></label>',",
+    "          '<label><input type=' + \"'\" + 'checkbox' + \"'\" + ' name=' + \"'\" + 'generate_setup' + \"'\" + '> Generate worktree setup when missing</label>',",
+    "          '<button type=' + \"'\" + 'submit' + \"'\" + '>Initialize repository</button>',",
+    "          '</form>',",
+    "          '</div>'",
+    "        ].join('') : '',",
+    "        bootstrap.initialized ? [",
+    "          '<form id=' + \"'\" + 'plan-form' + \"'\" + ' class=' + \"'\" + 'form-grid' + \"'\" + '>',",
+    "          '<h3>Plan from notes</h3>',",
+    "          '<textarea name=' + \"'\" + 'notes' + \"'\" + ' placeholder=' + \"'\" + 'Paste notes or a file path. The planner will decide whether this feels monoidal enough to become a run.' + \"'\" + '></textarea>',",
+    "          '<div class=' + \"'\" + 'form-grid compact' + \"'\" + '><label>Doc path<input name=' + \"'\" + 'doc_path' + \"'\" + ' placeholder=' + \"'\" + '.night-shift/execution-brief.md' + \"'\" + '></label><label>Profile override<input name=' + \"'\" + 'profile' + \"'\" + ' placeholder=' + \"'\" + 'optional profile name' + \"'\" + '></label></div>',",
+    "          '<button type=' + \"'\" + 'submit' + \"'\" + '>Plan run</button>',",
+    "          '</form>',",
+    "          '<form id=' + \"'\" + 'review-plan-form' + \"'\" + ' class=' + \"'\" + 'form-grid' + \"'\" + '>',",
+    "          '<h3>Plan from reviews</h3>',",
+    "          '<textarea name=' + \"'\" + 'notes' + \"'\" + ' placeholder=' + \"'\" + 'Optional notes blended into the review-driven replanning pass.' + \"'\" + '></textarea>',",
+    "          '<div class=' + \"'\" + 'form-grid compact' + \"'\" + '><label>Doc path<input name=' + \"'\" + 'doc_path' + \"'\" + ' placeholder=' + \"'\" + 'optional alternate brief path' + \"'\" + '></label><label>Profile override<input name=' + \"'\" + 'profile' + \"'\" + ' placeholder=' + \"'\" + 'optional profile name' + \"'\" + '></label></div>',",
+    "          '<button type=' + \"'\" + 'submit' + \"'\" + ' class=' + \"'\" + 'secondary' + \"'\" + '>Plan from reviews</button>',",
+    "          '</form>',",
+    "          '<div class=' + \"'\" + 'stack' + \"'\" + '><h3>Execution</h3><div class=' + \"'\" + 'split-actions' + \"'\" + '>' + actionButtons + '</div></div>',",
+    "          '<div class=' + \"'\" + 'stack' + \"'\" + '><h3>Decision resolution</h3>' + decisionCards + '</div>'",
+    "        ].join('') : '',",
+    "      ].join('');",
+    "    }",
+    "",
+    "    function renderRunHistory() {",
+    "      const bootstrap = state.bootstrap;",
+    "      if (!bootstrap) {",
+    "        ids.runHistory.innerHTML = '<h2>Runs</h2><div class=' + \"'\" + 'empty' + \"'\" + '>Loading runs...</div>';",
+    "        return;",
+    "      }",
+    "      const runs = bootstrap.runs && Array.isArray(bootstrap.runs.items) ? bootstrap.runs.items : [];",
+    "      ids.runHistory.innerHTML = [",
+    "        '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Run History</h2><span class=' + \"'\" + 'mini' + \"'\" + '>Durable journal snapshots for this repo.</span></div>',",
+    "        runs.length ? '<div class=' + \"'\" + 'run-list' + \"'\" + '>' + runs.map((run) => {",
+    "          const badges = [];",
+    "          if (bootstrap.runs.active_run_id === run.run_id) badges.push('active');",
+    "          if (bootstrap.runs.latest_run_id === run.run_id) badges.push('latest');",
+    "          return '<div class=' + \"'\" + 'run-card ' + (state.selectedRunId === run.run_id ? 'active' : '') + \"'\" + '><button type=' + \"'\" + 'button' + \"'\" + ' data-run-id=' + \"'\" + escapeHtml(run.run_id) + \"'\" + '><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(run.run_id) + '</div><h3>' + escapeHtml(run.status) + '</h3><div class=' + \"'\" + 'mini' + \"'\" + '>' + escapeHtml(run.updated_at) + '</div><div class=' + \"'\" + 'badge-row' + \"'\" + '>' + badges.map((label) => '<span class=' + \"'\" + 'badge' + \"'\" + '>' + escapeHtml(label) + '</span>').join('') + '</div></button></div>';",
+    "        }).join('') + '</div>' : '<div class=' + \"'\" + 'empty' + \"'\" + '>No runs yet. Plan from notes or reviews to create one.</div>'",
+    "      ].join('');",
+    "    }",
+    "",
+    "    function renderDag() {",
+    "      const run = selectedRun();",
+    "      if (!run) {",
+    "        ids.dagPanel.innerHTML = '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Task DAG</h2><span class=' + \"'\" + 'mini' + \"'\" + '>Graph view appears once a run exists.</span></div><div class=' + \"'\" + 'empty' + \"'\" + '>Plan a run to populate the DAG.</div>';",
+    "        return;",
+    "      }",
+    "      const columns = buildDagColumns(tasks());",
+    "      ids.dagPanel.innerHTML = [",
+    "        '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Task DAG</h2><span class=' + \"'\" + 'mini' + \"'\" + '>Graph and list/detail stay synchronized on the selected task.</span></div>',",
+    "        '<div class=' + \"'\" + 'badge-row' + \"'\" + '>',",
+    "        '<span class=' + \"'\" + 'badge' + \"'\" + '>tasks ' + escapeHtml(run.task_dag.task_count) + '</span>',",
+    "        '<span class=' + \"'\" + 'badge good' + \"'\" + '>ready ' + escapeHtml(asArray(run.task_dag.ready_task_ids).length) + '</span>',",
+    "        '<span class=' + \"'\" + 'badge' + \"'\" + '>running ' + escapeHtml(asArray(run.task_dag.running_task_ids).length) + '</span>',",
+    "        '<span class=' + \"'\" + 'badge warn' + \"'\" + '>blocked ' + escapeHtml(asArray(run.task_dag.blocked_task_ids).length) + '</span>',",
+    "        '</div>',",
+    "        '<div class=' + \"'\" + 'dag-shell' + \"'\" + '><div class=' + \"'\" + 'dag-columns' + \"'\" + '>' + columns.map((column, index) => {",
+    "          return '<div class=' + \"'\" + 'dag-column' + \"'\" + '><h4>Stage ' + escapeHtml(index + 1) + '</h4>' + column.map((task) => {",
+    "            return '<div class=' + \"'\" + 'dag-node ' + (state.selectedTaskId === task.id ? 'active' : '') + \"'\" + '><button type=' + \"'\" + 'button' + \"'\" + ' data-task-id=' + \"'\" + escapeHtml(task.id) + \"'\" + '><div class=' + \"'\" + 'node-state' + \"'\" + '>' + escapeHtml(task.state) + '</div><p class=' + \"'\" + 'node-title' + \"'\" + '>' + escapeHtml(task.title) + '</p><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(task.id) + '</div><div class=' + \"'\" + 'node-meta' + \"'\" + '><span class=' + \"'\" + 'pill' + \"'\" + '>' + escapeHtml(task.task_kind) + '</span><span class=' + \"'\" + 'pill' + \"'\" + '>' + escapeHtml(task.execution_mode) + '</span><span class=' + \"'\" + 'pill' + \"'\" + '>deps ' + escapeHtml(asArray(task.dependencies).length) + '</span></div></button></div>';",
+    "          }).join('') + '</div>';",
+    "        }).join('') + '</div></div>'",
+    "      ].join('');",
+    "    }",
+    "",
+    "    function renderTaskList() {",
+    "      const run = selectedRun();",
+    "      if (!run) {",
+    "        ids.taskList.innerHTML = '<h2>Tasks</h2><div class=' + \"'\" + 'empty' + \"'\" + '>No task list yet.</div>';",
+    "        return;",
+    "      }",
+    "      ids.taskList.innerHTML = [",
+    "        '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Tasks</h2><span class=' + \"'\" + 'mini' + \"'\" + '>Pending, running, blocked, and delivered work.</span></div>',",
+    "        '<div class=' + \"'\" + 'task-list' + \"'\" + '>' + tasks().map((task) => {",
+    "          return '<div class=' + \"'\" + 'task-row ' + (state.selectedTaskId === task.id ? 'active' : '') + \"'\" + '><button type=' + \"'\" + 'button' + \"'\" + ' data-task-id=' + \"'\" + escapeHtml(task.id) + \"'\" + '><div class=' + \"'\" + 'section-head' + \"'\" + '><strong>' + escapeHtml(task.title) + '</strong><span class=' + \"'\" + 'badge ' + statusTone(task.state) + \"'\" + '>' + escapeHtml(task.state) + '</span></div><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(task.id) + '</div><div class=' + \"'\" + 'badge-row' + \"'\" + '><span class=' + \"'\" + 'badge' + \"'\" + '>' + escapeHtml(task.task_kind) + '</span><span class=' + \"'\" + 'badge' + \"'\" + '>' + escapeHtml(task.execution_mode) + '</span></div></button></div>';",
+    "        }).join('') + '</div>'",
+    "      ].join('');",
+    "    }",
+    "",
+    "    function renderTaskDetail() {",
+    "      const task = selectedTask();",
+    "      if (!task) {",
+    "        ids.taskDetail.innerHTML = '<h2>Task Detail</h2><div class=' + \"'\" + 'empty' + \"'\" + '>Select a task to inspect metadata, lineage, runtime context, and artifacts.</div>';",
+    "        return;",
+    "      }",
+    "      const runtime = task.runtime_context || {};",
+    "      const delivered = task.delivered_pr || null;",
+    "      const artifactSections = task.artifacts || {};",
+    "      ids.taskDetail.innerHTML = [",
+    "        '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Task Detail</h2><span class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(task.id) + '</span></div>',",
+    "        '<div class=' + \"'\" + 'detail-grid' + \"'\" + '>',",
+    "        '<div><h3>' + escapeHtml(task.title) + '</h3><p>' + escapeHtml(task.description) + '</p></div>',",
+    "        '<dl class=' + \"'\" + 'kv' + \"'\" + '><dt>State</dt><dd>' + escapeHtml(task.state) + '</dd><dt>Kind</dt><dd>' + escapeHtml(task.task_kind) + '</dd><dt>Mode</dt><dd>' + escapeHtml(task.execution_mode) + '</dd><dt>Dependencies</dt><dd>' + escapeHtml(asArray(task.dependencies).join(', ') || 'none') + '</dd><dt>Branch</dt><dd class=' + \"'\" + 'mono' + \"'\" + '>' + escapeHtml(task.branch_name || 'not assigned') + '</dd><dt>Worktree</dt><dd class=' + \"'\" + 'mono' + \"'\" + '>' + escapeHtml(task.worktree_path || 'not prepared') + '</dd></dl>',",
+    "        '<div><h3>Acceptance</h3>' + formatList(task.acceptance, 'No acceptance criteria recorded.') + '</div>',",
+    "        '<div><h3>Demo Plan</h3>' + formatList(task.demo_plan, 'No demo plan recorded.') + '</div>',",
+    "        '<div><h3>Decision Requests</h3>' + formatList(asArray(task.unresolved_decision_requests).map((request) => request.question), 'No unresolved decisions for this task.') + '</div>',",
+    "        '<div><h3>Runtime Context</h3><dl class=' + \"'\" + 'kv' + \"'\" + '><dt>Worktree ID</dt><dd class=' + \"'\" + 'mono' + \"'\" + '>' + escapeHtml(runtime.worktree_id || 'n/a') + '</dd><dt>Compose Project</dt><dd class=' + \"'\" + 'mono' + \"'\" + '>' + escapeHtml(runtime.compose_project || 'n/a') + '</dd><dt>Port Base</dt><dd>' + escapeHtml(runtime.port_base || 'n/a') + '</dd><dt>Manifest</dt><dd class=' + \"'\" + 'mono' + \"'\" + '>' + escapeHtml(runtime.manifest_path || 'n/a') + '</dd><dt>Handoff</dt><dd class=' + \"'\" + 'mono' + \"'\" + '>' + escapeHtml(runtime.handoff_path || 'n/a') + '</dd></dl></div>',",
+    "        '<div><h3>Delivery</h3>' + (delivered ? '<div class=' + \"'\" + 'stack' + \"'\" + '><div>PR #' + escapeHtml(delivered.number) + '</div>' + (delivered.url ? '<a href=' + \"'\" + escapeHtml(delivered.url) + \"'\" + ' target=' + \"'\" + '_blank' + \"'\" + ' rel=' + \"'\" + 'noreferrer' + \"'\" + '>Open delivered PR</a>' : '') + '</div>' : '<div class=' + \"'\" + 'empty' + \"'\" + '>No delivered PR yet.</div>') + '</div>',",
+    "        '<div><h3>Artifacts</h3>' + artifactLinks([].concat(asArray(artifactSections.prompts), asArray(artifactSections.logs), asArray(artifactSections.raw_payloads), asArray(artifactSections.sanitized_payloads), artifactSections.runtime_manifest ? [artifactSections.runtime_manifest] : [], artifactSections.runtime_handoff ? [artifactSections.runtime_handoff] : [], artifactSections.runtime_env ? [artifactSections.runtime_env] : [])) + '</div>',",
+    "        '</div>'",
+    "      ].join('');",
+    "    }",
+    "",
+    "    function renderTimeline() {",
+    "      const run = selectedRun();",
+    "      if (!run) {",
+    "        ids.timeline.innerHTML = '<h2>Timeline</h2><div class=' + \"'\" + 'empty' + \"'\" + '>Timeline data appears once a run exists.</div>';",
+    "        return;",
+    "      }",
+    "      const selectedTaskValue = selectedTask();",
+    "      const selectedTaskId = selectedTaskValue ? selectedTaskValue.id : '';",
+    "      const items = asArray(run.timeline).filter((event) => !selectedTaskId || !event.task_id || event.task_id === selectedTaskId);",
+    "      ids.timeline.innerHTML = [",
+    "        '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Timeline</h2><span class=' + \"'\" + 'mini' + \"'\" + '>Filtered to the selected task when possible.</span></div>',",
+    "        items.length ? '<div class=' + \"'\" + 'timeline-list' + \"'\" + '>' + items.map((event) => {",
+    "          return '<div class=' + \"'\" + 'timeline-card' + \"'\" + '><div class=' + \"'\" + 'section-head' + \"'\" + '><strong>' + escapeHtml(event.kind) + '</strong><span class=' + \"'\" + 'mini' + \"'\" + '>' + escapeHtml(event.at) + '</span></div><div>' + escapeHtml(event.message) + '</div>' + (event.task_id ? '<div class=' + \"'\" + 'mini mono' + \"'\" + '>task ' + escapeHtml(event.task_id) + '</div>' : '') + '</div>';",
+    "        }).join('') + '</div>' : '<div class=' + \"'\" + 'empty' + \"'\" + '>No timeline entries yet.</div>'",
+    "      ].join('');",
+    "    }",
+    "",
+    "    function renderAudit() {",
+    "      const run = selectedRun();",
+    "      if (!run) {",
+    "        ids.audit.innerHTML = '<h2>Audit</h2><div class=' + \"'\" + 'empty' + \"'\" + '>Audit surfaces appear once a run exists.</div>';",
+    "        return;",
+    "      }",
+    "      const report = run.report || {};",
+    "      const provenance = run.provenance || {};",
+    "      const repoState = run.repo_state || null;",
+    "      const lineage = run.review_lineage || null;",
+    "      const delivery = tasks().filter((task) => task.delivered_pr).map((task) => task.id + ' -> PR #' + task.delivered_pr.number);",
+    "      ids.audit.innerHTML = [",
+    "        '<div class=' + \"'\" + 'section-head' + \"'\" + '><h2>Audit</h2><span class=' + \"'\" + 'mini' + \"'\" + '>Report, provenance, repo-state drift, lineage, and delivery context.</span></div>',",
+    "        '<div class=' + \"'\" + 'stack' + \"'\" + '>',",
+    "        '<div class=' + \"'\" + 'summary-card' + \"'\" + '><strong>Status summary</strong><div class=' + \"'\" + 'mini' + \"'\" + '>Run ' + escapeHtml(run.status) + ', confidence ' + escapeHtml(run.confidence_posture) + '</div><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(run.run_id) + '</div></div>',",
+    "        '<div><h3>Confidence</h3>' + formatList(run.confidence_reasons, 'No confidence notes recorded.') + '</div>',",
+    "        '<div><h3>Report</h3><div class=' + \"'\" + 'link-list' + \"'\" + '><a href=' + \"'\" + escapeHtml(report.route || '#') + \"'\" + ' target=' + \"'\" + '_blank' + \"'\" + ' rel=' + \"'\" + 'noreferrer' + \"'\" + '>Open report artifact</a><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(report.path || '') + '</div><pre>' + escapeHtml(report.content || '') + '</pre></div></div>',",
+    "        '<div><h3>Provenance</h3><div class=' + \"'\" + 'link-list' + \"'\" + '><a href=' + \"'\" + escapeHtml(provenance.route || '#') + \"'\" + ' target=' + \"'\" + '_blank' + \"'\" + ' rel=' + \"'\" + 'noreferrer' + \"'\" + '>Open provenance artifact</a><div class=' + \"'\" + 'mini mono' + \"'\" + '>' + escapeHtml(provenance.path || '') + '</div></div></div>',",
+    "        '<div><h3>Repo state</h3>' + (repoState ? '<dl class=' + \"'\" + 'kv' + \"'\" + '><dt>Snapshot captured</dt><dd>' + escapeHtml(repoState.snapshot_captured_at) + '</dd><dt>Drift</dt><dd>' + escapeHtml(repoState.drift || 'none') + '</dd><dt>Drift details</dt><dd>' + escapeHtml(repoState.drift_details || 'none') + '</dd><dt>Actionable PRs</dt><dd>' + escapeHtml(asArray(repoState.actionable_pull_requests).length) + '</dd><dt>Impacted PRs</dt><dd>' + escapeHtml(asArray(repoState.impacted_pull_requests).length) + '</dd></dl>' : '<div class=' + \"'\" + 'empty' + \"'\" + '>No repo-state snapshot for this run.</div>') + '</div>',",
+    "        '<div><h3>Review lineage</h3>' + (lineage ? formatList(asArray(lineage.lineage_entries).map((entry) => entry.task_id + ' replaced ' + asArray(entry.superseded_pr_numbers).join(', ')), 'No replacement lineage recorded.') : '<div class=' + \"'\" + 'empty' + \"'\" + '>No review lineage recorded.</div>') + '</div>',",
+    "        '<div><h3>Delivery context</h3>' + formatList(delivery, 'No delivered PR linkage yet.') + '</div>',",
+    "        '<div><h3>Planning artifacts</h3>' + artifactLinks([].concat(asArray(run.planning_artifacts), run.planner_prompt ? [run.planner_prompt] : [], run.planner_log ? [run.planner_log] : [])) + '</div>',",
+    "        '</div>'",
+    "      ].join('');",
+    "    }",
+    "",
+    "    function render() {",
+    "      renderHero();",
+    "      renderCommandCenter();",
+    "      renderRunHistory();",
+    "      renderDag();",
+    "      renderTaskList();",
+    "      renderTaskDetail();",
+    "      renderTimeline();",
+    "      renderAudit();",
+    "    }",
+    "",
+    "    function ensureStream() {",
+    "      const key = '/api/events' + runQuery(state.selectedRunId);",
+    "      if (state.streamKey === key && state.stream) return;",
+    "      if (state.stream) state.stream.close();",
+    "      state.streamKey = key;",
+    "      state.liveStatus = 'connecting';",
+    "      renderHero();",
+    "      const source = new EventSource(key);",
+    "      state.stream = source;",
+    "      source.onopen = () => {",
+    "        state.liveStatus = 'live';",
+    "        renderHero();",
+    "      };",
+    "      const applyEvent = (event) => {",
+    "        try {",
+    "          applyBootstrap(JSON.parse(event.data));",
+    "          state.liveStatus = 'live';",
+    "          renderHero();",
+    "        } catch (error) {",
+    "          setNotice(error.message, 'error');",
+    "        }",
+    "      };",
+    "      source.addEventListener('bootstrap', applyEvent);",
+    "      source.addEventListener('state', applyEvent);",
+    "      source.addEventListener('error', (event) => {",
+    "        if (event.data) {",
+    "          try {",
+    "            const payload = JSON.parse(event.data);",
+    "            setNotice(payload.message || 'Dash event stream reported an error.', 'error');",
+    "          } catch (_error) {",
+    "            setNotice('Dash event stream reported an error.', 'error');",
+    "          }",
+    "        }",
+    "      });",
+    "      source.onerror = () => {",
+    "        state.liveStatus = 'disconnected';",
+    "        renderHero();",
+    "      };",
+    "    }",
+    "",
+    "    async function refreshBootstrap(runId) {",
+    "      const payload = await requestJson('/api/bootstrap' + runQuery(runId));",
+    "      applyBootstrap(payload);",
+    "    }",
+    "",
+    "    async function executeCommand(command, body) {",
+    "      try {",
+    "        const payload = await requestJson('/api/commands/' + command, {",
+    "          method: 'POST',",
+    "          headers: { 'Content-Type': 'application/json; charset=utf-8' },",
+    "          body: JSON.stringify(body || {}),",
+    "        });",
+    "        if (payload.bootstrap) {",
+    "          applyBootstrap(payload.bootstrap);",
+    "        }",
+    "        setNotice(payload.message || ('Executed ' + command + '.'), 'success');",
+    "      } catch (error) {",
+    "        if (error.payload && error.payload.bootstrap) {",
+    "          applyBootstrap(error.payload.bootstrap);",
+    "        }",
+    "        setNotice(error.message || ('Unable to execute ' + command + '.'), 'error');",
+    "      }",
+    "    }",
+    "",
+    "    function readInitProvider() {",
+    "      const select = document.getElementById('init-provider');",
+    "      return select ? select.value : 'codex';",
+    "    }",
+    "",
+    "    async function loadProviderModels(provider) {",
+    "      if (!provider || state.providerModels[provider]) return;",
+    "      try {",
+    "        const payload = await requestJson('/api/provider-models?provider=' + encodeURIComponent(provider));",
+    "        state.providerModels[provider] = payload.models || [];",
+    "        renderCommandCenter();",
+    "      } catch (error) {",
+    "        state.providerModels[provider] = [];",
+    "        setNotice(error.message || 'Unable to load provider models.', 'error');",
+    "      }",
+    "    }",
+    "",
+    "    document.addEventListener('change', (event) => {",
+    "      if (event.target && event.target.id === 'init-provider') {",
+    "        void loadProviderModels(event.target.value);",
+    "      }",
+    "    });",
+    "",
+    "    document.addEventListener('click', (event) => {",
+    "      const runButton = event.target.closest('[data-run-id]');",
+    "      if (runButton) {",
+    "        void refreshBootstrap(runButton.getAttribute('data-run-id'));",
+    "        return;",
+    "      }",
+    "      const taskButton = event.target.closest('[data-task-id]');",
+    "      if (taskButton) {",
+    "        state.selectedTaskId = taskButton.getAttribute('data-task-id') || '';",
+    "        render();",
+    "        return;",
+    "      }",
+    "      const commandButton = event.target.closest('[data-command]');",
+    "      if (commandButton) {",
+    "        const command = commandButton.getAttribute('data-command');",
+    "        void executeCommand(command, { run_id: state.selectedRunId });",
+    "      }",
+    "    });",
+    "",
+    "    document.addEventListener('submit', (event) => {",
+    "      const form = event.target;",
+    "      if (!(form instanceof HTMLFormElement)) return;",
+    "      event.preventDefault();",
+    "      const data = new FormData(form);",
+    "      if (form.id === 'init-form') {",
+    "        void executeCommand('init', {",
+    "          provider: String(data.get('provider') || ''),",
+    "          model: String(data.get('model') || ''),",
+    "          reasoning: String(data.get('reasoning') || ''),",
+    "          generate_setup: data.get('generate_setup') === 'on',",
+    "        });",
+    "      }",
+    "      if (form.id === 'plan-form') {",
+    "        void executeCommand('plan', {",
+    "          notes: String(data.get('notes') || ''),",
+    "          doc_path: String(data.get('doc_path') || ''),",
+    "          profile: String(data.get('profile') || ''),",
+    "        });",
+    "      }",
+    "      if (form.id === 'review-plan-form') {",
+    "        void executeCommand('plan-from-reviews', {",
+    "          notes: String(data.get('notes') || ''),",
+    "          doc_path: String(data.get('doc_path') || ''),",
+    "          profile: String(data.get('profile') || ''),",
+    "        });",
+    "      }",
+    "      if (form.id === 'resolve-form') {",
+    "        const run = selectedRun();",
+    "        const answers = asArray(run && run.decision_requests).map((entry) => {",
+    "          const key = entry.request ? entry.request.key : '';",
+    "          return { key, answer: String(data.get(key) || '') };",
+    "        }).filter((entry) => entry.key && entry.answer);",
+    "        void executeCommand('resolve', { run_id: state.selectedRunId, answers });",
+    "      }",
+    "    });",
+    "",
+    "    void refreshBootstrap('');",
+    "  </script>",
+    "</body>",
+    "</html>",
+  ]
+  |> string.join(with: "\n")
+}
diff --git a/src/night_shift/types.gleam b/src/night_shift/types.gleam
index b11e4a0..90c688f 100644
--- a/src/night_shift/types.gleam
+++ b/src/night_shift/types.gleam
@@ -688,7 +688,7 @@ pub fn default_config() -> Config {
 /// Parsed CLI commands for the operator-facing executable.
 pub type Command {
   Dash
-  Start(run: RunSelector, ui_enabled: Bool)
+  Start(run: RunSelector)
   Init(agent_overrides: AgentOverrides, generate_setup: Bool, assume_yes: Bool)
   Reset(assume_yes: Bool, force: Bool)
   Plan(
@@ -706,7 +706,7 @@ pub type Command {
   )
   Doctor(run: RunSelector)
   Resolve(run: RunSelector)
-  Resume(run: RunSelector, ui_enabled: Bool, explain_only: Bool)
+  Resume(run: RunSelector, explain_only: Bool)
   Demo(ui_enabled: Bool)
   Help
 }
diff --git a/test/night_shift_cli_config_test.gleam b/test/night_shift_cli_config_test.gleam
index 5b1c16b..2f81e68 100644
--- a/test/night_shift_cli_config_test.gleam
+++ b/test/night_shift_cli_config_test.gleam
@@ -7,7 +7,7 @@ import night_shift/types
 import night_shift/worktree_setup
 
 pub fn parse_start_command_test() {
-  let assert Ok(types.Start(types.RunId("run-123"), False)) =
+  let assert Ok(types.Start(types.RunId("run-123"))) =
     cli.parse(["start", "--run", "run-123"])
 }
 
@@ -76,7 +76,7 @@ pub fn parse_start_rejects_ui_test() {
 }
 
 pub fn parse_start_command_without_brief_test() {
-  let assert Ok(types.Start(types.LatestRun, False)) = cli.parse(["start"])
+  let assert Ok(types.Start(types.LatestRun)) = cli.parse(["start"])
 }
 
 pub fn parse_plan_requires_notes_test() {
@@ -89,13 +89,12 @@ pub fn parse_resolve_defaults_to_latest_test() {
 }
 
 pub fn parse_resume_rejects_ui_test() {
-  let assert Error(message) =
-    cli.parse(["resume", "--run", "run-123", "--ui"])
+  let assert Error(message) = cli.parse(["resume", "--run", "run-123", "--ui"])
   assert message == "Unsupported flag: --ui"
 }
 
 pub fn parse_resume_explain_command_test() {
-  let assert Ok(types.Resume(types.LatestRun, False, True)) =
+  let assert Ok(types.Resume(types.LatestRun, True)) =
     cli.parse(["resume", "--explain"])
 }
 
diff --git a/test/night_shift_persistence_provider_test.gleam b/test/night_shift_persistence_provider_test.gleam
index 8732332..93e569b 100644
--- a/test/night_shift_persistence_provider_test.gleam
+++ b/test/night_shift_persistence_provider_test.gleam
@@ -257,11 +257,15 @@ pub fn dashboard_server_serves_run_data_test() {
   system.sleep(100)
 
   let assert Ok(index_html) = dashboard.http_get(session.url)
-  let assert Ok(runs_payload) = dashboard.http_get(session.url <> "/api/bootstrap")
+  let assert Ok(runs_payload) =
+    dashboard.http_get(session.url <> "/api/bootstrap")
   let assert Ok(run_payload) =
     dashboard.http_get(session.url <> "/api/audit?run_id=" <> run.run_id)
 
   assert string.contains(does: index_html, contain: "Night Shift Dash")
+  assert string.contains(does: index_html, contain: "Task DAG")
+  assert string.contains(does: index_html, contain: "Command Center")
+  assert string.contains(does: index_html, contain: "Plan from reviews")
   assert string.contains(does: runs_payload, contain: run.run_id)
   assert string.contains(
     does: run_payload,