npm - @agentprojectcontext/apx - Versions diffs - 1.38.1 → 1.39.0 - Mend

@agentprojectcontext/apx 1.38.1 → 1.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-CQc_5t8F.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-hwxuTPcK.css">
+    <script type="module" crossorigin src="/assets/index-UzqHxD0B.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CAKEYko0.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/src/App.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Route, Routes, useLocation, useNavigate, useSearchParams } from "react-router-dom";
-import { Moon, Sun } from "lucide-react";
+import { Languages, Moon, Sun } from "lucide-react";
 import { ProjectSidebar, projectKindLabel } from "./components/layout/ProjectSidebar";
 import { ApxAdminScreen } from "./screens/ApxAdminScreen";
 import { ProjectScreen } from "./screens/ProjectScreen";
@@ -21,7 +21,14 @@ import { useProjects } from "./hooks/useProjects";
 import { useTokenBootstrap } from "./hooks/useTokenBootstrap";
 import { NavCollapseProvider, useNavCollapseCtx, usePageActions, usePageLabel } from "./hooks/useNavCollapseCtx";
 import { NavToggle } from "./components/common/TabNav";
-import { t } from "./i18n";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "./components/ui/dropdown-menu";
+import { t, getLocale, setLocale, LOCALES, type Locale } from "./i18n";
 export function App() {
   const auth = useTokenBootstrap();
@@ -143,6 +150,7 @@ function TopBar({
         {subtitle && <span className="text-muted-fg/50"> · {subtitle}</span>}
       </span>
       {pageActions}
+      <LanguageMenu />
       <button
         type="button"
         data-testid="theme-toggle"
@@ -156,6 +164,37 @@ function TopBar({
   );
 }
+function LanguageMenu() {
+  const current = getLocale();
+  const change = (l: Locale) => {
+    if (l === current) return;
+    setLocale(l);
+    // Reload so every rendered string picks up the new locale — t() is not reactive.
+    window.location.reload();
+  };
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        data-testid="lang-menu"
+        title={t("topbar.lang_toggle")}
+        className="flex shrink-0 items-center gap-1 rounded-md p-1.5 text-muted-fg hover:bg-accent hover:text-accent-fg"
+      >
+        <Languages size={14} />
+        <span className="text-[11px] font-medium uppercase">{current}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuRadioGroup value={current} onValueChange={(v) => change(v as Locale)}>
+          {LOCALES.map((lo) => (
+            <DropdownMenuRadioItem key={lo.value} value={lo.value}>
+              {lo.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
 function moduleLabel(key?: string) {
   switch (key) {
     case "voice":   return t("nav.modules.voice");

package/src/interfaces/web/src/components/layout/ProjectAvatar.tsx CHANGED Viewed

@@ -114,3 +114,11 @@ const TONE_ACTIVE: Record<ProjectTone, string> = {
 };
 function toneIdle(t: ProjectTone)   { return TONE_IDLE[t]; }
 function toneActive(t: ProjectTone) { return TONE_ACTIVE[t]; }
+/** Compact avatar tokens for list rows (overflow / collapsed menus). Reuses
+ *  the same initials + tone as the rail so a project reads identically in both
+ *  the rail and the popover. */
+export function projectTone(name: string): { initials: string; idleClass: string } {
+  const { initials } = computeInitialsAndSub(name);
+  return { initials, idleClass: TONE_IDLE[pickTone(name)] };
+}

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

@@ -2,14 +2,31 @@
 // rail-level MODULES (Voice/Deck/Code) that sit alongside Base, then the
 // projects column, finally add + settings. The default workspace (id=0) is
 // pinned first.
+//
+// The projects column is the only flexible zone: top (logo/base/modules) and
+// bottom (add/settings/docs/roby) stay pinned. Projects are listed newest-first
+// 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).
+import { useLayoutEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { Plus, Settings, Mic, Monitor, LayoutGrid, Terminal, Bot, BookOpen, type LucideIcon } from "lucide-react";
+import { Plus, Settings, Mic, Monitor, LayoutGrid, Terminal, Bot, BookOpen, ChevronDown, Folders, type LucideIcon } from "lucide-react";
 import { Logo } from "./Logo";
-import { ProjectAvatar } from "./ProjectAvatar";
+import { ProjectAvatar, projectTone } from "./ProjectAvatar";
 import { Tip } from "../ui/tip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { useNavCollapse } from "../common/TabNav";
 import { useProjects } from "../../hooks/useProjects";
-import { t } from "../../i18n";
 import { usePersonaName } from "../../hooks/usePersonaName";
+import { STORAGE } from "../../constants";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import type { ProjectEntry } from "../../types/daemon";
 interface Props {
   onSelect: (href: string) => void;
@@ -34,19 +51,136 @@ function buildModules(): ModuleItem[] {
   ];
 }
+// How many project avatars fit in the flexible list area. The list is `flex-1`,
+// so its height is fixed by the surrounding chrome and does NOT depend on how
+// many items we render — measuring it is therefore stable (no resize loop). The
+// list also holds the always-present "Add" button (one slot) and, when there's
+// overflow, the "+N" button (a second slot), so we reserve for those.
+function useVisibleCount(
+  listRef: React.RefObject<HTMLDivElement | null>,
+  total: number,
+  enabled: boolean,
+): number {
+  const [count, setCount] = useState(total);
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (!el || !enabled) return;
+    const measure = () => {
+      const h = el.clientHeight;
+      if (!h) return;
+      const gap = parseFloat(getComputedStyle(el).rowGap) || 12;
+      // A hidden, always-present probe gives an accurate item height even on the
+      // first paint or when zero real items currently fit.
+      const probe = el.querySelector<HTMLElement>("[data-rail-probe]");
+      const per = (probe?.offsetHeight ?? 56) + gap;
+      const slots = Math.max(0, Math.floor((h + gap) / per));
+      const forItems = slots - 1; // reserve the Add button
+      setCount(forItems >= total ? total : Math.max(0, forItems - 1)); // reserve "+N"
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [listRef, total, enabled]);
+  return enabled ? Math.min(count, total) : total;
+}
+// Square rail button that opens a dropdown listing projects — used both for the
+// "+N" overflow bucket and for the fully-collapsed folder.
+function RailProjectMenu({
+  projects,
+  label,
+  sublabel,
+  icon,
+  tooltip,
+  header,
+  active,
+  testId,
+  onSelect,
+  isActive,
+}: {
+  projects: ProjectEntry[];
+  label?: string;
+  sublabel?: string;
+  icon?: React.ReactNode;
+  tooltip: string;
+  header: string;
+  active: boolean;
+  testId: string;
+  onSelect: (href: string) => void;
+  isActive: (href: string) => boolean;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        data-testid={testId}
+        title={tooltip}
+        aria-label={tooltip}
+        className="group flex w-full cursor-pointer flex-col items-center gap-1"
+      >
+        <span
+          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",
+          )}
+        >
+          {icon ?? label}
+        </span>
+        {sublabel && (
+          <span className="block max-w-[3.6rem] truncate text-[9px] leading-tight text-muted-fg group-hover:text-foreground">
+            {sublabel}
+          </span>
+        )}
+      </DropdownMenuTrigger>
+      <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 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>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
 export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
   const { projects, isLoading } = useProjects();
   const location = useLocation();
   const MODULES = buildModules();
   const persona = usePersonaName();
+  const listRef = useRef<HTMLDivElement>(null);
+  const { collapsed, toggle } = useNavCollapse(STORAGE.sidebarCollapsed + ".projects");
   const isActive = (href: string) =>
     location.pathname === href || location.pathname.startsWith(`${href}/`);
   const base = projects.find((p) => String(p.id) === "0");
-  const rest = projects.filter((p) => String(p.id) !== "0");
+  // Newest first — higher ids are more recently registered.
+  const rest = projects
+    .filter((p) => String(p.id) !== "0")
+    .sort((a, b) => Number(b.id) - Number(a.id));
+  const visibleCount = useVisibleCount(listRef, rest.length, !collapsed && rest.length > 0);
+  const visible = rest.slice(0, visibleCount);
+  const overflow = rest.slice(visibleCount);
+  const overflowHasActive = overflow.some((p) => isActive(`/p/${p.id}`));
   return (
-    <aside className="flex h-full w-20 flex-col items-center gap-3 overflow-y-auto bg-transparent py-3">
+    <aside className="flex h-full w-20 flex-col items-center gap-3 overflow-hidden bg-transparent py-3">
       <Tip content={t("nav.apx_admin")} side="right">
         <button
           type="button"
@@ -86,33 +220,95 @@ export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
         />
       ))}
-      {rest.length > 0 && <div className="my-0.5 h-px w-8 rounded-full bg-border" />}
-      {rest.map((p) => {
-        const label = p.name || p.path.split("/").pop() || String(p.id);
-        const href = `/p/${p.id}`;
-        return (
+      {/* Projects column — the only flexible zone. The measured list holds the
+          projects, the "+N" overflow bucket and the Add button; it fills the
+          remaining height so the bottom group (settings/docs/roby) stays pinned. */}
+      <div className="flex min-h-0 w-full flex-1 flex-col items-center gap-3">
+        {rest.length > 0 && (
+          <>
+            <div className="my-0.5 h-px w-8 rounded-full bg-border" />
+            <Tip content={collapsed ? t("nav.expand_projects") : t("nav.collapse_projects")} side="right">
+              <button
+                type="button"
+                onClick={toggle}
+                data-testid="nav-toggle-projects"
+                aria-label={collapsed ? t("nav.expand_projects") : t("nav.collapse_projects")}
+                aria-expanded={!collapsed}
+                className="flex h-5 w-8 cursor-pointer items-center justify-center rounded-md text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
+              >
+                <ChevronDown className={cn("size-3.5 transition-transform", collapsed && "-rotate-90")} />
+              </button>
+            </Tip>
+          </>
+        )}
+        <div
+          ref={listRef}
+          className="flex min-h-0 w-full flex-1 flex-col items-center gap-3 overflow-hidden"
+        >
+          {rest.length > 0 && collapsed && (
+            <RailProjectMenu
+              projects={rest}
+              icon={<Folders size={18} />}
+              sublabel={String(rest.length)}
+              tooltip={t("nav.all_projects")}
+              header={t("nav.all_projects")}
+              active={rest.some((p) => isActive(`/p/${p.id}`))}
+              testId="nav-projects-folder"
+              onSelect={onSelect}
+              isActive={isActive}
+            />
+          )}
+          {rest.length > 0 && !collapsed && (
+            <>
+              {/* Hidden ruler — out of flow, measured to size the visible list
+                  accurately regardless of how many items render. */}
+              <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>
+                );
+              })}
+              {overflow.length > 0 && (
+                <RailProjectMenu
+                  projects={overflow}
+                  label={`+${overflow.length}`}
+                  tooltip={t("nav.more_projects", { count: overflow.length })}
+                  header={t("nav.more_projects", { count: overflow.length })}
+                  active={overflowHasActive}
+                  testId="nav-projects-overflow"
+                  onSelect={onSelect}
+                  isActive={isActive}
+                />
+              )}
+            </>
+          )}
           <ProjectAvatar
-            key={p.id}
-            label={label}
-            testId={`project-avatar-${p.id}`}
-            title={`${label} — ${p.path}`}
-            active={isActive(href)}
-            onClick={() => onSelect(href)}
+            label={t("nav.add_project")}
+            isAdd
+            testId="nav-add-project"
+            icon={<Plus size={18} />}
+            active={false}
+            onClick={() => onSelect("/?action=add-project")}
+            title={t("nav.add_project")}
           />
-        );
-      })}
-      <ProjectAvatar
-        label={t("nav.add_project")}
-        isAdd
-        testId="nav-add-project"
-        icon={<Plus size={18} />}
-        active={false}
-        onClick={() => onSelect("/?action=add-project")}
-        title={t("nav.add_project")}
-      />
+        </div>
+      </div>
-      <div className="flex-1" />
       <ProjectAvatar
         label={t("nav.settings")}
         isSettings
@@ -130,7 +326,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
           rel="noopener noreferrer"
           data-testid="nav-docs"
           aria-label={t("settings_ui.documentation")}
-          className="mt-1 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 border border-border/60 bg-muted/30 text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
         >
           <BookOpen size={18} />
         </a>
@@ -143,7 +339,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
           onClick={onOpenRoby}
           data-testid="nav-roby"
           aria-label={t("superagent.talk", { persona })}
-          className="mt-1 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 border border-border/60 bg-muted/30 text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
         >
           <Bot size={18} />
         </button>

package/src/interfaces/web/src/i18n/en.ts CHANGED Viewed

@@ -71,6 +71,10 @@ export const en = {
     settings:     "Settings",
     project:      "Project",
     add_project:  "Add project",
+    all_projects:      "All projects",
+    more_projects:     "{count} more",
+    collapse_projects: "Hide projects",
+    expand_projects:   "Show projects",
     modules: {
       voice:   "Voices",
       desktop: "Desktop",

package/src/interfaces/web/src/i18n/es.ts CHANGED Viewed

@@ -72,6 +72,10 @@ export const es = {
     settings:     "Settings",
     project:      "Proyecto",
     add_project:  "Agregar proyecto",
+    all_projects:      "Todos los proyectos",
+    more_projects:     "{count} más",
+    collapse_projects: "Ocultar proyectos",
+    expand_projects:   "Mostrar proyectos",
     modules: {
       voice:   "Voces",
       desktop: "Escritorio",