Build a mobile app

# from the repo root
bun create expo@latest apps/mobile --template default
# add "apps/*" to root package.json workspaces
# add @amy/sdk + @amy/contracts as workspace:* deps in apps/mobile/package.json
bun install
cd apps/mobile && bun start

┌─────────────────────────┐    Tab 1 — Today
│  Today                  │
│                         │    Big serif title. Below it, a quiet,
│  You slept 7h 38m.      │    journal-style paragraph from
│  Recovery is 71.        │    amy.data.sync(): the things Amy
│  Restful, but you've    │    would mention if you asked. No
│  been here before.      │    sparklines, no rings, no leaderboard.
│                         │    Just words on paper-warm linen.
│  [ Ask Amy → ]          │
│                         │
│                         │
│  ────────────────────   │    Thin rules instead of borders.
└─────────────────────────┘
   Today  Ask  Trends  You      Native iOS tabs (UITabBar).

┌─────────────────────────┐    Tab 2 — Ask
│  Ask Amy           ⌘    │
│                         │    The heart of the app. Amy's bubbles
│        How is my HRV    │    are journal-like: serif heading,
│        trending?        │    petrol-blue rule, body text. Your
│                         │    messages are right-aligned, no
│  Your 30-day average    │    chrome, just text.
│  is up 4.2 ms from      │
│  the prior month…       │    While Amy thinks, phase events fade
│                         │    in: "Routing → Data Science →
│  ────────────────────   │    Validator". No spinner. No typing
│  [ ▌ Ask something ]    │    dots. The CLI's feel, in a phone.
└─────────────────────────┘
   Today  Ask  Trends  You

┌─────────────────────────┐    Tab 3 — Trends
│  Trends                 │
│                         │    A scroll of past turns, newest
│  Today  ·  $0.13  · 2m  │    first. Preview of the question;
│  How is my HRV…         │    cost and duration on the side.
│                         │    Tap one to re-read the answer.
│  Yesterday · $0.09 · 1m │
│  What does my…          │
└─────────────────────────┘
   Today  Ask  Trends  You

┌─────────────────────────┐    Tab 4 — You
│  You                    │
│                         │    Profile, sources, labs, sign-out.
│  ●● Yatendra Kumar      │    Clerk's <UserButton /> from
│     yatendra@…          │    @clerk/expo/native gives you the
│                         │    avatar + menu for free.
│  Wearables              │
│   WHOOP   ●  connected  │
│   [ + Connect another ] │
│                         │
│  Labs                   │
│   2 reports parsed      │
│   [ + Upload a report ] │
│                         │
│  [ Sign out ]           │
└─────────────────────────┘
   Today  Ask  Trends  You

bun --version       # ≥ 1.0
xcrun --version     # any
eas --version       # ≥ 14.0

{
  "workspaces": ["packages/*", "cloud"]
}

{
  "workspaces": ["packages/*", "cloud", "apps/*"]
}

bun create expo@latest apps/mobile --template default

amy_health_assistant/
├── apps/
│   └── mobile/
│       ├── app/
│       │   ├── _layout.tsx
│       │   ├── (tabs)/
│       │   │   ├── _layout.tsx
│       │   │   ├── index.tsx
│       │   │   └── explore.tsx
│       │   └── +not-found.tsx
│       ├── assets/
│       ├── components/
│       ├── constants/
│       ├── package.json
│       ├── tsconfig.json
│       └── app.json
├── packages/
│   ├── contracts/
│   └── sdk-ts/        # @amy/sdk
├── cloud/
└── package.json       # ← workspaces now includes apps/*

cd apps/mobile
rm -rf app/explore.tsx components/HelloWave* components/Parallax* components/ThemedText.tsx components/ThemedView.tsx constants
rm -rf assets/images/{partial-react-logo.png,react-logo*}

{
  "name": "amy-mobile",
  "version": "0.1.0",
  "private": true,
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "ios": "expo run:ios",
    "android": "expo run:android",
    "typecheck": "tsc --noEmit",
    "lint": "expo lint"
  },
  "dependencies": {
    "@amy/contracts": "workspace:*",
    "@amy/sdk": "workspace:*",
    "expo": "~56.0.0",
    "expo-router": "~6.0.0",
    "react": "19.2.0",
    "react-native": "0.85.0"
  },
  "devDependencies": {
    "@types/react": "~19.2.0",
    "typescript": "~5.7.0"
  }
}

bun install
cd apps/mobile && bunx expo install --check

// apps/mobile/metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const path = require("node:path");

const projectRoot = __dirname;
const monorepoRoot = path.resolve(projectRoot, "../..");

const config = getDefaultConfig(projectRoot);

// 1. Watch the whole monorepo so changes to @amy/sdk hot-reload.
config.watchFolders = [monorepoRoot];

// 2. Let Metro resolve packages from both app-level and root node_modules.
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, "node_modules"),
  path.resolve(monorepoRoot, "node_modules"),
];

// 3. Force a single copy of React/RN even if a workspace package
//    has its own.
config.resolver.disableHierarchicalLookup = true;

// 4. Bun's workspaces use symlinks. Metro needs this enabled to
//    follow them when resolving @amy/sdk → packages/sdk-ts/.
config.resolver.unstable_enableSymlinks = true;

module.exports = config;

cd apps/mobile
bun start

