Samplers: heading and description inside the composer card, plain expanders

Review feedback: the card-style expanders are out, and the chat box
header and description should live inside the card.

The advisor composer now carries its own heading and lede above the
textarea in every direction (each rescaling its display type for the
in-card context), so Zone 1 reads as one self-contained card. The
ambient sections lost their card chrome everywhere - plain ruled
expander rows with transparent background, a single hairline top
rule, no radius - including the app's details-as-cards idiom in the
Current sampler.

mocks/README.md

@@ -30,17 +30,19 @@ so the samplers stay standalone while rendering crisp at 8rem.
 
 ## Content model (per the approved hierarchy)
 
-- Zone 1 (top): the advisor entry box ONLY — a believable composer
-  with model/snapshot hint and Start chat; the front page never shows
-  chat transcripts themselves (review decision). A single quiet link
-  to the chats list.
+- Zone 1 (top): the advisor entry box ONLY — heading and description
+  sit INSIDE the composer card, above the textarea; model/snapshot
+  hint and Start chat below. The front page never shows chat
+  transcripts themselves (review decision). A single quiet link to
+  the chats list.
 - Zone 2 (one small scroll below): "Needs a human" items tiered ABOVE
   queue health — a completion awaiting review, a turn-cap parked task
   to wake, an open question; then running / stuck / queued counts and
   saddle states.
 - Zone 3 (ambient, reduced density): notes, latest discoveries,
   active tasks table and activity timeline — ALL sections start
-  collapsed (`<details>` without `open`).
+  collapsed, rendered as plain ruled expander rows with NO card
+  chrome (no background, no border box, no radius).
 
 Sample data uses the real app's vocabulary: statuses
 draft / queued / assigned / working / blocked / review_requested /
@@ -139,12 +141,13 @@ full-grid bordered tables. Only the LAYOUT is quieted:
 
 - one column at the app's real 64rem (no second sidebar column),
 - "Needs a human" as three rows inside ONE card instead of a card
-  per item (the `.cards` grid stays for comparison on the queue-health
-  side),
-- section headings reduced to a single small card heading each — no
+  per item,
+- section headings reduced to a single small heading each — no
   stacked h2 + h3 pairs, no explanatory paragraphs between sections,
-- the advisor hero is a plain card matching `home.html`'s, minus the
-  secondary notices.
+- ambient sections are plain ruled expanders (the app's
+  details-as-cards chrome removed per review),
+- the advisor hero is a single card carrying its own heading and
+  description, matching `home.html`'s token recipe.
 
 Component styles verified identical to the live `app.css` via
 computed-style comparison (radius, shadow, paddings, colours, fonts).

mocks/dashboard-control.html

