@elinpf/dsh-ops-trace-ui 0.1.0

package/README.i18n.yaml

@@ -0,0 +1,4 @@
+title: "@elinpf/dsh-ops-trace-ui"
+description:
+  zh: "ops trace 的 host 面薄壳 — 注册共享 trace projection 并携带 web 面板 client bundle"
+  en: "Host-plane half of the ops trace feature — registers the shared trace projection and ships the web panel client bundle"

package/README.md

@@ -0,0 +1,37 @@
+# @elinpf/dsh-ops-trace-ui
+
+The host-plane half of the ops trace feature — registers the shared `trace` session projection and ships the web panel client bundle (the investigation-tree panel above the composer).
+
+## What it does
+
+One thin shell, two halves:
+
+- **Host half** (`src/index.ts`): registers the shared `trace` projection into `ctx.sessionProjections`, deferred through `ctx.inject` so the loader never orders this row against the registry. The projection definition is imported **verbatim** from `@elinpf/dsh-ops-tool-trace` — reference identity, not a copy — so key/schema/fold/stateVersion can never drift between the tool half and the panel half.
+- **Client half** (`src/client.ts`, esbuild-bundled to `lib/client.js`): registers a `conversation.input.dock` entry (`id: 'ops-tree'`) that renders a collapsible investigation-tree panel, structurally identical to todo_write's TodoPanel. Reads the `trace` projection via `useProjection`; degrades to rendering nothing when the registry is absent.
+
+Registers no tools and no prompt sections — the `trace` tool and its methodology live in `@elinpf/dsh-ops-tool-trace`, mounted preset-plane.
+
+## Design notes
+
+- **Why a separate package**: the trace feature splits by plane. The tool is preset-plane (model-facing); the projection registry and web client carriers are host-plane. This package is the host-plane mount point — a row the ops preset composes so the panel reaches the browser.
+- **Client discovery is runtime**: the web app's ClientModuleRegistry scans the composed host cordis entries, so this package must stay mounted host-plane via its `cordis.patch.yml` row or the panel never reaches the browser.
+- **Shared layout**: sibling ordering, depth, and DFS flattening come from `ops-tool-trace/tree-layout` — the human sees the same layout the model sees.
+- **Per-session UI state**: the dock unmounts on conversation switch, resetting React state; the collapse/selection choices live in a module-level map keyed by session (`DockUiState` in `./types`) so they survive unmount.
+
+## Configuration
+
+```yaml
+- id: ops-trace-ui
+  name: '@elinpf/dsh-ops-trace-ui'
+```
+
+No config keys — `Config` is an empty schemastery object.
+
+## Testing
+
+```sh
+npm run build   # tsc → lib/, then esbuild → lib/client.js
+npx vitest run
+```
+
+Unit tests cover both entries' export shape (function-plugin form, no default export), the verbatim projection registration, the fold behavior driven through the registered definition, the dock slot registration, and HMR unload — running every fiber disposer removes both the projection and the dock entry.

package/README.zh.md

