@vanira/sdk-react-native 0.0.2

package/src/presets/chalkboard/boardQueue.ts

@@ -0,0 +1,620 @@
+/**
+ * Whiteboard command queue — port of vanira-sdk WidgetPresetRenderer board queue.
+ * Serializes vanira_type_text / vanira_erase_text; handles interrupt + session reset.
+ */
+
+import {isBoardQueuedPreset as isBoardQueuedPresetId} from '../registry';
+import type {PresetClient, PresetContext, PresetId} from '../types';
+import {
+  buildShapesFromArgs,
+  shapesToBoardAnnotation,
+} from './drawUtils';
+import {
+  getChalkboardContent,
+  hideChalkboard,
+  setChalkboardContent,
+  setChalkboardTyping,
+  showChalkboard,
+} from './chalkboardSession';
+import {
+  eraseLastWords,
+  parseEraseTextArgs,
+  parseTypeTextArgs,
+} from './textUtils';
+
+export type ToolTerminalStatus = 'interrupted' | 'cancelled';
+
+type OnComplete = (result: Record<string, unknown>) => void;
+type OnCancel = (
+  reason?: string,
+  meta?: {status?: ToolTerminalStatus},
+) => void;
+
+type BoardQueuedPresetId = 'vanira_type_text' | 'vanira_erase_text' | 'vanira_draw';
+
+type BoardQueueItem = {
+  ctx: PresetContext;
+  presetId: BoardQueuedPresetId;
+  onComplete: OnComplete;
+  onCancel: OnCancel;
+  aborted?: boolean;
+  settled?: boolean;
+};
+
+type BoardWriteProgress = {
+  ctx: PresetContext;
+  mode: 'type' | 'erase' | 'draw';
+  textAtStart: string;
+  plannedUnits: number;
+  unitsDone: number;
+};
+
+let boardQueue: BoardQueueItem[] = [];
+let boardQueueActive: BoardQueueItem | null = null;
+let boardAnimTimer: ReturnType<typeof setTimeout> | null = null;
+let activePresetGeneration = 0;
+let settledBoardToolCallIds = new Set<string>();
+let boardClient: PresetClient | null = null;
+let activeBoardProgress: BoardWriteProgress | null = null;
+
+function clearBoardAnimTimer(): void {
+  if (boardAnimTimer) {
+    clearTimeout(boardAnimTimer);
+    boardAnimTimer = null;
+  }
+}
+
+function scheduleBoardAnim(fn: () => void, delayMs: number): void {
+  clearBoardAnimTimer();
+  boardAnimTimer = setTimeout(() => {
+    boardAnimTimer = null;
+    fn();
+  }, delayMs);
+}
+
+function syncBoardProgressUnits(unitsDone: number): void {
+  if (activeBoardProgress) {
+    activeBoardProgress.unitsDone = unitsDone;
+  }
+}
+
+function clearActiveBoardProgress(): void {
+  activeBoardProgress = null;
+}
+
+function flushBoardContext(payload: Record<string, unknown>): void {
+  if (!boardClient?.sendContextUpdate) {
+    return;
+  }
+  try {
+    boardClient.sendContextUpdate(payload);
+    console.log('[BoardQueue] client_context_update (interrupt):', payload.message);
+  } catch {
+    /* silent */
+  }
+}
+
+function buildBoardContextPayload(
+  ctx: PresetContext,
+  textWritten: string,
+  interruptReason?: string,
+): Record<string, unknown> {
+  const progress = activeBoardProgress;
+  const matchesProgress = progress?.ctx.toolCallId === ctx.toolCallId;
+
+  let writeProgressPct: number | undefined;
+  let unitsDone: number | undefined;
+  let unitsPlanned: number | undefined;
+  let partialThisCommand: string | undefined;
+
+  if (matchesProgress && progress) {
+    unitsDone = progress.unitsDone;
+    unitsPlanned = progress.plannedUnits;
+    writeProgressPct =
+      progress.plannedUnits > 0
+        ? Math.min(
+            100,
+            Math.round((progress.unitsDone / progress.plannedUnits) * 100),
+          )
+        : 100;
+
+    partialThisCommand =
+      progress.mode === 'type'
+        ? textWritten.slice(progress.textAtStart.length)
+        : textWritten;
+  }
+
+  const payload: Record<string, unknown> = {
+    ui_state: 'whiteboard_active',
+    tool_status: 'interrupted',
+    visible_preset: ctx.presetId,
+    tool_call_id: ctx.toolCallId,
+    interrupted: true,
+    interrupt_reason: interruptReason || 'Server interrupted',
+    whiteboard_content: textWritten,
+  };
+
+  if (writeProgressPct !== undefined) {
+    payload.write_progress_pct = writeProgressPct;
+    payload.characters_written = unitsDone;
+    payload.characters_planned = unitsPlanned;
+    payload.partial_text_this_command = partialThisCommand ?? '';
+
+    const action = progress?.mode === 'erase' ? 'erase' : 'write';
+    const partialPreview =
+      (partialThisCommand ?? '').length > 120
+        ? `${(partialThisCommand ?? '').slice(0, 120)}…`
+        : (partialThisCommand ?? '');
+
+    const continueHint =
+      progress?.mode === 'erase'
+        ? 'The board already reflects this partial erase — continue from here; do not repeat earlier steps.'
+        : 'The board already contains this content — continue typing from here; do not repeat what is already on the board.';
+
+    payload.message =
+      `Whiteboard ${action} interrupted at ${writeProgressPct}% (${unitsDone}/${unitsPlanned} characters this command). ` +
+      `Partial text this turn: "${partialPreview}". ` +
+      continueHint;
+  }
+
+  return payload;
+}
+
+function sendBoardContextUpdate(
+  ctx: PresetContext,
+  textWritten: string,
+  interruptReason?: string,
+): void {
+  flushBoardContext(
+    buildBoardContextPayload(ctx, textWritten, interruptReason),
+  );
+}
+
+export function getBoardProgressSnapshot(): {
+  write_progress_pct?: number;
+  characters_written?: number;
+  characters_planned?: number;
+  partial_text_this_command?: string;
+} | null {
+  const p = activeBoardProgress;
+  if (!p || p.plannedUnits <= 0) {
+    return null;
+  }
+  const textWritten = getChalkboardContent();
+  const partialThisCommand =
+    p.mode === 'type'
+      ? textWritten.slice(p.textAtStart.length)
+      : textWritten;
+  return {
+    write_progress_pct: Math.min(
+      100,
+      Math.round((p.unitsDone / p.plannedUnits) * 100),
+    ),
+    characters_written: p.unitsDone,
+    characters_planned: p.plannedUnits,
+    partial_text_this_command: partialThisCommand,
+  };
+}
+
+export function getBoardTerminalResult(
+  status: ToolTerminalStatus,
+  reason?: string,
+  presetId?: string,
+): Record<string, unknown> {
+  const textWritten = getChalkboardContent();
+  const progress = getBoardProgressSnapshot();
+  return {
+    status,
+    reason: reason || (status === 'interrupted' ? 'Server interrupted' : 'User dismissed'),
+    ...(presetId ? {preset_id: presetId} : {}),
+    text_written: textWritten,
+    whiteboard_content: textWritten,
+    ...(progress || {}),
+  };
+}
+
+function closeBoardUi(clearContent = false): void {
+  if (clearContent) {
+    setChalkboardContent('');
+  }
+  hideChalkboard();
+}
+
+function settleBoardCancel(
+  item: BoardQueueItem,
+  reason: string,
+  status: ToolTerminalStatus = 'cancelled',
+): void {
+  if (item.settled) {
+    return;
+  }
+  item.aborted = true;
+  item.settled = true;
+  const id = item.ctx.toolCallId;
+  if (id) {
+    settledBoardToolCallIds.add(id);
+  }
+  const textWritten = getChalkboardContent();
+  if (status === 'interrupted') {
+    sendBoardContextUpdate(item.ctx, textWritten, reason);
+  }
+  item.onCancel(reason, {status});
+  clearActiveBoardProgress();
+}
+
+function settleBoardComplete(
+  item: BoardQueueItem,
+  result: Record<string, unknown>,
+): void {
+  if (item.settled || item.aborted) {
+    return;
+  }
+  item.settled = true;
+  const id = item.ctx.toolCallId;
+  if (id) {
+    settledBoardToolCallIds.add(id);
+  }
+  const textWritten = getChalkboardContent();
+  item.onComplete({
+    status: 'success',
+    preset_id: item.presetId,
+    tool_call_id: item.ctx.toolCallId,
+    text_written: textWritten,
+    whiteboard_content: textWritten,
+    ...result,
+  });
+  clearActiveBoardProgress();
+}
+
+function runTypeText(
+  item: BoardQueueItem,
+  onComplete: (result?: Record<string, unknown>) => void,
+  onCancel: (reason?: string) => void,
+): void {
+  const {ctx} = item;
+  const {text, delayMs} = parseTypeTextArgs(ctx);
+
+  console.log('[BoardQueue] type_text', {
+    toolCallId: ctx.toolCallId,
+    text,
+    delayMs,
+  });
+
+  showChalkboard();
+  setChalkboardTyping(true);
+
+  const initialText = getChalkboardContent();
+  const textToAppend = initialText && text ? `\n${text}` : text;
+
+  if (!textToAppend) {
+    setChalkboardTyping(false);
+    onComplete();
+    return;
+  }
+
+  const typingGeneration = activePresetGeneration;
+
+  activeBoardProgress = {
+    ctx,
+    mode: 'type',
+    textAtStart: initialText,
+    plannedUnits: textToAppend.length,
+    unitsDone: 0,
+  };
+
+  if (delayMs <= 0) {
+    setChalkboardContent(initialText + textToAppend);
+    syncBoardProgressUnits(textToAppend.length);
+    setChalkboardTyping(false);
+    onComplete();
+    return;
+  }
+
+  let currentText = initialText;
+  let index = 0;
+
+  const typeNextChar = () => {
+    if (typingGeneration !== activePresetGeneration) {
+      return;
+    }
+    if (index < textToAppend.length) {
+      currentText += textToAppend[index];
+      setChalkboardContent(currentText);
+      index += 1;
+      syncBoardProgressUnits(index);
+      scheduleBoardAnim(typeNextChar, delayMs);
+    } else {
+      syncBoardProgressUnits(textToAppend.length);
+      setChalkboardTyping(false);
+      onComplete();
+    }
+  };
+
+  typeNextChar();
+}
+
+function runDrawShapes(
+  item: BoardQueueItem,
+  onComplete: (result?: Record<string, unknown>) => void,
+): void {
+  const {ctx} = item;
+  const merged = {...ctx.args, ...ctx.clientFields};
+  const shapes = buildShapesFromArgs(merged);
+  const annotation = shapesToBoardAnnotation(shapes);
+
+  console.log('[BoardQueue] draw_shapes', {
+    toolCallId: ctx.toolCallId,
+    shapes: shapes.map(s => s.summary),
+  });
+
+  showChalkboard();
+  setChalkboardTyping(true);
+
+  const initialText = getChalkboardContent();
+  const textToAppend = annotation;
+
+  activeBoardProgress = {
+    ctx,
+    mode: 'draw',
+    textAtStart: initialText,
+    plannedUnits: textToAppend.length || 1,
+    unitsDone: 0,
+  };
+
+  if (!textToAppend) {
+    setChalkboardTyping(false);
+    onComplete({
+      shapes_drawn: 0,
+      status: 'error',
+      message: 'No drawable shape parameters',
+    });
+    return;
+  }
+
+  setChalkboardContent(initialText + textToAppend);
+  syncBoardProgressUnits(textToAppend.length);
+  setChalkboardTyping(false);
+  onComplete({
+    shapes_drawn: shapes.length,
+    shape_summaries: shapes.map(s => s.summary),
+  });
+}
+
+function runEraseText(
+  item: BoardQueueItem,
+  onComplete: (result?: Record<string, unknown>) => void,
+  onCancel: (reason?: string) => void,
+): void {
+  const {ctx} = item;
+  const {mode, numWords, delayMs} = parseEraseTextArgs(ctx);
+
+  console.log('[BoardQueue] erase_text', {
+    toolCallId: ctx.toolCallId,
+    mode,
+    numWords,
+    delayMs,
+  });
+
+  const hadChalkboard =
+    getChalkboardContent().length > 0;
+
+  if (!hadChalkboard) {
+    setChalkboardTyping(false);
+    onComplete({status: 'error', message: 'Target element not found'});
+    return;
+  }
+
+  showChalkboard();
+  setChalkboardTyping(true);
+
+  const currentVal = getChalkboardContent();
+  const targetVal =
+    mode === 'words' ? eraseLastWords(currentVal, numWords) : '';
+
+  const eraseGeneration = activePresetGeneration;
+  const deletionsPlanned = Math.max(0, currentVal.length - targetVal.length);
+
+  activeBoardProgress = {
+    ctx,
+    mode: 'erase',
+    textAtStart: currentVal,
+    plannedUnits: deletionsPlanned,
+    unitsDone: delayMs <= 0 ? deletionsPlanned : 0,
+  };
+
+  if (delayMs <= 0 || currentVal === targetVal) {
+    setChalkboardContent(targetVal);
+    setChalkboardTyping(false);
+    onComplete();
+    return;
+  }
+
+  let working = currentVal;
+
+  const deleteNextChar = () => {
+    if (eraseGeneration !== activePresetGeneration) {
+      return;
+    }
+    if (working.length > targetVal.length) {
+      working = working.slice(0, -1);
+      setChalkboardContent(working);
+      syncBoardProgressUnits(currentVal.length - working.length);
+      scheduleBoardAnim(deleteNextChar, Math.max(10, delayMs / 2));
+    } else {
+      setChalkboardTyping(false);
+      onComplete();
+    }
+  };
+
+  deleteNextChar();
+}
+
+function processBoardQueue(): void {
+  if (boardQueueActive || boardQueue.length === 0) {
+    return;
+  }
+
+  const item = boardQueue.shift()!;
+  boardQueueActive = item;
+  console.log(
+    `[BoardQueue] Running ${item.presetId} for tool_call_id=${item.ctx.toolCallId}`,
+  );
+
+  const finish = (
+    result: Record<string, unknown> | null,
+    cancelReason?: string,
+  ) => {
+    if (boardQueueActive !== item) {
+      return;
+    }
+    if (item.settled || item.aborted) {
+      boardQueueActive = null;
+      return;
+    }
+
+    boardQueueActive = null;
+    if (cancelReason !== undefined) {
+      settleBoardCancel(item, cancelReason);
+    } else {
+      settleBoardComplete(item, result || {});
+    }
+
+    processBoardQueue();
+  };
+
+  const wrappedComplete = (result: Record<string, unknown> = {}) =>
+    finish(result);
+  const wrappedCancel = (reason?: string) => {
+    activePresetGeneration++;
+    finish(null, reason || 'Cancelled');
+    if (!boardQueueActive && boardQueue.length === 0) {
+      closeBoardUi(true);
+    }
+  };
+
+  const onAnimComplete = (result: Record<string, unknown> = {status: 'success'}) =>
+    finish(result);
+
+  if (item.presetId === 'vanira_type_text') {
+    runTypeText(item, onAnimComplete, wrappedCancel);
+  } else if (item.presetId === 'vanira_draw') {
+    runDrawShapes(item, onAnimComplete);
+  } else {
+    runEraseText(item, onAnimComplete, wrappedCancel);
+  }
+}
+
+export function isBoardQueuedPreset(
+  presetId: string | undefined,
+): presetId is BoardQueuedPresetId {
+  return isBoardQueuedPresetId(presetId);
+}
+
+export function enqueueBoardCommand(
+  item: {
+    ctx: PresetContext;
+    presetId: BoardQueuedPresetId;
+    onComplete: OnComplete;
+    onCancel: OnCancel;
+  },
+  client?: PresetClient | null,
+): void {
+  if (client) {
+    boardClient = client;
+  }
+
+  const id = item.ctx.toolCallId;
+  if (id) {
+    if (settledBoardToolCallIds.has(id)) {
+      console.log(`[BoardQueue] Skipping duplicate settled tool_call_id=${id}`);
+      return;
+    }
+    if (boardQueueActive?.ctx.toolCallId === id) {
+      console.log(`[BoardQueue] Skipping duplicate active tool_call_id=${id}`);
+      return;
+    }
+    if (boardQueue.some(q => q.ctx.toolCallId === id)) {
+      console.log(`[BoardQueue] Skipping duplicate queued tool_call_id=${id}`);
+      return;
+    }
+  }
+
+  boardQueue.push(item);
+  console.log(
+    `[BoardQueue] Enqueued ${item.presetId} (${boardQueue.length} pending)`,
+  );
+  processBoardQueue();
+}
+
+export function abortBoardTools(
+  reason = 'Interrupted',
+  toolCallId?: string,
+  status: ToolTerminalStatus = 'interrupted',
+): void {
+  const matches = (item: BoardQueueItem) =>
+    !toolCallId || item.ctx.toolCallId === toolCallId;
+
+  const hasWork =
+    (boardQueueActive && matches(boardQueueActive)) ||
+    boardQueue.some(matches);
+
+  if (!hasWork) {
+    return;
+  }
+
+  console.log(
+    `[BoardQueue] Aborting board tools: ${reason}${toolCallId ? ` (${toolCallId})` : ''}`,
+  );
+  clearBoardAnimTimer();
+  activePresetGeneration++;
+
+  if (boardQueueActive && matches(boardQueueActive)) {
+    const active = boardQueueActive;
+    boardQueueActive = null;
+    settleBoardCancel(active, reason, status);
+  }
+
+  boardQueue = boardQueue.filter(item => {
+    if (!matches(item)) {
+      return true;
+    }
+    settleBoardCancel(item, reason, status);
+    return false;
+  });
+
+  setChalkboardTyping(false);
+  processBoardQueue();
+}
+
+/** User closed chalkboard — cancel active + queued with cancelled status. */
+export function dismissChalkboardUser(reason = 'User dismissed chalkboard'): void {
+  if (!boardQueueActive && boardQueue.length === 0) {
+    closeBoardUi(true);
+    return;
+  }
+  abortBoardTools(reason, undefined, 'cancelled');
+  if (!boardQueueActive && boardQueue.length === 0) {
+    closeBoardUi(true);
+  }
+}
+
+/**
+ * Full board teardown — close UI, drop queue, clear in-memory board state.
+ * Used on call end / new session (does not send client_tool_result).
+ */
+export function resetBoardSession(): void {
+  activePresetGeneration++;
+  clearBoardAnimTimer();
+  boardQueue = [];
+  boardQueueActive = null;
+  settledBoardToolCallIds.clear();
+  activeBoardProgress = null;
+  boardClient = null;
+  setChalkboardContent('');
+  closeBoardUi();
+  console.log('[BoardQueue] Session reset — board closed, queue cleared');
+}
+
+export function hasActiveBoardWork(): boolean {
+  return !!boardQueueActive || boardQueue.length > 0;
+}

