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

package/README.md

@@ -185,11 +185,45 @@ mounted.update(binding.getState());
 ```
 
 The binding maps standard controller operations, including verified reduce-and-continue, and
-projects its durable reduction receipt directly. Host-owned pagination, durable attention,
-drafts, and artifact materialization remain explicit callbacks. A
+projects its durable reduction receipt directly. Host-owned session-list pagination, durable
+attention, drafts, and artifact materialization remain explicit callbacks. Transcript pagination
+dispatches to the controller by default. A
 browser should receive projected state from a trusted host rather than instantiate a local
 controller or gain filesystem authority.
 
+### Bind across a process boundary
+
+Browser-hosted products use the transport-neutral host binding instead of recreating snapshot
+ordering and intent dispatch around the same controller:
+
+```js
+import { createRemoteControllerHost, createRemoteUiBinding } from '@volter-ai-dev/supercode-ui/host';
+
+// Trusted process
+const host = createRemoteControllerHost(controller);
+events.send(host.getFrame());
+host.subscribe((frame) => events.send(frame));
+http.onIntent((intent) => host.dispatch(intent));
+
+// Browser
+const binding = createRemoteUiBinding({
+  initialFrame,
+  dispatch: (intent) => http.postIntent(intent),
+  attention: {
+    state: loadAttention(),
+    onChange: saveAttention,
+  },
+});
+events.onFrame((frame) => binding.receive(frame));
+```
+
+Each serializable frame carries a host-process identity, workspace generation, monotonic sequence,
+controller revision, canonical UI state, and stable opaque reconnect identities. The browser store
+rejects duplicate and stale frames, including delayed action responses from a retired host process.
+The optional attention tracker baselines initial inventory without inventing unread dots, persists
+by stable opaque identity, and marks only newer conversation evidence or a proven runtime completion.
+HTTP, SSE, WebSocket, authentication, and product shell behavior remain host-owned transports.
+
 Native continuation exposes one action and a quiet execution-transport selector. A host with a real
 terminal provider can add `terminal` to `continuationModes` and handle `onResumeTerminal`; Terminal
 is then the initial choice and Headless remains available from the selector. The UI never infers

package/components.mjs

@@ -2345,31 +2345,32 @@ function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
     /* @__PURE__ */ jsxs7("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__ */ jsx8(HarnessLogo, { id: row.harness, activity, size: 34 }),
       /* @__PURE__ */ jsxs7("span", { className: "scui-session-copy", children: [
-        /* @__PURE__ */ jsxs7("span", { className: "scui-session-title", children: [
-          /* @__PURE__ */ jsx8("strong", { children: title }),
-          /* @__PURE__ */ jsx8("span", { className: "scui-session-meta", children: age ? /* @__PURE__ */ jsx8("time", { children: age }) : null })
-        ] }),
+        /* @__PURE__ */ jsx8("span", { className: "scui-session-title", children: /* @__PURE__ */ jsx8("strong", { children: title }) }),
         path.complete ? /* @__PURE__ */ jsxs7("small", { className: "scui-session-path", title: row.cwd, children: [
           /* @__PURE__ */ jsx8("span", { className: "scui-session-path-leading", children: path.leading }),
           path.separator ? /* @__PURE__ */ jsx8("span", { className: "scui-session-path-separator", children: path.separator }) : null,
           path.trailing ? /* @__PURE__ */ jsx8("span", { className: "scui-session-path-trailing", children: path.trailing }) : null
         ] }) : null,
-        working || preview || unreadCount ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-preview", children: [
+        working || preview ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-preview", children: [
           working ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-working", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx8("i", {}),
             /* @__PURE__ */ jsx8("i", {}),
             /* @__PURE__ */ jsx8("i", {})
           ] }) : null,
-          preview || working ? /* @__PURE__ */ jsx8("small", { children: preview || "Working\u2026" }) : null,
-          unreadCount ? /* @__PURE__ */ jsx8("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
+          preview || working ? /* @__PURE__ */ jsx8("small", { children: preview || "Working\u2026" }) : null
         ] }) : null,
         state.attachError?.key === row.key ? /* @__PURE__ */ jsx8("em", { children: state.attachError.message }) : null
       ] })
     ] }),
-    row.subagentCount ? /* @__PURE__ */ jsxs7("button", { className: "scui-session-agents", type: "button", "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
-      /* @__PURE__ */ jsx8(UiIcon, { name: "agents", size: 14 }),
-      "Agents \xB7 ",
-      row.subagentCount
+    row.subagentCount || age || unreadCount ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-rail", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "scui-session-rail-meta", children: [
+        row.subagentCount ? /* @__PURE__ */ jsxs7("button", { className: "scui-session-agents", type: "button", title: `${row.subagentCount} agent sessions`, "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+          /* @__PURE__ */ jsx8(UiIcon, { name: "agents", size: 14 }),
+          /* @__PURE__ */ jsx8("span", { children: row.subagentCount })
+        ] }) : null,
+        age ? /* @__PURE__ */ jsx8("time", { children: age }) : null
+      ] }),
+      unreadCount ? /* @__PURE__ */ jsx8("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
     ] }) : null
   ] });
 }

package/controller.mjs

@@ -433,7 +433,7 @@ function attached(snapshot) {
     harness: session.harness,
     name: workspaceName(session.cwd),
     cwd: session.cwd ?? '',
-    title: session.title ?? 'Untitled chat',
+    title: session.displayTitle ?? session.title ?? 'Untitled chat',
   };
 }
 
@@ -509,8 +509,10 @@ function projectClientSnapshotInternal(snapshot, options, imageRegistry) {
     harness: session.harness,
     name: workspaceName(session.cwd),
     cwd: session.cwd ?? '',
-    title: session.title ?? 'Untitled chat',
-    age: relativeAge(session.updatedAt, now),
+    title: session.displayTitle ?? session.title ?? 'Untitled chat',
+    preview: session.preview ?? '',
+    age: relativeAge(session.previewUpdatedAt ?? session.updatedAt, now),
+    previewUpdatedAt: session.previewUpdatedAt ?? null,
     updatedAt: session.updatedAt ?? null,
     messages: session.messageCount ?? null,
     active: session.key === snapshot.activeSessionKey,
@@ -677,7 +679,11 @@ export async function dispatchControllerIntent(controller, intent, options = {})
   if (intent.action === 'draft') return options.onDraft?.(intent.text);
   if (intent.action === 'ack') return options.onAcknowledge?.(intent.key);
   if (intent.action === 'loadSessions') return options.onLoadSessions?.();
-  if (intent.action === 'loadEarlier') return options.onLoadEarlier?.();
+  if (intent.action === 'loadEarlier') {
+    return options.onLoadEarlier
+      ? options.onLoadEarlier()
+      : controller.dispatch({ type: 'loadEarlier' });
+  }
   return options.onUnsupported?.(intent);
 }
 

package/embed.mjs

@@ -2262,31 +2262,32 @@ function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
     /* @__PURE__ */ jsxs6("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__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
       /* @__PURE__ */ jsxs6("span", { className: "scui-session-copy", children: [
-        /* @__PURE__ */ jsxs6("span", { className: "scui-session-title", children: [
-          /* @__PURE__ */ jsx7("strong", { children: title }),
-          /* @__PURE__ */ jsx7("span", { className: "scui-session-meta", children: age ? /* @__PURE__ */ jsx7("time", { children: age }) : null })
-        ] }),
+        /* @__PURE__ */ jsx7("span", { className: "scui-session-title", children: /* @__PURE__ */ jsx7("strong", { children: title }) }),
         path.complete ? /* @__PURE__ */ jsxs6("small", { className: "scui-session-path", title: row.cwd, children: [
           /* @__PURE__ */ jsx7("span", { className: "scui-session-path-leading", children: path.leading }),
           path.separator ? /* @__PURE__ */ jsx7("span", { className: "scui-session-path-separator", children: path.separator }) : null,
           path.trailing ? /* @__PURE__ */ jsx7("span", { className: "scui-session-path-trailing", children: path.trailing }) : null
         ] }) : null,
-        working || preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-preview", children: [
+        working || preview ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-preview", children: [
           working ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-working", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx7("i", {}),
             /* @__PURE__ */ jsx7("i", {}),
             /* @__PURE__ */ jsx7("i", {})
           ] }) : null,
-          preview || working ? /* @__PURE__ */ jsx7("small", { children: preview || "Working\u2026" }) : null,
-          unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
+          preview || working ? /* @__PURE__ */ jsx7("small", { children: preview || "Working\u2026" }) : null
         ] }) : null,
         state.attachError?.key === row.key ? /* @__PURE__ */ jsx7("em", { children: state.attachError.message }) : null
       ] })
     ] }),
-    row.subagentCount ? /* @__PURE__ */ jsxs6("button", { className: "scui-session-agents", type: "button", "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
-      /* @__PURE__ */ jsx7(UiIcon, { name: "agents", size: 14 }),
-      "Agents \xB7 ",
-      row.subagentCount
+    row.subagentCount || age || unreadCount ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-rail", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "scui-session-rail-meta", children: [
+        row.subagentCount ? /* @__PURE__ */ jsxs6("button", { className: "scui-session-agents", type: "button", title: `${row.subagentCount} agent sessions`, "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+          /* @__PURE__ */ jsx7(UiIcon, { name: "agents", size: 14 }),
+          /* @__PURE__ */ jsx7("span", { children: row.subagentCount })
+        ] }) : null,
+        age ? /* @__PURE__ */ jsx7("time", { children: age }) : null
+      ] }),
+      unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
     ] }) : null
   ] });
 }

package/host.d.ts

@@ -0,0 +1,103 @@
+import type { SupercodeClientSnapshot, SupercodeController } from '@volter-ai-dev/supercode-client';
+import type { ClientProjectionOptions, ControllerBindingOptions } from './controller.js';
+import type { SupercodeUiIntent, SupercodeUiState, UiAdapter } from './index.js';
+
+export interface RemoteUiFrame {
+  schema: 'supercode.ui-host-state.v1';
+  hostInstanceId: string;
+  generation: number;
+  sequence: number;
+  controllerRevision: number;
+  workspace: string;
+  state: SupercodeUiState;
+  sessionIdentities: ReadonlyArray<{ key: string; identity: string }>;
+}
+
+export interface RemoteControllerHostOptions extends Omit<ControllerBindingOptions, 'projection'> {
+  hostInstanceId?: string;
+  projection?(snapshot: SupercodeClientSnapshot): ClientProjectionOptions;
+}
+
+export class RemoteControllerHost {
+  constructor(controller: SupercodeController, options?: RemoteControllerHostOptions);
+  close(): void;
+  dispatch(intent: unknown): Promise<RemoteUiFrame>;
+  getFrame(): RemoteUiFrame;
+  refreshProjection(): RemoteUiFrame;
+  restore(identity: string, connection: 'observe' | 'attach'): Promise<RemoteUiFrame>;
+  subscribe(listener: (frame: RemoteUiFrame) => void): () => void;
+}
+
+export function createRemoteControllerHost(
+  controller: SupercodeController,
+  options?: RemoteControllerHostOptions,
+): RemoteControllerHost;
+
+export function assertRemoteUiFrame(value: unknown): RemoteUiFrame;
+
+export class RemoteUiStore {
+  constructor(initialFrame?: RemoteUiFrame | null);
+  getFrame(): RemoteUiFrame | null;
+  getState(): SupercodeUiState | null;
+  receive(frame: unknown): boolean;
+  subscribe(listener: (state: SupercodeUiState, frame: RemoteUiFrame) => void): () => void;
+}
+
+export function createRemoteUiStore(initialFrame?: RemoteUiFrame | null): RemoteUiStore;
+
+export interface SessionAttentionTrackerState {
+  version: 1;
+  sessions: Record<string, {
+    observedAt: number;
+    messages: number | null;
+    activity: import('./index.js').SessionActivity;
+    attention: import('./index.js').SessionAttention['kind'] | null;
+  }>;
+}
+
+export interface SessionAttentionTrackerOptions {
+  state?: unknown;
+  onChange?(state: SessionAttentionTrackerState): void;
+}
+
+export class SessionAttentionTracker {
+  constructor(options?: SessionAttentionTrackerOptions);
+  acknowledge(frame: RemoteUiFrame, key: string): boolean;
+  attention(frame: RemoteUiFrame): import('./index.js').SessionAttention[];
+  observe(frame: RemoteUiFrame): import('./index.js').SessionAttention[];
+  snapshot(): SessionAttentionTrackerState;
+}
+
+export function createSessionAttentionTracker(
+  options?: SessionAttentionTrackerOptions,
+): SessionAttentionTracker;
+
+export interface RemoteUiBindingOptions
+  extends Pick<
+    UiAdapter,
+    | 'confirmIntent'
+    | 'pickContext'
+    | 'resolveImage'
+    | 'openKeyboardShortcuts'
+    | 'onClose'
+    | 'onOpen'
+    | 'copyText'
+    | 'now'
+  > {
+  initialFrame?: RemoteUiFrame | null;
+  attention?: SessionAttentionTrackerOptions;
+  dispatch(intent: SupercodeUiIntent): Promise<RemoteUiFrame | null | void>;
+  handleIntent?(intent: SupercodeUiIntent): boolean | Promise<boolean>;
+  onAcknowledge?(key: string): void | Promise<void>;
+}
+
+export interface RemoteUiBinding {
+  adapter: UiAdapter;
+  close(): void;
+  getFrame(): RemoteUiFrame | null;
+  getState(): SupercodeUiState | null;
+  receive(frame: unknown): boolean;
+  subscribe(listener: (state: SupercodeUiState, frame: RemoteUiFrame) => void): () => void;
+}
+
+export function createRemoteUiBinding(options: RemoteUiBindingOptions): RemoteUiBinding;

package/host.mjs

@@ -0,0 +1,384 @@
+import { parseSupercodeUiIntent, sessionActivity } from './core.mjs';
+import { dispatchControllerIntent, projectClientSnapshot } from './controller.mjs';
+
+const FRAME_SCHEMA = 'supercode.ui-host-state.v1';
+
+function objectRecord(value) {
+  return value && typeof value === 'object' && !Array.isArray(value) ? value : null;
+}
+
+function defaultInstanceId() {
+  if (typeof globalThis.crypto?.randomUUID === 'function') return globalThis.crypto.randomUUID();
+  return `host-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
+/** Runtime guard for transport payloads received from a trusted Supercode host. */
+export function assertRemoteUiFrame(value) {
+  const frame = objectRecord(value);
+  const state = objectRecord(frame?.state);
+  if (
+    frame?.schema !== FRAME_SCHEMA ||
+    typeof frame.hostInstanceId !== 'string' ||
+    !frame.hostInstanceId ||
+    !Number.isSafeInteger(frame.generation) ||
+    frame.generation < 1 ||
+    !Number.isSafeInteger(frame.sequence) ||
+    frame.sequence < 1 ||
+    !Number.isSafeInteger(frame.controllerRevision) ||
+    frame.controllerRevision < 0 ||
+    typeof frame.workspace !== 'string' ||
+    !state ||
+    !Array.isArray(state.sessions) ||
+    !Array.isArray(state.transcript) ||
+    !Array.isArray(frame.sessionIdentities) ||
+    !frame.sessionIdentities.every(
+      (item) =>
+        objectRecord(item) &&
+        typeof item.key === 'string' &&
+        typeof item.identity === 'string',
+    )
+  ) {
+    throw new TypeError('Malformed Supercode remote UI frame.');
+  }
+  return value;
+}
+
+/** Trusted-host binding that projects one ordered, serializable UI frame and
+ * dispatches the same typed intents as an in-process messenger. */
+export class RemoteControllerHost {
+  #bindingOptions;
+  #controller;
+  #frame;
+  #generation = 0;
+  #hostInstanceId;
+  #lastControllerRevision = -1;
+  #listeners = new Set();
+  #sequence = 0;
+  #unsubscribe;
+  #workspace = null;
+
+  constructor(controller, options = {}) {
+    if (
+      !controller ||
+      typeof controller.getSnapshot !== 'function' ||
+      typeof controller.subscribe !== 'function' ||
+      typeof controller.dispatch !== 'function'
+    ) {
+      throw new TypeError('RemoteControllerHost requires a SupercodeController-compatible object.');
+    }
+    this.#controller = controller;
+    this.#hostInstanceId = options.hostInstanceId ?? defaultInstanceId();
+    if (typeof this.#hostInstanceId !== 'string' || !this.#hostInstanceId) {
+      throw new TypeError('RemoteControllerHost hostInstanceId must be a non-empty string.');
+    }
+    this.#bindingOptions = options;
+    this.#capture(true);
+    this.#unsubscribe = controller.subscribe(() => this.#capture(false));
+  }
+
+  close() {
+    this.#unsubscribe?.();
+    this.#unsubscribe = null;
+    this.#listeners.clear();
+  }
+
+  getFrame() {
+    return this.#frame;
+  }
+
+  subscribe(listener) {
+    this.#listeners.add(listener);
+    listener(this.#frame);
+    return () => this.#listeners.delete(listener);
+  }
+
+  /** Reproject host-owned overlays such as machine-wide inventory or durable attention. */
+  refreshProjection() {
+    this.#capture(true);
+    return this.#frame;
+  }
+
+  async dispatch(value) {
+    const intent = parseSupercodeUiIntent(value);
+    if (!intent) throw new TypeError('Invalid Supercode UI intent.');
+    const sequence = this.#sequence;
+    await dispatchControllerIntent(this.#controller, intent, this.#bindingOptions);
+    if (this.#sequence === sequence) this.#capture(true);
+    return this.#frame;
+  }
+
+  async restore(identity, connection) {
+    if (typeof identity !== 'string' || !identity) {
+      throw new TypeError('RemoteControllerHost restore identity must be a non-empty string.');
+    }
+    if (connection !== 'observe' && connection !== 'attach') {
+      throw new TypeError('RemoteControllerHost restore connection must be observe or attach.');
+    }
+    const sequence = this.#sequence;
+    await this.#controller.dispatch({ type: 'restore', identity, connection });
+    if (this.#sequence === sequence) this.#capture(true);
+    return this.#frame;
+  }
+
+  #capture(force) {
+    const snapshot = this.#controller.getSnapshot();
+    if (snapshot.workspace !== this.#workspace) {
+      this.#workspace = snapshot.workspace;
+      this.#generation += 1;
+      this.#lastControllerRevision = -1;
+      force = true;
+    }
+    if (!force && snapshot.revision === this.#lastControllerRevision) return;
+    this.#lastControllerRevision = snapshot.revision;
+    this.#sequence += 1;
+    const projection = this.#bindingOptions.projection?.(snapshot) ?? {};
+    this.#frame = Object.freeze({
+      schema: FRAME_SCHEMA,
+      hostInstanceId: this.#hostInstanceId,
+      generation: this.#generation,
+      sequence: this.#sequence,
+      controllerRevision: snapshot.revision,
+      workspace: snapshot.workspace,
+      state: projectClientSnapshot(snapshot, projection),
+      sessionIdentities: Object.freeze(
+        snapshot.sessions.map((session) =>
+          Object.freeze({ key: session.key, identity: session.identity }),
+        ),
+      ),
+    });
+    for (const listener of this.#listeners) listener(this.#frame);
+  }
+}
+
+export function createRemoteControllerHost(controller, options) {
+  return new RemoteControllerHost(controller, options);
+}
+
+/** Monotonic browser-side store. Once a newer host process is accepted, frames
+ * from every retired process are rejected permanently. */
+export class RemoteUiStore {
+  #frame = null;
+  #listeners = new Set();
+  #retiredHostInstances = new Set();
+
+  constructor(initialFrame) {
+    if (initialFrame !== undefined && initialFrame !== null) this.receive(initialFrame);
+  }
+
+  getFrame() {
+    return this.#frame;
+  }
+
+  getState() {
+    return this.#frame?.state ?? null;
+  }
+
+  subscribe(listener) {
+    this.#listeners.add(listener);
+    if (this.#frame) listener(this.#frame.state, this.#frame);
+    return () => this.#listeners.delete(listener);
+  }
+
+  receive(value) {
+    const next = assertRemoteUiFrame(value);
+    const current = this.#frame;
+    if (current) {
+      if (next.hostInstanceId !== current.hostInstanceId) {
+        if (this.#retiredHostInstances.has(next.hostInstanceId)) return false;
+        this.#retiredHostInstances.add(current.hostInstanceId);
+      } else if (
+        next.generation < current.generation ||
+        (next.generation === current.generation && next.sequence <= current.sequence)
+      ) {
+        return false;
+      }
+    }
+    this.#frame = next;
+    for (const listener of this.#listeners) listener(next.state, next);
+    return true;
+  }
+}
+
+export function createRemoteUiStore(initialFrame) {
+  return new RemoteUiStore(initialFrame);
+}
+
+function attentionState(value) {
+  const parsed = objectRecord(value);
+  const sessions = objectRecord(parsed?.sessions);
+  return {
+    version: 1,
+    sessions: sessions
+      ? Object.fromEntries(
+          Object.entries(sessions).flatMap(([identity, record]) => {
+            const item = objectRecord(record);
+            if (!item) return [];
+            return [[identity, {
+              observedAt: Number.isFinite(item.observedAt) ? item.observedAt : 0,
+              messages: Number.isFinite(item.messages) ? item.messages : null,
+              activity: typeof item.activity === 'string' ? item.activity : 'idle',
+              attention: ['unseen', 'finished', 'failed'].includes(item.attention)
+                ? item.attention
+                : null,
+            }]];
+          }),
+        )
+      : {},
+  };
+}
+
+function activeActivity(value) {
+  return value === 'running' || value === 'working' || value === 'needs-input';
+}
+
+/** Reference durable attention reducer. It baselines initial inventory without
+ * manufacturing unread state, then records only newer conversation or runtime evidence. */
+export class SessionAttentionTracker {
+  #onChange;
+  #state;
+
+  constructor(options = {}) {
+    this.#state = attentionState(options.state);
+    this.#onChange = options.onChange;
+  }
+
+  observe(frameValue) {
+    const frame = assertRemoteUiFrame(frameValue);
+    const identities = new Map(frame.sessionIdentities.map((item) => [item.key, item.identity]));
+    let changed = false;
+    for (const row of frame.state.sessions) {
+      const identity = identities.get(row.key);
+      if (!identity) continue;
+      const observedAt = row.previewUpdatedAt ?? row.updatedAt ?? 0;
+      const messages = Number.isFinite(row.messages) ? row.messages : null;
+      const activity = sessionActivity(frame.state, row);
+      const prior = this.#state.sessions[identity];
+      if (!prior) {
+        this.#state.sessions[identity] = {
+          observedAt,
+          messages,
+          activity,
+          attention: null,
+        };
+        changed = true;
+        continue;
+      }
+      const newerConversation =
+        observedAt > prior.observedAt ||
+        (messages !== null && prior.messages !== null && messages > prior.messages);
+      let attention = prior.attention;
+      if (newerConversation) attention = 'unseen';
+      if (activeActivity(prior.activity) && !activeActivity(activity)) {
+        attention = frame.state.error ? 'failed' : 'finished';
+      }
+      const next = {
+        observedAt: Math.max(prior.observedAt, observedAt),
+        messages:
+          messages === null
+            ? prior.messages
+            : prior.messages === null
+              ? messages
+              : Math.max(prior.messages, messages),
+        activity,
+        attention,
+      };
+      if (JSON.stringify(next) !== JSON.stringify(prior)) {
+        this.#state.sessions[identity] = next;
+        changed = true;
+      }
+    }
+    if (changed) this.#emit();
+    return this.attention(frame);
+  }
+
+  attention(frameValue) {
+    const frame = assertRemoteUiFrame(frameValue);
+    return frame.sessionIdentities.flatMap(({ key, identity }) => {
+      const attention = this.#state.sessions[identity]?.attention;
+      return attention ? [{ key, kind: attention }] : [];
+    });
+  }
+
+  acknowledge(frameValue, key) {
+    const frame = assertRemoteUiFrame(frameValue);
+    const identity = frame.sessionIdentities.find((item) => item.key === key)?.identity;
+    if (!identity || !this.#state.sessions[identity]?.attention) return false;
+    this.#state.sessions[identity].attention = null;
+    this.#emit();
+    return true;
+  }
+
+  snapshot() {
+    return structuredClone(this.#state);
+  }
+
+  #emit() {
+    this.#onChange?.(this.snapshot());
+  }
+}
+
+export function createSessionAttentionTracker(options) {
+  return new SessionAttentionTracker(options);
+}
+
+/** Browser binding for any transport that can post one intent and return an
+ * optional authoritative frame. Local host actions may intercept an intent. */
+export function createRemoteUiBinding(options) {
+  if (!options || typeof options.dispatch !== 'function') {
+    throw new TypeError('createRemoteUiBinding requires a dispatch function.');
+  }
+  const store = new RemoteUiStore(options.initialFrame);
+  const attention = options.attention
+    ? new SessionAttentionTracker(options.attention)
+    : null;
+  let projectedState = null;
+  const listeners = new Set();
+  const project = (frame) => {
+    projectedState = attention
+      ? { ...frame.state, attention: attention.observe(frame) }
+      : frame.state;
+    for (const listener of listeners) listener(projectedState, frame);
+  };
+  const unsubscribeStore = store.subscribe((_state, frame) => project(frame));
+  const adapter = {
+    async onIntent(value) {
+      const intent = parseSupercodeUiIntent(value);
+      if (!intent) throw new TypeError('Invalid Supercode UI intent.');
+      if (intent.action === 'ack' && attention) {
+        const frame = store.getFrame();
+        if (frame && attention.acknowledge(frame, intent.key)) project(frame);
+        await options.onAcknowledge?.(intent.key);
+        return;
+      }
+      if (await options.handleIntent?.(intent)) return;
+      const frame = await options.dispatch(intent);
+      if (frame) store.receive(frame);
+    },
+    ...(options.confirmIntent ? { confirmIntent: options.confirmIntent } : {}),
+    ...(options.pickContext ? { pickContext: options.pickContext } : {}),
+    ...(options.resolveImage ? { resolveImage: options.resolveImage } : {}),
+    ...(options.openKeyboardShortcuts
+      ? { openKeyboardShortcuts: options.openKeyboardShortcuts }
+      : {}),
+    ...(options.onClose ? { onClose: options.onClose } : {}),
+    ...(options.onOpen ? { onOpen: options.onOpen } : {}),
+    ...(options.copyText ? { copyText: options.copyText } : {}),
+    ...(options.now ? { now: options.now } : {}),
+  };
+  return {
+    adapter,
+    getFrame: () => store.getFrame(),
+    getState: () => projectedState ?? store.getState(),
+    receive: (frame) => store.receive(frame),
+    subscribe(listener) {
+      listeners.add(listener);
+      const frame = store.getFrame();
+      if (frame && projectedState) listener(projectedState, frame);
+      return () => listeners.delete(listener);
+    },
+    close() {
+      unsubscribeStore();
+      listeners.clear();
+    },
+  };
+}

package/messenger.mjs

@@ -2259,31 +2259,32 @@ function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
     /* @__PURE__ */ jsxs6("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__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
       /* @__PURE__ */ jsxs6("span", { className: "scui-session-copy", children: [
-        /* @__PURE__ */ jsxs6("span", { className: "scui-session-title", children: [
-          /* @__PURE__ */ jsx7("strong", { children: title }),
-          /* @__PURE__ */ jsx7("span", { className: "scui-session-meta", children: age ? /* @__PURE__ */ jsx7("time", { children: age }) : null })
-        ] }),
+        /* @__PURE__ */ jsx7("span", { className: "scui-session-title", children: /* @__PURE__ */ jsx7("strong", { children: title }) }),
         path.complete ? /* @__PURE__ */ jsxs6("small", { className: "scui-session-path", title: row.cwd, children: [
           /* @__PURE__ */ jsx7("span", { className: "scui-session-path-leading", children: path.leading }),
           path.separator ? /* @__PURE__ */ jsx7("span", { className: "scui-session-path-separator", children: path.separator }) : null,
           path.trailing ? /* @__PURE__ */ jsx7("span", { className: "scui-session-path-trailing", children: path.trailing }) : null
         ] }) : null,
-        working || preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-preview", children: [
+        working || preview ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-preview", children: [
           working ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-working", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx7("i", {}),
             /* @__PURE__ */ jsx7("i", {}),
             /* @__PURE__ */ jsx7("i", {})
           ] }) : null,
-          preview || working ? /* @__PURE__ */ jsx7("small", { children: preview || "Working\u2026" }) : null,
-          unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
+          preview || working ? /* @__PURE__ */ jsx7("small", { children: preview || "Working\u2026" }) : null
         ] }) : null,
         state.attachError?.key === row.key ? /* @__PURE__ */ jsx7("em", { children: state.attachError.message }) : null
       ] })
     ] }),
