feat(ai): run agent sessions as background tasks

apps/desktop/src/components/layout/AiRunsClosePromptDialog.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+defineProps<{ count: number }>();
+const open = defineModel<boolean>("open", { required: true });
+const emit = defineEmits<{ cancel: []; quit: [] }>();
+const { t } = useI18n();
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-[440px]" @interact-outside.prevent>
+      <DialogHeader>
+        <DialogTitle>{{ t("ai.closeWithRunsTitle") }}</DialogTitle>
+        <DialogDescription>{{ t("ai.closeWithRunsDescription", { count }) }}</DialogDescription>
+      </DialogHeader>
+      <DialogFooter class="gap-2 sm:gap-2">
+        <Button type="button" variant="outline" @click="emit('cancel')">{{ t("common.cancel") }}</Button>
+        <Button type="button" variant="destructive" @click="emit('quit')">{{ t("ai.closeWithRunsQuit") }}</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

apps/desktop/src/components/layout/AppToolbar.vue

@@ -27,6 +27,10 @@ const props = defineProps<{
   isDark: boolean;
   themeMode: AppThemeMode;
   showAiPanel: boolean;
+  activeAiRunCount: number;
+  /** Runs awaiting a write confirmation; the badge turns amber to outrank the
+   *  plain active count (parent PRD §4 line 71). */
+  awaitingAiRunCount: number;
   showHistory: boolean;
   showSqlLibrary: boolean;
   sqlLibrarySaveFeedbackId: number;
@@ -642,8 +646,19 @@ const toolbarStyle = computed(() => {
 
       <Tooltip v-if="toolbarItems.ai">
         <TooltipTrigger as-child>
-          <Button v-show="isRightItemVisible('ai')" variant="ghost" size="icon" class="h-8 w-8 shrink-0" :class="{ 'bg-accent': showAiPanel }" @click="emit('toggle-ai')">
+          <Button v-show="isRightItemVisible('ai')" variant="ghost" size="icon" class="relative h-8 w-8 shrink-0" :class="{ 'bg-accent': showAiPanel }" @click="emit('toggle-ai')">
             <Bot class="h-4 w-4" />
+            <span
+              v-if="awaitingAiRunCount > 0"
+              class="absolute right-0.5 top-0.5 flex h-3 min-w-3 items-center justify-center rounded-full bg-amber-500 px-0.5 text-[8px] font-semibold leading-none text-white"
+              :aria-label="t('ai.toolbarAwaitingConfirmation', { count: awaitingAiRunCount })"
+              :title="t('ai.toolbarAwaitingConfirmation', { count: awaitingAiRunCount })"
+            >
+              {{ awaitingAiRunCount > 9 ? "9+" : awaitingAiRunCount }}
+            </span>
+            <span v-else-if="activeAiRunCount > 0" class="absolute right-0.5 top-0.5 flex h-3 min-w-3 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-semibold leading-none text-primary-foreground">
+              {{ activeAiRunCount > 9 ? "9+" : activeAiRunCount }}
+            </span>
           </Button>
         </TooltipTrigger>
         <TooltipContent>AI</TooltipContent>