José Almeida
98 lines
3.9 KiB
Markdown
98 lines
3.9 KiB
Markdown
---
|
|
id: "03-visible-queue-removal-ui"
|
|
title: "Expose removal for every visible queue row"
|
|
status: completed
|
|
wave: 3
|
|
depends_on: ["01-authoritative-queue-cancellation"]
|
|
plan: "plan.md"
|
|
spec: "../../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
|
|
|
|
```bash
|
|
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.
|