PAP-10430: remove design artifacts from IA PR
No files matched your search
@@ -1 +0,0 @@
|
||||
.herenow/
|
||||
@@ -1,416 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PAP-75 — Agents + Project status colours (rev 17)</title>
|
||||
<style>
|
||||
/* Brand pill tokens (paperclip.ing brand.css .task-chip + dark overrides).
|
||||
Chips carry a 1px border and differ light vs dark. Classes are colour-named. */
|
||||
.light{
|
||||
--bg:#FFFFFF; --surface:#F0ECE7; --text:#0A0A0A; --text-2:#52585D; --muted:#A8AEB2; --rule:#E0DCD6;
|
||||
--d-gray:#A8AEB2; --d-blue:#2563EB; --d-amber:#F59E0B; --d-red:#DC2626; --d-green:#22C55E; --d-violet:#7C3AED;
|
||||
--c-blue-bg:#DBEAFE; --c-blue-fg:#1D4ED8; --c-blue-bd:#2563EB;
|
||||
--c-amber-bg:#FEF3C7; --c-amber-fg:#B45309; --c-amber-bd:#F59E0B;
|
||||
--c-green-bg:#DCFCE7; --c-green-fg:#188A3C; --c-green-bd:#22C55E;
|
||||
--c-violet-bg:#EDE9FE;--c-violet-fg:#5B21B6;--c-violet-bd:#7C3AED;
|
||||
--c-red-bg:#FEE2E2; --c-red-fg:#991B1B; --c-red-bd:#DC2626;
|
||||
--c-gray-bg:#F5F3F0; --c-gray-fg:#52585D; --c-gray-bd:#A8AEB2;
|
||||
--ring-cyan:#0891B2; --ring-amber:#D97706; --ring-red:#DC2626;
|
||||
}
|
||||
.dark{
|
||||
--bg:#141413; --surface:#1F1D1A; --text:#F3E6C4; --text-2:#9A958A; --muted:#6E6960; --rule:#2F2C28;
|
||||
--d-gray:#6E6960; --d-blue:#2563EB; --d-amber:#F59E0B; --d-red:#DC2626; --d-green:#22C55E; --d-violet:#7C3AED;
|
||||
--c-blue-bg:#2563eb2e; --c-blue-fg:#2563EB; --c-blue-bd:#2563eb73;
|
||||
--c-amber-bg:#f59e0b24; --c-amber-fg:#F59E0B; --c-amber-bd:#f59e0b73;
|
||||
--c-green-bg:#22c55e1f; --c-green-fg:#22C55E; --c-green-bd:#22c55e73;
|
||||
--c-violet-bg:#7c3aed33;--c-violet-fg:#C4B5FD;--c-violet-bd:#a78bfa80;
|
||||
--c-red-bg:#dc26262e; --c-red-fg:#DC2626; --c-red-bd:#dc262673;
|
||||
--c-gray-bg:#6e696024; --c-gray-fg:#9A958A; --c-gray-bd:#9e958a73;
|
||||
--ring-cyan:#22D3EE; --ring-amber:#FBBF24; --ring-red:#F87171;
|
||||
}
|
||||
|
||||
*{ box-sizing:border-box; }
|
||||
body{ margin:0; padding:32px 24px 80px; font-family:-apple-system,system-ui,"Segoe UI",sans-serif; background:#4a4641; color:#111; }
|
||||
.wrap{ max-width:1180px; margin:0 auto; }
|
||||
.page-head{ color:#f3e6c4; margin-bottom:18px; }
|
||||
.page-head h1{ font-size:22px; margin:0 0 6px; }
|
||||
.page-head p{ margin:3px 0; font-size:13px; opacity:.9; line-height:1.55; }
|
||||
.page-head code{ background:rgba(243,230,196,.14); padding:1px 5px; border-radius:4px; }
|
||||
.principle{ display:inline-block; margin-top:8px; font-size:12px; background:rgba(37,99,235,.18); border:1px solid #2563eb73; color:#bcd2ff; padding:4px 10px; border-radius:9999px; }
|
||||
|
||||
.legend{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 24px; }
|
||||
.lg-item{ display:flex; align-items:center; gap:8px; background:#26231f; border:1px solid #3a352f; border-radius:8px; padding:7px 11px; }
|
||||
|
||||
.panels{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
|
||||
@media (max-width:920px){ .panels{ grid-template-columns:1fr; } }
|
||||
.panel{ background:var(--bg); color:var(--text); border-radius:10px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
|
||||
.panel-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
|
||||
.agents-title{ font-size:20px; font-weight:600; margin:0 0 14px; color:var(--text); }
|
||||
|
||||
.list{ border:1px solid var(--rule); }
|
||||
.row{ display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--text); }
|
||||
.row:last-child{ border-bottom:none; }
|
||||
.lead{ flex:0 0 auto; display:flex; align-items:center; }
|
||||
|
||||
/* brand heartbeat capsule: vertical 8x16, radius 4 */
|
||||
.cap{ width:8px; height:16px; border-radius:4px; display:inline-block; flex:0 0 auto; }
|
||||
.cap.gray{ background:var(--d-gray);} .cap.blue{ background:var(--d-blue);} .cap.amber{ background:var(--d-amber);}
|
||||
.cap.red{ background:var(--d-red);} .cap.green{ background:var(--d-green);} .cap.violet{ background:var(--d-violet);}
|
||||
.cap.live{ animation:hb-pulse 1.6s ease-in-out infinite; } /* running */
|
||||
.cap.blink{ animation:hb-blink 1.2s step-end infinite; } /* error */
|
||||
@keyframes hb-pulse{ 0%,100%{opacity:.4;transform:scale(.85);} 50%{opacity:1;transform:scale(1);} }
|
||||
@keyframes hb-blink{ 0%,49.9%{background-color:var(--d-red);} 50%,100%{background-color:var(--bg);} }
|
||||
|
||||
.main{ flex:1 1 auto; min-width:0; }
|
||||
.name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.role{ font-size:12px; color:var(--text-2); margin-top:2px; }
|
||||
.trailing{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
|
||||
.meta{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted); }
|
||||
.meta.hb{ width:40px; text-align:right; }
|
||||
@media (max-width:1320px){ .meta.adapter{ display:none; } }
|
||||
|
||||
/* brand .task-chip — colour-named */
|
||||
.chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid; border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:500; white-space:nowrap; line-height:1; }
|
||||
.chip svg{ width:12px; height:12px; flex-shrink:0; } .ck{ stroke:var(--bg); }
|
||||
.chip.blue{ background:var(--c-blue-bg); color:var(--c-blue-fg); border-color:var(--c-blue-bd);}
|
||||
.chip.amber{ background:var(--c-amber-bg); color:var(--c-amber-fg); border-color:var(--c-amber-bd);}
|
||||
.chip.green{ background:var(--c-green-bg); color:var(--c-green-fg); border-color:var(--c-green-bd);}
|
||||
.chip.violet{ background:var(--c-violet-bg); color:var(--c-violet-fg); border-color:var(--c-violet-bd);}
|
||||
.chip.red{ background:var(--c-red-bg); color:var(--c-red-fg); border-color:var(--c-red-bd);}
|
||||
.chip.gray{ background:var(--c-gray-bg); color:var(--c-gray-fg); border-color:var(--c-gray-bd);}
|
||||
|
||||
.btns{ display:flex; gap:4px; }
|
||||
.btn{ width:24px; height:24px; border:1px solid var(--rule); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; }
|
||||
|
||||
/* sections */
|
||||
.sec{ border-radius:10px; padding:24px 28px; margin-top:30px; }
|
||||
.questions{ background:#f5f3f0; } .states{ background:#fff; }
|
||||
.sec h2{ font-size:18px; margin:0 0 4px; color:#0a0a0a; }
|
||||
.sec h3{ font-size:14px; margin:22px 0 10px; }
|
||||
.sec .sub{ margin:0 0 8px; color:#52585d; font-size:13px; line-height:1.5; max-width:900px; }
|
||||
.q{ border-top:1px solid #e0dcd6; padding:18px 0; } .q:first-of-type{ border-top:none; }
|
||||
.q h3{ font-size:15px; margin:0 0 4px; } .q .desc{ margin:0 0 12px; font-size:13px; color:#52585d; line-height:1.5; max-width:820px; }
|
||||
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:880px; }
|
||||
@media (max-width:760px){ .opts{ grid-template-columns:1fr; } }
|
||||
.opt{ border:1px solid #e0dcd6; border-radius:10px; overflow:hidden; background:#fff; }
|
||||
.opt.recommended{ border-color:#188a3c; box-shadow:0 0 0 1px #188a3c inset; }
|
||||
.opt-head{ font-size:12px; font-weight:700; padding:9px 12px; background:#ece8e2; color:#0a0a0a; display:flex; justify-content:space-between; gap:8px; }
|
||||
.opt-head .rec{ color:#188a3c; font-size:11px; white-space:nowrap; }
|
||||
.sample{ background:var(--bg); padding:10px 12px; } .sample + .sample{ border-top:1px solid var(--rule); }
|
||||
.sample .tag{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
|
||||
.sample .srow{ display:flex; align-items:center; gap:10px; color:var(--text); font-size:13px; }
|
||||
.sample .sname{ flex:1 1 auto; }
|
||||
|
||||
.st-table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; color:#0a0a0a; }
|
||||
.st-table th{ text-align:left; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#8a8780; font-weight:600; padding:6px 10px; border-bottom:1px solid #e0dcd6; }
|
||||
.st-table td{ padding:9px 10px; border-bottom:1px solid #efece7; vertical-align:middle; }
|
||||
.st-state{ font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:600; }
|
||||
.st-mean{ color:#52585d; max-width:300px; }
|
||||
.cellrow{ display:flex; align-items:center; gap:8px; }
|
||||
.cap-old{ width:10px; height:10px; border-radius:9999px; display:inline-block; flex:0 0 auto; }
|
||||
.chip-old{ display:inline-flex; align-items:center; border-radius:9999px; padding:2px 10px; font-size:12px; font-weight:500; white-space:nowrap; line-height:1.3; border:0; }
|
||||
.darkcell{ background:#141413; border-radius:8px; padding:8px 10px; display:inline-flex; }
|
||||
.note{ font-size:11px; }
|
||||
/* issue status icon (ring + optional dot), replicating StatusIcon.tsx */
|
||||
.ring{ position:relative; display:inline-block; width:16px; height:16px; border-radius:9999px; border:2px solid; box-sizing:border-box; flex:0 0 auto; }
|
||||
.ring.cyan{ border-color:var(--ring-cyan); color:var(--ring-cyan); }
|
||||
.ring.amber{ border-color:var(--ring-amber); color:var(--ring-amber); }
|
||||
.ring.red{ border-color:var(--ring-red); color:var(--ring-red); }
|
||||
.ring .corner{ position:absolute; bottom:-2px; right:-2px; width:8px; height:8px; border-radius:9999px; background:currentColor; border:1px solid var(--bg); }
|
||||
.ring .center{ position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:9999px; background:currentColor; }
|
||||
/* refined status icons: ring + horizontal bar (blocked glyph) / ring + dot */
|
||||
.si{ width:16px; height:16px; display:inline-block; vertical-align:middle; flex:0 0 auto; }
|
||||
.si.blue{ color:#2563EB; } .si.amber{ color:#F59E0B; } .si.red{ color:#DC2626; } .si.violet{ color:#7C3AED; } .si.teal{ color:var(--ring-cyan); }
|
||||
/* task-row standalone status icon (left of identifier) */
|
||||
.ticon{ width:14px; height:14px; display:inline-flex; flex:0 0 auto; } .ticon svg{ width:14px; height:14px; }
|
||||
.ticon.gray{ color:var(--d-gray); } .ticon.blue{ color:#2563EB; } .ticon.amber{ color:#F59E0B; } .ticon.violet{ color:#7C3AED; } .ticon.green{ color:#22C55E; } .ticon.red{ color:#DC2626; }
|
||||
.idf{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted); margin-right:8px; }
|
||||
.callout{ margin-top:22px; border:1px solid #2563EB; background:#f1f5ff; border-radius:10px; padding:16px 18px; }
|
||||
.callout.teal{ border-color:#0891B2; background:#effbfd; } .callout.teal h3{ color:#0e7490; }
|
||||
.callout h3{ margin:0 0 6px; color:#1D4ED8; } .callout p{ margin:0 0 8px; font-size:13px; color:#444; line-height:1.55; max-width:880px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="page-head">
|
||||
<h1>PAP-75 · Agents + Project status colours <span style="opacity:.6;font-size:14px">(rev 17)</span></h1>
|
||||
<p>Static mockup (not an app build). Indicator = brand <strong>heartbeat capsule</strong> (vertical <code>8×16</code>); chips = brand <strong><code>.task-chip</code></strong> (1px border, light vs dark). All values from <code>brand.css</code>.</p>
|
||||
<p style="color:#bcd2ff"><strong>rev 17 — new:</strong> the <strong>All Projects page</strong> chip mapping (see “All Projects page — project chips” + the sample projects list below). The same approved brand chips are mapped onto all 5 <code>PROJECT_STATUSES</code> in light + dark.</p>
|
||||
<span class="principle">Emerging principle: <strong>blue = liveness</strong> — actively running work is blue; queued/idle work is not.</span>
|
||||
</div>
|
||||
|
||||
<div class="panels">
|
||||
<!-- LIGHT -->
|
||||
<div class="panel light">
|
||||
<p class="panel-label">Light mode — #FFFFFF</p>
|
||||
<div class="agents-title">Agents</div>
|
||||
<div class="list">
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Hermes</div><div class="role">CEO</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Vega</div><div class="role">Engineer</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">30s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Atlas</div><div class="role">Writer</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">4m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Nova</div><div class="role">Researcher</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Lyra</div><div class="role">Designer</div></span><span class="trailing"><span class="meta adapter">cursor</span><span class="meta hb">6m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Orion</div><div class="role">QA</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">45s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Sol</div><div class="role">DevOps</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">8m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Juno</div><div class="role">PM</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">2m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap amber"></span></span><span class="main"><div class="name">Iris</div><div class="role">Security</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1h</span><span class="chip amber">paused</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap red blink"></span></span><span class="main"><div class="name">Kilo</div><div class="role">Analyst</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">3h</span><span class="chip red">error</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DARK -->
|
||||
<div class="panel dark">
|
||||
<p class="panel-label">Dark mode — #141413</p>
|
||||
<div class="agents-title">Agents</div>
|
||||
<div class="list">
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Hermes</div><div class="role">CEO</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Vega</div><div class="role">Engineer</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">30s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Atlas</div><div class="role">Writer</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">4m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Nova</div><div class="role">Researcher</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Lyra</div><div class="role">Designer</div></span><span class="trailing"><span class="meta adapter">cursor</span><span class="meta hb">6m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Orion</div><div class="role">QA</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">45s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Sol</div><div class="role">DevOps</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">8m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Juno</div><div class="role">PM</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">2m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap amber"></span></span><span class="main"><div class="name">Iris</div><div class="role">Security</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1h</span><span class="chip amber">paused</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap red blink"></span></span><span class="main"><div class="name">Kilo</div><div class="role">Analyst</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">3h</span><span class="chip red">error</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPREHENSIVE STATE INVENTORY -->
|
||||
<div class="sec states light">
|
||||
<h2>All states — today vs. suggested</h2>
|
||||
<p class="sub">Every agent + task state Paperclip allows (<code>packages/shared/src/constants.ts</code>), with today’s production styling and the proposed change. Today = circular dot + borderless pill; Suggested = heartbeat capsule + bordered task-chip.</p>
|
||||
|
||||
<h3>Agent states — <code>AGENT_STATUSES</code> (7)</h3>
|
||||
<table class="st-table">
|
||||
<thead><tr><th style="width:130px">State</th><th>What it means (verified in code)</th><th style="width:210px">Today</th><th style="width:230px">Suggested</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="st-state">idle</td><td class="st-mean">Online, no active run — the resting/available state (DB default)</td>
|
||||
<td><span class="cellrow"><span class="cap-old" style="background:#facc15"></span><span class="chip-old" style="background:#fef9c3;color:#a16207">idle</span></span></td>
|
||||
<td><span class="cellrow"><span class="cap gray"></span><span class="chip gray">idle</span></span> <span class="note" style="color:#52585d">← gray “idle” (D1 updated)</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">active</td><td class="st-mean"><strong>Dead code</strong> — never assigned to an agent; only a dashboard display alias for idle</td>
|
||||
<td><span class="cellrow"><span class="cap-old" style="background:#4ade80"></span><span class="chip-old" style="background:#dcfce7;color:#15803d">active</span></span></td>
|
||||
<td><span class="note" style="color:#b45309">collapse → <strong>idle</strong> (drop as a separate status)</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">running</td><td class="st-mean">A heartbeat is executing right now (live)</td>
|
||||
<td><span class="cellrow"><span class="cap-old" style="background:#22d3ee"></span><span class="chip-old" style="background:#cffafe;color:#0e7490">running</span></span></td>
|
||||
<td><span class="cellrow"><span class="cap blue live"></span><span class="chip blue">running</span></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">paused</td><td class="st-mean">Halted — <code>manual</code> / <code>budget</code> / <code>system</code> (<code>PAUSE_REASONS</code>)</td>
|
||||
<td><span class="cellrow"><span class="cap-old" style="background:#facc15"></span><span class="chip-old" style="background:#ffedd5;color:#c2410c">paused</span></span></td>
|
||||
<td><span class="cellrow"><span class="cap amber"></span><span class="chip amber">paused</span></span><div class="note" style="color:#188a3c;margin-top:3px">amber ✓ (D7 — gray would collide with the gray idle state)</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">error</td><td class="st-mean"><strong>The agent itself is broken</strong> — e.g. not connected to a model and failing every task. Distinct from a task failing (you’d know it’s the agent, not the work).</td>
|
||||
<td><span class="cellrow"><span class="cap-old" style="background:#f87171"></span><span class="chip-old" style="background:#fee2e2;color:#b91c1c">error</span></span></td>
|
||||
<td><span class="cellrow"><span class="cap red blink"></span><span class="chip red">error</span></span><div class="note" style="color:#b91c1c;margin-top:3px">red, <strong>blinking</strong> — re-added (D5 reversed)</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">pending_approval</td><td class="st-mean">Newly hired — awaiting hire approval</td>
|
||||
<td><span class="cellrow"><span class="cap-old" style="background:#fbbf24"></span><span class="chip-old" style="background:#fef3c7;color:#b45309">pending approval</span></span></td>
|
||||
<td><span class="note" style="color:#52585d">— <strong>removed from the agents list.</strong> Hiring approval happens in the <em>task thread</em>: the hiring-plan task pauses as a purple <code>in review</code> task → approve there. No separate agent state.</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">terminated</td><td class="st-mean">Retired / decommissioned (terminal)</td>
|
||||
<td><span class="cellrow"><span class="cap-old" style="background:#a3a3a3"></span><span class="chip-old" style="background:#fee2e2;color:#b91c1c">terminated</span></span></td>
|
||||
<td><span class="note" style="color:#52585d">— <strong>not shown in the agents list</strong> (hidden like archived companies; lives elsewhere / DB).</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="sub" style="margin-top:6px"><strong>The agents list shows 4 states:</strong> <span class="chip gray" style="margin:0 2px"></span>idle · <span class="chip blue" style="margin:0 2px"></span>running · <span class="chip amber" style="margin:0 2px"></span>paused · <span class="chip red" style="margin:0 2px"></span>error. <code>active</code> folds into idle; <code>pending_approval</code> and <code>terminated</code> are not listed (see above).</p>
|
||||
|
||||
<h3>Task states — <code>ISSUE_STATUSES</code> (7) + derived blocked sub-states</h3>
|
||||
<p class="sub"><strong>blue = liveness</strong>: <code>in_progress</code> → <strong>blue</strong>, <code>todo</code> → <strong>amber</strong>. Suggested chips now carry the brand task-state <strong>icon</strong> (the 12px glyph from paperclip.ing/brand “Task states”). Derived <code>blocked</code> sub-states (from <code>StatusIcon.tsx</code> via <code>blockerAttention.state</code>) are shown as the status-icon ring — they are not separate <code>ISSUE_STATUSES</code> values and need no colour change.</p>
|
||||
<table class="st-table">
|
||||
<thead><tr><th style="width:170px">State</th><th style="width:230px">Today</th><th style="width:210px">Suggested</th><th>Suggested — dark</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="st-state">backlog</td><td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">backlog</span></td><td><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></td><td><span class="darkcell dark"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></td></tr>
|
||||
<tr><td class="st-state">todo <span class="note" style="color:#8a8780">→ amber</span></td><td><span class="chip-old" style="background:#dbeafe;color:#1d4ed8">todo</span></td><td><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></td><td><span class="darkcell dark"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></span></td></tr>
|
||||
<tr><td class="st-state">in_progress <span class="note" style="color:#8a8780">→ blue · live</span></td><td><span class="chip-old" style="background:#fef9c3;color:#a16207">in progress</span></td><td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></td><td><span class="darkcell dark"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></td></tr>
|
||||
<tr><td class="st-state">in_review</td><td><span class="chip-old" style="background:#ede9fe;color:#6d28d9">in review</span></td><td><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></td><td><span class="darkcell dark"><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></span></td></tr>
|
||||
<tr><td class="st-state">done</td><td><span class="chip-old" style="background:#dcfce7;color:#15803d">done</span></td><td><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></td><td><span class="darkcell dark"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></span></td></tr>
|
||||
<tr><td class="st-state">blocked</td><td><span class="chip-old" style="background:#fee2e2;color:#b91c1c">blocked</span></td><td><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></td><td><span class="darkcell dark"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></td></tr>
|
||||
<tr><td class="st-state">cancelled</td><td><span class="chip-old" style="background:#f3f4f6;color:#6b7280;text-decoration:line-through">cancelled</span></td><td><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></td><td><span class="darkcell dark"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></td></tr>
|
||||
<tr><td colspan="4" style="padding-top:14px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a8780;border-bottom:1px solid #e0dcd6">blocked — collapsed to 2 (In queue + blocked) per D6</td></tr>
|
||||
<tr><td class="st-state">In queue <div class="note" style="color:#1d4ed8;font-weight:400;text-transform:none">blocked behind a live child</div></td><td><span class="cellrow"><span class="ring cyan"><span class="corner"></span></span><span class="note">teal ring + dot</span></span></td><td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></td><td><span class="darkcell dark"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></span></td></tr>
|
||||
<tr><td class="st-state">blocked <div class="note" style="color:#b91c1c;font-weight:400;text-transform:none">plain blocked = task blocked</div></td><td><span class="cellrow"><span class="ring red"></span><span class="note">red ring</span></span></td><td><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></td><td><span class="darkcell dark"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Blocked → 2 states (your call: collapse to In queue + blocked)</h3>
|
||||
<p class="sub">All the “stalled / needs-attention / plain” nuances (verified in <code>StatusIcon.tsx</code> + <code>server/.../issues.ts</code>) fold into one red <strong>blocked</strong>. The only distinction kept is whether the block is <em>self-healing</em>.</p>
|
||||
<table class="st-table">
|
||||
<thead><tr><th style="width:150px">Chip</th><th>You see it when…</th><th style="width:170px">Self-heals?</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></td><td class="st-mean">A blocking sub-task/dependency is <strong>currently running</strong> (or human-assigned / awaiting approval) — the parent is only waiting on its own live child.</td><td><strong>Yes</strong> — unblocks when the child finishes. No action needed.</td></tr>
|
||||
<tr><td><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></td><td class="st-mean">Everything else that’s genuinely stuck — a blocker in review with no one on it, unassigned/parked/cancelled, an agent down, or a manual block.</td><td>No — needs a <strong>human</strong> (decision / triage / unblock).</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="sub" style="margin-top:6px"><strong>In queue</strong> is the one worth keeping distinct — it means <em>not actually stuck</em> (a child is moving it forward). Everything else is just <strong>blocked</strong> (red). The richer covered/stalled/needs-attention signal still exists under the hood (<code>blockerAttention</code>) and could power tooltips/filters later, but the chip is binary.</p>
|
||||
|
||||
<div class="callout">
|
||||
<h3>Your question: active vs idle (verified in code)</h3>
|
||||
<p><strong><code>active</code> and <code>idle</code> are not meaningfully different — they should be collapsed.</strong> The agents table defaults to <code>idle</code> and is never set to <code>active</code>; <code>active</code> exists only as a dashboard <em>display alias</em> (it counts idle agents as “active”). So the resting state is one thing — labelled <strong>“idle” (gray)</strong> — and <strong>“running” (blue)</strong> when a heartbeat is executing. That idle + running mix is what a healthy org shows above.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SAMPLE TASK PAGE -->
|
||||
<h2 style="color:#f3e6c4;font-size:18px;margin:34px 0 4px;">Sample task list — all task states</h2>
|
||||
<p style="color:#f3e6c4;opacity:.85;font-size:13px;margin:0 0 14px;max-width:900px;line-height:1.5;">A realistic task list covering every <code style="background:rgba(243,230,196,.14);padding:1px 5px;border-radius:4px">ISSUE_STATUS</code> plus the two blocked states (<strong>In queue</strong>, <strong>blocked</strong>). Brand status icon on the left, brand chip on the right — consistent icon sizes + chip heights. (Spec for the D4 follow-up.)</p>
|
||||
<div class="panels">
|
||||
<!-- LIGHT task list -->
|
||||
<div class="panel light">
|
||||
<p class="panel-label">Light mode</p>
|
||||
<div class="agents-title">Tasks</div>
|
||||
<div class="list">
|
||||
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-41</span>Refactor auth module</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-42</span>Write API docs</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-44</span>Ship onboarding flow</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-47</span>Fix payment crash</div></span><span class="trailing"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-48</span>Draft Q3 roadmap</div></span><span class="trailing"><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-40</span>Set up CI pipeline</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-43</span>Design system audit</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-49</span>Deprecate old API</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DARK task list -->
|
||||
<div class="panel dark">
|
||||
<p class="panel-label">Dark mode</p>
|
||||
<div class="agents-title">Tasks</div>
|
||||
<div class="list">
|
||||
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-41</span>Refactor auth module</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-42</span>Write API docs</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-44</span>Ship onboarding flow</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-47</span>Fix payment crash</div></span><span class="trailing"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-48</span>Draft Q3 roadmap</div></span><span class="trailing"><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-40</span>Set up CI pipeline</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-43</span>Design system audit</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-49</span>Deprecate old API</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROJECT STATES — today vs suggested (PAP-75 follow-up) -->
|
||||
<div class="sec states light">
|
||||
<h2>All Projects page — project chips, today vs. suggested</h2>
|
||||
<p class="sub">Mapping the approved brand chip system (bordered <code>.task-chip</code> + 12px status glyph, light/dark) onto every project state Paperclip allows (<code>PROJECT_STATUSES</code> in <code>packages/shared/src/constants.ts</code>). Today the all-projects list renders the borderless <code>StatusBadge</code> pill (<code>ui/src/components/StatusBadge.tsx</code> → <code>statusBadge</code> map); suggested swaps it for the same bordered chip used by tasks and agents. <strong>blue = liveness</strong> carries over: <code>in_progress</code> → blue.</p>
|
||||
|
||||
<h3>Project states — <code>PROJECT_STATUSES</code> (5)</h3>
|
||||
<table class="st-table">
|
||||
<thead><tr><th style="width:140px">State</th><th>What it means (verified in code)</th><th style="width:170px">Today</th><th style="width:170px">Suggested — light</th><th>Suggested — dark</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="st-state">backlog</td><td class="st-mean">Parked / unscheduled — not yet picked up</td>
|
||||
<td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">backlog</span></td>
|
||||
<td><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></td>
|
||||
<td><span class="darkcell dark"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">planned <span class="note" style="color:#8a8780">→ amber</span></td><td class="st-mean">Scheduled / committed but not started. <strong>Today it's an identical gray to backlog</strong> — indistinguishable. Amber gives it the “queued, ready” identity (mirrors task <code>todo</code>).</td>
|
||||
<td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">planned</span></td>
|
||||
<td><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></td>
|
||||
<td><span class="darkcell dark"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">in_progress <span class="note" style="color:#8a8780">→ blue · live</span></td><td class="st-mean">Actively being worked — the project has live work. <strong>blue = liveness</strong> (today it's yellow).</td>
|
||||
<td><span class="chip-old" style="background:#fef9c3;color:#a16207">in progress</span></td>
|
||||
<td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></td>
|
||||
<td><span class="darkcell dark"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">completed</td><td class="st-mean">Project delivered / closed out (matches task <code>done</code> + goal <code>achieved</code>)</td>
|
||||
<td><span class="chip-old" style="background:#dcfce7;color:#15803d">completed</span></td>
|
||||
<td><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></td>
|
||||
<td><span class="darkcell dark"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">cancelled</td><td class="st-mean">Abandoned, not to be resumed (gray + strikethrough, matches task <code>cancelled</code>)</td>
|
||||
<td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">cancelled</span></td>
|
||||
<td><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></td>
|
||||
<td><span class="darkcell dark"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Derived overlays — not in <code>PROJECT_STATUSES</code> (handled separately)</h3>
|
||||
<p class="sub">A project also carries <code>pauseReason</code>/<code>pausedAt</code> and <code>archivedAt</code> (verified in <code>packages/shared/src/types/project.ts</code>). These are overlays on top of the base status, not values in the 5-state enum.</p>
|
||||
<table class="st-table">
|
||||
<thead><tr><th style="width:140px">Overlay</th><th>What it means</th><th style="width:170px">Suggested — light</th><th>Suggested — dark</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="st-state">paused</td><td class="st-mean">Project halted (<code>manual</code> / <code>budget</code> / <code>system</code>). Amber, consistent with a <strong>paused agent</strong> (D7). Shown as an overlay chip beside the base status, not a replacement enum value.</td>
|
||||
<td><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></td>
|
||||
<td><span class="darkcell dark"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="st-state">archived</td><td class="st-mean"><strong>Not shown in the all-projects list</strong> — the page already filters <code>!p.archivedAt</code> (<code>ui/src/pages/Projects.tsx</code>). Same treatment as terminated agents / archived companies. No chip needed.</td>
|
||||
<td colspan="2"><span class="note" style="color:#52585d">— hidden from the list (no chip change required) —</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="sub" style="margin-top:6px"><strong>The all-projects list shows 5 chips:</strong>
|
||||
<span class="chip gray" style="margin:0 2px">backlog</span>
|
||||
<span class="chip amber" style="margin:0 2px">planned</span>
|
||||
<span class="chip blue" style="margin:0 2px">in progress</span>
|
||||
<span class="chip green" style="margin:0 2px">completed</span>
|
||||
<span class="chip gray" style="margin:0 2px;text-decoration:line-through">cancelled</span>
|
||||
· the only colour <em>changes</em> from today are <strong>planned</strong> (gray → amber, to split it from backlog) and <strong>in_progress</strong> (yellow → blue, the liveness rule).</p>
|
||||
</div>
|
||||
|
||||
<!-- SAMPLE ALL PROJECTS PAGE -->
|
||||
<h2 style="color:#f3e6c4;font-size:18px;margin:34px 0 4px;">Sample All Projects list — all project states</h2>
|
||||
<p style="color:#f3e6c4;opacity:.85;font-size:13px;margin:0 0 14px;max-width:900px;line-height:1.5;">The all-projects page (<code style="background:rgba(243,230,196,.14);padding:1px 5px;border-radius:4px">ui/src/pages/Projects.tsx</code>) with the proposed brand chips on the far right, every <code style="background:rgba(243,230,196,.14);padding:1px 5px;border-radius:4px">PROJECT_STATUS</code> covered. Project tile icon on the left (unchanged), brand status chip on the right.</p>
|
||||
<div class="panels">
|
||||
<!-- LIGHT projects list -->
|
||||
<div class="panel light">
|
||||
<p class="panel-label">Light mode</p>
|
||||
<div class="agents-title">Projects</div>
|
||||
<div class="list">
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#2563EB;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip App</div><div class="role">12 tasks</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#7C3AED;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip Website</div><div class="role">8 tasks</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#A8AEB2;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">companies.io</div><div class="role">3 tasks</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#22C55E;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Onboarding revamp</div><div class="role">20 tasks</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#F59E0B;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Discord bot</div><div class="role">5 tasks · paused</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#A8AEB2;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Legacy migration</div><div class="role">2 tasks</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DARK projects list -->
|
||||
<div class="panel dark">
|
||||
<p class="panel-label">Dark mode</p>
|
||||
<div class="agents-title">Projects</div>
|
||||
<div class="list">
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#2563EB;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip App</div><div class="role">12 tasks</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#7C3AED;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip Website</div><div class="role">8 tasks</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#A8AEB2;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">companies.io</div><div class="role">3 tasks</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#22C55E;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Onboarding revamp</div><div class="role">20 tasks</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#F59E0B;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Discord bot</div><div class="role">5 tasks · paused</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></span></div>
|
||||
<div class="row"><span class="lead"><span class="cap" style="background:#6E6960;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Legacy migration</div><div class="role">2 tasks</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DECISIONS — RESOLVED -->
|
||||
<div class="sec questions">
|
||||
<h2>Decisions — resolved ✓</h2>
|
||||
<p class="sub">Locked into the plan (✦ = updated this round):</p>
|
||||
<div class="q"><h3>✦ D1 — <code>active</code> collapses into one resting state, shown <strong>gray “idle”</strong> (reverted from green “online”).</h3></div>
|
||||
<div class="q"><h3>✦ D2 — <code>pending_approval</code> is <strong>removed as an agent state.</strong> Hiring approval happens in the task thread (the hiring-plan task pauses as a purple <code>in review</code> task → approve there).</h3></div>
|
||||
<div class="q"><h3>✦ D3 — <code>terminated</code> is <strong>removed from the agents list</strong> (hidden like archived companies; lives elsewhere / DB), rather than shown gray.</h3></div>
|
||||
<div class="q"><h3>✓ D4 — issue/task chip + status-icon restyle → <strong>follow-up</strong> issue (paperclip-website project, its own workspace). PAP-75 ships <em>agents</em> only.</h3></div>
|
||||
<div class="q"><h3>✦ D5 — agent <code>error</code> capsule <strong>re-added</strong> (red, blinking). Scenario: the agent is broken (e.g. not connected to a model) and failing every task — distinct from a task failing.</h3></div>
|
||||
<div class="q"><h3>✦ D6 — blocked task states <strong>collapse to 2</strong>: <strong>In queue</strong> (blue, self-heals) + <strong>blocked</strong> (red).</h3></div>
|
||||
<div class="q"><h3>✓ D7 — <strong>paused</strong> agent = <strong>amber</strong> (gray would collide with the gray idle state).</h3></div>
|
||||
<div class="q"><h3>✦ D8 — <strong>All Projects page chips</strong> adopt the same brand chip system. 5 <code>PROJECT_STATUSES</code> map to: backlog (gray) · planned (amber) · in_progress (blue, liveness) · completed (green) · cancelled (gray, strikethrough). Only two colour <em>changes</em> from today: <strong>planned</strong> gray→amber (split from backlog) and <strong>in_progress</strong> yellow→blue. <code>paused</code> overlay = amber; <code>archived</code> stays hidden from the list. <span style="color:#b45309">Awaiting board approval.</span></h3></div>
|
||||
<p class="sub" style="margin-top:14px"><strong>All decisions confirmed by the board.</strong> Final agents list = 4 states: <strong>idle (gray) · running (blue, pulse 1.6s) · paused (amber) · error (red, blinking)</strong>. <code>active</code>→idle; <code>pending_approval</code> & <code>terminated</code> not listed.</p>
|
||||
<p class="sub"><strong>Follow-ups created</strong> for the task/issue status restyle: one on the <strong>Paperclip App</strong> (core app, everywhere statuses appear) and one on the <strong>Paperclip Website</strong> project. PAP-75 itself ships the agent changes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,331 +0,0 @@
|
||||
<!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>Resolved decisions</h2>
|
||||
<a href="#open"><span class="num">✓</span>Board answers</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">Revised v2 · per board feedback</span>
|
||||
<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">Revised after board review. Nav structure, ordering, and the open questions are now locked per the board's direction.</p>
|
||||
<div class="notes">
|
||||
<ul>
|
||||
<li><b>Top level</b> (no section label): Conference room, New Task, Dashboard, Inbox.</li>
|
||||
<li><b>Work</b> (exact order): Tasks, Routines, Goals, Workspaces, Artifacts, Projects.</li>
|
||||
<li><b>Conference room</b> — new placeholder top-level item, chat-bubble icon, empty page for now (screen 1).</li>
|
||||
<li><b>New Issue → New Task</b> — renamed; standard nav label color (screen 1).</li>
|
||||
<li><b>Issues → Tasks</b> — renamed <i>globally</i> across the frontend (nav item, page, all references).</li>
|
||||
<li><b>Artifacts</b> — new Work item; <b>Projects</b> — new Work item at the bottom of Work, opens the projects list view (screens 1 & 2).</li>
|
||||
<li><b>Removed</b> — the old collapsible PROJECTS section (per-project rows in the sidebar) is deleted (screen 1).</li>
|
||||
<li><b>Project tiles</b> — neutral gray rounded rectangle + folder icon; <b>color-only</b> customization this phase, folder icon fixed (screens 2 & 5).</li>
|
||||
<li><b>Agents section</b> — active agents only when any are running; otherwise up to 5 recently-active + "See all agents" → 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 top-level item, chat-bubble icon.</li>
|
||||
<li><b>2</b> — New Issue → New Task; standard nav label color.</li>
|
||||
<li><b>3</b> — Issues → Tasks (renamed globally).</li>
|
||||
<li><b>4</b> — Artifacts: new Work item.</li>
|
||||
<li><b>5</b> — Projects: new Work item (bottom of Work), opens the list view.</li>
|
||||
<li><b>6</b> — Removed: the old collapsible PROJECTS section.</li>
|
||||
<li><b>7</b> — Agents: active/recent + "See all agents" (screen 4).</li>
|
||||
</ul>
|
||||
<div class="why"><b>Why this changes:</b> Locks the nav to the board's specified structure and order. Work becomes the single home for cross-cutting views; per-project rows leave the sidebar entirely (you reach a project via Projects → list → detail). 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. Task count and budget are not on the Project type today — the board approved adding a lightweight count + budget lookup for these rows.</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 color picker opened by clicking it. Color-only this phase; the folder icon is fixed. Desktop-only overlay.</p>
|
||||
<div class="wire" data-zoom data-caption="05 · Project tile color">
|
||||
<div class="label"><span>05-project-customize.svg</span><span>1280×800</span></div>
|
||||
<img src="wireframes/05-project-customize.svg" alt="Project tile color wireframe" />
|
||||
</div>
|
||||
<div class="notes">
|
||||
<div class="why"><b>Why this changes:</b> Per board direction, build <b>color only first</b> — every tile keeps a folder icon (custom-icon picker deferred). Default tiles are neutral gray. Since the per-project sidebar list is removed, tiles live in the Projects list rows and the project detail header, so the color control attaches to the project itself. <code>project.color</code> already exists — no new field needed this phase.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="open">
|
||||
<div class="lede">Board answers</div>
|
||||
<h2>Resolved decisions</h2>
|
||||
<div class="notes">
|
||||
<ul>
|
||||
<li><b>Terminology</b> — Issues → <b>Tasks</b>, renamed <i>globally</i> on the frontend.</li>
|
||||
<li><b>Conference room</b> — Placeholder only, empty page for now. <b>Confirmed.</b></li>
|
||||
<li><b>Projects: dual presence</b> — <b>No.</b> Delete the existing collapsible PROJECTS section; projects are reached only via the Projects list view.</li>
|
||||
<li><b>Row data</b> — <b>Yes</b>, add a lightweight task-count + budget lookup for the list rows.</li>
|
||||
<li><b>Project icon</b> — <b>Color only first.</b> Keep a fixed folder icon for every tile; defer custom-icon picker.</li>
|
||||
<li><b>Work order</b> — <b>Tasks · Routines · Goals · Workspaces · Artifacts · Projects.</b></li>
|
||||
</ul>
|
||||
<div class="why"><b>Nesting confirmed:</b> Projects (nav) → projects list in the main pane → row → project detail. "See all agents" → agents list in the main pane → row → agent detail.</div>
|
||||
</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>
|
||||
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
@@ -1,72 +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">
|
||||
<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="160" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="174" font-size="14" stroke="none" fill="#666">Dashboard</text>
|
||||
<rect x="16" y="196" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="210" font-size="14" stroke="none" fill="#666">Inbox</text>
|
||||
|
||||
<!-- WORK -->
|
||||
<text x="16" y="248" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">WORK</text>
|
||||
<rect x="16" y="260" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="274" font-size="14" stroke="none" fill="#666">Tasks</text>
|
||||
<rect x="16" y="296" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="310" font-size="14" stroke="none" fill="#666">Routines</text>
|
||||
<rect x="16" y="332" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="346" font-size="14" stroke="none" fill="#666">Goals</text>
|
||||
<rect x="16" y="368" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="382" font-size="14" stroke="none" fill="#666">Workspaces</text>
|
||||
<rect x="16" y="404" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="418" font-size="14" stroke="none" fill="#000">Artifacts</text>
|
||||
<rect x="16" y="440" width="18" height="15" rx="2" fill="#fff" stroke="#000" />
|
||||
<path d="M16 443 l6 0 l2 -3 l4 0" fill="none" stroke="#000" />
|
||||
<text x="48" y="454" font-size="14" stroke="none" fill="#000">Projects</text>
|
||||
|
||||
<!-- AGENTS -->
|
||||
<text x="16" y="498" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
|
||||
<circle cx="25" cy="518" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="523" font-size="14" stroke="none" fill="#666">ClaudeCoder</text>
|
||||
<circle cx="300" cy="518" r="3" fill="#000" stroke="none" />
|
||||
<text x="312" y="522" font-size="12" stroke="none" fill="#666">2 live</text>
|
||||
<circle cx="25" cy="554" r="9" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="559" font-size="14" stroke="none" fill="#666">QA-Bot</text>
|
||||
<circle cx="300" cy="554" r="3" fill="#000" stroke="none" />
|
||||
<text x="312" y="558" font-size="12" stroke="none" fill="#666">1 live</text>
|
||||
<text x="48" y="595" font-size="14" stroke="none" fill="#000">See all agents →</text>
|
||||
|
||||
<!-- COMPANY -->
|
||||
<text x="16" y="639" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">COMPANY</text>
|
||||
<rect x="16" y="651" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="48" y="665" font-size="14" stroke="none" fill="#666">Org · Skills · Costs · Activity · Settings</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">Tasks</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="260" width="359" height="20" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(355,270)"><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">3</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.8 KiB |
@@ -1,127 +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">
|
||||
<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 cluster (no section label) ===== -->
|
||||
<!-- Conference room (NEW) — chat bubble icon -->
|
||||
<g>
|
||||
<rect x="8" y="56" width="264" height="32" fill="#fff" stroke="none" />
|
||||
<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 -->
|
||||
<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="206" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">WORK</text>
|
||||
<!-- Tasks (renamed from Issues) -->
|
||||
<rect x="16" y="216" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="231" font-size="14" stroke="none" fill="#666">Tasks</text>
|
||||
<!-- Routines -->
|
||||
<rect x="16" y="248" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="263" font-size="14" stroke="none" fill="#666">Routines</text>
|
||||
<!-- Goals -->
|
||||
<rect x="16" y="280" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="295" font-size="14" stroke="none" fill="#666">Goals</text>
|
||||
<!-- Workspaces -->
|
||||
<rect x="16" y="312" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="327" font-size="14" stroke="none" fill="#666">Workspaces</text>
|
||||
<!-- Artifacts (NEW) -->
|
||||
<rect x="16" y="344" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="359" font-size="14" stroke="none" fill="#000">Artifacts</text>
|
||||
<!-- Projects (NEW nav item) — shown active/selected -->
|
||||
<rect x="8" y="370" width="264" height="32" fill="#e6e6e6" stroke="none" />
|
||||
<rect x="16" y="378" width="16" height="13" rx="2" fill="#fff" stroke="#000" />
|
||||
<path d="M16 381 l5 0 l2 -3 l4 0" fill="none" stroke="#000" />
|
||||
<text x="44" y="391" font-size="14" stroke="none" fill="#000">Projects</text>
|
||||
|
||||
<!-- ===== AGENTS section (active state) ===== -->
|
||||
<text x="16" y="438" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
|
||||
<text x="248" y="438" font-size="14" stroke="none" fill="#666">+</text>
|
||||
<g>
|
||||
<circle cx="24" cy="458" r="8" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="463" font-size="14" stroke="none" fill="#666">ClaudeCoder</text>
|
||||
<circle cx="214" cy="458" r="3" fill="#000" stroke="none" />
|
||||
<text x="224" y="462" font-size="12" stroke="none" fill="#666">2 live</text>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="24" cy="490" r="8" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="495" font-size="14" stroke="none" fill="#666">QA-Bot</text>
|
||||
<circle cx="214" cy="490" r="3" fill="#000" stroke="none" />
|
||||
<text x="224" y="494" font-size="12" stroke="none" fill="#666">1 live</text>
|
||||
</g>
|
||||
<!-- See all agents -->
|
||||
<text x="44" y="527" font-size="14" stroke="none" fill="#000">See all agents →</text>
|
||||
|
||||
<!-- ===== COMPANY section ===== -->
|
||||
<text x="16" y="574" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">COMPANY</text>
|
||||
<rect x="16" y="584" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="599" font-size="14" stroke="none" fill="#666">Org</text>
|
||||
<rect x="16" y="616" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="631" font-size="14" stroke="none" fill="#666">Skills</text>
|
||||
<rect x="16" y="648" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="663" font-size="14" stroke="none" fill="#666">Costs</text>
|
||||
<rect x="16" y="680" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="695" font-size="14" stroke="none" fill="#666">Activity</text>
|
||||
<rect x="16" y="712" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
|
||||
<text x="44" y="727" font-size="14" stroke="none" fill="#666">Settings</text>
|
||||
|
||||
<!-- ============ CONTENT AREA (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. clicking Projects opens the projects list view)</text>
|
||||
|
||||
<!-- legend of changes -->
|
||||
<g transform="translate(320,120)">
|
||||
<rect width="700" height="276" rx="6" fill="#fff" stroke="#666" />
|
||||
<text x="20" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">Left nav — final structure (per board direction)</text>
|
||||
<text x="20" y="62" font-size="14" stroke="none" fill="#000">1 Conference room — NEW top-level item (chat bubble), placeholder page</text>
|
||||
<text x="20" y="88" font-size="14" stroke="none" fill="#000">2 New Issue → New Task; standard nav label color</text>
|
||||
<text x="20" y="114" font-size="14" stroke="none" fill="#000">3 Issues → Tasks — renamed globally across the frontend</text>
|
||||
<text x="20" y="140" font-size="14" stroke="none" fill="#000">4 Artifacts — NEW Work item</text>
|
||||
<text x="20" y="166" font-size="14" stroke="none" fill="#000">5 Projects — NEW Work item (bottom of Work); opens the projects list view</text>
|
||||
<text x="20" y="192" font-size="14" stroke="none" fill="#d33">6 REMOVED: the old collapsible PROJECTS section (per-project rows in nav)</text>
|
||||
<text x="20" y="218" font-size="14" stroke="none" fill="#000">7 Agents — active only (or 5 recently active) + “See all agents”</text>
|
||||
<text x="20" y="250" font-size="12" stroke="none" fill="#666">Work order: Tasks · Routines · Goals · Workspaces · Artifacts · Projects</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>
|
||||
|
||||
<rect x="8" y="214" width="264" height="20" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,224)"><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="342" width="264" height="20" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,352)"><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>
|
||||
|
||||
<g transform="translate(286,386)"><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="424" width="264" height="112" fill="none" stroke="#d33" stroke-dasharray="6 3" />
|
||||
<g transform="translate(286,480)"><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">7</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.6 KiB |
@@ -1,58 +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">
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 3.6 KiB |
@@ -1,96 +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">
|
||||
<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>
|
||||
<text x="16" y="93" font-size="12" letter-spacing="1" stroke="none" fill="#999">WORK</text>
|
||||
<text x="24" y="121" font-size="14" stroke="none" fill="#999">Artifacts</text>
|
||||
<rect x="8" y="136" width="264" height="32" fill="#e6e6e6" stroke="none" />
|
||||
<text x="24" y="157" font-size="14" stroke="none" fill="#000">Projects</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>
|
||||
|
Before Width: | Height: | Size: 6.6 KiB |
@@ -1,50 +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">
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 3.8 KiB |
@@ -1,91 +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">
|
||||
<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 agents→</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>
|
||||
|
Before Width: | Height: | Size: 8.0 KiB |
@@ -1,87 +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">
|
||||
<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 agents →</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 agents →</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>
|
||||
|
Before Width: | Height: | Size: 5.9 KiB |
@@ -1,74 +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">
|
||||
<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 — change color (folder icon fixed)</text>
|
||||
<text x="48" y="80" font-size="14" stroke="none" fill="#666">Default is a neutral gray rounded rectangle with a folder icon. Color is user-customizable now; the icon stays a folder for this phase.</text>
|
||||
|
||||
<!-- default tile -->
|
||||
<text x="48" y="140" font-size="20" font-weight="600" stroke="none" fill="#000">Default (neutral gray)</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 (color changes, folder icon stays) -->
|
||||
<text x="48" y="248" font-size="20" font-weight="600" stroke="none" fill="#000">After choosing a color (icon unchanged)</text>
|
||||
<g transform="translate(48,268)">
|
||||
<rect width="40" height="32" rx="8" fill="#fff" stroke="#000" />
|
||||
<path d="M10 12 l9 0 l3 -4 l8 0 l0 16 l-20 0 z" fill="#fff" stroke="#000" />
|
||||
</g>
|
||||
<g transform="translate(104,268)">
|
||||
<rect width="40" height="32" rx="8" fill="#e6e6e6" stroke="#000" />
|
||||
<path d="M10 12 l9 0 l3 -4 l8 0 l0 16 l-20 0 z" fill="#fff" stroke="#000" />
|
||||
</g>
|
||||
<g transform="translate(160,268)">
|
||||
<rect width="40" height="32" rx="8" fill="#666" stroke="#000" />
|
||||
<path d="M10 12 l9 0 l3 -4 l8 0 l0 16 l-20 0 z" fill="#fff" stroke="#fff" />
|
||||
</g>
|
||||
<text x="216" y="290" font-size="12" stroke="none" fill="#666">(swatch fills shown as grays — monochrome wireframe; real palette is color)</text>
|
||||
|
||||
<!-- picker popover (color only) -->
|
||||
<text x="48" y="356" font-size="20" font-weight="600" stroke="none" fill="#000">Color picker popover</text>
|
||||
<g transform="translate(48,376)">
|
||||
<rect width="320" height="232" rx="8" fill="#fff" stroke="#000" />
|
||||
<text x="20" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">Project color</text>
|
||||
<line x1="0" y1="56" x2="320" y2="56" stroke="#666" />
|
||||
|
||||
<!-- preview tile -->
|
||||
<text x="20" y="84" font-size="12" stroke="none" fill="#666">Preview</text>
|
||||
<g transform="translate(20,92)">
|
||||
<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="72" y="113" font-size="12" stroke="none" fill="#666">folder icon is fixed</text>
|
||||
|
||||
<!-- color swatches grid -->
|
||||
<text x="20" y="156" font-size="12" stroke="none" fill="#666">Color</text>
|
||||
<rect x="20" y="166" width="28" height="28" rx="6" fill="#e6e6e6" stroke="#000" />
|
||||
<rect x="56" y="166" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="92" y="166" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="128" y="166" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="164" y="166" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="200" y="166" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="236" y="166" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
<rect x="272" y="166" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
|
||||
|
||||
<!-- footer -->
|
||||
<g transform="translate(20,200)"><rect width="120" height="0" /></g>
|
||||
<line x1="0" y1="200" x2="320" y2="200" stroke="#666" />
|
||||
</g>
|
||||
<!-- footer actions placed below popover for clarity -->
|
||||
<g transform="translate(48,624)"><rect width="128" height="32" rx="4" fill="#fff" stroke="#666" /><text x="64" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">Reset to gray</text></g>
|
||||
<g transform="translate(288,624)"><rect width="80" height="32" rx="4" fill="#000" /><text x="40" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#fff">Save</text></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="416" font-size="14" stroke="none" fill="#d33">— Phase 1: color only. The icon grid (custom icons) is deferred; every tile shows a folder.</text>
|
||||
<text x="448" y="440" font-size="14" stroke="none" fill="#d33">— Persisting color already exists (project.color). No new field needed for this phase.</text>
|
||||
<text x="448" y="464" font-size="14" stroke="none" fill="#d33">— Tiles appear in the Projects list rows and the project detail header (the old sidebar</text>
|
||||
<text x="448" y="484" font-size="14" stroke="none" fill="#d33"> per-project list is removed), so the color control lives on the project itself.</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.0 KiB |