@volter-ai-dev/supercode-ui 0.1.55 → 0.1.56

package/subagents.mjs

@@ -1,3 +1,6 @@
+// src/subagents.jsx
+import { useEffect as useEffect5, useRef as useRef4, useState as useState3 } from "preact/hooks";
+
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
   "claude-code": "Claude Code",
@@ -1402,10 +1405,51 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
 
 // src/subagents.jsx
 import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
-function SubagentInspector({ state, adapter, onClose }) {
-  const inspector = state.subagentInspector;
-  if (!inspector) return null;
+var ATTENTION_ACTIVITY = /* @__PURE__ */ new Set(["needs-input", "failed", "unseen"]);
+var ACTIVE_ACTIVITY = /* @__PURE__ */ new Set(["working", "running", "recent"]);
+function activityLabel(activity, age) {
+  if (activity === "needs-input") return "Needs input";
+  if (activity === "failed") return "Failed";
+  if (activity === "unseen") return "New update";
+  if (activity === "working") return "Working";
+  if (activity === "running") return "Running";
+  if (activity === "recent") return "Recent";
+  if (activity === "finished") return "Finished";
+  return age;
+}
+function SubagentRow({ row, inspector, adapter }) {
+  return /* @__PURE__ */ jsxs5("button", { className: "scui-subagent-row", type: "button", "data-activity": row.activity ?? "idle", onClick: () => adapter.onIntent({ action: "openSubagent", parentKey: inspector.parentKey, key: row.key }), children: [
+    /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity: row.activity, size: 30 }),
+    /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsx6("strong", { children: sessionDisplayName(row) }),
+      /* @__PURE__ */ jsx6("small", { children: row.preview || (row.activity === "working" ? "Working\u2026" : row.cwd) })
+    ] }),
+    /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsx6("small", { children: activityLabel(row.activity, row.age) }),
+      /* @__PURE__ */ jsx6(UiIcon, { name: "chevron", size: 14 })
+    ] })
+  ] });
+}
+function SubagentSection({ label, rows, inspector, adapter }) {
+  if (!rows.length) return null;
+  return /* @__PURE__ */ jsxs5("section", { className: "scui-subagent-section", "aria-labelledby": `scui-subagents-${label.toLowerCase().replaceAll(" ", "-")}`, children: [
+    /* @__PURE__ */ jsx6("h2", { id: `scui-subagents-${label.toLowerCase().replaceAll(" ", "-")}`, children: label }),
+    rows.map((row) => /* @__PURE__ */ jsx6(SubagentRow, { row, inspector, adapter }, row.key))
+  ] });
+}
+function SubagentInspectorContent({ state, adapter, onClose, inspector }) {
   const selected = inspector.items.find((row) => row.key === inspector.selectedKey) ?? null;
+  const attention = inspector.items.filter((row) => ATTENTION_ACTIVITY.has(row.activity));
+  const active = inspector.items.filter((row) => ACTIVE_ACTIVITY.has(row.activity));
+  const finished = inspector.items.filter((row) => !ATTENTION_ACTIVITY.has(row.activity) && !ACTIVE_ACTIVITY.has(row.activity));
+  const [finishedOpen, setFinishedOpen] = useState3(false);
+  const backButton = useRef4(null);
+  useEffect5(() => {
+    if (inspector.status === "ready" && !attention.length && !active.length) setFinishedOpen(true);
+  }, [inspector.parentKey, inspector.status]);
+  useEffect5(() => {
+    backButton.current?.focus({ preventScroll: true });
+  }, [selected?.key]);
   const detailState = selected ? {
     ...state,
     transcript: inspector.transcript,
@@ -1426,15 +1470,14 @@ function SubagentInspector({ state, adapter, onClose }) {
     onClose();
   };
   const back = () => selected ? adapter.onIntent({ action: "openSubagents", key: inspector.parentKey }) : leave();
-  return /* @__PURE__ */ jsxs5("section", { className: "scui-subagents", "aria-label": `Subagents for ${inspector.parentTitle}`, children: [
+  return /* @__PURE__ */ jsxs5("section", { className: "scui-subagents", "aria-label": `Agents for ${inspector.parentTitle}`, children: [
     /* @__PURE__ */ jsxs5("header", { className: "scui-head", children: [
-      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": selected ? "Back to subagents" : "Back to chats", onClick: back, children: /* @__PURE__ */ jsx6(UiIcon, { name: "back", size: 17 }) }),
-      /* @__PURE__ */ jsx6(UiIcon, { name: "agents", size: 20 }),
+      /* @__PURE__ */ jsx6("button", { ref: backButton, type: "button", "aria-label": selected ? "Back to agents" : "Back to chats", onClick: back, children: /* @__PURE__ */ jsx6(UiIcon, { name: "back", size: 17 }) }),
+      selected ? /* @__PURE__ */ jsx6(HarnessLogo, { id: selected.harness, activity: selected.activity, size: 24 }) : /* @__PURE__ */ jsx6(UiIcon, { name: "agents", size: 20 }),
       /* @__PURE__ */ jsxs5("span", { className: "scui-head-copy", children: [
         /* @__PURE__ */ jsx6("strong", { children: selected ? sessionDisplayName(selected) : `${inspector.items.length || ""} ${inspector.items.length === 1 ? "agent" : "agents"}`.trim() }),
         /* @__PURE__ */ jsx6("small", { children: selected ? `${harnessDisplayName(selected.harness)} \xB7 Read-only` : inspector.parentTitle })
-      ] }),
-      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close subagent inspector", onClick: leave, children: /* @__PURE__ */ jsx6(UiIcon, { name: "close", size: 18 }) })
+      ] })
     ] }),
     inspector.status === "loading" ? /* @__PURE__ */ jsxs5("div", { className: "scui-subagents-loading", role: "status", children: [
       /* @__PURE__ */ jsx6("i", {}),
@@ -1444,21 +1487,26 @@ function SubagentInspector({ state, adapter, onClose }) {
       ] })
     ] }) : null,
     inspector.error ? /* @__PURE__ */ jsx6("div", { className: "scui-error", role: "alert", children: inspector.error }) : null,
-    !selected && inspector.status === "ready" ? /* @__PURE__ */ jsx6("div", { className: "scui-subagent-rows", children: inspector.items.map((row) => /* @__PURE__ */ jsxs5("button", { type: "button", "data-activity": row.activity ?? "idle", onClick: () => adapter.onIntent({ action: "openSubagent", parentKey: inspector.parentKey, key: row.key }), children: [
-      /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity: row.activity, size: 30 }),
-      /* @__PURE__ */ jsxs5("span", { children: [
-        /* @__PURE__ */ jsx6("strong", { children: sessionDisplayName(row) }),
-        /* @__PURE__ */ jsx6("small", { children: row.preview || (row.activity === "working" ? "Working\u2026" : row.cwd) })
-      ] }),
-      /* @__PURE__ */ jsxs5("span", { children: [
-        /* @__PURE__ */ jsx6("small", { children: row.activity === "needs-input" ? "Needs input" : row.activity === "working" ? "Working" : row.age }),
-        /* @__PURE__ */ jsx6(UiIcon, { name: "chevron", size: 14 })
-      ] })
-    ] }, row.key)) }) : null,
+    !selected && inspector.status === "ready" && inspector.items.length ? /* @__PURE__ */ jsxs5("div", { className: "scui-subagent-rows", children: [
+      /* @__PURE__ */ jsx6(SubagentSection, { label: "Needs attention", rows: attention, inspector, adapter }),
+      /* @__PURE__ */ jsx6(SubagentSection, { label: "Active", rows: active, inspector, adapter }),
+      finished.length ? /* @__PURE__ */ jsxs5("details", { className: "scui-subagent-history", open: finishedOpen, onToggle: (event) => setFinishedOpen(event.currentTarget.open), children: [
+        /* @__PURE__ */ jsxs5("summary", { children: [
+          /* @__PURE__ */ jsx6("span", { children: "Finished" }),
+          /* @__PURE__ */ jsx6("small", { children: finished.length }),
+          /* @__PURE__ */ jsx6(UiIcon, { name: "chevron", size: 14 })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { children: finished.map((row) => /* @__PURE__ */ jsx6(SubagentRow, { row, inspector, adapter }, row.key)) })
+      ] }) : null
+    ] }) : null,
     !selected && inspector.status === "ready" && !inspector.items.length ? /* @__PURE__ */ jsx6("div", { className: "scui-empty", children: "No native child sessions were found." }) : null,
     selected && inspector.status === "ready" && detailState ? /* @__PURE__ */ jsx6(Conversation, { state: detailState, adapter, memoryKey: `subagent:${selected.key}` }) : null
   ] });
 }
+function SubagentInspector({ state, adapter, onClose }) {
+  if (!state.subagentInspector) return null;
+  return /* @__PURE__ */ jsx6(SubagentInspectorContent, { state, adapter, onClose, inspector: state.subagentInspector });
+}
 export {
   SubagentInspector
 };