refactor: move to bun

.env.example

@@ -12,3 +12,9 @@ ZERO_GET_QUERIES_FORWARD_COOKIES="true"
 
 ZERO_MUTATE_URL="http://localhost:3000/api/zero/mutate"
 ZERO_MUTATE_FORWARD_COOKIES="true"
+
+PLAID_CLIENT_ID=
+PLAID_SECRET=
+PLAID_ENV=sandbox
+
+EXPO_PUBLIC_TAILSCALE_MACHINE=laptop

.gitignore

@@ -31,7 +31,8 @@ yarn-error.*
 *.pem
 
 # local env files
-.env
+.env*
+!.env.example
 
 # typescript
 *.tsbuildinfo
@@ -45,4 +46,3 @@ app-example
 .direnv/
 .db/
 .logs
-.env

README.md

@@ -1,50 +1,20 @@
-# Welcome to your Expo app 👋
+# Money
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+Personal finance application by [Max Koon](https://max.koon.us). Writen with Typescript, Expo/React Native, Zero Sync Engine, Better Auth, and Drizzle.
 
-## Get started
+## Development
 
-1. Install dependencies
-
-   ```bash
-   npm install
-   ```
-
-2. Start the app
-
-   ```bash
-   npx expo start
-   ```
-
-In the output, you'll find options to open the app in a
-
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
-
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
-
-## Get a fresh project
-
-When you're ready, run:
-
-```bash
-npm run reset-project
+```sh
+git clone https://git.koon.us/max/money.git
+direnv allow
+cp .env.example .env.dev
+ln -s .env.dev .env
+vim .env.dev # Update with Plaid credentials
+pnpm install
+pnpm dev
 ```
 
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+## Deployment
 
-## Learn more
+An example deployment of this application can be found [here](https://git.koon.us/max/os/src/branch/main/host/ark/service/money.nix).
 
-To learn more about developing your project with Expo, look at the following resources:
-
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
-
-## Join the community
-
-Join our community of developers creating universal apps.
-
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

api/src/zero.ts

@@ -1,216 +0,0 @@
-import {
-  type ReadonlyJSONValue,
-  type Transaction,
-  withValidation,
-} from "@rocicorp/zero";
-import {
-  handleGetQueriesRequest,
-  PushProcessor,
-  ZQLDatabase,
-} from "@rocicorp/zero/server";
-import { PostgresJSConnection } from '@rocicorp/zero/pg';
-import postgres from 'postgres';
-import {
-  createMutators as createMutatorsShared,
-  isLoggedIn,
-  queries,
-  schema,
-  type Mutators,
-  type Schema,
-} from "@money/shared";
-import type { AuthData } from "@money/shared/auth";
-import { getHono } from "./hono";
-import { Configuration, CountryCode, PlaidApi, PlaidEnvironments, Products } from "plaid";
-import { randomUUID } from "crypto";
-import { db } from "./db";
-import { balance, plaidAccessTokens, plaidLink, transaction } from "@money/shared/db";
-import { asc, desc, eq, inArray, sql, type InferInsertModel } from "drizzle-orm";
-
-
-const configuration = new Configuration({
-  basePath: PlaidEnvironments.production,
-  baseOptions: {
-    headers: {
-      'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
-      'PLAID-SECRET': process.env.PLAID_SECRET,
-    }
-  }
-});
-const plaidClient = new PlaidApi(configuration);
-
-
-const processor = new PushProcessor(
-  new ZQLDatabase(
-    new PostgresJSConnection(postgres(process.env.ZERO_UPSTREAM_DB! as string)),
-    schema,
-  ),
-);
-
-type Tx = Transaction<Schema>;
-
-const createMutators = (authData: AuthData | null) => {
-  const mutators = createMutatorsShared(authData);
-  return {
-    ...mutators,
-    link: {
-      ...mutators.link,
-      async create() {
-        isLoggedIn(authData);
-        console.log("Creating Link token");
-        const r = await plaidClient.linkTokenCreate({
-          user: {
-            client_user_id: authData.user.id,
-          },
-          client_name: "Koon Money",
-          language: "en",
-          products: [Products.Transactions],
-          country_codes: [CountryCode.Us],
-          hosted_link: {}
-        });
-        console.log("Result", r);
-        const { link_token, hosted_link_url } = r.data;
-
-        if (!hosted_link_url) throw Error("No link in response");
-
-        await db.insert(plaidLink).values({
-          id: randomUUID() as string,
-          user_id: authData.user.id,
-          link: hosted_link_url,
-          token: link_token,
-        });
-      },
-
-      async get(_, { link_token }) {
-        isLoggedIn(authData);
-
-        const linkResp = await plaidClient.linkTokenGet({
-          link_token,
-        });
-        if (!linkResp) throw Error("No link respo");
-        console.log(JSON.stringify(linkResp.data, null, 4));
-        const publicToken = linkResp.data.link_sessions?.at(0)?.results?.item_add_results.at(0)?.public_token;
-
-        if (!publicToken) throw Error("No public token");
-        const { data } = await plaidClient.itemPublicTokenExchange({
-          public_token: publicToken,
-        })
-
-        await db.insert(plaidAccessTokens).values({
-          id: randomUUID(),
-          userId: authData.user.id,
-          token: data.access_token,
-        });
-      },
-
-      async updateTransactions() {
-        isLoggedIn(authData);
-        const accounts = await db.query.plaidAccessTokens.findMany({
-          where: eq(plaidAccessTokens.userId, authData.user.id),
-        });
-        if (accounts.length == 0) {
-          console.error("No accounts");
-          return;
-        }
-
-        for (const account of accounts) {
-          const { data } = await plaidClient.transactionsGet({
-            access_token: account.token,
-            start_date: "2025-10-01",
-            end_date: "2025-10-15",
-          });
-
-          const transactions = data.transactions.map(tx => ({
-            id: randomUUID(),
-            user_id: authData.user.id,
-            plaid_id: tx.transaction_id,
-            account_id: tx.account_id,
-            name: tx.name,
-            amount: tx.amount as any,
-            datetime: tx.datetime ? new Date(tx.datetime) : new Date(tx.date),
-            authorized_datetime: tx.authorized_datetime ? new Date(tx.authorized_datetime) : undefined,
-            json: JSON.stringify(tx),
-          } satisfies InferInsertModel<typeof transaction>));
-
-          await db.insert(transaction).values(transactions).onConflictDoNothing({
-            target: transaction.plaid_id,
-          });
-
-          const txReplacingPendingIds = data.transactions
-            .filter(t => t.pending_transaction_id)
-            .map(t => t.pending_transaction_id!);
-
-          await db.delete(transaction)
-            .where(inArray(transaction.plaid_id, txReplacingPendingIds));
-
-        }
-      },
-
-      async updateBalences() {
-        isLoggedIn(authData);
-        const accounts = await db.query.plaidAccessTokens.findMany({
-          where: eq(plaidAccessTokens.userId, authData.user.id),
-        });
-        if (accounts.length == 0) {
-          console.error("No accounts");
-          return;
-        }
-
-        for (const account of accounts) {
-          const { data } = await plaidClient.accountsBalanceGet({
-            access_token: account.token
-          });
-          await db.insert(balance).values(data.accounts.map(bal => ({
-            id: randomUUID(),
-            user_id: authData.user.id,
-            plaid_id: bal.account_id,
-            avaliable: bal.balances.available as any,
-            current: bal.balances.current as any,
-            name: bal.name,
-          }))).onConflictDoUpdate({
-            target: balance.plaid_id,
-            set: { current: sql.raw(`excluded.${balance.current.name}`), avaliable: sql.raw(`excluded.${balance.avaliable.name}`) }
-          })
-        }
-
-      },
-    }
-  } as const satisfies Mutators;
-}
-
-const zero = getHono()
-  .post("/mutate", async (c) => {
-    const authData = c.get("auth");
-
-    const result = await processor.process(createMutators(authData), c.req.raw);
-
-    return c.json(result);
-  })
-  .post("/get-queries", async (c) => {
-    const authData = c.get("auth");
-
-    const result = await handleGetQueriesRequest(
-      (name, args) => ({ query: getQuery(authData, name, args) }),
-      schema,
-      c.req.raw,
-    );
-
-    return c.json(result);
-  });
-
-const validatedQueries = Object.fromEntries(
-  Object.values(queries).map((q) => [q.queryName, withValidation(q)]),
-);
-
-function getQuery(
-  authData: AuthData | null,
-  name: string,
-  args: readonly ReadonlyJSONValue[],
-) {
-  if (name in validatedQueries) {
-    const q = validatedQueries[name];
-    return q(authData, ...args);
-  }
-  throw new Error(`Unknown query: ${name}`);
-}
-
-export { zero };

app/index.tsx

@@ -1,83 +0,0 @@
-import { authClient } from '@/lib/auth-client';
-import { 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';
-
-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(() => {
-    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;
-  }
-
-  return (
-    <View>
-      <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> {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,10 +8,11 @@
   },
   "dependencies": {
     "@hono/node-server": "^1.19.5",
-    "@money/shared": "link:../shared",
+    "@money/shared": "*",
     "better-auth": "^1.3.27",
     "hono": "^4.9.12",
-    "plaid": "^39.0.0"
+    "plaid": "^39.0.0",
+    "tsx": "^4.20.6"
   },
   "devDependencies": {
     "@types/node": "^24.7.2"

apps/api/src/auth.ts

@@ -1,9 +1,10 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
-import { genericOAuth } from "better-auth/plugins";
+import { bearer, deviceAuthorization, genericOAuth } from "better-auth/plugins";
 import { expo } from "@better-auth/expo";
 import { drizzleSchema } from "@money/shared/db";
 import { db } from "./db";
+import { BASE_URL, HOST } from "@money/shared";
 
 export const auth = betterAuth({
   database: drizzleAdapter(db, {
@@ -11,19 +12,33 @@ export const auth = betterAuth({
     provider: "pg",
     usePlural: true,
   }),
-  trustedOrigins: ["money://", "http://localhost:8081"],
+  trustedOrigins: [
+    "http://localhost:8081",
+    `exp://${HOST}:8081`,
+    `${BASE_URL}:8081`,
+    "https://money.koon.us",
+    "money://",
+  ],
+  advanced: {
+    crossSubDomainCookies: {
+      enabled: process.env.NODE_ENV == "production",
+      domain: "koon.us",
+    },
+  },
   plugins: [
     expo(),
     genericOAuth({
       config: [
         {
-          providerId: 'koon-family',
+          providerId: "koon-family",
           clientId: process.env.OAUTH_CLIENT_ID!,
           clientSecret: process.env.OAUTH_CLIENT_SECRET!,
           discoveryUrl: process.env.OAUTH_DISCOVERY_URL!,
           scopes: ["profile", "email"],
-        }
-      ]
-    })
-  ]
+        },
+      ],
+    }),
+    deviceAuthorization(),
+    bearer(),
+  ],
 });

apps/api/src/index.ts

@@ -1,16 +1,18 @@
 import { serve } from "@hono/node-server";
 import { authDataSchema } from "@money/shared/auth";
+import { BASE_URL } from "@money/shared";
 import { cors } from "hono/cors";
 import { auth } from "./auth";
 import { getHono } from "./hono";
 import { zero } from "./zero";