cd apps/mobile
bun add nativewind react-native-css-interop
bun add -d tailwindcss@^3.4 prettier-plugin-tailwindcss

bunx expo install react-native-reanimated react-native-gesture-handler

import type { Config } from "tailwindcss";

export default {
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        // Petrol blue — same scale as docs.heyamy.xyz. Hex
        // approximations of the docs-site oklch tokens, because
        // RN's color parser doesn't speak oklch reliably yet.
        petrol: {
          50:  "#f1f6fa",
          100: "#e0ecf4",
          200: "#c2d8e7",
          300: "#9bbed4",
          400: "#5b85b3",
          500: "#3f6f9a",
          600: "#2c5878",
          700: "#1c3f5a",
          800: "#152e44",
          900: "#0e2030",
        },
        // Ink — neutrals warm enough to read like paper, cold
        // enough to stay legible at 100% saturation in code.
        ink: {
          50:  "#fafaf8",
          100: "#f1f1ed",
          200: "#e5e5df",
          300: "#cfcfc6",
          400: "#a5a59a",
          500: "#76766c",
          600: "#5c5c52",
          700: "#3c3c34",
          800: "#222220",
          900: "#16161a",
          950: "#0c0c0f",
        },
        // The canvas. Slightly warm linen.
        paper: {
          DEFAULT: "#f7f4ef",
          dark:    "#15161a",
        },
      },
      fontFamily: {
        sans:  ["Inter"],
        serif: ["SourceSerif4", "Georgia", "serif"],
        mono:  ["IBMPlexMono", "monospace"],
      },
      fontSize: {
        // A small set, intentionally. The journal voice needs few
        // sizes; too many sizes is the dashboard smell.
        "xs":   ["12px", { lineHeight: "16px" }],
        "sm":   ["14px", { lineHeight: "20px" }],
        "base": ["16px", { lineHeight: "24px" }],
        "lg":   ["18px", { lineHeight: "28px" }],
        "xl":   ["22px", { lineHeight: "32px" }],
        "2xl":  ["28px", { lineHeight: "36px" }],
        "3xl":  ["34px", { lineHeight: "42px" }],
      },
    },
  },
  plugins: [],
} satisfies Config;

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Light theme — paper. */
  :root {
    --color-bg:           245 244 239;   /* paper             */
    --color-fg:           22  22  26;    /* ink-900           */
    --color-fg-muted:     118 118 108;   /* ink-500           */
    --color-rule:         229 229 223;   /* ink-200           */
    --color-accent:       44  88  120;   /* petrol-600        */
    --color-accent-soft:  224 236 244;   /* petrol-100        */
    --color-amy-bubble:   253 251 246;
    --color-user-bubble:  44  88  120;
  }

  /* Dark theme — late evening. */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg:           21  22  26;
      --color-fg:           241 241 237;
      --color-fg-muted:     165 165 154;
      --color-rule:         60  60  52;
      --color-accent:       155 190 212;   /* petrol-300      */
      --color-accent-soft:  28  63  90;    /* petrol-700      */
      --color-amy-bubble:   34  34  32;
      --color-user-bubble:  155 190 212;
    }
  }
}

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      // Must be the LAST plugin.
      "react-native-reanimated/plugin",
    ],
  };
};

// apps/mobile/metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
const path = require("node:path");

const projectRoot = __dirname;
const monorepoRoot = path.resolve(projectRoot, "../..");

const config = getDefaultConfig(projectRoot);

config.watchFolders = [monorepoRoot];
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, "node_modules"),
  path.resolve(monorepoRoot, "node_modules"),
];
config.resolver.disableHierarchicalLookup = true;

module.exports = withNativeWind(config, { input: "./global.css" });

/// <reference types="nativewind/types" />

bunx expo install expo-font @expo-google-fonts/inter @expo-google-fonts/source-serif-4 expo-splash-screen

import { View, Text } from "react-native";

export default function Home() {
  return (
    <View className="flex-1 items-center justify-center bg-paper">
      <Text className="font-serif text-3xl text-ink-900">Hello, Amy.</Text>
      <Text className="mt-2 text-base text-ink-500">
        Words first. Paper warm. Petrol blue.
      </Text>
    </View>
  );
}

cd apps/mobile
bunx expo install @clerk/expo expo-secure-store

# Clerk publishable key from your dev project at https://dashboard.clerk.com.
# Must come from the same Clerk instance as the backend's CLERK_SECRET_KEY
# — otherwise the backend verifies your tokens against the wrong JWKS and
# every request returns 401 invalid_token.
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_…

# Production Amy backend.
EXPO_PUBLIC_AMY_BASE_URL=https://amy.heyamy.xyz

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
EXPO_PUBLIC_AMY_BASE_URL=https://amy.heyamy.xyz

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoadsInWebContent": true,
          "NSExceptionDomains": {
            "192.168.1.42": { "NSExceptionAllowsInsecureHTTPLoads": true }
          }
        }
      }
    }
  }
}

// apps/mobile/app/_layout.tsx
import "../global.css";

import { useEffect } from "react";
import { useFonts } from "expo-font";
import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold } from "@expo-google-fonts/inter";
import { SourceSerif4_400Regular, SourceSerif4_600SemiBold } from "@expo-google-fonts/source-serif-4";
import * as SplashScreen from "expo-splash-screen";
import { Slot } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";

