Add three watch UI mock directions
This commit is contained in:
Gabriel Brown committed
1 parent
d698ff8ef7
commit
2e7b0e3419
3 files changed
+278
No files matched your search
@@ -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