From 7c2a185a29d355f418b70bdfbcd337d59015bdce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D9=8A?= <ajay.calsoft@gmail.com>
Date: Mon, 20 Apr 2026 08:21:59 +0530
Subject: [PATCH] Align podcast chart preview route and preview URL handling

---
 .../ScriptEditor/ScriptEditorContext.tsx           | 14 +++++++++++---
 frontend/src/services/podcastApi.ts                |  6 ++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorContext.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorContext.tsx
index 8acc0e3b..da1df743 100644
--- a/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorContext.tsx
+++ b/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorContext.tsx
@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from "react";
 import { Script, Knobs, Scene, PodcastMode } from "../types";
 import { podcastApi } from "../../../services/podcastApi";
+import { getApiUrl } from "../../../api/client";
 
 interface ScriptEditorContextType {
   // State
@@ -58,6 +59,13 @@ interface ScriptEditorContextType {
 
 const ScriptEditorContext = createContext<ScriptEditorContextType | undefined>(undefined);
 
+const toUsablePreviewUrl = (previewUrl?: string): string | undefined => {
+  if (!previewUrl) return undefined;
+  if (/^https?:\/\//i.test(previewUrl)) return previewUrl;
+  const cleanPath = previewUrl.startsWith("/") ? previewUrl : `/${previewUrl}`;
+  return `${getApiUrl()}${cleanPath}`;
+};
+
 interface ScriptEditorProviderProps {
   children: ReactNode;
   projectId: string;
@@ -413,7 +421,7 @@ export const ScriptEditorProvider: React.FC<ScriptEditorProviderProps> = ({
             
             return {
               ...scene,
-              broll_preview_url: result.preview_url,
+              broll_preview_url: toUsablePreviewUrl(result.preview_url),
               chart_id: result.chart_id,
             };
           } catch (err) {
@@ -451,7 +459,7 @@ export const ScriptEditorProvider: React.FC<ScriptEditorProviderProps> = ({
       
       const updatedScenes = activeScript.scenes.map((s) =>
         s.id === sceneId
-          ? { ...s, broll_preview_url: result.preview_url, chart_id: result.chart_id }
+          ? { ...s, broll_preview_url: toUsablePreviewUrl(result.preview_url), chart_id: result.chart_id }
           : s
       );
       
@@ -547,4 +555,4 @@ export const useScriptEditor = (): ScriptEditorContextType => {
     throw new Error("useScriptEditor must be used within ScriptEditorProvider");
   }
   return context;
-};
\ No newline at end of file
+};
diff --git a/frontend/src/services/podcastApi.ts b/frontend/src/services/podcastApi.ts
index 5e831b99..c0436a62 100644
--- a/frontend/src/services/podcastApi.ts
+++ b/frontend/src/services/podcastApi.ts
@@ -967,8 +967,10 @@ export const podcastApi = {
     chart_data: Record<string, any>;
     chart_type: string;
     title: string;
-  }): Promise<{ image_url: string; preview_url: string; chart_id: string }> {
-    const response = await aiApiClient.post('/api/podcast/chart/preview', params);
+  }): Promise<{ preview_url: string; chart_id: string }> {
+    // Canonical backend endpoint from api/podcast/handlers/broll.py after router prefix composition:
+    // /api/podcast (main router) + /broll (handler prefix) + /preview/chart (endpoint)
+    const response = await aiApiClient.post('/api/podcast/broll/preview/chart', params);
     return response.data;
   },
 };