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 };
         }),