Research Visualizer

After completing a research task that involved multiple steps (searches, API calls, browsing, analysis), generate an interactive visual report and return it as a link.

When to Activate

Activate this skill automatically when:

1. A research task with 3+ steps has been completed
2. The user asked a question requiring multi-source analysis (e.g., market analysis, news investigation, comparative research)
3. The user explicitly requests to "show the research process" or "visualize the analysis"

Workflow

Step 1: Collect Research Context

From the conversation, extract a structured JSON with this schema:

{
  "title": "Short descriptive title of the research",
  "subtitle": "One-line description",
  "research_time": "Xm Ys",
  "conclusion": {
    "text": "2-3 sentence key finding",
    "confidence": 0.0-1.0
  },
  "steps": [
    {
      "tool": "Web Search | API | Web Browse | Analysis | Synthesis",
      "tool_label": "Display label for the tool",
      "time_range": "start — end",
      "query": "What was searched/called/analyzed",
      "summary": "What was found/concluded",
      "sources": [
        { "title": "Source name", "url": "https://...", "icon": "📄" }
      ]
    }
  ],
  "visualizations": [
    {
      "type": "line_chart | bar_chart | market_cards | world_map | news_cards | stat_cards | comparison_table | quote_block | key_points",
      "section_title": "Section heading",
      "data": {}
    }
  ]
}

Step 2: Choose Visualizations Dynamically

IMPORTANT: Do NOT use a fixed template. Analyze the research content and pick only the visualizations that make sense. Use this decision guide:

Rules:

• Use 2-4 visualization types per report (don't overload)
• Always include the research timeline (steps)
• Pick visualizations that ADD VALUE, not just fill space
• If unsure, stat_cards + news_cards is a safe default combo

Visualization Data Schemas

• line_chart: Time-series data, trends, probability changes

```json

{ "title": "Chart Title", "y_format": "percent", "y_min": 0, "y_max": 100,

"x_labels": ["Label1", "Label2"],

"series": [{ "name": "Series Name", "values": [10, 20, 30] }] }

```

• bar_chart: Categorical comparisons, rankings

```json

{ "title": "Chart Title", "y_format": "number",

"bars": [{ "label": "Category A", "value": 85, "color": "#00d2a0" },

{ "label": "Category B", "value": 62, "color": "#6c5ce7" }] }

```

• market_cards: Prediction markets, pricing, comparisons

```json

[{ "name": "Market Name", "yes_price": 85, "no_price": 15, "volume": "128M", "change_7d": 3.2 }]

```

• world_map: Geopolitical analysis, regional impacts

```json

{ "regions": [{ "id": "united_states|europe|east_asia|...", "name": "Display Name", "info": "Impact description" }] }

```

Valid region IDs: north_america, united_states, canada, mexico, south_america, europe, africa, russia, middle_east, east_asia, china, southeast_asia, australia

• news_cards: Related news, source citations

```json

[{ "title": "Headline", "source": "Publisher", "date": "Mar 28, 2026", "sentiment": "positive|negative|neutral|warning", "tag": "Category", "url": "https://..." }]

```

• stat_cards: Key metrics and statistics (use for any numerical highlights)

```json

[{ "label": "Total Volume", "value": "$4.2B", "change": "+12.5%", "trend": "up|down|neutral", "icon": "💰" }]

```

• comparison_table: Side-by-side comparisons

```json

{ "headers": ["Feature", "Option A", "Option B"],

"rows": [["Price", "$10/mo", "$25/mo"], ["Users", "5", "Unlimited"]],

"highlight_col": 1 }

```

• quote_block: Notable quotes from sources

```json

[{ "text": "The quote text here", "author": "Person Name", "role": "Title / Organization", "url": "https://..." }]

```

• key_points: Bullet-point takeaways with icons

```json

[{ "icon": "✅", "title": "Point Title", "text": "Explanation of the point" }]

```

Step 3: Generate and Upload

Save the JSON to a temp file, then run:

node {baseDir}/scripts/generate-report.js --input /tmp/research-data.json --output /tmp/report.html
node {baseDir}/scripts/upload-report.js --file /tmp/report.html

The upload script automatically:

1. Encrypts the HTML with AES-256-GCM (key never touches the server)
2. Uploads the encrypted viewer page to R2
3. Outputs the full URL with the decryption key in the fragment (#key=...)

Privacy guarantee: The URL fragment (#key=...) is never sent to the server. Only the person with the complete URL can view the report.

Return the URL to the user as:

📊 Research Report Ready
[Title of Research](https://r.a2ui.me/r/xxxxx.html#key=yyy)
6 steps · 14 sources · 87% confidence
🔒 End-to-end encrypted — only this link can decrypt

Step 4: Local Fallback

If no upload credentials are set, the report saves locally to {baseDir}/output/. Inform the user:

📊 Research report saved locally:
file:///path/to/output/report.html#key=yyy
(Set A2UI_R2_BUCKET to enable cloud hosting at r.a2ui.me)

Step 5: No-encrypt option

If the user explicitly wants a public (unencrypted) report, add --no-encrypt:

node {baseDir}/scripts/upload-report.js --file /tmp/report.html --no-encrypt

Important

• Always include ALL research steps, not just the final answer
• Include real source URLs whenever available
• Set confidence based on source agreement (high if multiple sources agree, lower if contradictory)
• The report should make the research process transparent and verifiable
• Keep step summaries concise but informative (1-2 sentences each)