@hienlh/ppm 0.9.83 → 0.9.85

package/src/web/components/editor/save-as-dialog.tsx

@@ -0,0 +1,75 @@
+import { useState, useCallback } from "react";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FileBrowserPicker } from "@/components/ui/file-browser-picker";
+import { useProjectStore } from "@/stores/project-store";
+
+interface SaveAsDialogProps {
+  open: boolean;
+  defaultName: string;
+  content: string;
+  onSave: (fullPath: string, content: string) => void;
+  onCancel: () => void;
+}
+
+export function SaveAsDialog({ open, defaultName, content, onSave, onCancel }: SaveAsDialogProps) {
+  const [filename, setFilename] = useState(defaultName);
+  const [showPicker, setShowPicker] = useState(false);
+  const [error, setError] = useState("");
+  const activeProject = useProjectStore((s) => s.activeProject);
+
+  const validateAndProceed = useCallback(() => {
+    const trimmed = filename.trim();
+    if (!trimmed) { setError("Filename cannot be empty"); return; }
+    if (/[/\\]/.test(trimmed)) { setError("Filename cannot contain / or \\"); return; }
+    setError("");
+    setShowPicker(true);
+  }, [filename]);
+
+  const handleFolderSelect = useCallback((dirPath: string) => {
+    const sep = dirPath.includes("\\") ? "\\" : "/";
+    const fullPath = dirPath.endsWith(sep) ? `${dirPath}${filename.trim()}` : `${dirPath}${sep}${filename.trim()}`;
+    onSave(fullPath, content);
+  }, [filename, content, onSave]);
+
+  if (showPicker) {
+    return (
+      <FileBrowserPicker
+        open
+        mode="folder"
+        root={activeProject?.path}
+        title={`Save "${filename.trim()}" to...`}
+        onSelect={handleFolderSelect}
+        onCancel={() => setShowPicker(false)}
+      />
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onCancel(); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Save As</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 py-2">
+          <label className="text-sm text-muted-foreground">Filename</label>
+          <Input
+            value={filename}
+            onChange={(e) => { setFilename(e.target.value); setError(""); }}
+            onKeyDown={(e) => { if (e.key === "Enter") validateAndProceed(); }}
+            placeholder="e.g. my-file.ts"
+            autoFocus
+          />
+          {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>Cancel</Button>
+          <Button onClick={validateAndProceed}>Choose Folder...</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -18,6 +18,7 @@ import { basename } from "@/lib/utils";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useProjectStore } from "@/stores/project-store";
+import { useGitStatusStore } from "@/stores/git-status-store";
 import { GitWorktreePanel } from "./git-worktree-panel";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -122,6 +123,7 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
   const activeProjectPath = useProjectStore((s) =>
     s.projects.find((p) => p.name === projectName)?.path,
   );
+  const setGitChangesCount = useGitStatusStore((s) => s.setCount);
 
   const fetchStatus = useCallback(async () => {
     if (!projectName) return;
@@ -131,13 +133,17 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
         `${projectUrl(projectName)}/git/status`,
       );
       setStatus(data);
+      setGitChangesCount(
+        projectName,
+        data.staged.length + data.unstaged.length + data.untracked.length,
+      );
       setError(null);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to fetch status");
     } finally {
       setLoading(false);
     }
-  }, [projectName]);
+  }, [projectName, setGitChangesCount]);
 
   useEffect(() => {
     fetchStatus();

package/src/web/components/layout/command-palette.tsx

@@ -8,6 +8,7 @@ import {
   Database,
   Search,
   FileCode,
+  FilePlus,
   FolderOpen,
   Loader2,
   Globe,
@@ -159,6 +160,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
 
     const builtIn: CommandItem[] = [
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action", shortcut: formatShortcut(getBinding("open-chat")) },
+      { id: "new-file", label: "New File", icon: FilePlus, action: () => { useTabStore.getState().openNewFile(); onClose(); }, keywords: "create untitled blank empty", group: "action", shortcut: formatShortcut(getBinding("new-file")) },
       { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action", shortcut: formatShortcut(getBinding("open-terminal")) },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action", shortcut: formatShortcut(getBinding("open-git-graph")) },
       { id: "ports", label: "Port Forwarding", icon: Globe, action: openNewTab("ports", "Ports"), keywords: "web preview localhost port forward tunnel url", group: "action" },

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

@@ -1,9 +1,16 @@
 import { useState, useRef, useEffect } from "react";
-import { X } from "lucide-react";
+import { X, Download } from "lucide-react";
 import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { isDarkColor } from "@/lib/color-utils";
 import { notificationColor } from "@/stores/notification-store";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 
 interface DraggableTabProps {
   tab: Tab;
@@ -23,11 +30,13 @@ interface DraggableTabProps {
   tabRef: (el: HTMLButtonElement | null) => void;
   /** If provided, double-clicking the title enters inline rename mode */
   onRename?: (newTitle: string) => void;
+  /** Context menu action handler — receives action name */
+  onContextAction?: (action: string) => void;
 }
 
 export function DraggableTab({
   tab, isActive, icon: Icon, showDropBefore, notificationType, onSelect, onClose,
-  onDragStart, onDragOver, onDragEnd, onTouchStart, onTouchMove, onTouchEnd, tabRef, onRename,
+  onDragStart, onDragOver, onDragEnd, onTouchStart, onTouchMove, onTouchEnd, tabRef, onRename, onContextAction,
 }: DraggableTabProps) {
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState(tab.title);
@@ -56,76 +65,120 @@ export function DraggableTab({
       }
     : undefined;
 
+  const isFile = tab.type === "editor";
+
+  const tabButton = (
+    <button
+      ref={tabRef}
+      data-tab-item
+      draggable={!editing}
+      onClick={onSelect}
+      onAuxClick={(e) => { if (e.button === 1 && tab.closable) { e.preventDefault(); onClose(); } }}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEnd}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      style={colorStyle}
+      className={cn(
+        "group flex items-center gap-1 px-3 h-10 whitespace-nowrap text-xs transition-colors",
+        "border-b-2 -mb-px cursor-grab active:cursor-grabbing",
+        !colorStyle && (isActive
+          ? "border-primary text-primary"
+          : "border-transparent text-text-secondary hover:text-foreground"),
+        colorStyle && "border-transparent",
+      )}
+    >
+      <span className="relative">
+        <Icon className="size-4" />
+        {notificationType && !isActive && (
+          <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notificationType))} />
+        )}
+      </span>
+      {editing ? (
+        <input
+          ref={inputRef}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitRename();
+            if (e.key === "Escape") setEditing(false);
+            e.stopPropagation();
+          }}
+          onClick={(e) => e.stopPropagation()}
+          className="max-w-[120px] bg-surface-elevated text-xs px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
+          autoFocus
+        />
+      ) : (
+        <span
+          className="max-w-[120px] truncate"
+          onDoubleClick={(e) => {
+            if (onRename) { e.stopPropagation(); setEditing(true); }
+          }}
+        >
+          {tab.title}
+        </span>
+      )}
+      {tab.closable && !editing && (
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => { e.stopPropagation(); onClose(); }}
+          onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onClose(); } }}
+          className="ml-1 can-hover:opacity-0 can-hover:group-hover:opacity-100 rounded-sm hover:bg-surface-elevated p-0.5 transition-opacity"
+        >
+          <X className="size-3" />
+        </span>
+      )}
+    </button>
+  );
+
   return (
     <div className="relative flex items-center">
       {showDropBefore && (
         <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary rounded-full z-10" />
       )}
-      <button
-        ref={tabRef}
-        data-tab-item
-        draggable={!editing}
-        onClick={onSelect}
-        onAuxClick={(e) => { if (e.button === 1 && tab.closable) { e.preventDefault(); onClose(); } }}
-        onDragStart={onDragStart}
-        onDragOver={onDragOver}
-        onDragEnd={onDragEnd}
-        onTouchStart={onTouchStart}
-        onTouchMove={onTouchMove}
-        onTouchEnd={onTouchEnd}
-        style={colorStyle}
-        className={cn(
-          "group flex items-center gap-1 px-3 h-10 whitespace-nowrap text-xs transition-colors",
-          "border-b-2 -mb-px cursor-grab active:cursor-grabbing",
-          !colorStyle && (isActive
-            ? "border-primary text-primary"
-            : "border-transparent text-text-secondary hover:text-foreground"),
-          colorStyle && "border-transparent",
-        )}
-      >
-        <span className="relative">
-          <Icon className="size-4" />
-          {notificationType && !isActive && (
-            <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notificationType))} />
-          )}
-        </span>
-        {editing ? (
-          <input
-            ref={inputRef}
-            value={editValue}
-            onChange={(e) => setEditValue(e.target.value)}
-            onBlur={commitRename}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") commitRename();
-              if (e.key === "Escape") setEditing(false);
-              e.stopPropagation();
-            }}
-            onClick={(e) => e.stopPropagation()}
-            className="max-w-[120px] bg-surface-elevated text-xs px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
-            autoFocus
-          />
-        ) : (
-          <span
-            className="max-w-[120px] truncate"
-            onDoubleClick={(e) => {
-              if (onRename) { e.stopPropagation(); setEditing(true); }
-            }}
-          >
-            {tab.title}
-          </span>
-        )}
-        {tab.closable && !editing && (
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={(e) => { e.stopPropagation(); onClose(); }}
-            onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onClose(); } }}
-            className="ml-1 can-hover:opacity-0 can-hover:group-hover:opacity-100 rounded-sm hover:bg-surface-elevated p-0.5 transition-opacity"
-          >
-            <X className="size-3" />
-          </span>
-        )}
-      </button>
+      {onContextAction ? (
+        <ContextMenu>
+          <ContextMenuTrigger asChild>
+            {tabButton}
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            {isFile && (
+              <>
+                <ContextMenuItem onClick={() => onContextAction("copy-path")}>
+                  Copy Path
+                </ContextMenuItem>
+                <ContextMenuItem onClick={() => onContextAction("download")}>
+                  <Download className="size-3.5 mr-2" />
+                  Download
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuItem onClick={() => onContextAction("rename")}>
+                  Rename
+                </ContextMenuItem>
+                <ContextMenuItem variant="destructive" onClick={() => onContextAction("delete")}>
+                  Delete
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+              </>
+            )}
+            {tab.closable && (
+              <ContextMenuItem onClick={() => onContextAction("close")}>
+                Close
+              </ContextMenuItem>
+            )}
+            <ContextMenuItem onClick={() => onContextAction("close-others")}>
+              Close Others
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => onContextAction("close-right")}>
+              Close to the Right
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      ) : tabButton}
     </div>
   );
 }

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