@@ -0,0 +1,37 @@
+# @elinpf/dsh-ops-trace-ui
+
+ops trace 功能的 host 面薄壳 — 注册共享的 `trace` session projection,并携带 web 面板 client bundle(输入框上方的调查树面板)。
+
+## 功能
+
+一个薄壳,两个 half:
+
+- **Host 半**(`src/index.ts`):把共享的 `trace` projection 注册进 `ctx.sessionProjections`,通过 `ctx.inject` 延迟执行,loader 不会因此把本行与 registry 排序。projection 定义从 `@elinpf/dsh-ops-tool-trace` **原样引用**(引用同一对象,不是复制),因此 key/schema/fold/stateVersion 在工具半和面板半之间永不漂移。
+- **Client 半**(`src/client.ts`,esbuild 打包为 `lib/client.js`):注册一个 `conversation.input.dock` 条目(`id: 'ops-tree'`),渲染可折叠的调查树面板,结构上与 todo_write 的 TodoPanel 完全一致。通过 `useProjection` 读 `trace` projection;registry 缺席时降级为不渲染。
+
+不注册任何工具和 prompt section — `trace` 工具及其方法论在 `@elinpf/dsh-ops-tool-trace`,挂在 preset 面。
+
+## 设计要点
+
+- **为什么单独成包**:trace 功能按 plane 拆分。工具在 preset 面(面向模型);projection 注册表和 web client 载体在 host 面。本包就是 host 面的挂载点 — ops preset 组合它,面板才能到达浏览器。
+- **client 发现是运行时的**:web app 的 ClientModuleRegistry 扫描组合后的 host cordis 条目,因此本包必须通过 `cordis.patch.yml` 行保持 host 面挂载,否则面板永远到不了浏览器。
+- **共享布局**:兄弟排序、深度、DFS 扁平化来自 `ops-tool-trace/tree-layout` — 人看到的布局与模型看到的一致。
+- **按会话的 UI 状态**:dock 在切换会话时卸载,React state 随之重置;折叠/选择状态放在以会话为键的模块级 map(`./types` 的 `DockUiState`)里,卸载后仍然保留。
+
+## 配置
+
+```yaml
+- id: ops-trace-ui
+  name: '@elinpf/dsh-ops-trace-ui'
+```
+
+无配置项 — `Config` 是空的 schemastery object。
+
+## 测试
+
+```sh
+npm run build   # tsc → lib/,然后 esbuild → lib/client.js
+npx vitest run
+```
+
+单元测试覆盖:两个入口的导出形态(函数插件形式、无 default 导出)、projection 的原样注册、通过注册定义驱动的 fold 行为、dock slot 注册,以及 HMR 卸载 — 执行全部 fiber disposer 后,projection 和 dock 条目都被移除。

package/cordis.patch.yml

@@ -0,0 +1,3 @@
+- insert:
+    - id: ops-trace-ui
+      name: '@elinpf/dsh-ops-trace-ui'

package/lib/client.js

