@startsimpli/ui 0.4.13 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -14,6 +14,8 @@
     "./theme": "./src/theme/index.ts",
     "./theme/contract": "./theme/contract.css",
     "./email-editor": "./src/components/email-editor/index.ts",
+    "./workflows": "./src/components/workflows/index.ts",
+    "./workflows/styles": "./src/components/workflows/workflows.css",
     "./tailwind": "./tailwind.preset.js"
   },
   "files": [
@@ -24,16 +26,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "lint": "eslint src/**/*.{ts,tsx}",
-    "clean": "rm -rf dist"
-  },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
@@ -47,6 +39,8 @@
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
+    "@xyflow/react": "^12.10.2",
+    "dagre": "^0.8.5",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -66,6 +60,7 @@
     "date-fns": "^3.6.0",
     "dompurify": "^3.4.1",
     "lucide-react": "^0.408.0",
+    "react-big-calendar": "^1.19.4",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.6.1",
     "tailwindcss-animate": "^1.0.7",
@@ -79,8 +74,10 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
+    "@types/dagre": "^0.7.52",
     "@types/node": "^20.19.39",
     "@types/react": "^19.2.14",
+    "@types/react-big-calendar": "^1.16.3",
     "@types/react-dom": "^19.2.3",
     "eslint": "^8.57.1",
     "identity-obj-proxy": "^3.0.0",
@@ -97,5 +94,15 @@
     "react",
     "nextjs",
     "startsimpli"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "clean": "rm -rf dist"
+  }
+}

package/src/components/__tests__/calendar-view-popup.test.tsx

@@ -0,0 +1,42 @@
+/**
+ * Verifies CalendarView forwards the `popup` prop to react-big-calendar so the
+ * month grid's "+N more" overflow link opens a popover instead of being inert
+ * (raise-simpli-3er). RBC's overflow rendering depends on real cell layout
+ * heights, which jsdom does not compute, so we mock RBC's Calendar with a
+ * passthrough that surfaces props into the DOM.
+ */
+import { render } from '@testing-library/react'
+
+const calendarPropSpy = jest.fn()
+
+jest.mock('react-big-calendar', () => {
+  const actual = jest.requireActual('react-big-calendar')
+  return {
+    ...actual,
+    Calendar: (props: Record<string, unknown>) => {
+      calendarPropSpy(props)
+      return <div data-testid="rbc-calendar-stub" data-popup={String(props.popup)} />
+    },
+  }
+})
+
+import { CalendarView } from '../calendar/calendar-view'
+
+const FIXED_DATE = new Date('2026-04-15T12:00:00Z')
+
+describe('CalendarView popup prop', () => {
+  beforeEach(() => calendarPropSpy.mockClear())
+
+  it('defaults popup to true so the "+N more" overflow link opens a popover', () => {
+    render(<CalendarView events={[]} defaultDate={FIXED_DATE} defaultView="month" />)
+    expect(calendarPropSpy).toHaveBeenCalledTimes(1)
+    expect(calendarPropSpy.mock.calls[0][0].popup).toBe(true)
+  })
+
+  it('forwards popup={false} when callers opt out', () => {
+    render(
+      <CalendarView events={[]} defaultDate={FIXED_DATE} defaultView="month" popup={false} />,
+    )
+    expect(calendarPropSpy.mock.calls[0][0].popup).toBe(false)
+  })
+})

