npm - @agentprojectcontext/apx - Versions diffs - 1.72.0 → 1.73.1 - Mend

@agentprojectcontext/apx 1.72.0 → 1.73.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-DVxJfrii.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-vSNUqL56.css">
+    <script type="module" crossorigin src="/assets/index-CqlRznhf.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CUeIhw7z.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

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

@@ -1495,6 +1495,9 @@ export const en = {
     brain_pan_hint:          "scroll to zoom · drag background to pan",
     brain_expand:            "Expand brains",
     brain_collapse:          "Collapse",
+    brain_open:              "Open",
+    brain_part_of:           "Part of",
+    brain_branches:          "Branches",
     config_def_desc:         "definition (frontmatter + system prompt).",
     memory_durable_desc:     "durable facts the agent remembers.",
     running:                 "running",

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

@@ -1493,6 +1493,9 @@ export const es = {
     brain_pan_hint:          "scroll para zoom · arrastrá el fondo para mover",
     brain_expand:            "Expandir cerebros",
     brain_collapse:          "Colapsar",
+    brain_open:              "Abrir",
+    brain_part_of:           "Parte de",
+    brain_branches:          "Ramas",
     config_def_desc:         "definición (frontmatter + system prompt).",
     memory_durable_desc:     "hechos durables que el agente recuerda.",
     running:                 "running",

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

@@ -53,6 +53,12 @@ function kindLabel(k: BrainKind): string {
 const RADIUS: Record<BrainRole, number> = { core: 24, hub: 12, leaf: 6 };
 const roleOf = (n: BrainNode): BrainRole => n.role ?? "leaf";
 const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
+const uniqById = <T extends { id: string }>(arr: T[]): T[] => {
+  const m = new Map<string, T>();
+  for (const n of arr) m.set(n.id, n);
+  return [...m.values()];
+};
+const clip = (s: string, n = 26) => (s.length > n ? `${s.slice(0, n)}…` : s);
 export function BrainGraph({
   nodes, edges, height = 520, onNodeClick, toolbar,
@@ -72,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);
@@ -188,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();
   };
@@ -197,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;
@@ -216,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;
@@ -223,6 +238,13 @@ export function BrainGraph({
   const legendKinds = [...new Set(nodes.map((n) => n.kind))].filter((k) => k !== "agent" && k !== "hub");
   const pick = (n: SimNode) => { setSelected(n); onNodeClick?.(n); };
+  // For the detail panel: what the selected node hangs off (parents) and the
+  // branches that hang off it (children), derived from the live edges.
+  const selParents = selected ? uniqById(links.filter((l) => l.target.id === selected.id).map((l) => l.source)) : [];
+  const selChildren = selected ? uniqById(links.filter((l) => l.source.id === selected.id).map((l) => l.target)) : [];
+  // The detail line is only meaningful when it adds something beyond the title.
+  const selDetail = selected?.detail && selected.detail.trim() !== selected.label.trim() ? selected.detail : null;
   const CtrlBtn = ({ onClick, title, children }: { onClick: () => void; title: string; children: React.ReactNode }) => (
     <button type="button" title={title} onClick={onClick}
       className="grid size-7 place-items-center rounded-md border border-border bg-card/80 text-muted-fg backdrop-blur hover:text-foreground">
@@ -329,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" />
@@ -364,16 +386,63 @@ export function BrainGraph({
       </div>
       {selected && (
-        <div className="rounded-lg border border-border bg-card p-3 text-xs">
-          <div className="flex items-center gap-2">
-            <span className="size-2 rounded-full" style={{ background: KIND_COLOR[selected.kind] }} />
-            {selected.emoji && <span>{selected.emoji}</span>}
-            <span className="font-medium">{selected.label}</span>
+        <div className="space-y-2.5 rounded-lg border border-border bg-card p-3 text-xs">
+          {/* The clicked node: title, type, relation */}
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="size-2.5 rounded-full" style={{ background: KIND_COLOR[selected.kind] }} />
+            {selected.emoji && <span className="text-sm leading-none">{selected.emoji}</span>}
+            <span className="text-[13px] font-semibold">{selected.label}</span>
+            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-fg">
+              {kindLabel(selected.kind)}
+            </span>
             {selected.relation && <span className="text-muted-fg">· {selected.relation}</span>}
+            <div className="ml-auto flex items-center gap-2">
+              {selected.slug && onNodeClick && (
+                <button type="button" onClick={() => onNodeClick(selected)} className="text-primary hover:underline">
+                  {t("agents_ui.brain_open")}
+                </button>
+              )}
+              <button type="button" onClick={() => setSelected(null)} className="text-muted-fg hover:text-foreground">✕</button>
+            </div>
           </div>
-          {selected.detail && <p className="mt-1 whitespace-pre-wrap text-muted-fg">{selected.detail}</p>}
+          {/* Internal info — only when it adds something beyond the title */}
+          {selDetail && <p className="whitespace-pre-wrap text-muted-fg">{selDetail}</p>}
+          {/* Where it hangs from */}
+          {selParents.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-[10px] uppercase tracking-wide text-muted-fg/70">{t("agents_ui.brain_part_of")}</span>
+              {selParents.map((p) => <NeighborChip key={p.id} node={p} onClick={() => setSelected(p)} />)}
+            </div>
+          )}
+          {/* Branches that follow it */}
+          {selChildren.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-[10px] uppercase tracking-wide text-muted-fg/70">
+                {t("agents_ui.brain_branches")} · {selChildren.length}
+              </span>
+              {selChildren.map((c) => <NeighborChip key={c.id} node={c} onClick={() => setSelected(c)} />)}
+            </div>
+          )}
         </div>
       )}
     </div>
   );
 }
+// A clickable chip for a connected node in the detail panel.
+function NeighborChip({ node, onClick }: { node: BrainNode; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="inline-flex max-w-[220px] items-center gap-1 rounded-md border border-border bg-muted/40 px-1.5 py-0.5 text-[11px] hover:border-muted-fg/50 hover:bg-muted"
+    >
+      <span className="size-1.5 shrink-0 rounded-full" style={{ background: KIND_COLOR[node.kind] }} />
+      {node.emoji && <span className="leading-none">{node.emoji}</span>}
+      <span className="truncate">{clip(node.label, 28)}</span>
+    </button>
+  );
+}