dsh-pentester 2.2.0 → 2.4.0

package/lib/client.js

@@ -40,7 +40,7 @@ __export(plugin_exports, {
   setPentesterEndpointState: () => setPentesterEndpointState
 });
 module.exports = __toCommonJS(plugin_exports);
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 
 // node_modules/.pnpm/zod@4.4.3/node_modules/zod/v4/classic/external.js
 var external_exports = {};
@@ -15397,7 +15397,7 @@ function isPentesterRootSession(snapshot, id) {
 }
 
 // src/ui/client/pentester-view.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 
 // src/ui/client/pentester/navigation.ts
 var PENTESTER_TABS = [
@@ -16100,8 +16100,71 @@ function LegendItem(props) {
 }
 
 // src/ui/client/pentester/FindingsView.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_dsh_client_ui_primitives4 = require("@deepseek-ai/dsh-client-ui-primitives");
+
+// src/ui/client/pentester/CopyAction.tsx
 var import_react10 = __toESM(require("react"), 1);
 var import_dsh_client_ui_primitives3 = require("@deepseek-ai/dsh-client-ui-primitives");
+function CopyAction(props) {
+  const { text } = props;
+  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const timerRef = (0, import_react10.useRef)(null);
+  const pendingRef = (0, import_react10.useRef)(false);
+  const handleCopy = (0, import_react10.useCallback)(() => {
+    if (copied || pendingRef.current) return;
+    pendingRef.current = true;
+    void (0, import_dsh_client_ui_primitives3.writeClipboard)(text).then((ok) => {
+      pendingRef.current = false;
+      if (!ok) return;
+      setCopied(true);
+      timerRef.current = setTimeout(() => {
+        setCopied(false);
+        timerRef.current = null;
+      }, 1e3);
+    });
+  }, [text, copied]);
+  (0, import_react10.useEffect)(() => {
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return import_react10.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": copied ? "Copied" : "Copy",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "4px 8px",
+        border: "none",
+        borderRadius: "6px",
+        background: "transparent",
+        color: "var(--dsw-alias-label-secondary)",
+        cursor: "pointer",
+        fontSize: "13px",
+        lineHeight: "16px",
+        whiteSpace: "nowrap",
+        flexShrink: 0
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover)";
+        e.currentTarget.style.color = "var(--dsw-alias-label-primary)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+        e.currentTarget.style.color = "var(--dsw-alias-label-secondary)";
+      }
+    },
+    copied ? import_react10.default.createElement(import_dsh_client_ui_primitives3.IconCheckOutline16, { size: 16 }) : import_react10.default.createElement(import_dsh_client_ui_primitives3.IconCopyOutline16, { size: 16 }),
+    copied ? "Copied" : "Copy"
+  );
+}
+
+// src/ui/client/pentester/FindingsView.tsx
 var SEVERITY_ORDER = ["critical", "high", "medium", "low", "info"];
 var SEVERITY_LABELS = {
   critical: "Critical",
@@ -16117,176 +16180,594 @@ var SEVERITY_COLORS = {
   low: "#3b82f6",
   info: "#6b7280"
 };
-function ExpandableSection(props) {
-  const [open, setOpen] = (0, import_react10.useState)(props.defaultOpen);
-  return import_react10.default.createElement(
-    "div",
-    { style: { marginBottom: "4px" } },
-    import_react10.default.createElement(
-      "div",
-      {
-        onClick: () => setOpen(!open),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          padding: "6px 8px",
-          cursor: "pointer",
-          borderRadius: "4px",
-          fontSize: "13px",
-          fontWeight: 600,
-          color: "var(--dsw-fg)",
-          userSelect: "none"
-        }
-      },
-      import_react10.default.createElement("span", {
-        style: { fontSize: "12px", transition: "transform 0.15s", transform: open ? "rotate(90deg)" : "rotate(0deg)" }
-      }, "\u25B6"),
-      import_react10.default.createElement("span", null, props.title)
-    ),
-    open && import_react10.default.createElement("div", { style: { paddingLeft: "20px" } }, props.children)
-  );
-}
+var FILTER_TABS = [
+  { id: "all", label: "All" },
+  ...SEVERITY_ORDER.map((s) => ({ id: s, label: SEVERITY_LABELS[s] }))
+];
 function FindingsView(props) {
-  const { snapshot, command, sessionId } = props;
-  const [selectedFinding, setSelectedFinding] = (0, import_react10.useState)(null);
-  const [detailContent, setDetailContent] = (0, import_react10.useState)(null);
-  const [detailLoading, setDetailLoading] = (0, import_react10.useState)(false);
+  const { snapshot, command, sessionId, onNavigate } = props;
   const findings = snapshot?.findings ?? [];
-  const grouped = (0, import_react10.useMemo)(() => {
-    const groups = /* @__PURE__ */ new Map();
-    for (const severity of SEVERITY_ORDER) {
-      groups.set(severity, []);
-    }
-    for (const f of findings) {
-      const list = groups.get(f.severity);
-      if (list !== void 0) list.push(f);
-    }
-    return groups;
+  const [selectedId, setSelectedId] = (0, import_react11.useState)(null);
+  const [detailContent, setDetailContent] = (0, import_react11.useState)(null);
+  const [detailLoading, setDetailLoading] = (0, import_react11.useState)(false);
+  const [detailError, setDetailError] = (0, import_react11.useState)(false);
+  const [filter, setFilter] = (0, import_react11.useState)("all");
+  const [search, setSearch] = (0, import_react11.useState)("");
+  const [focusDone, setFocusDone] = (0, import_react11.useState)(false);
+  const loadSeqRef = (0, import_react11.useRef)(0);
+  const severityCounts = (0, import_react11.useMemo)(() => {
+    const counts = { critical: 0, high: 0, medium: 0, low: 0, info: 0 };
+    for (const f of findings) counts[f.severity]++;
+    return counts;
   }, [findings]);
-  const openDetail = (0, import_react10.useCallback)(async (finding) => {
-    setSelectedFinding(finding);
+  const filtered = (0, import_react11.useMemo)(() => {
+    let list = [...findings];
+    if (filter !== "all") list = list.filter((f) => f.severity === filter);
+    if (search.trim() !== "") {
+      const q = search.toLowerCase();
+      list = list.filter(
+        (f) => f.title.toLowerCase().includes(q) || (f.affectedAsset?.toLowerCase().includes(q) ?? false) || f.sourceStage.toLowerCase().includes(q) || f.sourceDelegationId.toLowerCase().includes(q)
+      );
+    }
+    const orderMap = new Map(SEVERITY_ORDER.map((s, i) => [s, i]));
+    list.sort((a, b) => {
+      const oa = orderMap.get(a.severity) ?? 99;
+      const ob = orderMap.get(b.severity) ?? 99;
+      if (oa !== ob) return oa - ob;
+      return 0;
+    });
+    return list;
+  }, [findings, filter, search]);
+  const selectedFinding = (0, import_react11.useMemo)(
+    () => selectedId !== null ? findings.find((f) => f.id === selectedId) ?? null : null,
+    [findings, selectedId]
+  );
+  (0, import_react11.useEffect)(() => {
+    if (props.focusFinding !== void 0 && !focusDone) {
+      const match = findings.find((f) => f.id === props.focusFinding);
+      if (match !== void 0) {
+        setSelectedId(match.id);
+        setFilter("all");
+        setSearch("");
+        setFocusDone(true);
+      }
+    }
+  }, [props.focusFinding, focusDone, findings]);
+  (0, import_react11.useEffect)(() => {
+    setFocusDone(false);
+  }, [props.focusFinding]);
+  const loadDetail = (0, import_react11.useCallback)(async (finding) => {
+    setSelectedId(finding.id);
     setDetailContent(null);
     setDetailLoading(true);
+    setDetailError(false);
+    const seq = ++loadSeqRef.current;
     try {
       const result = await command({
         kind: "readFinding",
         detailFile: finding.detailFile,
         sessionId
       });
+      if (seq !== loadSeqRef.current) return;
       if (result.ok) {
         const fileResult = result.value;
         setDetailContent(fileResult.content ?? "");
+        setDetailError(false);
       } else {
-        setDetailContent("*Unable to load finding detail.*");
+        setDetailContent(null);
+        setDetailError(true);
       }
     } catch {
-      setDetailContent("*Error loading finding detail.*");
+      if (seq !== loadSeqRef.current) return;
+      setDetailContent(null);
+      setDetailError(true);
     } finally {
-      setDetailLoading(false);
+      if (seq === loadSeqRef.current) setDetailLoading(false);
     }
   }, [command, sessionId]);
-  const closeDetail = (0, import_react10.useCallback)(() => {
-    setSelectedFinding(null);
-    setDetailContent(null);
-  }, []);
-  if (findings.length === 0) {
-    return import_react10.default.createElement("div", {
-      style: { padding: "24px", color: "var(--dsw-fg-muted)", fontSize: "14px" }
-    }, "No findings yet");
-  }
-  const severitySections = SEVERITY_ORDER.map((severity) => {
-    const items = grouped.get(severity) ?? [];
-    if (items.length === 0) return null;
-    const findingRows = items.map(
-      (finding) => import_react10.default.createElement(
+  return import_react11.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+        overflow: "hidden"
+      }
+    },
+    // ── Top: severity summary strip ──────────────────────────────────────
+    import_react11.default.createElement(SeveritySummary, {
+      total: findings.length,
+      counts: severityCounts,
+      activeFilter: filter,
+      onFilter: setFilter
+    }),
+    // ── Bottom: split view ───────────────────────────────────────────────
+    import_react11.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          overflow: "hidden"
+        }
+      },
+      // ── Left: Navigator ───────────────────────────────────────────────
+      import_react11.default.createElement(
         "div",
         {
-          key: finding.id,
           style: {
+            flex: "0 0 340px",
+            minWidth: "280px",
+            maxWidth: "380px",
+            minHeight: 0,
             display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            borderRight: "1px solid var(--dsw-alias-border-l2)"
+          }
+        },
+        // Search + filter (fixed header)
+        import_react11.default.createElement(
+          "div",
+          {
+            style: {
+              flex: "none",
+              padding: "8px 12px 4px"
+            }
+          },
+          import_react11.default.createElement("input", {
+            type: "text",
+            placeholder: "Search findings...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            style: {
+              width: "100%",
+              boxSizing: "border-box",
+              padding: "6px 10px",
+              border: "1px solid var(--dsw-alias-border-l2)",
+              borderRadius: "6px",
+              background: "var(--dsw-alias-bg-base)",
+              color: "var(--dsw-alias-label-primary)",
+              fontSize: "13px",
+              outline: "none",
+              marginBottom: "4px"
+            }
+          }),
+          import_react11.default.createElement(PentesterTabBar, {
+            items: FILTER_TABS,
+            active: filter,
+            onSelect: (id) => setFilter(id),
+            variant: "compact"
+          })
+        ),
+        // FindingList (scrollable)
+        import_react11.default.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              overflowX: "hidden",
+              overscrollBehaviorY: "contain",
+              scrollbarGutter: "stable"
+            }
+          },
+          filtered.length === 0 ? import_react11.default.createElement("div", {
+            style: {
+              padding: "24px 12px",
+              color: "var(--dsw-alias-label-tertiary)",
+              fontSize: "13px",
+              textAlign: "center"
+            }
+          }, findings.length === 0 ? "No findings yet" : "No matching findings") : filtered.map(
+            (finding) => import_react11.default.createElement(FindingRow, {
+              key: finding.id,
+              finding,
+              isSelected: finding.id === selectedId,
+              onClick: () => loadDetail(finding)
+            })
+          )
+        )
+      ),
+      // ── Right: Detail ──────────────────────────────────────────────────
+      import_react11.default.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          }
+        },
+        selectedFinding === null ? import_react11.default.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap: "8px",
+              color: "var(--dsw-alias-label-tertiary)",
+              fontSize: "13px"
+            }
+          },
+          findings.length === 0 ? import_react11.default.createElement(
+            import_react11.default.Fragment,
+            null,
+            import_react11.default.createElement("div", { style: { fontWeight: 500, color: "var(--dsw-alias-label-primary)" } }, "No findings yet"),
+            import_react11.default.createElement("div", null, "Validated findings will appear here as the assessment progresses.")
+          ) : "Select a finding to inspect"
+        ) : import_react11.default.createElement(FindingDetail, {
+          finding: selectedFinding,
+          content: detailContent,
+          loading: detailLoading,
+          error: detailError,
+          onNavigate
+        })
+      )
+    )
+  );
+}
+function SeveritySummary(props) {
+  const { total, counts, activeFilter, onFilter } = props;
+  const items = [
+    { key: "all", label: "Total", count: total },
+    ...SEVERITY_ORDER.map((s) => ({
+      key: s,
+      label: SEVERITY_LABELS[s],
+      count: counts[s],
+      color: SEVERITY_COLORS[s]
+    }))
+  ];
+  return import_react11.default.createElement(
+    "div",
+    {
+      style: {
+        flex: "none",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        padding: "8px 12px",
+        borderBottom: "1px solid var(--dsw-alias-border-l2)",
+        flexWrap: "wrap",
+        fontSize: "13px",
+        color: "var(--dsw-alias-label-secondary)"
+      }
+    },
+    ...items.map((item) => {
+      const isActive = activeFilter === item.key;
+      return import_react11.default.createElement(
+        "button",
+        {
+          key: item.key,
+          type: "button",
+          onClick: () => onFilter(item.key),
+          style: {
+            display: "inline-flex",
             alignItems: "center",
-            gap: "8px",
-            padding: "6px 12px",
+            gap: "5px",
+            padding: "3px 10px",
+            borderRadius: "12px",
+            border: "none",
+            background: isActive ? "var(--dsw-alias-interactive-bg-hover)" : "transparent",
+            color: isActive ? "var(--dsw-alias-label-primary)" : "var(--dsw-alias-label-secondary)",
             cursor: "pointer",
-            borderRadius: "4px",
             fontSize: "13px",
-            color: "var(--dsw-fg)",
-            borderLeft: `3px solid ${SEVERITY_COLORS[finding.severity]}`,
-            marginBottom: "2px"
-          },
-          onClick: () => openDetail(finding)
+            fontWeight: isActive ? 500 : 400,
+            whiteSpace: "nowrap"
+          }
         },
-        import_react10.default.createElement("span", {
+        item.color !== void 0 && import_react11.default.createElement("span", {
           style: {
             width: "8px",
             height: "8px",
             borderRadius: "50%",
-            background: SEVERITY_COLORS[finding.severity],
+            background: item.color,
             flexShrink: 0
           }
         }),
-        import_react10.default.createElement("span", { style: { fontWeight: 500 } }, finding.title),
-        finding.affectedAsset !== void 0 && import_react10.default.createElement("span", {
-          style: { fontSize: "11px", color: "var(--dsw-fg-muted)", marginLeft: "auto" }
-        }, finding.affectedAsset)
-      )
-    );
-    return import_react10.default.createElement(ExpandableSection, {
-      key: severity,
-      title: `${SEVERITY_LABELS[severity]} \xB7 ${items.length}`,
-      defaultOpen: severity === "critical" || severity === "high",
-      children: findingRows
-    });
-  });
-  const modalContent = selectedFinding !== null ? import_react10.default.createElement(
-    import_dsh_client_ui_primitives3.Modal,
+        import_react11.default.createElement("span", null, item.label),
+        import_react11.default.createElement("span", {
+          style: { fontWeight: 600, color: isActive ? "var(--dsw-alias-label-primary)" : "var(--dsw-alias-label-tertiary)" }
+        }, String(item.count))
+      );
+    })
+  );
+}
+function FindingRow(props) {
+  const { finding, isSelected, onClick } = props;
+  const color = SEVERITY_COLORS[finding.severity];
+  return import_react11.default.createElement(
+    "div",
     {
-      open: true,
-      onClose: closeDetail,
-      title: selectedFinding.title,
-      contentClassName: "pentester-finding-detail"
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "2px",
+        padding: "8px 12px",
+        cursor: "pointer",
+        borderLeft: `3px solid ${isSelected ? color : "transparent"}`,
+        background: isSelected ? "var(--dsw-alias-state-business-primary)" : "transparent",
+        color: isSelected ? "var(--dsw-alias-state-business-primary-fg, #fff)" : "var(--dsw-alias-label-primary)",
+        fontSize: "13px",
+        lineHeight: "18px",
+        borderBottom: "1px solid var(--dsw-alias-border-l2)",
+        transition: "background 0.1s"
+      },
+      onMouseEnter: (e) => {
+        if (!isSelected) e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover)";
+      },
+      onMouseLeave: (e) => {
+        if (!isSelected) e.currentTarget.style.background = "transparent";
+      }
     },
