chore: omni script

desktop/scripts/start-omni.sh

@@ -0,0 +1,55 @@
+#!/usr/bin/env bash
+# start-omni.sh — Start llama-server + omni-adapter for Companion video call
+# Usage: bash scripts/start-omni.sh
+set -e
+
+LLAMA_DIR="$HOME/Code/Llm/llama.cpp-omni"
+MODEL_DIR="$HOME/Code/Llm/MiniCPM-o-4_5-gguf"
+LLAMA_PORT=8025
+ADAPTER_PORT=9301
+
+echo "=== Starting llama-server (MiniCPM-o-4_5) ==="
+"$LLAMA_DIR/build/bin/llama-server" \
+  --host 0.0.0.0 --port "$LLAMA_PORT" \
+  -m "$MODEL_DIR/MiniCPM-o-4_5-Q4_K_M.gguf" \
+  --mmproj "$MODEL_DIR/vision/MiniCPM-o-4_5-vision-F16.gguf" \
+  --model-vocoder "$MODEL_DIR/tts/MiniCPM-o-4_5-tts-F16.gguf" \
+  -ngl 99 \
+  --temp 0.7 \
+  --repeat-penalty 1.15 \
+  --ctx-size 2048 \
+  --no-kv-offload \
+  --no-mmproj-offload &
+LLAMA_PID=$!
+echo "llama-server PID: $LLAMA_PID"
+
+# Wait for server to be ready
+echo "Waiting for llama-server..."
+for i in $(seq 1 30); do
+  if curl -s "http://localhost:$LLAMA_PORT/health" > /dev/null 2>&1; then
+    echo "llama-server ready!"
+    break
+  fi
+  sleep 2
+done
+
+echo ""
+echo "=== Starting omni-adapter ==="
+OMNI_PORT="$ADAPTER_PORT" LLAMA_SERVER="http://localhost:$LLAMA_PORT" \
+  OMNI_MODEL_DIR="$MODEL_DIR" \
+  OMNI_TMP="/tmp/omni-adapter" \
+  bun run "$(dirname "$0")/../sidecars/omni-adapter.ts" &
+ADAPTER_PID=$!
+echo "omni-adapter PID: $ADAPTER_PID"
+
+echo ""
+echo "=== Ready ==="
+echo "llama-server: http://localhost:$LLAMA_PORT"
+echo "omni-adapter: http://localhost:$ADAPTER_PORT"
+echo ""
+echo "Then start the desktop app and set backendHost to http://localhost:$ADAPTER_PORT"
+echo ""
+echo "Press Ctrl+C to stop all services"
+
+trap "kill $LLAMA_PID $ADAPTER_PID 2>/dev/null; echo 'stopped'" EXIT
+wait

desktop/sidecars/omni-adapter.ts

