@hienlh/ppm 0.9.0-beta.8 → 0.9.1

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

@@ -0,0 +1,148 @@
+import { useState, useEffect, useCallback } from "react";
+import { Bot, ChevronDown, ChevronUp, MessageSquare, Pin, PinOff } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import type { SessionInfo } from "../../../types/chat";
+
+const MAX_RECENT_SESSIONS = 5;
+const FETCH_SESSIONS_LIMIT = 20;
+
+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 "";
+  }
+}
+
+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 loadSessions = useCallback(async () => {
+    if (!projectName) return;
+    setLoading(true);
+    try {
+      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
+      setSessions(data.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 pinnedSessions = sessions.filter((s) => s.pinned);
+  const allRecentSessions = sessions.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 (
+      <button
+        key={session.id}
+        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" />
+        <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 md:opacity-0 md:group-hover:opacity-100 hover:text-text-primary"
+          }`}
+          aria-label={session.pinned ? "Unpin session" : "Pin session"}
+        >
+          {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+        </span>
+      </button>
+    );
+  }
+
+  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">
+        <Bot className="size-10 text-text-subtle" />
+        <p className="text-sm">Send a message to start a new conversation</p>
+      </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>
+      )}
+    </div>
+  );
+}

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

@@ -43,7 +43,7 @@ interface MessageListProps {
   connectingElapsed?: number;
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
-  onFork?: (userMessage: string) => void;
+  onFork?: (userMessage: string, messageId?: string) => void;
 }
 
 export function MessageList({
@@ -90,13 +90,17 @@ export function MessageList({
     <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) => (
+          {filtered.map((msg, idx) => (
               <MessageBubble
                 key={msg.id}
                 message={msg}
                 isStreaming={isStreaming && msg.id.startsWith("streaming-")}
                 projectName={projectName}
-                onFork={msg.role === "user" && onFork ? () => onFork(msg.content) : undefined}
+                onFork={msg.role === "user" && onFork ? () => {
+                  // Pass the previous message ID so the fork includes history up to (but not including) this user message
+                  const prevMsg = idx > 0 ? filtered[idx - 1] : undefined;
+                  onFork(msg.content, prevMsg?.id);
+                } : undefined}
               />
             ))}
 
@@ -610,6 +614,13 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
       groups.push({ kind: "thinking", content: thinkingBuffer });
       thinkingBuffer = "";
     }
+    if (event.type === "account_retry") {
+      if (textBuffer) { groups.push({ kind: "text", content: textBuffer }); textBuffer = ""; }
+      const label = (event as any).accountLabel ?? "another account";
+      const reason = (event as any).reason ?? "Auth failed";
+      groups.push({ kind: "text", content: `\n\n> ↻ ${reason} — retrying with **${label}**...\n\n` });
+      continue;
+    }
     if (event.type === "text") {
       textBuffer += event.content;
     } else if (event.type === "tool_use") {
@@ -719,9 +730,11 @@ function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming:
         {!isStreaming && <span className="text-text-subtle/50 ml-auto">{content.length > 100 ? `${Math.round(content.length / 4)} tokens` : ""}</span>}
       </button>
       {expanded && (
-        <div className="px-2 pb-2 text-text-subtle/80 whitespace-pre-wrap max-h-60 overflow-y-auto text-[11px] leading-relaxed">
-          {content}
-        </div>
+        <StickToBottom className="max-h-60 overflow-y-auto" resize="smooth" initial="instant">
+          <StickToBottom.Content className="px-2 pb-2 text-text-subtle/80 whitespace-pre-wrap text-[11px] leading-relaxed">
+            {content}
+          </StickToBottom.Content>
+        </StickToBottom>
       )}
     </div>
   );

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

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

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Activity, RefreshCw, Eye, Download, Upload, Plus, X } from "lucide-react";
+import { Activity, RefreshCw, Eye, Download, Upload, Plus, X, Settings, Trash2 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import type { UsageInfo, LimitBucket } from "../../../types/chat";
 import {
@@ -7,11 +7,13 @@ import {
   getActiveAccount,
   getAllAccountUsages,
   patchAccount,
+  deleteAccount,
   type AccountInfo,
   type AccountUsageEntry,
   type OAuthProfileData,
 } from "../../lib/api-settings";
 import { AddAccountDialog, ExportAccountsDialog, ImportAccountsDialog } from "./account-dialogs";
+import { AccountRotationSettings } from "./account-rotation-settings";
 
 interface UsageBadgeProps {
   usage: UsageInfo;
@@ -151,11 +153,12 @@ function formatLastUpdated(ts: number | null | undefined): string | null {
   return `${days}d ago`;
 }
 
-function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, onViewProfile, flash }: {
+function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onDelete, onExport, onViewProfile, flash }: {
   entry: AccountUsageEntry;
   isActive: boolean;
   accountInfo?: AccountInfo;
   onToggle?: (id: string, status: string) => void;
+  onDelete?: (id: string, display: string) => void;
   onExport?: (id: string) => void;
   onViewProfile?: (profile: OAuthProfileData) => void;
   flash?: boolean;
@@ -163,19 +166,24 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
   const { usage } = entry;
   const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
   const status = accountInfo?.status ?? entry.accountStatus;
+  // Expired: has expiresAt in the past AND no refresh token to auto-renew
+  const isExpired = !!(accountInfo && !accountInfo.hasRefreshToken && accountInfo.expiresAt && accountInfo.expiresAt < Math.floor(Date.now() / 1000));
 
   return (
-    <div className={`rounded-md border p-2 space-y-1.5 transition-colors duration-500 min-w-[200px] shrink-0 snap-start ${flash ? "bg-primary/10 border-primary/40" : ""} ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
+    <div className={`rounded-md border p-2 space-y-1.5 transition-colors duration-500 min-w-[200px] shrink-0 snap-start ${isExpired ? "opacity-50" : ""} ${flash ? "bg-primary/10 border-primary/40" : ""} ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
       <div className="flex items-center gap-1.5">
         <span className="text-xs font-medium truncate flex-1 min-w-0">
           {entry.accountLabel ?? entry.accountId.slice(0, 8)}
         </span>
-        {!entry.isOAuth && (
+        {isExpired && (
+          <span className="text-[9px] text-red-500 shrink-0 font-medium">Expired</span>
+        )}
+        {!entry.isOAuth && !isExpired && (
           <span className="text-[9px] text-text-subtle shrink-0">API key</span>
         )}
         {/* Account controls */}
         <div className="flex items-center gap-0.5 shrink-0">
-          {onViewProfile && accountInfo?.profileData && (
+          {!isExpired && onViewProfile && accountInfo?.profileData && (
             <button
               className="p-1 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
               onClick={() => onViewProfile(accountInfo.profileData!)}
@@ -184,7 +192,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               <Eye className="size-3" />
             </button>
           )}
-          {onExport && entry.isOAuth && (
+          {!isExpired && onExport && entry.isOAuth && (
             <button
               className="p-1 rounded cursor-pointer text-text-subtle hover:text-blue-500 hover:bg-surface-elevated transition-colors"
               onClick={() => onExport(entry.accountId)}
@@ -193,7 +201,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               <Download className="size-3" />
             </button>
           )}
-          {onToggle && (
+          {!isExpired && onToggle && (
             <Switch
               checked={status !== "disabled"}
               onCheckedChange={() => onToggle(entry.accountId, status)}
@@ -201,6 +209,15 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               className="scale-[0.6] cursor-pointer"
             />
           )}
+          {onDelete && (
+            <button
+              className="p-1 rounded cursor-pointer text-text-subtle hover:text-red-500 hover:bg-surface-elevated transition-colors"
+              onClick={() => onDelete(entry.accountId, entry.accountLabel ?? entry.accountId.slice(0, 8))}
+              title="Remove account"
+            >
+              <Trash2 className="size-3" />
+            </button>
+          )}
         </div>
       </div>
       {hasBuckets ? (
@@ -245,6 +262,8 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showExportDialog, setShowExportDialog] = useState(false);
   const [showImportDialog, setShowImportDialog] = useState(false);
+  const [showRotationSettings, setShowRotationSettings] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; display: string } | null>(null);
   const [exportPreselect, setExportPreselect] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
   const msgTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -323,13 +342,26 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
     onReload?.();
   }
 
+  async function confirmDeleteAccount() {
+    if (!deleteTarget) return;
+    try {
+      await deleteAccount(deleteTarget.id);
+      showMessage(`Account "${deleteTarget.display}" removed.`);
+      loadAll();
+      onReload?.();
+    } catch (e) {
+      showMessage(`Failed to remove: ${(e as Error).message}`);
+    }
+    setDeleteTarget(null);
+  }
+
   function openExportAll() {
     setExportPreselect(null);
     setShowExportDialog(true);
   }
 
   return (
-    <div className="border-b border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
+    <div className="relative border-b border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-text-primary">Usage & Accounts</span>
@@ -338,6 +370,13 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
           )}
         </div>
         <div className="flex items-center gap-1">
+          <button
+            onClick={() => setShowRotationSettings(true)}
+            className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+            title="Rotation & retry settings"
+          >
+            <Settings className="size-3" />
+          </button>
           {onReload && (
             <button
               onClick={() => { onReload(); loadAll(); }}
@@ -375,6 +414,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
                 isActive={entry.accountId === (activeAccountId ?? usage.activeAccountId)}
                 accountInfo={accountMap.get(entry.accountId)}
                 onToggle={handleToggle}
+                onDelete={(id, display) => setDeleteTarget({ id, display })}
                 onExport={(id) => { setExportPreselect(id); setShowExportDialog(true); }}
                 onViewProfile={setProfileView}
                 flash={flashIds.has(entry.accountId)}
@@ -451,10 +491,30 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
         </button>
       </div>
 
+      {/* Delete confirmation overlay */}
+      {deleteTarget && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-md">
+          <div className="bg-surface border border-border rounded-lg shadow-lg p-4 mx-4 max-w-[280px] w-full space-y-3">
+            <p className="text-xs text-text-primary text-center">
+              Remove <strong className="text-foreground">{deleteTarget.display}</strong>?
+            </p>
+            <div className="flex gap-2">
+              <button onClick={() => setDeleteTarget(null)} className="flex-1 px-3 py-1.5 rounded-md text-xs border border-border text-text-secondary hover:bg-surface-hover cursor-pointer transition-colors">
+                Cancel
+              </button>
+              <button onClick={confirmDeleteAccount} className="flex-1 px-3 py-1.5 rounded-md text-xs bg-red-500 text-white hover:bg-red-600 cursor-pointer transition-colors">
+                Remove
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Account dialogs */}
       <AddAccountDialog open={showAddDialog} onOpenChange={setShowAddDialog} onSuccess={handleSuccess} />
       <ExportAccountsDialog open={showExportDialog} onOpenChange={(v) => { setShowExportDialog(v); if (!v) setExportPreselect(null); }} accounts={accounts} preselectId={exportPreselect} onMessage={showMessage} />
       <ImportAccountsDialog open={showImportDialog} onOpenChange={setShowImportDialog} onSuccess={handleSuccess} />
+      <AccountRotationSettings open={showRotationSettings} onOpenChange={setShowRotationSettings} />
     </div>
   );
 }

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

@@ -9,7 +9,6 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
 } from "@/components/ui/dropdown-menu";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useTabStore } from "@/stores/tab-store";
 import { basename } from "@/lib/utils";
@@ -151,20 +150,16 @@ function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentD
           {segment.name}
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="max-h-[300px] overflow-hidden p-0">
-        <ScrollArea className="max-h-[300px]">
-          <div className="p-1">
-            {sorted.map((node) => (
-              <NodeMenuItem
-                key={node.path}
-                node={node}
-                projectName={projectName}
-                activePath={segment.fullPath}
-                onFileClick={onFileClick}
-              />
-            ))}
-          </div>
-        </ScrollArea>
+      <DropdownMenuContent align="start" className="max-h-[300px] p-1">
+        {sorted.map((node) => (
+          <NodeMenuItem
+            key={node.path}
+            node={node}
+            projectName={projectName}
+            activePath={segment.fullPath}
+            onFileClick={onFileClick}
+          />
+        ))}
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -188,20 +183,16 @@ function NodeMenuItem({ node, projectName, activePath, onFileClick }: NodeMenuIt
           <Icon className="size-3.5 shrink-0 text-muted-foreground" />
           <span className="truncate">{node.name}</span>
         </DropdownMenuSubTrigger>
-        <DropdownMenuSubContent className="max-h-[300px] overflow-hidden p-0">
-          <ScrollArea className="max-h-[300px]">
-            <div className="p-1">
-              {sortNodes(node.children).map((child) => (
-                <NodeMenuItem
-                  key={child.path}
-                  node={child}
-                  projectName={projectName}
-                  activePath={activePath}
-                  onFileClick={onFileClick}
-                />
-              ))}
-            </div>
-          </ScrollArea>
+        <DropdownMenuSubContent className="max-h-[300px] overflow-y-auto p-1">
+          {sortNodes(node.children).map((child) => (
+            <NodeMenuItem
+              key={child.path}
+              node={child}
+              projectName={projectName}
+              activePath={activePath}
+              onFileClick={onFileClick}
+            />
+          ))}
         </DropdownMenuSubContent>
       </DropdownMenuSub>
     );