feat: canonical custom field types, validation, and type-aware querying

- Unify field types across all layers: Text, Textarea, SelectOne, SelectMultiple, Date, DateTime, Number
- Add CustomFieldValidationConfig with type-specific Zod schemas
- Add validateCustomFieldValue() dispatching per-type validation
- Add validation_config (JSONB) and default_value columns to custom_fields
- Replace ad-hoc date/datetime/pattern checks with centralized validator
- Type-aware cf.* query operators: gt:, gte:, lt:, lte:, before:, after:, contains:
- Type-aware admin builder UI with inline option editor, min/max, date ranges, constraints
- Type-aware ticket detail rendering: Number inputs, Textarea, SelectMultiple checkbox groups
- Backward compatible: legacy type names mapped to canonical; old pattern field still checked
- Update seed data to canonical PascalCase types
- Migration 0018: add validation_config and default_value to custom_fields

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.env.example

@@ -1,3 +1,3 @@
-DATABASE_URL=postgres://tessera:password@localhost:5432/tessera
+DATABASE_URL=postgres://tessera:tessera@127.0.0.1:5435/tessera
 SERVER_HOST=127.0.0.1
 SERVER_PORT=9876

.gitignore

@@ -33,3 +33,9 @@ bun.lock
 
 # Finder (MacOS) folder config
 .DS_Store
+
+# Codegraph index (MCP tool)
+.codegraph
+
+# Runtime data
+/data

CLAUDE.md

@@ -14,8 +14,10 @@ tessera/
 │   ├── models/             # TypeScript types + Zod schemas
 │   ├── scrip/              # Scrip engine (prepare/commit two-phase)
 │   └── lifecycle/          # State machine validator
-├── web/                    # Frontend: Next.js 15 + shadcn/ui
-│   └── src/app/            # App Router pages
+├── web/                    # Frontend: Next.js 16 + shadcn/ui
+│   ├── src/app/            # App Router pages
+│   ├── src/components/     # Reusable components + widgets
+│   └── src/lib/            # API client + types + utils
 ├── drizzle/                # SQL migration files
 └── docs/                   # Architecture + design specs
 ```
@@ -24,9 +26,9 @@ tessera/
 
 **Backend:** Bun runtime, Hono web framework, Drizzle ORM, PostgreSQL 17, Zod validation, Handlebars templates, nodemailer
 
-**Frontend:** Next.js 15 App Router, shadcn/ui (Tailwind CSS), next-themes (light/dark), React Hook Form + Zod, TanStack Table, date-fns, lucide-react icons
+**Frontend:** Next.js 16 App Router (Turbopack), shadcn/ui (Tailwind CSS), next-themes, date-fns, lucide-react icons
 
-**Fonts:** Inter (variable, with cv01+ss03 OpenType features), JetBrains Mono
+**Fonts:** Inter (variable), JetBrains Mono
 
 ## Running Locally
 
@@ -34,48 +36,52 @@ tessera/
 - Bun (`nix-shell -p bun` or install globally)
 - Node.js 22+ (`nix-shell -p nodejs_22`)
 - Docker (for PostgreSQL)
-- PostgreSQL container: `docker run -d --name tessera-db -e POSTGRES_USER=tessera -e POSTGRES_PASSWORD=*** -e POSTGRES_DB=tessera -p 127.0.0.1:5433:5432 postgres:17-alpine`
+- PostgreSQL container: `docker run -d --name tessera-db -e POSTGRES_USER=tessera -e POSTGRES_PASSWORD=tessera -e POSTGRES_DB=tessera -p 127.0.0.1:5435:5432 postgres:17-alpine`
 
 ### Start backend
 ```bash
 cd ~/projects/tessera
-cp .env.example .env   # Edit DATABASE_URL to point to postgres://tessera:***@127.0.0.1:5433/tessera
-bun run src/index.ts   # Starts on port 9876
+cp .env.example .env
+npm run dev:backend   # Starts API on port 9876
 ```
 
 ### Run migrations
 ```bash
-bun run src/db/migrate.ts
+npm run db:migrate
+npm run db:seed         # Demo data
+npm run db:seed:reset   # Reset + re-seed
 ```
 
 ### Start frontend
 ```bash
 cd web
-npm install        # Use npm, NOT bun (bun has compatibility issues with Next.js dev server)
-npx next build     # Production build
-npx next start --port 5173   # Production server
+npm install             # Use npm, NOT bun
+bun run dev             # Dev server on 127.0.0.1:3100 (HMR)
 ```
 
-**Note:** `bun run dev` (Turbopack) has WebSocket HMR issues in this environment. Use production mode only.
-
 ## API Endpoints
 
-All endpoints are served by the backend on port 9876. The frontend proxies `/api/*` to the backend via `next.config.ts`.
+All endpoints on port 9876. Frontend proxies `/api/*` via `next.config.ts`.
 
 | Method | Path | Description |
 |--------|------|-------------|
 | GET | /health | Health check |
-| GET | /tickets | List tickets (?queue_id=&status=) |
+| GET | /tickets | List tickets (?queue_id=&status=&owner_id=&team_id=&q=&limit=&cf.*=) |
 | POST | /tickets | Create ticket |
 | GET | /tickets/:id | Get ticket with custom fields |
-| PATCH | /tickets/:id | Update ticket (validates lifecycle, runs scrips) |
+| PATCH | /tickets/:id | Update ticket (validates lifecycle, runs scrips, returns scrip_results) |
 | POST | /tickets/:id/preview | Dry-run scrips for status change |
 | POST | /tickets/:id/comment | Add comment to ticket |
 | GET | /tickets/:id/transactions | List ticket transactions |
-| GET/POST | /queues | List/create queues |
-| GET/POST/PATCH | /scrips | CRUD scrips |
-| GET/POST | /custom-fields | List/create custom fields |
-| GET/POST | /lifecycles | List/create lifecycles |
+| GET/POST/PATCH | /queues | CRUD queues |
+| GET/POST/PATCH/DELETE | /scrips | CRUD scrips |
+| GET/POST/PATCH | /custom-fields | CRUD custom fields |
+| GET/POST/PATCH | /lifecycles | CRUD lifecycles |
+| GET/POST/PATCH/DELETE | /users | CRUD users |
+| GET/POST/PATCH/DELETE | /templates | CRUD templates + POST /preview |
+| GET/POST/PATCH/DELETE | /views | CRUD saved views |
+| GET/POST/PATCH/DELETE | /teams | CRUD teams + POST/DELETE members |
+| GET/POST/PATCH/DELETE | /dashboards | CRUD dashboards + widgets + widget data |
 
 ## Key Design Decisions
 
@@ -83,32 +89,22 @@ All endpoints are served by the backend on port 9876. The frontend proxies `/api
 - **Transaction-centric:** Every state change creates a transaction record. The scrip engine runs on transactions.
 - **Two-phase scrip engine:** Prepare (no side effects) then Commit (execute actions). Supports dry-run mode.
 - **Lifecycle state machines:** Per-queue configurable status transitions with wildcard support.
-- **Light mode is default.** Dark mode available via theme toggle (next-themes).
+- **SQL-level filtering:** Ticket filters (status, queue, owner, team, custom fields) pushed to PostgreSQL via Drizzle WHERE clauses.
 - **No ORM for frontend:** Drizzle is only on the backend. Frontend uses a typed fetch wrapper (`web/src/lib/api.ts`).
+- **Dev server over production:** Use `bun run dev` (port 3100) with HMR. Build+restart only when dev server has issues.
+- **Design consistency:** See `docs/design-system.md` for the design rules applied across the app.
 
 ## Git Workflow
 
 Repo: `https://git.gjermund.xyz/gjermund/tessera`
 
-Push via HTTPS with token auth (SSH port 2222 is not configured on Gitea):
 ```bash
 git remote set-url origin https://gjermund:TOKEN@git.gjermund.xyz/gjermund/tessera.git
 ```
 
-## Development Workflow
-
-All code is written by **OpenCode** (AI coding agent). Hermes writes specs, OpenCode writes code, Gjermund reviews.
-
-OpenCode server: `opencode serve --port 4096` (Gjermund attaches with `opencode --attach http://127.0.0.1:4096`)
-
-After OpenCode makes changes:
-1. `cd web && npx next build` — verify zero errors
-2. `npx next start --port 5173` — restart production server
-3. `git push` — push to origin
-
 ## Common Issues
 
-- **Frontend shows skeleton/blank page:** The frontend dev server (Turbopack) has WebSocket HMR issues. Use production mode (`npx next build` + `npx next start`).
+- **Frontend shows skeleton/blank page:** Dev server may have HMR issues. Kill port 3100, rebuild with `npm run build`, restart with `npm run start`.
 - **Backend not running on 9876:** Restart with `bun run src/index.ts`. Check port with `ss -tlnp | grep 9876`.
 - **Database connection refused:** Docker container may be stopped. `docker start tessera-db`.
 - **Build errors after migration:** Run `bun run src/db/migrate.ts` to apply new migrations.

docs/design-system.md

@@ -0,0 +1,118 @@
+# Tessera Design System
+
+The app follows a clean, minimal aesthetic — no heavy borders, no unnecessary shadows, flat hierarchy.
+
+## Principles
+
+1. **Flat, not boxed.** Avoid bordered containers around every section. Use whitespace for separation.
+2. **Soft borders.** Never full-opacity borders. Always `/50` or `/30`.
+3. **No shadows.** Cards and sections don't need shadows. The sidebar has the only subtle shadow.
+4. **Consistent typography.** Three font sizes: labels (10px), content (12-13px), headings (14-24px).
+5. **Dimmed by default.** Icons, borders, and secondary text start dimmed. They brighten on hover/focus.
+
+## Component Patterns
+
+### Section Wrapper
+```tsx
+<section className="overflow-hidden rounded-lg border border-border/50">
+  ...
+</section>
+```
+
+### Section Header / Title Bar
+```tsx
+<div className="flex items-center justify-between border-b border-border/50 bg-muted/20 px-4 py-3">
+  <h2 className="text-sm font-semibold">Title</h2>
+  <Button size="sm">Action</Button>
+</div>
+```
+
+### List Item (clickable)
+```tsx
+<button className={cn(
+  "rounded-lg border p-3 text-left transition",
+  "border-border/50 hover:border-primary/30 hover:bg-accent/30",
+  isActive && "border-primary/50 bg-primary/5"
+)}>
+  <div className="text-sm font-semibold">Name</div>
+  <div className="text-xs text-muted-foreground">Description</div>
+</button>
+```
+
+### Property Row (key-value)
+```tsx
+<div className="flex items-baseline justify-between gap-2 text-sm">
+  <span className="text-muted-foreground">Label</span>
+  <span className="text-foreground">Value</span>
+</div>
+```
+
+### Sidebar Nav Item
+```tsx
+<Link href={href} className={cn(
+  "flex items-center px-2.5 py-1.5 rounded-md text-[13px] transition-colors",
+  active
+    ? "bg-sidebar-accent text-sidebar-foreground font-medium"
+    : "text-sidebar-foreground/55 hover:text-sidebar-foreground hover:bg-sidebar-accent/50"
+)}>
+  <Icon className={cn("w-4 h-4", active ? "opacity-90" : "opacity-50 group-hover:opacity-70")} />
+  <span className="truncate">{label}</span>
+</Link>
+```
+
+### Section Label (small caps)
+```tsx
+<div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60">
+  LABEL
+</div>
+```
+
+### Form Input
+```tsx
+<input className="h-8 w-full rounded-md border border-input bg-transparent px-2.5 text-sm outline-none focus:border-ring" />
+```
+
+### Form Select
+```tsx
+<select className="h-8 w-full rounded-md border border-input bg-transparent px-2.5 text-sm outline-none focus:border-ring">
+  <option>...</option>
+</select>
+```
+
+## Typography Scale
+
+| Size | Weight | Use |
+|------|--------|-----|
+| `text-[10px]` | `font-medium` | Section labels, form labels |
+| `text-[11px]` | `font-medium` | Meta, timestamps, badges |
+| `text-[13px]` | `font-normal` | Nav items, list items |
+| `text-sm` | `font-normal` | Body, property values |
+| `text-sm` | `font-semibold` | Card titles, list item names |
+| `text-base` | `font-semibold` | Section headings |
+| `text-lg` | `font-semibold` | Form titles |
+| `text-xl` | `font-semibold` | Page headings |
+
+## Color Tokens
+
+| Token | Use |
+|-------|-----|
+| `border-border/50` | Section borders, card borders |
+| `border-border/30` | Subtle dividers, list separators |
+| `border-border/50` | Sidebar border |
+| `bg-muted/20` | Section header background |
+| `bg-muted/40` | Tab bar background |
+| `bg-sidebar-accent` | Active nav item |
+| `text-sidebar-foreground/55` | Inactive nav item |
+| `text-muted-foreground/60` | Section labels |
+| `text-foreground/90` | Slightly muted body text |
+
+## What to Avoid
+
+- ❌ `rounded-md` — use `rounded-lg` for cards, `rounded-md` for small elements
+- ❌ `shadow-sm` or `shadow-md` on any card or section
+- ❌ `bg-card/82` — use solid `bg-card` or `bg-transparent`
+- ❌ `border-border` (full opacity) — always `/50` or `/30`
+- ❌ `backdrop-blur` on headers
+- ❌ `<dl>`/`<dt>`/`<dd>` grids for property lists — use flex rows
+- ❌ `text-[11px] font-semibold uppercase` — use the section label pattern
+- ❌ Heavy icon usage in section headers — keep icons small (`h-3 w-3`)

drizzle/migrations/0002_short_custom_field_keys.sql

@@ -0,0 +1,10 @@
+ALTER TABLE "custom_fields" ADD COLUMN "key" text;
+--> statement-breakpoint
+UPDATE "custom_fields"
+SET "key" = trim(both '_' from regexp_replace(lower("name"), '[^a-z0-9]+', '_', 'g'));
+--> statement-breakpoint
+UPDATE "custom_fields" SET "key" = 'field_' || substring("id"::text, 1, 8) WHERE "key" IS NULL OR "key" = '';
+--> statement-breakpoint
+ALTER TABLE "custom_fields" ALTER COLUMN "key" SET NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "custom_fields" ADD CONSTRAINT "custom_fields_key_unique" UNIQUE("key");

drizzle/migrations/0003_dry_caretaker.sql

@@ -0,0 +1,12 @@
+CREATE TABLE "views" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"name" text NOT NULL,
+	"filters" jsonb DEFAULT '[]' NOT NULL,
+	"sort_key" text DEFAULT 'updated',
+	"columns" jsonb DEFAULT '[]',
+	"is_public" boolean DEFAULT false,
+	"creator_id" uuid,
+	"created_at" timestamp with time zone DEFAULT now()
+);
+--> statement-breakpoint
+ALTER TABLE "views" ADD CONSTRAINT "views_creator_id_users_id_fk" FOREIGN KEY ("creator_id") REFERENCES "public"."users"("id") ON DELETE no action ON UPDATE no action;

drizzle/migrations/0004_sturdy_natasha_romanoff.sql

@@ -0,0 +1,22 @@
+CREATE TABLE "dashboard_widgets" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"dashboard_id" uuid NOT NULL,
+	"view_id" uuid NOT NULL,
+	"title" text NOT NULL,
+	"widget_type" text NOT NULL,
+	"position" jsonb DEFAULT '{"x":0,"y":0,"w":4,"h":2}',
+	"config" jsonb DEFAULT '{}',
+	"created_at" timestamp with time zone DEFAULT now()
+);
+--> statement-breakpoint
+CREATE TABLE "dashboards" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"name" text NOT NULL,
+	"description" text,
+	"layout" jsonb DEFAULT '[]',
+	"is_default" boolean DEFAULT false,
+	"created_at" timestamp with time zone DEFAULT now()
+);
+--> statement-breakpoint
+ALTER TABLE "dashboard_widgets" ADD CONSTRAINT "dashboard_widgets_dashboard_id_dashboards_id_fk" FOREIGN KEY ("dashboard_id") REFERENCES "public"."dashboards"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "dashboard_widgets" ADD CONSTRAINT "dashboard_widgets_view_id_views_id_fk" FOREIGN KEY ("view_id") REFERENCES "public"."views"("id") ON DELETE cascade ON UPDATE no action;

drizzle/migrations/0005_spotty_leader.sql

@@ -0,0 +1,19 @@
+CREATE TABLE "team_members" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"team_id" uuid NOT NULL,
+	"user_id" uuid NOT NULL,
+	CONSTRAINT "team_members_team_id_user_id_unique" UNIQUE("team_id","user_id")
+);
+--> statement-breakpoint
+CREATE TABLE "teams" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"name" text NOT NULL,
+	"description" text,
+	"created_at" timestamp with time zone DEFAULT now(),
+	CONSTRAINT "teams_name_unique" UNIQUE("name")
+);
+--> statement-breakpoint
+ALTER TABLE "dashboards" ADD COLUMN "team_id" uuid;--> statement-breakpoint
+ALTER TABLE "team_members" ADD CONSTRAINT "team_members_team_id_teams_id_fk" FOREIGN KEY ("team_id") REFERENCES "public"."teams"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "team_members" ADD CONSTRAINT "team_members_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "dashboards" ADD CONSTRAINT "dashboards_team_id_teams_id_fk" FOREIGN KEY ("team_id") REFERENCES "public"."teams"("id") ON DELETE set null ON UPDATE no action;

drizzle/migrations/0006_nosy_black_queen.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "tickets" ADD COLUMN "team_id" uuid;--> statement-breakpoint
+ALTER TABLE "tickets" ADD CONSTRAINT "tickets_team_id_teams_id_fk" FOREIGN KEY ("team_id") REFERENCES "public"."teams"("id") ON DELETE set null ON UPDATE no action;

drizzle/migrations/0007_flimsy_roughhouse.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "queues" ADD COLUMN "team_id" uuid;--> statement-breakpoint
+ALTER TABLE "queues" ADD CONSTRAINT "queues_team_id_teams_id_fk" FOREIGN KEY ("team_id") REFERENCES "public"."teams"("id") ON DELETE set null ON UPDATE no action;

drizzle/migrations/0008_sturdy_prism.sql

@@ -0,0 +1,12 @@
+CREATE TABLE "transaction_attachments" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"transaction_id" uuid NOT NULL,
+	"filename" text NOT NULL,
+	"mime_type" text DEFAULT 'application/octet-stream' NOT NULL,
+	"size_bytes" integer DEFAULT 0 NOT NULL,
+	"storage_path" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now()
+);
+--> statement-breakpoint
+ALTER TABLE "transaction_attachments" ADD CONSTRAINT "transaction_attachments_transaction_id_transactions_id_fk" FOREIGN KEY ("transaction_id") REFERENCES "public"."transactions"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "transaction_attachments_tx_id_idx" ON "transaction_attachments" USING btree ("transaction_id");

drizzle/migrations/0009_tiny_lady_vermin.sql

@@ -0,0 +1 @@
+ALTER TABLE "transaction_attachments" ALTER COLUMN "transaction_id" DROP NOT NULL;

drizzle/migrations/0010_misty_morg.sql

@@ -0,0 +1,15 @@
+CREATE TABLE "ticket_links" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"ticket_id" integer NOT NULL,
+	"target_ticket_id" integer NOT NULL,
+	"link_type" text NOT NULL,
+	"creator_id" uuid NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now(),
+	CONSTRAINT "ticket_links_ticket_target_type_unique" UNIQUE("ticket_id","target_ticket_id","link_type")
+);
+--> statement-breakpoint
+ALTER TABLE "ticket_links" ADD CONSTRAINT "ticket_links_ticket_id_tickets_id_fk" FOREIGN KEY ("ticket_id") REFERENCES "public"."tickets"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "ticket_links" ADD CONSTRAINT "ticket_links_target_ticket_id_tickets_id_fk" FOREIGN KEY ("target_ticket_id") REFERENCES "public"."tickets"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "ticket_links" ADD CONSTRAINT "ticket_links_creator_id_users_id_fk" FOREIGN KEY ("creator_id") REFERENCES "public"."users"("id") ON DELETE no action ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "ticket_links_ticket_id_idx" ON "ticket_links" USING btree ("ticket_id");--> statement-breakpoint
+CREATE INDEX "ticket_links_target_ticket_id_idx" ON "ticket_links" USING btree ("target_ticket_id");

drizzle/migrations/0011_breezy_tyrannus.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "users" ADD COLUMN "password_hash" text;--> statement-breakpoint
+ALTER TABLE "users" ADD COLUMN "role" text DEFAULT 'staff' NOT NULL;

drizzle/migrations/0012_living_photon.sql

@@ -0,0 +1,12 @@
+CREATE TABLE "queue_permissions" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"queue_id" uuid NOT NULL,
+	"team_id" uuid NOT NULL,
+	"right_name" text NOT NULL,
+	CONSTRAINT "queue_permissions_queue_team_right_unique" UNIQUE("queue_id","team_id","right_name")
+);
+--> statement-breakpoint
+ALTER TABLE "queue_permissions" ADD CONSTRAINT "queue_permissions_queue_id_queues_id_fk" FOREIGN KEY ("queue_id") REFERENCES "public"."queues"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "queue_permissions" ADD CONSTRAINT "queue_permissions_team_id_teams_id_fk" FOREIGN KEY ("team_id") REFERENCES "public"."teams"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "queue_permissions_queue_id_idx" ON "queue_permissions" USING btree ("queue_id");--> statement-breakpoint
+CREATE INDEX "queue_permissions_team_id_idx" ON "queue_permissions" USING btree ("team_id");

drizzle/migrations/0013_bored_silvermane.sql

@@ -0,0 +1,12 @@
+CREATE TABLE "user_permissions" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"queue_id" uuid NOT NULL,
+	"user_id" uuid NOT NULL,
+	"right_name" text NOT NULL,
+	CONSTRAINT "user_permissions_queue_user_right_unique" UNIQUE("queue_id","user_id","right_name")
+);
+--> statement-breakpoint
+ALTER TABLE "user_permissions" ADD CONSTRAINT "user_permissions_queue_id_queues_id_fk" FOREIGN KEY ("queue_id") REFERENCES "public"."queues"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "user_permissions" ADD CONSTRAINT "user_permissions_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "user_permissions_queue_id_idx" ON "user_permissions" USING btree ("queue_id");--> statement-breakpoint
+CREATE INDEX "user_permissions_user_id_idx" ON "user_permissions" USING btree ("user_id");

drizzle/migrations/0014_cloudy_siren.sql

@@ -0,0 +1 @@
+ALTER TABLE "transactions" ADD COLUMN "time_worked_minutes" integer DEFAULT 0;

drizzle/migrations/0015_tense_patch.sql

@@ -0,0 +1,15 @@
+CREATE TABLE "notifications" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" uuid NOT NULL,
+	"ticket_id" integer,
+	"type" text NOT NULL,
+	"title" text NOT NULL,
+	"body" text,
+	"read" boolean DEFAULT false NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now()
+);
+--> statement-breakpoint
+ALTER TABLE "notifications" ADD CONSTRAINT "notifications_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "notifications" ADD CONSTRAINT "notifications_ticket_id_tickets_id_fk" FOREIGN KEY ("ticket_id") REFERENCES "public"."tickets"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "notifications_user_id_idx" ON "notifications" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "notifications_user_read_idx" ON "notifications" USING btree ("user_id","read");

drizzle/migrations/0016_famous_maximus.sql

@@ -0,0 +1,12 @@
+CREATE TABLE "api_tokens" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" uuid NOT NULL,
+	"name" text NOT NULL,
+	"token_hash" text NOT NULL,
+	"last_used_at" timestamp with time zone,
+	"created_at" timestamp with time zone DEFAULT now(),
+	CONSTRAINT "api_tokens_token_hash_unique" UNIQUE("token_hash")
+);
+--> statement-breakpoint
+ALTER TABLE "api_tokens" ADD CONSTRAINT "api_tokens_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "api_tokens_user_id_idx" ON "api_tokens" USING btree ("user_id");

drizzle/migrations/0017_redundant_the_renegades.sql

@@ -0,0 +1 @@
+ALTER TABLE "scrips" ADD COLUMN "applicable_trans_types" text;

drizzle/migrations/0018_dapper_jack_power.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "custom_fields" ADD COLUMN "validation_config" jsonb DEFAULT '{}'::jsonb;--> statement-breakpoint
+ALTER TABLE "custom_fields" ADD COLUMN "default_value" text;

drizzle/migrations/meta/_journal.json

@@ -15,6 +15,125 @@
       "when": 1780867177929,
       "tag": "0001_lovely_quentin_quire",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1780904200000,
+      "tag": "0002_short_custom_field_keys",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "7",
+      "when": 1780995910694,
+      "tag": "0003_dry_caretaker",
+      "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "7",
+      "when": 1780996807814,
+      "tag": "0004_sturdy_natasha_romanoff",
+      "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "7",
+      "when": 1781004398567,
+      "tag": "0005_spotty_leader",
+      "breakpoints": true
+    },
+    {
+      "idx": 6,
+      "version": "7",
+      "when": 1781008559188,
+      "tag": "0006_nosy_black_queen",
+      "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "7",
+      "when": 1781009018666,
+      "tag": "0007_flimsy_roughhouse",
+      "breakpoints": true
+    },
+    {
+      "idx": 8,
+      "version": "7",
+      "when": 1781039674211,
+      "tag": "0008_sturdy_prism",
+      "breakpoints": true
+    },
+    {
+      "idx": 9,
+      "version": "7",
+      "when": 1781039770418,
+      "tag": "0009_tiny_lady_vermin",
+      "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "7",
+      "when": 1781040536590,
+      "tag": "0010_misty_morg",
+      "breakpoints": true
+    },
+    {
+      "idx": 11,
+      "version": "7",
+      "when": 1781042321413,
+      "tag": "0011_breezy_tyrannus",
+      "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "7",
+      "when": 1781043175153,
+      "tag": "0012_living_photon",
+      "breakpoints": true
+    },
+    {
+      "idx": 13,
+      "version": "7",
+      "when": 1781043729230,
+      "tag": "0013_bored_silvermane",
+      "breakpoints": true
+    },
+    {
+      "idx": 14,
+      "version": "7",
+      "when": 1781045611610,
+      "tag": "0014_cloudy_siren",
+      "breakpoints": true
+    },
+    {
+      "idx": 15,
+      "version": "7",
+      "when": 1781078349499,
+      "tag": "0015_tense_patch",
+      "breakpoints": true
+    },
+    {
+      "idx": 16,
+      "version": "7",
+      "when": 1781078511943,
+      "tag": "0016_famous_maximus",
+      "breakpoints": true
+    },
+    {
+      "idx": 17,
+      "version": "7",
+      "when": 1781095552496,
+      "tag": "0017_redundant_the_renegades",
+      "breakpoints": true
+    },
+    {
+      "idx": 18,
+      "version": "7",
+      "when": 1781551130161,
+      "tag": "0018_dapper_jack_power",
+      "breakpoints": true
     }
   ]
 }

package.json

@@ -3,6 +3,13 @@
   "module": "src/index.ts",
   "type": "module",
   "private": true,
+  "scripts": {
+    "dev:backend": "bun run src/index.ts",
+    "db:migrate": "bun run src/db/migrate.ts",
+    "db:seed": "bun run src/db/seed.ts",
+    "db:seed:reset": "bun run src/db/seed.ts --reset",
+    "smoke": "bun run scripts/smoke-test.ts"
+  },
   "devDependencies": {
     "@types/bun": "latest",
     "@types/handlebars": "^4.1.0",
@@ -15,6 +22,7 @@
   },
   "dependencies": {
     "@types/nodemailer": "^8.0.0",
+    "jose": "^6.2.3",
     "nodemailer": "^8.0.10"
   }
 }

scripts/seed-users.ts

@@ -0,0 +1,28 @@
+import { drizzle } from 'drizzle-orm/node-postgres';
+import { Pool } from 'pg';
+import { users } from '../src/db/schema.ts';
+
+const pool = new Pool({ connectionString: process.env.DATABASE_URL! });
+const db = drizzle(pool);
+
+const BATCH = 100;
+const TOTAL = 1000;
+const password = await Bun.password.hash('password');
+
+console.log(`Inserting ${TOTAL} users...`);
+for (let i = 0; i < TOTAL; i += BATCH) {
+  const batch = [];
+  for (let j = i; j < Math.min(i + BATCH, TOTAL); j++) {
+    const n = String(j).padStart(4, '0');
+    batch.push({
+      username: `user${n}`,
+      email: `user${n}@test.local`,
+      role: 'staff',
+      password_hash: password,
+    });
+  }
+  await db.insert(users).values(batch as any).onConflictDoNothing();
+  process.stdout.write('.');
+}
+console.log(`\nDone. ${TOTAL} users seeded.`);
+await pool.end();

scripts/smoke-test.ts

@@ -0,0 +1,112 @@
+const backendUrl = process.env.BACKEND_URL ?? 'http://127.0.0.1:9876';
+const frontendUrl = process.env.FRONTEND_URL ?? 'http://127.0.0.1:3100';
+
+interface Ticket {
+  id: number;
+  subject: string;
+}
+
+interface Queue {
+  id: string;
+  name: string;
+}
+
+interface Transaction {
+  id: string;
+  ticket_id: number;
+  transaction_type: string;
+}
+
+async function requestJson<T>(url: string): Promise<T> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`${url} returned ${response.status} ${response.statusText}`);
+  }
+  return response.json() as Promise<T>;
+}
+
+async function requestOk(url: string): Promise<void> {
+  const response = await fetch(url, { method: 'HEAD' });
+  if (!response.ok) {
+    throw new Error(`${url} returned ${response.status} ${response.statusText}`);
+  }
+}
+
+async function check(name: string, fn: () => Promise<void>): Promise<void> {
+  try {
+    await fn();
+    console.log(`ok   ${name}`);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    console.error(`fail ${name}`);
+    console.error(`     ${message}`);
+    process.exitCode = 1;
+  }
+}
+
+async function main() {
+  let ticketForDetail: Ticket | null = null;
+
+  await check('backend health', async () => {
+    const health = await requestJson<{ status: string }>(`${backendUrl}/health`);
+    if (health.status !== 'ok') {
+      throw new Error(`expected status ok, got ${JSON.stringify(health)}`);
+    }
+  });
+
+  await check('queues exist', async () => {
+    const queues = await requestJson<Queue[]>(`${backendUrl}/queues`);
+    if (queues.length < 1) {
+      throw new Error('expected at least one queue');
+    }
+  });
+
+  await check('tickets exist', async () => {
+    const tickets = await requestJson<Ticket[]>(`${backendUrl}/tickets`);
+    if (tickets.length < 1) {
+      throw new Error('expected at least one ticket');
+    }
+    ticketForDetail = tickets.find((ticket) => ticket.subject.includes('VPN access')) ?? tickets[0] ?? null;
+  });
+
+  await check('ticket detail has activity', async () => {
+    if (!ticketForDetail) {
+      throw new Error('no ticket available for detail check');
+    }
+    const transactions = await requestJson<Transaction[]>(
+      `${backendUrl}/tickets/${ticketForDetail.id}/transactions`,
+    );
+    if (transactions.length < 1) {
+      throw new Error(`expected ticket ${ticketForDetail.id} to have transactions`);
+    }
+  });
+
+  await check('frontend index responds', async () => {
+    await requestOk(frontendUrl);
+  });
+
+  await check('frontend ticket detail responds', async () => {
+    if (!ticketForDetail) {
+      throw new Error('no ticket available for frontend detail check');
+    }
+    await requestOk(`${frontendUrl}/tickets/${ticketForDetail.id}`);
+  });
+
+  await check('frontend api proxy responds', async () => {
+    const health = await requestJson<{ status: string }>(`${frontendUrl}/api/health`);
+    if (health.status !== 'ok') {
+      throw new Error(`expected status ok, got ${JSON.stringify(health)}`);
+    }
+  });
+
+  if (process.exitCode) {
+    process.exit(process.exitCode);
+  }
+
+  console.log('Smoke test passed');
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

scripts/watch-frontend.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+# Watch for source changes and auto-rebuild + restart Tessera frontend
+DIR="/home/gjermund/projects/tessera/web/src"
+LAST_BUILD=0
+
+echo "Watching $DIR for changes..."
+
+inotifywait -m -r -e modify,create,delete "$DIR" --format '%w%f' 2>/dev/null | while read FILE; do
+  NOW=$(date +%s)
+  if [ $((NOW - LAST_BUILD)) -gt 3 ]; then
+    echo "[$(date +%H:%M:%S)] Change detected, rebuilding..."
+    cd /home/gjermund/projects/tessera/web && npx next build 2>&1 | tail -1
+    LAST_BUILD=$NOW
+  fi
+done

src/auth/middleware.ts

@@ -0,0 +1,144 @@
+import type { Context, Next } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import * as jose from 'jose';
+import { config } from '../config.ts';
+import type { Db } from '../db/index.ts';
+import { users, apiTokens } from '../db/schema.ts';
+import { eq } from 'drizzle-orm';
+
+export interface AuthUser {
+  userId: string;
+  username: string;
+  role: string;
+}
+
+declare module 'hono' {
+  interface ContextVariableMap {
+    user: AuthUser;
+  }
+}
+
+const secret = new TextEncoder().encode(config.JWT_SECRET);
+
+export async function createToken(user: { id: string; username: string; role: string }): Promise<string> {
+  return await new jose.SignJWT({ username: user.username, role: user.role })
+    .setProtectedHeader({ alg: 'HS256' })
+    .setSubject(user.id)
+    .setIssuedAt()
+    .setExpirationTime('7d')
+    .sign(secret);
+}
+
+async function verifyJwt(token: string): Promise<AuthUser | null> {
+  try {
+    const { payload } = await jose.jwtVerify(token, secret);
+    return {
+      userId: payload.sub!,
+      username: payload.username as string,
+      role: payload.role as string,
+    };
+  } catch {
+    return null;
+  }
+}
+
+async function verifyApiToken(db: Db, token: string): Promise<AuthUser | null> {
+  try {
+    // Find all tokens and verify against hash
+    const allTokens = await db.query.apiTokens.findMany();
+    for (const t of allTokens) {
+      const valid = await Bun.password.verify(token, t.token_hash);
+      if (valid) {
+        // Update last_used_at
+        await db.update(apiTokens)
+          .set({ last_used_at: new Date() } as any)
+          .where(eq(apiTokens.id, t.id));
+
+        const user = await db.query.users.findFirst({
+          where: eq(users.id, t.user_id),
+        });
+        if (user) {
+          return {
+            userId: user.id,
+            username: user.username,
+            role: user.role,
+          };
+        }
+      }
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function extractToken(c: Context): string | null {
+  const auth = c.req.header('Authorization');
+  if (auth?.startsWith('Bearer ')) {
+    return auth.slice(7);
+  }
+
+  const cookie = c.req.header('Cookie');
+  if (cookie) {
+    const match = cookie.match(/(?:^|;\s*)token=([^;]*)/);
+    if (match?.[1]) return match[1];
+  }
+
+  return null;
+}
+
+export function createAuthMiddleware(db: Db) {
+  async function verifyToken(token: string): Promise<AuthUser | null> {
+    if (token.startsWith('tessera_')) {
+      return await verifyApiToken(db, token);
+    }
+    return await verifyJwt(token);
+  }
+
+  async function requireAuth(c: Context, next: Next) {
+    const token = extractToken(c);
+    if (!token) {
+      throw new HTTPException(401, { message: 'Authentication required' });
+    }
+    const user = await verifyToken(token);
+    if (!user) {
+      throw new HTTPException(401, { message: 'Invalid or expired token' });
+    }
+    c.set('user', user);
+    await next();
+  }
+
+  async function requireAdmin(c: Context, next: Next) {
+    const token = extractToken(c);
+    if (!token) {
+      throw new HTTPException(401, { message: 'Authentication required' });
+    }
+    const user = await verifyToken(token);
+    if (!user) {
+      throw new HTTPException(401, { message: 'Invalid or expired token' });
+    }
+    if (user.role !== 'admin') {
+      throw new HTTPException(403, { message: 'Admin access required' });
+    }
+    c.set('user', user);
+    await next();
+  }
+
+  async function optionalAuth(c: Context, next: Next) {
+    const token = extractToken(c);
+    if (token) {
+      const user = await verifyToken(token);
+      if (user) {
+        c.set('user', user);
+      }
+    }
+    await next();
+  }
+
+  return { requireAuth, requireAdmin, optionalAuth };
+}
+
+export function getUserId(c: Context): string {
+  const user = c.get('user');
+  return user?.userId ?? '00000000-0000-0000-0000-000000000000';
+}

src/auth/permissions.ts

@@ -0,0 +1,86 @@
+import { HTTPException } from 'hono/http-exception';
+import type { Context } from 'hono';
+import type { Db } from '../db/index.ts';
+import { teamMembers, queuePermissions, userPermissions } from '../db/schema.ts';
+import { and, eq, inArray } from 'drizzle-orm';
+import type { AuthUser } from './middleware.ts';
+
+export type TicketRight = 'ticket.view' | 'ticket.create' | 'ticket.reply' | 'ticket.comment' | 'ticket.modify' | 'queue.admin';
+
+const RIGHT_HIERARCHY: Record<TicketRight, TicketRight[]> = {
+  'queue.admin': ['ticket.view', 'ticket.create', 'ticket.reply', 'ticket.comment', 'ticket.modify', 'queue.admin'],
+  'ticket.modify': ['ticket.view', 'ticket.reply', 'ticket.comment', 'ticket.modify'],
+  'ticket.reply': ['ticket.view', 'ticket.reply'],
+  'ticket.comment': ['ticket.view', 'ticket.comment'],
+  'ticket.create': ['ticket.create'],
+  'ticket.view': ['ticket.view'],
+};
+
+/**
+ * Check whether a user has a specific right on a queue.
+ * Admins bypass all permission checks.
+ * Rights come from two sources: team memberships and per-user grants.
+ * Higher rights imply lower rights (e.g., queue.admin implies ticket.view).
+ */
+export async function userHasRight(
+  db: Db,
+  user: AuthUser,
+  queueId: string,
+  right: TicketRight,
+): Promise<boolean> {
+  // Admins have all rights
+  if (user.role === 'admin') return true;
+
+  const neededRights = RIGHT_HIERARCHY[right] ?? [right];
+
+  // Check per-user permissions first (direct grant)
+  const userPerm = await db.query.userPermissions.findFirst({
+    where: (table, { and, eq: eqFn, inArray: inArr }) =>
+      and(
+        eqFn(table.user_id, user.userId),
+        eqFn(table.queue_id, queueId),
+        inArr(table.right_name, neededRights),
+      ),
+  });
+
+  if (userPerm) return true;
+
+  // Check team permissions (inherited)
+  const memberships = await db.query.teamMembers.findMany({
+    where: eq(teamMembers.user_id, user.userId),
+  });
+
+  const teamIds = memberships.map((m) => m.team_id);
+  if (teamIds.length === 0) return false;
+
+  const teamPerm = await db.query.queuePermissions.findFirst({
+    where: (table, { and, eq: eqFn, inArray: inArr }) =>
+      and(
+        inArr(table.team_id, teamIds),
+        eqFn(table.queue_id, queueId),
+        inArr(table.right_name, neededRights),
+      ),
+  });
+
+  return teamPerm !== undefined;
+}
+
+/**
+ * Require a specific right on a queue. Throws 403 if the user lacks the right.
+ */
+export async function requireRight(
+  c: Context,
+  db: Db,
+  queueId: string,
+  right: TicketRight,
+): Promise<void> {
+  const user = c.get('user');
+  if (!user) {
+    throw new HTTPException(401, { message: 'Authentication required' });
+  }
+
+  const has = await userHasRight(db, user, queueId, right);
+  if (!has) {
+    throw new HTTPException(403, { message: `Missing required right: ${right}` });
+  }
+}

