@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/components/layout/ProjectSidebar.tsx

@@ -8,9 +8,13 @@
 // and only as many as physically fit are shown inline — the rest collapse into
 // a "+N" popover so the rail never overflows the viewport. The whole section can
 // also be collapsed into a single folder button (state persisted per browser).
+//
+// Each project avatar carries a right-click menu: the rail shows one 40px tile
+// per project and has nowhere to put a "⋯", so the verbs that don't fit (its
+// config, its path, unregistering it) hang off the tile itself.
 import { useLayoutEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { Plus, Settings, Monitor, Terminal, Bot, BookOpen, ChevronDown, Folders, MessagesSquare, type LucideIcon } from "lucide-react";
+import { Plus, Settings, Monitor, Terminal, Bot, BookOpen, ChevronDown, Folders, MessagesSquare, Copy, SlidersHorizontal, Trash2, type LucideIcon } from "lucide-react";
 import { Logo } from "./Logo";
 import { ProjectAvatar, projectTone } from "./ProjectAvatar";
 import { Tip } from "../ui/tip";
@@ -20,11 +24,22 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
+import { ConfirmDialog } from "../common/ConfirmDialog";
+import { useToast } from "../Toast";
+import { Projects } from "../../lib/api";
 import { useNavCollapse } from "../common/TabNav";
 import { useProjects } from "../../hooks/useProjects";
 import { usePersonaName } from "../../hooks/usePersonaName";
 import { STORAGE } from "../../constants";
 import { cn } from "../../lib/cn";
+import { switchProjectHref } from "../../lib/projectNav";
 import { t } from "../../i18n";
 import type { ProjectEntry } from "../../types/daemon";
 
@@ -45,8 +60,8 @@ interface ModuleItem {
 // top-level entry next to Base rather than living inside Settings.
 function buildModules(): ModuleItem[] {
   return [
-    { id: "desktop", label: t("nav.modules.desktop"), href: "/m/desktop", icon: Monitor },
-    { id: "code",    label: t("nav.modules.code"),    href: "/m/code",    icon: Terminal },
+    { id: "desktop", label: t("nav.modules.desktop"), href: "/desktop", icon: Monitor },
+    { id: "code",    label: t("nav.modules.code"),    href: "/code",    icon: Terminal },
   ];
 }
 
@@ -88,6 +103,73 @@ function useVisibleCount(
   return enabled ? Math.min(count, total) : total;
 }
 
+// A project you reach through the "+N" popover (or the collapsed folder) is one
+// the rail failed to show you — so opening it pins it to the front, and it stays
+// inline from then on. Order is per-browser; the list is capped so it can't grow
+// forever with ids of projects that no longer exist.
+const RAIL_ORDER_MAX = 32;
+
+function useRailOrder(): { pinned: string[]; pin: (id: string) => void } {
+  const [pinned, setPinned] = useState<string[]>(() => {
+    try {
+      const parsed = JSON.parse(localStorage.getItem(STORAGE.railOrder) || "[]");
+      return Array.isArray(parsed) ? parsed.map(String) : [];
+    } catch {
+      return [];
+    }
+  });
+  const pin = (id: string) =>
+    setPinned((prev) => {
+      const next = [id, ...prev.filter((x) => x !== id)].slice(0, RAIL_ORDER_MAX);
+      try {
+        localStorage.setItem(STORAGE.railOrder, JSON.stringify(next));
+      } catch {
+        /* private mode — the order is a convenience, not state we need */
+      }
+      return next;
+    });
+  return { pinned, pin };
+}
+
+// What a project is called on the rail: its name, else the last segment of its
+// path, else its id — the same rule everywhere it is drawn.
+function projectLabel(p: ProjectEntry): string {
+  return p.name || p.path.split("/").pop() || String(p.id);
+}
+
+// What a right-click on a project offers, wherever that project is drawn.
+interface ProjectActions {
+  openConfig: (p: ProjectEntry) => void;
+  copyPath: (p: ProjectEntry) => void;
+  remove: (p: ProjectEntry) => void;
+}
+
+// The menu body itself. A tile and a popover row are different triggers for the
+// same project, so they get the same verbs in the same order — destructive last.
+function ProjectMenuContent({ project, actions }: { project: ProjectEntry; actions: ProjectActions }) {
+  return (
+    <ContextMenuContent className="w-56" data-testid={`project-ctx-${project.id}`}>
+      <div className="truncate px-1.5 py-1 text-xs font-medium text-muted-foreground">
+        {projectLabel(project)}
+      </div>
+      <ContextMenuItem onClick={() => actions.openConfig(project)} data-testid={`project-ctx-config-${project.id}`}>
+        <SlidersHorizontal /> {t("nav.project_settings")}
+      </ContextMenuItem>
+      <ContextMenuItem onClick={() => actions.copyPath(project)} data-testid={`project-ctx-copy-${project.id}`}>
+        <Copy /> {t("nav.copy_path")}
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem
+        variant="destructive"
+        onClick={() => actions.remove(project)}
+        data-testid={`project-ctx-unregister-${project.id}`}
+      >
+        <Trash2 /> {t("admin.unregister")}
+      </ContextMenuItem>
+    </ContextMenuContent>
+  );
+}
+
 // Square rail button that opens a dropdown listing projects — used both for the
 // "+N" overflow bucket and for the fully-collapsed folder.
 function RailProjectMenu({
@@ -99,8 +181,9 @@ function RailProjectMenu({
   header,
   active,
   testId,
-  onSelect,
+  onOpen,
   isActive,
+  actions,
 }: {
   projects: ProjectEntry[];
   label?: string;
@@ -110,11 +193,20 @@ function RailProjectMenu({
   header: string;
   active: boolean;
   testId: string;
-  onSelect: (href: string) => void;
+  onOpen: (project: ProjectEntry) => void;
   isActive: (href: string) => boolean;
+  actions: ProjectActions;
 }) {
+  // Controlled so a verb picked from a row's context menu also puts the
+  // popover away: acting on a project is leaving the list, not browsing it.
+  const [open, setOpen] = useState(false);
+  const rowActions: ProjectActions = {
+    openConfig: (p) => { setOpen(false); actions.openConfig(p); },
+    copyPath:   (p) => { setOpen(false); actions.copyPath(p); },
+    remove:     (p) => { setOpen(false); actions.remove(p); },
+  };
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger
         data-testid={testId}
         title={tooltip}
@@ -125,7 +217,7 @@ function RailProjectMenu({
           className={cn(
             "flex size-10 items-center justify-center rounded-xl text-xs font-bold transition-all",
             "bg-muted/40 text-muted-fg hover:bg-accent hover:text-foreground",
-            active && "ring-2 ring-foreground ring-offset-2 ring-offset-card",
+            active && "ring-2 ring-primary ring-offset-2 ring-offset-background",
           )}
         >
           {icon ?? label}
@@ -139,21 +231,31 @@ function RailProjectMenu({
       <DropdownMenuContent side="right" align="start" sideOffset={8} className="max-h-[70vh] w-64">
         <div className="px-1.5 py-1 text-xs font-medium text-muted-foreground">{header}</div>
         {projects.map((p) => {
-          const name = p.name || p.path.split("/").pop() || String(p.id);
+          const name = projectLabel(p);
           const href = `/p/${p.id}`;
           const { initials, idleClass } = projectTone(name);
           return (
-            <DropdownMenuItem
-              key={p.id}
-              data-testid={`project-menu-item-${p.id}`}
-              onClick={() => onSelect(href)}
-              className={cn(isActive(href) && "bg-accent/60 text-foreground")}
-            >
-              <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-md text-[10px] font-bold", idleClass)}>
-                {initials}
-              </span>
-              <span className="truncate">{name}</span>
-            </DropdownMenuItem>
+            // A project you can only reach through this popover carries the
+            // same right-click menu as one with a tile of its own. `render`
+            // keeps the DOM flat — the row itself is the context trigger, so
+            // the dropdown's own keyboard navigation is untouched.
+            <ContextMenu key={p.id}>
+              <ContextMenuTrigger
+                render={
+                  <DropdownMenuItem
+                    data-testid={`project-menu-item-${p.id}`}
+                    onClick={() => onOpen(p)}
+                    className={cn(isActive(href) && "bg-accent/60 text-foreground")}
+                  />
+                }
+              >
+                <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-md text-[10px] font-bold", idleClass)}>
+                  {initials}
+                </span>
+                <span className="truncate">{name}</span>
+              </ContextMenuTrigger>
+              <ProjectMenuContent project={p} actions={rowActions} />
+            </ContextMenu>
           );
         })}
       </DropdownMenuContent>
@@ -162,20 +264,71 @@ function RailProjectMenu({
 }
 
 export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props) {
-  const { projects, isLoading } = useProjects();
+  const { projects, isLoading, mutate: mutateProjects } = useProjects();
   const location = useLocation();
+  const toast = useToast();
   const MODULES = buildModules();
   const persona = usePersonaName();
   const listRef = useRef<HTMLDivElement>(null);
   const { collapsed, toggle } = useNavCollapse(STORAGE.sidebarCollapsed + ".projects");
+  const { pinned, pin } = useRailOrder();
+  // The one destructive verb on the rail never fires from the menu itself — it
+  // parks the project here and the dialog below asks first.
+  const [pendingRemove, setPendingRemove] = useState<ProjectEntry | null>(null);
 
   const isActive = (href: string) =>
     location.pathname === href || location.pathname.startsWith(`${href}/`);
+  // Changing projects should change only the project: whatever tab you were
+  // reading stays open on the other side when it exists there.
+  const openProject = (project: Pick<ProjectEntry, "id" | "kind">) =>
+    onSelect(switchProjectHref(location.pathname, project));
+  // Reached through a menu, i.e. it wasn't on the rail — pull it to the front so
+  // it is next time. Inline avatars never reorder: the rail would shuffle under
+  // the cursor on every click.
+  const openFromMenu = (project: ProjectEntry) => {
+    pin(String(project.id));
+    openProject(project);
+  };
+  const copyPath = async (project: ProjectEntry) => {
+    try {
+      await navigator.clipboard.writeText(project.path);
+      toast.success(t("nav.path_copied"));
+    } catch {
+      toast.error(t("nav.copy_failed"));
+    }
+  };
+  // Unregister, not delete: the project leaves APX's registry and every file on
+  // disk stays. If you were reading the project you just removed, the rail
+  // takes you home — its screen has nothing left to show.
+  const runRemove = async () => {
+    if (!pendingRemove) return;
+    try {
+      await Projects.remove(String(pendingRemove.id));
+      toast.success(t("project.unregistered"));
+      await mutateProjects();
+      if (isActive(`/p/${pendingRemove.id}`)) onSelect("/");
+    } catch (e) {
+      toast.error((e as Error).message);
+    }
+  };
+
+  const actions: ProjectActions = {
+    openConfig: (project) => onSelect(`/p/${project.id}/config`),
+    copyPath,
+    remove: setPendingRemove,
+  };
+
   const base = projects.find((p) => String(p.id) === "0");
-  // Newest first — higher ids are more recently registered.
+  // Pinned first in the order they were pinned, then the rest newest-first —
+  // higher ids are more recently registered.
+  const rank = new Map(pinned.map((id, i) => [id, i]));
   const rest = projects
     .filter((p) => String(p.id) !== "0")
-    .sort((a, b) => Number(b.id) - Number(a.id));
+    .sort((a, b) => {
+      const ra = rank.get(String(a.id)) ?? Infinity;
+      const rb = rank.get(String(b.id)) ?? Infinity;
+      return ra === rb ? Number(b.id) - Number(a.id) : ra - rb;
+    });
 
   const visibleCount = useVisibleCount(listRef, rest.length, !collapsed && rest.length > 0);
   const visible = rest.slice(0, visibleCount);
@@ -197,22 +350,19 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
 
       {/* The conversational way in. Sits above the project rail because it is
           the daily entry point — but the rail below it is untouched, and stays
-          the structural axis. */}
-      <Tip content={t("inbox.title")} side="right">
-        <button
-          type="button"
-          onClick={() => onSelect("/m/inbox")}
-          data-testid="nav-inbox"
-          className={`flex size-10 cursor-pointer items-center justify-center rounded-xl border transition ${
-            isActive("/m/inbox")
-              ? "border-primary bg-primary/10"
-              : "border-border bg-muted/40 hover:bg-muted"
-          }`}
-          aria-label={t("inbox.title")}
-        >
-          <MessagesSquare size={18} />
-        </button>
-      </Tip>
+          the structural axis. Drawn with the same avatar as Base and the
+          modules: it used to be the one bordered white square in a rail of
+          coloured tiles, which read as a different KIND of thing. */}
+      <ProjectAvatar
+        label={t("inbox.title")}
+        sublabel={t("nav.modules.inbox_short")}
+        tone="emerald"
+        testId="nav-inbox"
+        title={t("inbox.title")}
+        active={isActive("/inbox")}
+        icon={<MessagesSquare size={18} />}
+        onClick={() => onSelect("/inbox")}
+      />
 
       {isLoading && <div className="size-10 animate-pulse rounded-xl bg-muted" />}
 
@@ -224,7 +374,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
           active={isActive("/p/0")}
           isDefault
           icon={<img src="/modules/superagent.png" alt={t("base.title")} className="size-7 object-contain" draggable={false} />}
-          onClick={() => onSelect("/p/0")}
+          onClick={() => openProject(base)}
         />
       )}
 
@@ -276,8 +426,9 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
               header={t("nav.all_projects")}
               active={rest.some((p) => isActive(`/p/${p.id}`))}
               testId="nav-projects-folder"
-              onSelect={onSelect}
+              onOpen={openFromMenu}
               isActive={isActive}
+              actions={actions}
             />
           )}
 
@@ -288,21 +439,15 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
               <div data-rail-probe aria-hidden className="invisible absolute w-full">
                 <ProjectAvatar label="Ag" active={false} onClick={() => {}} />
               </div>
-              {visible.map((p) => {
-                const label = p.name || p.path.split("/").pop() || String(p.id);
-                const href = `/p/${p.id}`;
-                return (
-                  <div key={p.id} data-rail-item className="w-full">
-                    <ProjectAvatar
-                      label={label}
-                      testId={`project-avatar-${p.id}`}
-                      title={`${label} — ${p.path}`}
-                      active={isActive(href)}
-                      onClick={() => onSelect(href)}
-                    />
-                  </div>
-                );
-              })}
+              {visible.map((p) => (
+                <ProjectRailItem
+                  key={p.id}
+                  project={p}
+                  active={isActive(`/p/${p.id}`)}
+                  onOpen={() => openProject(p)}
+                  actions={actions}
+                />
+              ))}
               {overflow.length > 0 && (
                 <RailProjectMenu
                   projects={overflow}
@@ -311,8 +456,9 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
                   header={t("nav.more_projects", { count: overflow.length })}
                   active={overflowHasActive}
                   testId="nav-projects-overflow"
-                  onSelect={onSelect}
+                  onOpen={openFromMenu}
                   isActive={isActive}
+                  actions={actions}
                 />
               )}
             </>
@@ -347,7 +493,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
           rel="noopener noreferrer"
           data-testid="nav-docs"
           aria-label={t("settings_ui.documentation")}
-          className="flex size-10 items-center justify-center rounded-xl border border-border/60 bg-muted/30 text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
+          className="flex size-10 items-center justify-center rounded-xl bg-muted text-muted-fg transition-colors hover:bg-accent hover:text-foreground dark:bg-muted/60"
         >
           <BookOpen size={18} />
         </a>
@@ -360,15 +506,64 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
           onClick={onOpenRoby}
           data-testid="nav-roby"
           aria-label={t("superagent.talk", { persona })}
-          className="flex size-10 items-center justify-center rounded-xl border border-border/60 bg-muted/30 text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
+          className="flex size-10 items-center justify-center rounded-xl bg-muted text-muted-fg transition-colors hover:bg-accent hover:text-foreground dark:bg-muted/60"
         >
           <Bot size={18} />
         </button>
       </Tip>
+
+      {/* Portalled: it lives here so the rail owns its own destructive flow,
+          but it renders at the document root, outside the measured list. The
+          path goes in the question — the tile only shows two initials, and the
+          folder is what the answer is really about. */}
+      <ConfirmDialog
+        open={pendingRemove !== null}
+        onClose={() => setPendingRemove(null)}
+        onConfirm={runRemove}
+        title={t("project.danger.unregister_confirm_title")}
+        description={pendingRemove
+          ? `${t("project.unregister_confirm", { label: projectLabel(pendingRemove) })} ${pendingRemove.path}`
+          : ""}
+        confirmLabel={t("admin.unregister")}
+        testId="project-unregister-confirm"
+      />
     </aside>
   );
 }
 
+// One rail avatar plus its right-click menu. Left click still just opens the
+// project — the menu is for everything else, and the destructive item only
+// arms the confirmation dialog.
+function ProjectRailItem({
+  project,
+  active,
+  onOpen,
+  actions,
+}: {
+  project: ProjectEntry;
+  active: boolean;
+  onOpen: () => void;
+  actions: ProjectActions;
+}) {
+  const label = projectLabel(project);
+  return (
+    <ContextMenu>
+      {/* data-rail-item stays on the trigger: it is what the layout measures
+          and what the e2e specs locate. */}
+      <ContextMenuTrigger data-rail-item className="w-full">
+        <ProjectAvatar
+          label={label}
+          testId={`project-avatar-${project.id}`}
+          title={`${label} — ${project.path}`}
+          active={active}
+          onClick={onOpen}
+        />
+      </ContextMenuTrigger>
+      <ProjectMenuContent project={project} actions={actions} />
+    </ContextMenu>
+  );
+}
+
 // Re-export for screens that still import projectKindLabel here.
 export function projectKindLabel(kind?: string): string {
   switch (kind) {