feat(topology): add topology radius graph and live telemetry wiring

[stroland02]

[Feature] Topology Radius: Live Data Blast Radius Mapping

*This is just Demo*

Overview

This PR introduces Topology Radius (TopologyGraphView.tsx), a high-performance, live-data network map designed to visualize the exact "blast radius" of architectural incidents.

Engineering Strategy & System Architecture

Building on the principles of engineering velocity and deep product conviction, this feature solves one of the hardest problems in distributed systems: root cause attribution.

1. Four-Pillar Blast Radius Pipeline: The topology engine structures chaotic architectural data into four chronological columns: Trigger Sources (Commits/Deployments) ➡️ Services ➡️ Infrastructure ➡️ User Sessions. This linear mapping replaces tangled hairball graphs with a clear cause-and-effect timeline.
2. Live Telemetry Wiring: We have eliminated the need to context-switch between the map and log dashboards. By integrating TanStack Query hooks (useExploreLogs and useExploreTraces), selecting any node on the graph dynamically streams its real-time production telemetry directly into the Inspector sidebar.
3. Agentic AI Integration: The system isn't just an observability map; it acts as a launcher for autonomous investigation. The "Investigate with AI" capability leverages the useStartInvestigation hook to instantly deploy the Superlog AI agent, providing it with the exact degraded service and its blast radius context.
4. Resilient UI/UX Rendering: To maintain visual clarity across massive microservice meshes, the graph engine utilizes an 80% out-of-the-box zoom scale. Furthermore, it incorporates animated flow paths (via SVG dash-array animations) to visualize real-time data routing between selected components without compromising browser framerates.

High Value Impact

This implementation drastically reduces Mean Time To Resolution (MTTR). By visually connecting a bad code commit directly to the specific user sessions it degrades, engineers can bypass hours of manual log-diving. The combination of live telemetry streaming and 1-click AI investigations turns the Topology view into a comprehensive incident command center.

---

Summary by cubic

Adds Topology Radius: a live, column-based graph that maps blast radius from commits → services → infra → user sessions. Integrates real-time telemetry and investigation actions, and adds a new topology route.

• New Features
  • New Topology Radius view with a selectable graph and inspector sidebar.
  • Live telemetry panel for the selected node using useExploreLogs and useExploreTraces.
  • One-click investigation via useStartInvestigation; navigates to the incident on success.
  • KPI tiles, design recommendations, and a blast-wave simulation toggle; includes “Rebuild pipeline” action.
  • Routing: adds scopedProjectRoutePattern("/topology") and applies wide layout in App.tsx.

^{Written for commit 5c59adb. Summary will update on new commits.}

[superlog-app]

Observability review

• 2 blocking

[superlog-app]

logs · blocking — Log investigation-start failures with the service name

Add an onError callback that logs at error level with the target service label and the error message, so operators can detect and correlate failed AI investigation launches that otherwise disappear silently when the mutation rejects.

Suggested change

<motion.div

<Btn size="sm" variant="primary" loading={startInvestigation.isPending} onClick={() => startInvestigation.mutate({ prompt: `Investigate degraded service: ${selected.label}`, service: selected.label }, { onSuccess: (res) => navigate(projectPath(`/incidents/${res.incident.id}`)), onError: (err) => console.error('[topology] investigation start failed', { service: selected.label, error: String(err) }) })}>Investigate with AI</Btn>

Useful? React with 👍 / 👎.

[superlog-app]

logs · blocking — Log Rebuild-pipeline failures with the project ID

The generateTopology.mutate() call has no onError handler, so a failed pipeline rebuild is invisible to operators; add an error-level log with the projectId so failures can be detected and correlated.

Suggested change

	{/* Canvas */}
	<Btn variant="secondary" size="sm" loading={generateTopology.isPending} onClick={() => generateTopology.mutate(undefined, { onError: (err) => console.error('[topology] generateTopology failed', { projectId, error: String(err) }) })}>

Useful? React with 👍 / 👎.

[cubic-dev-ai]

4 issues found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/web/src/topology/TopologyGraphView.tsx">

<violation number="1" location="apps/web/src/topology/TopologyGraphView.tsx:207">
P1: The Topology Radius always shows the hard-coded demo graph, so it does not reflect the current project's topology and a successful “Rebuild pipeline” cannot change the canvas. Rendering the returned `pipelineData.graph` (or explicitly gating the demo state) would make this view project-specific.</violation>

<violation number="2" location="apps/web/src/topology/TopologyGraphView.tsx:502">
P2: “Investigate with AI” does not send the graph's blast-radius context despite the feature promise that the agent is contextualized with the exact degraded service and blast radius. Including the relevant connected nodes/edges and impact details in the prompt or request body would preserve that context for the investigation.</violation>

