PID
Arc<AtomicI32>
` styled with `--card` bg, mono font,
small horizontal padding, 4px radius. Use for identifiers, file names,
function calls — anything verbatim from the system.
- Inline pills/chips: small rounded badges (8px radius), 11px uppercase
tracked, semi-transparent fill of the semantic color (use
`rgba(...,.15)` or `color-mix`). Status, role, timing tags.
## Mode-specific rules
### Dashboard
- Title left-aligned, h1 34px bold, subtitle line below in `--tx2` 14px
with bullet separators (`•`).
- Stat tiles: `--card` bg, 12px radius, 24×28px padding, **4px colored
accent bar** on the left edge via `::before` (inset 12px top/bottom,
not full-height).
- Bar row: 160px label column + flex track + colored fill with white
bold count inside; minimum fill 60px so single-digit counts read.
- Verdict block at the bottom: full-width tile, centered, "VERDICT"
header in `--tx3` tracked caps, body 18px bold.
### Timeline / pipeline
- Title centered, h1 30-34px bold, subtitle centered in `--tx2`.
- Each step row: a large colored circle (44-56px, white digit, bold,
centered) on the left; step card on the right with title + body.
- Step card: `--card` bg, 1px `--line` border, 12px radius, padding
18×22px. **No** left accent bar — the circle is the accent.
- Optional **timing pill** floated right of the step title:
`≤300ms` etc.
- Optional **callout band** inside a step (red-outlined warning, etc.):
`…`.
- Steps stacked vertically with 14-16px gap. Numbers run 1, 2, 3 — colors
cycle blue → cyan → green → amber → purple → red, etc.
- Optional **bottom row** of small uniform cards (4-up grid) for
shared-state / glossary items. Each is `--card` bg with title + mono
type signature in `--tx3`.
### Architecture diagram
- Title centered, h1 30-34px bold, subtitle centered.
- Either **two side-by-side panels** (`grid-template-columns:1fr 1fr`,
~24px gap) or **vertical tiers** (single column, with arrow rows
between).
- Panel: `--card` bg, 12px radius, 1px `--line` border, padding 22×24px.
Panel title in 18-20px bold; tag pills (e.g. "IN HARNESS") inline.
- Tier label above each tier: small uppercase tracked label like
`TIER 0 — COMMAND` in `--tx3`.
- **Connector arrow** between tiers/panels: a thin vertical line in
`--line` with a small label badge centered on it (e.g. "monitors &
restarts"). Use `.arrow` + `.arrow .label`.
- **Persona/role row** at the bottom of a tier: inline dot+name pills
(`Luna — CEO`).
- **Footer line** centered in `--tx3` 12px with em-dash separators.
## Skeleton 1 — Dashboard (calibration / scorecard)
```html
Title goes here
subtitle • metadata • n=… • source
strict accuracy
67%fully correct only (8 / 12)
directional accuracy
100%correct + partial, zero hard misses
score distribution (n=12)
verdict
One- or two-sentence call. Bold, centered, no period spam.
```
## Skeleton 2 — Timeline / pipeline (lifecycle, flow)
```html
Claude Code Subprocess Lifecycle
Persistent AI session managed via stdin/stdout JSON streaming
1
Spawn
Build claude command with all flags. Set PR_SET_PDEATHSIG
(Linux: child dies if parent dies). Capture stdin/stdout/stderr pipes.
2
Initialize
≤300ms
Send first message ("Session started/resumed"). Wait for System
message → validate tool list (security check). Wait for first Result.
4
Engine Processing
≤1s
Drains pending queue, formats as XML, sends to CC. If CC already
active → injects mid-turn via sync channel.
Owner interrupt (! prefix)
Bypasses all queues → direct stdin write to CC within 1 second.
5
Claude Code Turn
~2.5s
AI processes message, calls MCP tools (telegram_send_message,
database_query, get_image…), returns control action.
Shared State: Survives CC Restarts
PIDArc<AtomicI32>
HeartbeatArc<AtomicU64>
Inject SenderArc<Mutex<Sender>>
Pending InjectsArc<Mutex<Vec>>
```
## Skeleton 3 — Architecture diagram (tiers, panels, connectors)
```html
Claudir: Three-Tier Architecture
Separation of concerns by access level
tier 0 — command
🛡️Owner + Supervisor
unrestricted
Owner controls via Telegram (bot_xona / DMs). Supervisor
is raw Claude Code in terminal for manual intervention.
can start / stop / approve
tier 1 — operations
⚙️Mirzo
full permissions
CTO bot. Bash, Edit, Write via CC. Owner DMs only. Monitors Tier 2,
delegates to agent teams.
monitors & restarts
tier 2 — public-facing
🤖Luna & Dilya
sandboxed
Public chatbots. WebSearch only via CC. MCP tools validated by
harness. No code execution.
Luna — CEO
Dilya — Newcomer
```
## Don'ts
- Don't use external fonts/CSS/JS — network is blocked. System fonts only.
- Don't use multiple accent colors per tile/card/step. One semantic
color, one job.
- Don't add gradients or shadows beyond what's in the skeleton, or emoji
decoration in body text. Emoji icons in panel titles are OK.
- Don't write headers as ``/`` for sections. Use `.sec` (or
`.head h1` for centered diagram titles).
- Don't omit units on numbers. `67%`, `≤300ms`, never bare.
- Don't mix layout modes in one render — pick dashboard, timeline, or
diagram and commit.
- Don't repeat the calibration colors when the content suggests
pipeline ordering — for sequences use the cycle blue → cyan → green
→ amber → purple → red.