← Cycles
Qmap · c21

ai-session-map

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

Visualize a single AI agent session as a qmap entity-type topology

New in this cycle: One agent session as an entity-type topology (QMapAgentSession)

Why

AI agent monitoring produces rich session data — every MCP server called, every file read or written, every external host contacted, every skill spun up. This data is currently expressed as tables. qmap's grouping system can make the structural shape of a session immediately legible: entity-type rugs (MCP Servers, Files, Skills, External Hosts) surrounding a central agent actor, with flows weighted by call volume.

Companion to c33 (design) which built 2D session graphs in qflow/PixiJS. This explores the 3D isometric angle.

Objective

One runnable experiment (ExperimentsApp.vue) that:

  • Maps a large synthetic AI session to qmap's actor/dataflow schema
  • Uses entityType tag + level1 grouping to organize actors into category rugs
  • Wires a DevConfigurator control to switch between entity-type, flat, and actor-type grouping modes
  • Stress-tests the layout with a rich dataset (~35 actors, ~50 flows)

Scope

  • dev/experiments/c21.ai-session-map/ExperimentsApp.vue — runnable experiment (copied from c20, then rewritten)
  • cycles/c21.ai-session-map/ — this cycle metadata

Key Changes

  • dev/experiments/c21.ai-session-map/ExperimentsApp.vue — Large synthetic session dataset (42 actors, 42 flows). Actors tagged with entityType (User, AI Agent, MCP Server, Skill, File, External Host). Four grouping modes wired to a header button bar: Entity Type (level1: entityType), File Access (level1: entityType, level2: access), Actor Type (via computeGrouping(..., 'group')), and Flat. DevConfigurator overlay added for live visual tuning.
  • cycles/c21.ai-session-map/ — Cycle metadata (this file + initial-prompt.md)

Session 2 — 2026-04-03

Architectural refactor: flow objects now own their visual config.

src/flows/LineFlow.js — Added applyConfig(config). Accepts flat visual config, reconciles line properties via existing setters, and dynamically adds/removes ArrowIndicator/PulseIndicator (always dispose + recreate). Re-applies current flow state after indicator recreation so colors stay consistent. Removed indicator creation from constructor — applyConfig is now the only path.

src/flows/index.js — Removed arrows/pulse from createFlow; indicators come exclusively through applyConfig.

src/components/QMap.vue — Added flowConfig computed as single source of truth for all flow visual config. Replaced individual prop getters and ~40 lines of per-property flow watchers. QMap now has no knowledge of how flows render.

useActorSelection + useHighlightedDataflows — Accept flowConfig ref. On flow creation: immediate applyConfig call + watch(flowConfig, config => flow.applyConfig(config)). Stop functions managed alongside flow disposal.

src/flows/ArrowIndicator.js — Direction-aware cone orientation: tangent negated when _flowDirection < 0 so tip always points in the direction of travel. Sliding mode trail offset also flips direction so the trail always sits behind the lead cone.

Visual record

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

Full session, entity-type grouping
Full session, entity-type grouping
Grouped by file access
Grouped by file access
Grouped by actor type
Grouped by actor type
Flat — the raw session graph
Flat — the raw session graph
Simple session — the minimal story
Simple session — the minimal story
File Heavy session — the file wall
File Heavy session — the file wall
File Heavy grouped by file access
File Heavy grouped by file access
Full session from above
Full session from above
c21 hero

Artifacts

/experiments/c21.ai-session-map/ (local dev)

Qpoint Brand Style Guide