@@ -0,0 +1,721 @@
+window.__ModuleLoader__.load({ id: "@elinpf/dsh-ops-trace-ui", factory: (require) => {
+var module = { exports: {} }; var exports = module.exports;
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.ts
+var client_exports = {};
+__export(client_exports, {
+  apply: () => apply,
+  inject: () => inject,
+  name: () => name
+});
+module.exports = __toCommonJS(client_exports);
+var import_react = require("react");
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+
+// ../ops-tool-trace/lib/tree-layout.js
+var STATUS_ORDER = {
+  in_progress: 0,
+  pending: 1,
+  done: 2,
+  dead_end: 3,
+  goal: 4,
+  resolved: 5
+};
+function sortChildren(nodes) {
+  return [...nodes].sort((a, b) => {
+    const aIsGoal = a.id === "goal";
+    const bIsGoal = b.id === "goal";
+    if (aIsGoal && !bIsGoal)
+      return 1;
+    if (!aIsGoal && bIsGoal)
+      return -1;
+    return (STATUS_ORDER[a.status] ?? 9) - (STATUS_ORDER[b.status] ?? 9);
+  });
+}
+function buildTreeIndex(nodes) {
+  const children = {};
+  let root = null;
+  for (const n of nodes) {
+    if (n.parent === null) {
+      root = n;
+    } else {
+      if (!children[n.parent])
+        children[n.parent] = [];
+      children[n.parent].push(n);
+    }
+  }
+  return { children, root };
+}
+function depthOf(nodes, id, cache = {}) {
+  if (id in cache)
+    return cache[id];
+  let depth = 0;
+  let current = nodes.find((n) => n.id === id);
+  const seen = /* @__PURE__ */ new Set();
+  while (current && current.parent !== null && !seen.has(current.id)) {
+    seen.add(current.id);
+    depth++;
+    current = nodes.find((n) => n.id === current.parent);
+  }
+  cache[id] = depth;
+  return depth;
+}
+function flattenTree(nodes) {
+  const { children, root } = buildTreeIndex(nodes);
+  const result = [];
+  const visited = /* @__PURE__ */ new Set();
+  function visit(node) {
+    if (visited.has(node))
+      return;
+    visited.add(node);
+    result.push(node);
+    const kids = children[node.id];
+    if (kids)
+      for (const k of sortChildren(kids))
+        visit(k);
+  }
+  if (root)
+    visit(root);
+  for (const n of nodes) {
+    if (!visited.has(n))
+      result.push(n);
+  }
+  return result;
+}
+
+// src/client.ts
+var name = "ops-trace-client";
+var inject = ["slots"];
+var CSS = `
+/* Hide trace panel when the trajectory view tab is active (not the chat tab) */
+[data-phase]:has([role="tab"][aria-selected="true"]:not(:first-of-type)) .ops-trace-root {
+  display: none;
+}
+
+.ops-trace-root {
+  box-sizing: border-box;
+  flex: none;
+  overflow: hidden;
+  margin: 0 auto;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  border: 1px solid var(--dsw-alias-border-l1, #e5e7eb);
+  border-radius: 12px;
+  background: var(--dsw-specific-tip, #f6f8fa);
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2, #d0d7de);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2, #afb8c1);
+}
+
+.ops-trace-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 6px 12px;
+}
+
+.ops-trace-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  cursor: pointer;
+}
+
+.ops-trace-title {
+  flex: none;
+  font-size: 13px;
+  line-height: 24px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+
+.ops-trace-switcher {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  font-size: 13px;
+  line-height: 22px;
+  font-weight: 500;
+  padding: 0 8px;
+  border: 1px solid var(--dsw-alias-border-l1, #d0d7de);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-primary, #fff);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  cursor: pointer;
+}
+
+.ops-trace-switcher:hover {
+  background: var(--dsw-alias-bg-hover, #e9ecef);
+}
+
+.ops-trace-switcher-arrow {
+  display: grid;
+  place-items: center;
+  color: var(--dsw-alias-label-tertiary, #656d76);
+}
+
+.ops-trace-progress {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 400;
+  color: var(--dsw-alias-label-tertiary, #656d76);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ops-trace-chevron-btn {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #656d76);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.ops-trace-chevron-btn:hover {
+  background: var(--dsw-alias-bg-hover, #e9ecef);
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+
+.ops-trace-chevron {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--dsw-alias-label-tertiary, #656d76);
+}
+
+.ops-trace-selector-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ops-trace-selector-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary, #656d76);
+  border-radius: 4px;
+  text-align: left;
+}
+
+.ops-trace-selector-item:hover {
+  background: var(--dsw-alias-bg-hover, #e9ecef);
+}
+
+.ops-trace-selector-item-active {
+  background: var(--dsw-alias-bg-selected, #ddf4ff);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  font-weight: 500;
+}
+
+.ops-trace-selector-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1.5px solid var(--dsw-alias-label-tertiary, #848d97);
+  background: transparent;
+}
+
+.ops-trace-selector-dot-active {
+  border-color: var(--dsw-alias-state-business-primary, #0969da);
+  background: var(--dsw-alias-state-business-primary, #0969da);
+}
+
+.ops-trace-selector-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ops-trace-selector-tag {
+  flex: none;
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: rgba(26,127,55,0.12);
+  color: #1a7f37;
+}
+
+.ops-trace-lead {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--dsw-alias-label-tertiary, #656d76);
+}
+
+.ops-trace-progress {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 400;
+  color: var(--dsw-alias-label-tertiary, #656d76);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ops-trace-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.ops-trace-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary, #656d76);
+}
+
+.ops-trace-item-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 1px 4px;
+}
+
+.ops-trace-item-row:hover {
+  background: var(--dsw-alias-bg-hover, #e9ecef);
+}
+
+.ops-trace-glyph {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+.ops-trace-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ops-trace-node-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+
+.ops-trace-node-title-dead {
+  text-decoration: line-through;
+  color: var(--dsw-alias-label-tertiary, #848d97);
+}
+
+.ops-trace-node-hint {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #848d97);
+  margin-left: 4px;
+}
+
+.ops-trace-node-detail {
+  padding: 2px 8px 4px 22px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary, #848d97);
+}
+
+.ops-trace-detail-value {
+  min-width: 0;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.ops-trace-caused-tag {
+  display: inline-block;
+  font-size: 11px;
+  line-height: 16px;
+  padding: 1px 6px;
+  margin-right: 4px;
+  border-radius: 8px;
+  background: rgba(209,36,47,0.10);
+  color: #d1242f;
+  white-space: nowrap;
+  vertical-align: 1px;
+}
+
+.ops-trace-glyph-done { color: var(--dsw-alias-state-success-primary, #1a7f37); }
+.ops-trace-glyph-pending { color: var(--dsw-alias-label-caption, #848d97); }
+.ops-trace-glyph-progress { color: var(--dsw-alias-state-business-primary, #0969da); animation: ops-trace-spin 1s linear infinite; }
+.ops-trace-glyph-deadend { color: #d1242f; }
+.ops-trace-glyph-goal { color: var(--dsw-alias-state-success-primary, #1a7f37); }
+.ops-trace-glyph-resolved { color: var(--dsw-alias-state-success-primary, #1a7f37); }
+
+@keyframes ops-trace-spin { to { transform: rotate(360deg); } }
+`.trim();
+var cssInjected = false;
+function injectCSS() {
+  if (cssInjected || typeof document === "undefined") return;
+  const tag = document.createElement("style");
+  tag.dataset.plugin = "ops-trace";
+  tag.textContent = CSS;
+  document.head.appendChild(tag);
+  cssInjected = true;
+}
+function svgBase(children, cls) {
+  return (0, import_react.createElement)("svg", {
+    width: 14,
+    height: 14,
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    className: cls
+  }, children);
+}
+function DoneGlyph() {
+  return svgBase([
+    (0, import_react.createElement)("circle", { cx: 7, cy: 7, r: 6.4, stroke: "currentColor", strokeWidth: 1.2 }),
+    (0, import_react.createElement)("path", {
+      d: "M10.96 5.71L7.70 8.98C7.48 9.20 7.28 9.40 7.09 9.55C6.90 9.71 6.66 9.85 6.36 9.90C6.20 9.93 6.04 9.93 5.88 9.90C5.59 9.85 5.35 9.71 5.16 9.55C4.97 9.40 4.77 9.20 4.55 8.98L3.04 7.46L3.96 6.54L5.47 8.05C5.72 8.29 5.86 8.43 5.98 8.53C6.09 8.61 6.11 8.61 6.09 8.60C6.11 8.61 6.14 8.61 6.16 8.60C6.14 8.61 6.16 8.61 6.27 8.53C6.39 8.43 6.53 8.29 6.77 8.05L10.04 4.79L10.96 5.71Z",
+      fill: "currentColor"
+    })
+  ], "ops-trace-glyph ops-trace-glyph-done");
+}
+function ProgressGlyph(nodeId) {
+  const gid = "ops-g-" + nodeId;
+  return svgBase([
+    (0, import_react.createElement)(
+      "defs",
+      null,
+      (0, import_react.createElement)(
+        "linearGradient",
+        {
+          id: gid,
+          x1: 2.5,
+          y1: 12,
+          x2: 10.5,
+          y2: 3.5,
+          gradientUnits: "userSpaceOnUse"
+        },
+        (0, import_react.createElement)("stop", { stopColor: "currentColor" }),
+        (0, import_react.createElement)("stop", { offset: 1, stopColor: "currentColor", stopOpacity: 0 })
+      )
+    ),
+    (0, import_react.createElement)("circle", { cx: 7, cy: 7, r: 6.4, stroke: `url(#${gid})`, strokeWidth: 1.2 })
+  ], "ops-trace-glyph ops-trace-glyph-progress");
+}
+function PendingGlyph() {
+  return svgBase([
+    (0, import_react.createElement)("circle", { cx: 7, cy: 7, r: 6.4, stroke: "currentColor", strokeWidth: 1.2, strokeDasharray: "2.4 2.4" })
+  ], "ops-trace-glyph ops-trace-glyph-pending");
+}
+function DeadEndGlyph() {
+  return svgBase([
+    (0, import_react.createElement)("circle", { cx: 7, cy: 7, r: 6.4, stroke: "currentColor", strokeWidth: 1.2 }),
+    (0, import_react.createElement)("path", { d: "M4.5 4.5 L9.5 9.5 M9.5 4.5 L4.5 9.5", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })
+  ], "ops-trace-glyph ops-trace-glyph-deadend");
+}
+function GoalGlyph() {
+  return svgBase([
+    (0, import_react.createElement)("circle", { cx: 7, cy: 7, r: 6.4, stroke: "currentColor", strokeWidth: 1.6, strokeDasharray: "3 2" })
+  ], "ops-trace-glyph ops-trace-glyph-goal");
+}
+function ResolvedGlyph() {
+  return svgBase([
+    (0, import_react.createElement)("circle", { cx: 7, cy: 7, r: 6.4, stroke: "currentColor", strokeWidth: 1.4, fill: "currentColor", fillOpacity: 0.15 }),
+    (0, import_react.createElement)("path", {
+      d: "M10.96 5.71L7.70 8.98C7.48 9.20 7.28 9.40 7.09 9.55C6.90 9.71 6.66 9.85 6.36 9.90C6.20 9.93 6.04 9.93 5.88 9.90C5.59 9.85 5.35 9.71 5.16 9.55C4.97 9.40 4.77 9.20 4.55 8.98L3.04 7.46L3.96 6.54L5.47 8.05C5.72 8.29 5.86 8.43 5.98 8.53C6.09 8.61 6.11 8.61 6.09 8.60C6.11 8.61 6.14 8.61 6.16 8.60C6.14 8.61 6.16 8.61 6.27 8.53C6.39 8.43 6.53 8.29 6.77 8.05L10.04 4.79L10.96 5.71Z",
+      fill: "currentColor"
+    })
+  ], "ops-trace-glyph ops-trace-glyph-resolved");
+}
+function StatusGlyph(status, nodeId, hasInfo) {
+  switch (status) {
+    case "goal":
+      return GoalGlyph();
+    case "done":
+      return hasInfo ? ResolvedGlyph() : DoneGlyph();
+    case "in_progress":
+      return ProgressGlyph(nodeId);
+    case "dead_end":
+      return DeadEndGlyph();
+    case "resolved":
+      return ResolvedGlyph();
+    default:
+      return PendingGlyph();
+  }
+}
+function progressLabel(tree) {
+  const counts = {};
+  for (const n of tree.nodes) counts[n.status] = (counts[n.status] ?? 0) + 1;
+  const parts = [`${tree.nodes.length} nodes`];
+  if (counts.done) parts.push(`${counts.done} done`);
+  if (counts.in_progress) parts.push(`${counts.in_progress} active`);
+  if (counts.pending) parts.push(`${counts.pending} pending`);
+  if (counts.dead_end) parts.push(`${counts.dead_end} dead`);
+  if (tree.resolved) parts.push("resolved");
+  return parts.join("\u2002\xB7\u2002");
+}
+function TreeNodeItem({ node, depth, nodes }) {
+  const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const titleClass = node.status === "dead_end" ? "ops-trace-node-title ops-trace-node-title-dead" : "ops-trace-node-title";
+  const expandable = !!node.summary;
+  return (0, import_react.createElement)(
+    "li",
+    {
+      key: node.id,
+      className: "ops-trace-item",
+      "data-status": node.status,
+      style: { paddingLeft: `${depth * 20}px` }
+    },
+    (0, import_react.createElement)(
+      "div",
+      {
+        className: "ops-trace-item-row",
+        role: expandable ? "button" : void 0,
+        tabIndex: expandable ? 0 : void 0,
+        "aria-expanded": expandable ? expanded : void 0,
+        onClick: expandable ? () => setExpanded((v) => !v) : void 0,
+        onKeyDown: expandable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setExpanded((v) => !v);
+          }
+        } : void 0
+      },
+      (0, import_react.createElement)(
+        "span",
+        { className: "ops-trace-glyph", "aria-hidden": "true" },
+        StatusGlyph(node.status, node.id, node.caused_by.length > 0 || !!node.summary)
+      ),
+      (0, import_react.createElement)(
+        "div",
+        { className: "ops-trace-text" },
+        (0, import_react.createElement)("div", { className: titleClass }, node.title)
+      )
+    ),
+    expanded && expandable && (0, import_react.createElement)(
+      "div",
+      { className: "ops-trace-node-detail" },
+      node.caused_by.length > 0 && (0, import_react.createElement)("span", {
+        className: "ops-trace-caused-tag",
+        key: "caused"
+      }, "\u2190 " + node.caused_by.join(", ")),
+      node.summary
+    )
+  );
+}
+var dockUiState = /* @__PURE__ */ new Map();
+function uiStateFor(sessionKey) {
+  let s = dockUiState.get(sessionKey);
+  if (!s) {
+    s = { collapsed: false, activeIndex: null };
+    dockUiState.set(sessionKey, s);
+  }
+  return s;
+}
+function activeTreeIndex(forest) {
+  for (let i = forest.trees.length - 1; i >= 0; i--) {
+    if (!forest.trees[i].resolved) return i;
+  }
+  return forest.trees.length - 1;
+}
+function TraceDock({ useProjection, session }) {
+  let forest = null;
+  try {
+    if (useProjection) {
+      const val = useProjection("trace");
+      forest = val ?? null;
+    }
+  } catch {
+    forest = null;
+  }
+  const sessionKey = session?.sessionId ?? "default";
+  const ui = uiStateFor(sessionKey);
+  const [activeIndex, setActiveIndexState] = (0, import_react.useState)(ui.activeIndex);
+  const [collapsed, setCollapsedState] = (0, import_react.useState)(ui.collapsed);
+  const [selectorOpen, setSelectorOpen] = (0, import_react.useState)(false);
+  const setActiveIndex = (i) => {
+    ui.activeIndex = i;
+    setActiveIndexState(i);
+  };
+  const setCollapsed = (v) => {
+    ui.collapsed = v;
+    setCollapsedState(v);
+  };
+  if (!forest || !forest.trees || forest.trees.length === 0) return null;
+  const total = forest.trees.length;
+  const idx = Math.min(activeIndex ?? activeTreeIndex(forest), total - 1);
+  const tree = forest.trees[idx];
+  if (!tree || !tree.nodes || tree.nodes.length === 0) return null;
+  const hasMultiple = total > 1;
+  const headerTitle = hasMultiple ? `Trace ${idx + 1}/${total}` : "Trace";
+  return (0, import_react.createElement)(
+    "section",
+    {
+      className: "ops-trace-root",
+      "data-testid": "ops-trace-panel",
+      "aria-label": "Trace"
+    },
+    (0, import_react.createElement)(
+      "div",
+      { className: "ops-trace-body" },
+      // Header row: clicking anywhere (except the switcher) toggles expand/collapse
+      (0, import_react.createElement)(
+        "div",
+        {
+          className: "ops-trace-header",
+          onClick: (e) => {
+            if (e.target.closest(".ops-trace-switcher")) return;
+            setCollapsed(!collapsed);
+          },
+          role: "button",
+          tabIndex: 0,
+          "aria-expanded": !collapsed,
+          onKeyDown: (e) => {
+            if (e.target.closest(".ops-trace-switcher")) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setCollapsed(!collapsed);
+            }
+          }
+        },
+        (0, import_react.createElement)("span", { className: "ops-trace-lead", "aria-hidden": "true" }, (0, import_react.createElement)(import_dsh_client_ui_primitives.IconChecklistOutline14)),
+        // "Trace 1/2" — click to toggle the selector list
+        hasMultiple ? (0, import_react.createElement)(
+          "button",
+          {
+            type: "button",
+            className: "ops-trace-switcher",
+            onClick: () => setSelectorOpen((v) => !v),
+            "aria-expanded": selectorOpen
+          },
+          headerTitle,
+          (0, import_react.createElement)(
+            "span",
+            { className: "ops-trace-switcher-arrow", "aria-hidden": "true" },
+            selectorOpen ? (0, import_react.createElement)(import_dsh_client_ui_primitives.IconChevronUpOutline14) : (0, import_react.createElement)(import_dsh_client_ui_primitives.IconChevronDownOutline14)
+          )
+        ) : (0, import_react.createElement)("span", { className: "ops-trace-title" }, headerTitle),
+        (0, import_react.createElement)("span", { className: "ops-trace-progress" }, progressLabel(tree)),
+        (0, import_react.createElement)(
+          "span",
+          { className: "ops-trace-chevron", "aria-hidden": "true" },
+          collapsed ? (0, import_react.createElement)(import_dsh_client_ui_primitives.IconChevronUpOutline14) : (0, import_react.createElement)(import_dsh_client_ui_primitives.IconChevronDownOutline14)
+        )
+      ),
+      // Selector list — toggled by clicking "Trace N/M"
+      hasMultiple && selectorOpen && (0, import_react.createElement)(
+        "ul",
+        { className: "ops-trace-selector-list" },
+        forest.trees.map((t, i) => {
+          const tGoal = t.nodes[0]?.title ?? "";
+          const tResolved = t.resolved;
+          const isActive = i === idx;
+          return (0, import_react.createElement)(
+            "li",
+            { key: i },
+            (0, import_react.createElement)(
+              "button",
+              {
+                type: "button",
+                className: isActive ? "ops-trace-selector-item ops-trace-selector-item-active" : "ops-trace-selector-item",
+                onClick: () => {
+                  setActiveIndex(i);
+                  setSelectorOpen(false);
+                }
+              },
+              (0, import_react.createElement)("span", { className: isActive ? "ops-trace-selector-dot ops-trace-selector-dot-active" : "ops-trace-selector-dot", "aria-hidden": "true" }),
+              (0, import_react.createElement)("span", { className: "ops-trace-selector-title" }, tGoal),
+              tResolved && (0, import_react.createElement)("span", { className: "ops-trace-selector-tag" }, "resolved")
+            )
+          );
+        })
+      ),
+      // Tree content — toggled by chevron
+      !collapsed && (() => {
+        const cache = {};
+        const sorted = flattenTree(tree.nodes);
+        return (0, import_react.createElement)(
+          "ul",
+          { className: "ops-trace-list" },
+          sorted.map((node) => {
+            const depth = depthOf(tree.nodes, node.id, cache);
+            return (0, import_react.createElement)(TreeNodeItem, { key: node.id, node, depth, nodes: tree.nodes });
+          })
+        );
+      })()
+    )
+  );
+}
+function apply(ctx) {
+  injectCSS();
+  ctx.slots.inject(
+    "conversation.input.dock",
+    () => ctx.slots.register(
+      { name: "conversation.input.dock", id: "ops-tree", order: 10 },
+      TraceDock
+    )
+  );
+}
+
+return module.exports; } });
+//# sourceMappingURL=client.js.map