<violation number="3" location="apps/web/src/topology/TopologyGraphView.tsx:503">
P2: The Inspector presents “Rollback commit” as an available remediation, but the button is inert for every selected node. Wiring it to a rollback flow or removing the action until supported would avoid a misleading incident-control affordance.</violation>

<violation number="4" location="apps/web/src/topology/TopologyGraphView.tsx:590">
P2: Selecting a node fetches one telemetry snapshot rather than streaming or refreshing live production data, so the Inspector becomes stale while an incident is active. A polling interval or live subscription with suitable cleanup would be needed for the advertised real-time wiring.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

P1: The Topology Radius always shows the hard-coded demo graph, so it does not reflect the current project's topology and a successful “Rebuild pipeline” cannot change the canvas. Rendering the returned pipelineData.graph (or explicitly gating the demo state) would make this view project-specific.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/src/topology/TopologyGraphView.tsx, line 207:

<comment>The Topology Radius always shows the hard-coded demo graph, so it does not reflect the current project's topology and a successful “Rebuild pipeline” cannot change the canvas. Rendering the returned `pipelineData.graph` (or explicitly gating the demo state) would make this view project-specific.</comment>

<file context>
@@ -0,0 +1,618 @@
+export function TopologyGraphView() {
+  const me = useMe();
+  const projectId = me.data?.project?.id ?? "proj-1";
+  const { data: pipelineData } = useTopology(projectId);
+  const generateTopology = useGenerateTopology(projectId);
+  const startInvestigation = useStartInvestigation(projectId);
</file context>

[cubic-dev-ai]

P2: “Investigate with AI” does not send the graph's blast-radius context despite the feature promise that the agent is contextualized with the exact degraded service and blast radius. Including the relevant connected nodes/edges and impact details in the prompt or request body would preserve that context for the investigation.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/src/topology/TopologyGraphView.tsx, line 502:

<comment>“Investigate with AI” does not send the graph's blast-radius context despite the feature promise that the agent is contextualized with the exact degraded service and blast radius. Including the relevant connected nodes/edges and impact details in the prompt or request body would preserve that context for the investigation.</comment>

<file context>
@@ -0,0 +1,618 @@
+
+                  <div className="h-px bg-border" />
+                  <div className="flex gap-2 px-5 py-4">
+                    <Btn size="sm" variant="primary" loading={startInvestigation.isPending} onClick={() => startInvestigation.mutate({ prompt: `Investigate degraded service: ${selected.label}`, service: selected.label }, { onSuccess: (res) => navigate(projectPath(`/incidents/${res.incident.id}`)) })}>Investigate with AI</Btn>
+                    <Btn size="sm" variant="ghost">Rollback commit</Btn>
+                  </div>
</file context>

[cubic-dev-ai]

P2: The Inspector presents “Rollback commit” as an available remediation, but the button is inert for every selected node. Wiring it to a rollback flow or removing the action until supported would avoid a misleading incident-control affordance.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/src/topology/TopologyGraphView.tsx, line 503:

<comment>The Inspector presents “Rollback commit” as an available remediation, but the button is inert for every selected node. Wiring it to a rollback flow or removing the action until supported would avoid a misleading incident-control affordance.</comment>

<file context>
@@ -0,0 +1,618 @@
+                  <div className="h-px bg-border" />
+                  <div className="flex gap-2 px-5 py-4">
+                    <Btn size="sm" variant="primary" loading={startInvestigation.isPending} onClick={() => startInvestigation.mutate({ prompt: `Investigate degraded service: ${selected.label}`, service: selected.label }, { onSuccess: (res) => navigate(projectPath(`/incidents/${res.incident.id}`)) })}>Investigate with AI</Btn>
+                    <Btn size="sm" variant="ghost">Rollback commit</Btn>
+                  </div>
+                </div>
</file context>

[cubic-dev-ai]

P2: Selecting a node fetches one telemetry snapshot rather than streaming or refreshing live production data, so the Inspector becomes stale while an incident is active. A polling interval or live subscription with suitable cleanup would be needed for the advertised real-time wiring.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/src/topology/TopologyGraphView.tsx, line 590:

<comment>Selecting a node fetches one telemetry snapshot rather than streaming or refreshing live production data, so the Inspector becomes stale while an incident is active. A polling interval or live subscription with suitable cleanup would be needed for the advertised real-time wiring.</comment>

<file context>
@@ -0,0 +1,618 @@
+
+function LiveTelemetryPanel({ projectId, serviceLabel, fallbackLog, fallbackTrace }: { projectId: string; serviceLabel: string; fallbackLog?: { severity: "ERROR" | "WARN" | "INFO"; text: string }; fallbackTrace?: { name: string; durationMs: number }; }) {
+  const filter = useMemo(() => ({ range: { since: "now-3h", until: "now" }, service: serviceLabel }), [serviceLabel]);
+  const { data: logsData } = useExploreLogs(projectId, filter, 1);
+  const { data: tracesData } = useExploreTraces(projectId, filter, 1);
+
</file context>