@hienlh/ppm 0.9.0-beta.4 → 0.9.0-beta.5

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,28 +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(initialSessionId: string, providerId: string, content: string, permissionMode?: string): Promise<void> {
-  let sessionId = initialSessionId;
+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);
@@ -162,12 +165,12 @@ async function runStreamLoop(initialSessionId: string, providerId: string, conte
 
     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;
       }
@@ -186,15 +189,12 @@ async function runStreamLoop(initialSessionId: string, providerId: string, conte
           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";
@@ -216,14 +216,13 @@ async function runStreamLoop(initialSessionId: string, providerId: string, conte
         continue;
       }
 
-      // 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
@@ -256,10 +255,11 @@ async function runStreamLoop(initialSessionId: string, providerId: string, conte
         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;
@@ -269,7 +269,6 @@ async function runStreamLoop(initialSessionId: string, providerId: string, conte
             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);
@@ -284,7 +283,6 @@ async function runStreamLoop(initialSessionId: string, providerId: string, conte
         }).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);
@@ -303,32 +301,40 @@ async function runStreamLoop(initialSessionId: string, providerId: string, conte
 
       // 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`);
   }
 }
 
@@ -404,6 +410,7 @@ export const chatWebSocket = {
       pingIntervals: new Map(),
       phase: "idle",
       turnEvents: [],
+      isStreamingActive: false,
     };
     activeSessions.set(sessionId, newEntry);
     setupClientPing(newEntry, ws);
@@ -453,7 +460,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);
@@ -490,51 +497,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) {
-        const t0 = Date.now();
-        await provider.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) {
-        provider.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);
       provider?.abortQuery?.(sessionId);
     } else if (parsed.type === "approval_response") {
@@ -559,7 +589,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";
@@ -205,7 +205,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;
 
@@ -227,7 +227,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, Mic, MicOff } from "lucide-react";
+import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock } from "lucide-react";
 import { useVoiceInput } from "@/hooks/use-voice-input";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
@@ -22,8 +22,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;
@@ -76,6 +78,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);
@@ -329,7 +332,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) {
@@ -337,9 +340,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;
@@ -514,6 +518,7 @@ export const MessageInput = memo(function MessageInput({
               projectName={projectName}
             />
           )}
+          {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
         </div>
         {/* Mobile: single row — attach + mic + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
@@ -636,6 +641,7 @@ export const MessageInput = memo(function MessageInput({
                   projectName={projectName}
                 />
               )}
+              {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
             </div>
             <div className="flex items-center gap-1">
               {showCancel ? (
@@ -682,3 +688,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

@@ -25,7 +25,7 @@ interface UseChatReturn {
   sessionTitle: string | null;
   /** When CLI provider assigns a different session ID, this holds the new ID */
   migratedSessionId: 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;
@@ -385,11 +385,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) => {
@@ -402,7 +404,6 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           }
           return prev;
         });
-        send(JSON.stringify({ type: "cancel" }));
       }
 
       // Add user message
@@ -416,15 +417,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],
   );

package/dist/web/assets/browser-tab-BhTdeeZd.js

