@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/common/todo-row/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One todo task row, shared by both surfaces that draw a list — the chat
+ * timeline's `todo` tool card and the right-panel Todo view.
+ *
+ * It lives in `common/` because the two surfaces show the same thing: one row
+ * per task, with the five-status icon/tone mapping and the blocker note. Two
+ * copies of that markup is how a `blocked` task ends up drawn as a plain
+ * pending one on one surface and correctly on the other.
+ *
+ * A task whose content is an init-list entry rather than prose (omp records
+ * the shape a model sent under the wrong key — see
+ * `@/shared/lib/chat/todo/nested-phase`) is drawn as the phase it names, with
+ * that entry's items listed beneath it, instead of as a JSON blob.
+ */
+
+import { Ban, CheckCircle2, Circle, Loader2, OctagonAlert } from 'lucide-preact';
+import type { TodoItem, TodoStatus } from '@/shared/types/todo';
+import { taskNote, todoStatusVisual } from '@/shared/lib/chat/todo/progress';
+import { parseNestedPhaseEntry } from '@/shared/lib/chat/todo/nested-phase';
+
+function StatusIcon({ status, className }: { status: TodoStatus; className: string }) {
+  switch (status) {
+    case 'completed':
+      return <CheckCircle2 size={13} className={className} />;
+    case 'in_progress':
+      return <Loader2 size={13} className={`${className} animate-spin`} />;
+    case 'abandoned':
+      return <Ban size={13} className={className} />;
+    case 'blocked':
+      return <OctagonAlert size={13} className={className} />;
+    default:
+      return <Circle size={13} className={className} />;
+  }
+}
+
+export function TodoRow({ task, current }: { task: TodoItem; current: boolean }) {
+  const visual = todoStatusVisual(task.status);
+  const note = taskNote(task);
+  // Two producers reach this row with different data: the chat card's parser
+  // has already labelled the content and kept the encoded items in `notes`,
+  // while the right-panel view renders omp's snapshot verbatim, where the
+  // content is still the raw blob. Parsing the content covers the second, and
+  // the stored `notes` the first.
+  const nested = parseNestedPhaseEntry(task.content);
+  const label = nested ? nested.phase : task.content;
+  const items = nested ? nested.items : task.notes;
+
+  return (
+    <div
+      className={`flex items-start gap-2.5 px-2.5 py-1.5 transition-colors ${
+        current ? 'bg-ink/[0.04]' : ''
+      }`}
+    >
+      <StatusIcon status={task.status} className={`mt-[2px] shrink-0 ${visual.tone}`} />
+      <div className="min-w-0 flex-1">
+        <div
+          className={`text-[11.5px] leading-snug ${
+            visual.closed
+              ? 'text-ink/40 line-through'
+              : visual.active
+                ? 'font-medium text-ink'
+                : 'text-ink/75'
+          }`}
+        >
+          {label}
+        </div>
+        {items && items.length > 0 && (
+          <ul className="mt-0.5 space-y-0.5">
+            {items.map((item, i) => (
+              <li key={i} className="text-[10.5px] leading-snug text-ink/55 break-words">
+                · {item}
+              </li>
+            ))}
+          </ul>
+        )}
+        {note && (
+          <div className="mt-0.5 text-[10.5px] leading-snug text-warning/90 break-words">{note}</div>
+        )}
+      </div>
+      {visual.active && (
+        <span className="shrink-0 rounded bg-ink/8 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-ink/70">
+          Now
+        </span>
+      )}
+    </div>
+  );
+}

