@hienlh/ppm 0.9.92 → 0.9.94

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

@@ -30,7 +30,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   const panelId = metadata?.panelId as string | undefined;
   const viewType = metadata?.viewType as string | undefined;
   const currentProject = useTabStore((s) => s.currentProject);
-  const projectName = (metadata?.projectName as string | undefined) || currentProject || undefined;
+  // Prefer currentProject (reflects URL/active project) over stale tab metadata
+  const projectName = currentProject || (metadata?.projectName as string | undefined) || undefined;
   const [timedOut, setTimedOut] = useState(false);
 
   // Match panel: prefer panelId (exact), fallback to viewType match (reload recovery)
@@ -57,6 +58,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   // Retry needed because WS connection may not be ready on first attempt
   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;
@@ -199,8 +202,10 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     return () => window.removeEventListener("ext:webview:message", handler);
   }, [resolvedPanelId]);
 
-  // Loading state — waiting for extension to create the panel
-  if (!panel) {
+  // Loading state — waiting for extension to create the panel AND deliver HTML.
+  // We must wait for HTML before mounting the iframe because browsers don't
+  // re-execute scripts when React updates the srcDoc attribute from "" to content.
+  if (!panel || !rawHtml) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3 text-sm text-text-subtle">
         {timedOut ? (
@@ -230,6 +235,7 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     <div className="h-full w-full relative">
       <iframe
         ref={iframeRef}
+        key={resolvedPanelId}
         srcDoc={html}
         sandbox="allow-scripts"
         className="w-full h-full border-0 bg-white dark:bg-zinc-900"

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)}%`;

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

@@ -1,8 +1,9 @@
-import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { useState, useCallback, useMemo, useRef, useEffect, memo } from "react";
 import { createPortal } from "react-dom";
 import { Plus, Settings, Pencil, Trash2, Palette, Bug, Cloud, X, Copy } from "lucide-react";
 import { CloudSharePopover } from "./cloud-share-popover";
 import { openBugReportPopup } from "@/lib/report-bug";
+import { useShallow } from "zustand/react/shallow";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -29,7 +30,7 @@ import { cn } from "@/lib/utils";
 // ---------------------------------------------------------------------------
 // Avatar circle
 // ---------------------------------------------------------------------------
-function ProjectAvatar({ name, color, active, allNames }: {
+const ProjectAvatar = memo(function ProjectAvatar({ name, color, active, allNames }: {
   name: string; color: string; active: boolean; allNames: string[];
 }) {
   const initials = getProjectInitials(name, allNames);
@@ -51,7 +52,7 @@ function ProjectAvatar({ name, color, active, allNames }: {
       )}
     </div>
   );
-}
+});
 
 // ---------------------------------------------------------------------------
 // Color picker popover (inline in dialog)
@@ -78,8 +79,8 @@ function ColorPicker({ current, onChange }: { current: string; onChange: (c: str
 // ---------------------------------------------------------------------------
 // ProjectBar
 // ---------------------------------------------------------------------------
-export function ProjectBar() {
-  const { projects, activeProject, setActiveProject, setProjectColor, reorderProjects, renameProject, deleteProject, customOrder } = useProjectStore();
+export const ProjectBar = memo(function ProjectBar() {
+  const { projects, activeProject, setActiveProject, setProjectColor, reorderProjects, renameProject, deleteProject, customOrder } = useProjectStore(useShallow((s) => ({ projects: s.projects, activeProject: s.activeProject, setActiveProject: s.setActiveProject, setProjectColor: s.setProjectColor, reorderProjects: s.reorderProjects, renameProject: s.renameProject, deleteProject: s.deleteProject, customOrder: s.customOrder })));
   const openTab = useTabStore((s) => s.openTab);
   const version = useSettingsStore((s) => s.version);
   const handleReportBug = useCallback(() => openBugReportPopup(version), [version]);
@@ -435,4 +436,4 @@ export function ProjectBar() {
     </aside>
     </div>
   );
-}
+});

package/src/web/components/layout/project-bottom-sheet.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useCallback } from "react";
 import { X, Check, Plus, Settings, ChevronUp, ChevronDown, Pencil, Trash2, Palette, ArrowLeft } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -34,7 +35,7 @@ function ProjectAvatar({ name, color, allNames }: { name: string; color: string;
 }
 
 export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps) {
-  const { projects, activeProject, setActiveProject, setProjectColor, reorderProjects, renameProject, deleteProject, customOrder } = useProjectStore();
+  const { projects, activeProject, setActiveProject, setProjectColor, reorderProjects, renameProject, deleteProject, customOrder } = useProjectStore(useShallow((s) => ({ projects: s.projects, activeProject: s.activeProject, setActiveProject: s.setActiveProject, setProjectColor: s.setProjectColor, reorderProjects: s.reorderProjects, renameProject: s.renameProject, deleteProject: s.deleteProject, customOrder: s.customOrder })));
 
   const openTab = useTabStore((s) => s.openTab);
   const version = useSettingsStore((s) => s.version);

package/src/web/components/layout/sidebar.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useRef, useMemo } from "react";
+import { useCallback, useRef, useMemo, memo } from "react";
 import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database, Search, Puzzle } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
 import { useExtensionStore } from "@/stores/extension-store";
@@ -58,8 +59,8 @@ function ResizeHandle({ onResize }: { onResize: (width: number) => void }) {
   );
 }
 
-export function Sidebar() {
-  const { activeProject } = useProjectStore();
+export const Sidebar = memo(function Sidebar() {
+  const { activeProject } = useProjectStore(useShallow((s) => ({ activeProject: s.activeProject })));
   const sidebarCollapsed = useSettingsStore((s) => s.sidebarCollapsed);
   const sidebarWidth = useSettingsStore((s) => s.sidebarWidth);
   const toggleSidebar = useSettingsStore((s) => s.toggleSidebar);
@@ -169,4 +170,4 @@ export function Sidebar() {
       <ResizeHandle onResize={setSidebarWidth} />
     </aside>
   );
-}
+});

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

@@ -1,8 +1,9 @@
+import { memo } from "react";
 import { useExtensionStore, type StatusBarItemUI } from "@/stores/extension-store";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 /** Fixed status bar at the bottom of the editor area (hidden on mobile) */
-export function StatusBar() {
+export const StatusBar = memo(function StatusBar() {
   const items = useExtensionStore((s) => s.statusBarItems);
 
   const left = items
@@ -27,9 +28,9 @@ export function StatusBar() {
       </div>
     </div>
   );
-}
+});
 
-function StatusBarEntry({ item }: { item: StatusBarItemUI }) {
+const StatusBarEntry = memo(function StatusBarEntry({ item }: { item: StatusBarItemUI }) {
   const content = (
     <button
       className={`truncate px-1 rounded-sm transition-colors ${
@@ -61,4 +62,4 @@ function StatusBarEntry({ item }: { item: StatusBarItemUI }) {
   }
 
   return content;
-}
+});

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from "react";
+import { useEffect, useRef, useCallback, useState, memo } from "react";
 import {
   Plus,
   Terminal,
@@ -47,7 +47,7 @@ interface TabBarProps {
   panelId?: string;
 }
 
-export function TabBar({ panelId }: TabBarProps) {
+export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
   const activeProject = useProjectStore((s) => s.activeProject);
   const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -267,5 +267,5 @@ export function TabBar({ panelId }: TabBarProps) {
     )}
     </>
   );
