@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/components/common/code-surface/theme.ts

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The code surface's type and chrome, in CodeMirror's own theme format.
+ *
+ * Type is INHERITED, not restated: the host element carries the font family,
+ * size and line box (the zoom control and the editor-font setting both write
+ * there), and `.cm-editor` inherits them. That is what keeps a zoom step a pure
+ * CSS change — a theme extension carrying a pixel size would have to be
+ * reconfigured on every step, and every reconfigure re-creates the editor's
+ * plugins (including the tokenizer).
+ *
+ * Colours are read through `--editor-*` custom properties with the app's
+ * palette as the FALLBACK:
+ *
+ * - `auto` (the default) writes none of them, so every declaration resolves to
+ *   `--theme-*` and an app theme flip repaints the editor with zero JS — the
+ *   same property the Shiki decorations rely on.
+ * - An explicit editor theme writes them on the surface's own host element
+ *   (`editorThemeVars`), so the editor paints Dracula while the console around
+ *   it stays on the app palette. Because the values arrive as CSS, switching
+ *   between two editor themes is also a repaint: nothing here is reconfigured.
+ *
+ * The one rule that cannot be a variable is the TOKEN colour. Shiki emits both
+ * palettes on every token, and which one paints is decided by the app's variant
+ * attribute — except an explicit editor theme tokenizes with ITSELF in both
+ * slots, so the two custom properties carry identical values and either one is
+ * correct. That is why the dark rule below is safe to state unconditionally.
+ */
+
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+/** The surface's own CSS. Everything here is structural, never per-layout. */
+export function surfaceTheme(): Extension {
+  return EditorView.theme({
+    '&': {
+      height: '100%',
+      backgroundColor: 'var(--editor-bg, transparent)',
+      color: 'var(--editor-fg, var(--theme-ink))',
+      fontSize: 'inherit',
+      fontFamily: 'inherit',
+      lineHeight: 'inherit',
+    },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-scroller': {
+      overflow: 'auto',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+    },
+    '.cm-content': {
+      // CM6 reads these two back as the document's padding, which is why the
+      // breathing room belongs here and not on a wrapper: a scroll container's
+      // own padding is not part of its scrollable overflow.
+      paddingTop: 'var(--surface-pad, 16px)',
+      paddingBottom: 'var(--surface-pad, 16px)',
+      caretColor: 'var(--editor-cursor, var(--theme-ink))',
+    },
+    '.cm-line': { padding: '0 var(--surface-pad, 16px)' },
+    // The gutter is CM6's own (lineNumbers()), styled to the panel's band. An
+    // explicit editor theme paints it in the theme's own surface, which is what
+    // VS Code does for the 46 themes that ship no `editorGutter.background`.
+    '.cm-gutters': {
+      backgroundColor: 'var(--editor-bg, var(--theme-canvas))',
+      color: 'var(--editor-gutter-fg, color-mix(in srgb, var(--theme-ink) 30%, transparent))',
+      border: 'none',
+      borderRight: '1px solid var(--editor-border, color-mix(in srgb, var(--theme-ink) 10%, transparent))',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+      padding: '0 12px 0 16px',
+      minWidth: '1.5rem',
+      textAlign: 'right',
+    },
+    // The selection is drawn by `drawSelection()`; the native one is left to
+    // the browser when the editor is not focused.
+    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground': {
+      backgroundColor: 'var(--editor-selection, color-mix(in srgb, var(--theme-ink) 20%, transparent))',
+    },
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: 'var(--editor-cursor, var(--theme-ink))',
+    },
+    // A find match, painted by the decoration field (`marks.ts`). The geometry
+    // rules are the ones the old markup layer needed: horizontal edges only, or
+    // a match spanning several tokens paints a seam between them.
+    '.cm-content .find-match': {
+      color: 'inherit',
+      backgroundColor: 'var(--editor-find, color-mix(in srgb, var(--theme-warning) 32%, transparent))',
+    },
+    '.cm-content .find-match[data-find-current]': {
+      backgroundColor:
+        'var(--editor-find-current, color-mix(in srgb, var(--theme-warning) 55%, transparent))',
+      borderTop: '1px solid color-mix(in srgb, var(--theme-warning) 75%, transparent)',
+      borderBottom: '1px solid color-mix(in srgb, var(--theme-warning) 75%, transparent)',
+    },
+    // Shiki tokens. The colour itself comes from the custom properties the
+    // decoration carries; `tailwind.css` holds the same pair for every other
+    // surface, and this block is the editor's copy of it. The `&`-less form
+    // below is CM6's base-class prefix, and the second rule is why an app theme
+    // flip repaints tokens with no re-tokenize.
+    '.cm-content .shiki-tok': { color: 'var(--shiki-light)' },
+    'html[data-theme-variant="dark"] & .cm-content .shiki-tok': { color: 'var(--shiki-dark)' },
+    '.cm-placeholder': { color: 'color-mix(in srgb, var(--editor-fg, var(--theme-ink)) 35%, transparent)' },
+  });
+}

