feat(workbench): group live presentation steps into expandable categories

Group adjacent live display steps into category menus with merged snapshots, original-step submenus and scoped playback.

The submenu exposes the latest raw step, so explicit selections must remain pinned. Locate failed and cancelled steps using the full group sequence, and prevent an exiting menu from dismissing a trigger-owned reopen. Regression tests reproduce these paths before the fixes.

Validation: lint, typecheck, 1178 unit tests and 10 focused browser cases passed; update the presentation history guide.

src/features/workbench/components/presentation-history-switcher.tsx

@@ -2,6 +2,9 @@ import { ChevronLeft, ChevronRight, Pause, Play, Radio } from "lucide-react";
 import { Button } from "@/shared/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui/select";
 import type { PresentationHistoryControls } from "../utils/presentation-view-history";
+import { groupAdjacentPresentationHistory } from "../utils/presentation-history-categories";
+
+import { PresentationHistoryMenu } from "./presentation-history-menu";
 
 const statusLabels = { running: "进行中", completed: "完成", error: "未完成", cancelled: "已取消" };
 
@@ -9,19 +12,28 @@ export function PresentationHistorySwitcher({
   entries,
   currentEntryId,
   selectedId,
+  mergedEntry,
+  mergedEntries,
   onSelect,
   playback
 }: PresentationHistoryControls) {
   const currentEntry = entries.find((entry) => entry.id === currentEntryId);
-  const available = entries.filter(
+  const playable = playback?.entries ?? (mergedEntries?.length ? mergedEntries : entries).filter((entry) => entry.status === "completed");
+  const grouped = entries.some((entry) => entry.taskId);
+  const available = grouped ? groupAdjacentPresentationHistory(entries).flatMap((group) => {
+    const view = mergedEntries?.find((entry) => entry.id === group.id)
+      ?? group.entries.slice().reverse().find((entry) => entry.status !== "running");
+    return view ? [{ id: view.id, stepIds: group.entries.map((entry) => entry.id) }] : [];
+  }) : entries.filter(
     (entry) => entry.status !== "running" && (entry.id !== currentEntryId || entry.id === selectedId)
-  );
+  ).map((entry) => ({ id: entry.id, stepIds: [entry.id] }));
   const index =
     selectedId === null
       ? available.length
-      : available.findIndex((entry) => entry.id === selectedId);
-  const playable = entries.filter((entry) => entry.status === "completed");
-  const progress = Math.max(0, playable.findIndex((entry) => entry.id === selectedId));
+      : available.findIndex((entry) => entry.id === selectedId ||
+        entry.stepIds.includes(selectedId));
+  const progress = selectedId === null ? Math.max(0, playable.length - 1)
+    : Math.max(0, playable.findIndex((entry) => entry.id === selectedId || entry.mergedStepIds?.includes(selectedId)));
   return (
     <div className="mt-2 min-w-0 space-y-1.5" role="group" aria-label="展示动作历史">
       <div className="flex min-w-0 items-center gap-1">
@@ -36,7 +48,10 @@ export function PresentationHistorySwitcher({
         >
           <ChevronLeft size={14} aria-hidden />
         </Button>
-        <Select
+        {entries.some((entry) => entry.taskId) ? (
+          <PresentationHistoryMenu entries={entries} currentEntryId={currentEntryId}
+            selectedId={selectedId} mergedEntry={mergedEntry} mergedEntries={mergedEntries} onSelect={onSelect} />
+        ) : <Select
           value={selectedId === null ? "current" : String(selectedId)}
           onValueChange={(value) => onSelect(value === "current" ? null : Number(value))}
         >
@@ -72,7 +87,7 @@ export function PresentationHistorySwitcher({
                 )
               )}
           </SelectContent>
-        </Select>
+        </Select>}
         <Button
           type="button"
           variant="ghost"
@@ -106,12 +121,12 @@ export function PresentationHistorySwitcher({
             {playback.playing ? <Pause size={14} aria-hidden /> : <Play size={14} aria-hidden />}
           </Button>
           <input type="range" aria-label="历史播放进度" className="h-8 w-0 min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-default"
-            min={0} max={Math.max(0, playable.length - 1)} step={1} value={selectedId === null ? Math.max(0, playable.length - 1) : progress}
+            min={0} max={Math.max(0, playable.length - 1)} step={1} value={progress}
             disabled={playable.length < 2}
             aria-valuetext={selectedId === null ? "当前最新结果" : `第 ${progress + 1} 个，共 ${playable.length} 个结果`}
             onChange={(event) => { const entry = playable[Number(event.target.value)]; if (entry) playback.onSeek(entry.id); }} />
           <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground" aria-label="历史播放位置">
-            {selectedId === null ? playable.length : playable.length ? progress + 1 : 0}/{playable.length}
+            {playable.length ? progress + 1 : 0}/{playable.length}
           </span>
           <Select value={String(playback.speed)} onValueChange={(value) => playback.onSpeedChange(Number(value))}>
             <SelectTrigger aria-label="历史播放速度"