Wire COSS's (Base UI) Sonner-style stacked toast into the app:
- Install @coss/toast (components/ui/toast.tsx) and mount <ToastProvider> in
the root layout; add a small notify.{success,error,info,warning} helper
(lib/toast.ts) over toastManager so callers don't repeat the toast shape.
- Toast on the events requested: clinic created (onboarding), auth actions
(sign in / sign up / sign out / password reset request + reset), patient
saved (create/edit), and all failure branches as error toasts (kept inline
errors as a fallback). New auth toast strings added to the en translation.
- Replace the logo everywhere: overwrite public/temetro-logo.png with the new
1024² square mark (same aspect ratio as the old 500², so existing 32×32
next/image usages stay undistorted; no reference changes needed).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Install COSS Calendar (@coss/calendar, react-day-picker) and add a co-located
DatePicker (Popover + Button trigger + Calendar) in patient-form-dialog. It
reads/writes the same formatted date string the form already uses (formatDate/
parseDate), so the Patient model is unchanged. Replace the free-text Visit 'Date'
and Problem 'Since' inputs with the picker.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Update frontend/CLAUDE.md after the COSS migration: note the sidebar theme
toggle and the always-use-semantic-tokens rule in Theming, add a 'COSS
composition gotchas' section (MenuGroup requirement, DialogPanel padding, no
Card/Avatar size prop, destructive variant, items-start Field, aliases,
ai-elements drift), and dedupe the repeated lucide-react note.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
SidebarInset (variant=inset) had rounded corners + shadow but no border, so the
content card blended into the bg-sidebar backdrop. Add a subtle border (semantic
--border token: white/6% dark, black/8% light), scoped to the inset variant to
match the existing rounded-xl/shadow.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- chat-input: replace the two hardcoded oklch backgrounds (leftover Linear
palette) with COSS surface tokens — outer form bg-muted, inner card bg-input.
Lighter in dark mode and theme-aware (no longer near-black in light mode),
preserving the two-tone layered look.
- nav-user: wire the previously-static Theme menu item to next-themes
(useTheme/setTheme) — toggles light/dark, with the icon (Sun/Moon) and
shortcut label reflecting the current theme.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- MenuGroupLabel must live inside a MenuGroup (Base UI context) — wrap the
label in nav-user, team-switcher, and nav-notifications. Fixes the
'MenuGroupContext is missing' runtime error.
- Patient form/detail dialogs: COSS DialogPopup has no inner padding; move the
body into DialogPanel (form as 'contents') so fields get p-6 instead of being
flush to the edges.
- Settings 'Delete' button used the default variant + bg override, keeping a
near-white border-primary in dark mode. Use variant='destructive'.
- Auth forms: COSS Field is items-start (no stretch). Make the submit button and
the password-row/grid w-full, and underline the bottom sign-in/up link.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Components:
- Replace components/ui primitives with COSS equivalents from the @coss/* shadcn
registry. Add menu/preview-card/group; remove the superseded dropdown-menu,
hover-card, button-group; keep carousel (no COSS equivalent).
- Migrate live call sites to canonical COSS APIs preserving layout/behavior:
sidebar menus (nav-user, team-switcher, nav-notifications), chat-input radio
menu, patient dialogs/cards, auth forms (FieldGroup -> flex column), settings.
- ai-elements: migrate the live conversation/message with behavior parity
(Tooltip via render, Group/GroupText); repoint dormant files (hover-card ->
preview-card, dropdown-menu -> menu, button-group -> group, InputGroupButton
-> Button). Residual pre-existing Base UI type drift stays behind
ignoreBuildErrors.
Theme:
- Adopt COSS default neutral tokens in globals.css with light + dark palettes.
- Add next-themes (defaultTheme=dark, enableSystem) and drop the forced dark
class. Align font variables to the COSS contract (--font-sans/-heading/-mono).
Make scrollbars theme-aware.
i18n:
- Add i18next + react-i18next (lib/i18n/config.ts, locales/en/translation.json,
components/i18n-provider.tsx mounted in layout). Convert auth forms, sidebar
nav, and settings tabs to useTranslation() as the reference pattern.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Returning members were sent to onboarding on every sign-in because the new
session had no activeOrganizationId. Add a session.create `before` hook that
defaults it to the user's first clinic membership, so sign-in lands straight
in the app.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
If a signed-in user has no active clinic but already belongs to one, select
it automatically; only users with zero clinics are sent to onboarding. Fixes
being asked to create a clinic on every login.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the shadcn login-01 and signup-03 blocks (with the base-luma field/label
components) and wire their forms to the Better Auth client: login →
signIn.email, signup → signUp.email (12-char rule, confirm match), with error
+ submitting states. Dropped the non-functional "Login with Google" button.
Render the block forms from the existing (auth)/login and (auth)/signup pages
(deleting the blocks' duplicate app/login + app/signup routes). Replace the
animated AuthShell with a static, card-based shell + brand header so
onboarding/verify/reset/accept-invite match. Drop the unsupported `eslint`
key from next.config.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the split layout with a centered glass card on a living background:
drifting aurora blobs, a rotating conic-gradient halo around the card, a
spring entrance with staggered content, a floating logo badge, and a one-time
shimmer sweep on mount. Shared by all auth screens.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the centered bordered card with a two-column auth layout shared by
login/signup/onboarding (and the rest): a branded left panel (gradient glow,
subtle grid, product pitch + feature list) and a clean, card-less form on the
right. Collapses to a single centered column with a soft glow on mobile.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Since email verification is no longer enforced at sign-in, gating
organization creation on `user.emailVerified` blocked onboarding with
"You are not allowed to create a new organization". Allow any signed-in
user to create a clinic; re-tie to emailVerified when verification returns.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Email verification is no longer enforced (see backend), and sign-up now
auto-signs-in, so route to clinic onboarding instead of /verify-email.
Update CLAUDE.md: the app now talks to ../backend (auth + patient API),
route protection via proxy.ts, and build/type-check guidance.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- emailAndPassword.requireEmailVerification = false so users can sign in
immediately; verification emails are still sent and /verify-email still
works. Flip back to true to make it mandatory later (TODO noted in code).
- Add backend/CLAUDE.md documenting stack, commands, the auth/schema
generation workflow, and runtime gotchas.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- useSecureCookies now keys off the BETTER_AUTH_URL scheme instead of
NODE_ENV, so login works over http://localhost in the (production-mode)
Docker stack instead of the browser silently dropping the session cookie.
- env parsing treats empty strings as unset, so compose-supplied optionals
like `SMTP_PORT=` no longer fail coercion (Number("") === 0) and crash boot.
- docker-compose: configurable host Postgres port (POSTGRES_PORT) to avoid
clashing with an existing local Postgres.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Connects the UI-only app to the new backend over Better Auth + a small
patient API client, replacing the in-memory fixture and placeholder identity.
- Better Auth React client (lib/auth-client.ts) + shared access-control
roles; API client (lib/api-client.ts) sending credentials cross-origin.
- Designed (auth) route group: login, signup, verify-email, forgot/reset
password, clinic onboarding, and accept-invite.
- proxy.ts (this Next's renamed middleware) optimistic redirect + an
authoritative client AppAuthGuard requiring a session and active clinic.
- Real identity in nav-user (useSession + sign out); the unused team
switcher repurposed as an organization (clinic) switcher; Care-team
settings tab manages members and invitations.
- lib/patients.ts now calls the org-scoped API (types unchanged); patients
table and create/edit dialog updated for async create/update.
- next.config: standalone output + Dockerfile for containerized runs.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Implements the first temetro backend: an Express 5 API on Postgres via
Drizzle ORM, with authentication and multi-tenant clinics powered by
Better Auth.
- Auth: email/password with required email verification, password reset,
rate limiting, CSRF/trusted-origins, secure cookies, session audit hook.
- Organizations (clinics) with RBAC (owner/admin/member/viewer) and an
extended `patient` permission set; member invitations by email.
- Org-scoped patient records mirroring the frontend Patient shape, with
CRUD endpoints gated by permission (read/write/delete).
- Email helper logs links to the console when SMTP is unset (zero-setup
local dev); Dockerfile + docker-compose (db + backend + frontend) with
migrations applied on startup and a configurable Postgres host port.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Patients: new /patients directory table (name, MRN, age·sex, status,
last seen, allergies) with search + Add patient; clicking a row opens
the record in the chat via /?patient=<#>. chat-panel reads that search
param (Suspense-wrapped) and runs the lookup once on arrival. Sidebar
"Patients" now links to /patients; lib/patients gains listPatients().
- Settings: re-themed to clinical tabs (Profile · Records · Signing ·
Care team · Developers) — clinician profile, patient notifications,
patient-owned-storage/signed-records features, and a Signing key panel.
Same layout/components, only content changed.
- Sidebar footer: Polar-style NavUser (avatar + name + chevron) opening a
menu upward — Settings · Docs & GitHub · Theme · Log out. Collapsed
("locked"): avatar only, name on hover (tooltip), menu opens to the
right. Placeholder identity (no auth yet).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- app-sidebar: remove the "Saved" and "Conversations" nav items (dead #
links) and the "temetro / Clinic" team switcher; footer is now a plain
"temetro · open source" wordmark. Keep the notifications bell. Drop the
now-unused Bookmark/MessageSquare/Logo/TeamSwitcher imports.
- CLAUDE.md (frontend): rewrite "What this is" to match the current
patient-records flow (/patient cards, sparklines, create/edit dialog over
the mock fixture) and point to the project vision; note team-switcher.tsx
is unused.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Generalize add-patient-dialog → shared PatientFormDialog (create | edit).
Edit mode prefills from the patient; both modes now cover all sections
with add/remove rows: identity, vitals, allergies, meds, problems, labs,
visits. Save writes to the store (addPatient overwrites by file #).
- Fix the dialog scrollbar: fixed header + footer (Save/Cancel pinned),
only the field body scrolls, scrollbar hidden (no-scrollbar).
- patient-cards: "Edit record" button on the Summary card opens the editor
(stopPropagation so it doesn't open the detail dialog); PatientResult
holds the editor state and exposes onPatientUpdated.
- chat-panel: onPatientUpdated replaces the message's patient in place, so
saved edits update the on-screen cards (no duplicate message, no requery).
- chat-input: Add pill now uses PatientFormDialog mode="create".
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Extensions like ColorZilla inject attributes (cz-shortcut-listen) into
<body> before React hydrates, causing a benign hydration mismatch.
suppressHydrationWarning on <body> is the standard fix; it only ignores
attribute diffs on <body> itself, not its children.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- chat-input: new "Add patient" pill (UserPlus) opens an intake dialog;
remounts it via a key each open for a fresh file # / cleared form. On
create it runs /patient <new#> so the record's cards open in the chat.
- add-patient-dialog: controlled Dialog + form — generated file # (with
regenerate), identity (name/age/sex/status/PCP), current vitals, and
repeatable allergies & medications. Save builds a Patient and adds it
to the store. Save disabled until a name is entered.
- lib/patients: generateFileNumber() (unique) + addPatient() (session
store; swap point for a real create API).
- patient-cards: graceful empty states (no labs / meds / problems /
visits / trend) so a brand-new sparse chart renders cleanly.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
scroll-snap-align:start snapped the first card flush to the scroll-port
start, hiding the row's left padding and making the card look cut off on
the left. Drop snap-x/snap-start; the p-2 breathing room now shows on
both ends.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Each patient card is now a Dialog trigger (nativeButton=false for
accessible click/keyboard) that opens a roomier detail dialog with
expanded per-topic info (full demographics, vitals/labs min·max·latest
with a larger chart, all labs with dates, full visit notes).
- Sparkline shows the value (dot + tooltip) at the nearest reading on
mousemove; reused larger in the dialogs.
- Row padding pb-2 → p-2 so card tops and the first/last card edges
(ring/shadow/rounded corners) are no longer clipped by the scroller.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Split the overloaded card into 7 single-topic cards (Summary, Vitals,
Labs, Medications, Problems, Allergies & alerts, Visits) so the
equal-height row is evenly filled instead of stretched-and-empty.
- Add a dependency-free inline-SVG shaded-area Sparkline; Vitals shows a
heart-rate trend and Labs a headline-lab trend, fed by new vitalsTrend/
labTrend series in the fixture.
- Lighten the chat input's two surfaces so it reads as a raised layer
above the new (lighter) page background.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- globals.css: lighten --background (content panel) and deepen --sidebar so
the panel reads as a lighter neutral charcoal floating on a near-black rail,
matching the Polar reference. Pure lightness change; panel stays below
--card so cards still pop.
- patient-cards.tsx: row uses items-stretch so all cards share one height
(no more ragged/taller cards); add no-scrollbar to hide the horizontal
scrollbar while keeping scroll.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- globals.css: thin dark-themed scrollbar (Firefox + WebKit) so scroll
areas no longer show the white default; `no-scrollbar` regions still win.
- patient-cards.tsx: render the cards in a horizontal scroll row (each
w-80 shrink-0 snap-start), loading skeletons included.
- chat-input.tsx: wire the controls — Attach opens a file picker with
removable chips; Access / response mode / specialty / facility / time
range are real DropdownMenu radio selectors (via a SelectPill helper)
that remember the choice. Mic stays visual-only for now. Layout/styling
unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- chat-panel.tsx: `/10293` now triggers a lookup, not just `/patient 10293`
(regex accepts an optional `patient` keyword; matches digits only so
`/help` etc. still fall through to the normal reply).
- app/layout.tsx: make <body> a fixed h-dvh, overflow-hidden shell so the
page no longer shows its own scrollbar; each route's SidebarInset already
scrolls internally (chat = overflow-hidden, settings = overflow-y-auto).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Type `/patient <fileNumber>` to pull up a patient: a skeleton card set
appears, then fills in with summary, allergies & alerts, medications &
problems, and vitals/labs/visits — composed from existing Card/Badge/
Avatar/Separator/Skeleton primitives (no new design).
- lib/patients.ts: typed mock fixture + async getPatient() (swap point
for a real API later).
- components/chat/patient-cards.tsx: PatientResult (loading/ready/
not-found).
- chat-panel.tsx: discriminated-union message model, strict /patient
parse, async lookup with update-by-id, clinical heading.
- chat-input.tsx: relabel leftover coding-assistant controls to clinical
copy + clinical icons; layout/styling unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Base UI's Menu.GroupLabel requires a surrounding Menu.Group (unlike
Radix's standalone Label), so using DropdownMenuLabel as a bare heading
threw "MenuGroupContext is missing" at runtime. Render a <div> directly.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Khalid Abdi