@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

package/src/client/components/workspace/chat-timeline/PluginMessageActions.test.ts

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The chat row's plugin action strip.
+ *
+ * The property that matters is the NEGATIVE one: a Kabmo with no plugin rows
+ * renders nothing here, so every existing row's action strip is byte-identical
+ * to what it was before this slot existed. A wrapper `<div>`, a spacer or an
+ * empty fragment-with-a-parent would all break that silently, so the empty case
+ * is asserted against `innerHTML` rather than against "no button".
+ */
+
+import { afterAll, afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { PluginMessageActions } from '@/client/components/workspace/chat-timeline/PluginMessageActions';
+import { registerListSlot, resetListSlots } from '@/client/lib/plugins/list-slots';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let container: HTMLElement;
+
+beforeEach(() => {
+  resetListSlots();
+  installDomGlobals(new Window());
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // UNMOUNT, not detach: the component subscribes to a module-level store, and a
+  // live tree would re-render after `afterAll` removed `window`.
+  render(null, container);
+  container.remove();
+  resetListSlots();
+  restoreDomGlobals();
+});
+
+afterAll(() => restoreDomGlobals());
+
+/** A plugin button that reports the row props it was handed. Built per
+ *  registration so each row is identifiable — the host passes the SLOT's props,
+ *  never the registration's own id, which is the plugin's business. */
+function makeAction(tag: string) {
+  return (props: { messageId: string; role: string; text: string }) =>
+    h('button', { 'data-testid': `action-${tag}`, 'data-role': props.role, 'data-message': props.messageId }, props.text);
+}
+
+function mount() {
+  act(() => {
+    render(h(PluginMessageActions, { messageId: 'm1', role: 'ai', text: 'the answer' }), container);
+  });
+}
+
+describe('PluginMessageActions', () => {
+  test('renders nothing at all when no plugin contributed a row', () => {
+    mount();
+    // The whole acceptance property: an empty slot leaves the tree untouched.
+    expect(container.innerHTML).toBe('');
+  });
+
+  test('renders a contributed row with the row props', () => {
+    registerListSlot('demo', 'messageAction', { id: 'quote', title: 'quote', component: makeAction('quote') });
+    mount();
+
+    const button = container.querySelector('[data-testid="action-quote"]');
+    expect(button).not.toBeNull();
+    expect(button?.getAttribute('data-role')).toBe('ai');
+    expect(button?.getAttribute('data-message')).toBe('m1');
+    expect(button?.textContent).toBe('the answer');
+  });
+
+  test('renders rows in store order, across plugins', () => {
+    registerListSlot('beta', 'messageAction', { id: 'b', title: 'b', component: makeAction('b') });
+    registerListSlot('alpha', 'messageAction', { id: 'a', title: 'a', order: -1, component: makeAction('a') });
+    mount();
+
+    expect([...container.querySelectorAll('button')].map((node) => node.getAttribute('data-testid'))).toEqual([
+      'action-a',
+      'action-b',
+    ]);
+  });
+
+  test('a late registration reaches a mounted strip, and a disposal removes it', async () => {
+    mount();
+    expect(container.innerHTML).toBe('');
+
+    let dispose: () => void = () => {};
+    await act(async () => {
+      dispose = registerListSlot('demo', 'messageAction', { id: 'late', title: 'late', component: makeAction('late') });
+    });
+    expect(container.querySelector('[data-testid="action-late"]')).not.toBeNull();
+
+    await act(async () => {
+      dispose();
+    });
+    expect(container.innerHTML).toBe('');
+  });
+});

package/src/client/components/workspace/chat-timeline/PluginMessageActions.tsx

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The `messageAction` list slot's host: the plugin buttons a chat row's action
+ * strip renders beside Retry / Copy / New-chat.
+ *
+ * A row is drawn ONLY when a plugin contributed one — the component returns
+ * `null` for an empty slot, so a Kabmo with no plugins produces exactly the
+ * same tree it did before this slot existed. That is the property the whole
+ * list-slot design rests on: the host surface does not gain a wrapper, a spacer
+ * or an empty group when nothing registered.
+ *
+ * The props a plugin receives are the ROW's, read here rather than by each
+ * surface: a footer, a mobile sheet and a user row all know the same three
+ * facts (id, role, text), so they share one component instead of three.
+ */
+
+import type { MessageActionRegistration } from '@kabmo-labs/kabmo-sdk';
+import type { ListSlotEntry } from '@/client/lib/plugins/list-slots';
+import { PluginIdProvider } from '@kabmo-labs/kabmo-ui';
+import { useListSlotRows, usePluginSlotContext } from '@/client/hooks/workspace/list-slots';
+
+interface PluginMessageActionsProps {
+  /** The row's id as the timeline holds it. */
+  messageId: string;
+  /** The row's role as the timeline spells it. */
+  role: string;
+  /** Every text block of the row, joined — what a Copy-like action takes. */
+  text: string;
+}
+
+export function PluginMessageActions({ messageId, role, text }: PluginMessageActionsProps) {
+  const rows = useListSlotRows<MessageActionRegistration>('messageAction');
+  const context = usePluginSlotContext();
+  if (rows.length === 0) return null;
+  return (
+    <>
+      {rows.map((entry: ListSlotEntry<MessageActionRegistration>) => {
+        const Component = entry.registration.component;
+        return (
+          <PluginIdProvider key={`${entry.pluginId}:${entry.registration.id}`} pluginId={entry.pluginId}>
+            <Component {...context} messageId={messageId} role={role} text={text} />
+          </PluginIdProvider>
+        );
+      })}
+    </>
+  );
+}

package/src/client/components/workspace/chat-timeline/QueueList.test.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Queue row actions must be reachable without a cursor.
+ *
+ * The row's Send Now / Edit / Remove buttons are written
+ * `opacity-0 group-hover:opacity-100`, and Tailwind v4 emits `group-hover:`
+ * inside `@media (hover: hover)`. A phone reports `hover: none`, so the rule
+ * never applies and the buttons stayed at zero opacity — present in the DOM,
+ * invisible, and impossible to tap. The fix is the `touch-visible` class, whose
+ * `@media (hover: none)` rule lives in `tailwind.css` (its emission is pinned
+ * by `css.test.ts`); what these mounts pin is that every action the row renders
+ * actually CARRIES it, so a future row cannot be added hover-only.
+ *
+ * The class is asserted rather than a computed opacity because happy-dom does
+ * not resolve the media query — the stylesheet's own behaviour is covered by
+ * the bundler test, and this file covers the markup that must opt into it.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { QueueList } from '@/client/components/workspace/chat-timeline/QueueList';
+import type { QueuedMessage } from '@/shared/types';
+
+let container: HTMLElement;
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+const item = (id: string, text: string): QueuedMessage => ({ id, text, attachments: [], model: null });
+
+async function mount(props: Record<string, unknown>): Promise<HTMLElement> {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(QueueList, { queue: [item('q1', 'queued message')], ...props }), container);
+  });
+  return container;
+}
+
+describe('QueueList touch reachability', () => {
+  test('every row action opts into the no-cursor reveal', async () => {
+    const el = await mount({ onSendNow: () => {}, onEdit: () => {}, onRemove: () => {} });
+    const actions = [...el.querySelectorAll('button[title]')];
+    expect(actions.length).toBe(3);
+    for (const action of actions) {
+      expect(action.className).toContain('touch-visible');
+    }
+  });
+
+  test('an action the caller did not supply is not rendered', async () => {
+    const el = await mount({ onRemove: () => {} });
+    expect(el.querySelectorAll('button[title]').length).toBe(1);
+  });
+
+  test('Send Now is offered whenever the caller supplies it', async () => {
+    const el = await mount({ onSendNow: () => {} });
+    expect(el.querySelector('[title="Send Now (Steering)"]')).not.toBeNull();
+  });
+});

