[P2] Create centralized Agent Attribution component with hover details

[jacob-petterle]

Overview

Create a reusable component for displaying agent attribution (who did this action) with hover tooltips showing additional context. Currently, agent names appear inconsistently throughout the UI without hover details.

Related to: #204 (Activity timeline attribution bug)

---

Problem

Agent attribution is currently inconsistent and lacks context:

Current Issues:

1. Comments - Just shows "Claude Code" with no hover info
2. Activity timeline - Shows wrong attribution (human instead of agent) ([P1] Activity timeline attribution shows human instead of agent #204)
3. No hover context - Users can't see which session, platform, or additional details
4. Duplicated logic - Attribution rendering scattered across components

What Users Need:

• Quick identification: Who/what agent did this?
• Context on hover: Which session? When? Which platform?
• Consistency: Same display pattern everywhere
• Icons: Visual distinction between agents (Claude Code vs Cursor vs Manual)

---

Proposed Solution

Centralized Component: <AgentAttribution>

interface AgentAttributionProps {
  actor: {
    type: 'agent' | 'human';
    name: string;              // "Claude Code", "Cursor", "jacob-petterle"
    platform?: string;         // "claude-code", "cursor", "windsurf"
    sessionId?: string;        // Session/conversation ID
    timestamp?: number;        // When the action occurred
    avatar?: string;           // Avatar URL (for humans)
  };
  variant?: 'inline' | 'full'; // inline = just name, full = with avatar
  showHover?: boolean;         // Enable hover tooltip (default: true)
  size?: 'sm' | 'md' | 'lg';   // Size of avatar/icon
}

<AgentAttribution 
  actor={{
    type: 'agent',
    name: 'Claude Code',
    platform: 'claude-code',
    sessionId: 'abc123',
    timestamp: 1706400000
  }}
  variant="inline"
/>

Hover Tooltip Content

When hovering over the attribution, show a tooltip with:

┌─────────────────────────────┐
│ 🤖 Claude Code              │
│ Platform: Claude Code CLI   │
│ Session: abc123             │
│ Time: 2 hours ago           │
│ [ View Session ] (optional) │
└─────────────────────────────┘

For human users:

┌─────────────────────────────┐
│ 👤 jacob-petterle           │
│ GitHub: @jacob-petterle     │
│ Time: 2 hours ago           │
└─────────────────────────────┘

---

Implementation Plan

Phase 1: Create Component

• Build <AgentAttribution> component
• Support agent and human types
• Add platform icons (Claude Code, Cursor, Windsurf, etc.)
• Implement tooltip with HeroUI Tooltip component
• Support inline and full variants

Phase 2: Centralize Actor Data

• Create getActorInfo(actor: string) utility
• Parse actor string to extract platform, session info
• Handle edge cases (old data format, missing info)

Phase 3: Replace Existing Attribution

• Comments panel - Replace current "Claude Code" text
• Activity timeline - Fix [P1] Activity timeline attribution shows human instead of agent #204 by using component
• Plan header - Show plan creator
• Inbox items - Show who triggered the event
• Input requests - Show which agent is asking

Phase 4: Enhance with Session Links (Optional)

• Link to agent session/conversation (if available)
• Show agent status (active, completed, error)

---

Icon Mapping

Map agent platforms to icons:

Platform	Icon	Display Name
claude-code	🤖 Claude icon	Claude Code
cursor	🖱️ Cursor icon	Cursor
windsurf	🌊 Windsurf icon	Windsurf
cline	📟 VSCode icon	Cline
manual	👤 User icon	[Username]

Use SVG icons for professional look, fallback to emoji for missing icons.

---

Actor Data Format

Standardize the actor string format in plan events:

Current (inconsistent):

"Claude Code"
"jacob-petterle"
"claude-code:session-abc123"

Proposed (structured):

"agent:claude-code:session-abc123"
"human:jacob-petterle"
"agent:cursor:workspace-xyz"

Or use object format in CRDT:

{
  type: 'agent',
  platform: 'claude-code',
  sessionId: 'abc123',
  name: 'Claude Code'
}

---

Where This Component Gets Used

1. Comments (CommentThread.tsx, Comment.tsx)

   • Show who wrote the comment
   • Hover for session details

2. Activity Timeline (ActivityTimeline.tsx, EventItem.tsx)

   • Show who triggered each event
   • Fix [P1] Activity timeline attribution shows human instead of agent #204 attribution bug

3. Plan Header (PlanHeader.tsx)

   • Show plan creator/owner
   • Show last edited by

4. Inbox Items (BaseInboxCard.tsx, event cards)

   • Show who triggered inbox event
   • Quick identification in list view

5. Input Requests (InputRequestModal.tsx)

   • Show which agent is asking the question

6. Review Actions (ReviewActions.tsx)

   • Show who approved/rejected
   • Show who requested changes

---

Benefits

1. Consistency - Same attribution display everywhere
2. Context - Hover shows session, time, platform details
3. Maintainability - One place to update attribution logic
4. Extensibility - Easy to add new agent platforms
5. Fixes [P1] Activity timeline attribution shows human instead of agent #204 - Solves activity timeline attribution bug
6. Better UX - Users understand who/what is interacting

---

Acceptance Criteria

• <AgentAttribution> component created with TypeScript props
• Hover tooltip shows platform, session, timestamp
• Works for both agents and human users
• Icons/avatars display correctly for each platform
• Comments use component (shows hover details)
• Activity timeline uses component (fixes [P1] Activity timeline attribution shows human instead of agent #204)
• Consistent styling in light and dark mode
• Accessible (keyboard navigation, ARIA labels)

---

Priority

P2 - Important UX improvement and fixes #204, but not blocking core workflow.

---

Related Issues

• [P1] Activity timeline attribution shows human instead of agent #204 - Activity timeline attribution shows human instead of agent (this fixes it)
• Agent identity tracking (general pattern)

---

Created 2026-01-28