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

package/styles.css

@@ -213,9 +213,9 @@
 .scui-readiness { margin:0 0 7px; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg) }.scui-readiness > summary { padding:6px 8px; color:var(--scui-muted); cursor:pointer; font-size:10px }.scui-readiness > div { display:grid; border-top:1px solid var(--scui-border) }.scui-readiness section { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px 8px }.scui-readiness section + section { border-top:1px solid var(--scui-border) }.scui-readiness section > span { display:grid; min-width:0 }.scui-readiness section strong,.scui-readiness section small,.scui-readiness section em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-readiness section small { color:var(--scui-muted); font-size:9px }.scui-readiness section em { color:var(--scui-muted); font-size:8px; font-style:normal }.scui-readiness section button { padding:4px 6px; border:1px solid var(--scui-border); border-radius:6px; background:transparent; cursor:pointer; font-size:9px }
 .scui-new { display:grid; justify-items:center; gap:5px; margin:auto; padding:20px; color:var(--scui-muted); text-align:center }.scui-new > span { color:var(--scui-accent); font-size:28px }.scui-new strong { color:var(--scui-fg) }
 .scui-opening { position:absolute; z-index:30; inset:var(--scui-head-height) 0 0; display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; background:var(--scui-bg) }.scui-opening > span { display:grid }.scui-opening small { color:var(--scui-muted) }.scui-opening > i { width:16px; height:16px; border:2px solid var(--scui-border); border-top-color:var(--scui-accent); border-radius:50%; animation:scui-spin .8s linear infinite }
-.scui-subagents { position:absolute; z-index:32; inset:0; display:flex; min-height:0; flex-direction:column; background:var(--scui-bg); color:var(--scui-fg) }.scui-subagents > .scui-head > .scui-icon { flex:none; color:var(--scui-muted) }
+.scui-subagents { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; background:var(--scui-bg); color:var(--scui-fg) }.scui-subagents > .scui-head > .scui-icon { flex:none; color:var(--scui-muted) }
 .scui-subagents-loading { display:flex; flex:1; align-items:center; justify-content:center; gap:10px; padding:20px; color:var(--scui-muted) }.scui-subagents-loading > i { width:16px; height:16px; border:2px solid var(--scui-border); border-top-color:var(--scui-accent); border-radius:50%; animation:scui-spin .8s linear infinite }.scui-subagents-loading > span { display:grid }.scui-subagents-loading strong { color:var(--scui-fg); font-size:11px }.scui-subagents-loading small { font-size:9.5px }
