nuxt-media-library 0.0.44

package/dist/runtime/components/MLPreviewProvider.vue.d.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    assetId?: string | null;
+    fallbackSrc?: string | null;
+    autoRegister?: boolean;
+};
+declare var __VLS_1: {
+    asset: import("../types/preview.js").AssetPreview | undefined;
+    src: string | null;
+    broken: boolean;
+    forbidden: boolean;
+    loading: boolean;
+    renditions: import("..").DeliveryRendition[];
+    sources: import("../types/preview.js").AssetSource[];
+    thumbnailUrl: string | null;
+    status: string | null;
+    refresh: () => Promise<void>;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    autoRegister: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MLProcessing/Forms/ConfigureStepModal.d.vue.ts

@@ -0,0 +1,13 @@
+import type { PipelineOptionSchema } from "../../../types/asset.js";
+type __VLS_Props = {
+    taskType: string;
+    schema: Record<string, PipelineOptionSchema>;
+    downloadUrl?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result?: Record<string, any> | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result?: Record<string, any> | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/Forms/ConfigureStepModal.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  taskType: { type: String, required: true },
+  schema: { type: Object, required: true },
+  downloadUrl: { type: [String, null], required: false }
+});
+const emit = defineEmits(["close"]);
+const title = props.taskType.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+const initialOptions = {};
+for (const [key, opt] of Object.entries(props.schema)) {
+  if (opt.default !== void 0) initialOptions[key] = opt.default;
+}
+const options = ref(initialOptions);
+function submit() {
+  emit("close", options.value);
+}
+</script>
+
+<template>
+  <UModal :title="`Configure ${title}`" @update:open="(v) => !v && emit('close')">
+    <template #body>
+      <MLProcessingFormsFramePicker
+        v-if="taskType === 'video_thumbnail'"
+        :download-url="downloadUrl ?? null"
+        v-model="options"
+      />
+
+      <MLProcessingFormsStepOptionsForm
+        v-else-if="Object.keys(schema).length"
+        :schema="schema"
+        v-model="options"
+      />
+
+      <div v-else class="text-sm text-muted">
+        No configurable options for this step.
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton variant="outline" color="neutral" label="Cancel" @click="emit('close')" />
+        <UButton color="primary" label="Apply & Start" @click="submit" />
+      </div>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/MLProcessing/Forms/ConfigureStepModal.vue.d.ts