@@ -0,0 +1,496 @@
+/**
+ * omni-adapter.ts — Bridge between VersperClaw Companion frontend and
+ *     llama.cpp-omni's llama-server.
+ *
+ * Uses Omni Streaming API (/v1/stream/*) following the exact protocol
+ * from MiniCPM-o-Demo:
+ *   omni_init → update_session_config → prefill(cnt) → decode(round)
+ *
+ * TTS output: polls round_N/tts_wav/wav_N.wav, sends as Float32 PCM base64.
+ *
+ * Usage:
+ *   OMNI_PORT=9301 LLAMA_SERVER=http://localhost:8025 bun run sidecars/omni-adapter.ts
+ *
+ * Env:
+ *   OMNI_PORT=9301  LLAMA_SERVER=http://localhost:8025  OMNI_MODEL_DIR=...
+ *   OMNI_TMP=/tmp/omni-adapter
+ */
+
+import { serve } from 'bun'
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync, unlinkSync } from 'node:fs'
+import { randomBytes } from 'crypto'
+
+// ─── Config ──────────────────────────────────────────────────
+
+const PORT = parseInt(process.env.OMNI_PORT || '9301')
+const LLAMA = (process.env.LLAMA_SERVER || 'http://localhost:8025').replace(/\/+$/, '')
+const MODEL_DIR = (process.env.OMNI_MODEL_DIR || '/home/yuki/Code/Llm/MiniCPM-o-4_5-gguf').replace(/\/+$/, '')
+const TMP = process.env.OMNI_TMP || '/tmp/omni-adapter'
+const TTS_OUT = TMP + '/tts-output'
+
+// ─── Helpers ─────────────────────────────────────────────────
+
+function json(data: unknown, status = 200) {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
+  })
+}
+
+function b32() { return randomBytes(4).readUInt32BE(0).toString(36) }
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+// ─── llama-server client ─────────────────────────────────────
+
+async function llamaPost(path: string, body: unknown): Promise<Response> {
+  return fetch(`${LLAMA}${path}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+async function llamaGet(path: string): Promise<Response> {
+  return fetch(`${LLAMA}${path}`)
+}
+
+// ─── Audio utils ─────────────────────────────────────────────
+
+/** Write Float32 PCM as 16-bit mono WAV and return file path. */
+function writePcmToWav(f32: Float32Array, sampleRate: number): string {
+  const dataSize = f32.length * 2
+  const buf = Buffer.alloc(44 + dataSize)
+  let o = 0
+  const w = (s: string) => { for (let i = 0; i < s.length; i++) buf[o++] = s.charCodeAt(i) }
+  const u16 = (v: number) => { buf[o++] = v & 0xff; buf[o++] = (v >> 8) & 0xff }
+  const u32 = (v: number) => { buf[o++] = v & 0xff; buf[o++] = (v >> 8) & 0xff; buf[o++] = (v >> 16) & 0xff; buf[o++] = (v >> 24) & 0xff }
+  w('RIFF'); u32(36 + dataSize); w('WAVE'); w('fmt '); u32(16)
+  u16(1); u16(1); u32(sampleRate); u32(sampleRate * 2); u16(2); u16(16)
+  w('data'); u32(dataSize)
+  for (let i = 0; i < f32.length; i++) {
+    const s = Math.max(-1, Math.min(1, f32[i]))
+    buf.writeInt16LE(s < 0 ? s * 0x8000 : s * 0x7fff, o); o += 2
+  }
+  const fp = `${TMP}/aud_${b32()}.wav`
+  writeFileSync(fp, buf)
+  return fp
+}
+
+/** Read WAV file and return Float32 PCM data (raw samples). */
+function readWavToF32(fp: string): Float32Array | null {
+  try {
+    const buf = readFileSync(fp)
+    if (buf.length < 44) return null
+    const nSamples = Math.floor((buf.length - 44) / 2)
+    if (nSamples <= 0) return null
+    const f32 = new Float32Array(nSamples)
+    for (let i = 0; i < nSamples; i++) {
+      const s16 = buf.readInt16LE(44 + i * 2)
+      f32[i] = s16 < 0 ? s16 / 0x8000 : s16 / 0x7fff
+    }
+    return f32
+  } catch { return null }
+}
+
+function float32ToBase64(f32: Float32Array): string {
+  return Buffer.from(new Uint8Array(f32.buffer)).toString('base64')
+}
+
+/** Convert browser base64 Float32 PCM to WAV file path. */
+function pcmB64ToWav(b64: string, sr = 16000): string {
+  const raw = Buffer.from(b64, 'base64')
+  const len = Math.floor(raw.length / 4) * 4
+  const f32 = new Float32Array(len / 4)
+  for (let i = 0; i < f32.length; i++) f32[i] = raw.readFloatLE(i * 4)
+  return writePcmToWav(f32, sr)
+}
+
+/** Convert base64-encoded JPEG/PNG image to temp file path. */
+function saveImageB64(b64: string): string {
+  const fp = `${TMP}/img_${b32()}.jpg`
+  writeFileSync(fp, Buffer.from(b64, 'base64'))
+  return fp
+}
+
+// ─── Omni session state ──────────────────────────────────────
+
+let initialized = false
+let roundIdx = 0
+
+async function ensureInit(): Promise<boolean> {
+  if (initialized) return true
+  console.log('[omni] init...')
+  const res = await llamaPost('/v1/stream/omni_init', {
+    media_type: 2,
+    use_tts: true,
+    duplex_mode: false,
+    model_dir: MODEL_DIR + '/',
+    output_dir: TTS_OUT,
+  })
+  if (!res.ok) { console.error('[omni] init fail:', await res.text()); return false }
+  initialized = true
+  console.log('[omni] init ok')
+  return true
+}
+
+/**
+ * Call update_session_config to set system prompt and assistant template.
+ * This is the CRITICAL step we were missing — it sets up the model's
+ * prompt structure including <|audio_start|>/<|audio_end|> markers
+ * and the user/assistant turn template.
+ */
+async function updateSessionConfig(systemPrompt: string): Promise<boolean> {
+  const voice_clone_prompt = `<|im_start|>system\n${systemPrompt || 'You are a helpful assistant.'}\n<|audio_start|>`
+  // assistant_prompt includes behavior instructions between <|audio_end|> and <|im_end|>,
+  // matching MiniCPM-o-Demo's non-duplex format.
+  const assistant_prompt = `<|audio_end|>请认真、高质量地回复用户的问题。请用高自然度的方式和用户聊天。<|im_end|>\n<|im_start|>user\n`
+  const res = await llamaPost('/v1/stream/update_session_config', {
+    media_type: 2,
+    duplex_mode: false,
+    voice_clone_prompt,
+    assistant_prompt,
+    lang: 'zh',
+    reset_context: true,
+  })
+  if (!res.ok) { console.error('[omni] update_session_config fail:', await res.text()); return false }
+  roundIdx = 0
+  return true
+}
+
+/**
+ * Prefill user text/audio/image input.
+ * cnt starts from 0 and increments per call (following demo protocol).
+ */
+async function prefill(cnt: number, text: string, audioPath?: string, imagePath?: string): Promise<boolean> {
+  const body: Record<string, unknown> = {
+    audio_path_prefix: audioPath || '',
+    img_path_prefix: imagePath || '',
+    cnt,
+    text: text || '',
+  }
+  const res = await llamaPost('/v1/stream/prefill', body)
+  if (!res.ok) { console.error('[omni] prefill fail:', await res.text()) }
+  return res.ok
+}
+
+/**
+ * Decode (generate) with SSE streaming.
+ * Calls onText(content, stop) for each SSE event.
+ * Returns the path to the merged TTS WAV file (or null if none).
+ */
+async function decodeStream(
+  onText: (content: string, stop: boolean) => void,
+): Promise<string | null> {
+  const res = await llamaPost('/v1/stream/decode', {
+    stream: true,
+    length_penalty: 1.1,
+    round_idx: roundIdx,
+  })
+  if (!res.ok) throw new Error(`decode status ${res.status}`)
+
+  const reader = res.body!.getReader()
+  const dec = new TextDecoder()
+  let buf = ''
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    buf += dec.decode(value, { stream: true })
+    const lines = buf.split('\n')
+    buf = lines.pop() || ''
+    for (const line of lines) {
+      if (!line.startsWith('data: ')) continue
+      const p = line.slice(6).trim()
+      if (p === '[DONE]') continue
+      try {
+        const ev = JSON.parse(p)
+        if (ev.content !== undefined) onText(ev.content || '', ev.stop || false)
+      } catch { /* skip */ }
+    }
+  }
+
+  return pollTtsChunks()
+}
+
+/** Poll for TTS WAV files (incremental, following demo pattern). */
+async function pollTtsChunks(): Promise<string | null> {
+  const rounds = readdirSync(TTS_OUT).filter((e) => e.startsWith('round_')).sort()
+  if (rounds.length === 0) return null
+  const wavDir = `${TTS_OUT}/${rounds[rounds.length - 1]}/tts_wav`
+  if (!existsSync(wavDir)) return null
+
+  // Wait for generation_done.flag (up to ~30 s)
+  const flagPath = `${wavDir}/generation_done.flag`
+  for (let i = 0; i < 150; i++) {
+    if (existsSync(flagPath)) break
+    await sleep(200)
+  }
+  if (!existsSync(flagPath)) return null
+
+  // Read all wav_N.wav files
+  const files = readdirSync(wavDir)
+    .filter((f) => /^wav_\d+\.wav$/.test(f))
+    .sort()
+  if (files.length === 0) return null
+
+  // Merge into single Float32Array (original sample rate from WAV header)
+  let sampleRate = 24000
+  const chunks: Float32Array[] = []
+  for (const f of files) {
+    const buf = readFileSync(`${wavDir}/${f}`)
+    if (buf.length < 44) continue
+    const hdrSr = buf.readUInt32LE(24)
+    if (hdrSr > 0) sampleRate = hdrSr
+    const nSamples = Math.floor((buf.length - 44) / 2)
+    if (nSamples <= 0) continue
+    const f32 = new Float32Array(nSamples)
+    for (let i = 0; i < nSamples; i++) {
+      const s16 = buf.readInt16LE(44 + i * 2)
+      f32[i] = s16 < 0 ? s16 / 0x8000 : s16 / 0x7fff
+    }
+    chunks.push(f32)
+  }
+  if (chunks.length === 0) return null
+
+  const total = chunks.reduce((s, c) => s + c.length, 0)
+  const merged = new Float32Array(total)
+  let offset = 0
+  for (const c of chunks) { merged.set(c, offset); offset += c.length }
+
+  // Write merged WAV
+  const outPath = writePcmToWav(merged, sampleRate)
+  return outPath
+}
+
+// ─── Parse frontend messages ─────────────────────────────────
+
+interface ParsedMsgs {
+  systemPrompt: string
+  userText: string
+  audioB64: string | null
+  imageB64: string | null
+}
+
+/** Extract system prompt + last user message content from frontend messages array. */
+function parseMessages(messages: any[]): ParsedMsgs {
+  let systemPrompt = ''
+  let lastUser: any = null
+
+  for (const msg of messages) {
+    if (msg?.role === 'system' && typeof msg.content === 'string') {
+      systemPrompt = msg.content
+    }
+    if (msg?.role === 'user') lastUser = msg
+  }
+
+  if (!lastUser) return { systemPrompt, userText: '', audioB64: null, imageB64: null }
+
+  const content = lastUser.content
+  if (!content) return { systemPrompt, userText: '', audioB64: null, imageB64: null }
+
+  if (typeof content === 'string') {
+    return { systemPrompt, userText: content, audioB64: null, imageB64: null }
+  }
+
+  if (Array.isArray(content)) {
+    let text = '', audioB64: string | null = null, imageB64: string | null = null
+    for (const item of content) {
+      if (item.type === 'text') text = item.text || ''
+      else if (item.type === 'audio') audioB64 = item.data || null
+      else if (item.type === 'image') imageB64 = item.data || null
+    }
+    return { systemPrompt, userText: text, audioB64, imageB64 }
+  }
+
+  return { systemPrompt, userText: String(content), audioB64: null, imageB64: null }
+}
+
+// ─── Chat handler (WS streaming) ─────────────────────────────
+
+async function handleChatMessage(ws: any, msg: any) {
+  const { systemPrompt, userText, audioB64, imageB64 } = parseMessages(msg.messages)
+
+  // Signal received
+  ws.send(JSON.stringify({ type: 'prefill_done' }))
+
+  try {
+    // 1. Init if needed
+    if (!await ensureInit()) {
+      ws.send(JSON.stringify({ type: 'error', error: 'omni_init failed' }))
+      return
+    }
+
+    // 2. Update session config with system prompt (resets context)
+    await updateSessionConfig(systemPrompt || msg.system_prompt || '')
+
+    // 3. Prefill user input (text + audio + image)
+    let audioPath: string | null = null
+    let imagePath: string | null = null
+
+    if (audioB64) audioPath = pcmB64ToWav(audioB64)
+    if (imageB64) imagePath = saveImageB64(imageB64)
+
+    // Always prefill text content (even empty) with cnt=0
+    const ok = await prefill(0, userText, audioPath || undefined, imagePath || undefined)
+    if (audioPath) { try { unlinkSync(audioPath) } catch {} }
+    if (imagePath) { try { unlinkSync(imagePath) } catch {} }
+    if (!ok) {
+      ws.send(JSON.stringify({ type: 'error', error: 'prefill failed' }))
+      return
+    }
+
+    // 4. Decode (streaming SSE)
+    let accumulated = ''
+
+    const ttsWav = await decodeStream((content, _stop) => {
+      // Content is incremental text segments; send directly
+      if (content) {
+        accumulated += content
+        ws.send(JSON.stringify({ type: 'chunk', text_delta: content }))
+      }
+    })
+
+    // 5. Send TTS audio if available
+    if (ttsWav) {
+      const f32 = readWavToF32(ttsWav)
+      if (f32) {
+        const audioB64 = float32ToBase64(f32)
+        ws.send(JSON.stringify({ type: 'chunk', text_delta: '', audio_data: audioB64 }))
+      }
+      try { unlinkSync(ttsWav) } catch {}
+    }
+
+    // 6. Done
+    ws.send(JSON.stringify({
+      type: 'done',
+      text: accumulated || '(empty reply)',
+      recording_session_id: null,
+    }))
+  } catch (err) {
+    console.error('[omni] error:', err)
+    ws.send(JSON.stringify({ type: 'error', error: String(err) }))
+  }
+}
+
+// ─── HTTP Server ─────────────────────────────────────────────
+
+mkdirSync(TMP, { recursive: true })
+mkdirSync(TTS_OUT, { recursive: true })
+
+console.log(`[omni] adapter on :${PORT} → llama-server ${LLAMA}`)
+console.log(`[omni] model: ${MODEL_DIR}`)
+console.log(`[omni] tmp: ${TMP}, tts-out: ${TTS_OUT}`)
+
+const app = serve({
+  port: PORT,
+  async fetch(req) {
+    const url = new URL(req.url)
+    const p = url.pathname
+
+    if (req.method === 'OPTIONS') {
+      return new Response(null, {
+        headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,POST,OPTIONS', 'Access-Control-Allow-Headers': '*' },
+      })
+    }
+
+    // GET /status
+    if (p === '/status' && req.method === 'GET') {
+      try {
+        const h = await llamaGet('/health')
+        return json({ gateway_healthy: h.ok, total_workers: 1, idle_workers: h.ok ? 1 : 0, busy_workers: 0, queue_length: 0, offline_workers: h.ok ? 0 : 1 })
+      } catch { return json({ gateway_healthy: false, total_workers: 0, idle_workers: 0, busy_workers: 0, queue_length: 0, offline_workers: 1 }) }
+    }
+
+    // GET /api/presets
+    if (p === '/api/presets' && req.method === 'GET') {
+      return json({ turnbased: [], audio_duplex: [], omni: [] })
+    }
+
+    // POST /api/chat (non-streaming)
+    if (p === '/api/chat' && req.method === 'POST') {
+      try {
+        const body = await req.json()
+        const { systemPrompt, userText, audioB64, imageB64 } = parseMessages(body.messages)
+
+        if (!await ensureInit()) return json({ error: 'init failed', success: false }, 500)
+        await updateSessionConfig(systemPrompt || body.system_prompt || '')
+
+        let audioPath: string | null = null
+        let imagePath: string | null = null
+        if (audioB64) audioPath = pcmB64ToWav(audioB64)
+        if (imageB64) imagePath = saveImageB64(imageB64)
+
+        await prefill(0, userText, audioPath || undefined, imagePath || undefined)
+        if (audioPath) { try { unlinkSync(audioPath) } catch {} }
+        if (imagePath) { try { unlinkSync(imagePath) } catch {} }
+
+        let fullText = ''
+        const ttsWav = await decodeStream((content) => { if (content) fullText += content })
+        let audioData: string | null = null
+        if (ttsWav) {
+          const f32 = readWavToF32(ttsWav)
+          if (f32) audioData = float32ToBase64(f32)
+          try { unlinkSync(ttsWav) } catch {}
+        }
+
+        return json({ text: fullText.trim() || '(empty reply)', audio_data: audioData, audio_sample_rate: audioData ? 24000 : null, recording_session_id: null, success: true })
+      } catch (err) {
+        console.error('[omni] /api/chat error:', err)
+        return json({ error: String(err), success: false }, 500)
+      }
+    }
+
+    // WebSocket /ws/chat (streaming)
+    if (p === '/ws/chat') {
+      if (app.upgrade(req)) return
+      return new Response('WS upgrade failed', { status: 400 })
+    }
+
+    // POST /omni/reset
+    if (p === '/omni/reset' && req.method === 'POST') {
+      await llamaPost('/v1/stream/reset', {}).catch(() => {})
+      initialized = false
+      return json({ success: true })
+    }
+
+    return new Response('Not found', { status: 404 })
+  },
+
+  websocket: {
+    async message(ws, raw) {
+      try {
+        const msg = JSON.parse(typeof raw === 'string' ? raw : new TextDecoder().decode(raw as BufferSource))
+
+        if (msg.messages) { await handleChatMessage(ws, msg); return }
+        if (msg.type === 'chat') { await handleChatMessage(ws, msg); return }
+
+        if (msg.type === 'init') {
+          const ok = await ensureInit()
+          ws.send(JSON.stringify({ type: 'prefill_done', ok }))
+          return
+        }
+
+        if (msg.type === 'reset') {
+          await llamaPost('/v1/stream/reset', {}).catch(() => {})
+          initialized = false
+          ws.send(JSON.stringify({ type: 'reset', ok: true }))
+          return
+        }
+
+        if (msg.type === 'break') {
+          await llamaPost('/v1/stream/break', {}).catch(() => {})
+          ws.send(JSON.stringify({ type: 'break', ok: true }))
+          return
+        }
+      } catch (err) {
+        console.error('[omni] ws error:', err)
+        ws.send(JSON.stringify({ type: 'error', error: String(err) }))
+      }
+    },
+    open() { console.log('[omni] ws connected') },
+    close() { console.log('[omni] ws disconnected') },
+  },
+})
+
+process.on('SIGINT', () => { console.log('[omni] shutting down'); process.exit(0) })
+process.on('SIGTERM', () => { console.log('[omni] shutting down'); process.exit(0) })

desktop/src/hooks/useMiniCPMoBackend.ts

@@ -0,0 +1,604 @@
+import type {
+  MiniCPMoMessage,
+  MiniCPMoServiceStatus,
+  MiniCPMoPresetMode,
+  MiniCPMoPreset,
+  MiniCPMoBackendContentItem,
+} from '../types/companion'
+
+// ─── Utility functions ported from MiniCPM-o mobile ──────
+
+function createId(prefix: string): string {
+  return `${prefix}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+function float32ToBase64(samples: Float32Array): string {
+  const bytes = new Uint8Array(samples.buffer, samples.byteOffset, samples.byteLength)
+  const chunkSize = 0x8000
+  let binary = ''
+  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+    const slice = bytes.subarray(offset, Math.min(offset + chunkSize, bytes.length))
+    binary += String.fromCharCode.apply(null, Array.from(slice) as number[])
+  }
+  return btoa(binary)
+}
+
+export function float32ToWavBlobUrl(float32: Float32Array, sampleRate: number): string {
+  const buffer = new ArrayBuffer(44 + float32.length * 2)
+  const view = new DataView(buffer)
+  function writeString(offset: number, value: string) {
+    for (let i = 0; i < value.length; i++) view.setUint8(offset + i, value.charCodeAt(i))
+  }
+  writeString(0, 'RIFF')
+  view.setUint32(4, 36 + float32.length * 2, true)
+  writeString(8, 'WAVE')
+  writeString(12, 'fmt ')
+  view.setUint32(16, 16, true)
+  view.setUint16(20, 1, true)
+  view.setUint16(22, 1, true)
+  view.setUint32(24, sampleRate, true)
+  view.setUint32(28, sampleRate * 2, true)
+  view.setUint16(32, 2, true)
+  view.setUint16(34, 16, true)
+  writeString(36, 'data')
+  view.setUint32(40, float32.length * 2, true)
+  let offset = 44
+  for (let i = 0; i < float32.length; i++) {
+    const sample = Math.max(-1, Math.min(1, float32[i] ?? 0))
+    view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true)
+    offset += 2
+  }
+  return URL.createObjectURL(new Blob([buffer], { type: 'audio/wav' }))
+}
+
+function audioBase64ToBlobUrl(base64Data: string, sampleRate = 24000): string {
+  const binary = atob(base64Data)
+  const raw = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) raw[i] = binary.charCodeAt(i)
+
+  // Check if it's already WAV
+  if (raw.length >= 44 && raw[0] === 0x52 && raw[1] === 0x49 && raw[2] === 0x46 && raw[3] === 0x46) {
+    return URL.createObjectURL(new Blob([raw], { type: 'audio/wav' }))
+  }
+
+  // Treat as float32 PCM bytes
+  const float32 = new Float32Array(raw.length / 4)
+  for (let i = 0; i < float32.length; i++) {
+    float32[i] = new Float32Array(raw.slice(i * 4, (i + 1) * 4))[0] ?? 0
+  }
+  return float32ToWavBlobUrl(float32, sampleRate)
+}
+
+function concatFloat32(chunks: Float32Array[]): Float32Array {
+  let total = 0
+  for (const chunk of chunks) total += chunk.length
+  const out = new Float32Array(total)
+  let offset = 0
+  for (const chunk of chunks) {
+    out.set(chunk, offset)
+    offset += chunk.length
+  }
+  return out
+}
+
+function resampleLinear(input: Float32Array, fromRate: number, toRate: number): Float32Array {
+  if (fromRate === toRate || input.length === 0) return input
+  const ratio = fromRate / toRate
+  const outLength = Math.max(1, Math.floor(input.length / ratio))
+  const out = new Float32Array(outLength)
+  for (let i = 0; i < outLength; i++) {
+    const srcPos = i * ratio
+    const idx = Math.floor(srcPos)
+    const frac = srcPos - idx
+    const a = input[idx] ?? 0
+    const b = input[idx + 1] ?? a
+    out[i] = a + (b - a) * frac
+  }
+  return out
+}
+
+export async function fileToBase64Stripped(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = String(reader.result ?? '')
+      const i = result.indexOf(',')
+      resolve(i >= 0 ? result.slice(i + 1) : result)
+    }
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(file)
+  })
+}
+
+export async function readFileAsDataUrl(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result ?? ''))
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(file)
+  })
+}
+
+export async function downscaleImageToAttachment(
+  file: File,
+  maxEdge = 1280,
+  quality = 0.85,
+): Promise<{ id: string; kind: 'image'; previewUrl: string; base64: string; name: string }> {
+  const dataUrl = await readFileAsDataUrl(file)
+  const img: HTMLImageElement = await new Promise((resolve, reject) => {
+    const i = new Image()
+    i.onload = () => resolve(i)
+    i.onerror = () => reject(new Error('image load failed'))
+    i.src = dataUrl
+  })
+  let w = img.naturalWidth
+  let h = img.naturalHeight
+  const longEdge = Math.max(w, h)
+  if (longEdge > maxEdge) {
+    const scale = maxEdge / longEdge
+    w = Math.round(w * scale)
+    h = Math.round(h * scale)
+  }
+  const canvas = document.createElement('canvas')
+  canvas.width = w
+  canvas.height = h
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error('canvas 2d unavailable')
+  ctx.drawImage(img, 0, 0, w, h)
+  const outDataUrl = canvas.toDataURL('image/jpeg', quality)
+  const base64 = outDataUrl.slice(outDataUrl.indexOf(',') + 1)
+  return { id: createId('att'), kind: 'image', previewUrl: outDataUrl, base64, name: file.name || 'photo.jpg' }
+}
+
+export async function mediaFileToAttachment(
+  file: File,
+  kind: 'audio' | 'video',
+): Promise<{ id: string; kind: 'audio' | 'video'; previewUrl: string; base64: string; name: string; duration?: number }> {
+  const base64 = await fileToBase64Stripped(file)
+  const previewUrl = URL.createObjectURL(file)
+  let duration: number | undefined
+  try {
+    duration = await new Promise<number>((resolve) => {
+      const el = document.createElement(kind === 'audio' ? 'audio' : 'video')
+      el.preload = 'metadata'
+      const onLoaded = () => {
+        const d = Number.isFinite(el.duration) ? el.duration : 0
+        resolve(d)
+      }
+      el.addEventListener('loadedmetadata', onLoaded, { once: true })
+      el.addEventListener('error', () => resolve(0), { once: true })
+      el.src = previewUrl
+    })
+  } catch {
+    duration = undefined
+  }
+  return { id: createId('att'), kind, previewUrl, base64, name: file.name || kind, duration }
+}
+
+// ─── API Hooks ──────────────────────────────────────────
+
+type ServiceStatusResponse = {
+  gateway_healthy: boolean
+  total_workers: number
+  idle_workers: number
+  busy_workers: number
+  queue_length: number
+  offline_workers: number
+}
+
+export async function fetchServiceStatus(host: string): Promise<MiniCPMoServiceStatus> {
+  try {
+    const res = await fetch(`${host}/status`, { signal: AbortSignal.timeout(5000) })
+    const data = (await res.json()) as ServiceStatusResponse
+    return {
+      phase: data.gateway_healthy ? 'ready' : 'error',
+      summary: data.gateway_healthy ? '后端就绪' : '网关异常',
+      detail: `${data.idle_workers}/${data.total_workers} workers, 队列 ${data.queue_length}, 离线 ${data.offline_workers}`,
+    }
+  } catch {
+    return { phase: 'error', summary: '后端不可达', detail: '请确保 MiniCPM-o 服务已启动' }
+  }
+}
+
+export async function fetchPresets(host: string): Promise<Record<MiniCPMoPresetMode, MiniCPMoPreset[]>> {
+  try {
+    const res = await fetch(`${host}/api/presets`, { signal: AbortSignal.timeout(5000) })
+    if (!res.ok) return { turnbased: [], audio_duplex: [], omni: [] }
+    const data = (await res.json()) as Partial<Record<MiniCPMoPresetMode, MiniCPMoPreset[]>>
+    return {
+      turnbased: data.turnbased ?? [],
+      audio_duplex: data.audio_duplex ?? [],
+      omni: data.omni ?? [],
+    }
+  } catch {
+    return { turnbased: [], audio_duplex: [], omni: [] }
+  }
+}
+
+// ─── Chat message builder ───────────────────────────────
+
+function buildRequestMessages(
+  entries: MiniCPMoMessage[],
+  systemMessage?: string | MiniCPMoBackendContentItem[] | null,
+): Array<{ role: string; content: string | MiniCPMoBackendContentItem[] }> {
+  const messages: Array<{ role: string; content: string | MiniCPMoBackendContentItem[] }> = []
+
+  if (typeof systemMessage === 'string' && systemMessage.trim()) {
+    messages.push({ role: 'system', content: systemMessage.trim() })
+  } else if (Array.isArray(systemMessage) && systemMessage.length) {
+    messages.push({ role: 'system', content: systemMessage })
+  }
+
+  for (const entry of entries) {
+    if (entry.role === 'assistant') {
+      messages.push({ role: 'assistant', content: entry.text })
+    } else if (entry.kind === 'text') {
+      const atts = entry.attachments ?? []
+      if (atts.length === 0) {
+        messages.push({ role: 'user', content: entry.text })
+      } else {
+        const items: MiniCPMoBackendContentItem[] = []
+        for (const a of atts) {
+          if (a.kind === 'image') items.push({ type: 'image', data: a.base64 })
+          else if (a.kind === 'audio') items.push({ type: 'audio', data: a.base64, name: a.name, duration: a.duration })
+          else items.push({ type: 'video', data: a.base64, duration: a.duration })
+        }
+        if (entry.text) items.push({ type: 'text', text: entry.text })
+        messages.push({ role: 'user', content: items })
+      }
+    } else if (entry.kind === 'voice') {
+      const voiceAtts = entry.attachments ?? []
+      if (voiceAtts.length === 0) {
+        messages.push({ role: 'user', content: [{ type: 'audio', data: entry.audioBase64 }] })
+      } else {
+        const items: MiniCPMoBackendContentItem[] = []
+        for (const a of voiceAtts) {
+          if (a.kind === 'image') items.push({ type: 'image', data: a.base64 })
+          else if (a.kind === 'audio') items.push({ type: 'audio', data: a.base64, name: a.name, duration: a.duration })
+          else items.push({ type: 'video', data: a.base64, duration: a.duration })
+        }
+        items.push({ type: 'audio', data: entry.audioBase64 })
+        messages.push({ role: 'user', content: items })
+      }
+    }
+  }
+
+  return messages
+}
+
+// ─── Streaming PCM Player ───────────────────────────────
+
+export class StreamingPcmPlayer {
+  private readonly audioCtx: AudioContext
+  private readonly sampleRate: number
+  private readonly chunks: Float32Array[] = []
+  private nextStartTime = 0
+  private finished = false
+  private disposed = false
+
+  constructor(sampleRate = 24000) {
+    this.sampleRate = sampleRate
+    const ctor = window.AudioContext ?? (window as any).webkitAudioContext
+    if (!ctor) throw new Error('AudioContext not supported')
+    this.audioCtx = new ctor({ sampleRate })
+  }
+
+  pushBase64(base64Data: string): void {
+    if (this.disposed) return
+    const binary = atob(base64Data)
+    const bytes = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+    if (bytes.byteLength === 0) return
+    const float32 = new Float32Array(bytes.buffer.slice(0))
+    if (float32.length === 0) return
+    this.chunks.push(float32)
+    this.scheduleChunk(float32)
+  }
+
+  private scheduleChunk(float32: Float32Array): void {
+    if (this.audioCtx.state === 'suspended') void this.audioCtx.resume().catch(() => {})
+    const buffer = this.audioCtx.createBuffer(1, float32.length, this.sampleRate)
+    buffer.getChannelData(0).set(float32)
+    const source = this.audioCtx.createBufferSource()
+    source.buffer = buffer
+    source.connect(this.audioCtx.destination)
+    const now = this.audioCtx.currentTime
+    const when = Math.max(now + 0.02, this.nextStartTime)
+    source.start(when)
+    this.nextStartTime = when + buffer.duration
+  }
+
+  markFinished(): void { this.finished = true }
+  isFinished(): boolean { return this.finished }
+
+  getMergedFloat32(): Float32Array | null {
+    if (this.chunks.length === 0) return null
+    const total = this.chunks.reduce((sum, c) => sum + c.length, 0)
+    const merged = new Float32Array(total)
+    let offset = 0
+    for (const chunk of this.chunks) { merged.set(chunk, offset); offset += chunk.length }
+    return merged
+  }
+
+  getSampleRate(): number { return this.sampleRate }
+
+  async dispose(): Promise<void> {
+    this.disposed = true
+    try { await this.audioCtx.close() } catch { /* ignore */ }
+  }
+
+  disposeAfterDrain(onDrained?: () => void): void {
+    if (this.disposed) { onDrained?.(); return }
+    const now = this.audioCtx.currentTime
+    const drainSeconds = Math.max(0, this.nextStartTime - now)
+    setTimeout(() => { void this.dispose(); onDrained?.() }, Math.ceil(drainSeconds * 1000) + 500)
+  }
+}
+
+// ─── Chat submission ────────────────────────────────────
+
+type ChatPayload = {
+  text?: string
+  error?: string
+  success?: boolean
+  audio_data?: string | null
+  audio_sample_rate?: number
+  recording_session_id?: string | null
+}
+
+export async function submitChatNonStreaming(
+  host: string,
+  messages: MiniCPMoMessage[],
+  systemMessage: string | null,
+  maxNewTokens: number,
+  lengthPenalty: number,
+  ttsEnabled: boolean,
+  signal?: AbortSignal,
+): Promise<{ entry: MiniCPMoMessage; sessionId: string | null }> {
+  const requestBody = JSON.stringify({
+    messages: buildRequestMessages(messages, systemMessage),
+    streaming: false,
+    generation: { max_new_tokens: maxNewTokens, length_penalty: lengthPenalty },
+    ...(ttsEnabled ? { use_tts_template: true } : {}),
+    tts: { enabled: ttsEnabled, mode: 'audio_assistant' },
+  })
+
+  const res = await fetch(`${host}/api/chat`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: requestBody,
+    signal,
+  })
+
+  const rawText = await res.text()
+  let payload: ChatPayload
+  try { payload = JSON.parse(rawText) as ChatPayload } catch { throw new Error(rawText || `HTTP ${res.status}`) }
+  if (!res.ok || payload.success === false) throw new Error(payload.error || `HTTP ${res.status}`)
+
+  let audioUrl: string | null = null
+  const audioSampleRate = payload.audio_sample_rate ?? 24000
+  if (payload.audio_data) {
+    try { audioUrl = audioBase64ToBlobUrl(payload.audio_data, audioSampleRate) } catch { audioUrl = null }
+  }
+
+  return {
+    entry: {
+      id: createId('assistant'),
+      role: 'assistant',
+      kind: 'assistant',
+      text: payload.text?.trim() || '(empty reply)',
+      audioPreviewUrl: audioUrl,
+      audioBase64: payload.audio_data ?? null,
+      audioSampleRate: payload.audio_data ? audioSampleRate : null,
+      recordingSessionId: payload.recording_session_id ?? null,
+    },
+    sessionId: payload.recording_session_id ?? null,
+  }
+}
+
+export type StreamCallbacks = {
+  onChunk: (text: string) => void
+  onAudioBase64: (data: string, sampleRate: number) => void
+  onDone: (fullText: string, recordingSessionId: string | null) => void
+  onError: (error: string) => void
+}
+
+export function submitChatStreaming(
+  host: string,
+  messages: MiniCPMoMessage[],
+  systemMessage: string | null,
+  maxNewTokens: number,
+  lengthPenalty: number,
+  ttsEnabled: boolean,
+  callbacks: StreamCallbacks,
+  player?: StreamingPcmPlayer,
+): { abort: () => void } {
+  const wsProto = host.startsWith('https') ? 'wss:' : 'ws:'
+  const wsHost = host.replace(/^https?:\/\//, '')
+  const wsUrl = `${wsProto}//${wsHost}/ws/chat`
+  let finished = false
+  let ws: WebSocket | null = null
+  let fullText = ''
+
+  try { ws = new WebSocket(wsUrl) } catch (e) { callbacks.onError('WebSocket creation failed'); return { abort: () => {} } }
+
+  ws.onopen = () => {
+    ws!.send(JSON.stringify({
+      messages: buildRequestMessages(messages, systemMessage),
+      streaming: true,
+      generation: { max_new_tokens: maxNewTokens, length_penalty: lengthPenalty },
+      ...(ttsEnabled ? { use_tts_template: true } : {}),
+      tts: { enabled: ttsEnabled, mode: 'audio_assistant' },
+    }))
+  }
+
+  ws.onmessage = (event) => {
+    if (finished) return
+    let msg: any
+    try { msg = JSON.parse(event.data) } catch { return }
+
+    if (msg.type === 'prefill_done') return
+    if (msg.type === 'chunk') {
+      if (typeof msg.text_delta === 'string' && msg.text_delta) {
+        fullText += msg.text_delta
+        callbacks.onChunk(fullText)
+      }
+      if (msg.audio_data && player) {
+        try { player.pushBase64(msg.audio_data) } catch { /* ignore */ }
+      }
+      return
+    }
+    if (msg.type === 'done') {
+      finished = true
+      const finalText = (fullText || msg.text || '').trim() || '(empty reply)'
+      callbacks.onDone(finalText, msg.recording_session_id ?? null)
+      try { ws?.close() } catch { /* ignore */ }
+      return
+    }
+    if (msg.type === 'error') {
+      finished = true
+      callbacks.onError(msg.error || 'unknown error')
+      try { ws?.close() } catch { /* ignore */ }
+    }
+  }
+
+  ws.onerror = () => { if (!finished) { finished = true; callbacks.onError('WebSocket connection error') } }
+  ws.onclose = () => { if (!finished) { finished = true; callbacks.onError('WebSocket closed unexpectedly') } }
+
+  return {
+    abort: () => {
+      finished = true
+      try { ws?.close() } catch { /* ignore */ }
+    },
+  }
+}
+
+// ─── Microphone capture (ported from MiniCPM-o mobile) ──
+
+function getPcmWorkletUrl(backendHost: string): string {
+  const host = backendHost.replace(/\/+$/, '')
+  return `${host}/static/duplex/lib/pcm-capture-turnbased.js`
+}
+
+export function getAudioContextCtor(): typeof AudioContext | null {
+  return window.AudioContext ?? (window as any).webkitAudioContext ?? null
+}
+
+type MicCaptureState = {
+  stream: MediaStream | null
+  ctx: AudioContext | null
+  source: MediaStreamAudioSourceNode | null
+  worklet: AudioWorkletNode | null
+  processor: ScriptProcessorNode | null
+  muteGain: GainNode | null
+  chunks: Float32Array[]
+  sampleRate: number
+  capturing: boolean
+}
+
+export function createMicCapture(): MicCaptureState {
+  return {
+    stream: null,
+    ctx: null,
+    source: null,
+    worklet: null,
+    processor: null,
+    muteGain: null,
+    chunks: [],
+    sampleRate: 16000,
+    capturing: false,
+  }
+}
+
+export async function prewarmMic(state: MicCaptureState, backendHost: string): Promise<boolean> {
+  if (state.ctx && state.stream) return true
+  const AudioContextCtor = getAudioContextCtor()
+  if (!AudioContextCtor || !navigator.mediaDevices?.getUserMedia) return false
+
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    const ctx = new AudioContextCtor()
+    if (ctx.state === 'suspended') await ctx.resume().catch(() => {})
+    const source = ctx.createMediaStreamSource(stream)
+    state.stream = stream
+    state.ctx = ctx
+    state.source = source
+    state.chunks = []
+    state.sampleRate = ctx.sampleRate
+
+    if (typeof AudioWorkletNode !== 'undefined' && typeof ctx.audioWorklet?.addModule === 'function') {
+      try {
+        const workletUrl = getPcmWorkletUrl(backendHost)
+        await ctx.audioWorklet.addModule(workletUrl)
+        const node = new AudioWorkletNode(ctx, 'pcm-capture-turnbased')
+        node.port.onmessage = (event: MessageEvent) => {
+          const data = event.data as { type: string; samples: Float32Array } | undefined
+          if (data?.type === 'pcm' && state.capturing) state.chunks.push(data.samples)
+        }
+        source.connect(node)
+        state.worklet = node
+        return true
+      } catch {
+        // fall through to ScriptProcessor
+      }
+    }
+
+    // ScriptProcessor fallback
+    const processor = ctx.createScriptProcessor(4096, 1, 1)
+    const muteGain = ctx.createGain()
+    muteGain.gain.value = 0
+    processor.onaudioprocess = (event) => {
+      if (!state.capturing) return
+      const input = event.inputBuffer.getChannelData(0)
+      const copy = new Float32Array(input.length)
+      copy.set(input)
+      state.chunks.push(copy)
+    }
+    source.connect(processor)
+    processor.connect(muteGain)
+    muteGain.connect(ctx.destination)
+    state.processor = processor
+    state.muteGain = muteGain
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function setCapturing(state: MicCaptureState, value: boolean) {
+  state.capturing = value
+  if (state.worklet) {
+    try { state.worklet.port.postMessage({ type: 'capture', value }) } catch { /* ignore */ }
+  }
+}
+
+export function coldDownMic(state: MicCaptureState) {
+  state.capturing = false
+  try { state.worklet?.port.postMessage({ type: 'capture', value: false }) } catch { /* ignore */ }
+  try { state.worklet?.disconnect() } catch { /* ignore */ }
+  try { state.processor?.disconnect() } catch { /* ignore */ }
+  try { state.source?.disconnect() } catch { /* ignore */ }
+  try { state.muteGain?.disconnect() } catch { /* ignore */ }
+  state.worklet = null
+  state.processor = null
+  state.source = null
+  state.muteGain = null
+  if (state.ctx && state.ctx.state !== 'closed') void state.ctx.close().catch(() => {})
+  state.ctx = null
+  state.stream?.getTracks().forEach((t) => t.stop())
+  state.stream = null
+  state.chunks = []
+}
+
+export function finalizeRecordingChunks(
+  state: MicCaptureState,
+): { audioBase64: string; previewUrl: string; durationMs: number } | null {
+  const chunks = state.chunks
+  if (chunks.length === 0) return null
+  const merged = concatFloat32(chunks)
+  if (merged.length === 0) return null
+  const resampled = resampleLinear(merged, state.sampleRate, 16000)
+  const audioBase64 = float32ToBase64(resampled)
+  const previewUrl = float32ToWavBlobUrl(resampled, 16000)
+  return { audioBase64, previewUrl, durationMs: 0 } // caller should compute actual duration
+}

desktop/src/pages/Companion.tsx

@@ -1,263 +1,1409 @@
-import { useEffect, useRef, useCallback } from 'react'
-import { useCompanionStore } from '../stores/companionStore'
-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 { useEffect, useRef, useState, useCallback } from 'react'
+import { useCompanionStore, SCENARIOS } from '../stores/companionStore'
 import { ScenarioSelector } from '../components/companion/ScenarioSelector'
-import { ScreenShareDialog } from '../components/companion/ScreenShareDialog'
+import {
+  fetchServiceStatus,
+  fetchPresets,
+  submitChatNonStreaming,
+  submitChatStreaming,
+  StreamingPcmPlayer,
+  createMicCapture,
+  prewarmMic,
+  setCapturing,
+  coldDownMic,
+  finalizeRecordingChunks,
+  downscaleImageToAttachment,
+  mediaFileToAttachment,
+  float32ToWavBlobUrl,
+} from '../hooks/useMiniCPMoBackend'
+import type { MiniCPMoMessage, MiniCPMoAttachment } from '../types/companion'
+import type { MiniCPMoSession } from '../stores/companionStore'
 
-export function Companion() {
-  const status = useCompanionStore((s) => s.status)
-  const speaking = useCompanionStore((s) => s.speaking)
-  const generating = useCompanionStore((s) => s.generating)
-  const transcript = useCompanionStore((s) => s.transcript)
-  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) => {
-      companionAudio.enqueueAudio(data)
-    },
-    [companionAudio],
+// ─── Helpers ─────────────────────────────────────────────
+
+function createId(prefix: string): string {
+  return `${prefix}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+const CANCEL_DRAG_PX = 80
+
+function formatDurationMs(durationMs: number): string {
+  return `${(durationMs / 1000).toFixed(1)}s`
+}
+
+function formatRelativeTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return '刚刚'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}分钟前`
+  const d = new Date(ts)
+  const today = new Date()
+  if (today.getFullYear() === d.getFullYear() && today.getMonth() === d.getMonth() && today.getDate() === d.getDate()) {
+    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+  }
+  const yesterday = new Date(Date.now() - 86_400_000)
+  if (yesterday.getFullYear() === d.getFullYear() && yesterday.getMonth() === d.getMonth() && yesterday.getDate() === d.getDate()) {
+    return '昨天'
+  }
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+
+function deriveSessionTitle(messages: MiniCPMoMessage[]): string {
+  for (const m of messages) {
+    if (m.role !== 'user') continue
+    if (m.kind === 'text' && m.text.trim()) {
+      const txt = m.text.trim().replace(/\s+/g, ' ')
+      return txt.length > 28 ? `${txt.slice(0, 28)}…` : txt
+    }
+    if (m.kind === 'voice') return '语音消息'
+    if (m.kind === 'text' && m.attachments?.length) {
+      const a = m.attachments[0]
+      if (a && a.kind === 'image') return '图片消息'
+      if (a && a.kind === 'audio') return '音频消息'
+      if (a && a.kind === 'video') return '视频消息'
+    }
+  }
+  return '新的对话'
+}
+
+// ─── SVG Icon Components ─────────────────────────────────
+
+function IconHamburger({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M4.5 7h15M4.5 12h15M4.5 17h15" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
+    </svg>
+  )
+}
+
+function IconSettings({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M10.3 4.8h3.4l.5 2.1a5.8 5.8 0 0 1 1.5.9l2-.7 1.7 2.9-1.5 1.4a6 6 0 0 1 0 1.7l1.5 1.4-1.7 2.9-2-.7a5.8 5.8 0 0 1-1.5.9l-.5 2.1h-3.4l-.5-2.1a5.8 5.8 0 0 1-1.5-.9l-2 .7-1.7-2.9 1.5-1.4a6 6 0 0 1 0-1.7L4.6 10l1.7-2.9 2 .7a5.8 5.8 0 0 1 1.5-.9Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
+      <circle cx="12" cy="12" r="2.5" stroke="currentColor" strokeWidth="1.6" />
+    </svg>
+  )
+}
+
+function IconSend({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M4.5 11.5 19 5l-4.5 14-2.6-5-7.4-2.5Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
+      <path d="M19 5 11.8 14" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
+    </svg>
+  )
+}
+
+function IconStop({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <rect x="7" y="7" width="10" height="10" rx="2.4" fill="currentColor" />
+    </svg>
+  )
+}
+
+function IconKeyboard({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <rect x="3.5" y="6" width="17" height="12" rx="2.5" stroke="currentColor" strokeWidth="1.8" />
+      <path d="M7.5 10h9M7.5 13h4.5M14 13h2.5M7.5 16h7" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
+    </svg>
   )
-  const onDone = useCallback(() => {
-    companionAudio.flush()
-  }, [companionAudio])
+}
 
-  // WebSocket
-  const ws = useCompanionWebSocket({ onAudioReceived, onDone })
+function IconWave({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M4 13h2l1.4-4 2.4 9 2.4-12 2.1 7H20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
+    </svg>
+  )
+}
 
-  // Camera devices
-  const cameraDevices = useCameraDevices()
+function IconPlus({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="9.2" stroke="currentColor" strokeWidth="1.6" />
+      <path d="M12 8v8M8 12h8" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
+    </svg>
+  )
+}
 
-  // Screen share
-  const screenShare = useScreenShare()
+function IconClose({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="m8 8 8 8M16 8l-8 8" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
+    </svg>
+  )
+}
 
-  // 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)
+function IconPlay({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M9 7.5v9l7-4.5-7-4.5Z" fill="currentColor" />
+    </svg>
+  )
+}
+
+function IconPause({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <rect x="7" y="6" width="3.2" height="12" rx="1.2" fill="currentColor" />
+      <rect x="13.8" y="6" width="3.2" height="12" rx="1.2" fill="currentColor" />
+    </svg>
+  )
+}
+
+function IconSpeaker({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M11 5 6.5 9H3.5C2.67 9 2 9.67 2 10.5v3c0 .83.67 1.5 1.5 1.5h3L11 19V5Z" fill="currentColor" />
+      <path d="M15.54 8.46a5 5 0 0 1 0 7.07" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <path d="M18.36 5.64a9 9 0 0 1 0 12.73" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function IconCamera({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M5 9.5A2.5 2.5 0 0 1 7.5 7h1.6l1.4-2h3l1.4 2h1.6A2.5 2.5 0 0 1 19 9.5v7A2.5 2.5 0 0 1 16.5 19h-9A2.5 2.5 0 0 1 5 16.5Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
+      <circle cx="12" cy="13" r="3.2" stroke="currentColor" strokeWidth="1.6" />
+    </svg>
+  )
+}
+
+function IconPhoto({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <rect x="3.5" y="5.5" width="17" height="13" rx="2.2" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
+      <circle cx="9" cy="10.5" r="1.6" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M3.7 16.5 9 12l4 3.5 3-2.5 4.3 4" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
+    </svg>
+  )
+}
+
+function IconFile({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M14 3.5H7.5A2 2 0 0 0 5.5 5.5v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8.2L14 3.5Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
+      <path d="M13.5 3.5v4.7h5" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
+    </svg>
+  )
+}
+
+function IconCopy({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <rect x="8.5" y="8.5" width="10" height="11" rx="2.2" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
+      <path d="M15.5 6h-7A2 2 0 0 0 6.5 8v9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
+    </svg>
+  )
+}
+
+function IconRefresh({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M5.5 12a6.5 6.5 0 0 1 11.2-4.5L19 10" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
+      <path d="M19 5v5h-5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
+      <path d="M18.5 12a6.5 6.5 0 0 1-11.2 4.5L5 14" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
+      <path d="M5 19v-5h5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
+    </svg>
+  )
+}
+
+function IconTrash({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M5 7h14M9.5 7V5.5a1.5 1.5 0 0 1 1.5-1.5h2a1.5 1.5 0 0 1 1.5 1.5V7m-7.5 0 .8 11.2a1.8 1.8 0 0 0 1.8 1.6h6.8a1.8 1.8 0 0 0 1.8-1.6L17.5 7" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
+      <path d="M10.5 11v5M13.5 11v5" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
+    </svg>
+  )
+}
+
+function IconEdit({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24">
+      <path d="M5 6.8A2.2 2.2 0 0 1 7.2 4.6h5" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
+      <path d="M19.4 11v5.8a2.2 2.2 0 0 1-2.2 2.2H7.2A2.2 2.2 0 0 1 5 16.8V11" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
+      <path d="m13.6 11.5 6-6a1.6 1.6 0 0 1 2.3 2.3l-6 6-2.7.4.4-2.7Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
+    </svg>
+  )
+}
+
+// ─── Audio Play Pill ────────────────────────────────────
+
+function AudioPlayPill({ url, className = '' }: { url: string; className?: string }) {
+  const [playing, setPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
 
-  // Enumerate cameras when camera is enabled
   useEffect(() => {
-    if (cameraEnabled) {
-      cameraDevices.enumerateCameras().then((devices) => {
-        setCameraDevices(devices)
-        if (devices.length > 0) {
-          setActiveCameraLabel(devices[0]?.label ?? null)
-        }
-      })
+    const audio = new Audio(url)
+    audioRef.current = audio
+    const onPlay = () => setPlaying(true)
+    const onPause = () => setPlaying(false)
+    const onEnded = () => setPlaying(false)
+    audio.addEventListener('play', onPlay)
+    audio.addEventListener('pause', onPause)
+    audio.addEventListener('ended', onEnded)
+    return () => {
+      audio.removeEventListener('play', onPlay)
+      audio.removeEventListener('pause', onPause)
+      audio.removeEventListener('ended', onEnded)
+      try { audio.pause() } catch { /* ignore */ }
+      audioRef.current = null
     }
-  }, [cameraEnabled, cameraDevices, setCameraDevices, setActiveCameraLabel])
+  }, [url])
 
-  // Update status text based on state
-  useEffect(() => {
-    if (status === 'connected') {
-      if (generating) {
-        setStatusText('AI 说话中...')
-      } else if (speaking) {
-        setStatusText('请说话')
-      } else {
-        setStatusText('你可以开始说话')
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        const a = audioRef.current
+        if (!a) return
+        if (playing) { a.pause(); return }
+        try { a.currentTime = 0 } catch { /* ignore */ }
+        void a.play().catch(() => setPlaying(false))
+      }}
+      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs transition-colors ${
+        playing ? 'bg-orange-500/30 text-orange-200' : 'bg-white/10 text-white/70 hover:bg-white/20'
+      } ${className}`}
+    >
+      {playing
+        ? <IconPause className="w-3.5 h-3.5" />
+        : <IconPlay className="w-3.5 h-3.5" />
       }
-    } else if (status === 'connecting') {
-      setStatusText('连接中...')
-    } else {
-      setStatusText('')
+      <span>{playing ? '暂停' : '播放'}</span>
+    </button>
+  )
+}
+
+// ─── Copy Button ────────────────────────────────────────
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  useEffect(() => {
+    if (!copied) return
+    const t = setTimeout(() => setCopied(false), 1200)
+    return () => clearTimeout(t)
+  }, [copied])
+
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        try {
+          if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(text)
+          setCopied(true)
+        } catch { /* ignore */ }
+      }}
+      className="w-7 h-7 flex items-center justify-center rounded-lg bg-white/5 text-white/40 hover:bg-white/10 hover:text-white/70 transition-colors"
+      title={copied ? '已复制' : '复制'}
+    >
+      <IconCopy className="w-3.5 h-3.5" />
+    </button>
+  )
+}
+
+// ─── Message Attachment ─────────────────────────────────
+
+function MessageAttachment({ attachment }: { attachment: MiniCPMoAttachment }) {
+  if (attachment.kind === 'image') {
+    return <img src={attachment.previewUrl} alt={attachment.name} className="max-w-full rounded-lg mb-1 max-h-60 object-cover" />
+  }
+  if (attachment.kind === 'audio') {
+    return <AudioPlayPill url={attachment.previewUrl} className="mb-1" />
+  }
+  return (
+    <video src={attachment.previewUrl} controls preload="metadata" playsInline className="max-w-full rounded-lg mb-1 max-h-60" />
+  )
+}
+
+// ─── Message Bubble ─────────────────────────────────────
+
+function MessageBubble({
+  msg,
+  isLastAssistant,
+  isStreaming,
+  onRegenerate,
+}: {
+  msg: MiniCPMoMessage
+  isLastAssistant: boolean
+  isStreaming: boolean
+  onRegenerate?: () => void
+}) {
+  const [audioPlaying, setAudioPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  const audioUrl = msg.role === 'assistant' && msg.audioPreviewUrl ? msg.audioPreviewUrl : null
+
+  useEffect(() => {
+    if (!audioUrl) return
+    const audio = new Audio(audioUrl)
+    audioRef.current = audio
+    const onPlay = () => setAudioPlaying(true)
+    const onPause = () => setAudioPlaying(false)
+    const onEnded = () => setAudioPlaying(false)
+    audio.addEventListener('play', onPlay)
+    audio.addEventListener('pause', onPause)
+    audio.addEventListener('ended', onEnded)
+    return () => {
+      audio.removeEventListener('play', onPlay)
+      audio.removeEventListener('pause', onPause)
+      audio.removeEventListener('ended', onEnded)
+      try { audio.pause() } catch { /* ignore */ }
+      audioRef.current = null
     }
-  }, [status, generating, speaking, setStatusText])
+  }, [audioUrl])
+
+  if (msg.role === 'user' && msg.kind === 'voice') {
+    const voiceAtts = msg.attachments ?? []
+    return (
+      <div className="flex justify-end mb-3">
+        <div className="max-w-[80%]">
+          {voiceAtts.length > 0 && (
+            <div className="flex flex-wrap gap-1 mb-1 justify-end">
+              {voiceAtts.map((a) => <MessageAttachment key={a.id} attachment={a} />)}
+            </div>
+          )}
+          <div className="bg-orange-500/20 text-white rounded-2xl rounded-br-md px-3.5 py-2.5 inline-flex items-center gap-2">
+            <AudioPlayPill url={msg.previewUrl} />
+            <div className="text-white/50 text-xs">{formatDurationMs(msg.durationMs)}</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const isAssistant = msg.role === 'assistant'
+  const attachments = !isAssistant && msg.kind === 'text' ? msg.attachments ?? [] : []
+
+  return (
+    <div className={`flex mb-3 ${isAssistant ? 'justify-start' : 'justify-end'}`}>
+      <div className={`max-w-[80%] ${isAssistant ? '' : 'items-end'}`}>
+        {attachments.length > 0 && (
+          <div className="flex flex-wrap gap-1 mb-1 justify-end">
+            {attachments.map((a) => <MessageAttachment key={a.id} attachment={a} />)}
+          </div>
+        )}
+        <div
+          className={`rounded-2xl px-3.5 py-2.5 ${
+            isAssistant
+              ? msg.error
+                ? 'bg-red-500/10 text-red-300 rounded-bl-md'
+                : 'bg-white/8 text-white/90 rounded-bl-md'
+              : 'bg-orange-500/20 text-white rounded-br-md'
+          }`}
+        >
+          {msg.text && <div className="text-sm leading-relaxed whitespace-pre-wrap break-words">{msg.text}</div>}
+          {isAssistant && msg.interrupted && (
+            <div className="text-xs text-white/30 mt-1">[已中断]</div>
+          )}
+        </div>
+        {isAssistant && !msg.error && !isStreaming && (
+          <div className="flex items-center gap-1.5 mt-1.5 ml-1">
+            <CopyButton text={msg.text} />
+            {audioUrl && (
+              <button
+                type="button"
+                onClick={() => {
+                  const a = audioRef.current
+                  if (!a) return
+                  if (audioPlaying) { a.pause(); return }
+                  try { a.currentTime = 0 } catch { /* ignore */ }
+                  void a.play().catch(() => setAudioPlaying(false))
+                }}
+                className={`w-7 h-7 flex items-center justify-center rounded-lg transition-colors ${
+                  audioPlaying ? 'bg-orange-500/20 text-orange-300' : 'bg-white/5 text-white/40 hover:bg-white/10 hover:text-white/70'
+                }`}
+                title={audioPlaying ? '停止播放' : '朗读'}
+              >
+                {audioPlaying ? <IconPause className="w-3.5 h-3.5" /> : <IconSpeaker className="w-3.5 h-3.5" />}
+              </button>
+            )}
+            {isLastAssistant && onRegenerate && (
+              <button
+                type="button"
+                onClick={onRegenerate}
+                className="w-7 h-7 flex items-center justify-center rounded-lg bg-white/5 text-white/40 hover:bg-white/10 hover:text-white/70 transition-colors"
+                title="重新生成"
+              >
+                <IconRefresh className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Pending Reply ──────────────────────────────────────
+
+function PendingReply({ text }: { text: string }) {
+  return (
+    <div className="flex justify-start mb-3">
+      <div className="max-w-[80%] bg-white/8 text-white/90 rounded-2xl rounded-bl-md px-3.5 py-2.5">
+        <span className="text-sm whitespace-pre-wrap break-words">{text}</span>
+        {!text && (
+          <span className="inline-flex gap-1">
+            <span className="w-1.5 h-1.5 rounded-full bg-white/30 animate-bounce" style={{ animationDelay: '0s' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-white/30 animate-bounce" style={{ animationDelay: '0.15s' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-white/30 animate-bounce" style={{ animationDelay: '0.3s' }} />
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Settings Sheet ─────────────────────────────────────
+
+function SettingsSheet({
+  open,
+  onClose,
+}: {
+  open: boolean
+  onClose: () => void
+}) {
+  const backendHost = useCompanionStore((s) => s.backendHost)
+  const systemPrompt = useCompanionStore((s) => s.miniSystemPromptTurnbased)
+  const maxNewTokens = useCompanionStore((s) => s.miniMaxNewTokens)
+  const lengthPenalty = useCompanionStore((s) => s.miniLengthPenalty)
+  const ttsEnabled = useCompanionStore((s) => s.miniTtsEnabled)
+  const streamingEnabled = useCompanionStore((s) => s.miniStreamingEnabled)
+  const presets = useCompanionStore((s) => s.miniPresetsByMode)
+  const activePresetId = useCompanionStore((s) => s.miniSettingsSheetMode)
+
+  const setBackendHost = useCompanionStore((s) => s.setBackendHost)
+  const setMiniSystemPromptTurnbased = useCompanionStore((s) => s.setMiniSystemPromptTurnbased)
+  const setMiniMaxNewTokens = useCompanionStore((s) => s.setMiniMaxNewTokens)
+  const setMiniLengthPenalty = useCompanionStore((s) => s.setMiniLengthPenalty)
+  const setMiniTtsEnabled = useCompanionStore((s) => s.setMiniTtsEnabled)
+  const setMiniStreamingEnabled = useCompanionStore((s) => s.setMiniStreamingEnabled)
+  const setMiniSettingsSheetMode = useCompanionStore((s) => s.setMiniSettingsSheetMode)
+  const setMiniSystemPrompt = useCompanionStore((s) => s.setMiniSystemPromptTurnbased)
+
+  if (!open) return null
+
+  const currentPresets = presets.turnbased ?? []
+  const modes: Array<{ key: string; label: string }> = [
+    { key: 'turnbased', label: '文字对话' },
+    { key: 'audio_duplex', label: '语音通话' },
+    { key: 'omni', label: '视频通话' },
+  ]
+
+  return (
+    <div className="absolute inset-0 z-50 flex items-end justify-center" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50" />
+      <div
+        className="relative w-full max-w-lg max-h-[80vh] bg-[#1c1c1c] border border-white/10 rounded-t-2xl overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="sticky top-0 bg-[#1c1c1c] px-5 pt-4 pb-3 border-b border-white/10 flex items-center justify-between">
+          <h2 className="text-white/90 text-base font-semibold">设置</h2>
+          <button type="button" onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white/10 text-white/50">
+            <IconClose className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-5 space-y-5">
+          {/* Mode selector */}
+          <div className="flex gap-2">
+            {modes.map((m) => (
+              <button
+                key={m.key}
+                type="button"
+                onClick={() => setMiniSettingsSheetMode(m.key as any)}
+                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+                  activePresetId === m.key ? 'bg-orange-500/20 text-orange-300 border border-orange-400/30' : 'bg-white/5 text-white/50 hover:bg-white/10'
+                }`}
+              >
+                {m.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Backend host */}
+          <div>
+            <label className="text-white/50 text-xs block mb-1.5">后端地址</label>
+            <input
+              type="text"
+              value={backendHost}
+              onChange={(e) => setBackendHost(e.target.value)}
+              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white/80 outline-none focus:border-orange-400/40"
+              placeholder="http://localhost:8006"
+            />
+          </div>
+
+          {/* Presets */}
+          <div>
+            <label className="text-white/50 text-xs block mb-1.5">预设</label>
+            <div className="flex flex-wrap gap-1.5">
+              {currentPresets.map((p) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  className="px-2.5 py-1 rounded-lg text-xs bg-white/5 text-white/60 hover:bg-white/10 transition-colors"
+                  onClick={() => {
+                    if (p.system_prompt) setMiniSystemPrompt(p.system_prompt)
+                  }}
+                >
+                  {p.name}
+                </button>
+              ))}
+              {currentPresets.length === 0 && (
+                <span className="text-xs text-white/30">未获取到预设</span>
+              )}
+            </div>
+          </div>
+
+          {/* System prompt */}
+          <div>
+            <label className="text-white/50 text-xs block mb-1.5" htmlFor="sys-prompt">系统提示词</label>
+            <textarea
+              id="sys-prompt"
+              value={systemPrompt}
+              onChange={(e) => setMiniSystemPromptTurnbased(e.target.value)}
+              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white/80 outline-none focus:border-orange-400/40 resize-none"
+              rows={4}
+              placeholder="输入系统提示词..."
+            />
+          </div>
+
+          {/* Params */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-white/50 text-xs block mb-1">最大 Token</label>
+              <input
+                type="number"
+                value={maxNewTokens}
+                onChange={(e) => setMiniMaxNewTokens(Number(e.target.value))}
+                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white/80 outline-none focus:border-orange-400/40"
+                min={1}
+                max={2048}
+              />
+            </div>
+            <div>
+              <label className="text-white/50 text-xs block mb-1">长度惩罚</label>
+              <input
+                type="number"
+                value={lengthPenalty}
+                onChange={(e) => setMiniLengthPenalty(Number(e.target.value))}
+                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white/80 outline-none focus:border-orange-400/40"
+                min={0.1}
+                max={5}
+                step={0.05}
+              />
+            </div>
+          </div>
+
+          {/* Toggles */}
+          <div className="space-y-3">
+            <label className="flex items-center gap-2.5 cursor-pointer">
+              <input type="checkbox" checked={ttsEnabled} onChange={(e) => setMiniTtsEnabled(e.target.checked)} className="accent-orange-500" />
+              <span className="text-sm text-white/70">语音回复 (TTS)</span>
+            </label>
+            <label className="flex items-center gap-2.5 cursor-pointer">
+              <input type="checkbox" checked={streamingEnabled} onChange={(e) => setMiniStreamingEnabled(e.target.checked)} className="accent-orange-500" />
+              <span className="text-sm text-white/70">流式输出</span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─── History Drawer ─────────────────────────────────────
+
+function HistoryDrawer({
+  open,
+  onClose,
+  onSwitch,
+  onDelete,
+  onNewSession,
+  onClearAll,
+}: {
+  open: boolean
+  onClose: () => void
+  onSwitch: (id: string) => void
+  onDelete: (id: string) => void
+  onNewSession: () => void
+  onClearAll: () => void
+}) {
+  const sessions = useCompanionStore((s) => s.miniSessions)
+  const activeId = useCompanionStore((s) => s.miniActiveSessionId)
+
+  if (!open) return null
+
+  const sorted = [...sessions].sort((a, b) => b.updatedAt - a.updatedAt)
+
+  return (
+    <div className="absolute inset-0 z-50 flex" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50" />
+      <aside
+        className="relative w-72 max-w-[80vw] h-full bg-[#1c1c1c] border-r border-white/10 flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-3 border-b border-white/10">
+          <button
+            type="button"
+            onClick={onNewSession}
+            className="w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-orange-500/15 text-orange-300 hover:bg-orange-500/25 transition-colors text-sm font-medium"
+          >
+            <IconEdit className="w-4 h-4" />
+            <span>新建对话</span>
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
+          {sorted.length === 0 ? (
+            <div className="text-center text-white/20 text-sm py-8">暂无历史记录</div>
+          ) : (
+            sorted.map((s) => (
+              <div
+                key={s.id}
+                className={`flex items-center rounded-lg transition-colors ${
+                  s.id === activeId ? 'bg-white/8' : 'hover:bg-white/5'
+                }`}
+              >
+                <button
+                  type="button"
+                  onClick={() => onSwitch(s.id)}
+                  className="flex-1 text-left px-3 py-2.5 min-w-0"
+                >
+                  <div className="text-sm text-white/80 truncate">{s.title}</div>
+                  <div className="text-xs text-white/30 mt-0.5">{formatRelativeTime(s.updatedAt)}</div>
+                </button>
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); if (confirm(`删除「${s.title}」?`)) onDelete(s.id) }}
+                  className="w-8 h-8 flex items-center justify-center text-white/20 hover:text-red-400 hover:bg-white/5 rounded-lg mr-1 transition-colors"
+                >
+                  <IconTrash className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="p-3 border-t border-white/10">
+          <button
+            type="button"
+            onClick={() => { if (confirm('确定清除所有对话？')) onClearAll() }}
+            className="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-red-500/10 text-white/30 hover:text-red-300 transition-colors text-xs"
+          >
+            <IconTrash className="w-3.5 h-3.5" />
+            <span>清除所有数据</span>
+          </button>
+        </div>
+      </aside>
+    </div>
+  )
+}
+
+// ─── Recording Overlay ──────────────────────────────────
+
+function RecordingOverlay({ willCancel }: { willCancel: boolean }) {
+  return (
+    <div className="absolute inset-0 z-40 pointer-events-none flex items-center justify-center">
+      <div className={`px-8 py-4 rounded-2xl backdrop-blur-xl border transition-colors ${
+        willCancel
+          ? 'bg-red-500/20 border-red-400/30 text-red-300'
+          : 'bg-orange-500/10 border-orange-400/20 text-orange-200'
+      }`}>
+        <div className="text-sm font-medium text-center">
+          {willCancel ? '松开关闭' : '上滑取消'}
+        </div>
+        <div className="flex items-center justify-center gap-1 mt-2">
+          {Array.from({ length: 28 }).map((_, i) => (
+            <span
+              key={i}
+              className="w-0.5 bg-current rounded-full animate-pulse"
+              style={{
+                height: `${6 + Math.sin(i * 0.5 + Date.now() * 0.003) * 8}px`,
+                animationDelay: `${(i % 14) * 60}ms`,
+                opacity: willCancel ? 0.4 : 0.6,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─── Main Companion Page ────────────────────────────────
+
+export function Companion() {
+  // ─── Store state ────────────────────────────────────────
+  const messages = useCompanionStore((s) => s.miniMessages)
+  const isGenerating = useCompanionStore((s) => s.miniIsGenerating)
+  const pendingText = useCompanionStore((s) => s.miniPendingText)
+  const serviceStatus = useCompanionStore((s) => s.miniServiceStatus)
+  const backendHost = useCompanionStore((s) => s.backendHost)
+  const scenario = useCompanionStore((s) => s.scenario)
+  const settingsOpen = useCompanionStore((s) => s.miniSettingsOpen)
+  const historyOpen = useCompanionStore((s) => s.miniHistoryOpen)
+  const composeMode = useCompanionStore((s) => s.miniComposeMode)
+  const draft = useCompanionStore((s) => s.miniDraft)
+  const pendingAttachments = useCompanionStore((s) => s.miniPendingAttachments)
+  const attachMenuOpen = useCompanionStore((s) => s.miniAttachMenuOpen)
+  const isRecording = useCompanionStore((s) => s.miniRecording)
+  const isPreparingRecording = useCompanionStore((s) => s.miniPreparingRecording)
+  const recordingWillCancel = useCompanionStore((s) => s.miniRecordingWillCancel)
+  const error = useCompanionStore((s) => s.miniError)
+
+  const setMiniMessages = useCompanionStore((s) => s.setMiniMessages)
+  const setMiniIsGenerating = useCompanionStore((s) => s.setMiniIsGenerating)
+  const setMiniPendingText = useCompanionStore((s) => s.setMiniPendingText)
+  const setMiniServiceStatus = useCompanionStore((s) => s.setMiniServiceStatus)
+  const setMiniPresetsByMode = useCompanionStore((s) => s.setMiniPresetsByMode)
+  const setMiniSettingsOpen = useCompanionStore((s) => s.setMiniSettingsOpen)
+  const setMiniDraft = useCompanionStore((s) => s.setMiniDraft)
+  const setMiniPendingAttachments = useCompanionStore((s) => s.setMiniPendingAttachments)
+  const setMiniAttachMenuOpen = useCompanionStore((s) => s.setMiniAttachMenuOpen)
+  const setMiniComposeMode = useCompanionStore((s) => s.setMiniComposeMode)
+  const setMiniRecording = useCompanionStore((s) => s.setMiniRecording)
+  const setMiniPreparingRecording = useCompanionStore((s) => s.setMiniPreparingRecording)
+  const setMiniRecordingWillCancel = useCompanionStore((s) => s.setMiniRecordingWillCancel)
+  const setMiniHistoryOpen = useCompanionStore((s) => s.setMiniHistoryOpen)
+  const setMiniError = useCompanionStore((s) => s.setMiniError)
+  const setMiniSessions = useCompanionStore((s) => s.setMiniSessions)
+  const setMiniActiveSessionId = useCompanionStore((s) => s.setMiniActiveSessionId)
+  const removeMiniPendingAttachment = useCompanionStore((s) => s.removeMiniPendingAttachment)
+  const addMiniPendingAttachments = useCompanionStore((s) => s.addMiniPendingAttachments)
+
+  const systemPrompt = useCompanionStore((s) => s.miniSystemPromptTurnbased)
+  const maxNewTokens = useCompanionStore((s) => s.miniMaxNewTokens)
+  const lengthPenalty = useCompanionStore((s) => s.miniLengthPenalty)
+  const ttsEnabled = useCompanionStore((s) => s.miniTtsEnabled)
+  const streamingEnabled = useCompanionStore((s) => s.miniStreamingEnabled)
+
+  // ─── Refs ───────────────────────────────────────────────
+  const threadWrapRef = useRef<HTMLDivElement>(null)
+  const threadEndRef = useRef<HTMLDivElement>(null)
+  const textInputRef = useRef<HTMLTextAreaElement>(null)
+  const cameraInputRef = useRef<HTMLInputElement>(null)
+  const albumInputRef = useRef<HTMLInputElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const captureStateRef = useRef(createMicCapture())
+  const recordingStartRef = useRef(0)
+  const recordingActionRef = useRef<'send' | 'cancel'>('send')
+  const recordingPointerIdRef = useRef<number | null>(null)
+  const recordingPointerStartYRef = useRef<number | null>(null)
+  const abortRef = useRef<(() => void) | null>(null)
+  const playerRef = useRef<StreamingPcmPlayer | null>(null)
+  const isStreamAudioPlayingRef = useRef(false)
+  const messagesRef = useRef(messages)
+  messagesRef.current = messages
+
+  // ─── Helpers ───────────────────────────────────────────
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    const wrap = threadWrapRef.current
+    if (wrap) wrap.scrollTo({ top: wrap.scrollHeight, behavior })
+  }, [])
+
+  const autoGrowTextarea = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 140)}px`
+  }, [])
+
+  // ─── Service status polling ──────────────────────────
 
-  // Periodic webcam frame capture (only send when connected)
   useEffect(() => {
-    if (ws.connected && cameraEnabled) {
-      frameIntervalRef.current = setInterval(async () => {
-        const frame = await webcam.captureFrame()
-        if (frame) {
-          ws.sendFrame(frame)
-        }
-      }, 1000)
-    } else {
-      if (frameIntervalRef.current) {
-        clearInterval(frameIntervalRef.current)
-        frameIntervalRef.current = null
-      }
+    let cancelled = false
+    const poll = async () => {
+      const status = await fetchServiceStatus(backendHost)
+      if (!cancelled) setMiniServiceStatus(status)
     }
-    return () => {
-      if (frameIntervalRef.current) {
-        clearInterval(frameIntervalRef.current)
-        frameIntervalRef.current = null
+    void poll()
+    const interval = setInterval(poll, 15000)
+    return () => { cancelled = true; clearInterval(interval) }
+  }, [backendHost, setMiniServiceStatus])
+
+  // ─── Presets loading ─────────────────────────────────
+
+  useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      const presets = await fetchPresets(backendHost)
+      if (!cancelled) setMiniPresetsByMode(presets)
+    })()
+    return () => { cancelled = true }
+  }, [backendHost, setMiniPresetsByMode])
+
+  // ─── Scroll to bottom on new messages ────────────────
+
+  useEffect(() => {
+    scrollToBottom(isGenerating ? 'smooth' : 'auto')
+  }, [messages.length, pendingText, scrollToBottom])
+
+  // ─── Update sessions when messages change ────────────
+
+  useEffect(() => {
+    const activeSessionId = useCompanionStore.getState().miniActiveSessionId
+    if (messages.length === 0) return
+    setMiniSessions((prev) => {
+      const idx = prev.findIndex((s) => s.id === activeSessionId)
+      const title = deriveSessionTitle(messages)
+      const now = Date.now()
+      if (idx === -1) {
+        const created: MiniCPMoSession = { id: activeSessionId, title, createdAt: now, updatedAt: now, messages }
+        return [...prev, created]
+      }
+      const next = [...prev]
+      next[idx] = { ...next[idx]!, title, messages, updatedAt: now }
+      return next
+    })
+  }, [messages])
+
+  // ─── Build system prompt with scenario ───────────────
+
+  const buildSystemMessage = useCallback((): string | null => {
+    let prompt = systemPrompt.trim()
+    if (scenario) {
+      const sc = SCENARIOS.find((s) => s.id === scenario)
+      if (sc) {
+        prompt = `[场景: ${sc.name}]\n${sc.description || ''}\n\n${prompt}`
       }
     }
-  }, [ws.connected, cameraEnabled, webcam, ws])
+    return prompt || null
+  }, [systemPrompt, scenario])
 
-  // 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)
+  // ─── Submit message ─────────────────────────────────
+
+  const submitMessage = useCallback(async (nextMessages: MiniCPMoMessage[]) => {
+    const systemMessage = buildSystemMessage()
+
+    setMiniMessages(nextMessages)
+    setMiniIsGenerating(true)
+
+    if (streamingEnabled) {
+      const player = ttsEnabled ? new StreamingPcmPlayer(24000) : undefined
+      playerRef.current = player ?? null
+
+      const { abort } = submitChatStreaming(backendHost, nextMessages, systemMessage, maxNewTokens, lengthPenalty, ttsEnabled, {
+        onChunk: (text) => { setMiniPendingText(text) },
+        onAudioBase64: (data) => { player?.pushBase64(data) },
+        onDone: (text, sessionId) => {
+          const entry: MiniCPMoMessage = {
+            id: createId('assistant'),
+            role: 'assistant',
+            kind: 'assistant',
+            text,
+            audioPreviewUrl: null,
+            recordingSessionId: sessionId,
+          }
+          // flush player audio
+          if (player) {
+            const merged = player.getMergedFloat32()
+            if (merged && merged.length > 0) {
+              entry.audioPreviewUrl = float32ToWavBlobUrl(merged, player.getSampleRate())
+            }
+            player.markFinished()
+            player.disposeAfterDrain(() => { isStreamAudioPlayingRef.current = false })
+          }
+          const current = useCompanionStore.getState().miniMessages
+          setMiniMessages([...current, entry])
+          setMiniIsGenerating(false)
+          setMiniPendingText('')
+          if (sessionId) useCompanionStore.getState().setMiniLastSessionId(sessionId)
+        },
+        onError: (err) => {
+          const current = useCompanionStore.getState().miniMessages
+          setMiniMessages([...current, { id: createId('assistant'), role: 'assistant', kind: 'assistant', text: `错误: ${err}`, error: true }])
+          setMiniIsGenerating(false)
+          setMiniPendingText('')
+        },
+      }, player)
+      abortRef.current = abort
     } else {
-      if (screenShareIntervalRef.current) {
-        clearInterval(screenShareIntervalRef.current)
-        screenShareIntervalRef.current = null
+      try {
+        const { entry, sessionId } = await submitChatNonStreaming(backendHost, nextMessages, systemMessage, maxNewTokens, lengthPenalty, ttsEnabled)
+        setMiniMessages([...useCompanionStore.getState().miniMessages, entry])
+        if (sessionId) useCompanionStore.getState().setMiniLastSessionId(sessionId)
+      } catch (err) {
+        setMiniMessages([...useCompanionStore.getState().miniMessages, {
+          id: createId('assistant'), role: 'assistant', kind: 'assistant', text: `请求失败: ${err instanceof Error ? err.message : '未知错误'}`, error: true,
+        }])
       }
+      setMiniIsGenerating(false)
     }
-    return () => {
-      if (screenShareIntervalRef.current) {
-        clearInterval(screenShareIntervalRef.current)
-        screenShareIntervalRef.current = null
+  }, [backendHost, buildSystemMessage, maxNewTokens, lengthPenalty, ttsEnabled, streamingEnabled, setMiniMessages, setMiniIsGenerating, setMiniPendingText])
+
+  // ─── Send text message ──────────────────────────────
+
+  const sendTextMessage = useCallback(() => {
+    const text = draft.trim()
+    const atts = pendingAttachments
+    if ((!text && atts.length === 0) || isGenerating || isPreparingRecording) return
+
+    setMiniDraft('')
+    setMiniPendingAttachments([])
+    setMiniError(null)
+
+    const nextMessages: MiniCPMoMessage[] = [
+      ...messagesRef.current,
+      { id: createId('user'), role: 'user', kind: 'text', text, attachments: atts.length > 0 ? atts : undefined },
+    ]
+    void submitMessage(nextMessages)
+  }, [draft, pendingAttachments, isGenerating, isPreparingRecording, setMiniDraft, setMiniPendingAttachments, submitMessage])
+
+  // ─── Regenerate ─────────────────────────────────────
+
+  const regenerateLastReply = useCallback(() => {
+    if (isGenerating || isPreparingRecording) return
+    const current = messagesRef.current
+    let lastUserIndex = -1
+    for (let i = current.length - 1; i >= 0; i--) {
+      if (current[i]!.role === 'user') { lastUserIndex = i; break }
+    }
+    if (lastUserIndex < 0) return
+    const trimmed = current.slice(0, lastUserIndex + 1)
+    setMiniMessages(trimmed)
+    setMiniError(null)
+    void submitMessage(trimmed)
+  }, [isGenerating, isPreparingRecording, setMiniMessages, submitMessage])
+
+  // ─── Session management ─────────────────────────────
+
+  const startNewSession = useCallback(() => {
+    const newId = createId('session')
+    abortRef.current?.()
+    setMiniActiveSessionId(newId)
+    setMiniMessages([])
+    setMiniDraft('')
+    setMiniPendingAttachments([])
+    setMiniHistoryOpen(false)
+    setMiniError(null)
+  }, [setMiniActiveSessionId, setMiniMessages, setMiniDraft, setMiniPendingAttachments, setMiniHistoryOpen])
+
+  const switchToSession = useCallback((id: string) => {
+    if (id === useCompanionStore.getState().miniActiveSessionId) { setMiniHistoryOpen(false); return }
+    const sessions = useCompanionStore.getState().miniSessions
+    const target = sessions.find((s) => s.id === id)
+    if (!target) return
+    abortRef.current?.()
+    setMiniActiveSessionId(id)
+    setMiniMessages(target.messages)
+    setMiniDraft('')
+    setMiniPendingAttachments([])
+    setMiniHistoryOpen(false)
+    setMiniError(null)
+  }, [setMiniActiveSessionId, setMiniMessages, setMiniDraft, setMiniPendingAttachments, setMiniHistoryOpen])
+
+  const deleteSession = useCallback((id: string) => {
+    setMiniSessions((prev) => prev.filter((s) => s.id !== id))
+    if (id === useCompanionStore.getState().miniActiveSessionId) {
+      const remaining = useCompanionStore.getState().miniSessions.filter((s) => s.id !== id)
+      if (remaining.length > 0) {
+        switchToSession(remaining[0]!.id)
+      } else {
+        startNewSession()
       }
     }
-  }, [ws.connected, screenShare.isSharing, screenShare, ws])
+  }, [setMiniSessions])
 
-  // Send scenario context when connecting
-  useEffect(() => {
-    if (ws.connected && scenario) {
-      ws.sendText(`[Scenario: ${scenario}]`)
+  const clearAllData = useCallback(() => {
+    setMiniSessions([])
+    startNewSession()
+  }, [setMiniSessions, startNewSession])
+
+  // ─── Attachments ─────────────────────────────────────
+
+  const handleAttachFiles = useCallback(async (files: FileList | null, kind: 'image' | 'audio' | 'video') => {
+    if (!files || files.length === 0) return
+    const built: MiniCPMoAttachment[] = []
+    for (const f of Array.from(files)) {
+      try {
+        const att = kind === 'image' ? await downscaleImageToAttachment(f) : await mediaFileToAttachment(f, kind)
+        built.push(att as MiniCPMoAttachment)
+      } catch { /* skip */ }
     }
-  }, [ws.connected]) // only send on connect
+    if (built.length > 0) {
+      addMiniPendingAttachments(built)
+      setMiniAttachMenuOpen(false)
+    }
+  }, [addMiniPendingAttachments, setMiniAttachMenuOpen])
 
-  // Sync screen share stream to store
-  useEffect(() => {
-    setScreenShareStream(screenShare.stream)
-  }, [screenShare.stream, setScreenShareStream])
-
-  const handleSendText = useCallback(
-    (text: string) => {
-      ws.sendText(text)
-    },
-    [ws],
-  )
+  const handleCameraCapture = useCallback(async (files: FileList | null) => {
+    if (!files || !files[0]) return
+    try {
+      const att = await downscaleImageToAttachment(files[0])
+      addMiniPendingAttachments([att as MiniCPMoAttachment])
+      setMiniAttachMenuOpen(false)
+    } catch { /* ignore */ }
+  }, [addMiniPendingAttachments, setMiniAttachMenuOpen])
 
-  const handleResumeAudio = useCallback(() => {
-    companionAudio.resume()
-  }, [companionAudio])
+  // ─── Recording ──────────────────────────────────────
 
-  const handleToggleMic = useCallback(() => {
-    setMicEnabled(!micEnabled)
-  }, [micEnabled, setMicEnabled])
+  const beginRecordingCapture = useCallback(async (initiatingPointerId: number) => {
+    const state = captureStateRef.current
+    const stillHolding = () => recordingPointerIdRef.current === initiatingPointerId
 
-  const handleToggleCamera = useCallback(() => {
-    const next = !cameraEnabled
-    setCameraEnabled(next)
-    // When camera turns on, show as fullscreen background
-    if (next) {
-      setCameraFullscreen(true)
-    } else {
-      setCameraFullscreen(false)
+    let warm = state.ctx !== null && state.stream !== null
+    if (!warm) warm = await prewarmMic(state, backendHost)
+    if (!stillHolding()) return
+    if (!warm || !state.ctx || !state.stream) {
+      setMiniError('麦克风初始化失败')
+      coldDownMic(state)
+      return
+    }
+    if (state.ctx.state === 'suspended') await state.ctx.resume().catch(() => {})
+    if (!stillHolding()) return
+    if (state.ctx.state !== 'running') {
+      setMiniError('音频通道不可用')
+      coldDownMic(state)
+      return
     }
-  }, [cameraEnabled, setCameraEnabled, setCameraFullscreen])
+    setCapturing(state, true)
+  }, [setMiniError])
 
-  const handleFlipCamera = useCallback(async () => {
-    const nextMode = cameraFacingMode === 'user' ? 'environment' : 'user'
-    setCameraFacingMode(nextMode)
-    await cameraDevices.getStreamForFacingMode(nextMode)
-  }, [cameraFacingMode, setCameraFacingMode, cameraDevices])
+  const finalizeRecording = useCallback(async () => {
+    const state = captureStateRef.current
+    setCapturing(state, false)
+    recordingPointerIdRef.current = null
 
-  const handleScreenShareClick = useCallback(() => {
-    if (screenShare.isSharing) {
-      screenShare.stopScreenShare()
-    } else {
-      setScreenShareDialogOpen(true)
+    const result = finalizeRecordingChunks(state)
+    if (!result) return
+
+    const carriedAttachments = pendingAttachments
+    if (carriedAttachments.length > 0) setMiniPendingAttachments([])
+
+    const nextMessages: MiniCPMoMessage[] = [
+      ...messagesRef.current,
+      {
+        id: createId('voice'),
+        role: 'user',
+        kind: 'voice',
+        audioBase64: result.audioBase64,
+        durationMs: performance.now() - recordingStartRef.current,
+        previewUrl: result.previewUrl,
+        attachments: carriedAttachments.length > 0 ? carriedAttachments : undefined,
+      },
+    ]
+    setMiniRecording(false)
+    setMiniPreparingRecording(false)
+    void submitMessage(nextMessages)
+  }, [pendingAttachments, setMiniPendingAttachments, setMiniRecording, setMiniPreparingRecording, submitMessage])
+
+  const handleTalkPointerDown = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
+    if (isRecording || isPreparingRecording) return
+    recordingPointerStartYRef.current = event.clientY
+    recordingPointerIdRef.current = event.pointerId
+    recordingActionRef.current = 'send'
+    captureStateRef.current.chunks = []
+    recordingStartRef.current = performance.now()
+    setMiniRecording(true)
+    setMiniError(null)
+    try { event.currentTarget.setPointerCapture(event.pointerId) } catch { /* ignore */ }
+    void beginRecordingCapture(event.pointerId)
+  }, [isRecording, isPreparingRecording, setMiniRecording, beginRecordingCapture])
+
+  const handleTalkPointerMove = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
+    if (recordingPointerIdRef.current !== event.pointerId) return
+    const startY = recordingPointerStartYRef.current
+    if (startY === null) return
+    setMiniRecordingWillCancel(startY - event.clientY > CANCEL_DRAG_PX)
+  }, [setMiniRecordingWillCancel])
+
+  const handleTalkPointerUp = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
+    if (recordingPointerIdRef.current !== event.pointerId && recordingPointerIdRef.current !== null) return
+    try { event.currentTarget.releasePointerCapture(event.pointerId) } catch { /* ignore */ }
+
+    if (!isRecording) {
+      recordingPointerIdRef.current = null
+      return
+    }
+
+    if (recordingWillCancel) {
+      coldDownMic(captureStateRef.current)
+      setMiniRecording(false)
+      setMiniPreparingRecording(false)
+      recordingPointerIdRef.current = null
+      return
     }
-  }, [screenShare, setScreenShareDialogOpen])
 
-  const handleStartScreenShare = useCallback(async () => {
-    await screenShare.startScreenShare()
-  }, [screenShare])
+    void finalizeRecording()
+  }, [isRecording, recordingWillCancel, finalizeRecording, setMiniRecording, setMiniPreparingRecording])
+
+  const handleTalkPointerCancel = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
+    if (recordingPointerIdRef.current !== event.pointerId && recordingPointerIdRef.current !== null) return
+    coldDownMic(captureStateRef.current)
+    setMiniRecording(false)
+    setMiniPreparingRecording(false)
+    recordingPointerIdRef.current = null
+  }, [setMiniRecording, setMiniPreparingRecording])
+
+  // ─── Attach menu drawing ───────────────────────────
+
+  const attachItems = [
+    { icon: IconCamera, label: '拍照', onClick: () => cameraInputRef.current?.click() },
+    { icon: IconPhoto, label: '相册', onClick: () => albumInputRef.current?.click() },
+    { icon: IconFile, label: '文件', onClick: () => fileInputRef.current?.click() },
+  ]
+
+  // ─── Render ──────────────────────────────────────────
+
+  const currentScenario = scenario ? SCENARIOS.find((s) => s.id === scenario) : null
 
   return (
-    <div className="relative h-full w-full overflow-hidden bg-black">
-      {/* Video background + content */}
-      <CompanionVideoPanel
-        webcamStream={webcam.stream}
-        speaking={speaking}
-        generating={generating}
-        status={status}
-        onFlipCamera={handleFlipCamera}
-      />
+    <div className="relative h-full w-full overflow-hidden bg-[#131313] flex flex-col">
+      {/* Hidden file inputs */}
+      <input ref={cameraInputRef} type="file" accept="image/*" capture="environment" hidden
+        onChange={(e) => { void handleCameraCapture(e.target.files); e.target.value = '' }} />
+      <input ref={albumInputRef} type="file" accept="image/*" multiple hidden
+        onChange={(e) => { void handleAttachFiles(e.target.files, 'image'); e.target.value = '' }} />
+      <input ref={fileInputRef} type="file" accept="image/*,audio/*,video/*" multiple hidden
+        onChange={(e) => { void handleAttachFiles(e.target.files, 'image'); e.target.value = '' }} />
 
-      {/* Top bar with scenario selector + subtitle toggle */}
-      <CompanionTopBar />
+      {/* ─── Top Bar ────────────────────────────────────── */}
+      <header className="flex items-center gap-2 px-3 py-2.5 border-b border-white/5 shrink-0">
+        <button
+          type="button"
+          onClick={() => setMiniHistoryOpen(true)}
+          className="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/5 text-white/50 hover:text-white/80 transition-colors"
+        >
+          <IconHamburger className="w-5 h-5" />
+        </button>
 
-      {/* Scenario selection panel overlay */}
-      <ScenarioSelector />
+        <div className="flex-1 flex items-center justify-center gap-2">
+          <button
+            type="button"
+            onClick={() => useCompanionStore.getState().setScenarioPanelOpen(true)}
+            className="flex items-center gap-1.5 px-3 h-7 rounded-full bg-white/5 border border-white/8 hover:bg-white/10 transition-all text-white/60 hover:text-white/80"
+          >
+            {currentScenario ? (
+              <>
+                <span className="material-symbols-outlined text-sm">{currentScenario.icon}</span>
+                <span className="text-xs font-medium">{currentScenario.name}</span>
+              </>
+            ) : (
+              <span className="text-xs font-medium">选择场景</span>
+            )}
+            <span className="material-symbols-outlined text-xs text-white/20">expand_more</span>
+          </button>
+        </div>
 
-      {/* Screen share dialog overlay */}
-      <ScreenShareDialog onStartScreenShare={handleStartScreenShare} />
+        <div className="flex items-center gap-1">
+          {/* Status dot */}
+          <span className={`w-1.5 h-1.5 rounded-full ${
+            serviceStatus.phase === 'ready' ? 'bg-green-500' :
+            serviceStatus.phase === 'error' ? 'bg-red-500' : 'bg-yellow-500 animate-pulse'
+          }`} title={serviceStatus.detail} />
+          <button
+            type="button"
+            onClick={() => setMiniSettingsOpen(true)}
+            className="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/5 text-white/50 hover:text-white/80 transition-colors"
+          >
+            <IconSettings className="w-5 h-5" />
+          </button>
+        </div>
+      </header>
+
+      {/* ─── Messages Thread ───────────────────────────── */}
+      <div ref={threadWrapRef} className="flex-1 overflow-y-auto px-4 py-3">
+        <div ref={threadEndRef} />
+        {messages.length === 0 && !isGenerating && (
+          <div className="flex flex-col items-center justify-center h-full text-white/15">
+            <span className="material-symbols-outlined text-5xl mb-3">chat</span>
+            <p className="text-sm">开始一段新对话</p>
+            <p className="text-xs mt-1">点击下方按钮发送消息或录音</p>
+          </div>
+        )}
+        {messages.map((msg, idx) => (
+          <MessageBubble
+            key={msg.id}
+            msg={msg}
+            isLastAssistant={msg.role === 'assistant' && idx === messages.length - 1}
+            isStreaming={isGenerating && idx === messages.length - 1}
+            onRegenerate={regenerateLastReply}
+          />
+        ))}
+        {isGenerating && <PendingReply text={pendingText} />}
+        <div />
+      </div>
 
-      {/* Error overlay */}
+      {/* ─── Error ──────────────────────────────────────── */}
       {error && (
-        <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">
+        <div className="px-4 py-2 mx-3 mb-1 rounded-lg bg-red-500/10 border border-red-500/20 text-red-300 text-xs text-center">
           {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>
+      {/* ─── Pending Attachments Strip ─────────────────── */}
+      {pendingAttachments.length > 0 && (
+        <div className="flex gap-1.5 px-4 py-1.5 overflow-x-auto shrink-0">
+          {pendingAttachments.map((a) => (
+            <div key={a.id} className="relative shrink-0">
+              {a.kind === 'image' ? (
+                <img src={a.previewUrl} alt="" className="w-12 h-12 rounded-lg object-cover" />
+              ) : (
+                <div className="w-12 h-12 rounded-lg bg-white/8 flex items-center justify-center text-white/40">
+                  <span className="material-symbols-outlined text-lg">
+                    {a.kind === 'audio' ? 'music_note' : 'movie'}
+                  </span>
+                </div>
+              )}
+              <button
+                type="button"
+                onClick={() => removeMiniPendingAttachment(a.id)}
+                className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-red-500/80 text-white flex items-center justify-center text-xs hover:bg-red-500"
+              >
+                ×
+              </button>
+            </div>
+          ))}
         </div>
       )}
 
-      {/* Transcript + text input */}
-      <CompanionTranscript
-        transcript={transcript}
-        fullTranscript={fullTranscript}
-        generating={generating || speaking}
-        onSendText={handleSendText}
-        disabled={status !== 'connected'}
-      />
+      {/* ─── Composer ──────────────────────────────────── */}
+      <div className="shrink-0 px-3 pb-3 pt-1">
+        <div className={`flex items-center gap-1.5 bg-white/5 border border-white/8 rounded-2xl px-2 py-1.5 transition-all ${
+          isGenerating ? 'border-orange-400/30' : ''
+        }`}>
+          {/* Camera button */}
+          <button
+            type="button"
+            onClick={() => cameraInputRef.current?.click()}
+            disabled={isGenerating || isPreparingRecording}
+            className="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/5 text-white/40 hover:text-white/70 disabled:opacity-30 transition-colors"
+          >
+            <IconCamera className="w-5 h-5" />
+          </button>
 
-      {/* 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}
-        onResumeAudio={handleResumeAudio}
+          {/* Main input area */}
+          {composeMode === 'text' ? (
+            <form
+              onSubmit={(e) => { e.preventDefault(); sendTextMessage() }}
+              className="flex-1 flex items-center"
+            >
+              <textarea
+                ref={textInputRef}
+                value={draft}
+                onChange={(e) => { setMiniDraft(e.target.value); autoGrowTextarea(e.target) }}
+                onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendTextMessage() } }}
+                placeholder="输入消息..."
+                rows={1}
+                disabled={isGenerating || isPreparingRecording}
+                className="flex-1 bg-transparent text-sm text-white/80 placeholder-white/20 outline-none resize-none max-h-[140px] px-1 py-1.5"
+              />
+              {draft.trim() || pendingAttachments.length > 0 ? (
+                <button
+                  type="submit"
+                  disabled={isGenerating}
+                  className="w-9 h-9 flex items-center justify-center rounded-xl bg-orange-500/20 text-orange-300 hover:bg-orange-500/30 transition-colors disabled:opacity-30"
+                >
+                  <IconSend className="w-4.5 h-4.5" />
+                </button>
+              ) : null}
+            </form>
+          ) : (
+            <button
+              type="button"
+              onPointerDown={handleTalkPointerDown}
+              onPointerMove={handleTalkPointerMove}
+              onPointerUp={handleTalkPointerUp}
+              onPointerCancel={handleTalkPointerCancel}
+              disabled={isGenerating}
+              className={`flex-1 h-9 flex items-center justify-center rounded-xl transition-all ${
+                isRecording
+                  ? 'bg-orange-500/20 text-orange-300'
+                  : isGenerating
+                  ? 'bg-white/5 text-white/30'
+                  : 'bg-white/5 text-white/50 hover:bg-white/10 hover:text-white/70'
+              } disabled:opacity-40`}
+            >
+              <span className="text-xs font-medium">
+                {isRecording ? '录音中...' : isGenerating ? '等待回复...' : '按住说话'}
+              </span>
+            </button>
+          )}
+
+          {/* Mode switch: keyboard <-> voice */}
+          <button
+            type="button"
+            onClick={() => {
+              setMiniComposeMode(composeMode === 'voice' ? 'text' : 'voice')
+              if (composeMode === 'voice') {
+                setTimeout(() => textInputRef.current?.focus(), 100)
+              }
+            }}
+            disabled={isGenerating || isPreparingRecording}
+            className="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/5 text-white/40 hover:text-white/70 disabled:opacity-30 transition-colors"
+          >
+            {composeMode === 'voice' ? <IconKeyboard className="w-5 h-5" /> : <IconWave className="w-5 h-5" />}
+          </button>
+
+          {/* Attach button */}
+          <button
+            type="button"
+            onClick={() => setMiniAttachMenuOpen(!attachMenuOpen)}
+            disabled={isGenerating || isPreparingRecording}
+            className={`w-9 h-9 flex items-center justify-center rounded-xl transition-colors ${
+              attachMenuOpen ? 'bg-orange-500/15 text-orange-300' : 'hover:bg-white/5 text-white/40 hover:text-white/70'
+            } disabled:opacity-30`}
+          >
+            {attachMenuOpen ? <IconClose className="w-5 h-5" /> : <IconPlus className="w-5 h-5" />}
+          </button>
+
+          {/* Send / Stop button */}
+          {isGenerating || (composeMode === 'text' && draft.trim()) || pendingAttachments.length > 0 ? (
+            composeMode === 'voice' && !isGenerating && !draft.trim() && pendingAttachments.length === 0 ? null : (
+              <button
+                type="button"
+                onClick={() => {
+                  if (isGenerating) {
+                    abortRef.current?.()
+                    setMiniIsGenerating(false)
+                    setMiniPendingText('')
+                    return
+                  }
+                  sendTextMessage()
+                }}
+                className={`w-9 h-9 flex items-center justify-center rounded-xl transition-colors ${
+                  isGenerating
+                    ? 'bg-red-500/20 text-red-300 hover:bg-red-500/30'
+                    : 'bg-orange-500/20 text-orange-300 hover:bg-orange-500/30'
+                }`}
+              >
+                {isGenerating ? <IconStop className="w-4.5 h-4.5" /> : <IconSend className="w-4.5 h-4.5" />}
+              </button>
+            )
+          ) : null}
+        </div>
+
+        {/* Attach menu drawer */}
+        {attachMenuOpen && (
+          <div className="flex items-center gap-2 mt-2 px-1">
+            {attachItems.map((item) => (
+              <button
+                key={item.label}
+                type="button"
+                onClick={item.onClick}
+                className="flex flex-col items-center gap-1 px-3 py-2 rounded-xl hover:bg-white/5 transition-colors"
+              >
+                <item.icon className="w-6 h-6 text-white/40" />
+                <span className="text-[10px] text-white/30">{item.label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ─── Overlays ───────────────────────────────────── */}
+      {isRecording && <RecordingOverlay willCancel={recordingWillCancel} />}
+      <ScenarioSelector />
+      <SettingsSheet open={settingsOpen} onClose={() => setMiniSettingsOpen(false)} />
+      <HistoryDrawer
+        open={historyOpen}
+        onClose={() => setMiniHistoryOpen(false)}
+        onSwitch={switchToSession}
+        onDelete={deleteSession}
+        onNewSession={startNewSession}
+        onClearAll={clearAllData}
       />
     </div>
   )

desktop/src/stores/companionStore.ts

@@ -1,5 +1,13 @@
 import { create } from 'zustand'
-import type { CompanionStatus, ScenarioOption } from '../types/companion'
+import type {
+  CompanionStatus,
+  ScenarioOption,
+  MiniCPMoMessage,
+  MiniCPMoServiceStatus,
+  MiniCPMoPresetMode,
+  MiniCPMoPreset,
+  MiniCPMoAttachment,
+} from '../types/companion'
 
 const AVATAR_KEY = 'companion-avatar-url'
 const BACKGROUND_KEY = 'companion-background-url'
@@ -139,10 +147,81 @@ interface CompanionStore {
   setScreenShareDialogOpen: (open: boolean) => void
   setStatusText: (text: string) => void
   setCameraFullscreen: (fullscreen: boolean) => void
+
+  // ─── MiniCPM-o state ──────────────────────────────────
+  backendHost: string
+  miniMessages: MiniCPMoMessage[]
+  miniIsGenerating: boolean
+  miniPendingText: string
+  miniServiceStatus: MiniCPMoServiceStatus
+  miniPresetsByMode: Record<MiniCPMoPresetMode, MiniCPMoPreset[]>
+  miniSettingsOpen: boolean
+  miniSettingsSheetMode: MiniCPMoPresetMode
+  miniSystemPromptTurnbased: string
+  miniMaxNewTokens: number
+  miniLengthPenalty: number
+  miniTtsEnabled: boolean
+  miniStreamingEnabled: boolean
+  miniError: string | null
+  miniLastSessionId: string | null
+  miniSessions: MiniCPMoSession[]
+  miniActiveSessionId: string
+  miniComposeMode: 'voice' | 'text'
+  miniDraft: string
+  miniPendingAttachments: MiniCPMoAttachment[]
+  miniAttachMenuOpen: boolean
+  miniRecording: boolean
+  miniPreparingRecording: boolean
+  miniRecordingWillCancel: boolean
+  miniHistoryOpen: boolean
+
+  setBackendHost: (host: string) => void
+  setMiniMessages: (msgs: MiniCPMoMessage[]) => void
+  appendMiniMessage: (msg: MiniCPMoMessage) => void
+  setMiniIsGenerating: (v: boolean) => void
+  setMiniPendingText: (t: string) => void
+  setMiniServiceStatus: (s: MiniCPMoServiceStatus) => void
+  setMiniPresetsByMode: (p: Record<MiniCPMoPresetMode, MiniCPMoPreset[]>) => void
+  setMiniSettingsOpen: (o: boolean) => void
+  setMiniSettingsSheetMode: (m: MiniCPMoPresetMode) => void
+  setMiniSystemPromptTurnbased: (v: string) => void
+  setMiniMaxNewTokens: (v: number) => void
+  setMiniLengthPenalty: (v: number) => void
+  setMiniTtsEnabled: (v: boolean) => void
+  setMiniStreamingEnabled: (v: boolean) => void
+  setMiniError: (e: string | null) => void
+  setMiniLastSessionId: (id: string | null) => void
+  setMiniSessions: (s: MiniCPMoSession[] | ((prev: MiniCPMoSession[]) => MiniCPMoSession[])) => void
+  setMiniActiveSessionId: (id: string) => void
+  setMiniComposeMode: (m: 'voice' | 'text') => void
+  setMiniDraft: (d: string) => void
+  setMiniPendingAttachments: (a: MiniCPMoAttachment[]) => void
+  setMiniAttachMenuOpen: (o: boolean) => void
+  setMiniRecording: (v: boolean) => void
+  setMiniPreparingRecording: (v: boolean) => void
+  setMiniRecordingWillCancel: (v: boolean) => void
+  setMiniHistoryOpen: (o: boolean) => void
+  removeMiniPendingAttachment: (id: string) => void
+  addMiniPendingAttachments: (a: MiniCPMoAttachment[]) => void
+}
+
+export type MiniCPMoSession = {
+  id: string
+  title: string
+  createdAt: number
+  updatedAt: number
+  messages: MiniCPMoMessage[]
 }
 
 const DEFAULT_SERVER_URL = 'ws://127.0.0.1:8889/ws/companion'
 
+// llama backend defaults — switch DEFAULT_BACKEND_HOST to use omni-adapter
+const DEFAULT_BACKEND_HOST = 'http://localhost:9301'
+
+function createId(prefix: string): string {
+  return `${prefix}-${Math.random().toString(36).slice(2, 10)}`
+}
+
 export const useCompanionStore = create<CompanionStore>((set) => ({
   status: 'disconnected',
   serverUrl: DEFAULT_SERVER_URL,
@@ -169,6 +248,33 @@ export const useCompanionStore = create<CompanionStore>((set) => ({
   statusText: '你可以开始说话',
   cameraFullscreen: false,
 
+  // ─── MiniCPM-o defaults ────────────────────────────────
+  backendHost: DEFAULT_BACKEND_HOST,
+  miniMessages: [],
+  miniIsGenerating: false,
+  miniPendingText: '',
+  miniServiceStatus: { phase: 'loading', summary: '连接中...', detail: '正在连接后端服务' },
+  miniPresetsByMode: { turnbased: [], audio_duplex: [], omni: [] },
+  miniSettingsOpen: false,
+  miniSettingsSheetMode: 'turnbased',
+  miniSystemPromptTurnbased: '你的任务是作为一个助手认真、高质量地回复用户的问题。请用高自然度的方式和用户聊天。',
+  miniMaxNewTokens: 256,
+  miniLengthPenalty: 1.1,
+  miniTtsEnabled: true,
+  miniStreamingEnabled: true,
+  miniError: null,
+  miniLastSessionId: null,
+  miniSessions: [],
+  miniActiveSessionId: createId('session'),
+  miniComposeMode: 'voice',
+  miniDraft: '',
+  miniPendingAttachments: [],
+  miniAttachMenuOpen: false,
+  miniRecording: false,
+  miniPreparingRecording: false,
+  miniRecordingWillCancel: false,
+  miniHistoryOpen: false,
+
   setServerUrl: (url) => set({ serverUrl: url }),
   setVoiceName: (name) => set({ voiceName: name }),
   setStatus: (status) => set({ status, error: status === 'error' ? undefined : null }),
@@ -216,4 +322,41 @@ export const useCompanionStore = create<CompanionStore>((set) => ({
   setScreenShareDialogOpen: (open) => set({ screenShareDialogOpen: open }),
   setStatusText: (text) => set({ statusText: text }),
   setCameraFullscreen: (fullscreen) => set({ cameraFullscreen: fullscreen }),
+
+  // ─── MiniCPM-o actions ──────────────────────────────────
+  setBackendHost: (host) => set({ backendHost: host }),
+  setMiniMessages: (msgs) => set({ miniMessages: msgs }),
+  appendMiniMessage: (msg) =>
+    set((s) => ({ miniMessages: [...s.miniMessages, msg] })),
+  setMiniIsGenerating: (v) => set({ miniIsGenerating: v, miniPendingText: v ? '' : '' }),
+  setMiniPendingText: (t) => set({ miniPendingText: t }),
+  setMiniServiceStatus: (s) => set({ miniServiceStatus: s }),
+  setMiniPresetsByMode: (p) => set({ miniPresetsByMode: p }),
+  setMiniSettingsOpen: (o) => set({ miniSettingsOpen: o }),
+  setMiniSettingsSheetMode: (m) => set({ miniSettingsSheetMode: m }),
+  setMiniSystemPromptTurnbased: (v) => set({ miniSystemPromptTurnbased: v }),
+  setMiniMaxNewTokens: (v) => set({ miniMaxNewTokens: v }),
+  setMiniLengthPenalty: (v) => set({ miniLengthPenalty: v }),
+  setMiniTtsEnabled: (v) => set({ miniTtsEnabled: v }),
+  setMiniStreamingEnabled: (v) => set({ miniStreamingEnabled: v }),
+  setMiniError: (e) => set({ miniError: e }),
+  setMiniLastSessionId: (id) => set({ miniLastSessionId: id }),
+  setMiniSessions: (s) => set((state) => ({ miniSessions: typeof s === 'function' ? s(state.miniSessions) : s })),
+  setMiniActiveSessionId: (id) => set({ miniActiveSessionId: id }),
+  setMiniComposeMode: (m) => set({ miniComposeMode: m }),
+  setMiniDraft: (d) => set({ miniDraft: d }),
+  setMiniPendingAttachments: (a) => set({ miniPendingAttachments: a }),
+  setMiniAttachMenuOpen: (o) => set({ miniAttachMenuOpen: o }),
+  setMiniRecording: (v) => set({ miniRecording: v }),
+  setMiniPreparingRecording: (v) => set({ miniPreparingRecording: v }),
+  setMiniRecordingWillCancel: (v) => set({ miniRecordingWillCancel: v }),
+  setMiniHistoryOpen: (o) => set({ miniHistoryOpen: o }),
+  removeMiniPendingAttachment: (id) =>
+    set((s) => ({
+      miniPendingAttachments: s.miniPendingAttachments.filter((a) => a.id !== id),
+    })),
+  addMiniPendingAttachments: (a) =>
+    set((s) => ({
+      miniPendingAttachments: [...s.miniPendingAttachments, ...a],
+    })),
 }))

desktop/src/types/companion.ts

@@ -27,3 +27,85 @@ export type CompanionClientMessage =
   | { type: 'stop' }
   | { type: 'end' }
   | { type: 'context'; voice?: string }
+
+// ─── MiniCPM-o types ──────────────────────────────────────
+
+export type MiniCPMoAttachment =
+  | {
+      id: string
+      kind: 'image'
+      previewUrl: string
+      base64: string
+      name: string
+    }
+  | {
+      id: string
+      kind: 'audio'
+      previewUrl: string
+      base64: string
+      name: string
+      duration?: number
+    }
+  | {
+      id: string
+      kind: 'video'
+      previewUrl: string
+      base64: string
+      name: string
+      duration?: number
+    }
+
+export type MiniCPMoMessage =
+  | {
+      id: string
+      role: 'assistant'
+      kind: 'assistant'
+      text: string
+      error?: boolean
+      interrupted?: boolean
+      audioPreviewUrl?: string | null
+      audioBase64?: string | null
+      audioSampleRate?: number | null
+      recordingSessionId?: string | null
+    }
+  | {
+      id: string
+      role: 'user'
+      kind: 'text'
+      text: string
+      attachments?: MiniCPMoAttachment[]
+    }
+  | {
+      id: string
+      role: 'user'
+      kind: 'voice'
+      audioBase64: string
+      durationMs: number
+      previewUrl: string
+      attachments?: MiniCPMoAttachment[]
+    }
+
+export type MiniCPMoServiceStatus = {
+  phase: 'loading' | 'ready' | 'error'
+  summary: string
+  detail: string
+}
+
+export type MiniCPMoPresetMode = 'turnbased' | 'audio_duplex' | 'omni'
+
+export type MiniCPMoPreset = {
+  id: string
+  order?: number
+  name: string
+  description?: string
+  system_prompt?: string
+}
+
+export interface MiniCPMoBackendContentItem {
+  type: 'text' | 'audio' | 'image' | 'video'
+  text?: string
+  data?: string
+  path?: string
+  name?: string
+  duration?: number
+}