+import { webhook } from "./webhook";
 
 const app = getHono();
 
 app.use(
   "/api/*",
   cors({
-    origin: (origin) => origin ?? "",
+    origin: ["https://money.koon.us", `${BASE_URL}:8081`],
     allowMethods: ["POST", "GET", "OPTIONS"],
     allowHeaders: ["Content-Type", "Authorization"],
     credentials: true,
@@ -42,12 +44,13 @@ app.use("*", async (c, next) => {
 app.route("/api/zero", zero);
 
 app.get("/api", (c) => c.text("OK"));
+app.get("/api/webhook_receiver", webhook);
 app.get("/", (c) => c.text("OK"));
 
 serve(
   {
     fetch: app.fetch,
-    port: 3000,
+    port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
   },
   (info) => {
     console.log(`Server is running on ${info.address}:${info.port}`);

apps/api/src/plaid.ts

@@ -0,0 +1,15 @@
+import { Configuration, PlaidApi, PlaidEnvironments } from "plaid";
+
+const configuration = new Configuration({
+  basePath:
+    process.env.PLAID_ENV == "production"
+      ? PlaidEnvironments.production
+      : PlaidEnvironments.sandbox,
+  baseOptions: {
+    headers: {
+      "PLAID-CLIENT-ID": process.env.PLAID_CLIENT_ID,
+      "PLAID-SECRET": process.env.PLAID_SECRET,
+    },
+  },
+});
+export const plaidClient = new PlaidApi(configuration);

apps/api/src/plaid/sync.ts

@@ -0,0 +1,3 @@
+async function sync() {}
+
+sync();

apps/api/src/plaid/tx.ts

@@ -0,0 +1,23 @@
+import type { transaction } from "@money/shared/db";
+import type { Transaction } from "plaid";
+import { type InferInsertModel } from "drizzle-orm";
+import { randomUUID } from "crypto";
+
+export function transactionFromPlaid(
+  userId: string,
+  tx: Transaction,
+): InferInsertModel<typeof transaction> {
+  return {
+    id: randomUUID(),
+    user_id: userId,
+    plaid_id: tx.transaction_id,
+    account_id: tx.account_id,
+    name: tx.name,
+    amount: tx.amount as any,
+    datetime: tx.datetime ? new Date(tx.datetime) : new Date(tx.date),
+    authorized_datetime: tx.authorized_datetime
+      ? new Date(tx.authorized_datetime)
+      : undefined,
+    json: JSON.stringify(tx),
+  };
+}

apps/api/src/webhook.ts

@@ -0,0 +1,11 @@
+import type { Context } from "hono";
+import { plaidClient } from "./plaid";
+// import { LinkSessionFinishedWebhook, WebhookType } from "plaid";
+
+export const webhook = async (c: Context) => {
+  console.log("Got webhook");
+  const b = await c.req.text();
+  console.log("body:", b);
+
+  return c.text("Hi");
+};

apps/api/src/zero.ts

@@ -0,0 +1,358 @@
+import {
+  type ReadonlyJSONValue,
+  type Transaction,
+  withValidation,
+} from "@rocicorp/zero";
+import {
+  handleGetQueriesRequest,
+  PushProcessor,
+  ZQLDatabase,
+} from "@rocicorp/zero/server";
+import { PostgresJSConnection } from "@rocicorp/zero/pg";
+import postgres from "postgres";
+import {
+  createMutators as createMutatorsShared,
+  isLoggedIn,
+  queries,
+  schema,
+  type Mutators,
+  type Schema,
+} from "@money/shared";
+import type { AuthData } from "@money/shared/auth";
+import { getHono } from "./hono";
+import {
+  Configuration,
+  CountryCode,
+  PlaidApi,
+  PlaidEnvironments,
+  Products,
+  SandboxItemFireWebhookRequestWebhookCodeEnum,
+  WebhookType,
+} from "plaid";
+import { randomUUID } from "crypto";
+import { db } from "./db";
+import {
+  balance,
+  plaidAccessTokens,
+  plaidLink,
+  transaction,
+} from "@money/shared/db";
+import {
+  and,
+  eq,
+  inArray,
+  sql,
+  type InferInsertModel,
+  type InferSelectModel,
+} from "drizzle-orm";
+import { plaidClient } from "./plaid";
+import { transactionFromPlaid } from "./plaid/tx";
+
+const processor = new PushProcessor(
+  new ZQLDatabase(
+    new PostgresJSConnection(postgres(process.env.ZERO_UPSTREAM_DB! as string)),
+    schema,
+  ),
+);
+
+type Tx = Transaction<Schema>;
+
+const createMutators = (authData: AuthData | null) => {
+  const mutators = createMutatorsShared(authData);
+  return {
+    ...mutators,
+    link: {
+      ...mutators.link,
+      async create() {
+        isLoggedIn(authData);
+        const r = await plaidClient.linkTokenCreate({
+          user: {
+            client_user_id: authData.user.id,
+          },
+          client_name: "Koon Money",
+          language: "en",
+          products: [Products.Transactions],
+          country_codes: [CountryCode.Us],
+          webhook: "https://webhooks.koon.us/api/webhook_receiver",
+          hosted_link: {},
+        });
+        const { link_token, hosted_link_url } = r.data;
+
+        if (!hosted_link_url) throw Error("No link in response");
+
+        await db.insert(plaidLink).values({
+          id: randomUUID() as string,
+          user_id: authData.user.id,
+          link: hosted_link_url,
+          token: link_token,
+        });
+      },
+
+      async get(_, { link_token }) {
+        isLoggedIn(authData);
+
+        try {
+          const token = await db.query.plaidLink.findFirst({
+            where: and(
+              eq(plaidLink.token, link_token),
+              eq(plaidLink.user_id, authData.user.id),
+            ),
+          });
+          if (!token) throw Error("Link not found");
+          if (token.completeAt) return;
+
+          const linkResp = await plaidClient.linkTokenGet({
+            link_token,
+          });
+          if (!linkResp) throw Error("No link respo");
+
+          console.log(JSON.stringify(linkResp.data, null, 4));
+
+          const item_add_result = linkResp.data.link_sessions
+            ?.at(0)
+            ?.results?.item_add_results.at(0);
+
+          // We will assume its not done yet.
+          if (!item_add_result) return;
+
+          const { data } = await plaidClient.itemPublicTokenExchange({
+            public_token: item_add_result.public_token,
+          });
+
+          await db.insert(plaidAccessTokens).values({
+            id: randomUUID(),
+            userId: authData.user.id,
+            token: data.access_token,
+            logoUrl: "",
+            name: item_add_result.institution?.name || "Unknown",
+          });
+
+          await db
+            .update(plaidLink)
+            .set({
+              completeAt: new Date(),
+            })
+            .where(eq(plaidLink.token, link_token));
+        } catch (e) {
+          console.error(e);
+          throw Error("Plaid error");
+        }
+      },
+      async webhook() {
+        isLoggedIn(authData);
+
+        const accounts = await db.query.plaidAccessTokens.findMany({
+          where: eq(plaidAccessTokens.userId, authData.user.id),
+        });
+        if (accounts.length == 0) {
+          console.error("No accounts");
+          return;
+        }
+
+        const account = accounts.at(0)!;
+
+        const { data } = await plaidClient.sandboxItemFireWebhook({
+          access_token: account.token,
+          webhook_type: WebhookType.Transactions,
+          webhook_code:
+            SandboxItemFireWebhookRequestWebhookCodeEnum.DefaultUpdate,
+        });
+
+        console.log(data);
+      },
+      async sync() {
+        isLoggedIn(authData);
+
+        const accounts = await db.query.plaidAccessTokens.findMany({
+          where: eq(plaidAccessTokens.userId, authData.user.id),
+        });
+        if (accounts.length == 0) {
+          console.error("No accounts");
+          return;
+        }
+
+        const account = accounts.at(0)!;
+
+        const { data } = await plaidClient.transactionsSync({
+          access_token: account.token,
+          cursor: account.syncCursor || undefined,
+        });
+
+        const added = data.added.map((tx) =>
+          transactionFromPlaid(authData.user.id, tx),
+        );
+
+        const updated = data.modified.map((tx) =>
+          transactionFromPlaid(authData.user.id, tx),
+        );
+
+        console.log("added", added.length);
+        console.log("updated", updated.length);
+        console.log("removed", data.removed.length);
+        console.log("next cursor", data.next_cursor);
+
+        await db.transaction(async (tx) => {
+          if (added.length) {
+            await tx.insert(transaction).values(added);
+          }
+
+          if (updated.length) {
+            await tx
+              .insert(transaction)
+              .values(updated)
+              .onConflictDoUpdate({
+                target: transaction.plaid_id,
+                set: {
+                  name: sql.raw(`excluded.${transaction.name.name}`),
+                  amount: sql.raw(`excluded.${transaction.amount.name}`),
+                  json: sql.raw(`excluded.${transaction.json.name}`),
+                },
+              });
+          }
+
+          if (data.removed.length) {
+            await tx.delete(transaction).where(
+              inArray(
+                transaction.id,
+                data.removed.map((tx) => tx.transaction_id),
+              ),
+            );
+          }
+
+          await tx
+            .update(plaidAccessTokens)
+            .set({ syncCursor: data.next_cursor })
+            .where(eq(plaidAccessTokens.id, account.id));
+        });
+      },
+
+      // async updateTransactions() {
+      //   isLoggedIn(authData);
+      //   const accounts = await db.query.plaidAccessTokens.findMany({
+      //     where: eq(plaidAccessTokens.userId, authData.user.id),
+      //   });
+      //   if (accounts.length == 0) {
+      //     console.error("No accounts");
+      //     return;
+      //   }
+      //
+      //   for (const account of accounts) {
+      //     const { data } = await plaidClient.transactionsGet({
+      //       access_token: account.token,
+      //       start_date: "2025-10-01",
+      //       end_date: new Date().toISOString().split("T")[0],
+      //     });
+      //
+      //     const transactions = data.transactions.map(
+      //       (tx) =>
+      //         ({
+      //           id: randomUUID(),
+      //           user_id: authData.user.id,
+      //           plaid_id: tx.transaction_id,
+      //           account_id: tx.account_id,
+      //           name: tx.name,
+      //           amount: tx.amount as any,
+      //           datetime: tx.datetime
+      //             ? new Date(tx.datetime)
+      //             : new Date(tx.date),
+      //           authorized_datetime: tx.authorized_datetime
+      //             ? new Date(tx.authorized_datetime)
+      //             : undefined,
+      //           json: JSON.stringify(tx),
+      //         }) satisfies InferInsertModel<typeof transaction>,
+      //     );
+      //
+      //     await db
+      //       .insert(transaction)
+      //       .values(transactions)
+      //       .onConflictDoNothing({
+      //         target: transaction.plaid_id,
+      //       });
+      //
+      //     const txReplacingPendingIds = data.transactions
+      //       .filter((t) => t.pending_transaction_id)
+      //       .map((t) => t.pending_transaction_id!);
+      //
+      //     await db
+      //       .delete(transaction)
+      //       .where(inArray(transaction.plaid_id, txReplacingPendingIds));
+      //   }
+      // },
+      //
+      // async updateBalences() {
+      //   isLoggedIn(authData);
+      //   const accounts = await db.query.plaidAccessTokens.findMany({
+      //     where: eq(plaidAccessTokens.userId, authData.user.id),
+      //   });
+      //   if (accounts.length == 0) {
+      //     console.error("No accounts");
+      //     return;
+      //   }
+      //
+      //   for (const account of accounts) {
+      //     const { data } = await plaidClient.accountsBalanceGet({
+      //       access_token: account.token,
+      //     });
+      //     await db
+      //       .insert(balance)
+      //       .values(
+      //         data.accounts.map((bal) => ({
+      //           id: randomUUID(),
+      //           user_id: authData.user.id,
+      //           plaid_id: bal.account_id,
+      //           avaliable: bal.balances.available as any,
+      //           current: bal.balances.current as any,
+      //           name: bal.name,
+      //           tokenId: account.id,
+      //         })),
+      //       )
+      //       .onConflictDoUpdate({
+      //         target: balance.plaid_id,
+      //         set: {
+      //           current: sql.raw(`excluded.${balance.current.name}`),
+      //           avaliable: sql.raw(`excluded.${balance.avaliable.name}`),
+      //         },
+      //       });
+      //   }
+      // },
+    },
+  } as const satisfies Mutators;
+};
+
+const zero = getHono()
+  .post("/mutate", async (c) => {
+    const authData = c.get("auth");
+
+    const result = await processor.process(createMutators(authData), c.req.raw);
+
+    return c.json(result);
+  })
+  .post("/get-queries", async (c) => {
+    const authData = c.get("auth");
+
+    const result = await handleGetQueriesRequest(
+      (name, args) => ({ query: getQuery(authData, name, args) }),
+      schema,
+      c.req.raw,
+    );
+
+    return c.json(result);
+  });
+
+const validatedQueries = Object.fromEntries(
+  Object.values(queries).map((q) => [q.queryName, withValidation(q)]),
+);
+
+function getQuery(
+  authData: AuthData | null,
+  name: string,
+  args: readonly ReadonlyJSONValue[],
+) {
+  if (name in validatedQueries) {
+    const q = validatedQueries[name];
+    return q(authData, ...args);
+  }
+  throw new Error(`Unknown query: ${name}`);
+}
+
+export { zero };

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.json

@@ -38,7 +38,8 @@
           }
         }
       ],
-      "expo-sqlite"
+      "expo-sqlite",
+      "expo-secure-store"
     ],
     "experiments": {
       "typedRoutes": true,

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

@@ -0,0 +1,34 @@
+import { useLocalSearchParams } from "expo-router";
+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

@@ -1,17 +1,23 @@
-import { Stack } from 'expo-router';
-import 'react-native-reanimated';
+import { Stack } from "expo-router";
+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 { Platform } from 'react-native';
-import type { ZeroOptions } from '@rocicorp/zero';
-import { schema, type Schema, createMutators, type Mutators } from '@/shared/src';
+import { authClient } from "@/lib/auth-client";
+import { ZeroProvider } from "@rocicorp/zero/react";
+import { useMemo } from "react";
+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 "@money/shared";
 import { expoSQLiteStoreProvider } from "@rocicorp/zero/react-native";
 
 export const unstable_settings = {
-  anchor: 'index',
+  anchor: "index",
 };
 
 const kvStore = Platform.OS === "web" ? undefined : expoSQLiteStoreProvider();
@@ -25,14 +31,17 @@ export default function RootLayout() {
   }, [session]);
 
   const cookie = useMemo(() => {
-    return Platform.OS == 'web' ? undefined : authClient.getCookie();
+    return Platform.OS == "web" ? undefined : authClient.getCookie();
   }, [session, isPending]);
 
   const zeroProps = useMemo(() => {
     return {
-      storageKey: 'money',
+      storageKey: "money",
       kvStore,
-      server: process.env.NODE_ENV == 'production' ? 'https://zero.koon.us' : 'http://localhost:4848',
+      server:
+        process.env.NODE_ENV == "production"
+          ? "https://zero.koon.us"
+          : `${BASE_URL}:4848`,
       userID: authData?.user.id ?? "anon",
       schema,
       mutators: createMutators(authData),
@@ -44,8 +53,8 @@ export default function RootLayout() {
     <ZeroProvider {...zeroProps}>
       <Stack>
         <Stack.Protected guard={!isPending && !!session}>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
-          <Stack.Screen name="settings" options={{ headerShown: false }} />
+          <Stack.Screen name="[...route]" options={{ headerShown: false }} />
+          <Stack.Screen name="approve" />
         </Stack.Protected>
         <Stack.Protected guard={!isPending && !session}>
           <Stack.Screen name="auth" />

apps/expo/app/approve.tsx

@@ -0,0 +1,19 @@
+import { authClient } from "@/lib/auth-client";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect } from "react";
+import { Text } from "react-native";
+
+export default function Page() {
+  const { code } = useLocalSearchParams<{ code: string }>();
+  const { isPending, data } = authClient.useSession();
+  if (isPending) return <Text>Loading...</Text>;
+  if (!isPending && !data) return <Text>Please log in</Text>;
+
+  useEffect(() => {
+    authClient.device.approve({
+      userCode: code,
+    });
+  }, []);
+
+  return <Text>Approving: {code}</Text>;
+}

apps/expo/app/auth.tsx

@@ -1,11 +1,15 @@
 import { Button, View } from "react-native";
 import { authClient } from "@/lib/auth-client";
+import { BASE_URL } from "@money/shared";
 
 export default function Auth() {
   const onLogin = () => {
     authClient.signIn.oauth2({
       providerId: "koon-family",
-      callbackURL: "http://localhost:8081"
+      callbackURL:
+        process.env.NODE_ENV == "production"
+          ? "https://money.koon.us"
+          : `${BASE_URL}:8081`,
     });
   };
 
@@ -13,5 +17,5 @@ export default function Auth() {
     <View>
       <Button onPress={onLogin} title="Login with Koon Family" />
     </View>
-  )
+  );
 }

apps/expo/app/index.native.tsx

@@ -0,0 +1,68 @@
+import { authClient } from "@/lib/auth-client";
+import {
+  RefreshControl,
+  ScrollView,
+  StatusBar,
+  Text,
+  View,
+} from "react-native";
+import { useQuery, useZero } from "@rocicorp/zero/react";
+import { queries, type Mutators, type Schema } from "@money/shared";
+import { useState } from "react";
+
+export default function HomeScreen() {
+  const { data: session } = authClient.useSession();
+
+  const [balances] = useQuery(queries.getBalances(session));
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    // simulate async work
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setRefreshing(false);
+  };
+
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <ScrollView
+        contentContainerStyle={{
+          paddingTop: StatusBar.currentHeight,
+          flexGrow: 1,
+        }}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        style={{ paddingHorizontal: 10 }}
+      >
+        {balances.map((balance) => (
+          <Balance key={balance.id} balance={balance} />
+        ))}
+      </ScrollView>
+    </>
+  );
+}
+
+function Balance({
+  balance,
+}: {
+  balance: { name: string; current: number; avaliable: number };
+}) {
+  return (
+    <View
+      style={{
+        backgroundColor: "#eee",
+        borderColor: "#ddd",
+        borderWidth: 1,
+        marginBottom: 10,
+        borderRadius: 10,
+      }}
+    >
+      <Text style={{ fontSize: 15, textAlign: "center" }}>{balance.name}</Text>
+      <Text style={{ fontSize: 30, textAlign: "center" }}>
+        {balance.current}
+      </Text>
+    </View>
+  );
+}

apps/expo/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require("eslint/config");
+const expoConfig = require("eslint-config-expo/flat");
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ["dist/*"],
+  },
+]);

