pmx-canvas 0.1.0

package/src/client/nodes/image-warnings.ts

@@ -0,0 +1,95 @@
+import type { CanvasNodeState } from '../types';
+
+export interface ImageNodeWarning {
+  title: string;
+  detail: string;
+}
+
+interface ImageWarningDescriptor {
+  title?: unknown;
+  detail?: unknown;
+}
+
+function readTrimmedString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
+}
+
+function descriptorFromUnknown(value: unknown): ImageNodeWarning | null {
+  if (typeof value === 'string') {
+    const trimmed = readTrimmedString(value);
+    return trimmed ? { title: 'Evidence warning', detail: trimmed } : null;
+  }
+
+  if (!value || typeof value !== 'object') return null;
+  const descriptor = value as ImageWarningDescriptor;
+  const title = readTrimmedString(descriptor.title) ?? 'Evidence warning';
+  const detail = readTrimmedString(descriptor.detail);
+  return detail ? { title, detail } : null;
+}
+
+function metadataWarnings(node: CanvasNodeState): ImageNodeWarning[] {
+  const warnings: ImageNodeWarning[] = [];
+  const singleWarning = descriptorFromUnknown(node.data.warning);
+  if (singleWarning) warnings.push(singleWarning);
+
+  const rawWarnings = node.data.warnings;
+  if (Array.isArray(rawWarnings)) {
+    for (const candidate of rawWarnings) {
+      const warning = descriptorFromUnknown(candidate);
+      if (warning) warnings.push(warning);
+    }
+  }
+
+  const validationStatus = readTrimmedString(node.data.validationStatus)?.toLowerCase();
+  if (validationStatus === 'failed' || validationStatus === 'invalid') {
+    warnings.push({
+      title: 'Image failed validation',
+      detail: readTrimmedString(node.data.validationMessage) ?? 'Review this image before using it as evidence.',
+    });
+  }
+
+  return warnings;
+}
+
+function looksLikeLoginCapture(node: CanvasNodeState): boolean {
+  const haystack = [
+    node.data.title,
+    node.data.caption,
+    node.data.alt,
+    node.data.src,
+    node.data.path,
+  ]
+    .map((value) => readTrimmedString(value)?.toLowerCase() ?? '')
+    .join(' ');
+
+  if (haystack.length === 0) return false;
+
+  return [
+    'login',
+    'log in',
+    'sign in',
+    'signin',
+    'password',
+    '2fa',
+    'mfa',
+    'authenticate',
+    'authentication',
+    'sso',
+  ].some((token) => haystack.includes(token));
+}
+
+export function getImageNodeWarnings(node: CanvasNodeState): ImageNodeWarning[] {
+  const warnings = metadataWarnings(node);
+  if (warnings.length > 0) return warnings;
+
+  if (looksLikeLoginCapture(node)) {
+    return [
+      {
+        title: 'Captured login page',
+        detail: 'This image looks like an auth screen. Treat it as environment context, not product evidence.',
+      },
+    ];
+  }
+
+  return [];
+}

package/src/client/nodes/inline-editor-commands.ts

@@ -0,0 +1,37 @@
+/** Shared contentEditable command helpers used by both the inline editor
+ *  and its floating toolbar. Kept in a module that neither component
+ *  depends on transitively so we don't get a circular import. */
+
+/** Prompt for a URL and insert it as a link on the current selection.
+ *  Rejects `javascript:` and `data:` schemes so a link can't execute script
+ *  when clicked. */
+export function promptAndInsertLink(): void {
+  const url = window.prompt('Link URL:');
+  if (!url) return;
+  const trimmed = url.trim().toLowerCase();
+  if (trimmed.startsWith('javascript:') || trimmed.startsWith('data:')) return;
+  document.execCommand('createLink', false, url);
+}
+
+/** Wrap the current non-empty selection in an inline `<code>` element and
+ *  place the caret immediately after the new element. No-op on collapsed
+ *  selections. */
+export function wrapSelectionInCode(): void {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) return;
+  const text = range.toString();
+  const code = document.createElement('code');
+  code.textContent = text;
+  range.deleteContents();
+  range.insertNode(code);
+  // Build a fresh range after the inserted node — `deleteContents` mutates
+  // the original range's boundaries in a way that behaves inconsistently
+  // across browsers on selections spanning block boundaries.
+  const after = document.createRange();
+  after.setStartAfter(code);
+  after.setEndAfter(code);
+  sel.removeAllRanges();
+  sel.addRange(after);
+}

