perf: P0 performance optimizations — memo, base64 cleanup, startup speed, bump v0.17.5

7418 · claude · 7418 · commit 132fdeb255c6 · 2026-02-27T15:00:03.000+08:00
Six independent fixes targeting startup lag, streaming jank, and excessive payloads:

Step 0 — MessageItem React.memo + useMemo (MessageItem.tsx)
- Wrap MessageItem with React.memo so historical messages skip re-render
  when `message` ref is stable during streaming
- Add useMemo for parseToolBlocks + pairTools (deps: message.content),
  parseMessageFiles (deps: text), token_usage JSON.parse (deps: message.token_usage)
- Extract assistant content rendering into separate memo'd AssistantContent component
  to cache parseBatchPlan / parseImageGen chain (deps: displayText, messageId)
- Root cause: 50 msgs × 10 SSE events/s = 500 full parses/s causing UI jank

Step 1 — Strip base64 from new messages (ChatView.tsx, route.ts)
- ChatView: remove `data: f.data` from fileMeta in display content HTML comment
- route.ts: skip base64 data in fileAttachments when filePath exists (file already on disk)
- Root cause: base64 image data inflated message content to MB-level

Step 2 — Sanitize old messages in API (messages/route.ts)
- Add stripFileData() to strip base64 `data` fields from &lt;!--files:...--&gt; comments
  before returning messages from GET /api/chat/sessions/:id/messages
- Handles legacy data already stored with base64

Step 3 — Reduce initial fetch limit 100 → 30 (page.tsx, messages/route.ts)
- Default limit changed from 100 to 30 on both frontend and backend
- "Load more" functionality unchanged

Step 4 — ChatListPanel dedup requests (ChatListPanel.tsx)
- Remove duplicate pathname-dependent useEffect (was causing 2 fetches per navigation)
- Add AbortController to cancel in-flight requests on new fetch
- Add 300ms debounce for event-driven fetches (session-created/session-updated)

Step 5 — Electron startup: show window before server ready (electron/main.ts)
- createWindow() now accepts optional URL, defaults to inline loading HTML
- Loading page: dark theme, centered spinner, "Starting CodePilot..." text
- Startup: startServer() → createWindow(loading) → waitForServer() → loadURL(real)
- Also updated activate handler for same early-window pattern

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/electron/main.ts b/electron/main.ts
@@ -325,7 +325,40 @@ function getIconPath(): string {
   return path.join(process.resourcesPath, 'icon.icns');
 }
 
