Add three watch UI mock directions
This commit is contained in:
gib committed
1 parent
e79eaf43aa
commit
e7f5b7e45b
3 files changed
+278
No files matched your search
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WristCode mock C: Status board</title>
|
||||
<style>
|
||||
/* Direction C: a status board. Monospace, dense, each machine has its own colour and keeps it
|
||||
everywhere. The thread view is the tail of the agent's work log, like `t3 thread show`.
|
||||
SF Mono on the watch, JetBrains Mono here. 198 x 242 pt. */
|
||||
:root { --mac: #c792ea; --srv: #82aaff; --lm: #f78c6c; --fw: #5c6370; --fg: #d8dee9; --dim: #6b7280; --you: #ffcb6b; }
|
||||
body { margin: 0; }
|
||||
.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: var(--fg); padding: 0 14px; box-sizing: border-box;
|
||||
font-family: "SF Mono", "JetBrainsMono NFM", ui-monospace, monospace; font-size: 11px; line-height: 1.45; }
|
||||
.top { display: flex; justify-content: space-between; padding: 13px 4px 6px; font-size: 12px; font-weight: 700; }
|
||||
.host { font-weight: 700; margin-top: 5px; display: flex; justify-content: space-between; }
|
||||
.host small { font-weight: 400; color: var(--dim); font-size: 10px; }
|
||||
.t { display: flex; gap: 5px; white-space: nowrap; overflow: hidden; }
|
||||
.t .s { flex: none; width: 10px; }
|
||||
.t .n { overflow: hidden; text-overflow: ellipsis; }
|
||||
.t .a { margin-left: auto; color: var(--dim); flex: none; }
|
||||
.log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.k { color: var(--dim); }
|
||||
.key { display: inline-block; border: 1px solid #333; border-radius: 8px; padding: 4px 8px; margin: 6px 4px 0 0; font-weight: 700; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid">
|
||||
|
||||
<figure>
|
||||
<div class="bezel"><div class="screen">
|
||||
<div class="top"><span>wrist</span><span>9:41</span></div>
|
||||
<div class="host" style="color:var(--mac)">mac-mini <small>3</small></div>
|
||||
<div class="t"><span class="s" style="color:var(--you)">!</span><span class="n">receipt-ocr</span><span class="a">ask</span></div>
|
||||
<div class="t"><span class="s" style="color:var(--mac)">●</span><span class="n">watch-scaffold</span><span class="a">4m</span></div>
|
||||
<div class="t"><span class="s" style="color:var(--mac)">●</span><span class="n">fix-cdn-headers</span><span class="a">12m</span></div>
|
||||
<div class="host" style="color:var(--srv)">server-gib <small>1</small></div>
|
||||
<div class="t"><span class="s" style="color:var(--srv)">●</span><span class="n">gateway-containerfile</span><span class="a">1m</span></div>
|
||||
<div class="host" style="color:var(--lm)">littleman <small>idle</small></div>
|
||||
<div class="host" style="color:var(--fw)">framework <small>offline</small></div>
|
||||
</div></div>
|
||||
<figcaption><b>Board.</b> Every machine and every live thread on one screen. ! waiting on you, ● working.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<div class="bezel"><div class="screen">
|
||||
<div class="top"><span style="color:var(--mac)">watch-scaffold</span><span>9:41</span></div>
|
||||
<div class="log">
|
||||
<div><span class="k">09:37</span> read Package.swift</div>
|
||||
<div><span class="k">09:38</span> edit ThreadList.swift</div>
|
||||
<div><span class="k">09:39</span> edit Gateway.swift</div>
|
||||
<div><span class="k">09:40</span> $ xcodebuild build</div>
|
||||
<div><span class="k">09:40</span> <span style="color:#c3e88d">BUILD SUCCEEDED</span></div>
|
||||
<div><span class="k">09:41</span> edit PairView.swift</div>
|
||||
<div style="color:var(--mac)">▍</div>
|
||||
</div>
|
||||
<span class="key">reply</span><span class="key">stop</span>
|
||||
</div></div>
|
||||
<figcaption><b>Thread.</b> The tail of the work log, one line per tool call, so you can see progress without reading prose.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<div class="bezel"><div class="screen">
|
||||
<div class="top"><span style="color:var(--you)">receipt-ocr</span><span>9:41</span></div>
|
||||
<div style="color:var(--dim)">bill-tracker on mac-mini wants to run</div>
|
||||
<div style="margin:6px 0;padding:6px 8px;background:#111;border-radius:8px">$ bun test --filter ocr</div>
|
||||
<div style="color:var(--dim)">cwd ~/Developer/bill-tracker</div>
|
||||
<span class="key" style="color:#000;background:var(--you);border-color:var(--you)">allow</span><span class="key">deny</span><span class="key">always</span>
|
||||
</div></div>
|
||||
<figcaption><b>Approval.</b> The exact command, where it runs, and the same choices the desktop app gives.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<div class="bezel"><div class="screen">
|
||||
<div class="top"><span>new</span><span>9:41</span></div>
|
||||
<div class="k">host</div><div style="color:var(--mac)">› mac-mini</div>
|
||||
<div class="k" style="margin-top:4px">project</div><div>› wristcode</div>
|
||||
<div class="k" style="margin-top:4px">agent</div><div>› opus-5.5 · high</div>
|
||||
<div class="k" style="margin-top:4px">task</div><div style="color:var(--dim)">tap to dictate…</div>
|
||||
<span class="key">start</span>
|
||||
</div></div>
|
||||
<figcaption><b>New thread.</b> Each field is a crown-scrollable picker. Task by dictation.</figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user