@cat-factory/app 0.309.0 → 0.310.1

package/app/components/settings/CloudflareHandlerSection.vue

@@ -237,40 +237,43 @@ async function remove() {
         </p>
       </div>
 
-      <details class="rounded-md border border-muted/70 p-2">
-        <summary class="cursor-pointer text-2xs text-muted">
-          {{ t('settings.infrastructure.cloudflare.advanced') }}
-        </summary>
-        <div class="mt-2 space-y-2">
-          <div class="space-y-1">
-            <label class="text-2xs text-muted">{{
-              t('settings.infrastructure.cloudflare.workerTemplate')
-            }}</label>
+      <UCollapsible class="rounded-md border border-muted/70 p-2">
+        <template #default="{ open }">
+          <UButton
+            variant="link"
+            color="neutral"
+            size="xs"
+            :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            :label="t('settings.infrastructure.cloudflare.advanced')"
+            :ui="{ base: 'w-full justify-start gap-1 p-0 text-2xs text-muted' }"
+          />
+        </template>
+        <template #content>
+          <div class="mt-2 space-y-2">
             <!-- The placeholder is a FORMAT EXAMPLE containing vue-i18n metacharacters, so it
                  stays inline rather than becoming a catalog key. -->
-            <UInput
-              v-model="workerNameTemplate"
+            <UFormField size="xs" :label="t('settings.infrastructure.cloudflare.workerTemplate')">
+              <UInput
+                v-model="workerNameTemplate"
+                size="xs"
+                placeholder="cat-factory-pr-{{pullNumber}}"
+              />
+            </UFormField>
+            <UFormField
               size="xs"
-              placeholder="cat-factory-pr-{{pullNumber}}"
-            />
+              :label="t('settings.infrastructure.cloudflare.environmentTemplate')"
+            >
+              <UInput v-model="environmentNameTemplate" size="xs" placeholder="pr-{{pullNumber}}" />
+            </UFormField>
+            <p class="text-2xs text-dimmed">
+              {{ t('settings.infrastructure.cloudflare.templateHint') }}
+            </p>
+            <UFormField size="xs" :label="t('settings.infrastructure.cloudflare.apiBaseUrl')">
+              <UInput v-model="apiBaseUrl" size="xs" placeholder="https://api.github.com" />
+            </UFormField>
           </div>
-          <div class="space-y-1">
-            <label class="text-2xs text-muted">{{
-              t('settings.infrastructure.cloudflare.environmentTemplate')
-            }}</label>
-            <UInput v-model="environmentNameTemplate" size="xs" placeholder="pr-{{pullNumber}}" />
-          </div>
-          <p class="text-2xs text-dimmed">
-            {{ t('settings.infrastructure.cloudflare.templateHint') }}
-          </p>
-          <div class="space-y-1">
-            <label class="text-2xs text-muted">{{
-              t('settings.infrastructure.cloudflare.apiBaseUrl')
-            }}</label>
-            <UInput v-model="apiBaseUrl" size="xs" placeholder="https://api.github.com" />
-          </div>
-        </div>
-      </details>
+        </template>
+      </UCollapsible>
 
       <div class="flex items-center gap-2">
         <UButton size="xs" :disabled="!canSave || busy" @click="save">

package/app/components/settings/ConsensusGroupsSection.vue

@@ -14,6 +14,7 @@ import type { ConsensusGroup, ConsensusStrategy } from '~/types/consensus'
 import { isSelectable } from '~/stores/models'
 import { uid } from '~/utils/catalog'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 const groups = useConsensusGroupsStore()
@@ -116,6 +117,17 @@ const selectableModelIds = computed(() => {
     .map((m) => ({ id: m.id, label: m.label }))
 })
 
+// "Inherit the step's model" is a NAMED sentinel in the picker, never an empty string and never
+// `undefined`: a Select reserves both for "nothing selected", so an item carrying one either
+// throws (empty string) or renders the placeholder over its own label (undefined). One item list
+// serves both pickers; each binding below maps the sentinel to what its field holds on the wire,
+// which is `undefined` for a participant and an empty string for the synthesizer.
+const STEP_MODEL = '__step__'
+const modelItems = computed(() => [
+  { label: t('settings.consensusGroups.editor.stepModel'), value: STEP_MODEL },
+  ...selectableModelIds.value.map((m) => ({ label: m.label, value: m.id })),
+])
+
 /**
  * A threshold field's value as the contract wants it, or undefined when the author left it blank.
  *
@@ -246,21 +258,21 @@ async function remove(group: ConsensusGroup) {
             <span class="truncate text-sm font-semibold text-app-100">{{ g.name }}</span>
             <UBadge color="neutral" variant="subtle" size="xs">{{ barLabel(g) }}</UBadge>
             <div class="ms-auto flex items-center gap-1">
-              <UButton
+              <IconButton
                 size="xs"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-pencil"
-                :title="t('settings.consensusGroups.list.editTitle')"
+                :label="t('settings.consensusGroups.list.editTitle')"
                 @click="startEdit(g)"
               />
-              <UButton
+              <IconButton
                 size="xs"
                 variant="ghost"
                 color="error"
                 icon="i-lucide-trash-2"
                 :loading="busy"
-                :title="t('settings.consensusGroups.list.deleteTitle')"
+                :label="t('settings.consensusGroups.list.deleteTitle')"
                 @click="remove(g)"
               />
             </div>
@@ -302,12 +314,7 @@ async function remove(group: ConsensusGroup) {
           <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.strategyLabel') }}
           </SectionLabel>
-          <select
-            v-model="editor.strategy"
-            class="w-full rounded-sm border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
-          >
-            <option v-for="s in STRATEGIES" :key="s.value" :value="s.value">{{ s.label }}</option>
-          </select>
+          <USelect v-model="editor.strategy" :items="STRATEGIES" size="sm" class="w-full" />
         </div>
       </div>
 
@@ -358,20 +365,20 @@ async function remove(group: ConsensusGroup) {
             class="min-w-40 flex-1"
             :placeholder="t('settings.consensusGroups.editor.framingPlaceholder')"
           />
-          <select
-            v-model="p.modelId"
-            class="w-44 rounded-sm border border-muted bg-default px-1.5 py-1 text-xs text-toned"
-          >
-            <option :value="undefined">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
-            <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
-          </select>
-          <UButton
+          <USelect
+            :model-value="p.modelId || STEP_MODEL"
+            :items="modelItems"
+            size="xs"
+            class="w-44"
+            @update:model-value="p.modelId = $event === STEP_MODEL ? undefined : String($event)"
+          />
+          <IconButton
             icon="i-lucide-x"
             color="error"
             variant="ghost"
             size="xs"
             :disabled="editor.participants.length <= 2"
-            :title="t('pipeline.builder.removeParticipant')"
+            :label="t('pipeline.builder.removeParticipant')"
             @click="removeParticipant(index)"
           />
         </div>
@@ -382,13 +389,15 @@ async function remove(group: ConsensusGroup) {
           <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.synthesizerLabel') }}
           </SectionLabel>
-          <select
-            v-model="editor.synthesizerModelId"
-            class="w-full rounded-sm border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
-          >
-            <option value="">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
-            <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
-          </select>
+          <USelect
+            :model-value="editor.synthesizerModelId || STEP_MODEL"
+            :items="modelItems"
+            size="sm"
+            class="w-full"
+            @update:model-value="
+              editor.synthesizerModelId = $event === STEP_MODEL ? '' : String($event)
+            "
+          />
         </div>
         <div v-if="editor.strategy === 'debate'">
           <SectionLabel as="label" class="mb-1 block">
@@ -400,10 +409,11 @@ async function remove(group: ConsensusGroup) {
 
       <!-- the estimate bar -->
       <div class="space-y-2 rounded-lg border border-default bg-app-950/40 p-3">
-        <label class="flex items-center gap-2 text-xs text-toned">
-          <input v-model="editor.gated" type="checkbox" class="accent-app-success-500" />
-          {{ t('settings.consensusGroups.editor.gatedLabel') }}
-        </label>
+        <UCheckbox
+          v-model="editor.gated"
+          size="xs"
+          :label="t('settings.consensusGroups.editor.gatedLabel')"
+        />
         <p class="text-2xs text-dimmed">
           {{ t('settings.consensusGroups.editor.gatedHint') }}
         </p>

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -514,21 +514,24 @@ function toastRemoved() {
 
       <!-- Local mode: a personal override for THIS machine, layered over the workspace handler. -->
       <div v-if="userOverridesOn" class="border-t border-default pt-2">
-        <SectionLabel
-          as="button"
-          type="button"
-          class="flex w-full items-center gap-1.5 text-start hover:text-default"
+        <UButton
+          color="neutral"
+          variant="link"
+          class="group w-full p-0"
+          :aria-expanded="showKubeOverride"
           @click="showKubeOverride = !showKubeOverride"
         >
-          <UIcon
-            :name="showKubeOverride ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-            class="h-3.5 w-3.5"
-          />
-          {{ t('settings.infrastructure.handler.personalOverride') }}
-          <UBadge v-if="kubeUserHandler" color="primary" variant="subtle" size="sm">
-            {{ t('settings.infrastructure.handler.overrideActive') }}
-          </UBadge>
-        </SectionLabel>
+          <SectionLabel as="span" class="flex w-full items-center gap-1.5 group-hover:text-default">
+            <UIcon
+              :name="showKubeOverride ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+              class="h-3.5 w-3.5"
+            />
+            {{ t('settings.infrastructure.handler.personalOverride') }}
+            <UBadge v-if="kubeUserHandler" color="primary" variant="subtle" size="sm">
+              {{ t('settings.infrastructure.handler.overrideActive') }}
+            </UBadge>
+          </SectionLabel>
+        </UButton>
         <div v-if="showKubeOverride" class="mt-2 space-y-2">
           <p class="text-2xs text-dimmed">
             {{ t('settings.infrastructure.handler.personalOverrideHint') }}

package/app/components/settings/InfrastructureBackendPicker.vue

@@ -199,6 +199,16 @@ const items = computed<PickerItem[]>(() => {
   return out
 })
 
+// The same list in the shape URadioGroup reads. `desc` is optional on a PickerItem and an empty
+// string renders an empty description line, so it is dropped rather than passed through blank.
+const backendItems = computed(() =>
+  items.value.map((item) => ({
+    value: item.id,
+    label: item.label,
+    ...(item.desc ? { description: item.desc } : {}),
+  })),
+)
+
 // The active-line label: prefer the registered connection's concrete kind over the generic
 // "delegated" label so "Active: Kubernetes cluster" reads truthfully.
 const activeLabel = computed(() => {
@@ -275,23 +285,13 @@ const labelKey = computed(() =>
       {{ t('settings.infrastructure.active', { backend: activeLabel }) }}
     </p>
 
-    <div class="space-y-1.5" :data-testid="`${axis}-backend-options`">
-      <label v-for="item in items" :key="item.id" class="flex cursor-pointer items-start gap-2">
-        <input
-          type="radio"
-          class="mt-1"
-          :value="item.id"
-          :checked="item.id === selected"
-          :disabled="saving"
-          :data-testid="`${axis}-backend-${item.id}`"
-          @change="select(item.id)"
-        />
-        <span class="min-w-0">
-          <span class="text-sm text-default">{{ item.label }}</span>
-          <span v-if="item.desc" class="block text-2xs text-muted">{{ item.desc }}</span>
-        </span>
-      </label>
-    </div>
+    <URadioGroup
+      :model-value="selected"
+      :items="backendItems"
+      :disabled="saving"
+      :data-testid="`${axis}-backend-options`"
+      @update:model-value="select(String($event))"
+    />
 
     <p v-if="showRegisterHint" class="text-2xs text-app-warning-300/80">
       {{ t('settings.infrastructure.registerHint') }}

package/app/components/settings/IssueTrackerPanel.vue

@@ -272,18 +272,28 @@ async function checkSetup(source: TaskSourceKind) {
       <p v-if="trackerKind === 'github' && !githubAvailable" class="text-2xs text-app-warning-400">
         <i18n-t keypath="settings.issueTracker.filing.githubHint" tag="span" scope="global">
           <template #link>
-            <button class="underline" @click="ui.openGitHub()">
+            <UButton
+              color="neutral"
+              variant="link"
+              class="p-0 text-2xs underline"
+              @click="ui.openGitHub()"
+            >
               {{ t('settings.issueTracker.filing.githubHintLink') }}
-            </button>
+            </UButton>
           </template>
         </i18n-t>
       </p>
       <p v-else-if="trackerKind === 'jira' && !jiraConnected" class="text-2xs text-app-warning-400">
         <i18n-t keypath="settings.issueTracker.filing.jiraHint" tag="span" scope="global">
           <template #link>
-            <button class="underline" @click="ui.openTaskConnect('jira')">
+            <UButton
+              color="neutral"
+              variant="link"
+              class="p-0 text-2xs underline"
+              @click="ui.openTaskConnect('jira')"
+            >
               {{ t('settings.issueTracker.filing.connectLink') }}
-            </button>
+            </UButton>
           </template>
         </i18n-t>
       </p>
@@ -293,9 +303,14 @@ async function checkSetup(source: TaskSourceKind) {
       >
         <i18n-t keypath="settings.issueTracker.filing.linearHint" tag="span" scope="global">
           <template #link>
-            <button class="underline" @click="ui.openTaskConnect('linear')">
+            <UButton
+              color="neutral"
+              variant="link"
+              class="p-0 text-2xs underline"
+              @click="ui.openTaskConnect('linear')"
+            >
               {{ t('settings.issueTracker.filing.connectLink') }}
-            </button>
+            </UButton>
           </template>
         </i18n-t>
       </p>

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -18,6 +18,7 @@ import {
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -331,13 +332,13 @@ async function remove(p: LocalRunner) {
             </div>
           </div>
           <div class="flex items-center gap-1">
-            <UButton
+            <IconButton
               icon="i-lucide-pencil"
               color="neutral"
               variant="ghost"
               size="xs"
               :disabled="busy"
-              :title="t('settings.localModelEndpoints.edit')"
+              :label="t('settings.localModelEndpoints.edit')"
               @click="selectRunner(e.provider)"
             />
             <UButton

package/app/components/settings/ModelConfigurationPanel.vue

@@ -23,6 +23,7 @@ import ConsensusGroupsSection from '~/components/settings/ConsensusGroupsSection
 import ProviderPreferenceEditor from '~/components/settings/ProviderPreferenceEditor.vue'
 import { showOverrideField } from '~/utils/uiMode'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -331,13 +332,13 @@ async function save() {
           >
             {{ t('settings.modelConfiguration.back') }}
           </UButton>
-          <UButton
+          <IconButton
             icon="i-lucide-x"
             color="neutral"
             variant="ghost"
             size="sm"
             :class="editor ? '' : 'ms-auto'"
-            :title="t('settings.modelConfiguration.closeEsc')"
+            :label="t('settings.modelConfiguration.closeEsc')"
             @click="
               () => {
                 open = false
@@ -391,32 +392,32 @@ async function save() {
                       {{ t('settings.modelConfiguration.list.default') }}
                     </UBadge>
                     <div class="ms-auto flex items-center gap-1">
-                      <UButton
+                      <IconButton
                         v-if="!p.isDefault"
                         size="xs"
                         variant="ghost"
                         color="neutral"
                         icon="i-lucide-star"
                         :loading="busy"
-                        :title="t('settings.modelConfiguration.list.setDefaultTitle')"
+                        :label="t('settings.modelConfiguration.list.setDefaultTitle')"
                         @click="setDefault(p)"
                       />
-                      <UButton
+                      <IconButton
                         size="xs"
                         variant="ghost"
                         color="neutral"
                         icon="i-lucide-pencil"
-                        :title="t('settings.modelConfiguration.list.editTitle')"
+                        :label="t('settings.modelConfiguration.list.editTitle')"
                         @click="startEdit(p)"
                       />
-                      <UButton
+                      <IconButton
                         size="xs"
                         variant="ghost"
                         color="error"
                         icon="i-lucide-trash-2"
                         :disabled="p.isDefault"
                         :loading="busy"
-                        :title="
+                        :label="
                           p.isDefault
                             ? t('settings.modelConfiguration.list.deleteDisabledTitle')
                             : t('settings.modelConfiguration.list.deleteTitle')

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -247,12 +247,13 @@ function manageKeys() {
             <li>
               <i18n-t keypath="settings.openRouterCatalog.step1" tag="span" scope="global">
                 <template #link>
-                  <a
-                    href="https://openrouter.ai/keys"
+                  <ULink
+                    raw
+                    to="https://openrouter.ai/keys"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="text-primary underline"
-                    >{{ t('settings.openRouterCatalog.step1Link') }}</a
+                    >{{ t('settings.openRouterCatalog.step1Link') }}</ULink
                   >
                 </template>
               </i18n-t>

package/app/components/settings/ProviderPreferenceEditor.vue

@@ -27,6 +27,7 @@ import {
   subscriptionOverridesOrder,
 } from '~/components/settings/ProviderPreferenceEditor.logic'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   /** The preset's stored order; empty/absent ⇒ the deployment's default order. */
@@ -154,24 +155,22 @@ function reset() {
           <p class="truncate text-2xs text-dimmed">{{ t(ROUTE_HINTS[flavor]) }}</p>
         </div>
         <div class="flex shrink-0 items-center gap-1">
-          <UButton
+          <IconButton
             size="xs"
             variant="ghost"
             color="neutral"
             icon="i-lucide-chevron-up"
             :disabled="index === 0"
-            :title="t('settings.modelConfiguration.routeOrder.moveUp')"
-            :aria-label="t('settings.modelConfiguration.routeOrder.moveUp')"
+            :label="t('settings.modelConfiguration.routeOrder.moveUp')"
             @click="move(index, -1)"
           />
-          <UButton
+          <IconButton
             size="xs"
             variant="ghost"
             color="neutral"
             icon="i-lucide-chevron-down"
             :disabled="index === order.length - 1"
-            :title="t('settings.modelConfiguration.routeOrder.moveDown')"
-            :aria-label="t('settings.modelConfiguration.routeOrder.moveDown')"
+            :label="t('settings.modelConfiguration.routeOrder.moveDown')"
             @click="move(index, 1)"
           />
         </div>

package/app/components/settings/RiskPolicyEditorRow.vue

@@ -24,6 +24,7 @@ import { RISK_POLICY_AXES, RISK_POLICY_CEILING_FIELD } from '~/utils/riskPolicy'
 import MergeClassRulesEditor from '~/components/settings/MergeClassRulesEditor.vue'
 import MergeRolePolicyEditor from '~/components/settings/MergeRolePolicyEditor.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   policy: RiskPolicyLibraryEntry
@@ -144,13 +145,13 @@ const deleteBlocked = computed(
           {{ t('settings.riskPolicy.makeDefault') }}
         </UButton>
       </template>
-      <UButton
+      <IconButton
         color="error"
         variant="ghost"
         size="xs"
         icon="i-lucide-trash-2"
         :disabled="deleteBlocked || busy?.startsWith(policy.id)"
-        :title="deleteBlockedReason"
+        :label="deleteBlockedReason"
         @click="emit('remove')"
       />
     </div>

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -99,20 +99,22 @@ function remove(id: string) {
       <span class="text-dimmed">
         {{ t('settings.serviceFragmentDefaults.footer.question') }}
       </span>
-      <button
-        type="button"
-        class="font-medium text-primary hover:underline"
+      <UButton
+        color="primary"
+        variant="link"
+        class="p-0 text-2xs font-medium text-primary hover:underline"
         @click="ui.openFragmentLibrary()"
       >
         {{ t('settings.serviceFragmentDefaults.footer.manageBoard') }}
-      </button>
-      <button
-        type="button"
-        class="font-medium text-primary hover:underline"
+      </UButton>
+      <UButton
+        color="primary"
+        variant="link"
+        class="p-0 text-2xs font-medium text-primary hover:underline"
         @click="ui.openAccountSettings('fragments')"
       >
         {{ t('settings.serviceFragmentDefaults.footer.manageAccount') }}
-      </button>
+      </UButton>
     </div>
   </div>
 </template>

package/app/components/skills/ReviewSkillQueue.vue

@@ -84,10 +84,11 @@ function toggle(id: string) {
           >
             <div class="min-h-0 flex-1 overflow-y-auto p-1">
               <template v-if="offered.length">
-                <button
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   v-for="s in offered"
                   :key="s.id"
-                  type="button"
                   class="flex w-full items-start gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60 disabled:cursor-not-allowed disabled:opacity-40"
                   :class="selectedSet.has(s.id) ? 'text-app-100' : 'text-toned'"
                   :disabled="atCap && !selectedSet.has(s.id)"
@@ -106,7 +107,7 @@ function toggle(id: string) {
                       {{ s.description }}
                     </span>
                   </span>
-                </button>
+                </UButton>
               </template>
               <p v-else class="px-2 py-3 text-xs text-dimmed">
                 {{ t('skills.reviewQueue.pickerEmpty') }}

package/app/components/skills/SkillLibraryManager.vue

@@ -12,6 +12,7 @@ import { useSkillLibrary } from '~/stores/skillLibrary'
 import { SKILL_GROUP_LABEL_KEYS } from '~/utils/skills'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ accountId: string }>()
 
@@ -234,29 +235,29 @@ async function unlinkSource(id: string) {
             {{ t('skills.sources.changes') }}
           </UBadge>
           <div class="ms-auto flex gap-1">
-            <UButton
+            <IconButton
               icon="i-lucide-search-check"
               size="xs"
               variant="ghost"
               :loading="rowBusy(`check:${s.id}`)"
-              :title="t('skills.sources.check')"
+              :label="t('skills.sources.check')"
               @click="checkSource(s.id)"
             />
-            <UButton
+            <IconButton
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
               :loading="rowBusy(`sync:${s.id}`)"
-              :title="t('skills.sources.sync')"
+              :label="t('skills.sources.sync')"
               @click="syncSource(s.id)"
             />
-            <UButton
+            <IconButton
               icon="i-lucide-unplug"
               size="xs"
               color="error"
               variant="ghost"
               :loading="rowBusy(`unlink:${s.id}`)"
-              :title="t('skills.sources.unlink')"
+              :label="t('skills.sources.unlink')"
               @click="unlinkSource(s.id)"
             />
           </div>