@kabmo-labs/kabmo 0.3.1 → 0.4.0

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The PENDING chat's own view: the workspace/wait pickers, its optimistic
+ * rows, and the composer it hands them to.
+ *
+ * Split out of `chat-timeline/index.tsx` for the per-file ceiling, and it is
+ * the branch that file used to inline: a `new-…` chat has no omp session, so it
+ * renders from the client's own state and its composer is the one that can
+ * defer a prompt. Keeping the two branches in one component is what let the
+ * pending view drift behind the real one (same composer, different props).
+ */
+
+import type { Attachment, ChatMessageData, WorkspaceFolderData } from '@/shared/types';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import type { ComposerModes } from '@/client/components/workspace/chat-timeline/chat-input/modes-props';
+import type { WaitingCandidate } from '@/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker';
+import type { DeferredModelStore } from '@/client/hooks/chat/timeline/deferred-model';
+import { EmptyWorkspacePrompt } from '@/client/components/workspace/chat-timeline/EmptyWorkspacePrompt';
+
+export interface PendingChatViewProps {
+  className: string;
+  folders: WorkspaceFolderData[];
+  selectedFolderId: number | null;
+  setSelectedFolderId: (id: number | null) => void;
+  rootPath: string | null;
+  inputValue: string;
+  setInputValue: (value: string) => void;
+  inputAttachments: Attachment[];
+  setInputAttachments: (attachments: Attachment[] | ((prev: Attachment[]) => Attachment[])) => void;
+  onSend: (attachments: Attachment[], options?: { steering?: boolean }) => void;
+  isGenerating: boolean;
+  appSettings: Record<string, unknown>;
+  messages: ChatMessageData[];
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  modelNames?: Record<string, string>;
+  onThinkingLevelChange: (level: string) => void;
+  onModelChange: (provider: string, modelId: string) => void;
+  sessionModel: { provider: string; modelId: string } | null;
+  sessionThinkingLevel?: string | null;
+  accessMode: ApprovalMode;
+  onAccessModeChange: (mode: ApprovalMode) => void;
+  modes?: ComposerModes;
+  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef: DeferredModelStore;
+  generatingVerb: string;
+  variant: 'desktop' | 'mobile';
+  onUndo?: (id: string, content?: string) => void;
+  onRetry?: (id: string) => void;
+  onNewChat?: (content: string, attachments?: Attachment[]) => void;
+  streamStatusMap: Record<string, string | undefined>;
+  titleForSession?: (id: string) => string | undefined;
+  waitingFor: WaitingCandidate | null;
+  onWaitingForChange: (candidate: WaitingCandidate | null) => void;
+  heldWait: { title: string | null } | null;
+  onCancelWait: () => void;
+}
+
+export function PendingChatView(props: PendingChatViewProps) {
+  return (
+    <EmptyWorkspacePrompt
+      className={props.className}
+      folders={props.folders}
+      selectedFolderId={props.selectedFolderId}
+      setSelectedFolderId={props.setSelectedFolderId}
+      rootPath={props.rootPath}
+      inputValue={props.inputValue}
+      setInputValue={props.setInputValue}
+      inputAttachments={props.inputAttachments}
+      setInputAttachments={props.setInputAttachments}
+      onSend={props.onSend}
+      isGenerating={props.isGenerating}
+      appSettings={props.appSettings}
+      messages={props.messages}
+      provider={props.provider}
+      providerNames={props.providerNames}
+      modelName={props.modelName}
+      modelNames={props.modelNames}
+      onThinkingLevelChange={props.onThinkingLevelChange}
+      onModelChange={props.onModelChange}
+      accessMode={props.accessMode}
+      onAccessModeChange={props.onAccessModeChange}
+      modes={props.modes}
+      composerModelRef={props.composerModelRef}
+      deferredComposerPickRef={props.deferredComposerPickRef}
+      sessionModel={props.sessionModel}
+      sessionThinkingLevel={props.sessionThinkingLevel}
+      generatingVerb={props.generatingVerb}
+      variant={props.variant}
+      onUndo={props.onUndo}
+      onRetry={props.onRetry}
+      onNewChat={props.onNewChat}
+      streamStatusMap={props.streamStatusMap}
+      titleForSession={props.titleForSession}
+      waitingFor={props.waitingFor}
+      onWaitingForChange={props.onWaitingForChange}
+      heldWait={props.heldWait}
+      onCancelWait={props.onCancelWait}
+    />
+  );
+}

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

