pmx-canvas 0.4.8 → 0.5.0

package/src/client/canvas/AgentPresenceLayer.tsx

@@ -0,0 +1,74 @@
+import { useRef } from 'preact/hooks';
+import { agentIdentityHue, agentPhaseLabel, type AgentPresence } from '../../shared/agent-presence.js';
+import { nodes, viewport } from '../state/canvas-store';
+import { agentPresences, presenceWorldPosition } from '../state/presence-store';
+
+/**
+ * Agent presence layer (rail-chrome-v2 phase 3): one cursor + phase chip per
+ * live writer — attached sessions and external (unattached) writers alike. Lives inside the
+ * world layer (like IntentLayer) so it pans and zooms with the board; the
+ * glyph itself is counter-scaled so it stays a constant screen size. Moves
+ * glide (220ms) — pans and zooms do not, because those move the world layer.
+ *
+ * Sibling of IntentLayer by design: ghosts show WHAT is about to change and
+ * carry the veto; this layer shows WHERE the agent is and WHAT PHASE it is in.
+ */
+export function AgentPresenceLayer() {
+  // Remember the last resolved position per writer so a cursor parked on a
+  // node that was just removed stays where it was instead of vanishing.
+  const lastPositions = useRef(new Map<string, { x: number; y: number }>());
+
+  const scale = viewport.value.scale;
+  const nodeMap = nodes.value;
+  const counterScale = 1 / Math.max(0.05, scale);
+
+  // Every live writer paints a cursor, attached session or not — an external
+  // writer editing a quiet board is exactly when the human needs to see WHERE
+  // it is working (user call, 2026-08-24). Unattached writers get the
+  // `is-external` style; a board with no writers renders nothing. Attached
+  // twins never double-paint (twin-merge folds an agent's channels into one
+  // session), and an external writer's channels appear exactly as the
+  // External-activity panel counts them.
+  const cursors = agentPresences.value
+    .map((presence) => {
+      const resolved = presenceWorldPosition(presence, (id) => nodeMap.get(id));
+      if (resolved) lastPositions.current.set(presence.sessionId, resolved);
+      const position = resolved ?? lastPositions.current.get(presence.sessionId) ?? null;
+      return position ? { presence, position } : null;
+    })
+    .filter((entry): entry is { presence: AgentPresence; position: { x: number; y: number } } => entry !== null);
+
+  if (cursors.length === 0) return null;
+
+  return (
+    <div class="agent-presence-layer" aria-hidden="true">
+      {cursors.map(({ presence, position }) => (
+        <div
+          key={presence.sessionId}
+          class={`agent-cursor phase-${presence.phase}${presence.attached ? '' : ' is-external'}${presence.parentAgentId ? ' is-worker' : ''}`}
+          data-session-id={presence.sessionId}
+          style={{
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            '--identity-color': `hsl(${agentIdentityHue(presence.sessionId)} 65% 62%)`,
+          }}
+        >
+          <div class="agent-cursor-inner" style={{ transform: `scale(${counterScale})` }}>
+            <svg class="agent-cursor-glyph" width="16" height="18" viewBox="0 0 16 18" aria-hidden="true">
+              <path
+                d="M1.5 1.5L14.5 9.2 8.3 10.6 5.2 16.5z"
+                fill="currentColor"
+                stroke="var(--c-bg)"
+                stroke-width="1.2"
+              />
+            </svg>
+            <span class="agent-cursor-chip">
+              <span class="agent-cursor-dot" />
+              <span class="agent-cursor-label">{agentPhaseLabel(presence)}</span>
+              <span class="agent-cursor-who">{presence.label}</span>
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/canvas/AttentionHistory.tsx

@@ -5,7 +5,6 @@ import {
   closeAttentionHistory,
   openAttentionHistory,
 } from '../state/attention-store';
-import { collapseDockedContextNodes, hasOpenDockedContextPanel } from '../state/canvas-store';
 
 function formatTimestamp(timestamp: number): string {
   return new Date(timestamp).toLocaleTimeString([], {
@@ -15,9 +14,6 @@ function formatTimestamp(timestamp: number): string {
 }
 
 function handleOpenUpdates(): void {
-  // Mutual exclusion with the Context panel — only one side panel open at a
-  // time (they share the same right-edge anchor).
-  collapseDockedContextNodes();
   openAttentionHistory();
 }
 
@@ -27,12 +23,6 @@ export function AttentionHistory() {
 
   const isOpen = attentionHistoryOpen.value;
   const unread = attentionHistoryUnread.value;
-  // Hide the collapsed Updates pill while the Context side panel is open —
-  // the panel sits at the same right-edge and would visually cover the pill.
-  // Mutual exclusion guarantees both can't be expanded simultaneously, so the
-  // pill only needs to hide while context is expanded.
-  if (!isOpen && hasOpenDockedContextPanel.value) return null;
-
   if (!isOpen) {
     return (
       <button

package/src/client/canvas/BarHint.tsx

@@ -0,0 +1,49 @@
+import type { ComponentChildren } from 'preact';
+
+/**
+ * Styled hover/focus tooltip for bar controls — the replacement for native
+ * `title` hints, which are delay-gated and never render in embedded panes.
+ */
+export function BarHint({
+  label,
+  shortcut,
+  body,
+  align = 'center',
+  side = 'down',
+  tapToOpen = false,
+  children,
+}: {
+  label: string;
+  shortcut?: string;
+  /** One or two plain sentences under the label — the explanation a native `title` used to hide. */
+  body?: string;
+  align?: 'start' | 'center' | 'end';
+  /** Which way the tooltip opens. Bars at the bottom of the region open 'up'. */
+  side?: 'down' | 'up';
+  /**
+   * Informational (non-button) content: a click/focus opens the tooltip, so
+   * surfaces that do not forward hover (embedded panes, touch) still reach
+   * the explanation. Never for action buttons — their tooltips must dismiss
+   * after the click, not linger on focus.
+   */
+  tapToOpen?: boolean;
+  children: ComponentChildren;
+}) {
+  return (
+    <span
+      class={`toolbar-tooltip-anchor toolbar-tooltip-anchor-${align}${side === 'up' ? ' toolbar-tooltip-anchor-up' : ''}${tapToOpen ? ' toolbar-tooltip-anchor-tap' : ''}`}
+      tabIndex={tapToOpen ? -1 : undefined}
+    >
+      {children}
+      <span class="toolbar-tooltip" role="tooltip">
+        <span class="toolbar-tooltip-label">{label}</span>
+        {body && <span class="toolbar-tooltip-body">{body}</span>}
+        {shortcut && (
+          <span class="toolbar-tooltip-meta">
+            <kbd class="toolbar-tooltip-shortcut">{shortcut}</kbd>
+          </span>
+        )}
+      </span>
+    </span>
+  );
+}