apps/expo/lib/auth-client.ts

@@ -1,10 +1,17 @@
 import { createAuthClient } from "better-auth/react";
-import { genericOAuthClient } from "better-auth/client/plugins";
+import {
+  deviceAuthorizationClient,
+  genericOAuthClient,
+} from "better-auth/client/plugins";
 import { expoClient } from "@better-auth/expo/client";
 import * as SecureStore from "expo-secure-store";
+import { BASE_URL } from "@money/shared";
 
 export const authClient = createAuthClient({
-  baseURL: process.env.NODE_ENV == 'production' ? 'https://money-api.koon.us' : "http://localhost:3000",
+  baseURL:
+    process.env.NODE_ENV == "production"
+      ? "https://money-api.koon.us"
+      : `${BASE_URL}:3000`,
   plugins: [
     expoClient({
       scheme: "money",
@@ -12,5 +19,6 @@ export const authClient = createAuthClient({
       storage: SecureStore,
     }),
     genericOAuthClient(),
-  ]
+    deviceAuthorizationClient(),
+  ],
 });

apps/expo/metro.config.js

@@ -1,6 +1,6 @@
 const { getDefaultConfig } = require("expo/metro-config");
 
-const config = getDefaultConfig(__dirname)
+const config = getDefaultConfig(__dirname);
 
 // Add wasm asset support
 config.resolver.assetExts.push("wasm");

apps/expo/package.json

@@ -0,0 +1,64 @@
+{
+  "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 -- bun run --dir=shared db:migrate",
+    "db:gen": "dotenv -- bun run --dir=shared generate:zero"
+  },
+  "dependencies": {
+    "@better-auth/expo": "^1.3.27",
+    "@expo/vector-icons": "^15.0.2",
+    "@money/shared": "*",
+    "@money/ui": "*",
+    "@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-network": "~8.0.8",
+    "expo-router": "~6.0.11",
+    "expo-secure-store": "~15.0.8",
+    "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/expo/tsconfig.json

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

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,50 @@
+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",
+    "effect",
+    "@effect/platform",
+    "@effect/platform-bun",
+    "bun:ffi",
+    "@rocicorp/zero",
+    "better-auth",
+    "zod",
+    // "./assets/**/*.scm",
+    // "./assets/**/*.wasm",
+  ],
+});
+
+console.log("✅ App bundled successfully");

apps/tui/lib/auth-client.ts

@@ -0,0 +1,8 @@
+import { config } from "@/src/config";
+import { createAuthClient } from "better-auth/client";
+import { deviceAuthorizationClient } from "better-auth/client/plugins";
+
+export const authClient = createAuthClient({
+  baseURL: config.apiUrl,
+  plugins: [deviceAuthorizationClient()],
+});

apps/tui/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@money/tui",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "bun run build.js",
+    "start": "bun run dist/index.js"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "dependencies": {
+    "@effect/platform": "^0.93.2",
+    "@effect/platform-bun": "^0.83.0",
+    "@money/shared": "workspace:*",
+    "@money/ui": "workspace:*",
+    "@opentui/core": "^0.1.47",
+    "@opentui/react": "^0.1.47",
+    "@types/qrcode": "^1.5.6",
+    "effect": "^3.19.4",
+    "qrcode": "^1.5.4",
+    "react-native": "^0.82.1",
+    "react-native-opentui": "workspace:*"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.0"
+  }
+}

apps/tui/src/auth.ts

@@ -0,0 +1,221 @@
+import {
+  Context,
+  Data,
+  Effect,
+  Layer,
+  Schema,
+  Console,
+  Schedule,
+  Ref,
+  Duration,
+} from "effect";
+import { FileSystem } from "@effect/platform";
+import { config } from "./config";
+import { AuthState } from "./schema";
+import { authClient } from "@/lib/auth-client";
+import type { BetterFetchResponse } from "@better-fetch/fetch";
+
+class AuthClientUnknownError extends Data.TaggedError(
+  "AuthClientUnknownError",
+) {}
+class AuthClientExpiredToken extends Data.TaggedError(
+  "AuthClientExpiredToken",
+) {}
+class AuthClientNoData extends Data.TaggedError("AuthClientNoData") {}
+class AuthClientFetchError extends Data.TaggedError("AuthClientFetchError")<{
+  message: string;
+}> {}
+class AuthClientError<T> extends Data.TaggedError("AuthClientError")<{
+  error: T;
+}> {}
+
+type ErrorType<E> = {
+  [key in keyof ((E extends Record<string, any>
+    ? E
+    : {
+        message?: string;
+      }) & {
+    status: number;
+    statusText: string;
+  })]: ((E extends Record<string, any>
+    ? E
+    : {
+        message?: string;
+      }) & {
+    status: number;
+    statusText: string;
+  })[key];
+};
+
+export class AuthClient extends Context.Tag("AuthClient")<
+  AuthClient,
+  AuthClientImpl
+>() {}
+
+export interface AuthClientImpl {
+  use: <T, E>(
+    fn: (client: typeof authClient) => Promise<BetterFetchResponse<T, E>>,
+  ) => Effect.Effect<
+    T,
+    | AuthClientError<ErrorType<E>>
+    | AuthClientFetchError
+    | AuthClientUnknownError
+    | AuthClientNoData,
+    never
+  >;
+}
+
+export const make = () =>
+  Effect.gen(function* () {
+    return AuthClient.of({
+      use: (fn) =>
+        Effect.gen(function* () {
+          const { data, error } = yield* Effect.tryPromise({
+            try: () => fn(authClient),
+            catch: (error) =>
+              error instanceof Error
+                ? new AuthClientFetchError({ message: error.message })
+                : new AuthClientUnknownError(),
+          });
+          if (error != null)
+            return yield* Effect.fail(new AuthClientError({ error }));
+          if (data == null) return yield* Effect.fail(new AuthClientNoData());
+          return data;
+        }),
+    });
+  });
+
+export const AuthClientLayer = Layer.scoped(AuthClient, make());
+
+const pollToken = ({ device_code }: { device_code: string }) =>
+  Effect.gen(function* () {
+    const auth = yield* AuthClient;
+    const intervalRef = yield* Ref.make(5);
+
+    const tokenEffect = auth.use((client) => {
+      Console.debug("Fetching");
+
+      return client.device.token({
+        grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+        device_code,
+        client_id: config.authClientId,
+        fetchOptions: { headers: { "user-agent": config.authClientUserAgent } },
+      });
+    });
+
+    return yield* tokenEffect.pipe(
+      Effect.tapError((error) =>
+        error._tag == "AuthClientError" && error.error.error == "slow_down"
+          ? Ref.update(intervalRef, (current) => {
+              Console.debug("updating delay to ", current + 5);
+              return current + 5;
+            })
+          : Effect.void,
+      ),
+      Effect.retry({
+        schedule: Schedule.addDelayEffect(
+          Schedule.recurWhile<Effect.Effect.Error<typeof tokenEffect>>(
+            (error) =>
+              error._tag == "AuthClientError" &&
+              (error.error.error == "authorization_pending" ||
+                error.error.error == "slow_down"),
+          ),
+          () => Ref.get(intervalRef).pipe(Effect.map(Duration.seconds)),
+        ),
+      }),
+    );
+  });
+
+const getFromFromDisk = Effect.gen(function* () {
+  const fs = yield* FileSystem.FileSystem;
+  const content = yield* fs.readFileString(config.authPath);
+  const auth = yield* Schema.decode(Schema.parseJson(AuthState))(content);
+  if (auth.session.expiresAt < new Date())
+    yield* Effect.fail(new AuthClientExpiredToken());
+  return auth;
+});
+
+const requestAuth = Effect.gen(function* () {
+  const auth = yield* AuthClient;
+  const { device_code, user_code } = yield* auth.use((client) =>
+    client.device.code({
+      client_id: config.authClientId,
+      scope: "openid profile email",
+    }),
+  );
+
+  console.log(`Please use the code: ${user_code}`);
+
+  const { access_token } = yield* pollToken({ device_code });
+
+  const sessionData = yield* auth.use((client) =>
+    client.getSession({
+      fetchOptions: {
+        auth: {
+          type: "Bearer",
+          token: access_token,
+        },
+      },
+    }),
+  );
+  if (sessionData == null) return yield* Effect.fail(new AuthClientNoData());
+
+  const result = yield* Schema.decodeUnknown(AuthState)(sessionData);
+
+  const fs = yield* FileSystem.FileSystem;
+  yield* fs.writeFileString(config.authPath, JSON.stringify(result));
+
+  return result;
+});
+
+export const getAuth = Effect.gen(function* () {
+  return yield* getFromFromDisk.pipe(
+    Effect.catchAll(() => requestAuth),
+    Effect.catchTag("AuthClientFetchError", (err) =>
+      Effect.gen(function* () {
+        yield* Console.error("Authentication failed: " + err.message);
+        process.exit(1);
+      }),
+    ),
+    Effect.catchTag("AuthClientNoData", () =>
+      Effect.gen(function* () {
+        yield* Console.error(
+          "Authentication failed: No error and no data was given by the auth server.",
+        );
+        process.exit(1);
+      }),
+    ),
+    Effect.catchTag("ParseError", (err) =>
+      Effect.gen(function* () {
+        yield* Console.error(
+          "Authentication failed: Auth data failed: " + err.toString(),
+        );
+        process.exit(1);
+      }),
+    ),
+    Effect.catchTag("BadArgument", () =>
+      Effect.gen(function* () {
+        yield* Console.error("Authentication failed: Bad argument");
+        process.exit(1);
+      }),
+    ),
+    Effect.catchTag("SystemError", () =>
+      Effect.gen(function* () {
+        yield* Console.error("Authentication failed: System error");
+        process.exit(1);
+      }),
+    ),
+    Effect.catchTag("AuthClientError", ({ error }) =>
+      Effect.gen(function* () {
+        yield* Console.error("Authentication error: " + error.statusText);
+        process.exit(1);
+      }),
+    ),
+    Effect.catchTag("AuthClientUnknownError", () =>
+      Effect.gen(function* () {
+        yield* Console.error("Unknown authentication error");
+        process.exit(1);
+      }),
+    ),
+  );
+});

