diff --git a/client/src/components/Atlas/useGlassGlare.ts b/client/src/components/Atlas/useGlassGlare.ts
new file mode 100644
index 000000000..540401de7
--- /dev/null
+++ b/client/src/components/Atlas/useGlassGlare.ts
@@ -0,0 +1,48 @@
+import { useRef, type RefObject } from 'react'
+
+export interface GlassGlare {
+ /** Goes on the panel itself — the glare is measured against its box. */
+ panelRef: RefObject
+ /** The soft light under the cursor. */
+ glareRef: RefObject
+ /** The lit stretch of border around it. */
+ borderGlareRef: RefObject
+ onMouseMove: (e: { clientX: number; clientY: number }) => void
+ onMouseLeave: () => void
+}
+
+/**
+ * The Atlas panels' liquid-glass hover: a pool of light under the cursor and the
+ * piece of border nearest to it lighting up.
+ *
+ * Extracted so a second panel beside the first one behaves identically. Two
+ * hand-copied versions of a gradient are two versions that drift, and the whole
+ * point of the effect is that the panels look like one material.
+ *
+ * Written straight to the DOM rather than through state: this runs on every
+ * mousemove, and a re-render per frame would cost more than the effect is worth.
+ */
+export function useGlassGlare(dark: boolean): GlassGlare {
+ const panelRef = useRef(null)
+ const glareRef = useRef(null)
+ const borderGlareRef = useRef(null)
+
+ const onMouseMove = (e: { clientX: number; clientY: number }): void => {
+ if (!panelRef.current || !glareRef.current || !borderGlareRef.current) return
+ const rect = panelRef.current.getBoundingClientRect()
+ const x = e.clientX - rect.left
+ const y = e.clientY - rect.top
+ glareRef.current.style.background = `radial-gradient(circle 300px at ${x}px ${y}px, ${dark ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.25)'} 0%, transparent 70%)`
+ glareRef.current.style.opacity = '1'
+ borderGlareRef.current.style.opacity = '1'
+ borderGlareRef.current.style.maskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+ borderGlareRef.current.style.webkitMaskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+ }
+
+ const onMouseLeave = (): void => {
+ if (glareRef.current) glareRef.current.style.opacity = '0'
+ if (borderGlareRef.current) borderGlareRef.current.style.opacity = '0'
+ }
+
+ return { panelRef, glareRef, borderGlareRef, onMouseMove, onMouseLeave }
+}
diff --git a/client/src/components/Dawarich/DawarichAcceptDialog.tsx b/client/src/components/Dawarich/DawarichAcceptDialog.tsx
new file mode 100644
index 000000000..9faeca089
--- /dev/null
+++ b/client/src/components/Dawarich/DawarichAcceptDialog.tsx
@@ -0,0 +1,387 @@
+import React, { useMemo, useState } from 'react'
+import { Gauge, Hourglass, CircleDashed, Star } from 'lucide-react'
+import type { DawarichAccept, DawarichSuggestion, DawarichSuggestionTarget } from '@trek/shared'
+import { DAWARICH_BUCKET_MATCH_MIN_MINUTES, DAWARICH_BUCKET_MATCH_RADIUS_M } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import Modal from '../shared/Modal'
+import MSheet from '../../mobile/components/MSheet'
+import { FormSheetFooter, FormSheetHeader } from '../../mobile/screens/trip/sheets/PlSheetChrome'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import DawarichIcon from '../shared/DawarichIcon'
+import DawarichBadge from './DawarichBadge'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import CustomSelect from '../shared/CustomSelect'
+
+export interface AcceptTargetOption {
+ id: number
+ label: string
+ /** Secondary half of the label — a day's date beside its number. */
+ badge?: string
+}
+
+export interface DawarichAcceptDialogProps {
+ suggestion: DawarichSuggestion | null
+ target: DawarichSuggestionTarget
+ /** Trips the user may write to, for the `place` target. */
+ trips?: AcceptTargetOption[]
+ /** Days of the chosen trip, resolved by the caller. */
+ daysForTrip?: (tripId: number) => AcceptTargetOption[]
+ /** Journeys the user may edit, for the `journal` target. */
+ journals?: AcceptTargetOption[]
+ busy?: boolean
+ onCancel: () => void
+ onConfirm: (body: DawarichAccept) => void
+}
+
+/**
+ * The review step: see what was recorded, correct it, then decide where it goes.
+ *
+ * The whole reason the integration is not a one-click import. A visit detector
+ * is right most of the time and confidently wrong the rest, and the difference
+ * between the two is a judgement only the traveller can make — so the values
+ * are prefilled from the recording and every one of them is editable before
+ * anything is written.
+ *
+ * What it does NOT do is offer to edit the recording. Dawarich owns that, and
+ * a correction made here would be lost the next time the detector ran.
+ *
+ * Three targets, because `DawarichSuggestionTarget` has three. The trip and
+ * journal rails open the first two; `bucket_list` is reached through MCP, where
+ * an assistant can accept a stay against a wish. The branch is kept for that and
+ * for the day an Atlas-side entry point wants it — the server has always been
+ * able to do it, and a dialog that could only handle two of three targets would
+ * be the thing that had to be fixed then.
+ */
+export default function DawarichAcceptDialog({
+ suggestion,
+ target,
+ trips = [],
+ daysForTrip,
+ journals = [],
+ busy = false,
+ onCancel,
+ onConfirm,
+}: DawarichAcceptDialogProps): React.ReactElement | null {
+ const { t, locale } = useTranslation()
+ const phone = useIsPhone()
+
+ const [name, setName] = useState('')
+ const [notes, setNotes] = useState('')
+ const [date, setDate] = useState('')
+ const [time, setTime] = useState('')
+ const [endTime, setEndTime] = useState('')
+ const [tripId, setTripId] = useState('')
+ const [dayId, setDayId] = useState('')
+ const [journalId, setJournalId] = useState('')
+ // Re-seeded whenever a different suggestion opens the dialog, so the fields
+ // always describe the row the user just pressed rather than the previous one.
+ const [seededFor, setSeededFor] = useState(null)
+
+ if (suggestion && seededFor !== suggestion.id) {
+ setSeededFor(suggestion.id)
+ setName(suggestion.name)
+ setNotes('')
+ setDate(suggestion.localDate)
+ setTime(clockOf(suggestion.startedAt))
+ setEndTime(clockOf(suggestion.endedAt))
+ setTripId(suggestion.tripId ?? (trips[0]?.id ?? ''))
+ setDayId('')
+ setJournalId(journals[0]?.id ?? '')
+ }
+
+ const days = useMemo(
+ () => (typeof tripId === 'number' && daysForTrip ? daysForTrip(tripId) : []),
+ [tripId, daysForTrip],
+ )
+
+ if (!suggestion) return null
+
+ const missingTarget =
+ (target === 'place' && typeof tripId !== 'number') ||
+ (target === 'journal' && typeof journalId !== 'number') ||
+ (target === 'bucket_list' && suggestion.matchedBucketListItemId === null)
+
+ const confirm = () => {
+ const body: DawarichAccept = { target }
+ if (target === 'place') {
+ if (typeof tripId === 'number') body.tripId = tripId
+ if (typeof dayId === 'number') body.dayId = dayId
+ }
+ if (target === 'journal' && typeof journalId === 'number') body.journalId = journalId
+ if (target === 'bucket_list' && suggestion.matchedBucketListItemId !== null) {
+ body.bucketListItemId = suggestion.matchedBucketListItemId
+ }
+ if (name.trim() && name.trim() !== suggestion.name) body.name = name.trim()
+ if (notes.trim()) body.notes = notes.trim()
+ if (date && date !== suggestion.localDate) body.date = date
+ if (time) body.time = time
+ if (endTime) body.endTime = endTime
+ onConfirm(body)
+ }
+
+ // The same fields in both shells — only the frame around them differs.
+ const fields = (
+
+ {/* What was recorded, before anything the user changed. Kept visible so a
+ corrected field can be compared against the source rather than
+ replacing it invisibly. */}
+ {/* What Dawarich recorded, as facts rather than as a sentence with
+ separators in it: a line for when, and a row of the same badges the
+ review list uses so the dialog and the list read as one thing. */}
+
+
+
+ {/* Why this stay is being offered against a wish at all. The row that
+ led here shows the wish's name and nothing else, which leaves the
+ reader to guess what a star beside a café has to do with a museum —
+ it is the rule, and the rule is short enough to state. */}
+ {target === 'bucket_list' && suggestion.matchedBucketListName && (
+
+
+
+ + {t('dawarich.accept.recorded', { + from: new Date(suggestion.startedAt).toLocaleString(locale), + to: new Date(suggestion.endedAt).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }), + })} +
+
+
+ {t('dawarich.accept.duration', { minutes: suggestion.durationMinutes })}
+
+ {/* The source's own verdict, shown here rather than on every row of
+ the list: since Dawarich 1.12.0 "unconfirmed" is the normal state
+ of a visit, so it says nothing in a list and something here, where
+ somebody is deciding whether to trust this one. */}
+ {suggestion.sourceStatus === 'suggested' && (
+ {t('dawarich.sourceStatus.suggested')}
+ )}
+ {KNOWN_BANDS.includes(suggestion.confidenceBand ?? '') && (
+
+ {t('dawarich.confidence.' + suggestion.confidenceBand)}
+
+ )}
+
+
+
+
+ setName(e.target.value)}
+ className="w-full px-3 py-2.5 border rounded-lg text-body focus:outline-none focus:ring-2 ring-accent border-edge bg-surface-input text-content"
+ />
+
+
+ {/* TREK's own pickers, not the browser's. A native `type="date"` paints
+ itself from the OS locale and a native `type="time"` ignores the 12h/24h
+ setting outright (#2067) — and neither follows the colour scheme. The
+ date column is the wide one because a localized date is long and a
+ clock never is. */}
+ {target !== 'bucket_list' && (
+
+
+ )}
+
+ {/* Stacked and full width, in the order the choice is actually made: the
+ day is what somebody is deciding, the trip is usually already right.
+ Side by side, both pickers were half as wide as their longest option
+ and the menus opened narrower than the text in them. */}
+ {target === 'place' && (
+
+
+ {t('dawarich.accept.date')}
+
+
+
+
+ {t('dawarich.accept.from')}
+
+
+
+
+ {t('dawarich.accept.to')}
+
+
+
+
+ )}
+
+ {target === 'journal' && (
+
+
+ {t('dawarich.accept.day')}
+
+ {/* Unplanned is a real answer, not a missing one: half the places on
+ a trip sit on no day, and forcing a choice here would invent one. */}
+ setDayId(next === NO_DAY || typeof next !== 'number' ? '' : next)}
+ options={[
+ { value: NO_DAY, label: t('dawarich.accept.noDay') },
+ // The date rides as the option's badge rather than inside its
+ // label: the day number is what people scan for, and the date
+ // is the confirmation they read second.
+ ...days.map(day => ({ value: day.id, label: day.label, badge: day.badge })),
+ ]}
+ style={{ width: '100%' }}
+ />
+
+
+
+ {t('dawarich.accept.trip')}
+
+ { setTripId(typeof next === 'number' ? next : ''); setDayId('') }}
+ options={trips.map(trip => ({ value: trip.id, label: trip.label }))}
+ placeholder={t('dawarich.accept.pickTrip')}
+ style={{ width: '100%' }}
+ />
+
+
+
+ {t('dawarich.accept.journal')}
+
+ setJournalId(typeof next === 'number' ? next : '')}
+ options={journals.map(journal => ({ value: journal.id, label: journal.label }))}
+ placeholder={t('dawarich.accept.pickJournal')}
+ style={{ width: '100%' }}
+ />
+
+ )}
+
+ {target !== 'bucket_list' && (
+
+
+