-    row.subagentCount ? /* @__PURE__ */ jsxs6("button", { className: "scui-session-agents", type: "button", "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
-      /* @__PURE__ */ jsx7(UiIcon, { name: "agents", size: 14 }),
-      "Agents \xB7 ",
-      row.subagentCount
+    row.subagentCount || age || unreadCount ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-rail", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "scui-session-rail-meta", children: [
+        row.subagentCount ? /* @__PURE__ */ jsxs6("button", { className: "scui-session-agents", type: "button", title: `${row.subagentCount} agent sessions`, "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+          /* @__PURE__ */ jsx7(UiIcon, { name: "agents", size: 14 }),
+          /* @__PURE__ */ jsx7("span", { children: row.subagentCount })
+        ] }) : null,
+        age ? /* @__PURE__ */ jsx7("time", { children: age }) : null
+      ] }),
+      unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
     ] }) : null
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {
@@ -16,6 +16,10 @@
       "types": "./controller.d.ts",
       "import": "./controller.mjs"
     },
+    "./host": {
+      "types": "./host.d.ts",
+      "import": "./host.mjs"
+    },
     "./preact": {
       "types": "./components.d.ts",
       "import": "./components.mjs"
@@ -108,6 +112,8 @@
     "core.d.ts",
     "controller.mjs",
     "controller.d.ts",
+    "host.mjs",
+    "host.d.ts",
     "components.mjs",
     "components.d.ts",
     "activity.mjs",

package/react/components.mjs

@@ -2345,31 +2345,32 @@ function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
     /* @__PURE__ */ jsxs7("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__ */ jsx8(HarnessLogo, { id: row.harness, activity, size: 34 }),
       /* @__PURE__ */ jsxs7("span", { className: "scui-session-copy", children: [
-        /* @__PURE__ */ jsxs7("span", { className: "scui-session-title", children: [
-          /* @__PURE__ */ jsx8("strong", { children: title }),
-          /* @__PURE__ */ jsx8("span", { className: "scui-session-meta", children: age ? /* @__PURE__ */ jsx8("time", { children: age }) : null })
-        ] }),
+        /* @__PURE__ */ jsx8("span", { className: "scui-session-title", children: /* @__PURE__ */ jsx8("strong", { children: title }) }),
         path.complete ? /* @__PURE__ */ jsxs7("small", { className: "scui-session-path", title: row.cwd, children: [
           /* @__PURE__ */ jsx8("span", { className: "scui-session-path-leading", children: path.leading }),
           path.separator ? /* @__PURE__ */ jsx8("span", { className: "scui-session-path-separator", children: path.separator }) : null,
           path.trailing ? /* @__PURE__ */ jsx8("span", { className: "scui-session-path-trailing", children: path.trailing }) : null
         ] }) : null,
-        working || preview || unreadCount ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-preview", children: [
+        working || preview ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-preview", children: [
           working ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-working", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx8("i", {}),
             /* @__PURE__ */ jsx8("i", {}),
             /* @__PURE__ */ jsx8("i", {})
           ] }) : null,
-          preview || working ? /* @__PURE__ */ jsx8("small", { children: preview || "Working\u2026" }) : null,
-          unreadCount ? /* @__PURE__ */ jsx8("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
+          preview || working ? /* @__PURE__ */ jsx8("small", { children: preview || "Working\u2026" }) : null
         ] }) : null,
         state.attachError?.key === row.key ? /* @__PURE__ */ jsx8("em", { children: state.attachError.message }) : null
       ] })
     ] }),
