{t.overview.eyebrow}

{t.overview.heroTitle.split('\n').map((line, i) => ( {line}{i === 0 &&
} ))}

{t.overview.heroDesc}

6 {t.overview.statScreens}

5 {t.overview.statFlows}

AI {t.overview.statReviewPosture}

{t.overview.sectionHowItWorks}

{STEPS.map(s => (

{s.num}

{s.label}

{s.desc}

))}

{t.overview.sectionScreens}

{SCREENS.map(s => ( ))}

); } ``` - [ ] **Step 2: Verify TypeScript** ```bash cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20 ``` Expected: 0 errors. --- ## Task 5: Translate `StatusPage.tsx` **Files:** - Modify: `frontend/src/pages/Status/StatusPage.tsx` - [ ] **Step 1: Add `useLanguage` import and hook call** At the top of the file, add the import: ```tsx import { useLanguage } from '../../contexts/LanguageContext'; ``` Inside `StatusPage()` function, add at the top: ```tsx const { t } = useLanguage(); ``` - [ ] **Step 2: Replace hardcoded strings — `Topbar` actions** Find: ```tsx

} /> ``` Replace with: ```tsx

} /> ``` - [ ] **Step 3: Replace stat labels** Find: ```tsx

Documents total

``` Replace: `

{t.status.statTotal}

` Find: `

Indexed

` (first occurrence in stats grid) Replace: `

{t.status.statIndexed}

` Find: `

Failed

` (in stats grid) Replace: `

{t.status.statFailed}

` Find: `

Vector chunks

` Replace: `

{t.status.statChunks}

` Find: `Index coverage` Replace: `{t.status.statCoverage}` - [ ] **Step 4: Replace `ServiceRow` status strings** The `ServiceRow` component renders `'Online'`, `'Error'`, `'Degraded'`, `'Unknown'` from a ternary. Replace the inline string map in the `ServiceRow` ``: Find inside `ServiceRow`: ```tsx {status === 'ok' ? 'Online' : status === 'error' ? 'Error' : status === 'warn' ? 'Degraded' : 'Unknown'} ``` This requires `t` inside `ServiceRow`. Convert `ServiceRow` to accept a `t` prop, **or** (simpler) pass the label string externally. The simpler approach: add a `label` prop with a default: Replace `ServiceRow` component definition: ```tsx function ServiceRow({ name, status, detail }: { name: string; status: 'ok' | 'error' | 'warn' | 'info'; detail?: string }) { const { t } = useLanguage(); return (

{name} {detail && {detail}} {status === 'ok' ? t.status.badgeOnline : status === 'error' ? t.status.badgeError : status === 'warn' ? t.status.badgeDegraded : t.status.badgeUnknown}

); } ``` - [ ] **Step 5: Replace card headers, service names, and config labels** Find: `System health` Replace: `{t.status.cardHealth}` Find: `Could not reach health endpoint` Replace: `{t.status.healthEndpointError}` Find (in `ServiceRow` calls): ```tsx detail={health.bm25.available ? undefined : 'Not loaded'} ``` Replace: ```tsx detail={health.bm25.available ? undefined : t.status.serviceNotLoaded} ``` Find: ```tsx detail={health.reranker.enabled ? 'Enabled' : 'Disabled'} ``` Replace: ```tsx detail={health.reranker.enabled ? t.status.serviceEnabled : t.status.serviceDisabled} ``` Find: `

System configuration

` Replace: `

{t.status.cardConfig}

` Replace each `ConfigRow label=` string: - `"LLM provider"` → `{t.status.labelLLMProvider}` - `"LLM model"` → `{t.status.labelLLMModel}` - `"Embedding model"` → `{t.status.labelEmbeddingModel}` - `"Embedding dim"` → `{t.status.labelEmbeddingDim}` - `"Milvus collection"` → `{t.status.labelMilvusCollection}` - `"Parser backend"` → `{t.status.labelParserBackend}` - `"Chunk backend"` → `{t.status.labelChunkBackend}` - `"Parser failure mode"` → `{t.status.labelParserFailureMode}` Find: `

Could not load config

` Replace: `

{t.status.configLoadError}

` Find: `

Document breakdown

` Replace: `

{t.status.cardBreakdown}

` Find breakdown row labels array `'Indexed'`, `'Processing / Parsed'`, `'Failed'`: ```tsx { label: 'Indexed', ...}, { label: 'Processing / Parsed', ...}, { label: 'Failed', ...}, ``` Replace: ```tsx { label: t.status.breakdownIndexed, ...}, { label: t.status.breakdownProcessing, ...}, { label: t.status.breakdownFailed, ...}, ``` Find: `Total vector chunks` Replace: `{t.status.totalChunks}` Find: `

