與 Kiro 一起建構：建立工廠自動化入口網站 React UI

僅供教育工程工作坊使用。本內容為軟體架構演練，並非實際生產環境之發布建議。

摘要： 本獨立工作坊旨在教授專業開發人員如何使用 Kiro，將最新的工廠自動化入口網站 (Factory Automation Portal) 重構為 React 與 TypeScript 應用程式。開發人員將學習規格驅動的 UI 分解、深色模式設計 Token、響應式網格轉換、無障礙頁籤導覽，以及如何建構可重複使用的 Runtime、工具 (Tools)、受控工作流 (Governed Workflows)、製程視窗 (Process Windows) 與 Runbook 面板。此外，還包含可展開的分析列、SVG 圖表容器、模擬的製程視窗即時更新，並利用 Kiro Hook 來確保 UI 的一致性、文件化以及回歸測試，從而達到生產級別的學習成果。

---

工作坊目的

這個為期 2 小時的工作坊專注於最新入口網站展示的前端系統設計。開發人員將把原本單一檔案的 HTML/CSS/JavaScript 實作轉換為易於維護的 React + TypeScript 應用程式，同時完整保留自動化入口網站的使用者體驗：

● 置頂列： 包含 AWS 標誌、入口網站識別資訊、工作流副標題、綠色即時狀態點（Live Status Dot）以及 HKT 時鐘。

● 主視覺區塊（Hero Section）： 包含工廠工程定位、服務晶片標籤（Chips）、任務卡片以及安全邊界晶片標籤。

● 狀態條（Status Strip）： 包含六個精確的入口網站指標：Runtime 入口點、工具、專家、策略檢查、評估集和工作階段狀態。

● 頁籤導覽（Tab Navigation）： 包含六個面板：總覽 (Overview)、Runtime、工具 (Tools)、受控工作流 (Governed Workflows)、製程視窗 (Process Windows) 和 Runbook。

● 總覽卡片： 包含 Runtime 工作台、工具庫存和受控工作流。

● Runtime 面板： 包含六個 Runtime 卡片、承載資料契約（Payload Contract）和確定性工具模式（Deterministic Tool Pattern）。

● 工具面板： 包含四個工具、工具流程（Tool Flow）和 JSON-RPC 偵錯承載資料。

● 受控面板： 包含四個專家、策略邊界和遙測事件格式。

● 製程視窗面板： 包含狀態磚、可搜尋/排序的自動化排行榜、可展開的分析面板、SVG 圖表和模擬的即時更新。

● Runbook 面板： 包含 2 小時的建構路徑、發布審查（Promotion Gate）和生產待辦清單（Production Backlog）。

● 頁尾邊界： 聲明展示數據和圖表僅為預留位置（Placeholders），並未實作自主設備控制。

本課程的學習目標不僅僅是「複製 UI」，而是教導開發人員如何使用 Kiro 規格驅動開發（Spec-driven development）、引導檔案（Steering files）和 Hook，將密集的原型轉換為適合資深開發人員的生產級組件邊界。

---

展示涵蓋範圍地圖

本工作坊涵蓋了最新入口網站展示的以下部分：

● 文件中介資料（Metadata）： 標題與描述皆使用 AWS 服務與技術術語：Amazon Bedrock、runtime、tooling、AWS Lambda、IAM、SigV4、Amazon SageMaker、Amazon Timestream、AWS Glue、AWS Lake Formation、AWS DataZone、OpenTelemetry、Apache Iceberg、Etch Process Window Automation。

● 頁面外殼（Page Shell）： .page、.shell、深色網格背景、青色（Cyan）和綠色放射狀漸層發光層、最大寬度 1440px、邊框 #315875，以及深層陰影 0 26px 90px rgba(0,20,36,.72)。

● 固定置頂列： .topbar、.brand、.logo、.brand-main、.brand-sub、.status、.dot；AWS 標誌區塊；產品名稱 FACTORY AUTOMATION PORTAL；副標題 RUNTIME / TOOLS / POLICY / MEMORY / OBSERVABILITY / EVALUATIONS；即時 HKT 狀態。

● 主視覺區塊（Hero）： 小標題 Automation Portal；主標題 Factory Engineering；服務晶片標籤 RUNTIME、TOOLING、AI ASSISTANCE、TOOLS、SIGV4、JSON-RPC、AWS LAMBDA、AMAZON BEDROCK；任務卡片；邊界晶片標籤 NO EQUIPMENT COMMANDS、EVIDENCE FIRST、BOUNDED MEMORY、HUMAN REVIEW。

● 摘要統計數據： Runtime 入口點 3、工具 4、專家 4、策略檢查 2、評估集 5、工作階段狀態 ON。

● 頁籤導覽： Overview、Runtime、Tools、Governed Workflows、Process Windows、Runbook。

● 總覽面板： 企業自動化控制平面（Enterprise Automation Control Plane）、Runtime 工作台、工具庫存、受控工作流、架構分層、採用說明。

● Runtime 面板： Runtime 自動化、Runtime 卡片、Runtime 承載資料契約、確定性工具模式。

● 工具面板： 工具庫存、四個工具、工具流程、process_window_drift 的偵錯承載資料。

● 受控面板： 受控黃光微影漂移自動化（Governed Photolithography Drift Automation）、四個專家、策略邊界、遙測事件格式。

● 製程視窗面板： 蝕刻製程視窗自動化排行榜（Etch Process Window Automation Leaderboard）、狀態磚、搜尋欄位、排序按鈕、自動化資料列、分析展開、圖表。

● Runbook 面板： 自動化入口網站維運手冊、時間軸步驟、發布審查、生產待辦清單。

● 響應式斷點（Breakpoints）： 桌上型電腦、平板電腦（最大寬度 1120px）和手機（最大寬度 560px）。

---

目標開發人員

● 正在建構雲端自動化儀表板的前端開發人員。

● 需要將原型 HTML 現代化為具備型別應用程式的全端開發人員。