-    import_react10.default.createElement(
+    // Row 1: title + severity
+    import_react11.default.createElement(
       "div",
-      { style: { fontSize: "13px", lineHeight: "1.6" } },
-      import_react10.default.createElement("div", {
+      {
         style: {
-          display: "inline-block",
-          padding: "2px 10px",
-          borderRadius: "10px",
-          background: SEVERITY_COLORS[selectedFinding.severity],
-          color: "#fff",
-          fontSize: "12px",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          minWidth: 0
+        }
+      },
+      import_react11.default.createElement("span", {
+        style: {
+          width: "7px",
+          height: "7px",
+          borderRadius: "50%",
+          background: color,
+          flexShrink: 0
+        }
+      }),
+      import_react11.default.createElement("span", {
+        style: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          fontWeight: 500,
+          flex: 1,
+          minWidth: 0
+        }
+      }, finding.title),
+      import_react11.default.createElement("span", {
+        style: {
+          fontSize: "11px",
           fontWeight: 600,
-          marginBottom: "12px"
+          color: isSelected ? "rgba(255,255,255,0.75)" : color,
+          flexShrink: 0
         }
-      }, SEVERITY_LABELS[selectedFinding.severity]),
-      selectedFinding.affectedAsset !== void 0 && import_react10.default.createElement("div", {
-        style: { color: "var(--dsw-fg-muted)", marginBottom: "4px" }
-      }, "Affected: ", import_react10.default.createElement("code", null, selectedFinding.affectedAsset)),
-      import_react10.default.createElement("div", {
-        style: { color: "var(--dsw-fg-muted)", marginBottom: "12px", fontSize: "12px" }
-      }, `Source: ${selectedFinding.sourceStage} \xB7 ${selectedFinding.sourceDelegationId}`),
-      detailLoading && import_react10.default.createElement("div", {
-        style: { color: "var(--dsw-fg-muted)", padding: "16px 0" }
-      }, "Loading..."),
-      detailContent !== null && import_react10.default.createElement(import_dsh_client_ui_primitives3.MarkdownText, { text: detailContent })
-    )
-  ) : null;
-  return import_react10.default.createElement(
+      }, SEVERITY_LABELS[finding.severity].toUpperCase())
+    ),
+    // Row 2: affected asset (if exists)
+    finding.affectedAsset !== void 0 && import_react11.default.createElement("div", {
+      style: {
+        fontSize: "12px",
+        color: isSelected ? "rgba(255,255,255,0.6)" : "var(--dsw-alias-label-tertiary)",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        marginLeft: "15px"
+      }
+    }, finding.affectedAsset),
+    // Row 3: source stage + delegation
+    import_react11.default.createElement("div", {
+      style: {
+        fontSize: "11px",
+        color: isSelected ? "rgba(255,255,255,0.5)" : "var(--dsw-alias-label-tertiary)",
+        marginLeft: "15px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, `${finding.sourceStage} \xB7 ${finding.sourceDelegationId}`)
+  );
+}
+function FindingDetail(props) {
+  const { finding, content, loading, error: error51, onNavigate } = props;
+  const color = SEVERITY_COLORS[finding.severity];
+  return import_react11.default.createElement(
     "div",
-    { style: { maxWidth: "640px" } },
-    ...severitySections,
-    modalContent
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      }
+    },
+    // ── Metadata header (fixed) ─────────────────────────────────────────
+    import_react11.default.createElement(
+      "div",
+      {
+        style: {
+          flex: "none",
+          padding: "12px 16px",
+          borderBottom: "1px solid var(--dsw-alias-border-l2)"
+        }
+      },
+      // Title + severity + copy
+      import_react11.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            marginBottom: "8px"
+          }
+        },
+        import_react11.default.createElement("span", {
+          style: {
+            fontSize: "15px",
+            fontWeight: 600,
+            color: "var(--dsw-alias-label-primary)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            flex: 1,
+            minWidth: 0
+          }
+        }, finding.title),
+        content !== null && import_react11.default.createElement(CopyAction, { text: content }),
+        import_react11.default.createElement("span", {
+          style: {
+            display: "inline-block",
+            padding: "2px 8px",
+            borderRadius: "10px",
+            background: color,
+            color: "#fff",
+            fontSize: "11px",
+            fontWeight: 600,
+            flexShrink: 0
+          }
+        }, SEVERITY_LABELS[finding.severity].toUpperCase())
+      ),
+      // Affected asset
+      finding.affectedAsset !== void 0 && import_react11.default.createElement(
+        "div",
+        {
+          style: {
+            fontSize: "13px",
+            color: "var(--dsw-alias-label-secondary)",
+            marginBottom: "6px",
+            display: "flex",
+            gap: "6px"
+          }
+        },
+        import_react11.default.createElement("span", { style: { color: "var(--dsw-alias-label-tertiary)", flexShrink: 0 } }, "Affected asset"),
+        import_react11.default.createElement("code", {
+          style: {
+            fontSize: "12px",
+            background: "var(--dsw-alias-bg-subtle)",
+            padding: "1px 6px",
+            borderRadius: "3px"
+          }
+        }, finding.affectedAsset)
+      ),
+      // Stage + Delegation metadata
+      import_react11.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "20px",
+            fontSize: "12px",
+            color: "var(--dsw-alias-label-tertiary)"
+          }
+        },
+        import_react11.default.createElement(
+          "div",
+          null,
+          import_react11.default.createElement("span", { style: { fontWeight: 500, color: "var(--dsw-alias-label-secondary)" } }, "Stage"),
+          " ",
+          import_react11.default.createElement("span", null, finding.sourceStage)
+        ),
+        import_react11.default.createElement(
+          "div",
+          null,
+          import_react11.default.createElement("span", { style: { fontWeight: 500, color: "var(--dsw-alias-label-secondary)" } }, "Delegation"),
+          " ",
+          import_react11.default.createElement("span", null, finding.sourceDelegationId)
+        )
+      )
+    ),
+    // ── DetailBody (scrollable) ────────────────────────────────────────
+    import_react11.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          overflowY: "auto",
+          overflowX: "auto",
+          overscrollBehaviorY: "contain",
+          scrollbarGutter: "stable",
+          padding: "16px",
+          fontSize: "13px",
+          lineHeight: "1.6",
+          color: "var(--dsw-alias-label-primary)"
+        }
+      },
+      loading && import_react11.default.createElement("div", {
+        style: { color: "var(--dsw-alias-label-tertiary)", padding: "16px 0" }
+      }, "Loading finding..."),
+      error51 && import_react11.default.createElement("div", {
+        style: { color: "var(--dsw-status-error)", padding: "16px 0" }
+      }, "Unable to load finding detail"),
+      content !== null && import_react11.default.createElement(import_dsh_client_ui_primitives4.MarkdownText, { text: content })
+    ),
+    // ── Footer actions (fixed) ──────────────────────────────────────────
+    import_react11.default.createElement(
+      "div",
+      {
+        style: {
+          flex: "none",
+          padding: "8px 16px",
+          borderTop: "1px solid var(--dsw-alias-border-l2)",
+          display: "flex",
+          gap: "8px"
+        }
+      },
+      import_react11.default.createElement(ActionButton, {
+        label: "View Stage",
+        onClick: () => onNavigate("stages", { stage: finding.sourceStage })
+      }),
+      import_react11.default.createElement(ActionButton, {
+        label: "View in Output",
+        onClick: () => onNavigate("output", { output: `findings/${finding.detailFile}` })
+      })
+    )
   );
 }
