Layout & Navigation
PageShell, Container, PageHeader, Grid, Split, Section und Stack bilden das gemeinsame Seitengerüst. Abstände und Breiten werden zentral über tokens.ts gesteuert.
Pin den Projektordner — und alles, was du dafür brauchst, ist da: Shells, Editor, Browser, DevTools, Pipeline-Status. Du wechselst nicht mehr zwischen Tools. Du wechselst zwischen Projekten.
ASTROlogic ⑂ feature/universe
❯ git status --short
M src/components/layout/PageShell.tsx
M src/components/layout/tokens.ts
❯ git diff --stat
2 files changed, 3 insertions(+), 1 deletion(-)
Workspaces sind das Herz von Relay. Pin den Projektordner und du bekommst Shells, Editor, Browser, DevTools und Pipeline-Status zusammen — pro Projekt eigenes Setup, persistent über Restarts.
Jeder Workspace hat seinen eigenen Pfad, sein eigenes Theme und sein eigenes Layout. Blueprints speichern die gesamte Pane-Orchestrierung — ein Klick stellt dein Setup wieder her.
Links wechselst du zwischen Dateien, Git, To-dos und Notizen. Rechts bündelt das Infopanel Projektumgebung, Bibliothek, globale Werkzeuge und KI-Chat. Pipeline-Details öffnen sich im Workspace-Status.
Terminal, Editor und Browser in flexiblen Pane-Layouts. Remote Files und DevTools ergänzen den Arbeitsbereich; KI-Chat und Planung haben ihre eigenen Oberflächen.
Verfolge GitHub Actions im Workspace-Status. Klappe die Pipeline für Jobs und Steps auf; die Verbindung benötigt deinen eingerichteten GitHub-Zugang.
Relay integriert sich tief in deine Shell. Prompt-Styles, Environment-Sync, Shell-Switch per Chip — ohne Config-Aufwand.
Native macOS-Oberfläche mit SwiftUI und AppKit. Terminal, Editor und WebKit-Browser arbeiten gemeinsam in einem Fenster.
Alle Container im Infopanel — Start, Stop, Restart, Live-Logs im Terminal und klickbare Ports. Ohne docker ps.
Kontingentfenster und Reset-Zeiten von Claude Code und Codex – abhängig von den verfügbaren Anbieterdaten.
Jedes Theme transformiert Fonts, Radius, Spacing und Glassmorphism gleichzeitig. 12 Modern, 9 Retro, 1 Favorit — alle mit Live-Vorschau.
Alle 22 Themes ansehen →Jeder Workspace zeigt sein Layout, seinen Branch und seine Panes — bevor du ihn öffnest. Neue Projekte startest du direkt aus deinem Projektordner.
Workspace auswählen, um seine Pane-Anordnung zu sehen.
Editor und Vorschau nebeneinander, das Terminal darunter. Wähle ein gemeinsames oder geteiltes Dock. Wenn du Platz brauchst, klappst du es mit ⌘J ein – die Prozesse laufen weiter.
Wechsle die Anordnung und klappe das Terminal-Dock auf. Die Web-Demo zeigt das Zusammenspiel der Relay-Komponenten.
Ein Projekt aus der Praxis — direkt in der Web-Demo: ASTROlogic ↗
In HTML, CSS und JavaScript nachgebildete Relay-Oberfläche. ASTROlogic liefert den Projektkontext; Notizen, Aufgaben und Agentenverläufe sind lokale Beispieldaten.
Terminal, Code und Browser teilen sich einen Bereich. Die Typ-Chips wechseln den Inhalt; Pane-Name, Fokus und Vergrößern bleiben direkt erreichbar.
Wechsle zwischen term, code und web.ASTROlogic ⑂ feature/universe
❯ git status --short
M src/components/layout/PageShell.tsx
M src/components/layout/tokens.ts
❯ git diff --stat
2 files changed, 3 insertions(+), 1 deletion(-)
Starte über relay ask oder öffne den KI-Chat mit ⌘⌥A. Relay verbindet das Gespräch mit deinem Workspace und bietet native Werkzeuge für Dateien, Git, Panes, Notizen und Aufgaben.
Wie arbeiten PageShell und die Layout-Tokens zusammen?
PageShell bildet das gemeinsame Seitengerüst. Die Tokens steuern Breiten, Abstände und vertikalen Rhythmus — damit die Seiten von ASTROlogic konsistent bleiben.
Drei Wege zur KI: über deine CLI-Anmeldung, einen eigenen API-Key oder einen lokalen Server. Relay bündelt die Oberfläche; Modellzugang und Anbietergebühren bringst du mit.
Installiere und melde CLI-Werkzeuge separat an. Ollama und LM Studio werden an bekannten lokalen Adressen gesucht. Andere OpenAI-kompatible Server wie llama.cpp richtest du über ihren Endpoint ein; die Modellliste kommt von /models.
Befehle, Panes, Workspaces — die Palette findet es, bevor du zu Ende getippt hast. Jedes Projekt liegt auf ⌘⌥1 bis 9.
Keine passenden Einträge
Wechsle Projekte, öffne Planung oder klappe das Terminal-Dock ein. Die wichtigsten Wege bleiben direkt auf der Tastatur.
Claude arbeitet. Codex wartet. Klappe einzelne Agentenkarten auf, lies die erfasste Frage und antworte dort, wo die Sitzung es unterstützt. Die Übersicht findest du im Bereich Global.
Alle Funktionen in der Dokumentation →KI-Agenten für deine Aufgaben
Zeige die Änderungen an PageShell und den Layout-Tokens.
Welche Änderung möchtest du als Nächstes ansehen?
− padding = 'compact',
+ padding = 'comfortable',
+ spacing = 'relaxed',ASTROlogic ~/Projects/ASTROlogic
❯ Zeige die Änderungen an PageShell und den Layout-Tokens.
Welche Änderung möchtest du als Nächstes ansehen?Prüfe die Layout-Bausteine und die Navigation von ASTROlogic.
PageShell und gemeinsame Layout-Tokens im Blick.
− padding = 'compact',
+ padding = 'comfortable',
+ spacing = 'relaxed',ASTROlogic ~/Projects/ASTROlogic
❯ Prüfe die Layout-Bausteine und die Navigation von ASTROlogic.
PageShell und gemeinsame Layout-Tokens im Blick.In Relay wählst du hier CLI und Arbeitsverzeichnis für einen neuen Lauf.
Codex CLI Claude CodeNotizen und To-dos haben links je ein eigenes Icon. Das Plus im jeweiligen Bereich öffnet die Eingabe direkt in der Sidebar. Enter legt den Eintrag an, Escape schließt die Eingabe.
Schreibe deine Notiz selbst in Markdown und wechsle zur formatierten Vorschau. Im Listenmodus öffnet sich die Notiz rechts neben der Liste; das Menü bietet eine eigene Leseansicht.
PageShell, Container, PageHeader, Grid, Split, Section und Stack bilden das gemeinsame Seitengerüst. Abstände und Breiten werden zentral über tokens.ts gesteuert.
Änderungen bleiben nur in dieser Demo.
Zwei Icons in der Sidebar trennen Notizen und To-dos. Im Notizfenster bleibt die Liste links, während du rechts liest oder schreibst. Abgehakte Aufgaben zeigen ein grünes Häkchen, werden durchgestrichen und verschwinden aus der offenen Liste. Erledigte bleiben über den Filter erreichbar.
Kleine Dinge, die sich schnell unverzichtbar anfühlen.
Console, Network, DOM, Storage, Performance, Sources, Application, Audit — als eigene Pane direkt neben deinem Code. An jeden Browser-Tab andockbar.
<html lang="de">
<body>
<main class="page-shell">
<h1>ASTROlogic</h1>
</main>
</body>
</html>Git-Änderungen neben dem Code, ein Editor im selben Workspace und Einstellungen für deinen Arbeitsstil. Probiere die Komponenten direkt aus.
Der Dateiname öffnet den Diff. Der Kreis daneben nimmt die Datei ins Staging auf. So prüfst du Änderungen und stellst den nächsten Commit im selben Arbeitsbereich zusammen.
Wähle eine Datei, um die Änderungen zu lesen.
export function PageShell({− padding = 'compact',+ padding = 'comfortable',+ spacing = 'relaxed',children,}: PageShellProps) {export const PAGE_PADDING = {− default: 'px-4',+ default: 'px-4 sm:px-6',+ wide: 'px-6 lg:px-8',};export function Container({− width = 'full',+ width = 'content',+ centered = true,children,}: ContainerProps) {Framework und Paketmanager stehen oben. Darunter liegen die Skripte aus dem Projekt und aufklappbare Abhängigkeiten. Ein Chip bringt den passenden Befehl ins Terminal.
Wähle ein Skript für die Befehlsvorschau.
❯ Web-Demo · der Befehl wird nicht ausgeführtThemes und Tastenkürzel bleiben als vollständige Einstellungsansichten bedienbar.
GitHub Actions im Workspace-Status: Lauf auswählen, Jobs und Steps aufklappen, Fehler untersuchen. Die Einrichtung erfolgt mit deinem eigenen GitHub-Zugang.
Gespeicherte Hosts aus ~/.ssh/config, Live-Latenz alle 15 Sekunden, verwaltete Tunnel und ein Reconnect-Banner statt toter Sessions. Ein Klick öffnet den SFTP-Browser.
Dein Projekt links. Sein Kontext rechts. Dazwischen Platz zum Arbeiten. Entdecke die Karten, Komponenten und Werkzeuge im Detail.
Elf Layouts für Terminal, Editor und Browser. Workbench und Workbench 2 ergänzen ein einklappbares Terminal-Dock (⌘J), dessen Prozesse weiterlaufen. Remote Files und die eigenständige DevTools-Pane ergänzen den Arbeitsbereich.
Die linke Git-Perspektive zeigt Branches, Änderungen und Staging. Öffne Diffs, erstelle Commits und nutze Push oder Pull. GitHub Actions erscheint im Workspace-Status mit aufklappbaren Pipeline-Details.
Bearbeite Projektdateien in Tabs, suche im Projekt und navigiere über den Dateibaum. Syntaxfarben folgen dem App-Theme. Änderungen und Diffs bleiben im Projektkontext.
Öffne lokale Vorschauen und Webseiten neben dem Code. DevTools, responsive Geräteansichten, Downloads und Screenshots ergänzen den Browser.
Erkannte Runtimes, Frameworks und Projektskripte machen den Stack greifbar. Die npm-Prüfung startet erst per Klick; dabei werden geeignete Paketnamen an registry.npmjs.org übertragen.
Finde Shell-Skripte im Projekt und starte sie im Workspace-Terminal. Erkannte Dev-Server-Angebote führen zur passenden lokalen Vorschau.
Sende Eingaben gezielt an ausgewählte Terminal-Sitzungen. Bei einer SSH-Verbindung zeigt die kontextbezogene Karte die Verbindung an.
Sieh zuletzt ausgeführte Befehle mit ihrem Ergebnis, führe sie erneut aus oder markiere Favoriten. Der Verzeichnisverlauf folgt der Navigation im Terminal.
Mit aktiviertem Project Memory bleibt der Befehlsverlauf dem Projekt zugeordnet. Du kannst frühere Befehle im aktuellen Workspace wiederverwenden.
Notizen und To-dos haben eigene Icons in der linken Sidebar, jeweils mit Plus und unabhängiger Suche. Die Eingabe erscheint direkt im gewählten Bereich.
Im Listenmodus öffnet sich die Notiz rechts neben der Liste. Bearbeite Markdown, nutze die formatierte Vorschau oder den Lesemodus. In schmalen Fenstern führt eine Zurück-Aktion zur Liste.
Beim Abhaken wird der Kreis zum grünen Häkchen, der Text durchgestrichen und die Aufgabe nach kurzer Pause ausgeblendet. Erledigte bleiben abrufbar. Das Löschmenü entfernt nach Bestätigung alle angezeigten oder die angezeigten erledigten Aufgaben.
Erfasse kopierte Texte und Bilder auf Wunsch als Notizen. Wähle Relay als Quelle oder aktiviere systemweite Erfassung bewusst in den Einstellungen.
Verfolge erkannte Claude-, Codex- und weitere Läufe. Klappe eine Karte für die erfasste aktuelle oder letzte Frage, Aktivität, zugehörige Läufe und geänderte Dateien auf. Welche Details vorliegen, hängt von der Anbindung ab.
Bei einer verbundenen, auf Texteingabe wartenden Terminal-Sitzung kannst du aus der Karte antworten. Chat-Läufe unterstützen passende Folgefragen. Freigaben bleiben eigene Aktionen; alternativ springst du zur Sitzung.
Die Agentenkarte im Bereich Global zeigt erkannte Läufe, aktive Agenten und wartende Sitzungen. Einzelne Karten lassen sich für weitere Details aufklappen.
Der KI-Bereich im Infopanel verbindet Gespräche mit dem Workspace. Nutze konfigurierte CLI-Verbindungen, eigene API-Zugänge oder einen kompatiblen lokalen Server. Verfügbare Modelle und Werkzeuge hängen von der Verbindung ab.
Anbieterwerte zeigen verfügbare Kontingentfenster und Reset-Zeiten. Codex liest Kontodaten über seine CLI; Claude nutzt erfasste Limit-Ereignisse. Eine manuelle Claude-Aktualisierung startet eine kleine Anfrage und zählt zum Kontingent.
Speichere wiederkehrende Befehle per Stern und öffne gespeicherte URLs in einer Browser-Pane. Die Sammlungen stehen projektübergreifend bereit.
Befehlsschablonen enthalten Platzhalter wie {{name}}. Relay fragt die Werte vor dem Ausführen ab und sendet den aufgelösten Befehl an das Workspace-Terminal.
Speichere einen Workspace als Vorlage und starte daraus wiederkehrende Arbeitsumgebungen. Die Bibliothek hält deine Blueprints bereit.
Bewahre Antworten aus relay ask über /save auf und finde sie in der KI-Historie der Bibliothek wieder. Einzelne Einträge oder die Sammlung lassen sich entfernen.
Sieh lauschende Ports und erkannte Datenbankinstanzen. Verbindungen zu Datenbanken starten über die passende CLI im Terminal; ohne Terminal lässt sich der Befehl kopieren.
Container mit Image, Zustand und Ports: starten, stoppen oder neu starten, Logs im Terminal öffnen und gemappte Dienste im Browser aufrufen. Docker muss lokal verfügbar sein.
Nutze Schnellzugriff auf Terminal und SSH sowie gespeicherte Dateiverbindungen. Remote-Ordner lassen sich zum Bearbeiten öffnen; die Verbindung benötigt deine eingerichteten Zugangsdaten.
Verfolge Browser-Downloads und finde aufgenommene Screenshots an einem Ort. Browser Shots sammelt die Aufnahmen unabhängig vom aktiven Projekt.
Warnungen und Fehler bleiben als Ereignisse auffindbar, wenn der kurze Hinweis bereits verschwunden ist. So kannst du die Meldung später noch einmal nachlesen.
Neun historische Systeme als vollständige visuelle Erlebnisse — nicht als Skinned-Themes, sondern als eigenständige Identitäten mit ihren eigenen Fonts, Eigenheiten und Atmosphären.
Relay ist ein natives Werkzeug, kein Cloud-Dienst. Alles Wichtige passiert auf deinem Mac.
Relay befindet sich aktuell in der Entwicklung. Trag dich ein, um benachrichtigt zu werden, sobald es verfügbar ist.