Improve chat-input queue UI and add follow-up placeholder

[Bl3f]

Summary

Improves the chat input message queue interface with a cleaner, more functional design and adds a contextual placeholder when the agent is running.

Changes

Queue UI redesign (chat-input-message-queue.tsx):

• Added a collapsible header showing the queued message count (e.g., "1 Queued") with a chevron toggle
• Each queued message row now shows a clickable ↵ to submit button that gracefully stops the current stream and immediately sends the queued message
• On hover, action buttons appear: edit (pencil) and delete (trash)
• Edit removes the message from the queue and places its text back into the chat input for editing
• Extracted SortableQueuedMessageRow as a dedicated component
• Fixed overlap between queue panel and chat input by adding pb-5 to the outer container to compensate for the -mb-4 negative margin

Drag-and-drop reordering (chat-input-message-queue.tsx):

• Installed @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities
• Added a GripVertical drag handle for reordering queued messages (visible when 2+ messages are queued)
• Sortable rows with visual feedback (opacity change while dragging, grab/grabbing cursors)
• Keyboard-accessible reordering via KeyboardSensor

Submit now / takeover (use-agent.ts):

• Added submitQueuedMessageNow to AgentHelpers — promotes the message to front of queue, sets a force flag, and stops the agent
• Modified onFinish handler to process the queue even on abort when the force flag is set, enabling graceful takeover of the current stream

Follow-up placeholder (chat-input.tsx):

• When the agent is running and queueing is enabled, the input placeholder changes from "Ask anything about your data..." to "Add a follow-up..." so users understand they can queue additional messages

Store enhancement (chat-message-queue.ts):

• Added reorder method for index-based drag-and-drop moves
• Added promoteToFront method used by the submit-now takeover flow

  

[github-actions]

🚀 Preview Deployment

URL	https://pr-495-d912c0b.preview.getnao.io
Commit	d912c0b

⚠️ No LLM API keys configured - you'll see the API key setup flow when trying to chat.

---

_{Preview will be automatically removed when this PR is closed.}

[cubic-dev-ai]

1 issue found across 3 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/frontend/src/components/chat-input-message-queue.tsx">

<violation number="1" location="apps/frontend/src/components/chat-input-message-queue.tsx:136">
P2: `↵ to submit` is now rendered as a non-interactive `<span>`, and the actual submit control is hover-only. This makes submit-now harder or impossible to access on non-hover interactions.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: ↵ to submit is now rendered as a non-interactive <span>, and the actual submit control is hover-only. This makes submit-now harder or impossible to access on non-hover interactions.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/frontend/src/components/chat-input-message-queue.tsx, line 136:

<comment>`↵ to submit` is now rendered as a non-interactive `<span>`, and the actual submit control is hover-only. This makes submit-now harder or impossible to access on non-hover interactions.</comment>

<file context>
@@ -132,16 +132,17 @@ function SortableQueuedMessageRow({
-					<span>to submit</span>
-				</button>
+				{isFirst && (
+					<span className='group-hover:hidden flex items-center gap-1 text-xs text-muted-foreground/50'>
+						<CornerDownLeft className='size-3' />
+						<span>to submit</span>
</file context>

Suggested change

	<span className='group-hover:hidden flex items-center gap-1 text-xs text-muted-foreground/50'>
	<CornerDownLeft className='size-3' />
	<span>to submit</span>
	</span>
	<button
	type='button'
	onClick={() => onSubmitNow?.(messageId)}
	className='group-hover:hidden flex items-center gap-1 text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors cursor-pointer'
	>
	<CornerDownLeft className='size-3' />
	<span>to submit</span>
	</button>