-    row.subagentCount ? /* @__PURE__ */ jsxs7("button", { className: "scui-session-agents", type: "button", "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
-      /* @__PURE__ */ jsx8(UiIcon, { name: "agents", size: 14 }),
-      "Agents \xB7 ",
-      row.subagentCount
+    row.subagentCount || age || unreadCount ? /* @__PURE__ */ jsxs7("span", { className: "scui-session-rail", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "scui-session-rail-meta", children: [
+        row.subagentCount ? /* @__PURE__ */ jsxs7("button", { className: "scui-session-agents", type: "button", title: `${row.subagentCount} agent sessions`, "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+          /* @__PURE__ */ jsx8(UiIcon, { name: "agents", size: 14 }),
+          /* @__PURE__ */ jsx8("span", { children: row.subagentCount })
+        ] }) : null,
+        age ? /* @__PURE__ */ jsx8("time", { children: age }) : null
+      ] }),
+      unreadCount ? /* @__PURE__ */ jsx8("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
     ] }) : null
   ] });
 }

package/react/messenger.mjs

@@ -2259,31 +2259,32 @@ function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
     /* @__PURE__ */ jsxs6("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__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
       /* @__PURE__ */ jsxs6("span", { className: "scui-session-copy", children: [
-        /* @__PURE__ */ jsxs6("span", { className: "scui-session-title", children: [
-          /* @__PURE__ */ jsx7("strong", { children: title }),
-          /* @__PURE__ */ jsx7("span", { className: "scui-session-meta", children: age ? /* @__PURE__ */ jsx7("time", { children: age }) : null })
-        ] }),
+        /* @__PURE__ */ jsx7("span", { className: "scui-session-title", children: /* @__PURE__ */ jsx7("strong", { children: title }) }),
         path.complete ? /* @__PURE__ */ jsxs6("small", { className: "scui-session-path", title: row.cwd, children: [
           /* @__PURE__ */ jsx7("span", { className: "scui-session-path-leading", children: path.leading }),
           path.separator ? /* @__PURE__ */ jsx7("span", { className: "scui-session-path-separator", children: path.separator }) : null,
           path.trailing ? /* @__PURE__ */ jsx7("span", { className: "scui-session-path-trailing", children: path.trailing }) : null
         ] }) : null,
-        working || preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-preview", children: [
+        working || preview ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-preview", children: [
           working ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-working", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx7("i", {}),
             /* @__PURE__ */ jsx7("i", {}),
             /* @__PURE__ */ jsx7("i", {})
           ] }) : null,
-          preview || working ? /* @__PURE__ */ jsx7("small", { children: preview || "Working\u2026" }) : null,
-          unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
+          preview || working ? /* @__PURE__ */ jsx7("small", { children: preview || "Working\u2026" }) : null
         ] }) : null,
         state.attachError?.key === row.key ? /* @__PURE__ */ jsx7("em", { children: state.attachError.message }) : null
       ] })
     ] }),