import { ClerkProvider } from "@clerk/expo";
import { tokenCache } from "@clerk/expo/token-cache";

import { QueryProvider } from "@/lib/query";

SplashScreen.preventAutoHideAsync();

const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
if (!publishableKey) {
  throw new Error(
    "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is missing from .env. " +
      "Copy it from your Clerk dashboard at https://dashboard.clerk.com.",
  );
}

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    Inter: Inter_400Regular,
    InterMedium: Inter_500Medium,
    InterSemiBold: Inter_600SemiBold,
    SourceSerif4: SourceSerif4_400Regular,
    SourceSerif4SemiBold: SourceSerif4_600SemiBold,
  });

  useEffect(() => {
    if (fontsLoaded) SplashScreen.hideAsync();
  }, [fontsLoaded]);

  if (!fontsLoaded) return null;

  return (
    <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
      <QueryProvider>
        <GestureHandlerRootView style={{ flex: 1 }}>
          <StatusBar style="auto" />
          <Slot />
        </GestureHandlerRootView>
      </QueryProvider>
    </ClerkProvider>
  );
}

app/
├── _layout.tsx          # ClerkProvider, fonts, providers
├── (auth)/              # Visible only when signed-out
│   ├── _layout.tsx
│   └── sign-in.tsx
└── (app)/               # Visible only when signed-in
    ├── _layout.tsx
    └── (tabs)/
        ├── _layout.tsx
        ├── index.tsx    # Today
        ├── ask.tsx      # Ask
        ├── trends.tsx   # Trends
        └── you.tsx      # You

import { useAuth } from "@clerk/expo";
import { Redirect, Stack } from "expo-router";

export default function AuthLayout() {
  const { isSignedIn, isLoaded } = useAuth();
  if (!isLoaded) return null;
  if (isSignedIn) return <Redirect href="/" />;
  return <Stack screenOptions={{ headerShown: false }} />;
}

import { View } from "react-native";
import { AuthView } from "@clerk/expo/native";

export default function SignIn() {
  return (
    <View className="flex-1 bg-paper">
      <AuthView mode="signInOrUp" />
    </View>
  );
}

import { useAuth } from "@clerk/expo";
import { Redirect, Stack } from "expo-router";

export default function AppLayout() {
  const { isSignedIn, isLoaded } = useAuth();
  if (!isLoaded) return null;
  if (!isSignedIn) return <Redirect href="/(auth)/sign-in" />;
  return <Stack screenOptions={{ headerShown: false }} />;
}

import { Tabs } from "expo-router";
import { BlurView } from "expo-blur";
import { Platform } from "react-native";
import { Calendar, MessageCircle, Activity, User } from "lucide-react-native";

export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: "#2c5878",
        tabBarInactiveTintColor: "#76766c",
        tabBarLabelStyle: { fontFamily: "InterMedium", fontSize: 11 },
        tabBarStyle:
          Platform.OS === "ios"
            ? { position: "absolute", borderTopWidth: 0 }
            : { backgroundColor: "#f7f4ef" },
        tabBarBackground: Platform.OS === "ios"
          ? () => <BlurView tint="light" intensity={80} style={{ flex: 1 }} />
          : undefined,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{ title: "Today", tabBarIcon: ({ color }) => <Calendar size={22} color={color} /> }}
      />
      <Tabs.Screen
        name="ask"
        options={{ title: "Ask", tabBarIcon: ({ color }) => <MessageCircle size={22} color={color} /> }}
      />
      <Tabs.Screen
        name="trends"
        options={{ title: "Trends", tabBarIcon: ({ color }) => <Activity size={22} color={color} /> }}
      />
      <Tabs.Screen
        name="you"
        options={{ title: "You", tabBarIcon: ({ color }) => <User size={22} color={color} /> }}
      />
    </Tabs>
  );
}

import { Show } from "@clerk/expo";
import { Text, View } from "react-native";

export default function MaybeBanner() {
  return (
    <View>
      <Show when="signed-out">
        <Text>Sign in to ask Amy.</Text>
      </Show>
      <Show when="signed-in">
        <Text>Welcome back.</Text>
      </Show>
    </View>
  );
}

import { useMemo } from "react";
import { useAuth } from "@clerk/expo";

import { Amy } from "@amy/sdk";

const BASE_URL =
  process.env.EXPO_PUBLIC_AMY_BASE_URL ?? "https://amy.heyamy.xyz";

/**
 * The Amy client, bound to the current Clerk session. The SDK
 * calls `apiKeyProvider` once per request, which forwards to
 * Clerk's `getToken()` — Clerk caches and refreshes the JWT under
 * the hood, so we get a fresh token without writing any caching
 * code of our own.
 *
 * Memoized on `getToken` so the client reference is stable across
 * renders. TanStack Query keys can use it safely.
 */
export function useAmy(): Amy {
  const { getToken } = useAuth({ treatPendingAsSignedOut: false });

  return useMemo(
    () =>
      new Amy({
        baseUrl: BASE_URL,
        apiKeyProvider: async () => {
          try {
            // Returning null/undefined throws inside the SDK with
            // a useful message — treat that as a Clerk session
            // expiry and let the AppLayout redirect to /sign-in.
            return await getToken();
          } catch (err) {
            // ClerkOfflineError (3.1+) — throws after ~15s when
            // the network is unreachable. Bubble it up; the chat
            // hook will map it to a "you're offline" toast.
            throw err;
          }
        },
      }),
    [getToken],
  );
}

