@kabmo-labs/kabmo 0.0.1 → 0.1.0

package/src/client/components/auth/login-screen/index.tsx

@@ -20,12 +20,13 @@
 
 import { useEffect, useState } from 'preact/hooks';
 import type { FunctionComponent } from 'preact/compat';
-import { KeyRound, Loader2 } from 'lucide-preact';
+import { Eye, EyeOff, Loader2 } from 'lucide-preact';
 import { login, probeSession } from '@/client/hooks/ui/auth';
 import { BrandWordmark } from '@/client/components/common/brand-wordmark';
 
 export const LoginScreen: FunctionComponent = () => {
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [trustDevice, setTrustDevice] = useState(false);
   const [error, setError] = useState('');
   const [busy, setBusy] = useState(false);
@@ -76,31 +77,51 @@ export const LoginScreen: FunctionComponent = () => {
   return (
     <div className="min-h-dvh flex items-center justify-center bg-canvas text-ink px-4">
       <form onSubmit={submit} className="w-full max-w-xs space-y-4">
-        <div className="space-y-1 text-center">
-          <KeyRound size={28} className="mx-auto text-ink/60" />
-          {/* The sidebar header's brand: one wordmark, so the login screen and
-              the app cannot disagree about what the product is called. */}
-          <h1 className="font-bold text-sm tracking-tight flex items-center justify-center">
-            <BrandWordmark />
+        <div className="space-y-2 text-center">
+          {/* The product's own lockup is the header here: one wordmark, drawn
+              at hero size, so the login screen and the app cannot disagree
+              about what the product is called. No second icon — the K *is* the
+              icon, and a key glyph above it said nothing the field's own label
+              does not. The eye in the field is a control, not a second mark. */}
+          <h1 className="flex items-center justify-center">
+            <BrandWordmark className="text-3xl" />
           </h1>
           <p className="text-xs text-ink/60">This instance is password protected.</p>
         </div>
 
-        <input
-          type="password"
-          autoComplete="current-password"
-          autoFocus
-          value={password}
-          onInput={(event) => {
-            setPassword(event.currentTarget.value);
-            if (error) setError('');
-          }}
-          placeholder="Password"
-          aria-label="Password"
-          aria-invalid={error ? true : undefined}
-          disabled={busy}
-          className="w-full bg-paper border border-ink/20 rounded-lg px-3 py-2 text-sm text-ink placeholder-ink/40 focus:outline-none focus:border-ink/50 transition-colors"
-        />
+        <div className="relative">
+          <input
+            type={showPassword ? 'text' : 'password'}
+            autoComplete="current-password"
+            autoFocus
+            value={password}
+            onInput={(event) => {
+              setPassword(event.currentTarget.value);
+              if (error) setError('');
+            }}
+            placeholder="Password"
+            aria-label="Password"
+            aria-invalid={error ? true : undefined}
+            disabled={busy}
+            className="w-full bg-paper border border-ink/20 rounded-lg pl-3 pr-10 py-2 text-sm text-ink placeholder-ink/40 focus:outline-none focus:border-ink/50 transition-colors"
+          />
+          {/* The eye is a `type` toggle, not a second field: the value lives in
+              one state slot either way, so revealing it cannot change what is
+              submitted. It is a real button with its own label because the
+              alternative — a bare `<svg onClick>` — is unreachable by keyboard
+              and unnamed for assistive tech. */}
+          <button
+            type="button"
+            onClick={() => setShowPassword((shown) => !shown)}
+            disabled={busy}
+            title={showPassword ? 'Hide password' : 'Show password'}
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
+            aria-pressed={showPassword}
+            className="absolute inset-y-0 right-0 flex items-center px-3 text-ink/50 hover:text-ink disabled:opacity-40 transition-colors cursor-pointer disabled:cursor-default"
+          >
+            {showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
+          </button>
+        </div>
 
         <label className="flex items-center gap-2 text-xs text-ink/70">
           <input

package/src/client/components/auth/login-screen/password-toggle.test.tsx

@@ -0,0 +1,121 @@
+/**
+ * The password field's visibility toggle.
+ *
+ * The eye is a `type` switch on the SAME input, so what it must not do is move
+ * the value: a reveal that rebuilt the field would clear the credential the
+ * user just typed. The assertions are about the rendered tree and the input's
+ * own `type`/`value`, because a class list proves nothing about either.
+ *
+ * The header's own assertions live in `index.test.tsx`; this file covers the
+ * control beside the field and nothing else.
+ */
+
+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 { LoginScreen } from '@/client/components/auth/login-screen';
+
+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 later files need. */
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+const nativeFetch = globalThis.fetch;
+
+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];
+  }
+  // The screen re-checks the session on mount; an unanswerable probe leaves the
+  // form alone, which is the state under test.
+  target.fetch = async () => {
+    throw new Error('offline');
+  };
+});
+
+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];
+  }
+  target.fetch = nativeFetch;
+});
+
+afterEach(() => {
+  if (container) render(null, container);
+  container?.remove();
+});
+
+async function mount(): Promise<HTMLElement> {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(LoginScreen, {}), container);
+  });
+  return container;
+}
+
+/** The one field the form submits — matched by its label, never by `type`, which is what changes. */
+function passwordField(el: HTMLElement): HTMLInputElement | null {
+  return el.querySelector<HTMLInputElement>('input[aria-label="Password"]');
+}
+
+describe('LoginScreen password visibility', () => {
+  test('starts masked, with a labelled toggle beside the field', async () => {
+    const el = await mount();
+    expect(passwordField(el)?.type).toBe('password');
+    const toggle = el.querySelector<HTMLButtonElement>('button[aria-label="Show password"]');
+    expect(toggle).toBeTruthy();
+    // A real button, not an svg with a click handler: keyboard reachable.
+    expect(toggle?.getAttribute('type')).toBe('button');
+    expect(toggle?.getAttribute('title')).toBe('Show password');
+    expect(toggle?.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('reveals the same field and puts it back, keeping the value', async () => {
+    const el = await mount();
+    await act(async () => {
+      const input = passwordField(el);
+      if (input) {
+        input.value = 's3cret';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    });
+    expect(passwordField(el)?.value).toBe('s3cret');
+
+    await act(async () => el.querySelector<HTMLButtonElement>('button[aria-label="Show password"]')?.click());
+    expect(passwordField(el)?.type).toBe('text');
+    expect(passwordField(el)?.value).toBe('s3cret');
+    const hide = el.querySelector<HTMLButtonElement>('button[aria-label="Hide password"]');
+    expect(hide?.getAttribute('aria-pressed')).toBe('true');
+    expect(hide?.getAttribute('title')).toBe('Hide password');
+
+    await act(async () => hide?.click());
+    expect(passwordField(el)?.type).toBe('password');
+    expect(passwordField(el)?.value).toBe('s3cret');
+  });
+
+  test('the toggle is disabled while a sign-in is in flight', async () => {
+    const el = await mount();
+    await act(async () => {
+      const input = passwordField(el);
+      if (input) {
+        input.value = 's3cret';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    });
+    // The submit handler awaits `login`, so the in-flight state is observable
+    // in the same tick the form is submitted.
+    await act(async () => {
+      el.querySelector<HTMLFormElement>('form')?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+    });
+    expect(el.querySelector<HTMLButtonElement>('button[aria-label="Show password"]')?.disabled).toBe(true);
+    expect(passwordField(el)?.disabled).toBe(true);
+  });
+});

package/src/client/components/common/batch-selection/BatchActionBar.test.ts

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The batch bar's contract, rendered.
+ *
+ * Three properties are load-bearing and each is a way a batch delete can go
+ * wrong: the bar names the mode's noun (a session batch that says "workspace"
+ * deletes the wrong thing), Delete is refused with nothing selected, and
+ * Select-all is refused once everything already is — a control that looks
+ * available but does nothing is how a user concludes the feature is broken.
+ */
+
+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 { BatchActionBar } from '@/client/components/common/batch-selection/BatchActionBar';
+import type { BatchActionBarProps } from '@/client/components/common/batch-selection/BatchActionBar';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+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) {
+    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(() => {
+  container?.remove();
+});
+
+async function mount(overrides: Partial<BatchActionBarProps> = {}) {
+  const calls = { selectAll: 0, unselectAll: 0, del: 0, cancel: 0 };
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(BatchActionBar, {
+      mode: 'session',
+      count: 0,
+      total: 3,
+      busy: false,
+      onSelectAll: () => { calls.selectAll += 1; },
+      onUnselectAll: () => { calls.unselectAll += 1; },
+      onDelete: () => { calls.del += 1; },
+      onCancel: () => { calls.cancel += 1; },
+      ...overrides,
+    }), container);
+  });
+  return { el: container, calls };
+}
+
+function buttonContaining(el: HTMLElement, text: string): HTMLButtonElement | null {
+  return Array.from(el.querySelectorAll('button'))
+    .find((button) => (button.textContent ?? '').includes(text)) as HTMLButtonElement ?? null;
+}
+
+describe('BatchActionBar', () => {
+  test('counts the selection against the scope, in the mode\'s noun', async () => {
+    const { el } = await mount({ count: 2, total: 5, scopeLabel: 'kabmo' });
+    expect(el.textContent).toContain('2');
+    expect(el.textContent).toContain('of 5 sessions selected');
+    expect(el.textContent).toContain('in kabmo');
+  });
+
+  test('workspace mode names workspaces and drops the scope clause', async () => {
+    const { el } = await mount({ mode: 'workspace', count: 1, total: 4, scopeLabel: 'kabmo' });
+    expect(el.textContent).toContain('of 4 workspaces selected');
+    expect(el.textContent).not.toContain('in kabmo');
+  });
+
+  test('Delete is refused with nothing selected', async () => {
+    const { el, calls } = await mount({ count: 0 });
+    const del = buttonContaining(el, 'Delete');
+    expect(del?.disabled).toBe(true);
+    await act(async () => { del?.click(); });
+    expect(calls.del).toBe(0);
+  });
+
+  test('Delete is enabled with a selection and reports its handler', async () => {
+    const { el, calls } = await mount({ count: 2 });
+    const del = buttonContaining(el, 'Delete');
+    expect(del?.disabled).toBe(false);
+    await act(async () => { del?.click(); });
+    expect(calls.del).toBe(1);
+  });
+
+  test('Select all is refused once everything is selected', async () => {
+    const { el } = await mount({ count: 3, total: 3 });
+    expect(buttonContaining(el, 'Select all')?.disabled).toBe(true);
+  });
+
+  test('Unselect all is refused with nothing selected', async () => {
+    const { el } = await mount({ count: 0 });
+    expect(buttonContaining(el, 'Unselect all')?.disabled).toBe(true);
+  });
+
+  test('both directions are separate controls and both report', async () => {
+    const { el, calls } = await mount({ count: 1, total: 3 });
+    await act(async () => {
+      buttonContaining(el, 'Select all')?.click();
+      buttonContaining(el, 'Unselect all')?.click();
+    });
+    expect(calls.selectAll).toBe(1);
+    expect(calls.unselectAll).toBe(1);
+  });
+
+  test('a running delete disables every control and says so', async () => {
+    const { el } = await mount({ count: 2, busy: true });
+    expect(el.textContent).toContain('Deleting…');
+    for (const button of Array.from(el.querySelectorAll('button'))) {
+      expect((button as HTMLButtonElement).disabled).toBe(true);
+    }
+  });
+});

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

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The bar a batch selection raises: what is selected, select-all / unselect-all,
+ * Delete and Cancel.
+ *
+ * It sits at the bottom of the sidebar (desktop) or above the list (phone) and
+ * is the ONLY place a delete can be started — the checkboxes themselves never
+ * act, so a mis-tap on a row cannot delete anything. Select-all and unselect-all
+ * are two buttons rather than one toggle: after a partial selection the user
+ * needs both directions, and one alternating control cannot say which it means.
+ *
+ * The scope noun is the mode's, not the bar's: "Select all" on the session mode
+ * means every session of the workspace whose menu started it, and on the
+ * workspace mode every workspace on screen.
+ */
+
+import { CheckCheck, Loader2, Trash2, X } from 'lucide-preact';
+import type { BatchMode } from '@/shared/lib/workspace/batch-select';
+
+export interface BatchActionBarProps {
+  mode: BatchMode;
+  /** How many rows are selected. */
+  count: number;
+  /** How many the scope can offer — the denominator of "3 of 12". */
+  total: number;
+  /** True while a batch delete is in flight. */
+  busy: boolean;
+  /** The scope's name, for the sentence ("in kabmo"). Omitted in workspace mode. */
+  scopeLabel?: string;
+  onSelectAll: () => void;
+  onUnselectAll: () => void;
+  onDelete: () => void;
+  onCancel: () => void;
+}
+
+export function BatchActionBar({
+  mode,
+  count,
+  total,
+  busy,
+  scopeLabel,
+  onSelectAll,
+  onUnselectAll,
+  onDelete,
+  onCancel,
+}: BatchActionBarProps) {
+  const noun = mode === 'workspace' ? 'workspace' : 'session';
+  const plural = count === 1 ? noun : `${noun}s`;
+  const where = mode === 'session' && scopeLabel ? ` in ${scopeLabel}` : '';
+
+  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"
+    >
+      <div className="flex items-center justify-between gap-2 text-[11px]">
+        <span className="min-w-0 truncate text-ink/70">
+          <span className="font-semibold text-ink">{count}</span>
+          {' '}of {total} {total === 1 ? noun : `${noun}s`} selected{where}
+        </span>
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={busy}
+          title="Cancel selection"
+          aria-label="Cancel selection"
+          className="shrink-0 w-5 h-5 flex items-center justify-center rounded text-ink/50 hover:text-ink hover:bg-ink/10 transition-colors cursor-pointer disabled:opacity-50"
+        >
+          <X size={13} />
+        </button>
+      </div>
+
+      <div className="flex items-center gap-1.5">
+        <button
+          type="button"
+          onClick={onSelectAll}
+          disabled={busy || total === 0 || count === total}
+          className="flex-1 min-w-0 h-7 flex items-center justify-center gap-1 px-2 rounded border border-ink/20 text-[11px] font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-40"
+        >
+          <CheckCheck size={12} className="shrink-0" />
+          <span className="truncate">Select all</span>
+        </button>
+        <button
+          type="button"
+          onClick={onUnselectAll}
+          disabled={busy || count === 0}
+          className="flex-1 min-w-0 h-7 flex items-center justify-center gap-1 px-2 rounded border border-ink/20 text-[11px] font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-40"
+        >
+          <span className="truncate">Unselect all</span>
+        </button>
+        <button
+          type="button"
+          onClick={onDelete}
+          disabled={busy || count === 0}
+          className="flex-1 min-w-0 h-7 flex items-center justify-center gap-1 px-2 rounded bg-error text-canvas text-[11px] font-semibold hover:opacity-90 transition-opacity cursor-pointer disabled:opacity-40"
+        >
+          {busy ? (
+            <>
+              <Loader2 size={12} className="animate-spin shrink-0" />
+              <span className="truncate">Deleting…</span>
+            </>
+          ) : (
+            <>
+              <Trash2 size={12} className="shrink-0" />
+              <span className="truncate">
+                Delete {count > 0 ? `${count} ${plural}` : plural}
+              </span>
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Confirmation for a batch delete, for both nouns.
+ *
+ * It names what actually disappears, because the two modes destroy different
+ * things and only one of them is recoverable by re-adding: deleting SESSIONS
+ * removes transcripts from disk, while deleting WORKSPACES only unregisters
+ * them (the files stay, and the folder can be added back). Saying the same
+ * sentence for both would be a lie in one direction or the other.
+ *
+ * Refusals are listed IN the dialog after the run: the server answers per-id
+ * verdicts, and a batch of twenty that removed eighteen must report the two
+ * that survived with their reasons — closing on a toast would leave the user
+ * with a count they cannot reconcile against the list.
+ */
+
+import { useEffect } from 'preact/hooks';
+import { AlertTriangle, Loader2, Trash2 } from 'lucide-preact';
+import { Modal } from '@/client/components/common/Modal';
+import type { BatchDeleteOutcome } from '@/client/hooks/workspace/batch-delete';
+import type { BatchMode } from '@/shared/lib/workspace/batch-select';
+
+export interface BatchDeleteModalProps {
+  mode: BatchMode;
+  /** How many rows the user asked to delete; 0 closes the dialog. */
+  count: number;
+  /** The scope's name, so the sentence names the workspace. */
+  scopeLabel?: string;
+  isDeleting: boolean;
+  /** The settled outcome, once the run finished. Null while running. */
+  outcome: BatchDeleteOutcome | null;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function BatchDeleteModal({
+  mode,
+  count,
+  scopeLabel,
+  isDeleting,
+  outcome,
+  onClose,
+  onConfirm,
+}: BatchDeleteModalProps) {
+  useEffect(() => {
+    const handler = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== 'Escape' || isDeleting) return;
+      event.preventDefault();
+      onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose, isDeleting]);
+
+  if (count === 0) return null;
+
+  const sessions = mode === 'session';
+  const noun = sessions ? 'session' : 'workspace';
+  const plural = count === 1 ? noun : `${noun}s`;
+  const where = sessions && scopeLabel ? ` in ${scopeLabel}` : '';
+  const finished = !isDeleting && outcome !== null;
+  const removed = outcome?.removed.length ?? 0;
+  const refused = outcome?.refused ?? [];
+
+  return (
+    <Modal
+      onClose={isDeleting ? () => {} : onClose}
+      zClass="z-[70]"
+      maxWidthClass="max-w-[460px]"
+      header={
+        <div className="flex items-center gap-3 min-w-0">
+          <Trash2 size={16} className="text-error shrink-0" />
+          <div className="min-w-0">
+            <h2 className="text-sm font-semibold text-ink">
+              Delete {count} {plural}?
+            </h2>
+            <p className="text-[11px] text-ink/50 truncate">{where ? where.trim() : 'Selected rows'}</p>
+          </div>
+        </div>
+      }
+      footer={
+        <div className="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-ink/10">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isDeleting}
+            className="px-3.5 py-1.5 rounded-md border border-ink/20 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-50"
+          >
+            {finished ? 'Close' : 'Cancel'}
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={isDeleting || finished}
+            className="px-3.5 py-1.5 rounded-md bg-error text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
+          >
+            {isDeleting ? (
+              <>
+                <Loader2 size={13} className="animate-spin" />
+                <span>Deleting…</span>
+              </>
+            ) : (
+              <>
+                <Trash2 size={13} />
+                <span>Delete {count} {plural}</span>
+              </>
+            )}
+          </button>
+        </div>
+      }
+    >
+      <div className="px-5 py-4 space-y-3">
+        {sessions ? (
+          <ul className="text-[11.5px] leading-relaxed text-ink/70 space-y-1.5">
+            <li>
+              Each transcript is removed from{' '}
+              <span className="font-mono text-ink">~/.omp/agent/sessions</span> — the conversations are
+              gone from the sidebar and from oh-my-pi.
+            </li>
+            <li>Their subagent transcripts, side questions, queued messages and saved layout go too.</li>
+            <li>A session that is mid-run is refused rather than interrupted; stop it and delete again.</li>
+          </ul>
+        ) : (
+          <ul className="text-[11.5px] leading-relaxed text-ink/70 space-y-1.5">
+            <li>The workspaces are removed from this sidebar.</li>
+            <li>
+              Their directories and every transcript on disk are left alone — re-add a workspace with{' '}
+              <span className="font-mono text-ink">New Workspace</span> when you want it back.
+            </li>
+          </ul>
+        )}
+
+        {outcome?.error ? (
+          <div className="flex items-start gap-2 px-3 py-2 rounded-md border border-error/30 bg-error/5 text-[11px] text-ink/75">
+            <AlertTriangle size={13} className="mt-0.5 shrink-0 text-error" />
+            <span>{outcome.error}</span>
+          </div>
+        ) : finished ? (
+          <div className="flex items-start gap-2 px-3 py-2 rounded-md border border-ink/15 bg-ink/5 text-[11px] text-ink/75">
+            <span>
+              Removed {removed} {removed === 1 ? noun : `${noun}s`}
+              {refused.length > 0 ? `, ${refused.length} refused:` : '.'}
+            </span>
+          </div>
+        ) : (
+          <div className="flex items-start gap-2 px-3 py-2 rounded-md border border-error/30 bg-error/5 text-[11px] text-ink/75">
+            <AlertTriangle size={13} className="mt-0.5 shrink-0 text-error" />
+            <span>
+              {sessions
+                ? 'This cannot be undone from the UI. Archive a session instead to keep its transcript.'
+                : 'This removes the sidebar entry only. The folder itself is not deleted.'}
+            </span>
+          </div>
+        )}
+
+        {refused.length > 0 && (
+          <ul className="max-h-40 overflow-y-auto scrollbar-overlay-container space-y-1 text-[11px] text-ink/70">
+            {refused.map((entry) => (
+              <li key={entry.id} className="flex items-start gap-1.5">
+                {/* The whole id, truncated by CSS rather than sliced: a sliced
+                    `new-…` reads `new-1792`, which names nothing. */}
+                <span className="font-mono text-ink/50 shrink-0 max-w-[7rem] truncate" title={entry.id}>
+                  {entry.id}
+                </span>
+                <span className="min-w-0">{entry.error}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </Modal>
+  );
+}