Skip to content

feat: add code element support for whiteboard#385

Merged
wyuc merged 11 commits intomainfrom
feat/code-element
Apr 16, 2026
Merged

feat: add code element support for whiteboard#385
wyuc merged 11 commits intomainfrom
feat/code-element

Conversation

@cosarah
Copy link
Copy Markdown
Collaborator

@cosarah cosarah commented Apr 8, 2026

Summary

  • Add wb_draw_code and wb_edit_code whiteboard actions for creating and editing syntax-highlighted code blocks
  • Implement BaseCodeElement component with Shiki highlighting, IDE-style header, and line-by-line typing/insert/delete/replace animations
  • Integrate into agent orchestration: tool schemas, director prompt context, prompt builder guidelines
  • Fix whiteboard zoom intercepting code element scroll

Closes #383

Changes

Type system (2 files)

  • lib/types/slides.ts: CODE enum, CodeLine interface, PPTCodeElement type
  • lib/types/action.ts: WbDrawCodeAction, WbEditCodeAction, registered in SYNC_ACTIONS

Execution engine (1 file)

  • lib/action/engine.ts: executeWbDrawCode (create code block with typing delay) and executeWbEditCode (insert_after, insert_before, delete_lines, replace_lines)

Rendering (3 files)

  • BaseCodeElement.tsx: 630-line component — Shiki singleton, per-line HTML parsing, typing reveal with human-like easing, mount gating, replace/delete animations, scroll isolation from whiteboard zoom
  • ScreenElement.tsx: register CodeElement in type map
  • inline-action-tag.tsx: Code2 / FileCode icons for chat action tags

Agent orchestration (5 files)

  • tool-schemas.ts: LLM action descriptions with parameter docs
  • registry/types.ts + store.ts: add to WHITEBOARD_ACTIONS
  • director-prompt.ts: WhiteboardActionRecord union, summarization cases
  • prompt-builder.ts: action guidelines, Code Element Layout section, summarizeElement case, virtual whiteboard context

Other (1 file)

  • element-fingerprint.ts: add code case for exhaustive switch

Code Review Results

Assessment: Ready to merge — no Critical issues found.

Low-priority observations (not blocking):

  • replace_lines assumes contiguous line IDs (matches LLM prompt guidance)
  • Module-level lineIdCounter is client-side only; Date.now() suffix prevents collisions
  • Shiki language validation relies on outer try/catch fallback (functionally correct)
  • No dark mode support (out of scope for this PR)

Test plan

  • tsc --noEmit passes with zero errors
  • pnpm dev starts without build errors
  • Whiteboard code element renders with syntax highlighting and header
  • Code element scroll works independently from whiteboard zoom
  • Scroll falls through to whiteboard zoom at content boundaries
  • Inline action tags show correct icons for wb_draw_code / wb_edit_code

🤖 Generated with Claude Code

cosarah and others added 11 commits April 8, 2026 18:13
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The code.untitled and code.lines keys were added but never referenced
by the BaseCodeElement component. Remove to reduce i18n maintenance
burden and merge conflict surface.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

@wyuc wyuc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally, LGTM :)

@wyuc wyuc merged commit c75cf6e into main Apr 16, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: add code element support for whiteboard

2 participants