bazilion 0.0.0

package/apps/mobile/app/agents/[id]/index.tsx

@@ -0,0 +1,166 @@
+import type { ResolvedAgent } from '@bazilion/api-types'
+import { ApiClientError } from '@bazilion/client'
+import { router, useLocalSearchParams } from 'expo-router'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { clearCredentials, clientFor, loadCredentials } from '@/src/auth'
+import { useColors } from '@/src/theme-context'
+import { type Colors, fonts, radii } from '@/src/theme'
+
+type Load =
+  | { kind: 'loading' }
+  | { kind: 'ready'; agent: ResolvedAgent }
+  | { kind: 'error'; message: string }
+
+export default function AgentDetail() {
+  const { id } = useLocalSearchParams<{ id: string }>()
+  const [load, setLoad] = useState<Load>({ kind: 'loading' })
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+
+  const fetchAgent = useCallback(async () => {
+    setLoad({ kind: 'loading' })
+    const creds = await loadCredentials()
+    if (!creds) {
+      router.replace('/pair')
+      return
+    }
+    try {
+      const agent = await clientFor(creds).get<ResolvedAgent>(`/api/agents/${id}`)
+      setLoad({ kind: 'ready', agent })
+    } 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 })
+    }
+  }, [id])
+
+  useEffect(() => {
+    fetchAgent()
+  }, [fetchAgent])
+
+  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 agent</Text>
+        <Text style={styles.errorBody}>{load.message}</Text>
+        <Pressable style={styles.primaryBtn} onPress={fetchAgent}>
+          <Text style={styles.primaryBtnText}>Retry</Text>
+        </Pressable>
+      </View>
+    )
+  }
+
+  const a = load.agent
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <Text style={styles.name}>{a.agent.name}</Text>
+      <Text style={styles.subtitle}>{a.agent.id}</Text>
+
+      <Section label="status">
+        <Text style={styles.mono}>{a.agent.status}</Text>
+      </Section>
+
+      <Section label="model">
+        <Text style={styles.mono}>{a.model}</Text>
+      </Section>
+
+      <Section label="profile">
+        <Text style={styles.mono}>{a.agent.profileId}</Text>
+      </Section>
+
+      <Section label="reasoning">
+        <Text style={styles.mono}>{a.reasoningLevel}</Text>
+      </Section>
+
+      <Section label="group">
+        <Text style={styles.mono}>{a.group.name}</Text>
+        <Text style={styles.dim}>{a.group.path}</Text>
+      </Section>
+
+      <Section label={`skills (${a.skills.length})`}>
+        {a.skills.length === 0 ? (
+          <Text style={styles.dim}>(none attached)</Text>
+        ) : (
+          a.skills.map((name) => (
+            <Text key={name} style={styles.mono}>
+              {name}
+            </Text>
+          ))
+        )}
+      </Section>
+
+      <Pressable
+        style={({ pressed }) => [styles.primaryBtn, pressed && styles.primaryBtnPressed]}
+        onPress={() => router.push(`/agents/${a.agent.id}/chat`)}
+      >
+        <Text style={styles.primaryBtnText}>Open chat</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>
+  )
+}
+
+const makeStyles = (colors: Colors) =>
+  StyleSheet.create({
+    screen: { flex: 1, backgroundColor: colors.background },
+    content: { padding: 20, gap: 8 },
+    centered: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24, gap: 12 },
+    name: { fontSize: 26, fontFamily: fonts.display, color: colors.foreground },
+    subtitle: { fontFamily: fonts.mono, fontSize: 12, color: colors.mochaLight, marginBottom: 8 },
+    section: { marginTop: 12 },
+    sectionLabel: {
+      fontSize: 11,
+      color: colors.mocha,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+      marginBottom: 4,
+      fontFamily: fonts.bodyMedium,
+    },
+    sectionBody: { gap: 2 },
+    mono: { fontFamily: fonts.mono, fontSize: 13, color: colors.charcoal },
+    dim: { color: colors.mochaLight, fontSize: 13, fontFamily: fonts.body },
+    placeholder: {
+      marginTop: 32,
+      padding: 16,
+      borderRadius: radii.md,
+      backgroundColor: colors.ivory,
+      gap: 6,
+    },
+    placeholderTitle: { fontSize: 14, fontFamily: fonts.bodyMedium, color: colors.mocha },
+    placeholderBody: { fontSize: 12, color: colors.mochaLight, lineHeight: 18, fontFamily: fonts.body },
+    errorTitle: { fontSize: 18, fontFamily: fonts.bodyBold, color: colors.foreground },
+    errorBody: { color: colors.destructive, textAlign: 'center', fontFamily: fonts.body },
+    primaryBtn: {
+      marginTop: 24,
+      paddingHorizontal: 20,
+      paddingVertical: 12,
+      borderRadius: radii.md,
+      backgroundColor: colors.sapphire,
+      alignItems: 'center',
+    },
+    primaryBtnPressed: { backgroundColor: colors.sapphireDeep },
+    primaryBtnText: { color: colors.primaryForeground, fontSize: 15, fontFamily: fonts.bodyMedium },
+  })

