ux(canvas/files): right-click context menu — Open / Download / Delete (#2999 PR-C)

canvas/src/components/tabs/FilesTab.tsx

@@ -45,6 +45,7 @@ export function FilesTab({ workspaceId }: Props) {
     readFile,
     writeFile,
     deleteFile,
+    downloadFileByPath,
     downloadAllFiles,
     uploadFiles,
     deleteAllFiles,
@@ -216,7 +217,15 @@ export function FilesTab({ workspaceId }: Props) {
               nodes={tree}
               selectedPath={selectedFile}
               onSelect={openFile}
+              // Delete is currently gated to /configs to match the
+              // toolbar's New / Upload / Clear affordances. Context
+              // menu and inline ✕ both honour the gate. PR-A made the
+              // backend EIC delete work on all roots — keeping the
+              // canvas gate conservative until we want to expose
+              // /home /workspace deletion intentionally.
               onDelete={root === "/configs" ? setConfirmDelete : () => {}}
+              onDownload={downloadFileByPath}
+              canDelete={root === "/configs"}
               expandedDirs={expandedDirs}
               onToggleDir={toggleDir}
               loadingDir={loadingDir}

canvas/src/components/tabs/FilesTab/FileTree.tsx

@@ -1,41 +1,108 @@
 "use client";
 
+import { useState } from "react";
 import { type TreeNode, getIcon } from "./tree";
+import { FileTreeContextMenu, type MenuItem } from "./FileTreeContextMenu";
 
 interface TreeCallbacks {
   selectedPath: string | null;
   onSelect: (path: string) => void;
   onDelete: (path: string) => void;
+  /** PR-C: right-click → Download. Files only — directories ignore. */
+  onDownload: (path: string) => void;
+  /** Whether the active root permits delete. Wire into the Delete
+   *  context-menu item's `disabled` flag so the user gets the same
+   *  affordance as the toolbar (which gates Clear/New on /configs). */
+  canDelete: boolean;
   expandedDirs: Set<string>;
   onToggleDir: (path: string) => void;
   loadingDir: string | null;
 }
 
+/**
+ * FileTree renders the workspace tree + owns the right-click
+ * context-menu state. Lifting the menu state to the tree (vs each
+ * row) means only one menu is open at a time — opening a new row's
+ * menu auto-closes the prior one. Same UX as VSCode / Theia.
+ */
 export function FileTree({
   nodes,
   selectedPath,
   onSelect,
   onDelete,
+  onDownload,
+  canDelete,
   expandedDirs,
   onToggleDir,
   loadingDir,
   depth = 0,
 }: TreeCallbacks & { nodes: TreeNode[]; depth?: number }) {
+  const [menu, setMenu] = useState<{
+    x: number;
+    y: number;
+    items: MenuItem[];
+  } | null>(null);
+
+  const openContextMenu = (e: React.MouseEvent, node: TreeNode) => {
+    e.preventDefault();
+    // Items composed per-row so the available actions reflect the
+    // node type (files get Download; directories don't have a
+    // useful per-tree download — the Export toolbar covers bulk).
+    const items: MenuItem[] = [];
+    if (!node.isDir) {
+      items.push({
+        id: "open",
+        label: "Open",
+        icon: "⤴",
+        onClick: () => onSelect(node.path),
+      });
+      items.push({
+        id: "download",
+        label: "Download",
+        icon: "↓",
+        onClick: () => onDownload(node.path),
+      });
+    }
+    items.push({
+      id: "delete",
+      label: "Delete",
+      icon: "✕",
+      destructive: true,
+      disabled: !canDelete,
+      onClick: () => onDelete(node.path),
+    });
+    setMenu({ x: e.clientX, y: e.clientY, items });
+  };
+
+  // Single state lifted to the top-level tree; nested <FileTree>s
+  // (rendered for expanded directories below) do NOT instantiate
+  // their own menus — they call the SAME openContextMenu via prop
+  // drilling. This keeps "only one menu open" the structural
+  // invariant rather than a render-order coincidence.
+  const childCallbacks: TreeCallbacks = {
+    selectedPath, onSelect, onDelete, onDownload, canDelete,
+    expandedDirs, onToggleDir, loadingDir,
+  };
+
   return (
     <div>
       {nodes.map((node) => (
         <TreeItem
           key={`${node.path}:${node.isDir ? "dir" : "file"}`}
           node={node}
-          selectedPath={selectedPath}
-          onSelect={onSelect}
-          onDelete={onDelete}
-          expandedDirs={expandedDirs}
-          onToggleDir={onToggleDir}
-          loadingDir={loadingDir}
+          openContextMenu={openContextMenu}
           depth={depth}
+          {...childCallbacks}
         />
       ))}
+      {menu && (
+        <FileTreeContextMenu
+          x={menu.x}
+          y={menu.y}
+          items={menu.items}
+          onClose={() => setMenu(null)}
+        />
+      )}
     </div>
   );
 }
@@ -45,11 +112,18 @@ function TreeItem({
   selectedPath,
   onSelect,
   onDelete,
+  onDownload,
+  canDelete,
   expandedDirs,
   onToggleDir,
   loadingDir,
   depth,
-}: TreeCallbacks & { node: TreeNode; depth: number }) {
+  openContextMenu,
+}: TreeCallbacks & {
+  node: TreeNode;
+  depth: number;
+  openContextMenu: (e: React.MouseEvent, node: TreeNode) => void;
+}) {
   const isSelected = selectedPath === node.path;
   const expanded = expandedDirs.has(node.path);
   const isLoading = loadingDir === node.path;
@@ -61,6 +135,7 @@ function TreeItem({
           className="group w-full flex items-center gap-1 px-2 py-0.5 text-left hover:bg-surface-card/40 transition-colors cursor-pointer"
           style={{ paddingLeft: `${depth * 12 + 8}px` }}
           onClick={() => onToggleDir(node.path)}
+          onContextMenu={(e) => openContextMenu(e, node)}
         >
           <span className="text-[9px] text-ink-soft w-3">{isLoading ? "…" : expanded ? "▼" : "▶"}</span>
           <span className="text-[10px]">📁</span>
@@ -82,6 +157,8 @@ function TreeItem({
             selectedPath={selectedPath}
             onSelect={onSelect}
             onDelete={onDelete}
+            onDownload={onDownload}
+            canDelete={canDelete}
             expandedDirs={expandedDirs}
             onToggleDir={onToggleDir}
             loadingDir={loadingDir}
@@ -99,6 +176,7 @@ function TreeItem({
       }`}
       style={{ paddingLeft: `${depth * 12 + 20}px` }}
       onClick={() => onSelect(node.path)}
+      onContextMenu={(e) => openContextMenu(e, node)}
     >
       <span className="text-[9px]">{getIcon(node.name, false)}</span>
       <span className="text-[10px] flex-1 truncate font-mono">{node.name}</span>

canvas/src/components/tabs/FilesTab/FileTreeContextMenu.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+/**
+ * FileTreeContextMenu — VSCode-style right-click menu for a single
+ * file-tree row. Pops at the cursor's viewport coords; dismisses on
+ * outside-click, Esc, blur, or scroll.
+ *
+ * Why a custom component (no library): the menu is one of several
+ * "small popovers" in canvas; pulling in a dnd / popover lib for one
+ * surface adds 10x the bytes of this implementation. The patterns
+ * (outside-click + Esc + portal-free fixed position) match the
+ * ContextMenu used in canvas/Toolbar so the keyboard-nav muscle
+ * memory is uniform.
+ *
+ * Items are rendered from a `MenuItem[]` so callers can add/remove
+ * actions without touching this component (e.g. PR-D will add an
+ * "Upload to this folder" item for directory rows).
+ *
+ * Accessibility:
+ * - role="menu" + role="menuitem" so screen readers announce the
+ *   surface as a menu, not a generic div.
+ * - First item gets autofocus so keyboard users can ↓/↑/Enter without
+ *   reaching for the mouse.
+ * - Esc + outside-click + Tab dismisses; behaves like every other
+ *   menu the user has touched on the canvas.
+ */
+export interface MenuItem {
+  /** Stable identifier for testing + analytics. */
+  id: string;
+  label: string;
+  /** Optional left icon glyph; not load-bearing. */
+  icon?: string;
+  /** Destructive (rendered in red) — for Delete-class actions. */
+  destructive?: boolean;
+  /** Item-specific click handler. The menu auto-closes after onClick
+   *  fires so handlers don't have to call onClose themselves. */
+  onClick: () => void;
+  /** Disabled items render but don't fire onClick (useful for
+   *  Delete-on-non-/configs case where the caller wants to surface
+   *  the item but explain it's gated). Currently unused — placeholder
+   *  for future options. */
+  disabled?: boolean;
+}
+
+interface Props {
+  /** Viewport-coordinate position of the cursor that opened the menu. */
+  x: number;
+  y: number;
+  items: MenuItem[];
+  onClose: () => void;
+}
+
+export function FileTreeContextMenu({ x, y, items, onClose }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  // First item gets initial focus for keyboard ↓/↑/Enter nav.
+  const firstItemRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    firstItemRef.current?.focus();
+  }, []);
+
+  // Outside-click + Esc dismiss. Per memory
+  // (feedback_abort_controller_for_rerendered_listeners), use an
+  // AbortController so re-mounts (caller toggles the menu) don't leak
+  // listeners.
+  useEffect(() => {
+    const ctrl = new AbortController();
+    const onPointerDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        // Roving focus across .menuitem buttons. Doing this with
+        // tabindex management because Tab / Shift+Tab leave the menu
+        // (which is the right thing — the user is escaping the menu).
+        e.preventDefault();
+        const buttons = ref.current?.querySelectorAll<HTMLButtonElement>(
+          "[role='menuitem']:not([disabled])",
+        );
+        if (!buttons || buttons.length === 0) return;
+        const arr = Array.from(buttons);
+        const cur = arr.indexOf(document.activeElement as HTMLButtonElement);
+        const next =
+          e.key === "ArrowDown"
+            ? (cur + 1) % arr.length
+            : (cur - 1 + arr.length) % arr.length;
+        arr[next].focus();
+      }
+    };
+    // `mousedown` (not `click`) so the menu dismisses BEFORE the
+    // tree-row's click handler would fire — otherwise clicking
+    // outside also selects a different row, which is not what the
+    // user expected when "outside-click closes the menu".
+    document.addEventListener("mousedown", onPointerDown, { signal: ctrl.signal });
+    document.addEventListener("keydown", onKeyDown, { signal: ctrl.signal });
+    // Scroll inside any ancestor also dismisses — the fixed-position
+    // menu would otherwise stay anchored to viewport coords while the
+    // row it points at scrolled away. Use capture so we catch scroll
+    // on inner panels (FileTree's overflow-y-auto wrapper).
+    document.addEventListener("scroll", onClose, { signal: ctrl.signal, capture: true });
+    return () => ctrl.abort();
+  }, [onClose]);
+
+  return (
+    <div
+      ref={ref}
+      role="menu"
+      aria-label="File actions"
+      className="fixed z-[1000] min-w-[140px] py-1 bg-surface-elevated border border-line/60 rounded-md shadow-xl shadow-black/30 text-[11px]"
+      style={{ left: x, top: y }}
+    >
+      {items.map((item, i) => (
+        <button
+          key={item.id}
+          ref={i === 0 ? firstItemRef : undefined}
+          type="button"
+          role="menuitem"
+          disabled={item.disabled}
+          onClick={() => {
+            if (item.disabled) return;
+            item.onClick();
+            onClose();
+          }}
+          className={
+            item.destructive
+              ? "w-full text-left px-3 py-1 text-bad hover:bg-red-900/30 focus:bg-red-900/30 focus:outline-none disabled:opacity-40 disabled:pointer-events-none transition-colors"
+              : "w-full text-left px-3 py-1 text-ink-mid hover:bg-surface-card hover:text-ink focus:bg-surface-card focus:text-ink focus:outline-none disabled:opacity-40 disabled:pointer-events-none transition-colors"
+          }
+        >
+          {item.icon && <span className="inline-block w-4 mr-1.5 text-ink-soft">{item.icon}</span>}
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}