@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -0,0 +1,181 @@
+import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, MoreHorizontal } from 'lucide-preact';
+import type { SessionItemData } from '@/shared/types';
+import { useInlineRename } from '@/client/hooks/ui/inline-rename';
+import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
+import { SessionActionsMenu, useRowMenu } from '@/client/components/common/session-actions-menu';
+
+export interface MobileSessionRowProps {
+  session: SessionItemData;
+  isActive: boolean;
+  status?: 'stream' | 'finish' | 'abort';
+  /** The session's agent is blocked on a question until the user answers it. */
+  awaitingInput?: boolean;
+  /** Relative age of the session, or null when no usable timestamp exists. */
+  timeAgo: string | null;
+  /** The session has a subagent roster (on disk or live), so it can be expanded. */
+  hasSubagents?: boolean;
+  isExpanded?: boolean;
+  onToggleExpand?: () => void;
+  onSelect: () => void;
+  onArchive: () => void;
+  /** Omitted for a session that cannot be deleted yet (a pending `new-…` chat,
+   *  which has no transcript anywhere). */
+  onDelete?: () => void;
+  onRename?: (name: string) => void;
+  /** Ask omp to name this session from its transcript. Omitted for a pending
+   *  `new-…` chat, which has no transcript to derive a title from. */
+  onRenameWithAi?: () => void;
+}
+
+export function MobileSessionRow({
+  session,
+  isActive,
+  status,
+  awaitingInput = false,
+  timeAgo,
+  hasSubagents = false,
+  isExpanded = false,
+  onToggleExpand,
+  onSelect,
+  onArchive,
+  onDelete,
+  onRename,
+  onRenameWithAi,
+}: MobileSessionRowProps) {
+  const {
+    isEditing,
+    draft,
+    setDraft,
+    inputRef,
+    startRename,
+    handleKeyDown,
+    handleBlur,
+  } = useInlineRename(session.title, onRename);
+  // The phone draws the same cue the desktop row does, from the same store, so
+  // a rename started in either layout is visible in both.
+  const renaming = useSessionRenaming(session.id);
+  // One trigger for every row action; also reachable by long-press contextmenu.
+  const menu = useRowMenu();
+  const hasActions = Boolean(onRename || onArchive || onDelete);
+
+  // The roster toggle is the row's LAST element, so its glyph lands in the same
+  // column as the folder header's expand chevron — one vertical line of
+  // disclosure controls down the drawer. The toggle is a SIBLING of the select
+  // button, never a child: a button inside a button is invalid and the browser
+  // reparents it.
+  //
+  // Touch has no hover to reveal a hidden toggle the way desktop does, so it is
+  // pinned whenever the row has a roster; a hidden one would leave the roster
+  // unreachable on a phone.
+  const showChevron = hasSubagents && Boolean(onToggleExpand);
+  const title = session.title.charAt(0).toUpperCase() + session.title.slice(1);
+
+  if (isEditing) {
+    return (
+      <div className="w-full rounded-lg flex items-center bg-ink/10">
+        <input
+          ref={inputRef}
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="flex-1 min-w-0 mx-2 my-1.5 bg-paper border border-ink/25 rounded px-2 py-1 text-xs text-ink outline-none focus:border-ink/50"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        data-testid="session-item"
+        data-session-id={String(session.id)}
+        onContextMenu={hasActions ? menu.openAtCursor : undefined}
+        className={`w-full rounded-lg flex items-center transition-colors ${
+          isActive ? 'bg-ink/10 font-medium text-ink' : 'hover:bg-ink/5 text-ink/85'
+        }`}
+      >
+        <button
+          type="button"
+          onClick={onSelect}
+          className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
+        >
+          <div className="flex items-center min-w-0 pr-2">
+            {/* Status slot, 16px at the same x as the folder header's icon slot,
+                so the left column reads as one line. Waiting on an answer
+                outranks the run spinner — the spinner says work is happening,
+                the question mark says it is YOUR turn (desktop parity). An
+                in-flight rename outranks both, for the same reason it does
+                there: it answers a click that is still pending. */}
+            <span className="w-4 flex-shrink-0 flex items-center justify-center">
+              {renaming ? (
+                <span role="status" aria-label="Generating a name…">
+                  <Loader2 size={13} className="text-ink/50 animate-spin" />
+                </span>
+              ) : awaitingInput ? (
+                <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+              ) : status === 'stream' ? (
+                <Loader2 size={13} className="text-ink/50 animate-spin" />
+              ) : status ? (
+                <Check size={13} className="text-ink/50" />
+              ) : null}
+            </span>
+            <span className="text-xs truncate leading-snug ml-2">{title}</span>
+          </div>
+
+          <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
+        </button>
+
+        {/* One trigger for rename / archive / delete, always visible: a touch
+            surface has no hover, and the always-on action buttons this replaced
+            consumed a third of a phone's row width.
+            `mr-1` only when the row has NO roster toggle — it reserves that
+            column so the trailing glyph's centre stays 19px from the row's right
+            edge whether the last element is this trigger or the chevron. Without
+            it the glyphs step in and out from row to row. */}
+        {hasActions && (
+          <button
+            type="button"
+            onClick={menu.openBelow}
+            title="Session actions"
+            aria-label="Session actions"
+            aria-haspopup="menu"
+            aria-expanded={menu.anchor !== null}
+            className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
+          >
+            <MoreHorizontal size={16} />
+          </button>
+        )}
+
+        {/* Last element, so its glyph sits in the folder header's chevron column.
+            `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
+            touch-sized tap target. */}
+        {showChevron && (
+          <button
+            type="button"
+            onClick={onToggleExpand}
+            title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+            aria-expanded={isExpanded}
+            aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+            className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
+          >
+            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          </button>
+        )}
+      </div>
+
+      {menu.anchor && (
+        <SessionActionsMenu
+          anchor={menu.anchor}
+          isArchived={session.is_archived === 1}
+          onRename={onRename ? startRename : undefined}
+          onRenameWithAi={onRenameWithAi}
+          onArchive={onArchive}
+          onDelete={onDelete}
+          onClose={menu.close}
+        />
+      )}
+    </>
+  );
+}

package/src/client/components/mobile/mobile-session-sidebar/Skeleton.tsx

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Mobile placeholder for the session list while the first
+ * `/api/sessions/list` fetch is in flight. Mirrors the desktop skeleton's
+ * spacing at the mobile list's padding scale.
+ */
+
+const PLACEHOLDER_FOLDERS = [3, 2];
+
+export function MobileSessionListSkeleton() {
+  return (
+    <div className="flex-1 p-3 space-y-4" aria-hidden="true">
+      {PLACEHOLDER_FOLDERS.map((rows, folderIndex) => (
+        <div key={folderIndex} className="space-y-2">
+          <div className="flex items-center gap-2 px-1 py-2">
+            <span className="w-4 h-4 rounded-sm animate-pulse bg-ink/10" />
+            <span className="h-3 w-24 rounded animate-pulse bg-ink/10" />
+          </div>
+          {Array.from({ length: rows }, (_, rowIndex) => (
+            <div key={rowIndex} className="flex items-center gap-2 rounded px-2 py-2">
+              <span className="w-4 h-4 rounded-full animate-pulse bg-ink/10" />
+              <span
+                className="h-3 rounded animate-pulse bg-ink/10"
+                style={{ width: `${58 - (rowIndex % 3) * 12}%` }}
+              />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/components/mobile/mobile-session-sidebar/Toolbar.test.ts

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The mobile toolbar's Archive control.
+ *
+ * It used to live inside the sort dropdown under a "Filter" heading, so the
+ * control that decides whether archived rows are on screen sat one tap deeper
+ * than the control that reorders the list, and the sort button's own pressed
+ * state reported BOTH (it lit up when only the archive filter was on). The
+ * assertions below pin the shape that replaced it: a standalone button beside
+ * Scheduler/Refresh, and a sort dropdown that means the order alone.
+ */
+
+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 { MobileSessionToolbar } from '@/client/components/mobile/mobile-session-sidebar/Toolbar';
+import type { MobileSessionToolbarProps } from '@/client/components/mobile/mobile-session-sidebar/Toolbar';
+
+let container: HTMLElement;
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+/** The runner's own globals, restored on teardown — deleting them would strip natives (Event/CustomEvent) every later file needs. */
+const nativeGlobals: 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 nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+afterEach(() => {
+  container?.remove();
+});
+
+async function mount(overrides: Partial<MobileSessionToolbarProps> = {}) {
+  const calls = { toggled: 0, hidden: 0 };
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(MobileSessionToolbar, {
+      searchQuery: '',
+      sortOption: 'A-Z',
+      optionsOpen: false,
+      showArchived: false,
+      optionsRef: { current: null },
+      onNewSession: () => {},
+      onNewWorkspace: () => {},
+      onScheduler: () => {},
+      scheduledCount: 0,
+      onRefresh: () => {},
+      refreshing: false,
+      onToggleOptions: () => {},
+      onSortChange: () => {},
+      onResetSort: () => {},
+      onToggleArchived: () => { calls.toggled += 1; },
+      onHideArchived: () => { calls.hidden += 1; },
+      onSearchChange: () => {},
+      onClearSearch: () => {},
+      ...overrides,
+    }), container);
+  });
+  return { el: container, calls };
+}
+
+/** The archive button by its accessible name — the two labels are the two states. */
+function archiveButton(el: HTMLElement) {
+  return Array.from(el.querySelectorAll('button')).find((b) => /archived sessions/i.test(b.getAttribute('aria-label') ?? '')) ?? null;
+}
+
+describe('mobile toolbar archive button', () => {
+  test('is a standalone control in the toolbar row, not inside the sort dropdown', async () => {
+    const { el } = await mount();
+    const button = archiveButton(el);
+    expect(button).not.toBeNull();
+    // The dropdown is closed here, so a button found at all proves it is not
+    // one of the dropdown's own rows.
+    expect(button?.getAttribute('aria-pressed')).toBe('false');
+    expect(button?.querySelector('svg')?.getAttribute('class')).toContain('lucide-archive');
+  });
+
+  test('reports the on state through aria-pressed, and switches its label with it', async () => {
+    const { el } = await mount({ showArchived: true });
+    const button = archiveButton(el);
+    expect(button?.getAttribute('aria-pressed')).toBe('true');
+    expect(button?.getAttribute('aria-label')).toBe('Hide archived sessions');
+    // And the archive pill in row 3 offers the same escape as before.
+    expect(el.textContent).toContain('Archived');
+  });
+
+  test('toggles the filter on click', async () => {
+    const { el, calls } = await mount();
+    await act(async () => {
+      (archiveButton(el) as HTMLButtonElement).click();
+    });
+    expect(calls.toggled).toBe(1);
+  });
+
+  test('the sort dropdown carries sort options only — no archive row', async () => {
+    const { el } = await mount({ optionsOpen: true });
+    expect(el.textContent).toContain('Sort Workspaces');
+    expect(el.textContent).not.toContain('Show Archived');
+    // And no stray "Filter" heading is left behind with nothing under it.
+    expect(el.textContent).not.toContain('Filter');
+  });
+
+  test('the sort trigger still lights up for a non-default sort', async () => {
+    const { el } = await mount({ sortOption: 'LATEST_SESSION' });
+    const sortTrigger = Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === 'Sort workspaces');
+    expect(sortTrigger?.className).toContain('bg-ink/10');
+  });
+
+  test('the archive filter does not light up the sort trigger', async () => {
+    const { el } = await mount({ showArchived: true });
+    const sortTrigger = Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === 'Sort workspaces');
+    expect(sortTrigger?.className).not.toContain('bg-ink/10');
+  });
+});

package/src/client/components/mobile/mobile-session-sidebar/Toolbar.tsx

@@ -0,0 +1,223 @@
+import type { RefObject } from 'preact/compat';
+import { Archive, ArrowUpDown, Calendar, FolderPlus, Plus, RefreshCw, Search, X } from 'lucide-preact';
+import type { SessionSortOption } from '@/shared/types';
+import { SortMenu } from '@/client/components/common/sort-menu';
+
+export interface MobileSessionToolbarProps {
+  searchQuery: string;
+  sortOption: SessionSortOption;
+  optionsOpen: boolean;
+  showArchived: boolean;
+  optionsRef: RefObject<HTMLDivElement>;
+  onNewSession: () => void;
+  onNewWorkspace: () => void;
+  onScheduler: () => void;
+  /** Armed scheduled tasks, for the Calendar button's badge. */
+  scheduledCount: number;
+  onRefresh: () => void;
+  /** True while the user-initiated refresh is in flight — spins the icon. */
+  refreshing: boolean;
+  onToggleOptions: () => void;
+  onSortChange: (opt: SessionSortOption) => void;
+  onResetSort: () => void;
+  onToggleArchived: () => void;
+  onHideArchived: () => void;
+  onSearchChange: (value: string) => void;
+  onClearSearch: () => void;
+}
+
+export function MobileSessionToolbar({
+  searchQuery,
+  sortOption,
+  optionsOpen,
+  showArchived,
+  optionsRef,
+  onNewSession,
+  onNewWorkspace,
+  onScheduler,
+  scheduledCount,
+  onRefresh,
+  refreshing,
+  onToggleOptions,
+  onSortChange,
+  onResetSort,
+  onToggleArchived,
+  onHideArchived,
+  onSearchChange,
+  onClearSearch,
+}: MobileSessionToolbarProps) {
+  return (
+    <div className="@container p-3 border-b border-ink/10 flex flex-col space-y-2.5 flex-shrink-0 bg-canvas">
+      {/* Row 1: Primary + New Session Button & Quick Utility Buttons */}
+      <div className="flex items-center space-x-2">
+        {/* Large Ergonomic New Session Button. Its label drops below a narrow
+            drawer (@container, not the viewport) so the five fixed-size utility
+            buttons beside it can never squeeze it past the row's own width.
+            Measured: the row needs 356px of CONTAINER for the label to fit
+            (190px of buttons + 40px of gaps + 51px of icon/padding + the 75px
+            label), and the container is the viewport minus the toolbar's 12px
+            of padding each side — so 360px of container (a 384px viewport)
+            is the point the label stops fitting. The `aria-label` is not
+            optional: hiding the visible text would otherwise leave the button
+            with no accessible name at all, which is what a phone-width
+            screen reader reads first. */}
+        <button
+          type="button"
+          onClick={onNewSession}
+          aria-label="New Session"
+          title="New Session"
+          className="flex-1 min-w-0 h-9.5 flex items-center justify-center space-x-2 px-3.5 rounded-xl bg-ink text-canvas hover:bg-ink/90 active:scale-[0.98] text-xs font-semibold transition-all shadow-xs"
+        >
+          <Plus size={15} strokeWidth={2.4} />
+          <span className="hidden @[360px]:inline whitespace-nowrap">New Session</span>
+        </button>
+
+        {/* New Workspace / Folder button */}
+        <button
+          type="button"
+          onClick={onNewWorkspace}
+          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
+          title="New Workspace"
+          aria-label="New Workspace"
+        >
+          <FolderPlus size={16} strokeWidth={1.8} />
+        </button>
+
+        {/* Scheduler button. The badge is the whole point of the count: a
+            button that opens a list you cannot see the state of reads as
+            decorative, which is exactly what this control used to be. */}
+        <button
+          type="button"
+          onClick={onScheduler}
+          className="relative w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
+          title={scheduledCount > 0 ? `Scheduled tasks (${scheduledCount} armed)` : 'Scheduled tasks'}
+          aria-label={scheduledCount > 0 ? `Scheduled tasks, ${scheduledCount} armed` : 'Scheduled tasks'}
+        >
+          <Calendar size={16} strokeWidth={1.8} />
+          {scheduledCount > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 min-w-[13px] h-[13px] px-[3px] rounded-full bg-ink text-canvas text-[8px] leading-[13px] text-center font-semibold">
+              {scheduledCount > 9 ? '9+' : scheduledCount}
+            </span>
+          )}
+        </button>
+
+        {/* Archive toggle — its own button, the same shape as Scheduler's.
+            It used to live inside the sort dropdown under a "Filter" heading,
+            which made a view filter look like a sort mode: the control that
+            decides whether archived rows are on screen was hidden one tap
+            deeper than the control that reorders them. The pressed state is
+            carried by the button itself (and by the pill in row 3), so the
+            dropdown no longer needs to report it. */}
+        <button
+          type="button"
+          onClick={onToggleArchived}
+          aria-pressed={showArchived}
+          className={`w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs ${
+            showArchived
+              ? 'bg-amber-500/15 border-amber-500/40 text-amber-900'
+              : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
+          }`}
+          title={showArchived ? 'Hide archived sessions' : 'Show archived sessions'}
+          aria-label={showArchived ? 'Hide archived sessions' : 'Show archived sessions'}
+        >
+          <Archive size={16} strokeWidth={1.8} />
+        </button>
+
+        {/* Refresh sessions button — same action the desktop toolbar's
+            RefreshCw performs: refetch the session list from the server.
+            The icon spins for the duration of that fetch, so the click has a
+            visible end; `refreshing` is raised only by this button's own load. */}
+        <button
+          type="button"
+          onClick={onRefresh}
+          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
+          title="Refresh sessions"
+          aria-label="Refresh sessions"
+          aria-busy={refreshing}
+        >
+          <RefreshCw size={15} strokeWidth={1.8} className={refreshing ? 'animate-spin' : undefined} />
+        </button>
+
+        {/* Sort Dropdown. Archive is NOT in here any more — it has its own
+            button in this row, so this control means one thing (the order of
+            the list) and its pressed state reads the sort alone. */}
+        <div className="relative flex-shrink-0" ref={optionsRef}>
+          <button
+            type="button"
+            onClick={onToggleOptions}
+            className={`w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all cursor-pointer shadow-xs ${
+              optionsOpen || sortOption !== 'A-Z'
+                ? 'bg-ink/10 text-ink border-ink/30' 
+                : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
+            }`}
+            title="Sort workspaces"
+            aria-label="Sort workspaces"
+          >
+            <ArrowUpDown size={15} strokeWidth={1.8} />
+          </button>
+
+          {optionsOpen && (
+            <div className="absolute right-0 top-full mt-2 w-52 bg-paper border border-ink/15 rounded-xl shadow-xl z-50 p-2 text-xs">
+              <SortMenu variant="mobile" sortOption={sortOption} onSortChange={onSortChange} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Row 2: Search Input Bar */}
+      <div className="relative flex items-center">
+        <Search size={14} className="absolute left-3 text-ink/40" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.currentTarget.value)}
+          placeholder="Search workspaces & sessions..."
+          className="w-full bg-paper border border-ink/15 rounded-xl pl-8 pr-8 py-2 text-xs text-ink placeholder-ink/40 focus:outline-none focus:border-ink/40 transition-colors font-mono"
+        />
+        {searchQuery && (
+          <button
+            type="button"
+            onClick={onClearSearch}
+            className="absolute right-2.5 text-ink/40 hover:text-ink p-1"
+            aria-label="Clear search"
+          >
+            <X size={13} />
+          </button>
+        )}
+      </div>
+
+      {/* Row 3: Active Filters Pills (if sort or archive changed from defaults) */}
+      {(showArchived || sortOption !== 'A-Z') && (
+        <div className="flex items-center space-x-1.5 flex-wrap gap-y-1 pt-0.5">
+          {sortOption !== 'A-Z' && (
+            <span className="inline-flex items-center space-x-1 bg-ink/5 border border-ink/10 text-ink/80 rounded-lg px-2 py-0.5 text-[10px] font-mono">
+              <span>Sort: {sortOption.replace('_', ' ')}</span>
+              <button 
+                type="button" 
+                onClick={onResetSort} 
+                className="hover:text-ink ml-0.5"
+                title="Reset sort"
+              >
+                <X size={10} />
+              </button>
+            </span>
+          )}
+          {showArchived && (
+            <span className="inline-flex items-center space-x-1 bg-amber-500/15 border border-amber-500/25 text-amber-900 rounded-lg px-2 py-0.5 text-[10px] font-mono">
+              <Archive size={10} />
+              <span>Archived</span>
+              <button 
+                type="button" 
+                onClick={onHideArchived} 
+                className="hover:text-amber-950 ml-0.5"
+                title="Hide archived"
+              >
+                <X size={10} />
+              </button>
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/mobile/open-file-payload.test.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's editor state, built from an open-file payload.
+ *
+ * Two fields the mapper must carry are the reason this file exists: `repo` and
+ * `handleId` were dropped on the mobile path, so a file in a nested repository
+ * resolved its raw URL against the workspace root and a dropped file fetched
+ * bytes from a path it does not have. The payload is `unknown` (an explorer
+ * row, a plugin panel and a drop all hand over their own object), so the guards
+ * are the contract — a payload naming no file must produce nothing rather than
+ * a tab called `undefined`.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { mobileEditorFileFrom } from '@/client/components/mobile/open-file-payload';
+
+describe('mobileEditorFileFrom', () => {
+  test('carries repo and handleId through', () => {
+    const result = mobileEditorFileFrom({
+      path: 'projects/token/README.md',
+      name: 'README.md',
+      root: '/ws',
+      repo: 'projects/token',
+      handleId: 'handle-7',
+    });
+    expect(result).toEqual({
+      name: 'README.md',
+      path: 'projects/token/README.md',
+      content: undefined,
+      root: '/ws',
+      repo: 'projects/token',
+      handleId: 'handle-7',
+    });
+  });
+
+  test('leads the path with no slash, and derives a name when none is given', () => {
+    const result = mobileEditorFileFrom({ path: '/a/b/pic.png' });
+    expect(result?.path).toBe('a/b/pic.png');
+    expect(result?.name).toBe('pic.png');
+  });
+
+  test('falls back to the active project only when the payload has no root', () => {
+    expect(mobileEditorFileFrom({ path: 'x.md' }, '/active')?.root).toBe('/active');
+    // A caller that knows its own scope keeps it.
+    expect(mobileEditorFileFrom({ path: 'x.md', root: '/own' }, '/active')?.root).toBe('/own');
+  });
+
+  test('an empty body is a body, not a missing field', () => {
+    expect(mobileEditorFileFrom({ path: 'empty.txt', content: '' })?.content).toBe('');
+  });
+
+  test('a payload naming no file produces nothing', () => {
+    expect(mobileEditorFileFrom({})).toBeNull();
+    expect(mobileEditorFileFrom({ path: '' })).toBeNull();
+    expect(mobileEditorFileFrom({ path: '/' })).toBeNull();
+    expect(mobileEditorFileFrom(null)).toBeNull();
+    expect(mobileEditorFileFrom('a string')).toBeNull();
+    expect(mobileEditorFileFrom({ path: 42 })).toBeNull();
+  });
+
+  test('a non-string field is dropped rather than rendered', () => {
+    const result = mobileEditorFileFrom({ path: 'x.md', name: 7, repo: { nested: true }, handleId: 9 });
+    expect(result?.name).toBe('x.md');
+    expect(result?.repo).toBeUndefined();
+    expect(result?.handleId).toBeUndefined();
+  });
+});