Update public/elements/FossilGallery.jsx

public/elements/FossilGallery.jsx

@@ -1,10 +1,16 @@
-// Example gallery. Each card is a SPECIMEN — a set of views — not one image,
-// because that is the pipeline's unit of work. The thumbnails are stacked so the
-// card shows at a glance how many angles the case has.
+// Example gallery. Each card is a SPECIMEN — a set of views — not one image, because
+// that is the pipeline's unit of work. Thumbnails are laid side by side so the card
+// shows at a glance how many angles the case has.
 //
-// Clicking a card ARMS the specimen and prefills its prompt into the composer.
-// It deliberately does not run the agent: the prompt is the interesting part and
-// the user should get to edit it first.
+// Clicking a card ARMS the specimen and prefills its prompt into the composer. It
+// deliberately does not run: the prompt is the interesting part and the user should
+// get to edit it first.
+//
+// THEMING: this used hardcoded `bg-white` / `text-neutral-*`, which produced a glaring
+// white card with unreadable gray text on the dark theme. Everything now uses the
+// app's own theme tokens (`bg-card`, `text-foreground`, `text-muted-foreground`,
+// `border-border`, `ring-primary`), so it follows whatever theme is selected instead
+// of fighting it.
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 
@@ -15,11 +21,12 @@ export default function FossilGallery() {
     setArmed(ex.id);
     callAction({ name: "arm_example", payload: { example_id: ex.id } });
     const box =
-      document.querySelector("#chat-input") ||
-      document.querySelector("textarea");
+      document.querySelector("#chat-input") || document.querySelector("textarea");
     if (box) {
       const setter = Object.getOwnPropertyDescriptor(
-        window.HTMLTextAreaElement.prototype, "value").set;
+        window.HTMLTextAreaElement.prototype,
+        "value"
+      ).set;
       setter.call(box, ex.prompt);
       box.dispatchEvent(new Event("input", { bubbles: true }));
       box.focus();
@@ -32,39 +39,45 @@ export default function FossilGallery() {
   };
 
   return (
-    <div className="w-full">
+    <div className="w-full bg-transparent">
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
         {props.examples.map((ex) => (
           <button
             key={ex.id}
             onClick={() => arm(ex)}
-            className={`text-left rounded-xl border p-3 transition hover:shadow-md ${
-              armed === ex.id
-                ? "border-emerald-500 ring-2 ring-emerald-200 bg-emerald-50"
-                : "border-neutral-200 bg-white hover:border-neutral-300"
-            }`}
+            className={`text-left rounded-xl border p-3 transition bg-card text-card-foreground
+              hover:border-primary/60 hover:shadow-md
+              ${armed === ex.id ? "border-primary ring-2 ring-primary/40" : "border-border"}`}
           >
-            <div className="flex gap-1 mb-2">
+            <div className="flex gap-1.5 mb-2.5">
               {ex.thumbs.slice(0, 4).map((t, i) => (
-                <img key={i} src={t} alt=""
-                     className="w-1/4 aspect-square object-cover rounded-md border border-neutral-200" />
+                <img
+                  key={i}
+                  src={t}
+                  alt=""
+                  className="flex-1 min-w-0 aspect-square object-cover rounded-md border border-border"
+                />
               ))}
             </div>
-            <div className="font-medium text-sm">{ex.title}</div>
-            <div className="text-xs text-neutral-500 mt-0.5">
+            <div className="font-medium text-sm text-foreground">{ex.title}</div>
+            <div className="text-xs text-muted-foreground mt-0.5">
               {ex.n_views} view{ex.n_views === 1 ? "" : "s"}
-              {ex.n_views === 1 && " — the far side will be invented"}
             </div>
-            <div className="text-xs text-neutral-400 mt-1 line-clamp-2">{ex.prompt}</div>
+            <div className="text-xs text-muted-foreground/80 mt-1 line-clamp-2">
+              {ex.prompt}
+            </div>
           </button>
         ))}
       </div>
+
       {armed && (
-        <div className="mt-3 flex items-center gap-2 text-xs text-neutral-600">
+        <div className="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
           <span>Prompt prefilled — edit it if you like, then press send.</span>
-          <Button size="sm" variant="outline" onClick={clear}>Clear</Button>
+          <Button size="sm" variant="outline" onClick={clear}>
+            Clear
+          </Button>
         </div>
       )}
     </div>
   );
-}
+}