Add three watch UI mock directions

mocks/b-attention-feed.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>WristCode mock B: Attention feed</title>
+<style>
+  /* Direction B: one feed across every machine, sorted by what needs you. Big rounded type,
+     full width cards, the primary action on the card itself. Warm amber for "your turn",
+     calm teal for "working", grey for done. SF Pro Rounded on the watch. 198 x 242 pt. */
+  :root { --you: #ffb02e; --work: #4fd1c5; --done: #6b6b70; --card: #17171a; }
+  body { margin: 0; font-family: "SF Pro Rounded", ui-rounded, system-ui, sans-serif; }
+  .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; padding: 8px 0 16px; justify-items: center; }
+  figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
+  figcaption { font-size: 13px; color: var(--muted-foreground, #999); text-align: center; max-width: 260px; line-height: 1.35; font-family: system-ui, sans-serif; }
+  .bezel { background: #0b0b0c; padding: 10px; border-radius: 52px; box-shadow: 0 0 0 1px #2a2a2c; }
+  .screen { width: 198px; height: 242px; background: #000; border-radius: 42px; overflow: hidden; color: #fff; padding: 0 9px; box-sizing: border-box; }
+  .top { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 8px 4px; font-weight: 600; font-size: 15px; }
+  .hero { padding: 0 8px 8px; }
+  .hero .n { font-size: 34px; font-weight: 700; color: var(--you); line-height: 1; }
+  .hero .t { font-size: 13px; color: #c7c7cc; }
+  .card { background: var(--card); border-radius: 18px; padding: 9px 11px; margin-bottom: 6px; border-left: 4px solid var(--c); }
+  .card .meta { font-size: 11px; color: var(--c); font-weight: 600; }
+  .card .what { font-size: 15px; font-weight: 600; line-height: 1.2; margin-top: 1px; }
+  .card .why { font-size: 12px; color: #aeaeb2; margin-top: 3px; line-height: 1.25; }
+  .acts { display: flex; gap: 6px; margin-top: 7px; }
+  .acts span { flex: 1; text-align: center; border-radius: 14px; padding: 6px 0; font-size: 13px; font-weight: 700; }
+  .big { display: block; text-align: center; border-radius: 24px; padding: 11px; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
+  .chip { display: inline-block; background: var(--card); border-radius: 14px; padding: 6px 10px; font-size: 13px; margin: 0 4px 6px 0; }
+</style>
+</head>
+<body>
+<div class="grid">
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="top"><span></span><span>9:41</span></div>
+      <div class="hero"><div class="n">1</div><div class="t">waiting on you · 3 working</div></div>
+      <div class="card" style="--c:var(--you)">
+        <div class="meta">Mac mini · bill-tracker</div>
+        <div class="what">Run bun test?</div>
+        <div class="acts"><span style="background:var(--you);color:#000">Allow</span><span style="background:#2c2c2e">Deny</span></div>
+      </div>
+      <div class="card" style="--c:var(--work)">
+        <div class="meta">server-gib · wristcode</div>
+        <div class="what">Gateway Containerfile</div>
+      </div>
+    </div></div>
+    <figcaption><b>Feed.</b> No folders. Everything waiting on you comes first, from any machine, with its action right on the card.</figcaption>
+  </figure>
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="top"><span style="color:var(--work)">Working</span><span>9:41</span></div>
+      <div class="card" style="--c:var(--work)">
+        <div class="meta">Mac mini · 4 min</div>
+        <div class="what">Watch app scaffold</div>
+        <div class="why">Writing ThreadListView.swift</div>
+      </div>
+      <div class="card" style="--c:var(--work)">
+        <div class="meta">Mac mini · 12 min</div>
+        <div class="what">Fix CDN headers</div>
+        <div class="why">Running cargo test</div>
+      </div>
+      <div class="card" style="--c:var(--done)">
+        <div class="meta">LittleMan · 1 h ago</div>
+        <div class="what">Bump Next.js</div>
+      </div>
+    </div></div>
+    <figcaption><b>Scrolling down.</b> Working threads show what the agent is doing right now. Finished ones fade to grey.</figcaption>
+  </figure>
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="top"><span style="color:var(--work)">‹ Scaffold</span><span>9:41</span></div>
+      <div style="padding:0 6px 8px;font-size:14px;line-height:1.3;color:#e5e5ea">Done. The project builds and the simulator shows the empty list. Want me to wire up pairing next?</div>
+      <span class="chip">Yes</span><span class="chip">Not yet</span><span class="chip">Commit it</span>
+      <span class="big" style="background:var(--work);color:#000">🎙 Reply</span>
+    </div></div>
+    <figcaption><b>Thread.</b> Only the agent's latest message, large. Suggested replies plus dictation. History is one scroll up.</figcaption>
+  </figure>
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="top"><span style="color:var(--you)">New thread</span><span>9:41</span></div>
+      <div class="card" style="--c:var(--done);padding:7px 11px"><div class="meta" style="color:#aeaeb2">Where</div><div class="what">Mac mini › wristcode</div></div>
+      <div class="card" style="--c:var(--done);padding:7px 11px"><div class="meta" style="color:#aeaeb2">Agent</div><div class="what">Claude Opus 5.5</div></div>
+      <span class="big" style="background:var(--you);color:#000">🎙 Say the task</span>
+    </div></div>
+    <figcaption><b>New thread.</b> Defaults to the last project you used. Pick, dictate, done.</figcaption>
+  </figure>
+
+</div>
+</body>
+</html>