apps/tui/src/config.ts

@@ -0,0 +1,14 @@
+import { join } from "path";
+import { homedir } from "os";
+
+const PATH = join(homedir(), ".local", "share", "money");
+const AUTH_PATH = join(PATH, "auth.json");
+
+export const config = {
+  dir: PATH,
+  authPath: AUTH_PATH,
+  authClientId: "koon-family",
+  authClientUserAgent: "CLI",
+  zeroUrl: "http://laptop:4848",
+  apiUrl: "http://laptop:3000",
+};

apps/tui/src/index.tsx

@@ -0,0 +1,46 @@
+import { createCliRenderer } from "@opentui/core";
+import { createRoot, useKeyboard, useRenderer } from "@opentui/react";
+import { App, type Route } from "@money/ui";
+import { ZeroProvider } from "@rocicorp/zero/react";
+import { schema, createMutators } from "@money/shared";
+import { useState } from "react";
+import { AuthClientLayer, getAuth } from "./auth";
+import { Effect } from "effect";
+import { BunContext } from "@effect/platform-bun";
+import type { AuthData } from "./schema";
+import { kvStore } from "./store";
+import { config } from "./config";
+
+function Main({ auth }: { auth: AuthData }) {
+  const [route, setRoute] = useState<Route>("/");
+  const renderer = useRenderer();
+
+  useKeyboard((key) => {
+    if (key.name == "c" && key.ctrl) process.exit(0);
+    if (key.name == "i" && key.meta) renderer.console.toggle();
+  });
+
+  return <App auth={auth} route={route} setRoute={setRoute} />;
+}
+
+const auth = await Effect.runPromise(
+  getAuth.pipe(
+    Effect.provide(BunContext.layer),
+    Effect.provide(AuthClientLayer),
+  ),
+);
+const renderer = await createCliRenderer({ exitOnCtrlC: false });
+createRoot(renderer).render(
+  <ZeroProvider
+    {...{
+      userID: auth.user.id,
+      auth: auth.session.token,
+      server: config.zeroUrl,
+      schema,
+      mutators: createMutators(auth),
+      kvStore,
+    }}
+  >
+    <Main auth={auth} />
+  </ZeroProvider>,
+);

apps/tui/src/schema.ts

@@ -0,0 +1,34 @@
+import { Schema } from "effect";
+
+const DateFromDateOrString = Schema.Union(
+  Schema.DateFromString,
+  Schema.DateFromSelf,
+);
+
+const SessionSchema = Schema.Struct({
+  expiresAt: DateFromDateOrString,
+  token: Schema.String,
+  createdAt: DateFromDateOrString,
+  updatedAt: DateFromDateOrString,
+  ipAddress: Schema.optional(Schema.NullishOr(Schema.String)),
+  userAgent: Schema.optional(Schema.NullishOr(Schema.String)),
+  userId: Schema.String,
+  id: Schema.String,
+});
+
+const UserSchema = Schema.Struct({
+  name: Schema.String,
+  email: Schema.String,
+  emailVerified: Schema.Boolean,
+  image: Schema.optional(Schema.NullishOr(Schema.String)),
+  createdAt: DateFromDateOrString,
+  updatedAt: DateFromDateOrString,
+  id: Schema.String,
+});
+
+export const AuthState = Schema.Struct({
+  session: SessionSchema,
+  user: UserSchema,
+});
+
+export type AuthData = typeof AuthState.Type;

apps/tui/src/store.ts

@@ -0,0 +1,131 @@
+import { promises as fs } from "fs";
+import path from "path";
+import type { ReadonlyJSONValue, ZeroOptions } from "@rocicorp/zero";
+import { config } from "./config";
+
+type StoreProvider = ZeroOptions<any>["kvStore"];
+
+const DATA_DIR = config.dir;
+
+function deepFreeze<T>(obj: T): T {
+  if (obj && typeof obj === "object" && !Object.isFrozen(obj)) {
+    Object.freeze(obj);
+    for (const value of Object.values(obj as any)) {
+      deepFreeze(value);
+    }
+  }
+  return obj;
+}
+
+async function loadFile(name: string): Promise<Map<string, ReadonlyJSONValue>> {
+  const filePath = path.join(DATA_DIR, `${name}.json`);
+  try {
+    const buf = await fs.readFile(filePath, "utf8");
+    const obj = JSON.parse(buf) as Record<string, ReadonlyJSONValue>;
+    const frozen = Object.fromEntries(
+      Object.entries(obj).map(([k, v]) => [k, deepFreeze(v)]),
+    );
+    return new Map(Object.entries(frozen));
+  } catch (err: any) {
+    if (err.code === "ENOENT") {
+      return new Map();
+    }
+    throw err;
+  }
+}
+
+async function saveFile(name: string, data: Map<string, ReadonlyJSONValue>) {
+  const filePath = path.join(DATA_DIR, `${name}.json`);
+  const obj = Object.fromEntries(data.entries());
+  await fs.writeFile(filePath, JSON.stringify(obj, null, 2), "utf8");
+}
+
+export const kvStore: StoreProvider = {
+  create: (name: string) => {
+    let closed = false;
+    let dataPromise = loadFile(name);
+
+    const makeRead = async () => {
+      const data = await dataPromise;
+      let txClosed = false;
+      return {
+        closed: txClosed,
+        async has(key: string) {
+          if (txClosed) throw new Error("transaction closed");
+          return data.has(key);
+        },
+        async get(key: string) {
+          if (txClosed) throw new Error("transaction closed");
+          return data.get(key);
+        },
+        release() {
+          txClosed = true;
+        },
+      };
+    };
+
+    const makeWrite = async () => {
+      const data = await dataPromise;
+      let txClosed = false;
+      const staging = new Map<string, ReadonlyJSONValue | undefined>();
+
+      return {
+        closed: txClosed,
+        async has(key: string) {
+          if (txClosed) throw new Error("transaction closed");
+          return staging.has(key)
+            ? staging.get(key) !== undefined
+            : data.has(key);
+        },
+        async get(key: string) {
+          if (txClosed) throw new Error("transaction closed");
+          return staging.has(key) ? staging.get(key) : data.get(key);
+        },
+        async put(key: string, value: ReadonlyJSONValue) {
+          if (txClosed) throw new Error("transaction closed");
+          staging.set(key, deepFreeze(value)); // 🔒 freeze before staging
+        },
+        async del(key: string) {
+          if (txClosed) throw new Error("transaction closed");
+          staging.set(key, undefined);
+        },
+        async commit() {
+          if (txClosed) throw new Error("transaction closed");
+          for (const [k, v] of staging.entries()) {
+            if (v === undefined) {
+              data.delete(k);
+            } else {
+              data.set(k, v);
+            }
+          }
+          await saveFile(name, data);
+          txClosed = true;
+        },
+        release() {
+          txClosed = true;
+        },
+      };
+    };
+
+    return {
+      closed,
+      async read() {
+        if (closed) throw new Error("store closed");
+        return makeRead();
+      },
+      async write() {
+        if (closed) throw new Error("store closed");
+        return makeWrite();
+      },
+      async close() {
+        closed = true;
+      },
+    };
+  },
+
+  async drop(name: string) {
+    const filePath = path.join(DATA_DIR, `${name}.json`);
+    await fs.rm(filePath, { force: true });
+    console.log("destroy db:", name);
+  },
+};

apps/tui/tsconfig.json

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

apps/tui/util/qr.ts

@@ -0,0 +1,24 @@
+import QRCode from "qrcode";
+
+export function QR(value: string): string {
+  const qr = QRCode.create(value, {
+    errorCorrectionLevel: "L",
+    version: 3,
+  });
+
+  const m = qr.modules.data;
+  const size = qr.modules.size;
+
+  // Use half-block characters to compress vertically
+  // Upper half = '▀', lower half = '▄', full = '█', empty = ' '
+  let out = "";
+  for (let y = 0; y < size; y += 2) {
+    for (let x = 0; x < size; x++) {
+      const top = m[y * size + x];
+      const bottom = m[(y + 1) * size + x];
+      out += top && bottom ? "█" : top ? "▀" : bottom ? "▄" : " ";
+    }
+    out += "\n";
+  }
+  return out;
+}

biome.jsonc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": false
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  }
+}

eslint.config.js

@@ -1,10 +0,0 @@
-// https://docs.expo.dev/guides/using-eslint/
-const { defineConfig } = require('eslint/config');
-const expoConfig = require('eslint-config-expo/flat');
-
-module.exports = defineConfig([
-  expoConfig,
-  {
-    ignores: ['dist/*'],
-  },
-]);

flake.nix

@@ -19,9 +19,12 @@
         packages = with pkgs; [
           corepack
           nodejs_22
+          bun
+          biome
 
           postgresql
           process-compose
+          cloudflared
         ];
       };
     });

package.json

@@ -1,71 +1,16 @@
 {
   "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,
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@rocicorp/zero-sqlite3"
-    ],
-    "ignoredBuiltDependencies": [
-      "esbuild",
-      "protobufjs"
-    ]
-  }
+  "scripts": {
+    "dev": "process-compose up -p 0",
+    "tui": "bun --filter=@money/tui run build && bun --filter=@money/tui run start",
+    "db:gen": "bun --filter=@money/shared db:gen",
+    "db:push": "bun --filter=@money/shared db:push"
+  },
+  "workspaces": ["apps/*", "packages/*"],
+  "trustedDependencies": [
+    "@rocicorp/zero-sqlite3",
+    "protobufjs",
+    "unrs-resolver"
+  ]
 }

packages/react-native-opentui/index.tsx