cd apps/mobile
bun add @tanstack/react-query

import { useState } from "react";
import { QueryClient, QueryClientProvider, focusManager } from "@tanstack/react-query";
import { AppState, type AppStateStatus, Platform } from "react-native";
import { useEffect } from "react";

import { AmyApiError } from "@amy/sdk";

function onAppStateChange(status: AppStateStatus) {
  // Web has its own focus event; on RN we drive Query's focusManager.
  if (Platform.OS !== "web") {
    focusManager.setFocused(status === "active");
  }
}

export function QueryProvider({ children }: { children: React.ReactNode }) {
  const [client] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 30_000,
            gcTime: 5 * 60_000,
            retry: (failureCount, error) => {
              if (error instanceof AmyApiError) {
                if (error.code === "invalid_token") return false;
                if (error.code === "forbidden") return false;
                if (error.code === "not_found") return false;
              }
              return failureCount < 2;
            },
          },
          mutations: {
            retry: false,
          },
        },
      }),
  );

  useEffect(() => {
    const sub = AppState.addEventListener("change", onAppStateChange);
    return () => sub.remove();
  }, []);

  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
}

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts",
    "nativewind-env.d.ts"
  ]
}

bun add -d babel-plugin-module-resolver

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      [
        "module-resolver",
        {
          alias: { "@": "./" },
          extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
        },
      ],
      "react-native-reanimated/plugin", // must be last
    ],
  };
};

import { useQuery } from "@tanstack/react-query";

import { useAmy } from "@/lib/amy";

export function useMe() {
  const amy = useAmy();
  return useQuery({
    queryKey: ["me"],
    queryFn: () => amy.me.get(),
  });
}

// apps/mobile/app/(app)/(tabs)/you.tsx — temporary
import { Text, View } from "react-native";
import { useMe } from "@/lib/queries";

export default function You() {
  const me = useMe();
  return (
    <View className="flex-1 bg-paper p-6">
      <Text className="text-ink-900">{me.data?.email ?? "loading…"}</Text>
    </View>
  );
}

import type { TurnResult } from "@amy/contracts";

export type Phase = {
  /** Stable id used by Reanimated for layout transitions. */
  key: string;
  agent: string;
  phase: string;
  detail?: string;
};

export type UserMessage = {
  role: "user";
  id: string;
  content: string;
  createdAt: number;
};

export type AmyMessage = {
  role: "amy";
  id: string;
  /** Set while the turn is running. Cleared on completion. */
  streaming?: {
    turnId: string;
    phases: Phase[];
    typewriter: string;
  };
  /** Final answer. Always set if `streaming` is undefined. */
  result?: TurnResult;
  /** Set if the turn failed. */
  error?: { code?: string; message: string };
  createdAt: number;
};

export type ChatMessage = UserMessage | AmyMessage;

import { useCallback, useRef, useState, useEffect } from "react";
import * as Haptics from "expo-haptics";

import { AmyApiError, type StreamEvent } from "@amy/sdk";
import { useAmy } from "@/lib/amy";
import type { AmyMessage, ChatMessage, Phase, UserMessage } from "@/lib/chat-types";

function uid() {
  return Math.random().toString(36).slice(2, 10);
}

export function useChat() {
  const amy = useAmy();
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [pending, setPending] = useState(false);
  const abortRef = useRef<AbortController | null>(null);

  // Cancel any live stream when the screen unmounts.
  useEffect(() => () => abortRef.current?.abort(), []);

  const stop = useCallback(() => {
    abortRef.current?.abort();
    abortRef.current = null;
    setPending(false);
  }, []);

  const send = useCallback(
    async (text: string) => {
      const trimmed = text.trim();
      if (!trimmed || pending) return;

      const userMessage: UserMessage = {
        role: "user",
        id: uid(),
        content: trimmed,
        createdAt: Date.now(),
      };
      const placeholder: AmyMessage = {
        role: "amy",
        id: uid(),
        streaming: { turnId: "", phases: [], typewriter: "" },
        createdAt: Date.now(),
      };

      setMessages((prev) => [...prev, userMessage, placeholder]);
      setPending(true);
      Haptics.selectionAsync().catch(() => {});

      const controller = new AbortController();
      abortRef.current = controller;

      try {
        const turn = await amy.turns.create({
          messages: [
            { role: "user", content: trimmed },
          ],
        });

        // Patch the placeholder with the turn id so the UI can show
        // it under "request id" if needed.
        setMessages((prev) =>
          prev.map((m) =>
            m.id === placeholder.id && m.role === "amy" && m.streaming
              ? { ...m, streaming: { ...m.streaming, turnId: turn.id } }
              : m,
          ),
        );

        for await (const ev of amy.turns.stream(turn.id, { signal: controller.signal })) {
          applyEvent(placeholder.id, ev, setMessages);
          if (ev.type === "turn.completed" || ev.type === "turn.failed") break;
        }
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success).catch(() => {});
      } catch (err) {
        const code =
          err instanceof AmyApiError ? err.code : "network_error";
        const message =
          err instanceof Error ? err.message : "Something went wrong.";

        setMessages((prev) =>
          prev.map((m) =>
            m.id === placeholder.id && m.role === "amy"
              ? { ...m, streaming: undefined, error: { code, message } }
              : m,
          ),
        );
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error).catch(() => {});
      } finally {
        setPending(false);
        abortRef.current = null;
      }
    },
    [amy, pending],
  );

  return { messages, pending, send, stop };
}

