docs: sync stage 1.8 ui progress

README.md

@@ -6,12 +6,15 @@ The product centers on support tickets and business knowledge, with configurable
 
 ## Current Status
 
-Design phase. See:
+Active implementation. The project has a runnable Django + React baseline with ticket workflow, reusable solutions, enterprise governance, shadcn-based frontend foundation, and Docker Compose local startup.
+
+Key docs:
 
 - [Product design spec](docs/superpowers/specs/2026-06-30-ai-ticket-platform-design.md)
 - [Design discussion log](docs/communication/2026-06-30-ai-ticket-platform-discussion-log.md)
 - [Implementation roadmap](docs/superpowers/plans/2026-06-30-ai-ticket-platform-implementation-roadmap.md)
-- [Stage 0 implementation plan](docs/superpowers/plans/2026-06-30-stage-0-foundation-design-system.md)
+- [Local setup](docs/development/local-setup.md)
+- [Frontend design system](docs/frontend/design-system.md)
 
 ## Target Stack
 

docs/frontend/design-system.md

@@ -7,6 +7,7 @@
 - Use semantic status colors for ticket state, priority, audit, AI, and system feedback.
 - User-facing frontend text must be Chinese-first. Internal TypeScript names and API field names may stay English.
 - Business pages must not create one-off table, filter, detail, status, or priority patterns.
+- Admin UI should feel calm and enterprise-grade: clear hierarchy, restrained surfaces, compact actions, and no decorative marketing-style layout.
 
 ## Tokens
 
@@ -18,6 +19,14 @@ Core tokens:
 - `background`, `foreground`, `surface`, `border`
 - `muted`, `muted-foreground`
 - `primary`, `success`, `warning`, `danger`, `info`, `ai`
+- `sidebar`, `sidebar-foreground`, `sidebar-primary`, `sidebar-accent`, `sidebar-border`
+
+Theme behavior:
+
+- `AppThemeProvider` uses `next-themes` with `light`, `dark`, and `system`.
+- `AppThemeToggle` is rendered in `AppTopbar` and exposes Chinese options: `亮色`, `暗色`, `跟随系统`.
+- Light and dark mode values must both be defined in `frontend/src/styles/globals.css`; do not add one-off `dark:` color overrides in business pages.
+- Sidebar colors must come from `sidebar*` tokens so the sidebar follows theme switching.
 
 ## Components
 
@@ -34,6 +43,9 @@ Product App components live in `frontend/src/components/app` and are the preferr
 
 - `AppSidebar`
 - `AppTopbar`
+- `AppThemeProvider`
+- `AppThemeToggle`
+- `AppPage`
 - `AppPageHeader`
 - `AppDataTable`
 - `AppFilterBar`
@@ -49,6 +61,15 @@ Business pages should use:
 - `AppFilterBar` for search and filter controls.
 - `AppDetailLayout` for detail pages with main content and side panels.
 - `AppStatusBadge` and `AppPriorityBadge` for ticket lifecycle and priority presentation.
+- `AppField` for form labels and required state; direct page-level `Label` usage should be avoided.
+- `SelectContent > SelectGroup > SelectItem` for every select menu.
+
+## Current Core Screens
+
+- Ticket center uses an operations-table layout: the first column combines ticket number, title, requester, and description; workflow state and priority are grouped together.
+- Ticket detail uses `AppDetailLayout`, a ticket overview card, a real event timeline, and a side column for metadata, linked solutions, and AI analysis placeholder.
+- Ticket status transitions require a handling note through `TicketTransitionDialog`.
+- System governance quick-create forms use `AppSection`, `FieldGroup`, and `AppField`.
 
 Preview page:
 

docs/superpowers/plans/2026-07-02-stage-1-8-shadcn-admin-ui-standardization.md

@@ -24,6 +24,18 @@
 - Modify: `frontend/src/features/system/SystemUsersPage.tsx`, `SystemRolesPage.tsx`, `SystemUserGroupsPage.tsx` - migrate quick-create forms where practical.
 - Test/verify: `npm run typecheck`, `npm run build`, grep scans, desktop/mobile browser checks.
 
