feat(web): 用户侧体验补齐——思维链/工具卡数据源 + 图片附件 + 语音上行 + home/vision/voice 真表现

- 打通 thinking/tool_call 运行时数据源：openai 发 thinking_*(reasoning_content)/tool_call_*
  (delta.tool_calls 累积重新组装 Args 非 JSON 串)；anthropic_stream 发 thinking_*(content_block
  thinking start/delta/stop)。ws_bridge 已映射 thinking.*/tool_call.*，前端渲染活。
- 前端消息模型 + 附件：ChatMessage 加 image?；ChatInput 加附件按钮(file→base64)、预览/移除、
  image-aware onSend(text,image)；VisionMessageBody 升级图像卡+识别 chip；VoiceMessageBody
  升级通话控制卡(live2D预留/波形/静音/挂断)；HomeMessageBody 读真实 deviceUpdates(去掉
  sampleDevices 猜)。
- 激活 voice_input：ChatShell onVoice 不再 no-op → sendUp voice_input + 切 voice mode。
- addTool 改按工具名 upsert(修复 tool_call.start/end 重复卡)；ws_mode_switch 应用 agent 驱动
  mode；addUserMessage/beginAssistant 带 image/mode；chatStream/useChat.send 带 image。
- 新增 image/phone 图标。

已知限制(标注)：图片仅前端收集(后端 chatRequest 无 image 字段未接真推理)；流式工具卡无真实
工具名(StreamEvent 只带 ID，回退 tool_<id前缀>)；mode 由 agent 驱动但后端未逐消息下发 mode
(mode_switch 回显+默认当前 mode 兜底)；voice 为 UI+voice_input 上行(真实通话后置)。
go build/vet/test + 前端 tsc 绿。

frontend/web/src/components/ChatInput.tsx

@@ -3,7 +3,7 @@ import { Button } from "./primitives";
 import { Icon } from "./Icon";
 
 export interface ChatInputProps {
-  onSend: (text: string) => void;
+  onSend: (text: string, image?: string) => void;
   sending: boolean;
   onVoice: () => void;
   placeholder?: string;
@@ -16,7 +16,9 @@ export function ChatInput({
   placeholder = "给昔涟发消息…",
 }: ChatInputProps): React.ReactNode {
   const [value, setValue] = useState("");
+  const [pendingImage, setPendingImage] = useState<string | undefined>(undefined);
   const taRef = useRef<HTMLTextAreaElement>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
 
   // auto-grow the textarea up to a max height
   useEffect(() => {
@@ -26,45 +28,92 @@ export function ChatInput({
     el.style.height = Math.min(el.scrollHeight, 140) + "px";
   }, [value]);
 
+  const onPickFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") setPendingImage(reader.result);
+    };
+    reader.readAsDataURL(f);
+    e.target.value = "";
+  };
+
+  const canSend = value.trim().length > 0 || Boolean(pendingImage);
+
   const submit = () => {
-    const t = value.trim();
-    if (!t || sending) return;
-    onSend(t);
+    if (sending || !canSend) return;
+    onSend(value.trim(), pendingImage);
     setValue("");
+    setPendingImage(undefined);
   };
 
   return (
     <div className="glass sticky bottom-0 border-t border-[var(--mu-glass-border)] p-3 md:p-4">
-      <div className="mx-auto flex max-w-2xl items-end gap-2 rounded-[var(--mu-radius-lg)] bg-[var(--mu-surface-2)] p-2 shadow-[var(--mu-shadow-1)]">
-        <textarea
-          ref={taRef}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              submit();
-            }
-          }}
-          rows={1}
-          placeholder={placeholder}
-          className="max-h-[140px] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-[var(--mu-text-hi)] outline-none placeholder:text-[var(--mu-text-lo)]"
-        />
-        <button
-          onClick={onVoice}
-          aria-label="语音"
-          className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-base transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
-        >
-          <Icon name="mic" size={18} />
-        </button>
-        <Button
-          variant="primary"
-          onClick={submit}
-          disabled={sending || value.trim().length === 0}
-          className="shrink-0"
-        >
-          {sending ? "发送中…" : "发送"}
-        </Button>
+      <div className="mx-auto flex max-w-2xl flex-col gap-2">
+        {pendingImage ? (
+          <div className="relative inline-flex w-fit overflow-hidden rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)]">
+            <img
+              src={pendingImage}
+              alt="待发送图片"
+              className="h-20 w-20 object-cover"
+            />
+            <button
+              onClick={() => setPendingImage(undefined)}
+              aria-label="移除图片"
+              className="absolute right-1 top-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-[var(--mu-surface-4)]/90 text-[var(--mu-text-hi)] transition-transform duration-200 hover:scale-110"
+            >
+              <Icon name="close" size={12} />
+            </button>
+          </div>
+        ) : null}
+        <div className="flex items-end gap-2 rounded-[var(--mu-radius-lg)] bg-[var(--mu-surface-2)] p-2 shadow-[var(--mu-shadow-1)]">
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={onPickFile}
+          />
+          <button
+            onClick={() => fileRef.current?.click()}
+            aria-label="发送图片"
+            title="发送图片"
+            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-base transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+          >
+            <Icon name="image" size={18} />
+          </button>
+          <textarea
+            ref={taRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                submit();
+              }
+            }}
+            rows={1}
+            placeholder={placeholder}
+            className="max-h-[140px] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-[var(--mu-text-hi)] outline-none placeholder:text-[var(--mu-text-lo)]"
+          />
+          <button
+            onClick={onVoice}
+            aria-label="语音"
+            title="发起语音通话"
+            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-base transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+          >
+            <Icon name="mic" size={18} />
+          </button>
+          <Button
+            variant="primary"
+            onClick={submit}
+            disabled={sending || !canSend}
+            className="shrink-0"
+          >
+            {sending ? "发送中…" : "发送"}
+          </Button>
+        </div>
       </div>
     </div>
   );

