PAP-53: revise IA wireframes per board feedback (v2)

Apply board direction: locked nav order (Tasks/Routines/Goals/ Workspaces/Artifacts/Projects), Issues->Tasks global rename, remove the per-project sidebar PROJECTS section, project tiles color-only with a fixed folder icon. Plan doc + viewer updated. Planning only. Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-10-24 10:13:11 +02:00 · 2026-06-05 15:12:56 -07:00
1 parent e155af665e
commit 55cd725bf5
@@ -111,8 +111,8 @@
        <a href="#s3"><span class="num">3</span>Agents list view</a>
        <a href="#s4"><span class="num">4</span>Agents section states</a>
        <a href="#s5"><span class="num">5</span>Project tile customize</a>
-        <h2>Open questions</h2>
-        <a href="#open"><span class="num">?</span>For reviewer</a>
+        <h2>Resolved decisions</h2>
+        <a href="#open"><span class="num">✓</span>Board answers</a>
      </nav>
    </details>

@@ -122,6 +122,7 @@
        <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>
@@ -132,15 +133,18 @@
      <section id="summary" class="full">
        <div class="lede">Overview</div>
        <h2>What this set covers</h2>
-        <p class="desc">Six discrete changes to the main app's information architecture, all sketched below.</p>
+        <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>Conference room</b> — new placeholder nav item above "New task", chat-bubble icon (screen 1).</li>
-            <li><b>New Issue → New task</b> — renamed; label uses the standard nav text color, not the muted treatment it has today (screen 1).</li>
-            <li><b>Artifacts</b> — new item in the Work section (screen 1).</li>
-            <li><b>Projects as a Work nav item</b> — opens an all-projects list view: per-row overview, task count, budget; row click opens today's project detail (screens 1 & 2).</li>
-            <li><b>Project tiles</b> — colored squircle becomes a neutral gray rounded rectangle with a folder icon; color + icon are user-customizable (screens 1 & 5).</li>
-            <li><b>Agents section</b> — show active agents only when any are running; otherwise show up to 5 recently-active with "See all" → agents list view with per-row key actions (screens 3 & 4).</li>
+            <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 &amp; 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 &amp; 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 &amp; 4).</li>
          </ul>
        </div>
      </section>
@@ -163,14 +167,15 @@
            <div class="notes">
              <h3>Annotations</h3>
              <ul>
-                <li><b>1</b> — Conference room: new item above New task, chat-bubble icon.</li>
-                <li><b>2</b> — New Issue → New task; standard nav label color.</li>
-                <li><b>3</b> — Projects: new Work nav item, opens the list view.</li>
+                <li><b>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> — Project tiles: gray rounded rectangle + folder icon.</li>
-                <li><b>6</b> — Agents section adapts to active/recent (screen 4).</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> Promotes the two highest-traffic destinations (Projects, a future Conference room) into stable nav, and makes the Work section the single home for cross-cutting views (Issues, Projects, Artifacts). On mobile the sidebar is a full-height drawer; the bottom tab bar is unchanged.</div>
+              <div 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>
@@ -202,7 +207,7 @@
                <li><b>2</b> — Overview = project description, one line, truncated.</li>
                <li><b>3</b> — Task count + budget + status per row.</li>
              </ul>
-              <div class="why"><b>Why this changes:</b> Gives projects a real index page instead of only the sidebar list. On mobile each row reflows to a card with the metrics on a second line. Note: task count and budget are not on the Project type today — they need wiring (see open questions).</div>
+              <div 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>
@@ -258,28 +263,29 @@
      <section id="s5" class="full">
        <div class="lede">Screen 5 · Projects (detail)</div>
        <h2><span class="step-num">5.</span>Project tile — customize icon &amp; color</h2>
-        <p class="desc">Default neutral tile and the picker opened by clicking it. Desktop-only overlay.</p>
-        <div class="wire" data-zoom data-caption="05 · Project tile customize">
+        <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 customize wireframe" />
+          <img src="wireframes/05-project-customize.svg" alt="Project tile color wireframe" />
        </div>
        <div class="notes">
-          <div class="why"><b>Why this changes:</b> Default tiles are neutral so the sidebar reads calmly; users opt into color/icon only where it helps them scan. The same tile + picker is reused in the sidebar PROJECTS section and the Projects list rows. <code>project.color</code> already exists; an icon field is new.</div>
+          <div 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">For reviewer</div>
-        <h2>Open questions</h2>
+        <div class="lede">Board answers</div>
+        <h2>Resolved decisions</h2>
        <div class="notes">
          <ul>
