pmx-canvas 0.10.0 → 0.12.0

package/src/client/nodes/AxStepControls.tsx

@@ -18,37 +18,10 @@ import { axNodeActionButtonStyle, runNodeAxInteraction } from './ax-node-actions
  */
 
 /**
- * The rows sit in a dock stuck to the bottom of the scrollable node body: a step
- * node is short (360x200 as materialized), so a control row that simply followed
- * the content scrolled out of sight. Sticky keeps it reachable at any node height
- * while still being INSIDE the body, which is what auto-fit measures.
+ * The rows sit in `.ax-step-dock`, a footer that stays reachable at the bottom of
+ * the node body (global.css). On a card it shares one footer row with the card's
+ * own actions; in the expanded overlay it is a sticky bar under the document.
  */
-/**
- * The dock reads as a real footer toolbar rather than stray text at the bottom
- * edge. It bleeds to the container's edges via negative margins (`.node-body`
- * has 12px padding; the expanded overlay's content area has 16px, and the dock
- * is a sibling of that area, so it starts flush) and then re-applies its own
- * padding — otherwise the first label sits hard against the left edge and looks
- * clipped. `--c-panel-overlay` separates it from the content above it.
- */
-const dockStyle = {
-  position: 'sticky',
-  // Bleed OUT of the container's padding so the bar spans edge to edge, then
-  // re-apply padding inside it. These are two different numbers: in a node body
-  // the dock sits INSIDE 12px of padding and must pull back out of it, while in
-  // the expanded overlay it is a sibling of the padded content area and is
-  // already flush — bleeding there would push it off the panel.
-  bottom: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  marginTop: '12px',
-  marginLeft: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  marginRight: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  marginBottom: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  padding: '9px var(--ax-dock-pad, 12px) 10px',
-  background: 'var(--c-panel-overlay)',
-  borderTop: '1px solid var(--c-line)',
-  backdropFilter: 'blur(6px)',
-} as const;
-
 const rowStyle = {
   display: 'flex',
   alignItems: 'center',
@@ -57,7 +30,7 @@ const rowStyle = {
 } as const;
 
 const labelStyle = {
-  fontSize: '10px',
+  fontSize: 'var(--fs-meta)',
   color: 'var(--c-muted)',
   textTransform: 'uppercase',
   letterSpacing: '0.04em',
@@ -160,47 +133,50 @@ function FlowLoopControls({ node, flow }: { node: CanvasNodeState; flow: AxFlowS
           </button>
         </BarHint>
       )}
-      <input
-        class="ax-flow-steer-input"
-        value={message}
-        placeholder="Steer the agent…"
-        aria-label="Steer the agent"
-        onInput={(e) => setMessage((e.target as HTMLInputElement).value)}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => {
-          if (e.key !== 'Enter') return;
-          e.stopPropagation();
-          void handleSteer();
-        }}
-        style={{
-          flex: '1 1 120px',
-          minWidth: '90px',
-          fontSize: '10px',
-          padding: '3px 6px',
-          borderRadius: '4px',
-          border: '1px solid var(--c-line)',
-          background: 'var(--c-panel-overlay)',
-          color: 'var(--c-text)',
-        }}
-      />
-      <BarHint
-        label="Send a steering message to the agent working this flow"
-        side="up"
-        align="end"
-        fitWithin=".node-content, .expanded-overlay-panel"
-      >
-        <button
-          type="button"
-          class="ax-node-action"
-          style={axNodeActionButtonStyle}
-          onClick={(e) => {
+      {/* The draft and its send button wrap as one unit, never a lone Steer. */}
+      <span style={{ display: 'flex', gap: '6px', flex: '1 1 140px', minWidth: 0 }}>
+        <input
+          class="ax-flow-steer-input"
+          value={message}
+          placeholder="Steer the agent…"
+          aria-label="Steer the agent"
+          onInput={(e) => setMessage((e.target as HTMLInputElement).value)}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key !== 'Enter') return;
             e.stopPropagation();
             void handleSteer();
           }}
+          style={{
+            flex: '1 1 0',
+            minWidth: 0,
+            fontSize: 'var(--fs-meta)',
+            padding: '3px 6px',
+            borderRadius: '4px',
+            border: '1px solid var(--c-line)',
+            background: 'var(--c-panel-overlay)',
+            color: 'var(--c-text)',
+          }}
+        />
+        <BarHint
+          label="Send a steering message to the agent working this flow"
+          side="up"
+          align="end"
+          fitWithin=".node-content, .expanded-overlay-panel"
         >