package/lib/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Ops-trace-ui: the host-plane half of the trace feature.
+ *
+ * Registers the shared `trace` session projection (defined once in
+ * @elinpf/dsh-ops-tool-trace) and carries the web client bundle — the
+ * investigation-tree panel. Client-half discovery is runtime: the web app's
+ * ClientModuleRegistry scans the composed host cordis entries, so this
+ * package must stay mounted host-plane via its cordis.patch.yml row or the
+ * panel never reaches the browser.
+ *
+ * Registers no tools and no prompt sections. The trace tool and its
+ * methodology live in @elinpf/dsh-ops-tool-trace, mounted preset-plane.
+ *
+ * @module @elinpf/dsh-ops-trace-ui
+ */
+import z from '@deepseek-ai/schemastery';
+import type { Context } from '@deepseek-ai/cordis';
+declare const name = "ops-trace-ui";
+declare const inject: string[];
+declare const Config: z<Schemastery.ObjectS<{}>, Schemastery.ObjectT<{}>>;
+declare function apply(ctx: Context, _config: Record<string, never>): void;
+export { Config, apply, inject, name };
+export type { DockUiState, TraceDockProps } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -0,0 +1,34 @@
+/**
+ * Ops-trace-ui: the host-plane half of the trace feature.
+ *
+ * Registers the shared `trace` session projection (defined once in
+ * @elinpf/dsh-ops-tool-trace) and carries the web client bundle — the
+ * investigation-tree panel. Client-half discovery is runtime: the web app's
+ * ClientModuleRegistry scans the composed host cordis entries, so this
+ * package must stay mounted host-plane via its cordis.patch.yml row or the
+ * panel never reaches the browser.
+ *
+ * Registers no tools and no prompt sections. The trace tool and its
+ * methodology live in @elinpf/dsh-ops-tool-trace, mounted preset-plane.
+ *
+ * @module @elinpf/dsh-ops-trace-ui
+ */
+import z from '@deepseek-ai/schemastery';
+import { traceProjection } from '@elinpf/dsh-ops-tool-trace';
+// No local module augmentation: the sessionProjections typing lives in
+// ops-tool-trace's index (the shared home) and applies globally via its d.ts.
+// ── Plugin identity ───────────────────────────────────────────────────────────
+const name = 'ops-trace-ui';
+const inject = [];
+// ── Config ───────────────────────────────────────────────────────────────────
+const Config = z.object({});
+function apply(ctx, _config) {
+    // sessionProjections is a host-plane service; a static inject is not
+    // declared so the loader does not order this row against it — defer with
+    // ctx.inject, the same pattern the tool half uses.
+    ctx.inject(['sessionProjections'], (pctx) => {
+        pctx.sessionProjections.register(traceProjection);
+    });
+}
+export { Config, apply, inject, name };
+//# sourceMappingURL=index.js.map