package/src/client/nodes/md-format.ts

@@ -0,0 +1,206 @@
+/**
+ * Markdown formatting helpers for textarea elements.
+ * Handles: wrap-style formatting (bold, italic, code, strikethrough),
+ * prefix-style formatting (headings, lists, quotes),
+ * Tab/Shift+Tab indentation, and floating toolbar positioning.
+ */
+
+export interface FormatAction {
+  key: string;
+  label: string;
+  icon: string;
+  shortcut?: string;
+  action: (ta: HTMLTextAreaElement) => void;
+}
+
+/** Wrap selected text with a marker (e.g. ** for bold). If no selection, insert marker pair and place cursor between. */
+function wrapSelection(ta: HTMLTextAreaElement, marker: string): void {
+  const { selectionStart: s, selectionEnd: e, value } = ta;
+  const selected = value.slice(s, e);
+
+  // Check if already wrapped — unwrap
+  const before = value.slice(Math.max(0, s - marker.length), s);
+  const after = value.slice(e, e + marker.length);
+  if (before === marker && after === marker) {
+    const newValue = value.slice(0, s - marker.length) + selected + value.slice(e + marker.length);
+    setValueAndCursor(ta, newValue, s - marker.length, e - marker.length);
+    return;
+  }
+
+  if (selected) {
+    const newValue = value.slice(0, s) + marker + selected + marker + value.slice(e);
+    setValueAndCursor(ta, newValue, s + marker.length, e + marker.length);
+  } else {
+    const newValue = value.slice(0, s) + marker + marker + value.slice(e);
+    setValueAndCursor(ta, newValue, s + marker.length, s + marker.length);
+  }
+}
+
+/** Prefix the current line(s) with a string (e.g. "# " for heading). */
+function prefixLines(ta: HTMLTextAreaElement, prefix: string): void {
+  const { selectionStart: s, selectionEnd: e, value } = ta;
+  const lineStart = value.lastIndexOf('\n', s - 1) + 1;
+  const lineEnd = value.indexOf('\n', e);
+  const end = lineEnd === -1 ? value.length : lineEnd;
+  const lineText = value.slice(lineStart, end);
+
+  // Toggle: if already prefixed, remove
+  if (lineText.startsWith(prefix)) {
+    const newValue = value.slice(0, lineStart) + lineText.slice(prefix.length) + value.slice(end);
+    setValueAndCursor(ta, newValue, Math.max(lineStart, s - prefix.length), Math.max(lineStart, e - prefix.length));
+    return;
+  }
+
+  const newValue = value.slice(0, lineStart) + prefix + value.slice(lineStart);
+  setValueAndCursor(ta, newValue, s + prefix.length, e + prefix.length);
+}
+
+/** Insert a link template, using selected text as the label. */
+function insertLink(ta: HTMLTextAreaElement): void {
+  const { selectionStart: s, selectionEnd: e, value } = ta;
+  const selected = value.slice(s, e);
+  if (selected) {
+    const newValue = value.slice(0, s) + `[${selected}](url)` + value.slice(e);
+    // Select "url" for easy replacement
+    const urlStart = s + selected.length + 3;
+    setValueAndCursor(ta, newValue, urlStart, urlStart + 3);
+  } else {
+    const newValue = value.slice(0, s) + '[text](url)' + value.slice(e);
+    // Select "text" for easy replacement
+    setValueAndCursor(ta, newValue, s + 1, s + 5);
+  }
+}
+
+/** Insert a code block. */
+function insertCodeBlock(ta: HTMLTextAreaElement): void {
+  const { selectionStart: s, selectionEnd: e, value } = ta;
+  const selected = value.slice(s, e);
+  const fence = '```';
+  if (selected) {
+    const newValue = value.slice(0, s) + `${fence}\n${selected}\n${fence}` + value.slice(e);
+    setValueAndCursor(ta, newValue, s + fence.length + 1, s + fence.length + 1 + selected.length);
+  } else {
+    const newValue = value.slice(0, s) + `${fence}\n\n${fence}` + value.slice(e);
+    setValueAndCursor(ta, newValue, s + fence.length + 1, s + fence.length + 1);
+  }
+}
+
+/** Handle Tab/Shift+Tab for indentation on current line(s). */
+export function handleTab(ta: HTMLTextAreaElement, shiftKey: boolean): void {
+  const { selectionStart: s, selectionEnd: e, value } = ta;
+  const lineStart = value.lastIndexOf('\n', s - 1) + 1;
+  const lineEnd = value.indexOf('\n', e);
+  const end = lineEnd === -1 ? value.length : lineEnd;
+
+  // Multi-line selection: indent/dedent all lines
+  const lines = value.slice(lineStart, end).split('\n');
+  let newS = s;
+  let newE = e;
+
+  const processed = lines.map((line, i) => {
+    if (shiftKey) {
+      // Dedent: remove up to 2 leading spaces or 1 tab
+      if (line.startsWith('  ')) {
+        if (i === 0) newS = Math.max(lineStart, newS - 2);
+        newE -= 2;
+        return line.slice(2);
+      } else if (line.startsWith('\t')) {
+        if (i === 0) newS = Math.max(lineStart, newS - 1);
+        newE -= 1;
+        return line.slice(1);
+      }
+      return line;
+    } else {
+      // Indent: add 2 spaces
+      if (i === 0) newS += 2;
+      newE += 2;
+      return '  ' + line;
+    }
+  });
+
+  const newValue = value.slice(0, lineStart) + processed.join('\n') + value.slice(end);
+  setValueAndCursor(ta, newValue, newS, newE);
+}
+
+function setValueAndCursor(ta: HTMLTextAreaElement, value: string, selStart: number, selEnd: number): void {
+  // Use native setter to trigger Preact's onInput
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set;
+  if (nativeInputValueSetter) {
+    nativeInputValueSetter.call(ta, value);
+  } else {
+    ta.value = value;
+  }
+  ta.selectionStart = selStart;
+  ta.selectionEnd = selEnd;
+  ta.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+/** Format actions available in the toolbar. */
+export const FORMAT_ACTIONS: FormatAction[] = [
+  { key: 'bold', label: 'Bold', icon: 'B', shortcut: 'b', action: (ta) => wrapSelection(ta, '**') },
+  { key: 'italic', label: 'Italic', icon: 'I', shortcut: 'i', action: (ta) => wrapSelection(ta, '_') },
+  { key: 'strike', label: 'Strikethrough', icon: 'S', shortcut: 'u', action: (ta) => wrapSelection(ta, '~~') },
+  { key: 'code', label: 'Inline code', icon: '`', shortcut: 'e', action: (ta) => wrapSelection(ta, '`') },
+  { key: 'link', label: 'Link', icon: '🔗', shortcut: 'k', action: insertLink },
+  { key: 'h1', label: 'Heading 1', icon: 'H1', action: (ta) => prefixLines(ta, '# ') },
+  { key: 'h2', label: 'Heading 2', icon: 'H2', action: (ta) => prefixLines(ta, '## ') },
+  { key: 'quote', label: 'Blockquote', icon: '❝', action: (ta) => prefixLines(ta, '> ') },
+  { key: 'ul', label: 'Bullet list', icon: '•', action: (ta) => prefixLines(ta, '- ') },
+  { key: 'ol', label: 'Numbered list', icon: '1.', action: (ta) => prefixLines(ta, '1. ') },
+  { key: 'codeblock', label: 'Code block', icon: '{ }', action: insertCodeBlock },
+];
+
+/** Handle Cmd/Ctrl+key formatting shortcuts in a textarea. Returns true if handled. */
+export function handleFormatShortcut(e: KeyboardEvent, ta: HTMLTextAreaElement): boolean {
+  if (!(e.metaKey || e.ctrlKey)) return false;
+  const action = FORMAT_ACTIONS.find((a) => a.shortcut === e.key);
+  if (!action) return false;
+  e.preventDefault();
+  action.action(ta);
+  return true;
+}
+
+/** Get the screen rect of the current text selection for positioning a floating toolbar. */
+export function getSelectionRect(ta: HTMLTextAreaElement): { top: number; left: number; width: number } | null {
+  if (ta.selectionStart === ta.selectionEnd) return null;
+
+  // Create a mirror div to measure cursor position
+  const mirror = document.createElement('div');
+  const style = getComputedStyle(ta);
+  const props = [
+    'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'letterSpacing',
+    'wordSpacing', 'textIndent', 'whiteSpace', 'wordWrap', 'overflowWrap',
+    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+    'boxSizing', 'width',
+  ] as const;
+  for (const p of props) {
+    mirror.style[p] = style[p];
+  }
+  mirror.style.position = 'absolute';
+  mirror.style.visibility = 'hidden';
+  mirror.style.overflow = 'hidden';
+  mirror.style.height = 'auto';
+  mirror.style.top = '0';
+  mirror.style.left = '0';
+
+  const text = ta.value;
+  const beforeText = document.createTextNode(text.slice(0, ta.selectionStart));
+  const span = document.createElement('span');
+  span.textContent = text.slice(ta.selectionStart, ta.selectionEnd) || '.';
+  mirror.appendChild(beforeText);
+  mirror.appendChild(span);
+  mirror.appendChild(document.createTextNode(text.slice(ta.selectionEnd)));
+
+  document.body.appendChild(mirror);
+  const spanRect = span.getBoundingClientRect();
+  const mirrorRect = mirror.getBoundingClientRect();
+  const taRect = ta.getBoundingClientRect();
+  document.body.removeChild(mirror);
+
+  return {
+    top: taRect.top + (spanRect.top - mirrorRect.top) - ta.scrollTop,
+    left: taRect.left + (spanRect.left - mirrorRect.left) - ta.scrollLeft,
+    width: spanRect.width,
+  };
+}

package/src/client/state/attention-bridge.ts

@@ -0,0 +1,328 @@
+import {
+  SemanticWatchReducer,
+  type ContextPinWatchEvent,
+  type ConnectWatchEvent,
+  type GroupWatchEvent,
+  type MoveEndWatchEvent,
+  type RemoveWatchEvent,
+  type SemanticWatchEvent,
+  type SseMessage,
+} from '../../shared/semantic-attention.js';
+import {
+  pushAttentionHistory,
+  resetAttentionState,
+  setAttentionFocus,
+  setAttentionPulse,
+  setAttentionToast,
+  type AttentionEntry,
+  type AttentionTone,
+} from './attention-store';
+
+let reducer = new SemanticWatchReducer();
+let toastQueue: AttentionEntry[] = [];
+let toastTimer: number | null = null;
+let pulseTimer: number | null = null;
+let lastSignature = '';
+let lastSignatureAt = 0;
+
+function scheduleTimer(callback: () => void, delayMs: number): number {
+  return globalThis.setTimeout(callback, delayMs) as unknown as number;
+}
+
+function cancelTimer(timerId: number | null): void {
+  if (timerId === null) return;
+  globalThis.clearTimeout(timerId);
+}
+
+function runOnNextFrame(callback: () => void): void {
+  if (typeof globalThis.requestAnimationFrame === 'function') {
+    globalThis.requestAnimationFrame(() => callback());
+    return;
+  }
+  callback();
+}
+
+function quoteLabel(value: string | null | undefined, fallback: string): string {
+  return value && value.trim().length > 0 ? value.trim() : fallback;
+}
+
+function summarizeNames(values: string[], limit = 3): string {
+  if (values.length === 0) return '';
+  if (values.length <= limit) return values.join(', ');
+  return `${values.slice(0, limit).join(', ')} +${values.length - limit}`;
+}
+
+function uniqueNodeIds(nodeIds: Iterable<string>): string[] {
+  return Array.from(new Set(Array.from(nodeIds).filter((nodeId) => nodeId.length > 0)));
+}
+
+function makeEntry(
+  tone: AttentionTone,
+  title: string,
+  detail: string,
+  nodeIds: string[],
+  createdAt = Date.now(),
+): AttentionEntry {
+  return {
+    id: `${tone}-${createdAt}-${Math.random().toString(36).slice(2, 8)}`,
+    tone,
+    title,
+    detail,
+    nodeIds: uniqueNodeIds(nodeIds),
+    createdAt,
+  };
+}
+
+function formatReason(reason: string): string {
+  if (reason === 'joined cluster') return 'joined a nearby cluster';
+  if (reason === 'left cluster') return 'moved away from its cluster';
+  if (reason === 'cluster changed') return 'shifted into a different cluster';
+  if (reason === 'pinned neighborhood changed') return 'changed the local focus field';
+  const enteredMatch = /^entered pinned neighborhood of "(.+)"$/.exec(reason);
+  if (enteredMatch) return `moved into focus around ${enteredMatch[1]}`;
+  const leftMatch = /^left pinned neighborhood of "(.+)"$/.exec(reason);
+  if (leftMatch) return `moved out of focus around ${leftMatch[1]}`;
+  return reason;
+}
+
+function entryFromContextPin(event: ContextPinWatchEvent): AttentionEntry | null {
+  const addedNames = event.added.map((node) => quoteLabel(node.title, node.id));
+  const removedNames = event.removed.map((node) => quoteLabel(node.title, node.id));
+  if (addedNames.length === 0 && removedNames.length === 0) return null;
+
+  let detail = '';
+  if (addedNames.length > 0 && removedNames.length === 0) {
+    detail = `Now in focus: ${summarizeNames(addedNames)}`;
+  } else if (removedNames.length > 0 && addedNames.length === 0) {
+    detail = `Removed from focus: ${summarizeNames(removedNames)}`;
+  } else {
+    const parts: string[] = [];
+    if (addedNames.length > 0) parts.push(`${summarizeNames(addedNames)} added`);
+    if (removedNames.length > 0) parts.push(`${summarizeNames(removedNames)} removed`);
+    detail = parts.join(' · ');
+  }
+
+  return makeEntry(
+    'context',
+    'Context updated',
+    detail,
+    [
+      ...event.added.map((node) => node.id),
+      ...event.removed.map((node) => node.id),
+    ],
+    event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
+  );
+}
+
+function entryFromConnect(event: ConnectWatchEvent): AttentionEntry | null {
+  if (event.edges.length === 0) return null;
+  if (event.edges.length === 1) {
+    const edge = event.edges[0];
+    return makeEntry(
+      'relationship',
+      'Relationship added',
+      `${quoteLabel(edge.fromTitle, edge.fromId)} linked to ${quoteLabel(edge.toTitle, edge.toId)}`,
+      [edge.fromId, edge.toId],
+      event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
+    );
+  }
+
+  return makeEntry(
+    'relationship',
+    'Relationships added',
+    `${event.edges.length} connections changed the board structure`,
+    event.edges.flatMap((edge) => [edge.fromId, edge.toId]),
+    event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
+  );
+}
+
+function entryFromRemove(event: RemoveWatchEvent): AttentionEntry | null {
+  if (event.nodes.length === 0 && event.edges.length === 0) return null;
+  const nodeNames = event.nodes.map((node) => quoteLabel(node.title, node.id));
+  const parts: string[] = [];
+  if (nodeNames.length > 0) parts.push(summarizeNames(nodeNames));
+  if (event.edges.length > 0) {
+    parts.push(`${event.edges.length} relationship${event.edges.length === 1 ? '' : 's'}`);
+  }
+  return makeEntry(
+    'remove',
+    'Items removed',
+    parts.join(' · '),
+    [
+      ...event.nodes.map((node) => node.id),
+      ...event.edges.flatMap((edge) => [edge.fromId, edge.toId]),
+    ],
+    event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
+  );
+}
+
+function entryFromGroup(event: GroupWatchEvent): AttentionEntry | null {
+  if (event.created.length > 0) {
+    const titles = event.created.map((group) => quoteLabel(group.title, group.id));
+    return makeEntry(
+      'group',
+      event.created.length === 1 ? 'Group created' : 'Groups created',
+      event.created.length === 1
+        ? `${titles[0]} now frames ${event.created[0].childCount} items`
+        : summarizeNames(titles),
+      event.created.map((group) => group.id),
+      event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
+    );
+  }
+  if (event.updated.length > 0) {
+    const titles = event.updated.map((group) => quoteLabel(group.title, group.id));
+    return makeEntry(
+      'group',
+      event.updated.length === 1 ? 'Group updated' : 'Groups updated',
+      event.updated.length === 1
+        ? `${titles[0]} now holds ${event.updated[0].childCount} items`
+        : summarizeNames(titles),
+      event.updated.map((group) => group.id),
+      event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
+    );
+  }
+  return null;
+}
+
+function entryFromMoveEnd(event: MoveEndWatchEvent): AttentionEntry | null {
+  if (event.nodes.length === 0) return null;
+  const reasons = event.nodes.flatMap((node) => node.reasons);
+  const names = event.nodes.map((node) => quoteLabel(node.title, node.id));
+  const createdAt = event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now();
+
+  if (reasons.some((reason) => reason.includes('pinned neighborhood'))) {
+    if (event.nodes.length === 1) {
+      return makeEntry(
+        'neighborhood',
+        'Neighborhood changed',
+        `${names[0]} ${formatReason(event.nodes[0].reasons[0])}`,
+        event.nodes.map((node) => node.id),
+        createdAt,
+      );
+    }
+    return makeEntry(
+      'neighborhood',
+      'Neighborhood changed',
+      summarizeNames(names),
+      event.nodes.map((node) => node.id),
+      createdAt,
+    );
+  }
+
+  const clusterReasons = reasons.filter((reason) => reason.includes('cluster'));
+  if (clusterReasons.length > 0) {
+    const formedOnly = clusterReasons.every((reason) => reason === 'joined cluster');
+    if (event.nodes.length === 1) {
+      return makeEntry(
+        'cluster',
+        formedOnly ? 'Cluster formed' : 'Cluster changed',
+        `${names[0]} ${formatReason(event.nodes[0].reasons[0])}`,
+        event.nodes.map((node) => node.id),
+        createdAt,
+      );
+    }
+    return makeEntry(
+      'cluster',
+      formedOnly ? 'Cluster formed' : 'Cluster changed',
+      summarizeNames(names),
+      event.nodes.map((node) => node.id),
+      createdAt,
+    );
+  }
+
+  return null;
+}
+
+function entryFromEvent(event: SemanticWatchEvent): AttentionEntry | null {
+  switch (event.type) {
+    case 'context-pin':
+      return entryFromContextPin(event);
+    case 'connect':
+      return entryFromConnect(event);
+    case 'remove':
+      return entryFromRemove(event);
+    case 'group':
+      return entryFromGroup(event);
+    case 'move-end':
+      return entryFromMoveEnd(event);
+  }
+}
+
+function applyAttentionSnapshot(): void {
+  const snapshot = reducer.getAttentionSnapshot();
+  setAttentionFocus(snapshot.primaryFocusNodeIds, snapshot.secondaryFocusNodeIds, snapshot.regions);
+}
+
+function flushToastQueue(): void {
+  if (toastTimer !== null) return;
+  const next = toastQueue.shift() ?? null;
+  if (!next) {
+    setAttentionToast(null);
+    return;
+  }
+
+  setAttentionToast(next);
+  const durationMs = Math.max(1800, Math.min(2800, 1600 + next.detail.length * 18));
+  toastTimer = scheduleTimer(() => {
+    toastTimer = null;
+    setAttentionToast(null);
+    flushToastQueue();
+  }, durationMs);
+}
+
+function enqueueToast(entry: AttentionEntry): void {
+  toastQueue.push(entry);
+  flushToastQueue();
+}
+
+function pulseNodes(nodeIds: string[]): void {
+  cancelTimer(pulseTimer);
+  pulseTimer = null;
+  setAttentionPulse([]);
+  if (nodeIds.length === 0) return;
+  runOnNextFrame(() => {
+    setAttentionPulse(nodeIds);
+    pulseTimer = scheduleTimer(() => {
+      pulseTimer = null;
+      setAttentionPulse([]);
+    }, 900);
+  });
+}
+
+function shouldSuppressEntry(entry: AttentionEntry): boolean {
+  const signature = `${entry.tone}:${entry.title}:${entry.detail}`;
+  const now = entry.createdAt;
+  if (signature === lastSignature && now - lastSignatureAt < 1200) {
+    return true;
+  }
+  lastSignature = signature;
+  lastSignatureAt = now;
+  return false;
+}
+
+export function resetAttentionBridge(): void {
+  cancelTimer(toastTimer);
+  cancelTimer(pulseTimer);
+  toastTimer = null;
+  pulseTimer = null;
+  toastQueue = [];
+  lastSignature = '';
+  lastSignatureAt = 0;
+  reducer = new SemanticWatchReducer();
+  resetAttentionState();
+}
+
+export function syncAttentionFromSse(message: SseMessage): void {
+  const entries = reducer.handleMessage(message)
+    .map((event) => entryFromEvent(event))
+    .filter((entry): entry is AttentionEntry => entry !== null);
+
+  applyAttentionSnapshot();
+
+  for (const entry of entries) {
+    if (shouldSuppressEntry(entry)) continue;
+    pushAttentionHistory(entry);
+    enqueueToast(entry);
+    pulseNodes(entry.nodeIds);
+  }
+}