src/config.ts

@@ -9,6 +9,8 @@ const configSchema = z.object({
   SMTP_USER: z.string().optional(),
   SMTP_PASS: z.string().optional(),
   SMTP_FROM: z.string().default('tessera@localhost'),
+  UPLOAD_DIR: z.string().default('./data/uploads'),
+  JWT_SECRET: z.string().default('tessera-dev-secret-change-in-production'),
 });
 
 export const config = configSchema.parse(process.env);

src/db/schema.ts

@@ -1,10 +1,12 @@
 import { pgTable, uuid, text, jsonb, integer, boolean, timestamp, unique, index } from 'drizzle-orm/pg-core';
-import { sql } from 'drizzle-orm';
+import { relations, sql } from 'drizzle-orm';
 
 export const users = pgTable('users', {
   id: uuid('id').primaryKey().defaultRandom(),
   username: text('username').notNull().unique(),
   email: text('email'),
+  password_hash: text('password_hash'),
+  role: text('role').notNull().default('staff'),
   created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
 });
 
@@ -13,6 +15,7 @@ export const queues = pgTable('queues', {
   name: text('name').notNull().unique(),
   description: text('description'),
   lifecycle_id: uuid('lifecycle_id').references(() => lifecycles.id),
+  team_id: uuid('team_id').references(() => teams.id, { onDelete: 'set null' }),
   created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
 });
 
@@ -29,6 +32,7 @@ export const tickets = pgTable('tickets', {
   queue_id: uuid('queue_id').notNull().references(() => queues.id),
   status: text('status').notNull(),
   owner_id: uuid('owner_id').references(() => users.id),
+  team_id: uuid('team_id').references(() => teams.id, { onDelete: 'set null' }),
   creator_id: uuid('creator_id').notNull().references(() => users.id),
   created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
   updated_at: timestamp('updated_at', { withTimezone: true }).defaultNow(),
@@ -47,6 +51,7 @@ export const transactions = pgTable('transactions', {
   old_value: text('old_value'),
   new_value: text('new_value'),
   data: jsonb('data'),
+  time_worked_minutes: integer('time_worked_minutes').default(0),
   creator_id: uuid('creator_id').notNull().references(() => users.id),
   created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
 }, (table) => ({
@@ -76,6 +81,7 @@ export const scrips = pgTable('scrips', {
   stage: text('stage').notNull().default('TransactionCreate'),
   sort_order: integer('sort_order').notNull().default(0),
   disabled: boolean('disabled').notNull().default(false),
+  applicable_trans_types: text('applicable_trans_types'),
   created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
 }, (table) => ({
   queueIdIdx: index('scrips_queue_id_idx').on(table.queue_id),
@@ -83,11 +89,14 @@ export const scrips = pgTable('scrips', {
 
 export const customFields = pgTable('custom_fields', {
   id: uuid('id').primaryKey().defaultRandom(),
+  key: text('key').notNull().unique(),
   name: text('name').notNull(),
   field_type: text('field_type').notNull(),
   values: jsonb('values'),
   max_values: integer('max_values').notNull().default(1),
   pattern: text('pattern'),
+  validation_config: jsonb('validation_config').default(sql`'{}'::jsonb`),
+  default_value: text('default_value'),
   created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
 });
 
@@ -111,3 +120,131 @@ export const customFieldValues = pgTable('custom_field_values', {
   ticketIdIdx: index('custom_field_values_ticket_id_idx').on(table.ticket_id),
   cfIdIdx: index('custom_field_values_custom_field_id_idx').on(table.custom_field_id),
 }));
+
+export const views = pgTable('views', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  name: text('name').notNull(),
+  filters: jsonb('filters').notNull().default('[]'),
+  sort_key: text('sort_key').default('updated'),
+  columns: jsonb('columns').default('[]'),
+  is_public: boolean('is_public').default(false),
+  creator_id: uuid('creator_id').references(() => users.id),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+});
+
+export const teams = pgTable('teams', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  name: text('name').notNull().unique(),
+  description: text('description'),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+});
+
+export const teamsRelations = relations(teams, ({ many }) => ({
+  members: many(teamMembers),
+}));
+
+export const teamMembers = pgTable('team_members', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  team_id: uuid('team_id').notNull().references(() => teams.id, { onDelete: 'cascade' }),
+  user_id: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
+}, (table) => ({
+  uniqueMember: unique('team_members_team_id_user_id_unique').on(table.team_id, table.user_id),
+}));
+
+export const teamMembersRelations = relations(teamMembers, ({ one }) => ({
+  team: one(teams, { fields: [teamMembers.team_id], references: [teams.id] }),
+  user: one(users, { fields: [teamMembers.user_id], references: [users.id] }),
+}));
+
+export const dashboards = pgTable('dashboards', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  name: text('name').notNull(),
+  description: text('description'),
+  team_id: uuid('team_id').references(() => teams.id, { onDelete: 'set null' }),
+  layout: jsonb('layout').default('[]'),
+  is_default: boolean('is_default').default(false),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+});
+
+export const transactionAttachments = pgTable('transaction_attachments', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  transaction_id: uuid('transaction_id').references(() => transactions.id, { onDelete: 'cascade' }),
+  filename: text('filename').notNull(),
+  mime_type: text('mime_type').notNull().default('application/octet-stream'),
+  size_bytes: integer('size_bytes').notNull().default(0),
+  storage_path: text('storage_path').notNull(),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+}, (table) => ({
+  transactionIdIdx: index('transaction_attachments_tx_id_idx').on(table.transaction_id),
+}));
+
+export const queuePermissions = pgTable('queue_permissions', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  queue_id: uuid('queue_id').notNull().references(() => queues.id, { onDelete: 'cascade' }),
+  team_id: uuid('team_id').notNull().references(() => teams.id, { onDelete: 'cascade' }),
+  right_name: text('right_name').notNull(),
+}, (table) => ({
+  uniqueRight: unique('queue_permissions_queue_team_right_unique').on(table.queue_id, table.team_id, table.right_name),
+  queueIdIdx: index('queue_permissions_queue_id_idx').on(table.queue_id),
+  teamIdIdx: index('queue_permissions_team_id_idx').on(table.team_id),
+}));
+
+export const apiTokens = pgTable('api_tokens', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  user_id: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
+  name: text('name').notNull(),
+  token_hash: text('token_hash').notNull().unique(),
+  last_used_at: timestamp('last_used_at', { withTimezone: true }),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+}, (table) => ({
+  userIdIdx: index('api_tokens_user_id_idx').on(table.user_id),
+}));
+
+export const notifications = pgTable('notifications', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  user_id: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
+  ticket_id: integer('ticket_id').references(() => tickets.id, { onDelete: 'cascade' }),
+  type: text('type').notNull(), // 'assigned', 'mentioned', 'commented', 'scrip_fired'
+  title: text('title').notNull(),
+  body: text('body'),
+  read: boolean('read').notNull().default(false),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+}, (table) => ({
+  userIdIdx: index('notifications_user_id_idx').on(table.user_id),
+  unreadIdx: index('notifications_user_read_idx').on(table.user_id, table.read),
+}));
+
+export const userPermissions = pgTable('user_permissions', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  queue_id: uuid('queue_id').notNull().references(() => queues.id, { onDelete: 'cascade' }),
+  user_id: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
+  right_name: text('right_name').notNull(),
+}, (table) => ({
+  uniqueRight: unique('user_permissions_queue_user_right_unique').on(table.queue_id, table.user_id, table.right_name),
+  queueIdIdx: index('user_permissions_queue_id_idx').on(table.queue_id),
+  userIdIdx: index('user_permissions_user_id_idx').on(table.user_id),
+}));
+
+export const ticketLinks = pgTable('ticket_links', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  ticket_id: integer('ticket_id').notNull().references(() => tickets.id, { onDelete: 'cascade' }),
+  target_ticket_id: integer('target_ticket_id').notNull().references(() => tickets.id, { onDelete: 'cascade' }),
+  link_type: text('link_type').notNull(),
+  creator_id: uuid('creator_id').notNull().references(() => users.id),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+}, (table) => ({
+  uniqueLink: unique('ticket_links_ticket_target_type_unique').on(table.ticket_id, table.target_ticket_id, table.link_type),
+  ticketIdIdx: index('ticket_links_ticket_id_idx').on(table.ticket_id),
+  targetTicketIdIdx: index('ticket_links_target_ticket_id_idx').on(table.target_ticket_id),
+}));
+
+export const dashboardWidgets = pgTable('dashboard_widgets', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  dashboard_id: uuid('dashboard_id').notNull().references(() => dashboards.id, { onDelete: 'cascade' }),
+  view_id: uuid('view_id').notNull().references(() => views.id, { onDelete: 'cascade' }),
+  title: text('title').notNull(),
+  widget_type: text('widget_type').notNull(),
+  position: jsonb('position').default('{"x":0,"y":0,"w":4,"h":2}'),
+  config: jsonb('config').default('{}'),
+  created_at: timestamp('created_at', { withTimezone: true }).defaultNow(),
+});

src/db/seed.ts

@@ -0,0 +1,902 @@
+import { drizzle } from 'drizzle-orm/node-postgres';
+import { Pool } from 'pg';
+import { eq, inArray } from 'drizzle-orm';
+import * as schema from './schema.ts';
+import {
+  customFields,
+  customFieldValues,
+  lifecycles,
+  queueCustomFields,
+  queuePermissions,
+  queues,
+  scrips,
+  teamMembers,
+  teams,
+  templates,
+  tickets,
+  transactions,
+  views,
+  dashboards,
+  dashboardWidgets,
+  users,
+} from './schema.ts';
+
+const SYSTEM_USER_ID = '00000000-0000-0000-0000-000000000000';
+
+const lifecycleDefinition = {
+  statuses: {
+    initial: ['new'],
+    active: ['open', 'in_progress'],
+    inactive: ['resolved', 'closed'],
+  },
+  transitions: {
+    new: ['open', 'in_progress', 'closed'],
+    open: ['in_progress', 'resolved', 'closed'],
+    in_progress: ['open', 'resolved', 'closed'],
+    resolved: ['open', 'closed'],
+    closed: ['open'],
+    '*': ['closed'],
+  },
+};
+
+function daysAgo(days: number, hour = 9, minute = 0): Date {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  date.setHours(hour, minute, 0, 0);
+  return date;
+}
+
+function hoursAgo(hours: number): Date {
+  return new Date(Date.now() - hours * 60 * 60 * 1000);
+}
+
+function createSeedDb(pool: Pool) {
+  return drizzle(pool, { schema });
+}
+
+type Db = ReturnType<typeof createSeedDb>;
+type UserSeed = { id: string; username: string; email: string; role?: string; password_hash?: string };
+type QueueSeed = { name: string; description: string };
+type FieldSeed = {
+  key?: string;
+  name: string;
+  field_type: string;
+  values?: unknown;
+  max_values?: number;
+  pattern?: string | null;
+};
+
+function makeFieldKey(value: string): string {
+  const key = value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '');
+  return key || 'field';
+}
+
+async function ensureUser(db: Db, seed: UserSeed): Promise<string> {
+  const setData = {
+    username: seed.username,
+    email: seed.email,
+    role: seed.role ?? 'staff',
+    password_hash: seed.password_hash ?? null,
+  };
+
+  const existingById = await db.query.users.findFirst({
+    where: eq(users.id, seed.id),
+  });
+  if (existingById) {
+    await db.update(users)
+      .set(setData)
+      .where(eq(users.id, seed.id));
+    return existingById.id;
+  }
+
+  const existingByUsername = await db.query.users.findFirst({
+    where: eq(users.username, seed.username),
+  });
+  if (existingByUsername) {
+    await db.update(users)
+      .set(setData)
+      .where(eq(users.id, existingByUsername.id));
+    return existingByUsername.id;
+  }
+
+  const [created] = await db.insert(users).values({ ...seed, ...setData }).returning();
+  if (!created) throw new Error(`Failed to seed user ${seed.username}`);
+  return created.id;
+}
+
+async function ensureLifecycle(db: Db) {
+  const existing = await db.query.lifecycles.findFirst({
+    where: eq(lifecycles.name, 'Demo service lifecycle'),
+  });
+
+  if (existing) {
+    const [updated] = await db.update(lifecycles)
+      .set({ definition: lifecycleDefinition })
+      .where(eq(lifecycles.id, existing.id))
+      .returning();
+    if (!updated) throw new Error('Failed to update demo lifecycle');
+    return updated;
+  }
+
+  const [created] = await db.insert(lifecycles).values({
+    name: 'Demo service lifecycle',
+    definition: lifecycleDefinition,
+  }).returning();
+  if (!created) throw new Error('Failed to seed demo lifecycle');
+  return created;
+}
+
+async function ensureQueue(db: Db, lifecycleId: string, seed: QueueSeed) {
+  const existing = await db.query.queues.findFirst({
+    where: eq(queues.name, seed.name),
+  });
+
+  if (existing) {
+    const [updated] = await db.update(queues)
+      .set({
+        description: seed.description,
+        lifecycle_id: lifecycleId,
+      })
+      .where(eq(queues.id, existing.id))
+      .returning();
+    if (!updated) throw new Error(`Failed to update queue ${seed.name}`);
+    return updated;
+  }
+
+  const [created] = await db.insert(queues).values({
+    name: seed.name,
+    description: seed.description,
+    lifecycle_id: lifecycleId,
+  }).returning();
+  if (!created) throw new Error(`Failed to seed queue ${seed.name}`);
+  return created;
+}
+
+async function ensureCustomField(db: Db, seed: FieldSeed) {
+  const existing = await db.query.customFields.findFirst({
+    where: eq(customFields.name, seed.name),
+  });
+
+  const values = {
+    key: seed.key ?? makeFieldKey(seed.name),
+    field_type: seed.field_type,
+    values: seed.values ?? null,
+    max_values: seed.max_values ?? 1,
+    pattern: seed.pattern ?? null,
+  };
+
+  if (existing) {
+    const [updated] = await db.update(customFields)
+      .set(values)
+      .where(eq(customFields.id, existing.id))
+      .returning();
+    if (!updated) throw new Error(`Failed to update custom field ${seed.name}`);
+    return updated;
+  }
+
+  const [created] = await db.insert(customFields).values({
+    name: seed.name,
+    ...values,
+  }).returning();
+  if (!created) throw new Error(`Failed to seed custom field ${seed.name}`);
+  return created;
+}
+
+async function attachFieldToQueue(db: Db, queueId: string, fieldId: string, sortOrder: number) {
+  await db.insert(queueCustomFields)
+    .values({
+      queue_id: queueId,
+      custom_field_id: fieldId,
+      sort_order: sortOrder,
+    })
+    .onConflictDoUpdate({
+      target: [queueCustomFields.queue_id, queueCustomFields.custom_field_id],
+      set: { sort_order: sortOrder },
+    });
+}
+
+async function ensureTemplate(
+  db: Db,
+  name: string,
+  queueId: string | null,
+  subjectTemplate: string,
+  bodyTemplate: string,
+) {
+  const existing = await db.query.templates.findFirst({
+    where: (row, { and, eq, isNull }) =>
+      queueId ? and(eq(row.name, name), eq(row.queue_id, queueId)) : and(eq(row.name, name), isNull(row.queue_id)),
+  });
+
+  if (existing) {
+    const [updated] = await db.update(templates)
+      .set({ subject_template: subjectTemplate, body_template: bodyTemplate })
+      .where(eq(templates.id, existing.id))
+      .returning();
+    if (!updated) throw new Error(`Failed to update template ${name}`);
+    return updated;
+  }
+
+  const [created] = await db.insert(templates).values({
+    name,
+    queue_id: queueId,
+    subject_template: subjectTemplate,
+    body_template: bodyTemplate,
+  }).returning();
+  if (!created) throw new Error(`Failed to seed template ${name}`);
+  return created;
+}
+
+async function ensureScrip(
+  db: Db,
+  seed: {
+    name: string;
+    description: string;
+    queueId: string | null;
+    conditionType: string;
+    actionType: string;
+    actionConfig: Record<string, unknown>;
+    templateId?: string | null;
+    sortOrder: number;
+    disabled?: boolean;
+  },
+) {
+  const existing = await db.query.scrips.findFirst({
+    where: (row, { and, eq, isNull }) =>
+      seed.queueId
+        ? and(eq(row.name, seed.name), eq(row.queue_id, seed.queueId))
+        : and(eq(row.name, seed.name), isNull(row.queue_id)),
+  });
+
+  const values = {
+    queue_id: seed.queueId,
+    name: seed.name,
+    description: seed.description,
+    condition_type: seed.conditionType,
+    condition_config: {},
+    action_type: seed.actionType,
+    action_config: seed.actionConfig,
+    template_id: seed.templateId ?? null,
+    stage: 'TransactionCreate',
+    sort_order: seed.sortOrder,
+    disabled: seed.disabled ?? false,
+  };
+
+  if (existing) {
+    const [updated] = await db.update(scrips)
+      .set(values)
+      .where(eq(scrips.id, existing.id))
+      .returning();
+    if (!updated) throw new Error(`Failed to update scrip ${seed.name}`);
+    return updated;
+  }
+
+  const [created] = await db.insert(scrips).values(values).returning();
+  if (!created) throw new Error(`Failed to seed scrip ${seed.name}`);
+  return created;
+}
+
+async function ensureTicket(
+  db: Db,
+  seed: {
+    subject: string;
+    queueId: string;
+    status: string;
+    ownerId: string | null;
+    creatorId: string;
+    createdAt: Date;
+    updatedAt: Date;
+    startedAt?: Date | null;
+    resolvedAt?: Date | null;
+  },
+) {
+  const existing = await db.query.tickets.findFirst({
+    where: eq(tickets.subject, seed.subject),
+  });
+
+  const values = {
+    subject: seed.subject,
+    queue_id: seed.queueId,
+    status: seed.status,
+    owner_id: seed.ownerId,
+    creator_id: seed.creatorId,
+    created_at: seed.createdAt,
+    updated_at: seed.updatedAt,
+    started_at: seed.startedAt ?? null,
+    resolved_at: seed.resolvedAt ?? null,
+  };
+
+  if (existing) {
+    const [updated] = await db.update(tickets)
+      .set(values)
+      .where(eq(tickets.id, existing.id))
+      .returning();
+    if (!updated) throw new Error(`Failed to update ticket ${seed.subject}`);
+    return updated;
+  }
+
+  const [created] = await db.insert(tickets).values(values).returning();
+  if (!created) throw new Error(`Failed to seed ticket ${seed.subject}`);
+  return created;
+}
+
+async function resetDatabase(db: Db) {
+  await db.delete(customFieldValues);
+  await db.delete(queuePermissions);
+  await db.delete(transactions);
+  await db.delete(queueCustomFields);
+  await db.delete(dashboardWidgets);
+  await db.delete(dashboards);
+  await db.delete(views);
+  await db.delete(scrips);
+  await db.delete(templates);
+  await db.delete(tickets);
+  await db.delete(queues);
+  await db.delete(customFields);
+  await db.delete(lifecycles);
+  await db.delete(users);
+}
+
+async function main() {
+  const databaseUrl = process.env.DATABASE_URL;
+  if (!databaseUrl) {
+    console.error('DATABASE_URL is required');
+    process.exit(1);
+  }
+
+  const pool = new Pool({ connectionString: databaseUrl });
+  const db = createSeedDb(pool);
+  const reset = process.argv.includes('--reset');
+
+  try {
+    if (reset) {
+      console.log('Resetting database before seeding demo data...');
+      await resetDatabase(db);
+    }
+
+    const userPassword = await Bun.password.hash('password');
+    const adminPassword = await Bun.password.hash('admin');
+
+    const userIds = {
+      system: await ensureUser(db, {
+        id: SYSTEM_USER_ID,
+        username: 'system',
+        email: 'system@tessera.local',
+      }),
+      admin: await ensureUser(db, {
+        id: 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa',
+        username: 'admin',
+        email: 'admin@tessera.local',
+        role: 'admin',
+        password_hash: adminPassword,
+      }),
+      dispatcher: await ensureUser(db, {
+        id: '11111111-1111-4111-8111-111111111111',
+        username: 'maria.dispatch',
+        email: 'maria.dispatch@tessera.local',
+        password_hash: userPassword,
+      }),
+      technician: await ensureUser(db, {
+        id: '22222222-2222-4222-8222-222222222222',
+        username: 'liam.field',
+        email: 'liam.field@tessera.local',
+        password_hash: userPassword,
+      }),
+      facilities: await ensureUser(db, {
+        id: '33333333-3333-4333-8333-333333333333',
+        username: 'nora.facilities',
+        email: 'nora.facilities@tessera.local',
+        password_hash: userPassword,
+      }),
+      security: await ensureUser(db, {
+        id: '44444444-4444-4444-8444-444444444444',
+        username: 'sam.security',
+        email: 'sam.security@tessera.local',
+        password_hash: userPassword,
+      }),
+    };
+
+    // Create demo team and assign all staff users to it
+    const [supportTeam] = await db.insert(teams).values({
+      name: 'Support team',
+      description: 'Demo support team with full queue access',
+    }).onConflictDoUpdate({
+      target: teams.name,
+      set: { description: 'Demo support team with full queue access' },
+    }).returning();
+
+    if (supportTeam) {
+      // Add all staff users to the team
+      const staffIds = [userIds.dispatcher, userIds.technician, userIds.facilities, userIds.security];
+      for (const userId of staffIds) {
+        await db.insert(teamMembers).values({
+          team_id: supportTeam.id,
+          user_id: userId,
+        }).onConflictDoNothing();
+      }
+    }
+
+    const lifecycle = await ensureLifecycle(db);
+
+    const supportQueue = await ensureQueue(db, lifecycle.id, {
+      name: 'Support Desk',
+      description: 'Employee requests, account access, hardware, and everyday service desk intake.',
+    });
+    const fieldQueue = await ensureQueue(db, lifecycle.id, {
+      name: 'Field Operations',
+      description: 'Technician dispatch, site work, parts, and customer-impacting operational issues.',
+    });
+    const facilitiesQueue = await ensureQueue(db, lifecycle.id, {
+      name: 'Facilities',
+      description: 'Building maintenance, access, meeting rooms, and office environment requests.',
+    });
+    const securityQueue = await ensureQueue(db, lifecycle.id, {
+      name: 'Security',
+      description: 'Badge access, incident review, and compliance-sensitive operational requests.',
+    });
+
+    const impactField = await ensureCustomField(db, {
+      key: 'impact',
+      name: 'Impact',
+      field_type: 'SelectOne',
+      values: ['Low', 'Medium', 'High', 'Critical'],
+    });
+    const locationField = await ensureCustomField(db, {
+      key: 'location',
+      name: 'Location',
+      field_type: 'Text',
+    });
+    const assetField = await ensureCustomField(db, {
+      key: 'asset_tag',
+      name: 'Asset tag',
+      field_type: 'Text',
+      pattern: '^ASSET-[0-9]{4}$',
+    });
+    const channelField = await ensureCustomField(db, {
+      key: 'channel',
+      name: 'Channel',
+      field_type: 'SelectOne',
+      values: ['Portal', 'Email', 'Phone', 'Walk-up', 'Monitoring'],
+    });
+    const outcomeField = await ensureCustomField(db, {
+      key: 'resolution_outcome',
+      name: 'Resolution outcome',
+      field_type: 'SelectOne',
+      values: ['Completed', 'Workaround', 'Duplicate', 'Declined'],
+    });
+
+    for (const queue of [supportQueue, fieldQueue, facilitiesQueue, securityQueue]) {
+      await attachFieldToQueue(db, queue.id, impactField.id, 10);
+      await attachFieldToQueue(db, queue.id, locationField.id, 20);
+      await attachFieldToQueue(db, queue.id, channelField.id, 30);
+    }
+    await attachFieldToQueue(db, supportQueue.id, assetField.id, 40);
+    await attachFieldToQueue(db, fieldQueue.id, assetField.id, 40);
+    await attachFieldToQueue(db, supportQueue.id, outcomeField.id, 50);
+
+    // Grant the support team full access to all demo queues
+    if (supportTeam) {
+      const allRights = ['ticket.view', 'ticket.create', 'ticket.reply', 'ticket.comment', 'ticket.modify'];
+      for (const queue of [supportQueue, fieldQueue, facilitiesQueue, securityQueue]) {
+        for (const right of allRights) {
+          await db.insert(queuePermissions).values({
+            queue_id: queue.id,
+            team_id: supportTeam.id,
+            right_name: right,
+          }).onConflictDoNothing();
+        }
+      }
+    }
+
+    const resolveTemplate = await ensureTemplate(
+      db,
+      'Demo resolution note',
+      null,
+      'Ticket {{ticket.id}} resolved: {{ticket.subject}}',
+      'Ticket {{ticket.id}} in {{queue.name}} moved from {{transaction.old_value}} to {{transaction.new_value}}.',
+    );
+
+    await ensureScrip(db, {
+      name: 'Demo: mark outcome on resolve',
+      description: 'When a ticket resolves, set the Resolution outcome custom field to Completed.',
+      queueId: null,
+      conditionType: 'OnResolve',
+      actionType: 'SetCustomField',
+      actionConfig: {
+        field_key: 'resolution_outcome',
+        value: 'Completed',
+      },
+      sortOrder: 10,
+    });
+    await ensureScrip(db, {
+      name: 'Demo: customer notification template',
+      description: 'Disabled sample email action showing how resolution templates render.',
+      queueId: null,
+      conditionType: 'OnResolve',
+      actionType: 'SendEmail',
+      actionConfig: {
+        recipients: ['requester@example.com'],
+      },
+      templateId: resolveTemplate.id,
+      sortOrder: 20,
+      disabled: true,
+    });
+
+    const demoTickets = [
+      await ensureTicket(db, {
+        subject: 'VPN access fails after password reset',
+        queueId: supportQueue.id,
+        status: 'open',
+        ownerId: userIds.dispatcher,
+        creatorId: userIds.system,
+        createdAt: daysAgo(4, 8, 40),
+        updatedAt: hoursAgo(3),
+        startedAt: daysAgo(4, 9, 10),
+      }),
+      await ensureTicket(db, {
+        subject: 'Warehouse scanner ASSET-1042 will not sync inventory',
+        queueId: fieldQueue.id,
+        status: 'in_progress',
+        ownerId: userIds.technician,
+        creatorId: userIds.system,
+        createdAt: daysAgo(2, 10, 15),
+        updatedAt: hoursAgo(1),
+        startedAt: daysAgo(2, 11, 0),
+      }),
+      await ensureTicket(db, {
+        subject: 'Badge reader intermittently denies access at north entrance',
+        queueId: securityQueue.id,
+        status: 'new',
+        ownerId: null,
+        creatorId: userIds.system,
+        createdAt: hoursAgo(7),
+        updatedAt: hoursAgo(7),
+      }),
+      await ensureTicket(db, {
+        subject: 'Conference room display flickers during video calls',
+        queueId: facilitiesQueue.id,
+        status: 'open',
+        ownerId: userIds.facilities,
+        creatorId: userIds.system,
+        createdAt: daysAgo(1, 14, 20),
+        updatedAt: hoursAgo(4),
+        startedAt: daysAgo(1, 15, 0),
+      }),
+      await ensureTicket(db, {
+        subject: 'New hire laptop provisioning for Monday start',
+        queueId: supportQueue.id,
+        status: 'resolved',
+        ownerId: userIds.dispatcher,
+        creatorId: userIds.system,
+        createdAt: daysAgo(6, 13, 30),
+        updatedAt: daysAgo(1, 16, 45),
+        startedAt: daysAgo(6, 14, 0),
+        resolvedAt: daysAgo(1, 16, 45),
+      }),
+      await ensureTicket(db, {
+        subject: 'Temperature alert in server closet B',
+        queueId: facilitiesQueue.id,
+        status: 'in_progress',
+        ownerId: userIds.facilities,
+        creatorId: userIds.system,
+        createdAt: hoursAgo(18),
+        updatedAt: hoursAgo(2),
+        startedAt: hoursAgo(17),
+      }),
+      await ensureTicket(db, {
+        subject: 'Quarterly access review export requested',
+        queueId: securityQueue.id,
+        status: 'closed',
+        ownerId: userIds.security,
+        creatorId: userIds.system,
+        createdAt: daysAgo(9, 10, 0),
+        updatedAt: daysAgo(3, 11, 20),
+        startedAt: daysAgo(9, 10, 30),
+        resolvedAt: daysAgo(3, 11, 20),
+      }),
+      await ensureTicket(db, {
+        subject: 'POS terminal receipt printer jam at front desk',
+        queueId: fieldQueue.id,
+        status: 'new',
+        ownerId: null,
+        creatorId: userIds.system,
+        createdAt: hoursAgo(5),
+        updatedAt: hoursAgo(5),
+      }),
+    ];
+
+    const demoTicketIds = demoTickets.map((ticket) => ticket.id);
+    if (demoTicketIds.length > 0) {
+      await db.delete(customFieldValues).where(inArray(customFieldValues.ticket_id, demoTicketIds));
+      await db.delete(transactions).where(inArray(transactions.ticket_id, demoTicketIds));
+    }
+
+    const ticketBySubject = new Map(demoTickets.map((ticket) => [ticket.subject, ticket]));
+
+    const txRows = [
+      {
+        ticket_id: ticketBySubject.get('VPN access fails after password reset')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: daysAgo(4, 8, 40),
+      },
+      {
+        ticket_id: ticketBySubject.get('VPN access fails after password reset')!.id,
+        transaction_type: 'StatusChange',
+        field: 'status',
+        old_value: 'new',
+        new_value: 'open',
+        creator_id: userIds.dispatcher,
+        created_at: daysAgo(4, 9, 10),
+      },
+      {
+        ticket_id: ticketBySubject.get('VPN access fails after password reset')!.id,
+        transaction_type: 'Correspond',
+        data: { body: 'I reset my password this morning and now the VPN client rejects the new password. Browser login works.' },
+        creator_id: userIds.system,
+        created_at: daysAgo(4, 9, 12),
+      },
+      {
+        ticket_id: ticketBySubject.get('VPN access fails after password reset')!.id,
+        transaction_type: 'Comment',
+        data: { body: 'Likely stale cached credentials. Ask user to clear saved VPN profile and confirm MFA prompt.' },
+        creator_id: userIds.dispatcher,
+        created_at: hoursAgo(3),
+      },
+      {
+        ticket_id: ticketBySubject.get('Warehouse scanner ASSET-1042 will not sync inventory')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: daysAgo(2, 10, 15),
+      },
+      {
+        ticket_id: ticketBySubject.get('Warehouse scanner ASSET-1042 will not sync inventory')!.id,
+        transaction_type: 'StatusChange',
+        field: 'status',
+        old_value: 'new',
+        new_value: 'in_progress',
+        creator_id: userIds.technician,
+        created_at: daysAgo(2, 11, 0),
+      },
+      {
+        ticket_id: ticketBySubject.get('Warehouse scanner ASSET-1042 will not sync inventory')!.id,
+        transaction_type: 'Comment',
+        data: { body: 'Device reaches Wi-Fi but sync service returns 409. Pulling logs before factory reset.' },
+        creator_id: userIds.technician,
+        created_at: hoursAgo(1),
+      },
+      {
+        ticket_id: ticketBySubject.get('Badge reader intermittently denies access at north entrance')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: hoursAgo(7),
+      },
+      {
+        ticket_id: ticketBySubject.get('Badge reader intermittently denies access at north entrance')!.id,
+        transaction_type: 'Correspond',
+        data: { body: 'Three employees reported failures between 07:40 and 08:05. Security desk can override manually.' },
+        creator_id: userIds.security,
+        created_at: hoursAgo(6),
+      },
+      {
+        ticket_id: ticketBySubject.get('Conference room display flickers during video calls')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: daysAgo(1, 14, 20),
+      },
+      {
+        ticket_id: ticketBySubject.get('Conference room display flickers during video calls')!.id,
+        transaction_type: 'StatusChange',
+        field: 'status',
+        old_value: 'new',
+        new_value: 'open',
+        creator_id: userIds.facilities,
+        created_at: daysAgo(1, 15, 0),
+      },
+      {
+        ticket_id: ticketBySubject.get('Conference room display flickers during video calls')!.id,
+        transaction_type: 'Comment',
+        data: { body: 'Cable path looks strained. Spare HDMI and USB-C adapters staged in the room.' },
+        creator_id: userIds.facilities,
+        created_at: hoursAgo(4),
+      },
+      {
+        ticket_id: ticketBySubject.get('New hire laptop provisioning for Monday start')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: daysAgo(6, 13, 30),
+      },
+      {
+        ticket_id: ticketBySubject.get('New hire laptop provisioning for Monday start')!.id,
+        transaction_type: 'StatusChange',
+        field: 'status',
+        old_value: 'new',
+        new_value: 'open',
+        creator_id: userIds.dispatcher,
+        created_at: daysAgo(6, 14, 0),
+      },
+      {
+        ticket_id: ticketBySubject.get('New hire laptop provisioning for Monday start')!.id,
+        transaction_type: 'Correspond',
+        data: { body: 'Laptop imaged, account created, and pickup instructions sent to hiring manager.' },
+        creator_id: userIds.dispatcher,
+        created_at: daysAgo(1, 16, 20),
+      },
+      {
+        ticket_id: ticketBySubject.get('New hire laptop provisioning for Monday start')!.id,
+        transaction_type: 'StatusChange',
+        field: 'status',
+        old_value: 'open',
+        new_value: 'resolved',
+        creator_id: userIds.dispatcher,
+        created_at: daysAgo(1, 16, 45),
+      },
+      {
+        ticket_id: ticketBySubject.get('Temperature alert in server closet B')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: hoursAgo(18),
+      },
+      {
+        ticket_id: ticketBySubject.get('Temperature alert in server closet B')!.id,
+        transaction_type: 'StatusChange',
+        field: 'status',
+        old_value: 'new',
+        new_value: 'in_progress',
+        creator_id: userIds.facilities,
+        created_at: hoursAgo(17),
+      },
+      {
+        ticket_id: ticketBySubject.get('Temperature alert in server closet B')!.id,
+        transaction_type: 'Comment',
+        data: { body: 'Portable cooling installed. HVAC vendor scheduled; rack intake is back under threshold.' },
+        creator_id: userIds.facilities,
+        created_at: hoursAgo(2),
+      },
+      {
+        ticket_id: ticketBySubject.get('Quarterly access review export requested')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: daysAgo(9, 10, 0),
+      },
+      {
+        ticket_id: ticketBySubject.get('Quarterly access review export requested')!.id,
+        transaction_type: 'StatusChange',
+        field: 'status',
+        old_value: 'new',
+        new_value: 'closed',
+        creator_id: userIds.security,
+        created_at: daysAgo(3, 11, 20),
+      },
+      {
+        ticket_id: ticketBySubject.get('POS terminal receipt printer jam at front desk')!.id,
+        transaction_type: 'Create',
+        field: 'status',
+        new_value: 'new',
+        creator_id: userIds.system,
+        created_at: hoursAgo(5),
+      },
+      {
+        ticket_id: ticketBySubject.get('POS terminal receipt printer jam at front desk')!.id,
+        transaction_type: 'Correspond',
+        data: { body: 'Front desk can still email receipts, but lunch rush needs a working printer.' },
+        creator_id: userIds.system,
+        created_at: hoursAgo(5),
+      },
+    ];
+
+    await db.insert(transactions).values(txRows);
+
+    const fieldRows = [
+      ['VPN access fails after password reset', impactField.id, 'Medium'],
+      ['VPN access fails after password reset', channelField.id, 'Portal'],
+      ['VPN access fails after password reset', locationField.id, 'Remote'],
+      ['Warehouse scanner ASSET-1042 will not sync inventory', impactField.id, 'High'],
+      ['Warehouse scanner ASSET-1042 will not sync inventory', channelField.id, 'Phone'],
+      ['Warehouse scanner ASSET-1042 will not sync inventory', locationField.id, 'Warehouse A'],
+      ['Warehouse scanner ASSET-1042 will not sync inventory', assetField.id, 'ASSET-1042'],
+      ['Badge reader intermittently denies access at north entrance', impactField.id, 'High'],
+      ['Badge reader intermittently denies access at north entrance', channelField.id, 'Walk-up'],
+      ['Badge reader intermittently denies access at north entrance', locationField.id, 'North entrance'],
+      ['Conference room display flickers during video calls', impactField.id, 'Medium'],
+      ['Conference room display flickers during video calls', channelField.id, 'Email'],
+      ['Conference room display flickers during video calls', locationField.id, 'Room 4B'],
+      ['New hire laptop provisioning for Monday start', impactField.id, 'Low'],
+      ['New hire laptop provisioning for Monday start', channelField.id, 'Portal'],
+      ['New hire laptop provisioning for Monday start', assetField.id, 'ASSET-2201'],
+      ['New hire laptop provisioning for Monday start', outcomeField.id, 'Completed'],
+      ['Temperature alert in server closet B', impactField.id, 'Critical'],
+      ['Temperature alert in server closet B', channelField.id, 'Monitoring'],
+      ['Temperature alert in server closet B', locationField.id, 'Server closet B'],
+      ['Quarterly access review export requested', impactField.id, 'Low'],
+      ['Quarterly access review export requested', channelField.id, 'Portal'],
+      ['Quarterly access review export requested', outcomeField.id, 'Completed'],
+      ['POS terminal receipt printer jam at front desk', impactField.id, 'Medium'],
+      ['POS terminal receipt printer jam at front desk', channelField.id, 'Phone'],
+      ['POS terminal receipt printer jam at front desk', locationField.id, 'Front desk'],
+    ] as const;
+
+    await db.insert(customFieldValues).values(fieldRows.map(([subject, fieldId, value]) => ({
+      ticket_id: ticketBySubject.get(subject)!.id,
+      custom_field_id: fieldId,
+      value,
+    })));
+
+    console.log(`${reset ? 'Reset and seeded' : 'Seeded'} ${demoTickets.length} demo tickets across 4 queues`);
+
+    // ── Dashboard seeding ──
+    const dashboardViews = [
+      { name: 'Open tickets', filters: [{ field: 'status', operator: 'is', value: 'open' }] },
+      { name: 'My tickets', filters: [{ field: 'owner', operator: 'is', value: userIds.dispatcher }] },
+      { name: 'Unassigned', filters: [{ field: 'owner', operator: 'is', value: 'unassigned' }] },
+      { name: 'All tickets', filters: [] },
+    ];
+
+    const viewRecords: Record<string, string> = {};
+    for (const v of dashboardViews) {
+      const [row] = await db.insert(views).values({
+        name: v.name,
+        filters: v.filters,
+        is_public: true,
+      }).returning();
+      if (row) viewRecords[v.name] = row.id;
+    }
+
+    const [dashboard] = await db.insert(dashboards).values({
+      name: 'Support overview',
+      description: 'Daily support team dashboard',
+      is_default: true,
+    }).returning();
+
+    if (dashboard) {
+      const widgetDefs = [
+        { view: 'Open tickets', type: 'count', title: 'Open tickets', x: 0, y: 0, w: 3, h: 1 },
+        { view: 'My tickets', type: 'count', title: 'My tickets', x: 3, y: 0, w: 3, h: 1 },
+        { view: 'Unassigned', type: 'count', title: 'Unassigned', x: 6, y: 0, w: 3, h: 1 },
+        { view: 'All tickets', type: 'count', title: 'Total tickets', x: 9, y: 0, w: 3, h: 1 },
+        { view: 'Open tickets', type: 'status_chart', title: 'Status breakdown', x: 0, y: 1, w: 4, h: 2 },
+        { view: 'Open tickets', type: 'ticket_list', title: 'Recent open', x: 4, y: 1, w: 5, h: 2, config: { limit: 5 } },
+        { view: 'All tickets', type: 'grouped_counts', title: 'By queue', x: 9, y: 1, w: 3, h: 2, config: { group_by: 'queue' } },
+      ];
+
+      for (const w of widgetDefs) {
+        await db.insert(dashboardWidgets).values({
+          dashboard_id: dashboard.id,
+          view_id: viewRecords[w.view],
+          title: w.title,
+          widget_type: w.type,
+          position: { x: w.x, y: w.y, w: w.w, h: w.h },
+          config: w.config ?? {},
+        });
+      }
+
+      console.log(`Seeded dashboard "${dashboard.name}" with ${widgetDefs.length} widgets`);
+    }
+
+    console.log('Demo data ready');
+  } finally {
+    await pool.end();
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

src/index.ts

@@ -4,12 +4,23 @@ import { createDb } from './db/index.ts';
 import type { Db } from './db/index.ts';
 import { errorHandler } from './middleware/error.ts';
 import { requestLogger } from './middleware/logging.ts';
+import { createAuthMiddleware } from './auth/middleware.ts';
 import healthRouter from './routes/health.ts';
 import { createTicketsRouter } from './routes/tickets.ts';
 import { createQueuesRouter } from './routes/queues.ts';
 import { createScripsRouter } from './routes/scrips.ts';
 import { createCustomFieldsRouter } from './routes/custom-fields.ts';
 import { createLifecyclesRouter } from './routes/lifecycles.ts';
+import { createUsersRouter } from './routes/users.ts';
+import { createTemplatesRouter } from './routes/templates.ts';
+import { createViewsRouter } from './routes/views.ts';
+import { createDashboardsRouter } from './routes/dashboards.ts';
+import { createTeamsRouter } from './routes/teams.ts';
+import { createAttachmentsRouter } from './routes/attachments.ts';
+import { createAuthRouter } from './routes/auth.ts';
+import { createQueuePermissionsRouter } from './routes/queue-permissions.ts';
+import { createNotificationsRouter } from './routes/notifications.ts';
+import { startScheduler } from './scrip/scheduler.ts';
 
 let db: Db | null = null;
 
@@ -25,12 +36,39 @@ const app = new Hono();
 app.use('*', requestLogger);
 app.onError(errorHandler);
 
+const { requireAuth, requireAdmin } = createAuthMiddleware(getDb());
+
+// Public routes
 app.route('/health', healthRouter);
-app.route('/tickets', createTicketsRouter(getDb()));
-app.route('/queues', createQueuesRouter(getDb()));
-app.route('/scrips', createScripsRouter(getDb()));
-app.route('/custom-fields', createCustomFieldsRouter(getDb()));
-app.route('/lifecycles', createLifecyclesRouter(getDb()));
+app.route('/', createAuthRouter(getDb()));
+
+// Ticket routes — require authentication
+const ticketsWithAuth = new Hono();
+ticketsWithAuth.use('*', requireAuth);
+ticketsWithAuth.route('/tickets', createTicketsRouter(getDb()));
+ticketsWithAuth.route('/', createNotificationsRouter(getDb()));
+app.route('/', ticketsWithAuth);
+
+// Attachment serving — require authentication
+const attachmentsWithAuth = new Hono();
+attachmentsWithAuth.use('*', requireAuth);
+attachmentsWithAuth.route('/', createAttachmentsRouter(getDb()));
+app.route('/', attachmentsWithAuth);
+
+// Admin routes — require admin role
+const admin = new Hono();
+admin.use('*', requireAdmin);
+admin.route('/queues', createQueuesRouter(getDb()));
+admin.route('/scrips', createScripsRouter(getDb()));
+admin.route('/custom-fields', createCustomFieldsRouter(getDb()));
+admin.route('/lifecycles', createLifecyclesRouter(getDb()));
+admin.route('/users', createUsersRouter(getDb()));
+admin.route('/templates', createTemplatesRouter(getDb()));
+admin.route('/views', createViewsRouter(getDb()));
+admin.route('/dashboards', createDashboardsRouter(getDb()));
+admin.route('/teams', createTeamsRouter(getDb()));
+admin.route('/', createQueuePermissionsRouter(getDb()));
+app.route('/', admin);
 
 export default app;
 export { app };
@@ -41,6 +79,10 @@ if (Bun.main === import.meta.path) {
     fetch: app.fetch,
     port: config.SERVER_PORT,
     hostname: config.SERVER_HOST,
+    development: false,
   });
   console.log(`Server running at http://${config.SERVER_HOST}:${config.SERVER_PORT}`);
+
+  // Start the scrip scheduler (runs every 5 minutes)
+  startScheduler(getDb());
 }

