@agentprojectcontext/apx 1.32.2 → 1.33.1

package/src/interfaces/web/src/components/code/CodeTerminal.tsx

@@ -0,0 +1,140 @@
+import { useState, useRef, useEffect } from "react";
+import { Terminal as TerminalIcon, Eraser, X } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Tip } from "../ui/tip";
+import { http } from "../../lib/http";
+
+interface Line {
+  type: "cmd" | "out" | "err";
+  text: string;
+}
+
+export function CodeTerminal({
+  pid,
+  className,
+  initCmd,
+  onClose,
+}: {
+  pid: string;
+  className?: string;
+  initCmd?: string;
+  /** Click handler for the header × button. Closes the terminal panel. */
+  onClose?: () => void;
+}) {
+  const [lines, setLines] = useState<Line[]>([]);
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [history, setHistory] = useState<string[]>([]);
+  const [histIdx, setHistIdx] = useState(-1);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [lines]);
+
+  // Pre-fill input when a command is pushed from parent (e.g. artifact run).
+  useEffect(() => {
+    if (!initCmd) return;
+    setInput(initCmd);
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, [initCmd]);
+
+  const run = async (cmd: string) => {
+    const trimmed = cmd.trim();
+    if (!trimmed) return;
+    setHistory((h) => [trimmed, ...h.slice(0, 49)]);
+    setHistIdx(-1);
+    setLines((l) => [...l, { type: "cmd", text: `$ ${trimmed}` }]);
+    setBusy(true);
+    try {
+      const r = await http.post<{ ok: boolean; stdout: string; stderr: string; exit_code: number; cwd: string }>(
+        "/run",
+        { cmd: trimmed, project: pid },
+      );
+      if (r.stdout) setLines((l) => [...l, { type: "out", text: r.stdout }]);
+      if (r.stderr) setLines((l) => [...l, { type: "err", text: r.stderr }]);
+    } catch (e) {
+      setLines((l) => [...l, { type: "err", text: String((e as Error).message) }]);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      void run(input);
+      setInput("");
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const next = Math.min(histIdx + 1, history.length - 1);
+      setHistIdx(next);
+      setInput(history[next] ?? "");
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = Math.max(histIdx - 1, -1);
+      setHistIdx(next);
+      setInput(next === -1 ? "" : (history[next] ?? ""));
+    }
+  };
+
+  return (
+    <div className={cn("flex h-full min-h-0 flex-col bg-card/60", className)} data-testid="code-terminal">
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1">
+        <TerminalIcon className="size-3 text-muted-foreground" />
+        <span className="flex-1 text-[11px] text-muted-foreground">Terminal</span>
+        <Tip content="Limpiar">
+          <button
+            type="button"
+            onClick={() => setLines([])}
+            className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <Eraser className="size-3" />
+          </button>
+        </Tip>
+        <Tip content="Cerrar terminal">
+          <button
+            type="button"
+            onClick={() => onClose?.()}
+            className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <X className="size-3" />
+          </button>
+        </Tip>
+      </div>
+      <div
+        className="min-h-0 flex-1 overflow-y-auto px-3 py-1 font-mono text-[11px] leading-snug cursor-text"
+        onClick={() => inputRef.current?.focus()}
+      >
+        {lines.map((l, i) => (
+          <div
+            key={i}
+            className={cn(
+              "whitespace-pre-wrap break-all",
+              l.type === "cmd" && "text-emerald-400",
+              l.type === "err" && "text-rose-400",
+              l.type === "out" && "text-foreground/90",
+            )}
+          >
+            {l.text}
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+      <div className="flex shrink-0 items-center border-t border-border px-3 py-1">
+        <span className="mr-2 text-[11px] text-emerald-400 font-mono">$</span>
+        <input
+          ref={inputRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={onKey}
+          disabled={busy}
+          placeholder={busy ? "ejecutando…" : "comando…"}
+          className="flex-1 bg-transparent font-mono text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 disabled:opacity-50"
+          spellCheck={false}
+          autoComplete="off"
+        />
+      </div>
+    </div>
+  );
+}

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

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

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

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

@@ -12,17 +12,27 @@ const CollapseSetCtx = createContext<((s: CollapseState) => void) | null>(null);
 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}>
-            {children}
+            <ActionsSetCtx.Provider value={setActions}>
+              <ActionsReadCtx.Provider value={actions}>
+                {children}
+              </ActionsReadCtx.Provider>
+            </ActionsSetCtx.Provider>
           </LabelReadCtx.Provider>
         </LabelSetCtx.Provider>
       </CollapseReadCtx.Provider>
@@ -57,3 +67,17 @@ export function useSetPageLabel(label: string) {
     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/i18n/es.ts

@@ -286,7 +286,7 @@ export const es = {
 
     chat: {
       title:       "Chat con agente",
-      subtitle:    "Conversaciones directas con agentes del proyecto. El super-agent no interviene.",
+      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.",

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) =>