● 想要學習 Kiro 如何協助處理規格、引導、Hook 和重構的 UI 工程師。

● 需要在改善維維護性的同時，保留 Runtime、工具、策略、記憶體、可觀測性和評估等業務意涵的開發人員。

---

兩小時議程

---

架構

React 應用程式
├─ src/app/App.tsx
├─ src/styles/tokens.css
├─ src/styles/layout.css
├─ src/styles/portal.css
├─ src/styles/charts.css
├─ src/data/portal.ts
├─ src/domain/formatting.ts
├─ src/domain/charts.ts
├─ src/domain/simulator.ts
├─ src/components/GraphicWorkspaceShell.tsx
├─ src/components/TopBar.tsx
├─ src/components/HeroPanel.tsx
├─ src/components/StatsStrip.tsx
├─ src/components/PortalTabs.tsx
├─ src/components/OverviewPanel.tsx
├─ src/components/RuntimePanel.tsx
├─ src/components/ToolsPanel.tsx
├─ src/components/GovernedAgentsPanel.tsx
├─ src/components/ProcessWindowPanel.tsx
├─ src/components/StatusTileStrip.tsx
├─ src/components/AutomationCellRow.tsx
├─ src/components/AnalysisPanelShell.tsx
├─ src/components/RunbookPanel.tsx
└─ src/components/FooterBoundary.tsx
Kiro 工作區
├─ .kiro/steering/product.md
├─ .kiro/steering/ui-design-system.md
├─ .kiro/steering/accessibility.md
├─ .kiro/steering/automation-boundary.md
└─ .kiro/specs/factory-portal-ui/
   ├─ requirements.md
   ├─ design.md
   └─ tasks.md

---

入口網站使用的專業術語

---

步驟 1 — 初始化 React 應用程式

npm create vite@latest kiro-aws-factory-portal -- --template react-ts
cd kiro-aws-factory-portal
npm install
npm install -D vitest @testing-library/react @testing-library/jest-dom
mkdir -p .kiro/steering .kiro/specs/factory-portal-ui src/components src/data src/styles src/domain src/dev

商業邏輯： 原始的入口網站展示是一個單一的 HTML 檔案。這對於快速建立原型很有用，但專業團隊需要可分離的組件，以便工廠自動化入口網站可以在沒有高回歸風險的情況下進行演進。

程式碼邏輯： Vite 提供了一個快速的 TypeScript React 基準。資料夾結構將應用程式組合、組件轉譯、展示資料、領域輔助程式和 CSS Token 分開。

預期結果： npm run dev 啟動一個空的 React 應用程式，Kiro 可以對其進行檢查和修改。

系統設計原理解釋：

● 選擇本地 React 應用程式是因為工作工作坊時間為 2 小時，必須專注於提取 UI 架構，而非雲端部署。

● 專案從一開始就將資料、組件和樣式分開。這可以防止 Kiro 生成一個將入口網站資料、轉譯邏輯和設計 Token 混在一起的大型組件。

● 在開始時就安裝測試相依套件，因為無障礙和轉譯測試應該是遷移的一部分，而不是在 UI 完成後才加上。

---

步驟 2 — 新增 Kiro 引導檔案

建立 .kiro/steering/product.md：

# 產品總覽
建構一個用於開發人員教育的工廠自動化入口網站。
UI 顯示展示架構遙測、製程視窗自動化資料以及受控 AI 工作流模式。
保留原始入口網站的概念：runtime、AWS 工具閘道、工具、AI 協助、策略、記憶體、可觀測性、評估、製程視窗遙測、runbook 以及頁尾邊界。
保留精確的導覽頁籤：Overview、Runtime、Tools、Governed Workflows、Process Windows、Runbook。

建立 .kiro/steering/ui-design-system.md：

# UI 設計系統
使用帶有青色、綠色、紅色、黃色、暗藍灰色和等寬指標文字的深色入口網站樣式。
使用 CSS 變數作為 Token。
保持視覺階層：置頂列 -> 主視覺 -> 統計數據 -> 頁籤 -> 入口網站面板 -> 頁尾。
保留與桌上型電腦、平板電腦和手機等效的頁籤導覽和響應式行為。
將原始的 `.shell` 入口網站框架、深色網格內文背景、卡片、資料列、晶片標籤和 SVG 圖表樣式對映到可重複使用的 CSS 模組中。

建立 .kiro/steering/accessibility.md：

# 無障礙規則
所有搜尋輸入都需要標籤。
頁籤按鈕需要有無障礙名稱和作用中狀態（Active State）。
分析按鈕必須使用 aria-expanded 顯示展開/收合狀態。
不要僅依賴顏色來表示正值/負值；保持加號/減號符號與標籤。
在頁籤、排序、搜尋和分析控制項上保持鍵盤可見焦點。

建立 .kiro/steering/automation-boundary.md：

# 自動化邊界
本入口網站用於工程分析、架構審查和測試自動化規劃。
請勿實作自主設備控制操作。
請勿隱藏策略、記憶體、可觀測性或評估邊界。
始終顯示展示數據和圖表僅為審查工作流的預留位置。
保留邊界晶片標籤：NO EQUIPMENT COMMANDS, EVIDENCE FIRST, BOUNDED MEMORY, HUMAN REVIEW。

給 Kiro 的提示詞範例

讀取引導檔案並建立一個規格書，用於將單一檔案的工廠自動化入口網站轉換為 React 組件。保留版面配置區段、深色設計 Token、響應式行為、頁籤、製程視窗排行榜、Runtime/Tools/Governed/Runbook 面板、分析展開、SVG 圖表、狀態磚、runbook 時間軸和頁尾邊界。生成需求、組件設計和實作任務。

商業邏輯： 引導檔案告訴 Kiro 哪些原型細節是強制性的：工作流標籤、統計數據、頁籤、搜尋、排序、分析展開、發布審查閘門和邊界說明。

