Feature Request : Embedded architecture diagram viewer - fireworks-tech-graph integration in the dashboard

[githb-ac]

Summary

Add an architecture diagram viewer tab to the OpenHuman dashboard that displays the latest SVG/PNG diagram generated by the fireworks-tech-graph skill, auto-refreshing every 10 seconds. Operators can ask the orchestrator to generate or update a diagram at any time and see it appear inside the dashboard without opening a separate tool or file explorer.

Problem

Operators who want a visual representation of their swarm's architecture - agent layers, tool connections, data flow, team structure - currently have no way to view it inside OpenHuman. The fireworks-tech-graph skill can generate publication-quality SVG/PNG architecture diagrams from a natural language description, but the output lands as a file on disk with no integrated viewing surface. Operators must open a file manager or image viewer separately, and there is no mechanism for the diagram to stay current as the swarm evolves.

Solution

Scope: app (dashboard tab)

Implementation:

Add a "Diagram" tab to the dashboard sidebar. When active, the tab panel:

1. Loads the latest diagram from the path where fireworks-tech-graph writes its output (workspace/diagrams/latest.png by default, configurable)
2. Auto-refreshes every 10 seconds - if the file has been updated (e.g. because the operator asked the orchestrator to regenerate the diagram), the new version appears automatically
3. Manual refresh button - operators can force an immediate reload without waiting for the next auto-refresh cycle
4. Graceful empty state - if no diagram file exists yet, the panel shows a placeholder with instructions: install the skill and ask the orchestrator to generate a diagram
5. Full-width display - the diagram image fills the available panel width, maintaining aspect ratio

The fireworks-tech-graph skill is served locally by the orchestrator at a configurable port (default 8787). The dashboard loads the diagram from this local endpoint rather than directly from the filesystem, keeping the frontend stateless.

dashboard:
  diagram_viewer:
    enabled: true
    source_url: "http://localhost:8787/workspace/diagrams/latest.png"
    refresh_interval_seconds: 10

Generating a diagram:

The operator asks the orchestrator in natural language:

Generate an architecture diagram of the current swarm in dark terminal style

The orchestrator delegates to the fireworks-tech-graph skill, which writes the output to workspace/diagrams/latest.png. The dashboard picks it up on the next refresh cycle.

Skill installation (documented in setup guide, not required for the dashboard tab itself):

npx skills add yizhiyanhua-ai/fireworks-tech-graph

Acceptance criteria

• Diagram tab - a Diagram tab appears in the dashboard sidebar and is accessible from the nav
• Image loads - the latest diagram image is displayed when a file exists at the configured source_url
• Auto-refresh - the image reloads every refresh_interval_seconds seconds; a freshly generated diagram appears without a manual page refresh
• Manual refresh button - forces an immediate reload of the diagram image
• Empty state - when no diagram exists, the panel shows a placeholder with skill install instructions and a prompt example
• Full-width display - image fills panel width and maintains aspect ratio
• Config-driven -source_url and refresh_interval_seconds are read from config.yaml
• Graceful error - if the source URL is unreachable, the panel shows the empty state rather than a broken image
• Diff coverage ≥ 80% - the implementing PR meets the changed-lines coverage gate (Vitest + cargo-llvm-cov, enforced by .github/workflows/coverage.yml)

Related

• fireworks-tech-graph skill: https://github.com/yizhiyanhua-ai/fireworks-tech-graph
• OpenHuman agent architecture: https://tinyhumans.gitbook.io/openhuman/
• Proposed: Concurrent orchestrator visibility layer (FR4)
• Proposed: Teams and agents management panel (FR9)
• Proposed: Swarm hierarchy tree view (FR13)

Dashboard mockup attached (Fireworks App Data tab)

dashboard-example.html

[sunilkumarvalmiki]

I confirmed this is still missing on current main (844a26c0). The Intelligence tab bar currently exposes Memory, Subconscious, Tasks, Calls, and Dreams only; there is no Diagram tab or in-app architecture diagram viewer yet.

I’m going to work on a scoped first PR for this: add the app-side Diagram tab, load the configured diagram image URL, support manual refresh plus timed refresh, and show a graceful empty/error state instead of a broken image. I’ll include focused unit coverage and follow up here with the validation evidence once the PR is ready.

[sunilkumarvalmiki]

Opened PR #2687 for this feature: #2687

Reproduction / before evidence:

• Checked current main at 844a26c0 and confirmed the Intelligence tab bar only exposed Memory, Subconscious, Tasks, Calls, and Dreams.
• Added a focused reproduction test first: pnpm --dir app exec vitest run --config test/vitest.config.ts src/pages/__tests__/Intelligence.diagram.test.tsx.
• The test failed as expected because there was no Diagram tab or embedded diagram viewer surface.

What changed:

• Added a Diagram tab under Intelligence.
• Added a config-backed viewer using [dashboard.diagram_viewer] defaults:
  • enabled = true
  • source_url = "http://localhost:8787/workspace/diagrams/latest.png"
  • refresh_interval_seconds = 10
• Added manual refresh and interval refresh with cache-busting image URLs.
• Added full-width diagram display with aspect ratio preserved by the image element.
• Added graceful empty/error state with the fireworks-tech-graph install command and prompt example instead of showing a broken image.
• Added a read-only dashboard settings controller so the frontend reads this from core config.

Validation / after evidence:

• pnpm --dir app exec vitest run --config test/vitest.config.ts src/components/intelligence/DiagramViewerTab.test.tsx src/pages/__tests__/Intelligence.diagram.test.tsx - passed, 2 files / 5 tests.
• pnpm typecheck - passed.
• cargo fmt --manifest-path Cargo.toml --all --check - passed.
• cargo test --manifest-path Cargo.toml dashboard_config --lib - passed.
• cargo test --manifest-path Cargo.toml diagram_viewer_partial --lib - passed.
• cargo check --manifest-path Cargo.toml - passed with existing warnings.
• pnpm lint - passed with existing warnings.
• node scripts/codex-pr-preflight.mjs --lightweight - passed.
• git diff --check - passed.

I also checked for an existing open PR linked to #1854 before taking this and did not find one.