-    row.subagentCount ? /* @__PURE__ */ jsxs6("button", { className: "scui-session-agents", type: "button", "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
-      /* @__PURE__ */ jsx7(UiIcon, { name: "agents", size: 14 }),
-      "Agents \xB7 ",
-      row.subagentCount
+    row.subagentCount || age || unreadCount ? /* @__PURE__ */ jsxs6("span", { className: "scui-session-rail", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "scui-session-rail-meta", children: [
+        row.subagentCount ? /* @__PURE__ */ jsxs6("button", { className: "scui-session-agents", type: "button", title: `${row.subagentCount} agent sessions`, "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+          /* @__PURE__ */ jsx7(UiIcon, { name: "agents", size: 14 }),
+          /* @__PURE__ */ jsx7("span", { children: row.subagentCount })
+        ] }) : null,
+        age ? /* @__PURE__ */ jsx7("time", { children: age }) : null
+      ] }),
+      unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
     ] }) : null
   ] });
 }

package/react/sessions.mjs

@@ -351,31 +351,32 @@ function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
     /* @__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 })
-        ] }),
+        /* @__PURE__ */ jsx6("span", { className: "scui-session-title", children: /* @__PURE__ */ jsx6("strong", { children: title }) }),
         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 || preview ? /* @__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
+          preview || working ? /* @__PURE__ */ jsx6("small", { children: preview || "Working\u2026" }) : 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": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
-      /* @__PURE__ */ jsx6(UiIcon, { name: "agents", size: 14 }),
-      "Agents \xB7 ",
-      row.subagentCount
+    row.subagentCount || age || unreadCount ? /* @__PURE__ */ jsxs5("span", { className: "scui-session-rail", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "scui-session-rail-meta", children: [
+        row.subagentCount ? /* @__PURE__ */ jsxs5("button", { className: "scui-session-agents", type: "button", title: `${row.subagentCount} agent sessions`, "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+          /* @__PURE__ */ jsx6(UiIcon, { name: "agents", size: 14 }),
+          /* @__PURE__ */ jsx6("span", { children: row.subagentCount })
+        ] }) : null,
+        age ? /* @__PURE__ */ jsx6("time", { children: age }) : null
+      ] }),
+      unreadCount ? /* @__PURE__ */ jsx6("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
     ] }) : null
   ] });
 }

