fix: style active inspector view

.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.

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);
 }