refactor: move to bun

feat: add plaid sync
feat: add scoped shortcuts
2025-12-26 13:53:42 -05:00 · 2025-12-15 12:53:35 -05:00 · 2025-12-12 18:44:18 -05:00 · 2025-12-06 23:02:28 -05:00 · 2025-12-05 17:05:23 -05:00 · 2025-11-24 23:05:34 -05:00
108 changed files with 7220 additions and 14189 deletions
--- a/.env.example
+++ b/.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
--- a/.gitignore
+++ b/.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
--- a/README.md
+++ b/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
+```sh
-
+git clone https://git.koon.us/max/money.git
-   ```bash
+direnv allow
-   npm install
+cp .env.example .env.dev
-   ```
+ln -s .env.dev .env
-
+vim .env.dev # Update with Plaid credentials
-2. Start the app
+pnpm install
-
+pnpm dev
   ```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
 ```
-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.
--- a/api/src/zero.ts
+++ b/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-18",
          });
          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 };
--- a/app/index.tsx
+++ b/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>
  );
 }
--- a/app/settings.tsx
+++ b/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>
  );
 }
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -8,7 +8,7 @@
  },
  "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",
--- a/apps/api/src/auth.ts
+++ b/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(),
  ],
 });
--- a/apps/api/src/db.ts
+++ b/apps/api/src/db.ts
--- a/apps/api/src/hono.ts
+++ b/apps/api/src/hono.ts
--- a/apps/api/src/index.ts
+++ b/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,6 +44,7 @@ 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(
--- a/apps/api/src/plaid.ts
+++ b/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);
--- a/apps/api/src/plaid/sync.ts
+++ b/apps/api/src/plaid/sync.ts
@@ -0,0 +1,3 @@
 async function sync() {}
 sync();
--- a/apps/api/src/plaid/tx.ts
+++ b/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),
  };
 }
--- a/apps/api/src/webhook.ts
+++ b/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");
 };
--- a/apps/api/src/zero.ts
+++ b/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 };
--- a/apps/api/tsconfig.json
+++ b/apps/api/tsconfig.json
--- a/apps/expo/.gitignore
+++ b/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
--- a/apps/expo/app.json
+++ b/apps/expo/app.json
@@ -38,7 +38,8 @@
          }
        }
      ],
-      "expo-sqlite"
+      "expo-sqlite",
      "expo-secure-store"
    ],
    "experiments": {
      "typedRoutes": true,
--- a/apps/expo/app/[...route].tsx
+++ b/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);
      }}
    />
  );
 }
--- a/apps/expo/app/_layout.tsx
+++ b/apps/expo/app/_layout.tsx
@@ -1,17 +1,23 @@
-import { Stack } from 'expo-router';
+import { Stack } from "expo-router";
-import 'react-native-reanimated';
+import "react-native-reanimated";
-import { authClient } from '@/lib/auth-client';
+import { authClient } from "@/lib/auth-client";
-import { ZeroProvider } from '@rocicorp/zero/react';
+import { ZeroProvider } from "@rocicorp/zero/react";
-import { useMemo } from 'react';
+import { useMemo } from "react";
-import { authDataSchema } from '@/shared/src/auth';
+import { authDataSchema } from "@money/shared/auth";
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
-import type { ZeroOptions } from '@rocicorp/zero';
+import type { ZeroOptions } from "@rocicorp/zero";
-import { schema, type Schema, createMutators, type Mutators } from '@/shared/src';
+import {
  schema,
  type Schema,
  createMutators,
  type Mutators,
  BASE_URL,
 } from "@money/shared";
 import { expoSQLiteStoreProvider } from "@rocicorp/zero/react-native";
 export const unstable_settings = {
-  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="[...route]" options={{ headerShown: false }} />
-          <Stack.Screen name="settings" options={{ headerShown: false }} />
+          <Stack.Screen name="approve" />
        </Stack.Protected>
        <Stack.Protected guard={!isPending && !session}>
          <Stack.Screen name="auth" />
--- a/apps/expo/app/approve.tsx
+++ b/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>;
 }
--- a/apps/expo/app/auth.tsx
+++ b/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>
-  )
+  );
 }
--- a/apps/expo/app/index.native.tsx
+++ b/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>
  );
 }
--- a/apps/expo/assets/images/android-icon-background.png
+++ b/apps/expo/assets/images/android-icon-background.png
--- a/apps/expo/assets/images/android-icon-foreground.png
+++ b/apps/expo/assets/images/android-icon-foreground.png
--- a/apps/expo/assets/images/android-icon-monochrome.png
+++ b/apps/expo/assets/images/android-icon-monochrome.png
--- a/apps/expo/assets/images/favicon.png
+++ b/apps/expo/assets/images/favicon.png
--- a/apps/expo/assets/images/icon.png
+++ b/apps/expo/assets/images/icon.png
--- a/apps/expo/assets/images/partial-react-logo.png
+++ b/apps/expo/assets/images/partial-react-logo.png
--- a/apps/expo/assets/images/react-logo.png
+++ b/apps/expo/assets/images/react-logo.png
--- a/apps/expo/assets/images/react-logo@2x.png
+++ b/apps/expo/assets/images/react-logo@2x.png
--- a/apps/expo/assets/images/react-logo@3x.png
+++ b/apps/expo/assets/images/react-logo@3x.png
--- a/apps/expo/assets/images/splash-icon.png
+++ b/apps/expo/assets/images/splash-icon.png
--- a/apps/expo/eslint.config.js
+++ b/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/*"],
  },
 ]);
--- a/apps/expo/lib/auth-client.ts
+++ b/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(),
  ],
 });
--- a/apps/expo/metro.config.js
+++ b/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");
--- a/apps/expo/package.json
+++ b/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
 }
--- a/apps/expo/tsconfig.json
+++ b/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"]
 }
--- a/apps/tui/.gitignore
+++ b/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
--- a/apps/tui/README.md
+++ b/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.
--- a/apps/tui/build.ts
+++ b/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");
--- a/apps/tui/lib/auth-client.ts
+++ b/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()],
 });
--- a/apps/tui/package.json
+++ b/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"
  }
 }
--- a/apps/tui/src/auth.ts
+++ b/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);
      }),
    ),
  );
 });
--- a/apps/tui/src/config.ts
+++ b/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",
 };
--- a/apps/tui/src/index.tsx
+++ b/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>,
 );
--- a/apps/tui/src/schema.ts
+++ b/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;
--- a/apps/tui/src/store.ts
+++ b/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);
  },
 };
--- a/apps/tui/tsconfig.json
+++ b/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
  }
 }
--- a/apps/tui/util/qr.ts
+++ b/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;
 }
--- a/biome.jsonc
+++ b/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
  }
 }
--- a/bun.lock
+++ b/bun.lock
--- a/eslint.config.js
+++ b/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/*'],
  },
 ]);
--- a/flake.nix
+++ b/flake.nix
@@ -19,9 +19,12 @@
        packages = with pkgs; [
          corepack
          nodejs_22
          bun
          biome
          postgresql
          process-compose
          cloudflared
        ];
      };
    });
--- a/package.json
+++ b/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": {
+  "scripts": {
-    "onlyBuiltDependencies": [
+    "dev": "process-compose up -p 0",
-      "@rocicorp/zero-sqlite3"
+    "tui": "bun --filter=@money/tui run build && bun --filter=@money/tui run start",
-    ],
+    "db:gen": "bun --filter=@money/shared db:gen",
-    "ignoredBuiltDependencies": [
+    "db:push": "bun --filter=@money/shared db:push"
-      "esbuild",
+  },
-      "protobufjs"
+  "workspaces": ["apps/*", "packages/*"],
-    ]
+  "trustedDependencies": [
-  }
+    "@rocicorp/zero-sqlite3",
    "protobufjs",
    "unrs-resolver"
  ]
 }
--- a/packages/react-native-opentui/index.tsx
+++ b/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,
 };
--- a/packages/react-native-opentui/package.json
+++ b/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": "*"
  }
 }
--- a/packages/react-native-opentui/tsconfig.json
+++ b/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
  }
 }
--- a/packages/shared/drizzle.config.ts
+++ b/packages/shared/drizzle.config.ts
--- a/packages/shared/package.json
+++ b/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"
  }
 }
--- a/packages/shared/src/auth.ts
+++ b/packages/shared/src/auth.ts
--- a/packages/shared/src/const.ts
+++ b/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}`;
--- a/packages/shared/src/db/client.ts
+++ b/packages/shared/src/db/client.ts
--- a/packages/shared/src/db/index.ts
+++ b/packages/shared/src/db/index.ts
--- a/packages/shared/src/db/schema/index.ts
+++ b/packages/shared/src/db/schema/index.ts
--- a/packages/shared/src/db/schema/private.ts
+++ b/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(),
+  deviceCode: text("device_code").notNull(),
-  token: text("token").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(),
 });
