@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/ai/SessionInspector.hierarchy.cjs

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../../lib/utils.cjs");
+const format = require("../../lib/format.cjs");
+const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
+const StatusDot = require("../cells/StatusDot.cjs");
+const timestampFormat = require("../cells/timestamp-format.cjs");
+const Tree = require("../Tree.cjs");
+const Icon = require("../Icon.cjs");
+const providerIcons = require("../chat/provider-icons.cjs");
+const agentActionIcons = require("./agent-action-icons.cjs");
+const runtimeMode = require("./runtime-mode.cjs");
+const SessionInspector_collection = require("./SessionInspector.collection.cjs");
+const UiRobotAi = require("../../icons/components/UiRobotAi.cjs");
+const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
+const UiRepeat = require("../../icons/components/UiRepeat.cjs");
+const tokens = require("../../lib/tokens.cjs");
+function SessionHierarchyPicker({
+  collection,
+  state,
+  renderSessionActions
+}) {
+  const selected = SessionInspector_collection.selectedSessionCount(state.roots, state.checked);
+  const total = collection.sessions.length;
+  const label = `${selected} of ${total} session${total === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      className: "shrink-0",
+      align: "left",
+      menuLabel: "Session content",
+      menuClassName: "h-[min(58vh,34rem)] w-[min(42rem,calc(100vw-2rem))] overflow-hidden p-2",
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Select session content: ${label}`,
+          className: "flex h-control-h max-w-56 items-center gap-density-2 rounded-md border border-border bg-background px-density-2 text-left text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-muted/40",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                icon: UiRobotAi.UiRobotAi,
+                className: "size-4 shrink-0 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                icon: UiChevronDown.UiChevronDown,
+                className: "size-3.5 shrink-0 text-muted-foreground"
+              }
+            )
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsxRuntime.jsx(
+        Tree.Tree,
+        {
+          roots: state.roots,
+          ariaLabel: "Session content",
+          className: "h-full",
+          showControls: true,
+          getKey: (node) => node.key,
+          getChildren: (node) => node.children,
+          getSearchText: (node) => [node.label, node.model, node.effort, node.mode].filter(Boolean).join(" "),
+          defaultOpen: (node) => node.key === SessionInspector_collection.sessionKey(collection.currentSessionId),
+          hasMoreChildren: (node) => node.kind === "session" && Boolean(
+            node.item && !state.loadedSessionIds.has(node.item.id) && collection.loadSession
+          ),
+          loadChildren: state.loadChildren,
+          renderRow: ({ node, loading, error }) => {
+            const message = error ? String(error) : state.errors.get(node.itemId);
+            const actions = node.kind === "session" && node.item ? renderSessionActions == null ? void 0 : renderSessionActions(node.item) : void 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              HierarchyRow,
+              {
+                node,
+                checkState: SessionInspector_collection.hierarchyCheckState(node, state.checked),
+                loading: loading || state.loading.has(node.itemId),
+                onChecked: (include) => {
+                  void state.setBranchChecked(node, include).catch(() => void 0);
+                },
+                ...message ? { error: message } : {},
+                ...actions ? { actions } : {}
+              }
+            );
+          }
+        }
+      )
+    }
+  );
+}
+function HierarchyRow({
+  node,
+  checkState,
+  loading,
+  error,
+  onChecked,
+  actions
+}) {
+  const ProviderIcon = node.kind === "session" ? providerIcons.providerIcon(node.provider) : void 0;
+  const EffortIcon = node.effort ? agentActionIcons.effortIcon(node.effort) : void 0;
+  const ModeIcon = node.mode ? modeIcon(node.mode) : void 0;
+  const NodeIcon = node.kind === "turn" ? UiRepeat.UiRepeat : UiRobotAi.UiRobotAi;
+  const age = useRelativeAge(node.updatedAt);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-density-2 py-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HierarchyCheckbox,
+      {
+        label: `Include ${node.label}`,
+        state: checkState,
+        onChange: onChecked
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        icon: ProviderIcon ?? NodeIcon,
+        className: utils.cn(
+          "size-4 shrink-0 text-muted-foreground",
+          ProviderIcon && providerIcons.providerIconColor(node.provider)
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-density-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-medium text-foreground", children: node.label }),
+        node.status ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusDot.StatusDot, { status: statusDotStatus(node.status), size: "xs" }),
+          node.status
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap gap-x-density-2 text-[10px] text-muted-foreground", children: [
+        node.model ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: node.model }) : null,
+        node.effort ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+          EffortIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: EffortIcon.icon,
+              title: `${EffortIcon.label} effort`,
+              className: utils.cn("size-3", effortToneClass(EffortIcon.tone))
+            }
+          ) : null,
+          node.effort,
+          " effort"
+        ] }) : null,
+        (ModeIcon == null ? void 0 : ModeIcon.icon) ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            icon: ModeIcon.icon,
+            title: `${ModeIcon.label} mode`,
+            className: "size-3 text-muted-foreground"
+          }
+        ) : null,
+        node.pid ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "pid ",
+          node.pid
+        ] }) : null,
+        node.durationMs !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: format.formatDuration(node.durationMs) }) : null,
+        age ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: node.updatedAt, children: age }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: node.cost ? tokens.formatCost(node.cost) : "-" }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading…" }) : null,
+        error ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", className: "text-destructive", children: error }) : null
+      ] })
+    ] }),
+    actions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", onClick: (event) => event.stopPropagation(), children: actions }) : null
+  ] });
+}
+const EFFORT_TONE_CLASS = {
+  sky: "text-sky-600",
+  amber: "text-amber-600",
+  violet: "text-violet-600",
+  emerald: "text-emerald-600",
+  teal: "text-teal-600",
+  orange: "text-orange-600",
+  rose: "text-rose-600",
+  indigo: "text-indigo-600",
+  fuchsia: "text-fuchsia-600",
+  pink: "text-pink-600",
+  slate: "text-slate-500"
+};
+function effortToneClass(tone) {
+  return EFFORT_TONE_CLASS[tone];
+}
+function modeIcon(mode) {
+  const key = mode.trim().toLowerCase();
+  if (key in agentActionIcons.WORKFLOW_PHASES) {
+    return agentActionIcons.WORKFLOW_PHASES[key];
+  }
+  for (const family of runtimeMode.SPEC_RUNTIME_FAMILIES) {
+    const match = family.modes.find(
+      (candidate) => candidate.id === key || candidate.backend === key
+    );
+    if (match) return { icon: match.icon, label: match.label };
+  }
+  return void 0;
+}
+function statusDotStatus(status) {
+  switch (status.trim().toLowerCase()) {
+    case "completed":
+    case "succeeded":
+      return "success";
+    case "failed":
+    case "cancelled":
+    case "zombie":
+      return "error";
+    case "planning":
+    case "ask":
+    case "stopping":
+      return "warning";
+    default:
+      return "info";
+  }
+}
+function useRelativeAge(updatedAt) {
+  const [, setTick] = react.useState(0);
+  react.useEffect(() => {
+    if (!updatedAt) return void 0;
+    const timer = window.setInterval(
+      () => setTick((value) => value + 1),
+      3e4
+    );
+    return () => window.clearInterval(timer);
+  }, [updatedAt]);
+  if (!updatedAt) return "";
+  const date = new Date(updatedAt);
+  return Number.isNaN(date.getTime()) ? "" : timestampFormat.formatRelativeTime(date);
+}
+function HierarchyCheckbox({
+  label,
+  state,
+  onChange
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (ref.current) ref.current.indeterminate = state === "indeterminate";
+  }, [state]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      "aria-label": label,
+      checked: state === "checked",
+      onClick: (event) => event.stopPropagation(),
+      onChange: (event) => onChange(event.target.checked),
+      className: "size-3.5 shrink-0 accent-primary"
+    }
+  );
+}
+exports.SessionHierarchyPicker = SessionHierarchyPicker;
+//# sourceMappingURL=SessionInspector.hierarchy.cjs.map

