CremaUIStudio/arcadia-admin
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

ai: redesign /ai surface as Mission Console

Browse Source 
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>
This commit is contained in:
jules
2026-05-02 19:32:22 +10:00
parent c0eb85d2fe
commit 4f699bb90e
3 changed files with 598 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
app/routes/ai.tsx
View File

@@ -316,7 +316,7 @@ export default function AIRoute() {
const availableModels = status.kind === "live" ? status.models : ["mock"]
return (
<AppShell title="AI">
<AppShell title="AI" theme="console">
<LLMProvider adapter={adapter} model={activeModel}>
<ChatSurface
models={availableModels}
@@ -471,6 +471,29 @@ function ChatSurface({
() => !!loadAISnapshot(),
)
// Session label — stable for the duration of the page load. Encoded in
// base36 from the mount timestamp; just a unique-feeling moniker for
// the operator's eye, not anything semantic.
const [sessionLabel] = useState(() =>
typeof window === "undefined"
? "0000-0000"
: `${Math.floor(Date.now() / 1000).toString(36).slice(-4).toUpperCase()}-${Math.random()
.toString(36)
.slice(2, 6)
.toUpperCase()}`,
)
// Live clock for the modeline / signatures, ticking every second.
const [now, setNow] = useState(() => new Date())
useEffect(() => {
const id = setInterval(() => setNow(new Date()), 1000)
return () => clearInterval(id)
}, [])
const clockLabel = now
.toISOString()
.slice(11, 19) /* HH:MM:SS in UTC */
+ "Z"
const hasAssistantReply = messages.some((m) => m.role === "assistant")
const buildTranscript = useCallback(() => {
@@ -638,20 +661,82 @@ function ChatSurface({
const isEmpty = messages.length === 0
// Token estimate for the modeline. Cheap heuristic, adequate for
// operator-glance display.
const estTokensTotal = messages.reduce(
(n, m) => n + Math.ceil((m.content?.length ?? 0) / 4),
0,
)
const userTurns = messages.filter((m) => m.role === "user").length
return (
<div className="relative -mb-6 flex h-full min-h-0 flex-col">
{/* Greeting — only when empty, fades out as composer slides down */}
{/* Session header — flight-recorder strip. Hidden in the empty state
* because the empty state already shows session metadata. */}
{!isEmpty && (
<div className="console-header sticky top-0 z-10 px-4 py-3 sm:px-6">
<div className="mx-auto flex w-full max-w-3xl items-end justify-between gap-6">
<div className="flex flex-col gap-0.5">
<span className="console-meta-key">session</span>
<span className="console-session-id">
{sessionLabel.split("-")[0]}
<span>·</span>
{sessionLabel.split("-")[1]}
</span>
</div>
<div className="flex flex-wrap items-end justify-end gap-x-6 gap-y-1.5">
<SessionMeta label="agent" value={(activeAgent?.name ?? "Atlas").toLowerCase()} />
<SessionMeta label="model" value={truncateModel(model)} />
<SessionMeta label="turns" value={userTurns.toString().padStart(2, "0")} />
<SessionMeta
label="status"
value={
isStreaming
? "STREAMING"
: pendingConfirm
? "AWAIT-CONFIRM"
: isMock
? "MOCK"
: "READY"
}
tone={
isStreaming
? "amber"
: pendingConfirm
? "rose"
: isMock
? "muted"
: "mint"
}
/>
</div>
</div>
</div>
)}
{/* Empty state — flight-recorder card with staggered reveal */}
<div
aria-hidden={!isEmpty}
className="pointer-events-none absolute inset-x-0 top-[28%] -translate-y-1/2 px-6 text-center transition-opacity duration-300"
className="pointer-events-none absolute inset-x-0 top-[14%] px-8 transition-opacity duration-300"
style={{ opacity: isEmpty ? 1 : 0 }}
>
<h1
className="text-4xl font-semibold tracking-tight text-foreground"
style={{ fontFamily: "var(--font-heading)" }}
>
How can I help you today?
</h1>
<div className="mx-auto flex max-w-3xl flex-col gap-6">
<div className="console-empty-line console-mono flex items-center justify-between text-[10.5px] tracking-[0.18em] uppercase text-[var(--console-muted)]">
<span>arcadia // operator console</span>
<span>session {sessionLabel}</span>
</div>
<div className="console-empty-line h-px bg-[var(--console-rule-soft)]" />
<h1 className="console-empty-line console-empty-headline">
ATLAS<span className="text-[var(--console-amber)]">.</span>
<br />
<em>standing&nbsp;by</em>
</h1>
<p className="console-empty-line console-mono max-w-[58ch] text-[13.5px] leading-[1.7] text-[var(--console-text-2)]">
<span className="text-[var(--console-amber)]">›</span>{" "}
Issue an instruction. Read tools run automatically. Writes pause for
confirmation. Tab&nbsp;⇥ for command palette.
</p>
</div>
</div>
{/* Messages — rendered when there are any. In empty state a flex-grow
@@ -679,6 +764,9 @@ function ChatSurface({
role={m.role as "user" | "assistant"}
content={m.content}
toolCalls={m.toolCalls}
turnNum={i + 1}
agentName={activeAgent?.name ?? "Atlas"}
timestamp={clockLabel}
/>
{calls.length > 0 && (
<div className="self-start flex w-full max-w-[80ch] flex-col gap-2">
@@ -785,6 +873,47 @@ function ChatSurface({
)}
</div>
</div>
{/* Modeline — vim-style status strip. Pinned above the AppShell's own
* footer/padding so it always reads in the operator's bottom band. */}
<div className="console-modeline px-4 py-1.5 sm:px-6">
<div className="mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-x-6 gap-y-0.5 tabular-nums">
<div className="flex items-center gap-4">
<span>
<span className="console-modeline-key">utc</span>
<span className="console-modeline-val">{clockLabel}</span>
</span>
<span>
<span className="console-modeline-key">turn</span>
<span className="console-modeline-val">
{userTurns.toString().padStart(2, "0")}
</span>
</span>
<span>
<span className="console-modeline-key">tok</span>
<span className="console-modeline-val">~{estTokensTotal.toLocaleString()}</span>
</span>
</div>
<div className="flex items-center gap-4">
{isStreaming ? (
<span className="flex items-center gap-2">
<span className="console-streaming-bar" />
<span className="console-modeline-val text-[var(--console-amber)]">
STREAM
</span>
</span>
) : (
<span>
<span className="console-modeline-key">enter</span>
<span className="console-modeline-val">send</span>
<span className="ml-3 console-modeline-key">⇧</span>
<span className="console-modeline-key ml-1">enter</span>
<span className="console-modeline-val">newline</span>
</span>
)}
</div>
</div>
</div>
</div>
)
}
@@ -856,36 +985,104 @@ function buildAgentToolCall(
}
}
function SessionMeta({
label,
value,
tone = "default",
}: {
label: string
value: string
tone?: "default" | "amber" | "rose" | "mint" | "muted"
}) {
const toneColor = {
default: "var(--console-text)",
amber: "var(--console-amber)",
rose: "var(--console-rose)",
mint: "var(--console-mint)",
muted: "var(--console-muted)",
}[tone]
return (
<div className="flex flex-col gap-0.5 text-right">
<span className="console-meta-key">{label}</span>
<span className="console-meta-val tabular-nums" style={{ color: toneColor }}>
{value}
</span>
</div>
)
}
function truncateModel(m: string): string {
if (!m) return "—"
if (m.length <= 22) return m
return m.slice(0, 10) + "…" + m.slice(-9)
}
function MessageRow({
role,
content,
toolCalls,
turnNum,
agentName,
timestamp,
}: {
role: "user" | "assistant"
content: string
toolCalls?: ToolCall[]
turnNum?: number
agentName?: string
timestamp?: string
}) {
// Operator turn — monospace, sodium-amber prompt, no bubble. The whole
// row hangs from a left gutter showing the turn number.
if (role === "user") {
return (
<div className="self-end">
<div
className="max-w-[80ch] rounded-3xl px-5 py-3 shadow-sm"
style={{
background: "oklch(0.55 0.22 295)",
color: "oklch(1 0 0)",
}}
>
<div className="whitespace-pre-wrap leading-relaxed">{content}</div>
<div className="grid grid-cols-[3.5rem_1fr] gap-x-3 self-stretch">
<div className="flex flex-col items-end pt-[3px]">
<span className="console-turn-num">
T{(turnNum ?? 0).toString().padStart(2, "0")}
</span>
{timestamp ? (
<span className="console-mono mt-0.5 text-[9.5px] tracking-[0.1em] text-[var(--console-muted-2)]">
{timestamp}
</span>
) : null}
</div>
<div className="border-l border-[var(--console-rule-soft)] pl-4">
<div className="console-op-line whitespace-pre-wrap">
<span className="console-op-prompt">›&nbsp;</span>
{content}
</div>
</div>
</div>
)
}
// Assistant messages with only tool_calls and no prose render nothing here —
// the ToolCallCards beneath them carry the visual weight.
// Assistant turn — set in serif, with a tiny mono signature beneath. If
// there's no prose (just tool calls), suppress the row entirely.
if (!content.trim()) return null
return (
<div className="self-start max-w-[80ch]">
<MessageBody content={content} toolCalls={toolCalls} />
<div className="grid grid-cols-[3.5rem_1fr] gap-x-3 self-stretch">
<div className="flex flex-col items-end pt-[2px]">
<span className="console-turn-num text-[var(--console-cyan)]">
T{(turnNum ?? 0).toString().padStart(2, "0")}
</span>
<span className="console-mono mt-0.5 text-[9.5px] tracking-[0.1em] text-[var(--console-muted-2)]">
{agentName?.slice(0, 6).toLowerCase() ?? "atlas"}
</span>
</div>
<div className="border-l border-[var(--console-cyan-deep)]/40 pl-4">
<div className="console-agent-prose">
<MessageBody content={content} toolCalls={toolCalls} />
</div>
<div className="console-sig mt-2 flex items-center gap-2">
<span className="console-sig-name">
{agentName?.toLowerCase() ?? "atlas"}»
</span>
{timestamp ? <span>{timestamp}</span> : null}
<span className="text-[var(--console-muted-2)]">·</span>
<span>recv</span>
</div>
</div>
</div>
)
}
@@ -965,26 +1162,26 @@ function Composer({
}
return (
<div
className="rounded-3xl border shadow-sm transition-shadow focus-within:shadow-md"
style={{
background: "var(--card)",
borderColor: "var(--border)",
backdropFilter: "blur(32px) saturate(180%)",
}}
>
<div className="flex flex-col gap-3 px-5 pt-4 pb-3">
<textarea
ref={taRef}
value={value}
onChange={(e) => onChange(e.target.value)}
onKeyDown={onKey}
placeholder={placeholder}
rows={2}
data-action="ai-composer-input"
className="min-h-[3.5rem] w-full resize-none bg-transparent text-base leading-relaxed outline-none placeholder:text-muted-foreground"
style={{ fontFamily: "var(--font-sans)" }}
/>
<div className="console-composer">
<div className="flex flex-col gap-3 px-4 pt-3 pb-3">
<div className="flex items-start gap-2">
<span
aria-hidden
className="console-mono select-none pt-[2px] text-[14px] font-semibold leading-[1.55] text-[var(--console-amber)]"
>
›_
</span>
<textarea
ref={taRef}
value={value}
onChange={(e) => onChange(e.target.value)}
onKeyDown={onKey}
placeholder={placeholder}
rows={2}
data-action="ai-composer-input"
className="min-h-[3.5rem] w-full resize-none bg-transparent outline-none"
/>
</div>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-1">
<button