Skip to content

Redesign desktop UI/UX with sidebar shell and guided run flow #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
inhaq merged 2 commits into from
Jun 14, 2026
+1,081 −275
Merged

Redesign desktop UI/UX with sidebar shell and guided run flow #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38c92e6
Redesign desktop UI/UX with sidebar shell and guided run flow
inhaq Jun 14, 2026
930ab53
Address PR review: surface secret errors, add form label associations…
inhaq Jun 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 33 additions & 9 deletions desktop/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,40 @@
</head>
<body>
<div id="app">
<header class="topbar">
<div class="brand">Loopwright</div>
<nav>
<button data-nav="start" class="active">New run</button>
<button data-nav="sessions">Sessions</button>
<button data-nav="secrets" id="nav-secrets" hidden>Secrets</button>
<aside class="sidebar">
<div class="brand">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 2.1a9 9 0 1 0 4.9 9.4" />
<path d="M21 3v5h-5" />
</svg>
</span>
<span class="brand-name">Loopwright</span>
</div>

<nav class="nav">
<button data-nav="start" class="nav-item active" aria-label="New run">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
<span>New run</span>
</button>
<button data-nav="sessions" class="nav-item" aria-label="Sessions">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.7 9.7 0 0 0-6.7 2.8L3 8"/><path d="M3 4v4h4"/><path d="M12 7v5l3 2"/></svg>
<span>Sessions</span>
</button>
<button data-nav="secrets" class="nav-item" id="nav-secrets" aria-label="Secrets" hidden>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<span>Secrets</span>
</button>
</nav>
<div id="engine-status" class="engine-status" title="engine connection">connecting…</div>
</header>
<main id="view"></main>

<div class="sidebar-footer">
<div id="engine-status" class="engine-status" title="engine connection">
<span class="dot"></span><span class="engine-label">connecting…</span>
</div>
</div>
</aside>

<main id="view" class="content"></main>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
Expand Down
Loading
Loading