+## Implementation Progress
+
+As of 2026-07-02, the Stage 1.8 foundation has been implemented and extended with core ticket page polish:
+
+- Mobile sidebar navigation is available through a shadcn `Sheet`.
+- shadcn `Field` primitives are installed and `AppField` is the project wrapper.
+- Select menus have been swept to use `SelectContent > SelectGroup > SelectItem`.
+- Login, ticket, solution, and system quick-create forms have been migrated toward `AppField`.
+- `AppPage`, `AppDataTable`, `AppFilterBar`, and system governance page shells have been standardized.
+- Enterprise visual foundation, light/dark/system theme switching, and sidebar theme tokens are in place.
+- Ticket center and ticket detail have been refined as core Stage 1 operational screens.
+
 ---
 
 ### Task 1: Mobile Shell Navigation
@@ -33,7 +45,7 @@
 - Modify: `frontend/src/components/app/AppSidebar.tsx`
 - Modify: `frontend/src/components/app/AppTopbar.tsx`
 
-- [ ] **Step 1: Inspect current shell boundaries**
+- [x] **Step 1: Inspect current shell boundaries**
 
 Run:
 
@@ -45,23 +57,23 @@ Get-Content frontend/src/components/app/AppTopbar.tsx
 
 Expected: `AppShell` renders fixed sidebar and topbar; sidebar is desktop-only.
 
-- [ ] **Step 2: Add mobile menu state in shell**
+- [x] **Step 2: Add mobile menu state in shell**
 
 Implement `mobileNavOpen` state in `AppShell`, pass `onMobileMenuClick` into topbar, and pass `mobileOpen/onMobileOpenChange` into sidebar.
 
-- [ ] **Step 3: Extract sidebar navigation content**
+- [x] **Step 3: Extract sidebar navigation content**
 
 In `AppSidebar`, extract grouped nav rendering into `SidebarNavContent({ onNavigate })`. Use the same component for desktop and mobile sheet.
 
-- [ ] **Step 4: Render mobile Sheet**
+- [x] **Step 4: Render mobile Sheet**
 
 Use existing shadcn `Sheet`, `SheetContent`, `SheetHeader`, and `SheetTitle`. The sheet title must be present for accessibility. Menu item clicks call `onNavigate`.
 
-- [ ] **Step 5: Add topbar mobile trigger**
+- [x] **Step 5: Add topbar mobile trigger**
 
 Add a `Button size="icon" variant="ghost"` visible below `lg`, with `Menu` icon using `data-icon` and `aria-label="打开导航"`.
 
-- [ ] **Step 6: Verify**
+- [x] **Step 6: Verify**
 
 Run:
 
@@ -81,7 +93,7 @@ Expected: exit code 0.
 - May modify: `frontend/src/components/ui/separator.tsx`
 - Modify: `frontend/src/components/app/AppField.tsx`
 
-- [ ] **Step 1: Preview CLI changes**
+- [x] **Step 1: Preview CLI changes**
 
 Run:
 
@@ -91,7 +103,7 @@ $env:NODE_USE_ENV_PROXY = "1"; $env:HTTP_PROXY = "http://127.0.0.1:7897"; $env:H
 
 Expected: creates `field.tsx`, previews updates to `label.tsx` and `separator.tsx`.
 
-- [ ] **Step 2: Inspect diffs before applying**
+- [x] **Step 2: Inspect diffs before applying**
 
 Run:
 
@@ -103,15 +115,15 @@ $env:NODE_USE_ENV_PROXY = "1"; $env:HTTP_PROXY = "http://127.0.0.1:7897"; $env:H
 
 Expected: understand local changes before applying.
 
-- [ ] **Step 3: Add the field component**
+- [x] **Step 3: Add the field component**
 
 Apply the CLI result, then inspect changed files. If `label.tsx` or `separator.tsx` overwrite local customizations, restore needed local behavior manually.
 
-- [ ] **Step 4: Rebuild AppField**
+- [x] **Step 4: Rebuild AppField**
 
 Make `AppField` render shadcn `Field`, `FieldLabel`, and optional `FieldDescription`. Support `htmlFor`, `required`, `invalid`, and `description` props.
 