-}
+});
 

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

@@ -1,4 +1,5 @@
 import { Suspense, lazy } from "react";
+import { useShallow } from "zustand/react/shallow";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { Loader2 } from "lucide-react";
 
@@ -74,7 +75,7 @@ function LoadingFallback() {
 }
 
 export function TabContent() {
-  const { tabs, activeTabId } = useTabStore();
+  const { tabs, activeTabId } = useTabStore(useShallow((s) => ({ tabs: s.tabs, activeTabId: s.activeTabId })));
 
   if (tabs.length === 0) {
     return (

package/src/web/components/postgres/postgres-viewer.tsx

@@ -1,7 +1,7 @@
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { useState, useCallback, useMemo, useEffect, useRef, lazy, Suspense } from "react";
 import { Database, Loader2, AlertCircle, Play, ChevronLeft, ChevronRight, Table, RefreshCw } from "lucide-react";
 import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from "@tanstack/react-table";
-import CodeMirror from "@uiw/react-codemirror";
+const CodeMirror = lazy(() => import("@uiw/react-codemirror"));
 import { sql, PostgreSQL } from "@codemirror/lang-sql";
 import { usePostgres, type PgColumnInfo, type PgQueryResult } from "./use-postgres";
 
@@ -244,9 +244,11 @@ function PgQueryEditor({ onExecute, result, error, loading }: {
     <div className="flex flex-col h-full overflow-hidden">
       <div className="flex items-start gap-1 border-b border-border bg-background" onKeyDown={handleKeyDown}>
         <div className="flex-1 max-h-[120px] overflow-auto">
-          <CodeMirror value={query} onChange={setQuery} extensions={[sql({ dialect: PostgreSQL })]}
-            basicSetup={{ lineNumbers: false, foldGutter: false, highlightActiveLine: false }}
-            className="text-xs [&_.cm-editor]:!outline-none [&_.cm-scroller]:!overflow-auto" />
+          <Suspense fallback={<div className="p-2 text-xs text-text-secondary">Loading editor...</div>}>
+            <CodeMirror value={query} onChange={setQuery} extensions={[sql({ dialect: PostgreSQL })]}
+              basicSetup={{ lineNumbers: false, foldGutter: false, highlightActiveLine: false }}
+              className="text-xs [&_.cm-editor]:!outline-none [&_.cm-scroller]:!overflow-auto" />
+          </Suspense>
         </div>
         <button type="button" onClick={handleExecute} disabled={loading} title="Execute (Cmd+Enter)"
           className="shrink-0 m-1 p-1.5 rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors">

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

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
+import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore, type Theme } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
@@ -41,7 +42,7 @@ const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; ic
 ];
 
 export function SettingsTab() {
-  const { theme, setTheme, deviceName, setDeviceName, version } = useSettingsStore();
+  const { theme, setTheme, deviceName, setDeviceName, version } = useSettingsStore(useShallow((s) => ({ theme: s.theme, setTheme: s.setTheme, deviceName: s.deviceName, setDeviceName: s.setDeviceName, version: s.version })));
   const { permission, isSubscribed, loading, error: pushError, subscribe, unsubscribe } = usePushNotification();
   const [activeCategory, setActiveCategory] = useState<SettingsCategory | null>(null);
   const [nameInput, setNameInput] = useState(deviceName ?? "");

package/src/web/components/shared/markdown-code-block.tsx

@@ -1,15 +1,18 @@
 import { useState, useEffect, useRef, type ReactNode } from "react";
-import mermaid from "mermaid";
 import { useMdContext, FILE_EXT_RE, GLOB_CHARS_RE } from "./markdown-context";
 import { useTabStore } from "@/stores/tab-store";
 
 const MERMAID_KEYWORDS = /^(sequenceDiagram|flowchart|graph\s|classDiagram|stateDiagram|erDiagram|journey|gantt|pie|quadrantChart|requirementDiagram|gitGraph|mindmap|timeline|sankey|xychart|block-beta|packet-beta|architecture-beta|kanban)\b/;
 
-let mermaidInitialized = false;
-function ensureMermaidInit() {
-  if (mermaidInitialized) return;
-  mermaid.initialize({ startOnLoad: false, theme: "default", securityLevel: "loose", fontFamily: "ui-sans-serif, system-ui, sans-serif" });
-  mermaidInitialized = true;
+let mermaidPromise: Promise<typeof import("mermaid")["default"]> | null = null;
+function getMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then((mod) => {
+      mod.default.initialize({ startOnLoad: false, theme: "default", securityLevel: "loose", fontFamily: "ui-sans-serif, system-ui, sans-serif" });
+      return mod.default;
+    });
+  }
+  return mermaidPromise;
 }
 
 /** Extract plain text from a hast node tree */
@@ -89,9 +92,8 @@ function MermaidDiagram({ source }: { source: string }) {
   const [svg, setSvg] = useState<string | null>(null);
 
   useEffect(() => {
-    ensureMermaidInit();
     const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
-    mermaid.render(id, source).then(({ svg }) => setSvg(svg)).catch(() => {});
+    getMermaid().then((m) => m.render(id, source)).then(({ svg }) => setSvg(svg)).catch(() => {});
   }, [source]);
 
   if (!svg) return <pre><code>{source}</code></pre>;

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

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useState, useCallback, memo } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
 import { cn } from "@/lib/utils";
 import { Copy, ClipboardPaste } from "lucide-react";
@@ -18,7 +18,7 @@ const MOBILE_KEYS = [
   { label: "\u2192", value: "\x1b[C" },
 ] as const;
 
-export function TerminalTab({ metadata }: TerminalTabProps) {
+export const TerminalTab = memo(function TerminalTab({ metadata }: TerminalTabProps) {
   const sessionId = (metadata?.sessionId as string) ?? "new";
   const projectName = metadata?.projectName as string | undefined;
   const containerRef = useRef<HTMLDivElement>(null);
@@ -153,4 +153,4 @@ export function TerminalTab({ metadata }: TerminalTabProps) {
       )}
     </div>
   );
-}
+});