Problem

SubAgentNode canvas display lacks visibility of prompt content, making it difficult to understand workflow logic at a glance.

Current Behavior

1. Place SubAgentNode on canvas
2. ❌ Only description and model badge are visible
3. ❌ Must select node and open PropertyPanel to view prompt content

Expected Behavior

1. Place SubAgentNode on canvas
2. ✅ Description, prompt preview, and model badge are visible
3. ✅ Can view prompt summary directly on canvas

Solution

Added prompt preview display area to SubAgentNode component using the same styling pattern as SkillNode description, limited to 2 lines with ellipsis for overflow.

Changes

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

• Added prompt preview section below description (lines 59-76)
• Limited to 2 lines with ellipsis for overflow (WebkitLineClamp: 2)
• Uses same styling pattern as SkillNode description
• Only displays when data.prompt exists

Display order:

1. Node header ("Sub-Agent")
2. Description (data.description)
3. Prompt preview (data.prompt) ← NEW
4. Model badge (data.model)
5. Connection handles

{/* Prompt Preview */}
{data.prompt && (
  <div
    style={{
      fontSize: '11px',
      color: 'var(--vscode-descriptionForeground)',
      marginBottom: '8px',
      lineHeight: '1.4',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      display: '-webkit-box',
      WebkitLineClamp: 2,
      WebkitBoxOrient: 'vertical',
    }}
  >
    {data.prompt}
  </div>
)}

Impact

• UX Improvement: Easier to understand overall workflow by viewing prompt content directly on canvas
• No Breaking Changes: No changes to existing node data structure, display-only addition
• Consistency: Maintains UI consistency by using same styling pattern as SkillNode

Testing

• Manual E2E testing completed
  • Verified prompt displays on SubAgentNode
  • Verified long prompts truncate to 2 lines
  • Verified empty prompts don't display
  • Verified proper display in dark/light mode
• Code quality checks passed
  • npm run format ✓
  • npm run lint ✓
  • npm run check ✓
  • npm run build ✓

Notes

• Implementation follows SkillNode pattern
• Uses VSCode theme variables for dark/light mode support