From 0da78babe268f0b27b474e54c5b07977c51553c7 Mon Sep 17 00:00:00 2001
From: zFarbp <zfarbp@me.com>
Date: Wed, 23 Sep 2026 14:40:34 +0200
Subject: [PATCH] feat: agent graph

---
 packages/server/package.json                  |   2 +-
 packages/shared/package.json                  |   2 +-
 packages/web/package.json                     |   2 +-
 packages/web/src/panels/AgentsGraph.vue       | 991 ++++++++++++++++++
 packages/web/src/panels/PluginsBrowser.vue    |  15 +-
 .../web/src/views/dashboard/AgentsView.vue    | 451 ++++++--
 packages/web/src/views/dashboard/chrome.css   |  10 +-
 7 files changed, 1357 insertions(+), 116 deletions(-)
 create mode 100644 packages/web/src/panels/AgentsGraph.vue

diff --git a/packages/server/package.json b/packages/server/package.json
index e24a076..5d3850b 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "threadle",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Local-first node-graph patchbay for Claude Code, opencode, Cursor Agent, Antigravity, Codex, Copilot, and Grok Build sessions.",
   "type": "module",
   "license": "MIT",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 9e535ca..c3eb9e7 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@threadle/shared",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": true,
   "type": "module",
   "main": "./src/index.ts",