--- a/packages/shared/src/db/schema/public.ts
+++ b/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],
  }),
 }));
--- a/packages/shared/src/index.ts
+++ b/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";
--- a/packages/shared/src/mutators.ts
+++ b/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>;
--- a/packages/shared/src/queries.ts
+++ b/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");
    },
  ),
 };
--- a/packages/shared/src/schema.ts
+++ b/packages/shared/src/schema.ts
--- a/packages/shared/src/zero-schema.gen.ts
+++ b/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.
--- a/packages/shared/src/zql.ts
+++ b/packages/shared/src/zql.ts
--- a/packages/shared/tsconfig.json
+++ b/packages/shared/tsconfig.json
@@ -3,7 +3,7 @@
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
-    "declaration": true,
+    "declaration": false,
    "outDir": "./dist",
    "strict": true,
    "verbatimModuleSyntax": true,
--- a/packages/ui/components/Button.tsx
+++ b/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>
  );
 }
--- a/packages/ui/components/Dialog.tsx
+++ b/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>
  );
 }
--- a/packages/ui/components/List.tsx
+++ b/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>
  );
 }
--- a/packages/ui/components/Table.tsx
+++ b/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("")
  );
 }
--- a/packages/ui/lib/shortcuts/Debug.tsx
+++ b/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>
  );
 }