-            <li><b>Terminology</b> — The issue calls items "tasks (formerly issues)". Do you want the <i>Issues</i> nav item / page renamed to <i>Tasks</i> globally, or only the "New task" button + the "Tasks" count on project rows for now?</li>
-            <li><b>Conference room</b> — Placeholder only: it appears in nav but routes to an empty page for now. Confirm that's the intended scope.</li>
-            <li><b>Projects: dual presence</b> — Keep both the new "Projects" Work nav item (→ list view) <i>and</i> the existing collapsible PROJECTS section (individual projects)? The wireframes assume yes.</li>
-            <li><b>Row data</b> — Task count and budget aren't on the Project type today. OK to add a lightweight count/budget lookup for the list rows (slightly more backend work)?</li>
-            <li><b>Project icon</b> — Customizable icon needs a new <code>project.icon</code> field + picker. Confirm we should build icon customization now vs. color-only first.</li>
-            <li><b>Ordering within Work</b> — Proposed order: Issues, Projects, Artifacts, Routines, Goals. Adjust freely.</li>
+            <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>

@@ -15,54 +15,49 @@
    <text x="48" y="97" font-size="14" stroke="none" fill="#000">Conference room</text>
  </g>
  <rect x="16" y="124" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="138" font-size="14" stroke="none" fill="#000">New task</text>
-  <rect x="16" y="164" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="178" font-size="14" stroke="none" fill="#666">Dashboard</text>
-  <rect x="16" y="204" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="218" font-size="14" stroke="none" fill="#666">Inbox</text>
+  <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="258" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">WORK</text>
-  <rect x="16" y="272" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="286" font-size="14" stroke="none" fill="#666">Issues</text>
-  <rect x="16" y="312" width="18" height="15" rx="2" fill="#fff" stroke="#000" />
-  <path d="M16 315 l6 0 l2 -3 l4 0" fill="none" stroke="#000" />
-  <text x="48" y="326" font-size="14" stroke="none" fill="#000">Projects</text>
-  <rect x="16" y="352" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="366" font-size="14" stroke="none" fill="#000">Artifacts</text>
-  <rect x="16" y="392" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="406" font-size="14" stroke="none" fill="#666">Routines</text>
-  <rect x="16" y="432" width="18" height="18" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="446" font-size="14" stroke="none" fill="#666">Goals</text>
-
-  <!-- PROJECTS -->
-  <text x="16" y="486" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">PROJECTS</text>
-  <g>
-    <rect x="16" y="500" width="22" height="18" rx="5" fill="#e6e6e6" stroke="#666" />
-    <path d="M21 506 l5 0 l1.5 -2 l5 0 l0 10 l-11.5 0 z" fill="#fff" stroke="#666" />
-    <text x="48" y="514" font-size="14" stroke="none" fill="#666">Onboarding v3</text>
-  </g>
-  <g>
-    <rect x="16" y="540" width="22" height="18" rx="5" fill="#e6e6e6" stroke="#666" />
-    <path d="M21 546 l5 0 l1.5 -2 l5 0 l0 10 l-11.5 0 z" fill="#fff" stroke="#666" />
-    <text x="48" y="554" font-size="14" stroke="none" fill="#666">NUX hardening</text>
-  </g>
+  <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="594" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
-  <circle cx="25" cy="614" r="9" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="619" font-size="14" stroke="none" fill="#666">ClaudeCoder</text>
-  <circle cx="300" cy="614" r="3" fill="#000" stroke="none" />
-  <text x="312" y="618" font-size="12" stroke="none" fill="#666">2 live</text>
-  <circle cx="25" cy="650" r="9" fill="#e6e6e6" stroke="#666" />
-  <text x="48" y="655" font-size="14" stroke="none" fill="#666">QA-Bot</text>
-  <circle cx="300" cy="650" r="3" fill="#000" stroke="none" />
-  <text x="312" y="654" font-size="12" stroke="none" fill="#666">1 live</text>
+  <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">Issues</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>
@@ -71,7 +66,7 @@
  <g data-region="annotations">
    <rect x="8" y="72" width="359" height="40" fill="none" stroke="#d33" stroke-dasharray="6 3" />
    <g transform="translate(355,92)"><circle r="10" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text></g>