Runtime info

` Replace: `

{t.status.cardRuntime}

` Replace the runtime info row labels: - `'Active chat sessions'` → `{t.status.labelActiveSessions}` - `'Session capacity'` → `{t.status.labelSessionCapacity}` - `'Cross-encoder reranker'` → `{t.status.labelReranker}` - `'BM25 hybrid retrieval'` → `{t.status.labelBM25}` Replace runtime status values: - `'Active'` (BM25 true) → `{t.status.statusActive}` - `'Unavailable'` → `{t.status.statusUnavailable}` Find footer: ```tsx Regulation Hub · T-Systems AI · {health ? (health.milvus.status === 'ok' && health.minio.connected ? 'All systems operational' : 'Degraded') : 'Checking…'} ``` Replace: ```tsx Regulation Hub · T-Systems AI · {health ? (health.milvus.status === 'ok' && health.minio.connected ? t.status.footerAllOk : t.status.footerDegraded) : t.status.footerChecking} ``` - [ ] **Step 6: Verify TypeScript** ```bash cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20 ``` Expected: 0 errors. --- ## Task 6: Translate `PerceptionPage.tsx` **Files:** - Modify: `frontend/src/pages/Perception/PerceptionPage.tsx` - [ ] **Step 1: Add `useLanguage` import and hook** Add import: ```tsx import { useLanguage } from '../../contexts/LanguageContext'; ``` Add at the top of `PerceptionPage()`: ```tsx const { t } = useLanguage(); ``` - [ ] **Step 2: Replace `Topbar` props** Find: ```tsx

Select a signal to run impact analysis

` Replace: `

{t.signals.emptySelectSignal}

` Find: `` Replace: `` Find: `` Replace: `` Find: `Source` Replace: `{t.signals.sourceLink}` - [ ] **Step 7: Replace tab labels** Find: ```tsx {tab === 'overview' ? '概览' : tab === 'obligations' ? '义务条款' : tab === 'assessment' ? '影响评估' : '变更对比'} ``` Replace: ```tsx {tab === 'overview' ? t.signals.tabOverview : tab === 'obligations' ? t.signals.tabObligations : tab === 'assessment' ? t.signals.tabImpact : t.signals.tabChanges} ``` - [ ] **Step 8: Replace card headers and table headers** Find: `

Scope & Summary

` Replace: `

{t.signals.cardScopeHeader}

` Find: `

义务条款

` Replace: `

{t.signals.cardObligationsHeader}

` Find: `

暂无结构化数据。点击右上角"Run impact analysis"触发提取。

` Replace: `

{t.signals.obligationsEmpty}

` Find: `义务描述` Replace: `{t.signals.colObligationDesc}` Find: `主体` Replace: `{t.signals.colSubject}` Find: `类型` Replace: `{t.signals.colType}` Find: `

截止日期

` Replace: `

{t.signals.colDeadline}

` Find: `{d.date || '待定'}` Replace: `{d.date || t.signals.deadlinePending}` Find: `

Affected documents

` Replace: `

{t.signals.cardAffectedDocs}

` Find: `

No affected documents found.

` Replace: `

{t.signals.noAffectedDocs}

` Find: `

AI Impact Analysis

` Replace: `

{t.signals.cardAIImpact}

` - [ ] **Step 9: Replace diff tab headers** Find: `

变更对比

` Replace: `

{t.signals.diffCardHeader}

` Find: `

旧版

` Replace: `

{t.signals.diffOld}

` Find: `

新版

` Replace: `

{t.signals.diffNew}

