@cat-factory/app 0.260.1 → 0.261.1

package/app/components/auth/LoginScreen.vue

@@ -5,6 +5,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 import type { VcsProvider } from '~/types/domain'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS, vcsTokenCreateUrl } from '~/utils/vcs'
 import { SSO_ERROR_MESSAGE_KEYS } from '~/utils/sso'
+import { postSignInUrl } from '~/utils/postSignIn'
 
 const auth = useAuthStore()
 const { t } = useI18n()
@@ -62,7 +63,7 @@ async function submitPat(provider: PatProvider) {
   patBusy.value = true
   try {
     await auth.patLogin({ provider })
-    if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
+    if (typeof window !== 'undefined') window.location.assign(postSignInUrl(window.location))
   } catch (e) {
     patError.value = apiErrorEnvelope(e)?.message ?? t('auth.localMode.failed')
   } finally {
@@ -105,7 +106,7 @@ async function submitPassword() {
       await auth.passwordLogin({ email: email.value, password: password.value })
     }
     // Reload so the app boots with the new session.
-    if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
+    if (typeof window !== 'undefined') window.location.assign(postSignInUrl(window.location))
   } catch (e) {
     error.value = apiErrorEnvelope(e)?.message ?? t('auth.login.signInFailed')
   } finally {
@@ -177,7 +178,7 @@ async function submitRemotePat() {
   remotePatBusy.value = true
   try {
     await auth.patLogin({ provider: remotePatProvider.value, token: remotePatToken.value.trim() })
-    if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
+    if (typeof window !== 'undefined') window.location.assign(postSignInUrl(window.location))
   } catch (e) {
     remotePatError.value = apiErrorEnvelope(e)?.message ?? t('auth.login.signInFailed')
   } finally {

package/app/components/settings/ConnectionTestVerdict.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// The verdict of one "Test connection" probe, rendered identically everywhere a connect form
+// offers that button.
+//
+// Its own component because the message stopped being a few words. A failed probe now reports
+// the EXACT transport failure plus what to do about it (kernel's `connectionFailureResult`),
+// which runs to a sentence or three, and the inline `<span>` each form used to carry sat inside
+// a `flex items-center` row beside the button, where a long message squashes the button and
+// overflows the panel. So the result is a block that wraps, and the six forms share it rather
+// than each growing its own copy of the same markup.
+//
+// Two lines, because that account is English by construction and this SPA ships in ten languages.
+// The backend states the failure CLASS as a machine-readable `failureCause`; the headline is that
+// class in the operator's own language, and the backend's prose sits under it as the detail. The
+// detail stays VISIBLE rather than folding behind a disclosure: it is the half that names the
+// concrete host, port and remedy, and a probe verdict is read to find out what to go fix.
+import { computed } from 'vue'
+import type { ConnectionFailureCause } from '@cat-factory/contracts'
+import { CONNECTION_FAILURE_CAUSE_KEYS } from '~/utils/connectionFailures'
+
+const props = defineProps<{
+  /** The probe verdict; null before the first test (renders nothing). */
+  result: { ok: boolean; message?: string; failureCause?: ConnectionFailureCause } | null
+}>()
+
+const { t, te } = useI18n()
+
+/**
+ * The translated-headline key for this failure, or null when there is none: an `unknown` cause, a
+ * cause this SPA build predates, or a failure that was an ANSWER (an HTTP status the provider
+ * mapped itself, which carries no transport cause). In every one of those the backend's own
+ * message becomes the primary line, so a missing translation is never a blank verdict.
+ */
+const causeKey = computed(() => {
+  const cause = props.result && !props.result.ok ? props.result.failureCause : undefined
+  const key = cause ? CONNECTION_FAILURE_CAUSE_KEYS[cause] : null
+  return key && te(key) ? key : null
+})
+
+const headline = computed(() =>
+  causeKey.value
+    ? t(causeKey.value)
+    : (props.result?.message ?? t('settings.providerConnection.test.failed')),
+)
+
+/** The backend's English account, shown only when a headline took the primary line from it. */
+const detail = computed(() => (causeKey.value ? (props.result?.message ?? '') : ''))
+</script>
+
+<template>
+  <p
+    v-if="result?.ok"
+    class="text-xs text-emerald-400 break-words"
+    data-testid="connection-test-result"
+  >
+    {{ result.message ?? t('settings.providerConnection.test.ok') }}
+  </p>
+  <div v-else-if="result" class="space-y-0.5" data-testid="connection-test-result">
+    <p class="text-xs text-rose-400 break-words">{{ headline }}</p>
+    <p v-if="detail" class="text-[11px] text-slate-400 break-words">{{ detail }}</p>
+  </div>
+</template>

package/app/components/settings/InfraHandlersConfigurator.logic.spec.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import {
+  consumeKubernetesScrollAnchor,
+  type ScrollableSection,
+} from '~/components/settings/InfraHandlersConfigurator.logic'
+
+/**
+ * The `cat-factory k3s` hand-off promises the operator lands on the ONE form the CLI just filled
+ * in. `k3sDeepLink.spec.ts` pins that the link arms the anchor; this pins the other half, that the
+ * panel consumes it exactly once and only when there is something to scroll to.
+ */
+function recorder(): ScrollableSection & { calls: ScrollIntoViewOptions[] } {
+  const calls: ScrollIntoViewOptions[] = []
+  return { calls, scrollIntoView: (options) => calls.push(options) }
+}
+
+describe('consumeKubernetesScrollAnchor', () => {
+  it('scrolls the section into view once the panel and the section are both there', () => {
+    const section = recorder()
+    const outcome = consumeKubernetesScrollAnchor({
+      target: 'kubernetes',
+      available: true,
+      section,
+    })
+
+    expect(outcome).toBe('scrolled')
+    expect(section.calls).toEqual([{ behavior: 'smooth', block: 'start' }])
+  })
+
+  it('does nothing when no anchor is pending, so a plain open never jumps', () => {
+    const section = recorder()
+    expect(consumeKubernetesScrollAnchor({ target: null, available: true, section })).toBe(
+      'not-anchored',
+    )
+    expect(section.calls).toEqual([])
+  })
+
+  it('does nothing while the infra probe is still resolving', () => {
+    // The whole configurator is behind `v-if="infra.available === true"`, and that probe resolves
+    // AFTER the deep link fires: the section cannot be scrolled to before it exists.
+    const section = recorder()
+    expect(consumeKubernetesScrollAnchor({ target: 'kubernetes', available: null, section })).toBe(
+      'not-anchored',
+    )
+    expect(section.calls).toEqual([])
+  })
+
+  it('leaves the anchor for the next attempt when the section has not rendered yet', () => {
+    // `not-rendered` is what keeps the hand-off alive across the render the probe gates: only
+    // `scrolled` tells the caller to clear the store's target, so a miss cannot swallow the link.
+    const first = consumeKubernetesScrollAnchor({
+      target: 'kubernetes',
+      available: true,
+      section: null,
+    })
+    expect(first).toBe('not-rendered')
+
+    const section = recorder()
+    expect(consumeKubernetesScrollAnchor({ target: 'kubernetes', available: true, section })).toBe(
+      'scrolled',
+    )
+    expect(section.calls).toHaveLength(1)
+  })
+})

package/app/components/settings/InfraHandlersConfigurator.logic.ts

@@ -0,0 +1,41 @@
+import type { InfrastructureScrollTarget } from '~/types/providerConnections'
+
+// The deep-link SECTION anchor the `cat-factory k3s` hand-off lands on, as a plain function so the
+// rule is testable: the component half is a `watch` plus an `onMounted` retry, and neither is
+// reachable from a spec (this SPA has no component-mounting harness).
+//
+// The rule that needed pinning is the three-way outcome, not the scroll. The anchor is one-shot and
+// is consumed only once the section is actually IN the DOM, but the section renders behind an async
+// probe, so an attempt that finds nothing must leave the anchor ARMED for the next attempt rather
+// than clear it. Clearing on a miss silently swallows the hand-off on a slow probe; never clearing
+// leaves a dead anchor, which is why "scrolled" is the only outcome the caller acts on and why
+// closing the window drops whatever is left (`closeProviderConnection`).
+
+/** The minimum of an element this needs, so a spec can pass a recorder instead of a DOM node. */
+export interface ScrollableSection {
+  scrollIntoView: (options: ScrollIntoViewOptions) => void
+}
+
+export interface ScrollAnchorAttempt {
+  /** The store's pending anchor, or null when there is nothing to land on. */
+  target: InfrastructureScrollTarget | null
+  /** The infra-probe gate the sections render behind; null while it is still resolving. */
+  available: boolean | null
+  /** The section element, or null when it has not rendered yet. */
+  section: ScrollableSection | null
+}
+
+/**
+ * - `scrolled`: the anchor was honoured and the CALLER must now clear it.
+ * - `not-anchored`: nothing is pending for this section (or the panel is not showing yet).
+ * - `not-rendered`: it IS pending, but the section is not in the DOM, so the anchor stays armed.
+ */
+export type ScrollAnchorOutcome = 'scrolled' | 'not-anchored' | 'not-rendered'
+
+/** Honour a pending Kubernetes-section anchor, reporting which of the three cases this was. */
+export function consumeKubernetesScrollAnchor(attempt: ScrollAnchorAttempt): ScrollAnchorOutcome {
+  if (attempt.target !== 'kubernetes' || attempt.available !== true) return 'not-anchored'
+  if (!attempt.section) return 'not-rendered'
+  attempt.section.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  return 'scrolled'
+}

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -12,7 +12,7 @@
 //                      per custom type (matched to a service's pinned `manifestId`).
 // In LOCAL mode each handler additionally offers a per-USER override (this-machine only),
 // written to the `/me/environment-handlers` endpoints. Drives the infraConfig store.
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import type {
   CustomManifestType,
   EnvironmentHandlerView,
@@ -28,6 +28,8 @@ import KubernetesEngineForm from '~/components/settings/KubernetesEngineForm.vue
 import ProviderManifestEditor from '~/components/settings/ProviderManifestEditor.vue'
 import CustomManifestTypeEditor from '~/components/settings/CustomManifestTypeEditor.vue'
 import CloudflareHandlerSection from '~/components/settings/CloudflareHandlerSection.vue'
+import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
+import { consumeKubernetesScrollAnchor } from '~/components/settings/InfraHandlersConfigurator.logic'
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
@@ -94,6 +96,32 @@ watch(
   { immediate: true },
 )
 
+// Deep-link anchor: the `cat-factory k3s` hand-off opens this window with the ui store's scroll
+// target set to `kubernetes`, so bring that section into view once rather than dropping the
+// operator at the top of the tab to hunt for the form the CLI just described.
+//
+// Attempted from BOTH the watch and `onMounted`, and the anchor is cleared only on a real scroll:
+// the section is behind `v-if="infra.available === true"`, whose probe resolves after the deep link
+// fires, so a single attempt that finds nothing rendered would swallow the hand-off with neither
+// watched value ever changing again to re-drive it. The decision itself is in the logic module,
+// where it is tested.
+const kubeSection = ref<HTMLElement | null>(null)
+async function anchorKubernetesSection() {
+  await nextTick()
+  const outcome = consumeKubernetesScrollAnchor({
+    target: ui.infrastructureScrollTarget,
+    available: infra.available,
+    section: kubeSection.value,
+  })
+  if (outcome === 'scrolled') ui.clearInfrastructureScrollTarget()
+}
+watch([() => ui.infrastructureScrollTarget, () => infra.available], () => {
+  void anchorKubernetesSection()
+})
+onMounted(() => {
+  void anchorKubernetesSection()
+})
+
 const busy = ref(false)
 
 // Connection-probe state for the kube engine forms (workspace + per-user override kept
@@ -400,7 +428,11 @@ function notifyError(e: unknown) {
     <p class="text-xs text-slate-400">{{ t('settings.infrastructure.handler.intro') }}</p>
 
     <!-- kubernetes -->
-    <section class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
+    <section
+      ref="kubeSection"
+      class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
+      data-testid="infra-kubernetes-section"
+    >
       <h3 class="text-sm font-semibold text-slate-200">
         {{ t('inspector.testConfig.provisionTypes.kubernetes') }}
       </h3>
@@ -433,7 +465,7 @@ function notifyError(e: unknown) {
           {{ t('settings.infrastructure.handler.activeEngine') }}
           <span class="text-slate-200">{{ kubeHandlerEngineLabel }}</span>
         </p>
-        <div class="flex items-center gap-2 pl-7">
+        <div class="space-y-1.5 pl-7">
           <UButton
             color="neutral"
             variant="soft"
@@ -444,12 +476,7 @@ function notifyError(e: unknown) {
           >
             {{ t('settings.providerConnection.test.button') }}
           </UButton>
-          <span v-if="kubeSavedTestResult?.ok" class="text-xs text-emerald-400">
-            {{ kubeSavedTestResult.message ?? t('settings.providerConnection.test.ok') }}
-          </span>
-          <span v-else-if="kubeSavedTestResult" class="text-xs text-rose-400">
-            {{ kubeSavedTestResult.message ?? t('settings.providerConnection.test.failed') }}
-          </span>
+          <ConnectionTestVerdict :result="kubeSavedTestResult" />
         </div>
       </div>
       <p v-else class="flex items-center gap-1.5 text-[12px] text-slate-500">

package/app/components/settings/KubernetesEngineForm.vue

@@ -9,6 +9,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { KUBERNETES_ENV_TOKEN_SECRET_KEY } from '@cat-factory/contracts'
 import SecretInput from '~/components/common/SecretInput.vue'
+import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
 import type {
   EnvironmentHandlerView,
   InfraEngine,
@@ -75,6 +76,13 @@ const form = reactive({
   urlScheme: 'default' as 'default' | 'http' | 'https',
 })
 const apiToken = ref('')
+// Flag a bad paste ON THE FIELD, before Test is ever clicked. The guided CLI flow ends with
+// "copy this token out of your terminal", and a terminal wraps: a token copied across that wrap
+// carries an invisible newline that survives `.trim()` and can never become an `authorization`
+// header. Left to the probe it comes back as an opaque transport failure minutes later.
+// Destructured at the top level so the template auto-unwraps the refs (a ref nested in a plain
+// object is not unwrapped in a template, only a top-level one is).
+const { blocking: tokenBlocking, message: tokenProblem } = useServiceAccountTokenProblem(apiToken)
 
 const urlSourceItems = computed(() => [
   {
@@ -210,6 +218,7 @@ const canSave = computed(
     !!form.label.trim() &&
     !!form.apiServerUrl.trim() &&
     (tokenStored.value || !!apiToken.value.trim()) &&
+    !tokenBlocking.value &&
     urlValid.value,
 )
 
@@ -232,6 +241,9 @@ const connectBlockedReason = computed(() => {
     missing.push(t('settings.infrastructure.kubernetesEngine.serviceName'))
   if (missing.length)
     return t('settings.providerConnection.form.missingFields', { fields: missing.join(', ') })
+  // Repeated from under the token field, so the disabled button is never left unexplained for a
+  // reader whose eye is on it rather than on the field above.
+  if (tokenBlocking.value) return tokenProblem.value
   return t('settings.infrastructure.kubernetesEngine.invalidPort')
 })
 
@@ -414,6 +426,16 @@ async function copyAutoSetupCommand() {
             : undefined
         "
       />
+      <!-- Rose when the paste is impossible (blocks Test/Save), amber when it is only suspicious
+           and the operator may legitimately overrule it. -->
+      <p
+        v-if="tokenProblem"
+        class="mt-1 text-[11px]"
+        :class="tokenBlocking ? 'text-rose-400' : 'text-amber-400'"
+        data-testid="service-account-token-problem"
+      >
+        {{ tokenProblem }}
+      </p>
     </UFormField>
 
     <!-- URL derivation: how the live environment URL is resolved once the service's
@@ -517,7 +539,7 @@ async function copyAutoSetupCommand() {
       />
     </UFormField>
 
-    <div v-if="supportsTest" class="flex items-center gap-2">
+    <div v-if="supportsTest" class="space-y-1.5">
       <UButton
         color="neutral"
         variant="soft"
@@ -529,12 +551,7 @@ async function copyAutoSetupCommand() {
       >
         {{ t('settings.providerConnection.test.button') }}
       </UButton>
-      <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
-        {{ testResult.message ?? t('settings.providerConnection.test.ok') }}
-      </span>
-      <span v-else-if="testResult" class="text-xs text-rose-400">
-        {{ testResult.message ?? t('settings.providerConnection.test.failed') }}
-      </span>
+      <ConnectionTestVerdict :result="testResult" />
     </div>
 
     <div class="flex items-center justify-end gap-3">

package/app/components/settings/KubernetesEnvironmentForm.vue

@@ -12,6 +12,7 @@ import { computed, reactive, ref, watch } from 'vue'
 import { KUBERNETES_ENV_TOKEN_SECRET_KEY } from '@cat-factory/contracts'
 import type { ConnectionTestResult } from '@cat-factory/contracts'
 import ConnectionWarnings from '~/components/settings/ConnectionWarnings.vue'
+import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import type { ProviderConnection } from '~/types/providerConnections'
 
@@ -54,6 +55,10 @@ const form = reactive({
   urlScheme: 'default' as 'default' | 'http' | 'https',
 })
 const apiToken = ref('')
+// Flag a bad paste on the field itself rather than leaving it to surface as an opaque probe
+// failure. Destructured at the top level so the template auto-unwraps the refs. Same rule and
+// same copy as the per-type engine form, via the shared composable.
+const { blocking: tokenBlocking, message: tokenProblem } = useServiceAccountTokenProblem(apiToken)
 
 const manifestSourceItems = computed(() => [
   { label: t('settings.providerConnection.kubernetesEnv.sourceColocated'), value: 'colocated' },
@@ -168,6 +173,7 @@ const canSave = computed(
     !!form.label.trim() &&
     !!form.apiServerUrl.trim() &&
     !!apiToken.value.trim() &&
+    !tokenBlocking.value &&
     manifestSourceValid.value &&
     urlValid.value,
 )
@@ -191,6 +197,8 @@ const connectBlockedReason = computed(() => {
     missing.push(t('settings.providerConnection.kubernetesEnv.serviceName'))
   if (missing.length)
     return t('settings.providerConnection.form.missingFields', { fields: missing.join(', ') })
+  // Repeated from under the token field, so the disabled button is never left unexplained.
+  if (tokenBlocking.value) return tokenProblem.value
   return t('settings.providerConnection.kubernetesEnv.invalidFields')
 })
 
@@ -273,6 +281,16 @@ function optional(label: string): string {
       :help="t('settings.providerConnection.kubernetesEnv.apiTokenHelp')"
     >
       <SecretInput v-model="apiToken" class="w-full font-mono" />
+      <!-- Rose when the paste is impossible (blocks Test/Save), amber when it is only suspicious
+           and the operator may legitimately overrule it. -->
+      <p
+        v-if="tokenProblem"
+        class="mt-1 text-[11px]"
+        :class="tokenBlocking ? 'text-rose-400' : 'text-amber-400'"
+        data-testid="service-account-token-problem"
+      >
+        {{ tokenProblem }}
+      </p>
     </UFormField>
 
     <!-- Manifest source: where the per-PR resources are read from. -->
@@ -391,7 +409,7 @@ function optional(label: string): string {
       />
     </UFormField>
 
-    <div v-if="supportsTest" class="flex items-center gap-2">
+    <div v-if="supportsTest" class="space-y-1.5">
       <UButton
         color="neutral"
         variant="soft"
@@ -403,12 +421,7 @@ function optional(label: string): string {
       >
         {{ t('settings.providerConnection.test.button') }}
       </UButton>
-      <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
-        {{ testResult.message ?? t('settings.providerConnection.test.ok') }}
-      </span>
-      <span v-else-if="testResult" class="text-xs text-rose-400">
-        {{ testResult.message ?? t('settings.providerConnection.test.failed') }}
-      </span>
+      <ConnectionTestVerdict :result="testResult" />
     </div>
 
     <ConnectionWarnings :warnings="testResult?.warnings" />