mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-20 15:09:57 +02:00
chore: remove obsolete monitor visibility design assets (#16351)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The repository includes pages and wireframes used during product design. > - The old monitor visibility prototype is no longer needed. > - Repository searches found no references to this folder outside the folder itself. > - This pull request removes the unused page, images, wireframes, and publishing state. > - The repository no longer carries these obsolete design assets. ## Linked Issues or Issue Description **What happened?** An obsolete monitor visibility prototype remains in the repository after its design work ended. **Expected behavior** Remove the unused prototype and its supporting assets. **Steps to reproduce** Inspect the design directory. The unused monitor visibility page and wireframes are still present. **Paperclip version or commit** Based on `66424362a85`. **Deployment mode** All deployment modes. This is repository cleanup. ## What Changed - Remove eleven unused design files: the prototype page, publishing state, two screenshots, and seven SVG wireframes. - Preserve the agent's saved patch exactly. Its deletion patch applies cleanly to the current base. ## Verification - `git apply --check` passed for the saved patch. - Repository search found no external references to the deleted folder. - `git diff --check` passed. - `node scripts/check-maps.mjs` passed. This is a structural check. - `pnpm build` and `pnpm -r typecheck`: passed. - `node --test scripts/check-maps.test.mjs`: passed. - `pnpm test:run`: incomplete locally. The run encountered embedded PostgreSQL startup failures and skipped affected database suites. This is not a full local test pass. - All CI checks passed on `fe340de5c052cb680f8803c106368a0439025103`, including the full test matrix, build, and typecheck. Optional Storybook jobs were skipped. - Apex review: 5/5 on the same head, with no unresolved review threads. ## Risks - Someone may still use the old design files outside this repository. Git history preserves them. - No application source, dependencies, API contracts, or deployment settings change. ## Model Used OpenAI GPT-6 through Codex, with reasoning, tool use, and code execution. The exact serving snapshot ID and context window size are not exposed in this session. The patch was recovered from an earlier Paperclip agent run. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above (none found) - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass (the map suite; full-suite limits are described above) - [x] I have added or updated tests where applicable (no test applies to deletion of unused design assets) - [x] I have updated relevant documentation to reflect my changes (obsolete design documentation removed) - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Devin FoleyandPaperclip authored and GitHub committed
1 parent
66424362a8
commit
f467a239f0
11 files changed
-1098
No files matched your search
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"bucket": "pages.paperclip.ing",
|
||||
"prefix": "pap-14557-monitor-visibility/",
|
||||
"slug": "pap-14557-monitor-visibility",
|
||||
"url": "https://pages.paperclip.ing/pap-14557-monitor-visibility/",
|
||||
"baseUrl": "https://pages.paperclip.ing",
|
||||
"publishedAt": "2026-07-17T15:51:31Z",
|
||||
"sourceHash": "4d276364eb4e122d782247da6f1f0996763c12175ec0d7efa8ac7a0568fb6f2c",
|
||||
"version": 1
|
||||
}
|
||||
@@ -1,420 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PAP-14557 — Monitor visibility wireframes</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #fafaf8;
|
||||
--panel: #ffffff;
|
||||
--ink: #111111;
|
||||
--muted: #666666;
|
||||
--line: #e5e5e0;
|
||||
--accent: #d33;
|
||||
--maxw: 1200px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font: 15px/1.55 -apple-system, system-ui, "Segoe UI", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
|
||||
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
|
||||
|
||||
.toc {
|
||||
position: sticky; top: 0; align-self: start;
|
||||
height: 100vh; overflow: auto;
|
||||
padding: 24px 16px 24px 24px;
|
||||
border-right: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
font-size: 13px;
|
||||
z-index: 20;
|
||||
}
|
||||
.toc h1 { font-size: 14px; margin: 0 0 4px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
|
||||
.toc h2 { font-size: 12px; margin: 24px 0 6px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
|
||||
.toc a { display: block; text-decoration: none; padding: 6px 8px; margin-left: -8px; border-radius: 4px; color: var(--ink); }
|
||||
.toc a:hover { background: var(--bg); }
|
||||
.toc .num { display: inline-block; width: 22px; color: var(--muted); }
|
||||
.toc .toc-summary { display: none; }
|
||||
.toc .toc-body { display: block; }
|
||||
|
||||
main { padding: 48px 56px 96px; max-width: 1300px; min-width: 0; }
|
||||
|
||||
header.hero { max-width: var(--maxw); margin-bottom: 64px; }
|
||||
header.hero .crumb { color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
|
||||
header.hero h1 { font-size: 36px; line-height: 1.15; margin: 8px 0 16px; }
|
||||
header.hero p { color: var(--muted); max-width: 720px; font-size: 16px; }
|
||||
header.hero .pills { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
header.hero .pill { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); }
|
||||
|
||||
section { scroll-margin-top: 24px; max-width: var(--maxw); margin-bottom: 96px; }
|
||||
section .lede { color: var(--muted); margin: 0 0 12px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
|
||||
section h2 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; }
|
||||
section h2 .step-num { display: inline-block; width: 40px; color: var(--muted); }
|
||||
section h3 { font-size: 16px; margin: 24px 0 8px; }
|
||||
section .desc { color: var(--muted); margin: 0 0 24px; max-width: 760px; }
|
||||
|
||||
.grid {
|
||||
display: grid; gap: 24px;
|
||||
grid-template-columns: minmax(0, 1.4fr) 220px minmax(0, 0.9fr);
|
||||
align-items: start;
|
||||
}
|
||||
.grid.no-mobile { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); }
|
||||
@media (max-width: 1180px) {
|
||||
.grid { grid-template-columns: minmax(0, 1fr) 200px; }
|
||||
.grid.no-mobile { grid-template-columns: minmax(0, 1fr); }
|
||||
.grid > .notes-col { grid-column: 1 / -1; }
|
||||
}
|
||||
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } .grid > .mobile-col { max-width: 280px; } }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.shell { grid-template-columns: 1fr; }
|
||||
.toc {
|
||||
position: sticky; top: 0;
|
||||
height: auto; max-height: 60vh;
|
||||
padding: 12px 16px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.toc .toc-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.toc .toc-summary::-webkit-details-marker { display: none; }
|
||||
.toc .toc-summary .title { font-size: 13px; font-weight: 600; }
|
||||
.toc .toc-summary .crumb { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
|
||||
.toc .toc-summary .chevron {
|
||||
width: 10px; height: 10px;
|
||||
border-right: 1.5px solid var(--ink);
|
||||
border-bottom: 1.5px solid var(--ink);
|
||||
transform: rotate(45deg);
|
||||
transition: transform 120ms ease;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.toc[open] .toc-summary .chevron { transform: rotate(225deg) translate(-2px, -2px); }
|
||||
.toc .toc-body { display: none; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
|
||||
.toc[open] .toc-body { display: block; }
|
||||
main { padding: 24px 20px 64px; }
|
||||
header.hero { margin-bottom: 40px; }
|
||||
header.hero h1 { font-size: 28px; }
|
||||
header.hero p { font-size: 15px; }
|
||||
section { margin-bottom: 64px; scroll-margin-top: 80px; }
|
||||
section h2 { font-size: 24px; }
|
||||
section h2 .step-num { width: 32px; }
|
||||
.flow-section { padding: 20px; margin-bottom: 40px; scroll-margin-top: 80px; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
main { padding: 16px 14px 56px; }
|
||||
header.hero { margin-bottom: 32px; }
|
||||
header.hero h1 { font-size: 24px; line-height: 1.2; }
|
||||
header.hero p { font-size: 14px; }
|
||||
section { margin-bottom: 48px; }
|
||||
section h2 { font-size: 20px; line-height: 1.25; }
|
||||
section h2 .step-num { width: 28px; }
|
||||
section h3 { font-size: 15px; margin: 20px 0 6px; }
|
||||
section .desc { font-size: 14px; }
|
||||
.grid { gap: 16px; }
|
||||
.flow-section { padding: 16px; border-radius: 8px; }
|
||||
.wire .label { padding: 8px 10px; font-size: 11px; gap: 8px; }
|
||||
body { font-size: 14px; }
|
||||
}
|
||||
|
||||
.wire {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: zoom-in;
|
||||
transition: transform 80ms ease, box-shadow 80ms ease;
|
||||
}
|
||||
.wire:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
|
||||
.wire .label {
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.wire img { display: block; width: 100%; height: auto; background: #fff; }
|
||||
.wire.mobile-wire img { max-width: 220px; margin: 0 auto; }
|
||||
|
||||
.ref {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ref .label { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.ref img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; cursor: zoom-in; }
|
||||
|
||||
.notes ul { padding-left: 20px; margin: 8px 0; }
|
||||
.notes li { margin-bottom: 6px; }
|
||||
.notes .why {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-left: 3px solid var(--ink);
|
||||
padding: 14px 18px;
|
||||
border-radius: 4px;
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.flow-section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 32px; margin-bottom: 64px; max-width: var(--maxw); }
|
||||
.flow-section h2 { margin-top: 0; }
|
||||
.flow-section .wire { margin-top: 16px; }
|
||||
|
||||
.lightbox {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.86);
|
||||
display: none;
|
||||
align-items: center; justify-content: center;
|
||||
z-index: 100;
|
||||
cursor: zoom-out;
|
||||
padding: 32px;
|
||||
}
|
||||
.lightbox.open { display: flex; }
|
||||
.lightbox img { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,0.4); border-radius: 4px; }
|
||||
.lightbox .close { position: absolute; top: 16px; right: 24px; font-size: 28px; color: #fff; cursor: pointer; }
|
||||
.lightbox .caption { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: 0.9; }
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.lightbox { padding: 12px; overflow: auto; touch-action: pinch-zoom; }
|
||||
.lightbox.open { display: block; }
|
||||
.lightbox img { display: block; width: 100%; max-width: none; max-height: none; height: auto; margin: 40px auto 56px; box-shadow: none; }
|
||||
.lightbox .close { position: fixed; top: 8px; right: 12px; font-size: 32px; }
|
||||
.lightbox .caption { position: fixed; left: 50%; transform: translateX(-50%); font-size: 12px; bottom: 12px; text-align: center; background: rgba(0,0,0,0.7); border-radius: 4px; padding: 6px 12px; }
|
||||
}
|
||||
|
||||
.footer { color: var(--muted); font-size: 12px; max-width: var(--maxw); border-top: 1px solid var(--line); padding-top: 24px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<details class="toc">
|
||||
<summary class="toc-summary">
|
||||
<span>
|
||||
<span class="crumb">PAP-14557 · Monitor visibility</span><br>
|
||||
<span class="title">Jump to a screen</span>
|
||||
</span>
|
||||
<span class="chevron" aria-hidden="true"></span>
|
||||
</summary>
|
||||
<nav class="toc-body" aria-label="Section navigation">
|
||||
<h1>PAP-14557</h1>
|
||||
<div style="font-size: 13px; color: var(--muted); margin-bottom: 16px;">Monitor visibility wireframes</div>
|
||||
|
||||
<h2>Flow</h2>
|
||||
<a href="#flow"><span class="num">⤳</span>The three surfaces</a>
|
||||
|
||||
<h2>Screens</h2>
|
||||
<a href="#s1"><span class="num">1</span>Task page top — banner</a>
|
||||
<a href="#s2"><span class="num">2</span>Above the composer — strip</a>
|
||||
<a href="#s3"><span class="num">3</span>Properties row + tooltip</a>
|
||||
<a href="#s4"><span class="num">4</span>State matrix + copy rules</a>
|
||||
|
||||
<h2>Open questions</h2>
|
||||
<a href="#open"><span class="num">?</span>For reviewer</a>
|
||||
</nav>
|
||||
</details>
|
||||
|
||||
<main>
|
||||
<header class="hero">
|
||||
<div class="crumb">PAP-14557 · Wireframes</div>
|
||||
<h1>Make a waiting monitor obvious</h1>
|
||||
<p>When an issue has a monitor armed, nothing on the page says so unless you squint at a truncated properties row. These wireframes surface the same monitor state in three places — a banner at the top of the task page, a strip directly above the reply composer, and a readable two-line properties row with a hover tooltip for full details. Every surface shows both the exact time and how far away it is from now.</p>
|
||||
<div class="pills">
|
||||
<span class="pill">4 screens + 2 mobile</span>
|
||||
<span class="pill">Desktop + mobile</span>
|
||||
<span class="pill">Lo-fi · monochrome</span>
|
||||
<span class="pill">Click any wireframe to zoom</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="flow" class="flow-section">
|
||||
<div class="lede">Flow</div>
|
||||
<h2>One monitor state, three surfaces</h2>
|
||||
<p class="desc">The banner, the composer strip, and the properties row are all fed by the same state + copy rules (screen 04), so they can never disagree. Red dashed marks are annotation callouts, not UI.</p>
|
||||
<div class="wire" data-zoom data-caption="Flow — the three surfaces">
|
||||
<div class="label"><span>flow.svg</span><span>1280×304</span></div>
|
||||
<img src="wireframes/flow.svg" alt="Flow diagram of the three monitor surfaces" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="s1">
|
||||
<div class="lede">Step 1 · Task page top</div>
|
||||
<h2><span class="step-num">1.</span>Monitor banner under the title</h2>
|
||||
<p class="desc">A full-width banner sits between the issue title and the description whenever a monitor is scheduled, due, or overdue. Headline leads with the relative time ("resumes in 2h 12m"); the second line gives the exact local time, the attempt count, and what is being watched. "Check now" fires the monitor immediately; "Edit" opens the existing monitor editor.</p>
|
||||
<div class="grid">
|
||||
<div class="wire" data-zoom data-caption="01 · Task page top with monitor banner (desktop)">
|
||||
<div class="label"><span>01-issue-top.svg</span><span>1280×800 · desktop</span></div>
|
||||
<img src="wireframes/01-issue-top.svg" alt="Task page top with monitor banner (desktop) wireframe" />
|
||||
</div>
|
||||
<div class="wire mobile-wire mobile-col" data-zoom data-caption="01 · Task page (mobile)">
|
||||
<div class="label"><span>mobile</span><span>375×812</span></div>
|
||||
<img src="wireframes/01-issue-top-mobile.svg" alt="Task page with monitor banner (mobile) wireframe" />
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<div class="notes">
|
||||
<h3>Annotations</h3>
|
||||
<ul>
|
||||
<li><b>1</b> — Monitor banner: bold relative time first, exact time + attempt + watched service second, actions on the right. On mobile the actions drop below the text.</li>
|
||||
<li><b>2</b> — Properties Monitor row switches to the two-line layout (detail on screen 3). On mobile (callouts 2–3 on the phone frame) the collapsed properties bar carries a compact "in 2h 12m" chip and the strip repeats above the composer.</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> today the only always-visible signal is the truncated properties row; the existing "Monitor scheduled" card renders in the description area where it scrolls away and is easy to miss. The banner is pinned to the page header area so the very first glance answers "why is nothing happening, and when will it?"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="s2">
|
||||
<div class="lede">Step 2 · Thread bottom</div>
|
||||
<h2><span class="step-num">2.</span>Strip above the reply composer</h2>
|
||||
<p class="desc">The bottom of the thread is where you go to ask "what's happening?" — so the answer sits right there. A compact strip directly above the composer repeats the resume time (exact + relative + attempt) with a "Check now" action, and a one-line hint under the composer explains that replying wakes the agent before the scheduled check.</p>
|
||||
<div class="grid">
|
||||
<div class="wire" data-zoom data-caption="02 · Monitor strip above the composer (desktop)">
|
||||
<div class="label"><span>02-composer.svg</span><span>1280×800 · desktop</span></div>
|
||||
<img src="wireframes/02-composer.svg" alt="Monitor strip above composer (desktop) wireframe" />
|
||||
</div>
|
||||
<div class="wire mobile-wire mobile-col" data-zoom data-caption="02 · Monitor strip above the composer (mobile)">
|
||||
<div class="label"><span>mobile</span><span>375×812</span></div>
|
||||
<img src="wireframes/02-composer-mobile.svg" alt="Monitor strip above composer (mobile) wireframe" />
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<div class="ref">
|
||||
<div class="label"><span>Reference</span><span>current thread bottom</span></div>
|
||||
<img src="screenshots/current-thread-bottom.png" alt="Current thread bottom with no monitor indication" data-zoom />
|
||||
</div>
|
||||
<div class="notes">
|
||||
<h3>Annotations</h3>
|
||||
<ul>
|
||||
<li><b>1</b> — Monitor strip: anchored to the composer (scrolls with it), not part of the comment list. Same copy system as the banner.</li>
|
||||
<li><b>2</b> — Wake hint under the composer: sets the expectation that sending a message preempts the scheduled check.</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> in the reference screenshot the last comment says a monitor is armed only in prose ("issue monitor fires 16:08Z"), and once more comments land even that disappears. The strip keeps the resume time visible at the exact spot where a human decides whether to wait or to nudge.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="s3">
|
||||
<div class="lede">Step 3 · Properties pane</div>
|
||||
<h2><span class="step-num">3.</span>Readable Monitor row + details tooltip</h2>
|
||||
<p class="desc">The properties row stops cramming label, date, and attempt onto one colliding line. Collapsed: two lines — bold relative time, then muted "absolute time · Attempt N". Hover (tap on mobile) opens a details card with the full timestamp incl. timezone, watched service, notes, last-trigger info, and quick actions. Click still opens the existing editor popover.</p>
|
||||
<div class="grid no-mobile">
|
||||
<div class="wire" data-zoom data-caption="03 · Properties Monitor row — before / after / hover">
|
||||
<div class="label"><span>03-properties-monitor.svg</span><span>1280×800 · component sheet</span></div>
|
||||
<img src="wireframes/03-properties-monitor.svg" alt="Properties monitor row redesign wireframe" />
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<div class="ref">
|
||||
<div class="label"><span>Reference</span><span>current properties row</span></div>
|
||||
<img src="screenshots/current-properties-monitor.png" alt="Current cramped monitor properties row" data-zoom />
|
||||
</div>
|
||||
<div class="notes">
|
||||
<h3>Annotations</h3>
|
||||
<ul>
|
||||
<li><b>1</b> — Current failure: "Next check" truncates to "Ne…", the date shows the year but no time, and "Attempt 1" wraps into a two-line crumb.</li>
|
||||
<li><b>2</b> — Proposed collapsed row: relative time is the headline; absolute time and attempt live on a second muted line sized for the 352px pane.</li>
|
||||
<li><b>3</b> — Hover/tap tooltip: exact timestamp with timezone, watched service, notes, last-trigger state, and Check now / Edit / Clear without opening the editor.</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> the row currently tries to show four facts in one 200px slot, so none of them are readable. Two lines fit the pane; everything else moves to a tooltip you summon only when you care about specifics.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="s4">
|
||||
<div class="lede">Step 4 · System</div>
|
||||
<h2><span class="step-num">4.</span>State matrix and copy rules</h2>
|
||||
<p class="desc">All three surfaces share one formatter. Relative time always leads and uses two units under 24h ("in 2h 12m", not "in 2h" — today's single-unit rounding is why the current UI feels vague). Overdue and due-now states get explicit copy instead of silently showing a past date.</p>
|
||||
<div class="grid no-mobile">
|
||||
<div class="wire" data-zoom data-caption="04 · Monitor state matrix">
|
||||
<div class="label"><span>04-states.svg</span><span>1280×800 · component sheet</span></div>
|
||||
<img src="wireframes/04-states.svg" alt="Monitor state matrix wireframe" />
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<div class="notes">
|
||||
<h3>States covered</h3>
|
||||
<ul>
|
||||
<li>Scheduled — under 1h / under 24h / beyond today.</li>
|
||||
<li>Retrying — attempt count > 1 gets visual weight.</li>
|
||||
<li>Due now / overdue — explicit copy, never a stale-looking past date.</li>
|
||||
<li>Cleared / none — muted, no clock icon, banner and strip hidden.</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> a single copy system means the banner, strip, and row can never disagree about when the task resumes, and edge states (overdue, cleared) stop looking like bugs.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="open">
|
||||
<div class="lede">For reviewer</div>
|
||||
<h2>Open questions</h2>
|
||||
<div class="notes">
|
||||
<ul>
|
||||
<li><b>Banner vs. existing card</b> — there is already an "IssueMonitorActivityCard" that renders in the description area. Proposal: promote/replace it with the pinned banner (screen 1) rather than showing both. OK?</li>
|
||||
<li><b>Strip stickiness</b> — should the composer strip scroll with the thread (inline, as drawn) or stick to the composer even mid-scroll? Drawn as anchored to the composer.</li>
|
||||
<li><b>Relative-time precision</b> — adopt the two-unit format ("in 2h 12m") everywhere, including the existing scheduled-retry row which uses the same formatter?</li>
|
||||
<li><b>Hover vs. click</b> — the properties row currently opens the editor on click. Proposal keeps click = editor, hover/tap = read-only details tooltip. Fine, or should tap open the editor directly on mobile?</li>
|
||||
<li><b>Live countdown</b> — should the relative time tick live (re-render every minute) or is on-load accuracy enough?</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="footer">
|
||||
Wireframes follow the in-tree <code>wireframe</code> skill house style — black on white, 1.5pt strokes, 8px grid, type sizes 12/14/20/28. Red dashed annotations are the call-out layer only and not part of the proposed UI.
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="lightbox" id="lb" aria-hidden="true">
|
||||
<span class="close" id="lbClose">×</span>
|
||||
<img id="lbImg" alt="" />
|
||||
<div class="caption" id="lbCap"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const lb = document.getElementById('lb');
|
||||
const lbImg = document.getElementById('lbImg');
|
||||
const lbCap = document.getElementById('lbCap');
|
||||
const lbClose = document.getElementById('lbClose');
|
||||
|
||||
document.querySelectorAll('[data-zoom]').forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
const target = el.tagName === 'IMG' ? el : el.querySelector('img');
|
||||
if (!target) return;
|
||||
lbImg.src = target.src;
|
||||
lbImg.alt = target.alt;
|
||||
lbCap.textContent = el.dataset.caption || target.alt || '';
|
||||
lb.classList.add('open');
|
||||
});
|
||||
});
|
||||
|
||||
function close() { lb.classList.remove('open'); }
|
||||
lb.addEventListener('click', close);
|
||||
lbClose.addEventListener('click', close);
|
||||
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
|
||||
|
||||
const toc = document.querySelector('details.toc');
|
||||
if (toc) {
|
||||
const mq = window.matchMedia('(max-width: 900px)');
|
||||
const apply = () => { toc.open = !mq.matches; };
|
||||
apply();
|
||||
mq.addEventListener('change', apply);
|
||||
toc.querySelectorAll('.toc-body a').forEach((a) => {
|
||||
a.addEventListener('click', () => { if (mq.matches) toc.open = false; });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
@@ -1,105 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="375" height="812" viewBox="0 0 375 812"
|
||||
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
|
||||
<!-- 01 · Issue page (mobile) — banner, properties chip, composer strip. 375×812 -->
|
||||
<rect x="0" y="0" width="375" height="812" />
|
||||
|
||||
<!-- top bar -->
|
||||
<line x1="0" y1="56" x2="375" y2="56" />
|
||||
<polyline points="28,20 20,28 28,36" fill="none" />
|
||||
<text x="44" y="33" font-size="14" font-weight="600" stroke="none" fill="#000">PAP-14557</text>
|
||||
<circle cx="343" cy="28" r="12" fill="#e6e6e6" />
|
||||
|
||||
<!-- title + pill -->
|
||||
<text x="16" y="92" font-size="20" font-weight="700" stroke="none" fill="#000">Nightly model comparison sweep</text>
|
||||
<g transform="translate(16,108)">
|
||||
<rect width="96" height="24" rx="12" />
|
||||
<text x="48" y="16" font-size="12" text-anchor="middle" stroke="none" fill="#000">In Progress</text>
|
||||
</g>
|
||||
|
||||
<!-- NEW: monitor banner -->
|
||||
<g transform="translate(16,148)">
|
||||
<rect width="344" height="112" rx="8" />
|
||||
<circle cx="32" cy="32" r="12" />
|
||||
<line x1="32" y1="32" x2="32" y2="24" />
|
||||
<line x1="32" y1="32" x2="38" y2="32" />
|
||||
<text x="56" y="28" font-size="14" font-weight="600" stroke="none" fill="#000">Waiting on monitor — in 2h 12m</text>
|
||||
<text x="56" y="48" font-size="12" stroke="none" fill="#666">Thu Jul 17, 4:08 PM · Attempt 1</text>
|
||||
<g transform="translate(56,64)">
|
||||
<rect width="104" height="32" rx="4" />
|
||||
<text x="52" y="21" font-size="14" text-anchor="middle" stroke="none" fill="#000">Check now</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- description placeholder -->
|
||||
<g transform="translate(16,292)">
|
||||
<line x1="0" y1="8" x2="344" y2="8" stroke="#666" />
|
||||
<line x1="0" y1="24" x2="344" y2="24" stroke="#666" />
|
||||
<line x1="0" y1="40" x2="240" y2="40" stroke="#666" />
|
||||
</g>
|
||||
|
||||
<!-- comment card -->
|
||||
<g transform="translate(16,356)">
|
||||
<rect width="344" height="120" rx="8" />
|
||||
<circle cx="28" cy="28" r="12" fill="#e6e6e6" />
|
||||
<text x="48" y="24" font-size="14" font-weight="600" stroke="none" fill="#000">Senior Engineer Fable</text>
|
||||
<text x="48" y="40" font-size="12" stroke="none" fill="#666">15m ago</text>
|
||||
<line x1="16" y1="60" x2="328" y2="60" stroke="#666" />
|
||||
<line x1="16" y1="76" x2="328" y2="76" stroke="#666" />
|
||||
<line x1="16" y1="92" x2="224" y2="92" stroke="#666" />
|
||||
</g>
|
||||
|
||||
<!-- collapsed properties row with monitor chip -->
|
||||
<g transform="translate(16,500)">
|
||||
<rect width="344" height="48" rx="8" />
|
||||
<text x="16" y="29" font-size="14" font-weight="600" stroke="none" fill="#000">Properties</text>
|
||||
<circle cx="240" cy="24" r="7" />
|
||||
<line x1="240" y1="24" x2="240" y2="19" />
|
||||
<line x1="240" y1="24" x2="244" y2="24" />
|
||||
<text x="252" y="28" font-size="12" stroke="none" fill="#666">in 2h 12m</text>
|
||||
<polyline points="324,20 332,28 324,36" fill="none" />
|
||||
</g>
|
||||
|
||||
<!-- NEW: monitor strip above composer -->
|
||||
<g transform="translate(16,624)">
|
||||
<rect width="344" height="56" rx="8" />
|
||||
<circle cx="28" cy="28" r="10" />
|
||||
<line x1="28" y1="28" x2="28" y2="21" />
|
||||
<line x1="28" y1="28" x2="33" y2="28" />
|
||||
<text x="48" y="24" font-size="14" font-weight="600" stroke="none" fill="#000">Resumes in 2h 12m</text>
|
||||
<text x="48" y="42" font-size="12" stroke="none" fill="#666">Jul 17, 4:08 PM · Attempt 1</text>
|
||||
<text x="288" y="32" font-size="12" stroke="none" fill="#000">Check now</text>
|
||||
</g>
|
||||
|
||||
<!-- composer -->
|
||||
<g transform="translate(16,696)">
|
||||
<rect width="344" height="96" rx="8" />
|
||||
<text x="16" y="28" font-size="14" stroke="none" fill="#666">Reply…</text>
|
||||
<g transform="translate(16,48)">
|
||||
<rect width="32" height="32" rx="4" />
|
||||
<line x1="10" y1="22" x2="22" y2="10" />
|
||||
</g>
|
||||
<g transform="translate(240,48)">
|
||||
<rect width="88" height="32" rx="4" fill="#000" />
|
||||
<text x="44" y="21" font-size="14" text-anchor="middle" stroke="none" fill="#fff">Send</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="8" y="140" width="360" height="128" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(360,140)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text>
|
||||
</g>
|
||||
<rect x="224" y="508" width="112" height="32" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(216,504)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text>
|
||||
</g>
|
||||
<rect x="8" y="616" width="360" height="72" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(360,616)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">3</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.0 KiB |
@@ -1,100 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
|
||||
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
|
||||
<!-- 01 · Issue page top — monitor banner. Desktop 1280×800 -->
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<!-- top bar -->
|
||||
<line x1="0" y1="56" x2="1280" y2="56" />
|
||||
<text x="24" y="36" font-size="14" stroke="none" fill="#666">Issues /</text>
|
||||
<text x="88" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">PAP-14557</text>
|
||||
<circle cx="1240" cy="28" r="12" fill="#e6e6e6" />
|
||||
|
||||
<!-- properties rail divider -->
|
||||
<line x1="880" y1="56" x2="880" y2="800" />
|
||||
|
||||
<!-- title + status pill -->
|
||||
<text x="48" y="112" font-size="28" font-weight="700" stroke="none" fill="#000">Nightly model comparison sweep</text>
|
||||
<g transform="translate(48,128)">
|
||||
<rect width="104" height="24" rx="12" />
|
||||
<text x="52" y="16" font-size="12" text-anchor="middle" stroke="none" fill="#000">In Progress</text>
|
||||
</g>
|
||||
|
||||
<!-- NEW: monitor banner -->
|
||||
<g transform="translate(48,168)">
|
||||
<rect width="784" height="88" rx="8" />
|
||||
<!-- clock glyph -->
|
||||
<circle cx="40" cy="44" r="14" />
|
||||
<line x1="40" y1="44" x2="40" y2="35" />
|
||||
<line x1="40" y1="44" x2="47" y2="44" />
|
||||
<text x="72" y="40" font-size="14" font-weight="600" stroke="none" fill="#000">Waiting on monitor — resumes in 2h 12m</text>
|
||||
<text x="72" y="62" font-size="12" stroke="none" fill="#666">Thu Jul 17, 4:08 PM (your time) · Attempt 1 · Watching: vercel-deploy</text>
|
||||
<g transform="translate(568,28)">
|
||||
<rect width="104" height="32" rx="4" />
|
||||
<text x="52" y="21" font-size="14" text-anchor="middle" stroke="none" fill="#000">Check now</text>
|
||||
</g>
|
||||
<g transform="translate(688,28)">
|
||||
<rect width="72" height="32" rx="4" />
|
||||
<text x="36" y="21" font-size="14" text-anchor="middle" stroke="none" fill="#000">Edit</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- description placeholder -->
|
||||
<g transform="translate(48,288)">
|
||||
<line x1="0" y1="8" x2="784" y2="8" stroke="#666" />
|
||||
<line x1="0" y1="24" x2="784" y2="24" stroke="#666" />
|
||||
<line x1="0" y1="40" x2="520" y2="40" stroke="#666" />
|
||||
</g>
|
||||
|
||||
<line x1="48" y1="360" x2="832" y2="360" />
|
||||
<text x="48" y="392" font-size="14" font-weight="600" stroke="none" fill="#000">Activity</text>
|
||||
|
||||
<!-- first comment card -->
|
||||
<g transform="translate(48,408)">
|
||||
<rect width="784" height="136" rx="8" />
|
||||
<circle cx="32" cy="32" r="16" fill="#e6e6e6" />
|
||||
<text x="56" y="28" font-size="14" font-weight="600" stroke="none" fill="#000">Senior Engineer Fable</text>
|
||||
<text x="720" y="28" font-size="12" stroke="none" fill="#666">15m ago</text>
|
||||
<line x1="56" y1="56" x2="744" y2="56" stroke="#666" />
|
||||
<line x1="56" y1="72" x2="744" y2="72" stroke="#666" />
|
||||
<line x1="56" y1="88" x2="744" y2="88" stroke="#666" />
|
||||
<line x1="56" y1="104" x2="480" y2="104" stroke="#666" />
|
||||
</g>
|
||||
<text x="440" y="584" font-size="12" text-anchor="middle" stroke="none" fill="#666">⌄ thread continues — see screen 02 for the composer</text>
|
||||
|
||||
<!-- properties rail -->
|
||||
<text x="904" y="96" font-size="12" stroke="none" fill="#666">PROPERTIES</text>
|
||||
<text x="904" y="136" font-size="12" stroke="none" fill="#666">Status</text>
|
||||
<text x="1032" y="136" font-size="14" stroke="none" fill="#000">In Progress</text>
|
||||
<text x="904" y="176" font-size="12" stroke="none" fill="#666">Priority</text>
|
||||
<text x="1032" y="176" font-size="14" stroke="none" fill="#000">Medium</text>
|
||||
<text x="904" y="216" font-size="12" stroke="none" fill="#666">Assignee</text>
|
||||
<circle cx="1040" cy="212" r="8" fill="#e6e6e6" />
|
||||
<text x="1056" y="216" font-size="14" stroke="none" fill="#000">Fable</text>
|
||||
<text x="904" y="256" font-size="12" stroke="none" fill="#666">Approvers</text>
|
||||
<text x="1032" y="256" font-size="14" stroke="none" fill="#666">None</text>
|
||||
|
||||
<!-- NEW: two-line monitor row -->
|
||||
<text x="904" y="304" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="1040" cy="300" r="7" />
|
||||
<line x1="1040" y1="300" x2="1040" y2="295" />
|
||||
<line x1="1040" y1="300" x2="1044" y2="300" />
|
||||
<text x="1056" y="304" font-size="14" font-weight="600" stroke="none" fill="#000">In 2h 12m</text>
|
||||
<text x="1056" y="324" font-size="12" stroke="none" fill="#666">Jul 17, 4:08 PM · Attempt 1</text>
|
||||
|
||||
<text x="904" y="376" font-size="12" stroke="none" fill="#666">Watchdog</text>
|
||||
<text x="1032" y="376" font-size="14" stroke="none" fill="#666">None</text>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="40" y="160" width="800" height="104" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(32,152)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text>
|
||||
</g>
|
||||
<rect x="896" y="284" width="376" height="48" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(888,276)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.2 KiB |
@@ -1,74 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="375" height="812" viewBox="0 0 375 812"
|
||||
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
|
||||
<!-- 02 · Thread bottom (mobile) — strip + composer. 375×812 -->
|
||||
<rect x="0" y="0" width="375" height="812" />
|
||||
|
||||
<!-- top bar -->
|
||||
<line x1="0" y1="56" x2="375" y2="56" />
|
||||
<polyline points="28,20 20,28 28,36" fill="none" />
|
||||
<text x="44" y="33" font-size="14" font-weight="600" stroke="none" fill="#000">PAP-14557</text>
|
||||
|
||||
<!-- last comment (cut off) -->
|
||||
<text x="188" y="80" font-size="12" text-anchor="middle" stroke="none" fill="#666">⌃ earlier comments</text>
|
||||
<g transform="translate(16,96)">
|
||||
<rect width="344" height="176" rx="8" />
|
||||
<circle cx="28" cy="28" r="12" fill="#e6e6e6" />
|
||||
<text x="48" y="24" font-size="14" font-weight="600" stroke="none" fill="#000">Senior Engineer Fable</text>
|
||||
<text x="48" y="40" font-size="12" stroke="none" fill="#666">15m ago</text>
|
||||
<line x1="16" y1="64" x2="328" y2="64" stroke="#666" />
|
||||
<line x1="16" y1="80" x2="328" y2="80" stroke="#666" />
|
||||
<line x1="16" y1="96" x2="328" y2="96" stroke="#666" />
|
||||
<text x="16" y="128" font-size="14" font-weight="600" stroke="none" fill="#000">Next action (armed):</text>
|
||||
<line x1="16" y1="148" x2="264" y2="148" stroke="#666" />
|
||||
</g>
|
||||
|
||||
<!-- previous-issue nav card -->
|
||||
<g transform="translate(16,296)">
|
||||
<rect width="280" height="56" rx="8" />
|
||||
<polyline points="20,20 14,28 20,36" fill="none" />
|
||||
<text x="32" y="24" font-size="12" stroke="none" fill="#666">Previous · PAP-14544</text>
|
||||
<text x="32" y="44" font-size="14" stroke="none" fill="#000">Phase 3 — rescore…</text>
|
||||
</g>
|
||||
|
||||
<!-- NEW: monitor strip -->
|
||||
<g transform="translate(16,536)">
|
||||
<rect width="344" height="88" rx="8" />
|
||||
<circle cx="28" cy="28" r="10" />
|
||||
<line x1="28" y1="28" x2="28" y2="21" />
|
||||
<line x1="28" y1="28" x2="33" y2="28" />
|
||||
<text x="48" y="26" font-size="14" font-weight="600" stroke="none" fill="#000">Resumes in 2h 12m</text>
|
||||
<text x="48" y="44" font-size="12" stroke="none" fill="#666">Thu Jul 17, 4:08 PM · Attempt 1</text>
|
||||
<g transform="translate(48,52)">
|
||||
<rect width="104" height="28" rx="4" />
|
||||
<text x="52" y="19" font-size="12" text-anchor="middle" stroke="none" fill="#000">Check now</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- composer -->
|
||||
<g transform="translate(16,640)">
|
||||
<rect width="344" height="136" rx="8" />
|
||||
<text x="16" y="32" font-size="14" stroke="none" fill="#666">Reply…</text>
|
||||
<g transform="translate(16,88)">
|
||||
<rect width="32" height="32" rx="4" />
|
||||
<line x1="10" y1="22" x2="22" y2="10" />
|
||||
</g>
|
||||
<g transform="translate(56,88)">
|
||||
<rect width="120" height="32" rx="16" />
|
||||
<text x="16" y="21" font-size="12" stroke="none" fill="#000">Agent mode</text>
|
||||
<polyline points="96,14 102,20 108,14" fill="none" />
|
||||
</g>
|
||||
<g transform="translate(240,88)">
|
||||
<rect width="88" height="32" rx="4" fill="#000" />
|
||||
<text x="44" y="21" font-size="14" text-anchor="middle" stroke="none" fill="#fff">Send</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="8" y="528" width="360" height="104" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(360,528)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
@@ -1,100 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
|
||||
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
|
||||
<!-- 02 · Thread bottom — monitor strip above the composer. Desktop 1280×800 -->
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<!-- top bar -->
|
||||
<line x1="0" y1="56" x2="1280" y2="56" />
|
||||
<text x="24" y="36" font-size="14" stroke="none" fill="#666">Issues /</text>
|
||||
<text x="88" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">PAP-14557</text>
|
||||
<circle cx="1240" cy="28" r="12" fill="#e6e6e6" />
|
||||
|
||||
<!-- properties rail divider + abbreviated rail -->
|
||||
<line x1="880" y1="56" x2="880" y2="800" />
|
||||
<text x="904" y="96" font-size="12" stroke="none" fill="#666">PROPERTIES</text>
|
||||
<text x="904" y="136" font-size="12" stroke="none" fill="#666">Status</text>
|
||||
<text x="1032" y="136" font-size="14" stroke="none" fill="#000">In Progress</text>
|
||||
<text x="904" y="184" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="1040" cy="180" r="7" />
|
||||
<line x1="1040" y1="180" x2="1040" y2="175" />
|
||||
<line x1="1040" y1="180" x2="1044" y2="180" />
|
||||
<text x="1056" y="184" font-size="14" font-weight="600" stroke="none" fill="#000">In 2h 12m</text>
|
||||
<text x="1056" y="204" font-size="12" stroke="none" fill="#666">Jul 17, 4:08 PM · Attempt 1</text>
|
||||
|
||||
<!-- last agent comment (cut off at top) -->
|
||||
<text x="440" y="76" font-size="12" text-anchor="middle" stroke="none" fill="#666">⌃ earlier comments</text>
|
||||
<g transform="translate(48,96)">
|
||||
<rect width="784" height="176" rx="8" />
|
||||
<circle cx="32" cy="32" r="16" fill="#e6e6e6" />
|
||||
<text x="56" y="28" font-size="14" font-weight="600" stroke="none" fill="#000">Senior Engineer Fable</text>
|
||||
<text x="720" y="28" font-size="12" stroke="none" fill="#666">15m ago</text>
|
||||
<line x1="56" y1="56" x2="744" y2="56" stroke="#666" />
|
||||
<line x1="56" y1="72" x2="744" y2="72" stroke="#666" />
|
||||
<line x1="56" y1="88" x2="744" y2="88" stroke="#666" />
|
||||
<text x="56" y="120" font-size="14" font-weight="600" stroke="none" fill="#000">Next action (armed):</text>
|
||||
<line x1="216" y1="116" x2="744" y2="116" stroke="#666" />
|
||||
<line x1="56" y1="140" x2="560" y2="140" stroke="#666" />
|
||||
</g>
|
||||
|
||||
<!-- previous-issue nav card -->
|
||||
<g transform="translate(48,304)">
|
||||
<rect width="384" height="64" rx="8" />
|
||||
<polyline points="24,24 16,32 24,40" fill="none" />
|
||||
<text x="40" y="28" font-size="12" stroke="none" fill="#666">Previous · PAP-14544</text>
|
||||
<text x="40" y="48" font-size="14" stroke="none" fill="#000">Phase 3 — rescore + gap re-runs…</text>
|
||||
</g>
|
||||
|
||||
<!-- NEW: monitor strip -->
|
||||
<g transform="translate(48,408)">
|
||||
<rect width="784" height="64" rx="8" />
|
||||
<circle cx="32" cy="32" r="12" />
|
||||
<line x1="32" y1="32" x2="32" y2="24" />
|
||||
<line x1="32" y1="32" x2="38" y2="32" />
|
||||
<text x="56" y="28" font-size="14" font-weight="600" stroke="none" fill="#000">Resumes in 2h 12m</text>
|
||||
<text x="56" y="48" font-size="12" stroke="none" fill="#666">Thu Jul 17, 4:08 PM · Attempt 1 · Watching: vercel-deploy</text>
|
||||
<g transform="translate(656,16)">
|
||||
<rect width="112" height="32" rx="4" />
|
||||
<text x="56" y="21" font-size="14" text-anchor="middle" stroke="none" fill="#000">Check now</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- composer -->
|
||||
<g transform="translate(48,496)">
|
||||
<rect width="784" height="152" rx="8" />
|
||||
<text x="16" y="36" font-size="14" stroke="none" fill="#666">Reply…</text>
|
||||
<g transform="translate(16,104)">
|
||||
<rect width="32" height="32" rx="4" />
|
||||
<line x1="10" y1="22" x2="22" y2="10" />
|
||||
</g>
|
||||
<g transform="translate(56,104)">
|
||||
<rect width="128" height="32" rx="16" />
|
||||
<text x="16" y="21" font-size="12" stroke="none" fill="#000">Agent mode</text>
|
||||
<polyline points="100,14 106,20 112,14" fill="none" />
|
||||
</g>
|
||||
<g transform="translate(432,104)">
|
||||
<rect width="192" height="32" rx="16" />
|
||||
<text x="96" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">Senior Engineer Fable</text>
|
||||
</g>
|
||||
<g transform="translate(640,104)">
|
||||
<rect width="128" height="32" rx="4" fill="#000" />
|
||||
<text x="64" y="21" font-size="14" text-anchor="middle" stroke="none" fill="#fff">Send</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- wake hint -->
|
||||
<text x="48" y="676" font-size="12" stroke="none" fill="#666">Sending a reply wakes the agent now — before the scheduled check.</text>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="40" y="400" width="800" height="80" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(32,392)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text>
|
||||
</g>
|
||||
<rect x="40" y="660" width="472" height="24" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(32,656)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.2 KiB |
@@ -1,121 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
|
||||
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
|
||||
<!-- 03 · Properties pane — Monitor row redesign (component sheet). Desktop 1280×800 -->
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<text x="48" y="56" font-size="20" font-weight="600" stroke="none" fill="#000">Properties pane — Monitor row redesign</text>
|
||||
<text x="48" y="80" font-size="12" stroke="none" fill="#666">Side pane fragment, 352px wide. The same row is reused in the mobile properties sheet.</text>
|
||||
|
||||
<!-- ===== Panel A · current ===== -->
|
||||
<text x="48" y="128" font-size="14" font-weight="600" stroke="none" fill="#000">A · Current — cramped, truncated</text>
|
||||
<g transform="translate(48,144)">
|
||||
<rect width="352" height="176" rx="8" />
|
||||
<text x="16" y="44" font-size="12" stroke="none" fill="#666">Approvers</text>
|
||||
<text x="144" y="44" font-size="14" stroke="none" fill="#666">None</text>
|
||||
|
||||
<text x="16" y="84" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="80" r="7" />
|
||||
<line x1="152" y1="80" x2="152" y2="75" />
|
||||
<line x1="152" y1="80" x2="156" y2="80" />
|
||||
<text x="168" y="84" font-size="14" stroke="none" fill="#000">Ne…</text>
|
||||
<text x="208" y="84" font-size="12" stroke="none" fill="#666">Jul 17, 2026</text>
|
||||
<text x="288" y="76" font-size="12" stroke="none" fill="#666">Attempt</text>
|
||||
<text x="288" y="92" font-size="12" stroke="none" fill="#666">1</text>
|
||||
|
||||
<text x="16" y="124" font-size="12" stroke="none" fill="#666">Watchdog</text>
|
||||
<text x="144" y="124" font-size="14" stroke="none" fill="#666">None</text>
|
||||
</g>
|
||||
<text x="48" y="352" font-size="12" stroke="none" fill="#666">Label truncates to “Ne…”, date is ambiguous (which year matters,</text>
|
||||
<text x="48" y="368" font-size="12" stroke="none" fill="#666">not the time?), attempt badge wraps into two lines.</text>
|
||||
|
||||
<!-- ===== Panel B · proposed collapsed row ===== -->
|
||||
<text x="464" y="128" font-size="14" font-weight="600" stroke="none" fill="#000">B · Proposed — two-line row</text>
|
||||
<g transform="translate(464,144)">
|
||||
<rect width="352" height="176" rx="8" />
|
||||
<text x="16" y="44" font-size="12" stroke="none" fill="#666">Approvers</text>
|
||||
<text x="144" y="44" font-size="14" stroke="none" fill="#666">None</text>
|
||||
|
||||
<text x="16" y="84" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="80" r="7" />
|
||||
<line x1="152" y1="80" x2="152" y2="75" />
|
||||
<line x1="152" y1="80" x2="156" y2="80" />
|
||||
<text x="168" y="84" font-size="14" font-weight="600" stroke="none" fill="#000">In 2h 12m</text>
|
||||
<text x="168" y="104" font-size="12" stroke="none" fill="#666">Jul 17, 4:08 PM · Attempt 1</text>
|
||||
|
||||
<text x="16" y="144" font-size="12" stroke="none" fill="#666">Watchdog</text>
|
||||
<text x="144" y="144" font-size="14" stroke="none" fill="#666">None</text>
|
||||
</g>
|
||||
<text x="464" y="352" font-size="12" stroke="none" fill="#666">Relative time leads and is bold; absolute time + attempt get their</text>
|
||||
<text x="464" y="368" font-size="12" stroke="none" fill="#666">own muted line. Nothing truncates at 352px. Row grows to 2 lines.</text>
|
||||
|
||||
<!-- ===== Panel C · hover tooltip ===== -->
|
||||
<text x="880" y="128" font-size="14" font-weight="600" stroke="none" fill="#000">C · Hover / tap — full details</text>
|
||||
<g transform="translate(880,144)">
|
||||
<!-- pane fragment with the row -->
|
||||
<rect width="352" height="80" rx="8" />
|
||||
<text x="16" y="44" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="40" r="7" />
|
||||
<line x1="152" y1="40" x2="152" y2="35" />
|
||||
<line x1="152" y1="40" x2="156" y2="40" />
|
||||
<text x="168" y="44" font-size="14" font-weight="600" stroke="none" fill="#000">In 2h 12m</text>
|
||||
<text x="168" y="64" font-size="12" stroke="none" fill="#666">Jul 17, 4:08 PM · Attempt 1</text>
|
||||
|
||||
<!-- tooltip card -->
|
||||
<polygon points="180,96 188,88 196,96" fill="#fff" />
|
||||
<g transform="translate(16,96)">
|
||||
<rect width="320" height="368" rx="8" />
|
||||
<text x="16" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">Monitor</text>
|
||||
<text x="304" y="32" font-size="12" text-anchor="end" stroke="none" fill="#666">Attempt 1</text>
|
||||
<line x1="0" y1="48" x2="320" y2="48" />
|
||||
|
||||
<text x="16" y="76" font-size="12" stroke="none" fill="#666">Next check</text>
|
||||
<text x="16" y="96" font-size="14" stroke="none" fill="#000">Thu, Jul 17, 2026 · 4:08 PM PDT</text>
|
||||
<text x="16" y="114" font-size="12" stroke="none" fill="#666">in 2h 12m</text>
|
||||
|
||||
<text x="16" y="144" font-size="12" stroke="none" fill="#666">Watching</text>
|
||||
<text x="16" y="164" font-size="14" stroke="none" fill="#000">vercel-deploy</text>
|
||||
|
||||
<text x="16" y="192" font-size="12" stroke="none" fill="#666">Notes</text>
|
||||
<text x="16" y="212" font-size="14" stroke="none" fill="#000">Verify completion, commit ledger /</text>
|
||||
<text x="16" y="230" font-size="14" stroke="none" fill="#000">scores, extend comparison site.</text>
|
||||
|
||||
<text x="16" y="260" font-size="12" stroke="none" fill="#666">Last triggered</text>
|
||||
<text x="16" y="280" font-size="14" stroke="none" fill="#000">— not yet triggered</text>
|
||||
|
||||
<line x1="0" y1="300" x2="320" y2="300" />
|
||||
<g transform="translate(16,316)">
|
||||
<rect width="96" height="32" rx="4" />
|
||||
<text x="48" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">Check now</text>
|
||||
</g>
|
||||
<g transform="translate(120,316)">
|
||||
<rect width="56" height="32" rx="4" />
|
||||
<text x="28" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">Edit</text>
|
||||
</g>
|
||||
<g transform="translate(184,316)">
|
||||
<rect width="64" height="32" rx="4" />
|
||||
<text x="32" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">Clear</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="880" y="656" font-size="12" stroke="none" fill="#666">Hover on desktop, tap on mobile. Exact timestamp with timezone,</text>
|
||||
<text x="880" y="672" font-size="12" stroke="none" fill="#666">service, notes and quick actions — no digging into the edit popover.</text>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="200" y="204" width="152" height="36" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(192,200)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text>
|
||||
</g>
|
||||
<rect x="608" y="208" width="216" height="52" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(600,204)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text>
|
||||
</g>
|
||||
<rect x="888" y="232" width="344" height="384" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(880,228)">
|
||||
<circle cx="0" cy="0" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
|
||||
<text x="0" y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">3</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 7.3 KiB |
@@ -1,103 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
|
||||
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
|
||||
<!-- 04 · Monitor row — state matrix. Desktop 1280×800 -->
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<text x="48" y="56" font-size="20" font-weight="600" stroke="none" fill="#000">Monitor row — state matrix</text>
|
||||
<text x="48" y="80" font-size="12" stroke="none" fill="#666">One copy system across banner, composer strip and properties row. Relative time always leads.</text>
|
||||
|
||||
<!-- 1 · scheduled, soon -->
|
||||
<g transform="translate(48,112)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">SCHEDULED · UNDER 1 HOUR</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="68" r="7" />
|
||||
<line x1="152" y1="68" x2="152" y2="63" />
|
||||
<line x1="152" y1="68" x2="156" y2="68" />
|
||||
<text x="168" y="72" font-size="14" font-weight="600" stroke="none" fill="#000">In 24m</text>
|
||||
<text x="168" y="92" font-size="12" stroke="none" fill="#666">Today, 2:20 PM</text>
|
||||
</g>
|
||||
|
||||
<!-- 2 · scheduled, today -->
|
||||
<g transform="translate(656,112)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">SCHEDULED · UNDER 24 HOURS</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="68" r="7" />
|
||||
<line x1="152" y1="68" x2="152" y2="63" />
|
||||
<line x1="152" y1="68" x2="156" y2="68" />
|
||||
<text x="168" y="72" font-size="14" font-weight="600" stroke="none" fill="#000">In 2h 12m</text>
|
||||
<text x="168" y="92" font-size="12" stroke="none" fill="#666">Today, 4:08 PM</text>
|
||||
</g>
|
||||
|
||||
<!-- 3 · scheduled, future day -->
|
||||
<g transform="translate(48,248)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">SCHEDULED · BEYOND TODAY</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="68" r="7" />
|
||||
<line x1="152" y1="68" x2="152" y2="63" />
|
||||
<line x1="152" y1="68" x2="156" y2="68" />
|
||||
<text x="168" y="72" font-size="14" font-weight="600" stroke="none" fill="#000">In 3d</text>
|
||||
<text x="168" y="92" font-size="12" stroke="none" fill="#666">Mon Jul 20, 9:00 AM</text>
|
||||
</g>
|
||||
|
||||
<!-- 4 · retrying -->
|
||||
<g transform="translate(656,248)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">RETRYING · ATTEMPT > 1</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="68" r="7" />
|
||||
<line x1="152" y1="68" x2="152" y2="63" />
|
||||
<line x1="152" y1="68" x2="156" y2="68" />
|
||||
<text x="168" y="72" font-size="14" font-weight="600" stroke="none" fill="#000">In 2h 12m</text>
|
||||
<text x="168" y="92" font-size="12" stroke="none" fill="#666">Today, 4:08 PM · </text>
|
||||
<text x="272" y="92" font-size="12" font-weight="700" stroke="none" fill="#000">Attempt 3</text>
|
||||
</g>
|
||||
|
||||
<!-- 5 · due now -->
|
||||
<g transform="translate(48,384)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">DUE NOW</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="68" r="7" fill="#e6e6e6" />
|
||||
<line x1="152" y1="68" x2="152" y2="63" />
|
||||
<line x1="152" y1="68" x2="156" y2="68" />
|
||||
<text x="168" y="72" font-size="14" font-weight="600" stroke="none" fill="#000">Due now</text>
|
||||
<text x="168" y="92" font-size="12" stroke="none" fill="#666">checking momentarily…</text>
|
||||
</g>
|
||||
|
||||
<!-- 6 · overdue -->
|
||||
<g transform="translate(656,384)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">OVERDUE</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<circle cx="152" cy="68" r="7" fill="#e6e6e6" />
|
||||
<line x1="152" y1="68" x2="152" y2="63" />
|
||||
<line x1="152" y1="68" x2="156" y2="68" />
|
||||
<text x="168" y="72" font-size="14" font-weight="600" stroke="none" fill="#000">Overdue by 18m</text>
|
||||
<text x="168" y="92" font-size="12" stroke="none" fill="#666">Jul 17, 1:38 PM · fires on next tick</text>
|
||||
</g>
|
||||
|
||||
<!-- 7 · cleared -->
|
||||
<g transform="translate(48,520)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">CLEARED</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<text x="168" y="72" font-size="14" stroke="none" fill="#666">Cleared</text>
|
||||
<text x="168" y="92" font-size="12" stroke="none" fill="#666">2h ago · after attempt 2</text>
|
||||
</g>
|
||||
|
||||
<!-- 8 · none -->
|
||||
<g transform="translate(656,520)">
|
||||
<rect width="576" height="112" rx="8" />
|
||||
<text x="16" y="28" font-size="12" stroke="none" fill="#666">NONE</text>
|
||||
<text x="16" y="72" font-size="12" stroke="none" fill="#666">Monitor</text>
|
||||
<text x="144" y="72" font-size="14" stroke="none" fill="#666">None</text>
|
||||
</g>
|
||||
|
||||
<!-- format rules -->
|
||||
<text x="48" y="688" font-size="14" font-weight="600" stroke="none" fill="#000">Copy rules</text>
|
||||
<text x="48" y="712" font-size="12" stroke="none" fill="#666">< 1h → “In 24m” · < 24h → “In 2h 12m” (two units, not “in 2h”) · beyond → “In 3d” + weekday date · past due → “Overdue by …”.</text>
|
||||
<text x="48" y="732" font-size="12" stroke="none" fill="#666">Absolute time says “Today” when it is today; adds the year only when it is not the current year. Banner + strip render only in scheduled / due / overdue states.</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.7 KiB |
@@ -1,65 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="304" viewBox="0 0 1280 304"
|
||||
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
|
||||
<!-- Flow — the three surfaces that show the same monitor state -->
|
||||
<rect x="0" y="0" width="1280" height="304" />
|
||||
<text x="48" y="40" font-size="14" font-weight="600" stroke="none" fill="#000">One monitor state, three surfaces — banner (top), strip (composer), row (properties) — all fed by the same copy rules (04).</text>
|
||||
|
||||
<!-- 01 thumbnail: page top with banner -->
|
||||
<g transform="translate(48,72)">
|
||||
<rect width="240" height="160" rx="4" />
|
||||
<line x1="0" y1="24" x2="240" y2="24" />
|
||||
<rect x="16" y="40" width="144" height="8" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="16" y="60" width="208" height="32" rx="4" fill="#e6e6e6" stroke="none" />
|
||||
<circle cx="32" cy="76" r="8" fill="#fff" />
|
||||
<line x1="16" y1="112" x2="224" y2="112" stroke="#666" />
|
||||
<line x1="16" y1="128" x2="224" y2="128" stroke="#666" />
|
||||
<line x1="16" y1="144" x2="160" y2="144" stroke="#666" />
|
||||
</g>
|
||||
<text x="168" y="264" font-size="12" text-anchor="middle" stroke="none" fill="#000">01 · Task page top — banner</text>
|
||||
|
||||
<line x1="296" y1="152" x2="336" y2="152" />
|
||||
<polygon points="336,152 326,146 326,158" fill="#000" stroke="none" />
|
||||
|
||||
<!-- 02 thumbnail: strip + composer -->
|
||||
<g transform="translate(344,72)">
|
||||
<rect width="240" height="160" rx="4" />
|
||||
<line x1="16" y1="24" x2="224" y2="24" stroke="#666" />
|
||||
<line x1="16" y1="40" x2="224" y2="40" stroke="#666" />
|
||||
<line x1="16" y1="56" x2="160" y2="56" stroke="#666" />
|
||||
<rect x="16" y="80" width="208" height="24" rx="4" fill="#e6e6e6" stroke="none" />
|
||||
<circle cx="30" cy="92" r="6" fill="#fff" />
|
||||
<rect x="16" y="112" width="208" height="32" rx="4" />
|
||||
</g>
|
||||
<text x="464" y="264" font-size="12" text-anchor="middle" stroke="none" fill="#000">02 · Above the composer — strip</text>
|
||||
|
||||
<line x1="592" y1="152" x2="632" y2="152" />
|
||||
<polygon points="632,152 622,146 622,158" fill="#000" stroke="none" />
|
||||
|
||||
<!-- 03 thumbnail: properties row + tooltip -->
|
||||
<g transform="translate(640,72)">
|
||||
<rect width="240" height="160" rx="4" />
|
||||
<rect x="16" y="16" width="64" height="8" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="120" y="16" width="104" height="8" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="16" y="40" width="64" height="8" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="120" y="36" width="80" height="8" fill="#000" stroke="none" />
|
||||
<rect x="120" y="50" width="104" height="6" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="120" y="72" width="104" height="72" rx="4" />
|
||||
<rect x="132" y="84" width="80" height="6" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="132" y="98" width="80" height="6" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="132" y="112" width="56" height="6" fill="#e6e6e6" stroke="none" />
|
||||
</g>
|
||||
<text x="760" y="264" font-size="12" text-anchor="middle" stroke="none" fill="#000">03 · Properties row + tooltip</text>
|
||||
|
||||
<line x1="888" y1="152" x2="928" y2="152" />
|
||||
<polygon points="928,152 918,146 918,158" fill="#000" stroke="none" />
|
||||
|
||||
<!-- 04 thumbnail: states grid -->
|
||||
<g transform="translate(936,72)">
|
||||
<rect width="240" height="160" rx="4" />
|
||||
<rect x="16" y="16" width="96" height="56" rx="4" />
|
||||
<rect x="128" y="16" width="96" height="56" rx="4" />
|
||||
<rect x="16" y="88" width="96" height="56" rx="4" />
|
||||
<rect x="128" y="88" width="96" height="56" rx="4" />
|
||||
</g>
|
||||
<text x="1056" y="264" font-size="12" text-anchor="middle" stroke="none" fill="#000">04 · State matrix + copy rules</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.6 KiB |
Reference in new issue
Block a user