fix(ui): surface pending permission and question interruptions

packages/ui/src/components/instance/instance-shell2.tsx

@@ -340,10 +340,13 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return t("instanceShell.connection.unknown")
   }
 
-  const hasPendingRequests = createMemo(() => {
+  const pendingRequestCount = createMemo(() => {
     const permissions = getPermissionQueueLength(props.instance.id)
     const questions = getQuestionQueueLength(props.instance.id)
-    return permissions + questions > 0
+    return permissions + questions
+  })
+  const hasPendingRequests = createMemo(() => {
+    return pendingRequestCount() > 0
   })
 
   const activePromptInputApi = createMemo(() => {

packages/ui/src/components/permission-approval-modal.tsx

@@ -375,23 +375,23 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                                       <button
                                         type="button"
                                         class="tool-call-permission-button"
-                                        disabled={permissionSubmitting().has(item.id)}
+                                        disabled={!isActive() || permissionSubmitting().has(item.id)}
                                         onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "once")}
                                       >
                                         {t("permissionApproval.actions.allowOnce")}
                                       </button>
                                       <button
                                         type="button"
                                         class="tool-call-permission-button"
-                                        disabled={permissionSubmitting().has(item.id)}
+                                        disabled={!isActive() || permissionSubmitting().has(item.id)}
                                         onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "always")}
                                       >
                                         {t("permissionApproval.actions.alwaysAllow")}
                                       </button>
                                       <button
                                         type="button"
                                         class="tool-call-permission-button"
-                                        disabled={permissionSubmitting().has(item.id)}
+                                        disabled={!isActive() || permissionSubmitting().has(item.id)}
                                         onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "reject")}
                                       >
                                         {t("permissionApproval.actions.deny")}

packages/ui/src/components/tool-call/permission-block.tsx

@@ -81,23 +81,23 @@ export function PermissionToolBlock(props: PermissionToolBlockProps) {
                 <button
                   type="button"
                   class="tool-call-permission-button"
-                  disabled={props.submitting()}
+                  disabled={!props.active() || props.submitting()}
                   onClick={() => respond("once")}
                 >
                   {t("toolCall.permission.actions.allowOnce")}
                 </button>
                 <button
                   type="button"
                   class="tool-call-permission-button"
-                  disabled={props.submitting()}
+                  disabled={!props.active() || props.submitting()}
                   onClick={() => respond("always")}
                 >
                   {t("toolCall.permission.actions.alwaysAllow")}
                 </button>
                 <button
                   type="button"
                   class="tool-call-permission-button"
-                  disabled={props.submitting()}
+                  disabled={!props.active() || props.submitting()}
                   onClick={() => respond("reject")}
                 >
                   {t("toolCall.permission.actions.deny")}

packages/ui/src/stores/message-v2/instance-store.test.ts

@@ -35,3 +35,36 @@ describe("message-v2 permission state", () => {
     assert.equal(store.getPermissionState(undefined, "permission-2")?.active, true)
   })
 })
+
+describe("message-v2 question state", () => {
+  it("keeps one question attachment when a duplicate moves from global to a tool part", () => {
+    const store = createInstanceMessageStore("instance-1")
+
+    store.upsertQuestion({
+      request: { id: "question-1", questions: [] } as any,
+      enqueuedAt: 1_000,
+    })
+    store.upsertQuestion({
+      request: { id: "question-1", questions: [] } as any,
+      messageId: "message-1",
+      partId: "part-1",
+      enqueuedAt: 2_000,
+    })
+
+    assert.equal(store.state.questions.queue.length, 1)
+    assert.equal(store.getQuestionState(undefined, "question-1"), null)
+    assert.equal(store.getQuestionState("message-1", "part-1")?.entry.request.id, "question-1")
+    assert.equal(store.getQuestionState("message-1", "part-1")?.active, true)
+  })
+
+  it("uses enqueue time when recalculating the active question", () => {
+    const store = createInstanceMessageStore("instance-1")
+
+    store.upsertQuestion({ request: { id: "question-2", questions: [] } as any, enqueuedAt: 2_000 })
+    store.upsertQuestion({ request: { id: "question-1", questions: [] } as any, enqueuedAt: 1_000 })
+
+    assert.equal(store.state.questions.active?.request.id, "question-1")
+    assert.equal(store.getQuestionState(undefined, "question-1")?.active, true)
+    assert.equal(store.getQuestionState(undefined, "question-2")?.active, false)
+  })
+})

packages/ui/src/stores/message-v2/instance-store.ts

@@ -990,6 +990,17 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
     setState(
       "questions",
       produce((draft) => {
+        Object.keys(draft.byMessage).forEach((existingMessageKey) => {
+          const partEntries = draft.byMessage[existingMessageKey]
+          Object.keys(partEntries).forEach((existingPartKey) => {
+            if (partEntries[existingPartKey].request.id === entry.request.id) {
+              delete partEntries[existingPartKey]
+            }
+          })
+          if (Object.keys(partEntries).length === 0) {
+            delete draft.byMessage[existingMessageKey]
+          }
+        })
         draft.byMessage[messageKey] = draft.byMessage[messageKey] ?? {}
         draft.byMessage[messageKey][partKey] = entry
         const existingIndex = draft.queue.findIndex((item) => item.request.id === entry.request.id)
@@ -998,9 +1009,8 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
         } else {
           draft.queue[existingIndex] = entry
         }
-        if (!draft.active || draft.active.request.id === entry.request.id) {
-          draft.active = entry
-        }
+        draft.queue.sort((left, right) => left.enqueuedAt - right.enqueuedAt)
+        draft.active = draft.queue[0] ?? null
       }),
     )
   }