Skip to content

Visual Tour of FCC

A guided tour of the FCC Agent Team Framework's visual interfaces, including the React web frontend, Streamlit apps, and CLI dashboards. This tour helps you understand what each interface shows and when to use it.

The Web Frontend

The FCC web frontend is built with React 18, D3.js, and Tailwind CSS. It provides 8 pages with 12 interactive visualizations.

Starting the Frontend

cd frontend
npm install
npm run dev

Then open http://localhost:5173 in your browser.

Page 1: Persona Explorer

The persona explorer lets you browse all 102 personas. You can:

  • Filter by category: Select from 20 categories in the sidebar
  • Search by name: Type to find specific personas
  • View R.I.S.C.E.A.R.: Click a persona to see its full specification
  • See relationships: View upstream, downstream, and peer connections

This is the best starting point for understanding what personas are available.

Page 2: Workflow Visualizer

An interactive D3.js graph showing the FCC workflow structure:

  • Nodes: Each node represents a step in the workflow
  • Edges: Arrows show the flow between steps
  • Phases: Nodes are colored by phase (FIND, CREATE, CRITIQUE)
  • Graph selection: Switch between 5-node, 20-node, 24-node, and 55-node graphs
  • Zoom and pan: Use mouse wheel and drag to navigate large graphs

Page 3: Simulation Dashboard

Run and inspect simulations directly in the browser:

  • Scenario selection: Choose from 29 pre-built scenarios
  • Live execution: Watch steps execute in real time
  • Trace viewer: Inspect each step's persona, phase, and output
  • Timeline: Visual timeline of the simulation

Page 4: Knowledge Graph Viewer

Explore the knowledge graph with interactive visualization:

  • Node types: 9 different types, each with a distinct color
  • Edge types: 9 relationship types shown as labeled arrows
  • Filtering: Show/hide node types to focus on specific areas
  • Search: Find specific nodes by ID or name
  • Details panel: Click any node to see its metadata

Page 5: Event Bus Monitor

Watch events flow through the system in real time:

  • Event stream: Scrolling list of events as they occur
  • Filter by type: Focus on specific event categories
  • Event details: Click an event to see its full data payload
  • Statistics: Count of events by type

Additional Pages

  • Page 6: Collaboration Session -- Start and manage human-in-the-loop sessions
  • Page 7: Plugin Manager -- Browse and configure plugins
  • Page 8: Federation Status -- View cross-project federation state

Streamlit Apps

Streamlit apps provide interactive dashboards without needing Node.js. There are 20 apps organized into three categories.

Starting a Streamlit App

pip install -e ".[streamlit]"
streamlit run apps/streamlit/learn_personas.py

Then open http://localhost:8501 in your browser.

Educational Apps (4)

These are designed for learning:

learn_personas.py: Interactive persona browser with: - Category selector dropdown - R.I.S.C.E.A.R. component viewer - Dimension profile charts - Side-by-side persona comparison

learn_workflows.py: Visual workflow exploration with: - Graph rendering - Step-by-step walkthrough - Action type breakdown

learn_plugins.py: Plugin system explainer with: - Plugin type catalog - Dependency graph visualization - Live plugin registration demo

learn_object_model.py: Object model patterns with: - Repository pattern visualization - Facade pattern examples - Evolution stage assessment

Production Apps (Key Highlights)

persona_explorer.py: Full-featured persona catalog with advanced filtering, search, and export capabilities.

kg_explorer.py: Knowledge graph interactive explorer with graph visualization, path finding, and export to RDF/JSON-LD.

federated_dashboard.py: Cross-project federation status showing namespace mappings, entity resolution, and change tracking.

CLI Dashboards

For terminal-based workflows, FCC includes ASCII dashboards.

Running CLI Dashboards

# Ecosystem overview
fcc dashboard ecosystem

# Persona catalog
fcc dashboard personas

# Quality gate status
fcc dashboard quality

# Collaboration sessions
fcc dashboard collab

Ecosystem Dashboard

Shows a table of all ecosystem projects with status, test counts, and health:

+-------------------+--------+-------+--------+
| Project           | Status | Tests | Health |
+-------------------+--------+-------+--------+
| FCC Framework     | Active | 9265  | Good   |
| PAOM              | Active | 3200  | Good   |
| ...               | ...    | ...   | ...    |
+-------------------+--------+-------+--------+

Persona Dashboard

Shows all personas with category, archetype, and relationship counts:

+---------------------+----------+-----------+-------+
| Persona             | Category | Archetype | Links |
+---------------------+----------+-----------+-------+
| Research Catalyst   | core     | Explorer  |    12 |
| Build Champion      | core     | Creator   |    25 |
| ...                 | ...      | ...       |   ... |
+---------------------+----------+-----------+-------+

Quality Dashboard

Shows quality gate status for all components:

+------------------------+--------+-------+
| Gate                   | Status | Score |
+------------------------+--------+-------+
| Persona Completeness   | PASS   | 1.00  |
| Schema Validation      | PASS   | 1.00  |
| Documentation Coverage | PASS   | 0.95  |
| ...                    | ...    | ...   |
+------------------------+--------+-------+

Which Interface Should I Use?

Need Best Interface
First-time exploration Web Frontend (persona explorer)
Learning FCC concepts Streamlit educational apps
Interactive data exploration Streamlit production apps
CI/CD and scripting CLI dashboards
Presentations and demos Web Frontend
Knowledge graph analysis Streamlit kg_explorer
Quick status check CLI dashboard