--- a/packages/ui/lib/shortcuts/Provider.tsx
+++ b/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;
 }
--- a/packages/ui/lib/shortcuts/Provider.web.tsx
+++ b/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;
 }
--- a/packages/ui/lib/shortcuts/hooks.ts
+++ b/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);
    };
  }, []);
 };
--- a/packages/ui/lib/shortcuts/index.ts
+++ b/packages/ui/lib/shortcuts/index.ts
@@ -0,0 +1,4 @@
 export * from "./Debug";
 export * from "./Provider";
 export * from "./hooks";
 export * from "./types";
--- a/packages/ui/lib/shortcuts/store.ts
+++ b/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;
  },
 };
--- a/packages/ui/lib/shortcuts/types.ts
+++ b/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;
 }
--- a/packages/ui/lib/shortcuts/util.ts
+++ b/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;
 }
--- a/packages/ui/package.json
+++ b/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"
 }
--- a/packages/ui/src/budget.tsx
+++ b/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>
    </>
  );
 }
--- a/packages/ui/src/budget/RenameCategoryDialog.tsx
+++ b/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>
  );
 }
--- a/packages/ui/src/budget/UpdateCategoryAmountDialog.tsx
+++ b/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>
  );
 }
--- a/packages/ui/src/index.tsx
+++ b/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>
  );
 }
--- a/packages/ui/src/settings.tsx
+++ b/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>
  );
 }
--- a/packages/ui/src/settings/accounts.tsx
+++ b/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>
      )}
    </>
  );
 }
--- a/packages/ui/src/settings/family.tsx
+++ b/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>;
 }
--- a/packages/ui/src/settings/general.tsx
+++ b/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>;
 }
--- a/packages/ui/src/transactions.tsx
+++ b/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>
  );
 }
