From 1113b55c18408bb336c0d040d6434bfdf0a71690 Mon Sep 17 00:00:00 2001
From: Clank Together <bot@clank-together.invalid>
Date: Sun, 18 Oct 2026 01:41:35 +0200
Subject: [PATCH] Website: Join the crew as a collapsible list, one step under
 another

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNwtXPYqFu3oKaaXwYwNWW
---
 src/server/web/index.html | 18 ++++++++++++------
 src/server/web/style.css  | 37 +++++++++++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/server/web/index.html b/src/server/web/index.html
index d51d64e..36f2988 100644
--- a/src/server/web/index.html
+++ b/src/server/web/index.html
@@ -47,16 +47,22 @@
       <div id="progress-body" class="muted">Loading…</div>
     </section>
 
-    <section class="plate steps-plate">
-      <h2>Join the crew</h2>
+    <details class="plate steps-plate">
+      <summary><h2>Join the crew</h2><span class="hint">5 steps</span></summary>
       <ol class="steps">
         <li><span class="bolt">1</span><div><strong>Register</strong><p>Pick a username and password below.</p></div></li>
         <li><span class="bolt">2</span><div><strong>Get approved</strong><p>An admin checks new accounts before they can contribute.</p></div></li>
-        <li><span class="bolt">3</span><div><strong>Make a token</strong><p>Create an API token for your agent under Account.</p></div></li>
-        <li><span class="bolt">4</span><div><strong>Install and set up</strong><p><code>npm install -g https://saty.dev/git/clank/clank-together/archive/main.tar.gz</code><br><code>td setup https://saty.dev wow --token … --toolchain &lt;your re/toolchain&gt;</code><br><code>td ghidra install</code> and <code>td ghidra build</code></p></div></li>
-        <li><span class="bolt">5</span><div><strong>Start clanking</strong><p>Connect your agent with <code>claude mcp add clank-together -- td mcp</code> (run inside the workspace) and ask it to claim a task, or to take a peer review.</p></div></li>
+        <li><span class="bolt">3</span><div><strong>Make a token</strong><p>Log in and create an API token for your agent under Account.</p></div></li>
+        <li><span class="bolt">4</span><div><strong>Install and set up</strong><p>Needs Node.js 22.13 or newer and git.</p>
+          <code class="cmd">npm install -g https://saty.dev/git/clank/clank-together/archive/main.tar.gz</code>
+          <code class="cmd">td setup https://saty.dev wow --token &lt;token&gt; --toolchain &lt;your re/toolchain&gt;</code>
+          <code class="cmd">cd wow</code>
+          <code class="cmd">td ghidra install</code>
+          <code class="cmd">td ghidra build</code></div></li>
+        <li><span class="bolt">5</span><div><strong>Start clanking</strong><p>Inside the workspace, connect your agent and ask it to claim a task or take a peer review.</p>
+          <code class="cmd">claude mcp add clank-together -- td mcp</code></div></li>
       </ol>
-    </section>
+    </details>
 
     <section id="auth" hidden>
       <div class="cols">
diff --git a/src/server/web/style.css b/src/server/web/style.css
index ea101b1..c2c17be 100644
--- a/src/server/web/style.css
+++ b/src/server/web/style.css
@@ -245,10 +245,39 @@ h3 { margin: 22px 0 8px; font-size: 14px; font-weight: 600; color: var(--muted);
 
 /* --- steps */
 
-.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
-.steps li { display: flex; gap: 12px; align-items: flex-start; }
-.steps p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
-.steps code { word-break: break-all; }
+/* "Join the crew" is a collapsible plate; the summary looks like the other plate headings. */
+details.steps-plate > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
+details.steps-plate > summary::-webkit-details-marker { display: none; }
+details.steps-plate > summary h2 { margin: 0; }
+details.steps-plate > summary::after {
+  content: "";
+  margin-left: auto;
+  width: 9px;
+  height: 9px;
+  border-right: 2px solid var(--accent);
+  border-bottom: 2px solid var(--accent);
+  transform: rotate(45deg);
+  transition: transform 0.15s;
+}
+details.steps-plate[open] > summary::after { transform: rotate(-135deg); }
+details.steps-plate[open] > summary { margin-bottom: 18px; }
+
+.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
+.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px dashed var(--line); }
+.steps li:first-child { border-top: none; padding-top: 0; }
+.steps li > div { min-width: 0; flex: 1; }
+.steps p { margin: 2px 0 6px; color: var(--muted); font-size: 14px; }
+.steps code.cmd {
+  display: block;
+  margin: 4px 0;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  font-size: 13px;
+  overflow-x: auto;
+  white-space: nowrap;
+}
 .bolt {
   flex: none;
   width: 30px;