@cat-factory/app 0.171.0 → 0.173.0

package/app/components/context/ContextAttachmentFields.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+// Stage external context (imported documents and tracker issues) for a board block that does not
+// exist yet. Extracted verbatim from AddTaskModal so the initiative create flow gets the identical
+// affordance rather than a second, drifting copy — the two are the same UI over the same
+// `PendingContext` model, and only the guidance copy differs (hence the hint props).
+//
+// STAGED, not live: linking needs a block id, so picks are held here and committed by the host
+// once the block exists (`useContextLinking().linkPending`). The inspector's own panels are the
+// live counterpart, for a block that already exists.
+//
+// Both sections are ungated: when the relevant integration isn't connected the Attach button
+// becomes a "Connect a source" action instead of vanishing, so the capability is discoverable.
+// Connecting opens the source's connect modal OVER the host modal (both are root-mounted with
+// independent open flags), so in-progress form data survives.
+import type { PendingContext } from '~/composables/useContextLinking'
+import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
+import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
+
+const props = defineProps<{
+  /** The staged attachments; the host owns the array and commits it after creating the block. */
+  modelValue: PendingContext[]
+  /** Why attaching a document helps HERE — the one thing that differs between hosts. */
+  docsHint: string
+  /** Why attaching an issue helps HERE. */
+  issuesHint: string
+  /**
+   * The block the issue search is scoped to (the task's container / the initiative's service
+   * frame). REQUIRED by ContextIssuePicker: it is what confines a GitHub search to that
+   * service's linked repo, so there is no unscoped mode to fall back on.
+   */
+  scopeBlockId: string
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [PendingContext[]] }>()
+
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const tasks = useTasksStore()
+const { t } = useI18n()
+
+const docsConnected = computed(() => documents.available && documents.anyConnected)
+const issuesConnected = computed(() => tasks.available && tasks.anyOffered)
+
+// Sources the user could connect right now to unlock the picker, when none is connected yet: for
+// documents, every configured source without a live connection (GitHub docs are already implicitly
+// 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.
+const connectableDocSources = computed(() =>
+  documents.available ? documents.sources.filter((s) => !documents.isConnected(s.source)) : [],
+)
+const connectableIssueSources = computed(() =>
+  tasks.available ? tasks.sources.filter((s) => !s.available) : [],
+)
+const connectDocMenu = computed(() => [
+  connectableDocSources.value.map((s) => ({
+    label: s.label,
+    icon: s.icon,
+    onSelect: () => ui.openDocumentConnect(s.source),
+  })),
+])
+const connectIssueMenu = computed(() => [
+  connectableIssueSources.value.map((s) => ({
+    label: s.label,
+    icon: s.icon,
+    onSelect: () => ui.openTaskConnect(s.source),
+  })),
+])
+
+const pendingDocs = computed(() => props.modelValue.filter((c) => c.kind === 'document'))
+const pendingIssues = computed(() => props.modelValue.filter((c) => c.kind === 'task'))
+
+// Context is picked through an inline search picker rather than a dropdown that opens a second,
+// page-level modal: stacked page-level modals don't interact, so such a menu appears to open
+// something with nothing clickable. The "Attach" button toggles the relevant picker open.
+const showDocPicker = ref(false)
+const chosenDocKeys = computed(() => pendingDocs.value.map(contextKey))
+const showIssuePicker = ref(false)
+const chosenIssueKeys = computed(() => pendingIssues.value.map(contextKey))
+
+function addPending(item: PendingContext) {
+  if (props.modelValue.some((c) => contextKey(c) === contextKey(item))) return
+  emit('update:modelValue', [...props.modelValue, item])
+}
+function removePending(item: PendingContext) {
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((c) => contextKey(c) !== contextKey(item)),
+  )
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Context documents (ungated; Attach disabled until a source is connected). -->
+    <div class="space-y-2">
+      <div class="flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ t('contextAttachments.documents') }}
+        </span>
+        <UButton
+          v-if="docsConnected"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          :icon="showDocPicker ? 'i-lucide-x' : 'i-lucide-plus'"
+          @click="
+            () => {
+              showDocPicker = !showDocPicker
+            }
+          "
+        >
+          {{ showDocPicker ? t('contextAttachments.done') : t('contextAttachments.attach') }}
+        </UButton>
+        <UDropdownMenu
+          v-else-if="connectableDocSources.length > 1"
+          :items="connectDocMenu"
+          :content="{ side: 'bottom', align: 'end' }"
+        >
+          <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plug">
+            {{ t('contextAttachments.connectSource') }}
+          </UButton>
+        </UDropdownMenu>
+        <UButton
+          v-else-if="connectableDocSources.length === 1"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-plug"
+          @click="ui.openDocumentConnect(connectableDocSources[0]!.source)"
+        >
+          {{
+            t('contextAttachments.connectSourceNamed', { source: connectableDocSources[0]!.label })
+          }}
+        </UButton>
+        <UButton
+          v-else
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-plus"
+          disabled
+          :title="
+            documents.available
+              ? t('contextAttachments.attachDocDisabledConnect')
+              : t('contextAttachments.attachDocDisabledEnable')
+          "
+        >
+          {{ t('contextAttachments.attach') }}
+        </UButton>
+      </div>
+      <ContextDocumentPicker
+        v-if="showDocPicker && docsConnected"
+        :chosen-keys="chosenDocKeys"
+        @pick="addPending"
+      />
+      <div v-if="pendingDocs.length" class="space-y-1">
+        <div
+          v-for="item in pendingDocs"
+          :key="contextKey(item)"
+          class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300"
+        >
+          <UIcon
+            :name="item.icon ?? 'i-lucide-file-text'"
+            class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+          />
+          <span class="truncate">{{ item.title }}</span>
+          <UBadge
+            v-if="item.needsImport"
+            color="neutral"
+            variant="soft"
+            size="xs"
+            class="ms-1 shrink-0"
+          >
+            {{ t('contextAttachments.importsOnAdd') }}
+          </UBadge>
+          <button
+            type="button"
+            class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
+            @click="removePending(item)"
+          >
+            <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      <p v-else class="text-[11px] text-slate-500">
+        {{ docsHint }}
+      </p>
+    </div>
+
+    <!-- Context issues (ungated; Attach disabled until a tracker is connected). -->
+    <div class="space-y-2">
+      <div class="flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ t('contextAttachments.issues') }}
+        </span>
+        <UButton
+          v-if="issuesConnected"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          :icon="showIssuePicker ? 'i-lucide-x' : 'i-lucide-plus'"
+          @click="
+            () => {
+              showIssuePicker = !showIssuePicker
+            }
+          "
+        >
+          {{ showIssuePicker ? t('contextAttachments.done') : t('contextAttachments.attach') }}
+        </UButton>
+        <UDropdownMenu
+          v-else-if="connectableIssueSources.length > 1"
+          :items="connectIssueMenu"
+          :content="{ side: 'bottom', align: 'end' }"
+        >
+          <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plug">
+            {{ t('contextAttachments.connectSource') }}
+          </UButton>
+        </UDropdownMenu>
+        <UButton
+          v-else-if="connectableIssueSources.length === 1"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-plug"
+          @click="ui.openTaskConnect(connectableIssueSources[0]!.source)"
+        >
+          {{
+            t('contextAttachments.connectSourceNamed', {
+              source: connectableIssueSources[0]!.label,
+            })
+          }}
+        </UButton>
+        <UButton
+          v-else
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-plus"
+          disabled
+          :title="
+            tasks.available
+              ? t('contextAttachments.attachIssueDisabledConnect')
+              : t('contextAttachments.attachIssueDisabledEnable')
+          "
+        >
+          {{ t('contextAttachments.attach') }}
+        </UButton>
+      </div>
+      <ContextIssuePicker
+        v-if="showIssuePicker && issuesConnected"
+        :chosen-keys="chosenIssueKeys"
+        :scope-block-id="scopeBlockId"
+        @pick="addPending"
+      />
+      <div v-if="pendingIssues.length" class="space-y-1">
+        <div
+          v-for="item in pendingIssues"
+          :key="contextKey(item)"
+          class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300"
+        >
+          <UIcon
+            :name="item.icon ?? 'i-lucide-square-check'"
+            class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+          />
+          <span class="truncate">{{ item.title }}</span>
+          <UBadge
+            v-if="item.needsImport"
+            color="neutral"
+            variant="soft"
+            size="xs"
+            class="ms-1 shrink-0"
+          >
+            {{ t('contextAttachments.importsOnAdd') }}
+          </UBadge>
+          <button
+            type="button"
+            class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
+            @click="removePending(item)"
+          >
+            <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      <p v-else class="text-[11px] text-slate-500">
+        {{ issuesHint }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/docs/DocInterviewWindow.vue

@@ -2,16 +2,28 @@
 // The interactive document-interview window (WS5) — the dedicated view of the doc-authoring
 // INTERVIEWER gate. While the document run is parked between the outline and the draft, the
 // interviewer's clarifying questions (pending `qa` entries with an empty answer) are shown here;
-// the human answers them, then either CONTINUES (the interviewer re-runs and may ask follow-ups)
-// or PROCEEDS (skip remaining questions — the interviewer converges into an authoring brief and
-// the run advances to the writer). Opened via the universal result-view host as the
+// the human answers them, then either SUBMITS them (the `continue` action: the interviewer re-runs
+// and may ask follow-ups) or drafts now (the `proceed` action: skip the remaining questions — the
+// interviewer converges into an authoring brief and the run advances to the writer). The labels
+// say submit/draft-now rather than continue/proceed because the latter pair both read as "go
+// forward" and were indistinguishable in use. Opened via the universal result-view host as the
 // `doc-interviewer` step's result view. Live `docInterview` stream events patch the store, so an
 // open window follows the interview as it progresses. Mirrors InitiativePlanningWindow.vue.
+//
+// CONTINUE/PROCEED ARE ASYNC. They only record the intent on the parked step and wake the durable
+// driver; the interviewer LLM then runs for as long as it takes, and the response carries the
+// PRE-resume session. So the window must not key its body on the session alone — that renders
+// identically before and after the click, which reads as the button having done nothing. The
+// phase below folds the document RUN's status in, so the wait is visible and a failed pass says
+// so instead of leaving the human staring at questions they already submitted.
 import { computed, reactive, watch } from 'vue'
+import InterviewGateNotice from '~/components/common/InterviewGateNotice.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import { interviewGatePhase } from '~/utils/interviewGate'
 
 const board = useBoardStore()
 const docInterview = useDocInterviewStore()
+const execution = useExecutionStore()
 const { t } = useI18n()
 const access = useWorkspaceAccess()
 
@@ -21,14 +33,13 @@ const { open, blockId, close } = useResultView('doc-interview', {
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const session = computed(() => (blockId.value ? docInterview.forBlock(blockId.value) : null))
+const run = computed(() => (blockId.value ? execution.getByBlock(blockId.value) : undefined))
 
 /** Every interview exchange, with a stable key for the list + draft map. */
 const questions = computed(() =>
   (session.value?.qa ?? []).map((q, i) => ({ ...q, key: q.id ?? `q-${i}` })),
 )
 const pending = computed(() => questions.value.filter((q) => !(q.answer ?? '').trim()))
-/** The interview converged (or never started with a model): nothing left to answer. */
-const converged = computed(() => session.value?.status === 'done')
 
 // Per-question answer drafts, seeded from the entity and refreshed as new rounds arrive without
 // clobbering an answer the human is mid-edit on.
@@ -44,8 +55,31 @@ watch(
 )
 
 const resuming = computed(() => docInterview.resuming)
-/** Continue is meaningful once every pending question has a drafted answer. */
-const allAnswered = computed(() => pending.value.every((q) => drafts[q.key]?.trim()))
+
+/**
+ * The live phase (see `interviewGatePhase`). `resuming` folds in the request itself so the body
+ * swaps to the waiting state on the click rather than a beat later when the run's `running` event
+ * lands — and if the request fails, `resuming` clears and the phase falls back to whatever the run
+ * actually says, so the questions come back rather than the window sticking on a spinner.
+ */
+const phase = computed(() =>
+  resuming.value ? 'working' : interviewGatePhase(session.value?.status, run.value?.status),
+)
+/** The interview converged: the synthesized authoring brief is what the window shows. */
+const converged = computed(() => phase.value === 'converged')
+
+/**
+ * Questions still missing a drafted answer. Submit is only meaningful once this is empty — but a
+ * disabled button with no stated reason is itself a "nothing happened", so the count is rendered.
+ */
+const unanswered = computed(() => pending.value.filter((q) => !drafts[q.key]?.trim()).length)
+
+/** Why Submit is unavailable, or undefined when it is. RBAC first: it outranks a draft gap. */
+const continueBlockedReason = computed(() => {
+  if (!access.canExecuteRuns.value) return t('access.noRunExecute')
+  if (unanswered.value > 0) return t('docInterview.unanswered', { count: unanswered.value })
+  return undefined
+})
 
 /** Persist one answer if its draft differs from what's recorded. */
 async function persist(q: { id?: string; key: string; answer?: string }) {
@@ -99,9 +133,28 @@ const onProceed = () => flushThen((id) => docInterview.proceedInterview(id))
           {{ t('docInterview.intro') }}
         </p>
 
+        <!-- A pass is running: the human is waiting on the interviewer. Without this the window is
+             byte-identical to the parked state and the submit reads as a no-op. -->
+        <InterviewGateNotice
+          v-if="phase === 'working'"
+          variant="working"
+          :title="t('docInterview.working')"
+          :hint="t('docInterview.workingHint')"
+          testid="doc-interview-working"
+        />
+
+        <!-- The document run stopped before the interview settled — a dead end otherwise. -->
+        <InterviewGateNotice
+          v-else-if="phase === 'failed'"
+          variant="failed"
+          :title="t('docInterview.failed')"
+          :hint="t('docInterview.failedHint')"
+          testid="doc-interview-failed"
+        />
+
         <!-- Converged: show the synthesized authoring brief -->
         <div
-          v-if="converged"
+          v-else-if="converged"
           class="rounded-lg border border-slate-800 bg-slate-950/40 p-4"
           data-testid="doc-interview-converged"
         >
@@ -146,13 +199,21 @@ const onProceed = () => flushThen((id) => docInterview.proceedInterview(id))
       </template>
     </div>
 
-    <!-- Action rail -->
+    <!-- Action rail. Only while the run is actually parked on the human: mid-pass these would
+         re-submit a question set already in flight, and the resume is a no-op once it isn't. -->
     <footer
-      v-if="session && !converged && questions.length > 0"
+      v-if="session && phase === 'awaiting' && questions.length > 0"
       class="flex items-center justify-between gap-3 border-t border-slate-800 px-5 py-3"
     >
       <p class="text-[11px] text-slate-500">
-        {{ t('docInterview.hint') }}
+        <span
+          v-if="unanswered > 0"
+          class="text-amber-400/90"
+          data-testid="doc-interview-unanswered"
+        >
+          {{ t('docInterview.unanswered', { count: unanswered }) }}
+        </span>
+        <span v-else>{{ t('docInterview.hint') }}</span>
       </p>
       <div class="flex items-center gap-2">
         <UButton
@@ -161,7 +222,9 @@ const onProceed = () => flushThen((id) => docInterview.proceedInterview(id))
           size="sm"
           :loading="resuming"
           :disabled="!access.canExecuteRuns.value"
-          :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+          :title="
+            access.canExecuteRuns.value ? t('docInterview.proceedTitle') : t('access.noRunExecute')
+          "
           data-testid="doc-interview-proceed"
           @click="onProceed"
         >
@@ -171,8 +234,8 @@ const onProceed = () => flushThen((id) => docInterview.proceedInterview(id))
           color="primary"
           size="sm"
           :loading="resuming"
-          :disabled="!allAnswered || !access.canExecuteRuns.value"
-          :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+          :disabled="!!continueBlockedReason"
+          :title="continueBlockedReason ?? t('docInterview.continueTitle')"
           data-testid="doc-interview-continue"
           @click="onContinue"
         >

package/app/components/fragments/FragmentLibraryManager.vue

@@ -6,7 +6,7 @@
 // the merged catalog (built-in ∪ account ∪ workspace) an agent is selected from per
 // run. The account scope has no resolved/merged catalog and fetches document
 // fragments through `viaWorkspaceId` (document-source credentials are per-workspace).
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
 import type {
   DocumentSourceKind,
   FragmentOwnerKind,
@@ -16,6 +16,7 @@ import type {
 import { useFragmentLibrary, useFragmentLibraryStore } from '~/stores/fragmentLibrary'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import GitHubDocUrlImport from '~/components/fragments/GitHubDocUrlImport.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -274,6 +275,9 @@ const docRepo = ref<GitHubAvailableRepo | undefined>(undefined)
 // The staged files (repo-root-relative paths) for the selected repo. Multi-select so
 // any number of files from any nesting level can be linked in one action.
 const docFilePaths = ref<string[]>([])
+// Where the tree browser opens (repo root by default); a pasted directory URL jumps it
+// straight to the pasted folder so its files can be bulk-checked.
+const docBrowsePath = ref('')
 
 // Reset the picker (and the manual ref) whenever the selected source changes.
 watch(
@@ -282,15 +286,24 @@ watch(
     docRepoId.value = undefined
     docRepo.value = undefined
     docFilePaths.value = []
+    docBrowsePath.value = ''
     docDraft.value.ref = ''
   },
 )
 
-// A new repo selection clears the previously-staged files (they were repo-scoped).
+// A URL import wants the browser opened at the pasted folder in the SAME flush as its
+// repo selection (so the tree loads once, at the right path); a manual repo switch
+// wants the path reset instead. The import stages its target here for the watcher.
+let pendingBrowsePath: string | null = null
+
+// A new repo selection clears the previously-staged files (they were repo-scoped) and
+// re-roots the browser (a folder from the previous repo has no meaning in the new one).
 // When the repo is fully deselected, drop the cached repo too so no stale `docRepo`
 // lingers behind a now-empty picker.
 watch(docRepoId, (id) => {
   docFilePaths.value = []
+  docBrowsePath.value = pendingBrowsePath ?? ''
+  pendingBrowsePath = null
   if (id === undefined) docRepo.value = undefined
 })
 
@@ -330,6 +343,58 @@ const stagedDocRefs = computed(() =>
 /** When the rich picker drives the ref(s); otherwise the free-text field does. */
 const usingDocPicker = computed(() => showGithubDocPicker.value)
 
+/**
+ * A pasted GitHub file/directory URL resolved to a repo + location: select the repo
+ * (through the same refs the search select drives), then stage the file or jump the
+ * tree browser to the directory for bulk checking. Staging waits a tick because the
+ * `docRepoId` watcher clears the cart on a repo change.
+ */
+async function onDocUrlResolved(target: {
+  repo: GitHubAvailableRepo
+  path: string
+  kind: 'file' | 'dir'
+}) {
+  const clean = normalizeRepoPath(target.path)
+  // A file opens its parent folder (so the pick is visible in context); a dir opens itself.
+  const browseDir =
+    target.kind === 'dir'
+      ? clean
+      : clean.includes('/')
+        ? clean.slice(0, clean.lastIndexOf('/'))
+        : ''
+  if (docRepoId.value !== target.repo.githubId) {
+    pendingBrowsePath = browseDir
+    docRepo.value = target.repo
+    docRepoId.value = target.repo.githubId
+    // Let the repo-change watcher run (clears the cart, applies the browse path)
+    // before staging, or the staged file would be swept with the old repo's cart.
+    await nextTick()
+  } else {
+    docBrowsePath.value = browseDir
+  }
+  if (target.kind === 'file' && clean) {
+    if (!docFilePaths.value.includes(clean) && !docAddedPaths.value.includes(clean)) {
+      docFilePaths.value.push(clean)
+    }
+  }
+}
+
+/**
+ * The reason the "Link as living fragment" button is disabled, stated next to it —
+ * an inert button with no explanation reads as broken. Null when the button is live
+ * (or already busy linking).
+ */
+const docLinkBlockedReason = computed<string | null>(() => {
+  if (linkingDoc.value || docDraftValid.value) return null
+  if (!docDraft.value.source) return t('fragments.documents.blockedReason.noSource')
+  if (usingDocPicker.value) {
+    if (docRepoId.value === undefined) return t('fragments.documents.blockedReason.noRepo')
+    return t('fragments.documents.blockedReason.noFiles')
+  }
+  if (!docDraft.value.ref.trim()) return t('fragments.documents.blockedReason.noRef')
+  return null
+})
+
 async function linkDocumentFragment() {
   if (!docDraftValid.value) return
   linkingDoc.value = true
@@ -824,8 +889,10 @@ async function unlinkSource(id: string) {
               </UButton>
             </div>
 
-            <!-- GitHub: search a repo + browse to one or more files instead of typing the ref -->
+            <!-- GitHub: paste a file/directory URL, or search a repo + browse to one or
+                 more files, instead of typing the ref -->
             <template v-if="showGithubDocPicker">
+              <GitHubDocUrlImport @resolved="onDocUrlResolved" />
               <GitHubRepoSearchSelect v-model="docRepoId" @update:repo="docRepo = $event" />
               <div
                 v-if="docRepoId !== undefined"
@@ -838,6 +905,7 @@ async function unlinkSource(id: string) {
                   :repo-github-id="docRepoId"
                   mode="file"
                   multiple
+                  :start-path="docBrowsePath"
                   :selected-paths="docFilePaths"
                   :added-paths="docAddedPaths"
                   @toggle="toggleDocFile"
@@ -879,16 +947,26 @@ async function unlinkSource(id: string) {
               v-model="docDraft.tags"
               :placeholder="t('fragments.documents.tagsPlaceholder')"
             />
-            <UButton
-              icon="i-lucide-link"
-              size="sm"
-              :disabled="!docDraftValid"
-              :loading="linkingDoc"
-              class="self-start"
-              @click="linkDocumentFragment"
-            >
-              {{ t('fragments.documents.link') }}
-            </UButton>
+            <div class="flex items-center gap-2 self-start">
+              <UButton
+                icon="i-lucide-link"
+                size="sm"
+                :disabled="!docDraftValid"
+                :loading="linkingDoc"
+                data-testid="fragment-link-document"
+                @click="linkDocumentFragment"
+              >
+                {{ t('fragments.documents.link') }}
+              </UButton>
+              <p
+                v-if="docLinkBlockedReason"
+                class="flex items-center gap-1 text-xs text-slate-500"
+                data-testid="fragment-link-blocked-reason"
+              >
+                <UIcon name="i-lucide-info" class="h-3.5 w-3.5 shrink-0" />
+                {{ docLinkBlockedReason }}
+              </p>
+            </div>
           </div>
         </div>
       </div>