add live progress reporting across dream and playlist views

public/locales/en/translation.json

@@ -724,6 +724,20 @@
       "open_dream": "Open dream",
       "open_playlist": "Open playlist",
       "open_keyframe": "Open keyframe"
+    },
+    "dream_progress": {
+      "queued": "Queued",
+      "rendering": "Rendering",
+      "ingesting": "Ingesting",
+      "eta": "ETA {{time}}",
+      "playlist": "Playlist progress",
+      "completed_count": "{{completed}} of {{total}} completed",
+      "remaining_one": "{{count}} remaining",
+      "remaining_other": "{{count}} remaining",
+      "count_in_progress": "{{count}} in progress",
+      "count_queued": "{{count}} queued",
+      "count_failed": "{{count}} failed",
+      "count_idle": "{{count}} not started"
     }
   },
   "units": {

src/api/dream/query/useDream.ts

@@ -19,33 +19,24 @@ type DreamResponse = {
   dream?: Dream;
 };
 
-export const getDream = async (
-  uuid: string,
-  signal?: AbortSignal,
-): Promise<Dream | undefined> => {
+export const getDreamResponse = async (uuid: string, signal?: AbortSignal) => {
   const res = await axiosClient.get<ApiResponse<{ dream: Dream }>>(
     `/v1/dream/${uuid}`,
     { headers: getRequestHeaders({ contentType: ContentType.json }), signal },
   );
-  return res.data?.data?.dream;
+  return res.data;
 };
 
+export const getDream = async (uuid: string, signal?: AbortSignal) =>
+  (await getDreamResponse(uuid, signal)).data?.dream;
+
 export const fetchDream = async (uuid?: string) => {
-  const data = await queryClient.fetchQuery<ApiResponse<{ dream: Dream }>>({
+  if (!uuid) return;
+  const response = await queryClient.fetchQuery({
     queryKey: [DREAM_QUERY_KEY, uuid],
-    queryFn: () =>
-      axiosClient
-        .get(`/v1/dream/${uuid ?? ""}`, {
-          headers: getRequestHeaders({
-            contentType: ContentType.json,
-          }),
-        })
-        .then((res) => {
-          return res.data;
-        }),
+    queryFn: ({ signal }) => getDreamResponse(uuid, signal),
   });
-
-  return data?.data?.dream;
+  return response.data?.dream;
 };
 
 export const useDream = (uuid?: string, options?: HookOptions) => {

src/api/playlist/query/usePlaylist.ts

@@ -1,3 +1,4 @@
+import useAuth from "@/hooks/useAuth";
 import { ContentType, getRequestHeaders } from "@/constants/auth.constants";
 import { Playlist } from "@/types/playlist.types";
 import useApiQuery from "@/api/shared/useApiQuery";
@@ -37,6 +38,7 @@ export const fetchPlaylist = async (uuid?: string) => {
  * fetch — without it a missing uuid requests `/v1/playlist/`.
  */
 export const usePlaylist = (uuid?: string, enabled = true) => {
+  const { user } = useAuth();
   return useApiQuery<PlaylistResponse>(
     [PLAYLIST_QUERY_KEY, uuid],
     `/v1/playlist/${uuid ?? ""}`,
@@ -46,6 +48,11 @@ export const usePlaylist = (uuid?: string, enabled = true) => {
       }),
     },
     {},
-    enabled ? {} : { enabled: false },
+    {
+      enabled: enabled && Boolean(uuid) && Boolean(user),
+      refetchInterval: (data) =>
+        data?.data?.playlist?.progress?.remaining ? 5000 : false,
+      refetchOnWindowFocus: true,
+    },
   );
 };

src/components/pages/studio/components/add-from-playlist-modal.tsx

@@ -1,3 +1,4 @@
+import { DreamProgressOverlay } from "@/components/shared/dream-progress/dream-progress";
 import React, { useState, useMemo, useCallback } from "react";
 import { useStudioStore } from "@/stores/studio.store";
 import type { StudioImage } from "@/types/studio.types";
@@ -145,6 +146,7 @@ export const AddFromPlaylistModal: React.FC<Props> = ({ onClose }) => {
                           dream.processedMediaHeight,
                         )}
                       />
+                      <DreamProgressOverlay dream={dream} />
                     </ImageSelectCard>
                   );
                 })}