-- [ ] **Step 5: Verify**
+- [x] **Step 5: Verify**
 
 Run:
 
@@ -133,11 +145,11 @@ Expected: exit code 0.
 - Modify: `frontend/src/features/solutions/SolutionCreatePage.tsx`
 - Modify: `frontend/src/features/design-system/DesignSystemPreview.tsx`
 
-- [ ] **Step 1: Add SelectGroup imports**
+- [x] **Step 1: Add SelectGroup imports**
 
 For each file importing select primitives, add `SelectGroup`.
 
-- [ ] **Step 2: Wrap select items**
+- [x] **Step 2: Wrap select items**
 
 Change:
 
@@ -157,7 +169,7 @@ to:
 </SelectContent>
 ```
 
-- [ ] **Step 3: Scan**
+- [x] **Step 3: Scan**
 
 Run:
 
@@ -167,7 +179,7 @@ rg "SelectContent>[\\s\\S]*SelectItem|<SelectContent>\\s*<SelectItem" frontend/s
 
 Expected: no direct `SelectItem` immediately under `SelectContent`.
 
-- [ ] **Step 4: Verify**
+- [x] **Step 4: Verify**
 
 Run:
 
@@ -189,23 +201,23 @@ Expected: exit code 0.
 - Modify: `frontend/src/features/system/SystemRolesPage.tsx`
 - Modify: `frontend/src/features/system/SystemUserGroupsPage.tsx`
 
-- [ ] **Step 1: Migrate login fields**
+- [x] **Step 1: Migrate login fields**
 
 Use `AppField htmlFor="username"` and `AppField htmlFor="password"`. Inputs receive matching `id` and `aria-invalid={Boolean(error)}` only where field-specific invalid state is needed.
 
-- [ ] **Step 2: Migrate create ticket fields**
+- [x] **Step 2: Migrate create ticket fields**
 
 Use `AppField` for title, priority, impact scope, related system, environment, and description. Required fields use `required`.
 
-- [ ] **Step 3: Migrate create solution fields**
+- [x] **Step 3: Migrate create solution fields**
 
 Use `AppField` for title, status, related system, environment scope, problem signature, root cause, solution, and risk note.
 
-- [ ] **Step 4: Migrate quick-create system forms**
+- [x] **Step 4: Migrate quick-create system forms**
 
 Keep compact horizontal layout, but each input lives inside `AppField` so labels remain visible and shadcn field semantics are consistent.
 
-- [ ] **Step 5: Verify**
+- [x] **Step 5: Verify**
 
 Run:
 
@@ -223,7 +235,7 @@ Expected: both exit code 0.
 **Files:**
 - All modified frontend files
 
-- [ ] **Step 1: Run shadcn context check**
+- [x] **Step 1: Run shadcn context check**
 
 Run:
 
@@ -233,7 +245,7 @@ $env:NODE_USE_ENV_PROXY = "1"; $env:HTTP_PROXY = "http://127.0.0.1:7897"; $env:H
 
 Expected: current project remains `Vite`, `Tailwind v3`, `radix-nova`, `lucide`.
 
-- [ ] **Step 2: Run source scans**
+- [x] **Step 2: Run source scans**
 
 Run:
 
@@ -245,6 +257,8 @@ Expected: no new violations in migrated surfaces. Remaining non-button decorativ
 
 - [ ] **Step 3: Browser checks**
 
+User explicitly disabled visual/browser assistance during the Stage 1.8 UI pass, so browser checks remain pending until visual assistance is re-enabled.
+
 Check desktop and mobile widths for:
 - Login
 - Workbench
@@ -254,7 +268,7 @@ Check desktop and mobile widths for:
 
 Expected: mobile has navigation entry, no horizontal scroll, forms have visible labels.
 
-- [ ] **Step 4: Commit**
+- [x] **Step 4: Commit**
 
 Run:
 
@@ -264,4 +278,3 @@ git commit -m "feat: standardize shadcn admin ui foundation"
 ```
 
 Expected: commit created on current branch.
-