@kabmo-labs/kabmo 0.0.1 → 0.2.0

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>
+  );
+}

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The checkbox a sidebar row grows while a batch selection is active.
+ *
+ * A native `<input type="checkbox">` rather than a styled span: it carries the
+ * checked/indeterminate state, the keyboard behaviour and the announcement for
+ * free, and `indeterminate` (a workspace whose sessions are partly selected) is
+ * a DOM PROPERTY with no attribute equivalent — it has to be assigned, which is
+ * what the ref below is for.
+ *
+ * The click is stopped from propagating: the control sits inside a row that
+ * selects or expands on click, so a checkbox that bubbled would do both.
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+
+export interface SelectionCheckboxProps {
+  checked: boolean;
+  /** Draw the dash state (a header whose children are partly selected). */
+  indeterminate?: boolean;
+  /** The accessible name — every row's checkbox names the row it belongs to. */
+  label: string;
+  onChange: () => void;
+  /** `sm` is the row-sized control; `md` is the header's. */
+  size?: 'sm' | 'md';
+}
+
+export function SelectionCheckbox({
+  checked,
+  indeterminate = false,
+  label,
+  onChange,
+  size = 'sm',
+}: SelectionCheckboxProps) {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      checked={checked}
+      aria-label={label}
+      onChange={onChange}
+      onClick={(event) => event.stopPropagation()}
+      className={`shrink-0 accent-ink cursor-pointer rounded border-ink/30 ${
+        size === 'md' ? 'w-3.5 h-3.5' : 'w-3 h-3'
+      }`}
+    />
+  );
+}

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

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The folder-level batch rules, in isolation.
+ *
+ * This is the arithmetic both sidebars share, and every case below is a way the
+ * two could disagree — or a way "select all" could reach something the user
+ * cannot see. The pagination case is the one a browser found: a window would
+ * tick rows with no checkbox on screen and no way to untick them.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { folderBatchState } from '@/client/components/common/batch-selection/folder-state';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
+import type { SessionItemData, WorkspaceFolderData } from '@/shared/types';
+
+const folder = { id: 7, name: 'kabmo', isExpanded: true, sessions: [], hasMore: false, totalSessions: 0 } as WorkspaceFolderData;
+
+function sessions(count: number, archived = 0): SessionItemData[] {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `s${index}`,
+    folder_id: 7,
+    title: `session ${index}`,
+    is_archived: archived,
+  }));
+}
+
+/** A binding whose selection is `selected` over `mode`. */
+function binding(
+  mode: 'session' | 'workspace',
+  selected: string[],
+  scopeFolderId: number | null = 7,
+): BatchBinding {
+  const all = new Set(selected);
+  return {
+    mode,
+    scopeFolderId,
+    selected,
+    toggle: () => {},
+    selectAllOf: () => {},
+    unselectAllOf: () => {},
+    summaryOf: (available) => {
+      const count = available.filter((id) => all.has(id)).length;
+      return {
+        count,
+        all: available.length > 0 && count === available.length,
+        some: count > 0 && count < available.length,
+      };
+    },
+  };
+}
+
+function state(overrides: Partial<Parameters<typeof folderBatchState>[0]> = {}) {
+  return folderBatchState({
+    folder,
+    sessions: sessions(3),
+    showArchived: false,
+    visibleCount: 1,
+    activeSessionId: null,
+    ...overrides,
+  });
+}
+
+describe('folderBatchState without a mode', () => {
+  test('no checkboxes and the window applies', () => {
+    const result = state();
+    expect(result.folderCheckbox).toBe(false);
+    expect(result.sessionCheckboxes).toBe(false);
+    expect(result.folderSummary).toBeNull();
+    // `visibleCount` 1 over 3 rows: the normal list paginates.
+    expect(result.rendered).toHaveLength(1);
+    expect(result.hiddenCount).toBe(2);
+  });
+});
+
+describe('folderBatchState in session mode', () => {
+  test('the scoped folder draws a header checkbox and row checkboxes', () => {
+    const result = state({ batch: binding('session', []) });
+    expect(result.folderCheckbox).toBe(true);
+    expect(result.sessionCheckboxes).toBe(true);
+    expect(result.selectableIds).toEqual(['s0', 's1', 's2']);
+  });
+
+  test('the window is lifted so every selectable row is on screen', () => {
+    const result = state({ batch: binding('session', []) });
+    expect(result.rendered).toHaveLength(3);
+    expect(result.hiddenCount).toBe(0);
+  });
+
+  test('a workspace that did not start the selection stays ordinary', () => {
+    const result = state({ batch: binding('session', [], 99) });
+    expect(result.folderCheckbox).toBe(false);
+    expect(result.sessionCheckboxes).toBe(false);
+    expect(result.rendered).toHaveLength(1);
+  });
+
+  test('the summary reports partial selection against the offered rows', () => {
+    const result = state({ batch: binding('session', ['s1']) });
+    expect(result.folderSummary).toEqual({ count: 1, all: false, some: true });
+  });
+
+  test('archived rows are not offered while the filter hides them', () => {
+    const result = state({
+      batch: binding('session', []),
+      sessions: [...sessions(2), ...sessions(1, 1)],
+      showArchived: false,
+    });
+    expect(result.selectableIds).toEqual(['s0', 's1']);
+  });
+});
+
+describe('folderBatchState in workspace mode', () => {
+  test('the header owns the FOLDER id, and rows stay ordinary', () => {
+    const result = state({ batch: binding('workspace', []) });
+    expect(result.folderCheckbox).toBe(true);
+    expect(result.sessionCheckboxes).toBe(false);
+    expect(result.selectableIds).toEqual(['7']);
+    // The window is untouched: workspace mode selects folders, not rows.
+    expect(result.rendered).toHaveLength(1);
+    expect(result.hiddenCount).toBe(2);
+  });
+
+  test('a selected folder reads as all of its own one-id scope', () => {
+    const result = state({ batch: binding('workspace', ['7']) });
+    expect(result.folderSummary).toEqual({ count: 1, all: true, some: false });
+  });
+});

