feat: Add app metadata endpoint and fix instance naming

hosting/pkg/src/endpoints/appGet.ts

@@ -0,0 +1,69 @@
+import { OpenAPIRoute, contentJson } from "chanfana";
+import { Context } from "hono";
+import { z } from "zod";
+
+// Public metadata response - no sensitive data
+const AppMetadataSchema = z.object({
+  slug: z.string(),
+  title: z.string().optional(),
+  remixOf: z.string().nullable().optional(),
+  hasScreenshot: z.boolean(),
+  hasIcon: z.boolean(),
+});
+
+export class AppGet extends OpenAPIRoute {
+  schema = {
+    tags: ["Apps"],
+    summary: "Get app metadata by slug",
+    request: {
+      params: z.object({
+        slug: z.string(),
+      }),
+    },
+    responses: {
+      "200": {
+        description: "Returns app metadata",
+        ...contentJson(
+          z.object({
+            success: z.boolean(),
+            app: AppMetadataSchema,
+          }),
+        ),
+      },
+      "404": {
+        description: "App not found",
+        ...contentJson(
+          z.object({
+            error: z.string(),
+          }),
+        ),
+      },
+    },
+  };
+
+  async handle(c: Context<{ Bindings: Env }>) {
+    const { slug } = c.req.param();
+    const kv = c.env.KV;
+
+    // Fetch app from KV by slug
+    const appData = await kv.get(slug);
+
+    if (!appData) {
+      return c.json({ error: "App not found" }, 404);
+    }
+
+    const app = JSON.parse(appData);
+
+    // Return only public metadata - no code, userId, or chatId
+    return c.json({
+      success: true,
+      app: {
+        slug: app.slug,
+        title: app.title || slug,
+        remixOf: app.remixOf || null,
+        hasScreenshot: app.hasScreenshot || false,
+        hasIcon: app.hasIcon || false,
+      },
+    });
+  }
+}

hosting/pkg/src/index.ts

@@ -1,5 +1,6 @@
 import { fromHono } from "chanfana";
 import { AppCreate } from "./endpoints/appCreate.js";
+import { AppGet } from "./endpoints/appGet.js";
 import {
   ClaudeChat,
   ImageEdit,
@@ -86,6 +87,7 @@ openapi.use("/api/*", async (c, next) => {
 
 // Register OpenAPI endpoints
 openapi.post("/api/apps", AppCreate);
+openapi.get("/api/apps/:slug", AppGet);
 
 // Register OpenAI image endpoints
 openapi.post("/api/openai-image/generate", ImageGenerate);
@@ -107,6 +109,7 @@ export default {
 
 // Test exports - expose internal modules for testing
 export { AppCreate } from "./endpoints/appCreate.js";
+export { AppGet } from "./endpoints/appGet.js";
 // Re-export from hosting-base
 export {
   // the only import of these is tests, they should take direct from hosting-base, and then remove these lines

prompts/pkg/chat.ts

@@ -215,5 +215,5 @@ export interface ChatInterfaceProps extends ChatState {
 export interface SessionSidebarProps {
   isVisible: boolean;
   onClose: () => void;
-  sessionId: string;
+  sessionId?: string;
 }

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

@@ -32,11 +32,7 @@ export default function BrutalistLayout({
   return (
     <div className="page-grid-background grid-background min-h-screen min-h-[100svh] min-h-[100dvh] w-full relative">
       {/* SessionSidebar */}
-      <SessionSidebar
-        isVisible={isSidebarVisible}
-        onClose={closeSidebar}
-        sessionId=""
-      />
+      <SessionSidebar isVisible={isSidebarVisible} onClose={closeSidebar} />
 
       {/* Hamburger menu button - fixed top left */}
       <div className="absolute top-4 left-4">

vibes.diy/pkg/app/routes/vibe-viewer.tsx

@@ -55,11 +55,44 @@ function VibeInstanceViewerContent() {
     const fullId = `${titleId}-${installId}`;
     const instanceExists = instances.some((inst) => inst._id === fullId);
 
-    // Create instance if it doesn't exist (lazy creation for Fresh Data)
-    // Pass the installId explicitly to ensure correct _id is created
+    // Create instance if it doesn't exist - fetch real title from hosting API
     if (!instanceExists) {
-      // Let error throw - no catch handler
-      createInstance("Fresh Data", {}, installId);
+      let cancelled = false;
+
+      const fetchAndCreateInstance = async () => {
+        try {
+          // Fetch app metadata from hosting API
+          const apiBaseUrl =
+            import.meta.env.VITE_API_BASE_URL ||
+            "https://vibes-hosting-v2-preview.jchris.workers.dev";
+          const response = await fetch(`${apiBaseUrl}/api/apps/${titleId}`);
+
+          let title = titleId; // Fallback to slug if fetch fails
+          if (response.ok) {
+            const data = (await response.json()) as {
+              app?: { title?: string };
+            };
+            title = data.app?.title || titleId;
+          }
+
+          if (!cancelled) {
+            // Create instance with real title
+            await createInstance(title, {}, installId);
+          }
+        } catch (error) {
+          // If fetch fails, use slug as title
+          console.warn("Failed to fetch app metadata, using slug:", error);
+          if (!cancelled) {
+            await createInstance(titleId, {}, installId);
+          }
+        }
+      };
+
+      void fetchAndCreateInstance();
+
+      return () => {
+        cancelled = true;
+      };
     }
   }, [titleId, installId, instances, createInstance, isCreating]);