bazilion 0.0.0 → 0.1.1

package/apps/mobile/app/settings.tsx

@@ -1,419 +0,0 @@
-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

@@ -1,49 +0,0 @@
-{
-  "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

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

package/apps/mobile/metro.config.js

@@ -1,28 +0,0 @@
-// 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

@@ -1,44 +0,0 @@
-{
-  "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

@@ -1,66 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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 }
-}