package/src/client/components/common/batch-selection/folder-state.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One folder's batch state, shared by the desktop category and the phone's
+ * drawer item.
+ *
+ * The two layouts draw the same rules — which checkbox the header carries, what
+ * its tri-state reports, which rows are selectable, and how the pagination
+ * window behaves — and they had drifted into two copies of that arithmetic.
+ * Stating it once is what keeps "select all" counting the same rows on a phone
+ * and on a desktop.
+ *
+ * Three rules are load-bearing:
+ *
+ *   - a workspace checkbox exists in BOTH modes, but means different things: the
+ *     folder itself in `workspace` mode, its rows in `session` mode;
+ *   - the summary is computed over the rows the ARCHIVE FILTER offers, so
+ *     "select all" can never reach a row the user cannot see or unselect;
+ *   - a session selection lifts the pagination window, because a window would
+ *     tick rows that have no checkbox on screen.
+ */
+
+import { selectableSessionIds } from '@/shared/lib/workspace/batch-select';
+import { selectVisibleSessions } from '@/shared/lib/workspace/session-visibility';
+import { headerSelectable, rowsSelectable } from '@/client/components/common/batch-selection/types';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
+import type { SessionItemData, WorkspaceFolderData } from '@/shared/types';
+
+export interface FolderBatchInput {
+  batch?: BatchBinding;
+  folder: WorkspaceFolderData;
+  /** The rows the archive filter currently offers. */
+  sessions: SessionItemData[];
+  showArchived: boolean;
+  /** The list's page size (`useShowMore`), unused while selecting. */
+  visibleCount: number;
+  activeSessionId: number | string | null;
+  sessionStatus?: Record<string, string | undefined>;
+}
+
+export interface FolderBatchState {
+  /** The header draws a checkbox (workspace mode, or this folder's session mode). */
+  folderCheckbox: boolean;
+  /** The rows draw checkboxes. */
+  sessionCheckboxes: boolean;
+  /** Null when the header has no checkbox. */
+  folderSummary: { count: number; all: boolean; some: boolean } | null;
+  /** What the header checkbox selects. */
+  selectableIds: string[];
+  /** Header click: select or unselect everything this header owns. */
+  toggleFolderSelection: () => void;
+  /** Rows to render — every offered row while selecting, else the window. */
+  rendered: SessionItemData[];
+  /** Rows the next "Show more" reveals; 0 while selecting. */
+  hiddenCount: number;
+}
+
+export function folderBatchState({
+  batch,
+  folder,
+  sessions,
+  showArchived,
+  visibleCount,
+  activeSessionId,
+  sessionStatus,
+}: FolderBatchInput): FolderBatchState {
+  const folderCheckbox = batch ? headerSelectable(batch, folder.id) : false;
+  const sessionCheckboxes = batch ? rowsSelectable(batch, folder.id) : false;
+  const selectableIds = sessionCheckboxes
+    ? selectableSessionIds(sessions, showArchived)
+    : folderCheckbox
+      ? [String(folder.id)]
+      : [];
+  const folderSummary = batch && folderCheckbox ? batch.summaryOf(selectableIds) : null;
+
+  const windowed = selectVisibleSessions(sessions, visibleCount, { activeSessionId, sessionStatus });
+
+  const toggleFolderSelection = () => {
+    if (!batch) return;
+    if (folderCheckbox && !sessionCheckboxes) {
+      batch.toggle(String(folder.id));
+      return;
+    }
+    if (!sessionCheckboxes) return;
+    if (folderSummary?.all) batch.unselectAllOf(selectableIds);
+    else batch.selectAllOf(selectableIds);
+  };
+
+  return {
+    folderCheckbox,
+    sessionCheckboxes,
+    folderSummary,
+    selectableIds,
+    toggleFolderSelection,
+    rendered: sessionCheckboxes ? sessions : windowed.rendered,
+    hiddenCount: sessionCheckboxes ? 0 : windowed.hiddenCount,
+  };
+}