package/lib/invariant.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Invariant companion for @elinpf/dsh-ops-trace-ui.
+ *
+ * @module @elinpf/dsh-ops-trace-ui/invariant
+ */
+/** Cordis companion plugin name. */
+declare const name = "ops-trace-ui-invariant";
+/** Service required before the companion can reserve package ownership. */
+declare const inject: string[];
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Context carrying the invariant service.
+ * @returns a promise resolving after registration.
+ */
+declare const apply: (ctx: any) => Promise<void>;
+export { apply, inject, name };
+//# sourceMappingURL=invariant.d.ts.map

package/lib/invariant.js

@@ -0,0 +1,29 @@
+/**
+ * Invariant companion for @elinpf/dsh-ops-trace-ui.
+ *
+ * @module @elinpf/dsh-ops-trace-ui/invariant
+ */
+const PACKAGE_NAME = '@elinpf/dsh-ops-trace-ui';
+/** Cordis companion plugin name. */
+const name = 'ops-trace-ui-invariant';
+/** Service required before the companion can reserve package ownership. */
+const inject = ['invariants'];
+/**
+ * No runtime invariant: this package owns no session event types and no
+ * durable shape of its own. It re-registers the shared `trace` projection
+ * verbatim from @elinpf/dsh-ops-tool-trace (whose fold is pure and
+ * idempotent, validated tool-side before events reach the log) and carries
+ * the web panel client bundle — the panel only reads projection snapshots
+ * and holds ephemeral UI state.
+ */
+const install = () => { };
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Context carrying the invariant service.
+ * @returns a promise resolving after registration.
+ */
+const apply = async (ctx) => {
+    ctx.invariants.register(PACKAGE_NAME, install);
+};
+export { apply, inject, name };
+//# sourceMappingURL=invariant.js.map