package/sessions.mjs

@@ -351,31 +351,32 @@ function SessionRow({ row, state, onOpen, onOpenSubagents, now = Date.now() }) {
     /* @__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 })
-        ] }),
+        /* @__PURE__ */ jsx6("span", { className: "scui-session-title", children: /* @__PURE__ */ jsx6("strong", { children: title }) }),
         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 || preview ? /* @__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
+          preview || working ? /* @__PURE__ */ jsx6("small", { children: preview || "Working\u2026" }) : 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": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
-      /* @__PURE__ */ jsx6(UiIcon, { name: "agents", size: 14 }),
-      "Agents \xB7 ",
-      row.subagentCount
+    row.subagentCount || age || unreadCount ? /* @__PURE__ */ jsxs5("span", { className: "scui-session-rail", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "scui-session-rail-meta", children: [
+        row.subagentCount ? /* @__PURE__ */ jsxs5("button", { className: "scui-session-agents", type: "button", title: `${row.subagentCount} agent sessions`, "aria-label": `Open ${row.subagentCount} agent sessions in ${title}`, onClick: () => onOpenSubagents?.(row), children: [
+          /* @__PURE__ */ jsx6(UiIcon, { name: "agents", size: 14 }),
+          /* @__PURE__ */ jsx6("span", { children: row.subagentCount })
+        ] }) : null,
+        age ? /* @__PURE__ */ jsx6("time", { children: age }) : null
+      ] }),
+      unreadCount ? /* @__PURE__ */ jsx6("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
     ] }) : null
   ] });
 }

