Flock as list tiles with latest updates

- Each crow is a tile: live avatar, name, latest update, time;
  the most recently updated tile moves to the top
- Red "N waiting" count per tile tracks open questions separately
  from the latest update, so a newer update never hides one
- Phones: no crow strip; two tabs (# todo, Flock) with a count of
  crows waiting on you

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

ui/src/style.css

@@ -54,7 +54,7 @@ body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.
 .btn-no::before { background: var(--paper); }
 
 /* ---------- app frame: sidebar + room ---------- */
-.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; height: 100dvh; }
+.app { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100vh; height: 100dvh; }
 
 .side {
   position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px;
@@ -73,21 +73,31 @@ body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.
 }
 .who input:focus { outline: none; border-bottom-width: 3px; }
 
-/* ---------- roster: live crows ---------- */
+/* ---------- roster: one list tile per crow, newest update on top ---------- */
 .roster { display: flex; flex-direction: column; gap: 2px; }
+.tile {
+  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
+  padding: 7px 8px; border-radius: var(--corner);
+}
+.tile.has-pending { background: rgb(155 47 34 / 0.06); }
+.tile-text { min-width: 0; }
+.tile-name { margin: 0; font: 400 16px/1.15 var(--display); }
+.update {
+  margin: 1px 0 0; font: italic 500 14px/1.3 var(--body); color: var(--muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.update.waiting { color: var(--red); }
+.update.good { color: var(--ink); }
+.tile-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
+.tile-time { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
+.tile-count:not(:empty) {
+  padding: 0 7px; border-radius: 999px; background: var(--red); color: var(--paper);
+  font: 700 12px/1.4 var(--body); white-space: nowrap;
+}
 .crow { margin: 0; position: relative; }
-.crow.role-sentry { order: -1; }
-.crow.role-elder { order: 99; }
-.roster .crow { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 10px; padding: 5px 6px; }
-.roster .crow figcaption { order: 2; }
-.roster .crow .badge { order: 3; }
+.crow figcaption { display: none; } /* the tile shows the name */
 .crow-body { width: 40px; height: 37px; }
 .crow-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
-.crow figcaption { font: 400 16px/1.15 var(--display); min-width: 0; }
-.crow figcaption::after { display: block; font: italic 500 13px/1.3 var(--body); color: var(--muted); content: "perched"; }
-.pose-flying figcaption::after { content: "flying"; }
-.pose-waiting figcaption::after { content: "waiting on you"; color: var(--red); }
-.pose-grounded figcaption::after { content: "grounded"; }
 
 .crow-art .disc, .crow .disc { fill: #b7e4c7; }
 .role-sentry .disc { fill: #ffe08a; }
@@ -96,7 +106,7 @@ body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.
 .crow .jaw { transform-origin: 211px 182px; transition: transform 150ms; }
 
 .crow .badge {
-  width: 16px; height: 16px; fill: var(--card); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round;
+  position: absolute; top: -4px; right: -6px; width: 14px; height: 14px; fill: var(--card); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round;
   opacity: 0; transition: opacity 150ms;
 }
 .crow[data-trust="1"] .badge { opacity: 1; }
@@ -124,6 +134,8 @@ body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.
   .crow *, .crow::before, .crow::after { animation: none !important; transition: none !important; }
 }
 
+.tabs { display: none; }
+
 /* ---------- room: header, feed, composer ---------- */
 .room { display: grid; grid-template-rows: auto 1fr auto auto; min-width: 0; min-height: 0; }
 .room-head { position: relative; padding: 16px 24px 12px; }
@@ -188,23 +200,31 @@ body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.
 .composer .field:focus-within::after { -webkit-mask-image: none; mask-image: none; }
 .hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-style: italic; font-size: 13px; }
 
-/* ---------- phones: sidebar becomes a top bar with a scrolling flock ---------- */
+/* ---------- phones: two tabs, the channel or the flock ---------- */
 @media (max-width: 759px) {
   .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
-  .side { min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px 6px; overflow: visible; }
-  .side::after { top: auto; bottom: -8px; left: 0; right: 0; width: auto; height: 8px;
-    -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.7), transparent); mask-image: linear-gradient(rgb(0 0 0 / 0.7), transparent); }
-  .side h2 { display: none; }
-  .brand { font-size: 20px; padding: 0; }
-  .who { order: 2; margin: 0 0 0 auto; padding: 0; font-size: 14px; }
-  .who input { display: inline-block; width: 96px; margin: 0 0 0 4px; font-size: 15px; }
-  .roster { order: 3; width: 100%; min-width: 0; flex-direction: row; overflow-x: auto; gap: 2px; padding-top: 10px; }
-  .roster .crow { display: flex; flex-direction: column; align-items: center; flex: none; width: 54px; padding: 0 2px; }
-  .roster .crow-body { width: 38px; height: 35px; }
-  .roster .crow figcaption { font-size: 12px; }
-  .roster .crow figcaption::after { display: none; }
-  .roster .crow .badge { position: absolute; top: -4px; right: 3px; width: 13px; height: 13px; }
-  .roster .pose-waiting::after { content: "?"; position: absolute; top: -10px; left: 4px; font: 400 15px/1 var(--display); color: var(--red); }
+  .tabs {
+    position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 10px 10px 8px 14px; background: var(--card);
+  }
+  .tabs::after {
+    content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--stipple); pointer-events: none;
+    -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.7), transparent); mask-image: linear-gradient(rgb(0 0 0 / 0.7), transparent);
+  }
+  .tabs .brand { margin-right: auto; font-size: 19px; padding: 0; }
+  .tab { padding: 6px 8px; font: 400 16px/1 var(--display); color: var(--muted); background: none; border: 0; cursor: pointer; }
+  .tab[aria-pressed="true"] { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 6px; }
+  .tab:focus-visible { outline: none; text-decoration: underline 3px; text-underline-offset: 6px; }
+  .tab[data-count]:not([data-count=""])::after {
+    content: attr(data-count); display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
+    background: var(--red); color: var(--paper); font: 700 12px/1.3 var(--body); vertical-align: 2px;
+  }
+  .side, .room { grid-row: 2; min-width: 0; }
+  .app[data-view="room"] .side { display: none; }
+  .app[data-view="flock"] .room { display: none; }
+  .side { padding: 14px 6px 16px; }
+  .side::after, .side .brand { display: none; }
+  .side h2 { margin: 4px 10px 6px; }
+  .who { padding: 0 10px; }
   .room-head { padding: 12px 14px 10px; }
   .room-head h1 { font-size: 19px; }
   .room-sub { display: none; }