feat: manual registration fallback card when rate-limited

app.js

@@ -65,6 +65,55 @@ function seedShellularConfig() {
 
 seedShellularConfig();
 
+// ── Shellular machine-id helper ───────────────────────────────────────────────
+// node-machine-id hashes /etc/machine-id with SHA-256.  We replicate that here
+// so the frontend can show the correct curl registration command.
+function getHashedMachineId() {
+  try {
+    const raw = fs.readFileSync('/etc/machine-id', 'utf-8').trim();
+    return crypto.createHash('sha256').update(raw).digest('hex');
+  } catch {
+    return null;
+  }
+}
+
+// Returns the hashed machine-id (safe to expose — not a secret).
+app.get('/api/shellular/machine-id', (_req, res) => {
+  const id = getHashedMachineId();
+  id ? res.json({ machineId: id }) : res.status(500).json({ error: 'Cannot read machine-id' });
+});
+
+// Accepts a hostId obtained manually by the user, writes ~/.shellular/config.json,
+// and restarts shellular so it skips the registration API entirely.
+app.post('/api/shellular/seed-host', requireAuth, (req, res) => {
+  const { hostId } = req.body || {};
+  if (!hostId || typeof hostId !== 'string' || !hostId.trim()) {
+    return res.status(400).json({ error: 'hostId is required' });
+  }
+  const machineId = getHashedMachineId();
+  if (!machineId) return res.status(500).json({ error: 'Cannot read machine-id' });
+
+  try {
+    const shellularDir = path.join(os.homedir(), '.shellular');
+    fs.mkdirSync(shellularDir, { recursive: true });
+    fs.writeFileSync(
+      path.join(shellularDir, 'config.json'),
+      JSON.stringify({ hostId: hostId.trim(), machineId }, null, 2),
+      'utf-8'
+    );
+
+    // Restart shellular so it picks up the new config
+    stopShellular();
+    outputBuffer = '';
+    broadcast({ type: 'clear' });
+    setTimeout(startShellular, 600);
+
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // ── Auth routes ───────────────────────────────────────────────────────────────
 app.post('/api/login', (req, res) => {
   const { key } = req.body;

public/app.js

@@ -269,6 +269,12 @@ function appendOutput(text) {
   fullOutput += text;
   logPre.textContent = fullOutput;
   logPre.scrollTop = logPre.scrollHeight;
+
+  // Show manual registration card as soon as rate-limit message appears
+  if (text.includes('rate-limited') || text.includes('Registration rate-limited')) {
+    rateLimitCount++;
+    if (rateLimitCount >= 1) loadManualCard();
+  }
 }
 
 /* ── Controls ────────────────────────────────────────────────────────────── */
@@ -299,6 +305,64 @@ async function authFetch(url, method = 'GET') {
   return res;
 }
 
+/* ── Manual registration fallback ───────────────────────────────────────── */
+const manualCard      = $('manual-reg-card');
+const manualCurlCmd   = $('manual-curl-cmd');
+const manualHostInput = $('manual-host-id');
+const manualSubmitBtn = $('manual-submit-btn');
+const manualError     = $('manual-error');
+
+let rateLimitCount  = 0;
+let machineIdLoaded = false;
+
+async function loadManualCard() {
+  if (machineIdLoaded) { manualCard.classList.remove('hidden'); return; }
+  try {
+    const res = await fetch('/api/shellular/machine-id');
+    const { machineId } = await res.json();
+    const cmd = `curl -s -X POST "https://api.shellular.dev/register" -H "Content-Type: application/json" -d '{"machineId":"${machineId}","platform":"linux"}'`;
+    manualCurlCmd.textContent = cmd;
+    machineIdLoaded = true;
+    manualCard.classList.remove('hidden');
+  } catch { /* silent */ }
+}
+
+manualSubmitBtn.addEventListener('click', async () => {
+  const hostId = manualHostInput.value.trim();
+  if (!hostId) {
+    manualError.textContent = 'Please enter the hostId from the curl response.';
+    manualError.classList.remove('hidden');
+    return;
+  }
+  manualError.classList.add('hidden');
+  manualSubmitBtn.disabled = true;
+  manualSubmitBtn.textContent = 'Connecting…';
+
+  try {
+    const r = await fetch('/api/shellular/seed-host', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+      body: JSON.stringify({ hostId }),
+    });
+    const data = await r.json();
+    if (!r.ok) throw new Error(data.error || 'Failed');
+
+    manualCard.classList.add('hidden');
+    rateLimitCount = 0;
+    // shellular is restarting — clear output and show loading
+    fullOutput = '';
+    logPre.textContent = '';
+    qrRendered = false;
+    setQrState('loading');
+  } catch (err) {
+    manualError.textContent = err.message;
+    manualError.classList.remove('hidden');
+  } finally {
+    manualSubmitBtn.disabled = false;
+    manualSubmitBtn.textContent = 'Connect';
+  }
+});
+
 /* ── First-time setup panel ──────────────────────────────────────────────── */
 const setupCard  = $('setup-card');
 let setupDone    = false;  // true once panel is shown OR secrets are already seeded

public/index.html

@@ -145,6 +145,44 @@
         </div>
       </section>
 
+      <!-- Manual registration fallback (shown when rate-limited) -->
+      <section id="manual-reg-card" class="card manual-card hidden">
+        <div class="card-header">
+          <h2>&#9888; Rate Limited — Manual Registration</h2>
+          <p>The shellular relay rejected automatic registration. Run one command from your terminal.</p>
+        </div>
+        <div class="manual-body">
+          <p class="manual-intro">
+            The Shellular registration API is temporarily rate-limiting this server's IP.
+            You can bypass it by registering from <strong>your own machine</strong> — it only takes 10 seconds.
+          </p>
+
+          <div class="manual-step">
+            <span class="step-num">1</span>
+            <div>
+              <p>Run this in your terminal (Mac / Linux / Windows WSL):</p>
+              <div class="code-block">
+                <code id="manual-curl-cmd">Loading…</code>
+                <button class="btn-copy" data-target="manual-curl-cmd">Copy</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="manual-step">
+            <span class="step-num">2</span>
+            <div>
+              <p>You'll get back something like <code class="inline-code">{"success":true,"data":{"hostId":"<strong>XXXX</strong>"}}</code></p>
+              <p>Paste the <strong>hostId</strong> value below and click <strong>Connect</strong>:</p>
+              <div class="manual-input-row">
+                <input id="manual-host-id" type="text" placeholder='e.g. M58FBHn3YzbN' spellcheck="false" />
+                <button id="manual-submit-btn" class="btn btn-primary manual-btn">Connect</button>
+              </div>
+              <p id="manual-error" class="error-msg hidden"></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-- Log card -->
       <section class="card log-card">
         <div class="card-header">

public/style.css

@@ -353,6 +353,84 @@ html, body {
   color: var(--error) !important;
 }
 
+/* ── Manual registration card ─────────────────────────────────────────────── */
+.manual-card { grid-column: 1 / -1; border-color: rgba(250,204,21,.3); }
+
+.manual-body { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 18px; }
+
+.manual-intro { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
+
+.manual-step {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+.manual-step > div { display: flex; flex-direction: column; gap: 8px; flex: 1; }
+.manual-step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
+
+.step-num {
+  width: 26px; height: 26px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #0d0f14;
+  font-size: 13px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.code-block {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  flex-wrap: wrap;
+}
+.code-block code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text);
+  flex: 1;
+  word-break: break-all;
+}
+
+.inline-code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+.manual-input-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.manual-input-row input {
+  flex: 1;
+  min-width: 180px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 14px;
+  padding: 9px 12px;
+  outline: none;
+  transition: border-color .15s;
+}
+.manual-input-row input:focus { border-color: var(--accent); }
+.manual-btn { padding: 9px 20px; }
+
 /* ── Setup card ───────────────────────────────────────────────────────────── */
 .setup-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }