Phase 2 - UI-Final

[Ghenghis]

Phase 2 - UI-Final closeout

Top-line numbers

• Branch: feat/phase-2-ui-final
• Head commit: 9e7e7a8f89a69364dfd820546aaae698c20717cd
• UI files changed from origin/develop: 67
• Tabs implemented: 13
• Panel usages audited: 52
• Playwright specs/tests: 2 specs, 9 tests passing
• Dashboard visual baseline: passing locally at 1920x1080

Final gates

From 03_implementation/ui:

npm ci
npm run lint
npm run build
npx playwright test

Results:

• npm ci: passed
• npm run lint: passed
• npm run build: passed, with Vite large-chunk warning
• npx playwright test: passed, 9/9

Proof bundle

• Path: 05_truth_proof/bundles/9e7e7a8f89a6-20260501T145353Z.zip
• sha256: 5b990c1d3805158b4dab0fd59821fe5c4af0d0763845d3569d106bd07f9d54bb
• Verification: python 05_truth_proof/conformance_runner.py --bundle 05_truth_proof/bundles/9e7e7a8f89a6-20260501T145353Z.zip
• Result: OK - signature + file hashes + cross-refs verified
• Manifest git state: dirty=False
• Required screenshot included: screenshots/dashboard_checkpoint4_1920x1080_v2.png

Constraints honored

• Phase 2 remains mock-only UI.
• No rc1 or tag changes.
• No adapters called.
• No printers, slicers, Blender, BrowserWindow, WebView, or native window behavior.
• Dangerous controls remain locked/disabled.
• Dock/undock/fullscreen are CSS-only/store-only.
• dist/ is not tracked.

What is next

Phase 3 should only begin after explicit approval. It may add read-only adapter plumbing behind the existing mock UI swap points without promoting dangerous actions.

Summary by CodeRabbit

• New Features

  • Introduced a complete React-based dashboard UI for system monitoring and control, including 13 navigable tabs (Fleet, Print Queue, Agents, Workflows, etc.)
  • Added UI components for displaying printers, jobs, notifications, system resources, and proof verification
  • Implemented panel dock/undock/fullscreen state management with collapsible sections

• Tests

  • Added visual regression testing via Playwright for dashboard consistency checks

• Documentation

  • Added Phase 2 completion and planning guides with acceptance criteria and constraints

• Chores

  • Established new GitHub Actions CI workflow for automated UI linting, building, and Playwright test execution

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a complete Phase 2 React/TypeScript UI dashboard implementation with 13-tab routing, mock-only data layer, Zustand state management, Tailwind styling, and Playwright visual tests. Includes CI workflow for test gating and release bundle integration.

Changes

Cohort / File(s)	Summary
CI and Workflow Automation .github/workflows/ui-ci.yml	New GitHub Actions workflow for Phase 2 React UI gating; installs dependencies, runs linting/build, and executes Playwright tests with dashboard artifact uploads.
Project Documentation 00_overview/PHASE2_PLAN.md, 00_overview/PHASE2_COMPLETION_REPORT.md, 03_implementation/ui/README.md	Plan document detailing Phase 2 architecture/tasks, completion report with GREEN verdict and per-task status, and UI project operational guidance.
Project Configuration 03_implementation/ui/package.json, 03_implementation/ui/tsconfig.json, 03_implementation/ui/tsconfig.node.json, 03_implementation/ui/vite.config.ts, 03_implementation/ui/tailwind.config.ts, 03_implementation/ui/playwright.config.ts, 03_implementation/ui/postcss.config.js, 03_implementation/ui/.gitignore, 03_implementation/ui/.npmrc	ESM TypeScript project configuration with Vite, Tailwind, Playwright, and strict compiler settings; deterministic single-worker visual testing with 0.03 pixel diff tolerance.
Entry Point and HTML 03_implementation/ui/index.html, 03_implementation/ui/src/main.tsx	HTML entrypoint mounting React app to #root with Tailwind base styles; main.tsx bootstraps React.StrictMode rendering.
Core Application Structure 03_implementation/ui/src/App.tsx, 03_implementation/ui/src/app/AppShell.tsx, 03_implementation/ui/src/app/routes.tsx, 03_implementation/ui/src/app/store.ts	App router mapping active tab to component, AppShell layout wrapper with Sidebar/TopBar, tab definitions (13 tabs), and Zustand store managing activeTabId and per-panel dock/collapse state.
Type Definitions 03_implementation/ui/src/types/{agent,dimensional,edition,job,log,notification,printer,proof,system,workflow}.ts	TypeScript interfaces and unions for domain entities: agents, printers, workflows, jobs, proof bundles, system snapshot, notifications, logs, dimensional reports, editions.
Styling and Tokens 03_implementation/ui/src/styles/{globals.css,tokens.ts}	Global CSS with Tailwind layers and font features; immutable design token constants (radius, spacing, icons, chart colors).
UI Components: Badges and Status 03_implementation/ui/src/components/badges/{EditionBadge,LockedAction,ProofChip,StatusBadge}.tsx	Reusable badge components for edition/status/proof display and locked-action indicators.
UI Components: Cards and Charts 03_implementation/ui/src/components/cards/KpiCard.tsx, 03_implementation/ui/src/components/charts/{ResourceGauge,Sparkline}.tsx	KPI card display, radial gauge visualization, and sparkline chart components.
UI Components: Layout and Navigation 03_implementation/ui/src/components/layout/{Panel,Sidebar,TopBar}.tsx, 03_implementation/ui/src/components/dock/DockModeToggle.tsx	Reusable Panel wrapper with dock/collapse state, left Sidebar with tab navigation, top navigation bar with status pills and user controls, and 3-mode dock toggle (docked/undocked/fullscreen).
UI Components: Data Display 03_implementation/ui/src/components/tables/DataTable.tsx, 03_implementation/ui/src/components/pipeline/WorkflowPipeline.tsx	Generic DataTable with column definitions and alignment, and WorkflowPipeline stage visualization with status-dependent styling.
Mock Data Layer 03_implementation/ui/src/data/mock/{agents,dimensional,jobs,logs,notifications,printers,proof,system,workflows}.ts	Complete mock datasets (10 agents, 12-printer fleet, 3 workflows, 15 jobs, 5 notifications, logs, system snapshot, proof bundles).
Adapter API Layer 03_implementation/ui/src/api/adapters.ts	AdapterAPI interface defining promise-based read methods; singleton adapters object returns mock data synchronously.
Dashboard Tab 03_implementation/ui/src/tabs/Dashboard.tsx	Dense 12-column dashboard (923 lines) with KPI cards, printer fleet table, workflow pipeline, agents, resources, jobs, logs, notifications, and dimensional truth panels.
Feature Tabs 03_implementation/ui/src/tabs/{Agents,BlenderMCP,DockedApps,Fleet,Gen3D,PrintQueue,PrinterControl,Proof,Settings,Slicing,SystemLogs,Workflows}.tsx	12 additional tab implementations: agent roster, Blender MCP control, docked app placeholders, printer fleet management, 3D generation, print queue, printer jog/temperature control, proof reports, settings, slicing profiles, system logs, workflow templates.
Playwright Tests 03_implementation/ui/tests/visual/{dashboard.visual.spec.ts,dock.spec.ts}	Dashboard visual regression test (1920×1080 baseline) and comprehensive dock state machine test covering mode transitions, collapse/expand, fullscreen sizing, and forbidden external/window patterns.
Release Bundle 06_release/phase2-bundle/{9e7e7a8f89a6-20260501T145353Z.manifest.json,9e7e7a8f89a6-20260501T145353Z.sha256}, scripts/_build_bundle.py	New bundle manifest and SHA-256 checksum for signed release artifact; updated build script to stage release screenshots before evidence ledger generation.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• A-phase kit hardening: rubric + agent execution + proof gates #1 — Modifies scripts/_build_bundle.py for evidence collection and release artifact generation, overlapping release bundling changes.

Poem

🐰 A dashboard blooms with tabs so bright,
Mock data dances left and right,
Tailwind threads and TypeScript thread,
Thirteen screens of UI spread!
State machines and panels dock,
Phase Two's heart now ticks the clock! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 30.43% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Phase 2 - UI-Final' directly and clearly summarizes the main change: the completion of Phase 2 with a fully functional, mock-only React UI implementation. It is concise, specific, and aligned with the PR's core objective.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/phase-2-ui-final

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request implements Phase 2 of the UI, delivering a React and Tailwind-based shell with 13 tabs, a Zustand-managed dock state machine, and Playwright visual tests, all operating on a mock data layer. Feedback identifies documentation errors in the completion report, such as duplicate entries and inconsistent paths, and notes a layout padding discrepancy. Technical recommendations include simplifying status indicator logic, avoiding the use of !important in CSS, refining mock data generation for simulated printers, correcting an invalid .npmrc configuration, and ensuring standard file formatting.

[gemini-code-assist]

In the commit list, the commit cf0c883 is listed twice. This appears to be a copy-paste error. Please correct the list for accuracy.

[gemini-code-assist]

The bundle paths mentioned in this report (e.g., 06_release/phase2-bundle/...) are inconsistent with the paths in the pull request description (05_truth_proof/bundles/...). While the file additions in this PR suggest 06_release/phase2-bundle/... is correct, it would be good to ensure all documentation is consistent to avoid confusion.

[gemini-code-assist]

The reference to 00_overview/PHASE2_PLAN.md is duplicated in the References section.

[gemini-code-assist]

The configuration include=dev is not a standard npm configuration option and will likely be ignored. If the goal is to always include devDependencies, even when NODE_ENV=production, you might consider using omit=production. However, since CI uses npm ci, which installs all dependencies from the lockfile, this .npmrc file might be unnecessary.

[gemini-code-assist]

The padding for the main element is p-4, but the implementation plan in 00_overview/PHASE2_PLAN.md specified p-6. Please ensure this matches the intended design.

[gemini-code-assist]

Using Tailwind's !important modifier (!) can make CSS difficult to debug and override. While the comment explains its purpose, consider if there's an alternative way to structure the components or styles to avoid it. For example, the parent component could conditionally apply size constraints based on the panel's dock state.

[gemini-code-assist]

The use of hardcoded arrays indexed by i to generate mock data for simulated printers is a bit fragile. If the number of simulated printers changes, these arrays will need to be updated manually, and a mismatch could lead to runtime errors (undefined values). Consider making this data generation more robust, for example by using modulo arithmetic for cyclic properties or ensuring the arrays are always the correct length.

[gemini-code-assist]

The logic to determine the background color class for the status indicator is verbose and repetitive. This can be simplified by using an object to map the status tone to its corresponding CSS class, which would improve readability and maintainability.

                  <span
                    className={`h-1.5 w-1.5 rounded-full shrink-0 ${
                      {
                        green: "bg-accent-green",
                        cyan: "bg-accent-cyan",
                        amber: "bg-accent-amber",
                        red: "bg-accent-red",
                        muted: "bg-muted",
                      }[PRINTER_TONE[p.status]]
                    }`}
                    aria-hidden
                  />

[gemini-code-assist]

This file is missing a final newline character. While this may not affect its functionality, it's a common convention to end files with a newline. Many editors and tools can be configured to add this automatically.

[coderabbitai]

Actionable comments posted: 12

🧹 Nitpick comments (7)

03_implementation/ui/src/tabs/Gen3D.tsx (1)

70-90: ⚡ Quick win

Use an explicit active-provider flag instead of i === 0.

The current index-based marker is brittle: reordering providers or adding a new default entry will silently change the highlighted provider. A named active provider makes the mock state self-documenting.

♻️ Proposed fix

 const PROVIDERS = [
   { id: "minimax_vision", name: "MiniMax Vision", status: "ready", note: "vision-conditioned 3D" },
   { id: "trellis", name: "TRELLIS", status: "ready", note: "Microsoft Research" },
   { id: "hunyuan3d", name: "Hunyuan3D", status: "ready", note: "Tencent" },
   { id: "tripo_sr", name: "TripoSR", status: "ready", note: "single-image-to-3D" },
   { id: "custom", name: "Custom Provider", status: "idle", note: "configure under Settings" },
 ];