function applyEvent(
  messageId: string,
  ev: StreamEvent,
  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>,
) {
  setMessages((prev) =>
    prev.map((m) => {
      if (m.id !== messageId || m.role !== "amy") return m;
      const s = m.streaming;
      if (!s) return m;

      switch (ev.type) {
        case "phase": {
          const data = ev.data as { agent: string; phase: string; detail?: string };
          const key = `${data.agent}:${data.phase}:${s.phases.length}`;
          const phase: Phase = {
            key,
            agent: data.agent,
            phase: data.phase,
            detail: data.detail,
          };
          return { ...m, streaming: { ...s, phases: [...s.phases, phase] } };
        }
        case "synthesis_delta": {
          // The token stream of the user-facing answer (step 8 of the
          // pipeline). Per-agent reasoning is *not* streamed at the
          // token level — agents emit `agent_start` / `agent_end`
          // pairs instead. See concepts/streaming for the catalog.
          const data = ev.data as { text: string };
          return {
            ...m,
            streaming: { ...s, typewriter: s.typewriter + data.text },
          };
        }
        case "turn.completed": {
          const data = ev.data as { result: AmyMessage["result"] };
          return { ...m, streaming: undefined, result: data.result };
        }
        case "turn.failed": {
          const data = ev.data as { error?: { code?: string; message?: string } };
          return {
            ...m,
            streaming: undefined,
            error: {
              code: data.error?.code,
              message: data.error?.message ?? "Turn failed.",
            },
          };
        }
        default:
          return m;
      }
    }),
  );
}

import { View, Text } from "react-native";
import Animated, { FadeIn, FadeOut, LinearTransition } from "react-native-reanimated";

import type { ChatMessage } from "@/lib/chat-types";

export function Bubble({ message }: { message: ChatMessage }) {
  if (message.role === "user") return <UserBubble message={message} />;
  return <AmyBubble message={message} />;
}

function UserBubble({ message }: { message: Extract<ChatMessage, { role: "user" }> }) {
  return (
    <Animated.View
      entering={FadeIn.duration(180)}
      layout={LinearTransition.duration(200)}
      className="self-end mb-6 ml-12"
    >
      <Text className="text-base text-petrol-600 text-right">
        {message.content}
      </Text>
    </Animated.View>
  );
}

function AmyBubble({ message }: { message: Extract<ChatMessage, { role: "amy" }> }) {
  return (
    <Animated.View
      entering={FadeIn.duration(220)}
      layout={LinearTransition.duration(220)}
      className="self-stretch mb-8"
    >
      <View className="mb-2 flex-row items-center">
        <Text className="font-serif text-base text-ink-900">Amy</Text>
        <View className="ml-3 h-px flex-1 bg-petrol-200" />
      </View>

      {message.streaming ? (
        <StreamingBody streaming={message.streaming} />
      ) : message.error ? (
        <ErrorBody error={message.error} />
      ) : message.result ? (
        <Animated.Text
          entering={FadeIn.duration(280)}
          className="font-serif text-lg leading-7 text-ink-900"
        >
          {message.result.answer}
        </Animated.Text>
      ) : null}
    </Animated.View>
  );
}

function StreamingBody({ streaming }: { streaming: NonNullable<Extract<ChatMessage, { role: "amy" }>["streaming"]> }) {
  return (
    <View>
      {streaming.phases.map((p) => (
        <Animated.View
          key={p.key}
          entering={FadeIn.duration(220)}
          exiting={FadeOut.duration(160)}
          layout={LinearTransition.duration(220)}
          className="mb-1 flex-row items-center"
        >
          <View className="mr-2 h-1 w-1 rounded-full bg-petrol-500" />
          <Text className="text-sm text-ink-500">
            <Text className="text-ink-700">{labelFor(p.agent)}</Text>
            {p.phase ? ` · ${p.phase}` : ""}
            {p.detail ? ` · ${p.detail}` : ""}
          </Text>
        </Animated.View>
      ))}

      {streaming.typewriter.length > 0 && (
        <Animated.Text
          entering={FadeIn.duration(120)}
          className="mt-3 font-serif text-lg italic leading-7 text-ink-700"
        >
          {streaming.typewriter}
        </Animated.Text>
      )}
    </View>
  );
}

function ErrorBody({ error }: { error: { code?: string; message: string } }) {
  return (
    <View className="rounded-lg bg-rose-50 px-3 py-2">
      <Text className="text-sm text-rose-700">{error.message}</Text>
      {error.code ? <Text className="mt-1 text-xs text-rose-500">{error.code}</Text> : null}
    </View>
  );
}

function labelFor(agent: string) {
  switch (agent) {
    case "orchestrator": return "Routing";
    case "data_science": return "Data Science";
    case "domain_expert": return "Domain Expert";
    case "health_coach": return "Health Coach";
    case "investigator": return "Investigator";
    case "validator": return "Validator";
    case "synthesis": return "Synthesis";
    default: return agent;
  }
}