@@ -1 +0,0 @@
-import{o as e}from"./chunk-CFjPhJqf.js";import{t}from"./react-nm2Ru1Pt.js";import{t as n}from"./jsx-runtime-BRW_vwa9.js";import{t as r}from"./arrow-left-C_j9Ki73.js";import{o as i,t as a}from"./tab-store-DSz5PQI0.js";import{$ as o,A as s,L as c}from"./index-QiSWS6f-.js";var l=e(t(),1),u=n();function d(e){let t=e.trim();if(!t)return null;if(/^\d+$/.test(t))return`http://localhost:${t}`;/^localhost(:\d+)?/.test(t)&&(t=`http://${t}`),/^[\w.-]+:\d+/.test(t)&&!t.includes(`://`)&&(t=`http://${t}`),t.includes(`://`)||(t=t.includes(`localhost`)?`http://${t}`:`https://${t}`);try{return new URL(t),t}catch{return null}}function f(e){try{let t=new URL(e);return t.hostname===`localhost`||t.hostname===`127.0.0.1`||t.hostname===`0.0.0.0`||t.hostname===`::1`}catch{return!1}}function p(e){if(!f(e))return e;try{let t=new URL(e);return`/api/preview/${t.port||`80`}${t.pathname+t.search+t.hash}`}catch{return e}}function m({metadata:e,tabId:t}){let n=e?.url||`http://localhost:3000`,[m,h]=(0,l.useState)(n),[g,_]=(0,l.useState)(n),[v,y]=(0,l.useState)(p(n)),[b,x]=(0,l.useState)(!1),[S,C]=(0,l.useState)(!1),[w,T]=(0,l.useState)(!0),[E,D]=(0,l.useState)(null),O=(0,l.useRef)(null),k=a(e=>e.updateTab),A=(0,l.useRef)([n]),j=(0,l.useRef)(0),M=(0,l.useCallback)((e,n=!0)=>{let r=d(e);if(!r){D(`Invalid URL`);return}if(D(null),_(r),h(r),y(p(r)),T(!0),n){let e=A.current,t=j.current;A.current=e.slice(0,t+1),A.current.push(r),j.current=A.current.length-1}if(x(j.current>0),C(j.current<A.current.length-1),t)try{let e=new URL(r);k(t,{title:f(r)?`localhost:${e.port||`80`}`:e.hostname})}catch{}},[t,k]),N=(0,l.useCallback)(()=>{j.current>0&&(j.current--,M(A.current[j.current],!1))},[M]),P=(0,l.useCallback)(()=>{j.current<A.current.length-1&&(j.current++,M(A.current[j.current],!1))},[M]),F=(0,l.useCallback)(()=>{if(T(!0),D(null),O.current){let e=O.current.src;O.current.src=``,requestAnimationFrame(()=>{O.current&&(O.current.src=e)})}},[]),I=(0,l.useCallback)(()=>{window.open(g,`_blank`)},[g]);return(0,l.useEffect)(()=>{let t=e?.url;t&&t!==g&&M(t)},[e?.url]),(0,u.jsxs)(`div`,{className:`flex flex-col h-full w-full bg-background`,children:[(0,u.jsxs)(`div`,{className:`flex items-center gap-1 px-2 py-1.5 border-b border-border bg-surface shrink-0`,children:[(0,u.jsx)(`button`,{onClick:N,disabled:!b,className:`p-1.5 rounded hover:bg-surface-elevated disabled:opacity-30 transition-colors`,title:`Back`,children:(0,u.jsx)(r,{className:`size-4`})}),(0,u.jsx)(`button`,{onClick:P,disabled:!S,className:`p-1.5 rounded hover:bg-surface-elevated disabled:opacity-30 transition-colors`,title:`Forward`,children:(0,u.jsx)(o,{className:`size-4`})}),(0,u.jsx)(`button`,{onClick:F,className:`p-1.5 rounded hover:bg-surface-elevated transition-colors`,title:`Reload`,children:(0,u.jsx)(s,{className:`size-4 ${w?`animate-spin`:``}`})}),(0,u.jsxs)(`div`,{className:`flex-1 flex items-center gap-2 mx-1 px-2.5 py-1.5 rounded-md bg-background border border-border focus-within:border-accent/50 transition-colors`,children:[(0,u.jsx)(c,{className:`size-3.5 text-text-subtle shrink-0`}),(0,u.jsx)(`input`,{type:`text`,value:m,onChange:e=>h(e.target.value),onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),M(m))},placeholder:`Enter URL or port (e.g. 3000, localhost:8080)`,className:`flex-1 bg-transparent text-xs text-text-primary outline-none placeholder:text-text-subtle min-w-0`})]}),(0,u.jsx)(`button`,{onClick:I,className:`p-1.5 rounded hover:bg-surface-elevated transition-colors`,title:`Open in browser`,children:(0,u.jsx)(i,{className:`size-4`})})]}),(0,u.jsxs)(`div`,{className:`flex-1 relative min-h-0`,children:[E?(0,u.jsx)(`div`,{className:`flex items-center justify-center h-full text-text-secondary text-sm`,children:(0,u.jsx)(`p`,{children:E})}):(0,u.jsx)(`iframe`,{ref:O,src:v,className:`w-full h-full border-0`,sandbox:`allow-scripts allow-forms allow-same-origin allow-popups allow-modals`,onLoad:()=>T(!1),onError:()=>{T(!1),D(`Failed to load ${g}`)}}),w&&!E&&(0,u.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-background/50`,children:(0,u.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-text-secondary`,children:[(0,u.jsx)(s,{className:`size-4 animate-spin`}),(0,u.jsx)(`span`,{children:`Loading...`})]})})]})]})}export{m as BrowserTab};