` - [ ] **Step 10: Replace crawl status strings in `runCrawl()`** Find: `crawlStatus: '正在连接数据源...'` Replace: `crawlStatus: t.signals.statusConnecting` Find: ```tsx crawlStatus: `${d.source}: ${d.stage === 'fetching' ? '抓取中...' : d.stage === 'processing' ? `处理 ${d.fetched} 条...` : `完成 +${d.new} 条`}`, ``` Replace: ```tsx crawlStatus: `${d.source}: ${d.stage === 'fetching' ? t.signals.statusCrawling : d.stage === 'processing' ? t.signals.statusProcessing.replace('{count}', String(d.fetched)) : t.signals.statusComplete.replace('{count}', String(d.new))}`, ``` Find: `` crawlStatus: `更新完成 — 新增 ${d.total_new} 条，更新 ${d.total_updated} 条` `` Replace: ```tsx crawlStatus: t.signals.statusUpdateComplete.replace('{new}', String(d.total_new)).replace('{updated}', String(d.total_updated)) ``` Find: `` crawlStatus: `错误: ${typeof d === 'string' ? d : d.message}` `` Replace: ```tsx crawlStatus: t.signals.statusError.replace('{message}', typeof d === 'string' ? d : String(d.message)) ``` Find: `` crawlStatus: `连接失败: ${e instanceof Error ? e.message : String(e)}` `` Replace: ```tsx crawlStatus: t.signals.statusConnFailed.replace('{message}', e instanceof Error ? e.message : String(e)) ``` - [ ] **Step 11: Replace footer** Find: `Live feed · Regulation Hub` Replace: `{t.signals.footerText}` - [ ] **Step 12: Verify TypeScript** ```bash cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20 ``` Expected: 0 errors. --- ## Task 7: Translate `DocsPage.tsx` **Files:** - Modify: `frontend/src/pages/Docs/DocsPage.tsx` - [ ] **Step 1: Add `useLanguage` import** ```tsx import { useLanguage } from '../../contexts/LanguageContext'; ``` - [ ] **Step 2: Add hook in `ConfirmDialog` and `DocsPage`** `ConfirmDialog` uses `'Confirm deletion'`, `'Cancel'`, `'Delete'`. Convert it to accept a `t` prop **or** call `useLanguage()` inside it. Use `useLanguage()` directly inside (same pattern as `ServiceRow`): ```tsx function ConfirmDialog({ message, onConfirm, onCancel }: { message: string; onConfirm: () => void; onCancel: () => void; }) { const { t } = useLanguage(); return (

e.stopPropagation()} >

{t.docs.confirmDeleteTitle}

{message}

); } ``` Add `const { t } = useLanguage();` at top of `DocsPage()`. - [ ] **Step 3: Replace `STATUS_FILTERS` array and topbar** The `STATUS_FILTERS` array is used in chip rendering and filter logic. The filter logic uses the English strings as keys (through `STATUS_MAP`). Keep the filter keys as English internally, only translate the displayed chip label. Update the chip rendering: ```tsx {STATUS_FILTERS.map(f => ( ))} ``` Replace the `'All types'` dropdown option display (keep value as English for filter logic): ```tsx ``` Replace `Topbar`: ```tsx

