@hienlh/ppm 0.13.12 → 0.13.13

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

@@ -1,119 +1,13 @@
-import { useState, useEffect, useCallback } from "react";
-import { Bot, ChevronDown, ChevronUp, MessageSquare, Pin, PinOff } from "lucide-react";
-import { api, projectUrl } from "@/lib/api-client";
-import { formatRelativeDate } from "@/lib/format-date";
-import { useProjectTags, TagChipBar } from "./tag-filter-chips";
-import { SessionContextMenu } from "./session-context-menu";
+import { Bot } from "lucide-react";
+import { SessionListPanel } from "./session-list-panel";
 import type { SessionInfo } from "../../../types/chat";
 
-const MAX_RECENT_SESSIONS = 5;
-const FETCH_SESSIONS_LIMIT = 20;
-
 interface ChatWelcomeProps {
   projectName: string;
   onSelectSession: (session: SessionInfo) => void;
 }
 
 export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps) {
-  const [sessions, setSessions] = useState<SessionInfo[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [showAll, setShowAll] = useState(false);
-  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
-  const { projectTags, tagCounts, loadTags } = useProjectTags(projectName);
-
-  const loadSessions = useCallback(async () => {
-    if (!projectName) return;
-    setLoading(true);
-    try {
-      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?limit=${FETCH_SESSIONS_LIMIT}`);
-      setSessions(data.sessions.slice(0, FETCH_SESSIONS_LIMIT));
-    } catch {
-      // silently ignore
-    } finally {
-      setLoading(false);
-    }
-  }, [projectName]);
-
-  useEffect(() => { loadSessions(); }, [loadSessions]);
-
-  const togglePin = useCallback(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 ignore
-    }
-  }, [projectName]);
-
-  const handleTagChanged = useCallback((sid: string, tag: { id: number; name: string; color: string } | null) => {
-    setSessions((prev) => prev.map((s) => s.id === sid ? { ...s, tag } : s));
-    loadTags();
-  }, [loadTags]);
-
-  const filtered = selectedTagId !== null ? sessions.filter((s) => s.tag?.id === selectedTagId) : sessions;
-  const pinnedSessions = filtered.filter((s) => s.pinned);
-  const allRecentSessions = filtered.filter((s) => !s.pinned);
-  const recentSessions = showAll ? allRecentSessions : allRecentSessions.slice(0, MAX_RECENT_SESSIONS);
-  const hasMore = allRecentSessions.length > MAX_RECENT_SESSIONS;
-
-  function renderSessionRow(session: SessionInfo) {
-    return (
-      <SessionContextMenu
-        key={session.id}
-        session={session}
-        projectName={projectName}
-        projectTags={projectTags}
-        onTogglePin={togglePin}
-        onTagChanged={handleTagChanged}
-      >
-        <button
-          onClick={() => onSelectSession(session)}
-          className="group flex items-center gap-2.5 w-full px-3 py-2.5 text-left hover:bg-surface-elevated active:bg-surface-elevated transition-colors border-b border-border/50 last:border-0"
-        >
-          <MessageSquare className="size-3.5 shrink-0 text-text-subtle" />
-          {session.tag && (
-            <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: session.tag.color }} title={session.tag.name} />
-          )}
-          <span className="flex-1 min-w-0 text-xs font-medium truncate text-text-primary">
-            {session.title || "Untitled"}
-          </span>
-          {session.updatedAt && (
-            <span className="text-[10px] text-text-subtle shrink-0">
-              {formatRelativeDate(session.updatedAt)}
-            </span>
-          )}
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={(e) => togglePin(e, session)}
-            className={`p-1 rounded transition-colors shrink-0 ${
-              session.pinned
-                ? "text-primary hover:text-primary/70"
-                : "text-text-subtle can-hover:opacity-0 can-hover: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" />}
-          </span>
-        </button>
-      </SessionContextMenu>
-    );
-  }
-
   return (
     <div className="flex flex-col items-center justify-center h-full gap-6 text-text-secondary overflow-y-auto">
       <div className="flex flex-col items-center gap-3">
@@ -121,38 +15,11 @@ export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps)
         <p className="text-sm">Send a message to start a new conversation</p>
       </div>
 
-      {!loading && sessions.length > 0 && (
-        <div className="w-full max-w-sm px-4">
-          <TagChipBar projectTags={projectTags} tagCounts={tagCounts} totalCount={sessions.length} selectedTagId={selectedTagId} onSelect={setSelectedTagId} />
-        </div>
-      )}
-
-      {!loading && pinnedSessions.length > 0 && (
-        <div className="flex flex-col gap-2 w-full max-w-sm px-4">
-          <p className="text-xs text-text-subtle text-center">Pinned</p>
-          <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
-            {pinnedSessions.map(renderSessionRow)}
-          </div>
-        </div>
-      )}
-
-      {!loading && recentSessions.length > 0 && (
-        <div className="flex flex-col gap-2 w-full max-w-sm px-4">
-          <p className="text-xs text-text-subtle text-center">Recent chats</p>
-          <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
-            {recentSessions.map(renderSessionRow)}
-          </div>
-          {hasMore && (
-            <button
-              onClick={() => setShowAll(!showAll)}
-              className="flex items-center justify-center gap-1 text-[11px] text-text-subtle hover:text-text-primary transition-colors py-1"
-            >
-              {showAll ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />}
-              {showAll ? "Show less" : `Show more (${allRecentSessions.length - MAX_RECENT_SESSIONS})`}
-            </button>
-          )}
-        </div>
-      )}
+      <SessionListPanel
+        projectName={projectName}
+        onSelectSession={onSelectSession}
+        className="w-full px-4"
+      />
     </div>
   );
 }

package/src/web/components/chat/session-list-panel.tsx

@@ -0,0 +1,188 @@
+import { useState, useEffect, useCallback } from "react";
+import { ChevronDown, ChevronUp, MessageSquare, Pin, PinOff, Search, X } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { formatRelativeDate } from "@/lib/format-date";
+import { useProjectTags, TagChipBar } from "./tag-filter-chips";
+import { SessionContextMenu } from "./session-context-menu";
+import type { SessionInfo, ProjectTag } from "../../../types/chat";
+
+const MAX_RECENT_SESSIONS = 5;
+const FETCH_SESSIONS_LIMIT = 20;
+
+interface SessionListPanelProps {
+  projectName: string | undefined;
+  onSelectSession: (session: SessionInfo) => void;
+  className?: string;
+}
+
+export function SessionListPanel({ projectName, onSelectSession, className }: SessionListPanelProps) {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showAll, setShowAll] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
+  const { projectTags, tagCounts, loadTags } = useProjectTags(projectName);
+
+  const loadSessions = useCallback(async () => {
+    if (!projectName) return;
+    setLoading(true);
+    try {
+      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?limit=${FETCH_SESSIONS_LIMIT}`);
+      setSessions(data.sessions.slice(0, FETCH_SESSIONS_LIMIT));
+    } catch {
+      // silently ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [projectName]);
+
+  useEffect(() => { loadSessions(); }, [loadSessions]);
+
+  const togglePin = useCallback(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 ignore
+    }
+  }, [projectName]);
+
+  const handleTagChanged = useCallback((sid: string, tag: { id: number; name: string; color: string } | null) => {
+    setSessions((prev) => prev.map((s) => s.id === sid ? { ...s, tag } : s));
+    loadTags();
+  }, [loadTags]);
+
+  const query = searchQuery.toLowerCase().trim();
+  const filtered = sessions.filter((s) => {
+    if (selectedTagId !== null && s.tag?.id !== selectedTagId) return false;
+    if (query && !(s.title || "").toLowerCase().includes(query)) return false;
+    return true;
+  });
+  const pinnedSessions = filtered.filter((s) => s.pinned);
+  const allRecentSessions = filtered.filter((s) => !s.pinned);
+  const recentSessions = showAll ? allRecentSessions : allRecentSessions.slice(0, MAX_RECENT_SESSIONS);
+  const hasMore = allRecentSessions.length > MAX_RECENT_SESSIONS;
+
+  if (loading || !projectName || sessions.length === 0) return null;
+
+  return (
+    <div className={className}>
+      <div className="relative">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-text-subtle pointer-events-none" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search chats..."
+          className="w-full pl-8 pr-8 py-1.5 text-xs rounded-md border border-border bg-surface text-text-primary placeholder:text-text-subtle focus:outline-none focus:ring-1 focus:ring-primary/50"
+        />
+        {searchQuery && (
+          <button onClick={() => setSearchQuery("")} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-subtle hover:text-text-primary">
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+
+      <div className="mt-3">
+        <TagChipBar projectTags={projectTags} tagCounts={tagCounts} totalCount={sessions.length} selectedTagId={selectedTagId} onSelect={setSelectedTagId} />
+      </div>
+
+      {pinnedSessions.length > 0 && (
+        <div className="flex flex-col gap-2 w-full mt-4">
+          <p className="text-xs text-text-subtle text-center">Pinned</p>
+          <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
+            {pinnedSessions.map((s) => (
+              <SessionRow key={s.id} session={s} projectName={projectName} projectTags={projectTags} onSelect={onSelectSession} onTogglePin={togglePin} onTagChanged={handleTagChanged} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {recentSessions.length > 0 && (
+        <div className="flex flex-col gap-2 w-full mt-4">
+          <p className="text-xs text-text-subtle text-center">Recent chats</p>
+          <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
+            {recentSessions.map((s) => (
+              <SessionRow key={s.id} session={s} projectName={projectName} projectTags={projectTags} onSelect={onSelectSession} onTogglePin={togglePin} onTagChanged={handleTagChanged} />
+            ))}
+          </div>
+          {hasMore && (
+            <button
+              onClick={() => setShowAll(!showAll)}
+              className="flex items-center justify-center gap-1 text-[11px] text-text-subtle hover:text-text-primary transition-colors py-1"
+            >
+              {showAll ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />}
+              {showAll ? "Show less" : `Show more (${allRecentSessions.length - MAX_RECENT_SESSIONS})`}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SessionRowProps {
+  session: SessionInfo;
+  projectName: string;
+  projectTags: ProjectTag[];
+  onSelect: (session: SessionInfo) => void;
+  onTogglePin: (e: React.MouseEvent, session: SessionInfo) => void;
+  onTagChanged: (sid: string, tag: { id: number; name: string; color: string } | null) => void;
+}
+
+function SessionRow({ session, projectName, projectTags, onSelect, onTogglePin, onTagChanged }: SessionRowProps) {
+  return (
+    <SessionContextMenu
+      session={session}
+      projectName={projectName}
+      projectTags={projectTags}
+      onTogglePin={onTogglePin}
+      onTagChanged={onTagChanged}
+    >
+      <button
+        onClick={() => onSelect(session)}
+        className="group flex items-center gap-2.5 w-full px-3 py-2.5 text-left hover:bg-surface-elevated active:bg-surface-elevated transition-colors border-b border-border/50 last:border-0"
+      >
+        <MessageSquare className="size-3.5 shrink-0 text-text-subtle" />
+        {session.tag && (
+          <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: session.tag.color }} title={session.tag.name} />
+        )}
+        <span className="flex-1 min-w-0 text-xs font-medium truncate text-text-primary">
+          {session.title || "Untitled"}
+        </span>
+        {session.updatedAt && (
+          <span className="text-[10px] text-text-subtle shrink-0">
+            {formatRelativeDate(session.updatedAt)}
+          </span>
+        )}
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => onTogglePin(e, session)}
+          className={`p-1 rounded transition-colors shrink-0 ${
+            session.pinned
+              ? "text-primary hover:text-primary/70"
+              : "text-text-subtle can-hover:opacity-0 can-hover: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" />}
+        </span>
+      </button>
+    </SessionContextMenu>
+  );
+}

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

@@ -4,7 +4,7 @@ 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";
+import { Loader2, FileCode, WrapText } from "lucide-react";
 
 function getMonacoLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
@@ -41,12 +41,13 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const [fullFileDiff, setFullFileDiff] = useState<{ original: string; modified: string } | null>(null);
   const [loading, setLoading] = useState(!isInline);
   const [error, setError] = useState<string | null>(null);
-  const [expandMode, setExpandMode] = useState<"both" | "left" | "right">("both");
   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
   const containerRef = useRef<HTMLDivElement>(null);
+  const diffEditorRef = useRef<import("monaco-editor").editor.IStandaloneDiffEditor | null>(null);
+  const [editorReady, setEditorReady] = useState(false);
   const [containerHeight, setContainerHeight] = useState<number | undefined>();
 
   useEffect(() => {
@@ -125,7 +126,22 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
 
   // Force inline on mobile (<768px) since side-by-side is too narrow
   const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
-  const renderSideBySide = !isMobile && expandMode === "both";
+  const renderSideBySide = !isMobile;
+
+  // Sync word wrap on both sub-editors.
+  // Monaco DiffEditor has a bug: during init when container width is 0,
+  // useInlineViewWhenSpaceIsLimited briefly triggers inline mode which sets
+  // wordWrapOverride2='off' on the original editor. When side-by-side resumes,
+  // wordWrapOverride2 is never cleared, permanently blocking word wrap on the
+  // left side. We disable that option and also force wordWrapOverride2 to clear it.
+  useEffect(() => {
+    const editor = diffEditorRef.current;
+    if (!editor) return;
+    const val: "on" | "off" = isMobile ? "on" : wordWrap ? "on" : "off";
+    editor.updateOptions({ diffWordWrap: val });
+    editor.getOriginalEditor().updateOptions({ wordWrapOverride2: val } as any);
+    editor.getModifiedEditor().updateOptions({ wordWrapOverride2: val } as any);
+  }, [wordWrap, isMobile, editorReady]);
 
   if (!projectName && !isInline) {
     return (
@@ -166,28 +182,6 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
       {/* Toolbar */}
       {!isMobile && (
         <div className="flex items-center justify-end gap-0.5 px-2 py-0.5 border-b border-border shrink-0">
-          <button type="button"
-            onClick={() => setExpandMode(expandMode === "left" ? "both" : "left")}
-            className={`p-1 rounded hover:bg-muted transition-colors ${expandMode === "left" ? "bg-muted text-foreground" : ""}`}
-            title="Expand original"
-          >
-            <PanelLeftOpen className="size-3.5" />
-          </button>
-          <button type="button"
-            onClick={() => setExpandMode("both")}
-            className={`p-1 rounded hover:bg-muted transition-colors ${expandMode === "both" ? "bg-muted text-foreground" : ""}`}
-            title="Side by side"
-          >
-            <Columns2 className="size-3.5" />
-          </button>
-          <button type="button"
-            onClick={() => setExpandMode(expandMode === "right" ? "both" : "right")}
-            className={`p-1 rounded hover:bg-muted transition-colors ${expandMode === "right" ? "bg-muted text-foreground" : ""}`}
-            title="Expand modified"
-          >
-            <PanelRightOpen className="size-3.5" />
-          </button>
-          <div className="w-px h-3.5 bg-border mx-0.5 shrink-0" />
           <button type="button" onClick={toggleWordWrap} title="Toggle word wrap"
             className={`p-1 rounded hover:bg-muted transition-colors ${wordWrap ? "bg-muted text-foreground" : ""}`}
           >
@@ -204,11 +198,16 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
             original={original}
             modified={modified}
             theme={monacoTheme}
+            onMount={(editor) => {
+              diffEditorRef.current = editor;
+              setEditorReady(true);
+            }}
             options={{
               fontSize: isMobile ? 11 : 13,
               fontFamily: "Menlo, Monaco, Consolas, monospace",
-              wordWrap: isMobile ? "on" : wordWrap ? "on" : "off",
+              diffWordWrap: isMobile ? "on" : wordWrap ? "on" : "off",
               renderSideBySide,
+              useInlineViewWhenSpaceIsLimited: false,
               readOnly: true,
               automaticLayout: true,
               scrollBeyondLastLine: false,

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

@@ -1,11 +1,9 @@
-import { Suspense, lazy, useEffect, useState, useCallback } from "react";
-import { ChevronDown, ChevronUp, Loader2, Terminal, MessageSquare, FilePlus, Pin, PinOff } from "lucide-react";
+import { Suspense, lazy, useCallback } from "react";
+import { Loader2, Terminal, MessageSquare, FilePlus } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";
-import { api, projectUrl } from "@/lib/api-client";
-import { useProjectTags, TagChipBar } from "@/components/chat/tag-filter-chips";
-import { SessionContextMenu } from "@/components/chat/session-context-menu";
+import { SessionListPanel } from "@/components/chat/session-list-panel";
 import type { SessionInfo } from "../../../types/chat";
 import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
@@ -87,72 +85,8 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
   );
 }
 
-function formatRelativeDate(iso: string): string {
-  try {
-    const date = new Date(iso);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMin = Math.floor(diffMs / 60_000);
-    if (diffMin < 1) return "Just now";
-    if (diffMin < 60) return `${diffMin}m ago`;
-    const diffHr = Math.floor(diffMin / 60);
-    if (diffHr < 24) return `${diffHr}h ago`;
-    const diffDay = Math.floor(diffHr / 24);
-    if (diffDay < 7) return `${diffDay}d ago`;
-    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-  } catch {
-    return "";
-  }
-}
-
-const MAX_RECENT_SESSIONS = 5;
-const FETCH_SESSIONS_LIMIT = 20;
-
 function EmptyPanel({ panelId }: { panelId: string }) {
   const activeProject = useProjectStore((s) => s.activeProject);
-  const [sessions, setSessions] = useState<SessionInfo[]>([]);
-  const [loadingSessions, setLoadingSessions] = useState(false);
-  const [showAll, setShowAll] = useState(false);
-  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
-  const { projectTags, tagCounts, loadTags } = useProjectTags(activeProject?.name);
-
-  const loadSessions = useCallback(async () => {
-    if (!activeProject?.name) return;
-    setLoadingSessions(true);
-    try {
-      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(activeProject.name)}/chat/sessions?limit=${FETCH_SESSIONS_LIMIT}`);
-      setSessions(data.sessions.slice(0, FETCH_SESSIONS_LIMIT));
-    } catch {
-      // silently ignore — empty state still functional without sessions
-    } finally {
-      setLoadingSessions(false);
-    }
-  }, [activeProject?.name]);
-
-  useEffect(() => { loadSessions(); }, [loadSessions]);
-
-  const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
-    e.stopPropagation();
-    if (!activeProject?.name) return;
-    const url = `${projectUrl(activeProject.name)}/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 ignore
-    }
-  }, [activeProject?.name]);
 
   function openTab(type: TabType) {
     if (type === "editor") {
@@ -167,7 +101,7 @@ function EmptyPanel({ panelId }: { panelId: string }) {
     );
   }
 
-  function openSession(session: SessionInfo) {
+  const openSession = useCallback((session: SessionInfo) => {
     usePanelStore.getState().openTab(
       {
         type: "chat",
@@ -178,62 +112,7 @@ function EmptyPanel({ panelId }: { panelId: string }) {
       },
       panelId,
     );
-  }
-
-  const handleTagChanged = useCallback((sid: string, tag: { id: number; name: string; color: string } | null) => {
-    setSessions((prev) => prev.map((s) => s.id === sid ? { ...s, tag } : s));
-    loadTags();
-  }, [loadTags]);
-
-  const filtered = selectedTagId !== null ? sessions.filter((s) => s.tag?.id === selectedTagId) : sessions;
-  const pinnedSessions = filtered.filter((s) => s.pinned);
-  const allRecentSessions = filtered.filter((s) => !s.pinned);
-  const recentSessions = showAll ? allRecentSessions : allRecentSessions.slice(0, MAX_RECENT_SESSIONS);
-  const hasMore = allRecentSessions.length > MAX_RECENT_SESSIONS;
-
-  function renderSessionRow(session: SessionInfo) {
-    return (
-      <SessionContextMenu
-        key={session.id}
-        session={session}
-        projectName={activeProject!.name}
-        projectTags={projectTags}
-        onTogglePin={togglePin}
-        onTagChanged={handleTagChanged}
-      >
-        <button
-          onClick={() => openSession(session)}
-          className="group flex items-center gap-2.5 w-full px-3 py-2.5 text-left hover:bg-surface-elevated active:bg-surface-elevated transition-colors border-b border-border/50 last:border-0"
-        >
-          <MessageSquare className="size-3.5 shrink-0 text-text-subtle" />
-          {session.tag && (
-            <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: session.tag.color }} title={session.tag.name} />
-          )}
-          <span className="flex-1 min-w-0 text-xs font-medium truncate text-text-primary">
-            {session.title || "Untitled"}
-          </span>
-          {session.updatedAt && (
-            <span className="text-[10px] text-text-subtle shrink-0">
-              {formatRelativeDate(session.updatedAt)}
-            </span>
-          )}
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={(e) => togglePin(e, session)}
-            className={`p-1 rounded transition-colors shrink-0 ${
-              session.pinned
-                ? "text-primary hover:text-primary/70"
-                : "text-text-subtle can-hover:opacity-0 can-hover: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" />}
-        </span>
-        </button>
-      </SessionContextMenu>
-    );
-  }
+  }, [activeProject?.name, panelId]);
 
   return (
     <div className="flex flex-col h-full overflow-y-auto text-text-secondary">
@@ -255,38 +134,11 @@ function EmptyPanel({ panelId }: { panelId: string }) {
           })}
         </div>
 
-        {activeProject && !loadingSessions && sessions.length > 0 && (
-          <div className="w-full max-w-sm">
-            <TagChipBar projectTags={projectTags} tagCounts={tagCounts} totalCount={sessions.length} selectedTagId={selectedTagId} onSelect={setSelectedTagId} />
-          </div>
-        )}
-
-        {activeProject && !loadingSessions && pinnedSessions.length > 0 && (
-          <div className="flex flex-col gap-2 w-full max-w-sm">
-            <p className="text-xs text-text-subtle text-center">Pinned</p>
-            <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
-              {pinnedSessions.map(renderSessionRow)}
-            </div>
-          </div>
-        )}
-
-        {activeProject && !loadingSessions && recentSessions.length > 0 && (
-          <div className="flex flex-col gap-2 w-full max-w-sm">
-            <p className="text-xs text-text-subtle text-center">Recent chats</p>
-            <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
-              {recentSessions.map(renderSessionRow)}
-            </div>
-            {hasMore && (
-              <button
-                onClick={() => setShowAll(!showAll)}
-                className="flex items-center justify-center gap-1 text-[11px] text-text-subtle hover:text-text-primary transition-colors py-1"
-              >
-                {showAll ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />}
-                {showAll ? "Show less" : `Show more (${allRecentSessions.length - MAX_RECENT_SESSIONS})`}
-              </button>
-            )}
-          </div>
-        )}
+        <SessionListPanel
+          projectName={activeProject?.name}
+          onSelectSession={openSession}
+          className="w-full"
+        />
       </div>
     </div>
   );