@@ -0,0 +1,323 @@
+import * as React from "react";
+import type {
+  ViewProps,
+  TextProps,
+  PressableProps,
+  ScrollViewProps,
+  ModalProps,
+  StyleProp,
+  ViewStyle,
+  LinkingImpl,
+  TextInputProps,
+} from "react-native";
+import { useTerminalDimensions } from "@opentui/react";
+import { BorderSides, RGBA } from "@opentui/core";
+import { platform } from "node:os";
+import { exec } from "node:child_process";
+
+const RATIO_WIDTH = 8.433;
+const RATIO_HEIGHT = 17;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "string",
+): Extract<ViewStyle[K], string> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "number",
+): Extract<ViewStyle[K], number> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "boolean",
+): Extract<ViewStyle[K], boolean> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "string" | "number" | "boolean",
+) {
+  if (!style) return undefined;
+
+  const obj: ViewStyle = Array.isArray(style)
+    ? Object.assign({}, ...style.filter(Boolean))
+    : (style as ViewStyle);
+
+  const v = obj[name];
+  return typeof v === type ? v : undefined;
+}
+
+export function View({ children, style }: ViewProps) {
+  const bg =
+    style && "backgroundColor" in style
+      ? typeof style.backgroundColor == "string"
+        ? style.backgroundColor.startsWith("rgba(")
+          ? (() => {
+              const parts = style.backgroundColor.split("(")[1].split(")")[0];
+              const [r, g, b, a] = parts.split(",").map(parseFloat);
+              return RGBA.fromInts(r, g, b, a * 255);
+            })()
+          : style.backgroundColor
+        : undefined
+      : undefined;
+
+  const padding = attr(style, "padding", "number");
+  const paddingTop = attr(style, "paddingTop", "number");
+  const paddingLeft = attr(style, "paddingLeft", "number");
+  const paddingBottom = attr(style, "paddingBottom", "number");
+  const paddingRight = attr(style, "paddingRight", "number");
+  const gap = attr(style, "gap", "number");
+
+  const borderBottomWidth = attr(style, "borderBottomWidth", "number");
+  const borderTopWidth = attr(style, "borderTopWidth", "number");
+  const borderLeftWidth = attr(style, "borderLeftWidth", "number");
+  const borderRightWidth = attr(style, "borderRightWidth", "number");
+
+  const borderBottomColor = attr(style, "borderBottomColor", "string");
+  const borderTopColor = attr(style, "borderTopColor", "string");
+  const borderLeftColor = attr(style, "borderLeftColor", "string");
+  const borderRightColor = attr(style, "borderRightColor", "string");
+
+  const borderColor = attr(style, "borderColor", "string");
+
+  const top = attr(style, "top", "number");
+
+  const width = attr(style, "width", "number");
+
+  const props = {
+    overflow: attr(style, "overflow", "string"),
+    position: attr(style, "position", "string"),
+    alignSelf: attr(style, "alignSelf", "string"),
+    alignItems: attr(style, "alignItems", "string"),
+    justifyContent: attr(style, "justifyContent", "string"),
+    flexShrink: attr(style, "flexShrink", "number"),
+    flexDirection: attr(style, "flexDirection", "string"),
+    zIndex: attr(style, "zIndex", "number"),
+    left: attr(style, "left", "number"),
+    right: attr(style, "right", "number"),
+    bottom: attr(style, "bottom", "number"),
+    flexGrow:
+      attr(style, "flex", "number") || attr(style, "flexGrow", "number"),
+  };
+
+  const border = (() => {
+    const sides: BorderSides[] = [];
+    if (borderBottomWidth) sides.push("bottom");
+    if (borderTopWidth) sides.push("top");
+    if (borderLeftWidth) sides.push("left");
+    if (borderRightWidth) sides.push("right");
+    if (!sides.length) return undefined;
+    return sides;
+  })();
+
+  return (
+    <box
+      backgroundColor={bg}
+      paddingTop={
+        (paddingTop && Math.round(paddingTop / RATIO_HEIGHT)) ||
+        (padding && Math.round(padding / RATIO_HEIGHT))
+      }
+      paddingBottom={
+        (paddingBottom && Math.round(paddingBottom / RATIO_HEIGHT)) ||
+        (padding && Math.round(padding / RATIO_HEIGHT))
+      }
+      paddingLeft={
+        (paddingLeft && Math.round(paddingLeft / RATIO_WIDTH)) ||
+        (padding && Math.round(padding / RATIO_WIDTH))
+      }
+      paddingRight={
+        (paddingRight && Math.round(paddingRight / RATIO_WIDTH)) ||
+        (padding && Math.round(padding / RATIO_WIDTH))
+      }
+      gap={gap && Math.round(gap / RATIO_HEIGHT)}
+      border={border}
+      borderColor={borderColor}
+      width={width && Math.round(width / RATIO_WIDTH)}
+      top={top && Math.round(top / RATIO_HEIGHT)}
+      {...props}
+    >
+      {children}
+    </box>
+  );
+}
+
+export function Pressable({
+  children: childrenRaw,
+  style,
+  onPress,
+}: PressableProps) {
+  const bg =
+    style && "backgroundColor" in style
+      ? typeof style.backgroundColor == "string"
+        ? style.backgroundColor.startsWith("rgba(")
+          ? (() => {
+              const parts = style.backgroundColor.split("(")[1].split(")")[0];
+              const [r, g, b, a] = parts.split(",").map(parseFloat);
+              return RGBA.fromInts(r, g, b, a * 255);
+            })()
+          : 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 flexShrink =
+    style && "flexShrink" in style
+      ? typeof style.flexShrink == "number"
+        ? style.flexShrink
+        : undefined
+      : undefined;
+  const overflow =
+    style && "overflow" in style
+      ? typeof style.overflow == "string"
+        ? style.overflow
+        : undefined
+      : undefined;
+  const position =
+    style && "position" in style
+      ? typeof style.position == "string"
+        ? style.position
+        : undefined
+      : undefined;
+  const justifyContent =
+    style && "justifyContent" in style
+      ? typeof style.justifyContent == "string"
+        ? style.justifyContent
+        : undefined
+      : undefined;
+  const alignItems =
+    style && "alignItems" in style
+      ? typeof style.alignItems == "string"
+        ? style.alignItems
+        : undefined
+      : undefined;
+
+  const padding =
+    style && "padding" in style
+      ? typeof style.padding == "number"
+        ? style.padding
+        : undefined
+      : undefined;
+
+  const children =
+    childrenRaw instanceof Function
+      ? childrenRaw({ pressed: true })
+      : childrenRaw;
+
+  return (
+    <box
+      onMouseDown={
+        onPress
+          ? (_event) => {
+              // @ts-ignore
+              onPress();
+            }
+          : undefined
+      }
+      backgroundColor={bg}
+      flexDirection={flexDirection}
+      flexGrow={flex}
+      overflow={overflow}
+      flexShrink={flexShrink}
+      position={position}
+      justifyContent={justifyContent}
+      alignItems={alignItems}
+      paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
+      paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
+      paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
+      paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
+    >
+      {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 function ScrollView({ children }: ScrollViewProps) {
+  return <scrollbox>{children}</scrollbox>;
+}
+
+export function Modal({ children, visible }: ModalProps) {
+  const { width, height } = useTerminalDimensions();
+  return (
+    <box
+      visible={visible}
+      position="absolute"
+      width={width}
+      height={height}
+      zIndex={10}
+    >
+      {children}
+    </box>
+  );
+}
+
+export function TextInput({
+  defaultValue,
+  onChangeText,
+  onKeyPress,
+}: TextInputProps) {
+  return (
+    <input
+      minWidth={20}
+      minHeight={1}
+      backgroundColor="white"
+      textColor="black"
+      focused={true}
+      cursorColor={"black"}
+      onInput={onChangeText}
+      onKeyDown={(key) =>
+        // @ts-ignore
+        onKeyPress({
+          nativeEvent: {
+            key: key.name == "return" ? "Enter" : key.name,
+          },
+        })
+      }
+      placeholder={defaultValue}
+    />
+  );
+}
+
+export const Platform = {
+  OS: "tui",
+};
+
+export const Linking = {
+  openURL: async (url: string) => {
+    const cmd =
+      platform() == "darwin"
+        ? `open ${url}`
+        : platform() == "win32"
+          ? `start "" "${url}"`
+          : `xdg-open "${url}"`;
+    exec(cmd);
+  },
+} satisfies Partial<LinkingImpl>;
+
+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/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@money/shared",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "exports": {
+    ".": "./src/index.ts",
+    "./auth": "./src/auth.ts",
+    "./db": "./src/db/index.ts"
+  },
+  "dependencies": {
+    "drizzle-zero": "^0.14.3"
+  },
+  "scripts": {
+    "db:gen": "drizzle-zero generate -s ./src/db/schema/public.ts -o ./src/zero-schema.gen.ts -f && sed -i 's/enableLegacyQueries: true,/enableLegacyQueries: false,/g' src/zero-schema.gen.ts && sed -i 's/enableLegacyMutators: true,/enableLegacyMutators: false,/g' src/zero-schema.gen.ts",
+    "db:push": "drizzle-kit push"
+  }
+}

packages/shared/src/const.ts

@@ -0,0 +1,2 @@
+export const HOST = process.env.EXPO_PUBLIC_TAILSCALE_MACHINE || "localhost";
+export const BASE_URL = `http://${HOST}`;

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

@@ -5,6 +5,7 @@ import {
   text,
   timestamp,
   uniqueIndex,
+  integer,
 } from "drizzle-orm/pg-core";
 import { users } from "./public";
 
@@ -93,9 +94,19 @@ export const auditLogs = pgTable("audit_log", {
   action: text("action").notNull(),
 });
 
-export const plaidAccessTokens = pgTable("plaidAccessToken", {
+export const deviceCodes = pgTable("deviceCode", {
   id: text("id").primaryKey(),
-  userId: text("user_id").notNull(),
-  token: text("token").notNull(),
+  deviceCode: text("device_code").notNull(),
+  userCode: text("user_code").notNull(),
+  userId: text("user_id").references(() => users.id, {
+    onDelete: "set null",
+  }),
+  clientId: text("client_id"),
+  scope: text("scope"),
+  status: text("status").notNull(),
+  expiresAt: timestamp("expires_at"),
+  lastPolledAt: timestamp("last_polled_at"),
+  pollingInterval: integer("polling_interval"),
   createdAt: timestamp("created_at").notNull().defaultNow(),
+  updatedAt: timestamp("updated_at").notNull().defaultNow(),
 });

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

@@ -0,0 +1,105 @@
+import { relations } from "drizzle-orm";
+import {
+  boolean,
+  decimal,
+  pgTable,
+  text,
+  timestamp,
+  pgEnum,
+  uniqueIndex,
+  numeric,
+} from "drizzle-orm/pg-core";
+
+export const users = pgTable(
+  "user",
+  {
+    id: text("id").primaryKey(),
+    name: text("name"),
+    email: text("email").notNull(),
+    emailVerified: boolean("email_verified").notNull().default(false),
+    image: text("image"),
+    createdAt: timestamp("created_at").notNull().defaultNow(),
+    updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  },
+  (table) => [uniqueIndex("user_email_unique").on(table.email)],
+);
+
+export const transaction = pgTable("transaction", {
+  id: text("id").primaryKey(),
+  user_id: text("user_id").notNull(),
+  plaid_id: text("plaid_id").notNull().unique(),
+  account_id: text("account_id").notNull(),
+  name: text("name").notNull(),
+  amount: decimal("amount").notNull(),
+  datetime: timestamp("datetime"),
+  authorized_datetime: timestamp("authorized_datetime"),
+  json: text("json"),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+});
+
+export const plaidLink = pgTable("plaidLink", {
+  id: text("id").primaryKey(),
+  user_id: text("user_id").notNull(),
+  link: text("link").notNull(),
+  token: text("token").notNull(),
+  completeAt: timestamp("complete_at"),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+});
+
+export const balance = pgTable("balance", {
+  id: text("id").primaryKey(),
+  user_id: text("userId").notNull(),
+  plaid_id: text("plaidId").notNull().unique(),
+  avaliable: decimal("avaliable").notNull(),
+  current: decimal("current").notNull(),
+  name: text("name").notNull(),
+  tokenId: text("tokenId").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(),
+  syncCursor: text("sync_cursor"),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+});
+
+export const budget = pgTable("budget", {
+  id: text("id").primaryKey(),
+  orgId: text("org_id").notNull(),
+  label: text("label").notNull(),
+  createdBy: text("created_by").notNull(),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+});
+
+export const category = pgTable("category", {
+  id: text("id").primaryKey(),
+  budgetId: text("budget_id").notNull(),
+  amount: decimal("amount").notNull(),
+  every: text("every", { enum: ["year", "month", "week"] }).notNull(),
+  order: numeric("order").notNull(),
+  label: text("label").notNull(),
+  color: text("color").notNull(),
+  createdBy: text("created_by").notNull(),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  removedBy: text("removed_by"),
+  removedAt: timestamp("removed_at"),
+});
+
+export const budgetRelations = relations(budget, ({ many }) => ({
+  categories: many(category),
+}));
+
+export const categoryRelations = relations(category, ({ one }) => ({
+  budget: one(budget, {
+    fields: [category.budgetId],
+    references: [budget.id],
+  }),
+}));

packages/shared/src/index.ts

@@ -2,3 +2,4 @@ export * from "./queries";
 export * from "./mutators";
 export * from "./zero-schema.gen";
 export * from "./zql";
+export * from "./const";

packages/shared/src/mutators.ts

@@ -0,0 +1,155 @@
+import type { Transaction } from "@rocicorp/zero";
+import { authDataSchema, type AuthData } from "./auth";
+import { type Category, type Schema } from "./zero-schema.gen";
+import { isLoggedIn } from "./zql";
+
+type Tx = Transaction<Schema>;
+
+export function createMutators(authData: AuthData | null) {
+  return {
+    link: {
+      async create() {},
+      async get(tx: Tx, { link_token }: { link_token: string }) {},
+      async webhook() {},
+      async sync() {},
+      // async updateTransactions() {},
+      // async updateBalences() {},
+      async deleteAccounts(tx: Tx, { accountIds }: { accountIds: string[] }) {
+        isLoggedIn(authData);
+        for (const id of accountIds) {
+          const token = await tx.query.plaidAccessTokens
+            .where("userId", "=", authData.user.id)
+            .one();
+          if (!token) continue;
+          await tx.mutate.plaidAccessTokens.delete({ id });
+
+          const balances = await tx.query.balance
+            .where("user_id", "=", authData.user.id)
+            .where("tokenId", "=", token.id)
+            .run();
+
+          for (const bal of balances) {
+            await tx.mutate.balance.delete({ id: bal.id });
+            const txs = await tx.query.transaction
+              .where("user_id", "=", authData.user.id)
+              .where("account_id", "=", bal.tokenId)
+              .run();
+            for (const transaction of txs) {
+              await tx.mutate.transaction.delete({ id: transaction.id });
+            }
+          }
+        }
+      },
+    },
+    budget: {
+      async create(
+        tx: Tx,
+        { id, categoryId }: { id: string; categoryId: string },
+      ) {
+        isLoggedIn(authData);
+        await tx.mutate.budget.insert({
+          id,
+          orgId: authData.user.id,
+          label: "New Budget",
+          createdBy: authData.user.id,
+        });
+        await tx.mutate.category.insert({
+          id: categoryId,
+          budgetId: id,
+          amount: 0,
+          every: "week",
+          order: 1000,
+          label: "My category",
+          color: "#f06",
+          createdBy: authData.user.id,
+        });
+      },
+      async delete(tx: Tx, { id }: { id: string }) {
+        isLoggedIn(authData);
+        await tx.mutate.budget.delete({
+          id,
+        });
+      },
+      async createCategory(
+        tx: Tx,
+        {
+          id,
+          budgetId,
+          order,
+        }: { id: string; budgetId: string; order: number },
+      ) {
+        isLoggedIn(authData);
+
+        if (order != undefined) {
+          const after = await tx.query.category
+            .where("budgetId", "=", budgetId)
+            .where("order", ">", order);
+
+          after.forEach((item) => {
+            tx.mutate.category.update({
+              id: item.id,
+              order: item.order + 1,
+            });
+          });
+        }
+
+        tx.mutate.category.insert({
+          id,
+          budgetId,
+          amount: 0,
+          every: "week",
+          order: order + 1,
+          label: "My category",
+          color: "#f06",
+          createdBy: authData.user.id,
+        });
+      },
+      async deleteCategory(tx: Tx, { id }: { id: string }) {
+        isLoggedIn(authData);
+        const item = await tx.query.category.where("id", "=", id).one();
+        if (!item) throw Error("Item does not exist");
+        tx.mutate.category.update({
+          id,
+          removedAt: new Date().getTime(),
+          removedBy: authData.user.id,
+        });
+        const after = await tx.query.category
+          .where("budgetId", "=", item.budgetId)
+          .where("order", ">", item.order)
+          .run();
+        for (const item of after) {
+          tx.mutate.category.update({ id: item.id, order: item.order - 1 });
+        }
+        // after.forEach((item) => {
+        // });
+      },
+      async updateCategory(
+        tx: Tx,
+        {
+          id,
+          label,
+          order,
+          amount,
+          every,
+        }: {
+          id: string;
+          label?: string;
+          order?: number;
+          amount?: number;
+          every?: Category["every"];
+        },
+      ) {
+        isLoggedIn(authData);
+        tx.mutate.category.update({
+          id,
+          label,
+          order,
+          amount,
+          every,
+        });
+      },
+    },
+  } as const;
+}
+
+export type Mutators = ReturnType<typeof createMutators>;

packages/shared/src/queries.ts

@@ -0,0 +1,83 @@
+import { syncedQueryWithContext } from "@rocicorp/zero";
+import { z } from "zod";
+import { builder } from "./zero-schema.gen";
+import { type AuthData } from "./auth";
+import { isLoggedIn } from "./zql";
+
+export const queries = {
+  me: syncedQueryWithContext("me", z.tuple([]), (authData: AuthData | null) => {
+    isLoggedIn(authData);
+    return builder.users.where("id", "=", authData.user.id).one();
+  }),
+  allTransactions: syncedQueryWithContext(
+    "allTransactions",
+    z.tuple([]),
+    (authData: AuthData | null) => {
+      isLoggedIn(authData);
+      return builder.transaction
+        .where("user_id", "=", authData.user.id)
+        .orderBy("datetime", "desc")
+        .limit(50);
+    },
+  ),
+  getPlaidLink: syncedQueryWithContext(
+    "getPlaidLink",
+    z.tuple([]),
+    (authData: AuthData | null) => {
+      isLoggedIn(authData);
+      return builder.plaidLink
+        .where(({ cmp, and, or }) =>
+          and(
+            cmp("user_id", "=", authData.user.id),
+            cmp("createdAt", ">", new Date().getTime() - 1000 * 60 * 60 * 4),
+            or(
+              cmp("completeAt", ">", new Date().getTime() - 1000 * 5),
+              cmp("completeAt", "IS", null),
+            ),
+          ),
+        )
+        .orderBy("createdAt", "desc")
+        .one();
+    },
+  ),
+  getBalances: syncedQueryWithContext(
+    "getBalances",
+    z.tuple([]),
+    (authData: AuthData | null) => {
+      isLoggedIn(authData);
+      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");
+    },
+  ),
+  getBudgets: syncedQueryWithContext(
+    "getBudgets",
+    z.tuple([]),
+    (authData: AuthData | null) => {
+      isLoggedIn(authData);
+      return builder.budget
+        .related("categories", (q) =>
+          q.where("removedAt", "IS", null).orderBy("order", "asc"),
+        )
+        .limit(10);
+    },
+  ),
+  getBudgetCategories: syncedQueryWithContext(
+    "getBudgetCategories",
+    z.tuple([]),
+    (authData: AuthData | null) => {
+      isLoggedIn(authData);
+      return builder.category.orderBy("order", "desc");
+    },
+  ),
+};

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

@@ -80,6 +80,15 @@ export const schema = {
             "name"
           >,
         },
+        tokenId: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "balance",
+            "tokenId"
+          >,
+        },
         createdAt: {
           type: "number",
           optional: true,
@@ -103,6 +112,263 @@ export const schema = {
       },
       primaryKey: ["id"],
     },
+    budget: {
+      name: "budget",
+      columns: {
+        id: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "id"
+          >,
+        },
+        orgId: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "orgId"
+          >,
+          serverName: "org_id",
+        },
+        label: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "label"
+          >,
+        },
+        createdBy: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "createdBy"
+          >,
+          serverName: "created_by",
+        },
+        createdAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "createdAt"
+          >,
+          serverName: "created_at",
+        },
+        updatedAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "budget",
+            "updatedAt"
+          >,
+          serverName: "updated_at",
+        },
+      },
+      primaryKey: ["id"],
+    },
+    category: {
+      name: "category",
+      columns: {
+        id: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "id"
+          >,
+        },
+        budgetId: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "budgetId"
+          >,
+          serverName: "budget_id",
+        },
+        amount: {
+          type: "number",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "amount"
+          >,
+        },
+        every: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "every"
+          >,
+        },
+        order: {
+          type: "number",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "order"
+          >,
+        },
+        label: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "label"
+          >,
+        },
+        color: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "color"
+          >,
+        },
+        createdBy: {
+          type: "string",
+          optional: false,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "createdBy"
+          >,
+          serverName: "created_by",
+        },
+        createdAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "createdAt"
+          >,
+          serverName: "created_at",
+        },
+        updatedAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "updatedAt"
+          >,
+          serverName: "updated_at",
+        },
+        removedBy: {
+          type: "string",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "removedBy"
+          >,
+          serverName: "removed_by",
+        },
+        removedAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "category",
+            "removedAt"
+          >,
+          serverName: "removed_at",
+        },
+      },
+      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"
+          >,
+        },
+        syncCursor: {
+          type: "string",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidAccessTokens",
+            "syncCursor"
+          >,
+          serverName: "sync_cursor",
+        },
+        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: {
@@ -142,6 +408,16 @@ export const schema = {
             "token"
           >,
         },
+        completeAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidLink",
+            "completeAt"
+          >,
+          serverName: "complete_at",
+        },
         createdAt: {
           type: "number",
           optional: true,
@@ -336,7 +612,28 @@ export const schema = {
       serverName: "user",
     },
   },
