@agent-native/core 0.4.1 → 0.4.3

package/src/templates/default/.agents/skills/scripts/SKILL.md

@@ -21,8 +21,9 @@ Scripts give the agent callable tools with structured input/output. They keep th
 Create `scripts/my-script.ts`:
 
 ```ts
-import fs from "fs";
 import { parseArgs, loadEnv, fail, agentChat } from "@agent-native/core";
+import { readSetting, writeSetting } from "@agent-native/core/settings";
+import { readAppState, writeAppState } from "@agent-native/core/application-state";
 
 export default async function myScript(args: string[]) {
   loadEnv();
@@ -31,19 +32,21 @@ export default async function myScript(args: string[]) {
   const input = parsed.input;
   if (!input) fail("--input is required");
 
-  const outputPath = parsed.output ?? "data/result.json";
-  const raw = fs.readFileSync(input, "utf-8");
-  const data = JSON.parse(raw) as unknown;
+  // Read/write settings (persistent config)
+  const settings = await readSetting("my-settings");
+  await writeSetting("my-settings", { ...settings, lastRun: new Date().toISOString() });
+
+  // Read/write app state (ephemeral UI state)
+  await writeAppState("processing-status", { status: "done", input });
 
-  fs.writeFileSync(outputPath, JSON.stringify(data, null, 2));
-  agentChat.submit(`Processed ${input}, result saved to ${outputPath}`);
+  agentChat.submit(`Processed ${input}`);
 }
 ```
 
 ## How to Run
 
 ```bash
-pnpm script my-script --input data/source.json --output data/result.json
+pnpm script my-script --input some-value
 ```
 
 ## Script Dispatcher
@@ -63,7 +66,7 @@ This is the canonical approach for new apps. Script names must be lowercase with
 - **Use `parseArgs()`** for structured argument parsing. It converts `--key value` pairs to a `Record<string, string>`.
 - **Use `loadEnv()`** if the script needs environment variables (API keys, etc.).
 - **Use `fail()`** for user-friendly error messages (exits with message, no stack trace).
-- **Write results to files.** The agent and UI will pick them up via the file watcher.
+- **Write results to the database.** Use `writeSetting()` or `writeAppState()` for structured data. The UI will pick up changes via SSE.
 - **Use `agentChat.submit()`** to report results or errors back to the agent chat.
 - **Import from `@agent-native/core`** — Don't redefine `parseArgs()` or other utilities locally.
 