import { useState } from "react";
import { Pressable, TextInput, View } from "react-native";
import { Send, Square } from "lucide-react-native";

export function Composer({
  onSend,
  onStop,
  pending,
}: {
  onSend: (text: string) => void;
  onStop: () => void;
  pending: boolean;
}) {
  const [text, setText] = useState("");

  return (
    <View className="border-t border-ink-200 bg-paper px-4 py-3">
      <View className="flex-row items-end gap-2">
        <TextInput
          value={text}
          onChangeText={setText}
          editable={!pending}
          placeholder="Ask Amy…"
          placeholderTextColor="#a5a59a"
          multiline
          className="flex-1 rounded-2xl border border-ink-200 bg-white px-4 py-3 text-base text-ink-900"
          style={{ maxHeight: 140 }}
        />
        {pending ? (
          <Pressable
            onPress={onStop}
            className="h-11 w-11 items-center justify-center rounded-full bg-ink-900"
          >
            <Square size={16} color="#f7f4ef" fill="#f7f4ef" />
          </Pressable>
        ) : (
          <Pressable
            disabled={!text.trim()}
            onPress={() => {
              onSend(text);
              setText("");
            }}
            className={`h-11 w-11 items-center justify-center rounded-full ${text.trim() ? "bg-petrol-600" : "bg-ink-300"}`}
          >
            <Send size={16} color="#f7f4ef" />
          </Pressable>
        )}
      </View>
    </View>
  );
}

