DClaw Med — Documentation

Everything you need to try the patient portal demo and understand how it’s built. This is an early build, documented honestly — see the feature matrix on the home page.

Getting started

The demo runs entirely in your browser and uses synthetic data only — there is no real personal health information anywhere in it.

Open the live demo → You’ll land on the Home dashboard as the demo patient, Arya Yadav, with a family member (Vihaan) available via the profile switcher.

User manual

The Home dashboard

Home answers “what do I need to know or do today?”. On a phone it’s a single priority stack; on a laptop it’s an asymmetric grid. Top to bottom by importance: attention alerts, the next appointment, today’s medication, the latest result, quick actions, a health overview, unread messages and a recent-activity timeline.

Reading a result

Results never appear as a bare number. Each shows its value, the reference range, a trend, and a status shown three ways at once — an icon, a word (e.g. “Slightly high”) and a direction arrow — so it can never be misread by colour alone.

Today’s medication

Doses due today appear on the dashboard. Tap Mark taken to log one; repeated taps are ignored, so a dose can never be double-logged.

Switching family profiles

Use the profile switcher (sidebar on desktop, “More” sheet on mobile) to view a dependent’s record. A banner stays visible the whole time — “Viewing health record for Vihaan Yadav” — so you always know whose record you’re in, and one tap switches back.

Booking, rescheduling and cancelling

Appointments → Book appointment walks through four steps: provider, visit type and time, reason, and review. Confirming twice still books once. On an upcoming visit, Reschedule keeps your current time until you confirm a new one, and Cancel appointment asks you to confirm first. Past visits can’t be changed.

Video visits

On the day of a video visit, Join video visit opens a device check (your real camera preview, if you allow it), then a waiting room, then the call, with mute, camera and speaker controls, and visit info and chat beside the video on a laptop. In this demo the clinician side is simulated and nothing is recorded or sent.

Messages

Start a conversation with New message, or reply in a thread. Replies are saved, and the clinic sends an automatic acknowledgement. On a laptop the conversation list stays beside the open thread.

Recording a reading

Health tracking → Add a reading records blood pressure, heart rate or weight. You see how the value will be interpreted before saving. A dangerous value (for example 185/122) shows an urgent safety message.

Health assistant

The first time you open it for a profile, the assistant asks your permission to read that record; you can stop sharing at any time. On a laptop it opens as a side panel from the header. It answers questions about this record only: results, appointments, medicines, readings and allergies. Each answer links its source. It gives emergency guidance for urgent symptoms and won’t diagnose or change medicines. In this demo it is rule-based and runs in your browser.

Records, notifications, family and profile

Download any record as a text file. Marking notifications as read clears the bell. Family lets you add or remove family members, view a child’s record and invite a caregiver. Profile holds your contact preferences, alert switches and theme, and Sign out (also in the profile menu) clears your data from the browser.

The clinician app

Open Demo guide → See the clinician’s side (or /clinician). You’re signed in as Dr. Sarah Smith (a demo picker; there’s no real sign-in). Today lists what needs attention and your schedule; Patients opens a chart with allergies pinned at the top; Inbox holds patient messages. Review a result with a note, reply to a message, or complete today’s visit — then switch back to the patient app to see the note, the reply and the visit summary in Arya’s record. Try recording a very high blood pressure as Arya and watch it appear at the top of the clinician’s triage list.

The demo guide

The Demo guide button (bottom-right) lists 14 things to try and ticks them off as you go. Reset demo data restores the original sample data.

Navigation

A day in the life

1. Arya opens DClaw Med and immediately sees an amber alert: a new HbA1c result needs attention.
2. Her next appointment — a video visit with Dr. Smith at 4:00 PM today — sits right below, with a Join action.
3. She marks her morning medication as taken; the row confirms and disappears.
4. She opens the latest result, reads “6.1% · slightly above range” with a plain-language explanation and a trend showing steady improvement.
5. Later, on her laptop, the same information is arranged as a calm multi-region dashboard — nothing missing, nothing duplicated.

Technical architecture

One codebase, one design system, one data model, responsive components — built so a clinician application can later reuse the same backend and design system.

The UI talks only to the HealthcareApi interface. The same rules run in the browser (offline mock, for development and tests) or on the server against PostgreSQL — switched by one setting, with no change to any screen. Your changes persist across visits; Profile → Continue on another device opens the same demo account on your phone.

API reference

The client contract every surface uses (excerpt). The mock implementation adds artificial latency and an injectable failure rate so loading and error states are real.

interface HealthcareApi {
  getPatients(): Promise<Patient[]>
  getDashboard(patientId: string): Promise<DashboardSummary>
  getAppointments(patientId: string): Promise<Appointment[]>
  getMedications(patientId: string): Promise<Medication[]>
  getDosesToday(patientId: string): Promise<MedicationDose[]>
  setDoseTaken(doseId: string, taken: boolean): Promise<MedicationDose>
  getLabResults(patientId: string): Promise<LabResult[]>
  getHealthMetrics(patientId: string): Promise<HealthMetric[]>
  getConversations(patientId: string): Promise<Conversation[]>
  // …records, conditions, allergies, care team
}

Core domain shapes are plain, JSON-serializable TypeScript (dates as ISO strings) so the exact same objects travel over the wire and render on any device — the single source of truth shared with the future clinician app.

type ClinicalStatus =
  "normal" | "low" | "elevated" | "high" | "critical" | "info"

interface LabResult {
  id: string; name: string; category: string
  status: ClinicalStatus
  primaryObservation: Observation      // value, unit, referenceRange
  history: TrendPoint[]                // for the trend chart
  interpretation?: string             // plain-language explanation
}

Troubleshooting

Synthetic data only · no real personal health information · early build, documented honestly.