@hienlh/ppm 0.9.0-beta.2 → 0.9.0-beta.3

package/src/server/ws/chat.ts

@@ -22,7 +22,6 @@ type ChatWsSocket = {
 interface SessionEntry {
   providerId: string;
   clients: Set<ChatWsSocket>;
-  abort?: AbortController;
   projectPath?: string;
   projectName?: string;
   pingIntervals: Map<ChatWsSocket, ReturnType<typeof setInterval>>;
@@ -32,6 +31,8 @@ interface SessionEntry {
   turnEvents: unknown[];
   streamPromise?: Promise<void>;
   permissionMode?: string;
+  /** Whether the persistent event consumer loop is running */
+  isStreamingActive: boolean;
 }
 
 /** Tracks active sessions — persists even when FE disconnects */
@@ -125,6 +126,11 @@ function startCleanupTimer(sessionId: string): void {
   entry.cleanupTimer = setTimeout(() => {
     console.log(`[chat] session=${sessionId} cleanup: no FE reconnected within timeout`);
     logSessionEvent(sessionId, "INFO", "Session cleaned up (no FE reconnected)");
+    // Close streaming session in provider
+    const provider = providerRegistry.get(entry.providerId);
+    if (provider && "closeStreamingSession" in provider) {
+      (provider as any).closeStreamingSession(sessionId);
+    }
     for (const interval of entry.pingIntervals.values()) clearInterval(interval);
     entry.pingIntervals.clear();
     activeSessions.delete(sessionId);
@@ -132,27 +138,25 @@ function startCleanupTimer(sessionId: string): void {
 }
 
 /**
- * Standalone streaming loop — decoupled from WS message handler.
- * Runs independently so WS close does NOT kill the Claude query.
+ * Persistent event consumer — runs for the entire session lifetime.
+ * First message creates the query; follow-ups push into the provider's
+ * message channel. Events from ALL turns flow through this single loop.
  */
-async function runStreamLoop(sessionId: string, providerId: string, content: string, permissionMode?: string): Promise<void> {
+async function startSessionConsumer(sessionId: string, providerId: string, content: string, permissionMode?: string, images?: Array<{ data: string; mediaType: string }>): Promise<void> {
   const entry = activeSessions.get(sessionId);
   if (!entry) {
-    console.error(`[chat] session=${sessionId} runStreamLoop: no entry — aborting`);
+    console.error(`[chat] session=${sessionId} startSessionConsumer: no entry — aborting`);
     return;
   }
-  const streamStartMs = Date.now();
-  console.log(`[chat] session=${sessionId} runStreamLoop started (clients=${entry.clients.size})`);
+  console.log(`[chat] session=${sessionId} startSessionConsumer started (clients=${entry.clients.size})`);
 
-  const abortController = new AbortController();
-  entry.abort = abortController;
+  entry.isStreamingActive = true;
   entry.pendingApprovalEvent = undefined;
   entry.turnEvents = [];
   setPhase(sessionId, "connecting");
 
   let heartbeat: ReturnType<typeof setInterval> | undefined;
   let lastContextWindowPct: number | undefined;
-  let doneEmitted = false;
 
   try {
     const userPreview = content.slice(0, 200);
@@ -161,12 +165,12 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
 
     let eventCount = 0;
     let firstEventReceived = false;
-    const startTime = Date.now();
+    let startTime = Date.now();
 
     // Heartbeat: while waiting for first response, send elapsed time every 5s
     const CONNECTION_TIMEOUT_S = 120;
     heartbeat = setInterval(() => {
-      if (firstEventReceived || abortController.signal.aborted) {
+      if (firstEventReceived) {
         clearInterval(heartbeat);
         return;
       }
@@ -185,27 +189,23 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
           type: "error",
           message: `Claude SDK timed out after ${elapsed}s for project "${projectPath || "(no project)"}".${wslHint}\n\nDebug steps:\n1. Run: \`${debugCmd}\` — if it also hangs, the issue is your Claude CLI environment\n2. Check env vars: \`echo $ANTHROPIC_API_KEY $ANTHROPIC_BASE_URL\` — stale/invalid keys cause silent hang\n3. Try with env cleared: \`ANTHROPIC_API_KEY="" ANTHROPIC_BASE_URL="" ${debugCmd}\`\n4. Check hooks/MCP: \`cat ${projectPath}/.claude/settings.local.json\`\n5. Refresh auth: \`claude login\``,
         });
-        abortController.abort();
         return;
       }
-      // Heartbeat uses broadcast() directly — NOT setPhase() (same-phase guard would skip elapsed updates)
       broadcast(sessionId, { type: "phase_changed", phase: "connecting", elapsed });
     }, 5_000);
 
-    for await (const event of chatService.sendMessage(providerId, sessionId, content, { permissionMode })) {
-      if (abortController.signal.aborted) break;
+    for await (const event of chatService.sendMessage(providerId, sessionId, content, { permissionMode, images })) {
       eventCount++;
       const ev = event as any;
       const evType = ev.type ?? "unknown";
 
-      // System events (hook_started, init, etc.) → transition connecting → thinking
-      // These indicate SDK has connected and is processing, but no content yet.
+      // System events → transition connecting → thinking
       if (evType === "system") {
         if (!firstEventReceived) {
           if (heartbeat) clearInterval(heartbeat);
           setPhase(sessionId, "thinking");
         }
-        continue; // Don't buffer or broadcast system events
+        continue;
       }
 
       // First content event — stop heartbeat, transition phase
@@ -238,10 +238,11 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
         console.error(`[chat] session=${sessionId} error: ${errorDetail}`);
         logSessionEvent(sessionId, "ERROR", errorDetail);
       } else if (evType === "done") {
-        doneEmitted = true;
+        // Turn complete — transition to idle, clear buffer for next turn
         logSessionEvent(sessionId, "DONE", `subtype=${ev.resultSubtype ?? "none"} turns=${ev.numTurns ?? "?"} ctx=${ev.contextWindowPct ?? "?"}%`);
         if (ev.contextWindowPct != null) lastContextWindowPct = ev.contextWindowPct;
-        // Fire-and-forget: fetch updated session title from SDK summary
+
+        // Fire-and-forget: title + notification
         sdkListSessions({ dir: entry.projectPath, limit: 50 }).then((sessions) => {
           const found = sessions.find((s) => s.sessionId === sessionId || s.sessionId === ev.sessionId);
           const title = found?.customTitle ?? found?.summary;
@@ -251,7 +252,6 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
             if (session) session.title = title;
           }
         }).catch(() => {});
-        // Fire-and-forget notification broadcast (push + telegram)
         import("../../services/notification.service.ts").then(({ notificationService }) => {
           const project = entry.projectName || "Project";
           const session = chatService.getSession(sessionId);
@@ -266,7 +266,6 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
         }).catch(() => {});
       } else if (evType === "approval_request") {
         entry.pendingApprovalEvent = ev;
-        // Fire-and-forget notification for approval/question
         import("../../services/notification.service.ts").then(({ notificationService }) => {
           const project = entry.projectName || "Project";
           const session = chatService.getSession(sessionId);
@@ -285,32 +284,40 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
 
       // Buffer + broadcast content events
       bufferAndBroadcast(sessionId, event);
+
+      // After "done", transition to idle + clear turn buffer for next turn
+      // Consumer loop continues — query waits for next message in generator
+      if (evType === "done") {
+        entry.turnEvents = [];
+        entry.pendingApprovalEvent = undefined;
+        setPhase(sessionId, "idle");
+        // Reset heartbeat tracking for next turn
+        firstEventReceived = false;
+        startTime = Date.now();
+      }
     }
 
-    logSessionEvent(sessionId, "INFO", `Stream completed (${eventCount} events)`);
-    console.log(`[chat] session=${sessionId} stream completed (${eventCount} events)`);
+    logSessionEvent(sessionId, "INFO", `Session consumer completed (${eventCount} events total)`);
+    console.log(`[chat] session=${sessionId} session consumer completed (${eventCount} events)`);
   } catch (e) {
     const errMsg = (e as Error).message;
     logSessionEvent(sessionId, "ERROR", `Exception: ${errMsg}`);
-    if (!abortController.signal.aborted) {
-      bufferAndBroadcast(sessionId, { type: "error", message: errMsg });
-    }
+    bufferAndBroadcast(sessionId, { type: "error", message: errMsg });
   } finally {
     if (heartbeat) clearInterval(heartbeat);
-    // 1. Buffer and broadcast done event (skip if SDK already yielded one)
-    if (!doneEmitted) {
-      bufferAndBroadcast(sessionId, { type: "done", sessionId, contextWindowPct: lastContextWindowPct });
-    }
-    // 2. Clear buffer BEFORE setting phase to idle
+    entry.isStreamingActive = false;
     entry.turnEvents = [];
-    // 3. Transition to idle
     setPhase(sessionId, "idle");
-    // 4. Cleanup
-    entry.abort = undefined;
     entry.pendingApprovalEvent = undefined;
+    // Close streaming session in provider
+    const provider = providerRegistry.get(entry.providerId);
+    if (provider && "closeStreamingSession" in provider) {
+      (provider as any).closeStreamingSession(sessionId);
+    }
     if (entry.clients.size === 0) {
       startCleanupTimer(sessionId);
     }
+    console.log(`[chat] session=${sessionId} consumer loop ended`);
   }
 }
 
@@ -386,6 +393,7 @@ export const chatWebSocket = {
       pingIntervals: new Map(),
       phase: "idle",
       turnEvents: [],
+      isStreamingActive: false,
     };
     activeSessions.set(sessionId, newEntry);
     setupClientPing(newEntry, ws);
@@ -435,7 +443,7 @@ export const chatWebSocket = {
       if (pn) { try { pp = resolveProjectPath(pn); } catch { /* ignore */ } }
       const newEntry: SessionEntry = {
         providerId: pid, clients: new Set([ws]), projectPath: pp, projectName: pn,
-        pingIntervals: new Map(), phase: "idle", turnEvents: [],
+        pingIntervals: new Map(), phase: "idle", turnEvents: [], isStreamingActive: false,
       };
       activeSessions.set(sessionId, newEntry);
       setupClientPing(newEntry, ws);
@@ -472,51 +480,74 @@ export const chatWebSocket = {
         ws.send(JSON.stringify({ type: "error", message: "Message content is required" }));
         return;
       }
+      // Validate image payload
+      if (parsed.images?.length) {
+        if (parsed.images.length > 5) {
+          ws.send(JSON.stringify({ type: "error", message: "Max 5 images per message" }));
+          return;
+        }
+        const MAX_BASE64_SIZE = 7_000_000; // ~5MB decoded
+        const SUPPORTED_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+        for (const img of parsed.images) {
+          if (img.data.length > MAX_BASE64_SIZE) {
+            ws.send(JSON.stringify({ type: "error", message: "Image too large (max 5MB)" }));
+            return;
+          }
+          if (!SUPPORTED_TYPES.has(img.mediaType)) {
+            ws.send(JSON.stringify({ type: "error", message: `Unsupported image type: ${img.mediaType}` }));
+            return;
+          }
+        }
+      }
       // Store permission mode — sticky for this session
       if (parsed.permissionMode) {
         entry.permissionMode = parsed.permissionMode;
       }
 
-      // Resume session in provider (can be slow on first call — sdkListSessions)
       const provider = providerRegistry.get(providerId);
-      if (provider && "resumeSession" in provider) {
-        const t0 = Date.now();
-        await (provider as any).resumeSession(sessionId);
-        const elapsed = Date.now() - t0;
-        if (elapsed > 500) {
-          console.warn(`[chat] session=${sessionId} resumeSession took ${elapsed}ms`);
-          logSessionEvent(sessionId, "PERF", `resumeSession took ${elapsed}ms`);
+
+      if (!entry.isStreamingActive) {
+        // First message or post-crash recovery: start persistent consumer
+        // Resume session in provider (can be slow on first call — sdkListSessions)
+        if (provider && "resumeSession" in provider) {
+          const t0 = Date.now();
+          await (provider as any).resumeSession(sessionId);
+          const elapsed = Date.now() - t0;
+          if (elapsed > 500) {
+            console.warn(`[chat] session=${sessionId} resumeSession took ${elapsed}ms`);
+            logSessionEvent(sessionId, "PERF", `resumeSession took ${elapsed}ms`);
+          }
+        }
+        if (entry.projectPath && provider && "ensureProjectPath" in provider) {
+          (provider as any).ensureProjectPath(sessionId, entry.projectPath);
         }
-      }
-      if (entry.projectPath && provider && "ensureProjectPath" in provider) {
-        (provider as any).ensureProjectPath(sessionId, entry.projectPath);
-      }
 
-      // Abort-and-replace: if already streaming, abort current query and wait for cleanup
-      if (entry.phase !== "idle" && entry.abort) {
-        console.log(`[chat] session=${sessionId} aborting current query for new message`);
-        entry.abort.abort();
-        if (entry.streamPromise) {
-          await entry.streamPromise;
+        entry.turnEvents = [];
+        setPhase(sessionId, "initializing");
+
+        const permMode = entry.permissionMode;
+        const msgImages = parsed.type === "message" ? parsed.images : undefined;
+        entry.streamPromise = new Promise<void>((resolve) => {
+          setTimeout(() => {
+            startSessionConsumer(sessionId, providerId, parsed.content, permMode, msgImages).then(resolve, resolve);
+          }, 0);
+        });
+      } else {
+        // Follow-up: push into existing generator via provider
+        if (provider && "pushMessage" in provider && parsed.type === "message") {
+          (provider as any).pushMessage(sessionId, parsed.content, {
+            priority: parsed.priority ?? 'next',
+            images: parsed.images,
+          });
         }
-        // Re-fetch entry after await — may have been mutated during cleanup
-        entry = activeSessions.get(sessionId)!;
-        if (!entry) return;
+        // Clear turn events for new turn display + transition phase
+        entry.turnEvents = [];
+        entry.pendingApprovalEvent = undefined;
+        setPhase(sessionId, "thinking");
+        console.log(`[chat] session=${sessionId} follow-up pushed to generator`);
       }
-
-      // Reset for new query
-      entry.turnEvents = [];
-      setPhase(sessionId, "initializing");
-
-      // Store promise reference on entry to prevent GC from collecting the async operation.
-      // Use setTimeout(0) to detach from WS handler's async scope.
-      const permMode = entry.permissionMode;
-      entry.streamPromise = new Promise<void>((resolve) => {
-        setTimeout(() => {
-          runStreamLoop(sessionId, providerId, parsed.content, permMode).then(resolve, resolve);
-        }, 0);
-      });
     } else if (parsed.type === "cancel") {
+      // Interrupt current turn — session stays alive for next message
       const provider = providerRegistry.get(providerId);
       if (provider && "abortQuery" in provider && typeof (provider as any).abortQuery === "function") {
         (provider as any).abortQuery(sessionId);
@@ -543,7 +574,7 @@ export const chatWebSocket = {
     evictClient(entry, ws);
     console.log(`[chat] session=${sessionId} FE disconnected (phase=${entry.phase}, clients=${entry.clients.size})`);
 
-    if (entry.clients.size === 0 && entry.phase === "idle") {
+    if (entry.clients.size === 0 && !entry.isStreamingActive) {
       startCleanupTimer(sessionId);
     }
   },

package/src/types/api.ts

@@ -23,7 +23,7 @@ export type TerminalWsMessage =
 
 /** WebSocket message types (chat) */
 export type ChatWsClientMessage =
-  | { type: "message"; content: string; permissionMode?: string }
+  | { type: "message"; content: string; permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }
   | { type: "cancel" }
   | { type: "approval_response"; requestId: string; approved: boolean; reason?: string; data?: unknown }
   | { type: "ready" };

package/src/types/chat.ts

@@ -1,5 +1,7 @@
 export interface SendMessageOpts {
   permissionMode?: import("./config").PermissionMode | string;
+  priority?: 'now' | 'next' | 'later';
+  images?: Array<{ data: string; mediaType: string }>;
 }
 
 export interface AIProvider {

package/src/web/components/chat/chat-tab.tsx

@@ -10,7 +10,7 @@ import { useNotificationStore } from "@/stores/notification-store";
 import { openBugReportPopup } from "@/lib/report-bug";
 import { getAISettings } from "@/lib/api-settings";
 import { MessageList } from "./message-list";
-import { MessageInput, type ChatAttachment } from "./message-input";
+import { MessageInput, type ChatAttachment, type MessagePriority } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
 import { ChatHistoryBar } from "./chat-history-bar";
@@ -196,7 +196,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   );
 
   const handleSend = useCallback(
-    async (content: string, attachments: ChatAttachment[] = []) => {
+    async (content: string, attachments: ChatAttachment[] = [], priority?: MessagePriority) => {
       const fullContent = buildMessageWithAttachments(content, attachments);
       if (!fullContent.trim()) return;
 
@@ -218,7 +218,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           return;
         }
       }
-      sendMessage(fullContent, { permissionMode });
+      sendMessage(fullContent, { permissionMode, priority });
     },
     [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode],
   );

package/src/web/components/chat/message-input.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
-import { ArrowUp, Square, Paperclip, Loader2 } from "lucide-react";
+import { ArrowUp, Square, Paperclip, Loader2, Zap, ListOrdered, Clock } from "lucide-react";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
 import { isSupportedFile, isImageFile } from "@/lib/file-support";
@@ -20,8 +20,10 @@ export interface ChatAttachment {
   status: "uploading" | "ready" | "error";
 }
 
+export type MessagePriority = 'now' | 'next' | 'later';
+
 interface MessageInputProps {
-  onSend: (content: string, attachments: ChatAttachment[]) => void;
+  onSend: (content: string, attachments: ChatAttachment[], priority?: MessagePriority) => void;
   isStreaming?: boolean;
   onCancel?: () => void;
   disabled?: boolean;
@@ -68,6 +70,7 @@ export const MessageInput = memo(function MessageInput({
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const [modeSelectorOpen, setModeSelectorOpen] = useState(false);
   const [pendingSend, setPendingSend] = useState(false);
+  const [priority, setPriority] = useState<MessagePriority>('next');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -286,7 +289,7 @@ export const MessageInput = memo(function MessageInput({
 
     onSlashStateChange?.(false, "");
     onFileStateChange?.(false, "");
-    onSend(trimmed, readyAttachments);
+    onSend(trimmed, readyAttachments, isStreaming ? priority : undefined);
     setValue("");
     // Revoke preview URLs
     for (const att of attachments) {
@@ -294,9 +297,10 @@ export const MessageInput = memo(function MessageInput({
     }
     setAttachments([]);
     setPendingSend(false);
+    setPriority('next');
     if (textareaRef.current) textareaRef.current.style.height = "auto";
     if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
-  }, [value, attachments, onSend, onSlashStateChange, onFileStateChange]);
+  }, [value, attachments, onSend, onSlashStateChange, onFileStateChange, isStreaming, priority]);
 
   const handleSend = useCallback(() => {
     if (disabled) return;
@@ -464,6 +468,7 @@ export const MessageInput = memo(function MessageInput({
             open={modeSelectorOpen}
             onOpenChange={setModeSelectorOpen}
           />
+          {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
         </div>
         {/* Mobile: single row — attach + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
@@ -548,6 +553,7 @@ export const MessageInput = memo(function MessageInput({
                   onOpenChange={setModeSelectorOpen}
                 />
               </div>
+              {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
             </div>
             <div className="flex items-center gap-1">
               {showCancel ? (
@@ -594,3 +600,34 @@ function ModeChip({ mode, onClick }: { mode: string; onClick: () => void }) {
     </button>
   );
 }
+
+const PRIORITY_OPTIONS: { value: MessagePriority; label: string; Icon: typeof Zap }[] = [
+  { value: 'now', label: 'Interrupt', Icon: Zap },
+  { value: 'next', label: 'Queue', Icon: ListOrdered },
+  { value: 'later', label: 'Later', Icon: Clock },
+];
+
+/** Compact priority toggle — visible only during streaming */
+function PriorityToggle({ value, onChange }: { value: MessagePriority; onChange: (v: MessagePriority) => void }) {
+  const cycle = useCallback(() => {
+    const order: MessagePriority[] = ['next', 'later', 'now'];
+    const idx = order.indexOf(value);
+    onChange(order[(idx + 1) % order.length]!);
+  }, [value, onChange]);
+
+  const current = PRIORITY_OPTIONS.find((o) => o.value === value) ?? PRIORITY_OPTIONS[1]!;
+  const Icon = current.Icon;
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => { e.stopPropagation(); cycle(); }}
+      className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-text-subtle hover:text-text-primary hover:bg-surface-elevated transition-colors border border-transparent hover:border-border"
+      aria-label={`Message priority: ${current.label}`}
+      title={`Priority: ${current.label} (click to cycle)`}
+    >
+      <Icon className="size-3" />
+      <span>{current.label}</span>
+    </button>
+  );
+}

package/src/web/hooks/use-chat.ts

@@ -23,7 +23,7 @@ interface UseChatReturn {
   pendingApproval: ApprovalRequest | null;
   contextWindowPct: number | null;
   sessionTitle: string | null;
-  sendMessage: (content: string, opts?: { permissionMode?: string }) => void;
+  sendMessage: (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }) => void;
   respondToApproval: (requestId: string, approved: boolean, data?: unknown) => void;
   cancelStreaming: () => void;
   reconnect: () => void;
@@ -375,11 +375,13 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   }, [sessionId, providerId, projectName]);
 
   const sendMessage = useCallback(
-    (content: string, opts?: { permissionMode?: string }) => {
+    (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }) => {
       if (!content.trim()) return;
 
-      // If streaming, cancel current stream first then send immediately
-      if (phaseRef.current !== "idle") {
+      const isFollowUp = phaseRef.current !== "idle";
+
+      if (isFollowUp) {
+        // Streaming follow-up: finalize current assistant message, then send
         const finalContent = streamingContentRef.current;
         const finalEvents = [...streamingEventsRef.current];
         setMessages((prev) => {
@@ -392,7 +394,6 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           }
           return prev;
         });
-        send(JSON.stringify({ type: "cancel" }));
       }
 
       // Add user message
@@ -406,15 +407,26 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         },
       ]);
 
-      // Reset streaming state
+      // Reset streaming state for new turn
       streamingContentRef.current = "";
       streamingEventsRef.current = [];
       pendingMessageRef.current = null;
-      setPhase("initializing");
-      phaseRef.current = "initializing";
+      if (!isFollowUp) {
+        setPhase("initializing");
+        phaseRef.current = "initializing";
+      } else {
+        setPhase("thinking");
+        phaseRef.current = "thinking";
+      }
       setPendingApproval(null);
 
-      send(JSON.stringify({ type: "message", content, permissionMode: opts?.permissionMode }));
+      send(JSON.stringify({
+        type: "message",
+        content,
+        permissionMode: opts?.permissionMode,
+        priority: opts?.priority,
+        images: opts?.images,
+      }));
     },
     [send],
   );