package/apps/mobile/app/agents/index.tsx

@@ -0,0 +1,212 @@
+import type { Agent } from '@bazilion/api-types'
+import { ApiClientError } from '@bazilion/client'
+import { router, useFocusEffect } from 'expo-router'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import {
+  clearCredentials,
+  clientFor,
+  type Credentials,
+  loadCredentials,
+} from '@/src/auth'
+import { useColors } from '@/src/theme-context'
+import { type Colors, fonts, radii } from '@/src/theme'
+
+type Load =
+  | { kind: 'loading' }
+  | { kind: 'ready'; agents: Agent[]; creds: Credentials }
+  | { kind: 'error'; message: string }
+
+export default function AgentsList() {
+  const [load, setLoad] = useState<Load>({ kind: 'loading' })
+  const [refreshing, setRefreshing] = useState(false)
+  // Skip the loading-spinner on re-focus (navigating back from chat /
+  // settings) — show the stale list while the background refetch runs so
+  // the screen doesn't flash empty every time.
+  const hasLoaded = useRef(false)
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+
+  const fetchAgents = useCallback(async (initial: boolean) => {
+    if (initial) setLoad({ kind: 'loading' })
+    const creds = await loadCredentials()
+    if (!creds) {
+      router.replace('/pair')
+      return
+    }
+    try {
+      const agents = await clientFor(creds).get<Agent[]>('/api/agents')
+      setLoad({ kind: 'ready', agents, creds })
+    } catch (err) {
+      if (err instanceof ApiClientError && err.status === 401) {
+        // Token was revoked or the daemon's auth was rotated. Force re-pair.
+        await clearCredentials()
+        router.replace('/pair')
+        return
+      }
+      const message = err instanceof Error ? err.message : 'unknown error'
+      setLoad({ kind: 'error', message })
+    }
+  }, [])
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchAgents(!hasLoaded.current)
+      hasLoaded.current = true
+    }, [fetchAgents]),
+  )
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true)
+    try {
+      await fetchAgents(false)
+    } finally {
+      setRefreshing(false)
+    }
+  }, [fetchAgents])
+
+  const onUnpair = useCallback(async () => {
+    await clearCredentials()
+    router.replace('/pair')
+  }, [])
+
+  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 agents</Text>
+        <Text style={styles.errorBody}>{load.message}</Text>
+        <Pressable style={styles.primaryBtn} onPress={() => fetchAgents(true)}>
+          <Text style={styles.primaryBtnText}>Retry</Text>
+        </Pressable>
+        <Pressable style={styles.linkBtn} onPress={onUnpair}>
+          <Text style={styles.linkBtnText}>Unpair</Text>
+        </Pressable>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.header}>
+        <Text style={styles.headerServer}>{load.creds.server}</Text>
+        <Pressable onPress={() => router.push('/settings')} hitSlop={10}>
+          <Text style={styles.headerSettings}>Settings</Text>
+        </Pressable>
+      </View>
+      <FlatList
+        data={load.agents}
+        keyExtractor={(a) => a.id}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <Text style={styles.emptyTitle}>No agents yet</Text>
+            <Text style={styles.emptyBody}>
+              Spawn one from the web UI or `bazilion agent spawn` on the server.
+            </Text>
+          </View>
+        }
+        renderItem={({ item }) => <AgentRow agent={item} />}
+        ItemSeparatorComponent={() => <View style={styles.separator} />}
+      />
+    </View>
+  )
+}
+
+function AgentRow({ agent }: { agent: Agent }) {
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+  return (
+    <Pressable
+      style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+      onPress={() => router.push(`/agents/${agent.id}/chat`)}
+      onLongPress={() => router.push(`/agents/${agent.id}`)}
+    >
+      <View style={styles.rowMain}>
+        <Text style={styles.rowName} numberOfLines={1}>
+          {agent.name}
+        </Text>
+        <Text style={styles.rowModel} numberOfLines={1}>
+          {agent.modelOverride ?? '(profile default)'}
+        </Text>
+      </View>
+      <View style={[styles.pill, agent.status === 'archived' ? styles.pillArchived : styles.pillActive]}>
+        <Text style={styles.pillText}>{agent.status}</Text>
+      </View>
+    </Pressable>
+  )
+}
+
+const makeStyles = (colors: Colors) =>
+  StyleSheet.create({
+    screen: { flex: 1, backgroundColor: colors.background },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.border,
+      backgroundColor: colors.ivory,
+    },
+    headerServer: {
+      fontFamily: fonts.mono,
+      fontSize: 12,
+      color: colors.mocha,
+      flex: 1,
+    },
+    headerSettings: { color: colors.sapphireDeep, fontSize: 14, fontFamily: fonts.bodyMedium },
+    centered: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24, gap: 12 },
+    errorTitle: { fontSize: 18, fontFamily: fonts.bodyBold, color: colors.foreground },
+    errorBody: { color: colors.destructive, textAlign: 'center', fontFamily: fonts.body },
+    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 },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      backgroundColor: colors.card,
+    },
+    rowPressed: { backgroundColor: colors.frost },
+    rowMain: { flex: 1, marginRight: 12 },
+    rowName: { fontSize: 16, fontFamily: fonts.bodyMedium, color: colors.foreground },
+    rowModel: { fontSize: 12, color: colors.mochaLight, marginTop: 2, fontFamily: fonts.mono },
+    separator: { height: StyleSheet.hairlineWidth, backgroundColor: colors.frost, marginLeft: 16 },
+    pill: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: radii.md },
+    pillActive: { backgroundColor: colors.sapphireGlow },
+    pillArchived: { backgroundColor: colors.frost },
+    pillText: {
+      fontSize: 11,
+      fontFamily: fonts.bodyMedium,
+      textTransform: 'lowercase',
+      color: colors.mocha,
+    },
+    empty: { padding: 32, alignItems: 'center', gap: 8 },
+    emptyTitle: { fontSize: 16, fontFamily: fonts.bodyMedium, color: colors.foreground },
+    emptyBody: { color: colors.mocha, textAlign: 'center', fontSize: 13, fontFamily: fonts.body },
+  })

