wristcode/mocks/a-native-lists.html

<!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>