Add three watch UI mock directions

mocks/a-native-lists.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>WristCode mock A: Native lists</title>
+<style>
+  /* Direction A: stock watchOS. Machine first navigation, list rows, one accent (T3 blue).
+     Set in system-ui here, SF Pro on the watch. Screens are 45mm at 1x: 198 x 242 pt. */
+  :root { --accent: #4c8dff; --row: #1c1c1e; --dim: #8e8e93; --warn: #ffb340; --ok: #32d74b; --err: #ff6961; }
+  body { margin: 0; font-family: -apple-system, "SF Pro Text", 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; }
+  .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; position: relative; padding: 0 10px; box-sizing: border-box; }
+  .bar { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 8px 6px; }
+  .bar .title { color: var(--accent); font-weight: 600; font-size: 15px; }
+  .bar .time { font-size: 15px; font-weight: 600; }
+  .row { background: var(--row); border-radius: 14px; padding: 8px 10px; margin-bottom: 5px; }
+  .row .name { font-size: 15px; font-weight: 500; line-height: 1.2; }
+  .row .sub { font-size: 12px; color: var(--dim); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
+  .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
+  .badge { margin-left: auto; font-size: 12px; font-weight: 600; border-radius: 9px; padding: 1px 7px; }
+  .flex { display: flex; align-items: center; gap: 6px; }
+  .msg { font-size: 13px; line-height: 1.3; padding: 7px 10px; border-radius: 14px; margin-bottom: 5px; }
+  .msg.you { background: var(--accent); margin-left: 22px; }
+  .msg.agent { background: var(--row); color: #e5e5ea; }
+  .btn { display: block; text-align: center; border-radius: 22px; padding: 9px; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
+  .notif { background: #1c1c1e; border-radius: 18px; padding: 10px; margin-top: 4px; }
+  .label { font-size: 12px; color: var(--dim); padding: 2px 8px 4px; }
+</style>
+</head>
+<body>
+<div class="grid">
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="bar"><span class="title">WristCode</span><span class="time">9:41</span></div>
+      <div class="row"><div class="flex"><span class="name">Mac mini</span><span class="badge" style="background:var(--warn);color:#000">1</span></div>
+        <div class="sub"><span class="dot" style="background:var(--ok)"></span>2 running</div></div>
+      <div class="row"><div class="flex"><span class="name">server-gib</span></div>
+        <div class="sub"><span class="dot" style="background:var(--ok)"></span>1 running</div></div>
+      <div class="row"><div class="flex"><span class="name">LittleMan</span></div>
+        <div class="sub"><span class="dot" style="background:var(--dim)"></span>Idle</div></div>
+      <div class="row" style="opacity:.45"><div class="name">framework-gib</div>
+        <div class="sub">Offline</div></div>
+    </div></div>
+    <figcaption><b>Home.</b> One row per environment. The badge counts threads waiting on you.</figcaption>
+  </figure>
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="bar"><span class="title">‹ Mac mini</span><span class="time">9:41</span></div>
+      <div class="label">Needs you</div>
+      <div class="row"><div class="name">Receipt OCR</div>
+        <div class="sub"><span class="dot" style="background:var(--warn)"></span>bill-tracker · approve</div></div>
+      <div class="label">Running</div>
+      <div class="row"><div class="name">Watch app scaffold</div>
+        <div class="sub"><span class="dot" style="background:var(--ok)"></span>wristcode · 4m</div></div>
+      <div class="row"><div class="name">Fix CDN headers</div>
+        <div class="sub"><span class="dot" style="background:var(--ok)"></span>secure-market · 12m</div></div>
+    </div></div>
+    <figcaption><b>Environment.</b> Threads grouped by state, newest first. A + button at the bottom starts a thread.</figcaption>
+  </figure>
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="bar"><span class="title">‹ Receipt OCR</span><span class="time">9:41</span></div>
+      <div class="msg you">Add OCR for uploaded receipts</div>
+      <div class="msg agent">Parser and tests are written. I want to run the suite.</div>
+      <div class="msg agent" style="font-family:ui-monospace,'JetBrainsMono NF',monospace;font-size:11px">$ bun test</div>
+      <span class="btn" style="background:var(--ok);color:#000">Approve</span>
+      <span class="btn" style="background:var(--row)">Deny</span>
+    </div></div>
+    <figcaption><b>Thread.</b> The last few messages as bubbles. Pending requests show their buttons inline. Reply sits below them.</figcaption>
+  </figure>
+
+  <figure>
+    <div class="bezel"><div class="screen">
+      <div class="bar"><span class="title"></span><span class="time">9:41</span></div>
+      <div class="notif">
+        <div class="flex" style="font-size:12px;color:var(--dim)"><span class="dot" style="background:var(--accent)"></span>WristCode · now</div>
+        <div style="font-size:15px;font-weight:600;margin-top:4px">Watch app scaffold</div>
+        <div style="font-size:13px;color:#d1d1d6;margin-top:2px;line-height:1.3">Finished on Mac mini. The project builds and the simulator shows the empty list.</div>
+      </div>
+      <span class="btn" style="background:var(--row);margin-top:8px">Reply</span>
+      <span class="btn" style="background:var(--row)">Open</span>
+    </div></div>
+    <figcaption><b>Notification.</b> Turn finished, with the agent's last line. Reply dictates straight into the thread.</figcaption>
+  </figure>
+
+</div>
+</body>
+</html>