feat(knowledge-base): Knowledge Base UI — browse/edit, modal, project links

- Knowledge Bases list page + sidebar entry + "+ New" create modal
- Detail page with a recursive structure tree: add/edit/delete topics,
  categories and facts inline, including name + description editing
- Create/metadata-edit modal (title, description)
- Project edit modal gains a link/remove knowledge base section
- Types and routes for /knowledge-bases and /knowledge-bases/:id
- Scoped .kb-* styles (contained panel, topic cards, hierarchy guides)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.env

@@ -0,0 +1 @@
+VITE_API_BASE=http://backend:8000

Dockerfile

@@ -1,12 +1,38 @@
+# Build stage
 FROM node:20-alpine AS build
 WORKDIR /app
-COPY package.json ./
+
+# Build-time backend URL — Vite inlines this into the bundle. Passed as
+# `--build-arg VITE_HF_BACKEND_BASE_URL=https://hf-api.example.com` in
+# the compose file. Without it the bundle calls relative paths (only
+# works in dev with the Vite proxy).
+ARG VITE_HF_BACKEND_BASE_URL=""
+ENV VITE_HF_BACKEND_BASE_URL=${VITE_HF_BACKEND_BASE_URL}
+
+COPY package.json package-lock.json* ./
 RUN npm install
 COPY . .
 RUN npm run build
 
-FROM nginx:alpine
+# Runtime stage
-COPY --from=build /app/dist /usr/share/nginx/html
+FROM node:20-alpine
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+RUN npm install -g serve@14
+WORKDIR /app
+COPY --from=build /app ./
+ENV FRONTEND_DEV_MODE=0
+# OIDC-only mode flag. Injected into the SPA at container start as
+# /runtime-config.js so the setup wizard knows it before the backend
+# exists; /auth/config remains authoritative once the backend is up.
+ARG HARBORFORGE_OIDC_ONLY=false
+ENV HARBORFORGE_OIDC_ONLY=${HARBORFORGE_OIDC_ONLY}
+# Optional deploy-time branding override: a URL the SPA uses for the
+# logo + favicon. Empty → bundled /logo.svg default.
+ARG HARBORFORGE_LOGO_URL=
+ENV HARBORFORGE_LOGO_URL=${HARBORFORGE_LOGO_URL}
 EXPOSE 3000
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["sh", "-c", "\
+  if [ \"$HARBORFORGE_OIDC_ONLY\" = \"true\" ]; then OO=true; else OO=false; fi; \
+  CFG=\"window.__HF_RUNTIME__={\\\"oidc_only\\\":$OO,\\\"logo_url\\\":\\\"$HARBORFORGE_LOGO_URL\\\"};\"; \
+  mkdir -p public; printf '%s' \"$CFG\" > public/runtime-config.js; \
+  [ -d dist ] && printf '%s' \"$CFG\" > dist/runtime-config.js; \
+  if [ \"$FRONTEND_DEV_MODE\" = \"1\" ]; then npm run dev -- --host 0.0.0.0 --port 3000 --strictPort; else serve -s dist -l 3000; fi"]

README.md

@@ -1,3 +1,181 @@
 # HarborForge.Frontend
 
-HarborForge Frontend - React + TypeScript
+Single-page web client for HarborForge — the agent/human collaborative
+task-management platform. It provides the operator UI for projects,
+milestones, tasks, proposals, calendar/meetings, users, roles and the
+live monitor, and walks operators through first-time provisioning via the
+SSH-tunnel Setup Wizard.
+
+Part of the [HarborForge](../README.md) platform.
+
+## Tech Stack
+
+- **React 18** (`react`, `react-dom`)
+- **TypeScript 5**
+- **Vite 5** dev server / bundler (`@vitejs/plugin-react`)
+- **react-router-dom 6** for client-side routing
+- **axios** for HTTP, with a shared request/response interceptor layer
+- **dayjs** for date handling
+- **Vitest 4** + Testing Library (`@testing-library/react`, `jsdom`) for unit tests
+
+Path alias `@` → `src/` (configured in `vite.config.ts` and `tsconfig.json`).
+
+## Pages
+
+Routes are declared in `src/App.tsx`. The app gates rendering on three
+states — `checking` (probing configuration), `setup` (Setup Wizard), and
+`ready` (authenticated app). `/monitor`, `/login`, `/roles` and `/users`
+are reachable without an authenticated session; everything else requires login.
+
+| Route | Page | Purpose |
+|---|---|---|
+| `/` | `DashboardPage` | Landing dashboard |
+| `/tasks` | `TasksPage` | Task list / filtering |
+| `/tasks/:taskCode` | `TaskDetailPage` | Task detail, transitions, comments |
+| `/projects` | `ProjectsPage` | Project list |
+| `/projects/:id` | `ProjectDetailPage` | Project detail / editor |
+| `/milestones` | `MilestonesPage` | Milestone list |
+| `/milestones/:milestoneCode` | `MilestoneDetailPage` | Milestone detail / actions |
+| `/proposals` (`/proposes`) | `ProposalsPage` | Proposal list |
+| `/proposals/:proposalCode` (`/proposes/:proposalCode`) | `ProposalDetailPage` | Proposal detail, accept/reject/reopen |
+| `/calendar` | `CalendarPage` | Calendar view |
+| `/meetings/:meetingCode` | `MeetingDetailPage` | Meeting detail |
+| `/supports/:supportCode` | `SupportDetailPage` | Support request detail |
+| `/notifications` | `NotificationsPage` | Notification inbox |
+| `/roles` | `RoleEditorPage` | Role / permission (RBAC) editor |
+| `/users` | `UsersPage` | User management |
+| `/monitor` | `MonitorPage` | Live system monitor (public) |
+| `/login` | `LoginPage` | Authentication |
+| _(state-gated)_ | `SetupWizardPage` | First-run provisioning wizard |
+
+Shared building blocks live in `src/components/` (`Sidebar`,
+`CreateTaskModal`, `MilestoneFormModal`, `ProjectFormModal`,
+`CopyableCode`); the auth hook is `src/hooks/useAuth.ts`; shared types are
+in `src/types/index.ts`.
+
+## How It Talks to the Backend
+
+All API access goes through the shared axios instance in
+`src/services/api.ts`:
+
+- The base URL is **resolved at runtime** from
+  `localStorage['HF_BACKEND_BASE_URL']` (re-read on every request via an
+  axios request interceptor), not baked in at build time.
+- A bearer token from `localStorage['token']` is attached automatically
+  when present.
+- A response interceptor clears the token and redirects to `/login` on
+  HTTP `401`, except on the public paths `/monitor` and `/login`.
+
+Authentication (`src/hooks/useAuth.ts`) posts form-encoded credentials to
+`/auth/token`, stores the returned `access_token`, and loads the current
+user from `/auth/me`.
+
+In local dev, `vite.config.ts` also proxies `/api/*` to
+`http://backend:8000` (stripping the `/api` prefix) for same-origin
+development against a Compose backend.
+
+## Setup Wizard / SSH-Tunnel Flow
+
+On startup `App.tsx` runs `checkInitialized()`:
+
+1. It calls the backend `GET /config/status`. If that returns
+   `initialized: true`, the app is `ready` (and `backend_url`, if present,
+   is cached into `localStorage['HF_BACKEND_BASE_URL']`).
+2. Otherwise, if a wizard port was previously saved
+   (`localStorage['HF_WIZARD_PORT']`), it tries
+   `http://127.0.0.1:<port>/api/v1/config/harborforge.json` directly.
+3. If neither indicates an initialized install, it renders
+   `SetupWizardPage`.
+
+The Setup Wizard (`src/pages/SetupWizardPage.tsx`) is a 4-step flow —
+**Wizard → Admin → Backend → Finish**:
+
+- **Wizard**: the operator enters the local port that an SSH tunnel
+  forwards to **AbstractWizard**
+  (`ssh -L <port>:127.0.0.1:<port> user@server`). The UI health-checks
+  `http://127.0.0.1:<port>/health` and stores the port.
+- **Admin**: collects the first admin account (username, password, email,
+  full name).
+- **Backend**: optional backend base URL override.
+- **Finish**: writes the assembled config to AbstractWizard via
+  `PUT http://127.0.0.1:<port>/api/v1/config/harborforge.json`, caches the
+  backend URL locally, and instructs the operator to
+  `docker compose restart` on the server before refreshing.
+
+## Local Development
+
+```bash
+npm install
+npm run dev          # Vite dev server on http://0.0.0.0:3000
+```
+
+The dev server proxies `/api` to `http://backend:8000` and allows the
+hosts `frontend`, `127.0.0.1`, `localhost`.
+
+### Build
+
+```bash
+npm run build        # tsc type-check, then vite build → dist/
+npm run preview      # serve the production build locally
+```
+
+### Test
+
+```bash
+npm test             # vitest run (jsdom)
+npm run test:watch   # watch mode
+npm run test:ui      # Vitest UI
+```
+
+Tests live in `src/test/**/*.test.{ts,tsx}` (e.g. `calendar.test.tsx`,
+`proposal-essential.test.tsx`) with global setup in `src/test/setup.ts`.
+
+### Docker
+
+```bash
+docker build -t harborforge-frontend .
+docker run -p 3000:3000 harborforge-frontend
+```
+
+The multi-stage `Dockerfile` builds with Node 20 and serves `dist/` via
+`serve` on port 3000. Set `FRONTEND_DEV_MODE=1` to run the Vite dev server
+inside the container instead of serving the static build.
+
+## Environment / Configuration
+
+- **`VITE_API_BASE`** (`.env`, default `http://backend:8000`) — a build
+  hint for the default backend location.
+- The effective backend base URL is determined at **runtime** from
+  `localStorage['HF_BACKEND_BASE_URL']`, which is populated by the Setup
+  Wizard or by the backend's `/config/status` response — so changing the
+  backend target does not require a rebuild.
+- `localStorage['HF_WIZARD_PORT']` — last AbstractWizard tunnel port.
+- `localStorage['token']` — current JWT bearer token.
+
+## Theming
+
+The entire visual design is a single self-contained design system in
+**`src/index.css`** — there is no CSS-in-JS, no Tailwind, and no
+per-component stylesheets. Components only reference global CSS classes;
+all colors, typography, spacing and effects are driven by CSS custom
+properties on `:root`. To re-theme the app, edit this one file.
+
+The theme is **"Foundry Deck"** — a shipwright's drafting table meets a
+foundry control panel:
+
+- **Blackened-steel dark palette** — cool-tinted near-black surfaces
+  (`--bg`, `--bg-card`, `--bg-hover`, `--bg-sink`) with machined,
+  tight-radius borders.
+- **Molten-ember accent** — a single hot orange accent
+  (`--accent`, `--accent-hover`, `--ember` gradient, ember glow) used
+  sparingly as the signature element.
+- **Oxidized-steel secondary** plus a forge-mapped status palette
+  (patina success, heat-amber warning, rust danger, arc violet).
+- **Blueprint-grid background** — layered radial ember/steel vignettes, a
+  fine 40px draughting grid, and a subtle SVG film-grain overlay.
+- **Technical web fonts** loaded via a Google Fonts `@import` at the top
+  of `src/index.css`: **Saira Condensed** (headings), **Hanken Grotesk**
+  (body), and **JetBrains Mono** (code/monospace).
+
+Selectors are kept 1:1 with the existing markup, so theming changes are
+made entirely in `src/index.css` via the CSS variables and global classes.

index.html

@@ -2,12 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link id="hf-favicon" rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HarborForge</title>
   </head>
   <body>
     <div id="root"></div>
+    <!-- Runtime config injected by the container entrypoint (deploy-time
+         HARBORFORGE_OIDC_ONLY). Absent in dev → app falls back to /auth/config. -->
+    <script src="/runtime-config.js"></script>
+    <script>
+      // Optional deploy-time branding override (HARBORFORGE_LOGO_URL).
+      try {
+        var u = window.__HF_RUNTIME__ && window.__HF_RUNTIME__.logo_url;
+        if (u) document.getElementById('hf-favicon').href = u;
+      } catch (e) {}
+    </script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

nginx.conf

@@ -1,15 +0,0 @@
-server {
-    listen 3000;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    location /api/ {
-        proxy_pass http://backend:8000/;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-    }
-
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-}

package.json

@@ -5,21 +5,31 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "npx tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
+    "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.22.0"
-    "axios": "^1.6.7",
-    "dayjs": "^1.11.10"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^4.1.2",
+    "jsdom": "^29.0.1",
     "typescript": "^5.4.0",
-    "vite": "^5.1.0"
+    "vite": "^5.1.0",
+    "vitest": "^4.1.2"
   }
 }

public/logo.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733.000000 733.000000" role="img" aria-label="Hangman Lab">
+<g transform="translate(0.000000,733.000000) scale(0.100000,-0.100000)"
+fill="#ff6a1a" stroke="none">
+<path d="M812 6860 c-66 -40 -73 -66 -70 -242 3 -141 5 -159 24 -185 43 -58
+63 -63 262 -64 l182 -1 0 -2694 0 -2694 -290 0 c-314 0 -332 -3 -380 -54 -24
+-27 -25 -32 -28 -199 -3 -195 4 -218 71 -250 32 -16 257 -17 3084 -17 2955 0
+3049 1 3083 19 65 34 75 66 75 236 0 186 -16 224 -104 254 -25 8 -682 11
+-2512 11 l-2479 0 0 1998 0 1997 698 697 697 697 670 -3 c369 -2 680 -4 693
+-5 22 -1 22 -1 22 -269 l0 -268 84 -12 c47 -7 103 -19 125 -27 41 -14 41 -14
+43 283 l3 297 631 1 c698 2 673 -1 714 67 18 28 20 51 20 187 0 173 -8 201
+-72 240 -33 20 -56 20 -2623 20 -2567 0 -2590 0 -2623 -20z m1725 -500 c-1 -3
+-183 -185 -404 -404 l-403 -399 0 405 0 406 405 -1 c223 -1 404 -4 402 -7z
+M4283 5701 c-459 -125 -690 -624 -483 -1046 67 -138 196 -266 335 -335 281
+-139 612 -93 837 118 235 219 297 575 152 870 -85 174 -235 306 -427 375 -111
+40 -302 48 -414 18z m267 -211 c95 -15 201 -70 274 -144 273 -274 173 -723
+-189 -851 -93 -33 -236 -35 -326 -5 -202 68 -340 249 -356 465 -18 242 153
+471 394 529 71 18 119 19 203 6z M5945 4716 c-56 -25 -80 -61 -80 -122 0 -48
+4 -57 36 -90 88 -88 219 -29 219 98 0 45 -34 96 -75 114 -42 17 -61 17 -100 0z
+M5675 4466 c-60 -26 -73 -109 -26 -157 62 -61 161 -19 161 70 0 74 -68 118
+-135 87z M3747 4397 c-10 -7 -226 -223 -479 -482 -307 -313 -467 -483 -479
+-510 -35 -75 -17 -177 38 -227 39 -35 114 -61 160 -54 100 13 104 17 583 554
+l145 162 3 -404 c3 -455 15 -342 -137 -1186 -76 -423 -101 -587 -101 -664 0
+-190 182 -307 377 -242 62 21 136 95 152 152 6 22 29 188 52 369 57 466 109
+839 118 848 4 4 52 6 106 5 l99 -3 67 -210 c38 -115 68 -220 69 -232 0 -12
+-38 -152 -85 -311 -47 -159 -85 -302 -85 -317 0 -128 109 -225 255 -225 109 1
+185 42 228 125 26 51 237 683 237 710 0 11 -54 182 -121 380 -121 360 -121
+360 -134 605 -8 135 -14 292 -14 350 l0 105 152 -158 c84 -87 166 -167 182
+-177 44 -29 98 -26 135 8 38 35 187 379 173 401 -5 8 -34 20 -64 26 -59 11
+-38 -8 -393 362 -89 93 -100 97 -174 59 -59 -30 -161 -62 -229 -71 -52 -7 -53
+-7 -53 -41 0 -44 -21 -84 -61 -118 -38 -32 -41 0 32 -455 l52 -325 -82 -78
+c-45 -43 -85 -78 -89 -78 -4 0 -42 35 -84 78 l-77 77 34 215 c19 118 46 289
+61 379 26 164 26 164 -5 188 -42 33 -54 58 -61 121 -5 54 -5 54 -92 87 -98 38
+-184 89 -243 145 -76 70 -123 87 -168 57z M5504 4170 c-74 -30 -69 -170 6
+-170 19 0 20 -7 20 -123 0 -122 0 -122 -54 -262 -30 -77 -97 -243 -150 -369
+-106 -252 -113 -287 -73 -347 46 -70 38 -69 560 -69 327 0 475 3 490 11 69 35
+107 109 88 172 -5 17 -62 142 -126 277 -225 470 -215 443 -215 586 0 114 2
+124 18 124 57 0 72 101 23 151 -29 29 -29 29 -298 28 -147 0 -278 -4 -289 -9z
+m376 -307 c1 -148 1 -148 81 -333 101 -231 98 -222 68 -216 -13 3 -116 22
+-229 42 -112 19 -208 37 -212 40 -4 2 18 75 48 160 54 156 54 156 54 305 l0
+149 95 0 95 0 0 -147z m-219 -593 c22 0 49 -42 49 -75 0 -46 -29 -75 -74 -75
+-37 0 -76 36 -76 71 0 46 45 94 78 83 8 -2 18 -4 23 -4z m327 -126 c53 -59 -7
+-144 -80 -113 -54 22 -65 83 -22 125 30 31 67 27 102 -12z"/>
+</g>
+</svg>

src/App.tsx

@@ -1,21 +1,122 @@
+import { useState, useEffect } from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { useAuth } from '@/hooks/useAuth'
 import Sidebar from '@/components/Sidebar'
 import LoginPage from '@/pages/LoginPage'
 import DashboardPage from '@/pages/DashboardPage'
