@hienlh/ppm 0.8.85 → 0.8.86

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

@@ -1,6 +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 { useVoiceInput } from "@/hooks/use-voice-input";
+import { ArrowUp, Square, Paperclip } from "lucide-react";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
 import { isSupportedFile, isImageFile } from "@/lib/file-support";
@@ -68,48 +67,12 @@ export const MessageInput = memo(function MessageInput({
   const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const [modeSelectorOpen, setModeSelectorOpen] = useState(false);
-  const [pendingSend, setPendingSend] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   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) {
@@ -311,18 +274,14 @@ export const MessageInput = memo(function MessageInput({
     });
   }, []);
 
-  /** Execute the actual send (called directly or after uploads complete) */
-  const executeSend = useCallback(() => {
+  const handleSend = useCallback(() => {
     const trimmed = value.trim();
     const readyAttachments = attachments.filter((a) => a.status === "ready");
-    if (!trimmed && readyAttachments.length === 0) {
-      setPendingSend(false);
-      return;
-    }
+    if (!trimmed && readyAttachments.length === 0) return;
+    if (disabled) return;
 
     onSlashStateChange?.(false, "");
     onFileStateChange?.(false, "");
-    if (voice.isListening) voice.stop();
     onSend(trimmed, readyAttachments);
     setValue("");
     // Revoke preview URLs
@@ -330,32 +289,9 @@ export const MessageInput = memo(function MessageInput({
       if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
     }
     setAttachments([]);
-    setPendingSend(false);
     if (textareaRef.current) textareaRef.current.style.height = "auto";
     if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
-  }, [value, attachments, onSend, onSlashStateChange, onFileStateChange]);
-
-  const handleSend = useCallback(() => {
-    if (disabled) return;
-
-    // If files are still uploading, queue the send for when they finish
-    if (attachments.some((a) => a.status === "uploading")) {
-      const trimmed = value.trim();
-      if (trimmed || attachments.some((a) => a.status !== "error")) {
-        setPendingSend(true);
-      }
-      return;
-    }
-
-    executeSend();
-  }, [value, attachments, disabled, executeSend]);
-
-  // Auto-send when queued and all uploads complete
-  useEffect(() => {
-    if (!pendingSend) return;
-    if (attachments.some((a) => a.status === "uploading")) return;
-    executeSend();
-  }, [pendingSend, attachments, executeSend]);
+  }, [value, attachments, disabled, onSend, onSlashStateChange, onFileStateChange]);
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLTextAreaElement>) => {
@@ -468,7 +404,7 @@ export const MessageInput = memo(function MessageInput({
     [processFiles],
   );
 
-  const hasContent = value.trim().length > 0 || attachments.some((a) => a.status !== "error");
+  const hasContent = value.trim().length > 0 || attachments.some((a) => a.status === "ready");
   const showCancel = isStreaming && !hasContent;
 
   return (
@@ -502,7 +438,7 @@ export const MessageInput = memo(function MessageInput({
             onOpenChange={setModeSelectorOpen}
           />
         </div>
-        {/* Mobile: single row — attach + mic + textarea + send */}
+        {/* Mobile: single row — attach + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
           <button
             type="button"
@@ -513,21 +449,6 @@ 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}
@@ -551,12 +472,12 @@ export const MessageInput = memo(function MessageInput({
             </button>
           ) : (
             <button
-              onClick={(e) => { e.stopPropagation(); pendingSend ? setPendingSend(false) : handleSend(); }}
+              onClick={(e) => { e.stopPropagation(); handleSend(); }}
               disabled={disabled || !hasContent}
               className="flex items-center justify-center size-7 shrink-0 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-30 transition-colors"
-              aria-label={pendingSend ? "Cancel queued send" : "Send"}
+              aria-label="Send"
             >
-              {pendingSend ? <Loader2 className="size-3.5 animate-spin" /> : <ArrowUp className="size-3.5" />}
+              <ArrowUp className="size-3.5" />
             </button>
           )}
         </div>
@@ -587,21 +508,6 @@ 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
@@ -627,12 +533,12 @@ export const MessageInput = memo(function MessageInput({
                 </button>
               ) : (
                 <button
-                  onClick={(e) => { e.stopPropagation(); pendingSend ? setPendingSend(false) : handleSend(); }}
+                  onClick={(e) => { e.stopPropagation(); handleSend(); }}
                   disabled={disabled || !hasContent}
                   className="flex items-center justify-center size-8 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-                  aria-label={pendingSend ? "Cancel queued send" : "Send message"}
+                  aria-label="Send message"
                 >
-                  {pendingSend ? <Loader2 className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
+                  <ArrowUp className="size-4" />
                 </button>
               )}
             </div>

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

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { getAuthToken } from "@/lib/api-client";
 import type { ChatMessage, ChatEvent } from "../../../types/chat";
-import type { SessionPhase } from "../../../types/api";
+import type { StreamingStatus } from "@/hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { cn, basename } from "@/lib/utils";
@@ -39,8 +39,9 @@ interface MessageListProps {
   pendingApproval: { requestId: string; tool: string; input: unknown } | null;
   onApprovalResponse: (requestId: string, approved: boolean, data?: unknown) => void;
   isStreaming: boolean;
-  phase?: SessionPhase;
+  streamingStatus?: StreamingStatus;
   connectingElapsed?: number;
+  thinkingWarningThreshold?: number;
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
   onFork?: (userMessage: string) => void;
@@ -52,8 +53,9 @@ export function MessageList({
   pendingApproval,
   onApprovalResponse,
   isStreaming,
-  phase,
+  streamingStatus,
   connectingElapsed,
+  thinkingWarningThreshold,
   projectName,
   onFork,
 }: MessageListProps) {
@@ -106,7 +108,7 @@ export function MessageList({
             : <ApprovalCard approval={pendingApproval} onRespond={onApprovalResponse} />
         )}
 
-        {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} phase={phase} elapsed={connectingElapsed} />}
+        {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} streamingStatus={streamingStatus} elapsed={connectingElapsed} warningThreshold={thinkingWarningThreshold} />}
       </StickToBottom.Content>
       <ScrollToBottomButton />
     </StickToBottom>
@@ -610,13 +612,6 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
       groups.push({ kind: "thinking", content: thinkingBuffer });
       thinkingBuffer = "";
     }
-    if (event.type === "account_retry") {
-      if (textBuffer) { groups.push({ kind: "text", content: textBuffer }); textBuffer = ""; }
-      const label = (event as any).accountLabel ?? "another account";
-      const reason = (event as any).reason ?? "Auth failed";
-      groups.push({ kind: "text", content: `\n\n> ↻ ${reason} — retrying with **${label}**...\n\n` });
-      continue;
-    }
     if (event.type === "text") {
       textBuffer += event.content;
     } else if (event.type === "tool_use") {
@@ -726,11 +721,9 @@ function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming:
         {!isStreaming && <span className="text-text-subtle/50 ml-auto">{content.length > 100 ? `${Math.round(content.length / 4)} tokens` : ""}</span>}
       </button>
       {expanded && (
-        <StickToBottom className="max-h-60 overflow-y-auto" resize="smooth" initial="instant">
-          <StickToBottom.Content className="px-2 pb-2 text-text-subtle/80 whitespace-pre-wrap text-[11px] leading-relaxed">
-            {content}
-          </StickToBottom.Content>
-        </StickToBottom>
+        <div className="px-2 pb-2 text-text-subtle/80 whitespace-pre-wrap max-h-60 overflow-y-auto text-[11px] leading-relaxed">
+          {content}
+        </div>
       )}
     </div>
   );
@@ -758,13 +751,14 @@ function StreamingText({ content, animate: isStreaming, projectName }: { content
  * - After tool: "Processing..."
  * - Text streaming: hidden
  */
-function ThinkingIndicator({ lastMessage, phase, elapsed }: { lastMessage?: ChatMessage; phase?: SessionPhase; elapsed?: number }) {
-  // Show indicator when:
+function ThinkingIndicator({ lastMessage, streamingStatus, elapsed, warningThreshold = 15 }: { lastMessage?: ChatMessage; streamingStatus?: StreamingStatus; elapsed?: number; warningThreshold?: number }) {
+  // Show "Thinking" when:
   // 1. No assistant message yet (waiting for first response)
-  // 2. Last event is tool_result (Claude thinking after tool execution)
+  // 2. Last event is tool_use/tool_result (Claude thinking after tool execution)
   // Hide when text is actively streaming (text itself is the indicator)
 
   const isWaiting = !lastMessage || lastMessage.role !== "assistant";
+  // Show Thinking only after tool_result (tool finished), not tool_use (tool still running)
   const isAfterTool = (() => {
     if (!lastMessage?.events?.length) return false;
     const last = lastMessage.events[lastMessage.events.length - 1]!;
@@ -773,19 +767,13 @@ function ThinkingIndicator({ lastMessage, phase, elapsed }: { lastMessage?: Chat
 
   if (!isWaiting && !isAfterTool) return null;
 
-  const label = phase === "initializing" ? "Initializing"
-    : phase === "connecting" ? "Connecting"
-    : phase === "thinking" ? "Thinking"
-    : "Processing";
-
-  const isLong = phase === "connecting" && (elapsed ?? 0) >= 30;
-
+  const isLong = isWaiting && (elapsed ?? 0) >= warningThreshold;
   return (
     <div className="flex flex-col gap-1 text-sm">
       <div className="flex items-center gap-2 text-text-subtle">
         <Loader2 className="size-3 animate-spin" />
         <span>
-          {label}
+          Thinking
           {isWaiting && (elapsed ?? 0) > 0 && <span className="text-text-subtle/60">... ({elapsed}s)</span>}
         </span>
       </div>

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { api, projectUrl } from "@/lib/api-client";
-import { Plus, Trash2, MessageSquare, ChevronDown, Pin, PinOff } from "lucide-react";
+import { Plus, Trash2, MessageSquare, ChevronDown } from "lucide-react";
 import type { SessionInfo } from "../../../types/chat";
 
 interface SessionPickerProps {
@@ -57,75 +57,6 @@ export function SessionPicker({
     }
   };
 
-  const handleTogglePin = async (e: React.MouseEvent, session: SessionInfo) => {
-    e.stopPropagation();
-    if (!projectName) return;
-    const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/pin`;
-    try {
-      if (session.pinned) {
-        await api.del(url);
-      } else {
-        await api.put(url);
-      }
-      setSessions((prev) => {
-        const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
-        return updated.sort((a, b) => {
-          if (a.pinned && !b.pinned) return -1;
-          if (!a.pinned && b.pinned) return 1;
-          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-        });
-      });
-    } catch {
-      // Silently fail
-    }
-  };
-
-  function renderSessionRow(session: SessionInfo) {
-    return (
-      <div
-        key={session.id}
-        onClick={() => {
-          onSelectSession(session);
-          setOpen(false);
-        }}
-        className={`group flex items-center justify-between px-3 py-2 text-sm cursor-pointer hover:bg-surface-elevated transition-colors ${
-          session.id === currentSessionId
-            ? "bg-surface-elevated text-text-primary"
-            : "text-text-secondary"
-        }`}
-      >
-        <div className="flex flex-col min-w-0 flex-1">
-          <span className="truncate text-xs font-medium">
-            {session.title}
-          </span>
-          <span className="text-xs text-text-subtle">
-            {new Date(session.createdAt).toLocaleDateString()}
-          </span>
-        </div>
-        <div className="flex items-center gap-0.5 shrink-0">
-          <button
-            onClick={(e) => handleTogglePin(e, session)}
-            className={`p-1 rounded transition-colors ${
-              session.pinned
-                ? "text-primary hover:text-primary/70"
-                : "text-text-subtle md:opacity-0 md:group-hover:opacity-100 hover:text-text-primary"
-            }`}
-            aria-label={session.pinned ? "Unpin session" : "Pin session"}
-          >
-            {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
-          </button>
-          <button
-            onClick={(e) => handleDelete(e, session)}
-            className="p-1 rounded hover:bg-red-500/20 text-text-subtle hover:text-red-400 transition-colors md:opacity-0 md:group-hover:opacity-100"
-            aria-label="Delete session"
-          >
-            <Trash2 className="size-3" />
-          </button>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="relative">
       <button
@@ -169,14 +100,36 @@ export function SessionPicker({
                   No sessions yet
                 </p>
               )}
-              {sessions.filter((s) => s.pinned).length > 0 && (
-                <p className="px-3 py-1 text-[10px] text-text-subtle uppercase tracking-wider bg-surface">Pinned</p>
-              )}
-              {sessions.filter((s) => s.pinned).map((session) => renderSessionRow(session))}
-              {sessions.filter((s) => s.pinned).length > 0 && sessions.filter((s) => !s.pinned).length > 0 && (
-                <div className="border-t border-border" />
-              )}
-              {sessions.filter((s) => !s.pinned).map((session) => renderSessionRow(session))}
+              {sessions.map((session) => (
+                <div
+                  key={session.id}
+                  onClick={() => {
+                    onSelectSession(session);
+                    setOpen(false);
+                  }}
+                  className={`flex items-center justify-between px-3 py-2 text-sm cursor-pointer hover:bg-surface-elevated transition-colors ${
+                    session.id === currentSessionId
+                      ? "bg-surface-elevated text-text-primary"
+                      : "text-text-secondary"
+                  }`}
+                >
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="truncate text-xs font-medium">
+                      {session.title}
+                    </span>
+                    <span className="text-xs text-text-subtle">
+                      {new Date(session.createdAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <button
+                    onClick={(e) => handleDelete(e, session)}
+                    className="p-1 rounded hover:bg-red-500/20 text-text-subtle hover:text-red-400 transition-colors shrink-0"
+                    aria-label="Delete session"
+                  >
+                    <Trash2 className="size-3" />
+                  </button>
+                </div>
+              ))}
             </div>
           </div>
         </>

package/src/web/components/chat/usage-badge.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Activity, RefreshCw, Eye, Download, Upload, Plus, X, Settings } from "lucide-react";
+import { Activity, RefreshCw, Eye, Download, Upload, Plus, X } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import type { UsageInfo, LimitBucket } from "../../../types/chat";
 import {
@@ -12,7 +12,6 @@ import {
   type OAuthProfileData,
 } from "../../lib/api-settings";
 import { AddAccountDialog, ExportAccountsDialog, ImportAccountsDialog } from "./account-dialogs";
-import { AccountRotationSettings } from "./account-rotation-settings";
 
 interface UsageBadgeProps {
   usage: UsageInfo;
@@ -246,7 +245,6 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showExportDialog, setShowExportDialog] = useState(false);
   const [showImportDialog, setShowImportDialog] = useState(false);
-  const [showRotationSettings, setShowRotationSettings] = useState(false);
   const [exportPreselect, setExportPreselect] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
   const msgTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -340,13 +338,6 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
           )}
         </div>
         <div className="flex items-center gap-1">
-          <button
-            onClick={() => setShowRotationSettings(true)}
-            className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-            title="Rotation & retry settings"
-          >
-            <Settings className="size-3" />
-          </button>
           {onReload && (
             <button
               onClick={() => { onReload(); loadAll(); }}
@@ -464,7 +455,6 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
       <AddAccountDialog open={showAddDialog} onOpenChange={setShowAddDialog} onSuccess={handleSuccess} />
       <ExportAccountsDialog open={showExportDialog} onOpenChange={(v) => { setShowExportDialog(v); if (!v) setExportPreselect(null); }} accounts={accounts} preselectId={exportPreselect} onMessage={showMessage} />
       <ImportAccountsDialog open={showImportDialog} onOpenChange={setShowImportDialog} onSuccess={handleSuccess} />
-      <AccountRotationSettings open={showRotationSettings} onOpenChange={setShowRotationSettings} />
     </div>
   );
 }

package/src/web/components/editor/code-editor.tsx

@@ -7,12 +7,7 @@ import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
-import { Loader2, FileWarning, ExternalLink } from "lucide-react";
-import { EditorBreadcrumb } from "./editor-breadcrumb";
-import { EditorToolbar } from "./editor-toolbar";
-import { lazy, Suspense } from "react";
-
-const CsvPreview = lazy(() => import("./csv-preview").then((m) => ({ default: m.CsvPreview })));
+import { Loader2, FileWarning, ExternalLink, Code, Eye, WrapText } from "lucide-react";
 
 /** Image extensions renderable inline */
 const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg", "ico"]);
@@ -63,9 +58,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const isPdf = ext === "pdf";
   const isSqlite = SQLITE_EXTS.has(ext);
   const isMarkdown = ext === "md" || ext === "mdx";
-  const isCsv = ext === "csv";
   const [mdMode, setMdMode] = useState<"edit" | "preview">("preview");
-  const [csvMode, setCsvMode] = useState<"table" | "raw">("table");
 
   // Redirect .db files to sqlite viewer by changing tab type
   useEffect(() => {
@@ -203,36 +196,33 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     );
   }
 
+  const mdModeButtons = isMarkdown ? (
+    <>
+      <button type="button" onClick={() => setMdMode("edit")}
+        className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${mdMode === "edit" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
+      >
+        <Code className="size-3" /> Edit
+      </button>
+      <button type="button" onClick={() => setMdMode("preview")}
+        className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${mdMode === "preview" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
+      >
+        <Eye className="size-3" /> Preview
+      </button>
+    </>
+  ) : null;
+
+  const wrapBtn = (
+    <button type="button" onClick={toggleWordWrap} title="Toggle word wrap (Alt+Z)"
+      className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${wordWrap ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
+    >
+      <WrapText className="size-3" />
+      <span className="hidden sm:inline">Wrap</span>
+    </button>
+  );
+
   return (
     <div className="flex flex-col h-full w-full overflow-hidden">
-      {/* Breadcrumb + Toolbar bar — desktop only */}
-      {filePath && projectName && tabId && (
-        <div className="hidden md:flex items-center h-7 border-b border-border bg-background shrink-0">
-          <EditorBreadcrumb
-            filePath={filePath}
-            projectName={projectName}
-            tabId={tabId}
-            className="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none px-2 gap-0.5"
-          />
-          <EditorToolbar
-            ext={ext}
-            mdMode={mdMode}
-            onMdModeChange={setMdMode}
-            csvMode={csvMode}
-            onCsvModeChange={setCsvMode}
-            wordWrap={wordWrap}
-            onToggleWordWrap={toggleWordWrap}
-            className="shrink-0 flex items-center gap-1 px-2"
-          />
-        </div>
-      )}
-
-      {/* Content area */}
-      {isCsv && csvMode === "table" ? (
-        <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-5 animate-spin text-text-subtle" /></div>}>
-          <CsvPreview content={content ?? ""} onContentChange={handleChange} wordWrap={wordWrap} />
-        </Suspense>
-      ) : isMarkdown && mdMode === "preview" ? (
+      {isMarkdown && mdMode === "preview" ? (
         <MarkdownPreview content={content ?? ""} />
       ) : (
         <div className="flex-1 overflow-hidden">

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

@@ -11,7 +11,6 @@ import {
   FolderOpen,
   Loader2,
   Globe,
-  Mic,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -158,9 +157,8 @@ 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: "browser", label: "Browser (Port Tunnel)", icon: Globe, action: openNewTab("browser", "Browser"), keywords: "preview tunnel port iframe web", group: "action" },
       { 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,