Replace the gap-4-on-CardFrame hack with a faithful COSS Frame: a muted
tray (bg-muted/72) holding distinct bordered FramePanels spaced by mt-1,
matching coss.com/ui/docs/components/frame. Adds components/ui/frame.tsx
and switches SettingsFrame/SettingsCard to render Frame/FramePanel when
separated (via context), keeping joined frames on CardFrame.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
`npm run lint` reported 99 errors and 26 warnings across 65 files and
had presumably been failing for a while — next.config.ts sets
eslint.ignoreDuringBuilds, so the build never surfaced it.
68 were in vendored code: components/charts and components/ai-elements,
pulled from upstream registries. Re-linting those reports upstream's
style back at us, and "fixing" them means diverging and eating conflicts
on every update — ai-elements already has exactly this carve-out on the
TypeScript side via ignoreBuildErrors. Ignore both, plus the two registry
files in components/ui (carousel publishes its api from an effect; the
sidebar skeleton picks a random width).
The other 31 were ours, nearly all react-hooks/set-state-in-effect on
the same shape: an effect that re-seeds form state when a dialog opens or
a selection changes. Moved to render-phase adjustment, which is both what
React recommends and a real fix — the effect version paints one frame of
the *previous* record's values before correcting itself. Two carried
sharper bugs: the employee dialog could keep a typed password across a
switch to another member, and use-wallet-sync could carry `linked` over
to a newly-selected patient, briefly offering to push a record to
someone else's wallet.
The rest: useIsMobile and speech-support detection become
useSyncExternalStore (correct on first paint, no mount flash); refs
mirroring state are written in effects rather than during render; the
care-team fetch moves into its effect behind a reload key, dropping an
exhaustive-deps suppression.
Two effects in chat-panel keep the rule disabled with a reason. Both are
what effects are for: draining the queued-message buffer when the
transport goes idle, and resolving ?thread from the URL — the latter
mints an id with nanoid(), so moving it into render would just trade this
error for a purity one.
Also removes a dead /explore-era import and unused directives found on
the way. lint now exits 0, with the ai-elements tsc carve-out unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The Clinician profile frame inset its content 40px and drew a second
border around it — a box inside a box. Both came from CardFramePanel,
added in 44d653f. It doesn't exist in the COSS registry: upstream
@coss/card ships Card, CardFrame, CardFrameHeader/Title/Description/
Action/Footer and nothing else. There is no body part because the frame
isn't meant to pad its body.
CardFrame styles its cards through *direct-child* selectors — -m-px,
the clip-path, rounded-t/b-xl, shadow-none, before:hidden — pulling each
card out by a pixel so it sits flush inside the frame's own border. The
panel wrapper made every card a grandchild, so none of those selectors
matched: the 20px came from the panel's p-5, the second border came from
the card keeping the treatment the frame was supposed to suppress. The
commit that added it claimed the cards would "pick up the frame's card
treatment"; they never did.
Drop the panel and render children directly inside the frame, which is
the COSS default. Body padding goes on the Card, where COSS puts it, so
content is inset once rather than twice. Card-bearing bodies now get the
frame treatment they were meant to have, and the divide-y lists in
Records, Care team and Signing stack flush, which is what -m-px and
rounded-t-xl were for. The notification ToggleRows lose their space-y
wrapper and read as one list.
Frames holding raw form content (the AI panel, Care team's error and
toolbar) get an explicit padded Card instead of leaning on the frame.
card.tsx is now upstream @coss/card verbatim, minus font-heading on
CardTitle.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
SettingsFrame used a hand-rolled <div className="p-5"> body and
SettingsCard was a plain div (no data-slot=card), so the frame's card
styling never applied.
- Add CardFramePanel (data-slot="card-frame-panel") as the padded frame
body, mirroring the other CardFrame* subcomponents.
- SettingsFrame now composes CardFrameHeader + CardFramePanel (same p-5
padding as before) instead of a raw div.
- SettingsCard renders a real COSS Card (data-slot=card). Since Card is
flex flex-col, the horizontal-row call sites (ToggleRow, billing and
preferences rows) now pass flex-row.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Invoice dialog: the Back-date / Due-date toggles now use the COSS Checkbox
instead of raw, misshapen native checkboxes.
- Patients page: rebuilt the list as a COSS Table in a CardFrame, and moved
"Import from a patient app" into a ⋯ overflow menu so the toolbar keeps one
primary "Add patient" CTA.
- Patient detail sheet: collapsed the five header buttons + delete into a
primary Edit action plus a ⋯ More menu (Download summary, Record visit,
Transfer, Push to wallet, and a destructive Delete).
- Added the COSS table + checkbox primitives; new i18n keys across all locales.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Record history: replace fragile COSS Timeline separator math with a
continuous-rail list so every audited change renders in full (RTL-safe).
- Prescriptions: new reusable COSS DatePicker (Popover + Calendar) replaces
raw <input type="date"> for Start/End date.
- Update banner: rebuilt with COSS Alert variant="warning"; pinned physical
bottom-right so it stays bottom-right under Arabic RTL.
- AI setup notice: thin attached warning banner with clearer copy; now shown
above the input in active chats too, not just the empty state.
- Settings profile: wire the previously dead Specialty (Select) and
Professional links (editable rows) into the persisted preferences.
- Patients: add a status filter and broaden search to conditions/allergies.
- Sidebar user menu: quick language switch submenu (RTL already wired).
- ai-elements: fix a subset of Base UI type drift (22 -> 12; remainder is
cmdk->Autocomplete migration drift kept behind ignoreBuildErrors).
- i18n: new keys added across all five locales (en/de/fr/ar/so).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the bespoke left-aligned DialogStepper with the Origin UI Stepper
primitive (components/ui/stepper.tsx) so the numbered indicators sit centered
inline with their labels. Rebuild the patient sheet's Record History section as
a vertical Timeline (components/ui/timeline.tsx) showing the actor name, an
entity-type icon, the action, and the date, replacing the flat avatar list.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- SidebarMenuAction (the expand chevron on Patients/Pharmacy/Messages) used a
physical right-1, so in Arabic it sat on the right over the icons. Use the
logical end-1 so it's on the right in English and the left in Arabic, clear of
the icons.
- Revert the earlier header change: the notification bell and collapse toggle go
back to their original placement (no RTL column stacking, no mirrored glyph,
notifications popover back to side="right").
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Arabic RTL: stack the collapse arrow/bell above the nav icons instead of
pinning them to the opposite edge; mirror the panel-toggle glyph; flip the
notifications popover to open toward the content side.
- "Use my current location" now reverse-geocodes (OpenStreetMap Nominatim) to
fill address/city/country, not just latitude/longitude, with a graceful
coordinates-only fallback. New settings.location.geoPartial key in all 5 locales.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
backend: public GET /api/portal/:clinic/doctors and /availability, and
thread a chosen provider into portal bookings (conflict check unchanged).
frontend: fix site-wide Arabic RTL — anchor the sidebar right for RTL and
mirror the Switch thumb. Add a Patient Portal section (open/copy/QR) to
Settings → Signing and a "Use my current location" GPS button to the clinic
location editor. New i18n keys across all five locales.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add three UI locales (so/ar/de) with full ~1,660-key translations alongside
en/fr, selectable in Settings → Profile. Arabic gets full right-to-left support:
- config.ts registers the locales and exports a `dirFor` helper; an inline
<head> script in layout.tsx sets <html dir/lang> before first paint (no RTL
flash), and i18n-provider keeps them in sync on language change.
- ~160 physical direction utilities converted to logical (ms/me/ps/pe/
start/end/text-start/text-end); directional chevrons/arrows get rtl:rotate-180;
chat-bubble align variants fixed to logical.
- IBM Plex Sans Arabic appended to the sans/heading font stacks for
per-character Arabic fallback.
- Language persists to the backend user_settings and re-applies on sign-in so it
roams across devices (localStorage stays the offline source of truth).
- New scripts/check-locales.mjs (npm run check-locales) enforces key/placeholder
parity and Arabic CLDR plural completeness.
Bump to 0.3.0.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Extract the Patients pagination into a reusable ListPagination component
(components/ui/list-pagination.tsx, carrying the pageWindow helper) and use it
on the Activity feed and the Invoices list (10/page, search resets to page 1).
Patients is refactored onto the same component, removing the duplicated block.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Compose the conversation thread from the shadcn Message, Bubble, and
Attachment components (Base UI under the hood), keeping COSS semantic colour
tokens — outgoing bubbles use the primary variant, incoming use muted, and
shared files/appointments/password-resets render as Attachment cards. Day
separators, sender grouping, and timestamps are preserved.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the COSS Pagination primitive and page the patients list at 10 rows/page
(search resets to page 1; the page is clamped at render so a shrinking list
never strands you past the last page). Replace the flat "secondary" status
badge with semantic colours: active → success, inpatient → info, discharged →
outline. Includes the i18n keys for pagination, the AI setup notice, and the
patient record-history / PDF export features.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- settings: keep tab nav on its own row so "Developers" no longer wraps
- chat: show the "Veil active" chip once per conversation, not every turn
- chat: record cards only offer "Click for more" when they have detail
- chat: chat-history panel (pill + sheet) top-left of the AI chat with
"Start new chat"; rename sidebar "New chat" -> "Ask temetro" (Sparkles)
- meetings: disable past dates, add an Upcoming Meetings list, and use the
Empty component for empty days; scheduler can be pre-targeted via ?with
- messages: add a call button left of each inbox row -> Meetings (?with)
- toast: add a dismiss (x) button; call invites now ring 30s with "Accept"
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- chat composer: attach works with text (sr-only file input); lighter
bordered input box
- messages: defer "+" menu actions past close so file/appointment pickers fire
- tasks: top-level New task button
- chat: condensed appointment card with "View in calendar" deep-link;
appointments page auto-opens the month calendar from ?calendar=&date=
- lab: work-queue rows expand to show task detail + complete
- inventory: clickable item detail dialog
- pharmacy: Dispense action records a dispense + "Recently dispensed" feed;
expiring badge uses endDate and only flags <=2 days left
- prescriptions: keyboard nav in patient search, inventory-backed medication
combobox (free-text fallback), optional start/end dates; thread dates through
- sidebar: whole nav scrolls as one
- i18n keys for all new strings
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- new reusable <Combobox> (Base UI Autocomplete): arrow-key + Enter navigation
- New Appointment dialog: patient search and provider are now searchable
comboboxes (provider sourced from /api/staff/providers) instead of a hand-
rolled dropdown and a free-text input
- appointment rows are clickable and open an <AppointmentDetailSheet> to edit
date/time/type/provider/status or delete; "Added by AI" badge shown on rows
and in the sheet for source="ai" records
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
CommandItem rendered the icon flush against the label. Add a gap (and normalize
icon sizing) so the two no longer touch.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Appointments: a Calendar button next to Add opens a month-grid dialog
(reuses the Calendar primitive + shared ScheduleList); the schedule day is
marked and selecting it lists that day's appointments.
- Patients sub-nav: new Prescriptions page (mock list + KPIs) with a compact
"New prescription" dialog reusing the patient quick-search pattern.
- Notes: deleting a note now goes through a reusable ConfirmDialog instead of
deleting immediately.
- New top-level Messages page: two-pane email-style inbox (list + reading pane
with mock reply composer), mirroring the Notes layout.
- Sidebar logo bumped from size-9 to size-10.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Round-2 fixes to the 6 features:
- Logo: enlarge the sidebar mark, drop the inline wordmark, and show
"temetro" via a hover tooltip; bigger logo on the auth screens.
- Sidebar footer: wrap the quick-nav, clinic switcher, and user menu in a
single bordered block so it reads as one footer instead of three cards.
- Sidebar nav: highlight the active page (usePathname + data-[active]), and
add an Appointments & Schedule sub-page under Patients that auto-expands
for the current section. New mock /appointments page; reachable via ⌘K.
- Notes: redesign to a two-pane list + editor with an Empty state on the
right when nothing is selected; fix the editor so text starts top-left
(div instead of a centering <button>); compact the toolbar; add
.note-content typography in globals.css so headings/lists/etc. actually
render (the app has no typography plugin).
- Patients: new PatientDetail laid out to fit the side Sheet (stacked
full-width sections, no nested click-to-expand dialogs); keep Edit.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- lib/notes.ts: list/get/create/update/delete via the API client.
- New /notes route + nav item (and shared lib/nav.ts entry, i18n key) so it
shows in the sidebar and command palette.
- components/notes/notes-view.tsx: a note list + "New note", with save/delete
and toasts.
- components/notes/notes-editor.tsx: a Word-like COSS Toolbar driving Tiptap
(StarterKit + Placeholder) — bold/italic/underline, H1–H2, bullet/numbered
lists, undo/redo — plus a title field and Save. Installed @coss/toolbar and
@coss/toggle-group and the Tiptap packages.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Several navigation/UX additions:
- Command palette (⌘K): components/command-palette.tsx wraps the app shell
(mounted in app/(app)/layout.tsx) with a controlled COSS CommandDialog listing
the nav pages; a "Quick nav" Kbd button in the sidebar footer also opens it.
Installed @coss/kbd. Extracted the nav list into lib/nav.ts so the sidebar and
palette share one source of truth.
- Clinic switcher moved from the sidebar body into the footer; its menu now
opens a read-only "Clinic info" dialog and a "Create clinic" dialog instead of
routing to /onboarding. Shared CreateClinicForm (components/clinic/) is reused
by onboarding.
- Patients: clicking a row opens a right-side Sheet with the full record
(components/patients/patient-detail-sheet.tsx) instead of navigating to the
chat; PatientResult gained a vertical "column" layout for the Sheet.
- New Analysis page (app/(app)/analysis/) — a mock dashboard (revenue/profit,
patient volume, appointments, operations) reusing Sparkline + Card + Badge.
- Logo: set metadata.icons so the new mark appears as the browser-tab favicon.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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>
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>
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>
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>
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