diff --git a/packages/web/package.json b/packages/web/package.json
index 7fcebe1..1ffc47e 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@threadle/web",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/packages/web/src/panels/AgentsGraph.vue b/packages/web/src/panels/AgentsGraph.vue
new file mode 100644
index 0000000..7b78ef4
--- /dev/null
+++ b/packages/web/src/panels/AgentsGraph.vue
@@ -0,0 +1,991 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import type { AgentDef, SessionRef } from "@threadle/shared";
+import { isSessionLive } from "@threadle/shared";
+import {
+  VueFlow,
+  Handle,
+  Position,
+  useVueFlow,
+  type Edge,
+  type Node,
+} from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { Controls } from "@vue-flow/controls";
+import { basename, shortId } from "@/lib/format";
+import { providerColor, providerShort } from "@/lib/providers";
+import { useSessionsStore } from "@/stores/sessions";
+import SessionLivePill from "@/panels/SessionLivePill.vue";
+
+const INST_CAP = 8;
+const COL_DEF = 40;
+const COL_PARENT = 340;
+const COL_SUB = 680;
+const ROW_H = 100;
+const DEF_GAP = 48;
+const DEF_H = 72;
+
+const RANGES = [
+  { id: "24h", label: "24h", ms: 24 * 3_600_000 },
+  { id: "7d", label: "7d", ms: 7 * 24 * 3_600_000 },
+  { id: "30d", label: "30d", ms: 30 * 24 * 3_600_000 },
+  { id: "all", label: "all", ms: Infinity },
+] as const;
+
+type GraphRangeId = (typeof RANGES)[number]["id"];
+
+export type GraphPick =
+  | { kind: "def"; agent: AgentDef }
+  | { kind: "run"; session: SessionRef };
+
+const props = defineProps<{
+  agents: AgentDef[];
+  instances: SessionRef[];
+  filter: string;
+  providerFilter: string;
+  pickedDef?: AgentDef;
+  pickedRun?: SessionRef;
+}>();
+
+const emit = defineEmits<{
+  pick: [GraphPick];
+  "open-run": [SessionRef];
+  "more-runs": [AgentDef];
+  clear: [];
+  "ctx-def": [payload: { event: MouseEvent; agent: AgentDef }];
+  "ctx-run": [payload: { event: MouseEvent; session: SessionRef }];
+}>();
+
+const sessions = useSessionsStore();
+const { fitView } = useVueFlow({ id: "agents-graph" });
+const hoverId = ref<string>();
+const range = ref<GraphRangeId>("all");
+const paneCtx = ref<{ x: number; y: number }>();
+let paneCtxIgnore = false;
+
+function isSubRun(s: SessionRef): boolean {
+  return s.kind === "subagent-run" || !!s.parentId;
+}
+
+function runKey(s: SessionRef): string {
+  return `run:${s.provider}:${s.id}`;
+}
+
+function defKey(a: AgentDef): string {
+  return `def:${a.provider}:${a.name}`;
+}
+
+function mergedStatus(s: SessionRef): SessionRef["status"] {
+  return sessions.find(s.provider, s.id)?.status ?? s.status;
+}
+
+function liveOf(s: SessionRef): boolean {
+  return isSessionLive(mergedStatus(s));
+}
+
+type Built = {
+  nodes: Node[];
+  edges: Edge[];
+  empty: boolean;
+};
+
+const built = computed<Built>(() => {
+  // Track live status merges from the sessions store so run dots update
+  void sessions.sessions.map((s) => `${s.provider}:${s.id}:${s.status}`).join("|");
+
+  const q = props.filter.trim().toLowerCase();
+  const pf = props.providerFilter;
+
+  function instanceMatches(s: SessionRef, a?: AgentDef): boolean {
+    if (pf && pf !== "all" && s.provider !== pf) return false;
+    const rangeSpec = RANGES.find((r) => r.id === range.value) ?? RANGES[3];
+    if (rangeSpec.ms !== Infinity) {
+      const cutoff = Date.now() - rangeSpec.ms;
+      if (!s.updatedAt || s.updatedAt < cutoff) return false;
+    }
+    if (!q) return true;
+    const hay = [
+      s.title ?? "",
+      s.id,
+      s.agent ?? "",
+      s.projectDir ?? "",
+      a?.name ?? "",
+    ]
+      .join(" ")
+      .toLowerCase();
+    return hay.includes(q);
+  }
+
+  function defMatches(a: AgentDef): boolean {
+    if (pf && pf !== "all" && a.provider !== pf) return false;
+    if (!q) return true;
+    if (
+      a.name.toLowerCase().includes(q) ||
+      (a.description ?? "").toLowerCase().includes(q) ||
+      a.provider.toLowerCase().includes(q)
+    ) {
+      return true;
+    }
+    return props.instances.some(
+      (s) =>
+        s.provider === a.provider &&
+        s.agent?.toLowerCase() === a.name.toLowerCase() &&
+        instanceMatches(s, a),
+    );
+  }
+
+  const catalogDefs = props.agents.filter(defMatches);
+  // Instance agent tags often don't match catalog names (Cursor explore/generalPurpose
+  // vs agent/plan/ask; Grok grok-build-plan vs grok). Synthesize def nodes for those.
+  const seenKeys = new Set(
+    catalogDefs.map((a) => `${a.provider}:${a.name.toLowerCase()}`),
+  );
+  const syntheticDefs: AgentDef[] = [];
+  for (const s of props.instances) {
+    if (!s.agent?.trim()) continue;
+    if (!instanceMatches(s)) continue;
+    const key = `${s.provider}:${s.agent.toLowerCase()}`;
+    if (seenKeys.has(key)) continue;
+    seenKeys.add(key);
+    syntheticDefs.push({
+      provider: s.provider,
+      name: s.agent,
+      source: "session-tag",
+      scope: "builtin",
+      kind: "runtime",
+      description: "From session agent tag (no matching catalog def)",
+    });
+  }
+  const defs = [...catalogDefs, ...syntheticDefs].sort((a, b) => {
+    const pc = a.provider.localeCompare(b.provider);
+    if (pc !== 0) return pc;
+    return a.name.localeCompare(b.name);
+  });
+
+  const instByKey = new Map<string, SessionRef>();
+  for (const s of props.instances) {
+    instByKey.set(`${s.provider}:${s.id}`, s);
+  }
+
+  // Parent stubs from main session list when child points outside instances
+  for (const s of props.instances) {
+    if (!s.parentId) continue;
+    const pk = `${s.provider}:${s.parentId}`;
+    if (instByKey.has(pk)) continue;
+    const parent = sessions.find(s.provider, s.parentId);
+    if (parent) instByKey.set(pk, parent);
+  }
+
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+  const placedRuns = new Set<string>();
+  let defY = 0;
+
+  for (const a of defs) {
+    const allForDef = [...instByKey.values()]
+      .filter(
+        (s) =>
+          s.provider === a.provider &&
+          s.agent?.toLowerCase() === a.name.toLowerCase() &&
+          instanceMatches(s, a),
+      )
+      .sort((x, y) => {
+        const lx = liveOf(x) ? 1 : 0;
+        const ly = liveOf(y) ? 1 : 0;
+        if (lx !== ly) return ly - lx;
+        return y.updatedAt - x.updatedAt;
+      });
+
+    const liveOnes = allForDef.filter(liveOf);
+    const rest = allForDef.filter((s) => !liveOf(s));
+    const capped = [
+      ...liveOnes,
+      ...rest.slice(0, Math.max(0, INST_CAP - liveOnes.length)),
+    ];
+    const overflow = Math.max(0, allForDef.length - capped.length);
+    const liveCount = liveOnes.length;
+
+    const dk = defKey(a);
+    nodes.push({
+      id: dk,
+      type: "ag-def",
+      position: { x: COL_DEF, y: defY },
+      data: {
+        agent: a,
+        liveCount,
+        overflow,
+        picked:
+          props.pickedDef?.provider === a.provider &&
+          props.pickedDef?.name === a.name,
+      },
+      draggable: false,
+      selectable: false,
+    });
+
+    const parents = capped.filter((s) => !isSubRun(s));
+    const subs = capped.filter((s) => isSubRun(s));
+    /** Parent-column node ids belonging to this def (for uses edges) */
+    const colParentIds = new Set<string>();
+
+    function ensureParentNode(parent: SessionRef, y: number): string {
+      const pid = runKey(parent);
+      if (!nodes.some((n) => n.id === pid)) {
+        nodes.push({
+          id: pid,
+          type: "ag-run",
+          position: { x: COL_PARENT, y },
+          data: {
+            session: parent,
+            status: mergedStatus(parent),
+            live: liveOf(parent),
+            sub: false,
+            stub: !parents.some((p) => runKey(p) === pid),
+            picked:
+              props.pickedRun?.provider === parent.provider &&
+              props.pickedRun?.id === parent.id,
+          },
+          draggable: false,
+          selectable: false,
+        });
+        placedRuns.add(pid);
+      }
+      colParentIds.add(pid);
+      return pid;
+    }
+
+    let py = defY;
+    for (const s of parents) {
+      ensureParentNode(s, py);
+      py += ROW_H;
+    }
+
+    let sy = defY;
+    for (const s of subs) {
+      const rk = runKey(s);
+      placedRuns.add(rk);
+      let parentNodeId: string | undefined;
+      if (s.parentId) {
+        const pk = `${s.provider}:${s.parentId}`;
+        const parent = instByKey.get(pk);
+        if (parent) parentNodeId = ensureParentNode(parent, sy);
+      }
+
+      nodes.push({
+        id: rk,
+        type: "ag-run",
+        position: { x: COL_SUB, y: sy },
+        data: {
+          session: s,
+          status: mergedStatus(s),
+          live: liveOf(s),
+          sub: true,
+          picked:
+            props.pickedRun?.provider === s.provider &&
+            props.pickedRun?.id === s.id,
+        },
+        draggable: false,
+        selectable: false,
+      });
+      if (parentNodeId) {
+        edges.push({
+          id: `sub-${parentNodeId}-${rk}`,
+          source: parentNodeId,
+          target: rk,
+          class: "edge-child",
+        });
+      } else {
+        edges.push({
+          id: `uses-${dk}-${rk}`,
+          source: dk,
+          target: rk,
+          class: "edge-child",
+        });
+      }
+      sy += ROW_H;
+    }
+
+    // Always link def → every parent-column node for this agent
+    for (const pid of colParentIds) {
+      edges.push({
+        id: `uses-${dk}-${pid}`,
+        source: dk,
+        target: pid,
+        class: "edge-child",
+      });
+    }
+
+    const blockH = Math.max(
+      DEF_H,
+      colParentIds.size * ROW_H,
+      subs.length * ROW_H,
+      1 * ROW_H,
+    );
+    defY += blockH + DEF_GAP;
+  }
+
+  // Deduplicate edges by id
+  const seenE = new Set<string>();
+  const uniqEdges = edges.filter((e) => {
+    if (seenE.has(e.id)) return false;
+    seenE.add(e.id);
+    return true;
+  });
+
+  return {
+    nodes,
+    edges: uniqEdges,
+    empty: !defs.length,
+  };
+});
+
+/** Sticky selection from aside pick; hover previews a different focus */
+const focusId = computed(() => {
+  if (hoverId.value) return hoverId.value;
+  if (props.pickedRun) return runKey(props.pickedRun);
+  if (props.pickedDef) return defKey(props.pickedDef);
+  return undefined;
+});
+
+const related = computed(() => {
+  const id = focusId.value;
+  if (!id) return null;
+  const set = new Set<string>([id]);
+  for (const e of built.value.edges) {
+    if (e.source === id || e.target === id) {
+      set.add(e.source);
+      set.add(e.target);
+    }
+  }
+  // one hop further for def→run→sub
+  for (const e of built.value.edges) {
+    if (set.has(e.source) || set.has(e.target)) {
+      set.add(e.source);
+      set.add(e.target);
+    }
+  }
+  return set;
+});
+
+const displayEdges = computed((): Edge[] => {
+  const focus = focusId.value;
+  const rel = related.value;
+  return built.value.edges.map((e) => {
+    // Direct edges on the focused node, plus any edge fully inside the related
+    // neighborhood (keeps def → parent visible when a parent/sub is selected).
+    const incident = !!focus && (e.source === focus || e.target === focus);
+    const inNeighborhood = !!rel && rel.has(e.source) && rel.has(e.target);
+    const onPath = incident || inNeighborhood;
+    const classes = ["edge-child"];
+    if (rel) classes.push(onPath ? "ag-edge-hi" : "ag-edge-dim");
+    return {
+      ...e,
+      class: classes.join(" "),
+      animated: false,
+    };
+  });
+});
+
+function isDimmed(id: string): boolean {
+  const rel = related.value;
+  if (!rel) return false;
+  return !rel.has(id);
+}
+
+watch(
+  () =>
+    [
+      props.providerFilter,
+      props.filter,
+      range.value,
+      built.value.nodes.map((n) => n.id).join("\0"),
+      built.value.edges.map((e) => e.id).join("\0"),
+    ].join("|"),
+  async () => {
+    await nextTick();
+    // Vue Flow often needs a frame after node swap before fit measures correctly
+    requestAnimationFrame(() => {
+      try {
+        fitView({ padding: 0.2, duration: 180, maxZoom: 1.2 });
+      } catch {
+        /* flow may not be ready */
+      }
+    });
+  },
+);
+
+function fitAll(): void {
+  fitView({ padding: 0.2, duration: 260 });
+}
+
+function onPaneClick(): void {
+  hoverId.value = undefined;
+  paneCtx.value = undefined;
+  emit("clear");
+}
+
+function placePaneCtx(e: MouseEvent): { x: number; y: number } {
+  const pad = 8;
+  const mw = 200;
+  const mh = 160;
+  return {
+    x: Math.min(e.clientX, window.innerWidth - mw - pad),
+    y: Math.min(e.clientY, window.innerHeight - mh - pad),
+  };
+}
+
+function onPaneCtx(e: MouseEvent): void {
+  e.preventDefault();
+  e.stopPropagation();
+  paneCtxIgnore = true;
+  paneCtx.value = placePaneCtx(e);
+  requestAnimationFrame(() => {
+    paneCtxIgnore = false;
+  });
+}
+
+function onNodeCtx(payload: { event: MouseEvent | TouchEvent; node: Node }): void {
+  const e = payload.event;
+  if (!("clientX" in e)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  paneCtx.value = undefined;
+  const n = payload.node;
+  const me = e as MouseEvent;
+  if (n.type === "ag-def" && n.data?.agent) {
+    const agent = n.data.agent as AgentDef;
+    emit("pick", { kind: "def", agent });
+    emit("ctx-def", { event: me, agent });
+  } else if (n.type === "ag-run" && n.data?.session) {
+    const session = n.data.session as SessionRef;
+    emit("pick", { kind: "run", session });
+    emit("ctx-run", { event: me, session });
+  }
+}
+
+function paneMenuAction(fn: () => void): void {
+  try {
+    fn();
+  } finally {
+    paneCtx.value = undefined;
+  }
+}
+
+function dismissPaneCtx(e: MouseEvent): void {
+  if (paneCtxIgnore || e.button !== 0) return;
+  const t = e.target as HTMLElement;
+  if (!t.closest?.(".ag-pane-ctx")) paneCtx.value = undefined;
+}
+
+onMounted(() => {
+  document.addEventListener("click", dismissPaneCtx);
+  document.addEventListener("contextmenu", dismissPaneCtx);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", dismissPaneCtx);
+  document.removeEventListener("contextmenu", dismissPaneCtx);
+});
+
+function onDefClick(a: AgentDef): void {
+  emit("pick", { kind: "def", agent: a });
+}
+
+function onRunClick(s: SessionRef): void {
+  emit("pick", { kind: "run", session: s });
+}
+
+function onRunDbl(s: SessionRef): void {
+  emit("open-run", s);
+}
+
+function onMore(a: AgentDef): void {
+  emit("more-runs", a);
+}
+
+function onNodeClick(payload: { node: Node }): void {
+  const n = payload.node;
+  if (n.type === "ag-def" && n.data?.agent) onDefClick(n.data.agent as AgentDef);
+  else if (n.type === "ag-run" && n.data?.session) onRunClick(n.data.session as SessionRef);
+}
+
+function onNodeDbl(payload: { node: Node }): void {
+  const n = payload.node;
+  if (n.type === "ag-run" && n.data?.session) onRunDbl(n.data.session as SessionRef);
+}
+
+defineExpose({ fitAll });
+</script>
+
+<template>
+  <div class="ag-graph">
+    <div class="ag-graph-toolbar chip-row">
+      <button
+        v-for="r in RANGES"
+        :key="r.id"
+        type="button"
+        class="filter-chip"
+        :class="{ active: range === r.id }"
+        :title="
+          r.ms === Infinity
+            ? 'Show all instances'
+            : `Instances updated within the last ${r.label}`
+        "
+        @click="range = r.id"
+      >
+        {{ r.label }}
+      </button>
+      <button
+        type="button"
+        class="filter-chip"
+        title="Fit the full graph in view"
+        @click="fitAll"
+      >
+        ⊡ fit
+      </button>
+      <span class="ag-graph-hint mono micro-label">
+        defs → instances → subs
+      </span>
+    </div>
+    <div class="ag-graph-body">
+      <div class="ag-graph-canvas">
+        <VueFlow
+          :key="`ag-flow-${providerFilter}-${range}`"
+          id="agents-graph"
+          :nodes="built.nodes"
+          :edges="displayEdges"
+          :nodes-connectable="false"
+          :edges-updatable="false"
+          :nodes-draggable="false"
+          fit-view-on-init
+          :min-zoom="0.12"
+          :max-zoom="1.4"
+          @pane-click="onPaneClick"
+          @pane-context-menu="onPaneCtx"
+          @node-click="onNodeClick"
+          @node-double-click="onNodeDbl"
+          @node-context-menu="onNodeCtx"
+          @node-mouse-enter="(p) => (hoverId = p.node.id)"
+          @node-mouse-leave="hoverId = undefined"
+        >
+          <Background
+            id="ag-grid-minor"
+            variant="lines"
+            :gap="10"
+            :line-width="1"
+            color="var(--grid-line)"
+          />
+          <Background
+            id="ag-grid-major"
+            variant="lines"
+            :gap="100"
+            :line-width="1"
+            color="var(--grid-line-major)"
+          />
+          <Controls position="bottom-left" />
+
+          <template #node-ag-def="{ id, data }">
+            <div
+              class="ag-node ag-def"
+              :class="{
+                dimmed: isDimmed(id),
+                sel: data.picked,
+                live: data.liveCount > 0,
+              }"
+            >
+              <Handle
+                type="source"
+                :position="Position.Right"
+                class="ag-handle"
+                :style="{ borderColor: providerColor(data.agent.provider) }"
+              />
+              <div
+                class="ag-tile"
+                :style="{ background: providerColor(data.agent.provider) }"
+              >
+                <span class="ag-glyph">⟨/⟩</span>
+                <span
+                  v-if="data.liveCount"
+                  class="ag-live-mark"
+                  :title="`${data.liveCount} live`"
+                />
+              </div>
+              <div class="ag-body">
+                <div class="ag-name mono" :title="data.agent.name">
+                  {{ data.agent.name }}
+                </div>
+                <div class="ag-meta mono">
+                  {{ providerShort(data.agent.provider) }}
+                  <span v-if="data.agent.kind === 'runtime'" class="dim">· session tag</span>
+                  <span v-else-if="data.agent.scope" class="dim">· {{ data.agent.scope }}</span>
+                  <span v-if="data.liveCount" class="ag-live">● {{ data.liveCount }} live</span>
+                </div>
+                <button
+                  v-if="data.overflow"
+                  type="button"
+                  class="ag-more mono"
+                  @click.stop="onMore(data.agent)"
+                >
+                  +{{ data.overflow }} more
+                </button>
+              </div>
+            </div>
+          </template>
+
+          <template #node-ag-run="{ id, data }">
+            <div
+              class="ag-node ag-run"
+              :class="{
+                dimmed: isDimmed(id),
+                sel: data.picked,
+                live: data.live,
+                sub: data.sub,
+                stub: data.stub,
+              }"
+            >
+              <Handle
+                type="target"
+                :position="Position.Left"
+                class="ag-handle"
+                :style="{ borderColor: providerColor(data.session.provider) }"
+              />
+              <Handle
+                type="source"
+                :position="Position.Right"
+                class="ag-handle"
+                :style="{ borderColor: providerColor(data.session.provider) }"
+              />
+              <div
+                class="ag-tile"
+                :style="{ background: providerColor(data.session.provider) }"
+              >
+                <span class="ag-glyph">{{ data.sub ? "⎇" : "❯" }}</span>
+                <span
+                  v-if="data.live"
+                  class="ag-live-mark"
+                  :class="data.status"
+                  :title="data.status"
+                />
+                <span
+                  v-else
+                  class="status-dot ag-status"
+                  :class="data.status"
+                />
+              </div>
+              <div class="ag-body">
+                <div
+                  class="ag-name"
+                  :title="data.session.title ?? data.session.id"
+                >
+                  {{ data.session.title ?? shortId(data.session.id) }}
+                </div>
+                <div class="ag-meta mono">
+                  <SessionLivePill :status="data.status" />
+                  <span class="ag-meta-rest">
+                    <template v-if="data.sub && data.session.parentId">
+                      ↑ {{ shortId(data.session.parentId) }}
+                    </template>
+                    <template v-else>
+                      {{ shortId(data.session.id) }}
+                      <span v-if="data.session.projectDir" class="dim">
+                        · {{ basename(data.session.projectDir) }}
+                      </span>
+                    </template>
+                    <span v-if="data.session.agent" class="dim">
+                      · ⟨/⟩ {{ data.session.agent }}
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </VueFlow>
+
+        <div v-if="built.empty" class="ag-empty mono">
+          no agents match these filters
+        </div>
+      </div>
+      <slot name="aside" />
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="paneCtx"
+        class="menu-pop wf-folder-ctx ag-pane-ctx"
+        :style="{ left: paneCtx.x + 'px', top: paneCtx.y + 'px' }"
+        @click.stop
+        @contextmenu.prevent
+      >
+        <button
+          type="button"
+          class="menu-item"
+          @click="paneMenuAction(() => fitAll())"
+        >
+          <span class="menu-glyph">⊡</span> Fit graph
+        </button>
+        <button
+          type="button"
+          class="menu-item"
+          @click="
+            paneMenuAction(() => {
+              emit('clear');
+            })
+          "
+        >
+          <span class="menu-glyph">✕</span> Clear selection
+        </button>
+        <button
+          type="button"
+          class="menu-item"
+          :class="{ toggled: range === '24h' }"
+          @click="paneMenuAction(() => (range = '24h'))"
+        >
+          <span class="menu-glyph">◷</span> Range 24h
+        </button>
+        <button
+          type="button"
+          class="menu-item"
+          :class="{ toggled: range === '7d' }"
+          @click="paneMenuAction(() => (range = '7d'))"
+        >
+          <span class="menu-glyph">◷</span> Range 7d
+        </button>
+        <button
+          type="button"
+          class="menu-item"
+          :class="{ toggled: range === '30d' }"
+          @click="paneMenuAction(() => (range = '30d'))"
+        >
+          <span class="menu-glyph">◷</span> Range 30d
+        </button>
+        <button
+          type="button"
+          class="menu-item"
+          :class="{ toggled: range === 'all' }"
+          @click="paneMenuAction(() => (range = 'all'))"
+        >
+          <span class="menu-glyph">◷</span> Range all
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.ag-graph {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ag-graph-toolbar {
+  flex-shrink: 0;
+  align-items: center;
+}
+.ag-graph-hint {
+  color: var(--text-faint);
+}
+.ag-graph-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  gap: 16px;
+  align-items: stretch;
+}
+.ag-graph-canvas {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 420px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--bg);
+}
+.ag-graph-canvas :deep(.vue-flow__node) {
+  pointer-events: all;
+}
+.ag-graph-canvas :deep(.vue-flow__edges) {
+  pointer-events: none;
+}
+.ag-graph-canvas :deep(.vue-flow__edge.ag-edge-hi .vue-flow__edge-path) {
+  stroke: var(--text-dim) !important;
+  stroke-width: 1.75;
+  opacity: 0.9;
+  stroke-dasharray: none;
+}
+.ag-graph-canvas :deep(.vue-flow__edge.ag-edge-dim .vue-flow__edge-path) {
+  opacity: 0.14;
+  stroke-width: 1;
+}
+.ag-empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--text-faint);
+  font-size: var(--fs-sm);
+  pointer-events: none;
+}
+.ag-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 220px;
+  max-width: 280px;
+  padding: 8px 10px 8px 8px;
+  background: var(--panel-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  box-shadow: var(--shadow);
+}
+.ag-node.sel {
+  border-color: var(--border-strong);
+  outline: 1px solid var(--accent);
+}
+.ag-node.live {
+  border-color: color-mix(in srgb, var(--status-live, #3ecf8e) 55%, var(--border));
+  box-shadow:
+    var(--shadow),
+    0 0 0 1px color-mix(in srgb, var(--status-live, #3ecf8e) 35%, transparent);
+}
+.ag-node.dimmed {
+  opacity: 0.28;
+}
+.ag-node.stub {
+  opacity: 0.7;
+  border-style: dashed;
+}
+.ag-tile {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  color: #000;
+}
+.ag-glyph {
+  font-size: var(--fs-sm);
+  line-height: 1;
+}
+.ag-status {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+}
+.ag-live-mark {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--status-live, #3ecf8e);
+  border: 2px solid var(--panel-bg);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-live, #3ecf8e) 55%, transparent);
+  animation: ag-live-pulse 1.4s ease-out infinite;
+}
+.ag-live-mark.running {
+  background: var(--status-running);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-running) 55%, transparent);
+  animation-name: ag-run-pulse;
+}
+.ag-live-mark.waiting {
+  background: var(--status-waiting);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-waiting) 55%, transparent);
+  animation-name: ag-wait-pulse;
+  animation-duration: 1.1s;
+}
+@keyframes ag-live-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-live, #3ecf8e) 55%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+@keyframes ag-run-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-running) 55%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+@keyframes ag-wait-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-waiting) 55%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+.ag-body {
+  min-width: 0;
+  flex: 1;
+}
+.ag-name {
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ag-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-xs);
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.ag-meta-rest {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ag-meta .session-live-pill {
+  height: 16px;
+  padding: 0 5px;
+  font-size: 9px;
+  letter-spacing: 0.04em;
+}
+.ag-meta .dim {
+  color: var(--text-faint);
+}
+.ag-live {
+  color: var(--status-live, #3ecf8e);
+  animation: pulse 1.4s ease-in-out infinite;
+}
+.ag-more {
+  appearance: none;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: var(--fs-xs);
+  padding: 0;
+  margin-top: 2px;
+}
+.ag-more:hover {
+  color: var(--text);
+}
+.ag-handle {
+  width: 8px !important;
+  height: 8px !important;
+  background: var(--panel-bg) !important;
+}
+</style>
diff --git a/packages/web/src/panels/PluginsBrowser.vue b/packages/web/src/panels/PluginsBrowser.vue
index beb877c..da50e38 100644
--- a/packages/web/src/panels/PluginsBrowser.vue
+++ b/packages/web/src/panels/PluginsBrowser.vue
@@ -124,6 +124,10 @@ const filtered = computed(() => {
   });
 });
 