package/dist/data/ai/SessionInspector.hierarchy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionInspector.hierarchy.cjs","sources":["../../../src/data/ai/SessionInspector.hierarchy.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { UiChevronDown, UiRepeat, UiRobotAi } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { formatDuration } from \"../../lib/format\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { StatusDot } from \"../cells/StatusDot\";\nimport { formatRelativeTime } from \"../cells/timestamp-format\";\nimport { Tree } from \"../Tree\";\nimport { Icon } from \"../Icon\";\nimport { providerIcon, providerIconColor } from \"../chat/provider-icons\";\nimport { effortIcon, WORKFLOW_PHASES } from \"./agent-action-icons\";\nimport { SPEC_RUNTIME_FAMILIES } from \"./runtime-mode\";\nimport { formatCost } from \"./session-cost\";\nimport {\n  hierarchyCheckState,\n  selectedSessionCount,\n  sessionKey,\n  type SessionCollectionInput,\n  type SessionCollectionItem,\n  type SessionHierarchyNode,\n} from \"./SessionInspector.collection\";\nimport type { SessionHierarchyState } from \"./SessionInspector.hierarchy-state\";\n\nexport function SessionHierarchyPicker({\n  collection,\n  state,\n  renderSessionActions,\n}: {\n  collection: SessionCollectionInput;\n  state: SessionHierarchyState;\n  renderSessionActions?: (item: SessionCollectionItem) => ReactNode;\n}) {\n  const selected = selectedSessionCount(state.roots, state.checked);\n  const total = collection.sessions.length;\n  const label = `${selected} of ${total} session${total === 1 ? \"\" : \"s\"}`;\n  return (\n    <DropdownMenu\n      className=\"shrink-0\"\n      align=\"left\"\n      menuLabel=\"Session content\"\n      menuClassName=\"h-[min(58vh,34rem)] w-[min(42rem,calc(100vw-2rem))] overflow-hidden p-2\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`Select session content: ${label}`}\n          className=\"flex h-control-h max-w-56 items-center gap-density-2 rounded-md border border-border bg-background px-density-2 text-left text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-muted/40\"\n        >\n          <Icon\n            icon={UiRobotAi}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n          <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n          <Icon\n            icon={UiChevronDown}\n            className=\"size-3.5 shrink-0 text-muted-foreground\"\n          />\n        </button>\n      }\n    >\n      {() => (\n        <Tree\n          roots={state.roots}\n          ariaLabel=\"Session content\"\n          className=\"h-full\"\n          showControls\n          getKey={(node) => node.key}\n          getChildren={(node) => node.children}\n          getSearchText={(node) =>\n            [node.label, node.model, node.effort, node.mode]\n              .filter(Boolean)\n              .join(\" \")\n          }\n          defaultOpen={(node) =>\n            node.key === sessionKey(collection.currentSessionId)\n          }\n          hasMoreChildren={(node) =>\n            node.kind === \"session\" &&\n            Boolean(\n              node.item &&\n              !state.loadedSessionIds.has(node.item.id) &&\n              collection.loadSession,\n            )\n          }\n          loadChildren={state.loadChildren}\n          renderRow={({ node, loading, error }) => {\n            const message = error\n              ? String(error)\n              : state.errors.get(node.itemId);\n            const actions =\n              node.kind === \"session\" && node.item\n                ? renderSessionActions?.(node.item)\n                : undefined;\n            return (\n              <HierarchyRow\n                node={node}\n                checkState={hierarchyCheckState(node, state.checked)}\n                loading={loading || state.loading.has(node.itemId)}\n                onChecked={(include) => {\n                  void state\n                    .setBranchChecked(node, include)\n                    .catch(() => undefined);\n                }}\n                {...(message ? { error: message } : {})}\n                {...(actions ? { actions } : {})}\n              />\n            );\n          }}\n        />\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction HierarchyRow({\n  node,\n  checkState,\n  loading,\n  error,\n  onChecked,\n  actions,\n}: {\n  node: SessionHierarchyNode;\n  checkState: \"checked\" | \"indeterminate\" | \"unchecked\";\n  loading: boolean;\n  error?: string;\n  onChecked: (include: boolean) => void;\n  actions?: ReactNode;\n}) {\n  const ProviderIcon =\n    node.kind === \"session\" ? providerIcon(node.provider) : undefined;\n  const EffortIcon = node.effort ? effortIcon(node.effort) : undefined;\n  const ModeIcon = node.mode ? modeIcon(node.mode) : undefined;\n  const NodeIcon = node.kind === \"turn\" ? UiRepeat : UiRobotAi;\n  const age = useRelativeAge(node.updatedAt);\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-density-2 py-1\">\n      <HierarchyCheckbox\n        label={`Include ${node.label}`}\n        state={checkState}\n        onChange={onChecked}\n      />\n      <Icon\n        icon={ProviderIcon ?? NodeIcon}\n        className={cn(\n          \"size-4 shrink-0 text-muted-foreground\",\n          ProviderIcon && providerIconColor(node.provider),\n        )}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex min-w-0 items-center gap-density-2\">\n          <span className=\"truncate text-xs font-medium text-foreground\">\n            {node.label}\n          </span>\n          {node.status ? (\n            <span className=\"inline-flex items-center gap-1 text-[10px] text-muted-foreground\">\n              <StatusDot status={statusDotStatus(node.status)} size=\"xs\" />\n              {node.status}\n            </span>\n          ) : null}\n        </div>\n        <div className=\"flex min-w-0 flex-wrap gap-x-density-2 text-[10px] text-muted-foreground\">\n          {node.model ? <span>{node.model}</span> : null}\n          {node.effort ? (\n            <span className=\"inline-flex items-center gap-0.5\">\n              {EffortIcon ? (\n                <Icon\n                  icon={EffortIcon.icon}\n                  title={`${EffortIcon.label} effort`}\n                  className={cn(\"size-3\", effortToneClass(EffortIcon.tone))}\n                />\n              ) : null}\n              {node.effort} effort\n            </span>\n          ) : null}\n          {ModeIcon?.icon ? (\n            <Icon\n              icon={ModeIcon.icon}\n              title={`${ModeIcon.label} mode`}\n              className=\"size-3 text-muted-foreground\"\n            />\n          ) : null}\n          {node.pid ? <span>pid {node.pid}</span> : null}\n          {node.durationMs !== undefined ? (\n            <span>{formatDuration(node.durationMs)}</span>\n          ) : null}\n          {age ? <span title={node.updatedAt}>{age}</span> : null}\n          <span>{node.cost ? formatCost(node.cost) : \"-\"}</span>\n          {loading ? <span>Loading…</span> : null}\n          {error ? (\n            <span role=\"alert\" className=\"text-destructive\">\n              {error}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {actions ? (\n        <span className=\"shrink-0\" onClick={(event) => event.stopPropagation()}>\n          {actions}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nconst EFFORT_TONE_CLASS = {\n  sky: \"text-sky-600\",\n  amber: \"text-amber-600\",\n  violet: \"text-violet-600\",\n  emerald: \"text-emerald-600\",\n  teal: \"text-teal-600\",\n  orange: \"text-orange-600\",\n  rose: \"text-rose-600\",\n  indigo: \"text-indigo-600\",\n  fuchsia: \"text-fuchsia-600\",\n  pink: \"text-pink-600\",\n  slate: \"text-slate-500\",\n} as const;\n\nfunction effortToneClass(tone: keyof typeof EFFORT_TONE_CLASS) {\n  return EFFORT_TONE_CLASS[tone];\n}\n\nfunction modeIcon(mode: string) {\n  const key = mode.trim().toLowerCase();\n  if (key in WORKFLOW_PHASES) {\n    return WORKFLOW_PHASES[key as keyof typeof WORKFLOW_PHASES];\n  }\n  for (const family of SPEC_RUNTIME_FAMILIES) {\n    const match = family.modes.find(\n      (candidate) => candidate.id === key || candidate.backend === key,\n    );\n    if (match) return { icon: match.icon, label: match.label };\n  }\n  return undefined;\n}\n\nfunction statusDotStatus(status: string) {\n  switch (status.trim().toLowerCase()) {\n    case \"completed\":\n    case \"succeeded\":\n      return \"success\" as const;\n    case \"failed\":\n    case \"cancelled\":\n    case \"zombie\":\n      return \"error\" as const;\n    case \"planning\":\n    case \"ask\":\n    case \"stopping\":\n      return \"warning\" as const;\n    default:\n      return \"info\" as const;\n  }\n}\n\nfunction useRelativeAge(updatedAt: string | undefined) {\n  const [, setTick] = useState(0);\n  useEffect(() => {\n    if (!updatedAt) return undefined;\n    const timer = window.setInterval(\n      () => setTick((value) => value + 1),\n      30_000,\n    );\n    return () => window.clearInterval(timer);\n  }, [updatedAt]);\n  if (!updatedAt) return \"\";\n  const date = new Date(updatedAt);\n  return Number.isNaN(date.getTime()) ? \"\" : formatRelativeTime(date);\n}\n\nfunction HierarchyCheckbox({\n  label,\n  state,\n  onChange,\n}: {\n  label: string;\n  state: \"checked\" | \"indeterminate\" | \"unchecked\";\n  onChange: (checked: boolean) => void;\n}) {\n  const ref = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (ref.current) ref.current.indeterminate = state === \"indeterminate\";\n  }, [state]);\n  return (\n    <input\n      ref={ref}\n      type=\"checkbox\"\n      aria-label={label}\n      checked={state === \"checked\"}\n      onClick={(event) => event.stopPropagation()}\n      onChange={(event) => onChange(event.target.checked)}\n      className=\"size-3.5 shrink-0 accent-primary\"\n    />\n  );\n}\n"],"names":["selectedSessionCount","jsx","DropdownMenu","jsxs","Icon","UiRobotAi","UiChevronDown","Tree","sessionKey","hierarchyCheckState","providerIcon","effortIcon","UiRepeat","cn","providerIconColor","StatusDot","formatDuration","formatCost","WORKFLOW_PHASES","SPEC_RUNTIME_FAMILIES","useState","useEffect","formatRelativeTime","useRef"],"mappings":"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"}

