dsh-pentester 2.2.0 → 2.3.0

package/lib/client.js

@@ -16117,170 +16117,587 @@ 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 { snapshot, command, sessionId, onNavigate } = props;
+  const findings = snapshot?.findings ?? [];
+  const [selectedId, setSelectedId] = (0, import_react10.useState)(null);
   const [detailContent, setDetailContent] = (0, import_react10.useState)(null);
   const [detailLoading, setDetailLoading] = (0, import_react10.useState)(false);
-  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 [detailError, setDetailError] = (0, import_react10.useState)(false);
+  const [filter, setFilter] = (0, import_react10.useState)("all");
+  const [search, setSearch] = (0, import_react10.useState)("");
+  const [focusDone, setFocusDone] = (0, import_react10.useState)(false);
+  const loadSeqRef = (0, import_react10.useRef)(0);
+  const severityCounts = (0, import_react10.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_react10.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_react10.useMemo)(
+    () => selectedId !== null ? findings.find((f) => f.id === selectedId) ?? null : null,
+    [findings, selectedId]
+  );
+  (0, import_react10.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_react10.useEffect)(() => {
+    setFocusDone(false);
+  }, [props.focusFinding]);
+  const loadDetail = (0, import_react10.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_react10.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+        overflow: "hidden"
+      }
+    },
+    // ── Top: severity summary strip ──────────────────────────────────────
+    import_react10.default.createElement(SeveritySummary, {
+      total: findings.length,
+      counts: severityCounts,
+      activeFilter: filter,
+      onFilter: setFilter
+    }),
+    // ── Bottom: split view ───────────────────────────────────────────────
+    import_react10.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          overflow: "hidden"
+        }
+      },
+      // ── Left: Navigator ───────────────────────────────────────────────
+      import_react10.default.createElement(
+        "div",
+        {
+          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_react10.default.createElement(
+          "div",
+          {
+            style: {
+              flex: "none",
+              padding: "8px 12px 4px"
+            }
+          },
+          import_react10.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_react10.default.createElement(PentesterTabBar, {
+            items: FILTER_TABS,
+            active: filter,
+            onSelect: (id) => setFilter(id),
+            variant: "compact"
+          })
+        ),
+        // FindingList (scrollable)
+        import_react10.default.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              overflowX: "hidden",
+              overscrollBehaviorY: "contain",
+              scrollbarGutter: "stable"
+            }
+          },
+          filtered.length === 0 ? import_react10.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_react10.default.createElement(FindingRow, {
+              key: finding.id,
+              finding,
+              isSelected: finding.id === selectedId,
+              onClick: () => loadDetail(finding)
+            })
+          )
+        )
+      ),
+      // ── Right: Detail ──────────────────────────────────────────────────
+      import_react10.default.createElement(
         "div",
         {
-          key: finding.id,
           style: {
+            flex: 1,
+            minWidth: 0,
+            minHeight: 0,
             display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          }
+        },
+        selectedFinding === null ? import_react10.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_react10.default.createElement(
+            import_react10.default.Fragment,
+            null,
+            import_react10.default.createElement("div", { style: { fontWeight: 500, color: "var(--dsw-alias-label-primary)" } }, "No findings yet"),
+            import_react10.default.createElement("div", null, "Validated findings will appear here as the assessment progresses.")
+          ) : "Select a finding to inspect"
+        ) : import_react10.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_react10.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_react10.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_react10.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_react10.default.createElement("span", null, item.label),
+        import_react10.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_react10.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";
+      }
     },
