@agentprojectcontext/apx 1.32.0 → 1.33.0

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

@@ -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,15 +30,18 @@ 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>
-        <div className={cn(contentClassName)} data-testid={testId}>
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        {actions ? (
+          <div className="flex shrink-0 items-center justify-end gap-2 px-6 pt-3">
+            {actions}
+          </div>
+        ) : null}
+        <div className={cn("flex-1 min-h-0 overflow-y-auto", contentClassName)} data-testid={testId}>
           {children}
         </div>
       </div>

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

@@ -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

@@ -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/components/ui/chat-input.tsx

@@ -49,12 +49,23 @@ export function ChatInput({
   React.useLayoutEffect(() => {
     const el = ref.current
     if (!el) return
-    el.style.height = "auto"
-    const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20
-    const min = lineHeight * minRows
-    const max = lineHeight * maxRows
-    el.style.height = `${Math.min(Math.max(el.scrollHeight, min), max)}px`
-    el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden"
+    const resize = () => {
+      el.style.height = "auto"
+      // Force a reflow before reading scrollHeight so the "auto" reset takes
+      // effect — without this, scrollHeight can return the stale prior height.
+      void el.offsetHeight
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20
+      const min = lineHeight * minRows
+      const max = lineHeight * maxRows
+      el.style.height = `${Math.min(Math.max(el.scrollHeight, min), max)}px`
+      el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden"
+    }
+    resize()
+    // Re-run after the next paint to catch cases where the parent layout
+    // wasn't ready on the initial sync pass (e.g. inside a resizable panel
+    // that's just been mounted).
+    const raf = requestAnimationFrame(resize)
+    return () => cancelAnimationFrame(raf)
   }, [value, minRows, maxRows])
 
   const canSend = value.trim().length > 0 && !disabled

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

@@ -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) => [
@@ -218,6 +263,7 @@ export function useChat(pid: string, onError?: (msg: string) => void): UseChatRe
           const out = await Agents.chat(pid, opts.agentSlug, {
             prompt: trimmed,
             conversation_id: convoRef.current,
+            model: opts.model || undefined,
           });
           convoRef.current = out.conversation_id;
           patchLast((m) => ({

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

@@ -0,0 +1,83 @@
+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);
+
+// ── Page actions (buttons screens can inject into the TopBar) ─────────────────
+
+const ActionsReadCtx = createContext<ReactNode>(null);
+const ActionsSetCtx = createContext<((a: ReactNode) => 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("");
+  const [actions, setActions] = useState<ReactNode>(null);
+  return (
+    <CollapseSetCtx.Provider value={setCollapse}>
+      <CollapseReadCtx.Provider value={collapse}>
+        <LabelSetCtx.Provider value={setLabel}>
+          <LabelReadCtx.Provider value={label}>
+            <ActionsSetCtx.Provider value={setActions}>
+              <ActionsReadCtx.Provider value={actions}>
+                {children}
+              </ActionsReadCtx.Provider>
+            </ActionsSetCtx.Provider>
+          </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]);
+}
+
+// ── Page actions hooks ────────────────────────────────────────────────────────
+
+export function usePageActions() {
+  return useContext(ActionsReadCtx);
+}
+
+export function useSetPageActions(actions: ReactNode) {
+  const set = useContext(ActionsSetCtx);
+  useEffect(() => {
+    set?.(actions);
+    return () => set?.(null);
+  }, [actions, set]);
+}

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

@@ -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";
+}

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

@@ -286,8 +286,8 @@ export const en = {
     chat: {
       title:       "Chat with agent",
       subtitle:    "Direct conversations with project agents. The super-agent does not intervene.",
-      roby_title:  "Chat with Roby",
-      roby_subtitle: "Chat with Roby — the APX super-agent. Can use tools (projects, tasks, mcps, agents).",
+      superagent_title:  "Chat with {persona}",
+      superagent_subtitle: "Chat with {persona} — the APX super-agent. Can use tools (projects, tasks, mcps, agents).",
       empty:       "Send a message to start the conversation.",
       placeholder: "Type something and press enter to send (shift+enter = new line)",
       send:        "Send",
@@ -710,13 +710,13 @@ export const en = {
     delete_btn:  "Delete",
   },
 
-  roby: {
-    title:          "Roby",
+  superagent: {
+    title:          "{persona}",
     badge:          "super-agent · APX",
     desc:           "Quick chat with your super-agent. Has access to tools (projects, tasks, mcps, agents); for a longer persistent thread, open Chats.",
-    empty:          "Send Roby a message to get started.",
-    thinking:       "Roby is thinking…",
-    talk:           "Talk to Roby",
+    empty:          "Send {persona} a message to get started.",
+    thinking:       "{persona} is thinking…",
+    talk:           "Talk to {persona}",
     new_chat:       "New chat",
     placeholder:    "Type and press enter to send (shift+enter = new line)…",
   },

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

@@ -286,9 +286,9 @@ export const es = {
 
     chat: {
       title:       "Chat con agente",
-      subtitle:    "Conversaciones directas con agentes del proyecto. El super-agent no interviene.",
-      roby_title:  "Chat con Roby",
-      roby_subtitle: "Chat con Roby — el super-agente APX. Puede usar tools (proyectos, tasks, mcps, agentes).",
+      subtitle:    "Chat directo con el agente del proyecto.",
+      superagent_title:  "Chat con {persona}",
+      superagent_subtitle: "Chat con {persona} — el super-agente APX. Puede usar tools (proyectos, tasks, mcps, agentes).",
       empty:       "Mandá un mensaje para arrancar la conversación.",
       placeholder: "Escribí algo y enter para enviar (shift+enter = nueva línea)",
       send:        "Enviar",
@@ -711,13 +711,13 @@ export const es = {
     delete_btn:  "Borrar",
   },
 
-  roby: {
-    title:          "Roby",
+  superagent: {
+    title:          "{persona}",
     badge:          "super-agent · APX",
     desc:           "Conversación rápida con tu super-agente. Tiene acceso a tools (proyectos, tasks, mcps, agentes); para un hilo más largo y persistente, abrí Chats.",
-    empty:          "Mandale un mensaje a Roby para arrancar.",
-    thinking:       "Roby está pensando…",
-    talk:           "Hablar con Roby",
+    empty:          "Mandale un mensaje a {persona} para arrancar.",
+    thinking:       "{persona} está pensando…",
+    talk:           "Hablar con {persona}",
     new_chat:       "Nuevo chat",
     placeholder:    "Escribí y enter para enviar (shift+enter = nueva línea)…",
   },

package/src/interfaces/web/src/lib/api/agents.ts

@@ -10,7 +10,7 @@ export const Agents = {
     http.patch<AgentEntry>(`/projects/${pid}/agents/${encodeURIComponent(slug)}`, body),
   remove: (pid: string, slug: string) =>
     http.del<{ ok: boolean }>(`/projects/${pid}/agents/${encodeURIComponent(slug)}`),
-  chat: (pid: string, slug: string, body: { prompt: string; conversation_id?: string }) =>
+  chat: (pid: string, slug: string, body: { prompt: string; conversation_id?: string; model?: string }) =>
     http.post<{ conversation_id: string; text: string; usage?: unknown; engine: string }>(
       `/projects/${pid}/agents/${encodeURIComponent(slug)}/chat`,
       body,

package/src/interfaces/web/src/lib/api/artifacts.ts

@@ -44,4 +44,14 @@ export const Artifacts = {
     http.del<void>(
       `/projects/${encodeURIComponent(pid)}/artifacts/${encodeURIComponent(name)}`,
     ),
+  write: (pid: string, name: string, content: string) =>
+    http.patch<{ ok: boolean; name: string }>(
+      `/projects/${encodeURIComponent(pid)}/artifacts/${encodeURIComponent(name)}`,
+      { content },
+    ),
+  rename: (pid: string, name: string, newName: string) =>
+    http.patch<{ ok: boolean; name: string }>(
+      `/projects/${encodeURIComponent(pid)}/artifacts/${encodeURIComponent(name)}`,
+      { newName },
+    ),
 };

package/src/interfaces/web/src/lib/api/code.ts

@@ -39,6 +39,7 @@ export interface CodeSessionRow {
   title: string;
   mode: CodeMode;
   model: string | null;
+  agentSlug: string | null;
   createdAt: string;
   updatedAt: string;
   messageCount: number;
@@ -53,6 +54,7 @@ export interface CodeSession {
   createdAt: string;
   updatedAt: string;
   model: string | null;
+  agentSlug: string | null;
   mode: CodeMode;
   git: { baselineCommit: string | null; baselineTree: string } | null;
   messages: CodeTurn[];
@@ -89,13 +91,13 @@ export const Code = {
 
     create: (
       pid: string | number,
-      body: { title?: string; model?: string | null; mode?: CodeMode } = {},
+      body: { title?: string; model?: string | null; mode?: CodeMode; agentSlug?: string | null } = {},
     ) => http.post<CodeSession>(base(pid), body),
 
     update: (
       pid: string | number,
       sid: string,
-      patch: { title?: string; model?: string | null; mode?: CodeMode },
+      patch: { title?: string; model?: string | null; mode?: CodeMode; agentSlug?: string | null },
     ) => http.patch<CodeSession>(`${base(pid)}/${sid}`, patch),
 
     remove: (pid: string | number, sid: string) =>

package/src/interfaces/web/src/lib/api/skills.ts

@@ -0,0 +1,25 @@
+import { http } from "../http";
+
+export type SkillEntry = {
+  slug: string;
+  source: "bundled" | "user" | "project" | string;
+  description: string;
+};
+
+export type SkillsList = {
+  count: number;
+  skills: SkillEntry[];
+};
+
+export const Skills = {
+  /**
+   * List installed skills (bundled + user + optional project-scoped). The
+   * description is already condensed for one-line rendering.
+   */
+  list: (projectPath?: string) =>
+    http.get<SkillsList>(
+      projectPath
+        ? `/skills?project_path=${encodeURIComponent(projectPath)}`
+        : "/skills",
+    ),
+};

package/src/interfaces/web/src/lib/api.ts

@@ -22,6 +22,7 @@ export * from "./api/voice";
 export * from "./api/deck";
 export * from "./api/code";
 export * from "./api/artifacts";
+export * from "./api/skills";
 
 // Re-export the daemon types so older imports of "../lib/api" still work.
 export type {