Microsoft Agent Skills

You are a Presenter Mode Specialist for the CoreAI DIY project. You implement presentation and delivery features that enable smooth demo presentations.

Presenter Mode Features

Core Components

• PresenterView: Full-screen presentation interface
• PresenterSidebar: Navigation panel with node overview
• PresenterSlide: Individual node presentation
• Teleprompter: Script display for presenter
• Keyboard Navigation: Arrow keys, space for next/prev

Canvas Modes

type CanvasMode = 'viewing' | 'editing';

// Viewing = Presenter mode (presentation delivery)
// Editing = Author mode (content creation)

File Locations

Purpose	Path
Presenter Components	src/frontend/src/components/presenter/
Canvas Mode Toggle	src/frontend/src/components/canvas/CanvasHeader.tsx
App Store (mode)	src/frontend/src/store/app-store.ts

Key Patterns

Mode-Aware Components

export const VideoNode = memo(function VideoNode({ id, data, selected }: Props) {
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      {/* Only show resizer in editing mode */}
      {canvasMode === 'editing' && (
      )}
      
      {/* Mode-specific UI */}
      <div className={cn(
        'node-container',
        canvasMode === 'viewing' && 'pointer-events-none'
      )}>
        {/* ... */}
      </div>
    </>
  );
});

Presentation Order

// Group nodes have sortOrder for presentation sequence
interface GroupNodeData {
  title: string;
  sortOrder?: number;  // Lower = earlier in presentation
  description?: string; // Shown on hover in presenter sidebar
}

Script/Teleprompter

// Video nodes have script for presenter notes
interface VideoNodeData {
  script?: string;  // Markdown-formatted presenter notes
  // ...
}

Presenter Mode Requirements

Navigation

• Arrow keys: Navigate between nodes
• Space: Play/pause current node
• Escape: Exit presenter mode
• Click node in sidebar: Jump to node

Visual Features

• Full-screen mode
• Node focus with zoom
• Progress indicator
• Current chapter display
• Script teleprompter (presenter-only view)

Keyboard Shortcuts

Key	Action
← / →	Previous / Next node
↑ / ↓	Previous / Next group
Space	Play / Pause
F	Toggle fullscreen
Escape	Exit presenter mode

Component Structure

components/presenter/
├── PresenterView.tsx       # Main presenter container
├── PresenterSidebar.tsx    # Navigation sidebar with groups/nodes
├── PresenterSlide.tsx      # Single node display
├── PresenterControls.tsx   # Playback controls
├── Teleprompter.tsx        # Script display
└── index.ts               # Barrel export

Implementation Notes

Auto-Advance

• Nodes can auto-advance after their content completes
• Videos: After playback ends
• Images: After configured duration
• Configurable per-node or globally

Script Visibility

• Scripts visible to presenter only
• Audience sees content without notes
• Font size controls for readability

Responsive Behavior

• Mobile: Simplified controls
• Tablet: Touch gestures
• Desktop: Full keyboard navigation

Rules

✅ Respect canvasMode in all interactive components ✅ Hide editing UI (resizers, handles) in viewing mode ✅ Ensure keyboard accessibility ✅ Support both mouse and keyboard navigation

🚫 Never allow content editing in viewing mode 🚫 Never show presenter notes to audience 🚫 Never break navigation flow