bazilion 0.0.0

package/apps/mobile/app/settings.tsx

@@ -0,0 +1,419 @@
+import type { CreateTokenResponse, ListTokensResponse, WebToken } from '@bazilion/api-types'
+import { ApiClientError } from '@bazilion/client'
+import { router } from 'expo-router'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  FlatList,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native'
+import { clearCredentials, clientFor, type Credentials, loadCredentials } from '@/src/auth'
+import { useColors, useThemeMode } from '@/src/theme-context'
+import { type Colors, fonts, radii, type ThemeMode } from '@/src/theme'
+
+type Load =
+  | { kind: 'loading' }
+  | { kind: 'ready'; creds: Credentials; tokens: WebToken[]; bootstrapId: string | null }
+  | { kind: 'error'; message: string }
+
+export default function Settings() {
+  const [load, setLoad] = useState<Load>({ kind: 'loading' })
+  const [newLabel, setNewLabel] = useState('')
+  const [minting, setMinting] = useState(false)
+  const [mintedSecret, setMintedSecret] = useState<{ token: string; meta: WebToken } | null>(null)
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+
+  const fetchTokens = useCallback(async () => {
+    setLoad({ kind: 'loading' })
+    const creds = await loadCredentials()
+    if (!creds) {
+      router.replace('/pair')
+      return
+    }
+    try {
+      const res = await clientFor(creds).get<ListTokensResponse>('/api/tokens')
+      // Identify the bootstrap row so the UI can hide its revoke button
+      // (matches the daemon's 409-on-revoke guard).
+      const bootstrap = res.tokens.find((t) => t.label === 'bootstrap')
+      setLoad({
+        kind: 'ready',
+        creds,
+        tokens: res.tokens,
+        bootstrapId: bootstrap?.id ?? null,
+      })
+    } catch (err) {
+      if (err instanceof ApiClientError && err.status === 401) {
+        await clearCredentials()
+        router.replace('/pair')
+        return
+      }
+      const message = err instanceof Error ? err.message : 'unknown error'
+      setLoad({ kind: 'error', message })
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchTokens()
+  }, [fetchTokens])
+
+  const onMint = useCallback(async () => {
+    if (load.kind !== 'ready' || minting) return
+    const label = newLabel.trim()
+    if (!label) return
+    setMinting(true)
+    try {
+      const res = await clientFor(load.creds).post<CreateTokenResponse>('/api/tokens', { label })
+      setMintedSecret({ token: res.token, meta: res.meta })
+      setNewLabel('')
+      await fetchTokens()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'unknown error'
+      Alert.alert('Could not mint token', message)
+    } finally {
+      setMinting(false)
+    }
+  }, [load, minting, newLabel, fetchTokens])
+
+  const onRevoke = useCallback(
+    async (id: string) => {
+      if (load.kind !== 'ready') return
+      Alert.alert(
+        'Revoke token?',
+        'Devices using this token will lose access immediately.',
+        [
+          { text: 'Cancel', style: 'cancel' },
+          {
+            text: 'Revoke',
+            style: 'destructive',
+            onPress: async () => {
+              try {
+                await clientFor(load.creds).del(`/api/tokens/${id}`)
+                await fetchTokens()
+              } catch (err) {
+                const message = err instanceof Error ? err.message : 'unknown error'
+                Alert.alert('Could not revoke', message)
+              }
+            },
+          },
+        ],
+        { cancelable: true },
+      )
+    },
+    [load, fetchTokens],
+  )
+
+  const onUnpair = useCallback(() => {
+    Alert.alert(
+      'Unpair this device?',
+      'You will need to scan a new pairing QR to reconnect.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Unpair',
+          style: 'destructive',
+          onPress: async () => {
+            await clearCredentials()
+            router.replace('/pair')
+          },
+        },
+      ],
+      { cancelable: true },
+    )
+  }, [])
+
+  if (load.kind === 'loading') {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+
+  if (load.kind === 'error') {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorTitle}>Couldn't load settings</Text>
+        <Text style={styles.errorBody}>{load.message}</Text>
+        <Pressable style={styles.primaryBtn} onPress={fetchTokens}>
+          <Text style={styles.primaryBtnText}>Retry</Text>
+        </Pressable>
+        <Pressable style={styles.linkBtn} onPress={onUnpair}>
+          <Text style={styles.linkBtnText}>Unpair</Text>
+        </Pressable>
+      </View>
+    )
+  }
+
+  const tokenPreview = `${load.creds.token.slice(0, 6)}…${load.creds.token.slice(-4)}`
+
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <Section label="server">
+        <Text style={styles.mono}>{load.creds.server}</Text>
+      </Section>
+
+      <Section label="this device's token">
+        <Text style={styles.mono}>{tokenPreview}</Text>
+      </Section>
+
+      <View style={styles.divider} />
+
+      <Section label="theme">
+        <ThemePicker />
+      </Section>
+
+      <View style={styles.divider} />
+
+      <Section label="mint a new token">
+        <View style={styles.mintRow}>
+          <TextInput
+            value={newLabel}
+            onChangeText={setNewLabel}
+            placeholder="e.g. tablet, laptop"
+            placeholderTextColor="#aaa"
+            style={styles.mintInput}
+            editable={!minting}
+            autoCapitalize="none"
+          />
+          <Pressable
+            onPress={onMint}
+            disabled={minting || !newLabel.trim()}
+            style={({ pressed }) => [
+              styles.mintBtn,
+              (minting || !newLabel.trim()) && styles.mintBtnDisabled,
+              pressed && styles.mintBtnPressed,
+            ]}
+          >
+            <Text style={styles.mintBtnText}>{minting ? '…' : 'Mint'}</Text>
+          </Pressable>
+        </View>
+        {mintedSecret ? (
+          <View style={styles.mintedBox}>
+            <Text style={styles.mintedLabel}>new token (shown once):</Text>
+            <Text style={styles.mintedToken} selectable>
+              {mintedSecret.token}
+            </Text>
+            <Text style={styles.mintedHint}>
+              copy this now — it cannot be retrieved later. label: {mintedSecret.meta.label}
+            </Text>
+          </View>
+        ) : null}
+      </Section>
+
+      <Section label={`tokens (${load.tokens.length})`}>
+        <FlatList
+          data={load.tokens}
+          scrollEnabled={false}
+          keyExtractor={(t) => t.id}
+          renderItem={({ item }) => (
+            <TokenRow
+              token={item}
+              isBootstrap={item.id === load.bootstrapId}
+              onRevoke={() => onRevoke(item.id)}
+            />
+          )}
+          ItemSeparatorComponent={() => <View style={styles.tokenSep} />}
+        />
+      </Section>
+
+      <View style={styles.divider} />
+
+      <Pressable
+        onPress={onUnpair}
+        style={({ pressed }) => [styles.dangerBtn, pressed && styles.dangerBtnPressed]}
+      >
+        <Text style={styles.dangerBtnText}>Unpair this device</Text>
+      </Pressable>
+    </ScrollView>
+  )
+}
+
+function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionLabel}>{label}</Text>
+      <View style={styles.sectionBody}>{children}</View>
+    </View>
+  )
+}
+
+function TokenRow({
+  token,
+  isBootstrap,
+  onRevoke,
+}: {
+  token: WebToken
+  isBootstrap: boolean
+  onRevoke: () => void
+}) {
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+  const status = token.revokedAt ? 'revoked' : 'active'
+  const last = token.lastUsedAt ? new Date(token.lastUsedAt).toLocaleString() : '(never used)'
+  return (
+    <View style={styles.tokenRow}>
+      <View style={styles.tokenInfo}>
+        <Text style={styles.tokenLabel}>
+          {token.label} {isBootstrap ? <Text style={styles.tokenBootstrap}>· bootstrap</Text> : null}
+        </Text>
+        <Text style={styles.tokenMeta}>
+          {status} · {last}
+        </Text>
+      </View>
+      {!isBootstrap && !token.revokedAt ? (
+        <Pressable onPress={onRevoke} hitSlop={10}>
+          <Text style={styles.tokenRevoke}>Revoke</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  )
+}
+
+const THEME_OPTIONS: { value: ThemeMode; label: string }[] = [
+  { value: 'system', label: 'System' },
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+]
+
+function ThemePicker() {
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+  const [mode, setMode] = useThemeMode()
+  return (
+    <View style={styles.segmentedRow}>
+      {THEME_OPTIONS.map((opt) => {
+        const active = mode === opt.value
+        return (
+          <Pressable
+            key={opt.value}
+            onPress={() => {
+              void setMode(opt.value)
+            }}
+            style={[styles.segment, active && styles.segmentActive]}
+          >
+            <Text style={[styles.segmentText, active && styles.segmentTextActive]}>{opt.label}</Text>
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
+
+const makeStyles = (colors: Colors) =>
+  StyleSheet.create({
+    screen: { flex: 1, backgroundColor: colors.background },
+    content: { padding: 20, gap: 4 },
+    centered: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24, gap: 12 },
+    section: { marginTop: 16 },
+    sectionLabel: {
+      fontSize: 11,
+      color: colors.mocha,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+      marginBottom: 6,
+      fontFamily: fonts.bodyMedium,
+    },
+    sectionBody: { gap: 4 },
+    mono: { fontFamily: fonts.mono, fontSize: 13, color: colors.charcoal },
+    divider: { height: StyleSheet.hairlineWidth, backgroundColor: colors.border, marginVertical: 16 },
+    mintRow: { flexDirection: 'row', gap: 8, alignItems: 'center' },
+    mintInput: {
+      flex: 1,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      borderRadius: radii.md,
+      backgroundColor: colors.ivory,
+      fontSize: 14,
+      color: colors.foreground,
+      fontFamily: fonts.body,
+    },
+    mintBtn: {
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      borderRadius: radii.md,
+      backgroundColor: colors.sapphire,
+    },
+    mintBtnDisabled: { backgroundColor: colors.mochaLight },
+    mintBtnPressed: { backgroundColor: colors.sapphireDeep },
+    mintBtnText: { color: colors.primaryForeground, fontSize: 14, fontFamily: fonts.bodyMedium },
+    mintedBox: {
+      marginTop: 10,
+      padding: 12,
+      borderRadius: radii.md,
+      backgroundColor: colors.sapphireGlow,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: colors.sapphire,
+      gap: 6,
+    },
+    mintedLabel: {
+      fontSize: 11,
+      color: colors.accentForeground,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+      fontFamily: fonts.bodyMedium,
+    },
+    mintedToken: { fontFamily: fonts.mono, fontSize: 12, color: colors.charcoal },
+    mintedHint: { fontSize: 11, color: colors.accentForeground, fontFamily: fonts.body },
+    tokenRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 10,
+      gap: 12,
+    },
+    tokenSep: { height: StyleSheet.hairlineWidth, backgroundColor: colors.frost },
+    tokenInfo: { flex: 1 },
+    tokenLabel: { fontSize: 14, color: colors.foreground, fontFamily: fonts.body },
+    tokenBootstrap: { color: colors.mochaLight, fontSize: 11, fontFamily: fonts.body },
+    tokenMeta: { fontSize: 11, color: colors.mochaLight, marginTop: 2, fontFamily: fonts.body },
+    tokenRevoke: { color: colors.destructive, fontSize: 13, fontFamily: fonts.bodyMedium },
+    primaryBtn: {
+      marginTop: 12,
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      borderRadius: radii.md,
+      backgroundColor: colors.sapphire,
+    },
+    primaryBtnText: { color: colors.primaryForeground, fontSize: 14, fontFamily: fonts.bodyMedium },
+    linkBtn: { marginTop: 4, padding: 8 },
+    linkBtnText: { color: colors.mocha, fontSize: 13, fontFamily: fonts.body },
+    dangerBtn: {
+      marginTop: 8,
+      paddingVertical: 12,
+      borderRadius: radii.md,
+      backgroundColor: colors.card,
+      borderWidth: 1,
+      borderColor: colors.destructive,
+      alignItems: 'center',
+    },
+    // ~10% destructive tint, tracks theme via the hex-alpha-suffix trick.
+    dangerBtnPressed: { backgroundColor: `${colors.destructive}1A` },
+    dangerBtnText: { color: colors.destructive, fontSize: 14, fontFamily: fonts.bodyMedium },
+    errorTitle: { fontSize: 18, fontFamily: fonts.bodyBold, color: colors.foreground },
+    errorBody: { color: colors.destructive, textAlign: 'center', fontFamily: fonts.body },
+    segmentedRow: {
+      flexDirection: 'row',
+      backgroundColor: colors.ivory,
+      borderRadius: radii.md,
+      padding: 2,
+      gap: 2,
+    },
+    segment: {
+      flex: 1,
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      borderRadius: radii.sm,
+      alignItems: 'center',
+    },
+    segmentActive: { backgroundColor: colors.card },
+    segmentText: { color: colors.mocha, fontSize: 13, fontFamily: fonts.body },
+    segmentTextActive: { color: colors.foreground, fontFamily: fonts.bodyMedium },
+  })

package/apps/mobile/app.json

@@ -0,0 +1,49 @@
+{
+  "expo": {
+    "name": "Bazilion",
+    "slug": "bazilion",
+    "version": "0.0.1",
+    "orientation": "portrait",
+    "scheme": "bazilion",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#F5F0E8"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "dev.bazilion.mobile"
+    },
+    "android": {
+      "package": "dev.bazilion.mobile",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#F5F0E8"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow Bazilion to use the camera to scan pairing QR codes."
+        }
+      ],
+      [
+        "expo-secure-store",
+        {
+          "faceIDPermission": "Allow Bazilion to authenticate with Face ID to unlock stored credentials."
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

package/apps/mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = (api) => {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+  }
+}

package/apps/mobile/metro.config.js

@@ -0,0 +1,28 @@
+// pnpm + Expo monorepo config.
+//
+// - `watchFolders` gets the workspace root APPENDED (not replaced) so Metro
+//   picks up live edits to `@bazilion/client` / `@bazilion/api-types` during
+//   dev while still keeping Expo's own watched paths.
+//
+// - `nodeModulesPaths` also includes the workspace root's `node_modules` so
+//   hoisted deps resolve. Hierarchical lookup stays enabled (the Expo
+//   default) — this lets Metro fall back to pnpm's `.pnpm/*` symlink store
+//   for transitive peers that aren't hoisted to `apps/mobile/node_modules`.
+//   Safe as long as there's exactly one copy of `react-native` / `react` in
+//   the tree; a fresh `pnpm install` after SDK bumps keeps it that way.
+
+const { getDefaultConfig } = require('expo/metro-config')
+const path = require('node:path')
+
+const projectRoot = __dirname
+const workspaceRoot = path.resolve(projectRoot, '../..')
+
+const config = getDefaultConfig(projectRoot)
+
+config.watchFolders = [...(config.watchFolders ?? []), workspaceRoot]
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+]
+
+module.exports = config

package/apps/mobile/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@bazilion/mobile",
+  "version": "0.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "ios": "expo start --ios",
+    "android": "expo start --android",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.25.0",
+    "@bazilion/api-types": "workspace:*",
+    "@bazilion/client": "workspace:*",
+    "@expo-google-fonts/dm-sans": "^0.4.2",
+    "@expo-google-fonts/dm-serif-display": "^0.4.2",
+    "@expo-google-fonts/jetbrains-mono": "^0.4.1",
+    "@expo/metro-runtime": "^6.1.2",
+    "@react-navigation/elements": "^2.9.14",
+    "expo": "^54.0.0",
+    "expo-camera": "~17.0.10",
+    "expo-constants": "~18.0.13",
+    "expo-font": "^55.0.6",
+    "expo-linking": "~8.0.11",
+    "expo-router": "~6.0.23",
+    "expo-secure-store": "~15.0.8",
+    "expo-status-bar": "~3.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-markdown-display": "^7.0.2",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "0.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.10",
+    "typescript": "^5.7.0"
+  }
+}

package/apps/mobile/src/auth.ts

@@ -0,0 +1,66 @@
+import { type BazilionClient, createClient } from '@bazilion/client'
+import * as SecureStore from 'expo-secure-store'
+
+const KEY_SERVER = 'bazilion.server'
+const KEY_TOKEN = 'bazilion.token'
+
+export interface Credentials {
+  server: string
+  token: string
+}
+
+export async function loadCredentials(): Promise<Credentials | null> {
+  const [server, token] = await Promise.all([
+    SecureStore.getItemAsync(KEY_SERVER),
+    SecureStore.getItemAsync(KEY_TOKEN),
+  ])
+  if (!server || !token) return null
+  return { server, token }
+}
+
+export async function saveCredentials(creds: Credentials): Promise<void> {
+  await Promise.all([
+    SecureStore.setItemAsync(KEY_SERVER, creds.server),
+    SecureStore.setItemAsync(KEY_TOKEN, creds.token),
+  ])
+}
+
+export async function clearCredentials(): Promise<void> {
+  await Promise.all([
+    SecureStore.deleteItemAsync(KEY_SERVER),
+    SecureStore.deleteItemAsync(KEY_TOKEN),
+  ])
+}
+
+/**
+ * Probe the daemon so we surface a clear error on the pairing screen instead
+ * of a confusing network failure on the first protected request. 5-second
+ * timeout because the daemon is a local-network service — if it can't answer
+ * in that long, something's wrong.
+ */
+export async function verifyCredentials(creds: Credentials): Promise<void> {
+  const ctrl = new AbortController()
+  const timer = setTimeout(() => ctrl.abort(), 5000)
+  try {
+    const res = await fetch(`${creds.server}/api/health`, {
+      headers: {
+        authorization: `Bearer ${creds.token}`,
+        origin: creds.server,
+      },
+      signal: ctrl.signal,
+    })
+    if (res.status === 401) throw new Error('server rejected the token')
+    if (!res.ok) throw new Error(`server returned ${res.status} from /api/health`)
+  } catch (err) {
+    if (err instanceof Error && err.name === 'AbortError') {
+      throw new Error(`could not reach ${creds.server} within 5s`)
+    }
+    throw err
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+export function clientFor(creds: Credentials): BazilionClient {
+  return createClient({ serverUrl: creds.server, token: creds.token })
+}

package/apps/mobile/src/pair-url.ts

@@ -0,0 +1,48 @@
+export interface ParsedPairing {
+  server: string
+  token: string
+}
+
+export class PairUrlError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'PairUrlError'
+  }
+}
+
+/**
+ * Parse a `bazilion://pair?server=<url>&token=<t>` URL emitted by
+ * `bazilion token create --qr`. The scheme and host are both mandatory so a
+ * stray http(s) URL or a typo surfaces as a clear error instead of a
+ * confusing downstream network failure.
+ */
+export function parsePairingUrl(raw: string): ParsedPairing {
+  let url: URL
+  try {
+    url = new URL(raw)
+  } catch {
+    throw new PairUrlError(`not a valid URL: ${raw}`)
+  }
+  if (url.protocol !== 'bazilion:') {
+    throw new PairUrlError(`expected bazilion:// scheme, got ${url.protocol}`)
+  }
+  // Custom-scheme URLs parse `pair` as the hostname, not pathname.
+  if (url.hostname !== 'pair') {
+    throw new PairUrlError(`expected bazilion://pair, got bazilion://${url.hostname}`)
+  }
+  const server = url.searchParams.get('server')
+  const token = url.searchParams.get('token')
+  if (!server) throw new PairUrlError('missing ?server=')
+  if (!token) throw new PairUrlError('missing ?token=')
+  try {
+    const serverUrl = new URL(server)
+    if (serverUrl.protocol !== 'http:' && serverUrl.protocol !== 'https:') {
+      throw new PairUrlError(`server must be http(s), got ${serverUrl.protocol}`)
+    }
+  } catch (err) {
+    if (err instanceof PairUrlError) throw err
+    throw new PairUrlError(`server is not a valid URL: ${server}`)
+  }
+  // Strip trailing slash so `${server}${path}` never produces `//`.
+  return { server: server.replace(/\/$/, ''), token }
+}