Khalid Abdi
97bf9ed8cc
- Linear-inspired dark theme (app/globals.css), forced dark in layout
- Clinical sidebar (components/sidebar-02) with temetro brand
- AI chat UI (components/chat): Cursor-style input, UI-only mock replies
- Settings page (components/settings): Polar-style tabs/sections, UI only
- Route-group app shell: app/(app)/{layout,page,settings}
- shadcn (Base UI) + ai-elements component libraries
- CLAUDE.md: architecture notes + per-folder commit policy
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3.8 KiB
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
@AGENTS.md
The import above is load-bearing: this is a customized Next.js 16 with breaking changes vs. public docs. Before writing any Next.js code (routing, metadata,
next/image,next/font, route handlers, config), read the relevant guide undernode_modules/next/dist/docs/01-app/.
What this is
temetro — an open-source AI chat that lets clinicians retrieve patient information in natural
language. The product surface is currently UI-only: the chat appends a mock assistant reply
(components/chat/chat-panel.tsx); there is no backend, model call, or patient data yet.
Commands
npm run dev # Next dev server (Turbopack) on http://localhost:3000
npm run build # production build (runs a full TypeScript typecheck — see caveat below)
npm run start # serve the production build
npm run lint # eslint (eslint-config-next: core-web-vitals + typescript)
There is no test runner configured (no test script, no vitest/jest/playwright). Don't invent
test commands; verify changes by running the dev server.
Version control: this folder is its own git repo. Commit after every change
(git -C . add -A && git commit), with the Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
trailer. See the root ../CLAUDE.md for the project-wide per-folder commit policy.
Architecture
- Stack: Next.js 16.2.6 (App Router) · React 19 · TypeScript · Tailwind CSS v4. Path alias
@/*→ repo root (tsconfig.json).cn()(clsx + tailwind-merge) lives inlib/utils.ts. app/— App Router.app/page.tsxis the product chat page (sidebar + chat panel);app/layout.tsxforces dark mode by puttingdarkon<html>and loads the fonts.components/ui/— shadcn components, but built on Base UI (@base-ui/react), not Radix. APIs differ: composition uses therenderprop anduseRender/mergeProps, notasChild. Match existing files when adding/editing primitives. Config incomponents.json(stylebase-luma, baseColorneutral).components/ai-elements/— a large AI-chat primitive library (PromptInput,Conversation,Message,Suggestion, etc.) typed against AI SDK v6 (aipackage:UIMessage,ChatStatus,FileUIPart). Note:@ai-sdk/react(useChat) is not installed — chat state is managed with local React state.components/sidebar-02/— the dashboard sidebar (SidebarProvider/Sidebar/SidebarInsetfromcomponents/ui/sidebar.tsx).app-sidebar.tsxholds the nav/teams config.components/chat/— the product chat UI.chat-panel.tsxowns message state + empty/active layouts;chat-input.tsxis a bespoke (non–ai-elements) input matching a specific design.
Theming
Tailwind v4 with @theme inline and oklch CSS variables in app/globals.css (a
Linear-inspired dark palette; --primary is indigo #5e6ad2). The app is dark-only. The radius
scale (rounded-2xl … rounded-4xl) is derived from --radius, so those utilities are larger than
stock Tailwind.
Gotchas
npm run buildcurrently fails its typecheck on a pre-existing error incomponents/ai-elements/attachments.tsx(openDelayprop).npm run dev(Turbopack) is unaffected because it only compiles the imported route and doesn't typecheck the whole tree.lucide-react@1.17dropped brand glyphs (e.g.Github,Discord) — import them and you get a build error. Use inline SVGs instead.- A sibling
../landing-page/directory is a copy of this app with a marketing landing page (components/landing/); it is a separate project, not part of this git repo. - Multiple lockfiles in the tree produce a harmless Turbopack "inferred workspace root" warning.