init: extract mobile app from bincio_activity

Expo/React Native app with local SQLite archive and bincio-activity sync.

.gitignore

@@ -0,0 +1,18 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# Generated native projects (managed workflow — produced by EAS, not committed)
+android/
+ios/
+
+# Local env overrides
+.env.local

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/misc.xml

@@ -0,0 +1,5 @@
+<project version="4">
+  <component name="ProjectRootManager" version="2">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/mobile.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/mobile.iml" filepath="$PROJECT_DIR$/.idea/mobile.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

ThemeContext.tsx

@@ -0,0 +1,51 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useSQLiteContext } from 'expo-sqlite';
+import { getSetting, setSetting } from '@/db/queries';
+import { autoKey, PALETTES, type PaletteKey, type Theme } from '@/theme';
+
+type ThemeCtx = {
+  theme: Theme;
+  paletteKey: PaletteKey;
+  setPaletteOverride: (key: PaletteKey) => void;
+};
+
+const ThemeContext = createContext<ThemeCtx>({
+  theme: PALETTES.default,
+  paletteKey: 'auto',
+  setPaletteOverride: () => {},
+});
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const db = useSQLiteContext();
+  const [paletteKey, setPaletteKey] = useState<PaletteKey>('auto');
+
+  useEffect(() => {
+    getSetting(db, 'palette_override').then(val => {
+      if (val) setPaletteKey(val as PaletteKey);
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function setPaletteOverride(key: PaletteKey) {
+    setPaletteKey(key);
+    setSetting(db, 'palette_override', key);
+  }
+
+  const resolved = paletteKey === 'auto' ? autoKey() : paletteKey;
+  const theme = PALETTES[resolved as keyof typeof PALETTES] ?? PALETTES.default;
+
+  return (
+    <ThemeContext.Provider value={{ theme, paletteKey, setPaletteOverride }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): Theme {
+  return useContext(ThemeContext).theme;
+}
+
+export function usePaletteControl(): Pick<ThemeCtx, 'paletteKey' | 'setPaletteOverride'> {
+  const { paletteKey, setPaletteOverride } = useContext(ThemeContext);
+  return { paletteKey, setPaletteOverride };
+}

app.json

@@ -0,0 +1,49 @@
+{
+  "expo": {
+    "name": "Bincio",
+    "slug": "bincio",
+    "version": "0.1.0",
+    "orientation": "portrait",
+    "scheme": "bincio",
+    "userInterfaceStyle": "dark",
+    "newArchEnabled": true,
+    "platforms": ["ios", "android"],
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#09090b"
+    },
+    "android": {
+      "package": "org.bincio.app",
+      "usesCleartextTraffic": true,
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#09090b"
+      },
+      "permissions": [
+        "android.permission.READ_EXTERNAL_STORAGE",
+        "android.permission.READ_MEDIA_VIDEO",
+        "android.permission.RECEIVE_BOOT_COMPLETED",
+        "android.permission.VIBRATE",
+        "android.permission.POST_NOTIFICATIONS"
+      ]
+    },
+    "ios": {
+      "bundleIdentifier": "org.bincio.app",
+      "supportsTablet": true
+    },
+    "plugins": [
+      "expo-system-ui",
+      "expo-router",
+      "expo-sqlite",
+      [
+        "expo-document-picker",
+        { "iCloudContainerEnvironment": "Production" }
+      ],
+      "expo-background-fetch",
+      "expo-task-manager",
+      "@maplibre/maplibre-react-native"
+    ]
+  }
+}

app/(tabs)/_layout.tsx

@@ -0,0 +1,45 @@
+import { Tabs } from 'expo-router';
+import { Platform } from 'react-native';
+import { useTheme } from '@/ThemeContext';
+
+const isKaroo = Platform.OS === 'android' && (Platform.Version as number) < 29;
+
+export default function TabLayout() {
+  const theme = useTheme();
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: { backgroundColor: '#18181b', borderTopColor: '#27272a' },
+        tabBarActiveTintColor: theme.accent,
+        tabBarInactiveTintColor: '#71717a',
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{ title: 'Feed', tabBarIcon: ({ color }) => <TabIcon label="⬡" color={color} /> }}
+      />
+      <Tabs.Screen
+        name="import"
+        options={{ title: 'Import', tabBarIcon: ({ color }) => <TabIcon label="↑" color={color} /> }}
+      />
+      <Tabs.Screen
+        name="search"
+        options={{
+          title: 'Search',
+          tabBarIcon: ({ color }) => <TabIcon label="⌕" color={color} />,
+          href: isKaroo ? null : '/search',
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{ title: 'Settings', tabBarIcon: ({ color }) => <TabIcon label="⚙" color={color} /> }}
+      />
+    </Tabs>
+  );
+}
+
+function TabIcon({ label, color }: { label: string; color: string }) {
+  const { Text } = require('react-native');
+  return <Text style={{ color, fontSize: 18 }}>{label}</Text>;
+}

app/(tabs)/import.tsx

@@ -0,0 +1,604 @@
+import * as DocumentPicker from 'expo-document-picker';
+import * as FileSystem from 'expo-file-system/legacy';
+import { useFocusEffect } from 'expo-router';
+import { useSQLiteContext } from 'expo-sqlite';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AppState, PermissionsAndroid, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { insertActivity, isSourcePathImported, getSetting } from '@/db/queries';
+import { PyodideWebView } from '@/extraction/PyodideWebView';
+import { extractFile, waitForEngine, onEngineProgress, isEngineAvailable } from '@/extraction/extractActivity';
+import { extractFileViaServer, checkServerAuth } from '@/extraction/extractServer';
+import { useTheme } from '@/ThemeContext';
+
+async function sha256hex(text: string): Promise<string> {
+  const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text));
+  return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
+const FIT_EXTENSIONS   = ['.fit', '.fit.gz'];
+const OTHER_EXTENSIONS = ['.gpx', '.tcx', '.gpx.gz', '.tcx.gz'];
+const ALL_NATIVE_EXTENSIONS = [...FIT_EXTENSIONS, ...OTHER_EXTENSIONS];
+
+type ImportState =
+  | { status: 'idle' }
+  | { status: 'loading'; msg: string; current: number; total: number }
+  | { status: 'done'; count: number; errors: Array<{ name: string; message: string }> }
+  | { status: 'error'; message: string };
+
+export default function ImportScreen() {
+  const db = useSQLiteContext();
+  const theme = useTheme();
+  const [state, setState] = useState<ImportState>({ status: 'idle' });
+  const [watchPath, setWatchPath] = useState('');
+  const [engineAvailable, setEngineAvailable] = useState<boolean | null>(null);
+  const isImporting = useRef(false);
+
+  // Track engine availability so we can show the server-extraction notice.
+  useEffect(() => {
+    waitForEngine(30_000)
+      .then(() => setEngineAvailable(true))
+      .catch((e: unknown) => {
+        if (e instanceof Error && e.message === 'engine_unavailable') setEngineAvailable(false);
+      });
+  }, []);
+
+  // Reload watch path every time the Import tab comes into focus so changes
+  // saved in Settings are picked up without remounting the tab.
+  useFocusEffect(useCallback(() => {
+    if (Platform.OS !== 'android') return;
+    const row = db.getFirstSync<{ value: string }>(
+      'SELECT value FROM settings WHERE key = ?',
+      ['auto_import_path'],
+    );
+    setWatchPath(row?.value ?? '');
+  }, [db]));
+
+  // Auto-scan watch folder on mount and when app comes to foreground.
+  useEffect(() => {
+    if (Platform.OS !== 'android') return;
+    runAutoScan();
+
+    const sub = AppState.addEventListener('change', (next) => {
+      if (next === 'active') runAutoScan();
+    });
+    return () => sub.remove();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function runAutoScan() {
+    if (isImporting.current) return;
+    const path = await getSetting(db, 'auto_import_path');
+    if (!path) return;
+    const instanceUrl = await getSetting(db, 'instance_url');
+    if (!instanceUrl) return;
+
+    // Wait for engine — skip auto-scan on init failure, but continue if device is
+    // too old for local extraction (importNativeFile will use the server instead).
+    try { await waitForEngine(120_000); } catch (e: unknown) {
+      if (!(e instanceof Error) || e.message !== 'engine_unavailable') return;
+    }
+
+    // Server-mode requires a valid token — verify before touching any files.
+    if (isEngineAvailable() === false) {
+      const token = await getSetting(db, 'api_token');
+      if (!token) return;
+      try { await checkServerAuth(instanceUrl, token); } catch { return; }
+    }
+
+    const newFiles = await discoverNewFiles(db, path);
+    if (newFiles.length === 0) return;
+
+    isImporting.current = true;
+    try {
+      await processBatch(newFiles.map(f => ({ uri: `file://${f}`, name: f.split('/').pop() ?? f, sourcePath: f })));
+    } finally {
+      isImporting.current = false;
+    }
+  }
+
+  async function manualScan() {
+    if (isImporting.current) return;
+    const path = await getSetting(db, 'auto_import_path');
+    if (!path) return;
+    const instanceUrl = await getSetting(db, 'instance_url');
+    if (!instanceUrl) {
+      setState({ status: 'error', message: 'No Bincio instance configured. Go to Settings and enter an instance URL first — it\'s needed to download the extraction engine.' });
+      return;
+    }
+
+    const serverMode = isEngineAvailable() === false;
+    if (!serverMode) {
+      setState({ status: 'loading', msg: 'Preparing extraction engine…', current: 0, total: 0 });
+      const unsubScan = onEngineProgress((msg) =>
+        setState({ status: 'loading', msg, current: 0, total: 0 }),
+      );
+      try {
+        await waitForEngine();
+      } catch (e: unknown) {
+        if (!(e instanceof Error) || e.message !== 'engine_unavailable') {
+          setState({ status: 'error', message: e instanceof Error ? e.message : String(e) });
+          return;
+        }
+        // engine_unavailable — fall through to server mode
+      } finally {
+        unsubScan();
+      }
+    } else {
+      const token = await getSetting(db, 'api_token');
+      if (!token) {
+        setState({ status: 'error', message: 'Server extraction requires a Bincio account. Connect in Settings.' });
+        return;
+      }
+      // Verify the token is valid before processing any files.
+      setState({ status: 'loading', msg: 'Checking connection…', current: 0, total: 0 });
+      try {
+        await checkServerAuth(instanceUrl, token);
+      } catch (e: unknown) {
+        setState({ status: 'error', message: e instanceof Error ? e.message : String(e) });
+        return;
+      }
+    }
+
+    setState({ status: 'loading', msg: 'Scanning…', current: 0, total: 0 });
+    const newFiles = await discoverNewFiles(db, path);
+    if (newFiles.length === 0) {
+      setState({ status: 'done', count: 0, errors: [] });
+      return;
+    }
+
+    isImporting.current = true;
+    try {
+      await processBatch(newFiles.map(f => ({ uri: `file://${f}`, name: f.split('/').pop() ?? f, sourcePath: f })));
+    } finally {
+      isImporting.current = false;
+    }
+  }
+
+  async function pickFiles() {
+    if (isImporting.current) return;
+    setState({ status: 'loading', msg: 'Picking files…', current: 0, total: 0 });
+    try {
+      let result: DocumentPicker.DocumentPickerResult;
+      try {
+        result = await DocumentPicker.getDocumentAsync({
+          type: ['*/*'],
+          copyToCacheDirectory: true,
+          multiple: true,
+        });
+      } catch (pickerErr: unknown) {
+        // Some Android devices (e.g. Karoo) have no system file picker app.
+        const raw = pickerErr instanceof Error ? pickerErr.message : String(pickerErr);
+        const noApp = raw.includes('ActivityNotFoundException') || raw.includes('No Activity found');
+        setState({
+          status: 'error',
+          message: noApp
+            ? 'No file picker available on this device. Set a Watch directory in Settings to import from a folder.'
+            : raw,
+        });
+        return;
+      }
+
+      if (result.canceled || !result.assets?.length) {
+        setState({ status: 'idle' });
+        return;
+      }
+      isImporting.current = true;
+      const unsubPick = onEngineProgress((msg) =>
+        setState({ status: 'loading', msg, current: 0, total: 0 }),
+      );
+      try {
+        await processBatch(result.assets.map(a => ({ uri: a.uri, name: a.name ?? '', sourcePath: null })));
+      } finally {
+        unsubPick();
+        isImporting.current = false;
+      }
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setState({ status: 'error', message: msg });
+      isImporting.current = false;
+    }
+  }
+
+  async function processBatch(files: Array<{ uri: string; name: string; sourcePath: string | null }>) {
+    const total  = files.length;
+    const errors: Array<{ name: string; message: string }> = [];
+    let   count  = 0;
+
+    for (let i = 0; i < files.length; i++) {
+      const { uri, name, sourcePath } = files[i];
+      const lower = name.toLowerCase();
+
+      setState({ status: 'loading', msg: `Processing ${name}…`, current: i + 1, total });
+
+      try {
+        if (lower.endsWith('.json')) {
+          await importBasJson(uri, name, sourcePath, (msg) =>
+            setState({ status: 'loading', msg, current: i + 1, total }),
+          );
+        } else if (ALL_NATIVE_EXTENSIONS.some(ext => lower.endsWith(ext))) {
+          await importNativeFile(uri, name, sourcePath, (msg) =>
+            setState({ status: 'loading', msg, current: i + 1, total }),
+          );
+        } else {
+          errors.push({ name, message: 'Unsupported file type' });
+          continue;
+        }
+        count++;
+      } catch (e: unknown) {
+        errors.push({ name, message: e instanceof Error ? e.message : String(e) });
+      }
+    }
+
+    setState({ status: 'done', count, errors });
+  }
+
+  // ── BAS JSON import (no extraction needed) ──────────────────────────────────
+
+  async function importBasJson(
+    uri: string,
+    _name: string,
+    sourcePath: string | null,
+    onStatus: (msg: string) => void,
+  ) {
+    onStatus('Importing…');
+    const text   = await FileSystem.readAsStringAsync(uri);
+    const detail = JSON.parse(text);
+
+    if (!detail.id || !detail.started_at) {
+      throw new Error('Not a valid BAS activity JSON (missing id or started_at)');
+    }
+
+    const hash    = detail.source_hash ?? await sha256hex(text);
+    const origDir = `${FileSystem.documentDirectory}originals/`;
+    await FileSystem.makeDirectoryAsync(origDir, { intermediates: true });
+    const dest = `${origDir}${detail.id}.json`;
+    await FileSystem.copyAsync({ from: uri, to: dest });
+
+    await insertActivity(db, {
+      id: detail.id,
+      source_hash: hash,
+      detail_json: text,
+      timeseries_json: null,
+      geojson: null,
+      original_path: dest,
+      source_path: sourcePath,
+      origin: 'local',
+    });
+  }
+
+  // ── FIT / GPX / TCX import via Pyodide (local) or server fallback ───────────
+
+  async function importNativeFile(
+    uri: string,
+    name: string,
+    sourcePath: string | null,
+    onStatus: (msg: string) => void,
+  ) {
+    onStatus('Reading file…');
+
+    // Read the original file as base64 so we can (a) pass it to the extractor
+    // and (b) copy it to permanent storage without a second read.
+    const base64 = await FileSystem.readAsStringAsync(uri, {
+      encoding: FileSystem.EncodingType.Base64,
+    });
+
+    let result;
+
+    if (isEngineAvailable() === false) {
+      // Device WebView is too old for WebAssembly.Global (Chrome <69).
+      // Send the raw file to the Bincio instance for server-side extraction.
+      const instanceUrl = await getInstanceUrl(db);
+      const token = db.getFirstSync<{ value: string }>(
+        'SELECT value FROM settings WHERE key = ?', ['api_token'],
+      )?.value ?? '';
+      if (!token) throw new Error('Server extraction requires a Bincio account — connect in Settings.');
+      result = await extractFileViaServer(name, base64, instanceUrl, token, onStatus);
+    } else {
+      // Fetch the bincio wheel here (React Native networking), not inside the
+      // WebView. WKWebView blocks HTTP requests via ATS; RN native networking
+      // allows local-network HTTP (NSAllowsLocalNetworking=true in Info.plist).
+      const instanceUrl = await getInstanceUrl(db);
+      onStatus('Fetching Bincio engine…');
+      const { base64: wheelBase64, filename: wheelFilename } = await fetchWheelBase64(instanceUrl);
+      result = await extractFile(name, base64, wheelBase64, wheelFilename, onStatus);
+    }
+
+    onStatus('Saving…');
+
+    // Copy original file to permanent storage (keeps original bytes for future re-extraction)
+    const ext     = name.includes('.') ? name.slice(name.lastIndexOf('.')) : '';
+    const origDir = `${FileSystem.documentDirectory}originals/`;
+    await FileSystem.makeDirectoryAsync(origDir, { intermediates: true });
+    const dest = `${origDir}${result.id}${ext}`;
+    await FileSystem.copyAsync({ from: uri, to: dest });
+
+    await insertActivity(db, {
+      id: result.id,
+      source_hash: result.sourceHash,
+      detail_json: JSON.stringify(result.detail),
+      timeseries_json: result.timeseries ? JSON.stringify(result.timeseries) : null,
+      geojson: result.geojson ? JSON.stringify(result.geojson) : null,
+      original_path: dest,
+      source_path: sourcePath,
+      origin: 'local',
+    });
+  }
+
+  return (
+    <View style={styles.screen}>
+      {/* Hidden WebView for Pyodide — only mounted on devices that can run it.
+          Android <29 has a system WebView (Chrome <69) that lacks WebAssembly.Global
+          AND causes GPU SurfaceView crashes on old drivers. Skip it entirely there. */}
+      {(Platform.OS !== 'android' || (Platform.Version as number) >= 29) && (
+        <View style={styles.hiddenEngine}>
+          <PyodideWebView />
+        </View>
+      )}
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <Text style={styles.header}>Import</Text>
+
+      <Text style={styles.body}>
+        Import FIT, GPX, or TCX files — extracted on your device, nothing uploaded.
+        You can also import pre-extracted BAS <Text style={[styles.code, { color: theme.accent }]}>.json</Text> files.
+      </Text>
+
+      {engineAvailable === false && (
+        <View style={styles.serverNotice}>
+          <Text style={styles.serverNoticeText}>
+            This device's Android WebView is too old to run local extraction (requires Chrome 69+).
+            Activities are processed by your Bincio instance instead — a connected account is required.
+          </Text>
+        </View>
+      )}
+
+      {watchPath ? (
+        <View style={styles.watchBox}>
+          <Text style={styles.watchLabel}>Watch folder</Text>
+          <Text style={styles.watchPath} numberOfLines={2}>{watchPath}</Text>
+          <Pressable
+            style={[styles.scanButton, state.status === 'loading' && styles.buttonDisabled]}
+            onPress={state.status !== 'loading' ? manualScan : undefined}
+          >
+            <Text style={styles.buttonText}>
+              {state.status === 'loading' ? 'Working…' : '↺ Scan for new rides'}
+            </Text>
+          </Pressable>
+        </View>
+      ) : null}
+
+      <Pressable
+        style={[styles.button, state.status === 'loading' && styles.buttonDisabled]}
+        onPress={state.status !== 'loading' ? pickFiles : undefined}
+      >
+        <Text style={styles.buttonText}>
+          {state.status === 'loading' ? 'Working…' : '＋ Pick files'}
+        </Text>
+      </Pressable>
+
+      {state.status === 'loading' && (
+        <View style={styles.statusBox}>
+          {state.total > 1 && (
+            <Text style={styles.statusCounter}>
+              File {state.current} of {state.total}
+            </Text>
+          )}
+          <Text style={[styles.statusMsg, { color: theme.accent }]}>{state.msg}</Text>
+          {engineAvailable !== false && (
+            <Text style={styles.statusHint}>
+              First run downloads ~35 MB (Python runtime + packages). Subsequent runs are instant.
+            </Text>
+          )}
+        </View>
+      )}
+
+      {state.status === 'done' && (
+        <View style={[styles.success, state.count === 0 && state.errors.length === 0 && styles.successEmpty]}>
+          <Text style={styles.successText}>
+            {state.count === 0 && state.errors.length === 0
+              ? 'No new rides found'
+              : `✓ Imported ${state.count} ${state.count === 1 ? 'activity' : 'activities'}`}
+          </Text>
+          {state.errors.map((e, i) => (
+            <Text key={i} style={styles.batchError}>✗ {e.name}: {e.message}</Text>
+          ))}
+          <Pressable onPress={() => setState({ status: 'idle' })}>
+            <Text style={styles.errorRetry}>Dismiss</Text>
+          </Pressable>
+        </View>
+      )}
+
+      {state.status === 'error' && (
+        <View style={styles.error}>
+          <Text style={styles.errorText}>{state.message}</Text>
+          <Pressable onPress={() => setState({ status: 'idle' })}>
+            <Text style={styles.errorRetry}>Try again</Text>
+          </Pressable>
+        </View>
+      )}
+
+      <View style={styles.divider} />
+
+      <Text style={styles.sectionTitle}>Supported formats</Text>
+      {([
+        ['FIT',      'Garmin, Wahoo, Karoo native format'],
+        ['GPX',      'Most GPS devices and apps'],
+        ['TCX',      'Garmin Training Center'],
+        ['BAS JSON', 'Pre-extracted Bincio format (instant)'],
+      ] as [string, string][]).map(([fmt, desc]) => (
+        <View key={fmt} style={styles.formatRow}>
+          <Text style={styles.formatName}>{fmt}</Text>
+          <Text style={styles.formatDesc}>{desc}</Text>
+        </View>
+      ))}
+
+      <View style={styles.notice}>
+        <Text style={styles.noticeText}>
+          {engineAvailable === false
+            ? 'Activities are sent to your Bincio instance for extraction and stored there + locally. A connected account is required.'
+            : `FIT/GPX/TCX extraction runs entirely on your device.\nA Bincio instance must be reachable on first run to download the extraction engine (~35 MB, then cached).`}
+          {'\n\n'}
+          On Karoo: set Watch directory to <Text style={styles.noticeCode}>/sdcard/FitFiles</Text> in Settings to auto-import rides.
+        </Text>
+      </View>
+    </ScrollView>
+    </View>
+  );
+}
+
+// ── Watch-folder helpers ──────────────────────────────────────────────────────
+
+async function requestStoragePermission(): Promise<boolean> {
+  if (Platform.OS !== 'android') return true;
+  try {
+    const granted = await PermissionsAndroid.request(
+      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+    );
+    return granted === PermissionsAndroid.RESULTS.GRANTED;
+  } catch {
+    return false;
+  }
+}
+
+async function discoverNewFiles(
+  db: ReturnType<typeof useSQLiteContext>,
+  watchPath: string,
+): Promise<string[]> {
+  const ok = await requestStoragePermission();
+  if (!ok) return [];
+
+  // Normalize: strip trailing slash, then use file:// URI for expo-fs
+  const dir = watchPath.replace(/\/+$/, '');
+  const uri = dir.startsWith('file://') ? dir : `file://${dir}`;
+
+  let entries: string[];
+  try {
+    entries = await FileSystem.readDirectoryAsync(uri);
+  } catch {
+    return [];
+  }
+
+  const newFiles: string[] = [];
+  for (const entry of entries) {
+    const lower = entry.toLowerCase();
+    if (!lower.endsWith('.fit')) continue;
+    const fullPath = `${dir}/${entry}`;
+    if (!isSourcePathImported(db, fullPath)) {
+      newFiles.push(fullPath);
+    }
+  }
+  return newFiles;
+}
+
+// ── Module-level helpers ──────────────────────────────────────────────────────
+
+async function getInstanceUrl(db: ReturnType<typeof useSQLiteContext>): Promise<string> {
+  const row = db.getFirstSync<{ value: string }>(
+    'SELECT value FROM settings WHERE key = ?',
+    ['instance_url'],
+  );
+  return (row?.value ?? '').replace(/\/$/, '');
+}
+
+// In-memory cache so repeated imports in one session don't re-download the wheel.
+let _cachedWheel: { base64: string; filename: string } | null = null;
+
+async function fetchWheelBase64(instanceUrl: string): Promise<{ base64: string; filename: string }> {
+  if (_cachedWheel) return _cachedWheel;
+
+  const base = instanceUrl || 'https://bincio.org';
+
+  // Ask the instance for the canonical wheel URL (handles both dev and prod layouts).
+  let wheelUrl = `${base}/api/wheel/download`;
+  let wheelFilename = 'bincio-0.1.0-py3-none-any.whl';
+  try {
+    const vr = await fetch(`${base}/api/wheel/version`, { signal: AbortSignal.timeout(5000) });
+    if (vr.ok) {
+      const d = await vr.json() as { api_url?: string; url?: string };
+      const path = d.api_url ?? d.url ?? '/api/wheel/download';
+      wheelUrl = path.startsWith('http') ? path : `${base}${path}`;
+      // Extract the filename from the URL path (last segment after final /)
+      const urlBasename = wheelUrl.split('/').pop() ?? '';
+      if (urlBasename.endsWith('.whl')) wheelFilename = urlBasename;
+    }
+  } catch {}
+
+  // Fetch via React Native networking (supports local HTTP; WKWebView would block it).
+  const resp = await fetch(wheelUrl);
+  if (!resp.ok) throw new Error(`Could not download Bincio engine (${resp.status}). Is the instance running?`);
+  const buf = await resp.arrayBuffer();
+  _cachedWheel = { base64: arrayBufferToBase64(buf), filename: wheelFilename };
+  return _cachedWheel;
+}
+
+function arrayBufferToBase64(buf: ArrayBuffer): string {
+  const bytes = new Uint8Array(buf);
+  let binary = '';
+  // Process in chunks to avoid spread-operator stack overflow on large arrays.
+  const CHUNK = 8192;
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    binary += String.fromCharCode(...(bytes.subarray(i, i + CHUNK) as unknown as number[]));
+  }
+  return btoa(binary);
+}
+
+// ── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  screen:       { flex: 1, backgroundColor: '#09090b' },
+  hiddenEngine: { position: 'absolute', width: 1, height: 1, overflow: 'hidden' },
+  container: { flex: 1 },
+  content:   { padding: 16, paddingTop: 60, paddingBottom: 40 },
+  header:    { color: '#fff', fontSize: 22, fontWeight: '700', marginBottom: 12 },
+  body:      { color: '#a1a1aa', fontSize: 14, lineHeight: 20, marginBottom: 24 },
+  code:      { color: '#60a5fa', fontFamily: 'monospace' },
+  serverNotice: {
+    backgroundColor: '#1c1400', borderRadius: 8, borderWidth: 1,
+    borderColor: '#854d0e', padding: 12, marginBottom: 16,
+  },
+  serverNoticeText: { color: '#fbbf24', fontSize: 13, lineHeight: 18 },
+  watchBox: {
+    backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1,
+    borderColor: '#27272a', padding: 14, marginBottom: 16, gap: 10,
+  },
+  watchLabel:  { color: '#71717a', fontSize: 11, fontWeight: '600', letterSpacing: 0.5 },
+  watchPath:   { color: '#a1a1aa', fontSize: 13, fontFamily: 'monospace' },
+  scanButton: {
+    backgroundColor: '#16a34a', borderRadius: 10,
+    paddingVertical: 14, alignItems: 'center',
+  },
+  button: {
+    backgroundColor: '#2563eb', borderRadius: 10,
+    paddingVertical: 14, alignItems: 'center', marginBottom: 16,
+  },
+  buttonDisabled: { opacity: 0.5 },
+  buttonText:     { color: '#fff', fontWeight: '600', fontSize: 16 },
+  statusBox: {
+    backgroundColor: '#18181b', borderRadius: 8, borderWidth: 1,
+    borderColor: '#27272a', padding: 14, marginBottom: 16, gap: 6,
+  },
+  statusCounter: { color: '#71717a', fontSize: 12, textAlign: 'center' },
+  statusMsg:     { color: '#60a5fa', fontSize: 14, textAlign: 'center' },
+  statusHint:    { color: '#52525b', fontSize: 12, textAlign: 'center', lineHeight: 16 },
+  success: {
+    backgroundColor: '#14532d', borderRadius: 8, padding: 12, marginBottom: 16, gap: 6,
+  },
+  successEmpty: { backgroundColor: '#1c1c1e' },
+  successText:  { color: '#86efac', fontSize: 14 },
+  batchError:   { color: '#fca5a5', fontSize: 12 },
+  error: {
+    backgroundColor: '#450a0a', borderRadius: 8, padding: 12, marginBottom: 16, gap: 8,
+  },
+  errorText:  { color: '#fca5a5', fontSize: 14 },
+  errorRetry: { color: '#71717a', fontSize: 13, textDecorationLine: 'underline', marginTop: 4 },
+  divider:      { height: 1, backgroundColor: '#27272a', marginVertical: 24 },
+  sectionTitle: { color: '#a1a1aa', fontSize: 12, fontWeight: '600', marginBottom: 12, letterSpacing: 0.5 },
+  formatRow:    { flexDirection: 'row', gap: 12, marginBottom: 10 },
+  formatName:   { color: '#f4f4f5', fontSize: 13, fontWeight: '600', width: 72 },
+  formatDesc:   { color: '#71717a', fontSize: 13, flex: 1 },
+  notice: {
+    marginTop: 8, backgroundColor: '#18181b',
+    borderRadius: 8, padding: 12, borderWidth: 1, borderColor: '#27272a',
+  },
+  noticeText: { color: '#71717a', fontSize: 12, lineHeight: 18 },
+  noticeCode: { fontFamily: 'monospace', color: '#a1a1aa' },
+});