@@ -2,10 +2,11 @@ import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import {
   Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
-  ChevronRight, Globe, Puzzle,
+  ChevronRight, Globe, Puzzle, Copy, Download, Pencil, Trash2,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
+import { useFileStore, type FileNode } from "@/stores/file-store";
 import { findPanelPosition, MAX_ROWS } from "@/stores/panel-utils";
 import { resolveProjectColor } from "@/lib/project-palette";
 import { getProjectInitials } from "@/lib/project-avatar";
@@ -14,6 +15,8 @@ import { cn } from "@/lib/utils";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
 import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
+import { downloadFile } from "@/lib/file-download";
+import { FileActions } from "@/components/explorer/file-actions";
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "terminal", label: "Terminal" },
@@ -112,6 +115,28 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
     usePanelStore.getState().moveTab(tabId, pid, targetPanelId);
   }
 
+  const [fileActionState, setFileActionState] = useState<{ action: string; node: FileNode; tabId: string } | null>(null);
+
+  function handleFileAction(tab: Tab, action: string) {
+    const filePath = tab.metadata?.filePath as string | undefined;
+    const projectName = tab.metadata?.projectName as string | undefined;
+    switch (action) {
+      case "copy-path":
+        if (filePath) navigator.clipboard.writeText(filePath).catch(() => {});
+        break;
+      case "download":
+        if (filePath && projectName) downloadFile(projectName, filePath);
+        break;
+      case "rename":
+      case "delete":
+        if (filePath) {
+          setFileActionState({ action, tabId: tab.id, node: { name: tab.title, path: filePath, type: "file" } });
+        }
+        break;
+    }
+    setMenuTabId(null);
+  }
+
   const { activeProject: activeProjectForTab } = useProjectStore.getState();
   function handleNewTab(type: TabType) {
     const state = usePanelStore.getState();
@@ -269,13 +294,40 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
             <div className="px-3 py-2 text-xs text-text-secondary border-b border-border truncate">
               {menuTab.title}
             </div>
+            {menuTab.type === "editor" && (
+              <>
+                <button onClick={() => handleFileAction(menuTab, "copy-path")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                  <Copy className="size-4" /> Copy Path
+                </button>
+                <button onClick={() => handleFileAction(menuTab, "download")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                  <Download className="size-4" /> Download
+                </button>
+                <button onClick={() => handleFileAction(menuTab, "rename")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                  <Pencil className="size-4" /> Rename
+                </button>
+                <button onClick={() => handleFileAction(menuTab, "delete")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-error active:bg-surface-elevated">
+                  <Trash2 className="size-4" /> Delete
+                </button>
+                <div className="h-px bg-border mx-2" />
+              </>
+            )}
+            {menuTab.closable && (
+              <button onClick={() => { usePanelStore.getState().closeTab(menuTabId!); setMenuTabId(null); }}
+                className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                <X className="size-4" /> Close
+              </button>
+            )}
             {menuTabIdx > 0 && (
               <button onClick={() => { moveTabLeft(menuTabId!); setMenuTabId(null); }}
                 className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
                 <ArrowLeft className="size-4" /> Move Left
               </button>
             )}
-            {menuTabIdx < tabs.length - 1 && (
+            {menuTabIdx < menuTabPanelTabs.length - 1 && (
               <button onClick={() => { moveTabRight(menuTabId!); setMenuTabId(null); }}
                 className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
                 <ArrowRight className="size-4" /> Move Right
@@ -296,6 +348,21 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
           </div>
         </>
       )}
+
+      {fileActionState && (
+        <FileActions
+          action={fileActionState.action}
+          node={fileActionState.node}
+          projectName={activeProjectForTab?.name ?? ""}
+          onClose={() => setFileActionState(null)}
+          onRefresh={() => {
+            if (activeProjectForTab) useFileStore.getState().fetchTree(activeProjectForTab.name);
+            if (fileActionState.action === "delete") {
+              usePanelStore.getState().closeTab(fileActionState.tabId);
+            }
+          }}
+        />
+      )}
     </nav>
   );
 }

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

@@ -9,6 +9,7 @@ import { SettingsTab } from "@/components/settings/settings-tab";
 import { DatabaseSidebar } from "@/components/database/database-sidebar";
 import { SearchPanel } from "@/components/explorer/search-panel";
 import { ExtensionTreeView } from "@/components/extensions/extension-tree-view";
+import { useGitStatusStore, useGitChangesPoller } from "@/stores/git-status-store";
 import { cn } from "@/lib/utils";
 
 const BUILTIN_TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
@@ -66,6 +67,10 @@ export function Sidebar() {
   const sidebarActiveTab = useSettingsStore((s) => s.sidebarActiveTab);
   const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
   const contributions = useExtensionStore((s) => s.contributions);
+  const gitChangesCount = useGitStatusStore((s) =>
+    activeProject?.name ? (s.counts.get(activeProject.name) ?? 0) : 0,
+  );
+  useGitChangesPoller(activeProject?.name, sidebarActiveTab === "git");
 
   // Build tabs list: built-in + extension-contributed sidebar views
   const TABS = useMemo(() => {
@@ -108,13 +113,18 @@ export function Sidebar() {
               key={tab.id}
               onClick={() => setSidebarActiveTab(tab.id)}
               className={cn(
-                "flex-1 flex items-center justify-center gap-1.5 h-full text-xs transition-colors border-b-2 -mb-px",
+                "flex-1 flex items-center justify-center gap-1.5 h-full text-xs transition-colors border-b-2 -mb-px relative",
                 isActive
                   ? "border-primary text-primary font-medium"
                   : "border-transparent text-text-secondary hover:text-foreground",
               )}
             >
               <Icon className="size-3.5" title={tab.label} />
+              {tab.id === "git" && gitChangesCount > 0 && (
+                <span className="absolute top-1 right-1 min-w-[16px] h-4 px-1 flex items-center justify-center rounded-full bg-primary text-primary-foreground text-[10px] font-medium leading-none">
+                  {gitChangesCount > 99 ? "99+" : gitChangesCount}
+                </span>
+              )}
             </button>
           );
         })}

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, useState } from "react";
 import {
   Plus,
   Terminal,
@@ -16,6 +16,7 @@ import {
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
+import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useTabDrag } from "@/hooks/use-tab-drag";
 import { useTouchTabDrag, wasTouchDragRecent } from "@/hooks/use-touch-tab-drag";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
@@ -25,6 +26,8 @@ import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overfl
 import { DraggableTab } from "./draggable-tab";
 import { cn } from "@/lib/utils";
 import type { Tab } from "@/stores/tab-store";
+import { downloadFile } from "@/lib/file-download";
+import { FileActions } from "@/components/explorer/file-actions";
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal,
@@ -86,6 +89,56 @@ export function TabBar({ panelId }: TabBarProps) {
     }
   }, []);
 
+  // File action dialog state for tab context menu (rename/delete)
+  const [fileActionState, setFileActionState] = useState<{ action: string; node: FileNode; tabId: string } | null>(null);
+
+  /** Handle context menu actions on a tab */
+  const handleTabContextAction = useCallback((tab: Tab, action: string) => {
+    const panelState = usePanelStore.getState();
+    const pTabs = panelState.panels[effectivePanelId]?.tabs ?? [];
+
+    switch (action) {
+      case "close":
+        panelState.closeTab(tab.id, effectivePanelId);
+        break;
+      case "close-others":
+        for (const t of pTabs) {
+          if (t.id !== tab.id && t.closable) panelState.closeTab(t.id, effectivePanelId);
+        }
+        break;
+      case "close-right": {
+        const idx = pTabs.findIndex((t) => t.id === tab.id);
+        for (let i = idx + 1; i < pTabs.length; i++) {
+          if (pTabs[i]!.closable) panelState.closeTab(pTabs[i]!.id, effectivePanelId);
+        }
+        break;
+      }
+      case "copy-path": {
+        const filePath = tab.metadata?.filePath as string | undefined;
+        if (filePath) navigator.clipboard.writeText(filePath).catch(() => {});
+        break;
+      }
+      case "download": {
+        const filePath = tab.metadata?.filePath as string | undefined;
+        const projectName = tab.metadata?.projectName as string | undefined;
+        if (filePath && projectName) downloadFile(projectName, filePath);
+        break;
+      }
+      case "rename":
+      case "delete": {
+        const filePath = tab.metadata?.filePath as string | undefined;
+        if (filePath) {
+          setFileActionState({
+            action,
+            tabId: tab.id,
+            node: { name: tab.title, path: filePath, type: "file" },
+          });
+        }
+        break;
+      }
+    }
+  }, [effectivePanelId]);
+
   /** Double-click on empty bar area → open command palette */
   function handleBarDoubleClick(e: React.MouseEvent) {
     // Only trigger if clicking directly on the bar or scroll container (not on a tab)
@@ -103,6 +156,7 @@ export function TabBar({ panelId }: TabBarProps) {
   }
 
   return (
+    <>
     <div
       className="hidden md:flex items-center h-10 border-b border-border bg-background relative"
       onDragOver={handleDragOverBar}
@@ -160,6 +214,7 @@ export function TabBar({ panelId }: TabBarProps) {
                 else tabRefs.current.delete(tab.id);
               }}
               onRename={tab.type === "chat" ? (title) => handleRenameTab(tab, title) : undefined}
+              onContextAction={(action) => handleTabContextAction(tab, action)}
             />
             );
           })}
@@ -194,5 +249,23 @@ export function TabBar({ panelId }: TabBarProps) {
         </button>
       )}
     </div>
+
+    {fileActionState && (
+      <FileActions
+        action={fileActionState.action}
+        node={fileActionState.node}
+        projectName={activeProject?.name ?? ""}
+        onClose={() => setFileActionState(null)}
+        onRefresh={() => {
+          if (activeProject) useFileStore.getState().fetchTree(activeProject.name);
+          // Close tab after file deletion (onRefresh only called on success)
+          if (fileActionState.action === "delete") {
+            usePanelStore.getState().closeTab(fileActionState.tabId, effectivePanelId);
+          }
+        }}
+      />
+    )}
+    </>
   );
 }
+

package/src/web/components/layout/upgrade-banner.tsx

@@ -96,6 +96,9 @@ export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
         // No supervisor — manual restart needed
         toast.info(data.message || "Upgrade installed. Restart PPM manually.");
         setUpgrading(false);
+        if (availableVersion) {
+          sessionStorage.setItem(DISMISS_KEY_PREFIX + availableVersion, "1");
+        }
         setDismissed(true);
       }
     } catch (e) {