package/src/components/__tests__/calendar-view.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { CalendarView, type CalendarEvent } from '../calendar/calendar-view'
+
+const FIXED_DATE = new Date('2026-04-15T12:00:00Z')
+
+const sampleEvents: CalendarEvent[] = [
+  {
+    id: 'meet-1',
+    title: 'Investor Sync — Sequoia',
+    start: new Date('2026-04-15T16:00:00Z'),
+    end: new Date('2026-04-15T16:30:00Z'),
+  },
+  {
+    id: 'meet-2',
+    title: 'Demo with Acme',
+    start: '2026-04-16T17:00:00Z',
+    end: '2026-04-16T17:45:00Z',
+  },
+]
+
+describe('CalendarView', () => {
+  it('renders without crashing in month view', () => {
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    // The toolbar's "Today" button is always rendered by react-big-calendar
+    expect(screen.getByText('Today')).toBeInTheDocument()
+  })
+
+  it('renders event titles on the grid', () => {
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    expect(screen.getByText(/Investor Sync — Sequoia/)).toBeInTheDocument()
+    expect(screen.getByText(/Demo with Acme/)).toBeInTheDocument()
+  })
+
+  it('fires onEventClick with the original event when an event is clicked', () => {
+    const onEventClick = jest.fn()
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+        onEventClick={onEventClick}
+      />
+    )
+    fireEvent.click(screen.getByText(/Investor Sync — Sequoia/))
+    expect(onEventClick).toHaveBeenCalledTimes(1)
+    expect(onEventClick.mock.calls[0][0].id).toBe('meet-1')
+    expect(onEventClick.mock.calls[0][0].title).toBe('Investor Sync — Sequoia')
+  })
+
+  it('accepts string dates in events and normalizes them', () => {
+    // Verifies the toDate / normalizeEvent path
+    render(
+      <CalendarView
+        events={[
+          { id: 'x', title: 'Stringy', start: '2026-04-15T16:00:00Z' },
+        ]}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    expect(screen.getByText(/Stringy/)).toBeInTheDocument()
+  })
+
+  it('passes through resource payload to onEventClick', () => {
+    interface MyMeeting {
+      uuid: string
+      attendees: number
+    }
+    const meeting: MyMeeting = { uuid: 'abc-123', attendees: 5 }
+    const onEventClick = jest.fn()
+    render(
+      <CalendarView<MyMeeting>
+        events={[
+          { id: 'r1', title: 'WithResource', start: FIXED_DATE, resource: meeting },
+        ]}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+        onEventClick={onEventClick}
+      />
+    )
+    fireEvent.click(screen.getByText(/WithResource/))
+    expect(onEventClick).toHaveBeenCalledTimes(1)
+    expect(onEventClick.mock.calls[0][0].resource).toEqual(meeting)
+  })
+})

