🤖 feat: improve ask_user_question UX with summary page and sidebar indicators

- Add Summary tab showing all Q&A with status, allowing partial submissions
- Stop sidebar shimmer/pulse when awaiting user input
- Show "Mux has a few questions" prominent indicator in sidebar
- Update bottom bar to show "Awaiting your input..." instead of streaming
- Improve tab contrast: green tint for answered questions
- Add Next button to navigate between questions
- Display completed answers vertically with bullet points

_Generated with `mux`_

Change-Id: I8142e99ba39d3237ce5dc5e5d86675c240f8a2cf
Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/browser/components/AIView.tsx

@@ -160,7 +160,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
   useEffect(() => {
     workspaceStateRef.current = workspaceState;
   }, [workspaceState]);
-  const { messages, canInterrupt, isCompacting, loading, currentModel } = workspaceState;
+  const { messages, canInterrupt, isCompacting, awaitingUserQuestion, loading, currentModel } =
+    workspaceState;
 
   // Apply message transformations:
   // 1. Merge consecutive identical stream errors
@@ -670,24 +671,34 @@ const AIViewInner: React.FC<AIViewProps> = ({
               {canInterrupt && (
                 <StreamingBarrier
                   statusText={
-                    isCompacting
-                      ? currentModel
-                        ? `${getModelName(currentModel)} compacting...`
-                        : "compacting..."
-                      : currentModel
-                        ? `${getModelName(currentModel)} streaming...`
-                        : "streaming..."
+                    awaitingUserQuestion
+                      ? "Awaiting your input..."
+                      : isCompacting
+                        ? currentModel
+                          ? `${getModelName(currentModel)} compacting...`
+                          : "compacting..."
+                        : currentModel
+                          ? `${getModelName(currentModel)} streaming...`
+                          : "streaming..."
+                  }
+                  cancelText={
+                    awaitingUserQuestion
+                      ? "type a message to respond"
+                      : `hit ${formatKeybind(vimEnabled ? KEYBINDS.INTERRUPT_STREAM_VIM : KEYBINDS.INTERRUPT_STREAM_NORMAL)} to cancel`
                   }
-                  cancelText={`hit ${formatKeybind(vimEnabled ? KEYBINDS.INTERRUPT_STREAM_VIM : KEYBINDS.INTERRUPT_STREAM_NORMAL)} to cancel`}
                   tokenCount={
-                    activeStreamMessageId
-                      ? aggregator?.getStreamingTokenCount(activeStreamMessageId)
-                      : undefined
+                    awaitingUserQuestion
+                      ? undefined
+                      : activeStreamMessageId
+                        ? aggregator?.getStreamingTokenCount(activeStreamMessageId)
+                        : undefined
                   }
                   tps={
-                    activeStreamMessageId
-                      ? aggregator?.getStreamingTPS(activeStreamMessageId)
-                      : undefined
+                    awaitingUserQuestion
+                      ? undefined
+                      : activeStreamMessageId
+                        ? aggregator?.getStreamingTPS(activeStreamMessageId)
+                        : undefined
                   }
                 />
               )}

src/browser/components/WorkspaceListItem.tsx

@@ -99,7 +99,8 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
     }
   };
 
-  const { canInterrupt } = useWorkspaceSidebarState(workspaceId);
+  const { canInterrupt, awaitingUserQuestion } = useWorkspaceSidebarState(workspaceId);
+  const isWorking = canInterrupt && !awaitingUserQuestion;
 
   return (
     <React.Fragment>
@@ -167,7 +168,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
                 <TooltipContent align="start">Remove workspace</TooltipContent>
               </Tooltip>
             )}
-            <RuntimeBadge runtimeConfig={metadata.runtimeConfig} isWorking={canInterrupt} />
+            <RuntimeBadge runtimeConfig={metadata.runtimeConfig} isWorking={isWorking} />
             {isEditing ? (
               <input
                 className="bg-input-bg text-input-text border-input-border font-inherit focus:border-input-border-focus col-span-2 min-w-0 flex-1 rounded-sm border px-1 text-left text-[13px] outline-none"
@@ -195,7 +196,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
                     }}
                     title={isDisabled ? undefined : "Double-click to edit title"}
                   >
-                    {canInterrupt || isCreating ? (
+                    {isWorking || isCreating ? (
                       <Shimmer className="w-full truncate" colorClass="var(--color-foreground)">
                         {displayTitle}
                       </Shimmer>
@@ -213,7 +214,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
                 gitStatus={gitStatus}
                 workspaceId={workspaceId}
                 tooltipPosition="right"
-                isWorking={canInterrupt}
+                isWorking={isWorking}
               />
             )}
           </div>

src/browser/components/WorkspaceStatusDot.tsx

@@ -11,10 +11,10 @@ export const WorkspaceStatusDot = memo<{
   size?: number;
 }>(
   ({ workspaceId, lastReadTimestamp, onClick, size = 8 }) => {
-    const { canInterrupt, currentModel, agentStatus, recencyTimestamp } =
+    const { canInterrupt, awaitingUserQuestion, currentModel, agentStatus, recencyTimestamp } =
       useWorkspaceSidebarState(workspaceId);
 
-    const streaming = canInterrupt;
+    const streaming = canInterrupt && !awaitingUserQuestion;
 
     // Compute unread status if lastReadTimestamp provided (sidebar only)
     const unread = useMemo(() => {
@@ -27,12 +27,13 @@ export const WorkspaceStatusDot = memo<{
       () =>
         getStatusTooltip({
           isStreaming: streaming,
+          isAwaitingInput: awaitingUserQuestion,
           streamingModel: currentModel,
           agentStatus,
           isUnread: unread,
           recencyTimestamp,
         }),
-      [streaming, currentModel, agentStatus, unread, recencyTimestamp]
+      [streaming, awaitingUserQuestion, currentModel, agentStatus, unread, recencyTimestamp]
     );
 
     const bgColor = canInterrupt ? "bg-blue-400" : unread ? "bg-gray-300" : "bg-muted-dark";

src/browser/components/WorkspaceStatusIndicator.tsx

@@ -5,7 +5,17 @@ import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import { Button } from "./ui/button";
 
 export const WorkspaceStatusIndicator = memo<{ workspaceId: string }>(({ workspaceId }) => {
-  const { agentStatus } = useWorkspaceSidebarState(workspaceId);
+  const { agentStatus, awaitingUserQuestion } = useWorkspaceSidebarState(workspaceId);
+
+  // Show prompt when ask_user_question is pending - make it prominent
+  if (awaitingUserQuestion) {
+    return (
+      <div className="flex min-w-0 items-center gap-1.5 rounded bg-yellow-500/20 px-1.5 py-0.5 text-xs text-yellow-400">
+        <span className="-mt-0.5 shrink-0 text-[10px]">❓</span>
+        <span className="min-w-0 truncate font-medium">Mux has a few questions</span>
+      </div>
+    );
+  }
 
   if (!agentStatus) {
     return null;