Guest Career Timeline Visualization

// From DesignStudioPage.tsx:323-327
const linkedinUrl = 
  linkedEpisode.metadata?.guestLinkedinUrl ||  // Transcript metadata
  linkedEpisode.guest?.linkedinUrl             // Guest record

if (!linkedinUrl) {
  toast.error('LinkedIn URL required', 
    'The guest\'s LinkedIn URL must be set on the guest record or in the episode metadata.')
}

// From useAgentGeneration.ts:423-425
export function useTimelineAgent() {
  return useAgentGeneration<CareerTimelineResult>('timeline')
}

const result = await timelineAgent.generate({
  episodeNumber: episode.metadata.episodeNumber.toString(),
  guestName: episode.metadata.guestName,
  guestLinkedinUrl: linkedinUrl,
  transcript: transcriptText,
  prf: prfText,
  // Model selection is server-side (Gemini primary, Claude fallback)
})

// From useAgentGeneration.ts:367-420
export interface CareerTimelineResult {
  meta: {
    episodeNumber: string
    guestName: string
    currentRole: string
    currentCompany: string
  }
  
  header: {
    title: string           // e.g., "The Journey of [Guest Name]"
    subtitle: string        // e.g., "From Developer to CTO"
    tagline: string         // e.g., "20 Years of IT Leadership"
  }
  
  timelinePoints: TimelinePoint[]
  
  skillsPanel: {
    categories: Array<{
      name: string          // e.g., "Technical", "Leadership"
      skills: string[]      // e.g., ["Cloud", "DevOps", "Security"]
    }>
  }
  
  evolutionInsight: {
    title: string           // Key career theme
    text: string            // 2-3 sentence insight
  }
  
  featuredQuote: {
    text: string            // Most impactful quote from episode
    attribution: string     // e.g., "— John Doe, CTO"
  }
  
  visualStyle: {
    layout: string          // e.g., "Isometric 3D Timeline"
    direction: string       // "left-to-right" or "bottom-to-top"
    colorPalette: {
      background: string    // Hex color
      primary: string       // Hex color
      accent: string        // Hex color (usually YBH orange)
      secondary: string     // Hex color
    }
    pathStyle: string       // e.g., "Curved road with milestones"
    buildingStyle: string   // e.g., "3D isometric buildings for companies"
  }
  
  prompt: string            // Complete Nano Banana Pro prompt
}

export interface TimelinePoint {
  index: number             // Sequential position (0-based)
  stage: string             // Career stage name
  period: string            // Date range (e.g., "2015-2018")
  location?: string         // City/country if available
  role: string              // Job title
  company: string           // Company name
  keyAchievement: string    // Main accomplishment
  visualElements: string[]  // Icons/imagery suggestions
  quote?: string | null     // Relevant quote from transcript
}

┌─────────────────────────────────────────────────────┐
│ [Guest Name Career Timeline]                        │
├─────────────────────────────────────────────────────┤
│                                                     │
│  [Building 1] ──→ [Building 2] ──→ [Building 3]   │
│   2010-2015       2015-2018       2018-Present     │
│   Developer       Sr. Engineer     CTO             │
│                                                     │
│  Skills: [Cloud] [DevOps] [Leadership]             │
│  Quote: "..."                                       │
└─────────────────────────────────────────────────────┘

┌────────────────────────┐
│ [Guest Career Journey] │
├────────────────────────┤
│                        │
│   ┌─────────┐         │
│   │ CTO     │  2020+  │
│   └────↑────┘         │
│        │              │
│   ┌────┴────┐         │
│   │VP Eng   │  2018   │
│   └────↑────┘         │
│        │              │
│   ┌────┴────┐         │
│   │Director │  2015   │
│   └────↑────┘         │
│        │              │
│   ┌────┴────┐         │
│   │Engineer │  2010   │
│   └─────────┘         │
│                        │
└────────────────────────┘

┌─────────────────────────────────────┐
│ [Non-Linear Career Journey]         │
├─────────────────────────────────────┤
│                                     │
│      ┌──[Stage 3]                  │
│     /                               │
│    /                                │
│   [Stage 2]──┐                     │
│               \                     │
│                \                    │
│              [Stage 4]              │
│             /                       │
│            /                        │
│    [Stage 1]                        │
│                                     │
└─────────────────────────────────────┘

--background: #0F2A44   /* Deep blue */
--primary: #F17529      /* YBH orange */
--accent: #F7B500       /* YBH yellow */
--secondary: #A4BFC1    /* Tower gray */

