pmx-canvas 0.4.8 → 0.5.0

package/src/client/canvas/CanvasViewport.tsx

@@ -1,4 +1,6 @@
+import { effect } from '@preact/signals';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { askText } from './TextPrompt';
 import { ContextNode } from '../nodes/ContextNode';
 import { DiffNode } from '../nodes/DiffNode';
 import { FileNode } from '../nodes/FileNode';
@@ -29,11 +31,20 @@ import {
   viewport,
   createAnnotationFromClient,
   removeAnnotationFromClient,
+  isPanModeActive,
+  dragDropTarget,
+  hiddenByCollapsedGroup,
+  canvasTool,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
-import type { CanvasAnnotation, CanvasNodeState } from '../types';
+import type { AnnotationTool, CanvasAnnotation, CanvasNodeState } from '../types';
 import { FocusFieldLayer } from './FocusFieldLayer';
+import { importFiles } from './import-files';
 import { IntentLayer } from './IntentLayer';
+import { AgentPresenceLayer } from './AgentPresenceLayer';
+import { HumanPresenceLayer } from './HumanPresenceLayer';
+import { reportHumanCursor } from '../state/human-store';
+import { ScopeFenceLayer } from './ScopeFenceLayer';
 import { CanvasNode } from './CanvasNode';
 import { EdgeLayer } from './EdgeLayer';
 import { AnnotationLayer } from './AnnotationLayer';
@@ -151,17 +162,14 @@ const ANNOTATION_WIDTH = 4;
 const TEXT_ANNOTATION_WIDTH = 24;
 const ERASER_HIT_RADIUS = 14;
 
-type AnnotationTool = 'pen' | 'eraser' | 'text' | null;
-
 interface CanvasViewportProps {
   onNodeContextMenu?: (e: MouseEvent, nodeId: string) => void;
+  onEdgeContextMenu?: (e: MouseEvent, edgeId: string) => void;
   onCanvasContextMenu?: (e: MouseEvent, canvasX: number, canvasY: number) => void;
   annotationMode?: boolean;
   annotationTool?: AnnotationTool;
 }
 
-const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif']);
-const MD_EXTS = new Set(['md', 'mdx', 'markdown']);
 const WEBPAGE_NODE_SIZE = { width: 520, height: 420 };
 
 function normalizeUrlCandidate(raw: string): string | null {
@@ -214,21 +222,16 @@ function isEditableElement(element: Element | null): boolean {
   return Boolean(element.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
 }
 
-function nodeTypeFromFilename(name: string): 'image' | 'markdown' | 'file' {
-  const ext = name.split('.').pop()?.toLowerCase() ?? '';
-  if (IMAGE_EXTS.has(ext)) return 'image';
-  if (MD_EXTS.has(ext)) return 'markdown';
-  return 'file';
-}
-
 export function getRenderableWorldNodes(
   allNodes: Iterable<CanvasNodeState>,
   focusedNodeId: string | null,
+  hiddenIds: ReadonlySet<string> = new Set(),
 ): CanvasNodeState[] {
   const worldNodes: CanvasNodeState[] = [];
   let insertIdx = 0; // groups fill from the front
   for (const n of allNodes) {
-    if (n.dockPosition !== null) continue;
+    // Children of a collapsed group are hidden behind its chip.
+    if (hiddenIds.has(n.id)) continue;
     // Focus mode renders the node inside the overlay. Skip the original world
     // instance so embedded apps do not mount twice.
     if (focusedNodeId && n.id === focusedNodeId) continue;
@@ -243,12 +246,14 @@ export function getRenderableWorldNodes(
 
 export function CanvasViewport({
   onNodeContextMenu,
+  onEdgeContextMenu,
   onCanvasContextMenu,
   annotationMode = false,
   annotationTool = null,
 }: CanvasViewportProps) {
   const v = viewport.value;
   const isLassoing = useRef(false);
+  const lastPointerScreen = useRef<{ x: number; y: number } | null>(null);
   const isAnnotating = useRef(false);
   const annotationPoints = useRef<Array<{ x: number; y: number }>>([]);
   const [lasso, setLasso] = useState<LassoRect | null>(null);
@@ -261,6 +266,30 @@ export function CanvasViewport({
   // without stale-closure issues from useCallback dependency capture.
   const lassoRef = useRef<LassoRect | null>(null);
 
+  // Raster hygiene: promote the world layer only WHILE the viewport moves and
+  // demote it once it settles. A permanent will-change pinned a cached raster
+  // the compositor merely stretched — at high zoom the node headline (12px
+  // text magnified by the matrix) went permanently blurry. Dropping the hint
+  // after the last change forces a crisp re-raster at the final scale.
+  const worldRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    let settleTimer: ReturnType<typeof setTimeout> | null = null;
+    const dispose = effect(() => {
+      void viewport.value;
+      const world = worldRef.current;
+      if (!world) return;
+      world.style.willChange = 'transform';
+      if (settleTimer) clearTimeout(settleTimer);
+      settleTimer = setTimeout(() => {
+        world.style.willChange = 'auto';
+      }, 180);
+    });
+    return () => {
+      if (settleTimer) clearTimeout(settleTimer);
+      dispose();
+    };
+  }, []);
+
   const containerRef = usePanZoom({
     viewport,
     disabled: annotationMode,
@@ -318,7 +347,7 @@ export function CanvasViewport({
 
       if (annotationTool === 'eraser') {
         const target = e.target instanceof Element ? e.target : null;
-        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        if (target?.closest('.tool-rail, .top-bar, .snapshot-panel, .context-menu, .command-palette')) return;
         e.preventDefault();
         e.stopPropagation();
         const rect = container.getBoundingClientRect();
@@ -334,7 +363,7 @@ export function CanvasViewport({
 
       if (annotationTool === 'text') {
         const target = e.target instanceof Element ? e.target : null;
-        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        if (target?.closest('.tool-rail, .top-bar, .snapshot-panel, .context-menu, .command-palette')) return;
         e.preventDefault();
         e.stopPropagation();
         activeNodeId.value = null;
@@ -351,7 +380,7 @@ export function CanvasViewport({
 
       if (annotationTool === 'pen') {
         const target = e.target instanceof Element ? e.target : null;
-        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        if (target?.closest('.tool-rail, .top-bar, .snapshot-panel, .context-menu, .command-palette')) return;
         e.preventDefault();
         e.stopPropagation();
         activeNodeId.value = null;
@@ -379,14 +408,17 @@ export function CanvasViewport({
 
       if (e.target !== container) return;
 
-      if (!e.shiftKey) {
-        if (!lassoRef.current) {
+      // Pan tool / held Space: usePanZoom owns this drag.
+      if (isPanModeActive() || e.button === 1) {
+        if (!e.shiftKey && !lassoRef.current) {
           activeNodeId.value = null;
           clearSelection();
         }
         return;
       }
 
+      // Select tool: plain background drag draws the lasso. A sub-threshold
+      // drag (a click) falls through in handlePointerUp and clears selection.
       e.preventDefault();
       e.stopPropagation();
       isLassoing.current = true;
@@ -401,8 +433,39 @@ export function CanvasViewport({
     [annotationTool, containerRef],
   );
 
+  // Trackpad pans and zooms move the world under a motionless pointer — no
+  // pointermove fires — so other tabs would watch this cursor drift to a stale
+  // world point while this tab navigates. Re-derive the world position from
+  // the last screen point on every viewport change (throttled by the store).
+  useEffect(() => {
+    return effect(() => {
+      const vp = viewport.value;
+      const screen = lastPointerScreen.current;
+      const container = containerRef.current;
+      if (!screen || !container) return;
+      const rect = container.getBoundingClientRect();
+      reportHumanCursor({
+        x: (screen.x - rect.left - vp.x) / vp.scale,
+        y: (screen.y - rect.top - vp.y) / vp.scale,
+      });
+    });
+  }, []);
+
   const handlePointerMove = useCallback(
     (e: PointerEvent) => {
+      // Human presence (phase 8): other tabs see this pointer in world space.
+      {
+        const container = containerRef.current;
+        if (container) {
+          lastPointerScreen.current = { x: e.clientX, y: e.clientY };
+          const rect = container.getBoundingClientRect();
+          const vp = viewport.value;
+          reportHumanCursor({
+            x: (e.clientX - rect.left - vp.x) / vp.scale,
+            y: (e.clientY - rect.top - vp.y) / vp.scale,
+          });
+        }
+      }
       if (isAnnotating.current) {
         const container = containerRef.current;
         if (!container) return;
@@ -460,6 +523,12 @@ export function CanvasViewport({
     const minY = Math.min(current.startY, current.currentY);
     const maxY = Math.max(current.startY, current.currentY);
 
+    // A sub-threshold lasso is a background CLICK: clear the selection —
+    // pre-rail chrome this was the plain-pointerdown path.
+    if (maxX - minX <= 5 && maxY - minY <= 5) {
+      activeNodeId.value = null;
+      clearSelection();
+    }
     // Only commit if the lasso was dragged at least a few pixels
     if (maxX - minX > 5 || maxY - minY > 5) {
       // Convert screen lasso rect to world-space
@@ -472,7 +541,6 @@ export function CanvasViewport({
       // Find intersecting nodes (AABB intersection)
       const hits: string[] = [];
       for (const node of nodes.value.values()) {
-        if (node.dockPosition !== null) continue;
         const nx = node.position.x;
         const ny = node.position.y;
         if (nx + node.size.width > worldMinX && nx < worldMaxX && ny + node.size.height > worldMinY && ny < worldMaxY) {
@@ -516,53 +584,78 @@ export function CanvasViewport({
     if (annotationTool !== 'text' && textDraft) setTextDraft(null);
   }, [annotationTool, setTextDraft, textDraft]);
 
-  // ── Drag-to-connect: track cursor in world space, hit-test on drop ──
+  // ── Drag-to-connect (item 15): the target lights up under the cursor,
+  // Esc cancels, L asks for a label on release. ──
   useEffect(() => {
+    const nodeAt = (wx: number, wy: number, exceptId: string): string | null => {
+      let hit: string | null = null;
+      for (const node of nodes.value.values()) {
+        if (node.id === exceptId || node.type === 'group') continue;
+        if (
+          wx >= node.position.x &&
+          wx <= node.position.x + node.size.width &&
+          wy >= node.position.y &&
+          wy <= node.position.y + node.size.height
+        ) {
+          hit = node.id;
+        }
+      }
+      return hit;
+    };
+
     function handleMove(e: PointerEvent) {
       if (!draggingEdge.value) return;
       const container = containerRef.current;
       if (!container) return;
       const rect = container.getBoundingClientRect();
       const v = viewport.value;
+      const cursorX = (e.clientX - rect.left - v.x) / v.scale;
+      const cursorY = (e.clientY - rect.top - v.y) / v.scale;
       draggingEdge.value = {
         ...draggingEdge.value,
-        cursorX: (e.clientX - rect.left - v.x) / v.scale,
-        cursorY: (e.clientY - rect.top - v.y) / v.scale,
+        cursorX,
+        cursorY,
+        targetId: nodeAt(cursorX, cursorY, draggingEdge.value.fromId),
       };
     }
 
-    function handleUp(e: PointerEvent) {
+    function handleUp() {
       const drag = draggingEdge.value;
       if (!drag) return;
       draggingEdge.value = null;
+      const targetId = drag.targetId;
+      if (!targetId) return;
+      if (drag.withLabel) {
+        // In-canvas prompt — `window.prompt` is a silent no-op in embedded
+        // panes (the L-labelled connect just dropped the label there).
+        // Cancelling still creates the edge, unlabelled, like prompt-cancel did.
+        void askText('Edge label', 'label text').then((label) => {
+          createEdgeFromClient(drag.fromId, targetId, 'relation', label ?? undefined);
+        });
+        return;
+      }
+      createEdgeFromClient(drag.fromId, targetId, 'relation', undefined);
+    }
 
-      // Hit-test: find node under cursor
-      const container = containerRef.current;
-      if (!container) return;
-      const rect = container.getBoundingClientRect();
-      const v = viewport.value;
-      const wx = (e.clientX - rect.left - v.x) / v.scale;
-      const wy = (e.clientY - rect.top - v.y) / v.scale;
-
-      for (const node of nodes.value.values()) {
-        if (node.id === drag.fromId || node.dockPosition !== null) continue;
-        if (
-          wx >= node.position.x &&
-          wx <= node.position.x + node.size.width &&
-          wy >= node.position.y &&
-          wy <= node.position.y + node.size.height
-        ) {
-          createEdgeFromClient(drag.fromId, node.id, 'relation');
-          return;
-        }
+    function handleKey(e: KeyboardEvent) {
+      const drag = draggingEdge.value;
+      if (!drag) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        draggingEdge.value = null;
+      } else if (e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        draggingEdge.value = { ...drag, withLabel: !drag.withLabel };
       }
     }
 
     document.addEventListener('pointermove', handleMove);
     document.addEventListener('pointerup', handleUp);
+    document.addEventListener('keydown', handleKey);
     return () => {
       document.removeEventListener('pointermove', handleMove);
       document.removeEventListener('pointerup', handleUp);
+      document.removeEventListener('keydown', handleKey);
     };
   }, [containerRef]);
 
@@ -654,51 +747,7 @@ export function CanvasViewport({
         await createWebpageNodes(urls, baseWx, baseWy);
         return;
       }
-
-      const nodeW = 400;
-      const nodeH = 300;
-      const spacing = 20;
-      const cols = Math.ceil(Math.sqrt(files.length));
-
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i];
-        const col = i % cols;
-        const row = Math.floor(i / cols);
-        const wx = baseWx - (cols * (nodeW + spacing)) / 2 + col * (nodeW + spacing);
-        const wy = baseWy - nodeH / 2 + row * (nodeH + spacing);
-
-        const type = nodeTypeFromFilename(file.name);
-        const fileName = file.name;
-
-        if (type === 'image') {
-          const reader = new FileReader();
-          const dataUri: string = await new Promise((resolve) => {
-            reader.onload = () => resolve(reader.result as string);
-            reader.readAsDataURL(file);
-          });
-          await createNodeFromClient({
-            type: 'image',
-            title: fileName,
-            content: dataUri,
-            x: wx,
-            y: wy,
-            width: nodeW,
-            height: nodeH,
-          });
-        } else {
-          const text = await file.text();
-          const isWide = type === 'markdown' || type === 'file';
-          await createNodeFromClient({
-            type,
-            title: fileName,
-            content: text,
-            x: wx,
-            y: wy,
-            width: isWide ? 720 : nodeW,
-            height: isWide ? 500 : nodeH,
-          });
-        }
-      }
+      await importFiles(files, baseWx, baseWy);
     },
     [containerRef, createWebpageNodes],
   );
@@ -731,12 +780,18 @@ export function CanvasViewport({
     };
   }, [containerRef, createWebpageNodes]);
 
-  // Only render world-space nodes (dockPosition === null); docked nodes are in the HUD layer.
   // Do NOT sort by zIndex here — CSS z-index handles visual stacking. Sorting would
   // reorder DOM children when bringToFront() changes zIndex, causing browsers to
   // detach/reattach iframe elements (which forces them to reload/reconnect).
   // Group nodes render first (behind) so they serve as visual containers.
-  const worldNodes = getRenderableWorldNodes(nodes.value.values(), expandedNodeId.value);
+  const worldNodes = getRenderableWorldNodes(
+    nodes.value.values(),
+    expandedNodeId.value,
+    new Set(hiddenByCollapsedGroup.value.keys()),
+  );
+  const dropTarget = dragDropTarget.value;
+  const dropTargetGroup = dropTarget ? nodes.value.get(dropTarget.groupId) : undefined;
+  const draggedNode = dropTarget ? nodes.value.get(dropTarget.nodeId) : undefined;
 
   // Compute lasso overlay rect in screen space
   let lassoStyle: Record<string, string> | null = null;
@@ -757,11 +812,15 @@ export function CanvasViewport({
 
   return (
     <div
-      class="canvas-viewport"
+      class={`canvas-viewport${isPanModeActive() ? ' pan-mode' : ''}`}
       ref={containerRef}
       tabIndex={0}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
+      onPointerLeave={() => {
+        lastPointerScreen.current = null;
+        reportHumanCursor(null);
+      }}
       onPointerUp={handlePointerUp}
       onContextMenu={handleContextMenu}
       onDblClick={handleDblClick}
@@ -779,27 +838,64 @@ export function CanvasViewport({
             ? 'cell'
             : annotationTool === 'text'
               ? 'text'
-              : annotationMode || draggingEdge.value || isLassoing.current
+              : annotationMode || draggingEdge.value || isLassoing.current || canvasTool.value === 'connect'
                 ? 'crosshair'
-                : 'grab',
+                : isPanModeActive()
+                  ? 'grab'
+                  : 'default',
       }}
     >
       {/* D4: CSS matrix(a,b,c,d,tx,ty) — scale uniformly (a=d=scale, b=c=0)
           then translate (tx=v.x, ty=v.y). transformOrigin: '0 0' ensures
           the scale pivot is the top-left corner of the world layer. */}
       <div
+        ref={worldRef}
+        class="canvas-world"
         style={{
           transform: `matrix(${v.scale}, 0, 0, ${v.scale}, ${v.x}, ${v.y})`,
           transformOrigin: '0 0',
-          willChange: 'transform',
           position: 'absolute',
           top: 0,
           left: 0,
         }}
       >
         <FocusFieldLayer />
+        <ScopeFenceLayer />
         <IntentLayer />
-        <EdgeLayer nodes={nodes} edges={edges} />
+        <AgentPresenceLayer />
+        <HumanPresenceLayer />
+        <EdgeLayer nodes={nodes} edges={edges} onEdgeContextMenu={onEdgeContextMenu} />
+        {draggingEdge.value && (
+          <div
+            class="edge-hint-pill"
+            data-testid="edge-hint"
+            style={{ left: `${draggingEdge.value.cursorX + 14}px`, top: `${draggingEdge.value.cursorY + 14}px` }}
+          >
+            <span class="edge-hint-main">
+              {draggingEdge.value.targetId ? 'release to connect' : 'drag onto a node'}
+            </span>
+            <span class="edge-hint-keys">
+              esc cancels · L labels{draggingEdge.value.withLabel ? ' · label on' : ''}
+            </span>
+          </div>
+        )}
+        {dropTarget && dropTargetGroup && draggedNode && (
+          <div
+            class="drop-pill"
+            data-testid="drop-pill"
+            style={{
+              left: `${draggedNode.position.x}px`,
+              top: `${draggedNode.position.y + draggedNode.size.height + 10}px`,
+            }}
+          >
+            <span class="drop-pill-text">
+              {dropTarget.mode === 'add'
+                ? `release to add to ${String(dropTargetGroup.data.title ?? 'group')}`
+                : `release to remove from ${String(dropTargetGroup.data.title ?? 'group')}`}
+            </span>
+            <span class="drop-pill-hint">{dropTarget.mode === 'add' ? 'esc keeps it out' : 'esc keeps it in'}</span>
+          </div>
+        )}
         <AnnotationLayer annotations={Array.from(annotations.value.values())} />
         {draftAnnotation && draftAnnotation.points.length >= 2 && <AnnotationLayer annotations={[draftAnnotation]} />}
         {worldNodes.map((node) => (

package/src/client/canvas/CommandBar.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'preact/hooks';
+import { IconSteer } from '../icons';
+import { contextPinnedNodeIds, nodes, toggleContextPin } from '../state/canvas-store';
+import { steerableAgents } from '../state/presence-store';
+import { sendSteering } from '../state/session-store';
+import { modChord } from '../utils/platform';
+
+/**
+ * Command bar (rail-chrome-v2 phase 5): the human's steering surface while a
+ * session is attached — the design's floating composer, centered at the
+ * bottom of the canvas region. Above it, the pinned context as gold ✦ chips
+ * (× unpins — the same pin the node's own control toggles); the composer row
+ * posts an AX steering message to the session. The context-budget meter lives
+ * in the top bar (`ContextBudget`), where the mockup puts it. Replaces the
+ * quiet board's pin bar only while attached.
+ */
+export function CommandBar() {
+  const pinnedIds = [...contextPinnedNodeIds.value];
+  const nodeMap = nodes.value;
+  const [draft, setDraft] = useState('');
+  const [sending, setSending] = useState(false);
+  // Addressed steering: the picker lists the CONNECTED agents (live presences,
+  // sessions first) and shows only when there is a real choice. A picked agent
+  // that detaches or expires falls back to "All agents" — presence is the
+  // source of truth for who can still claim a delivery.
+  const agents = steerableAgents.value;
+  const [target, setTarget] = useState<string | null>(null);
+  // The picker only earns its place when the roster offers a real choice or
+  // real information: two or more rows. A LONE steerable agent needs no
+  // dropdown — steers auto-address it (the placeholder names it), which also
+  // keeps stale broadcasts from leaking to agents that join later.
+  const showPicker = agents.length >= 2;
+  const soloTarget = !showPicker && agents.length === 1 && agents[0]!.steerable ? agents[0]! : null;
+  // A picked agent that loses its inbox (or leaves) falls back to All —
+  // steers must never keep targeting a roster row that cannot receive.
+  const effective = showPicker
+    ? target
+      ? (agents.find((agent) => agent.value === target && agent.steerable) ?? null)
+      : null
+    : soloTarget;
+  const effectiveTarget = effective?.value ?? null;
+
+  const submit = async () => {
+    const message = draft.trim();
+    if (!message || sending) return;
+    setSending(true);
+    const ok = await sendSteering(message, effectiveTarget);
+    setSending(false);
+    if (ok) setDraft('');
+  };
+
+  return (
+    <div class="command-bar" data-testid="command-bar">
+      {pinnedIds.length > 0 && (
+        <div class="command-bar-chips" aria-label="Pinned context">
+          {pinnedIds.map((id) => {
+            const node = nodeMap.get(id);
+            const title =
+              typeof node?.data.title === 'string' && node.data.title.trim() ? node.data.title : (node?.type ?? id);
+            return (
+              <span key={id} class="command-bar-chip" data-node-id={id}>
+                <span class="command-bar-chip-glyph" aria-hidden="true">
+                  ✦
+                </span>
+                <span class="command-bar-chip-label" title={title}>
+                  {title}
+                </span>
+                <button
+                  type="button"
+                  class="command-bar-chip-unpin"
+                  aria-label={`Unpin ${title}`}
+                  title="Remove from context"
+                  onClick={() => toggleContextPin(id)}
+                >
+                  ×
+                </button>
+              </span>
+            );
+          })}
+          <span class="command-bar-chips-note">in agent context</span>
+        </div>
+      )}
+      <div class="command-bar-composer">
+        <IconSteer size={15} class="command-bar-icon" />
+        {showPicker && (
+          <select
+            class="command-bar-target"
+            aria-label="Steer which agent"
+            title="Connected agents — steering reaches all of them unless you address one"
+            value={effectiveTarget ?? ''}
+            onChange={(e) => setTarget((e.target as HTMLSelectElement).value || null)}
+          >
+            <option value="">All agents</option>
+            {agents.map((agent) => {
+              // Pump health at the point of choice: unclaimed steers already
+              // sitting in this agent's queue (a growing number means its loop
+              // is not polling), and proof-of-polling when its consumer key
+              // claimed recently — attached alone doesn't mean anyone reads
+              // the inbox.
+              const queued = agent.pendingSteers && agent.pendingSteers > 0 ? ` · ${agent.pendingSteers} queued` : '';
+              const polling = agent.polling ? ' · polling' : '';
+              return (
+                <option key={agent.value} value={agent.value} disabled={!agent.steerable}>
+                  {agent.attached
+                    ? `${agent.label}${polling}${queued}`
+                    : agent.steerable
+                      ? `${agent.label} · writer${polling}${queued}`
+                      : `${agent.label} · no inbox`}
+                </option>
+              );
+            })}
+          </select>
+        )}
+        <input
+          class="command-bar-input"
+          type="text"
+          value={draft}
+          placeholder={`Steer ${effective?.label ?? 'the agent'}, or ${modChord('K')} to search the board…`}
+          aria-label="Steer the agent"
+          disabled={sending}
+          onInput={(e) => setDraft((e.target as HTMLInputElement).value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              void submit();
+            }
+          }}
+        />
+        <button
+          type="button"
+          class="command-bar-send"
+          disabled={sending || !draft.trim()}
+          onClick={() => void submit()}
+        >
+          {sending ? 'Sending…' : 'Send'}
+        </button>
+      </div>
+    </div>
+  );
+}