From fe069946db680efcbd4ab1db2d6888d2326ebced Mon Sep 17 00:00:00 2001
From: Fsocietyhhh <1211904451@qq.com>
Date: Fri, 29 May 2026 13:17:05 -0700
Subject: [PATCH 1/3] Music mode + aspect-ratio picker + date/time prompt +
 image cases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Music as a dedicated generation mode alongside image/video, backed by
MiniMax Music 2.5+ via /v1/audio/generations; output renders in-bubble
as an <audio> player.

Aspect-ratio "比例" flyout in image and video modes. Image options are
the per-model `sizes` whitelist (gateway rejects anything else with 400)
— GPT Image 1/2 get 1:1/3:2/2:3; single-ratio models (Nano Banana, Grok
Imagine) hide the picker. Video options use the `aspect_ratio` param
which is token360-only; Seedance variants get 16:9/9:16/1:1/4:3/3:4,
Sora 2 and Grok Imagine Video hide the picker. Default image model
switched to GPT Image 2 so the picker is meaningful out of the box.
Each row gets a true-to-scale rect glyph so horizontal vs vertical reads
at a glance. send() now takes imageSize / videoRatio as useCallback
deps — the closure was capturing the initial size and ignoring user
selections.

Inject today's date + local time + IANA timezone into the system prompt
on every chat turn (via systemPromptDateLine). Without this, models
default to their training cutoff and write reports dated to it.

Homepage cases split: image-mode cases (5 new + headshots) now show
only after the user enters image mode, with a prefillOnly flag for
cases that need the user's own upload (selfie, screenshot, pet photo).

Misc: zh "Base 链" → "Base"; pre-existing eslint-disable directive on
the mobile sidebar useEffect moved to the actual setState call.
---
 src/app/globals.css                 |  58 +++++++++
 src/components/try/FranklinChat.tsx | 190 +++++++++++++++++++++++-----
 src/hooks/use-franklin-chat.ts      | 170 +++++++++++++++++++++----
 src/lib/franklin-system-prompt.ts   |  28 ++++
 src/lib/try-i18n.tsx                |  68 +++++++++-
 5 files changed, 457 insertions(+), 57 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 87bab1f..952307e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4194,6 +4194,57 @@ h2.dark-h,
 }
 .try-mode-pill-x:hover:not(:disabled) { background: rgba(201, 162, 39, 0.18); }
 .try-mode-pill-x:disabled { opacity: 0.5; cursor: not-allowed; }
+/* Aspect-ratio picker (image mode). Mirrors the sidebar More-menu flyout so
+ * the chip-and-popup language stays consistent across the app. */
+.try-ratio { position: relative; display: inline-flex; }
+.try-ratio-btn { gap: 4px; padding: 6px 9px; }
+.try-ratio-btn .try-ratio-chev { color: var(--fg-subtle); transition: transform 0.15s; }
+.try-ratio-btn.is-active .try-ratio-chev { transform: rotate(180deg); }
+.try-ratio-scrim { position: fixed; inset: 0; z-index: 55; background: transparent; }
+.try-ratio-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  z-index: 56;
+  min-width: 160px;
+  padding: 6px;
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  box-shadow: 0 14px 36px rgba(20, 16, 10, 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.try-ratio-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  background: none;
+  border-radius: 9px;
+  cursor: pointer;
+  color: var(--fg-muted);
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  transition: background 0.12s, color 0.12s;
+  font-variant-numeric: tabular-nums;
+}
+.try-ratio-item:hover { background: var(--bg-alt); color: var(--fg); }
+.try-ratio-item.is-active { background: var(--gold-soft); color: var(--gold-dim); }
+.try-ratio-glyph { color: var(--fg-subtle); flex: 0 0 auto; }
+.try-ratio-btn .try-ratio-glyph { color: currentColor; }
+.try-ratio-item .try-ratio-item-glyph { color: var(--fg-subtle); flex: 0 0 auto; }
+.try-ratio-item:hover .try-ratio-item-glyph,
+.try-ratio-item.is-active .try-ratio-item-glyph { color: currentColor; }
+.try-ratio-item-check { margin-left: auto; opacity: 0; color: var(--gold-dim); }
+.try-ratio-item.is-active .try-ratio-item-check { opacity: 1; }
+:root[data-theme="light"] .try-ratio-item.is-active .try-ratio-item-check,
+:root[data-theme="dark"] .try-ratio-item.is-active .try-ratio-item-check { color: var(--gold-dim); }
 .try-input::placeholder { color: var(--fg-subtle); }
 .try-send {
   display: inline-flex;
@@ -5435,6 +5486,13 @@ h2.dark-h,
   border: 1px solid var(--border);
   background: #000;
 }