import { useCallback, useEffect, useRef } from "react";
import { KeyboardAvoidingView, Platform, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { FlashList, type FlashListRef } from "@shopify/flash-list";

import { useChat } from "@/lib/use-chat";
import { Bubble } from "@/components/Bubble";
import { Composer } from "@/components/Composer";
import type { ChatMessage } from "@/lib/chat-types";

export default function Ask() {
  const { messages, pending, send, stop } = useChat();
  const listRef = useRef<FlashListRef<ChatMessage> | null>(null);

  useEffect(() => {
    // Pin to the bottom whenever a new message lands.
    if (messages.length > 0) {
      listRef.current?.scrollToEnd({ animated: true });
    }
  }, [messages.length]);

  const renderItem = useCallback(
    ({ item }: { item: ChatMessage }) => <Bubble message={item} />,
    [],
  );

  return (
    <SafeAreaView edges={["top"]} className="flex-1 bg-paper">
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : undefined}
        className="flex-1"
        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
      >
        <View className="flex-1">
          <FlashList
            ref={listRef}
            data={messages}
            keyExtractor={(m) => m.id}
            renderItem={renderItem}
            contentContainerStyle={{ padding: 20, paddingBottom: 24 }}
            ListEmptyComponent={<Empty />}
          />
        </View>
        <Composer onSend={send} onStop={stop} pending={pending} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

function Empty() {
  return (
    <View className="mt-24 items-center">
      <View className="px-8">
        <View className="mb-4 h-px w-12 self-center bg-petrol-300" />
        <View>
          <Bubble
            message={{
              role: "amy",
              id: "intro",
              createdAt: 0,
              result: {
                answer:
                  "Hi. I'm reading from your wearables and labs. Ask me about a number you saw, or how something has trended this month. I'll show the work as I go.",
                fact_sheet: [],
                agents_used: [],
                cost_usd: 0,
                duration_ms: 0,
              },
            }}
          />
        </View>
      </View>
    </View>
  );
}

app/(app)/(tabs)/
├── you.tsx           # the hub
└── you/              # subroutes pushed from the hub
    ├── sources.tsx
    └── labs.tsx

import { Stack } from "expo-router";

export default function YouStack() {
  return <Stack screenOptions={{ headerShown: true }} />;
}

bunx expo install expo-web-browser

export function useSources() {
  const amy = useAmy();
  return useQuery({
    queryKey: ["sources"],
    queryFn: () => amy.sources.list().then((r) => r.data),
  });
}

import { useState } from "react";
import { ActivityIndicator, Alert, Pressable, ScrollView, Text, View } from "react-native";
import * as WebBrowser from "expo-web-browser";
import * as Haptics from "expo-haptics";
import { useQueryClient } from "@tanstack/react-query";
import { Plus, Watch } from "lucide-react-native";

import { useAmy } from "@/lib/amy";
import { useSources } from "@/lib/queries";

export default function Sources() {
  const amy = useAmy();
  const qc = useQueryClient();
  const sources = useSources();
  const [connecting, setConnecting] = useState(false);

  const connect = async (provider?: string) => {
    setConnecting(true);
    Haptics.selectionAsync().catch(() => {});
    try {
      const { widget_url } = await amy.sources.terra.connect({
        provider,
        redirect_url: "amy-mobile://terra-callback",
      });
      const result = await WebBrowser.openAuthSessionAsync(
        widget_url,
        "amy-mobile://terra-callback",
      );
      if (result.type === "success" || result.type === "dismiss") {
        await qc.invalidateQueries({ queryKey: ["sources"] });
        await qc.invalidateQueries({ queryKey: ["me"] });
      }
    } catch (err) {
      Alert.alert("Couldn't connect", (err as Error).message);
    } finally {
      setConnecting(false);
    }
  };

  return (
    <ScrollView className="flex-1 bg-paper">
      <View className="px-6 pt-4 pb-2">
        <Text className="font-serif text-3xl text-ink-900">Wearables</Text>
        <Text className="mt-1 text-base text-ink-500">
          Amy reads from these in real time. Connect or disconnect any time.
        </Text>
      </View>

      <View className="mx-6 mt-6 border-t border-ink-200">
        {sources.isLoading ? (
          <View className="py-8 items-center">
            <ActivityIndicator />
          </View>
        ) : sources.data && sources.data.length > 0 ? (
          sources.data.map((s) => (
            <View
              key={s.id}
              className="flex-row items-center justify-between border-b border-ink-200 py-4"
            >
              <View className="flex-row items-center gap-3">
                <Watch size={18} color="#2c5878" />
                <View>
                  <Text className="text-base text-ink-900 capitalize">{s.provider}</Text>
                  <Text className="text-xs text-ink-500">
                    {s.status === "active" ? "Connected" : s.status}
                    {s.last_sync_at
                      ? ` · last sync ${relative(s.last_sync_at)}`
                      : ""}
                  </Text>
                </View>
              </View>
              <Pressable
                onPress={() => disconnect(amy, qc, s.id)}
                className="px-3 py-1"
              >
                <Text className="text-sm text-ink-500">Remove</Text>
              </Pressable>
            </View>
          ))
        ) : (
          <Text className="py-6 text-ink-500">No wearables connected yet.</Text>
        )}
      </View>

      <Pressable
        disabled={connecting}
        onPress={() => connect()}
        className="mx-6 mt-8 flex-row items-center justify-center rounded-full bg-petrol-600 px-6 py-3.5"
      >
        <Plus size={16} color="#f7f4ef" />
        <Text className="ml-2 text-base font-medium text-paper">
          {connecting ? "Opening Terra…" : "Connect a wearable"}
        </Text>
      </Pressable>
    </ScrollView>
  );
}

async function disconnect(
  amy: ReturnType<typeof useAmy>,
  qc: ReturnType<typeof useQueryClient>,
  id: string,
) {
  await amy.sources.disconnect(id);
  await qc.invalidateQueries({ queryKey: ["sources"] });
  await qc.invalidateQueries({ queryKey: ["me"] });
}

function relative(iso: string) {
  const ms = Date.now() - new Date(iso).getTime();
  const m = Math.floor(ms / 60_000);
  if (m < 1) return "moments ago";
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h ago`;
  const d = Math.floor(h / 24);
  return `${d}d ago`;
}

{
  "expo": {
    "name": "Amy",
    "slug": "amy-mobile",
    "scheme": "amy-mobile"
  }
}

bunx expo install expo-document-picker

export function useLabs() {
  const amy = useAmy();
  return useQuery({
    queryKey: ["labs"],
    queryFn: () => amy.labs.list().then((r) => r.uploads),
  });
}

import { useState } from "react";
import { ActivityIndicator, Alert, Pressable, ScrollView, Text, View } from "react-native";
import * as DocumentPicker from "expo-document-picker";
import * as FileSystem from "expo-file-system";
import * as Haptics from "expo-haptics";
import { useQueryClient } from "@tanstack/react-query";
import { FileText, Plus } from "lucide-react-native";

import { useAmy } from "@/lib/amy";
import { useLabs } from "@/lib/queries";

export default function Labs() {
  const amy = useAmy();
  const qc = useQueryClient();
  const labs = useLabs();
  const [uploading, setUploading] = useState(false);

  const upload = async () => {
    setUploading(true);
    Haptics.selectionAsync().catch(() => {});

    try {
      const picked = await DocumentPicker.getDocumentAsync({
        // Backend accepts PDF + PNG + JPEG today; HEIC is not in the
        // cloud's accepted-MIME list, so we either filter it out in the
        // picker or convert before upload. Filter is simpler.
        type: ["application/pdf", "image/jpeg", "image/png"],
        copyToCacheDirectory: true,
        multiple: false,
      });
      if (picked.canceled) return;

      const asset = picked.assets[0];
      // `await fetch(uri).then(r => r.blob())` works on iOS Simulator
      // but is unreliable for large files on physical devices (OOMs at
      // ~10 MB) and silently drops EXIF on HEIC. Read the file directly
      // through expo-file-system instead.
      const base64 = await FileSystem.readAsStringAsync(asset.uri, {
        encoding: FileSystem.EncodingType.Base64,
      });
      const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
      const file = new Blob([bytes], {
        type: asset.mimeType ?? "application/octet-stream",
      });

      await amy.labs.upload({ file, filename: asset.name });
      await qc.invalidateQueries({ queryKey: ["labs"] });
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success).catch(() => {});
    } catch (err) {
      Alert.alert("Upload failed", (err as Error).message);
    } finally {
      setUploading(false);
    }
  };

  return (
    <ScrollView className="flex-1 bg-paper">
      <View className="px-6 pt-4 pb-2">
        <Text className="font-serif text-3xl text-ink-900">Labs</Text>
        <Text className="mt-1 text-base text-ink-500">
          PDF or photo of a bloodwork panel. Amy parses biomarkers in ~30 seconds.
        </Text>
      </View>

      <View className="mx-6 mt-6 border-t border-ink-200">
        {labs.isLoading ? (
          <View className="py-8 items-center">
            <ActivityIndicator />
          </View>
        ) : labs.data && labs.data.length > 0 ? (
          labs.data.map((l) => (
            <View
              key={l.id}
              className="flex-row items-center justify-between border-b border-ink-200 py-4"
            >
              <View className="flex-row items-center gap-3">
                <FileText size={18} color="#2c5878" />
                <View>
                  <Text className="text-base text-ink-900">{l.id}</Text>
                  <Text className="text-xs text-ink-500">
                    {l.parsed_at ? "Parsed" : l.terra_status}
                    {l.uploaded_at ? ` · uploaded ${shortDate(l.uploaded_at)}` : ""}
                  </Text>
                </View>
              </View>
            </View>
          ))
        ) : (
          <Text className="py-6 text-ink-500">No labs uploaded yet.</Text>
        )}
      </View>

      <Pressable
        disabled={uploading}
        onPress={upload}
        className="mx-6 mt-8 flex-row items-center justify-center rounded-full bg-petrol-600 px-6 py-3.5"
      >
        <Plus size={16} color="#f7f4ef" />
        <Text className="ml-2 text-base font-medium text-paper">
          {uploading ? "Uploading…" : "Upload a lab report"}
        </Text>
      </Pressable>
    </ScrollView>
  );
}

function shortDate(iso: string) {
  return new Date(iso).toLocaleDateString(undefined, {
    month: "short",
    day: "numeric",
  });
}

import { Pressable, ScrollView, Text, View } from "react-native";
import { router } from "expo-router";
import { ChevronRight, FileText, LogOut, Watch } from "lucide-react-native";
import { UserButton } from "@clerk/expo/native";
import { useClerk } from "@clerk/expo";

import { useMe, useSources, useLabs } from "@/lib/queries";

export default function You() {
  const me = useMe();
  const sources = useSources();
  const labs = useLabs();
  const { signOut } = useClerk();

  return (
    <ScrollView className="flex-1 bg-paper">
      <View className="flex-row items-center px-6 pt-6 pb-4">
        <UserButton style={{ width: 44, height: 44 }} />
        <View className="ml-3 flex-1">
          <Text className="font-serif text-xl text-ink-900">
            {me.data?.email ?? "…"}
          </Text>
          <Text className="text-sm text-ink-500">
            {me.data?.env ? `env: ${me.data.env}` : ""}
          </Text>
        </View>
      </View>

      <Section title="Wearables">
        <Row
          icon={<Watch size={18} color="#2c5878" />}
          label="Connected sources"
          value={sources.data ? `${sources.data.length}` : "…"}
          onPress={() => router.push("/(app)/(tabs)/you/sources")}
        />
      </Section>

      <Section title="Labs">
        <Row
          icon={<FileText size={18} color="#2c5878" />}
          label="Uploaded reports"
          value={labs.data ? `${labs.data.length}` : "…"}
          onPress={() => router.push("/(app)/(tabs)/you/labs")}
        />
      </Section>

      <Section title="Account">
        <Row
          icon={<LogOut size={18} color="#76766c" />}
          label="Sign out"
          onPress={async () => {
            await signOut();
          }}
        />
      </Section>
    </ScrollView>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <View className="px-6 mt-6">
      <Text className="text-xs uppercase tracking-widest text-ink-500">{title}</Text>
      <View className="mt-2 border-t border-ink-200">{children}</View>
    </View>
  );
}

function Row({
  icon,
  label,
  value,
  onPress,
}: {
  icon: React.ReactNode;
  label: string;
  value?: string;
  onPress?: () => void;
}) {
  return (
    <Pressable
      onPress={onPress}
      className="flex-row items-center justify-between border-b border-ink-200 py-3.5"
    >
      <View className="flex-row items-center gap-3">
        {icon}
        <Text className="text-base text-ink-900">{label}</Text>
      </View>
      <View className="flex-row items-center gap-2">
        {value ? <Text className="text-sm text-ink-500">{value}</Text> : null}
        <ChevronRight size={16} color="#a5a59a" />
      </View>
    </Pressable>
  );
}

cd apps/mobile
bun add react-native-mmkv
bunx expo prebuild

import { MMKV } from "react-native-mmkv";

import type { DataSyncResponse } from "@amy/sdk";

export const storage = new MMKV({ id: "amy" });

const KEYS = {
  dataSync: "data_sync_v1",
  dataSyncSince: "data_sync_since_v1",
} as const;

export function readCachedSync(): DataSyncResponse | null {
  const raw = storage.getString(KEYS.dataSync);
  if (!raw) return null;
  try {
    return JSON.parse(raw) as DataSyncResponse;
  } catch {
    return null;
  }
}

export function writeCachedSync(data: DataSyncResponse) {
  storage.set(KEYS.dataSync, JSON.stringify(data));
  storage.set(KEYS.dataSyncSince, data.now);
}

export function readSyncSince(): string | null {
  return storage.getString(KEYS.dataSyncSince) ?? null;
}

import { readCachedSync, readSyncSince, writeCachedSync } from "@/lib/cache";

export function useDataSync() {
  const amy = useAmy();
  return useQuery({
    queryKey: ["data_sync"],
    queryFn: async () => {
      const since = readSyncSince() ?? undefined;
      const fresh = await amy.data.sync({ since });
      writeCachedSync(fresh);
      return fresh;
    },
    initialData: () => readCachedSync() ?? undefined,
    staleTime: 60_000,
  });
}