src/components/pages/studio/components/add-reference-frames-from-playlist-modal.tsx

@@ -1,3 +1,4 @@
+import { DreamProgressOverlay } from "@/components/shared/dream-progress/dream-progress";
 import React, { useCallback, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useFlowStore } from "@/stores/flow.store";
@@ -123,6 +124,7 @@ export const AddReferenceFramesFromPlaylistModal: React.FC<Props> = ({
                           dream.processedMediaHeight,
                         )}
                       />
+                      <DreamProgressOverlay dream={dream} />
                     </ImageSelectCard>
                   );
                 })}

src/components/pages/studio/components/images-tab.tsx

@@ -1,3 +1,4 @@
+import { DreamProgressOverlay } from "@/components/shared/dream-progress/dream-progress";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useStudioStore } from "@/stores/studio.store";
@@ -170,13 +171,10 @@ export const ImagesTab: React.FC = () => {
                   </ThumbnailButton>
                 ) : img.status === "processing" && img.url ? (
                   <ImageThumbnail $pending src={img.url} alt={img.name} />
-                ) : (
-                  <ImageStatus>
-                    {img.status === "queue" && "Queued..."}
-                    {img.status === "processing" && `${img.progress ?? 0}%`}
-                    {img.status === "failed" && "Failed"}
-                  </ImageStatus>
-                )}
+                ) : img.status === "failed" ? (
+                  <ImageStatus>Failed</ImageStatus>
+                ) : null}
+                <DreamProgressOverlay dream={img} />
                 {img.seed != null && <SeedLabel>#{img.seed}</SeedLabel>}
                 <DeleteButton
                   aria-label={`Remove ${img.name}`}

src/components/pages/studio/components/reference-frame-card.styled.tsx

@@ -1,5 +1,9 @@
 import styled, { css, keyframes } from "styled-components";
 import { FLOW } from "@/constants/flow-theme.constants";
+import {
+  ProgressContent,
+  ProgressEta,
+} from "@/components/shared/dream-progress/dream-progress.styled";
 
 const errorBreathe = keyframes`
   0%, 100% { box-shadow: 0 0 0 0 ${FLOW.errorDim}; }
@@ -169,6 +173,20 @@ export const CardPlaceholder = styled.div`
   color: ${FLOW.textMuted};
 `;
 
+export const GenerationPlaceholder = styled(CardPlaceholder)`
+  box-sizing: border-box;
+  padding: 10px 10px 28px;
+
+  ${ProgressContent} {
+    gap: 5px;
+    font-size: 11px;
+  }
+
+  ${ProgressEta} {
+    font-size: 10px;
+  }
+`;
+
 export const CardLabel = styled.div`
   position: absolute;
   bottom: 6px;

src/components/pages/studio/components/reference-frame-card.tsx

@@ -1,3 +1,4 @@
+import { DreamCardProgress } from "@/components/shared/dream-progress/dream-progress";
 import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -10,6 +11,7 @@ import {
   CardWrapper,
   CardImage,
   CardPlaceholder,
+  GenerationPlaceholder,
   CardLabel,
   LoopBadge,
   DeleteButton,
@@ -34,6 +36,7 @@ export const ReferenceFrameCard: React.FC<Props> = ({
 }) => {
   const isLoop = frame.isLoopFrame ?? false;
   const isUploading = frame.uploadStatus === "uploading";
+  const isGenerating = isUploading && !!frame.dreamUuid && !frame.imageUrl;
   const isFailed = frame.uploadStatus === "failed";
   const isBusy = isUploading || isFailed;
 
@@ -97,7 +100,13 @@ export const ReferenceFrameCard: React.FC<Props> = ({
       $ratio={aspectRatioOf(frame)}
       {...(isLoop || isBusy ? {} : { ...attributes, ...listeners })}
     >
-      {imgSrc ? (
+      {isGenerating && frame.dreamUuid ? (
+        <GenerationPlaceholder title={frame.name}>
+          <DreamCardProgress
+            dream={{ uuid: frame.dreamUuid, status: "queue" }}
+          />
+        </GenerationPlaceholder>
+      ) : imgSrc ? (
         <CardImage
           src={imgSrc}
           alt={frame.name}
@@ -111,7 +120,7 @@ export const ReferenceFrameCard: React.FC<Props> = ({
         <CardPlaceholder>{frame.name}</CardPlaceholder>
       )}
 
-      {isUploading && (
+      {isUploading && !isGenerating && (
         <UploadOverlay
           role="progressbar"
           aria-label={`Uploading ${frame.name}`}

src/components/pages/studio/components/results-tab.tsx

@@ -1,3 +1,4 @@
+import { DreamCardProgress } from "@/components/shared/dream-progress/dream-progress";
 import React, { useCallback, useMemo, useState } from "react";
 import { useStudioStore } from "@/stores/studio.store";
 import { useCreateDreamFromPrompt } from "@/api/dream/mutation/useCreateDreamFromPrompt";
@@ -376,9 +377,12 @@ export const ResultsTab: React.FC = () => {
                             }
                           >
                             {job.status === "processed" && "done"}
-                            {job.status === "processing" &&
-                              `${job.progress ?? 0}%`}
-                            {job.status === "queue" && "queued"}
+                            <DreamCardProgress
+                              dream={{
+                                uuid: job.dreamUuid,
+                                status: job.status,
+                              }}
+                            />
                             {job.status === "failed" && "failed"}
                           </ResultCellStatus>
                         </ResultCell>

src/components/pages/studio/components/select-image-dream-card.tsx

@@ -1,3 +1,4 @@
+import { DreamProgressOverlay } from "@/components/shared/dream-progress/dream-progress";
 import React, { memo } from "react";
 import { Dream } from "@/types/dream.types";
 import { mediaAspectRatio } from "../utils/media-aspect-ratio";
@@ -50,6 +51,7 @@ const SelectImageDreamCardComponent: React.FC<Props> = ({
       )}
       {isSelected && <CardCheckmark aria-hidden="true">✓</CardCheckmark>}
       <CardName aria-hidden="true">{dream.name}</CardName>
+      <DreamProgressOverlay dream={dream} />
     </Card>
   );
 };

src/components/pages/studio/components/transition-gap.styled.tsx

@@ -1,5 +1,10 @@
 import styled, { css, keyframes } from "styled-components";
 import { FLOW } from "@/constants/flow-theme.constants";
+import {
+  ProgressContent,
+  ProgressLabel,
+  ProgressEta,
+} from "@/components/shared/dream-progress/dream-progress.styled";
 
 const pulseDot = keyframes`
   0%, 100% { opacity: 1; transform: scale(1); }
@@ -39,6 +44,23 @@ export const GapContainer = styled.div<{ $expanded: boolean }>`
   gap: 14px;
   cursor: pointer;
   transition: width 0.3s ease;
+
+  ${ProgressContent} {
+    width: 56px;
+    gap: 6px;
+    font-size: 10px;
+    text-align: center;
+  }
+
+  ${ProgressLabel} {
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+  }
+
+  ${ProgressEta} {
+    font-size: 9px;
+  }
 `;
 
 export type GapLineVariant = "idle" | "configured" | "failed" | "mismatched";
@@ -125,21 +147,6 @@ export const StatusNode = styled.div<{ $variant: string }>`
     `}
 `;
 
-export const ProgressRing = styled.div<{ $percent: number }>`
-  position: absolute;
-  inset: -4px;
-  border-radius: 50%;
-  background: conic-gradient(
-    ${FLOW.processing} ${(p) => p.$percent}%,
-    transparent ${(p) => p.$percent}%
-  );
-  mask: radial-gradient(circle, transparent 60%, #000 61%) center / 100% 100%
-    no-repeat;
-  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%) center / 100%
-    100% no-repeat;
-  pointer-events: none;
-`;
-
 export const GapStatusLabel = styled.span<{ $status: string }>`
   font-size: 9px;
   font-family: ${FLOW.fontFamily};

src/components/pages/studio/components/transition-gap.tsx

@@ -1,11 +1,11 @@
+import { DreamCardProgress } from "@/components/shared/dream-progress/dream-progress";
 import type { KeyboardEvent } from "react";
 import { Check, Loader2, AlertTriangle, RotateCcw } from "lucide-react";
 import type { FlowTransition } from "@/types/flow.types";
 import {
   GapContainer,
   GapLine,
   StatusNode,
-  ProgressRing,
   GapStatusLabel,
   DurationLabel,
 } from "./transition-gap.styled";
@@ -36,7 +36,7 @@ export function TransitionGapEnhanced({
   mismatch,
   onClick,
 }: TransitionGapProps) {
-  const { status, progress } = transition;
+  const { status } = transition;
   const configured = hasOverrides(transition);
 
   const activate = {
@@ -91,34 +91,24 @@ export function TransitionGapEnhanced({
     );
   }
 
-  // Queued — soft pulsing dot.
-  if (status === "queue") {
+  if (status === "queue" || status === "processing") {
+    const fallbackLabel = status === "queue" ? "queued" : "rendering";
     return (
-      <GapContainer $expanded {...activate} aria-label="Transition queued">
-        <StatusNode $variant="queued" />
-        <GapStatusLabel $status="queued">queued</GapStatusLabel>
-      </GapContainer>
-    );
-  }
-
-  // Processing — spinning loader inside a node, with progress ring.
-  if (status === "processing") {
-    const pct = Math.max(0, Math.min(100, progress ?? 0));
-    return (
-      <GapContainer
-        $expanded
-        {...activate}
-        aria-label={`Transition rendering${
-          pct > 0 ? `, ${Math.round(pct)}%` : ""
-        }`}
-      >
-        <StatusNode $variant="processing">
-          {pct > 0 && <ProgressRing $percent={pct} />}
-          <Loader2 size={14} strokeWidth={2.4} />
-        </StatusNode>
-        <GapStatusLabel $status="processing">
-          {pct > 0 ? `${Math.round(pct)}%` : "rendering"}
-        </GapStatusLabel>
+      <GapContainer $expanded {...activate} aria-label="Transition progress">
+        {transition.dreamUuid ? (
+          <DreamCardProgress dream={{ uuid: transition.dreamUuid, status }} />
+        ) : (
+          <>
+            <StatusNode $variant={status === "queue" ? "queued" : "processing"}>
+              {status === "processing" && (
+                <Loader2 size={14} strokeWidth={2.4} />
+              )}
+            </StatusNode>
+            <GapStatusLabel $status={fallbackLabel}>
+              {fallbackLabel}
+            </GapStatusLabel>
+          </>
+        )}
       </GapContainer>
     );
   }
@@ -135,6 +125,14 @@ export function TransitionGapEnhanced({
           <Check size={14} strokeWidth={3} />
         </StatusNode>
         <DurationLabel>{effectiveDuration}s</DurationLabel>
+        {transition.uprezDreamUuid && transition.uprezStatus && (
+          <DreamCardProgress
+            dream={{
+              uuid: transition.uprezDreamUuid,
+              status: transition.uprezStatus,
+            }}
+          />
+        )}
       </GapContainer>
     );
   }