Overview: full cards for empty agents, filter as bottom seg bar; install page redesign (frozen sidebar mock + 2-step manual guide with screenshots)

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+web/public/install/mount-bucket.png filter=lfs diff=lfs merge=lfs -text

web/src/App.tsx

@@ -9,7 +9,7 @@ import Logo from './components/Logo';
 import Overview from './components/Overview';
 import Locked from './components/Locked';
 import * as api from './api';
-import type { Cli, GridSpec, MoveTarget, Session, Tree } from './types';
+import type { Cli, GridSpec, MoveTarget, OverviewFilter, Session, Tree } from './types';
 
 // Phone-sized viewport: the app becomes two full-screen views (list ⇄ pane).
 function useIsMobile() {
@@ -60,6 +60,7 @@ export default function App() {
   // true = the selected session/group fills the screen. Desktop ignores this.
   const isMobile = useIsMobile();
   const [mobileStage, setMobileStage] = useState(false);
+  const [ovFilter, setOvFilter] = useState<OverviewFilter>('all');
   const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
   const rememberPath = (p?: string | null) => {
     if (p) { setLastPath(p); localStorage.setItem('am-last-path', p); }
@@ -377,7 +378,7 @@ export default function App() {
                 ))}
               </div>
             ) : (
-              <span className="mtitle mono">{activeSingle?.name}</span>
+              <span className="mtitle mono">{activeRef === 'overview' ? 'Overview' : activeSingle?.name}</span>
             )}
           </div>
         )}
