agent-regression-lab 0.3.0 → 0.4.0

package/dist/ui-assets/client.js

@@ -21748,11 +21748,20 @@ function RunListPage() {
     if (provider) url.searchParams.set("provider", provider);
     void fetch(url).then((response) => response.json()).then((data) => setRuns(Array.isArray(data.runs) ? data.runs : []));
   }, [suite, status, provider]);
+  const stats = summarizeRuns(runs);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Runs" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Inspect local alpha runs, filter failures, and compare behavior changes." })
     ] }),
+    runs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats dashboard-stats", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Runs shown", value: stats.total }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Passing", value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pass-text", children: stats.pass }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Failing", value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fail-text", children: stats.fail }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Errors", value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "error-text", children: stats.error }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Latest suite", value: stats.latestSuite }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Latest provider", value: stats.latestProvider })
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "filters", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { value: suite, onChange: (event) => setSuite(event.target.value), placeholder: "Suite" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: status, onChange: (event) => setStatus(event.target.value), children: [
@@ -21879,14 +21888,13 @@ function RunDetailPage(props) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Trace" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "timeline", children: detail.traceEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
-            event.stepIndex,
-            ". ",
-            event.type
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "timeline timeline-detailed", children: detail.traceEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "timeline-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "timeline-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "timeline-step", children: [
+            "Step ",
+            event.stepIndex
           ] }),
-          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "event-chip", children: formatEventLabel(event.type) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "muted", children: event.source })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(event.payload, null, 2) })
@@ -21899,7 +21907,7 @@ function FailureSummaryPanel(props) {
   if (failureItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel failure-panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Failures First" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Status:" }),
@@ -21982,13 +21990,14 @@ function ComparePage(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Compare" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: data.baseline.run.scenarioId })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComparisonHero, { comparison: data }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Classification", value: data.classification }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Score delta", value: signed(data.deltas.score) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Runtime delta", value: `${signed(data.deltas.runtimeMs)}ms` }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Step delta", value: signed(data.deltas.steps) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel emphasis-panel", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Notes" }),
       data.notes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No material differences recorded." }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: data.notes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: note }, note)) })
@@ -21997,15 +22006,24 @@ function ComparePage(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Evaluator diffs" }),
         data.evaluatorDiffs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No evaluator changes." }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: data.evaluatorDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-          diff.note,
-          diff.hardGate ? " (hard gate)" : ""
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack diff-list", children: data.evaluatorDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "diff-card", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-card-head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: diff.evaluatorId }),
+            diff.hardGate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "event-chip", children: "hard gate" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted", children: diff.note })
         ] }, diff.evaluatorId)) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Tool diffs" }),
         data.toolDiffs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No tool usage changes." }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: data.toolDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: diff.note }, diff.toolName)) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack diff-list", children: data.toolDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "diff-card", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-card-head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: diff.toolName }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${mapRiskToPill(diff.risk)}`, children: diff.risk })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted", children: diff.note })
+        ] }, diff.toolName)) })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "compare-grid", children: [
@@ -22015,7 +22033,7 @@ function ComparePage(props) {
   ] });
 }
 function RunSide(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: `panel compare-side ${props.title === "Candidate" ? "candidate-side" : "baseline-side"}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: props.title }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Run:" }),
@@ -22073,10 +22091,10 @@ function RunSide(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Final output:" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: props.detail.run.finalOutput || "(none)" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Trace" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "timeline compact", children: props.detail.traceEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "timeline compact", children: props.detail.traceEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "timeline-item compact-item", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
       event.stepIndex,
       ". ",
-      event.type
+      formatEventLabel(event.type)
     ] }) }, event.eventId)) })
   ] });
 }