-  relationships: {},
+  relationships: {
+    budget: {
+      categories: [
+        {
+          sourceField: ["id"],
+          destField: ["budgetId"],
+          destSchema: "category",
+          cardinality: "many",
+        },
+      ],
+    },
+    category: {
+      budget: [
+        {
+          sourceField: ["budgetId"],
+          destField: ["id"],
+          destSchema: "budget",
+          cardinality: "one",
+        },
+      ],
+    },
+  },
   enableLegacyQueries: false,
   enableLegacyMutators: false,
 } as const;
@@ -351,6 +648,21 @@ 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 "budget" table.
+ * This type is auto-generated from your Drizzle schema definition.
+ */
+export type Budget = Row<Schema["tables"]["budget"]>;
+/**
+ * Represents a row from the "category" table.
+ * This type is auto-generated from your Drizzle schema definition.
+ */
+export type Category = Row<Schema["tables"]["category"]>;
+/**
+ * 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/shared/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2022",
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "declaration": true,
+    "declaration": false,
     "outDir": "./dist",
     "strict": true,
     "verbatimModuleSyntax": true,

packages/ui/components/Button.tsx

@@ -0,0 +1,39 @@
+import { useEffect, type ReactNode } from "react";
+import { Text, Pressable } from "react-native";
+import { useShortcut, type Key } from "../lib/shortcuts";
+
+type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
+export interface ButtonProps {
+  children: ReactNode;
+  onPress?: () => void;
+  variant?: "default" | "secondary" | "destructive";
+  shortcut?: Key;
+}
+
+const STYLES: Record<
+  NonNullable<ButtonProps["variant"]>,
+  { backgroundColor: string; color: string }
+> = {
+  default: { backgroundColor: "black", color: "white" },
+  secondary: { backgroundColor: "#ccc", color: "black" },
+  destructive: { backgroundColor: "red", color: "white" },
+};
+
+export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
+  const { backgroundColor, color } = STYLES[variant || "default"];
+
+  if (shortcut && onPress) {
+    useShortcut(shortcut, onPress);
+  }
+
+  return (
+    <Pressable onPress={onPress} style={{ backgroundColor }}>
+      <Text style={{ fontFamily: "mono", color }}>
+        {" "}
+        {children}
+        {shortcut && ` (${shortcut})`}{" "}
+      </Text>
+    </Pressable>
+  );
+}

packages/ui/components/Dialog.tsx

@@ -0,0 +1,49 @@
+import { createContext, use, type ReactNode } from "react";
+import { Modal, View, Text } from "react-native";
+import { useShortcut } from "../lib/shortcuts";
+
+export interface DialogState {
+  close?: () => void;
+}
+export const Context = createContext<DialogState>({
+  close: () => {},
+});
+
+interface ProviderProps {
+  children: ReactNode;
+  visible?: boolean;
+  close?: () => void;
+}
+export function Provider({ children, visible, close }: ProviderProps) {
+  return (
+    <Context.Provider value={{ close }}>
+      <Modal transparent visible={visible}>
+        {/* <Pressable onPress={() => close && close()} style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)',  }}> */}
+        <View
+          style={{
+            // justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+            backgroundColor: "rgba(0,0,0,0.2)",
+          }}
+        >
+          {visible && children}
+        </View>
+      </Modal>
+    </Context.Provider>
+  );
+}
+
+interface ContentProps {
+  children: ReactNode;
+}
+export function Content({ children }: ContentProps) {
+  const { close } = use(Context);
+  useShortcut("escape", () => close?.(), "dialog");
+
+  return (
+    <View style={{ backgroundColor: "white", alignItems: "center", top: 120 }}>
+      {children}
+    </View>
+  );
+}

packages/ui/components/List.tsx

@@ -0,0 +1,36 @@
+import { useState, type ReactNode } from "react";
+import { View, Text } from "react-native";
+import { useKeyboard } from "../src/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/components/Table.tsx