setSearch(e.target.value)} />

} /> ``` - [ ] **Step 4: Replace batch bar and table headers** Find: `{selected.size} document{selected.size > 1 ? 's' : ''} selected` This string has pluralisation logic. Keep it simple — just use the count: ```tsx {selected.size} {t.docs.filterAll === 'All' ? 'document(s)' : '份文档'} selected ``` Actually, simpler — since the text is "X documents selected", we can just do: ```tsx {selected.size} {selected.size > 1 ? (t.docs.colName === 'Document name' ? 'documents' : '份文档') : (t.docs.colName === 'Document name' ? 'document' : '份文档')} selected ``` Cleanest approach — add a helper: Find the batch bar span and replace with: ```tsx {selected.size}{' '} {t.docs.colName === 'Document name' ? `document${selected.size > 1 ? 's' : ''} selected` : `份文档已选择`} ``` Find: `Delete selected` Replace: `{t.docs.deleteSelected}` Replace table header spans: ```tsx {t.docs.colName} {t.docs.colStatus} {t.docs.colUploaded} {t.docs.colChunks} {t.docs.colSize} {t.docs.colType} {t.docs.colActions} ``` Find: `Loading documents…` Replace: `{t.docs.loading}` Find: `docs.length === 0 ? 'No documents yet. Upload a document to get started.' : 'No documents match the current filters.'` Replace: `docs.length === 0 ? t.docs.emptyNoDocuments : t.docs.emptyNoMatch` Replace `title` attributes on action buttons: - `"Download original file"` → `{t.docs.titleDownload}` - `"Retry processing"` → `{t.docs.titleRetry}` - `"Delete document"` → `{t.docs.titleDelete}` Replace confirm dialog messages: ```tsx message={ confirmDelete.ids.length === 1 ? `Delete "${confirmDelete.names[0]}"? This will remove the document, all its chunks, and embeddings from the vector store. This action cannot be undone.` : `Delete ${confirmDelete.ids.length} documents? This will remove them and all their chunks from the vector store. This action cannot be undone.` } ``` Replace with (keep the English detail text as it is system info): ```tsx message={ confirmDelete.ids.length === 1 ? `${t.docs.deleteBtn} "${confirmDelete.names[0]}"? This will remove the document, all its chunks, and embeddings from the vector store. This action cannot be undone.` : `${t.docs.deleteBtn} ${confirmDelete.ids.length} ${t.docs.colName === 'Document name' ? 'documents' : '份文档'}? This will remove them and all their chunks from the vector store. This action cannot be undone.` } ``` - [ ] **Step 5: Verify TypeScript** ```bash cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20 ``` Expected: 0 errors. --- ## Task 8: Translate `CompliancePage.tsx`, `HistoryRail.tsx`, `FindingChatDrawer.tsx` **Files:** - Modify: `frontend/src/pages/Compliance/CompliancePage.tsx` - Modify: `frontend/src/pages/Compliance/HistoryRail.tsx` - Modify: `frontend/src/pages/Compliance/FindingChatDrawer.tsx` - [ ] **Step 1: Add `useLanguage` to `CompliancePage.tsx`** Add import: ```tsx import { useLanguage } from '../../contexts/LanguageContext'; ``` Add at top of `CompliancePage()`: ```tsx const { t } = useLanguage(); ``` Replace all hardcoded UI strings using `t.compliance.*`. Key replacements (search and replace each): | Find | Replace | |------|---------| | `title="Compliance Analysis"` (Topbar) | `title={t.compliance.topbarTitle}` | | `placeholder="Search analyses..."` | `placeholder={t.compliance.searchPlaceholder}` | | `'Clear'` (button) | `{t.compliance.clearBtn}` | | `'Export'` (button label) | `{t.compliance.exportBtn}` | | `'Export JSON'` | `{t.compliance.exportJSON}` | | `'Export Text'` | `{t.compliance.exportText}` | | `'New analysis'` | `{t.compliance.newAnalysisBtn}` | | `'Analyzing…'` | `{t.compliance.statusAnalyzing}` | | `'Analysis complete'` | `{t.compliance.statusComplete}` | | `'No analysis running'` | `{t.compliance.emptyTitle}` | | `'Click New analysis to start...'` | `{t.compliance.emptyDesc}` | | `'Retrieving relevant regulations…'` | `{t.compliance.retrievingMsg}` | | `'Regulation'` (default name) | `{t.compliance.defaultRegulation}` | | `'% match'` | `{t.compliance.matchSuffix}` | | `'Paragraph Under Review'` | `{t.compliance.colParagraph}` | | `'Extracting and analyzing text…'` | `{t.compliance.extractingMsg}` | | `'No text extracted'` | `{t.compliance.noTextExtracted}` | | `'Analysis stages'` | `{t.compliance.stagesHeader}` | | `'Text extraction'` | `{t.compliance.stageExtraction}` | | `'Clause splitting'` | `{t.compliance.stageClauseSplit}` | | `'Regulation retrieval'` | `{t.compliance.stageRetrieval}` | | `'Conclusion synthesis'` | `{t.compliance.stageSynthesis}` | | `'Gap analysis in progress…'` | `{t.compliance.gapInProgress}` | | `'Ask AI'` | `{t.compliance.askAIBtn}` | | `'Chat'` (button) | `{t.compliance.chatBtn}` | | `'Conclusion'` (header) | `{t.compliance.conclusionHeader}` | | `title="Risk score (0=safe, 100=critical)"` | `title={t.compliance.riskScoreTooltip}` | | `'Covered'` | `{t.compliance.statusCovered}` | | `'Gap'` | `{t.compliance.statusGap}` | | `'Critical'` | `{t.compliance.statusCritical}` | | `'Info'` (status) | `{t.compliance.statusInfo}` | | `'Pasted Text'` | `{t.compliance.sourceTypePasted}` | | `'Indexed Document'` | `{t.compliance.sourceTypeIndexed}` | | `'Uploaded File'` | `{t.compliance.sourceTypeUploaded}` | | `'AI Compliance Q&A'` | `{t.compliance.chatSidebarHeader}` | | `'Thinking▋'` | `{t.compliance.chatThinking}` | | `'What regulation applies?'` | `{t.compliance.quickQ1}` | | `'How to remediate?'` | `{t.compliance.quickQ2}` | | `'What is the risk?'` | `{t.compliance.quickQ3}` | | `placeholder="Ask about this finding…"` | `placeholder={t.compliance.chatPlaceholder}` | | `'Send'` (button) | `{t.compliance.sendBtn}` | | `'Analysis failed'` | `{t.compliance.analysisFailed}` | | `'COMPLIANCE ANALYSIS REPORT'` (export) | `t.compliance.exportReportHeader` | | `'── PARAGRAPH UNDER REVIEW ──'` | `t.compliance.exportSectionParagraph` | | `'── FINDINGS ──'` | `t.compliance.exportSectionFindings` | | `'── CONCLUSION ──'` | `t.compliance.exportSectionConclusion` | | `'── RECOMMENDED ACTIONS ──'` | `t.compliance.exportSectionActions` | Column headers with counts use string interpolation — use template literals: - `'Retrieved Regulations {count}'` rendered as: `` `${t.compliance.stageRetrieval} (${count})` `` or `` `Retrieved Regulations (${count})` `` — keep the count logic, wrap the label. - `'Findings {count}'` → same pattern. - [ ] **Step 2: Translate `HistoryRail.tsx`** Add import + hook: ```tsx import { useLanguage } from '../../contexts/LanguageContext'; // Inside component: const { t } = useLanguage(); ``` Replace: - `'History'` (header) → `{t.compliance.historyHeader}` - `'Download report'` / `'Download'` → `{t.compliance.downloadReport}` - `'No analyses yet.'` → `{t.compliance.historyEmpty}` - `window.confirm(...)` message → `t.compliance.historyDeleteConfirm` - [ ] **Step 3: Translate `FindingChatDrawer.tsx`** Add import + hook: ```tsx import { useLanguage } from '../../contexts/LanguageContext'; // Inside component: const { t } = useLanguage(); ``` Replace: - `'Close'` button → `{t.compliance.drawerClose}` - Empty chat state message → `{t.compliance.drawerChatEmpty}` - `'Suggested questions'` header (if present) → `{t.compliance.drawerSuggestionsHeader}` - `'Send'` button → `{t.compliance.sendBtn}` - [ ] **Step 4: Verify TypeScript** ```bash cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20 ``` Expected: 0 errors. --- ## Task 9: Translate `RagChatPage.tsx` **Files:** - Modify: `frontend/src/pages/RagChat/RagChatPage.tsx` - [ ] **Step 1: Add `useLanguage` import and hook** ```tsx import { useLanguage } from '../../contexts/LanguageContext'; // Inside RagChatPage(): const { t } = useLanguage(); ``` - [ ] **Step 2: Replace `Topbar` and export button** Find: ```tsx Export chat } /> ``` Replace: ```tsx {t.ragchat.exportBtn} } /> ``` - [ ] **Step 3: Replace history pane header** Find: `

