@agentprojectcontext/apx 1.32.0 → 1.33.0

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

@@ -0,0 +1,212 @@
+import { useState, useCallback, useEffect } from "react";
+import { File, Folder, FolderOpen, ChevronRight, ChevronsUpDown, RefreshCw } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Empty, Spinner } from "../ui";
+import { Tip } from "../ui/tip";
+import { http } from "../../lib/http";
+
+interface FileNode {
+  name: string;
+  path: string; // relative path from project root
+  type: "file" | "dir";
+  children?: FileNode[];
+}
+
+function buildTree(paths: string[]): FileNode[] {
+  const root: FileNode[] = [];
+  for (const p of paths) {
+    const parts = p.split("/").filter(Boolean);
+    let level = root;
+    let cumPath = "";
+    for (let i = 0; i < parts.length; i++) {
+      cumPath = cumPath ? `${cumPath}/${parts[i]}` : parts[i];
+      const isLast = i === parts.length - 1;
+      let node = level.find((n) => n.name === parts[i]);
+      if (!node) {
+        node = { name: parts[i], path: cumPath, type: isLast ? "file" : "dir", children: isLast ? undefined : [] };
+        level.push(node);
+      }
+      if (!isLast) level = node.children!;
+    }
+  }
+  // Sort: dirs first, then files, both alphabetically
+  const sort = (nodes: FileNode[]): FileNode[] => {
+    nodes.forEach((n) => { if (n.children) n.children = sort(n.children); });
+    return nodes.sort((a, b) => {
+      if (a.type !== b.type) return a.type === "dir" ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+  };
+  return sort(root);
+}
+
+function TreeNode({
+  node,
+  depth,
+  onOpenFile,
+  openDirs,
+  toggleDir,
+}: {
+  node: FileNode;
+  depth: number;
+  onOpenFile: (path: string) => void;
+  openDirs: Set<string>;
+  toggleDir: (path: string) => void;
+}) {
+  const isDir = node.type === "dir";
+  const open = isDir && openDirs.has(node.path);
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => isDir ? toggleDir(node.path) : onOpenFile(node.path)}
+        style={{ paddingLeft: `${depth * 12 + 6}px` }}
+        className={cn(
+          "flex w-full items-center gap-1.5 py-0.5 pr-2 text-left text-[11px] rounded transition-colors",
+          "hover:bg-accent/40",
+          isDir ? "text-foreground/80" : "text-foreground/70",
+        )}
+      >
+        {isDir ? (
+          <>
+            <ChevronRight className={cn("size-3 shrink-0 transition-transform", open && "rotate-90")} />
+            {open ? <FolderOpen className="size-3.5 shrink-0 text-amber-400" /> : <Folder className="size-3.5 shrink-0 text-amber-400" />}
+          </>
+        ) : (
+          <>
+            <span className="size-3 shrink-0" />
+            <File className="size-3.5 shrink-0 text-sky-400" />
+          </>
+        )}
+        <span className="truncate">{node.name}</span>
+      </button>
+      {isDir && open && node.children && node.children.length > 0 && (
+        <ul>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              onOpenFile={onOpenFile}
+              openDirs={openDirs}
+              toggleDir={toggleDir}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export function CodeFileTree({
+  pid,
+  projectPath,
+  className,
+  onOpenFile,
+}: {
+  pid: string;
+  projectPath?: string;
+  className?: string;
+  onOpenFile?: (path: string) => void;
+}) {
+  const [files, setFiles] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  // Open-dir state lifted out of TreeNode so the parent can collapse all at once.
+  const [openDirs, setOpenDirs] = useState<Set<string>>(() => new Set());
+
+  const loadFiles = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await http.post<{ ok: boolean; stdout: string; stderr: string }>(
+        "/run",
+        {
+          cmd: "find . -type f -not -path '*/node_modules/*' -not -path '*/.git/*' -not -path '*/dist/*' -not -path '*/.claude/*' | sed 's|^\\./||' | sort | head -500",
+          project: pid,
+        },
+      );
+      const paths = r.stdout.split("\n").map((l) => l.trim()).filter(Boolean);
+      setFiles(paths);
+      setLoaded(true);
+    } catch {
+      setLoaded(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [pid]);
+
+  // Load on first render and whenever the project changes. Also reset the
+  // expanded set so a fresh project starts fully collapsed.
+  useEffect(() => {
+    setOpenDirs(new Set());
+    void loadFiles();
+  }, [loadFiles]);
+
+  const toggleDir = useCallback((path: string) => {
+    setOpenDirs((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
+
+  const collapseAll = useCallback(() => {
+    setOpenDirs(new Set());
+  }, []);
+
+  const tree = buildTree(files);
+  const anyOpen = openDirs.size > 0;
+
+  return (
+    <div className={cn("flex h-full flex-col", className)} data-testid="code-file-tree">
+      {/* Header */}
+      <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2">
+        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Archivos</span>
+        <div className="flex items-center gap-0.5">
+          <Tip content="Colapsar todo">
+            <button
+              type="button"
+              onClick={collapseAll}
+              disabled={!anyOpen}
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
+            >
+              <ChevronsUpDown className="size-3" />
+            </button>
+          </Tip>
+          <Tip content="Recargar">
+            <button
+              type="button"
+              onClick={() => void loadFiles()}
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              {loading ? <Spinner size={12} /> : <RefreshCw className="size-3" />}
+            </button>
+          </Tip>
+        </div>
+      </div>
+
+      {/* File tree */}
+      <div className="min-h-0 flex-1 overflow-y-auto py-1">
+        {!loaded ? (
+          <div className="flex justify-center pt-6"><Spinner size={14} /></div>
+        ) : tree.length === 0 ? (
+          <div className="p-3"><Empty>Sin archivos</Empty></div>
+        ) : (
+          <ul>
+            {tree.map((node) => (
+              <TreeNode
+                key={node.path}
+                node={node}
+                depth={0}
+                onOpenFile={onOpenFile ?? (() => {})}
+                openDirs={openDirs}
+                toggleDir={toggleDir}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { Save, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Spinner } from "../ui";
+import { Tip } from "../ui/tip";
+
+export function CodeFileViewer({
+  path,
+  content,
+  loading,
+  onSave,
+}: {
+  path: string;
+  content: string;
+  loading?: boolean;
+  /** When provided, the viewer becomes an editor: textarea + Save button. */
+  onSave?: (content: string) => Promise<void> | void;
+}) {
+  const editable = typeof onSave === "function";
+  const [draft, setDraft] = useState(content);
+  const [saving, setSaving] = useState(false);
+
+  // Reset the draft whenever the upstream content changes (e.g. the file
+  // finished loading after the tab opened).
+  useEffect(() => {
+    setDraft(content);
+  }, [content]);
+
+  const dirty = editable && draft !== content;
+
+  const save = async () => {
+    if (!onSave || !dirty) return;
+    setSaving(true);
+    try {
+      await onSave(draft);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-card/40" data-testid="code-file-viewer">
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-muted-foreground">
+          {path}
+          {dirty && <span className="ml-1 text-amber-400">•</span>}
+        </span>
+        {editable && (
+          <>
+            <Tip content="Descartar cambios">
+              <button
+                type="button"
+                onClick={() => setDraft(content)}
+                disabled={!dirty || saving}
+                className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40"
+              >
+                <RotateCcw className="size-3" />
+                Descartar
+              </button>
+            </Tip>
+            <Tip content="Guardar (Cmd/Ctrl+S)">
+              <button
+                type="button"
+                onClick={() => void save()}
+                disabled={!dirty || saving}
+                className={cn(
+                  "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[10px] font-medium transition-colors",
+                  dirty && !saving
+                    ? "bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/25 dark:text-emerald-300"
+                    : "bg-muted text-muted-foreground",
+                )}
+              >
+                {saving ? <Spinner size={10} /> : <Save className="size-3" />}
+                Guardar
+              </button>
+            </Tip>
+          </>
+        )}
+      </div>
+
+      {loading ? (
+        <div className="flex flex-1 items-center justify-center">
+          <Spinner size={16} />
+        </div>
+      ) : editable ? (
+        <textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+              e.preventDefault();
+              void save();
+            }
+          }}
+          className="min-h-0 flex-1 resize-none bg-transparent p-3 font-mono text-[12px] leading-[1.6] text-foreground/90 outline-none"
+          spellCheck={false}
+        />
+      ) : (
+        <div className="min-h-0 flex-1 overflow-auto">
+          <table className="w-full border-collapse font-mono text-[12px] leading-[1.6]">
+            <tbody>
+              {content.split("\n").map((line, i) => (
+                <tr key={i} className="hover:bg-accent/20">
+                  <td
+                    className="w-12 select-none border-r border-border/30 px-3 py-0 text-right align-top text-[10px] text-muted-foreground/40"
+                    aria-hidden="true"
+                  >
+                    {i + 1}
+                  </td>
+                  <td className="px-4 py-0 align-top text-foreground/90 whitespace-pre">
+                    {line || " "}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -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/CodeSessionList.tsx

@@ -2,6 +2,7 @@ import { Plus, MessageSquare, Trash2, Pencil } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { Empty } from "../ui";
+import { Tip } from "../ui/tip";
 import type { CodeSessionRow } from "../../lib/api/code";
 
 interface Props {
@@ -30,16 +31,17 @@ export function CodeSessionList({
         <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
           {t("code_module.sessions")}
         </span>
-        <button
-          type="button"
-          onClick={onCreate}
-          disabled={busy}
-          title={t("code_module.new_session")}
-          data-testid="code-new-session"
-          className="flex items-center gap-1 rounded-md border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50"
-        >
-          <Plus className="size-3" /> {t("code_module.new_session")}
-        </button>
+        <Tip content={t("code_module.new_session")}>
+          <button
+            type="button"
+            onClick={onCreate}
+            disabled={busy}
+            data-testid="code-new-session"
+            className="flex items-center gap-1 rounded-md border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50"
+          >
+            <Plus className="size-3" /> {t("code_module.new_session")}
+          </button>
+        </Tip>
       </div>
 
       <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
@@ -70,22 +72,24 @@ export function CodeSessionList({
                   </span>
                 </button>
                 <div className="absolute right-1 top-1 hidden items-center gap-0.5 group-hover/item:flex">
-                  <button
-                    type="button"
-                    onClick={() => onRename(s.id, s.title)}
-                    title={t("code_module.rename")}
-                    className="rounded p-1 text-muted-foreground hover:bg-background hover:text-foreground"
-                  >
-                    <Pencil className="size-3" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => onDelete(s.id)}
-                    title={t("code_module.delete")}
-                    className="rounded p-1 text-muted-foreground hover:bg-background hover:text-rose-500"
-                  >
-                    <Trash2 className="size-3" />
-                  </button>
+                  <Tip content={t("code_module.rename")}>
+                    <button
+                      type="button"
+                      onClick={() => onRename(s.id, s.title)}
+                      className="rounded p-1 text-muted-foreground hover:bg-background hover:text-foreground"
+                    >
+                      <Pencil className="size-3" />
+                    </button>
+                  </Tip>
+                  <Tip content={t("code_module.delete")}>
+                    <button
+                      type="button"
+                      onClick={() => onDelete(s.id)}
+                      className="rounded p-1 text-muted-foreground hover:bg-background hover:text-rose-500"
+                    >
+                      <Trash2 className="size-3" />
+                    </button>
+                  </Tip>
                 </div>
               </li>
             ))}

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

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { Gauge, GitCompare, Package } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
+import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 import { CodeContextTab } from "./CodeContextTab";
 import { CodeChangesTab } from "./CodeChangesTab";
@@ -12,40 +14,57 @@ interface Props {
   changes: CodeChanges | undefined;
   changesLoading: boolean;
   onRefreshChanges: () => void;
+  session?: { title: string; mode: string; createdAt: string; updatedAt: string; agentSlug: string | null } | null;
+  onRunInTerminal?: (cmd: string) => void;
+  onEditArtifact?: (name: string) => void;
 }
 
-// Right-hand panel: Context (token metrics), Changes (diffs vs the session's
-// git baseline), and Artifacts (managed files under <project>/artifacts/).
-export function CodeSidePanel({ pid, turns, changes, changesLoading, onRefreshChanges }: Props) {
+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, session, onRunInTerminal, onEditArtifact }: 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 (
+              <Tip key={value} content={fullLabel}>
+                <TabsTrigger
+                  value={value}
+                  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>
+              </Tip>
+            );
+          })}
         </TabsList>
       </div>
       <TabsContent value="context" className="min-h-0 flex-1 overflow-y-auto">
-        <CodeContextTab turns={turns} />
+        <CodeContextTab turns={turns} session={session} />
       </TabsContent>
       <TabsContent value="changes" className="min-h-0 flex-1 overflow-hidden">
         <CodeChangesTab changes={changes} loading={changesLoading} onRefresh={onRefreshChanges} />
       </TabsContent>
       <TabsContent value="artifacts" className="min-h-0 flex-1 overflow-hidden">
-        <CodeArtifactsTab pid={pid} />
+        <CodeArtifactsTab pid={pid} onRunInTerminal={onRunInTerminal} onEditArtifact={onEditArtifact} />
       </TabsContent>
     </Tabs>
   );

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>
+  );
+}