-    <rect x="8" y="500" width="359" height="58" fill="none" stroke="#d33" stroke-dasharray="6 3" />
-    <g transform="translate(355,528)"><circle r="10" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">5</text></g>
+    <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>
@@ -11,20 +11,19 @@
  <circle cx="249" cy="21" r="4" fill="none" stroke="#666" />
  <line x1="252" y1="24" x2="256" y2="28" stroke="#666" />

-  <!-- ===== Top nav cluster ===== -->
+  <!-- ===== 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" />
-    <!-- chat bubble glyph -->
    <rect x="16" y="62" width="18" height="13" rx="3" fill="none" stroke="#000" />
    <polygon points="20,75 20,81 26,75" fill="#000" stroke="none" />
    <text x="44" y="77" font-size="14" stroke="none" fill="#000">Conference room</text>
  </g>
-  <!-- New task (renamed from New Issue) -->
+  <!-- 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>
+    <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" />
@@ -34,85 +33,76 @@
  <text x="44" y="173" font-size="14" stroke="none" fill="#666">Inbox</text>

  <!-- ===== WORK section ===== -->
-  <text x="16" y="210" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">WORK</text>
-  <!-- Issues -->
-  <rect x="16" y="222" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="44" y="237" font-size="14" stroke="none" fill="#666">Issues</text>
-  <!-- Projects (NEW nav item) — shown active/selected -->
-  <rect x="8" y="250" width="264" height="32" fill="#e6e6e6" stroke="none" />
-  <rect x="16" y="256" width="16" height="13" rx="2" fill="#fff" stroke="#000" />
-  <path d="M16 259 l5 0 l2 -3 l4 0" fill="none" stroke="#000" />
-  <text x="44" y="269" font-size="14" stroke="none" fill="#000">Projects</text>
-  <!-- Artifacts (NEW) -->
-  <rect x="16" y="290" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="44" y="305" font-size="14" stroke="none" fill="#000">Artifacts</text>
+  <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="322" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="44" y="337" font-size="14" stroke="none" fill="#666">Routines</text>
+  <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="354" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="44" y="369" font-size="14" stroke="none" fill="#666">Goals</text>
-
-  <!-- ===== PROJECTS section ===== -->
-  <text x="16" y="406" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">PROJECTS</text>
-  <text x="248" y="406" font-size="14" stroke="none" fill="#666">+</text>
-  <!-- Project rows: rounded-rectangle gray tile + folder glyph -->
-  <g>
-    <rect x="16" y="418" width="18" height="16" rx="4" fill="#e6e6e6" stroke="#666" />
-    <path d="M20 423 l4 0 l1.5 -2 l4 0 l0 9 l-9.5 0 z" fill="#fff" stroke="#666" />
-    <text x="44" y="431" font-size="14" stroke="none" fill="#666">Onboarding v3</text>
-  </g>
-  <g>
-    <rect x="16" y="450" width="18" height="16" rx="4" fill="#e6e6e6" stroke="#666" />
-    <path d="M20 455 l4 0 l1.5 -2 l4 0 l0 9 l-9.5 0 z" fill="#fff" stroke="#666" />
-    <text x="44" y="463" font-size="14" stroke="none" fill="#666">NUX hardening</text>
-  </g>
-  <g>
-    <rect x="16" y="482" width="18" height="16" rx="4" fill="#e6e6e6" stroke="#666" />
-    <path d="M20 487 l4 0 l1.5 -2 l4 0 l0 9 l-9.5 0 z" fill="#fff" stroke="#666" />
-    <text x="44" y="495" font-size="14" stroke="none" fill="#666">Billing rework</text>
-  </g>
+  <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="534" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">AGENTS</text>
-  <text x="248" y="534" font-size="14" stroke="none" fill="#666">+</text>
-  <!-- active agent rows with live dot + "N live" -->
+  <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="554" r="8" fill="#e6e6e6" stroke="#666" />
-    <text x="44" y="559" font-size="14" stroke="none" fill="#666">ClaudeCoder</text>
-    <circle cx="214" cy="554" r="3" fill="#000" stroke="none" />
-    <text x="224" y="558" font-size="12" stroke="none" fill="#666">2 live</text>
+    <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="586" r="8" fill="#e6e6e6" stroke="#666" />
-    <text x="44" y="591" font-size="14" stroke="none" fill="#666">QA-Bot</text>
-    <circle cx="214" cy="586" r="3" fill="#000" stroke="none" />
-    <text x="224" y="590" font-size="12" stroke="none" fill="#666">1 live</text>
+    <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="634" font-size="12" font-weight="600" letter-spacing="1" stroke="none" fill="#666">COMPANY</text>
-  <rect x="16" y="646" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="44" y="661" font-size="14" stroke="none" fill="#666">Org</text>
-  <rect x="16" y="678" width="16" height="16" rx="3" fill="#e6e6e6" stroke="#666" />
-  <text x="44" y="693" font-size="14" stroke="none" fill="#666">Settings</text>
+  <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 (faded, context only) ============ -->
+  <!-- ============ 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. the Projects list view)</text>
+  <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="640" height="232" rx="6" fill="#fff" stroke="#666" />
-    <text x="20" y="32" font-size="14" font-weight="600" stroke="none" fill="#000">What changed in the left nav</text>
-    <text x="20" y="64" font-size="14" stroke="none" fill="#000">1  Conference room — NEW item above New task, chat-bubble icon</text>
-    <text x="20" y="92" font-size="14" stroke="none" fill="#000">2  New Issue  →  New task; label uses the standard nav color</text>
-    <text x="20" y="120" font-size="14" stroke="none" fill="#000">3  Projects — NEW Work nav item; opens the all-projects list view</text>
-    <text x="20" y="148" font-size="14" stroke="none" fill="#000">4  Artifacts — NEW item in the Work section</text>
-    <text x="20" y="176" font-size="14" stroke="none" fill="#000">5  Project tiles — gray rounded rectangle + folder icon (was a</text>
-    <text x="36" y="196" font-size="14" stroke="none" fill="#000">colored squircle); color + icon are user-customizable</text>
-    <text x="20" y="220" font-size="14" stroke="none" fill="#000">6  Agents — active agents only; recently-active fallback (see 04)</text>
+    <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) ============ -->
@@ -123,15 +113,15 @@
    <rect x="8" y="92" width="264" height="20" fill="none" stroke="#d33" stroke-dasharray="6 3" />
    <g transform="translate(286,104)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">2</text></g>

