← Back to Style Guides
Design System Spec v3.1

Terminal 2031

The Neural Shell — An Agent Orchestration Console

The terminal stopped being a command runner years ago. In 2031, it is a supervision interface — a cockpit where human operators delegate tasks to autonomous agents, approve multi-step plans, and audit every action through provenance chains. Color encodes state, not style. Every glow, badge, and border carries operational meaning in a world where traceability, reproducibility, and safe delegation are the foundational pillars of the developer experience.

Section 01

Color Palette

In the Neural Shell, color is never decorative. Every hue maps to a semantic state. Gold means a human authored it. Teal means an agent produced it. Purple means something is still being reasoned about. Misreading a color should be as alarming as misreading an instrument in a cockpit.

Background Layer

--void #08080f Deep background — the bottomless dark beneath all surfaces
--surface #10101c Panel surface — primary content containers
--elevated #181828 Raised panels — modals, popovers, floating layers
--glass rgba(16,16,28,0.72) Frosted glass — overlays with backdrop blur

Semantic States

--human #d4a44c Human input — you typed this, you own this
--agent #00d4b1 Agent output — an AI produced this action or text
--thinking #9b6dff Processing — the agent is reasoning, not yet committed
--safe #34d399 Executed safely — sandboxed and verified
--caution #fbbf24 Needs approval — dry-run pending human sign-off
--danger #f43f5e Error or rollback — something failed or was reverted
--info #3a8fff Informational — links, references, neutral metadata

Text Hierarchy

--text-primary #e0e0ef Main text — commands, output, labels
--text-secondary #8888a8 Secondary text — descriptions, timestamps
--text-muted #4a4a6a Dim text — disabled controls, ghost labels

Borders

--border-dim rgba(255,255,255,0.08) Hairline borders — subtle panel edges
--border-glow rgba(0,212,177,0.3) Active borders — focused or agent-active elements
Section 02

Typography

JetBrains Mono is the cockpit instrument face — it renders commands, code, labels, headers, and every surface you interact with. Inter is reserved exclusively for long-form prose: the explanatory paragraphs where an agent walks you through its reasoning. The distinction is deliberate: mono means structure, sans means narrative.

Section Header — JetBrains Mono 700 / 22px / uppercase / 0.06em
EXECUTION CONTEXT
font-weight: 700 · font-size: 22px · letter-spacing: 0.06em · text-transform: uppercase
Subsection Header — JetBrains Mono 600 / 16px / uppercase / 0.08em
Permission Scope
font-weight: 600 · font-size: 16px · letter-spacing: 0.08em · text-transform: uppercase
Command / Code — JetBrains Mono 400 / 14px
agent run --sandbox --approve-plan "refactor auth module to use OIDC"
font-weight: 400 · font-size: 14px · line-height: 1.65
Inline Code — JetBrains Mono 500 / 13px / agent-colored
The agent modified src/auth/provider.ts and ran 47 tests.
font-weight: 500 · font-size: 13px · background: rgba(0,212,177,0.1) · padding: 2px 6px
Label / Caption — JetBrains Mono 500 / 11px / uppercase / 0.15em
Execution Trace • 3 steps • 1.2s elapsed
font-weight: 500 · font-size: 11px · letter-spacing: 0.15em · text-transform: uppercase
AI Explanation Prose — Inter 400 / 15px
I refactored the authentication module to use OpenID Connect instead of the legacy session-cookie approach. This involved updating the provider abstraction in auth/provider.ts, adding JWKS key rotation support, and migrating 12 route handlers to validate bearer tokens. All existing tests pass, and I added 8 new integration tests for the token refresh flow.
font-family: Inter · font-weight: 400 · font-size: 15px · line-height: 1.7
Streaming Agent Output — with cursor
Analyzing dependency graph for circular imports
Append ▋ with step-end blink animation at 0.8s

Human vs. Agent Voice

▶ Human Prompt

refactor the payment service to use idempotency keys, make sure we don't break the webhook handler, and add retry logic for Stripe API timeouts

◆ Agent Response

I'll break this into three steps. First, I'll add an idempotency key column to the transactions table and update the PaymentService class. Then I'll modify the webhook handler to check for duplicate event IDs before processing. Finally, I'll wrap all Stripe API calls in an exponential backoff retry with a 3-attempt limit. I'll run this in sandbox mode first so you can review the plan.

Section 03

Spacing Scale

A strict 4px base grid governs all spacing. Ten named tokens cover everything from inline padding to section margins. Consistency in spacing is how the console maintains visual hierarchy even as agent output streams in unpredictably.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
--space-10
128px
Section 04

Buttons

Buttons in the Neural Shell are verbs with consequences. The primary action is always agent-colored because execution is delegation. Approve, caution, and danger map to the same semantic palette that governs the entire console. A red button always means rollback or denial. An amber button always means "show me first, don't do it yet."

Variants

Disabled States

Sizes

Approval Flow (Button Group)

The canonical approval triad. Dry Run lets you preview, Approve commits, Deny rejects. These always appear together when an agent requests permission to execute a multi-step plan.

Execution State Chips

Provenance badges attached to every agent output block. They tell you at a glance what actually happened.

Dry-Run Sandboxed Approved Executed Rolled-Back
Section 05

Forms & Inputs

Forms in the Neural Shell configure agent permissions, scope access boundaries, and filter execution logs. Every input has a terminal feel — monospaced, dark-field, minimal chrome. Focus states glow agent-teal to signal the console is listening.

Permission Scoping

Identifier used in audit logs and provenance chains.

Glob patterns. Prefix with ! to deny. One per line.

Agent Settings

⌕
Auto-approve safe operations