+    // Row 1: title + severity
     import_react10.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_react10.default.createElement("span", {
+        style: {
+          width: "7px",
+          height: "7px",
+          borderRadius: "50%",
+          background: color,
+          flexShrink: 0
+        }
+      }),
+      import_react10.default.createElement("span", {
+        style: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          fontWeight: 500,
+          flex: 1,
+          minWidth: 0
+        }
+      }, finding.title),
+      import_react10.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;
+      }, SEVERITY_LABELS[finding.severity].toUpperCase())
+    ),
+    // Row 2: affected asset (if exists)
+    finding.affectedAsset !== void 0 && import_react10.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_react10.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_react10.default.createElement(
     "div",
-    { style: { maxWidth: "640px" } },
-    ...severitySections,
-    modalContent
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      }
+    },
+    // ── Metadata header (fixed) ─────────────────────────────────────────
+    import_react10.default.createElement(
+      "div",
+      {
+        style: {
+          flex: "none",
+          padding: "12px 16px",
+          borderBottom: "1px solid var(--dsw-alias-border-l2)"
+        }
+      },
+      // Title + severity
+      import_react10.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            marginBottom: "8px"
+          }
+        },
+        import_react10.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),
+        import_react10.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_react10.default.createElement(
+        "div",
+        {
+          style: {
+            fontSize: "13px",
+            color: "var(--dsw-alias-label-secondary)",
+            marginBottom: "6px",
+            display: "flex",
+            gap: "6px"
+          }
+        },
+        import_react10.default.createElement("span", { style: { color: "var(--dsw-alias-label-tertiary)", flexShrink: 0 } }, "Affected asset"),
+        import_react10.default.createElement("code", {
+          style: {
+            fontSize: "12px",
+            background: "var(--dsw-alias-bg-subtle)",
+            padding: "1px 6px",
+            borderRadius: "3px"
+          }
+        }, finding.affectedAsset)
+      ),
+      // Stage + Delegation metadata
+      import_react10.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "20px",
+            fontSize: "12px",
+            color: "var(--dsw-alias-label-tertiary)"
+          }
+        },
+        import_react10.default.createElement(
+          "div",
+          null,
+          import_react10.default.createElement("span", { style: { fontWeight: 500, color: "var(--dsw-alias-label-secondary)" } }, "Stage"),
+          " ",
+          import_react10.default.createElement("span", null, finding.sourceStage)
+        ),
+        import_react10.default.createElement(
+          "div",
+          null,
+          import_react10.default.createElement("span", { style: { fontWeight: 500, color: "var(--dsw-alias-label-secondary)" } }, "Delegation"),
+          " ",
+          import_react10.default.createElement("span", null, finding.sourceDelegationId)
+        )
+      )
+    ),
+    // ── DetailBody (scrollable) ────────────────────────────────────────
+    import_react10.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_react10.default.createElement("div", {
+        style: { color: "var(--dsw-alias-label-tertiary)", padding: "16px 0" }
+      }, "Loading finding..."),
+      error51 && import_react10.default.createElement("div", {
+        style: { color: "var(--dsw-status-error)", padding: "16px 0" }
+      }, "Unable to load finding detail"),
+      content !== null && import_react10.default.createElement(import_dsh_client_ui_primitives3.MarkdownText, { text: content })
+    ),
+    // ── Footer actions (fixed) ──────────────────────────────────────────
+    import_react10.default.createElement(
+      "div",
+      {
+        style: {
+          flex: "none",
+          padding: "8px 16px",
+          borderTop: "1px solid var(--dsw-alias-border-l2)",
+          display: "flex",
+          gap: "8px"
+        }
+      },
+      import_react10.default.createElement(ActionButton, {
+        label: "View Stage",
+        onClick: () => onNavigate("stages", { stage: finding.sourceStage })
+      }),
+      import_react10.default.createElement(ActionButton, {
+        label: "View in Output",
+        onClick: () => onNavigate("output", { output: `findings/${finding.detailFile}` })
+      })
+    )
   );
 }
+function ActionButton(props) {
+  return import_react10.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);
@@ -17767,7 +18184,7 @@ function TargetRow(props) {
   );
 }
 function OutputView(props) {
-  const { snapshot, command, sessionId } = props;
+  const { snapshot, command, sessionId, focusOutput } = 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);
@@ -17849,6 +18266,16 @@ function OutputView(props) {
     setPreview(null);
     setPreviewContent(null);
   }, []);