-    <g transform="translate(286,266)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">3</text></g>
+    <rect x="8" y="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="288" width="264" height="20" fill="none" stroke="#d33" stroke-dasharray="6 3" />
-    <g transform="translate(286,298)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">4</text></g>
+    <rect x="8" y="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>

-    <rect x="8" y="412" width="264" height="92" fill="none" stroke="#d33" stroke-dasharray="6 3" />
-    <g transform="translate(286,418)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">5</text></g>
+    <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="524" width="264" height="80" fill="none" stroke="#d33" stroke-dasharray="6 3" />
-    <g transform="translate(286,560)"><circle r="11" fill="#fff" stroke="#d33" stroke-dasharray="4 2" /><text y="4" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">6</text></g>
+    <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>
@@ -5,10 +5,10 @@
  <!-- sidebar stub for orientation -->
  <rect x="0" y="0" width="280" height="800" fill="#fff" stroke="#666" />
  <text x="16" y="30" font-size="14" font-weight="700" stroke="none" fill="#666">Paperclip App</text>
-  <rect x="8" y="120" width="264" height="32" fill="#e6e6e6" stroke="none" />
-  <text x="24" y="141" font-size="14" stroke="none" fill="#000">Projects</text>
-  <text x="24" y="93" font-size="14" stroke="none" fill="#999">Work</text>
-  <text x="24" y="189" font-size="14" stroke="none" fill="#999">Artifacts</text>
+  <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 -->
@@ -8,7 +8,7 @@
  <text x="16" y="120" font-size="12" letter-spacing="1" stroke="none" fill="#999">AGENTS</text>
  <text x="24" y="148" font-size="14" stroke="none" fill="#999">ClaudeCoder · 2 live</text>
  <text x="24" y="176" font-size="14" stroke="none" fill="#999">QA-Bot · 1 live</text>
-  <text x="24" y="204" font-size="14" stroke="none" fill="#000">See all →</text>
+  <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>
@@ -26,7 +26,7 @@
    <circle cx="244" cy="136" r="3" fill="#000" stroke="none" />
    <text x="256" y="140" font-size="12" stroke="none" fill="#666">1 live</text>
    <line x1="16" y1="172" x2="304" y2="172" stroke="#e6e6e6" />
-    <text x="16" y="198" font-size="14" stroke="none" fill="#000">See all →</text>
+    <text x="16" y="198" font-size="14" stroke="none" fill="#000">See all agents →</text>
  </g>

  <!-- ===== STATE B: no active agents ===== -->