+.try-msg-media.try-msg-audio { width: 460px; max-width: 100%; }
+.try-msg-audio audio {
+  width: 100%;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
 /* Attached input image (reference / seed) — small thumbnail, Gemini-style */
 .try-msg-attach {
   display: inline-flex;
diff --git a/src/components/try/FranklinChat.tsx b/src/components/try/FranklinChat.tsx
index 40cefa6..65d2a8b 100644
--- a/src/components/try/FranklinChat.tsx
+++ b/src/components/try/FranklinChat.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { ArrowUp, PanelLeft, ImageIcon, Clapperboard, X, Plus, Check, BarChart3, TrendingUp } from "lucide-react";
+import { ArrowUp, PanelLeft, ImageIcon, Clapperboard, X, Plus, Check, BarChart3, TrendingUp, Music, ChevronDown } from "lucide-react";
 import { ModelSelect } from "./ModelSelect";
 import { HistorySidebar, type TryView } from "./HistorySidebar";
 import { MessageContent } from "./MessageContent";
@@ -24,6 +24,33 @@ import { prepareImageForUpload } from "@/lib/image-compress";
 type ToolFocus = "search_prediction_markets" | "web_search" | "get_market_price";
 const TOOL_FOCUS_MODEL = "google/gemini-2.5-flash";
 
+// Tiny SVG that draws the actual aspect-ratio rectangle (16x16 box, scaled
+// to fit). Beats picking a single lucide icon — users can see horizontal vs
+// vertical at a glance, which is the whole reason for the picker.
+function RatioGlyph({ ratio, className }: { ratio: string; className?: string }) {
+  const [w, h] = ratio.split(":").map(Number);
+  if (!w || !h) return null;
+  const box = 16;
+  const pad = 1;
+  const max = Math.max(w, h);
+  const W = (w / max) * (box - pad * 2);
+  const H = (h / max) * (box - pad * 2);
+  return (
+    <svg width={box} height={box} viewBox={`0 0 ${box} ${box}`} className={className} aria-hidden>
+      <rect
+        x={(box - W) / 2}
+        y={(box - H) / 2}
+        width={W}
+        height={H}
+        rx={1.2}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.4}
+      />
+    </svg>
+  );
+}
+
 // Renders an empty-state title with the word "Franklin" gold-emphasized.
 function EmphTitle({ text }: { text: string }) {
   const parts = text.split("Franklin");
@@ -42,7 +69,7 @@ export function FranklinChat() {
   const history = useChatHistory(auth.address);
   const { usage, recordSpend } = useUsageStats();
   const chat = useFranklinChat(history.messages, history.setMessages, history.ensureConvId, recordSpend);
-  const { mode, setMode, model, setModel, models, selectedModel, status, activeTool, steps, needsToolWallet, genConvId, mediaJobs, error, isBusy, isConnected, send, stop, stopMedia, regenerate } = chat;
+  const { mode, setMode, model, setModel, models, selectedModel, status, activeTool, steps, needsToolWallet, genConvId, mediaJobs, error, isBusy, isConnected, send, stop, stopMedia, regenerate, imageSize, setImageSize, imageSizes, videoRatio, setVideoRatio, videoRatios } = chat;
   // Only show the live (chat) generation UI in the conversation that started it.
   const genHere = genConvId === null || genConvId === history.activeId;
   // Heavy media (image/video) runs as a per-conversation background job — show
@@ -61,8 +88,8 @@ export function FranklinChat() {
   const closeSidebarOnMobile = () => {
     if (typeof window !== "undefined" && window.innerWidth <= MOBILE_BP) setSidebarOpen(false);
   };
-  // eslint-disable-next-line react-hooks/set-state-in-effect
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (window.innerWidth <= MOBILE_BP) setSidebarOpen(false);
   }, []);
   // Focus mode: a composer toggle that forces a specific live-data tool (and a
@@ -73,6 +100,19 @@ export function FranklinChat() {
     { key: "get_market_price", icon: <TrendingUp className="h-4 w-4" />, label: t.focusPrice, ph: t.phPrice },
   ];
   const activeFocus = FOCUSES.find((f) => f.key === focus);
+  // Aspect-ratio flyout — shown in image mode (per-model `sizes` whitelist)
+  // and video mode (Seedance-only `aspect_ratio` list). Other modes / models
+  // with a single ratio hide the button entirely.
+  const [ratioOpen, setRatioOpen] = useState(false);
+  const ratioOptions: { ratio: string; value: string }[] =
+    mode === "image"
+      ? imageSizes.map((s) => ({ ratio: s.ratio, value: s.size }))
+      : mode === "video"
+        ? videoRatios.map((r) => ({ ratio: r, value: r }))
+        : [];
+  const ratioValue = mode === "image" ? imageSize : mode === "video" ? videoRatio : "";
+  const setRatioValue = mode === "image" ? setImageSize : mode === "video" ? setVideoRatio : () => {};
+  const currentRatio = ratioOptions.find((o) => o.value === ratioValue)?.ratio ?? ratioOptions[0]?.ratio ?? "";
 
   // Skill cards prefill the composer (and optionally pick a tool-capable model).
   const pickSkill = (template: string, model?: string) => {
@@ -134,7 +174,8 @@ export function FranklinChat() {
   // (paid) vision model, so it needs one as well.
   const needsWallet = (mode !== "chat" || !selectedModel?.free || !!attachment) && !isConnected;
   const canSend = (!!input.trim() || !!attachment) && !busy && !needsWallet;
-  const suggestions = mode === "image" ? t.sugImage : mode === "video" ? t.sugVideo : t.sugChat;
+  const suggestions =
+    mode === "image" ? t.sugImage : mode === "video" ? t.sugVideo : mode === "music" ? t.sugMusic : t.sugChat;
 
   // Chat-mode opening cases showcase the three headline capabilities. Clicking
   // switches to the right mode; image/video need a wallet, so if not connected
@@ -142,7 +183,11 @@ export function FranklinChat() {
   // Prediction cases need a tool-capable model (the free default can't call
   // tools), so they force a cheap one — Gemini 2.5 Flash — and need a wallet.
   const TOOL_MODEL = "google/gemini-2.5-flash";
-  const CASES: { mode: "chat" | "image" | "video"; prompt: string; model?: string }[] = [
+  // `prefillOnly` cases need the user's own media (a selfie, a screenshot,
+  // their cat) — clicking switches mode + prefills the composer so the user
+  // can attach their file and send, rather than firing with no input.
+  type Case = { mode: "chat" | "image" | "video"; prompt: string; model?: string; prefillOnly?: boolean };
+  const CHAT_CASES: Case[] = [
     { mode: "chat", prompt: t.casePrediction, model: TOOL_MODEL },
     { mode: "chat", prompt: t.casePrice, model: TOOL_MODEL },
     { mode: "chat", prompt: t.caseSearch, model: TOOL_MODEL },
@@ -153,11 +198,21 @@ export function FranklinChat() {
     { mode: "chat", prompt: t.caseMusic, model: TOOL_MODEL },
     { mode: "chat", prompt: t.caseTech, model: TOOL_MODEL },
   ];
-  const runCase = (c: { mode: "chat" | "image" | "video"; prompt: string; model?: string }) => {
+  // Image-mode cases — shown only after the user clicks the Image button.
+  const IMAGE_CASES: Case[] = [
+    { mode: "image", prompt: t.caseProductPhotos },
+    { mode: "image", prompt: t.caseFranklinSpeaker },
+    { mode: "image", prompt: t.caseStartupVisuals },
+    { mode: "image", prompt: t.caseHeadshots, prefillOnly: true },
+    { mode: "image", prompt: t.caseScreenshotDemo, prefillOnly: true },
+    { mode: "image", prompt: t.caseCatHedgeFund, prefillOnly: true },
+  ];
+  const runCase = (c: Case) => {
     setMode(c.mode);
-    // Tool/image/video cases are paid — if no wallet yet, switch + prefill.
-    if ((c.mode !== "chat" || c.model) && !isConnected) {
-      if (c.model) setModel(c.model);
+    if (c.model) setModel(c.model);
+    // Prefill-only (needs user's media), or paid case without a wallet → just
+    // switch mode + prefill; let the user attach/edit and send themselves.
+    if (c.prefillOnly || ((c.mode !== "chat" || c.model) && !isConnected)) {
       setInput(c.prompt);
       return;
     }
@@ -183,9 +238,11 @@ export function FranklinChat() {
       ? t.phImage
       : mode === "video"
         ? t.phVideo
-        : activeFocus
-          ? activeFocus.ph
-          : t.phMessage;
+        : mode === "music"
+          ? t.phMusic
+          : activeFocus
+            ? activeFocus.ph
+            : t.phMessage;
 
   return (
     <div className="try-shell">
@@ -277,20 +334,26 @@ export function FranklinChat() {
           {messages.length === 0 ? (
             <div className="try-empty">
               <h2 className="try-empty-title">
-                <EmphTitle text={mode === "image" ? t.emptyImage : mode === "video" ? t.emptyVideo : t.emptyChat} />
+                <EmphTitle text={mode === "image" ? t.emptyImage : mode === "video" ? t.emptyVideo : mode === "music" ? t.emptyMusic : t.emptyChat} />
               </h2>
               <div className="try-suggestions">
                 {mode === "chat"
-                  ? CASES.map((c) => (
+                  ? CHAT_CASES.map((c) => (
                       <button key={c.prompt} className="try-suggestion" onClick={() => runCase(c)}>
                         {c.prompt}
                       </button>
                     ))
-                  : suggestions.map((s) => (
-                      <button key={s} className="try-suggestion" onClick={() => send(s)} disabled={needsWallet}>
-                        {s}
-                      </button>
-                    ))}
+                  : mode === "image"
+                    ? IMAGE_CASES.map((c) => (
+                        <button key={c.prompt} className="try-suggestion" onClick={() => runCase(c)}>
+                          {c.prompt}
+                        </button>
+                      ))
+                    : suggestions.map((s) => (
+                        <button key={s} className="try-suggestion" onClick={() => send(s)} disabled={needsWallet}>
+                          {s}
+                        </button>
+                      ))}
               </div>
             </div>
           ) : (
@@ -318,6 +381,13 @@ export function FranklinChat() {
                       {t.downloadMp4}
                     </a>
                   </div>
+                ) : m.kind === "music" && m.music ? (
+                  <div className="try-msg-media try-msg-audio">
+                    <audio src={m.music} controls preload="metadata" />
+                    <a className="try-media-link" href={m.music} target="_blank" rel="noreferrer">
+                      {t.downloadAudio}
+                    </a>
+                  </div>
                 ) : (
                   <>
                     {m.image && (
@@ -358,9 +428,11 @@ export function FranklinChat() {
           {activeMediaJob && (
             <div className="try-msg try-msg-assistant">
               <div className="try-msg-role">Franklin</div>
-              <div className={`try-gen-skeleton${activeMediaJob.kind === "video" ? " is-video" : ""}`}>
+              <div className={`try-gen-skeleton${activeMediaJob.kind === "video" ? " is-video" : ""}${activeMediaJob.kind === "music" ? " is-music" : ""}`}>
                 {activeMediaJob.kind === "video" ? (
                   <Clapperboard className="try-gen-skeleton-icon" />
+                ) : activeMediaJob.kind === "music" ? (
+                  <Music className="try-gen-skeleton-icon" />
                 ) : (
                   <ImageIcon className="try-gen-skeleton-icon" />
                 )}
@@ -430,7 +502,9 @@ export function FranklinChat() {
                 ? t.hintImage
                 : mode === "video"
                   ? t.hintVideo
-                  : t.hintChat(selectedModel?.label ?? "")}
+                  : mode === "music"
+                    ? t.hintMusic
+                    : t.hintChat(selectedModel?.label ?? "")}
             </div>
           )}
 
@@ -487,6 +561,9 @@ export function FranklinChat() {
                     <button className="try-tool" onClick={() => { setFocus(null); setMode("video"); }} disabled={busy}>
                       <Clapperboard className="h-4 w-4" /> {t.video}
                     </button>
+                    <button className="try-tool" onClick={() => { setFocus(null); setMode("music"); }} disabled={busy}>
+                      <Music className="h-4 w-4" /> {t.music}
+                    </button>
                     {FOCUSES.map((f) => (
                       <button
                         key={f.key}
@@ -500,18 +577,65 @@ export function FranklinChat() {
                     ))}
                   </>
                 ) : (
-                  <span className="try-mode-pill">
-                    {mode === "image" ? <ImageIcon className="h-4 w-4" /> : <Clapperboard className="h-4 w-4" />}
-                    {mode === "image" ? t.image : t.video}
-                    <button
-                      className="try-mode-pill-x"
-                      onClick={() => setMode("chat")}
-                      disabled={busy}
-                      aria-label="Back to chat"
-                    >
-                      <X className="h-3.5 w-3.5" />
-                    </button>
-                  </span>
+                  <>
+                    <span className="try-mode-pill">
+                      {mode === "image" ? (
+                        <ImageIcon className="h-4 w-4" />
+                      ) : mode === "video" ? (
+                        <Clapperboard className="h-4 w-4" />
+                      ) : (
+                        <Music className="h-4 w-4" />
+                      )}
+                      {mode === "image" ? t.image : mode === "video" ? t.video : t.music}
+                      <button
+                        className="try-mode-pill-x"
+                        onClick={() => setMode("chat")}
+                        disabled={busy}
+                        aria-label="Back to chat"
+                      >
+                        <X className="h-3.5 w-3.5" />
+                      </button>
+                    </span>
+                    {ratioOptions.length > 1 && (
+                      <div className="try-ratio">
+                        <button
+                          className={`try-tool try-ratio-btn${ratioOpen ? " is-active" : ""}`}
+                          onClick={() => setRatioOpen((o) => !o)}
+                          disabled={busy}
+                          title={t.ratio}
+                          aria-haspopup="listbox"
+                          aria-expanded={ratioOpen}
+                        >
+                          <RatioGlyph ratio={currentRatio} className="try-ratio-glyph" />
+                          {currentRatio}
+                          <ChevronDown className="try-ratio-chev h-3.5 w-3.5" />
+                        </button>
+                        {ratioOpen && (
+                          <>
+                            <div className="try-ratio-scrim" onClick={() => setRatioOpen(false)} />
+                            <div className="try-ratio-menu" role="listbox" aria-label={t.ratio}>
+                              {ratioOptions.map((o) => (
+                                <button
+                                  key={o.value}
+                                  role="option"
+                                  aria-selected={o.value === ratioValue}
+                                  className={`try-ratio-item${o.value === ratioValue ? " is-active" : ""}`}
+                                  onClick={() => {
+                                    setRatioValue(o.value);
+                                    setRatioOpen(false);
+                                  }}
+                                >
+                                  <RatioGlyph ratio={o.ratio} className="try-ratio-item-glyph" />
+                                  {o.ratio}
+                                  <Check className="try-ratio-item-check h-3.5 w-3.5" />
+                                </button>
+                              ))}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </>
                 )}
               </div>
               {busy ? (
diff --git a/src/hooks/use-franklin-chat.ts b/src/hooks/use-franklin-chat.ts
index bae56b1..63e131a 100644
--- a/src/hooks/use-franklin-chat.ts
+++ b/src/hooks/use-franklin-chat.ts
@@ -3,7 +3,17 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useAccount } from "wagmi";
 import { useX402Payment, parseX402FromResponse } from "./use-x402-payment";
-import { FRANKLIN_SYSTEM_PROMPT, FRANKLIN_TOOLS_PROMPT } from "@/lib/franklin-system-prompt";
+import { FRANKLIN_SYSTEM_PROMPT, FRANKLIN_TOOLS_PROMPT, systemPromptDateLine } from "@/lib/franklin-system-prompt";
+
+// Browser's IANA timezone (e.g. "Asia/Shanghai") — passed to systemPromptDateLine
+// so the model greets in the user's local time. Safe-guarded for SSR.
+function userTz(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
 
 // Browser-side chat + image generation against BlockRun's x402 API, proxied
 // through /api/blockrun. Free chat models return 200 directly; paid models
@@ -22,6 +32,7 @@ const ANTHROPIC_VERSION = "2023-06-01";
 const IMAGE_ENDPOINT = "/api/blockrun/v1/images/generations";
 const IMAGE_EDIT_ENDPOINT = "/api/blockrun/v1/images/image2image";
 const VIDEO_ENDPOINT = "/api/blockrun/v1/videos/generations";
+const MUSIC_ENDPOINT = "/api/blockrun/v1/audio/generations";
 
 // Only OpenAI's edit endpoint accepts a reference image (mirrors Franklin CLI's
 // EDIT_SUPPORTED_MODELS). When a reference is attached we force gpt-image-2.
@@ -37,7 +48,7 @@ const VIDEO_IMAGE_INPUT_MODELS = new Set([
 ]);
 const DEFAULT_I2V_MODEL = "bytedance/seedance-2.0-fast";
 
-export type ChatMode = "chat" | "image" | "video";
+export type ChatMode = "chat" | "image" | "video" | "music";
 
 export interface ChatModel {
   id: string;
@@ -75,10 +86,38 @@ export const CHAT_MODELS: ChatModel[] = [
   { id: "moonshot/kimi-k2.6", label: "Kimi K2.6", group: "Budget" },
 ];
 
+// Image-model aspect-ratio whitelist — mirrors each model's `sizes` in
+// `blockrun/src/lib/models.ts`. Gateway rejects sizes outside this list with
+// 400, so the UI builds its "比例" picker from this map. Single-ratio models
+// (Nano Banana, Grok Imagine) skip the picker. Defaults are always the
+// smallest size in each ratio bucket (cheapest), and the first entry is the
+// default selection for that model.
+export const IMAGE_MODEL_SIZES: Record<string, { ratio: string; size: string }[]> = {
+  "openai/gpt-image-1": [
+    { ratio: "1:1", size: "1024x1024" },
+    { ratio: "3:2", size: "1536x1024" },
+    { ratio: "2:3", size: "1024x1536" },
+  ],
+  "openai/gpt-image-2": [
+    { ratio: "1:1", size: "1024x1024" },
+    { ratio: "3:2", size: "1536x1024" },
+    { ratio: "2:3", size: "1024x1536" },
+  ],
+  "google/nano-banana": [{ ratio: "1:1", size: "1024x1024" }],
+  "google/nano-banana-pro": [{ ratio: "1:1", size: "1024x1024" }],
+  "xai/grok-imagine-image": [{ ratio: "1:1", size: "1024x1024" }],
+};
+function defaultSizeFor(modelId: string): string {
+  return IMAGE_MODEL_SIZES[modelId]?.[0]?.size ?? "1024x1024";
+}
+
 // Typical image models (all paid — image generation always needs a wallet).
+// GPT Image 2 leads — it's the only one in this lineup that supports
+// non-square aspect ratios (3:2 / 2:3), so it lines up with the "比例"
+// picker the rest of the UX is built around.
 export const IMAGE_MODELS: ChatModel[] = [
-  { id: "google/nano-banana-pro", label: "Nano Banana Pro" },
   { id: "openai/gpt-image-2", label: "GPT Image 2" },
+  { id: "google/nano-banana-pro", label: "Nano Banana Pro" },
   { id: "google/nano-banana", label: "Nano Banana" },
   { id: "xai/grok-imagine-image", label: "Grok Imagine" },
 ];
@@ -91,6 +130,28 @@ export const VIDEO_MODELS: ChatModel[] = [
   { id: "azure/sora-2", label: "Sora 2" },
 ];
 
+// Video-model aspect-ratio whitelist. Only token360-backed Seedance models
+// accept the `aspect_ratio` param (gateway: `videos/generations` route); for
+// xAI Grok Imagine Video and Azure Sora 2 the param is silently ignored, so
+// the UI hides the picker for them. Gateway accepts 16:9, 9:16, 1:1, 4:3,
+// 3:4, 21:9, 9:21, "adaptive" — we expose the five common ones (skipping
+// 21:9 / 9:21 cinematic and "adaptive" auto-mode) to keep the menu tight.
+export const VIDEO_MODEL_RATIOS: Record<string, string[]> = {
+  "bytedance/seedance-2.0-fast": ["16:9", "9:16", "1:1", "4:3", "3:4"],
+  "bytedance/seedance-2.0": ["16:9", "9:16", "1:1", "4:3", "3:4"],
+  "bytedance/seedance-1.5-pro": ["16:9", "9:16", "1:1", "4:3", "3:4"],
+};
+function defaultVideoRatioFor(modelId: string): string {
+  return VIDEO_MODEL_RATIOS[modelId]?.[0] ?? "16:9";
+}
+
+// Music models — only MiniMax Music 2.5+ is wired up at the gateway today.
+// /v1/audio/generations may return 202 (poll) for long renders; the music
+// branch in runMedia handles both 200 and 202 the same way as image/video.
+export const MUSIC_MODELS: ChatModel[] = [
+  { id: "minimax/music-2.5+", label: "MiniMax Music 2.5+" },
+];
+
 // A compact record of the tool run behind an answer — kept on the message so
 // it collapses into a "searched N keywords · M sources" summary after the run.
 export interface ChatActivity {
@@ -102,9 +163,10 @@ export interface ChatActivity {
 export interface ChatMessage {
   role: "user" | "assistant";
   content: string;
-  kind?: "text" | "image" | "video";
+  kind?: "text" | "image" | "video" | "music";
   image?: string;
   video?: string;
+  music?: string;
   reasoning?: string;
   activity?: ChatActivity;
 }
@@ -276,7 +338,7 @@ export interface ToolStep {
 // never locks the others (mirrors how ChatGPT/Gemini/Midjourney treat slow
 // image/video as async jobs tied to the thread, not a global busy lock).
 export interface MediaJob {
-  kind: "image" | "video";
+  kind: "image" | "video" | "music";
   phase: "signing" | "generating";
 }
 
@@ -326,8 +388,24 @@ export function useFranklinChat(
 
   const [mode, setMode] = useState<ChatMode>("chat");
   const [chatModel, setChatModel] = useState(CHAT_MODELS[0].id);
-  const [imageModel, setImageModel] = useState(IMAGE_MODELS[0].id);
-  const [videoModel, setVideoModel] = useState(VIDEO_MODELS[0].id);
+  const [imageModel, setImageModelState] = useState(IMAGE_MODELS[0].id);
+  const [imageSize, setImageSize] = useState<string>(defaultSizeFor(IMAGE_MODELS[0].id));
+  // Reset the aspect ratio whenever the image model changes — the old size
+  // may not be in the new model's whitelist (gateway would 400). Picking the
+  // model's first ratio keeps the selection always valid.
+  const setImageModel = useCallback((id: string) => {
+    setImageModelState(id);
+    setImageSize(defaultSizeFor(id));
+  }, []);
+  const [videoModel, setVideoModelState] = useState(VIDEO_MODELS[0].id);
+  const [videoRatio, setVideoRatio] = useState<string>(defaultVideoRatioFor(VIDEO_MODELS[0].id));
+  // Reset video ratio whenever the model changes — Seedance models accept
+  // `aspect_ratio`, others don't have a list, so the picker hides.
+  const setVideoModel = useCallback((id: string) => {
+    setVideoModelState(id);
+    setVideoRatio(defaultVideoRatioFor(id));
+  }, []);
+  const [musicModel, setMusicModel] = useState(MUSIC_MODELS[0].id);
   const [status, setStatus] = useState<ChatStatus>("idle");
   const [activeTool, setActiveTool] = useState<string | null>(null);
   const [steps, setSteps] = useState<ToolStep[]>([]);
@@ -353,9 +431,12 @@ export function useFranklinChat(
     msgRef.current = messages;
   }, [messages]);
 
-  const model = mode === "image" ? imageModel : mode === "video" ? videoModel : chatModel;
-  const setModel = mode === "image" ? setImageModel : mode === "video" ? setVideoModel : setChatModel;
-  const models = mode === "image" ? IMAGE_MODELS : mode === "video" ? VIDEO_MODELS : CHAT_MODELS;
+  const model =
+    mode === "image" ? imageModel : mode === "video" ? videoModel : mode === "music" ? musicModel : chatModel;
+  const setModel =
+    mode === "image" ? setImageModel : mode === "video" ? setVideoModel : mode === "music" ? setMusicModel : setChatModel;
+  const models =
+    mode === "image" ? IMAGE_MODELS : mode === "video" ? VIDEO_MODELS : mode === "music" ? MUSIC_MODELS : CHAT_MODELS;
   const selectedModel = models.find((m) => m.id === model);
 
   const signal = () => abortRef.current?.signal;
@@ -452,7 +533,7 @@ export function useFranklinChat(
       const activeMode0 = modeOverride ?? mode;
       // Heavy media → detached, per-conversation background job. It doesn't take
       // the global chat lock, so other conversations stay usable while it runs.
-      if (activeMode0 === "image" || activeMode0 === "video") {
+      if (activeMode0 === "image" || activeMode0 === "video" || activeMode0 === "music") {
         const mediaConvId = ensureConvId();
         if (mediaAbortRef.current[mediaConvId]) return; // already generating here
         void runMedia(mediaConvId, activeMode0, prompt, attachment);
@@ -512,8 +593,11 @@ export function useFranklinChat(
         setGenConvId(null);
       }
     },
+    // imageSize / videoRatio MUST be in deps — runMedia closes over them, so
+    // a stale send() would always send the initial size/ratio regardless of
+    // what the user picked.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mode, chatModel, imageModel, videoModel, paidFetch, setMessages, setChatModel, ensureConvId],
+    [mode, chatModel, imageModel, videoModel, musicModel, imageSize, videoRatio, paidFetch, setMessages, setChatModel, ensureConvId],
   );
 
   // Regenerate the last answer: drop trailing assistant message(s), then resend
@@ -533,7 +617,8 @@ export function useFranklinChat(
     const base = msgs.slice(0, i);
     msgRef.current = base;
     setMessages(base);
-    const m: ChatMode = lastKind === "image" ? "image" : lastKind === "video" ? "video" : "chat";
+    const m: ChatMode =
+      lastKind === "image" ? "image" : lastKind === "video" ? "video" : lastKind === "music" ? "music" : "chat";
     void send(userMsg.content, userMsg.image, m);
   }, [send, setMessages]);
 
@@ -641,7 +726,7 @@ export function useFranklinChat(
     const focusNudge = forceTool
       ? `\n\nThe user selected the ${toolLabel(forceTool)} capability — use the ${forceTool} tool to answer this turn, then summarize the result clearly.`
       : "";
-    const systemPrompt = `${FRANKLIN_SYSTEM_PROMPT}\n\n${FRANKLIN_TOOLS_PROMPT}${TOOL_ACTIVATION_NOTE}${focusNudge}`;
+    const systemPrompt = `${FRANKLIN_SYSTEM_PROMPT}\n\n${systemPromptDateLine(userTz())}\n\n${FRANKLIN_TOOLS_PROMPT}${TOOL_ACTIVATION_NOTE}${focusNudge}`;
     // Convert a user-attached image to an Anthropic image content block.
     // Browser attachments come in as `data:image/...;base64,...`; remote URLs
     // (e.g. a previously generated image) go through the `url` source kind.
@@ -653,7 +738,7 @@ export function useFranklinChat(
       return { type: "image", source: { type: "url", url: image } };
     };
     const apiMessages: ApiMsg[] = history
-      .filter((m) => m.kind !== "video" && !(m.kind === "image" && m.role === "assistant"))
+      .filter((m) => m.kind !== "video" && m.kind !== "music" && !(m.kind === "image" && m.role === "assistant"))
       .map((m) =>
         m.role === "user" && m.image
           ? {
@@ -820,7 +905,7 @@ export function useFranklinChat(
   // signs + submits, polls, writes the result — all pinned to `convId` and
   // tracked in `mediaJobs[convId]`, so it never touches the global chat run and
   // switching conversations leaves it (and other conversations) unaffected.
-  async function runMedia(convId: string, kind: "image" | "video", prompt: string, reference?: string) {
+  async function runMedia(convId: string, kind: "image" | "video" | "music", prompt: string, reference?: string) {
     const abort = new AbortController();
     mediaAbortRef.current[convId] = abort;
     setMediaJobs((p) => ({ ...p, [convId]: { kind, phase: "generating" } }));
@@ -838,14 +923,35 @@ export function useFranklinChat(
       const useEdit = !!reference;
       model = useEdit && !EDIT_SUPPORTED_IMAGE_MODELS.has(imageModel) ? "openai/gpt-image-2" : imageModel;
       endpoint = useEdit ? IMAGE_EDIT_ENDPOINT : IMAGE_ENDPOINT;
+      // Edit endpoint is locked to 1024² (the only size every edit-capable
+      // model accepts); text-to-image uses the user's selected aspect ratio,
+      // validated against the active model's whitelist.
+      const validSize = IMAGE_MODEL_SIZES[model]?.some((s) => s.size === imageSize)
+        ? imageSize
+        : defaultSizeFor(model);
       body = useEdit
         ? JSON.stringify({ model, prompt, image: reference, size: "1024x1024", n: 1 })
-        : JSON.stringify({ model, prompt, n: 1 });
-    } else {
+        : JSON.stringify({ model, prompt, size: validSize, n: 1 });
+    } else if (kind === "video") {
       const useSeed = !!reference;
       model = useSeed && !VIDEO_IMAGE_INPUT_MODELS.has(videoModel) ? DEFAULT_I2V_MODEL : videoModel;
       endpoint = VIDEO_ENDPOINT;
-      body = JSON.stringify({ model, prompt, ...(useSeed ? { image_url: reference } : {}) });
+      // aspect_ratio is token360 (Seedance) only; for other providers we
+      // omit it entirely so the upstream picks its own default.
+      const ratios = VIDEO_MODEL_RATIOS[model];
+      const aspectRatio = ratios && ratios.includes(videoRatio) ? videoRatio : undefined;
+      body = JSON.stringify({
+        model,
+        prompt,
+        ...(useSeed ? { image_url: reference } : {}),
+        ...(aspectRatio ? { aspect_ratio: aspectRatio } : {}),
+      });
+    } else {
+      // music — gateway picks the model via `model`; the rest of the params are
+      // optional (duration / lyrics / instrumental). Reference is ignored.
+      model = musicModel;
+      endpoint = MUSIC_ENDPOINT;
+      body = JSON.stringify({ model, prompt });
     }
 
     try {
@@ -881,8 +987,15 @@ export function useFranklinChat(
         if (!res.ok) throw new Error(await errMsg(res));
         url = extractMediaUrl(await res.json());
       }
-      if (!url) throw new Error(kind === "image" ? "No image came back from the model." : "No video came back from the model.");
-      const extra = kind === "image" ? { image: url } : { video: url };
+      if (!url)
+        throw new Error(
+          kind === "image"
+            ? "No image came back from the model."
+            : kind === "video"
+              ? "No video came back from the model."
+              : "No audio came back from the model.",
+        );
+      const extra = kind === "image" ? { image: url } : kind === "video" ? { video: url } : { music: url };
       setMessagesRaw((m) => [...m, { role: "assistant", content: prompt, kind, ...extra }], convId);
     } catch (err) {
       const aborted = abort.signal.aborted || (err instanceof Error && err.name === "AbortError");
@@ -904,7 +1017,7 @@ export function useFranklinChat(
   // the global pollMedia used by the music tool.
   async function pollMediaJob(
     convId: string,
-    kind: "image" | "video",
+    kind: "image" | "video" | "music",
     submitRes: Response,
     signal: AbortSignal,
     model: string,
@@ -988,6 +1101,13 @@ export function useFranklinChat(
   const isBusy =
     status === "signing" || status === "thinking" || status === "generating";
 
+  // Aspect-ratio options for the current image model — drives the "比例"
+  // flyout. Empty / single-entry → UI hides the button.
+  const imageSizes = IMAGE_MODEL_SIZES[imageModel] ?? [];
+  // Same for video — only Seedance has an aspect-ratio list (xAI / Sora
+  // ignore the param). Empty → UI hides the button.
+  const videoRatios = VIDEO_MODEL_RATIOS[videoModel] ?? [];
+
   return {
     isConnected,
     mode,
@@ -1008,6 +1128,12 @@ export function useFranklinChat(
     stop,
     stopMedia,
     regenerate,
+    imageSize,
+    setImageSize,
+    imageSizes,
+    videoRatio,
+    setVideoRatio,
+    videoRatios,
   };
 }
 
diff --git a/src/lib/franklin-system-prompt.ts b/src/lib/franklin-system-prompt.ts
index f3e8c31..3165f9d 100644
--- a/src/lib/franklin-system-prompt.ts
+++ b/src/lib/franklin-system-prompt.ts
@@ -6,6 +6,34 @@
 //
 // FRANKLIN_SYSTEM_PROMPT is sent on every chat turn. FRANKLIN_TOOLS_PROMPT is
 // appended only when function-calling tools are attached (tool-capable models).
+//
+// systemPromptDateLine() is prepended on every turn so the model has the
+// current date and local time. Without this, models fall back to their
+// training cutoff and confidently date "today" to that. Kept intentionally
+// terse — state the facts, no meta-instructions on how to use them.
+//
+// `tz` should be the user's IANA timezone (browser:
+// `Intl.DateTimeFormat().resolvedOptions().timeZone`); falls back to UTC.
+
+export function systemPromptDateLine(tz?: string): string {
+  const d = new Date();
+  const timeZone = tz || "UTC";
+  // YYYY-MM-DD in the user's timezone (en-CA's ISO-like ordering).
+  const date = new Intl.DateTimeFormat("en-CA", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone,
+  }).format(d);
+  const weekday = d.toLocaleDateString("en-US", { weekday: "long", timeZone });
+  const time = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+    timeZone,
+  }).format(d);
+  return `Today's date is ${date} (${weekday}). Local time is ${time} (${timeZone}).`;
+}
 
 export const FRANKLIN_SYSTEM_PROMPT = `You are Franklin, an autonomous AI agent with a wallet. You help users with research, trading signals, marketing, software questions, and any task that benefits from an agent that can reason, act, and spend.
 
diff --git a/src/lib/try-i18n.tsx b/src/lib/try-i18n.tsx
index cf96710..a051c81 100644
--- a/src/lib/try-i18n.tsx
+++ b/src/lib/try-i18n.tsx
@@ -23,6 +23,8 @@ export interface TryDict {
   openInWalletApp: string;
   image: string;
   video: string;
+  music: string;
+  ratio: string;
   attachImage: string;
   attachChatOnly: string;
   attachRef: string;
@@ -94,14 +96,22 @@ export interface TryDict {
   casePrice: string;
   caseSearch: string;
   caseMusic: string;
+  caseProductPhotos: string;
+  caseScreenshotDemo: string;
+  caseFranklinSpeaker: string;
+  caseStartupVisuals: string;
+  caseCatHedgeFund: string;
+  caseHeadshots: string;
   // empty-state titles (the word "Franklin" is highlighted at render time)
   emptyChat: string;
   emptyImage: string;
   emptyVideo: string;
+  emptyMusic: string;
   // composer placeholders
   phMessage: string;
   phImage: string;
   phVideo: string;
+  phMusic: string;
   phConnect: string;
   focusPrediction: string;
   focusSearch: string;
@@ -112,6 +122,7 @@ export interface TryDict {
   // wallet hints
   hintImage: string;
   hintVideo: string;
+  hintMusic: string;
   hintChat: (model: string) => string;
   hintToolWallet: string;
   // status
@@ -122,6 +133,7 @@ export interface TryDict {
   // media links
   openFull: string;
   downloadMp4: string;
+  downloadAudio: string;
   reasoning: string;
   spent: string;
   requests: (n: number) => string;
@@ -132,6 +144,7 @@ export interface TryDict {
   sugChat: string[];
   sugImage: string[];
   sugVideo: string[];
+  sugMusic: string[];
 }
 
 const en: TryDict = {
@@ -147,6 +160,8 @@ const en: TryDict = {
   openInWalletApp: "Open in the MetaMask or Coinbase Wallet app browser.",
   image: "Image",
   video: "Video",
+  music: "Music",
+  ratio: "Ratio",
   attachImage: "Attach an image",
   attachChatOnly: "Attachments work in Chat mode",
   attachRef: "Attach a reference image (image-to-image)",
@@ -214,12 +229,20 @@ const en: TryDict = {
   casePrice: "Pull a live BTC research brief with cited on-chain sources.",
   caseSearch: "Tell me who owns this wallet — VC, whale, or market maker?",
   caseMusic: "Score my short video with an original 3-minute track.",
+  caseProductPhotos: "Generate premium product photos for my coffee brand.",
+  caseScreenshotDemo: "Turn this screenshot into a polished product demo image.",
+  caseFranklinSpeaker: "Generate a photo of Benjamin Franklin speaking at a crypto conference.",
+  caseStartupVisuals: "Create marketing visuals for an AI startup landing page.",
+  caseCatHedgeFund: "Create a hyper-realistic image of my cat running a hedge fund.",
+  caseHeadshots: "Turn my selfie into 5 LinkedIn headshots.",
   emptyChat: "What should Franklin do?",
   emptyImage: "What should Franklin draw?",
   emptyVideo: "What should Franklin film?",
+  emptyMusic: "What should Franklin compose?",
   phMessage: "Message Franklin…",
   phImage: "Describe an image…",
   phVideo: "Describe a video…",
+  phMusic: "Describe music to compose…",
   phConnect: "Connect a wallet to begin…",
   focusPrediction: "Prediction",
   focusSearch: "Web search",
@@ -229,6 +252,7 @@ const en: TryDict = {
   phPrice: "Ask for a live price…",
   hintImage: "Connect a wallet to generate images.",
   hintVideo: "Connect a wallet to generate videos.",
+  hintMusic: "Connect a wallet to generate music.",
   hintChat: (m) => `Connect a wallet to use ${m}, or switch to a free model.`,
   hintToolWallet: "Franklin needs a paid tool (web search, prediction markets, …). Connect your wallet to continue.",
   statusSigning: "Sign the payment in your wallet…",
@@ -237,6 +261,7 @@ const en: TryDict = {
   statusVideo: "Rendering your video (this can take a minute)…",
   openFull: "Open full size",
   downloadMp4: "Download MP4",
+  downloadAudio: "Download audio",
   reasoning: "Thoughts",
   spent: "Spent",
   requests: (n) => `${n} request${n===1?"":"s"}`,
@@ -253,6 +278,11 @@ const en: TryDict = {
     "Shoot an 8-second product ad with synced sound.",
     "Keep the same AI character across 5 promo clips.",
   ],
+  sugMusic: [
+    "Lo-fi hip hop, mellow piano, rainy afternoon vibes, 60 seconds.",
+    "Cinematic orchestral build-up — strings and brass, epic and hopeful.",
+    "Synthwave instrumental with a driving 80s drum beat, neon-night mood.",
+  ],
 };
 
 const zh: TryDict = {
@@ -262,12 +292,14 @@ const zh: TryDict = {
   connectWallet: "连接钱包",
   connecting: "连接中…",
   installWallet: "安装钱包",
-  baseNetwork: "Base 链",
-  switchToBase: "切换到 Base 链",
+  baseNetwork: "Base",
+  switchToBase: "切换到 Base",
   noWalletFound: "未检测到钱包",
   openInWalletApp: "请在 MetaMask 或 Coinbase Wallet 应用的内置浏览器中打开。",
   image: "图像",
   video: "视频",
+  music: "音乐",
+  ratio: "比例",
   attachImage: "添加图片",
   attachChatOnly: "附件仅在对话模式可用",
   attachRef: "添加参考图（图生图）",
@@ -335,12 +367,20 @@ const zh: TryDict = {
   casePrice: "拉一份实时 BTC 研究简报，附上链上数据来源。",
   caseSearch: "告诉我这个钱包属于谁 —— VC、巨鲸，还是做市商？",
   caseMusic: "给我这段短视频配一首 3 分钟原创配乐。",
+  caseProductPhotos: "为我的咖啡品牌生成高端产品图。",
+  caseScreenshotDemo: "把这张截图做成精修的产品演示图。",
+  caseFranklinSpeaker: "生成一张富兰克林在加密大会上演讲的照片。",
+  caseStartupVisuals: "为 AI 创业公司的落地页设计营销视觉图。",
+  caseCatHedgeFund: "生成一张写实风格的「我家猫在管对冲基金」。",
+  caseHeadshots: "把我的自拍变成 5 张 LinkedIn 职业头像。",
   emptyChat: "让 Franklin 做点什么？",
   emptyImage: "让 Franklin 画点什么？",
   emptyVideo: "让 Franklin 拍点什么？",
+  emptyMusic: "让 Franklin 作点什么音乐？",
   phMessage: "给 Franklin 发消息…",
   phImage: "描述一张图片…",
   phVideo: "描述一段视频…",
+  phMusic: "描述你想要的音乐…",
   phConnect: "连接钱包后开始…",
   focusPrediction: "预测市场",
   focusSearch: "联网搜索",
@@ -350,6 +390,7 @@ const zh: TryDict = {
   phPrice: "查询实时价格…",
   hintImage: "连接钱包以生成图片。",
   hintVideo: "连接钱包以生成视频。",
+  hintMusic: "连接钱包以生成音乐。",
   hintChat: (m) => `连接钱包以使用 ${m}，或切换到免费模型。`,
   hintToolWallet: "Franklin 需要调用付费工具（联网搜索、预测市场等）。请连接钱包以继续。",
   statusSigning: "请在钱包中签名付款…",
@@ -358,6 +399,7 @@ const zh: TryDict = {
   statusVideo: "正在渲染视频（可能需要一会儿）…",
   openFull: "查看原图",
   downloadMp4: "下载 MP4",
+  downloadAudio: "下载音频",
   reasoning: "推理过程",
   spent: "已花费",
   requests: (n) => `${n} 次请求`,
@@ -374,6 +416,11 @@ const zh: TryDict = {
     "拍一支 8 秒的产品广告，带同步音效。",
     "在 5 段宣传短片里保持同一个 AI 角色。",
   ],
+  sugMusic: [
+    "低保真 Hip-Hop，柔和的钢琴，雨天午后氛围，60 秒。",
+    "电影感管弦乐渐进——弦乐和铜管，史诗且充满希望。",
+    "Synthwave 纯音乐，80 年代鼓点驱动，霓虹夜晚的氛围。",
+  ],
 };
 
 const es: TryDict = {
@@ -389,6 +436,8 @@ const es: TryDict = {
   openInWalletApp: "Ábrelo en el navegador de la app MetaMask o Coinbase Wallet.",
   image: "Imagen",
   video: "Video",
+  music: "Música",
+  ratio: "Proporción",
   attachImage: "Adjuntar una imagen",
   attachChatOnly: "Los adjuntos funcionan en modo Chat",
   attachRef: "Adjunta una imagen de referencia (imagen a imagen)",
@@ -456,12 +505,20 @@ const es: TryDict = {
   casePrice: "Tráeme un brief de investigación en vivo sobre BTC con fuentes on-chain citadas.",
   caseSearch: "Dime quién es el dueño de esta wallet — VC, whale o market maker.",
   caseMusic: "Pónle a mi video corto una pista original de 3 minutos.",
+  caseProductPhotos: "Genera fotos premium de producto para mi marca de café.",
+  caseScreenshotDemo: "Convierte esta captura en una imagen de demo de producto pulida.",
+  caseFranklinSpeaker: "Genera una foto de Benjamin Franklin dando un discurso en una conferencia cripto.",
+  caseStartupVisuals: "Crea visuales de marketing para la landing de una startup de IA.",
+  caseCatHedgeFund: "Crea una imagen hiperrealista de mi gato dirigiendo un hedge fund.",
+  caseHeadshots: "Convierte mi selfie en 5 fotos de perfil para LinkedIn.",
   emptyChat: "¿Qué debería hacer Franklin?",
   emptyImage: "¿Qué debería dibujar Franklin?",
   emptyVideo: "¿Qué debería filmar Franklin?",
+  emptyMusic: "¿Qué debería componer Franklin?",
   phMessage: "Escribe a Franklin…",
   phImage: "Describe una imagen…",
   phVideo: "Describe un video…",
+  phMusic: "Describe la música a componer…",
   phConnect: "Conecta una billetera para empezar…",
   focusPrediction: "Predicción",
   focusSearch: "Búsqueda web",
@@ -471,6 +528,7 @@ const es: TryDict = {
   phPrice: "Pide un precio en vivo…",
   hintImage: "Conecta una billetera para generar imágenes.",
   hintVideo: "Conecta una billetera para generar videos.",
+  hintMusic: "Conecta una billetera para generar música.",
   hintChat: (m) => `Conecta una billetera para usar ${m}, o cambia a un modelo gratuito.`,
   hintToolWallet: "Franklin necesita una herramienta de pago (búsqueda web, mercados de predicción…). Conecta tu billetera para continuar.",
   statusSigning: "Firma el pago en tu billetera…",
@@ -479,6 +537,7 @@ const es: TryDict = {
   statusVideo: "Renderizando tu video (puede tardar un minuto)…",
   openFull: "Ver tamaño completo",
   downloadMp4: "Descargar MP4",
+  downloadAudio: "Descargar audio",
   reasoning: "Razonamiento",
   spent: "Gastado",
   requests: (n) => `${n} solicitud${n===1?"":"es"}`,
@@ -495,6 +554,11 @@ const es: TryDict = {
     "Filma un anuncio de producto de 8 segundos con sonido sincronizado.",
     "Mantén el mismo personaje IA en 5 clips promocionales.",
   ],
+  sugMusic: [
+    "Lo-fi hip hop, piano suave, vibras de tarde lluviosa, 60 segundos.",
+    "Crescendo orquestal cinematográfico — cuerdas y metales, épico y esperanzador.",
+    "Synthwave instrumental con batería ochentera, ambiente de noche neón.",
+  ],
 };
 
 const DICTS: Record<TryLang, TryDict> = { en, zh, es };

From 631c29fd6ae0d3bf53e750482d451cf8b964c0c3 Mon Sep 17 00:00:00 2001
From: Fsocietyhhh <1211904451@qq.com>
Date: Fri, 29 May 2026 14:03:29 -0700
Subject: [PATCH 2/3] Add resolution picker for Seedance video
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Second flyout next to the aspect-ratio picker in video mode, gated by
VIDEO_MODEL_RESOLUTIONS — Seedance 1.5 Pro / 2.0 Fast / 2.0 Pro get
480p/720p/1080p; Grok Imagine Video and Sora 2 ignore the param so
the picker hides for them.

Default is 720p (matches the gateway's Seedance default at
videos/generations/route.ts:218). Switching model resets ratio +
resolution to that model's defaults so we never POST a value the
gateway will 400. videoResolution joined imageSize/videoRatio in
send()'s useCallback deps to avoid the closure-stale bug.

Known gateway issue: 1080p costs the user the same 402 amount as 720p,
because calculateVideoPrice uses a fixed tokensPerSecondAtDefault
constant. Tracked in BlockRunAI/blockrun#30 — favors users in the
meantime; quality is the only differentiator they see.
---
 src/components/try/FranklinChat.tsx | 46 +++++++++++++++++++++++++++--
 src/hooks/use-franklin-chat.ts      | 40 ++++++++++++++++++++-----
 src/lib/try-i18n.tsx                |  4 +++
 3 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/src/components/try/FranklinChat.tsx b/src/components/try/FranklinChat.tsx
index 65d2a8b..26d0572 100644
--- a/src/components/try/FranklinChat.tsx
+++ b/src/components/try/FranklinChat.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { ArrowUp, PanelLeft, ImageIcon, Clapperboard, X, Plus, Check, BarChart3, TrendingUp, Music, ChevronDown } from "lucide-react";
+import { ArrowUp, PanelLeft, ImageIcon, Clapperboard, X, Plus, Check, BarChart3, TrendingUp, Music, ChevronDown, Gauge } from "lucide-react";
 import { ModelSelect } from "./ModelSelect";
 import { HistorySidebar, type TryView } from "./HistorySidebar";
 import { MessageContent } from "./MessageContent";
@@ -69,7 +69,7 @@ export function FranklinChat() {
   const history = useChatHistory(auth.address);
   const { usage, recordSpend } = useUsageStats();
   const chat = useFranklinChat(history.messages, history.setMessages, history.ensureConvId, recordSpend);
-  const { mode, setMode, model, setModel, models, selectedModel, status, activeTool, steps, needsToolWallet, genConvId, mediaJobs, error, isBusy, isConnected, send, stop, stopMedia, regenerate, imageSize, setImageSize, imageSizes, videoRatio, setVideoRatio, videoRatios } = chat;
+  const { mode, setMode, model, setModel, models, selectedModel, status, activeTool, steps, needsToolWallet, genConvId, mediaJobs, error, isBusy, isConnected, send, stop, stopMedia, regenerate, imageSize, setImageSize, imageSizes, videoRatio, setVideoRatio, videoRatios, videoResolution, setVideoResolution, videoResolutions } = chat;
   // Only show the live (chat) generation UI in the conversation that started it.
   const genHere = genConvId === null || genConvId === history.activeId;
   // Heavy media (image/video) runs as a per-conversation background job — show
@@ -113,6 +113,10 @@ export function FranklinChat() {
   const ratioValue = mode === "image" ? imageSize : mode === "video" ? videoRatio : "";
   const setRatioValue = mode === "image" ? setImageSize : mode === "video" ? setVideoRatio : () => {};
   const currentRatio = ratioOptions.find((o) => o.value === ratioValue)?.ratio ?? ratioOptions[0]?.ratio ?? "";
+  // Resolution flyout — Seedance-only. Sits next to the ratio picker. The
+  // gateway accepts 360p/480p/540p/720p/1080p/1K/2K/4K but we expose three
+  // common steps to keep the menu tight.
+  const [resOpen, setResOpen] = useState(false);
 
   // Skill cards prefill the composer (and optionally pick a tool-capable model).
   const pickSkill = (template: string, model?: string) => {
@@ -635,6 +639,44 @@ export function FranklinChat() {
                         )}
                       </div>
                     )}
+                    {mode === "video" && videoResolutions.length > 1 && (
+                      <div className="try-ratio">
+                        <button
+                          className={`try-tool try-ratio-btn${resOpen ? " is-active" : ""}`}
+                          onClick={() => setResOpen((o) => !o)}
+                          disabled={busy}
+                          title={t.resolution}
+                          aria-haspopup="listbox"
+                          aria-expanded={resOpen}
+                        >
+                          <Gauge className="h-4 w-4" />
+                          {videoResolution}
+                          <ChevronDown className="try-ratio-chev h-3.5 w-3.5" />
+                        </button>
+                        {resOpen && (
+                          <>
+                            <div className="try-ratio-scrim" onClick={() => setResOpen(false)} />
+                            <div className="try-ratio-menu" role="listbox" aria-label={t.resolution}>
+                              {videoResolutions.map((r) => (
+                                <button
+                                  key={r}
+                                  role="option"
+                                  aria-selected={r === videoResolution}
+                                  className={`try-ratio-item${r === videoResolution ? " is-active" : ""}`}
+                                  onClick={() => {
+                                    setVideoResolution(r);
+                                    setResOpen(false);
+                                  }}
+                                >
+                                  {r}
+                                  <Check className="try-ratio-item-check h-3.5 w-3.5" />
+                                </button>
+                              ))}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    )}
                   </>
                 )}
               </div>
diff --git a/src/hooks/use-franklin-chat.ts b/src/hooks/use-franklin-chat.ts
index 63e131a..bd8bab0 100644
--- a/src/hooks/use-franklin-chat.ts
+++ b/src/hooks/use-franklin-chat.ts
@@ -145,6 +145,21 @@ function defaultVideoRatioFor(modelId: string): string {
   return VIDEO_MODEL_RATIOS[modelId]?.[0] ?? "16:9";
 }
 
+// Video-model resolution whitelist — same token360-only constraint as
+// aspect_ratio (xAI / Sora ignore the param). Gateway accepts 360p / 480p
+// / 540p / 720p / 1080p / 1K / 2K / 4K, but pricing scales with tokens
+// (1080p ≈ 2.25x 720p), so we expose the three common steps and default
+// to 720p — matches gateway default for Seedance and what users see from
+// BytePlus/JiMeng directly.
+export const VIDEO_MODEL_RESOLUTIONS: Record<string, string[]> = {
+  "bytedance/seedance-2.0-fast": ["480p", "720p", "1080p"],
+  "bytedance/seedance-2.0": ["480p", "720p", "1080p"],
+  "bytedance/seedance-1.5-pro": ["480p", "720p", "1080p"],
+};
+function defaultVideoResolutionFor(modelId: string): string {
+  return VIDEO_MODEL_RESOLUTIONS[modelId]?.includes("720p") ? "720p" : VIDEO_MODEL_RESOLUTIONS[modelId]?.[0] ?? "720p";
+}
+
 // Music models — only MiniMax Music 2.5+ is wired up at the gateway today.
 // /v1/audio/generations may return 202 (poll) for long renders; the music
 // branch in runMedia handles both 200 and 202 the same way as image/video.
@@ -399,11 +414,14 @@ export function useFranklinChat(
   }, []);
   const [videoModel, setVideoModelState] = useState(VIDEO_MODELS[0].id);
   const [videoRatio, setVideoRatio] = useState<string>(defaultVideoRatioFor(VIDEO_MODELS[0].id));
-  // Reset video ratio whenever the model changes — Seedance models accept
-  // `aspect_ratio`, others don't have a list, so the picker hides.
+  const [videoResolution, setVideoResolution] = useState<string>(defaultVideoResolutionFor(VIDEO_MODELS[0].id));
+  // Reset video ratio + resolution whenever the model changes — Seedance
+  // models accept `aspect_ratio` and `resolution`; others don't have a list,
+  // so both pickers hide.
   const setVideoModel = useCallback((id: string) => {
     setVideoModelState(id);
     setVideoRatio(defaultVideoRatioFor(id));
+    setVideoResolution(defaultVideoResolutionFor(id));
   }, []);
   const [musicModel, setMusicModel] = useState(MUSIC_MODELS[0].id);
   const [status, setStatus] = useState<ChatStatus>("idle");
@@ -593,11 +611,11 @@ export function useFranklinChat(
         setGenConvId(null);
       }
     },
-    // imageSize / videoRatio MUST be in deps — runMedia closes over them, so
-    // a stale send() would always send the initial size/ratio regardless of
-    // what the user picked.
+    // imageSize / videoRatio / videoResolution MUST be in deps — runMedia
+    // closes over them, so a stale send() would always send the initial
+    // values regardless of what the user picked.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mode, chatModel, imageModel, videoModel, musicModel, imageSize, videoRatio, paidFetch, setMessages, setChatModel, ensureConvId],
+    [mode, chatModel, imageModel, videoModel, musicModel, imageSize, videoRatio, videoResolution, paidFetch, setMessages, setChatModel, ensureConvId],
   );
 
   // Regenerate the last answer: drop trailing assistant message(s), then resend
@@ -940,11 +958,14 @@ export function useFranklinChat(
       // omit it entirely so the upstream picks its own default.
       const ratios = VIDEO_MODEL_RATIOS[model];
       const aspectRatio = ratios && ratios.includes(videoRatio) ? videoRatio : undefined;
+      const resolutions = VIDEO_MODEL_RESOLUTIONS[model];
+      const resolution = resolutions && resolutions.includes(videoResolution) ? videoResolution : undefined;
       body = JSON.stringify({
         model,
         prompt,
         ...(useSeed ? { image_url: reference } : {}),
         ...(aspectRatio ? { aspect_ratio: aspectRatio } : {}),
+        ...(resolution ? { resolution } : {}),
       });
     } else {
       // music — gateway picks the model via `model`; the rest of the params are
@@ -1105,8 +1126,10 @@ export function useFranklinChat(
   // flyout. Empty / single-entry → UI hides the button.
   const imageSizes = IMAGE_MODEL_SIZES[imageModel] ?? [];
   // Same for video — only Seedance has an aspect-ratio list (xAI / Sora
-  // ignore the param). Empty → UI hides the button.
+  // ignore the param). Empty → UI hides the button. Same story for the
+  // resolution picker.
   const videoRatios = VIDEO_MODEL_RATIOS[videoModel] ?? [];
+  const videoResolutions = VIDEO_MODEL_RESOLUTIONS[videoModel] ?? [];
 
   return {
     isConnected,
@@ -1134,6 +1157,9 @@ export function useFranklinChat(
     videoRatio,
     setVideoRatio,
     videoRatios,
+    videoResolution,
+    setVideoResolution,
+    videoResolutions,
   };
 }
 
diff --git a/src/lib/try-i18n.tsx b/src/lib/try-i18n.tsx
index a051c81..63039df 100644
--- a/src/lib/try-i18n.tsx
+++ b/src/lib/try-i18n.tsx
@@ -25,6 +25,7 @@ export interface TryDict {
   video: string;
   music: string;
   ratio: string;
+  resolution: string;
   attachImage: string;
   attachChatOnly: string;
   attachRef: string;
@@ -162,6 +163,7 @@ const en: TryDict = {
   video: "Video",
   music: "Music",
   ratio: "Ratio",
+  resolution: "Resolution",
   attachImage: "Attach an image",
   attachChatOnly: "Attachments work in Chat mode",
   attachRef: "Attach a reference image (image-to-image)",
@@ -300,6 +302,7 @@ const zh: TryDict = {
   video: "视频",
   music: "音乐",
   ratio: "比例",
+  resolution: "清晰度",
   attachImage: "添加图片",
   attachChatOnly: "附件仅在对话模式可用",
   attachRef: "添加参考图（图生图）",
@@ -438,6 +441,7 @@ const es: TryDict = {
   video: "Video",
   music: "Música",
   ratio: "Proporción",
+  resolution: "Resolución",
   attachImage: "Adjuntar una imagen",
   attachChatOnly: "Los adjuntos funcionan en modo Chat",
   attachRef: "Adjunta una imagen de referencia (imagen a imagen)",

From 06b5cabc2193a9cb2f88fddc1f7d6ee5186c33ba Mon Sep 17 00:00:00 2001
From: 1bcMax <viewitter@gmail.com>
Date: Fri, 29 May 2026 18:14:57 -0400
Subject: [PATCH 3/3] Fix review findings: music attach drop, ratio flyout
 reuse, media timeouts/MIME

- Hide attach button in music mode (reference was accepted, thumbnailed, then
  silently dropped from the request, and falsely flipped needsWallet).
- Reset the aspect-ratio flyout on every mode change so an open menu no longer
  re-opens unbidden when re-entering image/video mode.
- Give music the longer (300s) poll budget instead of the 180s image timeout;
  long renders were killed after the user already paid.
- extractMediaUrl now sets the data-URI MIME by media kind (audio/mpeg,
  video/mp4, image/png) so a b64 audio fallback no longer mislabels itself as
  a PNG that <audio> can't decode.
- runMedia honors a modelOverride so image/video demo cases with a forced model
  no longer silently run on the currently-selected model.
---
 src/app/globals.css                 |  3 ++
 src/components/try/FranklinChat.tsx | 32 ++++++++++++-----
 src/hooks/use-franklin-chat.ts      | 55 +++++++++++++++++++++--------
 3 files changed, 66 insertions(+), 24 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 952307e..f94ffae 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3927,6 +3927,9 @@ h2.dark-h,
   justify-content: center;
 }
 .try-gen-skeleton.is-video { width: 420px; aspect-ratio: 16 / 9; }
+/* Music renders into a ~54px audio pill, not a square — size the skeleton to
+ * match so the layout doesn't jump when the <audio> element replaces it. */
+.try-gen-skeleton.is-music { width: 460px; aspect-ratio: auto; height: 54px; border-radius: 999px; }
 .try-gen-skeleton-icon { width: 30px; height: 30px; color: var(--fg-subtle); opacity: 0.6; }
 .try-gen-skeleton-shimmer {
   position: absolute;
diff --git a/src/components/try/FranklinChat.tsx b/src/components/try/FranklinChat.tsx
index 26d0572..e8d99a5 100644
--- a/src/components/try/FranklinChat.tsx
+++ b/src/components/try/FranklinChat.tsx
@@ -104,6 +104,15 @@ export function FranklinChat() {
   // and video mode (Seedance-only `aspect_ratio` list). Other modes / models
   // with a single ratio hide the button entirely.
   const [ratioOpen, setRatioOpen] = useState(false);
+  // Close the ratio flyout on any mode change — otherwise an open menu in image
+  // mode survives a return to chat and re-opens unbidden on the next image/video
+  // entry (the picker is merely hidden in chat, not unmounted-with-reset). Done
+  // via the "adjust state during render" pattern rather than an effect.
+  const [ratioMode, setRatioMode] = useState(mode);
+  if (ratioMode !== mode) {
+    setRatioMode(mode);
+    setRatioOpen(false);
+  }
   const ratioOptions: { ratio: string; value: string }[] =
     mode === "image"
       ? imageSizes.map((s) => ({ ratio: s.ratio, value: s.size }))
@@ -547,15 +556,20 @@ export function FranklinChat() {
                   className="try-file-input"
                   onChange={onPickFile}
                 />
-                <button
-                  className="try-tool-icon"
-                  onClick={() => fileRef.current?.click()}
-                  disabled={busy}
-                  aria-label={t.attachImage}
-                  title={mode === "video" ? t.attachSeed : mode === "image" ? t.attachRef : t.attachImage}
-                >
-                  <Plus className="h-[18px] w-[18px]" />
-                </button>
+                {/* Music ignores reference images, so don't offer an attach
+                    button there — it would accept an image, show a thumbnail,
+                    and silently drop it from the request. */}
+                {mode !== "music" && (
+                  <button
+                    className="try-tool-icon"
+                    onClick={() => fileRef.current?.click()}
+                    disabled={busy}
+                    aria-label={t.attachImage}
+                    title={mode === "video" ? t.attachSeed : mode === "image" ? t.attachRef : t.attachImage}
+                  >
+                    <Plus className="h-[18px] w-[18px]" />
+                  </button>
+                )}
                 <ModelSelect models={models} model={model} onChange={setModel} disabled={busy} />
                 {mode === "chat" ? (
                   <>
diff --git a/src/hooks/use-franklin-chat.ts b/src/hooks/use-franklin-chat.ts
index bd8bab0..edcc6c0 100644
--- a/src/hooks/use-franklin-chat.ts
+++ b/src/hooks/use-franklin-chat.ts
@@ -554,7 +554,7 @@ export function useFranklinChat(
       if (activeMode0 === "image" || activeMode0 === "video" || activeMode0 === "music") {
         const mediaConvId = ensureConvId();
         if (mediaAbortRef.current[mediaConvId]) return; // already generating here
-        void runMedia(mediaConvId, activeMode0, prompt, attachment);
+        void runMedia(mediaConvId, activeMode0, prompt, attachment, modelOverride);
         return;
       }
       if (inFlight.current) return;
@@ -708,7 +708,10 @@ export function useFranklinChat(
           }),
         );
         if (!res.ok) throw new Error(await errMsg(res));
-        const url = res.status === 202 ? await pollMedia(res, 180_000) : extractMediaUrl(await res.json());
+        const url =
+          res.status === 202
+            ? await pollMedia(res, 300_000, "music")
+            : extractMediaUrl(await res.json(), "music");
         return url ? `Music generated: ${url}` : "Music generation returned no audio.";
       }
       if (name === "get_market_price") {
@@ -923,7 +926,13 @@ export function useFranklinChat(
   // signs + submits, polls, writes the result — all pinned to `convId` and
   // tracked in `mediaJobs[convId]`, so it never touches the global chat run and
   // switching conversations leaves it (and other conversations) unaffected.
-  async function runMedia(convId: string, kind: "image" | "video" | "music", prompt: string, reference?: string) {
+  async function runMedia(
+    convId: string,
+    kind: "image" | "video" | "music",
+    prompt: string,
+    reference?: string,
+    modelOverride?: string,
+  ) {
     const abort = new AbortController();
     mediaAbortRef.current[convId] = abort;
     setMediaJobs((p) => ({ ...p, [convId]: { kind, phase: "generating" } }));
@@ -939,7 +948,8 @@ export function useFranklinChat(
     let body: string;
     if (kind === "image") {
       const useEdit = !!reference;
-      model = useEdit && !EDIT_SUPPORTED_IMAGE_MODELS.has(imageModel) ? "openai/gpt-image-2" : imageModel;
+      const baseModel = modelOverride ?? imageModel;
+      model = useEdit && !EDIT_SUPPORTED_IMAGE_MODELS.has(baseModel) ? "openai/gpt-image-2" : baseModel;
       endpoint = useEdit ? IMAGE_EDIT_ENDPOINT : IMAGE_ENDPOINT;
       // Edit endpoint is locked to 1024² (the only size every edit-capable
       // model accepts); text-to-image uses the user's selected aspect ratio,
@@ -952,7 +962,8 @@ export function useFranklinChat(
         : JSON.stringify({ model, prompt, size: validSize, n: 1 });
     } else if (kind === "video") {
       const useSeed = !!reference;
-      model = useSeed && !VIDEO_IMAGE_INPUT_MODELS.has(videoModel) ? DEFAULT_I2V_MODEL : videoModel;
+      const baseModel = modelOverride ?? videoModel;
+      model = useSeed && !VIDEO_IMAGE_INPUT_MODELS.has(baseModel) ? DEFAULT_I2V_MODEL : baseModel;
       endpoint = VIDEO_ENDPOINT;
       // aspect_ratio is token360 (Seedance) only; for other providers we
       // omit it entirely so the upstream picks its own default.
@@ -970,7 +981,7 @@ export function useFranklinChat(
     } else {
       // music — gateway picks the model via `model`; the rest of the params are
       // optional (duration / lyrics / instrumental). Reference is ignored.
-      model = musicModel;
+      model = modelOverride ?? musicModel;
       endpoint = MUSIC_ENDPOINT;
       body = JSON.stringify({ model, prompt });
     }
@@ -1006,7 +1017,7 @@ export function useFranklinChat(
         url = await pollMediaJob(convId, kind, res, abort.signal, model);
       } else {
         if (!res.ok) throw new Error(await errMsg(res));
-        url = extractMediaUrl(await res.json());
+        url = extractMediaUrl(await res.json(), kind);
       }
       if (!url)
         throw new Error(
@@ -1045,7 +1056,7 @@ export function useFranklinChat(
   ): Promise<string | undefined> {
     const submit = await submitRes.json();
     const pollPath: string | undefined = submit.poll_url;
-    if (!pollPath) return extractMediaUrl(submit);
+    if (!pollPath) return extractMediaUrl(submit, kind);
     const proxied = pollPath.startsWith("/api/blockrun")
       ? pollPath
       : `/api/blockrun${pollPath.replace(/^.*\/api/, "")}`;
@@ -1053,7 +1064,8 @@ export function useFranklinChat(
 
     let sig: string | null = null;
     const start = Date.now();
-    const maxMs = kind === "video" ? 300_000 : 180_000;
+    // Image jobs settle quickly; video and music renders can run for minutes.
+    const maxMs = kind === "image" ? 180_000 : 300_000;
     while (Date.now() - start < maxMs) {
       if (signal.aborted) throw new DOMException("Aborted", "AbortError");
       const headers: Record<string, string> = {};
@@ -1073,7 +1085,7 @@ export function useFranklinChat(
       }
       if (!r.ok) throw new Error(await errMsg(r));
       const j = await r.json();
-      if (j.status === "completed" || j.status === "settled" || j.data) return extractMediaUrl(j);
+      if (j.status === "completed" || j.status === "settled" || j.data) return extractMediaUrl(j, kind);
       await new Promise((res) => setTimeout(res, 4000));
     }
     throw new Error("Generation is taking too long — try again.");
@@ -1081,10 +1093,14 @@ export function useFranklinChat(
 
   // Slow-path poll for image/video jobs. First poll typically 402 — sign once
   // and reuse that signature for every subsequent poll (server settles on done).
-  async function pollMedia(submitRes: Response, maxMs: number): Promise<string | undefined> {
+  async function pollMedia(
+    submitRes: Response,
+    maxMs: number,
+    kind: "image" | "video" | "music" = "image",
+  ): Promise<string | undefined> {
     const submit = await submitRes.json();
     const pollPath: string | undefined = submit.poll_url;
-    if (!pollPath) return extractMediaUrl(submit);
+    if (!pollPath) return extractMediaUrl(submit, kind);
     const proxied = pollPath.startsWith("/api/blockrun")
       ? pollPath
       : `/api/blockrun${pollPath.replace(/^.*\/api/, "")}`;
@@ -1112,7 +1128,7 @@ export function useFranklinChat(
       const j = await r.json();
       const st = j.status;
       if (st === "completed" || st === "settled" || j.data) {
-        return extractMediaUrl(j);
+        return extractMediaUrl(j, kind);
       }
       await new Promise((res) => setTimeout(res, 4000));
     }
@@ -1196,12 +1212,21 @@ function extractSources(resultStr: string): { title: string; url: string }[] {
   return out.filter((s) => (seen.has(s.url) ? false : (seen.add(s.url), true))).slice(0, 12);
 }
 
-function extractMediaUrl(json: Record<string, unknown>): string | undefined {
+function extractMediaUrl(
+  json: Record<string, unknown>,
+  kind: "image" | "video" | "music" = "image",
+): string | undefined {
   const data = (json.data as Array<Record<string, string>>) || [];
   const first = data[0];
   if (!first) return undefined;
   if (first.url) return first.url;
-  if (first.b64_json) return `data:image/png;base64,${first.b64_json}`;
+  // Some providers return raw bytes as base64 instead of a hosted URL. The MIME
+  // must match the media kind — wrapping audio as image/png yields an <audio>
+  // element that silently fails to decode.
+  if (first.b64_json) {
+    const mime = kind === "music" ? "audio/mpeg" : kind === "video" ? "video/mp4" : "image/png";
+    return `data:${mime};base64,${first.b64_json}`;
+  }
   return undefined;
 }