Skip to content

UX: dashboard Daily Queue should surface next-action button, not embed the completion editor #103

Closed

Description

@alexeygrigorev

Dashboard Daily Queue: surface one next-action button per row, not the embedded completion editor

Status: pending
Tags: enhancement, frontend, design, P1
Depends on: None
Blocks: None

Groomed from the same live UX audit. #2 over-complication: the dashboard Daily
Queue embeds the full completion editor inside narrow table columns. The
NEXT ACTION column stacks a completion note + "What changed" input + "Close
as: Choose reason" dropdown + "Save evidence" button into a ~140px column, so
labels truncate mid-word ("What chang", "Choose rea", "Status from"). The
REQUIRED PROOF column shows raw "URL" inputs per row. Evidence:
.tmp/screenshots/ux-audit/15-dashboard-populated.png.

Scope

The dashboard Daily Queue table (renderDashboardTaskTable and
renderDashboardTaskActions in backend/src/public/app.js, currently
~lines 2217-2612) must present each task as status + a single next-required-click
button, per JTBD 1 ("Each task shows the next required click: complete, add link,
upload file, follow up, or open workflow"). The dashboard should route the
operator to the task/workflow-detail surface to perform editing, rather than
hosting the completion-proof editor, required-link/file inputs, and skip-closure
dropdown inline in table cells.

The next-action button is derived from task state:

  • ready to complete, no missing proof -> "Complete" (completes in place; the
    existing checkbox path may back this).
  • required link/file/evidence missing -> "Add link" / "Add evidence" that opens
    the task in its workflow-detail context.
  • waiting / follow-up due -> "Follow up" that opens the follow-up controls
    (detail, or the existing expandable follow-up row).
  • otherwise -> "Open workflow".

The REQUIRED PROOF column's inline URL inputs and the inline
completion-proof/skip-closure editor should be removed from the dashboard rows;
that editing belongs on the task/workflow-detail surface. Where a bundle exists,
"Open workflow" / "Add link" must deep-link into that bundle so the operator can
finish there.

This is a dashboard-presentation and routing change only. No task/bundle API,
completion-gating, or proof-blocking rule changes. Completing from the dashboard
when no proof is missing must still work (JTBD 1 / dashboard acceptance:
"Allows completing a task from dashboard when no proof is missing", "Blocks
completion from dashboard when proof is missing").

Acceptance Criteria

  • Each Daily Queue row shows the task, its status/queue label, and exactly
    one primary next-action button; no completion note, "What changed" input,
    "Close as" dropdown, "Save evidence" button, or raw required-link/file
    input is rendered inline in the row.
  • The next-action button reflects task state: Complete (ready, no missing
    proof), Add link / Add evidence (missing proof), Follow up (waiting or
    follow-up due), or Open workflow.
  • Completing a ready task with no missing proof still works directly from the
    dashboard row (checkbox and/or Complete button).
  • For a task with missing required proof, the dashboard does not offer inline
    editing; the next-action button opens the task in workflow/task detail
    where the proof can be added, and completion remains blocked until proof
    exists.
  • No column label truncates mid-word at 1280px (verified against the current
    "What chang" / "Choose rea" / "Status from" truncation in
    15-dashboard-populated.png).
  • Waiting / follow-up-due rows still expose the follow-up actions (response
    received, follow-up sent, resolve done) either via the next-action button
    or the existing expandable actions row; follow-up-actions.spec.js passes.
  • Intake follow-up rows continue to render with their "Open intake" action.

Test Scenarios

Scenario: Ready task completes from the dashboard

Given: a today task with no required proof appears in the Daily Queue
When: Grace clicks its next-action button / checkbox
Then: the task is marked done and the queue refreshes, with no inline editor
shown.

Scenario: Missing-proof task routes to detail

Given: a queue task with a required link and no link saved
When: Grace clicks its next-action button
Then: she is taken to the task's workflow context to add the link, and the
dashboard row itself never rendered the URL input or "Save evidence" editor.

Scenario: No truncated labels

Given: a populated Daily Queue at 1280px
When: the dashboard renders
Then: no next-action or proof control label is truncated mid-word.

Scenario: Follow-up still actionable

Given: a waiting task whose follow-up is due
When: Grace acts on it from the dashboard
Then: she can record response received / follow-up sent / resolve done as today.

Out of Scope

Dependencies

Verification

  • From backend/: npm run typecheck.
  • From backend/: npm run test:e2e — at minimum home-dashboard.spec.js and
    follow-up-actions.spec.js; extend a spec to assert the queue row exposes a
    single next-action and no inline completion editor.
  • Playwright screenshot of a populated Daily Queue at 1280px (seed data,
    login grace@datatalks.club / 111) saved under .tmp/screenshots/ux-audit/ and
    read to confirm no mid-word truncation, 404, or broken layout.

Activity

  1. added
    enhancementNew or improved functionality
    needs groomingRaw intake that needs PM grooming
    P1Important
    designDesign and UX
    and removed
    needs groomingRaw intake that needs PM grooming
    on Jul 2, 2026
  2. alexeygrigorev commented on Jul 2, 2026

    @alexeygrigorev
    MemberAuthor

    Software Engineer handoff — READY FOR TEST

    Reworked the dashboard Daily Queue so each row shows status + exactly one primary next-action button, removing the embedded completion editor and raw required-link/file inputs from the row (proof editing now routes to the task/workflow-detail surface).

    Approach

    • renderDashboardTaskTable: dropped the Required Proof column and the inline completion-proof / skip-closure / required-link / required-file editors. Each row now renders a single renderDashboardNextAction button.
    • Next-action mapping (new helpers renderDashboardNextAction, dashboardMissingProofActionLabel, dashboardTaskDeepLink):
      • waiting -> Follow up (scrolls to the existing full-width follow-up controls row, which is retained unchanged).
      • missing proof -> Add link / Add file / Add evidence (anchor deep-linking to the bundle workflow when the task has a bundle, else the task detail; completion stays blocked there).
      • ready, no missing proof -> Complete (completes in place; the status checkbox is also retained).
      • Open workflow fallback / done.
    • Intake follow-up rows keep their Open intake action.
    • Removed the now-dead dashboard event bindings (required-link/bundle-link save, file upload, save-completion-proof); added data-complete-task and data-dashboard-follow-up handlers. The workflow-detail (buildTaskRow) and task-list surfaces are unchanged and still host the editors.
    • CSS: #dashboard-tasks grid reduced 7->6 columns with a wider Next Action track; added .task-next-action button styling (nowrap, no truncation).

    Changed files

    • backend/src/public/app.js
    • backend/src/pages/index.html
    • backend/e2e/home-dashboard.spec.js (updated the 5 dashboard proof-editor specs to the new route-to-detail interaction, added a Complete-button spec, updated the layout spec to assert no embedded editors + no next-action truncation; removed the now-obsolete inline-save helpers)

    Tests (from backend/)

    • npm run typecheck — exit 0.
    • npm test — 1109 passed / 0 failed (160 suites).
    • npx playwright test home-dashboard follow-up-actions — 39 passed / 0 failed (home-dashboard 38 + follow-up-actions 1).

    Port guard applied: verified ports 3000/3001 free before each dev/Playwright run; waited ~30s for the shared 3001 e2e server to free up (the #104 worktree was using it) before the screenshot run.

    Screenshots (.tmp/screenshots/ux-audit/)

    • issue-103-daily-queue-1280.png — populated queue at 1280px: one button per row (Follow up / Add link / Add evidence / Complete), no inline editor, no URL inputs, no mid-word truncation; the waiting row keeps its full-width follow-up controls.
    • issue-103-daily-queue-390.png — mobile cards each show a single Next Action button; layout stacks cleanly, no truncation/overflow.

    Acceptance criteria

    • One primary next-action button per row, no inline completion editor / URL / file inputs — verified (screenshots + expectSingleQueueNextAction asserts 0 inline editors).
    • Button reflects state (Complete / Add link / Add evidence / Follow up / Open workflow) — verified per-state in specs + screenshot.
    • Ready task completes from the dashboard row — new Complete button spec + retained checkbox.
    • Missing-proof routes to detail, no inline editing, completion stays blocked — specs assert navigate href + editor available in detail + disabled checkbox.
    • No mid-word truncation at 1280px — 1280px screenshot + layout spec scrollWidth <= clientWidth check on .task-next-action.
    • Waiting/follow-up rows still expose follow-up actions; follow-up-actions.spec.js passes.
    • Intake follow-up rows keep "Open intake" — code path unchanged; exercised by existing intake specs.

    Notes

    • Ad-hoc (bundle-less) file-proof tasks: the task-list detail surface has no file uploader (only bundle detail / the removed dashboard editor did), so the file-proof spec uses a bundle-backed task that deep-links into the bundle workflow where the uploader lives. This keeps within the issue's "routing change only" scope; a task-list file uploader would be a separate enhancement.
    • No commit/push per process — awaiting Tester + PM acceptance.
  3. alexeygrigorev commented on Jul 2, 2026

    @alexeygrigorev
    MemberAuthor

    Tester verdict — TEST PASS

    Verified the uncommitted implementation in the main checkout (backend/src/public/app.js, backend/src/pages/index.html, backend/e2e/home-dashboard.spec.js). All commands run from backend/.

    Commands & results

    Check Command Result
    Typecheck npm run typecheck exit 0
    Unit npm test 1109 pass / 0 fail (160 suites), exit 0
    E2E queue+follow-up npx playwright test home-dashboard follow-up-actions 39 passed / 0 failed, exit 0
    E2E detail surface npx playwright test bundle-detail 16 passed / 0 failed (incl. missing-proof completion at :753), exit 0

    No reruns needed; zero flakes observed. Port guard applied: confirmed 3000/3001 == 000 before each Playwright run; used PORT=3020 for manual screenshots (Playwright server fixed at 3001).

    Screenshots (read at full resolution)

    • .tmp/screenshots/issue-103-daily-queue-1280.png — populated queue (Newsletter template workflow + ad-hoc waiting/ready/missing-proof tasks). Each row shows exactly one Next Action button; no inline completion note, "What changed" input, "Close as" dropdown, "Save evidence" button, or raw URL/file inputs.
    • Full-res crops (crop-nextaction-top/mid, crop-bottom, crop-atrisk) confirm every label renders complete: Follow up / Add link / Add file / Add evidence / Complete (green) — no mid-word truncation (the original "What chang"/"Choose rea" bug is gone).
    • .tmp/screenshots/issue-103-daily-queue-390.png — mobile cards each show a single Next Action button; waiting card keeps the full-width follow-up controls (Response received / Follow-up sent / Resolve done); no overflow/truncation.

    Acceptance criteria

    1. One next-action button per row, no inline editor/URL/file inputs — PASS (screenshots + expectSingleQueueNextAction asserts 0 of each editor selector).
    2. Button reflects state (Complete / Add link / Add evidence / Follow up / Open workflow) — PASS (per-state specs + screenshots).
    3. Ready task completes in place from the dashboard row — PASS (Dashboard ready task completes in place via the Complete button :967; checkbox retained).
    4. Missing-proof routes to detail; no inline editing; completion stays blocked — PASS (comment/external-status/file/required-link specs assert deep-link href + editor visible only in detail + disabled checkbox; bundle-detail :753 confirms detail-surface completion after proof).
    5. No mid-word truncation at 1280px — PASS (full-res crops + layout spec scrollWidth <= clientWidth+1 on .task-next-action).
    6. Waiting/follow-up rows still expose follow-up actions — PASS (follow-up-actions.spec.js in the 39; Follow up button scrolls to retained full-width controls, visible in both screenshots).
    7. Intake follow-up rows keep "Open intake" — PASS (code path unchanged; existing intake specs cover it).

    No scope drift: presentation/routing change only; no API/gating changes. The previously-flaky dashboard-evidence specs are now deterministic route-to-detail assertions.

    Verdict: TEST PASS.

  4. alexeygrigorev commented on Jul 2, 2026

    @alexeygrigorev
    MemberAuthor

    PM acceptance — ACCEPTED

    Reviewed the uncommitted implementation in the main checkout (backend/src/public/app.js, backend/src/pages/index.html, backend/e2e/home-dashboard.spec.js) against the groomed AC and JTBD 1 / Dashboard-screen spec in docs/operations-manager-platform-jtbd.md. Read the Tester's screenshots at full resolution.

    Operator-perspective verdict

    Each Daily Queue row now surfaces the correct single next-required-click for its state, and it is clearly better than the old embedded editor.

    • One button per row, no embedded editor — verified in the 1280px screenshot and crops: rows show exactly one action (Follow up / Add link / Add file / Add evidence / Complete). No completion note, "What changed" input, "Close as" dropdown, "Save evidence" button, or raw URL/file inputs render inline. The old mid-word truncation ("What chang", "Choose rea", "Status from") is gone; every label renders in full at 1280px, and the layout spec enforces scrollWidth <= clientWidth+1 on .task-next-action.
    • State-correct next action — renderDashboardNextAction: waiting -> Follow up, missing proof -> Add link/file/evidence (or Open workflow), ready -> Complete, done -> Open workflow. Confirmed per-state in specs and the screenshot.
    • Ready completes in place — Complete button (data-complete-task) plus the retained status checkbox; new Complete spec passes.
    • Missing-proof routes coherently, completion stays blocked — the next action is a deep-link (#/bundles?...taskId= when the task has a bundle, else #/tasks?...taskId=), and it is not a dead-end: buildTaskRow on the detail surface renders the required-link input, the file uploader, and the completion-proof/skip-closure controls, and the dashboard checkbox is disabled with the missing-proof reason shown inline. bundle-detail.spec.js:753 confirms detail-surface completion after proof.
    • Follow-up + intake preserved — waiting rows keep the full-width follow-up controls (Response received / Follow-up sent / Resolve done); the "Follow up" button scrolls to and focuses them. Intake rows keep "Open intake". No mobile overflow/truncation at 390px.

    Scope / evidence

    • Presentation + routing change only; no task/bundle API, DynamoDB, or proof-gating changes. No drift from the groomed issue.
    • The one documented edge case (a bundle-less ad-hoc file-proof task whose requirement comes from a proof.type==='file' object rather than the requiresFile flag would land on a task-detail without an uploader) is narrow, is explicitly out-of-scope per this issue ("a task-list file uploader would be a separate enhancement"), and the common requiresFile ad-hoc case still gets an uploader in task detail. Not a blocker; fine as a separate follow-up if it ever surfaces in practice.
    • Tester ran the full workflow with screenshots: typecheck exit 0, unit 1109/1109, e2e home-dashboard+follow-up 39/39 and bundle-detail 16/16, no flakes.

    All acceptance criteria met. Cleared to commit with Closes #103.

  5. added a commit that references this issue on Aug 14, 2026
    796695d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1ImportantdesignDesign and UXenhancementNew or improved functionalityfrontendFrontend UI

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions