@cat-factory/app 0.16.0 → 0.17.0

package/app/components/board/AddTaskModal.vue

@@ -230,6 +230,15 @@ watch(open, (isOpen) => {
   pendingContext.value = []
   showDocPicker.value = false
   showIssuePicker.value = false
+  // Seed from a prefill when opened from another surface (e.g. "create task from
+  // issue" sets the title + stages the issue as linked context). Pipeline / preset
+  // are intentionally left at their defaults so the user confirms them here.
+  const prefill = ui.addTaskPrefill
+  if (prefill) {
+    if (prefill.title) title.value = prefill.title
+    if (prefill.description) description.value = prefill.description
+    if (prefill.context?.length) pendingContext.value = [...prefill.context]
+  }
   documents.loadDocuments().catch(() => {})
   tasks.loadTasks().catch(() => {})
 })
@@ -582,6 +591,7 @@ async function add() {
             <ContextIssuePicker
               v-if="showIssuePicker && issuesConnected"
               :chosen-keys="chosenIssueKeys"
+              :scope-block-id="ui.addTaskContainerId ?? undefined"
               @pick="addPending"
             />
             <div v-if="pendingIssues.length" class="space-y-1">

package/app/components/board/nodes/BlockNode.vue

@@ -16,6 +16,7 @@ const props = defineProps<{ id: string }>()
 const board = useBoardStore()
 const execution = useExecutionStore()
 const ui = useUiStore()
+const tasks = useTasksStore()
 const agentRuns = useAgentRunsStore()
 const services = useServicesStore()
 const reviews = useReviewStage()
@@ -108,6 +109,13 @@ function addTask() {
   ui.openAddTask(props.id)
 }
 
+// Open the tracker-issue modal scoped to THIS service: the create-in target and the
+// repo-scoped issue search are both pinned to this frame (see TaskImportModal).
+function createTaskFromIssue() {
+  ui.expandFrame(props.id)
+  ui.openTaskImport(null, props.id)
+}
+
 function addRecurring() {
   ui.openAddRecurring(props.id)
 }
@@ -360,6 +368,16 @@ const ITEM_ICON: Record<string, string> = {
               title="Add task"
               @click.stop="addTask"
             />
+            <UButton
+              v-if="tasks.anyOffered"
+              class="nodrag"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-ticket"
+              title="Create task from issue"
+              @click.stop="createTaskFromIssue"
+            />
             <UButton
               class="nodrag"
               size="xs"

package/app/components/layout/AiProvidersBanner.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+// Persistent prompt that AI isn't ready, mirroring GitHubPatBanner. Two states, in priority
+// order: (1) no usable model source at all → "Configure AI" reopens the onboarding dialog;
+// (2) usable models exist but the default model preset points at unavailable ones → a milder
+// warning reopening the preset-mismatch dialog. Dismissible per session (the dismissed flags
+// live on the ui store, so the auto-open watcher and this banner share one source of truth).
+import { computed } from 'vue'
+
+const ui = useUiStore()
+const { ready, hasUsableModel, defaultPresetBroken } = useAiReadiness()
+
+const showSetup = computed(() => ready.value && !hasUsableModel.value && !ui.aiSetupDismissed)
+const showPreset = computed(() => ready.value && defaultPresetBroken.value && !ui.aiPresetDismissed)
+// The no-AI prompt owns the screen when nothing works; the preset prompt is secondary.
+const show = computed(() => showSetup.value || showPreset.value)
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="show" class="absolute inset-x-0 top-0 z-40 flex justify-center px-4 pt-4">
+      <!-- (1) No usable AI source -->
+      <div
+        v-if="showSetup"
+        class="w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
+        role="alert"
+      >
+        <div class="flex items-start gap-4">
+          <UIcon name="i-lucide-cpu" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-start justify-between gap-3">
+              <h2 class="text-lg font-semibold text-amber-100">No AI model configured</h2>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-x"
+                aria-label="Dismiss"
+                @click="ui.dismissAiSetup()"
+              />
+            </div>
+            <p class="mt-1 text-sm text-amber-200/90">
+              Agents need a model to run. AI works out of the box only on a Cloudflare deployment
+              with Workers AI enabled — otherwise connect a provider key, subscription, proxy, or
+              local runner to continue.
+            </p>
+            <div class="mt-4">
+              <UButton
+                color="warning"
+                variant="solid"
+                icon="i-lucide-settings"
+                @click="ui.openAiProviderSetup()"
+              >
+                Configure AI
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- (2) Default preset references unavailable models -->
+      <div
+        v-else
+        class="w-full max-w-3xl rounded-2xl border border-amber-500/50 bg-amber-950/90 p-4 shadow-xl backdrop-blur"
+        role="alert"
+      >
+        <div class="flex items-start gap-3">
+          <UIcon name="i-lucide-triangle-alert" class="mt-0.5 h-7 w-7 shrink-0 text-amber-400" />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-start justify-between gap-3">
+              <h2 class="text-sm font-semibold text-amber-100">
+                Default model preset uses unavailable models
+              </h2>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-x"
+                aria-label="Dismiss"
+                @click="ui.dismissAiPresetMismatch()"
+              />
+            </div>
+            <p class="mt-1 text-[13px] text-amber-200/90">
+              Tasks using the default preset would fail. Edit the preset or configure the missing
+              provider.
+            </p>
+            <div class="mt-3">
+              <UButton
+                size="sm"
+                color="warning"
+                variant="solid"
+                icon="i-lucide-cpu"
+                @click="ui.openAiPresetMismatch()"
+              >
+                Review preset
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -8,9 +8,12 @@ const props = defineProps<{ block: Block }>()
 const board = useBoardStore()
 const mergePresets = useMergePresetsStore()
 const modelPresets = useModelPresetsStore()
+const models = useModelsStore()
 const pipelines = usePipelinesStore()
 const accounts = useAccountsStore()
 const tracker = useTrackerStore()
+const ui = useUiStore()
+const { ready, unavailableInPreset } = useAiReadiness()
 
 // ---- responsible product person --------------------------------------------
 // The account member (a `product` role-holder) accountable for this task; they are
@@ -73,6 +76,17 @@ function setPreset(id: string) {
 // (a running step keeps the model it was dispatched with). A model pinned directly on
 // the task still overrides the preset.
 const selectedModelPreset = computed(() => modelPresets.resolve(props.block.modelPresetId))
+
+// Model ids in the chosen preset that aren't usable under the current configuration — the
+// task would fail when a step dispatches onto one. Labelled for the inline warning below.
+// Gated on `ready`: until the per-workspace catalog has loaded, `isUsableId` reports every
+// model unusable, which would surface a spurious "this task would fail" warning (e.g. while
+// the catalog fetch is in flight, or if it failed) — so only flag once the catalog is known.
+const unavailablePresetModels = computed(() =>
+  ready.value
+    ? unavailableInPreset(selectedModelPreset.value).map((id) => models.labelForId(id))
+    : [],
+)
 const modelPresetMenu = computed(() => [
   [
     {
@@ -243,6 +257,38 @@ const resolveOnMergeLabel = computed(() =>
       <div v-else class="text-[11px] text-slate-500">
         No preset configured — agents run on the deployment's default routing.
       </div>
+      <div
+        v-if="unavailablePresetModels.length"
+        class="mt-2 rounded-md border border-amber-500/40 bg-amber-950/40 p-2 text-[11px] text-amber-200/90"
+      >
+        <div class="flex items-start gap-1.5">
+          <UIcon
+            name="i-lucide-triangle-alert"
+            class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400"
+          />
+          <div class="min-w-0">
+            <p>
+              Not available under the current configuration:
+              <span class="text-amber-100">{{ unavailablePresetModels.join(', ') }}</span
+              >. This task would fail on those steps.
+            </p>
+            <div class="mt-1.5 flex flex-wrap gap-2">
+              <button
+                class="font-medium text-amber-100 underline-offset-2 hover:underline"
+                @click="ui.openModelConfig()"
+              >
+                Edit presets
+              </button>
+              <button
+                class="font-medium text-amber-100 underline-offset-2 hover:underline"
+                @click="ui.openVendorCredentials()"
+              >
+                Configure vendors
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
       <p class="mt-1 text-[11px] text-slate-500">
         Changing this affects only steps that haven't started yet.
       </p>

package/app/components/providers/AiPresetMismatchDialog.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+// Shown when the workspace HAS usable AI models but its DEFAULT model preset still points
+// at one or more that aren't usable under the current configuration (e.g. the built-in
+// "Kimi K2.7" default with no Kimi source connected). Tasks fall back to the default
+// preset, so they would dispatch onto an unavailable model and fail. This dialog names the
+// offending models and offers to edit/switch the preset or configure more vendors. It
+// auto-opens once per session (driven from pages/index.vue) and clears once the preset is
+// fixed (or all its models become available).
+import { computed } from 'vue'
+
+const ui = useUiStore()
+const models = useModelsStore()
+const modelPresets = useModelPresetsStore()
+const { defaultPresetUnavailable } = useAiReadiness()
+
+const open = computed({
+  get: () => ui.aiPresetMismatchOpen,
+  set: (v: boolean) => (v ? ui.openAiPresetMismatch() : ui.closeAiPresetMismatch()),
+})
+
+const presetName = computed(() => modelPresets.defaultPreset?.name ?? 'default preset')
+
+/** Readable labels for the unavailable model ids (catalog label, else the raw id). */
+const unavailableLabels = computed(() =>
+  defaultPresetUnavailable.value.map((id) => models.labelForId(id)),
+)
+
+function go(action: () => void) {
+  ui.closeAiPresetMismatch()
+  action()
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Preset uses unavailable models" :ui="{ content: 'max-w-xl' }">
+    <template #body>
+      <div class="space-y-5">
+        <p class="text-sm text-slate-300">
+          The workspace default model preset
+          <span class="font-medium text-slate-100">“{{ presetName }}”</span>
+          assigns models that aren't available under the current configuration. Tasks that use this
+          preset would fail when they reach those steps.
+        </p>
+
+        <div class="rounded-lg border border-slate-700 bg-slate-900/50 p-3">
+          <p class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            Unavailable
+          </p>
+          <div class="flex flex-wrap gap-1.5">
+            <UBadge
+              v-for="label in unavailableLabels"
+              :key="label"
+              color="warning"
+              variant="subtle"
+              size="sm"
+            >
+              {{ label }}
+            </UBadge>
+          </div>
+        </div>
+
+        <p class="text-[13px] text-slate-400">
+          Either repoint the preset at models you have configured, or add the missing provider.
+        </p>
+
+        <div class="flex flex-wrap justify-end gap-2">
+          <UButton color="neutral" variant="ghost" size="sm" @click="open = false"> Later </UButton>
+          <UButton
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            icon="i-lucide-key-round"
+            @click="go(ui.openVendorCredentials)"
+          >
+            Configure vendors
+          </UButton>
+          <UButton color="primary" size="sm" icon="i-lucide-cpu" @click="go(ui.openModelConfig)">
+            Edit presets
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/providers/AiProviderOnboardingModal.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+// Shown when the workspace has NO usable AI model source. cat-factory only ships a working
+// model out of the box on a Cloudflare deployment with Workers AI enabled; every other
+// deployment needs the user to onboard at least one source. This dialog explains that and
+// routes to each configuration surface (reusing the existing credential panels rather than
+// duplicating them). It auto-opens once per session (driven from pages/index.vue) and, like
+// the banner, disappears automatically the moment a usable source exists.
+import { computed } from 'vue'
+
+const ui = useUiStore()
+
+const open = computed({
+  get: () => ui.aiProviderSetupOpen,
+  set: (v: boolean) => (v ? ui.openAiProviderSetup() : ui.closeAiProviderSetup()),
+})
+
+// Each route closes this dialog first so we never stack two modals, then opens the target
+// panel. All of these panels are mounted in pages/index.vue alongside this one.
+function go(action: () => void) {
+  ui.closeAiProviderSetup()
+  action()
+}
+
+interface Route {
+  icon: string
+  title: string
+  body: string
+  cta: string
+  onSelect: () => void
+}
+
+const routes = computed<Route[]>(() => [
+  {
+    icon: 'i-lucide-key-round',
+    title: 'Provider keys & subscriptions',
+    body: 'Add a direct provider API key (OpenAI, Anthropic, Qwen, …) or connect a commercial coding-plan subscription (Kimi, DeepSeek) or a personal one (Claude, GLM, Codex).',
+    cta: 'Open LLM vendors',
+    onSelect: () => go(ui.openVendorCredentials),
+  },
+  {
+    icon: 'i-lucide-route',
+    title: 'OpenRouter gateway',
+    body: 'Enable models through the OpenRouter gateway with a single key — browse and turn on the models you want.',
+    cta: 'Browse OpenRouter models',
+    onSelect: () => go(ui.openOpenRouter),
+  },
+  {
+    icon: 'i-lucide-server',
+    title: 'My local runners',
+    body: 'Point cat-factory at a model you run yourself (Ollama, LM Studio, llama.cpp, vLLM, …). No API key, no spend.',
+    cta: 'Configure local runners',
+    onSelect: () => go(ui.openLocalModels),
+  },
+])
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Set up an AI model provider" :ui="{ content: 'max-w-2xl' }">
+    <template #body>
+      <div class="space-y-5">
+        <div
+          class="flex items-start gap-3 rounded-lg border border-amber-500/40 bg-amber-950/40 p-4"
+        >
+          <UIcon name="i-lucide-cpu" class="mt-0.5 h-6 w-6 shrink-0 text-amber-400" />
+          <div class="min-w-0 text-sm text-amber-100/90">
+            <p class="font-medium text-amber-100">
+              No AI model is available on this workspace yet.
+            </p>
+            <p class="mt-1">
+              Agents need a model to run. AI works out of the box only on a Cloudflare deployment
+              with Workers AI enabled — otherwise connect at least one source below.
+            </p>
+          </div>
+        </div>
+
+        <div class="space-y-3">
+          <div
+            v-for="r in routes"
+            :key="r.title"
+            class="flex items-start gap-3 rounded-xl border border-slate-700 bg-slate-900/50 p-4"
+          >
+            <UIcon :name="r.icon" class="mt-0.5 h-5 w-5 shrink-0 text-indigo-300" />
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-semibold text-slate-100">{{ r.title }}</p>
+              <p class="mt-0.5 text-[13px] leading-relaxed text-slate-400">{{ r.body }}</p>
+            </div>
+            <UButton
+              size="sm"
+              color="primary"
+              variant="subtle"
+              class="shrink-0"
+              @click="r.onSelect()"
+            >
+              {{ r.cta }}
+            </UButton>
+          </div>
+        </div>
+
+        <p class="text-[11px] leading-relaxed text-slate-500">
+          AWS Bedrock and Cloudflare Workers AI are enabled by the deployment operator via
+          environment configuration, not from this screen.
+        </p>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/tasks/ContextIssuePicker.vue

@@ -11,6 +11,12 @@ import type { TaskSearchResult, TaskSourceKind } from '~/types/domain'
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
   chosenKeys?: string[]
+  /**
+   * The block the picker is attaching context to (a service frame or a task/module
+   * under one). Scopes a GitHub search to that service's linked repo, so hits stay
+   * in-repo and a pasted URL / bare issue number resolves to the exact issue.
+   */
+  scopeBlockId?: string
 }>()
 const emit = defineEmits<{ pick: [item: PendingContext] }>()
 
@@ -50,7 +56,7 @@ async function runSearch() {
   searching.value = true
   searchError.value = null
   try {
-    results.value = await tasks.search(source.value, q)
+    results.value = await tasks.search(source.value, q, props.scopeBlockId)
   } catch (e) {
     results.value = []
     searchError.value = e instanceof Error ? e.message : String(e)

package/app/components/tasks/TaskImportModal.vue

@@ -2,10 +2,12 @@
 // Import an issue from a connected task source (by key or URL) and review the
 // issues already imported into the workspace. An imported issue can be attached
 // to an existing task for context from the inspector (see TaskContextIssues.vue),
-// or turned directly into a new board task here — pick a container (service frame
-// or module) and "Create task", which seeds a leaf block from the issue and links
-// the issue to it for context.
-import type { Block, TaskSearchResult, TaskSourceKind } from '~/types/domain'
+// or turned into a new board task here: pick a container (service frame or module),
+// then click an issue to open the prefilled add-task form (title seeded, issue
+// staged as linked context) where the user confirms the pipeline / presets before
+// creating it. A separate icon button on each row opens the issue on GitHub.
+import type { TaskSearchResult, TaskSourceKind } from '~/types/domain'
+import type { AddTaskPrefill } from '~/stores/ui'
 
 const ui = useUiStore()
 const tasks = useTasksStore()
@@ -23,12 +25,22 @@ const source = ref<TaskSourceKind | undefined>(undefined)
 const ref_ = ref('')
 const importing = ref(false)
 
+// When opened from a service frame the modal is the "create a task from an issue"
+// surface; opened standalone it's the general tracker-issue browser/importer.
+const title = computed(() =>
+  ui.taskImport?.containerId ? 'Create task from issue' : 'Tracker issues',
+)
+
 const sourceItems = computed(() =>
   tasks.offeredSources.map((s) => ({ label: s.label, value: s.source })),
 )
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 const searchable = computed(() => descriptor.value?.searchable ?? false)
 
+// The container (service frame or module) a new task is created in. Also the repo
+// scope for the issue search — declared up here so the search watch can read it.
+const containerId = ref<string | undefined>(undefined)
+
 // Browse the tracker by free text so an issue can be turned into a task without
 // knowing its key. Debounced; a created/imported hit also lands in the list below.
 const searchQuery = ref('')
@@ -37,7 +49,9 @@ const searching = ref(false)
 const searchError = ref<string | null>(null)
 
 let searchTimer: ReturnType<typeof setTimeout> | undefined
-watch([searchQuery, source], () => {
+// Re-run when the chosen container changes too: a GitHub search is scoped to the
+// selected service's repo, so switching containers re-scopes the results.
+watch([searchQuery, source, () => containerId.value], () => {
   if (searchTimer) clearTimeout(searchTimer)
   searchResults.value = []
   searchError.value = null
@@ -52,7 +66,9 @@ async function runSearch() {
   searching.value = true
   searchError.value = null
   try {
-    searchResults.value = await tasks.search(source.value, q)
+    // Scope to the selected container's repo so hits stay in-repo and a pasted
+    // URL / bare issue number resolves to the exact issue.
+    searchResults.value = await tasks.search(source.value, q, containerId.value)
   } catch (e) {
     searchResults.value = []
     searchError.value = e instanceof Error ? e.message : String(e)
@@ -75,7 +91,6 @@ const sourceTasks = computed(() =>
 
 // Containers a new task can be created in: every service frame and module on the
 // board. Modules are labelled with their parent frame so the choice is unambiguous.
-const containerId = ref<string | undefined>(undefined)
 const containerItems = computed(() =>
   board.blocks
     .filter((b) => b.level === 'frame' || b.level === 'module')
@@ -87,9 +102,6 @@ const containerItems = computed(() =>
       value: b.id,
     })),
 )
-// The issue currently being turned into a task (its row shows a spinner).
-const creatingId = ref<string | null>(null)
-
 watch(open, (isOpen) => {
   if (isOpen) {
     ref_.value = ''
@@ -97,33 +109,38 @@ watch(open, (isOpen) => {
     searchResults.value = []
     searchError.value = null
     source.value = ui.taskImport?.source ?? tasks.offeredSources[0]?.source ?? undefined
-    containerId.value = containerItems.value[0]?.value
-    creatingId.value = null
+    // Opened from a service frame → preselect it as the create-in target (and the
+    // search's repo scope); otherwise fall back to the first container on the board.
+    containerId.value = ui.taskImport?.containerId ?? containerItems.value[0]?.value
     tasks.loadTasks().catch(() => {})
   }
 })
 
-// Create a board task from an issue, seeding its title/description from the issue
-// and linking it back for writeback. A search hit isn't projected locally yet, so
-// `needsImport` fetches + persists it first (create-block requires it imported).
-async function createTask(externalId: string, needsImport = false) {
+// Selecting an issue hands off to the add-task form, prefilled with the issue title
+// and the issue staged as linked context (so agents see its description + comments).
+// The user still confirms pipeline / preset there before the task is created — we do
+// NOT dump the issue body into the description; the link is enough.
+function selectIssue(
+  issue: { externalId: string; title: string; status?: string },
+  needsImport: boolean,
+) {
   if (!source.value || !containerId.value) return
-  creatingId.value = externalId
-  try {
-    if (needsImport) await tasks.importTask(source.value, externalId)
-    const { block } = await tasks.createTaskFromIssue(source.value, externalId, containerId.value)
-    board.upsert(block as Block)
-    toast.add({ title: `Created task "${block.title}"`, icon: 'i-lucide-square-check' })
-  } catch (e) {
-    toast.add({
-      title: 'Could not create task',
-      description: e instanceof Error ? e.message : String(e),
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
-  } finally {
-    creatingId.value = null
+  const prefill: AddTaskPrefill = {
+    title: issue.title,
+    context: [
+      {
+        kind: 'task',
+        source: source.value,
+        externalId: issue.externalId,
+        title: `${issue.externalId} · ${issue.title}`,
+        subtitle: issue.status || undefined,
+        icon: descriptor.value?.icon,
+        needsImport,
+      },
+    ],
   }
+  ui.closeTaskImport()
+  ui.openAddTask(containerId.value, prefill)
 }
 
 async function doImport() {
@@ -148,7 +165,7 @@ async function doImport() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Tracker issues">
+  <UModal v-model:open="open" :title="title">
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
       <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
@@ -201,7 +218,7 @@ async function doImport() {
             v-model="searchQuery"
             :icon="searching ? 'i-lucide-loader-circle' : 'i-lucide-search'"
             :ui="{ leadingIcon: searching ? 'animate-spin' : '' }"
-            placeholder="Search by title…"
+            placeholder="Search by title, paste an issue URL, or type an issue number…"
             class="w-full"
           />
         </UFormField>
@@ -226,7 +243,8 @@ async function doImport() {
           Add a service frame to the board first to create tasks from issues.
         </p>
 
-        <!-- Search results (not yet imported): create a task directly from a hit. -->
+        <!-- Search results (not yet imported): click a hit to create a task from it
+             (opens the prefilled add-task form); the icon button views it on GitHub. -->
         <div v-if="searchError" class="text-[11px] text-amber-400">
           Search failed: {{ searchError }}
         </div>
@@ -237,38 +255,36 @@ async function doImport() {
           <div
             v-for="hit in freshHits"
             :key="`hit:${hit.source}:${hit.externalId}`"
-            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            class="flex items-start justify-between gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-3 transition-colors hover:border-primary-500/60 hover:bg-slate-900"
           >
-            <div class="flex items-start justify-between gap-2">
-              <div class="min-w-0">
-                <a
-                  :href="hit.url"
-                  target="_blank"
-                  rel="noopener"
-                  class="truncate text-sm font-medium text-white hover:underline"
-                >
-                  {{ hit.externalId }} · {{ hit.title }}
-                </a>
-                <p v-if="hit.excerpt" class="mt-0.5 line-clamp-2 text-xs text-slate-500">
-                  {{ hit.excerpt }}
-                </p>
-              </div>
-              <div class="flex shrink-0 items-center gap-2">
-                <UBadge v-if="hit.status" color="neutral" variant="soft" size="xs">
-                  {{ hit.status }}
-                </UBadge>
-                <UButton
-                  color="primary"
-                  variant="soft"
-                  size="xs"
-                  icon="i-lucide-square-check"
-                  :loading="creatingId === hit.externalId"
-                  :disabled="!containerId || creatingId !== null"
-                  @click="createTask(hit.externalId, true)"
-                >
-                  Create task
-                </UButton>
-              </div>
+            <button
+              type="button"
+              class="min-w-0 flex-1 text-left disabled:cursor-not-allowed disabled:opacity-60"
+              :disabled="!containerId"
+              :title="containerId ? 'Create a task from this issue' : 'Pick a container first'"
+              @click="selectIssue(hit, true)"
+            >
+              <span class="block truncate text-sm font-medium text-white">
+                {{ hit.externalId }} · {{ hit.title }}
+              </span>
+              <span v-if="hit.excerpt" class="mt-0.5 line-clamp-2 block text-xs text-slate-500">
+                {{ hit.excerpt }}
+              </span>
+            </button>
+            <div class="flex shrink-0 items-center gap-2">
+              <UBadge v-if="hit.status" color="neutral" variant="soft" size="xs">
+                {{ hit.status }}
+              </UBadge>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-external-link"
+                :to="hit.url"
+                target="_blank"
+                rel="noopener"
+                :aria-label="`View ${hit.externalId} on GitHub`"
+              />
             </div>
           </div>
         </div>
@@ -281,36 +297,36 @@ async function doImport() {
           <div
             v-for="task in sourceTasks"
             :key="`${task.source}:${task.externalId}`"
-            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            class="flex items-start justify-between gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-3 transition-colors hover:border-primary-500/60 hover:bg-slate-900"
           >
-            <div class="flex items-start justify-between gap-2">
-              <div class="min-w-0">
-                <a
-                  :href="task.url"
-                  target="_blank"
-                  rel="noopener"
-                  class="truncate text-sm font-medium text-white hover:underline"
-                >
-                  {{ task.externalId }} · {{ task.title }}
-                </a>
-                <p class="mt-0.5 line-clamp-2 text-xs text-slate-500">{{ task.excerpt }}</p>
-              </div>
-              <div class="flex shrink-0 items-center gap-2">
-                <UBadge color="neutral" variant="soft" size="xs">
-                  {{ task.status }}
-                </UBadge>
-                <UButton
-                  color="primary"
-                  variant="soft"
-                  size="xs"
-                  icon="i-lucide-square-check"
-                  :loading="creatingId === task.externalId"
-                  :disabled="!containerId || creatingId !== null"
-                  @click="createTask(task.externalId)"
-                >
-                  Create task
-                </UButton>
-              </div>
+            <button
+              type="button"
+              class="min-w-0 flex-1 text-left disabled:cursor-not-allowed disabled:opacity-60"
+              :disabled="!containerId"
+              :title="containerId ? 'Create a task from this issue' : 'Pick a container first'"
+              @click="selectIssue(task, false)"
+            >
+              <span class="block truncate text-sm font-medium text-white">
+                {{ task.externalId }} · {{ task.title }}
+              </span>
+              <span class="mt-0.5 line-clamp-2 block text-xs text-slate-500">{{
+                task.excerpt
+              }}</span>
+            </button>
+            <div class="flex shrink-0 items-center gap-2">
+              <UBadge color="neutral" variant="soft" size="xs">
+                {{ task.status }}
+              </UBadge>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-external-link"
+                :to="task.url"
+                target="_blank"
+                rel="noopener"
+                :aria-label="`View ${task.externalId} on GitHub`"
+              />
             </div>
           </div>
         </div>

package/app/composables/api/tasks.ts

@@ -57,10 +57,15 @@ export function tasksApi({ http, ws }: ApiContext) {
         body,
       }),
 
-    searchTaskSource: (workspaceId: string, source: TaskSourceKind, query: string) =>
+    searchTaskSource: (
+      workspaceId: string,
+      source: TaskSourceKind,
+      query: string,
+      blockId?: string,
+    ) =>
       http<{ results: TaskSearchResult[] }>(`${ws(workspaceId)}/task-sources/${source}/search`, {
         method: 'POST',
-        body: { query },
+        body: { query, ...(blockId ? { blockId } : {}) },
       }),
 
     linkTask: (

package/app/composables/useAiReadiness.ts

@@ -0,0 +1,62 @@
+import type { ModelPreset } from '~/types/model-presets'
+
+/**
+ * AI-configuration readiness for the active workspace. cat-factory only ships a usable
+ * AI model out of the box on a Cloudflare deployment with Workers AI enabled; every other
+ * deployment needs the user to onboard at least one source (a provider key, a pooled /
+ * personal subscription, a proxy, Bedrock, or a local runner). This composable turns the
+ * per-workspace model catalog (whose `available` flag already reflects all of those) plus
+ * the workspace's model presets into the two signals the onboarding surfaces consume:
+ *
+ *  - `hasUsableModel` — is ANY AI source configured at all? (false ⇒ the no-AI prompt)
+ *  - `defaultPresetBroken` — the workspace has usable models, but its DEFAULT model preset
+ *    still points at one or more that aren't usable (⇒ the preset-mismatch prompt). Gated on
+ *    `hasUsableModel` so the no-AI prompt owns the "nothing works" case on its own.
+ *
+ * Read-only over the existing stores; the catalog is loaded elsewhere (on workspace-ready
+ * and after credential edits), so `ready` simply reports whether that load has landed for
+ * the active workspace.
+ */
+export function useAiReadiness() {
+  const models = useModelsStore()
+  const modelPresets = useModelPresetsStore()
+  const workspace = useWorkspaceStore()
+
+  /** The per-workspace catalog has loaded for the workspace currently open. */
+  const ready = computed(
+    () =>
+      models.loaded &&
+      workspace.workspaceId != null &&
+      models.loadedWorkspaceId === workspace.workspaceId,
+  )
+
+  const hasUsableModel = computed(() => models.hasUsableModel)
+
+  /** Every distinct catalog model id a preset assigns (base + overrides). */
+  function presetModelIds(preset: ModelPreset | null): string[] {
+    if (!preset) return []
+    return [...new Set([preset.baseModelId, ...Object.values(preset.overrides)])]
+  }
+
+  /** The preset's assigned model ids that aren't usable under the current configuration. */
+  function unavailableInPreset(preset: ModelPreset | null): string[] {
+    return presetModelIds(preset).filter((id) => !models.isUsableId(id))
+  }
+
+  /** Unusable model ids in the workspace DEFAULT preset (what tasks fall back to). */
+  const defaultPresetUnavailable = computed(() => unavailableInPreset(modelPresets.defaultPreset))
+
+  /** Usable models exist, but the default preset still references unusable ones. */
+  const defaultPresetBroken = computed(
+    () => hasUsableModel.value && defaultPresetUnavailable.value.length > 0,
+  )
+
+  return {
+    ready,
+    hasUsableModel,
+    presetModelIds,
+    unavailableInPreset,
+    defaultPresetUnavailable,
+    defaultPresetBroken,
+  }
+}

package/app/pages/index.vue

@@ -4,6 +4,7 @@ import SideBar from '~/components/layout/SideBar.vue'
 import BoardToolbar from '~/components/layout/BoardToolbar.vue'
 import SpendWarningBanner from '~/components/layout/SpendWarningBanner.vue'
 import GitHubPatBanner from '~/components/layout/GitHubPatBanner.vue'
+import AiProvidersBanner from '~/components/layout/AiProvidersBanner.vue'
 import PipelineBuilder from '~/components/pipeline/PipelineBuilder.vue'
 import InspectorPanel from '~/components/panels/InspectorPanel.vue'
 import DecisionModal from '~/components/panels/DecisionModal.vue'
@@ -33,13 +34,72 @@ import LocalModelEndpointsPanel from '~/components/settings/LocalModelEndpointsP
 import OpenRouterCatalogPanel from '~/components/settings/OpenRouterCatalogPanel.vue'
 import VendorCredentialsModal from '~/components/providers/VendorCredentialsModal.vue'
 import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
+import AiProviderOnboardingModal from '~/components/providers/AiProviderOnboardingModal.vue'
+import AiPresetMismatchDialog from '~/components/providers/AiPresetMismatchDialog.vue'
 
 const workspace = useWorkspaceStore()
 const github = useGitHubStore()
+const models = useModelsStore()
+const ui = useUiStore()
+const aiReadiness = useAiReadiness()
 
 // Load the board from the backend before rendering it.
 onMounted(() => workspace.init())
 
+// Per-session guards so each AI-onboarding dialog auto-opens at most once (later opens are
+// user-driven from the banner). Reset on workspace switch by the catalog watcher below.
+const autoOpenedSetup = ref(false)
+const autoOpenedPreset = ref(false)
+
+// Load the per-workspace model catalog as soon as a board is active (re-loaded per board —
+// availability reflects that workspace's keys/subscriptions). This populates the AI-readiness
+// signals regardless of which lazy picker happens to mount, so the onboarding prompts below
+// can fire. Credential edits re-fetch via `models.refresh()` in the provider panels.
+watch(
+  () => workspace.workspaceId,
+  (id, prev) => {
+    if (id) void models.ensureLoaded(id)
+    // Switching workspaces resets the per-session AI-onboarding state: dismissals and the
+    // auto-open guards are scoped to one workspace, so a prompt dismissed in workspace A must
+    // not suppress the (independent) prompt for workspace B that also lacks a usable source.
+    if (prev !== undefined && id !== prev) {
+      autoOpenedSetup.value = false
+      autoOpenedPreset.value = false
+      ui.resetAiOnboarding()
+    }
+  },
+  { immediate: true },
+)
+
+// Auto-open the right AI-onboarding dialog once per session: the no-source prompt takes
+// precedence over the preset-mismatch prompt. Honour the per-session dismissed flags so a
+// user who closed the banner isn't re-interrupted, and only auto-open once each (later opens
+// are user-driven from the banner). The prompts clear themselves once the gap is closed.
+watch(
+  () => [
+    aiReadiness.ready.value,
+    aiReadiness.hasUsableModel.value,
+    aiReadiness.defaultPresetBroken.value,
+  ],
+  () => {
+    if (!aiReadiness.ready.value) return
+    if (!aiReadiness.hasUsableModel.value) {
+      if (!autoOpenedSetup.value && !ui.aiSetupDismissed) {
+        autoOpenedSetup.value = true
+        ui.openAiProviderSetup()
+      }
+      return
+    }
+    if (aiReadiness.defaultPresetBroken.value) {
+      if (!autoOpenedPreset.value && !ui.aiPresetDismissed) {
+        autoOpenedPreset.value = true
+        ui.openAiPresetMismatch()
+      }
+    }
+  },
+  { immediate: true },
+)
+
 // Probe the GitHub integration as soon as a board is active (re-probe per board —
 // connections are per workspace). The result drives the onboarding gate below
 // before the board mounts, so an unconnected user can't slip past it. SideBar
@@ -75,6 +135,8 @@ watch(
   <div class="flex h-screen w-screen overflow-hidden bg-slate-950 text-slate-100">
     <!-- Local-mode setup prompt (missing GitHub PAT); floats over whatever is shown below. -->
     <GitHubPatBanner />
+    <!-- AI-readiness prompt (no usable model source, or default preset uses unavailable models). -->
+    <AiProvidersBanner v-if="workspace.ready && !needsGitHubInstall && !githubProbePending" />
 
     <!-- Resolving whether the GitHub App is installed, before we decide what to show. -->
     <div
@@ -124,6 +186,8 @@ watch(
       <OpenRouterCatalogPanel />
       <VendorCredentialsModal />
       <PersonalCredentialModal />
+      <AiProviderOnboardingModal />
+      <AiPresetMismatchDialog />
     </template>
 
     <!-- Backend unreachable / bootstrap failed -->

package/app/stores/models.ts

@@ -116,6 +116,28 @@ export const useModelsStore = defineStore('models', () => {
     return id ? byId.value.get(id) : undefined
   }
 
+  /** Readable label for a catalog model id: the catalog label, else the raw id. */
+  function labelForId(id: string): string {
+    return byId.value.get(id)?.label ?? id
+  }
+
+  /**
+   * Whether the workspace has at least one usable AI model source right now. The
+   * per-workspace catalog already resolves `available` from the configured keys /
+   * subscriptions / Cloudflare opt-in / local runners, so this is the single signal for
+   * "is any AI configured at all". Only meaningful once the per-workspace catalog has
+   * loaded (`loadedWorkspaceId` set); the deployment catalog leaves `available` undefined.
+   */
+  const hasUsableModel = computed(() => models.value.some((m) => m.available === true))
+
+  /**
+   * Whether a specific catalog model id is usable under the current configuration. An id
+   * absent from the catalog (e.g. a model that was removed) counts as not usable.
+   */
+  function isUsableId(id: string): boolean {
+    return byId.value.get(id)?.available === true
+  }
+
   /**
    * Friendly label for a recorded `provider:model` identifier (as carried on a
    * pipeline step). Matches it against the catalog's effective refs; falls back
@@ -130,5 +152,17 @@ export const useModelsStore = defineStore('models', () => {
     return hit ? `${hit.label} · ${hit.providerLabel}` : model || ref
   }
 
-  return { models, loaded, ensureLoaded, refresh, byId, getModel, labelForRef }
+  return {
+    models,
+    loaded,
+    loadedWorkspaceId,
+    ensureLoaded,
+    refresh,
+    byId,
+    getModel,
+    labelForId,
+    hasUsableModel,
+    isUsableId,
+    labelForRef,
+  }
 })

package/app/stores/tasks.ts

@@ -170,9 +170,18 @@ export const useTasksStore = defineStore('tasks', () => {
     }
   }
 
-  /** Search a connected tracker's issues by free text (title/content). */
-  async function search(source: TaskSourceKind, query: string): Promise<TaskSearchResult[]> {
-    const { results } = await api.searchTaskSource(workspace.requireId(), source, query)
+  /**
+   * Search a connected tracker's issues by free text (title/content). `blockId`
+   * (a service frame or a task/module under one) scopes a GitHub search to that
+   * service's linked repo — so hits stay in-repo and a pasted URL / bare issue
+   * number resolves to the exact issue. Omitted → an unscoped workspace search.
+   */
+  async function search(
+    source: TaskSourceKind,
+    query: string,
+    blockId?: string,
+  ): Promise<TaskSearchResult[]> {
+    const { results } = await api.searchTaskSource(workspace.requireId(), source, query, blockId)
     return results
   }
 

package/app/stores/ui.ts

@@ -1,10 +1,19 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { DocumentSourceKind, TaskSourceKind, LodLevel } from '~/types/domain'
+import type { PendingContext } from '~/composables/useContextLinking'
 import { zoomToLod, lodAtLeast } from '~/composables/useSemanticZoom'
 import { useExecutionStore } from '~/stores/execution'
 import { agentKindMeta } from '~/utils/catalog'
 
+/** Values used to seed the add-task form when it is opened from another surface. */
+export interface AddTaskPrefill {
+  title?: string
+  description?: string
+  /** Context items staged on the new task (e.g. the source issue), linked once created. */
+  context?: PendingContext[]
+}
+
 /** Transient UI state: selection, panels, zoom level. */
 export const useUiStore = defineStore('ui', () => {
   const selectedBlockId = ref<string | null>(null)
@@ -33,12 +42,19 @@ export const useUiStore = defineStore('ui', () => {
   // the modal pick a connected one (there is no spawn target — issues are linked
   // to a block for context, not expanded into structure).
   const taskConnect = ref<{ source: TaskSourceKind } | null>(null)
-  const taskImport = ref<{ source: TaskSourceKind | null } | null>(null)
+  // `containerId` (a service frame) scopes the modal: it preselects that frame as
+  // the create-in target AND scopes the issue search to the frame's linked repo.
+  // Null → the unscoped "import an issue" surface (workspace-wide search).
+  const taskImport = ref<{ source: TaskSourceKind | null; containerId: string | null } | null>(null)
 
   // Add-task modal: the container (service frame or module) a new task is being
   // added to, or null when closed. The user types the title + description; nothing
   // is launched until they explicitly start the created task.
   const addTaskContainerId = ref<string | null>(null)
+  // Optional values to seed the add-task form with when it is opened from another
+  // surface (e.g. "create task from issue" prefills the title + stages the issue as
+  // linked context). The user still confirms pipeline / preset before adding.
+  const addTaskPrefill = ref<AddTaskPrefill | null>(null)
 
   // Add-recurring-pipeline modal: the service frame a new recurring pipeline is
   // being added to, or null when closed (mirrors the add-task flow — a button on
@@ -88,6 +104,16 @@ export const useUiStore = defineStore('ui', () => {
   // Per-workspace settings panel: the OpenRouter dynamic catalog (browse/enable gateway models).
   const openRouterOpen = ref(false)
 
+  // AI-onboarding surfaces (driven by `useAiReadiness`). `aiProviderSetupOpen` is the
+  // "no usable AI source" dialog; `aiPresetMismatchOpen` is the "default preset points at
+  // unavailable models" dialog. The `*Dismissed` flags are per-session: they suppress the
+  // auto-open (and let the banner be dismissed) without permanently hiding the prompt — it
+  // re-evaluates on the next load. Both clear themselves once the underlying gap is closed.
+  const aiProviderSetupOpen = ref(false)
+  const aiPresetMismatchOpen = ref(false)
+  const aiSetupDismissed = ref(false)
+  const aiPresetDismissed = ref(false)
+
   // Dedicated result-view overlay: a step whose agent kind declares a bespoke
   // visualization (via the archetype's `resultView`) opens here instead of the generic
   // prose step-detail panel. `view` is the registry id (e.g. 'requirements-review');
@@ -227,17 +253,19 @@ export const useUiStore = defineStore('ui', () => {
   function closeTaskConnect() {
     taskConnect.value = null
   }
-  function openTaskImport(source: TaskSourceKind | null = null) {
-    taskImport.value = { source }
+  function openTaskImport(source: TaskSourceKind | null = null, containerId: string | null = null) {
+    taskImport.value = { source, containerId }
   }
   function closeTaskImport() {
     taskImport.value = null
   }
-  function openAddTask(containerId: string) {
+  function openAddTask(containerId: string, prefill: AddTaskPrefill | null = null) {
+    addTaskPrefill.value = prefill
     addTaskContainerId.value = containerId
   }
   function closeAddTask() {
     addTaskContainerId.value = null
+    addTaskPrefill.value = null
   }
   function openAddRecurring(frameId: string) {
     addRecurringFrameId.value = frameId
@@ -330,6 +358,39 @@ export const useUiStore = defineStore('ui', () => {
   function closeOpenRouter() {
     openRouterOpen.value = false
   }
+  function openAiProviderSetup() {
+    aiProviderSetupOpen.value = true
+  }
+  function closeAiProviderSetup() {
+    aiProviderSetupOpen.value = false
+  }
+  function openAiPresetMismatch() {
+    aiPresetMismatchOpen.value = true
+  }
+  function closeAiPresetMismatch() {
+    aiPresetMismatchOpen.value = false
+  }
+  // Banner dismissal is distinct from closing the dialog: closing the dialog leaves the
+  // banner so the user can reopen it; dismissing the banner hides the whole prompt for
+  // the session (it re-evaluates on the next load).
+  function dismissAiSetup() {
+    aiProviderSetupOpen.value = false
+    aiSetupDismissed.value = true
+  }
+  function dismissAiPresetMismatch() {
+    aiPresetMismatchOpen.value = false
+    aiPresetDismissed.value = true
+  }
+  // Clear the per-session AI-onboarding state (open dialogs + dismissed flags). Called on
+  // workspace switch: dismissals are per-session-per-workspace, so a prompt dismissed in one
+  // workspace must not suppress the (independent) prompt for another workspace that also
+  // lacks a usable AI source / has a broken default preset.
+  function resetAiOnboarding() {
+    aiProviderSetupOpen.value = false
+    aiPresetMismatchOpen.value = false
+    aiSetupDismissed.value = false
+    aiPresetDismissed.value = false
+  }
   function openRequirementReview(blockId: string) {
     resultView.value = { view: 'requirements-review', blockId, instanceId: null, stepIndex: null }
   }
@@ -369,6 +430,7 @@ export const useUiStore = defineStore('ui', () => {
     taskConnect,
     taskImport,
     addTaskContainerId,
+    addTaskPrefill,
     addRecurringFrameId,
     bootstrapOpen,
     addServiceOpen,
@@ -384,6 +446,10 @@ export const useUiStore = defineStore('ui', () => {
     vendorCredentialsOpen,
     localModelsOpen,
     openRouterOpen,
+    aiProviderSetupOpen,
+    aiPresetMismatchOpen,
+    aiSetupDismissed,
+    aiPresetDismissed,
     resultView,
     closeResultView,
     stepDetail,
@@ -442,6 +508,13 @@ export const useUiStore = defineStore('ui', () => {
     closeLocalModels,
     openOpenRouter,
     closeOpenRouter,
+    openAiProviderSetup,
+    closeAiProviderSetup,
+    openAiPresetMismatch,
+    closeAiPresetMismatch,
+    dismissAiSetup,
+    dismissAiPresetMismatch,
+    resetAiOnboarding,
     openRequirementReview,
     openClarityReview,
     openServiceSpec,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",