From 5d7a80e2a25732f80b898bf3a3882e80b7d9de29 Mon Sep 17 00:00:00 2001
From: Vassiliy Yegorov <va@egorovanet.ru>
Date: Mon, 15 Jun 2026 13:41:05 +0700
Subject: [PATCH] feat(app): collapsed sidebar becomes an icon rail (keeps
 activity visible)

Toggling the sidebar off used to hide it entirely, losing the per-workspace
status rings. It now collapses to a 48px rail showing each workspace's
aggregate status ring (and unread dot), still clickable to switch, plus the
new-workspace button and the daemon live/offline dot. Full sidebar returns
when toggled back on.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/src/App.tsx     |  2 +-
 app/src/Sidebar.tsx | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 7f2bf10..3a31821 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -164,7 +164,7 @@ export function App() {
     <div style={{ display: "flex", flexDirection: "column", height: "100vh", background: COLORS.bgApp }}>
       <TopBar active={active} eventsOpen={eventsOpen} onToggleEvents={() => setEventsOpen((v) => !v)} onShowEvents={() => setEventsOpen(true)} sidebarOpen={sidebarOpen} onToggleSidebar={() => setSidebarOpen((v) => !v)} unread={unread} onOpenSettings={() => { if (config) setSettingsOpen(true); }} />
       <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
-        {sidebarOpen && <Sidebar groups={groups} workspaces={workspaces} activeId={activeId} onSelect={selectWorkspace} onNew={() => setWizard(true)} onDelete={setDeleteTarget} health={health} connected={connected} />}
+        <Sidebar railMode={!sidebarOpen} groups={groups} workspaces={workspaces} activeId={activeId} onSelect={selectWorkspace} onNew={() => setWizard(true)} onDelete={setDeleteTarget} health={health} connected={connected} />
         <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
           {active && (
             <CenterToolbar selected="" onSelect={(p) => { if (active) void applyPreset(active.id, p, []); }} onOpenSearch={() => { if (effectiveFocus) { setSearchSurfaceId(effectiveFocus); setSearchNonce((n) => n + 1); } }} />
diff --git a/app/src/Sidebar.tsx b/app/src/Sidebar.tsx
index 5ab4603..ab13724 100644
--- a/app/src/Sidebar.tsx
+++ b/app/src/Sidebar.tsx
@@ -26,8 +26,9 @@ function aggregate(w: WorkspaceView): SurfaceState | "stopped" {
 interface DropAt { section: string; index: number }
 
 export function Sidebar({
-  groups, workspaces, activeId, onSelect, onNew, onDelete, health, connected,
+  railMode, groups, workspaces, activeId, onSelect, onNew, onDelete, health, connected,
 }: {
+  railMode: boolean;
   groups: Group[];
   workspaces: WorkspaceView[];
   activeId: string | null;
@@ -183,6 +184,37 @@ export function Sidebar({
 
   const section = (key: string, items: WorkspaceView[]) => items.map((w, i) => row(w, key, items, i));
 
+  // Collapsed: a narrow rail of status rings so terminal activity stays visible.
+  if (railMode) {
+    const rail = [
+      ...pinned,
+      ...groups.slice().sort((a, b) => a.order - b.order).flatMap((g) => byGroup(g.id)),
+      ...ungrouped,
+    ];
+    return (
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: 48, flex: "0 0 48px", background: COLORS.bgSidebar, height: "100%", padding: "10px 0", boxSizing: "border-box", borderRight: `1px solid ${COLORS.borderSubtle}`, gap: 8 }}>
+        <button onClick={onNew} title="New workspace"
+          style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: 8, background: COLORS.bgElevated, border: `1px solid ${COLORS.borderStrong}`, color: COLORS.textPrimary, cursor: "pointer" }}>
+          <Plus size={15} />
+        </button>
+        <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", alignItems: "center", gap: 6, minHeight: 0 }}>
+          {rail.map((w) => {
+            const isActive = w.id === activeId;
+            return (
+              <button key={w.id} onClick={() => onSelect(w.id)} title={w.name}
+                style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: 8, cursor: "pointer", background: isActive ? COLORS.bgElevated : "transparent", border: `1px solid ${isActive ? COLORS.borderStrong : "transparent"}` }}>
+                <span style={{ width: 12, height: 12, borderRadius: "50%", border: `2px solid ${STATE_COLOR[aggregate(w)]}`, boxSizing: "border-box" }} />
+                {w.unread && <span style={{ position: "absolute", top: 3, right: 3, width: 7, height: 7, borderRadius: "50%", background: COLORS.accent }} />}
+              </button>
+            );
+          })}
+        </div>
+        <span title={connected ? "spaceshd · live" : "spaceshd · offline"}
+          style={{ width: 8, height: 8, borderRadius: "50%", background: connected ? COLORS.stDone : COLORS.textMuted, flex: "0 0 8px" }} />
+      </div>
+    );
+  }
+
   return (
     <div style={{ display: "flex", flexDirection: "column", width: 248, flex: "0 0 248px", background: COLORS.bgSidebar, height: "100%", padding: 14, boxSizing: "border-box" }}>
       <button onClick={onNew}