-.scui-subagent-rows { flex:1; min-height:0; overflow:auto; padding:6px }.scui-subagent-rows > button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; width:100%; align-items:center; gap:8px; padding:8px; border:0; border-radius:7px; background:transparent; color:var(--scui-fg); text-align:left; cursor:pointer }.scui-subagent-rows > button:hover { background:var(--scui-fill) }.scui-subagent-rows > button > span { display:grid; min-width:0 }.scui-subagent-rows > button > span:nth-child(3) { grid-auto-flow:column; align-items:center; gap:4px; color:var(--scui-muted) }.scui-subagent-rows strong,.scui-subagent-rows small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-subagent-rows strong { font-size:11.5px }.scui-subagent-rows small { color:var(--scui-muted); font-size:9.5px }.scui-subagent-rows > button[data-activity="needs-input"] > span:nth-child(3) small { color:var(--scui-warning) }.scui-subagents > .scui-conversation-wrap { flex:1; min-height:0 }
+.scui-subagent-rows { flex:1; min-height:0; overflow:auto; padding:6px }.scui-subagent-section { display:grid; gap:1px }.scui-subagent-section + .scui-subagent-section,.scui-subagent-history { margin-top:6px }.scui-subagent-section > h2 { margin:0; padding:5px 8px 3px; color:var(--scui-muted); font-size:8.5px; font-weight:650; letter-spacing:.055em; text-transform:uppercase }.scui-subagent-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; width:100%; align-items:center; gap:8px; padding:8px; border:0; border-radius:7px; background:transparent; color:var(--scui-fg); text-align:left; cursor:pointer }.scui-subagent-row:hover { background:var(--scui-fill) }.scui-subagent-row > span { display:grid; min-width:0 }.scui-subagent-row > span:nth-child(3) { grid-auto-flow:column; align-items:center; gap:4px; color:var(--scui-muted) }.scui-subagent-row strong,.scui-subagent-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-subagent-row strong { font-size:11.5px }.scui-subagent-row small { color:var(--scui-muted); font-size:9.5px }.scui-subagent-row[data-activity="needs-input"] > span:nth-child(3) small { color:var(--scui-warning) }.scui-subagent-row[data-activity="failed"] > span:nth-child(3) small { color:var(--scui-danger) }.scui-subagent-history { border-top:1px solid var(--scui-border) }.scui-subagent-history > summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; padding:8px; border-radius:7px; color:var(--scui-muted); cursor:pointer; list-style:none; font-size:9px; font-weight:650; letter-spacing:.045em; text-transform:uppercase }.scui-subagent-history > summary::-webkit-details-marker { display:none }.scui-subagent-history > summary:hover { background:var(--scui-fill); color:var(--scui-fg) }.scui-subagent-history > summary small { min-width:18px; padding:1px 5px; border-radius:999px; background:var(--scui-fill); color:inherit; text-align:center; font-size:8.5px }.scui-subagent-history > summary .scui-icon { transform:rotate(90deg); transition:transform 120ms }.scui-subagent-history[open] > summary .scui-icon { transform:rotate(-90deg) }.scui-subagent-history > div { display:grid; gap:1px }.scui-subagents > .scui-conversation-wrap { flex:1; min-height:0 }
 
 @keyframes scui-spin { to { transform:rotate(360deg) } }
 @keyframes scui-breathe { 50% { transform:scale(.72); opacity:.5 } }

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,49 @@ 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 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 active = inspector.items.filter((row) => ACTIVE_ACTIVITY.has(row.activity));
+  const history = inspector.items.filter((row) => !ACTIVE_ACTIVITY.has(row.activity));
+  const [historyOpen, setHistoryOpen] = useState3(false);
+  const backButton = useRef4(null);
+  useEffect5(() => {
+    if (inspector.status === "ready" && !active.length) setHistoryOpen(true);
+  }, [inspector.parentKey, inspector.status]);
+  useEffect5(() => {
+    backButton.current?.focus({ preventScroll: true });
+  }, [selected?.key]);
   const detailState = selected ? {
     ...state,
     transcript: inspector.transcript,
@@ -1426,15 +1468,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 }) })
+        /* @__PURE__ */ jsx6("strong", { children: selected ? sessionDisplayName(selected) : "Agents" }),
+        /* @__PURE__ */ jsx6("small", { children: selected ? `${harnessDisplayName(selected.harness)} \xB7 Read-only` : `${inspector.items.length} ${inspector.items.length === 1 ? "session" : "sessions"} \xB7 ${inspector.parentTitle}` })
+      ] })
     ] }),
     inspector.status === "loading" ? /* @__PURE__ */ jsxs5("div", { className: "scui-subagents-loading", role: "status", children: [
       /* @__PURE__ */ jsx6("i", {}),
@@ -1444,21 +1485,25 @@ 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: "Active", rows: active, inspector, adapter }),
+      history.length ? /* @__PURE__ */ jsxs5("details", { className: "scui-subagent-history", open: historyOpen, onToggle: (event) => setHistoryOpen(event.currentTarget.open), children: [
+        /* @__PURE__ */ jsxs5("summary", { children: [
+          /* @__PURE__ */ jsx6("span", { children: "History" }),
+          /* @__PURE__ */ jsx6("small", { children: history.length }),
+          /* @__PURE__ */ jsx6(UiIcon, { name: "chevron", size: 14 })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { children: history.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
 };