← Cycles
Qflow · c11

AI Ecosystem

archivedcreated 2026-04-03· last activity 2026-08-15

PixiJS experiments expressing the AI agent monitoring dataset for security teams

New in this cycle: AI-agent visual language — session graphs, infra map, capability surface, inventory

Why

Driven by design cycle c33 (ai-ecosystem-visualizations). The AI monitoring dataset Qpoint captures — sessions, users, agents, endpoints, models, API keys, tools, files, secondary network calls — was expressed only as tables and list views. qflow's spatial, animated idiom was a candidate medium for making that data legible to security teams. This cycle is the qflow half of that exploration: a set of canvas experiments, each answering a distinct security question spatially, without committing to production-bound designs.

Objective

Build visual experiments over the AI session/inventory data as a test fixture, versioned as Exp{Name}.r{N}.vue and switchable from a shared nav shell (App.vue):

  • Session Graph — "What did this agent touch?"
  • Infrastructure Map — "Who is connected to what, org-wide?"
  • Capability Surface — "What tools are exposed across the org?"
  • Inventory View — browse the ecosystem entity-by-entity

Key Changes

The experiment directory was never committed, so there are no git landings; dates below come from file timestamps. All work landed on 2026-04-03.

  • 2026-04-03 — Baseline copied from c10.real-data (main.js, NodeRegistry.js, LiveFeed.js, TrailPulse.js, trail-texture.js); cycle-creation.md and data/ai-session.js added — a single mock session extracted from bob-wire dashboard-v1 wireframes, extended with an unexpected secondary call (paste.ee) as a risk-signal demo
  • 2026-04-03 — ExpSessionGraph.r1.vue — zone layout: linear left-to-right Actors → Infrastructure → Files → External Hosts, directed edges weighted by access count, risk signals (sensitive files red, unexpected hosts orange, pulse rings)
  • 2026-04-03 — ExpSessionGraph.r2.vue — radial layout: agent at center, four arc sectors (User, Infrastructure, Files, External Hosts) with donut-slice backgrounds, spoke weight by access count
  • 2026-04-03 — ExpInfraMap.r1.vue + data/org-wide.js — org-wide map: endpoints (grouped dev/CI/cloud) connect to models via animated traveling dots, edge color = API key used; concentration risk and credential outliers emerge spatially
  • 2026-04-03 — ExpCapSurface.r1.vue + data/capabilities.js — capability surface: four MCP server clusters with tool nodes sized by call volume and colored by error rate; never-called tools dimmed as latent capability
  • 2026-04-03 — ExpSessionGraph.r3.vue + data/ai-session-timeline.js — playback iteration: session replayed over a timeline with a session-info overlay
  • 2026-04-03 — ExpInventoryView.r1.vue / .r2.vue — inventory views: grouped entity sidebar with per-item graph view (r1) and profile view (r2)
  • 2026-04-03 — App.vue shell finalized with seven switchable tabs

Outcome

Seven working views in one shell: Session Graph in zone, radial, and playback forms, an org-wide Infra Map, a Capability Surface, and Inventory graph and profile views. The design-side account lives in design c33, which documented qflow's visual output, data model, and limitations in the CLAUDE.md files as part of the same effort. The visual language carried forward: qmap c21 (ai-session-map) was built as the 3D companion to these 2D session graphs, and design c33's record names c41 (signal column flow) and c43 (inventory map) as the follow-ons that continued its threads.

Visual record

11 captures — heroes, page slices, and full-page renders. Click to view.

Session graph, zone layout — Actors → Infra → Files → External
Session graph, zone layout — Actors → Infra → Files → External
Session graph, radial — agent at center, arc sectors
Session graph, radial — agent at center, arc sectors
Session playback mid-story — turn ~12 of 31
Session playback mid-story — turn ~12 of 31
Org-wide infra map — endpoints → models, keyed edges
Org-wide infra map — endpoints → models, keyed edges
Capability surface — tools sized by calls, colored by error rate
Capability surface — tools sized by calls, colored by error rate
Inventory graph focused on a user (alice)
Inventory graph focused on a user (alice)
Inventory graph on ci-system — automation's footprint
Inventory graph on ci-system — automation's footprint
The unattributed API key — risk highlighted
The unattributed API key — risk highlighted
Inventory profile panel — the entity dossier view
Inventory profile panel — the entity dossier view
c11 hero
Playback at turn 31 — the whole session lit
Playback at turn 31 — the whole session lit

Artifacts

/experiments/c11.ai-ecosystem/ (local dev)

Qpoint Brand Style Guide