@cat-factory/app 0.47.9 → 0.47.11

package/app/components/focus/BlockFocusView.vue

@@ -11,6 +11,8 @@ const ui = useUiStore()
 const models = useModelsStore()
 const workspace = useWorkspaceStore()
 
+const { t, n } = useI18n()
+
 onMounted(() => models.ensureLoaded(workspace.workspaceId ?? undefined))
 
 const block = computed<Block | undefined>(() =>
@@ -64,7 +66,7 @@ function openApprovalFor(approvalId: string) {
           size="sm"
           @click="close"
         >
-          Board
+          {{ t('focus.board') }}
         </UButton>
         <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600" />
         <div
@@ -75,7 +77,9 @@ function openApprovalFor(approvalId: string) {
         </div>
         <div>
           <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
-          <div class="text-xs text-slate-500">{{ typeMeta.label }} · focus view</div>
+          <div class="text-xs text-slate-500">
+            {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
+          </div>
         </div>
         <UBadge :color="statusMeta.chip as any" variant="subtle" class="ml-2">
           {{ statusMeta.label }}
@@ -89,7 +93,7 @@ function openApprovalFor(approvalId: string) {
               icon="i-lucide-play"
               trailing-icon="i-lucide-chevron-down"
             >
-              {{ instance ? 'Re-run pipeline' : 'Run pipeline' }}
+              {{ instance ? t('focus.rerunPipeline') : t('focus.runPipeline') }}
             </UButton>
           </UDropdownMenu>
           <UButton icon="i-lucide-x" color="neutral" variant="ghost" @click="close" />
@@ -104,7 +108,7 @@ function openApprovalFor(approvalId: string) {
           <div class="mb-4 flex items-center gap-2">
             <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
             <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
-              {{ instance ? instance.pipelineName : 'No pipeline running' }}
+              {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
             </h2>
           </div>
 
@@ -119,7 +123,7 @@ function openApprovalFor(approvalId: string) {
             v-else
             class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
           >
-            Run a pipeline to visualize the agents working on this block.
+            {{ t('focus.emptyPipelineHint') }}
           </div>
         </section>
 
@@ -129,29 +133,29 @@ function openApprovalFor(approvalId: string) {
         >
           <div>
             <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Description
+              {{ t('focus.description') }}
             </div>
             <p class="text-sm text-slate-300">{{ block.description }}</p>
           </div>
           <div v-if="instance">
             <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Overall progress
+              {{ t('focus.overallProgress') }}
             </div>
             <UProgress :model-value="Math.round(block.progress * 100)" />
             <div class="mt-1 text-[11px] text-slate-400">
-              {{ Math.round(block.progress * 100) }}%
+              {{ n(block.progress, 'percent') }}
             </div>
           </div>
           <div>
             <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Dependencies
+              {{ t('focus.dependencies') }}
             </div>
             <div v-if="deps.length" class="flex flex-wrap gap-1">
               <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
                 {{ d.title }}
               </UBadge>
             </div>
-            <div v-else class="text-[11px] text-slate-500">None</div>
+            <div v-else class="text-[11px] text-slate-500">{{ t('focus.noDependencies') }}</div>
           </div>
         </aside>
       </div>

package/app/components/followUp/FollowUpWindow.vue

@@ -17,6 +17,8 @@ const execution = useExecutionStore()
 const board = useBoardStore()
 const followUps = useFollowUpsStore()
 
+const { t } = useI18n()
+
 const { open, blockId, instanceId, stepIndex, close } = useResultView('follow-ups')
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
@@ -57,15 +59,25 @@ async function onDismiss(item: FollowUpItem) {
   if (id) await followUps.dismissItem(id, item.id).catch(() => {})
 }
 
+// Exhaustive map of the item status enum → label key (literal keys keep the typed-key
+// drift guard live, vs a runtime-built `followUp.status.${status}`).
+const STATUS_LABEL_KEYS: Record<FollowUpItem['status'], string> = {
+  pending: 'followUp.status.pending',
+  filed: 'followUp.status.filed',
+  queued: 'followUp.status.queued',
+  answered: 'followUp.status.answered',
+  dismissed: 'followUp.status.dismissed',
+}
+
 const STATUS_META: Record<
   FollowUpItem['status'],
-  { label: string; badge: 'neutral' | 'info' | 'success' | 'warning'; text: string }
+  { badge: 'neutral' | 'info' | 'success' | 'warning'; text: string }
 > = {
-  pending: { label: 'Needs a decision', badge: 'warning', text: 'text-amber-300' },
-  filed: { label: 'Filed as issue', badge: 'success', text: 'text-emerald-300' },
-  queued: { label: 'Sent to Coder', badge: 'info', text: 'text-sky-300' },
-  answered: { label: 'Answered', badge: 'info', text: 'text-sky-300' },
-  dismissed: { label: 'Dismissed', badge: 'neutral', text: 'text-slate-400' },
+  pending: { badge: 'warning', text: 'text-amber-300' },
+  filed: { badge: 'success', text: 'text-emerald-300' },
+  queued: { badge: 'info', text: 'text-sky-300' },
+  answered: { badge: 'info', text: 'text-sky-300' },
+  dismissed: { badge: 'neutral', text: 'text-slate-400' },
 }
 </script>
 
@@ -88,15 +100,20 @@ const STATUS_META: Record<
           </span>
           <div class="min-w-0 flex-1">
             <h2 class="truncate text-sm font-semibold text-slate-100">
-              {{ FOLLOW_UP_COMPANION_META.label }}{{ block ? ` — ${block.title}` : '' }}
+              {{
+                block ? t('followUp.titleWithBlock', { title: block.title }) : t('followUp.title')
+              }}
             </h2>
             <p class="truncate text-[11px] text-slate-400">
-              Forward-looking follow-ups & questions the Coder surfaced. The pipeline continues once
-              every item is decided.
+              {{ t('followUp.subtitle') }}
             </p>
           </div>
           <UBadge :color="pendingCount > 0 ? 'warning' : 'success'" variant="subtle" size="sm">
-            {{ pendingCount > 0 ? `${pendingCount} to decide` : 'All decided' }}
+            {{
+              pendingCount > 0
+                ? t('followUp.badge.toDecide', { count: pendingCount }, pendingCount)
+                : t('followUp.badge.allDecided')
+            }}
           </UBadge>
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
@@ -113,10 +130,9 @@ const STATUS_META: Record<
             class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
           >
             <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
-            <p class="text-sm">No follow-ups yet.</p>
+            <p class="text-sm">{{ t('followUp.empty.title') }}</p>
             <p class="max-w-sm text-[11px] text-slate-500">
-              As the Coder works it streams loose ends, side-tasks and questions here. They appear
-              live — you can act on them before the Coder even finishes.
+              {{ t('followUp.empty.hint') }}
             </p>
           </div>
 
@@ -146,14 +162,15 @@ const STATUS_META: Record<
                       {{ item.title }}
                     </h3>
                     <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
-                      {{ STATUS_META[item.status].label }}
+                      {{ t(STATUS_LABEL_KEYS[item.status]) }}
                     </UBadge>
                   </div>
                   <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">
                     {{ item.detail }}
                   </p>
                   <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-slate-400">
-                    <span class="text-slate-500">Suggested:</span> {{ item.suggestedAction }}
+                    <span class="text-slate-500">{{ t('followUp.suggested') }}</span>
+                    {{ item.suggestedAction }}
                   </p>
                   <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
                     <a
@@ -162,14 +179,15 @@ const STATUS_META: Record<
                       rel="noopener"
                       class="text-emerald-300 hover:underline"
                     >
-                      {{ item.ticketExternalId ?? 'View issue' }}
+                      {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
                     </a>
                   </p>
                   <p
                     v-if="item.status === 'answered' && item.answer"
                     class="mt-1 text-[11px] text-slate-300"
                   >
-                    <span class="text-slate-500">Your answer:</span> {{ item.answer }}
+                    <span class="text-slate-500">{{ t('followUp.yourAnswer') }}</span>
+                    {{ item.answer }}
                   </p>
 
                   <!-- Actions (only while the item is still undecided) -->
@@ -179,7 +197,7 @@ const STATUS_META: Record<
                       <textarea
                         v-model="drafts[item.id]"
                         rows="2"
-                        placeholder="Answer this question — it's folded into the Coder's next pass…"
+                        :placeholder="t('followUp.answerPlaceholder')"
                         class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none"
                       />
                       <div class="flex items-center gap-2">
@@ -190,7 +208,7 @@ const STATUS_META: Record<
                           :disabled="!(drafts[item.id] ?? '').trim()"
                           @click="onAnswer(item)"
                         >
-                          Answer & send back
+                          {{ t('followUp.actions.answerAndSend') }}
                         </UButton>
                         <UButton
                           size="xs"
@@ -199,7 +217,7 @@ const STATUS_META: Record<
                           :loading="followUps.isActing(item.id)"
                           @click="onDismiss(item)"
                         >
-                          Dismiss
+                          {{ t('followUp.actions.dismiss') }}
                         </UButton>
                       </div>
                     </div>
@@ -213,7 +231,7 @@ const STATUS_META: Record<
                         :loading="followUps.isActing(item.id)"
                         @click="onFile(item)"
                       >
-                        File as issue
+                        {{ t('followUp.actions.fileAsIssue') }}
                       </UButton>
                       <UButton
                         size="xs"
@@ -223,7 +241,7 @@ const STATUS_META: Record<
                         :loading="followUps.isActing(item.id)"
                         @click="onQueue(item)"
                       >
-                        Send to Coder
+                        {{ t('followUp.actions.sendToCoder') }}
                       </UButton>
                       <UButton
                         size="xs"
@@ -232,7 +250,7 @@ const STATUS_META: Record<
                         :loading="followUps.isActing(item.id)"
                         @click="onDismiss(item)"
                       >
-                        Dismiss
+                        {{ t('followUp.actions.dismiss') }}
                       </UButton>
                     </div>
                   </div>
@@ -246,10 +264,17 @@ const STATUS_META: Record<
           class="flex items-center justify-between border-t border-slate-800 px-5 py-2.5 text-[11px] text-slate-400"
         >
           <span>
-            {{ items.length }} item{{ items.length === 1 ? '' : 's' }} ·
-            {{ pendingCount }} undecided
+            {{
+              t(
+                'followUp.footer.summary',
+                { count: items.length, undecided: pendingCount },
+                items.length,
+              )
+            }}
           </span>
-          <span v-if="maxLoops > 0">Coder loops used: {{ loops }} / {{ maxLoops }}</span>
+          <span v-if="maxLoops > 0">{{
+            t('followUp.footer.loops', { loops, max: maxLoops })
+          }}</span>
         </footer>
       </div>
     </div>

package/app/components/github/AddServiceFromRepoModal.vue

@@ -10,6 +10,7 @@
 // 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 GitHubConnect from '~/components/github/GitHubConnect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
@@ -76,16 +77,53 @@ const repoItems = computed(() =>
   }),
 )
 
-// The PAT (or a wide App install) can expose hundreds of repos, too many for a plain
-// dropdown — filter by owner/name. The currently selected repo is always kept in the
-// list so a selection doesn't vanish when the query no longer matches it.
+// The PAT (or a wide App install) can expose hundreds of repos, far too many for a plain
+// dropdown — so the picker is a typeahead combobox. The user types and matching repos
+// surface: matching is a debounced, case-insensitive substring over `owner/name` (so any
+// part of either matches). For a LARGE list the search only kicks in once at least
+// MIN_SEARCH_LEN characters are typed, to keep early keystrokes from listing hundreds of
+// rows; but when the whole list is small enough to browse (<= BROWSE_ALL_MAX) the gate is
+// dropped and every repo is offered up-front (typing then narrows), so a handful of repos
+// stays pickable without having to type — matching the old always-open dropdown.
+const MIN_SEARCH_LEN = 3
+const BROWSE_ALL_MAX = 25
 const repoSearch = ref('')
-const filteredRepoItems = computed(() => {
-  const q = repoSearch.value.trim().toLowerCase()
-  if (!q) return repoItems.value
-  return repoItems.value.filter((r) => r.search.includes(q) || r.value === selectedRepoId.value)
+const repoSearchDebounced = refDebounced(repoSearch, 250)
+// Trimmed (original case) for display; lowercased for matching.
+const repoQueryRaw = computed(() => repoSearchDebounced.value.trim())
+const repoQuery = computed(() => repoQueryRaw.value.toLowerCase())
+
+// Small lists are browseable without typing; large lists require the min-length gate.
+const browseAll = computed(() => repoItems.value.length <= BROWSE_ALL_MAX)
+// True only on a large list whose query is still too short to search.
+const belowMinChars = computed(() => !browseAll.value && repoQuery.value.length < MIN_SEARCH_LEN)
+
+// Matches for the current query. On a small list an empty query lists everything; on a
+// large list nothing surfaces until the query passes the min length.
+const queryMatches = computed(() => {
+  if (belowMinChars.value) return []
+  if (!repoQuery.value) return repoItems.value
+  return repoItems.value.filter((r) => r.search.includes(repoQuery.value))
+})
+
+// Items fed to the combobox: the query matches plus the current selection kept present,
+// so the menu can still render the selected repo's label once the (reset) search term no
+// longer matches it.
+const repoMenuItems = computed(() => {
+  const matches = queryMatches.value
+  if (selectedRepoId.value === undefined) return matches
+  if (matches.some((r) => r.value === selectedRepoId.value)) return matches
+  const selected = repoItems.value.find((r) => r.value === selectedRepoId.value)
+  return selected ? [selected, ...matches] : matches
 })
 
+// The count summary under the field is shown only when it's meaningful: there are matches
+// to count AND the user is actually searching (or browsing a small list). After a
+// selection resets the search term this is false, so the field doesn't claim "Showing 0"
+// or nag "type 3 characters" right under the repo the user just picked. The zero-match and
+// min-length messages are owned by the combobox's own empty state instead.
+const showResultCount = computed(() => !belowMinChars.value && queryMatches.value.length > 0)
+
 const hasRepos = computed(() => github.availableRepos.length > 0)
 const selectedRepo = computed(() =>
   github.availableRepos.find((r) => r.githubId === selectedRepoId.value),
@@ -121,6 +159,13 @@ function resetSelection() {
   repoSearch.value = ''
 }
 
+// Clear the current repo selection (the combobox's trailing ✕) so the user can pick a
+// different one — drops the selection-dependent state and resets the search term. The
+// combobox has no built-in deselect, so the field would otherwise stay pinned to a repo.
+function clearSelection() {
+  resetSelection()
+}
+
 // The App's installation settings page — where the user grants it access to a
 // repo it can't see yet (mirrors the bootstrap modal's "grant access" link).
 const manageInstallUrl = computed(() => {
@@ -236,34 +281,42 @@ function done() {
               {{ t('github.addService.noReposAvailable') }}
             </div>
             <div v-else class="space-y-1.5">
-              <UInput
-                v-model="repoSearch"
+              <UInputMenu
+                v-model="selectedRepoId"
+                v-model:search-term="repoSearch"
+                :items="repoMenuItems"
+                :ignore-filter="true"
+                value-key="value"
+                :loading="github.loadingAvailable"
                 icon="i-lucide-search"
-                :placeholder="t('github.addService.filterPlaceholder')"
+                :placeholder="t('github.addService.searchPlaceholder')"
                 class="w-full"
-                :ui="{ trailing: 'pe-1' }"
               >
-                <template v-if="repoSearch" #trailing>
+                <template v-if="selectedRepoId !== undefined" #trailing>
                   <UButton
                     color="neutral"
                     variant="link"
                     size="sm"
                     icon="i-lucide-x"
-                    :aria-label="t('github.addService.clearFilter')"
-                    @click="repoSearch = ''"
+                    :aria-label="t('github.addService.clearSelection')"
+                    @click.stop="clearSelection"
                   />
                 </template>
-              </UInput>
-              <USelect
-                v-model="selectedRepoId"
-                :items="filteredRepoItems"
-                :placeholder="t('github.addService.chooseRepository')"
-                class="w-full"
-              />
-              <p class="text-xs text-slate-500">
+                <template #empty>
+                  <span v-if="belowMinChars">
+                    {{
+                      t('github.addService.searchMinChars', { min: MIN_SEARCH_LEN }, MIN_SEARCH_LEN)
+                    }}
+                  </span>
+                  <span v-else>{{
+                    t('github.addService.noMatches', { query: repoQueryRaw })
+                  }}</span>
+                </template>
+              </UInputMenu>
+              <p v-if="showResultCount" class="text-xs text-slate-500">
                 {{
                   t('github.addService.showingCount', {
-                    shown: filteredRepoItems.length,
+                    shown: queryMatches.length,
                     total: repoItems.length,
                   })
                 }}