CORE LORE / WIKI
SYS THE FOUNDRY
Updated 3 weeks ago
╔══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ S Y S _ T H E _ F O U N D R Y ║
║ Design Weapons Factory — Prompt-to-UI Generation Engine ║
║ ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ STATUS: LIVE v3 SESSION: S183/S186 ║
║ PORT: localhost:3000 STACK: React 19 + Vite 6 + TypeScript ║
╚══════════════════════════════════════════════════════════════════════════════╝
⛬ KID:CLAUDES_HOUSE:ACTIVE:THE_FOUNDRY|3.0:LIVE:2026-03-13:⌂ ⛬
────────────────────────────────────────────────────────────────────────────────
[ ❖ ] W H A T I T I S
────────────────────────────────────────────────────────────────────────────────
A browser-based UI component forge. Speak a desire; receive N aesthetic artifacts
in parallel. Each artifact is a complete, exportable HTML/React/CSS/JS component
with a distinct aesthetic identity, locked to a design specification.
Source: Forked from Flash UI (Google AI Studio, @ammaar). Upgraded across Sessions
163–166 with Kingdom DNA, multi-drone architecture, and Design Contracts.
Location: `~/Desktop/Claude's House/02_⚡_ACTIVE/THE_FOUNDRY/app/`
Dev server (v3): requires TWO processes:
1. `node foundry-terminal-server.js` → port 3100 (Claude terminal WS bridge)
2. `cd app && npm run dev` → localhost:3000
API key: in `app/.env` as `API_KEY=`
────────────────────────────────────────────────────────────────────────────────
[ ⚡ ] V 3 A R C H I T E C T U R E ( S 1 8 3 P I V O T )
────────────────────────────────────────────────────────────────────────────────
**Four modes:**
| Mode | Icon | Description |
|------|------|-------------|
| INQUISITOR | `+` PROJECT | AI-guided brief intake. Kingdom context pre-seeded. Identity Lock — no customer-service questions. |
| GENERATE | (default) | Design drone pipeline. Parallel artifact generation. |
| LAYOUT | `⛏` | Drag-to-draw canvas for spatial layout composition. |
| CLAUDE | `⛬` | Embedded Claude Code terminal (the S183 pivot). |
**Intelligence layer — embedded Claude terminal:**
- `foundry-terminal-server.js` — Node.js server, spawns `claude` CLI via `node-pty`, exposes WebSocket bridge on port 3100
- `FoundryTerminal.tsx` — xterm.js component in React cockpit; connects to WS port 3100
- React becomes cockpit display; Claude terminal is the intelligence layer
- `THE_FOUNDRY/CLAUDE.md` — THE CRITICAL PIECE — pre-loaded at terminal start; injects bot army contexts + Kingdom DNA + intel_feed.json API knowledge
- `intel_feed.json` — Claude writes directly to this file; React reads it for display in cockpit panels
- `npm install` deps: `xterm xterm-addon-fit node-pty ws`
**S183 INQUISITOR improvements:**
- Identity Lock — pre-known Kingdom data; no generic customer-service questions
- `KINGDOM_SEED_BRIEF` pre-populates brief state (mood/palette/fonts/brand/stack at 0.35 confidence)
- Opening message: "Kingdom context loaded. What are we forging?"
- Confidence strip hidden until first AI call
- Design: amber Intel Feed header, pulse dot, amber left-rail on INQUISITOR messages
────────────────────────────────────────────────────────────────────────────────
[ ⚡ ] G E N E R A T I O N P I P E L I N E ( G E N E R A T E M O D E )
────────────────────────────────────────────────────────────────────────────────
STEP 1 — DESIGN SPEC GENERATION (Gemini, blocking)
Input: user prompt + artifactCount + Kingdom DNA (if Kingdom Mode)
Prompt: returns JSON array of N DesignSpec objects:
{ name, palette{bg/primary/accent/surface}, typography{display/body/mono},
layout, effects, anti_patterns[] }
Kingdom Mode: AI specs merged with KINGDOM_DESIGN_SPEC (palette/typography/
anti_patterns locked; name/layout/effects kept from AI)
Fallback: FALLBACK_SPECS[0..N-1] if JSON parse fails
STEP 2 — PARALLEL ARTIFACT GENERATION (N concurrent streams)
Each call receives:
- DRONE_PERSONALITY (A: Industrial Brutalist / B: Void Minimalist /
C: Bio-Organic Gothic — cycles by index)
- DESIGN CONTRACT block (palette HEX, exact font specs, layout approach,
motion approach, anti_patterns list)
- KINGDOM_DNA (if Kingdom Mode — mood, texture, persona naming language)
- CONCEPTUAL DIRECTION (the artifact name)
- VISUAL EXECUTION RULES (materiality, typography, motion, layout, depth)
- Tech format (HTML / React / CSS / JS)
────────────────────────────────────────────────────────────────────────────────
[ 🜍 ] K E Y C O N S T A N T S ( constants.ts )
────────────────────────────────────────────────────────────────────────────────
DRONE_PERSONALITIES[3] — 3 aesthetic mind system prompts (A/B/C)
KINGDOM_DNA — Kingdom Brutalism grounding (mood, texture, naming)
KINGDOM_DESIGN_SPEC — Hard palette/typography/anti_pattern lock for Kingdom Mode
palette: background #030303 · primary #e8e0d0 · accent #ffcc00 · surface #0d0d0d
typography: IBM Plex Mono throughout (display: bold all-caps / body: 14px 1.6)
anti_patterns: 8 rules (no light bg / no radius > 2px / no gradients / IBM Plex Mono only
/ amber as signal only / glow not drop-shadow / amber+orchid accents only / no corporate clean)
FALLBACK_SPECS[3] — Per-drone fallback DesignSpecs if AI JSON fails
MODELS — gemini-3.1-pro-preview (PRO) / gemini-3-flash-preview (FLASH)
TECH_PROMPTS — HTML / React / CSS / vanilla-js format instructions
────────────────────────────────────────────────────────────────────────────────
[ 🜄 ] K E Y T Y P E S ( types.ts )
────────────────────────────────────────────────────────────────────────────────
DesignSpec {
name: string
palette: { background, primary, accent, surface } // all hex
typography: { display, body, mono? } // human-readable font specs
layout: string // one sentence
effects: string // one sentence
anti_patterns: string[] // explicit rules
}
Artifact {
id, styleName, html, status
designSpec?: DesignSpec // stored for retry/refine continuity
}
────────────────────────────────────────────────────────────────────────────────
[ ⚙ ] F E A T U R E S S H I P P E D
────────────────────────────────────────────────────────────────────────────────
PHASE 0 (S163-164):
- Kingdom Mode toggle (injects KINGDOM_DNA into all calls)
- Tech selector pills: HTML / React / CSS / JS
- Count selector [1][2][3] (adapts grid, persists localStorage)
- FORGING loading state (amber scanline + cycling status strings)
- Refine button (targeted single-artifact re-gen with typed instruction)
- Token counter (usageMetadata final chunk, amber badge display)
- Like button + Gallery drawer (localStorage)
- Session history (last 20, localStorage)
- Export artifact as .html
- Copy code with feedback
PHASE 1 (S165):
- DRONE_PERSONALITIES: 3 distinct aesthetic mind prompts per parallel call
- Result: genuinely divergent aesthetic outputs, not 1 voice with 3 labels
SESSION 165 REFACTOR:
- Variable shadowing fix (`placeholders` → `seedArtifacts`)
- Kingdom color audit: amber throughout, IBM Plex Mono, 4px radius
- Dead CSS removed, `artifactCount` dep bug fixed
DESIGN CONTRACTS (S166):
- DesignSpec type + storage on Artifact
- Name generation returns complete design systems not just names
- DESIGN CONTRACT injected into each artifact prompt
- KINGDOM_DESIGN_SPEC for locked Kingdom palette/typography
- FALLBACK_SPECS aligned to drone personalities
- Retry and Refine preserve designSpec through iterations
────────────────────────────────────────────────────────────────────────────────
[ 📦 ] P H A S E P L A N ( R E M A I N I N G )
────────────────────────────────────────────────────────────────────────────────
PHASE 2 — Design Intelligence Expansion:
Bundle curated style library (UI UX Pro Max inspiration — 67+ styles,
96+ palettes, 56+ font pairs). Domain-targeted lookup enriches DesignSpec
before generation. Kingdom variant seeded with Kingdom aesthetic data.
PHASE 3 — Multi-Model Pipeline:
Gemini (names/direction) + GPT-5.3-Codex (builds) + Claude Sonnet (audit).
Add OPENAI_API_KEY + ANTHROPIC_API_KEY to .env. ~$0.17/spin.
PHASE 4 — Style Presets:
Save/load named presets. Built-in Kingdom presets: VOID Brutalist · CRT Amber
· Night Shade · Sulphur Gothic · Orchid Signal.
PHASE 5 — Batch Factory:
N selector up to 15. Batched Promise.all. Export all as ZIP.
────────────────────────────────────────────────────────────────────────────────
[ ❖ ] C O M P E T I T I V E I N T E L
────────────────────────────────────────────────────────────────────────────────
v0 (Vercel): Claude Sonnet + AutoFix pipeline (93.87% error-free). Single output,
React+Tailwind locked. $1-10/gen since Jan 2026. No style presets.
Banani: 5 style variations/prompt. Static mockups, not live code.
UI UX Pro Max: Design intelligence skill (37K GitHub stars). BM25 search against
curated CSV (67 styles / 96 palettes / 56 font pairs). SKILL.md format.
Inspiration for our Design Contracts approach.
UNMAPPED TERRITORY: 3 simultaneous named aesthetic minds + design contracts
+ portable live code + Kingdom DNA. Nobody else has this stack.
────────────────────────────────────────────────────────────────────────────────
[ 🜚 ] F I L E S
────────────────────────────────────────────────────────────────────────────────
app/index.tsx — Main React app. Generation pipeline, all UI state.
app/constants.ts — DRONE_PERSONALITIES, KINGDOM_DNA, KINGDOM_DESIGN_SPEC,
FALLBACK_SPECS, MODELS, TECH_PROMPTS
app/types.ts — DesignSpec, Artifact, Session, all types
app/layout-constants.ts — Layout mode constants and spatial grid definitions
app/components/ — ArtifactCard, SideDrawer, DottedGlowBackground, Icons
app/components/FoundryTerminal.tsx — xterm.js embedded Claude terminal component
app/foundry-terminal-server.js — node-pty + WS server; spawns claude CLI on port 3100
app/intel_feed.json — Claude writes here; React reads for cockpit display
CLAUDE.md — THE CRITICAL PIECE — pre-load for embedded terminal; bot army contexts + Kingdom DNA + intel_feed API
SESSION_STATE.md — Full picture of current phase/state
BRIEF.md — Technical changelog and phase plan
NORTH_STAR.md — Vision, use cases, quality standard
UPGRADE_PROPOSALS.md — Opus drone proposals (S165)
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
🜚 SYS_THE_FOUNDRY // CORE LORE // ⛬⚚⛬ THE LAW STANDS.
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