package/apps/mobile/app/index.tsx

@@ -0,0 +1,21 @@
+import { Redirect } from 'expo-router'
+import { useEffect, useState } from 'react'
+import { loadCredentials } from '@/src/auth'
+
+type Gate = { kind: 'loading' } | { kind: 'unpaired' } | { kind: 'paired' }
+
+export default function Index() {
+  const [gate, setGate] = useState<Gate>({ kind: 'loading' })
+
+  useEffect(() => {
+    loadCredentials()
+      .then((creds) => setGate({ kind: creds ? 'paired' : 'unpaired' }))
+      .catch(() => setGate({ kind: 'unpaired' }))
+  }, [])
+
+  // Render nothing while SecureStore resolves. The native splash is still up
+  // at this point on cold launch; rendering an ActivityIndicator briefly
+  // produced a visible flash between splash dismissal and the redirect.
+  if (gate.kind === 'loading') return null
+  return <Redirect href={gate.kind === 'paired' ? '/agents' : '/pair'} />
+}

package/apps/mobile/app/pair.tsx

@@ -0,0 +1,226 @@
+import { CameraView, useCameraPermissions } from 'expo-camera'
+import { router } from 'expo-router'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  Button,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native'
+import { saveCredentials, verifyCredentials } from '@/src/auth'
+import { PairUrlError, parsePairingUrl } from '@/src/pair-url'
+import { useColors } from '@/src/theme-context'
+import { type Colors, fonts, radii } from '@/src/theme'
+
+/**
+ * Browsers require a secure context (HTTPS or localhost) for
+ * `navigator.mediaDevices.getUserMedia`. Over LAN / Tailscale on http://,
+ * `requestPermission()` silently rejects without ever prompting. Detect
+ * that up front so the user doesn't tap a button that does nothing.
+ */
+function webCameraBlockedReason(): string | null {
+  if (Platform.OS !== 'web') return null
+  if (typeof window === 'undefined') return null
+  const { protocol, hostname } = window.location
+  if (protocol === 'https:') return null
+  if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1') return null
+  return `Camera access on the web requires HTTPS. You are on ${protocol}//${hostname} — use the manual-paste flow below, or open this page from a phone via Expo Go.`
+}
+
+type Mode = 'scan' | 'paste'
+
+export default function PairScreen() {
+  const [mode, setMode] = useState<Mode>('scan')
+  const [permission, requestPermission] = useCameraPermissions()
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [pasteValue, setPasteValue] = useState('')
+  // Expo fires the barcode callback repeatedly on every frame — dedupe.
+  const handled = useRef(false)
+  const colors = useColors()
+  const styles = useMemo(() => makeStyles(colors), [colors])
+
+  const handlePairingUrl = useCallback(async (raw: string) => {
+    if (handled.current) return
+    handled.current = true
+    setBusy(true)
+    setError(null)
+    try {
+      const creds = parsePairingUrl(raw)
+      await verifyCredentials(creds)
+      await saveCredentials(creds)
+      router.replace('/agents')
+    } catch (err) {
+      handled.current = false
+      const msg =
+        err instanceof PairUrlError
+          ? `QR content is not a pairing URL: ${err.message}`
+          : err instanceof Error
+            ? err.message
+            : 'unknown error'
+      setError(msg)
+      Alert.alert('Pairing failed', msg)
+    } finally {
+      setBusy(false)
+    }
+  }, [])
+
+  if (mode === 'paste') {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Paste pairing URL</Text>
+        <Text style={styles.hint}>
+          Run `bazilion token create &lt;label&gt; --qr` on your server to generate one.
+        </Text>
+        <TextInput
+          value={pasteValue}
+          onChangeText={setPasteValue}
+          placeholder="bazilion://pair?server=…&token=…"
+          autoCapitalize="none"
+          autoCorrect={false}
+          style={styles.input}
+          multiline
+        />
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+        <View style={styles.row}>
+          <Button
+            title={busy ? 'Verifying…' : 'Pair'}
+            onPress={() => handlePairingUrl(pasteValue.trim())}
+            disabled={busy || !pasteValue.trim()}
+          />
+          <Button title="Scan instead" onPress={() => setMode('scan')} disabled={busy} />
+        </View>
+      </View>
+    )
+  }
+
+  if (!permission) {
+    return (
+      <View style={[styles.container, styles.centered]}>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+
+  if (!permission.granted) {
+    const webBlocked = webCameraBlockedReason()
+    return (
+      <View style={[styles.container, styles.centered]}>
+        <Text style={styles.title}>Camera access needed</Text>
+        <Text style={styles.hint}>
+          Bazilion uses the camera only to scan pairing QR codes. Nothing is recorded.
+        </Text>
+        <Text style={styles.diag}>
+          status: {permission.status} · canAskAgain: {String(permission.canAskAgain)}
+        </Text>
+        {webBlocked ? <Text style={styles.error}>{webBlocked}</Text> : null}
+        {!permission.canAskAgain && !webBlocked ? (
+          <Text style={styles.error}>
+            The OS won't prompt again — camera was denied earlier. Grant it in Settings → Expo Go
+            → Camera, then restart Expo Go.
+          </Text>
+        ) : null}
+        <Button
+          title="Grant camera access"
+          onPress={async () => {
+            try {
+              const r = await requestPermission()
+              if (!r.granted) {
+                Alert.alert(
+                  'Camera not granted',
+                  `status=${r.status} canAskAgain=${r.canAskAgain}`,
+                )
+              }
+            } catch (err) {
+              Alert.alert('requestPermission threw', String(err))
+            }
+          }}
+          disabled={!!webBlocked}
+        />
+        <View style={{ height: 16 }} />
+        <Button title="Paste URL instead" onPress={() => setMode('paste')} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <CameraView
+        style={styles.camera}
+        facing="back"
+        barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
+        onBarcodeScanned={busy || handled.current ? undefined : ({ data }) => handlePairingUrl(data)}
+      >
+        <View style={styles.overlay}>
+          <Text style={styles.overlayTitle}>Scan pairing QR</Text>
+          <Text style={styles.overlayHint}>
+            Point the camera at the QR code emitted by `bazilion token create --qr`.
+          </Text>
+          {busy ? <ActivityIndicator style={{ marginTop: 12 }} /> : null}
+          {error ? <Text style={[styles.error, styles.onCamera]}>{error}</Text> : null}
+        </View>
+      </CameraView>
+      <Pressable style={styles.fallback} onPress={() => setMode('paste')}>
+        <Text style={styles.fallbackText}>Paste URL instead</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const makeStyles = (colors: Colors) =>
+  StyleSheet.create({
+    container: { flex: 1, backgroundColor: colors.background },
+    centered: { justifyContent: 'center', alignItems: 'center', padding: 24, gap: 12 },
+    title: {
+      fontSize: 22,
+      fontFamily: fonts.display,
+      color: colors.foreground,
+      marginBottom: 8,
+    },
+    hint: { color: colors.mocha, marginBottom: 16, textAlign: 'center', fontFamily: fonts.body },
+    input: {
+      margin: 16,
+      padding: 12,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: radii.md,
+      minHeight: 80,
+      fontFamily: fonts.mono,
+      color: colors.foreground,
+      backgroundColor: colors.ivory,
+    },
+    row: { flexDirection: 'row', gap: 12, justifyContent: 'center', marginTop: 8 },
+    error: { color: colors.destructive, margin: 16, textAlign: 'center', fontFamily: fonts.body },
+    diag: { color: colors.mochaLight, fontFamily: fonts.mono, fontSize: 12, marginBottom: 12 },
+    // Camera-overlay backdrop is intentionally theme-independent: sits on top
+    // of live camera video, needs to read as a translucent dark scrim regardless
+    // of light/dark theme.
+    onCamera: { backgroundColor: 'rgba(0,0,0,0.6)', padding: 8, borderRadius: 4 },
+    camera: { flex: 1 },
+    overlay: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      padding: 24,
+      paddingBottom: 80,
+    },
+    overlayTitle: {
+      color: '#FFFFFF',
+      fontSize: 20,
+      fontFamily: fonts.display,
+      marginBottom: 4,
+    },
+    overlayHint: { color: '#ddd', fontFamily: fonts.body },
+    fallback: {
+      position: 'absolute',
+      bottom: 24,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+    },
+    fallbackText: { color: '#FFFFFF', textDecorationLine: 'underline', fontFamily: fonts.body },
+  })