@kabmo-labs/kabmo 0.7.0 → 0.9.0

package/src/client/components/settings/categories/AppearanceSettings.tsx

@@ -3,6 +3,7 @@ import type { SettingsState } from '@/shared/types';
 import { resolveThemeId } from '@/shared/lib/theme/catalog';
 import { ThemeGrid } from '@/client/components/settings/categories/appearance-settings/ThemeGrid';
 import { EditorFontSection } from '@/client/components/settings/categories/appearance-settings/EditorFontSection';
+import { EditorThemeSection } from '@/client/components/settings/categories/appearance-settings/EditorThemeSection';
 
 interface AppearanceSettingsProps {
   settings: SettingsState;
@@ -25,6 +26,8 @@ export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsPro
       </section>
 
       <EditorFontSection settings={settings} onUpdate={onUpdate} />
+
+      <EditorThemeSection settings={settings} onUpdate={onUpdate} />
     </div>
   );
 }

package/src/client/components/settings/categories/ProjectSettings.tsx

@@ -6,9 +6,12 @@ import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
+import { WorktreeSettings } from '@/client/components/settings/categories/project-settings/WorktreeSettings';
+import { useToasts } from '@/client/hooks/ui/toasts';
 
 export function ProjectSettings() {
   const masterDetail = useSettingsMasterDetail();
+  const { pushToast } = useToasts();
   const [projects, setProjects] = useState<ProjectConfigItem[]>([]);
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const [accentColorOptions, setAccentColorOptions] = useState<AccentColorOption[]>([]);
@@ -179,14 +182,25 @@ export function ProjectSettings() {
         }
         detail={
           selectedProject ? (
-            <ProjectDetailsForm
-              project={selectedProject}
-              canDelete={projects.length > 1}
-              onUpdateField={handleUpdateField}
-              onDeleteProject={handleDeleteProject}
-              availableModels={availableModels}
-              accentColorOptions={accentColorOptions}
-            />
+            <div className="flex flex-col">
+              <ProjectDetailsForm
+                project={selectedProject}
+                canDelete={projects.length > 1}
+                onUpdateField={handleUpdateField}
+                onDeleteProject={handleDeleteProject}
+                availableModels={availableModels}
+                accentColorOptions={accentColorOptions}
+              />
+              {/* Worktrees belong to the PROJECT, not to a session: a create here
+                  has no chat, and the next chat picks it from the composer. */}
+              <div className="border-t border-ink/10 px-4 py-4">
+                <WorktreeSettings
+                  root={selectedProject.path}
+                  folderId={selectedProject.folderId ?? null}
+                  onReport={(message, tone) => pushToast(message, tone ?? 'success', { duration: 6000 })}
+                />
+              </div>
+            </div>
           ) : null
         }
       />

package/src/client/components/settings/categories/appearance-settings/EditorThemeSection.test.tsx

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor theme picker.
+ *
+ * Three properties are invisible to a markup check and each is a bug if dropped:
+ *
+ * - **`Auto` is a card and is selected by default**, so an install that never
+ *   touches this section renders exactly what it did before the feature.
+ * - **The swatch is drawn from the row's own colours**, not from the app
+ *   palette: a card that previewed every theme in the app's ink would make 65
+ *   themes look identical, which is the whole point of the grid.
+ * - **A click writes the theme id through `onUpdate`**, which is what the modal
+ *   turns into the event an already-open editor subscribes to.
+ *
+ * Rendered with `h()` against happy-dom; the modal's write path is pinned in
+ * `settings/Modal`'s own suite.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { EditorThemeSection } from '@/client/components/settings/categories/appearance-settings/EditorThemeSection';
+import { EDITOR_AUTO_THEME_ID, EDITOR_THEMES, resolveEditorTheme } from '@/shared/lib/code/editor/themes';
+import { EDITOR_DEFAULT_FONT_FAMILY } from '@/shared/lib/code/editor/typography';
+import type { SettingsState } from '@/shared/types';
+
+const DOM_GLOBALS = [
+  'window', 'document', 'navigator', 'HTMLElement', 'Element', 'Node', 'Event', 'CustomEvent',
+  'getComputedStyle',
+] as const;
+
+const native: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+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 native)) native[key] = target[key];
+    const value = (win as unknown as Record<string, unknown>)[key];
+    if (value !== undefined) target[key] = value;
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (native[key] === undefined) delete target[key];
+    else target[key] = native[key];
+  }
+});
+
+let container: HTMLElement | null = null;
+type Update = Partial<SettingsState> | ((prev: SettingsState) => SettingsState);
+let lastUpdate: Update | null = null;
+
+/** Reset through a function: assigning `null` inline would narrow the variable
+ *  at every later read, and the assertions below exist to see the VALUE. */
+function resetUpdate(): void {
+  lastUpdate = null;
+}
+
+/** What the last click asked to persist, as a value the assertions can read. */
+function lastPatch(): unknown {
+  return lastUpdate;
+}
+
+function settings(editorTheme: string): SettingsState {
+  return { editorTheme, editorFont: EDITOR_DEFAULT_FONT_FAMILY } as SettingsState;
+}
+
+async function mount(editorTheme: string): Promise<HTMLElement> {
+  if (container) render(null, container);
+  container = document.body.appendChild(document.createElement('div'));
+  await act(async () => {
+    render(
+      h(EditorThemeSection, {
+        settings: settings(editorTheme),
+        onUpdate: (update: Update) => {
+          lastUpdate = update;
+        },
+      }),
+      container!,
+    );
+  });
+  return container;
+}
+
+/** The card whose label starts with `label` (the label is the first text). */
+function card(root: HTMLElement, label: string): HTMLButtonElement | undefined {
+  return Array.from(root.querySelectorAll('button')).find((button) =>
+    (button.textContent ?? '').trim().startsWith(label),
+  );
+}
+
+describe('editor theme picker', () => {
+  test('Auto is a card, and it is the selected one by default', async () => {
+    const root = await mount(EDITOR_AUTO_THEME_ID);
+    const auto = card(root, 'Auto');
+    expect(auto).toBeDefined();
+    expect(auto!.getAttribute('aria-pressed')).toBe('true');
+    // Every shipped theme is offered beside it, so the grid is not a two-item
+    // list with the catalogue hidden behind a filter.
+    expect(root.querySelectorAll('button[aria-pressed]').length).toBe(EDITOR_THEMES.length + 1);
+  });
+
+  test('a stored theme is the selected card, and Auto is not', async () => {
+    const root = await mount('dracula');
+    expect(card(root, 'Dracula Theme')!.getAttribute('aria-pressed')).toBe('true');
+    expect(card(root, 'Auto')!.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('the swatch is drawn in the theme’s OWN colours', async () => {
+    const root = await mount('dracula');
+    const theme = resolveEditorTheme('dracula');
+    expect(theme).not.toBeNull();
+    const swatch = Array.from(card(root, 'Dracula Theme')!.querySelectorAll('span')).find(
+      (node) => (node as HTMLElement).style.backgroundColor !== '',
+    ) as HTMLElement | undefined;
+    expect(swatch).toBeDefined();
+    // The card paints the theme's own surface, not the app's — which is what
+    // makes 65 themes distinguishable in one grid.
+    expect(swatch!.style.backgroundColor.toLowerCase()).toBe(theme!.bg.toLowerCase());
+  });
+
+  test('a click writes the theme id', async () => {
+    resetUpdate();
+    const root = await mount(EDITOR_AUTO_THEME_ID);
+    await act(async () => {
+      card(root, 'Nord')!.click();
+    });
+    expect(lastPatch()).toEqual({ editorTheme: 'nord' });
+  });
+
+  test('the Auto card writes the sentinel, not an empty string', async () => {
+    resetUpdate();
+    const root = await mount('nord');
+    await act(async () => {
+      card(root, 'Auto')!.click();
+    });
+    // An empty value would resolve to `auto` too, but it would also be a value
+    // no reader can distinguish from a missing setting.
+    expect(lastPatch()).toEqual({ editorTheme: EDITOR_AUTO_THEME_ID });
+  });
+
+  test('the light/dark filters narrow the grid without dropping Auto', async () => {
+    const root = await mount(EDITOR_AUTO_THEME_ID);
+    const darkFilter = Array.from(root.querySelectorAll('button')).find(
+      (button) => (button.textContent ?? '').trim() === 'Dark',
+    );
+    await act(async () => {
+      darkFilter!.click();
+    });
+    const labels = Array.from(root.querySelectorAll('button[aria-pressed]')).map((button) =>
+      (button.textContent ?? '').trim().split(/\d/)[0],
+    );
+    expect(labels.length).toBe(EDITOR_THEMES.filter((theme) => theme.variant === 'dark').length + 1);
+    expect(labels.some((label) => label.startsWith('GitHub Light'))).toBe(false);
+    // Auto is a choice, not a light/dark theme, so a variant filter keeps it.
+    expect(labels.some((label) => label.startsWith('Auto'))).toBe(true);
+  });
+});

package/src/client/components/settings/categories/appearance-settings/EditorThemeSection.tsx

@@ -0,0 +1,184 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The code editor's colour theme, as a filterable grid of cards.
+ *
+ * A second axis beside the app palette (see `themes.ts`): the console keeps its
+ * own theme and the editor wears whichever TextMate theme the reader works in.
+ * `auto` is the first card and the default, so an install that never opens this
+ * picker behaves exactly as before.
+ *
+ * Three properties are load-bearing and each is a bug if dropped:
+ *
+ * - **The swatch is drawn from the generated colour rows, not from the theme
+ *   module.** 65 TextMate definitions is 1.3 MB; a grid that fetched them to
+ *   draw itself would download the whole catalogue to show a colour. The rows
+ *   carry the surface, the ink and three syntax accents — the colours that
+ *   actually tell two themes apart at card size.
+ * - **The preview is set in the theme's OWN colours**, so an unselected card
+ *   still shows what selecting it does.
+ * - **Selecting is a write, and the write is announced** (`Modal` dispatches
+ *   `omp:editor-theme-changed`), which is what reaches an editor that is
+ *   already open — `appSettings` is a boot-time prop and would only apply on a
+ *   reload.
+ */
+
+import { useMemo, useState } from 'preact/hooks';
+import { Check, Moon, Palette, Sun } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+import {
+  EDITOR_AUTO_THEME_ID,
+  EDITOR_THEMES,
+  type EditorTheme,
+} from '@/shared/lib/code/editor/themes';
+import { EDITOR_FONT_CHOICES } from '@/shared/lib/code/editor/typography';
+
+interface EditorThemeSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+type VariantFilter = 'all' | 'light' | 'dark';
+
+const FILTERS: ReadonlyArray<{ id: VariantFilter; label: string }> = [
+  { id: 'all', label: 'All' },
+  { id: 'light', label: 'Light' },
+  { id: 'dark', label: 'Dark' },
+];
+
+/** The face the cards' sample line is set in: the editor's own choice. */
+function sampleFace(font: string): string {
+  const choice = EDITOR_FONT_CHOICES.find((entry) => entry.id === font);
+  return `"${choice?.id ?? EDITOR_FONT_CHOICES[0].id}", monospace`;
+}
+
+function ThemeSwatch({ theme, face }: { theme: EditorTheme; face: string }) {
+  return (
+    <span
+      className="block overflow-hidden rounded border border-ink/10"
+      style={{ backgroundColor: theme.bg, color: theme.fg }}
+    >
+      <span className="block px-1.5 py-1 font-mono text-[10px] leading-[1.4]" style={{ fontFamily: face }}>
+        <span style={{ color: theme.keyword }}>const</span> <span>answer</span>{' '}
+        <span style={{ color: theme.keyword }}>=</span> <span style={{ color: theme.string }}>42</span>
+        <span>{';'}</span>
+        <span className="block truncate" style={{ color: theme.comment }}>
+          {'// '}
+          {theme.label}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+export function EditorThemeSection({ settings, onUpdate }: EditorThemeSectionProps) {
+  const active = settings.editorTheme || EDITOR_AUTO_THEME_ID;
+  const [filter, setFilter] = useState<VariantFilter>('all');
+  const face = sampleFace(settings.editorFont);
+
+  const themes = useMemo(
+    () => (filter === 'all' ? EDITOR_THEMES : EDITOR_THEMES.filter((theme) => theme.variant === filter)),
+    [filter],
+  );
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h3 className="font-semibold text-sm uppercase tracking-wider text-ink/80 flex items-center gap-2">
+          <Palette size={16} className="text-ink/60" />
+          Editor Theme
+        </h3>
+        <p className="text-[11px] text-ink/60 mt-1">
+          Colours for the code editor only — the console around it keeps the theme above. <strong>Auto</strong>{' '}
+          follows the app palette; any other choice paints the editor's own surface, gutter, selection and
+          syntax, and applies to every open editor without a reload.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-1.5">
+        {FILTERS.map((option) => (
+          <button
+            key={option.id}
+            type="button"
+            onClick={() => setFilter(option.id)}
+            className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors cursor-pointer ${
+              filter === option.id
+                ? 'border-ink bg-ink text-paper'
+                : 'border-ink/20 bg-paper text-ink/70 hover:border-ink/40 hover:text-ink'
+            }`}
+          >
+            {option.id === 'light' && <Sun size={11} className="mr-1 inline align-[-1px]" />}
+            {option.id === 'dark' && <Moon size={11} className="mr-1 inline align-[-1px]" />}
+            {option.label}
+          </button>
+        ))}
+        <span className="ml-auto font-mono text-[11px] text-ink/50">
+          {filter === 'all' ? `${themes.length} themes` : `${themes.length} shown`}
+        </span>
+      </div>
+
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        {/* `Auto` is a card rather than a checkbox: it is one of the choices,
+            and a checkbox beside a grid makes the default look like an
+            override of the thing it is a peer of. It is drawn under EVERY
+            filter — it is neither light nor dark, and a user who filtered to
+            Dark must still be able to get back to the app palette without
+            first clearing the filter. */}
+        {(
+          <button
+            type="button"
+            onClick={() => onUpdate({ editorTheme: EDITOR_AUTO_THEME_ID })}
+            aria-pressed={active === EDITOR_AUTO_THEME_ID}
+            className={`flex w-full flex-col gap-2 rounded-lg border p-2 text-left transition-colors cursor-pointer ${
+              active === EDITOR_AUTO_THEME_ID
+                ? 'border-ink bg-ink/5 ring-1 ring-ink/20'
+                : 'border-ink/20 bg-paper hover:border-ink/40 hover:bg-ink/5'
+            }`}
+          >
+            <span className="flex items-center gap-2">
+              <span className="truncate font-semibold text-ink">Auto</span>
+              <span className="shrink-0 rounded-full border border-ink/15 px-1.5 py-px text-[9px] font-semibold uppercase tracking-wider text-ink/50">
+                app palette
+              </span>
+              {active === EDITOR_AUTO_THEME_ID && <Check size={14} className="ml-auto shrink-0 text-ink" />}
+            </span>
+            <span className="flex h-8 items-center justify-center rounded border border-dashed border-ink/20 text-[10px] text-ink/50">
+              Follows the theme above
+            </span>
+          </button>
+        )}
+
+        {themes.map((theme) => {
+          const selected = active === theme.id;
+          return (
+            <button
+              key={theme.id}
+              type="button"
+              onClick={() => onUpdate({ editorTheme: theme.id })}
+              aria-pressed={selected}
+              className={`flex w-full flex-col gap-2 rounded-lg border p-2 text-left transition-colors cursor-pointer ${
+                selected
+                  ? 'border-ink bg-ink/5 ring-1 ring-ink/20'
+                  : 'border-ink/20 bg-paper hover:border-ink/40 hover:bg-ink/5'
+              }`}
+            >
+              <span className="flex items-center gap-2">
+                <span className="truncate font-semibold text-ink" title={theme.label}>
+                  {theme.label}
+                </span>
+                <span className="shrink-0 rounded-full border border-ink/15 px-1.5 py-px text-[9px] font-semibold uppercase tracking-wider text-ink/50">
+                  {theme.variant}
+                </span>
+                {selected && <Check size={14} className="ml-auto shrink-0 text-ink" />}
+              </span>
+              <ThemeSwatch theme={theme} face={face} />
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/src/client/components/settings/categories/project-settings/WorktreeSettings.tsx

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Settings → Projects → Worktrees: the list, and the two settings that decide
+ * where a new one lands.
+ *
+ * A row carries what the reader actually asks of a list of worktrees: which
+ * branch is held there (and therefore cannot be checked out anywhere else), how
+ * many chats start in it, and whether it is dirty. `missing` is its own line
+ * because a worktree whose folder was deleted outside Kabmo still owns its
+ * sessions, and hiding it would hide them.
+ *
+ * The two fields below the list are the settings a create reads on the server
+ * (`worktreeDirectory`, `worktreeCarryIgnored`), so what is typed here is what
+ * the next create uses — including one started by a scheduled task.
+ */
+
+import { useState } from 'preact/hooks';
+import { readKabmoSetting, writeSetting } from '@/shared/lib/settings/client';
+import { useWorktrees } from '@/client/hooks/workspace/worktree/index';
+import { removeWorktree } from '@/client/hooks/workspace/worktree/index';
+import { WORKTREE_CARRY_SETTING, WORKTREE_DIRECTORY_SETTING } from '@/shared/lib/fs/worktree/settings-keys';
+import { branchDeletable, removalRefusal, worktreeRowDetail } from '@/client/components/settings/categories/project-settings/worktree-row';
+
+export interface WorktreeSettingsProps {
+  /** The selected project's `project_path`; the section is inert without one. */
+  root: string | null;
+  folderId: number | null;
+  /** Report a refusal — the section never claims a removal it did not get. */
+  onReport: (message: string, tone?: 'success' | 'error') => void;
+}
+
+export function WorktreeSettings({ root, folderId, onReport }: WorktreeSettingsProps) {
+  const { worktrees, base, loading, error, isRepo, refresh } = useWorktrees({ root, folderId }, Boolean(root));
+  const [directory, setDirectory] = useState(() => {
+    const stored = readKabmoSetting<string>(WORKTREE_DIRECTORY_SETTING);
+    return typeof stored === 'string' ? stored : '';
+  });
+  const [carry, setCarry] = useState(() => readKabmoSetting<boolean>(WORKTREE_CARRY_SETTING) !== false);
+  // `detached` rows name a commit instead of a branch, and the payload carries it.
+
+  const [removing, setRemoving] = useState<string | null>(null);
+
+  if (!root) {
+    return <p className="text-xs text-ink/50">Bind this workspace to a repository to manage its worktrees.</p>;
+  }
+
+  const removable = worktrees.filter((worktree) => !worktree.isPrimary);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-1">
+        <h3 className="text-xs font-semibold text-ink">Worktrees</h3>
+        {loading && <p className="text-[11px] text-ink/50">Reading worktrees…</p>}
+        {error && (
+          // A failed read is REPORTED, never rendered as "none": the two look
+          // identical on screen and only one of them is actionable.
+          <p className="text-[11px] text-error" title={error}>
+            Worktrees could not be read: {error}
+          </p>
+        )}
+        {!loading && !error && isRepo === false && (
+          // The list is empty for a reason the row has to NAME: a folder that
+          // is not a repository can never have a worktree, and "No worktrees
+          // yet" would read as one that could be created.
+          <p className="text-[11px] text-ink/50">Worktrees need a Git repository.</p>
+        )}
+        {!loading && !error && isRepo !== false && removable.length === 0 && (
+          <p className="text-[11px] text-ink/50">No worktrees yet.</p>
+        )}
+        {removable.map((worktree) => (
+          <div key={worktree.path} className="group flex items-center gap-2 rounded-md px-1 py-1.5 hover:bg-ink/5">
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-xs text-ink">{worktree.branch || 'detached'}</p>
+              <p className="truncate text-[10.5px] text-ink/50" title={worktree.path}>
+                {worktreeRowDetail(worktree)}
+              </p>
+            </div>
+            <button
+              type="button"
+              disabled={removing === worktree.path || removalRefusal(worktree) !== null}
+              aria-label={`Remove worktree ${worktree.branch || worktree.path}`}
+              title={removalRefusal(worktree) ?? 'Remove worktree'}
+              onClick={() => {
+                setRemoving(worktree.path);
+                void removeWorktree({ root, folderId }, worktree.path, { deleteBranch: branchDeletable(worktree) })
+                  .then((result) => {
+                    onReport(
+                      result.branchDeleted
+                        ? `Removed ${worktree.branch} and its branch`
+                        : `Removed ${worktree.branch}${result.branchKept ? ' (branch kept)' : ''}`,
+                      'success',
+                    );
+                    return refresh();
+                  })
+                  .catch((cause: unknown) => onReport(cause instanceof Error ? cause.message : String(cause), 'error'))
+                  .finally(() => setRemoving(null));
+              }}
+              className="shrink-0 rounded px-2 py-1 text-[11px] text-ink/60 hover:bg-error/10 hover:text-error disabled:opacity-40"
+            >
+              Remove
+            </button>
+          </div>
+        ))}
+      </section>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-xs font-semibold text-ink">Worktree location</span>
+        <input
+          value={directory}
+          onChange={(event) => setDirectory(event.currentTarget.value)}
+          onBlur={() => writeSetting(WORKTREE_DIRECTORY_SETTING, directory.trim())}
+          placeholder={base}
+          className="h-8 rounded-md border border-ink/15 bg-paper px-2 text-xs text-ink outline-none focus:border-ink/40"
+        />
+        <span className="text-[10.5px] text-ink/50">
+          Where new worktrees are created. Relative paths are resolved against the project; ~ is your home directory.
+          Empty uses {base}.
+        </span>
+      </label>
+
+      <label className="flex items-start gap-2">
+        <input
+          type="checkbox"
+          checked={carry}
+          onChange={(event) => {
+            const next = event.currentTarget.checked;
+            setCarry(next);
+            writeSetting(WORKTREE_CARRY_SETTING, next);
+          }}
+          className="mt-0.5"
+        />
+        <span className="flex flex-col gap-0.5">
+          <span className="text-xs font-semibold text-ink">Copy ignored files into new worktrees</span>
+          <span className="text-[10.5px] text-ink/50">
+            A new worktree gets the project's ignored build folders (node_modules, .venv, target) copied in, so it works
+            without reinstalling.
+          </span>
+        </span>
+      </label>
+    </div>
+  );
+}

package/src/client/components/settings/categories/project-settings/worktree-row.test.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * What a worktree row says, and when its Remove control is refused.
+ *
+ * These are the sentences a reader decides on, so they are functions rather than
+ * inline template strings: a markup test would prove the component renders
+ * *something*, while the questions here are "which branch is held" (and therefore
+ * cannot be checked out anywhere else), "how many chats start here", and "would
+ * this removal lose work".
+ */
+
+import { describe, expect, test } from 'bun:test';
+import {
+  branchDeletable,
+  removalRefusal,
+  worktreeRowDetail,
+} from '@/client/components/settings/categories/project-settings/worktree-row';
+import type { WorktreeInfo } from '@/shared/lib/workspace/worktree/types';
+
+const base: WorktreeInfo = {
+  path: '/data/worktrees/abc/cosmic-dolphin',
+  branch: 'wt/cosmic-dolphin',
+  head: 'a1b2c3d4e5f6',
+  detached: false,
+  missing: false,
+  isPrimary: false,
+  dirty: 0,
+  aheadOfStart: 0,
+  startRef: 'HEAD',
+  sessions: 2,
+};
+
+describe('worktreeRowDetail', () => {
+  test('names the branch, the chat count and the tree state', () => {
+    expect(worktreeRowDetail(base)).toBe('wt/cosmic-dolphin checked out here · 2 chats · clean');
+  });
+
+  test('a single chat is not "1 chats"', () => {
+    expect(worktreeRowDetail({ ...base, sessions: 1 })).toContain('1 chat ·');
+  });
+
+  test('changed files are counted', () => {
+    expect(worktreeRowDetail({ ...base, dirty: 3 })).toContain('3 changed');
+  });
+
+  test('a detached row names a commit instead of a branch', () => {
+    expect(worktreeRowDetail({ ...base, branch: '', detached: true })).toContain('detached @ a1b2c3d');
+  });
+
+  test('a missing worktree says its chats still open — that is why the row stays', () => {
+    expect(worktreeRowDetail({ ...base, missing: true })).toContain('its chats still open');
+  });
+});
+
+describe('removal rules', () => {
+  test('a clean worktree with no commits of its own may lose its branch', () => {
+    expect(branchDeletable(base)).toBe(true);
+    expect(removalRefusal(base)).toBeNull();
+  });
+
+  test('a branch with commits of its own is kept, and the checkbox is disabled', () => {
+    expect(branchDeletable({ ...base, aheadOfStart: 2 })).toBe(false);
+    // The worktree itself is still removable: only the branch is protected.
+    expect(removalRefusal({ ...base, aheadOfStart: 2 })).toBeNull();
+  });
+
+  test('a dirty worktree is refused with its count', () => {
+    expect(removalRefusal({ ...base, dirty: 1 })).toBe('1 uncommitted file here would be lost.');
+    expect(removalRefusal({ ...base, dirty: 4 })).toBe('4 uncommitted files here would be lost.');
+  });
+
+  test('the main checkout is never removable', () => {
+    expect(removalRefusal({ ...base, isPrimary: true })).toContain('main checkout');
+  });
+
+  test('a detached row has no branch to delete', () => {
+    expect(branchDeletable({ ...base, branch: '', detached: true })).toBe(false);
+  });
+});