Self-host: split auth layout with product context beside the form

[RhysSullivan]

The setup and login screens were a bare centered card with no explanation of what Executor is. For self-host that card is the first thing a person ever sees, with no marketing site behind it.

Setup and login now use a split layout: a promo panel (wordmark, mono eyebrow, headline, three indexed points for Connect / Control / Audit, graph-paper texture per design.md) beside the form card. The layout collapses to form-only below lg with the wordmark above the card. The MCP install card subtitle now says what the command does in plain words, and the agent icon buttons have accessible names.

Verified in the browser at desktop and mobile widths, plus the full first-run flow. Typecheck is green.

Stacked on #1269.

[greptile-apps]

Greptile Summary

This PR introduces a split auth layout for the self-hosted login and setup pages, placing a branded promo panel (wordmark, graph-paper texture, Connect/Control/Audit points) beside the form instead of a bare centered card. The MCP install card subtitle for HTTP mode is reworded to plain English, and the agent icon badges are corrected to <span role="img"> elements.

• auth-layout.tsx (new): reusable AuthLayout wraps both pages; collapses to form-only below lg with the wordmark shown above the card.
• login.tsx / setup.tsx: each page is now wrapped in AuthLayout; heading and subtitle copy updated to match the new layout.
• mcp-install-card.tsx: HTTP subtitle reworded; agent icons now carry role="img" and aria-label for screen readers.

Confidence Score: 5/5

Safe to merge — changes are purely presentational; no auth logic, routing, or data handling is touched.

The auth layout is a new wrapper that only affects the visual shell of the login and setup pages. No authentication flow, session handling, or API calls are modified. The only concern is an h2 appearing before an h1 in document order in the aside panel, which is a minor heading-hierarchy accessibility issue with no functional impact.

auth-layout.tsx — the aside heading hierarchy.

Important Files Changed

Filename	Overview
apps/host-selfhost/web/auth-layout.tsx	New split-panel auth layout with graph-paper texture, wordmark, and product copy; heading order places h2 before h1 in DOM.
apps/host-selfhost/web/login.tsx	Wrapped in AuthLayout, heading and subtitle copy updated; logic unchanged.
apps/host-selfhost/web/setup.tsx	Wrapped in AuthLayout, heading and subtitle copy updated; logic unchanged.
packages/react/src/components/mcp-install-card.tsx	HTTP-mode subtitle reworded to plain English; agent icon spans now carry role="img" and aria-label; text-muted-foreground color class added.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Browser request] --> B{Viewport ≥ lg?}
    B -- Yes --> C[AuthLayout: 2-column grid]
    B -- No --> D[AuthLayout: 1-column, aside hidden]
    C --> E[aside: Wordmark + promo panel\ngraph-paper texture\nConnect / Control / Audit]
    C --> F[main: Wordmark hidden\n+ form children]
    D --> G[main: Wordmark shown\n+ form children]
    F --> H{Which page?}
    G --> H
    H -- /login --> I[LoginPage form\nsignin or invite-code mode]
    H -- /setup --> J[SetupPage form\nadmin account creation]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Browser request] --> B{Viewport ≥ lg?}
    B -- Yes --> C[AuthLayout: 2-column grid]
    B -- No --> D[AuthLayout: 1-column, aside hidden]
    C --> E[aside: Wordmark + promo panel\ngraph-paper texture\nConnect / Control / Audit]
    C --> F[main: Wordmark hidden\n+ form children]
    D --> G[main: Wordmark shown\n+ form children]
    F --> H{Which page?}
    G --> H
    H -- /login --> I[LoginPage form\nsignin or invite-code mode]
    H -- /setup --> J[SetupPage form\nadmin account creation]

Loading

_{Reviews (5): Last reviewed commit: "Split auth screens into a guided layout" | Re-trigger Greptile}

[github-actions]

Cloudflare preview

Torn down — the PR is closed.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	executor-cloud	74796f8	Jul 02 2026, 08:43 PM

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	executor-marketing	74796f8	Commit Preview URL Branch Preview URL	Jul 02 2026, 08:41 PM

[pkg-pr-new]

Open in StackBlitz

@executor-js/cli

npm i https://pkg.pr.new/@executor-js/cli@1270

@executor-js/config

npm i https://pkg.pr.new/@executor-js/config@1270

@executor-js/execution

npm i https://pkg.pr.new/@executor-js/execution@1270

@executor-js/sdk

npm i https://pkg.pr.new/@executor-js/sdk@1270

@executor-js/plugin-file-secrets

npm i https://pkg.pr.new/@executor-js/plugin-file-secrets@1270

@executor-js/plugin-graphql

npm i https://pkg.pr.new/@executor-js/plugin-graphql@1270

@executor-js/plugin-keychain

npm i https://pkg.pr.new/@executor-js/plugin-keychain@1270

@executor-js/plugin-mcp

npm i https://pkg.pr.new/@executor-js/plugin-mcp@1270

@executor-js/plugin-onepassword

npm i https://pkg.pr.new/@executor-js/plugin-onepassword@1270

@executor-js/plugin-openapi

npm i https://pkg.pr.new/@executor-js/plugin-openapi@1270

@executor-js/codemode-core

npm i https://pkg.pr.new/@executor-js/codemode-core@1270

@executor-js/runtime-quickjs

npm i https://pkg.pr.new/@executor-js/runtime-quickjs@1270

executor

npm i https://pkg.pr.new/executor@1270

commit: 15e224b