PAP-53: IA plan wireframes (left nav, projects/agents list views)
Low-fi wireframe set + viewer for the information-architecture plan: left nav restructure, projects list view, agents list view with key actions, agents active/recent states, and project tile customization. Planning artifact only — no app code changed. Co-Authored-By: Paperclip <noreply@paperclip.ing>
No files matched your search
@@ -0,0 +1,325 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PAP-53 — Information Architecture 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: 760px; 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; }
|
||||
@media (max-width: 1180px) { .grid { grid-template-columns: minmax(0, 1fr) 200px; } .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; }
|
||||
section { margin-bottom: 64px; scroll-margin-top: 80px; }
|
||||
section h2 { font-size: 24px; }
|
||||
.flow-section { padding: 20px; margin-bottom: 40px; scroll-margin-top: 80px; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
main { padding: 16px 14px 56px; }
|
||||
header.hero h1 { font-size: 24px; line-height: 1.2; }
|
||||
section h2 { font-size: 20px; line-height: 1.25; }
|
||||
.grid { gap: 16px; }
|
||||
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; }
|
||||
.full { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 64px; max-width: var(--maxw); }
|
||||
.full .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-53 · Information Architecture</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-53</h1>
|
||||
<div style="font-size: 13px; color: var(--muted); margin-bottom: 16px;">Information Architecture</div>
|
||||
<h2>Overview</h2>
|
||||
<a href="#summary"><span class="num">§</span>Summary of changes</a>
|
||||
<h2>Screens</h2>
|
||||
<a href="#s1"><span class="num">1</span>Left navigation</a>
|
||||
<a href="#s2"><span class="num">2</span>Projects list view</a>
|
||||
<a href="#s3"><span class="num">3</span>Agents list view</a>
|
||||
<a href="#s4"><span class="num">4</span>Agents section states</a>
|
||||
<a href="#s5"><span class="num">5</span>Project tile customize</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-53 · Wireframes</div>
|
||||
<h1>Information Architecture — left nav & related views</h1>
|
||||
<p>Low-fidelity wireframes for the proposed left-navigation restructure and the two new list views (Projects, Agents). Monochrome and structural only — color, spacing, and final iconography are intentionally not represented. Click any wireframe to zoom.</p>
|
||||
<div class="pills">
|
||||
<span class="pill">5 screens</span>
|
||||
<span class="pill">Desktop + mobile</span>
|
||||
<span class="pill">Lo-fi · monochrome</span>
|
||||
<span class="pill">Plan: PAP-53 plan doc</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="summary" class="full">
|
||||
<div class="lede">Overview</div>
|
||||
<h2>What this set covers</h2>
|
||||
<p class="desc">Six discrete changes to the main app's information architecture, all sketched below.</p>
|
||||
<div class="notes">
|
||||
<ul>
|
||||
<li><b>Conference room</b> — new placeholder nav item above "New task", chat-bubble icon (screen 1).</li>
|
||||
<li><b>New Issue → New task</b> — renamed; label uses the standard nav text color, not the muted treatment it has today (screen 1).</li>
|
||||
<li><b>Artifacts</b> — new item in the Work section (screen 1).</li>
|
||||
<li><b>Projects as a Work nav item</b> — opens an all-projects list view: per-row overview, task count, budget; row click opens today's project detail (screens 1 & 2).</li>
|
||||
<li><b>Project tiles</b> — colored squircle becomes a neutral gray rounded rectangle with a folder icon; color + icon are user-customizable (screens 1 & 5).</li>
|
||||
<li><b>Agents section</b> — show active agents only when any are running; otherwise show up to 5 recently-active with "See all" → agents list view with per-row key actions (screens 3 & 4).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Screen 1 -->
|
||||
<section id="s1">
|
||||
<div class="lede">Screen 1 · Navigation</div>
|
||||
<h2><span class="step-num">1.</span>Left navigation (redesigned)</h2>
|
||||
<p class="desc">The full sidebar with every nav change applied. Numbered callouts map to the change list.</p>
|
||||
<div class="grid">
|
||||
<div class="wire" data-zoom data-caption="01 · Left navigation (desktop)">
|
||||
<div class="label"><span>01-sidebar.svg</span><span>1280×800 · desktop</span></div>
|
||||
<img src="wireframes/01-sidebar.svg" alt="Left navigation desktop wireframe" />
|
||||
</div>
|
||||
<div class="wire mobile-wire mobile-col" data-zoom data-caption="01 · Left navigation (mobile drawer)">
|
||||
<div class="label"><span>mobile</span><span>375×812</span></div>
|
||||
<img src="wireframes/01-sidebar-mobile.svg" alt="Left navigation mobile wireframe" />
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<div class="notes">
|
||||
<h3>Annotations</h3>
|
||||
<ul>
|
||||
<li><b>1</b> — Conference room: new item above New task, chat-bubble icon.</li>
|
||||
<li><b>2</b> — New Issue → New task; standard nav label color.</li>
|
||||
<li><b>3</b> — Projects: new Work nav item, opens the list view.</li>
|
||||
<li><b>4</b> — Artifacts: new Work item.</li>
|
||||
<li><b>5</b> — Project tiles: gray rounded rectangle + folder icon.</li>
|
||||
<li><b>6</b> — Agents section adapts to active/recent (screen 4).</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> Promotes the two highest-traffic destinations (Projects, a future Conference room) into stable nav, and makes the Work section the single home for cross-cutting views (Issues, Projects, Artifacts). On mobile the sidebar is a full-height drawer; the bottom tab bar is unchanged.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Screen 2 -->
|
||||
<section id="s2">
|
||||
<div class="lede">Screen 2 · Projects</div>
|
||||
<h2><span class="step-num">2.</span>Projects list view</h2>
|
||||
<p class="desc">Opened from the new "Projects" Work nav item. Each project is a row with an at-a-glance summary; clicking a row opens today's project detail view unchanged.</p>
|
||||
<div class="grid">
|
||||
<div class="wire" data-zoom data-caption="02 · Projects list (desktop)">
|
||||
<div class="label"><span>02-projects-list.svg</span><span>1280×800 · desktop</span></div>
|
||||
<img src="wireframes/02-projects-list.svg" alt="Projects list desktop wireframe" />
|
||||
</div>
|
||||
<div class="wire mobile-wire mobile-col" data-zoom data-caption="02 · Projects list (mobile)">
|
||||
<div class="label"><span>mobile</span><span>375×812</span></div>
|
||||
<img src="wireframes/02-projects-list-mobile.svg" alt="Projects list mobile wireframe" />
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<div class="ref">
|
||||
<div class="label"><span>Reference — today's project detail</span><span>from PAP-53</span></div>
|
||||
<img src="screenshots/project-detail-ref.png" alt="Current project detail view" data-zoom />
|
||||
</div>
|
||||
<div class="notes">
|
||||
<h3>Annotations</h3>
|
||||
<ul>
|
||||
<li><b>1</b> — Gray folder tile (same primitive as the sidebar).</li>
|
||||
<li><b>2</b> — Overview = project description, one line, truncated.</li>
|
||||
<li><b>3</b> — Task count + budget + status per row.</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> Gives projects a real index page instead of only the sidebar list. On mobile each row reflows to a card with the metrics on a second line. Note: task count and budget are not on the Project type today — they need wiring (see open questions).</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Screen 3 -->
|
||||
<section id="s3">
|
||||
<div class="lede">Screen 3 · Agents</div>
|
||||
<h2><span class="step-num">3.</span>Agents list view ("See all")</h2>
|
||||
<p class="desc">Opened from "See all" in the Agents sidebar section. Each row carries the key actions from the agent detail page; clicking a row opens today's agent detail unchanged.</p>
|
||||
<div class="grid">
|
||||
<div class="wire" data-zoom data-caption="03 · Agents list (desktop)">
|
||||
<div class="label"><span>03-agents-list.svg</span><span>1280×800 · desktop</span></div>
|
||||
<img src="wireframes/03-agents-list.svg" alt="Agents list desktop wireframe" />
|
||||
</div>
|
||||
<div class="wire mobile-wire mobile-col" data-zoom data-caption="03 · Agents list (mobile)">
|
||||
<div class="label"><span>mobile</span><span>375×812</span></div>
|
||||
<img src="wireframes/03-agents-list-mobile.svg" alt="Agents list mobile wireframe" />
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<div class="ref">
|
||||
<div class="label"><span>Reference — detail page key actions</span><span>from PAP-53</span></div>
|
||||
<img src="screenshots/agent-detail-ref.png" alt="Agent detail key actions" data-zoom />
|
||||
</div>
|
||||
<div class="notes">
|
||||
<h3>Annotations</h3>
|
||||
<ul>
|
||||
<li><b>1</b> — Identity: icon, name, role, budget spent/limit, last active.</li>
|
||||
<li><b>2</b> — Key actions inline: Assign Task, Run Heartbeat, Pause/Resume, status, ⋯.</li>
|
||||
<li><b>3</b> — Entry point: "See all" link in the sidebar Agents section.</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> Surfaces the actions you'd otherwise have to open each agent to reach. On mobile the action buttons wrap to a second line within the card. Pause vs Resume toggles on the agent's current status.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Screen 4 -->
|
||||
<section id="s4" class="full">
|
||||
<div class="lede">Screen 4 · Agents (diagnostic)</div>
|
||||
<h2><span class="step-num">4.</span>Agents section — active vs. recently-active</h2>
|
||||
<p class="desc">How the sidebar Agents section chooses what to show. Desktop-only diagnostic.</p>
|
||||
<div class="wire" data-zoom data-caption="04 · Agents section states">
|
||||
<div class="label"><span>04-agents-states.svg</span><span>1280×800</span></div>
|
||||
<img src="wireframes/04-agents-states.svg" alt="Agents section states wireframe" />
|
||||
</div>
|
||||
<div class="notes">
|
||||
<div class="why"><b>Rule:</b> If any agent has a live run → show only those (state A). If none are running → show up to 5 recently-active agents sorted by last heartbeat, plus "See all" (state B). "See all" always opens the full agents list view (screen 3).</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Screen 5 -->
|
||||
<section id="s5" class="full">
|
||||
<div class="lede">Screen 5 · Projects (detail)</div>
|
||||
<h2><span class="step-num">5.</span>Project tile — customize icon & color</h2>
|
||||
<p class="desc">Default neutral tile and the picker opened by clicking it. Desktop-only overlay.</p>
|
||||
<div class="wire" data-zoom data-caption="05 · Project tile customize">
|
||||
<div class="label"><span>05-project-customize.svg</span><span>1280×800</span></div>
|
||||
<img src="wireframes/05-project-customize.svg" alt="Project tile customize wireframe" />
|
||||
</div>
|
||||
<div class="notes">
|
||||
<div class="why"><b>Why this changes:</b> Default tiles are neutral so the sidebar reads calmly; users opt into color/icon only where it helps them scan. The same tile + picker is reused in the sidebar PROJECTS section and the Projects list rows. <code>project.color</code> already exists; an icon field is new.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="open">
|
||||
<div class="lede">For reviewer</div>
|
||||
<h2>Open questions</h2>
|
||||
<div class="notes">
|
||||
<ul>
|
||||
<li><b>Terminology</b> — The issue calls items "tasks (formerly issues)". Do you want the <i>Issues</i> nav item / page renamed to <i>Tasks</i> globally, or only the "New task" button + the "Tasks" count on project rows for now?</li>
|
||||
<li><b>Conference room</b> — Placeholder only: it appears in nav but routes to an empty page for now. Confirm that's the intended scope.</li>
|
||||
<li><b>Projects: dual presence</b> — Keep both the new "Projects" Work nav item (→ list view) <i>and</i> the existing collapsible PROJECTS section (individual projects)? The wireframes assume yes.</li>
|
||||
<li><b>Row data</b> — Task count and budget aren't on the Project type today. OK to add a lightweight count/budget lookup for the list rows (slightly more backend work)?</li>
|
||||
<li><b>Project icon</b> — Customizable icon needs a new <code>project.icon</code> field + picker. Confirm we should build icon customization now vs. color-only first.</li>
|
||||
<li><b>Ordering within Work</b> — Proposed order: Issues, Projects, Artifacts, Routines, Goals. Adjust freely.</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. Nothing here is built yet; this is for plan approval on PAP-53.
|
||||
</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>
|
||||
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,77 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="375" height="812" />
|
||||
|
||||
<!-- Drawer header -->
|
||||
<text x="16" y="38" font-size="20" font-weight="700" stroke="none" fill="#000">Paperclip App</text>
|
||||
<text x="343" y="38" font-size="20" stroke="none" fill="#000">×</text>
|
||||
<line x1="0" y1="56" x2="375" y2="56" stroke="#666" />
|
||||
|
||||
<!-- Top cluster -->
|
||||
<g>
|
||||
<rect x="8" y="72" width="359" height="40" fill="#fff" stroke="none" />
|
||||
<rect x="16" y="82" width="20" height="15" rx="3" fill="none" stroke="#000" />
|
||||
<polygon points="21,97 21,104 28,97" fill="#000" stroke="none" />
|
||||
<text x="48" y="97" font-size="14" stroke="none" fill="#000">Conference room</text>
|
||||
</g>
|
||||
<rect x="16" y="124" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="138" font-size="14" stroke="none" fill="#000">New task</text>
|
||||
<rect x="16" y="164" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="178" font-size="14" stroke="none" fill="#666">Dashboard</text>
|
||||
<rect x="16" y="204" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="218" font-size="14" stroke="none" fill="#666">Inbox</text>
|
||||
|
||||
<!-- WORK -->
|
||||
<text x="16" y="258" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">WORK</text>
|
||||
<rect x="16" y="272" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="286" font-size="14" stroke="none" fill="#666">Issues</text>
|
||||
<rect x="16" y="312" width="18" height="15" rx="2" fill="#fff" stroke="#000" />
|
||||
<path d="M16 315 l6 0 l2 -3 l4 0" fill="none" stroke="#000" />
|
||||
<text x="48" y="326" font-size="14" stroke="none" fill="#000">Projects</text>
|
||||
<rect x="16" y="352" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="366" font-size="14" stroke="none" fill="#000">Artifacts</text>
|
||||
<rect x="16" y="392" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="406" font-size="14" stroke="none" fill="#666">Routines</text>
|
||||
<rect x="16" y="432" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="446" font-size="14" stroke="none" fill="#666">Goals</text>
|
||||
|
||||
<!-- PROJECTS -->
|
||||
<text x="16" y="486" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">PROJECTS</text>
|
||||
<g>
|
||||
<rect x="16" y="500" width="22" height="18" rx="5" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M21 506 l5 0 l1.5 -2 l5 0 l0 10 l-11.5 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="48" y="514" font-size="14" stroke="none" fill="#666">Onboarding v3</text>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="16" y="540" width="22" height="18" rx="5" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M21 546 l5 0 l1.5 -2 l5 0 l0 10 l-11.5 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="48" y="554" font-size="14" stroke="none" fill="#666">NUX hardening</text>
|
||||
</g>
|
||||
|
||||
<!-- AGENTS -->
|
||||
<text x="16" y="594" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
|
||||
<circle cx="25" cy="614" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="619" font-size="14" stroke="none" fill="#666">ClaudeCoder</text>
|
||||
<circle cx="300" cy="614" r="3" fill="#000" stroke="none" />
|
||||
<text x="312" y="618" font-size="12" stroke="none" fill="#666">2 live</text>
|
||||
<circle cx="25" cy="650" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="655" font-size="14" stroke="none" fill="#666">QA-Bot</text>
|
||||
<circle cx="300" cy="650" r="3" fill="#000" stroke="none" />
|
||||
<text x="312" y="654" font-size="12" stroke="none" fill="#666">1 live</text>
|
||||
|
||||
<!-- bottom tab bar (persistent) -->
|
||||
<line x1="0" y1="748" x2="375" y2="748" stroke="#666" />
|
||||
<text x="40" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Home</text>
|
||||
<text x="120" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Issues</text>
|
||||
<text x="200" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#000">+</text>
|
||||
<text x="270" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Agents</text>
|
||||
<text x="340" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Inbox</text>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="8" y="72" width="359" height="40" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(355,92)"><circle r="10" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text></g>
|
||||
<rect x="8" y="500" width="359" height="58" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(355,528)"><circle r="10" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">5</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1,137 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<!-- ============ SIDEBAR (0..280) ============ -->
|
||||
<rect x="0" y="0" width="280" height="800" />
|
||||
|
||||
<!-- Top bar: company name + search -->
|
||||
<text x="16" y="30" font-size="14" font-weight="700" stroke="none" fill="#000">Paperclip App</text>
|
||||
<rect x="240" y="12" width="24" height="24" rx="4" fill="#e6e6e6" stroke="#666" />
|
||||
<circle cx="249" cy="21" r="4" fill="none" stroke="#666" />
|
||||
<line x1="252" y1="24" x2="256" y2="28" stroke="#666" />
|
||||
|
||||
<!-- ===== Top nav cluster ===== -->
|
||||
<!-- Conference room (NEW) — chat bubble icon -->
|
||||
<g>
|
||||
<rect x="8" y="56" width="264" height="32" fill="#fff" stroke="none" />
|
||||
<!-- chat bubble glyph -->
|
||||
<rect x="16" y="62" width="18" height="13" rx="3" fill="none" stroke="#000" />
|
||||
<polygon points="20,75 20,81 26,75" fill="#000" stroke="none" />
|
||||
<text x="44" y="77" font-size="14" stroke="none" fill="#000">Conference room</text>
|
||||
</g>
|
||||
<!-- New task (renamed from New Issue) -->
|
||||
<g>
|
||||
<rect x="16" y="94" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<line x1="20" y1="106" x2="28" y2="98" stroke="#666" />
|
||||
<text x="44" y="109" font-size="14" stroke="none" fill="#000">New task</text>
|
||||
</g>
|
||||
<!-- Dashboard -->
|
||||
<rect x="16" y="126" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="141" font-size="14" stroke="none" fill="#666">Dashboard</text>
|
||||
<!-- Inbox -->
|
||||
<rect x="16" y="158" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="173" font-size="14" stroke="none" fill="#666">Inbox</text>
|
||||
|
||||
<!-- ===== WORK section ===== -->
|
||||
<text x="16" y="210" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">WORK</text>
|
||||
<!-- Issues -->
|
||||
<rect x="16" y="222" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="237" font-size="14" stroke="none" fill="#666">Issues</text>
|
||||
<!-- Projects (NEW nav item) — shown active/selected -->
|
||||
<rect x="8" y="250" width="264" height="32" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="16" y="256" width="16" height="13" rx="2" fill="#fff" stroke="#000" />
|
||||
<path d="M16 259 l5 0 l2 -3 l4 0" fill="none" stroke="#000" />
|
||||
<text x="44" y="269" font-size="14" stroke="none" fill="#000">Projects</text>
|
||||
<!-- Artifacts (NEW) -->
|
||||
<rect x="16" y="290" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="305" font-size="14" stroke="none" fill="#000">Artifacts</text>
|
||||
<!-- Routines -->
|
||||
<rect x="16" y="322" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="337" font-size="14" stroke="none" fill="#666">Routines</text>
|
||||
<!-- Goals -->
|
||||
<rect x="16" y="354" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="369" font-size="14" stroke="none" fill="#666">Goals</text>
|
||||
|
||||
<!-- ===== PROJECTS section ===== -->
|
||||
<text x="16" y="406" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">PROJECTS</text>
|
||||
<text x="248" y="406" font-size="14" stroke="none" fill="#666">+</text>
|
||||
<!-- Project rows: rounded-rectangle gray tile + folder glyph -->
|
||||
<g>
|
||||
<rect x="16" y="418" width="18" height="16" rx="4" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M20 423 l4 0 l1.5 -2 l4 0 l0 9 l-9.5 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="44" y="431" font-size="14" stroke="none" fill="#666">Onboarding v3</text>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="16" y="450" width="18" height="16" rx="4" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M20 455 l4 0 l1.5 -2 l4 0 l0 9 l-9.5 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="44" y="463" font-size="14" stroke="none" fill="#666">NUX hardening</text>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="16" y="482" width="18" height="16" rx="4" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M20 487 l4 0 l1.5 -2 l4 0 l0 9 l-9.5 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="44" y="495" font-size="14" stroke="none" fill="#666">Billing rework</text>
|
||||
</g>
|
||||
|
||||
<!-- ===== AGENTS section (active state) ===== -->
|
||||
<text x="16" y="534" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
|
||||
<text x="248" y="534" font-size="14" stroke="none" fill="#666">+</text>
|
||||
<!-- active agent rows with live dot + "N live" -->
|
||||
<g>
|
||||
<circle cx="24" cy="554" r="8" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="559" font-size="14" stroke="none" fill="#666">ClaudeCoder</text>
|
||||
<circle cx="214" cy="554" r="3" fill="#000" stroke="none" />
|
||||
<text x="224" y="558" font-size="12" stroke="none" fill="#666">2 live</text>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="24" cy="586" r="8" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="591" font-size="14" stroke="none" fill="#666">QA-Bot</text>
|
||||
<circle cx="214" cy="586" r="3" fill="#000" stroke="none" />
|
||||
<text x="224" y="590" font-size="12" stroke="none" fill="#666">1 live</text>
|
||||
</g>
|
||||
|
||||
<!-- ===== COMPANY section ===== -->
|
||||
<text x="16" y="634" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">COMPANY</text>
|
||||
<rect x="16" y="646" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="661" font-size="14" stroke="none" fill="#666">Org</text>
|
||||
<rect x="16" y="678" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="693" font-size="14" stroke="none" fill="#666">Settings</text>
|
||||
|
||||
<!-- ============ CONTENT AREA (faded, context only) ============ -->
|
||||
<text x="320" y="40" font-size="20" font-weight="600" stroke="none" fill="#000">Main content area</text>
|
||||
<line x1="320" y1="56" x2="1256" y2="56" stroke="#666" />
|
||||
<text x="320" y="84" font-size="14" stroke="none" fill="#666">(Selected nav item renders here — e.g. the Projects list view)</text>
|
||||
|
||||
<!-- legend of changes -->
|
||||
<g transform="translate(320,120)">
|
||||
<rect width="640" height="232" rx="6" fill="#fff" stroke="#666" />
|
||||
<text x="20" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">What changed in the left nav</text>
|
||||
<text x="20" y="64" font-size="14" stroke="none" fill="#000">1 Conference room — NEW item above New task, chat-bubble icon</text>
|
||||
<text x="20" y="92" font-size="14" stroke="none" fill="#000">2 New Issue → New task; label uses the standard nav color</text>
|
||||
<text x="20" y="120" font-size="14" stroke="none" fill="#000">3 Projects — NEW Work nav item; opens the all-projects list view</text>
|
||||
<text x="20" y="148" font-size="14" stroke="none" fill="#000">4 Artifacts — NEW item in the Work section</text>
|
||||
<text x="20" y="176" font-size="14" stroke="none" fill="#000">5 Project tiles — gray rounded rectangle + folder icon (was a</text>
|
||||
<text x="36" y="196" font-size="14" stroke="none" fill="#000">colored squircle); color + icon are user-customizable</text>
|
||||
<text x="20" y="220" font-size="14" stroke="none" fill="#000">6 Agents — active agents only; recently-active fallback (see 04)</text>
|
||||
</g>
|
||||
|
||||
<!-- ============ ANNOTATION LAYER (red dashed) ============ -->
|
||||
<g data-region="annotations">
|
||||
<rect x="8" y="56" width="264" height="32" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,72)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text></g>
|
||||
|
||||
<rect x="8" y="92" width="264" height="20" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,104)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text></g>
|
||||
|
||||
<g transform="translate(286,266)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">3</text></g>
|
||||
|
||||
<rect x="8" y="288" width="264" height="20" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,298)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">4</text></g>
|
||||
|
||||
<rect x="8" y="412" width="264" height="92" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,418)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">5</text></g>
|
||||
|
||||
<rect x="8" y="524" width="264" height="80" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,560)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">6</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
@@ -0,0 +1,58 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="375" height="812" />
|
||||
|
||||
<!-- top bar -->
|
||||
<text x="16" y="34" font-size="20" stroke="none" fill="#000">≡</text>
|
||||
<text x="48" y="34" font-size="20" font-weight="700" stroke="none" fill="#000">Projects</text>
|
||||
<line x1="0" y1="56" x2="375" y2="56" stroke="#666" />
|
||||
|
||||
<!-- toolbar -->
|
||||
<g transform="translate(16,72)">
|
||||
<rect width="120" height="32" rx="4" fill="#fff" stroke="#666" />
|
||||
<text x="14" y="21" font-size="12" stroke="none" fill="#666">Sort: Name</text>
|
||||
</g>
|
||||
<g transform="translate(239,72)">
|
||||
<rect width="120" height="32" rx="4" fill="#000" />
|
||||
<text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#fff">+ Add</text>
|
||||
</g>
|
||||
|
||||
<!-- stacked cards: each row reflows to a card with metrics on a second line -->
|
||||
<g transform="translate(16,120)">
|
||||
<rect width="343" height="96" fill="#fff" stroke="#666" />
|
||||
<rect x="16" y="16" width="32" height="28" rx="6" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M24 28 l7 0 l2 -3 l7 0 l0 14 l-16 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="60" y="30" font-size="14" font-weight="600" stroke="none" fill="#000">Onboarding v3</text>
|
||||
<text x="60" y="48" font-size="12" stroke="none" fill="#666">Revamp first-run onboarding.</text>
|
||||
<text x="16" y="76" font-size="12" stroke="none" fill="#666">24 tasks · $1,200/mo · Active</text>
|
||||
</g>
|
||||
<g transform="translate(16,224)">
|
||||
<rect width="343" height="96" fill="#fff" stroke="#666" />
|
||||
<rect x="16" y="16" width="32" height="28" rx="6" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M24 28 l7 0 l2 -3 l7 0 l0 14 l-16 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="60" y="30" font-size="14" font-weight="600" stroke="none" fill="#000">NUX hardening</text>
|
||||
<text x="60" y="48" font-size="12" stroke="none" fill="#666">Stabilize BoardChat + QA.</text>
|
||||
<text x="16" y="76" font-size="12" stroke="none" fill="#666">11 tasks · No budget · Active</text>
|
||||
</g>
|
||||
<g transform="translate(16,328)">
|
||||
<rect width="343" height="96" fill="#fff" stroke="#666" />
|
||||
<rect x="16" y="16" width="32" height="28" rx="6" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M24 28 l7 0 l2 -3 l7 0 l0 14 l-16 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="60" y="30" font-size="14" font-weight="600" stroke="none" fill="#000">Billing rework</text>
|
||||
<text x="60" y="48" font-size="12" stroke="none" fill="#666">Per-project spend tracking.</text>
|
||||
<text x="16" y="76" font-size="12" stroke="none" fill="#666">7 tasks · $500/mo · Paused</text>
|
||||
</g>
|
||||
|
||||
<!-- bottom tab bar -->
|
||||
<line x1="0" y1="748" x2="375" y2="748" stroke="#666" />
|
||||
<text x="40" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Home</text>
|
||||
<text x="120" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Issues</text>
|
||||
<text x="200" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#000">+</text>
|
||||
<text x="270" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Agents</text>
|
||||
<text x="340" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Inbox</text>
|
||||
|
||||
<g data-region="annotations">
|
||||
<rect x="16" y="192" width="343" height="24" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(351,204)"><circle r="10" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,96 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<!-- sidebar stub for orientation -->
|
||||
<rect x="0" y="0" width="280" height="800" fill="#fff" stroke="#666" />
|
||||
<text x="16" y="30" font-size="14" font-weight="700" stroke="none" fill="#666">Paperclip App</text>
|
||||
<rect x="8" y="120" width="264" height="32" fill="#e6e6e6" stroke="none" />
|
||||
<text x="24" y="141" font-size="14" stroke="none" fill="#000">Projects</text>
|
||||
<text x="24" y="93" font-size="14" stroke="none" fill="#999">Work</text>
|
||||
<text x="24" y="189" font-size="14" stroke="none" fill="#999">Artifacts</text>
|
||||
|
||||
<!-- ===== CONTENT ===== -->
|
||||
<!-- breadcrumb + title -->
|
||||
<text x="320" y="44" font-size="12" letter-spacing="1" stroke="none" fill="#666">PROJECTS</text>
|
||||
<text x="320" y="80" font-size="28" font-weight="700" stroke="none" fill="#000">Projects</text>
|
||||
|
||||
<!-- toolbar: sort + add -->
|
||||
<g transform="translate(320,104)">
|
||||
<rect width="120" height="32" rx="4" fill="#fff" stroke="#666" />
|
||||
<text x="14" y="21" font-size="12" stroke="none" fill="#666">Sort: Name</text>
|
||||
</g>
|
||||
<g transform="translate(816,104)">
|
||||
<rect width="120" height="32" rx="4" fill="#000" />
|
||||
<text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#fff">+ Add project</text>
|
||||
</g>
|
||||
|
||||
<!-- column header -->
|
||||
<g transform="translate(320,160)">
|
||||
<rect width="936" height="32" fill="#f4f4f4" stroke="#666" />
|
||||
<text x="64" y="21" font-size="12" font-weight="600" stroke="none" fill="#000">Project</text>
|
||||
<text x="560" y="21" font-size="12" font-weight="600" stroke="none" fill="#000">Tasks</text>
|
||||
<text x="680" y="21" font-size="12" font-weight="600" stroke="none" fill="#000">Budget</text>
|
||||
<text x="840" y="21" font-size="12" font-weight="600" stroke="none" fill="#000">Status</text>
|
||||
</g>
|
||||
|
||||
<!-- rows -->
|
||||
<!-- row 1 -->
|
||||
<g transform="translate(320,192)">
|
||||
<rect width="936" height="72" fill="#fff" stroke="#666" />
|
||||
<rect x="16" y="20" width="32" height="28" rx="6" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M24 32 l7 0 l2 -3 l7 0 l0 14 l-16 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="64" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">Onboarding v3</text>
|
||||
<text x="64" y="52" font-size="12" stroke="none" fill="#666">Revamp the first-run onboarding and CEO chat flow.</text>
|
||||
<text x="560" y="42" font-size="14" stroke="none" fill="#666">24</text>
|
||||
<text x="680" y="42" font-size="14" stroke="none" fill="#666">$1,200 / mo</text>
|
||||
<g transform="translate(840,28)"><rect width="64" height="20" rx="10" fill="#fff" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">Active</text></g>
|
||||
<polyline points="908,32 916,40 908,48" fill="none" />
|
||||
</g>
|
||||
<!-- row 2 -->
|
||||
<g transform="translate(320,264)">
|
||||
<rect width="936" height="72" fill="#fff" stroke="#666" />
|
||||
<rect x="16" y="20" width="32" height="28" rx="6" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M24 32 l7 0 l2 -3 l7 0 l0 14 l-16 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="64" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">NUX hardening</text>
|
||||
<text x="64" y="52" font-size="12" stroke="none" fill="#666">Stabilize BoardChat, fix end-to-end QA failures.</text>
|
||||
<text x="560" y="42" font-size="14" stroke="none" fill="#666">11</text>
|
||||
<text x="680" y="42" font-size="14" stroke="none" fill="#666">—</text>
|
||||
<g transform="translate(840,28)"><rect width="64" height="20" rx="10" fill="#fff" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">Active</text></g>
|
||||
<polyline points="908,32 916,40 908,48" fill="none" />
|
||||
</g>
|
||||
<!-- row 3 -->
|
||||
<g transform="translate(320,336)">
|
||||
<rect width="936" height="72" fill="#fff" stroke="#666" />
|
||||
<rect x="16" y="20" width="32" height="28" rx="6" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M24 32 l7 0 l2 -3 l7 0 l0 14 l-16 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="64" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">Billing rework</text>
|
||||
<text x="64" y="52" font-size="12" stroke="none" fill="#666">Migrate budgets and per-project spend tracking.</text>
|
||||
<text x="560" y="42" font-size="14" stroke="none" fill="#666">7</text>
|
||||
<text x="680" y="42" font-size="14" stroke="none" fill="#666">$500 / mo</text>
|
||||
<g transform="translate(840,28)"><rect width="64" height="20" rx="10" fill="#e6e6e6" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">Paused</text></g>
|
||||
<polyline points="908,32 916,40 908,48" fill="none" />
|
||||
</g>
|
||||
<!-- row 4 -->
|
||||
<g transform="translate(320,408)">
|
||||
<rect width="936" height="72" fill="#fff" stroke="#666" />
|
||||
<rect x="16" y="20" width="32" height="28" rx="6" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M24 32 l7 0 l2 -3 l7 0 l0 14 l-16 0 z" fill="#fff" stroke="#666" />
|
||||
<text x="64" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">Docs site</text>
|
||||
<text x="64" y="52" font-size="12" stroke="none" fill="#666">Public documentation and changelog.</text>
|
||||
<text x="560" y="42" font-size="14" stroke="none" fill="#666">3</text>
|
||||
<text x="680" y="42" font-size="14" stroke="none" fill="#666">—</text>
|
||||
<g transform="translate(840,28)"><rect width="64" height="20" rx="10" fill="#fff" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">Active</text></g>
|
||||
<polyline points="908,32 916,40 908,48" fill="none" />
|
||||
</g>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="336" y="212" width="48" height="40" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(312,232)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text></g>
|
||||
<rect x="384" y="216" width="460" height="32" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(536,206)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text></g>
|
||||
<rect x="864" y="216" width="120" height="32" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(1004,232)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">3</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
@@ -0,0 +1,50 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="375" height="812" />
|
||||
|
||||
<text x="16" y="34" font-size="20" stroke="none" fill="#000">≡</text>
|
||||
<text x="48" y="34" font-size="20" font-weight="700" stroke="none" fill="#000">All agents</text>
|
||||
<line x1="0" y1="56" x2="375" y2="56" stroke="#666" />
|
||||
|
||||
<g transform="translate(16,72)">
|
||||
<rect width="160" height="32" rx="4" fill="#fff" stroke="#666" />
|
||||
<text x="14" y="21" font-size="12" stroke="none" fill="#666">Filter: All status</text>
|
||||
</g>
|
||||
|
||||
<!-- card 1: identity, then actions wrap to their own row -->
|
||||
<g transform="translate(16,120)">
|
||||
<rect width="343" height="128" fill="#fff" stroke="#666" />
|
||||
<circle cx="36" cy="36" r="16" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="64" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">ClaudeCoder</text>
|
||||
<text x="64" y="50" font-size="12" stroke="none" fill="#666">Software Engineer · 2 live</text>
|
||||
<text x="16" y="76" font-size="12" stroke="none" fill="#666">$42 / $200 mo · active 2m ago</text>
|
||||
<g transform="translate(16,88)"><rect width="100" height="28" rx="4" fill="#fff" stroke="#666" /><text x="50" y="19" font-size="12" text-anchor="middle" stroke="none" fill="#000">+ Assign</text></g>
|
||||
<g transform="translate(124,88)"><rect width="116" height="28" rx="4" fill="#fff" stroke="#666" /><text x="58" y="19" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Heartbeat</text></g>
|
||||
<g transform="translate(248,88)"><rect width="80" height="28" rx="4" fill="#fff" stroke="#666" /><text x="40" y="19" font-size="12" text-anchor="middle" stroke="none" fill="#000">❙❙ Pause</text></g>
|
||||
</g>
|
||||
|
||||
<!-- card 2 -->
|
||||
<g transform="translate(16,264)">
|
||||
<rect width="343" height="128" fill="#fff" stroke="#666" />
|
||||
<circle cx="36" cy="36" r="16" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="64" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">Designer</text>
|
||||
<text x="64" y="50" font-size="12" stroke="none" fill="#666">Product Design · paused</text>
|
||||
<text x="16" y="76" font-size="12" stroke="none" fill="#666">$0 / $80 mo · active 3d ago</text>
|
||||
<g transform="translate(16,88)"><rect width="100" height="28" rx="4" fill="#fff" stroke="#666" /><text x="50" y="19" font-size="12" text-anchor="middle" stroke="none" fill="#000">+ Assign</text></g>
|
||||
<g transform="translate(124,88)"><rect width="116" height="28" rx="4" fill="#fff" stroke="#666" /><text x="58" y="19" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Heartbeat</text></g>
|
||||
<g transform="translate(248,88)"><rect width="80" height="28" rx="4" fill="#fff" stroke="#666" /><text x="40" y="19" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Resume</text></g>
|
||||
</g>
|
||||
|
||||
<!-- bottom tab bar -->
|
||||
<line x1="0" y1="748" x2="375" y2="748" stroke="#666" />
|
||||
<text x="40" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Home</text>
|
||||
<text x="120" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Issues</text>
|
||||
<text x="200" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#000">+</text>
|
||||
<text x="270" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#000">Agents</text>
|
||||
<text x="340" y="784" font-size="12" text-anchor="middle" stroke="none" fill="#666">Inbox</text>
|
||||
|
||||
<g data-region="annotations">
|
||||
<rect x="16" y="208" width="343" height="40" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(351,228)"><circle r="10" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,91 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<!-- sidebar stub -->
|
||||
<rect x="0" y="0" width="280" height="800" fill="#fff" stroke="#666" />
|
||||
<text x="16" y="30" font-size="14" font-weight="700" stroke="none" fill="#666">Paperclip App</text>
|
||||
<text x="16" y="120" font-size="12" letter-spacing="1" stroke="none" fill="#999">AGENTS</text>
|
||||
<text x="24" y="148" font-size="14" stroke="none" fill="#999">ClaudeCoder · 2 live</text>
|
||||
<text x="24" y="176" font-size="14" stroke="none" fill="#999">QA-Bot · 1 live</text>
|
||||
<text x="24" y="204" font-size="14" stroke="none" fill="#000">See all →</text>
|
||||
|
||||
<!-- ===== CONTENT ===== -->
|
||||
<text x="320" y="44" font-size="12" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
|
||||
<text x="320" y="80" font-size="28" font-weight="700" stroke="none" fill="#000">All agents</text>
|
||||
|
||||
<g transform="translate(320,104)">
|
||||
<rect width="140" height="32" rx="4" fill="#fff" stroke="#666" />
|
||||
<text x="14" y="21" font-size="12" stroke="none" fill="#666">Filter: All status</text>
|
||||
</g>
|
||||
<g transform="translate(816,104)">
|
||||
<rect width="120" height="32" rx="4" fill="#000" />
|
||||
<text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#fff">+ New agent</text>
|
||||
</g>
|
||||
|
||||
<!-- rows: each shows identity + the key actions from the detail page -->
|
||||
<!-- row 1 -->
|
||||
<g transform="translate(320,160)">
|
||||
<rect width="936" height="88" fill="#fff" stroke="#666" />
|
||||
<circle cx="40" cy="44" r="16" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="72" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">ClaudeCoder</text>
|
||||
<text x="72" y="56" font-size="12" stroke="none" fill="#666">Software Engineer · $42 / $200 mo · active 2m ago</text>
|
||||
<!-- live -->
|
||||
<circle cx="300" cy="32" r="3" fill="#000" stroke="none" />
|
||||
<text x="310" y="36" font-size="12" stroke="none" fill="#666">2 live</text>
|
||||
<!-- key actions -->
|
||||
<g transform="translate(456,28)"><rect width="112" height="32" rx="4" fill="#fff" stroke="#666" /><text x="56" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">+ Assign Task</text></g>
|
||||
<g transform="translate(576,28)"><rect width="120" height="32" rx="4" fill="#fff" stroke="#666" /><text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Run Heartbeat</text></g>
|
||||
<g transform="translate(704,28)"><rect width="96" height="32" rx="4" fill="#fff" stroke="#666" /><text x="48" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">❙❙ Pause</text></g>
|
||||
<g transform="translate(808,28)"><rect width="64" height="20" rx="10" fill="#fff" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">active</text></g>
|
||||
<text x="900" y="48" font-size="16" stroke="none" fill="#666">⋯</text>
|
||||
</g>
|
||||
<!-- row 2 -->
|
||||
<g transform="translate(320,248)">
|
||||
<rect width="936" height="88" fill="#fff" stroke="#666" />
|
||||
<circle cx="40" cy="44" r="16" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="72" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">QA-Bot</text>
|
||||
<text x="72" y="56" font-size="12" stroke="none" fill="#666">Quality Assurance · $18 / $100 mo · active 5m ago</text>
|
||||
<circle cx="300" cy="32" r="3" fill="#000" stroke="none" />
|
||||
<text x="310" y="36" font-size="12" stroke="none" fill="#666">1 live</text>
|
||||
<g transform="translate(456,28)"><rect width="112" height="32" rx="4" fill="#fff" stroke="#666" /><text x="56" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">+ Assign Task</text></g>
|
||||
<g transform="translate(576,28)"><rect width="120" height="32" rx="4" fill="#fff" stroke="#666" /><text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Run Heartbeat</text></g>
|
||||
<g transform="translate(704,28)"><rect width="96" height="32" rx="4" fill="#fff" stroke="#666" /><text x="48" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">❙❙ Pause</text></g>
|
||||
<g transform="translate(808,28)"><rect width="64" height="20" rx="10" fill="#fff" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">active</text></g>
|
||||
<text x="900" y="48" font-size="16" stroke="none" fill="#666">⋯</text>
|
||||
</g>
|
||||
<!-- row 3 (paused) -->
|
||||
<g transform="translate(320,336)">
|
||||
<rect width="936" height="88" fill="#fff" stroke="#666" />
|
||||
<circle cx="40" cy="44" r="16" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="72" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">Designer</text>
|
||||
<text x="72" y="56" font-size="12" stroke="none" fill="#666">Product Design · $0 / $80 mo · active 3d ago</text>
|
||||
<g transform="translate(456,28)"><rect width="112" height="32" rx="4" fill="#fff" stroke="#666" /><text x="56" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">+ Assign Task</text></g>
|
||||
<g transform="translate(576,28)"><rect width="120" height="32" rx="4" fill="#fff" stroke="#666" /><text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Run Heartbeat</text></g>
|
||||
<g transform="translate(704,28)"><rect width="96" height="32" rx="4" fill="#fff" stroke="#666" /><text x="48" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Resume</text></g>
|
||||
<g transform="translate(808,28)"><rect width="64" height="20" rx="10" fill="#e6e6e6" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">paused</text></g>
|
||||
<text x="900" y="48" font-size="16" stroke="none" fill="#666">⋯</text>
|
||||
</g>
|
||||
<!-- row 4 -->
|
||||
<g transform="translate(320,424)">
|
||||
<rect width="936" height="88" fill="#fff" stroke="#666" />
|
||||
<circle cx="40" cy="44" r="16" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="72" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">CTO</text>
|
||||
<text x="72" y="56" font-size="12" stroke="none" fill="#666">Chief Technology Officer · $61 / $300 mo · active 1h ago</text>
|
||||
<g transform="translate(456,28)"><rect width="112" height="32" rx="4" fill="#fff" stroke="#666" /><text x="56" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">+ Assign Task</text></g>
|
||||
<g transform="translate(576,28)"><rect width="120" height="32" rx="4" fill="#fff" stroke="#666" /><text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">▷ Run Heartbeat</text></g>
|
||||
<g transform="translate(704,28)"><rect width="96" height="32" rx="4" fill="#fff" stroke="#666" /><text x="48" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">❙❙ Pause</text></g>
|
||||
<g transform="translate(808,28)"><rect width="64" height="20" rx="10" fill="#fff" stroke="#666" /><text x="32" y="14" font-size="12" text-anchor="middle" stroke="none" fill="#666">active</text></g>
|
||||
<text x="900" y="48" font-size="16" stroke="none" fill="#666">⋯</text>
|
||||
</g>
|
||||
|
||||
<!-- annotations -->
|
||||
<g data-region="annotations">
|
||||
<rect x="320" y="184" width="392" height="40" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(312,204)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text></g>
|
||||
<rect x="772" y="184" width="448" height="40" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(1232,204)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text></g>
|
||||
<rect x="8" y="120" width="264" height="96" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,168)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">3</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.0 KiB |
@@ -0,0 +1,87 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<text x="48" y="48" font-size="28" font-weight="700" stroke="none" fill="#000">Agents section — two states</text>
|
||||
<text x="48" y="80" font-size="14" stroke="none" fill="#666">The AGENTS sidebar section adapts to whether any agents are currently running.</text>
|
||||
|
||||
<!-- ===== STATE A: active agents exist ===== -->
|
||||
<text x="48" y="140" font-size="20" font-weight="600" stroke="none" fill="#000">A · Active agents present</text>
|
||||
<text x="48" y="164" font-size="12" stroke="none" fill="#666">Show only the agents with live runs.</text>
|
||||
<g transform="translate(48,184)">
|
||||
<rect width="320" height="220" fill="#fff" stroke="#666" />
|
||||
<text x="16" y="32" font-size="12" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
|
||||
<text x="292" y="32" font-size="14" stroke="none" fill="#666">+</text>
|
||||
<!-- active rows -->
|
||||
<circle cx="24" cy="64" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="69" font-size="14" stroke="none" fill="#000">ClaudeCoder</text>
|
||||
<circle cx="244" cy="64" r="3" fill="#000" stroke="none" />
|
||||
<text x="256" y="68" font-size="12" stroke="none" fill="#666">2 live</text>
|
||||
<circle cx="24" cy="100" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="105" font-size="14" stroke="none" fill="#000">QA-Bot</text>
|
||||
<circle cx="244" cy="100" r="3" fill="#000" stroke="none" />
|
||||
<text x="256" y="104" font-size="12" stroke="none" fill="#666">1 live</text>
|
||||
<circle cx="24" cy="136" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="141" font-size="14" stroke="none" fill="#000">CTO</text>
|
||||
<circle cx="244" cy="136" r="3" fill="#000" stroke="none" />
|
||||
<text x="256" y="140" font-size="12" stroke="none" fill="#666">1 live</text>
|
||||
<line x1="16" y1="172" x2="304" y2="172" stroke="#e6e6e6" />
|
||||
<text x="16" y="198" font-size="14" stroke="none" fill="#000">See all →</text>
|
||||
</g>
|
||||
|
||||
<!-- ===== STATE B: no active agents ===== -->
|
||||
<text x="448" y="140" font-size="20" font-weight="600" stroke="none" fill="#000">B · No active agents</text>
|
||||
<text x="448" y="164" font-size="12" stroke="none" fill="#666">Fall back to recently-active, capped at 5, with “See all”.</text>
|
||||
<g transform="translate(448,184)">
|
||||
<rect width="320" height="300" fill="#fff" stroke="#666" />
|
||||
<text x="16" y="32" font-size="12" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
|
||||
<text x="292" y="32" font-size="14" stroke="none" fill="#666">+</text>
|
||||
<text x="16" y="58" font-size="12" stroke="none" fill="#666">Recently active</text>
|
||||
<!-- up to 5 recent rows, no live dot -->
|
||||
<circle cx="24" cy="84" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="89" font-size="14" stroke="none" fill="#666">ClaudeCoder</text>
|
||||
<text x="244" y="88" font-size="12" stroke="none" fill="#666">2m ago</text>
|
||||
<circle cx="24" cy="116" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="121" font-size="14" stroke="none" fill="#666">QA-Bot</text>
|
||||
<text x="244" y="120" font-size="12" stroke="none" fill="#666">9m ago</text>
|
||||
<circle cx="24" cy="148" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="153" font-size="14" stroke="none" fill="#666">CTO</text>
|
||||
<text x="244" y="152" font-size="12" stroke="none" fill="#666">1h ago</text>
|
||||
<circle cx="24" cy="180" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="185" font-size="14" stroke="none" fill="#666">Designer</text>
|
||||
<text x="244" y="184" font-size="12" stroke="none" fill="#666">3h ago</text>
|
||||
<circle cx="24" cy="212" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="217" font-size="14" stroke="none" fill="#666">Researcher</text>
|
||||
<text x="244" y="216" font-size="12" stroke="none" fill="#666">1d ago</text>
|
||||
<line x1="16" y1="248" x2="304" y2="248" stroke="#e6e6e6" />
|
||||
<text x="16" y="276" font-size="14" stroke="none" fill="#000">See all →</text>
|
||||
</g>
|
||||
|
||||
<!-- arrow: See all -> list view -->
|
||||
<g transform="translate(800,460)">
|
||||
<line x1="0" y1="0" x2="80" y2="0" stroke="#000" />
|
||||
<polygon points="80,0 70,-6 70,6" fill="#000" stroke="none" />
|
||||
<text x="0" y="-12" font-size="12" stroke="none" fill="#666">See all opens</text>
|
||||
</g>
|
||||
<g transform="translate(896,184)">
|
||||
<rect width="336" height="300" fill="#fff" stroke="#666" />
|
||||
<text x="16" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">All agents (list view → 03)</text>
|
||||
<rect x="16" y="56" width="304" height="56" fill="#fff" stroke="#666" />
|
||||
<circle cx="40" cy="84" r="12" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="64" y="80" font-size="12" stroke="none" fill="#000">Agent name + key actions</text>
|
||||
<text x="64" y="98" font-size="12" stroke="none" fill="#666">Assign · Heartbeat · Pause · ⋯</text>
|
||||
<rect x="16" y="120" width="304" height="56" fill="#fff" stroke="#666" />
|
||||
<circle cx="40" cy="148" r="12" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="64" y="144" font-size="12" stroke="none" fill="#000">Agent name + key actions</text>
|
||||
<text x="64" y="162" font-size="12" stroke="none" fill="#666">Assign · Heartbeat · Resume · ⋯</text>
|
||||
<rect x="16" y="184" width="304" height="56" fill="#fff" stroke="#666" />
|
||||
<circle cx="40" cy="212" r="12" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="64" y="208" font-size="12" stroke="none" fill="#000">Row click → agent detail page</text>
|
||||
<text x="64" y="226" font-size="12" stroke="none" fill="#666">(unchanged from today)</text>
|
||||
</g>
|
||||
|
||||
<g data-region="annotations">
|
||||
<rect x="448" y="368" width="320" height="120" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<text x="448" y="516" font-size="12" stroke="none" fill="#d33">Recently-active fallback: max 5 rows, sorted by last heartbeat, then “See all”.</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,78 @@
|
||||
<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">
|
||||
<rect x="0" y="0" width="1280" height="800" />
|
||||
|
||||
<text x="48" y="48" font-size="28" font-weight="700" stroke="none" fill="#000">Project tile — customize icon & color</text>
|
||||
<text x="48" y="80" font-size="14" stroke="none" fill="#666">Default is a neutral gray rounded rectangle with a folder icon. Clicking the tile opens a picker.</text>
|
||||
|
||||
<!-- default tile -->
|
||||
<text x="48" y="140" font-size="20" font-weight="600" stroke="none" fill="#000">Default (neutral)</text>
|
||||
<g transform="translate(48,160)">
|
||||
<rect width="40" height="32" rx="8" fill="#e6e6e6" stroke="#666" />
|
||||
<path d="M10 12 l9 0 l3 -4 l8 0 l0 16 l-20 0 z" fill="#fff" stroke="#666" />
|
||||
</g>
|
||||
<text x="104" y="182" font-size="14" stroke="none" fill="#666">Onboarding v3</text>
|
||||
|
||||
<!-- customized examples -->
|
||||
<text x="48" y="248" font-size="20" font-weight="600" stroke="none" fill="#000">After customizing (color + icon)</text>
|
||||
<g transform="translate(48,268)">
|
||||
<rect width="40" height="32" rx="8" fill="#fff" stroke="#000" />
|
||||
<circle cx="20" cy="16" r="7" fill="none" stroke="#000" />
|
||||
</g>
|
||||
<g transform="translate(104,268)">
|
||||
<rect width="40" height="32" rx="8" fill="#fff" stroke="#000" />
|
||||
<polygon points="20,7 24,15 16,15" fill="none" stroke="#000" />
|
||||
</g>
|
||||
<g transform="translate(160,268)">
|
||||
<rect width="40" height="32" rx="8" fill="#fff" stroke="#000" />
|
||||
<rect x="12" y="9" width="16" height="14" rx="2" fill="none" stroke="#000" />
|
||||
</g>
|
||||
<text x="216" y="290" font-size="12" stroke="none" fill="#666">(swatch fill shown gray here — monochrome wireframe)</text>
|
||||
|
||||
<!-- picker popover -->
|
||||
<text x="048" y="356" font-size="20" font-weight="600" stroke="none" fill="#000">Picker popover</text>
|
||||
<g transform="translate(48,376)">
|
||||
<rect width="320" height="296" rx="8" fill="#fff" stroke="#000" />
|
||||
<text x="20" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">Customize project tile</text>
|
||||
<line x1="0" y1="56" x2="320" y2="56" stroke="#666" />
|
||||
|
||||
<text x="20" y="84" font-size="12" stroke="none" fill="#666">Color</text>
|
||||
<!-- color swatches grid -->
|
||||
<rect x="20" y="96" width="28" height="28" rx="6" fill="#e6e6e6" stroke="#000" />
|
||||
<rect x="56" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="92" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="128" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="164" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="200" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="236" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="272" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
|
||||
<text x="20" y="160" font-size="12" stroke="none" fill="#666">Icon</text>
|
||||
<!-- icon grid -->
|
||||
<rect x="20" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#000" />
|
||||
<path d="M28 184 l6 0 l2 -3 l6 0 l0 12 l-14 0 z" fill="#fff" stroke="#000" />
|
||||
<rect x="60" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
|
||||
<circle cx="76" cy="188" r="7" fill="none" stroke="#666" />
|
||||
<rect x="100" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
|
||||
<polygon points="116,179 122,197 110,197" fill="none" stroke="#666" />
|
||||
<rect x="140" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="148" y="180" width="16" height="16" rx="2" fill="none" stroke="#666" />
|
||||
<rect x="180" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
|
||||
<line x1="188" y1="196" x2="196" y2="180" stroke="#666" />
|
||||
<line x1="196" y1="196" x2="204" y2="180" stroke="#666" />
|
||||
<rect x="220" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
|
||||
<text x="232" y="194" font-size="14" stroke="none" fill="#666">★</text>
|
||||
|
||||
<!-- footer -->
|
||||
<line x1="0" y1="232" x2="320" y2="232" stroke="#666" />
|
||||
<g transform="translate(20,248)"><rect width="120" height="32" rx="4" fill="#fff" stroke="#666" /><text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">Reset to gray</text></g>
|
||||
<g transform="translate(232,248)"><rect width="68" height="32" rx="4" fill="#000" /><text x="34" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#fff">Save</text></g>
|
||||
</g>
|
||||
|
||||
<g data-region="annotations">
|
||||
<rect x="48" y="160" width="40" height="32" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(104,144)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">5</text></g>
|
||||
<text x="448" y="420" font-size="14" stroke="none" fill="#d33">— Same tile + picker is reused in the sidebar PROJECTS section and the Projects list rows.</text>
|
||||
<text x="448" y="444" font-size="14" stroke="none" fill="#d33">— Persisting color already exists (project.color). Icon needs a new project.icon field.</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |