bazilion 0.0.0 → 0.1.0

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

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

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

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

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