@@ -54,7 +54,7 @@
    <text x="44" y="217" font-size="14" stroke="none" fill="#666">Researcher</text>
    <text x="244" y="216" font-size="12" stroke="none" fill="#666">1d ago</text>
    <line x1="16" y1="248" x2="304" y2="248" stroke="#e6e6e6" />
-    <text x="16" y="276" font-size="14" stroke="none" fill="#000">See all →</text>
+    <text x="16" y="276" font-size="14" stroke="none" fill="#000">See all agents →</text>
  </g>

  <!-- arrow: See all -> list view -->
@@ -2,77 +2,73 @@
     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
  <rect x="0" y="0" width="1280" height="800" />

-  <text x="48" y="48" font-size="28" font-weight="700" stroke="none" fill="#000">Project tile — customize icon &amp; color</text>
-  <text x="48" y="80" font-size="14" stroke="none" fill="#666">Default is a neutral gray rounded rectangle with a folder icon. Clicking the tile opens a picker.</text>
+  <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)</text>
+  <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 -->
-  <text x="48" y="248" font-size="20" font-weight="600" stroke="none" fill="#000">After customizing (color + icon)</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" />
-    <circle cx="20" cy="16" r="7" fill="none" 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="#fff" stroke="#000" />
-    <polygon points="20,7 24,15 16,15" fill="none" stroke="#000" />
+    <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="#fff" stroke="#000" />
-    <rect x="12" y="9" width="16" height="14" rx="2" fill="none" stroke="#000" />
+    <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 fill shown gray here — monochrome wireframe)</text>
+  <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 -->
-  <text x="048" y="356" font-size="20" font-weight="600" stroke="none" fill="#000">Picker popover</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="296" rx="8" fill="#fff" stroke="#000" />
-    <text x="20" y="36" font-size="14" font-weight="600" stroke="none" fill="#000">Customize project tile</text>
+    <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" />

-    <text x="20" y="84" font-size="12" stroke="none" fill="#666">Color</text>
-    <!-- color swatches grid -->
-    <rect x="20" y="96" width="28" height="28" rx="6" fill="#e6e6e6" stroke="#000" />
-    <rect x="56" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
-    <rect x="92" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
-    <rect x="128" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
-    <rect x="164" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
-    <rect x="200" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
-    <rect x="236" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
-    <rect x="272" y="96" width="28" height="28" rx="6" fill="#fff" stroke="#666" />
+    <!-- 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>

-    <text x="20" y="160" font-size="12" stroke="none" fill="#666">Icon</text>
-    <!-- icon grid -->
-    <rect x="20" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#000" />
-    <path d="M28 184 l6 0 l2 -3 l6 0 l0 12 l-14 0 z" fill="#fff" stroke="#000" />
-    <rect x="60" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
-    <circle cx="76" cy="188" r="7" fill="none" stroke="#666" />
-    <rect x="100" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
-    <polygon points="116,179 122,197 110,197" fill="none" stroke="#666" />
-    <rect x="140" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
-    <rect x="148" y="180" width="16" height="16" rx="2" fill="none" stroke="#666" />
-    <rect x="180" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
-    <line x1="188" y1="196" x2="196" y2="180" stroke="#666" />
-    <line x1="196" y1="196" x2="204" y2="180" stroke="#666" />
-    <rect x="220" y="172" width="32" height="32" rx="6" fill="#fff" stroke="#666" />
-    <text x="232" y="194" font-size="14" stroke="none" fill="#666">★</text>
+    <!-- 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 -->
-    <line x1="0" y1="232" x2="320" y2="232" stroke="#666" />
-    <g transform="translate(20,248)"><rect width="120" height="32" rx="4" fill="#fff" stroke="#666" /><text x="60" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#000">Reset to gray</text></g>
-    <g transform="translate(232,248)"><rect width="68" height="32" rx="4" fill="#000" /><text x="34" y="21" font-size="12" text-anchor="middle" stroke="none" fill="#fff">Save</text></g>
+    <g 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="420" font-size="14" stroke="none" fill="#d33">— Same tile + picker is reused in the sidebar PROJECTS section and the Projects list rows.</text>
-    <text x="448" y="444" font-size="14" stroke="none" fill="#d33">— Persisting color already exists (project.color). Icon needs a new project.icon field.</text>
+    <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>