程式碼邏輯： 引導檔案是 Kiro 應用於未來程式碼生成的 Markdown 指令。設計系統引導檔案直接影響生成的 CSS 和組件邊界。

預期結果： Kiro 產出一個組件化的計畫，而不是將展示重新編寫為另一個大型檔案。

系統設計原理解釋：

● 產品引導與設計引導分開，因為產品需求描述了必須保留的內容，而設計系統引導則描述了它應該如何呈現和運作。

● 無障礙被視為第一等引導檔案，因為自動化儀表板通常是鍵盤驅動的。

● 自動化邊界檔案可防止入口網站被誤認為是實際的設備控制應用程式。

---

步驟 3 — 擷取入口網站展示資料

建立 src/data/portal.ts：

export type PortalTab = 'overview' | 'runtime' | 'gateway' | 'governed' | 'leaderboard' | 'runbook';

export type PortalCard = {
  title: string;
  body: string;
  tags: string[];
};

export type ToolCard = {
  name: string;
  desc: string;
  signals: string[];
};

export type SpecialistCard = {
  name: string;
  focus: string;
  tools: string;
};

export type RunbookStep = [string, string, string];

export type AutomationCell = {
  name: string;
  strategy: string;
  indexPct: number;
  deltaPct: number;
  stability: number;
  processFactor: number;
  windowRatePct: number;
  skew: number;
  maxDriftPct: number;
  series: number[];
};

export type StatusTile = {
  key: 'RUNTIME' | 'GATEWAY' | 'POLICY' | 'EVAL';
  move: string;
  state: 'READY' | 'WATCH';
  up: boolean;
  series: number[];
};

export const runtimeCards: PortalCard[] = [
  { title: '同步 Runtime', body: 'app.py 中的 runtime 入口點負責驗證提示詞、植入請求與工作階段上下文、執行由 Amazon Bedrock 支援的 AI 助理，並回傳結構化工程分析。', tags: ['app.py', 'FactoryAutomationApp', 'boto3 invoke'] },
  { title: '串流 Runtime', body: '非同步入口點自 agent.stream_async 產生漸進式區塊，以便入口網站和聊天介面可以逐步轉譯分析。', tags: ['app_streaming.py', 'async', 'partial output'] },
  { title: '大型承載資料 Runtime', body: 'Base64 格式的 Excel 和圖片欄位會被解碼為具型別的文件和圖片內容承載資料，用於綜合工廠工程分析。', tags: ['xlsx', 'png', 'base64'] },
  { title: '承載資料驗證', body: '本地驗證器在 runtime 呼叫前檢查必要的提示詞欄位、選填的中介資料以及未知的頂層欄位。', tags: ['JSON Schema', 'fail fast', 'client contract'] },
  { title: '冒煙測試', body: '確定性測試可驗證承載資料契約和 Python 計算工具，無需模型呼叫、憑證或延遲。', tags: ['pytest', 'deterministic', 'local'] },
  { title: '工作階段清理', body: 'Runtime 工作階段被視為託管資源，並在工作流完成後明確停止。', tags: ['session ID', 'cleanup', 'operations'] }
];

export const tools: ToolCard[] = [
  { name: 'throughput_throughput', desc: '評估在製品 (WIP) 佇列壓力、工具可用性壓力、晶圓吞吐量和急件 (Hot-lot) 優先權。', signals: ['queue depth', 'tool availability', 'wafer throughput', 'hot-lot preference'] },
  { name: 'metrology_drift_widening', desc: '評估線內和批次級漂移擴大、CD-SEM 壓力、產量損失監控和測量產能。', signals: ['inline drift', 'lot drift', 'CD-SEM index', 'yield-loss watch'] },
  { name: 'process_window_drift', desc: '評估製程能力、重疊對準誤差、配方分歧、批次流動和製程視窗漂移。', signals: ['overlay error', 'process capability', 'recipe divergence', 'lot flow'] },
  { name: 'tool_to_tool_mismatch', desc: '評估機台間錯配、待辦壓力、基準偏移和控制上下文。', signals: ['overlay mismatch', 'baseline offsets', 'control context', 'tool matching'] }
];

export const specialists: SpecialistCard[] = [
  { name: '產能吞吐量 (Throughput)', focus: '產能吞吐量穩定性、在製品佇列壓力、急件優先權和工具產能深度', tools: 'bpu_change, throughput_buffer' },
  { name: '計量學 (Metrology)', focus: 'CD-SEM 漂移擴大、產量損失壓力、缺陷風險漂移和測量產能', tools: 'bpu_change' },
  { name: '重疊對準 (Overlay)', focus: '機台間錯配、批次流動、重疊對準漂移、基準偏移和控制上下文', tools: 'control_amount' },
  { name: '蝕刻製程 (Etch-process)', focus: '重疊對準誤差、製程能力、配方分歧、控制器反應和製程視窗漂移', tools: 'bpu_change' }
];

export const runbook: RunbookStep[] = [
  ['0-10', '環境與架構檢查', '確認 AWS 身分、區域、Python 環境、專案資源和角色邊界。'],
  ['10-25', '提示詞與結構描述契約', '建立 runtime 系統提示詞、協調器提示詞、標準工具結構描述和承載資料契約。'],
  ['25-45', '本地代理與工具建構', '實作 AI 協助工具、本地 runtime 邏輯、本地 FastAPI 工具伺服器和發現用戶端。'],
  ['45-65', '驗證、策略與冒煙測試', '執行承載資料驗證器、確定性工具冒煙測試、策略測試和工具結構描述檢查。'],
  ['65-85', '託管部署', '啟動 runtime、打包 Lambda 目標、建立 AWS 工具閘道並註冊工具目標。'],
  ['85-105', '呼叫與偵錯', '使用 boto3 呼叫 runtime、執行工具語意搜尋、直接進行 tools/call 和 tools/list 偵錯。'],
  ['105-115', '受控協調', '執行專家、有限記憶體、回應策略檢查和結構化遙測事件。'],
  ['115-120', '評估與交接', '執行安全和封鎖的評估固件、擷取工作階段 ID、清理和待辦後續任務。']
];

