feat: production-harden app and finalize merge-ready UX/theme baseline

- complete tokenized theme preset system and admin style guide visibility
- refine dashboard layout/scroll behavior and shared async/request UI states
- add user nav-visibility settings across API, migration, and frontend stores
- harden security headers/CSP handling and related test coverage
- enforce CI repository hygiene + frontend contract/theme/build quality gates
- update docs/env references and make migration smoke test head-aware

frontend/src/components/patterns/AsyncStateGate.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import AppEmptyState from "@/components/ui/AppEmptyState.vue";
+import AppSkeleton from "@/components/ui/AppSkeleton.vue";
+
+const props = withDefaults(
+  defineProps<{
+    loading: boolean;
+    loadingLines?: number;
+    empty?: boolean;
+    emptyTitle?: string;
+    emptyBody?: string;
+    showEmpty?: boolean;
+  }>(),
+  {
+    loadingLines: 6,
+    empty: false,
+    emptyTitle: "No data available",
+    emptyBody: "No records matched this request.",
+    showEmpty: true,
+  },
+);
+</script>
+
+<template>
+  <AppSkeleton v-if="props.loading" :lines="props.loadingLines" />
+  <AppEmptyState
+    v-else-if="props.showEmpty && props.empty"
+    :title="props.emptyTitle"
+    :body="props.emptyBody"
+  >
+    <slot name="empty" />
+  </AppEmptyState>
+  <slot v-else />
+</template>

frontend/src/components/patterns/QueueHealthBadge.vue

@@ -8,14 +8,19 @@ const props = defineProps<{
 
 <template>
   <span
-    class="inline-flex flex-wrap items-center gap-2 rounded-full border border-zinc-300 bg-zinc-100 px-3 py-1 text-xs text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
+    class="inline-flex flex-wrap items-center gap-2 rounded-xl border border-stroke-default bg-surface-card-muted/90 px-3 py-1.5 text-xs text-ink-secondary"
   >
-    <span class="font-medium">Queue</span>
-    <span class="rounded-full bg-zinc-200 px-2 py-0.5 dark:bg-zinc-700">{{ props.queued }} queued</span>
-    <span class="rounded-full bg-amber-100 px-2 py-0.5 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300">
+    <span class="font-semibold tracking-wide text-ink-primary">Queue</span>
+    <span class="inline-flex items-center gap-1 rounded-full bg-surface-card px-2 py-0.5">
+      <span class="h-1.5 w-1.5 rounded-full bg-ink-muted" />
+      {{ props.queued }} queued
+    </span>
+    <span class="inline-flex items-center gap-1 rounded-full bg-state-warning-bg px-2 py-0.5 text-state-warning-text">
+      <span class="h-1.5 w-1.5 rounded-full bg-warning-500" />
       {{ props.retrying }} retrying
     </span>
-    <span class="rounded-full bg-rose-100 px-2 py-0.5 text-rose-700 dark:bg-rose-950/50 dark:text-rose-300">
+    <span class="inline-flex items-center gap-1 rounded-full bg-state-danger-bg px-2 py-0.5 text-state-danger-text">
+      <span class="h-1.5 w-1.5 rounded-full bg-danger-500" />
       {{ props.dropped }} dropped
     </span>
   </span>

frontend/src/components/patterns/RequestStateAlerts.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import AppAlert from "@/components/ui/AppAlert.vue";
+
+const props = withDefaults(
+  defineProps<{
+    successMessage?: string | null;
+    successTitle?: string;
+    errorMessage?: string | null;
+    errorRequestId?: string | null;
+    errorTitle?: string;
+  }>(),
+  {
+    successMessage: null,
+    successTitle: "Operation complete",
+    errorMessage: null,
+    errorRequestId: null,
+    errorTitle: "Request failed",
+  },
+);
+
+const emit = defineEmits<{
+  dismissSuccess: [];
+}>();
+</script>
+
+<template>
+  <div class="space-y-3">
+    <AppAlert
+      v-if="props.successMessage"
+      tone="success"
+      dismissible
+      @dismiss="emit('dismissSuccess')"
+    >
+      <template #title>{{ props.successTitle }}</template>
+      <p>{{ props.successMessage }}</p>
+    </AppAlert>
+
+    <AppAlert v-if="props.errorMessage" tone="danger">
+      <template #title>{{ props.errorTitle }}</template>
+      <p>{{ props.errorMessage }}</p>
+      <p class="text-secondary">Request ID: {{ props.errorRequestId || "n/a" }}</p>
+    </AppAlert>
+  </div>
+</template>

frontend/src/components/patterns/RunStatusBadge.vue

@@ -9,18 +9,18 @@ const label = computed(() => props.status.replaceAll("_", " "));
 
 const toneClass = computed(() => {
   if (props.status === "success") {
-    return "border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300";
+    return "border-state-success-border bg-state-success-bg text-state-success-text";
   }
   if (props.status === "partial_failure") {
-    return "border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950/50 dark:text-amber-300";
+    return "border-state-warning-border bg-state-warning-bg text-state-warning-text";
   }
   if (props.status === "failed") {
-    return "border-rose-300 bg-rose-50 text-rose-700 dark:border-rose-800 dark:bg-rose-950/50 dark:text-rose-300";
+    return "border-state-danger-border bg-state-danger-bg text-state-danger-text";
   }
   if (props.status === "running") {
-    return "border-brand-300 bg-brand-50 text-brand-700 dark:border-brand-800 dark:bg-brand-950/50 dark:text-brand-300";
+    return "border-state-info-border bg-state-info-bg text-state-info-text";
   }
-  return "border-zinc-300 bg-zinc-100 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300";
+  return "border-stroke-default bg-surface-card-muted text-ink-secondary";
 });
 </script>