Merge pull request #55 from homanp/cursor/fix-prod-widget-proxy-cache

fix production widget proxy stability

Author: homanp

src/app/api/chat/route.ts

@@ -106,7 +106,17 @@ Utility: \`import { cn } from "@/lib/utils";\`
 
 ## Data Fetching
 
-For external APIs, use the CORS proxy provided by the host app:
+Only fetch live external data when the user clearly asks for current, remote, or API-backed data.
+
+Never invent API endpoints from memory, and never copy a sibling widget's API URL without re-verifying that it is still valid.
+
+If the \`web_search\` tool is available, use it to verify the current official API docs before writing network code.
+
+If you cannot verify a stable public endpoint, or the API requires auth, rate-limits aggressively, or looks unofficial, ask the user for the API URL/key or build the widget with mock/sample data instead of guessing.
+
+Shared production hosts are often rate-limited by public/demo endpoints, so avoid undocumented or flaky sources unless the user explicitly asked for that exact source and you verified it.
+
+When you do need a verified external API, use the CORS proxy provided by the host app:
 \`\`\`tsx
 const res = await fetch("/api/proxy?url=" + encodeURIComponent("https://api.example.com/data"));
 const data = await res.json();
@@ -133,7 +143,7 @@ Use \`useEffect\` with \`setInterval\` for polling. Always handle loading and er
 
 ## Dashboard Awareness
 
-You are building one widget within a larger dashboard. Use \`listDashboardWidgets\` to see what other widgets exist — their titles, descriptions, and whether they have code. Use \`readWidgetCode\` to inspect a sibling widget's source code when you need to match API patterns, data formats, or styling conventions.
+You are building one widget within a larger dashboard. Use \`listDashboardWidgets\` to see what other widgets exist — their titles, descriptions, and whether they have code. Use \`readWidgetCode\` to inspect a sibling widget's source code when you need to match layout, styling, or data shapes, but treat any sibling network code as potentially stale until you verify it.
 
 Design your widget to complement the others. Don't duplicate what they already show.
 
@@ -247,7 +257,7 @@ export async function POST(request: Request) {
 
   const readWidgetCodeTool = tool({
     description:
-      "Read the source code of another widget on the dashboard. Use this to match API patterns, data formats, or styling conventions used by sibling widgets.",
+      "Read the source code of another widget on the dashboard. Use this to match styling or data shapes, but do not blindly reuse sibling API endpoints without re-verifying them.",
     inputSchema: z.object({
       targetWidgetId: z.string().describe("The ID of the sibling widget to read"),
       path: z

src/app/api/proxy/route.ts

@@ -1,5 +1,101 @@
 import { scanUrl } from "@/lib/brin";
 
+interface ProxyResponsePayload {
+  body: Uint8Array;
+  contentType: string;
+  status: number;
+}
+
+interface CachedProxyResponse extends ProxyResponsePayload {
+  freshUntil: number;
+  staleUntil: number;
+}
+
+const CACHE_TTL_MS = 30_000;
+const STALE_TTL_MS = 5 * 60_000;
+const MAX_CACHE_BYTES = 1_000_000;
+
+const proxyCache = new Map<string, CachedProxyResponse>();
+const inflightProxyRequests = new Map<string, Promise<ProxyResponsePayload>>();
+
+function buildProxyResponse(
+  payload: ProxyResponsePayload,
+  cacheStatus: "HIT" | "MISS" | "STALE",
+  upstreamStatus = payload.status,
+) {
+  return new Response(payload.body.slice(), {
+    status: payload.status,
+    headers: {
+      "Content-Type": payload.contentType,
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "no-store",
+      "X-Proxy-Cache": cacheStatus,
+      "X-Proxy-Upstream-Status": String(upstreamStatus),
+    },
+  });
+}
+
+function getFreshCacheEntry(target: string): CachedProxyResponse | null {
+  const cached = proxyCache.get(target);
+  if (!cached) return null;
+  if (cached.staleUntil <= Date.now()) {
+    proxyCache.delete(target);
+    return null;
+  }
+  return cached.freshUntil > Date.now() ? cached : null;
+}
+
+function getStaleCacheEntry(target: string): CachedProxyResponse | null {
+  const cached = proxyCache.get(target);
+  if (!cached) return null;
+  if (cached.staleUntil <= Date.now()) {
+    proxyCache.delete(target);
+    return null;
+  }
+  return cached;
+}
+
+function maybeCacheResponse(target: string, payload: ProxyResponsePayload) {
+  if (payload.status < 200 || payload.status >= 300) return;
+  if (payload.body.byteLength > MAX_CACHE_BYTES) return;
+
+  proxyCache.set(target, {
+    ...payload,
+    freshUntil: Date.now() + CACHE_TTL_MS,
+    staleUntil: Date.now() + STALE_TTL_MS,
+  });
+}
+
+async function fetchUpstream(target: string): Promise<ProxyResponsePayload> {
+  const existing = inflightProxyRequests.get(target);
+  if (existing) {
+    return existing;
+  }
+
+  const request = (async () => {
+    const upstream = await fetch(target, {
+      headers: {
+        "User-Agent": "infinite-monitor/1.0",
+        Accept: "application/json, text/plain, */*",
+      },
+      signal: AbortSignal.timeout(15_000),
+    });
+
+    const contentType =
+      upstream.headers.get("content-type") ?? "application/json";
+    const body = new Uint8Array(await upstream.arrayBuffer());
+    const payload = { body, contentType, status: upstream.status };
+
+    maybeCacheResponse(target, payload);
+    return payload;
+  })().finally(() => {
+    inflightProxyRequests.delete(target);
+  });
+
+  inflightProxyRequests.set(target, request);
+  return request;
+}
+
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
   const target = searchParams.get("url");
@@ -19,6 +115,11 @@ export async function GET(request: Request) {
     return Response.json({ error: "only http/https allowed" }, { status: 400 });
   }
 
+  const freshCacheHit = getFreshCacheEntry(target);
+  if (freshCacheHit) {
+    return buildProxyResponse(freshCacheHit, "HIT");
+  }
+
   try {
     const scan = await scanUrl(target);
     if (!scan.safe) {
@@ -36,27 +137,20 @@ export async function GET(request: Request) {
     // Allow request through if brin is unreachable
   }
 
-  try {
-    const upstream = await fetch(target, {
-      headers: {
-        "User-Agent": "infinite-monitor/1.0",
-        Accept: "application/json, text/plain, */*",
-      },
-      signal: AbortSignal.timeout(15000),
-    });
+  const staleCacheHit = getStaleCacheEntry(target);
 
-    const contentType =
-      upstream.headers.get("content-type") ?? "application/json";
+  try {
+    const upstream = await fetchUpstream(target);
+    if ((upstream.status < 200 || upstream.status >= 300) && staleCacheHit) {
+      return buildProxyResponse(staleCacheHit, "STALE", upstream.status);
+    }
 
-    return new Response(upstream.body, {
-      status: upstream.status,
-      headers: {
-        "Content-Type": contentType,
-        "Access-Control-Allow-Origin": "*",
-        "Cache-Control": "no-store",
-      },
-    });
+    return buildProxyResponse(upstream, "MISS");
   } catch (err) {
+    if (staleCacheHit) {
+      return buildProxyResponse(staleCacheHit, "STALE");
+    }
+
     return Response.json(
       { error: "upstream fetch failed", detail: String(err) },
       { status: 502 }