@cat-factory/app 0.311.2 → 0.311.3

package/app/components/fragments/FragmentLibraryManager.vue

@@ -20,6 +20,7 @@ import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.v
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import GitHubDocUrlImport from '~/components/fragments/GitHubDocUrlImport.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -41,7 +42,7 @@ const library =
     : useFragmentLibrary(props.kind, props.ownerId)
 const documents = useDocumentsStore()
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
@@ -207,7 +208,7 @@ async function saveEdit() {
           .filter(Boolean),
       })
       editDraft.value = null
-      toast.add({ title: t('fragments.toast.updated'), icon: 'i-lucide-check' })
+      actionToast.success('fragments.toast.updated')
     } catch (e) {
       present(e, 'fragments.toast.updateFailed')
     }
@@ -229,7 +230,7 @@ async function createFragment() {
         .filter(Boolean),
     })
     draft.value = { title: '', summary: '', body: '', brief: '', tags: '' }
-    toast.add({ title: t('fragments.toast.added'), icon: 'i-lucide-check' })
+    actionToast.success('fragments.toast.added')
   } catch (e) {
     present(e, 'fragments.toast.addFailed')
   } finally {
@@ -250,7 +251,7 @@ async function removeFragment(id: string) {
   await withRow(`remove:${id}`, async () => {
     try {
       await library.remove(id)
-      toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })
+      actionToast.success('fragments.toast.removed')
     } catch (e) {
       present(e, 'fragments.toast.removeFailed')
     }
@@ -415,7 +416,7 @@ async function linkDocumentFragment() {
       // Free-text field: exactly one ref.
       await library.createDocumentFragment({ source, ref: docDraft.value.ref.trim(), tags })
       docDraft.value = { source: '', ref: '', tags: '' }
-      toast.add({ title: t('fragments.toast.documentLinked'), icon: 'i-lucide-link' })
+      actionToast.success('fragments.toast.documentLinked')
       return
     }
 
@@ -440,9 +441,9 @@ async function linkDocumentFragment() {
     if (linked > 0) {
       // A vue-i18n plural message (count as the plural choice) so Slavic few/many forms
       // render correctly, and the count==1 case reads naturally too.
-      toast.add({
-        title: t('fragments.toast.documentsLinked', { count: linked }, linked),
-        icon: 'i-lucide-link',
+      actionToast.success('fragments.toast.documentsLinked', {
+        params: { count: linked },
+        plural: linked,
       })
     }
     if (firstError) {
@@ -462,7 +463,7 @@ async function refreshFragment(id: string) {
   await withRow(`refresh:${id}`, async () => {
     try {
       await library.refreshDocumentFragment(id)
-      toast.add({ title: t('fragments.toast.refreshed'), icon: 'i-lucide-refresh-cw' })
+      actionToast.success('fragments.toast.refreshed')
     } catch (e) {
       present(e, 'fragments.toast.refreshFailed')
     }
@@ -519,7 +520,7 @@ async function linkSource() {
     // `syncSource` row wrapper): a failure here should surface as a link failure, and
     // the form-level `linkingSource` spinner already covers the whole operation.
     await library.syncSource(source.id)
-    toast.add({ title: t('fragments.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
+    actionToast.success('fragments.toast.sourceLinked')
   } catch (e) {
     present(e, 'fragments.toast.linkSourceFailed')
   } finally {
@@ -531,13 +532,8 @@ async function syncSource(id: string) {
   await withRow(`sync:${id}`, async () => {
     try {
       const result = await library.syncSource(id)
-      toast.add({
-        title: t('fragments.toast.synced', {
-          updated: result.upserted,
-          removed: result.tombstoned,
-        }),
-        icon: 'i-lucide-refresh-cw',
-        color: 'info',
+      actionToast.success('fragments.toast.synced', {
+        params: { updated: result.upserted, removed: result.tombstoned },
       })
     } catch (e) {
       present(e, 'fragments.toast.syncFailed')
@@ -549,12 +545,9 @@ async function checkSource(id: string) {
   await withRow(`check:${id}`, async () => {
     try {
       const status = await library.checkSource(id)
-      toast.add({
-        title: status.changed
-          ? t('fragments.toast.changesAvailable')
-          : t('fragments.toast.upToDate'),
-        icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-      })
+      actionToast.info(
+        status.changed ? 'fragments.toast.changesAvailable' : 'fragments.toast.upToDate',
+      )
     } catch (e) {
       present(e, 'fragments.toast.checkSourceFailed')
     }
@@ -575,7 +568,7 @@ async function unlinkSource(id: string) {
   await withRow(`unlink:${id}`, async () => {
     try {
       await library.unlinkSource(id)
-      toast.add({ title: t('fragments.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
+      actionToast.success('fragments.toast.sourceUnlinked')
     } catch (e) {
       present(e, 'fragments.toast.unlinkSourceFailed')
     }
@@ -771,13 +764,16 @@ async function unlinkSource(id: string) {
             </div>
           </div>
         </div>
-        <p v-if="!library.fragments.length" class="text-sm text-dimmed">
-          {{
+        <EmptyState
+          v-if="!library.fragments.length"
+          compact
+          icon="i-lucide-puzzle"
+          :title="
             isWorkspace
               ? t('fragments.authored.empty.workspace')
               : t('fragments.authored.empty.account')
-          }}
-        </p>
+          "
+        />
 
         <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.authored.addTitle') }}</p>
@@ -887,9 +883,12 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!documentFragments.length" class="text-sm text-dimmed">
-          {{ t('fragments.documents.empty') }}
-        </p>
+        <EmptyState
+          v-if="!documentFragments.length"
+          compact
+          icon="i-lucide-file-text"
+          :title="t('fragments.documents.empty')"
+        />
 
         <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.documents.linkTitle') }}</p>
@@ -1053,9 +1052,12 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!library.sources.length" class="text-sm text-dimmed">
-          {{ t('fragments.sources.empty') }}
-        </p>
+        <EmptyState
+          v-if="!library.sources.length"
+          compact
+          icon="i-lucide-git-branch"
+          :title="t('fragments.sources.empty')"
+        />
 
         <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.sources.linkTitle') }}</p>

package/app/components/fragments/FragmentSelector.vue

@@ -11,6 +11,7 @@
 import type { PromptFragment } from '~/types/domain'
 import { buildFragmentCategoryGroups } from '~/utils/fragmentPicker'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -123,9 +124,12 @@ function manageAccount() {
                   </UButton>
                 </div>
               </template>
-              <p v-else class="px-2 py-3 text-xs text-dimmed">
-                {{ t('inspector.fragments.pickerEmpty') }}
-              </p>
+              <EmptyState
+                v-else
+                compact
+                icon="i-lucide-puzzle"
+                :title="t('inspector.fragments.pickerEmpty')"
+              />
 
               <div class="mt-1 border-t border-default pt-1">
                 <UButton

package/app/components/gates/GateResultView.vue

@@ -14,6 +14,7 @@ import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
 import GateFailingCheckList from '~/components/gates/GateFailingCheckList.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -213,16 +214,12 @@ const conflictVerdict = computed(() => {
     <div class="flex min-h-0 flex-1">
       <!-- Main: the conclusion -->
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-        <div
+        <EmptyState
           v-if="!gate"
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
-        >
-          <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
-          <p class="text-sm">{{ t('gates.noActivity') }}</p>
-          <p class="max-w-sm text-2xs text-dimmed">
-            {{ t('gates.noActivityHint') }}
-          </p>
-        </div>
+          :icon="meta.icon"
+          :title="t('gates.noActivity')"
+          :description="t('gates.noActivityHint')"
+        />
 
         <template v-else>
           <!-- Passed -->

package/app/components/github/AddServiceFromRepoModal.vue

@@ -41,7 +41,7 @@ const ui = useUiStore()
 const github = useGitHubStore()
 const board = useBoardStore()
 const services = useServicesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { freeFramePosition, focusFrame } = useFramePlacement()
 
@@ -349,11 +349,8 @@ async function add() {
     // Centre the camera on the newly imported service.
     await focusFrame(block.id)
     configuredBlockId.value = block.id
-    toast.add({
-      title: t('github.addService.toast.addedTitle'),
+    actionToast.success('github.addService.toast.addedTitle', {
       description: t('github.addService.toast.addedDescription', { title: block.title }),
-      icon: 'i-lucide-check',
-      color: 'success',
     })
   } catch (e) {
     present(e, 'github.addService.toast.addFailedTitle')
@@ -417,17 +414,16 @@ async function addServices() {
     const lastBlockId = created.at(-1)?.blockId
     if (lastBlockId) await focusFrame(lastBlockId)
     selectedDirectories.value = []
-    toast.add({
-      title: t('github.addService.toast.servicesAddedTitle'),
+    const added = {
       description: [
         t('github.addService.toast.servicesAddedDescription', { count: dirs.length }, dirs.length),
         frontendNote(designatedDirectory, wiringLanded),
       ]
         .filter(Boolean)
         .join(' '),
-      icon: wiringLanded ? 'i-lucide-check' : 'i-lucide-triangle-alert',
-      color: wiringLanded ? 'success' : 'warning',
-    })
+    }
+    if (wiringLanded) actionToast.success('github.addService.toast.servicesAddedTitle', added)
+    else actionToast.warning('github.addService.toast.servicesAddedTitle', added)
   } catch (e) {
     present(e, 'github.addService.toast.addFailedTitle')
   } finally {

package/app/components/github/GitHubConnect.vue

@@ -7,10 +7,11 @@
 // react to. Shared by the GitHub panel and the bootstrap modal so the connect
 // flow lives in one place.
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const installing = ref(false)
@@ -48,11 +49,7 @@ async function connect(id: number, onDone?: () => void) {
   try {
     await github.connect(id)
     onDone?.()
-    toast.add({
-      title: t('github.connect.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('github.connect.toast.connected')
   } catch (e) {
     present(e, 'github.connect.errors.connect')
   } finally {
@@ -90,20 +87,16 @@ async function connectManually() {
         </UButton>
       </div>
 
-      <div
-        v-if="github.loadingInstallations && !github.installations.length"
-        class="flex items-center gap-2 py-3 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
-        {{ t('github.connect.lookingForInstallations') }}
+      <div v-if="github.loadingInstallations && !github.installations.length" class="space-y-2">
+        <USkeleton v-for="i in 2" :key="i" class="h-12 w-full" />
       </div>
 
-      <p
+      <EmptyState
         v-else-if="!github.installations.length"
-        class="rounded-md border border-dashed border-default px-3 py-3 text-sm text-muted"
-      >
-        {{ t('github.connect.noInstallations') }}
-      </p>
+        compact
+        icon="i-lucide-github"
+        :title="t('github.connect.noInstallations')"
+      />
 
       <div
         v-for="inst in github.installations"

package/app/components/github/GitHubPanel.vue

@@ -12,12 +12,13 @@ import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const access = useWorkspaceAccess()
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -80,6 +81,12 @@ const PULL_TERMS = {
   },
 } as const satisfies Record<VcsProvider, Record<string, string>>
 const pullTerms = computed(() => PULL_TERMS[github.provider])
+// Skeleton rows only while there is nothing to show yet. `github.loading` is also set by every
+// refresh (after a resync, on re-open), and blanking lists the reader is looking at to skeletons
+// and back loses their place for no gain.
+const firstLoad = computed(
+  () => github.loading && !github.repos.length && !github.pulls.length && !github.issues.length,
+)
 
 // What the repo picker can offer, and why a repo might be missing from it, differ by how the
 // workspace authenticates rather than by provider: an App installation is shared across the
@@ -110,9 +117,8 @@ async function disconnect() {
   if (!ok) return
   try {
     await github.disconnect()
-    toast.add({
-      title: t('vcs.panel.toast.disconnected', { provider: VCS_PROVIDER_LABELS[github.provider] }),
-      icon: 'i-lucide-unplug',
+    actionToast.success('vcs.panel.toast.disconnected', {
+      params: { provider: VCS_PROVIDER_LABELS[github.provider] },
     })
   } catch (e) {
     present(e, 'github.panel.errors.disconnect')
@@ -122,11 +128,7 @@ async function disconnect() {
 async function resync(full = false) {
   try {
     const { status } = await github.resync({ full })
-    toast.add({
-      title: t('github.panel.toast.resync', { status }),
-      icon: 'i-lucide-refresh-cw',
-      color: 'info',
-    })
+    actionToast.info('github.panel.toast.resync', { params: { status } })
   } catch (e) {
     present(e, 'github.panel.errors.resync')
   }
@@ -168,11 +170,7 @@ async function saveRepos() {
   try {
     await github.setLinkedRepos([...selected.value])
     managing.value = false
-    toast.add({
-      title: t('github.panel.toast.reposUpdated'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('github.panel.toast.reposUpdated')
   } catch (e) {
     present(e, 'github.panel.errors.updateRepos')
   }
@@ -207,11 +205,7 @@ async function createBranch(repo: GitHubRepo) {
   try {
     await github.createBranch(repo.githubId, { name, fromSha })
     branchForm.value = { name: '', fromSha: '' }
-    toast.add({
-      title: t('github.panel.toast.branchCreated', { name }),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('github.panel.toast.branchCreated', { params: { name } })
   } catch (e) {
     present(e, 'github.panel.errors.createBranch')
   } finally {
@@ -259,7 +253,7 @@ async function openPr() {
     })
     showPrForm.value = false
     prForm.value = { repoGithubId: null, title: '', head: '', base: '' }
-    toast.add({ title: t(pullTerms.value.opened), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success(pullTerms.value.opened)
   } catch (e) {
     present(e, pullTerms.value.openFailed)
   } finally {
@@ -283,11 +277,7 @@ async function merge(pr: GitHubPullRequest) {
   merging.value = pr.number
   try {
     await github.mergePullRequest(pr.repoGithubId, pr.number, { method: 'squash' })
-    toast.add({
-      title: t(pullTerms.value.mergedToast, { number: pr.number }),
-      icon: 'i-lucide-git-merge',
-      color: 'success',
-    })
+    actionToast.success(pullTerms.value.mergedToast, { params: { number: pr.number } })
   } catch (e) {
     present(e, 'github.panel.errors.merge')
   } finally {
@@ -372,9 +362,8 @@ async function merge(pr: GitHubPullRequest) {
             </UButton>
           </div>
 
-          <div v-if="github.loading" class="flex items-center gap-2 py-6 text-sm text-muted">
-            <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
-            {{ t('github.panel.loading') }}
+          <div v-if="firstLoad" class="space-y-2">
+            <USkeleton v-for="i in 3" :key="i" class="h-12 w-full" />
           </div>
 
           <!-- repositories -->
@@ -405,20 +394,19 @@ async function merge(pr: GitHubPullRequest) {
                   isAppConnection ? t('vcs.panel.manageHintApp') : t('vcs.panel.manageHintToken')
                 }}
               </p>
-              <div
-                v-if="github.loadingAvailable"
-                class="flex items-center gap-2 py-3 text-sm text-muted"
-              >
-                <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
-                {{ t('github.panel.loadingRepos') }}
+              <div v-if="github.loadingAvailable" class="space-y-1">
+                <USkeleton v-for="i in 4" :key="i" class="h-8 w-full" />
               </div>
-              <p v-else-if="!github.availableRepos.length" class="py-2 text-sm text-muted">
-                {{
+              <EmptyState
+                v-else-if="!github.availableRepos.length"
+                compact
+                icon="i-lucide-folder-git-2"
+                :title="
                   isAppConnection
                     ? t('vcs.panel.noAvailableReposApp')
                     : t('vcs.panel.noAvailableReposToken')
-                }}
-              </p>
+                "
+              />
               <div v-else class="max-h-64 space-y-1 overflow-y-auto">
                 <UButton
                   color="neutral"
@@ -463,9 +451,12 @@ async function merge(pr: GitHubPullRequest) {
               </div>
             </div>
 
-            <p v-if="!github.repos.length && !managing" class="py-4 text-sm text-muted">
-              {{ t('github.panel.noLinkedRepos') }}
-            </p>
+            <EmptyState
+              v-if="!github.repos.length && !managing"
+              compact
+              icon="i-lucide-folder-git-2"
+              :title="t('github.panel.noLinkedRepos')"
+            />
 
             <!-- Whether the host actually protects what an agent run pushes to. Placed above the
                  repo list because it is a posture check across ALL of them, not a per-repo
@@ -634,9 +625,12 @@ async function merge(pr: GitHubPullRequest) {
               </div>
             </div>
 
-            <p v-if="!github.pulls.length" class="py-4 text-sm text-muted">
-              {{ t(pullTerms.none) }}
-            </p>
+            <EmptyState
+              v-if="!github.pulls.length"
+              compact
+              icon="i-lucide-git-pull-request"
+              :title="t(pullTerms.none)"
+            />
             <div
               v-for="pr in github.pulls"
               :key="`${pr.repoGithubId}-${pr.number}`"
@@ -681,9 +675,12 @@ async function merge(pr: GitHubPullRequest) {
 
           <!-- issues -->
           <section v-else class="space-y-2">
-            <p v-if="!github.issues.length" class="py-4 text-sm text-muted">
-              {{ t('github.panel.noIssues') }}
-            </p>
+            <EmptyState
+              v-if="!github.issues.length"
+              compact
+              icon="i-lucide-circle-dot"
+              :title="t('github.panel.noIssues')"
+            />
             <div
               v-for="issue in github.issues"
               :key="`${issue.repoGithubId}-${issue.number}`"

package/app/components/github/RepoTreeBrowser.vue

@@ -19,6 +19,7 @@
 // service-directory field). Nothing in the tree can be the target then, so the pick is the
 // folder the caller is standing in and the emitted value is that folder plus the new name.
 import type { RepoTreeEntry } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -194,12 +195,15 @@ watch(
 
     <!-- listing -->
     <div class="max-h-56 overflow-auto rounded-sm border border-default">
-      <div v-if="loading" class="p-3 text-sm text-muted">
-        {{ t('github.repoTree.loading') }}
-      </div>
-      <div v-else-if="isEmpty" class="p-3 text-sm text-muted">
-        {{ mode === 'dir' ? t('github.repoTree.noSubdirectories') : t('github.repoTree.empty') }}
+      <div v-if="loading" class="space-y-1 p-2">
+        <USkeleton v-for="i in 4" :key="i" class="h-7 w-full" />
       </div>
+      <EmptyState
+        v-else-if="isEmpty"
+        compact
+        icon="i-lucide-folder-open"
+        :title="mode === 'dir' ? t('github.repoTree.noSubdirectories') : t('github.repoTree.empty')"
+      />
       <ul v-else class="divide-y divide-default">
         <li
           v-for="entry in dirEntries"

package/app/components/guidedReview/GuidedReviewModal.vue

@@ -7,6 +7,7 @@ import type { OpenGuidedReviewInput } from '~/types/domain'
 import GuidedReviewOverview from '~/components/guidedReview/GuidedReviewOverview.vue'
 import GuidedReviewThread from '~/components/guidedReview/GuidedReviewThread.vue'
 import GuidedReviewPicker from '~/components/guidedReview/GuidedReviewPicker.vue'
+import Spinner from '~/components/common/Spinner.vue'
 import {
   NEW_THREAD_TAB,
   isStale,
@@ -175,10 +176,16 @@ const title = computed(() =>
         @open="openFor"
       />
 
-      <p v-else-if="!session" class="flex items-center gap-2 text-sm text-muted">
-        <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-        {{ t('guidedReview.loading') }}
-      </p>
+      <div v-else-if="!session" class="flex h-full min-h-0 flex-col gap-4 lg:flex-row">
+        <div class="space-y-3 lg:w-2/5 lg:pr-2">
+          <USkeleton class="h-6 w-2/3" />
+          <USkeleton v-for="n in 4" :key="n" class="h-4 w-full" />
+        </div>
+        <div class="flex flex-1 flex-col gap-3">
+          <USkeleton class="h-8 w-1/2" />
+          <USkeleton class="h-48 w-full rounded-lg" />
+        </div>
+      </div>
 
       <div v-else class="flex h-full min-h-0 flex-col gap-4 lg:flex-row">
         <div class="min-h-0 space-y-3 overflow-y-auto lg:w-2/5 lg:pr-2">
@@ -210,11 +217,14 @@ const title = computed(() =>
               :aria-selected="tab === activeTab"
               :variant="tab === activeTab ? 'soft' : 'ghost'"
               :color="tab === activeTab ? 'primary' : 'neutral'"
-              :icon="threadBusy(tab) ? 'i-lucide-loader-circle' : undefined"
-              :ui="{ leadingIcon: threadBusy(tab) ? 'animate-spin' : '' }"
               :data-testid="`guided-review-tab-${tab}`"
               @click="activeTab = tab"
             >
+              <!-- Not `:loading`: that disables the tab, and a reader switches back to a thread
+                   precisely while its reply is pending. -->
+              <template v-if="threadBusy(tab)" #leading>
+                <Spinner class="size-4 shrink-0" />
+              </template>
               <span class="max-w-48 truncate">{{ threadTitle(tab) }}</span>
             </UButton>
             <UButton

package/app/components/guidedReview/GuidedReviewOverview.vue

@@ -3,6 +3,7 @@
 // chips the window turns into new threads.
 import type { GuidedReviewSession } from '~/types/domain'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import Spinner from '~/components/common/Spinner.vue'
 import GuidedReviewFailure from '~/components/guidedReview/GuidedReviewFailure.vue'
 import { citationLabel } from '~/components/guidedReview/GuidedReview.logic'
 
@@ -53,7 +54,7 @@ const SEVERITY_COLOR = { high: 'error', medium: 'warning', low: 'neutral' } as c
       class="flex items-center gap-2 text-sm text-muted"
       data-testid="guided-review-overview-working"
     >
-      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+      <Spinner class="h-4 w-4" />
       {{ t('guidedReview.overview.working') }}
     </p>
 

package/app/components/guidedReview/GuidedReviewPicker.vue

@@ -2,6 +2,7 @@
 // Pick a linked repository and one of its pull requests (an open one from the synced list, or any
 // number typed in) to open a guided review on.
 import type { OpenGuidedReviewInput } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 defineProps<{ opening: boolean; loading: boolean }>()
 const emit = defineEmits<{ open: [target: OpenGuidedReviewInput] }>()
@@ -34,13 +35,15 @@ function submit(number = prNumber.value): void {
 <template>
   <div class="mx-auto max-w-xl space-y-4" data-testid="guided-review-picker">
     <p class="text-sm text-muted">{{ t('guidedReview.picker.intro') }}</p>
-    <p v-if="loading" class="flex items-center gap-2 text-sm text-muted">
-      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-      {{ t('guidedReview.picker.loading') }}
-    </p>
-    <p v-else-if="!github.repos.length" class="text-sm text-toned">
-      {{ t('guidedReview.picker.noRepos') }}
-    </p>
+    <div v-if="loading" class="space-y-4">
+      <USkeleton class="h-8 w-full" />
+      <USkeleton class="h-8 w-full" />
+    </div>
+    <EmptyState
+      v-else-if="!github.repos.length"
+      icon="i-lucide-folder-git-2"
+      :title="t('guidedReview.picker.noRepos')"
+    />
     <template v-else>
       <UFormField :label="t('guidedReview.picker.repo')">
         <USelectMenu