Summary
Add the ability to create and edit syntax-highlighted code blocks on the whiteboard, enabling live-coding demonstrations during lessons.
Features
wb_draw_code action: Create code blocks on the whiteboard with syntax highlighting (Shiki, 17 languages supported)
wb_edit_code action: Line-level editing operations (insert_after, insert_before, delete_lines, replace_lines) with smooth animations
- BaseCodeElement component: IDE-style rendering with typing animations, line numbers, macOS-style header bar
- Agent integration: LLM tool schemas, director context summarization, prompt guidelines for live-coding patterns
Scope
| Category |
File |
Change |
| New |
components/.../CodeElement/BaseCodeElement.tsx |
New component with Shiki highlighting and typing animations |
| Types |
lib/types/slides.ts |
CODE enum, CodeLine, PPTCodeElement |
| Types |
lib/types/action.ts |
WbDrawCodeAction, WbEditCodeAction, add to SYNC_ACTIONS |
| Engine |
lib/action/engine.ts |
executeWbDrawCode, executeWbEditCode |
| Schemas |
lib/orchestration/tool-schemas.ts |
Action descriptions for LLM |
| Registry |
lib/orchestration/registry/types.ts or store.ts |
Add to WHITEBOARD_ACTIONS |
| Director |
lib/orchestration/director-prompt.ts |
Summarize code actions in agent context |
| Prompts |
lib/orchestration/prompt-builder.ts |
Code element usage guidelines |
| UI |
components/chat/inline-action-tag.tsx |
Code / Edit Code icon tags |
| Routing |
components/slide-renderer/Editor/ScreenElement.tsx |
Register CodeElement |
| i18n |
lib/i18n/locales/*.json |
code.untitled, code.lines keys |
Notes
- Shiki is already installed (v3.21.0) — no new dependency needed
- i18n keys need to be added to all locale files (zh-CN, en-US, ja-JP, ru-RU)
Summary
Add the ability to create and edit syntax-highlighted code blocks on the whiteboard, enabling live-coding demonstrations during lessons.
Features
wb_draw_codeaction: Create code blocks on the whiteboard with syntax highlighting (Shiki, 17 languages supported)wb_edit_codeaction: Line-level editing operations (insert_after, insert_before, delete_lines, replace_lines) with smooth animationsScope
components/.../CodeElement/BaseCodeElement.tsxlib/types/slides.tsCODEenum,CodeLine,PPTCodeElementlib/types/action.tsWbDrawCodeAction,WbEditCodeAction, add to SYNC_ACTIONSlib/action/engine.tsexecuteWbDrawCode,executeWbEditCodelib/orchestration/tool-schemas.tslib/orchestration/registry/types.tsorstore.tslib/orchestration/director-prompt.tslib/orchestration/prompt-builder.tscomponents/chat/inline-action-tag.tsxcomponents/slide-renderer/Editor/ScreenElement.tsxlib/i18n/locales/*.jsoncode.untitled,code.lineskeysNotes