+function ActionButton(props) {
+  return import_react11.default.createElement("button", {
+    type: "button",
+    onClick: props.onClick,
+    style: {
+      padding: "4px 12px",
+      border: "1px solid var(--dsw-alias-border-l2)",
+      borderRadius: "4px",
+      background: "transparent",
+      color: "var(--dsw-alias-label-secondary)",
+      cursor: "pointer",
+      fontSize: "12px",
+      lineHeight: "20px"
+    },
+    onMouseEnter: (e) => {
+      e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover)";
+    },
+    onMouseLeave: (e) => {
+      e.currentTarget.style.background = "transparent";
+    }
+  }, props.label);
+}
 
 // src/ui/client/pentester/TraceView.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 
 // src/ui/client/pentester/trace/TraceTimeline.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/ui/client/pentester/trace/types.ts
 var STAGE_NODE_H = 72;
@@ -16690,8 +17171,8 @@ function buildScaledTraceLayout(baseLayout, scale) {
 }
 
 // src/ui/client/pentester/trace/TraceNode.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_dsh_client_ui_primitives4 = require("@deepseek-ai/dsh-client-ui-primitives");
+var import_react12 = __toESM(require("react"), 1);
+var import_dsh_client_ui_primitives5 = require("@deepseek-ai/dsh-client-ui-primitives");
 var CARD = {
   position: "absolute",
   borderRadius: "7px",
@@ -16704,10 +17185,10 @@ var CARD = {
   cursor: "pointer",
   pointerEvents: "auto"
 };
-var StartNode = (0, import_react11.forwardRef)(
+var StartNode = (0, import_react12.forwardRef)(
   function StartNode2(props, ref) {
     const { section, x } = props;
-    return import_react11.default.createElement(
+    return import_react12.default.createElement(
       "div",
       {
         ref,
@@ -16735,7 +17216,7 @@ var StartNode = (0, import_react11.forwardRef)(
           pointerEvents: "auto"
         }
       },
-      import_react11.default.createElement("div", {
+      import_react12.default.createElement("div", {
         style: {
           width: "6px",
           height: "6px",
@@ -16748,13 +17229,13 @@ var StartNode = (0, import_react11.forwardRef)(
     );
   }
 );
-var StageNode = (0, import_react11.forwardRef)(
+var StageNode = (0, import_react12.forwardRef)(
   function StageNode2(props, ref) {
     const { section, x, onClick } = props;
     const status = section.status;
     const borderColor = status === "completed" ? "var(--dsw-status-done, #22c55e)" : status === "active" ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-border-l2)";
     const dotState = status === "completed" ? "done" : status === "active" ? "ongoing" : "ongoing";
-    return import_react11.default.createElement(
+    return import_react12.default.createElement(
       "div",
       {
         ref,
@@ -16782,26 +17263,26 @@ var StageNode = (0, import_react11.forwardRef)(
           gap: "10px"
         }
       },
-      import_react11.default.createElement(import_dsh_client_ui_primitives4.StateDot, { state: dotState, size: 8 }),
-      import_react11.default.createElement(
+      import_react12.default.createElement(import_dsh_client_ui_primitives5.StateDot, { state: dotState, size: 8 }),
+      import_react12.default.createElement(
         "div",
         { style: { minWidth: 0 } },
-        import_react11.default.createElement("div", {
+        import_react12.default.createElement("div", {
           style: { fontWeight: 600, color: "var(--dsw-alias-label-primary)", fontSize: "14px", lineHeight: "20px" }
         }, section.label),
-        import_react11.default.createElement("div", {
+        import_react12.default.createElement("div", {
           style: { fontSize: "12px", color: "var(--dsw-alias-label-secondary)", marginTop: "2px" }
         }, section.sublabel)
       )
     );
   }
 );
-var AgentNode = (0, import_react11.forwardRef)(
+var AgentNode = (0, import_react12.forwardRef)(
   function AgentNode2(props, ref) {
     const { branch, x, liveActivity, onClick } = props;
     const dotState = branch.status === "failed" ? "error" : branch.status === "closed" ? "done" : liveActivity === "running" ? "ongoing" : liveActivity === "inactive" ? "done" : branch.status === "starting" ? "ongoing" : "done";
     const borderColor = dotState === "error" ? "var(--dsw-status-error, #ef4444)" : dotState === "ongoing" ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-border-l2)";
-    return import_react11.default.createElement(
+    return import_react12.default.createElement(
       "div",
       {
         ref,
@@ -16829,14 +17310,14 @@ var AgentNode = (0, import_react11.forwardRef)(
           gap: "8px"
         }
       },
-      import_react11.default.createElement(import_dsh_client_ui_primitives4.StateDot, { state: dotState, size: 8 }),
-      import_react11.default.createElement(
+      import_react12.default.createElement(import_dsh_client_ui_primitives5.StateDot, { state: dotState, size: 8 }),
+      import_react12.default.createElement(
         "div",
         { style: { minWidth: 0 } },
-        import_react11.default.createElement("div", {
+        import_react12.default.createElement("div", {
           style: { fontWeight: 600, color: "var(--dsw-alias-label-primary)", fontSize: "13px", lineHeight: "18px" }
         }, branch.label),
-        import_react11.default.createElement("div", {
+        import_react12.default.createElement("div", {
           style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary)", marginTop: "2px" }
         }, branch.status === "starting" ? "Agent starting" : branch.status === "active" ? "Agent active" : "Agent completed")
       )
@@ -16851,11 +17332,11 @@ var DELIVERY_ICON_COLORS = {
   finding: "var(--dsw-status-error, #ef4444)",
   asset: "#3b82f6"
 };
-var DeliveryNode = (0, import_react11.forwardRef)(
+var DeliveryNode = (0, import_react12.forwardRef)(
   function DeliveryNode2(props, ref) {
     const { group, x, y, onClick } = props;
     const iconColor = DELIVERY_ICON_COLORS[group.kind] ?? "var(--dsw-alias-label-tertiary)";
-    return import_react11.default.createElement(
+    return import_react12.default.createElement(
       "div",
       {
         ref,
@@ -16887,7 +17368,7 @@ var DeliveryNode = (0, import_react11.forwardRef)(
           textAlign: "center"
         }
       },
-      import_react11.default.createElement("div", {
+      import_react12.default.createElement("div", {
         style: {
           width: "8px",
           height: "8px",
@@ -16896,10 +17377,10 @@ var DeliveryNode = (0, import_react11.forwardRef)(
           flexShrink: 0
         }
       }),
-      import_react11.default.createElement("div", {
+      import_react12.default.createElement("div", {
         style: { fontWeight: 600, color: "var(--dsw-alias-label-primary)", fontSize: "12px", lineHeight: "16px" }
       }, group.label),
-      import_react11.default.createElement("div", {
+      import_react12.default.createElement("div", {
         style: { fontSize: "10px", color: "var(--dsw-alias-label-tertiary)" }
       }, `${group.count} ${group.count === 1 ? "file" : "files"}`)
     );
@@ -16907,7 +17388,7 @@ var DeliveryNode = (0, import_react11.forwardRef)(
 );
 
 // src/ui/client/pentester/trace/TraceConnectors.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 function roundedOrthogonal(sx, sy, tx, ty, r = 6) {
   if (Math.abs(sx - tx) < 2) {
     return `M ${sx} ${sy} L ${tx} ${ty}`;
@@ -16932,7 +17413,7 @@ function branchJunction(cx, sy, targets) {
 }
 function TraceConnectors(props) {
   const { layout } = props;
-  const paths = (0, import_react12.useMemo)(() => {
+  const paths = (0, import_react13.useMemo)(() => {
     const result = [];
     const cx = layout.spineX;
     const solid = { stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1.25 };
@@ -17013,7 +17494,7 @@ function TraceConnectors(props) {
     }
     return result;
   }, [layout]);
-  return import_react12.default.createElement(
+  return import_react13.default.createElement(
     "svg",
     {
       width: layout.worldHalfWidth * 2,
@@ -17026,7 +17507,7 @@ function TraceConnectors(props) {
       }
     },
     ...paths.map(
-      (p, i) => import_react12.default.createElement("path", {
+      (p, i) => import_react13.default.createElement("path", {
         key: i,
         d: p.d,
         fill: "none",
@@ -17041,7 +17522,7 @@ function TraceConnectors(props) {
 }
 
 // src/ui/client/pentester/trace/TraceControls.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 var BTN = {
   height: "32px",
   display: "flex",
@@ -17060,33 +17541,33 @@ var BTN = {
 function TraceControls(props) {
   const { scale, onZoomIn, onZoomOut, onReset, onFit } = props;
   const pct = Math.round(scale * 100);
-  return import_react13.default.createElement(
+  return import_react14.default.createElement(
     "div",
     {
       style: { display: "flex", alignItems: "center", gap: "4px" }
     },
-    import_react13.default.createElement("button", {
+    import_react14.default.createElement("button", {
       type: "button",
       "aria-label": "Zoom out",
       title: "Zoom out",
       onClick: onZoomOut,
       style: { ...BTN, width: "32px", padding: 0 }
     }, "\u2212"),
-    import_react13.default.createElement("button", {
+    import_react14.default.createElement("button", {
       type: "button",
       "aria-label": "Reset zoom",
       title: "Reset to 100%",
       onClick: onReset,
       style: { ...BTN, fontWeight: 500, fontSize: "11px", color: "var(--dsw-alias-label-primary)" }
     }, `${pct}%`),
-    import_react13.default.createElement("button", {
+    import_react14.default.createElement("button", {
       type: "button",
       "aria-label": "Zoom in",
       title: "Zoom in",
       onClick: onZoomIn,
       style: { ...BTN, width: "32px", padding: 0 }
     }, "+"),
-    import_react13.default.createElement("button", {
+    import_react14.default.createElement("button", {
       type: "button",
       "aria-label": "Fit to width",
       title: "Fit topology width",
@@ -17115,12 +17596,12 @@ function checkSpineInvariant(graphEl, scale) {
 }
 function TraceTimeline(props) {
   const { snapshot, liveActivity, onNavigate, onOpenSession } = props;
-  const baseLayout = (0, import_react14.useMemo)(() => buildTraceLayout(snapshot), [snapshot]);
-  const [scale, setScale] = (0, import_react14.useState)(DEFAULT_SCALE);
-  const graphRef = (0, import_react14.useRef)(null);
-  const graphVpRef = (0, import_react14.useRef)(null);
-  const autoFitDoneRef = (0, import_react14.useRef)(false);
-  const scaledLayout = (0, import_react14.useMemo)(
+  const baseLayout = (0, import_react15.useMemo)(() => buildTraceLayout(snapshot), [snapshot]);
+  const [scale, setScale] = (0, import_react15.useState)(DEFAULT_SCALE);
+  const graphRef = (0, import_react15.useRef)(null);
+  const graphVpRef = (0, import_react15.useRef)(null);
+  const autoFitDoneRef = (0, import_react15.useRef)(false);
+  const scaledLayout = (0, import_react15.useMemo)(
     () => buildScaledTraceLayout(baseLayout, scale),
     [baseLayout, scale]
   );
@@ -17130,7 +17611,7 @@ function TraceTimeline(props) {
   const spineX = scaledLayout.spineX;
   const worldW = worldHalfWidth * 2;
   const worldH = scaledLayout.totalHeight;
-  const doAutoFit = (0, import_react14.useCallback)(() => {
+  const doAutoFit = (0, import_react15.useCallback)(() => {
     const vp = graphVpRef.current;
     if (vp === null) return DEFAULT_SCALE;
     const availableHalf = vp.clientWidth / 2 - GRAPH_PADDING;
@@ -17138,13 +17619,13 @@ function TraceTimeline(props) {
     const fitScale = availableHalf / requiredHalf;
     return Math.min(DEFAULT_SCALE, Math.max(MIN_SCALE, fitScale));
   }, [baseLayout.worldHalfWidth]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (autoFitDoneRef.current) return;
     const fitScale = doAutoFit();
     if (fitScale !== DEFAULT_SCALE) setScale(fitScale);
     autoFitDoneRef.current = true;
   }, [doAutoFit]);
-  const zoomTo = (0, import_react14.useCallback)((newScale) => {
+  const zoomTo = (0, import_react15.useCallback)((newScale) => {
     const clamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
     const owner = getScrollOwner();
     const oldScale = scale;
@@ -17157,26 +17638,26 @@ function TraceTimeline(props) {
       owner.scrollTop = Math.max(0, nextScrollTop);
     });
   }, [scale]);
-  const zoomIn = (0, import_react14.useCallback)(() => zoomTo(scale * 1.15), [zoomTo, scale]);
-  const zoomOut = (0, import_react14.useCallback)(() => zoomTo(scale / 1.15), [zoomTo, scale]);
-  const resetZoom = (0, import_react14.useCallback)(() => zoomTo(DEFAULT_SCALE), [zoomTo]);
-  const fitWidth = (0, import_react14.useCallback)(() => zoomTo(doAutoFit()), [zoomTo, doAutoFit]);
-  const handleWheel = (0, import_react14.useCallback)((e) => {
+  const zoomIn = (0, import_react15.useCallback)(() => zoomTo(scale * 1.15), [zoomTo, scale]);
+  const zoomOut = (0, import_react15.useCallback)(() => zoomTo(scale / 1.15), [zoomTo, scale]);
+  const resetZoom = (0, import_react15.useCallback)(() => zoomTo(DEFAULT_SCALE), [zoomTo]);
+  const fitWidth = (0, import_react15.useCallback)(() => zoomTo(doAutoFit()), [zoomTo, doAutoFit]);
+  const handleWheel = (0, import_react15.useCallback)((e) => {
     if (!e.ctrlKey && !e.metaKey) return;
     e.preventDefault();
     const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
     zoomTo(scale * factor);
   }, [zoomTo, scale]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     checkSpineInvariant(graphRef.current, scale);
   }, [scale, adjustedSections]);
-  const handleStageClick = (0, import_react14.useCallback)((stageId) => {
+  const handleStageClick = (0, import_react15.useCallback)((stageId) => {
     onNavigate("stages", { stage: stageId });
   }, [onNavigate]);
-  const handleAgentClick = (0, import_react14.useCallback)((sessionId) => {
+  const handleAgentClick = (0, import_react15.useCallback)((sessionId) => {
     if (sessionId !== void 0) onOpenSession(sessionId);
   }, [onOpenSession]);
-  const handleDeliveryClick = (0, import_react14.useCallback)((group) => {
+  const handleDeliveryClick = (0, import_react15.useCallback)((group) => {
     if (group.navTab === "findings") {
       onNavigate("findings", { finding: group.navPath });
     } else {
@@ -17185,7 +17666,7 @@ function TraceTimeline(props) {
   }, [onNavigate]);
   const gridCols = `${TIME_PANEL_W}px minmax(0, 1fr)`;
   const timelineEventGrid = `${TIMELINE_DOT_W}px ${TIMELINE_TIME_W}px minmax(0, 1fr)`;
-  return import_react14.default.createElement(
+  return import_react15.default.createElement(
     "div",
     {
       style: {
@@ -17198,7 +17679,7 @@ function TraceTimeline(props) {
       }
     },
     // ── TraceHeader ─────────────────────────────────────────────────────────
-    import_react14.default.createElement(
+    import_react15.default.createElement(
       "div",
       {
         "data-testid": "trace-header",
@@ -17210,16 +17691,16 @@ function TraceTimeline(props) {
           background: "var(--dsw-alias-bg-base)"
         }
       },
-      import_react14.default.createElement(
+      import_react15.default.createElement(
         "div",
         {
           style: { padding: "12px 18px", borderRight: "1px solid var(--dsw-alias-border-l1)" }
         },
-        import_react14.default.createElement("div", {
+        import_react15.default.createElement("div", {
           style: { fontSize: "13px", fontWeight: 600, color: "var(--dsw-alias-label-primary)" }
         }, "Timeline")
       ),
-      import_react14.default.createElement(
+      import_react15.default.createElement(
         "div",
         {
           style: {
@@ -17229,10 +17710,10 @@ function TraceTimeline(props) {
             justifyContent: "space-between"
           }
         },
-        import_react14.default.createElement("div", {
+        import_react15.default.createElement("div", {
           style: { fontSize: "13px", fontWeight: 600, color: "var(--dsw-alias-label-primary)" }
         }, "Topology"),
-        import_react14.default.createElement(TraceControls, {
+        import_react15.default.createElement(TraceControls, {
           scale,
           onZoomIn: zoomIn,
           onZoomOut: zoomOut,
@@ -17242,7 +17723,7 @@ function TraceTimeline(props) {
       )
     ),
     // ── Content (no scroll — flows into Harness scroll owner) ───────────────
-    import_react14.default.createElement(
+    import_react15.default.createElement(
       "div",
       {
         onWheel: handleWheel,
@@ -17252,7 +17733,7 @@ function TraceTimeline(props) {
         }
       },
       // ── Timeline rail ────────────────────────────────────────────────────
-      import_react14.default.createElement(
+      import_react15.default.createElement(
         "div",
         {
           style: {
@@ -17263,7 +17744,7 @@ function TraceTimeline(props) {
           }
         },
         // Vertical timeline spine line
-        import_react14.default.createElement("div", {
+        import_react15.default.createElement("div", {
           "aria-hidden": true,
           style: {
             position: "absolute",
@@ -17278,7 +17759,7 @@ function TraceTimeline(props) {
         ...scaledBands.map((band) => {
           const isStart = band.bandId === "band:start";
           if (band.timelineItems.length === 0) return null;
-          return import_react14.default.createElement(
+          return import_react15.default.createElement(
             "div",
             {
               key: band.bandId,
@@ -17295,7 +17776,7 @@ function TraceTimeline(props) {
             },
             // Start band
             isStart && band.timelineItems.map(
-              (item, ii) => import_react14.default.createElement(
+              (item, ii) => import_react15.default.createElement(
                 "div",
                 {
                   key: ii,
@@ -17307,12 +17788,12 @@ function TraceTimeline(props) {
                     minHeight: `${TIMELINE_ROW_H}px`
                   }
                 },
-                import_react14.default.createElement(
+                import_react15.default.createElement(
                   "div",
                   {
                     style: { display: "flex", justifyContent: "center", paddingTop: "4px" }
                   },
-                  import_react14.default.createElement("div", {
+                  import_react15.default.createElement("div", {
                     style: {
                       width: "6px",
                       height: "6px",
@@ -17321,7 +17802,7 @@ function TraceTimeline(props) {
                     }
                   })
                 ),
-                import_react14.default.createElement("span", {
+                import_react15.default.createElement("span", {
                   style: {
                     fontSize: "11px",
                     fontFamily: "monospace",
@@ -17330,13 +17811,13 @@ function TraceTimeline(props) {
                     paddingTop: "2px"
                   }
                 }, item.timeLabel),
-                import_react14.default.createElement(
+                import_react15.default.createElement(
                   "div",
                   { style: { minWidth: 0, paddingTop: "2px" } },
-                  import_react14.default.createElement("div", {
+                  import_react15.default.createElement("div", {
                     style: { fontSize: "13px", fontWeight: 500, color: "var(--dsw-alias-label-primary)", lineHeight: "18px" }
                   }, item.title),
-                  item.subtitle !== "" && import_react14.default.createElement("div", {
+                  item.subtitle !== "" && import_react15.default.createElement("div", {
                     style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary)", lineHeight: "16px" }
                   }, item.subtitle)
                 )
@@ -17344,7 +17825,7 @@ function TraceTimeline(props) {
             ),
             // Regular stage/agent items
             !isStart && band.timelineItems.map(
-              (item, ii) => import_react14.default.createElement(
+              (item, ii) => import_react15.default.createElement(
                 "div",
                 {
                   key: ii,
@@ -17356,12 +17837,12 @@ function TraceTimeline(props) {
                     minHeight: `${TIMELINE_ROW_H}px`
                   }
                 },
-                import_react14.default.createElement(
+                import_react15.default.createElement(
                   "div",
                   {
                     style: { display: "flex", justifyContent: "center", paddingTop: "4px" }
                   },
-                  import_react14.default.createElement("div", {
+                  import_react15.default.createElement("div", {
                     style: {
                       width: "8px",
                       height: "8px",
@@ -17370,7 +17851,7 @@ function TraceTimeline(props) {
                     }
                   })
                 ),
-                import_react14.default.createElement("span", {
+                import_react15.default.createElement("span", {
                   style: {
                     fontSize: "11px",
                     fontFamily: "monospace",
@@ -17379,13 +17860,13 @@ function TraceTimeline(props) {
                     paddingTop: "2px"
                   }
                 }, item.timeLabel),
-                import_react14.default.createElement(
+                import_react15.default.createElement(
                   "div",
                   { style: { minWidth: 0, paddingTop: "2px" } },
-                  import_react14.default.createElement("div", {
+                  import_react15.default.createElement("div", {
                     style: { fontSize: "13px", fontWeight: 500, color: "var(--dsw-alias-label-primary)", lineHeight: "18px" }
                   }, item.title),
-                  item.subtitle !== "" && import_react14.default.createElement("div", {
+                  item.subtitle !== "" && import_react15.default.createElement("div", {
                     style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary)", lineHeight: "16px" }
                   }, item.subtitle)
                 )
@@ -17395,7 +17876,7 @@ function TraceTimeline(props) {
         })
       ),
       // ── Graph viewport ────────────────────────────────────────────────────
-      import_react14.default.createElement(
+      import_react15.default.createElement(
         "div",
         {
           ref: graphVpRef,
@@ -17407,7 +17888,7 @@ function TraceTimeline(props) {
           }
         },
         // SpineAnchor: CSS left:50%, always at viewport center
-        import_react14.default.createElement(
+        import_react15.default.createElement(
           "div",
           {
             style: {
@@ -17420,7 +17901,7 @@ function TraceTimeline(props) {
             }
           },
           // TopologyWorld: symmetric around spine
-          import_react14.default.createElement(
+          import_react15.default.createElement(
             "div",
             {
               ref: graphRef,
@@ -17434,24 +17915,24 @@ function TraceTimeline(props) {
                 transformOrigin: `${spineX}px 0px`
               }
             },
-            import_react14.default.createElement(TraceConnectors, {
+            import_react15.default.createElement(TraceConnectors, {
               layout: { ...baseLayout, sections: adjustedSections, worldHeight: worldH, spineX },
               rects: /* @__PURE__ */ new Map()
             }),
-            import_react14.default.createElement(
+            import_react15.default.createElement(
               "div",
               {
                 style: { position: "absolute", inset: 0, zIndex: 1 }
               },
               ...adjustedSections.filter((s) => s.stageId === "start").map(
-                (section) => import_react14.default.createElement(StartNode, {
+                (section) => import_react15.default.createElement(StartNode, {
                   key: "stage:start",
                   section,
                   x: spineX
                 })
               ),
               ...adjustedSections.filter((s) => s.stageId !== "start").map(
-                (section) => import_react14.default.createElement(StageNode, {
+                (section) => import_react15.default.createElement(StageNode, {
                   key: `stage:${section.stageId}`,
                   section,
                   x: spineX,
@@ -17460,7 +17941,7 @@ function TraceTimeline(props) {
               ),
               ...adjustedSections.flatMap(
                 (section) => section.agentBranches.map(
-                  (branch) => import_react14.default.createElement(AgentNode, {
+                  (branch) => import_react15.default.createElement(AgentNode, {
                     key: `agent:${branch.delegationId}`,
                     branch,
                     x: spineX + branch.x,
@@ -17475,7 +17956,7 @@ function TraceTimeline(props) {
                     (row3, ri) => row3.map((dx, gi) => {
                       const group = branch.deliveryGroups[ri * 3 + gi];
                       if (group === void 0) return null;
-                      return import_react14.default.createElement(DeliveryNode, {
+                      return import_react15.default.createElement(DeliveryNode, {
                         key: `delivery:${branch.delegationId}:${group.kind}`,
                         group,
                         x: spineX + dx,
@@ -17498,11 +17979,11 @@ function TraceTimeline(props) {
 function TraceView(props) {
   const { snapshot, liveActivity, onNavigate, onOpenSession, activeTargetId } = props;
   if (snapshot === null || snapshot.run === null) {
-    return import_react15.default.createElement("div", {
+    return import_react16.default.createElement("div", {
       style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
     }, "No execution trace yet");
   }
-  return import_react15.default.createElement(TraceTimeline, {
+  return import_react16.default.createElement(TraceTimeline, {
     snapshot,
     liveActivity,
     onNavigate,
@@ -17512,21 +17993,21 @@ function TraceView(props) {
 }
 
 // src/ui/client/pentester/OutputView.tsx
-var import_react17 = __toESM(require("react"), 1);
-var import_dsh_client_ui_primitives6 = require("@deepseek-ai/dsh-client-ui-primitives");
+var import_react18 = __toESM(require("react"), 1);
+var import_dsh_client_ui_primitives7 = require("@deepseek-ai/dsh-client-ui-primitives");
 
 // src/ui/client/pentester/FolderTreeRow.tsx
-var import_react16 = __toESM(require("react"), 1);
-var import_dsh_client_ui_primitives5 = require("@deepseek-ai/dsh-client-ui-primitives");
+var import_react17 = __toESM(require("react"), 1);
+var import_dsh_client_ui_primitives6 = require("@deepseek-ai/dsh-client-ui-primitives");
 function FolderTreeRow(props) {
   const { name, depth, defaultOpen = true, children, containsSelected = false } = props;
-  const [open, setOpen] = (0, import_react16.useState)(defaultOpen);
-  const hasChildren = children !== void 0 && import_react16.default.Children.count(children) > 0;
+  const [open, setOpen] = (0, import_react17.useState)(defaultOpen);
+  const hasChildren = children !== void 0 && import_react17.default.Children.count(children) > 0;
   const folderColor = containsSelected ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-label-secondary)";
-  return import_react16.default.createElement(
+  return import_react17.default.createElement(
     "div",
     null,
-    import_react16.default.createElement(
+    import_react17.default.createElement(
       "div",
       {
         role: "button",
@@ -17562,19 +18043,19 @@ function FolderTreeRow(props) {
         }
       },
       // Chevron
-      hasChildren ? import_react16.default.createElement(
+      hasChildren ? import_react17.default.createElement(
         "span",
         { style: { flexShrink: 0, color: "var(--dsw-alias-label-tertiary)" } },
-        import_react16.default.createElement(open ? import_dsh_client_ui_primitives5.IconChevronDownOutline14 : import_dsh_client_ui_primitives5.IconChevronRightOutline14, { size: 14 })
-      ) : import_react16.default.createElement("span", { style: { width: "14px", flexShrink: 0 } }),
+        import_react17.default.createElement(open ? import_dsh_client_ui_primitives6.IconChevronDownOutline14 : import_dsh_client_ui_primitives6.IconChevronRightOutline14, { size: 14 })
+      ) : import_react17.default.createElement("span", { style: { width: "14px", flexShrink: 0 } }),
       // Folder icon — color reflects selected ancestry
-      import_react16.default.createElement(
+      import_react17.default.createElement(
         "span",
         { style: { flexShrink: 0, color: folderColor } },
-        import_react16.default.createElement(open ? import_dsh_client_ui_primitives5.IconFolderOpen16 : import_dsh_client_ui_primitives5.IconFolderClose16, { size: 16 })
+        import_react17.default.createElement(open ? import_dsh_client_ui_primitives6.IconFolderOpen16 : import_dsh_client_ui_primitives6.IconFolderClose16, { size: 16 })
       ),
       // Name
-      import_react16.default.createElement("span", {
+      import_react17.default.createElement("span", {
         style: {
           overflow: "hidden",
           textOverflow: "ellipsis",
@@ -17582,12 +18063,12 @@ function FolderTreeRow(props) {
         }
       }, name)
     ),
-    open && hasChildren && import_react16.default.createElement("div", null, children)
+    open && hasChildren && import_react17.default.createElement("div", null, children)
   );
 }
 function FileRow(props) {
   const { name, depth, size, isSelected = false, onClick } = props;
-  return import_react16.default.createElement(
+  return import_react17.default.createElement(
     "div",
     {
       role: "button",
@@ -17622,10 +18103,10 @@ function FileRow(props) {
       }
     },
     // File icon placeholder (Harness doesn't have a specific file icon; use chevron space)
-    import_react16.default.createElement("span", {
+    import_react17.default.createElement("span", {
       style: { width: "14px", flexShrink: 0 }
     }),
-    import_react16.default.createElement("span", {
+    import_react17.default.createElement("span", {
       style: {
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -17634,7 +18115,7 @@ function FileRow(props) {
         minWidth: 0
       }
     }, name),
-    size !== void 0 && import_react16.default.createElement("span", {
+    size !== void 0 && import_react17.default.createElement("span", {
       style: {
         fontSize: "11px",
         color: "var(--dsw-alias-label-tertiary)",
@@ -17653,7 +18134,7 @@ var OUTPUT_FILTER_TABS = [
 ];
 function TargetIcon(props) {
   const s = props.size ?? 16;
-  return import_react17.default.createElement(
+  return import_react18.default.createElement(
     "svg",
     {
       width: s,
@@ -17667,13 +18148,13 @@ function TargetIcon(props) {
       "aria-hidden": true,
       style: { flexShrink: 0 }
     },
-    import_react17.default.createElement("circle", { cx: "8", cy: "8", r: "6.5" }),
-    import_react17.default.createElement("circle", { cx: "8", cy: "8", r: "3.5" }),
-    import_react17.default.createElement("circle", { cx: "8", cy: "8", r: "1", fill: "currentColor", stroke: "none" }),
-    import_react17.default.createElement("line", { x1: "8", y1: "1", x2: "8", y2: "3" }),
-    import_react17.default.createElement("line", { x1: "8", y1: "13", x2: "8", y2: "15" }),
-    import_react17.default.createElement("line", { x1: "1", y1: "8", x2: "3", y2: "8" }),
-    import_react17.default.createElement("line", { x1: "13", y1: "8", x2: "15", y2: "8" })
+    import_react18.default.createElement("circle", { cx: "8", cy: "8", r: "6.5" }),
+    import_react18.default.createElement("circle", { cx: "8", cy: "8", r: "3.5" }),
+    import_react18.default.createElement("circle", { cx: "8", cy: "8", r: "1", fill: "currentColor", stroke: "none" }),
+    import_react18.default.createElement("line", { x1: "8", y1: "1", x2: "8", y2: "3" }),
+    import_react18.default.createElement("line", { x1: "8", y1: "13", x2: "8", y2: "15" }),
+    import_react18.default.createElement("line", { x1: "1", y1: "8", x2: "3", y2: "8" }),
+    import_react18.default.createElement("line", { x1: "13", y1: "8", x2: "15", y2: "8" })
   );
 }
 function entryContainsSelected(entry, selectedPath) {
@@ -17684,12 +18165,12 @@ function entryContainsSelected(entry, selectedPath) {
 }
 function TargetRow(props) {
   const { targetId, target, current, defaultOpen, containsSelected, children } = props;
-  const [open, setOpen] = (0, import_react17.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react18.useState)(defaultOpen);
   const iconColor = containsSelected ? "var(--dsw-alias-state-business-primary)" : current ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-label-secondary)";
-  return import_react17.default.createElement(
+  return import_react18.default.createElement(
     "div",
     null,
-    import_react17.default.createElement(
+    import_react18.default.createElement(
       "div",
       {
         role: "button",
@@ -17725,7 +18206,7 @@ function TargetRow(props) {
           e.currentTarget.style.background = "transparent";
         }
       },
-      import_react17.default.createElement("span", {
+      import_react18.default.createElement("span", {
         style: {
           color: "var(--dsw-alias-label-tertiary)",
           flexShrink: 0,
@@ -17735,22 +18216,22 @@ function TargetRow(props) {
           width: "12px"
         }
       }, open ? "\u25BE" : "\u25B8"),
-      import_react17.default.createElement("span", {
+      import_react18.default.createElement("span", {
         style: {
           color: iconColor,
           flexShrink: 0,
           display: "flex",
           alignItems: "center"
         }
-      }, import_react17.default.createElement(TargetIcon, { size: 16 })),
-      import_react17.default.createElement("span", {
+      }, import_react18.default.createElement(TargetIcon, { size: 16 })),
+      import_react18.default.createElement("span", {
         style: {
           overflow: "hidden",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap"
         }
       }, target),
-      current && import_react17.default.createElement("span", {
+      current && import_react18.default.createElement("span", {
         style: {
           fontSize: "10px",
           color: "var(--dsw-alias-state-business-primary)",
@@ -17763,19 +18244,19 @@ function TargetRow(props) {
         }
       }, "active")
     ),
-    open && import_react17.default.createElement("div", { style: { marginLeft: "20px" } }, children)
+    open && import_react18.default.createElement("div", { style: { marginLeft: "20px" } }, children)
   );
 }
 function OutputView(props) {
-  const { snapshot, command, sessionId } = props;
-  const [filter, setFilter] = (0, import_react17.useState)("all");
-  const [preview, setPreview] = (0, import_react17.useState)(null);
-  const [previewContent, setPreviewContent] = (0, import_react17.useState)(null);
-  const [previewLoading, setPreviewLoading] = (0, import_react17.useState)(false);
-  const [outputTree, setOutputTree] = (0, import_react17.useState)(null);
-  const [outputLoading, setOutputLoading] = (0, import_react17.useState)(false);
-  const [outputError, setOutputError] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const { snapshot, command, sessionId, focusOutput } = props;
+  const [filter, setFilter] = (0, import_react18.useState)("all");
+  const [preview, setPreview] = (0, import_react18.useState)(null);
+  const [previewContent, setPreviewContent] = (0, import_react18.useState)(null);
+  const [previewLoading, setPreviewLoading] = (0, import_react18.useState)(false);
+  const [outputTree, setOutputTree] = (0, import_react18.useState)(null);
+  const [outputLoading, setOutputLoading] = (0, import_react18.useState)(false);
+  const [outputError, setOutputError] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     if (snapshot === null) return;
     let cancelled = false;
     setOutputLoading(true);
@@ -17801,7 +18282,7 @@ function OutputView(props) {
   const targetTrees = outputTree !== null ? [outputTree] : [];
   const selectedPath = preview?.entry.path ?? null;
   const selectedTargetId = preview?.targetId ?? null;
-  const filteredTargets = (0, import_react17.useMemo)(() => {
+  const filteredTargets = (0, import_react18.useMemo)(() => {
     const base = filter === "all" ? targetTrees : (() => {
       const categoryMap = {
         all: [],
@@ -17822,7 +18303,7 @@ function OutputView(props) {
       )
     }));
   }, [targetTrees, filter, selectedPath, selectedTargetId]);
-  const openPreview = (0, import_react17.useCallback)(async (entry, targetId) => {
+  const openPreview = (0, import_react18.useCallback)(async (entry, targetId) => {
     if (entry.kind === "directory") return;
     setPreview({ entry, targetId });
     setPreviewContent(null);
@@ -17845,27 +18326,37 @@ function OutputView(props) {
       setPreviewLoading(false);
     }
   }, [command, sessionId]);
-  const closePreview = (0, import_react17.useCallback)(() => {
+  const closePreview = (0, import_react18.useCallback)(() => {
     setPreview(null);
     setPreviewContent(null);
   }, []);
+  const focusAppliedRef = (0, import_react18.useRef)(void 0);
+  (0, import_react18.useEffect)(() => {
+    if (focusOutput === void 0 || focusOutput === focusAppliedRef.current) return;
+    if (outputTree === null) return;
+    focusAppliedRef.current = focusOutput;
+    const entry = findEntryByPath(outputTree.children, focusOutput);
+    if (entry !== void 0) {
+      openPreview(entry, outputTree.targetId);
+    }
+  }, [focusOutput, outputTree, openPreview]);
   const initialLoading = outputTree === null && outputLoading;
   if (initialLoading) {
-    return import_react17.default.createElement("div", {
+    return import_react18.default.createElement("div", {
       style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
     }, "Loading output tree...");
   }
   if (outputError !== null) {
-    return import_react17.default.createElement(
+    return import_react18.default.createElement(
       "div",
       { style: { padding: "24px" } },
-      import_react17.default.createElement("div", {
+      import_react18.default.createElement("div", {
         style: { color: "var(--dsw-status-error)", marginBottom: "12px", fontSize: "14px" }
       }, "Unable to load output tree"),
-      import_react17.default.createElement("div", {
+      import_react18.default.createElement("div", {
         style: { color: "var(--dsw-alias-label-tertiary)", fontSize: "12px", marginBottom: "12px" }
       }, outputError),
-      import_react17.default.createElement("button", {
+      import_react18.default.createElement("button", {
         onClick: () => {
           setOutputError(null);
           setOutputTree(null);
@@ -17895,48 +18386,66 @@ function OutputView(props) {
     );
   }
   if (snapshot === null) {
-    return import_react17.default.createElement("div", {
+    return import_react18.default.createElement("div", {
       style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
     }, "No output data");
   }
   if (targetTrees.length === 0) {
-    return import_react17.default.createElement("div", {
+    return import_react18.default.createElement("div", {
       style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
     }, "No output files");
   }
-  return import_react17.default.createElement(
+  return import_react18.default.createElement(
     "div",
     {
-      style: { display: "flex", gap: "16px", minHeight: "400px", overflow: "visible" }
+      style: { display: "flex", gap: "16px", flex: 1, height: "100%", minHeight: 0, minWidth: 0, overflow: "hidden" }
     },
     // Left: file tree
-    import_react17.default.createElement(
+    import_react18.default.createElement(
       "div",
       {
         style: {
           flex: "0 0 320px",
-          overflow: "auto",
-          borderRight: "1px solid var(--dsw-alias-border-l2)",
-          paddingRight: "12px",
+          minHeight: 0,
+          overflow: "hidden",
           display: "flex",
-          flexDirection: "column"
+          flexDirection: "column",
+          borderRight: "1px solid var(--dsw-alias-border-l2)",
+          paddingRight: "12px"
         }
       },
-      import_react17.default.createElement(
+      // Filter tabs (fixed)
+      import_react18.default.createElement(
         "div",
-        { style: { marginBottom: "12px" } },
-        import_react17.default.createElement(PentesterTabBar, {
+        {
+          style: {
+            flex: "none",
+            marginBottom: "12px",
+            paddingTop: "2px"
+          }
+        },
+        import_react18.default.createElement(PentesterTabBar, {
           items: OUTPUT_FILTER_TABS,
           active: filter,
           onSelect: (id) => setFilter(id),
           variant: "compact"
         })
       ),
-      // ── Tree: "Targets" section label + target rows at root depth ─────
-      import_react17.default.createElement(
+      // ── TreeViewport (scrollable) ──────────────────────────────────
+      import_react18.default.createElement(
         "div",
-        { style: { flex: 1 } },
-        import_react17.default.createElement("div", {
+        {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            minWidth: 0,
+            overflowY: "auto",
+            overflowX: "hidden",
+            overscrollBehaviorY: "contain",
+            scrollbarGutter: "stable"
+          }
+        },
+        import_react18.default.createElement("div", {
           style: {
             fontSize: "11px",
             fontWeight: 600,
@@ -17948,7 +18457,7 @@ function OutputView(props) {
           }
         }, "Targets"),
         ...filteredTargets.map(
-          (t) => import_react17.default.createElement(TargetRow, {
+          (t) => import_react18.default.createElement(TargetRow, {
             key: t.targetId,
             targetId: t.targetId,
             target: t.target,
@@ -17963,23 +18472,22 @@ function OutputView(props) {
       )
     ),
     // Right: preview frame
-    import_react17.default.createElement(
+    import_react18.default.createElement(
       "div",
       {
         style: {
           flex: 1,
           minWidth: 0,
+          minHeight: 0,
           display: "flex",
           flexDirection: "column",
           overflow: "hidden",
           border: "1px solid var(--dsw-alias-border-l2)",
           borderRadius: "8px",
-          background: "var(--dsw-alias-bg-base)",
-          minHeight: "320px",
-          maxHeight: "clamp(320px, 65vh, 680px)"
+          background: "var(--dsw-alias-bg-base)"
         }
       },
-      preview === null ? import_react17.default.createElement("div", {
+      preview === null ? import_react18.default.createElement("div", {
         style: {
           flex: 1,
           display: "flex",
@@ -17988,43 +18496,77 @@ function OutputView(props) {
           color: "var(--dsw-alias-label-tertiary)",
           fontSize: "13px"
         }
-      }, "Select a file to preview") : import_react17.default.createElement(
-        import_react17.default.Fragment,
+      }, "Select a file to preview") : import_react18.default.createElement(
+        import_react18.default.Fragment,
         null,
-        import_react17.default.createElement(
+        // PreviewHeader (fixed)
+        import_react18.default.createElement(
           "div",
           {
             style: {
               flex: "none",
               display: "flex",
               alignItems: "center",
-              justifyContent: "space-between",
               padding: "8px 12px",
               borderBottom: "1px solid var(--dsw-alias-border-l2)"
             }
           },
-          import_react17.default.createElement("div", {
-            style: { fontSize: "13px", fontWeight: 600, color: "var(--dsw-alias-label-primary)" }
-          }, preview.entry.name),
-          import_react17.default.createElement("button", {
-            onClick: closePreview,
+          // Filename
+          import_react18.default.createElement("div", {
             style: {
-              background: "none",
-              border: "none",
-              color: "var(--dsw-alias-label-tertiary)",
-              cursor: "pointer",
-              fontSize: "18px",
-              padding: "0 4px"
+              flex: 1,
+              minWidth: 0,
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--dsw-alias-label-primary)",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }
+          }, preview.entry.name),
+          // Actions
+          import_react18.default.createElement(
+            "div",
+            {
+              style: {
+                flex: "none",
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                marginLeft: "8px"
+              }
             },
-            "aria-label": "Close preview"
-          }, "\xD7")
+            previewContent !== null && previewContent.content !== void 0 && previewContent.mime !== "binary" && import_react18.default.createElement(CopyAction, { text: previewContent.content }),
+            import_react18.default.createElement("button", {
+              onClick: closePreview,
+              style: {
+                background: "none",
+                border: "none",
+                color: "var(--dsw-alias-label-tertiary)",
+                cursor: "pointer",
+                fontSize: "18px",
+                padding: "0 4px"
+              },
+              "aria-label": "Close preview"
+            }, "\xD7")
+          )
         ),
-        import_react17.default.createElement(
+        // PreviewBody (scrollable)
+        import_react18.default.createElement(
           "div",
           {
-            style: { flex: 1, minHeight: 0, overflow: "auto", padding: "12px" }
+            style: {
+              flex: 1,
+              minHeight: 0,
+              minWidth: 0,
+              overflowY: "auto",
+              overflowX: "auto",
+              overscrollBehaviorY: "contain",
+              scrollbarGutter: "stable",
+              padding: "12px"
+            }
           },
-          previewLoading && import_react17.default.createElement("div", {
+          previewLoading && import_react18.default.createElement("div", {
             style: { color: "var(--dsw-alias-label-tertiary)", padding: "16px 0" }
           }, "Loading..."),
           previewContent !== null && renderPreview(previewContent)
@@ -18037,7 +18579,7 @@ function renderOutputTree(entry, depth, targetId, onSelect, selected, selectedPa
   if (entry.kind === "directory" && entry.children !== void 0 && entry.children.length > 0) {
     const isSelectedTarget = selectedTargetId === targetId;
     const containsSelected = isSelectedTarget && entryContainsSelected(entry, selectedPath);
-    return import_react17.default.createElement(FolderTreeRow, {
+    return import_react18.default.createElement(FolderTreeRow, {
       key: `${targetId}:${entry.path}`,
       name: entry.name,
       depth,
@@ -18049,7 +18591,7 @@ function renderOutputTree(entry, depth, targetId, onSelect, selected, selectedPa
     });
   }
   const isSelected = selected?.entry.path === entry.path && selected?.targetId === targetId;
-  return import_react17.default.createElement(FileRow, {
+  return import_react18.default.createElement(FileRow, {
     key: `${targetId}:${entry.path}`,
     name: entry.name,
     depth,
@@ -18060,33 +18602,33 @@ function renderOutputTree(entry, depth, targetId, onSelect, selected, selectedPa
 }
 function renderPreview(result) {
   if (result.mime === "binary") {
-    return import_react17.default.createElement(
+    return import_react18.default.createElement(
       "div",
       {
         style: { color: "var(--dsw-alias-label-tertiary)", fontSize: "13px", padding: "16px" }
       },
-      import_react17.default.createElement("div", { style: { marginBottom: "8px" } }, "Preview unavailable"),
-      import_react17.default.createElement("div", { style: { fontSize: "12px" } }, `Binary file \xB7 ${formatSize(result.size)}`),
-      import_react17.default.createElement("div", { style: { fontSize: "12px" } }, result.path)
+      import_react18.default.createElement("div", { style: { marginBottom: "8px" } }, "Preview unavailable"),
+      import_react18.default.createElement("div", { style: { fontSize: "12px" } }, `Binary file \xB7 ${formatSize(result.size)}`),
+      import_react18.default.createElement("div", { style: { fontSize: "12px" } }, result.path)
     );
   }
   if (result.content === void 0) {
-    return import_react17.default.createElement("div", {
+    return import_react18.default.createElement("div", {
       style: { color: "var(--dsw-alias-label-tertiary)", fontSize: "13px" }
     }, "No content available");
   }
   if (result.mime === "markdown") {
-    return import_react17.default.createElement(import_dsh_client_ui_primitives6.MarkdownText, { text: result.content });
+    return import_react18.default.createElement(import_dsh_client_ui_primitives7.MarkdownText, { text: result.content });
   }
   if (result.mime === "json") {
     try {
       const parsed = JSON.parse(result.content);
-      return import_react17.default.createElement(import_dsh_client_ui_primitives6.JsonTree, { data: parsed, label: result.name });
+      return import_react18.default.createElement(import_dsh_client_ui_primitives7.JsonTree, { data: parsed, label: result.name });
     } catch {
     }
   }
   const lines = result.content.split("\n");
-  return import_react17.default.createElement(import_dsh_client_ui_primitives6.ReadBlock, {
+  return import_react18.default.createElement(import_dsh_client_ui_primitives7.ReadBlock, {
     lines: lines.map((text, i) => ({ number: i + 1, text })),
     totalLines: lines.length,
     maxLines: 500
@@ -18109,6 +18651,16 @@ function formatSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function findEntryByPath(entries, targetPath) {
+  for (const entry of entries) {
+    if (entry.path === targetPath) return entry;
+    if (entry.kind === "directory" && entry.children !== void 0) {
+      const found = findEntryByPath(entry.children, targetPath);
+      if (found !== void 0) return found;
+    }
+  }
+  return void 0;
+}
 
 // src/ui/client/pentester-view.tsx
 var CORE_REFRESH_MS = 1e4;
@@ -18151,13 +18703,13 @@ function resolveDelegationPresentationState(delegation, sessionList, rootSession
   return "unknown";
 }
 function useDelegationActivity(sessions, rootSessionId, delegations) {
-  const delegationSessionIds = (0, import_react18.useMemo)(
+  const delegationSessionIds = (0, import_react19.useMemo)(
     () => new Set(delegations.filter((d) => d.sessionId !== void 0).map((d) => d.sessionId)),
     [delegations]
   );
-  const prevSigRef = (0, import_react18.useRef)("");
-  const cachedMapRef = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
-  const getSnapshot = (0, import_react18.useCallback)(() => {
+  const prevSigRef = (0, import_react19.useRef)("");
+  const cachedMapRef = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
+  const getSnapshot = (0, import_react19.useCallback)(() => {
     const raw = sessions?.list.getSnapshot();
     if (raw === void 0) return cachedMapRef.current;
     const sig = computeActivitySignature(raw, rootSessionId, delegationSessionIds);
@@ -18171,7 +18723,7 @@ function useDelegationActivity(sessions, rootSessionId, delegations) {
     cachedMapRef.current = map2;
     return map2;
   }, [sessions, rootSessionId, delegationSessionIds, delegations]);
-  return (0, import_react18.useSyncExternalStore)(
+  return (0, import_react19.useSyncExternalStore)(
     sessions?.list.subscribe ?? (() => () => {
     }),
     getSnapshot
@@ -18183,7 +18735,7 @@ var RPC_PREFIX = "[PENTESTER_RPC]";
 var isPerf = typeof window !== "undefined" && window.__DSH_PENTESTER_PERF === true;
 function PentesterView(props) {
   const { sessionId, reflect, sessions, useSession, sessionSwitchTimes: sessionSwitchTimes2, sessionPerf } = props;
-  const mountTime = (0, import_react18.useRef)(performance.now());
+  const mountTime = (0, import_react19.useRef)(performance.now());
   const switchTime = sessionSwitchTimes2?.get(sessionId);
   if (isPerf) {
     console.log(`${PERF_PREFIX} mount=0ms`);
@@ -18192,8 +18744,8 @@ function PentesterView(props) {
     }
   }
   const openState = useSession?.((s) => s.openState);
-  const prevOpenState = (0, import_react18.useRef)(void 0);
-  (0, import_react18.useEffect)(() => {
+  const prevOpenState = (0, import_react19.useRef)(void 0);
+  (0, import_react19.useEffect)(() => {
     if (!sessionPerf || openState === void 0) return;
     if (openState !== prevOpenState.current) {
       const elapsed = (performance.now() - mountTime.current).toFixed(0);
@@ -18219,27 +18771,27 @@ function PentesterView(props) {
       prevOpenState.current = openState;
     }
   }, [openState, sessionPerf, switchTime]);
-  const [tab, setTab] = (0, import_react18.useState)("overview");
-  const [dataState, setDataState] = (0, import_react18.useState)({ kind: "initial" });
-  const [requestState, setRequestState] = (0, import_react18.useState)("idle");
-  const [navFocus, setNavFocus] = (0, import_react18.useState)({});
-  const [activeTargetId, setActiveTargetId] = (0, import_react18.useState)(null);
-  const requestSeqRef = (0, import_react18.useRef)(0);
-  const pendingRef = (0, import_react18.useRef)(null);
-  const mountedRef = (0, import_react18.useRef)(true);
-  const firstLoadDone = (0, import_react18.useRef)(false);
-  const pollingPausedRef = (0, import_react18.useRef)(false);
-  const backoffRef = (0, import_react18.useRef)(0);
-  const timerRef = (0, import_react18.useRef)(null);
-  const snapshotRef = (0, import_react18.useRef)(null);
-  const pentesterCommand = (0, import_react18.useCallback)((input2, timeoutMs) => {
+  const [tab, setTab] = (0, import_react19.useState)("overview");
+  const [dataState, setDataState] = (0, import_react19.useState)({ kind: "initial" });
+  const [requestState, setRequestState] = (0, import_react19.useState)("idle");
+  const [navFocus, setNavFocus] = (0, import_react19.useState)({});
+  const [activeTargetId, setActiveTargetId] = (0, import_react19.useState)(null);
+  const requestSeqRef = (0, import_react19.useRef)(0);
+  const pendingRef = (0, import_react19.useRef)(null);
+  const mountedRef = (0, import_react19.useRef)(true);
+  const firstLoadDone = (0, import_react19.useRef)(false);
+  const pollingPausedRef = (0, import_react19.useRef)(false);
+  const backoffRef = (0, import_react19.useRef)(0);
+  const timerRef = (0, import_react19.useRef)(null);
+  const snapshotRef = (0, import_react19.useRef)(null);
+  const pentesterCommand = (0, import_react19.useCallback)((input2, timeoutMs) => {
     const currentFace = reflect?.get("remote.pentesterView");
     return pentesterViewCommand(currentFace, input2, timeoutMs);
   }, [reflect]);
   const snapshot = dataState.kind === "bound" ? dataState.snapshot : null;
   const delegations = snapshot?.delegations ?? [];
   const liveActivity = useDelegationActivity(sessions, sessionId, delegations);
-  const loadSnapshot = (0, import_react18.useCallback)(async (reason) => {
+  const loadSnapshot = (0, import_react19.useCallback)(async (reason) => {
     if (reason !== "retry" && reason !== "refresh" && getPentesterEndpointState() === "missing") {
       if (isPerf) console.log(`${RPC_PREFIX} circuit-open endpoint=missing reason=${reason}`);
       return;
@@ -18357,7 +18909,7 @@ Client: ${mismatch.client}`,
       }
     }
   }, [pentesterCommand, sessionId, switchTime]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     mountedRef.current = true;
     pollingPausedRef.current = false;
     backoffRef.current = 0;
@@ -18385,7 +18937,7 @@ Client: ${mismatch.client}`,
       if (timerRef.current !== null) clearTimeout(timerRef.current);
     };
   }, [loadSnapshot]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const onVisible = () => {
       if (document.visibilityState === "visible" && mountedRef.current && firstLoadDone.current && !pollingPausedRef.current) {
         loadSnapshot("visible");
@@ -18394,11 +18946,11 @@ Client: ${mismatch.client}`,
     document.addEventListener("visibilitychange", onVisible);
     return () => document.removeEventListener("visibilitychange", onVisible);
   }, [loadSnapshot]);
-  const navigate = (0, import_react18.useCallback)((targetTab, focus) => {
+  const navigate = (0, import_react19.useCallback)((targetTab, focus) => {
     setTab(targetTab);
     if (focus !== void 0) setNavFocus(focus);
   }, []);
-  const openSession = (0, import_react18.useCallback)((id) => {
+  const openSession = (0, import_react19.useCallback)((id) => {
     sessions?.open(id);
   }, [sessions]);
   const isInitialLoading = dataState.kind === "initial" && requestState === "pending";
@@ -18406,28 +18958,28 @@ Client: ${mismatch.client}`,
   const errorMsg = dataState.kind === "error" ? dataState.error : null;
   const errorCode = dataState.kind === "error" ? dataState.code : null;
   const hasSnapshot = snapshot !== null;
-  return import_react18.default.createElement(
+  return import_react19.default.createElement(
     "div",
     {
       "data-testid": "pentester-view",
       "data-pentester-view": "",
+      "data-conversation-composer-overlay": "",
       style: {
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        minHeight: "100%",
-        overflow: "visible"
+        height: "100%",
+        minHeight: 0,
+        overflow: "hidden"
       }
     },
     // ── Layer 1: TabsBar (sticky) ────────────────────────────────────────
-    import_react18.default.createElement(
+    import_react19.default.createElement(
       "div",
       {
         "data-testid": "pentester-tabs-bar",
         style: {
           flex: "none",
-          position: "sticky",
-          top: 0,
           zIndex: 29,
           background: "var(--dsw-alias-bg-base)",
           borderBottom: "1px solid var(--dsw-alias-border-l2)",
@@ -18436,7 +18988,7 @@ Client: ${mismatch.client}`,
           boxSizing: "border-box"
         }
       },
-      import_react18.default.createElement(PentesterTabBar, {
+      import_react19.default.createElement(PentesterTabBar, {
         items: PENTESTER_TABS.map((t) => ({
           id: t.id,
           label: t.id.charAt(0).toUpperCase() + t.id.slice(1)
@@ -18447,7 +18999,7 @@ Client: ${mismatch.client}`,
     ),
     // ── Refresh error banner ──────────────────────────────────────────────
     // Stale-while-revalidate: error + last good snapshot → show banner
-    errorMsg !== null && hasSnapshot && import_react18.default.createElement(
+    errorMsg !== null && hasSnapshot && import_react19.default.createElement(
       "div",
       {
         style: {
@@ -18461,8 +19013,8 @@ Client: ${mismatch.client}`,
           alignItems: "center"
         }
       },
-      import_react18.default.createElement("span", null, errorMsg),
-      import_react18.default.createElement("button", {
+      import_react19.default.createElement("span", null, errorMsg),
+      import_react19.default.createElement("button", {
         onClick: () => {
           if (pendingRef.current === null) {
             void loadSnapshot("retry");
@@ -18482,29 +19034,32 @@ Client: ${mismatch.client}`,
         }
       }, isRetrying ? "Retrying\u2026" : "Retry")
     ),
-    // ── Body: flex 1, no scroll ──────────────────────────────────────────
-    import_react18.default.createElement(
+    // ── Body: bounded flex viewport ────────────────────────────────────
+    import_react19.default.createElement(
       "div",
       {
         style: {
           flex: 1,
           minHeight: 0,
-          overflow: "visible",
-          padding: "16px"
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          padding: "16px",
+          boxSizing: "border-box"
         }
       },
       // Initial loading: shell is already visible, show skeleton
-      isInitialLoading && import_react18.default.createElement("div", {
+      isInitialLoading && import_react19.default.createElement("div", {
         style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
       }, "Loading..."),
       // Error state (no last good snapshot)
-      dataState.kind === "error" && !hasSnapshot && import_react18.default.createElement(
+      dataState.kind === "error" && !hasSnapshot && import_react19.default.createElement(
         "div",
         { style: { padding: "24px" } },
-        import_react18.default.createElement("div", {
+        import_react19.default.createElement("div", {
           style: { color: "var(--dsw-status-error)", marginBottom: "12px", fontSize: "14px" }
         }, errorMsg ?? "Unknown error"),
-        import_react18.default.createElement("button", {
+        import_react19.default.createElement("button", {
           onClick: () => {
             if (pendingRef.current === null) {
               void loadSnapshot("retry");
@@ -18524,20 +19079,20 @@ Client: ${mismatch.client}`,
         }, isRetrying ? "Retrying\u2026" : "Retry")
       ),
       // Unbound state
-      dataState.kind === "unbound" && import_react18.default.createElement(
+      dataState.kind === "unbound" && import_react19.default.createElement(
         "div",
         { style: { padding: "24px" } },
-        import_react18.default.createElement("div", {
+        import_react19.default.createElement("div", {
           style: { fontSize: "14px", color: "var(--dsw-alias-label-tertiary)", marginBottom: "16px" }
         }, "This session is not bound to a pentest target."),
-        dataState.targets.length > 0 && import_react18.default.createElement(
+        dataState.targets.length > 0 && import_react19.default.createElement(
           "div",
           { style: { marginBottom: "12px" } },
-          import_react18.default.createElement("div", {
+          import_react19.default.createElement("div", {
             style: { fontSize: "13px", fontWeight: 600, marginBottom: "8px", color: "var(--dsw-alias-label-primary)" }
           }, "Existing targets"),
           ...dataState.targets.map(
-            (t) => import_react18.default.createElement(
+            (t) => import_react19.default.createElement(
               "div",
               {
                 key: t.id,
@@ -18552,17 +19107,17 @@ Client: ${mismatch.client}`,
                   fontSize: "13px"
                 }
               },
-              import_react18.default.createElement(
+              import_react19.default.createElement(
                 "div",
                 null,
-                import_react18.default.createElement("div", { style: { fontWeight: 500 } }, t.target),
-                import_react18.default.createElement(
+                import_react19.default.createElement("div", { style: { fontWeight: 500 } }, t.target),
+                import_react19.default.createElement(
                   "div",
                   { style: { color: "var(--dsw-alias-label-tertiary)", fontSize: "12px" } },
                   `${t.currentStage ?? "unknown"} \xB7 ${t.status}`
                 )
               ),
-              t.rootSessionId !== null && import_react18.default.createElement("button", {
+              t.rootSessionId !== null && import_react19.default.createElement("button", {
                 onClick: () => sessions?.open(t.rootSessionId),
                 style: {
                   padding: "4px 12px",
@@ -18577,7 +19132,7 @@ Client: ${mismatch.client}`,
             )
           )
         ),
-        import_react18.default.createElement("button", {
+        import_react19.default.createElement("button", {
           onClick: () => {
             if (pendingRef.current === null) {
               void loadSnapshot("refresh");
@@ -18597,38 +19152,59 @@ Client: ${mismatch.client}`,
           }
         }, "Refresh")
       ),
-      // Bound content
-      dataState.kind === "bound" && import_react18.default.createElement(
-        import_react18.default.Fragment,
-        null,
-        tab === "overview" && import_react18.default.createElement(OverviewView, {
-          snapshot,
-          liveActivity,
-          onNavigate: navigate,
-          onOpenSession: openSession
-        }),
-        tab === "stages" && import_react18.default.createElement(StagesView, {
-          snapshot,
-          liveActivity,
-          onNavigate: navigate,
-          onOpenSession: openSession,
-          focusStage: navFocus.stage
-        }),
-        tab === "findings" && import_react18.default.createElement(FindingsView, {
+      // Bound content — wrapped in a bounded viewport
+      dataState.kind === "bound" && import_react19.default.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            minWidth: 0,
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column"
+          }
+        },
+        tab === "overview" && import_react19.default.createElement(
+          ScrollablePage,
+          null,
+          import_react19.default.createElement(OverviewView, {
+            snapshot,
+            liveActivity,
+            onNavigate: navigate,
+            onOpenSession: openSession
+          })
+        ),
+        tab === "stages" && import_react19.default.createElement(
+          ScrollablePage,
+          null,
+          import_react19.default.createElement(StagesView, {
+            snapshot,
+            liveActivity,
+            onNavigate: navigate,
+            onOpenSession: openSession,
+            focusStage: navFocus.stage
+          })
+        ),
+        tab === "findings" && import_react19.default.createElement(FindingsView, {
           snapshot,
           command: pentesterCommand,
           sessionId,
           onNavigate: navigate,
           focusFinding: navFocus.finding
         }),
-        tab === "trace" && import_react18.default.createElement(TraceView, {
-          snapshot,
-          liveActivity,
-          onNavigate: navigate,
-          onOpenSession: openSession,
-          activeTargetId
-        }),
-        tab === "output" && import_react18.default.createElement(OutputView, {
+        tab === "trace" && import_react19.default.createElement(
+          ScrollablePage,
+          null,
+          import_react19.default.createElement(TraceView, {
+            snapshot,
+            liveActivity,
+            onNavigate: navigate,
+            onOpenSession: openSession,
+            activeTargetId
+          })
+        ),
+        tab === "output" && import_react19.default.createElement(OutputView, {
           snapshot,
           command: pentesterCommand,
           sessionId,
@@ -18638,6 +19214,17 @@ Client: ${mismatch.client}`,
     )
   );
 }
+function ScrollablePage(props) {
+  return import_react19.default.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
+      overflowY: "auto",
+      overflowX: "hidden",
+      overscrollBehavior: "contain"
+    }
+  }, props.children);
+}
 
 // src/ui/client/pentester/locales.ts
 var NS = "dsh-pentester-view";
@@ -18719,7 +19306,7 @@ var en = {
 };
 
 // src/build-id.ts
-var BUILD_ID = "2.2.0+478786d";
+var BUILD_ID = "2.4.0+3a85fc6";
 
 // src/ui/client/plugin.tsx
 var SESSION_SWITCH_PERF = "[SESSION_SWITCH_PERF]";
@@ -18747,7 +19334,7 @@ function getRemoteMountError() {
 }
 var inject = ["slots", "remote", "sessions", "locale"];
 function apply(ctx) {
-  console.log(`[dsh-pentester] client build=${BUILD_ID}`);
+  console.log(`[dsh-pentester/client] build=${BUILD_ID}`);
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), "pentester: locale");
   ctx.effect(() => {
     let disposeMount;
@@ -18780,17 +19367,20 @@ function apply(ctx) {
           if (result.ok && result.value !== null && typeof result.value === "object" && "ok" in result.value) {
             const inner = result.value.value;
             if (inner?.ready === true && typeof inner.buildId === "string") {
+              console.log(`[dsh-pentester/client] health host=${inner.buildId} client=${BUILD_ID}`);
               if (inner.buildId === BUILD_ID) {
+                if (buildMismatch !== null) {
+                  console.log(`[dsh-pentester/client] build mismatch cleared (was host=${buildMismatch.host} client=${buildMismatch.client})`);
+                }
                 buildMismatch = null;
-                console.log(`[dsh-pentester] health check passed host=${inner.buildId} client=${BUILD_ID}`);
               } else {
                 buildMismatch = { host: inner.buildId, client: BUILD_ID };
-                console.error(`[dsh-pentester] BUILD MISMATCH host=${inner.buildId} client=${BUILD_ID}`);
+                console.error(`[dsh-pentester/client] build mismatch set host=${inner.buildId} client=${BUILD_ID}`);
               }
             }
           }
         } catch (error51) {
-          console.warn("[dsh-pentester] build health check unavailable", error51);
+          console.warn("[dsh-pentester/client] build health check unavailable", error51);
         }
       })();
     }).catch((error51) => {
@@ -18816,7 +19406,7 @@ function apply(ctx) {
           return { command: (input2) => dockerCommand(face, input2) };
         }
       },
-      (props) => import_react19.default.createElement(PentesterConfigSection, { ...props })
+      (props) => import_react20.default.createElement(PentesterConfigSection, { ...props })
     )
   );
   ctx.slots.inject("conversation.view", () => {
@@ -18863,7 +19453,7 @@ function apply(ctx) {
               }
             },
             (props) => {
-              return import_react19.default.createElement(PentesterView, {
+              return import_react20.default.createElement(PentesterView, {
                 sessionId: props.sessionId,
                 reflect: props.reflect,
                 sessions: props.sessions,