@ampath/esm-dha-workflow-app 4.0.0-next.43 → 4.0.0-next.445

package/src/telemedicine/telemedicine.component.tsx

@@ -0,0 +1,310 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
+import { DocumentBlank, ErrorFilled, Renew } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { fetchTelemedicineSession, getPractitionerNationalId } from './telemedicine.resource';
+import styles from './telemedicine.scss';
+
+/**
+ * Telemedicine session machine and chrome, shared by both telemedicine entry
+ * points:
+ *
+ *   - the home-page dashboard (`Telemedicine` below) mints a session for the
+ *     logged-in practitioner and leaves patient selection to the telemedicine
+ *     app;
+ *   - the patient-chart tab (`telemedicine-patient-chart.component.tsx`) mints
+ *     a patient-scoped session, passing the doctor's and the patient's
+ *     national IDs plus the visit's consent token when there is one.
+ *
+ * Both render the partner system in an iframe — the biometrics modal's
+ * structure with none of its device handshake: the SSO URL is minted
+ * backend-side (the broker route resolves the external credentials from the
+ * session facility and calls the partner SSO endpoint), and the URL it returns
+ * is self-contained, so the iframe needs no postMessage and the app polls
+ * nothing.
+ *
+ *   mount → (national ID lookups)          → no-national-id
+ *         → (SSO broker call)              → in-session | error
+ *
+ * The minted token is short-lived (Livia's is 600 s), so the header carries a
+ * Reconnect action that mints a fresh session; an in-flight reconnect keeps the
+ * current iframe mounted until the new URL arrives, so a live consult is never
+ * blanked by a slow broker call.
+ */
+
+type Phase = 'connecting' | 'in-session' | 'error' | 'no-national-id';
+
+/** Whose national ID was missing, when that is why no session could be minted. */
+type NoNationalIdScope = 'provider' | 'patient';
+
+/**
+ * What a starter resolves with: a minted session, or the national ID that
+ * blocked minting one. The hook owns every other transition.
+ */
+export type TelemedicineStartResult =
+  | { phase: 'in-session'; redirectUrl: string; expiresIn: number }
+  | { phase: 'no-national-id'; scope: NoNationalIdScope };
+
+export interface TelemedicineSessionState {
+  phase: Phase;
+  redirectUrl: string;
+  expiresIn: number;
+  /** Bumped per minted session so the iframe remounts clean rather than navigating. */
+  sessionKey: number;
+  noNationalIdScope: NoNationalIdScope;
+  errorDetail: string;
+  /** Remints the session — the Reconnect / Retry action. */
+  reconnect: () => void;
+}
+
+/**
+ * The session state machine. `start` mints a session (and must be memoized by
+ * the caller — the effect re-mints whenever its identity changes, which is also
+ * how a changed facility or patient restarts the flow). `enabled` gates the
+ * first mint so wrappers whose guards (no patient, no location, …) render a
+ * status card never fire the broker call behind them.
+ */
+export function useTelemedicineSession(
+  start: () => Promise<TelemedicineStartResult>,
+  enabled: boolean = true,
+): TelemedicineSessionState {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<Phase>('connecting');
+  const [redirectUrl, setRedirectUrl] = useState('');
+  const [expiresIn, setExpiresIn] = useState(0);
+  const [sessionKey, setSessionKey] = useState(0);
+  const [noNationalIdScope, setNoNationalIdScope] = useState<NoNationalIdScope>('provider');
+  const [errorDetail, setErrorDetail] = useState('');
+  // Set on unmount so an in-flight broker call never settles a dead tab's state.
+  const cancelledRef = useRef(false);
+
+  useEffect(
+    () => () => {
+      cancelledRef.current = true;
+    },
+    [],
+  );
+
+  const run = useCallback(async () => {
+    if (!enabled) {
+      return;
+    }
+    setPhase('connecting');
+    setErrorDetail('');
+    try {
+      const result = await start();
+      if (cancelledRef.current) {
+        return;
+      }
+      if (result.phase === 'no-national-id') {
+        setNoNationalIdScope(result.scope);
+        setPhase('no-national-id');
+        return;
+      }
+      // openmrsFetch swallows a 2xx body it cannot JSON-parse, so a gateway's
+      // HTML fallback page (e.g. a request that never reached the broker)
+      // resolves with no data — fail loudly instead of showing an empty
+      // in-session tab.
+      if (!result.redirectUrl) {
+        setErrorDetail(t('telemedicineNoSessionUrl', 'The telemedicine service did not return a session link.'));
+        setPhase('error');
+        return;
+      }
+      setRedirectUrl(result.redirectUrl);
+      setExpiresIn(result.expiresIn);
+      // A new key forces a clean iframe per session rather than navigating the
+      // old one — the external app's own state starts from scratch.
+      setSessionKey((k) => k + 1);
+      setPhase('in-session');
+    } catch (err: any) {
+      if (cancelledRef.current) {
+        return;
+      }
+      setErrorDetail(err?.message ?? '');
+      setPhase('error');
+    }
+  }, [start, enabled, t]);
+
+  useEffect(() => {
+    void run();
+  }, [run]);
+
+  return { phase, redirectUrl, expiresIn, sessionKey, noNationalIdScope, errorDetail, reconnect: run };
+}
+
+/** The session chrome: header, iframe, and the centred status cards. */
+export const TelemedicineView: React.FC<{ session: TelemedicineSessionState }> = ({ session }) => {
+  const { t } = useTranslation();
+  const showIframe = (session.phase === 'in-session' || session.phase === 'connecting') && Boolean(session.redirectUrl);
+
+  return (
+    <div className={styles.container}>
+      {showIframe && (
+        <div className={styles.header}>
+          <div>
+            <h3 className={styles.title}>{t('telemedicine', 'Telemedicine')}</h3>
+            <p className={styles.provenance}>
+              {session.expiresIn > 0
+                ? t('telemedicineSessionExpires', 'Session link valid for {{minutes}} min', {
+                    minutes: Math.round(session.expiresIn / 60),
+                  })
+                : t('telemedicineSessionActive', 'Session active')}
+            </p>
+          </div>
+          <div className={styles.headerActions}>
+            <Button
+              kind="tertiary"
+              size="sm"
+              renderIcon={Renew}
+              onClick={() => void session.reconnect()}
+              disabled={session.phase === 'connecting'}
+            >
+              {session.phase === 'connecting'
+                ? t('telemedicineReconnecting', 'Reconnecting…')
+                : t('telemedicineReconnect', 'Reconnect')}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {showIframe && (
+        <div className={styles.iframeWrap}>
+          <iframe
+            key={session.sessionKey}
+            title={t('telemedicine', 'Telemedicine')}
+            src={session.redirectUrl}
+            className={styles.iframe}
+            // Without `allow` the browser silently denies camera/mic to the
+            // framed app — a video consult that can neither see nor hear.
+            allow="camera; microphone; display-capture; fullscreen"
+            allowFullScreen
+            referrerPolicy="strict-origin"
+          />
+        </div>
+      )}
+
+      {session.phase === 'connecting' && !showIframe && (
+        <div className={styles.statusView}>
+          <InlineLoading description={t('telemedicineStarting', 'Starting telemedicine session…')} />
+        </div>
+      )}
+
+      {session.phase === 'no-national-id' && (
+        <StatusCard
+          icon={<DocumentBlank size={32} className={styles.iconMuted} />}
+          title={
+            session.noNationalIdScope === 'patient'
+              ? t('telemedicinePatientNoNationalId', 'No national ID on the patient’s record')
+              : t('telemedicineNoNationalId', 'No national ID on your provider account')
+          }
+          text={
+            session.noNationalIdScope === 'patient'
+              ? t(
+                  'telemedicinePatientNoNationalIdDetail',
+                  'This patient has no national ID recorded, so a patient telemedicine session cannot be started. Capture their national ID first.',
+                )
+              : t(
+                  'telemedicineNoNationalIdDetail',
+                  'A national ID must be recorded on your provider account before a telemedicine session can be started. Ask an administrator to add it.',
+                )
+          }
+        />
+      )}
+
+      {session.phase === 'error' && (
+        <StatusCard
+          icon={<ErrorFilled size={32} className={styles.iconDanger} />}
+          title={t('telemedicineStartFailed', "Couldn't start the telemedicine session")}
+          text={
+            session.errorDetail ||
+            t(
+              'telemedicineStartFailedDetail',
+              'The telemedicine service may be unreachable from this facility. Try again.',
+            )
+          }
+          actions={
+            <Button kind="primary" size="md" onClick={() => void session.reconnect()}>
+              {t('retry', 'Retry')}
+            </Button>
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+/** Shared centred layout for the connecting / no-ID / error states. */
+export const StatusCard: React.FC<{
+  icon: React.ReactNode;
+  title: string;
+  text?: string;
+  actions?: React.ReactNode;
+}> = ({ icon, title, text, actions }) => (
+  <div className={styles.statusView}>
+    {icon}
+    <h4 className={styles.statusTitle}>{title}</h4>
+    {text && <p className={styles.statusText}>{text}</p>}
+    {actions && <div className={styles.statusActions}>{actions}</div>}
+  </div>
+);
+
+/**
+ * The home-page dashboard: mints the logged-in practitioner's session — the
+ * SSO keys on their national ID, and patient selection happens inside the
+ * telemedicine app.
+ */
+const Telemedicine: React.FC = () => {
+  const { t } = useTranslation();
+  const session = useSession();
+
+  const locationUuid = session?.sessionLocation?.uuid ?? '';
+  const providerUuid = session?.currentProvider?.uuid ?? '';
+
+  const start = useCallback(async (): Promise<TelemedicineStartResult> => {
+    const nationalId = await getPractitionerNationalId(providerUuid);
+    if (!nationalId) {
+      return { phase: 'no-national-id', scope: 'provider' };
+    }
+    const sso = await fetchTelemedicineSession({ nationalId, locationUuid });
+    return { phase: 'in-session', redirectUrl: sso?.redirect_url ?? '', expiresIn: sso?.expires_in ?? 0 };
+  }, [locationUuid, providerUuid]);
+
+  const telemedicine = useTelemedicineSession(start, Boolean(locationUuid && providerUuid));
+
+  if (!locationUuid) {
+    return (
+      <div className={styles.container}>
+        <StatusCard
+          icon={<DocumentBlank size={32} className={styles.iconMuted} />}
+          title={t('noLoginLocation', 'No login location selected')}
+          text={t(
+            'telemedicineNeedsLocation',
+            'A telemedicine session must be scoped to a facility. Log in with a facility location and try again.',
+          )}
+        />
+      </div>
+    );
+  }
+
+  // The SSO mints the practitioner's session, so without a provider identity
+  // there is nothing to authenticate as.
+  if (!providerUuid) {
+    return (
+      <div className={styles.container}>
+        <StatusCard
+          icon={<DocumentBlank size={32} className={styles.iconMuted} />}
+          title={t('telemedicineNoProvider', "Couldn't identify the logged-in provider")}
+          text={t(
+            'telemedicineNoProviderDetail',
+            'Your session has no provider attached, so a telemedicine session cannot be started. Log in with a provider account.',
+          )}
+        />
+      </div>
+    );
+  }
+
+  return <TelemedicineView session={telemedicine} />;
+};
+
+export default Telemedicine;

package/src/telemedicine/telemedicine.resource.test.ts

@@ -0,0 +1,171 @@
+/**
+ * Tests for the telemedicine resource layer: the practitioner national-ID
+ * lookup and the SSO broker call. The broker endpoint
+ * (`POST {hieBaseUrl}/telemedicine/sso/token`) is the contract with the HIE
+ * middleware — credentials and facility resolution live backend-side, and the
+ * `national_id` Livia keys on is the **practitioner's** (the minted session is
+ * the health worker's), so all the frontend can get wrong is the lookup source,
+ * the payload and the error normalization, which is exactly what these pin
+ * down.
+ *
+ * `../shared/utils/get-base-url` and `@openmrs/esm-framework` are mocked
+ * directly, following `shr.resource.test.ts`, to avoid the heavy OpenMRS module
+ * graph; `normalizeError` is borrowed from the SHR resource, so its mapping of
+ * `openmrsFetch` failures carries over.
+ */
+jest.mock('../shared/utils/get-base-url', () => ({
+  getHieBaseUrl: jest.fn(),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  openmrsFetch: jest.fn(),
+  restBaseUrl: '/ws/rest/v1',
+}));
+
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getHieBaseUrl } from '../shared/utils/get-base-url';
+import {
+  fetchPatientTelemedicineSession,
+  fetchTelemedicineSession,
+  getPractitionerNationalId,
+} from './telemedicine.resource';
+
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockGetHieBaseUrl = jest.mocked(getHieBaseUrl);
+
+const BASE_URL = 'http://localhost:3000';
+const PROVIDER_UUID = 'e2bfaf3b-9bcb-4a20-9e9e-8db9dabc8f4e';
+const LOCATION_UUID = '18c343eb-b353-462a-9139-b16606e6b6c2';
+
+beforeEach(() => {
+  jest.resetAllMocks();
+  mockGetHieBaseUrl.mockResolvedValue(BASE_URL);
+});
+
+describe('getPractitionerNationalId', () => {
+  it('reads the national ID off the provider attributes', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: {
+        uuid: PROVIDER_UUID,
+        display: 'Jane Doe',
+        attributes: [
+          { uuid: 'attr-1', value: 'something-else', voided: false, attributeType: { uuid: 'other-type' } },
+          {
+            uuid: 'attr-2',
+            value: '10000000003',
+            voided: false,
+            attributeType: { uuid: '4550df92-c684-4597-8ab8-d6b10eabdcfb' },
+          },
+        ],
+      },
+    } as any);
+
+    await expect(getPractitionerNationalId(PROVIDER_UUID)).resolves.toBe('10000000003');
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(
+      `/ws/rest/v1/provider/${PROVIDER_UUID}?v=custom:(uuid,display,attributes:(uuid,value,voided,attributeType:(uuid)))`,
+      { method: 'GET' },
+    );
+  });
+
+  it('ignores voided national-ID attributes and returns an empty string when none survive', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: {
+        uuid: PROVIDER_UUID,
+        attributes: [
+          {
+            uuid: 'attr-2',
+            value: '10000000003',
+            voided: true,
+            attributeType: { uuid: '4550df92-c684-4597-8ab8-d6b10eabdcfb' },
+          },
+        ],
+      },
+    } as any);
+
+    await expect(getPractitionerNationalId(PROVIDER_UUID)).resolves.toBe('');
+  });
+
+  it('short-circuits to an empty string without a provider uuid', async () => {
+    await expect(getPractitionerNationalId('')).resolves.toBe('');
+    expect(mockOpenmrsFetch).not.toHaveBeenCalled();
+  });
+});
+
+describe('fetchTelemedicineSession', () => {
+  it('POSTs the practitioner national ID and location to the broker path and returns the SSO payload', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: { expires_in: 600, redirect_url: 'https://md-uat.liviaapp.net/#/sso?token=t0k3n' },
+    } as any);
+
+    const session = await fetchTelemedicineSession({
+      nationalId: '10000000003',
+      locationUuid: LOCATION_UUID,
+    });
+
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(`${BASE_URL}/telemedicine/sso/token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: { nationalId: '10000000003', locationUuid: LOCATION_UUID },
+    });
+    expect(session.redirect_url).toBe('https://md-uat.liviaapp.net/#/sso?token=t0k3n');
+    expect(session.expires_in).toBe(600);
+  });
+
+  it('throws the normalized backend error message when the broker fails', async () => {
+    mockOpenmrsFetch.mockRejectedValueOnce({
+      response: { status: 502 },
+      message: 'Http failure',
+      responseBody: { message: 'No telemedicine facility is configured for this location.' },
+    });
+
+    await expect(
+      fetchTelemedicineSession({ nationalId: '10000000003', locationUuid: LOCATION_UUID }),
+    ).rejects.toMatchObject({
+      status: 502,
+      message: 'No telemedicine facility is configured for this location.',
+    });
+  });
+});
+
+describe('fetchPatientTelemedicineSession', () => {
+  it('POSTs both national IDs and the consent token to the patient broker path', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: { expires_in: 600, redirect_url: 'https://md-uat.liviaapp.net/#/sso?token=p4713n7' },
+    } as any);
+
+    const session = await fetchPatientTelemedicineSession({
+      doctorNationalId: '10000000003',
+      patientNationalId: '87654321',
+      locationUuid: LOCATION_UUID,
+      consentToken: 'abc123',
+    });
+
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(`${BASE_URL}/telemedicine/sso/patient-token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: {
+        doctorNationalId: '10000000003',
+        patientNationalId: '87654321',
+        locationUuid: LOCATION_UUID,
+        consentToken: 'abc123',
+      },
+    });
+    expect(session.redirect_url).toBe('https://md-uat.liviaapp.net/#/sso?token=p4713n7');
+  });
+
+  it('omits the consent token entirely when there is none', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: { expires_in: 600, redirect_url: 'https://md-uat.liviaapp.net/#/sso?token=p4713n7' },
+    } as any);
+
+    await fetchPatientTelemedicineSession({
+      doctorNationalId: '10000000003',
+      patientNationalId: '87654321',
+      locationUuid: LOCATION_UUID,
+    });
+
+    const body = mockOpenmrsFetch.mock.calls[0][1]?.body as Record<string, unknown>;
+    // undefined drops out of the JSON body — the broker must not see an empty token.
+    expect(JSON.parse(JSON.stringify(body))).not.toHaveProperty('consentToken');
+  });
+});

