@startsimpli/ui 0.4.167 → 0.4.169

package/src/components/timer/ProjectSelect.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { ProjectSwatch } from './ProjectSwatch'
+import type { EntryId } from './interval-logic'
+
+export interface ProjectOption {
+  id: EntryId
+  name: string
+  color?: string | null
+  /** The client this project bills to, when the host models clients. */
+  clientId?: EntryId | null
+  /** Per-hour rate new time on this project defaults to. */
+  defaultRate?: number | null
+  /** Store-owned passthrough (the record's other attributes), so a whole-record update can send them back. */
+  extra?: Record<string, unknown>
+}
+
+export interface ProjectSelectProps {
+  projects: ProjectOption[]
+  value: EntryId | null | undefined
+  onChange: (id: EntryId | null) => void
+  label?: string
+  id?: string
+  noneLabel?: string
+}
+
+/** A native select (reliable in every shell) with the chosen project's colour beside it. */
+export function ProjectSelect({ projects, value, onChange, label = 'Project', id, noneLabel = 'No project' }: ProjectSelectProps) {
+  const chosen = projects.find((p) => String(p.id) === String(value ?? ''))
+  return (
+    <span className="inline-flex items-center gap-2">
+      <ProjectSwatch color={chosen?.color} />
+      <select
+        id={id}
+        aria-label={label}
+        value={value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value
+          onChange(v === '' ? null : (projects.find((p) => String(p.id) === v)?.id ?? v))
+        }}
+        className="h-9 rounded-md border border-gray-300 bg-white px-2 text-sm"
+      >
+        <option value="">{noneLabel}</option>
+        {projects.map((p) => (
+          <option key={String(p.id)} value={String(p.id)}>
+            {p.name}
+          </option>
+        ))}
+      </select>
+    </span>
+  )
+}

package/src/components/timer/ProjectSwatch.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+export const NO_COLOR = '#9ca3af'
+
+/** A project's colour as a dot. Decorative: the project name always sits beside it. */
+export function ProjectSwatch({ color, size = 10 }: { color?: string | null; size?: number }) {
+  return (
+    <span
+      data-testid="swatch"
+      aria-hidden="true"
+      className="inline-block shrink-0 rounded-full"
+      style={{ backgroundColor: color || NO_COLOR, width: size, height: size }}
+    />
+  )
+}

