feat: add auth to context

app/index.web.tsx

@@ -1,99 +0,0 @@
-import { authClient } from '@/lib/auth-client';
-import { Button, Image, Platform, Pressable, ScrollView, Text, View } from 'react-native';
-import { useQuery, useZero } from "@rocicorp/zero/react";
-import { queries, type Mutators, type Schema } from '@money/shared';
-import { useEffect, useState } from 'react';
-import { Link } from 'expo-router';
-
-export default function HomeScreen() {
-  const { data: session } = authClient.useSession();
-
-  const z = useZero<Schema, Mutators>();
-  const [transactions] = useQuery(queries.allTransactions(session));
-  const [balances] = useQuery(queries.getBalances(session));
-
-  const [idx, setIdx] = useState(0);
-  const [accountIdx, setAccountIdx] = useState(0);
-
-  const account = balances.at(accountIdx)!;
-
-  const filteredTransactions = transactions
-    .filter(t => t.account_id == account.plaid_id)
-
-  useEffect(() => {
-    if (Platform.OS != 'web') return;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "j") {
-        setIdx((prevIdx) => {
-          if (prevIdx + 1 == filteredTransactions.length) return prevIdx;
-          return prevIdx + 1
-        });
-      } else if (event.key === "k") {
-        setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
-      } else if (event.key == 'g') {
-        setIdx(0);
-      } else if (event.key == "G") {
-        setIdx(transactions.length - 1);
-      } else if (event.key == 'R') {
-        z.mutate.link.updateTransactions();
-        z.mutate.link.updateBalences();
-      } else if (event.key == 'h') {
-        setAccountIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
-      } else if (event.key == 'l') {
-        setAccountIdx((prevIdx) => {
-          if (prevIdx + 1 == balances.length) return prevIdx;
-          return prevIdx + 1
-        });
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [filteredTransactions, balances]);
-
-  function lpad(n: number): string {
-    const LEN = 9;
-    const nstr = n.toFixed(2).toLocaleString();
-    return Array.from({ length: LEN - nstr.length }).join(" ") + nstr;
-  }
-
-  function uuu(t: typeof filteredTransactions[number]): string | undefined {
-    if (!t.json) return;
-    const j = JSON.parse(t.json);
-    return j.counterparties.filter((c: any) => !!c.logo_url).at(0)?.logo_url || j.personal_finance_category_icon_url;
-  }
-
-  return (
-    <View>
-      <Link prefetch href="/settings">
-        <Button title="Settings" />
-      </Link>
-      <View style={{ flexDirection: "row" }}>
-        <View style={{ backgroundColor: '' }}>
-          {balances.map((bal, i) => <View key={bal.id} style={{ backgroundColor: i == accountIdx ? 'black' : undefined}}>
-            <Text style={{ fontFamily: 'mono', color: i == accountIdx ? 'white' : undefined  }}>{bal.name}: {bal.current} ({bal.avaliable})</Text>
-          </View>)}
-        </View>
-
-        <View>
-          {filteredTransactions.map((t, i) => <Pressable onHoverIn={() => {
-            setIdx(i);
-          }} style={{ backgroundColor: i == idx ? 'black' : undefined, cursor: 'default' as 'auto' }} key={t.id}>
-            <Text style={{ fontFamily: 'mono', color: i == idx ? 'white' : undefined }}>
-              {new Date(t.datetime!).toDateString()}
-              <Text style={{ color: t.amount > 0 ? 'red' : 'green' }}> {lpad(t.amount)}</Text>
-              <Image style={{ width: 15, height: 15, marginHorizontal: 10 }} source={{ uri: uuu(t) || "" }} />
-              {t.name.substring(0, 50)}
-            </Text>
-          </Pressable>)}
-        </View>
-        <ScrollView>
-          <Text style={{ fontFamily: 'mono' }}>{JSON.stringify(JSON.parse(filteredTransactions.at(idx)?.json || "null"), null, 4)}</Text>
-        </ScrollView>
-      </View>
-    </View>
-  );
-}

app/settings.tsx

@@ -1,41 +0,0 @@
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { authClient } from '@/lib/auth-client';
-import { Button, Linking, Text } from 'react-native';
-import { useQuery, useZero } from "@rocicorp/zero/react";
-import { queries, type Mutators, type Schema } from '@money/shared';
-
-export default function HomeScreen() {
-  const { data: session } = authClient.useSession();
-
-  const onLogout = () => {
-    authClient.signOut();
-  }
-  const z = useZero<Schema, Mutators>();
-  const [user] = useQuery(queries.me(session));
-  const [plaidLink] = useQuery(queries.getPlaidLink(session)); 
-
-  return (
-    <SafeAreaView>
-      <Text>Hello {user?.name}</Text>
-      <Button onPress={onLogout} title="Logout" />
-
-      <Text>{JSON.stringify(plaidLink)}</Text>
-      {plaidLink ? <Button onPress={() => {
-        Linking.openURL(plaidLink.link);
-      }} title="Open Plaid" /> : <Text>No plaid link</Text>}
-
-      <Button onPress={() => {
-        z.mutate.link.create();
-      }} title="Generate Link" />
-
-      {plaidLink && <Button onPress={() => {
-        z.mutate.link.get({ link_token: plaidLink.token });
-      }} title="Check Link" />}
-
-      {plaidLink && <Button onPress={() => {
-        z.mutate.link.updateTransactions();
-      }} title="Update transactions" />}
-    </SafeAreaView>
-  );
-}
-

apps/api/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@hono/node-server": "^1.19.5",
-    "@money/shared": "link:../shared",
+    "@money/shared": "workspace:*",
     "better-auth": "^1.3.27",
     "hono": "^4.9.12",
     "plaid": "^39.0.0",

apps/expo/.gitignore

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

apps/expo/app/[...route].tsx

@@ -0,0 +1,33 @@
+import { useLocalSearchParams } from "expo-router";
+import { Text } from "react-native";
+import { App, type Route } from "@money/ui";
+import { useEffect, useState } from "react";
+import { authClient } from "@/lib/auth-client";
+
+export default function Page() {
+  const { route: initalRoute } = useLocalSearchParams<{ route: string[] }>();
+  const [route, setRoute] = useState(initalRoute ? "/" + initalRoute.join("/") : "/");
+
+  const { data } = authClient.useSession();
+
+  useEffect(() => {
+    const handler = () => {
+      const newRoute = window.location.pathname.slice(1);
+      setRoute(newRoute);
+    };
+
+    window.addEventListener("popstate", handler);
+    return () => window.removeEventListener("popstate", handler);
+  }, []);
+
+  return (
+    <App
+      auth={data}
+      route={route as Route}
+      setRoute={(page) => {
+        window.history.pushState({}, "", page);
+        setRoute(page);
+      }}
+    />
+  );
+}

apps/expo/app/_layout.tsx

@@ -4,10 +4,10 @@ import 'react-native-reanimated';
 import { authClient } from '@/lib/auth-client';
 import { ZeroProvider } from '@rocicorp/zero/react';
 import { useMemo } from 'react';
-import { authDataSchema } from '@/shared/src/auth';
+import { authDataSchema } from '@money/shared/auth';
 import { Platform } from 'react-native';
 import type { ZeroOptions } from '@rocicorp/zero';
-import { schema, type Schema, createMutators, type Mutators, BASE_URL } from '@/shared/src';
+import { schema, type Schema, createMutators, type Mutators, BASE_URL } from '@money/shared';
 import { expoSQLiteStoreProvider } from "@rocicorp/zero/react-native";
 
 export const unstable_settings = {
@@ -44,8 +44,7 @@ export default function RootLayout() {
     <ZeroProvider {...zeroProps}>
       <Stack>
         <Stack.Protected guard={!isPending && !!session}>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="[...route]" options={{ headerShown: false }} />
-          <Stack.Screen name="settings" options={{ headerShown: false }} />
         </Stack.Protected>
         <Stack.Protected guard={!isPending && !session}>
           <Stack.Screen name="auth" />

apps/expo/components/Header.tsx

@@ -0,0 +1,70 @@
+import { authClient } from "@/lib/auth-client";
+import { queries } from "@money/shared";
+import { useQuery } from "@rocicorp/zero/react";
+import { Link, usePathname, useRouter, type LinkProps } from "expo-router";
+import { useEffect } from "react";
+import { View, Text, Platform } from "react-native";
+
+type Page = { name: string, href: LinkProps['href'] };
+const PAGES: Page[] = [
+  {
+    name: "Home",
+    href: "/",
+  },
+  {
+    name: "Settings",
+    href: "/settings",
+  },
+];
+
+
+export default function Header() {
+  const router = useRouter();
+  const { data: session } = authClient.useSession();
+  const [user] = useQuery(queries.me(session));
+
+  useEffect(() => {
+    if (Platform.OS != 'web') return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "1" && event.ctrlKey) {
+        router.push(PAGES.at(0)!.href);
+      } else if (event.key === "2" && event.ctrlKey) {
+        router.push(PAGES.at(1)!.href);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  
+
+  return (
+    <View style={{ flexDirection: "row", justifyContent: "space-between", backgroundColor: "#f7e2c8" }}>
+      <View style={{ flexDirection: "row" }}>
+        {PAGES.map(page => <Page
+          key={page.name}
+          name={page.name}
+          href={page.href}
+          />)}
+      </View>
+
+      <Link href={"#" as any}>
+        <Text style={{ fontFamily: 'mono' }}>{user?.name}  </Text>
+      </Link>
+    </View>
+  );
+}
+
+function Page({ name, href }: Page) {
+  const path = usePathname();
+
+  return (
+    <Link href={href }>
+      <Text style={{ fontFamily: 'mono' }}>{path == href ? `[ ${name} ]` : `  ${name}  `}</Text>
+    </Link>
+  )
+
+}

apps/expo/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@money/expo",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "build": "expo export --platform web",
+    "lint": "expo lint",
+    "db:migrate": "dotenv -- pnpm run --dir=shared db:migrate",
+    "db:gen": "dotenv -- pnpm run --dir=shared generate:zero"
+  },
+  "dependencies": {
+    "@better-auth/expo": "^1.3.27",
+    "@expo/vector-icons": "^15.0.2",
+    "@money/shared": "workspace:*",
+    "@money/ui": "workspace:*",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "@rocicorp/zero": "^0.23.2025090100",
+    "better-auth": "^1.3.27",
+    "drizzle-orm": "^0.44.6",
+    "expo": "~54.0.13",
+    "expo-constants": "~18.0.9",
+    "expo-crypto": "~15.0.7",
+    "expo-font": "~14.0.9",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.9",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.11",
+    "expo-splash-screen": "~31.0.10",
+    "expo-sqlite": "~16.0.8",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.7",
+    "expo-web-browser": "~15.0.8",
+    "pg": "^8.16.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1"
+  },
+  "devDependencies": {
+    "@types/pg": "^8.15.5",
+    "@types/react": "~19.1.0",
+    "dotenv-cli": "^10.0.0",
+    "drizzle-kit": "^0.31.5",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

apps/tui/.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+*.log
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

apps/tui/README.md

@@ -0,0 +1,15 @@
+# react
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run src/index.tsx
+```
+
+This project was created using `bun create tui`. [create-tui](https://git.new/create-tui) is the easiest way to get started with OpenTUI.

apps/tui/build.ts

@@ -0,0 +1,41 @@
+import esbuild from "esbuild";
+import path from "path";
+
+// Custom plugin to alias "react-native" to react-native-opentui
+const aliasPlugin = {
+  name: "alias-react-native",
+  setup(build) {
+    build.onResolve({ filter: /^react-native$/ }, args => {
+      return {
+        path: path.resolve(__dirname, "../../packages/react-native-opentui/index.tsx"),
+      };
+    });
+  },
+};
+
+// Build configuration
+await esbuild.build({
+  entryPoints: ["src/index.tsx"], // your app entry
+  bundle: true,                            // inline all dependencies (ui included)
+  platform: "node",                        // Node/Bun target
+  format: "esm",                           // keep ESM for top-level await
+  outfile: "dist/index.js",
+  sourcemap: true,
+  plugins: [aliasPlugin],
+  loader: {
+    ".ts": "ts",
+    ".tsx": "tsx",
+  },
+  external: [
+    // leave OpenTUI and Bun built-ins for Bun runtime
+    "react",
+    "@opentui/core",
+    "@opentui/react",
+    "@opentui/react/jsx-runtime",
+    "bun:ffi",
+    // "./assets/**/*.scm",
+    // "./assets/**/*.wasm",
+  ],
+});
+
+console.log("✅ App bundled successfully");

apps/tui/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@money/tui",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "bun run build.js",
+    "start": "bun run dist/index.js"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "dependencies": {
+    "@money/ui": "workspace:*",
+    "@money/shared": "workspace:*",
+    "@opentui/core": "^0.1.39",
+    "@opentui/react": "^0.1.39",
+    "react-native": "^0.82.1",
+    "react-native-opentui": "workspace:*"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.0"
+  }
+}

apps/tui/src/index.tsx

@@ -0,0 +1,33 @@
+import { RGBA, TextAttributes, createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { App, type Route } from "@money/ui";
+import { ZeroProvider } from "@rocicorp/zero/react";
+import { schema } from '@money/shared';
+import { useState } from "react";
+
+const userID = "anon";
+const server = "http://laptop:4848";
+const auth = undefined;
+
+function Main() {
+  return (
+    <ZeroProvider {...{ userID, auth, server, schema }}>
+      <Router />
+    </ZeroProvider>
+  );
+}
+
+function Router() {
+  const [route, setRoute] = useState<Route>("/");
+
+  return (
+    <App
+      auth={null}
+      route={route}
+      setRoute={setRoute}
+    />
+  );
+}
+
+const renderer = await createCliRenderer();
+createRoot(renderer).render(<Main />);

apps/tui/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "react-native": ["../react-native-opentui"]
+    },
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

flake.nix

@@ -19,6 +19,7 @@
         packages = with pkgs; [
           corepack
           nodejs_22
+          bun
 
           postgresql
           process-compose

package.json

@@ -1,71 +1,18 @@
 {
   "name": "money",
-  "main": "expo-router/entry",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "build": "expo export --platform web",
-    "lint": "expo lint",
-    "db:migrate": "dotenv -- pnpm run --dir=shared db:migrate",
-    "db:gen": "dotenv -- pnpm run --dir=shared generate:zero",
-    "dev": "process-compose up -p 0"
-  },
-  "dependencies": {
-    "@better-auth/expo": "^1.3.27",
-    "@expo/vector-icons": "^15.0.2",
-    "@money/shared": "link:shared",
-    "@react-navigation/bottom-tabs": "^7.4.0",
-    "@react-navigation/elements": "^2.6.3",
-    "@react-navigation/native": "^7.1.8",
-    "@rocicorp/zero": "^0.23.2025090100",
-    "better-auth": "^1.3.27",
-    "drizzle-orm": "^0.44.6",
-    "expo": "~54.0.13",
-    "expo-constants": "~18.0.9",
-    "expo-crypto": "~15.0.7",
-    "expo-font": "~14.0.9",
-    "expo-haptics": "~15.0.7",
-    "expo-image": "~3.0.9",
-    "expo-linking": "~8.0.8",
-    "expo-router": "~6.0.11",
-    "expo-splash-screen": "~31.0.10",
-    "expo-sqlite": "~16.0.8",
-    "expo-status-bar": "~3.0.8",
-    "expo-symbols": "~1.0.7",
-    "expo-system-ui": "~6.0.7",
-    "expo-web-browser": "~15.0.8",
-    "pg": "^8.16.3",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
-    "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.5.1"
-  },
-  "devDependencies": {
-    "@types/pg": "^8.15.5",
-    "@types/react": "~19.1.0",
-    "dotenv-cli": "^10.0.0",
-    "drizzle-kit": "^0.31.5",
-    "eslint": "^9.25.0",
-    "eslint-config-expo": "~10.0.0",
-    "typescript": "~5.9.2"
-  },
   "private": true,
+  "scripts": {
+    "dev": "process-compose up -p 0",
+    "tui": "bun run --hot apps/tui/src/index.tsx"
+  },
   "pnpm": {
     "onlyBuiltDependencies": [
       "@rocicorp/zero-sqlite3"
     ],
     "ignoredBuiltDependencies": [
       "esbuild",
-      "protobufjs"
+      "protobufjs",
+      "unrs-resolver"
     ]
   }
 }

packages/react-native-opentui/index.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import type { ViewProps, TextProps, PressableProps } from "react-native";
+
+export function View({ children, style }: ViewProps) {
+  const bg = style &&
+    'backgroundColor' in style
+    ? typeof style.backgroundColor == 'string'
+    ? style.backgroundColor
+    : undefined
+    : undefined;
+  const flexDirection = style &&
+    'flexDirection' in style
+    ? typeof style.flexDirection == 'string'
+    ? style.flexDirection
+    : undefined
+    : undefined;
+  const flex = style &&
+    'flex' in style
+    ? typeof style.flex == 'number'
+    ? style.flex
+    : undefined
+    : undefined;
+
+  return <box backgroundColor={bg} flexDirection={flexDirection} flexGrow={flex}>{children}</box>
+}
+
+export function Pressable({ children: childrenRaw, style, onPress }: PressableProps) {
+  const bg = style &&
+    'backgroundColor' in style
+    ? typeof style.backgroundColor == 'string'
+    ? style.backgroundColor
+    : undefined
+    : undefined;
+  const flexDirection = style &&
+    'flexDirection' in style
+    ? typeof style.flexDirection == 'string'
+    ? style.flexDirection
+    : undefined
+    : undefined;
+  const flex = style &&
+    'flex' in style
+    ? typeof style.flex == 'number'
+    ? style.flex
+    : undefined
+    : undefined;
+
+  const children = childrenRaw instanceof Function ? childrenRaw({ pressed: true }) : childrenRaw;
+
+  return <box
+    backgroundColor={bg}
+    flexDirection={flexDirection}
+    flexGrow={flex}
+    onMouseDown={onPress ? ((_event) => {
+      // @ts-ignore
+      onPress();
+    }) : undefined}
+  >{children}</box>
+}
+
+
+export function Text({ style, children }: TextProps) {
+  const fg = style &&
+    'color' in style
+    ? typeof style.color == 'string'
+    ? style.color
+    : undefined
+    : undefined;
+  return <text fg={fg || "black"}>{children}</text>
+
+}
+
+export const Platform = {
+  OS: "tui",
+};
+
+export default {
+  View,
+  Text,
+}

packages/react-native-opentui/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "react-native-opentui",
+  "version": "1.0.0",
+  "main": "index.tsx",
+  "exports": {
+    ".": "./index.tsx"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

packages/react-native-opentui/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react",
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

packages/shared/src/db/schema/private.ts

@@ -93,9 +93,3 @@ export const auditLogs = pgTable("audit_log", {
   action: text("action").notNull(),
 });
 
-export const plaidAccessTokens = pgTable("plaidAccessToken", {
-  id: text("id").primaryKey(),
-  userId: text("user_id").notNull(),
-  token: text("token").notNull(),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-});

packages/shared/src/db/schema/public.ts

@@ -1,4 +1,3 @@
-import { definePermissions } from "@rocicorp/zero";
 import { pgTable, text, boolean, timestamp, uniqueIndex, decimal } from "drizzle-orm/pg-core";
 
 export const users = pgTable(
@@ -46,4 +45,13 @@ export const balance = pgTable("balance", {
   name: text("name").notNull(),
   createdAt: timestamp("created_at").notNull().defaultNow(),
   updatedAt: timestamp("updated_at").notNull().defaultNow(),
-})
+});
+
+export const plaidAccessTokens = pgTable("plaidAccessToken", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  logoUrl: text("logoUrl").notNull(),
+  userId: text("user_id").notNull(),
+  token: text("token").notNull(),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+});

packages/shared/src/queries.ts

@@ -30,5 +30,11 @@ export const queries = {
     return builder.balance
       .where('user_id', '=', authData.user.id)
       .orderBy('name', 'asc');
+  }),
+  getItems: syncedQueryWithContext('getItems', z.tuple([]), (authData: AuthData | null) => {
+    isLoggedIn(authData);
+    return builder.plaidAccessTokens
+      .where('userId', '=', authData.user.id)
+      .orderBy('createdAt', 'desc');
   })
 };

packages/shared/src/zero-schema.gen.ts

@@ -103,6 +103,69 @@ export const schema = {
       },
       primaryKey: ["id"],
     },
+    plaidAccessTokens: {
+      name: "plaidAccessTokens",
+      columns: {
+        id: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "id"
+          >,
+        },
+        name: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "name"
+          >,
+        },
+        logoUrl: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "logoUrl"
+          >,
+        },
+        userId: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "userId"
+          >,
+          serverName: "user_id",
+        },
+        token: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "token"
+          >,
+        },
+        createdAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "createdAt"
+          >,
+          serverName: "created_at",
+        },
+      },
+      primaryKey: ["id"],
+      serverName: "plaidAccessToken",
+    },
     plaidLink: {
       name: "plaidLink",
       columns: {
@@ -351,6 +414,11 @@ export type Schema = typeof schema;
  * This type is auto-generated from your Drizzle schema definition.
  */
 export type Balance = Row<Schema["tables"]["balance"]>;
+/**
+ * Represents a row from the "plaidAccessTokens" table.
+ * This type is auto-generated from your Drizzle schema definition.
+ */
+export type PlaidAccessToken = Row<Schema["tables"]["plaidAccessTokens"]>;
 /**
  * Represents a row from the "plaidLink" table.
  * This type is auto-generated from your Drizzle schema definition.

packages/ui/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@money/ui",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "exports": {
+    ".": "./src/index.tsx"
+  },
+  "dependencies": {
+    "@money/shared": "workspace:*",
+    "react-native-opentui": "workspace:*"
+  },
+  "packageManager": "pnpm@10.18.2"
+}

packages/ui/src/index.tsx

@@ -0,0 +1,95 @@
+import { createContext, use, useState } from "react";
+import { Transactions } from "./transactions";
+import { View, Text } from "react-native";
+import { Settings } from "./settings";
+import { useKeyboard } from "./useKeyboard";
+
+
+const PAGES = {
+  '/': {
+    screen: <Transactions />,
+    key: "1",
+  },
+  '/settings': {
+    screen: <Settings />,
+    key: "2",
+    children: {
+      "/accounts": {},
+      "/family": {},
+    }
+  },
+};
+
+type Join<A extends string, B extends string> =
+  `${A}${B}` extends `${infer X}` ? X : never;
+
+type ChildRoutes<Parent extends string, Children> =
+  {
+    [K in keyof Children & string]:
+      K extends `/${string}`
+        ? Join<Parent, K>
+        : never;
+  }[keyof Children & string];
+
+type Routes<T> = {
+  [K in keyof T & string]:
+    | K
+    | (T[K] extends { children: infer C }
+        ? ChildRoutes<K, C>
+        : never)
+}[keyof T & string];
+
+export type Route = Routes<typeof PAGES>;
+
+type Auth = any;
+
+interface RouterContextType {
+  auth: Auth;
+  route: Route;
+  setRoute: (route: Route) => void;
+}
+
+
+export const RouterContext = createContext<RouterContextType>({
+  auth: null,
+  route: '/',
+  setRoute: () => {}
+});
+
+
+type AppProps = {
+  auth: Auth;
+  route: Route;
+  setRoute: (page: Route) => void;
+}
+
+export function App({ auth, route, setRoute }: AppProps) {
+  return <RouterContext.Provider value={{ auth, route, setRoute }}>
+    <Main />
+  </RouterContext.Provider>
+}
+
+function Main() {
+  const { route, setRoute } = use(RouterContext);
+
+  useKeyboard((key) => {
+    const screen = Object.entries(PAGES)
+      .find(([, screen]) => screen.key == key.name);
+
+    if (!screen) return;
+
+    const [route] = screen as [Route, never];
+
+    setRoute(route);
+  });
+
+  const match =
+    route in PAGES
+      ? (route as keyof typeof PAGES)
+      : (Object.keys(PAGES).sort((a, b) => b.length - a.length).find(p => route.startsWith(p)) as
+          keyof typeof PAGES);
+
+  return PAGES[match].screen;
+}
+
+

packages/ui/src/list.tsx

@@ -0,0 +1,30 @@
+import { useState, type ReactNode } from "react";
+import { View, Text } from "react-native";
+import { useKeyboard } from "./useKeyboard";
+
+export type ListProps<T> = {
+  items: T[],
+  renderItem: (props: { item: T, isSelected: boolean }) => ReactNode;
+};
+export function List<T>({ items, renderItem }: ListProps<T>) {
+  const [idx, setIdx] = useState(0);
+
+  useKeyboard((key) => {
+    if (key.name == 'j') {
+      setIdx((prevIdx) => prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1);
+    } else if (key.name == 'k') {
+      setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
+    } else if (key.name == 'g' && key.shift) {
+      setIdx(items.length - 1);
+    }
+  }, [items]);
+
+  return (
+    <View>
+      {items.map((item, index) => <View style={{ backgroundColor: index == idx ? 'black' : undefined }}>
+        {renderItem({ item, isSelected: index == idx })}
+      </View>)}
+    </View>
+  );
+}
+

packages/ui/src/settings.tsx

@@ -0,0 +1,68 @@
+import { Text, View, Pressable } from "react-native";
+import { use, useState, type ReactNode } from "react";
+import { RouterContext, type Route } from ".";
+import { General } from "./settings/general";
+import { Accounts } from "./settings/accounts";
+import { Family } from "./settings/family";
+import { useKeyboard } from "./useKeyboard";
+
+type SettingsRoute = Extract<Route, `/settings${string}`>;
+
+const TABS = {
+  "/settings": {
+    label: "General",
+    screen: <General />
+  },
+  "/settings/accounts": {
+    label: "Bank Accounts",
+    screen: <Accounts />
+  },
+  "/settings/family": {
+    label: "Family",
+    screen: <Family />
+  },
+} as const satisfies Record<SettingsRoute, { label: string, screen: ReactNode }>;
+
+type Tab = keyof typeof TABS;
+
+export function Settings() {
+  const { route, setRoute } = use(RouterContext);
+
+  useKeyboard((key) => {
+    if (key.name == 'h') {
+      const currentIdx = Object.entries(TABS).findIndex(([tabRoute, _]) => tabRoute == route)
+      const routes = Object.keys(TABS) as SettingsRoute[];
+      const last = routes[currentIdx - 1]
+      if (!last) return;
+      setRoute(last);
+    } else if (key.name == 'l') {
+      const currentIdx = Object.entries(TABS).findIndex(([tabRoute, _]) => tabRoute == route)
+      const routes = Object.keys(TABS) as SettingsRoute[];
+      const next = routes[currentIdx + 1]
+      if (!next) return;
+      setRoute(next);
+    }
+  }, [route]);
+
+  return (
+    <View style={{ flexDirection: "row" }}>
+
+      <View>
+        {Object.entries(TABS).map(([tabRoute, tab]) => {
+          const isSelected = tabRoute == route;
+
+          return (
+            <Pressable key={tab.label} style={{ backgroundColor: isSelected ? 'black' : undefined }} onPress={() => setRoute(tabRoute as SettingsRoute)}>
+              <Text style={{ fontFamily: 'mono', color: isSelected ? 'white' : 'black' }}>{tab.label}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      <View>
+        {TABS[route as Tab].screen}
+      </View>
+    </View>
+  );
+}
+

packages/ui/src/settings/accounts.tsx

@@ -0,0 +1,23 @@
+import { useQuery } from "@rocicorp/zero/react";
+import { queries } from '@money/shared';
+import * as Table from "../table";
+import { use } from "react";
+import { RouterContext } from "..";
+
+const COLUMNS: Table.Column[] = [
+  { name: 'name', label: 'Name' },
+  { name: 'createdAt', label: 'Added At', render: (n) => new Date(n).toLocaleString() },
+];
+
+export function Accounts() {
+  const { auth } = use(RouterContext);
+  const [items] = useQuery(queries.getItems(auth));
+
+  return (
+    <Table.Provider columns={COLUMNS} data={items}>
+      <Table.Body />
+    </Table.Provider>
+  );
+}
+
+

packages/ui/src/settings/family.tsx

@@ -0,0 +1,6 @@
+import { Text } from "react-native";
+
+export function Family() {
+  return <Text style={{ fontFamily: 'mono' }}>Welcome to family</Text>
+}
+

packages/ui/src/settings/general.tsx

@@ -0,0 +1,7 @@
+import { Text } from "react-native";
+
+export function General() {
+  return <Text style={{ fontFamily: 'mono' }}>Welcome to settings</Text>
+}
+
+

packages/ui/src/table.tsx

@@ -0,0 +1,134 @@
+import { createContext, use, useState, type ReactNode } from "react";
+import { View, Text } from "react-native";
+import { useKeyboard } from "./useKeyboard";
+
+const HEADER_COLOR = '#7158e2';
+const TABLE_COLORS = [
+  '#ddd',
+  '#eee'
+];
+const SELECTED_COLOR = '#f7b730';
+
+
+const EXTRA = 5;
+
+export type ValidRecord = Record<string, string | number | null>;
+
+interface TableState {
+  data: unknown[];
+  columns: Column[];
+  columnMap: Map<string, number>;
+  idx: number;
+  selectedFrom: number | undefined;
+};
+
+
+const INITAL_STATE = {
+  data: [],
+  columns: [],
+  columnMap: new Map(),
+  idx: 0,
+  selectedFrom: undefined,
+} satisfies TableState;
+
+export const Context = createContext<TableState>(INITAL_STATE); 
+
+export type Column = { name: string, label: string, render?: (i: number | string) => string };
+
+
+function renderCell(row: ValidRecord, column: Column): string {
+  const cell = row[column.name];
+  if (cell == undefined) return 'n/a';
+  if (cell == null) return 'null';
+  if (column.render) return column.render(cell);
+  return cell.toString();
+}
+
+
+export interface ProviderProps<T> {
+  data: T[];
+  columns: Column[];
+  children: ReactNode;
+};
+export function Provider<T extends ValidRecord>({ data, columns, children }: ProviderProps<T>) {
+  const [idx, setIdx] = useState(0);
+  const [selectedFrom, setSelectedFrom] = useState<number>();
+
+  useKeyboard((key) => {
+    if (key.name == 'j' || key.name == 'down') {
+      if (key.shift && selectedFrom == undefined) {
+        setSelectedFrom(idx);
+      }
+      setIdx((prev) => Math.min(prev + 1, data.length - 1));
+    } else if (key.name == 'k' || key.name == 'up') {
+      if (key.shift && selectedFrom == undefined) {
+        setSelectedFrom(idx);
+      }
+      setIdx((prev) => Math.max(prev - 1, 0));
+    } else if (key.name == 'g' && key.shift) {
+      setIdx(data.length - 1);
+    } else if (key.name == 'v') {
+      setSelectedFrom(idx);
+    } else if (key.name == 'escape') {
+      setSelectedFrom(undefined);
+    }
+  }, [data, idx]);
+
+
+  const columnMap = new Map(columns.map(col => {
+    return [col.name, Math.max(col.label.length, ...data.map(row => renderCell(row, col).length))]
+  }));
+
+
+  return (
+    <Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
+      {children}
+    </Context.Provider>
+  );
+}
+
+export function Body() {
+  const { columns, data, columnMap, idx, selectedFrom } = use(Context);
+  return (
+    <View>
+      <View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
+        {columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
+      </View>
+      {data.map((row, index) => {
+        const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
+
+        return (
+          <View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
+            <TableRow key={index} row={row as ValidRecord} index={index} isSelected={isSelected} />
+          </View>
+        );
+      })}
+    </View>
+  )
+
+}
+
+interface RowProps<T> {
+  row: T;
+  index: number;
+  isSelected: boolean;
+}
+function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
+  const { data, columns, columnMap } = use(Context);
+
+
+  return <View style={{ flexDirection: 'row' }}>
+    {columns.map(column => {
+      const rendered = renderCell(row, column);
+      return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'black' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
+    })}
+  </View>
+}
+
+function rpad(input: string, length: number): string {
+  return input + Array.from({ length })
+    .map(_ => " ")
+    .join("");
+}
+
+

packages/ui/src/transactions.tsx

@@ -0,0 +1,65 @@
+import * as Table from "./table";
+import { useQuery } from "@rocicorp/zero/react";
+import { queries, type Transaction } from '@money/shared';
+import { use } from "react";
+import { View, Text } from "react-native";
+import { RouterContext } from ".";
+
+
+const FORMAT = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+export type Account = {
+  name: string;
+  createdAt: number;
+}
+
+const COLUMNS: Table.Column[] = [
+  { name: 'createdAt', label: 'Date', render: (n) => new Date(n).toDateString() },
+  { name: 'amount', label: 'Amount' },
+  { name: 'name', label: 'Name' },
+];
+
+
+export function Transactions() {
+  const { auth } = use(RouterContext);
+  const [items] = useQuery(queries.allTransactions(auth));
+
+  return (
+    <Table.Provider
+      data={items}
+      columns={COLUMNS} >
+        <Table.Body />
+        {/* Spacer */}
+        <View style={{ flex: 1 }} />
+      <Selected />
+    </Table.Provider>
+  )
+}
+
+function Selected() {
+  const { data, idx, selectedFrom } = use(Table.Context);
+
+  if (selectedFrom == undefined)
+  return (
+    <View style={{ backgroundColor: '#ddd' }}>
+      <Text style={{ fontFamily: 'mono' }}>No items selected</Text>
+    </View>
+  );
+
+  const from = Math.min(idx, selectedFrom);
+  const to = Math.max(idx, selectedFrom);
+  const selected = data.slice(from, to + 1) as Transaction[];
+  const count = selected.length;
+  const sum = selected.reduce((prev, curr) => prev + curr.amount, 0);
+
+  return (
+    <View style={{ backgroundColor: '#9f9' }}>
+      <Text style={{ fontFamily: 'mono' }}>{count} transaction{count == 1 ? "" : "s"} selected | ${FORMAT.format(sum)}</Text>
+    </View>
+  );
+}
+
+

packages/ui/src/useKeyboard.ts

@@ -0,0 +1,5 @@
+import { useKeyboard as useOpentuiKeyboard } from "@opentui/react";
+
+export function useKeyboard(handler: Parameters<typeof useOpentuiKeyboard>[0], _deps: any[] = []) {
+  return useOpentuiKeyboard(handler);
+}

packages/ui/src/useKeyboard.web.ts

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import type { KeyboardEvent } from "react";
+import type { KeyEvent } from "@opentui/core";
+
+
+function convertName(keyName: string): string {
+  const result = keyName.toLowerCase()
+  if (result == 'arrowdown') return 'down';
+  if (result == 'arrowup') return 'up';
+  return result;
+}
+
+export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = []) {
+  useEffect(() => {
+    const handlerWeb = (event: KeyboardEvent) => {
+      // @ts-ignore
+      handler({
+        name: convertName(event.key),
+        ctrl: event.ctrlKey,
+        meta: event.metaKey,
+        shift: event.shiftKey,
+        option: event.metaKey,
+        sequence: '',
+        number: false,
+        raw: '',
+        eventType: 'press',
+        source: "raw",
+        code: event.code,
+        super: false,
+        hyper: false,
+        capsLock: false,
+        numLock: false,
+        baseCode: event.keyCode,
+      });
+    };
+
+    // @ts-ignore
+    window.addEventListener("keydown", handlerWeb);
+    return () => {
+    // @ts-ignore
+window.removeEventListener("keydown", handlerWeb);
+    };
+  }, deps);
+}

packages/ui/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

pnpm-workspace.yaml

@@ -1,4 +1,4 @@
 nodeLinker: hoisted
 packages:
-  - 'api'
+  - 'apps/*'
-  - 'shared'
+  - 'packages/*'

process-compose.yaml

@@ -29,14 +29,13 @@ processes:
     command: "pnpm tsx ./scripts/set-machine-name.ts"
 
   expo:
-    command: "pnpm start"
+    command: "pnpm --filter=@money/expo start"
     depends_on:
       tailscale_machine_name:
         condition: process_completed_successfully
 
   api:
-    command: "pnpm run dev"
+    command: "pnpm --filter=@money/api dev"
-    working_dir: ./api
 
   migrate:
     command: |
@@ -49,14 +48,14 @@ processes:
       db:
         condition: process_healthy
   zero:
-    command: npx zero-cache-dev -p shared/src/schema.ts
+    command: npx zero-cache-dev -p packages/shared/src/schema.ts
     depends_on:
       migrate:
         condition: process_completed_successfully
 
   studio:
     command: npx drizzle-kit studio
-    working_dir: ./shared
+    working_dir: ./packages/shared
     depends_on:
       db:
         condition: process_healthy