JARVIS-3

Ein schlankes, konsolidiertes SCSS Design System für Status-Dashboards, Admin-Interfaces und Monitoring-Tools.

36 SCSS Module 1 Schema × 2 Themes Scoped Dark Mixing Syne + DM Mono V3 Grid System

Ein einheitliches Schema (Grün Primary #8fd600, Orange Accent #ff6200) mit zwei Themes (Light/Dark) und der kompakten V3-Design-Sprache. Fokus: Echtzeit-Daten, Agent-Instanzen, System-Metriken und Workflow-Steuerung. Jedes Element kann per [data-theme="dark"] eigenständig gedarkt werden.

01 Design Tokens — Farben & Status

Einheitliches Token-System. Alle Werte als CSS-Variablen in :root definiert, jederzeit überschreibbar.

Primäre Farben

--primary #8fd600

--primary-hover #5a9e00

--accent #ff6200

--accent-hover #cc4e00

Status-System

Online--status-online

OK--status-ok

Warning--status-warn

Error--status-error

Info--status-info

Offline--status-offline

Event-Type Badges (11 Farben)

02 Typography

Syne für Headings (fett, ausdrucksstark), DM Mono für Body/Mono (technisch). V3-kompakte clamp()-Skala.

Font Families

--font-head: Syne

Syne — Heading Font

--font-body: DM Mono

DM Mono — Body: 0123456789 ABCDEFGHIJKLM

--font-mono: DM Mono

DM Mono — Code: const x = 42; function main() { return true; }

Headings & Text Utilities

H1 — fs-3xl

H2 — fs-2xl

H3 — fs-xl

H4 — fs-lg

.text-accent · .text-muted · .text-error

.text-ok · .text-warn · .text-info · .text-outline

03 Layout & Grid

V3-Flex/Grid-Utilities aus _layout.scss. Responsive bis 1 Spalte.

j-grid-2/3/4

<div class="j-grid j-grid-4"> → 4 Spalten (Desktop) / 2 (Tablet) / 1 (Mobile)

Flex & Spacing Utilities

sp-2 (8px)

sp-4 (16px)

sp-6 (24px)

sp-8 (32px)

.j-mt-1/2/3/4/6/8 · .j-mb-1/2/3/4/6 · .j-p-2/3/4/6 · .j-px-4 · .j-py-4

04 Buttons

.btn / .j-btn mit Varianten. Konsolidiert aus Classic + V3.

Button-Varianten

05 Badges & Tags

j-badge Varianten

Green Orange Error Info OK Warn Gray Default tag chip accent

Online/Offline + Meta Badges

● online ● offline ● online ● offline

06 Cards

.j-card als Basis mit Hover, dazu spezialisierte V3-Cards.

j-card Base + Flat + Code + Aside

Standard Card

Mit Hover-Effekt (Shadow + Border).

Flat Card

Ohne Shadow, kompakter.

Code Card — dunkler Hintergrund für Code-Blöcke

connected hosts

.j-card | .j-card--flat | .j-card--code | .j-aside

Resource Cards + Stat Cards (V3)

gateway-01

192.168.1.10

online

3 Instanzenv2.1.0

worker-02

192.168.1.11

offline

0 Instanzenv1.8.3

Online6aktiv

Offline2getrennt

07 Alerts

j-alert Varianten

✓ Erfolg: Operation erfolgreich abgeschlossen.

⚠ Warnung: Bitte Konfiguration prüfen.

✕ Fehler: Verbindung fehlgeschlagen.

ℹ Info: Update verfügbar.

.j-alert + --ok | --warn | --error | --info

08 Forms & Inputs

Standard Inputs

Text-Input

Select

Textarea

Dashboard-Spezifische Inputs

.widget-search | .cfg-input | .modal-input

09 Tables

j-table mit Hover-Effekt

Name	Status	Version	Provider
agent-01	online	v2.1.0	openai
agent-02	degraded	v2.0.5	anthropic
agent-03	offline	v1.9.2	local

kv-table (Key/Value)

Hostname	gateway-01
IP-Adresse	192.168.1.10
Version	v2.1.0
Status	online

.kv-table | .kv-label | .kv-value

10 Tabs & Modals

Dashboard V3 Tab Bar

.tab-btn.active · .tab-panel.active

Modal Dialog

.modal-overlay (open) | .modal-dialog | .modal-title | .modal-row | .modal-actions

11 Progress, Loading & Code

Progress Bars

Spinner

Lade Daten...

Code Blocks & JSON Viewer

// Beispiel-Code
function hello(name) {
  return `Hallo, ${name}!`;
}
const result = hello('JARVIS');

Inline: const x = 42; — violetter Hintergrund

{ "name": "agent-01", "status": "online", "model": "gpt-4o" }

12 Dashboard — Stat Cards

Kompakte Metrik-Karten für Echtzeit-Übersichten, Monitoring und Resource-Details.

stats-bar + stat-card (V3)

Agenten12verbunden

Kameras8gesamt

Online6aktiv

Offline2getrennt

j-status-grid (Monitor)

Agenten12verbunden

Events1.2Kheute

Fehler3letzte 24h

Uptime99.9%30 Tage

13 Dashboard — Event Stream & History

Event Stream mit Event-Type Badges

Ereignis-Stream live

10:32:15agentagent-01

Instanz registriert · Modell gpt-4o

10:32:12hbagent-02

Heartbeat empfangen · Latenz 12ms

10:32:08toolagent-01

Tool-Aufruf: search_files

10:31:55errorsurveillance

Verbindung fehlgeschlagen

History Entries

10:32:15 agent agent-01: Instanz registriert mit gpt-4o

10:32:12 hb agent-02: Heartbeat empfangen (12ms)

14 Dashboard — Resource Details

ID Top Cards (Identity / Model / Status)

🪪Identity

Nameagent-01

Roleagent

🤖Model

Modelgpt-4o

Provideropenai

📊Status

Statusonline

Uptime3d 4h

RD Cards (Resource Detail Grid)

🖥 Hostname gateway-01

🌐 IP 192.168.1.10

📦 Version v2.1.0

.rd-card-grid | .rd-card (--wide) | .rd-card-label / .rd-card-value

15 Dashboard — Task Board & Workbook

task-board + task-card

aktivGateway

Dashboard-API

REST-API für JSOC mit Echtzeit-Metriken

65%3 Schritte

pausiertAgent

Chat-Komponente

Multi-Modell-Support + Streaming

30%5 Schritte

fertigDocs

WebSocket-Protokoll

Dokumentation veröffentlicht

100%gestern

Workbook Cards (wb-card)

Gateway● aktiv

Projekt Alpha

Dashboard-API implementieren

65%

3 Schrittevor 5 Min

Agent● pausiert

Projekt Beta

Chat-Komponente refactoren

30%

5 Schrittevor 2 Std

16 Feature — Launcher Grid

launcher-grid + launcher-card

⬡

Jarvis

AI-Agenten-Plattform mit Gateway-Architektur und Multi-Modell-Support.

AIAgenten

◈

JSOC

Echtzeit-Monitoring, Instanz-Verwaltung und zentrale Steuerung.

MonitoringControl

▣

JCDN

Content Delivery Network mit Cache-Strategie und Live-API.

CDNPerformance

◎

Drohnen

UAV-Kommunikation, Telemetrie und Datenrouting.

UAVTelemetrie

.launcher-grid | .launcher-card (hover: primary glow + translateY(-2px))

17 Feature — Chat & Messaging

Classic Bubbles + Thinking + Tool Events

Hallo! Kannst du mir helfen?

Natürlich! Was brauchst du?

System: Konversation gestartet

Streaming Antwort...

💭 Ich analysiere die Anfrage und suche Kontext...

🔧 Tool: search_files — Pfad: /src

✕ Fehler: Datei nicht gefunden

V3 Chat Messages

User

Wie funktioniert das Dashboard?

Assistant

Das Dashboard zeigt alle Ressourcen und Instanzen in Echtzeit. Du kannst auf eine Ressource klicken, um Details zu sehen.

System

Konversation gestartet

18 Feature — Monitor & LogView

Monitor Grid (3 Zustände)

gateway-01

● online

Uptime: 3d 4h · CPU: 23%

worker-02

● degraded

Last: 87% · RAM: 91%

surveillance-01

● offline

Seit 23 Minuten · Letzter Ping fehlgeschlagen

LogView (farbcodierte Level)

11:03:15INFOagent-01: instance registered · model=gpt-4o

11:03:12INFOagent-02: heartbeat received · latency=12ms

11:02:58INFOagent-01: tool_call · search_files · path=/var/www

11:02:40WARNjcdn: memory usage at 87%, consider scaling

11:01:55INFOjbot: model loaded · Gemma-4 · Q4_K_XL · ctx=32K

11:01:30ERRORsurveillance-02: connection lost · timeout after 30s

.logview | .logview-body | .log-line | .log-level--info / --warn / --error

19 Scoped Dark Theme Demo

Scoped Dark-Mixing via [data-theme="dark"] auf einem beliebigen Container. Der gesamte Block unten ist dark — ohne dass die Seite das Theme wechseln muss.

● Dark Section scoped

Dark Agenten 12 verbunden

Dark Offline 2 getrennt

Dark Card

Diese Card liegt in einem [data-theme="dark"] Subtree — ohne Extra-CSS.

Stat im Dark

99.9% Uptime

Events im Dark

11:03hbagent-01

Heartbeat 12ms

11:02toolagent-01

search_files