fix: improve AI key selection and image handling

- Add typed list of AI API key env vars and iterate to pick first available
- Remove Node Buffer-based base64 fallback and require runtime `atob` support
- Simplify tests by dropping global `atob` polyfill setup/teardown
- Detect image content type (PNG/JPEG/GIF/WebP) from binary data in renderApp
- Use detected content type for full and ranged image responses; fix 416 to return text/plain
- Preserve existing app summaries/icons when present and only generate missing ones
- Harden PublishedVibeCard image load/error handlers to avoid source flip loops and rely on event `src`

Author: CharlieHelps

hosting/pkg/src/endpoints/appCreate.ts

@@ -6,6 +6,14 @@ import { App, PublishEvent } from "../types.js";
 import { generateVibeSlug } from "@vibes.diy/hosting-base";
 import { callAI, imageGen } from "call-ai";
 
+const AI_API_KEY_ENV_VARS = [
+  "CALLAI_API_KEY",
+  "OPENROUTER_API_KEY",
+  "SERVER_OPENROUTER_API_KEY",
+] as const;
+
+type AiApiKeyEnvVar = (typeof AI_API_KEY_ENV_VARS)[number];
+
 // Variables type for context (was previously in deleted auth middleware)
 interface Variables {
   user: { sub?: string; userId?: string; email?: string } | null;
@@ -44,40 +52,40 @@ async function processScreenshot(
 }
 
 function getCallAiApiKey(env: Env): string | undefined {
-  const typedEnv = env as Env & {
-    CALLAI_API_KEY?: string;
-    OPENROUTER_API_KEY?: string;
-    SERVER_OPENROUTER_API_KEY?: string;
-  };
+  const typedEnv = env as Env & Record<AiApiKeyEnvVar, string | undefined>;
 
-  return (
-    typedEnv.CALLAI_API_KEY ||
-    typedEnv.OPENROUTER_API_KEY ||
-    typedEnv.SERVER_OPENROUTER_API_KEY
-  );
+  for (const key of AI_API_KEY_ENV_VARS) {
+    const value = typedEnv[key];
+    if (value) return value;
+  }
+
+  return undefined;
 }
 
 function base64ToArrayBuffer(base64Data: string) {
-  if (typeof atob === "function") {
-    const binaryData = atob(base64Data);
-    const len = binaryData.length;
-    const bytes = new Uint8Array(len);
-    for (let i = 0; i < len; i++) {
-      bytes[i] = binaryData.charCodeAt(i);
-    }
-    return bytes.buffer;
+  if (typeof atob !== "function") {
+    throw new Error(
+      "base64ToArrayBuffer: atob is not available in this runtime",
+    );
   }
 
-  const buffer = Buffer.from(base64Data, "base64");
-  return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
+  const binaryData = atob(base64Data);
+  const len = binaryData.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryData.charCodeAt(i);
+  }
+  return bytes.buffer;
 }
 
 async function generateAppSummary(
   app: z.infer<typeof App>,
   apiKey?: string,
 ): Promise<string | null> {
   if (!apiKey) {
-    console.warn("⚠️ CALLAI_API_KEY not set - skipping app summary generation");
+    console.warn(
+      `⚠️ AI API key not set (${AI_API_KEY_ENV_VARS.join(", ")}) - skipping app summary generation`,
+    );
     return null;
   }
 
@@ -114,7 +122,9 @@ async function generateAppIcon(
   apiKey?: string,
 ): Promise<string | null> {
   if (!apiKey) {
-    console.warn("⚠️ CALLAI_API_KEY not set - skipping app icon generation");
+    console.warn(
+      `⚠️ AI API key not set (${AI_API_KEY_ENV_VARS.join(", ")}) - skipping app icon generation`,
+    );
     return null;
   }
 
@@ -332,15 +342,23 @@ export class AppCreate extends OpenAPIRoute {
       savedApp = appToSave;
     }
 
-    const summary = await generateAppSummary(savedApp, callAiApiKey);
-    if (summary) {
-      savedApp.summary = summary;
+    const hasSummary =
+      typeof savedApp.summary === "string" &&
+      savedApp.summary.trim().length > 0;
+    if (!hasSummary) {
+      const summary = await generateAppSummary(savedApp, callAiApiKey);
+      if (summary) {
+        savedApp.summary = summary;
+      }
     }
 
-    const iconKey = await generateAppIcon(savedApp, kv, callAiApiKey);
-    if (iconKey) {
-      savedApp.iconKey = iconKey;
-      savedApp.hasIcon = true;
+    const hasIcon = Boolean(savedApp.hasIcon && savedApp.iconKey);
+    if (!hasIcon) {
+      const iconKey = await generateAppIcon(savedApp, kv, callAiApiKey);
+      if (iconKey) {
+        savedApp.iconKey = iconKey;
+        savedApp.hasIcon = true;
+      }
     }
 
     // Persist any AI-enriched fields

hosting/pkg/src/renderApp.ts

@@ -224,6 +224,61 @@ function parseRangeHeader(
   return { start, end };
 }
 
+function detectImageContentType(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+
+  if (
+    bytes.length >= 8 &&
+    bytes[0] === 0x89 &&
+    bytes[1] === 0x50 &&
+    bytes[2] === 0x4e &&
+    bytes[3] === 0x47 &&
+    bytes[4] === 0x0d &&
+    bytes[5] === 0x0a &&
+    bytes[6] === 0x1a &&
+    bytes[7] === 0x0a
+  ) {
+    return "image/png";
+  }
+
+  if (
+    bytes.length >= 3 &&
+    bytes[0] === 0xff &&
+    bytes[1] === 0xd8 &&
+    bytes[2] === 0xff
+  ) {
+    return "image/jpeg";
+  }
+
+  if (
+    bytes.length >= 6 &&
+    bytes[0] === 0x47 &&
+    bytes[1] === 0x49 &&
+    bytes[2] === 0x46 &&
+    bytes[3] === 0x38 &&
+    (bytes[4] === 0x39 || bytes[4] === 0x37) &&
+    bytes[5] === 0x61
+  ) {
+    return "image/gif";
+  }
+
+  if (
+    bytes.length >= 12 &&
+    bytes[0] === 0x52 && // R
+    bytes[1] === 0x49 && // I
+    bytes[2] === 0x46 && // F
+    bytes[3] === 0x46 && // F
+    bytes[8] === 0x57 && // W
+    bytes[9] === 0x45 && // E
+    bytes[10] === 0x42 && // B
+    bytes[11] === 0x50 // P
+  ) {
+    return "image/webp";
+  }
+
+  return "application/octet-stream";
+}
+
 // Shared image asset handler logic (screenshots/icons)
 async function handleImageRequest(
   c: Context,
@@ -285,6 +340,7 @@ async function handleImageRequest(
   }
 
   const fileSize = asset.byteLength;
+  const contentType = detectImageContentType(asset);
   const rangeHeader = c.req.header("Range");
 
   // Handle Range requests
@@ -297,7 +353,7 @@ async function handleImageRequest(
         status: 416,
         headers: {
           "Content-Range": `bytes */${fileSize}`,
-          "Content-Type": "image/png",
+          "Content-Type": "text/plain; charset=utf-8",
         },
       });
     }
@@ -307,7 +363,7 @@ async function handleImageRequest(
     const chunk = asset.slice(start, end + 1);
 
     const headers = {
-      "Content-Type": "image/png",
+      "Content-Type": contentType,
       "Content-Length": contentLength.toString(),
       "Content-Range": `bytes ${start}-${end}/${fileSize}`,
       "Accept-Ranges": "bytes",
@@ -323,7 +379,7 @@ async function handleImageRequest(
 
   // Standard GET/HEAD request - return full file
   const headers = {
-    "Content-Type": "image/png",
+    "Content-Type": contentType,
     "Content-Length": fileSize.toString(),
     "Accept-Ranges": "bytes",
     "Cache-Control": "public, max-age=86400",

hosting/tests/unit/endpoints/appCreate.test.ts

@@ -1,13 +1,4 @@
-import {
-  describe,
-  it,
-  expect,
-  beforeEach,
-  afterEach,
-  beforeAll,
-  afterAll,
-  vi,
-} from "vitest";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { AppCreate } from "@vibes.diy/hosting";
 import { OpenAPIRoute } from "chanfana";
 
@@ -23,20 +14,6 @@ vi.mock("call-ai", () => {
   };
 });
 
-const originalAtob = global.atob;
-
-beforeAll(() => {
-  if (typeof global.atob !== "function") {
-    global.atob = (data: string) => Buffer.from(data, "base64").toString("binary");
-  }
-});
-
-afterAll(() => {
-  if (originalAtob) {
-    global.atob = originalAtob;
-  }
-});
-
 describe("AppCreate endpoint", () => {
   let originalFetch: typeof global.fetch;
   let mockFetch: typeof global.fetch;

hosting/tests/unit/queue.test.ts

@@ -1,13 +1,4 @@
-import {
-  describe,
-  it,
-  expect,
-  beforeEach,
-  afterEach,
-  beforeAll,
-  afterAll,
-  vi,
-} from "vitest";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { AppCreate, PublishEvent } from "@vibes.diy/hosting";
 import type { OpenAPIRoute } from "chanfana";
 
@@ -23,20 +14,6 @@ vi.mock("call-ai", () => {
   };
 });
 
-const originalAtob = global.atob;
-
-beforeAll(() => {
-  if (typeof global.atob !== "function") {
-    global.atob = (data: string) => Buffer.from(data, "base64").toString("binary");
-  }
-});
-
-afterAll(() => {
-  if (originalAtob) {
-    global.atob = originalAtob;
-  }
-});
-
 // Mock types
 interface MockKV {
   get: (key: string, type?: string) => Promise<string | ArrayBuffer | null>;

vibes.diy/pkg/app/components/PublishedVibeCard.tsx

@@ -27,15 +27,25 @@ export default function PublishedVibeCard({
     setUsingIcon(true);
   }, [iconUrl]);
 
-  const handleImageError = () => {
-    if (imageSrc !== screenshotUrl) {
-      setImageSrc(screenshotUrl);
-      setUsingIcon(false);
+  const handleImageError: React.ReactEventHandler<HTMLImageElement> = (
+    event,
+  ) => {
+    const failedSrc = event.currentTarget.src;
+
+    // If the screenshot also fails, don't loop between sources
+    if (failedSrc === screenshotUrl) {
+      return;
     }
+
+    setImageSrc(screenshotUrl);
+    setUsingIcon(false);
   };
 
-  const handleImageLoad = () => {
-    setUsingIcon(imageSrc === iconUrl);
+  const handleImageLoad: React.ReactEventHandler<HTMLImageElement> = (
+    event,
+  ) => {
+    const loadedSrc = event.currentTarget.src;
+    setUsingIcon(loadedSrc === iconUrl);
   };
   const linkUrl = `/vibe/${slug}`;
 
@@ -82,7 +92,11 @@ export default function PublishedVibeCard({
           <div className="relative z-10 flex h-48 w-full justify-center py-2">
             <img
               src={imageSrc}
-              alt={usingIcon ? `Icon for ${vibeName}` : `Screenshot from ${vibeName}`}
+              alt={
+                usingIcon
+                  ? `Icon for ${vibeName}`
+                  : `Screenshot from ${vibeName}`
+              }
               className="max-h-full max-w-full object-contain"
               loading="lazy"
               onError={handleImageError}