@cat-factory/app 0.310.2 → 0.310.3

package/README.md

@@ -334,16 +334,22 @@ Every CONTROL in the SPA is the Nuxt UI component for it, never the raw HTML ele
 
 What a primary, a secondary or a destructive action looks like is decided once, here, and not per call site. The weights are Nuxt UI's own [variant table](https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/design-system.md) (`solid` highest, then `outline`, `soft`, `subtle`, `ghost`, and `link` for a text link inside content), mapped onto the app's kinds of action:
 
-| Kind                                                   | Props                                                                                         |
-| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
-| Primary action, ONE per view                           | none (the default, `primary solid`)                                                           |
-| Secondary action in a dialog footer or a window header | `color="neutral" variant="outline"`                                                           |
-| Inline, navigation and chrome actions                  | `color="neutral" variant="ghost"`, usually with `size="xs"`                                   |
-| Icon-only action                                       | `IconButton` with `color="neutral" variant="ghost"`                                           |
-| Destructive action                                     | `color="error" variant="soft"`; `color="error"` alone (solid) only as the confirm of a dialog |
-| Status chip                                            | `UBadge` with `variant="subtle" size="sm"`, and a `BadgeColor` map for the colour             |
-
-- **The defaults are Nuxt UI's own**: `primary solid md` for both `UButton` and `UBadge`, stated in `app.config.ts` (`ui.button.defaultVariants`, `ui.badge.defaultVariants`) so the value has one visible home and the guard can read it. A call site states only what DIFFERS. Sibling buttons never mix variants.
+| Kind                                                                  | Props                                                                                                                                                                                   |
+| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Primary action, ONE per view                                          | none (the default, `primary solid`)                                                                                                                                                     |
+| Dismissal in a dialog or form (Cancel, Close)                         | `color="neutral" variant="ghost"`                                                                                                                                                       |
+| Real secondary action (Save draft, Back)                              | `color="neutral" variant="outline"`                                                                                                                                                     |
+| Bulk action in a dialog footer, beside Close (Reseed all, Update all) | `variant="ghost"` (primary colour): the dialog's main action, kept light because each row above it has its own button                                                                   |
+| Send-back on a gate (bounce, request a fix)                           | `color="warning" variant="soft"`, so the approve beside it stays the one primary                                                                                                        |
+| Inline, navigation and chrome actions                                 | `color="neutral" variant="ghost"`, usually with `size="xs"`                                                                                                                             |
+| Icon-only action                                                      | `IconButton` with `color="neutral" variant="ghost"`                                                                                                                                     |
+| Destructive action, labelled                                          | `color="error" variant="soft"`; `color="error"` alone (solid) only as the confirm step of a destructive action (a dialog's confirm, or an armed inline confirm such as a step's reject) |
+| Destructive action, icon-only (a row's trash icon)                    | `IconButton` with `color="error" variant="ghost"`                                                                                                                                       |
+| A banner's call to action                                             | solid, in the banner's colour (`color="warning"`, `color="error"`)                                                                                                                      |
+| Status chip                                                           | `UBadge` with `variant="subtle" size="sm"`, and a `BadgeColor` map for the colour                                                                                                       |
+
+- **The defaults are Nuxt UI's own**: `primary solid md` for both `UButton` and `UBadge`, stated in `app.config.ts` (`ui.button.defaultVariants`, `ui.badge.defaultVariants`) so the value has one visible home and the guard can read it. A call site states only what DIFFERS.
+- **One solid button per view.** Two solid buttons side by side compete for the same attention, so the second action takes a lighter variant from the table. The guard refuses two solid buttons under one parent element; it counts a `v-if` chain as one button and a `v-for` list as one, looks through a plain `<template>` wrapper, and treats a slot `<template #name>` as its own region. A file holding several forms that each end in a Save is several views and passes. A site that genuinely needs two says why with a `solid-ok:` comment on its own line, directly above the second button.
 - **The unstyled group is the one a theme restyles, so it is the primary tier.** A theme document's `style.defaults` (a size, a button variant, a button colour) REPLACES the default for every control that does not state that prop; it does not scale or shift the others. So whichever group is unstyled is the group a theme moves. With the primary actions unstyled, a theme with `size: 'lg'` or `variants: { buttons: 'outline' }` restyles the actions and leaves the chrome alone. With the quiet chrome unstyled, the same theme would grow or fill every toolbar and icon button past the actions and invert the hierarchy. This is why the dense, quiet chrome carries its props and the primary action carries none, and why Nuxt UI's own internal buttons (a modal's close button, a toast's actions) agree with the app's.
 - **A restated default is a bug, not noise.** It pins the value against a theme that changes the default, and it hides which props are the reason a control looks the way it does. `scripts/check-frontend-variants.mjs` (CI) refuses a value equal to the default on `UButton` and `UBadge` (either casing, either quote style, or a key of a `v-bind="{ … }"` object) and on every component that spreads its attributes into one (`IconButton`; the list is derived, so a new wrapper is covered), reading the defaults from `app.config.ts` itself. Inside a `UFieldGroup` or `UButtonGroup` it does not check `size`: the group sets the size there, so an explicit `size` overrides the group rather than restating the default. It reads template tags only, so a `ButtonProps` object (a toast's `actions`, a modal's `:close`) is not checked. A site that must keep a literal says why with a `variant-default-ok:` comment on its own line, directly above the tag; it waives that tag only.
 

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -157,7 +157,7 @@ async function disconnect() {
           <UButton
             v-if="connected"
             color="error"
-            variant="ghost"
+            variant="soft"
             icon="i-lucide-unplug"
             @click="disconnect"
           >

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -105,6 +105,7 @@ async function suppress(serviceId: string) {
 
           <div class="mt-2 flex items-center gap-2">
             <UButton
+              color="neutral"
               v-if="s.contracts.length"
               size="xs"
               variant="ghost"
@@ -141,6 +142,7 @@ async function suppress(serviceId: string) {
                deployment registered in code; the board's own row is managed in the registry tab,
                where deleting it is the honest action. -->
           <IconButton
+            color="neutral"
             v-if="s.tier !== 'workspace'"
             icon="i-lucide-eye-off"
             size="xs"

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -205,6 +205,7 @@ async function remove(service: FoundationalService) {
         </div>
         <div class="flex shrink-0 gap-1">
           <IconButton
+            color="neutral"
             v-if="!s.sourceId"
             icon="i-lucide-pencil"
             size="xs"
@@ -310,7 +311,13 @@ async function remove(service: FoundationalService) {
               :placeholder="t('foundational.registry.contractBodyPlaceholder')"
             />
           </div>
-          <UButton icon="i-lucide-plus" size="xs" variant="ghost" @click="addContract">
+          <UButton
+            color="neutral"
+            icon="i-lucide-plus"
+            size="xs"
+            variant="ghost"
+            @click="addContract"
+          >
             {{ t('foundational.registry.addContract') }}
           </UButton>
         </div>
@@ -325,7 +332,7 @@ async function remove(service: FoundationalService) {
           >
             {{ t('foundational.registry.save') }}
           </UButton>
-          <UButton size="sm" variant="ghost" @click="editing = null">
+          <UButton color="neutral" size="sm" variant="ghost" @click="editing = null">
             {{ t('foundational.registry.cancel') }}
           </UButton>
         </div>

package/app/components/foundational/FoundationalServiceSources.vue

@@ -297,6 +297,7 @@ async function unlink(id: string) {
       </UBadge>
       <div class="ms-auto flex gap-1">
         <IconButton
+          color="neutral"
           icon="i-lucide-search-check"
           size="xs"
           variant="ghost"
@@ -305,6 +306,7 @@ async function unlink(id: string) {
           @click="check(s.id)"
         />
         <IconButton
+          color="neutral"
           icon="i-lucide-refresh-cw"
           size="xs"
           variant="ghost"

package/app/components/foundational/FoundationalSuppressions.vue

@@ -81,6 +81,7 @@ async function restore(serviceId: string) {
         </p>
       </div>
       <UButton
+        color="neutral"
         icon="i-lucide-eye"
         size="xs"
         variant="ghost"

package/app/components/fragments/FragmentLibraryManager.vue

@@ -752,6 +752,7 @@ async function unlinkSource(id: string) {
               <!-- Editing a repo-SOURCED fragment locally would be overwritten on the next sync,
                    so only hand-authored fragments are editable here. -->
               <IconButton
+                color="neutral"
                 v-if="!f.source"
                 icon="i-lucide-pencil"
                 size="xs"
@@ -868,6 +869,7 @@ async function unlinkSource(id: string) {
           </div>
           <div class="ms-auto flex gap-1">
             <IconButton
+              color="neutral"
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
@@ -1026,6 +1028,7 @@ async function unlinkSource(id: string) {
           </UBadge>
           <div class="ms-auto flex gap-1">
             <UButton
+              color="neutral"
               icon="i-lucide-search-check"
               size="xs"
               variant="ghost"
@@ -1033,6 +1036,7 @@ async function unlinkSource(id: string) {
               @click="checkSource(s.id)"
             />
             <UButton
+              color="neutral"
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"

package/app/components/github/RepoTreeBrowser.vue

@@ -207,6 +207,7 @@ watch(
           class="flex items-center justify-between gap-2 px-3 py-1.5"
         >
           <UButton
+            color="neutral"
             variant="ghost"
             class="flex items-center gap-2 truncate p-0 text-sm text-default hover:bg-transparent hover:text-primary"
             @click="browseTo(entry.path)"
@@ -257,6 +258,7 @@ watch(
               @update:model-value="toggleAllFiles"
             />
             <UButton
+              color="neutral"
               variant="ghost"
               class="p-0 text-xs text-muted hover:bg-transparent hover:text-primary"
               @click="toggleAllFiles"
@@ -283,6 +285,7 @@ watch(
                 @update:model-value="pick(entry.path)"
               />
               <UButton
+                color="neutral"
                 variant="ghost"
                 class="flex items-center gap-2 truncate p-0 text-sm hover:bg-transparent hover:text-primary"
                 :class="isPicked(entry.path) ? 'text-primary' : 'text-toned'"

package/app/components/guidedReview/GuidedReviewDraftCard.vue

@@ -114,7 +114,13 @@ async function discard(): Promise<void> {
         <UButton size="sm" :loading="saving" @click="save">
           {{ t('guidedReview.drafts.save') }}
         </UButton>
-        <UButton size="sm" variant="ghost" :disabled="saving" @click="editing = false">
+        <UButton
+          color="neutral"
+          size="sm"
+          variant="ghost"
+          :disabled="saving"
+          @click="editing = false"
+        >
           {{ t('guidedReview.drafts.cancel') }}
         </UButton>
       </div>
@@ -126,13 +132,19 @@ async function discard(): Promise<void> {
         {{ t('guidedReview.drafts.postFailed') }}: {{ draft.postError }}
       </p>
       <div v-if="editable" class="mt-2 flex gap-2">
-        <UButton size="xs" variant="ghost" icon="i-lucide-pencil" @click="startEdit">
+        <UButton
+          color="neutral"
+          size="xs"
+          variant="ghost"
+          icon="i-lucide-pencil"
+          @click="startEdit"
+        >
           {{ t('guidedReview.drafts.edit') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           size="xs"
-          variant="ghost"
-          color="neutral"
           icon="i-lucide-trash-2"
           :loading="saving"
           @click="discard"

package/app/components/guidedReview/GuidedReviewModal.vue

@@ -218,6 +218,7 @@ const title = computed(() =>
               <span class="max-w-48 truncate">{{ threadTitle(tab) }}</span>
             </UButton>
             <UButton
+              color="neutral"
               v-if="!draftOpen"
               size="sm"
               variant="ghost"

package/app/components/guidedReview/GuidedReviewOverview.vue

@@ -36,6 +36,7 @@ const SEVERITY_COLOR = { high: 'error', medium: 'warning', low: 'neutral' } as c
       </UBadge>
       <span class="flex-1" />
       <UButton
+        color="neutral"
         size="xs"
         variant="ghost"
         icon="i-lucide-refresh-cw"

package/app/components/humanTest/HumanTestWindow.vue

@@ -223,9 +223,9 @@ const canDestroy = computed(
               {{ t('humanTest.actions.recreate') }}
             </UButton>
             <UButton
-              size="xs"
+              color="error"
               variant="soft"
-              color="neutral"
+              size="xs"
               icon="i-lucide-trash-2"
               :disabled="busy || !canDestroy || !access.canExecuteRuns.value"
               :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
@@ -281,6 +281,7 @@ const canDestroy = computed(
               class="w-full"
             />
             <UButton
+              variant="soft"
               size="sm"
               color="warning"
               icon="i-lucide-wrench"

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -343,7 +343,7 @@ async function onDiscard() {
       <UButton
         v-if="canDiscard"
         color="error"
-        variant="ghost"
+        variant="soft"
         size="sm"
         icon="i-lucide-trash-2"
         :loading="resetting"

package/app/components/judge/JudgeResultView.vue

@@ -280,6 +280,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
               {{ t('judge.stop') }}
             </UButton>
             <UButton
+              variant="soft"
               size="sm"
               color="warning"
               icon="i-lucide-undo-2"

package/app/components/layout/AccountDeploymentSettings.vue

@@ -483,9 +483,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.slackOAuthConfigured"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingSlack"
           @click="clearSlack"
@@ -538,9 +538,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.linearOAuthConfigured"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingLinear"
           @click="clearLinear"
@@ -593,9 +593,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.figmaOAuthConfigured"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingFigma"
           @click="clearFigma"
@@ -644,9 +644,9 @@ async function clearWeb() {
           {{ t('common.save') }}
         </UButton>
         <UButton
+          color="error"
+          variant="soft"
           v-if="summary?.webSearch"
-          color="neutral"
-          variant="ghost"
           size="xs"
           :loading="savingWeb"
           @click="clearWeb"

package/app/components/layout/AccountTeamSettings.vue

@@ -328,7 +328,7 @@ async function disconnectEmail() {
             </template>
             <template #from>{{ accounts.emailConnection.fromAddress }}</template>
           </i18n-t>
-          <UButton size="xs" color="error" variant="ghost" :loading="busy" @click="disconnectEmail">
+          <UButton size="xs" color="error" variant="soft" :loading="busy" @click="disconnectEmail">
             {{ t('layout.accountTeam.email.disconnect') }}
           </UButton>
         </div>

package/app/components/panels/AgentStepDetail.vue

@@ -657,6 +657,7 @@ async function copyOutput() {
                provider error, behind a toggle (most useful on a failed-to-start run) -->
           <div v-if="executionId">
             <UButton
+              color="neutral"
               :icon="showProvisioning ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
               variant="ghost"
               size="xs"
@@ -685,6 +686,7 @@ async function copyOutput() {
                superseded and the FAILED attempts, scoped to the step being looked at -->
           <div v-if="hasStepHistory">
             <UButton
+              color="neutral"
               :icon="showHistory ? 'i-lucide-chevron-up' : 'i-lucide-history'"
               variant="ghost"
               size="xs"

package/app/components/panels/InspectorPanel.vue

@@ -678,7 +678,7 @@ const showOriginalDescription = ref(false)
         </UButton>
         <UButton
           color="error"
-          variant="ghost"
+          variant="soft"
           size="sm"
           icon="i-lucide-trash-2"
           :class="isServiceFrame ? '' : 'ms-auto'"

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

@@ -101,7 +101,7 @@ async function clear() {
       <UButton
         v-if="saved"
         color="error"
-        variant="ghost"
+        variant="soft"
         size="xs"
         icon="i-lucide-trash-2"
         :loading="busy"

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

@@ -152,7 +152,7 @@ async function clearAll() {
       <UButton
         v-if="configured.length"
         color="error"
-        variant="ghost"
+        variant="soft"
         size="xs"
         icon="i-lucide-trash-2"
         :loading="busy"

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

@@ -209,7 +209,7 @@ async function clear() {
       <UButton
         v-if="configured"
         color="error"
-        variant="ghost"
+        variant="soft"
         size="xs"
         icon="i-lucide-trash-2"
         :loading="busy"

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

@@ -347,7 +347,7 @@ async function mergePr() {
           <UButton
             icon="i-lucide-trash-2"
             color="error"
-            variant="ghost"
+            variant="soft"
             size="xs"
             :loading="resetting"
             :disabled="stopping || !access.canExecuteRuns.value"

package/app/components/pipeline/PipelineBuilder.vue

@@ -1340,7 +1340,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   <IconButton
                     v-if="!p.builtin"
                     icon="i-lucide-trash-2"
-                    color="neutral"
+                    color="error"
                     variant="ghost"
                     size="xs"
                     :label="t('pipeline.builder.delete')"

package/app/components/pipeline/PipelineHealthModal.vue

@@ -218,7 +218,7 @@ const reseedableCount = computed(
                   v-else
                   size="xs"
                   color="error"
-                  variant="subtle"
+                  variant="soft"
                   icon="i-lucide-trash-2"
                   :loading="isBusy(h.pipeline.id)"
                   :disabled="locked"
@@ -259,7 +259,7 @@ const reseedableCount = computed(
               <UButton
                 size="xs"
                 color="error"
-                variant="subtle"
+                variant="soft"
                 icon="i-lucide-trash-2"
                 :loading="isBusy(r.pipeline.id)"
                 :disabled="locked"

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -120,6 +120,7 @@ function when(epochMs: number): string {
         {{ t('provisioning.title') }}
       </SectionLabel>
       <UButton
+        color="neutral"
         icon="i-lucide-rotate-ccw"
         variant="ghost"
         size="xs"

package/app/components/sandbox/SandboxPanel.vue

@@ -629,6 +629,7 @@ async function archive(prompt: SandboxPromptVersion) {
                      Offered on a graded candidate and on an older workspace revision (rolling
                      back), but not on the one already live, where it would be a no-op. -->
                 <IconButton
+                  color="neutral"
                   v-if="canPromote(p)"
                   icon="i-lucide-rocket"
                   variant="ghost"

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -540,7 +540,7 @@ function toastRemoved() {
             <UButton
               icon="i-lucide-trash-2"
               color="error"
-              variant="ghost"
+              variant="soft"
               size="xs"
               :disabled="busy"
               @click="removeKubeOverride"

package/app/components/settings/ProviderConnectionTab.vue

@@ -356,6 +356,7 @@ function fieldHelp(key: string): string | undefined {
     <div class="flex items-start justify-between gap-3">
       <p class="text-xs text-muted">{{ blurb }}</p>
       <UButton
+        color="neutral"
         :icon="showLogs ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
         variant="ghost"
         size="xs"

package/app/components/settings/ToolServerChecklist.vue

@@ -242,7 +242,7 @@ async function runProbe(id: string) {
           <UButton
             v-if="server.oauth.connected"
             size="xs"
-            variant="ghost"
+            variant="soft"
             color="error"
             :loading="store.connecting === server.id"
             :disabled="store.connecting !== null"

package/app/components/skills/SkillLibraryManager.vue

@@ -236,6 +236,7 @@ async function unlinkSource(id: string) {
           </UBadge>
           <div class="ms-auto flex gap-1">
             <IconButton
+              color="neutral"
               icon="i-lucide-search-check"
               size="xs"
               variant="ghost"
@@ -244,6 +245,7 @@ async function unlinkSource(id: string) {
               @click="checkSource(s.id)"
             />
             <IconButton
+              color="neutral"
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"

package/app/components/slack/SlackPanel.vue

@@ -257,7 +257,7 @@ async function saveMapping() {
             </span>
             <UButton
               color="error"
-              variant="ghost"
+              variant="soft"
               size="xs"
               icon="i-lucide-unplug"
               @click="disconnect"

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -193,7 +193,7 @@ async function toggleEnabled(enabled: boolean) {
           <UButton
             v-if="connected"
             color="error"
-            variant="ghost"
+            variant="soft"
             icon="i-lucide-unplug"
             @click="disconnect"
           >

package/app/components/testing/TestReportWindow.vue

@@ -438,6 +438,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
             </p>
             <template v-if="infraSetup.logs">
               <UButton
+                color="neutral"
                 :icon="showInfraSetupLogs ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
                 variant="ghost"
                 size="xs"
@@ -476,6 +477,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
           <div v-if="executionId">
             <UButton
+              color="neutral"
               :icon="showProvisioning ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
               variant="ghost"
               size="xs"

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -406,6 +406,7 @@ watch(pendingUpload, async (file) => {
               {{ t('visualConfirm.requestFix.foldedHint') }}
             </span>
             <UButton
+              variant="soft"
               size="sm"
               color="warning"
               icon="i-lucide-wrench"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.310.2",
+  "version": "0.310.3",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",