test

frontend/src/components/patterns/QueueHealthBadge.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps<{
+  queued: number;
+  retrying: number;
+  dropped: number;
+}>();
+</script>
+
+<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"
+  >
+    <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">
+      {{ 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">
+      {{ props.dropped }} dropped
+    </span>
+  </span>
+</template>

frontend/src/components/patterns/RequestErrorPanel.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import AppAlert from "@/components/ui/AppAlert.vue";
+import { useUiStore } from "@/stores/ui";
+
+const ui = useUiStore();
+</script>
+
+<template>
+  <div v-if="ui.globalError" class="sticky top-[4.5rem] z-20 px-4 pb-2 sm:px-6 lg:px-8">
+    <div class="mx-auto w-full max-w-7xl">
+      <AppAlert tone="danger" :dismissible="true" @dismiss="ui.clearGlobalError()">
+        <template #title>Request failed</template>
+        <p>{{ ui.globalError.message }}</p>
+        <p class="text-secondary">Request ID: {{ ui.globalError.requestId || "n/a" }}</p>
+      </AppAlert>
+    </div>
+  </div>
+</template>

frontend/src/components/patterns/RunStatusBadge.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  status: string;
+}>();
+
+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";
+  }
+  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";
+  }
+  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";
+  }
+  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-zinc-300 bg-zinc-100 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300";
+});
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold capitalize"
+    :class="toneClass"
+  >
+    {{ label }}
+  </span>
+</template>