package/src/components/__tests__/chat.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatMessage } from '../chat/ChatMessage'
+import { ChatThread } from '../chat/ChatThread'
+import { ChatComposer } from '../chat/ChatComposer'
+import type { ChatMessageData } from '../chat/types'
+
+beforeAll(() => {
+  // jsdom has no layout; stub scrollIntoView used by autoscroll
+  Element.prototype.scrollIntoView = jest.fn()
+})
+
+describe('ChatMessage', () => {
+  it('renders text content and tags the role', () => {
+    const { container } = render(
+      <ChatMessage message={{ id: '1', role: 'user', content: 'Hello there' }} />
+    )
+    expect(screen.getByText('Hello there')).toBeInTheDocument()
+    expect(container.querySelector('[data-role="user"]')).toBeInTheDocument()
+  })
+
+  it('marks a streaming assistant message as busy', () => {
+    const { container } = render(
+      <ChatMessage message={{ id: '2', role: 'assistant', content: 'thinking', status: 'streaming' }} />
+    )
+    const el = container.querySelector('[data-status="streaming"]')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveAttribute('aria-busy', 'true')
+  })
+
+  it('renders a tool/status message with its tool name', () => {
+    render(
+      <ChatMessage
+        message={{ id: '3', role: 'tool', kind: 'tool', toolName: 'generateSlide', content: 'Generating slide 1…' }}
+      />
+    )
+    expect(screen.getByText(/generateSlide/i)).toBeInTheDocument()
+    expect(screen.getByText('Generating slide 1…')).toBeInTheDocument()
+  })
+})
+
+describe('ChatThread', () => {
+  const messages: ChatMessageData[] = [
+    { id: 'a', role: 'user', content: 'First' },
+    { id: 'b', role: 'assistant', content: 'Second' },
+    { id: 'c', role: 'assistant', content: 'Third' },
+  ]
+
+  it('renders all messages in order', () => {
+    render(<ChatThread messages={messages} />)
+    expect(screen.getByText('First')).toBeInTheDocument()
+    expect(screen.getByText('Second')).toBeInTheDocument()
+    expect(screen.getByText('Third')).toBeInTheDocument()
+  })
+
+  it('shows an empty state placeholder when there are no messages', () => {
+    render(<ChatThread messages={[]} emptyState={<div>Start chatting</div>} />)
+    expect(screen.getByText('Start chatting')).toBeInTheDocument()
+  })
+
+  it('autoscrolls to the bottom when messages change', () => {
+    const { rerender } = render(<ChatThread messages={messages} />)
+    rerender(<ChatThread messages={[...messages, { id: 'd', role: 'user', content: 'Fourth' }]} />)
+    expect(Element.prototype.scrollIntoView).toHaveBeenCalled()
+  })
+})
+
+describe('ChatComposer', () => {
+  it('submits trimmed text on Enter and clears (uncontrolled)', () => {
+    const onSubmit = jest.fn()
+    render(<ChatComposer onSubmit={onSubmit} />)
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: '  paste my outline  ' } })
+    fireEvent.keyDown(textarea, { key: 'Enter' })
+    expect(onSubmit).toHaveBeenCalledWith('paste my outline')
+  })
+
+  it('does NOT submit on Shift+Enter (newline)', () => {
+    const onSubmit = jest.fn()
+    render(<ChatComposer onSubmit={onSubmit} />)
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'line one' } })
+    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true })
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('does NOT submit on bare Enter when the content is multi-line (pasted outline stays intact)', () => {
+    const onSubmit = jest.fn()
+    render(<ChatComposer onSubmit={onSubmit} />)
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'My Deck\nSlide 1: Problem\nSlide 2: Solution' } })
+    fireEvent.keyDown(textarea, { key: 'Enter' })
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('submits multi-line content on Cmd/Ctrl+Enter', () => {
+    const onSubmit = jest.fn()
+    render(<ChatComposer onSubmit={onSubmit} />)
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'My Deck\nSlide 1: Problem' } })
+    fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true })
+    expect(onSubmit).toHaveBeenCalledWith('My Deck\nSlide 1: Problem')
+  })
+
+  it('does not submit empty/whitespace', () => {
+    const onSubmit = jest.fn()
+    render(<ChatComposer onSubmit={onSubmit} />)
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: '   ' } })
+    fireEvent.keyDown(textarea, { key: 'Enter' })
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('submits via the send button', () => {
+    const onSubmit = jest.fn()
+    render(<ChatComposer onSubmit={onSubmit} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'go' } })
+    fireEvent.click(screen.getByRole('button', { name: /send/i }))
+    expect(onSubmit).toHaveBeenCalledWith('go')
+  })
+
+  it('disables submission while busy', () => {
+    const onSubmit = jest.fn()
+    render(<ChatComposer onSubmit={onSubmit} busy />)
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'hi' } })
+    fireEvent.keyDown(textarea, { key: 'Enter' })
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})

package/src/components/__tests__/meetings-list.test.tsx