@@ -0,0 +1,13 @@
+import type { PipelineOptionSchema } from "../../../types/asset.js";
+type __VLS_Props = {
+    taskType: string;
+    schema: Record<string, PipelineOptionSchema>;
+    downloadUrl?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result?: Record<string, any> | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result?: Record<string, any> | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/Forms/FramePicker.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    downloadUrl: string | null;
+    modelValue: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/Forms/FramePicker.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  downloadUrl: { type: [String, null], required: true },
+  modelValue: { type: Object, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const videoEl = ref(null);
+function parseTimestamp(val) {
+  if (typeof val === "number") return val;
+  if (typeof val === "string") {
+    const parts = val.split(":").map(Number);
+    if (parts.length === 3) return (parts[0] ?? 0) * 3600 + (parts[1] ?? 0) * 60 + (parts[2] ?? 0);
+    if (parts.length === 2) return (parts[0] ?? 0) * 60 + (parts[1] ?? 0);
+    const num = Number(val);
+    if (!Number.isNaN(num)) return num;
+  }
+  return 1;
+}
+const duration = ref(0);
+const currentTimestamp = ref(parseTimestamp(props.modelValue.timestamp));
+const seeking = ref(false);
+const sizeOptions = ["default", "medium", "high", "standard", "maxres"];
+const selectedSizes = computed(
+  () => Array.isArray(props.modelValue.sizes) ? props.modelValue.sizes : []
+);
+function formatTimestamp(secs) {
+  const h = Math.floor(secs / 3600);
+  const m = Math.floor(secs % 3600 / 60);
+  const s = secs % 60;
+  if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${s.toFixed(1).padStart(4, "0")}`;
+  return `${m}:${s.toFixed(1).padStart(4, "0")}`;
+}
+function onMetadata() {
+  if (videoEl.value) {
+    duration.value = videoEl.value.duration || 0;
+  }
+}
+function onSeeked() {
+  seeking.value = false;
+}
+function seekTo(time) {
+  const clamped = Math.max(0, Math.min(time, duration.value));
+  currentTimestamp.value = clamped;
+  if (videoEl.value) {
+    seeking.value = true;
+    videoEl.value.currentTime = clamped;
+  }
+  emitUpdate(clamped);
+}
+function onSliderChange(value) {
+  const v = Array.isArray(value) ? value[0] : value;
+  if (v != null) seekTo(v);
+}
+function onManualInput(value) {
+  const num = Number.parseFloat(value);
+  if (!Number.isNaN(num) && num >= 0) {
+    seekTo(num);
+  }
+}
+function emitUpdate(timestamp) {
+  emit("update:modelValue", { ...props.modelValue, timestamp });
+}
+function onSizesChange(sizes) {
+  emit("update:modelValue", { ...props.modelValue, sizes, timestamp: currentTimestamp.value });
+}
+watch(() => props.modelValue.timestamp, (val) => {
+  const parsed = parseTimestamp(val);
+  if (parsed !== currentTimestamp.value) {
+    currentTimestamp.value = parsed;
+  }
+});
+const quickJumps = [0, 25, 50, 75, 100];
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <!-- Video Preview -->
+    <div class="flex-1 /crelative rounded-lg overflow-hidden bg-black aspect-video">
+      <div class="">
+        <video
+          v-if="downloadUrl"
+          ref="videoEl"
+          :src="downloadUrl"
+          crossorigin="anonymous"
+          preload="metadata"
+          muted
+          class="w-full h-full object-contain"
+          @loadedmetadata="onMetadata"
+          @seeked="onSeeked"
+        />
+
+        <div v-else class="flex items-center justify-center h-full text-muted text-sm">
+          <div class="text-center">
+            <UIcon name="i-lucide-video-off" class="size-8 mb-2"/>
+            <div>Video preview unavailable</div>
+            <div class="text-xs mt-1">Enter timestamp manually below</div>
+          </div>
+        </div>
+
+        <!-- Seeking indicator -->
+        <div v-if="seeking" class="absolute inset-0 flex items-center justify-center bg-black/30">
+          <UIcon name="i-lucide-loader" class="size-6 text-white animate-spin"/>
+        </div>
+      </div>
+      <!-- Scrubber -->
+      <div v-if="duration > 0" class="space-y-2">
+        <USlider
+          :model-value="currentTimestamp"
+          :min="0"
+          :max="duration"
+          :step="0.1"
+          size="sm"
+          @update:model-value="onSliderChange"
+        />
+        <div class="flex items-center justify-between text-xs text-muted">
+          <span>{{ formatTimestamp(currentTimestamp) }}</span>
+          <span>{{ formatTimestamp(duration) }}</span>
+        </div>
+
+        <!-- Quick jump buttons -->
+        <div class="flex gap-1">
+          <UButton
+            v-for="pct in quickJumps"
+            :key="pct"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            :label="`${pct}%`"
+            @click="seekTo(duration * pct / 100)"
+          />
+        </div>
+      </div>
+
+      <!-- Manual timestamp input (always shown as fallback/alternative) -->
+      <UFormField label="Timestamp (seconds)">
+        <UInput
+          type="number"
+          :model-value="currentTimestamp"
+          :min="0"
+          :max="duration || void 0"
+          :step="0.1"
+          size="sm"
+          class="w-40"
+          @update:model-value="onManualInput(String($event))"
+        />
+      </UFormField>
+    </div>
+
+    <div class="flex-1">
+
+      <!-- Thumbnail sizes -->
+      <UCheckboxGroup
+        legend="Sizes"
+        :items="sizeOptions"
+        :model-value="selectedSizes"
+        @update:model-value="onSizesChange"
+      />
+    </div>
+
+  </div>
+</template>

package/dist/runtime/components/MLProcessing/Forms/FramePicker.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    downloadUrl: string | null;
+    modelValue: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/Forms/StepOptionsForm.d.vue.ts

@@ -0,0 +1,14 @@
+import type { PipelineOptionSchema } from "../../../types/asset.js";
+type __VLS_Props = {
+    schema: Record<string, PipelineOptionSchema>;
+    modelValue: Record<string, any>;
+    /** Keys to exclude from rendering (handled elsewhere, e.g., timestamp in FramePicker) */
+    exclude?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/Forms/StepOptionsForm.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  schema: { type: Object, required: true },
+  modelValue: { type: Object, required: true },
+  exclude: { type: Array, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const entries = computed(() => {
+  const excluded = new Set(props.exclude ?? []);
+  return Object.entries(props.schema).filter(([key]) => !excluded.has(key));
+});
+function formatLabel(key) {
+  return key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function update(key, value) {
+  emit("update:modelValue", { ...props.modelValue, [key]: value });
+}
+function toggleArrayItem(key, item) {
+  const current = Array.isArray(props.modelValue[key]) ? [...props.modelValue[key]] : [];
+  const idx = current.indexOf(item);
+  if (idx >= 0) current.splice(idx, 1);
+  else current.push(item);
+  update(key, current);
+}
+function isArrayItemSelected(key, item) {
+  const current = props.modelValue[key];
+  return Array.isArray(current) && current.includes(item);
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div v-for="([key, opt]) in entries" :key="key">
+      <!-- String with allowed values → Select -->
+      <UFormField v-if="opt.type === 'string' && opt.allowed_values?.length" :label="formatLabel(key)">
+        <USelect
+          :model-value="modelValue[key] ?? opt.default"
+          :items="opt.allowed_values.map((v) => ({ label: String(v), value: v }))"
+          size="sm"
+          class="w-full"
+          @update:model-value="update(key, $event)"
+        />
+      </UFormField>
+
+      <!-- String without allowed values → Input -->
+      <UFormField v-else-if="opt.type === 'string'" :label="formatLabel(key)">
+        <UInput
+          :model-value="modelValue[key] ?? opt.default ?? ''"
+          size="sm"
+          @update:model-value="update(key, $event)"
+        />
+      </UFormField>
+
+      <!-- Integer → Number input with min/max -->
+      <UFormField v-else-if="opt.type === 'integer'" :label="formatLabel(key)">
+        <UInput
+          type="number"
+          :model-value="modelValue[key] ?? opt.default"
+          :min="opt.min"
+          :max="opt.max"
+          size="sm"
+          class="w-32"
+          @update:model-value="update(key, Number($event))"
+        />
+        <template v-if="opt.min != null || opt.max != null" #hint>
+          <span class="text-[10px] text-muted">
+            {{ opt.min != null ? `Min: ${opt.min}` : "" }}
+            {{ opt.min != null && opt.max != null ? " \xB7 " : "" }}
+            {{ opt.max != null ? `Max: ${opt.max}` : "" }}
+          </span>
+        </template>
+      </UFormField>
+
+      <!-- Boolean → Checkbox -->
+      <UFormField v-else-if="opt.type === 'boolean'" :label="formatLabel(key)">
+        <UCheckbox
+          :model-value="modelValue[key] ?? opt.default ?? false"
+          @update:model-value="update(key, $event)"
+        />
+      </UFormField>
+
+      <!-- Array with allowed values → Checkbox group -->
+      <UFormField v-else-if="opt.type === 'array' && opt.allowed_values?.length" :label="formatLabel(key)">
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            v-for="item in opt.allowed_values"
+            :key="String(item)"
+            size="xs"
+            :variant="isArrayItemSelected(key, item) ? 'solid' : 'outline'"
+            :color="isArrayItemSelected(key, item) ? 'primary' : 'neutral'"
+            :label="String(item)"
+            @click="toggleArrayItem(key, item)"
+          />
+        </div>
+      </UFormField>
+
+      <!-- Array without allowed values → Comma input -->
+      <UFormField v-else-if="opt.type === 'array'" :label="formatLabel(key)">
+        <UInput
+          :model-value="Array.isArray(modelValue[key]) ? modelValue[key].join(', ') : (opt.default ?? []).join(', ')"
+          size="sm"
+          placeholder="Comma-separated values"
+          @update:model-value="update(key, $event.split(',').map((s) => s.trim()).filter(Boolean))"
+        />
+      </UFormField>
+    </div>
+
+    <div v-if="!entries.length" class="text-xs text-muted">
+      No configurable options for this step.
+    </div>
+  </div>
+</template>

package/dist/runtime/components/MLProcessing/Forms/StepOptionsForm.vue.d.ts

@@ -0,0 +1,14 @@
+import type { PipelineOptionSchema } from "../../../types/asset.js";
+type __VLS_Props = {
+    schema: Record<string, PipelineOptionSchema>;
+    modelValue: Record<string, any>;
+    /** Keys to exclude from rendering (handled elsewhere, e.g., timestamp in FramePicker) */
+    exclude?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/Pipeline.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    assetId: string;
+    downloadUrl?: string | null;
+    /** Authoritative asset status (`processing` | `awaiting_input` | `ready` | `failed`). When provided, drives the headline status. */
+    assetStatus?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    failed: () => any;
+    complete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFailed?: (() => any) | undefined;
+    onComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/Pipeline.vue

@@ -0,0 +1,178 @@
+<script setup>
+import { computed, watch } from "vue";
+import { useOverlay, useToast } from "#imports";
+import { useMLProcessingPipeline } from "../../composables/useMLProcessingPipeline";
+import ConfigureStepModal from "./Forms/ConfigureStepModal.vue";
+const props = defineProps({
+  assetId: { type: String, required: true },
+  downloadUrl: { type: [String, null], required: false },
+  assetStatus: { type: [String, null], required: false }
+});
+const emit = defineEmits(["complete", "failed"]);
+const overlay = useOverlay();
+const toast = useToast();
+const {
+  tasks,
+  loading,
+  stream,
+  taskEventMap,
+  pipelineStatus,
+  pipelineElapsed,
+  completedCount,
+  totalSteps,
+  hasFailedSteps,
+  progressPercent,
+  expandedSteps,
+  pipelineSchema,
+  toggleStep,
+  configureTask,
+  triggerProcessing,
+  retryTask,
+  getBlocker,
+  groupedTasks,
+  firstPendingInputTask
+} = useMLProcessingPipeline(() => props.assetId, () => props.assetStatus);
+function humanize(name) {
+  return name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+const pendingInputStepName = computed(
+  () => firstPendingInputTask.value ? humanize(firstPendingInputTask.value.task_type) : ""
+);
+async function onRetry(taskId) {
+  try {
+    await retryTask(taskId);
+  } catch (err) {
+    const message = err?.data?.detail ?? err?.data?.message ?? err?.statusMessage ?? "Could not retry task";
+    toast.add({ title: "Retry failed", description: String(message), color: "error" });
+  }
+}
+async function openConfigure(taskId) {
+  const task = tasks.value.find((t) => t.id === taskId);
+  if (!task) return;
+  const schema = pipelineSchema.value[task.task_type] ?? {};
+  const modal = overlay.create(ConfigureStepModal, {
+    props: {
+      taskType: task.task_type,
+      schema,
+      downloadUrl: props.downloadUrl
+    }
+  });
+  const result = await modal.open();
+  if (result) {
+    await configureTask(taskId, result);
+  }
+}
+watch(pipelineStatus, (status) => {
+  if (status === "succeeded") emit("complete");
+  if (status === "failed") emit("failed");
+});
+</script>
+
+<template>
+  <div class="space-y-0">
+    <MLProcessingTopBar title="Processing Pipeline" :status="pipelineStatus">
+      <template #subtitle>
+        {{ completedCount }} of {{ totalSteps }} steps completed
+        <template v-if="pipelineElapsed"> · {{ pipelineElapsed }}</template>
+        <template v-if="pipelineStatus === 'awaiting_input'"> · Awaiting configuration</template>
+      </template>
+      <template #actions>
+        <UButton
+          variant="outline"
+          :color="hasFailedSteps ? 'warning' : 'neutral'"
+          size="xs"
+          :icon="hasFailedSteps ? 'i-lucide-refresh-cw' : 'i-lucide-play'"
+          label="Reprocess"
+          @click="triggerProcessing()"
+        />
+      </template>
+    </MLProcessingTopBar>
+
+    <MLProcessingProgressBar
+      v-if="pipelineStatus === 'running'"
+      :percent="progressPercent"
+    />
+
+    <!-- AWAITING_INPUT banner: pipeline is paused on a configurable step -->
+    <UAlert
+      v-if="pipelineStatus === 'awaiting_input' && firstPendingInputTask"
+      icon="i-lucide-pencil-line"
+      color="warning"
+      variant="subtle"
+      :title="`Pipeline paused \u2014 configure ${pendingInputStepName} to continue`"
+      description="The pipeline will resume automatically once options are provided."
+      class="rounded-none border-x border-default"
+    >
+      <template #actions>
+        <UButton
+          size="xs"
+          color="warning"
+          icon="i-lucide-settings"
+          label="Configure"
+          @click="openConfigure(firstPendingInputTask.id)"
+        />
+      </template>
+    </UAlert>
+
+    <!-- Timeline Body -->
+    <div class="border border-t-0 border-default rounded-b-lg">
+      <!-- Loading -->
+      <div v-if="loading && !tasks.length" class="space-y-3 p-4">
+        <USkeleton v-for="i in 4" :key="i" class="h-10 w-full" />
+      </div>
+
+      <!-- Task Timeline -->
+      <template v-else-if="tasks.length">
+        <!-- Asset pipeline -->
+        <div v-if="groupedTasks.assetTasks.length">
+          <MLProcessingPipelineStepItem
+            v-for="task in groupedTasks.assetTasks"
+            :key="task.id"
+            :task="task"
+            :expanded="expandedSteps.has(task.id)"
+            :sse-event="taskEventMap.get(task.id) ?? null"
+            :blocker="getBlocker(task.id)"
+            @toggle="toggleStep(task.id)"
+            @retry="onRetry"
+            @configure="openConfigure"
+          />
+        </div>
+
+        <!-- Per-rendition pipelines -->
+        <div
+          v-for="group in groupedTasks.renditionGroups"
+          :key="group.renditionId"
+          class="border-t border-default"
+        >
+          <div class="flex items-center gap-2 px-4 py-2 bg-muted/20 text-xs text-muted">
+            <UIcon name="i-lucide-layers" class="size-3.5" />
+            <span class="font-medium">Rendition</span>
+            <span class="font-mono">{{ group.renditionId.slice(0, 8) }}</span>
+          </div>
+          <MLProcessingPipelineStepItem
+            v-for="task in group.tasks"
+            :key="task.id"
+            :task="task"
+            :expanded="expandedSteps.has(task.id)"
+            :sse-event="taskEventMap.get(task.id) ?? null"
+            :blocker="getBlocker(task.id)"
+            @toggle="toggleStep(task.id)"
+            @retry="onRetry"
+            @configure="openConfigure"
+          />
+        </div>
+      </template>
+
+      <!-- Empty -->
+      <UEmpty
+        v-else
+        icon="i-lucide-cpu"
+        title="No processing tasks"
+        description="Processing tasks will appear here when the asset is being processed."
+        size="sm"
+        class="py-8"
+      />
+    </div>
+
+  </div>
+</template>

package/dist/runtime/components/MLProcessing/Pipeline.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    assetId: string;
+    downloadUrl?: string | null;
+    /** Authoritative asset status (`processing` | `awaiting_input` | `ready` | `failed`). When provided, drives the headline status. */
+    assetStatus?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    failed: () => any;
+    complete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFailed?: (() => any) | undefined;
+    onComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/PipelineStepItem.d.vue.ts

@@ -0,0 +1,20 @@
+import type { ProcessingTask } from "../../types/asset.js";
+import type { ProcessingEvent } from "../../composables/useMLProcessingStatus.js";
+type __VLS_Props = {
+    task: ProcessingTask;
+    expanded: boolean;
+    sseEvent?: ProcessingEvent | null;
+    /** Upstream task currently blocking this row (only meaningful for `waiting` rows). */
+    blocker?: ProcessingTask | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+    retry: (taskId: string) => any;
+    configure: (taskId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+    onRetry?: ((taskId: string) => any) | undefined;
+    onConfigure?: ((taskId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;