@agentprojectcontext/apx 1.73.0 → 1.74.0

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

@@ -1,7 +1,8 @@
 import { useMemo, useState } from "react";
-import { ChevronDown, FilePen, Gauge, Wrench } from "lucide-react";
+import { Bot, ChevronDown, FilePen, Gauge, Wrench } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { FILE_TOOLS } from "./ToolCall";
+import { t } from "../../i18n";
 import type { ChatMsg, ToolPart } from "../../hooks/useChat";
 
 interface ChangedFile {
@@ -9,6 +10,18 @@ interface ChangedFile {
   tool: string;
 }
 
+/** One (agent, model) pair that contributed to this conversation, with what it
+ *  spent. A turn where the router fell back mid-conversation produces two rows
+ *  for the same agent — that's the point: you see WHICH model cost what. */
+interface ActorUsage {
+  key: string;
+  agent?: string;
+  model?: string;
+  inTok: number;
+  outTok: number;
+  turns: number;
+}
+
 // 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;
@@ -18,26 +31,37 @@ function filePathOf(args?: Record<string, unknown>): string | 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.
+ * tool count, an expandable list of files the agent wrote or edited, and the
+ * per-actor breakdown (which agent answered on which model, and what each
+ * spent). 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(() => {
+  const { inTok, outTok, toolCount, changed, actors } = useMemo(() => {
     let inTok = 0;
     let outTok = 0;
     let toolCount = 0;
-    let model: string | undefined;
     const seen = new Set<string>();
     const changed: ChangedFile[] = [];
+    const byActor = new Map<string, ActorUsage>();
     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;
+      const mIn = m.usage?.input_tokens || 0;
+      const mOut = m.usage?.output_tokens || 0;
+      inTok += mIn;
+      outTok += mOut;
+      if (m.agent || m.model) {
+        const key = `${m.agent || ""}::${m.model || ""}`;
+        const prev = byActor.get(key);
+        if (prev) {
+          prev.inTok += mIn;
+          prev.outTok += mOut;
+          prev.turns += 1;
+        } else {
+          byActor.set(key, { key, agent: m.agent, model: m.model, inTok: mIn, outTok: mOut, turns: 1 });
+        }
       }
-      if (m.model) model = m.model;
       for (const part of m.parts) {
         if (part.kind !== "tool") continue;
         toolCount += 1;
@@ -50,20 +74,21 @@ export function ContextBar({ msgs }: { msgs: ChatMsg[] }) {
         }
       }
     }
-    return { inTok, outTok, toolCount, changed, model };
+    return { inTok, outTok, toolCount, changed, actors: [...byActor.values()] };
   }, [msgs]);
 
   const totalTok = inTok + outTok;
-  if (totalTok === 0 && toolCount === 0) return null;
+  const expandable = changed.length > 0 || actors.length > 1;
+  if (totalTok === 0 && toolCount === 0 && actors.length === 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)}
+        onClick={() => expandable && 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",
+          expandable && "hover:text-foreground",
         )}
       >
         <span className="flex items-center gap-1">
@@ -79,27 +104,57 @@ export function ContextBar({ msgs }: { msgs: ChatMsg[] }) {
         )}
         {changed.length > 0 && (
           <span className="flex items-center gap-1 text-violet-400">
-            <FilePen size={12} /> {changed.length} archivos
+            <FilePen size={12} /> {changed.length} {t("chat_ui.ctx_files")}
           </span>
         )}