@@ -0,0 +1,114 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MeetingsList, type MeetingsListItem } from '../calendar/meetings-list'
+
+const sampleMeetings: MeetingsListItem[] = [
+  {
+    id: 1,
+    title: 'Sequoia partner sync',
+    scheduled_at: '2026-04-29T16:00:00Z',
+    status: 'confirmed',
+    duration_minutes: 30,
+    investor_name: 'Roelof',
+    investor_email: 'roelof@sequoia.com',
+    meeting_link: 'https://meet.google.com/abc',
+  },
+  {
+    id: 2,
+    title: 'Acme intro',
+    scheduled_at: '2026-04-30T14:00:00Z',
+    status: 'pending',
+    duration_minutes: 45,
+    investor_email: 'partner@acme.vc',
+  },
+]
+
+describe('MeetingsList', () => {
+  it('renders each meeting title', () => {
+    render(<MeetingsList meetings={sampleMeetings} />)
+    expect(screen.getByText('Sequoia partner sync')).toBeInTheDocument()
+    expect(screen.getByText('Acme intro')).toBeInTheDocument()
+  })
+
+  it('shows status badges per meeting', () => {
+    render(<MeetingsList meetings={sampleMeetings} />)
+    expect(screen.getByText('Confirmed')).toBeInTheDocument()
+    expect(screen.getByText('Pending')).toBeInTheDocument()
+  })
+
+  it('shows duration when provided', () => {
+    render(<MeetingsList meetings={sampleMeetings} />)
+    expect(screen.getByText(/· 30min/)).toBeInTheDocument()
+    expect(screen.getByText(/· 45min/)).toBeInTheDocument()
+  })
+
+  it('renders skeletons when loading', () => {
+    const { container } = render(
+      <MeetingsList meetings={[]} loading loadingRowCount={6} />
+    )
+    expect(container.querySelectorAll('.animate-pulse')).toHaveLength(6)
+  })
+
+  it('renders empty state with custom message', () => {
+    render(<MeetingsList meetings={[]} emptyMessage="Nothing yet" />)
+    expect(screen.getByText('Nothing yet')).toBeInTheDocument()
+    // No CTA without onSchedule
+    expect(screen.queryByText('Schedule First Meeting')).not.toBeInTheDocument()
+  })
+
+  it('shows the Schedule CTA when onSchedule provided + fires it', () => {
+    const onSchedule = jest.fn()
+    render(<MeetingsList meetings={[]} onSchedule={onSchedule} />)
+    fireEvent.click(screen.getByText('Schedule First Meeting'))
+    expect(onSchedule).toHaveBeenCalledTimes(1)
+  })
+
+  it('does NOT render delete button when onDelete is absent', () => {
+    render(<MeetingsList meetings={sampleMeetings} />)
+    expect(screen.queryByLabelText('Delete meeting')).not.toBeInTheDocument()
+  })
+
+  it('renders delete buttons + fires onDelete with the meeting id', () => {
+    const onDelete = jest.fn()
+    render(<MeetingsList meetings={sampleMeetings} onDelete={onDelete} />)
+    const deleteButtons = screen.getAllByLabelText('Delete meeting')
+    expect(deleteButtons).toHaveLength(2)
+    fireEvent.click(deleteButtons[0])
+    expect(onDelete).toHaveBeenCalledWith(1)
+  })
+
+  it('fires onRowClick with the meeting payload', () => {
+    const onRowClick = jest.fn()
+    render(<MeetingsList meetings={sampleMeetings} onRowClick={onRowClick} />)
+    fireEvent.click(screen.getByText('Sequoia partner sync'))
+    expect(onRowClick).toHaveBeenCalledTimes(1)
+    expect(onRowClick.mock.calls[0][0].id).toBe(1)
+  })
+
+  it('does not fire onRowClick when delete button is clicked (event bubbling guard)', () => {
+    const onRowClick = jest.fn()
+    const onDelete = jest.fn()
+    render(
+      <MeetingsList
+        meetings={sampleMeetings}
+        onRowClick={onRowClick}
+        onDelete={onDelete}
+      />
+    )
+    fireEvent.click(screen.getAllByLabelText('Delete meeting')[0])
+    expect(onDelete).toHaveBeenCalledTimes(1)
+    expect(onRowClick).not.toHaveBeenCalled()
+  })
+
+  it('renders Join link when meeting_link is set', () => {
+    render(<MeetingsList meetings={sampleMeetings} />)
+    const joinLink = screen.getByTitle('Join meeting')
+    expect(joinLink).toHaveAttribute('href', 'https://meet.google.com/abc')
+  })
+
+  it("does NOT propagate row click when join link is clicked", () => {
+    const onRowClick = jest.fn()
+    render(<MeetingsList meetings={sampleMeetings} onRowClick={onRowClick} />)
+    fireEvent.click(screen.getByTitle('Join meeting'))
+    expect(onRowClick).not.toHaveBeenCalled()
+  })
+})

