feat(mobile): Live and Record lanes, Signal, Need eyes and Crews

Every room has a Twitch-style Live lane (simulated crowd chat, emotes,
reactions that also rise from the globe, slow mode, witness glow) and a
Reddit/X-style Record (Signal-weighted corroborate/dispute, threads,
quotes, notes, synthesis). Chat lines with evidence or corroboration
promote to the Record, and a rules-based clerk summarizes chat with
citations. Signal is a receipts ledger; Need eyes requests reward a
sealed answer with a First eyes byline. Crews add persistent groups.
Simulated and example content is labelled throughout.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VVYRAqiQj9Y1V9ZfG1RcDH

mobile/ui/social-dev.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"
+    />
+    <title>Social harness</title>
+    <meta name="color-scheme" content="dark" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+    />
+    <link rel="stylesheet" href="../styles/tokens.css" />
+    <link rel="stylesheet" href="../styles/shell.css" />
+    <link rel="stylesheet" href="../styles/feed.css" />
+    <link rel="stylesheet" href="../styles/sheet.css" />
+    <link rel="stylesheet" href="../styles/globe-ui.css" />
+    <link rel="stylesheet" href="../styles/capture.css" />
+    <link rel="stylesheet" href="../styles/threads.css" />
+    <link rel="stylesheet" href="../styles/cards.css" />
+    <link rel="stylesheet" href="../styles/room.css" />
+    <link rel="stylesheet" href="../styles/layout.css" />
+    <link rel="stylesheet" href="./social-dev.css" />
+    <script type="module" src="./social-dev.js"></script>
+  </head>
+  <body>
+    <div id="app" class="app sd-app" data-tab="rooms">
+      <div id="stage" class="stage" aria-label="Globe">
+        <div id="globe" class="globe-host"></div>
+      </div>
+      <main id="lead" class="lead sd-lead">
+        <section
+          id="view-rooms"
+          class="view view--scroll"
+          aria-label="Rooms"
+        ></section>
+        <section
+          id="view-you"
+          class="view view--scroll"
+          aria-label="You"
+          hidden
+        ></section>
+      </main>
+      <section
+        id="view-capture"
+        class="capture"
+        aria-label="Capture"
+        hidden
+      ></section>
+      <div id="sheets" class="sheets"></div>
+      <nav class="sd-tabs" aria-label="Harness">
+        <button type="button" data-sd="rooms" aria-pressed="true">Rooms</button>
+        <button type="button" data-sd="globe">Globe</button>
+        <button type="button" data-sd="capture">Capture</button>
+        <button type="button" data-sd="you">You</button>
+        <button type="button" data-sd="overlay">Moment chat</button>
+      </nav>
+      <div class="sd-overlay" hidden></div>
+    </div>
+  </body>
+</html>