@agentprojectcontext/apx 1.24.0 → 1.27.1

package/src/interfaces/web/src/components/chat/ContextBar.tsx

@@ -0,0 +1,111 @@
+import { useMemo, useState } from "react";
+import { ChevronDown, FilePen, Gauge, Wrench } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { FILE_TOOLS } from "./ToolCall";
+import type { ChatMsg, ToolPart } from "../../hooks/useChat";
+
+interface ChangedFile {
+  path: string;
+  tool: string;
+}
+
+// Pull the file path out of a write_file/edit_file invocation's args.
+function filePathOf(args?: Record<string, unknown>): string | undefined {
+  if (!args) return undefined;
+  const p = args.path ?? args.file ?? args.filename;
+  return typeof p === "string" ? p : undefined;
+}
+
+/**
+ * Compact, opencode-style strip summarising the conversation: token usage,
+ * tool count, and an expandable list of files the agent wrote or edited.
+ * Renders nothing until the agent has actually done something.
+ */
+export function ContextBar({ msgs }: { msgs: ChatMsg[] }) {
+  const [open, setOpen] = useState(false);
+
+  const { inTok, outTok, toolCount, changed, model } = useMemo(() => {
+    let inTok = 0;
+    let outTok = 0;
+    let toolCount = 0;
+    let model: string | undefined;
+    const seen = new Set<string>();
+    const changed: ChangedFile[] = [];
+    for (const m of msgs) {
+      if (m.role !== "assistant") continue;
+      if (m.usage) {
+        inTok += m.usage.input_tokens || 0;
+        outTok += m.usage.output_tokens || 0;
+      }
+      if (m.model) model = m.model;
+      for (const part of m.parts) {
+        if (part.kind !== "tool") continue;
+        toolCount += 1;
+        if (FILE_TOOLS.has(part.tool) && (part as ToolPart).status !== "error") {
+          const path = filePathOf(part.args);
+          if (path && !seen.has(path)) {
+            seen.add(path);
+            changed.push({ path, tool: part.tool });
+          }
+        }
+      }
+    }
+    return { inTok, outTok, toolCount, changed, model };
+  }, [msgs]);
+
+  const totalTok = inTok + outTok;
+  if (totalTok === 0 && toolCount === 0) return null;
+
+  return (
+    <div className="shrink-0 border-t border-border bg-card/40 text-[11px]">
+      <button
+        type="button"
+        onClick={() => changed.length > 0 && setOpen((v) => !v)}
+        className={cn(
+          "flex w-full items-center gap-3 px-4 py-1.5 text-muted-foreground",
+          changed.length > 0 && "hover:text-foreground",
+        )}
+      >
+        <span className="flex items-center gap-1">
+          <Gauge size={12} /> {fmt(totalTok)} tok
+          <span className="text-muted-foreground/60">
+            ({fmt(inTok)}↑ / {fmt(outTok)}↓)
+          </span>
+        </span>
+        {toolCount > 0 && (
+          <span className="flex items-center gap-1">
+            <Wrench size={12} /> {toolCount} tools
+          </span>
+        )}
+        {changed.length > 0 && (
+          <span className="flex items-center gap-1 text-violet-400">
+            <FilePen size={12} /> {changed.length} archivos
+          </span>
+        )}
+        {model && <span className="ml-auto font-mono text-muted-foreground/70">{model}</span>}
+        {changed.length > 0 && (
+          <ChevronDown className={cn("size-3 shrink-0 transition-transform", open && "rotate-180")} />
+        )}
+      </button>
+
+      {open && changed.length > 0 && (
+        <ul className="max-h-40 space-y-0.5 overflow-y-auto border-t border-border/60 px-4 py-2">
+          {changed.map((f) => (
+            <li key={f.path} className="flex items-center gap-2 font-mono text-[11px]">
+              <FilePen size={11} className="shrink-0 text-violet-400" />
+              <span className="truncate">{f.path}</span>
+              <span className="ml-auto shrink-0 text-[10px] text-muted-foreground/60">
+                {f.tool === "write_file" ? "write" : "edit"}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function fmt(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return String(n);
+}

package/src/interfaces/web/src/components/chat/MessageBubble.tsx

@@ -0,0 +1,95 @@
+import { Bot, Copy, User, Info } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { ToolCall } from "./ToolCall";
+import { textOf, type ChatMsg } from "../../hooks/useChat";
+
+interface Props {
+  msg: ChatMsg;
+  onCopy?: (text: string) => void;
+}
+
+export function MessageBubble({ msg, onCopy }: Props) {
+  const mine = msg.role === "user";
+  const copyText = textOf(msg);
+  const hasTools = msg.parts.some((p) => p.kind === "tool");
+
+  return (
+    <div className={cn("group flex items-start gap-2", mine ? "justify-end" : "justify-start")}>
+      {!mine && (
+        <span className="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">
+          <Bot size={14} />
+        </span>
+      )}
+      <div className={cn("flex min-w-0 flex-col gap-1.5", mine ? "items-end" : "w-full max-w-[85%]")}>
+        {/* Operational notes (engine fallbacks, retries, suppressed tools). */}
+        {!mine && msg.notes && msg.notes.length > 0 && (
+          <div className="flex flex-col gap-0.5">
+            {msg.notes.map((n, i) => (
+              <span key={i} className="flex items-center gap-1 text-[10px] text-amber-400/80">
+                <Info size={10} /> {n}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Ordered parts: interleaved assistant text + tool calls. */}
+        {msg.parts.map((part, i) =>
+          part.kind === "tool" ? (
+            <ToolCall key={`${part.id}-${i}`} part={part} />
+          ) : part.text ? (
+            <div
+              key={i}
+              className={cn(
+                "whitespace-pre-wrap rounded-2xl px-3 py-2 text-sm leading-relaxed shadow-sm",
+                mine
+                  ? "rounded-br-sm bg-primary text-primary-fg"
+                  : "w-full rounded-bl-sm border border-border bg-card text-foreground",
+              )}
+            >
+              {part.text}
+            </div>
+          ) : null,
+        )}
+
+        {/* Pending placeholder before any part has arrived. */}
+        {!mine && msg.pending && msg.parts.length === 0 && (
+          <div className="rounded-2xl rounded-bl-sm border border-border bg-card px-3 py-2 text-sm text-muted-foreground">
+            …
+          </div>
+        )}
+
+        <div className="flex items-center gap-2 text-[10px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100">
+          <span>{formatTs(msg.ts)}</span>
+          {!mine && msg.model && <span className="font-mono">· {msg.model}</span>}
+          {!mine && hasTools && (
+            <span>· {msg.parts.filter((p) => p.kind === "tool").length} tools</span>
+          )}
+          {onCopy && copyText && (
+            <button
+              type="button"
+              onClick={() => onCopy(copyText)}
+              className="inline-flex items-center gap-1 hover:text-foreground"
+              title="Copiar"
+            >
+              <Copy size={10} /> copiar
+            </button>
+          )}
+        </div>
+      </div>
+      {mine && (
+        <span className="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">
+          <User size={14} />
+        </span>
+      )}
+    </div>
+  );
+}
+
+function formatTs(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  } catch {
+    return iso;
+  }
+}

package/src/interfaces/web/src/components/chat/MessageList.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import { MessageBubble } from "./MessageBubble";
+import { Empty } from "../ui";
+import { t } from "../../i18n";
+import type { ChatMsg } from "../../hooks/useChat";
+
+interface Props {
+  msgs: ChatMsg[];
+  onCopy: (text: string) => void;
+}
+
+export function MessageList({ msgs, onCopy }: Props) {
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [msgs]);
+
+  if (msgs.length === 0) {
+    return (
+      <div className="grid h-full place-items-center p-6">
+        <Empty>{t("project.chat.empty")}</Empty>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 px-3 py-4">
+      {msgs.map((m, i) => (
+        <MessageBubble key={i} msg={m} onCopy={onCopy} />
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  );
+}

package/src/interfaces/web/src/components/chat/ModelPicker.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState } from "react";
+import { Server, ChevronDown, X, Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Engines } from "../../lib/api";
+
+// Compact model picker for the chat composer (the panda.project pattern): a
+// small "Server · <model>" button that opens a dropdown to pick a model
+// override, or fall back to "Auto" (the daemon's fallback router decides).
+//
+// Options are the live model catalogs of the configured engines, aggregated as
+// `engine:model` (best-effort — engines that fail to list are skipped). Empty
+// value = Auto.
+export function ModelPicker({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [options, setOptions] = useState<string[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  // Lazily load the aggregated model catalog the first time the picker opens.
+  useEffect(() => {
+    if (!open || loaded) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const { engines } = await Engines.list();
+        const lists = await Promise.all(
+          engines.map((e) =>
+            Engines.models({ engine: e })
+              .then((r) => (r.models || []).map((m) => (m.includes(":") ? m : `${e}:${m}`)))
+              .catch(() => [] as string[]),
+          ),
+        );
+        if (!cancelled) {
+          const flat = Array.from(new Set(lists.flat())).sort();
+          setOptions(flat);
+          setLoaded(true);
+        }
+      } catch {
+        if (!cancelled) setLoaded(true);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [open, loaded]);
+
+  const q = query.trim().toLowerCase();
+  const filtered = q ? options.filter((o) => o.toLowerCase().includes(q)) : options;
+  const label = value || "Auto";
+
+  const pick = (m: string) => { onChange(m); setOpen(false); setQuery(""); };
+
+  return (
+    <div ref={wrapRef} className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen((v) => !v)}
+        data-testid="chat-model-picker"
+        className={cn(
+          "flex max-w-[200px] items-center gap-1 rounded-md border border-transparent px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors",
+          "hover:bg-accent/60 hover:text-foreground",
+          value && "text-foreground",
+        )}
+        title="Elegir modelo (o Auto)"
+      >
+        <Server className="size-3 shrink-0" />
+        <span className="truncate font-mono">{label}</span>
+        <ChevronDown className="size-3 shrink-0 opacity-60" />
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 z-50 mb-1.5 w-64 rounded-lg border border-border bg-popover p-1.5 shadow-md ring-1 ring-foreground/10">
+          <input
+            autoFocus
+            value={query}
+            placeholder="filtrar o escribir modelo…"
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter" && query.trim()) pick(query.trim()); }}
+            className="mb-1 w-full rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-foreground/30"
+          />
+          <ul className="max-h-56 overflow-y-auto">
+            <li>
+              <button
+                type="button"
+                onMouseDown={(e) => { e.preventDefault(); pick(""); }}
+                className={cn(
+                  "flex w-full items-center justify-between rounded-md px-2 py-1 text-left text-xs hover:bg-accent hover:text-accent-fg",
+                  !value && "bg-accent/50",
+                )}
+              >
+                <span className="flex items-center gap-1.5"><X className="size-3" /> Auto (router decide)</span>
+                {!value && <Check className="size-3" />}
+              </button>
+            </li>
+            {!loaded && <li className="px-2 py-1 text-[11px] text-muted-fg">cargando modelos…</li>}
+            {loaded && filtered.length === 0 && query.trim() && (
+              <li>
+                <button
+                  type="button"
+                  onMouseDown={(e) => { e.preventDefault(); pick(query.trim()); }}
+                  className="w-full rounded-md px-2 py-1 text-left font-mono text-xs hover:bg-accent hover:text-accent-fg"
+                >
+                  usar “{query.trim()}”
+                </button>
+              </li>
+            )}
+            {filtered.map((m) => (
+              <li key={m}>
+                <button
+                  type="button"
+                  onMouseDown={(e) => { e.preventDefault(); pick(m); }}
+                  className={cn(
+                    "flex w-full items-center justify-between rounded-md px-2 py-1 text-left font-mono text-xs hover:bg-accent hover:text-accent-fg",
+                    m === value && "bg-accent/50",
+                  )}
+                >
+                  <span className="truncate">{m}</span>
+                  {m === value && <Check className="size-3 shrink-0" />}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/chat/ToolCall.tsx

@@ -0,0 +1,141 @@
+import { useState } from "react";
+import {
+  ChevronRight,
+  FileText,
+  FilePen,
+  FilePlus,
+  Search,
+  FolderTree,
+  Terminal,
+  Send,
+  Bot,
+  Plug,
+  ListTodo,
+  Wrench,
+  Loader2,
+  Check,
+  X,
+  CornerDownRight,
+} from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { ToolPart } from "../../hooks/useChat";
+
+// Map registered tool names (core/agent tools) to an icon + friendly label.
+const TOOL_META: Record<string, { icon: typeof Wrench; label: string }> = {
+  read_file: { icon: FileText, label: "Leer archivo" },
+  write_file: { icon: FilePlus, label: "Escribir archivo" },
+  edit_file: { icon: FilePen, label: "Editar archivo" },
+  list_files: { icon: FolderTree, label: "Listar archivos" },
+  search_files: { icon: Search, label: "Buscar en archivos" },
+  search_messages: { icon: Search, label: "Buscar mensajes" },
+  tail_messages: { icon: Search, label: "Últimos mensajes" },
+  run_shell: { icon: Terminal, label: "Ejecutar shell" },
+  send_telegram: { icon: Send, label: "Enviar Telegram" },
+  call_agent: { icon: Bot, label: "Llamar agente" },
+  call_mcp: { icon: Plug, label: "Llamar MCP" },
+  call_runtime: { icon: Bot, label: "Llamar runtime" },
+  create_task: { icon: ListTodo, label: "Crear tarea" },
+};
+
+const FILE_TOOLS = new Set(["write_file", "edit_file"]);
+
+function metaFor(tool: string) {
+  return TOOL_META[tool] || { icon: Wrench, label: tool };
+}
+
+// Best-effort one-line argument summary shown next to the tool title.
+function argSummary(tool: string, args?: Record<string, unknown>): string {
+  if (!args) return "";
+  const pick = (k: string) => (typeof args[k] === "string" ? (args[k] as string) : undefined);
+  const first =
+    pick("path") ||
+    pick("file") ||
+    pick("pattern") ||
+    pick("query") ||
+    pick("command") ||
+    pick("slug") ||
+    pick("name") ||
+    pick("agent");
+  return first ? String(first) : "";
+}
+
+function pretty(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function StatusIcon({ status }: { status: ToolPart["status"] }) {
+  if (status === "running") return <Loader2 className="size-3 shrink-0 animate-spin text-sky-400" />;
+  if (status === "error") return <X className="size-3 shrink-0 text-rose-400" />;
+  if (status === "deduped") return <CornerDownRight className="size-3 shrink-0 text-amber-400" />;
+  return <Check className="size-3 shrink-0 text-emerald-400" />;
+}
+
+export function ToolCall({ part }: { part: ToolPart }) {
+  const [open, setOpen] = useState(false);
+  const { icon: Icon, label } = metaFor(part.tool);
+  const summary = argSummary(part.tool, part.args);
+  const isFile = FILE_TOOLS.has(part.tool);
+  const hasBody = !!part.args || part.result !== undefined;
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-muted/30 text-[12px]",
+        part.status === "error" ? "border-rose-500/30" : "border-border",
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => hasBody && setOpen((v) => !v)}
+        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left"
+      >
+        {hasBody ? (
+          <ChevronRight className={cn("size-3 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")} />
+        ) : (
+          <span className="size-3 shrink-0" />
+        )}
+        <Icon className={cn("size-3.5 shrink-0", isFile ? "text-violet-400" : "text-muted-foreground")} />
+        <span className="shrink-0 font-medium">{label}</span>
+        {summary && <span className="truncate font-mono text-muted-foreground">{summary}</span>}
+        <span className="ml-auto flex items-center gap-1">
+          {part.status === "deduped" && <span className="text-[10px] text-amber-400">dedup</span>}
+          <StatusIcon status={part.status} />
+        </span>
+      </button>
+
+      {open && hasBody && (
+        <div className="space-y-2 border-t border-border/60 px-2.5 py-2">
+          {part.args && Object.keys(part.args).length > 0 && (
+            <div>
+              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">args</div>
+              <pre className="max-h-48 overflow-auto rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed text-foreground">
+                {pretty(part.args)}
+              </pre>
+            </div>
+          )}
+          {part.result !== undefined && (
+            <div>
+              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">result</div>
+              <pre
+                className={cn(
+                  "max-h-64 overflow-auto rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed",
+                  part.status === "error" ? "text-rose-300" : "text-foreground",
+                )}
+              >
+                {pretty(part.result)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { FILE_TOOLS };

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

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { ChevronRight, FilePlus2, FilePen, FileX2, RefreshCw } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { Empty, Spinner } from "../ui";
+import { DiffView } from "./DiffView";
+import type { CodeChanges, CodeFileChange } from "../../lib/api/code";
+
+interface Props {
+  changes: CodeChanges | undefined;
+  loading: boolean;
+  onRefresh: () => void;
+}
+
+const STATUS_ICON = {
+  added: FilePlus2,
+  modified: FilePen,
+  deleted: FileX2,
+} as const;
+
+const STATUS_COLOR = {
+  added: "text-emerald-600 dark:text-emerald-400",
+  modified: "text-amber-600 dark:text-amber-400",
+  deleted: "text-rose-600 dark:text-rose-400",
+} as const;
+
+function FileRow({ file }: { file: CodeFileChange }) {
+  const [open, setOpen] = useState(false);
+  const Icon = STATUS_ICON[file.status];
+  return (
+    <li className="rounded-md border border-border">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-accent/40"
+      >
+        <ChevronRight className={cn("size-3 shrink-0 transition-transform", open && "rotate-90")} />
+        <Icon className={cn("size-3.5 shrink-0", STATUS_COLOR[file.status])} />
+        <span className="min-w-0 flex-1 truncate font-mono">{file.path}</span>
+        <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+          {file.additions != null && <span className="text-emerald-600 dark:text-emerald-400">+{file.additions}</span>}
+          {file.deletions != null && <span className="ml-1 text-rose-600 dark:text-rose-400">-{file.deletions}</span>}
+        </span>
+      </button>
+      {open && (
+        <div className="border-t border-border p-1.5">
+          <DiffView patch={file.patch} />
+        </div>
+      )}
+    </li>
+  );
+}
+
+// Changes tab: file diffs of the working tree vs the session's git baseline.
+export function CodeChangesTab({ changes, loading, onRefresh }: Props) {
+  const files = changes?.files || [];
+  return (
+    <div className="flex h-full flex-col" data-testid="code-changes-tab">
+      <div className="flex shrink-0 items-center justify-between px-3 py-2">
+        <span className="text-[11px] text-muted-foreground">
+          {files.length > 0 ? t("code_module.changes_files", { n: files.length }) : ""}
+        </span>
+        <button
+          type="button"
+          onClick={onRefresh}
+          title="↻"
+          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          {loading ? <Spinner size={12} /> : <RefreshCw className="size-3" />}
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
+        {changes && !changes.git ? (
+          <Empty>{t("code_module.changes_no_git")}</Empty>
+        ) : files.length === 0 ? (
+          <Empty>{t("code_module.changes_none")}</Empty>
+        ) : (
+          <ul className="space-y-1.5">
+            {files.map((f) => (
+              <FileRow key={f.path} file={f} />
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}