4f699bb90e
Replaces the conventional chat aesthetic on /ai with a brutalist-mono
operator deck. The page now reads as a flight recorder — turn numbers
in the gutter, hairline rules, sodium-amber phosphor primary on
deep-ink ground, vim-style modeline at the foot.
Type system is the design's load-bearing element:
- JetBrains Mono for everything system-y (operator lines, signatures,
modeline, session ids, tool calls)
- Newsreader serif for the agent's prose only — the synthesis voice
literally lifts off the page in a different family from the machine
voice. Operator and agent are typographically inseparable from their
speaker.
Layout changes:
- Sticky session header with a giant base36 session id ("3K9P · A4C2")
and a metadata strip showing agent, model, turn count, status. The
status pill flips colour: AMBER on stream, ROSE on awaiting confirm,
MINT on ready, MUTED on mock.
- Empty state is no longer the apologetic "How can I help you today?".
It's "ATLAS. standing by." in oversize mono with the agent name in
italic serif amber, a hairline divider, and a single one-liner
instruction prefixed with ›. Lines stagger in via animation-delay.
- Operator turns: monospace, 14px, sodium-amber › prompt, no bubble.
Hangs from a left gutter with T01/T02… turn number + UTC timestamp.
- Agent turns: serif, 17px/1.55, with a tiny mono signature underneath
("atlas» 03:14:08Z · recv"). Cyan accent column instead of amber.
- Composer: terminal frame (square, 1px border, focus ring is amber
glow). Internal ›_ prompt mark in front of the textarea, mono input.
- Bottom modeline: utc clock + turn count + estimated tokens on the
left, keyboard hints on the right. Streaming flips the right side
to a pulsing phosphor bar + STREAM label.
Atmosphere details:
- 2px scanline overlay (very faint, 1.2% opacity)
- Corner phosphor blooms (amber top-right, cyan bottom-left)
- Inline SVG turbulence grain (3.5% opacity) over the whole theme
- Cursor blink animation on the prompt mark
- Consolas-tier ligatures on the mono via JetBrains Mono ss01/calt
All theming scoped via [data-theme="console"] — picks up automatically
because /ai's AppShell now passes theme="console". Other routes are
untouched. Tool-call cards from @crema/agent-ui inherit the palette
via overridden CSS variables (--card, --border, --primary, etc) plus
a [data-slot="tool-call-card"] override for the frame.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Arcadia Admin
Admin webapp for arcadia-core — the multi-tenant Phoenix backend. Built on the Crema design system with the Skyrise theme and started from the Vibespace starter.
Surfaces tenant management, user/role administration, billing, audit logs, storage configs, scheduled tasks, feature flags, and platform monitoring on top of arcadia's /api/v1 and /admin/* endpoints.
Quick start
npm install
npm run dev
Open http://localhost:5173. The app talks to arcadia at http://localhost:4000 by default; override with VITE_ARCADIA_URL in .env.local.
To use it for real:
- Have arcadia running locally (see
../reference/arcadia-app/DEV_SETUP.md). - Visit
/loginand sign in with admin credentials. In dev seeds:admin@example.com/AdminP@ssw0rd(tenantdefault).
Configuration
| Env var | Default | Purpose |
|---|---|---|
VITE_ARCADIA_URL |
http://localhost:4000 |
Base URL of arcadia-core. |
VITE_ARCADIA_TENANT |
default |
Tenant id sent as X-Tenant-ID. Override per-deployment. |
What's in here
App shell
app/components/layout/app-shell.tsx — left rail + appbar + avatar dropdown. Brand identity in app/lib/identity.ts (name: "Arcadia Admin", icon: Shield). The shell is template code, not a lib — fork it freely as admin features are added.
Arcadia client + auth UI
@crema/arcadia-client— typed HTTP client (generic + openapi-fetch-backedclient.typed), Phoenix Channels realtime, error normalization. Mounted at the root via<ArcadiaProvider>.@crema/arcadia-auth-ui— login / signup / password reset / 2FA forms, themed via Skyrise tokens. The/loginroute renders<LoginForm>.
Skyrise theme
lib-theme-skyrise — premium AI-first glass: iridescent body, frosted-glass surfaces, vivid text, Apple-spring motion. Default 18px root.
Surface tints (body[data-surface="snow|stone|sage|slate"]) and dark mode (html.dark) work out of the box via the existing pickers in the appbar.
Command bus
@crema/action-bus — every interactive element has data-action="<id>" so admin flows can be scripted, e2e-tested, or driven by an LLM through a single bus. See docs/AI_FIRST.md.
Sibling repos
your-workspace/
arcadia-admin/ ← this repo
vibespace/ ← starter that this was cloned from
reference/arcadia-app/ ← Phoenix backend (read-only reference)
lib-arcadia-client/
lib-arcadia-auth-ui/
lib-action-bus/
lib-aifirst-ui/
lib-chat-ui/
lib-llm-ui/
lib-notification-ui/
lib-theme-skyrise/
Dev scripts
| Command | What it does |
|---|---|
npm run dev |
Vite dev server |
npm run build |
Production build |
npm run start |
Serve the built app |
npm run typecheck |
react-router typegen && tsc |
npm run test |
Vitest run |
bash start.sh / bash stop.sh |
Run dev server in the background |
Conventions
- Brand strings, not literals. Use
useBrand().name— never hardcode "Arcadia Admin". [data-action="<id>"]on every interactive element. Naming:nav-*,appbar-*,tenants-*,users-*,audit-*, etc.- Tokens, not values.
bg-card,text-foreground,var(--primary)— never hex. - Lib edits commit to each lib's own repo.
git statushere only shows app-level changes.
Further reading
docs/AI_FIRST.md— command-bus / DSL system tourapp/components/layout/THEME_CONTRACT.md— token contract every theme must satisfyCLAUDE.md— orientation for an LLM working in this repo../reference/arcadia-app/— backend (DEV_SETUP, controllers, OpenAPI source-of-truth)