@brainpilot/web 0.0.4 → 0.0.5

package/src/components/session/agentNetworkShared.ts

@@ -0,0 +1,329 @@
+/* --------------------------------------------------------------------------
+ * Shared pure helpers, types, and the static agent catalog for the Agent
+ * Network view. Extracted from `AgentNetwork.tsx` so the new sub-views
+ * (`AnalyticsTab`, `TimelineTab`, `GlobalOverview`, `NodeTooltip`) can reuse
+ * the SAME derivation logic — in particular the `send_message` tool-name
+ * matching and edge building, which previously lived only in the component
+ * and is the single source of truth for "who talked to whom".
+ * ------------------------------------------------------------------------ */
+import {
+  BarChart3,
+  Bot,
+  BookOpen,
+  GitBranch,
+  Microscope,
+  PenLine,
+  Sparkles,
+  UserRoundCog,
+  Wrench,
+} from "lucide-react";
+import { ChatMessage } from "../../contracts/backend";
+
+/* --------------------------------------------------------------------------
+ * Static catalog: per-agent profile (role, accent color, default tools).
+ * Mirrors the prompts in `claude/agents/*.md` and `agent_tool_config` in
+ * `agent_runtime/session_manager.py`. Unknown agents fall back to `_default`.
+ * ------------------------------------------------------------------------ */
+
+export interface AgentProfile {
+  displayName: string;
+  /** i18n key for the role line (resolve with t() at render). */
+  role: string;
+  /** i18n key for the description (resolve with t() at render). */
+  description: string;
+  accent: string; // CSS variable name fragment (e.g. "info")
+  defaultTools: string[];
+}
+
+export const AGENT_PROFILES: Record<string, AgentProfile> = {
+  principal: {
+    displayName: "Principal Investigator",
+    role: "profile.principal.role",
+    description: "profile.principal.desc",
+    accent: "info",
+    defaultTools: [
+      "send_message",
+      "create_agent",
+      "destroy_agent",
+      "record_trace",
+      "search_web",
+      "fetch_url",
+    ],
+  },
+  librarian: {
+    displayName: "Librarian",
+    role: "profile.librarian.role",
+    description: "profile.librarian.desc",
+    accent: "info",
+    defaultTools: ["send_message", "record_trace", "search_web", "fetch_url"],
+  },
+  trace: {
+    displayName: "Trace Agent",
+    role: "profile.trace.role",
+    description: "profile.trace.desc",
+    accent: "neutral",
+    defaultTools: [
+      "create_trace_node",
+      "update_trace_node",
+      "add_trace_relation",
+      "get_trace_graph",
+      "read_session_history",
+      "Read",
+    ],
+  },
+  experimentalist: {
+    displayName: "Experimentalist",
+    role: "profile.experimentalist.role",
+    description: "profile.experimentalist.desc",
+    accent: "success",
+    defaultTools: ["Read", "Write", "Grep", "Bash", "send_message"],
+  },
+  engineer: {
+    displayName: "Engineer",
+    role: "profile.engineer.role",
+    description: "profile.engineer.desc",
+    accent: "success",
+    defaultTools: ["Read", "Write", "Grep", "Bash", "send_message"],
+  },
+  writer: {
+    displayName: "Writer",
+    role: "profile.writer.role",
+    description: "profile.writer.desc",
+    accent: "warning",
+    defaultTools: ["Read", "Write", "Grep", "Bash", "send_message"],
+  },
+  user: {
+    displayName: "You",
+    role: "profile.user.role",
+    description: "profile.user.desc",
+    accent: "neutral",
+    defaultTools: [],
+  },
+};
+
+export const DEFAULT_PROFILE: AgentProfile = {
+  displayName: "Custom Agent",
+  role: "profile.default.role",
+  description: "profile.default.desc",
+  accent: "neutral",
+  defaultTools: ["send_message", "record_trace", "search_web", "fetch_url"],
+};
+
+export function getAgentProfile(name: string): AgentProfile {
+  return AGENT_PROFILES[name] ?? DEFAULT_PROFILE;
+}
+
+/**
+ * Built-in agent roster — default expert types the PI knows about regardless
+ * of whether they have been spawned this session. Rendered as "dormant"
+ * placeholders so the full team is always visible. Custom agents created at
+ * runtime via `create_agent` flow in through `AgentStatus[]` and union with
+ * this list in `nodeNames`.
+ */
+export const BUILTIN_AGENT_NAMES = [
+  "principal",
+  "librarian",
+  "trace",
+  "experimentalist",
+  "engineer",
+  "writer",
+] as const;
+
+/* --------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------ */
+
+export interface AgentEdgeMessage {
+  id: string;
+  from: string;
+  to: string;
+  content: string;
+  msgType?: string;
+  timestamp: string;
+  streaming?: boolean;
+}
+
+export interface AgentEdge {
+  key: string; // `${from}->${to}`
+  from: string;
+  to: string;
+  messages: AgentEdgeMessage[];
+  lastTimestamp: string;
+}
+
+/* --------------------------------------------------------------------------
+ * Edge / message derivation
+ * ------------------------------------------------------------------------ */
+
+export function safeParseJson(input: unknown): Record<string, unknown> | null {
+  if (input && typeof input === "object" && !Array.isArray(input)) {
+    return input as Record<string, unknown>;
+  }
+  if (typeof input !== "string" || !input.trim()) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(input);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Tool name matcher — accepts both the bare SDK name (`send_message`) and the
+ * MCP-namespaced name as it actually appears in JSONL / AG-UI snapshots
+ * (`mcp__builtin__send_message`, or any future `mcp__<server>__send_message`).
+ */
+export function isSendMessageTool(toolName?: string): boolean {
+  if (!toolName) return false;
+  if (toolName === "send_message") return true;
+  // MCP convention: `mcp__<server>__<tool>` — match the trailing tool name.
+  return toolName.endsWith("__send_message") || toolName.endsWith(":send_message");
+}
+
+export function getMessageEdge(message: ChatMessage): AgentEdgeMessage | null {
+  if (message.kind !== "tool" || !isSendMessageTool(message.toolName)) {
+    return null;
+  }
+  const args = safeParseJson(message.toolInput);
+  if (!args) {
+    return null;
+  }
+  const from = message.agent || "principal";
+  const to = typeof args.to === "string" && args.to ? args.to : "principal";
+  if (from === to) {
+    return null;
+  }
+  // Filter out messages to/from 'trace' — trace is an internal system agent
+  // that should only be interacted with via record_trace tool, not send_message.
+  // Any send_message involving trace is likely a mistake and should not appear
+  // as a collaboration edge in the Agent Network graph.
+  if (from === "trace" || to === "trace") {
+    return null;
+  }
+  const content = typeof args.content === "string" ? args.content : "";
+  // The wire format uses `type` (e.g. "task_delegate" / "task_result"); accept
+  // legacy `msg_type` as a fallback for older sessions.
+  const msgTypeRaw =
+    typeof args.type === "string" && args.type
+      ? args.type
+      : typeof args.msg_type === "string"
+        ? args.msg_type
+        : undefined;
+  return {
+    id: message.id,
+    from,
+    to,
+    content,
+    msgType: msgTypeRaw,
+    timestamp: message.createdAt,
+    streaming: message.streaming,
+  };
+}
+
+export function buildEdges(messages: ChatMessage[]): AgentEdge[] {
+  const map = new Map<string, AgentEdge>();
+  for (const message of messages) {
+    const item = getMessageEdge(message);
+    if (!item) continue;
+    const key = `${item.from}->${item.to}`;
+    const edge = map.get(key) ?? {
+      key,
+      from: item.from,
+      to: item.to,
+      messages: [],
+      lastTimestamp: item.timestamp,
+    };
+    edge.messages.push(item);
+    if (item.timestamp > edge.lastTimestamp) {
+      edge.lastTimestamp = item.timestamp;
+    }
+    map.set(key, edge);
+  }
+  // Sort messages within each edge by time ascending
+  for (const edge of map.values()) {
+    edge.messages.sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+  }
+  return Array.from(map.values());
+}
+
+/** Count of messages sent / received by `name` across all edges. */
+export function countMessagesFor(
+  name: string,
+  edges: AgentEdge[],
+): { sent: number; received: number } {
+  let sent = 0;
+  let received = 0;
+  for (const edge of edges) {
+    if (edge.from === name) sent += edge.messages.length;
+    if (edge.to === name) received += edge.messages.length;
+  }
+  return { sent, received };
+}
+
+/* --------------------------------------------------------------------------
+ * Display helpers
+ * ------------------------------------------------------------------------ */
+
+export function getAgentIcon(name: string) {
+  const normalized = name.toLowerCase();
+  if (normalized === "principal") return UserRoundCog;
+  if (normalized === "user") return UserRoundCog;
+  if (normalized.includes("librari")) return BookOpen;
+  if (normalized.includes("data") || normalized.includes("analy")) return BarChart3;
+  if (normalized.includes("trace")) return GitBranch;
+  if (normalized.includes("experiment")) return Microscope;
+  if (normalized.includes("engineer")) return Wrench;
+  if (normalized.includes("writer")) return PenLine;
+  if (normalized.includes("idea") || normalized.includes("creat")) return Sparkles;
+  return Bot;
+}
+
+/** Map an agent profile's `accent` to a CSS color token. */
+export function getAgentAccentVar(name: string): string {
+  const profile = getAgentProfile(name);
+  switch (profile.accent) {
+    case "info":
+      return "var(--color-info)";
+    case "success":
+      return "var(--color-success)";
+    case "warning":
+      return "var(--color-warning)";
+    case "danger":
+      return "var(--color-danger)";
+    default:
+      return "var(--color-text-subtle)";
+  }
+}
+
+export function relativeTime(iso: string, nowMs: number): string {
+  const ts = new Date(iso).getTime();
+  if (!Number.isFinite(ts)) return "";
+  const diff = nowMs - ts;
+  if (diff < 1000) return "just now";
+  if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  return new Date(iso).toLocaleTimeString();
+}
+
+export function msgTypeKind(msgType?: string): "delegate" | "result" | "neutral" {
+  if (!msgType) return "neutral";
+  if (msgType.includes("delegate") || msgType.includes("request")) return "delegate";
+  if (
+    msgType.includes("result") ||
+    msgType.includes("reply") ||
+    msgType.includes("response")
+  )
+    return "result";
+  return "neutral";
+}
+
+export function statusKind(status: string): "running" | "idle" | "error" | "stopped" {
+  if (status === "running" || status === "in_progress") return "running";
+  if (status === "error" || status === "failed") return "error";
+  if (status === "stopped" || status === "destroyed") return "stopped";
+  return "idle";
+}

package/src/components/session/traceLayout.ts

@@ -0,0 +1,150 @@
+import { TraceNode } from "../../contracts/backend";
+
+/**
+ * Pure layout & formatting helpers for the reasoning-trace graph. Shared by the
+ * live TracePanel, the presentational TraceGraphView / TraceNodeDetail, and the
+ * demo player. No React, no side effects.
+ */
+
+export function formatTime(value?: string): string {
+  if (!value) {
+    return "-";
+  }
+  return new Date(value).toLocaleString();
+}
+
+export function getStatusLabelKey(status: string): string | null {
+  if (status === "done" || status === "completed") {
+    return "trace.status.done";
+  }
+  if (status === "in_progress") {
+    return "trace.status.running";
+  }
+  return null;
+}
+
+export function normalizeStatus(status: string): string {
+  return status === "completed" ? "done" : status;
+}
+
+export function getNodeKind(node: TraceNode): string {
+  return node.nodeType || node.type || "step";
+}
+
+export function truncateNodeTitle(title?: string, maxUnits = 26): string {
+  if (!title) {
+    return "";
+  }
+  let units = 0;
+  let index = 0;
+  for (const char of title) {
+    units += char.charCodeAt(0) > 127 ? 2 : 1;
+    if (units > maxUnits) {
+      return title.slice(0, index) + "…";
+    }
+    index++;
+  }
+  return title;
+}
+
+export function formatDuration(ms?: number): string {
+  if (ms === undefined) {
+    return "-";
+  }
+  if (ms < 1000) {
+    return `${Math.round(ms)}ms`;
+  }
+  if (ms < 60_000) {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+  return `${(ms / 60_000).toFixed(1)}m`;
+}
+
+export const relationLabels: Record<string, string> = {
+  necessitated_by: "needed by",
+  used: "used",
+  produced: "produced",
+  comparison_with: "compared with",
+};
+
+export const artifactLabels: Record<string, string> = {
+  data: "data",
+  code: "code",
+  text: "text",
+  image: "image",
+  figure: "figure",
+  result: "result",
+  doc: "doc",
+  config: "config",
+  dir: "dir",
+  model: "model",
+  log: "log",
+  report: "report",
+  paper: "paper",
+};
+
+export type TraceLayoutDirection = "LR" | "TB";
+
+export type PositionedTraceNode = { node: TraceNode; x: number; y: number };
+
+export interface TraceLayout {
+  positioned: PositionedTraceNode[];
+  byId: Map<string, PositionedTraceNode>;
+  nodeWidth: number;
+  nodeHeight: number;
+  width: number;
+  height: number;
+}
+
+export function buildTraceLayout(nodes: TraceNode[], direction: TraceLayoutDirection): TraceLayout {
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const levelCache = new Map<string, number>();
+  const getLevel = (node: TraceNode): number => {
+    if (levelCache.has(node.id)) {
+      return levelCache.get(node.id) as number;
+    }
+    if (node.parentIds.length === 0) {
+      levelCache.set(node.id, 0);
+      return 0;
+    }
+    const level = 1 + Math.max(...node.parentIds.map((parentId) => {
+      const parent = byId.get(parentId);
+      return parent ? getLevel(parent) : 0;
+    }));
+    levelCache.set(node.id, level);
+    return level;
+  };
+  const grouped = new Map<number, TraceNode[]>();
+  for (const node of nodes) {
+    const level = getLevel(node);
+    grouped.set(level, [...(grouped.get(level) ?? []), node]);
+  }
+  const nodeWidth = direction === "LR" ? 200 : 214;
+  const nodeHeight = 72;
+  const levelGap = direction === "LR" ? 300 : 170;
+  const siblingGap = direction === "LR" ? 140 : 260;
+  // Center each level around a shared axis: the widest level defines the span,
+  // and every other level is offset so its midpoint lines up with that axis.
+  const maxSiblingCount = Math.max(1, ...Array.from(grouped.values()).map((s) => s.length));
+  const baseOffset = direction === "LR" ? 62 : 80;
+  const positioned = nodes.map((node) => {
+    const level = getLevel(node);
+    const siblings = grouped.get(level) ?? [];
+    const index = siblings.findIndex((item) => item.id === node.id);
+    const centeringShift = ((maxSiblingCount - siblings.length) * siblingGap) / 2;
+    const crossPos = baseOffset + centeringShift + index * siblingGap;
+    const x = direction === "LR" ? 72 + level * levelGap : crossPos;
+    const y = direction === "LR" ? crossPos : 62 + level * levelGap;
+    return { node, x, y };
+  });
+  const maxX = Math.max(220, ...positioned.map((item) => item.x + nodeWidth));
+  const maxY = Math.max(180, ...positioned.map((item) => item.y + nodeHeight));
+  return {
+    positioned,
+    byId: new Map(positioned.map((item) => [item.node.id, item])),
+    nodeWidth,
+    nodeHeight,
+    width: Math.max(720, maxX + 96),
+    height: Math.max(360, maxY + 76),
+  };
+}