@@ -0,0 +1,214 @@
+import { createContext, use, useEffect, useState, type ReactNode } from "react";
+import { View, Text } from "react-native";
+import { useShortcut } from "../lib/shortcuts/hooks";
+import type { Key } from "../lib/shortcuts";
+
+const HEADER_COLOR = "#7158e2";
+
+const COLORS = {
+  focused: "#ddd",
+  selected: "#eaebf6",
+  focused_selected: "#d5d7ef",
+};
+
+const EXTRA = 5;
+
+export type ValidRecord = Record<string, string | number | null>;
+
+interface TableState {
+  data: unknown[];
+  columns: Column[];
+  columnMap: Map<string, number>;
+  idx: number;
+  selectedIdx: Set<number>;
+}
+
+const INITAL_STATE = {
+  data: [],
+  columns: [],
+  columnMap: new Map(),
+  idx: 0,
+  selectedIdx: new Set(),
+} 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();
+}
+
+interface TableShortcut<T> {
+  key: Key;
+  handler: (params: { selected: T[]; index: number }) => void;
+}
+
+export interface ProviderProps<T> {
+  data: T[];
+  columns: Column[];
+  children: ReactNode;
+  shortcuts?: TableShortcut<T>[];
+}
+export function Provider<T extends ValidRecord>({
+  data,
+  columns,
+  children,
+  shortcuts,
+}: ProviderProps<T>) {
+  const [idx, setIdx] = useState(0);
+  const [selectedIdx, setSelectedIdx] = useState(new Set<number>());
+
+  useShortcut("j", () => {
+    setIdx((prev) => Math.min(prev + 1, data.length - 1));
+  });
+  useShortcut("down", () => {
+    setIdx((prev) => Math.min(prev + 1, data.length - 1));
+  });
+  useShortcut("k", () => {
+    setIdx((prev) => Math.max(prev - 1, 0));
+  });
+  useShortcut("up", () => {
+    setIdx((prev) => Math.max(prev - 1, 0));
+  });
+
+  useShortcut("escape", () => {
+    setSelectedIdx(new Set());
+  });
+  useShortcut("x", () => {
+    setSelectedIdx((last) => {
+      const newSelected = new Set(last);
+      newSelected.add(idx);
+      return newSelected;
+    });
+  });
+
+  useEffect(() => {
+    setIdx((prev) => Math.max(Math.min(prev, data.length - 1), 0));
+  }, [data]);
+
+  if (shortcuts) {
+    for (const shortcut of shortcuts) {
+      useShortcut(shortcut.key, () => {
+        const selected = data.filter(
+          (_, index) => idx == index || selectedIdx.has(index),
+        );
+        shortcut.handler({ selected, index: 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, selectedIdx }}>
+      {children}
+    </Context.Provider>
+  );
+}
+
+export function Body() {
+  const { columns, data, columnMap, idx, selectedIdx } = 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 = selectedIdx.has(index);
+        const isFocused = index == idx;
+
+        return (
+          <View
+            key={index}
+            style={{
+              backgroundColor:
+                isSelected && isFocused
+                  ? COLORS.focused_selected
+                  : isFocused
+                    ? COLORS.focused
+                    : isSelected
+                      ? COLORS.selected
+                      : undefined,
+            }}
+          >
+            <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 { 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/lib/shortcuts/Debug.tsx

@@ -0,0 +1,41 @@
+import { useSyncExternalStore } from "react";
+import { View, Text } from "react-native";
+import { keysStore, type ScopeKeys } from "./store";
+
+export function ShortcutDebug() {
+  const entries = useSyncExternalStore(
+    keysStore.subscribe,
+    keysStore.getSnapshot,
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 100,
+        bottom: 0,
+        right: 0,
+        backgroundColor: "black",
+        padding: 10,
+      }}
+    >
+      <Text style={{ color: "red", fontFamily: "mono" }}>Scopes:</Text>
+      {entries.map(([scope, keys]) => (
+        <ScopeView key={scope} scope={scope} keys={keys} />
+      ))}
+    </View>
+  );
+}
+
+function ScopeView({ scope, keys }: { scope: string; keys: ScopeKeys }) {
+  return (
+    <Text style={{ color: "red", fontFamily: "mono", textAlign: "right" }}>
+      {scope}:
+      {keys
+        .entries()
+        .map(([key, _]) => key)
+        .toArray()
+        .join(",")}
+    </Text>
+  );
+}

packages/ui/lib/shortcuts/Provider.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { useKeyboard } from "@opentui/react";
+import { keysStore } from "./store";
+
+export function ShortcutProvider({ children }: { children: ReactNode }) {
+  useKeyboard((e) => {
+    const fn = keysStore.getHandler(e.name);
+    fn?.();
+  });
+
+  return children;
+}

packages/ui/lib/shortcuts/Provider.web.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { keysStore } from "./store";
+import type { KeyName } from "./types";
+
+const KEY_MAP: { [k: string]: KeyName } = {
+  Escape: "escape",
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right",
+};
+
+if (typeof window !== "undefined") {
+  window.addEventListener("keydown", (e) => {
+    const key = Object.hasOwn(KEY_MAP, e.key) ? KEY_MAP[e.key]! : e.key;
+    const fn = keysStore.getHandler(key);
+    // console.log(e.key);
+    if (!fn) return;
+    e.preventDefault();
+    fn();
+  });
+}
+
+export function ShortcutProvider({ children }: { children: ReactNode }) {
+  return children;
+}

packages/ui/lib/shortcuts/hooks.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+import { keysStore } from "./store";
+import type { Key } from "./types";
+import { enforceKeyOptions } from "./util";
+
+export const useShortcut = (
+  key: Key,
+  handler: () => void,
+  scope: string = "global",
+) => {
+  const keyOptions = enforceKeyOptions(key);
+  const keyName = keyOptions.name;
+  const ref = useRef(handler);
+  ref.current = handler;
+
+  useEffect(() => {
+    keysStore.register(keyName, ref, scope);
+    return () => {
+      keysStore.deregister(keyName, scope);
+    };
+  }, []);
+};

packages/ui/lib/shortcuts/index.ts

@@ -0,0 +1,4 @@
+export * from "./Debug";
+export * from "./Provider";
+export * from "./hooks";
+export * from "./types";

packages/ui/lib/shortcuts/store.ts

@@ -0,0 +1,58 @@
+import { type RefObject } from "react";
+
+export type ScopeKeys = Map<string, RefObject<() => void>>;
+
+// outer reactive container
+const scopes = new Map<string, ScopeKeys>();
+
+// stable snapshot for subscribers
+let snapshot: [string, ScopeKeys][] = [];
+
+const listeners = new Set<() => void>();
+
+function emit() {
+  // replace identity so subscribers re-render
+  snapshot = Array.from(scopes.entries());
+  for (const fn of listeners) fn();
+}
+
+export const keysStore = {
+  subscribe(fn: () => void) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  },
+
+  getSnapshot() {
+    return snapshot;
+  },
+
+  register(key: string, ref: RefObject<() => void>, scope: string) {
+    const prev = scopes.get(scope);
+    const next = new Map(prev); // <-- important: new identity
+    next.set(key, ref);
+
+    scopes.set(scope, next); // <-- outer identity also changes
+    emit();
+  },
+
+  deregister(key: string, scope: string) {
+    const prev = scopes.get(scope);
+    if (!prev) return;
+
+    const next = new Map(prev);
+    next.delete(key);
+
+    if (next.size === 0) {
+      scopes.delete(scope);
+    } else {
+      scopes.set(scope, next);
+    }
+    emit();
+  },
+
+  getHandler(key: string) {
+    // last scope wins — clarify this logic as needed
+    const last = Array.from(scopes.values()).at(-1);
+    return last?.get(key)?.current;
+  },
+};

packages/ui/lib/shortcuts/types.ts

@@ -0,0 +1,52 @@
+export type KeyName =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f"
+  | "g"
+  | "h"
+  | "i"
+  | "j"
+  | "k"
+  | "l"
+  | "m"
+  | "n"
+  | "o"
+  | "p"
+  | "q"
+  | "r"
+  | "s"
+  | "t"
+  | "u"
+  | "v"
+  | "w"
+  | "x"
+  | "y"
+  | "z"
+  | ":"
+  | "up"
+  | "down"
+  | "left"
+  | "right"
+  | "return"
+  | "escape";
+
+export type Key = KeyName | KeyOptions;
+
+export interface KeyOptions {
+  name: KeyName;
+  ctrl?: boolean;
+  shift?: boolean;
+}

packages/ui/lib/shortcuts/util.ts

@@ -0,0 +1,9 @@
+import type { Key, KeyOptions } from "./types";
+
+export function enforceKeyOptions(key: Key): KeyOptions {
+  return typeof key == "string"
+    ? {
+        name: key,
+      }
+    : key;
+}

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/budget.tsx

@@ -0,0 +1,160 @@
+import { use, useRef, useState } from "react";
+import { View, Text, TextInput } from "react-native";
+import { RouterContext } from ".";
+import {
+  queries,
+  type Category,
+  type Mutators,
+  type Schema,
+} from "@money/shared";
+import { useQuery, useZero } from "@rocicorp/zero/react";
+import * as Table from "../components/Table";
+import { Button } from "../components/Button";
+import { RenameCategoryDialog } from "./budget/RenameCategoryDialog";
+import {
+  UpdateCategoryAmountDialog,
+  type CategoryWithComputed,
+  type Updating,
+} from "./budget/UpdateCategoryAmountDialog";
+
+const COLUMNS: Table.Column[] = [
+  { name: "label", label: "Name" },
+  { name: "week", label: "Week" },
+  { name: "month", label: "Month" },
+  { name: "year", label: "Year" },
+  { name: "order", label: "Order" },
+];
+
+export function Budget() {
+  const { auth } = use(RouterContext);
+  const [budgets] = useQuery(queries.getBudgets(auth));
+  const [renaming, setRenaming] = useState<Category>();
+  const [editCategoryAmount, setEditCategoryAmount] = useState<Updating>();
+
+  const z = useZero<Schema, Mutators>();
+
+  const newBudget = () => {
+    const id = new Date().getTime().toString();
+    const categoryId = new Date().getTime().toString();
+    z.mutate.budget.create({
+      id,
+      categoryId,
+    });
+  };
+
+  if (budgets.length == 0)
+    return (
+      <View
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          flex: 1,
+          gap: 10,
+        }}
+      >
+        <Text style={{ fontFamily: "mono" }}>
+          No budgets, please create a new budget
+        </Text>
+        <Button onPress={newBudget} shortcut="n">
+          New budget
+        </Button>
+      </View>
+    );
+
+  const budget = budgets[0]!;
+
+  const data = budget.categories.slice().map((category) => {
+    const { amount } = category;
+    const week = amount / 4;
+    const month = amount;
+    const year = amount * 12;
+
+    return {
+      ...category,
+      ...{
+        week,
+        month,
+        year,
+      },
+    };
+  });
+
+  const newCategory = ({ index }: { index: number }) => {
+    const id = new Date().getTime().toString();
+    z.mutate.budget.createCategory({
+      id,
+      budgetId: budget.id,
+      order: index,
+    });
+  };
+
+  const deleteCategory = ({ selected }: { selected: { id: string }[] }) => {
+    for (const { id } of selected) {
+      z.mutate.budget.deleteCategory({ id });
+    }
+  };
+
+  const renameCategory = ({ selected }: { selected: Category[] }) => {
+    for (const category of selected) {
+      setRenaming(category);
+    }
+  };
+
+  const onEditCategoryYearly = ({
+    selected,
+  }: { selected: CategoryWithComputed[] }) => {
+    for (const category of selected) {
+      setEditCategoryAmount({ category, every: "year" });
+    }
+  };
+
+  const onEditCategoryMonthly = ({
+    selected,
+  }: { selected: CategoryWithComputed[] }) => {
+    for (const category of selected) {
+      setEditCategoryAmount({ category, every: "month" });
+    }
+  };
+
+  const onEditCategoryWeekly = ({
+    selected,
+  }: { selected: CategoryWithComputed[] }) => {
+    for (const category of selected) {
+      setEditCategoryAmount({ category, every: "week" });
+    }
+  };
+
+  return (
+    <>
+      <RenameCategoryDialog renaming={renaming} setRenaming={setRenaming} />
+      <UpdateCategoryAmountDialog
+        updating={editCategoryAmount}
+        setUpdating={setEditCategoryAmount}
+      />
+
+      <View style={{ alignItems: "flex-start" }}>
+        <Text style={{ fontFamily: "mono", textAlign: "left" }}>
+          Selected Budget: {budget.label}
+        </Text>
+      </View>
+      <Table.Provider
+        data={data}
+        columns={COLUMNS}
+        shortcuts={[
+          { key: "i", handler: newCategory },
+          { key: "d", handler: deleteCategory },
+          { key: "r", handler: renameCategory },
+          { key: "y", handler: onEditCategoryYearly },
+          { key: "m", handler: onEditCategoryMonthly },
+          { key: "w", handler: onEditCategoryWeekly },
+        ]}
+      >
+        <View style={{ flex: 1 }}>
+          <View style={{ flexShrink: 0 }}>
+            <Table.Body />
+          </View>
+        </View>
+      </Table.Provider>
+    </>
+  );
+}

packages/ui/src/budget/RenameCategoryDialog.tsx

@@ -0,0 +1,77 @@
+import { useRef, useState } from "react";
+import * as Dialog from "../../components/Dialog";
+import { View, Text, TextInput } from "react-native";
+import { type Category, type Mutators, type Schema } from "@money/shared";
+import { useZero } from "@rocicorp/zero/react";
+
+interface RenameCategoryDialogProps {
+  renaming: Category | undefined;
+  setRenaming: (v: Category | undefined) => void;
+}
+export function RenameCategoryDialog({
+  renaming,
+  setRenaming,
+}: RenameCategoryDialogProps) {
+  const refText = useRef("");
+  const [renamingText, setRenamingText] = useState("");
+
+  const z = useZero<Schema, Mutators>();
+
+  return (
+    <Dialog.Provider
+      visible={renaming != undefined}
+      close={() => setRenaming(undefined)}
+    >
+      <Dialog.Content>
+        <View style={{ width: 400 }}>
+          <View
+            style={{
+              borderBottomWidth: 1,
+              paddingTop: 12,
+              paddingLeft: 12,
+              paddingRight: 12,
+            }}
+          >
+            <TextInput
+              style={{
+                fontFamily: "mono",
+                // @ts-ignore
+                outline: "none",
+              }}
+              autoFocus
+              selectTextOnFocus
+              defaultValue={renaming?.label}
+              onChangeText={(t) => {
+                refText.current = t;
+                setRenamingText(t);
+              }}
+              onKeyPress={(e) => {
+                if (!renaming) return;
+                if (e.nativeEvent.key == "Enter") {
+                  if (refText.current.trim() == "")
+                    return setRenaming(undefined);
+                  z.mutate.budget.updateCategory({
+                    id: renaming.id,
+                    label: refText.current,
+                  });
+                  setRenaming(undefined);
+                } else if (e.nativeEvent.key == "Escape") {
+                  setRenaming(undefined);
+                }
+              }}
+            />
+          </View>
+
+          <View
+            style={{ paddingLeft: 12, paddingRight: 12, paddingBottom: 12 }}
+          >
+            <Text style={{ fontFamily: "mono" }}>
+              → Rename category to: {renamingText || renaming?.label}
+            </Text>
+            <Text style={{ fontFamily: "mono" }}>→ Cancel</Text>
+          </View>
+        </View>
+      </Dialog.Content>
+    </Dialog.Provider>
+  );
+}

packages/ui/src/budget/UpdateCategoryAmountDialog.tsx

@@ -0,0 +1,107 @@
+import { useRef, useState } from "react";
+import * as Dialog from "../../components/Dialog";
+import { View, Text, TextInput } from "react-native";
+import { type Category, type Mutators, type Schema } from "@money/shared";
+import { useZero } from "@rocicorp/zero/react";
+
+export type Updating = {
+  category: CategoryWithComputed;
+  every: Category["every"];
+};
+
+export type CategoryWithComputed = Category & {
+  month: number;
+  year: number;
+};
+
+interface UpdateCategoryAmountDialogProps {
+  updating: Updating | undefined;
+  setUpdating: (v: Updating | undefined) => void;
+}
+export function UpdateCategoryAmountDialog({
+  updating,
+  setUpdating,
+}: UpdateCategoryAmountDialogProps) {
+  const category = updating?.category;
+  const every = updating?.every;
+
+  const refText = useRef("");
+  const [amountText, setAmountText] = useState("");
+
+  const z = useZero<Schema, Mutators>();
+
+  return (
+    <Dialog.Provider
+      visible={category != undefined}
+      close={() => setUpdating(undefined)}
+    >
+      <Dialog.Content>
+        <View style={{ width: 400 }}>
+          <View
+            style={{
+              borderBottomWidth: 1,
+              paddingTop: 12,
+              paddingLeft: 12,
+              paddingRight: 12,
+            }}
+          >
+            <TextInput
+              style={{
+                fontFamily: "mono",
+                // @ts-ignore
+                outline: "none",
+              }}
+              autoFocus
+              selectTextOnFocus
+              defaultValue={category?.month.toString()}
+              onChangeText={(t) => {
+                refText.current = t;
+                setAmountText(t);
+              }}
+              onKeyPress={(e) => {
+                if (!category) return;
+                if (e.nativeEvent.key == "Enter") {
+                  if (refText.current.trim() == "")
+                    return setUpdating(undefined);
+
+                  try {
+                    const parsed = parseFloat(refText.current);
+
+                    const amount = (function () {
+                      switch (every) {
+                        case "year":
+                          return parsed / 12;
+                        case "month":
+                          return parsed;
+                        case "week":
+                          return parsed * 4;
+                      }
+                    })();
+
+                    z.mutate.budget.updateCategory({
+                      id: category.id,
+                      amount,
+                      every,
+                    });
+                    setUpdating(undefined);
+                  } catch (e) {}
+                } else if (e.nativeEvent.key == "Escape") {
+                  setUpdating(undefined);
+                }
+              }}
+            />
+          </View>
+
+          <View
+            style={{ paddingLeft: 12, paddingRight: 12, paddingBottom: 12 }}
+          >
+            <Text style={{ fontFamily: "mono" }}>
+              → Update monthly amount to: {amountText || category?.month}
+            </Text>
+            <Text style={{ fontFamily: "mono" }}>→ Cancel</Text>
+          </View>
+        </View>
+      </Dialog.Content>
+    </Dialog.Provider>
+  );
+}

packages/ui/src/index.tsx

@@ -0,0 +1,102 @@
+import { createContext, use, type ReactNode } from "react";
+import { Transactions } from "./transactions";
+import { View } from "react-native";
+import { Settings } from "./settings";
+import type { AuthData } from "@money/shared/auth";
+import { Budget } from "./budget";
+import {
+  ShortcutProvider,
+  ShortcutDebug,
+  useShortcut,
+  type KeyName,
+} from "../lib/shortcuts";
+
+const PAGES = {
+  "/": {
+    screen: <Transactions />,
+    key: "1",
+  },
+  "/budget": {
+    screen: <Budget />,
+    key: "2",
+  },
+  "/settings": {
+    screen: <Settings />,
+    key: "3",
+    children: {
+      "/accounts": {},
+      "/family": {},
+    },
+  },
+} satisfies Record<
+  string,
+  { screen: ReactNode; key: KeyName; children?: Record<string, unknown> }
+>;
+
+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>;
+
+interface RouterContextType {
+  auth: AuthData | null;
+  route: Route;
+  setRoute: (route: Route) => void;
+}
+
+export const RouterContext = createContext<RouterContextType>({
+  auth: null,
+  route: "/",
+  setRoute: () => {},
+});
+
+type AppProps = {
+  auth: AuthData | null;
+  route: Route;
+  setRoute: (page: Route) => void;
+};
+
+export function App({ auth, route, setRoute }: AppProps) {
+  return (
+    <RouterContext.Provider value={{ auth, route, setRoute }}>
+      <ShortcutProvider>
+        <ShortcutDebug />
+        <Main />
+      </ShortcutProvider>
+    </RouterContext.Provider>
+  );
+}
+
+function Main() {
+  const { route, setRoute } = use(RouterContext);
+
+  for (const [route, page] of Object.entries(PAGES)) {
+    useShortcut(page.key, () => setRoute(route as 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 (
+    <View style={{ backgroundColor: "white", flex: 1 }}>
+      {PAGES[match].screen}
+    </View>
+  );
+}

packages/ui/src/settings.tsx

@@ -0,0 +1,82 @@
+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 { useShortcut } from "../lib/shortcuts";
+
+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);
+
+  useShortcut("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);
+  });
+  useShortcut("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);
+  });
+
+  return (
+    <View style={{ flexDirection: "row" }}>
+      <View style={{ padding: 10 }}>
+        {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,166 @@
+import { useQuery, useZero } from "@rocicorp/zero/react";
+import { queries, type Mutators, type Schema } from "@money/shared";
+import { use, useEffect, useState } from "react";
+import { RouterContext } from "..";
+import { View, Text, Linking } from "react-native";
+import { Button } from "../../components/Button";
+import * as Table from "../../components/Table";
+import * as Dialog from "../../components/Dialog";
+
+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));
+  const [deleting, setDeleting] = useState<typeof items>([]);
+  const [isAddOpen, setIsAddOpen] = useState(false);
+
+  const z = useZero<Schema, Mutators>();
+
+  const onDelete = () => {
+    if (!deleting) return;
+    const accountIds = deleting.map((account) => account.id);
+    z.mutate.link.deleteAccounts({ accountIds });
+    setDeleting([]);
+  };
+
+  const addAccount = () => {
+    setIsAddOpen(true);
+  };
+
+  return (
+    <>
+      <Dialog.Provider
+        visible={deleting.length > 0}
+        close={() => setDeleting([])}
+      >
+        <Dialog.Content>
+          <Text style={{ fontFamily: "mono" }}>Delete Account</Text>
+          <Text style={{ fontFamily: "mono" }}> </Text>
+          <Text style={{ fontFamily: "mono" }}>
+            You are about to delete the following accounts:
+          </Text>
+
+          <View>
+            {deleting.map((account) => (
+              <Text style={{ fontFamily: "mono" }}>- {account.name}</Text>
+            ))}
+          </View>
+
+          <Text style={{ fontFamily: "mono" }}> </Text>
+
+          <View style={{ flexDirection: "row" }}>
+            <Button
+              variant="secondary"
+              onPress={() => {
+                setDeleting([]);
+              }}
+              shortcut="n"
+            >
+              Cancel
+            </Button>
+
+            <Text style={{ fontFamily: "mono" }}> </Text>
+
+            <Button
+              variant="destructive"
+              onPress={() => {
+                onDelete();
+              }}
+              shortcut="y"
+            >
+              Delete
+            </Button>
+          </View>
+        </Dialog.Content>
+      </Dialog.Provider>
+
+      <Dialog.Provider visible={isAddOpen} close={() => setIsAddOpen(false)}>
+        <Dialog.Content>
+          <Text style={{ fontFamily: "mono" }}>Add Account</Text>
+          <AddAccount />
+        </Dialog.Content>
+      </Dialog.Provider>
+
+      <View style={{ padding: 10 }}>
+        <View style={{ alignSelf: "flex-start" }}>
+          <Button shortcut="a" onPress={addAccount}>
+            Add Account
+          </Button>
+        </View>
+
+        <Text style={{ fontFamily: "mono" }}> </Text>
+
+        <Table.Provider
+          columns={COLUMNS}
+          data={items}
+          onKey={(key, selected) => {
+            if (key.name == "d") {
+              setDeleting(selected);
+            }
+          }}
+        >
+          <Table.Body />
+        </Table.Provider>
+      </View>
+    </>
+  );
+}
+
+function AddAccount() {
+  const { auth } = use(RouterContext);
+  const [link, details] = useQuery(queries.getPlaidLink(auth));
+  const { close } = use(Dialog.Context);
+
+  const openLink = () => {
+    if (!link) return;
+    Linking.openURL(link.link);
+  };
+
+  const z = useZero<Schema, Mutators>();
+
+  useEffect(() => {
+    console.log(link, details);
+    if (details.type != "complete") return;
+    if (link != undefined) {
+      if (!link.completeAt) {
+        const timer = setInterval(() => {
+          console.log("Checking for link");
+          z.mutate.link.get({ link_token: link.token });
+        }, 1000 * 5);
+        return () => clearInterval(timer);
+      } else {
+        if (close) close();
+        return;
+      }
+    }
+    console.log("Creating new link");
+    z.mutate.link.create();
+  }, [link, details]);
+
+  return (
+    <>
+      <Button onPress={() => close && close()}>close</Button>
+      {link ? (
+        <>
+          <Text style={{ fontFamily: "mono" }}>
+            Please click the button to complete setup.
+          </Text>
+
+          <Button shortcut="return" onPress={openLink}>
+            Open Plaid
+          </Button>
+        </>
+      ) : (
+        <Text style={{ fontFamily: "mono" }}>Loading Plaid Link</Text>
+      )}
+    </>
+  );
+}

