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

@agentprojectcontext/apx 1.32.0 → 1.32.2

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 (219) 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-BkybwwRn.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-34U_Mp1M.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": {

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, 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,36 @@ function TopBar({
             ? t("base.subtitle")
             : project ? `${projectKindLabel(project.kind)} · ${project.path}` : "")
         : "";
+  const nav = useNavCollapseCtx();
   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>
       <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

@@ -48,7 +48,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] : "";
+}

package/src/interfaces/web/src/components/code/CodeProjectPicker.tsx CHANGED Viewed

@@ -26,7 +26,7 @@ export function CodeProjectPicker({ projects, value, onChange, disabled }: Props
   });
   return (
-    <div className="w-60" data-testid="code-project-select">
+    <div className="w-full" data-testid="code-project-select">
       <UiSelect
         value={value}
         onChange={onChange}

package/src/interfaces/web/src/components/code/CodeSidePanel.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Gauge, GitCompare, Package } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { t } from "../../i18n";
@@ -14,28 +15,42 @@ interface Props {
   onRefreshChanges: () => void;
 }
-// Right-hand panel: Context (token metrics), Changes (diffs vs the session's
-// git baseline), and Artifacts (managed files under <project>/artifacts/).
+const TABS = [
+  { value: "context", icon: Gauge, label: "tab_context" },
+  { value: "changes", icon: GitCompare, label: "tab_changes" },
+  { value: "artifacts", icon: Package, label: "tab_artifacts" },
+] as const;
 export function CodeSidePanel({ pid, turns, changes, changesLoading, onRefreshChanges }: Props) {
+  const [active, setActive] = useState<string>("context");
   const changeCount = changes?.files.length || 0;
   return (
-    <Tabs defaultValue="context" className="flex h-full flex-col gap-0" data-testid="code-side-panel">
-      <div className="shrink-0 border-b border-border px-3 py-2">
+    <Tabs value={active} onValueChange={setActive} className="flex h-full flex-col gap-0" data-testid="code-side-panel">
+      <div className="shrink-0 border-b border-border px-2 py-2">
         <TabsList variant="line" className="w-full">
-          <TabsTrigger value="context" className="flex-1">
-            <Gauge className="size-3.5" /> {t("code_module.tab_context")}
-          </TabsTrigger>
-          <TabsTrigger value="changes" className="flex-1">
-            <GitCompare className="size-3.5" /> {t("code_module.tab_changes")}
-            {changeCount > 0 && (
-              <span className="ml-1 rounded-full bg-muted px-1.5 text-[10px] text-muted-foreground">
-                {changeCount}
-              </span>
-            )}
-          </TabsTrigger>
-          <TabsTrigger value="artifacts" className="flex-1">
-            <Package className="size-3.5" /> {t("code_module.tab_artifacts")}
-          </TabsTrigger>
+          {TABS.map(({ value, icon: Icon, label }) => {
+            const isActive = active === value;
+            const fullLabel = t(`code_module.${label}` as never);
+            return (
+              <TabsTrigger
+                key={value}
+                value={value}
+                title={fullLabel}
+                className={isActive ? "flex-1 min-w-0" : "w-8 shrink-0"}
+              >
+                <Icon className="size-3.5 shrink-0" />
+                {isActive && (
+                  <span className="truncate text-xs">{fullLabel}</span>
+                )}
+                {value === "changes" && changeCount > 0 && (
+                  <span className="ml-0.5 rounded-full bg-muted px-1 text-[10px] text-muted-foreground leading-none py-0.5">
+                    {changeCount}
+                  </span>
+                )}
+              </TabsTrigger>
+            );
+          })}
         </TabsList>
       </div>
       <TabsContent value="context" className="min-h-0 flex-1 overflow-y-auto">

package/src/interfaces/web/src/components/common/TabLayout.tsx CHANGED Viewed

@@ -3,8 +3,9 @@
 // collapse toggle (and optional page actions) followed by the routed content.
 // The page title/subtitle live in the top breadcrumb now, not here.
 import { type ReactNode } from "react";
-import { TabNav, NavToggle, type TabSection } from "./TabNav";
+import { TabNav, type TabSection } from "./TabNav";
 import { cn } from "../../lib/cn";
+import { useRegisterNavCollapse } from "../../hooks/useNavCollapseCtx";
 interface Props {
   sections: TabSection[];
@@ -29,14 +30,17 @@ export function TabLayout({
   testId,
   children,
 }: Props) {
+  useRegisterNavCollapse(collapsed, onToggleCollapse);
   return (
     <div className="flex h-full">
       <TabNav sections={sections} active={active} onChange={onChange} collapsed={collapsed} />
       <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
-        <div className="flex items-center justify-between px-6 pt-3">
-          <NavToggle collapsed={collapsed} onToggle={onToggleCollapse} />
-          {actions ? <div className="flex gap-2">{actions}</div> : null}
-        </div>
+        {actions ? (
+          <div className="flex items-center justify-end gap-2 px-6 pt-3">
+            {actions}
+          </div>
+        ) : null}
         <div className={cn(contentClassName)} data-testid={testId}>
           {children}
         </div>

package/src/interfaces/web/src/components/common/TabNav.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 // Left-rail tab nav used inside Settings + per-project screens. Mirrors
 // the panda.project sectioned-nav pattern: optional section title above
 // each group, icon + label rows, active state in the section's tone.
-import { useState, useEffect, Fragment, type ElementType } from "react";
+import { useState, useEffect, useCallback, Fragment, type ElementType } from "react";
 import { PanelLeft } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Tip } from "../ui/tip";
@@ -34,12 +34,12 @@ export function useNavCollapse(storageKey: string) {
     try { setCollapsed(localStorage.getItem(storageKey) === "true"); } catch { /* ignore */ }
   }, [storageKey]);
-  const toggle = () =>
+  const toggle = useCallback(() =>
     setCollapsed((v) => {
       const next = !v;
       try { localStorage.setItem(storageKey, String(next)); } catch { /* quota */ }
       return next;
-    });
+    }), [storageKey]);
   return { collapsed, toggle };
 }

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

