@agentprojectcontext/apx 1.32.2 → 1.33.0

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

@@ -1,11 +1,21 @@
 import { useMemo } from "react";
 import { t } from "../../i18n";
 import { Empty } from "../ui";
+import { Tip } from "../ui/tip";
 import { computeMetrics, computeBreakdown } from "../../lib/code-context";
 import type { CodeTurn } from "../../lib/api/code";
 
+interface SessionInfo {
+  title: string;
+  mode: string;
+  createdAt: string;
+  updatedAt: string;
+  agentSlug: string | null;
+}
+
 interface Props {
   turns: CodeTurn[];
+  session?: SessionInfo | null;
 }
 
 const SEG_COLOR: Record<string, string> = {
@@ -14,18 +24,25 @@ const SEG_COLOR: Record<string, string> = {
   tool: "bg-amber-500",
 };
 
-function Stat({ label, value }: { label: string; value: string | number }) {
+function Row({ label, value }: { label: string; value: string | number }) {
   return (
-    <div className="rounded-md border border-border bg-background/50 px-2.5 py-2">
-      <div className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</div>
-      <div className="mt-0.5 truncate font-mono text-sm">{value}</div>
+    <div className="flex items-baseline justify-between gap-2 py-0.5">
+      <span className="shrink-0 text-[10px] uppercase tracking-wide text-muted-foreground">{label}</span>
+      <span className="min-w-0 truncate text-right font-mono text-xs text-foreground">{value}</span>
     </div>
   );
 }
 
+function fmtDate(iso: string): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${pad(d.getDate())} ${d.toLocaleString("es", { month: "short" })} ${d.getFullYear()}, ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
 // Context tab: real token totals from the last assistant turn + a char/4
 // estimate of where the conversation's weight sits.
-export function CodeContextTab({ turns }: Props) {
+export function CodeContextTab({ turns, session }: Props) {
   const m = useMemo(() => computeMetrics(turns), [turns]);
   const breakdown = useMemo(() => computeBreakdown(turns), [turns]);
 
@@ -38,13 +55,21 @@ export function CodeContextTab({ turns }: Props) {
   }
 
   return (
-    <div className="space-y-3 p-3" data-testid="code-context-tab">
-      <div className="grid grid-cols-2 gap-2">
-        <Stat label={t("code_module.ctx_model")} value={m.model || "auto"} />
-        <Stat label={t("code_module.ctx_messages")} value={`${m.userMsgs}/${m.assistantMsgs}`} />
-        <Stat label={t("code_module.ctx_input")} value={m.input.toLocaleString()} />
-        <Stat label={t("code_module.ctx_output")} value={m.output.toLocaleString()} />
-      </div>
+    <div className="space-y-1 p-3" data-testid="code-context-tab">
+      <Row label={t("code_module.ctx_model")} value={m.model || "auto"} />
+      {session?.mode && <Row label="Modo" value={session.mode} />}
+      {session?.agentSlug && <Row label="Agente" value={session.agentSlug} />}
+      <Row
+        label={t("code_module.ctx_messages")}
+        value={`${m.userMsgs} usuario · ${m.assistantMsgs} asistente`}
+      />
+      <Row label={t("code_module.ctx_input")} value={m.input.toLocaleString()} />
+      <Row label={t("code_module.ctx_output")} value={m.output.toLocaleString()} />
+      <Row label="Tokens Total" value={(m.input + m.output).toLocaleString()} />
+      {session?.createdAt && <Row label="Creado" value={fmtDate(session.createdAt)} />}
+      {session?.updatedAt && <Row label="Actividad" value={fmtDate(session.updatedAt)} />}
+
+      <hr className="border-border my-2" />
 
       <div>
         <div className="mb-1 text-[11px] font-semibold text-muted-foreground">
@@ -54,12 +79,12 @@ export function CodeContextTab({ turns }: Props) {
           <>
             <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-muted">
               {breakdown.map((s) => (
-                <div
-                  key={s.key}
-                  className={SEG_COLOR[s.key]}
-                  style={{ width: `${s.percent}%` }}
-                  title={`${s.key}: ${s.tokens} (${s.percent}%)`}
-                />
+                <Tip key={s.key} content={`${s.key}: ${s.tokens} (${s.percent}%)`}>
+                  <div
+                    className={SEG_COLOR[s.key]}
+                    style={{ width: `${s.percent}%` }}
+                  />
+                </Tip>
               ))}
             </div>
             <ul className="mt-2 space-y-1">

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/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,6 +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";
@@ -13,6 +14,9 @@ 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;
 }
 
 const TABS = [
@@ -21,7 +25,7 @@ const TABS = [
   { value: "artifacts", icon: Package, label: "tab_artifacts" },
 ] as const;
 
-export function CodeSidePanel({ pid, turns, changes, changesLoading, onRefreshChanges }: Props) {
+export function CodeSidePanel({ pid, turns, changes, changesLoading, onRefreshChanges, session, onRunInTerminal, onEditArtifact }: Props) {
   const [active, setActive] = useState<string>("context");
   const changeCount = changes?.files.length || 0;
 
@@ -33,34 +37,34 @@ export function CodeSidePanel({ pid, turns, changes, changesLoading, onRefreshCh
             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>
+              <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>
   );