frontend/web/src/components/Icon.tsx

@@ -44,7 +44,9 @@ export type IconName =
   | "vision"         // 👁 vision (visibility_rounded)
   | "home"           // 🏠 home (home_rounded)
   | "arrow"          // → direction (arrow_forward_rounded)
-  | "terminal"       // 🖥 code (terminal_rounded);
+  | "terminal"       // 🖥 code (terminal_rounded)
+  | "image"          // 🖼 attachment/vision (image_rounded)
+  | "phone"          // 📞 voice call / hang up (call_rounded);
 
 const ICON_PATHS: Record<IconName, string> = {
   chart:
@@ -119,6 +121,10 @@ const ICON_PATHS: Record<IconName, string> = {
     "M5 11h10.2l-3.6-3.6L13 6l6 6-6 6-1.4-1.4 3.6-3.6H5v-2Z",
   terminal:
     "M4 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4Zm2.5 4 3 3.5-3 3.5L4.6 12l2.4-2.5-1-1 1-1.5Zm5.5 7h5v1.5h-5V14Z",
+  image:
+    "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2ZM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5Z",
+  phone:
+    "M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z",
 };
 
 export interface IconProps {

frontend/web/src/components/chat.tsx

@@ -87,14 +87,23 @@ export function MessageBubble({ message }: { message: ChatMessage }): React.Reac
 /** User-side bubble. The outer accent pill is shared; the inner content may be
  *  mode-shaped (e.g. code request renders in a mono pre). */
 function UserBubble({ message, mode }: { message: ChatMessage; mode: Mode }): React.ReactNode {
+  const body: React.ReactNode =
+    mode === "code" ? (
+      <pre className="whitespace-pre-wrap font-mono text-xs leading-relaxed">{message.content}</pre>
+    ) : message.content ? (
+      <span className="whitespace-pre-wrap">{message.content}</span>
+    ) : null;
   return (
     <div className="mu-rise-in flex justify-end">
       <div className="max-w-[80%] rounded-[var(--mu-radius-lg)] bg-[var(--mu-accent)] px-4 py-2.5 text-sm text-white shadow-[var(--mu-shadow-1)]">
-        {mode === "code" ? (
-          <pre className="whitespace-pre-wrap font-mono text-xs leading-relaxed">{message.content}</pre>
-        ) : (
-          <span className="whitespace-pre-wrap">{message.content}</span>
-        )}
+        {message.image ? (
+          <img
+            src={message.image}
+            alt="附件"
+            className="mb-1.5 block max-h-56 rounded-[var(--mu-radius-sm)] object-cover"
+          />
+        ) : null}
+        {body}
       </div>
     </div>
   );

frontend/web/src/components/messages/index.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import type { ChatMessage, Mode } from "../../lib/types";
 import { Tag } from "../primitives";
 import { Icon } from "../Icon";
+import { useAppStore } from "../../store/useAppStore";
 
 /**
  * Mode-specific assistant message bodies (design/07 §2). The shared outer
@@ -58,9 +60,11 @@ export function DocsMessageBody({ message }: { message: ChatMessage }): ReactNod
   );
 }
 
-/** home — device card line (icons + state chips). */
+/** home — device card line. Real device states come from the WS device_update
+ *  stream (store.deviceUpdates) rather than guessing names from the reply text. */
 export function HomeMessageBody({ message }: { message: ChatMessage }): ReactNode {
-  const devices = sampleDevices(message.content);
+  const deviceUpdates = useAppStore((s) => s.deviceUpdates);
+  const devices = deviceUpdates.slice(0, 8);
   return (
     <div className="space-y-2">
       {message.content ? (
@@ -68,8 +72,8 @@ export function HomeMessageBody({ message }: { message: ChatMessage }): ReactNod
       ) : null}
       {devices.length > 0 ? (
         <div className="flex flex-wrap gap-2 pt-1">
-          {devices.map((d) => (
-            <Tag key={d} tone="accent">
+          {devices.map((d, i) => (
+            <Tag key={i} tone="accent">
               <span className="inline-flex items-center gap-1">
                 <Icon name="device" size={12} />
                 {d}
@@ -102,27 +106,105 @@ export function WorkMessageBody({ message }: { message: ChatMessage }): ReactNod
   );
 }
 
-/** vision — image analysis summary card. */
+/** vision — image card (upload/preview) + recognition label. When the message
+ *  carries an `image` it is shown as a preview; the reply text renders as the
+ *  recognition summary alongside a 「识别」 chip. Falls back to a plain text
+ *  card when no image is attached (legacy persisted messages), so the render is
+ *  always safe. */
 export function VisionMessageBody({ message }: { message: ChatMessage }): ReactNode {
-  return shell(message.content ? (
-    <div className="space-y-1.5">
-      <div className="flex items-center gap-2 text-xs text-[var(--mu-text-lo)]">
-        <Icon name="vision" size={14} />
-        视觉分析
+  const hasImage = Boolean(message.image);
+  if (!message.content && !message.streaming && !hasImage) return null;
+  return (
+    <div className="overflow-hidden rounded-[var(--mu-radius-lg)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)]">
+      {hasImage ? (
+        <img
+          src={message.image as string}
+          alt="视觉分析图"
+          className="max-h-64 w-full border-b border-[var(--mu-glass-border)] object-cover"
+        />
+      ) : null}
+      <div className="space-y-1.5 px-4 py-2.5">
+        <div className="flex items-center gap-2 text-xs text-[var(--mu-text-lo)]">
+          <Icon name="vision" size={14} />
+          视觉分析
+          {hasImage ? <Tag tone="accent">识别</Tag> : null}
+        </div>
+        {message.content ? (
+          <span className="whitespace-pre-wrap text-sm text-[var(--mu-text-hi)]">{message.content}</span>
+        ) : message.streaming ? (
+          <span className="mu-blink text-xs text-[var(--mu-text-lo)]">识别中…</span>
+        ) : null}
       </div>
-      <span className="whitespace-pre-wrap">{message.content}</span>
     </div>
-  ) : fallbackText(message));
+  );
 }
 
-/** voice — speech session card. */
+/** voice — call-control card (live2D placeholder / waveform / mute / hang up).
+ *  Pure local UI state; a real call pipeline is deferred to a later milestone.
+ *  The upstream voice trigger is `ws.voice_input`. */
 export function VoiceMessageBody({ message }: { message: ChatMessage }): ReactNode {
-  return shell(message.content ? (
-    <div className="flex items-center gap-2 text-sm">
-      <Icon name="mic" size={16} className="text-[var(--mu-accent)]" />
-      <span className="whitespace-pre-wrap">{message.content}</span>
+  const [connected, setConnected] = useState(Boolean(message.streaming));
+  const [muted, setMuted] = useState(false);
+
+  // A finished voice reply rests in the "hung up" state rather than showing an
+  // active call forever.
+  useEffect(() => {
+    if (!message.streaming) setConnected(false);
+  }, [message.streaming]);
+
+  return (
+    <div className="rounded-[var(--mu-radius-lg)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)] px-4 py-3">
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--mu-accent)]/15 text-[var(--mu-accent)]">
+          <Icon name="mic" size={20} />
+        </div>
+        <div className="min-w-0">
+          <div className="text-sm font-medium text-[var(--mu-text-hi)]">语音通话</div>
+          <div className="text-xs text-[var(--mu-text-lo)]">{connected ? "通话中…" : "已挂断"}</div>
+        </div>
+      </div>
+
+      {/* live2D reserved slot */}
+      <div className="mt-3 flex h-24 items-center justify-center rounded-[var(--mu-radius-sm)] bg-[var(--mu-surface-2)]">
+        <span className="text-xs text-[var(--mu-text-lo)]">Live2D 预留位</span>
+      </div>
+
+      {/* waveform */}
+      <div className="mt-3 flex items-end justify-center gap-1">
+        {Array.from({ length: 12 }, (_, i) => (
+          <span
+            key={i}
+            className={`w-1 rounded-full bg-[var(--mu-accent)] ${connected && !muted ? "mu-blink" : "opacity-40"}`}
+            style={{ height: `${6 + ((i * 7) % 16)}px` }}
+          />
+        ))}
+      </div>
+
+      {/* controls */}
+      <div className="mt-3 flex items-center justify-center gap-4">
+        <button
+          onClick={() => setMuted((v) => !v)}
+          aria-label={muted ? "取消静音" : "静音"}
+          title={muted ? "取消静音" : "静音"}
+          className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--mu-surface-4)] text-[var(--mu-text-mid)] transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+        >
+          <Icon name={muted ? "micOff" : "mic"} size={18} />
+        </button>
+        <button
+          onClick={() => setConnected(false)}
+          aria-label="挂断"
+          title="挂断"
+          className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-[var(--mu-err)] text-white transition-all duration-200 ease-[var(--mu-spring)] active:scale-95"
+        >
+          <Icon name="phone" size={20} className="rotate-[135deg]" />
+        </button>
+      </div>
+
+      {message.content ? (
+        <div className="mt-2 whitespace-pre-wrap text-xs text-[var(--mu-text-lo)]">{message.content}</div>
+      ) : null}
     </div>
-  ) : fallbackText(message));
+  );
 }
 
 /** agents — sub-agent progress card (kept for the shared flow; monitors live in messages). */
@@ -149,10 +231,3 @@ export function modeBody(mode: Mode, message: ChatMessage): ReactNode {
     default: return <div className="rounded-[var(--mu-radius-lg)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)] px-4 py-2.5 text-sm text-[var(--mu-text-hi)]">{fallbackText(message)}</div>;
   }
 }
-
-/** tiny sample device extraction for the home card demo (content contains names). */
-function sampleDevices(content: string): string[] {
-  if (!content) return [];
-  const known = ["灯", "空调", "插座", "窗帘", "电视", "加湿器"];
-  return known.filter((k) => content.includes(k));
-}

frontend/web/src/lib/api.ts

@@ -154,11 +154,18 @@ export function chatSync(
   });
 }
 
-/** POST /api/v1/chat with stream:true — triggers streaming over the WS channel. */
-export function chatStream(sessionId: string, text: string): Promise<{ stream: true }> {
+/** POST /api/v1/chat with stream:true — triggers streaming over the WS channel.
+ *  `image` (a base64 data: URI or URL) is attached for the vision path; the
+ *  gateway's chat body currently has no image field, so an unconfigured backend
+ *  simply ignores it. */
+export function chatStream(
+  sessionId: string,
+  text: string,
+  image?: string
+): Promise<{ stream: true }> {
   return request<{ stream: true }>("/chat", {
     method: "POST",
-    body: JSON.stringify({ sessionId, text, stream: true }),
+    body: JSON.stringify({ sessionId, text, image, stream: true }),
   });
 }
 

frontend/web/src/lib/types.ts

@@ -51,6 +51,11 @@ export interface ChatMessage {
   thinking?: string;
   mood?: string;
   tools?: ToolUsed[];
+  /** Optional image attached to the turn (base64 data: URI or http(s) URL). The
+   *  user bubble renders it as a thumb; vision-mode assistant bodies render it
+   *  as an image card. Absent for legacy persisted messages, so renders fall back
+   *  to plain text. */
+  image?: string;
   createdAt: number;
 }
 

frontend/web/src/lib/useChat.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { chatStream } from "./api";
 import { connectWs, isWsOpen } from "./ws";
 import { useAppStore } from "../store/useAppStore";
+import { useModeStore } from "../store/useModeStore";
 import { now } from "./util";
 
 /** Drives one user turn: push the user bubble, blanket a streaming assistant
@@ -11,9 +12,10 @@ import { now } from "./util";
  *
  *  The behavior mode is NOT chosen by the user at send time — the agent / backend
  *  hot-switches it (design/01 §3), and each message carries its own mode, so the
- *  bubble renders per that message's mode. */
+ *  bubble renders per that message's mode. Until the backend advertises a
+ *  per-message mode, a new assistant bubble defaults to the current UI mode. */
 export function useSendChat(): {
-  send: (text: string) => Promise<void>;
+  send: (text: string, image?: string) => Promise<void>;
   sending: boolean;
 } {
   const [sending, setSending] = useState(false);
@@ -24,19 +26,23 @@ export function useSendChat(): {
   const appendChunk = useAppStore((s) => s.appendChunk);
   const addTool = useAppStore((s) => s.addTool);
   const appendTaskLog = useAppStore((s) => s.appendTaskLog);
+  const mode = useModeStore((s) => s.mode);
 
   const send = useCallback(
-    async (text: string) => {
+    async (text: string, image?: string) => {
       const trimmed = text.trim();
-      if (!trimmed || sending) return;
+      if ((!trimmed && !image) || sending) return;
       setSending(true);
       if (!isWsOpen()) connectWs();
 
-      addUserMessage(trimmed);
-      beginAssistant();
+      // The gateway's chat body still requires a non-empty text, so a pure image
+      // turn (vision) falls back to a default prompt to keep the trigger valid.
+      const prompt = trimmed || (image ? "分析这张图片" : "");
+      addUserMessage(trimmed, undefined, image);
+      beginAssistant(mode);
 
       try {
-        await chatStream(sessionId, trimmed);
+        await chatStream(sessionId, prompt, image);
       } catch (err: unknown) {
         // Backend loop not wired or gateway unreachable: show the failure inline
         // rather than leaving a permanently-streaming bubble.
@@ -49,7 +55,7 @@ export function useSendChat(): {
         setSending(false);
       }
     },
-    [sending, sessionId, addUserMessage, beginAssistant, endStream, appendChunk, addTool, appendTaskLog]
+    [sending, sessionId, mode, addUserMessage, beginAssistant, endStream, appendChunk, addTool, appendTaskLog]
   );
 
   return { send, sending };

frontend/web/src/lib/ws.ts

@@ -1,7 +1,7 @@
 import { useAppStore } from "../store/useAppStore";
 import { useModeStore } from "../store/useModeStore";
 import { getAuthToken } from "./api";
-import type { AgentInfo, FlowGraph, ToolUsed, WsUpEvent } from "./types";
+import { MODES, type AgentInfo, type FlowGraph, type Mode, type ToolUsed, type WsUpEvent } from "./types";
 import { now, uid } from "./util";
 
 /**
@@ -244,6 +244,15 @@ function dispatch(ev: { type: string; data: unknown }): void {
       // handshake acknowledgement; nothing to persist yet.
       break;
     }
+    case "mode_switch": {
+      // The agent drives the behavior mode (design/01 §3). Apply it to the shell
+      // so newly begun message bubbles render per that mode.
+      if (r && typeof r.mode === "string") {
+        const m = r.mode as Mode;
+        if (MODES.includes(m)) useModeStore.getState().setMode(m);
+      }
+      break;
+    }
     default: {
       // Unknown future event: keep it in the context log so no frame is lost.
       const text = typeof ev.data === "string" ? ev.data : JSON.stringify(ev.data);

frontend/web/src/modes/ChatShell.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from "react";
 import { useAppStore } from "../store/useAppStore";
+import { useModeStore } from "../store/useModeStore";
 import { useSendChat } from "../lib/useChat";
+import { sendUp } from "../lib/ws";
 import { MessageBubble } from "../components/chat";
 import { ChatInput } from "../components/ChatInput";
 import { EmptyState } from "../components/primitives";
@@ -37,7 +39,17 @@ export function ChatShell(): React.ReactNode {
           <div ref={bottomRef} />
         </div>
       </div>
-      <ChatInput onSend={(t) => void send(t)} sending={sending} onVoice={() => { /* voice handled by agent */ }} />
+      <ChatInput
+        onSend={(t, image) => void send(t, image)}
+        sending={sending}
+        onVoice={() => {
+          // Voice is not wired to a live pipeline yet (real call deferred). Activate
+          // the voice_input uplink and switch the shell to voice mode so the agent
+          // (or the demo) reflects a voice session.
+          useModeStore.getState().setMode("voice");
+          sendUp({ type: "voice_input", data: { mode: "voice" } });
+        }}
+      />
     </div>
   );
 }

frontend/web/src/store/useAppStore.ts

@@ -33,7 +33,7 @@ export interface AppStore {
   setContext: (patch: Partial<ChatContext>) => void;
   setMood: (mood: string | null) => void;
 
-  addUserMessage: (text: string, mode?: Mode) => void;
+  addUserMessage: (text: string, mode?: Mode, image?: string) => void;
   beginAssistant: (mode?: Mode) => string;
   appendChunk: (delta: string) => void;
   endStream: () => void;
@@ -77,7 +77,7 @@ export const useAppStore = create<AppStore>()(
         set((s) => ({ context: { ...s.context, ...patch } })),
       setMood: (mood) => set({ mood }),
 
-      addUserMessage: (text, mode) =>
+      addUserMessage: (text, mode, image) =>
         set((s) => ({
           messages: [
             ...s.messages,
@@ -86,6 +86,7 @@ export const useAppStore = create<AppStore>()(
               role: "user",
               content: text,
               mode,
+              image,
               createdAt: now(),
             },
           ],
@@ -142,10 +143,13 @@ export const useAppStore = create<AppStore>()(
           const messages = s.messages.slice();
           const last = messages[messages.length - 1];
           if (!last || last.role !== "assistant") return s;
-          messages[messages.length - 1] = {
-            ...last,
-            tools: [...(last.tools ?? []), tool],
-          };
+          const existing = last.tools ?? [];
+          const idx = existing.findIndex((t) => t.name === tool.name);
+          const tools =
+            idx === -1
+              ? [...existing, tool]
+              : existing.map((t, i) => (i === idx ? { ...t, ...tool } : t));
+          messages[messages.length - 1] = { ...last, tools };
           return { messages };
         }),
 

internal/runtime/model/anthropic_stream.go

@@ -29,9 +29,10 @@ type anthropicStartBlock struct {
 
 // anthropicDelta is the incremental payload inside a content_block_delta event.
 type anthropicDelta struct {
-	Type        string `json:"type"` // text_delta | input_json_delta
+	Type        string `json:"type"` // text_delta | input_json_delta | thinking_delta
 	Text        string `json:"text,omitempty"`
 	PartialJSON string `json:"partial_json,omitempty"`
+	Thinking    string `json:"thinking,omitempty"`
 }
 
 // anthropicStreamError is the payload of an error event.
@@ -141,6 +142,13 @@ func applyAnthropicEvent(
 			if onEvent != nil {
 				onEvent(StreamEvent{Kind: StreamKindToolCallStart, Index: *evt.Index, ID: evt.Content.ID})
 			}
+		case "thinking":
+			if onEvent != nil {
+				onEvent(StreamEvent{Kind: StreamKindThinkingStart, Index: *evt.Index})
+			}
+			if evt.Content.Text != "" && onEvent != nil {
+				onEvent(StreamEvent{Kind: StreamKindThinkingDelta, Delta: evt.Content.Text, Index: *evt.Index})
+			}
 		}
 		if _, ok := blocks[*evt.Index]; !ok {
 			*order = append(*order, *evt.Index)
@@ -166,6 +174,10 @@ func applyAnthropicEvent(
 			if onEvent != nil {
 				onEvent(StreamEvent{Kind: StreamKindToolCallDelta, Delta: evt.Delta.PartialJSON, Index: *evt.Index, ID: b.id})
 			}
+		case "thinking_delta":
+			if onEvent != nil {
+				onEvent(StreamEvent{Kind: StreamKindThinkingDelta, Delta: evt.Delta.Thinking, Index: *evt.Index})
+			}
 		}
 	case "content_block_stop":
 		if evt.Index == nil {
@@ -183,6 +195,10 @@ func applyAnthropicEvent(
 			if onEvent != nil {
 				onEvent(StreamEvent{Kind: StreamKindToolCallEnd, Index: *evt.Index, ID: b.id})
 			}
+		} else if b.typ == "thinking" {
+			if onEvent != nil {
+				onEvent(StreamEvent{Kind: StreamKindThinkingEnd, Index: *evt.Index})
+			}
 		}
 	case "message_delta":
 		if evt.Usage != nil {

internal/runtime/model/anthropic_test.go

@@ -436,6 +436,63 @@ func TestAnthropicChat_ChatStream_NoMessageStop(t *testing.T) {
 	}
 }
 
+func TestAnthropicChat_ChatStream_Thinking(t *testing.T) {
+	t.Parallel()
+	sse := strings.Join([]string{
+		`data: {"type":"message_start","message":{"model":"claude-test","usage":{"input_tokens":5}}}`,
+		``,
+		`data: {"type":"content_block_start","index":0,"content_block":{"type":"thinking","thinking":""}}`,
+		``,
+		`data: {"type":"content_block_delta","index":0,"delta":{"type":"thinking_delta","thinking":"Let me"}}`,
+		``,
+		`data: {"type":"content_block_delta","index":0,"delta":{"type":"thinking_delta","thinking":" think"}}`,
+		``,
+		`data: {"type":"content_block_stop","index":0}`,
+		``,
+		`data: {"type":"content_block_start","index":1,"content_block":{"type":"text","text":""}}`,
+		``,
+		`data: {"type":"content_block_delta","index":1,"delta":{"type":"text_delta","text":"Hel"}}`,
+		``,
+		`data: {"type":"content_block_delta","index":1,"delta":{"type":"text_delta","text":"lo"}}`,
+		``,
+		`data: {"type":"content_block_stop","index":1}`,
+		``,
+		`data: {"type":"message_delta","delta":{"stop_reason":"end_turn"},"usage":{"output_tokens":7}}`,
+		``,
+		`data: {"type":"message_stop"}`,
+		``,
+	}, "\n")
+	srv := newAnthropicServer(t, http.StatusOK, "text/event-stream", sse, nil)
+	ad := NewAnthropicChat(config.LLMConfig{AnthropicBaseURL: srv.URL, AnthropicModel: "claude-test"})
+
+	var events []StreamEvent
+	resp, err := ad.ChatStream(context.Background(),
+		Request{Messages: []Message{TextMessage(RoleUser, "hi")}, Model: "claude-test"},
+		func(ev StreamEvent) { events = append(events, ev) })
+	if err != nil {
+		t.Fatalf("ChatStream error: %v", err)
+	}
+	if resp.Content != "Hello" {
+		t.Errorf("resp.Content = %q, want Hello (thinking must not leak into body content)", resp.Content)
+	}
+	if resp.TotalTokens != 12 {
+		t.Errorf("resp.TotalTokens = %d, want 12 (5 input + 7 output)", resp.TotalTokens)
+	}
+	wantEvents := []StreamEvent{
+		{Kind: StreamKindThinkingStart, Index: 0},
+		{Kind: StreamKindThinkingDelta, Index: 0, Delta: "Let me"},
+		{Kind: StreamKindThinkingDelta, Index: 0, Delta: " think"},
+		{Kind: StreamKindThinkingEnd, Index: 0},
+		{Kind: StreamKindTextStart, Index: 1},
+		{Kind: StreamKindTextDelta, Index: 1, Delta: "Hel"},
+		{Kind: StreamKindTextDelta, Index: 1, Delta: "lo"},
+		{Kind: StreamKindTextEnd, Index: 1},
+	}
+	if !reflect.DeepEqual(events, wantEvents) {
+		t.Errorf("events = %+v, want %+v", events, wantEvents)
+	}
+}
+
 func TestAnthropicChat_ToolResult(t *testing.T) {
 	t.Parallel()
 	blk := AnthropicToolResult("toolu_1", `{"ok":true}`, true)

internal/runtime/model/openai.go

@@ -90,10 +90,49 @@ type openAIResponseMessage struct {
 	Content string `json:"content"`
 }
 
-// openAIDelta is the incremental payload inside a stream chunk.
+// openAIDelta is the incremental payload inside a stream chunk. Reasoning content
+// (OpenAI o-series / DeepSeek / DashScope) arrives in ReasoningContent; streaming
+// function calls arrive in ToolCalls, accumulated per fragment index.
 type openAIDelta struct {
-	Role    string `json:"role"`
-	Content string `json:"content"`
+	Role             string                `json:"role"`
+	Content          string                `json:"content"`
+	ReasoningContent string                `json:"reasoning_content"`
+	ToolCalls        []openAIToolCallDelta `json:"tool_calls"`
+}
+
+// openAIToolCallDelta is one streaming function-call fragment. OpenAI emits a
+// sequence of these sharing the same Index: the ID and Function.Name usually
+// arrive once (in the first fragment) while Function.Arguments streams across
+// fragments.
+type openAIToolCallDelta struct {
+	Index    int              `json:"index"`
+	ID       string           `json:"id"`
+	Function openAIToolCallFn `json:"function"`
+}
+
+// openAIToolCallFn is the function part of a streaming tool-call fragment.
+type openAIToolCallFn struct {
+	Name      string `json:"name"`
+	Arguments string `json:"arguments"`
+}
+
+// openAIToolAcc accumulates the partial state of one streaming tool call (keyed
+// by the provider's tool_calls[].index) so its arguments re-assemble across the
+// delta fragments. started guards a single ToolCallStart emission per block.
+type openAIToolAcc struct {
+	id      string
+	name    string
+	args    strings.Builder
+	started bool
+}
+
+// idOrName resolves the block identifier used to correlate start/delta/end: the
+// provider tool-call id when present, else the function name.
+func (a *openAIToolAcc) idOrName() string {
+	if a.id != "" {
+		return a.id
+	}
+	return a.name
 }
 
 // openAIUsage reports token consumption.
@@ -378,16 +417,30 @@ func responseFromWire(wire *openAIChatResponse) Response {
 	return out
 }
 
-// scanSSE incrementally decodes stream chunks, accumulates the full content
+// scanSSE incrementally decodes stream chunks, accumulates the full body text
 // with a strings.Builder (never reading the whole body at once) and captures
-// usage from the final chunk. Each text delta is delivered as a text_delta
-// StreamEvent with the body-text segment bracketed by text_start/text_end.
+// usage from the final chunk. It splits each delta into its segment and brackets
+// them: reasoning_content as thinking_start/delta/end, tool_calls fragments as
+// tool_call_start/delta/end, and body text as text_start/delta/end. The
+// accumulated tool-call arguments re-assemble across fragments into a structured
+// Args map, and are attached to the returned Response alongside the text.
 func scanSSE(r io.Reader, onEvent func(StreamEvent)) (Response, error) {
 	scanner := bufio.NewScanner(r)
 	scanner.Buffer(make([]byte, 0, sseBufInit), maxSSELineBytes)
 	agg := Response{}
-	var b strings.Builder
-	started := false
+	var text strings.Builder
+	textStarted := false
+	thinkingStarted := false
+	toolCalls := map[int]*openAIToolAcc{}
+	var toolOrder []int
+
+	endThinking := func() {
+		if onEvent != nil && thinkingStarted {
+			thinkingStarted = false
+			onEvent(StreamEvent{Kind: StreamKindThinkingEnd})
+		}
+	}
+
 	for scanner.Scan() {
 		line := strings.TrimSpace(scanner.Text())
 		if line == "" || !strings.HasPrefix(line, sseDataPrefix) {
@@ -409,26 +462,100 @@ func scanSSE(r io.Reader, onEvent func(StreamEvent)) (Response, error) {
 		if len(chunk.Choices) == 0 || chunk.Choices[0].Delta == nil {
 			continue
 		}
-		delta := chunk.Choices[0].Delta.Content
-		if delta == "" {
+		delta := chunk.Choices[0].Delta
+
+		// Reasoning / thinking segment (OpenAI o-series, DeepSeek, DashScope).
+		if delta.ReasoningContent != "" {
+			if onEvent != nil && !thinkingStarted {
+				thinkingStarted = true
+				onEvent(StreamEvent{Kind: StreamKindThinkingStart})
+			}
+			if onEvent != nil {
+				onEvent(StreamEvent{Kind: StreamKindThinkingDelta, Delta: delta.ReasoningContent})
+			}
 			continue
 		}
-		b.WriteString(delta)
+
+		// Streaming tool-call fragments.
+		if len(delta.ToolCalls) > 0 {
+			endThinking()
+			for _, tc := range delta.ToolCalls {
+				acc := toolCalls[tc.Index]
+				if acc == nil {
+					acc = &openAIToolAcc{}
+					toolCalls[tc.Index] = acc
+					toolOrder = append(toolOrder, tc.Index)
+				}
+				if acc.id == "" {
+					acc.id = tc.ID
+				}
+				if acc.name == "" {
+					acc.name = tc.Function.Name
+				}
+				if onEvent != nil && !acc.started && acc.idOrName() != "" {
+					acc.started = true
+					onEvent(StreamEvent{Kind: StreamKindToolCallStart, Index: tc.Index, ID: acc.idOrName()})
+				}
+				if tc.Function.Arguments != "" {
+					acc.args.WriteString(tc.Function.Arguments)
+					if onEvent != nil {
+						onEvent(StreamEvent{Kind: StreamKindToolCallDelta, Index: tc.Index, ID: acc.idOrName(), Delta: tc.Function.Arguments})
+					}
+				}
+			}
+			continue
+		}
+
+		// Body-text segment.
+		if delta.Content == "" {
+			continue
+		}
+		endThinking()
+		text.WriteString(delta.Content)
 		if onEvent != nil {
-			if !started {
-				started = true
+			if !textStarted {
+				textStarted = true
 				onEvent(StreamEvent{Kind: StreamKindTextStart})
 			}
-			onEvent(StreamEvent{Kind: StreamKindTextDelta, Delta: delta})
+			onEvent(StreamEvent{Kind: StreamKindTextDelta, Delta: delta.Content})
 		}
 	}
 	if err := scanner.Err(); err != nil {
 		return Response{}, fmt.Errorf("model: %w: read stream: %v", ErrUpstream, err)
 	}
-	if onEvent != nil && started {
-		onEvent(StreamEvent{Kind: StreamKindTextEnd})
+
+	if onEvent != nil {
+		if thinkingStarted {
+			onEvent(StreamEvent{Kind: StreamKindThinkingEnd})
+		}
+		if textStarted {
+			onEvent(StreamEvent{Kind: StreamKindTextEnd})
+		}
+		// OpenAI has no per-block stop event, so each tool_call block is closed
+		// when the stream terminates.
+		for _, idx := range toolOrder {
+			acc := toolCalls[idx]
+			if acc == nil || !acc.started {
+				continue
+			}
+			onEvent(StreamEvent{Kind: StreamKindToolCallEnd, Index: idx, ID: acc.idOrName()})
+		}
 	}
-	agg.Content = b.String()
+
+	for _, idx := range toolOrder {
+		acc := toolCalls[idx]
+		if acc == nil {
+			continue
+		}
+		args := map[string]any{}
+		if acc.args.Len() > 0 {
+			if err := json.Unmarshal([]byte(acc.args.String()), &args); err != nil {
+				args = map[string]any{}
+			}
+		}
+		agg.ToolCalls = append(agg.ToolCalls, ToolCall{Name: acc.name, Args: args})
+	}
+	agg.Content = text.String()
 	agg.Message = Message{Role: RoleAssistant, Content: []Content{{Type: ContentTypeText, Text: agg.Content}}}
 	return agg, nil
 }

internal/runtime/model/openai_test.go

@@ -260,3 +260,95 @@ func TestOpenAIChat_Chat_NoModel(t *testing.T) {
 		t.Fatalf("err = %v, want ErrNoModel", err)
 	}
 }
+
+func TestOpenAIChat_ChatStream_ReasoningAndText(t *testing.T) {
+	t.Parallel()
+	sse := strings.Join([]string{
+		`data: {"model":"gpt-test","choices":[{"index":0,"delta":{"role":"assistant","reasoning_content":"Let me th"}}]}`,
+		``,
+		`data: {"choices":[{"delta":{"reasoning_content":"ink about it"}}]}`,
+		``,
+		`data: {"choices":[{"delta":{"content":"Hel"}}]}`,
+		``,
+		`data: {"choices":[{"delta":{"content":"lo"}}]}`,
+		``,
+		`data: {"choices":[],"usage":{"prompt_tokens":5,"completion_tokens":2,"total_tokens":7}}`,
+		``,
+		`data: [DONE]`,
+		``,
+	}, "\n")
+	srv := newCompletionServer(t, http.StatusOK, "text/event-stream", sse, nil)
+	ad := NewOpenAIChat(config.LLMConfig{BaseURL: srv.URL, Model: "gpt-test"})
+
+	var events []StreamEvent
+	resp, err := ad.ChatStream(context.Background(),
+		Request{Messages: []Message{TextMessage(RoleUser, "hi")}, Model: "gpt-test"},
+		func(ev StreamEvent) { events = append(events, ev) })
+	if err != nil {
+		t.Fatalf("ChatStream error: %v", err)
+	}
+	if resp.Content != "Hello" {
+		t.Errorf("resp.Content = %q, want Hello (reasoning must not leak into body content)", resp.Content)
+	}
+	wantEvents := []StreamEvent{
+		{Kind: StreamKindThinkingStart},
+		{Kind: StreamKindThinkingDelta, Delta: "Let me th"},
+		{Kind: StreamKindThinkingDelta, Delta: "ink about it"},
+		{Kind: StreamKindThinkingEnd},
+		{Kind: StreamKindTextStart},
+		{Kind: StreamKindTextDelta, Delta: "Hel"},
+		{Kind: StreamKindTextDelta, Delta: "lo"},
+		{Kind: StreamKindTextEnd},
+	}
+	if !reflect.DeepEqual(events, wantEvents) {
+		t.Errorf("events = %+v, want %+v", events, wantEvents)
+	}
+}
+
+func TestOpenAIChat_ChatStream_ToolCall(t *testing.T) {
+	t.Parallel()
+	sse := strings.Join([]string{
+		`data: {"model":"gpt-test","choices":[{"index":0,"delta":{"role":"assistant","tool_calls":[{"index":0,"id":"call_1","function":{"name":"lookup","arguments":"{\"loc"}}]}}]}`,
+		``,
+		`data: {"choices":[{"delta":{"tool_calls":[{"index":0,"function":{"arguments":"ation\":\"Paris\"}"}}]}}]}`,
+		``,
+		`data: {"choices":[{"delta":{},"finish_reason":"tool_calls"}]}`,
+		``,
+		`data: {"choices":[],"usage":{"prompt_tokens":5,"completion_tokens":6,"total_tokens":11}}`,
+		``,
+		`data: [DONE]`,
+		``,
+	}, "\n")
+	srv := newCompletionServer(t, http.StatusOK, "text/event-stream", sse, nil)
+	ad := NewOpenAIChat(config.LLMConfig{BaseURL: srv.URL, Model: "gpt-test"})
+
+	var events []StreamEvent
+	resp, err := ad.ChatStream(context.Background(),
+		Request{Messages: []Message{TextMessage(RoleUser, "hi")}, Model: "gpt-test"},
+		func(ev StreamEvent) { events = append(events, ev) })
+	if err != nil {
+		t.Fatalf("ChatStream error: %v", err)
+	}
+	if len(resp.ToolCalls) != 1 {
+		t.Fatalf("resp.ToolCalls = %+v, want 1", resp.ToolCalls)
+	}
+	tc := resp.ToolCalls[0]
+	if tc.Name != "lookup" {
+		t.Errorf("tool call name = %q, want lookup", tc.Name)
+	}
+	if tc.Args["location"] != "Paris" {
+		t.Errorf("tool call args.location = %v, want Paris (reassembled from argument fragments)", tc.Args["location"])
+	}
+	if resp.Content != "" {
+		t.Errorf("resp.Content = %q, want empty (tool-only response)", resp.Content)
+	}
+	wantEvents := []StreamEvent{
+		{Kind: StreamKindToolCallStart, Index: 0, ID: "call_1"},
+		{Kind: StreamKindToolCallDelta, Index: 0, ID: "call_1", Delta: `{"loc`},
+		{Kind: StreamKindToolCallDelta, Index: 0, ID: "call_1", Delta: `ation":"Paris"}`},
+		{Kind: StreamKindToolCallEnd, Index: 0, ID: "call_1"},
+	}
+	if !reflect.DeepEqual(events, wantEvents) {
+		t.Errorf("events = %+v, want %+v", events, wantEvents)
+	}
+}