export const automationCells: AutomationCell[] = [
  { name: 'Sofia Garcia', strategy: '蝕刻終點深度多步驟配方控制', indexPct: 18.4, deltaPct: 0.42, stability: 0.73, processFactor: 1.8, windowRatePct: 58, skew: 0.44, maxDriftPct: 18, series: [100,101,100.7,102.2,104,103.2,105.7,106.1,108,109.8,111,112.4,114.9,116.2,118.4] },
  { name: 'Lucia Fernandez', strategy: '黃光微影重疊對準漂移偵測', indexPct: 16.9, deltaPct: 0.88, stability: 0.91, processFactor: 1.7, windowRatePct: 61, skew: 0.31, maxDriftPct: 22, series: [100,102.1,101.5,103.8,102.9,106.4,108.2,107.5,110.8,112.2,111.6,114.1,115.2,116,116.9] },
  { name: 'Carmen Lopez', strategy: '反應室匹配 RF 功率壓力穩定性', indexPct: 14.2, deltaPct: -0.31, stability: 0.68, processFactor: 1.6, windowRatePct: 56, skew: 0.22, maxDriftPct: 25, series: [100,99.4,101.7,103.2,104.8,103.7,106.8,108.9,110.4,109.2,112.6,113.8,115.1,114.8,114.2] },
  { name: 'Elena Martin', strategy: '工廠生產線產量趨勢自動化', indexPct: 11.8, deltaPct: 0.17, stability: 0.62, processFactor: 1.5, windowRatePct: 54, skew: 0.18, maxDriftPct: 17, series: [100,100.8,101.1,102.5,103.2,104,103.8,105.4,106.2,107,108.9,109.3,110.2,111.1,111.8] },
  { name: 'Marta Sanchez', strategy: '配方參數相對穩定性', indexPct: 9.6, deltaPct: 0.09, stability: 0.57, processFactor: 1.4, windowRatePct: 53, skew: 0.09, maxDriftPct: 15, series: [100,100.2,99.9,101,101.8,102.5,102.2,103.6,104.1,105.4,106,106.8,108.2,109,109.6] },
  { name: 'Paula Romero', strategy: '計量特徵集成評分', indexPct: 7.1, deltaPct: -0.12, stability: 0.49, processFactor: 1.3, windowRatePct: 52, skew: -0.04, maxDriftPct: 14, series: [100,100.5,101.2,100.8,102.1,102.7,103.4,104.2,103.8,105,105.4,106.2,106.8,107.3,107.1] },
  { name: 'Ana Torres', strategy: '終點訊號突破警報系統', indexPct: 5.4, deltaPct: 0.28, stability: 0.42, processFactor: 1.2, windowRatePct: 51, skew: 0.12, maxDriftPct: 19, series: [100,99.1,100.4,101.6,100.8,102.2,101.5,103.4,102.8,104.2,103.8,104.7,105.1,105.2,105.4] },
  { name: 'Laura Navarro', strategy: '多機台均值回歸控制', indexPct: 3.8, deltaPct: -0.06, stability: 0.35, processFactor: 1.1, windowRatePct: 49, skew: -0.11, maxDriftPct: 16, series: [100,100.4,99.8,100.9,101.4,100.6,101.8,102.2,101.7,102.8,103.1,102.9,103.6,103.9,103.8] }
];

export const statusTiles: StatusTile[] = [
  { key: 'RUNTIME', move: '+0.38%', state: 'READY', up: true, series: [20,21,20,22,23,23,24,25,24,26] },
  { key: 'GATEWAY', move: '-0.22%', state: 'WATCH', up: false, series: [30,29,31,28,27,26,25,24,23,22] },
  { key: 'POLICY', move: '+0.62%', state: 'READY', up: true, series: [18,18.5,19,18.7,20,21,20.5,22,23,23.5] },
  { key: 'EVAL', move: '+2.18%', state: 'READY', up: true, series: [20,22,21,24,26,25,29,28,32,34] }
];

商業邏輯： 這保留了 Runtime 卡片、工具卡片、專家卡片、runbook 步驟、製程視窗列資料和狀態磚數值，同時為開發人員提供具型別的單一事實來源（Source of Truth）。

程式碼邏輯： 組件匯入具型別的陣列，而不是讀取 DOM 或解析內嵌的腳本資料。

預期結果： UI 可以轉譯所有入口網站區段，包含 8 個自動化單元、4 個狀態磚、4 個工具、4 個專家、6 個 Runtime 卡片和 8 個 runbook 步驟，而不需要在組件內部寫死（Hardcode）數值。

系統設計原理解釋：

● 將資料放置於單獨的模組中，因為原始單一檔案中的展示資料與轉譯邏輯是混在一起的。

● 欄位名稱明確標示了單位：indexPct、deltaPct 和 windowRatePct 是百分比，而 series 包含索引製程視窗點。

● 狀態磚型別將有效的鍵值限制為展示中的四個自動化通道。

● Runtime 卡片、工具、專家和 runbook 步驟皆已定義型別，因為入口網站面板應從資料生成，而非複製重複的 JSX。

---

步驟 4 — 建立 CSS 設計 Token

建立 src/styles/tokens.css：

