pmx-canvas 0.7.3 → 0.8.2

package/src/client/canvas/SessionReceipt.tsx

@@ -1,13 +1,25 @@
-import { useState } from 'preact/hooks';
-import { dismissSessionReceipt, sessionReceipt } from '../state/session-store';
-import { IconClose } from '../icons';
+import { useEffect, useState } from 'preact/hooks';
+import { toggleContextPin } from '../state/canvas-store';
+import {
+  activityLensNodeIds,
+  dismissSessionReceipt,
+  type ReceiptNode,
+  type SessionContextActivity,
+  sessionReceipt,
+  setActivityLens,
+} from '../state/session-store';
+import { IconClose, IconPin } from '../icons';
+import { GLYPHS } from './NodeContextMark';
+import { workbenchFetch } from '../state/workbench-transport';
 
 /**
  * Session receipt (rail-chrome-v2 phase 5, design item 2): a dismissible card
  * at the canvas region's top-right after a session ends — what the session did
  * (items / done / vetoed), the pre-session snapshot (taken at attach, so View
  * diff shows the session's changes and a restore undoes them), and History
- * (the snapshots panel). Client-side state, cleared on dismiss.
+ * (the snapshots panel). Client-side state, cleared on dismiss (see
+ * applySessionReceipt for which endings show at all and how a burst merges
+ * into one card).
  */
 
 export interface DiffSummary {
@@ -28,17 +40,96 @@ export function summarizeDiff(diff: unknown): DiffSummary | null {
   };
 }
 