--- a/packages/ui/tsconfig.json
+++ b/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
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +0,0 @@
 nodeLinker: hoisted
 packages:
  - 'api'
  - 'shared'
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Max Koon	b93c2e7e95	refactor: move to bun	2025-12-26 13:53:42 -05:00
Max Koon	105b0c514f	feat: add plaid sync	2025-12-15 12:53:35 -05:00
Max Koon	c6dd174376	feat: add scoped shortcuts	2025-12-12 18:44:18 -05:00
Max Koon	27f6e627d4	feat: budget crud actions	2025-12-06 23:02:28 -05:00
Max Koon	76f2a43bd0	refactor: better shortcut hook	2025-12-05 17:05:23 -05:00
Max Koon	2df7f2d924	feat: refresh transactions on table	2025-11-24 23:05:34 -05:00
Max Koon	6fd531d9c3	format: format with biome	2025-11-24 22:20:40 -05:00
Max Koon	01edded95a	feat: add biome config	2025-11-24 20:37:59 -05:00
Max Koon	046ad1555c	chore: add biome	2025-11-24 19:51:28 -05:00
Max Koon	284b8b6fc1	feat: prepare for webhooks	2025-11-22 12:56:48 -05:00
Max Koon	c4bb0d3304	fix: pg db timezone, dialog mount child when visible, show non expired link and more	2025-11-22 11:14:29 -05:00
Max Koon	0edbf53db3	feat: dialog box	2025-11-20 23:39:45 -05:00
Max Koon	882d437007	refactor: fix table and clean up auth code	2025-11-20 11:53:31 -05:00
Max Koon	b42da83274	chore: clean up	2025-11-18 13:29:10 -05:00
Max Koon	801bb1c194	feat(tui): reject expired token	2025-11-18 13:21:56 -05:00
Max Koon	92c3dc4a85	chore(tui): clean up comments	2025-11-18 12:56:33 -05:00
Max Koon	667f920cd2	feat(tui): add zero kvstore	2025-11-18 12:55:31 -05:00
Max Koon	f17daa2c78	refactor: replace device auth flow with effect	2025-11-17 17:17:54 -05:00
Max Koon	9e11455db1	feat: add auth to tui	2025-11-17 10:08:10 -05:00
Max Koon	114eaf88eb	feat: add auth to context	2025-11-15 22:08:58 -05:00
Max Koon	641dc25bee	feat: pages	2025-11-15 18:49:17 -05:00
Max Koon	9834b9518b	feat: add table	2025-11-14 23:06:12 -05:00
Max Koon	5b14b4e7a4	feat: add tui app	2025-11-14 13:26:15 -05:00
Max Koon	058f2bb94f	refactor: move into monorepo	2025-11-08 13:37:55 -05:00
Max Koon	63670ff3b0	feat: add ui	2025-10-27 06:49:21 -04:00
Max Koon	b428ce172d	feat: replace IP with tailscale url	2025-10-23 16:19:00 -04:00
Max Koon	92a2057179	chore: better env management and readme	2025-10-22 08:22:48 -04:00
Max Koon	0f958feb8d	fix: settings screen	2025-10-20 21:49:08 -04:00
Max Koon	acfe62eb37	fix: cookie stuff	2025-10-20 16:53:01 -04:00
Max Koon	213c819cfd	debug: add print	2025-10-20 16:44:39 -04:00
Max Koon	d8e5e8e522	feat: add prod url	2025-10-20 16:27:34 -04:00
Max Koon	9aad5a7e4e	feat: add money url	2025-10-20 16:11:22 -04:00
Max Koon	3ea28db9ac	feat: cors	2025-10-20 15:33:26 -04:00
Max Koon	1b841c7d32	feat: enable cors	2025-10-20 15:21:54 -04:00
Max Koon	b0ebc98d42	feat: disable cors	2025-10-20 15:19:59 -04:00
		`@@ -0,0 +1,2 @@`
							`export const HOST = process.env.EXPO_PUBLIC_TAILSCALE_MACHINE \|\| "localhost";`
							export const BASE_URL = `http://${HOST}`;