Skip to content

feat: add code element support for whiteboard #383

@cosarah

Description

@cosarah

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions