Fix screenshot streaming and E2E verification

Author: nirukk52

.claude-skills/e2e-testing_skill/SKILL.md

@@ -38,6 +38,7 @@ bun run test:e2e:ui
 - Total Playwright test time per spec ≤ 60 seconds (budget defined in references)
 - Failures include screenshot + console output attachments
 - Regressions traced back to backend/frontend root cause with notes in Graphiti
+- Run-flow assertions confirm both timeline events and visible screenshot gallery output
 
 ## Reference Library
 - `references/automated-tests.md` – Quick start commands, configuration, timeout policy, and pre-push integration

backend/artifacts/dto.ts

@@ -41,3 +41,13 @@ export interface GetArtifactMetaResponse {
   contentHashSha256: string | null;
   createdAt: string;
 }
+
+/**
+ * GetArtifactContentResponse includes inline artifact data for rendering in clients.
+ * PURPOSE: Provide encoded screenshot content to frontend consumers without exposing buckets directly.
+ */
+export interface GetArtifactContentResponse {
+  refId: string;
+  mimeType: string;
+  dataUrl: string;
+}

backend/artifacts/get-content.ts

@@ -0,0 +1,43 @@
+import { APIError, type Query, api } from "encore.dev/api";
+import log from "encore.dev/log";
+import { artifactsBucket } from "./bucket";
+import type { GetArtifactContentResponse } from "./dto";
+
+/**
+ * getArtifactContent returns inline screenshot data for a given artifact refId.
+ * PURPOSE: Enable frontend clients to render screenshots without direct bucket access.
+ */
+export const getArtifactContent = api<{ refId?: Query<string> }, GetArtifactContentResponse>(
+  { expose: true, method: "GET", path: "/artifacts/content" },
+  async ({ refId }) => {
+    const logger = log.with({ module: "artifacts", actor: "getContent", refId });
+
+    if (!refId) {
+      logger.warn("Missing refId query parameter");
+      throw APIError.invalidArgument("refId_required");
+    }
+
+    try {
+      const buffer = await artifactsBucket.download(refId);
+      const mimeType = inferMimeType(refId);
+      const dataUrl = `data:${mimeType};base64,${buffer.toString("base64")}`;
+
+      return { refId, mimeType, dataUrl };
+    } catch (error) {
+      logger.error("Failed to download artifact content", { err: error });
+      throw APIError.notFound("artifact_content_unavailable");
+    }
+  },
+);
+
+/**
+ * inferMimeType derives the MIME type from the artifact reference.
+ * PURPOSE: Ensure returned data URLs render correctly in browsers.
+ */
+function inferMimeType(refId: string): "image/png" | "image/jpeg" {
+  if (refId.endsWith(".jpg") || refId.endsWith(".jpeg")) {
+    return "image/jpeg";
+  }
+  return "image/png";
+}
+

frontend/src/lib/api.ts

