# innercontext — frontend

SvelteKit web UI for innercontext. Provides a browser interface for managing skincare products, routines, health data, and skin condition snapshots.

## Stack

- **Framework:** SvelteKit 2, Svelte 5 (Runes)
- **Language:** TypeScript
- **Styles:** Tailwind CSS v4
- **Components:** shadcn-svelte (bits-ui)
- **Adapter:** `@sveltejs/adapter-node` (required — uses `+page.server.ts` form actions)

## Development

```bash
# Install dependencies
pnpm install

# Start dev server (API proxied to localhost:8000)
pnpm dev
```

The backend must be running at `http://localhost:8000`. See `../backend/` for setup instructions.

## Environment variables

| Variable          | Description                     | Default                 |
| ----------------- | ------------------------------- | ----------------------- |
| `PUBLIC_API_BASE` | Base URL of the FastAPI backend | `http://localhost:8000` |

Set `PUBLIC_API_BASE` at **build time** for production:

```bash
PUBLIC_API_BASE=http://innercontext.lan/api pnpm build
```

## Building for production

```bash
pnpm build
# Output: build/
```

Run the production server:

```bash
node build/index.js
```

Or use the provided systemd service: `../systemd/innercontext-node.service`.

## Routes

| Route                 | Description              |
| --------------------- | ------------------------ |
| `/`                   | Dashboard                |
| `/products`           | Product list             |
| `/products/new`       | Add product              |
| `/products/[id]`      | Product detail / edit    |
| `/routines`           | Routine list             |
| `/routines/new`       | Create routine           |
| `/routines/[id]`      | Routine detail           |
| `/health/medications` | Medications              |
| `/health/lab-results` | Lab results              |
| `/skin`               | Skin condition snapshots |

## Key files

| File               | Purpose                           |
| ------------------ | --------------------------------- |
| `src/lib/api.ts`   | API client (typed fetch wrappers) |
| `src/lib/types.ts` | Shared TypeScript types           |
| `src/app.css`      | Tailwind v4 theme + global styles |
| `svelte.config.js` | SvelteKit config (adapter-node)   |