src/lifecycle/validator.ts

@@ -5,13 +5,17 @@ export interface LifecycleDefinition {
     inactive: string[];
   };
   transitions: Record<string, string[]>;
+  transition_rights?: Record<string, string>; // "from→to" → rightName
 }
 
 export interface ValidationResult {
   valid: boolean;
   error?: string;
+  requiredRight?: string; // Named right required for this transition, if any
 }
 
+const FALLBACK_RIGHT = 'ticket.modify';
+
 export class LifecycleValidator {
   validateTransition(
     lifecycleDef: LifecycleDefinition,
@@ -35,13 +39,15 @@ export class LifecycleValidator {
     const allowedTransitions = this.getAllowedTransitions(lifecycleDef, fromStatus);
 
     if (allowedTransitions.includes(toStatus)) {
-      return { valid: true };
+      const right = this.getRequiredRight(lifecycleDef, fromStatus, toStatus);
+      return { valid: true, requiredRight: right ?? FALLBACK_RIGHT };
     }
 
     // Also handle wildcard "*" -> any transition
     const wildcardTransitions = this.getAllowedTransitions(lifecycleDef, '*');
     if (wildcardTransitions.includes(toStatus)) {
-      return { valid: true };
+      const right = this.getRequiredRight(lifecycleDef, fromStatus, toStatus);
+      return { valid: true, requiredRight: right ?? FALLBACK_RIGHT };
     }
 
     return {
@@ -50,6 +56,37 @@ export class LifecycleValidator {
     };
   }
 
+  /**
+   * Get the required right for a transition using RT's 4-level priority:
+   * 1. exact "from→to"
+   * 2. wildcard from "*→to"
+   * 3. wildcard to "from→*"
+   * 4. full wildcard "*→*"
+   * 5. fallback: ticket.modify
+   */
+  getRequiredRight(
+    lifecycleDef: LifecycleDefinition,
+    fromStatus: string,
+    toStatus: string,
+  ): string | null {
+    const rights = lifecycleDef.transition_rights ?? {};
+
+    // Priority 1: exact match
+    if (rights[`${fromStatus}→${toStatus}`]) return rights[`${fromStatus}→${toStatus}`];
+
+    // Priority 2: wildcard from
+    if (rights[`*→${toStatus}`]) return rights[`*→${toStatus}`];
+
+    // Priority 3: wildcard to
+    if (rights[`${fromStatus}→*`]) return rights[`${fromStatus}→*`];
+
+    // Priority 4: full wildcard
+    if (rights['*→*']) return rights['*→*'];
+
+    // Priority 5: fallback
+    return null;
+  }
+
   isResolvedStatus(lifecycleDef: LifecycleDefinition, status: string): boolean {
     return lifecycleDef.statuses.inactive.includes(status);
   }
@@ -58,16 +95,12 @@ export class LifecycleValidator {
     lifecycleDef: LifecycleDefinition,
     fromStatus: string,
   ): string[] {
-    // Direct transition
     if (lifecycleDef.transitions[fromStatus]) {
       return lifecycleDef.transitions[fromStatus]!;
     }
-
-    // Wildcard transitions
     if (lifecycleDef.transitions['*']) {
       return lifecycleDef.transitions['*']!;
     }
-
     return [];
   }
 }

src/models/custom-field-validation.ts

@@ -0,0 +1,157 @@
+import type { CustomField } from './custom-field.ts';
+
+export interface ValidationResult {
+  valid: boolean;
+  error?: string;
+}
+
+/**
+ * Dispatch to the correct type-specific validator based on field.field_type.
+ */
+export function validateCustomFieldValue(
+  field: CustomField,
+  value: string,
+): ValidationResult {
+  if (!value) return { valid: true };
+
+  const config = (field.validation_config ?? {}) as Record<string, unknown>;
+
+  // Backward-compatible pattern check (field-level pattern, not validation_config)
+  if (field.pattern) {
+    try {
+      const regex = new RegExp(field.pattern);
+      if (!regex.test(value)) {
+        return { valid: false, error: 'Value does not match the required pattern' };
+      }
+    } catch {
+      // Invalid regex — skip
+    }
+  }
+
+  switch (field.field_type) {
+    case 'Number':
+      return validateNumberValue(value, config);
+    case 'Date':
+      return validateDateValue(value, config);
+    case 'DateTime':
+      return validateDateTimeValue(value, config);
+    case 'SelectOne':
+    case 'SelectMultiple':
+      return validateSelectValue(value, field, config);
+    case 'Text':
+    case 'Textarea':
+      return validateTextValue(value, config);
+    default:
+      return { valid: true };
+  }
+}
+
+function validateNumberValue(
+  value: string,
+  config: Record<string, unknown>,
+): ValidationResult {
+  const num = Number(value);
+  if (isNaN(num)) {
+    return { valid: false, error: 'Value must be a number' };
+  }
+  if (config.min !== undefined && num < Number(config.min)) {
+    return { valid: false, error: `Value must be at least ${config.min}` };
+  }
+  if (config.max !== undefined && num > Number(config.max)) {
+    return { valid: false, error: `Value must be at most ${config.max}` };
+  }
+  return { valid: true };
+}
+
+function validateDateValue(
+  value: string,
+  config: Record<string, unknown>,
+): ValidationResult {
+  // Accept YYYY-MM-DD format
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return { valid: false, error: 'Value must be a date in YYYY-MM-DD format' };
+  }
+  const parsed = new Date(value);
+  if (isNaN(parsed.getTime())) {
+    return { valid: false, error: 'Invalid date' };
+  }
+  if (config.min_date) {
+    const minDate = new Date(String(config.min_date));
+    if (!isNaN(minDate.getTime()) && parsed < minDate) {
+      return { valid: false, error: `Date must be on or after ${config.min_date}` };
+    }
+  }
+  if (config.max_date) {
+    const maxDate = new Date(String(config.max_date));
+    if (!isNaN(maxDate.getTime()) && parsed > maxDate) {
+      return { valid: false, error: `Date must be on or before ${config.max_date}` };
+    }
+  }
+  return { valid: true };
+}
+
+function validateDateTimeValue(
+  value: string,
+  config: Record<string, unknown>,
+): ValidationResult {
+  const parsed = new Date(value);
+  if (isNaN(parsed.getTime())) {
+    return { valid: false, error: 'Value must be a valid ISO 8601 datetime' };
+  }
+  if (config.min_date) {
+    const minDate = new Date(String(config.min_date));
+    if (!isNaN(minDate.getTime()) && parsed < minDate) {
+      return { valid: false, error: `Datetime must be on or after ${config.min_date}` };
+    }
+  }
+  if (config.max_date) {
+    const maxDate = new Date(String(config.max_date));
+    if (!isNaN(maxDate.getTime()) && parsed > maxDate) {
+      return { valid: false, error: `Datetime must be on or before ${config.max_date}` };
+    }
+  }
+  return { valid: true };
+}
+
+function validateSelectValue(
+  value: string,
+  field: CustomField,
+  config: Record<string, unknown>,
+): ValidationResult {
+  const allowed: string[] = [];
+
+  // Check validation_config.options first, then fall back to field.values
+  if (Array.isArray(config.options)) {
+    allowed.push(...config.options.map(String));
+  } else if (Array.isArray(field.values)) {
+    allowed.push(...field.values.map(String));
+  }
+
+  if (allowed.length > 0 && !allowed.includes(value)) {
+    return { valid: false, error: `Value is not an allowed option. Allowed: ${allowed.join(', ')}` };
+  }
+  return { valid: true };
+}
+
+function validateTextValue(
+  value: string,
+  config: Record<string, unknown>,
+): ValidationResult {
+  if (config.min_length !== undefined && value.length < Number(config.min_length)) {
+    return { valid: false, error: `Value must be at least ${config.min_length} characters` };
+  }
+  if (config.max_length !== undefined && value.length > Number(config.max_length)) {
+    return { valid: false, error: `Value must be at most ${config.max_length} characters` };
+  }
+  if (config.pattern && typeof config.pattern === 'string') {
+    try {
+      const regex = new RegExp(config.pattern);
+      if (!regex.test(value)) {
+        return { valid: false, error: 'Value does not match the required pattern' };
+      }
+    } catch {
+      // Invalid regex — skip validation
+    }
+  }
+  return { valid: true };
+}

src/models/custom-field.ts

@@ -1,13 +1,71 @@
 import type { InferSelectModel } from 'drizzle-orm';
+import { z } from 'zod';
 import { customFields } from '../db/schema.ts';
 
 export type CustomField = InferSelectModel<typeof customFields>;
 
 export const CustomFieldType = {
+  Text: 'Text',
+  Textarea: 'Textarea',
   SelectOne: 'SelectOne',
   SelectMultiple: 'SelectMultiple',
-  Text: 'Text',
   Date: 'Date',
+  DateTime: 'DateTime',
+  Number: 'Number',
 } as const;
 
 export type CustomFieldType = (typeof CustomFieldType)[keyof typeof CustomFieldType];
+
+export const CUSTOM_FIELD_TYPES = Object.values(CustomFieldType) as [string, ...string[]];
+
+// Validation config per type
+export const NumberValidationConfig = z.object({
+  min: z.number().optional(),
+  max: z.number().optional(),
+}).optional();
+
+export const DateValidationConfig = z.object({
+  min_date: z.string().optional(),
+  max_date: z.string().optional(),
+}).optional();
+
+export const DateTimeValidationConfig = z.object({
+  min_date: z.string().optional(),
+  max_date: z.string().optional(),
+}).optional();
+
+export const TextValidationConfig = z.object({
+  min_length: z.number().int().min(0).optional(),
+  max_length: z.number().int().min(0).optional(),
+  pattern: z.string().optional(),
+}).optional();
+
+export const SelectValidationConfig = z.object({
+  options: z.array(z.string()).optional(),
+}).optional();
+
+// Generic validation config — permissive at the API boundary, refined per type in validation
+export const CustomFieldValidationConfig = z.record(z.unknown()).nullable().default(null);
+
+// Schemas for create/update
+export const CreateCustomFieldSchema = z.object({
+  key: z.string().optional(),
+  name: z.string().min(1),
+  field_type: z.enum(CUSTOM_FIELD_TYPES as [string, ...string[]]),
+  values: z.unknown().nullable().optional(),
+  max_values: z.number().int().min(1).optional().default(1),
+  pattern: z.string().nullable().optional(),
+  validation_config: z.record(z.unknown()).nullable().optional(),
+  default_value: z.string().nullable().optional(),
+});
+
+export const UpdateCustomFieldSchema = z.object({
+  key: z.string().optional(),
+  name: z.string().min(1).optional(),
+  field_type: z.enum(CUSTOM_FIELD_TYPES as [string, ...string[]]).optional(),
+  values: z.unknown().nullable().optional(),
+  max_values: z.number().int().min(1).optional(),
+  pattern: z.string().nullable().optional(),
+  validation_config: z.record(z.unknown()).nullable().optional(),
+  default_value: z.string().nullable().optional(),
+});

src/models/queue.ts

@@ -8,4 +8,5 @@ export const CreateQueueSchema = z.object({
   name: z.string().min(1),
   description: z.string().optional(),
   lifecycle_id: z.string().uuid().optional(),
+  team_id: z.string().uuid().nullable().optional(),
 });

src/models/ticket.ts

@@ -7,16 +7,21 @@ export type Ticket = InferSelectModel<typeof tickets>;
 export const CreateTicketSchema = z.object({
   subject: z.string().min(1),
   queue_id: z.string().uuid(),
+  description: z.string().trim().optional(),
+  custom_fields: z.record(z.string(), z.string()).optional(),
 });
 
 export const UpdateTicketSchema = z.object({
   subject: z.string().min(1).optional(),
   status: z.string().min(1).optional(),
-  owner_id: z.string().uuid().optional(),
+  owner_id: z.string().uuid().nullable().optional(),
+  team_id: z.string().uuid().nullable().optional(),
 });
 
 export const CommentSchema = z.object({
   body: z.string().min(1),
   creator_id: z.string().optional().default('00000000-0000-0000-0000-000000000000'),
   internal: z.boolean().optional().default(false),
+  attachment_ids: z.array(z.string()).optional(),
+  time_worked_minutes: z.number().int().min(0).optional(),
 });

src/models/transaction.ts

@@ -11,6 +11,8 @@ export const TransactionType = {
   Comment: 'Comment',
   CustomField: 'CustomField',
   Correspond: 'Correspond',
+  LinkCreate: 'LinkCreate',
+  LinkDelete: 'LinkDelete',
 } as const;
 
 export type TransactionType = (typeof TransactionType)[keyof typeof TransactionType];

src/routes/attachments.ts

@@ -0,0 +1,190 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { existsSync, mkdirSync, createReadStream } from 'node:fs';
+import { join, extname } from 'node:path';
+import { writeFile, unlink } from 'node:fs/promises';
+import { randomUUID } from 'node:crypto';
+import type { Db } from '../db/index.ts';
+import { config } from '../config.ts';
+import { transactionAttachments, transactions, tickets } from '../db/schema.ts';
+import { eq, inArray } from 'drizzle-orm';
+
+function ensureDir(dir: string) {
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+}
+
+function storageDir(): string {
+  const now = new Date();
+  const year = now.getFullYear().toString();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const dir = join(config.UPLOAD_DIR, year, month);
+  ensureDir(dir);
+  return dir;
+}
+
+const MIME_MAP: Record<string, string> = {
+  '.txt': 'text/plain',
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.json': 'application/json',
+  '.xml': 'application/xml',
+  '.pdf': 'application/pdf',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.zip': 'application/zip',
+  '.gz': 'application/gzip',
+  '.tar': 'application/x-tar',
+  '.csv': 'text/csv',
+  '.doc': 'application/msword',
+  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  '.xls': 'application/vnd.ms-excel',
+  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  '.ppt': 'application/vnd.ms-powerpoint',
+  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  '.mp4': 'video/mp4',
+  '.mp3': 'audio/mpeg',
+  '.wav': 'audio/wav',
+  '.mov': 'video/quicktime',
+  '.avif': 'image/avif',
+  '.heic': 'image/heic',
+  '.heif': 'image/heif',
+  '.log': 'text/plain',
+  '.md': 'text/markdown',
+  '.yaml': 'text/yaml',
+  '.yml': 'text/yaml',
+};
+
+function guessMimeType(filename: string): string {
+  const ext = extname(filename).toLowerCase();
+  return MIME_MAP[ext] || 'application/octet-stream';
+}
+
+export function createAttachmentsRouter(db: Db): Hono {
+  const router = new Hono();
+
+  // POST /tickets/:id/attachments — upload files (returns metadata, no transaction created yet)
+  router.post('/tickets/:id/attachments', async (c) => {
+    const ticketId = Number(c.req.param('id'));
+
+    const ticket = await db.query.tickets.findFirst({
+      where: eq(tickets.id, ticketId),
+    });
+
+    if (!ticket) {
+      throw new HTTPException(404, { message: 'Ticket not found' });
+    }
+
+    const formData = await c.req.formData();
+    const files = formData.getAll('files') as File[];
+
+    if (files.length === 0) {
+      throw new HTTPException(422, { message: 'No files provided' });
+    }
+
+    const dir = storageDir();
+    const result: Array<{
+      id: string;
+      filename: string;
+      mime_type: string;
+      size_bytes: number;
+    }> = [];
+
+    for (const file of files) {
+      if (!(file instanceof File)) continue;
+
+      const ext = extname(file.name);
+      const storedName = `${randomUUID()}${ext}`;
+      const storagePath = join(dir, storedName);
+      const buffer = Buffer.from(await file.arrayBuffer());
+      await writeFile(storagePath, buffer);
+
+      const [saved] = await db.insert(transactionAttachments).values({
+        filename: file.name,
+        mime_type: file.type || guessMimeType(file.name),
+        size_bytes: buffer.length,
+        storage_path: storagePath,
+      }).returning();
+
+      if (saved) {
+        result.push({
+          id: saved.id,
+          filename: saved.filename,
+          mime_type: saved.mime_type,
+          size_bytes: saved.size_bytes,
+        });
+      }
+    }
+
+    return c.json({ attachments: result }, 201);
+  });
+
+  // GET /attachments/:id — serve/download an attachment
+  router.get('/attachments/:id', async (c) => {
+    const attachmentId = c.req.param('id');
+
+    const attachment = await db.query.transactionAttachments.findFirst({
+      where: eq(transactionAttachments.id, attachmentId),
+    });
+
+    if (!attachment) {
+      throw new HTTPException(404, { message: 'Attachment not found' });
+    }
+
+    if (!existsSync(attachment.storage_path)) {
+      throw new HTTPException(404, { message: 'Attachment file not found on disk' });
+    }
+
+    const disposition = c.req.query('download') === 'true' ? 'attachment' : 'inline';
+    const stream = createReadStream(attachment.storage_path);
+
+    return new Response(stream as any, {
+      status: 200,
+      headers: {
+        'Content-Type': attachment.mime_type,
+        'Content-Disposition': `${disposition}; filename="${encodeURIComponent(attachment.filename)}"`,
+        'Content-Length': String(attachment.size_bytes),
+      },
+    });
+  });
+
+  // GET /tickets/:id/attachments — list attachments for a ticket
+  router.get('/tickets/:id/attachments', async (c) => {
+    const ticketId = Number(c.req.param('id'));
+
+    const ticket = await db.query.tickets.findFirst({
+      where: eq(tickets.id, ticketId),
+    });
+
+    if (!ticket) {
+      throw new HTTPException(404, { message: 'Ticket not found' });
+    }
+
+    const ticketTransactions = await db.query.transactions.findMany({
+      where: eq(transactions.ticket_id, ticketId),
+    });
+
+    const txIds = ticketTransactions.map((tx) => tx.id);
+    if (txIds.length === 0) {
+      return c.json([]);
+    }
+
+    const attachments = await Promise.all(
+      txIds.map((txId) =>
+        db.query.transactionAttachments.findMany({
+          where: eq(transactionAttachments.transaction_id, txId),
+        })
+      )
+    );
+
+    return c.json(attachments.flat());
+  });
+
+  return router;
+}

src/routes/auth.ts

@@ -0,0 +1,132 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { z } from 'zod/v4';
+import type { Db } from '../db/index.ts';
+import { users, apiTokens } from '../db/schema.ts';
+import { eq, desc, sql } from 'drizzle-orm';
+import { createToken, createAuthMiddleware } from '../auth/middleware.ts';
+
+const LoginSchema = z.object({
+  username: z.string().min(1),
+  password: z.string().min(1),
+});
+
+export function createAuthRouter(db: Db): Hono {
+  const router = new Hono();
+  const { requireAuth } = createAuthMiddleware(db);
+
+  // POST /auth/login
+  router.post('/auth/login', async (c) => {
+    const body = await c.req.json();
+    const parsed = LoginSchema.parse(body);
+
+    const user = await db.query.users.findFirst({
+      where: eq(users.username, parsed.username),
+    });
+
+    if (!user || !user.password_hash) {
+      throw new HTTPException(401, { message: 'Invalid username or password' });
+    }
+
+    const valid = await Bun.password.verify(parsed.password, user.password_hash);
+    if (!valid) {
+      throw new HTTPException(401, { message: 'Invalid username or password' });
+    }
+
+    const token = await createToken({
+      id: user.id,
+      username: user.username,
+      role: user.role,
+    });
+
+    return c.json({
+      token,
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        role: user.role,
+      },
+    });
+  });
+
+  // GET /auth/me — return current user from token
+  router.get('/auth/me', requireAuth, async (c) => {
+    const authUser = c.get('user');
+    const user = await db.query.users.findFirst({
+      where: eq(users.id, authUser.userId),
+    });
+
+    if (!user) {
+      throw new HTTPException(404, { message: 'User not found' });
+    }
+
+    return c.json({
+      id: user.id,
+      username: user.username,
+      email: user.email,
+      role: user.role,
+    });
+  });
+
+  // POST /auth/tokens — create API token
+  router.post('/auth/tokens', requireAuth, async (c) => {
+    const body = await c.req.json();
+    const name = String(body.name || 'API token').trim();
+    const authUser = c.get('user');
+
+    const rawToken = `tessera_${crypto.randomUUID().replace(/-/g, '')}`;
+    const tokenHash = await Bun.password.hash(rawToken);
+
+    const [token] = await db.insert(apiTokens).values({
+      user_id: authUser.userId,
+      name,
+      token_hash: tokenHash,
+    }).returning();
+
+    if (!token) {
+      throw new HTTPException(500, { message: 'Failed to create token' });
+    }
+
+    return c.json({
+      id: token.id,
+      name: token.name,
+      token: rawToken,
+      created_at: token.created_at,
+    }, 201);
+  });
+
+  // GET /auth/tokens — list tokens
+  router.get('/auth/tokens', requireAuth, async (c) => {
+    const authUser = c.get('user');
+    const result = await db.query.apiTokens.findMany({
+      where: eq(apiTokens.user_id, authUser.userId),
+      orderBy: desc(apiTokens.created_at),
+    });
+    return c.json(result.map((t) => ({
+      id: t.id,
+      name: t.name,
+      last_used_at: t.last_used_at,
+      created_at: t.created_at,
+    })));
+  });
+
+  // DELETE /auth/tokens/:id — revoke token
+  router.delete('/auth/tokens/:id', requireAuth, async (c) => {
+    const id = c.req.param('id');
+    const authUser = c.get('user');
+
+    // Verify ownership before revoke
+    const allTokens = await db.query.apiTokens.findMany();
+    const existing = allTokens.find((t) => t.id === id && t.user_id === authUser.userId);
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Token not found' });
+    }
+
+    // Raw delete to avoid Drizzle type issue with new apiTokens table
+    await db.execute(sql`DELETE FROM api_tokens WHERE id = ${id}`);
+    return c.json({ ok: true });
+  });
+
+  return router;
+}

src/routes/custom-fields.ts

@@ -1,8 +1,23 @@
 import { Hono } from 'hono';
 import { HTTPException } from 'hono/http-exception';
 import type { Db } from '../db/index.ts';
