Skip to content

feat(opencode): add interactive visualize command - #48586

Closed
prethiv wants to merge 2 commits into
anomalyco:devfrom
prethiv:feat/visualizer
Closed

feat(opencode): add interactive visualize command#48586
prethiv wants to merge 2 commits into
anomalyco:devfrom
prethiv:feat/visualizer

Conversation

@prethiv

@prethiv prethiv commented Sep 12, 2026

Copy link
Copy Markdown

Issue for this PR

Closes #48585

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Adds a /visualize command and opencode visualize CLI with an interactive confirmation step.

Problem: When agents explain complex architectures, distributed flows, or database schemas, they either dump 150+ lines of raw Mermaid/ASCII markup into the terminal or produce long text explanations that are hard to visualize.

Changes made:

  1. Added packages/opencode/src/cli/cmd/visualize.ts and registered it in src/index.ts.
  2. Uses @clack/prompts to confirm output destination (browser, terminal, ascii, file, or skip) before rendering, preventing unsolicited terminal clutter.
  3. Supports targets: context (System Context & Session Runtime pipeline), architecture (layer topology), flow <module> (sequence diagrams), schema <path> (database ERD), deps (package graph), state (drain lifecycle), and git diff inference.
  4. When running in CLI mode, it always compiles a self-contained dark-mode HTML artifact with Mermaid.js, pan/zoom controls, and SVG download, presenting a clickable file:/// link to the user.
  5. Added custom command .opencode/command/visualize.md, onboarded conventions into AGENTS.md, and added .opencode/command/teach.md.

Why it works: Separates diagram generation from terminal printing behind a selection prompt, while generating a standalone HTML canvas with client-side Mermaid rendering for rich visual inspection without external server dependencies.

How did you verify your code works?

Tested locally using Bun:

  1. Ran bun packages/opencode/src/index.ts visualize --help and verified flags (--dest, --format, --output, --yes).
  2. Ran bun packages/opencode/src/index.ts visualize context -t ascii -y and verified clean Unicode box-drawing output in terminal.
  3. Ran bun packages/opencode/src/index.ts visualize context -t browser -y and verified it created the .html artifact in .opencode/artifacts/ and opened it in the default browser.
  4. Ran automated unit tests:
    bun test packages/opencode/test/cli/visualize.test.ts # 7/7 passed
    bun test test/cli/help/help-snapshots.test.ts         # 34/34 snapshots passed
    bun --cwd packages/opencode typecheck               # 0 errors

@github-actions

Copy link
Copy Markdown
Contributor

This PR doesn't fully meet our contributing guidelines and PR template.

What needs to be fixed:

  • PR description is missing required template sections. Please use the PR template.

Please edit this PR description to address the above within 2 hours, or it will be automatically closed.

If you believe this was flagged incorrectly, please let a maintainer know.

@github-actions github-actions Bot added the needs:compliance This means the issue will auto-close after 2 hours. label Sep 12, 2026
@prethiv

prethiv commented Sep 12, 2026

Copy link
Copy Markdown
Author
open_source_MT__VS_1 open_source_MT__VS_2 open_source_MT__VS_3

Manual testing screenshots of SAGA Pattern.

@github-actions

Copy link
Copy Markdown
Contributor

This pull request has been automatically closed because it was not updated to meet our contributing guidelines within the 2-hour window.

Feel free to open a new pull request that follows our guidelines.

@github-actions github-actions Bot removed the needs:compliance This means the issue will auto-close after 2 hours. label Sep 12, 2026
@github-actions github-actions Bot closed this Sep 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Interactive /visualize command with multi-target diagramming

1 participant