@kabmo-labs/kabmo 0.7.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/header-controls/index.tsx

@@ -6,6 +6,8 @@ import { ContextUsageButton } from '@/client/components/common/context-usage-but
 import { HeaderPanelButtons } from '@/client/components/common/header-panel-buttons';
 import { useHeaderEntries } from '@/client/components/common/header-panel-buttons/entries';
 import { HeaderMoreMenu } from '@/client/components/common/header-controls/MoreMenu';
+import { WindowControls } from '@/client/components/common/window-controls';
+import { drawsWindowControls } from '@/client/lib/desktop/titlebar';
 import { useAuthEnabled, useAuthState } from '@/client/hooks/ui/auth';
 import { useViewportAtLeast } from '@/client/hooks/ui/media-query';
 import { withChord } from '@/client/lib/ui/with-chord';
@@ -111,7 +113,17 @@ export function HeaderControls({
   const headerEntries = useHeaderEntries(layout);
 
   return (
-    <div className="flex items-center space-x-1">
+    // `titlebar-no-drag` belongs HERE, on the cluster's own root, not on each
+    // call site. `app-region` INHERITS (WebView2's own spec says so, and
+    // Chromium 152 began enforcing it), so a header that marks itself a drag
+    // region makes every descendant a drag handle unless something below it
+    // says otherwise — a control inside one is unclickable, silently. The
+    // desktop navbar wrapped this cluster in a `titlebar-no-drag` div and the
+    // PHONE's header did not, so on Windows every control in a phone-width
+    // window (reload, context, sign out, the right panel, `⋯`) swallowed its
+    // own click. Stating it on the cluster is what makes the next layout that
+    // draws it correct by construction.
+    <div className="flex items-center space-x-1 titlebar-no-drag">
       {layout === 'desktop' && <PWAInstallButton />}
       <HeaderPanelButtons layout={layout} entries={headerEntries.inline} />
       {/* The cluster's ORDER is fixed; what changes on a narrow phone is that
@@ -169,6 +181,17 @@ export function HeaderControls({
           <Smartphone size={size} />
         </button>
       )}
+      {/* The Windows and Linux shells draw no caption buttons of their own —
+          their webview is the whole window — so the PAGE owns minimise,
+          maximise and close. This lives in the shared cluster rather than in
+          the desktop navbar for a measured reason: a desktop shell window can
+          be NARROWER than the layout breakpoint (`App` switches to the mobile
+          layout below 768px, and all three shells allow a 720px window), and
+          the phone header drew no window controls at all. A user who shrank
+          the window lost close/minimise/maximise entirely, with no title bar
+          behind them to fall back on. macOS never reaches this branch: its
+          traffic lights are the system's, so `drawsWindowControls` is false. */}
+      {drawsWindowControls() && <WindowControls />}
     </div>
   );
 }