package/src/client/components/workspace/chat-timeline/QueueList.tsx

@@ -0,0 +1,86 @@
+import { useRef } from 'preact/hooks';
+import { GripVertical, Pencil, Send, X } from 'lucide-preact';
+import type { QueuedMessage } from '@/shared/types';
+
+export type { QueuedMessage };
+
+interface QueueListProps {
+  queue: QueuedMessage[];
+  /** Reorder handler (drag-and-drop): receives the new id order. */
+  onReorder?: (orderedIds: string[]) => void;
+  /** Remove one row by id. */
+  onRemove?: (id: string) => void;
+  onEdit?: (item: QueuedMessage) => void;
+  /** Deliver the item now (Send Now / steer). */
+  onSendNow?: (item: QueuedMessage) => void;
+}
+
+export function QueueList({ queue, onReorder, onRemove, onEdit, onSendNow }: QueueListProps) {
+  const dragItem = useRef<number | null>(null);
+  const dragOverItem = useRef<number | null>(null);
+
+  const handleSort = () => {
+    if (dragItem.current === null || dragOverItem.current === null) return;
+    const ids = queue.map((i) => i.id);
+    const draggedId = ids.splice(dragItem.current, 1)[0];
+    ids.splice(dragOverItem.current, 0, draggedId);
+    dragItem.current = null;
+    dragOverItem.current = null;
+    onReorder?.(ids);
+  };
+
+  if (queue.length === 0) return null;
+
+  return (
+    <div className="max-h-[150px] scrollbar-overlay-container mb-2 space-y-1">
+      {queue.map((item, index) => (
+        <div
+          key={item.id}
+          draggable
+          onDragStart={() => { dragItem.current = index; }}
+          onDragEnter={() => { dragOverItem.current = index; }}
+          onDragEnd={handleSort}
+          onDragOver={(e) => e.preventDefault()}
+          className="flex items-center gap-2 px-2 py-1.5 bg-paper border border-ink/10 rounded shadow-sm text-xs group hover:border-ink/30 transition-colors"
+        >
+          <div className="cursor-grab text-ink/40 group-hover:text-ink/80">
+            <GripVertical size={14} />
+          </div>
+          <span className="shrink-0 text-[9px] font-mono uppercase tracking-wider px-1 py-px rounded bg-ink/10 text-ink/70">
+            follow-up
+          </span>
+          <div className="flex-1 truncate text-ink/80 pr-2">
+            {item.text || (item.attachments.length > 0 ? `[${item.attachments.length} attachment${item.attachments.length > 1 ? 's' : ''}]` : 'Empty message')}
+          </div>
+          {onSendNow && (
+            <button
+              onClick={() => onSendNow(item)}
+              className="touch-visible text-ink/40 hover:text-ink/80 opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Send Now (Steering)"
+            >
+              <Send size={12} />
+            </button>
+          )}
+          {onEdit && (
+            <button
+              onClick={() => onEdit(item)}
+              className="touch-visible text-ink/40 hover:text-ink/80 opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Edit"
+            >
+              <Pencil size={12} />
+            </button>
+          )}
+          {onRemove && (
+            <button
+              onClick={() => onRemove(item.id)}
+              className="touch-visible text-ink/40 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Remove"
+            >
+              <X size={14} />
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/RunFooter.tsx

@@ -0,0 +1,82 @@
+import type { Attachment, ChatMessageData } from '@/shared/types';
+import { AiMessageFooter } from '@/client/components/workspace/chat-timeline/AiMessageFooter';
+import { messageAnswerText } from '@/shared/lib/chat/notice-row';
+import { formatMessageStamp } from '@/shared/lib/format/time';
+
+interface RunFooterProps {
+  /** The run's last real AI message (`RunFooterSlot.msg`). */
+  msg: ChatMessageData;
+  /** Session-level provider, used when the turn recorded none. */
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  /** id → display-name map from the model catalog. */
+  modelNames?: Record<string, string>;
+  /** Session thinking level, used when the turn recorded none. */
+  thinkingLevel?: string;
+  durationMs?: number | null;
+  /**
+   * The run's whole answer (`RunFooterSlot.answerText`) — what Copy and
+   * "new chat from this answer" act on. Falls back to the owner row's own text
+   * for call sites that only have a message.
+   */
+  answerText?: string;
+  /**
+   * The user row that opened the run (`RunFooterSlot.runUserId`): the turn
+   * Retry re-runs. The owner row is the run's LAST row, so handing its id to
+   * Retry made the button a silent no-op on every multi-row run.
+   */
+  retryTargetId?: string;
+  onRetry?: (msgId: string) => void;
+  onNewChat?: (content: string, attachments?: Attachment[]) => void;
+  /** Mobile uses a compact provider/model footer with a bottom-sheet menu. */
+  isMobile?: boolean;
+  /**
+   * Whether the footer offers Retry / New-chat. Both act on the CHAT, so a
+   * footer describing a row the chat does not own (the BTW panel's side answer)
+   * turns them off rather than rendering dead buttons.
+   */
+  showActions?: boolean;
+}
+
+/**
+ * Boundary footer of an AI response run: the timeline renders it as the run's
+ * own row — after every row the run owns, immediately before the next user
+ * message — never inside the answer bubble. The slot's AI message supplies the
+ * turn's model/usage; the answer text and retry target come from the run.
+ */
+export function RunFooter({
+  msg,
+  provider,
+  providerNames,
+  modelName,
+  modelNames,
+  thinkingLevel,
+  durationMs,
+  answerText,
+  retryTargetId,
+  onRetry,
+  onNewChat,
+  isMobile = false,
+  showActions = true,
+}: RunFooterProps) {
+  return (
+    <div className="mt-2">
+      <AiMessageFooter
+        provider={msg.provider || provider}
+        providerNames={providerNames}
+        currentModel={(msg.model ? (modelNames?.[msg.model] ?? msg.model) : '') || modelName || ''}
+        thinkingLevel={msg.thinkingLevel ?? thinkingLevel}
+        dateStr={formatMessageStamp(msg)}
+        durationMs={durationMs ?? msg.durationMs}
+        usage={msg.usage}
+        content={answerText ?? messageAnswerText(msg)}
+        msgId={retryTargetId || msg.id}
+        onRetry={onRetry}
+        onNewChat={onNewChat}
+        isMobile={isMobile}
+        showActions={showActions}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/SessionSkeleton.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'preact/hooks';
+
+/**
+ * Full-panel placeholder shown while a session's committed history is being
+ * fetched — the timeline container paints before /api/chat/:id resolves, and
+ * on a phone the fetch+parse of a large session is easily hundreds of
+ * milliseconds. Covers the whole chat timeline panel (message body + composer
+ * area) identically on desktop and mobile, so switching sessions never shows
+ * a half-drawn view. Neutral paper-shaped rows; no spinners, no layout shift
+ * once the real rows replace it.
+ */
+
+interface SkeletonRow {
+  role: 'user' | 'ai';
+  width: string;
+  lines: number;
+}
+
+const SKELETON_ROWS: SkeletonRow[] = [
+  { role: 'user', width: '58%', lines: 1 },
+  { role: 'ai', width: '100%', lines: 3 },
+  { role: 'user', width: '40%', lines: 1 },
+  { role: 'ai', width: '92%', lines: 2 },
+  { role: 'user', width: '52%', lines: 2 },
+  { role: 'ai', width: '100%', lines: 4 },
+];
+
+function SkeletonBubble({ row, index }: { row: SkeletonRow; index: number }) {
+  return (
+    <div className={`flex ${row.role === 'user' ? 'justify-end' : 'justify-start'} mb-3`}>
+      <div
+        className="rounded-lg bg-ink/5 border border-ink/5 px-3 py-2 space-y-1.5"
+        style={{ width: row.width, maxWidth: '85%' }}
+      >
+        {Array.from({ length: row.lines }, (_, l) => (
+          <div
+            key={l}
+            className="h-2.5 rounded bg-ink/8 animate-pulse"
+            style={{ width: l === row.lines - 1 ? '62%' : '100%', animationDelay: `${index * 120 + l * 60}ms` }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function SessionSkeleton() {
+  const rows = useMemo(() => SKELETON_ROWS, []);
+
+  return (
+    <div aria-hidden className="flex flex-col h-full min-h-0 overflow-hidden">
+      {/* Timeline body — mirrors the real container's padding in both variants. */}
+      <div className="flex-1 min-h-0 overflow-hidden px-3 py-3 pb-8 sm:p-4 sm:pb-10">
+        <div className="mx-auto w-full max-w-[970px]">
+          {rows.map((row, i) => (
+            <SkeletonBubble key={i} row={row} index={i} />
+          ))}
+        </div>
+      </div>
+
+      {/* Composer area — skeleton chat input, mirrors the real footer padding. */}
+      <div className="flex-shrink-0 px-3 pt-1 pb-3 sm:p-4 sm:pt-1">
+        <div className="mx-auto w-full max-w-[970px]">
+          <div className="rounded-md border border-ink/20 bg-paper p-3 space-y-2">
+            <div className="h-9 rounded bg-ink/8 animate-pulse" style={{ animationDelay: '720ms' }} />
+            <div className="flex items-center justify-between">
+              <div className="h-5 w-28 rounded bg-ink/8 animate-pulse" style={{ animationDelay: '840ms' }} />
+              <div className="h-7 w-7 rounded bg-ink/8 animate-pulse" style={{ animationDelay: '960ms' }} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Slim inline indicator above the timeline while an older history window is
+ *  being fetched (scroll-to-top paging). */
+export function LoadingOlderIndicator() {
+  return (
+    <div className="flex justify-center py-2" role="status">
+      <div className="flex items-center gap-1.5 text-ink/40 text-[11px] font-mono">
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-ink/30 animate-pulse" />
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-ink/30 animate-pulse" style={{ animationDelay: '150ms' }} />
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-ink/30 animate-pulse" style={{ animationDelay: '300ms' }} />
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/SubagentControls.tsx

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Control strip for ONE running subagent: a steer box and a stop button.
+ *
+ * Subagents are not read-only any more. omp exposes `steer_subagent` (send the
+ * agent a message as its user) and `cancel_subagent` (hard-kill it) on RPC, and
+ * both act on the session's live child — so the strip renders only while the
+ * subagent is running, and a session the server does not manage answers 409.
+ *
+ * The two actions are deliberately asymmetric in feedback: a cancelled subagent
+ * disappears from the roster on the next lifecycle frame, while a steer is
+ * acknowledged in place, so only the steer needs an inline confirmation.
+ */
+
+import { useState } from 'preact/hooks';
+import { Send, Square } from 'lucide-preact';
+import { cancelSubagent, steerSubagent } from '@/shared/lib/omp/subagent/control';
+
+interface SubagentControlsProps {
+  sessionId: string;
+  subagentId: string;
+  /** Renders the full strip only while the subagent runs. */
+  running: boolean;
+  className?: string;
+}
+
+export function SubagentControls({ sessionId, subagentId, running, className = '' }: SubagentControlsProps) {
+  const [draft, setDraft] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [note, setNote] = useState<string | null>(null);
+
+  if (!running) return null;
+
+  const submitSteer = async () => {
+    const message = draft.trim();
+    if (!message || busy) return;
+    setBusy(true);
+    const ok = await steerSubagent(sessionId, subagentId, message);
+    setBusy(false);
+    if (ok) {
+      setDraft('');
+      setNote('Sent to the subagent');
+    } else {
+      // A refusal has to SAY so: the draft stays so the user can retry.
+      setNote('The subagent did not accept the message');
+    }
+    setTimeout(() => setNote(null), 4000);
+  };
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <input
+        type="text"
+        value={draft}
+        disabled={busy}
+        placeholder="Message this subagent…"
+        aria-label="Message this subagent"
+        onInput={(e) => setDraft(e.currentTarget.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            void submitSteer();
+          }
+        }}
+        className="flex-1 min-w-0 rounded-md border border-ink/15 bg-paper px-2 py-1.5 text-[11.5px] text-ink outline-none focus:border-ink/35 disabled:opacity-50"
+      />
+      <button
+        type="button"
+        onClick={() => void submitSteer()}
+        disabled={busy || !draft.trim()}
+        title="Send to subagent"
+        aria-label="Send to subagent"
+        className="flex items-center justify-center w-7 h-7 rounded-md border border-ink/15 text-ink/70 hover:text-ink hover:bg-ink/5 disabled:opacity-40 disabled:hover:bg-transparent transition-colors shrink-0"
+      >
+        <Send size={12} />
+      </button>
+      <button
+        type="button"
+        onClick={() => void cancelSubagent(sessionId, subagentId)}
+        title="Stop this subagent"
+        aria-label="Stop this subagent"
+        className="flex items-center justify-center w-7 h-7 rounded-md border border-ink/15 text-ink/70 hover:text-error hover:border-error/40 hover:bg-error/5 transition-colors shrink-0"
+      >
+        <Square size={11} />
+      </button>
+      {note && <span className="shrink-0 text-[10.5px] text-ink/55">{note}</span>}
+    </div>
+  );
+}