@cat-factory/app 0.93.0 → 0.95.0

package/app/components/github/AddServiceFromRepoModal.vue

@@ -10,9 +10,9 @@
 // pinned to a subdirectory. When the selected repo is a monorepo, the user
 // browses its tree and picks the service's directory before adding (and may add
 // more than one, a subset of the repo's services).
-import { refDebounced } from '@vueuse/core'
 import type { FrameRepoType, GitHubAvailableRepo } from '~/types/domain'
 import GitHubConnect from '~/components/github/GitHubConnect.vue'
+import RepoSearchEmpty from '~/components/github/RepoSearchEmpty.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
 import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
@@ -89,33 +89,27 @@ function toRepoItem(r: GitHubAvailableRepo) {
   return { label: `${r.owner}/${r.name}${suffix}`, value: r.githubId, disabled: onBoard }
 }
 
-const repoItems = computed(() => github.availableRepos.map(toRepoItem))
-
-// A wide App install (or a PAT) can expose hundreds of repos, far too many to prefetch and
-// filter in the browser — so the picker searches SERVER-SIDE. Nothing is fetched on open;
-// once the user types at least MIN_SEARCH_LEN characters the (debounced) query is sent to
-// the backend, which returns only the `owner/name` matches. Below the gate the list stays
-// empty and the field prompts for more characters.
-const MIN_SEARCH_LEN = 3
-const repoSearch = ref('')
-const repoSearchDebounced = refDebounced(repoSearch, 250)
-// Trimmed for display + the min-length gate; the backend matches case-insensitively.
-const repoQueryRaw = computed(() => repoSearchDebounced.value.trim())
-
-// True while the query is too short to search — the picker shows the "type N chars" hint.
-const belowMinChars = computed(() => repoQueryRaw.value.length < MIN_SEARCH_LEN)
+// Server-side, debounced, min-length-gated repo search (a wide App install / PAT can expose
+// hundreds of repos, too many to prefetch and filter in the browser). Shared with the doc-task
+// reference-repo picker via `useRepoSearch`; `repoResults` is this picker's own result list, so
+// the two never clobber each other. Nothing is fetched on open — the field prompts for more
+// characters below the gate; granting the App access needs no manual refresh (the next search
+// hits GitHub live).
+const {
+  search: repoSearch,
+  query: repoQueryRaw,
+  belowMinChars,
+  results: repoResults,
+  loading: repoLoading,
+  reset: resetRepoSearch,
+} = useRepoSearch()
+
+const repoItems = computed(() => repoResults.value.map(toRepoItem))
 
 // The selected repo, captured when picked (below). The loaded list is volatile — a later
-// search replaces it — so the selection can't be derived from `availableRepos` after the fact.
+// search replaces it — so the selection can't be derived from the results after the fact.
 const selectedRepo = ref<GitHubAvailableRepo | undefined>(undefined)
 
-// Fetch matches server-side as the debounced query changes; below the gate clear the list
-// so stale matches don't linger (the hint shows instead). Granting the App access needs no
-// manual refresh — the next search hits GitHub live, with no cached list to invalidate.
-watch(repoQueryRaw, (q) => {
-  void github.loadAvailableRepos(q.length >= MIN_SEARCH_LEN ? q : '')
-})
-
 // The server already filtered, so the matches ARE the loaded repos (empty below the gate).
 const queryMatches = computed(() => (belowMinChars.value ? [] : repoItems.value))
 
