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

package/README.md

@@ -43,6 +43,9 @@ const mounted = mountSupercodeMessenger(document.querySelector('#agent'), {
     async pickContext() {
       return host.pickFilesAndImages();
     },
+    openKeyboardShortcuts() {
+      panel.showKeyboardShortcuts();
+    },
     onClose() {
       panel.close();
     },
@@ -135,7 +138,11 @@ Hosts do not need to fork the messenger to connect their own object model:
   }}
   contextCandidates={visibleObjects.map(asTranscriptContext)}
   components={{ ContextCandidate: ObjectPreview }}
-  slots={{ beforeSessions: ProjectThreads }}
+  slots={{
+    listHeader: () => null,
+    listToolbarActions: NewConversationButton,
+    beforeSessions: ProjectThreads,
+  }}
 />
 ```
 
@@ -217,6 +224,8 @@ its external agent is working or needs input.
   replacement. Replacements receive the same typed, capability-filtered props as defaults.
 - `slots.headerActions` adds compact product controls to the default list, chat, and new-chat
   headers without replacing their navigation, status, or accessibility behavior.
+- `slots.listHeader` can delegate list chrome to the host, while `slots.listToolbarActions` adds
+  controls beside the package-owned search field without duplicating search state.
 - Stable `scui-*` classes and `data-*` attributes support additive styling; CSS custom properties
   are the supported theme API.
 - `styles.css` contains both neutral tokens and default component rules. Teams may load it whole,
@@ -251,6 +260,9 @@ inventing fallback prompt text. The composer bounds images to four supported bro
 messages, retry, edit, and new-chat recovery. The host still chooses how explicit file selection
 is exposed and must revalidate every returned item.
 
+`openKeyboardShortcuts` is also optional and host-owned. When present, the default conversation
+overflow includes a Keyboard shortcuts item without consuming permanent header width.
+
 Transcript images with a browser-safe URL open in a keyboard-accessible, viewport-bounded viewer;
 remote images expose copy-link and open-original actions, while local data images can be downloaded.
 `createClientProjection` keeps large historical data URLs in a projection-scoped host registry and

package/components.mjs

@@ -952,6 +952,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
@@ -2348,6 +2352,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   const ListHeader = slots.listHeader;
+  const ListToolbarActions = slots.listToolbarActions;
   const BeforeSessions = slots.beforeSessions;
   const AfterSessions = slots.afterSessions;
   useLayoutEffect3(() => {
@@ -2387,15 +2392,18 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       onClose ? /* @__PURE__ */ jsx8("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx8(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx8(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs7("label", { className: "scui-search", children: [
-      /* @__PURE__ */ jsx8(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx8("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
-        const value = event.currentTarget.value;
-        setQuery(value);
-        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
-        if (rowScroller.current) rowScroller.current.scrollTop = 0;
-      } }),
-      /* @__PURE__ */ jsx8("small", { children: rows.length })
+    state.sessions.length > 4 || ListToolbarActions ? /* @__PURE__ */ jsxs7("div", { className: "scui-list-toolbar", children: [
+      state.sessions.length > 4 ? /* @__PURE__ */ jsxs7("label", { className: "scui-search", children: [
+        /* @__PURE__ */ jsx8(UiIcon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx8("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setQuery(value);
+          boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+          if (rowScroller.current) rowScroller.current.scrollTop = 0;
+        } }),
+        query ? /* @__PURE__ */ jsx8("small", { children: rows.length }) : null
+      ] }) : null,
+      ListToolbarActions ? /* @__PURE__ */ jsx8(ListToolbarActions, { state, adapter, value: { query, rows, onNew, canStart: state.harnesses.some((item) => item.startable) } }) : null
     ] }) : null,
     /* @__PURE__ */ jsxs7("div", { className: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
       BeforeSessions ? /* @__PURE__ */ jsx8(BeforeSessions, { state, adapter, value: { query, rows } }) : null,
@@ -2655,7 +2663,8 @@ function ConversationActions({ state, adapter, actionPending, onNew, onSettings
         state.canDetach ? { key: "detach", label: "Detach to read-only", intent: { action: "detach" } } : null,
         state.canOpenTerminal ? { key: "terminal", label: "Prepare terminal handoff", intent: { action: "terminal" } } : null,
         state.canExport && state.exportBackTarget ? { key: "export", label: `Export back to ${harnessDisplayName(state.exportBackTarget)}`, intent: { action: "export", targetHarness: state.exportBackTarget } } : null,
-        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null
+        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null,
+        adapter.openKeyboardShortcuts ? { key: "shortcuts", label: "Keyboard shortcuts", onSelect: adapter.openKeyboardShortcuts } : null
       ].filter(Boolean)
     },
     {

package/composer.mjs

@@ -110,6 +110,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/conversation.mjs

@@ -603,6 +603,10 @@ var ICONS = {
     /* @__PURE__ */ jsx2("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx2("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx2("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/embed.mjs

@@ -915,6 +915,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
@@ -2265,6 +2269,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   const ListHeader = slots.listHeader;
+  const ListToolbarActions = slots.listToolbarActions;
   const BeforeSessions = slots.beforeSessions;
   const AfterSessions = slots.afterSessions;
   useLayoutEffect3(() => {
@@ -2304,15 +2309,18 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       onClose ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx7(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx7(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs6("label", { className: "scui-search", children: [
-      /* @__PURE__ */ jsx7(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx7("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
-        const value = event.currentTarget.value;
-        setQuery(value);
-        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
-        if (rowScroller.current) rowScroller.current.scrollTop = 0;
-      } }),
-      /* @__PURE__ */ jsx7("small", { children: rows.length })
+    state.sessions.length > 4 || ListToolbarActions ? /* @__PURE__ */ jsxs6("div", { className: "scui-list-toolbar", children: [
+      state.sessions.length > 4 ? /* @__PURE__ */ jsxs6("label", { className: "scui-search", children: [
+        /* @__PURE__ */ jsx7(UiIcon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx7("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setQuery(value);
+          boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+          if (rowScroller.current) rowScroller.current.scrollTop = 0;
+        } }),
+        query ? /* @__PURE__ */ jsx7("small", { children: rows.length }) : null
+      ] }) : null,
+      ListToolbarActions ? /* @__PURE__ */ jsx7(ListToolbarActions, { state, adapter, value: { query, rows, onNew, canStart: state.harnesses.some((item) => item.startable) } }) : null
     ] }) : null,
     /* @__PURE__ */ jsxs6("div", { className: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
       BeforeSessions ? /* @__PURE__ */ jsx7(BeforeSessions, { state, adapter, value: { query, rows } }) : null,
@@ -2572,7 +2580,8 @@ function ConversationActions({ state, adapter, actionPending, onNew, onSettings
         state.canDetach ? { key: "detach", label: "Detach to read-only", intent: { action: "detach" } } : null,
         state.canOpenTerminal ? { key: "terminal", label: "Prepare terminal handoff", intent: { action: "terminal" } } : null,
         state.canExport && state.exportBackTarget ? { key: "export", label: `Export back to ${harnessDisplayName(state.exportBackTarget)}`, intent: { action: "export", targetHarness: state.exportBackTarget } } : null,
-        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null
+        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null,
+        adapter.openKeyboardShortcuts ? { key: "shortcuts", label: "Keyboard shortcuts", onSelect: adapter.openKeyboardShortcuts } : null
       ].filter(Boolean)
     },
     {

package/icon.mjs

@@ -9,6 +9,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/index.d.ts

@@ -348,6 +348,8 @@ export interface UiAdapter {
   pickContext?(): TranscriptAttachment | TranscriptAttachment[] | null | Promise<TranscriptAttachment | TranscriptAttachment[] | null>;
   /** Resolve one projected historical image on demand. The UI owns and revokes its object URL. */
   resolveImage?(image: TranscriptImage): Blob | Promise<Blob>;
+  /** Open the embedding host's keyboard-shortcut reference from the standard overflow menu. */
+  openKeyboardShortcuts?(): void;
   onClose?(): void;
   onOpen?(): void;
   copyText?(value: string): void | Promise<void>;
@@ -477,6 +479,8 @@ export interface MessengerSlots {
   header?: ComponentType<ComponentOverrideProps>;
   /** Replace the conversation-list header. A component returning `null` delegates all list chrome to its host. */
   listHeader?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[]; onNew?(): void }>>;
+  /** Add a compact host control beside conversation search without replacing search behavior. */
+  listToolbarActions?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[]; onNew?(): void; canStart: boolean }>>;
   /** Add a compact consumer control to every default messenger header. `value` is the current view. */
   headerActions?: ComponentType<ComponentOverrideProps<'list' | 'chat' | 'new'>>;
   /** Host-owned rows rendered inside the searchable conversation scroller. */
@@ -543,7 +547,7 @@ export function parseSupercodeUiIntent(value: unknown): SupercodeUiIntent | null
 
 export function HarnessLogo(props: { id: HarnessId; activity?: SessionActivity; size?: number; onMissingLogo?(id: string): void }): VNode | null;
 export function AgentActivityLauncher(props: AgentActivityLauncherProps): VNode;
-export type UiIconName = 'attach' | 'back' | 'check' | 'chevron' | 'close' | 'copy' | 'down' | 'menu' | 'plus' | 'search' | 'send' | 'stop';
+export type UiIconName = 'attach' | 'back' | 'check' | 'chevron' | 'close' | 'compose' | 'copy' | 'down' | 'menu' | 'plus' | 'search' | 'send' | 'stop';
 export function UiIcon(props: { name: UiIconName; size?: number; class?: string }): VNode | null;
 export function hasHarnessLogo(id: string): boolean;
 export function harnessLogoDataUrl(id: string): string | null;

package/messenger.mjs

@@ -912,6 +912,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
@@ -2262,6 +2266,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   const ListHeader = slots.listHeader;
+  const ListToolbarActions = slots.listToolbarActions;
   const BeforeSessions = slots.beforeSessions;
   const AfterSessions = slots.afterSessions;
   useLayoutEffect3(() => {
@@ -2301,15 +2306,18 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       onClose ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx7(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx7(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs6("label", { className: "scui-search", children: [
-      /* @__PURE__ */ jsx7(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx7("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
-        const value = event.currentTarget.value;
-        setQuery(value);
-        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
-        if (rowScroller.current) rowScroller.current.scrollTop = 0;
-      } }),
-      /* @__PURE__ */ jsx7("small", { children: rows.length })
+    state.sessions.length > 4 || ListToolbarActions ? /* @__PURE__ */ jsxs6("div", { className: "scui-list-toolbar", children: [
+      state.sessions.length > 4 ? /* @__PURE__ */ jsxs6("label", { className: "scui-search", children: [
+        /* @__PURE__ */ jsx7(UiIcon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx7("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setQuery(value);
+          boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+          if (rowScroller.current) rowScroller.current.scrollTop = 0;
+        } }),
+        query ? /* @__PURE__ */ jsx7("small", { children: rows.length }) : null
+      ] }) : null,
+      ListToolbarActions ? /* @__PURE__ */ jsx7(ListToolbarActions, { state, adapter, value: { query, rows, onNew, canStart: state.harnesses.some((item) => item.startable) } }) : null
     ] }) : null,
     /* @__PURE__ */ jsxs6("div", { className: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
       BeforeSessions ? /* @__PURE__ */ jsx7(BeforeSessions, { state, adapter, value: { query, rows } }) : null,
@@ -2569,7 +2577,8 @@ function ConversationActions({ state, adapter, actionPending, onNew, onSettings
         state.canDetach ? { key: "detach", label: "Detach to read-only", intent: { action: "detach" } } : null,
         state.canOpenTerminal ? { key: "terminal", label: "Prepare terminal handoff", intent: { action: "terminal" } } : null,
         state.canExport && state.exportBackTarget ? { key: "export", label: `Export back to ${harnessDisplayName(state.exportBackTarget)}`, intent: { action: "export", targetHarness: state.exportBackTarget } } : null,
-        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null
+        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null,
+        adapter.openKeyboardShortcuts ? { key: "shortcuts", label: "Keyboard shortcuts", onSelect: adapter.openKeyboardShortcuts } : null
       ].filter(Boolean)
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {

package/react/components.mjs

@@ -952,6 +952,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
@@ -2348,6 +2352,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   const ListHeader = slots.listHeader;
+  const ListToolbarActions = slots.listToolbarActions;
   const BeforeSessions = slots.beforeSessions;
   const AfterSessions = slots.afterSessions;
   useLayoutEffect3(() => {
@@ -2387,15 +2392,18 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       onClose ? /* @__PURE__ */ jsx8("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx8(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx8(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs7("label", { className: "scui-search", children: [
-      /* @__PURE__ */ jsx8(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx8("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
-        const value = event.currentTarget.value;
-        setQuery(value);
-        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
-        if (rowScroller.current) rowScroller.current.scrollTop = 0;
-      } }),
-      /* @__PURE__ */ jsx8("small", { children: rows.length })
+    state.sessions.length > 4 || ListToolbarActions ? /* @__PURE__ */ jsxs7("div", { className: "scui-list-toolbar", children: [
+      state.sessions.length > 4 ? /* @__PURE__ */ jsxs7("label", { className: "scui-search", children: [
+        /* @__PURE__ */ jsx8(UiIcon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx8("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setQuery(value);
+          boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+          if (rowScroller.current) rowScroller.current.scrollTop = 0;
+        } }),
+        query ? /* @__PURE__ */ jsx8("small", { children: rows.length }) : null
+      ] }) : null,
+      ListToolbarActions ? /* @__PURE__ */ jsx8(ListToolbarActions, { state, adapter, value: { query, rows, onNew, canStart: state.harnesses.some((item) => item.startable) } }) : null
     ] }) : null,
     /* @__PURE__ */ jsxs7("div", { className: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
       BeforeSessions ? /* @__PURE__ */ jsx8(BeforeSessions, { state, adapter, value: { query, rows } }) : null,
@@ -2655,7 +2663,8 @@ function ConversationActions({ state, adapter, actionPending, onNew, onSettings
         state.canDetach ? { key: "detach", label: "Detach to read-only", intent: { action: "detach" } } : null,
         state.canOpenTerminal ? { key: "terminal", label: "Prepare terminal handoff", intent: { action: "terminal" } } : null,
         state.canExport && state.exportBackTarget ? { key: "export", label: `Export back to ${harnessDisplayName(state.exportBackTarget)}`, intent: { action: "export", targetHarness: state.exportBackTarget } } : null,
-        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null
+        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null,
+        adapter.openKeyboardShortcuts ? { key: "shortcuts", label: "Keyboard shortcuts", onSelect: adapter.openKeyboardShortcuts } : null
       ].filter(Boolean)
     },
     {

package/react/composer.mjs

@@ -110,6 +110,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/react/conversation.mjs

@@ -603,6 +603,10 @@ var ICONS = {
     /* @__PURE__ */ jsx2("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx2("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx2("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/react/icon.mjs

@@ -9,6 +9,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/react/index.d.ts

@@ -77,6 +77,8 @@ export interface MessengerComponents {
 
 export interface MessengerSlots {
   header?: ComponentType<ComponentOverrideProps>;
+  listHeader?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[]; onNew?(): void }>>;
+  listToolbarActions?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[]; onNew?(): void; canStart: boolean }>>;
   headerActions?: ComponentType<ComponentOverrideProps<'list' | 'chat' | 'new'>>;
   beforeSessions?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[] }>>;
   afterSessions?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[] }>>;

package/react/messenger.mjs

@@ -912,6 +912,10 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
@@ -2262,6 +2266,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   const ListHeader = slots.listHeader;
+  const ListToolbarActions = slots.listToolbarActions;
   const BeforeSessions = slots.beforeSessions;
   const AfterSessions = slots.afterSessions;
   useLayoutEffect3(() => {
@@ -2301,15 +2306,18 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       onClose ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx7(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx7(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs6("label", { className: "scui-search", children: [
-      /* @__PURE__ */ jsx7(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx7("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
-        const value = event.currentTarget.value;
-        setQuery(value);
-        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
-        if (rowScroller.current) rowScroller.current.scrollTop = 0;
-      } }),
-      /* @__PURE__ */ jsx7("small", { children: rows.length })
+    state.sessions.length > 4 || ListToolbarActions ? /* @__PURE__ */ jsxs6("div", { className: "scui-list-toolbar", children: [
+      state.sessions.length > 4 ? /* @__PURE__ */ jsxs6("label", { className: "scui-search", children: [
+        /* @__PURE__ */ jsx7(UiIcon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx7("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setQuery(value);
+          boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+          if (rowScroller.current) rowScroller.current.scrollTop = 0;
+        } }),
+        query ? /* @__PURE__ */ jsx7("small", { children: rows.length }) : null
+      ] }) : null,
+      ListToolbarActions ? /* @__PURE__ */ jsx7(ListToolbarActions, { state, adapter, value: { query, rows, onNew, canStart: state.harnesses.some((item) => item.startable) } }) : null
     ] }) : null,
     /* @__PURE__ */ jsxs6("div", { className: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
       BeforeSessions ? /* @__PURE__ */ jsx7(BeforeSessions, { state, adapter, value: { query, rows } }) : null,
@@ -2569,7 +2577,8 @@ function ConversationActions({ state, adapter, actionPending, onNew, onSettings
         state.canDetach ? { key: "detach", label: "Detach to read-only", intent: { action: "detach" } } : null,
         state.canOpenTerminal ? { key: "terminal", label: "Prepare terminal handoff", intent: { action: "terminal" } } : null,
         state.canExport && state.exportBackTarget ? { key: "export", label: `Export back to ${harnessDisplayName(state.exportBackTarget)}`, intent: { action: "export", targetHarness: state.exportBackTarget } } : null,
-        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null
+        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null,
+        adapter.openKeyboardShortcuts ? { key: "shortcuts", label: "Keyboard shortcuts", onSelect: adapter.openKeyboardShortcuts } : null
       ].filter(Boolean)
     },
     {

package/react/sessions.mjs

@@ -184,6 +184,10 @@ var ICONS = {
     /* @__PURE__ */ jsx2("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx2("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx2("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
@@ -370,6 +374,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   const ListHeader = slots.listHeader;
+  const ListToolbarActions = slots.listToolbarActions;
   const BeforeSessions = slots.beforeSessions;
   const AfterSessions = slots.afterSessions;
   useLayoutEffect2(() => {
@@ -409,15 +414,18 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       onClose ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx6(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs5("label", { className: "scui-search", children: [
-      /* @__PURE__ */ jsx6(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx6("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
-        const value = event.currentTarget.value;
-        setQuery(value);
-        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
-        if (rowScroller.current) rowScroller.current.scrollTop = 0;
-      } }),
-      /* @__PURE__ */ jsx6("small", { children: rows.length })
+    state.sessions.length > 4 || ListToolbarActions ? /* @__PURE__ */ jsxs5("div", { className: "scui-list-toolbar", children: [
+      state.sessions.length > 4 ? /* @__PURE__ */ jsxs5("label", { className: "scui-search", children: [
+        /* @__PURE__ */ jsx6(UiIcon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx6("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setQuery(value);
+          boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+          if (rowScroller.current) rowScroller.current.scrollTop = 0;
+        } }),
+        query ? /* @__PURE__ */ jsx6("small", { children: rows.length }) : null
+      ] }) : null,
+      ListToolbarActions ? /* @__PURE__ */ jsx6(ListToolbarActions, { state, adapter, value: { query, rows, onNew, canStart: state.harnesses.some((item) => item.startable) } }) : null
     ] }) : null,
     /* @__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,

package/react/settings.mjs

@@ -158,6 +158,10 @@ var ICONS = {
     /* @__PURE__ */ jsx2("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx2("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx2("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/sessions.mjs

@@ -184,6 +184,10 @@ var ICONS = {
     /* @__PURE__ */ jsx2("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx2("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx2("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
@@ -370,6 +374,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   const ListHeader = slots.listHeader;
+  const ListToolbarActions = slots.listToolbarActions;
   const BeforeSessions = slots.beforeSessions;
   const AfterSessions = slots.afterSessions;
   useLayoutEffect2(() => {
@@ -409,15 +414,18 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       onClose ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx6(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs5("label", { className: "scui-search", children: [
-      /* @__PURE__ */ jsx6(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx6("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
-        const value = event.currentTarget.value;
-        setQuery(value);
-        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
-        if (rowScroller.current) rowScroller.current.scrollTop = 0;
-      } }),
-      /* @__PURE__ */ jsx6("small", { children: rows.length })
+    state.sessions.length > 4 || ListToolbarActions ? /* @__PURE__ */ jsxs5("div", { className: "scui-list-toolbar", children: [
+      state.sessions.length > 4 ? /* @__PURE__ */ jsxs5("label", { className: "scui-search", children: [
+        /* @__PURE__ */ jsx6(UiIcon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx6("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setQuery(value);
+          boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+          if (rowScroller.current) rowScroller.current.scrollTop = 0;
+        } }),
+        query ? /* @__PURE__ */ jsx6("small", { children: rows.length }) : null
+      ] }) : null,
+      ListToolbarActions ? /* @__PURE__ */ jsx6(ListToolbarActions, { state, adapter, value: { query, rows, onNew, canStart: state.harnesses.some((item) => item.startable) } }) : null
     ] }) : null,
     /* @__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,

package/settings.mjs

@@ -158,6 +158,10 @@ var ICONS = {
     /* @__PURE__ */ jsx2("path", { d: "m4.75 4.75 8.5 8.5" }),
     /* @__PURE__ */ jsx2("path", { d: "m13.25 4.75-8.5 8.5" })
   ] }),
+  compose: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M11.75 3.75 14.25 6.25 7 13.5l-3.25.75.75-3.25 7.25-7.25Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10.5 5 2.5 2.5" })
+  ] }),
   copy: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
     /* @__PURE__ */ jsx2("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })

package/styles.css

@@ -97,7 +97,9 @@
 .scui-progress i[data-progress="done"] { background:var(--scui-accent) }
 .scui-progress i[data-progress="current"]::after { content:""; display:block; width:55%; height:100%; background:var(--scui-accent); animation:scui-progress 1s ease-in-out infinite alternate }
 
-.scui-search { display:flex; flex:none; align-items:center; gap:7px; margin:8px; padding:6px 8px; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised); color:var(--scui-muted) }
+.scui-list-toolbar { display:flex; flex:none; align-items:center; gap:6px; padding:8px }
+.scui-list-toolbar > :not(.scui-search) { flex:none }
+.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 }