+const titles = (nodes: ReceiptNode[]) => nodes.map((node) => node.title).join(', ');
+
+/**
+ * What the session did with context (docs/design/AgentContext.dc.html): an
+ * amber line for pins it read that changed since, one row per kind of touch,
+ * and the lens switch that dims every node the session did not touch.
+ */
+function ReceiptContext({ context, label }: { context: SessionContextActivity; label: string }) {
+  const rows: Array<{ key: keyof SessionContextActivity; name: string; glyph: keyof typeof GLYPHS | 'pin' }> = [
+    { key: 'read', name: 'Read', glyph: 'eye' },
+    { key: 'pinned', name: 'Pinned', glyph: 'pin' },
+    { key: 'created', name: 'Created', glyph: 'spark' },
+    { key: 'edited', name: 'Edited', glyph: 'pen' },
+  ];
+  const present = rows.filter((row) => context[row.key].length > 0);
+  if (present.length === 0 && context.changedSinceRead.length === 0) return null;
+  const lensOn = activityLensNodeIds.value !== null;
+  return (
+    <div class="session-receipt-context" data-testid="session-receipt-context">
+      {context.changedSinceRead.length > 0 && (
+        <div class="session-receipt-warn">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d={GLYPHS.warn} />
+          </svg>
+          <span>
+            {titles(context.changedSinceRead)} changed after {label} read{' '}
+            {context.changedSinceRead.length === 1 ? 'it' : 'them'}.
+          </span>
+        </div>
+      )}
+      {present.map((row) => (
+        <div key={row.key} class="session-receipt-context-row" data-row={row.key}>
+          <div class="session-receipt-context-head">
+            {row.glyph === 'pin' ? (
+              <IconPin />
+            ) : (
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d={GLYPHS[row.glyph]} />
+              </svg>
+            )}
+            <span class="session-receipt-context-name">{row.name}</span>
+            <span class="session-receipt-context-count">{context[row.key].length}</span>
+            {row.key === 'pinned' && (
+              <button
+                type="button"
+                class="session-receipt-mini"
+                onClick={() => {
+                  for (const node of context.pinned) toggleContextPin(node.id);
+                }}
+              >
+                Unpin
+              </button>
+            )}
+          </div>
+          <div class="session-receipt-context-items">
+            {row.key === 'pinned'
+              ? context.pinned.map((node) => (node.reason ? `${node.title} — “${node.reason}”` : node.title)).join('; ')
+              : titles(context[row.key])}
+          </div>
+        </div>
+      ))}
+      <button
+        type="button"
+        role="switch"
+        aria-checked={lensOn}
+        class={`session-receipt-lens${lensOn ? ' is-on' : ''}`}
+        onClick={() => setActivityLens(!lensOn)}
+      >
+        <span class="session-receipt-lens-track" aria-hidden="true">
+          <span class="session-receipt-lens-knob" />
+        </span>
+        Dim untouched nodes
+      </button>
+    </div>
+  );
+}
+
 export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => void }) {
   const receipt = sessionReceipt.value;
   const [diff, setDiff] = useState<DiffSummary | null>(null);
   const [loadingDiff, setLoadingDiff] = useState(false);
+  // A new or merged receipt: the old diff no longer describes it.
+  useEffect(() => setDiff(null), [receipt]);
   if (!receipt) return null;
 
   const viewDiff = async () => {
     if (!receipt.snapshot) return;
     setLoadingDiff(true);
     try {
-      const response = await fetch(`/api/canvas/snapshots/${encodeURIComponent(receipt.snapshot.id)}/diff`, {
+      const response = await workbenchFetch(`/api/canvas/snapshots/${encodeURIComponent(receipt.snapshot.id)}/diff`, {
         headers: { 'x-pmx-workbench': '1' },
       });
       if (response.ok) {
@@ -60,13 +151,15 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
       <div class="session-receipt-head">
         <span class="session-receipt-dot" aria-hidden="true" />
         <span class="session-receipt-title">
-          {receipt.endedBy === 'human'
-            ? 'Session ended by you'
-            : receipt.endedBy === 'idle-timeout'
-              ? 'Session ended — idle timeout'
-              : receipt.endedBy === 'agent'
-                ? 'Session ended by the agent'
-                : 'Session ended'}
+          {receipt.sessions > 1
+            ? `${receipt.sessions} sessions ended`
+            : receipt.endedBy === 'human'
+              ? 'Session ended by you'
+              : receipt.endedBy === 'idle-timeout'
+                ? 'Session ended — idle timeout'
+                : receipt.endedBy === 'agent'
+                  ? 'Session ended by the agent'
+                  : 'Session ended'}
           {endedLabel ? ` · ${endedLabel}` : ''}
         </span>
         <button
@@ -78,6 +171,7 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           <IconClose />
         </button>
       </div>
+      {receipt.sessions > 1 && <div class="session-receipt-who">{receipt.labels.join(', ')}</div>}
       <div class="session-receipt-tiles">
         <div class="session-receipt-tile">
           <span class="session-receipt-tile-label">Items</span>
@@ -108,12 +202,15 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           </div>
         )}
       </div>
+      <ReceiptContext context={receipt.context} label={receipt.labels.join(', ')} />
       <div class="session-receipt-note">
-        {receipt.snapshot
-          ? 'A snapshot of the board from before this session is saved — restore it to undo the session.'
-          : receipt.unchanged
-            ? 'This session changed nothing on the board — no snapshot kept.'
-            : 'The board was empty when the session started — nothing to restore.'}
+        {receipt.sessions > 1
+          ? 'History has each session’s diff and the snapshot from before it.'
+          : receipt.snapshot
+            ? 'A snapshot of the board from before this session is saved — restore it to undo the session.'
+            : receipt.context.created.length === 0 && receipt.context.edited.length === 0
+              ? 'The board itself did not change — nothing to restore.'
+              : 'The board was empty when the session started — nothing to restore.'}
       </div>
       {diff && (
         <div class="session-receipt-diff" data-testid="session-receipt-diff">

package/src/client/canvas/ShortcutOverlay.tsx

@@ -1,3 +1,4 @@
+import { isHostedWorkbench } from '../state/workbench-transport';
 import { isMac, modChord } from '../utils/platform';
 
 interface ShortcutGroup {
@@ -74,7 +75,11 @@ export function ShortcutOverlay({ onClose }: { onClose: () => void }) {
               {group.shortcuts.map((s) => (
                 <div key={s.keys} class="shortcut-row">
                   <kbd class="shortcut-keys">{s.keys}</kbd>
-                  <span class="shortcut-desc">{s.desc}</span>
+                  <span class="shortcut-desc">
+                    {isHostedWorkbench() && s.desc.startsWith('Undo / redo')
+                      ? 'Undo / redo — available in the local workbench only'
+                      : s.desc}
+                  </span>
                 </div>
               ))}
             </div>

package/src/client/canvas/SnapshotPanel.tsx

@@ -1,3 +1,4 @@
+import { isHostedWorkbench } from '../state/workbench-transport';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { IconClose } from '../icons';
 import {
@@ -171,7 +172,11 @@ export function SnapshotPanel({
           type="button"
           class="snapshot-action-btn snapshot-action-restore"
           onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
-          title="Restore this snapshot — replaces the current canvas (undoable)"
+          title={
+            isHostedWorkbench()
+              ? 'Restore this snapshot — replaces the current canvas'
+              : 'Restore this snapshot — replaces the current canvas (undoable)'
+          }
           disabled={restoringId !== null}
         >
           {restoringId === snap.id ? 'Restoring…' : restoreLabel}
@@ -219,7 +224,11 @@ export function SnapshotPanel({
           {saving ? '…' : 'Save'}
         </button>
       </div>
-      <div class="snapshot-restore-note">Restoring replaces the current canvas. You can undo it if needed.</div>
+      <div class="snapshot-restore-note">
+        {isHostedWorkbench()
+          ? 'Restoring replaces the current canvas. Save a snapshot first to keep your current state.'
+          : 'Restoring replaces the current canvas. You can undo it if needed.'}
+      </div>
 
       <div class="snapshot-list">
         {loading && <div class="snapshot-empty">Loading…</div>}

package/src/client/canvas/ToolRail.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
 import {
   IconArrange,
   IconClearTrace,
@@ -229,7 +230,7 @@ export function ToolRail({
   const activeTheme = normalizeCanvasThemeName(canvasTheme.value);
 
   const sendIntent = (type: string, payload: Record<string, unknown> = {}) => {
-    fetch(`/api/workbench/intent?_ts=${Date.now()}`, {
+    workbenchFetch(`/api/workbench/intent?_ts=${Date.now()}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ type, payload }),
@@ -398,14 +399,16 @@ export function ToolRail({
         >
           <IconArrange />
         </RailButton>
-        <RailButton
-          label={isTraceOn ? 'Disable trace' : 'Enable trace'}
-          active={isTraceOn}
-          onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
-        >
-          <IconTrace />
-        </RailButton>
-        {(isTraceOn || traceNodeCount > 0) && (
+        {!isHostedWorkbench() && (
+          <RailButton
+            label={isTraceOn ? 'Disable trace' : 'Enable trace'}
+            active={isTraceOn}
+            onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
+          >
+            <IconTrace />
+          </RailButton>
+        )}
+        {!isHostedWorkbench() && (isTraceOn || traceNodeCount > 0) && (
           <RailButton label="Clear trace" onClick={() => sendIntent('trace-clear')}>
             <IconClearTrace />
           </RailButton>

package/src/client/canvas/TopBar.tsx

@@ -1,6 +1,7 @@
 import { exportDialogOpen } from './ExportDialog';
 import { activeBoardId } from '../state/boards-store';
 import { BoardSwitcher } from './BoardSwitcher';
+import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
 import type { ComponentChildren } from 'preact';
 import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
@@ -24,8 +25,7 @@ import { degradedState } from './ConnectionBanner';
 import { ExternalWriterIndicator } from './ExternalWriters';
 import { useNow } from './use-now';
 import { agentPhaseLabel } from '../../shared/agent-presence.js';
-import { agentIdentityHue } from '../../shared/agent-presence.js';
-import { activeSession, agentPresences, attachedSessions, contextBudget } from '../state/presence-store';
+import { activeSession, agentPresences, attachedSessions, contextBudget, writerColor } from '../state/presence-store';
 import { endSession, pendingGates, startSession } from '../state/session-store';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
 
@@ -56,6 +56,7 @@ function AgentChip() {
       !allSessions.some(
         (candidate) =>
           candidate.sessionId !== session.sessionId &&
+          !candidate.parentAgentId &&
           (candidate.sessionId === session.parentAgentId || candidate.source === session.parentAgentId),
       ),
   );
@@ -83,12 +84,16 @@ function AgentChip() {
       <span class="agent-chips">
         {visible.map((session) => {
           // Fleet roll-up: workers declaring this session as their parent count
-          // into its chip instead of growing the bar one chip per worker.
-          const workers = agentPresences.value.filter(
-            (presence) =>
-              presence.parentAgentId != null &&
-              (presence.parentAgentId === session.sessionId || presence.parentAgentId === session.source),
-          ).length;
+          // into its chip instead of growing the bar one chip per worker. A
+          // worker's own chip carries no roll-up: same-source siblings would
+          // otherwise match it through `session.source`.
+          const workers = session.parentAgentId
+            ? 0
+            : agentPresences.value.filter(
+                (presence) =>
+                  presence.parentAgentId != null &&
+                  (presence.parentAgentId === session.sessionId || presence.parentAgentId === session.source),
+              ).length;
           return (
             <BarHint
               key={session.sessionId}
@@ -99,7 +104,7 @@ function AgentChip() {
               <span
                 class={`agent-chip phase-${session.phase}`}
                 data-phase={session.phase}
-                style={{ '--identity-color': `hsl(${agentIdentityHue(session.sessionId)} 65% 62%)` }}
+                style={{ '--identity-color': writerColor(session.sessionId) }}
               >
                 <span class="agent-chip-dot" aria-hidden="true" />
                 <span class="agent-chip-label">{agentPhaseLabel(session)}</span>
@@ -272,7 +277,7 @@ export function TopBar() {
   const [workspaceName, setWorkspaceName] = useState<string>('');
   useEffect(() => {
     let cancelled = false;
-    fetch('/health')
+    workbenchFetch('/health')
       .then((r) => (r.ok ? r.json() : null))
       .then((data: { workspace?: string } | null) => {
         if (cancelled || typeof data?.workspace !== 'string' || !data.workspace) return;
@@ -327,7 +332,7 @@ export function TopBar() {
       <GateBadge />
       <ContextBudget />
       <ExternalWriterIndicator />
-      <StartSessionButton />
+      {!isHostedWorkbench() && <StartSessionButton />}
 
       <div class="top-bar-sep" />
 

package/src/client/icons.tsx

@@ -112,14 +112,6 @@ export function IconUndo(p: IconProps): JSX.Element {
   );
 }
 
-export function IconSparkle(p: IconProps): JSX.Element {
-  return (
-    <Icon {...p}>
-      <path d="m8 1 2 5 5 2-5 2-2 5-2-5-5-2 5-2Z" />
-    </Icon>
-  );
-}
-
 /** Upload into a tray — attach a document. */
 export function IconUpload(p: IconProps): JSX.Element {
   return (
@@ -326,13 +318,11 @@ export function IconSteer(p: IconProps): JSX.Element {
   );
 }
 
-/** Framed pin — context pinning. */
+/** Push pin — context pinning (docs/design/Chrome.dc.html). */
 export function IconPin(p: IconProps): JSX.Element {
   return (
     <Icon {...p}>
-      <rect x="2" y="5" width="12" height="9" rx="1.5" />
-      <line x1="11" y1="1.5" x2="11" y2="5" />
-      <circle cx="11" cy="4.5" r="1.6" fill="currentColor" stroke="none" />
+      <path d="M6 2.67h4l-.53 3.66 1.86 2H4.67l1.86-2zM8 8.33v5" />
     </Icon>
   );
 }

package/src/client/mcp-app/index.tsx

@@ -0,0 +1,137 @@
+import '../uuid-polyfill';
+import { App as McpApp } from '@modelcontextprotocol/ext-apps';
+import { render } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { z } from 'zod';
+import { App as Workbench } from '../App';
+import { activeBoardId, boardList, boardsLoaded } from '../state/boards-store';
+import { axSurfaceState, contextPinnedNodeIds, nodes, selectedNodeIds } from '../state/canvas-store';
+import { installWorkbenchDownload, installWorkbenchTransport } from '../state/workbench-transport';
+import { resolveIframeMode } from '../state/iframe-mode';
+import { summarizeNodeForAgentContext } from '../../shared/agent-context';
+import { canvasAppContext } from '../../shared/canvas-app';
+
+const bridge = new McpApp(
+  { name: 'PMX Canvas', version: '1.0.0' },
+  { availableDisplayModes: ['inline', 'fullscreen'] },
+);
+const responseSchema = z.object({
+  status: z.number(),
+  body: z.string(),
+  contentType: z.string(),
+  encoding: z.enum(['text', 'base64']),
+});
+
+// Preserve the workbench's fetch/Response contracts, without passing its human
+// headers or exposing the daemon URL to the embedded browser.
+installWorkbenchTransport(async (input, init) => {
+  const path = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+  const method = (init?.method ?? (input instanceof Request ? input.method : 'GET')).toUpperCase();
+  if (init?.body !== undefined && typeof init.body !== 'string')
+    return Response.json({ ok: false, error: 'Document uploads require the local PMX workbench.' }, { status: 403 });
+  init?.signal?.throwIfAborted();
+  const result = await bridge.callServerTool({
+    name: 'pmx_workbench_request',
+    arguments: {
+      path,
+      method,
+      ...(init?.body === undefined ? {} : { body: init.body }),
+      expectedBoardId: activeBoardId.value,
+    },
+  });
+  init?.signal?.throwIfAborted();
+  const response = responseSchema.parse(result._meta?.response);
+  const body =
+    response.encoding === 'base64' ? Uint8Array.from(atob(response.body), (char) => char.charCodeAt(0)) : response.body;
+  return new Response(method === 'HEAD' || response.status === 204 ? null : body, {
+    status: response.status,
+    headers: { 'Content-Type': response.contentType },
+  });
+});
+
+const focusSchema = z.object({ focus: z.array(z.string()) });
+
+function selectionContext() {
+  const focus = focusSchema.safeParse(axSurfaceState.value);
+  return canvasAppContext(
+    {
+      boardId: activeBoardId.value,
+      boardName: boardList.value.find((board) => board.id === activeBoardId.value)?.name ?? 'Home',
+      pinnedNodeIds: [...contextPinnedNodeIds.value],
+      nodes: [...nodes.value.values()].map((node) => ({
+        id: node.id,
+        type: node.type,
+        title: typeof node.data.title === 'string' ? node.data.title : node.type,
+        contentRevision: node.contentRevision ?? 0,
+        text: summarizeNodeForAgentContext(node),
+      })),
+    },
+    [...selectedNodeIds.value],
+    focus.success ? focus.data.focus : [],
+  );
+}
+
+function HostedWorkbench() {
+  const [acknowledged, setAcknowledged] = useState('');
+  const [retry, setRetry] = useState(0);
+  const queue = useRef(Promise.resolve());
+  const context = selectionContext();
+  const key = JSON.stringify(context);
+  const desired = useRef(key);
+  desired.current = key;
+  const caps = bridge.getHostCapabilities();
+  const ready = boardsLoaded.value;
+  useEffect(() => {
+    if (!ready || !caps?.updateModelContext || acknowledged === key) return;
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    queue.current = queue.current
+      .then(async () => {
+        if (cancelled || desired.current !== key) return;
+        setAcknowledged('');
+        await bridge.updateModelContext({ structuredContent: context });
+        if (cancelled || desired.current !== key) return;
+        setAcknowledged(key);
+      })
+      .catch(() => {
+        // Context is background synchronization, not extra workbench chrome.
+        // Retry unchanged context too, and only consider a host ACK successful.
+        if (!cancelled && desired.current === key) timer = setTimeout(() => setRetry((value) => value + 1), 2000);
+      });
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [key, ready, retry]);
+  return (
+    <div class="pmx-host-app">
+      <Workbench />
+    </div>
+  );
+}
+
+// Polling is the sole state owner. Launcher tool results never rehydrate the
+// workbench, so delayed initial notifications cannot roll back its live state.
+bridge.ontoolresult = () => {};
+void bridge
+  .connect()
+  .then(async () => {
+    if (!bridge.getHostCapabilities()?.serverTools) throw new Error('This host does not support app tool calls.');
+    if (bridge.getHostCapabilities()?.downloadFile) {
+      installWorkbenchDownload((file) =>
+        bridge.downloadFile({
+          contents: [
+            {
+              type: 'resource',
+              resource: { uri: `file:///${encodeURIComponent(file.name)}`, mimeType: file.mimeType, text: file.text },
+            },
+          ],
+        }),
+      );
+    }
+    await resolveIframeMode();
+    render(<HostedWorkbench />, document.getElementById('app')!);
+  })
+  .catch((error: unknown) => {
+    document.getElementById('app')!.textContent = `Could not connect PMX: ${String(error)}`;
+  });

package/src/client/mcp-app/style.css

@@ -0,0 +1,10 @@
+.pmx-host-app { height: 100%; display: flex; flex-direction: column; }
+.pmx-host-app > .app-shell { flex: 1; min-height: 0; height: auto; }
+/* Keep context controls clear of the host's floating chat composer. */
+.pmx-host-app .context-pin-bar {
+  bottom: 16px;
+  left: 16px;
+  transform: none;
+}
+/* Guard refusals must remain readable while the full source editor is open. */
+.pmx-host-app .attention-toast.attention-tone-remove { z-index: 100100; }

package/src/client/nodes/AttachmentNode.tsx

@@ -4,10 +4,12 @@ import type { CanvasNodeState } from '../types';
 import { activeBoardId } from '../state/boards-store';
 import { requestJson } from '../state/intent-bridge';
 import { expandNode, collapseExpandedNode } from '../state/canvas-store';
+import { useWorkbenchAsset } from './use-workbench-asset';
 
 /** Originals stay useful even when the connected host cannot extract them. */
 export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const attachmentId = String(node.data.attachmentId);
+  const downloadUrl = useWorkbenchAsset(`/api/canvas/attachments/${encodeURIComponent(attachmentId)}/bytes`);
   const boardId = activeBoardId.value;
   const [job, setJob] = useState<DocumentImport | null>(null);
   const [review, setReview] = useState(expanded);
@@ -68,7 +70,12 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
               ? 'Markdown added'
               : 'Original attached'}
       </div>
-      <a href={`/api/canvas/attachments/${attachmentId}/bytes`} target="_blank" rel="noopener noreferrer">
+      <a
+        href={downloadUrl}
+        download={String(node.data.title ?? 'attachment')}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         Download original · {Math.ceil(Number(node.data.size ?? 0) / 1024)} KB
       </a>
       {job?.reason && <p>{job.reason}</p>}

package/src/client/nodes/AxStepControls.tsx

@@ -65,7 +65,7 @@ const labelStyle = {
 
 const activeButtonStyle = {
   ...axNodeActionButtonStyle,
-  background: 'var(--c-accent-25)',
+  background: 'color-mix(in srgb, var(--c-accent) 25%, transparent)',
   color: 'var(--c-text)',
 } as const;
 

package/src/client/nodes/ContextNode.tsx

@@ -298,8 +298,8 @@ export function ContextNode({
                       style={{
                         padding: '4px 8px',
                         fontSize: '10px',
-                        background: 'var(--c-accent-12)',
-                        border: '1px solid var(--c-accent-25)',
+                        background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                        border: '1px solid color-mix(in srgb, var(--c-accent) 25%, transparent)',
                         borderRadius: '4px',
                         color: 'var(--c-text-soft)',
                         cursor: 'pointer',
@@ -363,7 +363,7 @@ export function ContextNode({
                     style={{
                       fontSize: '9px',
                       padding: '1px 4px',
-                      background: 'var(--c-accent-10)',
+                      background: 'color-mix(in srgb, var(--c-accent) 10%, transparent)',
                       color: 'var(--c-accent)',
                       borderRadius: '3px',
                       display: 'inline-block',
@@ -402,8 +402,8 @@ export function ContextNode({
                       style={{
                         fontSize: '9px',
                         padding: '1px 4px',
-                        background: 'var(--c-warn-12)',
-                        color: 'var(--c-warn-alt)',
+                        background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                        color: 'var(--c-accent)',
                         borderRadius: '3px',
                         display: 'inline-block',
                       }}
@@ -420,8 +420,8 @@ export function ContextNode({
                       style={{
                         padding: '4px 8px',
                         fontSize: '10px',
-                        background: 'var(--c-accent-12)',
-                        border: '1px solid var(--c-accent-25)',
+                        background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                        border: '1px solid color-mix(in srgb, var(--c-accent) 25%, transparent)',
                         borderRadius: '4px',
                         color: 'var(--c-text-soft)',
                         cursor: 'pointer',
@@ -518,8 +518,8 @@ export function ContextNode({
                 style={{
                   padding: '4px 8px',
                   fontSize: '10px',
-                  background: 'var(--c-accent-12)',
-                  border: '1px solid var(--c-accent-25)',
+                  background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--c-accent) 25%, transparent)',
                   borderRadius: '4px',
                   color: 'var(--c-text-soft)',
                   cursor: 'pointer',