Sibyl Dashboard, Canonical Component Styleguide

Action toolbar - CANONICAL page-level action bar

The horizontal action bar at the top of a page, Back on the left, a vertical divider, then per-record actions grouped by kind, with an optional utility affordance on the right.

What

A single .card row of outline buttons with a flat single-color Lucide SVG icon on each. Layout: Back (blue outline, ←) → a .button-toolbar-divider (1px vertical line) → action buttons grouped by kind in fixed order (lifecycle → note → investigation → read) → optional right-side affordance (Generate summary, Export, etc.). The Back divider is the only inter-button separator; kind groups inside the action span carry no visible divider.

When

Top of a page that operates on a single record (item detail, schedule detail, dig detail).

Placement

Default: directly below the page title / breadcrumb header. If the page has tabs, the toolbar lives under the tab row instead, it becomes the first thing the operator sees after switching tabs. That way, each tab can swap in its own action set (a Notes tab surfaces note actions, a Digs tab surfaces investigation actions, etc.) without making the toolbar above the tabs choose a one-size-fits-all action list.

When not

List/index pages → no toolbar (those use header-row buttons via the breadcrumb header's right-side action slot). Modals → use a .button-row.spread footer. Per-row table actions → see Tables → Row actions.

Sizing

card padding 10px 14px · margin-bottom 12px · flex, align-items center, flex-wrap wrap, gap 6px · each button padding 6px 14px · radius 4px · 12px font · transparent background, 1px colored border, color matches border (outline-only). Icons use .icon (14px, flat single-color Lucide SVG, stroke="currentColor" so they inherit the button's kind color). The Back divider is .button-toolbar-divider (1px × 22px, var(--border)).

Variants

Pick whatever color reads as appropriate for the action, both the role-based palette (.primary blue, .danger red, .ghost muted) and raw color tokens (var(--blue)/--green/--yellow/--red/--muted/--text) are fair game. One useful default scheme, used in the example below and in item-detail.js, keys color by action kind:

lifecycle → var(--blue), Back, Triage, Start, Block, Unblock, Defer, Close
note → var(--text), Add note, Mark notes seen, Mark notes processed
investigation → var(--green), Spawn dig, Synthesize, Re-triage, Replay probe
read → var(--muted), Copy link, Open in CLI, Dependent items, Probe target

A right-side affordance (Generate summary, Regenerate summary…) typically carries the muted-border style of a disabled-ish read button when inactive, and a stronger color when active. In-flight states render disabled with cursor:not-allowed and a "doing X…" label.

Do

✓ Always lead with Back followed by a .button-toolbar-divider · use a flat Lucide SVG on every button · use outline style (transparent bg + colored border + colored text) for every button in the bar

Don't

✗ Use emoji icons (⛔ ✅ 📝 🔬 🔗 etc.) instead of flat SVG icons

Canonical, supersedes: ad-hoc per-page top-of-detail action rows; emoji-prefixed action buttons. Live in sibyl-reviews/src/public/pages/item-detail.js:_idRenderActionBarCard (the Back / Block / Defer / Close / Add note / … / Generate summary bar at the top of every item-detail page).

<div class="card" style="padding:10px 14px;margin-bottom:12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap">
  <button style="…outline blue…"><svg class="icon" …>…arrow-left…</svg> Back</button>
  <span class="button-toolbar-divider"></span>
  <!-- lifecycle group (blue) -->
  <button style="…outline blue…"><svg class="icon" …>…ban…</svg> Block</button>
  <button style="…outline blue…"><svg class="icon" …>…pause…</svg> Defer</button>
  <button style="…outline blue…"><svg class="icon" …>…check…</svg> Close</button>
  <!-- note group (text color) -->
  <button style="…outline text…"><svg class="icon" …>…file-plus…</svg> Add note</button>
  <!-- investigation group (green) -->
  <button style="…outline green…"><svg class="icon" …>…flask…</svg> Spawn dig</button>
  <!-- read group (muted) -->
  <button style="…outline muted…"><svg class="icon" …>…link…</svg> Copy link</button>
  <!-- right-side affordance -->
  <button style="…outline muted…">Generate summary</button>
</div>

Back sits alone on the left, separated by a 1px .button-toolbar-divider. The right-side Generate summary affordance uses the muted-border treatment until a summary exists.

Avatar / user chip

28px circular identity chip, photo if avatar_path is set, otherwise an initial on var(--blue).

What: 28px border-radius:50% chip. Photo variant: <img> with object-fit:cover. Initial fallback: uppercase first letter on a solid var(--blue) background, white text, centered.
Seen at: sidebar user block index.html:212; Users admin users.js:121–124, users.js:214.

J A Jjdog@sibyl.llc

Batch action bar

Header strip above a table that appears only when one or more checkbox-selected rows exist, shows a contextual action button.

What: Flex row, initially display:none; flips to display:flex when selection count > 0. Carries action button(s) labeled with the count ("Investigate Selected (3)").
Seen at: whale-watcher.js:599, whale-watcher.js:766, whale-watcher.js:1469.
Distinct from: The action toolbar (page-level, always present); this bar is table-local and selection-driven.

3 selected

Breadcrumb page header - CANONICAL page header

Every page's header, breadcrumb + spacer + right-aligned actions, in one .section-header row.

What: The full top-of-page row: section icon + name ▸ page icon + name on the left, a .spacer, then any right-aligned actions (mode-switch, buttons), all inside one .section-header flex row. Emoji icons (wayfinding).
When: Top of every page. The section crumb = the sidebar section; page crumb = the sidebar nav item, using the same emoji as the sidebar. Use the .spacer to push actions right, never margin-left:auto on the action itself.
When not: Never use a bare <h2> page title anymore, that is the superseded pattern.
Navigation: Every crumb above the current page is a clickable link (<a class="crumb …" href="…">) that navigates up the hierarchy, clicking the section crumb returns to that section's landing page, clicking an intermediate crumb returns to that level. The current-page crumb (the rightmost one) is a plain <span> with no href, you're already there.
Sizing: Row: flex, align-items center, gap 12px, margin-bottom 12px. Crumb text 14px/600 · gap 8px · chevron › muted/400. Link crumbs: text-decoration:none, inherit their .crumb-section / .crumb-page color, switch to var(--text) on hover.
Variants: .crumb-section (muted) · .crumb-page (full-strength text) · .crumb-icon emoji. Optional right-side action group after the .spacer.
Do: ✓ Reuse the exact sidebar emoji for each crumb · one .spacer separates left/right groups · render every ancestor crumb as a working link, not a styled span
Don't: ✗ Put SVG icons in crumbs (emoji only) · inline margin-top overrides on the row (use the default) · leave the current-page crumb as a link to itself (it's plain text)

Canonical, supersedes: .section-header > h2 page titles in ~36 files (e.g. status.js:67, overview.js:536, advanced-analytics.js:66); 20+ inline style="margin-top:…" overrides on .section-header; margin-left:auto on .mode-switch (kpi.js:1535). Already live on overview.js/strategy-hub.js.

<div class="section-header">
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <a class="crumb crumb-section" href="/trading"><span class="crumb-icon">📈</span>Trading</a>
    <span class="crumb-sep">›</span>
    <span class="crumb crumb-page"><span class="crumb-icon">🏠</span>Overview</span>
  </nav>
  <span class="spacer"></span>
  <!-- right-side actions (buttons, mode-switch) go here when the page has them -->
  <button class="primary"><svg class="icon" …/> Add</button>
</div>

Hover the muted Trading crumb, it's a working link back to the section landing. The full-strength Overview crumb on the right is plain text because that's the current page.

Buttons - role-based + Lucide SVG

Outline-only, semantic color roles, flat single-color SVG icon on the left.

What: Buttons grouped in .button-row (or .button-toolbar for detail-page action bars). Color = meaning.
When: green submit/.success = commit (Save/Run) · blue .primary = forward/additive (Add/Open) · default = secondary (Refresh) · red .danger = destructive (Delete/Cancel) · ghost = reversible tertiary (Archive).
When not: Never solid-fill buttons; never inline-styled buttons; never the old .btn-action or per-module button DSLs.
Sizing: padding 4px 11px · radius 5px · 12px/500 · icon 14px inheriting currentColor · 8px gap in a row.
Variants: .button-row.spread (secondary left / primary right) · .button-row.right · .button-toolbar + .button-toolbar-divider.
Do: ✓ Icon left via renderIcon(); pick role by intent
Don't: ✗ background:var(--blue);color:#fff solid buttons (7 files do this)

Canonical, supersedes: ~33 files of inline-styled buttons, the undefined .btn/.btn-sm usage, and the 7 private _wwBtn* constants in whale-watcher.js:219.

<div class="button-row">
  <button type="submit">${renderIcon('save')} Save</button>
  <button class="primary">${renderIcon('plus')} Add</button>
  <button class="danger">${renderIcon('trash')} Delete</button>
  <button class="ghost">${renderIcon('archive')} Archive</button>
</div>

Cards

General-purpose container for grouped content.

What: .card, surface panel with border + radius + padding. Optional .card-header / .card-footer slots.
When: Group related content where a full-width table is overkill; KPI tiles via the .label/.value/.sub children.
When not: Full-width tabular data → use .table-wrap. A grid of metrics → use the .stats-grid.
Sizing: padding 16px · radius 8px · border 1px var(--border) · bg var(--surface). In a grid use minmax(240px,1fr) columns, 12px gap.
Variants: .card-header (flex title/action row) · .card-footer (top-bordered action row) · .label/.value/.sub KPI children.
Do: ✓ Use .card for any bordered surface panel
Don't: ✗ Hand-roll style="background:var(--surface);border:1px solid var(--border);border-radius:8px"

Canonical, supersedes: ~15 ad-hoc inline panel divs (whale-watcher.js:891, users.js:687, platform-config.js:218, backtest.js:614).

<div class="card">
  <div class="card-header"><h3>Title</h3><span class="pill yes">active</span></div>
  <div class="label">Net P&L</div><div class="value">$12,480</div>
</div>

Bare card, surface, border, padding.

With header

active

Net P&L

$12,480

last 24h

With footer

Body content.

Charts (Chart.js)

Chart.js conventions: dark theme, disabled legend by default, custom tooltips, fixed-height container. Heavy usage across 20+ pages but no canonical spec yet.

Types in use: line, bar (stacked + grouped), scatter / bubble, doughnut.
Conventions: Dark canvas; grid lines = var(--border); ticks = var(--muted); legend usually disabled; tooltip callbacks.label overridden for unit-aware formatting; canvas wrapped in a fixed-height position:relative div.
Seen at: line advanced-analytics.js:415; bar advanced-analytics.js:446; doughnut advanced-analytics.js:543; bubble advanced-analytics.js:795, signal-quality.js:271.

[Chart.js canvas placeholder, fixed-height container, dark theme, disabled legend]

Live preview omitted; the styleguide page doesn't bundle Chart.js. Add a working preview once we settle on the canonical chart-options blob.

Code & markdown surfaces

Inline <code>, monospace <pre> blocks, and the .tc-md wrapper used to render LLM markdown.

Inline code: <code> for config keys, parameter names, short literal values. Seen at strategy.js:49, backtest.js:899.
Pre block: Multi-line output (raw JSON, smoke-test logs), dark bordered surface, Courier New monospace, sometimes with a copy-to-clipboard affordance. Seen at smoke-test.js:309, strategy-analyst.js:1161.
Markdown wrapper: .tc-md = marked.parse() output with scoped overrides for blockquote, code, pre, details/summary, and heading sizes. Used for LLM-produced content. Seen at triage-console.js:244–277, item-detail.js:3236, claude-sessions.js:68.

Inline: tune HOUR_WEIGHT_PROFILE via the COE.

{
  "change_kind": "synthesis_decision",
  "confidence_band": "high",
  "scope": "SHARED"
}

Collapsible content sections

Native <details>/<summary> blocks used outside the sidebar, for collapsible logs, hidden detail panels, expert-mode toggles.

What: Native HTML disclosure block. Sometimes styled with a chevron and inner CSS scope; sometimes bare. The sidebar nav already uses this internally, but standalone content usage is a separate pattern.
Seen at: crypto-probe.js:1443, tuning-center.js:419, whale-watcher.js:975, triage-console.js:1757.

▶ Expert-only · raw decision brief JSON

          Click the summary to expand/collapse this content.
        

Color tokens

The full palette. Always use the CSS variable, never a raw hex.

What: The dashboard's design tokens, defined on :root. Values here are aligned 1:1 with the live app shell.
When: Every color reference in CSS or inline styles.
When not: Never hardcode hex (e.g. #3fb950), it breaks theming and diverges over time.
Variants: --surface/--blue/--green/--yellow/--red are the canonical names; --panel/--accent/--ok/--warn/--err are legacy aliases (same values) kept only for ported CSS.
Do: ✓ color: var(--green)
Don't: ✗ color: #3fb950

Canonical, supersedes: ~40 hardcoded hex values in whale-watcher.js (#3fb950/#f85149/#d29922/#f0883e) and scattered inline colors.

--bg #0d1117 --surface #161b22 --text #e6edf3 --muted #8b949e --blue #58a6ff --green #3fb950 --yellow #d29922 --red #f85149

Confirmation gate

Native confirm('…') guard used uniformly before destructive operations, delete, promote, rollback, mass-approve.

What: One-line guard: if (!confirm('Delete user X? This cannot be undone.')) return;. Message phrasing pattern: action verb + object + consequence note.
Seen at: platform-config.js:390, whale-watcher.js:1889, users.js:604, regime-tuner.js:431 (15+ call sites total).
Distinct from: The custom modal (used for multi-step interactions); native confirm is the canonical lower-fi guard for "are you sure?" before destructive verbs.

Example call sites (not rendered, confirm() is a browser dialog):

if (!confirm('Delete user ' + name + '? This cannot be undone.')) return;
if (!confirm('Promote whale candidate ' + id + ' to live tracking?')) return;
if (!confirm('Roll back to revision ' + rev + '? Newer changes will be lost.')) return;

Expandable table rows

Click a row to insert a full-width colspan detail row below it; click again to collapse. Toggle state tracked in a JS Set.

What: Row gets a chevron/caret cell; click toggles insertion of an immediately-following <tr> with one <td colspan=N> holding the detail panel.
Seen at: advanced-analytics.js:1215, overview.js:196, optimization-lab.js:1034, calibration.js:519.
Distinct from: The drilldown-into-detail-page navigation (which jumps to a new route); expandable rows keep the operator on the same page.

	Market	Edge	Status
▾	BTC > $80k EOD	4.1%	open
Detail panel, last 5 fills, slippage stats, source attribution. Closes when the parent row's caret is clicked again.
▸	ETH > $4k EOD	2.3%	SIM
▸	Fed cut March	-1.0%	skipped

Forms

One canonical input/select treatment, surface bg, border, 4px radius. Gallery below shows every common control so we can iterate on what stays / changes.

What: Text-class inputs (text, number, search, email, date…), <textarea>, <select>, plus the native widgets (checkbox, radio, range, file, color). Text/select fields share one treatment: var(--surface) background, var(--border) 1px border, 4px radius, 12px text. Native widgets keep their browser-default chrome (checkbox/radio dots, range track, file button) and inherit the page font.
When: All form controls. One token only for field backgrounds, var(--surface).
When not: Don't mix --bg/--bg2 backgrounds (today three different tokens are used interchangeably).
Sizing: text/select padding 4px 8px · radius 4px · 12px text · label 11px muted uppercase above the field with 4px gap · helper/error text 11px below the field with 4px gap. Textareas: same field treatment + min-height: 80px and resize:vertical only.
States: :disabled drops opacity to ~.55 and switches cursor to not-allowed; readonly keeps full opacity but removes the focus ring. aria-invalid="true" swaps the border to var(--red). Required fields lead the label with an asterisk styled color:var(--red).
Do: ✓ background:var(--surface);border:1px solid var(--border) for every text and select field · keep labels on their own line above the field (not inline) · use the helper-text slot below the field for unit hints / format examples
Don't: ✗ --bg/--bg2/--fg field tokens · floating labels · inline placeholder-as-label (placeholders are examples, not labels)

Canonical, supersedes: 3 select background tokens used interchangeably (--surface vs --bg vs --bg2); the backtest-scoped .bt-form-input leaked into users.js.

Text input

Text input, filled

Required field Asterisk in the label · validate on submit (not on blur).

Number input

Search input type="search" · browser clear-X · debounce in the handler.

Email input

URL input

Password input

Date input

Time input

Prefix · USD

$

Prefix · units

min

Textarea

Select, single

Select, with optgroups

Select, multiple

Checkbox group Include outcome checks Show closed items Auto-refresh every 30s

Radio group High priority Medium priority Low priority

Toggle switch (off) Enable auto-curate stage 0

Toggle switch (on) Enable auto-curate stage 1

Segmented (3-way)

Range slider, 75%

File input

Color picker

Disabled input

Read-only input

Error state Enter a valid email address.

With helper text Threshold in percent (0–100). Defaults to 2.5%.

Gallery is a sandbox, every variant is a candidate, not a commitment. Call out which look right, which to change, and which to drop.

Inline divider

1px vertical rule for separating groups of inline controls, used in filter bars, toolbars, header strips.

What: <span style="width:1px;height:16px;background:var(--border);margin:0 8px">, or the named .button-toolbar-divider already in style.css for the action toolbar.
Seen at: whale-watcher.js:581, whale-watcher.js:588, whale-watcher.js:595; .button-toolbar-divider usage in the action toolbar.
Open question: Two parallel implementations (inline span vs .button-toolbar-divider class), pick one canonical form during review.

7d · 30d SIM · LIVE All instances

Layout grids

.two-col / .three-col / .cards-N, the responsive grid wrappers that size cards across a page.

What: .two-col is a 1fr 1fr grid (gap 12px) that collapses to 1 column on narrow viewports; .three-col is 1fr 1fr 1fr; .cards-2 through .cards-6 are column-count modifiers on the .cards grid.
Seen at: strategy.js:151, backtest.js:603, kpi.js:211, whale-watcher.js:2697 (two-col); advanced-analytics.js:971 (three-col).

Win Rate

61.4%

Edge

3.2%

Col 1

Col 2

Col 3

Loading & empty states

One loading pattern, one empty pattern, no more 3-way split.

What: Loading: .loading-state + .spinner. Empty: .empty.
When: Loading while a page/section fetches; empty when a fetch returns no rows.
When not: Never use .empty as a loading state; never raw inline padding loaders.
Sizing: spinner 22px · loading-state column, 14px gap, 80px/40px padding, muted 13px · empty 24px padding centered muted.
Do: ✓ .loading-state+.spinner for every loader
Don't: ✗ class="loading", .empty-state, or inline padding:40px loaders

Canonical, supersedes: .loading plain text (6 files), .empty misused as loader (ab-testing.js:53, regime-tuner.js:602), undefined .empty-state (whale-watcher.js:680), inline loaders (settings.js:184).

Loading…

No results for this filter.

Modal

One overlay pattern, supersedes 5 hand-rolled variants with a z-index collision.

What: .modal-backdrop (fixed, centered, z-index 1000) wrapping a .modal panel with a .modal-header.
When: Focused confirm/edit flows that must block the page. Backdrop click + a ghost Close button both dismiss.
When not: Non-blocking feedback → toast. Inline edits → in-place form.
Sizing: panel min(440px,92vw) · max-height 86vh scroll · padding 20px 24px · radius 8px · backdrop rgba(0,0,0,.6) · z-index 1000 (always).
Do: ✓ One z-index (1000) and inset:0 backdrop
Don't: ✗ Per-page modals with ad-hoc z-index (e.g. 9999)

Canonical, supersedes: 5 hand-rolled modals (app.js:887, users.js:683, data-management.js:1907 [z-index 9999], whale-watcher.js:2801).

Mode switch

Binary or 2–3-way pill toggle for an inline state choice, distinct from tabs (page navigation) and pill-filter rows (category narrowing).

What: Button group inside a bordered rounded container; the active button gets background:var(--blue) and white text.
Seen at: overview.js:542, kpi.js:151, settlement.js:112, whale-watcher.js:2104, positions.js:33.
Distinct from: Tabs switch views; mode-switch flips a single parameter (e.g. ROI vs P&L, SIM vs LIVE, 7d vs 30d).

Nav count badge

Sidebar rollup count: <span data-count="N"> hidden when zero; section-level summary sums all descendant counts.

What: Small numeric chip next to a sidebar nav item. CSS hides at data-count="0". Section-level rollup is computed by app.js on render.
Seen at: definition at index.html:129–137, rollup at app.js:1010–1054, source at status.js:158–159.
Distinct from: The top-bar critical-alert badge (a separate global widget).

🔍 Reviews 12 ⏰ Revisits 3 💬 Chats

Numeric formatting

Cross-page conventions for displaying numbers, relative time, and signed deltas. Bundles three closely-related patterns the audit flagged.

Monospace value: font-family:'Courier New',monospace on headline numbers (KPI tiles, table-cell amounts) so digits align across rows.
Time-relative labels: Standardized "Xs ago" / "Xm ago" / "Xh ago" / "Xd Xh ago" via global helpers in app.js:106–131 (fmtAge, fmtAgo, fmtDuration). Reviews has a parallel local variant at item-detail.js:1069.
Signed-delta coloring: Positive = leading + + var(--green); negative = var(--red); neutral = var(--muted). Applied to ROI / P&L / win-rate deltas. Seen at kpi.js:1264, strategy-lab.js:591–601, backtest.js:648–651.

$12,480.55 3m ago +4.1% -2.3% ±0.0%

Pill-filter row

Clickable pill row for one-axis filtering, via renderCategoryBar() in _shared.js.

What: A row of .pill-filter toggles; .active marks the current selection.
When: Category/segment filtering above a table or chart. Prefer the shared renderCategoryBar() helper for category fields.
When not: Non-interactive status → .pill. Many options / free text → a <select>.
Sizing: padding 3px 10px · radius 12px · 11px · 6px gap between pills, 12px margin-bottom on the row.
Do: ✓ Reuse renderCategoryBar() output shape
Don't: ✗ Re-implement a pill-filter row inline per page

Canonical, supersedes: 6+ hand-rolled pill-filter rows (calibration.js:400, stock-probe.js:182, profile-attribution.js:108).

All Crypto Weather Politics Sports

Pills & status badges

Compact inline status chips with semantic modifier classes.

What: .pill + a semantic modifier (.yes/.no/.sim/.live/.off and the .bt-* bet-type set).
When: Inline state/flags in tables, headers, list rows.
When not: Clickable filters → .pill-filter (next section), not .pill.
Sizing: padding 1px 7px · radius 10px · 11px/600. Tinted bg at ~15% alpha, solid token text color.
Variants: .yes green · .no red · .sim yellow · .live red · .off muted · .bt-* bet types.
Do: ✓ Pick the modifier by meaning, not color
Don't: ✗ Inline border-radius chip spans or a local _catPill copy

Canonical, supersedes: 41 inline chip spans (whale-watcher.js:115, users.js:139), the duplicated _catPill in kpi.js:116.

active failed SIM LIVE disabled

Progress bars

Two related patterns: a plain linear fill bar, and a composite label-+-bar-+-value score row.

Linear bar: 6–8px tall, var(--border) background, 3–4px radius, colored fill width:%. Used for score bars, coverage, AB-test progress, readiness scores. Seen at strategy.js:140, whale-watcher.js:207, advanced-analytics.js:1418, backtest.js:274.
Score-bar composite: Three-part flex row: fixed-width muted label → flex fill track + colored fill → right-aligned monospace numeric value. Seen at strategy.js:138–144, whale-watcher.js:207–225, advanced-analytics.js:1000.
Distinct from: The segmented bar inside segmented stat cards is a different pattern (multi-segment proportional).

Coverage · 72%

Regime confidence

88%

Signal quality

42%

Search + dropdown filter bar - CANONICAL multi-axis table filter

Horizontal toolbar combining free-text search with one or more single-select dropdowns, multi-axis filtering without consuming vertical real estate.

What: A .card row with: a type="search" input on the left (debounced, drives a q= query param), then one or more single-select <select> dropdowns whose default option is an icon-prefixed "All …" sentinel ("🏷️ All kinds", "🎯 All priorities").
When: Filtering a table where the operator wants to combine quick-typed text refinement (title / id / description) with structured dropdown narrowing (kind / priority / component / system). Each filter contributes one query parameter to the server-paged table below.
When not: Few mutually exclusive categories that should be one click → pill-filter row. No text dimension and only one or two booleans → an inline mode-switch.
Sizing: row card padding 12px · min-height 56px · 8px gap · flex-wrap · align-items center · search input 240px wide, 6px 10px padding · selects 6px padding · 12px font on every control · 4px radius · 1px border var(--border) · bg var(--bg) (NOT --surface) so controls read as inputs against the card.
Variants: Default sentinel options always lead with a category icon ("🏷️ All kinds", "🎯 All priorities", "📦 All components", "📋 All systems"). Per-option labels carry their own icon ("🔴 HIGH", "🐛 finding"). A boolean refinement always becomes its own two-option dropdown ("All / Only X"), never a trailing checkbox + label, which eats horizontal real estate for one on/off bit.
Do: ✓ Use type="search" (gets the browser clear-X for free) · debounce the input handler · icon-prefix every dropdown sentinel · keep all controls on one wrapping row
Don't: ✗ Stack the search above the dropdowns · drop a "Filter" submit button (filtering should be live) · use surface-colored controls (they blend into the card) · add a trailing checkbox + caption for a boolean filter (promote it to a 2-option dropdown instead)

Canonical, supersedes: ad-hoc per-page filter rows that mix label-above-input layouts with bare un-iconed selects. Live in sibyl-reviews/src/public/pages/triage-console.js (decisions / items / revisits sub-tabs all share this exact bar, see _tcRenderInboxDecisionsView).

<div class="card" style="padding:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:56px">
  <input type="search" placeholder="Search title, rationale, recommendation…"
         style="padding:6px 10px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;width:240px;font-size:12px">
  <select style="padding:6px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;font-size:12px" title="Item kind">
    <option>🏷️ All kinds</option>
    <option>🐛 finding</option>
    <option>📋 spec</option>
    <option>📡 probe</option>
  </select>
  <!-- additional dropdowns: priority, component, system… -->
</div>

Segmented stat cards - CANONICAL drill-through header row

Compact card showing a total, a proportional segmented bar, and a clickable bubble row that deep-links to a filtered table.

What: A .card with four stacked rows: title row (label on the left, total right-justified) → one-line muted caption → 8px segmented bar where each segment's width = its share of the total → wrap row of color-coded badge bubbles, one per segment, each clickable to jump to a pre-filtered view of the linked table.
When: Showing a population (open backlog, 24h activity, errors by class) AND letting the operator drill into any slice in one click. Two to four cards make a "command-center" header above a table.
When not: Single headline number → bare .card with .label/.value. 4–8 unrelated KPIs → the stat grid. Time-series → chart.
Sizing: card flex-basis 200–240px · padding 8px 12px · 6px gap between rows · label 10px uppercase muted with .04em tracking · total 12px/700 right-justified · caption 10px muted with margin-top:-4px · bar 8px tall, 4px radius, 1px border, var(--bg) fill behind segments · bubbles 2px 8px · 10px/600 · 10px radius · 6px gap.
Variants: Bar segment + bubble share one canonical palette per dimension (priority, kind, activity bucket). Bubbles carry a count prefix ("12 high") and an onclick that filters the linked table; zero-count bubbles stay clickable and jump to an empty filtered view (the affordance is the point).
Do: ✓ Right-justify the total on the label line · use one shared palette across bar + bubbles · keep the bar at exactly 8px tall
Don't: ✗ Pile the total on its own line · use different colors in the bar than in the bubbles · invent a third row of mini-numbers below the bubbles

Canonical, supersedes: 12-tile .stats-grid headers that flatten priority/kind into equal-weight boxes. Live in sibyl-reviews/src/public/pages/triage-console.js:_tcRenderInboxStats (above the Decisions table).

Open Items 87 total

not closed · excludes outcome checks

4 high 12 medium 51 normal 14 low 6 info

Open by Kind 142 total

actionable backlog + outcome tracking

68 find 14 spec 5 probe 55 outcome

Side panel / drawer

Right-edge full-height fixed panel for conversational / contextual content. Distinct from modal (centered overlay).

What: position:fixed;right:0;top:0;bottom:0 panel, 360–500px wide, border-left:1px solid var(--border), drop shadow. Slides in over main content; dismissed by clicking backdrop or a close button.
Seen at: chat panel at triage-console.js:1022–1038, triage-console.js:1765.
Distinct from: The modal (centered, modal-blocking); the drawer is edge-anchored and full-height for ongoing context.

Main content area…

Chat session

Conversation messages…

Sidebar navigation, 4-level expandable header system

Canonical sidebar nav. Four header tiers (L1–L4) plus leaves. Headers expand/collapse only; leaves are the only navigable items. Self-contained, CSS scoped to .sg-sidebar-demo so it doesn't depend on (or pollute) the dashboard's #sidebar rules.

When: Any time the sidebar needs a hierarchical menu: section → sub-menu → sub-sub-menu, up to four levels deep. Pages with in-page tabs register their tabs and the matching sub-items are generated by _buildNavTabs() in pages/app.js.
Do: ✓ Use <details> for every expandable header, native disclosure handles toggle, no JS needed.
Do: ✓ Reserve the blue active colour (.nav-leaf-active) for the leaf that is currently selected, never for a header.
Don't: ✗ Don't navigate from a header click, clicking only expands/collapses. Navigation is a leaf-item responsibility.
Don't: ✗ Don't add state-dependent backgrounds to headers (e.g. blue when active, lighter when open). Each level's colour is a constant; the only open-state cue is the chevron rotation.

Colour model: L1 uses var(--bg) (blue-tinted, original section bar). L2/L3/L4 use pure #000 + a white-film overlay; the single knob per level is the film alpha (.05 / .10 / .15 at rest; +.03 on hover). Leaves use rgba(255,255,255,.055) over the surface so they're clearly lighter than every header and never blend with L4. Indent staircase: a leaf at level N aligns with the header at level N+1, 16 → 30 → 44 → 58 → 72px.

<details class="sidebar-section" open>
  <summary class="section-label"><span class="section-icon">🪜</span>Level 1</summary>
  <nav>
    <a href="#"><span class="nav-icon">🌟</span>Menu item 1</a>
    <details class="nav-sub" open>
      <summary><span class="nav-icon">📂</span>Level 2</summary>
      <div class="nav-sub-items">
        <a href="#" class="nav-sub-item"><span class="nav-icon">🎲</span>Menu item 3</a>
        <details class="nav-sub nav-sub-nested" open>
          <summary><span class="nav-icon">🗂️</span>Level 3</summary>
          <div class="nav-sub-items">
            <a href="#" class="nav-sub-item nav-leaf-active">…active leaf…</a>
            <details class="nav-sub nav-sub-nested" open>
              <summary><span class="nav-icon">📁</span>Level 4</summary>
              <div class="nav-sub-items">
                <a href="#" class="nav-sub-item">…leaf…</a>
              </div>
            </details>
          </div>
        </details>
      </div>
    </details>
  </nav>
</details>

Sparklines

Inline SVG mini-charts (~60×14) for time-series data in compact cards, no Chart.js dependency.

What: Tiny normalized <svg><polyline> rendered by a local helper. Distinct from full Chart.js canvas because they sit inline with text and don't need axes or legends.
Seen at: system-health.js:1518–1529, strategy.js:96, whale-watcher.js:2606.

Latency 42ms Errors 17

Stat grid

The canonical "row of headline numbers", via renderParamsGrid() in _shared.js.

What: .stats-grid of .stat-box tiles, each .s-label + .s-value (+ optional .s-sub).
When: 3–8 related metrics at the top of a page/section. Prefer the shared renderParamsGrid() helper.
When not: A single number → a .card with .label/.value. Tabular data → table.
Sizing: grid repeat(4,1fr), gap 12px · tile padding 14px · value 18px/700 mono.
Do: ✓ Route through renderParamsGrid()
Don't: ✗ Use the legacy .label/.value/.sub-in-card pattern for metric rows

Canonical, supersedes: 4 rival conventions, ad-hoc .stat-box (alpha-hunter.js:184), .label/.value/.sub tiles in 18 files, inline font-size:32px numbers (system-health.js:170).

Win Rate

61.4%

312 settled

Net P&L

$2,140

+4.1%

Open Risk

$780

6 positions

Edge

3.2%

avg

Status dot

8px solid color-coded health indicator, sits next to a label as a textless cue.

What: .dot class with .fresh (green) / .stale (yellow) / .dead (red) modifiers; 8px circle, flex-shrink:0. Also appears with inline backgrounds for per-instance colored dots.
Seen at: definition at style.css + index.html:386–389; usage at orchestrator.js:131, platform-config.js:453, instance-selector.js:76.
Distinct from pills: Pills carry text; dots are pure-color cues that sit before a separate label.

fresh stale dead Instance 17

Sticky apply bar

A position:sticky;top:0 strip that appears above content when there are unsaved settings changes, count + Save + Revert.

What: Sticky bar with pending-change count, a primary "Save" button, and (on platform-config) a revert affordance. Hidden when zero changes pending.
Seen at: settings.js:221–246, platform-config.js:210.
Distinct from: The action toolbar (always present on detail pages); this bar appears/disappears based on dirty state.

3 unsaved changes

Tables

Data grid, always wrapped in .table-wrap and wired via makeTableInteractive().

What: .table-wrap > <table> with <th class="sortable" data-col> headers; makeTableInteractive(id, …) adds sort + pagination + sticky header.
When: Every tabular dataset, even read-only ones (still wrap + register so scroll/paging is uniform).
When not: A handful of metrics → .stats-grid. Key/value pairs → a .card.
Sizing: 12px cells · uppercase 11px muted headers · radius 8px on the wrap · horizontal scroll on overflow.
Variants: Sort via createSortState() · server paging via the remote option · noPagination for tiny tables.
Row actions: Per-row buttons (Edit, Delete, Investigate…) live in a single far-right "Actions" column, never scattered inline with data cells. The column is shrunk to fit the buttons via width:1% on the <th> (table-auto layout treats this as "as narrow as content allows" and gives leftover width to the data columns); cells inherit the table's white-space:nowrap so the button row never wraps. With the column shrunk, text-align:center on the header centers "Actions" directly over the button row. Wrap the buttons in a plain display:inline-flex;flex-wrap:nowrap;gap:6px;justify-content:flex-end container, not .button-row (its default flex-wrap:wrap would stack the buttons two-deep once the column tightens). Row buttons are sized one notch tighter than the canonical button (padding:2px 8px · font-size:11px · gap:4px · 12px icon) so they don't dominate the row visually. Every button carries a flat Lucide SVG icon (.icon, stroke="currentColor") so the glyph inherits the button's role color. Non-sortable header (no .sortable, no .sort-caret).
Do: ✓ Give every table an id and pass it through the helper · put row actions in one far-right Actions column with right-justified buttons and a centered header
Don't: ✗ Anonymous .table-wrap with no helper, or custom pager buttons · scatter buttons across multiple data columns or left-align the action cell (drifts away from the table edge as the column widens)

Canonical, supersedes: 20+ anonymous .table-wrap tables bypassing the helper (advanced-analytics.js:210, strategy-lab.js:141); custom pagers (ab-testing.js:843, settings.js:531); per-cell inline action buttons (users.js:412, whale-watcher.js:687) that the eye has to hunt for.

per page Page 1 of 1 0 results

Market ▾	Edge ▾	Status ▾
BTC > $80k EOD	4.1%	open
ETH > $4k EOD	2.3%	SIM
Fed cut March	-1.0%	skipped
NYC rain Friday	3.7%	open
SOL > $200	1.2%	open
NFL Sunday over	0.8%	SIM
Senate confirm	-0.5%	skipped
CPI > 3.2%	2.9%	open
SPX close > 5300	1.7%	open
BTC > $100k EOY	5.4%	SIM
AVAX > $40	0.3%	skipped
LA wildfire ext	-1.4%	skipped
SCOTUS ruling	2.1%	open
UK election early	1.9%	SIM

14 rows · default 10/page. Switch to 25 or All to land on "Page 1 of 1" with all four nav arrows disabled, the canonical page-bound state. The far-right Actions column shows the canonical row-button placement: centered header, right-justified buttons.

Tabs

In-page section switcher.

What: .tabs container of .tab items, each with an emoji .tab-icon + label; .tab.active is the current one (blue underline). The .tabs row always lives inside a horizontal-scroll wrapper (overflow-x:auto;white-space:nowrap;flex-wrap:nowrap) so tabs never wrap to a second line on narrow viewports, they scroll horizontally instead.
When: Switching views within one page (sub-pages of a hub, facets of a dataset). Every tab carries an emoji icon, tabs are wayfinding, so they use the emoji language (like the sidebar/breadcrumb), not button SVGs.
When not: Cross-page navigation → the sidebar. Binary mode → .mode-switch.
Sizing: tab padding 8px 16px · 13px · 6px icon gap · icon 14px · bottom-border 2px accent when active. Row has its own bottom border + 16px margin-bottom (don't override with margin-top:0). Scroll wrapper has no extra padding, the tab bar's own padding/border still aligns with the page gutter.
Do: ✓ Always include an emoji .tab-icon; use the default margins · always wrap the .tabs row in a horizontal-scroll container so the bar scrolls instead of wrapping
Don't: ✗ Icon-less tabs, SVG icons in tabs, or style="margin-top:0" per instance (15+ files do this today) · let tabs wrap to a second line (they become unreadable and break the active-underline anchor)

Canonical, supersedes: the near-universal inline .tabs margin-top:0 override; .tabs used as a toolbar via inline flex (platform-config.js:146); icon-less tabs across most pages; any tab row that wraps on narrow viewports.

<div style="overflow-x:auto;white-space:nowrap">
  <div class="tabs" style="flex-wrap:nowrap">
    <div class="tab active"><span class="tab-icon">🏠</span>Overview</div>
    <div class="tab"><span class="tab-icon">📋</span>Detail</div>
    <div class="tab"><span class="tab-icon">🕐</span>History</div>
  </div>
</div>

🏠Overview

📋Detail

🕐History

⚙️Settings

📊Metrics

🧪Experiments

🔔Alerts

👥Team

Eight tabs, shrink the window or zoom in until the bar overflows; it scrolls horizontally instead of wrapping.

Toast

Transient feedback, supersedes the 3 copy-pasted showToast copies and bare alert().

What: A .toast pinned bottom-right; left-border color = severity (.ok green / default blue / .err red). Auto-dismisses.
When: Success/info/non-blocking error feedback after an action.
When not: Decisions/confirmations → modal. Persistent inline validation → near the field.
Sizing: bottom/right 24px · padding 10px 16px · radius 8px · 13px/600 · z-index 1100 · 3px severity left-border.
Do: ✓ One shared showToast() for all transient feedback
Don't: ✗ alert()/confirm() (~118 calls) or per-page toast copies

Canonical, supersedes: triply-duplicated showToast (alpha-hunter.js:430, governance.js:258, strategy.js:530) and ~118 raw alert()/confirm() calls across 16 files.

Info toast Saved. Request failed.

Typography

Base font is 14px system sans; numeric/monospace data uses Courier New.

What: Body text, headings, and the monospace numeric treatment for data values.
When: Numeric KPIs/metrics use the monospace 'value' treatment so digits align in tables and tiles.
Sizing: Body 14px/1.5 · section h2 14px/600 · stat value 18–24px/700 mono · labels 11px uppercase muted.
Do: ✓ Use .value/.s-value for headline numbers
Don't: ✗ Invent ad-hoc font-size:32px inline numbers

Body text, 14px / 1.5 line-height, var(--text).

Label, 11px uppercase muted

$12,480.55

📐 Sibyl Dashboard, Canonical Component Styleguide