package/styles.css

@@ -102,18 +102,18 @@
 .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; width:100%; align-items:center; border-radius:7px; background:transparent }
+.scui-session { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; align-items:stretch; 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-main { display:flex; min-width:0; align-items:flex-start; gap:9px; padding:8px; border:0; background:transparent; text-align:left; cursor:pointer }
+.scui-session-rail { display:grid; min-width:26px; align-content:space-between; justify-items:end; gap:4px; padding:8px 8px 8px 0 }.scui-session-rail-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px }.scui-session-rail time { color:var(--scui-muted); font-size:10px; white-space:nowrap }.scui-session-rail > b { display:grid; min-width:16px; height:16px; padding:0 4px; place-items:center; border-radius:8px; background:var(--scui-accent); color:var(--scui-bg); font-size:9px; line-height:16px }
+.scui-session-agents { display:flex; flex:none; align-items:center; gap:2px; padding:2px 4px; border:0; border-radius:6px; background:transparent; color:var(--scui-muted); cursor:pointer; font-size:9px; font-variant-numeric:tabular-nums; 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 }
-.scui-session-copy strong { flex:1; font-size:12.5px }.scui-session-meta { display:flex; flex:none; align-items:center }.scui-session-title time { color:var(--scui-muted); font-size:10px }.scui-session-working { display:flex; flex:none; width:14px; height:8px; align-self:center; align-items:center; justify-content:space-between; color:var(--scui-muted) }.scui-session-working > i { width:3px; height:3px; border-radius:50%; background:currentColor; animation:scui-session-dots 1.2s ease-in-out infinite }.scui-session-working > i:nth-child(2) { animation-delay:.15s }.scui-session-working > i:nth-child(3) { animation-delay:.3s }
+.scui-session-copy strong { flex:1; font-size:12.5px }.scui-session-working { display:flex; flex:none; width:14px; height:8px; align-self:center; align-items:center; justify-content:space-between; color:var(--scui-muted) }.scui-session-working > i { width:3px; height:3px; border-radius:50%; background:currentColor; animation:scui-session-dots 1.2s ease-in-out infinite }.scui-session-working > i:nth-child(2) { animation-delay:.15s }.scui-session-working > i:nth-child(3) { animation-delay:.3s }
 .scui-session-path { display:flex; min-width:0; overflow:hidden; color:var(--scui-muted); font-size:9.5px; white-space:nowrap }
 .scui-session-path-leading { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis }.scui-session-path-separator { flex:none }.scui-session-path-trailing { flex:none; max-width:58%; overflow:hidden; direction:rtl; text-align:left; text-overflow:ellipsis; unicode-bidi:plaintext }
-.scui-session-preview small { flex:1; min-width:0; color:var(--scui-muted); font-size:10.5px }.scui-session-preview b { display:grid; flex:none; min-width:16px; height:16px; padding:0 4px; place-items:center; border-radius:8px; background:var(--scui-accent); color:var(--scui-bg); font-size:9px; line-height:16px }
-.scui-session[data-writable="false"] .scui-session-preview b { background:var(--scui-muted) }
+.scui-session-preview small { flex:1; min-width:0; color:var(--scui-muted); font-size:10.5px }.scui-session[data-writable="false"] .scui-session-rail > b { background:var(--scui-muted) }
 .scui-session-copy em { overflow:hidden; color:var(--scui-danger); font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap }
 .scui-load { display:block; margin:7px auto; padding:5px 10px; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised); color:var(--scui-muted); cursor:pointer }.scui-load:disabled { opacity:.65; cursor:default }