:root {
  --bg: #061018;
  --panel: #081522;
  --panel2: #0c1f31;
  --line: #28465f;
  --soft: rgba(40,70,95,.62);
  --text: #edf6ff;
  --muted: #9fb3c8;
  --muted2: #668197;
  --cyan: #38bdf8;
  --cyan2: #77c7ff;
  --green: #31c48d;
  --red: #f05252;
  --yellow: #f6c85f;
  --orange: #fb923c;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 8% 0, rgba(56,189,248,.19), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(49,196,141,.13), transparent 28%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}
.metric { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 950; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.cyan { color: var(--cyan2); }
.yellow { color: var(--yellow); }

商業邏輯： 設計 Token 保留了企業級深色入口網站的外觀，同時使視覺語言具備可重複使用性。

程式碼邏輯： CSS 變數取代了重複的十六進位（Hex）顏色值。組件一致地使用 .metric、.pos、.neg、.cyan 和 .yellow 來表示製程指標和狀態值。

預期結果： 應用程式符合深色網格、青色/綠色/紅色/黃色的自動化入口網站美學。

系統設計原理解釋：

● 使用 CSS 變數而非組件局部顏色，以便可以在同一個地方進行視覺變更。

● 指標文字使用等寬數字（Tabular numerals），因為當資料列更新時，數值在視覺上應保持對齊。

● 正值和負值的類別是根據語意命名，而非顏色名稱。

---

步驟 5 — 建構置頂列、主視覺與頁籤導覽

建立 src/components/TopBar.tsx：

import { useEffect, useState } from 'react';

export function TopBar() {
  const [clock, setClock] = useState('LIVE');

  useEffect(() => {
    const tick = () => setClock(`LIVE ${new Date().toLocaleString('en-HK', {
      hour12: false,
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })} HKT`);
    tick();
    const id = window.setInterval(tick, 1000);
    return () => window.clearInterval(id);
  }, []);

  return <header className="topbar">
    <div className="brand">
      <div className="logo">AWS</div>
      <div>
        <div className="brand-main">FACTORY AUTOMATION PORTAL</div>
        <div className="brand-sub">RUNTIME / TOOLS / POLICY / MEMORY / OBSERVABILITY / EVALUATIONS</div>
      </div>
    </div>
    <div className="status"><span className="dot" />{clock}</div>
  </header>;
}

建立 src/components/HeroPanel.tsx：

export function HeroPanel() {
  const chips = ['RUNTIME', 'TOOLING', 'AI ASSISTANCE', 'tooling', 'SIGV4', 'JSON-RPC', 'AWS LAMBDA', 'AMAZON BEDROCK'];
  const boundary = ['NO EQUIPMENT COMMANDS', 'EVIDENCE FIRST', 'BOUNDED MEMORY', 'HUMAN REVIEW'];

  return <section className="hero">
    <div className="hero-grid">
      <div>
        <div className="eyebrow">Automation Portal</div>
        <h1>AI-assisted<br /><span>Factory Engineering</span></h1>
        <p className="subhead">專為建構蝕刻製程視窗測試自動化、工具庫存和受控黃光微影漂移協調的資深開發人員所設計的單一自動化入口網站。該入口網站連接了 runtime 部署、工具發現、確定性計算、策略閘門、記憶體摘要、遙測、評估以及企業採用模式。</p>
        <div className="chips">{chips.map(c => <span key={c} className={c.includes('AWS') ? 'chip hot' : 'chip'}>{c}</span>)}</div>
      </div>
      <aside className="panel">
        <div className="panel-title">入口網站任務</div>
        <p><strong>將工作坊資產轉換為企業自動化主控台。</strong> 操作人員可在同一個便於稽核的介面中，獲取部署狀態、工具庫存、受控工作流控制、評估就緒狀態以及原始製程視窗排行榜遙測數據。</p>
        <div className="chips">{boundary.map(c => <span key={c} className={c === 'HUMAN REVIEW' ? 'chip warn' : 'chip ok'}>{c}</span>)}</div>
      </aside>
    </div>
  </section>;
}

商業邏輯： 置頂列與主視覺區塊在使用者檢查面板或製程視窗數據之前，先為其提供自動化工作區的上下文背景。

程式碼邏輯： TopBar 擁有時鐘狀態和清理機制。HeroPanel 是靜態的，並從陣列中轉譯晶片標籤。

預期結果： 應用程式頂部在視覺上與最新的入口網站相符，包含即時狀態、HKT 時鐘、標題、服務晶片標籤、任務卡片和邊界晶片標籤。

系統設計原理解釋：

● 時鐘邏輯被隔離在 TopBar 中，因為它具有計時器副作用。

● 主視覺區塊內容被組件化（即使它是靜態的），因為產品文案通常獨立於入口網站面板而變更。

● 工作流晶片標籤使用陣列而非重複的 JSX，以便 Kiro 或開發人員輕鬆新增或重新排序標籤。

---

步驟 6 — 建構統計數據條、入口網站面板、製程視窗列與頁尾

建立 StatsStrip：

export function StatsStrip() {
  return <section className="stats">
    <div className="stat"><div className="stat-label">Runtime 入口點</div><div className="stat-val cyan">3</div></div>
    <div className="stat"><div className="stat-label">工具</div><div className="stat-val pos">4</div></div>
    <div className="stat"><div className="stat-label">專家</div><div className="stat-val pos">4</div></div>
    <div className="stat"><div className="stat-label">策略檢查</div><div className="stat-val yellow">2</div></div>
    <div className="stat"><div className="stat-label">評估集</div><div className="stat-val cyan">5</div></div>
    <div className="stat"><div className="stat-label">工作階段狀態</div><div className="stat-val pos">ON</div></div>
  </section>;
}

建立以下組件：

● PortalTabs：控制作用中面板狀態和易於鍵盤操作的頁籤行為。

● OverviewPanel：轉譯企業自動化控制平面、Runtime 工作台、工具庫存、受控工作流、架構分層和採用說明。

● RuntimePanel：對映 runtimeCards 並顯示 Runtime 承載資料契約和確定性工具模式。

● ToolsPanel：對映 tools 並顯示工具流程和 JSON-RPC 偵錯承載資料。

● GovernedAgentsPanel：對映 specialists 並顯示策略邊界和遙測事件格式。

● ProcessWindowPanel：轉譯狀態磚、搜尋、排序控制項、製程視窗列和分析展開。

● RunbookPanel：轉譯建構時間軸、發布審查和生產待辦清單。

● FooterBoundary：保留自動化邊界和「無自主設備操作」說明。

商業邏輯： 這些面板將入口網站展示轉換為可重複使用的企業級導覽模型。

程式碼邏輯： 靜態入口網站資料對映到卡片，而製程視窗列則保留搜尋、排序、可展開的分析、SVG 火花線（Sparkline）和即時模擬行為。

預期結果： UI 顯示與展示相同的入口網站區段，同時其實作變得易於維護和測試。

系統設計原理解釋：

● 頁籤面板可防止頁面變成單一的大型組件。

● Runtime、工具和受控內容是獨立的審查表面，因為每個部分都屬於不同的平台擁有者。

● 製程視窗面板保留了原始互動式排行榜行為，作為一個專注的組件。

---

步驟 7 — 新增 Kiro Hook 以確保 UI 品質

建立 .kiro/hooks/ui-regression-review.md：

# Hook: UI 回歸審查
觸發條件：當 src/components/*.tsx 或 src/styles/*.css 被儲存時
執行動作：
要求 Kiro 檢查變更是否保留了：置頂列、主視覺、統計數據、頁籤、總覽卡片、runtime 卡片、工具庫存、受控工作流卡片、製程視窗排行榜、runbook 時間軸、響應式標籤、深色 Token、SVG 圖表表面和頁尾邊界。

建立 .kiro/hooks/accessibility-review.md：

# Hook: 無障礙審查
觸發條件：當 src/components/*.tsx 被儲存時
執行動作：
要求 Kiro 審查鍵盤存取、搜尋輸入標籤、頁籤作用中狀態、aria-expanded、焦點可見性以及正值/負值的語意。

建立 .kiro/hooks/automation-boundary-review.md：

# Hook: 自動化邊界審查
觸發條件：當 src/components/*.tsx、src/data/*.ts 或 src/styles/*.css 被儲存時
執行動作：
要求 Kiro 驗證是否未新增自主設備操作文字或控制項，且 evidence-first、策略、記憶體、可觀測性、評估和人工審查邊界仍然清晰可見。

商業邏輯： UI 回歸 Hook 有助於保護原型涵蓋範圍和自動化安全訊息。

程式碼邏輯： Hook 在檔案儲存事件時執行 Kiro 審查提示詞。它們不能取代單元測試，但能提供即時的代理輔助審查。

預期結果： 當組件遺失標籤、移除必要區段或破壞互動語意時，Kiro 會建議修正方法。

系統設計原理解釋：

● UI 遷移包含許多小細節，因此檔案儲存審查能在開發上下文記憶猶新時立即捕獲回歸錯誤。

● 無障礙審查獨立分開，因為視覺上的相似性並不保證鍵盤或螢幕閱讀器的品質。

● 自動化邊界審查可防止入口網站變成暗指具備設備控制功能的 UI。

---

最終實驗室挑戰

詢問 Kiro：

將 React UI 與最新的工廠自動化入口網站展示清單進行比較。產生一個涵蓋版面配置區段、服務晶片標籤、狀態統計數據、頁籤、Runtime 卡片、工具卡片、受控代理卡片、製程視窗列、runbook、響應式、即時時鐘、頁尾邊界、狀態磚、SVG 圖表表面和分析面板的差異清單。然後針對剩餘的差異生成實作任務。

---

完成檢查清單

● [ ] 置頂列與 HKT 即時時鐘運作正常。

● [ ] 主視覺、任務卡片、晶片標籤和頁尾邊界皆存在。

● [ ] 統計數據條能重現入口網站的數值。

● [ ] 頁籤導覽具備無障礙設計。

● [ ] Overview、Runtime、Tools、Process Windows 和 Runbook 面板與展示相符。

● [ ] 所有 8 個自動化單元和 4 個狀態磚皆已呈現。

● [ ] 所有 6 個 runtime 卡片、4 個工具、4 個專家和 8 個 runbook 步驟皆已呈現。

● [ ] 搜尋和排序控制項具備無障礙設計。

● [ ] 可展開的分析列保留了圖表和自動化說明插槽。

● [ ] 響應式版面配置涵蓋桌上型電腦/平板電腦/行動裝置。

● [ ] Kiro Hook 能審查 UI、無障礙和自動化邊界的變更。

---

進階開發人員專屬動手操作實驗室 — HTML 圖形分析

進階圖形分析目標

在本節結束時，進階開發人員將能夠：

● 將入口網站 HTML 檔案的視覺語法逆向工程為可重複使用的設計 Token。

● 解釋網格背景、發光效果、邊框、面板、狀態卡片、頁籤和 SVG 圖表表面如何營造出工廠自動化主控台的感覺。

● 建立一個將 CSS 選擇器對映到圖形意圖的視覺清查清單。

● 驗證在桌上型電腦、平板電腦和行動裝置斷點下的響應式圖形行為。

● 建立 Kiro 審查提示詞，在重構時保留視覺精確度和自動化邊界語言。

來自入口網站 HTML 檔案的圖形清查

上傳的入口網站 HTML 使用了一個緊湊但豐富的圖形系統：

● 入口網站框架： .shell 建立了一個有邊界 的自動化工作區，帶有邊框、深色半透明背景和大型方塊陰影。

● 分層內文背景： 多個線性漸層建立了一個細微的網格，而放射狀漸層則建立了青色和綠色的光暈。

● 固定命令列： .topbar、.logo、.status 和 .dot 確立了即時工作區的直觀功能（Affordance）。

● 主視覺組合： .hero、.hero-grid、.eyebrow、h1、.chips 和 .panel 定義了入口網站的識別資訊與邊界故事。

● 指標顏色語言： .pos、.neg、.cyan、.yellow 和 .metric 編碼了正值、負值、醒目提示、警告和等寬數字文字。

● 頁籤導覽： .nav、.tab、.portal 和 .portal.active 控制了入口網站的面板模型。

● 看板密度： .row、.cell、.rank、.strategy、.barwrap、.bar 和 .mlabel 建立了一個密集的製程視窗網格。

● SVG 圖表語言： .spark、.eq、.dd、.hist、.line、.fill、.axis、.gridline、.ddarea、.ddline、.bp、.bn、.lbl 提供了可重複使用的圖表語意。

● 響應式轉換： 在 1120px 和 560px 的媒體查詢將看板從類似表格的網格轉換為行動裝置的資料列卡片。

進階實驗室 1 — 建構視覺 Token 提取報告

目標： 將入口網站 HTML 的 CSS 數值轉換為一份文件化的設計 Token 報告，解釋每種顏色、字體、間距、邊框、陰影、背景層和圖表標記。

建立 docs/html-graphic-token-report.md：

# 工廠自動化入口網站 HTML 視覺 Token 報告

## 顏色 Token
<table>
  <thead>
    <tr>
      <th scope="col">Token</th>
      <th scope="col">數值</th>
      <th scope="col">圖形角色</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>--bg</td>
      <td>#061018</td>
      <td>工作區背景</td>
    </tr>
    <tr>
      <td>--panel</td>
      <td>#081522</td>
      <td>主要面板表面</td>
    </tr>
    <tr>
      <td>--panel2</td>
      <td>#0c1f31</td>
      <td>凸起的控制表面</td>
    </tr>
    <tr>
      <td>--line</td>
      <td>#28465f</td>
      <td>網格與邊框系統</td>
    </tr>
    <tr>
      <td>--soft</td>
      <td>rgba(40,70,95,.62)</td>
      <td>低對比度內部微調分隔線</td>
    </tr>
    <tr>
      <td>--text</td>
      <td>#edf6ff</td>
      <td>主要文字</td>
    </tr>
    <tr>
      <td>--muted</td>
      <td>#9fb3c8</td>
      <td>次要文字</td>
    </tr>
    <tr>
      <td>--muted2</td>
      <td>#668197</td>
      <td>三級文字</td>
    </tr>
    <tr>
      <td>--cyan</td>
      <td>#38bdf8</td>
      <td>互動式發光與主要醒目提示</td>
    </tr>
    <tr>
      <td>--cyan2</td>
      <td>#77c7ff</td>
      <td>次要青色標題醒目提示</td>
    </tr>
    <tr>
      <td>--green</td>
      <td>#31c48d</td>
      <td>正值指標狀態與即時狀態點</td>
    </tr>
    <tr>
      <td>--red</td>
      <td>#f05252</td>
      <td>負值指標狀態與漂移壓力</td>
    </tr>
    <tr>
      <td>--yellow</td>
      <td>#f6c85f</td>
      <td>警告與審查強調色</td>
    </tr>
    <tr>
      <td>--orange</td>
      <td>#fb923c</td>
      <td>保留的警報強調色</td>
    </tr>
  </tbody>
</table>

## 字體排版
- `--mono` 用於指標、控制項、狀態、程式碼區塊、遙測範例和密集標籤。
- `--sans` 用於內文、主視覺文字、卡片描述和製程模式描述。
- `.metric` 透過 `font-variant-numeric: tabular-nums` 啟用等寬數字掃描。

## 表面語言
- 深色面板使用 `--line` 邊框進行分隔。
- 軟性內部底線使用 `--soft` 以減少視覺雜訊。
- 青色發光保留給作用中控制項、主視覺強調、即時工作區識別和時間軸圓點。
- 綠色和紅色與加/減符號配對，因此其意涵不僅僅依賴顏色。

Kiro 提示詞：

分析入口網站 HTML CSS 並建立一份設計 Token 報告。解釋每個根變數、面板顏色、邊框、陰影、字型系列、指標類別、正/負狀態、頁籤狀態和 SVG 圖表類別的視覺目的。為 React 開發人員保持報告的實作導向。

預期結果： 開發人員可以在變更原始視覺系統之前先對其進行描述。

進階實驗室 2 — 將分層背景重構為組件

目標： 將入口網站檔案的網格與發光背景隔離到一個具名的 React 外殼類別中，以便對其進行測試和重複使用。

建立 src/components/GraphicWorkspaceShell.tsx：

import type { ReactNode } from 'react';

export function GraphicWorkspaceShell({ children }: { children: ReactNode }) {
  return (
    <main className="page graphic-workspace" id="top">
      <section className="shell graphic-portal-shell">{children}</section>
    </main>
  );
}

建立 src/styles/graphic-background.css：

.graphic-workspace {
  min-height: 100vh;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 8% 0, rgba(56,189,248,.19), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(49,196,141,.13), transparent 28%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.graphic-portal-shell {
  max-width: 1440px;
  border: 1px solid #315875;
  background: rgba(4,14,23,.96);
  box-shadow: 0 26px 90px rgba(0,20,36,.72);
  overflow: hidden;
}

圖形邏輯： 前兩個漸層建立了網格。接下來的兩個放射狀漸層建立了具有氛圍深度的青色和綠色。最後一個顏色層錨定了深色自動化環境。

Kiro 提示詞：

將入口網站 HTML 內文背景和外殼框架提取到具名的 React/CSS 外殼類別中。保留精確的漸層順序、background-size 行為、框架邊框、半透明外殼表面、1440px 最大寬度和方塊陰影。新增註釋以解釋每層的圖形角色。

預期結果： 背景變成一個可攜式的視覺基元，而不是未經文件的內文樣式。

進階實驗室 3 — 建立視覺階層標記圖層

目標： 新增一個僅限開發環境使用的圖層，用於標記視覺區域：topbar、hero、stats、tabs、portal panel、status tiles、controls、board、detail panels、runbook 和 footer。

建立 src/dev/VisualHierarchyOverlay.tsx：

const zones = [
  ['topbar', '命令 / 即時狀態'],
  ['hero', '入口網站識別資訊與服務晶片標籤'],
  ['stats', '自動化摘要指標'],
  ['nav', '入口網站頁籤導覽'],
  ['portal', '作用中內容面板'],
  ['market', 'Runtime/Tools/Policy/Eval 狀態磚'],
  ['controls', '搜尋與權重排序控制項'],
  ['board', '密集製程視窗表格'],
  ['detail', '展開的分析面板'],
  ['timeline', 'Runbook 時間軸'],
  ['footer', '邊界與導覽']
] as const;

export function VisualHierarchyOverlay() {
  return (
    <aside className="visual-audit-panel" aria-label="視覺階層稽核面板">
      <h3>圖形階層</h3>
      <ol>
        {zones.map(([selector, role]) => (
          <li key={selector}><code>.{selector}</code> — {role}</li>
        ))}
      </ol>
    </aside>
  );
}

新增開發環境 CSS：

.visual-audit-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 99;
  width: min(380px, calc(100vw - 24px));
  border: 1px solid var(--line);
  background: rgba(4, 16, 26, .94);
  color: var(--text);
  padding: 12px;
  font-family: var(--mono);
  font-size: 11px;
}

預期結果： 開發人員學會將頁面視為視覺區域的階層結構，而不僅僅是組件清單。

進階實驗室 4 — 響應式視覺行為稽核

目標： 驗證 HTML 斷點在入口網站變更圖形圖案時，是否仍保留視覺意涵。

建立 docs/responsive-graphic-audit.md :

# 工廠自動化入口網站 響應式圖形稽核

## 桌上型電腦檢視 (Desktop)
- 看板標頭列清晰可見。
- 十欄網格支援自動化單元比較。
- 主視覺區塊使用雙欄組合。
- 總覽/runtime/工具/專家卡片在適用的地方使用三欄網格。
- Runtime/Tools/Policy/Eval 狀態磚使用四欄。
- 頁尾使用雙欄版面配置，右側帶有呼籲字句（CTA）。

## 平板電腦檢視 (Tablet)，最大寬度 1120px
- 主視覺、卡片網格和圖表網格收合為單欄。
- 統計數據變為雙欄。
- 狀態磚變為雙欄。
- 看板標頭隱藏，且每列公開行動裝置標籤。
- 指標網格變為雙欄。
- 分析按鈕展開至全寬。

## 手機檢視 (Phone)，最大寬度 560px
- 頁面邊距縮小。
- 狀態文字和品牌副標題隱藏以保護空間。
- 統計數據和狀態磚使用單欄卡片。
- 排序按鈕變為雙欄網格。
- 頁尾 CTA 堆疊在邊界說明下方。
- 指標網格變為單欄。

Kiro 提示詞：

從入口網站 HTML 建立一個響應式圖形稽核。針對每個斷點，記錄哪些視覺結構發生了變化、為什麼該變化能保護可讀性，以及回歸測試應該驗證什麼。

預期結果： 響應式設計被視為圖形行為，而不僅僅是 CSS 機制。

進階實驗室 5 — 入口網站外觀的視覺回歸檢查清單

目標： 建立一個開發人員在接受 UI 重構前可以使用的檢查清單。

建立 docs/html-look-regression-checklist.md：

# 工廠自動化入口網站 外觀回歸檢查清單

## 必須保留
- 帶有青色和綠色發光層的深色網格內文背景。
- 入口網站外殼邊框、最大寬度、半透明背景和深層陰影。
- 帶有 AWS 標誌、綠色即時點、品牌名稱和工作流副標題的固定置頂列。
- 帶有青色次要文字行的高對比度大型主視覺標題。
- 具有正常和熱點（Hot）狀態的服務晶片標籤。
- 邊界晶片標籤：NO EQUIPMENT COMMANDS, EVIDENCE FIRST, BOUNDED MEMORY, HUMAN REVIEW。
- 六個帶有正確標籤和數值的摘要統計數據。
- 具有作用中狀態和懸停（Hover）狀態的頁籤導覽。
- Overview、Runtime、Tools、Governed Workflows、Process Windows 和 Runbook 面板。
- 使用等寬數字的密集指標排版。
- 帶有加號和綠色的正值。
- 帶有減號和紅色的負值。
- 看板列分隔線和軟性內部單元格分隔線。
- 當標頭列消失時顯示行動裝置標籤。
- 用於火花線、索引路徑、漂移吃水線和每日差值直方圖的 SVG 圖表表面。
- 頁尾邊界的可見性。

## 絕不可引入
- 自主設備控制操作項。
- 隱藏的策略、記憶體、可觀測性或評估邊界。
- 缺乏文字符號或標籤的純顏色意涵。
- 會隱藏頁尾邊界或分析按鈕的斷點行為。

Kiro 提示詞：

將 React UI 與入口網站 HTML 圖形系統進行比較。產生一個涵蓋背景、外殼、置頂列、主視覺、晶片標籤、統計數據、頁籤、卡片、狀態磚、控制項、看板列、響應式標籤、詳細資訊面板、runbook、SVG 圖表和頁尾邊界的回歸檢查清單。

進階最終挑戰 — HTML 圖形精確度審查

詢問 Kiro：

針對 React UI 與最新工廠自動化入口網站 HTML 檔案進行圖形精確度審查。僅專注於視覺系統行為：背景層、入口網站外殼、顏色語意、字體排版、間距、階層、響應式斷點、密集製程視窗版面配置、頁籤狀態、焦點狀態、SVG 圖表表面和頁尾邊界可見性。產生一個按嚴重程度排序的差異清單。

進階圖形分析完成檢查清單

● [ ] 設計 Token 報告解釋了入口網站 HTML 視覺系統。

● [ ] 背景和入口網站外殼已提取到具名的可重複使用類別中。

● [ ] 視覺階層標記圖層文件化了頁面的圖形區域。

● [ ] 響應式稽核涵蓋了這兩個斷點層級。

● [ ] 回歸檢查清單保護了原始外觀和頁尾邊界。

● [ ] UI 審查確認未引入任何自主設備控制介面。