dsh-pentester 1.0.0 → 2.2.0

package/lib/client.js

@@ -1,8 +1,10 @@
 window.__ModuleLoader__.load({ id: 'dsh-pentester', factory: (require) => { var module = { exports: {} }; var exports = module.exports;
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,15 +18,29 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/ui/client/plugin.tsx
 var plugin_exports = {};
 __export(plugin_exports, {
   apply: () => apply,
-  inject: () => inject
+  getBuildMismatch: () => getBuildMismatch,
+  getPentesterEndpointState: () => getPentesterEndpointState2,
+  getRemoteMountError: () => getRemoteMountError,
+  inject: () => inject,
+  isRemoteMounted: () => isRemoteMounted,
+  setPentesterEndpointState: () => setPentesterEndpointState
 });
 module.exports = __toCommonJS(plugin_exports);
+var import_react19 = __toESM(require("react"), 1);
 
 // node_modules/.pnpm/zod@4.4.3/node_modules/zod/v4/classic/external.js
 var external_exports = {};
@@ -14591,6 +14607,147 @@ var PENTESTER_REMOTE = {
   descriptors: [PENTESTER_DOCKER_INVOCATION]
 };
 
+// src/ui-view/invocations.ts
+var pentesterViewInputSchema = external_exports.discriminatedUnion("kind", [
+  external_exports.object({ kind: external_exports.literal("health") }),
+  external_exports.object({ kind: external_exports.literal("snapshot"), sessionId: external_exports.string() }),
+  external_exports.object({ kind: external_exports.literal("listOutput"), sessionId: external_exports.string(), targetId: external_exports.string().optional() }),
+  external_exports.object({ kind: external_exports.literal("readOutput"), sessionId: external_exports.string(), targetId: external_exports.string().optional(), path: external_exports.string() }),
+  external_exports.object({ kind: external_exports.literal("readFinding"), sessionId: external_exports.string(), detailFile: external_exports.string() })
+]);
+var snapshotResultSchema = external_exports.object({
+  run: external_exports.union([external_exports.object({
+    id: external_exports.string(),
+    status: external_exports.enum(["active", "completed"]),
+    currentStage: external_exports.string().nullable(),
+    targets: external_exports.array(external_exports.string()),
+    createdAt: external_exports.string()
+  }), external_exports.null()]),
+  stats: external_exports.object({
+    assets: external_exports.number(),
+    findings: external_exports.number(),
+    delegations: external_exports.number()
+  }),
+  stages: external_exports.array(external_exports.object({
+    id: external_exports.string(),
+    name: external_exports.string(),
+    shortName: external_exports.string(),
+    status: external_exports.string(),
+    delegationCount: external_exports.number(),
+    activeDelegationCount: external_exports.number()
+  })),
+  delegations: external_exports.array(external_exports.object({
+    id: external_exports.string(),
+    stageId: external_exports.string(),
+    agentId: external_exports.string(),
+    sessionId: external_exports.string().optional(),
+    objective: external_exports.string(),
+    status: external_exports.string(),
+    createdAt: external_exports.string(),
+    finishedAt: external_exports.string().optional()
+  })),
+  findings: external_exports.array(external_exports.object({
+    id: external_exports.string(),
+    title: external_exports.string(),
+    severity: external_exports.string(),
+    status: external_exports.string().optional(),
+    sourceStage: external_exports.string(),
+    sourceDelegationId: external_exports.string(),
+    detailFile: external_exports.string(),
+    affectedAsset: external_exports.string().optional(),
+    description: external_exports.string().optional(),
+    updatedAt: external_exports.string()
+  })),
+  trace: external_exports.object({
+    nodes: external_exports.array(external_exports.object({
+      id: external_exports.string(),
+      kind: external_exports.string(),
+      label: external_exports.string(),
+      status: external_exports.string().optional(),
+      sublabel: external_exports.string().optional(),
+      timestamp: external_exports.string().optional()
+    })),
+    edges: external_exports.array(external_exports.object({
+      id: external_exports.string(),
+      source: external_exports.string(),
+      target: external_exports.string(),
+      kind: external_exports.string(),
+      label: external_exports.string().optional()
+    }))
+  }),
+  targets: external_exports.array(external_exports.object({
+    id: external_exports.string(),
+    target: external_exports.string(),
+    canonicalTarget: external_exports.string(),
+    rootSessionId: external_exports.string().nullable(),
+    status: external_exports.string(),
+    currentStage: external_exports.string().nullable(),
+    createdAt: external_exports.string()
+  }))
+});
+var unboundResultSchema = external_exports.object({
+  kind: external_exports.literal("unbound"),
+  targets: external_exports.array(external_exports.object({
+    id: external_exports.string(),
+    target: external_exports.string(),
+    canonicalTarget: external_exports.string(),
+    rootSessionId: external_exports.string().nullable(),
+    status: external_exports.string(),
+    currentStage: external_exports.string().nullable(),
+    createdAt: external_exports.string()
+  }))
+});
+var outputFileResultSchema = external_exports.object({
+  path: external_exports.string(),
+  name: external_exports.string(),
+  size: external_exports.number(),
+  mtime: external_exports.string(),
+  mime: external_exports.enum(["text", "markdown", "json", "image", "binary"]),
+  content: external_exports.string().optional()
+});
+var outputTreeResultSchema = external_exports.object({
+  targetId: external_exports.string(),
+  target: external_exports.string(),
+  current: external_exports.boolean(),
+  children: external_exports.array(external_exports.unknown())
+});
+var PENTESTER_VIEW_INVOCATION = {
+  id: "dsh-pentester#pentesterView/command",
+  service: "pentesterView",
+  namespace: "pentesterView",
+  method: "command",
+  invocation: { kind: "direct" },
+  cancellation: {
+    parameter: "signal"
+  },
+  parameters: [
+    {
+      name: "input",
+      wire: "input",
+      source: "json",
+      codec: {
+        mode: "strict",
+        typeSymbol: "dsh-pentester#PentesterViewInput",
+        schema: pentesterViewInputSchema
+      }
+    }
+  ],
+  result: {
+    mode: "strict",
+    typeSymbol: "dsh-pentester#PentesterViewResult",
+    schema: external_exports.object({
+      ok: external_exports.boolean(),
+      value: external_exports.union([snapshotResultSchema, outputTreeResultSchema, outputFileResultSchema, unboundResultSchema, external_exports.object({ ready: external_exports.literal(true), buildId: external_exports.string() })]).optional(),
+      error: external_exports.string().optional(),
+      code: external_exports.string().optional()
+    })
+  }
+};
+var PENTESTER_VIEW_REMOTE = {
+  package: "dsh-pentester",
+  descriptors: [PENTESTER_VIEW_INVOCATION]
+};
+
 // src/ui/client/remote.ts
 function dockerCommand(face, input2) {
   if (face === void 0 || typeof face.command !== "function") {
@@ -14605,6 +14762,86 @@ function dockerCommand(face, input2) {
     return { ok: false, error: inner.error, code: inner.code };
   });
 }
+var pentesterEndpointState = "unknown";
+function getPentesterEndpointState() {
+  return pentesterEndpointState;
+}
+function resetPentesterEndpointState() {
+  if (pentesterEndpointState === "missing") {
+    pentesterEndpointState = "unknown";
+  }
+}
+function pentesterViewCommand(face, input2, timeoutMs = 3e4) {
+  if (face === void 0 || typeof face.command !== "function") {
+    return Promise.resolve({ ok: false, error: "rpc_unavailable", code: "rpc_unavailable" });
+  }
+  if (pentesterEndpointState === "missing") {
+    return Promise.resolve({
+      ok: false,
+      error: "Pentester RPC was never registered by the running Host. Check Host build and plugin activation.",
+      code: "rpc_endpoint_missing"
+    });
+  }
+  const controller = new AbortController();
+  const signal = AbortSignal.any([
+    controller.signal,
+    AbortSignal.timeout(timeoutMs)
+  ]);
+  const promise2 = face.command(input2, signal).then((result) => {
+    pentesterEndpointState = "healthy";
+    if (!result.ok) {
+      const code = result.error.code;
+      if (code === "transport" || result.error.message?.includes("404")) {
+        pentesterEndpointState = "missing";
+        return {
+          ok: false,
+          error: "Pentester RPC was never registered by the running Host.",
+          code: "rpc_endpoint_missing"
+        };
+      }
+      return { ok: false, error: result.error.message, code: result.error.code };
+    }
+    const inner = result.value;
+    if (inner.ok) return { ok: true, value: inner.value };
+    return { ok: false, error: inner.error, code: inner.code };
+  }).catch((err) => {
+    return {
+      ok: false,
+      error: err instanceof Error ? err.message : "network error",
+      code: "network_error"
+    };
+  });
+  return new Promise((resolve, reject) => {
+    const onAbort = () => {
+      if (signal.aborted) {
+        if (signal.reason instanceof DOMException && signal.reason.name === "TimeoutError") {
+          resolve({
+            ok: false,
+            error: `Pentester RPC timed out after ${timeoutMs}ms.`,
+            code: "timeout"
+          });
+        } else {
+          resolve({
+            ok: false,
+            error: "Pentester RPC request was aborted.",
+            code: "aborted"
+          });
+        }
+      }
+    };
+    signal.addEventListener("abort", onAbort, { once: true });
+    promise2.then(
+      (value) => {
+        signal.removeEventListener("abort", onAbort);
+        resolve(value);
+      },
+      (error51) => {
+        signal.removeEventListener("abort", onAbort);
+        reject(error51);
+      }
+    );
+  });
+}
 
 // src/ui/client/pentester-config-section.tsx
 var import_react3 = require("react");
@@ -15160,61 +15397,3481 @@ function isPentesterRootSession(snapshot, id) {
 }
 
 // src/ui/client/pentester-view.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function PentesterView() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-testid": "pentester-view", "data-pentester-view": "" });
+var import_react18 = __toESM(require("react"), 1);
+
+// src/ui/client/pentester/navigation.ts
+var PENTESTER_TABS = [
+  { id: "overview", localeKey: "view.overview" },
+  { id: "stages", localeKey: "view.stages" },
+  { id: "trace", localeKey: "view.trace" },
+  { id: "findings", localeKey: "view.findings" },
+  { id: "output", localeKey: "view.output" }
+];
+
+// src/ui/client/pentester/PentesterTabBar.tsx
+var import_react4 = __toESM(require("react"), 1);
+function PentesterTabBar(props) {
+  const { items, active, onSelect, variant = "primary" } = props;
+  const gap = variant === "compact" ? 28 : 36;
+  return import_react4.default.createElement(
+    "div",
+    {
+      role: "tablist",
+      style: {
+        display: "flex",
+        gap: `${gap}px`,
+        paddingLeft: "8px",
+        flexShrink: 0
+      }
+    },
+    ...items.map(
+      (item) => import_react4.default.createElement(
+        "button",
+        {
+          key: item.id,
+          role: "tab",
+          "aria-selected": item.id === active,
+          type: "button",
+          onClick: () => onSelect(item.id),
+          style: {
+            position: "relative",
+            padding: "0 0 11px",
+            border: "none",
+            background: "transparent",
+            fontSize: "13px",
+            lineHeight: "16px",
+            fontWeight: 500,
+            color: item.id === active ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-label-tertiary)",
+            cursor: "pointer",
+            whiteSpace: "nowrap"
+          }
+        },
+        item.label,
+        // Active underline pseudo-element rendered as a real element
+        // because inline styles can't do ::after.
+        item.id === active && import_react4.default.createElement("span", {
+          "aria-hidden": true,
+          style: {
+            position: "absolute",
+            right: 0,
+            bottom: "1px",
+            left: 0,
+            height: "2px",
+            borderRadius: "2px",
+            background: "var(--dsw-alias-state-business-primary)"
+          }
+        })
+      )
+    )
+  );
 }
 
-// src/ui/client/plugin.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var inject = ["slots", "remote", "sessions"];
-function apply(ctx) {
-  ctx.effect(() => {
-    let disposeMount;
-    let disposed = false;
-    void ctx.remote.$mount(PENTESTER_REMOTE).then((dispose) => {
-      if (disposed) {
-        dispose();
-        return;
+// src/ui/client/pentester/OverviewView.tsx
+var import_react8 = __toESM(require("react"), 1);
+
+// src/ui/client/pentester/MetricStrip.tsx
+var import_react5 = __toESM(require("react"), 1);
+function MetricStrip(props) {
+  const { items } = props;
+  return import_react5.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        border: "1px solid var(--dsw-alias-border-l2)",
+        borderRadius: "8px",
+        background: "var(--dsw-alias-bg-base)",
+        overflow: "hidden"
       }
-      disposeMount = dispose;
-    });
-    return () => {
-      disposed = true;
-      disposeMount?.();
-    };
-  }, "pentester: docker engine remote");
-  ctx.slots.inject(
-    "settings.section",
-    () => ctx.slots.register(
-      {
-        name: "settings.section",
-        id: "pentester-docker-engine",
-        order: 90,
-        label: () => "Pentester",
-        inject: () => {
-          const face = ctx.reflect?.get("remote.pentesterDocker");
-          return { command: (input2) => dockerCommand(face, input2) };
-        }
+    },
+    ...items.map(
+      (item, i) => import_react5.default.createElement(
+        import_react5.default.Fragment,
+        { key: item.label },
+        i > 0 && import_react5.default.createElement("div", {
+          "aria-hidden": true,
+          style: {
+            width: "1px",
+            height: "32px",
+            background: "var(--dsw-alias-border-l2)",
+            flexShrink: 0
+          }
+        }),
+        import_react5.default.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              padding: "12px 16px",
+              minWidth: "80px"
+            }
+          },
+          import_react5.default.createElement("div", {
+            style: {
+              fontSize: "20px",
+              fontWeight: 600,
+              color: "var(--dsw-alias-label-primary)",
+              lineHeight: "1.3"
+            }
+          }, item.value),
+          import_react5.default.createElement("div", {
+            style: {
+              fontSize: "11px",
+              color: "var(--dsw-alias-label-tertiary)",
+              marginTop: "2px"
+            }
+          }, item.label)
+        )
+      )
+    )
+  );
+}
+
+// src/ui/client/pentester/StageRail.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/ui/client/pentester/status.ts
+function stageStatusToUi(status) {
+  switch (status) {
+    case "completed":
+      return "completed";
+    case "active":
+      return "active";
+    case "reviewing":
+      return "reviewing";
+    default:
+      return "pending";
+  }
+}
+function uiStatusSymbol(ui) {
+  switch (ui) {
+    case "completed":
+      return "\u2713";
+    case "active":
+      return "\u25CF";
+    case "reviewing":
+      return "\u25D0";
+    case "pending":
+      return "\u25CB";
+    case "blocked":
+      return "!";
+    case "failed":
+      return "\xD7";
+  }
+}
+function uiStatusColor(ui) {
+  switch (ui) {
+    case "completed":
+      return "var(--dsw-status-done, #22c55e)";
+    case "active":
+      return "var(--dsw-status-ongoing, #3b82f6)";
+    case "reviewing":
+      return "var(--dsw-status-ongoing, #f59e0b)";
+    case "pending":
+      return "var(--dsw-fg-muted, #6b7280)";
+    case "blocked":
+      return "var(--dsw-status-warning, #f59e0b)";
+    case "failed":
+      return "var(--dsw-status-error, #ef4444)";
+  }
+}
+
+// src/ui/client/pentester/StageRail.tsx
+function StageRail(props) {
+  const { stages, currentStage, onStageClick } = props;
+  return import_react6.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0px",
+        fontSize: "13px",
+        lineHeight: "20px",
+        overflowX: "auto",
+        paddingBottom: "4px"
       },
-      (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PentesterConfigSection, { ...props })
+      "aria-label": "PTES stages timeline"
+    },
+    ...stages.map((stage, i) => {
+      const ui = stageStatusToUi(stage.status);
+      const isCurrent = stage.id === currentStage;
+      const symbol2 = uiStatusSymbol(ui);
+      const color = uiStatusColor(ui);
+      return import_react6.default.createElement(
+        import_react6.default.Fragment,
+        { key: stage.id },
+        // Connector line between stages
+        i > 0 && import_react6.default.createElement("span", {
+          "aria-hidden": true,
+          style: {
+            width: "24px",
+            height: "1px",
+            background: "var(--dsw-alias-border-l2)",
+            flexShrink: 0,
+            margin: "0 0px"
+          }
+        }),
+        import_react6.default.createElement(
+          "button",
+          {
+            type: "button",
+            title: `${stage.name} (${stage.status})`,
+            onClick: onStageClick !== void 0 ? () => onStageClick(stage.id) : void 0,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "4px",
+              padding: "2px 4px",
+              border: "none",
+              borderRadius: "4px",
+              background: isCurrent ? "var(--dsw-alias-interactive-bg-hover)" : "transparent",
+              color: isCurrent ? color : "var(--dsw-alias-label-secondary)",
+              fontWeight: isCurrent ? 600 : 400,
+              cursor: onStageClick !== void 0 ? "pointer" : "default",
+              fontSize: "13px",
+              lineHeight: "20px",
+              whiteSpace: "nowrap",
+              fontFamily: "inherit"
+            }
+          },
+          import_react6.default.createElement("span", {
+            style: { fontSize: "14px", fontWeight: isCurrent ? 700 : 400 }
+          }, symbol2),
+          import_react6.default.createElement("span", null, stage.shortName)
+        )
+      );
+    })
+  );
+}
+
+// src/ui/client/pentester/DelegationActivityRow.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_dsh_client_ui_primitives2 = require("@deepseek-ai/dsh-client-ui-primitives");
+function DelegationActivityRow(props) {
+  const { delegation, stageShortName, onOpenSession, compact = false, liveActivity } = props;
+  const hasSession = delegation.sessionId !== void 0;
+  const dotState = (() => {
+    if (delegation.status === "failed") return "error";
+    if (delegation.status === "closed") return "done";
+    if (liveActivity === "running") return "ongoing";
+    if (liveActivity === "inactive") return "done";
+    if (delegation.status === "starting") return "ongoing";
+    return "done";
+  })();
+  return import_react7.default.createElement(
+    "div",
+    {
+      role: hasSession ? "button" : void 0,
+      tabIndex: hasSession ? 0 : void 0,
+      "aria-label": hasSession ? `Open session ${delegation.id}` : void 0,
+      title: delegation.objective,
+      onClick: hasSession ? () => {
+        if (delegation.sessionId !== void 0) onOpenSession(delegation.sessionId);
+      } : void 0,
+      onKeyDown: hasSession ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (delegation.sessionId !== void 0) onOpenSession(delegation.sessionId);
+        }
+      } : void 0,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: compact ? "4px 8px" : "8px 12px",
+        borderRadius: "6px",
+        background: "var(--dsw-alias-bg-base)",
+        border: "1px solid var(--dsw-alias-border-l2)",
+        cursor: hasSession ? "pointer" : "default",
+        fontSize: "13px",
+        lineHeight: "20px"
+      }
+    },
+    import_react7.default.createElement(import_dsh_client_ui_primitives2.StateDot, { state: dotState, size: 10 }),
+    import_react7.default.createElement("span", {
+      style: {
+        fontWeight: 600,
+        color: "var(--dsw-alias-label-primary)",
+        flexShrink: 0,
+        minWidth: compact ? "50px" : "60px"
+      }
+    }, `${delegation.id} \xB7 ${delegation.agentId}`),
+    !compact && import_react7.default.createElement("span", {
+      style: {
+        color: "var(--dsw-alias-label-secondary)",
+        flex: 1,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        minWidth: 0
+      }
+    }, delegation.objective),
+    !compact && stageShortName !== void 0 && import_react7.default.createElement("span", {
+      style: {
+        fontSize: "11px",
+        color: "var(--dsw-alias-label-tertiary)",
+        flexShrink: 0
+      }
+    }, stageShortName)
+  );
+}
+
+// src/ui/client/pentester/OverviewView.tsx
+var CARD_SURFACE = {
+  border: "1px solid var(--dsw-alias-border-l2)",
+  borderRadius: "8px",
+  background: "var(--dsw-alias-bg-base)",
+  padding: "16px",
+  marginBottom: "16px"
+};
+function OverviewView(props) {
+  const { snapshot, liveActivity, onNavigate, onOpenSession } = props;
+  if (snapshot?.run === null || snapshot === null) {
+    return import_react8.default.createElement("div", {
+      style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
+    }, "No run data available.");
+  }
+  const run = snapshot.run;
+  const stages = snapshot.stages;
+  const currentStage = stages.find((s) => s.id === run.currentStage);
+  const currentIndex = stages.findIndex((s) => s.id === run.currentStage);
+  const allDelegations = snapshot.delegations;
+  const currentWork = allDelegations.filter((d) => {
+    const activity = liveActivity.get(d.id);
+    return activity === "running" || d.status === "starting";
+  });
+  return import_react8.default.createElement(
+    "div",
+    { style: { maxWidth: "900px" } },
+    // ── Target / Status / Current Stage card ──────────────────────────
+    import_react8.default.createElement(
+      "div",
+      { style: CARD_SURFACE },
+      import_react8.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "12px"
+          }
+        },
+        import_react8.default.createElement("div", {
+          style: { fontSize: "16px", fontWeight: 600, color: "var(--dsw-alias-label-primary)" }
+        }, run.targets[0] ?? "No target"),
+        import_react8.default.createElement("span", {
+          style: {
+            fontSize: "12px",
+            padding: "2px 10px",
+            borderRadius: "9999px",
+            background: "var(--dsw-alias-interactive-bg-hover)",
+            color: run.status === "active" ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-label-secondary)",
+            border: "1px solid var(--dsw-alias-border-l2)",
+            fontWeight: 500
+          }
+        }, run.status === "active" ? "Running" : "Completed")
+      ),
+      currentStage !== void 0 && import_react8.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "baseline",
+            gap: "8px",
+            marginBottom: "12px"
+          }
+        },
+        import_react8.default.createElement("span", {
+          style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary)" }
+        }, "Current Stage"),
+        import_react8.default.createElement("span", {
+          style: { fontSize: "14px", fontWeight: 600, color: "var(--dsw-alias-label-primary)" }
+        }, currentStage.name),
+        import_react8.default.createElement("span", {
+          style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary)" }
+        }, `Stage ${currentIndex + 1} / ${stages.length}`)
+      ),
+      import_react8.default.createElement(StageRail, {
+        stages,
+        currentStage: run.currentStage,
+        onStageClick: (stageId) => onNavigate("stages", { stage: stageId })
+      })
+    ),
+    // ── Metrics strip (total delegations, not active) ─────────────────
+    import_react8.default.createElement(MetricStrip, {
+      items: [
+        { label: "Assets", value: String(snapshot.stats.assets) },
+        { label: "Findings", value: String(snapshot.stats.findings) },
+        { label: "Delegations", value: String(snapshot.stats.delegations) }
+      ]
+    }),
+    import_react8.default.createElement("div", { style: { height: "16px" } }),
+    // ── Current Work (only running/starting) ──────────────────────────
+    currentWork.length > 0 && import_react8.default.createElement(
+      import_react8.default.Fragment,
+      null,
+      import_react8.default.createElement("div", {
+        style: {
+          fontSize: "13px",
+          fontWeight: 600,
+          color: "var(--dsw-alias-label-primary)",
+          marginBottom: "8px"
+        }
+      }, "Current Work"),
+      import_react8.default.createElement(
+        "div",
+        {
+          style: { display: "flex", flexDirection: "column", gap: "4px" }
+        },
+        ...currentWork.map((d) => {
+          const stage = stages.find((s) => s.id === d.stageId);
+          return import_react8.default.createElement(DelegationActivityRow, {
+            key: d.id,
+            delegation: d,
+            stageShortName: stage?.shortName,
+            onOpenSession,
+            liveActivity: liveActivity.get(d.id)
+          });
+        })
+      )
     )
   );
