Chat layout: roster, channel feed, composer

- The flock is a member list with live status (perched, flying,
  waiting on you, grounded); a scrolling strip on phones
- The Sentry and crows post into one channel; approvals are inline
  buttons on their messages; verdicts show as reactions
- "Who's flying" line above the composer; Ctrl/Cmd+Enter to send
- Consecutive messages from one author group under one name
- RIVE_CONTRACT.md: roster size and still message avatars

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UQnSw4RRWp8uqpj3nsnnXF

ui/index.html

@@ -9,26 +9,31 @@
     <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,700;1,500&family=IM+Fell+English+SC&display=swap" rel="stylesheet" />
   </head>
   <body>
-    <header class="top">
-      <h1>So Many Crows</h1>
-      <label class="who">You are <input id="requester" maxlength="40" autocomplete="off" /></label>
-    </header>
+    <div class="app">
+      <aside class="side" aria-label="The flock">
+        <div class="brand">So Many Crows</div>
+        <h2>The flock</h2>
+        <div class="roster" id="roster"></div>
+        <label class="who">You are <input id="requester" maxlength="40" autocomplete="off" /></label>
+      </aside>
 
-    <main>
-      <section class="perch" id="perch" aria-label="The flock"></section>
-      <p class="banner inked" id="banner" role="status" hidden></p>
+      <section class="room">
+        <header class="room-head">
+          <h1># todo</h1>
+          <p class="room-sub">Hand the flock a list. The Sentry sorts it, crows fly, you judge.</p>
+        </header>
 
-      <form class="composer" id="composer">
-        <label for="list">Your todo list, one item per line</label>
-        <div class="field inked"><textarea id="list" rows="5" placeholder="- [ ] What is the difference between a crow and a raven&#10;- [ ] Draft a tagline for So Many Crows"></textarea></div>
-        <button class="btn btn-go inked" id="send" type="submit">Send the flock</button>
-      </form>
+        <ol class="feed" id="feed" aria-live="polite"></ol>
+        <p class="typing" id="typing" aria-live="polite"></p>
 
-      <ol class="cards" id="cards" aria-live="polite"></ol>
-      <p class="meter" id="meter" hidden></p>
-    </main>
-
-    <div class="toast inked" id="toast" role="alert" hidden></div>
+        <form class="composer" id="composer">
+          <label class="sr-only" for="list">Your todo list, one item per line</label>
+          <div class="field inked"><textarea id="list" rows="3" placeholder="One item per line, e.g.&#10;What is the difference between a crow and a raven"></textarea></div>
+          <button class="btn btn-go inked" id="send" type="submit">Send</button>
+          <p class="hint">Ctrl or ⌘ + Enter to send</p>
+        </form>
+      </section>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>