Display vibe icons when available

jchris · jchris · commit 5ed0f5ba2fe0 · 2025-11-28T06:24:18.000-08:00
diff --git a/hosting/base/types.ts b/hosting/base/types.ts
@@ -16,6 +16,9 @@ const App = z.object({
   email: z.string().nullable().optional(),
   hasScreenshot: z.boolean().nullable().optional(),
   screenshotKey: z.string().nullable().optional(),
+  summary: z.string().nullable().optional(),
+  iconKey: z.string().nullable().optional(),
+  hasIcon: z.boolean().nullable().optional(),
   remixOf: z.string().nullable().optional(),
   updateCount: z.number().nullable().optional(),
   shareToFirehose: z.boolean().nullable().optional(),
diff --git a/hosting/pkg/src/endpoints/appCreate.ts b/hosting/pkg/src/endpoints/appCreate.ts
@@ -4,6 +4,7 @@ import { Context } from "hono";
 import { z } from "zod";
 import { App, PublishEvent } from "../types.js";
 import { generateVibeSlug } from "@vibes.diy/hosting-base";
+import { callAI, imageGen } from "call-ai";
 
 // Variables type for context (was previously in deleted auth middleware)
 interface Variables {
@@ -42,6 +43,102 @@ 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;
+  };
+
+  return (
+    typedEnv.CALLAI_API_KEY ||
+    typedEnv.OPENROUTER_API_KEY ||
+    typedEnv.SERVER_OPENROUTER_API_KEY
+  );
+}
+
+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;
+  }
+
+  const buffer = Buffer.from(base64Data, "base64");
+  return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
+}
+
+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");
+    return null;
+  }
+
+  try {
+    const contextPieces = [
+      app.title ? `Title: ${app.title}` : null,
+      app.prompt ? `Prompt: ${app.prompt}` : null,
+      app.code ? `Code snippet: ${app.code.slice(0, 1000)}` : null,
+    ].filter(Boolean);
+
+    const messages = [
+      {
+        role: "system" as const,
+        content:
+          "You write concise, single-sentence summaries of small web apps. Keep it under 35 words, highlight the main category and what the app helps users do.",
+      },
+      {
+        role: "user" as const,
+        content: contextPieces.join("\n\n"),
+      },
+    ];
+
+    const response = await callAI(messages, { apiKey });
+    return typeof response === "string" ? response.trim() : null;
+  } catch (error) {
+    console.error("Error generating app summary:", error);
+    return null;
+  }
+}
+
+async function generateAppIcon(
+  app: z.infer<typeof App>,
+  kv: KVNamespace,
+  apiKey?: string,
+): Promise<string | null> {
+  if (!apiKey) {
+    console.warn("⚠️ CALLAI_API_KEY not set - skipping app icon generation");
+    return null;
+  }
+
+  try {
+    const category = app.title || app.name || "app";
+    const prompt = `Minimal black icon on a white background, enclosed in a circle, representing ${category}. Use clear, text-free imagery to convey the category. Avoid letters or numbers.`;
+    const response = await imageGen(prompt, { apiKey, size: "512x512" });
+    const iconBase64 = response.data?.[0]?.b64_json;
+
+    if (!iconBase64) {
+      console.warn("⚠️ No icon data returned from imageGen");
+      return null;
+    }
+
+    const iconArrayBuffer = base64ToArrayBuffer(iconBase64);
+    const iconKey = `${app.slug}-icon`;
+    await kv.put(iconKey, iconArrayBuffer);
+    return iconKey;
+  } catch (error) {
+    console.error("Error generating app icon:", error);
+    return null;
+  }
+}
+
 // Request body schema for app creation
 const AppCreateRequestSchema = z.object({
   chatId: z.string(),
@@ -102,6 +199,7 @@ export class AppCreate extends OpenAPIRoute {
 
     // Get the KV namespace from the context
     const kv = c.env.KV;
+    const callAiApiKey = getCallAiApiKey(c.env);
 
     // Check if the app with this chatId already exists
     const existingApp = await kv.get(app.chatId);
@@ -210,6 +308,9 @@ export class AppCreate extends OpenAPIRoute {
         title: app.title || `App ${slug}`,
         remixOf: app.remixOf === undefined ? null : app.remixOf,
         hasScreenshot: false,
+        summary: null,
+        iconKey: null,
+        hasIcon: false,
         shareToFirehose: app.shareToFirehose,
         customDomain: app.customDomain || null,
       };
@@ -231,6 +332,21 @@ export class AppCreate extends OpenAPIRoute {
       savedApp = appToSave;
     }
 
+    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;
+    }
+
+    // Persist any AI-enriched fields
+    await kv.put(savedApp.chatId, JSON.stringify(savedApp));
+    await kv.put(savedApp.slug, JSON.stringify(savedApp));
+
     // Send event to queue for processing
     try {
       if (!c.env.PUBLISH_QUEUE) {
diff --git a/hosting/pkg/src/renderApp.ts b/hosting/pkg/src/renderApp.ts
@@ -224,8 +224,12 @@ function parseRangeHeader(
   return { start, end };
 }
 
-// Shared screenshot handler logic
-async function handleScreenshotRequest(c: Context, includeBody = true) {
+// Shared image asset handler logic (screenshots/icons)
+async function handleImageRequest(
+  c: Context,
+  keySuffix: string,
+  includeBody = true,
+) {
   // Extract subdomain from the request URL
   const url = new URL(c.req.url);
   const hostname = url.hostname;
@@ -270,17 +274,17 @@ async function handleScreenshotRequest(c: Context, includeBody = true) {
     appSlug = parsed.appSlug;
   }
 
-  // Calculate screenshot key based on app slug (screenshots are always for the base app)
-  const screenshotKey = `${appSlug}-screenshot`;
+  // Calculate asset key based on app slug
+  const assetKey = `${appSlug}-${keySuffix}`;
 
-  // Get the screenshot from KV
-  const screenshot = await kv.get(screenshotKey, "arrayBuffer");
+  // Get the asset from KV
+  const asset = await kv.get(assetKey, "arrayBuffer");
 
-  if (!screenshot) {
+  if (!asset) {
     return c.notFound();
   }
 
-  const fileSize = screenshot.byteLength;
+  const fileSize = asset.byteLength;
   const rangeHeader = c.req.header("Range");
 
   // Handle Range requests
@@ -300,7 +304,7 @@ async function handleScreenshotRequest(c: Context, includeBody = true) {
 
     const { start, end } = range;
     const contentLength = end - start + 1;
-    const chunk = screenshot.slice(start, end + 1);
+    const chunk = asset.slice(start, end + 1);
 
     const headers = {
       "Content-Type": "image/png",
@@ -326,17 +330,29 @@ async function handleScreenshotRequest(c: Context, includeBody = true) {
     "Access-Control-Allow-Origin": "*",
   };
 
-  // Return the screenshot with proper headers, optionally including body
-  return new Response(includeBody ? screenshot : null, { headers });
+  // Return the asset with proper headers, optionally including body
+  return new Response(includeBody ? asset : null, { headers });
 }
 
 // Route to serve app screenshots as PNG images (GET and HEAD)
 app.all("/screenshot.png", async (c) => {
   const method = c.req.method;
   if (method === "GET") {
-    return handleScreenshotRequest(c, true);
+    return handleImageRequest(c, "screenshot", true);
   } else if (method === "HEAD") {
-    return handleScreenshotRequest(c, false);
+    return handleImageRequest(c, "screenshot", false);
+  } else {
+    return c.json({ error: "Method not allowed" }, 405);
+  }
+});
+
+// Route to serve app icons as PNG images (GET and HEAD)
+app.all("/icon.png", async (c) => {
+  const method = c.req.method;
+  if (method === "GET") {
+    return handleImageRequest(c, "icon", true);
+  } else if (method === "HEAD") {
+    return handleImageRequest(c, "icon", false);
   } else {
     return c.json({ error: "Method not allowed" }, 405);
   }
diff --git a/hosting/pkg/src/types.ts b/hosting/pkg/src/types.ts
@@ -15,6 +15,9 @@ const App = z.object({
   email: z.string().nullable().optional(),
   hasScreenshot: z.boolean().nullable().optional(),
   screenshotKey: z.string().nullable().optional(),
+  summary: z.string().nullable().optional(),
+  iconKey: z.string().nullable().optional(),
+  hasIcon: z.boolean().nullable().optional(),
   remixOf: z.string().nullable().optional(),
   updateCount: z.number().nullable().optional(),
   shareToFirehose: z.boolean().nullable().optional(),
diff --git a/hosting/tests/unit/endpoints/appCreate.test.ts b/hosting/tests/unit/endpoints/appCreate.test.ts
@@ -1,13 +1,48 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import {
+  describe,
+  it,
+  expect,
+  beforeEach,
+  afterEach,
+  beforeAll,
+  afterAll,
+  vi,
+} from "vitest";
 import { AppCreate } from "@vibes.diy/hosting";
 import { OpenAPIRoute } from "chanfana";
 
+vi.mock("call-ai", () => {
+  const mockImageBase64 =
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P///wAHAwJ/i+wW3wAAAABJRU5ErkJggg==";
+
+  return {
+    callAI: vi.fn().mockResolvedValue("Mock summary"),
+    imageGen: vi.fn().mockResolvedValue({
+      data: [{ b64_json: mockImageBase64 }],
+    }),
+  };
+});
+
+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;
   let mockKV: {
     get: (key: string, type?: string) => Promise<string | ArrayBuffer | null>;
-    put: (key: string, value: string) => Promise<void>;
+    put: (key: string, value: unknown) => Promise<void>;
   };
   let mockContext: {
     env: { KV: typeof mockKV };
@@ -57,6 +92,7 @@ describe("AppCreate endpoint", () => {
       env: {
         KV: mockKV,
         PUBLISH_QUEUE: mockQueue,
+        CALLAI_API_KEY: "test-key",
         SERVER_OPENROUTER_API_KEY: "test-prov-key",
       },
       get: vi.fn().mockReturnValue({
@@ -111,6 +147,9 @@ describe("AppCreate endpoint", () => {
     expect(result.success).toBe(true);
     expect(result.app).toBeDefined();
     expect(result.app.title).toBe("Test App");
+    expect(result.app.summary).toBe("Mock summary");
+    expect(result.app.hasIcon).toBe(true);
+    expect(result.app.iconKey).toBeTruthy();
 
     // Verify Discord webhook was NOT called directly
     expect(mockFetch).not.toHaveBeenCalled();
diff --git a/hosting/tests/unit/queue.test.ts b/hosting/tests/unit/queue.test.ts
@@ -1,11 +1,46 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import {
+  describe,
+  it,
+  expect,
+  beforeEach,
+  afterEach,
+  beforeAll,
+  afterAll,
+  vi,
+} from "vitest";
 import { AppCreate, PublishEvent } from "@vibes.diy/hosting";
 import type { OpenAPIRoute } from "chanfana";
 
+vi.mock("call-ai", () => {
+  const mockImageBase64 =
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P///wAHAwJ/i+wW3wAAAABJRU5ErkJggg==";
+
+  return {
+    callAI: vi.fn().mockResolvedValue("Mock summary"),
+    imageGen: vi.fn().mockResolvedValue({
+      data: [{ b64_json: mockImageBase64 }],
+    }),
+  };
+});
+
+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>;
-  put: (key: string, value: string) => Promise<void>;
+  put: (key: string, value: unknown) => Promise<void>;
 }
 
 interface MockQueue {
@@ -16,6 +51,7 @@ interface MockContext {
   env: {
     KV: MockKV;
     PUBLISH_QUEUE: MockQueue;
+    CALLAI_API_KEY?: string;
   };
   get: (key: string) => { email: string; userId: string };
   req: {
@@ -49,6 +85,7 @@ describe("Queue functionality", () => {
       env: {
         KV: mockKV,
         PUBLISH_QUEUE: mockQueue,
+        CALLAI_API_KEY: "test-key",
       },
       get: vi.fn().mockReturnValue({
         email: "test@example.com",
@@ -117,6 +154,8 @@ describe("Queue functionality", () => {
       expect(event.app.code).toBe("console.log('hello');");
       expect(event.app.title).toBe("Test App");
       expect(event.app.userId).toBe("user-123");
+      expect(event.app.summary).toBe("Mock summary");
+      expect(event.app.hasIcon).toBe(true);
       expect(event.metadata.isUpdate).toBe(false);
       expect(event.metadata.timestamp).toBeTypeOf("number");
     }
diff --git a/vibes.diy/pkg/app/components/PublishedVibeCard.tsx b/vibes.diy/pkg/app/components/PublishedVibeCard.tsx
diff --git a/vibes.diy/pkg/app/utils/vibeUrls.ts b/vibes.diy/pkg/app/utils/vibeUrls.ts
