Project screenshot thumbnail work

Author: stever

apps/gif-service/src/compile.ts

@@ -70,7 +70,9 @@ export async function compileProject(lang: string, code: string): Promise<Buffer
                 });
                 const cim = files['zout/in.cim'];
                 if (!cim || cim.length === 0) {
-                    throw errors.length ? errors : new Error('zmac produced no output');
+                    // errors are raw stderr strings; join them so the reason
+                    // surfaces (logged + returned) rather than "unknown error".
+                    throw new Error(errors.join('\n').slice(0, 500) || 'zmac produced no output');
                 }
                 // Wrap the raw code image (ORG 0x8000) into a self-loading TAP.
                 const { bin2tap } = await import('pasmo');

apps/gif-service/src/routes/screenshot.ts

@@ -84,16 +84,17 @@ router.get('/:id', async (req: Request, res: Response) => {
     } catch (err) {
         if (err instanceof CompileError) {
             // Unrenderable (e.g. unsupported lang, or bad source) → web falls
-            // back to the cartridge. Short negative-cache: enough to avoid
-            // re-rendering on every page load, but it self-heals quickly after a
-            // deploy that adds rendering support (the key is project-based, so a
-            // server capability change can't otherwise invalidate it).
+            // back to the cartridge. Log + return the reason so failures are
+            // inspectable (docker logs and the response body) instead of a silent
+            // 422. Short negative-cache: avoids re-rendering on every page load
+            // but self-heals quickly after a deploy that adds render support.
+            console.log(`Screenshot ${id}: not rendered: ${err.message.slice(0, 300)}`);
             res.setHeader('Cache-Control', 'public, max-age=300');
-            res.status(422).end();
+            res.status(422).type('text/plain').send(err.message.slice(0, 300));
             return;
         }
-        console.error('Screenshot error:', err);
-        res.status(500).end();
+        console.error(`Screenshot ${id} error:`, err);
+        res.status(500).type('text/plain').send('Internal error');
     }
 });
 

apps/web/public/assets/images/zx-card.png

@@ -1,10 +1,16 @@
 import React, { useState } from "react";
 
+// Size of the ZX rainbow ribbon baked into the bottom-right corner of a
+// screenshot thumbnail (square, so the diagonal stays at 45deg). Tweak here.
+const RIBBON_SIZE = "44px";
+
 // Tilted corner thumbnail for a project card. The box is 4:3 to match the
 // Spectrum screenshot's aspect, so the rendered PNG from gif-service fills it
-// exactly with no crop (only the tilt trims the corners). Falls back to the
-// static cartridge graphic when there's no screenshot yet, the project isn't
-// public, or it can't be rendered (e.g. zmac/sdcc).
+// exactly with no crop (only the tilt trims the corners). Screenshots get a
+// small diagonal rainbow ribbon in the corner (the same one the cartridge
+// shows full-size). Falls back to the static cartridge graphic when there's no
+// screenshot yet, the project isn't public, or it can't be rendered (e.g.
+// zmac/sdcc) — that already carries the ribbon, so no overlay is added.
 export default function ProjectThumbnail({ projectId, updatedAt }) {
   const [failed, setFailed] = useState(false);
   const version = updatedAt ? Date.parse(updatedAt) || 0 : 0;
@@ -28,11 +34,26 @@ export default function ProjectThumbnail({ projectId, updatedAt }) {
       }}
     >
       <img
-        src={showShot ? `/screenshots/${projectId}.png?v=${version}` : "/assets/images/zx-square.png"}
+        src={showShot ? `/screenshots/${projectId}.png?v=${version}` : "/assets/images/zx-card.png"}
         alt=""
         onError={showShot ? () => setFailed(true) : undefined}
         style={{ width: "100%", height: "100%", objectFit: "cover" }}
       />
+      {showShot && (
+        <img
+          src="/assets/images/zx-ribbon.png"
+          alt=""
+          aria-hidden="true"
+          style={{
+            position: "absolute",
+            right: 0,
+            bottom: 0,
+            width: RIBBON_SIZE,
+            height: RIBBON_SIZE,
+            pointerEvents: "none",
+          }}
+        />
+      )}
     </div>
   );
 }