@kabmo-labs/kabmo 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kabmo-labs/kabmo",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Web console and diagnostic workbench for AI coding agents — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/client/components/common/batch-selection/BatchActionBar.tsx

@@ -35,6 +35,12 @@ export interface BatchActionBarProps {
   onUnselectAll: () => void;
   onDelete: () => void;
   onCancel: () => void;
+  /**
+   * The bar sits in the phone drawer, whose list and toolbar are both `p-3`.
+   * The desktop sidebar's list is `p-2`, so its bar keeps the tighter inset —
+   * one shared value would leave the phone's bar 2px inside the rows it counts.
+   */
+  drawer?: boolean;
 }
 
 export function BatchActionBar({
@@ -47,6 +53,7 @@ export function BatchActionBar({
   onUnselectAll,
   onDelete,
   onCancel,
+  drawer = false,
 }: BatchActionBarProps) {
   const noun = mode === 'workspace' ? 'workspace' : 'session';
   const plural = count === 1 ? noun : `${noun}s`;
@@ -55,7 +62,7 @@ export function BatchActionBar({
   return (
     <div
       data-testid="batch-action-bar"
-      className="border-t border-ink/15 bg-paper px-2.5 py-2 flex flex-col gap-1.5 flex-shrink-0"
+      className={`border-t border-ink/15 bg-paper ${drawer ? 'px-3' : 'px-2.5'} py-2 flex flex-col gap-1.5 flex-shrink-0`}
     >
       <div className="flex items-center justify-between gap-2 text-[11px]">
         <span className="min-w-0 truncate text-ink/70">

package/src/client/components/common/session-actions-menu/index.tsx

@@ -28,7 +28,7 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import type { TargetedMouseEvent } from 'preact';
 import { createPortal } from 'preact/compat';
-import { Archive, ArchiveRestore, Pencil, Trash2, WandSparkles } from 'lucide-preact';
+import { Archive, ArchiveRestore, Hourglass, Pencil, Trash2, WandSparkles } from 'lucide-preact';
 
 /** Viewport coordinates the menu hangs off, plus which edge it aligns to. */
 export interface MenuAnchor {
@@ -90,6 +90,13 @@ export interface SessionActionsMenuProps {
   onRenameWithAi?: () => void;
   onArchive?: () => void;
   onDelete?: () => void;
+  /**
+   * Drop this row's held prompt (a `new-…` chat whose prompt is waiting on
+   * another session). Omitted for every other row: a wait is the only state a
+   * pending chat can cancel from here, and offering the item elsewhere would
+   * promise an action with nothing behind it.
+   */
+  onCancelWait?: () => void;
   onClose: () => void;
 }
 
@@ -100,6 +107,7 @@ export function SessionActionsMenu({
   onRenameWithAi,
   onArchive,
   onDelete,
+  onCancelWait,
   onClose,
 }: SessionActionsMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
@@ -188,6 +196,19 @@ export function SessionActionsMenu({
             <span>Rename with AI</span>
           </button>
         )}
+        {/* A held prompt is the row's whole content, so dropping it belongs in
+            the same menu as the row's other verbs rather than on the row face. */}
+        {onCancelWait && (
+          <button
+            type="button"
+            role="menuitem"
+            onClick={run(onCancelWait)}
+            className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center gap-2 transition-colors cursor-pointer"
+          >
+            <Hourglass size={12} className="text-ink/60" />
+            <span>Cancel waiting prompt</span>
+          </button>
+        )}
         {onArchive && (
           <button
             type="button"
@@ -201,7 +222,7 @@ export function SessionActionsMenu({
             <span>{isArchived ? 'Unarchive' : 'Archive'}</span>
           </button>
         )}
-        {(onRename || onRenameWithAi || onArchive) && onDelete && <div className="my-1 border-t border-ink/10" />}
+        {(onRename || onRenameWithAi || onArchive || onCancelWait) && onDelete && <div className="my-1 border-t border-ink/10" />}
         {onDelete && (
           <button
             type="button"

package/src/client/components/layout/{RightActivityBar.test.ts → ActivityBar.test.ts}

@@ -20,7 +20,7 @@ import { afterAll, afterEach, beforeEach, describe, expect, test } from 'bun:tes
 import { Window } from 'happy-dom';
 import { h, render } from 'preact';
 import { act } from 'preact/test-utils';
-import { RightActivityBar } from '@/client/components/layout/RightActivityBar';
+import { ActivityBar } from '@/client/components/layout/ActivityBar';
 import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
 import { useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { primeKabmoSettings, readKabmoSetting, writeSetting } from '@/shared/lib/settings/client';
@@ -110,13 +110,13 @@ async function mount() {
     render(
       h(SessionStateProvider, {
         sessionId: SESSION,
-        children: h('div', null, h(Picker, { repo: '.' }), h(RightActivityBar, {
+        children: h('div', null, h(Picker, { repo: '.' }), h(ActivityBar, {
+          side: 'right',
           activePanel: 'git',
           onChangePanel: () => {},
           isPanelOpen: true,
           hasActiveContext: true,
           activeProjectPath: ROOT,
-          refreshKey: 0,
         })),
       }),
       container,
@@ -129,7 +129,7 @@ async function mount() {
 
 const dot = () => Boolean(container.querySelector('[title="Ada perubahan git"]'));
 
-describe('RightActivityBar git dot', () => {
+describe('ActivityBar git dot', () => {
   test('reports the selected repo, and follows the picker to the root', async () => {
     await mount();
 
@@ -200,7 +200,7 @@ async function dragOnto(from: string, to: string) {
   for (let i = 0; i < 8; i += 1) await act(async () => {});
 }
 
-describe('RightActivityBar panel order', () => {
+describe('ActivityBar panel order', () => {
   test('a drag reorders the bar and persists the new order', async () => {
     primeKabmoSettings({});
     await mount();

package/src/client/components/layout/{RightActivityBar.tsx → ActivityBar.tsx}

@@ -1,20 +1,50 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * An activity bar: the rail of panel buttons, for one column.
+ *
+ * ONE component for both sides. The two rails list different catalogs and sit
+ * on opposite edges, but everything that made the right rail work — a drag that
+ * commits the order once, a right-click menu that keeps a switched-off view
+ * reachable, the Source Control dot — is the same problem on the left. Writing
+ * it twice is how the two headers drifted, and a user switching layouts had to
+ * re-find every control.
+ *
+ * What is per-side is data, not branches:
+ *
+ * - the CATALOG (`usePanelCatalog(side)`), so the left rail draws the session
+ *   list plus whatever the user placed there;
+ * - the ORDER, which the right column stores in `omp_right_panel_order`; the
+ *   left column is ordered by its placement list, so it is drawn as the catalog
+ *   returns it and a drag is not offered there;
+ * - the DOT, which belongs to Source Control and therefore to the right rail.
+ */
+
 import { useRef, useState } from 'preact/hooks';
 import type { TargetedDragEvent, TargetedMouseEvent } from 'preact';
-
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { useResolvedRepo } from '@/client/hooks/workspace/repo-scope';
-import { usePanelCatalog, type ResolvedPanel } from '@/client/components/workspace/plugin-panel/resolve';
+import {
+  usePanelCatalog,
+  type PanelCatalogSide,
+  type ResolvedPanel,
+} from '@/client/components/workspace/plugin-panel/catalog';
 import { usePanelPluginActions, usePanelRegistry } from '@/client/hooks/workspace/panel-registry';
 import { usePanelOrder } from '@/client/hooks/workspace/panel-order';
 import { usePanelReorder } from '@/client/hooks/workspace/panel-reorder';
-import { pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
+import { pluginEnablementKey } from '@/shared/lib/workspace/panel-ids';
 import { PANEL_MARK_SIZE } from '@/shared/lib/workspace/right-panels';
+import { SESSIONS_VIEW_ID, isLeftDockPanelId } from '@/shared/lib/workspace/left-dock';
 import { BUILTIN_PANELS } from '@/client/components/workspace/panels/builtin';
 import { PluginMark } from '@/client/components/settings/categories/panel-plugins/PluginMark';
 import { PanelVisibilityMenu, type PanelVisibilityItem } from '@/client/components/layout/PanelVisibilityMenu';
 
-interface RightActivityBarProps {
-  /** A built-in view id or a plugin panel key (`plugin:<pluginId>`). */
+interface ActivityBarProps {
+  side: PanelCatalogSide;
+  /** A built-in view id, `sessions`, or a plugin panel key (`plugin:<pluginId>`). */
   activePanel: string;
   onChangePanel: (panel: string) => void;
   isPanelOpen: boolean;
@@ -23,39 +53,25 @@ interface RightActivityBarProps {
 }
 
 /**
- * The right developer panel's activity bar.
- *
- * ONE list of buttons: the built-in views and the installed plugins both come
- * from `usePanelCatalog`, so the bar cannot draw one kind from a table and the
- * other from a fetch — and the catalog is what the phone's tab strip and the
- * desktop panel stack read too, so the order here is the only order any of them
- * can draw.
+ * One column's rail.
  *
- * The buttons are DRAGGABLE, and a drop commits the whole order to
- * `app_settings.omp_right_panel_order` (`usePanelOrder` + `usePanelReorder`).
- * The reorder is previewed while the gesture runs and written ONCE at the end.
- *
- * Right-clicking the bar opens the enablement menu — VS Code's own affordance,
- * with its own semantics here: a view that is switched off leaves the bar but
- * stays in that menu with its checkbox off, which is the only place it can be
- * switched back on. EVERY view is switchable, built-in or plugin, because
- * enablement is one set of ids and a built-in view can be put away exactly like
- * an installed one. A switched-off view KEEPS its place in the stored order, so
- * switching it back on returns it where the user put it.
- *
- * A plugin contributes AT MOST ONE right panel, so one plugin can never produce
- * two buttons here.
+ * The left rail is the DOCK's, so its ordering is the placement list and a drag
+ * would have nothing to commit — `draggable` is false there and the reorder hook
+ * is never given a commit. Everything else is shared.
  */
-export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasActiveContext, activeProjectPath }: RightActivityBarProps) {
+export function ActivityBar({ side, activePanel, onChangePanel, isPanelOpen, hasActiveContext, activeProjectPath }: ActivityBarProps) {
   // The dot is the Source Control view's, so it follows the repo that view is
   // on. Reading it through the shared pick (not through a private copy) is what
   // makes this update the moment the panel's picker moves; polling the workspace
-  // root instead showed the wrong repository's changes.
-  const activeRepo = useResolvedRepo(activeProjectPath ?? undefined, hasActiveContext);
-  const { changes } = useGitStatus(activeProjectPath ?? undefined, activeRepo, hasActiveContext);
+  // root instead showed the wrong repository's changes. The left rail has no
+  // Source Control, so it does not poll at all.
+  const wantsGitDot = side !== 'left';
+  const activeRepo = useResolvedRepo(activeProjectPath ?? undefined, wantsGitDot && hasActiveContext);
+  const { changes } = useGitStatus(activeProjectPath ?? undefined, activeRepo, wantsGitDot && hasActiveContext);
   const hasGitChanges = changes.length > 0;
 
-  const catalog = usePanelCatalog();
+  const catalog = usePanelCatalog(side);
+  const reorderable = side !== 'left';
   const { commitReorder } = usePanelOrder();
   const { disabledPanels } = usePanelRegistry();
   const { setEnabled } = usePanelPluginActions();
@@ -71,7 +87,8 @@ export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasA
   // simply not drawn — the id stays in the stored order, so switching the panel
   // back on returns it where it was.
   const byId = new Map(catalog.map((panel) => [panel.id, panel]));
-  const drawn = reorder.order
+  const order = reorderable ? reorder.order : catalogIds;
+  const drawn = order
     .map((id) => byId.get(id))
     .filter((panel): panel is ResolvedPanel => panel !== undefined);
 
@@ -84,13 +101,13 @@ export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasA
   const dividerBefore =
     firstPlugin > 0 && drawn.slice(firstPlugin).every((panel) => !panel.builtin) ? firstPlugin : -1;
 
-  // The menu lists EVERY panel, off or on — a switched-off view must stay
-  // reachable, and this list is the only place it can be switched back on. It
-  // is built from the FULL id list rather than from the catalog, because a
-  // switched-off view is not in the catalog at all. The entry is keyed by the
-  // SAME id the disabled set stores, so the checkbox and the write cannot
+  // The menu lists EVERY panel this rail could draw, off or on — a switched-off
+  // view must stay reachable, and this list is the only place it can be switched
+  // back on. It is built from the FULL id list rather than from the catalog,
+  // because a switched-off view is not in the catalog at all. The entry is keyed
+  // by the SAME id the disabled set stores, so the checkbox and the write cannot
   // address different panels.
-  const allItems = useAllPanelItems();
+  const allItems = useAllPanelItems(side);
 
   const openMenu = (event: TargetedMouseEvent<HTMLElement>) => {
     event.preventDefault();
@@ -108,7 +125,8 @@ export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasA
       <nav
         ref={navRef}
         onContextMenu={openMenu}
-        className="w-11 flex-shrink-0 border-l border-ink/10 bg-paper flex flex-col items-center py-3 space-y-2 z-10"
+        aria-label={side === 'left' ? 'Left panel views' : 'Right panel views'}
+        className={`w-11 flex-shrink-0 ${side === 'left' ? 'border-r' : 'border-l'} border-ink/10 bg-paper flex flex-col items-center py-3 space-y-2 z-10`}
       >
         <div className="flex flex-col items-center space-y-1 w-full">
           {drawn.map((panel, index) => (
@@ -116,8 +134,9 @@ export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasA
               {index === dividerBefore ? <div className="w-6 mx-auto border-t border-ink/10 my-1" /> : null}
               <PanelButton
                 panel={panel}
+                draggable={reorderable}
                 isActive={isPanelOpen && activePanel === panel.id}
-                isDragging={reorder.draggingId === panel.id}
+                isDragging={reorderable && reorder.draggingId === panel.id}
                 onClick={() => onChangePanel(panel.id)}
                 onDragStart={(event) => reorder.onDragStart(event, panel.id)}
                 onDragOver={(event) => reorder.onDragOver(event, panel.id)}
@@ -154,17 +173,29 @@ export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasA
  * static list, so they are always listed; a plugin is listed while it is
  * INSTALLED, read from `plugins` rather than from `panels`, because `panels`
  * holds only the enabled ones and a disabled plugin would lose its row.
+ *
+ * The list is per SIDE: the left rail offering eleven built-in views it cannot
+ * draw would be a menu of controls that do nothing.
  */
-function useAllPanelItems(): PanelVisibilityItem[] {
+function useAllPanelItems(side: PanelCatalogSide): PanelVisibilityItem[] {
   const { plugins } = usePanelRegistry();
-  return [
-    ...BUILTIN_PANELS.map((panel) => ({ id: panel.id, title: panel.title, removable: true })),
-    ...plugins.map((plugin) => ({
-      id: pluginPanelKey(plugin.pluginId),
-      title: plugin.name,
-      removable: true,
-    })),
-  ];
+  const items: PanelVisibilityItem[] = [];
+  if (side !== 'right') {
+    // The session list is the dock's own view and cannot be switched off: it is
+    // the only way back to a conversation.
+    items.push({ id: SESSIONS_VIEW_ID, title: 'Sessions', removable: false });
+  }
+  if (side !== 'left') {
+    for (const panel of BUILTIN_PANELS) items.push({ id: panel.id, title: panel.title, removable: true });
+  }
+  for (const plugin of plugins) {
+    const id = pluginEnablementKey(plugin.pluginId);
+    // A plugin is offered on both rails: its placement decides which one draws
+    // it, and the switch is the same switch on either.
+    if (side === 'left' && !isLeftDockPanelId(id)) continue;
+    items.push({ id, title: plugin.name, removable: true });
+  }
+  return items;
 }
 
 /**
@@ -175,6 +206,7 @@ function useAllPanelItems(): PanelVisibilityItem[] {
  */
 function PanelButton({
   panel,
+  draggable,
   isActive,
   isDragging,
   onClick,
@@ -185,6 +217,7 @@ function PanelButton({
   showGitDot,
 }: {
   panel: ResolvedPanel;
+  draggable: boolean;
   isActive: boolean;
   isDragging: boolean;
   onClick: () => void;
@@ -196,11 +229,13 @@ function PanelButton({
 }) {
   return (
     <button
-      className={`relative w-full h-10 flex items-center justify-center transition-colors border-l-2 ${
+      className={`relative w-full h-10 flex items-center justify-center transition-colors ${
+        panel.side === 'left' ? 'border-r-2' : 'border-l-2'
+      } ${
         isActive ? 'text-ink border-ink bg-ink/5' : 'text-ink/40 border-transparent hover:text-ink hover:bg-ink/5'
       } ${isDragging ? 'opacity-40 cursor-grabbing' : 'cursor-pointer'}`}
       onClick={onClick}
-      draggable
+      draggable={draggable}
       onDragStart={onDragStart}
       onDragOver={onDragOver}
       onDrop={onDrop}
@@ -208,7 +243,7 @@ function PanelButton({
       title={panel.title}
       aria-label={panel.title}
     >
-      {panel.builtin ? panel.icon : <PluginMark name={panel.name} iconUrl={panel.iconUrl} size={PANEL_MARK_SIZE} />}
+      {panel.builtin && panel.icon ? panel.icon : panel.builtin ? <PluginMark name={panel.label} size={PANEL_MARK_SIZE} /> : <PluginMark name={panel.name} iconUrl={panel.iconUrl} size={PANEL_MARK_SIZE} />}
       {showGitDot ? (
         <span
           className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-info"

package/src/client/components/layout/LeftActivityBar.test.ts

@@ -0,0 +1,201 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The LEFT rail: what it draws, and what it refuses to draw.
+ *
+ * Three properties, and each is a bug the right rail's shape would produce if
+ * the left one were a copy of it:
+ *
+ * - **The session list is always on it and cannot be switched off.** It is the
+ *   only way back to a conversation, so the visibility menu lists it as pinned
+ *   rather than offering a switch that would strand the user.
+ * - **The rail draws only what the LEFT column can show.** A menu of eleven
+ *   built-in views it cannot render would be a list of controls that do nothing.
+ * - **A plugin is on exactly one rail.** Its placement decides which, so the
+ *   same panel cannot be two buttons — one of which would draw nothing.
+ *
+ * Rendered with `h()` (no JSX) against happy-dom, through the real session-state
+ * provider: the rail reads placement from the settings snapshot, which is module
+ * state a test has to prime.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { ActivityBar } from '@/client/components/layout/ActivityBar';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
+import { definePluginApp } from '@kabmo-labs/kabmo-sdk/app';
+import { primeKabmoSettings } from '@/shared/lib/settings/client';
+import { registerPluginBundle, resetPluginSlots } from '@/client/lib/plugins/slots';
+import { resetPanelRegistry } from '@/client/hooks/workspace/panel-registry';
+import { LEFT_DOCK_SETTING_KEY } from '@/shared/lib/workspace/left-dock';
+import { resetRealtimeClient } from '@/shared/lib/realtime/client';
+import { TOPIC_PANELS } from '@/shared/lib/realtime/protocol';
+import { startRealtimeTestServer, type RealtimeTestServer } from '@/test-support/realtime-server';
+import {
+  installDomGlobals,
+  pristineWebSocket,
+  restoreDomGlobals,
+} from '@/test-support/pristine-globals';
+import type { TopicResolver } from '@/server/lib/realtime/hub.server';
+
+const SESSION = 'new-left-rail';
+const nativeFetch = Bun.fetch;
+let container: HTMLElement | null = null;
+let server: RealtimeTestServer;
+
+/**
+ * ONE harness per file, started before any case — the rule the helper documents:
+ * the hub, its topics and the listener are process state, so a server started
+ * per test leaves the previous one's socket to report its close into the NEXT
+ * file's globals (`Unhandled error. (ErrorEvent …)`, measured).
+ */
+beforeAll(async () => {
+  // The rail reads the plugin registry, which is a realtime topic — so the test
+  // needs a real channel rather than a stub, the same reason the right rail's
+  // suite starts one.
+  const registry: TopicResolver = async () => ({
+    // `demo` is INSTALLED; whether it draws a button depends on its bundle
+    // having registered a component, which is what the placement case sets up.
+    panels: [{ pluginId: 'demo', name: 'demo', version: '1.0.0', appUrl: '/api/panels/bundle/demo' }],
+    marketplaces: [],
+    errors: [],
+    plugins: [],
+    catalog: [],
+    disabledPanels: [],
+    gitStatus: {},
+    autoUpdate: false,
+    syncBlocked: {},
+  });
+  server = await startRealtimeTestServer(new Map<string, TopicResolver>([[TOPIC_PANELS, registry]]));
+  const target = globalThis as unknown as Record<string, unknown>;
+  target.fetch = async () => new Response('{}', { status: 200, headers: { 'content-type': 'application/json' } });
+});
+
+beforeEach(() => {
+  const win = new Window({ url: `http://127.0.0.1:${server.port}` });
+  installDomGlobals(win);
+  const target = globalThis as unknown as Record<string, unknown>;
+  target.WebSocket = pristineWebSocket;
+  primeKabmoSettings({});
+  resetRealtimeClient();
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  target.fetch = nativeFetch;
+  restoreDomGlobals();
+  server.stop();
+});
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+    container = null;
+  }
+  primeKabmoSettings({});
+  resetRealtimeClient();
+  // The registry store is a `globalThis` slot, so a payload adopted here would
+  // be every later suite's starting state — the right rail would draw this
+  // file's plugin.
+  resetPanelRegistry();
+  resetPluginSlots();
+});
+
+async function mount() {
+  // The registry is a realtime read: the bar draws plugins only once the
+  // payload has been adopted, so the mount waits for the client's own value
+  // rather than for a duration.
+  await server.waitForTopic(TOPIC_PANELS, (value) => value !== null);
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(
+      h(SessionStateProvider, {
+        sessionId: SESSION,
+        children: h(ActivityBar, {
+          side: 'left',
+          activePanel: 'sessions',
+          onChangePanel: () => {},
+          isPanelOpen: true,
+          hasActiveContext: true,
+        }),
+      }),
+      container!,
+    );
+  });
+  await flush();
+}
+
+/**
+ * Let the channel's frames land and the tree re-render.
+ *
+ * The registry arrives over a real socket, so a microtask flush is not enough:
+ * the frame is a macrotask. This yields to the event loop a bounded number of
+ * times rather than sleeping a guessed duration.
+ */
+async function flush(times = 12) {
+  for (let i = 0; i < times; i += 1) {
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 5));
+    });
+  }
+}
+
+const labels = () =>
+  [...(container?.querySelectorAll('nav button[aria-label]') ?? [])].map((el) => el.getAttribute('aria-label') ?? '');
+
+describe('left activity bar', () => {
+  test('draws the session list, and nothing from the right column', async () => {
+    await mount();
+    expect(labels()).toEqual(['Sessions']);
+  });
+
+  test('the sessions row is offered as pinned, not switchable', async () => {
+    await mount();
+    const nav = container!.querySelector('nav') as HTMLElement;
+    await act(async () => {
+      nav.dispatchEvent(new window.Event('contextmenu', { bubbles: true, cancelable: true }));
+    });
+    const menu = document.querySelector('[role="menu"][aria-label="Panel visibility"]');
+    expect(menu).not.toBeNull();
+    const row = [...menu!.querySelectorAll('[role="menuitemcheckbox"]')].find(
+      (el) => el.textContent?.includes('Sessions'),
+    ) as HTMLButtonElement;
+    expect(row).toBeDefined();
+    // Disabled and still checked: the row exists so the menu is complete, and
+    // it says the view cannot be put away rather than pretending a click works.
+    expect(row.disabled).toBe(true);
+    expect(row.getAttribute('aria-checked')).toBe('true');
+    // The built-ins are RIGHT-column views and are not offered here at all.
+    expect(menu!.textContent).not.toContain('Source Control');
+    menu!.parentElement?.remove();
+  });
+
+  test('a placed plugin panel is drawn here and gone from the right rail', async () => {
+    // One bundle, registered the way a loaded plugin registers it, and a
+    // registry that names it — then the placement decides the rail.
+    registerPluginBundle('demo', {
+      default: definePluginApp((app) => app.rightPanel({ id: 'main', title: 'Demo panel', component: () => null })),
+    });
+    // The INSTANCE key (plugin + slot). A bare `plugin:demo` still resolves —
+    // to the right-panel instance — but the dock holds instance keys, so that
+    // is what a placement writes.
+    primeKabmoSettings({ [LEFT_DOCK_SETTING_KEY]: { enabled: true, panels: ['plugin:demo:rightPanel'] } });
+    await mount();
+    expect(labels()).toEqual(['Sessions', 'Demo panel — demo']);
+
+    // The same plugin on the RIGHT: the left rail loses the button, because a
+    // panel is on one rail at a time.
+    primeKabmoSettings({ [LEFT_DOCK_SETTING_KEY]: { enabled: true, panels: [] } });
+    render(null, container!);
+    container = null;
+    await mount();
+    expect(labels()).toEqual(['Sessions']);
+  });
+});