Skip approval for read-only and formatting actions.

Sandbox mode

Run all file mutations in an isolated copy before applying.

Provenance logging

Attach agent ID and reasoning trace to every output block.

Stream reasoning

Show the agent's chain-of-thought while it works.

Maximum wall-clock time before the agent is terminated.

Section 06

Cards — Agent Output Blocks

The card system encodes provenance into visual structure. Every output block tells you who created it, when, under what permissions, and whether it was sandboxed, approved, or rolled back. The left border color is the fastest signal: gold is human, teal is agent, purple is thinking, red is failure.

Human Command Block

matt@neural-shell · 2031-09-14 08:41:03 UTC
$ claude "refactor auth middleware to use OIDC with PKCE flow"

Agent Response Block

claude-code-v4 · opus-4-2031-09 · 2031-09-14 08:41:07 UTC · Sandboxed

I'll refactor the authentication middleware from session-cookie auth to OpenID Connect with PKCE. This involves three files: the provider abstraction, the route middleware, and the token refresh handler. Here is the updated provider:

export class OIDCProvider { private discoveryUrl: string; private codeVerifier: string; async authenticate(redirectUri: string) { const challenge = await this.generatePKCE(); return this.buildAuthUrl(challenge, redirectUri); } }
Confidence: 0.82–0.91 (3 sources) Sandboxed

Thinking Block (Collapsible)

Reasoning Trace — 4 steps — 2.1s
1. The user wants OIDC with PKCE — that means authorization code flow with a code verifier instead of client secrets. This is the recommended flow for public clients.
2. The existing auth middleware uses express-session with cookie-based sessions. I need to replace the session check with a bearer token validation against the JWKS endpoint.
3. I should keep the session store for backward compatibility during migration. Adding a feature flag to switch between old and new auth would be safest.
4. The token refresh handler needs exponential backoff — the identity provider rate-limits token endpoints at 10 req/s.

Multi-Agent Panel

Parallel Execution — 3 agents · 2031-09-14 08:41:12 UTC
  • refactor-01 Executing Rewriting auth/provider.ts to OIDCProvider class
  • test-gen-02 Thinking Planning integration tests for token refresh flow
  • migrate-03 Done Updated 12 route handlers to validate bearer tokens

Error / Rollback Block

⚠ Execution Failed — TypeError in auth/provider.ts:47

The PKCE code verifier was not persisted between the authorization request and the token exchange callback. The this.codeVerifier property was undefined at line 47. Rolling back to the pre-refactor state.

@@ auth/provider.ts @@ - const token = await this.exchange(code, this.codeVerifier); + const verifier = await this.store.get(sessionId, 'pkce_verifier'); + const token = await this.exchange(code, verifier); return this.validateToken(token);
Rolled Back Reverted to commit a3f7c21 — 3 files restored
Section 07

Execution Safety States

Every agent action follows a lifecycle. The pipeline visualization shows where an action is in its journey from proposal to verification. Alternative failure paths branch off at the point of rejection or error. The safety dashboard summarizes the current session state at a glance.

Success Path

Proposed
Dry-Run
Approved
Executed
Verified

Denial Path

Proposed
Dry-Run
Denied

Rollback Path

Executed
Rolled-Back

Safety Dashboard

Files Modified 7
Commands Run 23
Permission Level Sandbox
Sandbox Status Active
Rollback Available Yes
Approval Gates 2 pending
Section 08

Trust & Provenance

Provenance is a first-class visual layer in the Neural Shell. Every output carries metadata about who produced it, under what permissions, and what changed. Trust badges encode verification status. The audit trail records the complete history of a session.

Provenance Header Component

Who claude-code-v4 (agent)
Action Modified auth/provider.ts, auth/middleware.ts, auth/refresh.ts
When 2031-09-14 08:41:07 UTC (4.2s elapsed)
Permissions Sandbox — file read/write, shell (sandboxed)
Changed +147 lines, -89 lines across 3 files

Trust Badge System

Verified Unverified Untrusted System

Audit Trail

08:41:03 matt Submitted prompt: "refactor auth middleware to use OIDC with PKCE flow" Sent
08:41:04 system Spawned agent claude-code-v4 with sandbox permissions OK
08:41:05 claude-v4 Read 3 files: auth/provider.ts, auth/middleware.ts, auth/refresh.ts OK
08:41:07 claude-v4 Wrote auth/provider.ts (+92 -47 lines) in sandbox OK
08:41:08 claude-v4 Ran npm test in sandbox — 47/47 passing Pass
08:41:09 system Awaiting human approval to apply sandbox changes to workspace Pending

Permission Scope

Read
Write
Execute
Network
Git Push
Secrets
Section 09

Terminal Components

The interactive terminal elements that make up the Neural Shell experience. The command input, streaming output, predictive suggestions, and status bar form the core interaction loop between human operator and agent.

Command Input

❯

Streaming Output

I'll start by adding an idempotency key column to the transactions table. The migration is straightforward — a new UUID column with a unique index. Then I'll update the PaymentService class to generate and attach keys to every Stripe API call

Predictive Suggestion

❯ run tests for auth module --coverage --watch

Numbered Output

1 import { OIDCProvider } from './oidc-provider';
2 import { TokenStore } from './token-store';
3
4 export const authMiddleware = async (req, res, next) => {
5 const token = req.headers.authorization?.split(' ')[1];
6 if (!token) return res.status(401).json({ error: 'Unauthorized' });
7 const claims = await provider.verify(token);
8 req.user = claims;
9 next();
10 };

Status Bar

Agent: claude-code-v4
Mode: execute
Tokens: 14,207
Elapsed: 4.2s
Sandbox: on