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

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

@@ -1,77 +1,7 @@
-import { useState, useRef, useCallback, useEffect } from "react";
-import {
-  ArrowLeft,
-  ArrowRight,
-  RotateCcw,
-  ExternalLink,
-  Globe,
-} from "lucide-react";
+import { useState, useRef, useCallback } from "react";
+import { ExternalLink, Globe, Loader2, RefreshCw, X } from "lucide-react";
 import { useTabStore } from "@/stores/tab-store";
-
-/** Parse a URL string — returns normalized URL or null if invalid */
-function parseUrl(input: string): string | null {
-  let url = input.trim();
-  if (!url) return null;
-
-  // If just a port number, treat as localhost
-  if (/^\d+$/.test(url)) return `http://localhost:${url}`;
-
-  // If host:port without scheme, add http://
-  if (/^localhost(:\d+)?/.test(url)) url = `http://${url}`;
-  if (/^[\w.-]+:\d+/.test(url) && !url.includes("://")) url = `http://${url}`;
-
-  // If no scheme at all, add https:// for external, http:// for localhost
-  if (!url.includes("://")) {
-    url = url.includes("localhost") ? `http://${url}` : `https://${url}`;
-  }
-
-  try {
-    new URL(url);
-    return url;
-  } catch {
-    return null;
-  }
-}
-
-/** Check if a URL is a localhost address */
-function isLocalhost(url: string): boolean {
-  try {
-    const u = new URL(url);
-    return (
-      u.hostname === "localhost" ||
-      u.hostname === "127.0.0.1" ||
-      u.hostname === "0.0.0.0" ||
-      u.hostname === "::1"
-    );
-  } catch {
-    return false;
-  }
-}
-
-/** Convert URL to iframe src — proxy localhost through backend */
-function toIframeSrc(url: string): string {
-  if (!isLocalhost(url)) return url;
-
-  try {
-    const u = new URL(url);
-    const port = u.port || "80";
-    const path = u.pathname + u.search + u.hash;
-    return `/api/preview/${port}${path}`;
-  } catch {
-    return url;
-  }
-}
-
-/** Extract display URL from iframe src (reverse of toIframeSrc) */
-function fromIframeSrc(src: string): string {
-  const match = src.match(/^\/api\/preview\/(\d+)(\/.*)?$/);
-  if (match) {
-    const port = match[1];
-    const path = match[2] || "/";
-    return `http://localhost:${port}${path}`;
-  }
-  return src;
-}
+import { api } from "@/lib/api-client";
 
 interface BrowserTabProps {
   metadata?: Record<string, unknown>;
@@ -79,188 +9,139 @@ interface BrowserTabProps {
 }
 
 export function BrowserTab({ metadata, tabId }: BrowserTabProps) {
-  const initialUrl = (metadata?.url as string) || "http://localhost:3000";
-  const [addressBar, setAddressBar] = useState(initialUrl);
-  const [currentUrl, setCurrentUrl] = useState(initialUrl);
-  const [iframeSrc, setIframeSrc] = useState(toIframeSrc(initialUrl));
-  const [canGoBack, setCanGoBack] = useState(false);
-  const [canGoForward, setCanGoForward] = useState(false);
-  const [loading, setLoading] = useState(true);
+  const initialPort = (metadata?.port as number) || 0;
+  const [portInput, setPortInput] = useState(initialPort ? String(initialPort) : "");
+  const [tunnelUrl, setTunnelUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const updateTab = useTabStore((s) => s.updateTab);
 
-  // Navigation history (iframe same-origin only)
-  const historyRef = useRef<string[]>([initialUrl]);
-  const historyIdxRef = useRef(0);
-
-  const navigate = useCallback(
-    (url: string, addToHistory = true) => {
-      const parsed = parseUrl(url);
-      if (!parsed) {
-        setError("Invalid URL");
-        return;
-      }
-
-      setError(null);
-      setCurrentUrl(parsed);
-      setAddressBar(parsed);
-      setIframeSrc(toIframeSrc(parsed));
-      setLoading(true);
-
-      if (addToHistory) {
-        const h = historyRef.current;
-        const idx = historyIdxRef.current;
-        // Truncate forward history
-        historyRef.current = h.slice(0, idx + 1);
-        historyRef.current.push(parsed);
-        historyIdxRef.current = historyRef.current.length - 1;
-      }
-
-      setCanGoBack(historyIdxRef.current > 0);
-      setCanGoForward(
-        historyIdxRef.current < historyRef.current.length - 1,
-      );
-
-      // Update tab title
-      if (tabId) {
-        try {
-          const u = new URL(parsed);
-          const title = isLocalhost(parsed)
-            ? `localhost:${u.port || "80"}`
-            : u.hostname;
-          updateTab(tabId, { title });
-        } catch {}
-      }
-    },
-    [tabId, updateTab],
-  );
-
-  const goBack = useCallback(() => {
-    if (historyIdxRef.current > 0) {
-      historyIdxRef.current--;
-      navigate(historyRef.current[historyIdxRef.current]!, false);
-    }
-  }, [navigate]);
-
-  const goForward = useCallback(() => {
-    if (historyIdxRef.current < historyRef.current.length - 1) {
-      historyIdxRef.current++;
-      navigate(historyRef.current[historyIdxRef.current]!, false);
-    }
-  }, [navigate]);
-
-  const reload = useCallback(() => {
+  const startTunnel = useCallback(async (port: number) => {
     setLoading(true);
     setError(null);
+    setTunnelUrl(null);
+
+    try {
+      const res = await api.post<{ port: number; url: string }>("/api/preview/tunnel", { port });
+      setTunnelUrl(res.url);
+      if (tabId) updateTab(tabId, { title: `localhost:${port}`, metadata: { ...metadata, port } });
+    } catch (e: any) {
+      setError(e.message || `Failed to start tunnel for port ${port}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tabId, metadata, updateTab]);
+
+  const stopTunnel = useCallback(async () => {
+    const port = parseInt(portInput, 10);
+    if (!port) return;
+    try { await api.del(`/api/preview/tunnel/${port}`); } catch {}
+    setTunnelUrl(null);
+    if (tabId) updateTab(tabId, { title: "Browser" });
+  }, [portInput, tabId, updateTab]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const port = parseInt(portInput, 10);
+    if (port >= 1 && port <= 65535) startTunnel(port);
+    else setError("Port must be 1-65535");
+  };
+
+  const reload = () => {
     if (iframeRef.current) {
-      // Force reload by re-setting src
       const src = iframeRef.current.src;
       iframeRef.current.src = "";
-      requestAnimationFrame(() => {
-        if (iframeRef.current) iframeRef.current.src = src;
-      });
-    }
-  }, []);
-
-  const openExternal = useCallback(() => {
-    window.open(currentUrl, "_blank");
-  }, [currentUrl]);
-
-  const handleAddressKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      navigate(addressBar);
+      requestAnimationFrame(() => { if (iframeRef.current) iframeRef.current.src = src; });
     }
   };
 
-  // Navigate when metadata.url changes (e.g. opened from command palette)
-  useEffect(() => {
-    const metaUrl = metadata?.url as string | undefined;
-    if (metaUrl && metaUrl !== currentUrl) {
-      navigate(metaUrl);
-    }
-  }, [metadata?.url]);
+  // No tunnel yet — show port input
+  if (!tunnelUrl) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4 p-6">
+        <Globe className="size-12 text-text-subtle" />
+        <h2 className="text-lg font-medium text-text-primary">Open Localhost</h2>
+        <p className="text-sm text-text-secondary text-center max-w-sm">
+          Enter the port of your local dev server to preview it here.
+        </p>
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 w-full max-w-xs">
+          <div className="flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg bg-surface border border-border focus-within:border-accent/50 transition-colors">
+            <span className="text-sm text-text-subtle shrink-0">localhost:</span>
+            <input
+              type="number"
+              value={portInput}
+              onChange={(e) => setPortInput(e.target.value)}
+              placeholder="3000"
+              min={1}
+              max={65535}
+              autoFocus
+              className="flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-subtle min-w-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading || !portInput}
+            className="px-4 py-2.5 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent/90 disabled:opacity-50 transition-colors shrink-0"
+          >
+            {loading ? <Loader2 className="size-4 animate-spin" /> : "Open"}
+          </button>
+        </form>
+        {error && <p className="text-sm text-red-400">{error}</p>}
+        {loading && (
+          <div className="flex items-center gap-2 text-sm text-text-secondary">
+            <Loader2 className="size-4 animate-spin" />
+            <span>Starting tunnel... (may take a few seconds)</span>
+          </div>
+        )}
+      </div>
+    );
+  }
 
+  // Tunnel active — show iframe
   return (
     <div className="flex flex-col h-full w-full bg-background">
       {/* Toolbar */}
-      <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border bg-surface shrink-0">
-        {/* Nav buttons */}
-        <button
-          onClick={goBack}
-          disabled={!canGoBack}
-          className="p-1.5 rounded hover:bg-surface-elevated disabled:opacity-30 transition-colors"
-          title="Back"
-        >
-          <ArrowLeft className="size-4" />
-        </button>
-        <button
-          onClick={goForward}
-          disabled={!canGoForward}
-          className="p-1.5 rounded hover:bg-surface-elevated disabled:opacity-30 transition-colors"
-          title="Forward"
-        >
-          <ArrowRight className="size-4" />
-        </button>
+      <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-surface shrink-0">
+        <Globe className="size-4 text-text-subtle shrink-0" />
+        <span className="text-xs text-text-primary font-medium">localhost:{portInput}</span>
+        <span className="text-xs text-text-subtle truncate ml-1">({tunnelUrl})</span>
+        <div className="flex-1" />
         <button
           onClick={reload}
           className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
           title="Reload"
         >
-          <RotateCcw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+          <RefreshCw className="size-3.5" />
         </button>
-
-        {/* Address bar */}
-        <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">
-          <Globe className="size-3.5 text-text-subtle shrink-0" />
-          <input
-            type="text"
-            value={addressBar}
-            onChange={(e) => setAddressBar(e.target.value)}
-            onKeyDown={handleAddressKeyDown}
-            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"
-          />
-        </div>
-
-        {/* Open external */}
         <button
-          onClick={openExternal}
+          onClick={() => window.open(tunnelUrl, "_blank")}
           className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
           title="Open in browser"
         >
-          <ExternalLink className="size-4" />
+          <ExternalLink className="size-3.5" />
+        </button>
+        <button
+          onClick={stopTunnel}
+          className="p-1.5 rounded hover:bg-surface-elevated text-red-400 transition-colors"
+          title="Stop tunnel"
+        >
+          <X className="size-3.5" />
         </button>
       </div>
 
-      {/* Content */}
+      {/* iframe */}
       <div className="flex-1 relative min-h-0">
-        {error ? (
-          <div className="flex items-center justify-center h-full text-text-secondary text-sm">
-            <p>{error}</p>
-          </div>
-        ) : (
-          <iframe
-            ref={iframeRef}
-            src={iframeSrc}
-            className="w-full h-full border-0"
-            sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
-            onLoad={() => setLoading(false)}
-            onError={() => {
-              setLoading(false);
-              setError(`Failed to load ${currentUrl}`);
-            }}
-          />
-        )}
-
-        {/* Loading overlay */}
-        {loading && !error && (
+        <iframe
+          ref={iframeRef}
+          src={tunnelUrl}
+          className="w-full h-full border-0"
+          sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+          onLoad={() => setLoading(false)}
+        />
+        {loading && (
           <div className="absolute inset-0 flex items-center justify-center bg-background/50">
-            <div className="flex items-center gap-2 text-sm text-text-secondary">
-              <RotateCcw className="size-4 animate-spin" />
-              <span>Loading...</span>
-            </div>
+            <Loader2 className="size-5 animate-spin text-text-secondary" />
           </div>
         )}
       </div>

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,8 @@ export const MessageInput = memo(function MessageInput({
 
     onSlashStateChange?.(false, "");
     onFileStateChange?.(false, "");
-    onSend(trimmed, readyAttachments);
+    if (voice.isListening) voice.stop();
+    onSend(trimmed, readyAttachments, isStreaming ? priority : undefined);
     setValue("");
     // Revoke preview URLs
     for (const att of attachments) {
@@ -337,9 +341,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 +519,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 +642,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 +689,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/architecture-PBZL5I3N-281eTKQ3.js

@@ -1 +0,0 @@
-import"./chunk-XZSTWKYB-5W2emiq4.js";import{n as e}from"./chunk-R5LLSJPH-LdG7RqsM.js";export{e as createArchitectureServices};

package/dist/web/assets/arrow-left-C_j9Ki73.js

@@ -1 +0,0 @@
-import{n as e}from"./jsx-runtime-BRW_vwa9.js";var t=e(`arrow-left`,[[`path`,{d:`m12 19-7-7 7-7`,key:`1l729n`}],[`path`,{d:`M19 12H5`,key:`x3x0zl`}]]);export{t};

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

package/dist/web/assets/channel-CKNZAqoN.js

@@ -1 +0,0 @@
-import{it as e,rt as t}from"./chunk-7R4GIKGN-DvbvLUIN.js";var n=(n,r)=>e.lang.round(t.parse(n)[r]);export{n as t};