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

package/sessions.d.ts

@@ -6,4 +6,4 @@ export type {
   SupercodeUiState,
   UiAdapter,
 } from './index.js';
-export { LoadingStatus, SessionList, SessionRow } from './index.js';
+export { LoadingStatus, SessionList, SessionRow, SubagentInspector } from './index.js';

package/sessions.mjs

@@ -65,6 +65,7 @@ var EMPTY_UI_STATE = Object.freeze({
   savedDraft: "",
   attention: Object.freeze([]),
   sessions: Object.freeze([]),
+  subagentInspector: null,
   attached: null,
   owned: null,
   attachError: null
@@ -86,6 +87,7 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
+  if (row.activity && ACTIVITY_PRIORITY[row.activity] !== void 0) return row.activity;
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -176,6 +178,12 @@ function boundedSet(map, key, value) {
 // src/icon.jsx
 import { Fragment, jsx as jsx2, jsxs } from "preact/jsx-runtime";
 var ICONS = {
+  agents: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "6", cy: "6.5", r: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2.75 13c.45-2 1.55-3 3.25-3s2.8 1 3.25 3" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12.25", cy: "7", r: "1.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10.5 10.75c1.95-.65 3.45.1 4 2.25" })
+  ] }),
   attach: () => /* @__PURE__ */ jsx2("path", { d: "M6.25 9.75 10.6 5.4a2.1 2.1 0 0 1 2.97 2.97l-5.4 5.4a3.3 3.3 0 0 1-4.67-4.66l5.52-5.52" }),
   back: () => /* @__PURE__ */ jsx2("path", { d: "m11.5 4.5-4.5 4.5 4.5 4.5" }),
   check: () => /* @__PURE__ */ jsx2("path", { d: "m4 9 3.25 3.25L14 5.5" }),
@@ -329,7 +337,7 @@ function sessionPathParts(value) {
     trailing: complete.slice(boundary + 1)
   };
 }
