pmx-canvas 0.8.2 → 0.9.1

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -1,4 +1,5 @@
 import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
+import { BarHint } from './BarHint';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { ContextNode } from '../nodes/ContextNode';
 import { DiffNode } from '../nodes/DiffNode';
@@ -17,6 +18,10 @@ import { AxStepControls } from '../nodes/AxStepControls';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
 import { BoardNode } from '../nodes/BoardNode';
+import { RelationsPanel } from './RelationsPanel';
+import { CrossBoardReferences } from './CrossBoardReferences';
+import { lifecycleTarget, openLifecycle } from '../state/knowledge-store';
+import { knowledgeLifecycleEnabled } from '../state/workspace-settings';
 import {
   collapseExpandedNode,
   contextPinnedNodeIds,
@@ -129,6 +134,7 @@ export function ExpandedNodeOverlay() {
   const nodeId = expandedNodeId.value;
   const node = nodeId ? nodes.value.get(nodeId) : undefined;
   const [copied, setCopied] = useState(false);
+  const [relationsFor, setRelationsFor] = useState<string | null>(null);
   const [presenting, setPresenting] = useState(false);
   const [presentationExitToken, setPresentationExitToken] = useState('');
   const presentationOverlayRef = useRef<HTMLDivElement>(null);
@@ -243,7 +249,17 @@ export function ExpandedNodeOverlay() {
     () => (nodeId ? document.querySelector<HTMLElement>(`.canvas-node[data-node-id="${CSS.escape(nodeId)}"]`) : null),
     [nodeId],
   );
-  useFocusTrap(panelRef, node !== undefined, { restoreTo: restoreToNode });
+  const reviewing = knowledgeLifecycleEnabled.value && lifecycleTarget.value?.nodeId === nodeId;
+  const suspendingFocusedReview =
+    !knowledgeLifecycleEnabled.value &&
+    lifecycleTarget.value?.nodeId === nodeId &&
+    !!document.activeElement?.closest('.lifecycle-dialog');
+  useFocusTrap(panelRef, node !== undefined && !reviewing, { restoreTo: restoreToNode });
+  useLayoutEffect(() => {
+    // Resuming the expanded card's trap must not steal the hidden review's return focus.
+    if (suspendingFocusedReview)
+      document.querySelector<HTMLElement>('button[aria-label="Settings"]')?.focus({ preventScroll: true });
+  }, [reviewing]);
 
   if (!node) return null;
 
@@ -282,7 +298,7 @@ export function ExpandedNodeOverlay() {
         ref={panelRef}
         class={`expanded-overlay-panel${isCtxPinned ? ' is-pinned' : ''}`}
         role="dialog"
-        aria-modal="true"
+        aria-modal={reviewing ? undefined : 'true'}
         aria-label={title}
         data-testid="expanded-node"
       >
@@ -293,56 +309,73 @@ export function ExpandedNodeOverlay() {
           </span>
           <span class="expanded-title">{title}</span>
           <span class="expanded-kind-pill">{TYPE_LABELS[node.type]}</span>
-          <button
-            type="button"
-            class={`expanded-pin${isCtxPinned ? ' is-on' : ''}`}
-            onClick={handleToggleCtxPin}
-            title={isCtxPinned ? 'In agent context — click to unpin' : 'Pin as agent context'}
-            aria-pressed={isCtxPinned}
-          >
-            ✦
-          </button>
+          <BarHint label={isCtxPinned ? 'In agent context — click to unpin' : 'Pin as agent context'}>
+            <button
+              type="button"
+              class={`expanded-pin${isCtxPinned ? ' is-on' : ''}`}
+              onClick={handleToggleCtxPin}
+              aria-label={isCtxPinned ? 'In agent context — click to unpin' : 'Pin as agent context'}
+              aria-pressed={isCtxPinned}
+            >
+              ✦
+            </button>
+          </BarHint>
           <span class="expanded-spacer" />
           <div class="expanded-actions">
-            {hasText && (
-              <button type="button" class="expanded-action-btn" onClick={handleCopy} title="Copy content to clipboard">
-                {copied ? 'Copied!' : 'Copy'}
+            {knowledgeLifecycleEnabled.value && (
+              <button type="button" class="expanded-action-btn" onClick={() => openLifecycle(node.id)}>
+                Review
               </button>
             )}
+            <button
+              type="button"
+              class="expanded-action-btn"
+              aria-pressed={relationsFor === nodeId}
+              onClick={() => setRelationsFor(relationsFor === nodeId ? null : nodeId)}
+            >
+              Relations
+            </button>
+            {hasText && (
+              <BarHint label="Copy content to clipboard">
+                <button type="button" class="expanded-action-btn" onClick={handleCopy}>
+                  {copied ? 'Copied!' : 'Copy'}
+                </button>
+              </BarHint>
+            )}
             {canOpenAsSite(node) && (
-              <button
-                type="button"
-                class="expanded-action-btn"
-                onClick={() => void openNodeAsSite(node)}
-                title="Open as a full-page site in the system browser"
-              >
-                Open in tab <IconExternalLink size={14} />
-              </button>
+              <BarHint label="Open as a full-page site in the system browser">
+                <button type="button" class="expanded-action-btn" onClick={() => void openNodeAsSite(node)}>
+                  Open in tab <IconExternalLink size={14} />
+                </button>
+              </BarHint>
             )}
             {canPresent && (
-              <button
-                type="button"
-                class="expanded-action-btn expanded-action-primary"
-                onClick={handlePresent}
-                title="Present this HTML node fullscreen"
-              >
-                Present
-              </button>
+              <BarHint label="Present this HTML node fullscreen">
+                <button type="button" class="expanded-action-btn expanded-action-primary" onClick={handlePresent}>
+                  Present
+                </button>
+              </BarHint>
             )}
           </div>
-          <button type="button" class="expanded-close" onClick={handleClose} title="Close (Esc)" aria-label="Close">
-            <IconClose />
-          </button>
+          <BarHint label="Close" shortcut="Esc" align="end">
+            <button type="button" class="expanded-close" onClick={handleClose} aria-label="Close">
+              <IconClose />
+            </button>
+          </BarHint>
         </div>
 
         {/* Body: the surface at full size */}
-        <div class={`expanded-body${isEmbeddedViewer ? ' is-embedded' : ''}`}>
-          {isEmbeddedViewer ? (
-            <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>{renderContent(node, true)}</div>
-          ) : (
-            renderContent(node, true)
-          )}
+        <div class="expanded-content-row">
+          <div class={`expanded-body${isEmbeddedViewer ? ' is-embedded' : ''}`}>
+            {isEmbeddedViewer ? (
+              <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>{renderContent(node, true)}</div>
+            ) : (
+              renderContent(node, true)
+            )}
+          </div>
+          {relationsFor === nodeId && <RelationsPanel key={nodeId} nodeId={node.id} />}
         </div>
+        <CrossBoardReferences node={node} />
         {/* AX step controls follow the node into focus mode. Without this,
             expanding a materialized flow step showed only its text — the
             Start/Done/Blocked and loop controls live in CanvasNode's body,
@@ -380,7 +413,6 @@ export function ExpandedNodeOverlay() {
               type="button"
               class="html-presentation-exit"
               onClick={handleExitPresentation}
-              title="Exit presentation (Esc)"
               aria-label="Exit presentation"
             >
               Exit presentation

package/src/client/canvas/ExternalWriters.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'preact/hooks';
+import { useLayoutEffect, useRef } from 'preact/hooks';
+import { BarHint } from './BarHint';
 import { IconClose, IconExternalLink } from '../icons';
 import type { AgentPresence } from '../../shared/agent-presence.js';
 import { vetoGhostIntent } from '../state/intent-bridge';
@@ -10,11 +11,12 @@ import {
   agentPresences,
   externalWriterPresences,
   relativeAge,
-  sessionActive,
+  sessionChromeActive,
   writerColor,
   writerInitial,
   writersSheetOpen,
 } from '../state/presence-store';
+import { agentSessionsEnabled } from '../state/workspace-settings';
 import { scopeFence, pendingGates, startSession } from '../state/session-store';
 import { sessionId } from '../state/canvas-store';
 import { useFocusTrap } from './use-focus-trap';
@@ -46,32 +48,38 @@ function Avatar({ presence, size = 18 }: { presence: Pick<AgentPresence, 'sessio
 /** Top-bar indicator: avatar cluster, "3 writers", op count, pulsing dot. */
 export function ExternalWriterIndicator() {
   const writers = externalWriterPresences.value;
-  if (sessionActive.value || writers.length === 0) return null;
+  if (sessionChromeActive.value || writers.length === 0) return null;
   const ops = writers.reduce((sum, writer) => sum + writer.opCount, 0);
   const label = writers.length === 1 ? writers[0]!.label : `${writers.length} writers`;
   const open = activityFeedOpen.value;
   return (
-    <button
-      type="button"
-      class="external-indicator"
-      data-testid="external-indicator"
-      aria-expanded={open}
-      title={`${writers.length} external writer${writers.length === 1 ? '' : 's'} on this board — click for activity`}
-      onClick={() => {
-        activityFeedOpen.value = !open;
-      }}
+    <BarHint
+      label={`${writers.length} external writer${writers.length === 1 ? '' : 's'} on this board`}
+      body="Click for their activity."
+      align="end"
     >
-      <span class="external-indicator-avatars">
-        {writers.slice(0, 3).map((writer) => (
-          <Avatar key={writer.sessionId} presence={writer} />
-        ))}
-      </span>
-      <span class="external-indicator-label">{label}</span>
-      <span class="external-indicator-ops hud-collapsible-text">
-        {ops} op{ops === 1 ? '' : 's'}
-      </span>
-      <span class="external-indicator-dot" aria-hidden="true" />
-    </button>
+      <button
+        type="button"
+        class="external-indicator"
+        data-testid="external-indicator"
+        aria-label={`${label} external activity, ${ops} operation${ops === 1 ? '' : 's'}`}
+        aria-expanded={open}
+        onClick={() => {
+          activityFeedOpen.value = !open;
+        }}
+      >
+        <span class="external-indicator-avatars">
+          {writers.slice(0, 3).map((writer) => (
+            <Avatar key={writer.sessionId} presence={writer} />
+          ))}
+        </span>
+        <span class="external-indicator-label">{label}</span>
+        <span class="external-indicator-ops hud-collapsible-text">
+          {ops} op{ops === 1 ? '' : 's'}
+        </span>
+        <span class="external-indicator-dot" aria-hidden="true" />
+      </button>
+    </BarHint>
   );
 }
 
@@ -100,17 +108,18 @@ export function ActivityFeed() {
   const writers = externalWriterPresences.value;
   const now = useNow(open ? 10_000 : 0);
   // Esc closes the top-most surface: the sheet first, then the feed.
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') return;
+      if (e.key !== 'Escape' || e.defaultPrevented) return;
+      e.preventDefault();
       if (writersSheetOpen.value) writersSheetOpen.value = false;
       else activityFeedOpen.value = false;
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
   }, [open]);
-  if (!open || sessionActive.value || writers.length === 0) return null;
+  if (!open || sessionChromeActive.value || writers.length === 0) return null;
 
   const filter = activityFilter.value;
   const proposals = pendingProposals().filter((intent) => !filter || (intent.source ?? '') === filter);
@@ -139,7 +148,7 @@ export function ActivityFeed() {
           </div>
           <div class="activity-feed-sub">
             {writers.reduce((sum, writer) => sum + writer.opCount, 0)} writes · last{' '}
-            {relativeAge(latestWrite(writers), now)} · no session attached
+            {relativeAge(latestWrite(writers), now)} · live writers
           </div>
         </div>
         <button
@@ -219,16 +228,18 @@ export function ActivityFeed() {
         >
           Writers
         </button>
-        <button
-          type="button"
-          class="activity-feed-link is-accent"
-          onClick={() => {
-            activityFeedOpen.value = false;
-            void startSession();
-          }}
-        >
-          Start session <IconExternalLink size={14} />
-        </button>
+        {agentSessionsEnabled.value && (
+          <button
+            type="button"
+            class="activity-feed-link is-accent"
+            onClick={() => {
+              activityFeedOpen.value = false;
+              void startSession();
+            }}
+          >
+            Start session <IconExternalLink size={14} />
+          </button>
+        )}
       </div>
     </div>
   );
@@ -248,8 +259,8 @@ export function WritersSheet() {
   const sheetRef = useRef<HTMLDivElement>(null);
   useFocusTrap(sheetRef, open);
   if (!open) return null;
-  const sessions = agentPresences.value.filter((presence) => presence.attached);
-  const external = agentPresences.value.filter((presence) => !presence.attached);
+  const sessions = agentSessionsEnabled.value ? agentPresences.value.filter((presence) => presence.attached) : [];
+  const external = externalWriterPresences.value;
   const close = () => {
     writersSheetOpen.value = false;
   };
@@ -272,8 +283,12 @@ export function WritersSheet() {
           </button>
         </div>
         <div class="writers-body">
-          <div class="writers-section">Agent sessions</div>
-          {sessions.length === 0 && <div class="writers-empty">None attached — start one from the top bar.</div>}
+          {agentSessionsEnabled.value && (
+            <>
+              <div class="writers-section">Agent sessions</div>
+              {sessions.length === 0 && <div class="writers-empty">None attached — start one from the top bar.</div>}
+            </>
+          )}
           {sessions.map((presence) => (
             <div key={presence.sessionId} class="writers-row">
               <Avatar presence={presence} size={20} />
@@ -281,7 +296,7 @@ export function WritersSheet() {
               <span class="writers-config">{sessionConfig()}</span>
             </div>
           ))}
-          <div class="writers-section">External writers · MCP</div>
+          <div class="writers-section">{agentSessionsEnabled.value ? 'External writers · MCP' : 'Live writers'}</div>
           {external.length === 0 && <div class="writers-empty">No external writers right now.</div>}
           {external.map((presence) => (
             <div key={presence.sessionId} class="writers-row">