From b217fa2951df1758c35b5bb729f9c6f5b9f16424 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 01:32:50 -0800
Subject: [PATCH 1/2] feat(v2): disclosure row primitive lifted from d215
 details.disc (TASK-730)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-authored-by: wisp <WyJ3aXNwIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-sonnet-5-5/default
---
 frontend/src/v2/__tests__/v2Primitives.test.tsx |  8 ++++++++
 frontend/src/v2/primitives/V2PrimitivesPage.tsx | 12 ++++++++++++
 frontend/src/v2/primitives/primitives.css       |  9 +++++++++
 3 files changed, 29 insertions(+)

diff --git a/frontend/src/v2/__tests__/v2Primitives.test.tsx b/frontend/src/v2/__tests__/v2Primitives.test.tsx
index 92a4bda88..5ea07c54c 100644
--- a/frontend/src/v2/__tests__/v2Primitives.test.tsx
+++ b/frontend/src/v2/__tests__/v2Primitives.test.tsx
@@ -58,4 +58,12 @@ describe('D223 primitives', () => {
     render(<V2PrimitivesPage />);
     expect(screen.getByLabelText('Primitives')).toHaveClass('v2p-pane--scroll');
   });
+
+  test('the disclosure row has its summary grid, chevron turn and 390 rule', () => {
+    expect(css).toContain('details.v2p-disc > summary {');
+    expect(css).toContain('details.v2p-disc[open] > summary .chev { transform: rotate(180deg); }');
+    expect(css).toMatch(/@media \(max-width: 480px\)[\s\S]*details\.v2p-disc > summary \{ grid-template-columns: minmax\(0, 1fr\) auto auto;/);
+    const { container } = render(<V2PrimitivesPage />);
+    expect(container.querySelector('details.v2p-disc')).not.toBeNull();
+  });
 });
diff --git a/frontend/src/v2/primitives/V2PrimitivesPage.tsx b/frontend/src/v2/primitives/V2PrimitivesPage.tsx
index 12f717e0c..311578a4a 100644
--- a/frontend/src/v2/primitives/V2PrimitivesPage.tsx
+++ b/frontend/src/v2/primitives/V2PrimitivesPage.tsx
@@ -37,6 +37,18 @@ const V2PrimitivesPage: React.FC = () => (
             </div>
           </div>
 
+          <div className="v2p-gtitle">disclosure row</div>
+          <div className="v2p-list">
+            <details className="v2p-disc">
+              <summary>
+                <span className="lb">How it runs</span>
+                <span className="vl">CLI · webhook</span>
+                <span className="chev" aria-hidden="true">⌄</span>
+              </summary>
+              <div className="v2p-body">Detail sits behind the row and is closed by default.</div>
+            </details>
+          </div>
+
           <div className="v2p-gtitle">chips, badges, dots</div>
           <div className="v2p-list">
             <div className="v2p-lrow">
diff --git a/frontend/src/v2/primitives/primitives.css b/frontend/src/v2/primitives/primitives.css
index 20b6ed072..ff1c95f56 100644
--- a/frontend/src/v2/primitives/primitives.css
+++ b/frontend/src/v2/primitives/primitives.css
@@ -192,6 +192,14 @@
   border-top: 1px solid var(--v2-border-soft);
 }
 .v2p-lrow:first-child { border-top: 0; }
