@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

package/src/client/components/layout/session-sidebar/CategoryItem.tsx

@@ -0,0 +1,316 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { ChevronDown, ChevronRight, ChevronUp, MoreHorizontal, Pin, Plus } from 'lucide-preact';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { useFetcher } from '@/client/lib/router/fetcher';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { useShowMore } from '@/client/hooks/ui/show-more';
+import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
+import { useSessionDelete } from '@/client/hooks/workspace/session-delete';
+import { SessionDeleteModal } from '@/client/components/common/session-delete-modal';
+import { SessionItem } from '@/client/components/layout/session-sidebar/SessionItem';
+import { SubagentList } from '@/client/components/common/subagent-list';
+import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
+import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
+import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
+import { selectVisibleSessions } from '@/shared/lib/workspace/session-visibility';
+import { relativeTimeAgo } from '@/shared/lib/workspace/relative-time';
+import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+
+export { SessionItem };
+
+export function Category({ 
+  folder, 
+  activeSessionId, 
+  onSelectSession,
+  onNewSessionForFolder,
+  forceExpanded = false,
+  showArchived = false,
+  sessionStatus = {},
+  onToast,
+}: { 
+  folder: any;
+  activeSessionId: number | string | null;
+  onSelectSession: (id: number | string) => void;
+  onNewSessionForFolder: (id: number) => void;
+  forceExpanded?: boolean;
+  showArchived?: boolean;
+  sessionStatus?: Record<string, 'stream' | 'finish' | 'abort'>;
+  onToast?: (message: string, type?: 'success' | 'error') => void;
+}) {
+  const [isOpen, setIsOpen] = useState(folder.isExpanded || false);
+  const [showMenu, setShowMenu] = useState(false);
+  const { visibleCount, showMore, showLess, canShowLess } = useShowMore();
+  const [searchParams] = useSearchParams();
+  const urlSubagentId = searchParams.get('subagent');
+  const urlSessionId = searchParams.get('sessionId');
+
+  // Roster expansion is shared with the mobile drawer: one persisted set, so a
+  // row expanded on the phone is expanded here too.
+  const { expandedSessionIds, toggleSession } = useExpandedSessions();
+
+  useEffect(() => {
+    if (typeof folder.isExpanded === 'boolean') setIsOpen(folder.isExpanded);
+  }, [folder.isExpanded]);
+  
+  const menuRef = useRef<HTMLDivElement>(null);
+  const { refresh } = useSidebarData();
+  const toggleFetcher = useFetcher<{ success?: boolean }>();
+  const {
+    confirmDelete,
+    requestDelete,
+    cancelDelete,
+    handlePin,
+    handleDelete,
+    handleArchive,
+    handleRename,
+    handleRenameWithAi,
+    handleOpenFolder,
+  } = useWorkspaceFolderActions(folder, refresh, onToast);
+  const sessionDelete = useSessionDelete();
+
+  useOnClickOutside(menuRef, () => {
+    setShowMenu(false);
+    cancelDelete();
+  });
+
+  const allSessions = folder.sessions;
+  const ProjectIcon = getProjectIcon(folder.icon);
+
+  const toggleFolder = () => {
+    const nextState = !isOpen;
+    setIsOpen(nextState);
+    if (typeof folder.id !== 'number') {
+      return;
+    }
+    toggleFetcher.submit(
+      { isExpanded: String(nextState) },
+      { method: 'POST', action: `/api/folders/${folder.id}/toggle` }
+    );
+  };
+
+  const handleToggleSessionExpand = (sessionId: string) => {
+    toggleSession(sessionId);
+  };
+
+  const onPin = () => {
+    handlePin();
+    setShowMenu(false);
+  };
+
+  const onDelete = () => {
+    handleDelete();
+    setShowMenu(false);
+  };
+
+  // Reveal is an action like Pin or Delete, so the menu closes on it — leaving
+  // it standing would hide the header the toast is describing.
+  const onOpenFolder = handleOpenFolder
+    ? () => {
+        handleOpenFolder();
+        setShowMenu(false);
+      }
+    : undefined;
+
+  const isActuallyOpen = forceExpanded || isOpen;
+
+  const visibleSessions = (allSessions || []).filter((s: any) =>
+    showArchived ? s.is_archived === 1 : s.is_archived !== 1
+  );
+
+  // The opened session and every live run are exempt from the window, so a
+  // session being watched is never one of the hidden rows.
+  const { rendered: renderedSessions, hiddenCount } = selectVisibleSessions(
+    visibleSessions,
+    visibleCount,
+    { activeSessionId, sessionStatus },
+  );
+  const hasMore = hiddenCount > 0;
+
+  return (
+    <div className="space-y-1">
+      {/* Folder Header */}
+      <div 
+        className="group flex items-center justify-between h-7 text-xs font-semibold text-ink px-2 hover:bg-ink/5 rounded-md transition-colors select-none"
+      >
+        <div className="flex-1 h-full flex items-center cursor-pointer min-w-0" onClick={toggleFolder}>
+          {/* One 16px slot owns both glyphs, exactly like a session row's
+              status/chevron slot: the folder mark sits there at rest and hands
+              the slot to the disclosure chevron on hover, so the icon column
+              reads as one line AND the header says what clicking it does. */}
+          <span className="relative w-4 h-4 flex items-center justify-center shrink-0">
+            <span className="absolute inset-0 flex items-center justify-center transition-opacity group-hover:opacity-0 touch-hidden">
+              {folder.customIconUrl ? (
+                <img
+                  src={folder.customIconUrl}
+                  alt=""
+                  className="w-[15px] h-[15px] rounded-xs object-contain shrink-0"
+                  referrerPolicy="no-referrer"
+                />
+              ) : (
+                <ProjectIcon
+                  size={15}
+                  className="text-ink/75"
+                  style={{ color: folder.accentColor || undefined }}
+                />
+              )}
+            </span>
+            <span className="absolute inset-0 flex items-center justify-center text-ink/60 opacity-0 transition-opacity group-hover:opacity-100 touch-visible">
+              {isActuallyOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+            </span>
+          </span>
+          <span className="w-2 shrink-0" />
+          {folder.isPinned && <Pin size={11} className="text-ink/60 shrink-0 mr-1.5" />}
+          <span className="truncate text-[13px] font-semibold tracking-tight">{folder.name}</span>
+        </div>
+        
+        {/* Workspace Actions — always drawn, matching the drawer's folder
+            header. They used to appear only on hover, which left the folder's
+            own affordances undiscoverable in a sidebar that has no other cue. */}
+        <div className="flex items-center space-x-0.5 pl-1">
+          <button
+            type="button"
+            title="New Session"
+            className="w-5 h-5 flex items-center justify-center text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-colors"
+            onClick={(e) => { e.stopPropagation(); onNewSessionForFolder(folder.id); }}
+          >
+            <Plus size={12} />
+          </button>
+          
+          <div className="relative flex items-center" ref={menuRef}>
+            <button
+              type="button"
+              title="Workspace Options"
+              className="w-5 h-5 flex items-center justify-center text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-colors"
+              onClick={(e) => { e.stopPropagation(); setShowMenu(!showMenu); }}
+            >
+              <MoreHorizontal size={12} />
+            </button>
+            
+            {showMenu && (
+              <div className="absolute right-0 top-full mt-1 w-44 bg-paper border border-ink/15 rounded-md shadow-lg z-50 py-1 text-xs">
+                <WorkspaceOptionsMenu
+                  variant="desktop"
+                  isPinned={folder.isPinned}
+                  onOpenFolder={onOpenFolder}
+                  confirmDelete={confirmDelete}
+                  onPin={onPin}
+                  onDelete={onDelete}
+                  onRequestDelete={requestDelete}
+                  onCancelDelete={cancelDelete}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      {/* Sessions List */}
+      {isActuallyOpen && (
+        <div className="space-y-0.5">
+          {renderedSessions.map((session: any) => {
+            const sessionKey = String(session.id);
+            const isActive = activeSessionId !== null
+              ? String(activeSessionId) === sessionKey
+              : session.is_active === 1;
+            // While one of its subagents is being viewed, the parent session
+            // row dims so the highlighted roster entry reads as the active one.
+            const isViewingSubagent = isActive && urlSessionId === sessionKey && Boolean(urlSubagentId);
+            const canExpandActive = activeSessionId !== null && sessionKey === String(activeSessionId);
+            // Chevron gate comes straight from the omp-side loader flag
+            // (disk scan + transcript recovery); the client never overrides it.
+            const hasSubagents = Boolean(session.hasSubagents);
+            const isExpanded = hasSubagents && expandedSessionIds.has(sessionKey);
+
+            return (
+              <div key={session.id} className="space-y-0.5">
+                <SessionItem
+                  sessionId={session.id}
+                  title={session.title}
+                  isActive={isActive && !isViewingSubagent}
+                  isArchived={session.is_archived === 1}
+                  status={sessionStatus[sessionKey]}
+                  awaitingInput={Boolean(session.awaitingInput)}
+                  timeAgo={relativeTimeAgo(session.updated_at ?? session.created_at)}
+                  onClick={() => onSelectSession(session.id)}
+                  onArchive={() => handleArchive(session)}
+                  onDelete={
+                    // A pending `new-…` chat has no transcript anywhere yet —
+                    // there is nothing to delete, and the server refuses it.
+                    String(session.id).startsWith('new-')
+                      ? undefined
+                      : () => sessionDelete.requestDelete(session)
+                  }
+                  onRename={String(session.id).startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
+                  onRenameWithAi={
+                    String(session.id).startsWith('new-') ? undefined : () => void handleRenameWithAi(session)
+                  }
+                  expandable={hasSubagents}
+                  hasSubagents={hasSubagents}
+                  isExpanded={isExpanded}
+                  onToggleExpand={() => handleToggleSessionExpand(sessionKey)}
+                />
+                {hasSubagents && isExpanded && (
+                  <SubagentList sessionId={session.id} isActiveSession={canExpandActive} />
+                )}
+              </div>
+            );
+          })}
+
+          {/* Reveal / collapse controls — one row, reveal on the left and
+              collapse on the right. They are not a toggle: the list is
+              truncated for height, so after a partial reveal the user needs to
+              keep revealing AND to start over, which is what two controls say
+              and one alternating control cannot. */}
+          {(hasMore || canShowLess) && !forceExpanded && (
+            <div className="flex items-center gap-1">
+              {hasMore && (
+                <button
+                  type="button"
+                  onClick={showMore}
+                  className="flex items-center min-w-0 text-xs text-ink/45 hover:text-ink/80 py-1.5 px-2 rounded-lg hover:bg-ink/5 transition-colors cursor-pointer select-none"
+                >
+                  {/* The chevron sits in the same 16px slot the rows give their
+                      status/roster glyph, and the label starts where a row's title
+                      does — the disclosure control lines up with the list it
+                      reveals instead of floating beside it. */}
+                  <span className="w-4 h-4 shrink-0 flex items-center justify-center">
+                    <ChevronDown size={12} />
+                  </span>
+                  <span className="w-2 shrink-0" />
+                  <span className="truncate leading-snug">
+                    Show more sessions ({hiddenCount})
+                  </span>
+                </button>
+              )}
+
+              {canShowLess && (
+                <button
+                  type="button"
+                  onClick={showLess}
+                  className="ml-auto shrink-0 flex items-center gap-1 text-xs text-ink/45 hover:text-ink/80 py-1.5 px-2 rounded-lg hover:bg-ink/5 transition-colors cursor-pointer select-none"
+                >
+                  <ChevronUp size={12} />
+                  <span className="truncate leading-snug">Show less</span>
+                </button>
+              )}
+            </div>
+          )}
+
+          {visibleSessions.length === 0 && (
+            <div className="px-3 py-2 text-[11px] text-ink/40 italic">
+              {showArchived ? 'No archived sessions.' : 'No sessions.'}
+            </div>
+          )}
+        </div>
+      )}
+
+      <SessionDeleteModal
+        session={sessionDelete.pending}
+        isDeleting={sessionDelete.isDeleting}
+        error={sessionDelete.error}
+        onClose={sessionDelete.cancelDelete}
+        onConfirm={() => void sessionDelete.confirmDelete()}
+      />
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/Footer.tsx

@@ -0,0 +1,54 @@
+import { Info, Settings } from 'lucide-preact';
+
+interface SessionSidebarFooterProps {
+  onSettings: () => void;
+  onInfo: () => void;
+  updateAvailable?: boolean;
+  onUpdateClick?: () => void;
+}
+
+/**
+ * The sidebar's bottom strip.
+ *
+ * Settings and Info are real `<button>`s carrying an `aria-label`, not bare
+ * `<svg onClick>` glyphs. A clickable icon with no role and no name is
+ * unreachable by keyboard and invisible to assistive tech — the same rule the
+ * editor and diff toolbars already follow (AGENTS.md: "a bare `<svg onClick>`
+ * is unreachable by keyboard"). It is also what lets a browser spec address
+ * these controls by role and name instead of by their position in the DOM.
+ */
+export function SessionSidebarFooter({ onSettings, onInfo, updateAvailable, onUpdateClick }: SessionSidebarFooterProps) {
+  return (
+    <div className="h-10 px-3 border-t border-ink/10 flex items-center justify-between text-ink/60 shrink-0">
+      <div className="flex space-x-1">
+        <button
+          type="button"
+          onClick={onSettings}
+          title="Settings"
+          aria-label="Settings"
+          className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
+        >
+          <Settings size={16} />
+        </button>
+        <button
+          type="button"
+          onClick={onInfo}
+          title="About Kabmo"
+          aria-label="About Kabmo"
+          className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
+        >
+          <Info size={16} />
+        </button>
+      </div>
+      {updateAvailable && (
+        <button
+          type="button"
+          onClick={onUpdateClick}
+          className="px-2 py-0.5 rounded-full border border-ink/20 text-[10px] font-semibold text-ink hover:border-ink/40"
+        >
+          update
+        </button>
+      )}
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/Header.test.ts

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The sidebar title bar's collapse control.
+ *
+ * It used to live in the toolbar's action row, where it competed for width
+ * with the actions on the session LIST and could be pushed into the `⋯`
+ * overflow menu at a narrow sidebar. A control that governs the PANEL belongs
+ * in the title bar — which is exactly where the phone's header puts its own
+ * close button — and there it is visible at every width. These cases pin that
+ * placement and that it stays reachable when the sidebar is at its minimum.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { SessionSidebarHeader } from '@/client/components/layout/session-sidebar/Header';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+/** The runner's own globals, restored on teardown — deleting them would strip natives (Event/CustomEvent) every later file needs. */
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let container: HTMLElement;
+
+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];
+  }
+});
+
+afterEach(() => {
+  if (container) render(null, container);
+  container?.remove();
+});
+
+async function mount(onCollapse?: () => void) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(SessionSidebarHeader, { onCollapse }), container);
+  });
+  return container;
+}
+
+function collapseButton(el: HTMLElement) {
+  return Array.from(el.querySelectorAll('button'))
+    .find((b) => /^Collapse Sidebar/.test(b.getAttribute('aria-label') ?? '')) as HTMLButtonElement | undefined;
+}
+
+describe('sidebar title bar', () => {
+  test('carries the collapse control beside the wordmark', async () => {
+    const el = await mount(() => {});
+    const button = collapseButton(el);
+    expect(button).toBeDefined();
+    // The chord rides in the accessible name, so the shortcut is discoverable
+    // (⌘B on macOS, Ctrl+B elsewhere — the keymap decides, not this file).
+    expect(button?.getAttribute('aria-label')).toMatch(/[⌘+]\s*B|B$/);
+    expect(el.textContent).toContain('Kabmo');
+  });
+
+  test('the collapse control runs its handler', async () => {
+    let collapsed = 0;
+    const el = await mount(() => { collapsed += 1; });
+    await act(async () => { collapseButton(el)?.click(); });
+    expect(collapsed).toBe(1);
+  });
+
+  test('a header with nothing to collapse draws no button', async () => {
+    const el = await mount(undefined);
+    expect(collapseButton(el)).toBeUndefined();
+  });
+});