+  const focusAppliedRef = (0, import_react17.useRef)(void 0);
+  (0, import_react17.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", {
@@ -17907,7 +18334,7 @@ function OutputView(props) {
   return import_react17.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(
@@ -17915,16 +18342,24 @@ function OutputView(props) {
       {
         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"
         }
       },
+      // Filter tabs (fixed)
       import_react17.default.createElement(
         "div",
-        { style: { marginBottom: "12px" } },
+        {
+          style: {
+            flex: "none",
+            marginBottom: "12px",
+            paddingTop: "2px"
+          }
+        },
         import_react17.default.createElement(PentesterTabBar, {
           items: OUTPUT_FILTER_TABS,
           active: filter,
@@ -17932,10 +18367,20 @@ function OutputView(props) {
           variant: "compact"
         })
       ),
-      // ── Tree: "Targets" section label + target rows at root depth ─────
+      // ── TreeViewport (scrollable) ──────────────────────────────────
       import_react17.default.createElement(
         "div",
-        { style: { flex: 1 } },
+        {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            minWidth: 0,
+            overflowY: "auto",
+            overflowX: "hidden",
+            overscrollBehaviorY: "contain",
+            scrollbarGutter: "stable"
+          }
+        },
         import_react17.default.createElement("div", {
           style: {
             fontSize: "11px",
@@ -17969,14 +18414,13 @@ function OutputView(props) {
         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", {
@@ -17991,6 +18435,7 @@ function OutputView(props) {
       }, "Select a file to preview") : import_react17.default.createElement(
         import_react17.default.Fragment,
         null,
+        // PreviewHeader (fixed)
         import_react17.default.createElement(
           "div",
           {
@@ -18019,10 +18464,20 @@ function OutputView(props) {
             "aria-label": "Close preview"
           }, "\xD7")
         ),
+        // PreviewBody (scrollable)
         import_react17.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", {
             style: { color: "var(--dsw-alias-label-tertiary)", padding: "16px 0" }
@@ -18109,6 +18564,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;
@@ -18411,12 +18876,14 @@ Client: ${mismatch.client}`,
     {
       "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) ────────────────────────────────────────
@@ -18426,8 +18893,6 @@ Client: ${mismatch.client}`,
         "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)",
@@ -18482,15 +18947,18 @@ Client: ${mismatch.client}`,
         }
       }, isRetrying ? "Retrying\u2026" : "Retry")
     ),
-    // ── Body: flex 1, no scroll ──────────────────────────────────────────
+    // ── Body: bounded flex viewport ────────────────────────────────────
     import_react18.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
@@ -18597,23 +19065,40 @@ Client: ${mismatch.client}`,
           }
         }, "Refresh")
       ),
-      // Bound content
+      // Bound content — wrapped in a bounded viewport
       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
-        }),
+        "div",
+        {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            minWidth: 0,
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column"
+          }
+        },
+        tab === "overview" && import_react18.default.createElement(
+          ScrollablePage,
+          null,
+          import_react18.default.createElement(OverviewView, {
+            snapshot,
+            liveActivity,
+            onNavigate: navigate,
+            onOpenSession: openSession
+          })
+        ),
+        tab === "stages" && import_react18.default.createElement(
+          ScrollablePage,
+          null,
+          import_react18.default.createElement(StagesView, {
+            snapshot,
+            liveActivity,
+            onNavigate: navigate,
+            onOpenSession: openSession,
+            focusStage: navFocus.stage
+          })
+        ),
         tab === "findings" && import_react18.default.createElement(FindingsView, {
           snapshot,
           command: pentesterCommand,
@@ -18621,13 +19106,17 @@ Client: ${mismatch.client}`,
           onNavigate: navigate,
           focusFinding: navFocus.finding
         }),
-        tab === "trace" && import_react18.default.createElement(TraceView, {
-          snapshot,
-          liveActivity,
-          onNavigate: navigate,
-          onOpenSession: openSession,
-          activeTargetId
-        }),
+        tab === "trace" && import_react18.default.createElement(
+          ScrollablePage,
+          null,
+          import_react18.default.createElement(TraceView, {
+            snapshot,
+            liveActivity,
+            onNavigate: navigate,
+            onOpenSession: openSession,
+            activeTargetId
+          })
+        ),
         tab === "output" && import_react18.default.createElement(OutputView, {
           snapshot,
           command: pentesterCommand,
@@ -18638,6 +19127,17 @@ Client: ${mismatch.client}`,
     )
   );
 }
+function ScrollablePage(props) {
+  return import_react18.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 +19219,7 @@ var en = {
 };
 
 // src/build-id.ts
-var BUILD_ID = "2.2.0+478786d";
+var BUILD_ID = "2.3.0+2a31301";
 
 // src/ui/client/plugin.tsx
 var SESSION_SWITCH_PERF = "[SESSION_SWITCH_PERF]";
@@ -18747,7 +19247,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 +19280,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) => {