Skip to content

Add copy button to graph error panels for LLM debugging#981

Open
e-gineer wants to merge 1 commit intodevelopfrom
feat/graph-error-copy-button
Open

Add copy button to graph error panels for LLM debugging#981
e-gineer wants to merge 1 commit intodevelopfrom
feat/graph-error-copy-button

Conversation

@e-gineer
Copy link
Contributor

Summary

Adds a copy-to-clipboard button to graph error displays to make it easy for users to copy error information for debugging with LLMs.

Features

  • Minimal UI: Just copy icon in top-right corner, no header text
  • Tooltip: "Copy to clipboard" on hover
  • Markdown Format: Optimized for LLM consumption
  • Rich Metadata: Includes panel name, type, status, and timestamp
  • Comprehensive Context:
    • NODE_AND_EDGE format: Complete status summary + detailed per-node/edge errors
    • Legacy format: Panel-level error with metadata
  • Visual Feedback: Icon changes to filled + green for 1 second on success

Copy Format Examples

NODE_AND_EDGE Format (Modern Graphs)

# Graph Panel Error Report

**Panel:** aws_infrastructure_graph
**Type:** graph
**Status:** error
**Timestamp:** 2025-11-20T15:30:45.123Z

## Summary
- Complete: 45 nodes, 12 edges, 0 withs
- Running: 2 nodes, 0 edges, 0 withs
- Waiting: 5 nodes, 0 edges, 0 withs
- **Errors: 3 nodes, 1 edge, 0 withs**

## Error Details

### Node: aws_vpc_123
**Title:** VPC Configuration
**Error:**

Connection timeout after 30 seconds


[... additional errors ...]

Legacy Format (Panel Errors)

# Panel Error Report

**Panel:** aws_infrastructure_graph
**Type:** graph
**Status:** error
**Timestamp:** 2025-11-20T15:30:45.123Z

## Error Message

Connection timeout after 30 seconds

Files Modified

  • NodeAndEdgePanelInformation.tsx - Added copy button and formatting helper
  • Graph/index.tsx - Pass panel prop to information component
  • PanelStatus.tsx - Added copy button to error display

Testing

To test:

  1. Run a dashboard with graph panels that have errors
  2. Verify copy button appears in top-right of error panel
  3. Click copy button
  4. Verify icon changes to filled + green
  5. Paste copied content
  6. Verify Markdown format with complete error context

Future Work

See .claude/wip/graph-error-copy-button/PROJECT-PHASES.md for Phase 2:

  • Investigation of other component types that could benefit from copy functionality
  • Potential expansion to tables, charts, flows, hierarchies, etc.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Adds a copy-to-clipboard button to graph error displays (both modern
NODE_AND_EDGE format and legacy panel-level errors) to make it easy for
users to copy error information for debugging with LLMs.

Features:
- Minimal UI with just copy icon in top-right
- Tooltip: "Copy to clipboard"
- Markdown-formatted output optimized for LLMs
- Includes metadata: panel name, type, status, timestamp
- NODE_AND_EDGE format: Complete status summary + detailed errors
- Legacy format: Panel-level error with metadata
- Success feedback: Icon changes to filled + green for 1 second

Modified files:
- NodeAndEdgePanelInformation.tsx: Added copy button and formatting
- Graph/index.tsx: Pass panel prop to NodeAndEdgePanelInformation
- PanelStatus.tsx: Added copy button to PanelError component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions
Copy link

This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

@github-actions github-actions bot added the stale label Jan 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant