Layout & Navigation
PageShell, Container, PageHeader, Grid, Split, Section and Stack form the shared page structure. Spacing and widths are managed centrally in tokens.ts.
In Development · Coming Soon
One workspace
per project.
Pin the project folder — and everything you need for it is right there: shells, editor, browser, DevTools, pipeline status. You stop switching tools. You switch projects.
● pane 1PageShell.tsx
code
TS PageShell.tsx
- import React, { type ReactNode } from 'react';
- import { cn } from '@/lib/utils';
- import { Container } from './Container';
- import { PAGE_PADDING, STACK_GAP } from './tokens';
- export interface PageShellProps {
- /** Shared page layout */
- width?: ContainerWidth;
- padding?: PagePadding;
- spacing?: StackGap;
- centered?: boolean;
- className?: string;
- children?: ReactNode;
- }
● pane 2ASTROlogic
web
Terminal zsh ⌘J
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(-)
⚡︎ FastDirect access to your projects. SwiftUI and AppKit, no Electron.
NativeFeels like macOS because it is macOS.
⟳ PersistentWorkspaces survive every restart.
⌘ Keyboard-firstShortcuts for projects, panes and tools.
Built by developers · for developers
Swift
·
SwiftUI
·
zsh
·
bash
·
fish
·
Nerd Fonts
·
Oh My Zsh
·
Starship
Why Relay
One project. One workspace. All in.
Workspaces are the heart of Relay. Pin the project folder and you get shells, editor, browser, DevTools, and pipeline status — your own setup per project, persistent across restarts.
Workspaces & Blueprints
Every workspace has its own path, theme, and layout. Blueprints save your entire pane orchestration — one click restores your setup.
relay_hugo4
bauwerkstatt2
wiseglow2
pipytor3
Info Panel as Context Hub
Switch between files, Git, to-dos and notes on the left. The info panel on the right groups project environment, library, global tools and AI chat. Pipeline details open from workspace status.
Stack Hugo · Tauri
Git main ↑2
Ports 1313 · 6379
Your workspace. Your layout.
Terminal, editor and browser in flexible pane layouts. Remote Files and DevTools extend the workspace; AI chat and planning have their own surfaces.
CI/CD live in your terminal.
Follow GitHub Actions in workspace status. Expand the pipeline for jobs and steps; the connection requires your configured GitHub access.
Shell Integration
Relay integrates deeply into your shell. Prompt styles, environment sync, shell switch via chip — no config overhead.
Native SwiftUI — no Electron
A native macOS interface built with SwiftUI and AppKit. Terminal, editor and WebKit browser work together in one window.
Containers at a glance — without docker ps.
Every container in the info panel — start, stop, restart, live logs in the terminal, and clickable ports. No docker ps.
Keep track of your quota.
Claude Code and Codex quota windows and reset times, based on available provider reports.
22 themes — complete visual systems
Each theme transforms fonts, radius, spacing, and glassmorphism at once. 12 modern, 9 retro, 1 favorite — all with live preview.
See all 22 themes →Launchpad
All projects. One glance.
Every workspace shows its layout, branch and panes — before you open it. New projects start right from your project folder.
Choose a workspace to see its pane layout.
Selected: ASTROlogic
Workbench
Your project above. Your terminal below.
Editor and preview side by side, terminal underneath. Choose a single or split dock. Fold it with ⌘J when you need room; processes keep running.
Switch the layout and expand the terminal dock. The web demo shows how Relay’s components work together.
A real project — inside the interactive web demo: ASTROlogic ↗
Relay’s interface recreated in HTML, CSS and JavaScript. ASTROlogic provides the project context; notes, tasks and agent conversations are local sample data.
One pane. Multiple tools.
Keep the context. Switch the tool.
Terminal, code and browser share a pane. Type chips switch its content; the pane name, focus and zoom controls stay within reach.
Switch between term, code and web.● pane 1PageShell.tsx
Find in code ⌘F
TS PageShell.tsx
- import React, { type ReactNode } from 'react';
- import { cn } from '@/lib/utils';
- import { Container } from './Container';
- import { PAGE_PADDING, STACK_GAP } from './tokens';
- export interface PageShellProps {
- /** Shared page layout */
- width?: ContainerWidth;
- padding?: PagePadding;
- spacing?: StackGap;
- centered?: boolean;
- className?: string;
- children?: ReactNode;
- }
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(-)
Intelligence
Your terminal just got smarter.
Start with relay ask or open AI chat with ⌘⌥A. Relay connects the conversation to your workspace and offers native tools for files, Git, panes, notes and tasks.
- From the terminal to workspace chatIn zsh/bash, relay ask uses Relay’s interface. relay agent explicitly opens the configured CLI’s own interface.
- CLI · API · Local serverUse a signed-in CLI, your API key or a compatible local server. Available features depend on the connection.
- Usage dashboardProvider-reported quotas and reset times for supported CLI connections.
You
How do PageShell and the layout tokens work together?
PageShell provides the shared page structure. Tokens control widths, spacing and vertical rhythm, keeping ASTROlogic's pages consistent.
PageShell.tsxtokens.ts
Models
One interface. Your models.
Three ways to connect: your CLI login, your own API key or a local server. Relay provides the interface; you bring model access and cover provider fees.
Provider
Access
Runs on
OpenAI
Your API key
Cloud
Anthropic
Your API key
Cloud
Gemini
Your API key
Cloud
Claude Code · Codex CLI
Your CLI login
CLI on your Mac · provider online
Local — Ollama · LM Studio · llama.cpp
Local endpoint
Your Mac
Install and sign in to CLI tools separately. Relay checks known local addresses for Ollama and LM Studio. Configure other OpenAI-compatible servers such as llama.cpp through their endpoint; the model list comes from /models.
Command Palette
One search field for everything.
Commands, panes, workspaces — the palette finds it before you finish typing. Every project sits on ⌘⌥1 to 9.
Workspaces
No matching entries
Keyboard-First
Your hands stay where they are.
Switch projects, open planning or fold the terminal dock. Keep the main workflows at your fingertips.
⌘ KCommand palette — search commands, panes and workspaces
Agents in context
Keep the task in view.
Claude is working. Codex is waiting. Expand individual agent cards, read the captured question and reply where the session supports it. Find the overview in Global.
Explore all features in the documentation →Agents
AI agents for your tasks
Agents
AI agents for your tasks
2 active1 waiting2 total runs● Live
ASTROlogic · Git-ReviewWaiting for inputLast question Show the changes to PageShell and the layout tokens.
Run details
- Status
- Waiting for input
- Agent
- Codex CLI
- Folder
- ~/Projects/ASTROlogic
- Workspace
- ASTROlogic
- Started
- Today, 16:55
- Duration
- 2m 4s
Last question
Show the changes to PageShell and the layout tokens.
Last activity
Which change would you like to look at next?
Changed files (1)
PageShell.tsx+2 −1
− padding = 'compact',
+ padding = 'comfortable',
+ spacing = 'relaxed',
Codex CLITerminal excerpt · Example
ASTROlogic ~/Projects/ASTROlogic
❯ Show the changes to PageShell and the layout tokens.
Which change would you like to look at next?ASTROlogic · LayoutWorkingCurrent question Review ASTROlogic's layout components and navigation.
Run details
- Status
- Working
- Agent
- Claude Code
- Folder
- ~/Projects/ASTROlogic
- Workspace
- ASTROlogic
- Started
- Today, 16:55
- Duration
- 2m 4s
Last question
Review ASTROlogic's layout components and navigation.
Last activity
Looking at PageShell and the shared layout tokens.
Changed files (1)
PageShell.tsx+2 −1
− padding = 'compact',
+ padding = 'comfortable',
+ spacing = 'relaxed',
Claude CodeTerminal excerpt · Example
ASTROlogic ~/Projects/ASTROlogic
❯ Review ASTROlogic's layout components and navigation.
Looking at PageShell and the shared layout tokens.Start a new agent
In Relay, choose a CLI and working directory here to start a new run.
Codex CLI Claude CodeRight in the sidebar
A thought. A plus. A line.
Notes and to-dos each have their own icon on the left. The plus button opens an input in that section. Enter creates the item; Escape closes the input.
The individual note
Write. Structure. Read alongside.
Write your own note in Markdown and switch to its formatted preview. In list view, the note opens beside the list; the menu also offers a dedicated reader.
Changes stay in this demo only.
Separate spaces for notes and to-dos
Select on the left. Think on the right.
Two sidebar icons separate notes and to-dos. In the notes window, the list stays on the left while you read or write on the right. Completed tasks turn into a green checkmark, are struck through and disappear from the open list. The completed filter keeps them accessible.
What else can Relay do?
Small things that quickly feel indispensable.
Open ports
See what's on :1313 — and kill it.
Containers
Start, stop, logs — without docker ps.
Notes & to-dos
Separate sidebar sections. Read notes beside the list.
AI usage
Quotas and reset times for your supported AI connections.
Blueprints
Save your whole pane setup as a template.
SSH & SFTP
Treat remote files like local ones.
Prompt styles
Powerline to minimal — no config files.
Pipelines
CI status live in the sidebar.
Inline autocomplete
Subcommands, flags, and paths for git, docker, npm, cargo, brew — as you type.
Command blocks
Output per command: copy, re-run, collapse. ⌘⇧↑/↓ jumps between blocks.
MCP bridge
Claude Code & Codex CLI drive Relay — shell actions only with approval.
DevTools
Full DevTools. No browser switch.
Console, Network, DOM, Storage, Performance, Sources, Application, Audit — as its own pane right next to your code. Attaches to any browser tab.
● pane 2astrologic.info
web
info [HMR] connected
info ASTROlogic · Next.js
log PageShell: ready
warn Development mode
❯
StatusNameTime
200document42 ms
200app.css12 ms
200layout.js28 ms
<html lang="en">
<body>
<main class="page-shell">
<h1>ASTROlogic</h1>
</main>
</body>
</html>KeyValue
localeen
A closer look
Your project. Your tools.
Git changes beside your code, an editor in the same workspace and settings for the way you work. Try the components directly.
Git, down to the line
Understand first. Stage next.
The filename opens the diff. The circle beside it stages the file. Review changes and prepare the next commit in the same workspace.
ASTROlogicfeature/universe
Select a file to read its changes.
@@ −8,4 +8,5 @@
88
export function PageShell({9
− padding = 'compact',9
+ padding = 'comfortable',10
+ spacing = 'relaxed',1011
children,1112
}: PageShellProps) {@@ −8,4 +8,5 @@
88
export const PAGE_PADDING = {9
− default: 'px-4',9
+ default: 'px-4 sm:px-6',10
+ wide: 'px-6 lg:px-8',1011
};1112
@@ −8,4 +8,5 @@
88
export function Container({9
− width = 'full',9
+ width = 'content',10
+ centered = true,1011
children,1112
}: ContainerProps) {Select a file on the left to see its diff.
The Stack CardSection
Your project explains itself.
Framework and package manager at the top. Project scripts and expandable dependencies below. A chip sends the right command to the terminal.
Stack
N
Next.jsNode.js · npm
package.jsonScripts
Dependencies 4
- next
- framework
- react
- UI
- typescript
- dev
- tailwindcss
- dev
Command previewzsh · ASTROlogic
Choose a script to preview its command.
❯ Then make it your own.
Themes and keyboard shortcuts remain available as complete interactive settings views.
Pipelines
CI is running. You see it instantly.
GitHub Actions in workspace status: select a run, expand jobs and steps, inspect failures. Set it up with your own GitHub access.
7e4c391 fix: SSH-Quoting, Remote-Paths 21m ago
✕ pipeline #169 · main
3m 28s
d342597 feat: SSH-Features komplett 4h ago
✓ pipeline #168 · main
2m 4s
◌ pipeline #170 · main
0m 41s
SSH & Remote
Your servers. Always in sight.
Saved hosts from ~/.ssh/config, live latency every 15 seconds, managed tunnels and a reconnect banner instead of dead sessions. One click opens the SFTP browser.
prod relay@142.93.107.4
12ms
staging deploy@static.244
87ms
backup relay@10.0.0.8
Reconnect…
⇄ Tunnel 5432 → prod:5432 aktiv
The Relay system
Everything in its place.
Your project on the left. Its context on the right. Room to work in between. Explore the cards, components and tools in detail.
Workspace & components
Panes & layouts
Eleven layouts for terminal, editor and browser. Workbench and Workbench 2 add a collapsible terminal dock (⌘J) whose processes keep running. Remote Files and the separate DevTools pane extend your workspace.
Git & pipeline
The left Git perspective shows branches, changes and staging. Open diffs, create commits, push or pull. GitHub Actions appears in the workspace status with expandable pipeline details.
Editor & file tree
Edit project files in tabs, search the project and navigate the file tree. Syntax colours follow the app theme. Changes and diffs stay in project context.
Browser & inspector
Open local previews and websites alongside your code. DevTools, responsive device views, downloads and screenshots complement the browser.
Project · environment & history
Stack & dependencies
Detected runtimes, frameworks and project scripts expose your stack. The npm check starts only on click and sends eligible package names to registry.npmjs.org.
Shell scripts & dev server
Find shell scripts in the project and run them in the workspace terminal. Detected dev-server offers lead to the matching local preview.
Broadcast & SSH context
Send input to selected terminal sessions. When an SSH connection is present, its contextual card shows connection information.
Recent commands & directories
Review recent commands and their results, rerun them or save favourites. Directory history follows terminal navigation.
Project history
With Project Memory enabled, command history stays associated with the project. Reuse earlier commands in the current workspace.
Notes & to-dos
Capture inline
Notes and to-dos have separate icons in the left sidebar, each with a plus button and an independent search. Input opens directly in the selected section.
Read & organise notes
In list view, notes open beside the list. Edit Markdown, use the formatted preview or open the reader. Narrow windows offer a back action to return to the list.
Tasks & bulk deletion
Completing a task turns its circle into a green checkmark, strikes through its text and hides the row after a short pause. Completed tasks remain accessible. The delete menu removes all shown tasks or completed shown tasks after confirmation.
Optional clipboard capture
Optionally capture copied text and images as notes. Choose Relay as the source or deliberately enable system-wide capture in settings.
Agents & AI
Individually expandable agent cards
Follow detected Claude, Codex and other runs. Expand a card for the captured current or last question, activity, related runs and changed files. Available details depend on the integration.
Reply in context
Reply from the card when a linked terminal session is waiting for text input. Chat runs support follow-up questions when available. Approvals remain separate actions; you can also jump to the session.
Agent dashboard
The Agents card in Global shows detected runs, active agents and waiting sessions. Expand individual cards to inspect their details.
AI chat & connections
The AI area in the info panel connects conversations to the workspace. Use configured CLI connections, your own API access or a compatible local server. Available models and tools depend on the connection.
Quotas & reset times
Provider reports show available quota windows and reset times. Codex reads account information through its CLI; Claude uses captured limit events. A manual Claude refresh starts a small request and counts towards quota.
Library · reuse
Favourites & bookmarks
Star recurring commands and open saved URLs in a browser pane. Collections are available across projects.
Snippets with parameters
Command templates contain placeholders such as {{name}}. Relay asks for values before execution and sends the resolved command to the workspace terminal.
Workspace blueprints
Save a workspace as a template and use it to start recurring work environments. Your blueprints live in the library.
Saved AI responses
Keep responses from relay ask with /save and find them in the library’s AI history. Remove individual entries or clear the collection.
Global · your Mac at a glance
Ports & databases
See listening ports and detected database instances. Connect through the matching CLI in the terminal, or copy the command when no terminal is available.
Docker
Containers with image, state and ports: start, stop or restart, open logs in the terminal and visit mapped services in the browser. Docker must be available locally.
SSH & SFTP / FTP
Use quick terminal and SSH access alongside saved file connections. Open remote folders for editing; connections require your configured credentials.
Downloads & browser shots
Track browser downloads and find captured screenshots in one place. Browser Shots collects captures independently of the active project.
Events
Warnings and errors remain available as events after their brief notification disappears, so you can revisit the message later.
Retro Themes
From 1973 to 1989.
Nine historical systems as complete visual experiences — not skinned themes, but standalone identities with their own fonts, quirks, and atmospheres.
1973
Xelox Alto
> █
1977
Maple II
]
█
█
1978
VT100 Amber
login: █
1981
BCC Micro
READY
█
█
1981
Retro DOS
C:\> █
1982
ZX Spectra
© 1982
█
█
1982
Cmdr 64
READY.
█
█
1984
Amstraad CPC
Ready
→ █
→ █
1989
Fame Boy
READY
█
█
Your data
Your data is yours.
Relay is a native tool, not a cloud service. Everything important happens on your Mac.
Offline license
After online activation, Relay verifies the signed licence file locally. An online recheck is due after seven days; if it cannot connect, a grace period of up to 14 days follows.
AI without the cloud, if you want
With a fully local AI setup, model requests go to your local server. Cloud APIs, CLI providers and separately used online tools may still make network requests.
Stored locally
Sessions, notes and Project Memory stay on your Mac. Online features such as AI connections and quota queries use the providers you configure.
Download
Relay is coming soon.
Relay is currently in development. Sign up to be notified when it launches.