-import { customFields } from '../db/schema.ts';
-import { asc } from 'drizzle-orm';
+import { customFields, queueCustomFields } from '../db/schema.ts';
+import { and, asc, eq } from 'drizzle-orm';
+import { CreateCustomFieldSchema, UpdateCustomFieldSchema } from '../models/custom-field.ts';
+import { ZodError } from 'zod';
+
+function makeFieldKey(value: string): string {
+  const key = value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '');
+  return key || 'field';
+}
+
+function formatZodError(err: ZodError): string {
+  return err.issues.map((i) => `${i.path.join('.')}: ${i.message}`).join('; ');
+}
 
 export function createCustomFieldsRouter(db: Db): Hono {
   const router = new Hono();
@@ -16,18 +31,28 @@ export function createCustomFieldsRouter(db: Db): Hono {
 
   router.post('/', async (c) => {
     const body = await c.req.json();
-    const { name, field_type, values, max_values, pattern } = body;
 
-    if (!name || !field_type) {
-      throw new HTTPException(400, { message: 'name and field_type are required' });
+    let parsed;
+    try {
+      parsed = CreateCustomFieldSchema.parse(body);
+    } catch (err) {
+      if (err instanceof ZodError) {
+        throw new HTTPException(400, { message: formatZodError(err) });
+      }
+      throw err;
     }
 
+    const key = makeFieldKey(String(parsed.key ?? parsed.name ?? ''));
+
     const [cf] = await db.insert(customFields).values({
-      name,
-      field_type,
-      values: values ?? null,
-      max_values: max_values ?? 1,
-      pattern: pattern ?? null,
+      key,
+      name: parsed.name,
+      field_type: parsed.field_type,
+      values: (parsed.values as any) ?? null,
+      max_values: parsed.max_values ?? 1,
+      pattern: parsed.pattern ?? null,
+      validation_config: (parsed.validation_config as any) ?? null,
+      default_value: parsed.default_value ?? null,
     }).returning();
 
     if (!cf) {
@@ -37,5 +62,110 @@ export function createCustomFieldsRouter(db: Db): Hono {
     return c.json(cf, 201);
   });
 
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+
+    let parsed;
+    try {
+      parsed = UpdateCustomFieldSchema.parse(body);
+    } catch (err) {
+      if (err instanceof ZodError) {
+        throw new HTTPException(400, { message: formatZodError(err) });
+      }
+      throw err;
+    }
+
+    const existing = await db.query.customFields.findFirst({
+      where: eq(customFields.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Custom field not found' });
+    }
+
+    const updateData: Partial<typeof customFields.$inferInsert> = {};
+    if (parsed.key !== undefined) updateData.key = makeFieldKey(String(parsed.key));
+    if (parsed.name !== undefined) updateData.name = String(parsed.name);
+    if (parsed.field_type !== undefined) updateData.field_type = String(parsed.field_type);
+    if (parsed.values !== undefined) updateData.values = parsed.values ?? null;
+    if (parsed.max_values !== undefined) updateData.max_values = Number(parsed.max_values);
+    if (parsed.pattern !== undefined) updateData.pattern = parsed.pattern ? String(parsed.pattern) : null;
+    if (parsed.validation_config !== undefined) {
+      updateData.validation_config = (parsed.validation_config as any) ?? null;
+    }
+    if (parsed.default_value !== undefined) {
+      updateData.default_value = parsed.default_value ?? null;
+    }
+
+    const [updated] = await db.update(customFields)
+      .set(updateData)
+      .where(eq(customFields.id, id))
+      .returning();
+
+    return c.json(updated);
+  });
+
+  router.get('/queues/:queueId', async (c) => {
+    const queueId = c.req.param('queueId');
+    const assignments = await db.query.queueCustomFields.findMany({
+      where: eq(queueCustomFields.queue_id, queueId),
+      orderBy: asc(queueCustomFields.sort_order),
+    });
+    const fieldIds = assignments.map((assignment) => assignment.custom_field_id);
+    const fields = fieldIds.length > 0
+      ? await db.query.customFields.findMany({
+          where: (table, { inArray }) => inArray(table.id, fieldIds),
+        })
+      : [];
+    const fieldMap = new Map(fields.map((field) => [field.id, field]));
+
+    return c.json(assignments.map((assignment) => ({
+      ...assignment,
+      custom_field: fieldMap.get(assignment.custom_field_id) ?? null,
+    })));
+  });
+
+  router.post('/queues/:queueId', async (c) => {
+    const queueId = c.req.param('queueId');
+    const body = await c.req.json();
+    const customFieldId = body.custom_field_id;
+
+    if (!customFieldId) {
+      throw new HTTPException(400, { message: 'custom_field_id is required' });
+    }
+
+    const [assignment] = await db.insert(queueCustomFields).values({
+      queue_id: queueId,
+      custom_field_id: customFieldId,
+      sort_order: Number(body.sort_order ?? 0),
+    }).onConflictDoNothing().returning();
+
+    if (assignment) {
+      return c.json(assignment, 201);
+    }
+
+    const existing = await db.query.queueCustomFields.findFirst({
+      where: and(
+        eq(queueCustomFields.queue_id, queueId),
+        eq(queueCustomFields.custom_field_id, customFieldId),
+      ),
+    });
+
+    return c.json(existing, 200);
+  });
+
+  router.delete('/queues/:queueId/:fieldId', async (c) => {
+    const queueId = c.req.param('queueId');
+    const fieldId = c.req.param('fieldId');
+
+    await db.delete(queueCustomFields).where(and(
+      eq(queueCustomFields.queue_id, queueId),
+      eq(queueCustomFields.custom_field_id, fieldId),
+    ));
+
+    return c.json({ ok: true });
+  });
+
   return router;
 }

src/routes/dashboards.ts

@@ -0,0 +1,465 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { asc, eq } from 'drizzle-orm';
+import type { Db } from '../db/index.ts';
+import {
+  dashboards,
+  dashboardWidgets,
+  tickets,
+  customFieldValues,
+  customFields,
+  lifecycles,
+  queues,
+  views,
+} from '../db/schema.ts';
+
+function statusClass(def: { statuses: { initial: string[]; active: string[]; inactive: string[] } }, status: string): string {
+  if (def.statuses.initial.includes(status)) return 'initial';
+  if (def.statuses.active.includes(status)) return 'active';
+  if (def.statuses.inactive.includes(status)) return 'inactive';
+  return 'unknown';
+}
+
+export function createDashboardsRouter(db: Db): Hono {
+  const router = new Hono();
+
+  // ── Dashboards CRUD ──
+
+  router.get('/', async (c) => {
+    const result = await db.query.dashboards.findMany({
+      orderBy: asc(dashboards.name),
+    });
+    return c.json(result);
+  });
+
+  router.post('/', async (c) => {
+    const body = await c.req.json();
+    const name = String(body.name ?? '').trim();
+    if (!name) {
+      throw new HTTPException(400, { message: 'name is required' });
+    }
+
+    const [dashboard] = await db.insert(dashboards).values({
+      name,
+      description: body.description ?? null,
+      team_id: body.team_id || null,
+      layout: body.layout ?? [],
+      is_default: body.is_default ?? false,
+    }).returning();
+
+    if (!dashboard) {
+      throw new HTTPException(500, { message: 'Failed to create dashboard' });
+    }
+
+    return c.json(dashboard, 201);
+  });
+
+  router.get('/:id', async (c) => {
+    const id = c.req.param('id');
+    const dashboard = await db.query.dashboards.findFirst({
+      where: eq(dashboards.id, id),
+    });
+
+    if (!dashboard) {
+      throw new HTTPException(404, { message: 'Dashboard not found' });
+    }
+
+    const widgets = await db.query.dashboardWidgets.findMany({
+      where: eq(dashboardWidgets.dashboard_id, id),
+      orderBy: asc(dashboardWidgets.created_at),
+    });
+
+    return c.json({ ...dashboard, widgets });
+  });
+
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+
+    const existing = await db.query.dashboards.findFirst({
+      where: eq(dashboards.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Dashboard not found' });
+    }
+
+    const updateData: Partial<typeof dashboards.$inferInsert> = {};
+    if (body.name !== undefined) updateData.name = String(body.name).trim();
+    if (body.description !== undefined) updateData.description = body.description ?? null;
+    if (body.layout !== undefined) updateData.layout = body.layout;
+    if (body.team_id !== undefined) updateData.team_id = body.team_id || null;
+    if (body.is_default !== undefined) {
+      updateData.is_default = body.is_default;
+      if (body.is_default) {
+        await db.update(dashboards)
+          .set({ is_default: false })
+          .where(eq(dashboards.is_default, true));
+      }
+    }
+
+    const [updated] = await db.update(dashboards)
+      .set(updateData)
+      .where(eq(dashboards.id, id))
+      .returning();
+
+    return c.json(updated);
+  });
+
+  router.delete('/:id', async (c) => {
+    const id = c.req.param('id');
+    const existing = await db.query.dashboards.findFirst({
+      where: eq(dashboards.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Dashboard not found' });
+    }
+
+    await db.delete(dashboards).where(eq(dashboards.id, id));
+    return c.json({ ok: true });
+  });
+
+  // ── Widgets CRUD ──
+
+  router.get('/:id/widgets', async (c) => {
+    const dashboardId = c.req.param('id');
+    const result = await db.query.dashboardWidgets.findMany({
+      where: eq(dashboardWidgets.dashboard_id, dashboardId),
+      orderBy: asc(dashboardWidgets.created_at),
+    });
+    return c.json(result);
+  });
+
+  router.post('/:id/widgets', async (c) => {
+    const dashboardId = c.req.param('id');
+    const dashboard = await db.query.dashboards.findFirst({
+      where: eq(dashboards.id, dashboardId),
+    });
+
+    if (!dashboard) {
+      throw new HTTPException(404, { message: 'Dashboard not found' });
+    }
+
+    const body = await c.req.json();
+    const title = String(body.title ?? 'Widget').trim();
+    const widgetType = String(body.widget_type ?? 'count').trim();
+    const viewId = String(body.view_id ?? '').trim();
+
+    if (!viewId) {
+      throw new HTTPException(400, { message: 'view_id is required' });
+    }
+
+    const [widget] = await db.insert(dashboardWidgets).values({
+      dashboard_id: dashboardId,
+      view_id: viewId,
+      title,
+      widget_type: widgetType,
+      position: body.position ?? { x: 0, y: 0, w: 4, h: 2 },
+      config: body.config ?? {},
+    }).returning();
+
+    if (!widget) {
+      throw new HTTPException(500, { message: 'Failed to create widget' });
+    }
+
+    return c.json(widget, 201);
+  });
+
+  router.patch('/:id/widgets/:widgetId', async (c) => {
+    const widgetId = c.req.param('widgetId');
+    const body = await c.req.json();
+
+    const existing = await db.query.dashboardWidgets.findFirst({
+      where: eq(dashboardWidgets.id, widgetId),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Widget not found' });
+    }
+
+    const updateData: Partial<typeof dashboardWidgets.$inferInsert> = {};
+    if (body.title !== undefined) updateData.title = String(body.title).trim();
+    if (body.widget_type !== undefined) updateData.widget_type = String(body.widget_type);
+    if (body.position !== undefined) updateData.position = body.position;
+    if (body.config !== undefined) updateData.config = body.config;
+
+    const [updated] = await db.update(dashboardWidgets)
+      .set(updateData)
+      .where(eq(dashboardWidgets.id, widgetId))
+      .returning();
+
+    return c.json(updated);
+  });
+
+  router.delete('/:id/widgets/:widgetId', async (c) => {
+    const widgetId = c.req.param('widgetId');
+    const existing = await db.query.dashboardWidgets.findFirst({
+      where: eq(dashboardWidgets.id, widgetId),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Widget not found' });
+    }
+
+    await db.delete(dashboardWidgets).where(eq(dashboardWidgets.id, widgetId));
+    return c.json({ ok: true });
+  });
+
+  // ── Widget data endpoint ──
+
+  router.get('/:id/widgets/:widgetId/data', async (c) => {
+    const widgetId = c.req.param('widgetId');
+
+    const widget = await db.query.dashboardWidgets.findFirst({
+      where: eq(dashboardWidgets.id, widgetId),
+    });
+
+    if (!widget) {
+      throw new HTTPException(404, { message: 'Widget not found' });
+    }
+
+    const view = await db.query.views.findFirst({
+      where: eq(views.id, widget.view_id),
+    });
+
+    if (!view) {
+      return c.json({ error: 'View not found' }, 404);
+    }
+
+    // Apply saved view filters
+    const savedFilters = (view.filters ?? []) as { field: string; operator: string; value: string }[];
+    let result = await db.query.tickets.findMany({
+      orderBy: asc(tickets.created_at),
+    });
+
+    for (const f of savedFilters) {
+      if (f.field === 'status') {
+        result = result.filter((t) => t.status === f.value);
+      } else if (f.field === 'queue') {
+        result = result.filter((t) => t.queue_id === f.value);
+      } else if (f.field === 'owner') {
+        result = f.value === 'unassigned'
+          ? result.filter((t) => !t.owner_id)
+          : result.filter((t) => t.owner_id === f.value);
+      } else if (f.field.startsWith('cf.')) {
+        const cfKey = f.field.slice(3);
+        const ticketIds = result.map((t) => t.id);
+        if (ticketIds.length > 0) {
+          const cfValues = await db.query.customFieldValues.findMany({
+            where: (table, { and, inArray, eq }) =>
+              and(
+                inArray(table.ticket_id, ticketIds),
+                eq(table.value, f.value),
+              ),
+          });
+          const matchingIds = new Set(cfValues.map((v) => v.ticket_id));
+          // Also find the field ID for the key
+          const cfField = await db.query.customFields.findFirst({
+            where: eq(customFields.key, cfKey),
+          });
+          if (cfField) {
+            const cfValuesForField = await db.query.customFieldValues.findMany({
+              where: (table, { and, inArray, eq }) =>
+                and(
+                  inArray(table.ticket_id, ticketIds),
+                  eq(table.custom_field_id, cfField.id),
+                  eq(table.value, f.value),
+                ),
+            });
+            const matchSet = new Set(cfValuesForField.map((v) => v.ticket_id));
+            result = result.filter((t) => matchSet.has(t.id));
+          } else {
+            result = result.filter((t) => matchingIds.has(t.id));
+          }
+        }
+      }
+    }
+
+    // Widget-level filters override or add to view filters
+    const widgetFilters = (widget.config as Record<string, unknown>)?.filters as Array<{ field: string; operator: string; value: string }> | undefined;
+    if (widgetFilters) {
+      for (const f of widgetFilters) {
+        if (f.field === 'status') {
+          if (f.operator === 'is_not') result = result.filter((t) => t.status !== f.value);
+          else result = result.filter((t) => t.status === f.value);
+        } else if (f.field === 'queue') {
+          if (f.operator === 'is_not') result = result.filter((t) => t.queue_id !== f.value);
+          else result = result.filter((t) => t.queue_id === f.value);
+        } else if (f.field === 'owner') {
+          if (f.value === 'unassigned') result = result.filter((t) => !t.owner_id);
+          else result = result.filter((t) => t.owner_id === f.value);
+        } else if (f.field === 'q') {
+          const q = f.value.toLowerCase();
+          result = result.filter((t) =>
+            t.subject.toLowerCase().includes(q) ||
+            String(t.id).includes(q) ||
+            (queueName.get(t.queue_id) ?? '').toLowerCase().includes(q)
+          );
+        }
+      }
+    }
+
+    const limit = (widget.config as Record<string, unknown>)?.limit as number ?? 5;
+
+    // Find lifecycle for status classification
+    const queueIds = [...new Set(result.map((r) => r.queue_id))];
+    const queueRecords = queueIds.length > 0
+      ? await db.query.queues.findMany({
+          where: (table, { inArray }) => inArray(table.id, queueIds),
+        })
+      : [];
+    const lifecycleIds = [...new Set(queueRecords.map((q) => q.lifecycle_id).filter(Boolean))] as string[];
+    const lifecycleRecords = lifecycleIds.length > 0
+      ? await db.query.lifecycles.findMany({
+          where: (table, { inArray }) => inArray(table.id, lifecycleIds),
+        })
+      : [];
+    const lifecycleByQueue = new Map<string, { statuses: { initial: string[]; active: string[]; inactive: string[] } }>();
+    for (const qr of queueRecords) {
+      if (qr.lifecycle_id) {
+        const lc = lifecycleRecords.find((l) => l.id === qr.lifecycle_id);
+        if (lc) lifecycleByQueue.set(qr.id, lc.definition as any);
+      }
+    }
+
+    // Get owner usernames
+    const ownerIds = [...new Set(result.map((t) => t.owner_id).filter(Boolean))] as string[];
+    const ownerUsers = ownerIds.length > 0
+      ? await db.query.users.findMany({
+          where: (table, { inArray }) => inArray(table.id, ownerIds),
+        })
+      : [];
+    const ownerName = new Map(ownerUsers.map((u) => [u.id, u.username]));
+
+    // Get queue names
+    const queueName = new Map(queueRecords.map((q) => [q.id, q.name]));
+
+    switch (widget.widget_type) {
+      case 'count': {
+        return c.json({ type: 'count', total: result.length, title: widget.title, view_id: view.id });
+      }
+
+      case 'ticket_list': {
+        const slice = result.slice(0, limit).map((ticket) => ({
+          id: ticket.id,
+          subject: ticket.subject,
+          status: ticket.status,
+          owner_id: ticket.owner_id,
+          owner_name: ticket.owner_id ? ownerName.get(ticket.owner_id) ?? null : null,
+          queue_name: queueName.get(ticket.queue_id) ?? ticket.queue_id.slice(0, 8),
+          updated_at: ticket.updated_at?.toISOString(),
+        }));
+        return c.json({ type: 'ticket_list', tickets: slice, total: result.length, title: widget.title, view_id: view.id });
+      }
+
+      case 'status_chart': {
+        const counts: Record<string, number> = {};
+        for (const ticket of result) {
+          counts[ticket.status] = (counts[ticket.status] ?? 0) + 1;
+        }
+        return c.json({ type: 'status_chart', counts, total: result.length, title: widget.title, view_id: view.id });
+      }
+
+      case 'my_tickets': {
+        const authUser = c.get('user');
+        const myTickets = result.filter((t) => t.owner_id === authUser.userId);
+        return c.json({ type: 'my_tickets', total: myTickets.length, title: widget.title, view_id: view.id });
+      }
+
+      case 'trend_chart': {
+        const period = ((widget.config as Record<string, unknown>)?.period as string) ?? 'day';
+        const days = (widget.config as Record<string, unknown>)?.days as number ?? 30;
+        const trendField = ((widget.config as Record<string, unknown>)?.field as string) ?? 'created_at';
+        const now = new Date();
+        const start = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+
+        const filtered = result.filter((t) => {
+          const d = trendField === 'updated_at' ? t.updated_at : t.created_at;
+          return d && new Date(d) >= start;
+        });
+
+        const points: Record<string, number> = {};
+        for (const t of filtered) {
+          const d = new Date(trendField === 'updated_at' ? t.updated_at! : t.created_at!);
+          let key: string;
+          if (period === 'week') {
+            const weekStart = new Date(d);
+            weekStart.setDate(d.getDate() - d.getDay());
+            key = weekStart.toISOString().slice(0, 10);
+          } else {
+            key = d.toISOString().slice(0, 10); // YYYY-MM-DD
+          }
+          points[key] = (points[key] ?? 0) + 1;
+        }
+
+        return c.json({ type: 'trend_chart', counts: points, total: result.length, title: widget.title, view_id: view.id });
+      }
+
+      case 'overdue': {
+        const dateFieldKey = (widget.config as Record<string, unknown>)?.field_key as string;
+        const now = new Date();
+        const overdue = result.filter((t) => {
+          if (!dateFieldKey) {
+            // No specific field — check if any inactive-adjacent status
+            const lc = lifecycleByQueue.get(t.queue_id);
+            if (lc) {
+              const inactive = lc.statuses.inactive;
+              if (inactive.includes(t.status)) return false; // already resolved
+            }
+            // Check if updated_at is older than 7 days
+            const updated = t.updated_at ? new Date(t.updated_at) : new Date(0);
+            return (now.getTime() - updated.getTime()) > 7 * 24 * 60 * 60 * 1000;
+          }
+          return false; // Would need CF value lookup for date field
+        });
+        return c.json({ type: 'overdue', total: overdue.length, title: widget.title, view_id: view.id });
+      }
+
+      case 'grouped_counts': {
+        const groupBy = (widget.config as Record<string, unknown>)?.group_by as string ?? 'owner';
+        const groups: Record<string, number> = {};
+
+        if (groupBy === 'owner') {
+          for (const ticket of result) {
+            const label = ticket.owner_id
+              ? (ownerName.get(ticket.owner_id) ?? ticket.owner_id.slice(0, 8))
+              : 'Unassigned';
+            groups[label] = (groups[label] ?? 0) + 1;
+          }
+        } else if (groupBy === 'queue') {
+          for (const ticket of result) {
+            const label = queueName.get(ticket.queue_id) ?? ticket.queue_id.slice(0, 8);
+            groups[label] = (groups[label] ?? 0) + 1;
+          }
+        } else if (groupBy.startsWith('cf.')) {
+          const cfKey = groupBy.slice(3);
+          const cfField = await db.query.customFields.findFirst({
+            where: eq(customFields.key, cfKey),
+          });
+          if (cfField) {
+            const ticketIds = result.map((t) => t.id);
+            const cfValues = ticketIds.length > 0
+              ? await db.query.customFieldValues.findMany({
+                  where: (table, { and, inArray, eq }) =>
+                    and(
+                      inArray(table.ticket_id, ticketIds),
+                      eq(table.custom_field_id, cfField.id),
+                    ),
+                })
+              : [];
+            for (const v of cfValues) {
+              groups[v.value] = (groups[v.value] ?? 0) + 1;
+            }
+          }
+        }
+        return c.json({ type: 'grouped_counts', groups, total: result.length, group_by: groupBy, title: widget.title, view_id: view.id });
+      }
+
+      default:
+        return c.json({ type: 'count', total: result.length, title: widget.title, view_id: view.id });
+    }
+  });
+
+  return router;
+}

src/routes/lifecycles.ts

@@ -2,7 +2,7 @@ import { Hono } from 'hono';
 import { HTTPException } from 'hono/http-exception';
 import type { Db } from '../db/index.ts';
 import { lifecycles } from '../db/schema.ts';
-import { asc } from 'drizzle-orm';
+import { asc, eq } from 'drizzle-orm';
 
 export function createLifecyclesRouter(db: Db): Hono {
   const router = new Hono();
@@ -34,5 +34,29 @@ export function createLifecyclesRouter(db: Db): Hono {
     return c.json(lifecycle, 201);
   });
 
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+
+    const existing = await db.query.lifecycles.findFirst({
+      where: eq(lifecycles.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Lifecycle not found' });
+    }
+
+    const updateData: Partial<typeof lifecycles.$inferInsert> = {};
+    if (body.name !== undefined) updateData.name = String(body.name);
+    if (body.definition !== undefined) updateData.definition = body.definition;
+
+    const [updated] = await db.update(lifecycles)
+      .set(updateData)
+      .where(eq(lifecycles.id, id))
+      .returning();
+
+    return c.json(updated);
+  });
+
   return router;
 }

src/routes/notifications.ts

@@ -0,0 +1,64 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import type { Db } from '../db/index.ts';
+import { notifications } from '../db/schema.ts';
+import { and, eq, desc } from 'drizzle-orm';
+
+export function createNotificationsRouter(db: Db): Hono {
+  const router = new Hono();
+
+  // GET /notifications — list notifications for current user
+  router.get('/notifications', async (c) => {
+    const user = c.get('user');
+    const result = await db.query.notifications.findMany({
+      where: eq(notifications.user_id, user.userId),
+      orderBy: desc(notifications.created_at),
+      // Return last 50
+    });
+    return c.json(result.slice(0, 50));
+  });
+
+  // GET /notifications/unread-count
+  router.get('/notifications/unread-count', async (c) => {
+    const user = c.get('user');
+    const result = await db.query.notifications.findMany({
+      where: and(
+        eq(notifications.user_id, user.userId),
+        eq(notifications.read, false),
+      ),
+    });
+    return c.json({ count: result.length });
+  });
+
+  // PATCH /notifications/:id/read — mark as read
+  router.patch('/notifications/:id/read', async (c) => {
+    const id = c.req.param('id');
+    await db.update(notifications).set({ read: true }).where(eq(notifications.id, id));
+    return c.json({ ok: true });
+  });
+
+  // PATCH /notifications/read-all — mark all as read
+  router.patch('/notifications/read-all', async (c) => {
+    const user = c.get('user');
+    await db.update(notifications)
+      .set({ read: true })
+      .where(eq(notifications.user_id, user.userId));
+    return c.json({ ok: true });
+  });
+
+  return router;
+}
+
+// Helper to create notifications (used by other routes)
+export async function createNotification(
+  db: Db,
+  data: { user_id: string; ticket_id?: number; type: string; title: string; body?: string },
+) {
+  await db.insert(notifications).values({
+    user_id: data.user_id,
+    ticket_id: data.ticket_id ?? null,
+    type: data.type,
+    title: data.title,
+    body: data.body ?? null,
+  });
+}

src/routes/queue-permissions.ts

@@ -0,0 +1,176 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import type { Db } from '../db/index.ts';
+import { queuePermissions, userPermissions, teams, queues, users } from '../db/schema.ts';
+import { eq } from 'drizzle-orm';
+
+export function createQueuePermissionsRouter(db: Db): Hono {
+  const router = new Hono();
+
+  // GET /queue-permissions — list all permissions (with team + queue names)
+  router.get('/queue-permissions', async (c) => {
+    const all = await db.query.queuePermissions.findMany();
+
+    // Enrich with names
+    const teamIds = [...new Set(all.map((p) => p.team_id))];
+    const queueIds = [...new Set(all.map((p) => p.queue_id))];
+
+    const teamList = teamIds.length > 0
+      ? await db.query.teams.findMany({ where: (t, { inArray }) => inArray(t.id, teamIds) })
+      : [];
+    const queueList = queueIds.length > 0
+      ? await db.query.queues.findMany({ where: (t, { inArray }) => inArray(t.id, queueIds) })
+      : [];
+
+    const teamById = new Map(teamList.map((t) => [t.id, t]));
+    const queueById = new Map(queueList.map((q) => [q.id, q]));
+
+    const enriched = all.map((p) => ({
+      ...p,
+      team_name: teamById.get(p.team_id)?.name ?? p.team_id,
+      queue_name: queueById.get(p.queue_id)?.name ?? p.queue_id,
+    }));
+
+    return c.json(enriched);
+  });
+
+  // GET /queue-permissions/teams-and-queues — return teams and queues for the form
+  router.get('/queue-permissions/teams-and-queues', async (c) => {
+    const [teamList, queueList] = await Promise.all([
+      db.query.teams.findMany(),
+      db.query.queues.findMany(),
+    ]);
+    return c.json({ teams: teamList, queues: queueList });
+  });
+
+  // POST /queue-permissions — grant a right
+  router.post('/queue-permissions', async (c) => {
+    const body = await c.req.json();
+    const { queue_id, team_id, right_name } = body;
+
+    if (!queue_id || !team_id || !right_name) {
+      throw new HTTPException(422, { message: 'queue_id, team_id, and right_name are required' });
+    }
+
+    const validRights = ['ticket.view', 'ticket.create', 'ticket.reply', 'ticket.comment', 'ticket.modify', 'queue.admin'];
+    if (!validRights.includes(right_name)) {
+      throw new HTTPException(422, { message: `Invalid right. Must be one of: ${validRights.join(', ')}` });
+    }
+
+    // Check for duplicate
+    const existing = await db.query.queuePermissions.findFirst({
+      where: (table, { and, eq: eqFn }) =>
+        and(
+          eqFn(table.queue_id, queue_id),
+          eqFn(table.team_id, team_id),
+          eqFn(table.right_name, right_name),
+        ),
+    });
+
+    if (existing) {
+      return c.json(existing); // Idempotent — return existing
+    }
+
+    const [perm] = await db.insert(queuePermissions).values({
+      queue_id,
+      team_id,
+      right_name,
+    }).returning();
+
+    if (!perm) {
+      throw new HTTPException(500, { message: 'Failed to create permission' });
+    }
+
+    return c.json(perm, 201);
+  });
+
+  // DELETE /queue-permissions/:id — revoke a right
+  router.delete('/queue-permissions/:id', async (c) => {
+    const id = c.req.param('id');
+
+    const existing = await db.query.queuePermissions.findFirst({
+      where: eq(queuePermissions.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Permission not found' });
+    }
+
+    await db.delete(queuePermissions).where(eq(queuePermissions.id, id));
+
+    return c.json({ ok: true });
+  });
+
+  // GET /user-permissions — list all per-user permissions
+  router.get('/user-permissions', async (c) => {
+    const all = await db.query.userPermissions.findMany();
+
+    const userIds = [...new Set(all.map((p) => p.user_id))];
+    const queueIds = [...new Set(all.map((p) => p.queue_id))];
+
+    const userList = userIds.length > 0
+      ? await db.query.users.findMany({ where: (t, { inArray }) => inArray(t.id, userIds) })
+      : [];
+    const queueList = queueIds.length > 0
+      ? await db.query.queues.findMany({ where: (t, { inArray }) => inArray(t.id, queueIds) })
+      : [];
+
+    const userById = new Map(userList.map((u) => [u.id, u]));
+    const queueById = new Map(queueList.map((q) => [q.id, q]));
+
+    const enriched = all.map((p) => ({
+      ...p,
+      username: userById.get(p.user_id)?.username ?? p.user_id,
+      queue_name: queueById.get(p.queue_id)?.name ?? p.queue_id,
+    }));
+
+    return c.json(enriched);
+  });
+
+  // POST /user-permissions — grant a right to a user
+  router.post('/user-permissions', async (c) => {
+    const body = await c.req.json();
+    const { queue_id, user_id, right_name } = body;
+
+    if (!queue_id || !user_id || !right_name) {
+      throw new HTTPException(422, { message: 'queue_id, user_id, and right_name are required' });
+    }
+
+    const validRights = ['ticket.view', 'ticket.create', 'ticket.reply', 'ticket.comment', 'ticket.modify', 'queue.admin'];
+    if (!validRights.includes(right_name)) {
+      throw new HTTPException(422, { message: `Invalid right. Must be one of: ${validRights.join(', ')}` });
+    }
+
+    const existing = await db.query.userPermissions.findFirst({
+      where: (table, { and, eq: eqFn }) =>
+        and(
+          eqFn(table.queue_id, queue_id),
+          eqFn(table.user_id, user_id),
+          eqFn(table.right_name, right_name),
+        ),
+    });
+
+    if (existing) return c.json(existing);
+
+    const [perm] = await db.insert(userPermissions).values({
+      queue_id,
+      user_id,
+      right_name,
+    }).returning();
+
+    if (!perm) {
+      throw new HTTPException(500, { message: 'Failed to create user permission' });
+    }
+
+    return c.json(perm, 201);
+  });
+
+  // DELETE /user-permissions/:id — revoke a user right
+  router.delete('/user-permissions/:id', async (c) => {
+    const id = c.req.param('id');
+    await db.delete(userPermissions).where(eq(userPermissions.id, id));
+    return c.json({ ok: true });
+  });
+
+  return router;
+}

src/routes/queues.ts

@@ -2,7 +2,7 @@ import { Hono } from 'hono';
 import { HTTPException } from 'hono/http-exception';
 import type { Db } from '../db/index.ts';
 import { queues } from '../db/schema.ts';
-import { asc } from 'drizzle-orm';
+import { asc, eq } from 'drizzle-orm';
 import { CreateQueueSchema } from '../models/queue.ts';
 
 export function createQueuesRouter(db: Db): Hono {
@@ -23,6 +23,7 @@ export function createQueuesRouter(db: Db): Hono {
       name: parsed.name,
       description: parsed.description ?? null,
       lifecycle_id: parsed.lifecycle_id ?? null,
+      team_id: parsed.team_id ?? null,
     }).returning();
 
     if (!queue) {
@@ -32,5 +33,31 @@ export function createQueuesRouter(db: Db): Hono {
     return c.json(queue, 201);
   });
 
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+
+    const existing = await db.query.queues.findFirst({
+      where: eq(queues.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Queue not found' });
+    }
+
+    const updateData: Partial<typeof queues.$inferInsert> = {};
+    if (body.name !== undefined) updateData.name = String(body.name);
+    if (body.description !== undefined) updateData.description = body.description ? String(body.description) : null;
+    if (body.lifecycle_id !== undefined) updateData.lifecycle_id = body.lifecycle_id || null;
+    if (body.team_id !== undefined) updateData.team_id = body.team_id || null;
+
+    const [updated] = await db.update(queues)
+      .set(updateData)
+      .where(eq(queues.id, id))
+      .returning();
+
+    return c.json(updated);
+  });
+
   return router;
 }

src/routes/teams.ts

@@ -0,0 +1,98 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { and, asc, eq, inArray } from 'drizzle-orm';
+import type { Db } from '../db/index.ts';
+import { teams, teamMembers, users, dashboards } from '../db/schema.ts';
+
+export function createTeamsRouter(db: Db): Hono {
+  const router = new Hono();
+
+  // GET /teams — list all with member details
+  router.get('/', async (c) => {
+    const allTeams = await db.query.teams.findMany({
+      orderBy: asc(teams.name),
+    });
+
+    const result = await Promise.all(allTeams.map(async (team) => {
+      const members = await db.query.teamMembers.findMany({
+        where: eq(teamMembers.team_id, team.id),
+      });
+      const memberUsers = members.length > 0
+        ? await db.query.users.findMany({
+            where: (table, { inArray }) => inArray(table.id, members.map((m) => m.user_id)),
+          })
+        : [];
+      return { ...team, members: memberUsers };
+    }));
+
+    return c.json(result);
+  });
+
+  // POST /teams
+  router.post('/', async (c) => {
+    const body = await c.req.json();
+    const name = String(body.name ?? '').trim();
+    if (!name) throw new HTTPException(400, { message: 'name is required' });
+
+    const [team] = await db.insert(teams).values({
+      name,
+      description: body.description ?? null,
+    }).returning();
+    if (!team) throw new HTTPException(500, { message: 'Failed to create team' });
+    return c.json(team, 201);
+  });
+
+  // PATCH /teams/:id
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+    const existing = await db.query.teams.findFirst({ where: eq(teams.id, id) });
+    if (!existing) throw new HTTPException(404, { message: 'Team not found' });
+
+    const updateData: Partial<typeof teams.$inferInsert> = {};
+    if (body.name !== undefined) updateData.name = String(body.name).trim();
+    if (body.description !== undefined) updateData.description = body.description ?? null;
+
+    const [updated] = await db.update(teams).set(updateData).where(eq(teams.id, id)).returning();
+    return c.json(updated);
+  });
+
+  // DELETE /teams/:id
+  router.delete('/:id', async (c) => {
+    const id = c.req.param('id');
+    const existing = await db.query.teams.findFirst({ where: eq(teams.id, id) });
+    if (!existing) throw new HTTPException(404, { message: 'Team not found' });
+    await db.delete(teams).where(eq(teams.id, id));
+    return c.json({ ok: true });
+  });
+
+  // POST /teams/:id/members — add member
+  router.post('/:id/members', async (c) => {
+    const teamId = c.req.param('id');
+    const body = await c.req.json();
+    const userId = String(body.user_id ?? '').trim();
+    if (!userId) throw new HTTPException(400, { message: 'user_id is required' });
+
+    const team = await db.query.teams.findFirst({ where: eq(teams.id, teamId) });
+    if (!team) throw new HTTPException(404, { message: 'Team not found' });
+
+    const [member] = await db.insert(teamMembers).values({
+      team_id: teamId,
+      user_id: userId,
+    }).returning();
+    if (!member) throw new HTTPException(500, { message: 'Failed to add member' });
+    return c.json(member, 201);
+  });
+
+  // DELETE /teams/:id/members/:userId
+  router.delete('/:id/members/:userId', async (c) => {
+    const teamId = c.req.param('id');
+    const userId = c.req.param('userId');
+    await db.delete(teamMembers).where(
+      and(eq(teamMembers.team_id, teamId), eq(teamMembers.user_id, userId))
+    );
+    return c.json({ ok: true });
+  });
+
+  return router;
+}

src/routes/templates.ts

@@ -0,0 +1,189 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { asc, desc, eq } from 'drizzle-orm';
+import type { Db } from '../db/index.ts';
+import { customFieldValues, queues, templates, tickets, transactions } from '../db/schema.ts';
+import { TemplateRenderer } from '../scrip/templates.ts';
+import type { TemplateContext } from '../scrip/templates.ts';
+
+function buildDemoContext(): TemplateContext {
+  return {
+    ticket: {
+      id: 1001,
+      subject: 'Replace access badge reader',
+      status: 'open',
+      queue_id: 'demo-queue',
+      owner_id: null,
+      creator_id: 'demo-user',
+      created_at: new Date('2026-06-08T08:00:00.000Z').toISOString(),
+      updated_at: new Date('2026-06-08T09:15:00.000Z').toISOString(),
+    },
+    queue: { name: 'Support Desk' },
+    transaction: {
+      type: 'StatusChange',
+      field: 'status',
+      old_value: 'new',
+      new_value: 'open',
+    },
+    custom_fields: {
+      impact: 'High',
+      location: 'HQ 2nd floor',
+      channel: 'Portal',
+    },
+  };
+}
+
+async function buildTicketContext(db: Db, ticketId: number): Promise<TemplateContext> {
+  const ticket = await db.query.tickets.findFirst({
+    where: eq(tickets.id, ticketId),
+  });
+
+  if (!ticket) {
+    throw new HTTPException(404, { message: 'Ticket not found' });
+  }
+
+  const queue = await db.query.queues.findFirst({
+    where: eq(queues.id, ticket.queue_id),
+  });
+  const latestTx = await db.query.transactions.findFirst({
+    where: eq(transactions.ticket_id, ticket.id),
+    orderBy: desc(transactions.created_at),
+  });
+  const cfValues = await db.query.customFieldValues.findMany({
+    where: eq(customFieldValues.ticket_id, ticket.id),
+  });
+  const fieldIds = [...new Set(cfValues.map((value) => value.custom_field_id))];
+  const fields = fieldIds.length > 0
+    ? await db.query.customFields.findMany({
+        where: (table, { inArray }) => inArray(table.id, fieldIds),
+      })
+    : [];
+  const fieldById = new Map(fields.map((field) => [field.id, field]));
+  const customFieldsMap: Record<string, string> = {};
+
+  for (const value of cfValues) {
+    const field = fieldById.get(value.custom_field_id);
+    if (field) customFieldsMap[field.key] = value.value;
+  }
+
+  return {
+    ticket: {
+      id: ticket.id,
+      subject: ticket.subject,
+      status: ticket.status,
+      queue_id: ticket.queue_id,
+      owner_id: ticket.owner_id,
+      creator_id: ticket.creator_id,
+      created_at: ticket.created_at?.toISOString() ?? new Date().toISOString(),
+      updated_at: ticket.updated_at?.toISOString() ?? new Date().toISOString(),
+    },
+    queue: {
+      name: queue?.name ?? 'unknown',
+    },
+    transaction: {
+      type: latestTx?.transaction_type ?? 'Preview',
+      field: latestTx?.field ?? null,
+      old_value: latestTx?.old_value ?? null,
+      new_value: latestTx?.new_value ?? null,
+    },
+    custom_fields: customFieldsMap,
+  };
+}
+
+export function createTemplatesRouter(db: Db): Hono {
+  const router = new Hono();
+  const renderer = new TemplateRenderer();
+
+  router.get('/', async (c) => {
+    const result = await db.query.templates.findMany({
+      orderBy: asc(templates.name),
+    });
+    return c.json(result);
+  });
+
+  router.post('/', async (c) => {
+    const body = await c.req.json();
+    const name = String(body.name ?? '').trim();
+    const subjectTemplate = String(body.subject_template ?? '');
+    const bodyTemplate = String(body.body_template ?? '');
+
+    if (!name || !subjectTemplate || !bodyTemplate) {
+      throw new HTTPException(400, { message: 'name, subject_template, and body_template are required' });
+    }
+
+    const [template] = await db.insert(templates).values({
+      name,
+      queue_id: body.queue_id || null,
+      subject_template: subjectTemplate,
+      body_template: bodyTemplate,
+    }).returning();
+
+    if (!template) {
+      throw new HTTPException(500, { message: 'Failed to create template' });
+    }
+
+    return c.json(template, 201);
+  });
+
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+
+    const existing = await db.query.templates.findFirst({
+      where: eq(templates.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Template not found' });
+    }
+
+    const updateData: Partial<typeof templates.$inferInsert> = {};
+    if (body.name !== undefined) updateData.name = String(body.name).trim();
+    if (body.queue_id !== undefined) updateData.queue_id = body.queue_id || null;
+    if (body.subject_template !== undefined) updateData.subject_template = String(body.subject_template);
+    if (body.body_template !== undefined) updateData.body_template = String(body.body_template);
+
+    const [updated] = await db.update(templates)
+      .set(updateData)
+      .where(eq(templates.id, id))
+      .returning();
+
+    return c.json(updated);
+  });
+
+  router.delete('/:id', async (c) => {
+    const id = c.req.param('id');
+
+    const existing = await db.query.templates.findFirst({
+      where: eq(templates.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'Template not found' });
+    }
+
+    await db.delete(templates).where(eq(templates.id, id));
+    return c.json({ ok: true });
+  });
+
+  router.post('/preview', async (c) => {
+    const body = await c.req.json();
+    const subjectTemplate = String(body.subject_template ?? '');
+    const bodyTemplate = String(body.body_template ?? '');
+    const ticketId = body.ticket_id === undefined || body.ticket_id === null || body.ticket_id === ''
+      ? null
+      : Number(body.ticket_id);
+
+    if (!subjectTemplate || !bodyTemplate) {
+      throw new HTTPException(400, { message: 'subject_template and body_template are required' });
+    }
+
+    const context = ticketId ? await buildTicketContext(db, ticketId) : buildDemoContext();
+    return c.json({
+      ...renderer.render(subjectTemplate, bodyTemplate, context),
+      context,
+    });
+  });
+
+  return router;
+}

src/routes/users.ts

@@ -0,0 +1,86 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { asc, eq } from 'drizzle-orm';
+import type { Db } from '../db/index.ts';
+import { users } from '../db/schema.ts';
+
+export function createUsersRouter(db: Db): Hono {
+  const router = new Hono();
+
+  router.get('/', async (c) => {
+    const result = await db.query.users.findMany({
+      orderBy: asc(users.username),
+    });
+    return c.json(result);
+  });
+
+  router.post('/', async (c) => {
+    const body = await c.req.json();
+    const username = String(body.username ?? '').trim();
+    const email = body.email ? String(body.email).trim() : null;
+    const role = body.role ? String(body.role) : 'staff';
+    const password = body.password ? String(body.password).trim() : null;
+
+    if (!username) {
+      throw new HTTPException(400, { message: 'username is required' });
+    }
+
+    const [user] = await db.insert(users).values({
+      username,
+      email,
+      role,
+      password_hash: password ? await Bun.password.hash(password) : null,
+    }).returning();
+
+    if (!user) {
+      throw new HTTPException(500, { message: 'Failed to create user' });
+    }
+
+    return c.json(user, 201);
+  });
+
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+
+    const existing = await db.query.users.findFirst({
+      where: eq(users.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'User not found' });
+    }
+
+    const updateData: Partial<typeof users.$inferInsert> = {};
+    if (body.username !== undefined) updateData.username = String(body.username).trim();
+    if (body.email !== undefined) updateData.email = body.email ? String(body.email).trim() : null;
+    if (body.role !== undefined) updateData.role = String(body.role);
+    if (body.password !== undefined && String(body.password).trim()) {
+      updateData.password_hash = await Bun.password.hash(String(body.password).trim());
+    }
+
+    const [updated] = await db.update(users)
+      .set(updateData)
+      .where(eq(users.id, id))
+      .returning();
+
+    return c.json(updated);
+  });
+
+  router.delete('/:id', async (c) => {
+    const id = c.req.param('id');
+
+    const existing = await db.query.users.findFirst({
+      where: eq(users.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'User not found' });
+    }
+
+    await db.delete(users).where(eq(users.id, id));
+    return c.json({ ok: true });
+  });
+
+  return router;
+}

src/routes/views.ts

@@ -0,0 +1,84 @@
+import { Hono } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { asc, eq } from 'drizzle-orm';
+import type { Db } from '../db/index.ts';
+import { views } from '../db/schema.ts';
+
+export function createViewsRouter(db: Db): Hono {
+  const router = new Hono();
+
+  router.get('/', async (c) => {
+    const result = await db.query.views.findMany({
+      orderBy: asc(views.name),
+    });
+    return c.json(result);
+  });
+
+  router.post('/', async (c) => {
+    const body = await c.req.json();
+    const name = String(body.name ?? '').trim();
+
+    if (!name) {
+      throw new HTTPException(400, { message: 'name is required' });
+    }
+
+    const [view] = await db.insert(views).values({
+      name,
+      filters: body.filters ?? [],
+      sort_key: body.sort_key ?? 'updated',
+      columns: body.columns ?? [],
+      is_public: body.is_public ?? false,
+      creator_id: body.creator_id || null,
+    }).returning();
+
+    if (!view) {
+      throw new HTTPException(500, { message: 'Failed to create view' });
+    }
+
+    return c.json(view, 201);
+  });
+
+  router.patch('/:id', async (c) => {
+    const id = c.req.param('id');
+    const body = await c.req.json();
+
+    const existing = await db.query.views.findFirst({
+      where: eq(views.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'View not found' });
+    }
+
+    const updateData: Partial<typeof views.$inferInsert> = {};
+    if (body.name !== undefined) updateData.name = String(body.name).trim();
+    if (body.filters !== undefined) updateData.filters = body.filters;
+    if (body.sort_key !== undefined) updateData.sort_key = body.sort_key;
+    if (body.columns !== undefined) updateData.columns = body.columns;
+    if (body.is_public !== undefined) updateData.is_public = body.is_public;
+
+    const [updated] = await db.update(views)
+      .set(updateData)
+      .where(eq(views.id, id))
+      .returning();
+
+    return c.json(updated);
+  });
+
+  router.delete('/:id', async (c) => {
+    const id = c.req.param('id');
+
+    const existing = await db.query.views.findFirst({
+      where: eq(views.id, id),
+    });
+
+    if (!existing) {
+      throw new HTTPException(404, { message: 'View not found' });
+    }
+
+    await db.delete(views).where(eq(views.id, id));
+    return c.json({ ok: true });
+  });
+
+  return router;
+}

src/scrip/actions.ts

@@ -1,8 +1,11 @@
 import nodemailer from 'nodemailer';
 import type { Transporter } from 'nodemailer';
+import Handlebars from 'handlebars';
 import { config } from '../config.ts';
 import type { Db } from '../db/index.ts';
-import { customFieldValues, transactions } from '../db/schema.ts';
+import * as schema from '../db/schema.ts';
+import { customFieldValues, tickets, transactions, users } from '../db/schema.ts';
+import { and, eq, inArray } from 'drizzle-orm';
 
 export interface ActionExecutor {
   execute(payload: ActionPayload): Promise<{ success: boolean; message: string }>;
@@ -21,12 +24,15 @@ export interface ActionPayload {
   method?: string;
   headers?: Record<string, string>;
   field_id?: string;
+  field_key?: string;
   value?: string;
 }
 
 export class SendEmail implements ActionExecutor {
   private transporter: Transporter | null = null;
 
+  constructor(private db: Db) {}
+
   private getTransporter(): Transporter {
     if (!this.transporter) {
       this.transporter = nodemailer.createTransport({
@@ -39,8 +45,55 @@ export class SendEmail implements ActionExecutor {
     return this.transporter;
   }
 
+  private async resolveRecipients(payload: ActionPayload): Promise<string[]> {
+    const configuredRecipients = payload.recipients ?? (payload.actionConfig['recipients'] as string[] | undefined) ?? [];
+    const recipients = new Set(configuredRecipients.filter(Boolean));
+    const sources = payload.actionConfig['recipient_sources'] ?? payload.actionConfig['recipient_source'];
+    const recipientSources = Array.isArray(sources)
+      ? sources.map((source) => String(source))
+      : sources
+        ? [String(sources)]
+        : [];
+
+    if (recipientSources.length === 0 || !payload.ticketId) {
+      return Array.from(recipients);
+    }
+
+    const ticket = await this.db.query.tickets.findFirst({
+      where: eq(tickets.id, payload.ticketId),
+    });
+
+    if (!ticket) {
+      return Array.from(recipients);
+    }
+
+    const userIds = new Set<string>();
+    for (const source of recipientSources) {
+      if (['requester', 'requestor', 'requestors', 'creator', 'ticket_creator'].includes(source)) {
+        userIds.add(ticket.creator_id);
+      }
+      if (['owner', 'ticket_owner'].includes(source) && ticket.owner_id) {
+        userIds.add(ticket.owner_id);
+      }
+    }
+
+    if (userIds.size === 0) {
+      return Array.from(recipients);
+    }
+
+    const rows = await this.db.query.users.findMany({
+      where: inArray(users.id, Array.from(userIds)),
+    });
+
+    for (const user of rows) {
+      if (user.email) recipients.add(user.email);
+    }
+
+    return Array.from(recipients);
+  }
+
   async execute(payload: ActionPayload): Promise<{ success: boolean; message: string }> {
-    const recipients = payload.recipients ?? (payload.actionConfig['recipients'] as string[] | undefined) ?? [];
+    const recipients = await this.resolveRecipients(payload);
     const subject = payload.subject ?? (payload.actionConfig['subject'] as string | undefined);
     const body = payload.body ?? (payload.actionConfig['body'] as string | undefined);
 
@@ -91,25 +144,279 @@ export class Webhook implements ActionExecutor {
   }
 }
 
+function parseResponseBody(text: string): unknown {
+  if (!text.trim()) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+
+function renderHandlebars(template: string, context: Record<string, unknown>): string {
+  const instance = Handlebars.create();
+  instance.registerHelper('json', (value: unknown) => JSON.stringify(value, null, 2));
+  return instance.compile(template)(context);
+}
+
+export class FetchMetadata implements ActionExecutor {
+  constructor(private db: Db) {}
+
+  async execute(payload: ActionPayload): Promise<{ success: boolean; message: string }> {
+    const ticketId = payload.ticketId ?? Number(payload.actionConfig['ticket_id'] ?? 0);
+    const rawUrl = String(payload.actionConfig['url'] ?? '');
+    const method = String(payload.actionConfig['method'] ?? 'GET').toUpperCase();
+    const headers = (payload.actionConfig['headers'] ?? {}) as Record<string, string>;
+    const requestBodyTemplate = String(payload.actionConfig['body'] ?? '');
+    const commentTemplate = String(
+      payload.actionConfig['comment_template'] ??
+      'External metadata\n\n{{json metadata}}',
+    );
+    const internal = payload.actionConfig['internal'] !== false;
+
+    if (!ticketId || !rawUrl) {
+      return { success: false, message: 'FetchMetadata: missing ticket_id or URL' };
+    }
+
+    try {
+      const ticket = await this.db.query.tickets.findFirst({
+        where: eq(tickets.id, ticketId),
+      });
+
+      if (!ticket) {
+        return { success: false, message: `FetchMetadata: ticket ${ticketId} not found` };
+      }
+
+      const baseContext = {
+        ticket: {
+          id: ticket.id,
+          subject: ticket.subject,
+          status: ticket.status,
+          queue_id: ticket.queue_id,
+          owner_id: ticket.owner_id,
+          creator_id: ticket.creator_id,
+          created_at: ticket.created_at?.toISOString(),
+          updated_at: ticket.updated_at?.toISOString(),
+        },
+      };
+      const url = renderHandlebars(rawUrl, baseContext);
+      const requestBody = requestBodyTemplate
+        ? renderHandlebars(requestBodyTemplate, baseContext)
+        : undefined;
+
+      const response = await fetch(url, {
+        method,
+        headers: { Accept: 'application/json', ...headers },
+        body: ['GET', 'HEAD'].includes(method) ? undefined : requestBody,
+      });
+      const responseText = await response.text();
+      const metadata = parseResponseBody(responseText);
+
+      if (!response.ok) {
+        return { success: false, message: `FetchMetadata failed: HTTP ${response.status}` };
+      }
+
+      const commentBody = renderHandlebars(commentTemplate, {
+        ...baseContext,
+        metadata,
+        response: {
+          status: response.status,
+          ok: response.ok,
+          body: metadata,
+          text: responseText,
+        },
+      });
+
+      await this.db.insert(transactions).values({
+        ticket_id: ticketId,
+        transaction_type: internal ? 'Comment' : 'Correspond',
+        data: {
+          body: commentBody,
+          metadata,
+          source_url: url,
+        },
+        creator_id: '00000000-0000-0000-0000-000000000000',
+      });
+
+      await this.db.update(tickets)
+        .set({ updated_at: new Date() } as any)
+        .where(eq(tickets.id, ticketId));
+
+      return { success: true, message: `Metadata fetched and added to ticket ${ticketId}` };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      return { success: false, message: `FetchMetadata failed: ${message}` };
+    }
+  }
+}
+
+type ScriptResult = string | { success?: boolean; message?: string } | undefined | null;
+
+export class RunScript implements ActionExecutor {
+  constructor(private db: Db) {}
+
+  async execute(payload: ActionPayload): Promise<{ success: boolean; message: string }> {
+    const script = String(payload.actionConfig['script'] ?? payload.actionConfig['code'] ?? '');
+    const ticketId = payload.ticketId ?? Number(payload.actionConfig['ticket_id'] ?? 0);
+
+    if (!script.trim()) {
+      return { success: false, message: 'RunScript: no script configured' };
+    }
+
+    if (!ticketId) {
+      return { success: false, message: 'RunScript: missing ticket_id' };
+    }
+
+    try {
+      const ticket = await this.db.query.tickets.findFirst({
+        where: eq(tickets.id, ticketId),
+      });
+
+      if (!ticket) {
+        return { success: false, message: `RunScript: ticket ${ticketId} not found` };
+      }
+
+      const helpers = {
+        addComment: async (body: string, options?: { internal?: boolean; creator_id?: string }) => {
+          const [tx] = await this.db.insert(transactions).values({
+            ticket_id: ticketId,
+            transaction_type: options?.internal === false ? 'Correspond' : 'Comment',
+            data: { body },
+            creator_id: options?.creator_id ?? '00000000-0000-0000-0000-000000000000',
+          }).returning();
+          return tx;
+        },
+        createTransaction: async (data: {
+          transaction_type: string;
+          field?: string | null;
+          old_value?: string | null;
+          new_value?: string | null;
+          data?: unknown;
+          creator_id?: string;
+        }) => {
+          const [tx] = await this.db.insert(transactions).values({
+            ticket_id: ticketId,
+            transaction_type: data.transaction_type,
+            field: data.field ?? null,
+            old_value: data.old_value ?? null,
+            new_value: data.new_value ?? null,
+            data: data.data,
+            creator_id: data.creator_id ?? '00000000-0000-0000-0000-000000000000',
+          }).returning();
+          return tx;
+        },
+        updateTicket: async (data: Partial<typeof tickets.$inferInsert>) => {
+          const [updated] = await this.db.update(tickets)
+            .set({ ...data, updated_at: new Date() } as any)
+            .where(eq(tickets.id, ticketId))
+            .returning();
+          return updated;
+        },
+        touchTicket: async () => {
+          await this.db.update(tickets)
+            .set({ updated_at: new Date() } as any)
+            .where(eq(tickets.id, ticketId));
+        },
+      };
+
+      const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+      const fn = new AsyncFunction(
+        'context',
+        `"use strict";
+const { ticket, payload, actionConfig, helpers, db, schema, orm, fetch, console } = context;
+${script}`,
+      ) as (context: Record<string, unknown>) => Promise<ScriptResult>;
+
+      const result = await fn({
+        ticket,
+        payload,
+        actionConfig: payload.actionConfig,
+        helpers,
+        db: this.db,
+        schema,
+        orm: { and, eq, inArray },
+        fetch,
+        console,
+      });
+
+      if (typeof result === 'string') {
+        return { success: true, message: result };
+      }
+      if (result && typeof result === 'object') {
+        return {
+          success: result.success !== false,
+          message: result.message ?? 'RunScript completed',
+        };
+      }
+      return { success: true, message: 'RunScript completed' };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      return { success: false, message: `RunScript failed: ${message}` };
+    }
+  }
+}
+
 export class SetCustomField implements ActionExecutor {
   constructor(private db: Db) {}
 
   async execute(payload: ActionPayload): Promise<{ success: boolean; message: string }> {
-    const fieldId = payload.field_id ?? String(payload.actionConfig['field_id'] ?? '');
+    const fieldRef =
+      payload.field_id ??
+      payload.field_key ??
+      String(payload.actionConfig['field_id'] ?? payload.actionConfig['field_key'] ?? payload.actionConfig['field'] ?? '');
     const value = payload.value ?? String(payload.actionConfig['value'] ?? '');
     const ticketId = payload.ticketId ?? Number(payload.actionConfig['ticket_id'] ?? 0);
 
-    if (!fieldId || !value || !ticketId) {
-      return { success: false, message: 'SetCustomField: missing field_id, value, or ticket_id' };
+    if (!fieldRef || !value || !ticketId) {
+      return { success: false, message: 'SetCustomField: missing field reference, value, or ticket_id' };
     }
 
     try {
+      const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(fieldRef);
+      const field = await this.db.query.customFields.findFirst({
+        where: (row, { or, eq }) =>
+          isUuid
+            ? or(eq(row.id, fieldRef), eq(row.key, fieldRef), eq(row.name, fieldRef))
+            : or(eq(row.key, fieldRef), eq(row.name, fieldRef)),
+      });
+
+      if (!field) {
+        return { success: false, message: `SetCustomField: unknown field ${fieldRef}` };
+      }
+
+      const existing = await this.db.query.customFieldValues.findMany({
+        where: and(
+          eq(customFieldValues.ticket_id, ticketId),
+          eq(customFieldValues.custom_field_id, field.id),
+        ),
+      });
+      const oldValue = existing.map((row) => row.value).join(', ');
+
+      await this.db.delete(customFieldValues).where(and(
+        eq(customFieldValues.ticket_id, ticketId),
+        eq(customFieldValues.custom_field_id, field.id),
+      ));
+
       await this.db.insert(customFieldValues).values({
-        custom_field_id: fieldId,
+        custom_field_id: field.id,
         ticket_id: ticketId,
         value,
       });
-      return { success: true, message: `Custom field ${fieldId} set to "${value}"` };
+
+      await this.db.update(tickets)
+        .set({ updated_at: new Date() } as any)
+        .where(eq(tickets.id, ticketId));
+
+      await this.db.insert(transactions).values({
+        ticket_id: ticketId,
+        transaction_type: 'CustomFieldChange',
+        field: field.key,
+        old_value: oldValue || null,
+        new_value: value,
+        creator_id: '00000000-0000-0000-0000-000000000000',
+      });
+
+      return { success: true, message: `${field.name} set to "${value}"` };
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
       return { success: false, message: `SetCustomField failed: ${message}` };
@@ -150,8 +457,10 @@ export class CreateTransaction implements ActionExecutor {
 
 export function createActionRegistry(db: Db): Record<string, ActionExecutor> {
   return {
-    SendEmail: new SendEmail(),
+    SendEmail: new SendEmail(db),
     Webhook: new Webhook(),
+    FetchMetadata: new FetchMetadata(db),
+    RunScript: new RunScript(db),
     SetCustomField: new SetCustomField(db),
     CreateTransaction: new CreateTransaction(db),
   };

src/scrip/conditions.ts

@@ -5,10 +5,33 @@ import type { LifecycleDefinition } from '../lifecycle/validator.ts';
 
 export interface ConditionEvaluateContext {
   lifecycleDef?: LifecycleDefinition;
+  customFields?: Record<string, string>; // key → value map of CF values
+}
+
+export interface ConditionConfig {
+  from_status?: unknown;
+  to_status?: unknown;
+  field_key?: unknown;
+  field_id?: unknown;
+  field?: unknown;
+  old_value?: unknown;
+  new_value?: unknown;
+  value?: unknown;
+  link_type?: unknown;
 }
 
 export interface ConditionEvaluator {
-  evaluate(ticket: Ticket, transactions: Transaction[], context?: ConditionEvaluateContext): boolean;
+  evaluate(ticket: Ticket, transactions: Transaction[], context?: ConditionEvaluateContext, config?: ConditionConfig): boolean;
+}
+
+function matchesStatusFilter(value: string | null, filter: unknown): boolean {
+  if (filter === undefined || filter === null || filter === '') return true;
+  if (value === null) return false;
+  const normalizedValue = value.toLowerCase();
+  if (Array.isArray(filter)) {
+    return filter.map((item) => String(item).toLowerCase()).includes(normalizedValue);
+  }
+  return normalizedValue === String(filter).toLowerCase();
 }
 
 export class OnCreate implements ConditionEvaluator {
@@ -18,19 +41,25 @@ export class OnCreate implements ConditionEvaluator {
 }
 
 export class OnStatusChange implements ConditionEvaluator {
-  evaluate(_ticket: Ticket, transactions: Transaction[]): boolean {
-    return transactions.some((tx) => tx.transaction_type === 'StatusChange');
+  evaluate(_ticket: Ticket, transactions: Transaction[], _context?: ConditionEvaluateContext, config?: ConditionConfig): boolean {
+    return transactions.some((tx) =>
+      tx.transaction_type === 'StatusChange' &&
+      matchesStatusFilter(tx.old_value, config?.from_status) &&
+      matchesStatusFilter(tx.new_value, config?.to_status)
+    );
   }
 }
 
 export class OnResolve implements ConditionEvaluator {
   private lifecycleValidator = new LifecycleValidator();
 
-  evaluate(_ticket: Ticket, transactions: Transaction[], context?: ConditionEvaluateContext): boolean {
+  evaluate(_ticket: Ticket, transactions: Transaction[], context?: ConditionEvaluateContext, config?: ConditionConfig): boolean {
     const lifecycleDef = context?.lifecycleDef;
 
     return transactions.some((tx) => {
       if (tx.transaction_type !== 'StatusChange' || tx.new_value === null) return false;
+      if (!matchesStatusFilter(tx.old_value, config?.from_status)) return false;
+      if (!matchesStatusFilter(tx.new_value, config?.to_status)) return false;
 
       if (lifecycleDef) {
         return this.lifecycleValidator.isResolvedStatus(lifecycleDef, tx.new_value);
@@ -41,10 +70,66 @@ export class OnResolve implements ConditionEvaluator {
   }
 }
 
+export class OnCustomFieldChange implements ConditionEvaluator {
+  evaluate(_ticket: Ticket, transactions: Transaction[], _context?: ConditionEvaluateContext, config?: ConditionConfig): boolean {
+    const fieldFilter = config?.field_key ?? config?.field_id ?? config?.field;
+    const newValueFilter = config?.new_value ?? config?.value;
+
+    return transactions.some((tx) =>
+      tx.transaction_type === 'CustomFieldChange' &&
+      matchesStatusFilter(tx.field, fieldFilter) &&
+      matchesStatusFilter(tx.old_value, config?.old_value) &&
+      matchesStatusFilter(tx.new_value, newValueFilter)
+    );
+  }
+}
+
+export class OnLinkCreate implements ConditionEvaluator {
+  evaluate(_ticket: Ticket, transactions: Transaction[], _context?: ConditionEvaluateContext, config?: ConditionConfig): boolean {
+    return transactions.some((tx) => {
+      if (tx.transaction_type !== 'LinkCreate') return false;
+      if (config?.link_type) {
+        const linkType = tx.field;
+        if (!matchesStatusFilter(linkType, config.link_type)) return false;
+      }
+      return true;
+    });
+  }
+}
+
+export class OnOverdue implements ConditionEvaluator {
+  evaluate(_ticket: Ticket, _transactions: Transaction[], context?: ConditionEvaluateContext, config?: ConditionConfig): boolean {
+    const fieldKey = config?.field_key ?? config?.field_id ?? config?.field;
+    if (!fieldKey) return false;
+
+    const cfValue = context?.customFields?.[String(fieldKey)];
+    if (!cfValue) return false;
+
+    // Parse the date value
+    const dueDate = new Date(cfValue);
+    if (isNaN(dueDate.getTime())) return false;
+
+    // Check if overdue (past due date)
+    if (new Date() <= dueDate) return false;
+
+    // Check that ticket is still active (not in inactive state)
+    const lifecycleDef = context?.lifecycleDef;
+    if (lifecycleDef) {
+      const inactiveStates = lifecycleDef.statuses.inactive;
+      if (inactiveStates.includes(_ticket.status)) return false;
+    }
+
+    return true;
+  }
+}
+
 const conditionRegistry: Record<string, ConditionEvaluator> = {
   OnCreate: new OnCreate(),
   OnStatusChange: new OnStatusChange(),
   OnResolve: new OnResolve(),
+  OnCustomFieldChange: new OnCustomFieldChange(),
+  OnLinkCreate: new OnLinkCreate(),
+  OnOverdue: new OnOverdue(),
 };
 
 export function getConditionEvaluator(type: string): ConditionEvaluator | null {

src/scrip/engine.ts

@@ -4,7 +4,7 @@ import type { Transaction } from '../models/transaction.ts';
 import { tickets, queues, scrips, lifecycles, customFieldValues, customFields } from '../db/schema.ts';
 import { eq, asc, inArray } from 'drizzle-orm';
 import { getConditionEvaluator } from './conditions.ts';
-import type { ConditionEvaluateContext } from './conditions.ts';
+import type { ConditionConfig, ConditionEvaluateContext } from './conditions.ts';
 import { getActionExecutor } from './actions.ts';
 import type { ActionPayload } from './actions.ts';
 import { TemplateRenderer } from './templates.ts';
@@ -37,6 +37,7 @@ export class ScripEngine {
   async prepare(
     ticketId: number,
     transactions: Transaction[],
+    stage: 'TransactionCreate' | 'TransactionBatch' = 'TransactionCreate',
   ): Promise<PreparedScrip[]> {
     const ticketRecord = await this.db.query.tickets.findFirst({
       where: eq(tickets.id, ticketId),
@@ -53,6 +54,15 @@ export class ScripEngine {
     const matchingScrips = allScrips.filter((scrip) => {
       if (scrip.disabled) return false;
       if (scrip.queue_id !== null && scrip.queue_id !== ticketRecord.queue_id) return false;
+      if (scrip.stage !== stage) return false;
+      // Filter by applicable transaction types — if set, at least one tx must match
+      if (scrip.applicable_trans_types) {
+        const types = scrip.applicable_trans_types.split(',').map((t) => t.trim()).filter(Boolean);
+        if (types.length > 0 && !types.includes('Any')) {
+          const txTypes = new Set(transactions.map((tx) => tx.transaction_type));
+          if (!types.some((t) => txTypes.has(t))) return false;
+        }
+      }
       return true;
     });
 
@@ -70,10 +80,6 @@ export class ScripEngine {
       }
     }
 
-    const conditionContext: ConditionEvaluateContext = {
-      lifecycleDef,
-    };
-
     const cfValues = await this.db.query.customFieldValues.findMany({
       where: eq(customFieldValues.ticket_id, ticketId),
     });
@@ -94,6 +100,11 @@ export class ScripEngine {
       }
     }
 
+    const conditionContext: ConditionEvaluateContext = {
+      lifecycleDef,
+      customFields: customFieldsMap,
+    };
+
     const prepared: PreparedScrip[] = [];
 
     for (const scrip of matchingScrips) {
@@ -103,7 +114,12 @@ export class ScripEngine {
         continue;
       }
 
-      if (!evaluator.evaluate(ticketRecord as unknown as Ticket, transactions, conditionContext)) {
+      if (!evaluator.evaluate(
+        ticketRecord as unknown as Ticket,
+        transactions,
+        conditionContext,
+        scrip.condition_config as ConditionConfig,
+      )) {
         continue;
       }
 

src/scrip/scheduler.ts

@@ -0,0 +1,92 @@
+import type { Db } from '../db/index.ts';
+import { transactions, tickets, queues, lifecycles } from '../db/schema.ts';
+import { eq, and, isNull } from 'drizzle-orm';
+import { ScripEngine } from './engine.ts';
+
+const SYSTEM_USER = '00000000-0000-0000-0000-000000000000';
+
+/**
+ * Run scheduled scrips against all active tickets.
+ * Creates a synthetic "Scheduled" transaction so conditions like OnOverdue can fire.
+ */
+export async function runScheduledScrips(db: Db): Promise<{ checked: number; fired: number }> {
+  const engine = new ScripEngine(db);
+
+  // Get all lifecycles to determine inactive statuses
+  const allLifecycles = await db.query.lifecycles.findMany();
+  const inactiveByQueue = new Map<string, Set<string>>();
+
+  // Get all queues with lifecycles
+  const allQueues = await db.query.queues.findMany();
+  for (const q of allQueues) {
+    if (q.lifecycle_id) {
+      const lc = allLifecycles.find((l) => l.id === q.lifecycle_id);
+      if (lc) {
+        const def = lc.definition as any;
+        inactiveByQueue.set(q.id, new Set(def?.statuses?.inactive ?? ['resolved', 'closed']));
+      }
+    }
+  }
+
+  // Find all potentially active tickets
+  const allTickets = await db.query.tickets.findMany();
+  const active = allTickets.filter((t) => {
+    const inactive = inactiveByQueue.get(t.queue_id);
+    if (inactive) return !inactive.has(t.status);
+    return !['resolved', 'closed'].includes(t.status);
+  });
+
+  let fired = 0;
+
+  for (const ticket of active) {
+    try {
+      // Create a synthetic Scheduled transaction
+      const [tx] = await db.insert(transactions).values({
+        ticket_id: ticket.id,
+        transaction_type: 'Comment' as any,
+        field: 'scheduled',
+        data: { body: 'Scheduled scrip evaluation' },
+        creator_id: SYSTEM_USER,
+      } as any).returning();
+
+      if (!tx) continue;
+
+      // Run scrips
+      const prepared = await engine.prepare(ticket.id, [tx as any]);
+      if (prepared.length > 0) {
+        const results = await engine.commit(prepared);
+        const successes = results.filter((r) => r.success);
+        if (successes.length > 0) fired += successes.length;
+      }
+    } catch (err) {
+      // Log and continue — don't let one failing ticket block the scheduler
+      console.error(`[scheduler] Error processing ticket ${ticket.id}:`, err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  return { checked: active.length, fired };
+}
+
+/**
+ * Start the background scheduler. Runs every `intervalMinutes` minutes.
+ */
+export function startScheduler(db: Db, intervalMinutes = 5) {
+  console.log(`[scheduler] Starting scrip scheduler (every ${intervalMinutes}m)`);
+
+  const run = async () => {
+    try {
+      const result = await runScheduledScrips(db);
+      if (result.fired > 0) {
+        console.log(`[scheduler] Checked ${result.checked} tickets, fired ${result.fired} scrip actions`);
+      }
+    } catch (err) {
+      console.error('[scheduler] Error:', err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  // Run once at startup after a short delay
+  setTimeout(run, 10000);
+
+  // Then run on interval
+  setInterval(run, intervalMinutes * 60 * 1000);
+}

src/scrip/templates.ts

@@ -17,7 +17,7 @@ export class TemplateRenderer {
 
 export interface TemplateContext {
   ticket: {
-    id: string;
+    id: number;
     subject: string;
     status: string;
     queue_id: string;

tsconfig.json

@@ -27,5 +27,6 @@
     "paths": {
       "@/*": ["./src/*"]
     }
-  }
+  },
+  "exclude": ["web", "node_modules"]
 }

web/AGENTS.md

@@ -1,5 +1,49 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
+# Tessera Design Rules
 
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->
+Follow these rules when writing any frontend code. The design is clean, modern, and minimal — avoid the "2015 admin panel" look.
+
+## Borders
+- **Never** use `border-border` (full opacity). Always `border-border/50` or `border-border/30`.
+- Section dividers: `border-b border-border/50`
+- Subtle item separators: `border-b border-border/30`
+- Card borders: `border border-border/50`
+
+## Shadows
+- **Never** use `shadow-sm` or `shadow-md` on cards, sections, or tabs.
+- The sidebar is the only element with a shadow (subtle).
+- No `bg-card/82`, no `bg-background/55` — use `bg-card` or `bg-transparent`.
+
+## Section wrappers
+- `rounded-lg border border-border/50` — NOT `rounded-md border border-border bg-card shadow-sm`
+
+## List items
+- `rounded-lg border border-border/50 p-3`, hover: `hover:border-primary/30 hover:bg-accent/30`
+- Active: `border-primary/50 bg-primary/5`
+
+## Nav items (sidebar)
+- Default: `text-sidebar-foreground/55`, icons at 50% opacity
+- Hover: `text-sidebar-foreground hover:bg-sidebar-accent/50`, icons at 70%
+- Active: `bg-sidebar-accent text-sidebar-foreground font-medium`, icons at 90%
+- No inset shadow on active items
+
+## Typography
+- Section headers: `text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60`
+- No `text-[11px] font-semibold uppercase` anywhere — use the above pattern
+- Body text: `text-sm` for main, `text-xs` for secondary
+- Keep font sizes consistent: 10px (labels), 12-13px (content), 14px (headings)
+
+## Icons
+- Section headers: `h-3 w-3` (not `h-4 w-4`)
+- In nav items: `w-4 h-4`
+- Always dimmed when inactive (opacity-50), bright when active
+
+## Forms
+- Inputs/selects: `h-8 rounded-md border border-input bg-transparent px-2.5 text-sm`
+- No `bg-card` on inputs unless inside a card
+- Labels: `text-[10px] font-medium text-muted-foreground`
+
+## General
+- No `backdrop-blur` on headers or sections
+- No `bg-card/82` or `bg-background/55` — use solid colors or `bg-transparent`
+- Content areas: `bg-background/80` for the main page background
+- Avoid `<dl>`/`<dt>`/`<dd>` grids for properties — use simple `flex justify-between` rows

web/README.md

@@ -14,7 +14,7 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://127.0.0.1:3100](http://127.0.0.1:3100) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 

web/next.config.ts

@@ -1,11 +1,19 @@
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import type { NextConfig } from "next";
 
+const appRoot = dirname(fileURLToPath(import.meta.url));
+
 const nextConfig: NextConfig = {
+  outputFileTracingRoot: appRoot,
+  turbopack: {
+    root: appRoot,
+  },
   async rewrites() {
     return [
       {
-        source: '/api/:path*',
-        destination: 'http://127.0.0.1:9876/:path*',
+        source: "/api/:path*",
+        destination: "http://127.0.0.1:9876/:path*",
       },
     ];
   },

web/package-lock.json

@@ -9,15 +9,21 @@
       "version": "0.1.0",
       "dependencies": {
         "@base-ui/react": "^1.5.0",
+        "@hookform/resolvers": "^5.4.0",
+        "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.4.0",
         "lucide-react": "^1.17.0",
         "next": "16.2.7",
+        "next-themes": "^0.4.6",
         "react": "19.2.4",
         "react-dom": "19.2.4",
+        "react-hook-form": "^7.77.0",
         "shadcn": "^4.10.0",
         "tailwind-merge": "^3.6.0",
-        "tw-animate-css": "^1.4.0"
+        "tw-animate-css": "^1.4.0",
+        "zod": "^4.4.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -943,6 +949,18 @@
         "hono": "^4"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.4.0.tgz",
+      "integrity": "sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
@@ -1981,6 +1999,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -2261,6 +2285,39 @@
         "tailwindcss": "4.3.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@ts-morph/common": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.27.0.tgz",
@@ -3947,6 +4004,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
+      "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -7217,6 +7284,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -8002,6 +8079,22 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.77.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.77.0.tgz",
+      "integrity": "sha512-Sslh9YDYc0GDlWT/lxasnIduNo4v3yyvqRGvmGKUre5AFjDs/HV9/OafHGD8d+sB2yoL4UIL9L8X9i0WlZZebg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

web/package.json

@@ -3,9 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --webpack -H 127.0.0.1 --port 3100",
+    "dev:prod": "next build && next start -H 127.0.0.1 --port 3100",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -H 127.0.0.1 --port 3100",
     "lint": "eslint"
   },
   "dependencies": {

web/src/app/dashboards/[id]/page.tsx

@@ -0,0 +1,598 @@
+"use client";
+
+import { useState, useEffect, use, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import {
+  GripIcon,
+  PencilIcon,
+  PlusIcon,
+  Trash2Icon,
+  RefreshCwIcon,
+  LayoutGridIcon,
+} from "lucide-react";
+import {
+  getDashboard,
+  createWidget,
+  deleteWidget,
+  updateWidget,
+  getWidgetData,
+  getViews,
+  getTeams,
+  updateDashboard,
+} from "@/lib/api";
+import type {
+  Dashboard,
+  DashboardWidget,
+  SavedView,
+  Team,
+  WidgetData,
+} from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { CountWidget } from "@/components/widgets/count-widget";
+import { TicketListWidget } from "@/components/widgets/ticket-list-widget";
+import { StatusChartWidget } from "@/components/widgets/status-chart-widget";
+import { GroupedCountsWidget } from "@/components/widgets/grouped-counts-widget";
+import { TrendChartWidget } from "@/components/widgets/trend-chart-widget";
+import { cn } from "@/lib/utils";
+
+function widgetGridStyle(position: { x: number; y: number; w: number; h: number }) {
+  return {
+    gridColumn: `${position.x + 1} / span ${position.w}`,
+    gridRow: `${position.y + 1} / span ${position.h}`,
+  };
+}
+
+export default function DashboardPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const router = useRouter();
+
+  const [dashboard, setDashboard] = useState<Dashboard | null>(null);
+  const [widgets, setWidgets] = useState<(DashboardWidget & { data?: WidgetData })[]>([]);
+  const [views, setViews] = useState<SavedView[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [teams, setTeams] = useState<Team[]>([]);
+
+  // Add widget dialog
+  const [addOpen, setAddOpen] = useState(false);
+  const [addViewId, setAddViewId] = useState("");
+  const [addTitle, setAddTitle] = useState("");
+  const [addType, setAddType] = useState("count");
+  const [addGroupBy, setAddGroupBy] = useState("owner");
+  const [adding, setAdding] = useState(false);
+
+  const fetchDashboard = useCallback(async () => {
+    const { data, error } = await getDashboard(id);
+    if (error || !data) {
+      setError(error ?? "Dashboard not found");
+      setLoading(false);
+      return;
+    }
+    setDashboard(data);
+    const widgetList = data.widgets ?? [];
+    setWidgets(widgetList);
+
+    // Fetch data for each widget
+    for (const widget of widgetList) {
+      const { data: wData } = await getWidgetData(id, widget.id);
+      if (wData) {
+        setWidgets((prev) =>
+          prev.map((w) => (w.id === widget.id ? { ...w, data: wData } : w))
+        );
+      }
+    }
+
+    setLoading(false);
+  }, [id]);
+
+  useEffect(() => {
+    fetchDashboard();
+    getViews().then(({ data }) => { if (data) setViews(data); });
+    getTeams().then(({ data }) => { if (data) setTeams(data); });
+  }, [fetchDashboard]);
+
+  // Auto-refresh: only refresh widget data, not structure
+  useEffect(() => {
+    if (!autoRefresh || !dashboard) return;
+    const interval = setInterval(() => {
+      for (const widget of widgets) {
+        getWidgetData(dashboard.id, widget.id).then(({ data: wData }) => {
+          if (wData) {
+            setWidgets((prev) =>
+              prev.map((w) => (w.id === widget.id ? { ...w, data: wData } : w))
+            );
+          }
+        });
+      }
+    }, 30_000);
+    return () => clearInterval(interval);
+  }, [autoRefresh, dashboard?.id]);
+
+  const handleAddWidget = async () => {
+    if (!addViewId || !addTitle.trim()) return;
+    setAdding(true);
+    // Smart positioning: fill a 3-column grid (4 units each in 12-col grid)
+    const COLS = 3; const W = 4; const H = 2;
+    const occupied = new Set(widgets.map((w) => `${w.position.x},${w.position.y}`));
+    let x = 0; let y = 0;
+    while (occupied.has(`${x},${y}`)) {
+      x += W;
+      if (x >= COLS * W) { x = 0; y += H; }
+    }
+    const pos = { x, y, w: W, h: H };
+    const config = addType === "grouped_counts" ? { group_by: addGroupBy } : {};
+    const { data, error } = await createWidget(id, {
+      view_id: addViewId,
+      title: addTitle.trim(),
+      widget_type: addType,
+      position: pos,
+      config,
+    });
+    if (!error && data) {
+      setWidgets((prev) => [...prev, data]);
+      const { data: wData } = await getWidgetData(id, data.id);
+      if (wData) {
+        setWidgets((prev) => prev.map((w) => (w.id === data.id ? { ...w, data: wData } : w)));
+      }
+      setAddOpen(false);
+      setAddViewId("");
+      setAddTitle("");
+      setAddType("count");
+    }
+    setAdding(false);
+  };
+
+  const handleDeleteWidget = async (widgetId: string) => {
+    await deleteWidget(id, widgetId);
+    setWidgets((prev) => prev.filter((w) => w.id !== widgetId));
+  };
+
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [resizingId, setResizingId] = useState<string | null>(null);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+
+  // Resize: track mousedown → mousemove → mouseup
+  const handleResizeStart = (e: React.MouseEvent, widgetId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizingId(widgetId);
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const widget = widgets.find((w) => w.id === widgetId);
+    if (!widget || !gridRef.current) return;
+
+    const startW = widget.position.w;
+    const startH = widget.position.h;
+    const gridWidth = gridRef.current.offsetWidth;
+    const unitSize = gridWidth / 12;
+
+    const onMove = (ev: MouseEvent) => {
+      const dx = Math.round((ev.clientX - startX) / unitSize);
+      const dy = Math.round((ev.clientY - startY) / unitSize);
+      const newW = Math.max(1, Math.min(12, startW + dx));
+      const newH = Math.max(1, startH + dy);
+      setWidgets((prev) =>
+        prev.map((w) =>
+          w.id === widgetId
+            ? { ...w, position: { ...w.position, w: newW, h: newH } }
+            : w
+        )
+      );
+    };
+
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      setResizingId(null);
+
+      // Resolve overlaps using latest state via functional updater
+      setWidgets((current) => {
+        let resolved = current.map((w) => ({ ...w, position: { ...w.position } }));
+
+        for (let pass = 0; pass < 10; pass++) {
+          let hasOverlap = false;
+          for (let i = 0; i < resolved.length; i++) {
+            for (let j = i + 1; j < resolved.length; j++) {
+              const a = resolved[i].position;
+              const b = resolved[j].position;
+              if (a.x + a.w > b.x && a.x < b.x + b.w && a.y + a.h > b.y && a.y < b.y + b.h) {
+                hasOverlap = true;
+                const toMove = widgetId === resolved[i].id ? j : i;
+                const fixedW = resolved[widgetId === resolved[i].id ? i : j];
+                resolved[toMove] = {
+                  ...resolved[toMove],
+                  position: { ...resolved[toMove].position, y: fixedW.position.y + fixedW.position.h },
+                };
+              }
+            }
+          }
+          if (!hasOverlap) break;
+        }
+
+        // Persist changed positions
+        for (const w of resolved) {
+          const orig = current.find((o) => o.id === w.id);
+          if (orig && (orig.position.y !== w.position.y || orig.position.h !== w.position.h)) {
+            updateWidget(id, w.id, { position: w.position });
+          }
+        }
+
+        return resolved;
+      });
+    };
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+
+  // Mouse-based drag: mousedown on grip → mousemove → mouseup
+  const handleDragMouseDown = (e: React.MouseEvent, widgetId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!gridRef.current) return;
+    setDraggingId(widgetId);
+
+    const widget = widgets.find((w) => w.id === widgetId);
+    if (!widget) return;
+    const unitSize = gridRef.current.offsetWidth / 12;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startGridX = widget.position.x;
+    const startGridY = widget.position.y;
+
+    // Store offset from widget origin to mouse for visual tracking
+    const widgetEl = (e.target as HTMLElement).closest('[data-widget-id]') as HTMLElement;
+    if (widgetEl) {
+      const rect = widgetEl.getBoundingClientRect();
+      setDragOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    }
+
+    const onMove = (ev: MouseEvent) => {
+      const dx = Math.round((ev.clientX - startX) / unitSize);
+      const dy = Math.round((ev.clientY - startY) / unitSize);
+      const newX = Math.max(0, Math.min(12 - widget.position.w, startGridX + dx));
+      const newY = Math.max(0, startGridY + dy);
+      setWidgets((prev) =>
+        prev.map((w) =>
+          w.id === widgetId
+            ? { ...w, position: { ...w.position, x: newX, y: newY } }
+            : w
+        )
+      );
+    };
+
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      setDraggingId(null);
+
+      setWidgets((current) => {
+        const updated = current.find((w) => w.id === widgetId);
+        if (!updated) return current;
+
+        let resolved = current.map((w) => ({ ...w, position: { ...w.position } }));
+
+        // Push overlapping widgets down
+        for (let pass = 0; pass < 10; pass++) {
+          let hasOverlap = false;
+          for (let i = 0; i < resolved.length; i++) {
+            for (let j = i + 1; j < resolved.length; j++) {
+              const a = resolved[i].position;
+              const b = resolved[j].position;
+              if (a.x + a.w > b.x && a.x < b.x + b.w && a.y + a.h > b.y && a.y < b.y + b.h) {
+                hasOverlap = true;
+                const moveIdx = resolved[i].id === widgetId ? j : i;
+                const fixedIdx = moveIdx === i ? j : i;
+                resolved[moveIdx] = {
+                  ...resolved[moveIdx],
+                  position: { ...resolved[moveIdx].position, y: resolved[fixedIdx].position.y + resolved[fixedIdx].position.h },
+                };
+              }
+            }
+          }
+          if (!hasOverlap) break;
+        }
+
+        // Persist changed positions
+        for (const w of resolved) {
+          const orig = current.find((o) => o.id === w.id);
+          if (orig && (orig.position.x !== w.position.x || orig.position.y !== w.position.y)) {
+            updateWidget(id, w.id, { position: w.position });
+          }
+        }
+
+        return resolved;
+      });
+    };
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+
+  const renderWidget = (widget: DashboardWidget & { data?: WidgetData }) => {
+    if (!widget.data) {
+      return (
+        <div className="flex h-full items-center justify-center rounded-lg border border-border bg-card p-4">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        </div>
+      );
+    }
+
+    switch (widget.data.type) {
+      case "count":
+      case "my_tickets":
+        return <CountWidget data={widget.data} />;
+      case "overdue":
+        return <CountWidget data={{ ...widget.data, type: "count" }} />;
+      case "ticket_list":
+        return <TicketListWidget data={widget.data} />;
+      case "status_chart":
+        return <StatusChartWidget data={widget.data} />;
+      case "grouped_counts":
+        return <GroupedCountsWidget data={widget.data} />;
+      case "trend_chart":
+        return <TrendChartWidget data={widget.data} />;
+      default:
+        return (
+          <div className="flex h-full items-center justify-center rounded-lg border border-border bg-card p-4">
+            <p className="text-xs text-muted-foreground">Unknown type: {widget.data.type}</p>
+          </div>
+        );
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (error || !dashboard) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4">
+        <p className="text-sm text-muted-foreground">{error ?? "Dashboard not found"}</p>
+        <Link href="/" className="text-sm text-primary hover:underline">
+          Go to ticket list
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-background/80">
+      <header className="shrink-0 border-b border-border bg-card/82 backdrop-blur">
+        <div className="flex items-center justify-between px-5 py-3 lg:px-6">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 text-[11px] font-semibold uppercase text-muted-foreground">
+              <LayoutGridIcon className="h-3.5 w-3.5" />
+              Dashboard
+            </div>
+            <h1 className="mt-1 text-xl font-semibold text-foreground">{dashboard.name}</h1>
+            <div className="mt-2 flex items-center gap-2">
+              <select
+                value={dashboard.team_id ?? ""}
+                onChange={async (e) => {
+                  const teamId = e.target.value || null;
+                  await updateDashboard(dashboard.id, { team_id: teamId });
+                  setDashboard((prev) => prev ? { ...prev, team_id: teamId } : prev);
+                }}
+                className="h-7 rounded border border-border bg-card px-2 text-xs text-muted-foreground outline-none"
+              >
+                <option value="">No team</option>
+                {teams.map((t) => (
+                  <option key={t.id} value={t.id}>{t.name}</option>
+                ))}
+              </select>
+              {dashboard.description && (
+                <p className="text-sm text-muted-foreground">{dashboard.description}</p>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setEditMode((v) => !v)}
+              className={cn("h-8 border-border/80", editMode ? "bg-primary/20 text-primary border-primary/40" : "bg-card/70")}
+            >
+              <PencilIcon className="h-4 w-4" />
+              {editMode ? "Done" : "Edit"}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setAutoRefresh((v) => !v)}
+              className={cn("h-8 border-border/80", autoRefresh ? "bg-primary/20 text-primary" : "bg-card/70")}
+            >
+              <RefreshCwIcon className={cn("h-4 w-4", autoRefresh && "animate-spin")} />
+              {autoRefresh ? "Live" : "Auto"}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={fetchDashboard}
+              className="h-8 border-border/80 bg-card/70"
+            >
+              <RefreshCwIcon className="h-4 w-4" />
+              Refresh
+            </Button>
+            {editMode && (
+              <Button size="sm" onClick={() => setAddOpen(true)} className="h-8 bg-primary shadow-sm">
+                <PlusIcon className="h-4 w-4" />
+                Add widget
+              </Button>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <div className="flex-1 overflow-auto p-5 lg:p-6">
+        {widgets.length === 0 ? (
+          <div className="flex h-full flex-col items-center justify-center gap-3">
+            <LayoutGridIcon className="h-10 w-10 text-muted-foreground/40" />
+            <p className="text-sm text-muted-foreground">No widgets yet</p>
+            {editMode ? (
+              <Button variant="outline" size="sm" onClick={() => setAddOpen(true)}>
+                <PlusIcon className="h-4 w-4" />
+                Add your first widget
+              </Button>
+            ) : (
+              <Button variant="outline" size="sm" onClick={() => setEditMode(true)}>
+                <PencilIcon className="h-4 w-4" />
+                Enter edit mode
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div
+            ref={gridRef}
+            className="grid auto-rows-[minmax(100px,auto)] grid-cols-6 gap-3 md:grid-cols-12 md:gap-4"
+          >
+            {widgets.map((widget) => (
+              <div
+                key={widget.id}
+                data-widget-id={widget.id}
+                className={cn(
+                  "group relative transition-none",
+                  draggingId === widget.id && "z-10",
+                  resizingId === widget.id && "select-none",
+                )}
+                style={widgetGridStyle(widget.position)}
+              >
+                {/* Drag handle */}
+                {editMode && (
+                  <div
+                    className="absolute left-2 top-2 z-10 hidden h-6 w-6 cursor-grab items-center justify-center rounded bg-background/80 text-muted-foreground group-hover:flex active:cursor-grabbing"
+                    onMouseDown={(e) => handleDragMouseDown(e, widget.id)}
+                  >
+                    <GripIcon className="h-3.5 w-3.5" />
+                  </div>
+                )}
+                {renderWidget(widget)}
+                {editMode && (
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => handleDeleteWidget(widget.id)}
+                      className="absolute right-2 top-2 z-10 hidden h-6 w-6 items-center justify-center rounded bg-destructive/90 text-destructive-foreground transition-opacity hover:bg-destructive group-hover:flex"
+                      title="Remove widget"
+                    >
+                      <Trash2Icon className="h-3.5 w-3.5" />
+                    </button>
+                    {/* Resize handle */}
+                    <div
+                      className="absolute bottom-0 right-0 z-10 hidden h-5 w-5 cursor-se-resize items-center justify-center group-hover:flex"
+                      onMouseDown={(e) => handleResizeStart(e, widget.id)}
+                    >
+                      <svg width="10" height="10" viewBox="0 0 10 10" className="text-muted-foreground">
+                        <path d="M0 10 L10 0" stroke="currentColor" strokeWidth="1.5" />
+                        <path d="M5 10 L10 5" stroke="currentColor" strokeWidth="1.5" />
+                        <path d="M0 10 L10 10" stroke="transparent" />
+                      </svg>
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Dialog open={addOpen} onOpenChange={setAddOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add widget</DialogTitle>
+            <DialogDescription>
+              Choose a saved view and widget type to add to this dashboard.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Widget title</label>
+              <input
+                value={addTitle}
+                onChange={(e) => setAddTitle(e.target.value)}
+                placeholder="e.g. Open tickets"
+                className="mt-1 h-9 w-full rounded-md border border-input bg-card px-3 text-sm outline-none focus:border-ring"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Saved view</label>
+              <select
+                value={addViewId}
+                onChange={(e) => {
+                  setAddViewId(e.target.value);
+                  const view = views.find((v) => v.id === e.target.value);
+                  if (view && !addTitle) setAddTitle(view.name);
+                }}
+                className="mt-1 h-9 w-full rounded-md border border-input bg-card px-3 text-sm outline-none focus:border-ring"
+              >
+                <option value="">Select a view...</option>
+                {views.map((v) => (
+                  <option key={v.id} value={v.id}>
+                    {v.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="text-sm font-medium">Widget type</label>
+              <select
+                value={addType}
+                onChange={(e) => setAddType(e.target.value)}
+                className="mt-1 h-9 w-full rounded-md border border-input bg-card px-3 text-sm outline-none focus:border-ring"
+              >
+                <option value="count">Count (big number)</option>
+                <option value="ticket_list">Ticket list (mini table)</option>
+                <option value="status_chart">Status chart (donut)</option>
+                <option value="grouped_counts">Grouped counts (bar chart)</option>
+                <option value="my_tickets">My tickets (auto-scoped)</option>
+                <option value="overdue">Overdue / stale</option>
+                <option value="trend_chart">Trend chart (bar)</option>
+              </select>
+            </div>
+            {addType === "grouped_counts" && (
+              <div>
+                <label className="text-sm font-medium">Group by</label>
+                <select
+                  value={addGroupBy}
+                  onChange={(e) => setAddGroupBy(e.target.value)}
+                  className="mt-1 h-9 w-full rounded-md border border-input bg-card px-3 text-sm outline-none focus:border-ring"
+                >
+                  <option value="owner">Owner</option>
+                  <option value="queue">Queue</option>
+                </select>
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setAddOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              disabled={!addViewId || !addTitle.trim() || adding}
+              onClick={handleAddWidget}
+            >
+              {adding ? "Adding..." : "Add widget"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

web/src/app/globals.css

@@ -49,72 +49,72 @@
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(0.982 0.006 106);
+  --foreground: oklch(0.19 0.018 248);
+  --card: oklch(0.996 0.003 106);
+  --card-foreground: oklch(0.19 0.018 248);
+  --popover: oklch(0.996 0.003 106);
+  --popover-foreground: oklch(0.19 0.018 248);
+  --primary: oklch(0.31 0.046 243);
+  --primary-foreground: oklch(0.99 0.003 106);
+  --secondary: oklch(0.945 0.01 105);
+  --secondary-foreground: oklch(0.25 0.026 244);
+  --muted: oklch(0.948 0.008 106);
+  --muted-foreground: oklch(0.49 0.023 250);
+  --accent: oklch(0.925 0.024 184);
+  --accent-foreground: oklch(0.21 0.028 246);
+  --destructive: oklch(0.55 0.18 27);
+  --border: oklch(0.865 0.014 102);
+  --input: oklch(0.84 0.015 102);
+  --ring: oklch(0.58 0.068 185);
+  --chart-1: oklch(0.62 0.095 184);
+  --chart-2: oklch(0.53 0.078 243);
+  --chart-3: oklch(0.64 0.12 77);
+  --chart-4: oklch(0.55 0.15 28);
+  --chart-5: oklch(0.44 0.055 257);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.245 0.026 248);
+  --sidebar-foreground: oklch(0.93 0.012 108);
+  --sidebar-primary: oklch(0.69 0.105 184);
+  --sidebar-primary-foreground: oklch(0.18 0.022 248);
+  --sidebar-accent: oklch(0.31 0.031 248);
+  --sidebar-accent-foreground: oklch(0.98 0.006 106);
+  --sidebar-border: oklch(1 0 0 / 11%);
+  --sidebar-ring: oklch(0.66 0.102 184);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: oklch(0.18 0.018 248);
+  --foreground: oklch(0.94 0.011 105);
+  --card: oklch(0.225 0.022 248);
+  --card-foreground: oklch(0.94 0.011 105);
+  --popover: oklch(0.225 0.022 248);
+  --popover-foreground: oklch(0.94 0.011 105);
+  --primary: oklch(0.74 0.105 184);
+  --primary-foreground: oklch(0.17 0.018 248);
+  --secondary: oklch(0.27 0.026 248);
+  --secondary-foreground: oklch(0.94 0.011 105);
+  --muted: oklch(0.28 0.023 248);
+  --muted-foreground: oklch(0.7 0.019 105);
+  --accent: oklch(0.31 0.043 184);
+  --accent-foreground: oklch(0.94 0.011 105);
+  --destructive: oklch(0.68 0.17 24);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.68 0.095 184);
+  --chart-1: oklch(0.74 0.105 184);
+  --chart-2: oklch(0.7 0.105 74);
+  --chart-3: oklch(0.66 0.12 25);
+  --chart-4: oklch(0.61 0.08 245);
+  --chart-5: oklch(0.8 0.04 108);
+  --sidebar: oklch(0.145 0.018 248);
+  --sidebar-foreground: oklch(0.94 0.011 105);
+  --sidebar-primary: oklch(0.74 0.105 184);
+  --sidebar-primary-foreground: oklch(0.17 0.018 248);
+  --sidebar-accent: oklch(0.24 0.026 248);
+  --sidebar-accent-foreground: oklch(0.94 0.011 105);
+  --sidebar-border: oklch(1 0 0 / 11%);
+  --sidebar-ring: oklch(0.68 0.095 184);
 }
 
 @keyframes slide-in-right {
@@ -135,8 +135,12 @@
   body {
     @apply bg-background text-foreground;
     font-feature-settings: "cv01" 1, "ss03" 1;
+    background-image:
+      linear-gradient(to right, color-mix(in oklch, var(--border) 45%, transparent) 1px, transparent 1px),
+      linear-gradient(to bottom, color-mix(in oklch, var(--border) 45%, transparent) 1px, transparent 1px);
+    background-size: 44px 44px;
   }
   html {
     @apply font-sans;
   }
-}
+}

web/src/app/layout.tsx

@@ -1,13 +1,15 @@
 import type { Metadata } from "next";
-import { Inter, JetBrains_Mono } from "next/font/google";
+import { IBM_Plex_Sans, JetBrains_Mono } from "next/font/google";
 import { Suspense } from "react";
 import { ThemeProvider } from "next-themes";
 import "./globals.css";
 import { AppShell } from "@/components/app-shell";
+import { AuthProvider } from "@/lib/auth-context";
 
-const inter = Inter({
+const ibmPlexSans = IBM_Plex_Sans({
   subsets: ["latin"],
-  variable: "--font-inter",
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-sans",
 });
 
 const jetbrainsMono = JetBrains_Mono({
@@ -26,13 +28,15 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
+        className={`${ibmPlexSans.variable} ${jetbrainsMono.variable} font-sans antialiased`}
         style={{ fontSize: "15px", lineHeight: 1.5 }}
       >
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
-          <Suspense fallback={<div className="flex items-center justify-center h-screen text-muted-foreground">Loading...</div>}>
-            <AppShell>{children}</AppShell>
-          </Suspense>
+          <AuthProvider>
+            <Suspense fallback={<div className="flex items-center justify-center h-screen text-muted-foreground">Loading...</div>}>
+              <AppShell>{children}</AppShell>
+            </Suspense>
+          </AuthProvider>
         </ThemeProvider>
       </body>
     </html>

web/src/app/login/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth-context";
+import { LogInIcon } from "lucide-react";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { login, user } = useAuth();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Already logged in
+  if (user) {
+    router.replace("/");
+    return null;
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim() || !password) return;
+    setLoading(true);
+    setError(null);
+
+    const result = await login(username.trim(), password);
+    setLoading(false);
+
+    if (result) {
+      setError(result);
+    } else {
+      router.push("/");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background/80">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">Tessera</h1>
+          <p className="mt-1.5 text-sm text-muted-foreground">Sign in to your account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-1.5">
+            <label htmlFor="username" className="text-[10px] font-medium text-muted-foreground">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+              autoFocus
+              className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm outline-none focus:border-ring"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label htmlFor="password" className="text-[10px] font-medium text-muted-foreground">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm outline-none focus:border-ring"
+            />
+          </div>
+
+          {error && <p className="text-xs text-destructive">{error}</p>}
+
+          <button
+            type="submit"
+            disabled={loading || !username.trim() || !password}
+            className="flex h-9 w-full items-center justify-center gap-2 rounded-md bg-primary text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
+          >
+            {loading ? (
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent" />
+            ) : (
+              <LogInIcon className="h-4 w-4" />
+            )}
+            Sign in
+          </button>
+        </form>
+
+        <p className="text-center text-[10px] text-muted-foreground/60">
+          Demo: admin / admin
+        </p>
+      </div>
+    </div>
+  );
+}

web/src/components/app-shell.tsx

@@ -4,19 +4,24 @@ import { useState, useEffect, Suspense, createContext, useContext } from "react"
 import { usePathname, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import {
+  BellIcon,
+  CircleIcon,
   LayoutGridIcon,
   UserIcon,
+  UsersIcon,
   InboxIcon,
   ClockIcon,
   SettingsIcon,
   PanelLeftCloseIcon,
   PanelLeftIcon,
+  CommandIcon,
 } from "lucide-react";
-import { getTickets, getQueues } from "@/lib/api";
-import type { Queue } from "@/lib/types";
+import { getTickets, getQueues, getViews, getDashboards, getUsers, getTeams, createDashboard, getUnreadCount, getNotifications, markNotificationRead, markAllNotificationsRead, getApiTokens, createApiToken, revokeApiToken } from "@/lib/api";
+import type { Dashboard, Queue, SavedView, Team, User, Notification, ApiToken } from "@/lib/types";
 import { CommandPalette } from "@/components/command-palette";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { cn } from "@/lib/utils";
+import { useAuth } from "@/lib/auth-context";
+import { cn, formatTicketId } from "@/lib/utils";
 
 const SidebarCollapsedContext = createContext(false);
 
@@ -51,19 +56,19 @@ function SidebarNavItem({
       href={href}
       title={collapsed ? label : undefined}
       className={cn(
-        "flex items-center px-2 py-1.5 rounded-md text-[13px] transition-all duration-150 mb-0.5",
+        "group flex items-center px-2.5 py-1.5 rounded-md text-[13px] transition-colors",
         collapsed ? "justify-center w-full" : "justify-between",
         active
-          ? "bg-accent text-foreground font-medium"
-          : "text-muted-foreground hover:text-foreground hover:bg-accent font-normal"
+          ? "bg-sidebar-accent text-sidebar-foreground font-medium"
+          : "text-sidebar-foreground/55 hover:text-sidebar-foreground hover:bg-sidebar-accent/50 font-normal"
       )}
     >
-      <span className={cn("flex items-center", collapsed ? "" : "gap-2.5")}>
-        <Icon className="w-4 h-4 flex-shrink-0" />
-        {!collapsed && label}
+      <span className={cn("flex items-center min-w-0", collapsed ? "" : "gap-2.5")}>
+        <Icon className={cn("w-4 h-4 flex-shrink-0", active ? "opacity-90" : "opacity-50 group-hover:opacity-70")} />
+        {!collapsed && <span className="truncate">{label}</span>}
       </span>
       {!collapsed && count !== undefined && count > 0 && (
-        <span className="text-xs tabular-nums text-muted-foreground">
+        <span className="min-w-5 rounded px-1 text-right text-[11px] tabular-nums text-sidebar-foreground/35">
           {count}
         </span>
       )}
@@ -74,6 +79,7 @@ function SidebarNavItem({
 function SidebarNav() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const { user: authUser } = useAuth();
 
   const [counts, setCounts] = useState<ViewCounts>({
     all: 0,
@@ -82,54 +88,90 @@ function SidebarNav() {
     recent: 0,
   });
   const [queues, setQueues] = useState<(Queue & { count: number })[]>([]);
+  const [savedViews, setSavedViews] = useState<SavedView[]>([]);
+  const [dashboards, setDashboards] = useState<Dashboard[]>([]);
+  const [myTeamId, setMyTeamId] = useState<string | null>(null);
+  const [newDashboardName, setNewDashboardName] = useState("");
+  const [addingDashboard, setAddingDashboard] = useState(false);
+
+  const currentUserId = authUser?.id ?? null;
 
   useEffect(() => {
-    getTickets().then(({ data }) => {
+    async function load() {
+      const myId = currentUserId;
+      const [ticketRes, userRes] = await Promise.all([getTickets(), getUsers()]);
+      const data = ticketRes.data;
+
       if (data) {
         const now = Date.now();
         const week = 7 * 24 * 60 * 60 * 1000;
         setCounts({
           all: data.length,
-          my: data.filter((t) => t.owner_id).length,
+          my: myId ? data.filter((t) => t.owner_id === myId).length : 0,
           unassigned: data.filter((t) => !t.owner_id).length,
-          recent: data.filter(
-            (t) => new Date(t.updated_at).getTime() > now - week
-          ).length,
+          recent: data.filter((t) => new Date(t.updated_at).getTime() > now - week).length,
         });
       }
-    });
 
-    getQueues().then(({ data }) => {
-      if (data) {
-        Promise.all(
-          data.map((q) =>
+      // Queues
+      const queueRes = await getQueues();
+      if (queueRes.data) {
+        const qs = await Promise.all(
+          queueRes.data.map((q) =>
             getTickets({ queue_id: q.id }).then(({ data: tickets }) => ({
               ...q,
               count: tickets?.length ?? 0,
             }))
           )
-        ).then(setQueues);
+        );
+        setQueues(qs);
       }
-    });
-  }, []);
+
+      // Views
+      const viewRes = await getViews();
+      if (viewRes.data) setSavedViews(viewRes.data);
+
+      // Dashboards scoped to user's teams
+      const [dashRes, teamRes] = await Promise.all([getDashboards(), getTeams()]);
+      const allDashboards = dashRes.data ?? [];
+      const allTeams = teamRes.data ?? [];
+      const userTeams = myId
+        ? allTeams.filter((t) => (t.members ?? []).some((m) => m.id === myId))
+        : [];
+      setMyTeamId(userTeams[0]?.id ?? null);
+      const teamIds = new Set(userTeams.map((t) => t.id));
+      const visible = allDashboards.filter((d) =>
+        !d.team_id || teamIds.has(d.team_id)
+      );
+      setDashboards(visible);
+    }
+    void load();
+  }, [currentUserId]);
 
   const collapsed = useSidebarCollapsed();
 
   const views = [
     {
       label: "All tickets",
-      href: "/",
-      param: null,
+      href: "/?view=all",
+      param: "all",
       count: counts.all,
       icon: LayoutGridIcon,
     },
     {
       label: "My tickets",
-      href: "/?view=my",
+      href: currentUserId ? `/?view=my&owner=${currentUserId}` : "/?view=my",
       param: "my",
       count: counts.my,
       icon: UserIcon,
     },
+    ...(myTeamId ? [{
+      label: "My team's tickets",
+      href: `/?view=team&team_id=${myTeamId}`,
+      param: "team",
+      count: undefined as number | undefined,
+      icon: UsersIcon,
+    }] : []),
     {
       label: "Unassigned",
       href: "/?view=unassigned",
@@ -168,24 +210,107 @@ function SidebarNav() {
         })}
       </div>
 
-      {queues.length > 0 && (
-        <div>
+      {dashboards.length > 0 && (
+        <div className="mt-5">
           {!collapsed && (
-            <div className="px-2 py-1.5 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+            <div className="px-2.5 mb-1 text-[10px] font-medium text-sidebar-foreground/30 uppercase tracking-wider">
+              Dashboards
+            </div>
+          )}
+          {dashboards.length > 0 && (
+            <div className="px-2.5">
+              <select
+                value={dashboards.find((d) => pathname.startsWith("/dashboards/") && pathname.endsWith(d.id))?.id ?? ""}
+                onChange={(e) => {
+                  const id = e.target.value;
+                  if (id === "_new") {
+                    setAddingDashboard(true);
+                    e.target.value = dashboards.find((d) => pathname.startsWith("/dashboards/") && pathname.endsWith(d.id))?.id ?? "";
+                    return;
+                  }
+                  if (id) window.location.href = `/dashboards/${id}`;
+                }}
+                className="h-7 w-full rounded border border-sidebar-border bg-sidebar-accent px-1.5 text-[12px] text-sidebar-foreground outline-none"
+              >
+                {dashboards.map((dash) => (
+                  <option key={dash.id} value={dash.id}>{dash.name}</option>
+                ))}
+                <option value="_new">+ New dashboard</option>
+              </select>
+            </div>
+          )}
+          {addingDashboard && (
+            <div className="mt-1 px-2">
+              <input
+                value={newDashboardName}
+                onChange={(e) => setNewDashboardName(e.target.value)}
+                placeholder="Dashboard name"
+                className="h-7 w-full rounded border border-sidebar-border bg-sidebar-accent px-1.5 text-[12px] text-sidebar-foreground outline-none"
+                autoFocus
+                onKeyDown={async (e) => {
+                  if (e.key === "Enter" && newDashboardName.trim()) {
+                    const { data } = await createDashboard({ name: newDashboardName.trim(), is_default: false });
+                    if (data) {
+                      setDashboards((prev) => [...prev, data]);
+                      setNewDashboardName("");
+                      setAddingDashboard(false);
+                      window.location.href = `/dashboards/${data.id}`;
+                    }
+                  } else if (e.key === "Escape") {
+                    setNewDashboardName("");
+                    setAddingDashboard(false);
+                  }
+                }}
+                onBlur={() => {
+                  if (!newDashboardName.trim()) {
+                    setNewDashboardName("");
+                    setAddingDashboard(false);
+                  }
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {savedViews.length > 0 && (
+        <div className="mt-5">
+          {!collapsed && (
+            <div className="px-2.5 mb-1 text-[10px] font-medium text-sidebar-foreground/30 uppercase tracking-wider">
+              Saved views
+            </div>
+          )}
+          {savedViews.map((view) => {
+            const active =
+              pathname === "/" && searchParams.get("view_id") === view.id;
+            return (
+              <SidebarNavItem
+                key={view.id}
+                href={`/?view_id=${view.id}`}
+                icon={ClockIcon}
+                label={view.name}
+                active={active}
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {queues.length > 0 && (
+        <div className="mt-5">
+          {!collapsed && (
+            <div className="px-2.5 mb-1 text-[10px] font-medium text-sidebar-foreground/30 uppercase tracking-wider">
               Queues
             </div>
           )}
           {queues.map((queue) => {
             const active =
               pathname === "/" && searchParams.get("queue") === queue.id;
-            const QueueIcon = () => (
-              <span className="w-2 h-2 rounded-full bg-muted-foreground flex-shrink-0" />
-            );
             return (
               <SidebarNavItem
                 key={queue.id}
                 href={`/?queue=${queue.id}`}
-                icon={QueueIcon}
+                icon={CircleIcon}
                 label={queue.name}
                 count={queue.count}
                 active={active}
@@ -201,40 +326,268 @@ function SidebarNav() {
 function SidebarBottom() {
   const pathname = usePathname();
   const collapsed = useSidebarCollapsed();
+  const { user, logout, isAdmin } = useAuth();
+  const [tokenOpen, setTokenOpen] = useState(false);
+  const [tokens, setTokens] = useState<ApiToken[]>([]);
+  const [newTokenName, setNewTokenName] = useState("");
+  const [newTokenValue, setNewTokenValue] = useState<string | null>(null);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+
+  const loadTokens = async () => {
+    const { data } = await getApiTokens();
+    if (data) setTokens(data);
+  };
+
+  useEffect(() => { if (tokenOpen) { void loadTokens(); } }, [tokenOpen]);
+
+  const handleCreateToken = async () => {
+    if (!newTokenName.trim()) return;
+    setTokenError(null);
+    const { data, error } = await createApiToken(newTokenName.trim());
+    if (error) { setTokenError(error); return; }
+    if (data) {
+      setNewTokenValue(data.token);
+      setNewTokenName("");
+      await loadTokens();
+    }
+  };
+
+  const handleRevoke = async (id: string) => {
+    await revokeApiToken(id);
+    await loadTokens();
+  };
 
   return (
-    <div className="border-t border-border p-2">
-      <SidebarNavItem
-        href="/admin"
-        icon={SettingsIcon}
-        label="Admin"
-        active={pathname === "/admin"}
-      />
-      <div
-        className={cn(
-          "flex items-center mt-0.5 px-2 py-1.5",
-          collapsed ? "justify-center" : "gap-2"
-        )}
-        title={collapsed ? "User" : undefined}
-      >
-        <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-          <span className="text-primary-foreground text-[10px] font-semibold">
-            U
-          </span>
-        </div>
-        {!collapsed && (
-          <span className="text-[13px] text-muted-foreground truncate">
-            User
-          </span>
-        )}
-      </div>
-      <div className={cn("flex", collapsed ? "justify-center mt-1" : "mt-1")}>
+    <div className="border-t border-sidebar-border/50 p-2 space-y-1">
+      {isAdmin && (
+        <SidebarNavItem
+          href="/admin"
+          icon={SettingsIcon}
+          label="Admin"
+          active={pathname === "/admin"}
+        />
+      )}
+      {user ? (
+        <>
+          {!collapsed && (
+            <div className="px-2.5 py-1 text-[11px] text-sidebar-foreground/50 truncate">
+              {user.username}
+              {isAdmin && <span className="ml-1 text-[10px] text-sidebar-foreground/30">(admin)</span>}
+            </div>
+          )}
+          <button
+            onClick={() => setTokenOpen(true)}
+            className={cn(
+              "w-full flex items-center px-2.5 py-1.5 rounded-md text-[13px] transition-colors",
+              "text-sidebar-foreground/55 hover:text-sidebar-foreground hover:bg-sidebar-accent/50",
+              collapsed ? "justify-center" : ""
+            )}
+          >
+            <span className="opacity-50">API tokens</span>
+          </button>
+          <button
+            onClick={logout}
+            className={cn(
+              "w-full flex items-center px-2.5 py-1.5 rounded-md text-[13px] transition-colors",
+              "text-sidebar-foreground/55 hover:text-sidebar-foreground hover:bg-sidebar-accent/50",
+              collapsed ? "justify-center" : ""
+            )}
+          >
+            <span className="opacity-50">Sign out</span>
+          </button>
+
+          {/* Token dialog */}
+          {tokenOpen && (
+            <>
+              <div className="fixed inset-0 z-50 bg-black/50" onClick={() => { setTokenOpen(false); setNewTokenValue(null); }} />
+              <div className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover shadow-xl">
+                <div className="border-b border-border/50 px-4 py-3">
+                  <h3 className="text-sm font-semibold text-foreground">API tokens</h3>
+                </div>
+                <div className="p-4 space-y-3">
+                  {newTokenValue ? (
+                    <div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-3">
+                      <p className="text-xs font-semibold text-foreground">Token created — copy it now:</p>
+                      <pre className="mt-1.5 select-all rounded bg-background px-2 py-1.5 font-mono text-xs break-all">{newTokenValue}</pre>
+                      <p className="mt-1 text-[10px] text-muted-foreground">This won't be shown again.</p>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-1.5">
+                      <input
+                        value={newTokenName}
+                        onChange={(e) => setNewTokenName(e.target.value)}
+                        placeholder="Token name..."
+                        className="h-7 flex-1 rounded-md border border-input bg-transparent px-2 text-xs outline-none focus:border-ring"
+                        onKeyDown={(e) => { if (e.key === 'Enter') handleCreateToken(); }}
+                      />
+                      <button
+                        onClick={handleCreateToken}
+                        disabled={!newTokenName.trim()}
+                        className="h-7 rounded-md bg-primary px-2.5 text-[11px] font-semibold text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
+                      >
+                        Create
+                      </button>
+                    </div>
+                  )}
+                  {tokenError && <p className="text-xs text-destructive">{tokenError}</p>}
+                  {tokens.length > 0 ? (
+                    <div className="space-y-1">
+                      {tokens.map((t) => (
+                        <div key={t.id} className="flex items-center justify-between rounded-md border border-border/30 px-2.5 py-1.5">
+                          <div>
+                            <p className="text-xs font-medium">{t.name}</p>
+                            <p className="text-[10px] text-muted-foreground">
+                              Created {new Date(t.created_at).toLocaleDateString()}
+                              {t.last_used_at && ` · Last used ${new Date(t.last_used_at).toLocaleDateString()}`}
+                            </p>
+                          </div>
+                          <button
+                            onClick={() => handleRevoke(t.id)}
+                            className="text-[10px] text-muted-foreground hover:text-destructive"
+                          >
+                            Revoke
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-xs text-muted-foreground">No API tokens yet.</p>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </>
+      ) : (
+        <SidebarNavItem
+          href="/login"
+          icon={UserIcon}
+          label="Sign in"
+          active={pathname === "/login"}
+        />
+      )}
+      <div className={cn("flex", collapsed ? "justify-center" : "px-1")}>
         <ThemeToggle />
       </div>
     </div>
   );
 }
 
+function NotificationBell({ collapsed, setCommandOpen }: { collapsed: boolean; setCommandOpen: (v: boolean) => void }) {
+  const [unread, setUnread] = useState(0);
+  const [notifs, setNotifs] = useState<Notification[]>([]);
+  const [open, setOpen] = useState(false);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    if (!user) return;
+    const load = async () => {
+      const [countRes, notifRes] = await Promise.all([getUnreadCount(), getNotifications()]);
+      if (countRes.data) setUnread(countRes.data.count);
+      if (notifRes.data) setNotifs(notifRes.data);
+    };
+    void load();
+    // Poll every 30s
+    const interval = setInterval(() => { void load(); }, 30000);
+    return () => clearInterval(interval);
+  }, [user]);
+
+  if (!user) return null;
+
+  const handleMarkRead = async (id: string) => {
+    await markNotificationRead(id);
+    setUnread((c) => Math.max(0, c - 1));
+    setNotifs((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
+  };
+
+  const handleMarkAll = async () => {
+    await markAllNotificationsRead();
+    setUnread(0);
+    setNotifs((prev) => prev.map((n) => ({ ...n, read: true })));
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="relative flex h-7 w-7 items-center justify-center rounded text-sidebar-foreground/55 hover:text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors"
+      >
+        <BellIcon className="h-4 w-4" />
+        {unread > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-bold text-destructive-foreground">
+            {unread > 99 ? '99+' : unread}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-30" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 top-full z-40 mt-1 w-80 rounded-lg border border-border bg-popover shadow-lg">
+            <div className="flex items-center justify-between border-b border-border/50 px-3 py-2">
+              <span className="text-xs font-semibold text-foreground">Notifications</span>
+              {unread > 0 && (
+                <button onClick={handleMarkAll} className="text-[10px] text-muted-foreground hover:text-foreground">
+                  Mark all read
+                </button>
+              )}
+            </div>
+            <div className="max-h-80 overflow-auto">
+              {notifs.length === 0 ? (
+                <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+                  No notifications yet.
+                </div>
+              ) : (
+                notifs.slice(0, 20).map((n) => (
+                  <button
+                    key={n.id}
+                    onClick={() => {
+                      handleMarkRead(n.id);
+                      if (n.ticket_id) window.location.href = `/tickets/${n.ticket_id}`;
+                    }}
+                    className={cn(
+                      "w-full border-b border-border/30 px-3 py-2.5 text-left transition-colors hover:bg-accent/30",
+                      !n.read && "bg-primary/5"
+                    )}
+                  >
+                    <div className="flex items-start gap-2">
+                      <div className={cn(
+                        "mt-0.5 h-2 w-2 shrink-0 rounded-full",
+                        n.read ? "bg-border" : "bg-primary"
+                      )} />
+                      <div className="min-w-0">
+                        <p className="text-xs font-medium text-foreground">{n.title}</p>
+                        {n.body && (
+                          <p className="mt-0.5 truncate text-[11px] text-muted-foreground">{n.body}</p>
+                        )}
+                        {n.ticket_id && (
+                          <p className="mt-0.5 text-[10px] text-muted-foreground/60">
+                            {formatTicketId(n.ticket_id)}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      {!collapsed && (
+        <button
+          onClick={() => setCommandOpen(true)}
+          className="flex h-6 items-center gap-1 rounded border border-sidebar-border/50 px-1.5 text-[10px] text-sidebar-foreground/40 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground/60"
+          aria-label="Open command palette"
+        >
+          <CommandIcon className="h-3 w-3" />K
+        </button>
+      )}
+    </div>
+  );
+}
+
 export function AppShell({ children }: { children: React.ReactNode }) {
   const [commandOpen, setCommandOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -259,39 +612,36 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
   return (
     <SidebarCollapsedContext.Provider value={sidebarCollapsed}>
-      <div className="flex h-screen overflow-hidden">
+      <div className="flex h-screen overflow-hidden bg-background">
         {/* Sidebar */}
         <aside
           className={cn(
-            "flex-shrink-0 flex flex-col bg-sidebar border-r border-border transition-all duration-150",
-            sidebarCollapsed ? "w-[60px]" : "w-60"
+            "flex-shrink-0 flex flex-col bg-sidebar border-r border-sidebar-border/50 transition-all duration-200",
+            sidebarCollapsed ? "w-[56px]" : "w-[232px]"
           )}
         >
           {/* Brand */}
-          <div className="h-11 flex items-center px-3 border-b border-border">
-            <Link href="/" className="flex items-center gap-2">
-              <div className="w-5 h-5 rounded-md bg-primary flex items-center justify-center">
-                <span className="text-primary-foreground text-[11px] font-semibold">
-                  T
-                </span>
+          <div className="h-12 flex items-center justify-between gap-2 px-3 border-b border-sidebar-border/50">
+            <Link href="/" className="flex items-center gap-2.5">
+              <div className="w-6 h-6 rounded-md bg-sidebar-primary flex items-center justify-center">
+                <span className="text-sidebar-primary-foreground text-[11px] font-bold">T</span>
               </div>
               {!sidebarCollapsed && (
-                <span className="font-semibold text-foreground text-sm tracking-tight">
-                  Tessera
-                </span>
+                <span className="text-sm font-semibold text-sidebar-foreground tracking-tight">Tessera</span>
               )}
             </Link>
+            <NotificationBell collapsed={sidebarCollapsed} setCommandOpen={setCommandOpen} />
           </div>
 
           {/* Nav */}
-          <nav className="flex-1 overflow-y-auto py-2 px-2">
+          <nav className="flex-1 overflow-y-auto py-2.5 px-2">
             <Suspense
               fallback={
                 <div className="space-y-1.5 px-2">
                   {Array.from({ length: 6 }).map((_, i) => (
                     <div
                       key={i}
-                      className="h-7 bg-muted rounded-md animate-pulse"
+                    className="h-7 bg-sidebar-accent rounded-md animate-pulse"
                     />
                   ))}
                 </div>
@@ -306,7 +656,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         </aside>
 
         {/* Main */}
-        <main className="flex-1 overflow-hidden">{children}</main>
+        <main className="flex-1 overflow-hidden bg-background/88">{children}</main>
 
         {/* Command Palette */}
         <CommandPalette open={commandOpen} onOpenChange={setCommandOpen} />
@@ -315,7 +665,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       {/* Collapse toggle */}
       <button
         onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-        className="fixed bottom-4 left-0 z-40 w-6 h-6 flex items-center justify-center rounded-r-md bg-sidebar border border-border border-l-0 text-muted-foreground hover:text-foreground transition-all duration-150"
+        className="fixed bottom-4 left-0 z-40 w-6 h-6 flex items-center justify-center rounded-r-md bg-sidebar border border-sidebar-border border-l-0 text-sidebar-foreground/55 hover:text-sidebar-foreground transition-all duration-150"
         style={{ left: sidebarCollapsed ? 60 : 240 }}
         aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
       >

web/src/components/command-palette.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import type { ComponentType, KeyboardEvent } from "react";
 import { useRouter } from "next/navigation";
 import {
   SearchIcon,
@@ -15,7 +16,7 @@ import type { Ticket } from "@/lib/types";
 interface CommandItem {
   id: string;
   label: string;
-  icon: React.ComponentType<{ className?: string }>;
+  icon: ComponentType<{ className?: string }>;
   action: () => void;
   category?: string;
 }
@@ -41,79 +42,87 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
     }
   }, [open]);
 
-  const alwaysCommands: CommandItem[] = [
-    {
-      id: "new-ticket",
-      label: "New ticket",
-      icon: PlusIcon,
-      action: () => {
-        onOpenChange(false);
-        router.push("/?new=true");
+  const filtered = useMemo(() => {
+    const normalizedQuery = query.toLowerCase();
+    const alwaysCommands: CommandItem[] = [
+      {
+        id: "new-ticket",
+        label: "New ticket",
+        icon: PlusIcon,
+        action: () => {
+          onOpenChange(false);
+          router.push("/?new=true");
+        },
+        category: "Actions",
       },
-      category: "Actions",
-    },
-    {
-      id: "admin",
-      label: "Go to admin",
-      icon: SettingsIcon,
-      action: () => {
-        onOpenChange(false);
-        router.push("/admin");
+      {
+        id: "admin",
+        label: "Go to admin",
+        icon: SettingsIcon,
+        action: () => {
+          onOpenChange(false);
+          router.push("/admin");
+        },
+        category: "Navigate",
       },
-      category: "Navigate",
-    },
-    {
-      id: "all-tickets",
-      label: "All tickets",
-      icon: LayoutGridIcon,
-      action: () => {
-        onOpenChange(false);
-        router.push("/");
+      {
+        id: "all-tickets",
+        label: "All tickets",
+        icon: LayoutGridIcon,
+        action: () => {
+          onOpenChange(false);
+          router.push("/");
+        },
+        category: "Navigate",
       },
-      category: "Navigate",
-    },
-  ];
+    ];
 
-  const ticketCommands: CommandItem[] = tickets
-    .filter((t) => t.subject.toLowerCase().includes(query.toLowerCase()))
-    .map((t) => ({
-      id: `ticket-${t.id}`,
-      label: t.subject,
-      icon: MessageSquareIcon,
-      action: () => {
-        onOpenChange(false);
-        router.push(`/tickets/${t.id}`);
-      },
-      category: "Tickets",
-    }));
+    const alwaysFiltered = alwaysCommands.filter((cmd) =>
+      cmd.label.toLowerCase().includes(normalizedQuery)
+    );
+    const ticketCommands: CommandItem[] = tickets
+      .filter((t) => t.subject.toLowerCase().includes(normalizedQuery))
+      .map((t) => ({
+        id: `ticket-${t.id}`,
+        label: t.subject,
+        icon: MessageSquareIcon,
+        action: () => {
+          onOpenChange(false);
+          router.push(`/tickets/${t.id}`);
+        },
+        category: "Tickets",
+      }));
 
-  const alwaysFiltered = alwaysCommands.filter((cmd) =>
-    cmd.label.toLowerCase().includes(query.toLowerCase())
+    return [...alwaysFiltered, ...ticketCommands];
+  }, [onOpenChange, query, router, tickets]);
+
+  const grouped = useMemo(
+    () =>
+      filtered.reduce<Record<string, CommandItem[]>>((acc, cmd) => {
+        const cat = cmd.category || "Other";
+        if (!acc[cat]) acc[cat] = [];
+        acc[cat].push(cmd);
+        return acc;
+      }, {}),
+    [filtered]
   );
 
-  const filtered = [...alwaysFiltered, ...ticketCommands];
-
-  const grouped = filtered.reduce<Record<string, CommandItem[]>>((acc, cmd) => {
-    const cat = cmd.category || "Other";
-    if (!acc[cat]) acc[cat] = [];
-    acc[cat].push(cmd);
-    return acc;
-  }, {});
-
   useEffect(() => {
     if (open) {
-      setQuery("");
-      setSelectedIndex(0);
+      queueMicrotask(() => {
+        setQuery("");
+        setSelectedIndex(0);
+      });
       setTimeout(() => inputRef.current?.focus(), 50);
     }
   }, [open]);
 
   useEffect(() => {
-    setSelectedIndex(0);
+    queueMicrotask(() => setSelectedIndex(0));
   }, [query]);
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
+    (e: KeyboardEvent) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
         setSelectedIndex((i) => Math.min(i + 1, filtered.length - 1));

web/src/components/layout-builder.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { GripVerticalIcon, XIcon, ArrowDownIcon } from "lucide-react";
+
+export interface LayoutField {
+  key: string;
+  label: string;
+  width: number;
+}
+
+export interface SubtitleEntry {
+  key: string;
+  under: string; // which row1 column this subtitle field sits under
+}
+
+interface LayoutBuilderProps {
+  fields: LayoutField[];
+  row1: LayoutField[];
+  row2: SubtitleEntry[];
+  onChange: (row1: LayoutField[], row2: SubtitleEntry[]) => void;
+  onClose: () => void;
+}
+
+export function LayoutBuilder({ fields: allFields, row1, row2, onChange, onClose }: LayoutBuilderProps) {
+  const [dragKey, setDragKey] = useState<string | null>(null);
+
+  const handleDragStart = useCallback((e: React.DragEvent, key: string) => {
+    setDragKey(key);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", key);
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    setDragKey(null);
+  }, []);
+
+  const makeRow1Drop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const key = e.dataTransfer.getData("text/plain");
+    if (!key) return;
+    // Remove from row2 if present
+    const newRow2 = row2.filter((e) => e.key !== key);
+    const field = allFields.find((f) => f.key === key);
+    if (!field) return;
+    // Insert into row1 via drop position
+    const container = e.currentTarget;
+    const children = Array.from(container.children).filter((c) => (c as HTMLElement).dataset?.chipkey);
+    const mouseX = e.clientX;
+    let idx = children.length;
+    for (let i = 0; i < children.length; i++) {
+      const rect = (children[i] as HTMLElement).getBoundingClientRect();
+      if (mouseX < rect.left + rect.width / 2) { idx = i; break; }
+    }
+    const newRow1 = [...row1.filter((f) => f.key !== key)];
+    newRow1.splice(idx, 0, field);
+    onChange(newRow1, newRow2);
+  }, [allFields, row1, row2, onChange]);
+
+  const makeSubtitleDrop = useCallback((underCol: string) => {
+    return (e: React.DragEvent) => {
+      e.preventDefault();
+      const key = e.dataTransfer.getData("text/plain");
+      if (!key || key === "subject") return;
+      // Remove from row1 if present
+      const newRow1 = row1.filter((f) => f.key !== key);
+      // Remove from row2 if present
+      const newRow2 = row2.filter((e) => e.key !== key);
+      // Add to row2 under this column
+      newRow2.push({ key, under: underCol });
+      onChange(newRow1, newRow2);
+    };
+  }, [row1, row2, onChange]);
+
+  const makePaletteDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const key = e.dataTransfer.getData("text/plain");
+    if (!key) return;
+    onChange(
+      row1.filter((f) => f.key !== key),
+      row2.filter((e) => e.key !== key),
+    );
+  }, [row1, row2, onChange]);
+
+  const renderChip = (label: string, key: string) => (
+    <div
+      key={key}
+      data-chipkey={key}
+      draggable
+      onDragStart={(e) => handleDragStart(e, key)}
+      onDragEnd={handleDragEnd}
+      className="flex cursor-grab items-center gap-1 rounded border border-border/50 bg-card px-2 py-1 text-xs text-foreground shadow-sm transition-colors hover:border-primary/30 active:cursor-grabbing"
+    >
+      <GripVerticalIcon className="h-3 w-3 text-muted-foreground/50" />
+      {label}
+    </div>
+  );
+
+  // Fields not in row1 or row2
+  const usedKeys = new Set([...row1.map((f) => f.key), ...row2.map((e) => e.key)]);
+  const palette = allFields.filter((f) => !usedKeys.has(f.key) && f.key !== "subject");
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[9998]" onClick={onClose} />
+      <div className="fixed left-1/2 top-1/2 z-[9999] w-[560px] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover shadow-xl">
+        <div className="flex items-center justify-between border-b border-border/50 px-4 py-2.5">
+          <h3 className="text-sm font-semibold text-foreground">Layout builder</h3>
+          <button onClick={onClose} className="rounded text-muted-foreground hover:text-foreground">
+            <XIcon className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="space-y-3 p-4">
+          {/* Row 1 */}
+          <div>
+            <div className="mb-1.5 text-[10px] font-semibold uppercase text-muted-foreground/60">Main row</div>
+            <div
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={makeRow1Drop}
+              className="flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-dashed border-border/50 p-2 transition-colors"
+            >
+              {row1.length === 0 ? (
+                <span className="text-xs text-muted-foreground/50">Drop fields here</span>
+              ) : (
+                row1.map((f) => renderChip(f.label, f.key))
+              )}
+            </div>
+          </div>
+
+          {/* Row 2 — subtitle fields under specific columns */}
+          <div>
+            <div className="mb-1.5 text-[10px] font-semibold uppercase text-muted-foreground/60">Subtitle (drop under a column)</div>
+            <div className="space-y-2">
+              {row1.map((col) => {
+                const entries = row2.filter((e) => e.under === col.key);
+                return (
+                  <div key={col.key} className="flex items-start gap-2">
+                    <div className="mt-1.5 w-20 shrink-0 text-right text-[10px] font-medium text-muted-foreground truncate">
+                      {col.label}
+                      <ArrowDownIcon className="inline-block ml-0.5 h-2.5 w-2.5" />
+                    </div>
+                    <div
+                      onDragOver={(e) => e.preventDefault()}
+                      onDrop={makeSubtitleDrop(col.key)}
+                      className="flex min-h-7 flex-1 flex-wrap items-center gap-1 rounded border border-dashed border-border/50 px-2 py-1 transition-colors"
+                    >
+                      {entries.length === 0 ? (
+                        <span className="text-[10px] text-muted-foreground/40">drop here</span>
+                      ) : (
+                        entries.map((e) => {
+                          const field = allFields.find((f) => f.key === e.key);
+                          return renderChip(field?.label ?? e.key, e.key);
+                        })
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+              {/* Orphans: subtitle fields under columns not in row1 */}
+              {(() => {
+                const orphanEntries = row2.filter((e) => !row1.some((c) => c.key === e.under));
+                if (orphanEntries.length === 0) return null;
+                return (
+                  <div className="flex items-start gap-2">
+                    <div className="mt-1.5 w-20 shrink-0 text-right text-[10px] font-medium text-muted-foreground truncate">
+                      subject
+                      <ArrowDownIcon className="inline-block ml-0.5 h-2.5 w-2.5" />
+                    </div>
+                    <div className="flex min-h-7 flex-1 flex-wrap items-center gap-1 rounded border border-dashed border-border/50 px-2 py-1">
+                      {orphanEntries.map((e) => {
+                        const field = allFields.find((f) => f.key === e.key);
+                        return renderChip(field?.label ?? e.key, e.key);
+                      })}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          </div>
+
+          {/* Palette */}
+          <div>
+            <div className="mb-1.5 text-[10px] font-semibold uppercase text-muted-foreground/60">Available</div>
+            <div
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={makePaletteDrop}
+              className="flex min-h-9 flex-wrap gap-1.5 rounded-md border border-dashed border-border/30 p-2 transition-colors"
+            >
+              {palette.length === 0 ? (
+                <span className="text-xs text-muted-foreground/50">All fields are placed</span>
+              ) : (
+                palette.map((f) => renderChip(f.label, f.key))
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end border-t border-border/50 px-4 py-2.5">
+          <button
+            onClick={onClose}
+            className="h-7 rounded-md bg-primary px-3 text-[11px] font-semibold text-primary-foreground hover:bg-primary/90"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

web/src/components/scrip-wizard.tsx

@@ -0,0 +1,398 @@
+"use client";
+
+import { useState } from "react";
+import { XIcon, ArrowLeftIcon, ArrowRightIcon, CheckIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import type { Queue, CustomField, Template } from "@/lib/types";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  error?: string | null;
+  onCreate: (data: {
+    name: string; condition_type: string; condition_config: Record<string, unknown>;
+    action_type: string; action_config: Record<string, unknown>;
+    template_id: string | null; queue_id: string | null;
+    stage: string; sort_order: number;
+  }) => Promise<void>;
+  queues: Queue[];
+  customFields: CustomField[];
+  templates: Template[];
+}
+
+const CONDITIONS = [
+  { type: "OnCreate", icon: "➕", label: "Ticket created", desc: "When a new ticket is created" },
+  { type: "OnStatusChange", icon: "🔄", label: "Status changes", desc: "When ticket status changes" },
+  { type: "OnResolve", icon: "✅", label: "Ticket resolved", desc: "When a ticket is resolved" },
+  { type: "OnCustomFieldChange", icon: "📝", label: "Custom field changes", desc: "When a field value changes" },
+  { type: "OnLinkCreate", icon: "🔗", label: "Ticket linked", desc: "When linked to another ticket" },
+  { type: "OnOverdue", icon: "⏰", label: "Ticket overdue", desc: "When a date field passes due" },
+];
+
+const ACTIONS = [
+  { type: "SendEmail", icon: "📧", label: "Send email", desc: "Send a templated email notification" },
+  { type: "SetCustomField", icon: "🏷️", label: "Set custom field", desc: "Update a field on the ticket" },
+  { type: "Webhook", icon: "🌐", label: "Call webhook", desc: "POST to an external URL" },
+  { type: "FetchMetadata", icon: "📡", label: "Fetch metadata", desc: "Pull data from an API" },
+  { type: "RunScript", icon: "⚡", label: "Run script", desc: "Execute custom JavaScript" },
+];
+
+export function ScripWizard({ open, onClose, onCreate, queues, customFields, templates, error: externalError }: Props) {
+  const [step, setStep] = useState(1);
+  const [saving, setSaving] = useState(false);
+
+  // Trigger
+  const [conditionType, setConditionType] = useState("OnCreate");
+  const [fromStatus, setFromStatus] = useState("");
+  const [toStatus, setToStatus] = useState("");
+  const [conditionFieldKey, setConditionFieldKey] = useState("");
+
+  // Action
+  const [actionType, setActionType] = useState("SendEmail");
+  const [emailTo, setEmailTo] = useState("requestor");
+  const [emailRecipients, setEmailRecipients] = useState("");
+  const [emailSubject, setEmailSubject] = useState("");
+  const [emailBody, setEmailBody] = useState("");
+  const [templateId, setTemplateId] = useState("");
+  const [fieldKey, setFieldKey] = useState("");
+  const [fieldValue, setFieldValue] = useState("");
+  const [webhookUrl, setWebhookUrl] = useState("");
+
+  // Scope
+  const [name, setName] = useState("");
+  const [queueId, setQueueId] = useState("");
+  const [stage, setStage] = useState("TransactionCreate");
+
+  const handleCreate = async () => {
+    setSaving(true);
+
+    let conditionConfig: Record<string, unknown> = {};
+    if (conditionType === "OnStatusChange" || conditionType === "OnResolve") {
+      if (fromStatus) conditionConfig.from_status = fromStatus;
+      if (toStatus) conditionConfig.to_status = toStatus;
+    } else if (conditionType === "OnOverdue") {
+      if (conditionFieldKey) conditionConfig.field_key = conditionFieldKey;
+    }
+
+    let actionConfig: Record<string, unknown> = {};
+    if (actionType === "SendEmail") {
+      const sources = emailTo === "requestor" ? ["requestor"] : emailTo === "owner" ? ["owner"] : [];
+      actionConfig = {
+        recipients: emailRecipients ? emailRecipients.split(",").map((s) => s.trim()).filter(Boolean) : [],
+        recipient_sources: sources,
+        subject: emailSubject || "",
+        body: emailBody || "",
+      };
+    } else if (actionType === "SetCustomField") {
+      actionConfig = { field_key: fieldKey || "", value: fieldValue || "" };
+    } else if (actionType === "Webhook") {
+      actionConfig = { url: webhookUrl || "", method: "POST" };
+    }
+
+    await onCreate({
+      name: name || `Scrip: ${conditionType} → ${actionType}`,
+      condition_type: conditionType,
+      condition_config: conditionConfig,
+      action_type: actionType,
+      action_config: actionConfig,
+      template_id: templateId || null,
+      queue_id: queueId || null,
+      stage,
+      sort_order: 0,
+    });
+    setSaving(false);
+    reset();
+  };
+
+  const reset = () => {
+    setStep(1); setConditionType("OnCreate"); setFromStatus(""); setToStatus(""); setConditionFieldKey("");
+    setActionType("SendEmail"); setEmailTo("requestor"); setEmailRecipients(""); setEmailSubject("");
+    setEmailBody(""); setTemplateId(""); setFieldKey(""); setFieldValue(""); setWebhookUrl("");
+    setName(""); setQueueId(""); setStage("TransactionCreate");
+  };
+
+  if (!open) return null;
+
+  const stepLabels = ["Trigger", "Action", "Configure", "Review"];
+  const selectedQueue = queueId ? queues.find((q) => q.id === queueId) : null;
+  const dateFields = customFields.filter((cf) => {
+    const ft = cf.field_type.toLowerCase();
+    return ft === "date" || ft === "datetime";
+  });
+  const emailTemplates = templates.filter((t) => !t.queue_id || t.queue_id === queueId);
+
+  return (
+    <>
+      <div className="fixed inset-0 z-50 bg-black/50" onClick={() => { onClose(); reset(); }} />
+      <div className="fixed left-1/2 top-1/2 z-50 w-[600px] max-h-[80vh] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-lg border border-border bg-popover shadow-xl">
+        {/* Header with steps */}
+        <div className="border-b border-border/50 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-base font-semibold text-foreground">New automation</h2>
+            <button onClick={() => { onClose(); reset(); }} className="text-muted-foreground hover:text-foreground">
+              <XIcon className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="mt-3 flex items-center gap-2">
+            {stepLabels.map((label, i) => (
+              <div key={label} className="flex items-center gap-2">
+                <div className={cn(
+                  "flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-bold",
+                  step > i + 1 ? "bg-primary text-primary-foreground" :
+                  step === i + 1 ? "bg-primary text-primary-foreground ring-2 ring-primary/30" :
+                  "bg-muted text-muted-foreground"
+                )}>
+                  {step > i + 1 ? <CheckIcon className="h-3 w-3" /> : i + 1}
+                </div>
+                <span className={cn("text-[11px] font-medium", step === i + 1 ? "text-foreground" : "text-muted-foreground")}>{label}</span>
+                {i < 3 && <div className="h-px w-6 bg-border" />}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="p-6">
+          {/* Step 1: Trigger */}
+          {step === 1 && (
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">When should this automation run?</p>
+              <div className="grid grid-cols-2 gap-2">
+                {CONDITIONS.map((c) => (
+                  <button
+                    key={c.type}
+                    type="button"
+                    onClick={() => { setConditionType(c.type); setFromStatus(""); setToStatus(""); setConditionFieldKey(""); }}
+                    className={cn(
+                      "rounded-lg border p-3 text-left transition-colors",
+                      conditionType === c.type ? "border-primary/50 bg-primary/5 ring-1 ring-primary/30" : "border-border/50 hover:border-primary/30 hover:bg-accent/30"
+                    )}
+                  >
+                    <span className="text-lg">{c.icon}</span>
+                    <div className="mt-1 text-sm font-semibold">{c.label}</div>
+                    <div className="text-[11px] text-muted-foreground">{c.desc}</div>
+                  </button>
+                ))}
+              </div>
+
+              {(conditionType === "OnStatusChange" || conditionType === "OnResolve") && (
+                <div className="flex gap-2 pt-2">
+                  <div className="flex-1">
+                    <Label className="text-[10px]">From status</Label>
+                    <Select value={fromStatus || "_any"} onValueChange={(v) => setFromStatus((v === "_any" || !v) ? "" : v)}>
+                      <SelectTrigger className="h-8"><SelectValue placeholder="Any status" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="_any">Any status</SelectItem>
+                        {["new","open","in_progress","resolved","closed"].map((s) => <SelectItem key={s} value={s}>{s}</SelectItem>)}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex-1">
+                    <Label className="text-[10px]">To status</Label>
+                    <Select value={toStatus || "_any"} onValueChange={(v) => setToStatus((v === "_any" || !v) ? "" : v)}>
+                      <SelectTrigger className="h-8"><SelectValue placeholder={conditionType === "OnResolve" ? "Any resolved" : "Any status"} /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="_any">{conditionType === "OnResolve" ? "Any resolved" : "Any status"}</SelectItem>
+                        {["new","open","in_progress","resolved","closed"].map((s) => <SelectItem key={s} value={s}>{s}</SelectItem>)}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              )}
+
+              {conditionType === "OnOverdue" && dateFields.length > 0 && (
+                <div>
+                  <Label className="text-[10px]">Date field to check</Label>
+                  <Select value={conditionFieldKey} onValueChange={(v) => setConditionFieldKey(v || "")}>
+                    <SelectTrigger className="h-8"><SelectValue placeholder="Pick a date field..." /></SelectTrigger>
+                    <SelectContent>
+                      {dateFields.map((cf) => <SelectItem key={cf.id} value={cf.key}>{cf.name}</SelectItem>)}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 2: Action */}
+          {step === 2 && (
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">What should happen when triggered?</p>
+              <div className="grid grid-cols-2 gap-2">
+                {ACTIONS.map((a) => (
+                  <button
+                    key={a.type}
+                    type="button"
+                    onClick={() => setActionType(a.type)}
+                    className={cn(
+                      "rounded-lg border p-3 text-left transition-colors",
+                      actionType === a.type ? "border-primary/50 bg-primary/5 ring-1 ring-primary/30" : "border-border/50 hover:border-primary/30 hover:bg-accent/30"
+                    )}
+                  >
+                    <span className="text-lg">{a.icon}</span>
+                    <div className="mt-1 text-sm font-semibold">{a.label}</div>
+                    <div className="text-[11px] text-muted-foreground">{a.desc}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Step 3: Configure */}
+          {step === 3 && (
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">Configure the details.</p>
+
+              {actionType === "SendEmail" && (
+                <div className="space-y-3">
+                  <div>
+                    <Label>Recipients</Label>
+                    <Select value={emailTo} onValueChange={(v) => setEmailTo(v ?? "requestor")}>
+                      <SelectTrigger className="h-8"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="requestor">Ticket requestor (creator)</SelectItem>
+                        <SelectItem value="owner">Ticket owner</SelectItem>
+                        <SelectItem value="manual">Custom recipients</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {emailTo === "manual" && (
+                    <div>
+                      <Label>Email addresses (comma-separated)</Label>
+                      <Input placeholder="user@example.com, other@example.com" value={emailRecipients} onChange={(e) => setEmailRecipients(e.target.value)} />
+                    </div>
+                  )}
+                  <div>
+                    <Label>Subject</Label>
+                    <Input placeholder="Ticket #{{ticket.id}}: {{ticket.subject}}" value={emailSubject} onChange={(e) => setEmailSubject(e.target.value)} />
+                  </div>
+                  <div>
+                    <Label>Body</Label>
+                    <Textarea rows={3} placeholder="The ticket has been updated..." value={emailBody} onChange={(e) => setEmailBody(e.target.value)} />
+                    <p className="mt-1 text-[10px] text-muted-foreground">Variables: {"{{ticket.id}} {{ticket.subject}} {{ticket.status}} {{queue.name}} {{transaction.old_value}} {{transaction.new_value}}"}</p>
+                  </div>
+                  <div>
+                    <Label>Template (optional)</Label>
+                    <Select value={templateId} onValueChange={(v) => setTemplateId(v || "")}>
+                      <SelectTrigger className="h-8"><SelectValue placeholder="No template — use subject/body above" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="">No template</SelectItem>
+                        {emailTemplates.map((t) => <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>)}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              )}
+
+              {actionType === "SetCustomField" && (() => {
+                const selectedField = customFields.find((cf) => cf.key === fieldKey);
+                const fieldOptions: string[] = Array.isArray(selectedField?.values) ? selectedField.values.map((v: any) => String(v)) : [];
+                return (
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <Label>Field</Label>
+                    <Select value={fieldKey} onValueChange={(v) => { setFieldKey((v && v !== "_any") ? v : ""); setFieldValue(""); }}>
+                      <SelectTrigger className="h-8"><SelectValue placeholder="Pick a field" /></SelectTrigger>
+                      <SelectContent>
+                        {customFields.map((cf) => <SelectItem key={cf.id} value={cf.key}>{cf.name}</SelectItem>)}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex-1">
+                    <Label>Value</Label>
+                    {fieldOptions.length > 0 ? (
+                      <Select value={fieldValue} onValueChange={(v) => setFieldValue(v || "")}>
+                        <SelectTrigger className="h-8"><SelectValue placeholder="Pick a value" /></SelectTrigger>
+                        <SelectContent>
+                          {fieldOptions.map((opt) => <SelectItem key={opt} value={opt}>{opt}</SelectItem>)}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input placeholder="Value to set" value={fieldValue} onChange={(e) => setFieldValue(e.target.value)} />
+                    )}
+                  </div>
+                </div>
+                );
+              })()}
+
+              {actionType === "Webhook" && (
+                <div>
+                  <Label>URL</Label>
+                  <Input placeholder="https://hooks.slack.com/..." value={webhookUrl} onChange={(e) => setWebhookUrl(e.target.value)} />
+                </div>
+              )}
+
+              <div className="border-t border-border/30 pt-3 space-y-3">
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <Label>Name (optional)</Label>
+                    <Input placeholder="My automation" value={name} onChange={(e) => setName(e.target.value)} />
+                  </div>
+                  <div className="flex-1">
+                    <Label>Queue scope</Label>
+                    <Select value={queueId} onValueChange={(v) => setQueueId(v || "")}>
+                      <SelectTrigger className="h-8"><SelectValue placeholder="All queues" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="">All queues (global)</SelectItem>
+                        {queues.map((q) => <SelectItem key={q.id} value={q.id}>{q.name}</SelectItem>)}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Step 4: Review */}
+          {step === 4 && (
+            <div className="space-y-4">
+              <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 text-sm space-y-2">
+                <div className="text-[10px] font-semibold uppercase text-muted-foreground/60">Summary</div>
+                <p><strong>When:</strong> {CONDITIONS.find((c) => c.type === conditionType)?.label}</p>
+                <p><strong>Then:</strong> {ACTIONS.find((a) => a.type === actionType)?.label}</p>
+                {queueId && <p><strong>Queue:</strong> {selectedQueue?.name}</p>}
+                <p><strong>Stage:</strong> {stage === "TransactionCreate" ? "Per transaction" : "After batch"}</p>
+              </div>
+              <div>
+                <Label>Name</Label>
+                <Input placeholder="My automation" value={name} onChange={(e) => setName(e.target.value)} />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Error */}
+        {externalError && (
+          <div className="border-t border-destructive/20 bg-destructive/10 px-6 py-2 text-sm text-destructive">{externalError}</div>
+        )}
+
+        {/* Footer */}
+        <div className="flex justify-between border-t border-border/50 px-6 py-3">
+          <div>
+            {step > 1 && (
+              <Button variant="outline" size="sm" onClick={() => setStep(step - 1)}>
+                <ArrowLeftIcon className="h-3.5 w-3.5 mr-1" /> Back
+              </Button>
+            )}
+          </div>
+          <div>
+            {step < 4 ? (
+              <Button size="sm" onClick={() => setStep(step + 1)}>
+                Next <ArrowRightIcon className="h-3.5 w-3.5 ml-1" />
+              </Button>
+            ) : (
+              <Button size="sm" className="bg-primary" disabled={saving} onClick={handleCreate}>
+                <CheckIcon className="h-3.5 w-3.5 mr-1" />
+                {saving ? "Creating..." : "Create automation"}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

web/src/components/searchable-select.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SearchableSelectProps {
+  options: SelectOption[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  className?: string;
+  allowClear?: boolean;
+  clearLabel?: string;
+}
+
+export function SearchableSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  disabled = false,
+  className,
+  allowClear = true,
+  clearLabel = "None",
+}: SearchableSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [highlightIdx, setHighlightIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selected = options.find((o) => o.value === value);
+
+  const filtered = search.trim()
+    ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+    : options;
+
+  // Reset highlight when search changes
+  useEffect(() => {
+    setHighlightIdx(0);
+  }, [search]);
+
+  // Focus search input when opened
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      setSearch("");
+    }
+  }, [open]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const select = useCallback((optValue: string) => {
+    onChange(optValue);
+    setOpen(false);
+  }, [onChange]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightIdx((prev) => Math.min(prev + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightIdx((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filtered[highlightIdx]) {
+        select(filtered[highlightIdx].value);
+      }
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div ref={containerRef} className={cn("relative", className)}>
+      <button
+        type="button"
+        onClick={() => !disabled && setOpen(!open)}
+        disabled={disabled}
+        className={cn(
+          "flex h-8 w-full items-center justify-between gap-1 rounded-md border border-input bg-transparent px-2.5 text-sm outline-none transition-colors",
+          disabled ? "opacity-50 cursor-not-allowed" : "hover:border-ring/50 focus:border-ring",
+          !selected && "text-muted-foreground"
+        )}
+      >
+        <span className="truncate">{selected?.label ?? placeholder}</span>
+        <ChevronDownIcon className={cn("h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform", open && "rotate-180")} />
+      </button>
+
+      {open && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-md border border-border bg-popover shadow-lg">
+          <div className="flex items-center gap-1.5 border-b border-border/50 px-2">
+            <SearchIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <input
+              ref={inputRef}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={searchPlaceholder}
+              className="h-8 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+            />
+            {search && (
+              <button onClick={() => setSearch("")} className="shrink-0 text-muted-foreground hover:text-foreground">
+                <XIcon className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+          <div className="max-h-48 overflow-auto">
+            {allowClear && (
+              <button
+                type="button"
+                onClick={() => select("")}
+                className="flex w-full items-center gap-2 border-b border-border/30 px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent"
+              >
+                {clearLabel}
+              </button>
+            )}
+            {filtered.length === 0 ? (
+              <div className="px-2.5 py-3 text-center text-xs text-muted-foreground">
+                No results
+              </div>
+            ) : (
+              filtered.map((opt, idx) => (
+                <button
+                  key={opt.value || "__empty__"}
+                  type="button"
+                  onClick={() => select(opt.value)}
+                  className={cn(
+                    "flex w-full items-center px-2.5 py-1.5 text-xs transition-colors",
+                    idx === highlightIdx ? "bg-accent text-foreground" : "text-foreground hover:bg-accent/50",
+                    opt.value === value && "font-semibold"
+                  )}
+                >
+                  {opt.label}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

web/src/components/theme-toggle.tsx

@@ -8,7 +8,9 @@ export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
-  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    queueMicrotask(() => setMounted(true));
+  }, []);
 
   if (!mounted) {
     return <div className="w-8 h-8" />;

web/src/components/widgets/count-widget.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Link from "next/link";
+import type { WidgetData } from "@/lib/types";
+
+export function CountWidget({ data }: { data: WidgetData }) {
+  const params = new URLSearchParams();
+  if (data.view_id) params.set("view_id", data.view_id);
+
+  return (
+    <Link
+      href={`/?${params.toString()}`}
+      className="flex h-full flex-col items-center justify-center rounded-lg border border-border bg-card p-4 transition-colors hover:border-ring/50 hover:bg-accent/30"
+    >
+      <span className="text-3xl font-bold tabular-nums text-foreground">
+        {data.total}
+      </span>
+      <span className="mt-1 text-sm text-muted-foreground">{data.title}</span>
+    </Link>
+  );
+}

web/src/components/widgets/grouped-counts-widget.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { WidgetData } from "@/lib/types";
+
+export function GroupedCountsWidget({ data }: { data: WidgetData }) {
+  const groups = data.groups ?? {};
+  const entries = Object.entries(groups).sort(([, a], [, b]) => b - a);
+  const max = entries.length > 0 ? Math.max(...entries.map(([, c]) => c)) : 1;
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center rounded-lg border border-border bg-card p-4">
+        <p className="text-xs text-muted-foreground">No data</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card">
+      <div className="border-b border-border px-3 py-2">
+        <span className="text-xs font-semibold text-foreground">{data.title}</span>
+      </div>
+      <div className="flex-1 space-y-1.5 overflow-auto p-3">
+        {entries.map(([label, count]) => (
+          <div key={label} className="flex items-center gap-2 text-xs">
+            <span className="w-20 shrink-0 truncate text-foreground">{label}</span>
+            <div className="flex-1">
+              <div
+                className="h-2.5 rounded-sm bg-primary/60 transition-all"
+                style={{ width: `${Math.round((count / max) * 100)}%` }}
+              />
+            </div>
+            <span className="w-8 shrink-0 text-right tabular-nums text-muted-foreground">{count}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/components/widgets/status-chart-widget.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { WidgetData } from "@/lib/types";
+
+const STATUS_COLORS: Record<string, string> = {
+  new: "#64748b",
+  open: "#2563eb",
+  in_progress: "#d97706",
+  resolved: "#16a34a",
+  closed: "#71717a",
+};
+
+function statusLabel(status: string) {
+  return status.replaceAll("_", " ");
+}
+
+export function StatusChartWidget({ data }: { data: WidgetData }) {
+  const counts = data.counts ?? {};
+  const entries = Object.entries(counts).sort(([, a], [, b]) => b - a);
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center rounded-lg border border-border bg-card p-4">
+        <p className="text-xs text-muted-foreground">No data</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card">
+      <div className="border-b border-border px-3 py-2">
+        <span className="text-xs font-semibold text-foreground">{data.title}</span>
+      </div>
+      <div className="flex flex-1 items-center gap-4 p-4">
+        {/* Donut */}
+        <svg viewBox="0 0 40 40" className="h-16 w-16 shrink-0">
+          {entries.map(([, count], index) => {
+            const total = entries.reduce((sum, [, c]) => sum + c, 0);
+            const offset = entries
+              .slice(0, index)
+              .reduce((sum, [, c]) => sum + (c / total) * 100, 0);
+            const pct = (count / total) * 100;
+            const circumference = 2 * Math.PI * 15;
+            const dash = (pct / 100) * circumference;
+            const color = STATUS_COLORS[entries[index][0]] ?? "#71717a";
+            return (
+              <circle
+                key={entries[index][0]}
+                cx="20" cy="20" r="15"
+                fill="none"
+                stroke={color}
+                strokeWidth="6"
+                strokeDasharray={`${dash} ${circumference - dash}`}
+                strokeDashoffset={-(offset / 100) * circumference}
+                transform="rotate(-90 20 20)"
+              />
+            );
+          })}
+        </svg>
+        {/* Legend */}
+        <div className="min-w-0 flex-1 space-y-1.5">
+          {entries.map(([status, count]) => (
+            <div key={status} className="flex items-center gap-2 text-xs">
+              <span
+                className="h-2 w-2 shrink-0 rounded-full"
+                style={{ backgroundColor: STATUS_COLORS[status] ?? "#71717a" }}
+              />
+              <span className="flex-1 capitalize text-foreground">{statusLabel(status)}</span>
+              <span className="tabular-nums text-muted-foreground">{count}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/widgets/ticket-list-widget.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import Link from "next/link";
+import { formatDistanceToNow } from "date-fns";
+import { CircleIcon } from "lucide-react";
+import type { WidgetData } from "@/lib/types";
+import { cn, formatTicketId } from "@/lib/utils";
+
+const STATUS_COLORS: Record<string, string> = {
+  new: "#64748b",
+  open: "#2563eb",
+  in_progress: "#d97706",
+  resolved: "#16a34a",
+  closed: "#71717a",
+};
+
+function statusLabel(status: string) {
+  return status.replaceAll("_", " ");
+}
+
+export function TicketListWidget({ data }: { data: WidgetData }) {
+  const tickets = data.tickets ?? [];
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card">
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <span className="text-xs font-semibold text-foreground">{data.title}</span>
+        <span className="text-[11px] tabular-nums text-muted-foreground">{data.total}</span>
+      </div>
+      <div className="flex-1 overflow-auto">
+        {tickets.length === 0 ? (
+          <p className="px-3 py-4 text-center text-xs text-muted-foreground">No tickets</p>
+        ) : (
+          tickets.map((ticket) => (
+            <Link
+              key={ticket.id}
+              href={`/tickets/${ticket.id}`}
+              className="flex items-center gap-2 border-b border-border/50 px-3 py-2 text-xs transition-colors hover:bg-accent/40 last:border-b-0"
+            >
+              <CircleIcon
+                className="h-2 w-2 shrink-0"
+                style={{ color: STATUS_COLORS[ticket.status] ?? "#71717a", fill: STATUS_COLORS[ticket.status] ?? "#71717a" }}
+              />
+              <span className="min-w-0 flex-1 truncate font-medium text-foreground">
+                {ticket.subject}
+              </span>
+              <span className="shrink-0 text-[11px] text-muted-foreground">
+                {ticket.owner_name ?? "unassigned"}
+              </span>
+              <span className="shrink-0 text-[11px] text-muted-foreground/60">
+                {formatDistanceToNow(new Date(ticket.updated_at), { addSuffix: true })}
+              </span>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/widgets/trend-chart-widget.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { WidgetData } from "@/lib/types";
+
+export function TrendChartWidget({ data }: { data: WidgetData }) {
+  const points = data.counts ?? {};
+  const entries = Object.entries(points).sort(([a], [b]) => a.localeCompare(b));
+  const maxVal = Math.max(1, ...Object.values(points));
+
+  return (
+    <div className="flex h-full flex-col rounded-lg border border-border/50 bg-card p-3">
+      <div className="mb-1 text-[10px] font-semibold uppercase text-muted-foreground/60">
+        {data.title}
+      </div>
+      <div className="text-lg font-bold text-foreground tabular-nums">{data.total}</div>
+      <div className="mt-2 flex flex-1 items-end gap-px">
+        {entries.length === 0 ? (
+          <span className="text-xs text-muted-foreground">No data</span>
+        ) : (
+          entries.map(([label, count]) => {
+            const h = Math.max(4, (count / maxVal) * 100);
+            return (
+              <div
+                key={label}
+                className="flex flex-1 flex-col items-center justify-end"
+                title={`${label}: ${count}`}
+              >
+                <div className="text-[9px] tabular-nums text-muted-foreground">{count}</div>
+                <div
+                  className="w-full min-w-[3px] rounded-t bg-primary/60"
+                  style={{ height: `${h}%` }}
+                />
+              </div>
+            );
+          })
+        )}
+      </div>
+      <div className="mt-1 text-[9px] text-muted-foreground/50 text-right">
+        {entries.length > 0 && `${entries[0]?.[0]} — ${entries[entries.length - 1]?.[0]}`}
+      </div>
+    </div>
+  );
+}

web/src/lib/api.ts

@@ -1,21 +1,46 @@
 import type {
   Ticket,
   Queue,
+  Dashboard,
+  DashboardWidget,
+  WidgetData,
+  Team,
+  User,
   Transaction,
+  SavedView,
   Scrip,
+  Template,
+  TemplatePreview,
   Lifecycle,
+  LifecycleDefinition,
   CustomField,
+  QueueCustomField,
   PreviewResult,
   UpdateResult,
+  Attachment,
+  AttachmentUploadResult,
+  TicketLink,
+  LoginResult,
 } from "./types";
 
 const BASE_URL = "/api";
 
 async function request<T>(url: string, options?: RequestInit): Promise<{ data: T | null; error: string | null }> {
   try {
+    const token = typeof window !== "undefined" ? localStorage.getItem("tessera_token") : null;
+    const headers: Record<string, string> = { "Content-Type": "application/json" };
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+    // Merge with options headers if any
+    const opts = { ...options };
+    if (opts.headers) {
+      Object.assign(headers, opts.headers as Record<string, string>);
+      delete opts.headers;
+    }
     const res = await fetch(`${BASE_URL}${url}`, {
-      headers: { "Content-Type": "application/json" },
-      ...options,
+      headers,
+      ...opts,
     });
     if (!res.ok) {
       const body = await res.json().catch(() => ({ error: res.statusText }));
@@ -28,10 +53,31 @@ async function request<T>(url: string, options?: RequestInit): Promise<{ data: T
   }
 }
 
-export async function getTickets(params?: { queue_id?: string; status?: string }): Promise<{ data: Ticket[] | null; error: string | null }> {
+export async function getTickets(params?: {
+  queue_id?: string;
+  status?: string;
+  q?: string;
+  owner_id?: string;
+  team_id?: string;
+  custom_fields?: Record<string, string>;
+  subject?: string;
+  created?: string;
+  updated?: string;
+}): Promise<{ data: Ticket[] | null; error: string | null }> {
   const sp = new URLSearchParams();
   if (params?.queue_id) sp.set("queue_id", params.queue_id);
   if (params?.status) sp.set("status", params.status);
+  if (params?.q) sp.set("q", params.q);
+  if (params?.owner_id) sp.set("owner_id", params.owner_id);
+  if (params?.team_id) sp.set("team_id", params.team_id);
+  if (params?.subject) sp.set("subject", params.subject);
+  if (params?.created) sp.set("created", params.created);
+  if (params?.updated) sp.set("updated", params.updated);
+  if (params?.custom_fields) {
+    for (const [fieldId, value] of Object.entries(params.custom_fields)) {
+      if (value) sp.set(`cf.${fieldId}`, value);
+    }
+  }
   const qs = sp.toString();
   return request<Ticket[]>(`/tickets${qs ? `?${qs}` : ""}`);
 }
@@ -40,11 +86,16 @@ export async function getTicket(id: number): Promise<{ data: Ticket | null; erro
   return request<Ticket>(`/tickets/${id}`);
 }
 
-export async function createTicket(data: { subject: string; queue_id: string }): Promise<{ data: Ticket | null; error: string | null }> {
-  return request<Ticket>("/tickets", { method: "POST", body: JSON.stringify(data) });
+export async function createTicket(data: {
+  subject: string;
+  queue_id: string;
+  description?: string;
+  custom_fields?: Record<string, string>;
+}): Promise<{ data: UpdateResult | null; error: string | null }> {
+  return request<UpdateResult>("/tickets", { method: "POST", body: JSON.stringify(data) });
 }
 
-export async function updateTicket(id: number, data: { subject?: string; status?: string }): Promise<{ data: UpdateResult | null; error: string | null }> {
+export async function updateTicket(id: number, data: { subject?: string; status?: string; owner_id?: string | null; team_id?: string | null }): Promise<{ data: UpdateResult | null; error: string | null }> {
   return request<UpdateResult>(`/tickets/${id}`, { method: "PATCH", body: JSON.stringify(data) });
 }
 
@@ -56,26 +107,128 @@ export async function getTicketTransactions(id: number): Promise<{ data: Transac
   return request<Transaction[]>(`/tickets/${id}/transactions`);
 }
 
-export async function sendComment(id: number, data: { body: string; internal?: boolean }): Promise<{ data: Transaction | null; error: string | null }> {
+export async function sendComment(id: number, data: { body: string; internal?: boolean; attachment_ids?: string[]; time_worked_minutes?: number }): Promise<{ data: Transaction | null; error: string | null }> {
   return request<Transaction>(`/tickets/${id}/comment`, { method: "POST", body: JSON.stringify(data) });
 }
 
+export async function batchUpdateTickets(data: {
+  ticket_ids: number[];
+  status?: string;
+  owner_id?: string | null;
+  team_id?: string | null;
+}): Promise<{ data: { results: Array<{ id: number; ok: boolean; error?: string }> } | null; error: string | null }> {
+  return request<{ results: Array<{ id: number; ok: boolean; error?: string }> }>("/tickets/batch", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function mergeTickets(sourceId: number, targetTicketId: number): Promise<{ data: { ok: boolean; target_id: number } | null; error: string | null }> {
+  return request<{ ok: boolean; target_id: number }>(`/tickets/${sourceId}/merge`, { method: "POST", body: JSON.stringify({ target_ticket_id: targetTicketId }) });
+}
+
+// Notifications
+
+export interface Notification {
+  id: string;
+  user_id: string;
+  ticket_id: number | null;
+  type: string;
+  title: string;
+  body: string | null;
+  read: boolean;
+  created_at: string;
+}
+
+export async function getNotifications(): Promise<{ data: Notification[] | null; error: string | null }> {
+  return request<Notification[]>("/notifications");
+}
+
+export async function getUnreadCount(): Promise<{ data: { count: number } | null; error: string | null }> {
+  return request<{ count: number }>("/notifications/unread-count");
+}
+
+export async function markNotificationRead(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/notifications/${id}/read`, { method: "PATCH" });
+}
+
+export async function markAllNotificationsRead(): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>("/notifications/read-all", { method: "PATCH" });
+}
+
+// API Tokens
+
+export interface ApiToken {
+  id: string;
+  name: string;
+  last_used_at: string | null;
+  created_at: string;
+}
+
+export interface ApiTokenCreated {
+  id: string;
+  name: string;
+  token: string;
+  created_at: string;
+}
+
+export async function getApiTokens(): Promise<{ data: ApiToken[] | null; error: string | null }> {
+  return request<ApiToken[]>("/auth/tokens");
+}
+
+export async function createApiToken(name: string): Promise<{ data: ApiTokenCreated | null; error: string | null }> {
+  return request<ApiTokenCreated>("/auth/tokens", { method: "POST", body: JSON.stringify({ name }) });
+}
+
+export async function revokeApiToken(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/auth/tokens/${id}`, { method: "DELETE" });
+}
+
 export async function getQueues(): Promise<{ data: Queue[] | null; error: string | null }> {
   return request<Queue[]>("/queues");
 }
 
-export async function createQueue(data: { name: string; description?: string }): Promise<{ data: Queue | null; error: string | null }> {
+export async function getUsers(): Promise<{ data: User[] | null; error: string | null }> {
+  return request<User[]>("/users");
+}
+
+export async function createUser(data: {
+  username: string;
+  email?: string | null;
+  role?: string;
+  password?: string | null;
+}): Promise<{ data: User | null; error: string | null }> {
+  return request<User>("/users", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateUser(id: string, data: {
+  username?: string;
+  email?: string | null;
+  role?: string;
+  password?: string | null;
+}): Promise<{ data: User | null; error: string | null }> {
+  return request<User>(`/users/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function deleteUser(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/users/${id}`, { method: "DELETE" });
+}
+
+export async function createQueue(data: { name: string; description?: string | null; lifecycle_id?: string | null; team_id?: string | null }): Promise<{ data: Queue | null; error: string | null }> {
   return request<Queue>("/queues", { method: "POST", body: JSON.stringify(data) });
 }
 
+export async function updateQueue(id: string, data: { name?: string; description?: string | null; lifecycle_id?: string | null; team_id?: string | null }): Promise<{ data: Queue | null; error: string | null }> {
+  return request<Queue>(`/queues/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
 export async function getScrips(): Promise<{ data: Scrip[] | null; error: string | null }> {
   return request<Scrip[]>("/scrips");
 }
 
 export async function createScrip(data: {
   name: string;
+  description?: string | null;
   queue_id?: string | null;
   condition_type: string;
+  condition_config?: Record<string, unknown>;
   action_type: string;
   action_config?: Record<string, unknown>;
   template_id?: string | null;
@@ -88,8 +241,10 @@ export async function createScrip(data: {
 
 export async function updateScrip(id: string, data: {
   name?: string;
+  description?: string | null;
   queue_id?: string | null;
   condition_type?: string;
+  condition_config?: Record<string, unknown>;
   action_type?: string;
   action_config?: Record<string, unknown>;
   template_id?: string | null;
@@ -100,26 +255,424 @@ export async function updateScrip(id: string, data: {
   return request<Scrip>(`/scrips/${id}`, { method: "PATCH", body: JSON.stringify(data) });
 }
 
+export async function getTemplates(): Promise<{ data: Template[] | null; error: string | null }> {
+  return request<Template[]>("/templates");
+}
+
+export async function createTemplate(data: {
+  name: string;
+  queue_id?: string | null;
+  subject_template: string;
+  body_template: string;
+}): Promise<{ data: Template | null; error: string | null }> {
+  return request<Template>("/templates", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateTemplate(id: string, data: {
+  name?: string;
+  queue_id?: string | null;
+  subject_template?: string;
+  body_template?: string;
+}): Promise<{ data: Template | null; error: string | null }> {
+  return request<Template>(`/templates/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function previewTemplate(data: {
+  subject_template: string;
+  body_template: string;
+  ticket_id?: number | null;
+}): Promise<{ data: TemplatePreview | null; error: string | null }> {
+  return request<TemplatePreview>("/templates/preview", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function deleteTemplate(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/templates/${id}`, { method: "DELETE" });
+}
+
 export async function getLifecycles(): Promise<{ data: Lifecycle[] | null; error: string | null }> {
   return request<Lifecycle[]>("/lifecycles");
 }
 
 export async function createLifecycle(data: {
   name: string;
-  definition: Record<string, unknown>;
+  definition: Record<string, unknown> | LifecycleDefinition;
 }): Promise<{ data: Lifecycle | null; error: string | null }> {
   return request<Lifecycle>("/lifecycles", { method: "POST", body: JSON.stringify(data) });
 }
 
+export async function updateLifecycle(id: string, data: {
+  name?: string;
+  definition?: Record<string, unknown> | LifecycleDefinition;
+}): Promise<{ data: Lifecycle | null; error: string | null }> {
+  return request<Lifecycle>(`/lifecycles/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
 export async function getCustomFields(): Promise<{ data: CustomField[] | null; error: string | null }> {
   return request<CustomField[]>("/custom-fields");
 }
 
+export async function getQueueCustomFields(queueId: string): Promise<{ data: QueueCustomField[] | null; error: string | null }> {
+  return request<QueueCustomField[]>(`/custom-fields/queues/${queueId}`);
+}
+
+export async function assignQueueCustomField(queueId: string, customFieldId: string): Promise<{ data: QueueCustomField | null; error: string | null }> {
+  return request<QueueCustomField>(`/custom-fields/queues/${queueId}`, {
+    method: "POST",
+    body: JSON.stringify({ custom_field_id: customFieldId }),
+  });
+}
+
+export async function unassignQueueCustomField(queueId: string, customFieldId: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/custom-fields/queues/${queueId}/${customFieldId}`, { method: "DELETE" });
+}
+
+export async function updateTicketCustomField(ticketId: number, customFieldId: string, value: string): Promise<{ data: Transaction | null; error: string | null }> {
+  return request<Transaction>(`/tickets/${ticketId}/custom-fields/${customFieldId}`, {
+    method: "PATCH",
+    body: JSON.stringify({ value }),
+  });
+}
+
 export async function createCustomField(data: {
+  key?: string;
   name: string;
   field_type: string;
   values?: unknown | null;
   max_values?: number;
+  pattern?: string | null;
+  validation_config?: Record<string, unknown> | null;
+  default_value?: string | null;
 }): Promise<{ data: CustomField | null; error: string | null }> {
   return request<CustomField>("/custom-fields", { method: "POST", body: JSON.stringify(data) });
 }
+
+export async function updateCustomField(id: string, data: {
+  key?: string;
+  name?: string;
+  field_type?: string;
+  values?: unknown | null;
+  max_values?: number;
+  pattern?: string | null;
+  validation_config?: Record<string, unknown> | null;
+  default_value?: string | null;
+}): Promise<{ data: CustomField | null; error: string | null }> {
+  return request<CustomField>(`/custom-fields/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function getViews(): Promise<{ data: SavedView[] | null; error: string | null }> {
+  return request<SavedView[]>("/views");
+}
+
+export async function createView(data: {
+  name: string;
+  filters: { field: string; operator: string; value: string }[];
+  sort_key?: string;
+  columns?: { key: string; label: string; width: number; display: string }[];
+  is_public?: boolean;
+}): Promise<{ data: SavedView | null; error: string | null }> {
+  return request<SavedView>("/views", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateView(id: string, data: {
+  name?: string;
+  filters?: { field: string; operator: string; value: string }[];
+  sort_key?: string;
+  columns?: unknown[];
+  is_public?: boolean;
+}): Promise<{ data: SavedView | null; error: string | null }> {
+  return request<SavedView>(`/views/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function deleteView(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/views/${id}`, { method: "DELETE" });
+}
+
+export async function getDashboards(): Promise<{ data: Dashboard[] | null; error: string | null }> {
+  return request<Dashboard[]>("/dashboards");
+}
+
+export async function getDashboard(id: string): Promise<{ data: Dashboard | null; error: string | null }> {
+  return request<Dashboard>(`/dashboards/${id}`);
+}
+
+export async function createDashboard(data: {
+  name: string;
+  description?: string;
+  team_id?: string | null;
+  is_default?: boolean;
+}): Promise<{ data: Dashboard | null; error: string | null }> {
+  return request<Dashboard>("/dashboards", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateDashboard(id: string, data: {
+  name?: string;
+  description?: string | null;
+  team_id?: string | null;
+  is_default?: boolean;
+  layout?: unknown[];
+}): Promise<{ data: Dashboard | null; error: string | null }> {
+  return request<Dashboard>(`/dashboards/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function deleteDashboard(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/dashboards/${id}`, { method: "DELETE" });
+}
+
+export async function getDashboardWidgets(dashboardId: string): Promise<{ data: DashboardWidget[] | null; error: string | null }> {
+  return request<DashboardWidget[]>(`/dashboards/${dashboardId}/widgets`);
+}
+
+export async function createWidget(dashboardId: string, data: {
+  view_id: string;
+  title: string;
+  widget_type: string;
+  position?: { x: number; y: number; w: number; h: number };
+  config?: Record<string, unknown>;
+}): Promise<{ data: DashboardWidget | null; error: string | null }> {
+  return request<DashboardWidget>(`/dashboards/${dashboardId}/widgets`, { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateWidget(dashboardId: string, widgetId: string, data: {
+  title?: string;
+  widget_type?: string;
+  position?: { x: number; y: number; w: number; h: number };
+  config?: Record<string, unknown>;
+}): Promise<{ data: DashboardWidget | null; error: string | null }> {
+  return request<DashboardWidget>(`/dashboards/${dashboardId}/widgets/${widgetId}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function deleteWidget(dashboardId: string, widgetId: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/dashboards/${dashboardId}/widgets/${widgetId}`, { method: "DELETE" });
+}
+
+export async function getWidgetData(dashboardId: string, widgetId: string): Promise<{ data: WidgetData | null; error: string | null }> {
+  return request<WidgetData>(`/dashboards/${dashboardId}/widgets/${widgetId}/data`);
+}
+
+export async function getTeams(): Promise<{ data: Team[] | null; error: string | null }> {
+  return request<Team[]>("/teams");
+}
+
+export async function createTeam(data: { name: string; description?: string | null }): Promise<{ data: Team | null; error: string | null }> {
+  return request<Team>("/teams", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateTeam(id: string, data: { name?: string; description?: string | null }): Promise<{ data: Team | null; error: string | null }> {
+  return request<Team>(`/teams/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function deleteTeam(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/teams/${id}`, { method: "DELETE" });
+}
+
+export async function addTeamMember(teamId: string, userId: string): Promise<{ data: unknown | null; error: string | null }> {
+  return request<unknown>(`/teams/${teamId}/members`, { method: "POST", body: JSON.stringify({ user_id: userId }) });
+}
+
+export async function removeTeamMember(teamId: string, userId: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/teams/${teamId}/members/${userId}`, { method: "DELETE" });
+}
+
+export async function uploadAttachments(
+  ticketId: number,
+  files: File[],
+): Promise<{ data: { attachments: AttachmentUploadResult[] } | null; error: string | null }> {
+  try {
+    const formData = new FormData();
+    for (const file of files) {
+      formData.append("files", file);
+    }
+
+    const token = typeof window !== "undefined" ? localStorage.getItem("tessera_token") : null;
+    const headers: Record<string, string> = {};
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+
+    const res = await fetch(`/api/tickets/${ticketId}/attachments`, {
+      method: "POST",
+      headers,
+      body: formData,
+    });
+
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({ error: res.statusText }));
+      return { data: null, error: body.error || body.message || `HTTP ${res.status}` };
+    }
+
+    const data = await res.json();
+    return { data, error: null };
+  } catch (err) {
+    return { data: null, error: err instanceof Error ? err.message : "Unknown error" };
+  }
+}
+
+export function getAttachmentUrl(attachmentId: string): string {
+  return `/api/attachments/${attachmentId}`;
+}
+
+export async function getTicketAttachments(
+  ticketId: number,
+): Promise<{ data: Attachment[] | null; error: string | null }> {
+  return request<Attachment[]>(`/tickets/${ticketId}/attachments`);
+}
+
+export async function getTicketLinks(
+  ticketId: number,
+): Promise<{ data: TicketLink[] | null; error: string | null }> {
+  return request<TicketLink[]>(`/tickets/${ticketId}/links`);
+}
+
+export async function createTicketLink(
+  ticketId: number,
+  data: { target_ticket_id: number; link_type: string },
+): Promise<{ data: TicketLink | null; error: string | null }> {
+  return request<TicketLink>(`/tickets/${ticketId}/links`, { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function deleteTicketLink(
+  ticketId: number,
+  linkId: string,
+): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/tickets/${ticketId}/links/${linkId}`, { method: "DELETE" });
+}
+
+// Queue Permissions (admin)
+
+export interface QueuePermission {
+  id: string;
+  queue_id: string;
+  team_id: string;
+  right_name: string;
+  team_name?: string;
+  queue_name?: string;
+}
+
+export async function getQueuePermissions(): Promise<{ data: QueuePermission[] | null; error: string | null }> {
+  return request<QueuePermission[]>("/queue-permissions");
+}
+
+export async function getTeamsAndQueues(): Promise<{ data: { teams: Team[]; queues: Queue[] } | null; error: string | null }> {
+  return request<{ teams: Team[]; queues: Queue[] }>("/queue-permissions/teams-and-queues");
+}
+
+export async function grantQueuePermission(
+  queue_id: string,
+  team_id: string,
+  right_name: string,
+): Promise<{ data: QueuePermission | null; error: string | null }> {
+  return request<QueuePermission>("/queue-permissions", {
+    method: "POST",
+    body: JSON.stringify({ queue_id, team_id, right_name }),
+  });
+}
+
+export async function revokeQueuePermission(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/queue-permissions/${id}`, { method: "DELETE" });
+}
+
+// User Permissions (admin)
+
+export interface UserPermission {
+  id: string;
+  queue_id: string;
+  user_id: string;
+  right_name: string;
+  username?: string;
+  queue_name?: string;
+}
+
+export async function getUserPermissions(): Promise<{ data: UserPermission[] | null; error: string | null }> {
+  return request<UserPermission[]>("/user-permissions");
+}
+
+export async function grantUserPermission(
+  queue_id: string,
+  user_id: string,
+  right_name: string,
+): Promise<{ data: UserPermission | null; error: string | null }> {
+  return request<UserPermission>("/user-permissions", {
+    method: "POST",
+    body: JSON.stringify({ queue_id, user_id, right_name }),
+  });
+}
+
+export async function revokeUserPermission(id: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
+  return request<{ ok: boolean }>(`/user-permissions/${id}`, { method: "DELETE" });
+}
+
+// Auth
+
+function getStoredToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("tessera_token");
+}
+
+export function setStoredToken(token: string | null) {
+  if (typeof window === "undefined") return;
+  if (token) {
+    localStorage.setItem("tessera_token", token);
+  } else {
+    localStorage.removeItem("tessera_token");
+  }
+}
+
+export async function login(
+  username: string,
+  password: string,
+): Promise<{ data: LoginResult | null; error: string | null }> {
+  const result = await request<LoginResult>("/auth/login", {
+    method: "POST",
+    body: JSON.stringify({ username, password }),
+  });
+  if (result.data?.token) {
+    setStoredToken(result.data.token);
+  }
+  return result;
+}
+
+export function logout() {
+  setStoredToken(null);
+}
+
+export async function getMe(): Promise<{ data: User | null; error: string | null }> {
+  const token = getStoredToken();
+  if (!token) return { data: null, error: "Not authenticated" };
+
+  try {
+    const res = await fetch(`/api/auth/me`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    if (!res.ok) {
+      setStoredToken(null);
+      return { data: null, error: "Session expired" };
+    }
+    const data = await res.json();
+    return { data, error: null };
+  } catch (err) {
+    return { data: null, error: err instanceof Error ? err.message : "Unknown error" };
+  }
+}
+
+/**
+ * Fetch wrapper that includes the auth token.
+ */
+async function authRequest<T>(url: string, options?: RequestInit): Promise<{ data: T | null; error: string | null }> {
+  const token = getStoredToken();
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  try {
+    const res = await fetch(`/api${url}`, { ...options, headers: { ...headers, ...(options?.headers as Record<string, string> ?? {}) } });
+    if (!res.ok) {
+      if (res.status === 401 || res.status === 403) {
+        setStoredToken(null);
+      }
+      const body = await res.json().catch(() => ({ error: res.statusText }));
+      return { data: null, error: body.error || body.message || `HTTP ${res.status}` };
+    }
+    const data = await res.json();
+    return { data, error: null };
+  } catch (err) {
+    return { data: null, error: err instanceof Error ? err.message : "Unknown error" };
+  }
+}

web/src/lib/auth-context.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import { login as apiLogin, logout as apiLogout, getMe } from "./api";
+import type { User, LoginResult } from "./types";
+
+interface AuthState {
+  user: User | null;
+  loading: boolean;
+  login: (username: string, password: string) => Promise<string | null>;
+  logout: () => void;
+  isAdmin: boolean;
+}
+
+const AuthContext = createContext<AuthState>({
+  user: null,
+  loading: true,
+  login: async () => null,
+  logout: () => {},
+  isAdmin: false,
+});
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Check existing session on mount
+  useEffect(() => {
+    void Promise.resolve().then(async () => {
+      const { data } = await getMe();
+      if (data) {
+        setUser(data);
+      }
+      setLoading(false);
+    });
+  }, []);
+
+  const login = useCallback(async (username: string, password: string): Promise<string | null> => {
+    const { data, error } = await apiLogin(username, password);
+    if (error || !data) {
+      return error || "Login failed";
+    }
+    setUser(data.user);
+    return null; // null = success
+  }, []);
+
+  const logout = useCallback(() => {
+    apiLogout();
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout, isAdmin: user?.role === "admin" }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

web/src/lib/types.ts

@@ -4,12 +4,14 @@ export interface Ticket {
   queue_id: string;
   status: string;
   owner_id: string | null;
+  team_id: string | null;
   creator_id: string;
   created_at: string;
   updated_at: string;
   started_at: string | null;
   resolved_at: string | null;
   custom_fields?: CustomFieldValue[];
+  blocked_by?: Array<{ id: number; subject: string; status: string }>;
 }
 
 export interface Queue {
@@ -17,6 +19,20 @@ export interface Queue {
   name: string;
   description: string | null;
   lifecycle_id: string | null;
+  team_id: string | null;
+}
+
+export interface User {
+  id: string;
+  username: string;
+  email: string | null;
+  role: string;
+  created_at: string;
+}
+
+export interface LoginResult {
+  token: string;
+  user: User;
 }
 
 export interface Transaction {
@@ -27,21 +43,27 @@ export interface Transaction {
   old_value: string | null;
   new_value: string | null;
   data: unknown;
+  time_worked_minutes: number;
   creator_id: string;
   created_at: string;
+  attachments?: Attachment[];
 }
 
 export interface Scrip {
   id: string;
   queue_id: string | null;
   name: string;
+  description: string | null;
   condition_type: string;
+  condition_config: Record<string, unknown>;
   action_type: string;
   action_config: Record<string, unknown>;
   template_id: string | null;
   stage: string;
   sort_order: number;
   disabled: boolean;
+  applicable_trans_types: string | null;
+  created_at: string;
 }
 
 export interface Template {
@@ -50,6 +72,13 @@ export interface Template {
   queue_id: string | null;
   subject_template: string;
   body_template: string;
+  created_at: string;
+}
+
+export interface TemplatePreview {
+  subject: string;
+  body: string;
+  context: unknown;
 }
 
 export interface Lifecycle {
@@ -65,16 +94,40 @@ export interface LifecycleDefinition {
 
 export interface CustomField {
   id: string;
+  key: string;
   name: string;
   field_type: string;
   values: unknown | null;
   max_values: number;
+  pattern: string | null;
+  validation_config: Record<string, unknown> | null;
+  default_value: string | null;
+}
+
+export const CUSTOM_FIELD_TYPES = [
+  'Text',
+  'Textarea',
+  'SelectOne',
+  'SelectMultiple',
+  'Date',
+  'DateTime',
+  'Number',
+] as const;
+
+export type CustomFieldType = (typeof CUSTOM_FIELD_TYPES)[number];
+
+export interface QueueCustomField {
+  id: string;
+  queue_id: string;
+  custom_field_id: string;
+  sort_order: number;
+  custom_field: CustomField | null;
 }
 
 export interface CustomFieldValue {
   id: string;
   custom_field_id: string;
-  ticket_id: string;
+  ticket_id: number;
   value: string;
   custom_field?: CustomField;
 }
@@ -101,3 +154,117 @@ export interface ScripResult {
   success: boolean;
   message: string;
 }
+
+export interface SavedFilter {
+  field: string;
+  operator: string;
+  value: string;
+}
+
+export interface SavedView {
+  id: string;
+  name: string;
+  filters: SavedFilter[];
+  sort_key: string;
+  columns: unknown[];
+  is_public: boolean;
+  creator_id: string | null;
+  created_at: string;
+}
+
+export interface Team {
+  id: string;
+  name: string;
+  description: string | null;
+  created_at: string;
+  members?: User[];
+}
+
+export interface Dashboard {
+  id: string;
+  name: string;
+  description: string | null;
+  team_id: string | null;
+  layout: unknown[];
+  is_default: boolean;
+  created_at: string;
+  widgets?: DashboardWidget[];
+}
+
+export interface DashboardWidget {
+  id: string;
+  dashboard_id: string;
+  view_id: string;
+  title: string;
+  widget_type: string;
+  position: { x: number; y: number; w: number; h: number };
+  config: Record<string, unknown>;
+  created_at: string;
+}
+
+export interface WidgetTicket {
+  id: number;
+  subject: string;
+  status: string;
+  owner_id: string | null;
+  owner_name: string | null;
+  queue_name: string;
+  updated_at: string;
+}
+
+export interface WidgetData {
+  type: string;
+  title: string;
+  total: number;
+  view_id: string;
+  tickets?: WidgetTicket[];
+  counts?: Record<string, number>;
+  groups?: Record<string, number>;
+  group_by?: string;
+  config?: Record<string, unknown>;
+}
+
+export interface Attachment {
+  id: string;
+  transaction_id: string | null;
+  filename: string;
+  mime_type: string;
+  size_bytes: number;
+  storage_path: string;
+  created_at: string;
+}
+
+export interface AttachmentUploadResult {
+  id: string;
+  filename: string;
+  mime_type: string;
+  size_bytes: number;
+}
+
+export interface TicketLink {
+  id: string;
+  ticket_id: number;
+  target_ticket_id: number;
+  link_type: string;
+  creator_id: string;
+  created_at: string;
+  target_ticket?: { id: number; subject: string; status: string } | null;
+}
+
+export interface Notification {
+  id: string;
+  user_id: string;
+  ticket_id: number | null;
+  type: string;
+  title: string;
+  body: string | null;
+  read: boolean;
+  created_at: string;
+}
+
+export interface ApiToken {
+  id: string;
+  name: string;
+  last_used_at: string | null;
+  created_at: string;
+}