package/dist/data/ai/SessionInspector.hierarchy.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SessionCollectionInput, SessionCollectionItem } from './SessionInspector.collection';
+import { SessionHierarchyState } from './SessionInspector.hierarchy-state';
+export declare function SessionHierarchyPicker({ collection, state, renderSessionActions, }: {
+    collection: SessionCollectionInput;
+    state: SessionHierarchyState;
+    renderSessionActions?: (item: SessionCollectionItem) => ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SessionInspector.hierarchy.d.ts.map

package/dist/data/ai/SessionInspector.hierarchy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionInspector.hierarchy.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionInspector.hierarchy.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAapE,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAE3B,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAEhF,wBAAgB,sBAAsB,CAAC,EACrC,UAAU,EACV,KAAK,EACL,oBAAoB,GACrB,EAAE;IACD,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,SAAS,CAAC;CACnE,2CAgFA"}

package/dist/data/ai/SessionInspector.hierarchy.js

@@ -0,0 +1,256 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { cn } from "../../lib/utils.js";
+import { formatDuration } from "../../lib/format.js";
+import { DropdownMenu } from "../../overlay/DropdownMenu.js";
+import { StatusDot } from "../cells/StatusDot.js";
+import { formatRelativeTime } from "../cells/timestamp-format.js";
+import { Tree } from "../Tree.js";
+import { Icon } from "../Icon.js";
+import { providerIcon, providerIconColor } from "../chat/provider-icons.js";
+import { effortIcon, WORKFLOW_PHASES } from "./agent-action-icons.js";
+import { SPEC_RUNTIME_FAMILIES } from "./runtime-mode.js";
+import { selectedSessionCount, hierarchyCheckState, sessionKey } from "./SessionInspector.collection.js";
+import { UiRobotAi } from "../../icons/components/UiRobotAi.js";
+import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
+import { UiRepeat } from "../../icons/components/UiRepeat.js";
+import { formatCost } from "../../lib/tokens.js";
+function SessionHierarchyPicker({
+  collection,
+  state,
+  renderSessionActions
+}) {
+  const selected = selectedSessionCount(state.roots, state.checked);
+  const total = collection.sessions.length;
+  const label = `${selected} of ${total} session${total === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      className: "shrink-0",
+      align: "left",
+      menuLabel: "Session content",
+      menuClassName: "h-[min(58vh,34rem)] w-[min(42rem,calc(100vw-2rem))] overflow-hidden p-2",
+      trigger: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Select session content: ${label}`,
+          className: "flex h-control-h max-w-56 items-center gap-density-2 rounded-md border border-border bg-background px-density-2 text-left text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-muted/40",
+          children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: UiRobotAi,
+                className: "size-4 shrink-0 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: UiChevronDown,
+                className: "size-3.5 shrink-0 text-muted-foreground"
+              }
+            )
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsx(
+        Tree,
+        {
+          roots: state.roots,
+          ariaLabel: "Session content",
+          className: "h-full",
+          showControls: true,
+          getKey: (node) => node.key,
+          getChildren: (node) => node.children,
+          getSearchText: (node) => [node.label, node.model, node.effort, node.mode].filter(Boolean).join(" "),
+          defaultOpen: (node) => node.key === sessionKey(collection.currentSessionId),
+          hasMoreChildren: (node) => node.kind === "session" && Boolean(
+            node.item && !state.loadedSessionIds.has(node.item.id) && collection.loadSession
+          ),
+          loadChildren: state.loadChildren,
+          renderRow: ({ node, loading, error }) => {
+            const message = error ? String(error) : state.errors.get(node.itemId);
+            const actions = node.kind === "session" && node.item ? renderSessionActions == null ? void 0 : renderSessionActions(node.item) : void 0;
+            return /* @__PURE__ */ jsx(
+              HierarchyRow,
+              {
+                node,
+                checkState: hierarchyCheckState(node, state.checked),
+                loading: loading || state.loading.has(node.itemId),
+                onChecked: (include) => {
+                  void state.setBranchChecked(node, include).catch(() => void 0);
+                },
+                ...message ? { error: message } : {},
+                ...actions ? { actions } : {}
+              }
+            );
+          }
+        }
+      )
+    }
+  );
+}
+function HierarchyRow({
+  node,
+  checkState,
+  loading,
+  error,
+  onChecked,
+  actions
+}) {
+  const ProviderIcon = node.kind === "session" ? providerIcon(node.provider) : void 0;
+  const EffortIcon = node.effort ? effortIcon(node.effort) : void 0;
+  const ModeIcon = node.mode ? modeIcon(node.mode) : void 0;
+  const NodeIcon = node.kind === "turn" ? UiRepeat : UiRobotAi;
+  const age = useRelativeAge(node.updatedAt);
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-density-2 py-1", children: [
+    /* @__PURE__ */ jsx(
+      HierarchyCheckbox,
+      {
+        label: `Include ${node.label}`,
+        state: checkState,
+        onChange: onChecked
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: ProviderIcon ?? NodeIcon,
+        className: cn(
+          "size-4 shrink-0 text-muted-foreground",
+          ProviderIcon && providerIconColor(node.provider)
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-density-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium text-foreground", children: node.label }),
+        node.status ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(StatusDot, { status: statusDotStatus(node.status), size: "xs" }),
+          node.status
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap gap-x-density-2 text-[10px] text-muted-foreground", children: [
+        node.model ? /* @__PURE__ */ jsx("span", { children: node.model }) : null,
+        node.effort ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+          EffortIcon ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: EffortIcon.icon,
+              title: `${EffortIcon.label} effort`,
+              className: cn("size-3", effortToneClass(EffortIcon.tone))
+            }
+          ) : null,
+          node.effort,
+          " effort"
+        ] }) : null,
+        (ModeIcon == null ? void 0 : ModeIcon.icon) ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: ModeIcon.icon,
+            title: `${ModeIcon.label} mode`,
+            className: "size-3 text-muted-foreground"
+          }
+        ) : null,
+        node.pid ? /* @__PURE__ */ jsxs("span", { children: [
+          "pid ",
+          node.pid
+        ] }) : null,
+        node.durationMs !== void 0 ? /* @__PURE__ */ jsx("span", { children: formatDuration(node.durationMs) }) : null,
+        age ? /* @__PURE__ */ jsx("span", { title: node.updatedAt, children: age }) : null,
+        /* @__PURE__ */ jsx("span", { children: node.cost ? formatCost(node.cost) : "-" }),
+        loading ? /* @__PURE__ */ jsx("span", { children: "Loading…" }) : null,
+        error ? /* @__PURE__ */ jsx("span", { role: "alert", className: "text-destructive", children: error }) : null
+      ] })
+    ] }),
+    actions ? /* @__PURE__ */ jsx("span", { className: "shrink-0", onClick: (event) => event.stopPropagation(), children: actions }) : null
+  ] });
+}
+const EFFORT_TONE_CLASS = {
+  sky: "text-sky-600",
+  amber: "text-amber-600",
+  violet: "text-violet-600",
+  emerald: "text-emerald-600",
+  teal: "text-teal-600",
+  orange: "text-orange-600",
+  rose: "text-rose-600",
+  indigo: "text-indigo-600",
+  fuchsia: "text-fuchsia-600",
+  pink: "text-pink-600",
+  slate: "text-slate-500"
+};
+function effortToneClass(tone) {
+  return EFFORT_TONE_CLASS[tone];
+}
+function modeIcon(mode) {
+  const key = mode.trim().toLowerCase();
+  if (key in WORKFLOW_PHASES) {
+    return WORKFLOW_PHASES[key];
+  }
+  for (const family of SPEC_RUNTIME_FAMILIES) {
+    const match = family.modes.find(
+      (candidate) => candidate.id === key || candidate.backend === key
+    );
+    if (match) return { icon: match.icon, label: match.label };
+  }
+  return void 0;
+}
+function statusDotStatus(status) {
+  switch (status.trim().toLowerCase()) {
+    case "completed":
+    case "succeeded":
+      return "success";
+    case "failed":
+    case "cancelled":
+    case "zombie":
+      return "error";
+    case "planning":
+    case "ask":
+    case "stopping":
+      return "warning";
+    default:
+      return "info";
+  }
+}
+function useRelativeAge(updatedAt) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (!updatedAt) return void 0;
+    const timer = window.setInterval(
+      () => setTick((value) => value + 1),
+      3e4
+    );
+    return () => window.clearInterval(timer);
+  }, [updatedAt]);
+  if (!updatedAt) return "";
+  const date = new Date(updatedAt);
+  return Number.isNaN(date.getTime()) ? "" : formatRelativeTime(date);
+}
+function HierarchyCheckbox({
+  label,
+  state,
+  onChange
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = state === "indeterminate";
+  }, [state]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      "aria-label": label,
+      checked: state === "checked",
+      onClick: (event) => event.stopPropagation(),
+      onChange: (event) => onChange(event.target.checked),
+      className: "size-3.5 shrink-0 accent-primary"
+    }
+  );
+}
+export {
+  SessionHierarchyPicker
+};
+//# sourceMappingURL=SessionInspector.hierarchy.js.map