-          Steer
-        </button>
-      </BarHint>
+          <button
+            type="button"
+            class="ax-node-action"
+            style={axNodeActionButtonStyle}
+            onClick={(e) => {
+              e.stopPropagation();
+              void handleSteer();
+            }}
+          >
+            Steer
+          </button>
+        </BarHint>
+      </span>
     </div>
   );
 }
@@ -212,7 +188,7 @@ export function AxStepControls({ node }: { node: CanvasNodeState }) {
   const status = mirroredStatus(node.data);
 
   return (
-    <div class="ax-step-dock" style={dockStyle}>
+    <div class="ax-step-dock">
       <div class="ax-step-controls" style={rowStyle}>
         <span class="ax-step-position" style={labelStyle}>
           Step {step.index}/{step.total}

package/src/client/nodes/BoardNode.tsx

@@ -1,20 +1,43 @@
 import type { CanvasNodeState } from '../types';
-import { boardList, openBoard } from '../state/boards-store';
+import { useState } from 'preact/hooks';
+import { activeBoardId, boardList, openBoard } from '../state/boards-store';
+import { updateNodeFromClient } from '../state/intent-bridge';
 import { IconExternalLink } from '../icons';
 
-/** Native text-only cross-board link. Target identity is the durable board id. */
+/** Target identity is the durable board id; a missing target can be relinked. */
 export function BoardNode({ node }: { node: CanvasNodeState }) {
   const boardId = typeof node.data.boardId === 'string' ? node.data.boardId : '';
   const target = boardList.value.find((board) => board.id === boardId);
+  const [relinking, setRelinking] = useState(false);
+  const [error, setError] = useState('');
   return (
     <div class="board-node">
+      {target ? (
+        <div class="home-thumb" aria-hidden="true">
+          <div class="home-thumb-inner">
+            {(target.preview ?? []).map((rect, index) => (
+              <span
+                key={index}
+                class={`home-thumb-card${rect.pinned ? ' is-pinned' : ''}`}
+                style={{
+                  left: `${rect.x * 100}%`,
+                  top: `${rect.y * 100}%`,
+                  width: `${rect.w * 100}%`,
+                  height: `${rect.h * 100}%`,
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div class="board-node-missing">Board not found</div>
+      )}
       <div class="board-node-content">
-        <div class="board-node-label">Linked board</div>
-        <strong class="board-node-title">{target?.name ?? 'Missing board'}</strong>
+        <strong class="board-node-title">{target?.name ?? String(node.data.title || 'Linked board')}</strong>
         <div class="board-node-meta">
           {target
-            ? `${target.nodeCount} nodes${target.pin ? ' · pinned, so it travels with you' : ''}`
-            : boardId || 'No target id'}
+            ? `Board · ${target.nodeCount} nodes${target.pin ? ' · pinned, so it travels with you' : ''}`
+            : 'The linked board is no longer available.'}
         </div>
         {target?.summary && <p class="board-node-summary">{target.summary}</p>}
         {!!target?.pinnedTitles?.length && (
@@ -25,14 +48,47 @@ export function BoardNode({ node }: { node: CanvasNodeState }) {
             Linked from: {[...new Set(target.backlinks.map((link) => link.title))].join(', ')}
           </p>
         )}
+        {relinking && (
+          <select
+            aria-label="Link to board"
+            class="board-node-relink"
+            value=""
+            onChange={async (event) => {
+              const id = event.currentTarget.value;
+              if (!id) return;
+              setError('');
+              const result = await updateNodeFromClient(node.id, {
+                data: { boardId: id },
+                expectedBoardId: activeBoardId.value,
+              });
+              if (result.ok) setRelinking(false);
+              else setError('Could not relink this card. Try again.');
+            }}
+          >
+            <option value="" disabled>
+              Choose board…
+            </option>
+            {boardList.value
+              .filter((board) => board.id !== activeBoardId.value)
+              .map((board) => (
+                <option key={board.id} value={board.id}>
+                  {board.name}
+                </option>
+              ))}
+          </select>
+        )}
+        {error && (
+          <div role="status" class="board-node-meta">
+            {error}
+          </div>
+        )}
       </div>
       <button
         class="board-node-open"
         type="button"
-        disabled={!target}
-        onClick={() => target && void openBoard(target.id)}
+        onClick={() => (target ? void openBoard(target.id) : setRelinking(!relinking))}
       >
-        {target ? 'Open board' : 'Target unavailable'}
+        {target ? 'Open board' : 'Link to board…'}
         {target && <IconExternalLink size={14} />}
       </button>
     </div>