# Frontend Redesign — Tasks

> 進度來源：本檔。完成一項立刻 `[x]`，不批次。
> 本 SDD 建立於 2026-04-23；richblack 尚未下令動工，**所有 task 預設 `[ ]`**。

---

## Phase 0 — SDD 建立（本次）

- [x] 取得 Claude Design bundle，歸檔至 `design-source/`
- [x] 撰寫 `requirements.md`
- [x] 撰寫 `design.md`
- [x] 撰寫 `tasks.md`（本檔）
- [ ] richblack review + 認可 → 開 Phase 1

**等 richblack 明確說「開始動工」之前，不觸 `landing/` 任何檔案。**

---

## Phase 1 — Tokens + Shell（無外部 API 依賴）

- [ ] 1.1 建 `landing/app/design-tokens.css`，抄 design-source CSS :root 變數
- [ ] 1.2 更新 `landing/app/globals.css`：`@import './design-tokens.css'`，`@theme inline` 對應 token → Tailwind color
- [ ] 1.3 `layout.tsx` 引入 `next/font/google` 的 Inter + JetBrains Mono；body bg 改 `var(--bg)`
- [ ] 1.4 建 `landing/components/shell/Icon.tsx`（港設計稿 primitives.jsx 的所有 icon）
- [ ] 1.5 建 `landing/components/shell/Logo.tsx`（SVG arc wordmark）
- [ ] 1.6 建 `landing/components/shell/TopNav.tsx`
- [ ] 1.7 建 `landing/components/shell/Footer.tsx`
- [ ] 1.8 建 `landing/components/shell/Sidebar.tsx`（含頭像、項目清單、登出按鈕）
- [ ] 1.9 建 `landing/components/primitives/Button.tsx`（variants: primary / secondary / ghost / danger-ghost / sm / lg）
- [ ] 1.10 建 `landing/components/primitives/Pill.tsx`、`Toggle.tsx`
- [ ] 1.11 Lint + build pass

---

## Phase 2 — Landing（`/`）

- [ ] 2.1 Rewrite `app/page.tsx`，結構照 design-source/screens/Landing.jsx
- [ ] 2.2 Hero：heading / eyebrow / CTA / radial-grid bg（CSS only）
- [ ] 2.3 Paths 左卡：install tabs 元件（Client Component）+ terminal code blocks（字串改 `acr` 實際指令）
- [ ] 2.4 Paths 右卡：chat preview（靜態）
- [ ] 2.5 Feature strip（4 cell）
- [ ] 2.6 TopNav / Footer 接上
- [ ] 2.7 Responsive（≤ 768px: paths 單欄、hero h1 縮 1 級）
- [ ] 2.8 視覺比對 design-source/index.html（截圖對比 / DOM spec 檢查）

---

## Phase 3 — Auth（`/auth`，`/login` redirect）

- [ ] 3.1 建 `app/auth/page.tsx`（Client）
- [ ] 3.2 Sign in / Sign up tabs + OAuth buttons（Google / GitHub）接既有 `/auth/google/start` / `/auth/github/start`
- [ ] 3.3 Email / Password form — submit 顯示「OAuth only」提示（待後端支援）
- [ ] 3.4 `/login` 頁改為 `redirect('/auth')`
- [ ] 3.5 視覺比對 design-source/screens/Auth.jsx

---

## Phase 4 — API Keys（`/keys`）

- [ ] 4.1 建 `lib/api.ts` fetch wrapper
- [ ] 4.2 建 `lib/apiKeys.ts`（listKeys / createKey / patchKey / deleteKey）— 後端未實作時回 `[{ ...from /me }]` 的 fallback
- [ ] 4.3 建 `app/keys/page.tsx`：頂部 new-key-box（sessionStorage flag）、全表格
- [ ] 4.4 「Create new key」呼叫 `POST /api-keys`（後端未實作 → 顯示「coming soon」toast）
- [ ] 4.5 Toggle active / trash 接 PATCH / DELETE
- [ ] 4.6 middleware.ts matcher 加 `/keys/:path*`
- [ ] 4.7 原 `/dashboard` 頁的 Key 卡區塊移除，放提示「API Keys 已搬到 /keys」

---

## Phase 5 — Dashboard（`/dashboard`）

- [ ] 5.1 建 `lib/workflows.ts`、`lib/apps.ts`
- [ ] 5.2 Rewrite `app/dashboard/page.tsx`（保留 /me session 檢查）
- [ ] 5.3 Main head：breadcrumb / greeting / summary counters
- [ ] 5.4 Apps Grid + empty-state 卡（`/apps` 404 → 只顯示 empty-state）
- [ ] 5.5 Workflows Table（`/workflows` 404 → 顯示「no workflows — acr push」CTA）
- [ ] 5.6 Sidebar 接真實 user（email / display_name）、登出按鈕接 `/auth/logout`
- [ ] 5.7 視覺比對 design-source/screens/Dashboard.jsx

---

## Phase 6 — Workflow Viewer（`/workflows/[name]`）

- [ ] 6.1 建 `app/workflows/[name]/page.tsx`（Client）
- [ ] 6.2 Topbar：back / logo / breadcrumb / title / saved indicator / share / export / edit-in-claude
- [ ] 6.3 `<Canvas>`：SVG defs + 節點定位 + bezier edges；資料從 `GET /workflows/:name`
- [ ] 6.4 Auto-layout：topological depth → columns，同 depth 平均分配 y
- [ ] 6.5 NodeCard 點擊 → DetailPanel
- [ ] 6.6 DetailPanel：input / output schema、triplet（disabled）、last run stats（可選）
- [ ] 6.7 Export YAML：`GET /workflows/:name/yaml` → blob download
- [ ] 6.8 Minimap（純顯示）、ZoomControls（簡單 scale）
- [ ] 6.9 middleware.ts matcher 加 `/workflows/:path*`

---

## Phase 7 — 清理 + 收尾

- [ ] 7.1 刪除舊 `/dashboard` 不再用的 code（rotate/revoke 若全搬到 /keys）
- [ ] 7.2 Grep 檢查：除 `cypher.arcrun.dev` 外無任何第三方 API host
- [ ] 7.3 Grep 檢查：無 `mock` / `fixture` / 硬編的假資料陣列（`app-empty` 的字串常數除外）
- [ ] 7.4 Grep 檢查：無新增 npm 依賴（`git diff landing/package.json` 應只改版本，不加條目）
- [ ] 7.5 `pnpm build` 通過；`next-on-pages` 通過
- [ ] 7.6 local `pnpm dev` 手工巡覽 5 screen，每個截圖比對 design-source
- [ ] 7.7 更新 `.agents/specs/arcrun/arcrun.md`，加一段「CLI 1.2.0 搭配新 landing」之類的進度註記
- [ ] 7.8 richblack 認可 → 合併 / deploy

---

## 需要 cypher-executor 搭配的 endpoint（不屬於本 SDD）

若 richblack 決定新 endpoint 要和前端同 PR 做：

- [ ] 後端：`GET /workflows`
- [ ] 後端：`GET /workflows/:name` + `/yaml`
- [ ] 後端：`GET /apps`
- [ ] 後端：`GET /api-keys`、`POST /api-keys`、`PATCH /api-keys/:id`、`DELETE /api-keys/:id`

否則：以 empty state 呈現，封測也能運作。

---

## KBDB 整合（配合 matrix/kbdb/.agents/specs/arcrun-key-auth/）

Arcrun 用戶的 `ak_xxx` Key 同時可用於 KBDB（捆綁服務，自動開通）。
cypher-executor 需在以下時機呼叫 KBDB：

- [ ] 後端：OAuth callback 成功 → `POST /partners`（建立 KBDB partner 記錄）
- [ ] 後端：`PUT /me/api-key/rotate` → 舊 partner revoke + 建新 partner 記錄
- [ ] 後端：`DELETE /me/api-key` → KBDB partner revoke

詳細設計見 `matrix/kbdb/.agents/specs/arcrun-key-auth/design.md`。

---

## 目前狀態

- **進度**：Phase 0 已完成（4/5；最後一項等 richblack 認可）。
- **阻擋**：richblack 認可 + 「開始動工」指令。
- **未啟動**：Phase 1-7 全部 `[ ]`。