--background: #F5F5F5   /* Light gray */
--primary: #16213E      /* Navy */
--accent: #F17529       /* YBH orange */
--secondary: #0F3460    /* Teal */

--gradient: 
  #EF4136 (start) →     /* Red: Early career */
  #F17529 (mid-early) → /* Orange: Growth */
  #F7B500 (mid-late) →  /* Yellow: Achievement */
  #27AE60 (end)         /* Green: Current success */

16:9 landscape isometric 3D career timeline visualization.

Background: Dark blue (#0F2A44) blueprint style with subtle grid pattern.

Header:
- Title: "The Journey of Sarah Chen" (bold white, 36pt)
- Subtitle: "From Developer to Cloud Architect" (orange #F17529, 24pt)
- Tagline: "15 Years of Cloud Innovation" (light gray, 18pt)

Timeline (left to right, isometric 3D buildings):

1. [2008-2012] Junior Developer @ Tech Startup
   - Small isometric office building (blue-gray)
   - Icon: Laptop
   - Achievement: "Built first production API"
   - Quote: "I learned the hard way that scaling isn't optional"

2. [2012-2015] Senior Engineer @ Enterprise Corp
   - Medium isometric corporate building (navy)
   - Icon: Server racks
   - Achievement: "Led cloud migration"

3. [2015-2018] Engineering Manager @ Cloud Company
   - Large isometric tech campus (teal)
   - Icon: Team/people
   - Achievement: "Grew team from 5 to 50"

4. [2018-2023] Director of Engineering @ Fortune 500
   - Tall isometric headquarters (dark blue)
   - Icon: Network/architecture
   - Achievement: "$2M cost savings through optimization"

5. [2023-Present] Cloud Architect @ Current Company
   - Modern isometric building with orange accents
   - Icon: Cloud architecture
   - Achievement: "Leading multi-cloud strategy"

Path: Orange curved road (#F17529) connecting all buildings, 
with milestone markers at each transition point.

Skills Panel (bottom right corner):
- Technical: AWS, Kubernetes, Terraform, Python
- Leadership: Team Building, Strategy, Communication

Evolution Insight (bottom left):
"From Code to Strategy: Sarah's journey shows the evolution 
from individual contributor to architectural leadership."

Featured Quote (center bottom):
"The best architectures are built on hard-earned lessons."
— Sarah Chen, Cloud Architect

Footer:
- "Subscribe and share with your peers" (small orange)
- "Episode 348" (small gray)
- "YBH: When IT leaders rise, so does everything else" (small gray)

NO logo in the design.

Isometric projection, 30° angle, clean professional style, 
optimized for LinkedIn sharing.

// From DesignStudioPage.tsx:786-798
{designType === 'timeline' && timelineAgent.isLoading && (
  <AgentStatusPanel
    isLoading={timelineAgent.isLoading}
    status={timelineAgent.status}         // reading_context, querying_kb, generating
    statusDetail={timelineAgent.statusDetail}  // Detailed message
    progress={timelineAgent.progress}     // 0-100
    error={timelineAgent.error}
    agentName="Career Timeline"
    onRetry={handleGenerateTimeline}
    onCancel={timelineAgent.cancel}
  />
)}

// From DesignStudioPage.tsx:337-338
const result = await timelineAgent.generate({
  // ...
  // Model is now determined server-side (Gemini primary, Claude fallback)
})

// From DesignStudioPage.tsx:340-357
if (result?.prompt) {
  const timelineLayout = result.visualStyle?.layout || 'Isometric 3D Timeline'
  const timelineTemplate = 'Career Timeline'
  const bg = result.visualStyle?.colorPalette?.background || ''
  const inferredColorSystem =
    typeof bg === 'string' && /0F2A44|123455/i.test(bg) 
      ? 'blueprint_dark' 
      : 'blueprint_light'

  // Convert timeline result to standard spec format
  const spec: InfographicSpec = {
    layout: timelineLayout,
    template: timelineTemplate,
    title: result.header?.title || `${guestName} Career Timeline`,
    colorSystem: inferredColorSystem,
    iconStyle: 'isometric',
    aspectRatio: '16:9',
    prompt: result.prompt,
  }
  setGeneratedSpec(spec)
  toast.success('Timeline spec generated', 
    `${result.timelinePoints?.length || 0} career stages identified`)
}