package/src/client/components/common/viewport.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Device-viewport presets for the USER browser panel's iframe. There the box
+ * *is* the layout viewport, so a preset re-runs the page's media queries for
+ * real. The AGENT panel does not use these: its surface is a fixed-resolution
+ * screencast JPEG, which a preset could only letterbox while claiming to
+ * emulate a device (emulation belongs to the agent: `tab.emulate()`).
+ */
+
+import type { ViewportMode } from '@/shared/types';
+
+export const VIEWPORT_CLASSES: Record<ViewportMode, string> = {
+  'desktop-16-9': 'w-full max-w-[1280px] aspect-video max-h-full border border-ink/20 rounded-lg shadow-md overflow-hidden my-auto',
+  laptop: 'w-[1024px] max-w-full h-[768px] max-h-full border border-ink/20 rounded-lg shadow-md overflow-hidden my-auto',
+  tablet: 'w-[768px] max-w-full h-[1024px] max-h-full border border-ink/20 rounded-lg shadow-md overflow-hidden my-auto',
+  mobile: 'w-[375px] max-w-full h-[667px] max-h-full border border-ink/20 rounded-xl shadow-md overflow-hidden my-auto',
+  'mobile-lg': 'w-[414px] max-w-full h-[896px] max-h-full border border-ink/20 rounded-xl shadow-md overflow-hidden my-auto',
+  responsive: 'w-full h-full border-0',
+};

package/src/client/components/common/workspace-options-menu/index.tsx

@@ -0,0 +1,113 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Workspace options menu body shared by the desktop category header and the
+ * mobile category item: pin/unpin, delete, and the inline delete confirmation.
+ *
+ * Only the body is shared — each sidebar owns its own absolutely-positioned
+ * container (different widths, radii, and padding) and its trigger button, so
+ * the two shells stay pixel-identical while the actions and labels have one
+ * source of truth.
+ */
+
+import { FolderOpen, ListChecks, Pin, PinOff, Trash2 } from 'lucide-preact';
+
+interface WorkspaceOptionsMenuProps {
+  variant: 'desktop' | 'mobile';
+  isPinned?: boolean;
+  /** Reveal the workspace directory in the platform file manager. Omitted for
+   *  an unbound folder, which has no directory of its own. */
+  onOpenFolder?: () => void;
+  /** Enter the session batch-selection mode scoped to this workspace. */
+  onSelectSessions?: () => void;
+  confirmDelete: boolean;
+  onPin: () => void;
+  onDelete: () => void;
+  onRequestDelete: () => void;
+  onCancelDelete: () => void;
+}
+
+export function WorkspaceOptionsMenu({
+  variant,
+  isPinned = false,
+  onOpenFolder,
+  onSelectSessions,
+  confirmDelete,
+  onPin,
+  onDelete,
+  onRequestDelete,
+  onCancelDelete,
+}: WorkspaceOptionsMenuProps) {
+  if (variant === 'mobile') {
+    return confirmDelete ? (
+      <>
+        <div className="px-3 py-2 text-ink/80 font-medium">Delete workspace?</div>
+        <button type="button" onClick={onDelete} className="w-full text-left px-3 py-2 hover:bg-error/10 text-error flex items-center space-x-2">
+          <Trash2 size={13} />
+          <span>Yes, delete</span>
+        </button>
+        <button type="button" onClick={onCancelDelete} className="w-full text-left px-3 py-2 hover:bg-ink/5 text-ink/70">
+          Cancel
+        </button>
+      </>
+    ) : (
+      <>
+        {onOpenFolder && (
+          <button type="button" onClick={onOpenFolder} className="w-full text-left px-3 py-2 hover:bg-ink/5 text-ink/80 flex items-center space-x-2">
+            <FolderOpen size={13} />
+            <span>Go to Explorer</span>
+          </button>
+        )}
+        <button type="button" onClick={onPin} className="w-full text-left px-3 py-2 hover:bg-ink/5 text-ink/80 flex items-center space-x-2">
+          {isPinned ? <PinOff size={13} /> : <Pin size={13} />}
+          <span>{isPinned ? 'Unpin Workspace' : 'Pin Workspace'}</span>
+        </button>
+        {onSelectSessions && (
+          <button type="button" onClick={onSelectSessions} className="w-full text-left px-3 py-2 hover:bg-ink/5 text-ink/80 flex items-center space-x-2">
+            <ListChecks size={13} />
+            <span>Select sessions</span>
+          </button>
+        )}
+        <button type="button" onClick={onRequestDelete} className="w-full text-left px-3 py-2 hover:bg-error/10 text-error flex items-center space-x-2">
+          <Trash2 size={13} />
+          <span>Delete Workspace</span>
+        </button>
+      </>
+    );
+  }
+
+  return confirmDelete ? (
+    <>
+      <div className="px-3 py-1.5 text-xs text-ink/80 font-medium">Delete workspace?</div>
+      <button type="button" onClick={onDelete} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error">
+        <Trash2 size={12} /><span>Yes, delete</span>
+      </button>
+      <button type="button" onClick={onCancelDelete} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/70">
+        <span>Cancel</span>
+      </button>
+    </>
+  ) : (
+    <>
+      {onOpenFolder && (
+        <button type="button" onClick={onOpenFolder} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80">
+          <FolderOpen size={12} /><span>Go to Explorer</span>
+        </button>
+      )}
+      <button type="button" onClick={onPin} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80">
+        {isPinned ? <PinOff size={12} /> : <Pin size={12} />}
+        <span>{isPinned ? 'Unpin Workspace' : 'Pin Workspace'}</span>
+      </button>
+      {onSelectSessions && (
+        <button type="button" onClick={onSelectSessions} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80">
+          <ListChecks size={12} /><span>Select sessions</span>
+        </button>
+      )}
+      <button type="button" onClick={onRequestDelete} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error">
+        <Trash2 size={12} /><span>Delete Workspace</span>
+      </button>
+    </>
+  );
+}