@@ -148,7 +142,7 @@ function toggleMonorepo(value: boolean) {
 watch(selectedRepoId, (id) => {
   if (id === undefined) selectedRepo.value = undefined
   else {
-    const found = github.availableRepos.find((r) => r.githubId === id)
+    const found = repoResults.value.find((r) => r.githubId === id)
     if (found) selectedRepo.value = found
   }
   isMonorepo.value = selectedRepo.value?.isMonorepo === true
@@ -161,7 +155,7 @@ function resetSelection() {
   selectedDirectory.value = undefined
   isMonorepo.value = false
   configuredBlockId.value = undefined
-  repoSearch.value = ''
+  resetRepoSearch()
   selectedType.value = 'service'
 }
 
@@ -296,7 +290,7 @@ function done() {
                 :items="repoMenuItems"
                 :ignore-filter="true"
                 value-key="value"
-                :loading="github.loadingAvailable"
+                :loading="repoLoading"
                 icon="i-lucide-search"
                 :placeholder="t('github.addService.searchPlaceholder')"
                 class="w-full"
@@ -312,14 +306,11 @@ function done() {
                   />
                 </template>
                 <template #empty>
-                  <span v-if="belowMinChars">
-                    {{
-                      t('github.addService.searchMinChars', { min: MIN_SEARCH_LEN }, MIN_SEARCH_LEN)
-                    }}
-                  </span>
-                  <span v-else-if="!github.loadingAvailable">{{
-                    t('github.addService.noMatches', { query: repoQueryRaw })
-                  }}</span>
+                  <RepoSearchEmpty
+                    :below-min-chars="belowMinChars"
+                    :loading="repoLoading"
+                    :query="repoQueryRaw"
+                  />
                 </template>
               </UInputMenu>
             </div>

package/app/components/github/RepoSearchEmpty.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// The empty-state body shared by the GitHub repo pickers (the add-service modal and the doc-task
+// reference-repo picker), both driven by `useRepoSearch`: below the min-length gate it prompts for
+// more characters; otherwise (once a search has settled) it reports no matches. Kept as one
+// component so the two pickers can't drift on the empty-state copy or behaviour.
+import { REPO_SEARCH_MIN_LEN } from '~/composables/useRepoSearch'
+
+defineProps<{ belowMinChars: boolean; loading: boolean; query: string }>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <span v-if="belowMinChars">
+    {{ t('github.addService.searchMinChars', { min: REPO_SEARCH_MIN_LEN }, REPO_SEARCH_MIN_LEN) }}
+  </span>
+  <span v-else-if="!loading">{{ t('github.addService.noMatches', { query }) }}</span>
+</template>

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// Reference repositories for a document-authoring task. The doc-writer agent clones each attached
+// repo READ-ONLY as a sibling checkout it may read (to reuse existing solutions as a reference)
+// while drafting — it never writes to them. Any repo the workspace's GitHub App (or the signed-in
+// user's PAT) can reach may be attached, so this reuses the SAME server-side, debounced repo
+// search as the add-service picker (`useRepoSearch`), not a filter over the synced projection.
+import type { Block, GitHubAvailableRepo, ReferenceRepo } from '~/types/domain'
+import RepoSearchEmpty from '~/components/github/RepoSearchEmpty.vue'
+
+const props = defineProps<{ block: Block }>()
+
+const { t } = useI18n()
+const github = useGitHubStore()
+const board = useBoardStore()
+
+const {
+  search: repoSearch,
+  query: repoQuery,
+  belowMinChars,
+  results: repoResults,
+  loading: repoLoading,
+  reset: resetRepoSearch,
+} = useRepoSearch()
+
+const attached = computed<ReferenceRepo[]>(() => props.block.referenceRepos ?? [])
+// Keyed by the provider-neutral repo id. The search results are `GitHubAvailableRepo`s (whose id
+// field is `githubId`), so a menu item's `githubId` is compared against this set of `repoId`s —
+// the same numeric id space on every provider.
+const attachedIds = computed(() => new Set(attached.value.map((r) => r.repoId)))
+
+// Menu items: the searched repos, an already-attached one disabled so it can't be added twice.
+const repoItems = computed(() =>
+  belowMinChars.value
+    ? []
+    : repoResults.value.map((r) => ({
+        label: `${r.owner}/${r.name}${r.personal ? t('github.addService.repoLabel.personal') : ''}`,
+        value: r.githubId,
+        disabled: attachedIds.value.has(r.githubId),
+      })),
+)
+
+// The picked repo id; watched to attach then clear (the combobox has no "add" affordance of its
+// own, so selecting a repo IS the attach action).
+const pickedId = ref<number | undefined>(undefined)
+
+watch(pickedId, (id) => {
+  if (id === undefined) return
+  const repo = repoResults.value.find((r) => r.githubId === id)
+  pickedId.value = undefined
+  if (!repo || attachedIds.value.has(id)) return
+  attach(repo)
+})
+
+function toReference(repo: GitHubAvailableRepo): ReferenceRepo {
+  return {
+    repoId: repo.githubId,
+    owner: repo.owner,
+    name: repo.name,
+    // A repo with no reported default branch is rare; fall back to `main` so the clone has a ref.
+    defaultBranch: repo.defaultBranch ?? 'main',
+    // A repo the workspace connection reaches carries that connection; a PAT-only (`personal`) repo
+    // has none, so the run clones it with the initiator's own token instead.
+    ...(repo.personal || !github.connection
+      ? {}
+      : { connectionId: github.connection.installationId }),
+  }
+}
+
+function attach(repo: GitHubAvailableRepo) {
+  board.updateBlock(props.block.id, {
+    referenceRepos: [...attached.value, toReference(repo)],
+  })
+  resetRepoSearch()
+}
+
+function detach(repoId: number) {
+  board.updateBlock(props.block.id, {
+    referenceRepos: attached.value.filter((r) => r.repoId !== repoId),
+  })
+}
+</script>
+
+<template>
+  <div data-testid="doc-reference-repos">
+    <div class="mb-1 flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        {{ t('inspector.referenceRepos.title') }}
+      </span>
+    </div>
+
+    <!-- Attached reference repos: chips with a remove control. -->
+    <div v-if="attached.length" class="mb-1.5 flex flex-wrap gap-1">
+      <UBadge
+        v-for="r in attached"
+        :key="r.repoId"
+        size="sm"
+        variant="soft"
+        color="neutral"
+        data-testid="reference-repo-chip"
+      >
+        {{ r.owner }}/{{ r.name }}
+        <UButton
+          color="neutral"
+          variant="link"
+          size="xs"
+          icon="i-lucide-x"
+          :aria-label="t('inspector.referenceRepos.remove', { repo: `${r.owner}/${r.name}` })"
+          data-testid="reference-repo-remove"
+          @click="detach(r.repoId)"
+        />
+      </UBadge>
+    </div>
+
+    <!-- The picker: only usable once the workspace's GitHub App is connected. -->
+    <UInputMenu
+      v-if="github.connected"
+      v-model="pickedId"
+      v-model:search-term="repoSearch"
+      :items="repoItems"
+      :ignore-filter="true"
+      value-key="value"
+      :loading="repoLoading"
+      icon="i-lucide-search"
+      :placeholder="t('github.addService.searchPlaceholder')"
+      class="w-full"
+      data-testid="reference-repo-search"
+    >
+      <template #empty>
+        <RepoSearchEmpty
+          :below-min-chars="belowMinChars"
+          :loading="repoLoading"
+          :query="repoQuery"
+        />
+      </template>
+    </UInputMenu>
+    <div v-else class="text-[11px] text-slate-500">
+      {{ t('inspector.referenceRepos.connectFirst') }}
+    </div>
+
+    <div class="mt-1 text-[11px] text-slate-500">
+      {{ t('inspector.referenceRepos.hint') }}
+    </div>
+  </div>
+</template>

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

@@ -480,6 +480,9 @@ const technicalLabel = computed(() => {
       </div>
     </div>
 
+    <!-- reference repositories: read-only repos the doc-writer reads while drafting (doc tasks) -->
+    <DocReferenceRepos v-if="block.taskType === 'document'" :block="block" />
+
     <!-- issue-tracker writeback overrides -->
     <div>
       <div class="mb-1 flex items-center justify-between">

package/app/components/settings/InfrastructureWindow.vue

@@ -14,6 +14,10 @@ import type { ProviderConnectionKind } from '~/types/providerConnections'
 import InfrastructureBackendPicker from '~/components/settings/InfrastructureBackendPicker.vue'
 import InfraHandlersConfigurator from '~/components/settings/InfraHandlersConfigurator.vue'
 import LocalContainerPoolSettings from '~/components/settings/LocalContainerPoolSettings.vue'
+import SharedStacksPanel from '~/components/settings/SharedStacksPanel.vue'
+
+// The shared-stacks tab uses its own slot key beyond the provider-connection kinds.
+type InfraTabValue = ProviderConnectionKind | 'shared-stacks'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -37,7 +41,7 @@ const agentsAvailable = computed(() => (auth.infrastructure?.execution.available
 const envsAvailable = computed(() => (auth.infrastructure?.testEnv.available.length ?? 0) > 0)
 
 const tabs = computed(() => {
-  const out: { value: ProviderConnectionKind; label: string; icon: string; slot: string }[] = []
+  const out: { value: InfraTabValue; label: string; icon: string; slot: string }[] = []
   if (agentsAvailable.value)
     out.push({
       value: 'runner-pool',
@@ -52,10 +56,19 @@ const tabs = computed(() => {
       icon: 'i-lucide-cloud',
       slot: 'environment',
     })
+  // Shared stacks are long-lived compose infra a Tester environment attaches to, so they live
+  // alongside the test-environment config (shown wherever an environment backend is available).
+  if (envsAvailable.value)
+    out.push({
+      value: 'shared-stacks',
+      label: t('settings.sharedStacks.tab'),
+      icon: 'i-lucide-layers',
+      slot: 'shared-stacks',
+    })
   return out
 })
 
-const activeTab = ref<ProviderConnectionKind>(ui.infrastructureTab)
+const activeTab = ref<InfraTabValue>(ui.infrastructureTab)
 
 // Honour the deep-linked tab each time the window opens, falling back to the first available
 // tab if the requested one is off.
@@ -124,6 +137,9 @@ watch([tabs, () => store.loaded], () => {
               <InfraHandlersConfigurator />
             </div>
           </template>
+          <template #shared-stacks>
+            <SharedStacksPanel />
+          </template>
         </UTabs>
 
         <p v-else class="px-1 py-6 text-center text-sm text-slate-500">