187 lines
7.7 KiB
Markdown
187 lines
7.7 KiB
Markdown
|
# Frontend Redesign — Design Spec
|
|||
|
|
**Date:** 2026-06-03
|
|||
|
|
**Status:** Approved
|
|||
|
|
|
|||
|
|
## Overview
|
|||
|
|
|
|||
|
|
Complete replacement of the existing frontend UI layer, strictly following the HTML prototype designs in the `Prototype/` folder. The API layer (`api/`), mock data (`data/`), and TypeScript types (`types/`) are preserved unchanged. Only the UI layer is rewritten.
|
|||
|
|
|
|||
|
|
## Design System
|
|||
|
|
|
|||
|
|
### CSS Variables (Design Tokens)
|
|||
|
|
|
|||
|
|
Defined in `frontend/src/styles/globals.css`, extracted directly from prototypes:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* Sidebar (light rail) */
|
|||
|
|
--rail-bg: #ffffff
|
|||
|
|
--rail-surface: #f7f8fa
|
|||
|
|
--rail-fg: #111827
|
|||
|
|
--rail-muted: #8b929e
|
|||
|
|
--rail-border: #e8eaed
|
|||
|
|
--rail-hover: rgba(0,0,0,.04)
|
|||
|
|
--rail-active: rgba(226,0,116,.07)
|
|||
|
|
|
|||
|
|
/* Canvas */
|
|||
|
|
--bg: #f2f4f7
|
|||
|
|
--surface: #ffffff
|
|||
|
|
--fg: #111827
|
|||
|
|
--muted: #6b7280
|
|||
|
|
--border: #e5e7eb
|
|||
|
|
|
|||
|
|
/* Brand */
|
|||
|
|
--accent: #e20074
|
|||
|
|
--accent-dim: rgba(226,0,116,.10)
|
|||
|
|
--accent-hover: #c8006a
|
|||
|
|
--success: #16a34a
|
|||
|
|
--warn: #d97706
|
|||
|
|
--danger: #dc2626
|
|||
|
|
|
|||
|
|
/* Typography */
|
|||
|
|
--font-display: "TeleNeoWeb-Bold", "Inter", -apple-system, sans-serif
|
|||
|
|
--font-body: "TeleNeoWeb-Regular", "Inter", -apple-system, sans-serif
|
|||
|
|
--font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace
|
|||
|
|
|
|||
|
|
/* Layout */
|
|||
|
|
--sidebar-w: 232px
|
|||
|
|
--radius-sm: 6px
|
|||
|
|
--radius-md: 10px
|
|||
|
|
--radius-pill: 9999px
|
|||
|
|
--shadow-card: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04)
|
|||
|
|
|
|||
|
|
/* Dark mode: data-theme="dark" overrides all above */
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Dark Mode
|
|||
|
|
Toggle via `data-theme="dark"` on `<html>`. Persisted to `localStorage`. Sidebar footer button triggers toggle.
|
|||
|
|
|
|||
|
|
## Architecture
|
|||
|
|
|
|||
|
|
### File Structure (UI layer only — rewrite)
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
frontend/src/
|
|||
|
|
├── styles/
|
|||
|
|
│ └── globals.css ← Rewrite: design tokens + base reset
|
|||
|
|
├── components/
|
|||
|
|
│ └── layout/
|
|||
|
|
│ ├── AppShell.tsx ← Rewrite: CSS grid sidebar(232px) + content-area
|
|||
|
|
│ ├── Sidebar.tsx ← New: brand + nav groups + user footer + theme toggle
|
|||
|
|
│ └── Topbar.tsx ← New: sticky topbar (per-page title + actions)
|
|||
|
|
├── pages/
|
|||
|
|
│ ├── Overview/
|
|||
|
|
│ │ └── OverviewPage.tsx ← New: launcher index
|
|||
|
|
│ ├── Status/
|
|||
|
|
│ │ └── StatusPage.tsx ← Rewrite: system status dashboard
|
|||
|
|
│ ├── Perception/
|
|||
|
|
│ │ ├── PerceptionPage.tsx ← Rewrite: regulatory signals
|
|||
|
|
│ │ └── EventFeed.tsx ← Rewrite: feed pane
|
|||
|
|
│ ├── Docs/
|
|||
|
|
│ │ └── DocsPage.tsx ← Rewrite: document management
|
|||
|
|
│ ├── Compliance/
|
|||
|
|
│ │ └── CompliancePage.tsx ← Rewrite: compliance analysis workspace
|
|||
|
|
│ └── RagChat/
|
|||
|
|
│ └── RagChatPage.tsx ← Rewrite: regulation Q&A chat
|
|||
|
|
├── router/
|
|||
|
|
│ └── AppRouter.tsx ← Rewrite: 6 routes with sidebar layout
|
|||
|
|
├── api/ ← PRESERVE unchanged
|
|||
|
|
├── data/ ← PRESERVE unchanged
|
|||
|
|
└── types/ ← PRESERVE unchanged
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Navigation (Sidebar)
|
|||
|
|
|
|||
|
|
Permanent left sidebar, 232px wide. Groups:
|
|||
|
|
|
|||
|
|
**Main**
|
|||
|
|
- Overview (grid icon)
|
|||
|
|
- Regulatory Signals (eye/radar icon) — badge: high-impact count
|
|||
|
|
- System Status (list icon) — badge: active issues count
|
|||
|
|
|
|||
|
|
**Workbench**
|
|||
|
|
- Documents (file icon)
|
|||
|
|
- Compliance Analysis (shield icon)
|
|||
|
|
|
|||
|
|
**Chat**
|
|||
|
|
- Regulation Q&A (chat bubble icon)
|
|||
|
|
|
|||
|
|
Footer: user avatar (TS) + name/role + theme toggle button.
|
|||
|
|
|
|||
|
|
Active item: accent-colored left border bar (3px) + accent background tint.
|
|||
|
|
|
|||
|
|
## Pages
|
|||
|
|
|
|||
|
|
### 1. Overview
|
|||
|
|
- Hero section: title + subtitle + CTA buttons (Open dashboard, Jump to regulation chat)
|
|||
|
|
- Summary card (scope: 6 screens / Backend-aware flows / Review posture)
|
|||
|
|
- Workflow steps (6-column grid): 01 Dashboard → 06 Chat
|
|||
|
|
- Screen grid (2×3): clickable cards with mini mockup previews
|
|||
|
|
|
|||
|
|
### 2. System Status (`dashboard-sidebar.html`)
|
|||
|
|
- **Topbar**: "System Status" title + search + "Export status" btn + "New upload" btn (primary)
|
|||
|
|
- **Stats grid (4-col)**: Documents total / Vector chunks / High-impact signals / Last 90 days — values fetched from `/api/v1/perception/stats`
|
|||
|
|
- **Panel grid (1.4fr + 0.9fr)**:
|
|||
|
|
- Left: Workflow queue (task rows: name/status/progress/CTA) + Active compliance programs (program rows + KPI strip: Retrieval hit rate / Evidence coverage / Reviewer SLA with meter bars)
|
|||
|
|
- Right: System health (service rows: name/status) + Regulatory watch (event rows: date/title/summary clamp-2)
|
|||
|
|
- **Footer**: brand name + live green dot + "Online"
|
|||
|
|
|
|||
|
|
### 3. Regulatory Signals (`perception.html`)
|
|||
|
|
- **Topbar**: title + subtitle monospace + search + Refresh btn
|
|||
|
|
- **Stats bar (4-col, flush, no card borders)**: Total / High impact (danger color) / Medium impact (warn color) / Last 90 days (accent color) — fetched from `/api/v1/perception/stats`
|
|||
|
|
- **Filter bar**: Source chips (All/MIIT/UN-ECE/ISO/GB Comm./EUR-Lex/IATF) + separator + Impact chips (All/High/Medium/Low)
|
|||
|
|
- **Two-pane split (360px + 1fr)**:
|
|||
|
|
- Left feed pane: scrollable event cards (source tag colored, standard code, status pill, title, summary clamp-2, date, tags, impact dot). Selected card gets accent border + glow ring.
|
|||
|
|
- Right analysis pane: empty state with ring icon. On select: detail card (source/code/status/title/summary/meta) + action row (Run impact analysis btn, Stop btn, Source link) + Affected documents card (doc rows: score%/name/clause/snippet) + AI output card (SSE streaming with blink cursor, markdown rendering)
|
|||
|
|
- **Footer**: live dot + "Live feed" + brand
|
|||
|
|
|
|||
|
|
### 4. Documents (`document-management.html`)
|
|||
|
|
- **Topbar**: title + search + filter controls + "Upload document" primary btn
|
|||
|
|
- **Filter bar**: status chips (All/Ready/Embedding/Failed/Pending) + regulation type filter
|
|||
|
|
- **Document table**: rows with doc name, status pill (ok/warn/risk), upload time, chunk count, action CTAs (Inspect/Analyze/Resolve)
|
|||
|
|
- Rows link to document detail view
|
|||
|
|
|
|||
|
|
### 5. Compliance Analysis (`compliance-analysis.html`)
|
|||
|
|
- **Topbar**: title + search + "New analysis" primary btn
|
|||
|
|
- **Hero**: eyebrow + h1 + description + nav buttons
|
|||
|
|
- **Three-column workspace (0.95fr + 1.25fr + 0.9fr)**:
|
|||
|
|
- Col 1 — Retrieved regulations: source items (standard name, helper text, score pills, status pill)
|
|||
|
|
- Col 2 — Document paragraph under review: source text block with `<mark>` highlights + Analysis stages (4 progress bars: Clause retrieval / Requirement extraction / Gap analysis / Recommendation synthesis)
|
|||
|
|
- Col 3 — Findings and conclusion: finding items (title/description/status pill) + conclusion box (recommended replacement text) + action items (Next action / Escalation)
|
|||
|
|
|
|||
|
|
### 6. Regulation Q&A (`regulation-chat.html`)
|
|||
|
|
- **Two-column layout**: main chat area + right citation rail
|
|||
|
|
- **Topbar**: chat title + export btn
|
|||
|
|
- **Chat area**: message bubbles (user right/assistant left), streaming cursor blink, citation superscripts
|
|||
|
|
- **Citation rail**: source doc rows (score/name/clause/snippet)
|
|||
|
|
- **Input area**: textarea + quick-prompt chips + send button (primary)
|
|||
|
|
|
|||
|
|
## Component Patterns
|
|||
|
|
|
|||
|
|
### Status Pills
|
|||
|
|
```
|
|||
|
|
.status.ok → green dot + green bg tint
|
|||
|
|
.status.warn → amber dot + amber bg tint
|
|||
|
|
.status.risk → red dot + red bg tint
|
|||
|
|
.status.info → blue dot + blue bg tint
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Buttons
|
|||
|
|
- Default: border + surface bg, 32px height
|
|||
|
|
- Primary: accent bg, white text
|
|||
|
|
- Small: 28px height
|
|||
|
|
|
|||
|
|
### Cards
|
|||
|
|
- `border-radius: 10px`, `box-shadow: var(--shadow-card)`, `padding: 16px 18px`
|
|||
|
|
|
|||
|
|
### Nav badges
|
|||
|
|
- Accent-tinted pill, monospace font, 10px
|
|||
|
|
|
|||
|
|
## Preserved (No Changes)
|
|||
|
|
- `frontend/src/api/` — all API client files
|
|||
|
|
- `frontend/src/data/` — all mock data files
|
|||
|
|
- `frontend/src/types/` — TypeScript definitions
|
|||
|
|
- `frontend/src/contexts/ThemeContext.tsx` — theme state (adapt to use data-theme on html element)
|
|||
|
|
|
|||
|
|
## Tech Stack
|
|||
|
|
React 19 + TypeScript + Vite + TailwindCSS 4 + React Router 7. Lucide React for icons.
|