package/dist/data/ai/SessionInspector.hierarchy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionInspector.hierarchy.js","sources":["../../../src/data/ai/SessionInspector.hierarchy.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { UiChevronDown, UiRepeat, UiRobotAi } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { formatDuration } from \"../../lib/format\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { StatusDot } from \"../cells/StatusDot\";\nimport { formatRelativeTime } from \"../cells/timestamp-format\";\nimport { Tree } from \"../Tree\";\nimport { Icon } from \"../Icon\";\nimport { providerIcon, providerIconColor } from \"../chat/provider-icons\";\nimport { effortIcon, WORKFLOW_PHASES } from \"./agent-action-icons\";\nimport { SPEC_RUNTIME_FAMILIES } from \"./runtime-mode\";\nimport { formatCost } from \"./session-cost\";\nimport {\n  hierarchyCheckState,\n  selectedSessionCount,\n  sessionKey,\n  type SessionCollectionInput,\n  type SessionCollectionItem,\n  type SessionHierarchyNode,\n} from \"./SessionInspector.collection\";\nimport type { SessionHierarchyState } from \"./SessionInspector.hierarchy-state\";\n\nexport function SessionHierarchyPicker({\n  collection,\n  state,\n  renderSessionActions,\n}: {\n  collection: SessionCollectionInput;\n  state: SessionHierarchyState;\n  renderSessionActions?: (item: SessionCollectionItem) => ReactNode;\n}) {\n  const selected = selectedSessionCount(state.roots, state.checked);\n  const total = collection.sessions.length;\n  const label = `${selected} of ${total} session${total === 1 ? \"\" : \"s\"}`;\n  return (\n    <DropdownMenu\n      className=\"shrink-0\"\n      align=\"left\"\n      menuLabel=\"Session content\"\n      menuClassName=\"h-[min(58vh,34rem)] w-[min(42rem,calc(100vw-2rem))] overflow-hidden p-2\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`Select session content: ${label}`}\n          className=\"flex h-control-h max-w-56 items-center gap-density-2 rounded-md border border-border bg-background px-density-2 text-left text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-muted/40\"\n        >\n          <Icon\n            icon={UiRobotAi}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n          <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n          <Icon\n            icon={UiChevronDown}\n            className=\"size-3.5 shrink-0 text-muted-foreground\"\n          />\n        </button>\n      }\n    >\n      {() => (\n        <Tree\n          roots={state.roots}\n          ariaLabel=\"Session content\"\n          className=\"h-full\"\n          showControls\n          getKey={(node) => node.key}\n          getChildren={(node) => node.children}\n          getSearchText={(node) =>\n            [node.label, node.model, node.effort, node.mode]\n              .filter(Boolean)\n              .join(\" \")\n          }\n          defaultOpen={(node) =>\n            node.key === sessionKey(collection.currentSessionId)\n          }\n          hasMoreChildren={(node) =>\n            node.kind === \"session\" &&\n            Boolean(\n              node.item &&\n              !state.loadedSessionIds.has(node.item.id) &&\n              collection.loadSession,\n            )\n          }\n          loadChildren={state.loadChildren}\n          renderRow={({ node, loading, error }) => {\n            const message = error\n              ? String(error)\n              : state.errors.get(node.itemId);\n            const actions =\n              node.kind === \"session\" && node.item\n                ? renderSessionActions?.(node.item)\n                : undefined;\n            return (\n              <HierarchyRow\n                node={node}\n                checkState={hierarchyCheckState(node, state.checked)}\n                loading={loading || state.loading.has(node.itemId)}\n                onChecked={(include) => {\n                  void state\n                    .setBranchChecked(node, include)\n                    .catch(() => undefined);\n                }}\n                {...(message ? { error: message } : {})}\n                {...(actions ? { actions } : {})}\n              />\n            );\n          }}\n        />\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction HierarchyRow({\n  node,\n  checkState,\n  loading,\n  error,\n  onChecked,\n  actions,\n}: {\n  node: SessionHierarchyNode;\n  checkState: \"checked\" | \"indeterminate\" | \"unchecked\";\n  loading: boolean;\n  error?: string;\n  onChecked: (include: boolean) => void;\n  actions?: ReactNode;\n}) {\n  const ProviderIcon =\n    node.kind === \"session\" ? providerIcon(node.provider) : undefined;\n  const EffortIcon = node.effort ? effortIcon(node.effort) : undefined;\n  const ModeIcon = node.mode ? modeIcon(node.mode) : undefined;\n  const NodeIcon = node.kind === \"turn\" ? UiRepeat : UiRobotAi;\n  const age = useRelativeAge(node.updatedAt);\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-density-2 py-1\">\n      <HierarchyCheckbox\n        label={`Include ${node.label}`}\n        state={checkState}\n        onChange={onChecked}\n      />\n      <Icon\n        icon={ProviderIcon ?? NodeIcon}\n        className={cn(\n          \"size-4 shrink-0 text-muted-foreground\",\n          ProviderIcon && providerIconColor(node.provider),\n        )}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex min-w-0 items-center gap-density-2\">\n          <span className=\"truncate text-xs font-medium text-foreground\">\n            {node.label}\n          </span>\n          {node.status ? (\n            <span className=\"inline-flex items-center gap-1 text-[10px] text-muted-foreground\">\n              <StatusDot status={statusDotStatus(node.status)} size=\"xs\" />\n              {node.status}\n            </span>\n          ) : null}\n        </div>\n        <div className=\"flex min-w-0 flex-wrap gap-x-density-2 text-[10px] text-muted-foreground\">\n          {node.model ? <span>{node.model}</span> : null}\n          {node.effort ? (\n            <span className=\"inline-flex items-center gap-0.5\">\n              {EffortIcon ? (\n                <Icon\n                  icon={EffortIcon.icon}\n                  title={`${EffortIcon.label} effort`}\n                  className={cn(\"size-3\", effortToneClass(EffortIcon.tone))}\n                />\n              ) : null}\n              {node.effort} effort\n            </span>\n          ) : null}\n          {ModeIcon?.icon ? (\n            <Icon\n              icon={ModeIcon.icon}\n              title={`${ModeIcon.label} mode`}\n              className=\"size-3 text-muted-foreground\"\n            />\n          ) : null}\n          {node.pid ? <span>pid {node.pid}</span> : null}\n          {node.durationMs !== undefined ? (\n            <span>{formatDuration(node.durationMs)}</span>\n          ) : null}\n          {age ? <span title={node.updatedAt}>{age}</span> : null}\n          <span>{node.cost ? formatCost(node.cost) : \"-\"}</span>\n          {loading ? <span>Loading…</span> : null}\n          {error ? (\n            <span role=\"alert\" className=\"text-destructive\">\n              {error}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {actions ? (\n        <span className=\"shrink-0\" onClick={(event) => event.stopPropagation()}>\n          {actions}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nconst EFFORT_TONE_CLASS = {\n  sky: \"text-sky-600\",\n  amber: \"text-amber-600\",\n  violet: \"text-violet-600\",\n  emerald: \"text-emerald-600\",\n  teal: \"text-teal-600\",\n  orange: \"text-orange-600\",\n  rose: \"text-rose-600\",\n  indigo: \"text-indigo-600\",\n  fuchsia: \"text-fuchsia-600\",\n  pink: \"text-pink-600\",\n  slate: \"text-slate-500\",\n} as const;\n\nfunction effortToneClass(tone: keyof typeof EFFORT_TONE_CLASS) {\n  return EFFORT_TONE_CLASS[tone];\n}\n\nfunction modeIcon(mode: string) {\n  const key = mode.trim().toLowerCase();\n  if (key in WORKFLOW_PHASES) {\n    return WORKFLOW_PHASES[key as keyof typeof WORKFLOW_PHASES];\n  }\n  for (const family of SPEC_RUNTIME_FAMILIES) {\n    const match = family.modes.find(\n      (candidate) => candidate.id === key || candidate.backend === key,\n    );\n    if (match) return { icon: match.icon, label: match.label };\n  }\n  return undefined;\n}\n\nfunction statusDotStatus(status: string) {\n  switch (status.trim().toLowerCase()) {\n    case \"completed\":\n    case \"succeeded\":\n      return \"success\" as const;\n    case \"failed\":\n    case \"cancelled\":\n    case \"zombie\":\n      return \"error\" as const;\n    case \"planning\":\n    case \"ask\":\n    case \"stopping\":\n      return \"warning\" as const;\n    default:\n      return \"info\" as const;\n  }\n}\n\nfunction useRelativeAge(updatedAt: string | undefined) {\n  const [, setTick] = useState(0);\n  useEffect(() => {\n    if (!updatedAt) return undefined;\n    const timer = window.setInterval(\n      () => setTick((value) => value + 1),\n      30_000,\n    );\n    return () => window.clearInterval(timer);\n  }, [updatedAt]);\n  if (!updatedAt) return \"\";\n  const date = new Date(updatedAt);\n  return Number.isNaN(date.getTime()) ? \"\" : formatRelativeTime(date);\n}\n\nfunction HierarchyCheckbox({\n  label,\n  state,\n  onChange,\n}: {\n  label: string;\n  state: \"checked\" | \"indeterminate\" | \"unchecked\";\n  onChange: (checked: boolean) => void;\n}) {\n  const ref = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (ref.current) ref.current.indeterminate = state === \"indeterminate\";\n  }, [state]);\n  return (\n    <input\n      ref={ref}\n      type=\"checkbox\"\n      aria-label={label}\n      checked={state === \"checked\"}\n      onClick={(event) => event.stopPropagation()}\n      onChange={(event) => onChange(event.target.checked)}\n      className=\"size-3.5 shrink-0 accent-primary\"\n    />\n  );\n}\n"],"names":[],"mappings":"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"}