package/src/client/components/layout/PanelVisibilityMenu.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+import { Check } from 'lucide-preact';
+
+/** Viewport coordinates the menu hangs off. */
+export interface PanelMenuAnchor {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+export interface PanelVisibilityItem {
+  /** A built-in view id or a `plugin:<id>/<panel>` key. */
+  id: string;
+  title: string;
+  /** Contributions can be hidden; the bar's fixed furniture cannot. */
+  removable: boolean;
+}
+
+interface PanelVisibilityMenuProps {
+  anchor: PanelMenuAnchor;
+  items: PanelVisibilityItem[];
+  hidden: string[];
+  onToggle: (id: string, visible: boolean) => void;
+  onClose: () => void;
+}
+
+/**
+ * The activity bar's right-click menu: which views the bar shows.
+ *
+ * The shape is VS Code's, including the part that makes it useful: a view that
+ * is hidden does not vanish from this list — it stays here with its checkbox
+ * off, which is the only place it can be switched back on. Hiding a view
+ * therefore never loses it.
+ *
+ * Positions itself from its OWN measured size, so the list growing with the
+ * installed plugins cannot push the last row off-screen.
+ */
+export function PanelVisibilityMenu({ anchor, items, hidden, onToggle, onClose }: PanelVisibilityMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const el = menuRef.current;
+    if (!el) return;
+    const { width, height } = el.getBoundingClientRect();
+    const margin = 8;
+    const below = anchor.bottom + 4;
+    const top = below + height + margin <= window.innerHeight ? below : Math.max(margin, anchor.top - height - 4);
+    // The bar is on the RIGHT edge, so the menu opens to its left.
+    const desiredLeft = anchor.left - width - 4;
+    setPos({ top, left: Math.max(margin, Math.min(desiredLeft, window.innerWidth - width - margin)) });
+  }, [anchor]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose]);
+
+  return createPortal(
+    <div className="fixed inset-0 z-[70]" onClick={onClose} onContextMenu={(e) => { e.preventDefault(); onClose(); }}>
+      <div
+        ref={menuRef}
+        role="menu"
+        aria-label="Panel visibility"
+        style={{
+          top: pos?.top ?? anchor.bottom + 4,
+          left: pos?.left ?? anchor.left,
+          // Hidden for the single pre-measure render; `useLayoutEffect` settles
+          // the position before the browser paints, so this never flashes.
+          visibility: pos ? 'visible' : 'hidden',
+        }}
+        className="fixed z-[70] w-52 bg-paper border border-ink/15 rounded-lg shadow-xl py-1 text-xs text-ink font-sans"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="px-3 py-1 text-[10px] uppercase font-mono text-ink/40 border-b border-ink/10 mb-1">
+          Panels
+        </div>
+        {items.map((item) => {
+          const visible = !hidden.includes(item.id);
+          return (
+            <button
+              key={item.id}
+              type="button"
+              role="menuitemcheckbox"
+              aria-checked={visible}
+              // A pinned view is the bar's own furniture and has no row to
+              // return to if it were removed, so its checkbox is inert rather
+              // than a control that appears to work and does nothing.
+              disabled={!item.removable}
+              onClick={() => onToggle(item.id, !visible)}
+              className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center gap-2 transition-colors cursor-pointer disabled:cursor-default disabled:hover:bg-transparent"
+            >
+              <span className="w-3 flex-shrink-0">
+                {visible ? <Check size={12} className={item.removable ? 'text-ink/70' : 'text-ink/30'} /> : null}
+              </span>
+              <span className={`truncate ${item.removable ? '' : 'text-ink/50'}`}>{item.title}</span>
+              {!item.removable ? (
+                <span className="ml-auto text-[10px] text-ink/35 flex-shrink-0">pinned</span>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/client/components/layout/RightActivityBar.test.ts

@@ -0,0 +1,272 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The Source Control dot belongs to that panel, so it must describe the repo the
+ * panel is on. It polled the workspace root instead: with `projects/a` selected
+ * the dot answered for the root's repository, and it kept answering for the repo
+ * the user had just left until the next poll.
+ *
+ * The dot now reads the `git:<root>\0<repo>` topic, so this drives it through a
+ * real realtime server: the topic a scope is subscribed to IS the assertion —
+ * a dot that answers for the wrong tree subscribes to the wrong topic.
+ *
+ * Rendered with `h()` (no JSX) against happy-dom.
+ */
+
+import { afterAll, afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { RightActivityBar } from '@/client/components/layout/RightActivityBar';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
+import { useRepoScope } from '@/client/hooks/workspace/repo-scope';
+import { primeKabmoSettings, readKabmoSetting, writeSetting } from '@/shared/lib/settings/client';
+import { PANEL_ORDER_SETTING_KEY } from '@/shared/lib/workspace/panel-order';
+import { RIGHT_PANEL_TYPES } from '@/shared/lib/workspace/right-panels';
+import { resetRealtimeClient } from '@/shared/lib/realtime/client';
+import { gitTopic } from '@/shared/lib/realtime/protocol';
+import { startRealtimeTestServer, type RealtimeTestServer } from '@/test-support/realtime-server';
+import { installDomGlobals, pristineWebSocket, restoreDomGlobals } from '@/test-support/pristine-globals';
+import type { TopicResolver } from '@/server/lib/realtime/hub.server';
+
+/** The runner's own fetch, reached through `Bun` so a stub leaked onto the global cannot be mistaken for it. */
+const nativeFetch = Bun.fetch;
+
+const ROOT = '/ws';
+const SESSION = 'new-activity-dot';
+
+let container: HTMLElement;
+let server: RealtimeTestServer;
+/** Every scope the dot subscribed to, so the topic it asked for is assertable. */
+const subscribedScopes: string[] = [];
+
+/** The picker the panel owns: writes the slot the dot follows. */
+function Picker({ repo }: { repo: string }) {
+  const { setActiveRepo } = useRepoScope(ROOT);
+  return h('button', { id: 'pick', onClick: () => setActiveRepo(repo) }, 'pick');
+}
+
+// Installed per CASE, not per file: another suite's teardown can strip
+// `window` mid-file when the runner interleaves files, and this hook's
+// first render would then throw `window is not defined`.
+beforeEach(async () => {
+  // Only `projects/a` has anything to report, so the dot is a verdict on which
+  // scope it asked about.
+  const status = (changes: unknown[]) => ({ changes, branch: 'main', branches: ['main'], remoteBranches: [] });
+  const resolver: TopicResolver = async (topic) => {
+    subscribedScopes.push(topic);
+    return topic === gitTopic(`${ROOT}\u0000projects/a`) ? status([{ path: 'a.ts', status: ' M' }]) : status([]);
+  };
+  server = await startRealtimeTestServer(new Map<string, TopicResolver>([
+    [gitTopic(`${ROOT}\u0000.`), resolver],
+    [gitTopic(`${ROOT}\u0000projects/a`), resolver],
+  ]));
+  const win = new Window({ url: `http://127.0.0.1:${server.port}` });
+  installDomGlobals(win);
+  const target = globalThis as unknown as Record<string, unknown>;
+  target.WebSocket = pristineWebSocket;
+  target.fetch = async (input: unknown) => {
+    const url = String(input);
+    const json = (body: unknown) => new Response(JSON.stringify(body), { status: 200, headers: { 'content-type': 'application/json' } });
+    if (url.includes('/state')) {
+      return json({ sessionId: SESSION, state: { 'workspace.activeRepo': { root: ROOT, repo: 'projects/a' } } });
+    }
+    if (url.includes('reposOnly')) return json({ repos: ['.', 'projects/a', 'projects/b'] });
+    return json({ changes: [] });
+  };
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  target.fetch = nativeFetch;
+  restoreDomGlobals();
+});
+
+afterEach(() => {
+  // UNMOUNT, not just detach. A detached container keeps its Preact tree alive,
+  // and any effect that subscribes to a module-level store will re-render it —
+  // which throws once `afterAll` has restored the runner's globals and there is
+  // no `window`. The panel under test reads a plugin store now, so a detached
+  // tree is a live tree that fails in a later file.
+  if (container) {
+    render(null, container);
+    container.remove();
+  }
+  subscribedScopes.length = 0;
+  // The settings snapshot is module state shared by every suite in one `bun
+  // test` process, and a case here writes a panel order into it.
+  primeKabmoSettings({});
+  resetRealtimeClient();
+  server?.stop();
+});
+
+async function mount() {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(
+      h(SessionStateProvider, {
+        sessionId: SESSION,
+        children: h('div', null, h(Picker, { repo: '.' }), h(RightActivityBar, {
+          activePanel: 'git',
+          onChangePanel: () => {},
+          isPanelOpen: true,
+          hasActiveContext: true,
+          activeProjectPath: ROOT,
+          refreshKey: 0,
+        })),
+      }),
+      container,
+    );
+  });
+  await server.waitForTopic(gitTopic(`${ROOT}\u0000projects/a`), (value) => value !== null);
+  for (let i = 0; i < 20; i += 1) await act(async () => {});
+  return container;
+}
+
+const dot = () => Boolean(container.querySelector('[title="Ada perubahan git"]'));
+
+describe('RightActivityBar git dot', () => {
+  test('reports the selected repo, and follows the picker to the root', async () => {
+    await mount();
+
+    // The stored pick is projects/a, so the dot asked about THAT topic — not
+    // the workspace root's.
+    expect(subscribedScopes).toContain(gitTopic(`${ROOT}\u0000projects/a`));
+    expect(dot()).toBe(true);
+
+    await act(async () => {
+      (container.querySelector('#pick') as HTMLButtonElement).click();
+    });
+    await server.waitForTopic(gitTopic(`${ROOT}\u0000.`), (value) => value !== null);
+    await act(async () => {
+      for (let i = 0; i < 8; i += 1) await Promise.resolve();
+    });
+
+    // The picker moved to the root: the dot follows to that topic and clears.
+    expect(subscribedScopes).toContain(gitTopic(`${ROOT}\u0000.`));
+    expect(dot()).toBe(false);
+  });
+});
+
+/** The bar's buttons, in the order they are drawn. */
+const buttonLabels = () =>
+  [...container.querySelectorAll('nav button[aria-label]')].map((el) => el.getAttribute('aria-label') ?? '');
+
+const buttonFor = (label: string) =>
+  [...container.querySelectorAll('nav button[aria-label]')].find(
+    (el) => el.getAttribute('aria-label') === label,
+  ) as HTMLElement;
+
+/**
+ * A drag from one button to another, as the browser delivers it.
+ *
+ * `dataTransfer` is a minimal stand-in: happy-dom has no `DataTransfer`, and
+ * the handlers read only `setData`/`dropEffect`/`effectAllowed`.
+ */
+async function dragOnto(from: string, to: string) {
+  const transfer = {
+    data: {} as Record<string, string>,
+    effectAllowed: '',
+    dropEffect: 'move',
+    setData(type: string, value: string) {
+      this.data[type] = value;
+    },
+    getData(type: string) {
+      return this.data[type] ?? '';
+    },
+  };
+  const fire = (element: HTMLElement, type: string) => {
+    const event = new window.Event(type, { bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'dataTransfer', { value: transfer });
+    element.dispatchEvent(event);
+  };
+  await act(async () => {
+    fire(buttonFor(from), 'dragstart');
+  });
+  await act(async () => {
+    fire(buttonFor(to), 'dragover');
+  });
+  // The drop is what commits — a `dragend` alone is a cancelled gesture.
+  await act(async () => {
+    fire(buttonFor(to), 'drop');
+  });
+  await act(async () => {
+    fire(buttonFor(from), 'dragend');
+  });
+  for (let i = 0; i < 8; i += 1) await act(async () => {});
+}
+
+describe('RightActivityBar panel order', () => {
+  test('a drag reorders the bar and persists the new order', async () => {
+    primeKabmoSettings({});
+    await mount();
+
+    // The shipped order, before anything is dragged.
+    expect(buttonLabels()[0]).toBe('Context & Telemetry');
+
+    // Todos is drawn below Context; drag it onto Context's slot.
+    await dragOnto('Todos', 'Context & Telemetry');
+
+    const drawn = buttonLabels();
+    // Todos was dragged UP onto Context, so it lands just ABOVE it — the
+    // insertion point is the target's own index (the same rule `QueueList`
+    // uses), and every other button keeps its relative order.
+    expect(drawn.slice(0, 3)).toEqual(['Todos', 'Context & Telemetry', 'Files']);
+
+    // The write is what makes the order survive a reload: it goes to the
+    // GLOBAL setting, not to this session's layout state.
+    const stored = readKabmoSetting<string[]>(PANEL_ORDER_SETTING_KEY);
+    expect(stored?.slice(0, 3)).toEqual(['todo', 'context', 'files']);
+    expect(stored).toHaveLength(RIGHT_PANEL_TYPES.length);
+  });
+
+  test('a stored order is drawn on the first render', async () => {
+    primeKabmoSettings({});
+    writeSetting(PANEL_ORDER_SETTING_KEY, ['plan', ...RIGHT_PANEL_TYPES.filter((id) => id !== 'plan')]);
+    await mount();
+
+    expect(buttonLabels()[0]).toBe('Plan (sesi ini)');
+  });
+
+  test('a cancelled drag writes nothing', async () => {
+    primeKabmoSettings({});
+    await mount();
+    const before = buttonLabels();
+
+    // `dragstart` + `dragover` with NO drop is what Esc produces: the preview
+    // moved while the gesture ran, and the stored order must not follow it.
+    const transfer = {
+      data: {} as Record<string, string>,
+      effectAllowed: '',
+      dropEffect: 'none',
+      setData(type: string, value: string) {
+        this.data[type] = value;
+      },
+      getData(type: string) {
+        return this.data[type] ?? '';
+      },
+    };
+    const fire = (element: HTMLElement, type: string) => {
+      const event = new window.Event(type, { bubbles: true, cancelable: true });
+      Object.defineProperty(event, 'dataTransfer', { value: transfer });
+      element.dispatchEvent(event);
+    };
+    await act(async () => {
+      fire(buttonFor('Todos'), 'dragstart');
+    });
+    await act(async () => {
+      fire(buttonFor('Context & Telemetry'), 'dragover');
+    });
+    await act(async () => {
+      fire(buttonFor('Todos'), 'dragend');
+    });
+    for (let i = 0; i < 8; i += 1) await act(async () => {});
+
+    expect(buttonLabels()).toEqual(before);
+    expect(readKabmoSetting<string[]>(PANEL_ORDER_SETTING_KEY)).toBeUndefined();
+  });
+});