package/src/client/components/common/editor-view-buttons/index.test.tsx

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The two width-mode buttons, driven through the REAL session-state provider.
+ *
+ * Three properties only a mount can see, and each fails silently:
+ *
+ * - The two toolbars draw the SAME state. `useSessionState` hands every caller
+ *   a private copy, so a version reading it would leave the diff toolbar
+ *   showing `normal` after the editor toolbar entered compact view — two
+ *   buttons disagreeing about one layout.
+ * - Each button reports `aria-pressed` for its own mode and nothing else, so
+ *   the pair reads as a mode selection rather than as two unrelated switches.
+ * - Clicking the ACTIVE mode returns to `normal`, which is the only way back to
+ *   a layout with the chat on screen without hunting for the other button.
+ *
+ * Rendered with `h()` against happy-dom, over a stubbed `fetch` that answers
+ * the session-state blob (the provider loads it before anything is ready).
+ */
+
+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 { EditorViewButtons } from '@/client/components/common/editor-view-buttons';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
+import { forgetSession } from '@/shared/lib/workspace/session-state/store';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+const SESSION = 'new-editor-view-buttons';
+/** The runner's own fetch, reached through `Bun` so a leaked stub cannot be mistaken for it. */
+const nativeFetch = Bun.fetch;
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+});
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+  }
+  forgetSession(SESSION);
+  (globalThis as unknown as Record<string, unknown>).fetch = nativeFetch;
+});
+
+afterAll(() => {
+  restoreDomGlobals();
+});
+
+/**
+ * Mount TWO button pairs under one provider — the editor toolbar's and the diff
+ * toolbar's — because "they share one slot" is the claim, and a single pair
+ * could pass with private copies.
+ */
+async function mount(stored: Record<string, unknown> = {}): Promise<void> {
+  const target = globalThis as unknown as Record<string, unknown>;
+  target.fetch = async () => {
+    const json = (body: unknown) =>
+      new Response(JSON.stringify(body), { status: 200, headers: { 'content-type': 'application/json' } });
+    return json({ sessionId: SESSION, state: stored });
+  };
+
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(
+      h(SessionStateProvider, {
+        sessionId: SESSION,
+        children: h(
+          'div',
+          null,
+          h('div', { id: 'editor-toolbar' }, h(EditorViewButtons, { size: 14 })),
+          h('div', { id: 'diff-toolbar' }, h(EditorViewButtons, { size: 13 })),
+        ),
+      }),
+      container,
+    );
+  });
+  // The provider's blob load settles across a tick.
+  for (let i = 0; i < 10; i += 1) await act(async () => {});
+}
+
+/** The named button inside one of the two toolbar hosts. */
+function button(toolbar: 'editor-toolbar' | 'diff-toolbar', name: string): HTMLButtonElement {
+  const host = container.querySelector(`#${toolbar}`);
+  const found = [...(host?.querySelectorAll('button') ?? [])].find(
+    (el) => el.getAttribute('aria-label') === name,
+  );
+  if (!found) throw new Error(`no "${name}" button in #${toolbar}`);
+  return found as HTMLButtonElement;
+}
+
+async function click(el: HTMLButtonElement): Promise<void> {
+  await act(async () => {
+    el.dispatchEvent(new window.MouseEvent('click', { bubbles: true }) as never);
+  });
+}
+
+describe('EditorViewButtons', () => {
+  test('both toolbars offer both modes, and neither is pressed by default', async () => {
+    await mount();
+
+    for (const toolbar of ['editor-toolbar', 'diff-toolbar'] as const) {
+      expect(button(toolbar, 'Compact view').getAttribute('aria-pressed')).toBe('false');
+      expect(button(toolbar, 'Full view').getAttribute('aria-pressed')).toBe('false');
+    }
+  });
+
+  test('a click enters the mode, and the OTHER toolbar shows the same state', async () => {
+    await mount();
+    await click(button('editor-toolbar', 'Compact view'));
+
+    expect(button('editor-toolbar', 'Compact view').getAttribute('aria-pressed')).toBe('true');
+    expect(button('diff-toolbar', 'Compact view').getAttribute('aria-pressed')).toBe('true');
+    expect(button('diff-toolbar', 'Full view').getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('the two modes are exclusive: entering one clears the other', async () => {
+    await mount();
+    await click(button('editor-toolbar', 'Compact view'));
+    await click(button('diff-toolbar', 'Full view'));
+
+    expect(button('editor-toolbar', 'Compact view').getAttribute('aria-pressed')).toBe('false');
+    expect(button('editor-toolbar', 'Full view').getAttribute('aria-pressed')).toBe('true');
+  });
+
+  test('clicking the active mode returns to the ordinary layout', async () => {
+    await mount();
+    await click(button('editor-toolbar', 'Full view'));
+    await click(button('editor-toolbar', 'Full view'));
+
+    expect(button('editor-toolbar', 'Full view').getAttribute('aria-pressed')).toBe('false');
+    expect(button('editor-toolbar', 'Compact view').getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('a mode stored for this session is restored on mount', async () => {
+    await mount({ 'layout.editorViewMode': 'full' });
+
+    expect(button('editor-toolbar', 'Full view').getAttribute('aria-pressed')).toBe('true');
+    expect(button('diff-toolbar', 'Full view').getAttribute('aria-pressed')).toBe('true');
+  });
+});

package/src/client/components/common/editor-view-buttons/index.tsx

@@ -0,0 +1,109 @@
+import { MessageSquareOff, PanelLeftClose } from 'lucide-preact';
+import type { LucideIcon } from 'lucide-preact';
+import { useSharedSessionState } from '@/client/hooks/workspace/session-state';
+import type { ToolbarOverflowAction } from '@/client/components/common/toolbar-row';
+import {
+  DEFAULT_EDITOR_VIEW_MODE,
+  EDITOR_VIEW_MODE_KEY,
+  isEditorViewMode,
+  toggledEditorViewMode,
+  type EditorViewMode,
+  type EditorViewModeTarget,
+} from '@/shared/lib/workspace/editor-view-mode';
+
+/**
+ * The two width modes, as data.
+ *
+ * Each is a row so the buttons, their labels and their icons cannot drift
+ * apart: the label states exactly which columns disappear, because "Compact"
+ * and "Full" are words that could mean anything, and the icons are DIFFERENT
+ * SHAPES rather than two spellings of the same one — the third width control
+ * beside them (full SCREEN, which covers the right panel too) keeps its own
+ * `Maximize` glyph.
+ */
+export const EDITOR_VIEW_MODES: Array<{
+  target: EditorViewModeTarget;
+  label: string;
+  hint: string;
+  Icon: LucideIcon;
+}> = [
+  {
+    target: 'compact',
+    label: 'Compact view',
+    hint: 'Editor takes the chat width — chat hidden, sidebar and right panel kept',
+    Icon: MessageSquareOff,
+  },
+  {
+    target: 'full',
+    label: 'Full view',
+    hint: 'Editor takes the chat and sidebar width — chat and sidebar hidden, right panel kept',
+    Icon: PanelLeftClose,
+  },
+];
+
+/** The mode in force, and the setter the buttons share. */
+export function useEditorViewMode(): { mode: EditorViewMode; setMode: (next: EditorViewMode) => void } {
+  const [stored, setMode] = useSharedSessionState<EditorViewMode>(EDITOR_VIEW_MODE_KEY, DEFAULT_EDITOR_VIEW_MODE);
+  return { mode: isEditorViewMode(stored) ? stored : DEFAULT_EDITOR_VIEW_MODE, setMode };
+}
+
+/**
+ * The same two modes as `⋯` menu rows, for a toolbar too narrow to draw them.
+ *
+ * A hook rather than a plain function because the menu row has to CLICK the same
+ * slot the buttons write, and a row built from a stale mode would enter the mode
+ * already in force (which the toggle reads as "leave it").
+ */
+export function useEditorViewActions(): ToolbarOverflowAction[] {
+  const { mode, setMode } = useEditorViewMode();
+  return EDITOR_VIEW_MODES.map(({ target, label, Icon }) => ({
+    // A menu row has no hover title, so the sentence that explains the mode is
+    // part of what the row says rather than lost with the button's tooltip.
+    label,
+    icon: Icon,
+    active: mode === target,
+    onSelect: () => setMode(toggledEditorViewMode(mode, target)),
+  }));
+}
+
+interface EditorViewButtonsProps {
+  /** Glyph size: the editor toolbar draws 14px, the diff toolbar 13px. */
+  size?: number;
+}
+
+/**
+ * The two width-mode buttons, drawn by BOTH the editor and the diff toolbar.
+ *
+ * One component because the two toolbars are the same surface on two tab kinds:
+ * a mode entered from the diff and a mode entered from a file must be the same
+ * mode, and a second copy of these rules is how the diff ends up offering a
+ * width the layout does not implement. The state is the shared session slot
+ * (see `useEditorViewLayout`) so the layout collapses the columns on the same
+ * render.
+ */
+export function EditorViewButtons({ size = 14 }: EditorViewButtonsProps) {
+  const { mode, setMode } = useEditorViewMode();
+
+  return (
+    <>
+      {EDITOR_VIEW_MODES.map(({ target, label, hint, Icon }) => {
+        const active = mode === target;
+        return (
+          <button
+            key={target}
+            type="button"
+            onClick={() => setMode(toggledEditorViewMode(mode, target))}
+            className={`flex items-center justify-center p-1.5 rounded transition-colors cursor-pointer flex-shrink-0 ${
+              active ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'
+            }`}
+            title={hint}
+            aria-label={label}
+            aria-pressed={active}
+          >
+            <Icon size={size} />
+          </button>
+        );
+      })}
+    </>
+  );
+}

package/src/client/components/common/shell-update-button/Modal.tsx

@@ -0,0 +1,163 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The shell update's dialog: confirm, install, report.
+ *
+ * ## Why the message lives HERE and not in the footer
+ *
+ * The footer is a row of controls, one of them 24px wide. A sentence like "Kabmo
+ * 0.3.2 installed — restarting" pushed into that row pushed the controls around
+ * and read as a status line for the SIDEBAR rather than for the update the user
+ * just asked for. The control therefore stays a control, and everything a run has
+ * to say — the confirmation before it, the progress during it, the shell's own
+ * refusal after it — is a dialog.
+ *
+ * ## The confirmation is not ceremony
+ *
+ * The click replaces the app the user is looking at and restarts it. That is not
+ * something a 24px glyph should do on a single press with no words, which is why
+ * the first thing the dialog says is what will happen and what will be lost
+ * (nothing but the window: the servers and the session are the console's own
+ * state, and they survive).
+ *
+ * ## Every phase reports the shell's own words
+ *
+ * `done` and `error` print the sentence the SHELL sent. Nothing here invents
+ * "Update failed": a shell that verified the download and declined knows why, and
+ * that reason is the only thing a user can act on.
+ */
+
+import { AlertCircle, Check, Download, Loader2 } from 'lucide-preact';
+import { Modal } from '@/client/components/common/Modal';
+import {
+  shellDownloadLabel,
+  type ShellDownload,
+} from '@/client/hooks/ui/updates/shell-download';
+import type { ShellUpdatePhase } from '@/client/hooks/ui/updates/shell-update';
+
+/**
+ * What the dialog is showing.
+ *
+ * `confirm` is the dialog's own phase, not the hook's: the hook's `idle` means "no
+ * run has happened", and the dialog is only ever open on a run the user is about to
+ * start or one that already ran.
+ */
+export type ShellUpdateModalPhase = ShellUpdatePhase | 'confirm';
+
+interface ShellUpdateModalProps {
+  download: ShellDownload;
+  phase: ShellUpdateModalPhase;
+  message: string | null;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+/** What this platform actually does with the artifact, in the platform's terms. */
+function installNote(download: ShellDownload): string {
+  switch (download.platform) {
+    case 'macos':
+      return 'Kabmo downloads the new build, checks its signature and replaces itself. The window reopens on the new version.';
+    case 'windows':
+      return 'Kabmo downloads the new installer and runs it silently. The window closes and reopens on the new version.';
+    case 'linux':
+      return 'Kabmo downloads the new AppImage over the one it is running from and restarts. A package install (.deb / .rpm) cannot replace itself — that build is offered the release page instead.';
+    default:
+      return 'Kabmo installs the new build and restarts.';
+  }
+}
+
+const SECONDARY =
+  'rounded-md border border-ink/20 px-3 py-1.5 text-[11px] font-medium text-ink transition-colors hover:border-ink/40 cursor-pointer';
+const PRIMARY =
+  'inline-flex items-center gap-1.5 rounded-md bg-ink px-3 py-1.5 text-[11px] font-medium text-paper transition-opacity hover:opacity-90 disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer';
+
+export function ShellUpdateModal({ download, phase, message, onConfirm, onClose }: ShellUpdateModalProps) {
+  const label = shellDownloadLabel(download);
+
+  return (
+    <Modal
+      onClose={onClose}
+      maxWidthClass="max-w-sm"
+      header={<h2 className="text-sm font-semibold text-ink">{label}</h2>}
+      footer={
+        <div className="flex items-center justify-end gap-2 px-5 pb-4">
+          {phase === 'confirm' && (
+            <>
+              <button type="button" className={SECONDARY} onClick={onClose}>
+                Cancel
+              </button>
+              <button type="button" className={PRIMARY} onClick={onConfirm}>
+                <Download size={13} />
+                <span>Install update</span>
+              </button>
+            </>
+          )}
+
+          {phase === 'working' && (
+            <button type="button" className={PRIMARY} disabled>
+              <Loader2 size={13} className="animate-spin motion-reduce:animate-none" />
+              <span>Installing…</span>
+            </button>
+          )}
+
+          {phase === 'done' && (
+            <button type="button" className={PRIMARY} onClick={onClose}>
+              <Check size={13} />
+              <span>Close</span>
+            </button>
+          )}
+
+          {phase === 'error' && (
+            <>
+              <button type="button" className={SECONDARY} onClick={onClose}>
+                Close
+              </button>
+              {/* Retry re-runs the SAME offer: the release is still the one the
+                  console read, and a failure here is the shell's download or its
+                  verification, not a stale version. */}
+              <button type="button" className={PRIMARY} onClick={onConfirm}>
+                <Download size={13} />
+                <span>Try again</span>
+              </button>
+            </>
+          )}
+        </div>
+      }
+    >
+      <div className="px-5 py-4 space-y-3 text-[11px] leading-5 text-ink/70">
+        {phase === 'confirm' && (
+          <>
+            <p>{installNote(download)}</p>
+            <p className="text-ink/50">
+              Version {download.latest} · the console keeps running; only this window restarts.
+            </p>
+          </>
+        )}
+
+        {phase === 'working' && (
+          <p className="flex items-center gap-2 text-ink">
+            <Loader2 size={14} className="animate-spin motion-reduce:animate-none" />
+            <span>Downloading and verifying the new build…</span>
+          </p>
+        )}
+
+        {(phase === 'done' || phase === 'error') && (
+          <p
+            role="status"
+            className={`flex items-start gap-2 ${phase === 'error' ? 'text-error' : 'text-ink'}`}
+          >
+            {phase === 'error' ? (
+              <AlertCircle size={14} className="mt-0.5 shrink-0" />
+            ) : (
+              <Check size={14} className="mt-0.5 shrink-0" />
+            )}
+            <span>{message ?? (phase === 'error' ? 'The update failed.' : 'Update installed.')}</span>
+          </p>
+        )}
+      </div>
+    </Modal>
+  );
+}