feat: add presentation mode with fullscreen, idle-hide, and keyboard navigation

- Fullscreen via toolbar button or F11; exit via ESC/F11/button
- Header auto-hides, sidebars collapse, slide fills viewport
- Idle auto-hide (3s): toolbar/avatars fade out, speech bubble stays visible
- Smart suspension: idle-hide pauses during typing/recording/voice input
- Keyboard navigation: Arrow keys (prev/next), Space (play/pause), ESC (exit)
- F11 intercepted to use Fullscreen API (ESC-friendly) instead of browser native
- Whiteboard hints reposition from bottom to top corners in fullscreen
- i18n: fullscreen/exitFullscreen keys (zh-CN + en-US)

Closes #102

Author: YizukiAme

components/canvas/canvas-area.tsx

@@ -37,6 +37,8 @@ export function CanvasArea({
   onNextSlide,
   onPlayPause,
   onWhiteboardClose,
+  isPresenting,
+  onTogglePresentation,
   showStopDiscussion,
   onStopDiscussion,
   hideToolbar,
@@ -246,6 +248,8 @@ export function CanvasArea({
           onNextSlide={onNextSlide}
           onPlayPause={onPlayPause}
           onWhiteboardClose={onWhiteboardClose}
+          isPresenting={isPresenting}
+          onTogglePresentation={onTogglePresentation}
           showStopDiscussion={showStopDiscussion}
           onStopDiscussion={onStopDiscussion}
         />

components/canvas/canvas-toolbar.tsx

@@ -13,6 +13,8 @@ import {
   Volume2,
   VolumeX,
   Repeat,
+  Maximize2,
+  Minimize2,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useStageStore } from '@/lib/store';
@@ -35,6 +37,8 @@ export interface CanvasToolbarProps {
   readonly onWhiteboardClose: () => void;
   readonly showStopDiscussion?: boolean;
   readonly onStopDiscussion?: () => void;
+  readonly isPresenting?: boolean;
+  readonly onTogglePresentation?: () => void;
   readonly className?: string;
   // Audio/playback controls
   readonly ttsEnabled?: boolean;
@@ -92,6 +96,8 @@ export function CanvasToolbar({
   onWhiteboardClose,
   showStopDiscussion,
   onStopDiscussion,
+  isPresenting,
+  onTogglePresentation,
   className,
   ttsEnabled,
   ttsMuted,
@@ -131,6 +137,7 @@ export function CanvasToolbar({
 
   // Effective volume for display
   const effectiveVolume = ttsMuted ? 0 : ttsVolume;
+  const presentationLabel = isPresenting ? t('stage.exitFullscreen') : t('stage.fullscreen');
 
   return (
     <div className={cn('flex items-center', className)}>
@@ -382,6 +389,26 @@ export function CanvasToolbar({
 
       {/* ── Right: chat toggle ── */}
       <div className="flex items-center justify-end gap-px shrink-0 pr-1">
+        {onTogglePresentation && (
+          <button
+            onClick={onTogglePresentation}
+            className={cn(
+              ctrlBtn,
+              'w-6 h-6',
+              isPresenting
+                ? 'text-violet-600 dark:text-violet-400'
+                : 'text-gray-600 dark:text-gray-300',
+            )}
+            aria-label={presentationLabel}
+            title={presentationLabel}
+          >
+            {isPresenting ? (
+              <Minimize2 className="w-3.5 h-3.5" />
+            ) : (
+              <Maximize2 className="w-3.5 h-3.5" />
+            )}
+          </button>
+        )}
         {onToggleChat && (
           <button
             onClick={onToggleChat}

components/roundtable/index.tsx

@@ -74,6 +74,10 @@ interface RoundtableProps {
   readonly onPrevSlide?: () => void;
   readonly onNextSlide?: () => void;
   readonly onWhiteboardClose?: () => void;
+  readonly isPresenting?: boolean;
+  readonly controlsVisible?: boolean;
+  readonly onTogglePresentation?: () => void;
+  readonly onPresentationInteractionChange?: (active: boolean) => void;
 }
 
 const DEFAULT_TEACHER_AVATAR = '/avatars/teacher.png';
@@ -131,6 +135,10 @@ export function Roundtable({
   onPrevSlide,
   onNextSlide,
   onWhiteboardClose,
+  isPresenting,
+  controlsVisible,
+  onTogglePresentation,
+  onPresentationInteractionChange,
 }: RoundtableProps) {
   const { t } = useI18n();
   const ttsMuted = useSettingsStore((s) => s.ttsMuted);
@@ -308,6 +316,18 @@ export function Roundtable({
     }
   };
 
+  const isPresentationInteractionActive = isInputOpen || isVoiceOpen || isRecording || isProcessing;
+
+  useEffect(() => {
+    onPresentationInteractionChange?.(isPresentationInteractionActive);
+
+    return () => {
+      if (isPresentationInteractionActive) {
+        onPresentationInteractionChange?.(false);
+      }
+    };
+  }, [isPresentationInteractionActive, onPresentationInteractionChange]);
+
   // Determine active speaking state and bubble ownership
   // Check if current speaker is a student agent (not teacher)
   const speakingStudent = speakingAgentId
@@ -387,46 +407,66 @@ export function Roundtable({
   }, [playbackSpeed, setPlaybackSpeed]);
 
   return (
-    <div className="h-[192px] w-full flex flex-col relative z-10 border-t border-gray-100 dark:border-gray-800 bg-white/60 dark:bg-gray-800/60 backdrop-blur-md">
+    <div
+      className={cn(
+        'h-[192px] w-full flex flex-col relative z-10 transition-all duration-300',
+        isPresenting && !controlsVisible
+          ? 'border-t border-transparent bg-transparent backdrop-blur-none'
+          : 'border-t border-gray-100 dark:border-gray-800 bg-white/60 dark:bg-gray-800/60 backdrop-blur-md',
+      )}
+    >
       {/* ── Toolbar strip — merged from CanvasArea ── */}
-      <CanvasToolbar
-        className="shrink-0 h-8 px-3 border-b border-gray-100/40 dark:border-gray-700/30"
-        currentSceneIndex={currentSceneIndex}
-        scenesCount={scenesCount}
-        engineState={
-          engineMode === 'playing' || engineMode === 'live'
-            ? 'playing'
-            : engineMode === 'paused'
-              ? 'paused'
-              : 'idle'
-        }
-        isLiveSession={isStreaming || isTopicPending || engineMode === 'live'}
-        whiteboardOpen={whiteboardOpen}
-        sidebarCollapsed={sidebarCollapsed}
-        chatCollapsed={chatCollapsed}
-        onToggleSidebar={onToggleSidebar}
-        onToggleChat={onToggleChat}
-        onPrevSlide={onPrevSlide ?? (() => {})}
-        onNextSlide={onNextSlide ?? (() => {})}
-        onPlayPause={onPlayPause ?? (() => {})}
-        onWhiteboardClose={onWhiteboardClose ?? (() => {})}
-        showStopDiscussion={showStopButton}
-        onStopDiscussion={onStopDiscussion}
-        ttsEnabled={ttsEnabled}
-        ttsMuted={ttsMuted}
-        ttsVolume={ttsVolume}
-        onToggleMute={() => ttsEnabled && setTTSMuted(!ttsMuted)}
-        onVolumeChange={(v) => setTTSVolume(v)}
-        autoPlayLecture={autoPlayLecture}
-        onToggleAutoPlay={() => setAutoPlayLecture(!autoPlayLecture)}
-        playbackSpeed={playbackSpeed}
-        onCycleSpeed={handleCycleSpeed}
-      />
-
+      <div
+        className={cn(
+          'transition-opacity duration-300',
+          isPresenting && !controlsVisible && 'opacity-0 pointer-events-none',
+        )}
+      >
+        <CanvasToolbar
+          className="shrink-0 h-8 px-3 border-b border-gray-100/40 dark:border-gray-700/30"
+          currentSceneIndex={currentSceneIndex}
+          scenesCount={scenesCount}
+          engineState={
+            engineMode === 'playing' || engineMode === 'live'
+              ? 'playing'
+              : engineMode === 'paused'
+                ? 'paused'
+                : 'idle'
+          }
+          isLiveSession={isStreaming || isTopicPending || engineMode === 'live'}
+          whiteboardOpen={whiteboardOpen}
+          sidebarCollapsed={sidebarCollapsed}
+          chatCollapsed={chatCollapsed}
+          onToggleSidebar={onToggleSidebar}
+          onToggleChat={onToggleChat}
+          onPrevSlide={onPrevSlide ?? (() => {})}
+          onNextSlide={onNextSlide ?? (() => {})}
+          onPlayPause={onPlayPause ?? (() => {})}
+          onWhiteboardClose={onWhiteboardClose ?? (() => {})}
+          isPresenting={isPresenting}
+          onTogglePresentation={onTogglePresentation}
+          showStopDiscussion={showStopButton}
+          onStopDiscussion={onStopDiscussion}
+          ttsEnabled={ttsEnabled}
+          ttsMuted={ttsMuted}
+          ttsVolume={ttsVolume}
+          onToggleMute={() => ttsEnabled && setTTSMuted(!ttsMuted)}
+          onVolumeChange={(v) => setTTSVolume(v)}
+          autoPlayLecture={autoPlayLecture}
+          onToggleAutoPlay={() => setAutoPlayLecture(!autoPlayLecture)}
+          playbackSpeed={playbackSpeed}
+          onCycleSpeed={handleCycleSpeed}
+        />
+      </div>
       {/* ── Interaction area — three-column layout ── */}
       <div className="flex-1 flex items-stretch min-h-0">
         {/* Left: Teacher identity */}
-        <div className="w-[90px] shrink-0 flex flex-col border-r border-gray-100/50 dark:border-gray-700/50 bg-white/40 dark:bg-gray-900/40 overflow-visible relative">
+        <div
+          className={cn(
+            'w-[90px] shrink-0 flex flex-col border-r border-gray-100/50 dark:border-gray-700/50 bg-white/40 dark:bg-gray-900/40 overflow-visible relative transition-opacity duration-300',
+            isPresenting && !controlsVisible && 'opacity-0 pointer-events-none',
+          )}
+        >
           {/* Decorative Element (Top) */}
           <div className="absolute top-0 inset-x-0 h-16 bg-gradient-to-b from-purple-50/50 dark:from-purple-900/10 to-transparent pointer-events-none" />
           <div className="absolute top-3 inset-x-0 flex flex-col items-center justify-center gap-1 opacity-10 pointer-events-none">
@@ -1099,7 +1139,12 @@ export function Roundtable({
         </div>
 
         {/* Right: Participants area */}
-        <div className="w-[140px] shrink-0 flex flex-col py-3 border-l border-gray-100/50 dark:border-gray-700/50 bg-gray-50/30 dark:bg-gray-900/30 overflow-visible">
+        <div
+          className={cn(
+            'w-[140px] shrink-0 flex flex-col py-3 border-l border-gray-100/50 dark:border-gray-700/50 bg-gray-50/30 dark:bg-gray-900/30 overflow-visible transition-opacity duration-300',
+            isPresenting && !controlsVisible && 'opacity-0 pointer-events-none',
+          )}
+        >
           {/* Companion agent avatars — horizontal row, scrollable on overflow, arrows on hover */}
           <div className="flex-none relative group/scroll">
             {/* Left arrow */}