From 7086b8b0f4f6654509f31b6279327e752119a267 Mon Sep 17 00:00:00 2001
From: yanweidong <david.yan@qq.com>
Date: Sun, 19 Jul 2026 19:32:21 +0800
Subject: [PATCH] fix: style active inspector view

---
 .superpowers/sdd/task-5-report.md | 43 +++++++++++++++++++++++++++++++
 apps/web/src/index.css            |  2 +-
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 .superpowers/sdd/task-5-report.md

diff --git a/.superpowers/sdd/task-5-report.md b/.superpowers/sdd/task-5-report.md
new file mode 100644
index 0000000..d4fc752
--- /dev/null
+++ b/.superpowers/sdd/task-5-report.md
@@ -0,0 +1,43 @@
+# Task 5 Report: shadcn/ui-Inspired Visual System In CSS
+
+## Status
+
+Implemented and committed the Task 5 workbench visual system.
+
+## What Changed
+
+- Replaced `apps/web/src/index.css` with the specified neutral visual tokens, workbench desktop grid, mobile responsive breakpoint, shared component classes, and focus-visible styles.
+- Added the active-channel `aria-pressed` assertion to `ProjectWorkbench.test.ts`.
+
+## Tests
+
+From `apps/web`:
+
+- `npm test -- --run src/features/workbench/ProjectWorkbench.test.ts` passed: 1 test file, 4 tests.
+- `npm test -- --run` passed: 6 test files, 13 tests.
+- `npm run build` passed: Vite production build completed successfully.
+
+## TDD Evidence
+
+The requested active-channel assertion was added before CSS changes and run immediately. It passed because `ProjectChannelSidebar` already exposed `aria-pressed` for the selected channel; this task preserves that existing semantic contract while styling the component.
+
+## Files Changed
+
+- `apps/web/src/index.css`
+- `apps/web/src/features/workbench/ProjectWorkbench.test.ts`
+
+## Self-Review
+
+- CSS values and selectors follow the Task 5 brief verbatim.
+- The layout uses the required 76px/280px/flexible/320px desktop columns and collapses to one column at 920px.
+- Keyboard focus is visibly indicated for buttons and inputs.
+- No React or shadcn/ui dependencies were added.
+- The commit stages only the two task-owned implementation files; pre-existing untracked `.superpowers/sdd` artifacts remain untouched.
+
+## Concerns
+
+The original selector mismatch between `aria-selected` and the inspector's existing `aria-pressed` semantics was corrected in the review fix below.
+
+## Review Fix
+
+Updated the inspector active-state selector in `apps/web/src/index.css` from `[aria-selected='true']` to `[aria-pressed='true']` so it matches `ObjectInspector`'s existing accessible state without changing component semantics.
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 5a9f932..160edde 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -163,7 +163,7 @@ button:focus-visible, input:focus-visible { outline: 2px solid var(--primary); o
   gap: 4px;
 }
 
-.inspector-tabs button[aria-selected='true'] {
+.inspector-tabs button[aria-pressed='true'] {
   border-color: var(--primary);
   color: var(--primary);
 }