package/src/client/components/layout/session-sidebar/Header.tsx

@@ -0,0 +1,57 @@
+import { PanelLeftClose } from 'lucide-preact';
+import { BrandWordmark } from '@/client/components/common/brand-wordmark';
+import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
+import { withChord } from '@/client/lib/ui/with-chord';
+import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
+
+/**
+ * The sidebar's title bar.
+ *
+ * It carries two things and no more: the wordmark (with the stream indicator
+ * badged on it, the placement the phone's header uses) and the control that
+ * collapses the sidebar. New Session is NOT here — it sits in the toolbar
+ * immediately before New Workspace, the same slot the phone's drawer gives it,
+ * so both layouts offer the primary action in the same place.
+ *
+ * The collapse control lives here because it is not a list action: it governs
+ * the panel, and the toolbar row is where the actions on the LIST compete for
+ * width. Here it is always visible at any sidebar width, which is what the
+ * phone's own header already does with its close button.
+ */
+export function SessionSidebarHeader({
+  streamStatus,
+  onCollapse,
+}: {
+  streamStatus?: AgentStreamStatus;
+  onCollapse?: () => void;
+}) {
+  const label = withChord('toggleSidebar', 'Collapse Sidebar');
+  return (
+    <div 
+      className="h-10 flex-shrink-0 flex items-center justify-between px-4 border-b border-ink/10 titlebar-drag-region select-none"
+      style={{ paddingLeft: 'max(1rem, env(titlebar-area-x, 0px))' }}
+    >
+      {/* The stream indicator badges the wordmark's top-right corner, the
+          same placement the phone's header uses — it reads as part of the
+          title instead of competing with the icon controls for a slot. */}
+      <span className="relative font-bold text-sm tracking-tight flex items-center">
+        <BrandWordmark />
+        <span className="absolute -top-0.5 -right-1.5 flex">
+          <StreamStatusDot status={streamStatus} />
+        </span>
+      </span>
+
+      {onCollapse && (
+        <button
+          type="button"
+          onClick={onCollapse}
+          title={label}
+          aria-label={label}
+          className="w-7 h-7 -mr-1.5 inline-flex items-center justify-center rounded text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer titlebar-no-drag"
+        >
+          <PanelLeftClose size={15} />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/Modals.tsx

@@ -0,0 +1,15 @@
+import { SettingsModal } from '@/client/components/settings/LazyModal';
+
+/**
+ * Modals shared by the desktop and mobile sidebars.
+ *
+ * The scheduler lives in its own folder (`./scheduler-modal`) and the New
+ * Workspace dialog in `./new-workspace-modal` — both are real features with
+ * state, a server API and their own sub-components, not presentational
+ * dialogs. This module is the entry point the two sidebars import from, so the
+ * move did not have to touch either of them.
+ */
+export { SettingsModal };
+export { AboutModal } from '@/client/components/layout/session-sidebar/about-modal';
+export { NewWorkspaceModal } from '@/client/components/layout/session-sidebar/new-workspace-modal';
+export type { NewWorkspaceModalProps } from '@/client/components/layout/session-sidebar/new-workspace-modal';

package/src/client/components/layout/session-sidebar/OverflowMenu.test.ts

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The toolbar's `⋯` menu.
+ *
+ * When the row cannot hold every control, the ones that do not fit move here
+ * rather than disappearing — a control reachable only at one sidebar width is
+ * a control half the users never find. These cases pin the three behaviours
+ * that make it usable: the rows are named in words, a row runs its action and
+ * closes the menu, and Escape closes it.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { Archive, RefreshCw } from 'lucide-preact';
+
+import { ToolbarOverflowMenu } from '@/client/components/layout/session-sidebar/OverflowMenu';
+import type { OverflowAction } from '@/client/components/layout/session-sidebar/OverflowMenu';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+/** The runner's own globals, restored on teardown — deleting them would strip natives (Event/CustomEvent) every later file needs. */
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let container: HTMLElement;
+
+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];
+  }
+});
+
+afterEach(() => {
+  if (container) render(null, container);
+  container?.remove();
+});
+
+async function mount(actions: OverflowAction[], sortHidden = false) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(ToolbarOverflowMenu, {
+      actions,
+      sortHidden,
+      sortOption: 'A-Z',
+      onSortChange: () => {},
+    }), container);
+  });
+  return container;
+}
+
+const trigger = (el: HTMLElement) =>
+  Array.from(el.querySelectorAll('button'))
+    .find((b) => b.getAttribute('aria-label') === 'More sidebar actions') as HTMLButtonElement | undefined;
+
+describe('toolbar overflow menu', () => {
+  test('is closed until its trigger is pressed', async () => {
+    const el = await mount([{ id: 'refresh', label: 'Refresh sessions', icon: RefreshCw, onSelect: () => {} }]);
+    expect(trigger(el)?.getAttribute('aria-expanded')).toBe('false');
+    expect(el.querySelector('[role="menu"]')).toBeNull();
+  });
+
+  test('names every moved control in words, not as a glyph', async () => {
+    const el = await mount([
+      { id: 'refresh', label: 'Refresh sessions', icon: RefreshCw, onSelect: () => {} },
+      { id: 'archive', label: 'Show Archive', icon: Archive, onSelect: () => {}, active: true },
+    ]);
+    await act(async () => { trigger(el)?.click(); });
+    const rows = Array.from(el.querySelectorAll('[role="menuitem"]')).map((row) => row.textContent?.trim());
+    expect(rows).toEqual(['Refresh sessions', 'Show Archive']);
+    // A moved control still reports its own pressed state.
+    expect(el.querySelector('[role="menuitem"][aria-pressed="true"]')?.textContent).toContain('Show Archive');
+  });
+
+  test('a row runs its action and closes the menu', async () => {
+    let ran = 0;
+    const el = await mount([{ id: 'refresh', label: 'Refresh sessions', icon: RefreshCw, onSelect: () => { ran += 1; } }]);
+    await act(async () => { trigger(el)?.click(); });
+    const row = el.querySelector('[role="menuitem"]') as HTMLElement;
+    await act(async () => { row.click(); });
+    expect(ran).toBe(1);
+    expect(el.querySelector('[role="menu"]')).toBeNull();
+  });
+
+  test('Escape closes the menu', async () => {
+    const el = await mount([{ id: 'refresh', label: 'Refresh sessions', icon: RefreshCw, onSelect: () => {} }]);
+    await act(async () => { trigger(el)?.click(); });
+    expect(el.querySelector('[role="menu"]')).not.toBeNull();
+    await act(async () => {
+      document.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key: 'Escape' }));
+    });
+    expect(el.querySelector('[role="menu"]')).toBeNull();
+  });
+
+  test('carries the sort options when the sort control itself moved', async () => {
+    const el = await mount([], true);
+    await act(async () => { trigger(el)?.click(); });
+    expect(el.textContent).toContain('Sort Workspaces');
+  });
+});