@startsimpli/ui 0.4.14 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.14",
+  "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",
@@ -80,6 +74,7 @@
     "@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",
@@ -99,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__/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__/workspace.test.tsx

@@ -0,0 +1,106 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { SplitPane } from '../workspace/SplitPane'
+import { DualPaneWorkspace } from '../workspace/DualPaneWorkspace'
+
+describe('SplitPane', () => {
+  it('renders both panes', () => {
+    render(<SplitPane first={<div>LEFT</div>} second={<div>RIGHT</div>} />)
+    expect(screen.getByText('LEFT')).toBeInTheDocument()
+    expect(screen.getByText('RIGHT')).toBeInTheDocument()
+  })
+
+  it('exposes an accessible resizer separator with aria values', () => {
+    render(
+      <SplitPane
+        first={<div>L</div>}
+        second={<div>R</div>}
+        initialSize={40}
+        minSize={20}
+        maxSize={80}
+      />
+    )
+    const sep = screen.getByRole('separator')
+    expect(sep).toHaveAttribute('aria-orientation', 'vertical')
+    expect(sep).toHaveAttribute('aria-valuenow', '40')
+    expect(sep).toHaveAttribute('aria-valuemin', '20')
+    expect(sep).toHaveAttribute('aria-valuemax', '80')
+  })
+
+  it('grows the first pane on ArrowRight and shrinks on ArrowLeft', () => {
+    const onResize = jest.fn()
+    render(
+      <SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={50} onResize={onResize} />
+    )
+    const sep = screen.getByRole('separator')
+    fireEvent.keyDown(sep, { key: 'ArrowRight' })
+    expect(Number(sep.getAttribute('aria-valuenow'))).toBeGreaterThan(50)
+    fireEvent.keyDown(sep, { key: 'ArrowLeft' })
+    fireEvent.keyDown(sep, { key: 'ArrowLeft' })
+    expect(Number(sep.getAttribute('aria-valuenow'))).toBeLessThan(50)
+    expect(onResize).toHaveBeenCalled()
+  })
+
+  it('clamps size to min/max', () => {
+    render(<SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={22} minSize={20} maxSize={80} />)
+    const sep = screen.getByRole('separator')
+    // hammer left many times — must not drop below min
+    for (let i = 0; i < 20; i++) fireEvent.keyDown(sep, { key: 'ArrowLeft' })
+    expect(Number(sep.getAttribute('aria-valuenow'))).toBe(20)
+  })
+
+  it('persists size to localStorage when storageKey is set', () => {
+    window.localStorage.clear()
+    render(<SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={50} storageKey="sp-test" />)
+    const sep = screen.getByRole('separator')
+    fireEvent.keyDown(sep, { key: 'ArrowRight' })
+    expect(window.localStorage.getItem('sp-test')).not.toBeNull()
+  })
+})
+
+describe('DualPaneWorkspace', () => {
+  it('renders left and right content with labels and an optional toolbar', () => {
+    render(
+      <DualPaneWorkspace
+        leftLabel="Chat"
+        rightLabel="Slides"
+        toolbar={<div>TOOLBAR</div>}
+        left={<div>CHAT_PANE</div>}
+        right={<div>SLIDES_PANE</div>}
+        layout="split"
+      />
+    )
+    expect(screen.getByText('CHAT_PANE')).toBeInTheDocument()
+    expect(screen.getByText('SLIDES_PANE')).toBeInTheDocument()
+    expect(screen.getByText('TOOLBAR')).toBeInTheDocument()
+  })
+
+  it('stacks panes when layout="stack"', () => {
+    const { container } = render(
+      <DualPaneWorkspace left={<div>L</div>} right={<div>R</div>} layout="stack" />
+    )
+    const root = container.querySelector('[data-layout="stack"]')
+    expect(root).toBeInTheDocument()
+    // both panes still rendered when stacked
+    expect(screen.getByText('L')).toBeInTheDocument()
+    expect(screen.getByText('R')).toBeInTheDocument()
+  })
+
+  it('collapses a pane when collapsible and the collapse control is used', () => {
+    render(
+      <DualPaneWorkspace
+        leftLabel="Chat"
+        rightLabel="Slides"
+        left={<div>CHAT_PANE</div>}
+        right={<div>SLIDES_PANE</div>}
+        layout="split"
+        collapsible
+      />
+    )
+    const collapseLeft = screen.getByRole('button', { name: /collapse chat/i })
+    fireEvent.click(collapseLeft)
+    expect(screen.queryByText('CHAT_PANE')).not.toBeInTheDocument()
+    // right still visible, and an expand affordance appears
+    expect(screen.getByText('SLIDES_PANE')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /expand chat/i })).toBeInTheDocument()
+  })
+})

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

