@tonyclaw/agent-inspector 3.0.14 → 3.0.16

package/src/components/ProxyViewer.tsx

@@ -1,6 +1,8 @@
 import {
   type ChangeEvent,
+  type CSSProperties,
   type JSX,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
   useCallback,
   useEffect,
@@ -26,6 +28,8 @@ import {
   FileJson,
   Gauge,
   Flag,
+  PanelRightClose,
+  PanelRightOpen,
   Plus,
   RefreshCw,
   Search,
@@ -1381,6 +1385,291 @@ function BrandHeader({
   );
 }
 
+type FloatingLogoPosition = {
+  x: number;
+  y: number;
+};
+
+type FloatingLogoDragState = {
+  pointerId: number;
+  offsetX: number;
+  offsetY: number;
+};
+
+type FloatingLogoEdge = "left" | "right" | "top" | "bottom";
+
+const FLOATING_LOGO_SIZE = 56;
+const FLOATING_LOGO_MARGIN = 14;
+const FLOATING_LOGO_MIN_DRIFT_MS = 5200;
+const FLOATING_LOGO_DRIFT_WINDOW_MS = 2400;
+const FLOATING_LOGO_MIN_STEP = 72;
+const FLOATING_LOGO_MAX_STEP = 156;
+const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
+
+function readStoredDetailsPanelCollapsed(): boolean {
+  if (typeof window === "undefined") return true;
+  const stored = window.localStorage.getItem(DETAILS_PANEL_COLLAPSED_STORAGE_KEY);
+  return stored === null || stored === "1";
+}
+
+function clampFloatingLogoPosition(position: FloatingLogoPosition): FloatingLogoPosition {
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  return {
+    x: Math.min(Math.max(position.x, FLOATING_LOGO_MARGIN), maxX),
+    y: Math.min(Math.max(position.y, FLOATING_LOGO_MARGIN), maxY),
+  };
+}
+
+function snapFloatingLogoToEdge(position: FloatingLogoPosition): FloatingLogoPosition {
+  const clamped = clampFloatingLogoPosition(position);
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const leftDistance = clamped.x - FLOATING_LOGO_MARGIN;
+  const rightDistance = maxX - clamped.x;
+  const topDistance = clamped.y - FLOATING_LOGO_MARGIN;
+  const bottomDistance = maxY - clamped.y;
+  const nearestDistance = Math.min(leftDistance, rightDistance, topDistance, bottomDistance);
+
+  if (nearestDistance === leftDistance) return { x: FLOATING_LOGO_MARGIN, y: clamped.y };
+  if (nearestDistance === rightDistance) return { x: maxX, y: clamped.y };
+  if (nearestDistance === topDistance) return { x: clamped.x, y: FLOATING_LOGO_MARGIN };
+  return { x: clamped.x, y: maxY };
+}
+
+function randomFloatingLogoEdgePosition(): FloatingLogoPosition {
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const randomX = FLOATING_LOGO_MARGIN + Math.random() * (maxX - FLOATING_LOGO_MARGIN);
+  const randomY = FLOATING_LOGO_MARGIN + Math.random() * (maxY - FLOATING_LOGO_MARGIN);
+  const edgeIndex = Math.floor(Math.random() * 4);
+
+  switch (edgeIndex) {
+    case 0:
+      return { x: FLOATING_LOGO_MARGIN, y: randomY };
+    case 1:
+      return { x: maxX, y: randomY };
+    case 2:
+      return { x: randomX, y: FLOATING_LOGO_MARGIN };
+    case 3:
+      return { x: randomX, y: maxY };
+    default:
+      return { x: maxX, y: FLOATING_LOGO_MARGIN };
+  }
+}
+
+function nearestFloatingLogoEdge(position: FloatingLogoPosition): FloatingLogoEdge {
+  const clamped = clampFloatingLogoPosition(position);
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const distances: { edge: FloatingLogoEdge; distance: number }[] = [
+    { edge: "left", distance: clamped.x - FLOATING_LOGO_MARGIN },
+    { edge: "right", distance: maxX - clamped.x },
+    { edge: "top", distance: clamped.y - FLOATING_LOGO_MARGIN },
+    { edge: "bottom", distance: maxY - clamped.y },
+  ];
+  return distances.reduce((best, current) => (current.distance < best.distance ? current : best))
+    .edge;
+}
+
+function nextFloatingLogoWalkingPosition(position: FloatingLogoPosition): FloatingLogoPosition {
+  const clamped = snapFloatingLogoToEdge(position);
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
+  );
+  const step =
+    FLOATING_LOGO_MIN_STEP + Math.random() * (FLOATING_LOGO_MAX_STEP - FLOATING_LOGO_MIN_STEP);
+  const direction = Math.random() > 0.5 ? 1 : -1;
+  const edge = nearestFloatingLogoEdge(clamped);
+
+  switch (edge) {
+    case "left": {
+      const nextY = clamped.y + step * direction;
+      if (nextY <= FLOATING_LOGO_MARGIN)
+        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
+      if (nextY >= maxY) return { x: FLOATING_LOGO_MARGIN, y: maxY };
+      return { x: FLOATING_LOGO_MARGIN, y: nextY };
+    }
+    case "right": {
+      const nextY = clamped.y + step * direction;
+      if (nextY <= FLOATING_LOGO_MARGIN) return { x: maxX, y: FLOATING_LOGO_MARGIN };
+      if (nextY >= maxY) return { x: maxX, y: maxY };
+      return { x: maxX, y: nextY };
+    }
+    case "top": {
+      const nextX = clamped.x + step * direction;
+      if (nextX <= FLOATING_LOGO_MARGIN)
+        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
+      if (nextX >= maxX) return { x: maxX, y: FLOATING_LOGO_MARGIN };
+      return { x: nextX, y: FLOATING_LOGO_MARGIN };
+    }
+    case "bottom": {
+      const nextX = clamped.x + step * direction;
+      if (nextX <= FLOATING_LOGO_MARGIN) return { x: FLOATING_LOGO_MARGIN, y: maxY };
+      if (nextX >= maxX) return { x: maxX, y: maxY };
+      return { x: nextX, y: maxY };
+    }
+  }
+}
+
+function FloatingInspectorLogo(): JSX.Element {
+  const [position, setPosition] = useState<FloatingLogoPosition>({
+    x: FLOATING_LOGO_MARGIN,
+    y: FLOATING_LOGO_MARGIN,
+  });
+  const [motionTick, setMotionTick] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const dragStateRef = useRef<FloatingLogoDragState | null>(null);
+
+  useEffect(() => {
+    setPosition(randomFloatingLogoEdgePosition());
+  }, []);
+
+  useEffect(() => {
+    if (dragging) return undefined;
+    let timeoutId: number | null = null;
+
+    const scheduleDrift = () => {
+      const delay = FLOATING_LOGO_MIN_DRIFT_MS + Math.random() * FLOATING_LOGO_DRIFT_WINDOW_MS;
+      timeoutId = window.setTimeout(() => {
+        setMotionTick((current) => current + 1);
+        setPosition((current) => nextFloatingLogoWalkingPosition(current));
+        scheduleDrift();
+      }, delay);
+    };
+
+    scheduleDrift();
+    return () => {
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [dragging]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setPosition((current) => snapFloatingLogoToEdge(current));
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  }, []);
+
+  const handlePointerMove = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    const dragState = dragStateRef.current;
+    if (dragState === null || dragState.pointerId !== event.pointerId) return;
+    setPosition(
+      clampFloatingLogoPosition({
+        x: event.clientX - dragState.offsetX,
+        y: event.clientY - dragState.offsetY,
+      }),
+    );
+  }, []);
+
+  const handlePointerUp = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    const dragState = dragStateRef.current;
+    if (dragState === null || dragState.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    dragStateRef.current = null;
+    setDragging(false);
+    setPosition((current) => snapFloatingLogoToEdge(current));
+  }, []);
+
+  const style = useMemo<CSSProperties>(
+    () => ({
+      transform: `translate3d(${position.x}px, ${position.y}px, 0) rotate(${
+        motionTick % 2 === 0 ? "-4deg" : "5deg"
+      }) scale(${dragging ? "1.08" : "1"})`,
+      transition: dragging ? "none" : "transform 4800ms cubic-bezier(0.33, 1, 0.68, 1)",
+      touchAction: "none",
+    }),
+    [dragging, motionTick, position.x, position.y],
+  );
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "fixed left-0 top-0 z-40 flex size-14 items-center justify-center rounded-full bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_24px_rgba(245,158,11,0.36)] focus-visible:ring-1 focus-visible:ring-amber-300/55",
+        dragging ? "cursor-grabbing" : "cursor-grab",
+      )}
+      style={style}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      aria-label="Floating Inspector logo"
+      title="Drag Inspector logo"
+    >
+      <span
+        className={cn(
+          "relative flex size-12 items-center justify-center",
+          !dragging && "floating-crab-body",
+        )}
+        aria-hidden="true"
+      >
+        <CrabLogo className="relative z-10 size-11 text-amber-500 drop-shadow-[0_0_15px_rgba(245,158,11,0.30)]" />
+        <span className="pointer-events-none absolute inset-x-0 bottom-0 z-0 flex items-end justify-center gap-1 text-amber-400/80">
+          {[0, 1, 2, 3, 4, 5].map((leg) => (
+            <span
+              key={leg}
+              className={cn(
+                "floating-crab-leg h-2 w-0.5 rounded-full bg-current shadow-[0_0_7px_rgba(245,158,11,0.24)]",
+                leg < 3 ? "floating-crab-leg-left" : "floating-crab-leg-right",
+                dragging && "animate-none",
+              )}
+              style={{
+                animationDelay: `${leg % 2 === 0 ? 0 : 180}ms`,
+              }}
+            />
+          ))}
+        </span>
+      </span>
+    </button>
+  );
+}
+
 function SessionContextLogButton({ label, logId }: { label: string; logId: number }): JSX.Element {
   return (
     <button
@@ -1697,8 +1986,8 @@ export type ProxyViewerProps = {
   onSessionChange: (session: string) => void;
   onModelChange: (model: string) => void;
   onClearAll: () => void;
-  /** Delete visible logs from persisted storage when the user explicitly confirms it. */
-  onDeleteCurrentView?: (ids: number[]) => Promise<void>;
+  /** Delete persisted storage for the selected session, or all storage from the all-sessions view. */
+  onDeleteCurrentView?: () => Promise<void>;
   /** Reload the selected/pinned session from stored logs without requiring a page refresh. */
   onReloadSession?: () => void;
   /** Clear only the logs whose ids are passed. Called by the per-group
@@ -1765,8 +2054,9 @@ export function ProxyViewer({
   const [importStatus, setImportStatus] = useState<string | null>(null);
   const [importError, setImportError] = useState<string | null>(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [deleteStoredData, setDeleteStoredData] = useState(false);
   const [deletingCurrentView, setDeletingCurrentView] = useState(false);
+  const [detailsPanelCollapsed, setDetailsPanelCollapsed] = useState(true);
+  const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = useState(false);
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
     "hidden",
@@ -1807,6 +2097,19 @@ export function ProxyViewer({
     };
   }, []);
 
+  useEffect(() => {
+    setDetailsPanelCollapsed(readStoredDetailsPanelCollapsed());
+    setDetailsPanelStorageLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    if (!detailsPanelStorageLoaded) return;
+    window.localStorage.setItem(
+      DETAILS_PANEL_COLLAPSED_STORAGE_KEY,
+      detailsPanelCollapsed ? "1" : "0",
+    );
+  }, [detailsPanelCollapsed, detailsPanelStorageLoaded]);
+
   useEffect(() => {
     if (pinnedSessionId === undefined) {
       document.title = "Agent Inspector";
@@ -1898,7 +2201,6 @@ export function ProxyViewer({
   }, [cancelTransientTasks, onClearAll]);
 
   const handleRequestDeleteCurrentView = useCallback(() => {
-    setDeleteStoredData(false);
     setDeleteDialogOpen(true);
   }, []);
 
@@ -1908,14 +2210,10 @@ export function ProxyViewer({
     setImportError(null);
     setComparePair(null);
 
-    if (!deleteStoredData || onDeleteCurrentView === undefined) {
-      setDeleteDialogOpen(false);
-      onClearAll();
-      return;
-    }
+    if (onDeleteCurrentView === undefined) return;
 
     setDeletingCurrentView(true);
-    void onDeleteCurrentView(logs.map((log) => log.id))
+    void onDeleteCurrentView()
       .then(() => {
         setDeleteDialogOpen(false);
       })
@@ -1930,7 +2228,7 @@ export function ProxyViewer({
       .finally(() => {
         setDeletingCurrentView(false);
       });
-  }, [cancelTransientTasks, deleteStoredData, logs, onClearAll, onDeleteCurrentView, onNotify]);
+  }, [cancelTransientTasks, onDeleteCurrentView, onNotify]);
 
   const handleReloadCurrentSession = useCallback(() => {
     if (onReloadSession === undefined) return;
@@ -1945,6 +2243,10 @@ export function ProxyViewer({
     setComparePair(null);
   }, []);
 
+  const toggleDetailsPanelCollapsed = useCallback(() => {
+    setDetailsPanelCollapsed((value) => !value);
+  }, []);
+
   const groups = useMemo(() => groupLogsByConversation(logs), [logs]);
   const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(groups), [groups]);
   const sessionContextScope = useMemo(
@@ -1966,6 +2268,13 @@ export function ProxyViewer({
   const exportActionVisibility = getExportActionVisibility(captureMode, logs.length);
   const isPinnedSessionPage = pinnedSessionId !== undefined;
   const canClearCurrentView = logs.length > 0;
+  const canDeleteCurrentView =
+    onDeleteCurrentView !== undefined && (logs.length > 0 || selectedSession !== "__all__");
+  const deleteTargetLabel = selectedSession === "__all__" ? "all sessions" : "this session";
+  const deleteTargetDescription =
+    selectedSession === "__all__"
+      ? "Deletes every stored log, streaming chunk, and session archive entry across all sessions."
+      : "Deletes every stored log, streaming chunk, and session archive entry for this session, including history that is not currently loaded.";
   const reloadSessionLabel = logs.length === 0 ? "Load" : "Reload";
   const sessionInputValue = selectedSession === "__all__" ? "" : selectedSession;
   const sessionSelectValue =
@@ -2019,173 +2328,159 @@ export function ProxyViewer({
 
   return (
     <div className="bg-background min-h-screen w-full text-foreground">
-      <div className="grid min-h-screen w-full grid-cols-1 lg:grid-cols-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_360px]">
-        <aside className="bg-background/95 order-1 border-b border-white/[0.045] lg:sticky lg:top-0 lg:order-2 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055]">
-          <div className="space-y-4 p-4">
-            <BrandHeader
-              compact={true}
-              crabEntrancePhase={crabEntrancePhase}
-              currentSessionId={labSessionId}
-              logCount={logs.length}
-            />
+      <button
+        type="button"
+        onClick={toggleDetailsPanelCollapsed}
+        className={cn(
+          "group fixed top-1/2 right-3 z-40 inline-flex h-14 w-7 -translate-y-1/2 items-center justify-center rounded-l-md border border-white/[0.08] bg-background/90 text-muted-foreground shadow-[0_12px_34px_rgba(0,0,0,0.26),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-[right,background-color,color,border-color] duration-200 hover:border-white/[0.16] hover:bg-white/[0.07] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+          detailsPanelCollapsed ? "right-3" : "lg:right-[326px] xl:right-[346px]",
+        )}
+        aria-label={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
+        title={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
+      >
+        <span className="absolute left-1 top-2 bottom-2 w-px rounded-full bg-white/[0.16] transition-colors group-hover:bg-white/[0.28]" />
+        {detailsPanelCollapsed ? (
+          <PanelRightOpen className="size-3.5" />
+        ) : (
+          <PanelRightClose className="size-3.5" />
+        )}
+      </button>
+      {detailsPanelCollapsed && <FloatingInspectorLogo />}
+      <div
+        className={cn(
+          "grid min-h-screen w-full grid-cols-1",
+          detailsPanelCollapsed
+            ? "lg:grid-cols-[minmax(0,1fr)]"
+            : "lg:grid-cols-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_360px]",
+        )}
+      >
+        {!detailsPanelCollapsed && (
+          <aside className="bg-background/95 order-1 border-b border-white/[0.045] lg:sticky lg:top-0 lg:order-2 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055]">
+            <div className="space-y-4 p-4">
+              <BrandHeader
+                compact={true}
+                crabEntrancePhase={crabEntrancePhase}
+                currentSessionId={labSessionId}
+                logCount={logs.length}
+              />
 
-            <SidebarPanel label="Session">
-              <div className="grid grid-cols-2 gap-2">
-                <SidebarMetric label="Requests" value={logs.length} />
-                <SidebarMetric label="Sessions" value={sessions.length} />
-                <SidebarMetric
-                  label="Input"
-                  value={formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
-                />
-                <SidebarMetric
-                  label="Output"
-                  value={formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
-                />
-              </div>
-              <div className="mt-2 grid grid-cols-2 gap-2">
-                {onReloadSession !== undefined && (
-                  <button
-                    type="button"
-                    onClick={handleReloadCurrentSession}
-                    disabled={isLoading}
-                    className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
-                    title="Load stored logs for this session"
-                  >
-                    <RefreshCw className={cn("size-3.5", isLoading && "animate-spin")} />
-                    <span>{reloadSessionLabel}</span>
-                  </button>
+              <SidebarPanel label="Session">
+                <div className="grid grid-cols-2 gap-2">
+                  <SidebarMetric label="Requests" value={logs.length} />
+                  <SidebarMetric label="Sessions" value={sessions.length} />
+                  <SidebarMetric
+                    label="Input"
+                    value={formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
+                  />
+                  <SidebarMetric
+                    label="Output"
+                    value={formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
+                  />
+                </div>
+                {sessionLoadProgress !== undefined && (
+                  <div className="mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+                    <SessionLoadProgressBar progress={sessionLoadProgress} />
+                  </div>
                 )}
-                <button
-                  type="button"
-                  onClick={handleClearCurrentView}
-                  disabled={!canClearCurrentView}
-                  className={cn(
-                    "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                    onReloadSession === undefined &&
-                      onDeleteCurrentView === undefined &&
-                      "col-span-2",
-                  )}
-                  title="Clear the current view. Stored logs remain reloadable."
-                >
-                  <Trash2 className="size-3.5" />
-                  <span>Clear</span>
-                </button>
-                {onDeleteCurrentView !== undefined && (
-                  <button
-                    type="button"
-                    onClick={handleRequestDeleteCurrentView}
-                    disabled={!canClearCurrentView || deletingCurrentView}
-                    className="bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50"
-                    title="Choose whether to delete stored data for the current view."
+              </SidebarPanel>
+
+              <SidebarPanel label="Workspace">
+                <div className="bg-black/20 rounded-md px-3 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]">
+                  <div
+                    className="truncate font-mono text-xs font-semibold text-cyan-100"
+                    title={activeScopeLabel}
                   >
-                    <Trash2 className="size-3.5" />
-                    <span>Delete</span>
-                  </button>
-                )}
-              </div>
-              {sessionLoadProgress !== undefined && (
-                <div className="mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-                  <SessionLoadProgressBar progress={sessionLoadProgress} />
+                    {activeScopeLabel}
+                  </div>
+                  <div className="mt-1 text-[11px] text-muted-foreground">
+                    {isPinnedSessionPage ? "Session workspace" : "Live workspace"}
+                  </div>
                 </div>
+              </SidebarPanel>
+
+              {hasSessionContext && sessionContextScope !== null && (
+                <SessionContextBar
+                  label={sessionContextScope.label}
+                  logs={sessionContextLogs}
+                  totalIn={sessionContextTotalIn}
+                  totalOut={sessionContextTotalOut}
+                  timeDisplayFormat={timeDisplayFormat}
+                  contextSummary={sessionContextSummary}
+                  showBackLink={sessionContextScope.showBackLink}
+                />
               )}
-            </SidebarPanel>
-
-            <SidebarPanel label="Workspace">
-              <div className="bg-black/20 rounded-md px-3 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]">
-                <div
-                  className="truncate font-mono text-xs font-semibold text-cyan-100"
-                  title={activeScopeLabel}
-                >
-                  {activeScopeLabel}
-                </div>
-                <div className="mt-1 text-[11px] text-muted-foreground">
-                  {isPinnedSessionPage ? "Session workspace" : "Live workspace"}
-                </div>
-              </div>
-            </SidebarPanel>
-
-            {hasSessionContext && sessionContextScope !== null && (
-              <SessionContextBar
-                label={sessionContextScope.label}
-                logs={sessionContextLogs}
-                totalIn={sessionContextTotalIn}
-                totalOut={sessionContextTotalOut}
-                timeDisplayFormat={timeDisplayFormat}
-                contextSummary={sessionContextSummary}
-                showBackLink={sessionContextScope.showBackLink}
-              />
-            )}
 
-            {hasSessionContext &&
-              pinnedSessionId !== undefined &&
-              sessionMemberships.length > 0 && (
-                <SessionMembershipPanel memberships={sessionMemberships} />
-              )}
+              {hasSessionContext &&
+                pinnedSessionId !== undefined &&
+                sessionMemberships.length > 0 && (
+                  <SessionMembershipPanel memberships={sessionMemberships} />
+                )}
 
-            <SidebarPanel label="Filters">
-              <div className="space-y-2">
-                {!hideSessionFilter && (
-                  <>
-                    <div className="relative">
-                      <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-                      <input
-                        type="search"
-                        value={sessionInputValue}
-                        onChange={handleSessionInputChange}
-                        placeholder="Paste session ID"
-                        className="bg-black/25 hover:bg-white/[0.045] focus-visible:ring-ring h-9 w-full rounded-md px-8 font-mono text-xs text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:font-sans placeholder:text-muted-foreground focus-visible:ring-1"
-                        aria-label="Filter by session ID"
-                        title="Filter by exact session ID"
-                      />
-                      {sessionInputValue !== "" && (
-                        <button
-                          type="button"
-                          onClick={() => onSessionChange("__all__")}
-                          className="absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground"
-                          aria-label="Clear session filter"
-                          title="Clear session filter"
-                        >
-                          <X className="size-3.5" />
-                        </button>
-                      )}
-                    </div>
-                    <Select value={sessionSelectValue} onValueChange={handleSessionSelectChange}>
-                      <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
-                        <SelectValue placeholder="All sessions" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="__all__">All sessions</SelectItem>
-                        {sessionSelectValue === "__typed__" && (
-                          <SelectItem value="__typed__">
-                            Typed: {truncateSessionId(selectedSession)}
-                          </SelectItem>
+              <SidebarPanel label="Filters">
+                <div className="space-y-2">
+                  {!hideSessionFilter && (
+                    <>
+                      <div className="relative">
+                        <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+                        <input
+                          type="search"
+                          value={sessionInputValue}
+                          onChange={handleSessionInputChange}
+                          placeholder="Paste session ID"
+                          className="bg-black/25 hover:bg-white/[0.045] focus-visible:ring-ring h-9 w-full rounded-md px-8 font-mono text-xs text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:font-sans placeholder:text-muted-foreground focus-visible:ring-1"
+                          aria-label="Filter by session ID"
+                          title="Filter by exact session ID"
+                        />
+                        {sessionInputValue !== "" && (
+                          <button
+                            type="button"
+                            onClick={() => onSessionChange("__all__")}
+                            className="absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground"
+                            aria-label="Clear session filter"
+                            title="Clear session filter"
+                          >
+                            <X className="size-3.5" />
+                          </button>
                         )}
-                        {sessions.map((s) => (
-                          <SelectItem key={s} value={s}>
-                            {truncateSessionId(s)}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </>
-                )}
-                <Select value={selectedModel} onValueChange={onModelChange}>
-                  <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
-                    <SelectValue placeholder="All models" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="__all__">All models</SelectItem>
-                    {models.map((m) => (
-                      <SelectItem key={m} value={m}>
-                        {m}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </SidebarPanel>
-          </div>
-        </aside>
+                      </div>
+                      <Select value={sessionSelectValue} onValueChange={handleSessionSelectChange}>
+                        <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
+                          <SelectValue placeholder="All sessions" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="__all__">All sessions</SelectItem>
+                          {sessionSelectValue === "__typed__" && (
+                            <SelectItem value="__typed__">
+                              Typed: {truncateSessionId(selectedSession)}
+                            </SelectItem>
+                          )}
+                          {sessions.map((s) => (
+                            <SelectItem key={s} value={s}>
+                              {truncateSessionId(s)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </>
+                  )}
+                  <Select value={selectedModel} onValueChange={onModelChange}>
+                    <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
+                      <SelectValue placeholder="All models" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__all__">All models</SelectItem>
+                      {models.map((m) => (
+                        <SelectItem key={m} value={m}>
+                          {m}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </SidebarPanel>
+            </div>
+          </aside>
+        )}
 
         <main className="order-2 min-w-0 lg:order-1">
           <div className="bg-background/95 shadow-[0_12px_36px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] sticky top-0 z-30 px-4 py-3 lg:px-5">
@@ -2289,9 +2584,9 @@ export function ProxyViewer({
                 <button
                   type="button"
                   onClick={handleRequestDeleteCurrentView}
-                  disabled={!canClearCurrentView || deletingCurrentView}
+                  disabled={!canDeleteCurrentView || deletingCurrentView}
                   className="bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50"
-                  title="Choose whether to delete stored data for the current view."
+                  title="Delete persisted history for the selected session."
                 >
                   <Trash2 className="size-3.5" />
                   <span>Delete</span>
@@ -2431,28 +2726,15 @@ export function ProxyViewer({
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent className="border-red-500/20 bg-zinc-950 text-zinc-100 sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Delete current logs?</DialogTitle>
+            <DialogTitle>Delete {deleteTargetLabel} history?</DialogTitle>
             <DialogDescription>
-              Choose whether this only clears the UI or also deletes the stored log data for the
-              current view.
+              Clear only hides logs from the UI. Delete removes stored history from disk.
             </DialogDescription>
           </DialogHeader>
-          <label className="flex items-start gap-3 rounded-md bg-red-500/[0.08] px-3 py-3 text-sm text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]">
-            <input
-              type="checkbox"
-              className="mt-0.5 size-4 shrink-0"
-              checked={deleteStoredData}
-              disabled={deletingCurrentView}
-              onChange={(event) => setDeleteStoredData(event.currentTarget.checked)}
-            />
-            <span className="min-w-0">
-              <span className="block font-medium">Also delete stored data</span>
-              <span className="mt-1 block text-xs text-red-200/80">
-                Removes persisted log rows, streaming chunks, and session archive entries for these{" "}
-                {logs.length.toString()} visible request{logs.length === 1 ? "" : "s"}.
-              </span>
-            </span>
-          </label>
+          <div className="rounded-md bg-red-500/[0.08] px-3 py-3 text-sm text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]">
+            <span className="block font-medium">This is a full history delete.</span>
+            <span className="mt-1 block text-xs text-red-200/80">{deleteTargetDescription}</span>
+          </div>
           <div className="flex justify-end gap-2">
             <Button
               type="button"
@@ -2465,16 +2747,12 @@ export function ProxyViewer({
             </Button>
             <Button
               type="button"
-              variant={deleteStoredData ? "destructive" : "secondary"}
+              variant="destructive"
               size="sm"
               disabled={deletingCurrentView}
               onClick={handleConfirmDeleteCurrentView}
             >
-              {deletingCurrentView
-                ? "Deleting..."
-                : deleteStoredData
-                  ? "Delete data"
-                  : "Clear only"}
+              {deletingCurrentView ? "Deleting..." : "Delete history"}
             </Button>
           </div>
         </DialogContent>