package/src/telemedicine/telemedicine.resource.ts

@@ -0,0 +1,125 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { getHieBaseUrl } from '../shared/utils/get-base-url';
+import { IdentifierTypesUuids } from '../resources/identifier-types';
+import { normalizeError } from '../shr/shr.resource';
+
+/**
+ * Telemedicine data source — the Livia video-consult integration.
+ *
+ * The SSO URL is brokered, never minted in the browser: credentials for the
+ * external system (Livia `POST /api/partner/sso/token`, which wants
+ * `username`/`password` headers and a `facility_code`/`national_id` body) live
+ * backend-side in the HIE middleware, resolved per session location — the same
+ * shape as the biometrics flow (`/client/biometrics-authorize` mints the iframe
+ * URL) and the Superset guest-token broker (`${etlBaseUrl}/superset-token`).
+ * Browsers can neither hold those credentials nor rely on the gateway CSP
+ * allowing `connect-src` to `api.liviaapp.net`.
+ */
+
+const TELEMEDICINE_SSO_PATH = '/telemedicine/sso/token';
+const TELEMEDICINE_PATIENT_SSO_PATH = '/telemedicine/sso/patient-token';
+
+/** Body for `POST {hieBaseUrl}/telemedicine/sso/token`. */
+export interface TelemedicineSessionRequest {
+  /**
+   * The **practitioner's** national ID — the identity Livia's SSO keys on. The
+   * session minted is the health worker's; patient selection happens inside the
+   * telemedicine app, not in this request.
+   */
+  nationalId: string;
+  /** Session facility — how the backend picks the Livia credentials/facility code. */
+  locationUuid: string;
+}
+
+/**
+ * Livia's SSO answer, passed through verbatim from the broker route (snake_case
+ * like the other DHA passthrough endpoints). `expires_in` is seconds — 600 in
+ * the documented flow — after which the `redirect_url` must be minted again.
+ */
+export interface TelemedicineSession {
+  expires_in: number;
+  redirect_url: string;
+}
+
+/**
+ * The logged-in practitioner's national ID, read off their OpenMRS provider
+ * attributes — attribute type `PROVIDER_NATIONAL_ID_UUID` ("National ID card"),
+ * the same source the preauth flows read doctor IDs from. Returns an empty
+ * string when the provider has none; the caller treats that as "cannot start a
+ * telemedicine session" rather than sending an empty national_id.
+ */
+export async function getPractitionerNationalId(providerUuid: string): Promise<string> {
+  if (!providerUuid) {
+    return '';
+  }
+  try {
+    const response = await openmrsFetch<{
+      attributes?: Array<{ value?: string; voided?: boolean; attributeType?: { uuid?: string } }>;
+    }>(
+      `${restBaseUrl}/provider/${encodeURIComponent(providerUuid)}?v=custom:(uuid,display,attributes:(uuid,value,voided,attributeType:(uuid)))`,
+      { method: 'GET' },
+    );
+    const hit = (response?.data?.attributes ?? []).find(
+      (a) => !a.voided && a.attributeType?.uuid === IdentifierTypesUuids.PROVIDER_NATIONAL_ID_UUID && a.value,
+    );
+    return hit?.value ? String(hit.value).trim() : '';
+  } catch (err) {
+    throw normalizeError(err);
+  }
+}
+
+/**
+ * Ask the HIE middleware to mint a Livia SSO session for this practitioner at
+ * this facility, and answer with the URL to iframe. The token inside the URL is
+ * short-lived (`expires_in`, seconds) — callers must re-mint rather than cache.
+ */
+export async function fetchTelemedicineSession(payload: TelemedicineSessionRequest): Promise<TelemedicineSession> {
+  try {
+    const hieBaseUrl = await getHieBaseUrl();
+    const response = await openmrsFetch<TelemedicineSession>(`${hieBaseUrl}${TELEMEDICINE_SSO_PATH}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: payload,
+    });
+    return response?.data;
+  } catch (err) {
+    throw normalizeError(err);
+  }
+}
+
+/** Body for `POST {hieBaseUrl}/telemedicine/sso/patient-token`. */
+export interface PatientTelemedicineSessionRequest {
+  /** The consulting practitioner's national ID — the same identity the practitioner flow keys on. */
+  doctorNationalId: string;
+  /** The patient's national ID — identifies who the consult session is for. */
+  patientNationalId: string;
+  /** Session facility — how the backend picks the Livia credentials/facility code. */
+  locationUuid: string;
+  /**
+   * The visit's claim consent token, when there is one — Livia ties the
+   * patient's session to the consent they gave for this visit. Optional:
+   * callers without a claim visit simply omit it.
+   */
+  consentToken?: string;
+}
+
+/**
+ * Ask the HIE middleware to mint a patient-scoped Livia SSO session — the
+ * patient-chart variant of {@link fetchTelemedicineSession}. Same answer
+ * shape (`{expires_in, redirect_url}`), same short-lived token rules.
+ */
+export async function fetchPatientTelemedicineSession(
+  payload: PatientTelemedicineSessionRequest,
+): Promise<TelemedicineSession> {
+  try {
+    const hieBaseUrl = await getHieBaseUrl();
+    const response = await openmrsFetch<TelemedicineSession>(`${hieBaseUrl}${TELEMEDICINE_PATIENT_SSO_PATH}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: payload,
+    });
+    return response?.data;
+  } catch (err) {
+    throw normalizeError(err);
+  }
+}

package/src/telemedicine/telemedicine.scss

@@ -0,0 +1,91 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  min-width: 0;
+  background-color: colors.$gray-10;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-05 layout.$spacing-05 0;
+  min-width: 0;
+}
+
+.title {
+  @include type.type-style('heading-04');
+  margin: 0;
+}
+
+.provenance {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  margin: layout.$spacing-02 0 0;
+}
+
+.headerActions {
+  display: flex;
+  gap: layout.$spacing-03;
+  flex-shrink: 0;
+}
+
+.iframeWrap {
+  padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-05;
+  min-width: 0;
+}
+
+// The consult fills the rest of the tab: the biometric modal caps its iframe at
+// a fixed 700px inside a drawer, but a full patient-chart tab can afford the
+// viewport height.
+.iframe {
+  display: block;
+  width: 100%;
+  height: calc(100vh - 13rem);
+  min-height: 30rem;
+  border: none;
+  background-color: colors.$gray-20;
+}
+
+.statusView {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-09 layout.$spacing-05;
+  min-width: 0;
+}
+
+.statusTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-100;
+  margin: layout.$spacing-03 0 0;
+}
+
+.statusText {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  margin: 0;
+  max-width: 26rem;
+}
+
+.statusActions {
+  display: flex;
+  gap: layout.$spacing-03;
+  margin-top: layout.$spacing-03;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.iconMuted {
+  color: colors.$gray-70;
+}
+
+.iconDanger {
+  color: colors.$red-60;
+}