kandev/docs/plans/message-queue-management/task-03-visible-queue-removal-ui.md

id, title, status, wave, depends_on, plan, spec

id	title	status	wave	depends_on	plan	spec
03-visible-queue-removal-ui	Expose removal for every visible queue row	completed	3	01-authoritative-queue-cancellation	plan.md	../../specs/ui/message-queue-management.md

Task 03: Expose Removal for Every Visible Queue Row

Acceptance

• User, agent, workflow, and server rows all render an individual Remove action; only user rows render Edit.
• Existing merge eligibility and sender-provenance rendering remain unchanged.
• Clear-all and individual removal reconcile to authoritative queue status on success, race, and error; localized feedback replaces stale optimistic state.
• Visible positions compact to #1 through #N after remove, merge, or drain, even when durable FIFO position keys retain gaps.
• On coarse-pointer/mobile viewports, queue actions are always visible and expose at least 44px hit areas. Desktop keeps compact hover behavior.
• The queue keeps one internal scroll region and never pushes the composer off the phone viewport.

TDD Sequence

1. Add component tests proving canRemove is independent from canEdit for each provenance kind. Add hook tests for clear/remove success and refetch on failure. Run RED.
2. Split the row-action props and render Remove outside the edit-only branch.
3. Update clear/remove reconciliation and localize all newly touched queue labels, titles, and errors.
4. Add coarse-pointer responsive classes and focused assertions for visible 44px controls without changing the queue scroll owner.
5. Run focused unit tests, typecheck, lint, and i18n checks GREEN.

Verification

cd apps
pnpm --filter @kandev/web exec vitest run \
  components/task/chat/queued-ghost-list.test.tsx \
  components/task/chat/queued-ghost-message.test.tsx \
  hooks/domains/session/use-queue.test.ts
pnpm --filter @kandev/web run typecheck
pnpm --filter @kandev/web run lint
pnpm --filter @kandev/web run i18n:check
pnpm --filter @kandev/web run i18n:ratchet

Files Likely Touched

• apps/web/components/task/chat/queued-ghost-list.tsx
• apps/web/components/task/chat/queued-ghost-list.test.tsx
• apps/web/components/task/chat/queued-ghost-message.tsx
• apps/web/components/task/chat/queued-ghost-message.test.tsx
• apps/web/hooks/domains/session/use-queue.ts
• apps/web/hooks/domains/session/use-queue.test.ts
• apps/web/src/locales/en/chat.json
• generated pseudo-locale catalog

Dependencies

Task 01 supplies the backend behavior this UI exposes.

Parallelism

Parallel-safe with Task 04 after backend dependencies. They touch separate components, API domains, and translation namespaces. No subagent is authorized by this task file.

Output Contract

Report RED/GREEN unit evidence, provenance matrix, mobile hit-area result, typecheck/lint/i18n status, changed files, and residual UX risks. Update this task and plan.md status in the same implementation conversation.

Results

• RED: the focused component/hook suite failed 9 tests because removal was coupled to editability, coarse-pointer hit-area classes were absent, and clear/remove skipped authoritative reconciliation paths.
• GREEN: 73 focused tests pass across queued-ghost-list, queued-ghost-message, and use-queue.
• User, agent, workflow, and server rows expose Remove; only queued_by=user exposes Edit. Existing merge eligibility is unchanged.
• Clear and Remove refetch authoritative status after success, drain races, and failures; non-race failures restore state and surface localized errors.
• Desktop row controls remain 24px hover actions. Coarse-pointer controls are always visible with 44px hit areas; the existing queue list remains the one panel scroll owner.
• GREEN: web typecheck, lint, i18n:check, and i18n:ratchet.
• Follow-up RED/GREEN: a sparse-position render failed with #1, #3; the queue panel now derives display ordinals from rendered order and shows #1, #2 without mutating durable FIFO keys.