Collapse workflow-detail task rows with progressive disclosure (Closes #102)

Each task now renders as one scannable line (checkbox, title, due, assignee,
status pill, single next-action affordance); the completion/proof, required
link/file inputs, Close-as dropdown, Save evidence, waiting form, and
assistant controls are hidden in a keyboard-operable disclosure region
(aria-expanded) revealed on click. Collapses a 15-task bundle from ~5711px
to ~1115px desktop (10109px -> ~2078px mobile). Completion gating and the
Done(N) grouping are unchanged; deep-linked tasks auto-expand.

Closes #102

Author: alexeygrigorev

backend/e2e/bundle-detail.spec.js

@@ -11,6 +11,19 @@ function uid() {
   return Math.random().toString(36).slice(2, 8);
 }
 
+// Task rows collapse to a scannable line at rest (#102). Expand the row to
+// reveal the required-link/file, completion-proof, waiting, and assistant
+// controls before interacting with them.
+async function expandRow(row) {
+  const toggle = row.locator('[data-task-expand]').first();
+  if (await toggle.count()) {
+    if ((await toggle.getAttribute('aria-expanded')) === 'false') {
+      await toggle.click();
+    }
+    await expect(row.locator('.task-checklist-details')).toBeVisible();
+  }
+}
+
 test.describe('Bundle detail view (issue #27)', () => {
 
   // ── Scenario: Grace views a bundle with references and bundle links ──
@@ -162,6 +175,9 @@ test.describe('Bundle detail view (issue #27)', () => {
       const checkbox = taskRow.locator('.task-status-checkbox');
       await expect(checkbox).toBeDisabled();
 
+      // Expand the collapsed row to reach the required-link editor
+      await expandRow(taskRow);
+
       // Required link label
       const linkLabel = taskRow.locator('.required-link-label');
       await expect(linkLabel).toHaveText('Luma:');
@@ -745,6 +761,7 @@ test.describe('Bundle detail view (issue #27)', () => {
       const sponsorRow = page.locator('[data-task-row="' + sponsorTask.id + '"]');
       await expect(sponsorRow).toContainText('Add Sponsorship document link to complete');
       await expect(sponsorRow.locator('[data-task-checkbox="' + sponsorTask.id + '"]')).toBeDisabled();
+      await expandRow(sponsorRow);
       await sponsorRow.locator('[data-skip-closure-task="' + sponsorTask.id + '"]').selectOption('not sponsored this week');
       await sponsorRow.locator('[data-save-completion-proof="' + sponsorTask.id + '"]').click();
       await expect(page.locator('[data-task-row="' + sponsorTask.id + '"] [data-task-checkbox="' + sponsorTask.id + '"]')).toBeEnabled();
@@ -784,6 +801,7 @@ test.describe('Bundle detail view (issue #27)', () => {
       await expect(page.locator('.bundle-link-row', { hasText: 'Mailchimp newsletter' })).not.toHaveClass(/bundle-link-row--empty/);
 
       await expect(page.locator('[data-task-row="' + externalStatusTask.id + '"]')).toContainText('Add completion status: Mailchimp campaign scheduled');
+      await expandRow(externalStatusRow);
       await externalStatusRow.locator('[data-completion-proof-task="' + externalStatusTask.id + '"]').fill('Mailchimp campaign scheduled');
       await externalStatusRow.locator('[data-save-completion-proof="' + externalStatusTask.id + '"]').click();
       await expect(page.locator('[data-task-row="' + externalStatusTask.id + '"] [data-task-checkbox="' + externalStatusTask.id + '"]')).toBeEnabled();
@@ -799,6 +817,7 @@ test.describe('Bundle detail view (issue #27)', () => {
       await expect(commentRow).toContainText('Add completion note: Book block updated or removed');
       await expect(commentRow.locator('[data-task-checkbox="' + commentTask.id + '"]')).toBeDisabled();
 
+      await expandRow(commentRow);
       await commentRow.locator('[data-completion-proof-task="' + commentTask.id + '"]').fill('Book block removed; no book this week');
       await commentRow.locator('[data-save-completion-proof="' + commentTask.id + '"]').click();
       await expect(page.locator('[data-task-row="' + commentTask.id + '"] [data-task-checkbox="' + commentTask.id + '"]')).toBeEnabled();
@@ -815,6 +834,7 @@ test.describe('Bundle detail view (issue #27)', () => {
       const skipRow = page.locator('[data-task-row="' + skipTask.id + '"]');
       await expect(skipRow).toContainText('Add LinkedIn link to complete');
       await expect(skipRow.locator('[data-task-checkbox="' + skipTask.id + '"]')).toBeDisabled();
+      await expandRow(skipRow);
       await skipRow.locator('[data-skip-closure-task="' + skipTask.id + '"]').selectOption('not sponsored this week');
       await skipRow.locator('[data-save-completion-proof="' + skipTask.id + '"]').click();
       await expect(page.locator('[data-task-row="' + skipTask.id + '"] [data-task-checkbox="' + skipTask.id + '"]')).toBeEnabled();
@@ -1090,4 +1110,73 @@ test.describe('Bundle detail view (issue #27)', () => {
       await expect(regularRow).not.toHaveClass(/milestone-task-row/);
     });
   });
+
+  // ── Scenario: Rows collapse to a scannable line and expand on demand ──
+  test.describe('Scenario: Task rows collapse and expand (issue #102)', () => {
+    let bundleId;
+    let taskId;
+    const suffix = uid();
+
+    test.beforeAll(async ({ request }) => {
+      const bundleRes = await request.post('/api/bundles', {
+        data: {
+          title: 'Collapse ' + suffix,
+          anchorDate: '2026-05-15',
+          bundleLinks: [{ name: 'Luma', url: '' }],
+        },
+      });
+      expect(bundleRes.status()).toBe(201);
+      bundleId = (await bundleRes.json()).bundle.id;
+
+      const taskRes = await request.post('/api/tasks', {
+        data: {
+          description: 'Collapsible required-link task ' + suffix,
+          date: '2026-05-15',
+          bundleId,
+          requiredLinkName: 'Luma',
+          source: 'template',
+        },
+      });
+      expect(taskRes.status()).toBe(201);
+      taskId = (await taskRes.json()).id;
+    });
+
+    test.afterAll(async ({ request }) => {
+      if (taskId) await request.delete('/api/tasks/' + taskId);
+      if (bundleId) await archiveAndDelete(request, bundleId);
+    });
+
+    test('row is collapsed at rest and reveals controls only after expand', async ({ page }) => {
+      await page.goto('/#/bundles');
+      await page.waitForSelector('.bundle-card');
+      await page.locator('.bundle-card', { hasText: 'Collapse ' + suffix }).locator('.bundle-card-title').click();
+      await page.waitForSelector('[data-testid="stage-badge"]');
+
+      const row = page.locator('[data-task-row="' + taskId + '"]');
+      await expect(row).toBeVisible();
+
+      // At rest: the checkbox is visible but the detail editor is hidden.
+      await expect(row.locator('.task-status-checkbox')).toBeVisible();
+      const details = row.locator('.task-checklist-details');
+      await expect(details).toBeHidden();
+      await expect(row.locator('.required-link-input')).toBeHidden();
+
+      // The single next-action toggle exposes an accessible collapsed state.
+      const toggle = row.locator('[data-task-expand]');
+      await expect(toggle).toBeVisible();
+      await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+
+      // Keyboard-operable: focus and press Enter to expand.
+      await toggle.focus();
+      await page.keyboard.press('Enter');
+      await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+      await expect(details).toBeVisible();
+      await expect(row.locator('.required-link-input')).toBeVisible();
+
+      // Toggling again collapses the row back to one line.
+      await page.keyboard.press('Enter');
+      await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+      await expect(details).toBeHidden();
+    });
+  });
 });

backend/e2e/follow-up-actions.spec.js

@@ -21,6 +21,18 @@ async function screenshot(page, name) {
   await page.screenshot({ path: `../.tmp/screenshots/${name}.png`, fullPage: true });
 }
 
+// Workflow-detail rows collapse to a scannable line at rest (#102). Expand the
+// row to reach the follow-up/waiting controls in the disclosure region.
+async function expandRow(row) {
+  const toggle = row.locator('[data-task-expand]').first();
+  if (await toggle.count()) {
+    if ((await toggle.getAttribute('aria-expanded')) === 'false') {
+      await toggle.click();
+    }
+    await expect(row.locator('.task-checklist-details')).toBeVisible();
+  }
+}
+
 async function cleanupTask(request, task) {
   if (!task) return;
   await request.delete('/api/tasks/' + task.id).catch(() => {});
@@ -100,6 +112,7 @@ test.describe('Operator follow-up actions (#56)', () => {
       await expect(workflowRow).toContainText('Sent sponsor reminder from Gmail');
       await screenshot(page, 'issue-56-workflow-waiting-history');
 
+      await expandRow(workflowRow);
       await workflowRow.locator('.follow-up-note').fill('Sponsor replied with approval');
       await Promise.all([
         page.waitForResponse((response) => (
@@ -110,6 +123,7 @@ test.describe('Operator follow-up actions (#56)', () => {
         workflowRow.locator('[data-follow-up-action="response-received"]').click(),
       ]);
       await expect(workflowRow).toContainText('Response received');
+      await expandRow(workflowRow);
       await expect(workflowRow.locator('.waiting-form')).toBeVisible();
       await screenshot(page, 'issue-56-resolved-unblocked-state');
 

backend/e2e/podcast-operator-slice.spec.js

@@ -11,6 +11,14 @@ async function screenshot(page, name) {
 async function podcastRow(page, text) {
   const row = page.locator('.task-checklist-row', { hasText: text }).first();
   await expect(row).toBeVisible({ timeout: 15000 });
+  // Rows collapse to a scannable line at rest (#102); expand to reach controls.
+  const toggle = row.locator('[data-task-expand]').first();
+  if (await toggle.count()) {
+    if ((await toggle.getAttribute('aria-expanded')) === 'false') {
+      await toggle.click();
+    }
+    await expect(row.locator('.task-checklist-details')).toBeVisible();
+  }
   return row;
 }
 
@@ -95,7 +103,9 @@ test.describe('Podcast operator workflow slice (#9)', () => {
       buffer: Buffer.from('podcast banner proof ' + suffix),
     });
     await bannerRow.locator('[data-upload-required-file]').click();
-    await page.waitForSelector('.proof-present', { timeout: 15000 });
+    // The upload reloads the bundle and the row re-collapses, so the proof marker
+    // is present in the DOM but hidden until re-expanded (#102).
+    await page.waitForSelector('.proof-present', { state: 'attached', timeout: 15000 });
     const bannerRowAfter = await podcastRow(page, 'Create a banner for a podcast event in Figma');
     await expect(bannerRowAfter.locator('.task-status-checkbox')).toBeEnabled();
     await bannerRowAfter.locator('.task-status-checkbox').check();
@@ -124,7 +134,8 @@ test.describe('Podcast operator workflow slice (#9)', () => {
     await waitRow.locator('.waiting-followup-input').fill('2000-01-01');
     await waitRow.locator('.waiting-note-input').fill('Waiting for date confirmation');
     await waitRow.locator('[data-mark-waiting-task]').click();
-    await expect(page.locator('.badge-waiting', { hasText: guest })).toBeVisible({ timeout: 15000 });
+    // Row re-collapses after marking waiting; the badge is in the DOM but hidden (#102).
+    await expect(page.locator('.badge-waiting', { hasText: guest })).toBeAttached({ timeout: 15000 });
     await screenshot(page, `podcast-waiting-${suffix}`);
 
     await page.goto('/#/');

backend/src/pages/index.html

@@ -1566,6 +1566,88 @@
       color: #aaa;
     }
 
+    /* ── Progressive-disclosure task rows (#102) ──────────── */
+
+    .task-checklist-summary {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+    }
+
+    .task-checklist-heading {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .task-checklist-pills {
+      display: inline-flex;
+      gap: 5px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .task-queue-label--done {
+      background: #e7f5ee;
+      color: #21734d;
+    }
+
+    .task-queue-label--overdue {
+      background: #fdecea;
+      color: #a3271b;
+    }
+
+    .task-queue-label--waiting {
+      background: #eef4ff;
+      color: #345b9c;
+    }
+
+    .task-disclosure-toggle {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      min-height: 32px;
+      border: 1px solid #d8dde3;
+      background: #f7f9fb;
+      color: #34506e;
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 5px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background 0.15s, border-color 0.15s;
+    }
+
+    .task-disclosure-toggle:hover {
+      background: #eef3f8;
+      border-color: #c3ccd6;
+    }
+
+    .task-disclosure-toggle:focus-visible {
+      outline: 2px solid var(--primary);
+      outline-offset: 1px;
+    }
+
+    .task-disclosure-caret {
+      font-size: 10px;
+      line-height: 1;
+    }
+
+    .task-checklist-details {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px dashed #e3e3e3;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .task-checklist-details[hidden] {
+      display: none;
+    }
+
     /* ── Bell notification icon ───────────────────────────── */
 
     .notif-bell-wrapper {