@@ -50,7 +50,7 @@ export function SessionSkeleton() {
   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="flex-1 min-h-0 overflow-hidden pl-4 pr-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} />

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

@@ -110,7 +110,9 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
       {/* Transcript */}
       <div
         ref={scrollRef}
-        className="flex-1 min-h-0 overflow-y-auto overscroll-contain scrollbar-overlay-container p-4 pb-10"
+        className={`flex-1 min-h-0 overflow-y-auto overscroll-contain scrollbar-overlay-container ${
+          isMobile ? 'pl-4 pr-3 py-3 pb-8' : 'p-4 pb-10'
+        }`}
       >
         <div className="mx-auto w-full max-w-[970px]">
           {isLoading && messages.length === 0 ? (
@@ -137,6 +139,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
                     isStreaming={isLoading}
                     isPrevAssistant={isPrevAssistant}
                     userActions={false}
+                    isMobile={isMobile}
                     className={isNoticeRow(msg) ? 'mt-3 mb-1' : isPrevAssistant ? 'mt-1' : 'mt-3'}
                   />
                   {footer && (

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

@@ -10,6 +10,7 @@ import { parseGoalNotice, type GoalNoticeData } from '@/shared/lib/omp/mode/noti
 import { GoalNotice } from '@/client/components/workspace/chat-timeline/GoalNotice';
 import { TaskResultContent } from '@/client/components/workspace/chat-timeline/TaskResultContent';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { transcriptGutter } from '@/shared/lib/chat/timeline/gutter';
 
 const KIND_LABEL: Record<GoalNoticeData['kind'], string> = {
   start: 'Goal started',
@@ -43,12 +44,14 @@ interface SystemNoticeProps {
   /** The `customType` this notice came from, when it has one — the only way to
    *  recognize a goal's opening turn, whose text is the bare objective. */
   source?: string;
+  /** Phone layout: the card's frame is the timeline gutter itself. */
+  isMobile?: boolean;
 }
 
 /** System notice card — handles generic notices, structured <task-result> agent
  *  jobs, and <system-reminder> blocks, all collapsed by default; a goal-mode
  *  injection renders open and has no collapse control (see `forcedOpen`). */
-export function SystemNotice({ notice, source }: SystemNoticeProps) {
+export function SystemNotice({ notice, source, isMobile = false }: SystemNoticeProps) {
   const [userOpen, setUserOpen] = useState(false);
   useSyntaxReady();
 
@@ -195,7 +198,7 @@ export function SystemNotice({ notice, source }: SystemNoticeProps) {
 
   return (
     <div
-      className={`mx-3 overflow-hidden rounded-xl border border-ink/10 bg-paper text-[12px] text-ink transition-colors ${
+      className={`${transcriptGutter(isMobile)} overflow-hidden rounded-xl border border-ink/10 bg-paper text-[12px] text-ink transition-colors ${
         canToggle ? 'hover:border-ink/20' : ''
       } select-text`}
     >

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

@@ -3,17 +3,21 @@ import { BrainCircuit, ChevronDown, Sparkles } from 'lucide-preact';
 import type { ThinkingData } from '@/shared/types';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { CopyButton } from '@/client/components/common/CopyButton';
+import { transcriptGutter } from '@/shared/lib/chat/timeline/gutter';
 
 interface ThinkingSectionProps {
   thinking: ThinkingData | string;
   defaultExpanded?: boolean;
   showSeparator?: boolean;
+  /** Phone layout: the section's frame is the timeline gutter itself. */
+  isMobile?: boolean;
 }
 
 export function ThinkingSection({ 
   thinking, 
   defaultExpanded = false,
-  showSeparator = false
+  showSeparator = false,
+  isMobile = false,
 }: ThinkingSectionProps) {
   const isGenerating = typeof thinking === 'object' ? Boolean(thinking.isGenerating) : false;
   const [isOpen, setIsOpen] = useState(defaultExpanded || isGenerating);
@@ -43,7 +47,7 @@ export function ThinkingSection({
   if (!cleanThought) return null;
 
   return (
-    <div className={`mx-3 ${showSeparator ? 'space-y-1.5' : ''}`}>
+    <div className={`${transcriptGutter(isMobile)} ${showSeparator ? 'space-y-1.5' : ''}`}>
       {showSeparator && (
         <div className="flex items-center gap-2 px-1 pt-0.5">
           <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/35">

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

@@ -82,7 +82,7 @@ export function TimelineBody({
         ref={scrollRef}
         onScroll={handleScroll}
         className={`flex-1 scrollbar-overlay-container overscroll-contain scroll-smooth overflow-x-hidden ${
-          isMobile ? 'px-3 py-3 pb-8' : 'p-4 pb-10'
+          isMobile ? 'pl-4 pr-3 py-3 pb-8' : 'p-4 pb-10'
         }`}
       >
         <div ref={contentRef} className="mx-auto w-full max-w-[970px]">

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

@@ -75,7 +75,7 @@ async function mount(tools: ToolCallData[]) {
  * cards. A section renders nothing else.
  */
 function sequence(el: HTMLElement): Array<{ kind: 'heading' | 'card'; text: string }> {
-  const section = el.querySelector('div.mx-3')!;
+  const section = el.querySelector('[data-tool-section]')!;
   const items = Array.from(section.children).map((child) => {
     const cls = (child.className || '').toString();
     if (cls.includes('overflow-hidden rounded-xl')) {
@@ -109,7 +109,7 @@ describe('ToolCallingSection per-card intent heading', () => {
       { kind: 'card', text: 'Bash' },
     ]);
     // No header row: every direct child is a card.
-    const children = Array.from(el.querySelector('div.mx-3')!.children) as HTMLElement[];
+    const children = Array.from(el.querySelector('[data-tool-section]')!.children) as HTMLElement[];
     expect(children).toHaveLength(2);
     expect(children.every((child) => child.className.includes('overflow-hidden rounded-xl'))).toBe(true);
   });
@@ -126,7 +126,7 @@ describe('ToolCallingSection per-card intent heading', () => {
   test('a long intent heading is clamped to one line with the full text in title', async () => {
     const long = 'x'.repeat(200);
     const el = await mount([tool('a', long)]);
-    const heading = el.querySelector('div.mx-3 > div > span') as HTMLElement;
+    const heading = el.querySelector('[data-tool-section] > div > span') as HTMLElement;
     expect(heading.textContent).toBe(long);
     expect(heading.className).toContain('truncate');
     expect(heading.className).toContain('min-w-0');
@@ -137,7 +137,7 @@ describe('ToolCallingSection per-card intent heading', () => {
 describe('ToolCallingSection heading rule', () => {
   test('the intent heading rule fills the row, the way a card heading draws it', async () => {
     const el = await mount([tool('a', 'Finding PWA manifest')]);
-    const row = el.querySelector('div.mx-3 > div') as HTMLElement;
+    const row = el.querySelector('[data-tool-section] > div') as HTMLElement;
     const [label, rule] = Array.from(row.children) as HTMLElement[];
     // The label sizes to its text and the rule takes the remainder, so the line
     // runs to the panel edge. Two `flex-1` items would split the row 50/50 and
@@ -154,7 +154,7 @@ describe('ToolCallingSection heading rule', () => {
 
   test('the rule keeps a minimum width so a long intent cannot collapse it', async () => {
     const el = await mount([tool('a', 'x'.repeat(400))]);
-    const row = el.querySelector('div.mx-3 > div') as HTMLElement;
+    const row = el.querySelector('[data-tool-section] > div') as HTMLElement;
     const rule = row.children[1] as HTMLElement;
     expect(rule.className).toContain('min-w-6');
   });

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

@@ -8,10 +8,13 @@ import { useMemo } from 'preact/hooks';
 import type { AgentActionData, ToolCallData, ToolType } from '@/shared/types';
 import { ToolCallCard } from '@/client/components/workspace/chat-timeline/ToolCallCard';
 import { useToolOpenState } from '@/client/hooks/chat/timeline/tool-open';
+import { transcriptGutter } from '@/shared/lib/chat/timeline/gutter';
 
 interface ToolCallingSectionProps {
   tools: (ToolCallData | AgentActionData)[];
   defaultExpanded?: boolean;
+  /** Phone layout: the section's frame is the timeline gutter itself. */
+  isMobile?: boolean;
 }
 
 function normalizeToolData(action: ToolCallData | AgentActionData, index: number): ToolCallData {
@@ -53,7 +56,7 @@ function normalizeToolData(action: ToolCallData | AgentActionData, index: number
   };
 }
 
-export function ToolCallingSection({ tools, defaultExpanded = false }: ToolCallingSectionProps) {
+export function ToolCallingSection({ tools, defaultExpanded = false, isMobile = false }: ToolCallingSectionProps) {
   const normalizedTools = useMemo(() => {
     return (tools || []).map((t, i) => normalizeToolData(t, i));
   }, [tools]);
@@ -65,7 +68,7 @@ export function ToolCallingSection({ tools, defaultExpanded = false }: ToolCalli
   if (!normalizedTools || normalizedTools.length === 0) return null;
 
   return (
-    <div className="mx-3 space-y-1.5">
+    <div className={`${transcriptGutter(isMobile)} space-y-1.5`} data-tool-section>
       {normalizedTools.map((tool) => {
         const intent = tool.intent?.trim();
         return (

package/src/client/components/workspace/chat-timeline/chat-input/AttachmentToolbar.tsx

@@ -24,9 +24,17 @@ interface AttachmentToolbarProps {
    */
   expanded?: boolean;
   onToggleExpand?: () => void;
+  /**
+   * The phone's compact composer: the textarea is gone, so this row carries the
+   * affordance that brings it back — a "Type here" target beside the paperclip.
+   * Tapping it (or the card) is what expands the composer, which is why it is a
+   * button rather than a label.
+   */
+  compact?: boolean;
+  onExpandComposer?: () => void;
 }
 
-export function AttachmentToolbar({ attachments, onFilesSelected, onRemove, modes, onOpenGoal, expanded, onToggleExpand }: AttachmentToolbarProps) {
+export function AttachmentToolbar({ attachments, onFilesSelected, onRemove, modes, onOpenGoal, expanded, onToggleExpand, compact = false, onExpandComposer }: AttachmentToolbarProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
@@ -50,6 +58,22 @@ export function AttachmentToolbar({ attachments, onFilesSelected, onRemove, mode
           <Paperclip size={14} />
         </button>
 
+        {/* The compact composer's own placeholder. The textarea is not rendered
+            at all in that state, so this is the only thing that says the card
+            is still a composer — and the only thing a tap can hit to bring the
+            box back. It sits right beside the paperclip, where the text used to
+            start, so the row keeps its reading order. */}
+        {compact && (
+          <button
+            type="button"
+            data-composer-reopen
+            onClick={onExpandComposer}
+            className="min-w-0 flex-1 text-left text-[13px] text-ink/40 truncate"
+          >
+            Type here
+          </button>
+        )}
+
         {attachments.map(att => (
           <div key={att.id} className="relative flex items-center bg-canvas border border-ink/10 rounded-md p-0.5 pr-6 text-xs shadow-sm group">
             {att.preview ? (

package/src/client/components/workspace/chat-timeline/chat-input/Toolbar.tsx

@@ -102,7 +102,12 @@ export function ComposerToolbar({
       // No separator and no tinted strip: the composer is one card, so its
       // toolbar shares the card's surface. `rounded-b-[inherit]` still follows
       // the frame (the phone's stretched composer is `rounded-none`).
-      className={`@container flex items-center justify-between rounded-b-[inherit] ${isMobile ? 'px-2 py-2' : 'px-3 py-2'}`}
+      // `py-1.5`, and the phone's controls are `w-8 h-8`: measured on a Pixel 7,
+      // the row was 56px tall for a 40px button, which made the composer's
+      // footer read as a second, heavier bar under the draft. A 32px target
+      // still clears the 28px minimum for a touch control while bringing the
+      // row to 44px — the same height as the compact textarea above it.
+      className="@container flex items-center justify-between rounded-b-[inherit] px-3 py-1.5"
     >
       <div className={`flex items-center min-w-0 ${isMobile ? 'space-x-1' : 'space-x-2'}`}>
         {showModel && (
@@ -166,7 +171,7 @@ export function ComposerToolbar({
                   ? 'bg-error text-canvas animate-pulse shadow-xs cursor-pointer'
                   : 'text-ink/50 hover:text-ink hover:bg-ink/10 cursor-pointer'
             } ${
-              isMobile ? 'w-10 h-10 rounded-lg' : 'w-7 h-7'
+              isMobile ? 'w-8 h-8 rounded-md' : 'w-7 h-7'
             }`}
             title={
               voiceBusy
@@ -177,11 +182,11 @@ export function ComposerToolbar({
             }
           >
             {voiceBusy ? (
-              <Loader2 size={isMobile ? 16 : 12} className="animate-spin" />
+              <Loader2 size={isMobile ? 14 : 12} className="animate-spin" />
             ) : voiceListening ? (
-              <MicOff size={isMobile ? 16 : 12} />
+              <MicOff size={isMobile ? 14 : 12} />
             ) : (
-              <Mic size={isMobile ? 16 : 12} />
+              <Mic size={isMobile ? 14 : 12} />
             )}
           </button>
         )}
@@ -192,12 +197,12 @@ export function ComposerToolbar({
             onClick={onStop}
             className={`flex items-center justify-center rounded transition-colors cursor-pointer shadow-xs animate-in zoom-in-90 duration-150 flex-shrink-0 ${
               isMobile
-                ? 'w-10 h-10 rounded-lg border border-ink/25 text-ink hover:bg-error hover:text-canvas hover:border-error'
+                ? 'w-8 h-8 rounded-md border border-ink/25 text-ink hover:bg-error hover:text-canvas hover:border-error'
                 : 'w-7 h-7 bg-ink text-canvas hover:bg-error hover:text-canvas'
             }`}
             title="Stop generation"
           >
-            <Square size={isMobile ? 14 : 10} className="fill-current" />
+            <Square size={isMobile ? 12 : 10} className="fill-current" />
           </button>
         )}
 
@@ -206,12 +211,12 @@ export function ComposerToolbar({
           onClick={onSend}
           disabled={sendDisabled}
           className={`flex items-center justify-center rounded bg-ink text-canvas hover:bg-ink/80 transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer flex-shrink-0 ${
-            isMobile ? 'w-10 h-10 rounded-lg' : 'w-7 h-7'
+            isMobile ? 'w-8 h-8 rounded-md' : 'w-7 h-7'
           }`}
           title={chatInFlight ? 'Queue follow-up message' : 'Send message'}
           aria-label={chatInFlight ? 'Queue follow-up message' : 'Send message'}
         >
-          <Send size={isMobile ? 16 : 12} className="ml-px" />
+          <Send size={isMobile ? 14 : 12} className="ml-px" />
         </button>
       </div>
     </div>

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

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The two client rules that decide whether a prompt is HELD or SENT.
+ *
+ * Both are about a state the composer cannot see: a dropdown that lists only
+ * running sessions can still go stale while the draft is being written, and the
+ * pick itself has to survive a remount or the prompt the user deferred is sent
+ * immediately — the one outcome the feature exists to prevent.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { waitingCandidates } from '@/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker';
+import type { WorkspaceFolderData } from '@/shared/types/workspace';
+
+function folder(id: number, name: string, sessions: { id: string; title: string }[]): WorkspaceFolderData {
+  return {
+    id,
+    name,
+    isExpanded: true,
+    hasMore: false,
+    totalSessions: sessions.length,
+    sessions: sessions.map((session) => ({ ...session, folder_id: id })),
+  };
+}
+
+const folders = [
+  folder(1, 'alpha', [{ id: 'sess-a', title: 'Refactor parser' }, { id: 'sess-idle', title: 'Idle chat' }]),
+  folder(2, 'beta', [{ id: 'sess-b', title: 'Build pipeline' }]),
+];
+
+describe('waitingCandidates', () => {
+  test('offers only sessions with a run in flight', () => {
+    const candidates = waitingCandidates(folders, { 'sess-a': 'stream', 'sess-b': 'stream', 'sess-idle': 'finish' }, null);
+    expect(candidates.map((candidate) => candidate.id)).toEqual(['sess-a', 'sess-b']);
+  });
+
+  // A finished run's badge is a terminal one-shot; a session whose row says
+  // `finish` has nothing to wait for, and offering it would create a prompt the
+  // next sweep releases.
+  test('a finished or aborted session is not offered', () => {
+    expect(waitingCandidates(folders, { 'sess-a': 'finish', 'sess-b': 'abort' }, null)).toEqual([]);
+  });
+
+  test('never offers the session the composer writes to', () => {
+    const candidates = waitingCandidates(folders, { 'sess-a': 'stream', 'sess-b': 'stream' }, 'sess-a');
+    expect(candidates.map((candidate) => candidate.id)).toEqual(['sess-b']);
+  });
+
+  test('carries the folder name so two similarly titled sessions are told apart', () => {
+    const candidates = waitingCandidates(folders, { 'sess-b': 'stream' }, null);
+    expect(candidates[0]).toEqual({ id: 'sess-b', title: 'Build pipeline', folderName: 'beta' });
+  });
+
+  // The case the feature exists for, and the one the first version missed: a
+  // freshly spawned session has a `stream` row immediately, while omp's
+  // transcript — which the sidebar structure is scanned from — lands seconds
+  // later. Driving the list off the folders offered nothing at all.
+  test('offers a streaming id the structure has not scanned yet', () => {
+    const candidates = waitingCandidates(
+      [folder(1, 'alpha', [])],
+      { 'brand-new-id': 'stream' },
+      null,
+      (id) => (id === 'brand-new-id' ? 'Just started' : undefined),
+    );
+    expect(candidates).toEqual([{ id: 'brand-new-id', title: 'Just started', folderName: '' }]);
+  });
+
+  test('a streaming id with no hint is named by its id rather than dropped', () => {
+    expect(waitingCandidates([], { 'raw-id': 'stream' }, null)[0]).toEqual({
+      id: 'raw-id',
+      title: 'raw-id',
+      folderName: '',
+    });
+  });
+
+  test('a scanned streaming session is not listed twice', () => {
+    const candidates = waitingCandidates(folders, { 'sess-a': 'stream' }, null);
+    expect(candidates.map((candidate) => candidate.id)).toEqual(['sess-a']);
+  });
+});