@kabmo-labs/kabmo 0.3.1 → 0.5.0

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

@@ -5,7 +5,7 @@ import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
 import type { Attachment } from '@/shared/types';
 import type { UserTurnRef } from '@/shared/types/chat';
 import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
-import { EmptyWorkspacePrompt } from '@/client/components/workspace/chat-timeline/EmptyWorkspacePrompt';
+import { PendingChatView } from '@/client/components/workspace/chat-timeline/PendingChatView';
 import { SessionSkeleton } from '@/client/components/workspace/chat-timeline/SessionSkeleton';
 import { SubagentView } from '@/client/components/workspace/chat-timeline/SubagentView';
 import { TimelineBody } from '@/client/components/workspace/chat-timeline/TimelineBody';
@@ -15,12 +15,14 @@ import { useSessionTitle } from '@/client/hooks/chat/timeline/session-title';
 import { useSubagentView } from '@/client/hooks/chat/timeline/subagent-view';
 import { useUndoConfirmation } from '@/client/hooks/chat/timeline/undo-confirmation';
 import { useModelNames } from '@/client/hooks/models/use-model-names';
+import { useRunIdentity } from '@/client/hooks/chat/timeline/run-identity';
 import { useProviderNames } from '@/client/hooks/models/use-provider-names';
 import { useToasts } from '@/client/hooks/ui/toasts';
 import { ChatOverlays } from '@/client/components/workspace/chat-timeline/ChatOverlays';
 import { ToastStack } from '@/client/components/common/ToastStack';
 import { composerRootFor } from '@/shared/lib/workspace/active-project';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+import { useHeldWait } from '@/client/hooks/chat/waiting/held';
 
 interface ChatTimelineProps {
   className?: string;
@@ -36,7 +38,7 @@ interface ChatTimelineProps {
 }
 
 export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle, variant = 'desktop' }: ChatTimelineProps) {
-  const { folders, streamStatusMap } = useSidebarData();
+  const { folders, streamStatusMap, titleHint } = useSidebarData();
   const isMobile = variant === 'mobile';
   const { toasts, pushToast, dismissToast } = useToasts();
   const {
@@ -82,6 +84,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     planReview,
     composerModelRef,
     deferredComposerPickRef,
+    waitingDependency,
     extensionDialogs,
     resolveExtensionDialog,
     respondToExtensionUi,
@@ -151,24 +154,14 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
 
   const modelNames = useModelNames();
   const providerNames = useProviderNames();
-  // The run's model is persisted beside the stream status and rides the sidebar
-  // payload, so the indicator names the real provider/model even for a run this
-  // page never started — the transcript is the fallback, not the source.
-  const runModel = useMemo(
-    () => folders.flatMap((f) => f.sessions ?? []).find((s) => String(s.id) === String(sessionId))?.runModel ?? null,
-    [folders, sessionId],
-  );
-  const fallbackModel = typeof sessionData?.model === 'object' ? sessionData.model : null;
-  const sessionProvider = runModel?.provider ?? fallbackModel?.provider;
-  const sessionModelId = runModel?.modelId ?? fallbackModel?.modelId;
-  const sessionModelName = sessionModelId
-    ? (modelNames[sessionModelId] ?? sessionModelId)
-    : (typeof sessionData?.model === 'string' ? sessionData.model : undefined);
+  const { sessionProvider, sessionModelName } = useRunIdentity({ folders, sessionId, sessionData, modelNames });
 
   // A pending "new-…" session has no messages yet, so the workspace picker
   // must stay available until the first chat is sent (which spawns the real
   // omp session). Never lock the user into a folder before sending.
   const isPendingSession = Boolean(sessionId?.startsWith('new-'));
+
+  const { heldWait, cancelHeldWait } = useHeldWait(sessionId, isPendingSession, pushToast);
   const composerRoot = composerRootFor(folders, sessionId, selectedFolderId);
 
   // The chat-level "a run is in flight" flag is computed in `useChatTimeline`
@@ -184,7 +177,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
 
   if (!sessionId || isPendingSession) {
     return (
-      <EmptyWorkspacePrompt
+      <PendingChatView
         className={className}
         folders={folders}
         selectedFolderId={selectedFolderId}
@@ -216,6 +209,12 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
         onUndo={handleRequestUndo}
         onRetry={handleRetry}
         onNewChat={handleNewChat}
+        streamStatusMap={streamStatusMap}
+        titleForSession={titleHint}
+        waitingFor={waitingDependency.value}
+        onWaitingForChange={waitingDependency.set}
+        heldWait={heldWait ? { title: heldWait.dependsOnTitle } : null}
+        onCancelWait={cancelHeldWait}
       />
     );
   }

package/src/client/components/workspace/editor/PluginRail.tsx

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor column's switcher: files, or one of the plugins that took the
+ * column over.
+ *
+ * The `panel` slot is a TAKEOVER — the plugin draws the whole column, with no tab
+ * strip, no file tree and no chrome — so a file tab cannot represent it and the
+ * tab strip cannot switch to it. This narrow strip is that switch, and it is why
+ * the slot is reachable at all: until it existed the slot was registered and
+ * never rendered (`activeEditorPanelKey` was a hard-coded `null`), so a plugin
+ * like `session-info` shipped a Scratchpad nobody could open.
+ *
+ * Two rules:
+ *
+ * - **Nothing is drawn when no plugin contributes a `panel`.** A rail with one
+ *   button would be a control that only ever says "you are already here", so a
+ *   Kabmo with no such plugin looks exactly as it did before the slot.
+ * - **Files is the first entry and always present**, because the takeover has to
+ *   be reversible: without it a plugin that owns the column would leave no way
+ *   back to the editor.
+ */
+
+import { Files } from 'lucide-preact';
+import { PluginMark } from '@/client/components/settings/categories/panel-plugins/PluginMark';
+import type { ResolvedPluginPanel } from '@/client/components/workspace/plugin-panel/resolve';
+
+interface EditorPluginRailProps {
+  /** The `plugin:<id>` whose panel owns the column, or null for the files view. */
+  activeKey: string | null;
+  onSelect: (panelKey: string | null) => void;
+  plugins: readonly ResolvedPluginPanel[];
+}
+
+export function EditorPluginRail({ activeKey, onSelect, plugins }: EditorPluginRailProps) {
+  if (plugins.length === 0) return null;
+
+  const entryClass = (active: boolean) =>
+    `relative w-full h-9 flex items-center justify-center transition-colors border-l-2 ${
+      active ? 'text-ink border-ink bg-ink/5' : 'text-ink/40 border-transparent hover:text-ink hover:bg-ink/5'
+    } cursor-pointer`;
+
+  return (
+    <nav
+      aria-label="Editor panel views"
+      className="w-9 flex-shrink-0 border-r border-ink/10 bg-paper flex flex-col items-center py-2 space-y-1 z-10"
+    >
+      <button
+        type="button"
+        className={entryClass(activeKey === null)}
+        onClick={() => onSelect(null)}
+        title="Files"
+        aria-label="Files"
+        aria-pressed={activeKey === null}
+      >
+        <Files size={16} />
+      </button>
+      {plugins.map((plugin) => {
+        const active = activeKey === plugin.panelKey;
+        return (
+          <button
+            key={plugin.panelKey}
+            type="button"
+            className={entryClass(active)}
+            onClick={() => onSelect(plugin.panelKey)}
+            title={plugin.title}
+            aria-label={plugin.title}
+            aria-pressed={active}
+          >
+            <PluginMark name={plugin.name} iconUrl={plugin.iconUrl} size={16} />
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

package/src/client/components/workspace/editor/index.tsx

@@ -271,6 +271,7 @@ export function Editor({
     );
   }
 
+
   if (openedFiles.length === 0) {
     return (
       <div className={`flex flex-col h-full bg-canvas items-center justify-center text-ink/40 ${className}`}>

package/src/client/components/workspace/editor/plugin-rail.test.tsx

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor column's plugin slot (`app.panel`).
+ *
+ * The slot was registered and NEVER rendered: `WorkspacePanels` passed
+ * `activeEditorPanelKey={null}` hard-coded and no call site ever wrote it, so a
+ * plugin that shipped two panels — `marketplace/plugins/session-info` registers a
+ * `rightPanel` and a `panel` — had exactly one of them reachable. These cases pin
+ * the two halves that make it reachable: a rail that can switch to it, and a
+ * column that stays open for it with no file behind it.
+ *
+ * The rail is a plain component, so it is asserted directly. The open/closed
+ * decision belongs to the layout and is asserted through `showEditor`'s own rule
+ * (`openedFiles.length > 0 || an editor plugin is chosen`), which this file
+ * reproduces rather than mounts the whole desktop for.
+ */
+
+import { 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 { EditorPluginRail } from '@/client/components/workspace/editor/PluginRail';
+import type { ResolvedPluginPanel } from '@/client/components/workspace/plugin-panel/resolve';
+import { installDomGlobals } from '@/test-support/pristine-globals';
+
+let container: HTMLElement | null = null;
+
+// Installed per CASE: another suite's teardown can strip `window` mid-file when
+// the runner interleaves files, and this hook's first render would then throw.
+beforeEach(() => {
+  installDomGlobals(new Window({ url: 'http://127.0.0.1:1' }));
+});
+
+function panel(pluginId: string, title: string): ResolvedPluginPanel {
+  return {
+    panelKey: `plugin:${pluginId}`,
+    pluginId,
+    name: pluginId,
+    title,
+    Component: () => null,
+  };
+}
+
+async function mountRail(props: {
+  activeKey: string | null;
+  plugins: ResolvedPluginPanel[];
+  onSelect?: (key: string | null) => void;
+}) {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  container = host;
+  await act(async () => {
+    render(
+      h(EditorPluginRail, {
+        activeKey: props.activeKey,
+        onSelect: props.onSelect ?? (() => {}),
+        plugins: props.plugins,
+      }),
+      host,
+    );
+  });
+}
+
+const buttons = () =>
+  [...(container?.querySelectorAll('nav[aria-label="Editor panel views"] button') ?? [])].map((el) => ({
+    label: el.getAttribute('aria-label'),
+    pressed: el.getAttribute('aria-pressed'),
+  }));
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+    container = null;
+  }
+});
+
+describe('editor plugin rail', () => {
+  test('draws nothing when no plugin took the column over', async () => {
+    await mountRail({ activeKey: null, plugins: [] });
+    // A rail with only "Files" would be a control that never changes anything,
+    // so a Kabmo without such a plugin looks exactly as it did.
+    expect(container!.querySelector('nav')).toBeNull();
+  });
+
+  test('offers Files and every takeover, with the active one pressed', async () => {
+    await mountRail({ activeKey: 'plugin:session-info', plugins: [panel('session-info', 'Scratchpad')] });
+    expect(buttons()).toEqual([
+      { label: 'Files', pressed: 'false' },
+      { label: 'Scratchpad', pressed: 'true' },
+    ]);
+  });
+
+  test('Files is always an entry, so a takeover is reversible', async () => {
+    const selected: (string | null)[] = [];
+    await mountRail({
+      activeKey: 'plugin:demo',
+      plugins: [panel('demo', 'Demo')],
+      onSelect: (key) => selected.push(key),
+    });
+    const files = [...container!.querySelectorAll('nav button')].find(
+      (el) => el.getAttribute('aria-label') === 'Files',
+    ) as HTMLButtonElement;
+    await act(async () => files.click());
+    // `null`, not a sentinel: the layout's own state spells "no plugin" that way.
+    expect(selected).toEqual([null]);
+  });
+
+  test('choosing a takeover reports its panel key', async () => {
+    const selected: (string | null)[] = [];
+    await mountRail({
+      activeKey: null,
+      plugins: [panel('demo', 'Demo')],
+      onSelect: (key) => selected.push(key),
+    });
+    const takeover = [...container!.querySelectorAll('nav button')].find(
+      (el) => el.getAttribute('aria-label') === 'Demo',
+    ) as HTMLButtonElement;
+    await act(async () => takeover.click());
+    expect(selected).toEqual(['plugin:demo']);
+  });
+});

package/src/client/components/workspace/model-dropdown/groups.test.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The picker's derived grouping, with the row shapes that have actually arrived.
+ *
+ * The case that matters is a model entry with NO provider. `/api/models` is a
+ * projection of omp's registry, and a partial entry (a custom provider whose
+ * field never landed) reached `buildPickerGroups` as `undefined` and threw
+ * `model.provider.toUpperCase` — which took the whole composer down, because
+ * the model pill renders inside `ChatInput`. Measured: eight `compact composer`
+ * cases failed with exactly that stack, in a suite that never mentions models.
+ *
+ * The guard is `String(… ?? 'unknown')`, so the row stays visible under a
+ * stable section instead of vanishing from a list the user may have selected.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { buildPickerGroups } from '@/client/components/workspace/model-dropdown/groups';
+import type { AIModelOption } from '@/shared/types';
+
+function model(overrides: Partial<AIModelOption> & { id: string }): AIModelOption {
+  return { name: overrides.id, provider: 'p', ...overrides } as AIModelOption;
+}
+
+describe('buildPickerGroups', () => {
+  test('a row with no provider does not throw, and keeps its section', () => {
+    const rows = [model({ id: 'a' }), { id: 'b', name: 'B' } as AIModelOption];
+    const groups = buildPickerGroups(rows, '', {}, [], []);
+    expect(Object.keys(groups.byProvider).sort()).toEqual(['P', 'UNKNOWN']);
+    expect(groups.byProvider.UNKNOWN?.map((m) => m.id)).toEqual(['b']);
+    // It is still a row the user can see and pick.
+    expect(groups.visibleFlatList.map((m) => m.id).sort()).toEqual(['a', 'b']);
+  });
+
+  test('an empty provider string lands in the same section as a missing one', () => {
+    const groups = buildPickerGroups([model({ id: 'a', provider: '' })], '', {}, [], []);
+    expect(Object.keys(groups.byProvider)).toEqual(['UNKNOWN']);
+  });
+
+  test('a search still narrows a guarded row rather than crashing on it', () => {
+    const rows = [model({ id: 'a', name: 'Alpha' }), { id: 'b', name: 'Beta' } as AIModelOption];
+    const groups = buildPickerGroups(rows, 'beta', {}, [], []);
+    expect(groups.filtered.map((m) => m.id)).toEqual(['b']);
+  });
+
+  test('rows group by upper-cased provider and keep catalog order', () => {
+    const groups = buildPickerGroups(
+      [model({ id: 'a', provider: 'anthropic' }), model({ id: 'b', provider: 'Anthropic' })],
+      '',
+      {},
+      [],
+      [],
+    );
+    expect(Object.keys(groups.byProvider)).toEqual(['ANTHROPIC']);
+    expect(groups.byProvider.ANTHROPIC?.map((m) => m.id)).toEqual(['a', 'b']);
+  });
+});

package/src/client/components/workspace/model-dropdown/groups.ts

@@ -75,7 +75,13 @@ export function buildPickerGroups(
 
   const byProvider: Record<string, AIModelOption[]> = {};
   for (const model of filtered) {
-    const provider = model.provider.toUpperCase();
+    // `String(…)` rather than a bare call: this is the composer's picker, and a
+    // row whose provider never landed must not take the chat input down. Rows
+    // that reach here from `/api/models` are normalized in `toOption`; this is
+    // the guard for every other caller (a plugin panel, a stored snapshot).
+    // An EMPTY string is the same problem as a missing one — it would render a
+    // heading with no name — so both land in `unknown`.
+    const provider = String(model.provider || 'unknown').toUpperCase();
     (byProvider[provider] ??= []).push(model);
   }
 

package/src/client/components/workspace/model-dropdown/index.tsx

@@ -239,10 +239,10 @@ export function ModelDropdown({
                 />
               )}
             </span>
-            <span className="flex items-center space-x-1 min-w-0 max-w-[280px]">
-              <span className="text-ink/50 font-normal truncate">{selectedModel.provider}</span>
+            <span className="flex items-center space-x-1 min-w-0">
+              <span className="shrink-0 text-ink/50 font-normal">{selectedModel.provider}</span>
               <span className="text-ink/30 flex-shrink-0">•</span>
-              <span className="truncate">{selectedModel.name}</span>
+              <span className="min-w-0 flex-1 truncate">{selectedModel.name}</span>
             </span>
           </>
         ) : (

package/src/client/components/workspace/model-dropdown/trigger.test.ts

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer trigger's provider/model label.
+ *
+ * The trigger showed `kenari • Deepseek-V4-1-Flash` as `kena… • Deepse…` on a
+ * 412px phone with 64px of unused room beside it. Two hardcoded caps were the
+ * cause, and neither could see the space it was sitting in:
+ *
+ * - the WRAPPER carried `max-w-[58%]` on the phone, a share of the toolbar
+ *   that ignores the four controls to its right;
+ * - the LABEL carried `max-w-[280px]`, a fixed budget that has nothing to do
+ *   with the panel width (the chat column is 320px wide on a 1440px screen).
+ *
+ * Measured before/after at a 412px viewport: the label went 117px → 210px
+ * available and the model name 80px → 110px, with the toolbar reporting no
+ * overflow and the action strip still ending 12px inside its own edge.
+ *
+ * The rule this file pins is the one that has to hold at EVERY width: the
+ * model name is the only thing that gives up width. The provider is an
+ * identity ("kenari" and "kenari-jatis" are different accounts), so shrinking
+ * it first made two accounts render as the same `kena…`.
+ */
+
+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 { ModelDropdown } from '@/client/components/workspace/model-dropdown/index';
+import type { AIModelOption } from '@/shared/types';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+import { restoreRealtime, silenceRealtime } from '@/test-support/silent-socket';
+
+const MODEL: AIModelOption = {
+  id: 'deepseek-v4-1-flash',
+  name: 'Deepseek-V4-1-Flash',
+  provider: 'kenari',
+};
+
+let container: HTMLElement;
+
+beforeEach(() => {
+  installDomGlobals(new Window());
+  // The picker reads the `models` topic on mount, and this window has no origin
+  // (`about:blank`), so a real dial would target `ws:///api/realtime/ws` and
+  // fail asynchronously — after this suite has restored the globals, which
+  // reports as an unhandled error in the NEXT file. The channel is not what this
+  // file measures.
+  silenceRealtime();
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+  restoreRealtime();
+  restoreDomGlobals();
+});
+
+afterAll(() => restoreDomGlobals());
+
+function mount(className: string, model: AIModelOption = MODEL): HTMLElement {
+  act(() => {
+    render(h(ModelDropdown, { selectedModel: model, className }), container);
+  });
+  return container;
+}
+
+/** The trigger button is the only one carrying the provider • model title. */
+function trigger(el: HTMLElement): HTMLButtonElement {
+  const button = el.querySelector('button[title]') as HTMLButtonElement | null;
+  if (!button) throw new Error('model trigger button not found');
+  return button;
+}
+
+function labelParts(el: HTMLElement): { provider: HTMLElement; separator: HTMLElement; model: HTMLElement } {
+  const provider = el.querySelector('button[title] > span > span') as HTMLElement | null;
+  const separator = provider?.nextElementSibling as HTMLElement | null;
+  const model = separator?.nextElementSibling as HTMLElement | null;
+  if (!provider || !separator || !model) throw new Error('label parts not found');
+  return { provider, separator, model };
+}
+
+describe('composer model trigger label', () => {
+  test('grows to its content instead of a fixed px budget', () => {
+    // `max-w-[280px]` is what truncated a 216px model name inside a 968px
+    // toolbar; the cap has to come from the flex parent, not from a constant.
+    const { provider, model } = labelParts(mount('min-w-0'));
+    const label = provider.parentElement!;
+
+    expect(label.className).not.toContain('max-w-');
+    expect(provider.className).not.toContain('truncate');
+    expect(model.className).toContain('truncate');
+  });
+
+  test('keeps the provider at its natural width and lets the model shrink', () => {
+    // Two accounts (`kenari` / `kenari-jatis`) render identically once the
+    // provider truncates, which is why it must not be a shrink target.
+    const { provider, separator, model } = labelParts(mount('min-w-0'));
+
+    expect(provider.className).toContain('shrink-0');
+    expect(separator.className).toContain('shrink-0');
+    expect(model.className).toContain('flex-1');
+    expect(model.className).toContain('min-w-0');
+  });
+
+  test('the trigger itself may shrink on every layout', () => {
+    // The phone-only `max-w-[58%]` made the trigger a property of the layout
+    // rather than of the room beside it: a 479px viewport left 64px unused.
+    const button = trigger(mount('min-w-0'));
+    expect(button.className).toContain('min-w-0');
+    expect(button.className).not.toContain('max-w-[58%]');
+  });
+
+  test('names both halves in the title, so an ellipsis never hides the identity', () => {
+    const button = trigger(mount('min-w-0'));
+    expect(button.title).toBe('kenari • Deepseek-V4-1-Flash');
+  });
+});

package/src/client/components/workspace/model-dropdown/use-catalog.ts

@@ -12,8 +12,14 @@ function toOption(m: ModelEntry): AIModelOption {
   const cost = m.cost;
   return {
     id: m.id,
-    name: m.name,
-    provider: m.provider,
+    name: m.name || m.id,
+    // A row without a provider still has to render. `/api/models` is read from
+    // omp's registry, and a partial entry (a custom provider whose `provider`
+    // field never landed) used to crash the whole picker — `buildPickerGroups`
+    // upper-cased `undefined` and the composer's model pill took the chat input
+    // down with it. `unknown` keeps the row visible and gives it a stable
+    // section instead of dropping a model the user may have selected.
+    provider: m.provider || 'unknown',
     contextWindow: m.contextWindow,
     thinkingLevel: ladder[0] ?? 'off',
     thinkingLevels: ladder,

package/src/client/components/workspace/panels/builtin.tsx

@@ -22,6 +22,7 @@ import {
   RIGHT_PANEL_TYPES,
   type RightPanelType,
 } from '@/shared/lib/workspace/right-panels';
+import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
 
 /**
  * Props a panel BODY may receive.
@@ -51,6 +52,13 @@ export interface PanelBodyProps {
   onClose?: () => void;
   /** The phone's drawer hides a view's own header; the desktop stack does not. */
   showHeader?: boolean;
+  /**
+   * The boot settings snapshot, for the views that read it (the session list
+   * passes it to its own Settings modal and to the prewarm's access mode).
+   */
+  appSettings?: Record<string, any>;
+  /** The live agent stream status, for the session list's wordmark badge. */
+  streamStatus?: AgentStreamStatus;
 }
 
 /**