@@ -148,11 +148,11 @@ describe('ChangePasswordForm', () => {
     jest.clearAllMocks()
   })
 
-  it('renders all three password fields', () => {
+  it('renders both password fields (current + new, no confirm — startsim-nbq)', () => {
     render(<ChangePasswordForm {...defaultPasswordProps} />)
     expect(screen.getByLabelText('Current password')).toBeInTheDocument()
     expect(screen.getByLabelText('New password')).toBeInTheDocument()
-    expect(screen.getByLabelText('Confirm new password')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Confirm new password')).not.toBeInTheDocument()
   })
 
   it('submit button is disabled when fields are empty', () => {
@@ -165,7 +165,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'short')
-    changeInput(screen.getByLabelText('Confirm new password'), 'short')
 
     expect(screen.getByRole('button', { name: /change password/i })).toBeDisabled()
   })
@@ -182,40 +181,21 @@ describe('ChangePasswordForm', () => {
     expect(screen.queryByText('Must be at least 8 characters.')).not.toBeInTheDocument()
   })
 
-  it('submit button is disabled when passwords do not match', () => {
+  it('submit button is enabled when current + new (>=8) are filled', () => {
     render(<ChangePasswordForm {...defaultPasswordProps} />)
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'different123')
-
-    expect(screen.getByRole('button', { name: /change password/i })).toBeDisabled()
-  })
-
-  it('shows mismatch hint when confirm does not match', () => {
-    render(<ChangePasswordForm {...defaultPasswordProps} />)
-    changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'different123')
-    expect(screen.getByText('Passwords do not match.')).toBeInTheDocument()
-  })
-
-  it('submit button is enabled when all fields are valid', () => {
-    render(<ChangePasswordForm {...defaultPasswordProps} />)
-
-    changeInput(screen.getByLabelText('Current password'), 'oldpassword')
-    changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     expect(screen.getByRole('button', { name: /change password/i })).toBeEnabled()
   })
 
-  it('calls onSubmit with correct payload', async () => {
+  it('calls onSubmit with { old_password, new_password } — no confirm', async () => {
     const onSubmit = jest.fn().mockResolvedValue(undefined)
     render(<ChangePasswordForm onSubmit={onSubmit} />)
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -223,7 +203,6 @@ describe('ChangePasswordForm', () => {
       expect(onSubmit).toHaveBeenCalledWith({
         old_password: 'oldpassword',
         new_password: 'newpassword1',
-        new_password_confirm: 'newpassword1',
       })
     })
   })
@@ -234,7 +213,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -244,7 +222,6 @@ describe('ChangePasswordForm', () => {
 
     expect(screen.getByLabelText('Current password')).toHaveValue('')
     expect(screen.getByLabelText('New password')).toHaveValue('')
-    expect(screen.getByLabelText('Confirm new password')).toHaveValue('')
   })
 
   it('calls onSuccess callback after successful submit', async () => {
@@ -254,7 +231,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -269,7 +245,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'wrongold')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -284,7 +259,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'wrongold')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -293,11 +267,10 @@ describe('ChangePasswordForm', () => {
     })
   })
 
-  it('disables all inputs when disabled prop is true', () => {
+  it('disables both inputs when disabled prop is true', () => {
     render(<ChangePasswordForm {...defaultPasswordProps} disabled />)
     expect(screen.getByLabelText('Current password')).toBeDisabled()
     expect(screen.getByLabelText('New password')).toBeDisabled()
-    expect(screen.getByLabelText('Confirm new password')).toBeDisabled()
   })
 
   it('renders card heading', () => {