@@ -15,7 +15,7 @@ export async function startRun(params: run.StartRunRequest): Promise<run.StartRu
  */
 export async function streamRunEvents(
   runId: string,
-  onEvent: (event: run.RunEventMessage) => void,
+  onEvent: (event: run.RunEventMessage) => void | Promise<void>,
 ) {
   const client = await getEncoreClient();
   const stream = await client.run.stream(runId, { lastEventSeq: 0 });
@@ -27,7 +27,7 @@ export async function streamRunEvents(
         if (!active) {
           return;
         }
-        onEvent(event);
+        await onEvent(event);
       }
     } catch (error) {
       console.error("Run stream error:", error);
@@ -53,7 +53,7 @@ export async function streamRunEvents(
  */
 export async function streamGraphEvents(
   runId: string,
-  onEvent: (event: graph.GraphStreamEvent) => void,
+  onEvent: (event: graph.GraphStreamEvent) => void | Promise<void>,
 ) {
   const client = await getEncoreClient();
 
@@ -100,7 +100,7 @@ export async function streamGraphEvents(
             return;
           }
           console.log("[Graph Stream] Received event from stream:", event);
-          onEvent(event);
+          await onEvent(event);
         }
         console.log("[Graph Stream] Stream ended (no more events)");
       } catch (error) {
@@ -134,3 +134,19 @@ export async function cancelRun(runId: string): Promise<run.CancelRunResponse> {
   const client = await getEncoreClient();
   return client.run.cancel(runId);
 }
+
+/**
+ * fetchArtifactDataUrl downloads artifact content and returns a browser-friendly data URL.
+ * PURPOSE: Provide frontend rendering support for screenshots stored in object storage.
+ */
+export async function fetchArtifactDataUrl(refId: string): Promise<string | null> {
+  const client = await getEncoreClient();
+
+  try {
+    const response = await client.artifacts.getArtifactContent({ refId });
+    return response.dataUrl ?? null;
+  } catch (error) {
+    console.error("Failed to fetch artifact data URL", { error, refId });
+    return null;
+  }
+}

frontend/src/lib/encore-client.ts

@@ -1,4 +1,4 @@
-// Code generated by the Encore v1.50.6 client generator. DO NOT EDIT.
+// Code generated by the Encore v1.51.6 client generator. DO NOT EDIT.
 
 // Disable eslint, jshint, and jslint for this file.
 /* eslint-disable */
@@ -33,6 +33,7 @@ const BROWSER = typeof globalThis === "object" && ("window" in globalThis);
  */
 export default class Client {
     public readonly appinfo: appinfo.ServiceClient
+    public readonly artifacts: artifacts.ServiceClient
     public readonly graph: graph.ServiceClient
     public readonly run: run.ServiceClient
     public readonly steering: steering.ServiceClient
@@ -51,6 +52,7 @@ export default class Client {
         this.options = options ?? {}
         const base = new BaseClient(this.target, this.options)
         this.appinfo = new appinfo.ServiceClient(base)
+        this.artifacts = new artifacts.ServiceClient(base)
         this.graph = new graph.ServiceClient(base)
         this.run = new run.ServiceClient(base)
         this.steering = new steering.ServiceClient(base)
@@ -182,6 +184,44 @@ export namespace appinfo {
     }
 }
 
+export namespace artifacts {
+    export interface GetArtifactContentResponse {
+        refId: string
+        mimeType: string
+        dataUrl: string
+    }
+
+    export class ServiceClient {
+        private baseClient: BaseClient
+
+        constructor(baseClient: BaseClient) {
+            this.baseClient = baseClient
+            this.getArtifactContent = this.getArtifactContent.bind(this)
+        }
+
+        /**
+         * getArtifactContent returns inline screenshot data for a given artifact refId.
+         * PURPOSE: Enable frontend clients to render screenshots without direct bucket access.
+         */
+        public async getArtifactContent(params: {
+    /**
+     * getArtifactContent returns inline screenshot data for a given artifact refId.
+     * PURPOSE: Enable frontend clients to render screenshots without direct bucket access.
+     */
+    refId?: string
+}): Promise<GetArtifactContentResponse> {
+            // Convert our params into the objects we need for the request
+            const query = makeRecord<string, string | string[]>({
+                refId: params.refId,
+            })
+
+            // Now make the actual call to the API
+            const resp = await this.baseClient.callTypedAPI("GET", `/artifacts/content`, undefined, {query})
+            return await resp.json() as GetArtifactContentResponse
+        }
+    }
+}
+
 export namespace graph {
     export interface GetScreensResponse {
         screens: {
@@ -653,7 +693,7 @@ class BaseClient {
         // Add User-Agent header if the script is running in the server
         // because browsers do not allow setting User-Agent headers to requests
         if (!BROWSER) {
-            this.headers["User-Agent"] = "screengraph-ovzi-Generated-TS-Client (Encore/v1.50.6)";
+            this.headers["User-Agent"] = "screengraph-ovzi-Generated-TS-Client (Encore/v1.51.6)";
         }
 
         this.requestInit = options.requestInit ?? {};