@hienlh/ppm 0.8.60 → 0.8.62

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

@@ -0,0 +1,269 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  RotateCcw,
+  ExternalLink,
+  Globe,
+} 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;
+}
+
+interface BrowserTabProps {
+  metadata?: Record<string, unknown>;
+  tabId?: string;
+}
+
+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 [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(() => {
+    setLoading(true);
+    setError(null);
+    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);
+    }
+  };
+
+  // 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]);
+
+  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>
+        <button
+          onClick={reload}
+          className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
+          title="Reload"
+        >
+          <RotateCcw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+        </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}
+          className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
+          title="Open in browser"
+        >
+          <ExternalLink className="size-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <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 && (
+          <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>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 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, Mic, MicOff } from "lucide-react";
+import { useVoiceInput } from "@/hooks/use-voice-input";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
 import { isSupportedFile, isImageFile } from "@/lib/file-support";
@@ -74,6 +75,41 @@ export const MessageInput = memo(function MessageInput({
   const slashItemsRef = useRef<SlashItem[]>([]);
   const fileItemsRef = useRef<FileNode[]>([]);
 
+  // Voice input (Web Speech API)
+  const voice = useVoiceInput();
+  // Store pre-voice text so voice appends to existing input
+  const preVoiceTextRef = useRef("");
+  const voiceResultCb = useCallback((text: string) => {
+    const prefix = preVoiceTextRef.current;
+    const newValue = prefix ? prefix + " " + text : text;
+    setValue(newValue);
+    // Auto-resize textarea
+    requestAnimationFrame(() => {
+      const ta = window.matchMedia("(min-width: 768px)").matches
+        ? textareaRef.current
+        : mobileTextareaRef.current;
+      if (ta) {
+        ta.style.height = "auto";
+        ta.style.height = Math.min(ta.scrollHeight, 160) + "px";
+      }
+    });
+  }, []);
+  const handleVoiceToggle = useCallback(() => {
+    if (voice.isListening) {
+      voice.stop();
+    } else {
+      preVoiceTextRef.current = value.trim();
+      voice.start(voiceResultCb);
+    }
+  }, [voice.isListening, voice.start, voice.stop, value, voiceResultCb]);
+
+  // Listen for global keyboard shortcut (Cmd+Shift+V) to toggle voice
+  useEffect(() => {
+    const handler = () => { if (voice.supported) handleVoiceToggle(); };
+    window.addEventListener("toggle-voice-input", handler);
+    return () => window.removeEventListener("toggle-voice-input", handler);
+  }, [voice.supported, handleVoiceToggle]);
+
   // Apply initialValue when it changes (e.g. "Ask AI" from command palette)
   useEffect(() => {
     if (initialValue) {
@@ -465,7 +501,7 @@ export const MessageInput = memo(function MessageInput({
             onOpenChange={setModeSelectorOpen}
           />
         </div>
-        {/* Mobile: single row — attach + textarea + send */}
+        {/* Mobile: single row — attach + mic + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
           <button
             type="button"
@@ -476,6 +512,21 @@ export const MessageInput = memo(function MessageInput({
           >
             <Paperclip className="size-4" />
           </button>
+          {voice.supported && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); handleVoiceToggle(); }}
+              disabled={disabled}
+              className={`flex items-center justify-center size-7 shrink-0 rounded-full transition-colors disabled:opacity-50 ${
+                voice.isListening
+                  ? "bg-red-600 text-white animate-pulse"
+                  : "text-text-subtle hover:text-text-primary"
+              }`}
+              aria-label={voice.isListening ? "Stop voice input" : "Start voice input"}
+            >
+              {voice.isListening ? <MicOff className="size-4" /> : <Mic className="size-4" />}
+            </button>
+          )}
           <textarea
             ref={mobileTextareaRef}
             value={value}
@@ -535,6 +586,21 @@ export const MessageInput = memo(function MessageInput({
               >
                 <Paperclip className="size-4" />
               </button>
+              {voice.supported && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); handleVoiceToggle(); }}
+                  disabled={disabled}
+                  className={`flex items-center justify-center size-8 rounded-full transition-colors disabled:opacity-50 ${
+                    voice.isListening
+                      ? "bg-red-600 text-white animate-pulse"
+                      : "text-text-subtle hover:text-text-primary hover:bg-surface-elevated"
+                  }`}
+                  aria-label={voice.isListening ? "Stop voice input" : "Start voice input"}
+                >
+                  {voice.isListening ? <MicOff className="size-4" /> : <Mic className="size-4" />}
+                </button>
+              )}
               {/* Mode indicator chip */}
               <div className="relative">
                 <ModeChip

package/src/web/components/layout/command-palette.tsx

@@ -10,6 +10,8 @@ import {
   FileCode,
   FolderOpen,
   Loader2,
+  Globe,
+  Mic,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -156,7 +158,9 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action", shortcut: formatShortcut(getBinding("open-chat")) },
       { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action", shortcut: formatShortcut(getBinding("open-terminal")) },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action", shortcut: formatShortcut(getBinding("open-git-graph")) },
+      { id: "browser", label: "Open Browser", icon: Globe, action: openNewTab("browser", "Browser"), keywords: "web preview localhost iframe url", group: "action" },
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
+      { id: "voice-input", label: "Voice Input", icon: Mic, action: () => { window.dispatchEvent(new CustomEvent("toggle-voice-input")); onClose(); }, keywords: "speech microphone dictate voice", group: "action", shortcut: formatShortcut(getBinding("voice-input")) },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action", shortcut: formatShortcut(getBinding("open-git-status")) },
       {
         id: "settings", label: "Settings", icon: Settings,

package/src/web/components/layout/editor-panel.tsx

@@ -23,6 +23,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   "git-graph": lazy(() => import("@/components/git/git-graph").then((m) => ({ default: m.GitGraph }))),
   "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
   settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
+  browser: lazy(() => import("@/components/browser/browser-tab").then((m) => ({ default: m.BrowserTab }))),
 };
 
 interface EditorPanelProps {

package/src/web/components/layout/mobile-nav.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import {
   Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
-  ChevronLeft, ChevronRight,
+  ChevronLeft, ChevronRight, Globe,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
@@ -25,7 +25,7 @@ const NEW_TAB_LABELS: Partial<Record<TabType, string>> = Object.fromEntries(NEW_
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal, chat: MessageSquare, editor: FileCode, database: Database, sqlite: Database, postgres: Database,
-  "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings,
+  "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings, browser: Globe,
 };
 
 interface MobileNavProps { onMenuPress: () => void; onProjectsPress: () => void; }

package/src/web/components/layout/tab-bar.tsx

@@ -10,6 +10,7 @@ import {
   Database,
   ChevronLeft,
   ChevronRight,
+  Globe,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -33,6 +34,7 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   "git-graph": GitBranch,
   "git-diff": FileDiff,
   settings: Settings,
+  browser: Globe,
 };
 
 interface TabBarProps {

package/src/web/components/layout/tab-content.tsx

@@ -48,6 +48,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.SettingsTab,
     })),
   ),
+  browser: lazy(() =>
+    import("@/components/browser/browser-tab").then((m) => ({
+      default: m.BrowserTab,
+    })),
+  ),
 };
 
 function LoadingFallback() {

package/src/web/hooks/use-global-keybindings.ts

@@ -124,6 +124,13 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // Toggle voice input in chat
+      if (match(e, "voice-input")) {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent("toggle-voice-input"));
+        return;
+      }
+
       // Open search (sidebar)
       if (match(e, "open-search")) {
         e.preventDefault();

package/src/web/hooks/use-voice-input.ts

@@ -0,0 +1,111 @@
+import { useState, useRef, useCallback } from "react";
+
+// Extend Window for webkit prefix
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+}
+
+type SpeechRecognitionInstance = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start(): void;
+  stop(): void;
+  abort(): void;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onend: (() => void) | null;
+  onerror: ((event: Event & { error: string }) => void) | null;
+};
+
+type SpeechRecognitionConstructor = new () => SpeechRecognitionInstance;
+
+function getSpeechRecognition(): SpeechRecognitionConstructor | null {
+  const w = window as unknown as {
+    SpeechRecognition?: SpeechRecognitionConstructor;
+    webkitSpeechRecognition?: SpeechRecognitionConstructor;
+  };
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+
+export function useVoiceInput(options?: { lang?: string }) {
+  const [isListening, setIsListening] = useState(false);
+  const [interimText, setInterimText] = useState("");
+  const recognitionRef = useRef<SpeechRecognitionInstance | null>(null);
+  // Accumulate finalized text across multiple result events
+  const finalizedRef = useRef("");
+
+  const supported = typeof window !== "undefined" && getSpeechRecognition() !== null;
+
+  const start = useCallback(
+    (onResult: (text: string, isFinal: boolean) => void) => {
+      const SR = getSpeechRecognition();
+      if (!SR) return;
+
+      // Stop any existing session
+      recognitionRef.current?.abort();
+
+      const recognition = new SR();
+      recognition.lang = options?.lang ?? "vi-VN";
+      recognition.continuous = true;
+      recognition.interimResults = true;
+
+      finalizedRef.current = "";
+
+      recognition.onresult = (event: SpeechRecognitionEvent) => {
+        let interim = "";
+        let newFinalized = "";
+
+        for (let i = 0; i < event.results.length; i++) {
+          const result = event.results[i]!;
+          if (result.isFinal) {
+            newFinalized += result[0]!.transcript;
+          } else {
+            interim += result[0]!.transcript;
+          }
+        }
+
+        // Update finalized accumulator
+        if (newFinalized) {
+          finalizedRef.current = newFinalized;
+        }
+
+        const fullText = (finalizedRef.current + " " + interim).trim();
+        setInterimText(interim);
+        onResult(fullText, interim.length === 0 && finalizedRef.current.length > 0);
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+        setInterimText("");
+        // Deliver final text if any
+        if (finalizedRef.current) {
+          onResult(finalizedRef.current.trim(), true);
+        }
+      };
+
+      recognition.onerror = (event) => {
+        // "no-speech" and "aborted" are expected, not real errors
+        if (event.error !== "no-speech" && event.error !== "aborted") {
+          console.warn("[voice-input] error:", event.error);
+        }
+        setIsListening(false);
+        setInterimText("");
+      };
+
+      recognitionRef.current = recognition;
+      recognition.start();
+      setIsListening(true);
+    },
+    [options?.lang],
+  );
+
+  const stop = useCallback(() => {
+    recognitionRef.current?.stop();
+    recognitionRef.current = null;
+    setIsListening(false);
+    setInterimText("");
+  }, []);
+
+  return { isListening, interimText, start, stop, supported };
+}

package/src/web/stores/keybindings-store.ts

@@ -36,6 +36,7 @@ export const KEY_ACTIONS: KeyAction[] = [
   { id: "open-git-graph", label: "Git Graph", category: "tabs", defaultKey: "Mod+G" },
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
   { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
+  { id: "voice-input", label: "Voice Input", category: "general", defaultKey: "Mod+Shift+V", note: "Toggle speech-to-text in chat" },
   // Projects — Mod+1..9
   ...Array.from({ length: 9 }, (_, i) => ({
     id: `switch-project-${i + 1}`,

package/src/web/stores/tab-store.ts

@@ -10,7 +10,8 @@ export type TabType =
   | "postgres"
   | "git-graph"
   | "git-diff"
-  | "settings";
+  | "settings"
+  | "browser";
 
 export interface Tab {
   id: string;

package/dist/web/assets/architecture-PBZL5I3N-ChOahOB7.js

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

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

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