package/src/components/timer/ProjectsDialog.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import { useState } from 'react'
+import { BaseDialog } from '../dialog/BaseDialog'
+import { Button } from '../ui/button'
+import { ColorPicker, PROJECT_COLORS } from './ColorPicker'
+import type { EntryId } from './interval-logic'
+import type { ProjectOption } from './ProjectSelect'
+import { ProjectSwatch } from './ProjectSwatch'
+
+export interface ProjectSave {
+  id?: EntryId
+  name: string
+  color: string
+  /** Absent = leave as is; null = unlink. */
+  clientId?: EntryId | null
+  /** Absent = leave as is; null = clear. */
+  defaultRate?: number | null
+}
+
+export interface ClientOption {
+  id: EntryId
+  name: string
+}
+
+export interface ProjectsDialogProps {
+  open: boolean
+  projects: ProjectOption[]
+  /** When given, projects can be linked to one of these. */
+  clients?: ClientOption[]
+  busy: boolean
+  onSave: (project: ProjectSave) => void
+  onDelete?: (project: ProjectOption) => void
+  onClose: () => void
+}
+
+const FIELD = 'h-9 rounded-md border border-gray-300 px-3 text-sm'
+
+/** '' or junk -> null; a non-negative number otherwise. */
+function parseRate(raw: string): number | null {
+  const n = Number(raw)
+  return raw.trim() === '' || !Number.isFinite(n) || n < 0 ? null : n
+}
+
+function ClientSelect({ label, clients, value, onChange }: { label: string; clients: ClientOption[]; value: string; onChange: (v: string) => void }) {
+  return (
+    <select aria-label={label} value={value} onChange={(e) => onChange(e.target.value)} className={`${FIELD} w-full bg-white`}>
+      <option value="">No client</option>
+      {clients.map((c) => (
+        <option key={String(c.id)} value={String(c.id)}>
+          {c.name}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+function RateInput({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <input
+      aria-label={label}
+      placeholder="Default rate per hour"
+      type="number"
+      min="0"
+      step="any"
+      inputMode="decimal"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className={`${FIELD} w-full`}
+    />
+  )
+}
+
+interface RowEditorProps {
+  project: ProjectOption
+  clients?: ClientOption[]
+  busy: boolean
+  onSave: (project: ProjectSave) => void
+  onDelete?: (project: ProjectOption) => void
+}
+
+/** Rename, relink and re-rate one project. Colour keeps its own picker on the row. */
+function ProjectRowEditor({ project: p, clients, busy, onSave, onDelete }: RowEditorProps) {
+  const [name, setName] = useState(p.name)
+  const [clientId, setClientId] = useState(p.clientId == null ? '' : String(p.clientId))
+  const [rate, setRate] = useState(p.defaultRate == null ? '' : String(p.defaultRate))
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault()
+    const trimmed = name.trim()
+    if (!trimmed) return
+    const save: ProjectSave = { id: p.id, name: trimmed, color: p.color ?? PROJECT_COLORS[0] }
+    if (clients) {
+      save.clientId = clientId === '' ? null : (clients.find((c) => String(c.id) === clientId)?.id ?? clientId)
+      save.defaultRate = parseRate(rate)
+    }
+    onSave(save)
+  }
+
+  return (
+    <form onSubmit={submit} className="mt-2 space-y-2 pl-5">
+      <input aria-label={`Name of ${p.name}`} value={name} onChange={(e) => setName(e.target.value)} className={`${FIELD} w-full`} />
+      {clients ? (
+        <>
+          <ClientSelect label={`Client of ${p.name}`} clients={clients} value={clientId} onChange={setClientId} />
+          <RateInput label={`Default rate of ${p.name}`} value={rate} onChange={setRate} />
+        </>
+      ) : null}
+      <div className="flex gap-2">
+        <Button type="submit" disabled={busy} aria-label={`Save ${p.name}`}>
+          Save
+        </Button>
+        {onDelete ? (
+          <Button type="button" variant="outline" disabled={busy} aria-label={`Delete ${p.name}`} onClick={() => onDelete(p)}>
+            Delete
+          </Button>
+        ) : null}
+      </div>
+    </form>
+  )
+}
+
+/** Projects: add one (with its client and default rate), recolour, rename, relink or delete an existing one. */
+export function ProjectsDialog({ open, projects, clients, busy, onSave, onDelete, onClose }: ProjectsDialogProps) {
+  const [name, setName] = useState('')
+  const [color, setColor] = useState<string>(PROJECT_COLORS[0])
+  const [clientId, setClientId] = useState('')
+  const [rate, setRate] = useState('')
+  const [recolouring, setRecolouring] = useState<EntryId | null>(null)
+  const [editing, setEditing] = useState<EntryId | null>(null)
+  const clientName = (id: EntryId | null | undefined) =>
+    id == null ? null : (clients?.find((c) => String(c.id) === String(id))?.name ?? null)
+
+  function add(e: React.FormEvent) {
+    e.preventDefault()
+    const trimmed = name.trim()
+    if (!trimmed) return
+    const save: ProjectSave = { name: trimmed, color }
+    if (clients) {
+      if (clientId !== '') save.clientId = clients.find((c) => String(c.id) === clientId)?.id ?? clientId
+      const r = parseRate(rate)
+      if (r !== null) save.defaultRate = r
+    }
+    onSave(save)
+    setName('')
+    setClientId('')
+    setRate('')
+  }
+
+  return (
+    <BaseDialog open={open} onOpenChange={(o) => !o && onClose()} size="md" loading={busy}>
+      <BaseDialog.Header>
+        <BaseDialog.Title>Projects</BaseDialog.Title>
+      </BaseDialog.Header>
+      <BaseDialog.Body>
+        <ul className="space-y-2">
+          {projects.map((p) => (
+            <li key={String(p.id)} className="text-sm">
+              <div className="flex items-center gap-2">
+                <ProjectSwatch color={p.color} />
+                <span className="flex-1 text-gray-900">{p.name}</span>
+                {clientName(p.clientId) ? <span className="text-gray-500">{clientName(p.clientId)}</span> : null}
+                {p.defaultRate != null ? <span className="text-gray-500">{`${p.defaultRate}/h`}</span> : null}
+                <button
+                  type="button"
+                  className="text-indigo-600 hover:underline"
+                  aria-label={`Edit ${p.name}`}
+                  onClick={() => setEditing(editing === p.id ? null : p.id)}
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  className="text-indigo-600 hover:underline"
+                  aria-label={`Change colour of ${p.name}`}
+                  onClick={() => setRecolouring(recolouring === p.id ? null : p.id)}
+                >
+                  Colour
+                </button>
+              </div>
+              {editing === p.id ? (
+                <ProjectRowEditor key={`${String(p.id)}:${p.name}:${String(p.clientId)}:${p.defaultRate}`} project={p} clients={clients} busy={busy} onSave={(v) => { onSave(v); setEditing(null) }} onDelete={onDelete ? (x) => { onDelete(x); setEditing(null) } : undefined} />
+              ) : null}
+              {recolouring === p.id ? (
+                <div className="mt-2 pl-5">
+                  <ColorPicker
+                    label={`Colour of ${p.name}`}
+                    value={p.color}
+                    onChange={(c) => {
+                      onSave({ id: p.id, name: p.name, color: c })
+                      setRecolouring(null)
+                    }}
+                  />
+                </div>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+        <form onSubmit={add} className="mt-4 space-y-2 border-t border-gray-100 pt-4">
+          <input
+            aria-label="New project name"
+            placeholder="New project"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="h-9 w-full rounded-md border border-gray-300 px-3 text-sm"
+          />
+          {clients ? (
+            <>
+              <ClientSelect label="New project client" clients={clients} value={clientId} onChange={setClientId} />
+              <RateInput label="New project default rate" value={rate} onChange={setRate} />
+            </>
+          ) : null}
+          <ColorPicker value={color} onChange={setColor} />
+          <Button type="submit" disabled={busy}>
+            Add project
+          </Button>
+        </form>
+      </BaseDialog.Body>
+    </BaseDialog>
+  )
+}

package/src/components/timer/TimerBar.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { Button } from '../ui/button'
+import { formatElapsed, type EntryId } from './interval-logic'
+import { ProjectSelect, type ProjectOption } from './ProjectSelect'
+
+export interface TimerBarProps {
+  status: 'loading' | 'stopped' | 'running'
+  elapsed: number
+  projects: ProjectOption[]
+  projectId: EntryId | null
+  note: string
+  /** A paused interval can be resumed. */
+  paused: boolean
+  busy: boolean
+  notice: 'already-running' | null
+  onProjectChange: (id: EntryId | null) => void
+  onNoteChange: (note: string) => void
+  onStart: () => void
+  onPause: () => void
+  onStop: () => void
+  onResume: () => void
+}
+
+/** The timer's one control surface: what, which project, and one main action. */
+export function TimerBar(p: TimerBarProps) {
+  const running = p.status === 'running'
+  return (
+    <section className="space-y-2 rounded-lg border border-gray-200 bg-white p-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <input
+          aria-label="What are you working on?"
+          placeholder="What are you working on?"
+          value={p.note}
+          disabled={running}
+          onChange={(e) => p.onNoteChange(e.target.value)}
+          className="h-9 min-w-[12rem] flex-1 rounded-md border border-gray-300 px-3 text-sm disabled:bg-gray-50"
+        />
+        <ProjectSelect projects={p.projects} value={p.projectId} onChange={p.onProjectChange} />
+        <span role="timer" aria-live="off" className="min-w-[5.5rem] text-right font-mono text-xl tabular-nums text-gray-900">
+          {formatElapsed(p.elapsed)}
+        </span>
+        {running ? (
+          <>
+            <Button variant="outline" onClick={p.onPause} disabled={p.busy}>
+              Pause
+            </Button>
+            <Button onClick={p.onStop} disabled={p.busy}>
+              Stop
+            </Button>
+          </>
+        ) : p.paused ? (
+          <>
+            <Button onClick={p.onResume} disabled={p.busy}>
+              Resume
+            </Button>
+            <Button variant="outline" onClick={p.onStart} disabled={p.busy}>
+              Start new
+            </Button>
+          </>
+        ) : (
+          <Button onClick={p.onStart} disabled={p.busy || p.status === 'loading'}>
+            Start
+          </Button>
+        )}
+      </div>
+      {p.notice === 'already-running' ? (
+        <p role="status" className="text-sm text-amber-700">
+          A timer was already running (started elsewhere), so it is shown here.
+        </p>
+      ) : null}
+    </section>
+  )
+}

package/src/components/timer/__tests__/interval-logic.test.ts

@@ -0,0 +1,121 @@
+import {
+  formatElapsed,
+  elapsedMs,
+  planIdleResolution,
+  isStatus,
+  toLocalInput,
+  fromLocalInput,
+  validateRange,
+  type TimedEntry,
+} from '../interval-logic'
+
+const T = (s: string) => new Date(s).getTime()
+const entry = (over: Partial<TimedEntry> = {}): TimedEntry => ({
+  id: 'e1',
+  version: 3,
+  startedAt: '2026-10-31T09:00:00.000Z',
+  endedAt: null,
+  projectId: 'p1',
+  note: 'write spec',
+  ...over,
+})
+
+describe('formatElapsed', () => {
+  it('formats h:mm:ss with no day rollover', () => {
+    expect(formatElapsed(0)).toBe('0:00:00')
+    expect(formatElapsed(59_999)).toBe('0:00:59')
+    expect(formatElapsed(3_661_000)).toBe('1:01:01')
+    expect(formatElapsed(100 * 3_600_000)).toBe('100:00:00')
+  })
+  it('clamps negative (clock skew) to zero', () => {
+    expect(formatElapsed(-5000)).toBe('0:00:00')
+  })
+})
+
+describe('elapsedMs', () => {
+  it('is now minus started, never negative', () => {
+    expect(elapsedMs('2026-10-31T09:00:00.000Z', T('2026-10-31T09:00:05.000Z'))).toBe(5000)
+    expect(elapsedMs('2026-10-31T09:00:10.000Z', T('2026-10-31T09:00:05.000Z'))).toBe(0)
+  })
+})
+
+describe('planIdleResolution', () => {
+  const idleSince = T('2026-10-31T10:00:00.000Z')
+  const now = T('2026-10-31T10:20:00.000Z')
+
+  it('keep writes nothing', () => {
+    expect(planIdleResolution({ entry: entry(), idleSince, now, choice: { kind: 'keep' } })).toEqual([])
+  })
+
+  it('discard closes at idle start, then resumes from now (close before create)', () => {
+    expect(planIdleResolution({ entry: entry(), idleSince, now, choice: { kind: 'discard' } })).toEqual([
+      { kind: 'update', patch: { endedAt: '2026-10-31T10:00:00.000Z' } },
+      { kind: 'create', input: { startedAt: '2026-10-31T10:20:00.000Z', endedAt: null, projectId: 'p1', note: 'write spec' } },
+    ])
+  })
+
+  it('assign closes, books the idle window to the other project, then resumes', () => {
+    expect(
+      planIdleResolution({ entry: entry(), idleSince, now, choice: { kind: 'assign', projectId: 'p2' } }),
+    ).toEqual([
+      { kind: 'update', patch: { endedAt: '2026-10-31T10:00:00.000Z' } },
+      { kind: 'create', input: { startedAt: '2026-10-31T10:00:00.000Z', endedAt: '2026-10-31T10:20:00.000Z', projectId: 'p2', note: '' } },
+      { kind: 'create', input: { startedAt: '2026-10-31T10:20:00.000Z', endedAt: null, projectId: 'p1', note: 'write spec' } },
+    ])
+  })
+
+  it('discard when the entry started inside the idle window moves started_at instead', () => {
+    const e = entry({ startedAt: '2026-10-31T10:05:00.000Z' })
+    expect(planIdleResolution({ entry: e, idleSince, now, choice: { kind: 'discard' } })).toEqual([
+      { kind: 'update', patch: { startedAt: '2026-10-31T10:20:00.000Z' } },
+    ])
+  })
+
+  it('assign when the entry started inside the idle window re-homes it and resumes', () => {
+    const e = entry({ startedAt: '2026-10-31T10:05:00.000Z' })
+    expect(planIdleResolution({ entry: e, idleSince, now, choice: { kind: 'assign', projectId: 'p2' } })).toEqual([
+      { kind: 'update', patch: { endedAt: '2026-10-31T10:20:00.000Z', projectId: 'p2' } },
+      { kind: 'create', input: { startedAt: '2026-10-31T10:20:00.000Z', endedAt: null, projectId: 'p1', note: 'write spec' } },
+    ])
+  })
+
+  it('always writes UTC ISO timestamps', () => {
+    const ops = planIdleResolution({ entry: entry(), idleSince, now, choice: { kind: 'discard' } })
+    for (const op of ops) {
+      const v = op.kind === 'update' ? Object.values(op.patch) : [op.input.startedAt, op.input.endedAt]
+      for (const s of v) if (typeof s === 'string' && /^\d{4}-/.test(s)) expect(s.endsWith('Z')).toBe(true)
+    }
+  })
+})
+
+describe('isStatus', () => {
+  it('reads status off ApiException-like errors', () => {
+    expect(isStatus(Object.assign(new Error('x'), { status: 409 }), 409)).toBe(true)
+    expect(isStatus(Object.assign(new Error('x'), { status: 412 }), 409)).toBe(false)
+    expect(isStatus(new Error('x'), 409)).toBe(false)
+    expect(isStatus(null, 409)).toBe(false)
+  })
+})
+
+describe('datetime-local helpers', () => {
+  it('round-trips through the local zone without drifting', () => {
+    const iso = '2026-10-31T09:15:00.000Z'
+    expect(fromLocalInput(toLocalInput(iso))).toBe(iso)
+  })
+  it('formats as yyyy-mm-ddThh:mm', () => {
+    expect(toLocalInput('2026-10-31T09:15:42.000Z')).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
+  })
+  it('returns null for blank or unparsable input', () => {
+    expect(fromLocalInput('')).toBeNull()
+    expect(fromLocalInput('nope')).toBeNull()
+  })
+})
+
+describe('validateRange', () => {
+  it('requires a start, and an end after it when given', () => {
+    expect(validateRange('2026-10-31T09:00:00.000Z', '2026-10-31T10:00:00.000Z')).toBeNull()
+    expect(validateRange('2026-10-31T09:00:00.000Z', null)).toBeNull()
+    expect(validateRange(null, null)).toMatch(/start/i)
+    expect(validateRange('2026-10-31T10:00:00.000Z', '2026-10-31T09:00:00.000Z')).toMatch(/after/i)
+  })
+})

package/src/components/timer/__tests__/projects-dialog.test.tsx

@@ -0,0 +1,113 @@
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { ProjectsDialog } from '../ProjectsDialog'
+import { PROJECT_COLORS } from '../ColorPicker'
+
+const projects = [
+  { id: 'p1', name: 'Alpha', color: '#3366ff' },
+  { id: 'p2', name: 'Beta', color: null },
+]
+
+describe('ProjectsDialog', () => {
+  it('lists projects with their colours', () => {
+    render(<ProjectsDialog open projects={projects} busy={false} onSave={jest.fn()} onClose={jest.fn()} />)
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.getByText('Beta')).toBeInTheDocument()
+    expect(screen.getAllByTestId('swatch').length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('creates a project with a chosen colour', () => {
+    const onSave = jest.fn()
+    render(<ProjectsDialog open projects={projects} busy={false} onSave={onSave} onClose={jest.fn()} />)
+    fireEvent.change(screen.getByLabelText('New project name'), { target: { value: 'Gamma' } })
+    fireEvent.click(screen.getAllByRole('radio', { name: PROJECT_COLORS[3] })[0])
+    fireEvent.click(screen.getByRole('button', { name: 'Add project' }))
+    expect(onSave).toHaveBeenCalledWith({ name: 'Gamma', color: PROJECT_COLORS[3] })
+  })
+
+  it('does not create a nameless project', () => {
+    const onSave = jest.fn()
+    render(<ProjectsDialog open projects={projects} busy={false} onSave={onSave} onClose={jest.fn()} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Add project' }))
+    expect(onSave).not.toHaveBeenCalled()
+  })
+
+  it('recolours an existing project', () => {
+    const onSave = jest.fn()
+    render(<ProjectsDialog open projects={projects} busy={false} onSave={onSave} onClose={jest.fn()} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Change colour of Alpha' }))
+    const group = screen.getByRole('radiogroup', { name: 'Colour of Alpha' })
+    fireEvent.click(group.querySelectorAll('[role=radio]')[5])
+    expect(onSave).toHaveBeenCalledWith({ id: 'p1', name: 'Alpha', color: PROJECT_COLORS[5] })
+  })
+
+  describe('client and default rate', () => {
+    const clients = [
+      { id: 'c1', name: 'Acme' },
+      { id: 'c2', name: 'Globex' },
+    ]
+    const linked = [
+      { id: 'p1', name: 'Alpha', color: '#3366ff', clientId: 'c1', defaultRate: 90 },
+      { id: 'p2', name: 'Beta', color: null },
+    ]
+
+    it('shows the linked client and rate on the project row', () => {
+      render(<ProjectsDialog open projects={linked} clients={clients} busy={false} onSave={jest.fn()} onClose={jest.fn()} />)
+      const list = within(screen.getByRole('list'))
+      expect(list.getByText('Acme')).toBeInTheDocument()
+      expect(list.getByText('90/h')).toBeInTheDocument()
+    })
+
+    it('links a project to a client and sets its default rate', () => {
+      const onSave = jest.fn()
+      render(<ProjectsDialog open projects={linked} clients={clients} busy={false} onSave={onSave} onClose={jest.fn()} />)
+      fireEvent.click(screen.getByRole('button', { name: 'Edit Beta' }))
+      fireEvent.change(screen.getByLabelText('Client of Beta'), { target: { value: 'c2' } })
+      fireEvent.change(screen.getByLabelText('Default rate of Beta'), { target: { value: '120.5' } })
+      fireEvent.click(screen.getByRole('button', { name: 'Save Beta' }))
+      expect(onSave).toHaveBeenCalledWith({ id: 'p2', name: 'Beta', color: expect.any(String), clientId: 'c2', defaultRate: 120.5 })
+    })
+
+    it('unlinks the client and clears the rate', () => {
+      const onSave = jest.fn()
+      render(<ProjectsDialog open projects={linked} clients={clients} busy={false} onSave={onSave} onClose={jest.fn()} />)
+      fireEvent.click(screen.getByRole('button', { name: 'Edit Alpha' }))
+      fireEvent.change(screen.getByLabelText('Client of Alpha'), { target: { value: '' } })
+      fireEvent.change(screen.getByLabelText('Default rate of Alpha'), { target: { value: '' } })
+      fireEvent.click(screen.getByRole('button', { name: 'Save Alpha' }))
+      expect(onSave).toHaveBeenCalledWith({ id: 'p1', name: 'Alpha', color: '#3366ff', clientId: null, defaultRate: null })
+    })
+
+    it('renames a project', () => {
+      const onSave = jest.fn()
+      render(<ProjectsDialog open projects={linked} clients={clients} busy={false} onSave={onSave} onClose={jest.fn()} />)
+      fireEvent.click(screen.getByRole('button', { name: 'Edit Alpha' }))
+      fireEvent.change(screen.getByLabelText('Name of Alpha'), { target: { value: 'Alpha 2' } })
+      fireEvent.click(screen.getByRole('button', { name: 'Save Alpha' }))
+      expect(onSave).toHaveBeenCalledWith({ id: 'p1', name: 'Alpha 2', color: '#3366ff', clientId: 'c1', defaultRate: 90 })
+    })
+
+    it('creates a project already linked to a client with a rate', () => {
+      const onSave = jest.fn()
+      render(<ProjectsDialog open projects={[]} clients={clients} busy={false} onSave={onSave} onClose={jest.fn()} />)
+      fireEvent.change(screen.getByLabelText('New project name'), { target: { value: 'Gamma' } })
+      fireEvent.change(screen.getByLabelText('New project client'), { target: { value: 'c1' } })
+      fireEvent.change(screen.getByLabelText('New project default rate'), { target: { value: '75' } })
+      fireEvent.click(screen.getByRole('button', { name: 'Add project' }))
+      expect(onSave).toHaveBeenCalledWith({ name: 'Gamma', color: PROJECT_COLORS[0], clientId: 'c1', defaultRate: 75 })
+    })
+
+    it('deletes a project', () => {
+      const onDelete = jest.fn()
+      render(<ProjectsDialog open projects={linked} clients={clients} busy={false} onSave={jest.fn()} onDelete={onDelete} onClose={jest.fn()} />)
+      fireEvent.click(screen.getByRole('button', { name: 'Edit Alpha' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Delete Alpha' }))
+      expect(onDelete).toHaveBeenCalledWith(linked[0])
+    })
+
+    it('hides client and rate controls the host does not support', () => {
+      render(<ProjectsDialog open projects={linked} busy={false} onSave={jest.fn()} onClose={jest.fn()} />)
+      fireEvent.click(screen.getByRole('button', { name: 'Edit Alpha' }))
+      expect(screen.queryByLabelText('Client of Alpha')).toBeNull()
+    })
+  })
+})