Problem

PromptNode's canvas display used a boxed style that was inconsistent with other nodes (e.g., SubAgentNode).

Current Behavior

• ❌ Prompt preview displayed in a box with background color and border
• ❌ Using monospace font
• ❌ Fixed height constraint (60px)

Expected Behavior

• ✅ Simple plain text display without box
• ✅ Using regular font
• ✅ Display up to 2 lines (same as SubAgentNode)

Solution

Unified PromptNode's prompt preview style to match SubAgentNode's simple plain text style.

Changes

File: src/webview/src/components/nodes/PromptNode.tsx

• Removed background color, border, border-radius, and padding
• Changed from monospace to regular font
• Replaced fixed height constraint with 2-line clamp (WebkitLineClamp: 2)
• Added ellipsis for text overflow

// Before
backgroundColor: 'var(--vscode-textBlockQuote-background)',
border: '1px solid var(--vscode-textBlockQuote-border)',
borderRadius: '4px',
padding: '8px',
fontFamily: 'monospace',
maxHeight: '60px',

// After
lineHeight: '1.4',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',

Impact

• Improved visual consistency across node types
• Unified design with SubAgentNode, SkillNode, etc.
• No breaking changes (existing workflow files unaffected)

Testing

• Manual E2E testing completed
  • Verified PromptNode canvas display
  • Confirmed prompt text displays correctly in 2 lines
  • Confirmed long text is truncated with ellipsis
• Code quality checks passed
  • npm run format ✓
  • npm run lint ✓
  • npm run check ✓
  • npm run build ✓

🤖 Generated with Claude Code