+function childCount(e: PluginEntry, kind: PluginChildKind): number {
+  return e.children.filter((c) => c.kind === kind).length;
+}
+
 interface ProvGroup {
   provider: string;
   entries: PluginEntry[];
@@ -284,12 +288,15 @@ const loading = computed(() => items.value === undefined);
           </div>
           <div
             class="stat-table cols-plug"
-            v-col-resize="'plug-v1'"
-            data-cols="minmax(0,1fr) 72px 88px 120px 48px"
+            v-col-resize="'plug-v2'"
+            data-cols="minmax(0,1fr) 72px 88px 120px 56px 56px 64px"
           >
             <div class="stat-cols micro-label">
               <span>name</span><span>ver</span><span>state</span
-              ><span>origin</span><span class="num">kids</span>
+              ><span>origin</span
+              ><span class="num">commands</span
+              ><span class="num">agents</span
+              ><span class="num">children</span>
             </div>
             <button
               v-for="e in g.entries"
@@ -306,6 +313,8 @@ const loading = computed(() => items.value === undefined);
               <span class="mono dim ellip" :title="e.origin.marketplaceId || e.origin.kind">{{
                 e.origin.marketplaceId || e.origin.kind
               }}</span>
+              <span class="num mono">{{ childCount(e, "command") }}</span>
+              <span class="num mono">{{ childCount(e, "agent") }}</span>
               <span class="num mono">{{ e.children.length }}</span>
             </button>
           </div>
diff --git a/packages/web/src/views/dashboard/AgentsView.vue b/packages/web/src/views/dashboard/AgentsView.vue
index b418610..bfde2b9 100644
--- a/packages/web/src/views/dashboard/AgentsView.vue
+++ b/packages/web/src/views/dashboard/AgentsView.vue
@@ -22,7 +22,9 @@
               ? 'Filter memory…'
               : agentBrowse === 'plugins'
                 ? 'Filter plugins…'
-                : 'Filter runs…'
+                : agentBrowse === 'graph'
+                  ? 'Filter graph…'
+                  : 'Filter runs…'
         "
         spellcheck="false"
       />
@@ -59,6 +61,14 @@
         >
           live{{ agentInstances.live ? ` · ${agentInstances.live}` : "" }}
         </button>
+        <button
+          class="filter-chip"
+          :class="{ active: agentBrowse === 'graph' }"
+          title="Agent defs, instances, and subagent links"
+          @click="setAgentBrowse('graph')"
+        >
+          graph
+        </button>
         <button
           class="filter-chip"
           :class="{ active: agentBrowse === 'memory' }"
@@ -100,8 +110,116 @@
           />
         </div>
 
+        <!-- graph: defs + instances + sub edges -->
+        <div v-else-if="agentBrowse === 'graph'" class="ag-graph-row">
+          <AgentsGraph
+            :agents="sessions.agents"
+            :instances="instanceSource"
+            :filter="agentFilter"
+            :provider-filter="agentProviderF"
+            :picked-def="agentPicked"
+            :picked-run="pickedRun"
+            @pick="onGraphPick"
+            @open-run="openRunInSessions"
+            @more-runs="browseAgentRuns"
+            @clear="onGraphClear"
+            @ctx-def="onGraphCtxDef"
+            @ctx-run="onGraphCtxRun"
+          >
+            <template #aside>
+              <aside v-if="pickedRun" class="lib-aside ag-graph-aside">
+                <div class="lib-aside-head">
+                  <div class="sess-detail-titles">
+                    <span class="lib-aside-title mono">{{ pickedRun.title ?? shortId(pickedRun.id) }}</span>
+                    <div class="sess-detail-meta mono">
+                      <SessionLivePill :status="pickedRunLiveStatus" />
+                      <span v-if="isSubRun(pickedRun)" class="inst-sub micro-label">sub</span>
+                      <span v-if="pickedRun.agent" class="sess-detail-agent">⟨/⟩ {{ pickedRun.agent }}</span>
+                    </div>
+                  </div>
+                  <DetailExpandControls
+                    @expand="runDetailExpanded = true"
+                    @close="closePickedRun"
+                  />
+                </div>
+                <div class="sess-detail-actions">
+                  <button class="vsc-btn" title="Open in Sessions" @click="openRunInSessions(pickedRun)">
+                    ❯ sessions
+                  </button>
+                  <button
+                    class="vsc-btn"
+                    title="View the interactive message transcript in a floating window"
+                    @click="fileViewers.openTranscript(pickedRun.provider, pickedRun.id)"
+                  >
+                    ≡ transcript
+                  </button>
+                  <button
+                    class="vsc-btn"
+                    @click="router.push(`/blueprint/${pickedRun.provider}/${pickedRun.id}`)"
+                  >
+                    ⌗ blueprint
+                  </button>
+                  <button
+                    v-if="pickedRun.parentId"
+                    class="vsc-btn"
+                    title="Open parent session"
+                    @click="openRunParent(pickedRun)"
+                  >
+                    ↑ parent
+                  </button>
+                </div>
+                <SessionInfoPanel
+                  :provider="pickedRun.provider"
+                  :session-id="pickedRun.id"
+                  :seed="pickedRun"
+                  @open-parent="openRunParent(pickedRun)"
+                />
+              </aside>
+              <aside v-else-if="agentPicked" class="lib-aside ag-graph-aside">
+                <div class="lib-aside-head">
+                  <span class="lib-aside-title mono">⟨/⟩ {{ agentPicked.name }}</span>
+                  <DetailExpandControls
+                    @expand="agentDetailExpanded = true"
+                    @close="closeAgentPicked"
+                  />
+                </div>
+                <div class="run-kv mono">
+                  <span class="run-key">provider</span><span class="run-val">{{ agentPicked.provider }}</span>
+                  <span class="run-key">kind</span><span class="run-val">{{ agentPicked.kind ?? "—" }}</span>
+                  <span class="run-key">scope</span><span class="run-val">{{ agentPicked.scope }}</span>
+                  <span class="run-key">model</span><span class="run-val">{{ agentPicked.model ?? "session default" }}</span>
+                  <span class="run-key">used</span
+                  ><span class="run-val">
+                    {{ agentUsage(agentPicked).count
+                      ? `${agentUsage(agentPicked).count} sessions · last ${agentUsage(agentPicked).last}`
+                      : "never" }}
+                  </span>
+                </div>
+                <div class="sess-detail-actions">
+                  <button class="vsc-btn" title="Show this agent's instances" @click="browseAgentRuns(agentPicked)">
+                    ❯ instances
+                  </button>
+                  <button
+                    v-if="isAbsolutePath(agentPicked.source)"
+                    class="vsc-btn"
+                    @click="settings.openPath(agentPicked.source)"
+                  >
+                    ✎ {{ settings.editorLabel }}
+                  </button>
+                </div>
+              </aside>
+              <aside v-else class="lib-aside lib-aside-empty ag-graph-aside">
+                <p class="stat-note">Select a def or run on the graph.</p>
+              </aside>
+            </template>
+          </AgentsGraph>
+        </div>
+
         <!-- runs / subagents / live: table + in-place detail -->
-        <div v-else-if="agentBrowse !== 'defs'" class="lib-flex">
+        <div
+          v-else-if="agentBrowse === 'runs' || agentBrowse === 'subs' || agentBrowse === 'live'"
+          class="lib-flex"
+        >
           <div class="agent-main">
             <div
               class="stat-table cols-inst"
@@ -127,8 +245,13 @@
               >
                 <span class="stat-name mono">
                   <span class="prov-dot" :style="{ background: providerColor(s.provider) }" />
-                  {{ s.agent }}
+                  {{ s.agent || "—" }}
                   <span v-if="isSubRun(s)" class="inst-sub micro-label">sub</span>
+                  <span
+                    v-else-if="!s.agent"
+                    class="inst-sub micro-label"
+                    title="Parent session (no agent tag)"
+                  >parent</span>
                 </span>
                 <span class="stat-name inst-title" :title="s.title ?? s.id">{{ s.title ?? shortId(s.id) }}</span>
                 <span class="stat-val inst-proj mono" :title="s.projectDir">{{ s.projectDir?.split("/").pop() ?? "—" }}</span>
@@ -210,32 +333,6 @@
           <aside v-else class="lib-aside lib-aside-empty">
             <p class="stat-note">Select a run to inspect it here.</p>
           </aside>
-
-          <DetailExpandModal
-            :open="!!pickedRun && runDetailExpanded"
-            :label="pickedRun?.title ?? (pickedRun ? shortId(pickedRun.id) : 'Run')"
-            @close="runDetailExpanded = false"
-          >
-            <template v-if="pickedRun">
-              <div class="lib-aside-head">
-                <div class="sess-detail-titles">
-                  <span class="lib-aside-title mono">{{ pickedRun.title ?? shortId(pickedRun.id) }}</span>
-                  <div class="sess-detail-meta mono">
-                    <SessionLivePill :status="pickedRunLiveStatus" />
-                    <span v-if="isSubRun(pickedRun)" class="inst-sub micro-label">sub</span>
-                    <span v-if="pickedRun.agent" class="sess-detail-agent">⟨/⟩ {{ pickedRun.agent }}</span>
-                  </div>
-                </div>
-                <DetailExpandControls hide-expand @close="runDetailExpanded = false" />
-              </div>
-              <SessionInfoPanel
-                :provider="pickedRun.provider"
-                :session-id="pickedRun.id"
-                :seed="pickedRun"
-                @open-parent="openRunParent(pickedRun)"
-              />
-            </template>
-          </DetailExpandModal>
         </div>
 
         <div v-else class="lib-flex">
@@ -345,76 +442,129 @@
             </template>
             <p v-else class="stat-note">no prompt body recorded for this agent</p>
           </aside>
+        </div>
 
-          <DetailExpandModal
-            :open="!!agentPicked && agentDetailExpanded"
-            :label="agentPicked ? `⟨/⟩ ${agentPicked.name}` : 'Agent'"
-            @close="agentDetailExpanded = false"
+  <!-- Always mounted so graph / runs / defs asides can open the same expand popup -->
+  <DetailExpandModal
+    :open="!!pickedRun && runDetailExpanded"
+    :label="pickedRun?.title ?? (pickedRun ? shortId(pickedRun.id) : 'Run')"
+    @close="runDetailExpanded = false"
+  >
+    <template v-if="pickedRun">
+      <div class="lib-aside-head">
+        <div class="sess-detail-titles">
+          <span class="lib-aside-title mono">{{ pickedRun.title ?? shortId(pickedRun.id) }}</span>
+          <div class="sess-detail-meta mono">
+            <SessionLivePill :status="pickedRunLiveStatus" />
+            <span v-if="isSubRun(pickedRun)" class="inst-sub micro-label">sub</span>
+            <span v-if="pickedRun.agent" class="sess-detail-agent">⟨/⟩ {{ pickedRun.agent }}</span>
+          </div>
+        </div>
+        <DetailExpandControls hide-expand @close="runDetailExpanded = false" />
+      </div>
+      <div class="sess-detail-actions">
+        <button class="vsc-btn" title="Open in Sessions" @click="openRunInSessions(pickedRun)">
+          ❯ sessions
+        </button>
+        <button
+          class="vsc-btn"
+          title="View the interactive message transcript in a floating window"
+          @click="fileViewers.openTranscript(pickedRun.provider, pickedRun.id)"
+        >
+          ≡ transcript
+        </button>
+        <button
+          class="vsc-btn"
+          @click="router.push(`/blueprint/${pickedRun.provider}/${pickedRun.id}`)"
+        >
+          ⌗ blueprint
+        </button>
+        <button
+          v-if="pickedRun.parentId"
+          class="vsc-btn"
+          title="Open parent session"
+          @click="openRunParent(pickedRun)"
+        >
+          ↑ parent
+        </button>
+      </div>
+      <SessionInfoPanel
+        :provider="pickedRun.provider"
+        :session-id="pickedRun.id"
+        :seed="pickedRun"
+        @open-parent="openRunParent(pickedRun)"
+      />
+    </template>
+  </DetailExpandModal>
+
+  <DetailExpandModal
+    :open="!!agentPicked && agentDetailExpanded"
+    :label="agentPicked ? `⟨/⟩ ${agentPicked.name}` : 'Agent'"
+    @close="agentDetailExpanded = false"
+  >
+    <template v-if="agentPicked">
+      <div class="lib-aside-head">
+        <span class="lib-aside-title mono">⟨/⟩ {{ agentPicked.name }}</span>
+        <DetailExpandControls hide-expand @close="agentDetailExpanded = false" />
+      </div>
+      <div class="run-kv mono">
+        <span class="run-key">provider</span><span class="run-val">{{ agentPicked.provider }}</span>
+        <span class="run-key">kind</span><span class="run-val">{{ agentPicked.kind ?? "—" }}</span>
+        <span class="run-key">scope</span><span class="run-val">{{ agentPicked.scope }}</span>
+        <span class="run-key">model</span><span class="run-val">{{ agentPicked.model ?? "session default" }}</span>
+        <span class="run-key">source</span><span class="run-val">{{ agentPicked.source }}</span>
+        <span class="run-key">used</span
+        ><span class="run-val">
+          {{ agentUsage(agentPicked).count
+            ? `${agentUsage(agentPicked).count} sessions · last ${agentUsage(agentPicked).last} · ${fmtTokens(agentUsage(agentPicked).tokensOut)} tok out`
+            : "never" }}
+        </span>
+      </div>
+      <div class="sess-detail-actions">
+        <button class="vsc-btn" title="New workflow: prompt wired into this agent" @click="useAgentInWorkflow">
+          → use in workflow
+        </button>
+        <button
+          class="vsc-btn"
+          title="Show this agent's instances"
+          @click="browseAgentRuns(agentPicked)"
+        >
+          ❯ instances
+        </button>
+        <button
+          v-if="isAbsolutePath(agentPicked.source)"
+          class="vsc-btn"
+          @click="settings.openPath(agentPicked.source)"
+        >
+          ✎ {{ settings.editorLabel }}
+        </button>
+      </div>
+      <template v-if="agentUsage(agentPicked).recent.length">
+        <div class="micro-label">
+          recent ({{ agentUsage(agentPicked).count
+          }}<template v-if="agentUsage(agentPicked).live"> · {{ agentUsage(agentPicked).live }} live</template>)
+        </div>
+        <div class="lin-injlist">
+          <button
+            v-for="r in agentUsage(agentPicked).recent"
+            :key="r.provider + r.id"
+            class="lin-inj mono"
+            @click="jumpToRun(r)"
+            @contextmenu.prevent.stop="openRunCtx($event, r)"
           >
-            <template v-if="agentPicked">
-              <div class="lib-aside-head">
-                <span class="lib-aside-title mono">⟨/⟩ {{ agentPicked.name }}</span>
-                <DetailExpandControls hide-expand @close="agentDetailExpanded = false" />
-              </div>
-              <div class="run-kv mono">
-                <span class="run-key">provider</span><span class="run-val">{{ agentPicked.provider }}</span>
-                <span class="run-key">kind</span><span class="run-val">{{ agentPicked.kind ?? "—" }}</span>
-                <span class="run-key">scope</span><span class="run-val">{{ agentPicked.scope }}</span>
-                <span class="run-key">model</span><span class="run-val">{{ agentPicked.model ?? "session default" }}</span>
-                <span class="run-key">source</span><span class="run-val">{{ agentPicked.source }}</span>
-                <span class="run-key">used</span
-                ><span class="run-val">
-                  {{ agentUsage(agentPicked).count
-                    ? `${agentUsage(agentPicked).count} sessions · last ${agentUsage(agentPicked).last} · ${fmtTokens(agentUsage(agentPicked).tokensOut)} tok out`
-                    : "never" }}
-                </span>
-              </div>
-              <div class="sess-detail-actions">
-                <button class="vsc-btn" title="New workflow: prompt wired into this agent" @click="useAgentInWorkflow">
-                  → use in workflow
-                </button>
-                <button
-                  class="vsc-btn"
-                  title="Show this agent's instances"
-                  @click="browseAgentRuns(agentPicked)"
-                >
-                  ❯ instances
-                </button>
-                <button
-                  v-if="isAbsolutePath(agentPicked.source)"
-                  class="vsc-btn"
-                  @click="settings.openPath(agentPicked.source)"
-                >
-                  ✎ {{ settings.editorLabel }}
-                </button>
-              </div>
-              <template v-if="agentUsage(agentPicked).recent.length">
-                <div class="micro-label">
-                  recent ({{ agentUsage(agentPicked).count
-                  }}<template v-if="agentUsage(agentPicked).live"> · {{ agentUsage(agentPicked).live }} live</template>)
-                </div>
-                <div class="lin-injlist">
-                  <button
-                    v-for="r in agentUsage(agentPicked).recent"
-                    :key="r.provider + r.id"
-                    class="lin-inj mono"
-                    @click="jumpToRun(r)"
-                    @contextmenu.prevent.stop="openRunCtx($event, r)"
-                  >
-                    <i class="inst-dot" :class="{ live: isSessionLive(r.status) }" />
-                    <span v-if="isSubRun(r)" class="inst-sub micro-label">sub</span>
-                    {{ r.title ?? shortId(r.id) }} <em>{{ relativeTime(r.updatedAt) }}</em>
-                  </button>
-                </div>
-              </template>
-              <template v-if="agentPicked.raw">
-                <div class="micro-label">system prompt / definition</div>
-                <pre class="lin-content mono">{{ agentPicked.raw.slice(0, 12000) }}</pre>
-              </template>
-              <p v-else class="stat-note">no prompt body recorded for this agent</p>
-            </template>
-          </DetailExpandModal>
+            <i class="inst-dot" :class="{ live: isSessionLive(r.status) }" />
+            <span v-if="isSubRun(r)" class="inst-sub micro-label">sub</span>
+            {{ r.title ?? shortId(r.id) }} <em>{{ relativeTime(r.updatedAt) }}</em>
+          </button>
         </div>
+      </template>
+      <template v-if="agentPicked.raw">
+        <div class="micro-label">system prompt / definition</div>
+        <pre class="lin-content mono">{{ agentPicked.raw.slice(0, 12000) }}</pre>
+      </template>
+      <p v-else class="stat-note">no prompt body recorded for this agent</p>
+    </template>
+  </DetailExpandModal>
 
   <Teleport to="body">
     <div
@@ -424,9 +574,6 @@
       @click.stop
       @contextmenu.prevent
     >
-      <button type="button" class="menu-item" @click="menuAction(() => selectRun(runCtx!.session))">
-        <span class="menu-glyph">↗</span> Details
-      </button>
       <button
         type="button"
         class="menu-item"
@@ -498,9 +645,6 @@
       @click.stop
       @contextmenu.prevent
     >
-      <button type="button" class="menu-item" @click="menuAction(() => pickAgent(defCtx!.agent))">
-        <span class="menu-glyph">↗</span> Details
-      </button>
       <button
         type="button"
         class="menu-item"
@@ -532,7 +676,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import type { AgentDef, SessionRef } from "@threadle/shared";
 import { isAbsolutePath, isSessionLive } from "@threadle/shared";
@@ -549,12 +693,14 @@ import { useFileViewersStore } from "@/stores/fileViewers";
 import { useFavoritesStore } from "@/stores/favorites";
 import { agentToWorkflow } from "@/lib/convert";
 import { vColResize } from "@/lib/colResize";
+import { api } from "@/api/client";
 import ProviderFilterChips from "@/components/ProviderFilterChips.vue";
 import SessionInfoPanel from "@/panels/SessionInfoPanel.vue";
 import SessionLivePill from "@/panels/SessionLivePill.vue";
 import GrowthMark from "@/panels/GrowthMark.vue";
 import MemoryBrowser from "@/panels/MemoryBrowser.vue";
 import PluginsBrowser from "@/panels/PluginsBrowser.vue";
+import AgentsGraph, { type GraphPick } from "@/panels/AgentsGraph.vue";
 import DetailExpandControls from "@/panels/DetailExpandControls.vue";
 import DetailExpandModal from "@/panels/DetailExpandModal.vue";
 import "./chrome.css";
@@ -686,7 +832,7 @@ const agentInstances = computed(() => ({
 }));
 
 /** Exclusive Agents browse modes — tiles are radios, not toggles. */
-type AgentBrowse = "defs" | "runs" | "subs" | "live" | "memory" | "plugins";
+type AgentBrowse = "defs" | "runs" | "subs" | "live" | "graph" | "memory" | "plugins";
 const agentBrowse = ref<AgentBrowse>("defs");
 const pickedRun = ref<SessionRef>();
 const runDetailExpanded = ref(false);
@@ -703,6 +849,7 @@ const BROWSE_MODES: AgentBrowse[] = [
   "runs",
   "subs",
   "live",
+  "graph",
   "memory",
   "plugins",
 ];
@@ -737,6 +884,8 @@ function setAgentBrowse(mode: AgentBrowse): void {
   } else if (mode === "memory" || mode === "plugins") {
     pickedRun.value = undefined;
     agentPicked.value = undefined;
+  } else if (mode === "graph") {
+    // keep def / run selection for the graph aside
   } else {
     agentPicked.value = undefined;
   }
@@ -754,6 +903,35 @@ function setAgentBrowse(mode: AgentBrowse): void {
   void router.replace({ query: q });
 }
 
+function onGraphPick(p: GraphPick): void {
+  if (p.kind === "def") {
+    agentPicked.value = p.agent;
+    agentDetailExpanded.value = false;
+    pickedRun.value = undefined;
+    runDetailExpanded.value = false;
+  } else {
+    pickedRun.value = p.session;
+    runDetailExpanded.value = false;
+    agentPicked.value = undefined;
+    agentDetailExpanded.value = false;
+  }
+}
+
+function onGraphClear(): void {
+  pickedRun.value = undefined;
+  runDetailExpanded.value = false;
+  agentPicked.value = undefined;
+  agentDetailExpanded.value = false;
+}
+
+function onGraphCtxDef(payload: { event: MouseEvent; agent: AgentDef }): void {
+  openDefCtx(payload.event, payload.agent);
+}
+
+function onGraphCtxRun(payload: { event: MouseEvent; session: SessionRef }): void {
+  openRunCtx(payload.event, payload.session);
+}
+
 function selectRun(s: SessionRef): void {
   const same = pickedRun.value?.provider === s.provider && pickedRun.value?.id === s.id;
   pickedRun.value = same ? undefined : s;
@@ -779,29 +957,54 @@ function openRunInSessions(s: SessionRef): void {
   emit("nav", "sessions");
 }
 
-function openRunParent(child: SessionRef): void {
+async function openRunParent(child: SessionRef): Promise<void> {
   if (!child.parentId) return;
-  const parent =
+  let parent =
+    sessions.find(child.provider, child.parentId) ??
     sessions.sessions.find(
       (p) => p.provider === child.provider && p.id === child.parentId,
     ) ??
     instanceSource.value.find(
       (p) => p.provider === child.provider && p.id === child.parentId,
     );
+  // Clear filters so the parent + siblings aren't hidden after graph / def drill-in
+  agentFilter.value = "";
+  if (agentProviderF.value !== "all" && agentProviderF.value !== child.provider) {
+    agentProviderF.value = child.provider;
+  }
+  if (!parent) {
+    try {
+      parent = await api.session(child.provider, child.parentId);
+    } catch {
+      /* keep stub below */
+    }
+  }
   if (parent) {
-    // stay in Agents: show parent in the runs aside
-    setAgentBrowse("runs");
+    setAgentBrowse(isSubRun(parent) ? "subs" : "runs");
     pickedRun.value = parent;
+    void scrollPickedRunIntoView();
     return;
   }
+  setAgentBrowse("runs");
   pickedRun.value = {
     provider: child.provider,
     id: child.parentId,
     projectDir: child.projectDir,
+    title: child.title ? `↑ ${child.title}` : undefined,
     updatedAt: child.updatedAt,
     status: "unknown",
     kind: "session",
   };
+  void scrollPickedRunIntoView();
+}
+
+async function scrollPickedRunIntoView(): Promise<void> {
+  await nextTick();
+  requestAnimationFrame(() => {
+    document
+      .querySelector(".cols-inst .stat-row.picked")
+      ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  });
 }
 
 
@@ -864,9 +1067,28 @@ const sortedInstances = computed(() => {
     }
     return true;
   });
+  // Keep the selected run visible (e.g. parent sessions without an agent tag)
+  const picked = pickedRun.value;
+  if (
+    picked &&
+    !rows.some((s) => s.provider === picked.provider && s.id === picked.id)
+  ) {
+    rows = [picked, ...rows];
+  }
   const sort = sorts.inst ?? { key: "last", dir: -1 };
   const sel = INST_SEL[sort.key] ?? ((s: SessionRef) => s.updatedAt);
   rows = [...rows].sort((a, b) => {
+    // Pin picked parent, then its children, so ↑ parent shows the full family
+    if (picked) {
+      const rank = (s: SessionRef): number => {
+        if (s.provider === picked.provider && s.id === picked.id) return 0;
+        if (s.provider === picked.provider && s.parentId === picked.id) return 1;
+        return 2;
+      };
+      const ra = rank(a);
+      const rb = rank(b);
+      if (ra !== rb) return ra - rb;
+    }
     const x = sel(a);
     const y = sel(b);
     return (x < y ? -1 : x > y ? 1 : 0) * sort.dir;
@@ -1132,6 +1354,19 @@ const agentGroups = computed(() => {
   gap: 16px;
   align-items: flex-start;
 }
+.ag-graph-row {
+  min-height: calc(100vh - 200px);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.ag-graph-aside {
+  position: static;
+  top: auto;
+  align-self: stretch;
+  max-height: none;
+  height: 100%;
+}
 .mem-browser-host {
   flex: 1;
   min-width: 0;
diff --git a/packages/web/src/views/dashboard/chrome.css b/packages/web/src/views/dashboard/chrome.css
index de0a04f..62a520c 100644
--- a/packages/web/src/views/dashboard/chrome.css
+++ b/packages/web/src/views/dashboard/chrome.css
@@ -250,6 +250,12 @@
 .cols-inst .stat-cols,
 .cols-inst .stat-row {
   grid-template-columns: var(--cols);
+  /* Keep fixed columns visible when the detail aside squeezes the table */
+  min-width: max(100%, 520px);
+}
+
+.cols-inst.stat-table {
+  overflow-x: auto;
 }
 
 .cols-inst .stat-cols > span:nth-child(-n + 3) {
@@ -264,8 +270,8 @@
 .run-row.picked,
 .sess-row.picked,
 .stat-row.picked {
-  background: var(--panel-bg-raised);
-  box-shadow: none;
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+  box-shadow: inset 2px 0 0 var(--border-strong);
 }
 
 .cols-inst .stat-val.inst-proj {