@cat-factory/app 0.10.0 → 0.12.0

package/app/components/board/AddTaskModal.vue

@@ -187,7 +187,7 @@ const pendingContext = ref<PendingContext[]>([])
 // always shown (ungated): when the relevant integration isn't connected the Attach
 // button is disabled with a tooltip rather than the section being hidden.
 const docsConnected = computed(() => documents.available && documents.anyConnected)
-const issuesConnected = computed(() => tasks.available && tasks.anyConnected)
+const issuesConnected = computed(() => tasks.available && tasks.anyOffered)
 const pendingDocs = computed(() => pendingContext.value.filter((c) => c.kind === 'document'))
 const pendingIssues = computed(() => pendingContext.value.filter((c) => c.kind === 'task'))
 

package/app/components/layout/AccountTeamSettings.vue

@@ -228,10 +228,13 @@ async function disconnectEmail() {
       </template>
     </section>
 
-    <!-- account-wide provider API keys (admin-only) -->
-    <section v-if="isAdmin">
+    <!-- account-wide provider API keys (admin-only): direct vendors + proxy gateways -->
+    <section v-if="isAdmin" class="space-y-6">
       <h3 class="mb-2 font-semibold text-white">Account API keys</h3>
-      <ProvidersApiKeysSection :account-id="accountId" />
+      <ProvidersApiKeysSection :account-id="accountId" category="direct" />
+      <div class="border-t border-slate-800 pt-6">
+        <ProvidersApiKeysSection :account-id="accountId" category="proxy" />
+      </div>
     </section>
   </div>
 </template>

package/app/components/layout/CommandBar.vue

@@ -111,14 +111,14 @@ const commands = computed<Command[]>(() => {
     for (const src of tasks.sources) {
       list.push({
         id: `task-connect-${src.source}`,
-        label: tasks.isConnected(src.source) ? `Manage ${src.label}` : `Connect ${src.label}`,
+        label: src.available ? `Manage ${src.label}` : `Connect ${src.label}`,
         group: 'Integrations',
         icon: src.icon,
         keywords: 'task source tracker issues',
         run: () => ui.openTaskConnect(src.source),
       })
     }
-    if (tasks.anyConnected) {
+    if (tasks.anyOffered) {
       list.push({
         id: 'task-import',
         label: 'Import issues',

package/app/components/layout/IntegrationsHub.vue

@@ -114,11 +114,13 @@ const groups = computed<IntegrationGroup[]>(() => {
       icon: src.icon,
       label: src.label,
       description: `Link ${src.label} to import and reference tracker issues.`,
-      status: tasks.isConnected(src.source) ? 'Connected' : undefined,
-      connected: tasks.isConnected(src.source),
+      // Available + enabled ⇒ offered (green); available + off ⇒ "Disabled";
+      // not available ⇒ no badge (Jira needs connecting; GitHub needs its App).
+      status: src.available ? (src.enabled ? undefined : 'Disabled') : undefined,
+      connected: src.available && src.enabled,
       onClick: () => go(() => ui.openTaskConnect(src.source)),
     }))
-    if (tasks.anyConnected) {
+    if (tasks.anyOffered) {
       trackers.push({
         key: 'task:import',
         icon: 'i-lucide-file-down',

package/app/components/panels/InspectorPanel.vue

@@ -386,7 +386,7 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-ticket"
           @click="ui.openTaskImport()"
         >
-          {{ tasks.anyConnected ? 'Import Jira issue' : 'Connect Jira' }}
+          {{ tasks.anyOffered ? 'Import issue' : 'Connect a tracker' }}
         </UButton>
         <UButton
           v-if="isContainer && documents.available && documents.anyConnected"

package/app/components/providers/ApiKeysSection.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-// Direct-provider API keys: connect a vendor API key (OpenAI/Anthropic/Qwen/DeepSeek/
-// Moonshot) so agent steps and inline calls run on that provider. Keys are stored
-// encrypted in the DB, pooled and rotated by usage — replacing deployment env vars.
+// Provider API keys: connect a vendor API key so agent steps and inline calls run on
+// that provider. Keys are stored encrypted in the DB, pooled and rotated by usage —
+// replacing deployment env vars.
 //
-// Two modes:
+// `category` splits the providers into two kinds:
+//  - 'direct' (default): you reach the vendor directly (OpenAI/Anthropic/Qwen/DeepSeek/
+//    Moonshot).
+//  - 'proxy': an intermediary gateway that fronts many vendors behind one key
+//    (OpenRouter, LiteLLM). These are NOT direct vendors, so they get their own section.
+//
+// Two scopes:
 //  - Default (no `accountId`): manage WORKSPACE keys (shared by the team) and YOUR own
 //    keys (your personal pool, usable in any workspace), toggled by the Scope select.
 //  - With `accountId`: manage ACCOUNT-wide keys (shared by every workspace in the
@@ -11,7 +17,9 @@
 import { computed, ref, watch } from 'vue'
 import type { ApiKey, ApiKeyProvider } from '~/types/domain'
 
-const props = defineProps<{ accountId?: string }>()
+const props = withDefaults(defineProps<{ accountId?: string; category?: 'direct' | 'proxy' }>(), {
+  category: 'direct',
+})
 
 const workspace = useWorkspaceStore()
 const keys = useApiKeysStore()
@@ -21,13 +29,15 @@ const toast = useToast()
 /** Account-wide mode (single account scope) vs the default workspace/user toggle. */
 const isAccount = computed(() => !!props.accountId)
 
-/** Where to obtain each provider's API key + a short note. */
-const PROVIDERS: {
+interface ProviderMeta {
   value: ApiKeyProvider
   label: string
   url: string
   steps: string[]
-}[] = [
+}
+
+/** Direct vendors: the key reaches that one vendor's own endpoint. */
+const DIRECT_PROVIDERS: ProviderMeta[] = [
   {
     value: 'openai',
     label: 'OpenAI',
@@ -73,6 +83,10 @@ const PROVIDERS: {
       'Copy the key; it authenticates the OpenAI-compatible Moonshot endpoint.',
     ],
   },
+]
+
+/** Proxies / gateways: one key fronts many vendors. These are intermediaries, not vendors. */
+const PROXY_PROVIDERS: ProviderMeta[] = [
   {
     value: 'openrouter',
     label: 'OpenRouter',
@@ -93,8 +107,12 @@ const PROVIDERS: {
   },
 ]
 
+/** Providers for the requested category; labels everywhere fall back to the full set. */
+const PROVIDERS = computed(() => (props.category === 'proxy' ? PROXY_PROVIDERS : DIRECT_PROVIDERS))
+const ALL_PROVIDERS = [...DIRECT_PROVIDERS, ...PROXY_PROVIDERS]
+
 const scope = ref<'workspace' | 'user'>('workspace')
-const provider = ref<ApiKeyProvider>('openai')
+const provider = ref<ApiKeyProvider>(props.category === 'proxy' ? 'openrouter' : 'openai')
 const label = ref('')
 const key = ref('')
 const busy = ref(false)
@@ -115,17 +133,23 @@ watch(
   { immediate: true },
 )
 
-const selected = computed(() => PROVIDERS.find((p) => p.value === provider.value)!)
-const connected = computed<ApiKey[]>(() =>
-  isAccount.value
+const selected = computed(
+  () => PROVIDERS.value.find((p) => p.value === provider.value) ?? PROVIDERS.value[0]!,
+)
+
+/** Keys for the active scope, narrowed to this section's category (direct vs proxy). */
+const categoryProviders = computed(() => new Set(PROVIDERS.value.map((p) => p.value)))
+const connected = computed<ApiKey[]>(() => {
+  const all = isAccount.value
     ? keys.accountKeys
     : scope.value === 'workspace'
       ? keys.workspaceKeys
-      : keys.userKeys,
-)
+      : keys.userKeys
+  return all.filter((k) => categoryProviders.value.has(k.provider))
+})
 
 function providerLabel(p: ApiKeyProvider): string {
-  return PROVIDERS.find((x) => x.value === p)?.label ?? p
+  return ALL_PROVIDERS.find((x) => x.value === p)?.label ?? p
 }
 
 async function add() {
@@ -176,17 +200,34 @@ async function remove(k: ApiKey) {
   <div class="space-y-4">
     <div>
       <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
-        Direct provider API keys
+        {{ category === 'proxy' ? 'Proxy / gateway API keys' : 'Direct provider API keys' }}
       </h4>
-      <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
-        Connect a vendor API key shared by <strong>every workspace</strong> in this account. Keys
-        are stored encrypted, pooled, and rotated by usage. Account keys are admin-managed.
-      </p>
-      <p v-else class="mt-1 text-sm text-slate-400">
-        Connect a vendor API key so models run directly on that provider. Keys are stored encrypted,
-        pooled, and rotated by usage. Scope a key to this <strong>workspace</strong> (shared with
-        the team) or to <strong>you</strong> (your own pool, usable anywhere).
-      </p>
+      <template v-if="category === 'proxy'">
+        <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
+          Connect a <strong>proxy</strong> key (OpenRouter, LiteLLM) shared by
+          <strong>every workspace</strong> in this account. A proxy is an intermediary that fronts
+          many vendors behind a single key. Keys are stored encrypted, pooled, and rotated by usage.
+        </p>
+        <p v-else class="mt-1 text-sm text-slate-400">
+          Connect a <strong>proxy</strong> key (OpenRouter, LiteLLM). A proxy is an intermediary
+          that reaches many vendors' models through a single gateway, rather than one vendor
+          directly. Keys are stored encrypted, pooled, and rotated by usage. Scope a key to this
+          <strong>workspace</strong> (shared with the team) or to <strong>you</strong> (your own
+          pool, usable anywhere).
+        </p>
+      </template>
+      <template v-else>
+        <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
+          Connect a vendor API key shared by <strong>every workspace</strong> in this account. Keys
+          are stored encrypted, pooled, and rotated by usage. Account keys are admin-managed.
+        </p>
+        <p v-else class="mt-1 text-sm text-slate-400">
+          Connect a vendor API key so models run directly on that provider. Keys are stored
+          encrypted, pooled, and rotated by usage. Scope a key to this
+          <strong>workspace</strong> (shared with the team) or to <strong>you</strong> (your own
+          pool, usable anywhere).
+        </p>
+      </template>
     </div>
 
     <!-- scope + provider -->
@@ -201,7 +242,7 @@ async function remove(k: ApiKey) {
           class="w-48"
         />
       </UFormField>
-      <UFormField label="Provider">
+      <UFormField :label="category === 'proxy' ? 'Proxy' : 'Provider'">
         <USelect
           v-model="provider"
           :items="PROVIDERS.map((p) => ({ label: p.label, value: p.value }))"

package/app/components/providers/VendorCredentialsModal.vue

@@ -18,6 +18,21 @@ const open = computed({
   set: (v: boolean) => (v ? ui.openVendorCredentials() : ui.closeVendorCredentials()),
 })
 
+// Horizontal tabs replace the old long vertical scroll: each credential kind is its own
+// section (pooled subscriptions, direct vendor keys, proxy/gateway keys, personal subs).
+const activeTab = ref('pool')
+const tabs = [
+  { value: 'pool', label: 'Workspace pool', icon: 'i-lucide-users', slot: 'pool' },
+  { value: 'direct', label: 'Direct providers', icon: 'i-lucide-key-round', slot: 'direct' },
+  { value: 'proxy', label: 'Proxies', icon: 'i-lucide-route', slot: 'proxy' },
+  {
+    value: 'personal',
+    label: 'Personal subscriptions',
+    icon: 'i-lucide-user',
+    slot: 'personal',
+  },
+]
+
 // Only commercial coding-plan vendors that permit team/organization use are poolable here.
 // Claude, GLM and ChatGPT/Codex are licensed for individual use only, so they are connected
 // per-user in the "Personal subscriptions" section below (PersonalSubscriptionSection).
@@ -102,96 +117,112 @@ function vendorLabel(v: SubscriptionVendor): string {
 <template>
   <UModal v-model:open="open" title="LLM Vendors" :ui="{ content: 'max-w-2xl' }">
     <template #body>
-      <div class="space-y-5">
-        <p class="text-sm text-slate-400">
-          Connect a <strong>commercial</strong> coding-plan subscription (Kimi, DeepSeek) that
-          permits team/organization use to run agent steps on the Claude Code harness instead of an
-          API key. Tokens are stored encrypted, pooled, and rotated by usage. Subscription models
-          are flat-rate quota — they don’t draw on your spend budget. Individual-use subscriptions
-          (Claude, GLM, ChatGPT/Codex) are connected per-user in the Personal subscriptions section
-          below.
-        </p>
-
-        <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
-          Workspace pool (commercial coding plans)
-        </h4>
-
-        <!-- vendor picker -->
-        <div class="flex flex-wrap items-end gap-3">
-          <UFormField label="Vendor">
-            <USelect
-              v-model="vendor"
-              :items="visibleVendors.map((v) => ({ label: v.label, value: v.value }))"
-              class="w-64"
-            />
-          </UFormField>
-        </div>
-
-        <!-- guided steps -->
-        <ol
-          class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
-        >
-          <li v-for="(step, i) in steps" :key="i">{{ step }}</li>
-        </ol>
-
-        <!-- add form -->
-        <div class="space-y-2">
-          <UFormField label="Label (optional)">
-            <UInput v-model="label" placeholder="e.g. work account" />
-          </UFormField>
-          <UFormField label="Token">
-            <UTextarea
-              v-model="token"
-              :rows="3"
-              :placeholder="tokenPlaceholder"
-              class="font-mono"
-            />
-          </UFormField>
-          <div class="flex justify-end">
-            <UButton :loading="busy" :disabled="!token.trim()" icon="i-lucide-plus" @click="add()">
-              Connect
-            </UButton>
-          </div>
-        </div>
-
-        <!-- connected pool -->
-        <div v-if="creds.credentials.length" class="space-y-2">
-          <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
-            Connected ({{ creds.credentials.length }})
-          </h4>
-          <div
-            v-for="c in creds.credentials"
-            :key="c.id"
-            class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
-          >
-            <div>
-              <span class="font-medium text-slate-200">{{ c.label }}</span>
-              <span class="ml-2 text-xs text-slate-500">{{ vendorLabel(c.vendor) }}</span>
-              <div class="text-[11px] tabular-nums text-slate-500">
-                {{ (c.inputTokens + c.outputTokens).toLocaleString() }} tok this window ·
-                {{ c.requestCount }} run{{ c.requestCount === 1 ? '' : 's' }}
+      <UTabs
+        v-model="activeTab"
+        :items="tabs"
+        variant="link"
+        :ui="{ root: 'gap-4', list: 'overflow-x-auto' }"
+      >
+        <!-- Workspace pool (commercial coding-plan subscriptions) -->
+        <template #pool>
+          <div class="space-y-5">
+            <p class="text-sm text-slate-400">
+              Connect a <strong>commercial</strong> coding-plan subscription (Kimi, DeepSeek) that
+              permits team/organization use to run agent steps on the Claude Code harness instead of
+              an API key. Tokens are stored encrypted, pooled, and rotated by usage. Subscription
+              models are flat-rate quota — they don’t draw on your spend budget. Individual-use
+              subscriptions (Claude, GLM, ChatGPT/Codex) are connected per-user in the Personal
+              subscriptions tab.
+            </p>
+
+            <!-- vendor picker -->
+            <div class="flex flex-wrap items-end gap-3">
+              <UFormField label="Vendor">
+                <USelect
+                  v-model="vendor"
+                  :items="visibleVendors.map((v) => ({ label: v.label, value: v.value }))"
+                  class="w-64"
+                />
+              </UFormField>
+            </div>
+
+            <!-- guided steps -->
+            <ol
+              class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
+            >
+              <li v-for="(step, i) in steps" :key="i">{{ step }}</li>
+            </ol>
+
+            <!-- add form -->
+            <div class="space-y-2">
+              <UFormField label="Label (optional)">
+                <UInput v-model="label" placeholder="e.g. work account" />
+              </UFormField>
+              <UFormField label="Token">
+                <UTextarea
+                  v-model="token"
+                  :rows="3"
+                  :placeholder="tokenPlaceholder"
+                  class="font-mono"
+                />
+              </UFormField>
+              <div class="flex justify-end">
+                <UButton
+                  :loading="busy"
+                  :disabled="!token.trim()"
+                  icon="i-lucide-plus"
+                  @click="add()"
+                >
+                  Connect
+                </UButton>
+              </div>
+            </div>
+
+            <!-- connected pool -->
+            <div v-if="creds.credentials.length" class="space-y-2">
+              <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                Connected ({{ creds.credentials.length }})
+              </h4>
+              <div
+                v-for="c in creds.credentials"
+                :key="c.id"
+                class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+              >
+                <div>
+                  <span class="font-medium text-slate-200">{{ c.label }}</span>
+                  <span class="ml-2 text-xs text-slate-500">{{ vendorLabel(c.vendor) }}</span>
+                  <div class="text-[11px] tabular-nums text-slate-500">
+                    {{ (c.inputTokens + c.outputTokens).toLocaleString() }} tok this window ·
+                    {{ c.requestCount }} run{{ c.requestCount === 1 ? '' : 's' }}
+                  </div>
+                </div>
+                <UButton
+                  icon="i-lucide-trash-2"
+                  color="error"
+                  variant="ghost"
+                  size="xs"
+                  @click="remove(c.id)"
+                />
               </div>
             </div>
-            <UButton
-              icon="i-lucide-trash-2"
-              color="error"
-              variant="ghost"
-              size="xs"
-              @click="remove(c.id)"
-            />
           </div>
-        </div>
+        </template>
+
+        <!-- Direct provider API keys (OpenAI/Anthropic/Qwen/DeepSeek/Moonshot), pooled -->
+        <template #direct>
+          <ProvidersApiKeysSection category="direct" />
+        </template>
 
-        <!-- direct provider API keys (OpenAI/Anthropic/Qwen/DeepSeek/Moonshot), pooled -->
-        <div class="border-t border-slate-800 pt-5">
-          <ProvidersApiKeysSection />
-        </div>
+        <!-- Proxies / gateways (OpenRouter, LiteLLM): intermediaries that front many vendors -->
+        <template #proxy>
+          <ProvidersApiKeysSection category="proxy" />
+        </template>
 
-        <!-- personal (individual-usage) subscriptions: Claude / GLM / Codex, per-user -->
-        <div class="border-t border-slate-800 pt-5">
+        <!-- Personal (individual-usage) subscriptions: Claude / GLM / Codex, per-user -->
+        <template #personal>
           <ProvidersPersonalSubscriptionSection />
-        </div>
-      </div>
+        </template>
+      </UTabs>
     </template>
   </UModal>
 </template>

package/app/components/tasks/TaskImportModal.vue

@@ -24,7 +24,7 @@ const ref_ = ref('')
 const importing = ref(false)
 
 const sourceItems = computed(() =>
-  tasks.connectedSources.map((s) => ({ label: s.label, value: s.source })),
+  tasks.offeredSources.map((s) => ({ label: s.label, value: s.source })),
 )
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 
@@ -52,7 +52,7 @@ const creatingId = ref<string | null>(null)
 watch(open, (isOpen) => {
   if (isOpen) {
     ref_.value = ''
-    source.value = ui.taskImport?.source ?? tasks.connectedSources[0]?.source ?? undefined
+    source.value = ui.taskImport?.source ?? tasks.offeredSources[0]?.source ?? undefined
     containerId.value = containerItems.value[0]?.value
     creatingId.value = null
     tasks.loadTasks().catch(() => {})
@@ -102,10 +102,10 @@ async function doImport() {
 <template>
   <UModal v-model:open="open" title="Import from a task source">
     <template #body>
-      <!-- Empty state: no connections -->
-      <div v-if="!tasks.anyConnected" class="space-y-3 text-center">
+      <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
+      <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
         <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
-        <p class="text-sm text-slate-400">Connect a task source first.</p>
+        <p class="text-sm text-slate-400">Connect or enable a task source first.</p>
         <div class="flex justify-center gap-2">
           <UButton
             v-for="s in tasks.sources"
@@ -115,7 +115,7 @@ async function doImport() {
             :icon="s.icon"
             @click="ui.openTaskConnect(s.source)"
           >
-            Connect {{ s.label }}
+            {{ s.available ? `Enable ${s.label}` : `Connect ${s.label}` }}
           </UButton>
         </div>
       </div>

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
-// Connect (or disconnect) the workspace to a task source. The form is rendered
-// generically from the source's descriptor (credential fields), so the same
-// modal serves Jira and any future tracker. Secret credentials are write-only —
-// the backend never returns them, so on reload we show "Connected" with empty
-// fields.
+// Connect/manage a task source for the workspace. The form is rendered generically
+// from the source's descriptor (credential fields), so the same modal serves Jira
+// and any future credentialed tracker. A credentialless source (GitHub Issues)
+// has no form — it rides the workspace's installed GitHub App — so the modal just
+// offers the on/off toggle. Secret credentials are write-only: the backend never
+// returns them, so on reload we show "Connected" with empty fields.
+//
+// The on/off toggle is the per-workspace switch (persisted in task_source_settings):
+// a workspace can offer GitHub repos without offering their issues, and can park a
+// connected Jira without disconnecting it. The toggle only applies once a source is
+// available (Jira connected / the GitHub App installed) — there is nothing to offer
+// before that.
 const ui = useUiStore()
 const tasks = useTasksStore()
 const toast = useToast()
@@ -12,6 +19,10 @@ const source = computed(() => ui.taskConnect?.source ?? null)
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 const connection = computed(() => (source.value ? tasks.connectionFor(source.value) : undefined))
 const connected = computed(() => connection.value !== undefined)
+// A credentialless source (GitHub Issues) reuses the installed GitHub App: no form.
+const credentialless = computed(() => (descriptor.value?.credentialFields.length ?? 0) === 0)
+// Usable right now: a credentialed source is connected; GitHub Issues' App is installed.
+const available = computed(() => descriptor.value?.available ?? false)
 
 const open = computed({
   get: () => ui.taskConnect !== null,
@@ -23,24 +34,19 @@ const open = computed({
 /** One value per credential field, reset whenever the modal (re)opens. */
 const values = ref<Record<string, string>>({})
 const saving = ref(false)
+const togglingEnabled = ref(false)
 
 watch(open, (isOpen) => {
   if (isOpen) values.value = {}
 })
 
-// A source with no credential fields (e.g. GitHub, which reuses the workspace's
-// installed GitHub App) connects with an empty bag — there is nothing to fill in,
-// so the button is enabled as long as it isn't already connected.
-const credentialless = computed(() => (descriptor.value?.credentialFields.length ?? 0) === 0)
-
 const canSubmit = computed(() => {
   const fields = descriptor.value?.credentialFields ?? []
-  if (credentialless.value) return !connected.value
   return fields.every((f) => (values.value[f.key] ?? '').trim())
 })
 
 async function submit() {
-  if (!canSubmit.value || !source.value) return
+  if (!canSubmit.value || !source.value || credentialless.value) return
   const credentials: Record<string, string> = {}
   for (const f of descriptor.value!.credentialFields) {
     credentials[f.key] = values.value[f.key]!.trim()
@@ -53,7 +59,8 @@ async function submit() {
       icon: 'i-lucide-check',
       color: 'success',
     })
-    ui.closeTaskConnect()
+    // Re-probe so `available`/`enabled` reflect the new connection.
+    await tasks.probe()
   } catch (e) {
     toast.add({
       title: 'Could not connect',
@@ -69,28 +76,53 @@ async function submit() {
 async function disconnect() {
   if (!source.value) return
   await tasks.disconnect(source.value)
+  await tasks.probe()
   toast.add({
     title: `${descriptor.value?.label ?? 'Source'} disconnected`,
     icon: 'i-lucide-unplug',
   })
   ui.closeTaskConnect()
 }
+
+async function toggleEnabled(enabled: boolean) {
+  if (!source.value) return
+  togglingEnabled.value = true
+  try {
+    await tasks.setEnabled(source.value, enabled)
+  } catch (e) {
+    toast.add({
+      title: 'Could not update',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    togglingEnabled.value = false
+  }
+}
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+  <UModal v-model:open="open" :title="descriptor?.label ?? 'Task source'">
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-sm text-slate-400">
-          Connect {{ descriptor.label }} to import issues and attach them to tasks as agent context.
+          {{ descriptor.label }} lets you import issues and attach them to tasks as agent context.
         </p>
 
-        <p v-if="credentialless" class="text-[11px] text-slate-500">
-          This source uses the GitHub App already installed on your workspace — there are no
-          credentials to enter. Connecting just enables linking its issues to tasks.
-        </p>
+        <!-- Credentialless source (GitHub Issues): no form, just the on/off toggle. -->
+        <template v-if="credentialless">
+          <p class="text-[11px] text-slate-500">
+            This source uses the GitHub App already installed on your workspace — there are no
+            credentials to enter.
+          </p>
+          <p v-if="!available" class="text-[11px] text-amber-400">
+            Install the workspace's GitHub App (connect GitHub repos) to offer {{ descriptor.label }}.
+          </p>
+        </template>
 
-        <div v-else class="space-y-3">
+        <!-- Credentialed source (Jira): the connect form, shown until connected. -->
+        <div v-else-if="!connected" class="space-y-3">
           <UFormField
             v-for="field in descriptor.credentialFields"
             :key="field.key"
@@ -105,6 +137,27 @@ async function disconnect() {
             />
           </UFormField>
         </div>
+        <p v-else class="text-[11px] text-slate-500">
+          Connected{{ connection?.label ? ` to ${connection.label}` : '' }}.
+        </p>
+
+        <!-- The per-workspace on/off toggle, available once the source is usable. -->
+        <div
+          v-if="available"
+          class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+        >
+          <div class="text-sm">
+            <div class="font-medium text-slate-200">Offer to this workspace</div>
+            <div class="text-[11px] text-slate-500">
+              When off, {{ descriptor.label }} is hidden from import and linking.
+            </div>
+          </div>
+          <USwitch
+            :model-value="descriptor.enabled"
+            :loading="togglingEnabled"
+            @update:model-value="toggleEnabled"
+          />
+        </div>
 
         <div class="flex items-center justify-between gap-2 pt-1">
           <UButton
@@ -118,6 +171,7 @@ async function disconnect() {
           </UButton>
           <div v-else />
           <UButton
+            v-if="!credentialless"
             color="primary"
             icon="i-lucide-plug"
             :loading="saving"

package/app/composables/api/tasks.ts

@@ -3,8 +3,8 @@ import type {
   SourceTask,
   TaskConnection,
   TaskSearchResult,
-  TaskSourceDescriptor,
   TaskSourceKind,
+  TaskSourceState,
 } from '~/types/domain'
 import type { PutTrackerSettingsInput, TrackerSettings } from '~/types/tracker'
 import type { ApiContext } from './context'
@@ -13,10 +13,17 @@ import type { ApiContext } from './context'
 export function tasksApi({ http, ws }: ApiContext) {
   return {
     // ---- task sources (Jira, …) ------------------------------------------
-    // The configured trackers + their connect/import metadata. A 503 means the
-    // integration is off (the store hides its UI on any error here).
+    // The configured trackers + their connect/import metadata + the workspace's
+    // per-source state (available + enabled). A 503 means the integration is off
+    // (the store hides its UI on any error here).
     listTaskSources: (workspaceId: string) =>
-      http<{ sources: TaskSourceDescriptor[] }>(`${ws(workspaceId)}/task-sources`),
+      http<{ sources: TaskSourceState[] }>(`${ws(workspaceId)}/task-sources`),
+
+    setTaskSourceEnabled: (workspaceId: string, source: TaskSourceKind, enabled: boolean) =>
+      http(`${ws(workspaceId)}/task-sources/${source}/enabled`, {
+        method: 'PUT',
+        body: { enabled },
+      }),
 
     listTaskConnections: (workspaceId: string) =>
       http<{ connections: TaskConnection[] }>(`${ws(workspaceId)}/task-sources/connections`),

package/app/stores/tasks.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import type { SourceTask, TaskConnection, TaskSourceDescriptor } from '~/types/domain'
+import type { SourceTask, TaskConnection, TaskSourceState } from '~/types/domain'
 import { useTasksStore } from '~/stores/tasks'
 
 /** Minimal SourceTask factory — only the fields the read getters care about. */
@@ -23,13 +23,15 @@ function sourceTask(externalId: string, over: Partial<SourceTask> = {}): SourceT
   }
 }
 
-const jiraDescriptor: TaskSourceDescriptor = {
+const jiraDescriptor: TaskSourceState = {
   source: 'jira',
   label: 'Jira',
   icon: 'i-lucide-square-check',
   credentialFields: [],
   refLabel: 'Issue key or URL',
   refPlaceholder: 'PROJ-123',
+  available: true,
+  enabled: true,
 }
 
 const jiraConnection: TaskConnection = { source: 'jira', label: 'acme', connectedAt: 0 }

package/app/stores/tasks.ts

@@ -4,8 +4,8 @@ import type {
   SourceTask,
   TaskConnection,
   TaskSearchResult,
-  TaskSourceDescriptor,
   TaskSourceKind,
+  TaskSourceState,
 } from '~/types/domain'
 import { useWorkspaceStore } from '~/stores/workspace'
 
@@ -27,9 +27,9 @@ export const useTasksStore = defineStore('tasks', () => {
 
   /** null = unknown (not probed yet), true/false = integration on/off. */
   const available = ref<boolean | null>(null)
-  /** The configured sources and their connect/import descriptors. */
-  const sources = ref<TaskSourceDescriptor[]>([])
-  /** Live connections, one per connected source. */
+  /** The configured sources, each with its descriptor + per-workspace state (available + enabled). */
+  const sources = ref<TaskSourceState[]>([])
+  /** Live connections, one per connected (credentialed) source. */
   const connections = ref<TaskConnection[]>([])
   const tasks = ref<SourceTask[]>([])
   const loading = ref(false)
@@ -40,7 +40,11 @@ export const useTasksStore = defineStore('tasks', () => {
   )
   const anyConnected = computed(() => connections.value.length > 0)
 
-  function descriptorFor(source: TaskSourceKind): TaskSourceDescriptor | undefined {
+  /** Sources offered for import: available (connected / App installed) AND enabled. */
+  const offeredSources = computed(() => sources.value.filter((s) => s.available && s.enabled))
+  const anyOffered = computed(() => offeredSources.value.length > 0)
+
+  function descriptorFor(source: TaskSourceKind): TaskSourceState | undefined {
     return sources.value.find((s) => s.source === source)
   }
 
@@ -104,6 +108,13 @@ export const useTasksStore = defineStore('tasks', () => {
     connections.value = connections.value.filter((c) => c.source !== source)
   }
 
+  /** Enable or disable a source for the workspace (the per-workspace toggle). */
+  async function setEnabled(source: TaskSourceKind, enabled: boolean) {
+    await api.setTaskSourceEnabled(workspace.requireId(), source, enabled)
+    const i = sources.value.findIndex((s) => s.source === source)
+    if (i >= 0) sources.value[i] = { ...sources.value[i]!, enabled }
+  }
+
   /** Load the imported issues for the workspace (across sources). */
   async function loadTasks() {
     tasks.value = await api.listTasks(workspace.requireId())
@@ -160,6 +171,8 @@ export const useTasksStore = defineStore('tasks', () => {
     loading,
     connectedSources,
     anyConnected,
+    offeredSources,
+    anyOffered,
     descriptorFor,
     connectionFor,
     isConnected,
@@ -167,6 +180,7 @@ export const useTasksStore = defineStore('tasks', () => {
     probe,
     connect,
     disconnect,
+    setEnabled,
     loadTasks,
     importTask,
     search,

package/app/types/tasks.ts

@@ -26,6 +26,17 @@ export interface TaskSourceDescriptor {
   searchable?: boolean
 }
 
+/**
+ * A source's descriptor plus the workspace's live state: whether it's usable now
+ * (`available` — a credentialed source is connected; GitHub Issues' App is
+ * installed) and whether the workspace offers it (`enabled`, the per-workspace
+ * toggle, default true). `available && enabled` is what makes a source offered.
+ */
+export interface TaskSourceState extends TaskSourceDescriptor {
+  available: boolean
+  enabled: boolean
+}
+
 /** A workspace's connection to a task source (never carries credentials). */
 export interface TaskConnection {
   source: TaskSourceKind

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.10.0",
+  "version": "0.12.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",