package/src/components/__tests__/slide-deck-viewer.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { SlideCanvas } from '../slide-deck/SlideCanvas'
+import { SlideFilmstrip } from '../slide-deck/SlideFilmstrip'
+import { SlideDeckViewer } from '../slide-deck/SlideDeckViewer'
+import type { SlideData } from '../slide-deck/types'
+
+const slides: SlideData[] = [
+  { id: 's1', slideNumber: 1, title: 'Title', imageUrl: 'https://x/1.png', status: 'ready' },
+  { id: 's2', slideNumber: 2, title: 'Problem', imageUrl: 'https://x/2.png', status: 'ready' },
+  { id: 's3', slideNumber: 3, title: 'Solution', status: 'generating' },
+]
+
+describe('SlideCanvas', () => {
+  it('renders a full-bleed image in image render mode', () => {
+    render(<SlideCanvas slide={slides[0]} />)
+    const img = screen.getByRole('img')
+    expect(img).toHaveAttribute('src', 'https://x/1.png')
+  })
+
+  it('shows a generating state while the slide is in progress', () => {
+    const { container } = render(<SlideCanvas slide={slides[2]} />)
+    const el = container.querySelector('[data-status="generating"]')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveAttribute('aria-busy', 'true')
+  })
+
+  it('shows an error state with a retry control', () => {
+    const onRetry = jest.fn()
+    render(<SlideCanvas slide={{ id: 'e', slideNumber: 1, status: 'error' }} onRetry={onRetry} />)
+    const retry = screen.getByRole('button', { name: /retry|regenerate/i })
+    fireEvent.click(retry)
+    expect(onRetry).toHaveBeenCalled()
+  })
+})
+
+describe('SlideFilmstrip', () => {
+  it('renders a thumbnail per slide and marks the active one', () => {
+    render(<SlideFilmstrip slides={slides} activeId="s2" onSelect={() => {}} />)
+    const thumbs = screen.getAllByRole('button')
+    expect(thumbs).toHaveLength(3)
+    const active = thumbs.find((t) => t.getAttribute('aria-current') === 'true')
+    expect(active).toBeTruthy()
+  })
+
+  it('calls onSelect with the slide id when a thumbnail is clicked', () => {
+    const onSelect = jest.fn()
+    render(<SlideFilmstrip slides={slides} activeId="s1" onSelect={onSelect} />)
+    fireEvent.click(screen.getAllByRole('button')[2])
+    expect(onSelect).toHaveBeenCalledWith('s3')
+  })
+})
+
+describe('SlideDeckViewer', () => {
+  it('renders the active slide and the position indicator', () => {
+    const { container } = render(<SlideDeckViewer slides={slides} activeId="s2" />)
+    expect(screen.getByText('2 / 3')).toBeInTheDocument()
+    const stage = container.querySelector('[data-testid="slide-deck-stage"]') as HTMLElement
+    expect(stage.querySelector('img')).toHaveAttribute('src', 'https://x/2.png')
+  })
+
+  it('advances the active slide with ArrowRight', () => {
+    const onActiveChange = jest.fn()
+    const { container } = render(
+      <SlideDeckViewer slides={slides} activeId="s1" onActiveChange={onActiveChange} />
+    )
+    const stage = container.querySelector('[data-testid="slide-deck-stage"]') as HTMLElement
+    fireEvent.keyDown(stage, { key: 'ArrowRight' })
+    expect(onActiveChange).toHaveBeenCalledWith('s2')
+  })
+
+  it('renders an empty state when there are no slides', () => {
+    render(<SlideDeckViewer slides={[]} emptyState={<div>No slides yet</div>} />)
+    expect(screen.getByText('No slides yet')).toBeInTheDocument()
+  })
+
+  it('invokes onRegenerate for the active slide', () => {
+    const onRegenerate = jest.fn()
+    render(<SlideDeckViewer slides={slides} activeId="s1" onRegenerate={onRegenerate} />)
+    fireEvent.click(screen.getByRole('button', { name: /regenerate/i }))
+    expect(onRegenerate).toHaveBeenCalledWith(slides[0])
+  })
+})