+const ACTIVE_PROVIDER_ID = "minimax_vision";
@@
-            {PROVIDERS.map((p, i) => (
+            {PROVIDERS.map((p) => {
+              const isActive = p.id === ACTIVE_PROVIDER_ID;
+              return (
               <li
                 key={p.id}
                 className={[
                   "flex items-center gap-2 px-2 py-1.5 rounded border",
-                  i === 0 ? "bg-surface2 border-accent-cyan/40" : "bg-surface2/30 border-border",
+                  isActive ? "bg-surface2 border-accent-cyan/40" : "bg-surface2/30 border-border",
                 ].join(" ")}
               >
@@
-                {i === 0 && <span className="text-accent-cyan text-[10px] uppercase shrink-0">active</span>}
+                {isActive && <span className="text-accent-cyan text-[10px] uppercase shrink-0">active</span>}
               </li>
-            ))}
+              );
+            })}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/Gen3D.tsx` around lines 70 - 90, The list
highlighting currently uses the brittle index check (i === 0); update rendering
to use an explicit active-provider flag instead: modify the mock PROVIDERS data
to include an "active" boolean (or provide an activeProviderId variable) and
replace occurrences of i === 0 with either p.active or p.id === activeProviderId
in Gen3D.tsx (affecting the className conditional for the li and the conditional
that renders the "active" badge) so the highlighted provider is driven by an
explicit identifier rather than array order.

03_implementation/ui/src/data/mock/proof.ts (1)

63-63: ⚡ Quick win

Derive the latest bundle instead of relying on array order.

MOCK_PROOF_BUNDLES[0] works only as long as the list stays manually sorted newest-first. If someone prepends another fixture later, the UI’s “LATEST” card will point at the wrong bundle.

♻️ Suggested fix

-export const LATEST_BUNDLE = MOCK_PROOF_BUNDLES[0];
+export const LATEST_BUNDLE = [...MOCK_PROOF_BUNDLES].sort(
+  (a, b) => b.ts_utc.localeCompare(a.ts_utc),
+)[0];

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/data/mock/proof.ts` at line 63, Replace the
hardcoded LATEST_BUNDLE assignment that uses MOCK_PROOF_BUNDLES[0] with logic
that derives the newest bundle from MOCK_PROOF_BUNDLES (e.g., use Array.reduce
or Array.sort to pick the bundle with the greatest timestamp/createdAt/updatedAt
property) so the latest card always reflects the most recent fixture; update the
LATEST_BUNDLE export to compute and return that bundle.

03_implementation/ui/src/tabs/Agents.tsx (2)

49-57: ⚡ Quick win

Expose selected state to assistive tech on roster buttons.

These buttons act as single-select options; adding pressed/selected semantics improves accessibility without changing behavior.

Proposed fix

                 <button
                   type="button"
                   onClick={() => setSelectedId(a.id)}