@@ -109,16 +109,15 @@ main { max-width: 70rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
 .sampler-note a { color: var(--dim); }
 
 /* ---- ZONE 1 ---- */
-.zone-advisor h1 {
-    margin: 0 0 0.3rem; font-size: 1.0625rem; font-weight: 700;
-    letter-spacing: 0.02em; text-transform: uppercase;
-}
-.lede { margin: 0 0 1rem; color: var(--dim); max-width: 46rem; font-size: 0.9375rem; }
-
 .composer {
     border: 1px solid var(--rule-hi); border-radius: var(--radius);
-    background: var(--surface); padding: 0.6rem;
+    background: var(--surface); padding: 0.75rem 0.9rem;
+}
+.composer h1 {
+    margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700;
+    letter-spacing: 0.02em; text-transform: uppercase;
 }
+.composer .lede { margin: 0 0 0.7rem; color: var(--dim); font-size: 0.875rem; }
 .composer:focus-within { border-color: var(--info); }
 .composer textarea {
     display: block; width: 100%; border: none; resize: vertical;
@@ -235,9 +234,10 @@ main { max-width: 70rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
 
 /* ---- ZONE 3 ---- */
 .zone-ambient { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-hi); }
-.panel { margin-bottom: 1.1rem; }
+.panel { margin: 0; padding: 0; border: none; background: none; border-top: 1px solid var(--rule); }
 .panel > summary {
     cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.5rem;
+    padding: 0.5rem 0;
 }
 .panel > summary::-webkit-details-marker { display: none; }
 .panel > summary::after { content: "+"; color: var(--faint); font-family: var(--mono); }
@@ -356,10 +356,10 @@ main { max-width: 70rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
 
     <!-- ZONE 1: the advisor conversation composer, first and loudest -->
     <section class="zone-advisor" aria-labelledby="advisor-h">
-        <h1 id="advisor-h">Ask the advisor</h1>
-        <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
-            you questions and suggests work. It never runs commands.</p>
         <form class="composer" onsubmit="return false">
+            <h1 id="advisor-h">Ask the advisor</h1>
+            <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
+                you questions and suggests work. It never runs commands.</p>
             <textarea rows="3" placeholder="What should the fleet work on next?"></textarea>
             <div class="composer-bar">
                 <p class="hint">claude-sonnet &middot; last fleet snapshot 14:02</p>

mocks/dashboard-current.html

@@ -114,14 +114,12 @@ main { padding: var(--grid-2) 0 var(--grid-4); }
 .sampler-note a { color: var(--ink-muted); }
 
 /* ---- ZONE 1: the advisor card, exactly like home.html's hero ---- */
-.zone-advisor h1 {
-    font-size: 1.05rem; margin: 0 0 var(--grid-1); font-weight: 650;
-}
-.lede { margin: 0 0 var(--grid-2); color: var(--ink-muted); max-width: 46rem; }
 .composer {
     background: var(--surface); border: 1px solid var(--line);
     border-radius: var(--radius); padding: var(--grid-2);
 }
+.composer h1 { font-size: 1.05rem; margin: 0 0 var(--grid-1); font-weight: 650; }
+.composer .lede { margin: 0 0 var(--grid-2); color: var(--ink-muted); max-width: 46rem; }
 .composer:focus-within { border-color: var(--accent); }
 .composer textarea {
     display: block; width: 100%; border: 1px solid var(--line);
@@ -213,15 +211,16 @@ main { padding: var(--grid-2) 0 var(--grid-4); }
 /* ---- ZONE 3: today's details-as-cards idiom ---- */
 .zone-ambient { margin-top: var(--grid-2); }
 .panel {
-    background: var(--surface); border: 1px solid var(--line);
-    border-radius: var(--radius);
-    margin: var(--grid-2) 0; padding: var(--grid-1) var(--grid-2);
+    background: none; border: none; border-radius: 0;
+    border-top: 1px solid var(--line-soft);
+    margin: 0; padding: 0;
 }
 .panel > summary {
     cursor: pointer; font-weight: 600; list-style: none;
     display: flex; align-items: baseline; gap: 0.5rem;
     padding: var(--grid-1) 0;
 }
+.panel > summary h2 { font-weight: 650; }
 .panel > summary::-webkit-details-marker { display: none; }
 .panel > summary::after { content: "▾"; color: var(--ink-muted); font-weight: 400; font-size: 0.8em; }
 .panel[open] > summary::after { transform: rotate(180deg); }
@@ -328,10 +327,10 @@ main { padding: var(--grid-2) 0 var(--grid-4); }
 
     <!-- ZONE 1: the advisor conversation composer, first and loudest -->
     <section class="zone-advisor" aria-labelledby="advisor-h">
-        <h1 id="advisor-h">Ask the advisor</h1>
-        <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
-            you questions and suggests work. It never runs commands.</p>
         <form class="composer" onsubmit="return false">
+            <h1 id="advisor-h">Ask the advisor</h1>
+            <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
+                you questions and suggests work. It never runs commands.</p>
             <textarea rows="3" placeholder="What should the fleet work on next?"></textarea>
             <div class="composer-bar">
                 <p class="hint">claude-sonnet &middot; last fleet snapshot 14:02</p>

mocks/dashboard-primer.html

@@ -107,16 +107,14 @@ a:hover { text-decoration: underline; }
 main { max-width: 66rem; margin: 0 auto 3rem; padding: 0 1rem; }
 
 /* ---- ZONE 1: advisor, first and loudest ---- */
-.zone-advisor h1 {
-    margin: 0.2rem 0 0.35rem; font-size: 1.5rem; letter-spacing: -0.02em;
-}
-.lede { margin: 0 0 1rem; color: var(--ink-muted); max-width: 46rem; }
-
 .composer {
     background: var(--surface); border: 1px solid var(--line);
-    border-radius: var(--radius); padding: 0.75rem;
+    border-radius: var(--radius); padding: 0.9rem 1rem;
+}
+.composer h1 {
+    margin: 0 0 0.2rem; font-size: 1.35rem; letter-spacing: -0.02em;
 }
-.composer:focus-within { border-color: var(--accent); }
+.composer .lede { margin: 0 0 0.7rem; font-size: 0.9rem; }
 .composer textarea {
     display: block; width: 100%; border: none; resize: vertical;
     background: transparent; color: var(--ink);
@@ -246,11 +244,12 @@ main { max-width: 66rem; margin: 0 auto 3rem; padding: 0 1rem; }
 .state.idle { background: var(--ink-faint); }
 .state.offline { background: transparent; border: 1px solid var(--ink-faint); }
 
-/* ---- ZONE 3: ambient ---- */
+/* ---- ZONE 3: ambient (plain expanders, no card chrome) ---- */
 .zone-ambient { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
-.panel { margin-bottom: 1.1rem; }
+.panel { margin: 0; padding: 0; border: none; background: none; border-top: 1px solid var(--line-soft); }
 .panel > summary {
     cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.5rem;
+    padding: 0.55rem 0;
 }
 .panel > summary::-webkit-details-marker { display: none; }
 .panel > summary::after { content: "+"; color: var(--ink-faint); font-weight: 400; }
@@ -367,10 +366,10 @@ main { max-width: 66rem; margin: 0 auto 3rem; padding: 0 1rem; }
 
     <!-- ZONE 1: the advisor conversation composer, first and loudest -->
     <section class="zone-advisor" aria-labelledby="advisor-h">
-        <h1 id="advisor-h">Ask the advisor</h1>
-        <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
-            you questions and suggests work. It never runs commands.</p>
         <form class="composer" onsubmit="return false">
+            <h1 id="advisor-h">Ask the advisor</h1>
+            <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
+                you questions and suggests work. It never runs commands.</p>
             <textarea rows="3" placeholder="What should the fleet work on next?"></textarea>
             <div class="composer-bar">
                 <p class="hint">claude-sonnet &middot; last fleet snapshot 14:02</p>

mocks/dashboard-swiss.html

@@ -105,13 +105,12 @@ main {
 .zone-advisor, .zone-status, .zone-ambient { grid-column: 2; padding: 0 var(--gutter); }
 .zone-advisor { padding-top: 1.5rem; }
 
-.zone-advisor h1 {
-    margin: 0 0 0.5rem; font-size: 2rem; line-height: 1.1; font-weight: 700;
+.composer { border: 2px solid var(--rule); }
+.composer h1 {
+    margin: 0 0 0.4rem; font-size: 1.75rem; line-height: 1.1; font-weight: 700;
     letter-spacing: -0.02em; max-width: 34rem;
 }
-.lede { margin: 0 0 1.25rem; color: var(--grey-1); max-width: 42rem; }
-
-.composer { border: 2px solid var(--rule); }
+.composer .lede { margin: 0 0 0.9rem; color: var(--grey-1); max-width: 42rem; }
 .composer:focus-within { border-color: var(--red); }
 .composer textarea {
     display: block; width: 100%; border: none; resize: vertical;
@@ -350,10 +349,10 @@ main {
 
     <!-- ZONE 1: the advisor conversation composer, first and loudest -->
     <section class="zone-advisor" aria-labelledby="advisor-h">
-        <h1 id="advisor-h">Ask the advisor</h1>
-        <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
-            you questions and suggests work. It never runs commands.</p>
         <form class="composer" onsubmit="return false">
+            <h1 id="advisor-h">Ask the advisor</h1>
+            <p class="lede">Reads your projects, tasks, goals, rules and discoveries &mdash; asks
+                you questions and suggests work. It never runs commands.</p>
             <textarea rows="3" placeholder="What should the fleet work on next?"></textarea>
             <div class="composer-bar">
                 <p class="hint">claude-sonnet &middot; last fleet snapshot 14:02</p>