# Story 1.2: Workspace Shell & Ant Design Foundation

Status: review

## Story

As a any authenticated user,
I want a consistent tri-pane application layout with the Ant Design visual system applied,
so that I have a predictable, accessible, and keyboard-navigable operational environment from day one.

## Acceptance Criteria

1. **Given** the app loads after authentication **When** an authenticated user enters the application **Then** the tri-pane layout renders with a left navigation pane, center content area, and collapsible right panel
2. **Given** the Ant Design token configuration is applied **When** the UI renders **Then** colorPrimary is #1F4E79, teal secondary is #0F766E, semantic status colors (success/warning/error/info/overdue) match the UX spec, and compact density profile is active (UX-DR1)
3. **Given** a user interacts with any focusable element **When** tabbing through the interface **Then** visible 2px focus indicators are present on all interactive elements with logical tab order (UX-DR9)
4. **Given** the viewport is 1280–1599px **When** the layout renders **Then** the right panel is collapsible and the tri-pane adapts to compact mode (UX-DR15)
5. **Given** the viewport is below 1280px **When** the layout renders **Then** a reduced read mode with a support notice is displayed and full editing is not available
6. **Given** any status indicator renders **When** viewed **Then** status is conveyed with both color and a text label or icon — never color alone (UX-DR12)

## Tasks / Subtasks

- [x] Implement story behavior in aligned backend/frontend modules (AC: #1)
  - [x] Add or update API/service/UI components required by the story scope
  - [x] Keep legacy Access entities read-only and route writes to extension-layer structures
- [x] Cover acceptance criteria #2 in implementation and tests (AC: #2)
  - [x] Add validation/error handling and UX state updates as needed
- [x] Cover acceptance criteria #3 in implementation and tests (AC: #3)
  - [x] Add validation/error handling and UX state updates as needed
- [x] Cover acceptance criteria #4 in implementation and tests (AC: #4)
  - [x] Add validation/error handling and UX state updates as needed
- [x] Validate and document completion evidence
  - [x] Verify build/tests for touched modules
  - [x] Capture changed files and any migration/config implications

## Dev Notes

- Follow Epic 1 architecture constraints: ASP.NET Core + React separation, RBAC-aware patterns, and immutable legacy tables.
- Reuse shared component and workflow patterns defined in UX and architecture docs; avoid parallel custom implementations.
- Keep changes scoped to this story; do not pull forward Epic 2+ features.

### Project Structure Notes

- Backend: `Campaign_Tracker.Server/`
- Frontend: `campaign-tracker-client/`
- Story artifacts: `_bmad-output/implementation-artifacts/`

### References

- Story source: `_bmad-output/planning-artifacts/epics.md` (Epic 1 / Story 1.2)
- Architecture constraints: `_bmad-output/planning-artifacts/architecture.md`
- UX patterns: `_bmad-output/planning-artifacts/ux-design-specification.md`

## Dev Agent Record

### Agent Model Used

GPT-5 Codex

### Debug Log References

- Story generated from epic source and architecture/UX planning artifacts.
- 2026-05-05: Added failing frontend contract tests for workspace tokens, breakpoints, edit gating, right-panel collapse rules, and non-color-only statuses.
- 2026-05-05: Verified `npm test`, `npm run lint`, `npm run build`, and `dotnet test campaign-tracker.sln`.

### Implementation Plan

- Replace the starter Vite screen with an Ant Design `ConfigProvider` and tri-pane workspace shell.
- Centralize UX tokens, status semantics, and breakpoint rules in a tested workspace contract module.
- Keep backend and legacy data untouched for this shell story; expose only read-only operational sample context in the UI.

### Completion Notes List

- Story context created and marked ready-for-dev.
- Implemented the authenticated operations workspace shell with Ant Design `ConfigProvider`, compact theme tokens, left navigation pane, center operations grid, and right risk/provenance panel.
- Added responsive desktop behavior: compact tri-pane with collapsible right panel from 1280px to 1599px, persistent right panel at 1600px+, and reduced read mode with disabled editing below 1280px.
- Added visible 2px focus indicators and status indicators that pair semantic colors with icons and text labels.
- No backend write path was added; legacy Access data is represented as read-only source context and future updates are labeled for extension records.

### File List

- `_bmad-output/implementation-artifacts/sprint-status.yaml`
- `_bmad-output/implementation-artifacts/1-2-workspace-shell-ant-design-foundation.md`
- `campaign-tracker-client/package.json`
- `campaign-tracker-client/package-lock.json`
- `campaign-tracker-client/src/App.css`
- `campaign-tracker-client/src/App.tsx`
- `campaign-tracker-client/src/index.css`
- `campaign-tracker-client/src/main.tsx`
- `campaign-tracker-client/src/workspace/WorkspaceShell.css`
- `campaign-tracker-client/src/workspace/WorkspaceShell.tsx`
- `campaign-tracker-client/src/workspace/workspaceContracts.test.ts`
- `campaign-tracker-client/src/workspace/workspaceContracts.ts`

### Change Log

- 2026-05-05: Implemented Workspace Shell & Ant Design Foundation and marked story ready for review.