feat: Doubao-style video call with scenario selection, screen share & fullscreen camera

Redesign the companion (视频通话) page to match Doubao's video calling experience:
- Scenario Selection: 6 scenarios (模拟面试, 英语陪练, 唱歌, 同声传译, 成语接龙, 心情树洞) in a floating grid
- Fullscreen camera mode: camera feed replaces AI avatar as background
- Screen sharing: getDisplayMedia capture with permission dialog & privacy notice
- Subtitle mode: camera shrinks to corner, transcript takes center stage
- Warm orange theme matching Doubao's brand color
- Bottom controls: camera → screen share → mic → speaker → call/hang up
- Camera/mic toggles work independently of WebSocket connection
- No auto-reconnect on connection failure (prevents button flashing)
- Cyberpunk-to-orange redesign: cleaner aesthetic with frosted glass elements

New files: CompanionTopBar, ScenarioSelector, ScreenShareDialog,
useScreenShare, useCameraDevices

Co-Authored-By: Claude Big Pickle <noreply@anthropic.com>

desktop/src/components/companion/CompanionControls.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useState } from 'react'
 import { useTranslation } from '../../i18n'
 import type { CompanionStatus } from '../../types/companion'
 
@@ -6,8 +7,10 @@ interface CompanionControlsProps {
   micEnabled: boolean
   cameraEnabled: boolean
   generating: boolean
+  isSharing: boolean
   onToggleMic: () => void
   onToggleCamera: () => void
+  onScreenShareClick: () => void
   onConnect: () => void
   onDisconnect: () => void
   onStop: () => void
@@ -19,8 +22,10 @@ export function CompanionControls({
   micEnabled,
   cameraEnabled,
   generating,
+  isSharing,
   onToggleMic,
   onToggleCamera,
+  onScreenShareClick,
   onConnect,
   onDisconnect,
   onStop,
@@ -28,84 +33,115 @@ export function CompanionControls({
 }: CompanionControlsProps) {
   const t = useTranslation()
   const isConnected = status === 'connected'
+  const [speakerOn, setSpeakerOn] = useState(true)
+
+  const handleConnectClick = useCallback(() => {
+    onConnect()
+    onResumeAudio()
+  }, [onConnect, onResumeAudio])
 
   return (
-    <div className="companion-controls absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3 px-6 py-3 rounded-2xl bg-black/50 backdrop-blur-md border border-white/10">
-      {/* Mic toggle */}
+    <div className="companion-controls absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 px-5 py-2.5 rounded-full bg-black/50 backdrop-blur-md border border-white/10 z-10">
+      {/* 1. Camera toggle — always clickable */}
       <button
         type="button"
-        onClick={onToggleMic}
-        disabled={!isConnected}
-        className={`flex h-10 w-10 items-center justify-center rounded-xl transition-all ${
-          micEnabled
+        onClick={onToggleCamera}
+        className={`flex h-10 w-10 items-center justify-center rounded-full transition-all ${
+          cameraEnabled
             ? 'bg-white/10 text-white hover:bg-white/20'
-            : 'bg-red-500/20 text-red-400'
-        } disabled:opacity-40`}
-        title={micEnabled ? t('companion.micOn') : t('companion.micOff')}
+            : 'bg-white/5 text-white/40 hover:text-white/60'
+        }`}
+        title={cameraEnabled ? t('companion.cameraOn') : t('companion.cameraOff')}
       >
         <span className="material-symbols-outlined text-xl">
-          {micEnabled ? 'mic' : 'mic_off'}
+          {cameraEnabled ? 'videocam' : 'videocam_off'}
         </span>
       </button>
 
-      {/* Camera toggle */}
+      {/* 2. Screen share — always clickable */}
       <button
         type="button"
-        onClick={onToggleCamera}
-        disabled={!isConnected}
-        className={`flex h-10 w-10 items-center justify-center rounded-xl transition-all ${
-          cameraEnabled
-            ? 'bg-white/10 text-white hover:bg-white/20'
-            : 'bg-red-500/20 text-red-400'
-        } disabled:opacity-40`}
-        title={cameraEnabled ? t('companion.cameraOn') : t('companion.cameraOff')}
+        onClick={onScreenShareClick}
+        className={`flex h-10 w-10 items-center justify-center rounded-full transition-all ${
+          isSharing
+            ? 'bg-orange-500/30 text-orange-300'
+            : 'bg-white/10 text-white hover:bg-white/20'
+        }`}
+        title={isSharing ? t('companion.screenShare.stop') : t('companion.screenShare.start')}
       >
         <span className="material-symbols-outlined text-xl">
-          {cameraEnabled ? 'videocam' : 'videocam_off'}
+          {isSharing ? 'present_to_all' : 'screen_share'}
         </span>
       </button>
 
-      <div className="w-px h-8 bg-white/10" />
+      {/* 3. Mic toggle — always clickable */}
+      <button
+        type="button"
+        onClick={onToggleMic}
+        className={`flex h-10 w-10 items-center justify-center rounded-full transition-all ${
+          micEnabled
+            ? 'bg-white/10 text-white hover:bg-white/20'
+            : 'bg-white/5 text-white/40 hover:text-white/60'
+        }`}
+        title={micEnabled ? t('companion.micOn') : t('companion.micOff')}
+      >
+        <span className="material-symbols-outlined text-xl">
+          {micEnabled ? 'mic' : 'mic_off'}
+        </span>
+      </button>
 
-      {/* Stop generation */}
+      {/* Stop generation (when generating) */}
       {generating && (
         <button
           type="button"
           onClick={onStop}
-          className="flex h-10 w-10 items-center justify-center rounded-xl bg-red-500/30 text-red-400 hover:bg-red-500/50 transition-all"
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-orange-500/30 text-orange-300 hover:bg-orange-500/50 transition-all"
           title="Stop"
         >
           <span className="material-symbols-outlined text-xl">stop</span>
         </button>
       )}
 
-      {/* Connect / Disconnect */}
+      {/* Separator */}
+      <div className="w-px h-7 bg-white/10" />
+
+      {/* 4. Speaker toggle */}
+      <button
+        type="button"
+        onClick={() => setSpeakerOn(!speakerOn)}
+        className={`flex h-10 w-10 items-center justify-center rounded-full transition-all ${
+          speakerOn
+            ? 'bg-white/10 text-white hover:bg-white/20'
+            : 'bg-white/5 text-white/40'
+        }`}
+        title={t('companion.speaker')}
+      >
+        <span className="material-symbols-outlined text-xl">
+          {speakerOn ? 'volume_up' : 'volume_off'}
+        </span>
+      </button>
+
+      {/* 5. Call / Hang Up */}
       {isConnected ? (
         <button
           type="button"
-          onClick={() => {
-            onDisconnect()
-          }}
-          className="flex h-10 items-center gap-2 rounded-xl bg-red-500/20 px-4 text-red-400 hover:bg-red-500/30 transition-all text-sm font-medium"
+          onClick={onDisconnect}
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600 transition-all shadow-lg"
+          title={t('companion.hangUp')}
         >
-          <span className="material-symbols-outlined text-lg">link_off</span>
-          {t('companion.disconnect')}
+          <span className="material-symbols-outlined text-xl">call_end</span>
         </button>
       ) : (
         <button
           type="button"
-          onClick={() => {
-            onConnect()
-            // Resume audio context on user gesture
-            onResumeAudio()
-          }}
+          onClick={handleConnectClick}
           disabled={status === 'connecting'}
-          className="flex h-10 items-center gap-2 rounded-xl bg-purple-600/30 px-4 text-purple-300 hover:bg-purple-600/50 transition-all text-sm font-medium disabled:opacity-40"
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500 text-white hover:bg-green-600 transition-all disabled:opacity-40 shadow-lg"
+          title={t('companion.call')}
         >
-          <span className="material-symbols-outlined text-lg">
-            {status === 'connecting' ? 'hourglass_top' : 'link'}
+          <span className="material-symbols-outlined text-xl">
+            {status === 'connecting' ? 'hourglass_top' : 'call'}
           </span>
-          {status === 'connecting' ? t('companion.status.connecting') : t('companion.connect')}
         </button>
       )}
     </div>

desktop/src/components/companion/CompanionTopBar.tsx

@@ -0,0 +1,62 @@
+import { useCallback } from 'react'
+import { useTranslation } from '../../i18n'
+import { useCompanionStore, SCENARIOS } from '../../stores/companionStore'
+
+export function CompanionTopBar() {
+  const t = useTranslation()
+  const scenario = useCompanionStore((s) => s.scenario)
+  const subtitleEnabled = useCompanionStore((s) => s.subtitleEnabled)
+
+  const setScenarioPanelOpen = useCompanionStore((s) => s.setScenarioPanelOpen)
+  const setSubtitleEnabled = useCompanionStore((s) => s.setSubtitleEnabled)
+
+  const currentScenario = scenario
+    ? SCENARIOS.find((s) => s.id === scenario)
+    : null
+
+  const handleScenarioClick = useCallback(() => {
+    setScenarioPanelOpen(true)
+  }, [setScenarioPanelOpen])
+
+  const handleSubtitleToggle = useCallback(() => {
+    setSubtitleEnabled(!subtitleEnabled)
+  }, [subtitleEnabled, setSubtitleEnabled])
+
+  return (
+    <div className="absolute top-0 left-0 right-0 z-30 flex items-center justify-between px-4 pt-4 pb-2">
+      {/* Left spacer */}
+      <div className="w-9" />
+
+      {/* Center: scenario selector capsule */}
+      <button
+        type="button"
+        onClick={handleScenarioClick}
+        className="flex items-center gap-1.5 px-3.5 h-8 rounded-full bg-black/30 backdrop-blur-md border border-white/10 hover:bg-white/10 transition-all text-white/70 hover:text-white"
+      >
+        {currentScenario ? (
+          <>
+            <span className="material-symbols-outlined text-base">{currentScenario.icon}</span>
+            <span className="text-xs font-medium">{currentScenario.name}</span>
+          </>
+        ) : (
+          <span className="text-xs font-medium">{t('companion.scenario.select')}</span>
+        )}
+        <span className="material-symbols-outlined text-sm text-white/30">expand_more</span>
+      </button>
+
+      {/* Right: subtitle toggle */}
+      <button
+        type="button"
+        onClick={handleSubtitleToggle}
+        className={`flex h-8 w-8 items-center justify-center rounded-full backdrop-blur-md transition-all text-xs font-bold ${
+          subtitleEnabled
+            ? 'bg-orange-500/40 text-orange-200'
+            : 'bg-black/30 text-white/40 hover:text-white/60'
+        }`}
+        title={t('companion.subtitle')}
+      >
+        字
+      </button>
+    </div>
+  )
+}

desktop/src/components/companion/CompanionTranscript.tsx

@@ -1,5 +1,6 @@
 import { useRef, useEffect, useState, useCallback } from 'react'
 import { useTranslation } from '../../i18n'
+import { useCompanionStore } from '../../stores/companionStore'
 
 interface CompanionTranscriptProps {
   transcript: string
@@ -9,10 +10,18 @@ interface CompanionTranscriptProps {
   disabled?: boolean
 }
 
-export function CompanionTranscript({ transcript, fullTranscript, generating, onSendText, disabled }: CompanionTranscriptProps) {
+export function CompanionTranscript({
+  transcript,
+  fullTranscript,
+  generating,
+  onSendText,
+  disabled,
+}: CompanionTranscriptProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [inputValue, setInputValue] = useState('')
   const t = useTranslation()
+  const subtitleEnabled = useCompanionStore((s) => s.subtitleEnabled)
+  const hasContent = !!transcript || !!fullTranscript
 
   useEffect(() => {
     if (scrollRef.current) {
@@ -27,48 +36,131 @@ export function CompanionTranscript({ transcript, fullTranscript, generating, on
     setInputValue('')
   }, [inputValue, onSendText])
 
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSend()
-    }
-  }, [handleSend])
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        handleSend()
+      }
+    },
+    [handleSend],
+  )
 
+  // When subtitles are on and there's content, show full-screen transcript
+  if (subtitleEnabled && hasContent) {
+    return (
+      <div className="absolute inset-0 z-5 flex flex-col">
+        {/* Scrollable transcript area - takes most of the screen */}
+        <div className="flex-1 flex items-center justify-center px-8 py-20">
+          <div
+            ref={scrollRef}
+            className="w-full max-w-2xl max-h-full overflow-y-auto scrollbar-thin"
+          >
+            {fullTranscript && (
+              <div className="text-white/50 text-sm mb-3 whitespace-pre-wrap leading-relaxed text-center">
+                {fullTranscript}
+              </div>
+            )}
+            {transcript && (
+              <div className="text-white/90 text-base font-medium leading-relaxed text-center">
+                {transcript}
+                <span className="inline-block w-1.5 h-4 ml-0.5 bg-orange-400 animate-pulse" />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Text input at bottom */}
+        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 w-full max-w-md px-4">
+          <div className="flex items-center gap-2 rounded-full bg-black/50 backdrop-blur-md border border-white/10 px-4 py-2">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={t('companion.inputPlaceholder')}
+              disabled={disabled}
+              className="flex-1 bg-transparent text-sm text-white/80 placeholder-white/30 outline-none border-none disabled:opacity-40"
+            />
+            <button
+              type="button"
+              onClick={handleSend}
+              disabled={disabled || !inputValue.trim()}
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-orange-500/40 text-orange-200 hover:bg-orange-500/60 transition-all disabled:opacity-30"
+              title={t('companion.send')}
+            >
+              <span className="material-symbols-outlined text-sm">send</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Subtitles on but no content yet - show compact version
+  if (subtitleEnabled && !hasContent) {
+    return (
+      <div className="companion-transcript absolute bottom-20 left-1/2 -translate-x-1/2 w-full max-w-md px-4">
+        <div
+          className={`flex items-center gap-2 rounded-full bg-black/40 backdrop-blur-md border border-white/10 px-4 py-2 transition-all duration-500 ${
+            generating ? 'border-orange-400/40' : ''
+          }`}
+        >
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t('companion.inputPlaceholder')}
+            disabled={disabled}
+            className="flex-1 bg-transparent text-sm text-white/80 placeholder-white/30 outline-none border-none disabled:opacity-40"
+          />
+          <button
+            type="button"
+            onClick={handleSend}
+            disabled={disabled || !inputValue.trim()}
+            className="flex h-7 w-7 items-center justify-center rounded-full bg-orange-500/40 text-orange-200 hover:bg-orange-500/60 transition-all disabled:opacity-30"
+            title={t('companion.send')}
+          >
+            <span className="material-symbols-outlined text-sm">send</span>
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  // Subtitles off - show compact transcript bubble
   return (
     <div className="companion-transcript absolute bottom-20 left-1/2 -translate-x-1/2 w-full max-w-2xl px-4">
-      {/* Transcript display */}
+      {hasContent && (
+        <div
+          ref={scrollRef}
+          className={`max-h-[120px] overflow-y-auto rounded-2xl bg-black/40 backdrop-blur-md border p-3 mb-2 scrollbar-thin transition-all duration-500 ${
+            generating
+              ? 'border-orange-400/40'
+              : 'border-white/10'
+          }`}
+        >
+          {fullTranscript && !transcript && (
+            <div className="text-white/40 text-xs whitespace-pre-wrap leading-relaxed">
+              {fullTranscript}
+            </div>
+          )}
+          {transcript && (
+            <div className="text-white/80 text-sm font-medium leading-relaxed">
+              {transcript}
+              <span className="inline-block w-1.5 h-4 ml-0.5 bg-orange-400 animate-pulse" />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Text input */}
       <div
-        ref={scrollRef}
-        className={`max-h-[150px] overflow-y-auto rounded-2xl bg-black/40 backdrop-blur-md border p-4 mb-2 scrollbar-thin transition-all duration-500 ${
-          generating
-            ? 'border-purple-500/50 shadow-[0_0_20px_rgba(147,51,234,0.2)]'
-            : 'border-white/10'
+        className={`flex items-center gap-2 rounded-2xl bg-black/40 backdrop-blur-md border px-4 py-2 transition-all duration-500 ${
+          generating ? 'border-orange-400/40' : 'border-white/10'
         }`}
       >
-        {fullTranscript && (
-          <div className="text-white/40 text-xs mb-2 whitespace-pre-wrap leading-relaxed">
-            {fullTranscript}
-          </div>
-        )}
-        {transcript && (
-          <div className="text-white/90 text-sm font-medium leading-relaxed">
-            {transcript}
-            <span className="inline-block w-1.5 h-4 ml-0.5 bg-purple-400 animate-pulse" />
-          </div>
-        )}
-        {!transcript && !fullTranscript && (
-          <div className="text-white/30 text-sm text-center py-2">
-            {t('companion.transcriptPlaceholder')}
-          </div>
-        )}
-      </div>
-
-      {/* Text input row */}
-      <div className={`flex items-center gap-2 rounded-2xl bg-black/40 backdrop-blur-md border px-4 py-2 transition-all duration-500 ${
-          generating
-            ? 'border-purple-500/50 shadow-[0_0_20px_rgba(147,51,234,0.2)]'
-            : 'border-white/10'
-        }`}>
         <input
           type="text"
           value={inputValue}
@@ -76,13 +168,13 @@ export function CompanionTranscript({ transcript, fullTranscript, generating, on
           onKeyDown={handleKeyDown}
           placeholder={t('companion.inputPlaceholder')}
           disabled={disabled}
-          className="flex-1 bg-transparent text-sm text-white/90 placeholder-white/30 outline-none border-none disabled:opacity-40"
+          className="flex-1 bg-transparent text-sm text-white/80 placeholder-white/30 outline-none border-none disabled:opacity-40"
         />
         <button
           type="button"
           onClick={handleSend}
           disabled={disabled || !inputValue.trim()}
-          className="flex h-8 w-8 items-center justify-center rounded-lg bg-purple-600/40 text-purple-300 hover:bg-purple-600/60 transition-all disabled:opacity-30"
+          className="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-500/40 text-orange-200 hover:bg-orange-500/60 transition-all disabled:opacity-30"
           title={t('companion.send')}
         >
           <span className="material-symbols-outlined text-lg">send</span>

desktop/src/components/companion/CompanionVideoPanel.tsx

@@ -8,6 +8,7 @@ interface CompanionVideoPanelProps {
   speaking: boolean
   generating: boolean
   status: CompanionStatus
+  onFlipCamera?: () => void
 }
 
 export function CompanionVideoPanel({
@@ -15,15 +16,20 @@ export function CompanionVideoPanel({
   speaking,
   generating,
   status,
+  onFlipCamera,
 }: CompanionVideoPanelProps) {
   const videoRef = useRef<HTMLVideoElement>(null)
   const avatarFileRef = useRef<HTMLInputElement>(null)
-  const bgFileRef = useRef<HTMLInputElement>(null)
   const t = useTranslation()
   const avatarUrl = useCompanionStore((s) => s.avatarUrl)
   const backgroundUrl = useCompanionStore((s) => s.backgroundUrl)
   const setAvatarUrl = useCompanionStore((s) => s.setAvatarUrl)
-  const setBackgroundUrl = useCompanionStore((s) => s.setBackgroundUrl)
+  const cameraFullscreen = useCompanionStore((s) => s.cameraFullscreen)
+  const cameraEnabled = useCompanionStore((s) => s.cameraEnabled)
+  const screenShareStream = useCompanionStore((s) => s.screenShareStream)
+  const transcript = useCompanionStore((s) => s.transcript)
+  const fullTranscript = useCompanionStore((s) => s.fullTranscript)
+  const subtitleEnabled = useCompanionStore((s) => s.subtitleEnabled)
 
   useEffect(() => {
     if (videoRef.current && webcamStream) {
@@ -35,10 +41,6 @@ export function CompanionVideoPanel({
     avatarFileRef.current?.click()
   }, [])
 
-  const handleBgPick = useCallback(() => {
-    bgFileRef.current?.click()
-  }, [])
-
   const handleAvatarFile = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0]
@@ -46,23 +48,14 @@ export function CompanionVideoPanel({
       const reader = new FileReader()
       reader.onload = () => setAvatarUrl(reader.result as string)
       reader.readAsDataURL(file)
-      // Reset so the same file can be re-selected
       e.target.value = ''
     },
     [setAvatarUrl],
   )
 
-  const handleBgFile = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0]
-      if (!file) return
-      const reader = new FileReader()
-      reader.onload = () => setBackgroundUrl(reader.result as string)
-      reader.readAsDataURL(file)
-      e.target.value = ''
-    },
-    [setBackgroundUrl],
-  )
+  const isFullScreenCamera = cameraEnabled && cameraFullscreen && webcamStream
+  // When subtitle is on AND there's transcript content, shrink the main view
+  const hasTranscriptContent = subtitleEnabled && (!!transcript || !!fullTranscript)
 
   const statusLabel = generating
     ? t('companion.speaking')
@@ -74,79 +67,107 @@ export function CompanionVideoPanel({
 
   return (
     <div className="companion-video-panel absolute inset-0 overflow-hidden">
-      {/* Background */}
+      {/* Background - clean warm gradient */}
       {backgroundUrl ? (
         <div
           className="absolute inset-0 bg-cover bg-center transition-all duration-700"
           style={{ backgroundImage: `url(${backgroundUrl})` }}
         />
       ) : (
-        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 transition-all duration-700" />
+        <div className="absolute inset-0 bg-gradient-to-br from-orange-950/80 via-slate-950 to-amber-950/60 transition-all duration-700" />
       )}
 
-      {/* Background edit button */}
-      <button
-        type="button"
-        onClick={handleBgPick}
-        className="absolute top-4 left-4 flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-black/30 backdrop-blur-sm text-white/50 hover:text-white/80 hover:bg-black/50 transition-all text-xs"
-        title="Change background"
-      >
-        <span className="material-symbols-outlined text-sm">image</span>
-        Background
-      </button>
-      <input
-        ref={bgFileRef}
-        type="file"
-        accept="image/*"
-        className="hidden"
-        onChange={handleBgFile}
-      />
+      {/* Fullscreen camera view */}
+      {isFullScreenCamera && (
+        <div className="absolute inset-0 bg-black">
+          <video
+            ref={videoRef}
+            autoPlay
+            muted
+            playsInline
+            className="h-full w-full object-cover scale-x-[-1]"
+          />
+          {/* Flip camera overlay */}
+          <div className="absolute top-14 right-4 flex flex-col gap-2 z-20">
+            <button
+              type="button"
+              onClick={onFlipCamera}
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-black/40 backdrop-blur-md text-white/70 hover:text-white hover:bg-black/60 transition-all"
+              title={t('companion.flipCamera')}
+            >
+              <span className="material-symbols-outlined text-xl">flip_camera_android</span>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Screen share overlay */}
+      {screenShareStream && !isFullScreenCamera && (
+        <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
+          <div className="text-center">
+            <span className="material-symbols-outlined text-5xl text-orange-400/60 mb-3">present_to_all</span>
+            <p className="text-white/50 text-sm">正在共享屏幕</p>
+          </div>
+        </div>
+      )}
 
-      {/* AI Presence indicator */}
-      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-4">
-        <div className="relative group">
-          <div
-            className={`w-32 h-32 rounded-full transition-all duration-500 flex items-center justify-center overflow-hidden ${
-              generating
-                ? 'shadow-[0_0_60px_rgba(147,51,234,0.4)] animate-pulse ring-2 ring-purple-500/50'
-                : speaking
-                ? 'shadow-[0_0_30px_rgba(59,130,246,0.3)] ring-2 ring-blue-500/30'
-                : ''
-            }`}
-          >
-            {avatarUrl ? (
-              <img
-                src={avatarUrl}
-                alt="avatar"
-                className="w-full h-full object-cover"
-              />
-            ) : (
-              <div
-                className={`w-full h-full flex items-center justify-center ${
-                  generating
-                    ? 'bg-purple-600/30'
-                    : speaking
-                    ? 'bg-blue-500/20'
-                    : 'bg-gray-600/10'
-                }`}
+      {/* AI Avatar - large center (default), small top-left when subtitles active */}
+      {!isFullScreenCamera && !screenShareStream && (
+        <div
+          className={`absolute flex flex-col items-center gap-3 transition-all duration-500 ${
+            hasTranscriptContent
+              ? 'top-6 left-6 scale-[0.45] origin-top-left'
+              : 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
+          }`}
+        >
+          <div className="relative">
+            <div
+              className={`rounded-full transition-all duration-700 flex items-center justify-center overflow-hidden ${
+                hasTranscriptContent ? 'w-24 h-24' : 'w-36 h-36'
+              } ${
+                generating
+                  ? 'shadow-[0_0_60px_rgba(251,146,60,0.4)] ring-2 ring-orange-400/60'
+                  : speaking
+                  ? 'shadow-[0_0_40px_rgba(251,146,60,0.25)] ring-2 ring-orange-400/30'
+                  : 'shadow-[0_0_15px_rgba(255,255,255,0.08)] ring-1 ring-white/10'
+              }`}
+              style={{
+                background: generating
+                  ? 'radial-gradient(circle, rgba(251,146,60,0.25) 0%, rgba(249,115,22,0.1) 100%)'
+                  : speaking
+                  ? 'radial-gradient(circle, rgba(251,146,60,0.15) 0%, rgba(249,115,22,0.05) 100%)'
+                  : 'radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 100%)',
+              }}
+            >
+              {avatarUrl ? (
+                <img src={avatarUrl} alt="avatar" className="w-full h-full object-cover" />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                  {(speaking || generating) && (
+                    <div className="absolute inset-0 rounded-full animate-ping opacity-10 bg-orange-400" />
+                  )}
+                  {/* Default female avatar silhouette */}
+                  <div className="flex flex-col items-center justify-center text-white/50">
+                    <span className="material-symbols-outlined text-5xl">face_6</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            {!hasTranscriptContent && (
+              <button
+                type="button"
+                onClick={handleAvatarPick}
+                className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-orange-500/70 hover:bg-orange-500 flex items-center justify-center transition-all opacity-0 group-hover:opacity-100 shadow-lg z-10"
               >
-                <span className="material-symbols-outlined text-5xl text-white/60">
-                  {generating ? 'record_voice_over' : 'psychology'}
-                </span>
-              </div>
+                <span className="material-symbols-outlined text-xs text-white">edit</span>
+              </button>
             )}
           </div>
-          {/* Avatar edit overlay */}
-          <button
-            type="button"
-            onClick={handleAvatarPick}
-            className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full bg-purple-600/80 hover:bg-purple-600 flex items-center justify-center transition-all opacity-0 group-hover:opacity-100 shadow-lg"
-          >
-            <span className="material-symbols-outlined text-sm text-white">edit</span>
-          </button>
+          {!hasTranscriptContent && (
+            <span className="text-white/40 text-xs font-medium tracking-wide">{statusLabel}</span>
+          )}
         </div>
-        <span className="text-white/40 text-sm font-medium">{statusLabel}</span>
-      </div>
+      )}
       <input
         ref={avatarFileRef}
         type="file"
@@ -156,8 +177,14 @@ export function CompanionVideoPanel({
       />
 
       {/* Webcam PiP overlay */}
-      {webcamStream && (
-        <div className="absolute bottom-6 right-6 w-[180px] h-[240px] rounded-2xl overflow-hidden border-2 border-white/20 shadow-2xl bg-black">
+      {webcamStream && !isFullScreenCamera && (
+        <div
+          className={`absolute rounded-2xl overflow-hidden border-2 border-white/15 shadow-2xl bg-black z-10 transition-all duration-500 ${
+            hasTranscriptContent
+              ? 'top-4 right-4 w-[120px] h-[160px]'
+              : 'bottom-6 right-6 w-[160px] h-[220px]'
+          }`}
+        >
           <video
             ref={videoRef}
             autoPlay
@@ -168,8 +195,12 @@ export function CompanionVideoPanel({
         </div>
       )}
 
-      {/* Connection status badge */}
-      <div className="absolute top-4 right-4 flex items-center gap-2 px-3 py-1.5 rounded-full bg-black/40 backdrop-blur-sm">
+      {/* Connection status badge - top right (moved left when webcam PiP shows) */}
+      <div
+        className={`absolute top-4 flex items-center gap-2 px-3 py-1.5 rounded-full bg-black/40 backdrop-blur-sm z-10 ${
+          webcamStream && !isFullScreenCamera ? 'left-4' : 'right-4'
+        }`}
+      >
         <span
           className={`w-2 h-2 rounded-full ${
             status === 'connected'
@@ -181,7 +212,7 @@ export function CompanionVideoPanel({
               : 'bg-gray-500'
           }`}
         />
-        <span className="text-white/60 text-xs">{status}</span>
+        <span className="text-white/50 text-xs">{status}</span>
       </div>
     </div>
   )

desktop/src/components/companion/ScenarioSelector.tsx

@@ -0,0 +1,65 @@
+import { useCallback } from 'react'
+import { useTranslation } from '../../i18n'
+import { useCompanionStore, SCENARIOS } from '../../stores/companionStore'
+
+export function ScenarioSelector() {
+  const t = useTranslation()
+  const open = useCompanionStore((s) => s.scenarioPanelOpen)
+  const currentScenario = useCompanionStore((s) => s.scenario)
+  const setScenario = useCompanionStore((s) => s.setScenario)
+  const setScenarioPanelOpen = useCompanionStore((s) => s.setScenarioPanelOpen)
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      setScenario(id)
+    },
+    [setScenario],
+  )
+
+  const handleClose = useCallback(() => {
+    setScenarioPanelOpen(false)
+  }, [setScenarioPanelOpen])
+
+  if (!open) return null
+
+  return (
+    <div className="absolute inset-0 z-40 flex items-start justify-center pt-20">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/40 backdrop-sm" onClick={handleClose} />
+
+      {/* Grid panel */}
+      <div className="relative w-[420px] max-h-[70vh] p-5 rounded-2xl bg-black/60 backdrop-blur-xl border border-white/10 shadow-2xl">
+        <h3 className="text-white/70 text-sm font-medium mb-4 text-center">
+          {t('companion.scenario.select')}
+        </h3>
+
+        <div className="grid grid-cols-3 gap-2.5">
+          {SCENARIOS.map((scenario) => {
+            const isActive = currentScenario === scenario.id
+            return (
+              <button
+                key={scenario.id}
+                type="button"
+                onClick={() => handleSelect(scenario.id)}
+                className={`flex flex-col items-center gap-1.5 p-3 rounded-xl transition-all border ${
+                  isActive
+                    ? 'bg-orange-500/20 border-orange-400/40'
+                    : 'bg-white/[0.04] border-transparent hover:bg-white/[0.08]'
+                }`}
+              >
+                <span
+                  className={`material-symbols-outlined text-2xl ${
+                    isActive ? 'text-orange-300' : 'text-white/50'
+                  }`}
+                >
+                  {scenario.icon}
+                </span>
+                <span className="text-white/80 text-xs font-medium">{scenario.name}</span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

desktop/src/components/companion/ScreenShareDialog.tsx

@@ -0,0 +1,90 @@
+import { useState, useCallback } from 'react'
+import { useTranslation } from '../../i18n'
+import { useCompanionStore } from '../../stores/companionStore'
+
+interface ScreenShareDialogProps {
+  onStartScreenShare: () => void
+}
+
+export function ScreenShareDialog({ onStartScreenShare }: ScreenShareDialogProps) {
+  const t = useTranslation()
+  const open = useCompanionStore((s) => s.screenShareDialogOpen)
+  const setScreenShareDialogOpen = useCompanionStore((s) => s.setScreenShareDialogOpen)
+  const [sourceType, setSourceType] = useState<'screen' | 'window'>('screen')
+
+  const handleCancel = useCallback(() => {
+    setScreenShareDialogOpen(false)
+  }, [setScreenShareDialogOpen])
+
+  const handleStart = useCallback(() => {
+    setScreenShareDialogOpen(false)
+    onStartScreenShare()
+  }, [setScreenShareDialogOpen, onStartScreenShare])
+
+  if (!open) return null
+
+  return (
+    <div className="absolute inset-0 z-40 flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-sm" onClick={handleCancel} />
+
+      {/* Dialog */}
+      <div className="relative w-[340px] p-5 rounded-2xl bg-black/70 backdrop-blur-xl border border-white/10 shadow-2xl">
+        <h3 className="text-white/80 text-sm font-medium mb-4 text-center">
+          {t('companion.screenShare.dialog.title')}
+        </h3>
+
+        {/* Source selector */}
+        <div className="mb-5 flex gap-2">
+          <button
+            type="button"
+            onClick={() => setSourceType('screen')}
+            className={`flex-1 flex flex-col items-center gap-1.5 p-3 rounded-xl border transition-all ${
+              sourceType === 'screen'
+                ? 'bg-orange-500/20 border-orange-400/40'
+                : 'bg-white/[0.04] border-transparent hover:bg-white/[0.08]'
+            }`}
+          >
+            <span className="material-symbols-outlined text-xl text-white/60">monitor</span>
+            <span className="text-white/70 text-xs">{t('companion.screenShare.dialog.entireScreen')}</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setSourceType('window')}
+            className={`flex-1 flex flex-col items-center gap-1.5 p-3 rounded-xl border transition-all ${
+              sourceType === 'window'
+                ? 'bg-orange-500/20 border-orange-400/40'
+                : 'bg-white/[0.04] border-transparent hover:bg-white/[0.08]'
+            }`}
+          >
+            <span className="material-symbols-outlined text-xl text-white/60">window</span>
+            <span className="text-white/70 text-xs">{t('companion.screenShare.dialog.window')}</span>
+          </button>
+        </div>
+
+        {/* Privacy notice */}
+        <p className="text-white/25 text-[11px] leading-relaxed mb-5">
+          {t('companion.screenShare.dialog.privacy')}
+        </p>
+
+        {/* Action buttons */}
+        <div className="flex gap-2.5">
+          <button
+            type="button"
+            onClick={handleCancel}
+            className="flex-1 h-9 rounded-xl bg-white/5 text-white/50 hover:bg-white/10 hover:text-white/70 transition-all text-xs font-medium"
+          >
+            {t('companion.screenShare.dialog.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={handleStart}
+            className="flex-1 h-9 rounded-xl bg-orange-500/30 text-orange-200 hover:bg-orange-500/50 transition-all text-xs font-medium"
+          >
+            {t('companion.screenShare.dialog.start')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

desktop/src/hooks/useCameraDevices.ts

@@ -0,0 +1,66 @@
+import { useState, useCallback } from 'react'
+
+export function useCameraDevices() {
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])
+  const [activeDeviceId, setActiveDeviceId] = useState<string | null>(null)
+
+  const enumerateCameras = useCallback(async () => {
+    try {
+      const allDevices = await navigator.mediaDevices.enumerateDevices()
+      const videoInputs = allDevices.filter((d) => d.kind === 'videoinput')
+      setDevices(videoInputs)
+      return videoInputs
+    } catch {
+      return []
+    }
+  }, [])
+
+  const switchCamera = useCallback(
+    async (deviceId: string): Promise<MediaStream | null> => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            deviceId: { exact: deviceId },
+            width: { ideal: 640 },
+            height: { ideal: 480 },
+          },
+          audio: false,
+        })
+        setActiveDeviceId(deviceId)
+        return stream
+      } catch (err) {
+        console.error('Failed to switch camera:', err)
+        return null
+      }
+    },
+    [],
+  )
+
+  const getStreamForFacingMode = useCallback(
+    async (facingMode: 'user' | 'environment'): Promise<MediaStream | null> => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode,
+            width: { ideal: 640 },
+            height: { ideal: 480 },
+          },
+          audio: false,
+        })
+        return stream
+      } catch (err) {
+        console.error('Failed to get camera with facing mode:', err)
+        return null
+      }
+    },
+    [],
+  )
+
+  return {
+    devices,
+    activeDeviceId,
+    enumerateCameras,
+    switchCamera,
+    getStreamForFacingMode,
+  }
+}

desktop/src/hooks/useCompanionWebSocket.ts

@@ -57,20 +57,11 @@ export function useCompanionWebSocket(callbacks: Callbacks) {
     wsRef.current = ws
 
     ws.onopen = () => {
-      reconnectAttemptRef.current = 0
       setStatus('connected')
     }
 
     ws.onclose = () => {
-      if (!manualDisconnectRef.current) {
-        // Auto reconnect with exponential backoff
-        const attempt = reconnectAttemptRef.current
-        const delay = Math.min(1000 * Math.pow(2, attempt), 30000)
-        reconnectAttemptRef.current = attempt + 1
-        reconnectTimerRef.current = setTimeout(() => {
-          connect()
-        }, delay)
-      }
+      // No auto-reconnect — user clicks "call" to retry
       setStatus('disconnected')
     }
 

desktop/src/hooks/useScreenShare.ts

@@ -0,0 +1,115 @@
+import { useState, useRef, useCallback } from 'react'
+
+export function useScreenShare() {
+  const [stream, setStream] = useState<MediaStream | null>(null)
+  const [isSharing, setIsSharing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const streamRef = useRef<MediaStream | null>(null)
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+
+  const startScreenShare = useCallback(async () => {
+    try {
+      const mediaStream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: false,
+      })
+
+      streamRef.current = mediaStream
+      setStream(mediaStream)
+      setIsSharing(true)
+      setError(null)
+
+      // Create hidden video + canvas for frame capture
+      const video = document.createElement('video')
+      video.srcObject = mediaStream
+      video.playsInline = true
+      video.muted = true
+      video.autoplay = true
+      videoRef.current = video
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 640
+      canvas.height = 480
+      canvasRef.current = canvas
+
+      await video.play()
+
+      // When user stops sharing via the browser's built-in "Stop sharing" button
+      mediaStream.getVideoTracks()[0]?.addEventListener('ended', () => {
+        stopScreenShare()
+      })
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      // User cancelled the permission dialog
+      if (message.includes('cancelled') || message.includes('Permission denied')) {
+        setError(null)
+        return
+      }
+      setError(`Screen share failed: ${message}`)
+    }
+  }, [])
+
+  const stopScreenShare = useCallback(() => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop())
+      streamRef.current = null
+    }
+    videoRef.current = null
+    canvasRef.current = null
+    setStream(null)
+    setIsSharing(false)
+  }, [])
+
+  const captureFrame = useCallback(async (): Promise<string | null> => {
+    const video = videoRef.current
+    const canvas = canvasRef.current
+    if (!video || !canvas || video.readyState < 2) return null
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return null
+
+    // Maintain aspect ratio while fitting to canvas
+    const vw = video.videoWidth
+    const vh = video.videoHeight
+    if (vw === 0 || vh === 0) return null
+
+    const scale = Math.min(canvas.width / vw, canvas.height / vh)
+    const dw = vw * scale
+    const dh = vh * scale
+    const dx = (canvas.width - dw) / 2
+    const dy = (canvas.height - dh) / 2
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.drawImage(video, dx, dy, dw, dh)
+
+    return new Promise((resolve) => {
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            resolve(null)
+            return
+          }
+          const reader = new FileReader()
+          reader.onloadend = () => {
+            const result = reader.result as string
+            resolve(result.split(',')[1] ?? null)
+          }
+          reader.onerror = () => resolve(null)
+          reader.readAsDataURL(blob)
+        },
+        'image/jpeg',
+        0.7,
+      )
+    })
+  }, [])
+
+  return {
+    stream,
+    isSharing,
+    error,
+    captureFrame,
+    startScreenShare,
+    stopScreenShare,
+  }
+}

desktop/src/i18n/locales/en.ts

@@ -79,6 +79,27 @@ export const en = {
   'companion.speaking': 'Speaking...',
   'companion.inputPlaceholder': 'Type a message...',
   'companion.send': 'Send',
+  'companion.scenario.select': 'Select Scenario',
+  'companion.scenario.simultaneous': 'Simultaneous Interpretation',
+  'companion.scenario.interview': 'Mock Interview',
+  'companion.scenario.english': 'English Practice',
+  'companion.scenario.singing': 'Singing',
+  'companion.scenario.idiom': 'Idiom Chain',
+  'companion.scenario.mood': 'Mood Treehole',
+  'companion.subtitle': 'Subtitles',
+  'companion.screenShare.start': 'Share Screen',
+  'companion.screenShare.stop': 'Stop Sharing',
+  'companion.screenShare.dialog.title': 'Start screen recording or sharing?',
+  'companion.screenShare.dialog.entireScreen': 'Entire Screen',
+  'companion.screenShare.dialog.window': 'Application Window',
+  'companion.screenShare.dialog.cancel': 'Cancel',
+  'companion.screenShare.dialog.start': 'Start',
+  'companion.screenShare.dialog.privacy': 'When sharing, recording, or casting content, the app can access everything displayed on your screen or played on your device. Please be careful not to leak passwords, payment info, messages, or other sensitive content.',
+  'companion.flipCamera': 'Flip Camera',
+  'companion.torch': 'Flashlight',
+  'companion.hangUp': 'Hang Up',
+  'companion.call': 'Call',
+  'companion.speaker': 'Speaker',
   'sidebar.confirmDelete': 'Delete this session? This cannot be undone.',
   'sidebar.batchManage': 'Batch manage',
   'sidebar.batchSelectedCount': '{count} selected',

desktop/src/i18n/locales/zh.ts

@@ -60,7 +60,7 @@ export const zh: Record<TranslationKey, string> = {
   'sidebar.worktree': 'worktree',
   'sidebar.sessionRunning': '会话运行中',
   'sidebar.missingDir': '目录缺失',
-  'sidebar.companion': 'AI 伴侣',
+  'sidebar.companion': '视频通话',
 
   // ─── Companion ──────────────────────────────────────
   'companion.connect': '连接',
@@ -81,6 +81,27 @@ export const zh: Record<TranslationKey, string> = {
   'companion.speaking': '说话中...',
   'companion.inputPlaceholder': '输入消息...',
   'companion.send': '发送',
+  'companion.scenario.select': '选择场景',
+  'companion.scenario.simultaneous': '同声传译',
+  'companion.scenario.interview': '模拟面试',
+  'companion.scenario.english': '英语陪练',
+  'companion.scenario.singing': '唱歌',
+  'companion.scenario.idiom': '成语接龙',
+  'companion.scenario.mood': '心情树洞',
+  'companion.subtitle': '字幕',
+  'companion.screenShare.start': '屏幕共享',
+  'companion.screenShare.stop': '停止共享',
+  'companion.screenShare.dialog.title': '要开始录制或投放吗？',
+  'companion.screenShare.dialog.entireScreen': '整个屏幕',
+  'companion.screenShare.dialog.window': '特定应用窗口',
+  'companion.screenShare.dialog.cancel': '取消',
+  'companion.screenShare.dialog.start': '开始',
+  'companion.screenShare.dialog.privacy': '在分享、录制或投放内容时，应用可以访问屏幕上显示或设备中播放的所有内容。请务必小心操作，谨防密码、付款信息、消息、照片等内容泄露。',
+  'companion.flipCamera': '翻转摄像头',
+  'companion.torch': '手电筒',
+  'companion.hangUp': '挂断',
+  'companion.call': '呼叫',
+  'companion.speaker': '扬声器',
   'sidebar.confirmDelete': '确定要删除这个会话吗？此操作不可撤销。',
   'sidebar.batchManage': '批量管理',
   'sidebar.batchSelectedCount': '已选 {count} 个',

desktop/src/pages/Companion.tsx

@@ -4,9 +4,14 @@ import { useCompanionWebSocket } from '../hooks/useCompanionWebSocket'
 import { useWebcam } from '../hooks/useWebcam'
 import { useMicrophone } from '../hooks/useMicrophone'
 import { useCompanionAudio } from '../hooks/useCompanionAudio'
+import { useScreenShare } from '../hooks/useScreenShare'
+import { useCameraDevices } from '../hooks/useCameraDevices'
 import { CompanionVideoPanel } from '../components/companion/CompanionVideoPanel'
 import { CompanionTranscript } from '../components/companion/CompanionTranscript'
 import { CompanionControls } from '../components/companion/CompanionControls'
+import { CompanionTopBar } from '../components/companion/CompanionTopBar'
+import { ScenarioSelector } from '../components/companion/ScenarioSelector'
+import { ScreenShareDialog } from '../components/companion/ScreenShareDialog'
 
 export function Companion() {
   const status = useCompanionStore((s) => s.status)
@@ -16,12 +21,24 @@ export function Companion() {
   const fullTranscript = useCompanionStore((s) => s.fullTranscript)
   const micEnabled = useCompanionStore((s) => s.micEnabled)
   const cameraEnabled = useCompanionStore((s) => s.cameraEnabled)
+  const cameraFacingMode = useCompanionStore((s) => s.cameraFacingMode)
   const error = useCompanionStore((s) => s.error)
+  const scenario = useCompanionStore((s) => s.scenario)
+  const statusText = useCompanionStore((s) => s.statusText)
   const setMicEnabled = useCompanionStore((s) => s.setMicEnabled)
   const setCameraEnabled = useCompanionStore((s) => s.setCameraEnabled)
+  const setCameraFacingMode = useCompanionStore((s) => s.setCameraFacingMode)
+  const setCameraDevices = useCompanionStore((s) => s.setCameraDevices)
+  const setActiveCameraLabel = useCompanionStore((s) => s.setActiveCameraLabel)
+  const setCameraFullscreen = useCompanionStore((s) => s.setCameraFullscreen)
+  const setScreenShareStream = useCompanionStore((s) => s.setScreenShareStream)
+  const setScreenShareDialogOpen = useCompanionStore((s) => s.setScreenShareDialogOpen)
+  const setStatusText = useCompanionStore((s) => s.setStatusText)
   const reset = useCompanionStore((s) => s.reset)
   const frameIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const screenShareIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
+  // Audio playback
   const companionAudio = useCompanionAudio()
   const onAudioReceived = useCallback(
     (data: ArrayBuffer) => {
@@ -33,11 +50,50 @@ export function Companion() {
     companionAudio.flush()
   }, [companionAudio])
 
+  // WebSocket
   const ws = useCompanionWebSocket({ onAudioReceived, onDone })
-  const webcam = useWebcam(ws.connected && cameraEnabled)
+
+  // Camera devices
+  const cameraDevices = useCameraDevices()
+
+  // Screen share
+  const screenShare = useScreenShare()
+
+  // Webcam runs independently (toggle on/off without needing connection)
+  const webcam = useWebcam(cameraEnabled)
+  // Mic only runs when connected (sends audio over WS)
   useMicrophone(ws.connected && micEnabled, ws.sendAudio)
 
-  // Periodic frame capture when connected and camera enabled
+  // Enumerate cameras when camera is enabled
+  useEffect(() => {
+    if (cameraEnabled) {
+      cameraDevices.enumerateCameras().then((devices) => {
+        setCameraDevices(devices)
+        if (devices.length > 0) {
+          setActiveCameraLabel(devices[0]?.label ?? null)
+        }
+      })
+    }
+  }, [cameraEnabled, cameraDevices, setCameraDevices, setActiveCameraLabel])
+
+  // Update status text based on state
+  useEffect(() => {
+    if (status === 'connected') {
+      if (generating) {
+        setStatusText('AI 说话中...')
+      } else if (speaking) {
+        setStatusText('请说话')
+      } else {
+        setStatusText('你可以开始说话')
+      }
+    } else if (status === 'connecting') {
+      setStatusText('连接中...')
+    } else {
+      setStatusText('')
+    }
+  }, [status, generating, speaking, setStatusText])
+
+  // Periodic webcam frame capture (only send when connected)
   useEffect(() => {
     if (ws.connected && cameraEnabled) {
       frameIntervalRef.current = setInterval(async () => {
@@ -60,6 +116,41 @@ export function Companion() {
     }
   }, [ws.connected, cameraEnabled, webcam, ws])
 
+  // Periodic screen share frame capture
+  useEffect(() => {
+    if (ws.connected && screenShare.isSharing) {
+      screenShareIntervalRef.current = setInterval(async () => {
+        const frame = await screenShare.captureFrame()
+        if (frame) {
+          ws.sendFrame(frame)
+        }
+      }, 1000)
+    } else {
+      if (screenShareIntervalRef.current) {
+        clearInterval(screenShareIntervalRef.current)
+        screenShareIntervalRef.current = null
+      }
+    }
+    return () => {
+      if (screenShareIntervalRef.current) {
+        clearInterval(screenShareIntervalRef.current)
+        screenShareIntervalRef.current = null
+      }
+    }
+  }, [ws.connected, screenShare.isSharing, screenShare, ws])
+
+  // Send scenario context when connecting
+  useEffect(() => {
+    if (ws.connected && scenario) {
+      ws.sendText(`[Scenario: ${scenario}]`)
+    }
+  }, [ws.connected]) // only send on connect
+
+  // Sync screen share stream to store
+  useEffect(() => {
+    setScreenShareStream(screenShare.stream)
+  }, [screenShare.stream, setScreenShareStream])
+
   const handleSendText = useCallback(
     (text: string) => {
       ws.sendText(text)
@@ -67,7 +158,6 @@ export function Companion() {
     [ws],
   )
 
-  // Resume audio context on user interaction
   const handleResumeAudio = useCallback(() => {
     companionAudio.resume()
   }, [companionAudio])
@@ -77,26 +167,68 @@ export function Companion() {
   }, [micEnabled, setMicEnabled])
 
   const handleToggleCamera = useCallback(() => {
-    setCameraEnabled(!cameraEnabled)
-  }, [cameraEnabled, setCameraEnabled])
+    const next = !cameraEnabled
+    setCameraEnabled(next)
+    // When camera turns on, show as fullscreen background
+    if (next) {
+      setCameraFullscreen(true)
+    } else {
+      setCameraFullscreen(false)
+    }
+  }, [cameraEnabled, setCameraEnabled, setCameraFullscreen])
+
+  const handleFlipCamera = useCallback(async () => {
+    const nextMode = cameraFacingMode === 'user' ? 'environment' : 'user'
+    setCameraFacingMode(nextMode)
+    await cameraDevices.getStreamForFacingMode(nextMode)
+  }, [cameraFacingMode, setCameraFacingMode, cameraDevices])
+
+  const handleScreenShareClick = useCallback(() => {
+    if (screenShare.isSharing) {
+      screenShare.stopScreenShare()
+    } else {
+      setScreenShareDialogOpen(true)
+    }
+  }, [screenShare, setScreenShareDialogOpen])
+
+  const handleStartScreenShare = useCallback(async () => {
+    await screenShare.startScreenShare()
+  }, [screenShare])
 
   return (
     <div className="relative h-full w-full overflow-hidden bg-black">
-      {/* Video background + PiP */}
+      {/* Video background + content */}
       <CompanionVideoPanel
         webcamStream={webcam.stream}
         speaking={speaking}
         generating={generating}
         status={status}
+        onFlipCamera={handleFlipCamera}
       />
 
+      {/* Top bar with scenario selector + subtitle toggle */}
+      <CompanionTopBar />
+
+      {/* Scenario selection panel overlay */}
+      <ScenarioSelector />
+
+      {/* Screen share dialog overlay */}
+      <ScreenShareDialog onStartScreenShare={handleStartScreenShare} />
+
       {/* Error overlay */}
       {error && (
-        <div className="absolute top-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
+        <div className="absolute top-14 left-1/2 -translate-x-1/2 px-4 py-2 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300 text-sm z-20">
           {error}
         </div>
       )}
 
+      {/* Status text bar */}
+      {statusText && (
+        <div className="absolute bottom-[88px] left-1/2 -translate-x-1/2 z-10">
+          <span className="text-white/30 text-xs tracking-widest">{statusText}</span>
+        </div>
+      )}
+
       {/* Transcript + text input */}
       <CompanionTranscript
         transcript={transcript}
@@ -106,17 +238,22 @@ export function Companion() {
         disabled={status !== 'connected'}
       />
 
-      {/* Controls */}
+      {/* Bottom controls */}
       <CompanionControls
         status={status}
         micEnabled={micEnabled}
         cameraEnabled={cameraEnabled}
         generating={generating}
+        isSharing={screenShare.isSharing}
         onToggleMic={handleToggleMic}
         onToggleCamera={handleToggleCamera}
+        onScreenShareClick={handleScreenShareClick}
         onConnect={ws.connect}
         onDisconnect={() => {
           ws.disconnect()
+          if (screenShare.isSharing) {
+            screenShare.stopScreenShare()
+          }
           reset()
         }}
         onStop={ws.sendStop}

desktop/src/stores/companionStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import type { CompanionStatus } from '../types/companion'
+import type { CompanionStatus, ScenarioOption } from '../types/companion'
 
 const AVATAR_KEY = 'companion-avatar-url'
 const BACKGROUND_KEY = 'companion-background-url'
@@ -24,6 +24,57 @@ function persist(key: string, value: string | null) {
   }
 }
 
+export const SCENARIOS: ScenarioOption[] = [
+  {
+    id: 'interview',
+    name: '模拟面试',
+    nameEn: 'Mock Interview',
+    icon: 'work_history',
+    description: 'AI 模拟考官提问，支持上传简历',
+    descriptionEn: 'AI mock interviewer with resume support',
+  },
+  {
+    id: 'english',
+    name: '英语陪练',
+    nameEn: 'English Practice',
+    icon: 'translate',
+    description: '全英文对话，提升口语能力',
+    descriptionEn: 'Full English conversation practice',
+  },
+  {
+    id: 'singing',
+    name: '唱歌',
+    nameEn: 'Singing',
+    icon: 'music_note',
+    description: 'AI 陪你唱歌互动',
+    descriptionEn: 'Sing with AI',
+  },
+  {
+    id: 'translate',
+    name: '同声传译',
+    nameEn: 'Simultaneous Interpretation',
+    icon: 'language',
+    description: '实时翻译多国语言',
+    descriptionEn: 'Real-time multi-language translation',
+  },
+  {
+    id: 'idiom',
+    name: '成语接龙',
+    nameEn: 'Idiom Chain',
+    icon: 'abc',
+    description: '文字游戏互动',
+    descriptionEn: 'Chinese idiom word game',
+  },
+  {
+    id: 'mood',
+    name: '心情树洞',
+    nameEn: 'Mood Treehole',
+    icon: 'forest',
+    description: '情感陪伴与倾诉',
+    descriptionEn: 'Emotional companion',
+  },
+]
+
 interface CompanionStore {
   status: CompanionStatus
   serverUrl: string
@@ -38,6 +89,30 @@ interface CompanionStore {
   avatarUrl: string | null
   backgroundUrl: string | null
 
+  // New: scenario
+  scenario: string | null
+  scenarioPanelOpen: boolean
+
+  // New: subtitle
+  subtitleEnabled: boolean
+
+  // New: camera devices
+  cameraFacingMode: 'user' | 'environment'
+  cameraDevices: MediaDeviceInfo[]
+  activeCameraLabel: string | null
+
+  // New: screen share
+  screenShareStream: MediaStream | null
+
+  // New: screen share dialog
+  screenShareDialogOpen: boolean
+
+  // New: status text
+  statusText: string
+
+  // New: fullscreen camera mode
+  cameraFullscreen: boolean
+
   setServerUrl: (url: string) => void
   setVoiceName: (name: string) => void
   setStatus: (status: CompanionStatus) => void
@@ -52,6 +127,18 @@ interface CompanionStore {
   setAvatarUrl: (url: string | null) => void
   setBackgroundUrl: (url: string | null) => void
   reset: () => void
+
+  // New actions
+  setScenario: (id: string | null) => void
+  setScenarioPanelOpen: (open: boolean) => void
+  setSubtitleEnabled: (enabled: boolean) => void
+  setCameraFacingMode: (mode: 'user' | 'environment') => void
+  setCameraDevices: (devices: MediaDeviceInfo[]) => void
+  setActiveCameraLabel: (label: string | null) => void
+  setScreenShareStream: (stream: MediaStream | null) => void
+  setScreenShareDialogOpen: (open: boolean) => void
+  setStatusText: (text: string) => void
+  setCameraFullscreen: (fullscreen: boolean) => void
 }
 
 const DEFAULT_SERVER_URL = 'ws://127.0.0.1:8889/ws/companion'
@@ -70,6 +157,18 @@ export const useCompanionStore = create<CompanionStore>((set) => ({
   avatarUrl: loadPersisted(AVATAR_KEY),
   backgroundUrl: loadPersisted(BACKGROUND_KEY),
 
+  // New defaults
+  scenario: null,
+  scenarioPanelOpen: false,
+  subtitleEnabled: true,
+  cameraFacingMode: 'user',
+  cameraDevices: [],
+  activeCameraLabel: null,
+  screenShareStream: null,
+  screenShareDialogOpen: false,
+  statusText: '你可以开始说话',
+  cameraFullscreen: false,
+
   setServerUrl: (url) => set({ serverUrl: url }),
   setVoiceName: (name) => set({ voiceName: name }),
   setStatus: (status) => set({ status, error: status === 'error' ? undefined : null }),
@@ -98,5 +197,23 @@ export const useCompanionStore = create<CompanionStore>((set) => ({
       generating: false,
       transcript: '',
       error: null,
+      scenario: null,
+      subtitleEnabled: true,
+      cameraFacingMode: 'user',
+      screenShareStream: null,
+      statusText: '你可以开始说话',
+      cameraFullscreen: false,
     }),
+
+  // New action implementations
+  setScenario: (id) => set({ scenario: id, scenarioPanelOpen: false }),
+  setScenarioPanelOpen: (open) => set({ scenarioPanelOpen: open }),
+  setSubtitleEnabled: (enabled) => set({ subtitleEnabled: enabled }),
+  setCameraFacingMode: (mode) => set({ cameraFacingMode: mode }),
+  setCameraDevices: (devices) => set({ cameraDevices: devices }),
+  setActiveCameraLabel: (label) => set({ activeCameraLabel: label }),
+  setScreenShareStream: (stream) => set({ screenShareStream: stream }),
+  setScreenShareDialogOpen: (open) => set({ screenShareDialogOpen: open }),
+  setStatusText: (text) => set({ statusText: text }),
+  setCameraFullscreen: (fullscreen) => set({ cameraFullscreen: fullscreen }),
 }))

desktop/src/types/companion.ts

@@ -1,5 +1,14 @@
 export type CompanionStatus = 'disconnected' | 'connecting' | 'connected' | 'error'
 
+export type ScenarioOption = {
+  id: string
+  name: string
+  nameEn: string
+  icon: string
+  description: string
+  descriptionEn: string
+}
+
 export type CompanionConfig = {
   serverUrl: string
   voiceName: string