-import IssuesPage from '@/pages/IssuesPage'
+import TasksPage from '@/pages/TasksPage'
-import IssueDetailPage from '@/pages/IssueDetailPage'
+import TaskDetailPage from '@/pages/TaskDetailPage'
-import CreateIssuePage from '@/pages/CreateIssuePage'
+import ProjectsPage from '@/pages/ProjectsPage'
+import ProjectDetailPage from '@/pages/ProjectDetailPage'
+import KnowledgeBasesPage from '@/pages/KnowledgeBasesPage'
+import KnowledgeBaseDetailPage from '@/pages/KnowledgeBaseDetailPage'
+import MilestonesPage from '@/pages/MilestonesPage'
+import MilestoneDetailPage from '@/pages/MilestoneDetailPage'
+import NotificationsPage from '@/pages/NotificationsPage'
+import RoleEditorPage from '@/pages/RoleEditorPage'
+import MonitorPage from '@/pages/MonitorPage'
+import ProposalsPage from '@/pages/ProposalsPage'
+import ProposalDetailPage from '@/pages/ProposalDetailPage'
+import UsersPage from '@/pages/UsersPage'
+import CalendarPage from '@/pages/CalendarPage'
+import SupportDetailPage from '@/pages/SupportDetailPage'
+import MeetingDetailPage from '@/pages/MeetingDetailPage'
+import OidcCallbackPage from '@/pages/OidcCallbackPage'
+import OidcSettingsPage from '@/pages/OidcSettingsPage'
+import axios from 'axios'
+
+// Backend URL is baked in at build time via VITE_HF_BACKEND_BASE_URL
+// (docker build --build-arg). Empty string → same-origin call (only
+// works in dev with the Vite proxy).
+const API_BASE = import.meta.env.VITE_HF_BACKEND_BASE_URL || ''
+
+type AppState = 'checking' | 'no-admin' | 'ready'
 
 export default function App() {
-  const { user, loading, login, logout } = useAuth()
+  const [appState, setAppState] = useState<AppState>('checking')
+  const [errorMessage, setErrorMessage] = useState<string>('')
+  const { user, loading, login, loginWithToken, logout } = useAuth()
 
-  if (loading) return <div className="loading">加载中...</div>
+  useEffect(() => {
+    checkInitialized()
+  }, [])
+
+  const checkInitialized = async () => {
+    try {
+      const res = await axios.get(`${API_BASE}/config/status`, { timeout: 5000 })
+      const cfg = res.data || {}
+      if (cfg.initialized === true) {
+        setAppState('ready')
+        return
+      }
+      setAppState('no-admin')
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setErrorMessage(`Backend unreachable at ${API_BASE || '<same origin>'} — ${msg}`)
+      setAppState('no-admin')
+    }
+  }
+
+  if (appState === 'checking') {
+    return <div className="loading">Checking deployment status…</div>
+  }
+
+  if (appState === 'no-admin') {
+    return (
+      <div className="login-page">
+        <div className="login-card">
+          <h1>⚓ HarborForge</h1>
+          {errorMessage ? (
+            <>
+              <p className="text-dim">Cannot reach the backend.</p>
+              <pre style={{ whiteSpace: 'pre-wrap', fontSize: '0.85em' }}>{errorMessage}</pre>
+              <p className="text-dim">
+                Set <code>VITE_HF_BACKEND_BASE_URL</code> at build time
+                (e.g. <code>https://hf-api.example.com</code>) in the
+                frontend container's compose entry.
+              </p>
+            </>
+          ) : (
+            <>
+              <p className="text-dim">
+                No admin user found. Bootstrap the deployment by running, on the host:
+              </p>
+              <pre style={{ whiteSpace: 'pre-wrap', fontSize: '0.85em' }}>
+{`docker exec hf-backend hf-cli admin create-user \\
+  --email you@example.com \\
+  --password '...' \\
+  # ...or in OIDC_ONLY mode:
+  --oidc-issuer https://login.example.com/realms/your-realm \\
+  --oidc-subject <sub-from-idp>`}
+              </pre>
+              <button className="btn-primary" onClick={checkInitialized}>
+                Recheck
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  if (loading) return <div className="loading">Loading...</div>
 
   if (!user) {
     return (
       <BrowserRouter>
-        <LoginPage onLogin={login} />
+        <div className="app-layout">
+          <Sidebar user={null} onLogout={logout} />
+          <main className="main-content">
+            <Routes>
+              <Route path="/roles" element={<RoleEditorPage />} />
+              <Route path="/users" element={<UsersPage />} />
+              <Route path="/monitor" element={<MonitorPage />} />
+              <Route path="/login" element={<LoginPage onLogin={login} />} />
+              <Route path="/oidc/callback" element={<OidcCallbackPage onToken={loginWithToken} />} />
+              <Route path="*" element={<Navigate to="/monitor" />} />
+            </Routes>
+          </main>
+        </div>
       </BrowserRouter>
     )
   }
@@ -27,9 +128,28 @@ export default function App() {
         <main className="main-content">
           <Routes>
             <Route path="/" element={<DashboardPage />} />
-            <Route path="/issues" element={<IssuesPage />} />
+            <Route path="/tasks" element={<TasksPage />} />
-            <Route path="/issues/new" element={<CreateIssuePage />} />
+            <Route path="/tasks/:taskCode" element={<TaskDetailPage />} />
-            <Route path="/issues/:id" element={<IssueDetailPage />} />
+            <Route path="/projects" element={<ProjectsPage />} />
+            <Route path="/projects/:id" element={<ProjectDetailPage />} />
+            <Route path="/knowledge-bases" element={<KnowledgeBasesPage />} />
+            <Route path="/knowledge-bases/:id" element={<KnowledgeBaseDetailPage />} />
+            <Route path="/milestones" element={<MilestonesPage />} />
+            <Route path="/milestones/:milestoneCode" element={<MilestoneDetailPage />} />
+            <Route path="/proposals" element={<ProposalsPage />} />
+            <Route path="/proposals/:proposalCode" element={<ProposalDetailPage />} />
+            <Route path="/calendar" element={<CalendarPage />} />
+            {/* Legacy routes for backward compatibility */}
+            <Route path="/proposes" element={<ProposalsPage />} />
+            <Route path="/proposes/:proposalCode" element={<ProposalDetailPage />} />
+            <Route path="/meetings/:meetingCode" element={<MeetingDetailPage />} />
+            <Route path="/supports/:supportCode" element={<SupportDetailPage />} />
+            <Route path="/notifications" element={<NotificationsPage />} />
+            <Route path="/roles" element={<RoleEditorPage />} />
+            <Route path="/users" element={<UsersPage />} />
+            <Route path="/monitor" element={<MonitorPage />} />
+            {user?.is_admin && <Route path="/settings/oidc" element={<OidcSettingsPage />} />}
+            <Route path="/oidc/callback" element={<OidcCallbackPage onToken={loginWithToken} />} />
             <Route path="*" element={<Navigate to="/" />} />
           </Routes>
         </main>

src/components/CopyableCode.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+
+interface Props {
+  code: string
+  prefix?: string
+}
+
+export default function CopyableCode({ code, prefix }: Props) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // fallback: select text
+    }
+  }
+
+  return (
+    <span
+      className="copyable-code"
+      title="Click to copy code"
+      onClick={handleCopy}
+      style={{
+        cursor: 'pointer',
+        fontFamily: 'monospace',
+        padding: '2px 8px',
+        borderRadius: '4px',
+        background: 'var(--bg-hover, rgba(255,255,255,.06))',
+        border: '1px solid var(--border, rgba(255,255,255,.1))',
+        fontSize: '0.95em',
+        userSelect: 'all',
+        transition: 'background .15s',
+      }}
+    >
+      {prefix}{code}
+      {copied && (
+        <span style={{ marginLeft: 6, fontSize: '0.8em', color: 'var(--success, #10b981)' }}>✓</span>
+      )}
+    </span>
+  )
+}

src/components/CreateTaskModal.tsx

@@ -0,0 +1,270 @@
+import { useEffect, useMemo, useState } from 'react'
+import api from '@/services/api'
+import type { Milestone, Project, Task } from '@/types'
+
+const TASK_TYPES = [
+  // P9.6: 'story' removed — all story/* types are restricted; must come from Proposal Accept workflow
+  { value: 'issue', label: 'Issue', subtypes: ['infrastructure', 'performance', 'regression', 'security', 'user_experience', 'defect'] },
+  // P7.1: 'task' type removed — defect subtype migrated to issue/defect
+  { value: 'test', label: 'Test', subtypes: ['regression', 'security', 'smoke', 'stress'] },
+  { value: 'maintenance', label: 'Maintenance', subtypes: ['deploy'] },  // P9.6: 'release' removed — controlled via milestone flow
+  { value: 'research', label: 'Research', subtypes: [] },
+  { value: 'review', label: 'Review', subtypes: ['code_review', 'decision_review', 'function_review'] },
+  { value: 'resolution', label: 'Resolution', subtypes: [] },
+]
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onCreated?: (task: Task) => void | Promise<void>
+  onSaved?: (task: Task) => void | Promise<void>
+  initialProjectCode?: string
+  initialMilestoneCode?: string
+  lockProject?: boolean
+  lockMilestone?: boolean
+  task?: Task | null
+}
+
+type FormState = {
+  title: string
+  description: string
+  project_code: string
+  milestone_code: string
+  task_type: string
+  task_subtype: string
+  priority: string
+  tags: string
+  reporter_id: number
+}
+
+const makeInitialForm = (projectCode = '', milestoneCode = ''): FormState => ({
+  title: '',
+  description: '',
+  project_code: projectCode,
+  milestone_code: milestoneCode,
+  task_type: 'issue',  // P7.1: default changed from 'task' to 'issue'
+  task_subtype: '',
+  priority: 'medium',
+  tags: '',
+  reporter_id: 1,
+})
+
+export default function CreateTaskModal({
+  isOpen,
+  onClose,
+  onCreated,
+  onSaved,
+  initialProjectCode,
+  initialMilestoneCode,
+  lockProject = false,
+  lockMilestone = false,
+  task,
+}: Props) {
+  const [projects, setProjects] = useState<Project[]>([])
+  const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<FormState>(makeInitialForm(initialProjectCode, initialMilestoneCode))
+
+  const isEdit = Boolean(task)
+  const currentType = useMemo(
+    () => TASK_TYPES.find((t) => t.value === form.task_type) || TASK_TYPES[2],
+    [form.task_type]
+  )
+  const subtypes = currentType.subtypes || []
+
+  const loadMilestones = async (projectCode: string, preferredMilestoneCode?: string) => {
+    if (!projectCode) {
+      setMilestones([])
+      setForm((f) => ({ ...f, milestone_code: '' }))
+      return
+    }
+
+    const { data } = await api.get<Milestone[]>(`/milestones?project_code=${projectCode}`)
+    setMilestones(data)
+    const hasPreferred = preferredMilestoneCode && data.some((m) => m.milestone_code === preferredMilestoneCode)
+    const nextMilestoneCode = hasPreferred ? preferredMilestoneCode! : (data[0]?.milestone_code || '')
+    setForm((f) => ({ ...f, milestone_code: nextMilestoneCode }))
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const init = async () => {
+      const { data } = await api.get<Project[]>('/projects')
+      setProjects(data)
+
+      const chosenProjectCode = task?.project_code || initialProjectCode || data[0]?.project_code || ''
+      const chosenMilestoneCode = task?.milestone_code || initialMilestoneCode || ''
+
+      setForm(task ? {
+        title: task.title,
+        description: task.description || '',
+        project_code: task.project_code || '',
+        milestone_code: task.milestone_code || '',
+        task_type: task.task_type,
+        task_subtype: task.task_subtype || '',
+        priority: task.priority,
+        tags: task.tags || '',
+        reporter_id: task.reporter_id,
+      } : makeInitialForm(chosenProjectCode, chosenMilestoneCode))
+
+      await loadMilestones(chosenProjectCode, chosenMilestoneCode)
+    }
+
+    init().catch(console.error)
+  }, [isOpen, initialProjectCode, initialMilestoneCode, task])
+
+  const handleProjectChange = async (projectCode: string) => {
+    setForm((f) => ({ ...f, project_code: projectCode, milestone_code: '' }))
+    await loadMilestones(projectCode)
+  }
+
+  const handleTypeChange = (taskType: string) => {
+    setForm((f) => ({ ...f, task_type: taskType, task_subtype: '' }))
+  }
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.milestone_code) {
+      alert('Please select a milestone')
+      return
+    }
+
+    const payload: any = { ...form, tags: form.tags || null }
+    if (!form.task_subtype) delete payload.task_subtype
+
+    setSaving(true)
+    try {
+      const { data } = isEdit
+        ? await api.patch<Task>(`/tasks/${task!.task_code}`, payload)
+        : await api.post<Task>('/tasks', payload)
+      await onCreated?.(data)
+      await onSaved?.(data)
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal task-create-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{isEdit ? 'Edit Task' : 'Create Task'}</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          <label>
+            Title
+            <input
+              data-testid="task-title-input"
+              required
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+            />
+          </label>
+
+          <label>
+            Description
+            <textarea
+              data-testid="task-description-input"
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+            />
+          </label>
+
+          <div className="task-create-grid">
+            <label>
+              Project
+              <select
+                data-testid="project-select"
+                value={form.project_code}
+                onChange={(e) => handleProjectChange(e.target.value)}
+                disabled={lockProject}
+              >
+                {projects.map((p) => (
+                  <option key={p.id} value={p.project_code || ''}>{p.name}</option>
+                ))}
+              </select>
+            </label>
+
+            <label>
+              Milestone
+              <select
+                data-testid="milestone-select"
+                value={form.milestone_code}
+                onChange={(e) => setForm({ ...form, milestone_code: e.target.value })}
+                disabled={lockMilestone}
+              >
+                {milestones.length === 0 && <option value={0}>No milestones available</option>}
+                {milestones.map((m) => (
+                  <option key={m.id} value={m.milestone_code || ''}>{m.title}</option>
+                ))}
+              </select>
+            </label>
+
+            <label>
+              Type
+              <select
+                data-testid="task-type-select"
+                value={form.task_type}
+                onChange={(e) => handleTypeChange(e.target.value)}
+              >
+                {TASK_TYPES.map((t) => (
+                  <option key={t.value} value={t.value}>{t.label}</option>
+                ))}
+              </select>
+            </label>
+
+            <label>
+              Priority
+              <select
+                value={form.priority}
+                onChange={(e) => setForm({ ...form, priority: e.target.value })}
+              >
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+                <option value="critical">Critical</option>
+              </select>
+            </label>
+          </div>
+
+          {subtypes.length > 0 && (
+            <label>
+              Subtype
+              <select
+                value={form.task_subtype}
+                onChange={(e) => setForm({ ...form, task_subtype: e.target.value })}
+              >
+                <option value="">Select subtype</option>
+                {subtypes.map((s) => (
+                  <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          <label>
+            Tags
+            <input
+              value={form.tags}
+              onChange={(e) => setForm({ ...form, tags: e.target.value })}
+              placeholder="Comma separated"
+            />
+          </label>
+
+          <div className="modal-actions">
+            <button data-testid="create-task-button" type="submit" className="btn-primary" disabled={saving}>
+              {saving ? (isEdit ? 'Saving...' : 'Creating...') : (isEdit ? 'Save' : 'Create')}
+            </button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/KnowledgeBaseFormModal.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react'
+import api from '@/services/api'
+import type { KnowledgeBase } from '@/types'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSaved?: (kb: KnowledgeBase) => void | Promise<void>
+  knowledgeBase?: KnowledgeBase | null
+}
+
+type FormState = {
+  title: string
+  description: string
+}
+
+const emptyForm: FormState = { title: '', description: '' }
+
+export default function KnowledgeBaseFormModal({ isOpen, onClose, onSaved, knowledgeBase }: Props) {
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [form, setForm] = useState<FormState>(emptyForm)
+
+  useEffect(() => {
+    if (!isOpen) return
+    setError('')
+    if (knowledgeBase) {
+      setForm({ title: knowledgeBase.title, description: knowledgeBase.description || '' })
+    } else {
+      setForm(emptyForm)
+    }
+  }, [isOpen, knowledgeBase])
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      if (knowledgeBase) {
+        const { data } = await api.patch<KnowledgeBase>(`/knowledge-bases/${knowledgeBase.id}`, {
+          title: form.title,
+          description: form.description || null,
+        })
+        await onSaved?.(data)
+      } else {
+        const { data } = await api.post<KnowledgeBase>('/knowledge-bases', {
+          title: form.title,
+          description: form.description || null,
+        })
+        await onSaved?.(data)
+      }
+      onClose()
+    } catch (err: any) {
+      setError(err?.response?.data?.detail || 'Failed to save knowledge base')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{knowledgeBase ? 'Edit Knowledge Base' : 'Create Knowledge Base'}</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          <label>
+            Title
+            <input
+              data-testid="kb-title-input"
+              required
+              placeholder="Knowledge base title"
+              value={form.title}
+              onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+            />
+          </label>
+
+          <label>
+            Description
+            <textarea
+              data-testid="kb-description-input"
+              placeholder="Description (optional)"
+              value={form.description}
+              onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+            />
+          </label>
+
+          {error && <p className="error-text" style={{ color: 'var(--danger, #e5534b)' }}>{error}</p>}
+
+          <div className="modal-actions">
+            <button type="submit" className="btn-primary" disabled={saving}>
+              {saving ? 'Saving...' : (knowledgeBase ? 'Save' : 'Create')}
+            </button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/KnowledgeBaseTree.tsx

@@ -0,0 +1,275 @@
+import { useState } from 'react'
+import api from '@/services/api'
+import type { KnowledgeBaseTree as Tree, KnowledgeTopicNode, KnowledgeCategoryNode, KnowledgeFact } from '@/types'
+
+type Reload = () => void | Promise<void>
+
+function errMsg(err: any, fallback: string): string {
+  return err?.response?.data?.detail || fallback
+}
+
+/** A toggle button that reveals a single-line input with save/cancel. */
+function InlineForm({ label, placeholder, onSubmit }: {
+  label: string
+  placeholder: string
+  onSubmit: (value: string) => Promise<void>
+}) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  if (!open) {
+    return <button className="kb-mini-btn" onClick={() => { setValue(''); setOpen(true) }}>{label}</button>
+  }
+  const save = async () => {
+    if (!value.trim()) return
+    setBusy(true)
+    try { await onSubmit(value.trim()); setOpen(false) }
+    finally { setBusy(false) }
+  }
+  return (
+    <span className="kb-inline-form">
+      <input
+        autoFocus
+        placeholder={placeholder}
+        value={value}
+        disabled={busy}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setOpen(false) }}
+      />
+      <button className="kb-mini-btn" disabled={busy} onClick={save}>✓</button>
+      <button className="kb-mini-btn" disabled={busy} onClick={() => setOpen(false)}>✕</button>
+    </span>
+  )
+}
+
+/** Inline editor for a node's name + description (used by topics & categories). */
+function NodeEditForm({ initialName, initialDesc, namePlaceholder, onSave, onCancel }: {
+  initialName: string
+  initialDesc: string
+  namePlaceholder: string
+  onSave: (name: string, description: string) => Promise<void>
+  onCancel: () => void
+}) {
+  const [name, setName] = useState(initialName)
+  const [desc, setDesc] = useState(initialDesc)
+  const [busy, setBusy] = useState(false)
+
+  const save = async () => {
+    if (!name.trim()) return
+    setBusy(true)
+    try { await onSave(name.trim(), desc) } finally { setBusy(false) }
+  }
+  return (
+    <div className="kb-edit-form">
+      <input
+        autoFocus
+        placeholder={namePlaceholder}
+        value={name}
+        disabled={busy}
+        onChange={(e) => setName(e.target.value)}
+        onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') onCancel() }}
+      />
+      <textarea
+        placeholder="Description (optional)"
+        rows={2}
+        value={desc}
+        disabled={busy}
+        onChange={(e) => setDesc(e.target.value)}
+      />
+      <span className="kb-row-actions">
+        <button className="kb-mini-btn" disabled={busy} onClick={save}>save</button>
+        <button className="kb-mini-btn" disabled={busy} onClick={onCancel}>cancel</button>
+      </span>
+    </div>
+  )
+}
+
+function FactRow({ fact, onChange }: { fact: KnowledgeFact; onChange: Reload }) {
+  const [editing, setEditing] = useState(false)
+  const [value, setValue] = useState(fact.fact)
+
+  const save = async () => {
+    try {
+      await api.patch(`/knowledge-facts/${fact.id}`, { fact: value })
+      setEditing(false)
+      await onChange()
+    } catch (err) { alert(errMsg(err, 'Failed to update fact')) }
+  }
+  const remove = async () => {
+    if (!confirm('Delete this fact?')) return
+    try { await api.delete(`/knowledge-facts/${fact.id}`); await onChange() }
+    catch (err) { alert(errMsg(err, 'Failed to delete fact')) }
+  }
+
+  return (
+    <div className="kb-fact">
+      <span className="kb-bullet">•</span>
+      {editing ? (
+        <span className="kb-inline-form kb-inline-grow">
+          <input autoFocus value={value} onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setEditing(false) }} />
+          <button className="kb-mini-btn" onClick={save}>✓</button>
+          <button className="kb-mini-btn" onClick={() => { setValue(fact.fact); setEditing(false) }}>✕</button>
+        </span>
+      ) : (
+        <>
+          <span className="kb-fact-text">{fact.fact}</span>
+          <span className="kb-row-actions">
+            <button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
+            <button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
+          </span>
+        </>
+      )}
+    </div>
+  )
+}
+
+function CategoryNode({ cat, onChange }: { cat: KnowledgeCategoryNode; onChange: Reload }) {
+  const [editing, setEditing] = useState(false)
+
+  const saveEdit = async (name: string, description: string) => {
+    try {
+      await api.patch(`/knowledge-categories/${cat.id}`, { name, description: description || null })
+      setEditing(false)
+      await onChange()
+    } catch (err) { alert(errMsg(err, 'Failed to update category')) }
+  }
+  const remove = async () => {
+    if (!confirm('Delete this category and everything under it?')) return
+    try { await api.delete(`/knowledge-categories/${cat.id}`); await onChange() }
+    catch (err) { alert(errMsg(err, 'Failed to delete category')) }
+  }
+  const addSubcategory = async (value: string) => {
+    try { await api.post('/knowledge-categories', { topic_id: cat.topic_id, parent: cat.id, name: value }); await onChange() }
+    catch (err) { alert(errMsg(err, 'Failed to add category')) }
+  }
+  const addFact = async (value: string) => {
+    try { await api.post('/knowledge-facts', { topic_id: cat.topic_id, category_id: cat.id, fact: value }); await onChange() }
+    catch (err) { alert(errMsg(err, 'Failed to add fact')) }
+  }
+
+  return (
+    <div className="kb-node kb-category">
+      {editing ? (
+        <div className="kb-node-header">
+          <NodeEditForm
+            initialName={cat.name}
+            initialDesc={cat.description || ''}
+            namePlaceholder="Category name"
+            onSave={saveEdit}
+            onCancel={() => setEditing(false)}
+          />
+        </div>
+      ) : (
+        <>
+          <div className="kb-node-header">
+            <span className="kb-node-title">📂 {cat.name}</span>
+            <span className="kb-row-actions">
+              <InlineForm label="+ category" placeholder="Category name" onSubmit={addSubcategory} />
+              <InlineForm label="+ fact" placeholder="Fact" onSubmit={addFact} />
+              <button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
+              <button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
+            </span>
+          </div>
+          {cat.description && <div className="kb-node-desc">{cat.description}</div>}
+        </>
+      )}
+      <div className="kb-children">
+        {cat.facts.map((f) => <FactRow key={f.id} fact={f} onChange={onChange} />)}
+        {cat.categories.map((c) => <CategoryNode key={c.id} cat={c} onChange={onChange} />)}
+      </div>
+    </div>
+  )
+}
+
+function TopicNode({ topic, onChange }: { topic: KnowledgeTopicNode; onChange: Reload }) {
+  const [editing, setEditing] = useState(false)
+
+  const saveEdit = async (name: string, description: string) => {
+    try {
+      await api.patch(`/knowledge-topics/${topic.id}`, { topic: name, description: description || null })
+      setEditing(false)
+      await onChange()
+    } catch (err) { alert(errMsg(err, 'Failed to update topic')) }
+  }
+  const remove = async () => {
+    if (!confirm('Delete this topic and everything under it?')) return
+    try { await api.delete(`/knowledge-topics/${topic.id}`); await onChange() }
+    catch (err) { alert(errMsg(err, 'Failed to delete topic')) }
+  }
+  const addCategory = async (value: string) => {
+    try { await api.post('/knowledge-categories', { topic_id: topic.id, name: value }); await onChange() }
+    catch (err) { alert(errMsg(err, 'Failed to add category')) }
+  }
+  const addFact = async (value: string) => {
+    try { await api.post('/knowledge-facts', { topic_id: topic.id, fact: value }); await onChange() }
+    catch (err) { alert(errMsg(err, 'Failed to add fact')) }
+  }
+
+  return (
+    <div className="kb-node kb-topic">
+      {editing ? (
+        <div className="kb-node-header">
+          <NodeEditForm
+            initialName={topic.topic}
+            initialDesc={topic.description || ''}
+            namePlaceholder="Topic name"
+            onSave={saveEdit}
+            onCancel={() => setEditing(false)}
+          />
+        </div>
+      ) : (
+        <>
+          <div className="kb-node-header">
+            <span className="kb-node-title kb-topic-title"># {topic.topic}</span>
+            <span className="kb-row-actions">
+              <InlineForm label="+ category" placeholder="Category name" onSubmit={addCategory} />
+              <InlineForm label="+ fact" placeholder="Fact" onSubmit={addFact} />
+              <button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
+              <button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
+            </span>
+          </div>
+          {topic.description && <div className="kb-node-desc">{topic.description}</div>}
+        </>
+      )}
+      <div className="kb-children">
+        {topic.facts.map((f) => <FactRow key={f.id} fact={f} onChange={onChange} />)}
+        {topic.categories.map((c) => <CategoryNode key={c.id} cat={c} onChange={onChange} />)}
+      </div>
+    </div>
+  )
+}
+
+export default function KnowledgeBaseTree({ tree, onChange }: { tree: Tree; onChange: Reload }) {
+  const [addingTopic, setAddingTopic] = useState(false)
+  const [topicName, setTopicName] = useState('')
+
+  const addTopic = async () => {
+    if (!topicName.trim()) return
+    try {
+      await api.post(`/knowledge-bases/${tree.id}/topics`, { topic: topicName.trim() })
+      setTopicName(''); setAddingTopic(false)
+      await onChange()
+    } catch (err) { alert(errMsg(err, 'Failed to add topic')) }
+  }
+
+  return (
+    <div className="kb-tree">
+      <div className="kb-tree-toolbar">
+        {addingTopic ? (
+          <span className="kb-inline-form">
+            <input autoFocus placeholder="Topic name" value={topicName} onChange={(e) => setTopicName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') addTopic(); if (e.key === 'Escape') setAddingTopic(false) }} />
+            <button className="kb-mini-btn" onClick={addTopic}>✓</button>
+            <button className="kb-mini-btn" onClick={() => setAddingTopic(false)}>✕</button>
+          </span>
+        ) : (
+          <button className="btn-secondary" onClick={() => setAddingTopic(true)}>+ Add topic</button>
+        )}
+      </div>
+      {tree.topics.length === 0 && <p className="empty">No topics yet. Add one above.</p>}
+      {tree.topics.map((t) => <TopicNode key={t.id} topic={t} onChange={onChange} />)}
+    </div>
+  )
+}

src/components/MilestoneFormModal.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react'
+import api from '@/services/api'
+import type { Milestone, Project } from '@/types'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSaved?: (milestone: Milestone) => void | Promise<void>
+  milestone?: Milestone | null
+  initialProjectCode?: string
+  lockProject?: boolean
+}
+
+type FormState = {
+  title: string
+  description: string
+  project_code: string
+  status: string
+  due_date: string
+  planned_release_date: string
+}
+
+const emptyForm: FormState = {
+  title: '',
+  description: '',
+  project_code: '',
+  status: 'open',
+  due_date: '',
+  planned_release_date: '',
+}
+
+const toDateInput = (value?: string | null) => (value ? String(value).slice(0, 10) : '')
+
+export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone, initialProjectCode, lockProject = false }: Props) {
+  const [projects, setProjects] = useState<Project[]>([])
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<FormState>(emptyForm)
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const init = async () => {
+      const { data } = await api.get<Project[]>('/projects')
+      setProjects(data)
+      const defaultProjectCode = milestone?.project_code || initialProjectCode || data[0]?.project_code || ''
+      setForm({
+        title: milestone?.title || '',
+        description: milestone?.description || '',
+        project_code: defaultProjectCode,
+        status: milestone?.status || 'open',
+        due_date: toDateInput(milestone?.due_date),
+        planned_release_date: toDateInput(milestone?.planned_release_date),
+      })
+    }
+
+    init().catch(console.error)
+  }, [isOpen, milestone, initialProjectCode])
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    try {
+      const payload = {
+        title: form.title,
+        description: form.description || null,
+        project_code: form.project_code,
+        status: form.status,
+        due_date: form.due_date || null,
+        planned_release_date: form.planned_release_date || null,
+      }
+      if (milestone) {
+        const { data } = await api.patch<Milestone>(`/milestones/${milestone.milestone_code}`, payload)
+        await onSaved?.(data)
+      } else {
+        const { data } = await api.post<Milestone>('/milestones', payload)
+        await onSaved?.(data)
+      }
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{milestone ? 'Edit Milestone' : 'Create Milestone'}</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          <label>
+            Title
+            <input
+              data-testid="milestone-title-input"
+              required
+              placeholder="Milestone title"
+              value={form.title}
+              onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+            />
+          </label>
+
+          <label>
+            Description
+            <textarea
+              data-testid="milestone-description-input"
+              placeholder="Description (optional)"
+              value={form.description}
+              onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+            />
+          </label>
+
+          <div className="task-create-grid">
+            <label>
+              Project
+              <select value={form.project_code} onChange={(e) => setForm((f) => ({ ...f, project_code: e.target.value }))} disabled={lockProject}>
+                {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
+              </select>
+            </label>
+
+            <label>
+              Status
+              <select value={form.status} onChange={(e) => setForm((f) => ({ ...f, status: e.target.value }))}>
+                <option value="open">Open</option>
+                <option value="freeze">Freeze</option>
+                <option value="undergoing">Undergoing</option>
+                <option value="completed">Completed</option>
+                <option value="closed">Closed</option>
+              </select>
+            </label>
+
+            <label>
+              Due date
+              <input type="date" value={form.due_date} onChange={(e) => setForm((f) => ({ ...f, due_date: e.target.value }))} />
+            </label>
+
+            <label>
+              Planned release date
+              <input type="date" value={form.planned_release_date} onChange={(e) => setForm((f) => ({ ...f, planned_release_date: e.target.value }))} />
+            </label>
+          </div>
+
+          <div className="modal-actions">
+            <button type="submit" className="btn-primary" disabled={saving}>{saving ? 'Saving...' : (milestone ? 'Save' : 'Create')}</button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/ProjectFormModal.tsx

@@ -0,0 +1,280 @@
+import { useEffect, useMemo, useState } from 'react'
+import api from '@/services/api'
+import type { Project, User, KnowledgeBase } from '@/types'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSaved?: (project: Project) => void | Promise<void>
+  project?: Project | null
+}
+
+type FormState = {
+  name: string
+  owner_id: number
+  owner_name: string
+  description: string
+  repo: string
+  sub_projects: string[]
+  related_projects: string[]
+}
+
+const emptyForm: FormState = {
+  name: '',
+  owner_id: 1,
+  owner_name: '',
+  description: '',
+  repo: '',
+  sub_projects: [],
+  related_projects: [],
+}
+
+export default function ProjectFormModal({ isOpen, onClose, onSaved, project }: Props) {
+  const [users, setUsers] = useState<User[]>([])
+  const [projects, setProjects] = useState<Project[]>([])
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<FormState>(emptyForm)
+  const [allKBs, setAllKBs] = useState<KnowledgeBase[]>([])
+  const [linkedKBs, setLinkedKBs] = useState<KnowledgeBase[]>([])
+  const [kbToLink, setKbToLink] = useState('')
+
+  const refreshLinkedKBs = async () => {
+    if (!project) return
+    const { data } = await api.get<KnowledgeBase[]>(`/projects/${project.id}/knowledge-bases`)
+    setLinkedKBs(data)
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const init = async () => {
+      const [{ data: userData }, { data: projectData }] = await Promise.all([
+        api.get<User[]>('/users'),
+        api.get<Project[]>('/projects'),
+      ])
+      setUsers(userData)
+      setProjects(projectData)
+
+      // Knowledge-base linking is only meaningful for an existing project.
+      if (project) {
+        try {
+          const [{ data: kbs }, { data: linked }] = await Promise.all([
+            api.get<KnowledgeBase[]>('/knowledge-bases'),
+            api.get<KnowledgeBase[]>(`/projects/${project.id}/knowledge-bases`),
+          ])
+          setAllKBs(kbs)
+          setLinkedKBs(linked)
+        } catch {
+          setAllKBs([])
+          setLinkedKBs([])
+        }
+      }
+
+      if (project) {
+        setForm({
+          name: project.name,
+          owner_id: project.owner_id,
+          owner_name: project.owner_name || '',
+          description: project.description || '',
+          repo: project.repo || '',
+          sub_projects: project.sub_projects || [],
+          related_projects: project.related_projects || [],
+        })
+      } else {
+        const defaultOwner = userData[0]
+        setForm({
+          ...emptyForm,
+          owner_id: defaultOwner?.id || 1,
+          owner_name: defaultOwner?.username || '',
+        })
+      }
+    }
+
+    init().catch(console.error)
+  }, [isOpen, project])
+
+  const selectableProjects = useMemo(
+    () => projects.filter((p) => p.id !== project?.id && p.project_code),
+    [projects, project?.id]
+  )
+
+  const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
+    const values = Array.from(e.target.selectedOptions).map((o) => o.value)
+    setForm((f) => ({ ...f, [field]: values }))
+  }
+
+  const linkableKBs = useMemo(
+    () => allKBs.filter((kb) => !linkedKBs.some((l) => l.id === kb.id)),
+    [allKBs, linkedKBs]
+  )
+
+  const linkKB = async () => {
+    if (!project || !kbToLink) return
+    try {
+      await api.post(`/projects/${project.id}/knowledge-bases`, { knowledge_base: kbToLink })
+      setKbToLink('')
+      await refreshLinkedKBs()
+    } catch (err: any) {
+      alert(err?.response?.data?.detail || 'Failed to link knowledge base')
+    }
+  }
+
+  const unlinkKB = async (kbId: number) => {
+    if (!project) return
+    try {
+      await api.delete(`/projects/${project.id}/knowledge-bases/${kbId}`)
+      await refreshLinkedKBs()
+    } catch (err: any) {
+      alert(err?.response?.data?.detail || 'Failed to unlink knowledge base')
+    }
+  }
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    try {
+      if (project) {
+        const { data } = await api.patch<Project>(`/projects/${project.id}`, {
+          owner_name: form.owner_name,
+          description: form.description || null,
+          repo: form.repo || null,
+          sub_projects: form.sub_projects,
+          related_projects: form.related_projects,
+        })
+        await onSaved?.(data)
+      } else {
+        const { data } = await api.post<Project>('/projects', {
+          name: form.name,
+          owner_id: form.owner_id,
+          owner_name: form.owner_name,
+          description: form.description || null,
+          repo: form.repo || null,
+          sub_projects: form.sub_projects,
+          related_projects: form.related_projects,
+        })
+        await onSaved?.(data)
+      }
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{project ? 'Edit Project' : 'Create Project'}</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          {!project && (
+            <label>
+              Name
+              <input
+                data-testid="project-name-input"
+                required
+                placeholder="Project name"
+                value={form.name}
+                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+              />
+            </label>
+          )}
+
+          <label>
+            Owner
+            <select
+              data-testid="project-owner-select"
+              value={project ? form.owner_name : String(form.owner_id)}
+              onChange={(e) => {
+                const value = e.target.value
+                const selectedUser = users.find((u) => String(u.id) === value) || users.find((u) => u.username === value)
+                setForm((f) => ({
+                  ...f,
+                  owner_id: selectedUser?.id || f.owner_id,
+                  owner_name: selectedUser?.username || value,
+                }))
+              }}
+            >
+              {users.map((u) => (
+                <option key={u.id} value={project ? u.username : u.id}>{u.username} ({u.full_name || 'No name'})</option>
+              ))}
+            </select>
+          </label>
+
+          <label>
+            Description
+            <textarea
+              data-testid="project-description-input"
+              placeholder="Description (optional)"
+              value={form.description}
+              onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+            />
+          </label>
+
+          <label>
+            Repository URL
+            <input
+              data-testid="project-repo-input"
+              placeholder="Repository URL (optional)"
+              value={form.repo}
+              onChange={(e) => setForm((f) => ({ ...f, repo: e.target.value }))}
+            />
+          </label>
+
+          <label>
+            Sub-projects
+            <select multiple value={form.sub_projects} onChange={(e) => handleMulti(e, 'sub_projects')}>
+              {selectableProjects.map((p) => (
+                <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
+              ))}
+            </select>
+          </label>
+
+          <label>
+            Related projects
+            <select multiple value={form.related_projects} onChange={(e) => handleMulti(e, 'related_projects')}>
+              {selectableProjects.map((p) => (
+                <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
+              ))}
+            </select>
+          </label>
+
+          {project && (
+            <div className="kb-link-section">
+              <label style={{ marginBottom: 4 }}>Knowledge Bases</label>
+              {linkedKBs.length === 0 && <p className="text-dim" style={{ margin: '4px 0' }}>None linked.</p>}
+              <ul className="kb-link-list">
+                {linkedKBs.map((kb) => (
+                  <li key={kb.id}>
+                    <span>{kb.knowledge_base_code ? `${kb.knowledge_base_code} · ` : ''}{kb.title}</span>
+                    <button type="button" className="kb-mini-btn kb-danger" onClick={() => unlinkKB(kb.id)}>remove</button>
+                  </li>
+                ))}
+              </ul>
+              <div className="kb-link-add">
+                <select value={kbToLink} onChange={(e) => setKbToLink(e.target.value)}>
+                  <option value="">— select a knowledge base —</option>
+                  {linkableKBs.map((kb) => (
+                    <option key={kb.id} value={kb.knowledge_base_code || String(kb.id)}>
+                      {kb.knowledge_base_code ? `${kb.knowledge_base_code} · ` : ''}{kb.title}
+                    </option>
+                  ))}
+                </select>
+                <button type="button" className="btn-secondary" disabled={!kbToLink} onClick={linkKB}>Link</button>
+              </div>
+            </div>
+          )}
+
+          <div className="modal-actions">
+            <button type="submit" className="btn-primary" disabled={saving}>{saving ? 'Saving...' : (project ? 'Save' : 'Create')}</button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/Sidebar.tsx

@@ -1,4 +1,8 @@
-import { Link, useLocation } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import { useAuthConfig, oidcLinkHref } from '@/hooks/useAuthConfig'
+import { getLogoUrl } from '@/runtime'
 import type { User } from '@/types'
 
 interface Props {
@@ -8,28 +12,66 @@ interface Props {
 
 export default function Sidebar({ user, onLogout }: Props) {
   const { pathname } = useLocation()
-  const links = [
+  const navigate = useNavigate()
-    { to: '/', icon: '📊', label: '仪表盘' },
+  const { config: authCfg } = useAuthConfig()
-    { to: '/issues', icon: '📋', label: 'Issues' },
+  const [unreadCount, setUnreadCount] = useState(0)
-    { to: '/projects', icon: '📁', label: '项目' },
+
+  useEffect(() => {
+    if (!user) {
+      setUnreadCount(0)
+      return
+    }
+    api.get<{ count: number }>('/notifications/count')
+      .then(({ data }) => setUnreadCount(data.count))
+      .catch(() => {})
+    const timer = setInterval(() => {
+      api.get<{ count: number }>('/notifications/count')
+        .then(({ data }) => setUnreadCount(data.count))
+        .catch(() => {})
+    }, 30000)
+    return () => clearInterval(timer)
+  }, [user])
+
+  const links = user ? [
+    { to: '/', icon: '📊', label: 'Dashboard' },
+    { to: '/projects', icon: '📁', label: 'Projects' },
+    { to: '/knowledge-bases', icon: '📚', label: 'Knowledge Bases' },
+    { to: '/proposals', icon: '💡', label: 'Proposals' },
+    { to: '/calendar', icon: '📅', label: 'Calendar' },
+    { to: '/notifications', icon: '🔔', label: 'Notifications' + (unreadCount > 0 ? ' (' + unreadCount + ')' : '') },
+    { to: '/monitor', icon: '📡', label: 'Monitor' },
+    ...(user.is_admin ? [
+      { to: '/users', icon: '👥', label: 'Users' },
+      { to: '/roles', icon: '🔐', label: 'Roles' },
+      { to: '/settings/oidc', icon: '🪪', label: 'OIDC' },
+    ] : []),
+  ] : [
+    { to: '/monitor', icon: '📡', label: 'Monitor' },
   ]
 
   return (
     <nav className="sidebar">
       <div className="sidebar-header">
-        <h1>⚓ HarborForge</h1>
+        <h1><img src={getLogoUrl()} className="brand-logo" alt="" /> HarborForge</h1>
       </div>
       <ul className="nav-links">
         {links.map((l) => (
-          <li key={l.to} className={pathname === l.to ? 'active' : ''}>
+          <li key={l.to} className={pathname === l.to || (l.to !== '/' && pathname.startsWith(l.to)) ? 'active' : ''}>
             <Link to={l.to}>{l.icon} {l.label}</Link>
           </li>
         ))}
       </ul>
-      {user && (
       <div className="sidebar-footer">
-          <span>👤 {user.username}</span>
+        <span>👤 {user ? user.username : 'Guest'}</span>
-          <button onClick={onLogout}>退出</button>
+        {user ? (
+          <button onClick={onLogout}>Log out</button>
+        ) : (
+          <button onClick={() => navigate('/login')}>Log in</button>
+        )}
+      </div>
+      {user && authCfg.oidcEnabled && !authCfg.oidcOnly && (
+        <div className="sidebar-footer" style={{ borderTop: 'none', paddingTop: 0 }}>
+          <a href={oidcLinkHref()} title="Link your account to an OIDC identity">🔗 Link OIDC account</a>
         </div>
       )}
     </nav>

src/hooks/useAuth.ts

@@ -36,16 +36,24 @@ export function useAuth() {
     const form = new URLSearchParams()
     form.append('username', username)
     form.append('password', password)
-    const { data } = await api.post('/auth/login', form)
+    const { data } = await api.post('/auth/token', form, {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    })
     localStorage.setItem('token', data.access_token)
     setState((s) => ({ ...s, token: data.access_token }))
     await fetchUser()
   }
 
+  const loginWithToken = async (token: string) => {
+    localStorage.setItem('token', token)
+    setState((s) => ({ ...s, token }))
+    await fetchUser()
+  }
+
   const logout = () => {
     localStorage.removeItem('token')
     setState({ user: null, token: null, loading: false })
   }
 
-  return { ...state, login, logout }
+  return { ...state, login, loginWithToken, logout }
 }

src/hooks/useAuthConfig.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react'
+import api from '@/services/api'
+
+export interface AuthConfig {
+  oidcEnabled: boolean
+  oidcOnly: boolean
+  passwordLogin: boolean
+  oidcLoginUrl: string
+}
+
+const DEFAULT: AuthConfig = {
+  oidcEnabled: false,
+  oidcOnly: false,
+  passwordLogin: true,
+  oidcLoginUrl: '/auth/oidc/login',
+}
+
+let cache: AuthConfig | null = null
+let inflight: Promise<AuthConfig> | null = null
+
+async function load(): Promise<AuthConfig> {
+  if (cache) return cache
+  if (inflight) return inflight
+  inflight = api
+    .get('/auth/config')
+    .then(({ data }) => {
+      cache = {
+        oidcEnabled: !!data.oidc_enabled,
+        oidcOnly: !!data.oidc_only,
+        passwordLogin: data.password_login !== false,
+        oidcLoginUrl: data.oidc_login_url || '/auth/oidc/login',
+      }
+      return cache
+    })
+    .catch(() => {
+      // Backend unreachable / old backend without /auth/config:
+      // fall back to password-only so login is never fully blocked.
+      cache = { ...DEFAULT }
+      return cache
+    })
+    .finally(() => {
+      inflight = null
+    })
+  return inflight
+}
+
+/** Absolute backend URL for full-page OIDC redirects. */
+const BACKEND_BASE = import.meta.env.VITE_HF_BACKEND_BASE_URL || ''
+
+export function oidcLoginHref(cfg: AuthConfig): string {
+  return `${BACKEND_BASE}${cfg.oidcLoginUrl}`
+}
+
+export function oidcLinkHref(): string {
+  return `${BACKEND_BASE}/auth/oidc/link`
+}
+
+export function useAuthConfig() {
+  const [config, setConfig] = useState<AuthConfig | null>(cache)
+  const [loading, setLoading] = useState(!cache)
+
+  useEffect(() => {
+    let alive = true
+    load().then((c) => {
+      if (alive) {
+        setConfig(c)
+        setLoading(false)
+      }
+    })
+    return () => {
+      alive = false
+    }
+  }, [])
+
+  return { config: config ?? DEFAULT, loading }
+}

src/index.css

@@ -1,120 +1,834 @@
+/* ============================================================================
+   HarborForge — "FOUNDRY DECK"
+   A shipwright's drafting table meets a foundry control panel.
+   Blackened steel, blueprint grid, molten-ember accent, technical type.
+   Full visual redesign — selectors kept 1:1 with existing markup.
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
+
 :root {
-  --bg: #0f1117;
+  /* core surfaces — blackened, cool-tinted steel */
-  --bg-card: #1a1d27;
+  --bg:        #0b0c0f;
-  --bg-hover: #22252f;
+  --bg-card:   #14161c;
-  --border: #2a2d37;
+  --bg-hover:  #1d212b;
-  --text: #e1e4ea;
+  --bg-sink:   #08090b;          /* recessed inputs / wells */
-  --text-dim: #8b8fa3;
+  --border:    #2b2f3a;
-  --accent: #3b82f6;
+  --border-bright: #3b414f;
-  --accent-hover: #2563eb;
+
-  --success: #10b981;
+  /* ink — warm cast-paper on cold metal */
-  --warning: #f59e0b;
+  --text:      #ece6d8;
-  --danger: #ef4444;
+  --text-dim:  #888f9e;
-  --sidebar-w: 220px;
+
+  /* molten ember — the one unforgettable thing */
+  --accent:        #ff6a1a;
+  --accent-hover:  #ff8636;
+  --ember:   linear-gradient(135deg, #ff7a1f 0%, #ffa83a 100%);
+  --ember-soft: rgba(255, 106, 26, .14);
+  --glow:    0 0 0 1px rgba(255,122,31,.40), 0 10px 34px -10px rgba(255,122,31,.55);
+
+  /* oxidized steel — the cold secondary */
+  --steel:   #56c6d6;
+
+  /* forge-mapped status palette */
+  --success: #46b487;            /* patina */
+  --warning: #efa53c;            /* heat amber */
+  --danger:  #e2553c;            /* rust */
+  --violet:  #9a7bff;            /* arc */
+
+  --sidebar-w: 240px;
+  --hair: 1px solid var(--border);
+  --radius: 4px;                 /* tight, machined corners */
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
 
-/* Layout */
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: 'Hanken Grotesk', system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.55;
+  color: var(--text);
+  background-color: var(--bg);
+  /* layered atmosphere: ember vignette + blueprint grid + grain */
+  background-image:
+    radial-gradient(120% 80% at 78% -10%, rgba(255,122,31,.13), transparent 55%),
+    radial-gradient(90% 70% at 0% 100%, rgba(86,198,214,.06), transparent 60%),
+    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
+  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
+  background-attachment: fixed;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* fine grain overlay over everything */
+body::after {
+  content: '';
+  position: fixed; inset: 0;
+  pointer-events: none; z-index: 9999;
+  opacity: .035;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+h1, h2, h3, h4 {
+  font-family: 'Saira Condensed', 'Hanken Grotesk', sans-serif;
+  font-weight: 600;
+  letter-spacing: .02em;
+  line-height: 1.12;
+  color: var(--text);
+}
+h1 { font-size: 1.55rem; text-transform: uppercase; letter-spacing: .06em; }
+h2 { font-size: 1.4rem; }
+h3 { font-size: 1.1rem; }
+
+code, pre, .mono { font-family: 'JetBrains Mono', monospace; }
+
+a { color: var(--accent); text-decoration: none; transition: color .15s; }
+a:hover { color: var(--accent-hover); text-decoration: none; }
+
+::selection { background: rgba(255,122,31,.32); color: #fff; }
+
+:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,122,31,.6);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar { width: 11px; height: 11px; }
+::-webkit-scrollbar-track { background: var(--bg-sink); }
+::-webkit-scrollbar-thumb { background: #2c313d; border: 3px solid var(--bg-sink); border-radius: 6px; }
+::-webkit-scrollbar-thumb:hover { background: #3c4250; }
+
+input, textarea, select, button { font-family: inherit; }
+
+/* ---- Layout ------------------------------------------------------------- */
 .app-layout { display: flex; min-height: 100vh; }
-.main-content { flex: 1; padding: 24px 32px; margin-left: var(--sidebar-w); }
+.main-content {
-.loading { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 1.2rem; color: var(--text-dim); }
+  flex: 1; padding: 34px 44px; margin-left: var(--sidebar-w);
+  max-width: 1500px;
+  animation: deck-in .5s cubic-bezier(.16,1,.3,1) both;
+}
+.loading {
+  display: flex; align-items: center; justify-content: center; height: 100vh;
+  font-family: 'Saira Condensed', sans-serif; text-transform: uppercase;
+  letter-spacing: .35em; font-size: 1rem; color: var(--text-dim);
+}
+.loading::before { content: '◆ '; color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
 
-/* Sidebar */
+@keyframes deck-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
-.sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 0; }
+@keyframes fadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
-.sidebar-header { padding: 8px 20px 24px; }
+@keyframes pulse   { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
-.sidebar-header h1 { font-size: 1.2rem; }
+@keyframes sheen   { from { background-position: -200% 0; } to { background-position: 200% 0; } }
-.nav-links { list-style: none; flex: 1; }
-.nav-links li a { display: block; padding: 10px 20px; color: var(--text-dim); transition: .15s; }
-.nav-links li a:hover, .nav-links li.active a { background: var(--bg-hover); color: var(--text); text-decoration: none; }
-.sidebar-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--text-dim); }
-.sidebar-footer button { background: none; border: 1px solid var(--border); color: var(--text-dim); padding: 4px 10px; border-radius: 4px; cursor: pointer; }
 
-/* Login */
+@media (prefers-reduced-motion: reduce) {
-.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
+  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
-.login-card { background: var(--bg-card); padding: 40px; border-radius: 12px; border: 1px solid var(--border); width: 360px; text-align: center; }
+}
-.login-card h1 { margin-bottom: 8px; }
-.login-card .subtitle { color: var(--text-dim); margin-bottom: 24px; }
-.login-card form { display: flex; flex-direction: column; gap: 12px; }
-.login-card input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem; }
-.login-card button { padding: 10px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; }
-.login-card button:hover { background: var(--accent-hover); }
-.error { color: var(--danger); font-size: .85rem; }
 
-/* Stats */
+/* ---- Sidebar ------------------------------------------------------------ */
-.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 24px; }
+.sidebar {
-.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 16px; text-align: center; }
+  position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh;
-.stat-card.total { border-left-color: var(--success); }
+  background:
-.stat-number { display: block; font-size: 1.8rem; font-weight: 700; }
+    linear-gradient(180deg, #15171e, #101218);
-.stat-label { display: block; font-size: .8rem; color: var(--text-dim); margin-top: 4px; text-transform: capitalize; }
+  border-right: var(--hair);
+  display: flex; flex-direction: column; padding: 0 0 14px;
+  z-index: 50;
+}
+.sidebar::before {       /* hot edge line */
+  content: ''; position: absolute; top: 0; right: -1px; width: 2px; height: 100%;
+  background: linear-gradient(180deg, transparent, rgba(255,122,31,.5), transparent);
+}
+.sidebar-header { padding: 26px 22px 22px; border-bottom: var(--hair); }
+.sidebar-header h1 {
+  font-size: 1.3rem; letter-spacing: .12em;
+  display: flex; align-items: center; gap: 8px;
+}
+/* Brand logo (overridable via HARBORFORGE_LOGO_URL / public/logo.svg) */
+.brand-logo {
+  height: 1.15em; width: auto; vertical-align: -0.18em;
+  display: inline-block; flex: 0 0 auto;
+}
+.login-card h1 .brand-logo, .setup-header h1 .brand-logo { height: 1.4em; }
+.nav-links { list-style: none; flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
+.nav-links li a {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; border-radius: var(--radius);
+  color: var(--text-dim); font-size: .82rem;
+  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
+  position: relative; transition: .15s;
+}
+.nav-links li a:hover { color: var(--text); background: var(--bg-hover); }
+.nav-links li.active a {
+  color: var(--text); background: var(--ember-soft);
+}
+.nav-links li.active a::before {
+  content: ''; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px;
+  background: var(--ember); border-radius: 0 3px 3px 0;
+  box-shadow: 0 0 12px rgba(255,122,31,.7);
+}
+.sidebar-footer {
+  margin: 0 12px; padding: 14px; border-top: var(--hair);
+  display: flex; justify-content: space-between; align-items: center;
+  font-size: .8rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace;
+}
+.sidebar-footer button {
+  background: none; border: var(--hair); color: var(--text-dim);
+  padding: 5px 11px; border-radius: var(--radius); cursor: pointer;
+  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; transition: .15s;
+}
+.sidebar-footer button:hover { border-color: var(--accent); color: var(--accent); }
 
-/* Bar chart */
+/* ---- Login -------------------------------------------------------------- */
-.bar-chart { margin: 12px 0; }
+.login-page {
-.bar-row { display: flex; align-items: center; margin: 6px 0; }
+  display: flex; align-items: center; justify-content: center;
-.bar-label { width: 70px; font-size: .85rem; color: var(--text-dim); text-transform: capitalize; }
+  min-height: 100vh; padding: 24px;
-.bar { padding: 4px 10px; border-radius: 4px; color: #fff; font-size: .8rem; min-width: 30px; text-align: right; transition: .3s; }
+}
+.login-card {
+  position: relative; background: var(--bg-card); padding: 46px 42px;
+  border: var(--hair); border-radius: 6px; width: 380px; text-align: center;
+  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
+  animation: deck-in .55s cubic-bezier(.16,1,.3,1) both;
+}
+.login-card::before {    /* molten top edge */
+  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
+  background: var(--ember); border-radius: 6px 6px 0 0;
+}
+.login-card::after {     /* corner draftsman tick */
+  content: ''; position: absolute; right: 14px; bottom: 14px; width: 14px; height: 14px;
+  border-right: 2px solid var(--border-bright); border-bottom: 2px solid var(--border-bright);
+}
+.login-card h1 { margin-bottom: 6px; letter-spacing: .1em; }
+.login-card .subtitle, .setup-header p {
+  color: var(--text-dim); margin-bottom: 28px; font-size: .82rem;
+  text-transform: uppercase; letter-spacing: .14em;
+}
+.login-card form, .setup-form { display: flex; flex-direction: column; gap: 14px; }
+.login-card input {
+  padding: 12px 14px; border: var(--hair); border-radius: var(--radius);
+  background: var(--bg-sink); color: var(--text); font-size: .95rem; transition: .15s;
+}
+.login-card input::placeholder { color: #5b6170; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
+.login-card input:focus { border-color: var(--accent); background: var(--bg); }
+.login-card button, .setup-nav button {
+  padding: 12px; background: var(--ember); color: #1a0d02; border: none;
+  border-radius: var(--radius); font-size: .9rem; cursor: pointer;
+  font-family: 'Saira Condensed', sans-serif; font-weight: 700;
+  text-transform: uppercase; letter-spacing: .14em; transition: .18s;
+}
+.login-card button:hover, .setup-nav button:hover { box-shadow: var(--glow); transform: translateY(-1px); }
+.login-card button:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
+.error { color: var(--danger); font-size: .82rem; font-family: 'JetBrains Mono', monospace; }
 
-/* Table */
+/* ---- Stats -------------------------------------------------------------- */
-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 18px 0 28px; }
-thead th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border); color: var(--text-dim); font-size: .8rem; text-transform: uppercase; }
+.stat-card {
-tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
+  position: relative; background: var(--bg-card); border: var(--hair);
-tr.clickable { cursor: pointer; }
+  border-radius: var(--radius); padding: 20px 18px; overflow: hidden;
-tr.clickable:hover { background: var(--bg-hover); }
+  transition: .18s; animation: deck-in .5s cubic-bezier(.16,1,.3,1) both;
-.issue-title { font-weight: 500; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+.stat-card::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ember);
+}
+.stat-card.total::before { background: var(--steel); }
+.stat-card:hover { transform: translateY(-3px); border-color: var(--border-bright); box-shadow: 0 16px 30px -18px rgba(0,0,0,.8); }
+.stat-card:nth-child(2) { animation-delay: .05s; }
+.stat-card:nth-child(3) { animation-delay: .1s; }
+.stat-card:nth-child(4) { animation-delay: .15s; }
+.stat-card:nth-child(5) { animation-delay: .2s; }
+.stat-number {
+  display: block; font-family: 'Saira Condensed', sans-serif; font-size: 2.4rem;
+  font-weight: 700; line-height: 1; color: var(--text);
+}
+.stat-label {
+  display: block; font-size: .68rem; color: var(--text-dim); margin-top: 8px;
+  text-transform: uppercase; letter-spacing: .16em;
+}
 
-/* Badges */
+/* ---- Bar chart ---------------------------------------------------------- */
-.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; text-transform: capitalize; color: #fff; background: var(--text-dim); }
+.bar-chart { margin: 14px 0; }
-.status-open { background: #3b82f6; }
+.bar-row { display: flex; align-items: center; margin: 7px 0; }
-.status-in_progress { background: #f59e0b; }
+.bar-label { width: 80px; font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
-.status-resolved { background: #10b981; }
+.bar {
-.status-closed { background: #6b7280; }
+  padding: 5px 11px; border-radius: 2px; color: #fff;
-.status-blocked { background: #ef4444; }
+  font-family: 'JetBrains Mono', monospace; font-size: .76rem;
-.priority-low { background: #6b7280; }
+  min-width: 30px; text-align: right; transition: width .5s cubic-bezier(.16,1,.3,1);
-.priority-medium { background: #3b82f6; }
+}
-.priority-high { background: #f59e0b; }
-.priority-critical { background: #ef4444; }
 
-/* Page header */
+/* ---- Tables ------------------------------------------------------------- */
-.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+table { width: 100%; border-collapse: collapse; margin-top: 14px; }
-.btn-primary { background: var(--accent); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
+thead th {
-.btn-primary:hover { background: var(--accent-hover); }
+  text-align: left; padding: 11px 14px; border-bottom: 2px solid var(--border-bright);
-.btn-back { background: none; border: 1px solid var(--border); color: var(--text-dim); padding: 6px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 16px; }
+  color: var(--text-dim); font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
+  font-weight: 700;
+}
+tbody td { padding: 12px 14px; border-bottom: var(--hair); font-size: .9rem; }
+tbody tr:last-child td { border-bottom: none; }
+tr.clickable { cursor: pointer; transition: .12s; }
+tr.clickable:hover { background: var(--ember-soft); }
+tr.clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
+.task-title { font-weight: 600; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-/* Filters */
+/* ---- Badges ------------------------------------------------------------- */
-.filters { margin-bottom: 12px; display: flex; gap: 8px; }
+.badge {
-.filters select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); }
+  display: inline-block; padding: 3px 9px; border-radius: 2px;
+  font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: .06em;
+  color: #0b0c0f; background: var(--text-dim);
+  border: 1px solid rgba(255,255,255,.12);
+}
+.status-open        { background: #5b8def; color: #fff; }
+.status-in_progress { background: var(--ember); }
+.status-undergoing  { background: var(--ember); }
+.status-resolved    { background: var(--success); color: #04130d; }
+.status-completed   { background: var(--success); color: #04130d; }
+.status-closed      { background: #5a616f; color: #fff; }
+.status-blocked     { background: var(--danger); color: #fff; }
+.status-freeze      { background: var(--steel); color: #042127; }
+.status-pending     { background: var(--warning); }
+.priority-low       { background: #5a616f; color: #fff; }
+.priority-medium    { background: #5b8def; color: #fff; }
+.priority-high      { background: var(--warning); }
+.priority-critical  { background: var(--danger); color: #fff; }
 
-/* Pagination */
+/* ---- Page header / buttons --------------------------------------------- */
-.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
+.page-header {
-.pagination button { padding: 6px 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 6px; cursor: pointer; }
+  display: flex; justify-content: space-between; align-items: center;
-.pagination button:disabled { opacity: .4; cursor: default; }
+  margin-bottom: 22px; padding-bottom: 16px; border-bottom: var(--hair);
+}
+.page-header h2 { letter-spacing: .04em; }
+.btn-primary {
+  background: var(--ember); color: #1a0d02; border: none;
+  padding: 9px 18px; border-radius: var(--radius); cursor: pointer;
+  font-family: 'Saira Condensed', sans-serif; font-weight: 700;
+  font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; transition: .18s;
+}
+.btn-primary:hover { box-shadow: var(--glow); transform: translateY(-1px); }
+.btn-back {
+  background: none; border: var(--hair); color: var(--text-dim);
+  padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
+  margin-bottom: 18px; font-size: .8rem; text-transform: uppercase;
+  letter-spacing: .08em; transition: .15s;
+}
+.btn-back:hover { border-color: var(--accent); color: var(--accent); }
 
-/* Issue detail */
+/* ---- Filters / pagination ---------------------------------------------- */
-.issue-header { margin-bottom: 20px; }
+.filters { margin-bottom: 14px; display: flex; gap: 8px; }
-.issue-header h2 { margin-bottom: 8px; }
+.filters select, .inline-form select, .inline-form input {
-.issue-meta { display: flex; gap: 8px; flex-wrap: wrap; }
+  padding: 8px 12px; border: var(--hair); border-radius: var(--radius);
-.tags { color: var(--accent); font-size: .85rem; }
+  background: var(--bg-card); color: var(--text); font-size: .88rem; transition: .15s;
-.section { margin: 20px 0; }
+}
-.section h3 { margin-bottom: 8px; color: var(--text-dim); font-size: .9rem; text-transform: uppercase; }
+.filters select:focus, .inline-form select:focus, .inline-form input:focus { border-color: var(--accent); }
-dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px; }
+.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
-dt { color: var(--text-dim); font-size: .85rem; }
+.pagination button {
-dd { font-size: .9rem; }
+  padding: 7px 16px; border: var(--hair); background: var(--bg-card); color: var(--text);
+  border-radius: var(--radius); cursor: pointer; font-size: .82rem;
+  text-transform: uppercase; letter-spacing: .06em; transition: .15s;
+}
+.pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.pagination button:disabled { opacity: .35; cursor: default; }
+
+/* ---- Task / detail ------------------------------------------------------ */
+.task-header { margin-bottom: 24px; }
+.task-header h2 { margin-bottom: 10px; }
+.task-meta { display: flex; gap: 8px; flex-wrap: wrap; }
+.tags { color: var(--steel); font-size: .82rem; font-family: 'JetBrains Mono', monospace; }
+.section { margin: 26px 0; }
+.section h3 {
+  margin-bottom: 12px; color: var(--text-dim); font-size: .72rem;
+  text-transform: uppercase; letter-spacing: .2em;
+  padding-bottom: 8px; border-bottom: var(--hair);
+}
+dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; }
+dt { color: var(--text-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; padding-top: 2px; }
+dd { font-size: .92rem; font-family: 'JetBrains Mono', monospace; }
 .actions { display: flex; gap: 8px; }
-.btn-transition { padding: 6px 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 6px; cursor: pointer; text-transform: capitalize; }
+.btn-transition {
-.btn-transition:hover { background: var(--bg-hover); }
+  padding: 7px 15px; border: var(--hair); background: var(--bg-card); color: var(--text);
+  border-radius: var(--radius); cursor: pointer; text-transform: uppercase;
+  font-size: .78rem; letter-spacing: .08em; transition: .15s;
+}
+.btn-transition:hover { border-color: var(--accent); color: var(--accent); background: var(--ember-soft); }
 
-/* Comments */
+/* ---- Comments ----------------------------------------------------------- */
-.comment { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
+.comment {
-.comment-meta { font-size: .8rem; color: var(--text-dim); margin-bottom: 4px; }
+  background: var(--bg-card); border: var(--hair); border-left: 3px solid var(--border-bright);
-.comment-form { margin-top: 12px; }
+  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
-.comment-form textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); resize: vertical; margin-bottom: 8px; }
+}
-.comment-form button { padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
+.comment:hover { border-left-color: var(--accent); }
+.comment-meta { font-size: .74rem; color: var(--text-dim); margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; }
+.comment-form { margin-top: 14px; }
+.comment-form textarea {
+  width: 100%; min-height: 88px; padding: 12px; border: var(--hair);
+  border-radius: var(--radius); background: var(--bg-sink); color: var(--text);
+  resize: vertical; margin-bottom: 10px; transition: .15s;
+}
+.comment-form textarea:focus { border-color: var(--accent); }
+.comment-form button {
+  padding: 9px 18px; background: var(--ember); color: #1a0d02; border: none;
+  border-radius: var(--radius); cursor: pointer; font-family: 'Saira Condensed', sans-serif;
+  font-weight: 700; text-transform: uppercase; letter-spacing: .1em; transition: .18s;
+}
+.comment-form button:hover { box-shadow: var(--glow); }
 
-/* Create Issue form */
+/* ---- Forms / modal ------------------------------------------------------ */
-.create-issue form { max-width: 600px; display: flex; flex-direction: column; gap: 14px; }
+.create-task form, .task-create-form { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
-.create-issue label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
+.create-task label, .task-create-form label, .setup-form label {
-.create-issue input, .create-issue textarea, .create-issue select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem; }
+  display: flex; flex-direction: column; gap: 6px; font-size: .7rem;
-.create-issue textarea { min-height: 100px; resize: vertical; }
+  color: var(--text-dim); text-transform: uppercase; letter-spacing: .12em;
+}
+.create-task input, .create-task textarea, .create-task select,
+.task-create-form input, .task-create-form textarea, .task-create-form select,
+.setup-form input {
+  padding: 10px 13px; border: var(--hair); border-radius: var(--radius);
+  background: var(--bg-sink); color: var(--text); font-size: .92rem;
+  font-family: inherit; transition: .15s;
+}
+.create-task input:focus, .create-task textarea:focus, .create-task select:focus,
+.task-create-form input:focus, .task-create-form textarea:focus, .task-create-form select:focus,
+.setup-form input:focus { border-color: var(--accent); background: var(--bg); }
+.create-task textarea, .task-create-form textarea { min-height: 110px; resize: vertical; }
+.task-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(4,5,7,.78);
+  backdrop-filter: blur(3px); display: flex; align-items: center;
+  justify-content: center; z-index: 1000; padding: 24px;
+  animation: fadeIn .2s ease;
+}
+.modal {
+  position: relative; width: min(720px, 100%); max-height: calc(100vh - 48px);
+  overflow: auto; background: var(--bg-card); border: var(--hair);
+  border-radius: 6px; padding: 26px;
+  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85);
+  animation: deck-in .35s cubic-bezier(.16,1,.3,1) both;
+}
+.modal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ember); border-radius: 6px 6px 0 0; }
+.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: var(--hair); }
+.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
+
+/* ---- Cards (project / milestone) --------------------------------------- */
+.project-grid, .milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin-top: 18px; }
+.project-card, .milestone-card {
+  position: relative; background: var(--bg-card); border: var(--hair);
+  border-radius: var(--radius); padding: 22px; cursor: pointer;
+  transition: .2s; overflow: hidden;
+  animation: deck-in .5s cubic-bezier(.16,1,.3,1) both;
+}
+.project-card::after, .milestone-card::after {   /* draftsman corner tick */
+  content: ''; position: absolute; right: 12px; top: 12px; width: 10px; height: 10px;
+  border-top: 2px solid var(--border-bright); border-right: 2px solid var(--border-bright);
+  transition: .2s;
+}
+.project-card:hover, .milestone-card:hover {
+  border-color: var(--accent); background: var(--bg-hover);
+  transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(0,0,0,.85);
+}
+.project-card:hover::after, .milestone-card:hover::after { border-color: var(--accent); }
+.project-card h3, .milestone-card h3 { margin-bottom: 10px; }
+.project-desc { color: var(--text-dim); font-size: .88rem; margin-bottom: 14px; }
+.project-meta { font-size: .72rem; color: var(--text-dim); display: flex; gap: 14px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
+.milestone-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.milestone-item { display: flex; align-items: center; gap: 10px; padding: 11px 8px; border-bottom: var(--hair); cursor: pointer; transition: .12s; }
+.milestone-item:hover { background: var(--ember-soft); box-shadow: inset 3px 0 0 var(--accent); }
+.milestone-title { font-weight: 600; }
+
+/* ---- Progress bar ------------------------------------------------------- */
+.progress-bar-container {
+  width: 100%; height: 18px; background: var(--bg-sink); border-radius: 2px;
+  overflow: hidden; border: var(--hair);
+}
+.progress-bar {
+  height: 100%; background: var(--ember);
+  background-image: linear-gradient(135deg, #ff7a1f, #ffa83a), linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
+  background-size: 100% 100%, 200% 100%;
+  color: #1a0d02; font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700;
+  display: flex; align-items: center; justify-content: center; min-width: 28px;
+  transition: width .6s cubic-bezier(.16,1,.3,1);
+  animation: sheen 2.6s linear infinite;
+}
+
+/* ---- Notifications ------------------------------------------------------ */
+.notification-list { margin-top: 18px; border: var(--hair); border-radius: var(--radius); overflow: hidden; }
+.notification-item { display: flex; gap: 14px; padding: 14px 18px; border-bottom: var(--hair); cursor: pointer; transition: .12s; }
+.notification-item:last-child { border-bottom: none; }
+.notification-item:hover { background: var(--bg-hover); }
+.notification-item.unread { background: var(--ember-soft); box-shadow: inset 3px 0 0 var(--accent); }
+.notification-dot { width: 12px; color: var(--accent); font-size: .55rem; padding-top: 5px; }
+.notification-body p { margin-bottom: 4px; }
+
+/* ---- Misc helpers ------------------------------------------------------- */
+.inline-form { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
+.filter-check { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: .82rem; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; }
+.member-list { display: flex; gap: 8px; flex-wrap: wrap; }
+.empty {
+  color: var(--text-dim); padding: 28px 0; text-align: center;
+  font-family: 'Saira Condensed', sans-serif; text-transform: uppercase;
+  letter-spacing: .24em; font-size: .9rem;
+}
+.empty::before { content: '— '; color: var(--accent); }
+.empty::after  { content: ' —'; color: var(--accent); }
+.text-dim { color: var(--text-dim); font-size: .82rem; }
+
+/* ---- Monitor ------------------------------------------------------------ */
+.monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; margin-top: 14px; }
+.monitor-card {
+  position: relative; background: var(--bg-card); border: var(--hair);
+  border-radius: var(--radius); padding: 18px; overflow: hidden;
+  animation: deck-in .5s cubic-bezier(.16,1,.3,1) both;
+}
+.monitor-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--steel); }
+.monitor-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
+.monitor-metrics { margin: 10px 0; font-size: .86rem; font-family: 'JetBrains Mono', monospace; }
+.monitor-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
+.status-ok      { background: var(--success); color: #04130d; }
+.status-error   { background: var(--danger); color: #fff; }
+.status-pending { background: var(--warning); }
+.status-online  { background: var(--success); color: #04130d; }
+.status-offline { background: #5a616f; color: #fff; }
+
+/* ---- Secondary / danger buttons ---------------------------------------- */
+.btn-secondary {
+  background: none; border: var(--hair); color: var(--text);
+  padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
+  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; transition: .15s;
+}
+.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
+.btn-danger {
+  background: var(--danger); color: #fff; border: none;
+  padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
+  font-family: 'Saira Condensed', sans-serif; font-weight: 700;
+  text-transform: uppercase; letter-spacing: .1em; transition: .15s;
+}
+.btn-danger:hover { box-shadow: 0 8px 24px -8px rgba(226,85,60,.6); transform: translateY(-1px); }
+
+/* ---- Tabs --------------------------------------------------------------- */
+.tabs { display: flex; gap: 2px; border-bottom: var(--hair); margin-bottom: 20px; }
+.tab {
+  background: none; border: none; padding: 11px 18px; color: var(--text-dim);
+  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
+  font-family: 'Saira Condensed', sans-serif; font-weight: 600;
+  font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; transition: .15s;
+}
+.tab:hover { color: var(--text); }
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab-content { margin-top: 18px; animation: fadeIn .25s ease; }
+
+/* ---- Role Editor -------------------------------------------------------- */
+.role-editor-page { animation: deck-in .35s cubic-bezier(.16,1,.3,1) both; }
+.role-editor-page h2 { display: flex; align-items: center; gap: 10px; }
+.role-editor-page .lead {
+  color: var(--text-dim); font-size: .82rem;
+  text-transform: uppercase; letter-spacing: .12em; margin: 8px 0 22px;
+}
+
+.role-editor-banner {
+  border: var(--hair); border-radius: var(--radius);
+  padding: 12px 16px; margin-bottom: 18px;
+  font-family: 'JetBrains Mono', monospace; font-size: .85rem;
+  display: flex; align-items: center; gap: 10px;
+  animation: fadeIn .25s ease;
+}
+.role-editor-banner.ok    { background: rgba(70,180,135,.10); border-color: var(--success); color: var(--success); }
+.role-editor-banner.err   { background: rgba(226,85,60,.10);  border-color: var(--danger);  color: var(--danger);  }
+
+.role-editor-create {
+  background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
+  padding: 22px 22px 18px; margin-bottom: 22px;
+  position: relative; max-width: 480px;
+  animation: fadeIn .2s ease;
+}
+.role-editor-create::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: var(--ember); border-radius: var(--radius) 0 0 var(--radius);
+}
+.role-editor-create h3 { margin-bottom: 14px; font-size: 1.05rem; letter-spacing: .04em; }
+.role-editor-create label {
+  display: block; margin-bottom: 5px;
+  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
+  color: var(--text-dim); font-family: 'JetBrains Mono', monospace;
+}
+.role-editor-create input {
+  width: 100%; padding: 9px 12px; margin-bottom: 14px;
+  background: var(--bg-sink); color: var(--text);
+  border: var(--hair); border-radius: var(--radius);
+  font-family: inherit; font-size: .9rem; transition: .15s;
+}
+.role-editor-create input:focus { border-color: var(--accent); outline: none; }
+.role-editor-create .actions { display: flex; gap: 8px; }
+
+/* ---- two-column body ---- */
+.role-editor-grid {
+  display: grid; grid-template-columns: 280px 1fr; gap: 22px;
+  align-items: start;
+}
+@media (max-width: 980px) {
+  .role-editor-grid { grid-template-columns: 1fr; }
+}
+
+.role-editor-sidebar h3,
+.role-editor-detail h3 {
+  font-size: .82rem; text-transform: uppercase; letter-spacing: .14em;
+  color: var(--text-dim); margin-bottom: 12px;
+  border-bottom: var(--hair); padding-bottom: 8px;
+}
+.role-editor-detail h3 .name {
+  color: var(--accent); font-family: 'JetBrains Mono', monospace;
+  letter-spacing: .04em; text-transform: none;
+}
+
+.role-list { display: flex; flex-direction: column; gap: 8px; }
+.role-card {
+  position: relative; padding: 12px 14px;
+  background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
+  cursor: pointer; transition: .15s; overflow: hidden;
+}
+.role-card:hover { background: var(--bg-hover); border-color: var(--border-bright); }
+.role-card.active {
+  background: var(--ember-soft); border-color: var(--accent);
+  box-shadow: var(--glow);
+}
+.role-card.active::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: var(--ember);
+}
+.role-card .role-name {
+  font-family: 'Saira Condensed', sans-serif; font-weight: 700;
+  font-size: .98rem; color: var(--text); letter-spacing: .04em;
+  display: flex; align-items: center; gap: 6px;
+}
+.role-card .role-desc {
+  color: var(--text-dim); font-size: .78rem; margin-top: 3px;
+  line-height: 1.35;
+}
+.role-card .role-meta {
+  color: var(--steel); font-size: .68rem; margin-top: 6px;
+  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
+}
+.role-card .role-badge-global {
+  font-size: .72rem; color: var(--warning);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* ---- permissions ---- */
+.perm-group {
+  background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
+  padding: 14px 16px 16px; margin-bottom: 14px;
+}
+.perm-group-header {
+  font-family: 'Saira Condensed', sans-serif; font-weight: 600;
+  font-size: .85rem; text-transform: uppercase; letter-spacing: .14em;
+  color: var(--steel); margin-bottom: 12px;
+  padding-bottom: 8px; border-bottom: 1px dashed var(--border);
+}
+.perm-grid {
+  display: grid; gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+}
+.perm-item {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 9px 11px;
+  background: var(--bg-sink); border: 1px solid var(--border); border-radius: 3px;
+  cursor: pointer; transition: .12s;
+  user-select: none;
+}
+.perm-item:hover { background: var(--bg-hover); border-color: var(--border-bright); }
+.perm-item.checked {
+  background: var(--ember-soft);
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px rgba(255,122,31,.18);
+}
+.perm-item input[type="checkbox"] {
+  appearance: none; -webkit-appearance: none;
+  width: 14px; height: 14px; margin-top: 2px;
+  background: var(--bg); border: 1px solid var(--border-bright);
+  border-radius: 2px; cursor: pointer; flex: 0 0 14px;
+  position: relative; transition: .12s;
+}
+.perm-item input[type="checkbox"]:checked {
+  background: var(--accent); border-color: var(--accent);
+}
+.perm-item input[type="checkbox"]:checked::after {
+  content: ''; position: absolute; left: 3px; top: 0px;
+  width: 4px; height: 8px;
+  border: solid #1a0d02; border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.perm-item .perm-body { min-width: 0; }
+.perm-item .perm-name {
+  font-family: 'JetBrains Mono', monospace; font-size: .82rem;
+  color: var(--text); font-weight: 500; word-break: break-word;
+}
+.perm-item.checked .perm-name { color: var(--accent); }
+.perm-item .perm-desc {
+  color: var(--text-dim); font-size: .72rem; line-height: 1.35; margin-top: 2px;
+}
+
+.role-editor-template {
+  display: flex; align-items: center; gap: 10px;
+  background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
+  padding: 10px 14px; margin-bottom: 14px;
+  font-size: .82rem;
+}
+.role-editor-template label {
+  color: var(--text-dim); text-transform: uppercase;
+  letter-spacing: .12em; font-size: .72rem;
+  font-family: 'JetBrains Mono', monospace;
+  white-space: nowrap;
+}
+.role-editor-template select {
+  flex: 1; min-width: 0;
+  padding: 7px 10px;
+  background: var(--bg-sink); color: var(--text);
+  border: var(--hair); border-radius: var(--radius);
+  font-family: 'JetBrains Mono', monospace; font-size: .82rem;
+  cursor: pointer; transition: .12s;
+}
+.role-editor-template select:hover  { border-color: var(--border-bright); }
+.role-editor-template select:focus  { border-color: var(--accent); outline: none; }
+.role-editor-template button:disabled {
+  opacity: .4; cursor: not-allowed; border-color: var(--border);
+}
+
+.role-editor-actions {
+  display: flex; gap: 10px; margin-top: 22px;
+  padding-top: 18px; border-top: var(--hair);
+}
+
+.role-editor-empty {
+  background: var(--bg-card); border: 1px dashed var(--border);
+  border-radius: var(--radius); padding: 40px 28px;
+  text-align: center; color: var(--text-dim);
+  font-family: 'JetBrains Mono', monospace; font-size: .85rem;
+}
+
+/* ---- Responsive --------------------------------------------------------- */
+@media (max-width: 860px) {
+  :root { --sidebar-w: 0px; }
+  .sidebar { transform: translateX(-100%); }
+  .main-content { padding: 22px 18px; }
+  .task-create-grid { grid-template-columns: 1fr; }
+}
+
+/* ── Knowledge Base tree (browse + structure edit) ───────────────────── */
+.kb-tree {
+  background: var(--bg-card);
+  border: var(--hair);
+  border-radius: 8px;
+  padding: 16px 18px;
+  max-width: 960px;
+}
+.kb-tree-toolbar { margin-bottom: 14px; }
+
+.kb-node { margin: 0; }
+
+/* Each topic is a self-contained block */
+.kb-topic {
+  border: var(--hair);
+  border-radius: 6px;
+  background: var(--bg-sink);
+  padding: 10px 14px;
+  margin-bottom: 12px;
+}
+.kb-topic:last-child { margin-bottom: 0; }
+
+.kb-node-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  min-height: 30px;
+}
+.kb-node-title { color: var(--text); font-weight: 600; font-size: .94rem; }
+.kb-topic-title {
+  color: var(--accent);
+  font-family: 'Saira Condensed', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+.kb-category > .kb-node-header > .kb-node-title { color: var(--steel); }
+
+/* Nested children indent under a guide line */
+.kb-children {
+  margin: 6px 0 0 6px;
+  padding-left: 16px;
+  border-left: 2px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kb-category { padding: 3px 0; }
+
+.kb-fact {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  font-size: .9rem;
+  color: var(--text);
+  border-radius: var(--radius);
+}
+.kb-fact:hover { background: var(--bg-hover); }
+.kb-bullet { color: var(--accent); }
+.kb-fact-text { flex: 1; min-width: 0; word-break: break-word; }
+.kb-row-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
+/* reveal node actions on hover to keep the tree calm */
+.kb-node-header .kb-row-actions,
+.kb-fact .kb-row-actions { opacity: 0; transition: opacity .12s; }
+.kb-node-header:hover .kb-row-actions,
+.kb-topic:hover > .kb-node-header > .kb-row-actions,
+.kb-fact:hover .kb-row-actions { opacity: 1; }
+.kb-mini-btn {
+  background: transparent;
+  border: var(--hair);
+  color: var(--text-dim);
+  border-radius: var(--radius);
+  padding: 2px 8px;
+  font-size: .78rem;
+  cursor: pointer;
+  transition: .12s;
+  white-space: nowrap;
+}
+.kb-mini-btn:hover { border-color: var(--accent); color: var(--accent); }
+.kb-mini-btn.kb-danger:hover { border-color: var(--danger); color: var(--danger); }
+.kb-mini-btn:disabled { opacity: .5; cursor: default; }
+.kb-inline-form { display: inline-flex; gap: 4px; align-items: center; }
+.kb-inline-form input {
+  background: var(--bg-sink);
+  border: var(--hair);
+  color: var(--text);
+  border-radius: var(--radius);
+  padding: 2px 8px;
+  font-size: .9rem;
+}
+.kb-inline-grow { flex: 1; }
+.kb-inline-grow input { flex: 1; }
+
+/* Project-modal: linked knowledge bases */
+.kb-link-section { border-top: var(--hair); padding-top: 12px; margin-top: 4px; }
+.kb-link-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
+.kb-link-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; }
+.kb-link-add { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
+.kb-link-add select { flex: 1; }
+
+/* KB node edit form (name + description) and description display */
+.kb-edit-form { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; }
+.kb-edit-form input,
+.kb-edit-form textarea {
+  background: var(--bg-sink);
+  border: var(--hair);
+  color: var(--text);
+  border-radius: var(--radius);
+  padding: 4px 8px;
+  font: inherit;
+  font-size: .9rem;
+}
+.kb-edit-form textarea { resize: vertical; }
+.kb-node-desc {
+  color: var(--text-dim);
+  font-size: .85rem;
+  margin: 4px 0 2px 22px;
+  white-space: pre-wrap;
+  line-height: 1.45;
+}

src/pages/CalendarPage.tsx

@@ -0,0 +1,851 @@
+import { useState, useEffect } from 'react'
+import api from '@/services/api'
+import dayjs from 'dayjs'
+
+// Types for Calendar entities
+type SlotType = 'work' | 'on_call' | 'entertainment' | 'system'
+type EventType = 'job' | 'entertainment' | 'system_event'
+type SlotStatus = 'not_started' | 'ongoing' | 'deferred' | 'skipped' | 'paused' | 'finished' | 'aborted'
+
+interface TimeSlotResponse {
+  slot_id: string  // real int id or "plan-{planId}-{date}" for virtual
+  date: string
+  slot_type: SlotType
+  estimated_duration: number
+  scheduled_at: string  // HH:mm
+  started_at: string | null
+  attended: boolean
+  actual_duration: number | null
+  event_type: EventType | null
+  event_data: Record<string, any> | null
+  priority: number
+  status: SlotStatus
+  plan_id: number | null
+  is_virtual: boolean
+  created_at: string | null
+  updated_at: string | null
+}
+
+interface DayViewResponse {
+  date: string
+  user_id: number
+  slots: TimeSlotResponse[]
+}
+
+interface SchedulePlanResponse {
+  id: number
+  slot_type: SlotType
+  estimated_duration: number
+  event_type: string | null
+  event_data: Record<string, any> | null
+  at_time: string
+  on_day: string | null
+  on_week: number | null
+  on_month: string | null
+  is_active: boolean
+  created_at: string
+  updated_at: string | null
+}
+
+interface PlanListResponse {
+  plans: SchedulePlanResponse[]
+}
+
+type Weekday = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+type MonthName = 'jan' | 'feb' | 'mar' | 'apr' | 'may' | 'jun' | 'jul' | 'aug' | 'sep' | 'oct' | 'nov' | 'dec'
+
+interface WorkloadWarning {
+  period: string
+  slot_type: string
+  current: number
+  minimum: number
+  message: string
+}
+
+interface ScheduleResponse {
+  slot: TimeSlotResponse
+  warnings: WorkloadWarning[]
+}
+
+const SLOT_TYPES: { value: SlotType; label: string }[] = [
+  { value: 'work', label: 'Work' },
+  { value: 'on_call', label: 'On Call' },
+  { value: 'entertainment', label: 'Entertainment' },
+  { value: 'system', label: 'System' },
+]
+
+const EVENT_TYPES: { value: EventType; label: string }[] = [
+  { value: 'job', label: 'Job' },
+  { value: 'entertainment', label: 'Entertainment' },
+  { value: 'system_event', label: 'System Event' },
+]
+
+const WEEKDAYS: { value: Weekday; label: string }[] = [
+  { value: 'sun', label: 'Sunday' },
+  { value: 'mon', label: 'Monday' },
+  { value: 'tue', label: 'Tuesday' },
+  { value: 'wed', label: 'Wednesday' },
+  { value: 'thu', label: 'Thursday' },
+  { value: 'fri', label: 'Friday' },
+  { value: 'sat', label: 'Saturday' },
+]
+
+const MONTHS: { value: MonthName; label: string }[] = [
+  { value: 'jan', label: 'January' },
+  { value: 'feb', label: 'February' },
+  { value: 'mar', label: 'March' },
+  { value: 'apr', label: 'April' },
+  { value: 'may', label: 'May' },
+  { value: 'jun', label: 'June' },
+  { value: 'jul', label: 'July' },
+  { value: 'aug', label: 'August' },
+  { value: 'sep', label: 'September' },
+  { value: 'oct', label: 'October' },
+  { value: 'nov', label: 'November' },
+  { value: 'dec', label: 'December' },
+]
+
+const SLOT_TYPE_ICONS: Record<string, string> = {
+  work: '💼',
+  on_call: '📞',
+  entertainment: '🎮',
+  system: '⚙️',
+}
+
+const STATUS_CLASSES: Record<string, string> = {
+  not_started: 'status-open',
+  ongoing: 'status-undergoing',
+  deferred: 'status-pending',
+  skipped: 'status-closed',
+  paused: 'status-pending',
+  finished: 'status-completed',
+  aborted: 'status-closed',
+}
+
+export default function CalendarPage() {
+  const [selectedDate, setSelectedDate] = useState(dayjs().format('YYYY-MM-DD'))
+  const [slots, setSlots] = useState<TimeSlotResponse[]>([])
+  const [plans, setPlans] = useState<SchedulePlanResponse[]>([])
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState<'daily' | 'plans'>('daily')
+  const [error, setError] = useState('')
+
+  // Create/Edit slot modal state
+  const [showSlotModal, setShowSlotModal] = useState(false)
+  const [editingSlot, setEditingSlot] = useState<TimeSlotResponse | null>(null)
+  const [slotForm, setSlotForm] = useState({
+    slot_type: 'work' as SlotType,
+    scheduled_at: '09:00',
+    estimated_duration: 25,
+    event_type: '' as string,
+    event_data_code: '',
+    event_data_event: '',
+    priority: 50,
+  })
+  const [slotSaving, setSlotSaving] = useState(false)
+  const [warnings, setWarnings] = useState<WorkloadWarning[]>([])
+  const [showPlanModal, setShowPlanModal] = useState(false)
+  const [editingPlan, setEditingPlan] = useState<SchedulePlanResponse | null>(null)
+  const [planSaving, setPlanSaving] = useState(false)
+  const [planForm, setPlanForm] = useState({
+    slot_type: 'work' as SlotType,
+    estimated_duration: 25,
+    at_time: '09:00',
+    on_day: '' as Weekday | '',
+    on_week: '' as string,
+    on_month: '' as MonthName | '',
+    event_type: '' as string,
+    event_data_code: '',
+    event_data_event: '',
+  })
+
+  const fetchSlots = async (date: string) => {
+    setLoading(true)
+    setError('')
+    try {
+      const { data } = await api.get<DayViewResponse>(`/calendar/day?date=${date}`)
+      setSlots(Array.isArray(data?.slots) ? data.slots : [])
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Failed to load calendar')
+      setSlots([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const fetchPlans = async () => {
+    try {
+      const { data } = await api.get<PlanListResponse>('/calendar/plans')
+      setPlans(Array.isArray(data?.plans) ? data.plans : [])
+    } catch (err: any) {
+      console.error('Failed to load plans:', err)
+    }
+  }
+
+  useEffect(() => {
+    fetchSlots(selectedDate)
+    fetchPlans()
+  }, [])
+
+  useEffect(() => {
+    if (activeTab === 'daily') {
+      fetchSlots(selectedDate)
+    }
+  }, [selectedDate])
+
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedDate(e.target.value)
+  }
+
+  const goToday = () => setSelectedDate(dayjs().format('YYYY-MM-DD'))
+  const goPrev = () => setSelectedDate(dayjs(selectedDate).subtract(1, 'day').format('YYYY-MM-DD'))
+  const goNext = () => setSelectedDate(dayjs(selectedDate).add(1, 'day').format('YYYY-MM-DD'))
+
+  const formatPlanSchedule = (plan: SchedulePlanResponse) => {
+    const parts: string[] = [`at ${plan.at_time}`]
+    if (plan.on_day) parts.push(`on ${plan.on_day}`)
+    if (plan.on_week) parts.push(`week ${plan.on_week}`)
+    if (plan.on_month) parts.push(`in ${plan.on_month}`)
+    return parts.join(' · ')
+  }
+
+  // --- Slot create/edit ---
+  const openCreateSlotModal = () => {
+    setEditingSlot(null)
+    setSlotForm({
+      slot_type: 'work',
+      scheduled_at: '09:00',
+      estimated_duration: 25,
+      event_type: '',
+      event_data_code: '',
+      event_data_event: '',
+      priority: 50,
+    })
+    setWarnings([])
+    setError('')
+    setShowSlotModal(true)
+  }
+
+  const openEditSlotModal = (slot: TimeSlotResponse) => {
+    setEditingSlot(slot)
+    setSlotForm({
+      slot_type: slot.slot_type,
+      scheduled_at: slot.scheduled_at,
+      estimated_duration: slot.estimated_duration,
+      event_type: slot.event_type || '',
+      event_data_code: slot.event_data?.code || '',
+      event_data_event: slot.event_data?.event || '',
+      priority: slot.priority,
+    })
+    setWarnings([])
+    setError('')
+    setShowSlotModal(true)
+  }
+
+  const buildEventData = () => {
+    if (!slotForm.event_type) return null
+    if (slotForm.event_type === 'job') {
+      return slotForm.event_data_code ? { type: 'Task', code: slotForm.event_data_code } : null
+    }
+    if (slotForm.event_type === 'system_event') {
+      return slotForm.event_data_event ? { event: slotForm.event_data_event } : null
+    }
+    return null
+  }
+
+  const buildPlanEventData = () => {
+    if (!planForm.event_type) return null
+    if (planForm.event_type === 'job') {
+      return planForm.event_data_code ? { type: 'Task', code: planForm.event_data_code } : null
+    }
+    if (planForm.event_type === 'system_event') {
+      return planForm.event_data_event ? { event: planForm.event_data_event } : null
+    }
+    return null
+  }
+
+  const openCreatePlanModal = () => {
+    setEditingPlan(null)
+    setPlanForm({
+      slot_type: 'work',
+      estimated_duration: 25,
+      at_time: '09:00',
+      on_day: '',
+      on_week: '',
+      on_month: '',
+      event_type: '',
+      event_data_code: '',
+      event_data_event: '',
+    })
+    setError('')
+    setShowPlanModal(true)
+  }
+
+  const openEditPlanModal = (plan: SchedulePlanResponse) => {
+    setEditingPlan(plan)
+    setPlanForm({
+      slot_type: plan.slot_type,
+      estimated_duration: plan.estimated_duration,
+      at_time: plan.at_time.slice(0, 5),
+      on_day: (plan.on_day?.toLowerCase() as Weekday | undefined) || '',
+      on_week: plan.on_week ? String(plan.on_week) : '',
+      on_month: (plan.on_month?.toLowerCase() as MonthName | undefined) || '',
+      event_type: plan.event_type || '',
+      event_data_code: plan.event_data?.code || '',
+      event_data_event: plan.event_data?.event || '',
+    })
+    setError('')
+    setShowPlanModal(true)
+  }
+
+  const handleSavePlan = async () => {
+    setPlanSaving(true)
+    setError('')
+    try {
+      const payload: any = {
+        slot_type: planForm.slot_type,
+        estimated_duration: planForm.estimated_duration,
+        at_time: planForm.at_time,
+        on_day: planForm.on_day || null,
+        on_week: planForm.on_week ? Number(planForm.on_week) : null,
+        on_month: planForm.on_month || null,
+        event_type: planForm.event_type || null,
+        event_data: buildPlanEventData(),
+      }
+
+      if (editingPlan) {
+        await api.patch(`/calendar/plans/${editingPlan.id}`, payload)
+      } else {
+        await api.post('/calendar/plans', payload)
+      }
+
+      setShowPlanModal(false)
+      fetchPlans()
+      if (activeTab === 'daily') {
+        fetchSlots(selectedDate)
+      }
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Save plan failed')
+    } finally {
+      setPlanSaving(false)
+    }
+  }
+
+  const handleSaveSlot = async () => {
+    setSlotSaving(true)
+    setError('')
+    setWarnings([])
+    try {
+      const payload: any = {
+        slot_type: slotForm.slot_type,
+        scheduled_at: slotForm.scheduled_at,
+        estimated_duration: slotForm.estimated_duration,
+        priority: slotForm.priority,
+        event_type: slotForm.event_type || null,
+        event_data: buildEventData(),
+      }
+
+      let response: any
+      if (editingSlot) {
+        // Edit existing slot
+        if (editingSlot.is_virtual) {
+          response = await api.patch(`/calendar/slots/virtual/${editingSlot.slot_id}`, payload)
+        } else if (editingSlot.slot_id) {
+          response = await api.patch(`/calendar/slots/${editingSlot.slot_id}`, payload)
+        } else {
+          throw new Error('Missing slot identifier for edit')
+        }
+      } else {
+        // Create new slot
+        payload.date = selectedDate
+        response = await api.post('/calendar/slots', payload)
+      }
+
+      // Check for warnings in response
+      if (response.data?.warnings && response.data.warnings.length > 0) {
+        setWarnings(response.data.warnings)
+      }
+
+      setShowSlotModal(false)
+      fetchSlots(selectedDate)
+    } catch (err: any) {
+      const detail = err.response?.data?.detail
+      if (typeof detail === 'string' && detail.toLowerCase().includes('overlap')) {
+        setError(`⚠️ Overlap conflict: ${detail}`)
+      } else if (detail && typeof detail === 'object') {
+        const message = typeof detail.message === 'string' ? detail.message : 'Save failed'
+        const conflicts = Array.isArray(detail.conflicts) ? detail.conflicts : []
+        if (conflicts.length > 0) {
+          const summary = conflicts
+            .map((conflict: any) => `${conflict.slot_type || 'slot'} at ${conflict.scheduled_at || 'unknown time'}`)
+            .join(', ')
+          setError(`⚠️ ${message}: ${summary}`)
+        } else {
+          setError(`⚠️ ${message}`)
+        }
+      } else {
+        setError(detail || 'Save failed')
+      }
+    } finally {
+      setSlotSaving(false)
+    }
+  }
+
+  // --- Slot cancel ---
+  const handleCancelSlot = async (slot: TimeSlotResponse) => {
+    if (!confirm(`Cancel this ${slot.slot_type} slot at ${slot.scheduled_at}?`)) return
+    setError('')
+    try {
+      if (slot.is_virtual) {
+        await api.post(`/calendar/slots/virtual/${slot.slot_id}/cancel`)
+      } else if (slot.slot_id) {
+        await api.post(`/calendar/slots/${slot.slot_id}/cancel`)
+      } else {
+        throw new Error('Missing slot identifier for cancel')
+      }
+      fetchSlots(selectedDate)
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Cancel failed')
+    }
+  }
+
+  // --- Plan cancel ---
+  const handleCancelPlan = async (plan: SchedulePlanResponse) => {
+    if (!confirm(`Cancel plan #${plan.id}? This won't affect past materialized slots.`)) return
+    setError('')
+    try {
+      await api.post(`/calendar/plans/${plan.id}/cancel`)
+      fetchPlans()
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Cancel plan failed')
+    }
+  }
+
+  // Check if a date is in the past
+  const isPastDate = dayjs(selectedDate).isBefore(dayjs().startOf('day'))
+
+  return (
+    <div className="calendar-page">
+      <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <h2>📅 Calendar</h2>
+      </div>
+
+      {/* Tab switcher */}
+      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
+        <button
+          className={activeTab === 'daily' ? 'btn-primary' : 'btn-secondary'}
+          onClick={() => setActiveTab('daily')}
+        >
+          Daily View
+        </button>
+        <button
+          className={activeTab === 'plans' ? 'btn-primary' : 'btn-secondary'}
+          onClick={() => setActiveTab('plans')}
+        >
+          Plans ({plans.length})
+        </button>
+      </div>
+
+      {error && <div className="error-message" style={{ color: 'var(--danger)', marginBottom: 12 }}>{error}</div>}
+
+      {/* Workload warnings banner */}
+      {warnings.length > 0 && (
+        <div style={{ background: 'var(--warning-bg, #fff3cd)', border: '1px solid var(--warning-border, #ffc107)', borderRadius: 8, padding: 12, marginBottom: 12 }}>
+          <strong>⚠️ Workload Warnings:</strong>
+          <ul style={{ margin: '4px 0 0 16px', padding: 0 }}>
+            {warnings.map((w, i) => (
+              <li key={i}>{w.message} ({w.period} {w.slot_type}: {w.current}/{w.minimum} min)</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {activeTab === 'daily' && (
+        <>
+          {/* Date navigation */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
+            <button className="btn-secondary" onClick={goPrev}>◀</button>
+            <input
+              type="date"
+              value={selectedDate}
+              onChange={handleDateChange}
+              style={{ fontSize: '1rem', padding: '4px 8px' }}
+            />
+            <button className="btn-secondary" onClick={goNext}>▶</button>
+            <button className="btn-transition" onClick={goToday}>Today</button>
+            {!isPastDate && (
+              <button className="btn-primary" onClick={openCreateSlotModal} style={{ marginLeft: 'auto' }}>+ New Slot</button>
+            )}
+          </div>
+
+          {/* Deferred slots notice */}
+          {slots.some(s => s.status === 'deferred') && (
+            <div style={{ background: 'var(--warning-bg, #fff3cd)', border: '1px solid var(--warning-border, #ffc107)', borderRadius: 8, padding: 10, marginBottom: 12, fontSize: '0.9rem' }}>
+              ⏳ Some slots are <strong>deferred</strong> — they were postponed due to scheduling conflicts or agent unavailability.
+            </div>
+          )}
+
+          {/* Slot list */}
+          {loading ? (
+            <div className="loading">Loading...</div>
+          ) : slots.length === 0 ? (
+            <div className="empty" style={{ padding: '40px 0', color: 'var(--text-secondary)', textAlign: 'center' }}>
+              No slots scheduled for {dayjs(selectedDate).format('MMMM D, YYYY')}.
+            </div>
+          ) : (
+            <div className="milestone-grid">
+              {slots.map((slot) => (
+                <div
+                  key={slot.slot_id}
+                  className="milestone-card"
+                  style={{ opacity: slot.is_virtual ? 0.8 : 1 }}
+                >
+                  <div className="milestone-card-header" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                    <span style={{ fontSize: '1.2rem' }}>{SLOT_TYPE_ICONS[slot.slot_type] || '📋'}</span>
+                    <span className="badge">{slot.slot_type.replace('_', ' ')}</span>
+                    <span className={`badge ${STATUS_CLASSES[slot.status] || ''}`}>{slot.status.replace('_', ' ')}</span>
+                    {slot.is_virtual && <span className="badge" style={{ background: 'var(--text-secondary)', color: 'white', fontSize: '0.7rem' }}>plan</span>}
+                    <span style={{ marginLeft: 'auto', fontWeight: 600 }}>{slot.scheduled_at}</span>
+                  </div>
+                  <div style={{ marginTop: 8, display: 'flex', gap: 16, fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+                    <span>⏱ {slot.estimated_duration} min</span>
+                    <span>⚡ Priority: {slot.priority}</span>
+                    {slot.event_type && <span>📌 {slot.event_type.replace('_', ' ')}</span>}
+                  </div>
+                  {slot.event_data && slot.event_data.code && (
+                    <div style={{ marginTop: 4, fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                      🔗 {slot.event_data.code}
+                    </div>
+                  )}
+                  {slot.event_data && slot.event_data.event && (
+                    <div style={{ marginTop: 4, fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                      📣 {slot.event_data.event}
+                    </div>
+                  )}
+                  {/* Action buttons for non-past, modifiable slots */}
+                  {!isPastDate && (slot.status === 'not_started' || slot.status === 'deferred') && (
+                    <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
+                      <button
+                        className="btn-transition"
+                        style={{ padding: '4px 10px', fontSize: '0.8rem' }}
+                        onClick={() => openEditSlotModal(slot)}
+                      >
+                        ✏️ Edit
+                      </button>
+                      <button
+                        className="btn-danger"
+                        style={{ padding: '4px 10px', fontSize: '0.8rem' }}
+                        onClick={() => handleCancelSlot(slot)}
+                      >
+                        ❌ Cancel
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      {activeTab === 'plans' && (
+        <>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
+            <button className="btn-primary" onClick={openCreatePlanModal}>+ New Plan</button>
+          </div>
+
+          <div className="milestone-grid">
+          {plans.length === 0 ? (
+            <div className="empty" style={{ padding: '40px 0', color: 'var(--text-secondary)', textAlign: 'center' }}>
+              No schedule plans configured.
+            </div>
+          ) : (
+            plans.map((plan) => (
+              <div key={plan.id} className="milestone-card">
+                <div className="milestone-card-header" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                  <span style={{ fontSize: '1.2rem' }}>{SLOT_TYPE_ICONS[plan.slot_type] || '📋'}</span>
+                  <span className="badge">{plan.slot_type.replace('_', ' ')}</span>
+                  {!plan.is_active && <span className="badge status-closed">inactive</span>}
+                  <span style={{ marginLeft: 'auto', fontWeight: 600 }}>Plan #{plan.id}</span>
+                </div>
+                <div style={{ marginTop: 8, fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+                  <div>🔄 {formatPlanSchedule(plan)}</div>
+                  <div>⏱ {plan.estimated_duration} min</div>
+                  {plan.event_type && <div>📌 {plan.event_type.replace('_', ' ')}</div>}
+                </div>
+                {plan.is_active && (
+                  <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
+                    <button
+                      className="btn-transition"
+                      style={{ padding: '4px 10px', fontSize: '0.8rem' }}
+                      onClick={() => openEditPlanModal(plan)}
+                    >
+                      ✏️ Edit Plan
+                    </button>
+                    <button
+                      className="btn-danger"
+                      style={{ padding: '4px 10px', fontSize: '0.8rem' }}
+                      onClick={() => handleCancelPlan(plan)}
+                    >
+                      ❌ Cancel Plan
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+          </div>
+        </>
+      )}
+
+      {/* Create/Edit Slot Modal */}
+      {showSlotModal && (
+        <div className="modal-overlay" onClick={() => setShowSlotModal(false)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3>{editingSlot ? 'Edit Slot' : 'New Slot'}</h3>
+            <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+              Date: <strong>{dayjs(selectedDate).format('MMMM D, YYYY')}</strong>
+            </p>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Slot Type</strong>
+              <select
+                value={slotForm.slot_type}
+                onChange={(e) => setSlotForm({ ...slotForm, slot_type: e.target.value as SlotType })}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                {SLOT_TYPES.map((t) => (
+                  <option key={t.value} value={t.value}>{t.label}</option>
+                ))}
+              </select>
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Scheduled At</strong>
+              <input
+                type="time"
+                value={slotForm.scheduled_at}
+                onChange={(e) => setSlotForm({ ...slotForm, scheduled_at: e.target.value })}
+                style={{ width: '100%', marginTop: 4 }}
+              />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Estimated Duration (minutes, 1–50)</strong>
+              <input
+                type="number"
+                min={1}
+                max={50}
+                value={slotForm.estimated_duration}
+                onChange={(e) => setSlotForm({ ...slotForm, estimated_duration: Number(e.target.value) })}
+                style={{ width: '100%', marginTop: 4 }}
+              />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Priority (0–99)</strong>
+              <input
+                type="number"
+                min={0}
+                max={99}
+                value={slotForm.priority}
+                onChange={(e) => setSlotForm({ ...slotForm, priority: Number(e.target.value) })}
+                style={{ width: '100%', marginTop: 4 }}
+              />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Event Type</strong>
+              <select
+                value={slotForm.event_type}
+                onChange={(e) => setSlotForm({ ...slotForm, event_type: e.target.value })}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                <option value="">None</option>
+                {EVENT_TYPES.map((t) => (
+                  <option key={t.value} value={t.value}>{t.label}</option>
+                ))}
+              </select>
+            </label>
+
+            {slotForm.event_type === 'job' && (
+              <label style={{ display: 'block', marginBottom: 8 }}>
+                <strong>Job Code</strong>
+                <input
+                  type="text"
+                  value={slotForm.event_data_code}
+                  onChange={(e) => setSlotForm({ ...slotForm, event_data_code: e.target.value })}
+                  placeholder="e.g. TASK-42"
+                  style={{ width: '100%', marginTop: 4 }}
+                />
+              </label>
+            )}
+
+            {slotForm.event_type === 'system_event' && (
+              <label style={{ display: 'block', marginBottom: 8 }}>
+                <strong>System Event</strong>
+                <select
+                  value={slotForm.event_data_event}
+                  onChange={(e) => setSlotForm({ ...slotForm, event_data_event: e.target.value })}
+                  style={{ width: '100%', marginTop: 4 }}
+                >
+                  <option value="">Select event</option>
+                  <option value="ScheduleToday">Schedule Today</option>
+                  <option value="SummaryToday">Summary Today</option>
+                  <option value="ScheduledGatewayRestart">Scheduled Gateway Restart</option>
+                </select>
+              </label>
+            )}
+
+            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+              <button
+                className="btn-primary"
+                onClick={handleSaveSlot}
+                disabled={slotSaving}
+              >
+                {slotSaving ? 'Saving...' : 'Save'}
+              </button>
+              <button className="btn-back" onClick={() => setShowSlotModal(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showPlanModal && (
+        <div className="modal-overlay" onClick={() => setShowPlanModal(false)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3>{editingPlan ? 'Edit Plan' : 'New Plan'}</h3>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Slot Type</strong>
+              <select
+                value={planForm.slot_type}
+                onChange={(e) => setPlanForm({ ...planForm, slot_type: e.target.value as SlotType })}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                {SLOT_TYPES.map((t) => (
+                  <option key={t.value} value={t.value}>{t.label}</option>
+                ))}
+              </select>
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>At Time</strong>
+              <input
+                type="time"
+                value={planForm.at_time}
+                onChange={(e) => setPlanForm({ ...planForm, at_time: e.target.value })}
+                style={{ width: '100%', marginTop: 4 }}
+              />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Estimated Duration (minutes, 1–50)</strong>
+              <input
+                type="number"
+                min={1}
+                max={50}
+                value={planForm.estimated_duration}
+                onChange={(e) => setPlanForm({ ...planForm, estimated_duration: Number(e.target.value) })}
+                style={{ width: '100%', marginTop: 4 }}
+              />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>On Day (optional)</strong>
+              <select
+                value={planForm.on_day}
+                onChange={(e) => setPlanForm({ ...planForm, on_day: e.target.value as Weekday | '' })}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                <option value="">Every day</option>
+                {WEEKDAYS.map((d) => (
+                  <option key={d.value} value={d.value}>{d.label}</option>
+                ))}
+              </select>
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>On Week (optional)</strong>
+              <select
+                value={planForm.on_week}
+                onChange={(e) => setPlanForm({ ...planForm, on_week: e.target.value })}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                <option value="">Every matching week</option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+              </select>
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>On Month (optional)</strong>
+              <select
+                value={planForm.on_month}
+                onChange={(e) => setPlanForm({ ...planForm, on_month: e.target.value as MonthName | '' })}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                <option value="">Every month</option>
+                {MONTHS.map((m) => (
+                  <option key={m.value} value={m.value}>{m.label}</option>
+                ))}
+              </select>
+            </label>
+
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Event Type</strong>
+              <select
+                value={planForm.event_type}
+                onChange={(e) => setPlanForm({ ...planForm, event_type: e.target.value })}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                <option value="">None</option>
+                {EVENT_TYPES.map((t) => (
+                  <option key={t.value} value={t.value}>{t.label}</option>
+                ))}
+              </select>
+            </label>
+
+            {planForm.event_type === 'job' && (
+              <label style={{ display: 'block', marginBottom: 8 }}>
+                <strong>Job Code</strong>
+                <input
+                  type="text"
+                  value={planForm.event_data_code}
+                  onChange={(e) => setPlanForm({ ...planForm, event_data_code: e.target.value })}
+                  placeholder="e.g. TASK-42"
+                  style={{ width: '100%', marginTop: 4 }}
+                />
+              </label>
+            )}
+
+            {planForm.event_type === 'system_event' && (
+              <label style={{ display: 'block', marginBottom: 8 }}>
+                <strong>System Event</strong>
+                <select
+                  value={planForm.event_data_event}
+                  onChange={(e) => setPlanForm({ ...planForm, event_data_event: e.target.value })}
+                  style={{ width: '100%', marginTop: 4 }}
+                >
+                  <option value="">Select event</option>
+                  <option value="ScheduleToday">Schedule Today</option>
+                  <option value="SummaryToday">Summary Today</option>
+                  <option value="ScheduledGatewayRestart">Scheduled Gateway Restart</option>
+                </select>
+              </label>
+            )}
+
+            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+              <button className="btn-primary" onClick={handleSavePlan} disabled={planSaving}>
+                {planSaving ? 'Saving...' : 'Save Plan'}
+              </button>
+              <button className="btn-back" onClick={() => setShowPlanModal(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/CreateIssuePage.tsx

@@ -1,60 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import api from '@/services/api'
-import type { Project } from '@/types'
-
-export default function CreateIssuePage() {
-  const navigate = useNavigate()
-  const [projects, setProjects] = useState<Project[]>([])
-  const [form, setForm] = useState({
-    title: '', description: '', project_id: 0, issue_type: 'task',
-    priority: 'medium', tags: '', reporter_id: 1,
-  })
-
-  useEffect(() => {
-    api.get<Project[]>('/projects').then(({ data }) => {
-      setProjects(data)
-      if (data.length) setForm((f) => ({ ...f, project_id: data[0].id }))
-    })
-  }, [])
-
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    const payload = { ...form, tags: form.tags || null }
-    await api.post('/issues', payload)
-    navigate('/issues')
-  }
-
-  return (
-    <div className="create-issue">
-      <h2>新建 Issue</h2>
-      <form onSubmit={submit}>
-        <label>标题 <input required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></label>
-        <label>描述 <textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
-        <label>项目
-          <select value={form.project_id} onChange={(e) => setForm({ ...form, project_id: Number(e.target.value) })}>
-            {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
-          </select>
-        </label>
-        <label>类型
-          <select value={form.issue_type} onChange={(e) => setForm({ ...form, issue_type: e.target.value })}>
-            <option value="task">Task</option>
-            <option value="bug">Bug</option>
-            <option value="feature">Feature</option>
-            <option value="resolution">Resolution</option>
-          </select>
-        </label>
-        <label>优先级
-          <select value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-            <option value="critical">Critical</option>
-          </select>
-        </label>
-        <label>标签 <input value={form.tags} onChange={(e) => setForm({ ...form, tags: e.target.value })} placeholder="逗号分隔" /></label>
-        <button type="submit" className="btn-primary">创建</button>
-      </form>
-    </div>
-  )
-}

src/pages/CreateTaskPage.tsx

@@ -0,0 +1,110 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Project, Milestone } from '@/types'
+
+const TASK_TYPES = [
+  // P9.6: 'story' removed — all story/* types are restricted; must come from Proposal Accept workflow
+  { value: 'issue', label: 'Issue', subtypes: ['infrastructure', 'performance', 'regression', 'security', 'user_experience', 'defect'] },
+  // P7.1: 'task' type removed — defect subtype migrated to issue/defect
+  { value: 'test', label: 'Test', subtypes: ['regression', 'security', 'smoke', 'stress'] },
+  { value: 'maintenance', label: 'Maintenance', subtypes: ['deploy'] },  // P9.6: 'release' removed — controlled via milestone flow
+  { value: 'research', label: 'Research', subtypes: [] },
+  { value: 'review', label: 'Review', subtypes: ['code_review', 'decision_review', 'function_review'] },
+  { value: 'resolution', label: 'Resolution', subtypes: [] },
+]
+
+export default function CreateTaskPage() {
+  const navigate = useNavigate()
+  const [projects, setProjects] = useState<Project[]>([])
+  const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [form, setForm] = useState({
+    title: '', description: '', project_code: '', milestone_code: '', task_type: 'issue',  // P7.1: default changed from 'task' to 'issue'
+    task_subtype: '', priority: 'medium', tags: '', reporter_id: 1,
+  })
+
+  useEffect(() => {
+    api.get<Project[]>('/projects').then(({ data }) => {
+      setProjects(data)
+      if (data.length) {
+        setForm((f) => ({ ...f, project_code: data[0].project_code || '' }))
+        // Load milestones for the first project
+        api.get<Milestone[]>(`/milestones?project_code=${data[0].project_code}`).then(({ data: ms }) => {
+          setMilestones(ms)
+          if (ms.length) setForm((f) => ({ ...f, milestone_code: ms[0].milestone_code || '' }))
+        })
+      }
+    })
+  }, [])
+
+  const handleProjectChange = (projectCode: string) => {
+    setForm(f => ({ ...f, project_code: projectCode, milestone_code: '' }))
+    api.get<Milestone[]>(`/milestones?project_code=${projectCode}`).then(({ data: ms }) => {
+      setMilestones(ms)
+      if (ms.length) setForm((f) => ({ ...f, milestone_code: ms[0].milestone_code || '' }))
+    })
+  }
+
+  const currentType = TASK_TYPES.find(t => t.value === form.task_type) || TASK_TYPES[2]
+  const subtypes = currentType.subtypes || []
+
+  const handleTypeChange = (newType: string) => {
+    setForm(f => ({ ...f, task_type: newType, task_subtype: '' }))
+  }
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.milestone_code) {
+      alert('Please select a milestone')
+      return
+    }
+    const payload: any = { ...form, tags: form.tags || null }
+    if (!form.task_subtype) delete payload.task_subtype
+    await api.post('/tasks', payload)
+    navigate('/tasks')
+  }
+
+  return (
+    <div className="create-task">
+      <h2>Create Task</h2>
+      <form onSubmit={submit}>
+        <label>Title <input data-testid="task-title-input" required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></label>
+        <label>Description <textarea data-testid="task-description-input" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
+        <label>Projects
+          <select data-testid="project-select" value={form.project_code} onChange={(e) => handleProjectChange(e.target.value)}>
+            {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
+          </select>
+        </label>
+        <label>Milestone
+          <select data-testid="milestone-select" value={form.milestone_code} onChange={(e) => setForm({ ...form, milestone_code: e.target.value })}>
+            {milestones.length === 0 && <option value="">No milestones available</option>}
+            {milestones.map((m) => <option key={m.id} value={m.milestone_code || ''}>{m.title}</option>)}
+          </select>
+        </label>
+        <label>Type
+          <select data-testid="task-type-select" value={form.task_type} onChange={(e) => handleTypeChange(e.target.value)}>
+            {TASK_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
+          </select>
+        </label>
+        {subtypes.length > 0 && (
+          <label>Subtype
+            <select value={form.task_subtype} onChange={(e) => setForm({ ...form, task_subtype: e.target.value })}>
+              <option value="">Select subtype</option>
+              {subtypes.map((s) => <option key={s} value={s}>{s.replace('_', ' ')}</option>)}
+            </select>
+          </label>
+        )}
+        <label>Priority
+          <select value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+            <option value="critical">Critical</option>
+          </select>
+        </label>
+        <label>Tags <input value={form.tags} onChange={(e) => setForm({ ...form, tags: e.target.value })} placeholder="Comma separated" /></label>
+        <button data-testid="create-task-button" type="submit" className="btn-primary">Create</button>
+      </form>
+    </div>
+  )
+}

src/pages/DashboardPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
 import api from '@/services/api'
-import type { DashboardStats } from '@/types'
+import type { DashboardStats, Task } from '@/types'
 
 export default function DashboardPage() {
   const [stats, setStats] = useState<DashboardStats | null>(null)
@@ -9,7 +10,7 @@ export default function DashboardPage() {
     api.get<DashboardStats>('/dashboard/stats').then(({ data }) => setStats(data))
   }, [])
 
-  if (!stats) return <div className="loading">加载中...</div>
+  if (!stats) return <div className="loading">Loading...</div>
 
   const statusColors: Record<string, string> = {
     open: '#3b82f6', in_progress: '#f59e0b', resolved: '#10b981',
@@ -21,14 +22,14 @@ export default function DashboardPage() {
 
   return (
     <div className="dashboard">
-      <h2>📊 仪表盘</h2>
+      <h2>📊 Dashboard</h2>
 
       <div className="stats-grid">
         <div className="stat-card total">
-          <span className="stat-number">{stats.total_issues}</span>
+          <span className="stat-number">{stats.total_tasks}</span>
-          <span className="stat-label">总 Issues</span>
+          <span className="stat-label">Total Tasks</span>
         </div>
-        {Object.entries(stats.by_status).map(([k, v]) => (
+        {Object.entries(stats.by_status || {}).map(([k, v]) => (
           <div className="stat-card" key={k} style={{ borderLeftColor: statusColors[k] || '#ccc' }}>
             <span className="stat-number">{v}</span>
             <span className="stat-label">{k}</span>
@@ -37,13 +38,13 @@ export default function DashboardPage() {
       </div>
 
       <div className="section">
-        <h3>按优先级</h3>
+        <h3>By Priority</h3>
         <div className="bar-chart">
-          {Object.entries(stats.by_priority).map(([k, v]) => (
+          {Object.entries(stats.by_priority || {}).map(([k, v]) => (
             <div className="bar-row" key={k}>
               <span className="bar-label">{k}</span>
               <div className="bar" style={{
-                width: `${Math.max((v / stats.total_issues) * 100, 5)}%`,
+                width: `${Math.max((v / stats.total_tasks) * 100, 5)}%`,
                 backgroundColor: priorityColors[k] || '#ccc',
               }}>{v}</div>
             </div>
@@ -52,19 +53,19 @@ export default function DashboardPage() {
       </div>
 
       <div className="section">
-        <h3>最近 Issues</h3>
+        <h3>Recent Tasks</h3>
         <table>
           <thead>
-            <tr><th>ID</th><th>标题</th><th>状态</th><th>优先级</th><th>类型</th></tr>
+            <tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th><th>Type</th><th>Subtype</th></tr>
           </thead>
           <tbody>
-            {stats.recent_issues.map((i) => (
+            {(stats.recent_tasks || []).map((i) => (
               <tr key={i.id}>
-                <td>#{i.id}</td>
+                <td>{i.task_code || '—'}</td>
-                <td><a href={`/issues/${i.id}`}>{i.title}</a></td>
+                <td>{i.task_code ? <Link to={`/tasks/${i.task_code}`}>{i.title}</Link> : i.title}</td>
                 <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
                 <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
-                <td>{i.issue_type}</td>
+                <td>{i.task_type}</td><td>{i.task_subtype || "-"}</td>
               </tr>
             ))}
           </tbody>

src/pages/IssueDetailPage.tsx

@@ -1,97 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import api from '@/services/api'
-import type { Issue, Comment } from '@/types'
-import dayjs from 'dayjs'
-
-export default function IssueDetailPage() {
-  const { id } = useParams()
-  const navigate = useNavigate()
-  const [issue, setIssue] = useState<Issue | null>(null)
-  const [comments, setComments] = useState<Comment[]>([])
-  const [newComment, setNewComment] = useState('')
-
-  useEffect(() => {
-    api.get<Issue>(`/issues/${id}`).then(({ data }) => setIssue(data))
-    api.get<Comment[]>(`/issues/${id}/comments`).then(({ data }) => setComments(data))
-  }, [id])
-
-  const addComment = async () => {
-    if (!newComment.trim() || !issue) return
-    await api.post('/comments', { content: newComment, issue_id: issue.id, author_id: 1 })
-    setNewComment('')
-    const { data } = await api.get<Comment[]>(`/issues/${id}/comments`)
-    setComments(data)
-  }
-
-  const transition = async (newStatus: string) => {
-    await api.post(`/issues/${id}/transition?new_status=${newStatus}`)
-    const { data } = await api.get<Issue>(`/issues/${id}`)
-    setIssue(data)
-  }
-
-  if (!issue) return <div className="loading">加载中...</div>
-
-  const statusActions: Record<string, string[]> = {
-    open: ['in_progress', 'blocked'],
-    in_progress: ['resolved', 'blocked'],
-    blocked: ['open', 'in_progress'],
-    resolved: ['closed', 'open'],
-    closed: ['open'],
-  }
-
-  return (
-    <div className="issue-detail">
-      <button className="btn-back" onClick={() => navigate('/issues')}>← 返回</button>
-
-      <div className="issue-header">
-        <h2>#{issue.id} {issue.title}</h2>
-        <div className="issue-meta">
-          <span className={`badge status-${issue.status}`}>{issue.status}</span>
-          <span className={`badge priority-${issue.priority}`}>{issue.priority}</span>
-          <span className="badge">{issue.issue_type}</span>
-          {issue.tags && <span className="tags">{issue.tags}</span>}
-        </div>
-      </div>
-
-      <div className="issue-body">
-        <div className="section">
-          <h3>描述</h3>
-          <p>{issue.description || '暂无描述'}</p>
-        </div>
-
-        <div className="section">
-          <h3>详情</h3>
-          <dl>
-            <dt>创建时间</dt><dd>{dayjs(issue.created_at).format('YYYY-MM-DD HH:mm')}</dd>
-            {issue.due_date && <><dt>截止日期</dt><dd>{dayjs(issue.due_date).format('YYYY-MM-DD')}</dd></>}
-            {issue.updated_at && <><dt>更新时间</dt><dd>{dayjs(issue.updated_at).format('YYYY-MM-DD HH:mm')}</dd></>}
-          </dl>
-        </div>
-
-        <div className="section">
-          <h3>状态变更</h3>
-          <div className="actions">
-            {(statusActions[issue.status] || []).map((s) => (
-              <button key={s} className="btn-transition" onClick={() => transition(s)}>{s}</button>
-            ))}
-          </div>
-        </div>
-
-        <div className="section">
-          <h3>评论 ({comments.length})</h3>
-          {comments.map((c) => (
-            <div className="comment" key={c.id}>
-              <div className="comment-meta">用户 #{c.author_id} · {dayjs(c.created_at).format('MM-DD HH:mm')}</div>
-              <p>{c.content}</p>
-            </div>
-          ))}
-          <div className="comment-form">
-            <textarea value={newComment} onChange={(e) => setNewComment(e.target.value)} placeholder="添加评论..." />
-            <button onClick={addComment} disabled={!newComment.trim()}>提交评论</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/pages/IssuesPage.tsx

@@ -1,78 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import api from '@/services/api'
-import type { Issue, PaginatedResponse } from '@/types'
-
-export default function IssuesPage() {
-  const [issues, setIssues] = useState<Issue[]>([])
-  const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
-  const [totalPages, setTotalPages] = useState(1)
-  const [statusFilter, setStatusFilter] = useState('')
-  const [priorityFilter, setPriorityFilter] = useState('')
-  const navigate = useNavigate()
-
-  const fetchIssues = () => {
-    const params = new URLSearchParams({ page: String(page), page_size: '20' })
-    if (statusFilter) params.set('issue_status', statusFilter)
-    api.get<PaginatedResponse<Issue>>(`/issues?${params}`).then(({ data }) => {
-      setIssues(data.items)
-      setTotal(data.total)
-      setTotalPages(data.total_pages)
-    })
-  }
-
-  useEffect(() => { fetchIssues() }, [page, statusFilter, priorityFilter])
-
-  const statusColors: Record<string, string> = {
-    open: '#3b82f6', in_progress: '#f59e0b', resolved: '#10b981',
-    closed: '#6b7280', blocked: '#ef4444',
-  }
-
-  return (
-    <div className="issues-page">
-      <div className="page-header">
-        <h2>📋 Issues ({total})</h2>
-        <button className="btn-primary" onClick={() => navigate('/issues/new')}>+ 新建 Issue</button>
-      </div>
-
-      <div className="filters">
-        <select value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1) }}>
-          <option value="">全部状态</option>
-          <option value="open">Open</option>
-          <option value="in_progress">In Progress</option>
-          <option value="resolved">Resolved</option>
-          <option value="closed">Closed</option>
-          <option value="blocked">Blocked</option>
-        </select>
-      </div>
-
-      <table className="issues-table">
-        <thead>
-          <tr><th>#</th><th>标题</th><th>状态</th><th>优先级</th><th>类型</th><th>标签</th><th>创建时间</th></tr>
-        </thead>
-        <tbody>
-          {issues.map((i) => (
-            <tr key={i.id} onClick={() => navigate(`/issues/${i.id}`)} className="clickable">
-              <td>{i.id}</td>
-              <td className="issue-title">{i.title}</td>
-              <td><span className="badge" style={{ backgroundColor: statusColors[i.status] || '#ccc' }}>{i.status}</span></td>
-              <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
-              <td>{i.issue_type}</td>
-              <td>{i.tags || '-'}</td>
-              <td>{new Date(i.created_at).toLocaleDateString()}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {totalPages > 1 && (
-        <div className="pagination">
-          <button disabled={page <= 1} onClick={() => setPage(page - 1)}>上一页</button>
-          <span>{page} / {totalPages}</span>
-          <button disabled={page >= totalPages} onClick={() => setPage(page + 1)}>下一页</button>
-        </div>
-      )}
-    </div>
-  )
-}

src/pages/KnowledgeBaseDetailPage.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import api from '@/services/api'
+import type { KnowledgeBase, KnowledgeBaseTree as Tree } from '@/types'
+import KnowledgeBaseTree from '@/components/KnowledgeBaseTree'
+import KnowledgeBaseFormModal from '@/components/KnowledgeBaseFormModal'
+
+export default function KnowledgeBaseDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [kb, setKb] = useState<KnowledgeBase | null>(null)
+  const [tree, setTree] = useState<Tree | null>(null)
+  const [showEdit, setShowEdit] = useState(false)
+  const [error, setError] = useState('')
+
+  const loadTree = useCallback(async () => {
+    if (!id) return
+    const { data } = await api.get<Tree>(`/knowledge-bases/${id}/tree`)
+    setTree(data)
+  }, [id])
+
+  const loadMeta = useCallback(async () => {
+    if (!id) return
+    const { data } = await api.get<KnowledgeBase>(`/knowledge-bases/${id}`)
+    setKb(data)
+  }, [id])
+
+  useEffect(() => {
+    setError('')
+    Promise.all([loadMeta(), loadTree()]).catch((err) => {
+      setError(err?.response?.data?.detail || 'Failed to load knowledge base')
+    })
+  }, [loadMeta, loadTree])
+
+  const onDelete = async () => {
+    if (!kb) return
+    if (!confirm(`Delete knowledge base "${kb.title}" and all its content?`)) return
+    try {
+      await api.delete(`/knowledge-bases/${kb.id}`)
+      navigate('/knowledge-bases')
+    } catch (err: any) {
+      alert(err?.response?.data?.detail || 'Failed to delete knowledge base')
+    }
+  }
+
+  if (error) {
+    return (
+      <div className="project-detail-page">
+        <button className="btn-back" onClick={() => navigate('/knowledge-bases')}>← Knowledge Bases</button>
+        <p className="empty">{error}</p>
+      </div>
+    )
+  }
+
+  if (!kb) return <div className="loading">Loading…</div>
+
+  return (
+    <div className="project-detail-page">
+      <button className="btn-back" onClick={() => navigate('/knowledge-bases')}>← Knowledge Bases</button>
+
+      <div className="page-header">
+        <h2>
+          📚 {kb.title}
+          {kb.knowledge_base_code && <span className="badge" style={{ marginLeft: 8 }}>{kb.knowledge_base_code}</span>}
+        </h2>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button className="btn-secondary" onClick={() => setShowEdit(true)}>Edit</button>
+          <button className="btn-danger" onClick={onDelete}>Delete</button>
+        </div>
+      </div>
+
+      {kb.description && <p className="project-desc">{kb.description}</p>}
+
+      <KnowledgeBaseFormModal
+        isOpen={showEdit}
+        knowledgeBase={kb}
+        onClose={() => setShowEdit(false)}
+        onSaved={async () => { await loadMeta() }}
+      />
+
+      <div className="section">
+        <h3>Structure</h3>
+        {tree && <KnowledgeBaseTree tree={tree} onChange={loadTree} />}
+      </div>
+    </div>
+  )
+}

src/pages/KnowledgeBasesPage.tsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { KnowledgeBase } from '@/types'
+import dayjs from 'dayjs'
+import KnowledgeBaseFormModal from '@/components/KnowledgeBaseFormModal'
+
+export default function KnowledgeBasesPage() {
+  const [items, setItems] = useState<KnowledgeBase[]>([])
+  const [showCreate, setShowCreate] = useState(false)
+  const navigate = useNavigate()
+
+  const fetchItems = () => {
+    api.get<KnowledgeBase[]>('/knowledge-bases').then(({ data }) => setItems(data)).catch(() => setItems([]))
+  }
+
+  useEffect(() => { fetchItems() }, [])
+
+  return (
+    <div className="projects-page">
+      <div className="page-header">
+        <h2>📚 Knowledge Bases ({items.length})</h2>
+        <button className="btn-primary" onClick={() => setShowCreate(true)}>+ New</button>
+      </div>
+
+      <KnowledgeBaseFormModal
+        isOpen={showCreate}
+        onClose={() => setShowCreate(false)}
+        onSaved={() => fetchItems()}
+      />
+
+      <div className="project-grid">
+        {items.map((kb) => (
+          <div
+            key={kb.id}
+            className="project-card"
+            onClick={() => navigate(`/knowledge-bases/${kb.knowledge_base_code || kb.id}`)}
+          >
+            <h3>{kb.title}</h3>
+            {kb.knowledge_base_code && <span className="badge" style={{ marginLeft: 8 }}>{kb.knowledge_base_code}</span>}
+            <p className="project-desc">{kb.description || 'No description'}</p>
+            <div className="project-meta">
+              <span>Created {kb.created_at ? dayjs(kb.created_at).format('YYYY-MM-DD') : '—'}</span>
+            </div>
+          </div>
+        ))}
+        {items.length === 0 && <p className="empty">No knowledge bases yet. Create one above.</p>}
+      </div>
+    </div>
+  )
+}

src/pages/LoginPage.tsx

@@ -1,15 +1,31 @@
 import React, { useState } from 'react'
+import { useAuthConfig, oidcLoginHref } from '@/hooks/useAuthConfig'
+import { getLogoUrl } from '@/runtime'
 
 interface Props {
   onLogin: (username: string, password: string) => Promise<void>
 }
 
+const OIDC_ERRORS: Record<string, string> = {
+  not_linked: 'This OIDC account is not linked to any HarborForge user. Ask an administrator to bind it first.',
+  exchange_failed: 'OIDC sign-in failed during token exchange. Please try again.',
+  no_subject: 'The identity provider did not return a subject. Sign-in aborted.',
+  token_rejected: 'The issued session token was rejected. Please try again.',
+  missing_token: 'No session token was returned. Please try again.',
+  link_not_allowed: 'Account linking is not allowed in this mode.',
+  already_bound: 'That OIDC identity is already bound to another user.',
+}
+
 export default function LoginPage({ onLogin }: Props) {
+  const { config, loading: cfgLoading } = useAuthConfig()
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
 
+  const urlError = new URLSearchParams(window.location.search).get('oidc_error')
+  const oidcError = urlError ? (OIDC_ERRORS[urlError] || `OIDC error: ${urlError}`) : ''
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
@@ -17,37 +33,64 @@ export default function LoginPage({ onLogin }: Props) {
     try {
       await onLogin(username, password)
     } catch {
-      setError('登录失败，请检查用户名和密码')
+      setError('Login failed. Check username and password.')
     } finally {
       setLoading(false)
     }
   }
 
+  const showPassword = !cfgLoading && config.passwordLogin && !config.oidcOnly
+  const showOidc = !cfgLoading && config.oidcEnabled
+
   return (
     <div className="login-page">
       <div className="login-card">
-        <h1>⚓ HarborForge</h1>
+        <h1><img src={getLogoUrl()} className="brand-logo" alt="" /> HarborForge</h1>
-        <p className="subtitle">Agent/人类协同任务管理平台</p>
+        <p className="subtitle">Agent/Human collaborative task management platform</p>
+
+        {oidcError && <p className="error" style={{ marginBottom: 14 }}>{oidcError}</p>}
+
+        {showPassword && (
           <form onSubmit={handleSubmit}>
             <input
               type="text"
-            placeholder="用户名"
+              placeholder="Username"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               required
             />
             <input
               type="password"
-            placeholder="密码"
+              placeholder="Password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
             />
             {error && <p className="error">{error}</p>}
             <button type="submit" disabled={loading}>
-            {loading ? '登录中...' : '登录'}
+              {loading ? 'Signing in...' : 'Sign in'}
             </button>
           </form>
+        )}
+
+        {showPassword && showOidc && (
+          <p className="text-dim" style={{ textAlign: 'center', margin: '14px 0' }}>— or —</p>
+        )}
+
+        {showOidc && (
+          <a
+            className="btn-primary"
+            style={{ display: 'block', textAlign: 'center', textDecoration: 'none' }}
+            href={oidcLoginHref(config)}
+          >
+            Sign in with SSO
+          </a>
+        )}
+
+        {cfgLoading && <p className="subtitle">Loading sign-in options…</p>}
+        {!cfgLoading && !showPassword && !showOidc && (
+          <p className="error">No sign-in method is available. Check server configuration.</p>
+        )}
       </div>
     </div>
   )

src/pages/MeetingDetailPage.tsx

@@ -0,0 +1,322 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import { useAuth } from '@/hooks/useAuth'
+import dayjs from 'dayjs'
+import CopyableCode from '@/components/CopyableCode'
+
+interface MeetingItem {
+  id: number
+  code: string | null
+  meeting_code: string | null
+  title: string
+  description: string | null
+  status: string
+  priority: string
+  project_id: number
+  project_code: string | null
+  milestone_id: number
+  milestone_code: string | null
+  reporter_id: number
+  meeting_time: string | null
+  scheduled_at: string | null
+  duration_minutes: number | null
+  participants: string[]
+  created_at: string
+  updated_at: string | null
+}
+
+const STATUS_OPTIONS = ['scheduled', 'in_progress', 'completed', 'cancelled']
+
+export default function MeetingDetailPage() {
+  const { meetingCode } = useParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const [meeting, setMeeting] = useState<MeetingItem | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState('')
+  const [editMode, setEditMode] = useState(false)
+  const [editForm, setEditForm] = useState({
+    title: '',
+    description: '',
+    meeting_time: '',
+    duration_minutes: '',
+  })
+
+  const fetchMeeting = async () => {
+    try {
+      const { data } = await api.get<MeetingItem>(`/meetings/${meetingCode}`)
+      setMeeting(data)
+      setEditForm({
+        title: data.title,
+        description: data.description || '',
+        meeting_time: data.meeting_time || data.scheduled_at || '',
+        duration_minutes: data.duration_minutes ? String(data.duration_minutes) : '',
+      })
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to load meeting')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchMeeting()
+  }, [meetingCode])
+
+  const handleAttend = async () => {
+    if (!meeting) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const { data } = await api.post<MeetingItem>(`/meetings/${meetingCode}/attend`)
+      setMeeting(data)
+      setMessage('You have joined this meeting')
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to attend meeting')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleTransition = async (newStatus: string) => {
+    if (!meeting) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const { data } = await api.patch<MeetingItem>(`/meetings/${meetingCode}`, {
+        status: newStatus,
+      })
+      setMeeting(data)
+      setMessage(`Status changed to ${newStatus}`)
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to update meeting status')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSave = async () => {
+    if (!meeting) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const payload: Record<string, any> = {}
+      if (editForm.title.trim() !== meeting.title) payload.title = editForm.title.trim()
+      if ((editForm.description || '') !== (meeting.description || '')) payload.description = editForm.description || null
+      const currentTime = meeting.meeting_time || meeting.scheduled_at || ''
+      if (editForm.meeting_time !== currentTime) payload.meeting_time = editForm.meeting_time || null
+      const currentDuration = meeting.duration_minutes ? String(meeting.duration_minutes) : ''
+      if (editForm.duration_minutes !== currentDuration) {
+        payload.duration_minutes = editForm.duration_minutes ? Number(editForm.duration_minutes) : null
+      }
+
+      if (Object.keys(payload).length === 0) {
+        setEditMode(false)
+        return
+      }
+
+      const { data } = await api.patch<MeetingItem>(`/meetings/${meetingCode}`, payload)
+      setMeeting(data)
+      setEditMode(false)
+      setMessage('Meeting updated')
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to update meeting')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!meeting) return
+    if (!confirm(`Delete meeting ${meeting.meeting_code || meeting.id}? This cannot be undone.`)) return
+    setSaving(true)
+    try {
+      await api.delete(`/meetings/${meetingCode}`)
+      navigate(-1)
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to delete meeting')
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <div className="loading">Loading meeting...</div>
+  if (!meeting) return <div className="loading">{message || 'Meeting not found'}</div>
+
+  const isParticipant = user && meeting.participants.includes(user.username)
+  const canAttend = user && !isParticipant && meeting.status !== 'completed' && meeting.status !== 'cancelled'
+  const availableTransitions = STATUS_OPTIONS.filter((s) => s !== meeting.status)
+  const scheduledTime = meeting.meeting_time || meeting.scheduled_at
+
+  return (
+    <div className="section">
+      <button className="btn-back" onClick={() => navigate(-1)}>← Back</button>
+
+      <div className="task-header">
+        <h2>📅 {meeting.meeting_code ? <CopyableCode code={meeting.meeting_code} /> : `#${meeting.id}`}</h2>
+        <div className="task-meta">
+          <span className={`badge status-${meeting.status}`}>{meeting.status}</span>
+          {meeting.project_code && <span className="text-dim">Project: {meeting.project_code}</span>}
+          {meeting.milestone_code && <span className="text-dim">Milestone: {meeting.milestone_code}</span>}
+        </div>
+      </div>
+
+      {message && (
+        <div
+          style={{
+            padding: '10px 12px',
+            marginBottom: '16px',
+            borderRadius: '8px',
+            background: message.toLowerCase().includes('fail') || message.toLowerCase().includes('error')
+              ? 'rgba(239,68,68,.12)'
+              : 'rgba(16,185,129,.12)',
+            border: `1px solid ${
+              message.toLowerCase().includes('fail') || message.toLowerCase().includes('error')
+                ? 'rgba(239,68,68,.35)'
+                : 'rgba(16,185,129,.35)'
+            }`,
+          }}
+        >
+          {message}
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '20px', alignItems: 'start' }}>
+        {/* Main content */}
+        <div className="monitor-card">
+          {editMode ? (
+            <div className="task-create-form">
+              <label>
+                Title
+                <input
+                  value={editForm.title}
+                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                />
+              </label>
+              <label>
+                Description
+                <textarea
+                  value={editForm.description}
+                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                  rows={6}
+                  style={{ width: '100%' }}
+                />
+              </label>
+              <label>
+                Scheduled Time
+                <input
+                  type="datetime-local"
+                  value={editForm.meeting_time ? dayjs(editForm.meeting_time).format('YYYY-MM-DDTHH:mm') : ''}
+                  onChange={(e) => setEditForm({ ...editForm, meeting_time: e.target.value ? new Date(e.target.value).toISOString() : '' })}
+                />
+              </label>
+              <label>
+                Duration (minutes)
+                <input
+                  type="number"
+                  value={editForm.duration_minutes}
+                  onChange={(e) => setEditForm({ ...editForm, duration_minutes: e.target.value })}
+                  min={0}
+                />
+              </label>
+              <div style={{ display: 'flex', gap: 8 }}>
+                <button className="btn-primary" disabled={saving} onClick={handleSave}>
+                  {saving ? 'Saving...' : 'Save'}
+                </button>
+                <button className="btn-back" onClick={() => setEditMode(false)}>Cancel</button>
+              </div>
+            </div>
+          ) : (
+            <>
+              <h3>{meeting.title}</h3>
+              {scheduledTime && (
+                <div style={{ marginTop: 8 }}>
+                  <strong>Scheduled:</strong> {dayjs(scheduledTime).format('YYYY-MM-DD HH:mm')}
+                  {meeting.duration_minutes && <span className="text-dim" style={{ marginLeft: 8 }}>({meeting.duration_minutes} min)</span>}
+                </div>
+              )}
+              {!scheduledTime && <div className="text-dim" style={{ marginTop: 8 }}>No scheduled time set.</div>}
+              {meeting.description && (
+                <p style={{ whiteSpace: 'pre-wrap', marginTop: 12 }}>{meeting.description}</p>
+              )}
+              {!meeting.description && <p className="text-dim" style={{ marginTop: 12 }}>No description provided.</p>}
+            </>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {/* Participants */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Participants ({meeting.participants.length})</h4>
+            {meeting.participants.length > 0 ? (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                {meeting.participants.map((p) => (
+                  <span key={p} className="badge">
+                    {p}
+                    {user && p === user.username && ' (you)'}
+                  </span>
+                ))}
+              </div>
+            ) : (
+              <span className="text-dim">No participants yet</span>
+            )}
+            {canAttend && (
+              <button
+                className="btn-primary"
+                style={{ marginTop: 8, width: '100%' }}
+                disabled={saving}
+                onClick={handleAttend}
+              >
+                Attend
+              </button>
+            )}
+          </div>
+
+          {/* Status transitions */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Status</h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {availableTransitions.map((s) => (
+                <button
+                  key={s}
+                  className="btn-secondary"
+                  disabled={saving}
+                  onClick={() => handleTransition(s)}
+                  style={{ textAlign: 'left' }}
+                >
+                  → {s}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Actions</h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {!editMode && (
+                <button className="btn-secondary" onClick={() => setEditMode(true)}>
+                  Edit
+                </button>
+              )}
+              <button className="btn-danger" disabled={saving} onClick={handleDelete}>
+                Delete
+              </button>
+            </div>
+          </div>
+
+          {/* Info */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Info</h4>
+            <div className="text-dim" style={{ fontSize: '0.9em' }}>
+              <div>Created: {new Date(meeting.created_at).toLocaleString()}</div>
+              {meeting.updated_at && <div>Updated: {new Date(meeting.updated_at).toLocaleString()}</div>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/MilestoneDetailPage.tsx

@@ -0,0 +1,398 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Milestone, MilestoneProgress, Task, Project, ProjectMember } from '@/types'
+import dayjs from 'dayjs'
+import CreateTaskModal from '@/components/CreateTaskModal'
+import MilestoneFormModal from '@/components/MilestoneFormModal'
+import { useAuth } from '@/hooks/useAuth'
+import CopyableCode from '@/components/CopyableCode'
+
+interface MilestoneTask {
+  id: number
+  title: string
+  description?: string
+  status: string
+  task_code?: string
+  task_status?: string
+  estimated_effort?: number
+  estimated_working_time?: string
+  started_on?: string
+  finished_on?: string
+  assignee_id?: number
+  created_at: string
+}
+
+export default function MilestoneDetailPage() {
+  const { milestoneCode } = useParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const [milestone, setMilestone] = useState<Milestone | null>(null)
+  const [project, setProject] = useState<Project | null>(null)
+  const [members, setMembers] = useState<ProjectMember[]>([])
+  const [progress, setProgress] = useState<MilestoneProgress | null>(null)
+  const [tasks, setTasks] = useState<MilestoneTask[]>([])
+  const [supports, setSupports] = useState<any[]>([])
+  const [meetings, setMeetings] = useState<any[]>([])
+  const [activeTab, setActiveTab] = useState<'tasks' | 'supports' | 'meetings'>('tasks')
+  const [showCreateTask, setShowCreateTask] = useState(false)
+  const [showEditMilestone, setShowEditMilestone] = useState(false)
+  const [showCreateSupport, setShowCreateSupport] = useState(false)
+  const [showCreateMeeting, setShowCreateMeeting] = useState(false)
+  const [newTitle, setNewTitle] = useState('')
+  const [newDesc, setNewDesc] = useState('')
+  const [projectCode, setProjectCode] = useState('')
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+  const [showCloseConfirm, setShowCloseConfirm] = useState(false)
+  const [closeReason, setCloseReason] = useState('')
+  const [preflight, setPreflight] = useState<{ freeze?: { allowed: boolean; reason: string | null }; start?: { allowed: boolean; reason: string | null } } | null>(null)
+
+  const fetchMilestone = () => {
+    if (!milestoneCode) return
+    api.get<Milestone>(`/milestones/${milestoneCode}`).then(({ data }) => {
+      setMilestone(data)
+      if (data.project_id) {
+        api.get<Project>(`/projects/${data.project_id}`).then(({ data: proj }) => {
+          setProject(proj)
+          setProjectCode(proj.project_code || '')
+        })
+        api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
+        if (data.project_code && data.milestone_code) {
+          fetchPreflight(data.project_code, data.milestone_code)
+        }
+      }
+      if (data.milestone_code) {
+        api.get<MilestoneProgress>(`/milestones/${data.milestone_code}/progress`).then(({ data: prog }) => setProgress(prog)).catch(() => {})
+      }
+    })
+  }
+
+  const fetchPreflight = (projectCode: string, milestoneCode: string) => {
+    api.get(`/projects/${projectCode}/milestones/${milestoneCode}/actions/preflight`)
+      .then(({ data }) => setPreflight(data))
+      .catch(() => setPreflight(null))
+  }
+
+  useEffect(() => {
+    fetchMilestone()
+  }, [milestoneCode])
+
+  const refreshMilestoneItems = () => {
+    if (!projectCode || !milestone?.milestone_code) return
+    api.get<MilestoneTask[]>(`/tasks/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setTasks(data)).catch(() => {})
+    api.get<any[]>(`/supports/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setSupports(data)).catch(() => {})
+    api.get<any[]>(`/meetings/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setMeetings(data)).catch(() => {})
+  }
+
+  useEffect(() => {
+    refreshMilestoneItems()
+  }, [projectCode, milestone?.milestone_code])
+
+  const createItem = async (type: 'supports' | 'meetings') => {
+    if (!newTitle.trim() || !projectCode || !milestone?.milestone_code) return
+    const payload = {
+      title: newTitle,
+      description: newDesc || null,
+    }
+    await api.post(`/${type}/${projectCode}/${milestone.milestone_code}`, payload)
+    setNewTitle('')
+    setNewDesc('')
+    setShowCreateSupport(false)
+    setShowCreateMeeting(false)
+    refreshMilestoneItems()
+  }
+
+  const currentMemberRole = useMemo(
+    () => members.find((m) => m.user_id === user?.id)?.role,
+    [members, user?.id]
+  )
+  const canEditMilestone = Boolean(milestone && project && user && (
+    user.is_admin ||
+    user.id === project.owner_id ||
+    user.id === milestone.created_by_id ||
+    currentMemberRole === 'admin'
+  ))
+
+  const msStatus = milestone?.status
+  const isUndergoing = msStatus === 'undergoing'
+  const isTerminal = msStatus === 'completed' || msStatus === 'closed'
+
+  // --- Milestone action handlers (P8.2) ---
+  const performAction = async (action: string, body?: Record<string, unknown>) => {
+    if (!milestone || !project) return
+    setActionLoading(action)
+    setActionError(null)
+    try {
+      await api.post(`/projects/${project.project_code}/milestones/${milestone.milestone_code}/actions/${action}`, body ?? {})
+      fetchMilestone()
+      refreshMilestoneItems()
+      if (project.project_code && milestone.milestone_code) {
+        fetchPreflight(project.project_code, milestone.milestone_code)
+      }
+    } catch (err: any) {
+      const detail = err?.response?.data?.detail
+      setActionError(typeof detail === 'string' ? detail : `${action} failed`)
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleFreeze = () => performAction('freeze')
+  const handleStart = () => performAction('start')
+  const handleClose = () => {
+    performAction('close', closeReason ? { reason: closeReason } : {})
+    setShowCloseConfirm(false)
+    setCloseReason('')
+  }
+
+  if (!milestone) return <div className="loading">Loading...</div>
+
+  const renderTaskRow = (t: MilestoneTask) => (
+    <tr key={t.id} className={t.task_code ? 'clickable' : ''} onClick={() => t.task_code && navigate(`/tasks/${t.task_code}`)}>
+      <td>{t.task_code || '—'}</td>
+      <td className="task-title">{t.title}</td>
+      <td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
+      <td>{t.estimated_effort || '-'}</td>
+      <td>{t.estimated_working_time || '-'}</td>
+    </tr>
+  )
+
+  return (
+    <div className="milestone-detail">
+      <button className="btn-back" onClick={() => navigate('/milestones')}>← Back to Milestones</button>
+
+      <div className="task-header">
+        <h2>🏁 {milestone.milestone_code && <><CopyableCode code={milestone.milestone_code} /> </>}{milestone.title}</h2>
+        <div className="task-meta">
+          <span className={`badge status-${milestone.status}`}>{milestone.status}</span>
+          {milestone.due_date && <span className="text-dim">Due {dayjs(milestone.due_date).format('YYYY-MM-DD')}</span>}
+          {milestone.planned_release_date && <span className="text-dim">Planned Release: {dayjs(milestone.planned_release_date).format('YYYY-MM-DD')}</span>}
+          {milestone.started_at && <span className="text-dim">Started: {dayjs(milestone.started_at).format('YYYY-MM-DD HH:mm')}</span>}
+        </div>
+        {canEditMilestone && msStatus === 'open' && <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setShowEditMilestone(true)}>Edit Milestone</button>}
+        {canEditMilestone && (msStatus === 'freeze' || msStatus === 'undergoing') && (
+          <span className="text-dim" style={{ marginTop: 8, display: 'inline-block' }}>
+            ⚠ Milestone is {msStatus} — scope fields are locked
+          </span>
+        )}
+
+        {/* Milestone status action buttons (P8.2) */}
+        {!isTerminal && (
+          <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+            {msStatus === 'open' && (
+              <span title={preflight?.freeze?.allowed === false ? preflight.freeze.reason ?? '' : ''}>
+                <button
+                  className="btn-primary"
+                  disabled={actionLoading === 'freeze' || preflight?.freeze?.allowed === false}
+                  onClick={handleFreeze}
+                  style={preflight?.freeze?.allowed === false ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
+                >
+                  {actionLoading === 'freeze' ? '⏳ Freezing...' : '🧊 Freeze'}
+                </button>
+                {preflight?.freeze?.allowed === false && (
+                  <span className="text-dim" style={{ marginLeft: 8, fontSize: '0.85em' }}>
+                    ⚠ {preflight.freeze.reason}
+                  </span>
+                )}
+              </span>
+            )}
+            {msStatus === 'freeze' && (
+              <span title={preflight?.start?.allowed === false ? preflight.start.reason ?? '' : ''}>
+                <button
+                  className="btn-primary"
+                  disabled={actionLoading === 'start' || preflight?.start?.allowed === false}
+                  onClick={handleStart}
+                  style={preflight?.start?.allowed === false ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
+                >
+                  {actionLoading === 'start' ? '⏳ Starting...' : '▶️ Start'}
+                </button>
+                {preflight?.start?.allowed === false && (
+                  <span className="text-dim" style={{ marginLeft: 8, fontSize: '0.85em' }}>
+                    ⚠ {preflight.start.reason}
+                  </span>
+                )}
+              </span>
+            )}
+            {(msStatus === 'open' || msStatus === 'freeze' || msStatus === 'undergoing') && (
+              <>
+                {!showCloseConfirm ? (
+                  <button
+                    className="btn-transition"
+                    style={{ color: 'var(--color-danger, #e74c3c)' }}
+                    onClick={() => setShowCloseConfirm(true)}
+                  >
+                    ✖ Close
+                  </button>
+                ) : (
+                  <div className="card" style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '8px 12px' }}>
+                    <input
+                      placeholder="Reason (optional)"
+                      value={closeReason}
+                      onChange={(e) => setCloseReason(e.target.value)}
+                      style={{ minWidth: 180 }}
+                    />
+                    <button
+                      className="btn-primary"
+                      style={{ backgroundColor: 'var(--color-danger, #e74c3c)' }}
+                      disabled={actionLoading === 'close'}
+                      onClick={handleClose}
+                    >
+                      {actionLoading === 'close' ? 'Closing...' : 'Confirm Close'}
+                    </button>
+                    <button className="btn-back" onClick={() => { setShowCloseConfirm(false); setCloseReason('') }}>Cancel</button>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        )}
+        {actionError && <p style={{ color: 'var(--color-danger, #e74c3c)', marginTop: 4 }}>⚠️ {actionError}</p>}
+      </div>
+
+      {milestone.description && (
+        <div className="section">
+          <h3>Description</h3>
+          <p>{milestone.description}</p>
+        </div>
+      )}
+
+      {progress && (
+        <div className="section">
+          <h3>Progress (Tasks: {progress.completed}/{progress.total})</h3>
+          <div className="progress-bar-container">
+            <div className="progress-bar" style={{ width: `${progress.progress_pct}%` }}>
+              {progress.progress_pct.toFixed(0)}%
+            </div>
+          </div>
+          {progress.time_progress_pct !== null && (
+            <>
+              <p className="text-dim" style={{ marginTop: 8 }}>Time Progress</p>
+              <div className="progress-bar-container">
+                <div className="progress-bar" style={{ width: `${progress.time_progress_pct}%`, backgroundColor: 'var(--color-accent)' }}>
+                  {progress.time_progress_pct.toFixed(0)}%
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      <div className="section">
+        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
+          {!isTerminal && !isUndergoing && canEditMilestone && (
+            <>
+              <button className="btn-primary" onClick={() => { setActiveTab('tasks'); setShowCreateTask(true) }}>+ Create Task</button>
+              <button className="btn-primary" onClick={() => { setActiveTab('supports'); setShowCreateSupport(true) }}>+ Create Support</button>
+              <button className="btn-primary" onClick={() => { setActiveTab('meetings'); setShowCreateMeeting(true) }}>+ Schedule Meeting</button>
+            </>
+          )}
+          {(isUndergoing || isTerminal) && <span className="text-dim">{isTerminal ? `Milestone is ${msStatus}` : 'Milestone is undergoing'} — cannot add new items</span>}
+        </div>
+
+        <MilestoneFormModal
+          isOpen={showEditMilestone}
+          onClose={() => setShowEditMilestone(false)}
+          milestone={milestone}
+          lockProject
+          onSaved={(data) => {
+            setMilestone(data)
+            fetchMilestone()
+          }}
+        />
+
+        <CreateTaskModal
+          isOpen={showCreateTask}
+          onClose={() => setShowCreateTask(false)}
+          initialProjectCode={milestone.project_code || ''}
+          initialMilestoneCode={milestone.milestone_code || ''}
+          lockProject
+          lockMilestone
+          onCreated={() => {
+            setActiveTab('tasks')
+            refreshMilestoneItems()
+          }}
+        />
+
+        {(showCreateSupport || showCreateMeeting) && (
+          <div className="card" style={{ marginBottom: 16 }}>
+            <input 
+              placeholder="Title" 
+              value={newTitle} 
+              onChange={(e) => setNewTitle(e.target.value)}
+              style={{ marginBottom: 8 }}
+            />
+            <textarea 
+              placeholder="Description (optional)" 
+              value={newDesc} 
+              onChange={(e) => setNewDesc(e.target.value)}
+              style={{ marginBottom: 8, width: '100%' }}
+            />
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button className="btn-primary" onClick={() => createItem(activeTab as 'supports' | 'meetings')}>Create</button>
+              <button className="btn-back" onClick={() => { setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
+            </div>
+          </div>
+        )}
+
+        <div className="tabs">
+          <button className={`tab ${activeTab === 'tasks' ? 'active' : ''}`} onClick={() => setActiveTab('tasks')}>
+            Tasks ({tasks.length})
+          </button>
+          <button className={`tab ${activeTab === 'supports' ? 'active' : ''}`} onClick={() => setActiveTab('supports')}>
+            Supports ({supports.length})
+          </button>
+          <button className={`tab ${activeTab === 'meetings' ? 'active' : ''}`} onClick={() => setActiveTab('meetings')}>
+            Meetings ({meetings.length})
+          </button>
+        </div>
+
+        <div className="tab-content">
+          {activeTab === 'tasks' && (
+            <table>
+              <thead><tr><th>Task Code</th><th>Title</th><th>Status</th><th>Effort</th><th>Est. Time</th></tr></thead>
+              <tbody>
+                {tasks.map(renderTaskRow)}
+                {tasks.length === 0 && <tr><td colSpan={5} className="empty">No tasks</td></tr>}
+              </tbody>
+            </table>
+          )}
+
+          {activeTab === 'supports' && (
+            <table>
+              <thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <tbody>
+                {supports.map((i) => (
+                  <tr key={i.id} className={i.support_code ? 'clickable' : ''} onClick={() => i.support_code && navigate(`/supports/${i.support_code}`)}>
+                    <td>{i.support_code || '—'}</td>
+                    <td className="task-title">{i.title}</td>
+                    <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
+                    <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
+                  </tr>
+                ))}
+                {supports.length === 0 && <tr><td colSpan={4} className="empty">No support requests</td></tr>}
+              </tbody>
+            </table>
+          )}
+
+          {activeTab === 'meetings' && (
+            <table>
+              <thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <tbody>
+                {meetings.map((i) => (
+                  <tr key={i.id} className={i.meeting_code ? 'clickable' : ''} onClick={() => i.meeting_code && navigate(`/meetings/${i.meeting_code}`)}>
+                    <td>{i.meeting_code || '—'}</td>
+                    <td className="task-title">{i.title}</td>
+                    <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
+                    <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
+                  </tr>
+                ))}
+                {meetings.length === 0 && <tr><td colSpan={4} className="empty">No meetings</td></tr>}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/MilestonesPage.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Milestone, Project } from '@/types'
+import dayjs from 'dayjs'
+import MilestoneFormModal from '@/components/MilestoneFormModal'
+
+export default function MilestonesPage() {
+  const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [projects, setProjects] = useState<Project[]>([])
+  const [projectFilter, setProjectFilter] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+  const navigate = useNavigate()
+
+  const fetchMilestones = () => {
+    const params = projectFilter ? `?project_code=${projectFilter}` : ''
+    api.get<Milestone[]>(`/milestones${params}`).then(({ data }) => setMilestones(data))
+  }
+
+  useEffect(() => {
+    api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
+  }, [])
+
+  useEffect(() => { fetchMilestones() }, [projectFilter])
+
+  return (
+    <div className="milestones-page">
+      <div className="page-header">
+        <h2>🏁 Milestones ({milestones.length})</h2>
+        <button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(true)}>
+          + New Milestone
+        </button>
+      </div>
+
+      <div className="filters">
+        <select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
+          <option value="">All projects</option>
+          {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
+        </select>
+      </div>
+
+      <MilestoneFormModal
+        isOpen={showCreate}
+        onClose={() => setShowCreate(false)}
+        initialProjectCode={projectFilter || undefined}
+        lockProject={Boolean(projectFilter)}
+        onSaved={() => fetchMilestones()}
+      />
+
+      <div className="milestone-grid">
+        {milestones.map((ms) => (
+          <div key={ms.id} className="milestone-card" onClick={() => ms.milestone_code && navigate(`/milestones/${ms.milestone_code}`)}>
+            <div className="milestone-card-header">
+              <span className={`badge status-${ms.status}`}>{ms.status}</span>
+              <h3>{ms.title}</h3>{ms.milestone_code && <span className="badge" style={{ marginLeft: 8, fontSize: '0.75em' }}>{ms.milestone_code}</span>}
+            </div>
+            <p className="project-desc">{ms.description || 'No description'}</p>
+            <div className="project-meta">
+              {ms.planned_release_date && <span>Release: {dayjs(ms.planned_release_date).format('YYYY-MM-DD')}</span>}
+              {ms.due_date && <span>Due: {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
+              <span>Created {dayjs(ms.created_at).format('YYYY-MM-DD')}</span>
+            </div>
+          </div>
+        ))}
+        {milestones.length === 0 && <p className="empty">No milestones</p>}
+      </div>
+    </div>
+  )
+}

src/pages/MonitorPage.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useMemo, useState } from 'react'
+import api from '@/services/api'
+
+interface ServerRow {
+  server_id: number
+  identifier: string
+  display_name: string
+  online: boolean
+  openclaw_version?: string | null
+  plugin_version?: string | null
+  cpu_pct?: number | null
+  mem_pct?: number | null
+  disk_pct?: number | null
+  swap_pct?: number | null
+  agents: Array<{ id?: string; name?: string; status?: string }>
+  nginx_installed?: boolean | null
+  nginx_sites?: string[]
+  last_seen_at?: string | null
+}
+
+interface OverviewData {
+  tasks: {
+    total_tasks: number
+    new_tasks_24h: number
+    processed_tasks_24h: number
+    computed_at: string
+  }
+  servers: ServerRow[]
+  generated_at: string
+}
+
+interface AdminUser {
+  id: number
+  is_admin: boolean
+}
+
+interface ServerItem {
+  server_id: number
+  identifier: string
+  display_name: string
+  online: boolean
+  openclaw_version?: string | null
+  plugin_version?: string | null
+}
+
+export default function MonitorPage() {
+  const [data, setData] = useState<OverviewData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [isAdmin, setIsAdmin] = useState(false)
+  const [servers, setServers] = useState<ServerItem[]>([])
+
+  const [serverForm, setServerForm] = useState({ identifier: '', display_name: '' })
+
+  const canAdmin = useMemo(() => !!localStorage.getItem('token') && isAdmin, [isAdmin])
+
+  const load = async () => {
+    try {
+      const res = await api.get<OverviewData>('/monitor/public/overview')
+      setData(res.data)
+      const token = localStorage.getItem('token')
+      if (token) {
+        try {
+          const me = await api.get<AdminUser>('/auth/me')
+          setIsAdmin(!!me.data.is_admin)
+        } catch {
+          setIsAdmin(false)
+        }
+      } else {
+        setIsAdmin(false)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadAdminData = async () => {
+    if (!canAdmin) return
+    const s = await api.get<ServerItem[]>('/monitor/admin/servers')
+    setServers(s.data)
+  }
+
+  useEffect(() => {
+    load()
+    const t = setInterval(load, 30000)
+    return () => clearInterval(t)
+  }, [])
+
+  useEffect(() => {
+    loadAdminData()
+  }, [canAdmin])
+
+  const addServer = async () => {
+    await api.post('/monitor/admin/servers', serverForm)
+    setServerForm({ identifier: '', display_name: '' })
+    await loadAdminData()
+  }
+
+  const deleteServer = async (id: number) => {
+    await api.delete('/monitor/admin/servers/' + id)
+    await loadAdminData()
+  }
+
+  const generateApiKey = async (id: number) => {
+    const r = await api.post<{ server_id: number; api_key: string; message: string }>('/monitor/admin/servers/' + id + '/api-key')
+    const apiKey = r.data.api_key
+    try {
+      await navigator.clipboard.writeText(apiKey)
+      alert('API key generated and copied to clipboard:\n\n' + apiKey)
+    } catch {
+      alert('API key generated:\n\n' + apiKey + '\n\nPlease copy and store it securely. It will not be shown again.')
+    }
+  }
+
+  const revokeApiKey = async (id: number) => {
+    if (!confirm('Revoke this server API key? The plugin will stop authenticating until a new key is generated.')) return
+    await api.delete('/monitor/admin/servers/' + id + '/api-key')
+    alert('API key revoked.')
+  }
+
+  if (loading) return <div className="loading">Monitor loading...</div>
+  if (!data) return <div className="loading">Monitor load failed</div>
+
+  return (
+    <div className="dashboard monitor-page">
+      <h2>📡 Monitor</h2>
+
+      <div className="stats-grid">
+        <div className="stat-card total">
+          <span className="stat-number">{data.tasks.total_tasks}</span>
+          <span className="stat-label">Total Tasks</span>
+        </div>
+        <div className="stat-card" style={{ borderLeftColor: 'var(--accent)' }}>
+          <span className="stat-number">{data.tasks.new_tasks_24h}</span>
+          <span className="stat-label">New (24h)</span>
+        </div>
+        <div className="stat-card" style={{ borderLeftColor: 'var(--success)' }}>
+          <span className="stat-number">{data.tasks.processed_tasks_24h}</span>
+          <span className="stat-label">Processed (24h)</span>
+        </div>
+      </div>
+
+      <div className="section">
+        <h3>Server Monitoring</h3>
+        {data.servers.length === 0 ? <p className="empty">No monitored servers</p> : (
+          <div className="monitor-grid">
+            {data.servers.map((s) => (
+              <div key={s.server_id} className="monitor-card">
+                <div className="monitor-card-header">
+                  <div>
+                    <strong>{s.display_name}</strong>
+                    <div className="text-dim">{s.identifier}</div>
+                  </div>
+                  <span className={'badge ' + (s.online ? 'status-online' : 'status-offline')}>{s.online ? 'online' : 'offline'}</span>
+                </div>
+                <div className="monitor-metrics">
+                  CPU {s.cpu_pct ?? '-'}% · MEM {s.mem_pct ?? '-'}% · DISK {s.disk_pct ?? '-'}% · SWAP {s.swap_pct ?? '-'}%
+                </div>
+                <div className="text-dim">OpenClaw: {s.openclaw_version || '-'}</div>
+                <div className="text-dim">Client: {s.plugin_version || '-'}</div>
+                <div className="text-dim">Agents: {s.agents?.length || 0}</div>
+                <div className="text-dim">Nginx: {s.nginx_installed == null ? '-' : s.nginx_installed ? 'installed' : 'not detected'}</div>
+                {!!s.nginx_sites?.length && (
+                  <div className="text-dim">Sites: {s.nginx_sites.join(', ')}</div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {canAdmin && (
+        <div className="section">
+          <h3>Admin</h3>
+
+          <div className="monitor-admin">
+            <div className="monitor-card">
+              <h4>Servers</h4>
+              <div className="inline-form">
+                <input placeholder='identifier' value={serverForm.identifier} onChange={(e) => setServerForm({ ...serverForm, identifier: e.target.value })} />
+                <input placeholder='display_name' value={serverForm.display_name} onChange={(e) => setServerForm({ ...serverForm, display_name: e.target.value })} />
+                <button className="btn-primary" onClick={addServer}>Add Server</button>
+              </div>
+              <ul>
+                {servers.map((s) => (
+                  <li key={s.server_id}>
+                    {s.display_name} ({s.identifier})
+                    <button className="btn-secondary" onClick={() => generateApiKey(s.server_id)} style={{ marginLeft: 8 }}>Generate API Key</button>
+                    <button className="btn-secondary" onClick={() => revokeApiKey(s.server_id)} style={{ marginLeft: 8 }}>Revoke API Key</button>
+                    <button className="btn-danger" onClick={() => deleteServer(s.server_id)} style={{ marginLeft: 8 }}>Delete</button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/NotificationsPage.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Notification } from '@/types'
+import dayjs from 'dayjs'
+
+export default function NotificationsPage() {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [unreadOnly, setUnreadOnly] = useState(false)
+  const [unreadCount, setUnreadCount] = useState(0)
+  const navigate = useNavigate()
+
+  const fetchNotifications = () => {
+    const params = new URLSearchParams()
+    if (unreadOnly) params.set('unread_only', 'true')
+    api.get<Notification[]>(`/notifications?${params}`).then(({ data }) => setNotifications(data))
+    api.get<{ count: number }>('/notifications/count').then(({ data }) => setUnreadCount(data.count)).catch(() => {})
+  }
+
+  useEffect(() => { fetchNotifications() }, [unreadOnly])
+
+  const markRead = async (id: number) => {
+    await api.post(`/notifications/${id}/read`)
+    fetchNotifications()
+  }
+
+  const markAllRead = async () => {
+    await api.post('/notifications/read-all')
+    fetchNotifications()
+  }
+
+  return (
+    <div className="notifications-page">
+      <div className="page-header">
+        <h2>🔔 Notifications {unreadCount > 0 && <span className="badge" style={{ background: 'var(--danger)' }}>{unreadCount}</span>}</h2>
+        {unreadCount > 0 && (
+          <button className="btn-primary" onClick={markAllRead}>Mark all read</button>
+        )}
+      </div>
+
+      <div className="filters">
+        <label className="filter-check">
+          <input type="checkbox" checked={unreadOnly} onChange={(e) => setUnreadOnly(e.target.checked)} />
+          Show unread only
+        </label>
+      </div>
+
+      <div className="notification-list">
+        {notifications.map((n) => (
+          <div
+            key={n.id}
+            className={`notification-item ${n.is_read ? 'read' : 'unread'}`}
+            onClick={() => {
+              if (!n.is_read) markRead(n.id)
+              if (n.task_code) navigate(`/tasks/${n.task_code}`)
+            }}
+          >
+            <div className="notification-dot">{n.is_read ? '' : '●'}</div>
+            <div className="notification-body">
+              <p>{n.message}</p>
+              <span className="text-dim">{dayjs(n.created_at).format('MM-DD HH:mm')}</span>
+            </div>
+          </div>
+        ))}
+        {notifications.length === 0 && <p className="empty">No notifications</p>}
+      </div>
+    </div>
+  )
+}

src/pages/OidcCallbackPage.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { getLogoUrl } from '@/runtime'
+
+interface Props {
+  onToken: (token: string) => Promise<void>
+}
+
+/**
+ * Lands here after the backend OIDC callback redirect.
+ * - sign-in:  URL fragment `#token=<jwt>`  → apply token, go to dashboard
+ * - self-link: query `?oidc_linked=1`        → success notice, go to /users
+ * - failure:  query `?oidc_error=<code>`     → back to /login with the code
+ */
+export default function OidcCallbackPage({ onToken }: Props) {
+  const navigate = useNavigate()
+  const [msg, setMsg] = useState('Completing sign-in…')
+  const ran = useRef(false)
+
+  useEffect(() => {
+    if (ran.current) return
+    ran.current = true
+
+    const hash = new URLSearchParams(window.location.hash.replace(/^#/, ''))
+    const query = new URLSearchParams(window.location.search)
+    const token = hash.get('token')
+    const oidcError = query.get('oidc_error')
+    const linked = query.get('oidc_linked')
+
+    if (oidcError) {
+      navigate(`/login?oidc_error=${encodeURIComponent(oidcError)}`, { replace: true })
+      return
+    }
+    if (linked) {
+      setMsg('OIDC account linked. Redirecting…')
+      const t = setTimeout(() => navigate('/users', { replace: true }), 1200)
+      return () => clearTimeout(t)
+    }
+    if (token) {
+      onToken(token)
+        .then(() => navigate('/', { replace: true }))
+        .catch(() => navigate('/login?oidc_error=token_rejected', { replace: true }))
+      return
+    }
+    navigate('/login?oidc_error=missing_token', { replace: true })
+  }, [navigate, onToken])
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1><img src={getLogoUrl()} className="brand-logo" alt="" /> HarborForge</h1>
+        <p className="subtitle">{msg}</p>
+      </div>
+    </div>
+  )
+}

src/pages/OidcSettingsPage.tsx

@@ -0,0 +1,171 @@
+import { useEffect, useState } from 'react'
+import api from '@/services/api'
+import { useAuth } from '@/hooks/useAuth'
+
+interface Settings {
+  enabled: boolean
+  issuer: string | null
+  client_id: string | null
+  has_client_secret: boolean
+  redirect_uri: string | null
+  scopes: string | null
+  post_login_redirect: string | null
+  admin_role: string
+  oidc_only: boolean
+  effective_enabled: boolean
+  source: string
+}
+
+export default function OidcSettingsPage() {
+  const { user } = useAuth()
+  const isAdmin = user?.is_admin === true
+
+  const [loaded, setLoaded] = useState<Settings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState('')
+  const [form, setForm] = useState({
+    enabled: false,
+    issuer: '',
+    client_id: '',
+    client_secret: '',
+    redirect_uri: '',
+    scopes: 'openid email profile',
+    post_login_redirect: '',
+    admin_role: 'admin',
+  })
+
+  useEffect(() => {
+    if (!isAdmin) { setLoading(false); return }
+    api.get<Settings>('/auth/oidc/settings')
+      .then(({ data }) => {
+        setLoaded(data)
+        setForm({
+          enabled: data.enabled,
+          issuer: data.issuer || '',
+          client_id: data.client_id || '',
+          client_secret: '',
+          redirect_uri: data.redirect_uri || '',
+          scopes: data.scopes || 'openid email profile',
+          post_login_redirect: data.post_login_redirect || '',
+          admin_role: data.admin_role || 'admin',
+        })
+      })
+      .catch((e) => setMessage(e.response?.data?.detail || 'Failed to load OIDC settings'))
+      .finally(() => setLoading(false))
+  }, [isAdmin])
+
+  const save = async () => {
+    setSaving(true)
+    setMessage('')
+    try {
+      const payload: Record<string, any> = {
+        enabled: form.enabled,
+        issuer: form.issuer.trim(),
+        client_id: form.client_id.trim(),
+        redirect_uri: form.redirect_uri.trim(),
+        scopes: form.scopes.trim(),
+        post_login_redirect: form.post_login_redirect.trim(),
+        admin_role: form.admin_role.trim() || 'admin',
+      }
+      if (form.client_secret) payload.client_secret = form.client_secret
+      const { data } = await api.put<Settings>('/auth/oidc/settings', payload)
+      setLoaded(data)
+      setForm((f) => ({ ...f, client_secret: '' }))
+      setMessage('OIDC settings saved successfully')
+    } catch (e: any) {
+      setMessage(e.response?.data?.detail || 'Failed to save OIDC settings')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <div className="loading">Loading OIDC settings...</div>
+  if (!isAdmin) {
+    return (
+      <div className="section">
+        <h2>🔐 OIDC Settings</h2>
+        <p className="empty">Admin access required.</p>
+      </div>
+    )
+  }
+
+  const callbackHint = form.redirect_uri.trim() || loaded?.redirect_uri || '(set the Redirect / Callback URL below)'
+
+  return (
+    <div className="section">
+      <div className="page-header">
+        <div>
+          <h2>🔐 OIDC Settings</h2>
+          <div className="text-dim">Configure the OpenID Connect provider. Saved values override environment defaults.</div>
+        </div>
+      </div>
+
+      {message && (
+        <div style={{
+          padding: '10px 12px', marginBottom: 16, borderRadius: 8,
+          background: message.includes('success') ? 'rgba(70,180,135,.14)' : 'rgba(226,85,60,.14)',
+          border: `1px solid ${message.includes('success') ? 'rgba(70,180,135,.4)' : 'rgba(226,85,60,.4)'}`,
+        }}>{message}</div>
+      )}
+
+      <div className="monitor-card" style={{ marginBottom: 16 }}>
+        <div className="monitor-card-header">
+          <div style={{ fontWeight: 600 }}>Status</div>
+          <span className={'badge ' + (loaded?.effective_enabled ? 'status-online' : 'status-offline')}>
+            {loaded?.effective_enabled ? 'OIDC active' : 'OIDC inactive'}
+          </span>
+        </div>
+        <div className="monitor-metrics">
+          config source: <b>{loaded?.source}</b> · OIDC-only mode (deploy env): <b>{loaded?.oidc_only ? 'on' : 'off'}</b>
+        </div>
+        <div style={{ marginTop: 8 }}>
+          <div className="text-dim">Register this Redirect / Callback URL at your identity provider:</div>
+          <code style={{ display: 'block', marginTop: 6, wordBreak: 'break-all' }}>{callbackHint}</code>
+        </div>
+      </div>
+
+      <div className="task-create-form" style={{ maxWidth: 640 }}>
+        <label className="filter-check">
+          <input type="checkbox" checked={form.enabled} onChange={(e) => setForm({ ...form, enabled: e.target.checked })} />
+          Enable OIDC sign-in
+        </label>
+        <label>
+          Issuer (OIDC source)
+          <input placeholder="https://idp.example.com" value={form.issuer} onChange={(e) => setForm({ ...form, issuer: e.target.value })} />
+        </label>
+        <label>
+          Client ID
+          <input value={form.client_id} onChange={(e) => setForm({ ...form, client_id: e.target.value })} />
+        </label>
+        <label>
+          Client Secret
+          <input type="password" placeholder={loaded?.has_client_secret ? '•••••• (leave blank to keep current)' : 'client secret'} value={form.client_secret} onChange={(e) => setForm({ ...form, client_secret: e.target.value })} />
+        </label>
+        <label>
+          Redirect / Callback URL
+          <input placeholder="https://hf-api.example.com/auth/oidc/callback" value={form.redirect_uri} onChange={(e) => setForm({ ...form, redirect_uri: e.target.value })} />
+        </label>
+        <label>
+          Scopes
+          <input value={form.scopes} onChange={(e) => setForm({ ...form, scopes: e.target.value })} />
+        </label>
+        <label>
+          Post-login redirect (frontend)
+          <input placeholder="https://hf.example.com/oidc/callback" value={form.post_login_redirect} onChange={(e) => setForm({ ...form, post_login_redirect: e.target.value })} />
+        </label>
+        <label>
+          Admin role (bootstrap)
+          <input placeholder="admin" value={form.admin_role} onChange={(e) => setForm({ ...form, admin_role: e.target.value })} />
+        </label>
+        <p className="text-dim">
+          OIDC-only bootstrap: before any admin is linked, an IdP user whose token carries this role
+          auto-connects to the HarborForge admin account on first sign-in. Disables itself once an admin is bound.
+        </p>
+        <button className="btn-primary" disabled={saving} onClick={save}>
+          {saving ? 'Saving...' : 'Save OIDC Settings'}
+        </button>
+      </div>
+    </div>
+  )
+}

src/pages/ProjectDetailPage.tsx

@@ -0,0 +1,163 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Project, ProjectMember, Milestone } from '@/types'
+import dayjs from 'dayjs'
+import { useAuth } from '@/hooks/useAuth'
+import ProjectFormModal from '@/components/ProjectFormModal'
+import MilestoneFormModal from '@/components/MilestoneFormModal'
+import CopyableCode from '@/components/CopyableCode'
+
+export default function ProjectDetailPage() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const [project, setProject] = useState<Project | null>(null)
+  const [members, setMembers] = useState<ProjectMember[]>([])
+  const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [showAddMember, setShowAddMember] = useState(false)
+  const [showMilestoneModal, setShowMilestoneModal] = useState(false)
+  const [showProjectEdit, setShowProjectEdit] = useState(false)
+  const [newMemberUserId, setNewMemberUserId] = useState(1)
+  const [newMemberRole, setNewMemberRole] = useState('developer')
+  const [users, setUsers] = useState<any[]>([])
+  const [roles, setRoles] = useState<any[]>([])
+
+  const fetchProject = () => {
+    api.get<Project>(`/projects/${id}`).then(({ data }) => setProject(data))
+    api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
+    api.get<Milestone[]>(`/projects/${id}/milestones`).then(({ data }) => setMilestones(data))
+  }
+
+  useEffect(() => {
+    fetchProject()
+    api.get('/users').then(r => setUsers(r.data)).catch(() => {})
+    api.get('/roles').then(r => setRoles(r.data)).catch(() => {})
+  }, [id])
+
+  const currentMemberRole = useMemo(
+    () => members.find((m) => m.user_id === user?.id)?.role,
+    [members, user?.id]
+  )
+  const canEditProject = Boolean(project && user && (user.is_admin || user.id === project.owner_id || currentMemberRole === 'admin'))
+
+  const addMember = async () => {
+    if (!newMemberUserId) return
+    await api.post(`/projects/${id}/members`, { user_id: newMemberUserId, role: newMemberRole })
+    setShowAddMember(false)
+    fetchProject()
+  }
+
+  const removeMember = async (userId: number, role: string) => {
+    if (role === 'admin') {
+      alert('Cannot remove project owner (admin)')
+      return
+    }
+    if (!confirm('Remove this member?')) return
+    await api.delete(`/projects/${id}/members/${userId}`)
+    fetchProject()
+  }
+
+  const deleteProject = async () => {
+    const confirmName = prompt(`Type the project name "${project?.name}" to confirm deletion:`)
+    if (confirmName !== project?.name) {
+      alert('Project name does not match. Deletion cancelled.')
+      return
+    }
+    await api.delete(`/projects/${id}`)
+    navigate('/projects')
+  }
+
+  if (!project) return <div className="loading">Loading...</div>
+
+  return (
+    <div className="project-detail">
+      <button className="btn-back" onClick={() => navigate('/projects')}>← Back to projects</button>
+
+      <div className="task-header">
+        <h2>📁 {project.name} {project.project_code && <CopyableCode code={project.project_code} />}</h2>
+        <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>{project.description || 'No description'}</p>
+        {project.repo && <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>📦 {project.repo}</p>}
+        <div className="text-dim">Owner: {project.owner_name || 'Unknown'}</div>
+        {canEditProject && (
+          <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+            <button className="btn-transition" onClick={() => setShowProjectEdit(true)}>Edit</button>
+            <button className="btn-danger" onClick={deleteProject}>Delete</button>
+          </div>
+        )}
+      </div>
+
+      <div className="section">
+        <h3>Members ({members.length}) {canEditProject && <button className="btn-sm" onClick={() => setShowAddMember(true)}>+ Add</button>}</h3>
+        {members.length > 0 ? (
+          <div className="member-list">
+            {members.map((m) => (
+              <span key={m.id} className="badge" style={{ marginRight: 8 }}>
+                {`${m.username || m.full_name || `User #${m.user_id}`} (${m.role})`}
+                {canEditProject && (
+                  <button
+                    onClick={(e) => { e.stopPropagation(); removeMember(m.user_id, m.role) }}
+                    style={{ marginLeft: 8, background: 'none', border: 'none', color: 'red', cursor: 'pointer' }}
+                  >×</button>
+                )}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <p className="empty">No members</p>
+        )}
+      </div>
+
+      <div className="section">
+        <h3>
+          Milestones ({milestones.length})
+          {canEditProject && <button className="btn-sm" onClick={() => setShowMilestoneModal(true)}>+ New</button>}
+        </h3>
+        {milestones.map((ms) => (
+          <div key={ms.id} className="milestone-item" onClick={() => ms.milestone_code && navigate(`/milestones/${ms.milestone_code}`)}>
+            <span className={`badge status-${ms.status === 'open' ? 'open' : ms.status === 'closed' ? 'closed' : 'in_progress'}`}>{ms.status}</span>
+            <span className="milestone-title">{ms.title}</span>
+            {ms.due_date && <span className="text-dim"> · Due {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
+          </div>
+        ))}
+        {milestones.length === 0 && <p className="empty">No milestones</p>}
+      </div>
+
+      <ProjectFormModal
+        isOpen={showProjectEdit}
+        onClose={() => setShowProjectEdit(false)}
+        project={project}
+        onSaved={(data) => {
+          setProject(data)
+          fetchProject()
+        }}
+      />
+
+      <MilestoneFormModal
+        isOpen={showMilestoneModal}
+        onClose={() => setShowMilestoneModal(false)}
+        initialProjectCode={project.project_code || ''}
+        lockProject
+        onSaved={() => fetchProject()}
+      />
+
+      {showAddMember && (
+        <div className="modal-overlay" onClick={() => setShowAddMember(false)}>
+          <div className="modal" onClick={e => e.stopPropagation()}>
+            <h3>Add Member</h3>
+            <select value={newMemberUserId} onChange={e => setNewMemberUserId(Number(e.target.value))}>
+              {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.full_name})</option>)}
+            </select>
+            <select value={newMemberRole} onChange={e => setNewMemberRole(e.target.value)}>
+              {roles.map(r => <option key={r.id} value={r.name}>{r.name}</option>)}
+            </select>
+            <div style={{ marginTop: 10 }}>
+              <button className="btn-primary" onClick={addMember}>Add</button>
+              <button className="btn-back" onClick={() => setShowAddMember(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/ProjectsPage.tsx

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Project } from '@/types'
+import dayjs from 'dayjs'
+import ProjectFormModal from '@/components/ProjectFormModal'
+
+export default function ProjectsPage() {
+  const [projects, setProjects] = useState<Project[]>([])
+  const [showCreate, setShowCreate] = useState(false)
+  const navigate = useNavigate()
+
+  const fetchProjects = () => {
+    api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
+  }
+
+  useEffect(() => { fetchProjects() }, [])
+
+  return (
+    <div className="projects-page">
+      <div className="page-header">
+        <h2>📁 Projects ({projects.length})</h2>
+        <button className="btn-primary" onClick={() => setShowCreate(true)}>+ New</button>
+      </div>
+
+      <ProjectFormModal
+        isOpen={showCreate}
+        onClose={() => setShowCreate(false)}
+        onSaved={() => fetchProjects()}
+      />
+
+      <div className="project-grid">
+        {projects.map((p) => (
+          <div key={p.id} className="project-card" onClick={() => navigate(`/projects/${p.project_code || p.id}`)}>
+            <h3>{p.name}</h3>{p.project_code && <span className="badge" style={{ marginLeft: 8 }}>{p.project_code}</span>}
+            <p className="project-desc">{p.description || 'No description'}</p>
+            <div className="project-meta">
+              <span>👤 {p.owner_name || 'Unknown'}</span>
+              <span> · Created {dayjs(p.created_at).format('YYYY-MM-DD')}</span>
+            </div>
+          </div>
+        ))}
+        {projects.length === 0 && <p className="empty">No projects yet. Create one above.</p>}
+      </div>
+    </div>
+  )
+}

src/pages/ProposalDetailPage.tsx

@@ -0,0 +1,465 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
+import api from '@/services/api'
+import type { Proposal, Milestone, Essential, EssentialType } from '@/types'
+import dayjs from 'dayjs'
+import CopyableCode from '@/components/CopyableCode'
+
+export default function ProposalDetailPage() {
+  const { proposalCode } = useParams()
+  const [searchParams] = useSearchParams()
+  const projectCode = searchParams.get('project_code')
+  const navigate = useNavigate()
+
+  const [proposal, setProposal] = useState<Proposal | null>(null)
+  const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [showAccept, setShowAccept] = useState(false)
+  const [selectedMilestone, setSelectedMilestone] = useState<string>('')
+  const [actionLoading, setActionLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  // Edit state
+  const [showEdit, setShowEdit] = useState(false)
+  const [editTitle, setEditTitle] = useState('')
+  const [editDescription, setEditDescription] = useState('')
+  const [editLoading, setEditLoading] = useState(false)
+
+  // Essential state
+  const [essentials, setEssentials] = useState<Essential[]>([])
+  const [loadingEssentials, setLoadingEssentials] = useState(false)
+
+  // Essential create/edit state
+  const [showEssentialModal, setShowEssentialModal] = useState(false)
+  const [editingEssential, setEditingEssential] = useState<Essential | null>(null)
+  const [essentialTitle, setEssentialTitle] = useState('')
+  const [essentialType, setEssentialType] = useState<EssentialType>('feature')
+  const [essentialDesc, setEssentialDesc] = useState('')
+  const [essentialLoading, setEssentialLoading] = useState(false)
+
+  const fetchProposal = () => {
+    if (!projectCode || !proposalCode) return
+    api.get<Proposal>(`/projects/${projectCode}/proposals/${proposalCode}`).then(({ data }) => setProposal(data))
+  }
+
+  useEffect(() => {
+    fetchProposal()
+  }, [proposalCode, projectCode])
+
+  const loadMilestones = () => {
+    if (!projectCode) return
+    api.get<Milestone[]>(`/milestones?project_code=${projectCode}`)
+      .then(({ data }) => setMilestones(data.filter((m) => m.status === 'open')))
+  }
+
+  const fetchEssentials = () => {
+    if (!projectCode || !proposalCode) return
+    setLoadingEssentials(true)
+    api.get<Essential[]>(`/projects/${projectCode}/proposals/${proposalCode}/essentials`)
+      .then(({ data }) => setEssentials(data))
+      .finally(() => setLoadingEssentials(false))
+  }
+
+  useEffect(() => {
+    fetchEssentials()
+  }, [proposalCode, projectCode])
+
+  const handleAccept = async () => {
+    if (!selectedMilestone || !projectCode || !proposalCode) return
+    setActionLoading(true)
+    setError('')
+    try {
+      await api.post(`/projects/${projectCode}/proposals/${proposalCode}/accept`, { milestone_code: selectedMilestone })
+      setShowAccept(false)
+      fetchProposal()
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Accept failed')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const handleReject = async () => {
+    if (!projectCode || !proposalCode) return
+    const reason = prompt('Reject reason (optional):')
+    setActionLoading(true)
+    setError('')
+    try {
+      await api.post(`/projects/${projectCode}/proposals/${proposalCode}/reject`, { reason: reason || undefined })
+      fetchProposal()
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Reject failed')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const openEditModal = () => {
+    if (!proposal) return
+    setEditTitle(proposal.title)
+    setEditDescription(proposal.description || '')
+    setError('')
+    setShowEdit(true)
+  }
+
+  const handleEdit = async () => {
+    if (!projectCode || !proposalCode) return
+    setEditLoading(true)
+    setError('')
+    try {
+      await api.patch(`/projects/${projectCode}/proposals/${proposalCode}`, {
+        title: editTitle,
+        description: editDescription,
+      })
+      setShowEdit(false)
+      fetchProposal()
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Update failed')
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  const handleReopen = async () => {
+    if (!projectCode || !proposalCode) return
+    setActionLoading(true)
+    setError('')
+    try {
+      await api.post(`/projects/${projectCode}/proposals/${proposalCode}/reopen`)
+      fetchProposal()
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Reopen failed')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  // Essential handlers
+  const openEssentialModal = (essential?: Essential) => {
+    if (essential) {
+      setEditingEssential(essential)
+      setEssentialTitle(essential.title)
+      setEssentialType(essential.type)
+      setEssentialDesc(essential.description || '')
+    } else {
+      setEditingEssential(null)
+      setEssentialTitle('')
+      setEssentialType('feature')
+      setEssentialDesc('')
+    }
+    setError('')
+    setShowEssentialModal(true)
+  }
+
+  const handleSaveEssential = async () => {
+    if (!projectCode || !proposalCode) return
+    setEssentialLoading(true)
+    setError('')
+    try {
+      if (editingEssential) {
+        await api.patch(`/projects/${projectCode}/proposals/${proposalCode}/essentials/${editingEssential.essential_code}`, {
+          title: essentialTitle,
+          type: essentialType,
+          description: essentialDesc || null,
+        })
+      } else {
+        await api.post(`/projects/${projectCode}/proposals/${proposalCode}/essentials`, {
+          title: essentialTitle,
+          type: essentialType,
+          description: essentialDesc || null,
+        })
+      }
+      setShowEssentialModal(false)
+      fetchEssentials()
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Save failed')
+    } finally {
+      setEssentialLoading(false)
+    }
+  }
+
+  const handleDeleteEssential = async (essentialCode: string) => {
+    if (!projectCode || !proposalCode) return
+    if (!confirm('Are you sure you want to delete this Essential?')) return
+    setEssentialLoading(true)
+    try {
+      await api.delete(`/projects/${projectCode}/proposals/${proposalCode}/essentials/${essentialCode}`)
+      fetchEssentials()
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Delete failed')
+    } finally {
+      setEssentialLoading(false)
+    }
+  }
+
+  if (!proposal) return <div className="loading">Loading...</div>
+
+  const statusBadgeClass = (s: string) => {
+    if (s === 'open') return 'status-open'
+    if (s === 'accepted') return 'status-completed'
+    if (s === 'rejected') return 'status-closed'
+    return ''
+  }
+
+  return (
+    <div className="task-detail">
+      <button className="btn-back" onClick={() => navigate(-1)}>← Back</button>
+
+      <div className="task-header">
+        <h2>
+          💡 {proposal.title}
+          {proposal.proposal_code && <span style={{ marginLeft: 8 }}><CopyableCode code={proposal.proposal_code} /></span>}
+        </h2>
+        <span className={`badge ${statusBadgeClass(proposal.status)}`} style={{ fontSize: '1rem' }}>
+          {proposal.status}
+        </span>
+      </div>
+
+      {error && <div className="error-message" style={{ color: 'var(--danger)', marginBottom: 12 }}>{error}</div>}
+
+      <div className="section">
+        <h3>Details</h3>
+        <div className="detail-grid">
+          <div><strong>Proposal Code:</strong> {proposal.proposal_code ? <CopyableCode code={proposal.proposal_code} /> : '—'}</div>
+          <div><strong>Status:</strong> {proposal.status}</div>
+          <div><strong>Created By:</strong> {proposal.created_by_username || (proposal.created_by_id ? `User #${proposal.created_by_id}` : '—')}</div>
+          <div><strong>Created:</strong> {dayjs(proposal.created_at).format('YYYY-MM-DD HH:mm')}</div>
+          <div><strong>Updated:</strong> {proposal.updated_at ? dayjs(proposal.updated_at).format('YYYY-MM-DD HH:mm') : '—'}</div>
+        </div>
+      </div>
+
+      <div className="section">
+        <h3>Description</h3>
+        <p style={{ whiteSpace: 'pre-wrap' }}>{proposal.description || 'No description'}</p>
+      </div>
+
+      {/* Essentials section */}
+      <div className="section">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+          <h3>Essentials ({essentials.length})</h3>
+          {proposal.status === 'open' && (
+            <button className="btn-primary" onClick={() => openEssentialModal()}>+ New Essential</button>
+          )}
+        </div>
+        {loadingEssentials ? (
+          <div className="loading">Loading...</div>
+        ) : essentials.length === 0 ? (
+          <div className="empty" style={{ padding: '20px 0', color: 'var(--text-secondary)' }}>
+            No essentials yet. {proposal.status === 'open' ? 'Add one to define deliverables for this proposal.' : ''}
+          </div>
+        ) : (
+          <div className="milestone-grid">
+            {essentials.map((e) => (
+              <div key={e.id} className="milestone-card">
+                <div className="milestone-card-header" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                  <span className="badge">{e.type}</span>
+                  {e.essential_code && <span className="badge"><CopyableCode code={e.essential_code} /></span>}
+                  <h4 style={{ margin: 0, flex: 1 }}>{e.title}</h4>
+                  {proposal.status === 'open' && (
+                    <div style={{ display: 'flex', gap: 4 }}>
+                      <button
+                        className="btn-transition"
+                        style={{ padding: '4px 8px', fontSize: '0.8rem' }}
+                        onClick={() => openEssentialModal(e)}
+                      >
+                        Edit
+                      </button>
+                      <button
+                        className="btn-danger"
+                        style={{ padding: '4px 8px', fontSize: '0.8rem' }}
+                        onClick={() => handleDeleteEssential(e.essential_code)}
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  )}
+                </div>
+                {e.description && (
+                  <p style={{ marginTop: 8, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>{e.description}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Generated tasks (shown when accepted) */}
+      {proposal.status === 'accepted' && proposal.generated_tasks && proposal.generated_tasks.length > 0 && (
+        <div className="section">
+          <h3>Generated Tasks</h3>
+          <div className="milestone-grid">
+            {proposal.generated_tasks.map((gt) => (
+              <div
+                key={gt.task_id}
+                className="milestone-card"
+                onClick={() => gt.task_code && navigate(`/tasks/${gt.task_code}`)}
+                style={{ cursor: 'pointer' }}
+              >
+                <div className="milestone-card-header">
+                  <span className="badge">{gt.task_type}/{gt.task_subtype}</span>
+                  {gt.task_code && <span className="badge">{gt.task_code}</span>}
+                  <h3>{gt.title}</h3>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Action buttons */}
+      <div className="section" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        {proposal.status === 'open' && (
+          <>
+            <button
+              className="btn-transition"
+              onClick={openEditModal}
+            >
+              ✏️ Edit
+            </button>
+            <button
+              className="btn-primary"
+              disabled={actionLoading}
+              onClick={() => { loadMilestones(); setShowAccept(true) }}
+            >
+              ✅ Accept
+            </button>
+            <button
+              className="btn-danger"
+              disabled={actionLoading}
+              onClick={handleReject}
+            >
+              ❌ Reject
+            </button>
+          </>
+        )}
+        {proposal.status === 'rejected' && (
+          <button
+            className="btn-transition"
+            disabled={actionLoading}
+            onClick={handleReopen}
+          >
+            🔄 Reopen
+          </button>
+        )}
+      </div>
+
+      {/* Edit modal */}
+      {showEdit && (
+        <div className="modal-overlay" onClick={() => setShowEdit(false)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3>Edit Proposal</h3>
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Title</strong>
+              <input
+                type="text"
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                style={{ width: '100%', marginTop: 4 }}
+              />
+            </label>
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Description</strong>
+              <textarea
+                value={editDescription}
+                onChange={(e) => setEditDescription(e.target.value)}
+                rows={6}
+                style={{ width: '100%', marginTop: 4 }}
+              />
+            </label>
+            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+              <button
+                className="btn-primary"
+                onClick={handleEdit}
+                disabled={!editTitle.trim() || editLoading}
+              >
+                {editLoading ? 'Saving...' : 'Save'}
+              </button>
+              <button className="btn-back" onClick={() => setShowEdit(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Accept modal with milestone selector */}
+      {showAccept && (
+        <div className="modal-overlay" onClick={() => setShowAccept(false)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3>Accept Proposal</h3>
+            <p>Select an <strong>open</strong> milestone to generate story tasks in:</p>
+            <select
+              value={selectedMilestone}
+              onChange={(e) => setSelectedMilestone(e.target.value)}
+            >
+              <option value="">— Select milestone —</option>
+              {milestones.map((ms) => (
+                <option key={ms.id} value={ms.milestone_code || ''}>{ms.title}</option>
+              ))}
+            </select>
+            {milestones.length === 0 && (
+              <p style={{ color: 'var(--danger)', marginTop: 8 }}>No open milestones available.</p>
+            )}
+            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+              <button
+                className="btn-primary"
+                onClick={handleAccept}
+                disabled={!selectedMilestone || actionLoading}
+              >
+                {actionLoading ? 'Accepting...' : 'Confirm Accept'}
+              </button>
+              <button className="btn-back" onClick={() => setShowAccept(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* Essential create/edit modal */}
+      {showEssentialModal && (
+        <div className="modal-overlay" onClick={() => setShowEssentialModal(false)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3>{editingEssential ? 'Edit Essential' : 'New Essential'}</h3>
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Title</strong>
+              <input
+                type="text"
+                value={essentialTitle}
+                onChange={(e) => setEssentialTitle(e.target.value)}
+                style={{ width: '100%', marginTop: 4 }}
+                placeholder="Essential title"
+              />
+            </label>
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Type</strong>
+              <select
+                value={essentialType}
+                onChange={(e) => setEssentialType(e.target.value as EssentialType)}
+                style={{ width: '100%', marginTop: 4 }}
+              >
+                <option value="feature">Feature</option>
+                <option value="improvement">Improvement</option>
+                <option value="refactor">Refactor</option>
+              </select>
+            </label>
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <strong>Description</strong>
+              <textarea
+                value={essentialDesc}
+                onChange={(e) => setEssentialDesc(e.target.value)}
+                rows={4}
+                style={{ width: '100%', marginTop: 4 }}
+                placeholder="Description (optional)"
+              />
+            </label>
+            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+              <button
+                className="btn-primary"
+                onClick={handleSaveEssential}
+                disabled={!essentialTitle.trim() || essentialLoading}
+              >
+                {essentialLoading ? 'Saving...' : 'Save'}
+              </button>
+              <button className="btn-back" onClick={() => setShowEssentialModal(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/ProposalsPage.tsx

@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Proposal, Project } from '@/types'
+import dayjs from 'dayjs'
+
+export default function ProposalsPage() {
+  const [proposals, setProposals] = useState<Proposal[]>([])
+  const [projects, setProjects] = useState<Project[]>([])
+  const [projectFilter, setProjectFilter] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+  const [newTitle, setNewTitle] = useState('')
+  const [newDesc, setNewDesc] = useState('')
+  const [creating, setCreating] = useState(false)
+  const navigate = useNavigate()
+
+  const fetchProposals = () => {
+    if (!projectFilter) {
+      setProposals([])
+      return
+    }
+    api.get<Proposal[]>(`/projects/${projectFilter}/proposals`).then(({ data }) => setProposals(data))
+  }
+
+  useEffect(() => {
+    api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
+  }, [])
+
+  useEffect(() => { fetchProposals() }, [projectFilter])
+
+  const handleCreate = async () => {
+    if (!newTitle.trim() || !projectFilter) return
+    setCreating(true)
+    try {
+      await api.post(`/projects/${projectFilter}/proposals`, {
+        title: newTitle.trim(),
+        description: newDesc.trim() || null,
+      })
+      setNewTitle('')
+      setNewDesc('')
+      setShowCreate(false)
+      fetchProposals()
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const statusBadgeClass = (s: string) => {
+    if (s === 'open') return 'status-open'
+    if (s === 'accepted') return 'status-completed'
+    if (s === 'rejected') return 'status-closed'
+    return ''
+  }
+
+  return (
+    <div className="milestones-page">
+      <div className="page-header">
+        <h2>💡 Proposals ({proposals.length})</h2>
+        <button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(true)}>
+          + New Proposal
+        </button>
+      </div>
+
+      <div className="filters">
+        <select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
+          <option value="">Select a project</option>
+          {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
+        </select>
+      </div>
+
+      {!projectFilter && <p className="empty">Please select a project to view proposals.</p>}
+
+      <div className="milestone-grid">
+        {proposals.map((pr) => (
+          <div key={pr.id} className="milestone-card" onClick={() => pr.proposal_code && pr.project_code && navigate(`/proposals/${pr.proposal_code}?project_code=${pr.project_code}`)}>
+            <div className="milestone-card-header">
+              <span className={`badge ${statusBadgeClass(pr.status)}`}>{pr.status}</span>
+              {pr.proposal_code && <span className="badge">{pr.proposal_code}</span>}
+              <h3>{pr.title}</h3>
+            </div>
+            <p className="project-desc">{pr.description || 'No description'}</p>
+            <div className="project-meta">
+              <span>Created {dayjs(pr.created_at).format('YYYY-MM-DD')}</span>
+            </div>
+          </div>
+        ))}
+        {projectFilter && proposals.length === 0 && <p className="empty">No proposals</p>}
+      </div>
+
+      {showCreate && (
+        <div className="modal-overlay" onClick={() => setShowCreate(false)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3>New Proposal</h3>
+            <label>Title</label>
+            <input value={newTitle} onChange={(e) => setNewTitle(e.target.value)} placeholder="Proposal title" />
+            <label>Description</label>
+            <textarea value={newDesc} onChange={(e) => setNewDesc(e.target.value)} placeholder="Description (optional)" rows={4} />
+            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+              <button className="btn-primary" onClick={handleCreate} disabled={creating || !newTitle.trim()}>
+                {creating ? 'Creating...' : 'Create'}
+              </button>
+              <button className="btn-back" onClick={() => setShowCreate(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/RoleEditorPage.tsx

@@ -0,0 +1,296 @@
+import { useState, useEffect } from 'react'
+import api from '@/services/api'
+import { useAuth } from '@/hooks/useAuth'
+
+interface Permission {
+  id: number
+  name: string
+  description: string
+  category: string
+}
+
+interface Role {
+  id: number
+  name: string
+  description: string | null
+  is_global: boolean | null
+  permission_ids: number[]
+}
+
+export default function RoleEditorPage() {
+  const { user } = useAuth()
+  const [roles, setRoles] = useState<Role[]>([])
+  const [permissions, setPermissions] = useState<Permission[]>([])
+  const [selectedRole, setSelectedRole] = useState<Role | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState('')
+  const [messageOk, setMessageOk] = useState(true)
+  const [showCreateForm, setShowCreateForm] = useState(false)
+  const [newRoleName, setNewRoleName] = useState('')
+  const [newRoleDesc, setNewRoleDesc] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [templateRoleId, setTemplateRoleId] = useState<string>('')
+
+  const isAdmin = user?.is_admin === true
+
+  useEffect(() => { fetchData() }, [])
+
+  const fetchData = async () => {
+    try {
+      const [rolesRes, permsRes] = await Promise.all([
+        api.get('/roles'),
+        api.get('/roles/permissions'),
+      ])
+      setRoles(rolesRes.data)
+      setPermissions(permsRes.data)
+    } catch (err) {
+      console.error('Failed to fetch data:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handlePermissionToggle = (permId: number) => {
+    if (!selectedRole) return
+    const newPermIds = selectedRole.permission_ids.includes(permId)
+      ? selectedRole.permission_ids.filter((id) => id !== permId)
+      : [...selectedRole.permission_ids, permId]
+    setSelectedRole({ ...selectedRole, permission_ids: newPermIds })
+  }
+
+  // Copy a source role's permission_ids over the current selection.
+  // Replaces (not merges) — the user explicitly clicked "use as template".
+  // Local-only: nothing persists until they hit "Save changes".
+  const handleApplyTemplate = () => {
+    if (!selectedRole || !templateRoleId) return
+    const src = roles.find((r) => String(r.id) === templateRoleId)
+    if (!src) return
+    setSelectedRole({ ...selectedRole, permission_ids: [...src.permission_ids] })
+    flashMessage(
+      `Loaded ${src.permission_ids.length} permissions from "${src.name}" — not saved yet`,
+      true,
+    )
+  }
+
+  const flashMessage = (msg: string, ok: boolean) => {
+    setMessage(msg); setMessageOk(ok)
+  }
+
+  const handleSave = async () => {
+    if (!selectedRole) return
+    setSaving(true); setMessage('')
+    try {
+      await api.post(`/roles/${selectedRole.id}/permissions`, {
+        permission_ids: selectedRole.permission_ids,
+      })
+      flashMessage('Saved successfully', true)
+      fetchData()
+    } catch (err: any) {
+      flashMessage(err.response?.data?.detail || 'Failed to save', false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDeleteRole = async () => {
+    if (!selectedRole) return
+    if (!confirm(`Delete the "${selectedRole.name}" role?`)) return
+    setSaving(true); setMessage('')
+    try {
+      await api.delete(`/roles/${selectedRole.id}`)
+      flashMessage('Role deleted', true)
+      setSelectedRole(null)
+      fetchData()
+    } catch (err: any) {
+      flashMessage(err.response?.data?.detail || 'Failed to delete role', false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const canDeleteRole =
+    selectedRole &&
+    !['admin', 'guest', 'account-manager'].includes(selectedRole.name) &&
+    isAdmin
+
+  const handleCreateRole = async () => {
+    if (!newRoleName.trim()) return
+    setCreating(true); setMessage('')
+    try {
+      await api.post('/roles', {
+        name: newRoleName.trim(),
+        description: newRoleDesc.trim() || null,
+        is_global: false,
+      })
+      flashMessage('Role created', true)
+      setShowCreateForm(false)
+      setNewRoleName(''); setNewRoleDesc('')
+      fetchData()
+    } catch (err: any) {
+      flashMessage(err.response?.data?.detail || 'Failed to create role', false)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const groupedPermissions = permissions.reduce((acc, p) => {
+    if (!acc[p.category]) acc[p.category] = []
+    acc[p.category].push(p)
+    return acc
+  }, {} as Record<string, Permission[]>)
+
+  if (loading) return <div className="loading">Loading roles…</div>
+
+  return (
+    <div className="role-editor-page">
+      <h2>🔐 Role Editor</h2>
+      <p className="lead">Configure permissions for each role. Only admins can edit roles.</p>
+
+      {isAdmin && !showCreateForm && (
+        <button className="btn-primary" onClick={() => setShowCreateForm(true)}
+                style={{ marginBottom: 18 }}>
+          + Create New Role
+        </button>
+      )}
+
+      {showCreateForm && (
+        <div className="role-editor-create">
+          <h3>Create new role</h3>
+          <label>Role name *</label>
+          <input
+            type="text"
+            value={newRoleName}
+            onChange={(e) => setNewRoleName(e.target.value)}
+            placeholder="e.g. developer, manager"
+          />
+          <label>Description</label>
+          <input
+            type="text"
+            value={newRoleDesc}
+            onChange={(e) => setNewRoleDesc(e.target.value)}
+            placeholder="(optional) short description"
+          />
+          <div className="actions">
+            <button className="btn-primary" disabled={creating || !newRoleName.trim()}
+                    onClick={handleCreateRole}>
+              {creating ? 'Creating…' : 'Create'}
+            </button>
+            <button className="btn-secondary"
+                    onClick={() => { setShowCreateForm(false); setNewRoleName(''); setNewRoleDesc('') }}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {message && (
+        <div className={`role-editor-banner ${messageOk ? 'ok' : 'err'}`}>
+          <span>{messageOk ? '✓' : '✗'}</span>
+          <span>{message}</span>
+        </div>
+      )}
+
+      <div className="role-editor-grid">
+        {/* Roles sidebar */}
+        <aside className="role-editor-sidebar">
+          <h3>Roles</h3>
+          <div className="role-list">
+            {roles.map((role) => {
+              const active = selectedRole?.id === role.id
+              return (
+                <div
+                  key={role.id}
+                  className={`role-card${active ? ' active' : ''}`}
+                  onClick={() => setSelectedRole({ ...role })}
+                >
+                  <div className="role-name">
+                    {role.name}
+                    {role.is_global && <span className="role-badge-global" title="global">★</span>}
+                  </div>
+                  {role.description && <div className="role-desc">{role.description}</div>}
+                  <div className="role-meta">{role.permission_ids.length} permissions</div>
+                </div>
+              )
+            })}
+          </div>
+        </aside>
+
+        {/* Permission editor */}
+        <section className="role-editor-detail">
+          {selectedRole ? (
+            <>
+              <h3>Permissions for <span className="name">{selectedRole.name}</span></h3>
+
+              {isAdmin && roles.length > 1 && (
+                <div className="role-editor-template">
+                  <label htmlFor="tpl-select">Copy from template:</label>
+                  <select
+                    id="tpl-select"
+                    value={templateRoleId}
+                    onChange={(e) => setTemplateRoleId(e.target.value)}
+                  >
+                    <option value="">— select a role —</option>
+                    {roles
+                      .filter((r) => r.id !== selectedRole.id)
+                      .map((r) => (
+                        <option key={r.id} value={r.id}>
+                          {r.name} ({r.permission_ids.length} perms)
+                        </option>
+                      ))}
+                  </select>
+                  <button
+                    className="btn-secondary"
+                    disabled={!templateRoleId}
+                    onClick={handleApplyTemplate}
+                    title="Replace current checkboxes with the template role's permission set (local; not saved until you click Save changes)"
+                  >
+                    Use as template
+                  </button>
+                </div>
+              )}
+
+              {Object.entries(groupedPermissions).map(([category, perms]) => (
+                <div key={category} className="perm-group">
+                  <div className="perm-group-header">{category}</div>
+                  <div className="perm-grid">
+                    {perms.map((perm) => {
+                      const checked = selectedRole.permission_ids.includes(perm.id)
+                      return (
+                        <label key={perm.id} className={`perm-item${checked ? ' checked' : ''}`}>
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={() => handlePermissionToggle(perm.id)}
+                          />
+                          <div className="perm-body">
+                            <div className="perm-name">{perm.name}</div>
+                            <div className="perm-desc">{perm.description}</div>
+                          </div>
+                        </label>
+                      )
+                    })}
+                  </div>
+                </div>
+              ))}
+              <div className="role-editor-actions">
+                <button className="btn-primary" disabled={saving} onClick={handleSave}>
+                  {saving ? 'Saving…' : 'Save changes'}
+                </button>
+                {canDeleteRole && (
+                  <button className="btn-danger" disabled={saving} onClick={handleDeleteRole}>
+                    Delete role
+                  </button>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="role-editor-empty">
+              ◆ Select a role on the left to edit its permissions
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  )
+}

src/pages/SupportDetailPage.tsx

@@ -0,0 +1,299 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import { useAuth } from '@/hooks/useAuth'
+import CopyableCode from '@/components/CopyableCode'
+
+interface SupportItem {
+  id: number
+  code: string | null
+  support_code: string | null
+  title: string
+  description: string | null
+  status: string
+  priority: string
+  project_id: number
+  project_code: string | null
+  milestone_id: number
+  milestone_code: string | null
+  reporter_id: number
+  assignee_id: number | null
+  taken_by: string | null
+  created_at: string
+  updated_at: string | null
+}
+
+const STATUS_OPTIONS = ['open', 'in_progress', 'resolved', 'closed']
+const PRIORITY_OPTIONS = ['low', 'medium', 'high', 'critical']
+
+export default function SupportDetailPage() {
+  const { supportCode } = useParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const [support, setSupport] = useState<SupportItem | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState('')
+  const [editMode, setEditMode] = useState(false)
+  const [editForm, setEditForm] = useState({ title: '', description: '', priority: '' })
+  const [transitionStatus, setTransitionStatus] = useState('')
+
+  const fetchSupport = async () => {
+    try {
+      const { data } = await api.get<SupportItem>(`/supports/${supportCode}`)
+      setSupport(data)
+      setEditForm({
+        title: data.title,
+        description: data.description || '',
+        priority: data.priority,
+      })
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to load support ticket')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchSupport()
+  }, [supportCode])
+
+  const handleTake = async () => {
+    if (!support) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const { data } = await api.post<SupportItem>(`/supports/${supportCode}/take`)
+      setSupport(data)
+      setMessage('You have taken this support ticket')
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to take support ticket')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleTransition = async () => {
+    if (!support || !transitionStatus) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const { data } = await api.post<SupportItem>(`/supports/${supportCode}/transition`, {
+        status: transitionStatus,
+      })
+      setSupport(data)
+      setTransitionStatus('')
+      setMessage(`Status changed to ${transitionStatus}`)
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to transition support ticket')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSave = async () => {
+    if (!support) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const payload: Record<string, any> = {}
+      if (editForm.title.trim() !== support.title) payload.title = editForm.title.trim()
+      if ((editForm.description || '') !== (support.description || '')) payload.description = editForm.description || null
+      if (editForm.priority !== support.priority) payload.priority = editForm.priority
+
+      if (Object.keys(payload).length === 0) {
+        setEditMode(false)
+        return
+      }
+
+      const { data } = await api.patch<SupportItem>(`/supports/${supportCode}`, payload)
+      setSupport(data)
+      setEditMode(false)
+      setMessage('Support ticket updated')
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to update support ticket')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!support) return
+    if (!confirm(`Delete support ticket ${support.support_code || support.id}? This cannot be undone.`)) return
+    setSaving(true)
+    try {
+      await api.delete(`/supports/${supportCode}`)
+      navigate(-1)
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to delete support ticket')
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <div className="loading">Loading support ticket...</div>
+  if (!support) return <div className="loading">{message || 'Support ticket not found'}</div>
+
+  const canTake = user && (!support.assignee_id || support.assignee_id === user.id) && support.status !== 'closed' && support.status !== 'resolved'
+  const isMine = user && support.assignee_id === user.id
+  const availableTransitions = STATUS_OPTIONS.filter((s) => s !== support.status)
+
+  return (
+    <div className="section">
+      <button className="btn-back" onClick={() => navigate(-1)}>← Back</button>
+
+      <div className="task-header">
+        <h2>🎫 {support.support_code ? <CopyableCode code={support.support_code} /> : `#${support.id}`}</h2>
+        <div className="task-meta">
+          <span className={`badge status-${support.status}`}>{support.status}</span>
+          <span className={`badge priority-${support.priority}`}>{support.priority}</span>
+          {support.project_code && <span className="text-dim">Project: {support.project_code}</span>}
+          {support.milestone_code && <span className="text-dim">Milestone: {support.milestone_code}</span>}
+        </div>
+      </div>
+
+      {message && (
+        <div
+          style={{
+            padding: '10px 12px',
+            marginBottom: '16px',
+            borderRadius: '8px',
+            background: message.toLowerCase().includes('fail') || message.toLowerCase().includes('error')
+              ? 'rgba(239,68,68,.12)'
+              : 'rgba(16,185,129,.12)',
+            border: `1px solid ${
+              message.toLowerCase().includes('fail') || message.toLowerCase().includes('error')
+                ? 'rgba(239,68,68,.35)'
+                : 'rgba(16,185,129,.35)'
+            }`,
+          }}
+        >
+          {message}
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '20px', alignItems: 'start' }}>
+        {/* Main content */}
+        <div className="monitor-card">
+          {editMode ? (
+            <div className="task-create-form">
+              <label>
+                Title
+                <input
+                  value={editForm.title}
+                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                />
+              </label>
+              <label>
+                Description
+                <textarea
+                  value={editForm.description}
+                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                  rows={6}
+                  style={{ width: '100%' }}
+                />
+              </label>
+              <label>
+                Priority
+                <select
+                  value={editForm.priority}
+                  onChange={(e) => setEditForm({ ...editForm, priority: e.target.value })}
+                >
+                  {PRIORITY_OPTIONS.map((p) => (
+                    <option key={p} value={p}>{p}</option>
+                  ))}
+                </select>
+              </label>
+              <div style={{ display: 'flex', gap: 8 }}>
+                <button className="btn-primary" disabled={saving} onClick={handleSave}>
+                  {saving ? 'Saving...' : 'Save'}
+                </button>
+                <button className="btn-back" onClick={() => setEditMode(false)}>Cancel</button>
+              </div>
+            </div>
+          ) : (
+            <>
+              <h3>{support.title}</h3>
+              {support.description && (
+                <p style={{ whiteSpace: 'pre-wrap', marginTop: 12 }}>{support.description}</p>
+              )}
+              {!support.description && <p className="text-dim">No description provided.</p>}
+            </>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {/* Ownership */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Assigned To</h4>
+            {support.taken_by ? (
+              <div>
+                <span className="badge">{support.taken_by}</span>
+                {isMine && <span className="text-dim" style={{ marginLeft: 8 }}>(you)</span>}
+              </div>
+            ) : (
+              <span className="text-dim">Unassigned</span>
+            )}
+            {canTake && !isMine && (
+              <button
+                className="btn-primary"
+                style={{ marginTop: 8, width: '100%' }}
+                disabled={saving}
+                onClick={handleTake}
+              >
+                Take
+              </button>
+            )}
+          </div>
+
+          {/* Transition */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Transition</h4>
+            <select
+              value={transitionStatus}
+              onChange={(e) => setTransitionStatus(e.target.value)}
+              style={{ width: '100%', marginBottom: 8 }}
+            >
+              <option value="">Select status...</option>
+              {availableTransitions.map((s) => (
+                <option key={s} value={s}>{s}</option>
+              ))}
+            </select>
+            <button
+              className="btn-primary"
+              style={{ width: '100%' }}
+              disabled={saving || !transitionStatus}
+              onClick={handleTransition}
+            >
+              Transition
+            </button>
+          </div>
+
+          {/* Actions */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Actions</h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {!editMode && (
+                <button className="btn-secondary" onClick={() => setEditMode(true)}>
+                  Edit
+                </button>
+              )}
+              <button className="btn-danger" disabled={saving} onClick={handleDelete}>
+                Delete
+              </button>
+            </div>
+          </div>
+
+          {/* Info */}
+          <div className="monitor-card">
+            <h4 style={{ marginBottom: 8 }}>Info</h4>
+            <div className="text-dim" style={{ fontSize: '0.9em' }}>
+              <div>Created: {new Date(support.created_at).toLocaleString()}</div>
+              {support.updated_at && <div>Updated: {new Date(support.updated_at).toLocaleString()}</div>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/TaskDetailPage.tsx

@@ -0,0 +1,280 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Task, Comment, Project, ProjectMember, Milestone } from '@/types'
+import dayjs from 'dayjs'
+import { useAuth } from '@/hooks/useAuth'
+import CreateTaskModal from '@/components/CreateTaskModal'
+import CopyableCode from '@/components/CopyableCode'
+
+export default function TaskDetailPage() {
+  const { taskCode } = useParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const [task, setTask] = useState<Task | null>(null)
+  const [milestone, setMilestone] = useState<Milestone | null>(null)
+  const [project, setProject] = useState<Project | null>(null)
+  const [members, setMembers] = useState<ProjectMember[]>([])
+  const [comments, setComments] = useState<Comment[]>([])
+  const [newComment, setNewComment] = useState('')
+  const [showEditTask, setShowEditTask] = useState(false)
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+  const [showFinishModal, setShowFinishModal] = useState(false)
+  const [finishComment, setFinishComment] = useState('')
+  const [showCloseModal, setShowCloseModal] = useState(false)
+  const [closeReason, setCloseReason] = useState('')
+
+  const refreshTask = async () => {
+    if (!taskCode) return
+    const { data } = await api.get<Task>(`/tasks/${taskCode}`)
+    setTask(data)
+    if (data.project_id) {
+      api.get<Project>(`/projects/${data.project_id}`).then(({ data }) => setProject(data)).catch(() => {})
+      api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
+    }
+    if (data.milestone_code) {
+      api.get<Milestone>(`/milestones/${data.milestone_code}`).then(({ data }) => setMilestone(data)).catch(() => {})
+    }
+  }
+
+  useEffect(() => {
+    refreshTask().catch(console.error)
+    if (taskCode) {
+      api.get<Comment[]>(`/tasks/${taskCode}/comments`).then(({ data }) => setComments(data))
+    }
+  }, [taskCode])
+
+  const addComment = async () => {
+    if (!newComment.trim() || !task) return
+    await api.post('/comments', { content: newComment, task_id: task.id, author_id: 1 })
+    setNewComment('')
+    const { data } = await api.get<Comment[]>(`/tasks/${taskCode}/comments`)
+    setComments(data)
+  }
+
+  const doAction = async (actionName: string, newStatus: string, body?: Record<string, any>) => {
+    setActionLoading(actionName)
+    setActionError(null)
+    try {
+      await api.post(`/tasks/${taskCode}/transition?new_status=${newStatus}`, body || {})
+      await refreshTask()
+      // refresh comments too (finish adds one via backend)
+      const { data } = await api.get<Comment[]>(`/tasks/${taskCode}/comments`)
+      setComments(data)
+    } catch (err: any) {
+      setActionError(err?.response?.data?.detail || err?.message || 'Action failed')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleOpen = () => doAction('open', 'open')
+  const handleStart = () => doAction('start', 'undergoing')
+  const handleFinishConfirm = async () => {
+    if (!finishComment.trim()) return
+    await doAction('finish', 'completed', { comment: finishComment })
+    setShowFinishModal(false)
+    setFinishComment('')
+  }
+  const handleCloseConfirm = async () => {
+    const body: Record<string, any> = {}
+    if (closeReason.trim()) {
+      body.comment = `[Close reason] ${closeReason}`
+    }
+    await doAction('close', 'closed', body)
+    setShowCloseModal(false)
+    setCloseReason('')
+  }
+  const handleReopen = () => doAction('reopen', 'open')
+
+  const currentMemberRole = useMemo(
+    () => members.find((m) => m.user_id === user?.id)?.role,
+    [members, user?.id]
+  )
+  const isAdmin = Boolean(user && (
+    user.is_admin ||
+    (project && user.id === project.owner_id) ||
+    currentMemberRole === 'admin'
+  ))
+  // P5.7/P9.3: assignee-aware edit permission
+  const canEditTask = Boolean(task && project && user && (() => {
+    const st = task.status
+    // undergoing/completed/closed: no body edits
+    if (st === 'undergoing' || st === 'completed' || st === 'closed') return false
+    // open + assignee set: only assignee or admin
+    if (st === 'open' && task.assignee_id != null) {
+      return user.id === task.assignee_id || isAdmin
+    }
+    // open + no assignee, or pending: general permission
+    return (
+      isAdmin ||
+      user.id === task.created_by_id ||
+      user.id === milestone?.created_by_id
+    )
+  })())
+
+  if (!task) return <div className="loading">Loading...</div>
+
+  // Determine which action buttons to show based on status (P9.2 / P11.8)
+  const isTerminal = task.status === 'completed' || task.status === 'closed'
+
+  return (
+    <div className="task-detail">
+      <button className="btn-back" onClick={() => navigate('/tasks')}>← Back</button>
+
+      <div className="task-header">
+        <h2>{task.task_code ? <><CopyableCode code={task.task_code} /> </> : `#${task.id} `}{task.title}</h2>
+        <div className="task-meta">
+          <span className={`badge status-${task.status}`}>{task.status}</span>
+          <span className={`badge priority-${task.priority}`}>{task.priority}</span>
+          <span className="badge">{task.task_type}</span>{task.task_subtype && <span className="badge">{task.task_subtype}</span>}
+          {task.tags && <span className="tags">{task.tags}</span>}
+        </div>
+        {canEditTask && (
+          <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setShowEditTask(true)}>Edit Task</button>
+        )}
+      </div>
+
+      <CreateTaskModal
+        isOpen={showEditTask}
+        onClose={() => setShowEditTask(false)}
+        task={task}
+        onSaved={(data) => setTask(data)}
+      />
+
+      <div className="task-body">
+        <div className="section">
+          <h3>Description</h3>
+          <p>{task.description || 'No description'}</p>
+        </div>
+
+        <div className="section">
+          <h3>Details</h3>
+          <dl>
+            <dt>Created</dt><dd>{dayjs(task.created_at).format('YYYY-MM-DD HH:mm')}</dd>
+            {task.updated_at && <><dt>Updated</dt><dd>{dayjs(task.updated_at).format('YYYY-MM-DD HH:mm')}</dd></>}
+            {project && <><dt>Project</dt><dd>{project.name}</dd></>}
+            {milestone && <><dt>Milestone</dt><dd>{milestone.title}</dd></>}
+          </dl>
+        </div>
+
+        <div className="section">
+          <h3>Actions</h3>
+          {actionError && <div className="error-message" style={{ color: '#dc2626', marginBottom: 8 }}>{actionError}</div>}
+          <div className="actions" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            {/* pending: Open + Close */}
+            {task.status === 'pending' && (
+              <>
+                <button className="btn-transition" disabled={!!actionLoading} onClick={handleOpen}>
+                  {actionLoading === 'open' ? 'Opening…' : '▶ Open'}
+                </button>
+                <button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
+                  {actionLoading === 'close' ? 'Closing…' : '✕ Close'}
+                </button>
+              </>
+            )}
+            {/* open: Start + Close */}
+            {task.status === 'open' && (
+              <>
+                <button className="btn-transition" style={{ background: '#f59e0b', color: '#fff' }} disabled={!!actionLoading} onClick={handleStart}>
+                  {actionLoading === 'start' ? 'Starting…' : '⏵ Start'}
+                </button>
+                <button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
+                  {actionLoading === 'close' ? 'Closing…' : '✕ Close'}
+                </button>
+              </>
+            )}
+            {/* undergoing: Finish + Close */}
+            {task.status === 'undergoing' && (
+              <>
+                <button className="btn-transition" style={{ background: '#16a34a', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowFinishModal(true)}>
+                  {actionLoading === 'finish' ? 'Finishing…' : '✓ Finish'}
+                </button>
+                <button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
+                  {actionLoading === 'close' ? 'Closing…' : '✕ Close'}
+                </button>
+              </>
+            )}
+            {/* completed / closed: Reopen */}
+            {(task.status === 'completed' || task.status === 'closed') && (
+              <button className="btn-transition" disabled={!!actionLoading} onClick={handleReopen}>
+                {actionLoading === 'reopen' ? 'Reopening…' : '↺ Reopen'}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Finish modal — requires comment (P9.4) */}
+        {showFinishModal && (
+          <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
+            <div className="modal-content" style={{ background: '#fff', borderRadius: 8, padding: 24, minWidth: 400, maxWidth: 520 }}>
+              <h3>Finish Task</h3>
+              <p style={{ fontSize: 14, color: '#666', marginBottom: 12 }}>Please leave a completion comment before finishing.</p>
+              <textarea
+                value={finishComment}
+                onChange={(e) => setFinishComment(e.target.value)}
+                placeholder="Describe what was done…"
+                rows={4}
+                style={{ width: '100%', marginBottom: 12 }}
+              />
+              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                <button className="btn-transition" onClick={() => { setShowFinishModal(false); setFinishComment('') }}>Cancel</button>
+                <button
+                  className="btn-transition"
+                  style={{ background: '#16a34a', color: '#fff' }}
+                  disabled={!finishComment.trim() || !!actionLoading}
+                  onClick={handleFinishConfirm}
+                >
+                  {actionLoading === 'finish' ? 'Finishing…' : 'Confirm Finish'}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Close modal — optional reason */}
+        {showCloseModal && (
+          <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
+            <div className="modal-content" style={{ background: '#fff', borderRadius: 8, padding: 24, minWidth: 400, maxWidth: 520 }}>
+              <h3>Close Task</h3>
+              <p style={{ fontSize: 14, color: '#666', marginBottom: 12 }}>This will cancel/abandon the task. Optionally provide a reason.</p>
+              <textarea
+                value={closeReason}
+                onChange={(e) => setCloseReason(e.target.value)}
+                placeholder="Reason for closing (optional)…"
+                rows={3}
+                style={{ width: '100%', marginBottom: 12 }}
+              />
+              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                <button className="btn-transition" onClick={() => { setShowCloseModal(false); setCloseReason('') }}>Cancel</button>
+                <button
+                  className="btn-transition"
+                  style={{ background: '#dc2626', color: '#fff' }}
+                  disabled={!!actionLoading}
+                  onClick={handleCloseConfirm}
+                >
+                  {actionLoading === 'close' ? 'Closing…' : 'Confirm Close'}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="section">
+          <h3>Comments ({comments.length})</h3>
+          {comments.map((c) => (
+            <div className="comment" key={c.id}>
+              <div className="comment-meta">{c.author_username || `User #${c.author_id}`} · {dayjs(c.created_at).format('MM-DD HH:mm')}</div>
+              <p>{c.content}</p>
+            </div>
+          ))}
+          <div className="comment-form">
+            <textarea value={newComment} onChange={(e) => setNewComment(e.target.value)} placeholder="Add a comment..." />
+            <button onClick={addComment} disabled={!newComment.trim()}>Submit comment</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/TasksPage.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/services/api'
+import type { Task, PaginatedResponse } from '@/types'
+import CreateTaskModal from '@/components/CreateTaskModal'
+
+export default function TasksPage() {
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const [statusFilter, setStatusFilter] = useState('')
+  const [priorityFilter, setPriorityFilter] = useState('')
+  const [showCreateTask, setShowCreateTask] = useState(false)
+  const navigate = useNavigate()
+
+  const fetchTasks = () => {
+    const params = new URLSearchParams({ page: String(page), page_size: '20' })
+    if (statusFilter) params.set('task_status', statusFilter)
+    api.get<PaginatedResponse<Task>>(`/tasks?${params}`).then(({ data }) => {
+      setTasks(data.items)
+      setTotal(data.total)
+      setTotalPages(data.total_pages)
+    })
+  }
+
+  useEffect(() => { fetchTasks() }, [page, statusFilter, priorityFilter])
+
+  const statusColors: Record<string, string> = {
+    pending: '#9ca3af', open: '#3b82f6', undergoing: '#f59e0b',
+    completed: '#10b981', closed: '#6b7280',
+  }
+
+  return (
+    <div className="tasks-page">
+      <div className="page-header">
+        <h2>📋 Tasks ({total})</h2>
+        <button className="btn-primary" onClick={() => setShowCreateTask(true)}>+ Create Task</button>
+      </div>
+
+      <CreateTaskModal
+        isOpen={showCreateTask}
+        onClose={() => setShowCreateTask(false)}
+        onCreated={() => {
+          setPage(1)
+          fetchTasks()
+        }}
+      />
+
+      <div className="filters">
+        <select value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1) }}>
+          <option value="">All statuses</option>
+          <option value="pending">Pending</option>
+          <option value="open">Open</option>
+          <option value="undergoing">Undergoing</option>
+          <option value="completed">Completed</option>
+          <option value="closed">Closed</option>
+        </select>
+      </div>
+
+      <table className="tasks-table">
+        <thead>
+          <tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th><th>Type</th><th>Subtype</th><th>Tags</th><th>Created</th></tr>
+        </thead>
+        <tbody>
+          {tasks.map((t) => (
+            <tr key={t.id} onClick={() => t.task_code && navigate(`/tasks/${t.task_code}`)} className={t.task_code ? 'clickable' : ''}>
+              <td>{t.task_code || '—'}</td>
+              <td className="task-title">{t.title}</td>
+              <td><span className="badge" style={{ backgroundColor: statusColors[t.status] || '#ccc' }}>{t.status}</span></td>
+              <td><span className={`badge priority-${t.priority}`}>{t.priority}</span></td>
+              <td>{t.task_type}</td><td>{t.task_subtype || "-"}</td>
+              <td>{t.tags || '-'}</td>
+              <td>{new Date(t.created_at).toLocaleDateString()}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {totalPages > 1 && (
+        <div className="pagination">
+          <button disabled={page <= 1} onClick={() => setPage(page - 1)}>Prev</button>
+          <span>{page} / {totalPages}</span>
+          <button disabled={page >= totalPages} onClick={() => setPage(page + 1)}>Next</button>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/UsersPage.tsx

@@ -0,0 +1,475 @@
+import { useEffect, useMemo, useState } from 'react'
+import api from '@/services/api'
+import { useAuth } from '@/hooks/useAuth'
+import { useAuthConfig } from '@/hooks/useAuthConfig'
+import type { User } from '@/types'
+
+interface RoleOption {
+  id: number
+  name: string
+  description?: string | null
+}
+
+interface ApiKeyPerms {
+  can_reset_self: boolean
+  can_reset_any: boolean
+}
+
+export default function UsersPage() {
+  const { user } = useAuth()
+  const { config: authCfg } = useAuthConfig()
+  const oidcOnly = authCfg.oidcOnly
+  const oidcEnabled = authCfg.oidcEnabled
+  const isAdmin = user?.is_admin === true
+
+  const [bindForm, setBindForm] = useState({ issuer: '', subject: '' })
+
+  const [users, setUsers] = useState<User[]>([])
+  const [roles, setRoles] = useState<RoleOption[]>([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState('')
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [apikeyPerms, setApikeyPerms] = useState<ApiKeyPerms>({ can_reset_self: false, can_reset_any: false })
+  const [generatedApiKey, setGeneratedApiKey] = useState<string | null>(null)
+
+  const [createForm, setCreateForm] = useState({
+    username: '',
+    email: '',
+    full_name: '',
+    password: '',
+    role_id: '',
+  })
+
+  const [editForm, setEditForm] = useState({
+    email: '',
+    full_name: '',
+    password: '',
+    role_id: '',
+    is_active: true,
+  })
+
+  const selectedUser = useMemo(
+    () => users.find((u) => u.id === selectedId) ?? null,
+    [users, selectedId],
+  )
+
+  useEffect(() => {
+    if (!isAdmin) {
+      setLoading(false)
+      return
+    }
+    fetchData()
+  }, [isAdmin])
+
+  useEffect(() => {
+    if (!selectedUser) return
+    setGeneratedApiKey(null)
+    setEditForm({
+      email: selectedUser.email,
+      full_name: selectedUser.full_name || '',
+      password: '',
+      role_id: selectedUser.role_id ? String(selectedUser.role_id) : '',
+      is_active: selectedUser.is_active,
+    })
+  }, [selectedUser])
+
+  useEffect(() => {
+    if (!createForm.role_id && roles.length > 0) {
+      const guestRole = roles.find((r) => r.name === 'guest') ?? roles[0]
+      if (guestRole) {
+        setCreateForm((prev) => ({ ...prev, role_id: String(guestRole.id) }))
+      }
+    }
+  }, [roles, createForm.role_id])
+
+  const fetchData = async () => {
+    try {
+      const [usersRes, rolesRes, apikeyRes] = await Promise.all([
+        api.get<User[]>('/users'),
+        api.get<RoleOption[]>('/roles'),
+        api.get<ApiKeyPerms>('/auth/me/apikey-permissions').catch(() => ({ data: { can_reset_self: false, can_reset_any: false } })),
+      ])
+      setApikeyPerms(apikeyRes.data)
+      const assignableRoles = rolesRes.data
+        .filter((role) => role.name !== 'admin')
+        .sort((a, b) => a.name.localeCompare(b.name))
+
+      setUsers(usersRes.data)
+      setRoles(assignableRoles)
+
+      if (!selectedId && usersRes.data.length > 0) {
+        setSelectedId(usersRes.data[0].id)
+      } else if (selectedId && !usersRes.data.some((u) => u.id === selectedId)) {
+        setSelectedId(usersRes.data[0]?.id ?? null)
+      }
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to load user management data')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCreateUser = async () => {
+    if (!createForm.username.trim() || !createForm.email.trim()) return
+    if (!oidcOnly && !createForm.password.trim()) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const payload: Record<string, any> = {
+        username: createForm.username.trim(),
+        email: createForm.email.trim(),
+        full_name: createForm.full_name.trim() || null,
+        role_id: createForm.role_id ? Number(createForm.role_id) : undefined,
+      }
+      if (!oidcOnly) {
+        payload.password = createForm.password
+      }
+      const { data } = await api.post<User>('/users', payload)
+      const guestRole = roles.find((r) => r.name === 'guest') ?? roles[0]
+      setCreateForm({
+        username: '',
+        email: '',
+        full_name: '',
+        password: '',
+        role_id: guestRole ? String(guestRole.id) : '',
+      })
+      setMessage('User created successfully')
+      await fetchData()
+      setSelectedId(data.id)
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to create user')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSaveUser = async () => {
+    if (!selectedUser) return
+    setSaving(true)
+    setMessage('')
+    try {
+      const payload: Record<string, any> = {
+        email: editForm.email.trim(),
+        full_name: editForm.full_name.trim() || null,
+        is_active: editForm.is_active,
+      }
+      if (!selectedUser.is_admin) {
+        payload.role_id = editForm.role_id ? Number(editForm.role_id) : undefined
+      }
+      if (editForm.password.trim()) {
+        payload.password = editForm.password
+      }
+      await api.patch<User>(`/users/${selectedUser.id}`, payload)
+      setMessage('User updated successfully')
+      await fetchData()
+      setEditForm((prev) => ({ ...prev, password: '' }))
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to update user')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const canResetApiKey = (targetUser: User) => {
+    if (apikeyPerms.can_reset_any) return true
+    if (apikeyPerms.can_reset_self && targetUser.id === user?.id) return true
+    return false
+  }
+
+  const handleResetApiKey = async () => {
+    if (!selectedUser) return
+    if (!confirm(`Reset API key for ${selectedUser.username}? The old key will be deactivated.`)) return
+    setSaving(true)
+    setMessage('')
+    setGeneratedApiKey(null)
+    try {
+      const { data } = await api.post(`/users/${selectedUser.id}/reset-apikey`)
+      setGeneratedApiKey(data.api_key)
+      setMessage('API key reset successfully. Copy it now — it will not be shown again.')
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to reset API key')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDeleteUser = async () => {
+    if (!selectedUser) return
+    if (!confirm(`Delete user ${selectedUser.username}? This cannot be undone.`)) return
+    setSaving(true)
+    setMessage('')
+    try {
+      await api.delete(`/users/${selectedUser.id}`)
+      setMessage('User deleted successfully')
+      await fetchData()
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to delete user')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleBindOidc = async () => {
+    if (!selectedUser) return
+    if (!bindForm.issuer.trim() || !bindForm.subject.trim()) return
+    setSaving(true)
+    setMessage('')
+    try {
+      await api.put(`/users/${selectedUser.id}/oidc-binding`, {
+        issuer: bindForm.issuer.trim(),
+        subject: bindForm.subject.trim(),
+      })
+      setBindForm({ issuer: '', subject: '' })
+      setMessage('OIDC identity bound successfully')
+      await fetchData()
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to bind OIDC identity')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleUnbindOidc = async () => {
+    if (!selectedUser) return
+    if (!confirm(`Remove the OIDC binding for ${selectedUser.username}?`)) return
+    setSaving(true)
+    setMessage('')
+    try {
+      await api.delete(`/users/${selectedUser.id}/oidc-binding`)
+      setMessage('OIDC binding removed')
+      await fetchData()
+    } catch (err: any) {
+      setMessage(err.response?.data?.detail || 'Failed to remove OIDC binding')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <div className="loading">Loading users...</div>
+
+  if (!isAdmin) {
+    return (
+      <div className="section">
+        <h2>👥 User Management</h2>
+        <p className="empty">Admin access required.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="section">
+      <div className="page-header">
+        <div>
+          <h2>👥 User Management</h2>
+          <div className="text-dim">Create accounts, assign one non-admin role, and manage activation state.</div>
+        </div>
+      </div>
+
+      {message && (
+        <div
+          style={{
+            padding: '10px 12px',
+            marginBottom: '16px',
+            borderRadius: '8px',
+            background: message.toLowerCase().includes('successfully') ? 'rgba(16,185,129,.12)' : 'rgba(239,68,68,.12)',
+            border: `1px solid ${message.toLowerCase().includes('successfully') ? 'rgba(16,185,129,.35)' : 'rgba(239,68,68,.35)'}`,
+          }}
+        >
+          {message}
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: '20px', alignItems: 'start' }}>
+        <div className="monitor-card">
+          <h3 style={{ marginBottom: 12 }}>Create User</h3>
+          <div className="task-create-form">
+            <label>
+              Username
+              <input value={createForm.username} onChange={(e) => setCreateForm({ ...createForm, username: e.target.value })} />
+            </label>
+            <label>
+              Email
+              <input value={createForm.email} onChange={(e) => setCreateForm({ ...createForm, email: e.target.value })} />
+            </label>
+            <label>
+              Full Name
+              <input value={createForm.full_name} onChange={(e) => setCreateForm({ ...createForm, full_name: e.target.value })} />
+            </label>
+            {!oidcOnly && (
+              <label>
+                Password
+                <input type="password" value={createForm.password} onChange={(e) => setCreateForm({ ...createForm, password: e.target.value })} />
+              </label>
+            )}
+            {oidcOnly && (
+              <p className="text-dim">OIDC-only mode: users are created without a password and sign in via a bound OIDC identity.</p>
+            )}
+            <label>
+              Role
+              <select value={createForm.role_id} onChange={(e) => setCreateForm({ ...createForm, role_id: e.target.value })}>
+                <option value="" disabled>Select role</option>
+                {roles.map((role) => (
+                  <option key={role.id} value={String(role.id)}>{role.name}</option>
+                ))}
+              </select>
+            </label>
+            <button className="btn-primary" disabled={saving || !createForm.username.trim() || !createForm.email.trim() || (!oidcOnly && !createForm.password.trim()) || !createForm.role_id} onClick={handleCreateUser}>
+              {saving ? 'Saving...' : 'Create User'}
+            </button>
+          </div>
+
+          <h3 style={{ marginTop: 24, marginBottom: 12 }}>Users</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {users.map((u) => (
+              <button
+                key={u.id}
+                onClick={() => setSelectedId(u.id)}
+                className="btn-secondary"
+                style={{
+                  textAlign: 'left',
+                  padding: '12px',
+                  background: selectedId === u.id ? 'var(--bg-hover)' : 'transparent',
+                  borderColor: selectedId === u.id ? 'var(--accent)' : 'var(--border)',
+                }}
+              >
+                <div style={{ fontWeight: 600 }}>{u.username}</div>
+                <div className="text-dim">{u.email}</div>
+                <div style={{ display: 'flex', gap: '6px', marginTop: '6px', flexWrap: 'wrap' }}>
+                  <span className="badge">{u.role_name || 'unassigned'}</span>
+                  {u.is_admin && <span className="badge">admin</span>}
+                  <span className={'badge ' + (u.is_active ? 'status-online' : 'status-offline')}>{u.is_active ? 'active' : 'inactive'}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="monitor-card">
+          {selectedUser ? (
+            <>
+              <div className="page-header" style={{ marginBottom: 12 }}>
+                <div>
+                  <h3 style={{ marginBottom: 6 }}>{selectedUser.username}</h3>
+                  <div className="text-dim">Created at {new Date(selectedUser.created_at).toLocaleString()}</div>
+                </div>
+                <div style={{ display: 'flex', gap: '8px' }}>
+                  <button className="btn-primary" disabled={saving} onClick={handleSaveUser}>
+                    {saving ? 'Saving...' : 'Save Changes'}
+                  </button>
+                  <button className="btn-danger" disabled={saving || user?.id === selectedUser.id || selectedUser.is_admin || selectedUser.username === 'acc-mgr'} onClick={handleDeleteUser}>
+                    Delete
+                  </button>
+                </div>
+              </div>
+
+              <div className="task-create-form">
+                <label>
+                  Username
+                  <input value={selectedUser.username} disabled />
+                </label>
+                <label>
+                  Email
+                  <input value={editForm.email} onChange={(e) => setEditForm({ ...editForm, email: e.target.value })} />
+                </label>
+                <label>
+                  Full Name
+                  <input value={editForm.full_name} onChange={(e) => setEditForm({ ...editForm, full_name: e.target.value })} />
+                </label>
+                {!oidcOnly && (
+                  <label>
+                    Reset Password
+                    <input type="password" placeholder="Leave blank to keep current password" value={editForm.password} onChange={(e) => setEditForm({ ...editForm, password: e.target.value })} />
+                  </label>
+                )}
+
+                <div style={{ marginTop: '8px', padding: '12px', border: '1px solid var(--border)', borderRadius: '8px' }}>
+                  <div style={{ fontWeight: 600, marginBottom: '10px' }}>Role</div>
+                  {selectedUser.is_admin ? (
+                    <div className="text-dim">{selectedUser.role_name || 'admin'} (admin accounts are managed outside this screen)</div>
+                  ) : (
+                    <label>
+                      Account Role
+                      <select value={editForm.role_id} onChange={(e) => setEditForm({ ...editForm, role_id: e.target.value })}>
+                        <option value="" disabled>Select role</option>
+                        {roles.map((role) => (
+                          <option key={role.id} value={String(role.id)}>{role.name}</option>
+                        ))}
+                      </select>
+                    </label>
+                  )}
+                </div>
+
+                <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+                  <label className="filter-check">
+                    <input
+                      type="checkbox"
+                      checked={editForm.is_active}
+                      disabled={user?.id === selectedUser.id}
+                      onChange={(e) => setEditForm({ ...editForm, is_active: e.target.checked })}
+                    />
+                    Active
+                  </label>
+                </div>
+
+                {canResetApiKey(selectedUser) && (
+                  <div style={{ marginTop: '8px', padding: '12px', border: '1px solid var(--border)', borderRadius: '8px' }}>
+                    <div style={{ fontWeight: 600, marginBottom: '10px' }}>API Key</div>
+                    <button className="btn-secondary" disabled={saving} onClick={handleResetApiKey}>
+                      🔑 Reset API Key
+                    </button>
+                    {generatedApiKey && (
+                      <div style={{ marginTop: 10, padding: '10px', background: 'rgba(16,185,129,.08)', border: '1px solid rgba(16,185,129,.35)', borderRadius: '6px', wordBreak: 'break-all', fontFamily: 'monospace', fontSize: '13px' }}>
+                        <div style={{ marginBottom: 6, fontWeight: 600, fontFamily: 'inherit' }}>New API Key (copy now!):</div>
+                        <code>{generatedApiKey}</code>
+                        <button
+                          className="btn-sm"
+                          style={{ marginLeft: 8 }}
+                          onClick={() => { navigator.clipboard.writeText(generatedApiKey); setMessage('API key copied to clipboard') }}
+                        >
+                          📋 Copy
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {oidcEnabled && (
+                  <div style={{ marginTop: '8px', padding: '12px', border: '1px solid var(--border)', borderRadius: '8px' }}>
+                    <div style={{ fontWeight: 600, marginBottom: '10px' }}>OIDC Binding</div>
+                    {selectedUser.oidc_subject ? (
+                      <div style={{ marginBottom: 10 }}>
+                        <div className="text-dim" style={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
+                          issuer: {selectedUser.oidc_issuer || '—'}<br />
+                          subject: {selectedUser.oidc_subject}
+                        </div>
+                        <button className="btn-danger" style={{ marginTop: 10 }} disabled={saving} onClick={handleUnbindOidc}>
+                          Unbind OIDC identity
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="text-dim" style={{ marginBottom: 10 }}>No OIDC identity bound.</div>
+                    )}
+                    <label>
+                      Issuer
+                      <input value={bindForm.issuer} placeholder="https://idp.example.com" onChange={(e) => setBindForm({ ...bindForm, issuer: e.target.value })} />
+                    </label>
+                    <label>
+                      Subject (sub)
+                      <input value={bindForm.subject} placeholder="OIDC subject claim" onChange={(e) => setBindForm({ ...bindForm, subject: e.target.value })} />
+                    </label>
+                    <button className="btn-secondary" style={{ marginTop: 10 }} disabled={saving || !bindForm.issuer.trim() || !bindForm.subject.trim()} onClick={handleBindOidc}>
+                      {selectedUser.oidc_subject ? 'Rebind OIDC identity' : 'Bind OIDC identity'}
+                    </button>
+                  </div>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="empty">No user selected.</div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/runtime.ts

@@ -0,0 +1,23 @@
+// Runtime config injected by the container entrypoint into
+// /runtime-config.js (from the deploy-time HARBORFORGE_OIDC_ONLY env).
+// Available before the backend exists — used by the setup wizard.
+declare global {
+  interface Window {
+    __HF_RUNTIME__?: { oidc_only?: boolean; logo_url?: string }
+  }
+}
+
+/** true/false from the injected runtime config, or null when unknown. */
+export function getRuntimeOidcOnly(): boolean | null {
+  const v = typeof window !== 'undefined' ? window.__HF_RUNTIME__?.oidc_only : undefined
+  return typeof v === 'boolean' ? v : null
+}
+
+/** Brand logo URL: deploy-time override (HARBORFORGE_LOGO_URL) or the
+ *  bundled default at /logo.svg. */
+export function getLogoUrl(): string {
+  const u = typeof window !== 'undefined' ? window.__HF_RUNTIME__?.logo_url : undefined
+  return (typeof u === 'string' && u) ? u : '/logo.svg'
+}
+
+export {}

src/services/api.ts

@@ -1,7 +1,12 @@
 import axios from 'axios'
 
+// Backend URL is the build-time VITE_HF_BACKEND_BASE_URL baked into the
+// bundle by docker build --build-arg. Empty → axios uses same-origin
+// (only works in dev with the Vite proxy).
+const API_BASE = import.meta.env.VITE_HF_BACKEND_BASE_URL || undefined
+
 const api = axios.create({
-  baseURL: '/api',
+  baseURL: API_BASE,
 })
 
 api.interceptors.request.use((config) => {
@@ -17,8 +22,12 @@ api.interceptors.response.use(
   (err) => {
     if (err.response?.status === 401) {
       localStorage.removeItem('token')
+      const path = window.location.pathname
+      const publicPaths = ['/monitor', '/login']
+      if (!publicPaths.some((p) => path.startsWith(p))) {
         window.location.href = '/login'
       }
+    }
     return Promise.reject(err)
   }
 )

src/test/calendar.test.tsx

@@ -0,0 +1,317 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor, fireEvent, cleanup } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import CalendarPage from '@/pages/CalendarPage'
+
+const mockGet = vi.fn()
+const mockPost = vi.fn()
+
+vi.mock('@/services/api', () => ({
+  default: {
+    get: (...args: any[]) => mockGet(...args),
+    post: (...args: any[]) => mockPost(...args),
+  },
+}))
+
+type Slot = {
+  slot_id: string
+  date: string
+  slot_type: 'work' | 'on_call' | 'entertainment' | 'system'
+  estimated_duration: number
+  scheduled_at: string
+  started_at: string | null
+  attended: boolean
+  actual_duration: number | null
+  event_type: 'job' | 'entertainment' | 'system_event' | null
+  event_data: Record<string, any> | null
+  priority: number
+  status: 'not_started' | 'ongoing' | 'deferred' | 'skipped' | 'paused' | 'finished' | 'aborted'
+  plan_id: number | null
+  is_virtual: boolean
+  created_at: string | null
+  updated_at: string | null
+}
+
+type Plan = {
+  id: number
+  slot_type: 'work' | 'on_call' | 'entertainment' | 'system'
+  estimated_duration: number
+  event_type: string | null
+  event_data: Record<string, any> | null
+  at_time: string
+  on_day: string | null
+  on_week: number | null
+  on_month: string | null
+  is_active: boolean
+  created_at: string
+  updated_at: string | null
+}
+
+const slots: Slot[] = [
+  {
+    slot_id: '1',
+    date: '2026-04-01',
+    slot_type: 'work',
+    estimated_duration: 25,
+    scheduled_at: '09:00',
+    started_at: null,
+    attended: false,
+    actual_duration: null,
+    event_type: 'job',
+    event_data: { type: 'Task', code: 'TASK-1' },
+    priority: 50,
+    status: 'not_started',
+    plan_id: null,
+    is_virtual: false,
+    created_at: '2026-04-01T00:00:00Z',
+    updated_at: '2026-04-01T00:00:00Z',
+  },
+  {
+    slot_id: 'plan-5-2026-04-01',
+    date: '2026-04-01',
+    slot_type: 'on_call',
+    estimated_duration: 30,
+    scheduled_at: '14:00',
+    started_at: null,
+    attended: false,
+    actual_duration: null,
+    event_type: null,
+    event_data: null,
+    priority: 70,
+    status: 'deferred',
+    plan_id: 5,
+    is_virtual: true,
+    created_at: null,
+    updated_at: null,
+  },
+]
+
+const plans: Plan[] = [
+  {
+    id: 5,
+    slot_type: 'on_call',
+    estimated_duration: 30,
+    event_type: null,
+    event_data: null,
+    at_time: '14:00',
+    on_day: 'Mon',
+    on_week: null,
+    on_month: null,
+    is_active: true,
+    created_at: '2026-03-01T00:00:00Z',
+    updated_at: null,
+  },
+  {
+    id: 6,
+    slot_type: 'work',
+    estimated_duration: 50,
+    event_type: 'system_event',
+    event_data: { event: 'ScheduleToday' },
+    at_time: '08:00',
+    on_day: 'Tue',
+    on_week: 1,
+    on_month: null,
+    is_active: false,
+    created_at: '2026-03-01T00:00:00Z',
+    updated_at: null,
+  },
+]
+
+function setupApi(options?: {
+  slots?: Slot[]
+  plans?: Plan[]
+  dayError?: string
+  postImpl?: (url: string, payload?: any) => any
+}) {
+  const currentSlots = options?.slots ?? slots
+  const currentPlans = options?.plans ?? plans
+
+  mockGet.mockImplementation((url: string) => {
+    if (url.startsWith('/calendar/day')) {
+      if (options?.dayError) {
+        return Promise.reject({ response: { data: { detail: options.dayError } } })
+      }
+      return Promise.resolve({ data: currentSlots })
+    }
+    if (url === '/calendar/plans') {
+      return Promise.resolve({ data: currentPlans })
+    }
+    return Promise.reject(new Error(`Unhandled GET ${url}`))
+  })
+
+  mockPost.mockImplementation((url: string, payload?: any) => {
+    if (options?.postImpl) return options.postImpl(url, payload)
+    return Promise.resolve({ data: {} })
+  })
+}
+
+describe('CalendarPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupApi()
+    vi.spyOn(window, 'confirm').mockReturnValue(true)
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+  })
+
+  it('renders daily slots, deferred notice, and virtual-plan badge', async () => {
+    render(<CalendarPage />)
+
+    expect(await screen.findByText('09:00')).toBeInTheDocument()
+    expect(screen.getByText('14:00')).toBeInTheDocument()
+    expect(screen.getAllByText(/deferred/i).length).toBeGreaterThan(0)
+    expect(screen.getByText(/agent unavailability/i)).toBeInTheDocument()
+    expect(screen.getByText(/TASK-1/i)).toBeInTheDocument()
+    expect(screen.getByText(/^plan$/i)).toBeInTheDocument()
+    expect(screen.getByText(/Priority: 50/i)).toBeInTheDocument()
+  })
+
+  it('renders plans tab content', async () => {
+    render(<CalendarPage />)
+
+    await screen.findByText('09:00')
+    await userEvent.click(screen.getByRole('button', { name: /Plans \(2\)/i }))
+
+    expect(await screen.findByText(/Plan #5/i)).toBeInTheDocument()
+    expect(screen.getByText(/Plan #6/i)).toBeInTheDocument()
+    expect(screen.getByText(/at 14:00 · on Mon/i)).toBeInTheDocument()
+    expect(screen.getByText(/inactive/i)).toBeInTheDocument()
+  })
+
+  it('opens create modal and toggles event-specific fields', async () => {
+    render(<CalendarPage />)
+
+    await screen.findByText('09:00')
+    await userEvent.click(screen.getByRole('button', { name: /\+ New Slot/i }))
+
+    expect(screen.getByRole('heading', { name: /New Slot/i })).toBeInTheDocument()
+
+    const selects = screen.getAllByRole('combobox')
+    const eventTypeSelect = selects[1]
+
+    fireEvent.change(eventTypeSelect, { target: { value: 'job' } })
+    expect(screen.getByLabelText(/Job Code/i)).toBeInTheDocument()
+
+    fireEvent.change(eventTypeSelect, { target: { value: 'system_event' } })
+    expect(screen.getByLabelText(/System Event/i)).toBeInTheDocument()
+  })
+
+  it('submits new slot and displays workload warnings', async () => {
+    setupApi({
+      postImpl: (url: string) => {
+        if (url === '/calendar/schedule') {
+          return Promise.resolve({
+            data: {
+              slot: slots[0],
+              warnings: [
+                {
+                  period: 'daily',
+                  slot_type: 'work',
+                  current: 25,
+                  minimum: 120,
+                  message: 'Daily work minimum not met',
+                },
+              ],
+            },
+          })
+        }
+        return Promise.resolve({ data: {} })
+      },
+    })
+
+    render(<CalendarPage />)
+
+    await screen.findByText('09:00')
+    await userEvent.click(screen.getByRole('button', { name: /\+ New Slot/i }))
+    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }))
+
+    await waitFor(() => {
+      expect(mockPost).toHaveBeenCalledWith(
+        '/calendar/schedule',
+        expect.objectContaining({
+          slot_type: 'work',
+          scheduled_at: '09:00',
+          estimated_duration: 25,
+          priority: 50,
+          date: '2026-04-01',
+        }),
+      )
+    })
+
+    expect(await screen.findByText(/Workload Warnings/i)).toBeInTheDocument()
+    expect(screen.getByText(/Daily work minimum not met/i)).toBeInTheDocument()
+  })
+
+  it('shows overlap error when save fails with overlap detail', async () => {
+    setupApi({
+      postImpl: (url: string) => {
+        if (url === '/calendar/schedule') {
+          return Promise.reject({
+            response: { data: { detail: 'Slot overlap with existing slot at 09:00' } },
+          })
+        }
+        return Promise.resolve({ data: {} })
+      },
+    })
+
+    render(<CalendarPage />)
+
+    await screen.findByText('09:00')
+    await userEvent.click(screen.getByRole('button', { name: /\+ New Slot/i }))
+    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }))
+
+    expect(await screen.findByText(/Overlap conflict/i)).toBeInTheDocument()
+  })
+
+  it('opens edit modal with existing slot values and submits edit request', async () => {
+    setupApi({
+      postImpl: (url: string) => {
+        if (url.startsWith('/calendar/edit')) {
+          return Promise.resolve({ data: { slot: slots[0], warnings: [] } })
+        }
+        return Promise.resolve({ data: {} })
+      },
+    })
+
+    render(<CalendarPage />)
+
+    await screen.findByText('09:00')
+    await userEvent.click(screen.getAllByRole('button', { name: /✏️ Edit/i })[0])
+
+    expect(screen.getByRole('heading', { name: /Edit Slot/i })).toBeInTheDocument()
+    expect((screen.getAllByRole('combobox')[0] as HTMLSelectElement).value).toBe('work')
+    expect((document.querySelector('input[type="time"]') as HTMLInputElement).value).toBe('09:00')
+
+    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }))
+
+    await waitFor(() => {
+      expect(mockPost).toHaveBeenCalledWith(
+        expect.stringContaining('/calendar/edit?date=2026-04-01&slot_id=1'),
+        expect.objectContaining({ slot_type: 'work' }),
+      )
+    })
+  })
+
+  it('cancels a slot after confirmation', async () => {
+    render(<CalendarPage />)
+
+    await screen.findByText('09:00')
+    await userEvent.click(screen.getAllByRole('button', { name: /❌ Cancel/i })[0])
+
+    await waitFor(() => {
+      expect(window.confirm).toHaveBeenCalled()
+      expect(mockPost).toHaveBeenCalledWith('/calendar/cancel?date=2026-04-01&slot_id=1')
+    })
+  })
+
+  it('shows fetch error banner when day loading fails', async () => {
+    setupApi({ dayError: 'Failed to load calendar' })
+
+    render(<CalendarPage />)
+
+    expect(await screen.findByText(/Failed to load calendar/i)).toBeInTheDocument()
+  })
+})

src/test/proposal-essential.test.tsx

@@ -0,0 +1,525 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor, fireEvent, cleanup } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ProposalDetailPage from '@/pages/ProposalDetailPage'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+
+const mockGet = vi.fn()
+const mockPost = vi.fn()
+const mockPatch = vi.fn()
+const mockDelete = vi.fn()
+
+vi.mock('@/services/api', () => ({
+  default: {
+    get: (...args: any[]) => mockGet(...args),
+    post: (...args: any[]) => mockPost(...args),
+    patch: (...args: any[]) => mockPatch(...args),
+    delete: (...args: any[]) => mockDelete(...args),
+  },
+}))
+
+const mockNavigate = vi.fn()
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    useParams: () => ({ id: '1' }),
+    useSearchParams: () => [new URLSearchParams('?project_id=1'), vi.fn()],
+  }
+})
+
+type Essential = {
+  id: number
+  essential_code: string
+  proposal_id: number
+  type: 'feature' | 'improvement' | 'refactor'
+  title: string
+  description: string | null
+  created_by_id: number | null
+  created_at: string
+  updated_at: string | null
+}
+
+type Proposal = {
+  id: number
+  proposal_code: string | null
+  title: string
+  description: string | null
+  status: 'open' | 'accepted' | 'rejected'
+  project_id: number
+  created_by_id: number | null
+  created_by_username: string | null
+  feat_task_id: string | null
+  essentials: Essential[] | null
+  generated_tasks: any[] | null
+  created_at: string
+  updated_at: string | null
+}
+
+type Milestone = {
+  id: number
+  title: string
+  status: 'open' | 'freeze' | 'undergoing' | 'completed' | 'closed'
+}
+
+const mockProposal: Proposal = {
+  id: 1,
+  proposal_code: 'PROP-001',
+  title: 'Test Proposal',
+  description: 'Test description',
+  status: 'open',
+  project_id: 1,
+  created_by_id: 1,
+  created_by_username: 'admin',
+  feat_task_id: null,
+  essentials: [],
+  generated_tasks: null,
+  created_at: '2026-03-01T00:00:00Z',
+  updated_at: null,
+}
+
+const mockEssentials: Essential[] = [
+  {
+    id: 1,
+    essential_code: 'ESS-001',
+    proposal_id: 1,
+    type: 'feature',
+    title: 'Feature Essential',
+    description: 'A feature essential',
+    created_by_id: 1,
+    created_at: '2026-03-01T00:00:00Z',
+    updated_at: null,
+  },
+  {
+    id: 2,
+    essential_code: 'ESS-002',
+    proposal_id: 1,
+    type: 'improvement',
+    title: 'Improvement Essential',
+    description: null,
+    created_by_id: 1,
+    created_at: '2026-03-01T00:00:00Z',
+    updated_at: null,
+  },
+]
+
+const mockMilestones: Milestone[] = [
+  { id: 1, title: 'Milestone 1', status: 'open' },
+  { id: 2, title: 'Milestone 2', status: 'open' },
+]
+
+function setupApi(options?: {
+  proposal?: Proposal
+  essentials?: Essential[]
+  milestones?: Milestone[]
+  error?: string
+}) {
+  const proposal = options?.proposal ?? mockProposal
+  const essentials = options?.essentials ?? mockEssentials
+  const milestones = options?.milestones ?? mockMilestones
+
+  mockGet.mockImplementation((url: string) => {
+    if (url.includes('/proposals/1') && !url.includes('/essentials')) {
+      if (options?.error) {
+        return Promise.reject({ response: { data: { detail: options.error } } })
+      }
+      return Promise.resolve({ data: proposal })
+    }
+    if (url.includes('/essentials')) {
+      return Promise.resolve({ data: essentials })
+    }
+    if (url.includes('/milestones')) {
+      return Promise.resolve({ data: milestones })
+    }
+    return Promise.reject(new Error(`Unhandled GET ${url}`))
+  })
+
+  mockPost.mockResolvedValue({ data: {} })
+  mockPatch.mockResolvedValue({ data: {} })
+  mockDelete.mockResolvedValue({ data: {} })
+}
+
+describe('ProposalDetailPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupApi()
+    vi.spyOn(window, 'confirm').mockReturnValue(true)
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+  })
+
+  describe('Essential List Display', () => {
+    it('renders essentials section with count', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Essentials (2)')).toBeInTheDocument()
+      })
+    })
+
+    it('displays essential cards with type badges', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Feature Essential')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Improvement Essential')).toBeInTheDocument()
+      expect(screen.getByText('feature')).toBeInTheDocument()
+      expect(screen.getByText('improvement')).toBeInTheDocument()
+    })
+
+    it('displays essential codes', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('ESS-001')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('ESS-002')).toBeInTheDocument()
+    })
+
+    it('displays essential descriptions when available', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('A feature essential')).toBeInTheDocument()
+      })
+    })
+
+    it('shows empty state when no essentials', async () => {
+      setupApi({ essentials: [] })
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Essentials (0)')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText(/No essentials yet/)).toBeInTheDocument()
+      expect(screen.getByText(/Add one to define deliverables/)).toBeInTheDocument()
+    })
+
+    it('shows loading state for essentials', async () => {
+      mockGet.mockImplementation((url: string) => {
+        if (url.includes('/proposals/1') && !url.includes('/essentials')) {
+          return Promise.resolve({ data: mockProposal })
+        }
+        if (url.includes('/essentials')) {
+          return new Promise(() => {}) // Never resolve
+        }
+        return Promise.reject(new Error(`Unhandled GET ${url}`))
+      })
+
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText(/Loading/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Essential Create/Edit Forms', () => {
+    it('opens create essential modal', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('+ New Essential')).toBeInTheDocument()
+      })
+
+      await userEvent.click(screen.getByText('+ New Essential'))
+
+      expect(screen.getByRole('heading', { name: 'New Essential' })).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('Essential title')).toBeInTheDocument()
+      expect(screen.getByText('Feature')).toBeInTheDocument()
+      expect(screen.getByText('Improvement')).toBeInTheDocument()
+      expect(screen.getByText('Refactor')).toBeInTheDocument()
+    })
+
+    it('creates new essential', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('+ New Essential')).toBeInTheDocument()
+      })
+
+      await userEvent.click(screen.getByText('+ New Essential'))
+
+      await userEvent.type(screen.getByPlaceholderText('Essential title'), 'New Test Essential')
+      fireEvent.change(screen.getAllByRole('combobox')[0], { target: { value: 'refactor' } })
+      await userEvent.type(screen.getByPlaceholderText('Description (optional)'), 'Test description')
+
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+      await waitFor(() => {
+        expect(mockPost).toHaveBeenCalledWith(
+          '/projects/1/proposals/1/essentials',
+          expect.objectContaining({
+            title: 'New Test Essential',
+            type: 'refactor',
+            description: 'Test description',
+          })
+        )
+      })
+    })
+
+    it('opens edit essential modal with pre-filled data', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Feature Essential')).toBeInTheDocument()
+      })
+
+      const editButtons = screen.getAllByRole('button', { name: 'Edit' })
+      await userEvent.click(editButtons[0])
+
+      expect(screen.getByRole('heading', { name: 'Edit Essential' })).toBeInTheDocument()
+
+      const titleInput = screen.getByDisplayValue('Feature Essential')
+      expect(titleInput).toBeInTheDocument()
+
+      const descriptionInput = screen.getByDisplayValue('A feature essential')
+      expect(descriptionInput).toBeInTheDocument()
+    })
+
+    it('updates essential', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Feature Essential')).toBeInTheDocument()
+      })
+
+      const editButtons = screen.getAllByRole('button', { name: 'Edit' })
+      await userEvent.click(editButtons[0])
+
+      const titleInput = screen.getByDisplayValue('Feature Essential')
+      await userEvent.clear(titleInput)
+      await userEvent.type(titleInput, 'Updated Essential Title')
+
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+      await waitFor(() => {
+        expect(mockPatch).toHaveBeenCalledWith(
+          '/projects/1/proposals/1/essentials/1',
+          expect.objectContaining({
+            title: 'Updated Essential Title',
+            type: 'feature',
+            description: 'A feature essential',
+          })
+        )
+      })
+    })
+
+    it('deletes essential after confirmation', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Feature Essential')).toBeInTheDocument()
+      })
+
+      const deleteButtons = screen.getAllByRole('button', { name: 'Delete' })
+      await userEvent.click(deleteButtons[0])
+
+      await waitFor(() => {
+        expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete this Essential?')
+      })
+
+      await waitFor(() => {
+        expect(mockDelete).toHaveBeenCalledWith('/projects/1/proposals/1/essentials/1')
+      })
+    })
+
+    it('disables save button when title is empty', async () => {
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('+ New Essential')).toBeInTheDocument()
+      })
+
+      await userEvent.click(screen.getByText('+ New Essential'))
+
+      const saveButton = screen.getByRole('button', { name: 'Save' })
+      expect(saveButton).toBeDisabled()
+
+      await userEvent.type(screen.getByPlaceholderText('Essential title'), 'Some Title')
+      expect(saveButton).toBeEnabled()
+
+      await userEvent.clear(screen.getByPlaceholderText('Essential title'))
+      expect(saveButton).toBeDisabled()
+    })
+  })
+
+  describe('Accept with Milestone Selection', () => {
+    it('opens accept modal with milestone selector', async () => {
+      render(<ProposalDetailPage />)
+
+      const acceptButton = await screen.findByRole('button', { name: /accept/i })
+      await userEvent.click(acceptButton)
+
+      expect(screen.getByRole('heading', { name: 'Accept Proposal' })).toBeInTheDocument()
+      expect(screen.getByText(/milestone to generate story tasks/i)).toBeInTheDocument()
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('disables confirm button without milestone selection', async () => {
+      render(<ProposalDetailPage />)
+
+      const acceptButton = await screen.findByRole('button', { name: /accept/i })
+      await userEvent.click(acceptButton)
+
+      const confirmButton = screen.getByRole('button', { name: 'Confirm Accept' })
+      expect(confirmButton).toBeDisabled()
+    })
+
+    it('enables confirm button after milestone selection', async () => {
+      render(<ProposalDetailPage />)
+
+      const acceptButton = await screen.findByRole('button', { name: /accept/i })
+      await userEvent.click(acceptButton)
+
+      const select = screen.getByRole('combobox')
+      fireEvent.change(select, { target: { value: '1' } })
+
+      const confirmButton = screen.getByRole('button', { name: 'Confirm Accept' })
+      expect(confirmButton).toBeEnabled()
+    })
+
+    it('calls accept API with selected milestone', async () => {
+      render(<ProposalDetailPage />)
+
+      const acceptButton = await screen.findByRole('button', { name: /accept/i })
+      await userEvent.click(acceptButton)
+
+      const select = screen.getByRole('combobox')
+      fireEvent.change(select, { target: { value: '1' } })
+
+      await userEvent.click(screen.getByRole('button', { name: 'Confirm Accept' }))
+
+      await waitFor(() => {
+        expect(mockPost).toHaveBeenCalledWith(
+          '/projects/1/proposals/1/accept',
+          { milestone_id: 1 }
+        )
+      })
+    })
+
+    it('shows warning when no open milestones available', async () => {
+      setupApi({ milestones: [] })
+      render(<ProposalDetailPage />)
+
+      const acceptButton = await screen.findByRole('button', { name: /accept/i })
+      await userEvent.click(acceptButton)
+
+      expect(screen.getByText('No open milestones available.')).toBeInTheDocument()
+    })
+
+    it('displays generated tasks after accept', async () => {
+      const acceptedProposal: Proposal = {
+        ...mockProposal,
+        status: 'accepted',
+        generated_tasks: [
+          { task_id: 1, task_code: 'TASK-001', title: 'Story Task 1', task_type: 'story', task_subtype: 'feature' },
+          { task_id: 2, task_code: 'TASK-002', title: 'Story Task 2', task_type: 'story', task_subtype: 'improvement' },
+        ],
+      }
+      setupApi({ proposal: acceptedProposal })
+
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Generated Tasks')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Story Task 1')).toBeInTheDocument()
+      expect(screen.getByText('Story Task 2')).toBeInTheDocument()
+      expect(screen.getByText('story/feature')).toBeInTheDocument()
+      expect(screen.getByText('story/improvement')).toBeInTheDocument()
+    })
+  })
+
+  describe('Story Creation Restriction UI', () => {
+    it('hides essential controls for accepted proposal', async () => {
+      const acceptedProposal: Proposal = {
+        ...mockProposal,
+        status: 'accepted',
+        essentials: mockEssentials,
+      }
+      setupApi({ proposal: acceptedProposal })
+
+      render(<ProposalDetailPage />)
+
+      await screen.findByText('Feature Essential')
+      expect(screen.queryByText('+ New Essential')).not.toBeInTheDocument()
+    })
+
+    it('hides edit/delete buttons for essentials when proposal is accepted', async () => {
+      const acceptedProposal: Proposal = {
+        ...mockProposal,
+        status: 'accepted',
+        essentials: mockEssentials,
+      }
+      setupApi({ proposal: acceptedProposal })
+
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Feature Essential')).toBeInTheDocument()
+      })
+
+      const deleteButtons = screen.queryAllByRole('button', { name: 'Delete' })
+      expect(deleteButtons.length).toBe(0)
+    })
+
+    it('hides edit/delete buttons for rejected proposal', async () => {
+      const rejectedProposal: Proposal = {
+        ...mockProposal,
+        status: 'rejected',
+        essentials: mockEssentials,
+      }
+      setupApi({ proposal: rejectedProposal })
+
+      render(<ProposalDetailPage />)
+
+      await screen.findByRole('button', { name: /reopen/i })
+      expect(screen.queryByText('+ New Essential')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('displays error message on essential create failure', async () => {
+      mockPost.mockRejectedValue({ response: { data: { detail: 'Failed to create essential' } } })
+
+      render(<ProposalDetailPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('+ New Essential')).toBeInTheDocument()
+      })
+
+      await userEvent.click(screen.getByText('+ New Essential'))
+      await userEvent.type(screen.getByPlaceholderText('Essential title'), 'Test')
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to create essential')).toBeInTheDocument()
+      })
+    })
+
+    it('displays error message on accept failure', async () => {
+      mockPost.mockRejectedValue({ response: { data: { detail: 'Accept failed: milestone required' } } })
+
+      render(<ProposalDetailPage />)
+
+      const acceptButton = await screen.findByRole('button', { name: /accept/i })
+      await userEvent.click(acceptButton)
+      fireEvent.change(screen.getByRole('combobox'), { target: { value: '1' } })
+      await userEvent.click(screen.getByRole('button', { name: 'Confirm Accept' }))
+
+      await waitFor(() => {
+        expect(screen.getByText('Accept failed: milestone required')).toBeInTheDocument()
+      })
+    })
+  })
+})

src/test/setup.ts

@@ -0,0 +1,64 @@
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+
+// VITE_HF_BACKEND_BASE_URL is the build-time backend URL; in tests we
+// stub it via import.meta.env (api.ts + useAuthConfig + App read it).
+;(import.meta as any).env = {
+  ...(import.meta as any).env,
+  VITE_HF_BACKEND_BASE_URL: 'http://localhost:8000',
+}
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: vi.fn((key: string) => {
+    if (key === 'token') return 'mock-token'
+    return null
+  }),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+}
+vi.stubGlobal('localStorage', localStorageMock)
+
+// Mock window.location
+Object.defineProperty(window, 'location', {
+  configurable: true,
+  value: Object.defineProperties({}, {
+  pathname: { value: '/calendar', writable: true },
+  href: { value: 'http://localhost/calendar', writable: true },
+  assign: { value: vi.fn(), writable: true },
+  replace: { value: vi.fn(), writable: true },
+  }) as any,
+})
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock ResizeObserver
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+
+// Mock IntersectionObserver
+class IntersectionObserverMock {
+  constructor() {}
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('IntersectionObserver', IntersectionObserverMock)

src/types/index.ts

@@ -2,31 +2,105 @@ export interface User {
   id: number
   username: string
   email: string
+  full_name: string | null
   is_admin: boolean
+  is_active: boolean
+  role_id: number | null
+  role_name: string | null
+  oidc_issuer?: string | null
+  oidc_subject?: string | null
   created_at: string
 }
 
 export interface Project {
   id: number
   name: string
+  owner: string
   description: string | null
   owner_id: number
+  owner_name: string | null
+  project_code: string | null
+  repo: string | null
+  sub_projects: string[] | null
+  related_projects: string[] | null
   created_at: string
 }
 
-export interface Issue {
+export interface KnowledgeBase {
   id: number
+  knowledge_base_code: string | null
   title: string
   description: string | null
-  issue_type: 'task' | 'bug' | 'feature' | 'resolution'
+  created_by: number
-  status: 'open' | 'in_progress' | 'resolved' | 'closed' | 'blocked'
+  created_at: string | null
+  last_updated_at: string | null
+}
+
+export interface KnowledgeFact {
+  id: number
+  category_id: number | null
+  topic_id: number
+  fact: string
+  last_updated_at: string | null
+}
+
+export interface KnowledgeCategoryNode {
+  id: number
+  name: string
+  parent: number | null
+  topic_id: number
+  description: string | null
+  categories: KnowledgeCategoryNode[]
+  facts: KnowledgeFact[]
+}
+
+export interface KnowledgeTopicNode {
+  id: number
+  topic: string
+  knowledge_base_id: number
+  description: string | null
+  categories: KnowledgeCategoryNode[]
+  facts: KnowledgeFact[]
+}
+
+export interface KnowledgeBaseTree {
+  id: number
+  knowledge_base_code: string | null
+  title: string
+  description: string | null
+  topics: KnowledgeTopicNode[]
+}
+
+export interface ProjectMember {
+  id: number
+  user_id: number
+  username: string | null
+  full_name: string | null
+  project_id: number
+  role: string
+}
+
+export interface Task {
+  id: number
+  task_code: string | null
+  project_code?: string | null
+  milestone_code?: string | null
+  title: string
+  description: string | null
+  task_type: 'issue' | 'maintenance' | 'research' | 'review' | 'story' | 'test' | 'resolution'  // P7.1: 'task' removed
+  task_subtype: string | null
+  status: 'open' | 'pending' | 'undergoing' | 'completed' | 'closed'
   priority: 'low' | 'medium' | 'high' | 'critical'
   project_id: number
+  milestone_id: number | null
   reporter_id: number
   assignee_id: number | null
+  created_by_id: number | null
   tags: string | null
   due_date: string | null
-  milestone_id: number | null
+  resolution_summary: string | null
+  positions: string | null
+  pending_matters: string | null
   created_at: string
   updated_at: string | null
 }
@@ -34,14 +108,61 @@ export interface Issue {
 export interface Comment {
   id: number
   content: string
-  issue_id: number
+  task_id: number
   author_id: number
+  author_username: string | null
   created_at: string
   updated_at: string | null
 }
 
+export interface Milestone {
+  id: number
+  milestone_code: string | null
+  project_code?: string | null
+  title: string
+  description: string | null
+  status: 'open' | 'freeze' | 'undergoing' | 'completed' | 'closed'
+  started_at: string | null
+  project_id: number
+  created_by_id: number | null
+  due_date: string | null
+  planned_release_date: string | null
+  depend_on_milestones: string[]
+  depend_on_tasks: number[]
+  created_at: string
+  updated_at: string | null
+}
+
+export interface MilestoneProgress {
+  milestone_id: number
+  title: string
+  total_tasks: number
+  total: number
+  completed: number
+  progress_pct: number
+  time_progress_pct: number | null
+  planned_release_date: string | null
+}
+
+export interface MilestoneItems {
+  tasks: any[]
+  supports: any[]
+  meetings: any[]
+}
+
+export interface Notification {
+  id: number
+  user_id: number
+  message: string
+  is_read: boolean
+  task_id: number | null
+  task_code?: string | null
+  created_at: string
+}
+
 export interface PaginatedResponse<T> {
   items: T[]
+  total_tasks: number
   total: number
   page: number
   page_size: number
@@ -49,11 +170,54 @@ export interface PaginatedResponse<T> {
 }
 
 export interface DashboardStats {
-  total_issues: number
+  total_tasks: number
+  total: number
   by_status: Record<string, number>
   by_priority: Record<string, number>
   by_type: Record<string, number>
-  recent_issues: Issue[]
+  recent_tasks: Task[]
+}
+
+export interface Proposal {
+  id: number
+  proposal_code: string | null
+  title: string
+  description: string | null
+  status: 'open' | 'accepted' | 'rejected'
+  project_id: number
+  project_code?: string | null
+  created_by_id: number | null
+  created_by_username: string | null
+  feat_task_id: string | null
+  essentials: Essential[] | null
+  generated_tasks: GeneratedTask[] | null
+  created_at: string
+  updated_at: string | null
+}
+
+/** @deprecated Use Proposal instead */
+export type Propose = Proposal
+
+export interface GeneratedTask {
+  task_id: number
+  task_code: string | null
+  title: string
+  task_type: string
+  task_subtype: string | null
+}
+
+export type EssentialType = 'feature' | 'improvement' | 'refactor'
+
+export interface Essential {
+  id: number
+  essential_code: string
+  proposal_id: number
+  type: EssentialType
+  title: string
+  description: string | null
+  created_by_id: number | null
+  created_at: string
+  updated_at: string | null
 }
 
 export interface LoginResponse {

src/vite-env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE: string
+  /**
+   * Backend base URL baked in at build time (e.g.
+   * https://hf-api.example.com). Frontend uses this for all API calls.
+   * Passed to the Dockerfile as an ARG and forwarded to `npm run build`.
+   * Empty string falls back to same-origin (only useful in dev with the
+   * Vite proxy).
+   */
+  readonly VITE_HF_BACKEND_BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
     port: 3000,
+    allowedHosts: ['frontend', '127.0.0.1', 'localhost'],
     proxy: {
       '/api': {
         target: 'http://backend:8000',
@@ -18,4 +19,11 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    css: true,
+    include: ['src/test/**/*.test.{ts,tsx}'],
+  },
 })