-function createWindow(port: number) {
+/** Inline loading HTML shown while the server starts up */
+const LOADING_HTML = `data:text/html;charset=utf-8,${encodeURIComponent(`<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    height: 100vh; display: flex; align-items: center; justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: #0a0a0a; color: #a0a0a0;
+    -webkit-app-region: drag;
+  }
+  .container { text-align: center; }
+  .spinner {
+    width: 28px; height: 28px; margin: 0 auto 14px;
+    border: 2.5px solid rgba(255,255,255,0.1);
+    border-top-color: rgba(255,255,255,0.5);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  p { font-size: 13px; opacity: 0.7; }
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="spinner"></div>
+  <p>Starting CodePilot...</p>
+</div>
+</body>
+</html>`)}`;
+
+function createWindow(url?: string) {
   const windowOptions: Electron.BrowserWindowConstructorOptions = {
     width: 1280,
     height: 860,
@@ -352,7 +385,7 @@ function createWindow(port: number) {
 
   mainWindow = new BrowserWindow(windowOptions);
 
-  mainWindow.loadURL(`http://127.0.0.1:${port}`);
+  mainWindow.loadURL(url || LOADING_HTML);
 
   if (isDev) {
     mainWindow.webContents.openDevTools();
@@ -730,17 +763,25 @@ app.whenReady().then(async () => {
     if (isDev) {
       port = 3000;
       console.log(`Dev mode: connecting to http://127.0.0.1:${port}`);
+      serverPort = port;
+      createWindow(`http://127.0.0.1:${port}`);
     } else {
       port = await getPort();
       console.log(`Starting server on port ${port}...`);
       serverProcess = startServer(port);
+      serverPort = port;
+
+      // Show window immediately with loading screen
+      createWindow();
+
+      // Wait for server in background, then navigate to real URL
       await waitForServer(port);
       console.log('Server is ready');
+      if (mainWindow) {
+        mainWindow.loadURL(`http://127.0.0.1:${port}`);
+      }
     }
 
-    serverPort = port;
-    createWindow(port);
-
     // Initialize auto-updater in packaged mode only
     if (!isDev && mainWindow) {
       initAutoUpdater(mainWindow);
@@ -768,10 +809,16 @@ app.on('activate', async () => {
       if (!isDev && !serverProcess) {
         const port = await getPort();
         serverProcess = startServer(port);
+        // Show loading window immediately
+        createWindow();
         await waitForServer(port);
         serverPort = port;
+        if (mainWindow) {
+          mainWindow.loadURL(`http://127.0.0.1:${port}`);
+        }
+      } else {
+        createWindow(`http://127.0.0.1:${serverPort || 3000}`);
       }
-      createWindow(serverPort || 3000);
 
       // Re-attach updater to the new window
       if (!isDev && mainWindow) {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codepilot",
-  "version": "0.17.4",
+  "version": "0.17.5",
   "private": true,
   "author": {
     "name": "op7418",
diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
@@ -149,7 +149,7 @@ export async function POST(request: NextRequest) {
             name: f.name,
             type: f.type,
             size: f.size,
-            data: f.data,
+            data: meta?.filePath ? '' : f.data, // Skip base64 data if file is already saved to disk
             filePath: meta?.filePath,
           };
         })
diff --git a/src/app/api/chat/sessions/[id]/messages/route.ts b/src/app/api/chat/sessions/[id]/messages/route.ts
@@ -2,6 +2,22 @@ import { NextRequest } from 'next/server';
 import { getMessages, getSession } from '@/lib/db';
 import type { MessagesResponse } from '@/types';
 
+/** Strip base64 `data` fields from <!--files:...--> HTML comments in message content */
+function stripFileData(content: string): string {
+  const match = content.match(/^<!--files:(.*?)-->/);
+  if (!match) return content;
+  try {
+    const files = JSON.parse(match[1]);
+    const cleaned = files.map((f: Record<string, unknown>) => {
+      const { data, ...rest } = f;
+      return rest;
+    });
+    return `<!--files:${JSON.stringify(cleaned)}-->${content.slice(match[0].length)}`;
+  } catch {
+    return content;
+  }
+}
+
 export async function GET(
   request: NextRequest,
   { params }: { params: Promise<{ id: string }> }
@@ -17,11 +33,16 @@ export async function GET(
     const limitParam = searchParams.get('limit');
     const beforeParam = searchParams.get('before');
 
-    const limit = limitParam ? Math.min(Math.max(parseInt(limitParam, 10) || 100, 1), 500) : 100;
+    const limit = limitParam ? Math.min(Math.max(parseInt(limitParam, 10) || 30, 1), 500) : 30;
     const beforeRowId = beforeParam ? parseInt(beforeParam, 10) || undefined : undefined;
 
     const { messages, hasMore } = getMessages(id, { limit, beforeRowId });
-    const response: MessagesResponse = { messages, hasMore };
+    // Sanitize: strip base64 data from file attachments in old messages
+    const sanitizedMessages = messages.map(m => ({
+      ...m,
+      content: stripFileData(m.content),
+    }));
+    const response: MessagesResponse = { messages: sanitizedMessages, hasMore };
     return Response.json(response);
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Failed to fetch messages';
diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx
@@ -118,7 +118,7 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {
 
     async function loadMessages() {
       try {
-        const res = await fetch(`/api/chat/sessions/${id}/messages?limit=100`);
+        const res = await fetch(`/api/chat/sessions/${id}/messages?limit=30`);
         if (cancelled) return;
         if (!res.ok) {
           if (res.status === 404) {
diff --git a/src/components/chat/ChatView.tsx b/src/components/chat/ChatView.tsx
@@ -212,7 +212,7 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal
       // Build display content: embed file metadata as HTML comment for MessageItem to parse
       let displayContent = displayUserContent;
       if (files && files.length > 0) {
-        const fileMeta = files.map(f => ({ id: f.id, name: f.name, type: f.type, size: f.size, data: f.data }));
+        const fileMeta = files.map(f => ({ id: f.id, name: f.name, type: f.type, size: f.size }));
         displayContent = `<!--files:${JSON.stringify(fileMeta)}-->${displayUserContent}`;
       }
 
diff --git a/src/components/chat/MessageItem.tsx b/src/components/chat/MessageItem.tsx
diff --git a/src/components/layout/ChatListPanel.tsx b/src/components/layout/ChatListPanel.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "codepilot",`
`3`		`- "version": "0.17.4",`
	`3`	`+ "version": "0.17.5",`
`4`	`4`	`"private": true,`
`5`	`5`	`"author": {`
`6`	`6`	`"name": "op7418",`
Original file line number	Diff line number	Diff line change
`@@ -212,7 +212,7 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal`
`212`	`212`	`// Build display content: embed file metadata as HTML comment for MessageItem to parse`
`213`	`213`	`let displayContent = displayUserContent;`
`214`	`214`	`if (files && files.length > 0) {`
`215`		`- const fileMeta = files.map(f => ({ id: f.id, name: f.name, type: f.type, size: f.size, data: f.data }));`
	`215`	`+ const fileMeta = files.map(f => ({ id: f.id, name: f.name, type: f.type, size: f.size }));`
`216`	`216`	displayContent = `<!--files:${JSON.stringify(fileMeta)}-->${displayUserContent}`;
`217`	`217`	`}`
`218`	`218`