From 44b877318dddc6b82f55d1b244ac6b77216e42bc Mon Sep 17 00:00:00 2001
From: jim800121chen <jim800121.chen@gmail.com>
Date: Sun, 2 Aug 2026 03:38:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=80=8C=E9=96=8B=E5=A7=8B?=
 =?UTF-8?q?=E6=8E=A8=E8=AB=96=E3=80=8D=E6=8C=89=E9=88=95=E5=8F=AA=E5=9C=A8?=
 =?UTF-8?q?=20camera=20=E5=88=86=E9=A0=81=E9=A1=AF=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

「開始/停止推論」按鈕是 Camera 即時攝影機專用（打 /api/camera/start），
但原本渲染在所有分頁共用頂部。影片/圖片/批次是「上傳即自動推論」
（media-tab useInferenceStream=uploaded），不需此按鈕，顯示會誤導使用者
以為要先按開始推論。

用 activeTab === "camera" 條件渲染，非 camera 分頁隱藏。純顯示層改動，
handleStart/handleStop/isRunning/disabled 邏輯完全未動；與 handleTabChange
「切走即停」語意一致（切回 camera 時 isRunning 已 false、無殘留）。

reviewer 通過（0C/0M/0m）。tsc/eslint/build/14 test 綠 + 新增 1 測試驗
「按鈕只在 camera 顯示、切走隱藏、切回重現」。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../[deviceId]/workspace-client.test.tsx      | 14 +++++++++
 .../workspace/[deviceId]/workspace-client.tsx | 29 +++++++++++--------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.test.tsx b/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.test.tsx
index 167984b..2df0754 100644
--- a/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.test.tsx
+++ b/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.test.tsx
@@ -234,6 +234,20 @@ describe("WorkspaceClient — 切 tab 時 camera 串流 / WS 正確關閉（S-1
     expect(lastCameraWsEnabled()).toBe(false);
   });
 
+  it("開始推論按鈕只在 camera tab 顯示，切到 image/video/batch 隱藏", async () => {
+    renderClient();
+    // camera tab（預設）：按鈕在
+    expect(screen.getByText("開始推論")).toBeInTheDocument();
+
+    // 切到影片：按鈕隱藏（上傳即自動推論，不需此按鈕）
+    await switchTab("影片");
+    expect(screen.queryByText("開始推論")).not.toBeInTheDocument();
+
+    // 切回 camera：按鈕重新出現
+    await switchTab("Camera");
+    expect(screen.getByText("開始推論")).toBeInTheDocument();
+  });
+
   it("切到 image tab 後 camera WS 保持 false（媒體 tab 有自己的 WS，兩者互斥）", async () => {
     post.mockResolvedValue({ streamUrl: "/api/camera/stream", sourceType: "camera" });
     renderClient();
diff --git a/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.tsx b/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.tsx
index 535460b..9bab408 100644
--- a/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.tsx
+++ b/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.tsx
@@ -276,18 +276,23 @@ export function WorkspaceClient({ deviceId }: WorkspaceClientProps) {
             />
           )}
         </div>
-        <div className="flex gap-2">
-          {isRunning ? (
-            <Button variant="destructive" onClick={handleStop} disabled={busy}>
-              {t("workspace.inference.stop")}
-            </Button>
-          ) : (
-            // WP-C：serial 為空無法路由 → disable（原因見下方 no-serial banner）
-            <Button onClick={handleStart} disabled={busy || !isOnline || !hasSerial}>
-              {t("workspace.inference.start")}
-            </Button>
-          )}
-        </div>
+        {/* 開始/停止推論按鈕為 camera tab 專用（打 /api/camera/start 啟動攝影機串流）。
+            image/video/batch 分頁是「上傳即自動推論」，不需要此按鈕 → 僅在 camera tab 顯示。
+            隱藏純為 UI；camera 的 start/stop 邏輯與 handleTabChange 切離時的停止行為不變。 */}
+        {activeTab === "camera" && (
+          <div className="flex gap-2">
+            {isRunning ? (
+              <Button variant="destructive" onClick={handleStop} disabled={busy}>
+                {t("workspace.inference.stop")}
+              </Button>
+            ) : (
+              // WP-C：serial 為空無法路由 → disable（原因見下方 no-serial banner）
+              <Button onClick={handleStart} disabled={busy || !isOnline || !hasSerial}>
+                {t("workspace.inference.start")}
+              </Button>
+            )}
+          </div>
+        )}
       </div>
 
       {/* WP-C（ADR-018）：serial 為空 → 無法路由到 local agent，說明原因與解法 */}