+/* Disclosure row, lifted from d215 (details.disc, lines 322-326 and the 390 rule at 504). */
+details.v2p-disc { border-top: 1px solid var(--v2-border-soft); }
+details.v2p-disc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 8px 14px 8px 16px; }
+details.v2p-disc > summary::-webkit-details-marker { display: none; }
+details.v2p-disc > summary .chev { color: var(--v2-text-placeholder); transition: transform 160ms; }
+details.v2p-disc[open] > summary .chev { transform: rotate(180deg); }
+details.v2p-disc > summary .lb { font-size: 13px; font-weight: 600; color: var(--v2-text-primary); display: flex; align-items: center; gap: 8px; }
+details.v2p-disc > summary .vl { font-size: 13.5px; color: var(--v2-ink-2); min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .v2p-lrow .lb { font-size: 13px; font-weight: 600; color: var(--v2-text-primary); display: flex; align-items: center; gap: 8px; }
 .v2p-lrow .vl { font-size: 13.5px; color: var(--v2-ink-2); min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .v2p-lrow .vl .mo { font-size: 12px; color: var(--v2-text-muted); }
@@ -340,6 +348,7 @@
   .v2p-ph h1 { font-size: 20px; white-space: normal; }
   .v2p-body { padding: 16px 14px; }
   .v2p-lrow { grid-template-columns: minmax(0, 1fr); min-height: 48px; padding: 8px 12px; }
+  details.v2p-disc > summary { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 48px; padding: 8px 12px; }
   .v2p-drawer:not(.v2p-drawer--inline) { width: 100%; border-radius: 0; }
   .v2p-cols { grid-template-columns: minmax(0, 1fr); }
   .v2p-tile { height: 104px; }

From 5ac14cf047f894eae08b99149a11a4d8d39a08b1 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 01:38:14 -0800
Subject: [PATCH 2/2] fix(v2): disclosure chevron is the d215 SVG icon, not a
 text glyph (TASK-730)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-authored-by: wisp <WyJ3aXNwIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-sonnet-5-5/default
---
 frontend/src/v2/__tests__/v2Primitives.test.tsx | 1 +
 frontend/src/v2/primitives/V2PrimitivesPage.tsx | 2 +-
 frontend/src/v2/primitives/primitives.css       | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/v2/__tests__/v2Primitives.test.tsx b/frontend/src/v2/__tests__/v2Primitives.test.tsx
index 5ea07c54c..4486259e7 100644
--- a/frontend/src/v2/__tests__/v2Primitives.test.tsx
+++ b/frontend/src/v2/__tests__/v2Primitives.test.tsx
@@ -65,5 +65,6 @@ describe('D223 primitives', () => {
     expect(css).toMatch(/@media \(max-width: 480px\)[\s\S]*details\.v2p-disc > summary \{ grid-template-columns: minmax\(0, 1fr\) auto auto;/);
     const { container } = render(<V2PrimitivesPage />);
     expect(container.querySelector('details.v2p-disc')).not.toBeNull();
+    expect(container.querySelector('details.v2p-disc svg.chev path')?.getAttribute('d')).toBe('m6 9 6 6 6-6');
   });
 });
diff --git a/frontend/src/v2/primitives/V2PrimitivesPage.tsx b/frontend/src/v2/primitives/V2PrimitivesPage.tsx
index 311578a4a..58305b742 100644
--- a/frontend/src/v2/primitives/V2PrimitivesPage.tsx
+++ b/frontend/src/v2/primitives/V2PrimitivesPage.tsx
@@ -43,7 +43,7 @@ const V2PrimitivesPage: React.FC = () => (
               <summary>
                 <span className="lb">How it runs</span>
                 <span className="vl">CLI · webhook</span>
-                <span className="chev" aria-hidden="true">⌄</span>
+                <svg className="chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
               </summary>
               <div className="v2p-body">Detail sits behind the row and is closed by default.</div>
             </details>
diff --git a/frontend/src/v2/primitives/primitives.css b/frontend/src/v2/primitives/primitives.css
index ff1c95f56..4f8c63d70 100644
--- a/frontend/src/v2/primitives/primitives.css
+++ b/frontend/src/v2/primitives/primitives.css
@@ -196,7 +196,7 @@
 details.v2p-disc { border-top: 1px solid var(--v2-border-soft); }
 details.v2p-disc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 8px 14px 8px 16px; }
 details.v2p-disc > summary::-webkit-details-marker { display: none; }
-details.v2p-disc > summary .chev { color: var(--v2-text-placeholder); transition: transform 160ms; }
+details.v2p-disc > summary .chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--v2-text-placeholder); transition: transform 160ms; }
 details.v2p-disc[open] > summary .chev { transform: rotate(180deg); }
 details.v2p-disc > summary .lb { font-size: 13px; font-weight: 600; color: var(--v2-text-primary); display: flex; align-items: center; gap: 8px; }
 details.v2p-disc > summary .vl { font-size: 13.5px; color: var(--v2-ink-2); min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }