<bio-health-metrics>

A self-contained health metrics widget that manages OAuth provider connections (starting with Fitbit) and displays synced metrics — steps, sleep, heart rate/HRV, stress, active minutes, and calories.

<bio-health-metrics></bio-health-metrics>

How It Works

When <bio-health-metrics> receives context from a parent <bio-provider>:

1. Resolves provider list — in profile-driven mode, reads enabled health providers from the episode profile's spec.sdk.healthMetrics section; in static mode, uses the providers attribute
2. Shows connection state — for each provider, displays a "Connect" button (disconnected) or the provider name with a status badge (connected)
3. Handles OAuth — clicking "Connect" initiates the OAuth flow for that provider; on success, stores the connection and emits anybio:health:connected
4. Fetches metrics — once connected, pulls the latest metrics for the requested date and renders metric cards for steps, sleep, heart rate/HRV, stress, active minutes, and calories
5. Supports refresh — a refresh button re-fetches metrics from the provider and emits anybio:health:refreshed
6. Supports disconnect — an "Unlink" action removes the provider connection and emits anybio:health:disconnected

Modes

Profile-Driven Mode

Omit all attributes. The widget reads its configuration from the episode profile's spec.sdk.healthMetrics section:

<bio-health-metrics></bio-health-metrics>

The profile defines:

• providers — array of enabled provider slugs (e.g., ["fitbit"])
• metrics — array of metric keys to display (e.g., ["steps", "sleep", "heartRate"])
• compact — whether to use the compact layout

Static Mode

Pass configuration directly:

<bio-health-metrics
  providers='["fitbit"]'
  metrics='["steps","sleep","heartRate","hrv"]'
  date="2025-06-15"
  episode-id="ep_abc123">
</bio-health-metrics>

Attributes

Events

CSS Classes

The widget renders with semantic CSS classes for styling. No Shadow DOM — standard CSS selectors work.

Layout

Provider Connection

Metrics Grid

States

Code Examples

Profile-Driven

<bio-provider
  api-key="org_your_key"
  project-key="proj_your_key"
  xuser-id="user-123">

  <h3>Your Health Metrics</h3>
  <bio-health-metrics></bio-health-metrics>

</bio-provider>

With Event Handling

<bio-health-metrics id="hm"></bio-health-metrics>

<script>
  document.addEventListener('anybio:health:connected', (e) => {
    const { provider, providerUserId } = e.detail;
    console.log(`Connected to ${provider} (${providerUserId})`);
    showToast(`${provider} connected!`);
  });

  document.addEventListener('anybio:health:refreshed', (e) => {
    const { provider, date, metrics } = e.detail;
    console.log(`Refreshed ${provider} metrics for ${date}:`, metrics);
  });

  document.addEventListener('anybio:health:error', (e) => {
    const { error, action } = e.detail;
    console.error(`Health metrics ${action} failed:`, error);
    showToast(`Error: ${error}`, 'error');
  });
</script>

Custom Styling

/* Match your app's design system */
bio-health-metrics {
  --bio-primary: #1a73e8;
  --bio-surface: #ffffff;
  --bio-radius: 12px;
}

/* Style the metric cards */
.bio-hm-card {
  border: 1px solid var(--bio-border);
  border-radius: var(--bio-radius);
  padding: 16px;
}

/* Custom connect button */
.bio-hm-connect-btn {
  background: var(--bio-primary);
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
}

Compact Mode

<bio-health-metrics
  compact
  metrics='["steps","sleep","heartRate","calories"]'>
</bio-health-metrics>

Compact mode renders a 4-metric grid without progress bars or breakdown details — useful for dashboard summaries or sidebar widgets.

Roadmap

• <bio-provider-link> standalone widget — Extract the provider connection UI into a reusable standalone component for use outside of <bio-health-metrics>.
• Additional providers — Garmin, Apple Health, Oura, Dexcom.
• Caregiver view — Read-only metrics display for caregiver-monitored patients.
• Weekly trend charts — Inline sparklines or bar charts showing 7-day trends per metric.