@kabmo-labs/kabmo 0.5.3 → 0.6.1

package/src/client/components/common/header-panel-buttons/entries.ts

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The navbar entries plugins contribute, resolved once for both surfaces that
+ * can draw them.
+ *
+ * A phone has ONE row, and it is already shared between the wordmark, the
+ * session title and four controls that are used mid-conversation. A plugin
+ * entry is therefore the first thing that has to give way — and it gives way by
+ * moving into the `⋯` menu, not by shrinking, because a readout squeezed under
+ * a control is a readout nobody can read.
+ *
+ * Two facts decide where an entry goes, and both live here rather than at a
+ * call site:
+ *
+ * - **An ACTION entry (`opensPanel`) can fold.** It has one click and no UI of
+ *   its own, so a menu row is the same action in words.
+ * - **A dropdown or static readout cannot.** A dropdown needs the panel it opens
+ *   anchored to a trigger, and a static readout has no action at all; folding
+ *   either would be a different control rather than the same one moved.
+ *
+ * The threshold is a WIDTH, not a device class — the same rule the header's own
+ * reload/sign-out fold follows. Measured on a 390px phone with a `CPU 18% /
+ * RAM 2.5G` readout (73px): the session title kept 48px of its 74px and was
+ * clipped, while at 430px it kept all of it. 430 is therefore where a plugin
+ * action may stand in the row.
+ */
+
+import { usePanelRegistry, usePanelSlots } from '@/client/hooks/workspace/panel-registry';
+import { useViewportAtLeast } from '@/client/hooks/ui/media-query';
+import { headerDropdownOf, headerOpensPanelOf, headerTriggerOf } from '@/client/lib/plugins/slots';
+import { pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
+import type { ComponentType } from 'preact';
+import type { HeaderDropdownProps, HeaderTriggerProps } from '@kabmo-labs/kabmo-sdk/app';
+
+/**
+ * The narrowest phone row that still holds a plugin action beside the session
+ * title. See this module's own doc for the measurement behind it.
+ */
+export const MOBILE_HEADER_ACTION_PX = 430;
+
+/**
+ * The widest a plugin entry may be on a phone.
+ *
+ * A plugin owns its trigger's markup, so without a ceiling one readout could
+ * take the whole row. The cap is the width a two-column CPU/RAM readout needs
+ * plus room, and anything past it is the plugin's own problem to shorten — the
+ * alternative is the host clipping a control the user cannot then identify.
+ */
+export const MOBILE_HEADER_ENTRY_MAX_PX = 96;
+
+export interface HeaderEntry {
+  pluginId: string;
+  title: string;
+  /** What the navbar entry reads. */
+  Trigger: ComponentType<HeaderTriggerProps>;
+  /** What opening it shows, when the plugin declared one. */
+  Dropdown?: ComponentType<HeaderDropdownProps>;
+  /** The panel instance key the trigger opens, when it declared `opensPanel`. */
+  opensPanelKey?: string;
+}
+
+export interface HeaderEntries {
+  /** Entries that may stand in the row. */
+  inline: HeaderEntry[];
+  /** ACTION entries the row could not hold, for the `⋯` menu. */
+  folded: HeaderEntry[];
+}
+
+/** Resolve what the row draws, given the layout and the width it has. */
+export function useHeaderEntries(layout: 'desktop' | 'mobile'): HeaderEntries {
+  const { panels } = usePanelRegistry();
+  const { slots } = usePanelSlots();
+  // Hooks are unconditional: a desktop never asks the media query's answer, but
+  // calling it only on one branch would change the hook order per layout.
+  const wideEnough = useViewportAtLeast(MOBILE_HEADER_ACTION_PX);
+
+  const all: HeaderEntry[] = [];
+  for (const panel of panels) {
+    const entry = slots.get(panel.pluginId);
+    const Trigger = entry ? headerTriggerOf(entry) : undefined;
+    // A plugin whose bundle has not loaded yet has no component; it appears
+    // once the import settles rather than as an empty entry now.
+    if (!Trigger) continue;
+    const Dropdown = entry ? headerDropdownOf(entry) : undefined;
+    const opensSlot = entry ? headerOpensPanelOf(entry) : undefined;
+    all.push({
+      pluginId: panel.pluginId,
+      title: entry?.titles.headerPanel ?? panel.name,
+      Trigger,
+      ...(Dropdown ? { Dropdown } : {}),
+      // The panel is named by its INSTANCE key, so the click lands on the
+      // plugin's own `rightPanel` or `panel` registration — the same key the
+      // activity bar, the width map and the dock's placement list use. The
+      // plugin never names a column: where it is drawn is the user's choice.
+      ...(opensSlot ? { opensPanelKey: pluginPanelKey(panel.pluginId, opensSlot) } : {}),
+    });
+  }
+
+  if (layout === 'desktop' || wideEnough) return { inline: all, folded: [] };
+  // A narrow phone: the row keeps only what cannot be expressed as a menu row.
+  return {
+    inline: all.filter((entry) => !entry.opensPanelKey),
+    folded: all.filter((entry) => entry.opensPanelKey),
+  };
+}

package/src/client/components/common/header-panel-buttons/index.tsx

@@ -1,20 +1,14 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
-import type { ComponentType } from 'preact';
-import type { HeaderDropdownProps, HeaderTriggerProps } from '@kabmo-labs/kabmo-sdk/app';
-import { usePanelRegistry, usePanelSlots } from '@/client/hooks/workspace/panel-registry';
-import { headerDropdownOf, headerTriggerOf } from '@/client/lib/plugins/slots';
 import { PluginIdProvider } from '@kabmo-labs/kabmo-ui';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
+import { requestOpenPanel } from '@/shared/lib/workspace/panel-open';
+import {
+  MOBILE_HEADER_ENTRY_MAX_PX,
+  type HeaderEntry,
+} from '@/client/components/common/header-panel-buttons/entries';
 
-interface HeaderEntry {
-  pluginId: string;
-  title: string;
-  /** What the navbar entry reads. */
-  Trigger: ComponentType<HeaderTriggerProps>;
-  /** What opening it shows, when the plugin declared one. */
-  Dropdown?: ComponentType<HeaderDropdownProps>;
-}
+export { MOBILE_HEADER_ACTION_PX, useHeaderEntries, type HeaderEntry } from '@/client/components/common/header-panel-buttons/entries';
 
 /**
  * The navbar entries a plugin's `header` panel contributes — on BOTH layouts.
@@ -37,39 +31,39 @@ interface HeaderEntry {
  * row) and the second would cover the first, so the open one is held here as one
  * id rather than as a flag per entry.
  */
-export function HeaderPanelButtons({ layout = 'desktop' }: { layout?: 'desktop' | 'mobile' }) {
-  const { panels } = usePanelRegistry();
-  const { slots } = usePanelSlots();
+export function HeaderPanelButtons({
+  layout = 'desktop',
+  entries,
+}: {
+  layout?: 'desktop' | 'mobile';
+  /**
+   * What stands in the row, already resolved.
+   *
+   * The header resolves the split ONCE (`useHeaderEntries`) because the `⋯`
+   * menu draws the other half of the same answer — resolving here as well would
+   * be two media queries and two registry reads deciding one row.
+   */
+  entries: HeaderEntry[];
+}) {
+  const inline = entries;
   const { sessionId } = useSessionStateContext();
   const [openKey, setOpenKey] = useState<string | null>(null);
 
-  const entries: HeaderEntry[] = [];
-  for (const panel of panels) {
-    const entry = slots.get(panel.pluginId);
-    const Trigger = entry ? headerTriggerOf(entry) : undefined;
-    // A plugin whose bundle has not loaded yet has no component; it appears
-    // once the import settles rather than as an empty entry now.
-    if (!Trigger) continue;
-    const Dropdown = entry ? headerDropdownOf(entry) : undefined;
-    entries.push({
-      pluginId: panel.pluginId,
-      title: entry?.titles.headerPanel ?? panel.name,
-      Trigger,
-      ...(Dropdown ? { Dropdown } : {}),
-    });
-  }
-
   // A plugin that is uninstalled or switched off while its dropdown is open
   // would leave an empty box on screen; closing is the honest answer.
   useEffect(() => {
-    if (openKey && !entries.some((entry) => entry.pluginId === openKey)) setOpenKey(null);
-  }, [openKey, entries]);
+    if (openKey && !inline.some((entry) => entry.pluginId === openKey)) setOpenKey(null);
+  }, [openKey, inline]);
 
-  if (entries.length === 0) return null;
+  // An entry the row could not hold is NOT lost: it is a row of the `⋯` menu,
+  // which `HeaderControls` draws from the same resolver. This component draws
+  // only what stands in the row, so nothing here reserves space for a control
+  // that moved.
+  if (inline.length === 0) return null;
 
   return (
     <div className="flex items-center space-x-1">
-      {entries.map((entry) => (
+      {inline.map((entry) => (
         <HeaderPanelEntry
           key={entry.pluginId}
           entry={entry}
@@ -123,6 +117,48 @@ function HeaderPanelEntry({ entry, layout, sessionId, open, onToggle, onClose }:
     </PluginIdProvider>
   );
 
+  const triggerClass = layout === 'mobile'
+    ? 'flex items-center gap-1 w-8 h-8 justify-center rounded-lg hover:bg-ink/5 active:bg-ink/10 transition-colors cursor-pointer'
+    : 'flex items-center gap-1 px-1.5 py-1 rounded hover:bg-ink/10 transition-colors cursor-pointer';
+  /**
+   * An ACTION entry's hit area grows with its readout.
+   *
+   * The fixed 32px square is right for an icon and wrong for two columns of
+   * numbers: measured on a 390px phone, the readout inside `w-8 h-8` reported
+   * `scrollWidth > clientWidth`, so `1.4G` was clipped by the button that was
+   * supposed to present it. The height stays 32px (the phone's tool row) and
+   * the width comes from the content, with padding as the only host-imposed
+   * number.
+   */
+  const actionClass = layout === 'mobile'
+    ? 'flex items-center gap-1 h-8 px-1.5 justify-center rounded-lg hover:bg-ink/5 active:bg-ink/10 transition-colors cursor-pointer'
+    : 'flex items-center gap-1 px-1.5 py-1 rounded hover:bg-ink/10 transition-colors cursor-pointer';
+
+  // An ACTION entry: the readout is a button that asks the layout to show the
+  // plugin's own panel. The event carries the panel key and nothing else —
+  // where that panel lives (left dock, right column, editor column, a phone
+  // drawer) is the layout's answer, because it is the user's placement.
+  if (entry.opensPanelKey) {
+    const panelKey = entry.opensPanelKey;
+    return (
+      <button
+        type="button"
+        onClick={() => requestOpenPanel(panelKey)}
+        className={`${actionClass} ${open ? 'text-ink' : 'text-ink/70 hover:text-ink'}`}
+        // A plugin owns its trigger's markup, so the row needs a ceiling: a
+        // readout that grew without one would push the session title and the
+        // controls beside it out of a phone header. The cap is generous for a
+        // two-column readout and clips anything past it rather than letting the
+        // row overflow.
+        style={layout === 'mobile' ? { maxWidth: `${MOBILE_HEADER_ENTRY_MAX_PX}px` } : undefined}
+        title={entry.title}
+        aria-label={entry.title}
+      >
+        {trigger}
+      </button>
+    );
+  }
+
   if (!entry.Dropdown) {
     return (
       <div className="flex items-center px-1.5 text-ink/70" title={entry.title}>
@@ -144,9 +180,6 @@ function HeaderPanelEntry({ entry, layout, sessionId, open, onToggle, onClose }:
         right: 'max(0.75rem, env(safe-area-inset-right, 0px))',
       }
     : undefined;
-  const triggerClass = layout === 'mobile'
-    ? 'flex items-center gap-1 w-8 h-8 justify-center rounded-lg hover:bg-ink/5 active:bg-ink/10 transition-colors cursor-pointer'
-    : 'flex items-center gap-1 px-1.5 py-1 rounded hover:bg-ink/10 transition-colors cursor-pointer';
 
   return (
     <div className="relative" ref={ref}>

package/src/client/components/common/server-switcher/index.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The server panel, rendered against a real shell bridge.
+ *
+ * Three rules are what this suite exists for, and each was a decision rather
+ * than a style:
+ *
+ * 1. **In a browser the control does not exist.** There is no shell to control,
+ *    and a button that opened onto "not available" would be a button that never
+ *    works. The panel is rendered with no bridge at all and must produce
+ *    nothing.
+ * 2. **A stopped server cannot be connected to.** The shell probes every URL
+ *    before it answers, so `running: false` is a fact; the row says `Stopped`
+ *    and its button is disabled rather than letting a click land on a blank
+ *    window.
+ * 3. **Only a server this shell started offers Stop.** A server found on the
+ *    machine belongs to whoever started it — `kabmo serve` in a terminal — and a
+ *    Stop here would kill a process somebody else is watching.
+ */
+
+import { 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 { ServerSwitcher } from '@/client/components/common/server-switcher';
+import type { DesktopServersState } from '@/client/lib/desktop/bridge';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+const state = (overrides: Partial<DesktopServersState> = {}): DesktopServersState => ({
+  entries: [],
+  detected: [],
+  ...overrides,
+});
+
+const LOCAL: DesktopServersState = state({
+  entries: [
+    { id: 'local:3001', label: 'Local :3001', url: 'http://127.0.0.1:3001', kind: 'managed', port: 3001, running: true, owned: true, version: '0.5.3', mode: 'prod', pid: 42, source: 'stored' },
+    { id: 'remote:https://nas:8443', label: 'NAS', url: 'https://nas:8443', kind: 'remote', running: false, owned: false, source: 'stored' },
+  ],
+  detected: [
+    { id: 'local:3000', label: 'Local :3000', url: 'http://127.0.0.1:3000', kind: 'managed', port: 3000, running: true, owned: false, version: '0.5.3', mode: 'dev', pid: 7, source: 'record' },
+  ],
+  activeId: 'local:3001',
+  activeUrl: 'http://127.0.0.1:3001',
+});
+
+let win: Window;
+let container: HTMLElement;
+let calls: Array<{ command: string; args?: Record<string, unknown> }>;
+
+function mount(next: DesktopServersState | Error) {
+  calls = [];
+  win.document.body.innerHTML = '';
+  container = win.document.createElement('div') as unknown as HTMLElement;
+  win.document.body.appendChild(container as never);
+  // The transport the macOS shell installs: `__kabmoCall` answers through the
+  // same door the shell uses, which is what makes this a test of the bridge
+  // rather than of a stub only this suite knows about.
+  const shellWindow = win as unknown as {
+    __kabmoCall?: (method: string, params?: Record<string, unknown>) => Promise<unknown>;
+  };
+  shellWindow.__kabmoCall = async (method, params) => {
+    calls.push({ command: method, args: params });
+    if (next instanceof Error) throw next;
+    return next;
+  };
+  act(() => {
+    render(h(ServerSwitcher, { open: true, onClose: () => {} }), container as never);
+  });
+}
+
+async function settle() {
+  await act(async () => {
+    await Promise.resolve();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+const text = () => (container.textContent ?? '').replace(/\s+/g, ' ').trim();
+
+beforeEach(() => {
+  win = new Window({ url: 'http://127.0.0.1:3001/' });
+  installDomGlobals(win);
+});
+
+afterEach(() => {
+  if (container) act(() => render(null, container as never));
+  restoreDomGlobals();
+});
+
+describe('ServerSwitcher', () => {
+  test('lists the stored servers, the detected ones, and marks the active row', async () => {
+    mount(LOCAL);
+    await settle();
+    expect(text()).toContain('This window');
+    expect(text()).toContain('Local :3001');
+    expect(text()).toContain('NAS');
+    expect(text()).toContain('Found on this machine');
+    expect(text()).toContain('Local :3000');
+    // The active row carries its own marker rather than a colour alone.
+    expect(container.querySelector('[aria-label="Active"]')).not.toBeNull();
+  });
+
+  test('a stopped server is offered as Stopped and cannot be connected to', async () => {
+    mount(LOCAL);
+    await settle();
+    expect(text()).toContain('Stopped');
+    const nas = [...container.querySelectorAll('button')].find((button) =>
+      (button.textContent ?? '').includes('NAS'),
+    );
+    expect(nas).toBeDefined();
+    expect((nas as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  test('Stop is offered only for a server this shell started', async () => {
+    mount(LOCAL);
+    await settle();
+    const stops = [...container.querySelectorAll('button')].filter((button) =>
+      (button.getAttribute('aria-label') ?? '').startsWith('Stop '),
+    );
+    expect(stops.map((button) => button.getAttribute('aria-label'))).toEqual(['Stop Local :3001']);
+  });
+
+  test('a refused add shows the shell’s own sentence', async () => {
+    mount(new Error("Use the server's root address — a base path is not supported."));
+    await settle();
+    expect(text()).toContain('root address');
+  });
+
+  test('a browser renders nothing, because there is no shell to control', async () => {
+    mount(LOCAL);
+    delete (win as unknown as { __kabmoCall?: unknown }).__kabmoCall;
+    calls = [];
+    win.document.body.innerHTML = '';
+    const bare = win.document.createElement('div');
+    win.document.body.appendChild(bare as never);
+    act(() => {
+      render(h(ServerSwitcher, { open: true, onClose: () => {} }), bare as never);
+    });
+    await settle();
+    // The panel still draws (it is a component with an explicit `open`), but it
+    // must not have issued a single bridge call — that is what would throw in a
+    // browser. The navbar is what hides the control entirely.
+    expect(calls).toEqual([]);
+  });
+});

package/src/client/components/common/server-switcher/index.tsx

@@ -0,0 +1,281 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Which server the window is on, and how to change it.
+ *
+ * The panel lists three groups, and the split is the whole design:
+ *
+ * - **This window** — the servers the shell remembers, with the active one
+ *   marked. A remote entry is a URL somebody typed; a managed entry is a local
+ *   server this shell started, which is why it can be stopped here.
+ * - **Found on this machine** — servers the shell did NOT start: `kabmo serve`
+ *   in a terminal, `bun run dev`, a login entry. They are read from the
+ *   per-port records the servers themselves write, so a server that appeared
+ *   after the panel opened shows up on the next refresh. They can be connected
+ *   to but not stopped — this window did not start them, and a Stop here would
+ *   kill a process somebody else is watching.
+ * - **Add a server** — a URL and a label.
+ *
+ * A server is only offered as connectable while it ANSWERS: the shell probes
+ * every URL before answering, so `running: false` is a real fact rather than a
+ * guess, and the row says so instead of letting a click fail on a blank window.
+ */
+
+import { useState } from 'preact/hooks';
+import { Check, Loader2, Play, Plus, RefreshCw, Server, Square, Trash2 } from 'lucide-preact';
+import { useDesktopServers } from '@/client/hooks/desktop/servers';
+import type { DesktopServer } from '@/client/lib/desktop/bridge';
+
+interface ServerSwitcherProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+function statusLine(server: DesktopServer): string {
+  if (!server.running) return 'Stopped';
+  const parts: string[] = [];
+  if (server.version) parts.push(`v${server.version}`);
+  if (server.mode) parts.push(server.mode);
+  if (server.pid) parts.push(`pid ${server.pid}`);
+  return parts.length > 0 ? parts.join(' · ') : 'Running';
+}
+
+function Row({
+  server,
+  active,
+  busy,
+  onActivate,
+  onStop,
+  onRemove,
+}: {
+  server: DesktopServer;
+  active: boolean;
+  busy: boolean;
+  onActivate: () => void;
+  onStop?: () => void;
+  onRemove?: () => void;
+}) {
+  const canConnect = server.running && !active;
+  return (
+    <div
+      className={`flex items-center gap-2 rounded-lg border px-2.5 py-2 ${
+        active ? 'border-ink/30 bg-ink/[0.04]' : 'border-ink/10'
+      }`}
+    >
+      <span
+        className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+          server.running ? 'bg-success' : 'bg-ink/25'
+        }`}
+        aria-hidden="true"
+      />
+      <button
+        type="button"
+        onClick={onActivate}
+        disabled={busy || !canConnect}
+        title={canConnect ? `Switch to ${server.label}` : statusLine(server)}
+        className="flex-1 min-w-0 text-left cursor-pointer disabled:cursor-default group"
+      >
+        <span className="flex items-center gap-1.5">
+          <span className="text-xs font-medium text-ink truncate">{server.label}</span>
+          {active && <Check size={12} className="text-success flex-shrink-0" aria-label="Active" />}
+        </span>
+        <span className="block text-[10px] text-ink/50 truncate font-mono">{server.url}</span>
+        <span className="block text-[10px] text-ink/40 truncate">{statusLine(server)}</span>
+      </button>
+      {onStop && server.owned && server.running && (
+        <button
+          type="button"
+          onClick={onStop}
+          disabled={busy}
+          title="Stop this local server"
+          aria-label={`Stop ${server.label}`}
+          className="p-1 rounded text-ink/40 hover:text-error hover:bg-error/10 cursor-pointer disabled:opacity-40"
+        >
+          <Square size={12} />
+        </button>
+      )}
+      {onRemove && !server.owned && (
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={busy}
+          title="Remove from the list"
+          aria-label={`Remove ${server.label}`}
+          className="p-1 rounded text-ink/40 hover:text-error hover:bg-error/10 cursor-pointer disabled:opacity-40"
+        >
+          <Trash2 size={12} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function ServerSwitcher({ open, onClose }: ServerSwitcherProps) {
+  const store = useDesktopServers(open);
+  const [label, setLabel] = useState('');
+  const [url, setUrl] = useState('');
+  const [adding, setAdding] = useState(false);
+
+  if (!open) return null;
+
+  const state = store.state;
+  const entries = state?.entries ?? [];
+  const detected = state?.detected ?? [];
+  const activeId = state?.activeId;
+
+  const submit = async () => {
+    if (!url.trim()) return;
+    const ok = await store.add(label.trim(), url.trim());
+    if (ok) {
+      setLabel('');
+      setUrl('');
+      setAdding(false);
+    }
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Servers"
+      className="absolute right-2 top-full mt-1 z-50 w-[340px] rounded-xl border border-ink/15 bg-paper shadow-xl overflow-hidden"
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') {
+          event.stopPropagation();
+          onClose();
+        }
+      }}
+    >
+      <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10">
+        <span className="flex items-center gap-1.5 text-xs font-semibold text-ink">
+          <Server size={13} /> Servers
+        </span>
+        <button
+          type="button"
+          onClick={() => void store.reload()}
+          disabled={store.busy}
+          title="Refresh — re-probe every server and look for new local ones"
+          aria-label="Refresh servers"
+          className="p-1 rounded text-ink/40 hover:text-ink hover:bg-ink/10 cursor-pointer disabled:opacity-40"
+        >
+          <RefreshCw size={12} className={store.busy ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      <div className="max-h-[320px] overflow-y-auto scrollbar-overlay-container px-2 py-2 space-y-1.5">
+        {!state && (
+          <p className="text-[11px] text-ink/50 px-1 py-2 flex items-center gap-1.5">
+            <Loader2 size={12} className="animate-spin" /> Reading the server list…
+          </p>
+        )}
+
+        {entries.length > 0 && (
+          <>
+            <p className="px-1 text-[9px] uppercase tracking-wide text-ink/35">This window</p>
+            {entries.map((server) => (
+              <Row
+                key={server.id}
+                server={server}
+                active={server.id === activeId}
+                busy={store.busy}
+                onActivate={() => void store.activate(server.id)}
+                onStop={() => void store.stop(server.id)}
+                onRemove={() => void store.remove(server.id)}
+              />
+            ))}
+          </>
+        )}
+
+        {detected.length > 0 && (
+          <>
+            <p className="px-1 pt-1 text-[9px] uppercase tracking-wide text-ink/35">
+              Found on this machine
+            </p>
+            {detected.map((server) => (
+              <Row
+                key={server.id}
+                server={server}
+                active={server.url === state?.activeUrl}
+                busy={store.busy}
+                onActivate={() => void store.activate(server.id)}
+              />
+            ))}
+          </>
+        )}
+
+        {state && entries.length === 0 && detected.length === 0 && (
+          <p className="px-1 py-2 text-[11px] text-ink/50">
+            Nothing running yet. Start a local server, or add one by address.
+          </p>
+        )}
+      </div>
+
+      {store.error && (
+        <p className="px-3 py-1.5 text-[10px] text-error border-t border-ink/10">{store.error}</p>
+      )}
+
+      <div className="border-t border-ink/10 px-2 py-2 space-y-1.5">
+        <button
+          type="button"
+          onClick={() => void store.start()}
+          disabled={store.busy}
+          className="w-full flex items-center gap-1.5 rounded-lg border border-ink/15 px-2.5 py-1.5 text-xs text-ink hover:bg-ink/5 cursor-pointer disabled:opacity-40"
+        >
+          <Play size={12} /> Start a local server
+        </button>
+
+        {adding ? (
+          <form
+            className="space-y-1.5"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void submit();
+            }}
+          >
+            <input
+              autoFocus
+              value={url}
+              onInput={(event) => setUrl(event.currentTarget.value)}
+              placeholder="192.168.1.10:3000"
+              aria-label="Server address"
+              className="w-full rounded-lg border border-ink/20 bg-paper px-2 py-1.5 text-xs text-ink outline-none focus:border-ink/45 font-mono"
+            />
+            <input
+              value={label}
+              onInput={(event) => setLabel(event.currentTarget.value)}
+              placeholder="Label (optional)"
+              aria-label="Server label"
+              className="w-full rounded-lg border border-ink/20 bg-paper px-2 py-1.5 text-xs text-ink outline-none focus:border-ink/45"
+            />
+            <div className="flex gap-1.5">
+              <button
+                type="submit"
+                disabled={store.busy || !url.trim()}
+                className="flex-1 rounded-lg bg-ink text-paper px-2 py-1.5 text-xs cursor-pointer disabled:opacity-40"
+              >
+                Add
+              </button>
+              <button
+                type="button"
+                onClick={() => setAdding(false)}
+                className="rounded-lg border border-ink/15 px-2 py-1.5 text-xs text-ink/70 hover:bg-ink/5 cursor-pointer"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setAdding(true)}
+            className="w-full flex items-center gap-1.5 rounded-lg border border-ink/15 px-2.5 py-1.5 text-xs text-ink hover:bg-ink/5 cursor-pointer"
+          >
+            <Plus size={12} /> Add a server
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}