@cat-factory/app 0.236.1 → 0.237.1

package/README.md

@@ -111,12 +111,27 @@ When the backend declares the fields and the SPA only collects them, render them
 surfaces use it: an initiative preset's create form and a reusable operation's per-case form on a
 custom task type (`AddTaskModal`). Adding a third is a `:fields` binding, not a component.
 
+**Grouping is the descriptor's own, through `descriptorFieldSections`**, not a wrapper each surface
+builds: consecutive fields sharing a `section` render under one caption, and the reduction applies
+`showWhen` first, so a section whose every field is hidden renders no caption. Never re-group or
+re-order the fields at a call site, or a form renders in an order its author never wrote.
+
+**A captioned run is rendered FLAT, never as a per-run wrapper element** (`descriptorFormRows`
+carries each run's caption on the field that opens it). Run membership is derived state that shifts
+as `showWhen` reveals fields, while a field's identity does not: nesting the fields inside a wrapper
+re-parents them when a boundary moves, and Vue can only do that by unmounting and remounting. The
+remounted input is typically the one being TYPED INTO, because typing into the trigger is what moved
+the boundary, so it loses focus, caret and IME composition mid-keystroke. Keep every field a sibling
+keyed by `field.key` and the diff MOVES it instead. The same trap as keying any list by index, with a
+worse symptom: `descriptorFields.spec.ts` pins that a reveal preserves every field key.
+
 Four rules travel with it. **Validate with the shared `validateDescriptorFields`** so the submit
 button reflects exactly what the server will refuse, and **submit the shared
 `sanitizeDescriptorFields` result** so a stale answer on a since-hidden `showWhen` field never
-reaches the wire. **The labels are deployment-authored English rendered verbatim**: only the chrome
-around them (a path-invalid message, section captions) is i18n, so no descriptor string enters a
-locale catalog. And **the value-bag rules live in `utils/descriptorFields.ts`, not in the SFC**
+reaches the wire. **Every string a descriptor carries is deployment-authored English rendered
+verbatim**, labels, help, option captions and the `section` grouping captions alike: only the
+platform's own chrome around them (the path-invalid message) is i18n, so no descriptor string enters
+a locale catalog. And **the value-bag rules live in `utils/descriptorFields.ts`, not in the SFC**
 (`defaultDescriptorValues` for the initial values, `setDescriptorValue` / `setDescriptorCheckbox` /
 `toggleDescriptorGroupValue` for one edit): what an edit freezes on an entity is what a unit test
 must be able to reach, and a rule inside a component is only reachable by mounting one.

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

@@ -32,7 +32,11 @@ const { lod } = useSemanticZoom()
 const { isTouch } = useViewport()
 
 const block = computed<Block | undefined>(() => board.getBlock(props.id))
-/** This service frame is mounted on more than one board in the org. */
+/**
+ * This service frame is mounted on more than one board in the org, which is a fact about the
+ * SERVICE that only its own card can state: nothing else on the board says the work lands in a
+ * repo another board also drives.
+ */
 const isShared = computed(() => services.isSharedFrame(props.id))
 const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
 
@@ -46,18 +50,7 @@ const taskCount = computed(() => allTasks.value.length)
 const hasTasks = computed(
   () => taskCount.value > 0 || modules.value.length > 0 || initiativeBlocks.value.length > 0,
 )
-// Single pass over the tasks for both rollups (vs. one filter each).
-const taskStats = computed(() => {
-  let merged = 0
-  let prReady = 0
-  for (const t of allTasks.value) {
-    if (t.status === 'done') merged++
-    else if (t.status === 'pr_ready') prReady++
-  }
-  return { merged, prReady }
-})
-const mergedTasks = computed(() => taskStats.value.merged)
-const prTasks = computed(() => taskStats.value.prReady)
+const prTasks = computed(() => allTasks.value.filter((t) => t.status === 'pr_ready').length)
 const canvas = computed(() => board.containerSize(props.id))
 
 // Frame status is derived from its tasks — services never reach "done".
@@ -92,11 +85,6 @@ const FRAME_STATUS_HINT_KEYS: Record<BlockStatus, string> = {
 const statusHint = computed(() => t(FRAME_STATUS_HINT_KEYS[frameStatus.value]))
 
 const selected = computed(() => ui.selectedBlockId === props.id)
-// Services are always expanded to their task canvas, at every zoom level: there is no
-// chip/compact collapse, so panning is a fixed layout and zooming has no expand/collapse
-// transition to snap on. The far-chip and compact-summary branches in the template are
-// kept (gated off) so the prior behaviour is one edit away if we want chips back.
-const showExpanded = computed(() => true)
 
 // Every child whose parked run the frame badge speaks for: its tasks AND its initiative
 // blocks. An initiative is a frame child like a module and runs an ordinary pipeline (its
@@ -144,10 +132,6 @@ function openFirstApproval() {
   if (a) ui.openApprovalDetail(a.instanceId, a.approval.id)
 }
 
-function toggleExpand() {
-  ui.toggleFrame(props.id)
-}
-
 // Expanded frames are not Vue Flow-draggable (so the pane can pan through them),
 // so they're repositioned by grabbing the header instead. The whole header bar is
 // the grab surface — only the action buttons (marked `.nodrag`) opt out, so a press
@@ -164,14 +148,12 @@ function onFrameHandle(e: PointerEvent) {
 const { enter: enterFrame, leave: leaveFrame } = useFrameStacking()
 
 function addTask() {
-  ui.expandFrame(props.id)
   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).
+// Open the tracker-issue modal scoped to THIS service: the create-in target and the repo-scoped
+// issue search are narrowed to this frame and its modules (see `useContainerTargets`).
 function createTaskFromIssue() {
-  ui.expandFrame(props.id)
   ui.openTaskImport(null, props.id)
 }
 
@@ -182,12 +164,10 @@ function addRecurring() {
 // Hunt this service's tracker board for a bug worth picking up. Scoped to THIS frame, so
 // an adopted candidate lands here rather than wherever the board's first frame happens to be.
 function huntBugs() {
-  ui.expandFrame(props.id)
   ui.openBugHunt(null, props.id)
 }
 
 function createInitiative() {
-  ui.expandFrame(props.id)
   ui.openCreateInitiative(props.id)
 }
 
@@ -279,119 +259,13 @@ const ITEM_ICON: Record<string, string> = {
       />
     </div>
 
-    <!-- ===================== FAR: glanceable chip ===================== -->
-    <!-- Inert while services are always expanded (showExpanded is always true); the
-         compact branch below is reached via v-else-if and is likewise inert. -->
-    <div
-      v-if="!showExpanded && lod === 'far'"
-      class="flex w-44 items-center gap-2 rounded-xl border-2 px-3 py-3 shadow-lg backdrop-blur"
-      :class="[selected ? 'border-white' : '', pulseClass]"
-      :style="{ borderColor: accent, backgroundColor: accent + '26' }"
-    >
-      <span class="h-3 w-3 shrink-0 rounded-full" :style="{ backgroundColor: accent }" />
-      <span class="truncate text-sm font-semibold text-white">{{ block.title }}</span>
-      <UIcon
-        v-if="bootstrapping"
-        name="i-lucide-loader-circle"
-        class="ms-auto h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
-        :title="t('board.frame.bootstrapping')"
-      />
-      <UIcon
-        v-else-if="runFailed"
-        name="i-lucide-alert-triangle"
-        class="ms-auto h-3.5 w-3.5 shrink-0 text-rose-400"
-        :title="t('board.frame.runFailed')"
-      />
-      <span v-else-if="hasTasks" class="ms-auto shrink-0 text-[11px] text-slate-300">
-        {{ mergedTasks }}/{{ taskCount }}
-      </span>
-    </div>
-
-    <!-- ===================== COMPACT: summary (collapsed) ===================== -->
-    <div
-      v-else-if="!showExpanded"
-      class="w-56 overflow-hidden rounded-xl border bg-slate-900/90 shadow-xl backdrop-blur"
-      :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
-    >
-      <div class="h-1.5 w-full" :style="{ backgroundColor: accent }" />
-      <!-- bootstrap-in-progress banner -->
-      <div
-        v-if="bootstrapping"
-        class="border-b border-amber-900/50 bg-amber-950/30 px-3 py-2"
-        data-testid="bootstrap-progress"
-      >
-        <div class="flex items-center gap-1.5 text-[11px]">
-          <UIcon
-            name="i-lucide-loader-circle"
-            class="h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
-          />
-          <span class="text-amber-300">{{ t('board.frame.bootstrapping') }}</span>
-          <span v-if="bootstrapSubtasks" class="ms-auto text-amber-200/80">
-            {{ bootstrapSubtasks.completed }}/{{ bootstrapSubtasks.total }}
-          </span>
-        </div>
-        <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-amber-900/40">
-          <div
-            class="h-full rounded bg-amber-400 transition-all"
-            :style="{ width: bootstrapPct + '%' }"
-          />
-        </div>
-        <div v-if="run" class="mt-2 flex justify-end">
-          <AgentStopButton :run-id="run.runId" :kind="run.kind" size="xs" variant="ghost" />
-        </div>
-      </div>
-      <!-- failed run: shared failure banner + retry -->
-      <div v-else-if="runFailed && run" class="p-2">
-        <AgentFailureCard :run="run" variant="compact" />
-      </div>
-      <div class="space-y-2 p-3">
-        <div class="flex items-center gap-2">
-          <UIcon
-            :name="typeMeta!.icon"
-            class="h-4 w-4 shrink-0"
-            :style="{ color: typeMeta!.accent }"
-          />
-          <span class="truncate text-sm font-semibold text-white">{{ block.title }}</span>
-          <UBadge
-            v-if="isShared"
-            color="info"
-            variant="subtle"
-            size="sm"
-            class="shrink-0"
-            :title="t('board.frame.sharedTitle')"
-          >
-            {{ t('board.frame.shared') }}
-          </UBadge>
-        </div>
-        <div class="flex items-center justify-between">
-          <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm" :title="statusHint">{{
-            statusLabel
-          }}</UBadge>
-          <span class="text-[11px] text-slate-400">{{
-            t('board.frame.taskCount', { count: taskCount }, taskCount)
-          }}</span>
-        </div>
-        <button
-          type="button"
-          class="nodrag flex w-full items-center gap-1 rounded-md bg-slate-800/60 px-2 py-1 text-[10px] text-slate-300 hover:bg-slate-800"
-          @click.stop="toggleExpand"
-        >
-          <UIcon name="i-lucide-layers" class="h-3 w-3 text-slate-400" />
-          <span v-if="hasTasks">{{
-            t('board.frame.mergedOfTotal', { merged: mergedTasks, total: taskCount })
-          }}</span>
-          <span v-else>{{ t('board.frame.noTasksYet') }}</span>
-          <span v-if="prTasks" class="text-emerald-400"
-            >· {{ t('board.frame.prCount', { count: prTasks }) }}</span
-          >
-          <UIcon name="i-lucide-chevron-down" class="ms-auto h-3 w-3" />
-        </button>
-      </div>
-    </div>
-
-    <!-- ===================== EXPANDED: 2D canvas of tasks + modules ===================== -->
+    <!-- ===================== The service card: 2D canvas of tasks + modules =====================
+         There is no chip or compact variant: a service is always expanded to its task canvas, at
+         every zoom level, so panning is a fixed layout and zooming has no expand/collapse
+         transition to snap on. The two gated-off branches that used to sit here (a far-zoom chip
+         and a collapsed summary) went with the header's collapse control, since between them they
+         held the only render of the "Shared" badge, which now lives in the header below. -->
     <div
-      v-else
       class="relative overflow-visible rounded-2xl border bg-slate-900/95 shadow-2xl backdrop-blur"
       :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
     >
@@ -484,7 +358,23 @@ const ITEM_ICON: Record<string, string> = {
                 />
               </div>
               <div>
-                <div class="text-sm font-semibold text-white">{{ block.title }}</div>
+                <div class="flex items-center gap-1.5">
+                  <span class="text-sm font-semibold text-white">{{ block.title }}</span>
+                  <!-- Mounted on more than one board in the org. On the title row rather than in
+                       the action strip, because it qualifies the service's NAME: the work lands in
+                       a repo another board also drives. -->
+                  <UBadge
+                    v-if="isShared"
+                    color="info"
+                    variant="subtle"
+                    size="sm"
+                    class="shrink-0"
+                    data-testid="frame-shared"
+                    :title="t('board.frame.sharedTitle')"
+                  >
+                    {{ t('board.frame.shared') }}
+                  </UBadge>
+                </div>
                 <div class="text-[11px] text-slate-400">{{ typeMeta!.label }}</div>
               </div>
             </div>
@@ -497,8 +387,8 @@ const ITEM_ICON: Record<string, string> = {
                 >{{ statusLabel }}</UBadge
               >
               <!-- Board-authoring buttons (create task / from issue / recurring / initiative)
-                   are `board.write` — hidden for a read-only viewer, who keeps the badge +
-                   collapse toggle (view-only affordances). -->
+                   are `board.write`, hidden for a read-only viewer, who keeps the status badge
+                   (the one view-only affordance here). -->
               <template v-if="access.canWriteBoard.value">
                 <UButton
                   class="nodrag"
@@ -562,15 +452,6 @@ const ITEM_ICON: Record<string, string> = {
                   @click.stop="huntBugs"
                 />
               </template>
-              <UButton
-                class="nodrag"
-                :size="isTouch ? 'sm' : 'xs'"
-                variant="ghost"
-                color="neutral"
-                icon="i-lucide-chevron-up"
-                :title="t('board.frame.collapseTitle')"
-                @click.stop="toggleExpand"
-              />
             </div>
           </div>
 

package/app/components/common/DescriptorFields.vue

@@ -8,16 +8,18 @@
 //
 // It extends `ProviderConnectionTab.vue`'s flat-field pattern with the shapes a declared form needs:
 // `checkbox-group` (multi-select whose value is `string[]`), `path` (a repo-relative dir with inline
-// safety validation), and single-condition `showWhen` visibility. Labels/help/option captions are
-// backend-supplied English (the `describeConfig` convention); only the chrome is i18n.
+// safety validation), single-condition `showWhen` visibility, and `section` grouping captions.
+// Labels/help/option/section captions are backend-supplied English (the `describeConfig`
+// convention); only the chrome is i18n.
 //
 // The model is the typed `DescriptorFieldValues` map (scalars stay strings, `number` a number,
 // `checkbox` a boolean, `checkbox-group` a `string[]`), so it round-trips the wire contract and the
 // shared `validateDescriptorFields` / `sanitizeDescriptorFields` rules unchanged.
 import { computed } from 'vue'
-import { isDescriptorFieldVisible, isSafeRepoDirPath } from '@cat-factory/contracts'
+import { isSafeRepoDirPath } from '@cat-factory/contracts'
 import type { DescriptorField, DescriptorFieldValue, DescriptorFieldValues } from '~/types/domain'
 import {
+  descriptorFormRows,
   descriptorGroupValue,
   setDescriptorCheckbox,
   setDescriptorValue,
@@ -39,12 +41,20 @@ const props = withDefaults(
 const model = defineModel<DescriptorFieldValues>({ required: true })
 const { t } = useI18n()
 
-// Only fields whose `showWhen` holds against the current values are shown; a hidden field's stale
-// value is kept in the model (so re-showing restores it) but the server + client both drop it at
-// sanitize/validate time, so it can never freeze an unvalidated value.
-const visibleFields = computed(() =>
-  props.fields.filter((f) => isDescriptorFieldVisible(f, model.value)),
-)
+// The fields to render, each carrying the section caption that opens its run. Only fields whose
+// `showWhen` holds against the current values are shown; a hidden field's stale value is kept in the
+// model (so re-showing restores it) but the server + client both drop it at sanitize/validate time,
+// so it can never freeze an unvalidated value.
+//
+// The grouping underneath is the shared `descriptorFieldSections`, so a caption spans exactly what
+// one function says it spans, which is the same statement the boot check refuses a declaration
+// against. A form declaring no section is one uncaptioned run, i.e. byte-for-byte the flat column
+// this component always rendered.
+//
+// The rows are FLAT, and the template keeps them siblings keyed by `field.key`, because run
+// membership shifts as `showWhen` reveals fields while a field's identity does not: see
+// `descriptorFormRows` for why a per-run wrapper would remount the input being typed into.
+const rows = computed(() => descriptorFormRows(props.fields, model.value))
 
 // The value-mutation rules live in `utils/descriptorFields.ts` as pure functions over the bag (what
 // an edit does to it, including the drop-when-empty rule that keeps an unset answer from freezing),
@@ -90,76 +100,93 @@ function selectItems(field: DescriptorField) {
 </script>
 
 <template>
-  <div v-if="visibleFields.length" class="space-y-4">
-    <UFormField
-      v-for="field in visibleFields"
-      :key="field.key"
-      :label="field.label"
-      :help="field.help"
-      :required="field.required"
-      :error="pathInvalid(field) ? t('common.pathInvalid') : undefined"
-      :data-testid="`${testidPrefix}-${field.key}`"
-    >
-      <!-- checkbox-group: a vertical list of toggles whose value is the checked option set. -->
-      <div v-if="field.type === 'checkbox-group'" class="space-y-1.5">
-        <UCheckbox
-          v-for="opt in field.options ?? []"
-          :key="opt.value"
-          :model-value="groupValue(field.key).includes(opt.value)"
-          :label="opt.label"
-          :data-testid="`${testidPrefix}-${field.key}-${opt.value}`"
-          @update:model-value="
-            (v: boolean | 'indeterminate') => toggleGroup(field.key, opt.value, v === true)
-          "
-        />
-      </div>
+  <div v-if="rows.length" class="space-y-4">
+    <!-- One keyed fragment per FIELD, never per run: a run's caption rides the field that opens it,
+         so revealing a field re-captions rows in place instead of re-parenting the inputs (which
+         Vue can only do by remounting them, destroying the one being typed into). -->
+    <template v-for="{ field, caption, startsGroup } in rows" :key="field.key">
+      <!-- The section caption, rendered verbatim above its run (deployment-authored English, like
+           the field labels themselves). Its testid is the same on every caption, because a caption
+           is arbitrary Unicode a deployment writes in its own language: a spec addresses one by the
+           TEXT it is asserting about (`getByTestId(...).filter({ hasText })`) rather than by a
+           testid that would have to be slugified to be selectable. -->
+      <p
+        v-if="caption"
+        class="-mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+        :class="{ 'pt-2': startsGroup }"
+        :data-testid="`${testidPrefix}-section`"
+      >
+        {{ caption }}
+      </p>
+      <UFormField
+        :label="field.label"
+        :help="field.help"
+        :required="field.required"
+        :error="pathInvalid(field) ? t('common.pathInvalid') : undefined"
+        :class="{ 'pt-2': startsGroup && !caption }"
+        :data-testid="`${testidPrefix}-${field.key}`"
+      >
+        <!-- checkbox-group: a vertical list of toggles whose value is the checked option set. -->
+        <div v-if="field.type === 'checkbox-group'" class="space-y-1.5">
+          <UCheckbox
+            v-for="opt in field.options ?? []"
+            :key="opt.value"
+            :model-value="groupValue(field.key).includes(opt.value)"
+            :label="opt.label"
+            :data-testid="`${testidPrefix}-${field.key}-${opt.value}`"
+            @update:model-value="
+              (v: boolean | 'indeterminate') => toggleGroup(field.key, opt.value, v === true)
+            "
+          />
+        </div>
 
-      <USelect
-        v-else-if="field.type === 'select'"
-        :model-value="stringValue(field.key)"
-        :items="selectItems(field)"
-        class="w-full"
-        :placeholder="field.placeholder"
-        @update:model-value="(v: string) => set(field.key, v)"
-      />
+        <USelect
+          v-else-if="field.type === 'select'"
+          :model-value="stringValue(field.key)"
+          :items="selectItems(field)"
+          class="w-full"
+          :placeholder="field.placeholder"
+          @update:model-value="(v: string) => set(field.key, v)"
+        />
 
-      <USwitch
-        v-else-if="field.type === 'checkbox'"
-        :model-value="boolValue(field.key)"
-        @update:model-value="(v: boolean) => setCheckbox(field, v)"
-      />
+        <USwitch
+          v-else-if="field.type === 'checkbox'"
+          :model-value="boolValue(field.key)"
+          @update:model-value="(v: boolean) => setCheckbox(field, v)"
+        />
 
-      <UTextarea
-        v-else-if="field.type === 'textarea'"
-        :model-value="stringValue(field.key)"
-        :rows="3"
-        autoresize
-        class="w-full"
-        :maxlength="field.maxLength"
-        :placeholder="field.placeholder"
-        @update:model-value="(v: string) => set(field.key, v)"
-      />
+        <UTextarea
+          v-else-if="field.type === 'textarea'"
+          :model-value="stringValue(field.key)"
+          :rows="3"
+          autoresize
+          class="w-full"
+          :maxlength="field.maxLength"
+          :placeholder="field.placeholder"
+          @update:model-value="(v: string) => set(field.key, v)"
+        />
 
-      <UInput
-        v-else-if="field.type === 'number'"
-        :model-value="numberStr(field.key)"
-        type="number"
-        class="w-full font-mono"
-        :placeholder="field.placeholder"
-        @update:model-value="(v: string) => set(field.key, v === '' ? undefined : Number(v))"
-      />
+        <UInput
+          v-else-if="field.type === 'number'"
+          :model-value="numberStr(field.key)"
+          type="number"
+          class="w-full font-mono"
+          :placeholder="field.placeholder"
+          @update:model-value="(v: string) => set(field.key, v === '' ? undefined : Number(v))"
+        />
 
-      <!-- path + text/password (the untyped default): a single-line input. `path`s stay mono. -->
-      <UInput
-        v-else
-        :model-value="stringValue(field.key)"
-        :type="field.type === 'password' ? 'password' : 'text'"
-        class="w-full"
-        :class="{ 'font-mono': field.type === 'path' }"
-        :maxlength="field.maxLength"
-        :placeholder="field.placeholder"
-        @update:model-value="(v: string) => set(field.key, v)"
-      />
-    </UFormField>
+        <!-- path + text/password (the untyped default): a single-line input. `path`s stay mono. -->
+        <UInput
+          v-else
+          :model-value="stringValue(field.key)"
+          :type="field.type === 'password' ? 'password' : 'text'"
+          class="w-full"
+          :class="{ 'font-mono': field.type === 'path' }"
+          :maxlength="field.maxLength"
+          :placeholder="field.placeholder"
+          @update:model-value="(v: string) => set(field.key, v)"
+        />
+      </UFormField>
+    </template>
   </div>
 </template>

package/app/components/context/ContextAttachmentFields.vue

@@ -15,6 +15,7 @@
 // itself gated on `integrations.manage` for documents, whose ATTACH writes are member-tier while
 // storing the credential is not.
 import type { PendingContext } from '~/composables/useContextLinking'
+import { connectableSources } from '~/utils/sourcePicker'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 
@@ -48,15 +49,16 @@ const issuesConnected = computed(() => tasks.available && tasks.anyOffered)
 // connected via the App, so they never appear here); for issues, every configured tracker not yet
 // available. The connect modals are the same ones the Integrations hub opens.
 //
-// The document half is additionally empty for anyone without `integrations.manage`: connecting
-// stores a workspace credential and stays admin-tier, while attaching a document moved to the
-// member tier, so a member falls through to the disabled Attach button instead of a connect
-// action that opens a modal, takes a token and 403s.
+// The document half goes through the shared `connectableSources`, the ONE answer to "which document
+// sources could I connect", which the picker's own add tier reads too: as three near-copies these
+// disagreed about whether an unavailable integration counted.
 const { canManageIntegrations } = useWorkspaceAccess()
 const connectableDocSources = computed(() =>
-  documents.available && canManageIntegrations.value
-    ? documents.sources.filter((s) => !documents.isConnected(s.source))
-    : [],
+  connectableSources(documents.sources, {
+    isConnected: documents.isConnected,
+    canConnect: canManageIntegrations.value,
+    available: documents.available,
+  }),
 )
 const connectableIssueSources = computed(() =>
   tasks.available ? tasks.sources.filter((s) => !s.available) : [],