⬡ johannesbrunner.de
UI 0.3.2
● JARVIS-3 Online

Johannes
Brunner

Private Infrastruktur · Eigenentwickelte Plattform · Vollständig selbstgehostet

→ Showcases erkunden → Framework 0.3.2
0
Deployments
0
Active Services
0%
Uptime (30d)
<0ms
Ø Latenz
0
Agent Instanzen
0
Active Nodes
╲╱ Portfolio ╲╱

JARVIS-3 Showcases

Vier vollständig ausgearbeitete UI-Demonstrationen — nur mit dem JARVIS-3 Design System realisiert.

⬡
Design System
Vollständige Dokumentation aller Komponenten, Tokens und Layouts. 19 Sektionen mit Live-Beispielen und Code-Referenzen.
36 Module SCSS 2 Themes
→
◉
Video Surveillance
KI-gestützte Überwachungszentrale mit Live-Feed, Objekterkennung, Alarm-Timeline und Kameramanagement.
Echtzeit Computer Vision 8 Kameras
→
◎
Drohnensteuerung
Dezentrale UAV-Kommandozentrale mit Telemetrie, Missionsplanung, Live-Tracking und automatischen Return-to-Home-Funktionen.
UAV Telemetrie 3 Drohnen
→
⚡
Smart Building
Intelligente Gebäudesteuerung mit Zonen-Temperaturregelung, Energie-Monitoring, Beleuchtungsautomation und Echtzeit-Verbrauchsdaten.
IoT Energie Automation
→
╲╱ Framework ╲╱

UI 0.3.2 — Maximum Showcase

Das JARVIS-3 Framework in voller Breite — jede Komponente, jedes Layout-Prinzip, live vom JCDN geladen. Keine Zeile eigenes Komponenten-CSS.

Buttons

Farb- und Outline-Varianten, Ghost, Größen und Zustände — neu in 0.3.2: 40px Touch-Target und umbrechende Labels auf Mobil.

Badges
ok warn error info gray green orange ● online ○ offline
Tags — Identifikatoren
sdk/gateway-01 v3.2.1 claude-sonnet node-02 ui/0.3.2
Alerts
Neutraler Hinweis — ohne Modifier.
Erfolg: Instanz „gateway-01“ wurde registriert.
Info: Neues Modell verfügbar — Update optional.
Warnung: Rate-Limit bei 80 % — Drosselung droht.
Fehler: Verbindung zum Gateway verloren.
Modal — Scrim + Card

Öffnen/Schließen per .open — Backdrop-Klick und Esc sind im Seitenscript enthalten. Neu in 0.3.2: Display-Rand, 88dvh + Scroll.

12-Spalten-Grid — responsive Suffixe
12 / 6-md / 3-lg
12 / 6-md / 3-lg
12 / 6-md / 3-lg
12 / 6-md / 3-lg
Versatz: 4 breit, ab Spalte 5
Auto-Grid

Auto A

Auto B

Auto C

Spaltenzahl folgt der Breite — repeat(auto-fit, minmax(…)).

Responsive Visibility & Utilities
ab 768px sichtbar nur unter 768px

j-text-lg — betont

Fließtext mit inline-code und j-tag.

j-text-xs j-text-muted — nebensächlich.

hash=a3f9c2e8b71d4f06a3f9c2e8b71d4f06a3f9c2e8b71d4f06 — bricht dank overflow-wrap anywhere (0.3.2).

Progress
Loading & Animation
Instanz startet…
● live ⬡ fade-in
Tree — klicken zum Falten
  • ▾ jarvis-3/
    • ▾ ui/0.3.2/
      • css/jarvis.min.css
      • scss/
      • CHANGELOG.md
    • components.html
    • README.md
Breadcrumb

Pfad-Navigation mit .crumb-sep-Trennern — truncatet statt umzubrechen (neu in 0.3.2).

Bubbles — Chat-UI
Starte den Agenten auf node-02 neu.
Instanz agent-main wird neu gestartet …
Reconnect nach 3 Fehlversuchen — Instanz läuft wieder.
j-card

Standard-Fläche mit Titelzeile.

--compact + --lift

Kompakt, hebt bei Hover — für klickbare Raster.

--roomy

Mehr Luft, für Hero-Blöcke.

--flat

Ohne Schatten.

--outline

Nur Kontur.

--raised

Deutlich erhöht.

--accent-ok

Grüne linke Kante.

--accent-warn

Gelbe linke Kante.

--accent-error

Rote linke Kante.

--accent-info

Blaue linke Kante.

j-table — mit Touch-Scroll-Wrapper
InstanzStatusModell
gateway-01● onlineclaude-sonnet
agent-main● onlineclaude-opus
sdk-worker○ offlinehaiku
kv-table — Key-Value-Muster
Version0.3.2
Release2026-08-28
Quellejcdn.johannesbrunner.de
FokusResponsive Look, Feel & Verhalten
Tabs — Klassen-Kontrakt .active

Panels unterscheiden sich über data-tab — das aktive Panel trägt .active, alle anderen sind ausgeblendet. Umschalten = zwei Klassen ändern.

[12:04:01] gateway-01 heartbeat ok
[12:04:07] agent-main iteration #42 model=claude-sonnet · context=200k · tools=on

{ "model": "claude-sonnet", "max_tokens": 8192, "gateway": "gateway-01" }

╲╱ Technologie ╲╱

Architektur

Das JARVIS-3 Ökosystem — Technologie-Stack und Plattform-Komponenten.

◈
JSOC
Special Operations Center — Echtzeit-Monitoring und Instanz-Verwaltung für alle Agenten.
Gateway Multi-Agent Echtzeit
▣
JCDN
Content Delivery Network — statische Assets mit Cache-Strategie und Health-API.
CDN Express Cache
⬡
Jarvis-3
AI-Agenten-Plattform mit Gateway-Architektur, Multi-Modell und Tool-Integration.
AI Agenten LLM
⚙
Infrastruktur
Nginx · Let's Encrypt · SSH CA · UFW · Automatisiertes Deployment.
DevOps Security Automation