package/lib/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Type definitions for ops-trace-ui.
+ *
+ * Types only — no runtime values live here. The client half imports the
+ * dock's UI-state shape from here; the host entry re-exports both so the
+ * package has one types home (also reachable via the ./types subpath).
+ *
+ * @module @elinpf/dsh-ops-trace-ui/types
+ */
+/**
+ * Per-session panel UI state. The dock unmounts when switching
+ * conversations, so React state resets on every switch-back — the two user
+ * choices live in a module-level map keyed by session to survive unmount.
+ * `activeIndex` null = follow the active tree (auto), set = user-pinned.
+ */
+export interface DockUiState {
+    collapsed: boolean;
+    activeIndex: number | null;
+}
+/**
+ * Props the dock slot runtime hands to the trace panel component. Both are
+ * optional: the panel degrades to rendering nothing when the projection
+ * registry or the session handle is absent.
+ */
+export interface TraceDockProps {
+    /** Projection read face; throws when the projection registry is absent. */
+    useProjection?: (key: string) => unknown | undefined;
+    /** The session the dock renders for. */
+    session?: {
+        sessionId?: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types.js

@@ -0,0 +1,11 @@
+/**
+ * Type definitions for ops-trace-ui.
+ *
+ * Types only — no runtime values live here. The client half imports the
+ * dock's UI-state shape from here; the host entry re-exports both so the
+ * package has one types home (also reachable via the ./types subpath).
+ *
+ * @module @elinpf/dsh-ops-trace-ui/types
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@elinpf/dsh-ops-trace-ui",
+  "version": "0.1.0",
+  "description": "Host-plane half of the ops trace feature — registers the shared trace session projection and ships the web panel client bundle. The tool itself lives in @elinpf/dsh-ops-tool-trace (preset plane).",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "default": "./lib/client.js"
+    },
+    "./invariant": {
+      "types": "./lib/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./types": {
+      "types": "./lib/types.d.ts",
+      "default": "./lib/types.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "lib/invariant.js",
+    "lib/types.js",
+    "lib/**/*.d.ts",
+    "cordis.patch.yml"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web"
+    }
+  },
+  "dependencies": {
+    "@deepseek-ai/schemastery": "^3.18.1",
+    "@elinpf/dsh-ops-tool-trace": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-invariants": "^0.0.1-rc.1",
+    "@deepseek-ai/dsh-session-projection": "^0.0.1-rc.1",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "4.0.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.0.1-rc.5",
+    "@deepseek-ai/dsh-session-projection": "0.0.1-rc.1",
+    "esbuild": "^0.24.0",
+    "react": "18.3.1",
+    "typescript": "^5.4.0",
+    "vitest": "^4.1.11"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc && node esbuild.config.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}