package/src/components/__tests__/upcoming-meetings.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { UpcomingMeetings, type UpcomingMeeting } from '../calendar/upcoming-meetings'
+
+const sampleMeetings: UpcomingMeeting[] = [
+  {
+    id: 1,
+    title: 'Sequoia partner sync',
+    scheduled_at: '2026-04-29T16:00:00Z',
+    status: 'confirmed',
+    investor_name: 'Roelof Botha',
+    investor_email: 'roelof@sequoia.com',
+    meeting_link: 'https://meet.google.com/abc',
+  },
+  {
+    id: 2,
+    title: 'Acme partner intro',
+    scheduled_at: '2026-04-30T14:00:00Z',
+    status: 'pending',
+    investor_email: 'partner@acme.vc',
+  },
+  {
+    id: 3,
+    title: 'Cancelled call',
+    scheduled_at: '2026-05-01T10:00:00Z',
+    status: 'cancelled',
+  },
+]
+
+describe('UpcomingMeetings', () => {
+  it('renders the title and each meeting title', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('Upcoming Meetings')).toBeInTheDocument()
+    expect(screen.getByText('Sequoia partner sync')).toBeInTheDocument()
+    expect(screen.getByText('Acme partner intro')).toBeInTheDocument()
+    expect(screen.getByText('Cancelled call')).toBeInTheDocument()
+  })
+
+  it('shows the right status badge per meeting', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('Confirmed')).toBeInTheDocument()
+    expect(screen.getByText('Pending')).toBeInTheDocument()
+    expect(screen.getByText('Cancelled')).toBeInTheDocument()
+  })
+
+  it('renders skeletons in loading state', () => {
+    const { container } = render(
+      <UpcomingMeetings meetings={[]} loading loadingRowCount={5} />
+    )
+    // Skeletons render as empty divs with animate-pulse — count them by class.
+    const skeletons = container.querySelectorAll('.animate-pulse')
+    expect(skeletons).toHaveLength(5)
+  })
+
+  it('renders empty state when no meetings', () => {
+    render(<UpcomingMeetings meetings={[]} />)
+    expect(screen.getByText('No upcoming meetings')).toBeInTheDocument()
+  })
+
+  it('does not render Schedule CTA when onSchedule is not provided', () => {
+    render(<UpcomingMeetings meetings={[]} />)
+    expect(screen.queryByText('Schedule one')).not.toBeInTheDocument()
+  })
+
+  it('renders Schedule CTA when onSchedule is provided and fires it on click', () => {
+    const onSchedule = jest.fn()
+    render(<UpcomingMeetings meetings={[]} onSchedule={onSchedule} />)
+    const cta = screen.getByText('Schedule one')
+    expect(cta).toBeInTheDocument()
+    fireEvent.click(cta)
+    expect(onSchedule).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires onMeetingClick with the original meeting payload', () => {
+    const onMeetingClick = jest.fn()
+    render(<UpcomingMeetings meetings={sampleMeetings} onMeetingClick={onMeetingClick} />)
+    fireEvent.click(screen.getByText('Sequoia partner sync'))
+    expect(onMeetingClick).toHaveBeenCalledTimes(1)
+    expect(onMeetingClick.mock.calls[0][0].id).toBe(1)
+    expect(onMeetingClick.mock.calls[0][0].investor_name).toBe('Roelof Botha')
+  })
+
+  it('renders View all link when viewAllHref is provided', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} viewAllHref="/calendar" />)
+    const link = screen.getByText('View all')
+    expect(link.closest('a')).toHaveAttribute('href', '/calendar')
+  })
+
+  it('renders Join link when meeting_link is set', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    const join = screen.getByText('Join')
+    expect(join.closest('a')).toHaveAttribute('href', 'https://meet.google.com/abc')
+  })
+
+  it("falls back to investor_email when investor_name is absent", () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('partner@acme.vc')).toBeInTheDocument()
+  })
+
+  it('uses a custom title when title prop is provided', () => {
+    render(<UpcomingMeetings meetings={[]} title="This Week's Calls" />)
+    expect(screen.getByText("This Week's Calls")).toBeInTheDocument()
+    expect(screen.queryByText('Upcoming Meetings')).not.toBeInTheDocument()
+  })
+})