@@ -9,6 +9,7 @@ import { ProjectAvatar } from "./ProjectAvatar";
 import { Tip } from "../ui/tip";
 import { useProjects } from "../../hooks/useProjects";
 import { t } from "../../i18n";
+import { usePersonaName } from "../../hooks/usePersonaName";
 interface Props {
   onSelect: (href: string) => void;
@@ -37,6 +38,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
   const { projects, isLoading } = useProjects();
   const location = useLocation();
   const MODULES = buildModules();
+  const persona = usePersonaName();
   const isActive = (href: string) =>
     location.pathname === href || location.pathname.startsWith(`${href}/`);
@@ -122,12 +124,12 @@ export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
       />
       {/* Roby launcher — subtle (not a loud floating bubble), pinned under the
           gear so it doesn't overlap the chat composer. */}
-      <Tip content={t("roby.talk")} side="right">
+      <Tip content={t("superagent.talk", { persona })} side="right">
         <button
           type="button"
           onClick={onOpenRoby}
           data-testid="nav-roby"
-          aria-label={t("roby.talk")}
+          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"
         >
           <Bot size={18} />

package/src/interfaces/web/src/hooks/useChat.ts CHANGED Viewed

@@ -49,7 +49,7 @@ export interface UseChatResult {
   streaming: boolean;
 }
-/** Concatenate the text parts of a message (for clipboard / history). */
+/** Concatenate the text parts of a message (for clipboard). */
 export function textOf(msg: ChatMsg): string {
   return msg.parts
     .filter((p): p is TextPart => p.kind === "text")
@@ -58,6 +58,51 @@ export function textOf(msg: ChatMsg): string {
     .trim();
 }
+/** Compact line summarising an ask_questions tool call. Surfaced into the
+ *  history string we send to the super-agent so the model can see it ALREADY
+ *  asked and not re-ask the same questions on the next turn. Without this,
+ *  ask_questions calls are invisible in history and the model loops. */
+function summarizeAskQuestions(part: ToolPart): string | null {
+  const raw = (part.args as { questions?: unknown } | undefined)?.questions;
+  if (!Array.isArray(raw) || raw.length === 0) return null;
+  const lines = raw
+    .map((q) => {
+      if (typeof q === "string") return `- ${q}`;
+      if (!q || typeof q !== "object") return null;
+      const qq = q as { question?: unknown; options?: unknown };
+      if (typeof qq.question !== "string") return null;
+      const opts = Array.isArray(qq.options) ? qq.options : [];
+      const optStr = opts
+        .map((o) =>
+          typeof o === "string"
+            ? o
+            : o && typeof o === "object" && typeof (o as { label?: unknown }).label === "string"
+              ? ((o as { label: string }).label)
+              : "",
+        )
+        .filter((s) => s)
+        .join(", ");
+      return optStr ? `- ${qq.question} (opciones: ${optStr})` : `- ${qq.question}`;
+    })
+    .filter((s): s is string => !!s);
+  if (lines.length === 0) return null;
+  return `[ask_questions]\n${lines.join("\n")}`;
+}
+/** History view of a message — text parts plus ask_questions summaries.
+ *  Used when sending `previousMessages` to the super-agent. */
+export function historyTextOf(msg: ChatMsg): string {
+  const chunks: string[] = [];
+  for (const p of msg.parts) {
+    if (p.kind === "text" && p.text) chunks.push(p.text);
+    else if (p.kind === "tool" && p.tool === "ask_questions") {
+      const s = summarizeAskQuestions(p);
+      if (s) chunks.push(s);
+    }
+  }
+  return chunks.join("\n\n").trim();
+}
 const userPart = (text: string): ChatPart[] => [{ kind: "text", text }];
 function isErrorResult(result: unknown): boolean {
@@ -202,7 +247,7 @@ export function useChat(pid: string, onError?: (msg: string) => void): UseChatRe
       const nowIso = () => new Date().toISOString();
       const history: ConversationMessage[] = msgs.map((m) => ({
         role: m.role,
-        content: textOf(m),
+        content: historyTextOf(m),
       }));
       setMsgs((curr) => [

package/src/interfaces/web/src/hooks/useNavCollapseCtx.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import { createContext, useContext, useState, useEffect, type ReactNode } from "react";
+// ── Nav collapse ─────────────────────────────────────────────────────────────
+type CollapseState = { collapsed: boolean; toggle: () => void } | null;
+const CollapseReadCtx = createContext<CollapseState>(null);
+const CollapseSetCtx = createContext<((s: CollapseState) => void) | null>(null);
+// ── Page label (extra breadcrumb segment pushed by leaf screens) ──────────────
+const LabelReadCtx = createContext<string>("");
+const LabelSetCtx = createContext<((s: string) => void) | null>(null);
+// ── Combined provider (one wrapper in Shell) ──────────────────────────────────
+export function NavCollapseProvider({ children }: { children: ReactNode }) {
+  const [collapse, setCollapse] = useState<CollapseState>(null);
+  const [label, setLabel] = useState("");
+  return (
+    <CollapseSetCtx.Provider value={setCollapse}>
+      <CollapseReadCtx.Provider value={collapse}>
+        <LabelSetCtx.Provider value={setLabel}>
+          <LabelReadCtx.Provider value={label}>
+            {children}
+          </LabelReadCtx.Provider>
+        </LabelSetCtx.Provider>
+      </CollapseReadCtx.Provider>
+    </CollapseSetCtx.Provider>
+  );
+}
+// ── Nav collapse hooks ────────────────────────────────────────────────────────
+export function useNavCollapseCtx() {
+  return useContext(CollapseReadCtx);
+}
+export function useRegisterNavCollapse(collapsed: boolean, toggle: () => void) {
+  const setState = useContext(CollapseSetCtx);
+  useEffect(() => {
+    setState?.({ collapsed, toggle });
+    return () => setState?.(null);
+  }, [collapsed, toggle, setState]);
+}
+// ── Page label hooks ──────────────────────────────────────────────────────────
+export function usePageLabel() {
+  return useContext(LabelReadCtx);
+}
+export function useSetPageLabel(label: string) {
+  const set = useContext(LabelSetCtx);
+  useEffect(() => {
+    set?.(label);
+    return () => set?.("");
+  }, [label, set]);
+}

package/src/interfaces/web/src/hooks/usePersonaName.ts ADDED Viewed

@@ -0,0 +1,11 @@
+// Resolve the super-agent display name (the persona shown to the user).
+// Reads identity.json via useIdentity(); falls back to "APX" while loading
+// or when identity is empty. UI strings should always interpolate this hook
+// instead of hardcoding a persona name (it would otherwise drift from what
+// the daemon-side resolveAgentName() reports across CLI / Telegram / etc.).
+import { useIdentity } from "./useIdentity";
+export function usePersonaName(): string {
+  const { identity } = useIdentity();
+  return (identity as { agent_name?: string })?.agent_name?.trim() || "APX";
+}