package/src/client/components/common/batch-selection/types.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The props a category/folder hands down to its rows while a batch selection is
+ * active, shared by the desktop category and the phone's drawer item.
+ *
+ * It is one object rather than six props because every field is only meaningful
+ * together: a `selected` list without a `mode` is a selection nothing draws, and
+ * a `scopeFolderId` without the session mode is a scope nothing applies to. Both
+ * layouts read the same shape, so a row cannot grow a checkbox on one layout and
+ * not the other.
+ */
+
+import type { BatchMode, SelectionSummary } from '@/shared/lib/workspace/batch-select';
+
+export interface BatchBinding {
+  /** The active mode, or null when the sidebar is not selecting. */
+  mode: BatchMode | null;
+  /** The workspace a SESSION selection is scoped to (null in workspace mode). */
+  scopeFolderId: number | null;
+  /** Ids currently selected, in click order. */
+  selected: readonly string[];
+  toggle: (id: string) => void;
+  selectAllOf: (ids: readonly string[]) => void;
+  unselectAllOf: (ids: readonly string[]) => void;
+  /** Tri-state summary over a set of ids the folder can offer. */
+  summaryOf: (available: readonly string[]) => SelectionSummary;
+}
+
+/** True when this folder's own header should draw a checkbox. */
+export function headerSelectable(binding: BatchBinding, folderId: number): boolean {
+  return binding.mode === 'workspace'
+    || (binding.mode === 'session' && binding.scopeFolderId === folderId);
+}
+
+/** True when this folder's SESSION rows should draw checkboxes. */
+export function rowsSelectable(binding: BatchBinding, folderId: number): boolean {
+  return binding.mode === 'session' && binding.scopeFolderId === folderId;
+}