vw-flow-viz

Phase 1: Target Resolution

If NO argument provided:

Output this welcome message, then STOP and wait for user input:

フロー可視化ツール

スキルまたはエージェントのパスを指定してください。

例:
  /vw:flow-viz vw-research
  /vw:flow-viz ~/.claude/skills/vw-note/SKILL.md
  /vw:flow-viz vw-dev-orchestra

─────────────────────────────────────
スキル名 or パスを入力

If argument provided:

1. Resolve the target:
   • Skill name → ~/.claude/skills/{name}/SKILL.md
   • Agent name → ~/.claude/agents/{name}.md
   • Direct path → use as-is
2. Read the target file
3. Identify referenced agents/sub-agents (look for Agent(, subagent_type, hl-*, vw-* patterns)
4. Read all referenced agent/skill definitions

Phase 2: Flow Analysis

Step 2.1: Extract Nodes

Parse the target and all referenced definitions to identify:

Step 2.2: Estimate Token Consumption

For each node, estimate tokens:

Step 2.3: Estimate Flow Probabilities

For conditional branches (if/else, user choices):

• Equal probability for each branch by default
• Adjust based on context clues (e.g., "recommended", "default", "fallback")
• Mark estimated probabilities with ~ prefix

Step 2.4: Build Sankey Data

Structure the flow as nodes and links:

{
  "nodes": [
    {"id": "user-input", "name": "User Input", "type": "user", "tokens": 100},
    {"id": "skill-name", "name": "Skill Name", "type": "skill", "tokens": 5000},
    {"id": "agent-name", "name": "Agent Name", "type": "agent", "tokens": 3000},
    {"id": "tool-read", "name": "Read", "type": "tool", "tokens": 1500}
  ],
  "links": [
    {"source": "user-input", "target": "skill-name", "value": 100, "probability": 1.0},
    {"source": "skill-name", "target": "agent-name", "value": 3000, "probability": 0.7}
  ]
}

Phase 3: HTML Generation

Step 3.1: Generate HTML

Create a self-contained HTML file using the template from html-template.md.

Replace the placeholder data with the actual Sankey data from Step 2.4.

The HTML must include:

1. Header: Target name, generation date, total estimated tokens
2. Sankey Diagram: Full flow visualization (D3.js CDN)
3. Summary Table: Node-level breakdown (type, name, estimated tokens, probability)
4. Token Distribution Bar: Stacked bar showing token allocation by category

Step 3.2: Save and Open

1. Generate timestamp: YYYY-MM-DD-HHmm
2. Save to: .brain/report/{timestamp}-flow-{target-name}.html
3. Open in browser: open {file_path}

Phase 4: Present Results

Show a concise summary:

フロー可視化完了

対象: {target name}
ノード数: {count}
推定トークン: {total} tokens
フロー数: {link count}

レポート: .brain/report/{filename}