Quick prompts

` Replace: `

{t.ragchat.quickPromptsHeader}

` - [ ] **Step 4: Replace textarea placeholder** Find: `placeholder="Ask about your regulations…"` Replace: `placeholder={t.ragchat.inputPlaceholder}` - [ ] **Step 5: Replace citations header and empty state** Find: ```tsx

Sources {citations.length > 0 && `(${citations.length})`}

``` Replace: ```tsx

{t.ragchat.citationsHeader}{citations.length > 0 && ` (${citations.length})`}

``` Find: `Citations will appear here after a response is generated.` Replace: `{t.ragchat.citationsEmpty}` - [ ] **Step 6: Replace error messages in `send()`** Find: `'Could not reach the RAG API. Please check the backend.'` Replace: `t.ragchat.apiError` - [ ] **Step 7: Verify TypeScript** ```bash cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20 ``` Expected: 0 errors. --- ## Task 10: Final verification - [ ] **Step 1: Run TypeScript check on entire frontend** ```bash cd frontend && npx tsc --noEmit --skipLibCheck ``` Expected: 0 errors. - [ ] **Step 2: Manual browser verification** Open http://localhost:5173 and verify all pages: 1. **Sidebar** — `EN` button left of theme toggle; clicking cycles EN ↔ 中 instantly for nav labels and group headers. 2. **Overview** (`/`) — hero text, step labels, screen cards, stat bar all switch language. 3. **Regulatory Signals** (`/signals`) — topbar title, refresh button, stat bar, tab labels, card headers switch language. Crawl status messages use correct language. 4. **System Status** (`/status`) — topbar, stat labels, service rows ("Online"/"在线"), config labels, runtime info, footer message switch language. 5. **Documents** (`/documents`) — topbar, filter chips, table headers, action button tooltips, confirm dialog switch language. 6. **Compliance** (`/compliance`) — topbar, new analysis button, stage labels, finding status badges, export menu, chat sidebar, history rail switch language. 7. **Regulation Q&A** (`/chat`) — topbar, "Quick prompts" header, input placeholder, citations header, empty citations message switch language. 8. **Language persists within a session** — navigate between pages, language stays consistent. 9. **Language resets on reload** — refresh the browser, language returns to `EN`.

{t.overview.heroTitle.split('\n').map((line, i) => ( {line}{i === 0 && } ))}

{t.overview.sectionHowItWorks}

{t.overview.sectionScreens}

{t.overview.heroTitle.split('\n').map((line, i) => ( {line}{i === 0 &&
} ))}