package/src/presets/chalkboard/chalkboardSession.ts

@@ -0,0 +1,75 @@
+/** Module-level chalkboard state — mirrors WidgetPresetRenderer.chalkboardContent. */
+
+export type ChalkboardSnapshot = {
+  visible: boolean;
+  content: string;
+  typing: boolean;
+};
+
+let content = '';
+let visible = false;
+let typing = false;
+let cachedSnapshot: ChalkboardSnapshot = {
+  visible: false,
+  content: '',
+  typing: false,
+};
+const listeners = new Set<() => void>();
+
+function refreshSnapshot(): ChalkboardSnapshot {
+  if (
+    cachedSnapshot.visible !== visible ||
+    cachedSnapshot.content !== content ||
+    cachedSnapshot.typing !== typing
+  ) {
+    cachedSnapshot = {visible, content, typing};
+  }
+  return cachedSnapshot;
+}
+
+function notify(): void {
+  refreshSnapshot();
+  listeners.forEach(listener => listener());
+}
+
+export function subscribeChalkboard(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function getChalkboardSnapshot(): ChalkboardSnapshot {
+  return refreshSnapshot();
+}
+
+export function getChalkboardContent(): string {
+  return content;
+}
+
+export function setChalkboardContent(next: string): void {
+  content = next;
+  notify();
+}
+
+export function isChalkboardVisible(): boolean {
+  return visible;
+}
+
+export function isChalkboardTyping(): boolean {
+  return typing;
+}
+
+export function showChalkboard(): void {
+  visible = true;
+  notify();
+}
+
+export function hideChalkboard(): void {
+  visible = false;
+  typing = false;
+  notify();
+}
+
+export function setChalkboardTyping(active: boolean): void {
+  typing = active;
+  notify();
+}