@@ -22103,6 +22121,7 @@ function SuiteComparePage(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Suite Compare" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: data.suite })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuiteComparisonHero, { data }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Classification", value: data.classification }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Pass delta", value: signed(data.deltas.pass) }),
@@ -22139,10 +22158,12 @@ function ScenarioList(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: props.title }),
     props.items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "None." }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: item.scenarioId }),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "muted", children: item.comparison.classification }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack diff-list", children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "diff-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-card-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: item.scenarioId }),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "muted", children: item.comparison.classification })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/compare?baseline=${item.comparison.baseline.run.id}&candidate=${item.comparison.candidate.run.id}`, children: "open run compare" }) })
     ] }, item.scenarioId)) })
   ] });
@@ -22159,6 +22180,33 @@ function EmptyState(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.description })
   ] });
 }
+function ComparisonHero(props) {
+  const tone = mapClassificationToTone(props.comparison.classification);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: `panel compare-hero ${tone}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "compare-hero-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: props.comparison.classification }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${tone}`, children: props.comparison.verdictDelta })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "muted", children: [
+      "Output changed: ",
+      props.comparison.outputChanged ? "yes" : "no",
+      props.comparison.terminationDelta ? ` \u2022 termination: ${props.comparison.terminationDelta}` : ""
+    ] })
+  ] });
+}
+function SuiteComparisonHero(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel compare-hero neutral", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "compare-hero-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Suite movement" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "event-chip", children: props.data.classification })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats compact-stats", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Regressions", value: props.data.regressions.length }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Improvements", value: props.data.improvements.length }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Unchanged", value: props.data.unchanged.length })
+    ] })
+  ] });
+}
 function getFailureSummaryItems(detail) {
   const items = [];
   if (detail.errorDetail) {
@@ -22174,6 +22222,40 @@ function getFailureSummaryItems(detail) {
   }
   return items;
 }
+function summarizeRuns(runs) {
+  return {
+    total: runs.length,
+    pass: runs.filter((run) => run.status === "pass").length,
+    fail: runs.filter((run) => run.status === "fail").length,
+    error: runs.filter((run) => run.status === "error").length,
+    latestSuite: runs[0]?.suite ?? "-",
+    latestProvider: runs[0]?.provider ?? "-"
+  };
+}
+function formatEventLabel(type) {
+  return type.replaceAll("_", " ");
+}
+function mapRiskToPill(risk) {
+  if (risk === "high") {
+    return "fail";
+  }
+  if (risk === "medium") {
+    return "error";
+  }
+  return "pass";
+}
+function mapClassificationToTone(classification) {
+  if (classification.includes("regress")) {
+    return "fail";
+  }
+  if (classification.includes("improv")) {
+    return "pass";
+  }
+  if (classification.includes("changed")) {
+    return "error";
+  }
+  return "neutral";
+}
 function signed(value) {
   return value > 0 ? `+${value}` : `${value}`;
 }

package/docs/coding-agents.md

@@ -0,0 +1,74 @@
+# Coding Agents
+
+ARL supports coding-agent regression workflows through deterministic task scenarios.
+
+Use this path when the runner should remain authoritative for:
+
+- file inspection tools
+- patch application tools
+- step limits
+- regression scoring
+
+## Start With The Built-In Coding Scenarios
+
+This repo already includes two coding scenarios:
+
+- `coding.fix-add-function`
+- `coding.update-greeting`
+
+Run one directly:
+
+```bash
+agentlab run coding.fix-add-function --agent mock-default
+```
+
+These scenarios use fixture-backed repo tools, which makes them useful for:
+
+- prompt changes
+- model comparisons
+- patch-discipline checks
+- pre-merge behavioral regression checks
+
+## Why This Matters
+
+Coding agents often regress in subtle ways:
+
+- they inspect too much of the repo
+- they patch the wrong file
+- they over-edit instead of making a narrow change
+- they stop naming the changed file clearly
+
+ARL helps by making those expectations explicit in scenario evaluators.
+
+## Minimal Workflow
+
+1. run one coding scenario locally
+2. inspect the run output and trace
+3. run it again against a changed prompt/model/agent variant
+4. compare the two runs
+
+Example:
+
+```bash
+agentlab run coding.fix-add-function --agent mock-default
+agentlab run coding.fix-add-function --agent mock-default
+agentlab compare <baseline-run-id> <candidate-run-id>
+```
+
+## When To Use Task Scenarios Versus HTTP
+
+Use task scenarios for coding agents when:
+
+- you want deterministic fixture-backed tools
+- you want ARL to own the tool loop
+- you want reproducible patch-evaluator behavior
+
+Use HTTP/conversation scenarios only when the coding agent already exists as a running service and owns its own orchestration internally.
+
+## Next Step
+
+If you want coding-agent checks in team workflows, pair these scenarios with suite definitions and CI:
+
+```bash
+agentlab run --suite-def pre_merge --agent mock-default
+```

package/docs/superpowers/plans/2026-04-13-phase-2-lite-phase-3-plan.md

@@ -0,0 +1,160 @@
+# Phase 2 Lite And Phase 3 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Deliver a minimal integration story for new users, then improve the UI enough that ARL is easier to demo, screenshot, and understand visually.
+
+**Architecture:** Keep Phase 2-lite focused on assets that clarify adoption: README routing, one coding-agent path, and one CI path. Keep Phase 3 focused on UI clarity instead of new product surface area by improving the runs dashboard, comparison screens, and trace presentation inside the existing React UI.
+
+**Tech Stack:** TypeScript, React, node:test, esbuild, Markdown, GitHub Actions YAML
+
+---
+
+## File Map
+
+**Roadmap and product docs**
+- Modify: `.claude/active-tasks.md`
+- Modify: `.claude/project.md`
+- Modify: `README.md`
+
+**Phase 2-lite assets**
+- Create: `docs/coding-agents.md`
+- Create: `.github/workflows/agentlab-pre-merge.yml`
+
+**UI**
+- Modify: `src/ui/App.tsx`
+- Modify: `src/ui/styles.css`
+
+**Tests**
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+---
+
+### Task 1: Reframe Roadmap To Phase 2-lite Then Phase 3
+
+**Files:**
+- Modify: `.claude/active-tasks.md`
+- Modify: `.claude/project.md`
+
+- [ ] Update active task tracking so the current next phase is `Phase 2-lite`, not the original full Phase 2.
+- [ ] Update project memory so Phase 2-lite is the minimal integration-story pass and Phase 3 is the main visual/demo workstream.
+- [ ] Keep the scope explicit:
+  - HTTP example via `arl-test`
+  - CI example
+  - coding-agent example
+  - then UI polish
+
+Verification:
+
+```bash
+rg -n "Phase 2-lite|Phase 3" .claude/active-tasks.md .claude/project.md
+```
+
+---
+
+### Task 2: Add Phase 2-lite Integration Assets
+
+**Files:**
+- Modify: `README.md`
+- Create: `docs/coding-agents.md`
+- Create: `.github/workflows/agentlab-pre-merge.yml`
+
+- [ ] Add README routing sections:
+  - if your agent runs as an HTTP service
+  - if you are validating coding-agent changes
+  - if you want pre-merge regression checks in CI
+- [ ] Add one coding-agent guide using the existing coding scenarios and current tool-loop model.
+- [ ] Add one GitHub Actions example that runs:
+
+```bash
+npm ci
+npm run build
+node dist/index.js run --suite-def pre_merge --agent mock-default
+```
+
+- [ ] Keep this section narrow and copy-pasteable. No broad framework matrix.
+
+Verification:
+
+```bash
+rg -n "HTTP service|coding-agent|pre-merge|GitHub Actions" README.md docs/coding-agents.md .github/workflows/agentlab-pre-merge.yml
+```
+
+---
+
+### Task 3: Improve Runs Dashboard And Comparison UX
+
+**Files:**
+- Modify: `src/ui/App.tsx`
+- Modify: `src/ui/styles.css`
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+- [ ] Add a stronger runs dashboard summary at the top of the list page:
+  - total runs shown
+  - pass/fail/error counts
+  - most recent suite/context hint
+- [ ] Redesign the compare page to make regressions visually obvious:
+  - top classification banner
+  - clearer delta cards
+  - evaluator/tool diff blocks with stronger hierarchy
+  - more obvious baseline vs candidate sections
+- [ ] Make the suite compare page easier to scan:
+  - headline regression/improvement counts
+  - clearer scenario groupings
+
+Verification:
+
+```bash
+npx tsx --test tests/launch/ui-smoke.test.ts
+```
+
+---
+
+### Task 4: Improve Trace And Detail Presentation
+
+**Files:**
+- Modify: `src/ui/App.tsx`
+- Modify: `src/ui/styles.css`
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+- [ ] Replace the plain trace list with a more intentional timeline treatment:
+  - event badges or type labels
+  - stronger step grouping
+  - clearer source metadata
+- [ ] Keep failure-first behavior intact.
+- [ ] Preserve readability on narrow screens.
+
+Verification:
+
+```bash
+npx tsx --test tests/launch/ui-smoke.test.ts
+```
+
+---
+
+### Task 5: Full Verification
+
+**Files:**
+- Modify only if verification exposes issues
+
+- [ ] Run focused UI/docs-related verification:
+
+```bash
+npx tsx --test tests/launch/ui-smoke.test.ts tests/cliPackaging.test.ts
+```
+
+- [ ] Run full suite:
+
+```bash
+npm test
+```
+
+- [ ] Run release gates:
+
+```bash
+npm run check
+npm run build
+npm run smoke:cli
+npm_config_cache=/tmp/agentlab-npm-cache npm pack --dry-run
+```
+