-        {model && <span className="ml-auto font-mono text-muted-foreground/70">{model}</span>}
-        {changed.length > 0 && (
+        {/* One actor → show it inline. Several → say how many and let the user
+            expand for the split. */}
+        {actors.length === 1 && (
+          <span className="ml-auto truncate font-mono text-muted-foreground/70">
+            {[actors[0].agent, actors[0].model].filter(Boolean).join(" · ")}
+          </span>
+        )}
+        {actors.length > 1 && (
+          <span className="ml-auto flex items-center gap-1 text-sky-400">
+            <Bot size={12} /> {t("chat_ui.ctx_actors", { n: actors.length })}
+          </span>
+        )}
+        {expandable && (
           <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>
+      {open && (
+        <div className="max-h-52 space-y-2 overflow-y-auto border-t border-border/60 px-4 py-2">
+          {actors.length > 1 && (
+            <ul className="space-y-0.5">
+              {actors.map((a) => (
+                <li key={a.key} className="flex items-center gap-2 text-[11px]">
+                  <Bot size={11} className="shrink-0 text-sky-400" />
+                  <span className="shrink-0 font-medium text-emerald-300">{a.agent || "—"}</span>
+                  <span className="truncate font-mono text-muted-foreground/70">{a.model || "—"}</span>
+                  <span className="ml-auto shrink-0 font-mono text-[10px] text-muted-foreground/60">
+                    {fmt(a.inTok + a.outTok)} tok ({fmt(a.inTok)}↑ / {fmt(a.outTok)}↓) ·{" "}
+                    {t("chat_ui.ctx_turns", { n: a.turns })}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+          {changed.length > 0 && (
+            <ul className="space-y-0.5">
+              {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>
       )}
     </div>
   );

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

@@ -105,9 +105,31 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
           </div>
         )}
 
+        {/* Attribution: who answered and on which engine. Always visible (not
+            hover-gated) — in a thread where several agents/models take turns,
+            this is the only way to tell them apart at a glance. */}
+        {!mine && (msg.agent || msg.model) && (
+          <div className="flex flex-wrap items-center gap-1 text-[10px]">
+            {msg.agent && (
+              <span className="rounded bg-emerald-500/15 px-1 py-0.5 font-medium text-emerald-300">
+                {msg.agent}
+              </span>
+            )}
+            {msg.model && (
+              <span className="rounded border border-border px-1 py-0.5 font-mono text-muted-foreground">
+                {msg.model}
+              </span>
+            )}
+          </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 && msg.usage && (msg.usage.input_tokens || msg.usage.output_tokens) ? (
+            <span className="font-mono">
+              · {(msg.usage.input_tokens || 0) + (msg.usage.output_tokens || 0)} tok
+            </span>
+          ) : null}
           {!mine && hasTools && (
             <span>· {t("shared_ui.tools_count", { n: msg.parts.filter((p) => p.kind === "tool").length })}</span>
           )}

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

@@ -29,6 +29,10 @@ export interface ChatMsg {
   pending?: boolean;
   /** Model that produced an assistant turn (after routing). */
   model?: string;
+  /** Who answered: display name of the agent/persona (Roby, a project agent…). */
+  agent?: string;
+  /** Stable id of that actor (super_agent | agent slug). Turns are split on it. */
+  agentId?: string;
   /** Token accounting from the `final` event. */
   usage?: ChatUsage;
   /** Operational notes (engine fallbacks, retries, suppressions). */
@@ -135,19 +139,31 @@ function isErrorResult(result: unknown): boolean {
  *  single assistant bubble with interleaved text + tool parts — mirroring how a
  *  live streamed turn is shaped, so tool executions render the same on reload as
  *  they did in real time. Persisted rows carry no live status, so it's derived
- *  from the stored result (error → "error", else "done"). */
+ *  from the stored result (error → "error", else "done").
+ *
+ *  A change of ACTOR also breaks the bubble: if Roby answers and then a project
+ *  agent does, they're two turns, not one — otherwise the footer would credit
+ *  the whole block to whichever one happened to be last. Token usage is summed
+ *  across the rows of a turn (streamed channels write several agent rows and
+ *  only the final one carries `usage`). */
 function threadToChatMsgs(messages: ConversationMessage[]): ChatMsg[] {
   const out: ChatMsg[] = [];
   let turn: ChatMsg | null = null;
+  let turnActor: string | undefined;
   let toolSeq = 0;
   for (const m of messages) {
     const ts = m.ts || new Date().toISOString();
     if (m.role === "user") {
       turn = null;
+      turnActor = undefined;
       out.push({ role: "user", parts: userPart(m.content), ts });
     } else if (m.role === "assistant" || m.role === "tool") {
-      if (!turn) {
+      // Tool rows inherit the current actor (they're logged by whoever is
+      // running); only assistant rows can start a new one.
+      const actor = m.role === "assistant" ? m.agent : turnActor;
+      if (!turn || (m.role === "assistant" && actor !== turnActor)) {
         turn = { role: "assistant", parts: [], ts };
+        turnActor = actor;
         out.push(turn);
       }
       if (m.role === "tool") {
@@ -159,8 +175,17 @@ function threadToChatMsgs(messages: ConversationMessage[]): ChatMsg[] {
           result: m.result,
           status: isErrorResult(m.result) ? "error" : "done",
         });
-      } else if (m.content) {
-        turn.parts.push({ kind: "text", text: m.content });
+      } else {
+        if (m.agent) turn.agentId = m.agent;
+        if (m.agent_name) turn.agent = m.agent_name;
+        if (m.model) turn.model = m.model;
+        if (m.usage) {
+          turn.usage = {
+            input_tokens: (turn.usage?.input_tokens || 0) + (m.usage.input_tokens || 0),
+            output_tokens: (turn.usage?.output_tokens || 0) + (m.usage.output_tokens || 0),
+          };
+        }
+        if (m.content) turn.parts.push({ kind: "text", text: m.content });
       }
     }
     // system/compact rows are context-only; not rendered in the thread viewer.
@@ -256,7 +281,11 @@ export function applyStreamEvent(turn: ChatMsg, ev: ChatStreamEvent): ChatMsg {
         ...turn,
         pending: false,
         usage: ev.result?.usage ?? turn.usage,
-        model: turn.model ?? ev.result?.name,
+        // `model` is the engine (from model_start/model_routed, or the final
+        // event); `name` is the persona that answered — they are not the same
+        // thing and must not fall back to each other.
+        model: turn.model ?? ev.result?.model,
+        agent: turn.agent ?? ev.result?.name,
         parts:
           ev.result?.text && !turn.parts.some((p) => p.kind === "text")
             ? [...turn.parts, { kind: "text", text: ev.result.text }]
@@ -347,6 +376,9 @@ export function useChat(pid: string, onError?: (msg: string) => void): UseChatRe
             ...m,
             pending: false,
             model: out.engine,
+            agent: opts.agentSlug,
+            agentId: opts.agentSlug,
+            usage: out.usage,
             parts: [{ kind: "text", text: out.text }],
           }));
         } catch (e) {

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

@@ -1211,6 +1211,9 @@ export const en = {
     send:                "Send",
     pick_model:          "Pick model (or Auto)",
     insert_variable:     "Insert variable",
+    ctx_files:           "files",
+    ctx_actors:          "{n} agents/models",
+    ctx_turns:           "{n} turns",
   },
 
   sidebar_ui: {

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

@@ -1209,6 +1209,9 @@ export const es = {
     send:                "Enviar",
     pick_model:          "Elegir modelo (o Auto)",
     insert_variable:     "Insertar variable",
+    ctx_files:           "archivos",
+    ctx_actors:          "{n} agentes/modelos",
+    ctx_turns:           "{n} turnos",
   },
 
   sidebar_ui: {

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

@@ -1,5 +1,5 @@
 import { http } from "../http";
-import type { AgentDetail, AgentEntry } from "../../types/daemon";
+import type { AgentDetail, AgentEntry, ChatUsage } from "../../types/daemon";
 
 export const Agents = {
   list:   (pid: string, opts?: { stats?: boolean }) =>
@@ -12,7 +12,7 @@ export const Agents = {
   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; model?: string; channel?: string }) =>
-    http.post<{ conversation_id: string; text: string; usage?: unknown; engine: string }>(
+    http.post<{ conversation_id: string; text: string; usage?: ChatUsage; engine: string }>(
       `/projects/${pid}/agents/${encodeURIComponent(slug)}/chat`,
       body,
     ),

package/src/interfaces/web/src/screens/base/LogsTab.tsx

@@ -23,10 +23,27 @@ function actorLabel(m: MessageEntry): string {
   return m.agent_slug || m.actor_id || m.author || m.actor_kind || "—";
 }
 
+/** Model that produced this record — persisted in meta by every channel that
+ *  runs an agent turn. Absent on user/system rows and on pre-1.74 history. */
+function modelOf(m: MessageEntry): string | null {
+  const v = m.meta?.model;
+  return typeof v === "string" && v ? v : null;
+}
+
+/** Total tokens for this record, when the channel recorded usage. */
+function tokensOf(m: MessageEntry): number | null {
+  const u = m.meta?.usage as { input_tokens?: number; output_tokens?: number } | undefined;
+  if (!u || typeof u !== "object") return null;
+  const total = (u.input_tokens || 0) + (u.output_tokens || 0);
+  return total > 0 ? total : null;
+}
+
 function LogRow({ m }: { m: MessageEntry }) {
   const [expanded, setExpanded] = useState(false);
   const long = (m.body?.length || 0) > CLAMP;
   const shown = !long || expanded ? m.body : `${m.body.slice(0, CLAMP)}…`;
+  const model = modelOf(m);
+  const tokens = tokensOf(m);
   return (
     <li className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
       <span className="mt-0.5 shrink-0">
@@ -40,6 +57,8 @@ function LogRow({ m }: { m: MessageEntry }) {
           <Badge tone="info">{m.channel}</Badge>
           {m.type && <Badge>{m.type}</Badge>}
           <span className="font-medium text-foreground">{actorLabel(m)}</span>
+          {model && <span className="font-mono text-[11px] text-sky-400/90">{model}</span>}
+          {tokens !== null && <span className="font-mono text-[11px]">{tokens} tok</span>}
         </div>
         {m.body && (
           <p className="mt-1 whitespace-pre-wrap break-words text-xs">{shown}</p>

package/src/interfaces/web/src/screens/project/AgentBrainGraph.tsx

@@ -78,6 +78,9 @@ export function BrainGraph({
   const linksRef = useRef<SimLink[]>([]);
   const dragRef = useRef<SimNode | null>(null);
   const panRef = useRef<{ x: number; y: number } | null>(null);
+  // Press bookkeeping so a drag is never mistaken for a click (which navigates).
+  const downRef = useRef<{ x: number; y: number } | null>(null);
+  const movedRef = useRef(false);
   const viewRef = useRef({ tx: 0, ty: 0, k: 1 });
   const fitRef = useRef<() => void>(() => {});
   const [, setVersion] = useState(0);
@@ -194,6 +197,8 @@ export function BrainGraph({
     if (roleOf(n) === "core") return;
     e.stopPropagation();
     dragRef.current = n;
+    downRef.current = { x: e.clientX, y: e.clientY };
+    movedRef.current = false;
     (e.target as Element).setPointerCapture?.(e.pointerId);
     simRef.current?.alphaTarget(0.3).restart();
   };
@@ -203,6 +208,8 @@ export function BrainGraph({
   };
   const onMove = (e: React.PointerEvent) => {
     if (dragRef.current) {
+      const d = downRef.current;
+      if (d && !movedRef.current && Math.hypot(e.clientX - d.x, e.clientY - d.y) > 4) movedRef.current = true;
       const w = worldFromClient(e.clientX, e.clientY);
       dragRef.current.fx = w.x; dragRef.current.fy = w.y;
       return;
@@ -222,6 +229,8 @@ export function BrainGraph({
     panRef.current = null;
     simRef.current?.alphaTarget(0);
   };
+  // Native click fires reliably on pointerup; skip it when the press was a drag.
+  const onNodeClickGuarded = (n: SimNode) => () => { if (!movedRef.current) pick(n); };
 
   const simNodes = nodesRef.current;
   const links = linksRef.current;
@@ -342,7 +351,7 @@ export function BrainGraph({
                 const showLabel = isHub || isSel || !hideLeafLabels;
                 return (
                   <g key={n.id} transform={`translate(${n.x},${n.y})`} className="cursor-grab active:cursor-grabbing"
-                     onPointerDown={onNodeDown(n)} onClick={() => pick(n)}>
+                     onPointerDown={onNodeDown(n)} onClick={onNodeClickGuarded(n)}>
                     <circle r={r} fill={color} filter="url(#brain-glow)" opacity={0.3}>
                       <animate attributeName="r" values={`${r};${r + 6};${r}`} dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
                       <animate attributeName="opacity" values="0.32;0.08;0.32" dur={`${beat}s`} begin={begin} repeatCount="indefinite" />

package/src/interfaces/web/src/types/daemon.ts

@@ -221,6 +221,13 @@ export interface ConversationMessage {
   tool?: string;
   args?: Record<string, unknown>;
   result?: unknown;
+  /** Attribution on role:"assistant" rows from the global ledger: who answered
+   *  (stable id + display name + kind), on which model, and what it cost. */
+  agent?: string;
+  agent_name?: string;
+  actor_kind?: string;
+  model?: string;
+  usage?: ChatUsage;
 }
 
 export interface ConversationDetail {
@@ -408,7 +415,11 @@ export interface ChatStreamEvent {
   result?: {
     text?: string;
     usage?: ChatUsage;
+    /** Agent persona that answered (identity.json name / agent slug). */
     name?: string;
+    /** Engine that actually produced the reply — may differ from the configured
+     *  one when routing fell back mid-turn. */
+    model?: string;
     trace?: ToolTrace[];
   };
 }