Install page v2 (plain title, ready-note, visible code panel) + public-bucket lock gate; OpenClaw onboard-then-chat; Settings agents as rows + manual update path

server/src/index.js

@@ -159,6 +159,8 @@ app.get('/api/info', (_req, res) => res.json({
   spaceHost: process.env.SPACE_HOST || null,
   tmux: USE_TMUX,
   locked: isPublic(),
+  lockReason: visibility().reason,
+  lockBucket: visibility().bucket,
   canRelaunch: !!(process.env.SPACE_ID && hfToken()),
   // While public, /api/info stays reachable (the Locked page needs it) — don't
   // advertise which credentials exist to the whole internet.

server/src/runner.js

@@ -208,6 +208,14 @@ function commandFor(session) {
     return `if ${hasTranscript}; then exec claude --resume ${session.sessionUuid}; else ${fresh}; fi`;
   }
 
+  // OpenClaw: first run needs its onboarding wizard (keys, workspace); once the
+  // config exists, go straight to the TUI. Decided by config-file existence —
+  // same honest pattern as the Claude transcript check.
+  if (cli.id === 'openclaw') {
+    const cfg = '"${OPENCLAW_CONFIG_PATH:-$HOME/.openclaw/openclaw.json}"';
+    return `if [ -s ${cfg} ]; then exec openclaw chat; else openclaw onboard && exec openclaw chat; fi`;
+  }
+
   // Codex: resume this agent's pinned conversation (captured from its rollout
   // file after launch — see scheduleCodexCapture). Existence-checked like
   // Claude, so a purged rollout starts fresh honestly and a crash ends the

server/src/visibility.js

@@ -1,36 +1,78 @@
 // Self-visibility check. This app has no authentication, so it must only run a
-// usable terminal backend when the Space is PRIVATE. We detect visibility from
-// the public HF API: an unauthenticated GET of a *public* space returns 200 with
-// `private:false`; a *private* space returns 401/404 (we can't see it without a
-// token). No token required.
+// usable terminal backend when BOTH the Space and its mounted bucket(s) are
+// PRIVATE — a public bucket exposes everything agents saved (including login
+// tokens), which is exactly as bad as a public Space.
 //
-// When public, the server locks down (see index.js) and the UI shows a setup
-// widget instead. Re-checked periodically so flipping the Space to Private
-// unlocks it within a minute — no rebuild needed.
+// Space check: unauthenticated GET of a *public* space returns 200 with
+// `private:false`; a *private* space returns 401/404. No token required.
+// Bucket check: same pattern via /api/buckets/{id}. The bucket ids are
+// discovered once from the Space's own metadata (runtime.volumes), which for a
+// private Space requires the HF_TOKEN the relaunch feature already uses —
+// without a token we can't discover volumes and skip the bucket gate.
+//
+// When locked, the server blocks every working API (see index.js) and the UI
+// shows the setup/warning page. Re-checked periodically so fixing visibility
+// unlocks within a minute — no rebuild needed.
 
 const SPACE_ID = process.env.SPACE_ID || null;
-let state = { spaceId: SPACE_ID, public: false, known: false, checkedAt: 0 };
+const hfToken = () => process.env.HF_TOKEN || process.env.HUGGING_FACE_HUB_TOKEN || process.env.HF_API_TOKEN || null;
+
+let state = { spaceId: SPACE_ID, public: false, known: false, checkedAt: 0, reason: null, bucket: null, buckets: [] };
+let volumes = null; // bucket ids mounted on this Space; discovered once (fixed until restart)
+
+const HEADERS = { 'user-agent': 'agent-manager' };
+
+async function discoverBuckets() {
+  if (volumes !== null) return volumes;
+  const token = hfToken();
+  if (!token) { volumes = []; return volumes; } // can't inspect a private Space without a token
+  try {
+    const r = await fetch(`https://huggingface.co/api/spaces/${SPACE_ID}`, {
+      headers: { ...HEADERS, authorization: `Bearer ${token}` },
+    });
+    if (!r.ok) return null; // transient — retry next cycle
+    const j = await r.json();
+    volumes = ((j.runtime && j.runtime.volumes) || [])
+      .filter((v) => v && v.type === 'bucket' && v.source)
+      .map((v) => v.source);
+  } catch { return null; }
+  return volumes;
+}
 
 async function check() {
   // No SPACE_ID → local dev or non-Space host: never lock.
   if (!SPACE_ID) {
-    state = { spaceId: null, public: false, known: true, checkedAt: Date.now() };
+    state = { spaceId: null, public: false, known: true, checkedAt: Date.now(), reason: null, bucket: null, buckets: [] };
     return state;
   }
   try {
-    const r = await fetch(`https://huggingface.co/api/spaces/${SPACE_ID}`, {
-      headers: { 'user-agent': 'agent-manager' },
-    });
+    const r = await fetch(`https://huggingface.co/api/spaces/${SPACE_ID}`, { headers: HEADERS });
     if (r.ok) {
       const j = await r.json();
-      state = { spaceId: SPACE_ID, public: j.private === false, known: true, checkedAt: Date.now() };
-    } else {
-      // Not publicly visible (401/404) → it's private → safe to run.
-      state = { spaceId: SPACE_ID, public: false, known: true, checkedAt: Date.now() };
+      if (j.private === false) {
+        state = { spaceId: SPACE_ID, public: true, known: true, checkedAt: Date.now(), reason: 'public-space', bucket: null, buckets: state.buckets };
+        return state;
+      }
+    }
+    // Not publicly visible (401/404) → the Space is private. Now the bucket(s).
+    const buckets = await discoverBuckets();
+    if (buckets === null) { state = { ...state, checkedAt: Date.now() }; return state; } // keep last verdict
+    for (const id of buckets) {
+      try {
+        const b = await fetch(`https://huggingface.co/api/buckets/${id}`, { headers: HEADERS });
+        if (b.ok) {
+          const bj = await b.json();
+          if (bj.private === false) {
+            state = { spaceId: SPACE_ID, public: true, known: true, checkedAt: Date.now(), reason: 'public-bucket', bucket: id, buckets };
+            return state;
+          }
+        }
+        // 401/404 → bucket is private → safe.
+      } catch { state = { ...state, checkedAt: Date.now() }; return state; } // blip: keep last verdict
     }
+    state = { spaceId: SPACE_ID, public: false, known: true, checkedAt: Date.now(), reason: null, bucket: null, buckets };
   } catch {
-    // Network blip: keep the last known verdict rather than flapping. Initial
-    // state is not-public, so a private Space is never wrongly locked.
+    // Network blip: keep the last known verdict rather than flapping.
     state = { ...state, checkedAt: Date.now() };
   }
   return state;

web/src/App.tsx

@@ -324,7 +324,7 @@ export default function App() {
     );
   };
 
-  if (info?.locked) return <Locked spaceId={info.spaceId} />;
+  if (info?.locked) return <Locked spaceId={info.spaceId} reason={info.lockReason} bucket={info.lockBucket} />;
 
   if (settingsOpen) {
     return (

web/src/components/Locked.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { LockGlyph, SlidersGlyph, SunGlyph, PulseGlyph } from './icons';
+import { SlidersGlyph, SunGlyph, PulseGlyph } from './icons';
 import Logo from './Logo';
 
 // A frozen, slightly dimmed replica of the real sidebar so the install page
@@ -73,9 +73,14 @@ function MockSidebar() {
   );
 }
 
-// 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 }) {
+// Shown when the server locks itself: either the Space is public (visitors get
+// the install guide) or the owner's bucket is public (they get a warning — a
+// public bucket exposes everything the agents saved, credentials included).
+export default function Locked({ spaceId, reason, bucket }: {
+  spaceId?: string | null;
+  reason?: string | null;
+  bucket?: string | null;
+}) {
   const id = spaceId || 'owner/space-name';
   const cmd = `from huggingface_hub import HfApi, Volume, create_bucket
 
@@ -102,20 +107,44 @@ api.duplicate_repo(
     navigator.clipboard?.writeText(cmd).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }).catch(() => {});
   };
 
+  if (reason === 'public-bucket') {
+    return (
+      <div className="app locked-app">
+        <MockSidebar />
+        <div className="main locked-main">
+          <div className="install">
+            <h1>Your storage bucket is public</h1>
+            <p className="locked-lead">
+              The bucket mounted at <span className="mono">/data</span>
+              {bucket ? <> (<span className="mono">{bucket}</span>)</> : null} is <b>public</b> —
+              everything your agents saved is readable by anyone, including credentials and
+              shell history. The terminals stay disabled until it's private.
+            </p>
+            <div className="step">
+              <div className="step-head"><span className="step-n mono">!</span><h3>Make the bucket private</h3></div>
+              <p className="locked-sub">
+                Open <b>{bucket ? <a href={`https://huggingface.co/buckets/${bucket}/settings`} target="_blank" rel="noreferrer">the bucket's settings</a> : 'the bucket’s settings on Hugging Face'}</b> and
+                switch its visibility to <b>Private</b>. This page unlocks automatically within a minute —
+                and consider rotating any credentials that were stored while it was public.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <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>
+            <h1>Set up the 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>
           <p className="locked-sub">
             This copy is <b>public</b>, so its terminals are disabled: the app has no login of its
@@ -140,10 +169,15 @@ api.duplicate_repo(
               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" />
+            <p className="install-done">That's it — the Space restarts, unlocks itself, and you're ready to go. Open it and spawn your first agent.</p>
           </div>
 
-          <details className="install-code">
-            <summary>Prefer code? Duplicate + bucket in one script</summary>
+          <details className="install-code step">
+            <summary className="step-head">
+              <span className="step-n mono">&gt;_</span>
+              <h3>Prefer code? Both steps in one script</h3>
+              <span className="install-code-caret">▸</span>
+            </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'}>

web/src/components/SettingsView.tsx

@@ -4,6 +4,7 @@ import * as api from '../api';
 import SkillsEditor from './SkillsEditor';
 import UsagePanel from './UsagePanel';
 import { SunGlyph, MoonGlyph, RefreshGlyph } from './icons';
+import Logo from './Logo';
 
 type Page = 'general' | 'usage' | 'skills';
 const PAGES: { id: Page; label: string }[] = [
@@ -74,20 +75,22 @@ export default function SettingsView({
 
             <h3>Agents</h3>
             <div className="s-help">A coloured dot means the agent is configured and ready. Log in once inside a session (or set a key as a Space secret) — credentials persist on the bucket across restarts and all sessions.</div>
-            <div className="agent-grid">
+            <div className="agent-rows">
               {clis.filter((c) => c.id !== 'shell' && c.id !== 'files').map((c) => {
                 const ready = c.available && c.ready;
                 return (
-                  <div key={c.id} className="agent-chip">
+                  <div key={c.id} className="agent-row">
                     <span
                       className="status"
                       style={ready
                         ? { background: c.color }
                         : { background: 'var(--muted)', opacity: 0.4 }}
                     />
-                    <span>{c.label}</span>
-                    {c.available && c.version && <span className="s-muted mono chip-ver">v{c.version}</span>}
-                    <span className="s-muted chip-state">{!c.available ? 'unavailable' : ready ? 'ready' : 'needs setup'}</span>
+                    <Logo cli={c.id} size={14} tint={c.color} />
+                    <span className="ar-name">{c.label}</span>
+                    <span className="spacer" />
+                    {c.available && c.version && <span className="ar-ver mono">v{c.version}</span>}
+                    <span className={`ar-state${ready ? ' ok' : ''}`}>{!c.available ? 'unavailable' : ready ? 'ready' : 'needs setup'}</span>
                   </div>
                 );
               })}
@@ -98,8 +101,14 @@ export default function SettingsView({
                 <div className="s-label">Update CLIs</div>
                 <div className="s-help">
                   Factory-reboots the Space to reinstall every CLI at its latest version and relaunch. Sessions survive on the bucket.
-                  {!info?.canRelaunch && ' Needs a write-scoped HF_TOKEN set as a Space secret.'}
                 </div>
+                {!info?.canRelaunch && (
+                  <div className="s-help" style={{ marginTop: 6 }}>
+                    This button needs a write-scoped <span className="mono">HF_TOKEN</span> Space secret. Without one,
+                    update manually: open your Space's <b>Settings</b> tab on Hugging Face and press{' '}
+                    <b>Factory reboot</b> — same effect.
+                  </div>
+                )}
               </div>
               {!info?.canRelaunch ? (
                 <button className="btn-ghost" disabled title="Add a write-scoped HF_TOKEN secret to the Space to enable"><RefreshGlyph /> Relaunch &amp; update</button>

web/src/styles.css

@@ -342,9 +342,14 @@ body {
 .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-done { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--go); font-weight: 500; }
+/* the code path: same panel as the steps, collapsed to its title row */
+.install-code summary { cursor: pointer; list-style: none; }
+.install-code summary::-webkit-details-marker { display: none; }
+.install-code summary .step-n { border-radius: var(--r-sm); font-size: 9px; letter-spacing: 0.02em; }
+.install-code .install-code-caret { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform 0.15s ease-out; display: inline-block; }
+.install-code[open] .install-code-caret { transform: rotate(90deg); }
+.install-code[open] summary { margin-bottom: 4px; }
 .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; }
@@ -452,11 +457,15 @@ body {
 .s-label { font-weight: 600; font-size: 14px; }
 .s-help { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 2px 0 0; }
 .s-muted { color: var(--muted); }
-.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
-.agent-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: 13px; }
-.agent-chip .s-muted { font-size: 11px; }
-.agent-chip .chip-ver { margin-left: 6px; opacity: 0.8; }
-.agent-chip .chip-state { margin-left: auto; }
+/* agents: one hairline row per CLI — dot · logo · name · version · state */
+.agent-rows { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin-top: 8px; overflow: hidden; }
+.agent-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; }
+.agent-row + .agent-row { border-top: 1px solid var(--border); }
+.agent-row .spacer { flex: 1; }
+.ar-name { white-space: nowrap; font-weight: 500; }
+.ar-ver { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.ar-state { flex: none; width: 88px; text-align: right; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
+.ar-state.ok { color: var(--go); }
 .kv { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-top: 8px; }
 .kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
 .kv > div:last-child { border-bottom: none; }