+                  aria-pressed={a.id === selectedId}
                   className={[

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/Agents.tsx` around lines 49 - 57, The roster
buttons currently setSelectedId on click but lack accessibility semantics;
update the button element (the one using onClick={() => setSelectedId(a.id)} and
comparing a.id === selectedId) to expose selection state to assistive tech by
adding an ARIA attribute such as aria-pressed={a.id === selectedId} (or
aria-selected if you also set role="option" on the button) so the active item
conveys pressed/selected state to screen readers while preserving existing
behavior and styling.

---

30-31: ⚡ Quick win

Guard selected-agent initialization against empty data.

This currently assumes at least one agent and can crash render if the list is empty.

Proposed fix

-  const [selectedId, setSelectedId] = useState<string>(MOCK_AGENTS[0].id);
-  const selected = MOCK_AGENTS.find((a) => a.id === selectedId) ?? MOCK_AGENTS[0];
+  const [selectedId, setSelectedId] = useState<string | null>(MOCK_AGENTS[0]?.id ?? null);
+  const selected = MOCK_AGENTS.find((a) => a.id === selectedId) ?? null;
+  if (!selected) {
+    return <div className="text-muted text-sm">No agents available.</div>;
+  }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/Agents.tsx` around lines 30 - 31, The code
assumes MOCK_AGENTS has at least one item; initialize selectedId and compute
selected defensively: set selectedId using the first agent's id only if
MOCK_AGENTS.length > 0 (otherwise use an empty string or undefined) and compute
selected via MOCK_AGENTS.find(...) ?? undefined (or a safe fallback object), so
that components using selected won't crash when MOCK_AGENTS is empty; update the
useState call (selectedId, setSelectedId) and the selected variable assignment
to include these guards and ensure downstream code handles a potentially
undefined selected.

03_implementation/ui/src/api/adapters.ts (1)

49-58: ⚡ Quick win

Return cloned mock payloads to avoid shared mutable state leaks.

Returning raw mock references makes accidental mutation globally visible across tabs/tests.

Proposed fix

 export const adapters: AdapterAPI = {
-  getPrinters: async () => MOCK_PRINTERS,
+  getPrinters: async () => structuredClone(MOCK_PRINTERS),
-  getAgents: async () => MOCK_AGENTS,
+  getAgents: async () => structuredClone(MOCK_AGENTS),
-  getActiveWorkflows: async () => MOCK_WORKFLOWS,
+  getActiveWorkflows: async () => structuredClone(MOCK_WORKFLOWS.filter((w) => w.status === "active")),
-  getRecentJobs: async () => MOCK_JOBS,
+  getRecentJobs: async () => structuredClone(MOCK_JOBS),
-  getProofBundles: async () => MOCK_PROOF_BUNDLES,
+  getProofBundles: async () => structuredClone(MOCK_PROOF_BUNDLES),
-  getLatestProofBundle: async () => LATEST_BUNDLE,
+  getLatestProofBundle: async () => structuredClone(LATEST_BUNDLE),
-  getSystemSnapshot: async () => MOCK_SYSTEM_SNAPSHOT,
+  getSystemSnapshot: async () => structuredClone(MOCK_SYSTEM_SNAPSHOT),
-  getDimensionalReports: async () => MOCK_DIMENSIONAL_REPORTS,
+  getDimensionalReports: async () => structuredClone(MOCK_DIMENSIONAL_REPORTS),
-  getLogs: async () => MOCK_LOGS,
+  getLogs: async () => structuredClone(MOCK_LOGS),
-  getNotifications: async () => MOCK_NOTIFICATIONS,
+  getNotifications: async () => structuredClone(MOCK_NOTIFICATIONS),
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/api/adapters.ts` around lines 49 - 58, The mock
adapter currently returns direct references to shared mock constants (e.g.,
getPrinters, getAgents, getActiveWorkflows, getRecentJobs, getProofBundles,
getLatestProofBundle, getSystemSnapshot, getDimensionalReports, getLogs,
getNotifications), which allows callers to mutate global state; change each
async getter to return a deep clone of the corresponding mock payload instead of
the raw reference (use structuredClone if available or a safe deep-clone utility
like lodash.cloneDeep / JSON parse/stringify as appropriate) so consumers get an
isolated copy and mutations won’t leak across tabs/tests.

03_implementation/ui/src/tabs/Dashboard.tsx (1)

120-121: ⚡ Quick win

Add empty-data guards for adapter-swap resilience.

These reads assume non-empty arrays and can hard-fail render when data is absent (activeWorkflow, network_kbps[-1], MOCK_DIMENSIONAL_REPORTS[0]). A tiny fallback keeps the dashboard stable during Phase 3 data wiring.

Proposed defensive pattern

- const activeWorkflow = MOCK_WORKFLOWS.find((w) => w.status === "active") ?? MOCK_WORKFLOWS[0];
+ const activeWorkflow = MOCK_WORKFLOWS.find((w) => w.status === "active") ?? null;
...
- <span className="text-muted text-xs truncate max-w-[180px]">{activeWorkflow.name}</span>
+ <span className="text-muted text-xs truncate max-w-[180px]">{activeWorkflow?.name ?? "No active workflow"}</span>

- {sys.network_kbps[sys.network_kbps.length - 1]} kbps
+ {(sys.network_kbps.at(-1) ?? 0)} kbps
...
- <Sparkline data={sys.network_kbps} color={tokens.chartColors.cyan} />
+ <Sparkline data={sys.network_kbps.length ? sys.network_kbps : [0]} color={tokens.chartColors.cyan} />

function DimensionalStrip() {
-  const r = MOCK_DIMENSIONAL_REPORTS[0];
+  const r = MOCK_DIMENSIONAL_REPORTS[0];
+  if (!r) {
+    return <div className="text-muted text-xs">No dimensional reports.</div>;
+  }

Also applies to: 611-615, 835-843

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/Dashboard.tsx` around lines 120 - 121, The code
assumes arrays are non-empty and will crash if data is missing; update usages
like the activeWorkflow assignment (current: const activeWorkflow =
MOCK_WORKFLOWS.find((w) => w.status === "active") ?? MOCK_WORKFLOWS[0]), any
access of network_kbps[-1] or index accesses to MOCK_DIMENSIONAL_REPORTS[0], and
the sections around the other spots (lines referenced 611-615 and 835-843) to
defensively check for empty or undefined arrays before indexing or calling
.find; replace direct index reads with safe fallbacks (e.g., default object or
null-conditional logic) and guard render paths to handle undefined values so the
Dashboard component can render a sensible empty state instead of throwing.

03_implementation/ui/src/tabs/Workflows.tsx (1)

28-30: ⚡ Quick win

Guard selected-workflow initialization for empty datasets.

Current initialization will throw if workflows are empty. A null-safe selection path avoids a hard crash and enables an explicit empty state.

Proposed fix

-  const [selectedId, setSelectedId] = useState(MOCK_WORKFLOWS[0].id);
-  const selected = MOCK_WORKFLOWS.find((w) => w.id === selectedId) ?? MOCK_WORKFLOWS[0];
+  const [selectedId, setSelectedId] = useState<string | null>(MOCK_WORKFLOWS[0]?.id ?? null);
+  const selected = MOCK_WORKFLOWS.find((w) => w.id === selectedId) ?? null;
+  if (!selected) {
+    return <div className="text-muted text-sm">No workflows available.</div>;
+  }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/Workflows.tsx` around lines 28 - 30, The code
assumes MOCK_WORKFLOWS is non-empty and will throw when it's empty; change the
selectedId state initialization to a null-safe value (e.g., use
MOCK_WORKFLOWS[0]?.id ?? null) and update its type to allow null/undefined, then
compute selected with a null-safe lookup (e.g., MOCK_WORKFLOWS.find(w => w.id
=== selectedId) ?? undefined) and ensure UI checks for a missing selected
workflow and renders an explicit empty state; update any usages of
selectedId/setSelectedId and components expecting selected to handle the
nullable case.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@00_overview/PHASE2_PLAN.md`:
- Line 802: The plan's DockMode enum is out of sync: it lists
("docked"|"undocked"|"external") but the code/tests use "fullscreen"; update the
plan or the code so they match. Modify the documented enum in PHASE2_PLAN.md to
("docked"|"undocked"|"fullscreen") to reflect the implemented value used across
DockMode in store.ts, Panel, DockModeToggle and the Playwright dock-undock spec,
or alternatively rename the implementation/value from "fullscreen" to "external"
everywhere (store.ts, Panel component, DockModeToggle, and the spec) if you
prefer the plan; keep the same single identifier across DockMode, Panel,
DockModeToggle and the Playwright test to restore consistency.
- Around line 51-54: Several fenced code blocks in PHASE2_PLAN.md are unlabeled
(e.g., the single-line process flow and the file-tree / .gitignore examples);
add a language label to each opening fence (use "text" for plain text blocks or
an appropriate language for snippets) so MarkdownLint MD040 is satisfied. Locate
the unlabeled fences around the process flow, the file-tree examples, and the
.gitignore example and change ``` to ```text (or ```gitignore for .gitignore
content) consistently across those blocks.

In `@03_implementation/ui/src/api/adapters.ts`:
- Around line 34-35: The getActiveWorkflows() implementation returns all
workflows but should only return active ones; update the implementation of
getActiveWorkflows() in adapters.ts to filter the returned workflows by their
active indicator (e.g., status === 'active' or isActive === true) before
resolving the Promise, and ensure any related helper function used there (same
file) applies the same filter; likewise review the similar method referenced at
the other occurrence and apply the same active-only filtering.

In `@03_implementation/ui/src/App.tsx`:
- Around line 39-43: The code currently masks invalid activeTabId by falling
back to TABS[0]; change the logic so an unknown tab id does not default to
Dashboard: stop using "?? TABS[0]" when resolving tab (look at activeTabId and
TABS.find), let tab be undefined if not found, and then derive Component from
TAB_COMPONENTS[tab?.id] ?? FallbackPlaceholder (or directly via
TAB_COMPONENTS[activeTabId] ?? FallbackPlaceholder) so that invalid ids render
FallbackPlaceholder instead of Dashboard; update the Component resolution to
reference TAB_COMPONENTS and FallbackPlaceholder accordingly.

In `@03_implementation/ui/src/components/charts/ResourceGauge.tsx`:
- Around line 13-21: ResourceGauge accepts a numeric value claimed to be 0–100
but still uses the raw value in pickTone(value), chart data, and the visible
percentage; clamp the incoming value to the [0,100] range first (e.g., const
clampedValue = Math.max(0, Math.min(100, value)) or a small clamp util) and then
use clampedValue everywhere: pass clampedValue into pickTone, build the chart
dataset from clampedValue, and render the displayed percentage from clampedValue
so out-of-range inputs cannot produce invalid gauge states.

In `@03_implementation/ui/src/components/tables/DataTable.tsx`:
- Around line 42-55: In DataTable.tsx where the header <th> elements are
rendered inside the columns.map in the DataTable component, add scope="col" to
each <th> so assistive tech can identify them as column headers; update the JSX
for the mapped <th> (the element using key={c.id} and className built from ALIGN
and c.width) to include the scope="col" attribute.

In `@03_implementation/ui/src/tabs/BlenderMCP.tsx`:
- Around line 54-79: The trailing action div currently sits inside the providers
<ul>, making invalid HTML; move the action controls out of the list by either
wrapping them in their own <li> or placing them in a sibling container after the
</ul>. Update the JSX around PROVIDERS.map rendering in BlenderMCP.tsx so the
LockedAction components (labels "Connect" and "Rollback") are no longer direct
children of the <ul> — for example, close the </ul> after the mapped <li>s and
render a separate div (or an extra <li> if you prefer all controls inside the
list) containing the LockedAction buttons; ensure StatusBadge and PROVIDERS
mapping remain unchanged.

In `@03_implementation/ui/src/tabs/PrintQueue.tsx`:
- Around line 24-30: The initial selection logic in PrintQueueTab uses
MOCK_JOBS[0].id which will throw if MOCK_JOBS is empty; update the
selectedId/state and selected resolution to safely handle empty fixtures by
using optional chaining and a safe fallback (e.g., allActive[0]?.id ??
MOCK_JOBS[0]?.id ?? undefined) and make sure selected is computed with the same
guarded lookup (e.g., find by selectedId and fallback to undefined or null),
then ensure the UI handles a missing selected job gracefully; update the
references in PrintQueueTab (selectedId, setSelectedId, selected, allActive)
accordingly.

In `@03_implementation/ui/src/tabs/Proof.tsx`:
- Around line 28-30: ProofTab currently assumes MOCK_PROOF_BUNDLES has at least
one element when initializing selectedId and computing selected; if the fixture
is empty the component will throw on mount. Change the initialization so
selectedId is safely derived (e.g., use MOCK_PROOF_BUNDLES[0]?.id or undefined)
and ensure selected falls back to undefined or an empty object when no bundle
exists; update any downstream usage of selected/selectedId in ProofTab to handle
a null/undefined selected (render an empty state or disabled controls) so the
component no longer crashes when MOCK_PROOF_BUNDLES is empty.

In `@03_implementation/ui/src/tabs/Slicing.tsx`:
- Around line 60-78: The footer control <div> inside the <ul> (rendering QUEUE
items) makes the DOM invalid; move those controls out of the unordered list or
wrap them in an <li> so the list only contains <li> children. Locate the block
that maps QUEUE (the <ul> rendering FileBox, StatusBadge, and the file name/size
span) and either replace the trailing <div className="mt-1..."> with an <li>
containing the LockedAction buttons, or close the </ul> before that footer and
render the footer <div> after the list; apply the same change for the other two
panels (the similar blocks around lines ~89-114 and ~125-143) to keep markup
semantic and accessible.

In `@03_implementation/ui/src/tabs/SystemLogs.tsx`:
- Around line 27-109: The source chips are static and not applied to the
filtered list; add state to track selected sources (e.g., selectedSources:
Set<string> with setter setSelectedSources), update each source chip render (the
sources map and its span) to toggle that source in selectedSources and visually
reflect selection, and include the source constraint in the filtered computation
(modify filtered to also require selectedSources.size === 0 ||
selectedSources.has(l.source)); keep existing levelFilter and search logic
intact and reference symbols: sources, filtered, levelFilter, setLevelFilter.

In `@03_implementation/ui/tests/visual/dock.spec.ts`:
- Around line 191-198: The request filtering in the requests.filter predicate
(creating external) is too narrow — it only allows "http://localhost" and
"ws://localhost" and misses variants like https, wss, IP loopbacks (127.0.0.1,
::1) or other hostnames that resolve locally; replace the string-prefix checks
with a URL-parse based check: for each request in requests, try new URL(req) and
treat it as local if url.protocol is "http:"/"https:" or "ws:"/"wss:" and
url.hostname is "localhost" or "127.0.0.1" or "::1" (or otherwise consider local
hosts you need), and always treat protocols starting with "data:", "blob:", or
"about:" as local/ignored; keep the rest as external so external =
requests.filter(u => { try parse and return !isLocal; catch return true }).

---

Nitpick comments:
In `@03_implementation/ui/src/api/adapters.ts`:
- Around line 49-58: The mock adapter currently returns direct references to
shared mock constants (e.g., getPrinters, getAgents, getActiveWorkflows,
getRecentJobs, getProofBundles, getLatestProofBundle, getSystemSnapshot,
getDimensionalReports, getLogs, getNotifications), which allows callers to
mutate global state; change each async getter to return a deep clone of the
corresponding mock payload instead of the raw reference (use structuredClone if
available or a safe deep-clone utility like lodash.cloneDeep / JSON
parse/stringify as appropriate) so consumers get an isolated copy and mutations
won’t leak across tabs/tests.

In `@03_implementation/ui/src/data/mock/proof.ts`:
- Line 63: Replace the hardcoded LATEST_BUNDLE assignment that uses
MOCK_PROOF_BUNDLES[0] with logic that derives the newest bundle from
MOCK_PROOF_BUNDLES (e.g., use Array.reduce or Array.sort to pick the bundle with
the greatest timestamp/createdAt/updatedAt property) so the latest card always
reflects the most recent fixture; update the LATEST_BUNDLE export to compute and
return that bundle.

In `@03_implementation/ui/src/tabs/Agents.tsx`:
- Around line 49-57: The roster buttons currently setSelectedId on click but
lack accessibility semantics; update the button element (the one using
onClick={() => setSelectedId(a.id)} and comparing a.id === selectedId) to expose
selection state to assistive tech by adding an ARIA attribute such as
aria-pressed={a.id === selectedId} (or aria-selected if you also set
role="option" on the button) so the active item conveys pressed/selected state
to screen readers while preserving existing behavior and styling.
- Around line 30-31: The code assumes MOCK_AGENTS has at least one item;
initialize selectedId and compute selected defensively: set selectedId using the
first agent's id only if MOCK_AGENTS.length > 0 (otherwise use an empty string
or undefined) and compute selected via MOCK_AGENTS.find(...) ?? undefined (or a
safe fallback object), so that components using selected won't crash when
MOCK_AGENTS is empty; update the useState call (selectedId, setSelectedId) and
the selected variable assignment to include these guards and ensure downstream
code handles a potentially undefined selected.

In `@03_implementation/ui/src/tabs/Dashboard.tsx`:
- Around line 120-121: The code assumes arrays are non-empty and will crash if
data is missing; update usages like the activeWorkflow assignment (current:
const activeWorkflow = MOCK_WORKFLOWS.find((w) => w.status === "active") ??
MOCK_WORKFLOWS[0]), any access of network_kbps[-1] or index accesses to
MOCK_DIMENSIONAL_REPORTS[0], and the sections around the other spots (lines
referenced 611-615 and 835-843) to defensively check for empty or undefined
arrays before indexing or calling .find; replace direct index reads with safe
fallbacks (e.g., default object or null-conditional logic) and guard render
paths to handle undefined values so the Dashboard component can render a
sensible empty state instead of throwing.

In `@03_implementation/ui/src/tabs/Gen3D.tsx`:
- Around line 70-90: The list highlighting currently uses the brittle index
check (i === 0); update rendering to use an explicit active-provider flag
instead: modify the mock PROVIDERS data to include an "active" boolean (or
provide an activeProviderId variable) and replace occurrences of i === 0 with
either p.active or p.id === activeProviderId in Gen3D.tsx (affecting the
className conditional for the li and the conditional that renders the "active"
badge) so the highlighted provider is driven by an explicit identifier rather
than array order.

In `@03_implementation/ui/src/tabs/Workflows.tsx`:
- Around line 28-30: The code assumes MOCK_WORKFLOWS is non-empty and will throw
when it's empty; change the selectedId state initialization to a null-safe value
(e.g., use MOCK_WORKFLOWS[0]?.id ?? null) and update its type to allow
null/undefined, then compute selected with a null-safe lookup (e.g.,
MOCK_WORKFLOWS.find(w => w.id === selectedId) ?? undefined) and ensure UI checks
for a missing selected workflow and renders an explicit empty state; update any
usages of selectedId/setSelectedId and components expecting selected to handle
the nullable case.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 747da9b0-4f29-43c9-8dff-5d3a29c6b9d9

📥 Commits

Reviewing files that changed from the base of the PR and between af491c3 and 6fd4904.

⛔ Files ignored due to path filters (6)

• 03_implementation/ui/package-lock.json is excluded by !**/package-lock.json
• 03_implementation/ui/tests/visual/dashboard.visual.spec.ts-snapshots/dashboard-1920x1080-chromium-1920x1080-win32.png is excluded by !**/*.png
• 06_release/UI_FINAL_VISUAL_CONTRACT.png is excluded by !**/*.png
• 06_release/dashboard_checkpoint4_1920x1080.png is excluded by !**/*.png
• 06_release/dashboard_checkpoint4_1920x1080_v2.png is excluded by !**/*.png
• 06_release/phase2-bundle/9e7e7a8f89a6-20260501T145353Z.zip is excluded by !**/*.zip

📒 Files selected for processing (72)

• .github/workflows/ui-ci.yml
• 00_overview/PHASE2_COMPLETION_REPORT.md
• 00_overview/PHASE2_PLAN.md
• 03_implementation/ui/.gitignore
• 03_implementation/ui/.npmrc
• 03_implementation/ui/README.md
• 03_implementation/ui/index.html
• 03_implementation/ui/package.json
• 03_implementation/ui/playwright.config.ts
• 03_implementation/ui/postcss.config.js
• 03_implementation/ui/src/App.tsx
• 03_implementation/ui/src/api/adapters.ts
• 03_implementation/ui/src/app/AppShell.tsx
• 03_implementation/ui/src/app/routes.tsx
• 03_implementation/ui/src/app/store.ts
• 03_implementation/ui/src/components/badges/EditionBadge.tsx
• 03_implementation/ui/src/components/badges/LockedAction.tsx
• 03_implementation/ui/src/components/badges/ProofChip.tsx
• 03_implementation/ui/src/components/badges/StatusBadge.tsx
• 03_implementation/ui/src/components/cards/KpiCard.tsx
• 03_implementation/ui/src/components/charts/ResourceGauge.tsx
• 03_implementation/ui/src/components/charts/Sparkline.tsx
• 03_implementation/ui/src/components/dock/DockModeToggle.tsx
• 03_implementation/ui/src/components/layout/Panel.tsx
• 03_implementation/ui/src/components/layout/Sidebar.tsx
• 03_implementation/ui/src/components/layout/TopBar.tsx
• 03_implementation/ui/src/components/pipeline/WorkflowPipeline.tsx
• 03_implementation/ui/src/components/tables/DataTable.tsx
• 03_implementation/ui/src/data/mock/agents.ts
• 03_implementation/ui/src/data/mock/dimensional.ts
• 03_implementation/ui/src/data/mock/jobs.ts
• 03_implementation/ui/src/data/mock/logs.ts
• 03_implementation/ui/src/data/mock/notifications.ts
• 03_implementation/ui/src/data/mock/printers.ts
• 03_implementation/ui/src/data/mock/proof.ts
• 03_implementation/ui/src/data/mock/system.ts
• 03_implementation/ui/src/data/mock/workflows.ts
• 03_implementation/ui/src/main.tsx
• 03_implementation/ui/src/styles/globals.css
• 03_implementation/ui/src/styles/tokens.ts
• 03_implementation/ui/src/tabs/Agents.tsx
• 03_implementation/ui/src/tabs/BlenderMCP.tsx
• 03_implementation/ui/src/tabs/Dashboard.tsx
• 03_implementation/ui/src/tabs/DockedApps.tsx
• 03_implementation/ui/src/tabs/Fleet.tsx
• 03_implementation/ui/src/tabs/Gen3D.tsx
• 03_implementation/ui/src/tabs/PrintQueue.tsx
• 03_implementation/ui/src/tabs/PrinterControl.tsx
• 03_implementation/ui/src/tabs/Proof.tsx
• 03_implementation/ui/src/tabs/Settings.tsx
• 03_implementation/ui/src/tabs/Slicing.tsx
• 03_implementation/ui/src/tabs/SystemLogs.tsx
• 03_implementation/ui/src/tabs/Workflows.tsx
• 03_implementation/ui/src/types/agent.ts
• 03_implementation/ui/src/types/dimensional.ts
• 03_implementation/ui/src/types/edition.ts
• 03_implementation/ui/src/types/job.ts
• 03_implementation/ui/src/types/log.ts
• 03_implementation/ui/src/types/notification.ts
• 03_implementation/ui/src/types/printer.ts
• 03_implementation/ui/src/types/proof.ts
• 03_implementation/ui/src/types/system.ts
• 03_implementation/ui/src/types/workflow.ts
• 03_implementation/ui/tailwind.config.ts
• 03_implementation/ui/tests/visual/dashboard.visual.spec.ts
• 03_implementation/ui/tests/visual/dock.spec.ts
• 03_implementation/ui/tsconfig.json
• 03_implementation/ui/tsconfig.node.json
• 03_implementation/ui/vite.config.ts
• 06_release/phase2-bundle/9e7e7a8f89a6-20260501T145353Z.manifest.json
• 06_release/phase2-bundle/9e7e7a8f89a6-20260501T145353Z.sha256
• scripts/_build_bundle.py

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add fence languages to satisfy markdownlint MD040.

Several code fences are unlabeled; this keeps warning noise in CI/docs checks.

Example fix pattern

-```
+```text
 Prompt → Vision → 3D → Dimensional Accuracy → Mesh Repair →
 Printability → Slice → Select Printer → Print → Monitor → Recover → Proof

</details>
Apply similarly to the file-tree and `.gitignore` fences.


Also applies to: 137-222, 383-388

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.22.1)</summary>

[warning] 51-51: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

</details>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

Verify each finding against the current code and only fix it if needed.

In @00_overview/PHASE2_PLAN.md around lines 51 - 54, Several fenced code blocks
in PHASE2_PLAN.md are unlabeled (e.g., the single-line process flow and the
file-tree / .gitignore examples); add a language label to each opening fence
(use "text" for plain text blocks or an appropriate language for snippets) so
MarkdownLint MD040 is satisfied. Locate the unlabeled fences around the process
flow, the file-tree examples, and the .gitignore example and change totext (or ```gitignore for .gitignore content) consistently across those
blocks.

</details>

<!-- fingerprinting:phantom:medusa:grasshopper:8c2735d2-33ef-4c84-80b7-d2984b913f4d -->

<!-- d98c2f50 -->

<!-- This is an auto-generated comment by CodeRabbit -->

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Dock mode enum in plan is inconsistent with current implementation.

This line documents ("docked"|"undocked"|"external"), but the implemented/store-tested mode is fullscreen, not external.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@00_overview/PHASE2_PLAN.md` at line 802, The plan's DockMode enum is out of
sync: it lists ("docked"|"undocked"|"external") but the code/tests use
"fullscreen"; update the plan or the code so they match. Modify the documented
enum in PHASE2_PLAN.md to ("docked"|"undocked"|"fullscreen") to reflect the
implemented value used across DockMode in store.ts, Panel, DockModeToggle and
the Playwright dock-undock spec, or alternatively rename the
implementation/value from "fullscreen" to "external" everywhere (store.ts, Panel
component, DockModeToggle, and the spec) if you prefer the plan; keep the same
single identifier across DockMode, Panel, DockModeToggle and the Playwright test
to restore consistency.

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

getActiveWorkflows() currently violates its own contract.

The method name and interface imply active workflows, but the implementation returns all workflows.

Proposed fix

-  getActiveWorkflows: async () => MOCK_WORKFLOWS,
+  getActiveWorkflows: async () => MOCK_WORKFLOWS.filter((w) => w.status === "active"),

Also applies to: 51-51

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/api/adapters.ts` around lines 34 - 35, The
getActiveWorkflows() implementation returns all workflows but should only return
active ones; update the implementation of getActiveWorkflows() in adapters.ts to
filter the returned workflows by their active indicator (e.g., status ===
'active' or isActive === true) before resolving the Promise, and ensure any
related helper function used there (same file) applies the same filter; likewise
review the similar method referenced at the other occurrence and apply the same
active-only filtering.

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Don't default unknown tab ids to Dashboard.

?? TABS[0] makes every invalid activeTabId render the Dashboard instead of FallbackPlaceholder, so bad state is hidden and the “Tab not found” path is effectively unreachable.

🔧 Proposed fix

 export default function App() {
   const activeTabId = useStore((s) => s.activeTabId);
-  const tab = TABS.find((t) => t.id === activeTabId) ?? TABS[0];
-  const Component = TAB_COMPONENTS[tab.id] ?? FallbackPlaceholder;
+  const tab = TABS.find((t) => t.id === activeTabId);
+  const Component = tab ? TAB_COMPONENTS[tab.id] ?? FallbackPlaceholder : FallbackPlaceholder;
 
   return (
     <AppShell>
       <Component />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/App.tsx` around lines 39 - 43, The code currently
masks invalid activeTabId by falling back to TABS[0]; change the logic so an
unknown tab id does not default to Dashboard: stop using "?? TABS[0]" when
resolving tab (look at activeTabId and TABS.find), let tab be undefined if not
found, and then derive Component from TAB_COMPONENTS[tab?.id] ??
FallbackPlaceholder (or directly via TAB_COMPONENTS[activeTabId] ??
FallbackPlaceholder) so that invalid ids render FallbackPlaceholder instead of
Dashboard; update the Component resolution to reference TAB_COMPONENTS and
FallbackPlaceholder accordingly.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Clamp out-of-range gauge values before rendering.

The component documents a 0–100 contract, but it still feeds the raw value into the tone picker, chart data, and visible percentage. If upstream data ever drifts negative or above 100, the gauge will render an invalid state.

🛠️ Proposed fix

 export function ResourceGauge({
   value,
   label,
 }: {
   /** 0-100. */
   value: number;
   label: string;
 }) {
-  const tone = pickTone(value);
+  const safeValue = Math.min(100, Math.max(0, value));
+  const tone = pickTone(safeValue);
   return (
@@
-            data={[{ value, fill: tone }]}
+            data={[{ value: safeValue, fill: tone }]}
@@
-          {Math.round(value)}%
+          {Math.round(safeValue)}%

Also applies to: 32-46

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/components/charts/ResourceGauge.tsx` around lines 13
- 21, ResourceGauge accepts a numeric value claimed to be 0–100 but still uses
the raw value in pickTone(value), chart data, and the visible percentage; clamp
the incoming value to the [0,100] range first (e.g., const clampedValue =
Math.max(0, Math.min(100, value)) or a small clamp util) and then use
clampedValue everywhere: pass clampedValue into pickTone, build the chart
dataset from clampedValue, and render the displayed percentage from clampedValue
so out-of-range inputs cannot produce invalid gauge states.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Guard the initial selection against an empty job fixture.

MOCK_JOBS[0].id will throw if the mock list is ever empty, which turns this tab into a crash instead of an empty state. A small guard here avoids that failure mode.

♻️ Proposed fix

 export function PrintQueueTab() {
   const queue = MOCK_JOBS.filter((j) => j.status === "queued");
   const printing = MOCK_JOBS.filter((j) => j.status === "printing");
   const allActive = [...printing, ...queue];
-  const [selectedId, setSelectedId] = useState(allActive[0]?.id ?? MOCK_JOBS[0].id);
-  const selected = MOCK_JOBS.find((j) => j.id === selectedId) ?? MOCK_JOBS[0];
+  const fallbackJob = MOCK_JOBS[0];
+  const [selectedId, setSelectedId] = useState(allActive[0]?.id ?? fallbackJob?.id ?? "");
+  const selected = MOCK_JOBS.find((j) => j.id === selectedId) ?? fallbackJob;
+
+  if (!selected) {
+    return <div className="rounded border border-border bg-surface p-4 text-sm text-muted">No jobs available.</div>;
+  }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	export function PrintQueueTab() {
	const queue = MOCK_JOBS.filter((j) => j.status === "queued");
	const printing = MOCK_JOBS.filter((j) => j.status === "printing");
	const allActive = [...printing, ...queue];
	const [selectedId, setSelectedId] = useState(allActive[0]?.id ?? MOCK_JOBS[0].id);
	const selected = MOCK_JOBS.find((j) => j.id === selectedId) ?? MOCK_JOBS[0];
	const printerNameById = new Map(MOCK_PRINTERS.map((p) => [p.id, p.name]));
	export function PrintQueueTab() {
	const queue = MOCK_JOBS.filter((j) => j.status === "queued");
	const printing = MOCK_JOBS.filter((j) => j.status === "printing");
	const allActive = [...printing, ...queue];
	const fallbackJob = MOCK_JOBS[0];
	const [selectedId, setSelectedId] = useState(allActive[0]?.id ?? fallbackJob?.id ?? "");
	const selected = MOCK_JOBS.find((j) => j.id === selectedId) ?? fallbackJob;
	if (!selected) {
	return <div className="rounded border border-border bg-surface p-4 text-sm text-muted">No jobs available.</div>;
	}
	const printerNameById = new Map(MOCK_PRINTERS.map((p) => [p.id, p.name]));

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/PrintQueue.tsx` around lines 24 - 30, The
initial selection logic in PrintQueueTab uses MOCK_JOBS[0].id which will throw
if MOCK_JOBS is empty; update the selectedId/state and selected resolution to
safely handle empty fixtures by using optional chaining and a safe fallback
(e.g., allActive[0]?.id ?? MOCK_JOBS[0]?.id ?? undefined) and make sure selected
is computed with the same guarded lookup (e.g., find by selectedId and fallback
to undefined or null), then ensure the UI handles a missing selected job
gracefully; update the references in PrintQueueTab (selectedId, setSelectedId,
selected, allActive) accordingly.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Guard the initial bundle selection.

Both the initial state and fallback assume MOCK_PROOF_BUNDLES always has at least one entry. If that fixture is ever emptied, the tab will throw on mount before it can render an empty state.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/Proof.tsx` around lines 28 - 30, ProofTab
currently assumes MOCK_PROOF_BUNDLES has at least one element when initializing
selectedId and computing selected; if the fixture is empty the component will
throw on mount. Change the initialization so selectedId is safely derived (e.g.,
use MOCK_PROOF_BUNDLES[0]?.id or undefined) and ensure selected falls back to
undefined or an empty object when no bundle exists; update any downstream usage
of selected/selectedId in ProofTab to handle a null/undefined selected (render
an empty state or disabled controls) so the component no longer crashes when
MOCK_PROOF_BUNDLES is empty.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Move the footer controls out of the <ul>s.

Each list currently contains a bare <div> footer, which makes the DOM invalid in all three panels. Wrapping those controls in a <li> or placing them after the list keeps the markup semantic and avoids browser/a11y quirks.

Suggested fix

-          <ul className="flex flex-col gap-1 h-full overflow-auto text-xs">
+          <ul className="flex flex-col gap-1 h-full overflow-auto text-xs">
             {QUEUE.map((f) => (
               <li key={f.id} ...>
                 ...
               </li>
             ))}
-            <div className="mt-1 flex justify-end gap-1.5">
-              <LockedAction label="Add file" />
-              <LockedAction label="Dry-run slice" />
-            </div>
+            <li className="mt-1 flex justify-end gap-1.5">
+              <LockedAction label="Add file" />
+              <LockedAction label="Dry-run slice" />
+            </li>
           </ul>

Also applies to: 89-114, 125-143

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/Slicing.tsx` around lines 60 - 78, The footer
control <div> inside the <ul> (rendering QUEUE items) makes the DOM invalid;
move those controls out of the unordered list or wrap them in an <li> so the
list only contains <li> children. Locate the block that maps QUEUE (the <ul>
rendering FileBox, StatusBadge, and the file name/size span) and either replace
the trailing <div className="mt-1..."> with an <li> containing the LockedAction
buttons, or close the </ul> before that footer and render the footer <div> after
the list; apply the same change for the other two panels (the similar blocks
around lines ~89-114 and ~125-143) to keep markup semantic and accessible.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Wire the source chips into actual filtering.

The panel advertises level/source/search filtering, but sources is only displayed as static labels. filtered never constrains by a selected source, so the source facet is non-functional.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/src/tabs/SystemLogs.tsx` around lines 27 - 109, The
source chips are static and not applied to the filtered list; add state to track
selected sources (e.g., selectedSources: Set<string> with setter
setSelectedSources), update each source chip render (the sources map and its
span) to toggle that source in selectedSources and visually reflect selection,
and include the source constraint in the filtered computation (modify filtered
to also require selectedSources.size === 0 || selectedSources.has(l.source));
keep existing levelFilter and search logic intact and reference symbols:
sources, filtered, levelFilter, setLevelFilter.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Broaden allowlist for local host/protocol variants in request filtering.

The current filter can false-fail when baseURL/protocol differs (127.0.0.1, https, wss) while still being local test traffic.

Proposed fix

     const external = requests.filter(
       (u) =>
-        !u.startsWith("http://localhost:") &&
-        !u.startsWith("ws://localhost:") &&
+        !u.startsWith("http://localhost:") &&
+        !u.startsWith("https://localhost:") &&
+        !u.startsWith("ws://localhost:") &&
+        !u.startsWith("wss://localhost:") &&
+        !u.startsWith("http://127.0.0.1:") &&
+        !u.startsWith("https://127.0.0.1:") &&
+        !u.startsWith("ws://127.0.0.1:") &&
+        !u.startsWith("wss://127.0.0.1:") &&
         !u.startsWith("data:") &&
         !u.startsWith("blob:") &&
         !u.startsWith("about:"),
     );

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const external = requests.filter(
	(u) =>
	!u.startsWith("http://localhost:") &&
	!u.startsWith("ws://localhost:") &&
	!u.startsWith("data:") &&
	!u.startsWith("blob:") &&
	!u.startsWith("about:"),
	);
	const external = requests.filter(
	(u) =>
	!u.startsWith("http://localhost:") &&
	!u.startsWith("https://localhost:") &&
	!u.startsWith("ws://localhost:") &&
	!u.startsWith("wss://localhost:") &&
	!u.startsWith("http://127.0.0.1:") &&
	!u.startsWith("https://127.0.0.1:") &&
	!u.startsWith("ws://127.0.0.1:") &&
	!u.startsWith("wss://127.0.0.1:") &&
	!u.startsWith("data:") &&
	!u.startsWith("blob:") &&
	!u.startsWith("about:"),
	);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@03_implementation/ui/tests/visual/dock.spec.ts` around lines 191 - 198, The
request filtering in the requests.filter predicate (creating external) is too
narrow — it only allows "http://localhost" and "ws://localhost" and misses
variants like https, wss, IP loopbacks (127.0.0.1, ::1) or other hostnames that
resolve locally; replace the string-prefix checks with a URL-parse based check:
for each request in requests, try new URL(req) and treat it as local if
url.protocol is "http:"/"https:" or "ws:"/"wss:" and url.hostname is "localhost"
or "127.0.0.1" or "::1" (or otherwise consider local hosts you need), and always
treat protocols starting with "data:", "blob:", or "about:" as local/ignored;
keep the rest as external so external = requests.filter(u => { try parse and
return !isLocal; catch return true }).