@startsimpli/ui 0.4.167 → 0.4.169

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StartSimpli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -591,6 +591,8 @@ widget to an app's `src/`, ask whether another app could plausibly want it.
 If yes — or if you're unsure — it goes here. See the monorepo
 `CLAUDE.md` rule 9 and `.claude/docs/conventions.md#shared-packages-policy`.
 
-## License
+## Links
 
-Proprietary — StartSimpli.
+- Source: https://github.com/qosha1/start-simpli/tree/main/packages/ui
+- Homepage: https://startsimpli.com
+- License: MIT, see [LICENSE](./LICENSE)

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.167",
+  "version": "0.4.169",
   "description": "Shared UI components package for StartSimpli applications",
+  "license": "MIT",
+  "homepage": "https://startsimpli.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qosha1/start-simpli.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/qosha1/start-simpli/issues"
+  },
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
@@ -34,12 +44,14 @@
     "./session": "./src/components/session/index.ts",
     "./session-console": "./src/components/session/AgentSessionConsole.tsx",
     "./tailwind": "./tailwind.preset.js",
-    "./track-changes": "./src/components/track-changes/index.ts"
+    "./track-changes": "./src/components/track-changes/index.ts",
+    "./timer": "./src/components/timer/index.ts"
   },
   "files": [
     "src",
     "tailwind.preset.js",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "publishConfig": {
     "access": "public"
@@ -55,9 +67,9 @@
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
-    "@startsimpli/i18n": "^0.1.3",
     "@startsimpli/auth": "^0.4.47",
-    "@startsimpli/api": "^0.5.69"
+    "@startsimpli/api": "^0.5.69",
+    "@startsimpli/i18n": "^0.1.3"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/charts/PeriodBars.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import * as React from 'react'
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { SERIES_COLORS } from './TimeSeriesChart'
+
+export interface PeriodBarsDatum {
+  /** X axis label for the period. */
+  label: string
+  value: number
+}
+
+export interface PeriodBarsProps {
+  data: PeriodBarsDatum[]
+  /** What the bars measure, for the tooltip and the accessible name. */
+  unit: string
+  height?: number
+  ariaLabel?: string
+}
+
+/** One bar per period. Categorical axis, so a gap period is simply absent. */
+export function PeriodBars({ data, unit, height = 220, ariaLabel }: PeriodBarsProps) {
+  return (
+    <div role="img" aria-label={ariaLabel ?? `${unit} per period`} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: 0 }}>
+          <CartesianGrid vertical={false} strokeOpacity={0.3} />
+          <XAxis dataKey="label" tick={{ fontSize: 12 }} interval="preserveStartEnd" />
+          <YAxis tick={{ fontSize: 12 }} width={44} />
+          <Tooltip formatter={(v) => [String(v), unit]} />
+          <Bar dataKey="value" fill={SERIES_COLORS[0]} radius={[3, 3, 0, 0]} isAnimationActive={false} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/src/components/charts/index.ts

@@ -1,6 +1,8 @@
 // Charts live behind their own subpath (`@startsimpli/ui/charts`) so recharts
 // is only bundled by apps that draw one.
 export { TimeSeriesChart, SERIES_COLORS, SERIES_DASHES, seriesStroke } from './TimeSeriesChart'
+export { PeriodBars } from './PeriodBars'
+export type { PeriodBarsProps, PeriodBarsDatum } from './PeriodBars'
 export type { TimeSeriesChartProps, TimeSeriesReferenceLine } from './TimeSeriesChart'
 export type {
   TimeSeries,

package/src/components/index.ts

@@ -120,6 +120,9 @@ export * from './email-dialogs'
 // Dashboard components (MetricCard, PeriodSelector, SparklineTrend, DashboardGrid, DashboardSection)
 export * from './dashboard'
 
+// Period reports (PeriodReport, ExportButtons) - grouped table + totals, caller owns data and export
+export * from './reports'
+
 // SystemHealth blocks (HealthCard, PipelineHealth, SourceFreshness, DeliveryHealth, AttentionFeed)
 export * from './health'
 

package/src/components/reports/ExportButtons.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '../ui/button'
+
+export type ReportExportFormat = 'csv' | 'xlsx'
+
+export interface ExportButtonsProps {
+  onExport: (format: ReportExportFormat) => void
+  /** Disables both while a file is being built. */
+  busy?: boolean
+  formats?: ReportExportFormat[]
+}
+
+const LABEL: Record<ReportExportFormat, string> = { csv: 'Export CSV', xlsx: 'Export Excel' }
+
+/** One button per format. The caller builds and saves the file. */
+export function ExportButtons({ onExport, busy, formats = ['csv', 'xlsx'] }: ExportButtonsProps) {
+  return (
+    <>
+      {formats.map((f) => (
+        <Button key={f} type="button" variant="outline" size="sm" disabled={busy} onClick={() => onExport(f)}>
+          {LABEL[f]}
+        </Button>
+      ))}
+    </>
+  )
+}

package/src/components/reports/PeriodReport.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { PeriodSelector, type PeriodOption } from '../dashboard/PeriodSelector'
+
+export interface PeriodReportColumn<R> {
+  key: string
+  label: string
+  numeric?: boolean
+  render: (row: R) => React.ReactNode
+}
+
+export interface PeriodReportProps<R extends { key: string }> {
+  groupBy: string
+  groupOptions: PeriodOption[]
+  onGroupByChange: (value: string) => void
+  rows: R[]
+  /** Rendered as the last row. Derived by the caller from the same data as `rows`. */
+  totals: R
+  columns: PeriodReportColumn<R>[]
+  /** Headline figures above the table (hours, earnings, entries...), pre-formatted. */
+  totalsBar: { label: string; value: React.ReactNode }[]
+  /** Filters and search, wired by the caller. */
+  toolbar?: React.ReactNode
+  /** Export buttons and the like. */
+  actions?: React.ReactNode
+  /** A chart of `rows`; a slot so this file never pulls in a chart library. */
+  chart?: React.ReactNode
+  loading?: boolean
+  emptyMessage?: string
+  className?: string
+}
+
+/**
+ * A report grouped by period: a toolbar, a totals bar, a chart slot and one
+ * table row per period plus a totals row. Presentational - the caller owns the
+ * data, the filters and the export, so the screen and the file are built from
+ * the same rows.
+ */
+export function PeriodReport<R extends { key: string }>({
+  groupBy,
+  groupOptions,
+  onGroupByChange,
+  rows,
+  totals,
+  columns,
+  totalsBar,
+  toolbar,
+  actions,
+  chart,
+  loading,
+  emptyMessage = 'No entries match these filters.',
+  className,
+}: PeriodReportProps<R>) {
+  const cell = (c: PeriodReportColumn<R>) =>
+    cn('px-3 py-2 text-sm', c.numeric ? 'text-right tabular-nums' : 'text-left')
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div className="flex flex-wrap items-center gap-3">
+        <PeriodSelector periods={groupOptions} selected={groupBy} onChange={onGroupByChange} />
+        {toolbar}
+        {actions ? <div className="ml-auto flex items-center gap-2">{actions}</div> : null}
+      </div>
+
+      <div data-testid="report-totals" className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {totalsBar.map((t) => (
+          <div key={t.label} className="rounded-lg border border-gray-200 bg-white p-3">
+            <div className="text-xs uppercase tracking-wide text-gray-500">{t.label}</div>
+            <div className="mt-1 text-2xl font-semibold tabular-nums text-gray-900">{t.value}</div>
+          </div>
+        ))}
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-gray-500" role="status">
+          Loading report
+        </p>
+      ) : (
+        <>
+          {chart && rows.length > 0 ? <div>{chart}</div> : null}
+          {rows.length === 0 ? (
+            <p className="text-sm text-gray-500">{emptyMessage}</p>
+          ) : (
+            <div className="overflow-auto rounded-lg border border-gray-200 bg-white">
+              <table className="w-full">
+                <thead className="bg-gray-50">
+                  <tr>
+                    {columns.map((c) => (
+                      <th key={c.key} className={cn(cell(c), 'font-medium text-gray-600')}>
+                        {c.label}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((r) => (
+                    <tr key={r.key} className="border-t border-gray-100">
+                      {columns.map((c) => (
+                        <td key={c.key} className={cell(c)}>
+                          {c.render(r)}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+                <tfoot>
+                  <tr data-testid="report-total-row" className="border-t-2 border-gray-300 bg-gray-50 font-semibold">
+                    {columns.map((c, i) => (
+                      <td key={c.key} className={cell(c)}>
+                        {i === 0 ? 'Total' : c.render(totals)}
+                      </td>
+                    ))}
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/reports/__tests__/PeriodReport.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { PeriodReport, type PeriodReportColumn } from '../PeriodReport'
+import { ExportButtons } from '../ExportButtons'
+
+interface Row { key: string; entries: number; hours: number }
+const rows: Row[] = [
+  { key: '2026-07', entries: 3, hours: 4.25 },
+  { key: '2026-08', entries: 1, hours: 1 },
+]
+const totals: Row = { key: 'total', entries: 4, hours: 5.25 }
+const columns: PeriodReportColumn<Row>[] = [
+  { key: 'key', label: 'Period', render: (r) => r.key },
+  { key: 'entries', label: 'Entries', numeric: true, render: (r) => String(r.entries) },
+  { key: 'hours', label: 'Hours', numeric: true, render: (r) => r.hours.toFixed(2) },
+]
+const base = {
+  groupBy: 'month',
+  groupOptions: [
+    { value: 'day', label: 'Day' },
+    { value: 'month', label: 'Month' },
+  ],
+  onGroupByChange: () => {},
+  rows,
+  totals,
+  columns,
+  totalsBar: [{ label: 'Hours', value: '5.25' }, { label: 'Entries', value: '4' }],
+}
+
+describe('PeriodReport', () => {
+  it('shows a totals bar, one row per period and a totals row', () => {
+    render(<PeriodReport {...base} />)
+    expect(screen.getByTestId('report-totals')).toHaveTextContent('5.25')
+    expect(screen.getAllByRole('row')).toHaveLength(1 + 2 + 1)
+    const foot = screen.getByTestId('report-total-row')
+    expect(within(foot).getByText('5.25')).toBeInTheDocument()
+  })
+
+  it('reports a grouping change', () => {
+    const onGroupByChange = jest.fn()
+    render(<PeriodReport {...base} onGroupByChange={onGroupByChange} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Day' }))
+    expect(onGroupByChange).toHaveBeenCalledWith('day')
+    expect(screen.getByRole('button', { name: 'Month' })).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('renders toolbar, actions and chart slots, and an empty state', () => {
+    const { rerender } = render(
+      <PeriodReport {...base} toolbar={<span>filters</span>} actions={<span>export</span>} chart={<div>chart</div>} />,
+    )
+    expect(screen.getByText('filters')).toBeInTheDocument()
+    expect(screen.getByText('export')).toBeInTheDocument()
+    expect(screen.getByText('chart')).toBeInTheDocument()
+    rerender(<PeriodReport {...base} rows={[]} chart={<div>chart</div>} emptyMessage="Nothing here" />)
+    expect(screen.getByText('Nothing here')).toBeInTheDocument()
+    expect(screen.queryByText('chart')).toBeNull()
+  })
+
+  it('shows a loading state instead of stale rows', () => {
+    render(<PeriodReport {...base} loading />)
+    expect(screen.getByText('Loading report')).toBeInTheDocument()
+    expect(screen.queryByTestId('report-total-row')).toBeNull()
+  })
+})
+
+describe('ExportButtons', () => {
+  it('calls back with the chosen format and disables while busy', () => {
+    const onExport = jest.fn()
+    const { rerender } = render(<ExportButtons onExport={onExport} />)
+    fireEvent.click(screen.getByRole('button', { name: /CSV/ }))
+    fireEvent.click(screen.getByRole('button', { name: /Excel/ }))
+    expect(onExport.mock.calls).toEqual([['csv'], ['xlsx']])
+    rerender(<ExportButtons onExport={onExport} busy />)
+    expect(screen.getByRole('button', { name: /CSV/ })).toBeDisabled()
+  })
+})

package/src/components/reports/index.ts

@@ -0,0 +1,4 @@
+export { PeriodReport } from './PeriodReport'
+export type { PeriodReportProps, PeriodReportColumn } from './PeriodReport'
+export { ExportButtons } from './ExportButtons'
+export type { ExportButtonsProps, ReportExportFormat } from './ExportButtons'

package/src/components/timer/ColorPicker.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+/** Presets, all `#rrggbb` so they satisfy a 6-digit-hex colour attribute. */
+export const PROJECT_COLORS = [
+  '#3366ff',
+  '#0ea5e9',
+  '#14b8a6',
+  '#22c55e',
+  '#eab308',
+  '#f97316',
+  '#e11d48',
+  '#a855f7',
+  '#64748b',
+] as const
+
+export interface ColorPickerProps {
+  value: string | null | undefined
+  onChange: (color: string) => void
+  colors?: readonly string[]
+  label?: string
+}
+
+export function ColorPicker({ value, onChange, colors = PROJECT_COLORS, label = 'Colour' }: ColorPickerProps) {
+  return (
+    <div role="radiogroup" aria-label={label} className="flex flex-wrap gap-2">
+      {colors.map((c) => {
+        const checked = value?.toLowerCase() === c.toLowerCase()
+        return (
+          <button
+            key={c}
+            type="button"
+            role="radio"
+            aria-checked={checked}
+            aria-label={c}
+            onClick={() => onChange(c)}
+            className={`h-6 w-6 rounded-full border-2 ${checked ? 'border-gray-900' : 'border-transparent'} focus:outline-none focus:ring-2 focus:ring-indigo-500`}
+            style={{ backgroundColor: c }}
+          />
+        )
+      })}
+    </div>
+  )
+}

package/src/components/timer/EntryFormDialog.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { BaseDialog } from '../dialog/BaseDialog'
+import { Button } from '../ui/button'
+import { fromLocalInput, toLocalInput, validateRange, type EntryId, type NewEntry } from './interval-logic'
+import { ProjectSelect, type ProjectOption } from './ProjectSelect'
+
+export interface EntryFormValue {
+  startedAt: string
+  endedAt: string | null
+  projectId: EntryId | null
+  note: string
+}
+
+export interface EntryFormDialogProps {
+  open: boolean
+  mode: 'add' | 'edit'
+  projects: ProjectOption[]
+  busy: boolean
+  initial?: Partial<EntryFormValue>
+  onSubmit: (value: EntryFormValue & NewEntry) => void
+  onDelete?: () => void
+  onClose: () => void
+}
+
+/** Manual entry and edit share one form. Times are local datetimes, stored as UTC ISO. */
+export function EntryFormDialog(p: EntryFormDialogProps) {
+  const [start, setStart] = useState('')
+  const [end, setEnd] = useState('')
+  const [projectId, setProjectId] = useState<EntryId | null>(null)
+  const [note, setNote] = useState('')
+  const [problem, setProblem] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!p.open) return
+    setStart(p.initial?.startedAt ? toLocalInput(p.initial.startedAt) : '')
+    setEnd(p.initial?.endedAt ? toLocalInput(p.initial.endedAt) : '')
+    setProjectId(p.initial?.projectId ?? null)
+    setNote(p.initial?.note ?? '')
+    setProblem(null)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [p.open])
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault()
+    const startedAt = fromLocalInput(start)
+    const endedAt = fromLocalInput(end)
+    const bad = validateRange(startedAt, endedAt)
+    if (bad) return setProblem(bad)
+    if (p.mode === 'add' && !endedAt) return setProblem('Enter an end time, or use the timer.')
+    setProblem(null)
+    p.onSubmit({ startedAt: startedAt!, endedAt, projectId, note })
+  }
+
+  const field = 'h-9 w-full rounded-md border border-gray-300 px-2 text-sm'
+  return (
+    <BaseDialog open={p.open} onOpenChange={(o) => !o && p.onClose()} size="md" loading={p.busy}>
+      <form onSubmit={submit}>
+        <BaseDialog.Header>
+          <BaseDialog.Title>{p.mode === 'add' ? 'Add time' : 'Edit entry'}</BaseDialog.Title>
+        </BaseDialog.Header>
+        <BaseDialog.Body>
+          <div className="space-y-3">
+            <label className="block text-sm">
+              <span className="mb-1 block text-gray-700">Start</span>
+              <input aria-label="Start" type="datetime-local" value={start} onChange={(e) => setStart(e.target.value)} className={field} />
+            </label>
+            <label className="block text-sm">
+              <span className="mb-1 block text-gray-700">End</span>
+              <input aria-label="End" type="datetime-local" value={end} onChange={(e) => setEnd(e.target.value)} className={field} />
+            </label>
+            <div className="text-sm">
+              <span className="mb-1 block text-gray-700">Project</span>
+              <ProjectSelect projects={p.projects} value={projectId} onChange={setProjectId} />
+            </div>
+            <label className="block text-sm">
+              <span className="mb-1 block text-gray-700">Note</span>
+              <input aria-label="Note" value={note} onChange={(e) => setNote(e.target.value)} className={field} />
+            </label>
+            {problem ? (
+              <p role="alert" className="text-sm text-red-600">
+                {problem}
+              </p>
+            ) : null}
+          </div>
+        </BaseDialog.Body>
+        <BaseDialog.Footer>
+          {p.mode === 'edit' && p.onDelete ? (
+            <Button type="button" variant="outline" disabled={p.busy} onClick={p.onDelete}>
+              Delete
+            </Button>
+          ) : null}
+          <Button type="button" variant="outline" disabled={p.busy} onClick={p.onClose}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={p.busy}>
+            {p.mode === 'add' ? 'Add entry' : 'Save'}
+          </Button>
+        </BaseDialog.Footer>
+      </form>
+    </BaseDialog>
+  )
+}

package/src/components/timer/EntryList.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { elapsedMs, formatElapsed, type TimedEntry } from './interval-logic'
+import { ProjectSwatch } from './ProjectSwatch'
+import type { ProjectOption } from './ProjectSelect'
+
+export interface EntryListProps {
+  entries: TimedEntry[]
+  projects: ProjectOption[]
+  onEdit: (entry: TimedEntry) => void
+}
+
+const clock = (iso: string) => new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+
+/** Closed intervals, newest first as given. Duration is end minus start; rounding is a report concern. */
+export function EntryList({ entries, projects, onEdit }: EntryListProps) {
+  if (entries.length === 0) return <p className="text-sm text-gray-500">No entries yet.</p>
+  return (
+    <ul className="divide-y divide-gray-100 rounded-lg border border-gray-200 bg-white">
+      {entries.map((e) => {
+        const project = projects.find((p) => String(p.id) === String(e.projectId ?? ''))
+        const end = e.endedAt ? new Date(e.endedAt).getTime() : Date.now()
+        return (
+          <li key={String(e.id)} className="flex items-center gap-3 px-4 py-2 text-sm">
+            <ProjectSwatch color={project?.color} />
+            <span className="w-32 truncate font-medium text-gray-900">{project?.name ?? 'No project'}</span>
+            <span className="flex-1 truncate text-gray-600">{e.note}</span>
+            <span className="text-gray-500">
+              {clock(e.startedAt)} to {e.endedAt ? clock(e.endedAt) : 'now'}
+            </span>
+            <span className="w-16 text-right font-mono tabular-nums text-gray-900">
+              {formatElapsed(end - new Date(e.startedAt).getTime())}
+            </span>
+            <button type="button" className="text-indigo-600 hover:underline" aria-label={`Edit entry ${e.note || ''}`.trim()} onClick={() => onEdit(e)}>
+              Edit
+            </button>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

package/src/components/timer/IdlePromptDialog.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useState } from 'react'
+import { BaseDialog } from '../dialog/BaseDialog'
+import { Button } from '../ui/button'
+import type { EntryId } from './interval-logic'
+import { ProjectSelect, type ProjectOption } from './ProjectSelect'
+
+export interface IdlePromptDialogProps {
+  open: boolean
+  seconds: number
+  projects: ProjectOption[]
+  currentProjectId: EntryId | null
+  busy: boolean
+  onKeep: () => void
+  onDiscard: () => void
+  onAssign: (projectId: EntryId) => void
+}
+
+export function formatIdle(seconds: number): string {
+  const min = Math.max(1, Math.round(seconds / 60))
+  if (min < 60) return `${min} min`
+  const h = Math.floor(min / 60)
+  const m = min % 60
+  return m === 0 ? `${h} h` : `${h} h ${m} min`
+}
+
+/** On return from idle: keep the time, discard it, or book it to another project. */
+export function IdlePromptDialog(p: IdlePromptDialogProps) {
+  const other = p.projects.find((x) => String(x.id) !== String(p.currentProjectId ?? ''))
+  const [target, setTarget] = useState<EntryId | null>(null)
+  const chosen = target ?? other?.id ?? null
+  return (
+    <BaseDialog open={p.open} onOpenChange={(o) => !o && !p.busy && p.onKeep()} size="md" loading={p.busy}>
+      <BaseDialog.Header>
+        <BaseDialog.Title>You were away</BaseDialog.Title>
+      </BaseDialog.Header>
+      <BaseDialog.Body>
+        <p className="text-sm text-gray-700">
+          The timer kept running while you were idle for {formatIdle(p.seconds)}. What should happen to that time?
+        </p>
+        <div className="mt-4 flex items-center gap-2">
+          <ProjectSelect
+            label="Assign to"
+            projects={p.projects.filter((x) => String(x.id) !== String(p.currentProjectId ?? ''))}
+            value={chosen}
+            onChange={setTarget}
+            noneLabel="Choose a project"
+          />
+          <Button variant="outline" disabled={p.busy || chosen === null} onClick={() => chosen !== null && p.onAssign(chosen)}>
+            Assign
+          </Button>
+        </div>
+      </BaseDialog.Body>
+      <BaseDialog.Footer>
+        <Button variant="outline" disabled={p.busy} onClick={p.onDiscard}>
+          Discard
+        </Button>
+        <Button disabled={p.busy} onClick={p.onKeep}>
+          Keep
+        </Button>
+      </BaseDialog.Footer>
+    </BaseDialog>
+  )
+}