-  ctx.slots.inject("conversation.view", () => {
-    let disposeEntry;
-    const sync = () => {
-      const snapshot = ctx.sessions.list.getSnapshot();
-      const current = snapshot.current;
-      if (current !== void 0 && isPentesterRootSession(snapshot, current)) {
-        if (disposeEntry === void 0) {
-          disposeEntry = ctx.slots.register(
+}
+
+// src/ui/client/pentester/StagesView.tsx
+var import_react9 = __toESM(require("react"), 1);
+var STAGE_LABEL_WIDTH = 260;
+var MAX_WIDTH = 1100;
+var COMPACT_THRESHOLD = 720;
+var STATUS_TEXT = {
+  completed: "Completed",
+  active: "Active",
+  reviewing: "Pending approval",
+  pending: "Pending",
+  blocked: "Blocked",
+  failed: "Failed"
+};
+function StagesView(props) {
+  const { snapshot, liveActivity, onOpenSession, focusStage } = props;
+  if (snapshot === null || snapshot.run === null) {
+    return import_react9.default.createElement("div", {
+      style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
+    }, "No run data available.");
+  }
+  const stages = snapshot.stages;
+  const allDelegations = snapshot.delegations;
+  const delegationsByStage = /* @__PURE__ */ new Map();
+  for (const d of allDelegations) {
+    const existing = delegationsByStage.get(d.stageId) ?? [];
+    delegationsByStage.set(d.stageId, [...existing, d]);
+  }
+  const containerRef = (0, import_react9.useRef)(null);
+  const [compact, setCompact] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
+    const el = containerRef.current;
+    if (el === null) return;
+    const check2 = () => setCompact(el.clientHeight < COMPACT_THRESHOLD);
+    check2();
+    const obs = new ResizeObserver(check2);
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+  const focusRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (focusStage !== void 0 && focusRef.current !== null) {
+      focusRef.current.scrollIntoView({ behavior: "auto", block: "center" });
+    }
+  }, [focusStage]);
+  const cardMb = compact ? 6 : 8;
+  const emptyMinH = compact ? 64 : 72;
+  const leftPad = compact ? 12 : 16;
+  const leftPadH = compact ? 10 : 16;
+  const rightPad = compact ? 8 : 12;
+  const rightPadH = compact ? 10 : 14;
+  const titleGap = compact ? 8 : 10;
+  const titleSize = compact ? 13 : 14;
+  const markerSize = compact ? 14 : 16;
+  const statusMargin = compact ? 24 : 28;
+  const delGap = compact ? 4 : 6;
+  const legendGap = compact ? 14 : 18;
+  const topPad = compact ? 4 : 8;
+  const bottomPad = compact ? 12 : 16;
+  return import_react9.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        overflow: "visible",
+        paddingBottom: `${bottomPad}px`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        minHeight: 0
+      }
+    },
+    import_react9.default.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          maxWidth: `${MAX_WIDTH}px`,
+          position: "relative",
+          paddingTop: `${topPad}px`
+        }
+      },
+      // ── Continuous vertical backbone ──────────────────────────────────
+      import_react9.default.createElement("div", {
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          left: `${STAGE_LABEL_WIDTH + 10}px`,
+          top: `${compact ? 16 : 24}px`,
+          bottom: "12px",
+          width: "1px",
+          background: "var(--dsw-alias-border-l2)",
+          zIndex: 0
+        }
+      }),
+      ...stages.map((stage, i) => {
+        const ui = stageStatusToUi(stage.status);
+        const isCurrent = stage.id === snapshot.run.currentStage;
+        const isFocus = stage.id === focusStage;
+        const color = uiStatusColor(ui);
+        const symbol2 = uiStatusSymbol(ui);
+        const stageDelegations = delegationsByStage.get(stage.id) ?? [];
+        const statusText = STATUS_TEXT[ui] ?? ui;
+        return import_react9.default.createElement(
+          "div",
+          {
+            key: stage.id,
+            ref: isFocus ? focusRef : void 0,
+            style: {
+              display: "grid",
+              gridTemplateColumns: `${STAGE_LABEL_WIDTH}px minmax(0, 1fr)`,
+              minHeight: stageDelegations.length > 0 ? "auto" : `${emptyMinH}px`,
+              border: "1px solid var(--dsw-alias-border-l2)",
+              borderRadius: "8px",
+              background: "var(--dsw-alias-bg-base)",
+              marginBottom: `${cardMb}px`,
+              position: "relative",
+              zIndex: 1,
+              overflow: "hidden"
+            }
+          },
+          // ── Left column: marker + stage info ─────────────────────────
+          import_react9.default.createElement(
+            "div",
             {
-              name: "conversation.view",
-              id: "pentester",
-              order: 20,
-              label: "Pentester"
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                padding: `${leftPadH}px ${leftPad}px`,
+                gap: `${compact ? 2 : 4}px`,
+                background: "var(--dsw-alias-bg-base)",
+                position: "relative",
+                zIndex: 1
+              }
             },
-            PentesterView
+            import_react9.default.createElement(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: `${titleGap}px`
+                }
+              },
+              import_react9.default.createElement("span", {
+                style: {
+                  fontSize: `${markerSize}px`,
+                  color,
+                  fontWeight: isCurrent ? 700 : 400,
+                  lineHeight: "1",
+                  flexShrink: 0,
+                  width: `${compact ? 16 : 18}px`,
+                  textAlign: "center",
+                  background: "var(--dsw-alias-bg-base)",
+                  position: "relative",
+                  zIndex: 2
+                }
+              }, symbol2),
+              import_react9.default.createElement("span", {
+                style: {
+                  fontSize: `${titleSize}px`,
+                  fontWeight: isCurrent ? 600 : 500,
+                  color: "var(--dsw-alias-label-primary)",
+                  lineHeight: "20px"
+                }
+              }, stage.name)
+            ),
+            import_react9.default.createElement("span", {
+              style: {
+                fontSize: "12px",
+                color: "var(--dsw-alias-label-tertiary)",
+                marginLeft: `${statusMargin}px`,
+                lineHeight: "16px"
+              }
+            }, statusText)
+          ),
+          // ── Right column: delegations ─────────────────────────────────
+          import_react9.default.createElement(
+            "div",
+            {
+              style: {
+                padding: `${rightPadH}px ${rightPad}px`,
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                gap: `${delGap}px`
+              }
+            },
+            stageDelegations.length > 0 && import_react9.default.createElement("div", {
+              style: {
+                fontSize: "11px",
+                color: "var(--dsw-alias-label-tertiary)",
+                marginBottom: "1px"
+              }
+            }, `${stageDelegations.length} agent${stageDelegations.length !== 1 ? "s" : ""}`),
+            ...stageDelegations.map(
+              (d) => import_react9.default.createElement(
+                "div",
+                {
+                  key: d.id,
+                  style: {
+                    maxWidth: "min(100%, 480px)"
+                  }
+                },
+                import_react9.default.createElement(DelegationActivityRow, {
+                  delegation: d,
+                  onOpenSession,
+                  compact: true,
+                  liveActivity: liveActivity.get(d.id)
+                })
+              )
+            ),
+            stageDelegations.length === 0 && import_react9.default.createElement("span", {
+              style: {
+                fontSize: "12px",
+                color: "var(--dsw-alias-label-tertiary)",
+                fontStyle: "italic"
+              }
+            }, "No delegations")
+          )
+        );
+      }),
+      // ── Legend ─────────────────────────────────────────────────────────
+      import_react9.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: `${legendGap}px`,
+            padding: `${compact ? 6 : 10}px 0 ${compact ? 2 : 4}px 20px`,
+            fontSize: "11px",
+            color: "var(--dsw-alias-label-tertiary)"
+          }
+        },
+        import_react9.default.createElement(LegendItem, { symbol: "\u2713", label: "Completed" }),
+        import_react9.default.createElement(LegendItem, { symbol: "\u25CF", label: "Active" }),
+        import_react9.default.createElement(LegendItem, { symbol: "\u25D0", label: "Pending approval" }),
+        import_react9.default.createElement(LegendItem, { symbol: "\u25CB", label: "Pending" }),
+        import_react9.default.createElement(LegendItem, { symbol: "!", label: "Blocked" }),
+        import_react9.default.createElement(LegendItem, { symbol: "\xD7", label: "Failed" })
+      )
+    )
+  );
+}
+function LegendItem(props) {
+  return import_react9.default.createElement(
+    "div",
+    {
+      style: { display: "flex", alignItems: "center", gap: "4px" }
+    },
+    import_react9.default.createElement("span", { style: { width: "14px", textAlign: "center" } }, props.symbol),
+    import_react9.default.createElement("span", null, props.label)
+  );
+}
+
+// src/ui/client/pentester/FindingsView.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_dsh_client_ui_primitives3 = require("@deepseek-ai/dsh-client-ui-primitives");
+var SEVERITY_ORDER = ["critical", "high", "medium", "low", "info"];
+var SEVERITY_LABELS = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+  info: "Info"
+};
+var SEVERITY_COLORS = {
+  critical: "#ef4444",
+  high: "#f97316",
+  medium: "#eab308",
+  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)
+  );
+}
+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 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;
+  }, [findings]);
+  const openDetail = (0, import_react10.useCallback)(async (finding) => {
+    setSelectedFinding(finding);
+    setDetailContent(null);
+    setDetailLoading(true);
+    try {
+      const result = await command({
+        kind: "readFinding",
+        detailFile: finding.detailFile,
+        sessionId
+      });
+      if (result.ok) {
+        const fileResult = result.value;
+        setDetailContent(fileResult.content ?? "");
+      } else {
+        setDetailContent("*Unable to load finding detail.*");
+      }
+    } catch {
+      setDetailContent("*Error loading finding detail.*");
+    } finally {
+      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(
+        "div",
+        {
+          key: finding.id,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "6px 12px",
+            cursor: "pointer",
+            borderRadius: "4px",
+            fontSize: "13px",
+            color: "var(--dsw-fg)",
+            borderLeft: `3px solid ${SEVERITY_COLORS[finding.severity]}`,
+            marginBottom: "2px"
+          },
+          onClick: () => openDetail(finding)
+        },
+        import_react10.default.createElement("span", {
+          style: {
+            width: "8px",
+            height: "8px",
+            borderRadius: "50%",
+            background: SEVERITY_COLORS[finding.severity],
+            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,
+    {
+      open: true,
+      onClose: closeDetail,
+      title: selectedFinding.title,
+      contentClassName: "pentester-finding-detail"
+    },
+    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",
+          fontWeight: 600,
+          marginBottom: "12px"
+        }
+      }, 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(
+    "div",
+    { style: { maxWidth: "640px" } },
+    ...severitySections,
+    modalContent
+  );
+}
+
+// src/ui/client/pentester/TraceView.tsx
+var import_react15 = __toESM(require("react"), 1);
+
+// src/ui/client/pentester/trace/TraceTimeline.tsx
+var import_react14 = __toESM(require("react"), 1);
+
+// src/ui/client/pentester/trace/types.ts
+var STAGE_NODE_H = 72;
+var START_NODE_H = 48;
+var AGENT_NODE_W = 195;
+var AGENT_NODE_H = 68;
+var DELIVERY_NODE_W = 110;
+var DELIVERY_NODE_H = 62;
+var STAGE_TO_AGENT_GAP = 60;
+var AGENT_TO_DELIVERY_GAP = 50;
+var DELIVERY_ROW_GAP = 18;
+var STAGE_SECTION_PAD = 32;
+var TOP_OFFSET = 20;
+var MIN_SCALE = 0.5;
+var MAX_SCALE = 1.75;
+var DEFAULT_SCALE = 1;
+var AGENT_OFFSET = 280;
+var MAX_DELIVERY_PER_ROW = 3;
+var DELIVERY_H_GAP = 20;
+var TIME_PANEL_W = 245;
+var GRAPH_PADDING = 32;
+var TIMELINE_DOT_W = 16;
+var TIMELINE_TIME_W = 66;
+var TIMELINE_ROW_H = 44;
+var MIN_BAND_HEIGHT = 44;
+var BAND_GAP = 8;
+var COMPOSER_BOTTOM_PAD = 200;
+function formatTime(iso) {
+  try {
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return "--";
+    const hh = String(d.getHours()).padStart(2, "0");
+    const mm = String(d.getMinutes()).padStart(2, "0");
+    const ss = String(d.getSeconds()).padStart(2, "0");
+    return `${hh}:${mm}:${ss}`;
+  } catch {
+    return "--";
+  }
+}
+
+// src/ui/client/pentester/trace/aggregation.ts
+var KIND_ORDER = ["result", "evidence", "artifact", "raw_output", "finding", "asset"];
+function aggregateDeliveries(snapshot) {
+  const byDelegation = /* @__PURE__ */ new Map();
+  const ensure = (delId) => {
+    let m = byDelegation.get(delId);
+    if (m === void 0) {
+      m = /* @__PURE__ */ new Map();
+      byDelegation.set(delId, m);
+    }
+    return m;
+  };
+  for (const f of snapshot.findings) {
+    if (f.sourceDelegationId === "") continue;
+    const delId = f.sourceDelegationId;
+    const m = ensure(delId);
+    let g = m.get("finding");
+    if (g === void 0) {
+      g = { names: [], navPath: f.id };
+      m.set("finding", g);
+    }
+    g.names.push(f.title);
+  }
+  const result = /* @__PURE__ */ new Map();
+  for (const [delId, kindMap] of byDelegation) {
+    const groups = [];
+    for (const kind of KIND_ORDER) {
+      const g = kindMap.get(kind);
+      if (g === void 0 || g.names.length === 0) continue;
+      groups.push({
+        kind,
+        label: deliveryLabel(kind, g.names.length),
+        count: g.names.length,
+        navPath: g.navPath,
+        navTab: kind === "finding" ? "findings" : "output",
+        sampleNames: g.names.slice(0, 5)
+      });
+    }
+    if (groups.length > 0) result.set(delId, groups);
+  }
+  return result;
+}
+function deliveryLabel(kind, count) {
+  if (count === 1) {
+    switch (kind) {
+      case "result":
+        return "Result";
+      case "evidence":
+        return "Evidence";
+      case "artifact":
+        return "Artifact";
+      case "raw_output":
+        return "Raw output";
+      case "finding":
+        return "Finding";
+      case "asset":
+        return "Asset";
+    }
+  }
+  switch (kind) {
+    case "result":
+      return "Results";
+    case "evidence":
+      return "Evidence";
+    case "artifact":
+      return "Artifacts";
+    case "raw_output":
+      return "Raw outputs";
+    case "finding":
+      return "Findings";
+    case "asset":
+      return "Assets";
+  }
+}
+
+// src/ui/client/pentester/trace/layout.ts
+var PTES_STAGE_IDS = [
+  "pre-engagement",
+  "intelligence-gathering",
+  "threat-modeling",
+  "vulnerability-analysis",
+  "exploitation",
+  "post-exploitation",
+  "reporting"
+];
+var STAGE_SHORT = {
+  "pre-engagement": "Pre",
+  "intelligence-gathering": "Intel",
+  "threat-modeling": "Threat",
+  "vulnerability-analysis": "Vuln",
+  "exploitation": "Exploit",
+  "post-exploitation": "Post",
+  "reporting": "Report"
+};
+var STAGE_FULL = {
+  "pre-engagement": "Pre-engagement",
+  "intelligence-gathering": "Intelligence Gathering",
+  "threat-modeling": "Threat Modeling",
+  "vulnerability-analysis": "Vulnerability Analysis",
+  "exploitation": "Exploitation",
+  "post-exploitation": "Post Exploitation",
+  "reporting": "Reporting"
+};
+var MIN_WORLD_HALF = 600;
+function layoutDeliveryRows(groups, agentX) {
+  if (groups.length === 0) return { rows: [], rowCount: 0 };
+  const rows = [];
+  for (let i = 0; i < groups.length; i += MAX_DELIVERY_PER_ROW) {
+    const rowGroup = groups.slice(i, i + MAX_DELIVERY_PER_ROW);
+    const totalW = rowGroup.length * DELIVERY_NODE_W + (rowGroup.length - 1) * DELIVERY_H_GAP;
+    const startX = agentX - totalW / 2 + DELIVERY_NODE_W / 2;
+    const row3 = [];
+    for (let gi = 0; gi < rowGroup.length; gi++) {
+      row3.push(startX + gi * (DELIVERY_NODE_W + DELIVERY_H_GAP));
+    }
+    rows.push(row3);
+  }
+  return { rows, rowCount: rows.length };
+}
+function buildTraceLayout(snapshot) {
+  const run = snapshot.run;
+  const stageViews = snapshot.stages;
+  const delegations = snapshot.delegations;
+  const deliveryMap = aggregateDeliveries(snapshot);
+  const sections = [];
+  const timeBands = [];
+  let cursorY = TOP_OFFSET;
+  const START_GAP = 20;
+  sections.push({
+    stageId: "start",
+    label: "Start",
+    sublabel: "Pentest begins",
+    status: "completed",
+    timestamp: run.createdAt,
+    y: cursorY,
+    height: START_NODE_H + START_GAP,
+    agentBranches: [],
+    isFuture: false
+  });
+  timeBands.push({
+    id: "band:start",
+    timestamp: run.createdAt,
+    worldY: cursorY,
+    sectionIndex: 0,
+    timelineItems: [{
+      timeLabel: formatTime(run.createdAt),
+      title: "Start",
+      subtitle: "Assessment started",
+      kind: "stage",
+      dotColor: "var(--dsw-status-done, #22c55e)"
+    }]
+  });
+  cursorY += START_NODE_H + START_GAP;
+  for (let sectionIndex = 0; sectionIndex < PTES_STAGE_IDS.length; sectionIndex++) {
+    const stageId = PTES_STAGE_IDS[sectionIndex];
+    const stageView = stageViews.find((s) => s.id === stageId);
+    const stageName = STAGE_SHORT[stageId] ?? stageId;
+    const stageFullName = STAGE_FULL[stageId] ?? stageId;
+    const stageStatus = stageView?.status ?? "pending";
+    const isCurrent = run.currentStage === stageId;
+    const traceNodes = snapshot.trace.nodes;
+    const stageNode = traceNodes.find((n) => n.id === `stage:${stageId}`);
+    const stageTimestamp = stageNode?.timestamp;
+    const isFuture = stageTimestamp === void 0 && !isCurrent && stageStatus === "pending";
+    const stageDelegations = delegations.filter((d) => d.stageId === stageId);
+    const agentBranches = [];
+    const timelineItems = [];
+    if (stageDelegations.length > 0) {
+      const agentY = cursorY + STAGE_NODE_H + STAGE_TO_AGENT_GAP;
+      for (let i = 0; i < stageDelegations.length; i++) {
+        const d = stageDelegations[i];
+        const dir = i % 2 === 0 ? -1 : 1;
+        const pairIndex = Math.floor(i / 2);
+        const offset = dir * (AGENT_OFFSET + pairIndex * 60);
+        const agentX = offset;
+        const groups = deliveryMap.get(d.id) ?? [];
+        const { rows: deliveryRows, rowCount: deliveryRowCount } = layoutDeliveryRows(groups, agentX);
+        const deliveryY = agentY + AGENT_NODE_H + AGENT_TO_DELIVERY_GAP;
+        agentBranches.push({
+          delegationId: d.id,
+          agentId: d.agentId,
+          label: `${d.id} \xB7 ${d.agentId}`,
+          status: d.status,
+          sessionId: d.sessionId,
+          timestamp: d.createdAt,
+          x: agentX,
+          y: agentY,
+          deliveryGroups: groups,
+          deliveryRows,
+          deliveryY: groups.length > 0 ? deliveryY : agentY + AGENT_NODE_H,
+          deliveryRowCount
+        });
+      }
+    }
+    let sectionBottom = cursorY + STAGE_NODE_H;
+    if (agentBranches.length > 0) {
+      const maxDelBottom = Math.max(...agentBranches.map((a) => {
+        if (a.deliveryGroups.length > 0) {
+          return a.deliveryY + a.deliveryRowCount * (DELIVERY_NODE_H + DELIVERY_ROW_GAP) - DELIVERY_ROW_GAP;
+        }
+        return a.y + AGENT_NODE_H;
+      }));
+      sectionBottom = Math.max(sectionBottom, maxDelBottom);
+    }
+    sectionBottom += STAGE_SECTION_PAD;
+    const contentHeight = sectionBottom - cursorY;
+    if (isFuture) continue;
+    const sectionIdx = sections.length;
+    sections.push({
+      stageId,
+      label: stageName,
+      sublabel: stageFullName,
+      status: stageStatus,
+      timestamp: stageTimestamp,
+      y: cursorY,
+      height: contentHeight,
+      agentBranches,
+      isFuture: false
+    });
+    if (stageTimestamp !== void 0) {
+      timelineItems.push({
+        timeLabel: formatTime(stageTimestamp),
+        title: stageName,
+        subtitle: stageStatus === "completed" ? "Stage completed" : "Stage started",
+        kind: "stage",
+        dotColor: stageStatus === "completed" ? "var(--dsw-status-done)" : stageStatus === "active" ? "var(--dsw-alias-state-business-primary)" : void 0
+      });
+    }
+    const agentTimestamps = /* @__PURE__ */ new Map();
+    for (const a of agentBranches) {
+      if (a.timestamp !== void 0) {
+        const key = a.timestamp;
+        let list = agentTimestamps.get(key);
+        if (list === void 0) {
+          list = [];
+          agentTimestamps.set(key, list);
+        }
+        list.push(a);
+      }
+    }
+    for (const [ts, agents] of agentTimestamps) {
+      if (agents.length === 1) {
+        const a = agents[0];
+        timelineItems.push({
+          timeLabel: formatTime(ts),
+          title: a.label,
+          subtitle: a.status === "starting" ? "Agent starting" : a.status === "active" ? "Agent active" : "Agent started",
+          kind: "delegation"
+        });
+      } else {
+        for (const a of agents) {
+          timelineItems.push({
+            timeLabel: formatTime(ts),
+            title: a.label,
+            subtitle: a.status === "starting" ? "Agent starting" : "Agent started",
+            kind: "delegation"
+          });
+        }
+      }
+    }
+    timeBands.push({
+      id: `band:${stageId}`,
+      timestamp: stageTimestamp,
+      worldY: cursorY,
+      sectionIndex: sectionIdx,
+      timelineItems
+    });
+    cursorY = sectionBottom;
+  }
+  let maxExtent = MIN_WORLD_HALF;
+  for (const s of sections) {
+    for (const a of s.agentBranches) {
+      const absX = Math.abs(a.x);
+      if (absX + AGENT_NODE_W / 2 > maxExtent) maxExtent = absX + AGENT_NODE_W / 2;
+      for (const row3 of a.deliveryRows) {
+        for (const dx of row3) {
+          if (Math.abs(dx) + DELIVERY_NODE_W / 2 > maxExtent) maxExtent = Math.abs(dx) + DELIVERY_NODE_W / 2;
+        }
+      }
+    }
+  }
+  maxExtent += 80;
+  const worldHalfWidth = maxExtent;
+  const worldHeight = cursorY + 80;
+  return {
+    sections,
+    timeBands,
+    worldHalfWidth,
+    worldHeight,
+    spineX: worldHalfWidth
+  };
+}
+
+// src/ui/client/pentester/trace/scaledLayout.ts
+function computeTimelineHeight(items) {
+  if (items.length === 0) return 0;
+  return 18 + items.length * TIMELINE_ROW_H + 8;
+}
+function computeTopologyHeight(section, scale) {
+  if (section.stageId === "start") {
+    return (START_NODE_H + 20) * scale;
+  }
+  let h = STAGE_NODE_H;
+  if (section.agentBranches.length > 0) {
+    h += STAGE_TO_AGENT_GAP + AGENT_NODE_H;
+    const maxDelRows = Math.max(...section.agentBranches.map((a) => a.deliveryRowCount));
+    if (maxDelRows > 0) {
+      h += AGENT_TO_DELIVERY_GAP + maxDelRows * (DELIVERY_NODE_H + DELIVERY_ROW_GAP) - DELIVERY_ROW_GAP;
+    }
+  }
+  h += STAGE_SECTION_PAD;
+  return h * scale;
+}
+function adjustSectionY(section, deltaY) {
+  const adjustAgentY = (a) => ({
+    ...a,
+    y: a.y + deltaY,
+    deliveryY: a.deliveryY + deltaY
+  });
+  return {
+    ...section,
+    y: section.y + deltaY,
+    agentBranches: section.agentBranches.map(adjustAgentY)
+  };
+}
+function buildScaledTraceLayout(baseLayout, scale) {
+  const bands = [];
+  let visualY = 20;
+  for (let i = 0; i < baseLayout.timeBands.length; i++) {
+    const band = baseLayout.timeBands[i];
+    const section = baseLayout.sections[band.sectionIndex];
+    const timelineH = computeTimelineHeight(band.timelineItems);
+    const topologyH = computeTopologyHeight(section, scale);
+    const visualH = Math.max(timelineH, topologyH, MIN_BAND_HEIGHT);
+    const adjustedWorldY = visualY / scale;
+    const deltaY = adjustedWorldY - section.y;
+    bands.push({
+      bandId: band.id,
+      visualY,
+      visualHeight: visualH,
+      sectionIndex: band.sectionIndex,
+      adjustedWorldY,
+      timelineItems: band.timelineItems
+    });
+    visualY += visualH + BAND_GAP;
+  }
+  const adjustedSections = baseLayout.sections.map((section, idx) => {
+    const band = bands.find((b) => b.sectionIndex === idx);
+    if (band === void 0) return section;
+    const deltaY = band.adjustedWorldY - section.y;
+    return deltaY === 0 ? section : adjustSectionY(section, deltaY);
+  });
+  const totalHeight = visualY + COMPOSER_BOTTOM_PAD;
+  return {
+    bands,
+    totalHeight,
+    worldHalfWidth: baseLayout.worldHalfWidth,
+    spineX: baseLayout.spineX,
+    sections: adjustedSections
+  };
+}
+
+// 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 CARD = {
+  position: "absolute",
+  borderRadius: "7px",
+  background: "var(--dsw-alias-bg-base)",
+  border: "1px solid var(--dsw-alias-border-l2)",
+  boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
+  boxSizing: "border-box",
+  fontSize: "12px",
+  lineHeight: "1.4",
+  cursor: "pointer",
+  pointerEvents: "auto"
+};
+var StartNode = (0, import_react11.forwardRef)(
+  function StartNode2(props, ref) {
+    const { section, x } = props;
+    return import_react11.default.createElement(
+      "div",
+      {
+        ref,
+        "data-node-id": `stage:${section.stageId}`,
+        "data-node-kind": "stage",
+        style: {
+          position: "absolute",
+          left: `${x - 70}px`,
+          top: `${section.y}px`,
+          width: "140px",
+          minHeight: "48px",
+          padding: "10px 16px",
+          borderRadius: "7px",
+          background: "var(--dsw-alias-bg-base)",
+          border: "1.5px solid var(--dsw-status-done, #22c55e)",
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          fontSize: "13px",
+          fontWeight: 600,
+          color: "var(--dsw-alias-label-primary)",
+          lineHeight: "20px",
+          pointerEvents: "auto"
+        }
+      },
+      import_react11.default.createElement("div", {
+        style: {
+          width: "6px",
+          height: "6px",
+          borderRadius: "50%",
+          background: "var(--dsw-status-done, #22c55e)",
+          flexShrink: 0
+        }
+      }),
+      section.label
+    );
+  }
+);
+var StageNode = (0, import_react11.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(
+      "div",
+      {
+        ref,
+        "data-node-id": `stage:${section.stageId}`,
+        "data-node-kind": "stage",
+        role: "button",
+        tabIndex: 0,
+        onClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.();
+          }
+        },
+        style: {
+          ...CARD,
+          left: `${x - 115}px`,
+          top: `${section.y}px`,
+          width: "230px",
+          minHeight: "72px",
+          padding: "14px 16px",
+          border: `1.5px solid ${borderColor}`,
+          display: "flex",
+          alignItems: "center",
+          gap: "10px"
+        }
+      },
+      import_react11.default.createElement(import_dsh_client_ui_primitives4.StateDot, { state: dotState, size: 8 }),
+      import_react11.default.createElement(
+        "div",
+        { style: { minWidth: 0 } },
+        import_react11.default.createElement("div", {
+          style: { fontWeight: 600, color: "var(--dsw-alias-label-primary)", fontSize: "14px", lineHeight: "20px" }
+        }, section.label),
+        import_react11.default.createElement("div", {
+          style: { fontSize: "12px", color: "var(--dsw-alias-label-secondary)", marginTop: "2px" }
+        }, section.sublabel)
+      )
+    );
+  }
+);
+var AgentNode = (0, import_react11.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(
+      "div",
+      {
+        ref,
+        "data-node-id": `delegation:${branch.delegationId}`,
+        "data-node-kind": "agent",
+        role: "button",
+        tabIndex: 0,
+        onClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.();
+          }
+        },
+        style: {
+          ...CARD,
+          left: `${x - 97}px`,
+          top: `${branch.y}px`,
+          width: "195px",
+          minHeight: "68px",
+          padding: "12px 14px",
+          border: `1px solid ${borderColor}`,
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        }
+      },
+      import_react11.default.createElement(import_dsh_client_ui_primitives4.StateDot, { state: dotState, size: 8 }),
+      import_react11.default.createElement(
+        "div",
+        { style: { minWidth: 0 } },
+        import_react11.default.createElement("div", {
+          style: { fontWeight: 600, color: "var(--dsw-alias-label-primary)", fontSize: "13px", lineHeight: "18px" }
+        }, branch.label),
+        import_react11.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")
+      )
+    );
+  }
+);
+var DELIVERY_ICON_COLORS = {
+  result: "var(--dsw-status-done, #22c55e)",
+  evidence: "#8b5cf6",
+  artifact: "#f59e0b",
+  raw_output: "var(--dsw-alias-label-tertiary)",
+  finding: "var(--dsw-status-error, #ef4444)",
+  asset: "#3b82f6"
+};
+var DeliveryNode = (0, import_react11.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(
+      "div",
+      {
+        ref,
+        "data-node-id": `delivery:${group.kind}`,
+        "data-node-kind": "delivery",
+        role: "button",
+        tabIndex: 0,
+        onClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.();
+          }
+        },
+        title: group.sampleNames.slice(0, 5).join("\n") + (group.count > 5 ? `
++${group.count - 5} more` : ""),
+        style: {
+          ...CARD,
+          left: `${x - 55}px`,
+          top: `${y}px`,
+          width: "110px",
+          minHeight: "62px",
+          padding: "8px 10px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "4px",
+          textAlign: "center"
+        }
+      },
+      import_react11.default.createElement("div", {
+        style: {
+          width: "8px",
+          height: "8px",
+          borderRadius: "4px",
+          background: iconColor,
+          flexShrink: 0
+        }
+      }),
+      import_react11.default.createElement("div", {
+        style: { fontWeight: 600, color: "var(--dsw-alias-label-primary)", fontSize: "12px", lineHeight: "16px" }
+      }, group.label),
+      import_react11.default.createElement("div", {
+        style: { fontSize: "10px", color: "var(--dsw-alias-label-tertiary)" }
+      }, `${group.count} ${group.count === 1 ? "file" : "files"}`)
+    );
+  }
+);
+
+// src/ui/client/pentester/trace/TraceConnectors.tsx
+var import_react12 = __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}`;
+  }
+  const midY = (sy + ty) / 2;
+  const dir = tx > sx ? 1 : -1;
+  return [
+    `M ${sx} ${sy}`,
+    `L ${sx} ${midY - r}`,
+    `A ${r} ${r} 0 0 ${dir > 0 ? 1 : 0} ${sx + dir * r} ${midY}`,
+    `L ${tx - dir * r} ${midY}`,
+    `A ${r} ${r} 0 0 ${dir > 0 ? 1 : 0} ${tx} ${midY + r}`,
+    `L ${tx} ${ty}`
+  ].join(" ");
+}
+function branchJunction(cx, sy, targets) {
+  if (targets.length === 0) return [];
+  const trunkY = sy + 18;
+  return targets.map(
+    (t) => `M ${cx} ${sy} L ${cx} ${trunkY} L ${t.tx} ${trunkY} L ${t.tx} ${t.ty}`
+  );
+}
+function TraceConnectors(props) {
+  const { layout } = props;
+  const paths = (0, import_react12.useMemo)(() => {
+    const result = [];
+    const cx = layout.spineX;
+    const solid = { stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1.25 };
+    const dashed = { stroke: "var(--dsw-alias-border-l1)", strokeWidth: 1, strokeDasharray: "4 3" };
+    for (let i = 0; i < layout.sections.length - 1; i++) {
+      const s = layout.sections[i];
+      const next = layout.sections[i + 1];
+      const y1 = s.y + STAGE_NODE_H;
+      const y2 = next.y;
+      if (y2 > y1) {
+        result.push({
+          d: `M ${cx} ${y1} L ${cx} ${y2}`,
+          ...solid
+        });
+      }
+    }
+    for (const s of layout.sections) {
+      const sy = s.y + STAGE_NODE_H;
+      const targets = s.agentBranches.map((a) => ({
+        tx: cx + a.x,
+        ty: a.y
+      }));
+      if (targets.length === 1) {
+        result.push({
+          d: roundedOrthogonal(cx, sy, targets[0].tx, targets[0].ty),
+          ...dashed
+        });
+      } else if (targets.length > 1) {
+        const branches = branchJunction(cx, sy, targets);
+        for (const b of branches) {
+          result.push({ d: b, ...dashed });
+        }
+      }
+      if (targets.length > 0) {
+        const trunkY = sy + 18;
+        result.push({
+          d: `M ${cx - 3} ${trunkY} A 3 3 0 1 1 ${cx + 3} ${trunkY} A 3 3 0 1 1 ${cx - 3} ${trunkY}`,
+          stroke: "var(--dsw-alias-border-l2)",
+          strokeWidth: 1
+        });
+      }
+      for (const a of s.agentBranches) {
+        if (a.deliveryGroups.length === 0) continue;
+        const ax = cx + a.x;
+        const ay = a.y + AGENT_NODE_H;
+        const firstDY = a.deliveryY;
+        result.push({
+          d: `M ${ax} ${ay} L ${ax} ${firstDY}`,
+          ...dashed
+        });
+        for (let ri = 0; ri < a.deliveryRows.length; ri++) {
+          const row3 = a.deliveryRows[ri];
+          const rowY = a.deliveryY + ri * (DELIVERY_NODE_H + DELIVERY_ROW_GAP);
+          const trunkY = rowY - 10;
+          if (row3.length > 1) {
+            const minDX = Math.min(...row3.map((dx) => cx + dx));
+            const maxDX = Math.max(...row3.map((dx) => cx + dx));
+            result.push({
+              d: `M ${minDX} ${trunkY} L ${maxDX} ${trunkY}`,
+              ...dashed
+            });
+            for (const dx of row3) {
+              result.push({
+                d: `M ${cx + dx} ${trunkY} L ${cx + dx} ${rowY}`,
+                ...dashed
+              });
+            }
+          }
+          if (ri < a.deliveryRows.length - 1) {
+            const nextRowY = a.deliveryY + (ri + 1) * (DELIVERY_NODE_H + DELIVERY_ROW_GAP);
+            result.push({
+              d: `M ${ax} ${rowY + DELIVERY_NODE_H} L ${ax} ${nextRowY}`,
+              ...dashed
+            });
+          }
+        }
+      }
+    }
+    return result;
+  }, [layout]);
+  return import_react12.default.createElement(
+    "svg",
+    {
+      width: layout.worldHalfWidth * 2,
+      height: layout.worldHeight,
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "visible",
+        pointerEvents: "none"
+      }
+    },
+    ...paths.map(
+      (p, i) => import_react12.default.createElement("path", {
+        key: i,
+        d: p.d,
+        fill: "none",
+        stroke: p.stroke,
+        strokeWidth: p.strokeWidth,
+        strokeDasharray: p.strokeDasharray,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    )
+  );
+}
+
+// src/ui/client/pentester/trace/TraceControls.tsx
+var import_react13 = __toESM(require("react"), 1);
+var BTN = {
+  height: "32px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "1px solid var(--dsw-alias-border-l2)",
+  borderRadius: "6px",
+  background: "var(--dsw-alias-bg-base)",
+  color: "var(--dsw-alias-label-secondary)",
+  cursor: "pointer",
+  fontSize: "13px",
+  fontFamily: "inherit",
+  padding: "0 10px",
+  lineHeight: "1"
+};
+function TraceControls(props) {
+  const { scale, onZoomIn, onZoomOut, onReset, onFit } = props;
+  const pct = Math.round(scale * 100);
+  return import_react13.default.createElement(
+    "div",
+    {
+      style: { display: "flex", alignItems: "center", gap: "4px" }
+    },
+    import_react13.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", {
+      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", {
+      type: "button",
+      "aria-label": "Zoom in",
+      title: "Zoom in",
+      onClick: onZoomIn,
+      style: { ...BTN, width: "32px", padding: 0 }
+    }, "+"),
+    import_react13.default.createElement("button", {
+      type: "button",
+      "aria-label": "Fit to width",
+      title: "Fit topology width",
+      onClick: onFit,
+      style: { ...BTN, fontWeight: 500, fontSize: "11px" }
+    }, "Fit")
+  );
+}
+
+// src/ui/client/pentester/trace/TraceTimeline.tsx
+function getScrollOwner() {
+  return document.scrollingElement ?? document.documentElement;
+}
+function checkSpineInvariant(graphEl, scale) {
+  if (graphEl === null) return;
+  const startEl = graphEl.querySelector('[data-node-id="stage:start"]');
+  if (startEl === null) return;
+  const graphRect = graphEl.getBoundingClientRect();
+  const startRect = startEl.getBoundingClientRect();
+  const startCenter = startRect.left + startRect.width / 2;
+  const graphCenter = graphRect.left + graphRect.width / 2;
+  const error51 = Math.abs(startCenter - graphCenter);
+  if (error51 > 2) {
+    console.warn(`[Trace] Spine invariant violated: error=${error51.toFixed(1)}px at scale=${scale.toFixed(2)}`);
+  }
+}
+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)(
+    () => buildScaledTraceLayout(baseLayout, scale),
+    [baseLayout, scale]
+  );
+  const adjustedSections = scaledLayout.sections;
+  const scaledBands = scaledLayout.bands;
+  const worldHalfWidth = scaledLayout.worldHalfWidth;
+  const spineX = scaledLayout.spineX;
+  const worldW = worldHalfWidth * 2;
+  const worldH = scaledLayout.totalHeight;
+  const doAutoFit = (0, import_react14.useCallback)(() => {
+    const vp = graphVpRef.current;
+    if (vp === null) return DEFAULT_SCALE;
+    const availableHalf = vp.clientWidth / 2 - GRAPH_PADDING;
+    const requiredHalf = baseLayout.worldHalfWidth;
+    const fitScale = availableHalf / requiredHalf;
+    return Math.min(DEFAULT_SCALE, Math.max(MIN_SCALE, fitScale));
+  }, [baseLayout.worldHalfWidth]);
+  (0, import_react14.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 clamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
+    const owner = getScrollOwner();
+    const oldScale = scale;
+    const viewH = owner.clientHeight;
+    const scrollTop = owner.scrollTop;
+    const worldCenterY = (scrollTop + viewH / 2) / oldScale;
+    const nextScrollTop = worldCenterY * clamped - viewH / 2;
+    setScale(clamped);
+    requestAnimationFrame(() => {
+      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) => {
+    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)(() => {
+    checkSpineInvariant(graphRef.current, scale);
+  }, [scale, adjustedSections]);
+  const handleStageClick = (0, import_react14.useCallback)((stageId) => {
+    onNavigate("stages", { stage: stageId });
+  }, [onNavigate]);
+  const handleAgentClick = (0, import_react14.useCallback)((sessionId) => {
+    if (sessionId !== void 0) onOpenSession(sessionId);
+  }, [onOpenSession]);
+  const handleDeliveryClick = (0, import_react14.useCallback)((group) => {
+    if (group.navTab === "findings") {
+      onNavigate("findings", { finding: group.navPath });
+    } else {
+      onNavigate("output", { output: group.navPath });
+    }
+  }, [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(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        border: "1px solid var(--dsw-alias-border-l2)",
+        borderRadius: "8px",
+        background: "var(--dsw-alias-bg-base)"
+      }
+    },
+    // ── TraceHeader ─────────────────────────────────────────────────────────
+    import_react14.default.createElement(
+      "div",
+      {
+        "data-testid": "trace-header",
+        style: {
+          display: "grid",
+          gridTemplateColumns: gridCols,
+          flexShrink: 0,
+          borderBottom: "1px solid var(--dsw-alias-border-l1)",
+          background: "var(--dsw-alias-bg-base)"
+        }
+      },
+      import_react14.default.createElement(
+        "div",
+        {
+          style: { padding: "12px 18px", borderRight: "1px solid var(--dsw-alias-border-l1)" }
+        },
+        import_react14.default.createElement("div", {
+          style: { fontSize: "13px", fontWeight: 600, color: "var(--dsw-alias-label-primary)" }
+        }, "Timeline")
+      ),
+      import_react14.default.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px 18px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          }
+        },
+        import_react14.default.createElement("div", {
+          style: { fontSize: "13px", fontWeight: 600, color: "var(--dsw-alias-label-primary)" }
+        }, "Topology"),
+        import_react14.default.createElement(TraceControls, {
+          scale,
+          onZoomIn: zoomIn,
+          onZoomOut: zoomOut,
+          onReset: resetZoom,
+          onFit: fitWidth
+        })
+      )
+    ),
+    // ── Content (no scroll — flows into Harness scroll owner) ───────────────
+    import_react14.default.createElement(
+      "div",
+      {
+        onWheel: handleWheel,
+        style: {
+          display: "grid",
+          gridTemplateColumns: gridCols
+        }
+      },
+      // ── Timeline rail ────────────────────────────────────────────────────
+      import_react14.default.createElement(
+        "div",
+        {
+          style: {
+            position: "relative",
+            borderRight: "1px solid var(--dsw-alias-border-l1)",
+            background: "var(--dsw-alias-bg-base)",
+            height: `${worldH}px`
+          }
+        },
+        // Vertical timeline spine line
+        import_react14.default.createElement("div", {
+          "aria-hidden": true,
+          style: {
+            position: "absolute",
+            left: "22px",
+            top: "8px",
+            bottom: "8px",
+            width: "1px",
+            background: "var(--dsw-alias-border-l2)",
+            zIndex: 0
+          }
+        }),
+        ...scaledBands.map((band) => {
+          const isStart = band.bandId === "band:start";
+          if (band.timelineItems.length === 0) return null;
+          return import_react14.default.createElement(
+            "div",
+            {
+              key: band.bandId,
+              style: {
+                position: "absolute",
+                top: `${band.visualY}px`,
+                left: "0px",
+                right: "4px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+                zIndex: 1
+              }
+            },
+            // Start band
+            isStart && band.timelineItems.map(
+              (item, ii) => import_react14.default.createElement(
+                "div",
+                {
+                  key: ii,
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: timelineEventGrid,
+                    alignItems: "flex-start",
+                    gap: "6px",
+                    minHeight: `${TIMELINE_ROW_H}px`
+                  }
+                },
+                import_react14.default.createElement(
+                  "div",
+                  {
+                    style: { display: "flex", justifyContent: "center", paddingTop: "4px" }
+                  },
+                  import_react14.default.createElement("div", {
+                    style: {
+                      width: "6px",
+                      height: "6px",
+                      borderRadius: "50%",
+                      background: item.dotColor ?? "var(--dsw-status-done, #22c55e)"
+                    }
+                  })
+                ),
+                import_react14.default.createElement("span", {
+                  style: {
+                    fontSize: "11px",
+                    fontFamily: "monospace",
+                    color: "var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary))",
+                    lineHeight: "18px",
+                    paddingTop: "2px"
+                  }
+                }, item.timeLabel),
+                import_react14.default.createElement(
+                  "div",
+                  { style: { minWidth: 0, paddingTop: "2px" } },
+                  import_react14.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", {
+                    style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary)", lineHeight: "16px" }
+                  }, item.subtitle)
+                )
+              )
+            ),
+            // Regular stage/agent items
+            !isStart && band.timelineItems.map(
+              (item, ii) => import_react14.default.createElement(
+                "div",
+                {
+                  key: ii,
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: timelineEventGrid,
+                    alignItems: "flex-start",
+                    gap: "6px",
+                    minHeight: `${TIMELINE_ROW_H}px`
+                  }
+                },
+                import_react14.default.createElement(
+                  "div",
+                  {
+                    style: { display: "flex", justifyContent: "center", paddingTop: "4px" }
+                  },
+                  import_react14.default.createElement("div", {
+                    style: {
+                      width: "8px",
+                      height: "8px",
+                      borderRadius: "50%",
+                      background: item.dotColor ?? "var(--dsw-alias-label-tertiary)"
+                    }
+                  })
+                ),
+                import_react14.default.createElement("span", {
+                  style: {
+                    fontSize: "11px",
+                    fontFamily: "monospace",
+                    color: "var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary))",
+                    lineHeight: "18px",
+                    paddingTop: "2px"
+                  }
+                }, item.timeLabel),
+                import_react14.default.createElement(
+                  "div",
+                  { style: { minWidth: 0, paddingTop: "2px" } },
+                  import_react14.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", {
+                    style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary)", lineHeight: "16px" }
+                  }, item.subtitle)
+                )
+              )
+            )
+          );
+        })
+      ),
+      // ── Graph viewport ────────────────────────────────────────────────────
+      import_react14.default.createElement(
+        "div",
+        {
+          ref: graphVpRef,
+          style: {
+            position: "relative",
+            background: "var(--dsw-alias-bg-base)",
+            overflow: "hidden",
+            height: `${worldH}px`
+          }
+        },
+        // SpineAnchor: CSS left:50%, always at viewport center
+        import_react14.default.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "0px",
+              width: "0px",
+              height: `${worldH}px`,
+              pointerEvents: "none"
+            }
+          },
+          // TopologyWorld: symmetric around spine
+          import_react14.default.createElement(
+            "div",
+            {
+              ref: graphRef,
+              style: {
+                position: "absolute",
+                left: `-${worldHalfWidth}px`,
+                top: "0px",
+                width: `${worldW}px`,
+                height: `${worldH}px`,
+                transform: `scale(${scale})`,
+                transformOrigin: `${spineX}px 0px`
+              }
+            },
+            import_react14.default.createElement(TraceConnectors, {
+              layout: { ...baseLayout, sections: adjustedSections, worldHeight: worldH, spineX },
+              rects: /* @__PURE__ */ new Map()
+            }),
+            import_react14.default.createElement(
+              "div",
+              {
+                style: { position: "absolute", inset: 0, zIndex: 1 }
+              },
+              ...adjustedSections.filter((s) => s.stageId === "start").map(
+                (section) => import_react14.default.createElement(StartNode, {
+                  key: "stage:start",
+                  section,
+                  x: spineX
+                })
+              ),
+              ...adjustedSections.filter((s) => s.stageId !== "start").map(
+                (section) => import_react14.default.createElement(StageNode, {
+                  key: `stage:${section.stageId}`,
+                  section,
+                  x: spineX,
+                  onClick: () => handleStageClick(section.stageId)
+                })
+              ),
+              ...adjustedSections.flatMap(
+                (section) => section.agentBranches.map(
+                  (branch) => import_react14.default.createElement(AgentNode, {
+                    key: `agent:${branch.delegationId}`,
+                    branch,
+                    x: spineX + branch.x,
+                    liveActivity: liveActivity.get(branch.delegationId),
+                    onClick: () => handleAgentClick(branch.sessionId)
+                  })
+                )
+              ),
+              ...adjustedSections.flatMap(
+                (section) => section.agentBranches.flatMap(
+                  (branch) => branch.deliveryRows.flatMap(
+                    (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, {
+                        key: `delivery:${branch.delegationId}:${group.kind}`,
+                        group,
+                        x: spineX + dx,
+                        y: branch.deliveryY + ri * (DELIVERY_NODE_H + DELIVERY_ROW_GAP),
+                        onClick: () => handleDeliveryClick(group)
+                      });
+                    })
+                  ).filter(Boolean)
+                )
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+}
+
+// src/ui/client/pentester/TraceView.tsx
+function TraceView(props) {
+  const { snapshot, liveActivity, onNavigate, onOpenSession, activeTargetId } = props;
+  if (snapshot === null || snapshot.run === null) {
+    return import_react15.default.createElement("div", {
+      style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
+    }, "No execution trace yet");
+  }
+  return import_react15.default.createElement(TraceTimeline, {
+    snapshot,
+    liveActivity,
+    onNavigate,
+    onOpenSession,
+    activeTargetId
+  });
+}
+
+// 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");
+
+// 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");
+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 folderColor = containsSelected ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-label-secondary)";
+  return import_react16.default.createElement(
+    "div",
+    null,
+    import_react16.default.createElement(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": open,
+        onClick: () => setOpen(!open),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(!open);
+          }
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          marginLeft: `${depth * 16}px`,
+          padding: "3px 6px",
+          borderRadius: "4px",
+          cursor: "pointer",
+          fontSize: "13px",
+          lineHeight: "20px",
+          color: "var(--dsw-alias-label-primary)",
+          userSelect: "none",
+          height: "28px",
+          boxSizing: "border-box"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        }
+      },
+      // Chevron
+      hasChildren ? import_react16.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 } }),
+      // Folder icon — color reflects selected ancestry
+      import_react16.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 })
+      ),
+      // Name
+      import_react16.default.createElement("span", {
+        style: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }, name)
+    ),
+    open && hasChildren && import_react16.default.createElement("div", null, children)
+  );
+}
+function FileRow(props) {
+  const { name, depth, size, isSelected = false, onClick } = props;
+  return import_react16.default.createElement(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        marginLeft: `${depth * 16 + 16}px`,
+        padding: "3px 8px",
+        borderRadius: "4px",
+        cursor: "pointer",
+        background: isSelected ? "var(--dsw-alias-interactive-bg-hover)" : "transparent",
+        fontSize: "13px",
+        lineHeight: "20px",
+        color: "var(--dsw-alias-label-primary)",
+        height: "28px",
+        boxSizing: "border-box"
+      },
+      onMouseEnter: (e) => {
+        if (!isSelected) e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover)";
+      },
+      onMouseLeave: (e) => {
+        if (!isSelected) e.currentTarget.style.background = "transparent";
+      }
+    },
+    // File icon placeholder (Harness doesn't have a specific file icon; use chevron space)
+    import_react16.default.createElement("span", {
+      style: { width: "14px", flexShrink: 0 }
+    }),
+    import_react16.default.createElement("span", {
+      style: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        flex: 1,
+        minWidth: 0
+      }
+    }, name),
+    size !== void 0 && import_react16.default.createElement("span", {
+      style: {
+        fontSize: "11px",
+        color: "var(--dsw-alias-label-tertiary)",
+        flexShrink: 0
+      }
+    }, size)
+  );
+}
+
+// src/ui/client/pentester/OutputView.tsx
+var OUTPUT_FILTER_TABS = [
+  { id: "all", label: "All" },
+  { id: "report", label: "Reports" },
+  { id: "evidence", label: "Evidence" },
+  { id: "artifact", label: "Artifacts" }
+];
+function TargetIcon(props) {
+  const s = props.size ?? 16;
+  return import_react17.default.createElement(
+    "svg",
+    {
+      width: s,
+      height: s,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "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" })
+  );
+}
+function entryContainsSelected(entry, selectedPath) {
+  if (selectedPath === null) return false;
+  if (entry.kind === "file") return entry.path === selectedPath;
+  if (entry.children === void 0) return false;
+  return entry.children.some((child) => entryContainsSelected(child, selectedPath));
+}
+function TargetRow(props) {
+  const { targetId, target, current, defaultOpen, containsSelected, children } = props;
+  const [open, setOpen] = (0, import_react17.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(
+    "div",
+    null,
+    import_react17.default.createElement(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": open,
+        "aria-label": `Target ${target}`,
+        onClick: () => setOpen(!open),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(!open);
+          }
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "5px 8px",
+          borderRadius: "4px",
+          cursor: "pointer",
+          fontSize: "13px",
+          lineHeight: "20px",
+          color: current ? "var(--dsw-alias-label-primary)" : "var(--dsw-alias-label-secondary)",
+          fontWeight: current ? 500 : 400,
+          userSelect: "none",
+          height: "30px",
+          boxSizing: "border-box"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        }
+      },
+      import_react17.default.createElement("span", {
+        style: {
+          color: "var(--dsw-alias-label-tertiary)",
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          fontSize: "10px",
+          width: "12px"
+        }
+      }, open ? "\u25BE" : "\u25B8"),
+      import_react17.default.createElement("span", {
+        style: {
+          color: iconColor,
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center"
+        }
+      }, import_react17.default.createElement(TargetIcon, { size: 16 })),
+      import_react17.default.createElement("span", {
+        style: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }, target),
+      current && import_react17.default.createElement("span", {
+        style: {
+          fontSize: "10px",
+          color: "var(--dsw-alias-state-business-primary)",
+          background: "rgba(59, 130, 246, 0.1)",
+          padding: "0 5px",
+          borderRadius: "3px",
+          lineHeight: "16px",
+          flexShrink: 0,
+          fontWeight: 500
+        }
+      }, "active")
+    ),
+    open && import_react17.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)(() => {
+    if (snapshot === null) return;
+    let cancelled = false;
+    setOutputLoading(true);
+    setOutputError(null);
+    command({ kind: "listOutput", sessionId }).then((result) => {
+      if (cancelled) return;
+      setOutputLoading(false);
+      if (result.ok && result.value !== null && typeof result.value === "object" && "children" in result.value) {
+        setOutputTree(result.value);
+        setOutputError(null);
+      } else {
+        setOutputError(result.ok === false ? result.error ?? "Failed to load output tree" : "Invalid response");
+      }
+    }).catch((err) => {
+      if (cancelled) return;
+      setOutputLoading(false);
+      setOutputError(err instanceof Error ? err.message : "Failed to load output tree");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [command, sessionId, snapshot?.run?.id]);
+  const targetTrees = outputTree !== null ? [outputTree] : [];
+  const selectedPath = preview?.entry.path ?? null;
+  const selectedTargetId = preview?.targetId ?? null;
+  const filteredTargets = (0, import_react17.useMemo)(() => {
+    const base = filter === "all" ? targetTrees : (() => {
+      const categoryMap = {
+        all: [],
+        report: ["report"],
+        evidence: ["evidence"],
+        artifact: ["artifact", "finding", "stage"]
+      };
+      const allowed = new Set(categoryMap[filter]);
+      return targetTrees.map((t) => ({
+        ...t,
+        children: filterEntries(t.children, allowed)
+      })).filter((t) => t.children.length > 0);
+    })();
+    return base.map((t) => ({
+      ...t,
+      containsSelected: selectedTargetId === t.targetId && t.children.some(
+        (child) => entryContainsSelected(child, selectedPath)
+      )
+    }));
+  }, [targetTrees, filter, selectedPath, selectedTargetId]);
+  const openPreview = (0, import_react17.useCallback)(async (entry, targetId) => {
+    if (entry.kind === "directory") return;
+    setPreview({ entry, targetId });
+    setPreviewContent(null);
+    setPreviewLoading(true);
+    try {
+      const result = await command({
+        kind: "readOutput",
+        path: entry.path,
+        sessionId,
+        targetId: targetId !== "" ? targetId : void 0
+      });
+      if (result.ok) {
+        setPreviewContent(result.value);
+      } else {
+        setPreviewContent({ path: entry.path, name: entry.name, size: 0, mtime: "", mime: "text", content: "Unable to load." });
+      }
+    } catch {
+      setPreviewContent({ path: entry.path, name: entry.name, size: 0, mtime: "", mime: "text", content: "Error loading." });
+    } finally {
+      setPreviewLoading(false);
+    }
+  }, [command, sessionId]);
+  const closePreview = (0, import_react17.useCallback)(() => {
+    setPreview(null);
+    setPreviewContent(null);
+  }, []);
+  const initialLoading = outputTree === null && outputLoading;
+  if (initialLoading) {
+    return import_react17.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(
+      "div",
+      { style: { padding: "24px" } },
+      import_react17.default.createElement("div", {
+        style: { color: "var(--dsw-status-error)", marginBottom: "12px", fontSize: "14px" }
+      }, "Unable to load output tree"),
+      import_react17.default.createElement("div", {
+        style: { color: "var(--dsw-alias-label-tertiary)", fontSize: "12px", marginBottom: "12px" }
+      }, outputError),
+      import_react17.default.createElement("button", {
+        onClick: () => {
+          setOutputError(null);
+          setOutputTree(null);
+          setOutputLoading(true);
+          command({ kind: "listOutput", sessionId }).then((result) => {
+            setOutputLoading(false);
+            if (result.ok && result.value !== null && typeof result.value === "object" && "children" in result.value) {
+              setOutputTree(result.value);
+            } else {
+              setOutputError(result.ok === false ? result.error ?? "Failed to load output tree" : "Invalid response");
+            }
+          }).catch((err) => {
+            setOutputLoading(false);
+            setOutputError(err instanceof Error ? err.message : "Failed to load output tree");
+          });
+        },
+        style: {
+          padding: "6px 16px",
+          border: "1px solid var(--dsw-alias-border-l2)",
+          borderRadius: "6px",
+          background: "var(--dsw-alias-interactive-bg-hover)",
+          color: "var(--dsw-alias-label-primary)",
+          cursor: "pointer",
+          fontSize: "13px"
+        }
+      }, "Retry Output")
+    );
+  }
+  if (snapshot === null) {
+    return import_react17.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", {
+      style: { padding: "24px", color: "var(--dsw-alias-label-tertiary)", fontSize: "14px" }
+    }, "No output files");
+  }
+  return import_react17.default.createElement(
+    "div",
+    {
+      style: { display: "flex", gap: "16px", minHeight: "400px", overflow: "visible" }
+    },
+    // Left: file tree
+    import_react17.default.createElement(
+      "div",
+      {
+        style: {
+          flex: "0 0 320px",
+          overflow: "auto",
+          borderRight: "1px solid var(--dsw-alias-border-l2)",
+          paddingRight: "12px",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      import_react17.default.createElement(
+        "div",
+        { style: { marginBottom: "12px" } },
+        import_react17.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(
+        "div",
+        { style: { flex: 1 } },
+        import_react17.default.createElement("div", {
+          style: {
+            fontSize: "11px",
+            fontWeight: 600,
+            color: "var(--dsw-alias-label-tertiary)",
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            padding: "4px 8px",
+            marginBottom: "4px"
+          }
+        }, "Targets"),
+        ...filteredTargets.map(
+          (t) => import_react17.default.createElement(TargetRow, {
+            key: t.targetId,
+            targetId: t.targetId,
+            target: t.target,
+            current: t.current,
+            defaultOpen: t.current,
+            containsSelected: t.containsSelected === true,
+            children: t.children.length > 0 ? t.children.map(
+              (entry) => renderOutputTree(entry, 0, t.targetId, openPreview, preview, selectedPath, selectedTargetId)
+            ) : void 0
+          })
+        )
+      )
+    ),
+    // Right: preview frame
+    import_react17.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minWidth: 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)"
+        }
+      },
+      preview === null ? import_react17.default.createElement("div", {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--dsw-alias-label-tertiary)",
+          fontSize: "13px"
+        }
+      }, "Select a file to preview") : import_react17.default.createElement(
+        import_react17.default.Fragment,
+        null,
+        import_react17.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,
+            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(
+          "div",
+          {
+            style: { flex: 1, minHeight: 0, overflow: "auto", padding: "12px" }
+          },
+          previewLoading && import_react17.default.createElement("div", {
+            style: { color: "var(--dsw-alias-label-tertiary)", padding: "16px 0" }
+          }, "Loading..."),
+          previewContent !== null && renderPreview(previewContent)
+        )
+      )
+    )
+  );
+}
+function renderOutputTree(entry, depth, targetId, onSelect, selected, selectedPath, selectedTargetId) {
+  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, {
+      key: `${targetId}:${entry.path}`,
+      name: entry.name,
+      depth,
+      defaultOpen: depth < 2,
+      containsSelected,
+      children: entry.children.map(
+        (child) => renderOutputTree(child, depth + 1, targetId, onSelect, selected, selectedPath, selectedTargetId)
+      )
+    });
+  }
+  const isSelected = selected?.entry.path === entry.path && selected?.targetId === targetId;
+  return import_react17.default.createElement(FileRow, {
+    key: `${targetId}:${entry.path}`,
+    name: entry.name,
+    depth,
+    size: entry.size !== void 0 ? formatSize(entry.size) : void 0,
+    isSelected,
+    onClick: () => onSelect(entry, targetId)
+  });
+}
+function renderPreview(result) {
+  if (result.mime === "binary") {
+    return import_react17.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)
+    );
+  }
+  if (result.content === void 0) {
+    return import_react17.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 });
+  }
+  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 });
+    } catch {
+    }
+  }
+  const lines = result.content.split("\n");
+  return import_react17.default.createElement(import_dsh_client_ui_primitives6.ReadBlock, {
+    lines: lines.map((text, i) => ({ number: i + 1, text })),
+    totalLines: lines.length,
+    maxLines: 500
+  });
+}
+function filterEntries(entries, allowed) {
+  const result = [];
+  for (const entry of entries) {
+    if (entry.kind === "directory" && entry.children !== void 0) {
+      const filtered = filterEntries(entry.children, allowed);
+      if (filtered.length > 0) result.push({ ...entry, children: filtered });
+    } else if (allowed.has(entry.category)) {
+      result.push(entry);
+    }
+  }
+  return result;
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/ui/client/pentester-view.tsx
+var CORE_REFRESH_MS = 1e4;
+var BACKOFF_BASE = 3e3;
+var BACKOFF_MAX = 3e4;
+function computeActivitySignature(sessionList, rootSessionId, delegationSessionIds) {
+  const subagents = sessionList.subagentsByParent?.[rootSessionId];
+  let running = 0;
+  if (subagents !== void 0) {
+    for (const entry of subagents.entries ?? []) {
+      if (delegationSessionIds.has(entry.sessionId) && entry.activity === "running") {
+        running++;
+      }
+    }
+  }
+  for (const sid of delegationSessionIds) {
+    const s = sessionList.byId[sid];
+    if (s !== void 0 && s.running) running++;
+  }
+  return { ids: [...delegationSessionIds].sort().join(","), running };
+}
+function resolveDelegationPresentationState(delegation, sessionList, rootSessionId) {
+  if (delegation.status === "failed") return "inactive";
+  if (delegation.status === "closed") return "inactive";
+  const subagents = sessionList.subagentsByParent?.[rootSessionId];
+  if (subagents !== void 0 && delegation.sessionId !== void 0) {
+    const entry = subagents.entries?.find(
+      (e) => e.sessionId === delegation.sessionId
+    );
+    if (entry !== void 0) {
+      if (entry.activity === "running") return "running";
+      if (entry.activity === "inactive") return "inactive";
+    }
+  }
+  if (delegation.sessionId !== void 0) {
+    const s = sessionList.byId[delegation.sessionId];
+    if (s !== void 0 && s.running) return "running";
+  }
+  if (delegation.status === "starting") return "running";
+  return "unknown";
+}
+function useDelegationActivity(sessions, rootSessionId, delegations) {
+  const delegationSessionIds = (0, import_react18.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 raw = sessions?.list.getSnapshot();
+    if (raw === void 0) return cachedMapRef.current;
+    const sig = computeActivitySignature(raw, rootSessionId, delegationSessionIds);
+    const sigKey = `${sig.ids}|${sig.running}`;
+    if (sigKey === prevSigRef.current) return cachedMapRef.current;
+    prevSigRef.current = sigKey;
+    const map2 = /* @__PURE__ */ new Map();
+    for (const d of delegations) {
+      map2.set(d.id, resolveDelegationPresentationState(d, raw, rootSessionId));
+    }
+    cachedMapRef.current = map2;
+    return map2;
+  }, [sessions, rootSessionId, delegationSessionIds, delegations]);
+  return (0, import_react18.useSyncExternalStore)(
+    sessions?.list.subscribe ?? (() => () => {
+    }),
+    getSnapshot
+  );
+}
+var PERF_PREFIX = "[PENTERSTER_PERF]";
+var SWITCH_PREFIX = "[SESSION_SWITCH_PERF]";
+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 switchTime = sessionSwitchTimes2?.get(sessionId);
+  if (isPerf) {
+    console.log(`${PERF_PREFIX} mount=0ms`);
+    if (switchTime !== void 0) {
+      console.log(`${SWITCH_PREFIX} mount-delay=${(mountTime.current - switchTime).toFixed(0)}ms (current\u2192pentester-mount)`);
+    }
+  }
+  const openState = useSession?.((s) => s.openState);
+  const prevOpenState = (0, import_react18.useRef)(void 0);
+  (0, import_react18.useEffect)(() => {
+    if (!sessionPerf || openState === void 0) return;
+    if (openState !== prevOpenState.current) {
+      const elapsed = (performance.now() - mountTime.current).toFixed(0);
+      console.log(
+        `%c${SWITCH_PREFIX}%c openState %c${String(prevOpenState.current)}%c \u2192 %c${openState}%c +${elapsed}ms`,
+        "color:#f59e0b;font-weight:bold",
+        "",
+        "color:#6b7280",
+        "",
+        "color:#10b981;font-weight:bold",
+        ""
+      );
+      if (openState === "open" && switchTime !== void 0) {
+        console.log(
+          `%c${SWITCH_PREFIX}%c session-open %c+${(performance.now() - switchTime).toFixed(0)}ms%c (current\u2192open)`,
+          "color:#f59e0b;font-weight:bold",
+          "",
+          "color:#10b981;font-weight:bold",
+          "",
+          ""
+        );
+      }
+      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 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) => {
+    if (reason !== "retry" && reason !== "refresh" && getPentesterEndpointState() === "missing") {
+      if (isPerf) console.log(`${RPC_PREFIX} circuit-open endpoint=missing reason=${reason}`);
+      return;
+    }
+    const mismatch = getBuildMismatch();
+    if (mismatch !== null) {
+      pollingPausedRef.current = true;
+      setDataState({
+        kind: "error",
+        error: `Pentester Host/Client build mismatch
+Host: ${mismatch.host}
+Client: ${mismatch.client}`,
+        code: "build_mismatch"
+      });
+      setRequestState("idle");
+      return;
+    }
+    if (pendingRef.current !== null) {
+      if (isPerf) console.log(`${RPC_PREFIX} busy reason=${reason} existing=${pendingRef.current.reason}`);
+      return;
+    }
+    if (reason === "retry") {
+      resetPentesterEndpointState();
+    }
+    const id = ++requestSeqRef.current;
+    const pending = { id, sessionId, reason };
+    pendingRef.current = pending;
+    if (reason === "startup") {
+      setRequestState("pending");
+    } else if (reason === "retry") {
+      setRequestState("retrying");
+    }
+    const tStart = performance.now();
+    if (isPerf) {
+      console.log(`${RPC_PREFIX} id=${id} kind=snapshot reason=${reason} start`);
+      if (switchTime !== void 0) {
+        console.log(`${SWITCH_PREFIX} pentesterView-request +${(tStart - switchTime).toFixed(0)}ms`);
+      }
+    }
+    try {
+      const result = await pentesterCommand({ kind: "snapshot", sessionId }, 3e4);
+      if (pendingRef.current?.id !== id) {
+        if (isPerf) console.log(`${RPC_PREFIX} id=${id} stale (current=${pendingRef.current?.id})`);
+        return;
+      }
+      if (!mountedRef.current) return;
+      const tResp = performance.now();
+      if (isPerf) {
+        console.log(`${RPC_PREFIX} id=${id} success duration=${(tResp - tStart).toFixed(0)}ms`);
+        if (switchTime !== void 0) {
+          console.log(`${SWITCH_PREFIX} pentesterView-response +${(tResp - switchTime).toFixed(0)}ms duration=${(tResp - tStart).toFixed(0)}ms`);
+        }
+      }
+      if (result.ok) {
+        backoffRef.current = 0;
+        pollingPausedRef.current = false;
+        const value = result.value;
+        if (value !== null && typeof value === "object" && "kind" in value && value.kind === "unbound") {
+          const unbound = value;
+          setDataState({ kind: "unbound", targets: unbound.targets });
+          snapshotRef.current = null;
+        } else {
+          const snap = value;
+          snapshotRef.current = snap;
+          setDataState({ kind: "bound", snapshot: snap });
+          setActiveTargetId((prev) => {
+            if (prev !== null) return prev;
+            const targets = snap.targets;
+            if (targets.length > 0) return targets[0].id;
+            return null;
+          });
+        }
+        setRequestState("idle");
+      } else {
+        if (result.code === "rpc_endpoint_missing") {
+          pollingPausedRef.current = true;
+          backoffRef.current = 0;
+          if (isPerf) console.log(`${RPC_PREFIX} id=${id} fatal=${result.code} polling-paused`);
+        } else {
+          backoffRef.current = backoffRef.current === 0 ? BACKOFF_BASE : Math.min(backoffRef.current * 2, BACKOFF_MAX);
+        }
+        if (snapshotRef.current !== null) {
+          setDataState({ kind: "error", error: result.error ?? "Unknown error", code: result.code });
+          setRequestState("idle");
+        } else {
+          setDataState({ kind: "error", error: result.error ?? "Unknown error", code: result.code });
+          setRequestState("idle");
+        }
+      }
+    } catch (err) {
+      if (pendingRef.current?.id !== id) {
+        if (isPerf) console.log(`${RPC_PREFIX} id=${id} stale-error (current=${pendingRef.current?.id})`);
+        return;
+      }
+      if (!mountedRef.current) return;
+      const errMsg2 = err instanceof Error ? err.message : String(err);
+      if (isPerf) console.log(`${RPC_PREFIX} id=${id} error=${errMsg2}`);
+      if (errMsg2.includes("404") || errMsg2.includes("transport")) {
+        pollingPausedRef.current = true;
+        backoffRef.current = 0;
+      } else {
+        backoffRef.current = backoffRef.current === 0 ? BACKOFF_BASE : Math.min(backoffRef.current * 2, BACKOFF_MAX);
+      }
+      if (snapshotRef.current !== null) {
+        setDataState({ kind: "error", error: errMsg2 });
+        setRequestState("idle");
+      } else {
+        setDataState({ kind: "error", error: errMsg2 });
+        setRequestState("idle");
+      }
+    } finally {
+      if (pendingRef.current?.id === id) {
+        pendingRef.current = null;
+        firstLoadDone.current = true;
+      }
+    }
+  }, [pentesterCommand, sessionId, switchTime]);
+  (0, import_react18.useEffect)(() => {
+    mountedRef.current = true;
+    pollingPausedRef.current = false;
+    backoffRef.current = 0;
+    loadSnapshot("startup");
+    const scheduleNext = () => {
+      if (!mountedRef.current) return;
+      if (pollingPausedRef.current) {
+        if (isPerf) console.log(`${RPC_PREFIX} polling-paused endpoint-missing`);
+        return;
+      }
+      const delay = backoffRef.current > 0 ? Math.min(backoffRef.current, BACKOFF_MAX) : CORE_REFRESH_MS;
+      timerRef.current = setTimeout(async () => {
+        if (!mountedRef.current) return;
+        if (document.visibilityState !== "visible") {
+          scheduleNext();
+          return;
+        }
+        await loadSnapshot("poll");
+        scheduleNext();
+      }, delay);
+    };
+    scheduleNext();
+    return () => {
+      mountedRef.current = false;
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, [loadSnapshot]);
+  (0, import_react18.useEffect)(() => {
+    const onVisible = () => {
+      if (document.visibilityState === "visible" && mountedRef.current && firstLoadDone.current && !pollingPausedRef.current) {
+        loadSnapshot("visible");
+      }
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, [loadSnapshot]);
+  const navigate = (0, import_react18.useCallback)((targetTab, focus) => {
+    setTab(targetTab);
+    if (focus !== void 0) setNavFocus(focus);
+  }, []);
+  const openSession = (0, import_react18.useCallback)((id) => {
+    sessions?.open(id);
+  }, [sessions]);
+  const isInitialLoading = dataState.kind === "initial" && requestState === "pending";
+  const isRetrying = requestState === "retrying";
+  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(
+    "div",
+    {
+      "data-testid": "pentester-view",
+      "data-pentester-view": "",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        minHeight: "100%",
+        overflow: "visible"
+      }
+    },
+    // ── Layer 1: TabsBar (sticky) ────────────────────────────────────────
+    import_react18.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)",
+          padding: "10px 16px 0 16px",
+          minHeight: "44px",
+          boxSizing: "border-box"
+        }
+      },
+      import_react18.default.createElement(PentesterTabBar, {
+        items: PENTESTER_TABS.map((t) => ({
+          id: t.id,
+          label: t.id.charAt(0).toUpperCase() + t.id.slice(1)
+        })),
+        active: tab,
+        onSelect: (id) => setTab(id)
+      })
+    ),
+    // ── Refresh error banner ──────────────────────────────────────────────
+    // Stale-while-revalidate: error + last good snapshot → show banner
+    errorMsg !== null && hasSnapshot && import_react18.default.createElement(
+      "div",
+      {
+        style: {
+          flex: "none",
+          padding: "6px 16px",
+          background: "var(--dsw-bg-status-error, rgba(220, 38, 38, 0.1))",
+          color: "var(--dsw-status-error, #dc2626)",
+          fontSize: "12px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      },
+      import_react18.default.createElement("span", null, errorMsg),
+      import_react18.default.createElement("button", {
+        onClick: () => {
+          if (pendingRef.current === null) {
+            void loadSnapshot("retry");
+          }
+        },
+        disabled: pendingRef.current !== null,
+        style: {
+          padding: "2px 8px",
+          border: "none",
+          borderRadius: "4px",
+          background: "transparent",
+          color: "var(--dsw-status-error, #dc2626)",
+          cursor: pendingRef.current !== null ? "not-allowed" : "pointer",
+          fontSize: "12px",
+          textDecoration: "underline",
+          opacity: pendingRef.current !== null ? 0.5 : 1
+        }
+      }, isRetrying ? "Retrying\u2026" : "Retry")
+    ),
+    // ── Body: flex 1, no scroll ──────────────────────────────────────────
+    import_react18.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          overflow: "visible",
+          padding: "16px"
+        }
+      },
+      // Initial loading: shell is already visible, show skeleton
+      isInitialLoading && import_react18.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(
+        "div",
+        { style: { padding: "24px" } },
+        import_react18.default.createElement("div", {
+          style: { color: "var(--dsw-status-error)", marginBottom: "12px", fontSize: "14px" }
+        }, errorMsg ?? "Unknown error"),
+        import_react18.default.createElement("button", {
+          onClick: () => {
+            if (pendingRef.current === null) {
+              void loadSnapshot("retry");
+            }
+          },
+          disabled: pendingRef.current !== null,
+          style: {
+            padding: "6px 16px",
+            border: "1px solid var(--dsw-alias-border-l2)",
+            borderRadius: "6px",
+            background: "var(--dsw-alias-interactive-bg-hover)",
+            color: "var(--dsw-alias-label-primary)",
+            cursor: pendingRef.current !== null ? "not-allowed" : "pointer",
+            fontSize: "13px",
+            opacity: pendingRef.current !== null ? 0.5 : 1
+          }
+        }, isRetrying ? "Retrying\u2026" : "Retry")
+      ),
+      // Unbound state
+      dataState.kind === "unbound" && import_react18.default.createElement(
+        "div",
+        { style: { padding: "24px" } },
+        import_react18.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(
+          "div",
+          { style: { marginBottom: "12px" } },
+          import_react18.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(
+              "div",
+              {
+                key: t.id,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 12px",
+                  marginBottom: "4px",
+                  border: "1px solid var(--dsw-alias-border-l2)",
+                  borderRadius: "6px",
+                  fontSize: "13px"
+                }
+              },
+              import_react18.default.createElement(
+                "div",
+                null,
+                import_react18.default.createElement("div", { style: { fontWeight: 500 } }, t.target),
+                import_react18.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", {
+                onClick: () => sessions?.open(t.rootSessionId),
+                style: {
+                  padding: "4px 12px",
+                  border: "1px solid var(--dsw-alias-border-l2)",
+                  borderRadius: "4px",
+                  background: "var(--dsw-alias-interactive-bg-hover)",
+                  color: "var(--dsw-alias-label-primary)",
+                  cursor: "pointer",
+                  fontSize: "12px"
+                }
+              }, "Open Session")
+            )
+          )
+        ),
+        import_react18.default.createElement("button", {
+          onClick: () => {
+            if (pendingRef.current === null) {
+              void loadSnapshot("refresh");
+            }
+          },
+          disabled: pendingRef.current !== null,
+          style: {
+            padding: "6px 16px",
+            border: "1px solid var(--dsw-alias-border-l2)",
+            borderRadius: "6px",
+            background: "var(--dsw-alias-interactive-bg-hover)",
+            color: "var(--dsw-alias-label-primary)",
+            cursor: pendingRef.current !== null ? "not-allowed" : "pointer",
+            fontSize: "13px",
+            marginTop: "8px",
+            opacity: pendingRef.current !== null ? 0.5 : 1
+          }
+        }, "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, {
+          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, {
+          snapshot,
+          command: pentesterCommand,
+          sessionId,
+          focusOutput: navFocus.output
+        })
+      )
+    )
+  );
+}
+
+// src/ui/client/pentester/locales.ts
+var NS = "dsh-pentester-view";
+var zh = {
+  "view.overview": "\u6982\u89C8",
+  "view.stages": "\u9636\u6BB5",
+  "view.findings": "\u6F0F\u6D1E",
+  "view.trace": "\u8F68\u8FF9",
+  "view.output": "\u8F93\u51FA",
+  "status.completed": "\u5DF2\u5B8C\u6210",
+  "status.active": "\u6D3B\u8DC3",
+  "status.reviewing": "\u5F85\u5BA1\u6279",
+  "status.pending": "\u7B49\u5F85\u4E2D",
+  "status.blocked": "\u963B\u585E",
+  "status.failed": "\u5931\u8D25",
+  "overview.noRun": "\u5C1A\u65E0\u6E17\u900F\u6D4B\u8BD5\u8FD0\u884C\u3002\n\u5728 Chat \u4E2D\u5B8C\u6210 Pre-engagement \u5F00\u59CB\u3002",
+  "overview.stats.assets": "\u8D44\u4EA7",
+  "overview.stats.findings": "\u6F0F\u6D1E",
+  "overview.stats.delegations": "\u59D4\u6258",
+  "overview.currentWork": "\u5F53\u524D\u5DE5\u4F5C",
+  "overview.stage": "\u9636\u6BB5",
+  "stages.title": "PTES \u9636\u6BB5",
+  "stages.noDelegations": "\u6682\u65E0\u59D4\u6258",
+  "findings.empty": "\u6682\u672A\u53D1\u73B0\u6F0F\u6D1E",
+  "findings.severity.critical": "\u4E25\u91CD",
+  "findings.severity.high": "\u9AD8\u5371",
+  "findings.severity.medium": "\u4E2D\u5371",
+  "findings.severity.low": "\u4F4E\u5371",
+  "findings.severity.info": "\u4FE1\u606F",
+  "trace.empty": "\u6682\u65E0\u6267\u884C\u8F68\u8FF9",
+  "output.empty": "\u6682\u65E0\u8F93\u51FA\u6587\u4EF6",
+  "output.filter.all": "\u5168\u90E8",
+  "output.filter.reports": "\u62A5\u544A",
+  "output.filter.evidence": "\u8BC1\u636E",
+  "output.filter.artifacts": "\u4EA7\u7269",
+  "output.preview.unavailable": "\u65E0\u6CD5\u9884\u89C8",
+  "output.preview.tooLarge": "\u6587\u4EF6\u8FC7\u5927",
+  "error.load": "\u65E0\u6CD5\u52A0\u8F7D Pentester \u72B6\u6001",
+  "error.retry": "\u91CD\u8BD5",
+  "loading": "\u52A0\u8F7D\u4E2D..."
+};
+var en = {
+  "view.overview": "Overview",
+  "view.stages": "Stages",
+  "view.findings": "Findings",
+  "view.trace": "Trace",
+  "view.output": "Output",
+  "status.completed": "Completed",
+  "status.active": "Active",
+  "status.reviewing": "Pending approval",
+  "status.pending": "Pending",
+  "status.blocked": "Blocked",
+  "status.failed": "Failed",
+  "overview.noRun": "No pentest run yet.\nStart by completing Pre-engagement in Chat.",
+  "overview.stats.assets": "Assets",
+  "overview.stats.findings": "Findings",
+  "overview.stats.delegations": "Delegations",
+  "overview.currentWork": "Current Work",
+  "overview.stage": "Stage",
+  "stages.title": "PTES Stages",
+  "stages.noDelegations": "No delegations",
+  "findings.empty": "No findings yet",
+  "findings.severity.critical": "Critical",
+  "findings.severity.high": "High",
+  "findings.severity.medium": "Medium",
+  "findings.severity.low": "Low",
+  "findings.severity.info": "Info",
+  "trace.empty": "No execution trace yet",
+  "output.empty": "No output files",
+  "output.filter.all": "All",
+  "output.filter.reports": "Reports",
+  "output.filter.evidence": "Evidence",
+  "output.filter.artifacts": "Artifacts",
+  "output.preview.unavailable": "Preview unavailable",
+  "output.preview.tooLarge": "File too large",
+  "error.load": "Unable to load Pentester state",
+  "error.retry": "Retry",
+  "loading": "Loading..."
+};
+
+// src/build-id.ts
+var BUILD_ID = "2.2.0+478786d";
+
+// src/ui/client/plugin.tsx
+var SESSION_SWITCH_PERF = "[SESSION_SWITCH_PERF]";
+var isSessionPerf = typeof window !== "undefined" && window.__DSH_SESSION_PERF === true;
+var sessionSwitchTimes = /* @__PURE__ */ new Map();
+var lastCurrentId;
+var pentesterEndpointState2 = "unknown";
+function getPentesterEndpointState2() {
+  return pentesterEndpointState2;
+}
+function setPentesterEndpointState(state) {
+  pentesterEndpointState2 = state;
+}
+var buildMismatch = null;
+function getBuildMismatch() {
+  return buildMismatch;
+}
+var remoteMounted = false;
+var remoteMountError = null;
+function isRemoteMounted() {
+  return remoteMounted;
+}
+function getRemoteMountError() {
+  return remoteMountError;
+}
+var inject = ["slots", "remote", "sessions", "locale"];
+function apply(ctx) {
+  console.log(`[dsh-pentester] client build=${BUILD_ID}`);
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), "pentester: locale");
+  ctx.effect(() => {
+    let disposeMount;
+    let disposed = false;
+    void ctx.remote.$mount({
+      package: "dsh-pentester",
+      descriptors: [
+        ...PENTESTER_REMOTE.descriptors,
+        ...PENTESTER_VIEW_REMOTE.descriptors
+      ]
+    }).then((dispose) => {
+      if (disposed) {
+        dispose();
+        return;
+      }
+      disposeMount = dispose;
+      remoteMounted = true;
+      remoteMountError = null;
+      if (pentesterEndpointState2 === "missing") {
+        pentesterEndpointState2 = "unknown";
+      }
+      if (isSessionPerf) {
+        console.log("[dsh-pentester] client remote contribution mounted (pentesterDocker + pentesterView)");
+      }
+      void (async () => {
+        try {
+          const face = ctx.reflect.get("remote.pentesterView");
+          if (face === void 0) return;
+          const result = await face.command({ kind: "health" });
+          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") {
+              if (inner.buildId === BUILD_ID) {
+                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}`);
+              }
+            }
+          }
+        } catch (error51) {
+          console.warn("[dsh-pentester] build health check unavailable", error51);
+        }
+      })();
+    }).catch((error51) => {
+      remoteMounted = false;
+      remoteMountError = error51 instanceof Error ? error51.message : String(error51);
+      console.error("[dsh-pentester] client remote contribution mount failed:", remoteMountError);
+    });
+    return () => {
+      disposed = true;
+      disposeMount?.();
+    };
+  }, "pentester: remotes");
+  ctx.slots.inject(
+    "settings.section",
+    () => ctx.slots.register(
+      {
+        name: "settings.section",
+        id: "pentester-docker-engine",
+        order: 90,
+        label: () => "Pentester",
+        inject: () => {
+          const face = ctx.reflect.get("remote.pentesterDocker");
+          return { command: (input2) => dockerCommand(face, input2) };
+        }
+      },
+      (props) => import_react19.default.createElement(PentesterConfigSection, { ...props })
+    )
+  );
+  ctx.slots.inject("conversation.view", () => {
+    let disposeEntry;
+    const sync = () => {
+      const snapshot = ctx.sessions.list.getSnapshot();
+      const current = snapshot.current;
+      if (isSessionPerf && current !== lastCurrentId) {
+        const now = performance.now();
+        const prev = lastCurrentId;
+        lastCurrentId = current;
+        if (current !== void 0 && !sessionSwitchTimes.has(current)) {
+          sessionSwitchTimes.set(current, now);
+        }
+        console.log(
+          `%c${SESSION_SWITCH_PERF}%c current-changed %c${String(prev).slice(0, 8)}%c \u2192 %c${String(current).slice(0, 8)}%c +0ms`,
+          "color:#f59e0b;font-weight:bold",
+          "",
+          "color:#6b7280",
+          "",
+          "color:#3b82f6;font-weight:bold",
+          ""
+        );
+      }
+      if (current !== void 0 && isPentesterRootSession(snapshot, current)) {
+        if (disposeEntry === void 0) {
+          disposeEntry = ctx.slots.register(
+            {
+              name: "conversation.view",
+              id: "pentester",
+              order: 20,
+              label: "Pentester",
+              inject: (sessionId) => {
+                return {
+                  sessionId,
+                  reflect: ctx.reflect,
+                  sessions: {
+                    open: (id) => ctx.sessions.open(id),
+                    list: ctx.sessions.list
+                  },
+                  sessionSwitchTimes,
+                  sessionPerf: isSessionPerf
+                };
+              }
+            },
+            (props) => {
+              return import_react19.default.createElement(PentesterView, {
+                sessionId: props.sessionId,
+                reflect: props.reflect,
+                sessions: props.sessions,
+                useSession: props.useSession,
+                sessionSwitchTimes: props.sessionSwitchTimes,
+                sessionPerf: props.sessionPerf
+              });
+            }
           );
         }
       } else {