app/(tabs)/index.tsx

@@ -0,0 +1,302 @@
+import * as FileSystem from 'expo-file-system';
+import { useFocusEffect } from 'expo-router';
+import { useSQLiteContext } from 'expo-sqlite';
+import { useCallback, useState } from 'react';
+import { Alert, FlatList, Pressable, RefreshControl, StyleSheet, Text, TextInput, View } from 'react-native';
+import { deleteActivities, useActivities, useActivityCount, PAGE_SIZE } from '@/db/queries';
+import { downloadFeed, uploadFeed } from '@/db/sync';
+import { useTheme } from '@/ThemeContext';
+import { ActivityCard } from '@/components/ActivityCard';
+
+export default function FeedScreen() {
+  const db = useSQLiteContext();
+  const theme = useTheme();
+  const [refreshKey,   setRefreshKey]   = useState(0);
+  const [searchQuery,  setSearchQuery]  = useState('');
+  const [limit,        setLimit]        = useState(PAGE_SIZE);
+  const activities = useActivities(searchQuery, limit);
+  const totalCount = useActivityCount(searchQuery);
+  const hasMore    = activities.length < totalCount;
+  const [downloading, setDownloading] = useState(false);
+  const [uploading,   setUploading]   = useState(false);
+  const [statusMsg,   setStatusMsg]   = useState<{ ok: boolean; text: string } | null>(null);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const selecting = selected.size > 0;
+
+  // Auto-refresh the local list whenever the tab comes into focus.
+  // SQLite getAllSync is sub-millisecond — no network, no lag.
+  useFocusEffect(useCallback(() => {
+    setRefreshKey(k => k + 1);
+  }, []));
+
+  function showMsg(ok: boolean, text: string) {
+    setStatusMsg({ ok, text });
+    setTimeout(() => setStatusMsg(null), 3500);
+  }
+
+  const doDownload = useCallback(async () => {
+    setDownloading(true);
+    setStatusMsg(null);
+    const result = await downloadFeed(db);
+    setDownloading(false);
+    setRefreshKey(k => k + 1);
+    if (result.error) {
+      showMsg(false, result.error);
+    } else if (result.total === 0) {
+      showMsg(true, 'No activities on instance');
+    } else if (result.synced === 0 && !result.fetched) {
+      showMsg(true, `Up to date (${result.total} activities)`);
+    } else {
+      const parts = [];
+      if (result.synced > 0) parts.push(`${result.synced} new`);
+      if (result.fetched)    parts.push(`${result.fetched} full dataset${result.fetched === 1 ? '' : 's'}`);
+      showMsg(true, `Downloaded: ${parts.join(', ')} (${result.total} total)`);
+    }
+  }, [db]);
+
+  const doUpload = useCallback(async () => {
+    setUploading(true);
+    setStatusMsg(null);
+    const result = await uploadFeed(db, (n, total) => {
+      setStatusMsg({ ok: true, text: `Uploading ${n} / ${total}…` });
+    });
+    setUploading(false);
+    if (result.error) {
+      showMsg(false, result.error);
+    } else if (!result.uploaded && !result.failed) {
+      showMsg(true, 'Nothing to upload');
+    } else {
+      const parts: string[] = [];
+      if (result.uploaded) parts.push(`${result.uploaded} uploaded`);
+      if (result.failed)   parts.push(`${result.failed} failed`);
+      showMsg(result.failed ? false : true, parts.join(', '));
+    }
+  }, [db]);
+
+  function doRefresh() {
+    setRefreshKey(k => k + 1);
+  }
+
+  function handleSearch(q: string) {
+    setSearchQuery(q);
+    setLimit(PAGE_SIZE);  // reset pagination when search changes
+  }
+
+  function loadMore() {
+    if (hasMore) setLimit(l => l + PAGE_SIZE);
+  }
+
+  function toggleSelect(id: string) {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  }
+
+  function cancelSelect() { setSelected(new Set()); }
+
+  function confirmDeleteSelected() {
+    const count = selected.size;
+    Alert.alert(
+      `Delete ${count} activit${count === 1 ? 'y' : 'ies'}`,
+      'These activities will be permanently removed from your device.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            const ids = Array.from(selected);
+            const paths = await deleteActivities(db, ids);
+            setSelected(new Set());
+            for (const p of paths) {
+              if (p) try { await FileSystem.deleteAsync(p, { idempotent: true }); } catch {}
+            }
+          },
+        },
+      ],
+    );
+  }
+
+  const busy = downloading || uploading;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerRow}>
+        {selecting ? (
+          <>
+            <Text style={styles.header}>{selected.size} selected</Text>
+            <Pressable style={styles.cancelButton} onPress={cancelSelect}>
+              <Text style={styles.cancelText}>Cancel</Text>
+            </Pressable>
+          </>
+        ) : (
+          <>
+            <Text style={styles.header}>Feed</Text>
+            <View style={styles.actionButtons}>
+              <ActionButton
+                icon="↑"
+                label="Upload"
+                loading={uploading}
+                disabled={busy}
+                accent={theme.accent}
+                dim={theme.dim}
+                onPress={doUpload}
+              />
+              <ActionButton
+                icon="↓"
+                label="Download"
+                loading={downloading}
+                disabled={busy}
+                accent={theme.accent}
+                dim={theme.dim}
+                onPress={doDownload}
+              />
+              <ActionButton
+                icon="↺"
+                label="Refresh"
+                loading={false}
+                disabled={busy}
+                accent={theme.accent}
+                dim={theme.dim}
+                onPress={doRefresh}
+              />
+            </View>
+          </>
+        )}
+      </View>
+
+      {statusMsg && (
+        <Text style={statusMsg.ok ? styles.msgOk : styles.msgErr}>{statusMsg.text}</Text>
+      )}
+
+      {!selecting && (
+        <View style={styles.searchRow}>
+          <TextInput
+            style={styles.searchInput}
+            value={searchQuery}
+            onChangeText={handleSearch}
+            placeholder="Search activities…"
+            placeholderTextColor="#52525b"
+            returnKeyType="search"
+            clearButtonMode="while-editing"
+          />
+        </View>
+      )}
+
+      {activities.length === 0 && !busy ? (
+        <View style={styles.empty}>
+          <Text style={styles.emptyIcon}>🚴</Text>
+          <Text style={styles.emptyTitle}>No activities yet</Text>
+          <Text style={styles.emptyBody}>
+            Import a file or tap ↓ to pull from your instance.
+          </Text>
+        </View>
+      ) : (
+        <FlatList
+          data={activities}
+          keyExtractor={(a) => a.id}
+          extraData={refreshKey}
+          renderItem={({ item }) => (
+            <ActivityCard
+              activity={item}
+              selecting={selecting}
+              checked={selected.has(item.id)}
+              onToggleSelect={() => toggleSelect(item.id)}
+              onLongPress={() => toggleSelect(item.id)}
+            />
+          )}
+          contentContainerStyle={styles.list}
+          onEndReached={loadMore}
+          onEndReachedThreshold={0.3}
+          refreshControl={
+            <RefreshControl
+              refreshing={false}
+              onRefresh={doRefresh}
+              tintColor="#60a5fa"
+            />
+          }
+        />
+      )}
+
+      {selecting && (
+        <View style={styles.actionBar}>
+          <Pressable style={styles.deleteBarButton} onPress={confirmDeleteSelected}>
+            <Text style={styles.deleteBarText}>Delete {selected.size}</Text>
+          </Pressable>
+        </View>
+      )}
+    </View>
+  );
+}
+
+function ActionButton({
+  icon, label, loading, disabled, accent, dim, onPress,
+}: {
+  icon: string;
+  label: string;
+  loading: boolean;
+  disabled: boolean;
+  accent: string;
+  dim: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      style={[styles.actionBtn, { backgroundColor: dim }, disabled && styles.actionBtnDisabled]}
+      onPress={disabled ? undefined : onPress}
+      accessibilityLabel={label}
+    >
+      <Text style={[styles.actionBtnIcon, { color: loading ? '#52525b' : accent }]}>
+        {loading ? '…' : icon}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#09090b' },
+  headerRow: {
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
+    paddingHorizontal: 16, paddingTop: 60, paddingBottom: 12,
+  },
+  header: { color: '#fff', fontSize: 22, fontWeight: '700' },
+  actionButtons: { flexDirection: 'row', gap: 8 },
+  actionBtn: {
+    width: 36, height: 36, borderRadius: 8,
+    alignItems: 'center', justifyContent: 'center',
+  },
+  actionBtnDisabled: { opacity: 0.4 },
+  actionBtnIcon: { fontSize: 18, fontWeight: '700', lineHeight: 22 },
+  cancelButton: {
+    backgroundColor: '#27272a', borderRadius: 8,
+    paddingHorizontal: 14, paddingVertical: 7,
+  },
+  cancelText: { color: '#a1a1aa', fontSize: 13, fontWeight: '600' },
+  msgOk: { color: '#86efac', fontSize: 12, textAlign: 'center', paddingHorizontal: 16, paddingBottom: 8 },
+  msgErr: { color: '#fca5a5', fontSize: 12, textAlign: 'center', paddingHorizontal: 16, paddingBottom: 8 },
+  searchRow: { paddingHorizontal: 16, paddingBottom: 10 },
+  searchInput: {
+    backgroundColor: '#18181b', borderWidth: 1, borderColor: '#27272a',
+    borderRadius: 8, paddingHorizontal: 12, paddingVertical: 8,
+    color: '#f4f4f5', fontSize: 14,
+  },
+  list:  { padding: 16, gap: 12, paddingBottom: 80 },
+  empty: {
+    flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32,
+  },
+  emptyIcon:  { fontSize: 48, marginBottom: 16 },
+  emptyTitle: { color: '#f4f4f5', fontSize: 18, fontWeight: '600', marginBottom: 8 },
+  emptyBody:  { color: '#71717a', fontSize: 14, textAlign: 'center', lineHeight: 20 },
+  actionBar: {
+    position: 'absolute', bottom: 0, left: 0, right: 0,
+    backgroundColor: '#18181b', borderTopWidth: 1, borderTopColor: '#27272a',
+    paddingHorizontal: 16, paddingVertical: 12, paddingBottom: 28,
+  },
+  deleteBarButton: {
+    backgroundColor: '#7f1d1d', borderRadius: 10,
+    paddingVertical: 14, alignItems: 'center',
+  },
+  deleteBarText: { color: '#fca5a5', fontSize: 15, fontWeight: '700' },
+});

app/(tabs)/search.tsx

@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import { FlatList, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { PAGE_SIZE, useActivityYears, useFilteredActivities, useFilteredCount, type ActivityFilter } from '@/db/queries';
+import { ActivityCard } from '@/components/ActivityCard';
+import { useTheme } from '@/ThemeContext';
+
+type SortKey = 'date' | 'distance' | 'elevation';
+
+const SPORTS = [
+  { value: '',         label: 'All' },
+  { value: 'cycling',  label: '🚴 Cycling' },
+  { value: 'running',  label: '🏃 Running' },
+  { value: 'hiking',   label: '🥾 Hiking' },
+  { value: 'swimming', label: '🏊 Swimming' },
+  { value: 'walking',  label: '🚶 Walking' },
+];
+
+const DATE_PRESETS = [
+  { value: 'all',  label: 'All time' },
+  { value: '7d',   label: '7 days' },
+  { value: '30d',  label: '30 days' },
+  { value: '6mo',  label: '6 months' },
+];
+
+const SORTS: { value: SortKey; label: string }[] = [
+  { value: 'date',      label: 'Newest' },
+  { value: 'distance',  label: 'Distance' },
+  { value: 'elevation', label: 'Elevation' },
+];
+
+function computeDateRange(preset: string): { dateFrom: string; dateTo: string } {
+  if (preset === 'all') return { dateFrom: '', dateTo: '' };
+  if (/^\d{4}$/.test(preset)) {
+    const y = parseInt(preset, 10);
+    return { dateFrom: `${y}-01-01T000000Z`, dateTo: `${y + 1}-01-01T000000Z` };
+  }
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const now = new Date();
+  let d: Date;
+  if      (preset === '7d')  d = new Date(now.getTime() - 7  * 86_400_000);
+  else if (preset === '30d') d = new Date(now.getTime() - 30 * 86_400_000);
+  else                       { d = new Date(now); d.setMonth(d.getMonth() - 6); }
+  return { dateFrom: `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T000000Z`, dateTo: '' };
+}
+
+export default function SearchScreen() {
+  const theme = useTheme();
+  const [sport,   setSport]   = useState('');
+  const [datePre, setDatePre] = useState('all');
+  const [sort,    setSort]    = useState<SortKey>('date');
+  const [limit,   setLimit]   = useState(PAGE_SIZE);
+
+  const years = useActivityYears();
+  const dateOptions = [...DATE_PRESETS, ...years.map(y => ({ value: y, label: y }))];
+
+  const { dateFrom, dateTo } = computeDateRange(datePre);
+  const filter: ActivityFilter = { sport, dateFrom, dateTo, sort };
+  const activities = useFilteredActivities(filter, limit);
+  const total      = useFilteredCount(filter);
+  const hasMore    = activities.length < total;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerRow}>
+        <Text style={styles.header}>Filter</Text>
+        {total > 0 && <Text style={styles.count}>{total} activities</Text>}
+      </View>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}
+        style={styles.pillScroll} contentContainerStyle={styles.pillRow}>
+        {SPORTS.map(s => (
+          <Pill key={s.value} label={s.label} active={sport === s.value} accent={theme.accent}
+            onPress={() => { setSport(s.value); setLimit(PAGE_SIZE); }} />
+        ))}
+      </ScrollView>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}
+        style={styles.pillScroll} contentContainerStyle={styles.pillRow}>
+        {dateOptions.map(d => (
+          <Pill key={d.value} label={d.label} active={datePre === d.value} accent={theme.accent}
+            onPress={() => { setDatePre(d.value); setLimit(PAGE_SIZE); }} />
+        ))}
+      </ScrollView>
+
+      <View style={styles.sortRow}>
+        {SORTS.map(s => (
+          <Pressable key={s.value}
+            style={[styles.sortBtn, sort === s.value && { borderBottomColor: theme.accent, borderBottomWidth: 2 }]}
+            onPress={() => { setSort(s.value); setLimit(PAGE_SIZE); }}>
+            <Text style={[styles.sortText, sort === s.value && { color: theme.accent }]}>{s.label}</Text>
+          </Pressable>
+        ))}
+      </View>
+
+      {activities.length === 0 ? (
+        <View style={styles.empty}>
+          <Text style={styles.emptyText}>No activities match</Text>
+        </View>
+      ) : (
+        <FlatList
+          style={{ flex: 1 }}
+          data={activities}
+          keyExtractor={a => a.id}
+          renderItem={({ item }) => (
+            <ActivityCard activity={item} selecting={false} checked={false}
+              onToggleSelect={() => {}} onLongPress={() => {}} />
+          )}
+          contentContainerStyle={styles.list}
+          onEndReached={() => { if (hasMore) setLimit(l => l + PAGE_SIZE); }}
+          onEndReachedThreshold={0.3}
+        />
+      )}
+    </View>
+  );
+}
+
+function Pill({ label, active, accent, onPress }: {
+  label: string; active: boolean; accent: string; onPress: () => void;
+}) {
+  return (
+    <Pressable
+      style={[styles.pill, active && { backgroundColor: accent + '33', borderColor: accent }]}
+      onPress={onPress}
+    >
+      <Text style={[styles.pillText, active && { color: accent }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container:  { flex: 1, backgroundColor: '#09090b' },
+  headerRow: {
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
+    paddingHorizontal: 16, paddingTop: 60, paddingBottom: 12,
+  },
+  header:     { color: '#fff', fontSize: 22, fontWeight: '700' },
+  count:      { color: '#71717a', fontSize: 13 },
+  pillScroll: { flexGrow: 0, flexShrink: 0 },
+  pillRow:    { flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingBottom: 10 },
+  pill: {
+    borderRadius: 20, borderWidth: 1, borderColor: '#3f3f46',
+    paddingHorizontal: 14, paddingVertical: 7,
+  },
+  pillText:   { color: '#a1a1aa', fontSize: 13, fontWeight: '500' },
+  sortRow:    { flexDirection: 'row', paddingHorizontal: 16, marginBottom: 4 },
+  sortBtn:    { marginRight: 24, paddingBottom: 8, borderBottomWidth: 2, borderBottomColor: 'transparent' },
+  sortText:   { color: '#71717a', fontSize: 13, fontWeight: '600' },
+  list:       { padding: 16, gap: 12, paddingBottom: 80 },
+  empty:      { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  emptyText:  { color: '#52525b', fontSize: 15 },
+});

app/(tabs)/settings.tsx

@@ -0,0 +1,388 @@
+import { useSQLiteContext } from 'expo-sqlite';
+import { useState } from 'react';
+import {
+  ActivityIndicator, Platform, Pressable, ScrollView, StyleSheet,
+  Text, TextInput, View,
+} from 'react-native';
+import { deleteRemoteActivities, getSetting, setSetting, useSetting } from '@/db/queries';
+import { PALETTES, type PaletteKey } from '@/theme';
+import { useTheme, usePaletteControl } from '@/ThemeContext';
+
+export default function SettingsScreen() {
+  const db = useSQLiteContext();
+
+  const storedUrl      = useSetting('instance_url') ?? '';
+  const storedHandle   = useSetting('handle') ?? '';
+  const storedPath     = useSetting('auto_import_path') ?? '';
+  const storedToken    = useSetting('api_token');
+  const storedSyncMode     = (useSetting('sync_mode') ?? 'summaries') as 'summaries' | 'full';
+  const storedSyncUpload   = useSetting('sync_upload') === 'true';
+  const storedUploadFormat = (useSetting('upload_format') ?? 'raw') as 'raw' | 'bas';
+
+  const [instanceUrl, setInstanceUrl] = useState(storedUrl);
+  const [handle,      setHandle]      = useState(storedHandle);
+  const [autoPath,    setAutoPath]    = useState(storedPath);
+  const [syncMode,      setSyncMode]      = useState(storedSyncMode);
+  const [syncUpload,    setSyncUpload]    = useState(storedSyncUpload);
+  const [uploadFormat,  setUploadFormat]  = useState(storedUploadFormat);
+  const [saved,       setSaved]       = useState(false);
+  const theme = useTheme();
+  const { paletteKey: palette, setPaletteOverride } = usePaletteControl();
+
+  const [password,    setPassword]    = useState('');
+  const [connecting,  setConnecting]  = useState(false);
+  const [connectMsg,  setConnectMsg]  = useState<{ ok: boolean; text: string } | null>(null);
+
+  const [resetArmed,  setResetArmed]  = useState(false);
+  const [resetMsg,    setResetMsg]    = useState<string | null>(null);
+
+  async function save() {
+    await setSetting(db, 'instance_url', instanceUrl.trim());
+    await setSetting(db, 'handle', handle.trim());
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  }
+
+  async function connect() {
+    const url = instanceUrl.trim().replace(/\/$/, '');
+    const h   = handle.trim();
+    if (!url || !h || !password) {
+      setConnectMsg({ ok: false, text: 'Fill in URL, handle, and password first.' });
+      return;
+    }
+    setConnecting(true);
+    setConnectMsg(null);
+    try {
+      const resp = await fetch(`${url}/api/auth/token`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ handle: h, password }),
+      });
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}));
+        setConnectMsg({ ok: false, text: err.detail ?? `Error ${resp.status}` });
+        return;
+      }
+      const data = await resp.json();
+      await setSetting(db, 'instance_url', url);
+      await setSetting(db, 'handle', h);
+      await setSetting(db, 'api_token', data.token);
+      setPassword('');
+      setConnectMsg({ ok: true, text: `Connected as ${data.display_name || h}` });
+    } catch {
+      setConnectMsg({ ok: false, text: 'Could not reach instance — check the URL.' });
+    } finally {
+      setConnecting(false);
+    }
+  }
+
+  async function disconnect() {
+    await setSetting(db, 'api_token', '');
+    setConnectMsg(null);
+  }
+
+  async function resetSyncedData() {
+    if (!resetArmed) {
+      setResetArmed(true);
+      return;
+    }
+    const n = await deleteRemoteActivities(db);
+    setResetArmed(false);
+    setResetMsg(`Removed ${n} synced ${n === 1 ? 'activity' : 'activities'}`);
+    setTimeout(() => setResetMsg(null), 3000);
+  }
+
+  const isConnected = !!storedToken;
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <Text style={styles.header}>Settings</Text>
+
+      <Section title="Instance">
+        <Field
+          label="Instance URL"
+          placeholder="https://bincio.org"
+          value={instanceUrl}
+          onChangeText={setInstanceUrl}
+          autoCapitalize="none"
+          keyboardType="url"
+        />
+        <Field
+          label="Handle"
+          placeholder="yourhandle"
+          value={handle}
+          onChangeText={setHandle}
+          autoCapitalize="none"
+        />
+        <Text style={styles.hint}>
+          Connect to a Bincio instance to sync your activities. Leave blank to use
+          the app offline only.
+        </Text>
+      </Section>
+
+      <Pressable style={styles.saveButton} onPress={save}>
+        <Text style={styles.saveButtonText}>
+          {saved ? '✓ Saved' : 'Save'}
+        </Text>
+      </Pressable>
+
+      <Section title="Connection">
+        {isConnected ? (
+          <>
+            <Row label="Status" value={`Connected as ${storedHandle || '—'}`} />
+            <Pressable style={styles.disconnectButton} onPress={disconnect}>
+              <Text style={styles.disconnectText}>Disconnect</Text>
+            </Pressable>
+          </>
+        ) : (
+          <>
+            <Field
+              label="Password"
+              placeholder="••••••••"
+              value={password}
+              onChangeText={setPassword}
+              autoCapitalize="none"
+              secureTextEntry
+            />
+            <Pressable
+              style={[styles.connectButton, connecting && styles.buttonDisabled]}
+              onPress={connecting ? undefined : connect}
+            >
+              {connecting
+                ? <ActivityIndicator color="#fff" size="small" />
+                : <Text style={styles.connectText}>Connect</Text>}
+            </Pressable>
+          </>
+        )}
+        {connectMsg && (
+          <Text style={connectMsg.ok ? styles.msgOk : styles.msgErr}>
+            {connectMsg.text}
+          </Text>
+        )}
+        <Text style={styles.hint}>
+          Your password is used once to obtain a session token, then forgotten.
+          The token is stored locally and sent with each sync request.
+        </Text>
+      </Section>
+
+      {Platform.OS === 'android' && (
+        <Section title="Auto-import (Android)">
+          {!storedUrl ? (
+            <Text style={[styles.hint, styles.hintWarn]}>
+              Configure and save a Bincio instance URL above first — it's needed to download the extraction engine.
+            </Text>
+          ) : (
+            <>
+              <Field
+                label="Watch directory"
+                placeholder="/sdcard/FitFiles"
+                value={autoPath}
+                onChangeText={setAutoPath}
+                onBlur={() => setSetting(db, 'auto_import_path', autoPath.trim())}
+                autoCapitalize="none"
+              />
+              <Text style={styles.hint}>
+                New FIT files in this folder are imported automatically when you
+                open the app. Leave blank to disable. Requires storage permission.
+              </Text>
+            </>
+          )}
+        </Section>
+      )}
+
+      <Section title="Sync">
+        <Text style={styles.subLabel}>Download</Text>
+        <View style={styles.modeRow}>
+          <ModeButton label="Summaries only" active={syncMode === 'summaries'} accent={theme.accent} dim={theme.dim}
+            onPress={() => { setSyncMode('summaries'); setSetting(db, 'sync_mode', 'summaries'); }} />
+          <ModeButton label="Full data" active={syncMode === 'full'} accent={theme.accent} dim={theme.dim}
+            onPress={() => { setSyncMode('full'); setSetting(db, 'sync_mode', 'full'); }} />
+        </View>
+        <Text style={styles.hint}>
+          {syncMode === 'full'
+            ? 'Downloads map route and elevation chart for every activity during sync. Uses more storage and takes longer.'
+            : 'Syncs activity summaries only. Map and chart are fetched on demand when you open an activity.'}
+        </Text>
+        <Text style={[styles.subLabel, { borderTopWidth: 1, borderTopColor: '#27272a', paddingTop: 12 }]}>Upload</Text>
+        <View style={styles.modeRow}>
+          <ModeButton label="Off" active={!syncUpload} accent={theme.accent} dim={theme.dim}
+            onPress={() => { setSyncUpload(false); setSetting(db, 'sync_upload', 'false'); }} />
+          <ModeButton label="Upload local activities" active={syncUpload} accent={theme.accent} dim={theme.dim}
+            onPress={() => { setSyncUpload(true); setSetting(db, 'sync_upload', 'true'); }} />
+        </View>
+        <Text style={styles.hint}>
+          {syncUpload
+            ? 'Local activities are uploaded to the instance during sync.'
+            : 'Local activities stay on device only.'}
+        </Text>
+        <Text style={[styles.subLabel, { borderTopWidth: 1, borderTopColor: '#27272a', paddingTop: 12 }]}>Upload format</Text>
+        <View style={styles.modeRow}>
+          <ModeButton label="Original file" active={uploadFormat === 'raw'} accent={theme.accent} dim={theme.dim}
+            onPress={() => { setUploadFormat('raw'); setSetting(db, 'upload_format', 'raw'); }} />
+          <ModeButton label="Extracted JSON" active={uploadFormat === 'bas'} accent={theme.accent} dim={theme.dim}
+            onPress={() => { setUploadFormat('bas'); setSetting(db, 'upload_format', 'bas'); }} />
+        </View>
+        <Text style={styles.hint}>
+          {uploadFormat === 'raw'
+            ? 'Uploads the original FIT/GPX/TCX file. The server re-extracts it with DEM elevation correction and updates your local copy.'
+            : 'Uploads the pre-extracted JSON. Faster, but no DEM elevation correction.'}
+        </Text>
+      </Section>
+
+      <Section title="Palette">
+        <Text style={[styles.hint, { paddingBottom: 0 }]}>
+          Auto-switches to race colours during Giro, Tour, and Vuelta. Override here for testing.
+        </Text>
+        <View style={styles.modeRow}>
+          {(['auto', 'default', 'giro', 'tour', 'vuelta'] as PaletteKey[]).map(key => {
+            const label = key === 'auto' ? 'Auto' : PALETTES[key as keyof typeof PALETTES].label;
+            const keyAccent = key === 'auto' ? theme.accent : PALETTES[key as keyof typeof PALETTES].accent;
+            const keyDim    = key === 'auto' ? theme.dim    : PALETTES[key as keyof typeof PALETTES].dim;
+            return (
+              <ModeButton
+                key={key}
+                label={label}
+                active={palette === key}
+                accent={keyAccent}
+                dim={keyDim}
+                onPress={() => setPaletteOverride(key)}
+              />
+            );
+          })}
+        </View>
+      </Section>
+
+      <Section title="Data">
+        <Pressable
+          style={[styles.resetButton, resetArmed && styles.resetButtonArmed]}
+          onPress={resetSyncedData}
+          onBlur={() => setResetArmed(false)}
+        >
+          <Text style={[styles.resetText, resetArmed && styles.resetTextArmed]}>
+            {resetArmed ? 'Tap again to confirm' : 'Reset synced data'}
+          </Text>
+        </Pressable>
+        {resetMsg && <Text style={styles.msgOk}>{resetMsg}</Text>}
+        <Text style={styles.hint}>
+          Removes all activities synced from the instance. Locally imported files are kept.
+        </Text>
+      </Section>
+
+      <Section title="About">
+        <Row label="Version" value="0.1.0 (Phase 0.5)" />
+        <Row label="Schema"  value="BAS 1.0" />
+      </Section>
+    </ScrollView>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      <View style={styles.sectionBody}>{children}</View>
+    </View>
+  );
+}
+
+function Field({
+  label, placeholder, value, onChangeText, ...rest
+}: {
+  label: string;
+  placeholder: string;
+  value: string;
+  onChangeText: (v: string) => void;
+  [key: string]: unknown;
+}) {
+  return (
+    <View style={styles.field}>
+      <Text style={styles.fieldLabel}>{label}</Text>
+      <TextInput
+        style={styles.input}
+        placeholder={placeholder}
+        placeholderTextColor="#52525b"
+        value={value}
+        onChangeText={onChangeText}
+        {...rest}
+      />
+    </View>
+  );
+}
+
+function ModeButton({ label, active, accent, dim, onPress }: {
+  label: string; active: boolean; accent: string; dim: string; onPress: () => void;
+}) {
+  return (
+    <Pressable
+      style={[styles.modeButton, active && { backgroundColor: dim, borderColor: accent }]}
+      onPress={onPress}
+    >
+      <Text style={[styles.modeButtonText, active && { color: accent }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.row}>
+      <Text style={styles.rowLabel}>{label}</Text>
+      <Text style={styles.rowValue}>{value}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#09090b' },
+  content:   { padding: 16, paddingTop: 60, paddingBottom: 40 },
+  header:    { color: '#fff', fontSize: 22, fontWeight: '700', marginBottom: 24 },
+  section:   { marginBottom: 28 },
+  sectionTitle: {
+    color: '#a1a1aa', fontSize: 11, fontWeight: '600',
+    letterSpacing: 0.8, marginBottom: 8,
+  },
+  sectionBody: {
+    backgroundColor: '#18181b', borderRadius: 10,
+    borderWidth: 1, borderColor: '#27272a', overflow: 'hidden',
+  },
+  field:      { padding: 14, borderBottomWidth: 1, borderBottomColor: '#27272a' },
+  fieldLabel: { color: '#71717a', fontSize: 11, marginBottom: 4 },
+  input:      { color: '#f4f4f5', fontSize: 15 },
+  hint:       { color: '#52525b', fontSize: 12, lineHeight: 16, padding: 12 },
+  hintWarn:   { color: '#a16207' },
+  row: {
+    flexDirection: 'row', justifyContent: 'space-between',
+    paddingHorizontal: 14, paddingVertical: 12,
+    borderBottomWidth: 1, borderBottomColor: '#27272a',
+  },
+  rowLabel: { color: '#a1a1aa', fontSize: 14 },
+  rowValue: { color: '#71717a', fontSize: 14 },
+  saveButton: {
+    backgroundColor: '#2563eb', borderRadius: 10,
+    paddingVertical: 14, alignItems: 'center', marginBottom: 28,
+  },
+  saveButtonText: { color: '#fff', fontWeight: '600', fontSize: 16 },
+  connectButton: {
+    backgroundColor: '#059669', borderRadius: 8, margin: 12,
+    paddingVertical: 12, alignItems: 'center',
+  },
+  connectText:      { color: '#fff', fontWeight: '600', fontSize: 15 },
+  buttonDisabled:   { opacity: 0.5 },
+  disconnectButton: {
+    margin: 12, paddingVertical: 10, alignItems: 'center',
+    borderRadius: 8, borderWidth: 1, borderColor: '#3f3f46',
+  },
+  disconnectText: { color: '#71717a', fontSize: 14 },
+  msgOk:  { color: '#86efac', fontSize: 13, paddingHorizontal: 12, paddingBottom: 10 },
+  msgErr: { color: '#fca5a5', fontSize: 13, paddingHorizontal: 12, paddingBottom: 10 },
+  subLabel:           { color: '#52525b', fontSize: 11, fontWeight: '600', letterSpacing: 0.6, paddingHorizontal: 12, paddingTop: 12, paddingBottom: 4 },
+  modeRow:            { flexDirection: 'row', gap: 8, padding: 12 },
+  modeButton:     { flex: 1, paddingVertical: 9, borderRadius: 8, borderWidth: 1, borderColor: '#3f3f46', alignItems: 'center' },
+  modeButtonText: { color: '#71717a', fontSize: 13, fontWeight: '500' },
+  resetButton: {
+    margin: 12, paddingVertical: 10, alignItems: 'center',
+    borderRadius: 8, borderWidth: 1, borderColor: '#3f3f46',
+  },
+  resetButtonArmed: { borderColor: '#ef4444', backgroundColor: '#1c0a0a' },
+  resetText:        { color: '#71717a', fontSize: 14 },
+  resetTextArmed:   { color: '#ef4444', fontWeight: '600' },
+});

app/_layout.tsx

@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+import { SQLiteProvider } from 'expo-sqlite';
+import { StatusBar } from 'expo-status-bar';
+import { migrateDb } from '@/db';
+import { ThemeProvider } from '@/ThemeContext';
+
+export default function RootLayout() {
+  return (
+    <SQLiteProvider databaseName="bincio.db" onInit={migrateDb}>
+      <ThemeProvider>
+        <StatusBar style="light" />
+        <Stack screenOptions={{ headerShown: false }} />
+      </ThemeProvider>
+    </SQLiteProvider>
+  );
+}

app/activity/[id].tsx

@@ -0,0 +1,531 @@
+import { Camera, GeoJSONSource, Layer, Map } from '@maplibre/maplibre-react-native';
+import * as FileSystem from 'expo-file-system';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { useEffect, useRef, useState } from 'react';
+import { Alert, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
+import { useSQLiteContext } from 'expo-sqlite';
+import { deleteActivity, setActivityTitle, useActivity, useSetting } from '@/db/queries';
+import { useTheme } from '@/ThemeContext';
+
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type Timeseries = {
+  t: number[];
+  elevation_m:  (number | null)[];
+  speed_kmh?:   (number | null)[] | null;
+  hr_bpm?:      (number | null)[] | null;
+  cadence_rpm?: (number | null)[] | null;
+  power_w?:     (number | null)[] | null;
+  lat?: (number | null)[] | null;
+  lon?: (number | null)[] | null;
+};
+
+// ── Screen ───────────────────────────────────────────────────────────────────
+
+export default function ActivityScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const router = useRouter();
+  const db = useSQLiteContext();
+  const theme = useTheme();
+  const row = useActivity(id);
+  const instanceUrl = useSetting('instance_url')?.replace(/\/$/, '') ?? '';
+  const token = useSetting('api_token') ?? '';
+
+  const [geojson, setGeojson] = useState<object | null>(null);
+  const [timeseries, setTimeseries] = useState<Timeseries | null>(null);
+  const [loadingMap, setLoadingMap] = useState(false);
+  const [loadingChart, setLoadingChart] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState('');
+
+  async function confirmDelete() {
+    Alert.alert(
+      'Delete activity',
+      'This will permanently remove this activity from your device.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            const originalPath = await deleteActivity(db, id);
+            if (originalPath) {
+              try { await FileSystem.deleteAsync(originalPath, { idempotent: true }); } catch {}
+            }
+            router.back();
+          },
+        },
+      ],
+    );
+  }
+
+  // instanceUrl and token are in the dep array to avoid a stale-closure bug in
+  // release builds: Hermes executes effects sooner and captures empty strings if
+  // the deps are omitted.  Guards on geojson/timeseries prevent double-fetching.
+  useEffect(() => {
+    if (!row) return;
+
+    if (row.geojson) {
+      setGeojson(JSON.parse(row.geojson));
+    } else if (row.origin === 'remote' && instanceUrl && token) {
+      setLoadingMap(true);
+      fetch(`${instanceUrl}/api/activity/${row.id}/geojson`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then(r => r.ok ? r.json() : null)
+        .then(data => { if (data) setGeojson(data); })
+        .catch(() => {})
+        .finally(() => setLoadingMap(false));
+    }
+
+    if (row.timeseries_json) {
+      setTimeseries(JSON.parse(row.timeseries_json));
+    } else if (row.origin === 'remote' && instanceUrl && token) {
+      setLoadingChart(true);
+      fetch(`${instanceUrl}/api/activity/${row.id}/timeseries`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then(r => r.ok ? r.json() : null)
+        .then(data => { if (data) setTimeseries(data); })
+        .catch(() => {})
+        .finally(() => setLoadingChart(false));
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [row?.id, instanceUrl, token]);
+
+  if (!row) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.notFound}>Activity not found</Text>
+      </View>
+    );
+  }
+
+  const detail = JSON.parse(row.detail_json);
+  const edits = row.edits_json ? JSON.parse(row.edits_json) : {};
+  const displayTitle = edits.title ?? detail.title;
+  const canEdit = row.origin === 'local';
+  const km          = detail.distance_m != null ? (detail.distance_m / 1000).toFixed(2) : null;
+  const elev        = detail.elevation_gain_m != null ? Math.round(detail.elevation_gain_m) : null;
+  const elevLoss    = detail.elevation_loss_m != null ? Math.round(Math.abs(detail.elevation_loss_m)) : null;
+  const movingTime  = detail.moving_time_s != null ? formatDuration(detail.moving_time_s) : null;
+  const speed       = detail.avg_speed_kmh != null ? detail.avg_speed_kmh.toFixed(1) : null;
+  const hr          = detail.avg_hr_bpm != null ? Math.round(detail.avg_hr_bpm) : null;
+  const power       = detail.avg_power_w != null ? Math.round(detail.avg_power_w) : null;
+  const date        = new Date(detail.started_at).toLocaleDateString(undefined, {
+    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
+  });
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={styles.topBar}>
+        <Pressable style={styles.backButton} onPress={() => router.back()}>
+          <Text style={[styles.backText, { color: theme.accent }]}>← Back</Text>
+        </Pressable>
+        <Pressable style={styles.deleteButton} onPress={confirmDelete}>
+          <Text style={styles.deleteText}>Delete</Text>
+        </Pressable>
+      </View>
+
+      <Text style={styles.sport}>{detail.sport ?? 'Activity'}</Text>
+      {editingTitle ? (
+        <TextInput
+          style={styles.titleInput}
+          value={titleDraft}
+          onChangeText={setTitleDraft}
+          autoFocus
+          returnKeyType="done"
+          onEndEditing={(e) => {
+            const trimmed = e.nativeEvent.text.trim();
+            if (trimmed && trimmed !== displayTitle) {
+              setActivityTitle(db, id, trimmed);
+            }
+            setEditingTitle(false);
+          }}
+        />
+      ) : (
+        <Pressable
+          onPress={canEdit ? () => { setTitleDraft(displayTitle); setEditingTitle(true); } : undefined}
+          style={styles.titleRow}
+        >
+          <Text style={styles.title}>{displayTitle}</Text>
+          {canEdit && <Text style={styles.editHint}>✎</Text>}
+        </Pressable>
+      )}
+      <Text style={styles.date}>{date}</Text>
+
+      {/* Map */}
+      <RouteMap geojson={geojson} loading={loadingMap} accent={theme.accent} />
+
+      {/* Stats grid */}
+      <View style={styles.grid}>
+        {km          && <StatCell label="Distance"       value={km}          unit="km"  />}
+        {movingTime  && <StatCell label="Moving time"    value={movingTime}  unit=""    />}
+        {elev   != null && <StatCell label="Elev gain"   value={String(elev)}     unit="m" />}
+        {elevLoss != null && <StatCell label="Elev loss" value={String(elevLoss)} unit="m" />}
+        {speed       && <StatCell label="Avg speed"      value={speed}       unit="km/h"/>}
+        {hr          && <StatCell label="Avg HR"         value={String(hr)}  unit="bpm" />}
+        {power       && <StatCell label="Avg power"      value={String(power)} unit="W" />}
+      </View>
+
+      {/* Metric charts */}
+      <MetricCharts timeseries={timeseries} loading={loadingChart} accent={theme.accent} />
+
+      {/* Meta */}
+      <View style={styles.meta}>
+        <MetaRow label="Source"  value={detail.source ?? '—'} />
+        <MetaRow label="Device"  value={detail.device ?? '—'} />
+        <MetaRow label="Origin"  value={row.origin} />
+        <MetaRow label="Synced"  value={row.synced_at ? new Date(row.synced_at * 1000).toLocaleDateString() : 'No'} />
+      </View>
+    </ScrollView>
+  );
+}
+
+// ── Map ───────────────────────────────────────────────────────────────────────
+
+function RouteMap({ geojson, loading, accent }: { geojson: object | null; loading: boolean; accent: string }) {
+  const [fullscreen, setFullscreen] = useState(false);
+  const [currentZoom, setCurrentZoom] = useState(12);
+  const cameraRef = useRef<any>(null);
+
+  if (loading) {
+    return (
+      <View style={styles.mapPlaceholder}>
+        <Text style={{ color: accent, fontSize: 13 }}>Loading map…</Text>
+      </View>
+    );
+  }
+  if (!geojson) return null;
+
+  // MapLibre uses OpenGL/SurfaceView which crashes the Karoo's Qualcomm GPU
+  // driver (Android <29) even without any interaction. Render a pure SVG route
+  // trace instead — no native GL surface, no crash.
+  if (Platform.OS === 'android' && (Platform.Version as number) < 29) {
+    return <SvgRouteView geojson={geojson} accent={accent} />;
+  }
+
+  const bounds = geoJsonBounds(geojson);
+  const routeSource = (
+    <GeoJSONSource id="route" data={geojson as GeoJSON.FeatureCollection}>
+      <Layer
+        type="line"
+        id="route-line"
+        paint={{ 'line-color': accent, 'line-width': 3 }}
+        layout={{ 'line-cap': 'round', 'line-join': 'round' }}
+      />
+    </GeoJSONSource>
+  );
+  const cameraBounds = bounds
+    ? { bounds, padding: { top: 24, bottom: 24, left: 24, right: 24 } }
+    : undefined;
+
+  return (
+    <>
+      {/* Thumbnail — tap to expand */}
+      <Pressable style={styles.mapContainer} onPress={() => setFullscreen(true)}>
+        <Map style={styles.map} mapStyle={MAP_STYLE} dragPan={false} touchZoom={false} touchPitch={false} touchRotate={false}>
+          {cameraBounds && <Camera initialViewState={cameraBounds} />}
+          {routeSource}
+        </Map>
+        <View style={styles.mapExpandHint}>
+          <Text style={styles.mapExpandText}>⤢ tap to explore</Text>
+        </View>
+      </Pressable>
+
+      {/* Full-screen map with +/- zoom buttons */}
+      <Modal visible={fullscreen} animationType="slide" onRequestClose={() => setFullscreen(false)}>
+        <View style={styles.fullscreenMap}>
+          <Map
+            style={styles.map}
+            mapStyle={MAP_STYLE}
+            onRegionDidChange={(e: any) => {
+              const z = e?.properties?.zoomLevel;
+              if (typeof z === 'number') setCurrentZoom(z);
+            }}
+          >
+            {cameraBounds && <Camera ref={cameraRef} initialViewState={cameraBounds} />}
+            {routeSource}
+          </Map>
+          <Pressable style={styles.closeButton} onPress={() => setFullscreen(false)}>
+            <Text style={styles.closeText}>✕</Text>
+          </Pressable>
+          <View style={styles.zoomButtons}>
+            <Pressable style={styles.zoomBtn} onPress={() => cameraRef.current?.setCamera({ zoomLevel: currentZoom + 1, animationDuration: 200 })}>
+              <Text style={styles.zoomBtnText}>+</Text>
+            </Pressable>
+            <Pressable style={styles.zoomBtn} onPress={() => cameraRef.current?.setCamera({ zoomLevel: Math.max(1, currentZoom - 1), animationDuration: 200 })}>
+              <Text style={styles.zoomBtnText}>−</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+// SVG route trace — used on Android <29 where MapLibre crashes the GPU driver.
+// Renders the GPS track as a colored path on a dark background with no tiles.
+function SvgRouteView({ geojson, accent }: { geojson: object; accent: string }) {
+  const W = 320;
+  const H = 180;
+  const PAD = 16;
+
+  const all: [number, number][] = [];
+  function collect(obj: unknown) {
+    if (!obj || typeof obj !== 'object') return;
+    const o = obj as Record<string, unknown>;
+    if (o.type === 'Feature') { collect(o.geometry); return; }
+    if (o.type === 'FeatureCollection') { (o.features as unknown[]).forEach(collect); return; }
+    if (o.type === 'LineString') { all.push(...(o.coordinates as [number, number][])); return; }
+    if (o.type === 'MultiLineString') { (o.coordinates as [number, number][][]).forEach(c => all.push(...c)); return; }
+  }
+  collect(geojson);
+  if (!all.length) return null;
+
+  const step = Math.max(1, Math.floor(all.length / 500));
+  const pts = all.filter((_, i) => i % step === 0);
+
+  const lons = pts.map(c => c[0]);
+  const lats = pts.map(c => c[1]);
+  const minLon = Math.min(...lons), maxLon = Math.max(...lons);
+  const minLat = Math.min(...lats), maxLat = Math.max(...lats);
+  const spanLon = maxLon - minLon || 0.001;
+  const spanLat = maxLat - minLat || 0.001;
+
+  // Correct longitude for latitude (equirectangular)
+  const midLat = (minLat + maxLat) / 2;
+  const lonFactor = Math.cos((midLat * Math.PI) / 180);
+  const adjLon = spanLon * lonFactor;
+
+  const scale = Math.min((W - PAD * 2) / adjLon, (H - PAD * 2) / spanLat);
+  const offX = (W - adjLon * scale) / 2;
+  const offY = (H - spanLat * scale) / 2;
+
+  const toX = (lon: number) => offX + (lon - minLon) * lonFactor * scale;
+  const toY = (lat: number) => H - offY - (lat - minLat) * scale;
+
+  const d = pts.map((c, i) => `${i === 0 ? 'M' : 'L'}${toX(c[0]).toFixed(1)},${toY(c[1]).toFixed(1)}`).join(' ');
+
+  return (
+    <View style={[styles.mapContainer, { alignItems: 'center', justifyContent: 'center' }]}>
+      <Svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+        <Path d={d} fill="none" stroke={accent} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
+      </Svg>
+    </View>
+  );
+}
+
+// ── Metric charts ─────────────────────────────────────────────────────────────
+
+type TabKey = 'elevation' | 'speed' | 'hr' | 'cadence' | 'power';
+
+const TAB_META: Record<TabKey, { label: string; unit: string; color: string; decimals: number }> = {
+  elevation: { label: 'Elevation', unit: 'm',     color: '#00c8ff', decimals: 0 },
+  speed:     { label: 'Speed',     unit: 'km/h',  color: '#ff6b35', decimals: 1 },
+  hr:        { label: 'HR',        unit: 'bpm',   color: '#f87171', decimals: 0 },
+  cadence:   { label: 'Cadence',   unit: 'rpm',   color: '#a78bfa', decimals: 0 },
+  power:     { label: 'Power',     unit: 'W',     color: '#facc15', decimals: 0 },
+};
+
+function MetricCharts({ timeseries, loading, accent }: { timeseries: Timeseries | null; loading: boolean; accent: string }) {
+  const [activeTab, setActiveTab] = useState<TabKey>('elevation');
+
+  if (loading) {
+    return (
+      <View style={styles.chartPlaceholder}>
+        <Text style={{ color: accent, fontSize: 13 }}>Loading chart…</Text>
+      </View>
+    );
+  }
+  if (!timeseries) return null;
+
+  const seriesMap: Record<TabKey, (number | null)[] | null | undefined> = {
+    elevation: timeseries.elevation_m,
+    speed:     timeseries.speed_kmh,
+    hr:        timeseries.hr_bpm,
+    cadence:   timeseries.cadence_rpm,
+    power:     timeseries.power_w,
+  };
+
+  const available = (Object.keys(TAB_META) as TabKey[]).filter(
+    k => seriesMap[k]?.some(v => v != null)
+  );
+
+  if (!available.length) return null;
+
+  const tab = available.includes(activeTab) ? activeTab : available[0];
+  const { color, unit, decimals } = TAB_META[tab];
+  const raw = seriesMap[tab]!;
+
+  return (
+    <View style={styles.chartContainer}>
+      {/* Tab row */}
+      <View style={styles.chartTabs}>
+        {available.map(k => (
+          <Pressable
+            key={k}
+            style={[styles.chartTab, tab === k && { borderBottomColor: TAB_META[k].color, borderBottomWidth: 2 }]}
+            onPress={() => setActiveTab(k)}
+          >
+            <Text style={[styles.chartTabText, tab === k && { color: TAB_META[k].color }]}>
+              {TAB_META[k].label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      {/* Chart */}
+      <MetricChart key={tab} times={timeseries.t} values={raw} color={color} unit={unit} decimals={decimals} />
+    </View>
+  );
+}
+
+function MetricChart({
+  times, values, color, unit, decimals,
+}: {
+  times: number[];
+  values: (number | null)[];
+  color: string;
+  unit: string;
+  decimals: number;
+}) {
+  const W = 340;
+  const H = 100;
+  const PAD = 4;
+
+  // Downsample to ≤300 points
+  const step = Math.max(1, Math.floor(values.length / 300));
+  const ts   = times.filter((_, i) => i % step === 0);
+  const vs   = values.filter((_, i) => i % step === 0).map(v => v ?? 0);
+
+  const minV = Math.min(...vs);
+  const maxV = Math.max(...vs);
+  const range = maxV - minV || 1;
+  const maxT  = ts[ts.length - 1] || 1;
+
+  const x = (t: number) => PAD + (t / maxT) * (W - PAD * 2);
+  const y = (v: number) => PAD + (1 - (v - minV) / range) * (H - PAD * 2);
+
+  const pts      = ts.map((t, i) => `${x(t).toFixed(1)},${y(vs[i]).toFixed(1)}`);
+  const linePath = `M ${pts.join(' L ')}`;
+  const areaPath = `M ${x(ts[0])},${H} L ${pts.join(' L ')} L ${x(maxT)},${H} Z`;
+  const gradId   = `grad-${color.replace('#', '')}`;
+
+  const fmt = (v: number) => decimals === 0 ? String(Math.round(v)) : v.toFixed(decimals);
+
+  return (
+    <>
+      <Text style={[styles.chartLabel, { color }]}>{fmt(maxV)} {unit}</Text>
+      <Svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+        <Defs>
+          <LinearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+            <Stop offset="0" stopColor={color} stopOpacity="0.35" />
+            <Stop offset="1" stopColor={color} stopOpacity="0.02" />
+          </LinearGradient>
+        </Defs>
+        <Path d={areaPath} fill={`url(#${gradId})`} />
+        <Path d={linePath} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
+      </Svg>
+      <Text style={[styles.chartLabel, { color: '#3f3f46', marginBottom: 10 }]}>{fmt(minV)} {unit}</Text>
+    </>
+  );
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+// Returns [west, south, east, north] per LngLatBounds spec
+function geoJsonBounds(gj: object): [number, number, number, number] | null {
+  const coords: [number, number][] = [];
+  function collect(obj: unknown) {
+    if (!obj || typeof obj !== 'object') return;
+    const o = obj as Record<string, unknown>;
+    if (o.type === 'Feature') { collect(o.geometry); return; }
+    if (o.type === 'FeatureCollection') { (o.features as unknown[]).forEach(collect); return; }
+    if (o.type === 'LineString') { coords.push(...(o.coordinates as [number, number][])); return; }
+    if (o.type === 'MultiLineString') { (o.coordinates as [number, number][][]).forEach(c => coords.push(...c)); return; }
+  }
+  collect(gj);
+  if (!coords.length) return null;
+  const lons = coords.map(c => c[0]);
+  const lats = coords.map(c => c[1]);
+  return [Math.min(...lons), Math.min(...lats), Math.max(...lons), Math.max(...lats)];
+}
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+
+function StatCell({ label, value, unit }: { label: string; value: string; unit: string }) {
+  return (
+    <View style={styles.statCell}>
+      <View style={styles.statValueRow}>
+        <Text style={styles.statValue}>{value}</Text>
+        {unit ? <Text style={styles.statUnit}>{unit}</Text> : null}
+      </View>
+      <Text style={styles.statLabel}>{label}</Text>
+    </View>
+  );
+}
+
+function MetaRow({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.metaRow}>
+      <Text style={styles.metaLabel}>{label}</Text>
+      <Text style={styles.metaValue}>{value}</Text>
+    </View>
+  );
+}
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container:      { flex: 1, backgroundColor: '#09090b' },
+  content:        { paddingBottom: 40 },
+  center:         { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#09090b' },
+  notFound:       { color: '#71717a', fontSize: 16 },
+  topBar:         { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 60, paddingBottom: 12 },
+  backButton:     { paddingHorizontal: 16 },
+  backText:       { fontSize: 15 },
+  deleteButton:   { paddingHorizontal: 16 },
+  deleteText:     { color: '#f87171', fontSize: 15 },
+  sport:          { color: '#71717a', fontSize: 12, fontWeight: '600', letterSpacing: 0.8, paddingHorizontal: 16, marginBottom: 4 },
+  titleRow:       { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, marginBottom: 4 },
+  title:          { color: '#f4f4f5', fontSize: 22, fontWeight: '700', flexShrink: 1 },
+  titleInput:     { color: '#f4f4f5', fontSize: 22, fontWeight: '700', paddingHorizontal: 16, marginBottom: 4, borderBottomWidth: 1, borderBottomColor: '#3b82f6' },
+  editHint:       { color: '#52525b', fontSize: 16, marginLeft: 8 },
+  date:           { color: '#71717a', fontSize: 13, paddingHorizontal: 16, marginBottom: 16 },
+  mapContainer:    { height: 220, marginBottom: 16, borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#27272a' },
+  map:             { flex: 1 },
+  mapPlaceholder:  { height: 220, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center', borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#27272a', marginBottom: 16 },
+  mapExpandHint:   { position: 'absolute', bottom: 8, right: 8, backgroundColor: 'rgba(0,0,0,0.55)', borderRadius: 6, paddingHorizontal: 8, paddingVertical: 4 },
+  mapExpandText:   { color: '#a1a1aa', fontSize: 11 },
+  fullscreenMap:   { flex: 1, backgroundColor: '#09090b' },
+  closeButton:     { position: 'absolute', top: 56, right: 16, backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: 20, width: 36, height: 36, alignItems: 'center', justifyContent: 'center' },
+  closeText:       { color: '#fff', fontSize: 16 },
+  zoomButtons:     { position: 'absolute', bottom: 40, right: 16, gap: 8 },
+  zoomBtn:         { backgroundColor: 'rgba(0,0,0,0.65)', borderRadius: 20, width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
+  zoomBtnText:     { color: '#fff', fontSize: 22, fontWeight: '600', lineHeight: 28 },
+  chartContainer:   { marginHorizontal: 16, marginBottom: 16, backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1, borderColor: '#27272a', overflow: 'hidden' },
+  chartPlaceholder: { height: 120, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center', borderRadius: 10, borderWidth: 1, borderColor: '#27272a', marginHorizontal: 16, marginBottom: 16 },
+  chartTabs:        { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#27272a' },
+  chartTab:         { flex: 1, paddingVertical: 8, alignItems: 'center', borderBottomWidth: 2, borderBottomColor: 'transparent' },
+  chartTabText:     { color: '#52525b', fontSize: 11, fontWeight: '600' },
+  chartLabel:       { color: '#3f3f46', fontSize: 10, marginBottom: 2, marginHorizontal: 12, marginTop: 10 },
+  grid:           { flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: 12, gap: 8, marginBottom: 16 },
+  statCell:       { backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1, borderColor: '#27272a', padding: 14, width: '47%' },
+  statValueRow:   { flexDirection: 'row', alignItems: 'baseline', gap: 4, marginBottom: 4 },
+  statValue:      { color: '#f4f4f5', fontSize: 24, fontWeight: '700' },
+  statUnit:       { color: '#71717a', fontSize: 13 },
+  statLabel:      { color: '#71717a', fontSize: 12 },
+  meta:           { marginHorizontal: 16, backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1, borderColor: '#27272a' },
+  metaRow:        { flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 14, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#27272a' },
+  metaLabel:      { color: '#71717a', fontSize: 13 },
+  metaValue:      { color: '#a1a1aa', fontSize: 13 },
+});

babel.config.js

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

components/ActivityCard.tsx

@@ -0,0 +1,108 @@
+import { useRouter } from 'expo-router';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import type { ActivitySummary } from '@/db/queries';
+import { useTheme } from '@/ThemeContext';
+
+export function ActivityCard({
+  activity,
+  selecting,
+  checked,
+  onToggleSelect,
+  onLongPress,
+}: {
+  activity: ActivitySummary;
+  selecting: boolean;
+  checked: boolean;
+  onToggleSelect: () => void;
+  onLongPress: () => void;
+}) {
+  const router = useRouter();
+  const theme = useTheme();
+  const km   = activity.distance_m != null ? (activity.distance_m / 1000).toFixed(1) : null;
+  const elev = activity.elevation_gain_m != null ? Math.round(activity.elevation_gain_m) : null;
+  const date = new Date(activity.started_at).toLocaleDateString(undefined, {
+    day: 'numeric', month: 'short', year: 'numeric',
+  });
+
+  function handlePress() {
+    if (selecting) onToggleSelect();
+    else router.push(`/activity/${activity.id}`);
+  }
+
+  return (
+    <Pressable
+      style={[styles.card, checked && { borderColor: theme.accent }]}
+      onPress={handlePress}
+      onLongPress={onLongPress}
+    >
+      <View style={styles.cardTop}>
+        <View style={styles.cardLeft}>
+          {selecting && (
+            <View style={[styles.checkbox, checked && { backgroundColor: theme.accent, borderColor: theme.accent }]}>
+              {checked && <Text style={styles.checkmark}>✓</Text>}
+            </View>
+          )}
+          <Text style={styles.sportIcon}>{sportIcon(activity.sport)}</Text>
+        </View>
+        <View style={styles.cardMeta}>
+          <Text style={styles.cardDate}>{date}</Text>
+          {activity.origin === 'remote'
+            ? <Text style={[styles.remoteBadge, { color: theme.accent, borderColor: theme.accent }]}>cloud</Text>
+            : !activity.synced_at && <Text style={styles.localBadge}>local</Text>
+          }
+        </View>
+      </View>
+      <Text style={styles.cardTitle} numberOfLines={1}>{activity.user_title ?? activity.title}</Text>
+      <View style={styles.cardStats}>
+        {km   && <Stat label="km" value={km} />}
+        {elev != null && <Stat label="m↑" value={String(elev)} />}
+      </View>
+    </Pressable>
+  );
+}
+
+export function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.stat}>
+      <Text style={styles.statValue}>{value}</Text>
+      <Text style={styles.statLabel}>{label}</Text>
+    </View>
+  );
+}
+
+export function sportIcon(sport: string): string {
+  const icons: Record<string, string> = {
+    cycling: '🚴', running: '🏃', hiking: '🥾', swimming: '🏊', walking: '🚶',
+  };
+  return icons[sport] ?? '🏅';
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#18181b', borderRadius: 12,
+    padding: 16, borderWidth: 1, borderColor: '#27272a',
+  },
+  cardTop:  { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
+  cardLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  sportIcon: { fontSize: 20 },
+  cardMeta: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  cardDate: { color: '#71717a', fontSize: 12 },
+  remoteBadge: {
+    fontSize: 10, borderWidth: 1,
+    borderRadius: 4, paddingHorizontal: 4,
+  },
+  localBadge: {
+    color: '#a1a1aa', fontSize: 10, borderWidth: 1,
+    borderColor: '#3f3f46', borderRadius: 4, paddingHorizontal: 4,
+  },
+  cardTitle:  { color: '#f4f4f5', fontSize: 15, fontWeight: '600', marginBottom: 10 },
+  cardStats:  { flexDirection: 'row', gap: 16 },
+  stat:       { flexDirection: 'row', alignItems: 'baseline', gap: 3 },
+  statValue:  { color: '#f4f4f5', fontSize: 16, fontWeight: '600' },
+  statLabel:  { color: '#71717a', fontSize: 12 },
+  checkbox: {
+    width: 20, height: 20, borderRadius: 4, borderWidth: 1.5,
+    borderColor: '#52525b', alignItems: 'center', justifyContent: 'center',
+  },
+  checkmark: { color: '#fff', fontSize: 12, fontWeight: '700' },
+});

db/index.ts

@@ -0,0 +1,47 @@
+import type { SQLiteDatabase } from 'expo-sqlite';
+
+export async function migrateDb(db: SQLiteDatabase): Promise<void> {
+  await db.execAsync('PRAGMA journal_mode = WAL;');
+  await db.execAsync(`
+    CREATE TABLE IF NOT EXISTS activities (
+      id              TEXT PRIMARY KEY,
+      source_hash     TEXT NOT NULL,
+      detail_json     TEXT NOT NULL,
+      timeseries_json TEXT,
+      geojson         TEXT,
+      original_path   TEXT,
+      synced_at       INTEGER,
+      origin          TEXT NOT NULL CHECK(origin IN ('local', 'remote')),
+      created_at      INTEGER NOT NULL DEFAULT (unixepoch())
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_activities_created_at
+      ON activities(created_at DESC);
+
+    CREATE TABLE IF NOT EXISTS settings (
+      key   TEXT PRIMARY KEY,
+      value TEXT NOT NULL
+    );
+  `);
+
+  // Migration v2: source_path stores the original filesystem path a file was
+  // imported from (e.g. /sdcard/Karoo/Rides/ride.fit), used for watch-folder
+  // deduplication without re-hashing files.
+  try {
+    await db.execAsync('ALTER TABLE activities ADD COLUMN source_path TEXT');
+    await db.execAsync(
+      'CREATE INDEX IF NOT EXISTS idx_activities_source_path ON activities(source_path)',
+    );
+  } catch {
+    // Column already exists — migration already ran, ignore.
+  }
+
+  // Migration v3: edits_json stores user overrides (e.g. {"title": "My title"})
+  // kept separate from detail_json so server re-extraction (Option A) never
+  // clobbers user edits.
+  try {
+    await db.execAsync('ALTER TABLE activities ADD COLUMN edits_json TEXT');
+  } catch {
+    // Column already exists — migration already ran, ignore.
+  }
+}

db/queries.ts

@@ -0,0 +1,264 @@
+import { useSQLiteContext } from 'expo-sqlite';
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+export type ActivityRow = {
+  id: string;
+  source_hash: string;
+  detail_json: string;
+  timeseries_json: string | null;
+  geojson: string | null;
+  original_path: string | null;
+  source_path: string | null;
+  synced_at: number | null;
+  origin: 'local' | 'remote';
+  created_at: number;
+  edits_json: string | null;
+};
+
+export type ActivitySummary = {
+  id: string;
+  title: string;
+  user_title: string | null;  // from edits_json; takes display priority over title
+  sport: string;
+  started_at: string;
+  distance_m: number | null;
+  duration_s: number | null;
+  elevation_gain_m: number | null;
+  origin: 'local' | 'remote';
+  synced_at: number | null;
+};
+
+// ── Activities ─────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 50;
+
+export function useActivities(searchQuery = '', limit = PAGE_SIZE): ActivitySummary[] {
+  const db = useSQLiteContext();
+  const like = `%${searchQuery}%`;
+  const rows = db.getAllSync<ActivitySummary>(`
+    SELECT
+      id, origin, synced_at,
+      json_extract(detail_json, '$.title')            AS title,
+      json_extract(edits_json,  '$.title')            AS user_title,
+      json_extract(detail_json, '$.sport')            AS sport,
+      json_extract(detail_json, '$.started_at')       AS started_at,
+      json_extract(detail_json, '$.distance_m')       AS distance_m,
+      json_extract(detail_json, '$.duration_s')       AS duration_s,
+      json_extract(detail_json, '$.elevation_gain_m') AS elevation_gain_m
+    FROM activities
+    WHERE (? = '' OR json_extract(detail_json, '$.title') LIKE ?)
+    ORDER BY json_extract(detail_json, '$.started_at') DESC
+    LIMIT ?
+  `, [searchQuery, like, limit]);
+  return rows;
+}
+
+export function useActivityCount(searchQuery = ''): number {
+  const db = useSQLiteContext();
+  const like = `%${searchQuery}%`;
+  const row = db.getFirstSync<{ n: number }>(
+    `SELECT COUNT(*) as n FROM activities
+     WHERE (? = '' OR json_extract(detail_json, '$.title') LIKE ?)`,
+    [searchQuery, like],
+  );
+  return row?.n ?? 0;
+}
+
+export { PAGE_SIZE };
+
+export type ActivityFilter = {
+  sport: string;    // '' = all sports
+  dateFrom: string; // '' = no lower bound; ISO-like 'YYYY-MM-DDTHHMMSSZ' for comparison
+  dateTo: string;   // '' = no upper bound
+  sort: 'date' | 'distance' | 'elevation';
+};
+
+const SORT_SQL: Record<string, string> = {
+  date:      "json_extract(detail_json, '$.started_at') DESC",
+  distance:  "json_extract(detail_json, '$.distance_m') DESC",
+  elevation: "json_extract(detail_json, '$.elevation_gain_m') DESC",
+};
+
+export function useFilteredActivities(filter: ActivityFilter, limit = PAGE_SIZE): ActivitySummary[] {
+  const db = useSQLiteContext();
+  const order = SORT_SQL[filter.sort] ?? SORT_SQL.date;
+  return db.getAllSync<ActivitySummary>(`
+    SELECT
+      id, origin, synced_at,
+      json_extract(detail_json, '$.title')            AS title,
+      json_extract(edits_json,  '$.title')            AS user_title,
+      json_extract(detail_json, '$.sport')            AS sport,
+      json_extract(detail_json, '$.started_at')       AS started_at,
+      json_extract(detail_json, '$.distance_m')       AS distance_m,
+      json_extract(detail_json, '$.duration_s')       AS duration_s,
+      json_extract(detail_json, '$.elevation_gain_m') AS elevation_gain_m
+    FROM activities
+    WHERE (? = '' OR json_extract(detail_json, '$.sport') = ?)
+      AND (? = '' OR json_extract(detail_json, '$.started_at') >= ?)
+      AND (? = '' OR json_extract(detail_json, '$.started_at') <  ?)
+    ORDER BY ${order}
+    LIMIT ?
+  `, [filter.sport, filter.sport, filter.dateFrom, filter.dateFrom, filter.dateTo, filter.dateTo, limit]);
+}
+
+export function useFilteredCount(filter: ActivityFilter): number {
+  const db = useSQLiteContext();
+  const row = db.getFirstSync<{ n: number }>(`
+    SELECT COUNT(*) as n FROM activities
+    WHERE (? = '' OR json_extract(detail_json, '$.sport') = ?)
+      AND (? = '' OR json_extract(detail_json, '$.started_at') >= ?)
+      AND (? = '' OR json_extract(detail_json, '$.started_at') <  ?)
+  `, [filter.sport, filter.sport, filter.dateFrom, filter.dateFrom, filter.dateTo, filter.dateTo]);
+  return row?.n ?? 0;
+}
+
+export function useActivityYears(): string[] {
+  const db = useSQLiteContext();
+  const rows = db.getAllSync<{ year: string }>(
+    `SELECT DISTINCT substr(json_extract(detail_json, '$.started_at'), 1, 4) AS year
+     FROM activities
+     WHERE json_extract(detail_json, '$.started_at') IS NOT NULL
+     ORDER BY year DESC`,
+  );
+  return rows.map(r => r.year).filter(Boolean);
+}
+
+export function useActivity(id: string): ActivityRow | null {
+  const db = useSQLiteContext();
+  return db.getFirstSync<ActivityRow>(
+    'SELECT * FROM activities WHERE id = ?',
+    [id],
+  ) ?? null;
+}
+
+export async function insertActivity(
+  db: ReturnType<typeof useSQLiteContext>,
+  row: Pick<ActivityRow, 'id' | 'source_hash' | 'detail_json' | 'timeseries_json' | 'geojson' | 'original_path' | 'origin'>
+      & { source_path?: string | null },
+): Promise<void> {
+  await db.runAsync(
+    `INSERT OR IGNORE INTO activities
+       (id, source_hash, detail_json, timeseries_json, geojson, original_path, source_path, origin)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+    [
+      row.id,
+      row.source_hash,
+      row.detail_json,
+      row.timeseries_json ?? null,
+      row.geojson ?? null,
+      row.original_path ?? null,
+      row.source_path ?? null,
+      row.origin,
+    ],
+  );
+}
+
+export function isSourcePathImported(
+  db: ReturnType<typeof useSQLiteContext>,
+  sourcePath: string,
+): boolean {
+  const row = db.getFirstSync<{ id: string }>(
+    'SELECT id FROM activities WHERE source_path = ?',
+    [sourcePath],
+  );
+  return row != null;
+}
+
+export async function upsertRemoteActivity(
+  db: ReturnType<typeof useSQLiteContext>,
+  id: string,
+  detailJson: string,
+): Promise<boolean> {
+  const now = Math.floor(Date.now() / 1000);
+  const result = await db.runAsync(
+    `INSERT INTO activities (id, source_hash, detail_json, origin, synced_at)
+     VALUES (?, ?, ?, 'remote', ?)
+     ON CONFLICT(id) DO UPDATE SET
+       detail_json = excluded.detail_json,
+       synced_at   = excluded.synced_at
+     WHERE origin = 'remote'`,
+    [id, id, detailJson, now],
+  );
+  return result.changes > 0;
+}
+
+export async function deleteRemoteActivities(
+  db: ReturnType<typeof useSQLiteContext>,
+): Promise<number> {
+  const result = await db.runAsync(`DELETE FROM activities WHERE origin = 'remote'`);
+  return result.changes;
+}
+
+export async function deleteActivity(
+  db: ReturnType<typeof useSQLiteContext>,
+  id: string,
+): Promise<string | null> {
+  const row = db.getFirstSync<{ original_path: string | null }>(
+    'SELECT original_path FROM activities WHERE id = ?',
+    [id],
+  );
+  await db.runAsync('DELETE FROM activities WHERE id = ?', [id]);
+  return row?.original_path ?? null;
+}
+
+export async function setActivityTitle(
+  db: ReturnType<typeof useSQLiteContext>,
+  id: string,
+  title: string,
+): Promise<void> {
+  await db.runAsync(
+    `UPDATE activities
+     SET edits_json = json_set(COALESCE(edits_json, '{}'), '$.title', ?)
+     WHERE id = ?`,
+    [title, id],
+  );
+}
+
+export async function deleteActivities(
+  db: ReturnType<typeof useSQLiteContext>,
+  ids: string[],
+): Promise<Array<string | null>> {
+  if (ids.length === 0) return [];
+  const rows = db.getAllSync<{ original_path: string | null }>(
+    `SELECT original_path FROM activities WHERE id IN (${ids.map(() => '?').join(',')})`,
+    ids,
+  );
+  const placeholders = ids.map(() => '?').join(',');
+  await db.runAsync(`DELETE FROM activities WHERE id IN (${placeholders})`, ids);
+  return rows.map(r => r.original_path ?? null);
+}
+
+// ── Settings ───────────────────────────────────────────────────────────────
+
+export async function getSetting(
+  db: ReturnType<typeof useSQLiteContext>,
+  key: string,
+): Promise<string | null> {
+  const row = db.getFirstSync<{ value: string }>(
+    'SELECT value FROM settings WHERE key = ?',
+    [key],
+  );
+  return row?.value ?? null;
+}
+
+export async function setSetting(
+  db: ReturnType<typeof useSQLiteContext>,
+  key: string,
+  value: string,
+): Promise<void> {
+  await db.runAsync(
+    `INSERT INTO settings (key, value) VALUES (?, ?)
+     ON CONFLICT(key) DO UPDATE SET value = excluded.value`,
+    [key, value],
+  );
+}
+
+export function useSetting(key: string): string | null {
+  const db = useSQLiteContext();
+  const row = db.getFirstSync<{ value: string }>(
+    'SELECT value FROM settings WHERE key = ?',
+    [key],
+  );
+  return row?.value ?? null;
+}

db/sync.ts

@@ -0,0 +1,279 @@
+import * as FileSystem from 'expo-file-system/legacy';
+import type { SQLiteDatabase } from 'expo-sqlite';
+import { getSetting, upsertRemoteActivity } from './queries';
+
+export type SyncResult = {
+  synced: number;
+  total: number;
+  fetched?: number;
+  uploaded?: number;
+  failed?: number;
+  error?: string;
+};
+
+async function resolveCredentials(db: SQLiteDatabase): Promise<{ instanceUrl: string; token: string } | { error: string }> {
+  const instanceUrl = (await getSetting(db, 'instance_url'))?.replace(/\/$/, '');
+  const token = await getSetting(db, 'api_token');
+  if (!instanceUrl || !token) return { error: 'No instance configured — add one in Settings.' };
+  return { instanceUrl, token };
+}
+
+export async function downloadFeed(db: SQLiteDatabase): Promise<SyncResult> {
+  const creds = await resolveCredentials(db);
+  if ('error' in creds) return { synced: 0, total: 0, error: creds.error };
+  const { instanceUrl, token } = creds;
+
+  let resp: Response;
+  try {
+    resp = await fetch(`${instanceUrl}/api/feed`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  } catch {
+    return { synced: 0, total: 0, error: 'Could not reach instance — check your connection.' };
+  }
+
+  if (resp.status === 401) return { synced: 0, total: 0, error: 'Session expired — reconnect in Settings.' };
+  if (!resp.ok) return { synced: 0, total: 0, error: `Server error (${resp.status})` };
+
+  const data: { activities?: RemoteSummary[] } = await resp.json();
+  const activities = data.activities ?? [];
+  const syncMode = (await getSetting(db, 'sync_mode')) ?? 'summaries';
+
+  let synced = 0;
+  for (const a of activities) {
+    const detailJson = JSON.stringify({
+      id: a.id,
+      title: a.title ?? a.id,
+      sport: a.sport ?? null,
+      started_at: a.started_at ?? null,
+      distance_m: a.distance_m ?? null,
+      moving_time_s: a.moving_time_s ?? null,
+      elevation_gain_m: a.elevation_gain_m ?? null,
+      avg_speed_kmh: a.avg_speed_kmh ?? null,
+      avg_hr_bpm: a.avg_hr_bpm ?? null,
+      avg_power_w: a.avg_power_w ?? null,
+    });
+    const changed = await upsertRemoteActivity(db, a.id, detailJson);
+    if (changed) synced++;
+  }
+
+  if (syncMode !== 'full') return { synced, total: activities.length };
+
+  // Full mode: fetch geojson + timeseries for activities missing them
+  const headers = { Authorization: `Bearer ${token}` };
+  let fetched = 0;
+  for (const a of activities) {
+    const row = db.getFirstSync<{ g: number; t: number }>(
+      'SELECT (geojson IS NOT NULL) as g, (timeseries_json IS NOT NULL) as t FROM activities WHERE id = ?',
+      [a.id],
+    );
+    if (row?.g && row?.t) continue;
+
+    let gj: string | null = null;
+    let ts: string | null = null;
+    try {
+      if (!row?.g) {
+        const r = await fetch(`${instanceUrl}/api/activity/${a.id}/geojson`, { headers });
+        if (r.ok) gj = await r.text();
+      }
+      if (!row?.t) {
+        const r = await fetch(`${instanceUrl}/api/activity/${a.id}/timeseries`, { headers });
+        if (r.ok) ts = await r.text();
+      }
+    } catch {}
+
+    if (gj !== null || ts !== null) {
+      await db.runAsync(
+        `UPDATE activities SET
+           geojson         = COALESCE(geojson,         ?),
+           timeseries_json = COALESCE(timeseries_json, ?)
+         WHERE id = ? AND origin = 'remote'`,
+        [gj, ts, a.id],
+      );
+      fetched++;
+    }
+  }
+
+  return { synced, total: activities.length, fetched };
+}
+
+export async function uploadFeed(
+  db: SQLiteDatabase,
+  onProgress?: (n: number, total: number) => void,
+): Promise<SyncResult> {
+  const creds = await resolveCredentials(db);
+  if ('error' in creds) return { synced: 0, total: 0, error: creds.error };
+  const { instanceUrl, token } = creds;
+
+  // Reconcile local synced_at against what the server actually has.
+  // If the server was wiped/reset, activities we thought were uploaded need
+  // re-uploading — clear their synced_at so they re-enter the upload queue.
+  try {
+    const feedResp = await fetch(`${instanceUrl}/api/feed`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    if (feedResp.ok) {
+      const feedData: { activities?: { id: string }[] } = await feedResp.json();
+      const serverIds = new Set((feedData.activities ?? []).map(a => a.id));
+      const syncedRows = db.getAllSync<{ id: string }>(
+        `SELECT id FROM activities WHERE origin = 'local' AND synced_at IS NOT NULL`,
+      );
+      for (const row of syncedRows) {
+        if (!serverIds.has(row.id)) {
+          await db.runAsync(`UPDATE activities SET synced_at = NULL WHERE id = ?`, [row.id]);
+        }
+      }
+    }
+  } catch {
+    // Best-effort — proceed with upload even if reconciliation fails
+  }
+
+  const { uploaded, failed } = await uploadLocalActivities(db, instanceUrl, token, onProgress);
+  return { synced: 0, total: 0, uploaded, failed: failed || undefined };
+}
+
+export async function syncFeed(db: SQLiteDatabase): Promise<SyncResult> {
+  const dl = await downloadFeed(db);
+  if (dl.error) return dl;
+
+  const uploadEnabled = (await getSetting(db, 'sync_upload')) === 'true';
+  let uploaded = 0;
+  if (uploadEnabled) {
+    const ul = await uploadFeed(db);
+    uploaded = ul.uploaded ?? 0;
+  }
+
+  return { ...dl, uploaded: uploaded || undefined };
+}
+
+export async function countPendingUploads(db: SQLiteDatabase): Promise<number> {
+  const row = db.getFirstSync<{ n: number }>(
+    `SELECT COUNT(*) as n FROM activities WHERE origin = 'local' AND synced_at IS NULL`,
+  );
+  return row?.n ?? 0;
+}
+
+async function uploadLocalActivities(
+  db: SQLiteDatabase,
+  instanceUrl: string,
+  token: string,
+  onProgress?: (n: number, total: number) => void,
+): Promise<{ uploaded: number; failed: number }> {
+  const rows = db.getAllSync<{
+    id: string;
+    detail_json: string;
+    timeseries_json: string | null;
+    geojson: string | null;
+    original_path: string | null;
+    edits_json: string | null;
+  }>(
+    `SELECT id, detail_json, timeseries_json, geojson, original_path, edits_json
+     FROM activities WHERE origin = 'local' AND synced_at IS NULL`,
+  );
+
+  const preferRaw = (await getSetting(db, 'upload_format') ?? 'raw') === 'raw';
+  const headers = { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };
+  let uploaded = 0;
+  let failed = 0;
+  const now = Math.floor(Date.now() / 1000);
+  const total = rows.length;
+
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    onProgress?.(i + 1, total);
+    try {
+      let resp: Response;
+
+      // When preferRaw is set and the original file is still on disk, send the raw
+      // bytes to /api/upload/raw so the server re-extracts with DEM elevation correction.
+      const useRaw = preferRaw &&
+        row.original_path !== null &&
+        (await FileSystem.getInfoAsync(row.original_path)).exists;
+
+      const userTitle: string | null = row.edits_json
+        ? (JSON.parse(row.edits_json).title ?? null)
+        : null;
+
+      if (useRaw) {
+        const filename = row.original_path!.split('/').pop() ?? 'activity.fit';
+        const base64 = await FileSystem.readAsStringAsync(row.original_path!, {
+          encoding: FileSystem.EncodingType.Base64,
+        });
+        resp = await fetch(`${instanceUrl}/api/upload/raw`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({ filename, base64, ...(userTitle ? { user_title: userTitle } : {}) }),
+        });
+      } else {
+        const detail = JSON.parse(row.detail_json);
+        if (userTitle) detail.title = userTitle;
+        const body: Record<string, unknown> = { activity: { id: row.id, ...detail } };
+        if (row.timeseries_json) body.timeseries = JSON.parse(row.timeseries_json);
+        if (row.geojson)         body.geojson    = JSON.parse(row.geojson);
+        resp = await fetch(`${instanceUrl}/api/upload/bas`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(body),
+        });
+      }
+
+      if (resp.ok) {
+        await db.runAsync(`UPDATE activities SET synced_at = ? WHERE id = ?`, [now, row.id]);
+        // Option A: after a raw upload, update local detail/timeseries/geojson with the
+        // server's DEM-corrected extraction so the app shows better elevation data.
+        if (useRaw) {
+          try {
+            const data = await resp.json() as {
+              id: string;
+              detail: object;
+              timeseries: object | null;
+              geojson: object | null;
+              source_hash: string;
+            };
+            if (data.id === row.id) {
+              await db.runAsync(
+                `UPDATE activities
+                 SET detail_json      = ?,
+                     timeseries_json  = COALESCE(?, timeseries_json),
+                     geojson          = COALESCE(?, geojson),
+                     source_hash      = ?
+                 WHERE id = ?`,
+                [
+                  JSON.stringify(data.detail),
+                  data.timeseries ? JSON.stringify(data.timeseries) : null,
+                  data.geojson    ? JSON.stringify(data.geojson)    : null,
+                  data.source_hash,
+                  row.id,
+                ],
+              );
+            }
+          } catch {
+            // Non-fatal: synced_at is already set, local data stays as-is
+          }
+        }
+        uploaded++;
+      } else {
+        console.warn(`upload ${row.id}: HTTP ${resp.status}`);
+        failed++;
+      }
+    } catch (err) {
+      console.warn(`upload ${row.id}:`, err);
+      failed++;
+    }
+  }
+
+  return { uploaded, failed };
+}
+
+type RemoteSummary = {
+  id: string;
+  title?: string;
+  sport?: string;
+  started_at?: string;
+  distance_m?: number | null;
+  moving_time_s?: number | null;
+  elevation_gain_m?: number | null;
+  avg_speed_kmh?: number | null;
+  avg_hr_bpm?: number | null;
+  avg_power_w?: number | null;
+};

extraction/PyodideWebView.tsx

@@ -0,0 +1,248 @@
+import { StyleSheet } from 'react-native';
+import WebView from 'react-native-webview';
+import { handleWebViewMessage, pyodideRef } from './extractActivity';
+
+const CDN        = 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/';
+// v0.18.1: last version whose JS wrapper avoids ??, ?., and other syntax
+// unavailable on Chrome <80 (e.g. Karoo WebView 61). Used in the compat path.
+const CDN_COMPAT  = 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/';
+
+// Python snippets embedded as JSON strings to avoid any JS/TS escaping issues.
+const PY_INSTALL_PACKAGES = [
+  'import micropip',
+  'await micropip.install(["fitdecode", "gpxpy"])',
+].join('\n');
+
+// emfs:// is Pyodide's Emscripten-FS URL scheme — the only reliable way to
+// install a wheel from bytes without an http/https URL (blob: URLs are not
+// recognised by micropip and cause an InvalidRequirement parse error).
+// _wheel_path is set as a Pyodide global before this runs.
+const PY_INSTALL_WHEEL = [
+  'import micropip',
+  'await micropip.install("emfs://" + _wheel_path, deps=False)',
+].join('\n');
+
+const PY_EXTRACT = [
+  'import json, shutil',
+  'from pathlib import Path',
+  'from bincio.extract.parsers.factory import parse_file',
+  'from bincio.extract.metrics import compute',
+  'from bincio.extract.writer import make_activity_id, write_activity',
+  '',
+  'outdir = Path("/tmp/bincio_out")',
+  'if outdir.exists(): shutil.rmtree(outdir)',
+  'outdir.mkdir()',
+  '',
+  'activity = parse_file(Path("/tmp/" + _filename))',
+  'metrics  = compute(activity)',
+  'write_activity(activity, metrics, outdir, privacy="public", rdp_epsilon=0.0001)',
+  'act_id = make_activity_id(activity)',
+  '',
+  'detail_path  = outdir / "activities" / (act_id + ".json")',
+  'ts_path      = outdir / "activities" / (act_id + ".timeseries.json")',
+  'geojson_path = outdir / "activities" / (act_id + ".geojson")',
+  '',
+  '# write_activity in the installed wheel silently skips timeseries — write it directly.',
+  'if not ts_path.exists():',
+  '    from bincio.extract.timeseries import build_timeseries as _bts',
+  '    _ts = _bts(activity.points, activity.started_at, "public")',
+  '    if _ts.get("t"):',
+  '        ts_path.write_text(json.dumps(_ts))',
+  '',
+  'json.dumps({',
+  '  "id": act_id,',
+  '  "detail": json.loads(detail_path.read_text()),',
+  '  "timeseries": json.loads(ts_path.read_text()) if ts_path.exists() else None,',
+  '  "geojson": json.loads(geojson_path.read_text()) if geojson_path.exists() else None,',
+  '})',
+].join('\n');
+
+// JSON.stringify gives us safely-quoted JS string literals for embedding in HTML.
+const PYODIDE_HTML = `<!DOCTYPE html>
+<html><head><meta charset="utf-8"></head>
+<body>
+<script>
+var _PY_INSTALL_PACKAGES = ${JSON.stringify(PY_INSTALL_PACKAGES)};
+var _PY_INSTALL_WHEEL    = ${JSON.stringify(PY_INSTALL_WHEEL)};
+var _PY_EXTRACT          = ${JSON.stringify(PY_EXTRACT)};
+var _CDN       = ${JSON.stringify(CDN)};
+var _CDN_COMPAT = ${JSON.stringify(CDN_COMPAT)};
+
+function _post(m) { window.ReactNativeWebView.postMessage(JSON.stringify(m)); }
+
+var pyodide       = null;
+var packagesReady = false;
+var wheelReady    = false;
+var initError     = null;
+
+(async function init() {
+  try {
+    // WebAssembly.Global was added in Chrome 69. Without it Pyodide cannot
+    // initialise on any version. Bail out immediately so the mobile app can
+    // fall back to server-side extraction without attempting a 35 MB download.
+    if (typeof WebAssembly === 'undefined' || typeof WebAssembly.Global === 'undefined') {
+      _post({ type: 'engine_unavailable', reason: 'wasm_global' });
+      return;
+    }
+
+    _post({ type: 'progress', msg: 'Loading Python runtime…' });
+
+    // Chrome <80 is missing features that modern Pyodide uses in its JS wrapper:
+    //   Chrome <71: no globalThis  →  factory throws ReferenceError immediately
+    //   Chrome <63: no dynamic import() / for-await-of  →  parse/runtime failure
+    // Detection: read Chrome version from UA; absent means non-Chrome (assume modern).
+    var _chromeVer = (navigator.userAgent.match(/Chrome\\/([0-9]+)/) || [])[1];
+    var _needsPatch = _chromeVer && parseInt(_chromeVer) < 80;
+
+    if (_needsPatch) {
+      // Use v0.18.1 — its JS wrapper avoids ??, ?., and other Chrome-80+ syntax.
+      // Then apply three text patches before injecting via Blob URL (Blob scripts
+      // bypass the browser's module pre-scanner, so patched keywords are invisible).
+      //
+      // Patches (split/join avoids regex escapes, which template literals corrupt):
+      //   1. globalThis polyfill prepended  — Chrome <71 lacks globalThis entirely
+      //   2. import( → __loadScript(        — Chrome <63 cannot parse dynamic import
+      //   3. for await( → for(              — Chrome <63 lacks async iteration;
+      //      the only affected fn (getFsHandles/NativeFS) is never called by us
+      window.__loadScript = function(url) {
+        return new Promise(function(res, rej) {
+          var s = document.createElement('script');
+          s.src = url;
+          s.onload = res;
+          s.onerror = function() { rej(new Error('Failed to load ' + url)); };
+          document.head.appendChild(s);
+        });
+      };
+      var _pyResp = await fetch(_CDN_COMPAT + 'pyodide.js');
+      if (!_pyResp.ok) throw new Error('Could not fetch pyodide.js (' + _pyResp.status + ')');
+      var _pyCode = await _pyResp.text();
+      _pyCode = 'var globalThis=typeof globalThis!=="undefined"?globalThis:self;\\n' + _pyCode;
+      _pyCode = _pyCode.split('import(').join('__loadScript(');
+      _pyCode = _pyCode.split('for await(').join('for(');
+      await new Promise(function(res, rej) {
+        var blob = new Blob([_pyCode], { type: 'application/javascript' });
+        var blobUrl = URL.createObjectURL(blob);
+        var s = document.createElement('script');
+        s.src = blobUrl;
+        s.onload = function() { URL.revokeObjectURL(blobUrl); res(); };
+        s.onerror = function() { URL.revokeObjectURL(blobUrl); rej(new Error('Failed to inject patched pyodide.js')); };
+        document.head.appendChild(s);
+      });
+      pyodide = await loadPyodide({ indexURL: _CDN_COMPAT });
+    } else {
+      await new Promise(function(res, rej) {
+        var s = document.createElement('script');
+        s.src = _CDN + 'pyodide.js';
+        s.onload = res; s.onerror = rej;
+        document.head.appendChild(s);
+      });
+      pyodide = await loadPyodide({ indexURL: _CDN });
+    }
+
+    _post({ type: 'progress', msg: 'Loading packages…' });
+    await pyodide.loadPackage(['lxml', 'pyyaml', 'micropip']);
+
+    _post({ type: 'progress', msg: 'Installing fitdecode, gpxpy…' });
+    await pyodide.runPythonAsync(_PY_INSTALL_PACKAGES);
+
+    packagesReady = true;
+    _post({ type: 'pyodide_ready' });
+  } catch(e) {
+    initError = String(e);
+    _post({ type: 'init_error', message: initError });
+  }
+})();
+
+window._bincioExtract = async function(params) {
+  var reqId         = params.reqId;
+  var filename      = params.filename;
+  var base64        = params.base64;
+  var wheelBase64   = params.wheelBase64;    // pre-fetched by React Native (avoids ATS/HTTP issues)
+  var wheelFilename = params.wheelFilename;  // e.g. "bincio-0.1.0-py3-none-any.whl"
+
+  function post(m) { _post(Object.assign({}, m, { reqId: reqId })); }
+
+  try {
+    // Wait for base packages if still loading
+    if (!packagesReady && !initError) {
+      await new Promise(function(res, rej) {
+        var n = 0;
+        var id = setInterval(function() {
+          if (packagesReady)  { clearInterval(id); res(undefined); }
+          else if (initError) { clearInterval(id); rej(new Error(initError)); }
+          else if (++n > 300) { clearInterval(id); rej(new Error('Pyodide init timed out')); }
+        }, 200);
+      });
+    }
+    if (initError) throw new Error(initError);
+
+    // Install bincio wheel on first extraction.
+    // Wheel bytes arrive pre-fetched from React Native (avoids ATS/HTTP issues).
+    // Write to Pyodide's Emscripten FS so micropip can install via emfs:// URL
+    // (blob: URLs are not recognised by micropip — they cause an InvalidRequirement error).
+    if (!wheelReady) {
+      post({ type: 'progress', msg: 'Loading Bincio…' });
+      var wheelBytes = Uint8Array.from(atob(wheelBase64), function(c) { return c.charCodeAt(0); });
+      var wheelPath  = '/tmp/' + wheelFilename;
+      pyodide.FS.writeFile(wheelPath, wheelBytes);
+      pyodide.globals.set('_wheel_path', wheelPath);
+      await pyodide.runPythonAsync(_PY_INSTALL_WHEEL);
+      wheelReady = true;
+    }
+
+    post({ type: 'progress', msg: 'Extracting…' });
+
+    // Decode base64 file bytes and write to Pyodide's virtual filesystem
+    var bytes = Uint8Array.from(atob(base64), function(c) { return c.charCodeAt(0); });
+    pyodide.FS.writeFile('/tmp/' + filename, bytes);
+
+    // SHA-256 of original file bytes (replaces the stub source_hash)
+    var hashBuf    = await crypto.subtle.digest('SHA-256', bytes.buffer);
+    var sourceHash = Array.from(new Uint8Array(hashBuf))
+      .map(function(b) { return b.toString(16).padStart(2, '0'); })
+      .join('');
+
+    // Run the bincio extraction pipeline
+    pyodide.globals.set('_filename', filename);
+    var resultJson = await pyodide.runPythonAsync(_PY_EXTRACT);
+    var result     = JSON.parse(resultJson);
+
+    _post({
+      type: 'result',
+      reqId: reqId,
+      id: result.id,
+      detail: result.detail,
+      timeseries: result.timeseries,
+      geojson: result.geojson,
+      sourceHash: sourceHash,
+    });
+  } catch(e) {
+    _post({ type: 'error', reqId: reqId, message: e.message || String(e) });
+  }
+};
+</script>
+</body></html>`;
+
+export function PyodideWebView() {
+  return (
+    <WebView
+      ref={pyodideRef}
+      source={{ html: PYODIDE_HTML, baseUrl: 'https://localhost' }}
+      style={styles.hidden}
+      onMessage={handleWebViewMessage}
+      javaScriptEnabled
+      originWhitelist={['*']}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  // Off-screen but still rendered — display:none / opacity:0 can suppress JS on some platforms.
+  hidden: {
+    position: 'absolute',
+    top: -2000,
+    left: 0,
+    width: 1,
+    height: 1,
+  },
+});

extraction/extractActivity.ts

@@ -0,0 +1,138 @@
+import { createRef } from 'react';
+import { Platform } from 'react-native';
+import type WebView from 'react-native-webview';
+import type { WebViewMessageEvent } from 'react-native-webview';
+
+export type ExtractionResult = {
+  id: string;
+  detail: object;
+  timeseries: object | null;
+  geojson: object | null;
+  sourceHash: string;
+};
+
+type Pending = {
+  resolve: (r: ExtractionResult) => void;
+  reject: (e: Error) => void;
+  onStatus: (msg: string) => void;
+};
+
+export const pyodideRef = createRef<WebView>();
+
+const pending = new Map<string, Pending>();
+let reqCounter = 0;
+let isExtracting = false;
+
+// Engine readiness — tracked so callers can wait before batching files.
+let _engineReady = false;
+let _engineError: string | null = null;
+// Android <29 (API 27 = Android 8.1, e.g. Karoo) ships with a system WebView
+// (Chrome <69) that lacks WebAssembly.Global, so Pyodide cannot run. Mounting
+// a WebView on those devices also causes GPU driver crashes (SurfaceView
+// conflicts). Skip the engine entirely and route to server extraction instead.
+let _engineUnavailable = Platform.OS === 'android' && (Platform.Version as number) < 29;
+const _engineResolvers: Array<() => void> = [];
+const _engineRejecters: Array<(e: Error) => void> = [];
+
+// Init-phase progress listeners (messages sent before any extraction starts).
+const _progressListeners = new Set<(msg: string) => void>();
+export function onEngineProgress(cb: (msg: string) => void): () => void {
+  _progressListeners.add(cb);
+  return () => _progressListeners.delete(cb);
+}
+
+export function isEngineAvailable(): boolean | null {
+  // null = not yet determined; true = ready; false = unavailable
+  if (_engineReady) return true;
+  if (_engineUnavailable || _engineError) return false;
+  return null;
+}
+
+export function waitForEngine(timeoutMs = 300_000): Promise<void> {
+  if (_engineReady) return Promise.resolve();
+  if (_engineUnavailable) return Promise.reject(new Error('engine_unavailable'));
+  if (_engineError) return Promise.reject(new Error(_engineError));
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error('Extraction engine timed out — check network and Bincio instance URL'));
+    }, timeoutMs);
+    _engineResolvers.push(() => { clearTimeout(timer); resolve(); });
+    _engineRejecters.push((e) => { clearTimeout(timer); reject(e); });
+  });
+}
+
+export function handleWebViewMessage(e: WebViewMessageEvent): void {
+  let msg: Record<string, unknown>;
+  try { msg = JSON.parse(e.nativeEvent.data); } catch { return; }
+
+  const reqId = msg.reqId as string | undefined;
+  const p = reqId ? pending.get(reqId) : undefined;
+
+  switch (msg.type) {
+    case 'pyodide_ready':
+      _engineReady = true;
+      _engineResolvers.splice(0).forEach(fn => fn());
+      break;
+    case 'engine_unavailable':
+      _engineUnavailable = true;
+      _engineRejecters.splice(0).forEach(fn => fn(new Error('engine_unavailable')));
+      break;
+    case 'init_error':
+      _engineError = msg.message as string;
+      _engineRejecters.splice(0).forEach(fn => fn(new Error(_engineError!)));
+      break;
+    case 'result':
+      if (p) {
+        pending.delete(reqId!);
+        p.resolve({
+          id: msg.id as string,
+          detail: msg.detail as object,
+          timeseries: (msg.timeseries as object | null) ?? null,
+          geojson: (msg.geojson as object | null) ?? null,
+          sourceHash: msg.sourceHash as string,
+        });
+      }
+      break;
+    case 'error':
+      if (p) {
+        pending.delete(reqId!);
+        p.reject(new Error(msg.message as string));
+      }
+      break;
+    case 'progress':
+      if (p) {
+        p.onStatus(msg.msg as string);
+      } else {
+        _progressListeners.forEach(fn => fn(msg.msg as string));
+      }
+      break;
+  }
+}
+
+// wheelBase64 is the bincio .whl file pre-fetched by the React Native side
+// (native networking supports HTTP on local network; WKWebView does not).
+export function extractFile(
+  filename: string,
+  base64: string,
+  wheelBase64: string,
+  wheelFilename: string,
+  onStatus: (msg: string) => void = () => {},
+): Promise<ExtractionResult> {
+  if (isExtracting) return Promise.reject(new Error('Another extraction is already in progress'));
+
+  const webview = pyodideRef.current;
+  if (!webview) return Promise.reject(new Error('Extraction engine not ready — restart the app'));
+
+  isExtracting = true;
+  const reqId = String(++reqCounter);
+  const args = JSON.stringify({ reqId, filename, base64, wheelBase64, wheelFilename });
+
+  return new Promise<ExtractionResult>((resolve, reject) => {
+    pending.set(reqId, {
+      resolve: (r) => { isExtracting = false; resolve(r); },
+      reject: (e) => { isExtracting = false; reject(e); },
+      onStatus,
+    });
+    webview.injectJavaScript(`window._bincioExtract(${args}); true;`);
+  });
+}

extraction/extractServer.ts

@@ -0,0 +1,63 @@
+import type { ExtractionResult } from './extractActivity';
+
+export async function checkServerAuth(instanceUrl: string, token: string): Promise<void> {
+  let resp: Response;
+  try {
+    resp = await fetch(`${instanceUrl}/api/feed`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  } catch {
+    throw new Error('Could not reach Bincio instance — check your connection.');
+  }
+  if (resp.status === 401) throw new Error('Session expired — reconnect in Settings.');
+  if (!resp.ok) throw new Error(`Server error (${resp.status})`);
+}
+
+export async function extractFileViaServer(
+  filename: string,
+  base64: string,
+  instanceUrl: string,
+  token: string,
+  onStatus: (msg: string) => void = () => {},
+): Promise<ExtractionResult> {
+  onStatus('Uploading to Bincio instance…');
+
+  let resp: Response;
+  try {
+    resp = await fetch(`${instanceUrl}/api/upload/raw`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ filename, base64 }),
+    });
+  } catch {
+    throw new Error('Could not reach Bincio instance — check your connection.');
+  }
+
+  if (resp.status === 401) throw new Error('Session expired — reconnect in Settings.');
+  if (resp.status === 422) {
+    const body = await resp.json().catch(() => ({})) as { detail?: string };
+    throw new Error(body.detail ?? 'Server could not process this file.');
+  }
+  if (!resp.ok) throw new Error(`Server error (${resp.status})`);
+
+  onStatus('Processing on server…');
+  const data = await resp.json() as {
+    ok: boolean;
+    id: string;
+    detail: object;
+    timeseries: object | null;
+    geojson: object | null;
+    source_hash: string;
+  };
+
+  return {
+    id: data.id,
+    detail: data.detail,
+    timeseries: data.timeseries,
+    geojson: data.geojson,
+    sourceHash: data.source_hash,
+  };
+}

metro.config.js

@@ -0,0 +1,2 @@
+const { getDefaultConfig } = require('expo/metro-config');
+module.exports = getDefaultConfig(__dirname);

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "bincio",
+  "version": "0.1.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@maplibre/maplibre-react-native": "~11.0.0",
+    "expo": "~54.0.33",
+    "expo-background-fetch": "~14.0.9",
+    "expo-constants": "~18.0.13",
+    "expo-document-picker": "~14.0.8",
+    "expo-file-system": "~19.0.21",
+    "expo-linking": "~8.0.11",
+    "expo-notifications": "~0.32.16",
+    "expo-router": "~6.0.23",
+    "expo-splash-screen": "~31.0.13",
+    "expo-sqlite": "~16.0.10",
+    "expo-status-bar": "~3.0.9",
+    "expo-system-ui": "~6.0.9",
+    "expo-task-manager": "~14.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "~15.15.0",
+    "react-native-webview": "13.15.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@types/react": "~19.1.0",
+    "typescript": "~5.9.2"
+  }
+}

setup.sh

@@ -0,0 +1,104 @@
+#!/usr/bin/env bash
+# Bincio mobile app — one-time setup
+# Run from the mobile/ directory: ./setup.sh
+# Or from the repo root:           bash mobile/setup.sh
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$SCRIPT_DIR"
+
+# ── Colours ───────────────────────────────────────────────────────────────────
+GREEN='\033[0;32m'; YELLOW='\033[1;33m'; RED='\033[0;31m'; RESET='\033[0m'
+ok()   { echo -e "${GREEN}✓${RESET} $*"; }
+warn() { echo -e "${YELLOW}⚠${RESET} $*"; }
+die()  { echo -e "${RED}✗${RESET} $*" >&2; exit 1; }
+step() { echo -e "\n${YELLOW}▸${RESET} $*"; }
+
+echo ""
+echo "  Bincio mobile setup"
+echo "  ═══════════════════"
+echo ""
+
+# ── 1. Node.js ────────────────────────────────────────────────────────────────
+step "Checking Node.js..."
+if ! command -v node &>/dev/null; then
+  die "Node.js not found. Install from https://nodejs.org (v20+ recommended)."
+fi
+NODE_MAJOR=$(node -v | sed 's/v//' | cut -d. -f1)
+if [ "$NODE_MAJOR" -lt 18 ]; then
+  die "Node.js 18+ required (found $(node -v)). Update at https://nodejs.org"
+fi
+ok "Node.js $(node -v)"
+
+# ── 2. npm ────────────────────────────────────────────────────────────────────
+if ! command -v npm &>/dev/null; then
+  die "npm not found. It ships with Node.js — check your installation."
+fi
+ok "npm $(npm -v)"
+
+# ── 3. Expo CLI (global, optional — we use npx) ───────────────────────────────
+step "Checking Expo CLI..."
+if command -v expo &>/dev/null; then
+  ok "Expo CLI $(expo --version) (global)"
+else
+  warn "Expo CLI not installed globally. Using npx instead (slightly slower)."
+  warn "Install globally with: npm install -g expo-cli"
+fi
+
+# ── 4. Platform tools ─────────────────────────────────────────────────────────
+step "Checking platform tools..."
+PLATFORM="$(uname -s)"
+
+if [ "$PLATFORM" = "Darwin" ]; then
+  if command -v xcodebuild &>/dev/null; then
+    ok "Xcode $(xcodebuild -version 2>/dev/null | head -1 | awk '{print $2}')"
+  else
+    warn "Xcode not found — iOS builds will not work."
+    warn "Install Xcode from the App Store, then: xcode-select --install"
+  fi
+  if command -v xcrun &>/dev/null && xcrun --sdk iphoneos --show-sdk-version &>/dev/null; then
+    ok "iOS SDK available"
+  fi
+fi
+
+if command -v adb &>/dev/null; then
+  ok "Android SDK / adb found"
+else
+  warn "adb not found — Android builds require Android Studio."
+  warn "Install from https://developer.android.com/studio"
+fi
+
+# ── 5. Install dependencies ───────────────────────────────────────────────────
+step "Installing npm dependencies..."
+if [ -d node_modules ] && [ -f node_modules/.package-lock.json ]; then
+  ok "node_modules already present — running npm install to sync..."
+fi
+npm install
+ok "Dependencies installed"
+
+# ── 6. expo-env.d.ts (required by expo-router) ────────────────────────────────
+step "Generating Expo type declarations..."
+npx expo customize expo-env.d.ts --no-install 2>/dev/null || true
+if [ ! -f expo-env.d.ts ]; then
+  echo '/// <reference types="expo-router/types" />' > expo-env.d.ts
+fi
+ok "expo-env.d.ts ready"
+
+# ── 7. Summary ────────────────────────────────────────────────────────────────
+echo ""
+echo "  ══════════════════════════════════════════"
+echo "   Setup complete! Next steps:"
+echo ""
+echo "   Start with Expo Go (scan QR on your phone):"
+echo "     npx expo start"
+echo ""
+echo "   Run on Android emulator:"
+echo "     npx expo run:android"
+echo ""
+echo "   Run on iOS simulator (macOS only):"
+echo "     npx expo run:ios"
+echo ""
+echo "   Build APK for Karoo sideload:"
+echo "     npx eas build -p android --profile preview"
+echo "  ══════════════════════════════════════════"
+echo ""

theme.ts

@@ -0,0 +1,29 @@
+export type PaletteKey = 'auto' | 'default' | 'giro' | 'tour' | 'vuelta';
+
+export const PALETTES = {
+  default: { accent: '#60a5fa', dim: 'rgba(96,165,250,0.15)',  label: 'Default' },
+  giro:    { accent: '#f472b6', dim: 'rgba(244,114,182,0.15)', label: "Giro d'Italia" },
+  tour:    { accent: '#facc15', dim: 'rgba(250,204,21,0.15)',  label: 'Tour de France' },
+  vuelta:  { accent: '#ef4444', dim: 'rgba(239,68,68,0.15)',   label: 'Vuelta a España' },
+} as const satisfies Record<string, { accent: string; dim: string; label: string }>;
+
+export type Theme = (typeof PALETTES)[keyof typeof PALETTES];
+
+// Race windows [month 0-indexed, day inclusive] — update each year
+const RACES: Array<{ key: Exclude<PaletteKey, 'auto' | 'default'>; start: [number, number]; end: [number, number] }> = [
+  { key: 'giro',   start: [4, 8],  end: [5, 1]  },  // May 8 – Jun 1
+  { key: 'tour',   start: [5, 27], end: [6, 19] },  // Jun 27 – Jul 19
+  { key: 'vuelta', start: [7, 15], end: [8, 6]  },  // Aug 15 – Sep 6
+];
+
+export function autoKey(): Exclude<PaletteKey, 'auto'> {
+  const now = new Date();
+  const y   = now.getFullYear();
+  for (const r of RACES) {
+    const start = new Date(y, r.start[0], r.start[1]);
+    const end   = new Date(y, r.end[0],   r.end[1] + 1);
+    if (now >= start && now < end) return r.key;
+  }
+  return 'default';
+}
+

tsconfig.json

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