@@ -91,17 +94,17 @@ export default async function generateImage(args: string[]) {
 **Data processing script:**
 
 ```ts
-import fs from "fs";
 import { parseArgs, fail } from "@agent-native/core";
+import { readSetting, writeSetting } from "@agent-native/core/settings";
 
 export default async function transform(args: string[]) {
   const parsed = parseArgs(args);
-  const source = parsed.source;
-  if (!source) fail("--source is required");
+  const key = parsed.key;
+  if (!key) fail("--key is required");
 
-  const data = JSON.parse(fs.readFileSync(source, "utf-8")) as unknown[];
-  const result = data.map(transformItem);
-  fs.writeFileSync(source, JSON.stringify(result, null, 2));
+  const data = await readSetting(key);
+  const result = processData(data);
+  await writeSetting(key, result);
 }
 ```
 
@@ -109,10 +112,10 @@ export default async function transform(args: string[]) {
 
 - **Script not found** — Check that the filename matches the command name exactly. `pnpm script foo-bar` looks for `scripts/foo-bar.ts`.
 - **Args not parsing** — Ensure args use `--key value` or `--key=value` format. Boolean flags use `--flag` (sets value to `"true"`).
-- **Script runs but UI doesn't update** — Make sure results are written to a path under `data/` that the file watcher monitors.
+- **Script runs but UI doesn't update** — Make sure you're using core store helpers (`writeSetting`, `writeAppState`) which emit SSE events automatically. Direct SQL writes don't emit events.
 
 ## Related Skills
 
-- **files-as-database** — Scripts read/write data files in `data/`
+- **storing-data** — Scripts read/write data via core SQL stores and Drizzle ORM
 - **delegate-to-agent** — The agent invokes scripts via `pnpm script <name>`
-- **sse-file-watcher** — File writes from scripts trigger SSE events to update the UI
+- **real-time-sync** — Database writes from scripts trigger SSE events to update the UI

package/src/templates/default/.agents/skills/self-modifying-code/SKILL.md

@@ -73,7 +73,7 @@ el.dataset.selectedId = selectedItem?.id || "";
 
 ## Related Skills
 
-- **files-as-database** — Tier 1 modifications (data files) are the safest and most common
+- **storing-data** — Tier 1 modifications (database writes) are the safest and most common
 - **scripts** — The agent can create or modify scripts to add new capabilities
 - **delegate-to-agent** — Self-modification requests come through the agent chat
-- **sse-file-watcher** — Source and data file edits trigger SSE events to update the UI
+- **real-time-sync** — Source edits and database writes trigger SSE events to update the UI

package/src/templates/default/.agents/skills/sse-file-watcher/SKILL.md

@@ -1,95 +1,80 @@
 ---
-name: sse-file-watcher
+name: real-time-sync
 description: >-
-  How to keep the UI in sync with agent changes via Server-Sent Events. Use
-  when setting up real-time file sync, adding SSE to a new data directory,
-  wiring query invalidation for new data models, or debugging UI not updating.
+  How the UI stays in sync when the agent writes data. Use when wiring up
+  query invalidation, debugging UI not updating, or understanding how SSE
+  connects the agent to the browser.
 ---
 
-# SSE File Watcher
-
-## Rule
-
-The UI stays in sync with agent changes through Server-Sent Events. When the agent writes a file, the UI updates automatically — no polling, no manual refresh.
-
-## Why
-
-The agent modifies files on disk, but the UI runs in the browser. SSE bridges this gap: a file watcher on the server detects changes, streams them to the browser, and React Query invalidates the relevant caches. This is what makes the "files as database" pattern feel real-time.
+# Real-Time Sync
 
 ## How It Works
 
-1. **Server** watches the data directory with chokidar:
+When the agent writes data (via scripts or server handlers), the UI updates instantly. No polling, no manual refresh.
 
-   ```ts
-   import { createFileWatcher, createSSEHandler } from "@agent-native/core";
-   const watcher = createFileWatcher("./data");
-   app.get("/api/events", createSSEHandler(watcher));
-   ```
+The flow:
 
-2. **Client** listens for changes and invalidates React Query caches:
+1. **Agent writes** → `writeAppState("navigate", { view: "starred" })`
+2. **Store emits SSE event** → `{ source: "app-state", type: "change", key: "navigate" }`
+3. **Browser receives** → `useFileWatcher()` hook gets the event
+4. **React Query invalidates** → relevant queries refetch, UI re-renders
 
-   ```ts
-   import { useFileWatcher } from "@agent-native/core";
-   useFileWatcher({ queryClient, queryKeys: ["files", "projects"] });
-   ```
+This happens automatically for all writes through `@agent-native/core/application-state` and `@agent-native/core/settings`.
 
-3. When the agent writes to `data/`, chokidar detects it, SSE pushes the event, and React Query refetches the affected queries.
+## SSE Events
 
-## Don't
+| Source | Emitted by | Example |
+|--------|-----------|---------|
+| `"app-state"` | `writeAppState`, `deleteAppState` | `{ source: "app-state", type: "change", key: "navigation" }` |
+| `"settings"` | `putSetting`, `deleteSetting` | `{ source: "settings", type: "change", key: "mail-settings" }` |
 
-- Don't poll for changes — SSE handles it
-- Don't create per-model `fs.watch()` instances — `createFileWatcher("./data")` watches recursively. One watcher is enough.
-- Don't create your own EventSource connections alongside `useFileWatcher` — use the `onEvent` callback for custom handling
+## Client Setup
 
-## Query Key Mapping
+Every template has an SSE endpoint and a `useFileWatcher` hook in `root.tsx`:
 
-By default, `useFileWatcher` invalidates all listed query keys on every file change. For apps with multiple data models, this causes unnecessary refetches. Use path-based filtering via the `onEvent` callback:
+```ts
+// server/routes/api/events.get.ts
+import { createDefaultSSEHandler } from "@agent-native/core/server";
+export default createDefaultSSEHandler();
+```
 
 ```ts
+// In root.tsx
 useFileWatcher({
-  queryClient,
-  queryKeys: [], // don't auto-invalidate everything
+  queryClient: qc,
+  queryKeys: [],
   onEvent: (data) => {
-    if (data.path?.includes("projects")) {
-      queryClient.invalidateQueries({ queryKey: ["projects"] });
-    } else if (data.path?.includes("settings")) {
-      queryClient.invalidateQueries({ queryKey: ["settings"] });
+    if (data.source === "app-state") {
+      // Invalidate queries affected by app state changes
+      qc.invalidateQueries({ queryKey: ["compose-drafts"] });
+    } else if (data.source === "settings") {
+      qc.invalidateQueries({ queryKey: ["settings"] });
     }
   },
 });
 ```
 
-To prevent cache thrashing during rapid agent writes, set `staleTime` on your queries:
+Use the `key` field to selectively invalidate — don't invalidate everything on every event.
 
-```ts
-useQuery({
-  queryKey: ["projects"],
-  queryFn: fetchProjects,
-  staleTime: 2000, // don't refetch within 2 seconds
-});
-```
-
-## Performance
+## For Custom Domain Data
 
-When the agent writes many files rapidly (e.g., during self-modification), each write fires a chokidar event → SSE broadcast → React Query invalidation. This can cause excessive refetching.
+If your template has Drizzle tables and you want SSE notifications after writes, emit from your handler:
 
-Mitigations:
+```ts
+import { getAppStateEmitter } from "@agent-native/core/application-state";
 
-- Use `staleTime: 2000` on React Query to debounce refetches
-- Use path-based filtering (see Query Key Mapping) to limit which queries invalidate
+// After inserting a booking:
+getAppStateEmitter().emit("app-state", {
+  source: "app-state",
+  type: "change",
+  key: "bookings-updated",
+});
+```
 
 ## Troubleshooting
 
-| Symptom                            | Check                                                                                                           |
-| ---------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| UI not updating after agent writes | Is `useFileWatcher` called with the correct `queryClient`? Are the `queryKeys` matching your `useQuery` keys?   |
-| SSE not firing                     | Open browser devtools → Network tab → filter by EventStream. Is `/api/events` connected? Is the server running? |
-| Watcher not detecting changes      | Is the path correct? `createFileWatcher("./data")` is relative to CWD. Check the server's working directory.    |
-| Constant reconnections             | Check for server crashes in terminal output.                                                                    |
-| High CPU / event storms            | The agent is writing many files rapidly. Add `staleTime` to queries and use path-based filtering.               |
-
-## Related Skills
-
-- **files-as-database** — SSE watches the data files that store application state
-- **scripts** — Script outputs written to `data/` trigger SSE events
-- **self-modifying-code** — Agent code edits trigger SSE events; rapid edits can cause event storms
+| Symptom | Check |
+|---------|-------|
+| UI not updating after script writes | Is the script using `writeAppState`/`writeSetting`? Direct SQL writes don't emit SSE. |
+| SSE not connected | Browser devtools → Network → EventStream. Is `/api/events` connected? |
+| Wrong queries invalidating | Check the `onEvent` callback — filter by `data.source` and `data.key` |

package/src/templates/default/AGENTS.md

@@ -2,38 +2,56 @@
 
 ## Architecture
 
-This is an **@agent-native/core** application — the AI agent and UI share state through files, not a traditional database.
+This is an **@agent-native/core** application — the AI agent and UI share state through a SQL database, with SSE for real-time sync.
 
 ### Core Principles
 
-1. **Files as database** — All app state lives in files. Both UI and agent read/write the same files.
+1. **Shared SQL database** — All app state lives in SQL (SQLite locally, cloud DB via `DATABASE_URL` in production). Core stores: `application_state`, `settings`, `oauth_tokens`, `sessions`.
 2. **All AI through agent chat** — No inline LLM calls. UI delegates to the AI via `sendToAgentChat()` / `agentChat.submit()`.
 3. **Scripts for agent operations** — `pnpm script <name>` dispatches to callable script files in `scripts/`.
-4. **Bidirectional SSE events** — The file watcher keeps the UI in sync when the agent modifies files.
+4. **SSE for real-time sync** — Database writes emit events that keep the UI in sync automatically.
 5. **Agent can update code** — The agent can modify this app's source code directly.
 
-### Directory Structure
-
-```
-client/          # React frontend (Vite SPA)
-  App.tsx        # Entry point
-  components/    # UI components
-  hooks/         # React hooks
-  lib/           # Utilities (cn, etc)
+### Authentication
 
-server/          # Express backend
-  index.ts       # createAppServer() — routes + middleware
-  node-build.ts  # Production entry point
+Auth is automatic and environment-driven. The `server/plugins/auth.ts` plugin calls `autoMountAuth(app)` at startup.
 
-shared/          # Isomorphic code (imported by both client & server)
+- **Dev mode**: Auth is bypassed. `getSession()` returns `{ email: "local@localhost" }`. Zero friction.
+- **Production** (`ACCESS_TOKEN` set): Auth middleware auto-mounts. Login page for unauthenticated visitors.
+- **Production** (no token, no `AUTH_DISABLED=true`): Server refuses to start.
 
-scripts/         # Agent-callable scripts
-  run.ts         # Script dispatcher
-  *.ts           # Individual scripts (pnpm script <name>)
+Use `getSession(event)` server-side and `useSession()` client-side. See [docs/auth.md](docs/auth.md).
 
-data/            # App data files (watched by SSE)
+### Directory Structure
 
-.agents/skills/  # Agent skills — detailed guidance for each rule
+```
+app/                   # React frontend
+  root.tsx             # HTML shell + global providers
+  entry.client.tsx     # Client hydration entry
+  routes.ts            # Route config — flatRoutes()
+  routes/              # File-based page routes (auto-discovered)
+    _index.tsx         # / (home page)
+  components/          # UI components
+  hooks/               # React hooks
+  lib/                 # Utilities (cn, etc)
+
+server/                # Nitro API server
+  routes/
+    api/               # File-based API routes (auto-discovered)
+    [...page].get.ts   # SSR catch-all (delegates to React Router)
+  plugins/             # Server plugins (startup logic)
+  lib/                 # Shared server modules
+
+shared/                # Isomorphic code (imported by both client & server)
+
+scripts/               # Agent-callable scripts
+  run.ts               # Script dispatcher
+  *.ts                 # Individual scripts (pnpm script <name>)
+
+data/                  # App data (SQLite DB file)
+
+react-router.config.ts # React Router framework config
+.agents/skills/        # Agent skills — detailed guidance for each rule
 ```
 
 ## Learnings & Preferences
@@ -55,19 +73,89 @@ Skills in `.agents/skills/` provide detailed guidance for each architectural rul
 
 | Skill                 | When to read                                                   |
 | --------------------- | -------------------------------------------------------------- |
-| `files-as-database`   | Before storing or reading any app state                        |
+| `storing-data`        | Before storing or reading any app state                        |
 | `delegate-to-agent`   | Before adding LLM calls or AI delegation                       |
 | `scripts`             | Before creating or modifying scripts                           |
-| `sse-file-watcher`    | Before wiring up real-time UI sync                             |
+| `real-time-sync`      | Before wiring up real-time UI sync                             |
 | `self-modifying-code` | Before editing source, components, or styles                   |
 | `frontend-design`     | Before building or restyling any UI component, page, or layout |
 
 The **`frontend-design`** skill (sourced from [Anthropic's skills library](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)) enforces distinctive, production-grade aesthetics — committing to a clear visual direction and avoiding generic patterns like purple gradients, overused fonts, and cookie-cutter layouts.
 
+### Framework Basics
+
+**SSR-first framework, CSR-by-default content:** This app uses React Router v7 framework mode with `ssr: true`. But virtually every route renders only an SSR shell (loading spinner + meta tags). All real data fetching and rendering happens on the client via React Query hooks. Server-side data fetching is the exception — only used for public pages that need SEO/og tags.
+
+**Adding a page:**
+Create a file in `app/routes/`. The filename determines the URL path:
+
+```
+app/routes/_index.tsx              → /
+app/routes/settings.tsx            → /settings
+app/routes/inbox.tsx               → /inbox
+app/routes/inbox.$threadId.tsx     → /inbox/:threadId
+app/routes/$id.tsx                 → /:id (dynamic param)
+```
+
+Each route file exports a default component, optional `meta()`, and optional `HydrateFallback()`:
+
+```tsx
+import MyPage from "@/pages/MyPage";
+
+export function meta() {
+  return [{ title: "My Page" }];
+}
+
+export function HydrateFallback() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground" />
+    </div>
+  );
+}
+
+export default function MyPageRoute() {
+  return <MyPage />;
+}
+```
+
+**Do NOT fetch data server-side** in route loaders unless the page genuinely needs SEO content or og tags based on dynamic data. The standard pattern is: SSR renders a loading spinner, client hydrates, React Query hooks fetch from `/api/*`.
+
 ### Key Patterns
 
 **Adding an API route:**
-Edit `server/index.ts`, add your route to `createAppServer()`.
+Create a file in `server/routes/api/`. The filename determines the URL path and HTTP method:
+
+```
+server/routes/api/items/index.get.ts    → GET  /api/items
+server/routes/api/items/[id].get.ts     → GET  /api/items/:id
+server/routes/api/items/[id].patch.ts   → PATCH /api/items/:id
+```
+
+Each file exports a default `defineEventHandler`.
+
+**Adding a server plugin:**
+Startup logic (auth, SSE, etc.) lives in `server/plugins/`. Use `defineNitroPlugin` from core:
+
+```ts
+import { defineNitroPlugin } from "@agent-native/core";
+
+export default defineNitroPlugin(async (nitroApp) => {
+  // Runs once at server startup
+});
+```
+
+**Key imports from `@agent-native/core`:**
+
+| Import                                       | Purpose                                                                    |
+| -------------------------------------------- | -------------------------------------------------------------------------- |
+| `defineNitroPlugin`                          | Define a server plugin (re-exported from Nitro)                            |
+| `createDefaultSSEHandler`                    | Create SSE endpoint for DB change events (server)                          |
+| `readAppState`, `writeAppState`              | Read/write application state (from `@agent-native/core/application-state`) |
+| `readSetting`, `writeSetting`                | Read/write settings (from `@agent-native/core/settings`)                   |
+| `defineEventHandler`, `readBody`, `getQuery` | H3 route handler utilities (re-exported)                                   |
+| `sendToAgentChat`                            | Send messages to agent from UI (client-side)                               |
+| `agentChat`                                  | Send messages to agent from scripts (server-side)                          |
 
 **Adding a script:**
 Create `scripts/my-script.ts` exporting `default async function(args: string[])`.
@@ -91,11 +179,24 @@ import { agentChat } from "@agent-native/core";
 agentChat.submit("Generate something");
 ```
 
+### Database (Cloud Deployment)
+
+By default, data is stored in SQLite at `data/app.db`. For production/cloud deployment, set `DATABASE_URL` to point to a remote database (Turso, Neon, Supabase, D1).
+
+**Environment variables:**
+
+| Variable              | Required         | Description                                                |
+| --------------------- | ---------------- | ---------------------------------------------------------- |
+| `DATABASE_URL`        | No (has default) | Database connection string (default: `file:./data/app.db`) |
+| `DATABASE_AUTH_TOKEN` | For remote DBs   | Auth token for Turso or other remote databases             |
+
 ### Tech Stack
 
-- **Framework:** @agent-native/core
+- **Framework:** @agent-native/core + React Router v7 (framework mode)
 - **Frontend:** React 18, Vite, TailwindCSS, shadcn/ui
-- **Backend:** Express 5
-- **State:** File-based (SSE for real-time updates)
-- **Build:** `pnpm build` (client SPA + server bundle)
-- **Dev:** `pnpm dev` (Vite dev server with Express middleware)
+- **Routing:** File-based via `flatRoutes()` — SSR shell + client rendering
+- **Backend:** Nitro (via @agent-native/core) — file-based API routing, server plugins, deploy-anywhere presets
+- **State:** SQL-backed (SSE for real-time updates)
+- **Build:** `pnpm build` (React Router build — client + SSR + Nitro server)
+- **Dev:** `pnpm dev` (Vite dev server with both React Router + Nitro plugins)
+- **Start:** `node .output/server/index.mjs` (production)

package/src/templates/default/_gitignore

@@ -1,4 +1,7 @@
-# Logs
+# React Router generated types
+.react-router/
+
+# Logs
 logs
 *.log
 npm-debug.log*
@@ -25,9 +28,10 @@ dist-ssr
 .env.*
 !.env.example
 
-# Data
-data/uploads/
-data/settings.json
+# Data
+data/uploads/
+data/settings.json
+data/.sessions.json
 
 # Learnings (personal preferences and memory — use learnings.defaults.md for tracked defaults)
-learnings.md
+learnings.md

package/src/templates/default/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+hydrateRoot(document, <HydratedRouter />);

package/src/templates/default/app/entry.server.tsx

@@ -0,0 +1,55 @@
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
+import ReactDOMServer from "react-dom/server.browser";
+const { renderToReadableStream } = ReactDOMServer;
+import { isbot } from "isbot";
+
+export const streamTimeout = 5_000;
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext,
+) {
+  if (request.method.toUpperCase() === "HEAD") {
+    return new Response(null, {
+      status: responseStatusCode,
+      headers: responseHeaders,
+    });
+  }
+
+  const userAgent = request.headers.get("user-agent");
+  const waitForAll = (userAgent && isbot(userAgent)) || routerContext.isSpaMode;
+
+  const abortController = new AbortController();
+  const timeoutId = setTimeout(() => abortController.abort(), streamTimeout);
+
+  try {
+    const body = await renderToReadableStream(
+      <ServerRouter context={routerContext} url={request.url} />,
+      {
+        signal: abortController.signal,
+        onError(error: unknown) {
+          if (!abortController.signal.aborted) {
+            responseStatusCode = 500;
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    if (waitForAll) {
+      await body.allReady;
+    }
+
+    responseHeaders.set("Content-Type", "text/html");
+    return new Response(body, {
+      headers: responseHeaders,
+      status: responseStatusCode,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

package/src/templates/default/app/global.css

@@ -0,0 +1,95 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 220 10% 10%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 10% 10%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220 10% 10%;
+    --primary: 220 10% 15%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 220 10% 95%;
+    --secondary-foreground: 220 10% 15%;
+    --muted: 220 10% 95%;
+    --muted-foreground: 220 5% 45%;
+    --accent: 220 10% 95%;
+    --accent-foreground: 220 10% 15%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 220 10% 90%;
+    --input: 220 10% 90%;
+    --ring: 220 10% 40%;
+    --radius: 0.5rem;
+    --sidebar-background: 220 10% 97%;
+    --sidebar-foreground: 220 5% 45%;
+    --sidebar-primary: 220 10% 15%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 220 10% 95%;
+    --sidebar-accent-foreground: 220 10% 15%;
+    --sidebar-border: 220 10% 90%;
+    --sidebar-ring: 220 10% 40%;
+  }
+
+  .dark {
+    --background: 220 6% 6%;
+    --foreground: 0 0% 90%;
+    --card: 220 5% 6%;
+    --card-foreground: 0 0% 90%;
+    --popover: 220 5% 6%;
+    --popover-foreground: 0 0% 90%;
+    --primary: 0 0% 75%;
+    --primary-foreground: 220 6% 6%;
+    --secondary: 220 4% 12%;
+    --secondary-foreground: 0 0% 90%;
+    --muted: 220 4% 10%;
+    --muted-foreground: 220 4% 50%;
+    --accent: 220 4% 13%;
+    --accent-foreground: 0 0% 90%;
+    --destructive: 0 63% 51%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 220 4% 14%;
+    --input: 220 4% 14%;
+    --ring: 0 0% 60%;
+    --radius: 0.5rem;
+    --sidebar-background: 220 6% 4%;
+    --sidebar-foreground: 220 4% 50%;
+    --sidebar-primary: 0 0% 75%;
+    --sidebar-primary-foreground: 220 6% 6%;
+    --sidebar-accent: 220 4% 10%;
+    --sidebar-accent-foreground: 0 0% 90%;
+    --sidebar-border: 220 4% 10%;
+    --sidebar-ring: 0 0% 60%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: "Inter", sans-serif;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.4);
+}