@hienlh/ppm 0.9.93 → 0.9.95

package/src/services/autostart-register.ts

@@ -60,34 +60,37 @@ function removeMetadata(): void {
 
 // ─── macOS ──────────────────────────────────────────────────────────────
 
-async function enableMacOS(config: AutoStartConfig): Promise<string> {
+async function enableMacOS(config: AutoStartConfig, opts?: { skipStart?: boolean }): Promise<string> {
   const plistPath = getPlistPath();
   const plistDir = dirname(plistPath);
 
   if (!existsSync(plistDir)) mkdirSync(plistDir, { recursive: true });
   writeFileSync(plistPath, generatePlist(config));
 
-  // Unload first if already loaded (ignore errors)
-  Bun.spawnSync({
-    cmd: ["launchctl", "bootout", `gui/${process.getuid!()}`, plistPath],
-    stdout: "ignore", stderr: "ignore",
-  });
-
-  // Load the agent
-  const result = Bun.spawnSync({
-    cmd: ["launchctl", "bootstrap", `gui/${process.getuid!()}`, plistPath],
-    stdout: "pipe", stderr: "pipe",
-  });
+  // Skip loading if supervisor is already running from direct spawn
+  if (!opts?.skipStart) {
+    // Unload first if already loaded (ignore errors)
+    Bun.spawnSync({
+      cmd: ["launchctl", "bootout", `gui/${process.getuid!()}`, plistPath],
+      stdout: "ignore", stderr: "ignore",
+    });
 
-  if (result.exitCode !== 0) {
-    // Fallback to legacy syntax
-    const legacy = Bun.spawnSync({
-      cmd: ["launchctl", "load", plistPath],
+    // Load the agent
+    const result = Bun.spawnSync({
+      cmd: ["launchctl", "bootstrap", `gui/${process.getuid!()}`, plistPath],
       stdout: "pipe", stderr: "pipe",
     });
-    if (legacy.exitCode !== 0) {
-      const err = legacy.stderr.toString().trim();
-      throw new Error(`launchctl load failed: ${err}`);
+
+    if (result.exitCode !== 0) {
+      // Fallback to legacy syntax
+      const legacy = Bun.spawnSync({
+        cmd: ["launchctl", "load", plistPath],
+        stdout: "pipe", stderr: "pipe",
+      });
+      if (legacy.exitCode !== 0) {
+        const err = legacy.stderr.toString().trim();
+        throw new Error(`launchctl load failed: ${err}`);
+      }
     }
   }
 
@@ -146,7 +149,7 @@ function statusMacOS(): AutoStartStatus {
 
 // ─── Linux ──────────────────────────────────────────────────────────────
 
-async function enableLinux(config: AutoStartConfig): Promise<string> {
+async function enableLinux(config: AutoStartConfig, opts?: { skipStart?: boolean }): Promise<string> {
   const servicePath = getServicePath();
   const serviceDir = dirname(servicePath);
 
@@ -171,11 +174,13 @@ async function enableLinux(config: AutoStartConfig): Promise<string> {
     throw new Error(`systemctl enable failed: ${enable.stderr.toString().trim()}`);
   }
 
-  // Start
-  Bun.spawnSync({
-    cmd: ["systemctl", "--user", "start", "ppm.service"],
-    stdout: "ignore", stderr: "ignore",
-  });
+  // Start (skip if supervisor is already running from direct spawn)
+  if (!opts?.skipStart) {
+    Bun.spawnSync({
+      cmd: ["systemctl", "--user", "start", "ppm.service"],
+      stdout: "ignore", stderr: "ignore",
+    });
+  }
 
   // Enable lingering so service runs at boot without login
   Bun.spawnSync({
@@ -312,11 +317,11 @@ function statusWindows(): AutoStartStatus {
 
 // ─── Public API ─────────────────────────────────────────────────────────
 
-/** Enable auto-start for the current platform */
-export async function enableAutoStart(config: AutoStartConfig): Promise<string> {
+/** Enable auto-start for the current platform. skipStart=true registers without starting (when supervisor is already running). */
+export async function enableAutoStart(config: AutoStartConfig, opts?: { skipStart?: boolean }): Promise<string> {
   const platform = process.platform;
-  if (platform === "darwin") return enableMacOS(config);
-  if (platform === "linux") return enableLinux(config);
+  if (platform === "darwin") return enableMacOS(config, opts);
+  if (platform === "linux") return enableLinux(config, opts);
   if (platform === "win32") return enableWindows(config);
   throw new Error(`Auto-start not supported on ${platform}`);
 }

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

@@ -1,10 +1,12 @@
-import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import { useEffect, useRef, useState, useMemo, useCallback, memo, lazy, Suspense } 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 { ToolCard } from "./tool-cards";
-import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
+const MarkdownRenderer = lazy(() =>
+  import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
+);
 import { cn, basename } from "@/lib/utils";
 
 import {
@@ -67,6 +69,34 @@ export function MessageList({
 }: MessageListProps) {
   // Scroll handled by StickToBottom wrapper — no manual scroll logic needed
 
+  const PAGE_SIZE = 50;
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+
+  // Reset visible count when conversation identity changes (not on every streaming tick)
+  const conversationId = messages[0]?.id;
+  useEffect(() => { setVisibleCount(PAGE_SIZE); }, [conversationId]);
+
+  const filtered = useMemo(() => messages.filter((msg) => {
+    const hasContent = msg.content && msg.content.trim().length > 0;
+    const hasEvents = msg.events && msg.events.length > 0;
+    // User bubbles only render text — hide SDK tool-result user messages
+    // that have no text content (their events are merged into assistant)
+    if (msg.role === "user") return hasContent;
+    return hasContent || hasEvents;
+  }), [messages]);
+
+  const displayed = useMemo(() => {
+    const start = Math.max(0, filtered.length - visibleCount);
+    return filtered.slice(start);
+  }, [filtered, visibleCount]);
+
+  const hasMore = visibleCount < filtered.length;
+
+  // Stable fork handler — avoids new closure per message (preserves MessageBubble memo)
+  const handleFork = useCallback((msgContent: string, msgId: string | undefined) => {
+    onFork?.(msgContent, msgId);
+  }, [onFork]);
+
   if (messagesLoading) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
@@ -85,32 +115,30 @@ export function MessageList({
     );
   }
 
-  const filtered = useMemo(() => messages.filter((msg) => {
-    const hasContent = msg.content && msg.content.trim().length > 0;
-    const hasEvents = msg.events && msg.events.length > 0;
-    // User bubbles only render text — hide SDK tool-result user messages
-    // that have no text content (their events are merged into assistant)
-    if (msg.role === "user") return hasContent;
-    return hasContent || hasEvents;
-  }), [messages]);
-
   return (
     <div className="relative flex-1 overflow-hidden flex flex-col min-h-0">
       <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden" resize="smooth" initial="instant">
         <StickToBottom.Content className="p-4 space-y-4">
-          {filtered.map((msg, idx) => (
+          {hasMore && (
+            <button onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}
+              className="w-full py-2 text-xs text-text-secondary hover:text-text-primary bg-surface-elevated/50 hover:bg-surface-elevated rounded-md border border-border/50 transition-colors">
+              Load {Math.min(PAGE_SIZE, filtered.length - visibleCount)} more messages...
+            </button>
+          )}
+          {displayed.map((msg, idx) => {
+            const globalIdx = filtered.length - displayed.length + idx;
+            const prevMsg = globalIdx > 0 ? filtered[globalIdx - 1] : undefined;
+            return (
               <MessageBubble
                 key={msg.id}
                 message={msg}
                 isStreaming={isStreaming && msg.id.startsWith("streaming-")}
                 projectName={projectName}
-                onFork={msg.role === "user" && onFork ? () => {
-                  // Pass the SDK UUID of the previous assistant message for fork (JSONL-level message ID)
-                  const prevMsg = idx > 0 ? filtered[idx - 1] : undefined;
-                  onFork(msg.content, prevMsg?.sdkUuid ?? prevMsg?.id);
-                } : undefined}
+                onFork={msg.role === "user" && onFork ? handleFork : undefined}
+                prevMsgId={prevMsg?.sdkUuid ?? prevMsg?.id}
               />
-            ))}
+            );
+          })}
 
         {pendingApproval && (
           pendingApproval.tool === "AskUserQuestion"
@@ -142,10 +170,15 @@ function ScrollToBottomButton() {
   );
 }
 
-function MessageBubble({ message, isStreaming, projectName, onFork }: { message: ChatMessage; isStreaming: boolean; projectName?: string; onFork?: () => void }) {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId }: {
+  message: ChatMessage; isStreaming: boolean; projectName?: string;
+  onFork?: (content: string, messageId: string | undefined) => void;
+  prevMsgId?: string
+}) {
   if (message.role === "user") {
+    const handleFork = onFork ? () => onFork(message.content, prevMsgId) : undefined;
     return (
-      <UserBubble content={message.content} projectName={projectName} onFork={onFork} />
+      <UserBubble content={message.content} projectName={projectName} onFork={handleFork} />
     );
   }
 
@@ -175,7 +208,7 @@ function MessageBubble({ message, isStreaming, projectName, onFork }: { message:
       )}
     </div>
   );
-}
+});
 
 /** Image extensions that can be previewed inline */
 const IMAGE_EXTS = new Set([".png", ".jpg", ".jpeg", ".gif", ".webp"]);
@@ -843,7 +876,11 @@ function stripTeammateMessages(text: string): string {
 function MarkdownContent({ content, projectName, isStreaming }: { content: string; projectName?: string; isStreaming?: boolean }) {
   const cleaned = stripTeammateMessages(content);
   if (!cleaned) return null;
-  return <MarkdownRenderer content={cleaned} projectName={projectName} codeActions isStreaming={isStreaming} />;
+  return (
+    <Suspense fallback={<div className="animate-pulse h-4 bg-muted rounded" />}>
+      <MarkdownRenderer content={cleaned} projectName={projectName} codeActions isStreaming={isStreaming} />
+    </Suspense>
+  );
 }
 
 /* ToolCard, ToolSummary, ToolDetails extracted to ./tool-cards.tsx */

package/src/web/components/chat/tool-cards.tsx

@@ -2,8 +2,10 @@
  * Tool card components for chat message rendering.
  * Handles summary + details for all SDK tool types.
  */
-import { useState, useMemo } from "react";
-import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
+import { useState, useMemo, lazy, Suspense } from "react";
+const MarkdownRenderer = lazy(() =>
+  import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
+);
 import {
   ChevronDown,
   ChevronRight,
@@ -20,6 +22,7 @@ import {
   Columns2,
 } from "lucide-react";
 import type { ChatEvent } from "../../../types/chat";
+import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import { basename } from "@/lib/utils";
 
@@ -159,7 +162,7 @@ function ToolDetails({
   projectName?: string;
 }) {
   const s = (v: unknown) => String(v ?? "");
-  const { openTab } = useTabStore();
+  const { openTab } = useTabStore(useShallow((state) => ({ openTab: state.openTab })));
 
   /** Open a file in a new editor tab */
   const openFile = (filePath: string) => {
@@ -451,7 +454,11 @@ function SubagentChildren({ events, projectName }: { events: ChatEvent[]; projec
 
 /** Inline markdown renderer for tool details (prompt, result) */
 function MiniMarkdown({ content, maxHeight = "max-h-48" }: { content: string; maxHeight?: string }) {
-  return <MarkdownRenderer content={content} className={`text-text-secondary overflow-auto ${maxHeight}`} />;
+  return (
+    <Suspense fallback={<div className="animate-pulse h-4 bg-muted rounded" />}>
+      <MarkdownRenderer content={content} className={`text-text-secondary overflow-auto ${maxHeight}`} />
+    </Suspense>
+  );
 }
 
 

package/src/web/components/database/data-grid.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useMemo, useRef, memo, useEffect } from "react";
 import { Loader2, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, Trash2, Plus, Search, X, Eye, Filter, Pin, PinOff, Columns3 } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import type { DbColumnInfo } from "./use-database";
 import { ExportButton } from "./export-button";
@@ -42,7 +43,7 @@ export function DataGrid({
   const [insertValues, setInsertValues] = useState<Record<string, string>>({});
   const [insertError, setInsertError] = useState<string | null>(null);
   const [confirmBulkDelete, setConfirmBulkDelete] = useState(false);
-  const { openTab } = useTabStore();
+  const { openTab } = useTabStore(useShallow((s) => ({ openTab: s.openTab })));
   const openCellViewer = useCallback((cell: { col: string; value: string }) => {
     openTab({
       type: "editor",

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

@@ -1,8 +1,8 @@
-import { useEffect, useState, useCallback, useRef, useMemo } from "react";
+import { useEffect, useState, useCallback, useRef, useMemo, memo, lazy, Suspense } from "react";
 import Editor, { type OnMount } from "@monaco-editor/react";
 import type * as MonacoType from "monaco-editor";
-import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
+import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -12,10 +12,12 @@ import { Loader2, FileWarning, ExternalLink, Play, Database } from "lucide-react
 import { EditorBreadcrumb } from "./editor-breadcrumb";
 import { EditorToolbar } from "./editor-toolbar";
 import { SaveAsDialog } from "./save-as-dialog";
-import { lazy, Suspense } from "react";
 import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "../database/sql-completion-provider";
 import { useConnections, type Connection } from "../database/use-connections";
 
+const MarkdownRenderer = lazy(() =>
+  import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
+);
 const CsvPreview = lazy(() => import("./csv-preview").then((m) => ({ default: m.CsvPreview })));
 
 /** Image extensions renderable inline */
@@ -47,7 +49,7 @@ interface CodeEditorProps {
   tabId?: string;
 }
 
-export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
+export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const filePath = metadata?.filePath as string | undefined;
   const projectName = metadata?.projectName as string | undefined;
   // Inline content mode: read-only Monaco with pre-loaded content (e.g. cell viewer)
@@ -61,8 +63,8 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const latestContentRef = useRef<string>("");
   const editorRef = useRef<MonacoType.editor.IStandaloneCodeEditor | null>(null);
-  const { tabs, updateTab } = useTabStore();
-  const { wordWrap, toggleWordWrap } = useSettingsStore();
+  const { tabs, updateTab } = useTabStore(useShallow((s) => ({ tabs: s.tabs, updateTab: s.updateTab })));
+  const { wordWrap, toggleWordWrap } = useSettingsStore(useShallow((s) => ({ wordWrap: s.wordWrap, toggleWordWrap: s.toggleWordWrap })));
   const monacoTheme = useMonacoTheme();
 
   const isUntitled = metadata?.isUntitled === true;
@@ -553,10 +555,14 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
       )}
     </div>
   );
-}
+});
 
 function MarkdownPreview({ content }: { content: string }) {
-  return <MarkdownRenderer content={content} className="flex-1 overflow-auto p-4" />;
+  return (
+    <Suspense fallback={<div className="animate-pulse h-4 bg-muted rounded m-4" />}>
+      <MarkdownRenderer content={content} className="flex-1 overflow-auto p-4" />
+    </Suspense>
+  );
 }
 
 function ImagePreview({ filePath, projectName }: { filePath: string; projectName: string }) {

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

@@ -2,6 +2,7 @@ import { useEffect, useState, useRef, useCallback } from "react";
 import Editor, { type OnMount } from "@monaco-editor/react";
 import type * as MonacoType from "monaco-editor";
 import { api, projectUrl } from "@/lib/api-client";
+import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { Loader2 } from "lucide-react";
@@ -100,7 +101,7 @@ export function ConflictEditor({ metadata }: ConflictEditorProps) {
   const widgetsRef = useRef<MonacoType.editor.IContentWidget[]>([]);
   const decorationsRef = useRef<MonacoType.editor.IEditorDecorationsCollection | null>(null);
 
-  const { wordWrap } = useSettingsStore();
+  const { wordWrap } = useSettingsStore(useShallow((s) => ({ wordWrap: s.wordWrap })));
   const monacoTheme = useMonacoTheme();
 
   const containerRef = useRef<HTMLDivElement>(null);

package/src/web/components/editor/diff-viewer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useMemo, useRef } from "react";
 import { DiffEditor } from "@monaco-editor/react";
 import { api, projectUrl } from "@/lib/api-client";
+import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { Loader2, FileCode, PanelLeftOpen, PanelRightOpen, Columns2, WrapText } from "lucide-react";
@@ -40,7 +41,7 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const [loading, setLoading] = useState(!isInline);
   const [error, setError] = useState<string | null>(null);
   const [expandMode, setExpandMode] = useState<"both" | "left" | "right">("both");
-  const { wordWrap, toggleWordWrap } = useSettingsStore();
+  const { wordWrap, toggleWordWrap } = useSettingsStore(useShallow((s) => ({ wordWrap: s.wordWrap, toggleWordWrap: s.toggleWordWrap })));
   const monacoTheme = useMonacoTheme();
 
   // Measure container height — Monaco needs explicit pixel height on mobile

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

@@ -10,6 +10,7 @@ import {
   DropdownMenuSubContent,
 } from "@/components/ui/dropdown-menu";
 import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import { basename } from "@/lib/utils";
 
@@ -83,7 +84,7 @@ interface EditorBreadcrumbProps {
 
 export function EditorBreadcrumb({ filePath, projectName, tabId, className }: EditorBreadcrumbProps) {
   const tree = useFileStore((s) => s.tree);
-  const { updateTab, openTab } = useTabStore();
+  const { updateTab, openTab } = useTabStore(useShallow((s) => ({ updateTab: s.updateTab, openTab: s.openTab })));
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const segments = useMemo(

package/src/web/components/explorer/file-tree.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useState } from "react";
+import { useEffect, useCallback, useState, memo } from "react";
 import {
   Folder,
   FolderOpen,
@@ -12,6 +12,7 @@ import {
   Download,
   Loader2,
 } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
@@ -58,8 +59,8 @@ interface TreeNodeProps {
   onFileOpen?: () => void;
 }
 
-function TreeNode({ node, depth, projectName, onAction, onFileOpen }: TreeNodeProps) {
-  const { expandedPaths, toggleExpand, selectedFiles, toggleFileSelect } = useFileStore();
+const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, onFileOpen }: TreeNodeProps) {
+  const { expandedPaths, toggleExpand, selectedFiles, toggleFileSelect } = useFileStore(useShallow((s) => ({ expandedPaths: s.expandedPaths, toggleExpand: s.toggleExpand, selectedFiles: s.selectedFiles, toggleFileSelect: s.toggleFileSelect })));
   const openTab = useTabStore((s) => s.openTab);
   const isExpanded = expandedPaths.has(node.path);
   const isDir = node.type === "directory";
@@ -187,14 +188,14 @@ function TreeNode({ node, depth, projectName, onAction, onFileOpen }: TreeNodePr
       ))}
     </div>
   );
-}
+});
 
 interface FileTreeProps {
   onFileOpen?: () => void;
 }
 
 export function FileTree({ onFileOpen }: FileTreeProps = {}) {
-  const { tree, loading, error, fetchTree, reset, selectedFiles, clearSelection } = useFileStore();
+  const { tree, loading, error, fetchTree, reset, selectedFiles, clearSelection } = useFileStore(useShallow((s) => ({ tree: s.tree, loading: s.loading, error: s.error, fetchTree: s.fetchTree, reset: s.reset, selectedFiles: s.selectedFiles, clearSelection: s.clearSelection })));
   const activeProject = useProjectStore((s) => s.activeProject);
   const openTab = useTabStore((s) => s.openTab);
   const [actionState, setActionState] = useState<{

package/src/web/components/explorer/search-panel.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from "react";
 import { Search, CaseSensitive, ChevronRight, ChevronDown, FileText, X, Loader2, WholeWord, Regex, ReplaceAll } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { projectUrl, api } from "@/lib/api-client";
@@ -62,7 +63,7 @@ function OptionButton({ active, onClick, title, children }: { active: boolean; o
 }
 
 export function SearchPanel() {
-  const { activeProject } = useProjectStore();
+  const { activeProject } = useProjectStore(useShallow((s) => ({ activeProject: s.activeProject })));
   const openTab = useTabStore((s) => s.openTab);
 
   const [query, setQuery] = useState("");

package/src/web/components/extensions/extension-webview.tsx

@@ -54,47 +54,33 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   const rawHtml = panel?.html ?? "";
   const html = injectVscodeApiShim(rawHtml);
 
-  // On reload: resolve project path, then dispatch command with retry
-  // Retry needed because WS connection may not be ready on first attempt
+  // On reload: resolve project path and dispatch command once
+  // No retry — if it fails, user closes tab and reopens to retry
   useEffect(() => {
     if (panel || !viewType) return;
-    // Mark project as "dispatched" so project-sync effect doesn't double-dispatch
     if (projectName) prevProjectRef.current = projectName;
     const command = viewType.includes(".") ? viewType : `${viewType}.view`;
     let cancelled = false;
-    let resolvedArgs: unknown[] | null = null;
 
-    async function resolveArgs(): Promise<unknown[]> {
-      if (resolvedArgs) return resolvedArgs;
-      if (!projectName) return [];
-      try {
-        const res = await fetch("/api/projects");
-        const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
-        const match = json.data?.find((p) => p.name === projectName);
-        resolvedArgs = match ? [match.path] : [];
-      } catch {
-        resolvedArgs = [];
+    async function dispatch() {
+      let args: unknown[] = [];
+      if (projectName) {
+        try {
+          const res = await fetch("/api/projects");
+          const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
+          const match = json.data?.find((p) => p.name === projectName);
+          if (match) args = [match.path];
+        } catch {}
       }
-      return resolvedArgs;
-    }
-
-    async function attempt() {
-      const args = await resolveArgs();
       if (cancelled) return;
       window.dispatchEvent(new CustomEvent("ext:command:execute", {
         detail: { command, args },
       }));
     }
 
-    // First attempt after short delay (let WS connect), then retry every 2s
-    const initialTimer = setTimeout(() => {
-      if (!cancelled) attempt();
-    }, 500);
-    const retryTimer = setInterval(() => {
-      if (!cancelled) attempt();
-    }, 2_000);
-
-    return () => { cancelled = true; clearTimeout(initialTimer); clearInterval(retryTimer); };
+    // Short delay to let WS connect after page load
+    const timer = setTimeout(dispatch, 500);
+    return () => { cancelled = true; clearTimeout(timer); };
   }, [panel, viewType, projectName]);
 
   // When panel exists, ensure correct project is loaded.
@@ -168,10 +154,10 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     };
   }, []);
 
-  // Timeout: if panel doesn't appear within 10s, show error
+  // Timeout: if panel doesn't appear within 5s, show error
   useEffect(() => {
     if (panel) { setTimedOut(false); return; }
-    const timer = setTimeout(() => setTimedOut(true), 10_000);
+    const timer = setTimeout(() => setTimedOut(true), 5_000);
     return () => clearTimeout(timer);
   }, [panel]);
 

package/src/web/components/git/git-status-panel.tsx

@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
+import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -117,7 +118,7 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
     label: string;
     files: string[];
   } | null>(null);
-  const { openTab } = useTabStore();
+  const { openTab } = useTabStore(useShallow((s) => ({ openTab: s.openTab })));
   const viewMode = useSettingsStore((s) => s.gitStatusViewMode);
   const setViewMode = useSettingsStore((s) => s.setGitStatusViewMode);
   const activeProjectPath = useProjectStore((s) =>

package/src/web/components/layout/add-project-form.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { Loader2, FolderOpen } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { api } from "@/lib/api-client";
 import { cn } from "@/lib/utils";
@@ -18,7 +19,7 @@ interface AddProjectFormProps {
 }
 
 export function AddProjectForm({ onSuccess, onCancel, footerClassName }: AddProjectFormProps) {
-  const { addProject } = useProjectStore();
+  const { addProject } = useProjectStore(useShallow((s) => ({ addProject: s.addProject })));
   const [path, setPath] = useState("");
   const [name, setName] = useState("");
   const [suggestions, setSuggestions] = useState<SuggestedDir[]>([]);

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

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from "react";
 import {
   X, Bug, FolderOpen, GitBranch, Settings, Database,
 } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { FileTree } from "@/components/explorer/file-tree";
@@ -28,7 +29,7 @@ interface MobileDrawerProps {
 }
 
 export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps) {
-  const { activeProject } = useProjectStore();
+  const { activeProject } = useProjectStore(useShallow((s) => ({ activeProject: s.activeProject })));
   const version = useSettingsStore((s) => s.version);
   const [activeTab, setActiveTab] = useState<DrawerTab>(initialTab ?? "explorer");
 

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

@@ -5,6 +5,7 @@ import {
   ChevronRight, Globe, Puzzle, Copy, Download, Pencil, Trash2,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
+import { useShallow } from "zustand/react/shallow";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { findPanelPosition, MAX_ROWS } from "@/stores/panel-utils";
@@ -152,7 +153,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   }
 
   // Active project avatar for the Projects button
-  const { activeProject, projects, customOrder } = useProjectStore();
+  const { activeProject, projects, customOrder } = useProjectStore(useShallow((s) => ({ activeProject: s.activeProject, projects: s.projects, customOrder: s.customOrder })));
   const ordered = resolveOrder(projects, customOrder ?? null);
   const allNames = ordered.map((p) => p.name);
   const activeIdx = ordered.findIndex((p) => p.name === activeProject?.name);

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, memo } from "react";
 import { Panel, Group, Separator } from "react-resizable-panels";
 import { GripVertical, GripHorizontal } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
@@ -10,7 +10,7 @@ interface PanelLayoutProps {
   projectName: string;
 }
 
-export function PanelLayout({ projectName }: PanelLayoutProps) {
+export const PanelLayout = memo(function PanelLayout({ projectName }: PanelLayoutProps) {
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const grid = usePanelStore((s) =>
     s.currentProject === projectName ? s.grid : (s.projectGrids[projectName] ?? [[]]),
@@ -51,7 +51,7 @@ export function PanelLayout({ projectName }: PanelLayoutProps) {
       ))}
     </Group>
   );
-}
+});
 
 function RowGroup({ row, rowIdx, totalRows, projectName }: { row: string[]; rowIdx: number; totalRows: number; projectName: string }) {
   const defaultSize = `${Math.round(100 / totalRows)}%`;