packages/ui/src/settings/family.tsx

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

packages/ui/src/transactions.tsx

@@ -0,0 +1,79 @@
+import * as Table from "../components/Table";
+import { useQuery, useZero } from "@rocicorp/zero/react";
+import {
+  queries,
+  type Mutators,
+  type Schema,
+  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));
+
+  const z = useZero<Schema, Mutators>();
+
+  return (
+    <Table.Provider
+      data={items}
+      columns={COLUMNS}
+      shortcuts={[{ key: "r", handler: () => z.mutate.link.sync() }]}
+    >
+      <View style={{ padding: 10, flex: 1 }}>
+        <View style={{ flexShrink: 0 }}>
+          <Table.Body />
+        </View>
+      </View>
+      <View style={{ flexShrink: 0 }}>
+        <Selected />
+      </View>
+    </Table.Provider>
+  );
+}
+
+function Selected() {
+  const { data, selectedIdx } = use(Table.Context);
+
+  if (selectedIdx.size == 0)
+    return (
+      <View style={{ backgroundColor: "#ddd" }}>
+        <Text style={{ fontFamily: "mono" }}>No items selected</Text>
+      </View>
+    );
+
+  const selected = data.filter((_, i) => selectedIdx.has(i)) 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/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext", "DOM"],
+    "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 +0,0 @@
-nodeLinker: hoisted
-packages:
-  - 'api'
-  - 'shared'