Mocks: three directions for subagent requests and settling
This commit is contained in:
gib committed
1 parent
442036b22f
commit
a8b6375afe
3 files changed
+130
No files matched your search
@@ -0,0 +1,44 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>WristCode delegates A: request on the parent card</title>
|
||||||
|
<style>
|
||||||
|
:root { --you:#ffb02e; --work:#4fd1c5; --done:#6b6b70; --card:#17171a; --bad:#ff6b5e; }
|
||||||
|
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; position:relative; }
|
||||||
|
.top { display:flex; justify-content:space-between; align-items:baseline; padding:12px 8px 4px; font-weight:600; font-size:15px; }
|
||||||
|
.card { background:var(--card); border-radius:18px; padding:9px 11px; margin-bottom:6px; border-left:4px solid var(--c); }
|
||||||
|
.meta { font-size:11px; color:var(--c); font-weight:600; }
|
||||||
|
.what { font-size:15px; font-weight:600; line-height:1.2; margin-top:1px; }
|
||||||
|
.why { font-size:12px; color:#aeaeb2; margin-top:3px; line-height:1.25; }
|
||||||
|
.mono { font-family:"SF Mono",ui-monospace,monospace; font-size:11px; }
|
||||||
|
.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:10px; font-size:15px; font-weight:700; margin-bottom:6px; }
|
||||||
|
.label { font-size:11px; color:#aeaeb2; padding:4px 6px 3px; font-weight:600; display:flex; justify-content:space-between; }
|
||||||
|
.sub { margin:-2px 0 6px 14px; background:#101012; border-radius:14px; padding:7px 9px; border-left:3px solid var(--you); }
|
||||||
|
.chip { display:inline-block; font-size:10px; font-weight:700; border-radius:7px; padding:1px 6px; background:#3d2f12; color:var(--you); }
|
||||||
|
.row { display:flex; align-items:center; gap:6px; }
|
||||||
|
.swipe { display:flex; margin-bottom:6px; }
|
||||||
|
.swipe .card { flex:1; margin:0; border-radius:18px 0 0 18px; }
|
||||||
|
.swipe .act { width:58px; background:var(--work); color:#000; border-radius:0 18px 18px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
|
||||||
|
</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="card" style="--c:var(--you)"><div class="meta">Mac mini · WristLab</div><div class="what">HomeLab Stats Apple Watch App</div>
|
||||||
|
<div class="why">Subagent <b style="color:#fff">Check Panama PATH</b> wants to run:</div><div class="mono" style="margin-top:3px">brew install jq</div>
|
||||||
|
<div class="acts"><span style="background:var(--you);color:#000">Allow</span><span style="background:#2c2c2e">Deny</span></div></div></div></div><figcaption><b>Feed.</b> The request sits on the parent's card. One line names the subagent that asked. Allow and Deny answer the subagent.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span style="color:var(--work)">‹ Thread</span><span>9:41</span></div>
|
||||||
|
<div class="card" style="--c:var(--you)"><div class="meta">From subagent</div><div class="what" style="font-size:13px">Check Panama PATH</div><div class="mono" style="margin-top:3px">brew install jq</div>
|
||||||
|
<div class="acts"><span style="background:var(--you);color:#000">Allow</span><span style="background:#2c2c2e">Deny</span></div></div>
|
||||||
|
<div class="why" style="padding:0 6px">Delegated a PATH check to the Mac mini. Waiting on it before…</div></div></div><figcaption><b>Parent thread.</b> The subagent's request shows above the parent's messages, labeled with where it came from.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span>Recent</span><span>9:41</span></div>
|
||||||
|
<div class="swipe"><div class="card" style="--c:var(--done)"><div class="meta">Desktop · wristcode</div><div class="what" style="font-size:14px">Status screens</div></div><div class="act">✓<br>Settle</div></div>
|
||||||
|
<div class="card" style="--c:var(--done)"><div class="meta">server-gib · Panama</div><div class="what" style="font-size:14px">Fix hyprlock crash</div></div>
|
||||||
|
<div class="card" style="--c:var(--bad)"><div class="meta">Laptop · bill-tracker</div><div class="what" style="font-size:14px">Receipt OCR</div></div></div></div><figcaption><b>Settle by swipe.</b> Swipe a Recent row left for Settle. It leaves the feed, the same as settling in T3.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span style="color:var(--work)">‹ Thread</span><span>9:41</span></div>
|
||||||
|
<div class="why" style="padding:0 6px 6px">Done. Status, environment and notification screens are in TestFlight build 202611011516.</div>
|
||||||
|
<span class="big" style="background:var(--card)">Reply</span>
|
||||||
|
<span class="big" style="background:var(--work);color:#000">Settle</span></div></div><figcaption><b>Thread detail.</b> Finished threads get a Settle button under Reply.</figcaption></figure>
|
||||||
|
</div></body></html>
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>WristCode delegates B: nested under the parent</title>
|
||||||
|
<style>
|
||||||
|
:root { --you:#ffb02e; --work:#4fd1c5; --done:#6b6b70; --card:#17171a; --bad:#ff6b5e; }
|
||||||
|
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; position:relative; }
|
||||||
|
.top { display:flex; justify-content:space-between; align-items:baseline; padding:12px 8px 4px; font-weight:600; font-size:15px; }
|
||||||
|
.card { background:var(--card); border-radius:18px; padding:9px 11px; margin-bottom:6px; border-left:4px solid var(--c); }
|
||||||
|
.meta { font-size:11px; color:var(--c); font-weight:600; }
|
||||||
|
.what { font-size:15px; font-weight:600; line-height:1.2; margin-top:1px; }
|
||||||
|
.why { font-size:12px; color:#aeaeb2; margin-top:3px; line-height:1.25; }
|
||||||
|
.mono { font-family:"SF Mono",ui-monospace,monospace; font-size:11px; }
|
||||||
|
.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:10px; font-size:15px; font-weight:700; margin-bottom:6px; }
|
||||||
|
.label { font-size:11px; color:#aeaeb2; padding:4px 6px 3px; font-weight:600; display:flex; justify-content:space-between; }
|
||||||
|
.sub { margin:-2px 0 6px 14px; background:#101012; border-radius:14px; padding:7px 9px; border-left:3px solid var(--you); }
|
||||||
|
.chip { display:inline-block; font-size:10px; font-weight:700; border-radius:7px; padding:1px 6px; background:#3d2f12; color:var(--you); }
|
||||||
|
.row { display:flex; align-items:center; gap:6px; }
|
||||||
|
.swipe { display:flex; margin-bottom:6px; }
|
||||||
|
.swipe .card { flex:1; margin:0; border-radius:18px 0 0 18px; }
|
||||||
|
.swipe .act { width:58px; background:var(--work); color:#000; border-radius:0 18px 18px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
|
||||||
|
</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="card" style="--c:var(--you)"><div class="meta">Mac mini · WristLab</div><div class="what">HomeLab Stats Apple Watch App</div><div class="why">Waiting on 1 subagent</div></div>
|
||||||
|
<div class="sub"><div class="row"><span class="chip">↳ subagent</span><span style="font-size:11px;color:#aeaeb2">Check Panama PATH</span></div><div class="mono" style="margin-top:4px">brew install jq</div>
|
||||||
|
<div class="acts"><span style="background:var(--you);color:#000">Allow</span><span style="background:#2c2c2e">Deny</span></div></div></div></div><figcaption><b>Feed.</b> The parent keeps its own card. The subagent's request hangs under it, indented, so the parent and child read as two things.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span style="color:var(--work)">‹ Thread</span><span>9:41</span></div>
|
||||||
|
<div class="label"><span>Subagents</span></div>
|
||||||
|
<div class="card" style="--c:var(--you)"><div class="what" style="font-size:13px">Check Panama PATH</div><div class="meta">Needs approval</div></div>
|
||||||
|
<div class="card" style="--c:var(--work)"><div class="what" style="font-size:13px">Survey Mac Claude setup</div><div class="meta">Working</div></div></div></div><figcaption><b>Parent thread.</b> A Subagents list at the top while any are active. Tap one to approve, or to reply if it was delegated.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span>Recent</span><span>9:41</span></div>
|
||||||
|
<div class="label"><span>Finished today</span><span style="color:var(--work)">Settle all</span></div>
|
||||||
|
<div class="card" style="--c:var(--done)"><div class="meta">Desktop · wristcode</div><div class="what" style="font-size:14px">Status screens</div></div>
|
||||||
|
<div class="card" style="--c:var(--done)"><div class="meta">server-gib · Panama</div><div class="what" style="font-size:14px">Fix hyprlock crash</div></div></div></div><figcaption><b>Settle all.</b> One tap clears every finished thread in Recent. Failed ones stay unless you settle them one by one.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span style="color:var(--work)">‹ Thread</span><span>9:41</span></div>
|
||||||
|
<div class="why" style="padding:0 6px 6px">Done. Status, environment and notification screens are in TestFlight build 202611011516.</div>
|
||||||
|
<span class="big" style="background:var(--card)">Reply</span>
|
||||||
|
<span class="big" style="background:var(--work);color:#000">Settle</span></div></div><figcaption><b>Thread detail.</b> Same Settle button as A.</figcaption></figure>
|
||||||
|
</div></body></html>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>WristCode delegates C: request as its own card</title>
|
||||||
|
<style>
|
||||||
|
:root { --you:#ffb02e; --work:#4fd1c5; --done:#6b6b70; --card:#17171a; --bad:#ff6b5e; }
|
||||||
|
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; position:relative; }
|
||||||
|
.top { display:flex; justify-content:space-between; align-items:baseline; padding:12px 8px 4px; font-weight:600; font-size:15px; }
|
||||||
|
.card { background:var(--card); border-radius:18px; padding:9px 11px; margin-bottom:6px; border-left:4px solid var(--c); }
|
||||||
|
.meta { font-size:11px; color:var(--c); font-weight:600; }
|
||||||
|
.what { font-size:15px; font-weight:600; line-height:1.2; margin-top:1px; }
|
||||||
|
.why { font-size:12px; color:#aeaeb2; margin-top:3px; line-height:1.25; }
|
||||||
|
.mono { font-family:"SF Mono",ui-monospace,monospace; font-size:11px; }
|
||||||
|
.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:10px; font-size:15px; font-weight:700; margin-bottom:6px; }
|
||||||
|
.label { font-size:11px; color:#aeaeb2; padding:4px 6px 3px; font-weight:600; display:flex; justify-content:space-between; }
|
||||||
|
.sub { margin:-2px 0 6px 14px; background:#101012; border-radius:14px; padding:7px 9px; border-left:3px solid var(--you); }
|
||||||
|
.chip { display:inline-block; font-size:10px; font-weight:700; border-radius:7px; padding:1px 6px; background:#3d2f12; color:var(--you); }
|
||||||
|
.row { display:flex; align-items:center; gap:6px; }
|
||||||
|
.swipe { display:flex; margin-bottom:6px; }
|
||||||
|
.swipe .card { flex:1; margin:0; border-radius:18px 0 0 18px; }
|
||||||
|
.swipe .act { width:58px; background:var(--work); color:#000; border-radius:0 18px 18px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
|
||||||
|
</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="card" style="--c:var(--you)"><div class="meta">Mac mini · WristLab · subagent</div><div class="what">brew install jq?</div><div class="why">For HomeLab Stats Apple Watch App</div>
|
||||||
|
<div class="acts"><span style="background:var(--you);color:#000">Allow</span><span style="background:#2c2c2e">Deny</span></div></div></div></div><figcaption><b>Feed.</b> The request is an ordinary needs-you card. The command is the headline, and the second line says which of your threads it is for.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span style="color:var(--work)">‹ Request</span><span>9:41</span></div>
|
||||||
|
<div class="why" style="padding:0 6px">Subagent <b style="color:#fff">Check Panama PATH</b>, started by</div>
|
||||||
|
<div class="card" style="--c:var(--done);margin-top:6px"><div class="what" style="font-size:13px">HomeLab Stats Apple Watch App</div><div class="meta">Open parent ›</div></div>
|
||||||
|
<div class="mono" style="padding:0 6px">brew install jq</div></div></div><figcaption><b>Request detail.</b> Opens the subagent's request, with a link up to the parent thread.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span>Recent</span><span>9:41</span></div>
|
||||||
|
<div class="card" style="--c:var(--done)"><div class="row"><div style="flex:1"><div class="meta">Desktop · wristcode</div><div class="what" style="font-size:14px">Status screens</div></div><span style="width:26px;height:26px;border-radius:13px;background:#1f3b38;color:var(--work);display:flex;align-items:center;justify-content:center;font-weight:700">✓</span></div></div>
|
||||||
|
<div class="card" style="--c:var(--done)"><div class="row"><div style="flex:1"><div class="meta">server-gib · Panama</div><div class="what" style="font-size:14px">Fix hyprlock crash</div></div><span style="width:26px;height:26px;border-radius:13px;background:#1f3b38;color:var(--work);display:flex;align-items:center;justify-content:center;font-weight:700">✓</span></div></div></div></div><figcaption><b>Settle in place.</b> A check on every Recent row. Visible without knowing to swipe, but each row is busier.</figcaption></figure>
|
||||||
|
<figure><div class="bezel"><div class="screen"><div class="top"><span style="color:var(--work)">‹ Thread</span><span>9:41</span></div>
|
||||||
|
<div class="why" style="padding:0 6px 6px">Done. Status, environment and notification screens are in TestFlight build 202611011516.</div>
|
||||||
|
<span class="big" style="background:var(--card)">Reply</span>
|
||||||
|
<span class="big" style="background:var(--work);color:#000">Settle</span></div></div><figcaption><b>Thread detail.</b> Same Settle button as A.</figcaption></figure>
|
||||||
|
</div></body></html>
|
||||||
Reference in new issue
Block a user