adding a queue system to the agent runner

apps/ui/src/components/views/agent-view.tsx

@@ -18,6 +18,7 @@ import {
   ChevronDown,
   FileText,
   Square,
+  ListOrdered,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useElectronAgent } from '@/hooks/use-electron-agent';
@@ -86,6 +87,10 @@ export function AgentView() {
     clearHistory,
     stopExecution,
     error: agentError,
+    serverQueue,
+    addToServerQueue,
+    removeFromServerQueue,
+    clearServerQueue,
   } = useElectronAgent({
     sessionId: currentSessionId || '',
     workingDirectory: currentProject?.path,
@@ -134,11 +139,7 @@ export function AgentView() {
   }, [currentProject?.path]);
 
   const handleSend = useCallback(async () => {
-    if (
-      (!input.trim() && selectedImages.length === 0 && selectedTextFiles.length === 0) ||
-      isProcessing
-    )
-      return;
+    if (!input.trim() && selectedImages.length === 0 && selectedTextFiles.length === 0) return;
 
     const messageContent = input;
     const messageImages = selectedImages;
@@ -149,8 +150,13 @@ export function AgentView() {
     setSelectedTextFiles([]);
     setShowImageDropZone(false);
 
-    await sendMessage(messageContent, messageImages, messageTextFiles);
-  }, [input, selectedImages, selectedTextFiles, isProcessing, sendMessage]);
+    // If already processing, add to server queue instead
+    if (isProcessing) {
+      await addToServerQueue(messageContent, messageImages, messageTextFiles);
+    } else {
+      await sendMessage(messageContent, messageImages, messageTextFiles);
+    }
+  }, [input, selectedImages, selectedTextFiles, isProcessing, sendMessage, addToServerQueue]);
 
   const handleImagesSelected = useCallback((images: ImageAttachment[]) => {
     setSelectedImages(images);
@@ -536,41 +542,6 @@ export function AgentView() {
 
           {/* Status indicators & actions */}
           <div className="flex items-center gap-3">
-            {/* Model Selector */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-8 gap-1.5 text-xs font-medium"
-                  disabled={isProcessing}
-                  data-testid="model-selector"
-                >
-                  <Bot className="w-3.5 h-3.5" />
-                  {CLAUDE_MODELS.find((m) => m.id === selectedModel)?.label.replace(
-                    'Claude ',
-                    ''
-                  ) || 'Sonnet'}
-                  <ChevronDown className="w-3 h-3 opacity-50" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                {CLAUDE_MODELS.map((model) => (
-                  <DropdownMenuItem
-                    key={model.id}
-                    onClick={() => setSelectedModel(model.id)}
-                    className={cn('cursor-pointer', selectedModel === model.id && 'bg-accent')}
-                    data-testid={`model-option-${model.id}`}
-                  >
-                    <div className="flex flex-col">
-                      <span className="font-medium">{model.label}</span>
-                      <span className="text-xs text-muted-foreground">{model.description}</span>
-                    </div>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-
             {currentTool && (
               <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full border border-border">
                 <Wrench className="w-3 h-3 text-primary" />
@@ -760,10 +731,52 @@ export function AgentView() {
                 images={selectedImages}
                 maxFiles={5}
                 className="mb-4"
-                disabled={isProcessing || !isConnected}
+                disabled={!isConnected}
               />
             )}
 
+            {/* Queued Prompts List */}
+            {serverQueue.length > 0 && (
+              <div className="mb-4 space-y-2">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    {serverQueue.length} prompt{serverQueue.length > 1 ? 's' : ''} queued
+                  </p>
+                  <button
+                    onClick={clearServerQueue}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <div className="space-y-1.5">
+                  {serverQueue.map((item, index) => (
+                    <div
+                      key={item.id}
+                      className="group flex items-center gap-2 text-sm bg-muted/50 rounded-lg px-3 py-2 border border-border"
+                    >
+                      <span className="text-xs text-muted-foreground font-medium min-w-[1.5rem]">
+                        {index + 1}.
+                      </span>
+                      <span className="flex-1 truncate text-foreground">{item.message}</span>
+                      {item.imagePaths && item.imagePaths.length > 0 && (
+                        <span className="text-xs text-muted-foreground">
+                          +{item.imagePaths.length} file{item.imagePaths.length > 1 ? 's' : ''}
+                        </span>
+                      )}
+                      <button
+                        onClick={() => removeFromServerQueue(item.id)}
+                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-destructive/10 hover:text-destructive rounded transition-all"
+                        title="Remove from queue"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
             {/* Selected Files Preview - only show when ImageDropZone is hidden to avoid duplicate display */}
             {(selectedImages.length > 0 || selectedTextFiles.length > 0) && !showImageDropZone && (
               <div className="mb-4 space-y-2">
@@ -778,7 +791,6 @@ export function AgentView() {
                       setSelectedTextFiles([]);
                     }}
                     className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-                    disabled={isProcessing}
                   >
                     Clear all
                   </button>
@@ -869,13 +881,17 @@ export function AgentView() {
                 <Input
                   ref={inputRef}
                   placeholder={
-                    isDragOver ? 'Drop your files here...' : 'Describe what you want to build...'
+                    isDragOver
+                      ? 'Drop your files here...'
+                      : isProcessing
+                        ? 'Type to queue another prompt...'
+                        : 'Describe what you want to build...'
                   }
                   value={input}
                   onChange={(e) => setInput(e.target.value)}
                   onKeyPress={handleKeyPress}
                   onPaste={handlePaste}
-                  disabled={isProcessing || !isConnected}
+                  disabled={!isConnected}
                   data-testid="agent-input"
                   className={cn(
                     'h-11 bg-background border-border rounded-xl pl-4 pr-20 text-sm transition-all',
@@ -899,12 +915,44 @@ export function AgentView() {
                 )}
               </div>
 
+              {/* Model Selector */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className="h-11 gap-1 text-xs font-medium rounded-xl border-border px-2.5"
+                    data-testid="model-selector"
+                  >
+                    {CLAUDE_MODELS.find((m) => m.id === selectedModel)?.label.replace(
+                      'Claude ',
+                      ''
+                    ) || 'Sonnet'}
+                    <ChevronDown className="w-3 h-3 opacity-50" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  {CLAUDE_MODELS.map((model) => (
+                    <DropdownMenuItem
+                      key={model.id}
+                      onClick={() => setSelectedModel(model.id)}
+                      className={cn('cursor-pointer', selectedModel === model.id && 'bg-accent')}
+                      data-testid={`model-option-${model.id}`}
+                    >
+                      <div className="flex flex-col">
+                        <span className="font-medium">{model.label}</span>
+                        <span className="text-xs text-muted-foreground">{model.description}</span>
+                      </div>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+
               {/* File Attachment Button */}
               <Button
                 variant="outline"
                 size="icon"
                 onClick={toggleImageDropZone}
-                disabled={isProcessing || !isConnected}
+                disabled={!isConnected}
                 className={cn(
                   'h-11 w-11 rounded-xl border-border',
                   showImageDropZone && 'bg-primary/10 text-primary border-primary/30',
@@ -916,8 +964,8 @@ export function AgentView() {
                 <Paperclip className="w-4 h-4" />
               </Button>
 
-              {/* Send / Stop Button */}
-              {isProcessing ? (
+              {/* Stop Button (only when processing) */}
+              {isProcessing && (
                 <Button
                   onClick={stopExecution}
                   disabled={!isConnected}
@@ -928,21 +976,24 @@ export function AgentView() {
                 >
                   <Square className="w-4 h-4 fill-current" />
                 </Button>
-              ) : (
-                <Button
-                  onClick={handleSend}
-                  disabled={
-                    (!input.trim() &&
-                      selectedImages.length === 0 &&
-                      selectedTextFiles.length === 0) ||
-                    !isConnected
-                  }
-                  className="h-11 px-4 rounded-xl"
-                  data-testid="send-message"
-                >
-                  <Send className="w-4 h-4" />
-                </Button>
               )}
+
+              {/* Send / Queue Button */}
+              <Button
+                onClick={handleSend}
+                disabled={
+                  (!input.trim() &&
+                    selectedImages.length === 0 &&
+                    selectedTextFiles.length === 0) ||
+                  !isConnected
+                }
+                className="h-11 px-4 rounded-xl"
+                variant={isProcessing ? 'outline' : 'default'}
+                data-testid="send-message"
+                title={isProcessing ? 'Add to queue' : 'Send message'}
+              >
+                {isProcessing ? <ListOrdered className="w-4 h-4" /> : <Send className="w-4 h-4" />}
+              </Button>
             </div>
 
             {/* Keyboard hint */}