npm - @agentprojectcontext/apx - Versions diffs - 1.32.0 → 1.33.0 - Mend

@agentprojectcontext/apx 1.32.0 → 1.33.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 (230) 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-63P_ji1a.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DLWy6dYz.css">
+    <script type="module" crossorigin src="/assets/index-DWsE_8Nz.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-7dVT2O1S.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/package-lock.json CHANGED Viewed

@@ -2077,9 +2077,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "25.9.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.2.tgz",
-      "integrity": "sha512-G05zqtJhcDLb8uslf5EjCxXg9G1KQxiV8OS0R26IC//Eoyitzqe8z37I7cqvnZlrlSfgocQRfSn/AHBZJJFyGw==",
+      "version": "25.9.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
+      "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -2236,9 +2236,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001797",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001797.tgz",
-      "integrity": "sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==",
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
       "dev": true,
       "funding": [
         {

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

@@ -17,6 +17,8 @@ import { TooltipProvider } from "./components/ui/tooltip";
 import { useTheme } from "./hooks/useTheme";
 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";
 export function App() {
@@ -61,28 +63,30 @@ function Shell() {
   };
   return (
-    <div className="flex h-screen w-screen overflow-hidden bg-background text-foreground" data-testid="app-shell">
-      <ProjectSidebar onSelect={(href) => navigate(href)} onOpenRoby={() => setRobyOpen(true)} />
-      <main className="m-2 ml-0 flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm">
-        <TopBar onToggleTheme={toggle} isDark={theme === "dark"} pathname={location.pathname} />
-        <div className="flex-1 overflow-y-auto">
-          <Routes>
-            <Route path="/"           element={<ApxAdminScreen />} />
-            <Route path="/settings/*" element={<SettingsScreen />} />
-            <Route path="/m/voice/*"   element={<VoiceScreen />} />
-            <Route path="/m/desktop/*" element={<DesktopScreen />} />
-            <Route path="/m/deck/*"   element={<DeckScreen />} />
-            <Route path="/m/code/*"   element={<CodeScreen />} />
-            <Route path="/p/:pid/*"   element={<ProjectScreen />} />
-            <Route path="*"           element={<NotFound />} />
-          </Routes>
-        </div>
-      </main>
-      <AddProjectDialog open={addOpen} onClose={closeAdd} />
-      {/* Roby (the super-agent) chat sheet. Launcher lives in the rail (below
-          Settings); open state is owned here so the rail can trigger it. */}
-      <RobyBubble open={robyOpen} onOpenChange={setRobyOpen} />
-    </div>
+    <NavCollapseProvider>
+      <div className="flex h-screen w-screen overflow-hidden bg-background text-foreground" data-testid="app-shell">
+        <ProjectSidebar onSelect={(href) => navigate(href)} onOpenRoby={() => setRobyOpen(true)} />
+        <main className="m-2 ml-0 flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+          <TopBar onToggleTheme={toggle} isDark={theme === "dark"} pathname={location.pathname} />
+          <div className="flex-1 overflow-y-auto">
+            <Routes>
+              <Route path="/"           element={<ApxAdminScreen />} />
+              <Route path="/settings/*" element={<SettingsScreen />} />
+              <Route path="/m/voice/*"   element={<VoiceScreen />} />
+              <Route path="/m/desktop/*" element={<DesktopScreen />} />
+              <Route path="/m/deck/*"   element={<DeckScreen />} />
+              <Route path="/m/code/*"   element={<CodeScreen />} />
+              <Route path="/p/:pid/*"   element={<ProjectScreen />} />
+              <Route path="*"           element={<NotFound />} />
+            </Routes>
+          </div>
+        </main>
+        <AddProjectDialog open={addOpen} onClose={closeAdd} />
+        {/* Roby (the super-agent) chat sheet. Launcher lives in the rail (below
+            Settings); open state is owned here so the rail can trigger it. */}
+        <RobyBubble open={robyOpen} onOpenChange={setRobyOpen} />
+      </div>
+    </NavCollapseProvider>
   );
 }
@@ -96,6 +100,7 @@ function TopBar({
   pathname: string;
 }) {
   const { projects } = useProjects();
+  const pageLabel = usePageLabel();
   const parts = pathname.split("/").filter(Boolean);
   const project = parts[0] === "p" ? projects.find((p) => String(p.id) === parts[1]) : undefined;
   const section = parts[0] === "settings"
@@ -109,11 +114,13 @@ function TopBar({
     ? t("topbar.breadcrumb_root")
     : parts[0] === "settings"
       ? [t("topbar.breadcrumb_root"), t("nav.settings"), section].filter(Boolean).join(" › ")
-      : parts[0] === "p"
-        ? (isDefault
-            ? [t("topbar.breadcrumb_root"), t("topbar.breadcrumb_base"), section].filter(Boolean).join(" › ")
-            : [t("topbar.breadcrumb_root"), t("topbar.breadcrumb_projects"), projName, section].filter(Boolean).join(" › "))
-        : t("topbar.breadcrumb_root");
+      : parts[0] === "m"
+        ? [t("topbar.breadcrumb_root"), moduleLabel(parts[1]), pageLabel].filter(Boolean).join(" › ")
+        : parts[0] === "p"
+          ? (isDefault
+              ? [t("topbar.breadcrumb_root"), t("topbar.breadcrumb_base"), section].filter(Boolean).join(" › ")
+              : [t("topbar.breadcrumb_root"), t("topbar.breadcrumb_projects"), projName, section].filter(Boolean).join(" › "))
+          : t("topbar.breadcrumb_root");
   const subtitle = pathname === "/"
     ? ""
     : parts[0] === "settings"
@@ -123,24 +130,38 @@ function TopBar({
             ? t("base.subtitle")
             : project ? `${projectKindLabel(project.kind)} · ${project.path}` : "")
         : "";
+  const nav = useNavCollapseCtx();
+  const pageActions = usePageActions();
   return (
-    <header className="flex h-11 shrink-0 items-center justify-between gap-4 px-4">
-      <span className="min-w-0 truncate text-xs tracking-wide text-muted-fg">
+    <header className="flex h-10 shrink-0 items-center gap-2 border-b border-border/50 px-3">
+      {nav && <NavToggle collapsed={nav.collapsed} onToggle={nav.toggle} />}
+      <span className="min-w-0 flex-1 truncate text-[11px] tracking-wide text-muted-fg">
         {crumb}
-        {subtitle && <span className="text-muted-fg/60"> · {subtitle}</span>}
+        {subtitle && <span className="text-muted-fg/50"> · {subtitle}</span>}
       </span>
+      {pageActions}
       <button
         type="button"
         onClick={onToggleTheme}
         title={isDark ? t("topbar.light") : t("topbar.dark")}
-        className="rounded-md p-1.5 text-muted-fg hover:bg-accent hover:text-accent-fg"
+        className="shrink-0 rounded-md p-1.5 text-muted-fg hover:bg-accent hover:text-accent-fg"
       >
-        {isDark ? <Sun size={16} /> : <Moon size={16} />}
+        {isDark ? <Sun size={14} /> : <Moon size={14} />}
       </button>
     </header>
   );
 }
+function moduleLabel(key?: string) {
+  switch (key) {
+    case "voice":   return t("nav.modules.voice");
+    case "desktop": return t("nav.modules.desktop");
+    case "deck":    return t("nav.modules.deck");
+    case "code":    return t("nav.modules.code");
+    default: return key || "";
+  }
+}
 function settingsLabel(key?: string) {
   switch (key) {
     case "super-agent": return t("settings.tabs.super_agent");

package/src/interfaces/web/src/components/RobyBubble.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "
 import { Button } from "./ui/button";
 import { ChatInput } from "./ui/chat-input";
 import { ModelPicker } from "./chat/ModelPicker";
+import { SkillPicker } from "./chat/SkillPicker";
 import { MessageList } from "./chat/MessageList";
 import { ContextBar } from "./chat/ContextBar";
 import { applyStreamEvent, textOf, type ChatMsg } from "../hooks/useChat";
@@ -22,6 +23,7 @@ import { SuperAgent } from "../lib/api";
 import { STORAGE } from "../constants";
 import { useToast } from "./Toast";
 import { t } from "../i18n";
+import { usePersonaName } from "../hooks/usePersonaName";
 import type { ChatStreamEvent, ConversationMessage } from "../types/daemon";
 // Load any persisted conversation, dropping half-finished (pending) turns.
@@ -44,6 +46,7 @@ export function RobyBubble({
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }) {
+  const persona = usePersonaName();
   const toast = useToast();
   const [msgs, setMsgs] = useState<ChatMsg[]>(loadStored);
   const [draft, setDraft] = useState("");
@@ -170,15 +173,15 @@ export function RobyBubble({
       >
         <SheetHeader className="pr-12">
           <SheetTitle className="flex items-center gap-2">
-            <Bot size={18} /> {t("roby.title")}
-            <span className="text-xs font-normal text-muted-fg">{t("roby.badge")}</span>
+            <Bot size={18} /> {t("superagent.title", { persona })}
+            <span className="text-xs font-normal text-muted-fg">{t("superagent.badge")}</span>
           </SheetTitle>
-          <SheetDescription>{t("roby.desc")}</SheetDescription>
+          <SheetDescription>{t("superagent.desc")}</SheetDescription>
         </SheetHeader>
         <div className="flex-1 overflow-y-auto">
           {msgs.length === 0 ? (
-            <p className="mt-6 text-center text-sm text-muted-fg">{t("roby.empty")}</p>
+            <p className="mt-6 text-center text-sm text-muted-fg">{t("superagent.empty", { persona })}</p>
           ) : (
             <MessageList msgs={msgs} onCopy={copyToClipboard} />
           )}
@@ -187,13 +190,16 @@ export function RobyBubble({
         <ContextBar msgs={msgs} />
         <div className="border-t border-border p-3">
+          <div className="mb-1.5">
+            <SkillPicker value={draft} onPick={(slug) => setDraft(`/${slug} `)} />
+          </div>
           <ChatInput
             value={draft}
             onValueChange={setDraft}
             onSubmit={() => void send()}
             onStop={stop}
             busy={busy}
-            placeholder={t("roby.placeholder")}
+            placeholder={t("superagent.placeholder")}
             footer={<ModelPicker value={model} onChange={setModel} disabled={busy} />}
           />
           <div className="mt-1.5 flex justify-end">
@@ -203,7 +209,7 @@ export function RobyBubble({
               onClick={newChat}
               disabled={busy || msgs.length === 0}
             >
-              <Plus className="size-3" /> {t("roby.new_chat")}
+              <Plus className="size-3" /> {t("superagent.new_chat")}
             </Button>
           </div>
         </div>

package/src/interfaces/web/src/components/UiSelect.tsx CHANGED Viewed

@@ -25,6 +25,7 @@ export function UiSelect({
   placeholder = "— elegir —",
   disabled,
   className,
+  showIcon = false,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -32,13 +33,22 @@ export function UiSelect({
   placeholder?: string;
   disabled?: boolean;
   className?: string;
+  showIcon?: boolean;
 }) {
   return (
     <Select value={value} onValueChange={(v) => onChange((v as string) ?? "")} disabled={disabled}>
       <SelectTrigger className={cn("h-9 w-full", className)}>
-        {/* Show the option's label in the trigger, not the raw value key. */}
         <SelectValue placeholder={placeholder}>
-          {(val) => options.find((o) => o.value === val)?.label ?? (val as string)}
+          {(val) => {
+            const opt = options.find((o) => o.value === val);
+            const Icon = showIcon ? opt?.icon : undefined;
+            return (
+              <span className="flex min-w-0 items-center gap-1.5">
+                {Icon && <Icon className="size-3.5 shrink-0" />}
+                <span className="truncate">{opt?.label ?? (val as string)}</span>
+              </span>
+            );
+          }}
         </SelectValue>
       </SelectTrigger>
       {/* side=bottom + alignItemWithTrigger=false → dropdown sits BELOW the
@@ -48,7 +58,7 @@ export function UiSelect({
         sideOffset={6}
         align="start"
         alignItemWithTrigger={false}
-        className="max-w-[min(20rem,var(--available-width))] p-1.5"
+        className="w-[var(--anchor-width)] p-1.5"
       >
         {options.map((o) => {
           const Icon = o.icon;

package/src/interfaces/web/src/components/chat/SkillPicker.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+import * as React from "react";
+import useSWR from "swr";
+import { Skills, type SkillEntry } from "../../lib/api";
+interface SkillPickerProps {
+  /**
+   * Current input value. The picker matches against the leading slug after
+   * the first "/". When the input does not start with "/" the picker hides
+   * itself entirely.
+   */
+  value: string;
+  /** Optional project path so project-scoped skills appear in the catalog. */
+  projectPath?: string;
+  /** Called with the chosen slug. Caller decides what to do (typically append `<slug> ` and refocus). */
+  onPick: (slug: string) => void;
+}
+/**
+ * Drop-up suggester for `/slug ...` shortcuts on the chat composer. Renders
+ * a small list of matching skills above the input when the user starts a
+ * message with "/". Keyboard navigation (↑/↓/Enter/Esc) is handled by the
+ * parent through `useSkillPickerKeyboard` (so the composer keeps owning the
+ * focused textarea).
+ */
+export function SkillPicker({ value, projectPath, onPick }: SkillPickerProps) {
+  const open = isSkillPickerOpen(value);
+  const query = open ? extractQuery(value) : "";
+  const { data } = useSWR(
+    open ? ["/skills", projectPath || ""] : null,
+    () => Skills.list(projectPath),
+  );
+  const list: SkillEntry[] = data?.skills || [];
+  const filtered = React.useMemo(() => {
+    const q = query.toLowerCase();
+    if (!q) return list.slice(0, 8);
+    return list
+      .filter((s) => s.slug.toLowerCase().includes(q))
+      .slice(0, 8);
+  }, [list, query]);
+  if (!open || filtered.length === 0) return null;
+  return (
+    <div className="rounded-xl border border-border bg-popover/95 text-sm shadow-md backdrop-blur">
+      <ul role="listbox" className="max-h-64 overflow-y-auto py-1">
+        {filtered.map((s) => (
+          <li key={s.slug}>
+            <button
+              type="button"
+              onClick={() => onPick(s.slug)}
+              className="flex w-full items-start gap-2 px-3 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
+            >
+              <code className="rounded bg-muted px-1.5 py-0.5 text-[11px]">/{s.slug}</code>
+              <span className="truncate text-xs text-muted-foreground">{s.description}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+      <div className="border-t border-border px-3 py-1.5 text-[10px] text-muted-foreground">
+        Type a name to filter · click to insert · the skill body will be loaded for this turn.
+      </div>
+    </div>
+  );
+}
+/** Trigger detection: the picker shows when the input starts with "/" + an identifier (no space yet). */
+export function isSkillPickerOpen(value: string): boolean {
+  const m = value.match(/^\s*\/([A-Za-z0-9_-]*)$/);
+  return Boolean(m);
+}
+function extractQuery(value: string): string {
+  const m = value.match(/^\s*\/([A-Za-z0-9_-]*)$/);
+  return m ? m[1] : "";
+}