AIRegulation/AIRegulation-DocAnalysis
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. Add 登陆功能

Browse Source 
2. 调整字体大小
3. 新增部分功能
This commit is contained in:
wangwei
2026-06-05 18:00:31 +08:00
parent 06e0967128
commit 9fea9c6a53
58 changed files with 5028 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.tsx
View File

@@ -1,11 +1,13 @@
import './styles/globals.css';
import { ThemeProvider } from './contexts';
import { ThemeProvider, AuthProvider } from './contexts';
import { AppRouter } from './router/AppRouter';
function App() {
return (
<ThemeProvider>
<AppRouter />
<AuthProvider>
<AppRouter />
</AuthProvider>
</ThemeProvider>
);
}

43
frontend/src/api/auth.ts Normal file
View File

@@ -0,0 +1,43 @@
const AUTH_API_BASE = '/api/v1';
export interface TokenResponse {
access_token: string;
token_type: string;
expires_in: number;
}
export interface MeResponse {
user_id: string;
username: string;
role: string;
}
export async function loginRequest(
username: string,
password: string,
): Promise<TokenResponse> {
const body = new URLSearchParams();
body.set('username', username);
body.set('password', password);
const res = await fetch(`${AUTH_API_BASE}/auth/token`, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: body.toString(),
});
if (!res.ok) {
const payload = await res.json().catch(() => ({})) as { detail?: string };
throw new Error(payload.detail ?? `Login failed (${res.status})`);
}
return res.json() as Promise<TokenResponse>;
}
export async function getMeRequest(token: string): Promise<MeResponse> {
const res = await fetch(`${AUTH_API_BASE}/auth/me`, {
headers: { Authorization: `Bearer ${token}` },
});
if (!res.ok) throw new Error(`Unauthorised (${res.status})`);
return res.json() as Promise<MeResponse>;
}

29
frontend/src/api/docs.ts
View File

