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

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

@@ -14,6 +14,7 @@ import { MessageInput, type ChatAttachment } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
 import { ChatHistoryBar } from "./chat-history-bar";
+
 import type { DragEvent } from "react";
 import type { FileNode } from "../../../types/project";
 import type { Session, SessionInfo } from "../../../types/chat";
@@ -89,6 +90,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     pendingApproval,
     contextWindowPct,
     sessionTitle,
+    migratedSessionId,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -97,6 +99,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     isConnected,
   } = useChat(sessionId, providerId, projectName);
 
+  // When CLI provider assigns a different session ID, update our state
+  useEffect(() => {
+    if (migratedSessionId && migratedSessionId !== sessionId) {
+      setSessionId(migratedSessionId);
+    }
+  }, [migratedSessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Auto-clear notification badge when this tab is active and document is visible.
   // Handles the case where notification arrived while browser tab was hidden.
   useEffect(() => {
@@ -140,11 +149,11 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     useTabStore.getState().openTab({
       type: "chat",
       title: "AI Chat",
-      metadata: { projectName },
+      metadata: { projectName, providerId },
       projectId: projectName || null,
       closable: true,
     });
-  }, [projectName]);
+  }, [projectName, providerId]);
 
   const handleSelectSession = useCallback((session: SessionInfo) => {
     setSessionId(session.id);
@@ -345,6 +354,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           refreshUsage={refreshUsage}
           lastFetchedAt={lastFetchedAt}
           sessionId={sessionId}
+          providerId={providerId}
           onSelectSession={handleSelectSession}
           onBugReport={sessionId ? () => openBugReportPopup(version, { sessionId, projectName }) : undefined}
           isConnected={isConnected}
@@ -386,6 +396,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           externalFiles={externalFiles}
           permissionMode={permissionMode}
           onModeChange={setPermissionMode}
+          providerId={providerId}
+          onProviderChange={!sessionId ? setProviderId : undefined}
         />
       </div>
 

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

@@ -1,10 +1,12 @@
 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";
 import { AttachmentChips } from "./attachment-chips";
 import { ModeSelector, getModeLabel, getModeIcon } from "./mode-selector";
+import { ProviderSelector } from "./provider-selector";
 import type { SlashItem } from "./slash-command-picker";
 import type { FileNode } from "../../../types/project";
 import { flattenFileTree } from "./file-picker";
@@ -44,6 +46,10 @@ interface MessageInputProps {
   permissionMode?: string;
   /** Permission mode change handler */
   onModeChange?: (mode: string) => void;
+  /** Current provider ID */
+  providerId?: string;
+  /** Provider change handler — undefined when session is active (locked) */
+  onProviderChange?: (providerId: string) => void;
 }
 
 export const MessageInput = memo(function MessageInput({
@@ -63,6 +69,8 @@ export const MessageInput = memo(function MessageInput({
   autoFocus,
   permissionMode,
   onModeChange,
+  providerId,
+  onProviderChange,
 }: MessageInputProps) {
   const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
@@ -74,6 +82,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) {
@@ -452,7 +495,7 @@ export const MessageInput = memo(function MessageInput({
       >
         {/* Attachment chips (inside container, aligned with input) */}
         <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
-        {/* Mobile: mode chip row */}
+        {/* Mobile: mode chip + provider selector row */}
         <div className="flex items-center gap-1 px-2 pt-2 md:hidden relative">
           <ModeChip
             mode={permissionMode ?? "bypassPermissions"}
@@ -464,8 +507,15 @@ export const MessageInput = memo(function MessageInput({
             open={modeSelectorOpen}
             onOpenChange={setModeSelectorOpen}
           />
+          {onProviderChange && projectName && (
+            <ProviderSelector
+              value={providerId ?? "claude"}
+              onChange={onProviderChange}
+              projectName={projectName}
+            />
+          )}
         </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 +526,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 +600,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
@@ -548,6 +628,14 @@ export const MessageInput = memo(function MessageInput({
                   onOpenChange={setModeSelectorOpen}
                 />
               </div>
+              {/* Provider selector — only when no active session */}
+              {onProviderChange && projectName && (
+                <ProviderSelector
+                  value={providerId ?? "claude"}
+                  onChange={onProviderChange}
+                  projectName={projectName}
+                />
+              )}
             </div>
             <div className="flex items-center gap-1">
               {showCancel ? (

package/src/web/components/chat/provider-selector.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
+import { Check } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+
+interface ProviderInfo {
+  id: string;
+  name: string;
+}
+
+interface ProviderSelectorProps {
+  value: string;
+  onChange: (providerId: string) => void;
+  projectName: string;
+}
+
+const PROVIDER_ICONS: Record<string, string> = {
+  claude: "C",
+  cursor: "▶",
+  codex: "◆",
+  gemini: "G",
+};
+
+/**
+ * Provider selector chip + popup — matches ModeSelector style.
+ * Hidden when only 1 provider available.
+ */
+export function ProviderSelector({ value, onChange, projectName }: ProviderSelectorProps) {
+  const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const focusedRef = useRef(0);
+
+  useEffect(() => {
+    if (!projectName) return;
+    api.get<ProviderInfo[]>(`${projectUrl(projectName)}/chat/providers`)
+      .then(setProviders)
+      .catch(() => {});
+  }, [projectName]);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  // Focus current on open
+  useEffect(() => {
+    if (open) {
+      focusedRef.current = Math.max(0, providers.findIndex((p) => p.id === value));
+    }
+  }, [open, value, providers]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Escape") { setOpen(false); return; }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const dir = e.key === "ArrowDown" ? 1 : -1;
+      focusedRef.current = (focusedRef.current + dir + providers.length) % providers.length;
+      const el = panelRef.current?.querySelector(`[data-idx="${focusedRef.current}"]`) as HTMLElement;
+      el?.focus();
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const p = providers[focusedRef.current];
+      if (p) { onChange(p.id); setOpen(false); }
+    }
+  }, [onChange, providers]);
+
+  // Hide when only 1 provider
+  if (providers.length <= 1) return null;
+
+  const current = providers.find((p) => p.id === value);
+  const icon = PROVIDER_ICONS[value] || "?";
+
+  return (
+    <div className="relative">
+      {/* Chip — same style as ModeChip */}
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); }}
+        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={`AI Provider: ${current?.name ?? value}`}
+      >
+        <span className="inline-flex h-3.5 w-3.5 items-center justify-center rounded text-[9px] font-bold bg-surface-elevated shrink-0">
+          {icon}
+        </span>
+        <span className="max-w-[80px] truncate capitalize">{current?.name ?? value}</span>
+      </button>
+
+      {/* Popup panel — same style as ModeSelector */}
+      {open && (
+        <div
+          ref={panelRef}
+          role="listbox"
+          aria-label="AI Providers"
+          onKeyDown={handleKeyDown}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+          className="absolute bottom-full left-0 mb-1 z-50 w-56 rounded-lg border border-border bg-surface shadow-lg"
+        >
+          <div className="px-3 py-2 border-b border-border">
+            <span className="text-xs font-medium text-text-secondary">Provider</span>
+          </div>
+          <div className="py-1">
+            {providers.map((p, idx) => {
+              const pIcon = PROVIDER_ICONS[p.id] || "?";
+              const isActive = p.id === value;
+              return (
+                <button
+                  key={p.id}
+                  data-idx={idx}
+                  role="option"
+                  aria-selected={isActive}
+                  tabIndex={0}
+                  onClick={() => { onChange(p.id); setOpen(false); }}
+                  className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-elevated focus:bg-surface-elevated focus:outline-none ${isActive ? "bg-surface-elevated" : ""}`}
+                >
+                  <span className="inline-flex h-5 w-5 items-center justify-center rounded text-[11px] font-bold bg-surface-elevated text-text-subtle shrink-0">
+                    {pIcon}
+                  </span>
+                  <span className="flex-1 text-sm font-medium text-text-primary capitalize">{p.name}</span>
+                  {isActive && <Check className="size-4 shrink-0 text-primary" />}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Small provider badge for session lists */
+export function ProviderBadge({ providerId }: { providerId: string }) {
+  const icon = PROVIDER_ICONS[providerId] || "?";
+  return (
+    <span
+      className="inline-flex h-4 w-4 items-center justify-center rounded text-[10px] font-bold bg-surface-elevated text-text-subtle shrink-0"
+      title={providerId}
+    >
+      {icon}
+    </span>
+  );
+}

package/src/web/components/chat/session-picker.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { api, projectUrl } from "@/lib/api-client";
 import { Plus, Trash2, MessageSquare, ChevronDown } from "lucide-react";
+import { ProviderBadge } from "./provider-selector";
 import type { SessionInfo } from "../../../types/chat";
 
 interface SessionPickerProps {
@@ -114,7 +115,8 @@ export function SessionPicker({
                   }`}
                 >
                   <div className="flex flex-col min-w-0 flex-1">
-                    <span className="truncate text-xs font-medium">
+                    <span className="flex items-center gap-1.5 truncate text-xs font-medium">
+                      <ProviderBadge providerId={session.providerId} />
                       {session.title}
                     </span>
                     <span className="text-xs text-text-subtle">

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/panel-layout.tsx

@@ -1,6 +1,8 @@
+import { useEffect } from "react";
 import { Panel, Group, Separator } from "react-resizable-panels";
 import { GripVertical, GripHorizontal } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
+import { createPanel } from "@/stores/panel-utils";
 import { EditorPanel } from "./editor-panel";
 
 interface PanelLayoutProps {
@@ -13,7 +15,21 @@ export function PanelLayout({ projectName }: PanelLayoutProps) {
   );
   const panelCount = grid.flat().length;
 
-  if (panelCount <= 1 && grid[0]?.[0]) {
+  // Recover from empty grid (corrupt persisted state or edge-case bug)
+  useEffect(() => {
+    if (panelCount === 0) {
+      const p = createPanel();
+      usePanelStore.setState((s) => ({
+        panels: { ...s.panels, [p.id]: p },
+        grid: [[p.id]],
+        focusedPanelId: p.id,
+      }));
+    }
+  }, [panelCount]);
+
+  if (panelCount === 0) return null;
+
+  if (panelCount === 1 && grid[0]?.[0]) {
     return <EditorPanel panelId={grid[0][0]} projectName={projectName} />;
   }
 

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() {