@@ -386,6 +387,7 @@ export default function App() {
             <Overview
               clis={clis}
               tree={tree}
+              filter={ovFilter}
               onOpen={(sid) => {
                 const g = tree.groups.find((x) => x.sessionIds.includes(sid));
                 openSession(sid, g?.id);
@@ -417,6 +419,18 @@ export default function App() {
             </div>
           )}
         </div>
+        {activeRef === 'overview' && (
+          <div className="zoombar">
+            <div className="seg ov-seg">
+              {(['all', 'waiting', 'working', 'quiet'] as OverviewFilter[]).map((f) => (
+                <button key={f} className={ovFilter === f ? 'on' : ''} onClick={() => setOvFilter(f)}>
+                  {f === 'waiting' ? 'your turn' : f}
+                </button>
+              ))}
+            </div>
+            <span className="spacer" />
+          </div>
+        )}
         {showZoom && (
           <div className="zoombar">
             {!isMobile && activeGroup && groupSessions.length > 0 && (

web/src/components/Locked.tsx

@@ -1,8 +1,80 @@
 import { useState } from 'react';
-import { LockGlyph } from './icons';
+import { LockGlyph, SlidersGlyph, SunGlyph, PulseGlyph } from './icons';
+import Logo from './Logo';
 
-// Shown when the server reports the Space is public. The terminal backend is
-// disabled server-side; this explains how to run a private copy or relock.
+// A frozen, slightly dimmed replica of the real sidebar so the install page
+// looks like the product it unlocks. Pure decoration: no handlers, no state.
+type MockSession = { name: string; cli: string; tint: string; state: string };
+type MockItem = MockSession | { group: string; members: MockSession[] };
+const MOCK: MockItem[] = [
+  { group: 'research', members: [
+    { name: 'writer', cli: 'claude', tint: '#d97757', state: 'working' },
+    { name: 'reviewer', cli: 'codex', tint: '#5eb6a6', state: 'waiting' },
+  ] },
+  { name: 'refactor-bot', cli: 'claude', tint: '#d97757', state: 'idle' },
+  { name: 'gemini-cli-1', cli: 'gemini', tint: '#4796e3', state: 'stopped' },
+  { name: 'shell-1', cli: 'shell', tint: '#8aa0ad', state: 'stopped' },
+];
+
+function MockRow({ s, nested }: { s: MockSession; nested?: boolean }) {
+  return (
+    <div className={`row session${nested ? ' nested' : ''}`}>
+      <span className={`status ${s.state}`} />
+      <span className="name">{s.name}</span>
+      <Logo cli={s.cli} size={11} tint={s.tint} />
+    </div>
+  );
+}
+
+function MockSidebar() {
+  return (
+    <aside className="sidebar mock-side" aria-hidden="true">
+      <div className="brand">
+        <div className="logo"><span className="dot agg-working" /><h1>Agent Manager</h1></div>
+        <div className="brand-actions">
+          <span className="icon-btn"><SlidersGlyph /></span>
+          <span className="icon-btn"><SunGlyph /></span>
+        </div>
+      </div>
+      <div className="controls">
+        <div className="add-row">
+          <span className="btn-ghost">+ Agent</span>
+          <span className="btn-ghost">+ Group</span>
+        </div>
+      </div>
+      <div className="ov-fixed">
+        <div className="row ov-row"><PulseGlyph className="ov-row-ico" /><span className="name">Overview</span></div>
+      </div>
+      <div className="tree">
+        {MOCK.map((item) => 'group' in item ? (
+          <div key={item.group} className="group">
+            <div className="row group-head">
+              <span className="caret">▾</span>
+              <span className="name">{item.group}</span>
+              <span className="count">{item.members.length}</span>
+            </div>
+            {item.members.map((m) => <MockRow key={m.name} s={m} nested />)}
+          </div>
+        ) : (
+          <MockRow key={item.name} s={item} />
+        ))}
+      </div>
+      <div className="quick-add">
+        <span className="btn-ghost"><Logo cli="shell" size={14} /> Shell</span>
+        <span className="btn-ghost"><Logo cli="files" size={14} /> Files</span>
+      </div>
+      <div className="legend">
+        <span><span className="status working" /> working</span>
+        <span><span className="status waiting" /> your turn</span>
+        <span><span className="status idle" /> idle</span>
+        <span><span className="status stopped" /> stopped</span>
+      </div>
+    </aside>
+  );
+}
+
+// Shown when the server reports the Space is public: the terminal backend is
+// disabled server-side and this page explains how to run a private copy.
 export default function Locked({ spaceId }: { spaceId?: string | null }) {
   const id = spaceId || 'owner/space-name';
   const cmd = `from huggingface_hub import HfApi, Volume, create_bucket
@@ -29,36 +101,65 @@ api.duplicate_repo(
   const copy = () => {
     navigator.clipboard?.writeText(cmd).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }).catch(() => {});
   };
+
   return (
-    <div className="locked">
-      <div className="locked-card">
-        <div className="locked-emoji"><LockGlyph /></div>
-        <h1>Agent Manager</h1>
-        <p className="locked-lead">
-          This Space is <b>public</b>, so the terminal manager is disabled. It has
-          no authentication — a public instance would hand anyone a shell and your
-          logged-in agents.
-        </p>
+    <div className="app locked-app">
+      <MockSidebar />
+      <div className="main locked-main">
+        <div className="install">
+          <div className="install-head">
+            <span className="install-lock"><LockGlyph /></span>
+            <div>
+              <h1>Your own Agent Manager, in two steps</h1>
+              <p className="locked-lead">
+                A private cloud workspace for Claude Code, Codex, Gemini CLI and friends —
+                dispatch agents from anywhere, they keep working when you close the tab.
+              </p>
+            </div>
+          </div>
+          <p className="locked-sub">
+            This copy is <b>public</b>, so its terminals are disabled: the app has no login of its
+            own — a public instance would hand anyone a shell. Your duplicate stays private and unlocks itself.
+          </p>
 
-        <h3>Run your own private copy</h3>
-        <p className="locked-sub">
-          Create a private Storage Bucket mounted at <b>/data</b>, then duplicate this Space:
-        </p>
-        <div className="locked-cmd">
-          <pre><code>{cmd}</code></pre>
-          <button className="locked-copy" onClick={copy} aria-label="Copy setup code" title={copied ? 'Copied' : 'Copy'}>
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <rect x="9" y="8" width="10" height="12" rx="2" />
-              <path d="M6 16H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-            </svg>
-          </button>
-        </div>
+          <div className="step">
+            <div className="step-head"><span className="step-n mono">1</span><h3>Duplicate this Space</h3></div>
+            <p className="locked-sub">
+              Open the <b>⋮ menu</b> at the top of this page and choose <b>Duplicate this Space</b>.
+              Set the new Space's visibility to <b>Private</b>.
+            </p>
+            <img src="/install/duplicate-space.png" alt="The Space's ⋮ menu with 'Duplicate this Space' highlighted" />
+          </div>
+
+          <div className="step">
+            <div className="step-head"><span className="step-n mono">2</span><h3>Attach a private bucket</h3></div>
+            <p className="locked-sub">
+              In your new Space: <b>Settings → Storage → Mount a bucket</b>. Create a new bucket,
+              keep it <b>Private</b>, set the mount path to <span className="mono">/data</span> and
+              access to <b>Read &amp; Write</b>. The Space restarts — and that bucket is where your
+              agents' work, logins and history survive rebuilds and sleep.
+            </p>
+            <img src="/install/mount-bucket.png" alt="The Mount a bucket dialog: private bucket, mount path /data, read & write" />
+          </div>
 
-        <h3>Is this your Space?</h3>
-        <p className="locked-sub">
-          Set it to <b>Private</b> in <b>Settings → Change visibility</b>. It unlocks
-          automatically within a minute.
-        </p>
+          <details className="install-code">
+            <summary>Prefer code? Duplicate + bucket in one script</summary>
+            <div className="locked-cmd">
+              <pre><code>{cmd}</code></pre>
+              <button className="locked-copy" onClick={copy} aria-label="Copy setup code" title={copied ? 'Copied' : 'Copy'}>
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="9" y="8" width="10" height="12" rx="2" />
+                  <path d="M6 16H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+              </button>
+            </div>
+          </details>
+
+          <p className="locked-sub install-relock">
+            <b>Is this your Space?</b> Set it back to <b>Private</b> in Settings → Change visibility —
+            it unlocks automatically within a minute.
+          </p>
+        </div>
       </div>
     </div>
   );

web/src/components/Overview.tsx

@@ -3,11 +3,9 @@ import type { CSSProperties, ReactNode } from 'react';
 import { marked } from 'marked';
 import * as api from '../api';
 import type { MetaSession } from '../api';
-import type { Cli, Session, SessionState, Tree } from '../types';
+import type { Cli, OverviewFilter, Session, SessionState, Tree } from '../types';
 import Logo from './Logo';
 
-type Filter = 'all' | 'waiting' | 'working' | 'quiet';
-
 const fmtAgo = (ts: number) => {
   if (!ts) return '';
   const m = Math.round((Date.now() - ts) / 60000);
@@ -20,22 +18,21 @@ const fmtTok = (n = 0) =>
   n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
 const base = (p: string) => p.split('/').pop() || p;
 const eligible = (s: Session) => s.cli !== 'shell' && s.cli !== 'files';
-const bucket = (state: SessionState): Filter =>
+const bucket = (state: SessionState): OverviewFilter =>
   state === 'working' ? 'working' : state === 'waiting' ? 'waiting' : 'quiet';
 
 const Caret = () => (
   <svg className="ov-caret" viewBox="0 0 10 10" aria-hidden="true"><path d="M1.8 3.2h6.4L5 7.4z" fill="currentColor" /></svg>
 );
 
-function Card({ s, color, autoLive, onOpen }: {
+function Card({ s, color, onOpen }: {
   s: MetaSession;
   color?: string;
-  autoLive?: boolean; // expanded dormant row: open straight into the input
   onOpen: (sid: string) => void;
 }) {
   const d = s.digest;
   const [draft, setDraft] = useState('');
-  const [live, setLive] = useState(!!autoLive);
+  const [live, setLive] = useState(false);
   const [sending, setSending] = useState(false);
   const [failed, setFailed] = useState(false);
   const [sentAt, setSentAt] = useState(0);
@@ -140,13 +137,16 @@ function Card({ s, color, autoLive, onOpen }: {
 }
 
 /** Mission control: one reading column — group capsules with their agents as
- *  slabs, loose agents as standalone panels, dormant agents as one-liners. */
-export default function Overview({ clis, tree, onOpen }: { clis: Cli[]; tree: Tree; onOpen: (sid: string) => void }) {
+ *  slabs, loose agents as standalone panels. */
+export default function Overview({ clis, tree, filter, onOpen }: {
+  clis: Cli[];
+  tree: Tree;
+  filter: OverviewFilter; // controlled by the bottom bar in App
+  onOpen: (sid: string) => void;
+}) {
   const [meta, setMeta] = useState<Record<string, MetaSession> | null>(null);
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
   const [durs, setDurs] = useState<Record<string, number>>({});
-  const [woken, setWoken] = useState<Set<string>>(new Set()); // dormant rows expanded by tap
-  const [filter, setFilter] = useState<Filter>('all');
 
   useEffect(() => {
     let alive = true;
@@ -166,11 +166,6 @@ export default function Overview({ clis, tree, onOpen }: { clis: Cli[]; tree: Tr
   if (!meta) return <div className="ov-wrap"><div className="ov-feed"><div className="usage-msg mono">reading traces…<span className="et-cursor" /></div></div></div>;
 
   const visible = (s: MetaSession) => filter === 'all' || bucket(s.state) === filter;
-  // Nothing to say and nothing running → a one-line row until tapped.
-  const isDormant = (s: MetaSession) =>
-    !woken.has(s.id)
-    && (s.state === 'stopped' || s.state === 'idle')
-    && (!s.digest || (!s.digest.lastPromptText && !s.digest.lastAssistantText));
 
   // Collapse at constant velocity: duration follows the group's height.
   const toggleGroup = (gid: string, el: HTMLElement) => {
@@ -183,28 +178,9 @@ export default function Overview({ clis, tree, onOpen }: { clis: Cli[]; tree: Tr
   const renderItem = (s: Session) => {
     const m = dataFor(s);
     if (!visible(m)) return null;
-    if (isDormant(m)) {
-      return (
-        <div
-          key={s.id}
-          className="ov-panel ov-dormant"
-          role="button"
-          tabIndex={0}
-          onClick={() => setWoken((w) => new Set(w).add(s.id))}
-          onKeyDown={(e) => { if (e.key === 'Enter') setWoken((w) => new Set(w).add(s.id)); }}
-        >
-          <span className={`status ${m.state}`} />
-          <Logo cli={s.cli} size={12} tint={colorOf[s.cli]} />
-          <span className="ov-name mono">{s.name}</span>
-          <span className="ov-ago">· {fmtAgo(Date.parse(s.createdAt) || 0)}</span>
-          <span className="spacer" />
-          <span className="ov-chev">▸</span>
-        </div>
-      );
-    }
     return (
       <div key={s.id} className="ov-panel">
-        <Card s={m} color={colorOf[s.cli]} autoLive={woken.has(s.id)} onOpen={onOpen} />
+        <Card s={m} color={colorOf[s.cli]} onOpen={onOpen} />
       </div>
     );
   };
@@ -246,18 +222,6 @@ export default function Overview({ clis, tree, onOpen }: { clis: Cli[]; tree: Tr
   return (
     <div className="ov-wrap">
       <div className="ov-feed">
-        <div className="ov-headrow">
-          <h1 className="ov-title">Overview</h1>
-          <span className="spacer" />
-          <div className="ov-filters">
-            {(['all', 'waiting', 'working', 'quiet'] as Filter[]).map((f) => (
-              <button key={f} className={`ov-fchip${filter === f ? ' on' : ''}`} onClick={() => setFilter(f)}>
-                {f !== 'all' && <span className={`status ${f === 'quiet' ? 'idle' : f}`} />}
-                {f === 'waiting' ? 'your turn' : f}
-              </button>
-            ))}
-          </div>
-        </div>
         {blocks.length === 0 && <div className="usage-msg mono">{filter === 'all' ? 'no agents yet — shells and file panes don’t appear here.' : 'nothing in this state.'}</div>}
         {blocks}
       </div>

web/src/styles.css

@@ -188,14 +188,7 @@ body {
 /* ---- Overview: one reading column of capsules (design mock v4.12) ---- */
 .ov-wrap { height: 100%; overflow-y: auto; }
 .ov-feed { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 2px 2px 40px; }
-.ov-headrow { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
-.ov-headrow .spacer { flex: 1; }
-.ov-title { font-size: 14px; margin: 0; letter-spacing: -0.01em; }
-.ov-filters { display: inline-flex; gap: 4px; }
-.ov-fchip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; }
-.ov-fchip .status { width: 6px; height: 6px; }
-.ov-fchip:hover { border-color: var(--border-strong); color: var(--text); }
-.ov-fchip.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
+.ov-seg button { padding: 3px 11px; }
 
 .ov-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); }
 
@@ -259,11 +252,6 @@ body {
 .ov-hint { font-size: 10.5px; color: var(--muted); flex: none; }
 .ov-note { font-size: 11px; color: var(--danger); }
 
-/* dormant agents: one-line panels until tapped */
-.ov-dormant { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; }
-.ov-dormant:hover { border-color: var(--border-strong); }
-.ov-chev { color: var(--muted); font-size: 10px; }
-
 /* tree */
 .tree { flex: 1; overflow-y: auto; padding: 6px 8px 10px; }
 .empty-hint { color: var(--muted); font-size: 12px; padding: 12px 10px; line-height: 1.5; }
@@ -338,14 +326,26 @@ body {
 .pane-head.draggable:active { cursor: grabbing; }
 .slot { position: relative; min-width: 0; min-height: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); background: var(--term-bg); display: flex; flex-direction: column; }
 
-/* public-space locked screen */
-.locked { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
-.locked-card { max-width: 920px; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px 34px; box-shadow: 0 12px 40px rgba(0,0,0,0.22); }
-.locked-emoji svg { width: 36px; height: 36px; color: var(--accent); }
-.locked-card h1 { margin: 8px 0 4px; font-size: 22px; }
-.locked-card h3 { margin: 22px 0 6px; font-size: 14px; }
-.locked-lead { color: var(--text); font-size: 14px; line-height: 1.55; }
-.locked-sub { color: var(--muted); font-size: 13px; line-height: 1.5; }
+/* public-space locked screen: app shell with a frozen sidebar + install guide */
+.locked-app .mock-side { pointer-events: none; user-select: none; opacity: 0.75; }
+.locked-main { overflow-y: auto; }
+.install { max-width: 620px; margin: 0 auto; padding: 26px 6px 60px; display: flex; flex-direction: column; gap: 18px; }
+.install-head { display: flex; gap: 14px; align-items: flex-start; }
+.install-lock { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--r-lg); margin-top: 2px; }
+.install-lock svg { width: 20px; height: 20px; color: var(--accent); }
+.install h1 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; text-wrap: balance; }
+.locked-lead { color: var(--text); font-size: 13.5px; line-height: 1.55; margin: 0; }
+.locked-sub { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
+.locked-sub b { color: var(--text); }
+.step { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
+.step-head { display: flex; align-items: center; gap: 10px; }
+.step-head h3 { margin: 0; font-size: 14px; }
+.step-n { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent); border-radius: 50%; font-size: 11.5px; font-weight: 600; }
+.step img { width: 100%; max-width: 480px; border: 1px solid var(--border); border-radius: var(--r-lg); display: block; }
+.install-code summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 0; }
+.install-code summary:hover { color: var(--text); }
+.install-code[open] summary { margin-bottom: 8px; }
+.install-relock { border-top: 1px solid var(--border); padding-top: 14px; }
 .locked-cmd { position: relative; margin-top: 8px; }
 .locked-cmd pre { margin: 0; overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 42px 14px 14px; font-size: 12px; line-height: 1.5; }
 .locked-copy { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@@ -599,6 +599,8 @@ body {
   /* 16px inputs stop iOS zoom-on-focus */
   .widget input, .widget select, .row .rename, .secret-desc, .fp-input, .pane-head .ph-title-input, .ov-live input { font-size: 16px; }
   .ov-headrow { flex-wrap: wrap; }
+  /* install page: the decorative sidebar makes no sense on a phone */
+  .locked-app .mock-side { display: none; }
   /* settings stacks vertically */
   .app.settings { flex-direction: column; }
   .app.settings .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }

web/src/types.ts

@@ -46,6 +46,8 @@ export const STATE_LABEL: Record<SessionState, string> = {
   stopped: 'stopped',
 };
 
+export type OverviewFilter = 'all' | 'waiting' | 'working' | 'quiet';
+
 export type MoveTarget =
   | { kind: 'into'; groupId: string }
   | { kind: 'pair'; sessionId: string }