@@ -1,6 +1,12 @@
import type { DocInfo, DocListResponse, DocUploadResponse } from './index';
import { API_BASE_URL } from './index';
const TOKEN_KEY = 'auth_token';
function authHeaders(extra?: Record<string, string>): Record<string, string> {
const token = localStorage.getItem(TOKEN_KEY);
return token ? { Authorization: `Bearer ${token}`, ...extra } : { ...extra };
}
interface BackendDocumentItem {
doc_id: string;
doc_name: string;
@@ -76,6 +82,7 @@ export async function uploadDocument(
const response = await fetch(`${API_BASE_URL}/documents/upload`, {
method: 'POST',
headers: authHeaders(),
body: formData,
});
@@ -95,7 +102,9 @@ export async function uploadDocument(
}
export async function getDocumentList(): Promise<DocListResponse> {
const response = await fetch(`${API_BASE_URL}/documents/management-list`);
const response = await fetch(`${API_BASE_URL}/documents/management-list`, {
headers: authHeaders(),
});
if (!response.ok) {
throw new Error(`List failed: ${response.status}`);
}
@@ -107,7 +116,9 @@ export async function getDocumentList(): Promise<DocListResponse> {
}
export async function getDocumentStatus(docId: string): Promise<DocUploadResponse> {
const response = await fetch(`${API_BASE_URL}/documents/status/${docId}`);
const response = await fetch(`${API_BASE_URL}/documents/status/${docId}`, {
headers: authHeaders(),
});
if (!response.ok) {
throw new Error(`Status check failed: ${response.status}`);
}
@@ -115,14 +126,20 @@ export async function getDocumentStatus(docId: string): Promise<DocUploadRespons
}
export async function deleteDocument(docId: string): Promise<void> {
const response = await fetch(`${API_BASE_URL}/documents/${docId}`, { method: 'DELETE' });
const response = await fetch(`${API_BASE_URL}/documents/${docId}`, {
method: 'DELETE',
headers: authHeaders(),
});
if (!response.ok) {
throw new Error(`Delete failed: ${response.status}`);
}
}
export async function retryDocument(docId: string): Promise<DocUploadResponse> {
const response = await fetch(`${API_BASE_URL}/documents/${docId}/retry`, { method: 'POST' });
const response = await fetch(`${API_BASE_URL}/documents/${docId}/retry`, {
method: 'POST',
headers: authHeaders(),
});
if (!response.ok) {
throw new Error(`Retry failed: ${response.status}`);
}
@@ -132,10 +149,10 @@ export async function retryDocument(docId: string): Promise<DocUploadResponse> {
export async function searchRegulations(query: string, topK: number = 8): Promise<RegulationSearchResponse> {
const response = await fetch(`${API_BASE_URL}/knowledge/retrieval`, {
method: 'POST',
headers: {
headers: authHeaders({
Accept: 'application/json',
'Content-Type': 'application/json',
},
}),
body: JSON.stringify({ query, top_k: topK }),
});

48
frontend/src/api/index.ts
View File

@@ -1,5 +1,12 @@
const API_BASE_URL = '/api/v1';
const TOKEN_KEY = 'auth_token';
/** Read the stored JWT without importing AuthContext (avoids circular deps). */
function getStoredToken(): string | null {
return localStorage.getItem(TOKEN_KEY);
}
interface ApiErrorPayload {
detail?: string;
message?: string;
@@ -19,8 +26,24 @@ async function readErrorMessage(response: Response): Promise<string> {
}
}
/** Inject Authorization header when a token is available. */
function withAuth(headers: Headers): Headers {
const token = getStoredToken();
if (token && !headers.has('Authorization')) {
headers.set('Authorization', `Bearer ${token}`);
}
return headers;
}
/** Handle 401 by clearing the stored token so the app redirects to login. */
function handle401() {
localStorage.removeItem(TOKEN_KEY);
// Emit a custom event so AuthContext / router can react without a direct import.
window.dispatchEvent(new CustomEvent('auth:unauthorized'));
}
export async function fetchAPI<T>(endpoint: string, options?: RequestInit): Promise<T> {
const headers = new Headers(options?.headers);
const headers = withAuth(new Headers(options?.headers));
if (!headers.has('Accept')) {
headers.set('Accept', 'application/json');
}
@@ -33,6 +56,11 @@ export async function fetchAPI<T>(endpoint: string, options?: RequestInit): Prom
headers,
});
if (response.status === 401) {
handle401();
throw new Error('Session expired, please log in again.');
}
if (!response.ok) {
throw new Error(`API Error: ${await readErrorMessage(response)}`);
}
@@ -54,15 +82,25 @@ export async function streamSSE<TMessage extends SSEMessage>(
onError?: (error: Error) => void,
onComplete?: () => void
): Promise<void> {
const headers: Record<string, string> = {
Accept: 'text/event-stream',
'Content-Type': 'application/json',
};
const token = getStoredToken();
if (token) headers['Authorization'] = `Bearer ${token}`;
const response = await fetch(buildUrl(endpoint), {
method: 'POST',
headers: {
Accept: 'text/event-stream',
'Content-Type': 'application/json',
},
headers,
body: JSON.stringify(body),
});
if (response.status === 401) {
handle401();
onError?.(new Error('Session expired, please log in again.'));
return;
}
if (!response.ok) {
onError?.(new Error(`HTTP error! status: ${await readErrorMessage(response)}`));
return;

11
frontend/src/api/perception.ts
View File

@@ -1,4 +1,9 @@
const PERCEPTION_API_BASE = '/api/v1';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
export type ImpactLevel = 'high' | 'medium' | 'low';
export type EventStatus = 'enacted' | 'draft' | 'consultation';
@@ -48,7 +53,7 @@ export interface AnalysisSSEMessage {
}
export async function getPerceptionStats(): Promise<PerceptionStats> {
const res = await fetch(`${PERCEPTION_API_BASE}/perception/stats`);
const res = await fetch(`${PERCEPTION_API_BASE}/perception/stats`, { headers: authHeader() });
if (!res.ok) throw new Error(`stats failed: ${res.status}`);
return res.json() as Promise<PerceptionStats>;
}
@@ -62,7 +67,7 @@ export async function listEvents(params?: {
if (params?.source) query.set('source', params.source);
if (params?.impact_level) query.set('impact_level', params.impact_level);
if (params?.limit) query.set('limit', String(params.limit));
const res = await fetch(`${PERCEPTION_API_BASE}/perception/events?${query.toString()}`);
const res = await fetch(`${PERCEPTION_API_BASE}/perception/events?${query.toString()}`, { headers: authHeader() });
if (!res.ok) throw new Error(`list events failed: ${res.status}`);
return res.json() as Promise<EventListResponse>;
}
@@ -76,7 +81,7 @@ export async function analyzeEvent(
try {
const res = await fetch(`${PERCEPTION_API_BASE}/perception/events/${eventId}/analyze`, {
method: 'POST',
headers: { Accept: 'text/event-stream' },
headers: { Accept: 'text/event-stream', ...authHeader() },
signal,
});
if (!res.ok || !res.body) throw new Error(`analyze failed: ${res.status}`);

3
frontend/src/api/rag.ts
View File

@@ -1,6 +1,8 @@
import type { QuickQuestionsResponse, SSEMessage } from './index';
const AGENT_API_BASE = '/api/v1';
const TOKEN_KEY = 'auth_token';
function getToken(): string | null { return localStorage.getItem(TOKEN_KEY); }
const _FALLBACK_QUESTIONS = [
{ id: '1', question: '请总结最新入库法规对电池安全的核心要求', category: '法规解读' },
@@ -100,6 +102,7 @@ export async function ragChat(
headers: {
'Content-Type': 'application/json',
Accept: 'text/event-stream',
...(getToken() ? { Authorization: `Bearer ${getToken()}` } : {}),
},
body: JSON.stringify({
query,

37
frontend/src/components/layout/Sidebar.tsx
View File

@@ -1,9 +1,10 @@
import { NavLink } from 'react-router-dom';
import {
LayoutDashboard, Radio, Monitor, FileText,
Shield, MessageSquare, Sun, Moon
Shield, MessageSquare, Sun, Moon, LogOut
} from 'lucide-react';
import { useTheme } from '../../contexts/ThemeContext';
import { useAuth } from '../../contexts/AuthContext';
interface NavItem {
to: string;
@@ -49,8 +50,17 @@ function NavGroup({ title, items }: { title: string; items: NavItem[] }) {
);
}
/** Avatar initials from username (up to 2 chars). */
function initials(name: string): string {
const parts = name.trim().split(/[\s_-]+/);
if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
return name.slice(0, 2).toUpperCase();
}
export function Sidebar() {
const { theme, toggleTheme } = useTheme();
const { user, logout } = useAuth();
return (
<aside className="sidebar">
<div className="sidebar-brand">
@@ -69,15 +79,28 @@ export function Sidebar() {
<div className="sidebar-footer">
<div className="sidebar-user">
<div className="user-avatar">TS</div>
<div className="user-avatar">{user ? initials(user.username) : 'TS'}</div>
<div className="user-info">
<div className="user-name">Analyst</div>
<div className="user-role">T-Systems</div>
<div className="user-name">{user?.username ?? 'Analyst'}</div>
<div className="user-role">
{user ? (
<span className="user-badge">{user.role}</span>
) : (
'T-Systems'
)}
</div>
</div>
</div>
<button className="theme-btn" onClick={toggleTheme} title="Toggle theme">
{theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
</button>
<div style={{ display: 'flex', gap: 4 }}>
<button className="theme-btn" onClick={toggleTheme} title="Toggle theme">
{theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
</button>
{user && (
<button className="logout-btn" onClick={logout} title="Sign out">
<LogOut size={14} />
</button>
)}
</div>
</div>
</aside>
);

72
frontend/src/contexts/AuthContext.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { loginRequest, getMeRequest } from '../api/auth';
const TOKEN_KEY = 'auth_token';
export interface AuthUser {
user_id: string;
username: string;
role: string;
}
interface AuthContextValue {
token: string | null;
user: AuthUser | null;
loading: boolean;
login: (username: string, password: string) => Promise<void>;
logout: () => void;
}
const AuthContext = createContext<AuthContextValue>({
token: null,
user: null,
loading: true,
login: async () => {},
logout: () => {},
});
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [token, setToken] = useState<string | null>(() => localStorage.getItem(TOKEN_KEY));
const [user, setUser] = useState<AuthUser | null>(null);
const [loading, setLoading] = useState(true);
// Validate the stored token on mount by calling /auth/me.
useEffect(() => {
if (!token) {
setLoading(false);
return;
}
getMeRequest(token)
.then(setUser)
.catch(() => {
// Token is expired or invalid — force re-login.
localStorage.removeItem(TOKEN_KEY);
setToken(null);
})
.finally(() => setLoading(false));
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const login = useCallback(async (username: string, password: string) => {
const resp = await loginRequest(username, password);
const me = await getMeRequest(resp.access_token);
localStorage.setItem(TOKEN_KEY, resp.access_token);
setToken(resp.access_token);
setUser(me);
}, []);
const logout = useCallback(() => {
localStorage.removeItem(TOKEN_KEY);
setToken(null);
setUser(null);
}, []);
return (
<AuthContext.Provider value={{ token, user, loading, login, logout }}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
return useContext(AuthContext);
}

2
frontend/src/contexts/index.ts
View File

@@ -1 +1,3 @@
export { ThemeProvider, useTheme } from './ThemeContext';
export { AuthProvider, useAuth } from './AuthContext';
export type { AuthUser } from './AuthContext';

8
frontend/src/pages/Compliance/CompliancePage.tsx
View File

@@ -5,6 +5,12 @@ import { NewAnalysisModal } from './NewAnalysisModal';
import { useComplianceAnalysis } from './useComplianceAnalysis';
import type { FindingEvent, SourceEvent, AnalysisMeta } from './useComplianceAnalysis';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
const STATUS_LABEL: Record<string, string> = { ok: 'Covered', warn: 'Gap', risk: 'Critical', info: 'Info' };
const SOURCE_TYPE_LABEL: Record<string, string> = { text: 'Pasted Text', doc: 'Indexed Document', upload: 'Uploaded File' };
@@ -71,7 +77,7 @@ function useFindingChat() {
try {
const res = await fetch(`/api/v1/compliance/chat/${findingIdx ?? 0}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
headers: { 'Content-Type': 'application/json', ...authHeader() },
body: JSON.stringify({ query: q, segment_context: segmentContext }),
signal: ctrl.signal,
});

8
frontend/src/pages/Compliance/NewAnalysisModal.tsx
View File

@@ -1,6 +1,12 @@
import { useState, useRef, useEffect } from 'react';
import { X, Upload, FileText, Database } from 'lucide-react';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
interface DocOption {
id: string;
name: string;
@@ -30,7 +36,7 @@ export function NewAnalysisModal({ onClose, onSubmit }: Props) {
// Fetch indexed docs for "From Document" tab
useEffect(() => {
fetch('/api/v1/documents/management-list')
fetch('/api/v1/documents/management-list', { headers: authHeader() })
.then(r => r.json())
.then(d => {
const list: DocOption[] = (d?.documents ?? d ?? []).map((item: Record<string, unknown>) => ({

7
frontend/src/pages/Compliance/useComplianceAnalysis.ts
View File

@@ -1,5 +1,11 @@
import { useState, useCallback, useRef } from 'react';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
export type AnalysisStatus = 'idle' | 'streaming' | 'done' | 'error';
export interface SourceEvent {
@@ -78,6 +84,7 @@ export function useComplianceAnalysis() {
try {
const res = await fetch('/api/v1/compliance/analyze-stream', {
method: 'POST',
headers: authHeader(),
body: formData,
signal: ctrl.signal,
});

12
frontend/src/pages/Docs/DocsPage.tsx
View File

@@ -3,6 +3,12 @@ import { Topbar } from '../../components/layout/Topbar';
import { Upload, Search, Download, Trash2, RefreshCw, AlertTriangle } from 'lucide-react';
import { UploadModal } from './UploadModal';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
interface Doc {
id: string;
name: string;
@@ -79,7 +85,7 @@ export function DocsPage() {
const fetchDocs = useCallback(() => {
setLoading(true);
fetch('/api/v1/documents/management-list')
fetch('/api/v1/documents/management-list', { headers: authHeader() })
.then(r => r.json())
.then(d => {
if (!Array.isArray(d?.documents)) { setLoading(false); return; }
@@ -132,7 +138,7 @@ export function DocsPage() {
async function retryDoc(id: string) {
setRetrying(r => new Set([...r, id]));
try {
await fetch(`/api/v1/documents/${id}/retry`, { method: 'POST' });
await fetch(`/api/v1/documents/${id}/retry`, { method: 'POST', headers: authHeader() });
setTimeout(() => {
setRetrying(r => { const s = new Set(r); s.delete(id); return s; });
setRefreshKey(k => k + 1);
@@ -155,7 +161,7 @@ export function DocsPage() {
setDeleting(new Set(ids));
await Promise.allSettled(
ids.map(id => fetch(`/api/v1/documents/${id}`, { method: 'DELETE' }))
ids.map(id => fetch(`/api/v1/documents/${id}`, { method: 'DELETE', headers: authHeader() }))
);
setDeleting(new Set());

67
frontend/src/pages/Docs/UploadModal.tsx
View File

@@ -1,6 +1,12 @@
import { useState, useRef, useCallback } from 'react';
import { X, Upload } from 'lucide-react';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
interface Props {
onClose: () => void;
onComplete?: () => void; // called when all uploads finish (indexed)
@@ -44,11 +50,6 @@ function docStatusToStages(status: DocStatus): StageState[] {
}
}
// Generate a short unique ID client-side (matches backend's 8-char uuid prefix pattern)
function genDocId(): string {
return Math.random().toString(36).slice(2, 10);
}
export function UploadModal({ onClose, onComplete }: Props) {
const [files, setFiles] = useState<File[]>([]);
const [regType, setRegType] = useState(REG_TYPES[0]);
@@ -93,13 +94,14 @@ export function UploadModal({ onClose, onComplete }: Props) {
const pollStatus = useCallback((docId: string, resolve: () => void, reject: (msg: string) => void) => {
let attempts = 0;
const MAX_ATTEMPTS = 120; // 4 minutes at 2s interval
const MAX_ATTEMPTS = 450; // 15 minutes at 2s interval — Aliyun DocMind can take several minutes
stopPolling();
pollTimer.current = setInterval(async () => {
attempts++;
try {
const res = await fetch(`/api/v1/documents/status/${docId}`);
const res = await fetch(`/api/v1/documents/status/${docId}`, { headers: authHeader() });
if (!res.ok) {
// Transient HTTP error (e.g. 502 during restart) — keep polling until timeout.
if (attempts > MAX_ATTEMPTS) { stopPolling(); reject('Polling timeout'); }
return;
}
@@ -114,7 +116,7 @@ export function UploadModal({ onClose, onComplete }: Props) {
reject(data.message ?? 'Processing failed');
} else if (attempts > MAX_ATTEMPTS) {
stopPolling();
reject('Processing timeout — check Document Management for status');
reject('Processing timeout (15 min) — check Document Management for status');
}
} catch {
// network hiccup — keep polling
@@ -127,37 +129,42 @@ export function UploadModal({ onClose, onComplete }: Props) {
setCurrentFileIdx(idx);
setDocStatus('idle');
const docId = genDocId();
const form = new FormData();
form.append('file', file);
form.append('doc_id', docId);
form.append('doc_name', file.name);
form.append('regulation_type', regType);
if (version) form.append('version', version);
form.append('generate_summary', 'false');
// Fire upload — this is a long-running synchronous call on the backend.
// We start polling immediately so the UI updates as the backend writes status transitions.
const uploadPromise = fetch('/api/v1/documents/upload', { method: 'POST', body: form });
// Upload the file first — response contains the authoritative doc_id.
// Without waiting here we risk polling an ID the server has not yet created.
let docId: string;
const uploadRes = await fetch('/api/v1/documents/upload', {
method: 'POST',
headers: authHeader(),
body: form,
});
if (!uploadRes.ok) {
const detail = await uploadRes.text().catch(() => uploadRes.statusText);
throw new Error(`${file.name}: ${uploadRes.status} ${detail}`);
}
const uploadData = await uploadRes.json() as { doc_id: string; status: string };
docId = uploadData.doc_id;
// Start polling after a short delay so the backend has time to create the document record
// If backend processed synchronously (sync=true or status already 'indexed'), resolve immediately.
if (uploadData.status === 'indexed') {
setDocStatus('indexed');
return;
}
if (uploadData.status === 'failed') {
setDocStatus('failed');
throw new Error(`${file.name}: Processing failed on server`);
}
// Otherwise start polling the authoritative doc_id returned by the server.
setDocStatus(uploadData.status as DocStatus);
await new Promise<void>((res, rej) => {
const reject = (msg: string) => rej(new Error(msg));
// Begin polling immediately — backend creates the record synchronously before processing
setTimeout(() => pollStatus(docId, res, reject), 800);
// Also handle the upload response (in case processing finishes before poll catches it)
uploadPromise.then(async httpRes => {
if (!httpRes.ok) {
const detail = await httpRes.text().catch(() => httpRes.statusText);
stopPolling();
reject(`${file.name}: ${httpRes.status} ${detail}`);
}
// Upload succeeded — polling will catch the final status
}).catch(err => {
stopPolling();
reject(err instanceof Error ? err.message : 'Upload error');
});
pollStatus(docId, res, (msg: string) => rej(new Error(msg)));
});
}

80
frontend/src/pages/Login/LoginPage.tsx Normal file
View File

@@ -0,0 +1,80 @@
import React, { FormEvent, useState } from 'react';
import { useAuth } from '../../contexts';
export function LoginPage() {
const { login } = useAuth();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
async function handleSubmit(e: FormEvent) {
e.preventDefault();
if (!username.trim() || !password.trim()) return;
setError('');
setLoading(true);
try {
await login(username.trim(), password);
} catch (err) {
setError(err instanceof Error ? err.message : 'Login failed');
} finally {
setLoading(false);
}
}
return (
<div className="login-page">
<div className="login-card">
<div className="login-brand">
<img src="/company-logo.ico" alt="T-Systems" className="login-logo" />
<div className="login-brand-text">
<div className="login-brand-name">T-Systems</div>
<div className="login-brand-sub">AI Regulation Hub</div>
</div>
</div>
<h2 className="login-title">Sign in</h2>
<form onSubmit={handleSubmit} className="login-form">
<div className="login-field">
<label className="login-label" htmlFor="username">Username</label>
<input
id="username"
type="text"
className="login-input"
value={username}
onChange={e => setUsername(e.target.value)}
autoFocus
autoComplete="username"
disabled={loading}
placeholder="e.g. admin"
/>
</div>
<div className="login-field">
<label className="login-label" htmlFor="password">Password</label>
<input
id="password"
type="password"
className="login-input"
value={password}
onChange={e => setPassword(e.target.value)}
autoComplete="current-password"
disabled={loading}
/>
</div>
{error && <p className="login-error">{error}</p>}
<button type="submit" className="login-btn" disabled={loading}>
{loading ? 'Signing in…' : 'Sign in'}
</button>
</form>
<p className="login-hint">
Demo accounts: <code>admin</code> / <code>legal</code> / <code>ehs</code> / <code>readonly</code>
</p>
</div>
</div>
);
}

4
frontend/src/pages/Overview/OverviewPage.tsx
View File

@@ -22,7 +22,8 @@ const STEPS = [
export function OverviewPage() {
const navigate = useNavigate();
return (
<div className="overview-page">
<div className="overview-scroll-wrapper">
<div className="overview-page">
<section className="overview-hero">
<p className="hero-eyebrow">T-Systems · AI Regulation Hub</p>
<h1 className="hero-title">AI Compliance,<br />Automated end-to-end</h1>
@@ -83,5 +84,6 @@ export function OverviewPage() {
</div>
</section>
</div>
</div>
);
}

12
frontend/src/pages/Perception/PerceptionPage.tsx
View File

@@ -2,6 +2,12 @@ import { useState, useEffect, useRef } from 'react';
import { Topbar } from '../../components/layout/Topbar';
import { RefreshCw, Play, Square, ExternalLink } from 'lucide-react';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
interface Signal {
id: string;
source: string;
@@ -101,14 +107,14 @@ export function PerceptionPage() {
const abortRef = useRef<AbortController | null>(null);
useEffect(() => {
fetch('/api/v1/perception/stats')
fetch('/api/v1/perception/stats', { headers: authHeader() })
.then(r => r.json())
.then(setStats)
.catch(() => setStats({ total: 47, high_impact: 7, medium_impact: 18, last_90_days: 14 }));
}, []);
useEffect(() => {
fetch('/api/v1/perception/events?limit=100')
fetch('/api/v1/perception/events?limit=100', { headers: authHeader() })
.then(r => r.json())
.then(d => {
if (Array.isArray(d?.events) && d.events.length > 0) {
@@ -135,7 +141,7 @@ export function PerceptionPage() {
const ctrl = new AbortController();
abortRef.current = ctrl;
// Backend: POST /api/v1/perception/events/{id}/analyze → SSE stream
fetch(`/api/v1/perception/events/${selected.id}/analyze`, { method: 'POST', signal: ctrl.signal })
fetch(`/api/v1/perception/events/${selected.id}/analyze`, { method: 'POST', headers: authHeader(), signal: ctrl.signal })
.then(async res => {
if (!res.body) { setAiOutput('No stream available.'); setStreaming(false); return; }
const reader = res.body.getReader();

10
frontend/src/pages/RagChat/RagChatPage.tsx
View File

@@ -2,6 +2,12 @@ import { useState, useRef, useEffect, useCallback } from 'react';
import { Topbar } from '../../components/layout/Topbar';
import { Send, Download } from 'lucide-react';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
interface Message {
id: string;
role: 'user' | 'assistant';
@@ -87,7 +93,7 @@ export function RagChatPage() {
// Fetch quick questions from backend on mount
useEffect(() => {
fetch('/api/v1/rag/quick-questions')
fetch('/api/v1/rag/quick-questions', { headers: authHeader() })
.then(r => r.json())
.then(d => {
if (Array.isArray(d?.questions) && d.questions.length > 0) {
@@ -136,7 +142,7 @@ export function RagChatPage() {
const res = await fetch('/api/v1/rag/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
headers: { 'Content-Type': 'application/json', ...authHeader() },
body: JSON.stringify(body),
signal: ctrl.signal,
});

12
frontend/src/pages/Status/StatusPage.tsx
View File

@@ -3,6 +3,12 @@ import { Topbar } from '../../components/layout/Topbar';
import { Search, Upload, Download, RefreshCw, CheckCircle, XCircle, AlertTriangle, Info } from 'lucide-react';
import { UploadModal } from '../Docs/UploadModal';
const TOKEN_KEY = 'auth_token';
function authHeader(): Record<string, string> {
const t = localStorage.getItem(TOKEN_KEY);
return t ? { Authorization: `Bearer ${t}` } : {};
}
// ── API types ──────────────────────────────────────────────────────────────
interface Stats {
documents_total: number;
@@ -83,9 +89,9 @@ export function StatusPage() {
// Fetch all three endpoints in parallel
Promise.allSettled([
fetch('/api/v1/status/stats').then(r => r.json()),
fetch('/api/v1/status/health').then(r => r.json()),
fetch('/api/v1/status/config').then(r => r.json()),
fetch('/api/v1/status/stats', { headers: authHeader() }).then(r => r.json()),
fetch('/api/v1/status/health', { headers: authHeader() }).then(r => r.json()),
fetch('/api/v1/status/config', { headers: authHeader() }).then(r => r.json()),
]).then(([statsRes, healthRes, configRes]) => {
if (statsRes.status === 'fulfilled') setStats(statsRes.value);
else setStats({ documents_total: 0, documents_indexed: 0, documents_failed: 0, chunks_total: 0 });

46
frontend/src/router/AppRouter.tsx
View File

@@ -1,5 +1,8 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useEffect } from 'react';
import { BrowserRouter, Navigate, Routes, Route } from 'react-router-dom';
import { useAuth } from '../contexts';
import { AppShell } from '../components/layout/AppShell';
import { LoginPage } from '../pages/Login/LoginPage';
import { OverviewPage } from '../pages/Overview/OverviewPage';
import { StatusPage } from '../pages/Status/StatusPage';
import { PerceptionPage } from '../pages/Perception/PerceptionPage';
@@ -7,11 +10,47 @@ import { DocsPage } from '../pages/Docs/DocsPage';
import { CompliancePage } from '../pages/Compliance/CompliancePage';
import { RagChatPage } from '../pages/RagChat/RagChatPage';
/** Redirect to /login when not authenticated. */
function RequireAuth({ children }: { children: React.ReactNode }) {
const { token, loading } = useAuth();
if (loading) return null; // wait for localStorage token validation
if (!token) return <Navigate to="/login" replace />;
return <>{children}</>;
}
/** Redirect to / when already authenticated. */
function GuestOnly({ children }: { children: React.ReactNode }) {
const { token, loading } = useAuth();
if (loading) return null;
if (token) return <Navigate to="/" replace />;
return <>{children}</>;
}
export function AppRouter() {
const { logout } = useAuth();
// Listen for global 401 events emitted by the API layer.
useEffect(() => {
function onUnauthorized() { logout(); }
window.addEventListener('auth:unauthorized', onUnauthorized);
return () => window.removeEventListener('auth:unauthorized', onUnauthorized);
}, [logout]);
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<AppShell />}>
{/* Public route */}
<Route path="/login" element={<GuestOnly><LoginPage /></GuestOnly>} />
{/* Protected routes */}
<Route
path="/"
element={
<RequireAuth>
<AppShell />
</RequireAuth>
}
>
<Route index element={<OverviewPage />} />
<Route path="status" element={<StatusPage />} />
<Route path="signals" element={<PerceptionPage />} />
@@ -19,6 +58,9 @@ export function AppRouter() {
<Route path="compliance" element={<CompliancePage />} />
<Route path="chat" element={<RagChatPage />} />
</Route>
{/* Catch-all */}
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</BrowserRouter>
);

298
frontend/src/styles/globals.css
View File

@@ -150,10 +150,10 @@ body {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
height: 34px;
padding: 0 14px;
border-radius: var(--radius-sm);
font-size: 13px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
@@ -170,7 +170,7 @@ body {
border-color: var(--accent);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.sm { height: 28px; font-size: 12px; padding: 0 10px; }
.btn.sm { height: 30px; font-size: 13px; padding: 0 11px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── App Shell ──────────────────────────────────── */
@@ -216,14 +216,14 @@ body {
object-fit: contain;
flex-shrink: 0;
}
.brand-name { font-size: 13px; font-weight: 700; font-family: var(--font-display); color: var(--rail-fg); }
.brand-sub { font-size: 10px; color: var(--rail-muted); }
.brand-name { font-size: 15px; font-weight: 700; font-family: var(--font-display); color: var(--rail-fg); }
.brand-sub { font-size: 12px; color: var(--rail-muted); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-group { margin-bottom: 4px; }
.nav-group-label {
font-size: 10px; font-weight: 700;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--rail-muted);
padding: 8px 16px 4px;
@@ -231,10 +231,10 @@ body {
.nav-item {
display: flex; align-items: center; gap: 9px;
height: 36px; padding: 0 14px 0 16px;
height: 38px; padding: 0 14px 0 16px;
text-decoration: none;
color: var(--rail-fg);
font-size: 13px;
font-size: 14px;
border-left: 3px solid transparent;
transition: background 0.12s, color 0.12s;
position: relative;
@@ -261,14 +261,14 @@ body {
}
.sidebar-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.user-avatar {
width: 28px; height: 28px;
width: 30px; height: 30px;
background: var(--accent-dim); color: var(--accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; flex-shrink: 0;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.user-name { font-size: 12px; font-weight: 600; color: var(--rail-fg); }
.user-role { font-size: 10px; color: var(--rail-muted); }
.user-name { font-size: 13px; font-weight: 600; color: var(--rail-fg); }
.user-role { font-size: 11px; color: var(--rail-muted); }
.theme-btn {
width: 28px; height: 28px;
@@ -297,8 +297,8 @@ body {
z-index: 10;
}
.topbar-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.topbar-title { font-size: 15px; font-weight: 700; font-family: var(--font-display); color: var(--fg); }
.topbar-sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.topbar-title { font-size: 17px; font-weight: 700; font-family: var(--font-display); color: var(--fg); }
.topbar-sub { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
/* ── Page Content ───────────────────────────────── */
@@ -309,13 +309,13 @@ body {
}
/* ── Search Box ─────────────────────────────────── */
.search-box { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; color: var(--muted); }
.search-box input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--fg); width: 160px; }
.search-box { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 14px; color: var(--muted); }
.search-box input { border: none; background: transparent; outline: none; font-size: 14px; color: var(--fg); width: 160px; }
/* ── Filter Bar / Chips ─────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 26px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; font-size: 11px; font-weight: 500; cursor: pointer; color: var(--muted); transition: all 0.12s; }
.chip { height: 28px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--muted); transition: all 0.12s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.filter-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
@@ -327,34 +327,47 @@ body {
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ── Overview Page ──────────────────────────────── */
.overview-page { padding: 32px; max-width: 900px; display: flex; flex-direction: column; gap: 32px; }
/* Outer container fills content-area and handles scrolling. */
/* Inner .overview-page constrains width and holds the page content. */
.overview-scroll-wrapper {
flex: 1;
overflow-y: auto;
height: 100%;
}
.overview-page {
padding: 32px;
max-width: 960px;
display: flex;
flex-direction: column;
gap: 32px;
}
.overview-hero { display: flex; flex-direction: column; gap: 12px; }
.hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.hero-title { font-size: 32px; font-weight: 700; font-family: var(--font-display); line-height: 1.15; }
.hero-desc { font-size: 14px; color: var(--muted); max-width: 480px; line-height: 1.6; }
.hero-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.hero-title { font-size: 34px; font-weight: 700; font-family: var(--font-display); line-height: 1.15; }
.hero-desc { font-size: 15px; color: var(--muted); max-width: 520px; line-height: 1.6; }
.hero-actions { display: flex; gap: 10px; padding-top: 4px; }
.overview-summary { display: flex; align-items: center; gap: 0; }
.summary-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; padding: 14px; }
.summary-num { font-size: 22px; font-weight: 700; font-family: var(--font-display); color: var(--accent); }
.summary-label { font-size: 11px; color: var(--muted); }
.summary-num { font-size: 24px; font-weight: 700; font-family: var(--font-display); color: var(--accent); }
.summary-label { font-size: 12px; color: var(--muted); }
.summary-divider { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; }
.section-title { font-size: 13px; font-weight: 700; font-family: var(--font-display); color: var(--fg); margin-bottom: 14px; }
.section-title { font-size: 14px; font-weight: 700; font-family: var(--font-display); color: var(--fg); margin-bottom: 14px; }
.workflow-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.workflow-step { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.step-num { font-size: 10px; font-weight: 700; font-family: var(--font-mono); color: var(--accent); }
.step-label { font-size: 13px; font-weight: 700; font-family: var(--font-display); }
.step-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.step-num { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--accent); }
.step-label { font-size: 14px; font-weight: 700; font-family: var(--font-display); }
.step-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.screen-card { text-align: left; cursor: pointer; border: none; transition: box-shadow 0.15s; display: flex; flex-direction: column; gap: 6px; }
.screen-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 0 0 2px var(--accent-dim); }
.screen-icon { width: 36px; height: 36px; background: var(--accent-dim); color: var(--accent); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.screen-label { font-size: 13px; font-weight: 700; font-family: var(--font-display); }
.screen-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.screen-label { font-size: 14px; font-weight: 700; font-family: var(--font-display); }
.screen-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
/* ── Status Page ────────────────────────────────── */
.status-page { display: flex; flex-direction: column; height: 100%; }
@@ -375,18 +388,18 @@ body {
display: flex; flex-direction: column; gap: 4px;
}
.stat-cell:last-child { border-right: none; }
.stat-value { font-size: 26px; font-weight: 700; font-family: var(--font-display); }
.stat-label { font-size: 11px; color: var(--muted); }
.stat-value { font-size: 28px; font-weight: 700; font-family: var(--font-display); }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-cell.danger .stat-value { color: var(--danger); }
.panel-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 16px; }
.panel-left, .panel-right { display: flex; flex-direction: column; gap: 16px; }
.card-header { font-size: 12px; font-weight: 700; font-family: var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.card-header { font-size: 13px; font-weight: 700; font-family: var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.task-info { flex: 1; min-width: 0; }
.task-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.task-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.task-progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.task-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; }
@@ -401,12 +414,12 @@ body {
.kpi-value { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--fg); width: 36px; text-align: right; flex-shrink: 0; }
.service-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); }
.service-name { font-size: 13px; }
.service-name { font-size: 14px; }
.event-row { padding: 10px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.event-date { font-size: 10px; font-family: var(--font-mono); color: var(--muted); }
.event-title { font-size: 13px; font-weight: 600; }
.event-summary { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-date { font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
.event-title { font-size: 14px; font-weight: 600; }
.event-summary { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ── Perception Page ────────────────────────────── */
.perception-page { display: flex; flex-direction: column; height: 100%; }
@@ -414,8 +427,8 @@ body {
.stats-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.sbar-cell { flex: 1; padding: 14px 22px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.sbar-cell:last-child { border-right: none; }
.sbar-val { font-size: 22px; font-weight: 700; font-family: var(--font-display); }
.sbar-lbl { font-size: 11px; color: var(--muted); }
.sbar-val { font-size: 24px; font-weight: 700; font-family: var(--font-display); }
.sbar-lbl { font-size: 12px; color: var(--muted); }
.sbar-cell.danger .sbar-val { color: var(--danger); }
.sbar-cell.warn .sbar-val { color: var(--warn); }
.sbar-cell.accent .sbar-val { color: var(--accent); }
@@ -427,14 +440,14 @@ body {
.ev-card:hover { background: var(--bg); }
.ev-card.selected { border-left-color: var(--accent); background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-dim); }
.ev-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.ev-std { font-size: 10px; font-family: var(--font-mono); color: var(--muted); }
.ev-title { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; }
.ev-summary { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.ev-std { font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
.ev-title { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; }
.ev-summary { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.ev-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-date { font-size: 10px; font-family: var(--font-mono); color: var(--muted); }
.ev-date { font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
.ev-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.ev-tag { font-size: 10px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); }
.impact-dot { font-size: 10px; font-weight: 700; margin-left: auto; }
.ev-tag { font-size: 11px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); }
.impact-dot { font-size: 11px; font-weight: 700; margin-left: auto; }
.impact-high { color: var(--danger); }
.impact-medium { color: var(--warn); }
.impact-low { color: var(--success); }
@@ -447,18 +460,18 @@ body {
.detail-card { display: flex; flex-direction: column; gap: 10px; }
.detail-header { display: flex; align-items: center; gap: 8px; }
.detail-title { font-size: 15px; font-weight: 700; font-family: var(--font-display); }
.detail-summary { font-size: 13px; color: var(--muted); line-height: 1.6; }
.detail-title { font-size: 16px; font-weight: 700; font-family: var(--font-display); }
.detail-summary { font-size: 14px; color: var(--muted); line-height: 1.6; }
.detail-actions { display: flex; gap: 8px; padding-top: 4px; }
.docs-card { display: flex; flex-direction: column; gap: 0; }
.doc-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.doc-score { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--success); width: 34px; flex-shrink: 0; padding-top: 1px; }
.doc-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.doc-clause { font-size: 10px; font-family: var(--font-mono); color: var(--muted); margin-left: 5px; }
.doc-snippet { font-size: 11px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.doc-clause { font-size: 11px; font-family: var(--font-mono); color: var(--muted); margin-left: 5px; }
.doc-snippet { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-card .ai-output { font-size: 13px; line-height: 1.7; white-space: pre-wrap; font-family: var(--font-mono); }
.ai-card .ai-output { font-size: 14px; line-height: 1.7; white-space: pre-wrap; font-family: var(--font-mono); }
.blink-cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@@ -466,7 +479,7 @@ body {
.docs-page { display: flex; flex-direction: column; height: 100%; }
.docs-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.select-input { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; color: var(--fg); outline: none; cursor: pointer; }
.select-input { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; color: var(--fg); outline: none; cursor: pointer; }
.batch-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; color: var(--accent); font-weight: 600; }
.risk-btn { color: var(--danger); border-color: var(--danger-bg); }
@@ -479,7 +492,7 @@ body {
padding: 10px 14px;
background: var(--bg);
border-bottom: 1px solid var(--border);
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
align-items: center;
}
.table-row {
@@ -488,7 +501,7 @@ body {
gap: 12px;
padding: 11px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-size: 14px;
align-items: center;
transition: background 0.1s, opacity 0.3s;
}
@@ -497,10 +510,10 @@ body {
.table-row.row-selected { background: var(--accent-dim); }
.table-row.row-deleting { opacity: 0.4; pointer-events: none; }
.doc-name-cell { font-weight: 500; }
.cell-mono { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cell-muted { font-size: 12px; color: var(--muted); }
.cell-mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cell-muted { font-size: 13px; color: var(--muted); }
.row-actions { display: flex; gap: 10px; }
.text-link { background: none; border: none; font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 500; padding: 0; }
.text-link { background: none; border: none; font-size: 13px; color: var(--accent); cursor: pointer; font-weight: 500; padding: 0; }
.text-link:hover { text-decoration: underline; }
.danger-link { color: var(--danger); }
@@ -514,24 +527,24 @@ body {
.compliance-workspace { display: grid; grid-template-columns: 0.95fr 1.25fr 0.9fr; gap: 14px; padding: 16px 24px 24px; flex: 1; overflow: hidden; min-height: 0; }
.comp-col { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.col-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0 2px 4px; flex-shrink: 0; }
.col-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0 2px 4px; flex-shrink: 0; }
.source-item { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.source-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.source-std { font-size: 13px; font-weight: 700; font-family: var(--font-display); }
.source-helper { font-size: 11px; color: var(--muted); }
.source-std { font-size: 14px; font-weight: 700; font-family: var(--font-display); }
.source-helper { font-size: 12px; color: var(--muted); }
.source-scores { display: flex; gap: 5px; flex-wrap: wrap; }
.score-pill { font-size: 10px; font-family: var(--font-mono); padding: 2px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); }
.score-pill { font-size: 11px; font-family: var(--font-mono); padding: 2px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); }
.para-card { flex-shrink: 0; }
.para-text { font-size: 13px; line-height: 1.7; color: var(--fg); }
.para-text { font-size: 14px; line-height: 1.7; color: var(--fg); }
.para-text mark { background: rgba(226,0,116,.15); color: var(--accent); padding: 0 2px; border-radius: 2px; }
.stages-card { flex-shrink: 0; }
.stage-row { padding: 8px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.stage-label-row { display: flex; justify-content: space-between; align-items: center; }
.stage-label { font-size: 12px; }
.stage-pct { font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
.stage-label { font-size: 13px; }
.stage-pct { font-size: 12px; font-family: var(--font-mono); color: var(--muted); }
.stage-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.stage-fill { height: 100%; border-radius: 2px; }
.stage-fill.stage-ok { background: var(--success); }
@@ -540,13 +553,13 @@ body {
.finding-item { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.finding-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.finding-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.finding-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.finding-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.finding-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.conclusion-box { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.conclusion-text { font-size: 12px; line-height: 1.6; color: var(--fg); }
.conclusion-text { font-size: 13px; line-height: 1.6; color: var(--fg); }
.action-items { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.action-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.action-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.action-label { color: var(--muted); }
.action-value { font-weight: 600; }
.risk-text { color: var(--danger); }
@@ -559,9 +572,9 @@ body {
.history-header, .quick-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 10px 16px 6px; }
.history-item { padding: 8px 16px; cursor: pointer; border-radius: 0; transition: background 0.1s; }
.history-item:hover { background: var(--bg); }
.history-title { font-size: 12px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.history-date { font-size: 10px; font-family: var(--font-mono); color: var(--muted); margin-top: 2px; }
.quick-item { background: none; border: none; text-align: left; padding: 8px 16px; font-size: 12px; color: var(--muted); cursor: pointer; line-height: 1.4; transition: color 0.1s, background 0.1s; }
.history-title { font-size: 13px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.history-date { font-size: 11px; font-family: var(--font-mono); color: var(--muted); margin-top: 2px; }
.quick-item { background: none; border: none; text-align: left; padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; line-height: 1.4; transition: color 0.1s, background 0.1s; }
.quick-item:hover { color: var(--accent); background: var(--accent-dim); }
.chat-main { display: flex; flex-direction: column; overflow: hidden; }
@@ -570,14 +583,14 @@ body {
.msg-user { flex-direction: row-reverse; }
.msg-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; background: var(--accent-dim); color: var(--accent); }
.msg-avatar.user-av { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.msg-bubble { max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; }
.msg-bubble { max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
.msg-assistant .msg-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-user .msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.composer { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.quick-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; font-family: var(--font-body); color: var(--fg); resize: none; outline: none; line-height: 1.5; }
.composer-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 14px; font-family: var(--font-body); color: var(--fg); resize: none; outline: none; line-height: 1.5; }
.composer-input:focus { border-color: var(--accent); }
.citation-rail { border-left: 1px solid var(--border); overflow-y: auto; padding: 14px 0; background: var(--surface); }
@@ -586,9 +599,9 @@ body {
.citation-item.highlighted { background: var(--accent-dim); border-left: 3px solid var(--accent); }
.cit-score { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--success); width: 34px; flex-shrink: 0; padding-top: 1px; }
.cit-index { font-size: 10px; font-weight: 700; font-family: var(--font-mono); color: var(--muted); width: 18px; flex-shrink: 0; padding-top: 2px; }
.cit-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.cit-clause { font-size: 10px; font-family: var(--font-mono); color: var(--muted); margin-left: 5px; }
.cit-snippet { font-size: 11px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.cit-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.cit-clause { font-size: 11px; font-family: var(--font-mono); color: var(--muted); margin-left: 5px; }
.cit-snippet { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
/* Inline citation badge [N] in message text */
.cite-ref {
@@ -792,7 +805,7 @@ body {
}
.modal-tab {
padding: 10px 18px;
font-size: 13px;
font-size: 14px;
font-weight: 500;
border: none;
background: none;
@@ -816,7 +829,7 @@ body {
.domain-chip {
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border);
background: var(--surface);
@@ -867,8 +880,8 @@ body {
background: var(--accent);
border-color: var(--accent);
}
.doc-select-name { font-size: 13px; font-weight: 500; flex: 1; }
.doc-select-meta { font-size: 11px; color: var(--muted); }
.doc-select-name { font-size: 14px; font-weight: 500; flex: 1; }
.doc-select-meta { font-size: 12px; color: var(--muted); }
/* Stage running animation */
@keyframes stage-pulse {
@@ -945,8 +958,8 @@ body {
color: var(--accent);
opacity: 0.7;
}
.analysis-empty h3 { font-size: 15px; font-weight: 600; color: var(--fg); margin: 0; }
.analysis-empty p { font-size: 13px; max-width: 280px; line-height: 1.6; margin: 0; }
.analysis-empty h3 { font-size: 16px; font-weight: 600; color: var(--fg); margin: 0; }
.analysis-empty p { font-size: 14px; max-width: 280px; line-height: 1.6; margin: 0; }
/* Highlight terms in paragraph */
mark.comp-highlight {
@@ -976,3 +989,122 @@ mark.comp-highlight {
background: linear-gradient(to right, #22c55e 0%, #eab308 50%, #ef4444 100%);
transition: width 0.6s ease;
}
/* ── Login Page ─────────────────────────────────── */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
}
.login-card {
width: 100%;
max-width: 380px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: 36px 32px 28px;
}
.login-brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
}
.login-logo { width: 32px; height: 32px; object-fit: contain; }
.login-brand-name { font-size: 14px; font-weight: 700; font-family: var(--font-display); color: var(--fg); }
.login-brand-sub { font-size: 11px; color: var(--muted); }
.login-title {
font-size: 20px;
font-weight: 700;
font-family: var(--font-display);
margin-bottom: 20px;
color: var(--fg);
}
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 5px; }
.login-label { font-size: 12px; font-weight: 600; color: var(--fg); }
.login-input {
height: 38px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--fg);
font-size: 13px;
outline: none;
transition: border-color 0.15s;
}
.login-input:focus { border-color: var(--accent); }
.login-input:disabled { opacity: 0.6; }
.login-error {
font-size: 12px;
color: var(--danger);
background: var(--danger-bg);
border: 1px solid rgba(220,38,38,.2);
border-radius: var(--radius-sm);
padding: 8px 12px;
margin: 0;
}
.login-btn {
height: 40px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.login-btn:hover:not(:disabled) { background: var(--accent-hover); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-hint {
margin-top: 16px;
font-size: 11px;
color: var(--muted);
text-align: center;
}
.login-hint code {
font-family: var(--font-mono);
background: var(--bg);
padding: 1px 4px;
border-radius: 3px;
border: 1px solid var(--border);
}
/* ── Sidebar user block (authenticated) ─────────── */
.user-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 3px;
background: var(--accent-dim);
color: var(--accent);
letter-spacing: 0.04em;
}
.logout-btn {
background: none;
border: none;
cursor: pointer;
color: var(--muted);
padding: 4px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
transition: color 0.15s;
}
.logout-btn:hover { color: var(--danger); }