-function SessionRow({ row, state, onOpen, now = Date.now() }) {
+function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
   const activity = sessionActivity(state, row);
   const working = activity === "working";
   const attention = state.attention.find((item) => item.key === row.key);
@@ -339,32 +347,40 @@ function SessionRow({ row, state, onOpen, now = Date.now() }) {
   const unreadCount = attention?.unreadCount ?? 0;
   const unreadLabel = unreadCount > 99 ? "99+" : String(unreadCount);
   const age = relativeAge(row.previewUpdatedAt ?? row.updatedAt, now) || row.age;
-  return /* @__PURE__ */ jsxs5("button", { className: "scui-session", "data-active": row.active, "data-activity": activity, "data-writable": row.writable, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${row.writable ? "" : " \xB7 Read-only"}${working ? " \xB7 Working" : ""}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${age ? ` \xB7 ${age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
-    /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity, size: 34 }),
-    /* @__PURE__ */ jsxs5("span", { className: "scui-session-copy", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "scui-session-title", children: [
-        /* @__PURE__ */ jsx6("strong", { children: title }),
-        /* @__PURE__ */ jsx6("span", { className: "scui-session-meta", children: age ? /* @__PURE__ */ jsx6("time", { children: age }) : null })
-      ] }),
-      path.complete ? /* @__PURE__ */ jsxs5("small", { className: "scui-session-path", title: row.cwd, children: [
-        /* @__PURE__ */ jsx6("span", { className: "scui-session-path-leading", children: path.leading }),
-        path.separator ? /* @__PURE__ */ jsx6("span", { className: "scui-session-path-separator", children: path.separator }) : null,
-        path.trailing ? /* @__PURE__ */ jsx6("span", { className: "scui-session-path-trailing", children: path.trailing }) : null
-      ] }) : null,
-      working || preview || unreadCount ? /* @__PURE__ */ jsxs5("span", { className: "scui-session-preview", children: [
-        working ? /* @__PURE__ */ jsxs5("span", { className: "scui-session-working", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx6("i", {}),
-          /* @__PURE__ */ jsx6("i", {}),
-          /* @__PURE__ */ jsx6("i", {})
+  return /* @__PURE__ */ jsxs5("article", { className: "scui-session", "data-active": row.active, "data-activity": activity, "data-writable": row.writable, children: [
+    /* @__PURE__ */ jsxs5("button", { className: "scui-session-main", "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${row.writable ? "" : " \xB7 Read-only"}${working ? " \xB7 Working" : ""}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${age ? ` \xB7 ${age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
+      /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity, size: 34 }),
+      /* @__PURE__ */ jsxs5("span", { className: "scui-session-copy", children: [
+        /* @__PURE__ */ jsxs5("span", { className: "scui-session-title", children: [
+          /* @__PURE__ */ jsx6("strong", { children: title }),
+          /* @__PURE__ */ jsx6("span", { className: "scui-session-meta", children: age ? /* @__PURE__ */ jsx6("time", { children: age }) : null })
+        ] }),
+        path.complete ? /* @__PURE__ */ jsxs5("small", { className: "scui-session-path", title: row.cwd, children: [
+          /* @__PURE__ */ jsx6("span", { className: "scui-session-path-leading", children: path.leading }),
+          path.separator ? /* @__PURE__ */ jsx6("span", { className: "scui-session-path-separator", children: path.separator }) : null,
+          path.trailing ? /* @__PURE__ */ jsx6("span", { className: "scui-session-path-trailing", children: path.trailing }) : null
         ] }) : null,
-        preview || working ? /* @__PURE__ */ jsx6("small", { children: preview || "Working\u2026" }) : null,
-        unreadCount ? /* @__PURE__ */ jsx6("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
-      ] }) : null,
-      state.attachError?.key === row.key ? /* @__PURE__ */ jsx6("em", { children: state.attachError.message }) : null
-    ] })
+        working || preview || unreadCount ? /* @__PURE__ */ jsxs5("span", { className: "scui-session-preview", children: [
+          working ? /* @__PURE__ */ jsxs5("span", { className: "scui-session-working", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx6("i", {}),
+            /* @__PURE__ */ jsx6("i", {}),
+            /* @__PURE__ */ jsx6("i", {})
+          ] }) : null,
+          preview || working ? /* @__PURE__ */ jsx6("small", { children: preview || "Working\u2026" }) : null,
+          unreadCount ? /* @__PURE__ */ jsx6("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
+        ] }) : null,
+        state.attachError?.key === row.key ? /* @__PURE__ */ jsx6("em", { children: state.attachError.message }) : null
+      ] })
+    ] }),
+    row.subagentCount ? /* @__PURE__ */ jsxs5("button", { className: "scui-session-agents", type: "button", "aria-label": `Inspect ${row.subagentCount} subagents in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+      /* @__PURE__ */ jsx6(UiIcon, { name: "agents", size: 14 }),
+      row.subagentCount,
+      " ",
+      row.subagentCount === 1 ? "agent" : "agents"
+    ] }) : null
   ] });
 }
-function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, slots = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default", headerActions: HeaderActions }) {
+function SessionList({ state, adapter, onOpen, onOpenSubagents, onNew, onClose, components = {}, slots = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default", headerActions: HeaderActions }) {
   const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
   const [query, setQuery] = useState3(remembered.query);
   const [loadingMore, setLoadingMore] = useState3(false);
@@ -430,7 +446,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
     /* @__PURE__ */ jsxs5("div", { className: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
       BeforeSessions ? /* @__PURE__ */ jsx6(BeforeSessions, { state, adapter, value: { query, rows } }) : null,
       !rows.length && state.startup === "ready" ? /* @__PURE__ */ jsx6("div", { className: "scui-empty", children: query ? "No chats match your search." : state.error ?? "No coding chats found." }) : null,
-      rows.map((row) => /* @__PURE__ */ jsx6(Row, { value: row, row, state, adapter, onOpen, now }, row.key)),
+      rows.map((row) => /* @__PURE__ */ jsx6(Row, { value: row, row, state, adapter, onOpen, onOpenSubagents, now }, row.key)),
       state.history.hasMoreSessions ? /* @__PURE__ */ jsx6("button", { className: "scui-load", type: "button", disabled: loadingMore, onClick: loadMore, children: loadingMore ? "Loading older chats\u2026" : "Load older chats" }) : null,
       AfterSessions ? /* @__PURE__ */ jsx6(AfterSessions, { state, adapter, value: { query, rows } }) : null
     ] })

package/settings.mjs

@@ -65,6 +65,7 @@ var EMPTY_UI_STATE = Object.freeze({
   savedDraft: "",
   attention: Object.freeze([]),
   sessions: Object.freeze([]),
+  subagentInspector: null,
   attached: null,
   owned: null,
   attachError: null
@@ -150,6 +151,12 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
 // src/icon.jsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
 var ICONS = {
+  agents: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "6", cy: "6.5", r: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2.75 13c.45-2 1.55-3 3.25-3s2.8 1 3.25 3" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12.25", cy: "7", r: "1.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10.5 10.75c1.95-.65 3.45.1 4 2.25" })
+  ] }),
   attach: () => /* @__PURE__ */ jsx2("path", { d: "M6.25 9.75 10.6 5.4a2.1 2.1 0 0 1 2.97 2.97l-5.4 5.4a3.3 3.3 0 0 1-4.67-4.66l5.52-5.52" }),
   back: () => /* @__PURE__ */ jsx2("path", { d: "m11.5 4.5-4.5 4.5 4.5 4.5" }),
   check: () => /* @__PURE__ */ jsx2("path", { d: "m4 9 3.25 3.25L14 5.5" }),

package/styles.css

@@ -102,8 +102,10 @@
 .scui-search { display:flex; flex:1; min-width:0; align-items:center; gap:7px; padding:6px 8px; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised); color:var(--scui-muted) }
 .scui-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--scui-fg) }
 .scui-session-rows { flex:1; min-height:0; overflow:auto; padding:0 6px 8px }
-.scui-session { display:flex; align-items:flex-start; gap:9px; width:100%; padding:8px; border:0; border-radius:7px; background:transparent; text-align:left; cursor:pointer }
+.scui-session { display:flex; width:100%; align-items:center; border-radius:7px; background:transparent }
 .scui-session:hover,.scui-session[data-active="true"] { background:var(--scui-fill) }
+.scui-session-main { display:flex; min-width:0; flex:1; align-items:flex-start; gap:9px; padding:8px; border:0; background:transparent; text-align:left; cursor:pointer }
+.scui-session-agents { display:flex; flex:none; align-items:center; gap:4px; margin-right:6px; padding:4px 6px; border:0; border-radius:6px; background:transparent; color:var(--scui-muted); cursor:pointer; font-size:9px; white-space:nowrap }.scui-session-agents:hover { background:var(--scui-bg-raised); color:var(--scui-fg) }
 .scui-session-copy { display:grid; flex:1; min-width:0; gap:1px }
 .scui-session-copy > span { display:flex; align-items:baseline; gap:7px; min-width:0 }
 .scui-session-copy strong,.scui-session-copy span > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@@ -211,6 +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-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 }
 
 @keyframes scui-spin { to { transform:rotate(360deg) } }
 @keyframes scui-breathe { 50% { transform:scale(.72); opacity:.5 } }

package/subagents.d.ts

@@ -0,0 +1,2 @@
+export type { SessionRowModel, SubagentInspectorModel, SupercodeUiState, UiAdapter } from './index.js';
+export { Conversation, SubagentInspector } from './index.js';