Files
fusion/packages/dashboard/app/components/PendingChatMessageQueue.css
Fusion Agent 21b3baa62d FN-029: unify direct and planner chat queues
Standardize queued-message controls across Direct Chat and planner conversations while preserving force-send ordering during cancellation reconciliation.

- Add shared pending-message queue UI with edit, reorder, delete, and force-send actions.
- Coordinate durable cancellation reconciliation before dispatching selected queued messages.
- Disable the Direct composer and related controls until force-send reconciliation completes.
- Add localized queue copy, documentation, styling, and regression coverage.

Files changed:
 docs/dashboard-guide.md                            |   8 +
 packages/dashboard/app/components/ChatView.css     |  63 ------
 packages/dashboard/app/components/ChatView.tsx     |  55 +++--
 packages/dashboard/app/components/PendingChatMessageQueue.css     |  94 +++++++++
 packages/dashboard/app/components/PendingChatMessageQueue.tsx     | 200 ++++++++++++++++++
 packages/dashboard/app/components/TaskPlannerChatTab.css          |  84 --------
 packages/dashboard/app/components/TaskPlannerChatTab.tsx          | 113 ++---------
 packages/dashboard/app/components/__tests__/ChatView.core-interactions.test.tsx |  24 ++-
 packages/dashboard/app/components/__tests__/PendingChatMessageQueue.test.tsx   |  76 +++++++
 packages/dashboard/app/hooks/__tests__/useChat.test.ts            |  39 +++
 packages/dashboard/app/hooks/useChat.ts                           | 224 ++++++++++++++++-----
 packages/i18n/locales/en/app.json                                 |  25 +--
 packages/i18n/locales/es/app.json                                 |  25 +--
 packages/i18n/locales/fr/app.json                                 |  25 +--
 packages/i18n/locales/ko/app.json                                 |  25 +--
 packages/i18n/locales/pt-BR/app.json                              |  25 +--
 packages/i18n/locales/zh-CN/app.json                              |  25 +--
 packages/i18n/locales/zh-TW/app.json                              |  25 +--
 packages/i18n/src/resources.d.ts                                  |  25 +--
 19 files changed, 746 insertions(+), 434 deletions(-)

Fusion-Task-Id: FN-029

Fusion-Task-Lineage: 3330d0e7-ba77-4392-98f7-69425070cfd1

Co-authored-by: Fusion <noreply@runfusion.ai>
2026-08-20 03:55:39 +00:00

95 lines
1.9 KiB
CSS

/*
FNXC:ChatPendingQueue 2026-08-19-05:47:
The shared queue keeps the existing above-composer hierarchy while using dashboard tokens so Direct
and Planner hosts remain touch-safe at narrow widths without retaining two queue style systems.
*/
.pending-chat-message-queue {
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
width: 100%;
}
.pending-chat-message-queue-divider {
width: 100%;
border-top: var(--btn-border-width) solid var(--border);
}
.pending-chat-message-queue-heading {
margin: 0;
color: var(--text-muted);
font-size: var(--font-size-sm);
font-weight: 600;
}
.pending-chat-message-queue-items {
display: flex;
flex-direction: column;
gap: var(--space-xs);
max-height: calc(var(--space-xl) * 6);
margin: 0;
padding-inline-start: var(--space-lg);
overflow-y: auto;
}
.pending-chat-message-queue-item {
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
color: var(--text);
}
.pending-chat-message-queue-text {
min-width: 0;
flex: 1 1 auto;
overflow-wrap: anywhere;
}
.pending-chat-message-queue-edit-input {
min-width: 0;
flex: 1 1 auto;
padding: var(--space-xs) var(--space-sm);
}
.pending-chat-message-queue-actions {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
}
.pending-chat-message-queue-actions .btn-icon {
flex: 0 0 auto;
}
.pending-chat-message-queue-force {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.pending-chat-message-queue-error {
flex-basis: 100%;
color: var(--color-error);
font-size: var(--font-size-xs);
}
@media (max-width: 768px) {
.pending-chat-message-queue-items {
max-height: calc(var(--space-xl) * 5);
}
.pending-chat-message-queue-item {
align-items: flex-start;
flex-direction: column;
}
.pending-chat-message-queue-actions {
width: 100%;
}
}