@deskwork/studio 0.17.1 → 0.19.0

package/dist/pages/dashboard/section.js

@@ -1,15 +1,20 @@
 /**
  * Single-stage section renderer.
  *
- * Pipeline-redesign Task 34. Each of the eight stage sections renders
- * with a section heading (stage name + entry count) and either a list
- * of rows or an empty-state placeholder. Per-row HTML carries the
- * sidecar-derived state inline (iteration count + reviewState badge)
- * so an operator can see at a glance where each entry sits without
- * opening it.
+ * Each of the eight stage sections (plus the Distribution placeholder)
+ * renders with a section heading (stage name + entry count) and either
+ * a list of rows or an empty-state placeholder. Each row carries the
+ * entry's slug, title, updated-at timestamp, and stage-gated verb
+ * buttons. Per DESKWORK-STATE-MACHINE.md Commandment III, rows do NOT
+ * surface iteration counts or reviewState — those were retired in
+ * v0.19 along with the legacy reviewState concept.
+ *
+ * On mobile, each section is fronted by a collapsible tile (see
+ * `renderStageTile`); on desktop the tiles are display:none and the
+ * `<h2 class="er-section-head">` heading carries the stage name.
  */
 import { html, unsafe } from "../html.js";
-import { iterationForCurrentStage, renderReviewStateBadge, renderRowActions, } from "./affordances.js";
+import { renderRowActions } from "./affordances.js";
 const STAGE_ORNAMENTS = {
     Ideas: '◇',
     Planned: '§',
@@ -34,13 +39,16 @@ const STAGE_EMPTY_MESSAGES = {
  * Render one entry as a single dashboard row. Carries inline:
  *   - slug (linked to the review surface)
  *   - title
- *   - iteration count for the entry's currentStage
- *   - reviewState badge (or an em-dash placeholder)
  *   - updatedAt timestamp
  *   - per-stage action buttons
+ *
+ * Per DESKWORK-STATE-MACHINE.md (v5): revisions (the iteration counter)
+ * are bookkeeping and do NOT surface in routine UI. The previous
+ * "iteration: N" inline display was a violation — operators see
+ * revisions only via the View History surface and revert flows.
+ * reviewState badges are likewise retired (Commandment III).
  */
 export function renderRow(entry, index, defaultSite) {
-    const iteration = iterationForCurrentStage(entry);
     const reviewLink = `/dev/editorial-review/entry/${entry.uuid}`;
     const search = [entry.slug, entry.title, entry.keywords.join(' ')].join(' ').toLowerCase();
     // Hierarchical entries (slugs containing `/`) get a visual indent
@@ -58,69 +66,130 @@ export function renderRow(entry, index, defaultSite) {
           <span class="er-row-slug"><a href="${reviewLink}"
             title="open the review surface">${entry.slug}</a></span>
           <span class="er-calendar-title">${entry.title}</span>
-          <span class="er-calendar-meta er-calendar-meta-iteration"
-            data-iteration="${iteration}">iteration: ${iteration}</span>
           <time class="er-calendar-meta er-calendar-meta-updated" data-format="date"
             datetime="${entry.updatedAt}" title="${entry.updatedAt}">${formatDate(entry.updatedAt)}</time>
         </div>
-        <span class="er-calendar-status"><a href="${reviewLink}"
-          title="open the review surface for ${entry.slug}"
-          class="er-stamp-link">${renderReviewStateBadge(entry.reviewState)}</a></span>
+        <span class="er-calendar-status" aria-hidden="true"></span>
         ${renderRowActions(entry, defaultSite)}
       </div>
     </div>`);
 }
+/**
+ * Render the stage tile (mobile-only collapsible head). Hidden on desktop
+ * via dashboard-mobile.css; the existing `<h2 class="er-section-head">`
+ * carries the head on desktop and is hidden at <=600px so the tile takes
+ * over.
+ *
+ * Empty stages render the same tile shape but with `is-empty` styling and
+ * `disabled` so taps are no-ops (operator can still SEE the empty stage
+ * in the pipeline shape — they just can't drill in to nothing).
+ *
+ * Review-state sub-counts (e.g. "5 · 3 in review") were removed in v0.19
+ * per operator: review state isn't user-facing data and is slated for
+ * backend removal; the tile shows total entry count only.
+ */
+function renderStageTile(stage, count) {
+    const isEmpty = count === 0;
+    const classes = isEmpty ? 'er-stage-tile is-empty' : 'er-stage-tile';
+    const disabledAttr = isEmpty ? ' disabled' : '';
+    return unsafe(html `
+    <button class="${classes}" type="button"
+      data-stage-tile="${stage}"
+      aria-expanded="false"
+      aria-controls="stage-${stage.toLowerCase()}"${unsafe(disabledAttr)}>
+      <span class="er-stage-tile-glyph" aria-hidden="true">${STAGE_ORNAMENTS[stage]}</span>
+      <span class="er-stage-tile-name">${stage}</span>
+      <span class="er-stage-tile-count"><span class="num">${count}</span></span>
+      <span class="er-stage-tile-chev" aria-hidden="true">›</span>
+    </button>`);
+}
 /**
  * Render one full stage section: heading + ornaments + count + rows.
  *
- * Empty stages render compact (just the heading, no placeholder body)
- * — keeps the operator's sense of pipeline shape without padding the
- * dashboard with multi-line empty placeholders for low-volume
+ * The output is wrapped in a `.er-stage-block` div that pairs a mobile-
+ * only stage tile (the collapsible head) with the existing section. On
+ * desktop, the tile is `display: none` and the section's `<h2>` head
+ * carries the heading as before. On mobile, the section's head is hidden
+ * and the tile is shown; tapping the tile toggles a `data-collapsed`
+ * attribute on the section that hides/shows its rows. Single-expand
+ * (tapping one tile collapses the others) is handled by
+ * `dashboard/stage-tiles.ts`.
+ *
+ * Empty stages still render their tile (so the pipeline shape is visible
+ * at-rest on phone) but the empty section body itself is hidden on mobile.
+ *
+ * Empty stages on desktop render compact (just the heading, no placeholder
+ * body) — keeps the operator's sense of pipeline shape without padding
+ * the dashboard with multi-line empty placeholders for low-volume
  * calendars (#112). The hover title still surfaces the stage's
  * "what to run next" hint when the operator points at the heading.
  */
 export function renderStageSection(stage, entries, defaultSite) {
+    const tile = renderStageTile(stage, entries.length);
     if (entries.length === 0) {
         return unsafe(html `
-      <section class="er-section er-section--empty"
-        id="stage-${stage.toLowerCase()}" data-stage-section="${stage}"
-        data-empty-stage="${stage}">
-        <h2 class="er-section-head er-section-head--empty"
-          title="${STAGE_EMPTY_MESSAGES[stage]}">
-          <span>${stage}</span>
-          <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
-          <span class="count">№ 00</span>
-        </h2>
-      </section>`);
+      <div class="er-stage-block" data-stage-block="${stage}">
+        ${tile}
+        <section class="er-section er-section--empty"
+          id="stage-${stage.toLowerCase()}" data-stage-section="${stage}"
+          data-empty-stage="${stage}">
+          <h2 class="er-section-head er-section-head--empty"
+            title="${STAGE_EMPTY_MESSAGES[stage]}">
+            <span>${stage}</span>
+            <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
+            <span class="count">№ 00</span>
+          </h2>
+        </section>
+      </div>`);
     }
     const body = unsafe(entries.map((e, i) => renderRow(e, i, defaultSite).__raw).join(''));
     return unsafe(html `
-    <section class="er-section" id="stage-${stage.toLowerCase()}" data-stage-section="${stage}">
-      <h2 class="er-section-head">
-        <span>${stage}</span>
-        <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
-        <span class="count">№ ${entries.length}</span>
-      </h2>
-      ${body}
-    </section>`);
+    <div class="er-stage-block" data-stage-block="${stage}">
+      ${tile}
+      <section class="er-section" id="stage-${stage.toLowerCase()}" data-stage-section="${stage}">
+        <h2 class="er-section-head">
+          <span>${stage}</span>
+          <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
+          <span class="count">№ ${entries.length}</span>
+        </h2>
+        ${body}
+      </section>
+    </div>`);
 }
 /**
- * Render the reserved Distribution placeholder. Stays a separate
- * sibling of the stage sections — distribution records (shortform
- * cross-posts) are tracked under their own model and the dashboard
- * surfaces only a placeholder here until that integration lands.
+ * Render the reserved Distribution placeholder. Distribution isn't a
+ * pipeline stage in the formal sense (no entries flow through it; it
+ * lives under its own model when shortform cross-posts arrive), but on
+ * the mobile dashboard it renders as a stage tile alongside the rest
+ * so the operator's pipeline-shape scan stays uniform — see operator
+ * feedback on 2026-05-09. The tile is `is-empty` + `disabled` until
+ * DistributionRecords land in the data layer.
+ *
+ * On desktop, the existing section + heading + placeholder text render
+ * as before; the tile is `display: none` per dashboard-mobile.css.
  */
 export function renderDistributionPlaceholder() {
     return unsafe(html `
-    <section class="er-section" id="stage-distribution" data-stage-section="Distribution">
-      <h2 class="er-section-head">
-        <span>Distribution</span>
-        <span class="ornament">⌘</span>
-      </h2>
-      <div class="er-empty" style="padding: 1rem 0.25rem; font-size: 0.95rem;">
-        Reserved for shortform DistributionRecords — separate model.
-      </div>
-    </section>`);
+    <div class="er-stage-block" data-stage-block="Distribution">
+      <button class="er-stage-tile is-empty" type="button"
+        data-stage-tile="Distribution"
+        aria-expanded="false"
+        aria-controls="stage-distribution" disabled>
+        <span class="er-stage-tile-glyph" aria-hidden="true">⌘</span>
+        <span class="er-stage-tile-name">Distribution</span>
+        <span class="er-stage-tile-count"><span class="num">0</span></span>
+        <span class="er-stage-tile-chev" aria-hidden="true">›</span>
+      </button>
+      <section class="er-section" id="stage-distribution" data-stage-section="Distribution">
+        <h2 class="er-section-head">
+          <span>Distribution</span>
+          <span class="ornament">⌘</span>
+        </h2>
+        <div class="er-empty" style="padding: 1rem 0.25rem; font-size: 0.95rem;">
+          Reserved for shortform DistributionRecords — separate model.
+        </div>
+      </section>
+    </div>`);
 }
 function formatDate(iso) {
     // Trim to YYYY-MM-DD for compact display. Full timestamp is on the

package/dist/pages/dashboard/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../src/pages/dashboard/section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAgB,MAAM,YAAY,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,eAAe,GAA0B;IAC7C,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,GAAG;IACd,QAAQ,EAAE,GAAG;IACb,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,GAAG;IACd,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,GAAG;CACf,CAAC;AAEF,MAAM,oBAAoB,GAA0B;IAClD,KAAK,EAAE,kDAAkD;IACzD,OAAO,EAAE,gEAAgE;IACzE,SAAS,EAAE,uBAAuB;IAClC,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,yBAAyB;IACpC,OAAO,EAAE,kBAAkB;IAC3B,SAAS,EAAE,uBAAuB;CACnC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,UAAU,SAAS,CAAC,KAAY,EAAE,KAAa,EAAE,WAAmB;IACxE,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,+BAA+B,KAAK,CAAC,IAAI,EAAE,CAAC;IAC/D,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;IAC3F,kEAAkE;IAClE,wEAAwE;IACxE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,MAAM,UAAU,GACd,KAAK,GAAG,CAAC;QACP,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA,gBAAgB,KAAK,4BAA4B,KAAK,GAAG,CAAC;QACvE,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,MAAM,CAAC,IAAI,CAAA;mEAC+C,MAAM,IAAI,UAAU;iDACtC,KAAK,CAAC,YAAY;qBAC9C,KAAK,CAAC,IAAI,gBAAgB,KAAK,CAAC,IAAI,kBAAkB,MAAM;qCAC5C,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;;+CAExB,UAAU;8CACX,KAAK,CAAC,IAAI;4CACZ,KAAK,CAAC,KAAK;;8BAEzB,SAAS,gBAAgB,SAAS;;wBAExC,KAAK,CAAC,SAAS,YAAY,KAAK,CAAC,SAAS,KAAK,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC;;oDAE9C,UAAU;+CACf,KAAK,CAAC,IAAI;kCACvB,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC;UACjE,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC;;WAEnC,CAAC,CAAC;AACb,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAAY,EACZ,OAAyB,EACzB,WAAmB;IAEnB,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,MAAM,CAAC,IAAI,CAAA;;oBAEF,KAAK,CAAC,WAAW,EAAE,yBAAyB,KAAK;4BACzC,KAAK;;mBAEd,oBAAoB,CAAC,KAAK,CAAC;kBAC5B,KAAK;mCACY,eAAe,CAAC,KAAK,CAAC;;;iBAGxC,CAAC,CAAC;IACjB,CAAC;IAED,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAExF,OAAO,MAAM,CAAC,IAAI,CAAA;4CACwB,KAAK,CAAC,WAAW,EAAE,yBAAyB,KAAK;;gBAE7E,KAAK;iCACY,eAAe,CAAC,KAAK,CAAC;gCACvB,OAAO,CAAC,MAAM;;QAEtC,IAAI;eACG,CAAC,CAAC;AACjB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,6BAA6B;IAC3C,OAAO,MAAM,CAAC,IAAI,CAAA;;;;;;;;;eASL,CAAC,CAAC;AACjB,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,mEAAmE;IACnE,sBAAsB;IACtB,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAC1B,CAAC"}
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../src/pages/dashboard/section.ts"],"names":[],"mappings":"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"}

package/dist/pages/dashboard/section.ts

@@ -1,21 +1,22 @@
 /**
  * Single-stage section renderer.
  *
- * Pipeline-redesign Task 34. Each of the eight stage sections renders
- * with a section heading (stage name + entry count) and either a list
- * of rows or an empty-state placeholder. Per-row HTML carries the
- * sidecar-derived state inline (iteration count + reviewState badge)
- * so an operator can see at a glance where each entry sits without
- * opening it.
+ * Each of the eight stage sections (plus the Distribution placeholder)
+ * renders with a section heading (stage name + entry count) and either
+ * a list of rows or an empty-state placeholder. Each row carries the
+ * entry's slug, title, updated-at timestamp, and stage-gated verb
+ * buttons. Per DESKWORK-STATE-MACHINE.md Commandment III, rows do NOT
+ * surface iteration counts or reviewState — those were retired in
+ * v0.19 along with the legacy reviewState concept.
+ *
+ * On mobile, each section is fronted by a collapsible tile (see
+ * `renderStageTile`); on desktop the tiles are display:none and the
+ * `<h2 class="er-section-head">` heading carries the stage name.
  */
 
 import { html, unsafe, type RawHtml } from '../html.ts';
 import type { Entry, Stage } from '@deskwork/core/schema/entry';
-import {
-  iterationForCurrentStage,
-  renderReviewStateBadge,
-  renderRowActions,
-} from './affordances.ts';
+import { renderRowActions } from './affordances.ts';
 
 const STAGE_ORNAMENTS: Record<Stage, string> = {
   Ideas: '◇',
@@ -43,13 +44,16 @@ const STAGE_EMPTY_MESSAGES: Record<Stage, string> = {
  * Render one entry as a single dashboard row. Carries inline:
  *   - slug (linked to the review surface)
  *   - title
- *   - iteration count for the entry's currentStage
- *   - reviewState badge (or an em-dash placeholder)
  *   - updatedAt timestamp
  *   - per-stage action buttons
+ *
+ * Per DESKWORK-STATE-MACHINE.md (v5): revisions (the iteration counter)
+ * are bookkeeping and do NOT surface in routine UI. The previous
+ * "iteration: N" inline display was a violation — operators see
+ * revisions only via the View History surface and revert flows.
+ * reviewState badges are likewise retired (Commandment III).
  */
 export function renderRow(entry: Entry, index: number, defaultSite: string): RawHtml {
-  const iteration = iterationForCurrentStage(entry);
   const reviewLink = `/dev/editorial-review/entry/${entry.uuid}`;
   const search = [entry.slug, entry.title, entry.keywords.join(' ')].join(' ').toLowerCase();
   // Hierarchical entries (slugs containing `/`) get a visual indent
@@ -69,25 +73,63 @@ export function renderRow(entry: Entry, index: number, defaultSite: string): Raw
           <span class="er-row-slug"><a href="${reviewLink}"
             title="open the review surface">${entry.slug}</a></span>
           <span class="er-calendar-title">${entry.title}</span>
-          <span class="er-calendar-meta er-calendar-meta-iteration"
-            data-iteration="${iteration}">iteration: ${iteration}</span>
           <time class="er-calendar-meta er-calendar-meta-updated" data-format="date"
             datetime="${entry.updatedAt}" title="${entry.updatedAt}">${formatDate(entry.updatedAt)}</time>
         </div>
-        <span class="er-calendar-status"><a href="${reviewLink}"
-          title="open the review surface for ${entry.slug}"
-          class="er-stamp-link">${renderReviewStateBadge(entry.reviewState)}</a></span>
+        <span class="er-calendar-status" aria-hidden="true"></span>
         ${renderRowActions(entry, defaultSite)}
       </div>
     </div>`);
 }
 
+/**
+ * Render the stage tile (mobile-only collapsible head). Hidden on desktop
+ * via dashboard-mobile.css; the existing `<h2 class="er-section-head">`
+ * carries the head on desktop and is hidden at <=600px so the tile takes
+ * over.
+ *
+ * Empty stages render the same tile shape but with `is-empty` styling and
+ * `disabled` so taps are no-ops (operator can still SEE the empty stage
+ * in the pipeline shape — they just can't drill in to nothing).
+ *
+ * Review-state sub-counts (e.g. "5 · 3 in review") were removed in v0.19
+ * per operator: review state isn't user-facing data and is slated for
+ * backend removal; the tile shows total entry count only.
+ */
+function renderStageTile(stage: Stage, count: number): RawHtml {
+  const isEmpty = count === 0;
+  const classes = isEmpty ? 'er-stage-tile is-empty' : 'er-stage-tile';
+  const disabledAttr = isEmpty ? ' disabled' : '';
+  return unsafe(html`
+    <button class="${classes}" type="button"
+      data-stage-tile="${stage}"
+      aria-expanded="false"
+      aria-controls="stage-${stage.toLowerCase()}"${unsafe(disabledAttr)}>
+      <span class="er-stage-tile-glyph" aria-hidden="true">${STAGE_ORNAMENTS[stage]}</span>
+      <span class="er-stage-tile-name">${stage}</span>
+      <span class="er-stage-tile-count"><span class="num">${count}</span></span>
+      <span class="er-stage-tile-chev" aria-hidden="true">›</span>
+    </button>`);
+}
+
 /**
  * Render one full stage section: heading + ornaments + count + rows.
  *
- * Empty stages render compact (just the heading, no placeholder body)
- * — keeps the operator's sense of pipeline shape without padding the
- * dashboard with multi-line empty placeholders for low-volume
+ * The output is wrapped in a `.er-stage-block` div that pairs a mobile-
+ * only stage tile (the collapsible head) with the existing section. On
+ * desktop, the tile is `display: none` and the section's `<h2>` head
+ * carries the heading as before. On mobile, the section's head is hidden
+ * and the tile is shown; tapping the tile toggles a `data-collapsed`
+ * attribute on the section that hides/shows its rows. Single-expand
+ * (tapping one tile collapses the others) is handled by
+ * `dashboard/stage-tiles.ts`.
+ *
+ * Empty stages still render their tile (so the pipeline shape is visible
+ * at-rest on phone) but the empty section body itself is hidden on mobile.
+ *
+ * Empty stages on desktop render compact (just the heading, no placeholder
+ * body) — keeps the operator's sense of pipeline shape without padding
+ * the dashboard with multi-line empty placeholders for low-volume
  * calendars (#112). The hover title still surfaces the stage's
  * "what to run next" hint when the operator points at the heading.
  */
@@ -96,50 +138,75 @@ export function renderStageSection(
   entries: readonly Entry[],
   defaultSite: string,
 ): RawHtml {
+  const tile = renderStageTile(stage, entries.length);
+
   if (entries.length === 0) {
     return unsafe(html`
-      <section class="er-section er-section--empty"
-        id="stage-${stage.toLowerCase()}" data-stage-section="${stage}"
-        data-empty-stage="${stage}">
-        <h2 class="er-section-head er-section-head--empty"
-          title="${STAGE_EMPTY_MESSAGES[stage]}">
-          <span>${stage}</span>
-          <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
-          <span class="count">№ 00</span>
-        </h2>
-      </section>`);
+      <div class="er-stage-block" data-stage-block="${stage}">
+        ${tile}
+        <section class="er-section er-section--empty"
+          id="stage-${stage.toLowerCase()}" data-stage-section="${stage}"
+          data-empty-stage="${stage}">
+          <h2 class="er-section-head er-section-head--empty"
+            title="${STAGE_EMPTY_MESSAGES[stage]}">
+            <span>${stage}</span>
+            <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
+            <span class="count">№ 00</span>
+          </h2>
+        </section>
+      </div>`);
   }
 
   const body = unsafe(entries.map((e, i) => renderRow(e, i, defaultSite).__raw).join(''));
 
   return unsafe(html`
-    <section class="er-section" id="stage-${stage.toLowerCase()}" data-stage-section="${stage}">
-      <h2 class="er-section-head">
-        <span>${stage}</span>
-        <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
-        <span class="count">№ ${entries.length}</span>
-      </h2>
-      ${body}
-    </section>`);
+    <div class="er-stage-block" data-stage-block="${stage}">
+      ${tile}
+      <section class="er-section" id="stage-${stage.toLowerCase()}" data-stage-section="${stage}">
+        <h2 class="er-section-head">
+          <span>${stage}</span>
+          <span class="ornament">${STAGE_ORNAMENTS[stage]}</span>
+          <span class="count">№ ${entries.length}</span>
+        </h2>
+        ${body}
+      </section>
+    </div>`);
 }
 
 /**
- * Render the reserved Distribution placeholder. Stays a separate
- * sibling of the stage sections — distribution records (shortform
- * cross-posts) are tracked under their own model and the dashboard
- * surfaces only a placeholder here until that integration lands.
+ * Render the reserved Distribution placeholder. Distribution isn't a
+ * pipeline stage in the formal sense (no entries flow through it; it
+ * lives under its own model when shortform cross-posts arrive), but on
+ * the mobile dashboard it renders as a stage tile alongside the rest
+ * so the operator's pipeline-shape scan stays uniform — see operator
+ * feedback on 2026-05-09. The tile is `is-empty` + `disabled` until
+ * DistributionRecords land in the data layer.
+ *
+ * On desktop, the existing section + heading + placeholder text render
+ * as before; the tile is `display: none` per dashboard-mobile.css.
  */
 export function renderDistributionPlaceholder(): RawHtml {
   return unsafe(html`
-    <section class="er-section" id="stage-distribution" data-stage-section="Distribution">
-      <h2 class="er-section-head">
-        <span>Distribution</span>
-        <span class="ornament">⌘</span>
-      </h2>
-      <div class="er-empty" style="padding: 1rem 0.25rem; font-size: 0.95rem;">
-        Reserved for shortform DistributionRecords — separate model.
-      </div>
-    </section>`);
+    <div class="er-stage-block" data-stage-block="Distribution">
+      <button class="er-stage-tile is-empty" type="button"
+        data-stage-tile="Distribution"
+        aria-expanded="false"
+        aria-controls="stage-distribution" disabled>
+        <span class="er-stage-tile-glyph" aria-hidden="true">⌘</span>
+        <span class="er-stage-tile-name">Distribution</span>
+        <span class="er-stage-tile-count"><span class="num">0</span></span>
+        <span class="er-stage-tile-chev" aria-hidden="true">›</span>
+      </button>
+      <section class="er-section" id="stage-distribution" data-stage-section="Distribution">
+        <h2 class="er-section-head">
+          <span>Distribution</span>
+          <span class="ornament">⌘</span>
+        </h2>
+        <div class="er-empty" style="padding: 1rem 0.25rem; font-size: 0.95rem;">
+          Reserved for shortform DistributionRecords — separate model.
+        </div>
+      </section>
+    </div>`);
 }
 
 function formatDate(iso: string): string {

package/dist/pages/dashboard.d.ts

@@ -1,28 +1,34 @@
 /**
  * Studio dashboard page — `/dev/editorial-studio`.
  *
- * Pipeline-redesign Task 34. The dashboard renders eight stage
- * sections — Ideas → Planned → Outlining → Drafting → Final →
- * Published, plus Blocked and Cancelled — backed by sidecar reads
- * under `<projectRoot>/.deskwork/entries/*.json`. Each row carries
- * the entry's iteration count for its current stage and a
- * reviewState badge so an operator can see at a glance where each
- * entry sits without opening it.
+ * The dashboard renders eight stage sections — Ideas → Planned →
+ * Outlining → Drafting → Final → Published, plus Blocked and
+ * Cancelled — backed by sidecar reads under
+ * `<projectRoot>/.deskwork/entries/*.json`, with a Distribution
+ * placeholder pinned at the end. Each row carries the entry's slug,
+ * title, updated-at timestamp, and stage-gated verb buttons that
+ * clipboard-copy `/deskwork:<verb> <slug>` (THESIS Consequence 2 —
+ * the studio routes commands; skills do the work). On phone (≤600px)
+ * each stage section is collapsed by default and fronted by a tile
+ * (see Compact-1 in DESIGN-STANDARDS.md); on desktop everything is
+ * expanded with the existing `<h2 class="er-section-head">` heading
+ * carrying the stage name.
  *
- * Replaces the legacy calendar.md + workflow store rendering. The
- * scaffold (folio, masthead, filter strip, layout) is preserved so
- * existing CSS keeps working.
+ * Per DESKWORK-STATE-MACHINE.md (Commandment III), reviewState is
+ * RETIRED. Rows do NOT carry per-stage iteration counts or
+ * reviewState badges; that legacy "at-a-glance" surfacing was
+ * removed in v0.19.
  *
  * The renderer's data flow:
  *   1. loadDashboardData reads every sidecar and groups by stage.
- *   2. Each of the eight stages renders via `renderStageSection`.
- *   3. The Distribution placeholder pins beneath the stage sections.
+ *   2. Each stage renders via `renderStageSection`.
+ *   3. The Distribution placeholder renders below the stage sections.
+ *   4. The mobile-only Compose chrome (FAB + slide-up sheet) renders
+ *      at the page tail; CSS hides it on desktop.
  *
- * The legacy export `renderDashboard` stays — server.ts wires it as
- * the page handler. The `getIndex` parameter is preserved for
- * signature compatibility with the override resolver in server.ts;
- * the new dashboard does not currently consume it (sidecars are the
- * data source, not the on-disk content tree).
+ * `getIndex` is preserved for signature compatibility with the
+ * override resolver in server.ts; the dashboard does not consume it
+ * (sidecars are the data source, not the on-disk content tree).
  */
 import type { StudioContext } from '../routes/api.ts';
 import type { ContentIndex } from '@deskwork/core/content-index';

package/dist/pages/dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/pages/dashboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC;AAElE;;;GAGG;AACH,wBAAsB,eAAe,CACnC,GAAG,EAAE,aAAa,EAClB,QAAQ,CAAC,EAAE,oBAAoB,GAC9B,OAAO,CAAC,MAAM,CAAC,CAwCjB"}
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/pages/dashboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC;AAElE;;;GAGG;AACH,wBAAsB,eAAe,CACnC,GAAG,EAAE,aAAa,EAClB,QAAQ,CAAC,EAAE,oBAAoB,GAC9B,OAAO,CAAC,MAAM,CAAC,CA0CjB"}