jim800121chen
3f0175f1a9
從 local-tool 複製出獨立的「visionA Agent」桌面應用（A3 純橋樑： tunnel client + 配對 UI + 設定，不開 HTTP port、不做本機裝置/推論 UI）。 Bundle ID 與 local-tool 不同（com.innovedus.visiona-agent vs visiona-local）， 雙 app 可共存。fork 後不主動 sync，需要時手動 cherry-pick。 Backend / Wails Go（AB1-AB13）： - internal/tunnel：6 狀態機（Idle/Connecting/Connected/Reconnecting/Failed/Stopped） + Pair/Unpair/Reconnect/Disconnect binding + ClientHooks event - internal/auth：encrypted file token store（AES-GCM + scrypt + machineID fallback salt + 13 tests） - internal/config：YAML validation + atomic write + 11 tests - internal/log：ring buffer + ExportLog 升級 zip - visionA-backend /api/pairing/exchange：SessionTokenStore + 17 new tests - 三平台 build 驗證（macOS DMG 160 MB / Windows EXE / Linux AppImage） - end-to-end 5 milestone 全綠（pairing → tunnel → forward → reuse 防護 → tunnel drop failover） Frontend / Next.js（AF1-AF7，沿用 visionA-frontend 基礎）： - AppShell + Header + TabNav（StatusView / PairView / SettingsView 三 tab） - ConnectionStatusBadge 5 種狀態 - TokenInput regex 驗證 + 7 種錯誤 + 0.5s auto-switch 到狀態頁 - 設定頁 4 區塊（含重新配對 AlertDialog） - agent-api.ts 封裝 Wails bindings（mock/real 雙實作）+ 90 tests Phase 0.7 review-driven fix（Round 2）： - A1 Session fixation 防護（RotateSessionID） - A3 mock pairing 預設改 false（必須明確 opt-in）+ startup log - A4 Pair 失敗後 state 清理矩陣（exchange/Save/Start fail 各自終態） - A5 Pair/Unpair/Reconnect lifecycleMu + 50 goroutine race test - F1 重新配對次按鈕 / F2 PairView Esc cancel / F3 Wails BrowserOpenURL / F4 Settings draft 持久 + 未儲存 badge 驗證：agent backend go test -race -count=3 ./... 4 packages 全綠 / agent frontend pnpm test 119 tests 全綠 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* AgentApp — visionA Agent 的單一 SPA 入口（三 tab in-place 切換）
|
||
*
|
||
* 架構決策（見 TDD §3 與 spec §3）：
|
||
* - 不使用 Next.js routing：三個 tab（狀態 / 配對 / 設定）由 Radix Tabs 管理
|
||
* client state，切換即時無載入延遲，符合「桌面 utility」體驗預期
|
||
* - 首次開啟停在狀態頁（spec §3.2）
|
||
*
|
||
* AF3-AF5 更新：
|
||
* - 從 `defaultValue`（uncontrolled）改為 `value`/`onValueChange`（controlled），
|
||
* 以支援 StatusView / PairView 透過 CustomEvent `agent:switch-tab` 程式化切換 tab。
|
||
* 例如：配對成功後 pair-view 要自動切回 status，未配對時 status-view 的 CTA 要切到 pair。
|
||
* - 監聽 `agent:switch-tab` CustomEvent，收到時更新 state（單向資料流：view → event → page）。
|
||
*
|
||
* 檔名維持 `page.tsx`（Next.js App Router 慣例），但元件名 `AgentApp` 反映其角色。
|
||
*/
|
||
|
||
import { useEffect, useState } from "react";
|
||
|
||
import { AppShell } from "@/components/layout/app-shell";
|
||
import { TabNav, type AgentTabValue } from "@/components/layout/tab-nav";
|
||
import { Tabs, TabsContent } from "@/components/ui/tabs";
|
||
import { PairView } from "@/views/pair-view";
|
||
import { SettingsView } from "@/views/settings-view";
|
||
import { AGENT_SWITCH_TAB_EVENT, StatusView } from "@/views/status-view";
|
||
|
||
export default function AgentApp() {
|
||
const [tab, setTab] = useState<AgentTabValue>("status");
|
||
|
||
useEffect(() => {
|
||
// 監聽 view 發出的程式化切 tab 請求（例：pair-view 配對成功後 → 切 status）
|
||
function handleSwitch(e: Event) {
|
||
const detail = (e as CustomEvent<{ value: string }>).detail;
|
||
if (!detail?.value) return;
|
||
// 收斂成 AgentTabValue，避免外部事件傳入未知字串
|
||
if (detail.value === "status" || detail.value === "pair" || detail.value === "settings") {
|
||
setTab(detail.value);
|
||
}
|
||
}
|
||
|
||
window.addEventListener(AGENT_SWITCH_TAB_EVENT, handleSwitch);
|
||
return () => window.removeEventListener(AGENT_SWITCH_TAB_EVENT, handleSwitch);
|
||
}, []);
|
||
|
||
return (
|
||
<AppShell>
|
||
{/*
|
||
Tabs 控制端（controlled）：
|
||
- value / onValueChange — 讓 CustomEvent 可以程式化切換
|
||
- 水平 padding 用 px-4（與 Header px-4 對齊），top padding 給 Tab 一點呼吸空間
|
||
- max-w-2xl + mx-auto — spec §4.5 指示「大螢幕不會過寬」，內容收斂在 672px
|
||
*/}
|
||
<Tabs
|
||
value={tab}
|
||
onValueChange={(v) => setTab(v as AgentTabValue)}
|
||
className="mx-auto w-full max-w-2xl px-4 py-3"
|
||
data-testid="agent-tabs"
|
||
>
|
||
<TabNav />
|
||
<TabsContent value="status">
|
||
<StatusView />
|
||
</TabsContent>
|
||
<TabsContent value="pair">
|
||
<PairView />
|
||
</TabsContent>
|
||
<TabsContent value="settings">
|
||
<SettingsView />
|
||
</TabsContent>
|
||
</Tabs>
|
||
</AppShell>
|
||
);
|
||
}
|