feat: share links visible on plants/containers; container image gallery

- Fix ShareButton silently swallowing errors from createShareLink; now
  shows inline error text so failures are visible to the user
- Add getShareLinksForEntity server action and EntityShareLink type to
  _core/share.ts
- Add ShareLinkList component — renders active share links per entity
  with per-row Revoke; renders nothing when empty
- Wire ShareLinkList into plant and container detail pages (loaded
  server-side in parallel with the entity fetch)
- Add images jsonb column to garden_containers schema + migration 0018
- Add addContainerImage / removeContainerImage / setContainerPrimaryImage
  server actions mirroring the plant image pattern (10-image cap, first
  upload auto-sets cover)
- Update ContainerDetailDto, listContainers, getContainer to include images
- Rewrite ContainerDetail with Info/Gallery tabs; Gallery tab mirrors
  plant gallery (3-col grid, star/X overlays, upload button, counter)
- Update ContainerShareData and container renderSharedView to show cover
  image hero and secondary image grid on public share pages

drizzle/0018_container_images.sql

@@ -0,0 +1 @@
+ALTER TABLE "garden_containers" ADD COLUMN "images" jsonb DEFAULT '[]'::jsonb NOT NULL;

src/app/garden/containers/[id]/page.tsx

@@ -1,14 +1,18 @@
 import { notFound } from "next/navigation";
 import { getContainer } from "@/modules/garden/server/queries";
 import { ContainerDetail } from "@/modules/garden/components/container-detail";
+import { getShareLinksForEntity } from "@/modules/_core/share";
 
 export default async function ContainerPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const container = await getContainer(id);
+  const [container, shareLinks] = await Promise.all([
+    getContainer(id),
+    getShareLinksForEntity("garden.container", id),
+  ]);
   if (!container) notFound();
   return (
     <div className="page-content">
-      <ContainerDetail container={container} />
+      <ContainerDetail container={container} shareLinks={shareLinks} />
     </div>
   );
 }

src/app/garden/plants/[id]/page.tsx

@@ -2,14 +2,16 @@ import { notFound } from "next/navigation";
 import { listCalendars } from "@/modules/garden/server/calendar-bridge";
 import { getCareLogs, getCareSchedules, getPlant } from "@/modules/garden/server/queries";
 import { PlantDetail } from "@/modules/garden/components/plant-detail";
+import { getShareLinksForEntity } from "@/modules/_core/share";
 
 export default async function PlantPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const [plant, careLogs, careSchedules, calendars] = await Promise.all([
+  const [plant, careLogs, careSchedules, calendars, shareLinks] = await Promise.all([
     getPlant(id),
     getCareLogs(id),
     getCareSchedules(id),
     listCalendars(),
+    getShareLinksForEntity("garden.plant", id),
   ]);
   if (!plant) notFound();
 
@@ -20,6 +22,7 @@ export default async function PlantPage({ params }: { params: Promise<{ id: stri
         careLogs={careLogs}
         careSchedules={careSchedules}
         calendars={calendars}
+        shareLinks={shareLinks}
       />
     </div>
   );

src/components/share-button.tsx

@@ -19,15 +19,21 @@ export function ShareButton({
   const [open, setOpen] = useState(false);
   const [shareUrl, setShareUrl] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
 
   function share() {
+    setError(null);
     startTransition(async () => {
-      const result = await createShareLink(entityType, entityId, {
+      try {
-        capabilities: { read: true, write: canWrite },
+        const result = await createShareLink(entityType, entityId, {
-      });
+          capabilities: { read: true, write: canWrite },
-      setShareUrl(result.url);
+        });
-      setOpen(true);
+        setShareUrl(result.url);
+        setOpen(true);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to create share link");
+      }
     });
   }
 
@@ -41,10 +47,13 @@ export function ShareButton({
 
   return (
     <>
-      <Button variant="outline" onClick={share} disabled={isPending}>
+      <div className="flex flex-col items-end gap-1">
-        <Link />
+        <Button variant="outline" onClick={share} disabled={isPending}>
-        Share
+          <Link />
-      </Button>
+          Share
+        </Button>
+        {error && <p className="text-xs text-red-500">{error}</p>}
+      </div>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>

src/components/share-link-list.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { revokeShareLink } from "@/modules/_core/share";
+import type { EntityShareLink } from "@/modules/_core/share";
+
+type Props = {
+  links: EntityShareLink[];
+};
+
+export function ShareLinkList({ links }: Props) {
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+
+  if (links.length === 0) return null;
+
+  function handleRevoke(id: string) {
+    startTransition(async () => {
+      await revokeShareLink(id);
+      router.refresh();
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-1 pt-1 border-t border-[var(--ink-faint)]">
+      <p className="text-xs font-semibold uppercase text-[var(--ink-mute)] tracking-wide">
+        Active share links ({links.length})
+      </p>
+      {links.map((link) => (
+        <div key={link.id} className="flex items-center justify-between gap-2 text-sm py-0.5">
+          <div className="flex flex-col">
+            <span className="text-[var(--ink-mute)]">
+              Created {new Date(link.createdAt).toLocaleDateString()}
+            </span>
+            {link.expiresAt && (
+              <span className="text-xs text-[var(--ink-mute)]">
+                Expires {new Date(link.expiresAt).toLocaleDateString()}
+              </span>
+            )}
+          </div>
+          <button
+            className="btn btn-ghost btn-sm text-red-500 hover:text-red-600"
+            onClick={() => handleRevoke(link.id)}
+            disabled={isPending}
+          >
+            Revoke
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

src/modules/_core/share.ts

@@ -100,6 +100,48 @@ export async function revokeShareLink(id: string): Promise<void> {
 
 export type ActiveShareLink = typeof shareLinks.$inferSelect;
 
+export type EntityShareLink = {
+  id: string;
+  createdAt: string;
+  expiresAt: string | null;
+  capabilities: ShareLinkCapabilities;
+};
+
+export async function getShareLinksForEntity(
+  entityType: string,
+  entityId: string,
+): Promise<EntityShareLink[]> {
+  const { household } = await getCurrentSession();
+  const now = new Date();
+
+  const rows = await db
+    .select({
+      id: shareLinks.id,
+      createdAt: shareLinks.createdAt,
+      expiresAt: shareLinks.expiresAt,
+      capabilities: shareLinks.capabilities,
+    })
+    .from(shareLinks)
+    .where(
+      and(
+        eq(shareLinks.householdId, household.id),
+        eq(shareLinks.entityType, entityType),
+        eq(shareLinks.entityId, entityId),
+        isNull(shareLinks.revokedAt),
+      ),
+    )
+    .orderBy(shareLinks.createdAt);
+
+  return rows
+    .filter((r) => !r.expiresAt || r.expiresAt > now)
+    .map((r) => ({
+      id: r.id,
+      createdAt: r.createdAt.toISOString(),
+      expiresAt: r.expiresAt?.toISOString() ?? null,
+      capabilities: r.capabilities,
+    }));
+}
+
 export async function getActiveShareLinks(): Promise<ActiveShareLink[]> {
   const { household } = await getCurrentSession();
   const now = new Date();

src/modules/garden/components/container-detail.tsx

@@ -3,16 +3,31 @@
 import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { ShareButton } from "@/components/share-button";
-import { deleteContainer } from "../server/actions";
+import { ShareLinkList } from "@/components/share-link-list";
+import type { EntityShareLink } from "@/modules/_core/share";
+import {
+  addContainerImage,
+  deleteContainer,
+  removeContainerImage,
+  setContainerPrimaryImage,
+} from "../server/actions";
 import { ContainerForm } from "./container-form";
 import type { ContainerDetailDto } from "../server/queries";
 
-type Props = { container: ContainerDetailDto };
+type Tab = "info" | "gallery";
 
-export function ContainerDetail({ container }: Props) {
+type Props = {
+  container: ContainerDetailDto;
+  shareLinks: EntityShareLink[];
+};
+
+export function ContainerDetail({ container, shareLinks }: Props) {
+  const [tab, setTab] = useState<Tab>("info");
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
   const [isPending, startTransition] = useTransition();
+  const [galleryError, setGalleryError] = useState<string | null>(null);
+  const [uploadingImage, setUploadingImage] = useState(false);
   const router = useRouter();
 
   function handleDelete() {
@@ -23,6 +38,41 @@ export function ContainerDetail({ container }: Props) {
     });
   }
 
+  async function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setGalleryError(null);
+    setUploadingImage(true);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      const res = await fetch("/api/uploads", { method: "POST", body: fd });
+      if (!res.ok) throw new Error("Upload failed");
+      const data = (await res.json()) as { url: string };
+      await addContainerImage({ id: container.id, url: data.url });
+      router.refresh();
+    } catch {
+      setGalleryError("Image upload failed.");
+    } finally {
+      setUploadingImage(false);
+      e.target.value = "";
+    }
+  }
+
+  function handleRemoveImage(url: string) {
+    startTransition(async () => {
+      await removeContainerImage({ id: container.id, url });
+      router.refresh();
+    });
+  }
+
+  function handleSetPrimary(url: string) {
+    startTransition(async () => {
+      await setContainerPrimaryImage({ id: container.id, url });
+      router.refresh();
+    });
+  }
+
   return (
     <div className="flex flex-col gap-6">
       {container.coverImageUrl && (
@@ -39,29 +89,36 @@ export function ContainerDetail({ container }: Props) {
           <p className="text-sm text-[var(--ink-mute)] capitalize mt-1">{container.type}</p>
           {container.locationNotes && <p className="text-sm mt-2">{container.locationNotes}</p>}
         </div>
-        <div className="flex gap-2 shrink-0">
+        <div className="flex flex-col items-end gap-2 shrink-0">
-          <ShareButton entityType="garden.container" entityId={container.id} />
+          <div className="flex gap-2">
-          <button className="btn btn-ghost btn-sm" onClick={() => setEditing(true)}>
+            <ShareButton entityType="garden.container" entityId={container.id} />
-            Edit
+            <button className="btn btn-ghost btn-sm" onClick={() => setEditing((v) => !v)}>
-          </button>
+              Edit
-          {confirming ? (
-            <div className="flex gap-1">
-              <button className="btn btn-danger btn-sm" onClick={handleDelete} disabled={isPending}>
-                Confirm
-              </button>
-              <button
-                className="btn btn-ghost btn-sm"
-                onClick={() => setConfirming(false)}
-                disabled={isPending}
-              >
-                Cancel
-              </button>
-            </div>
-          ) : (
-            <button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
-              Delete
             </button>
-          )}
+            {confirming ? (
+              <div className="flex gap-1">
+                <button
+                  className="btn btn-danger btn-sm"
+                  onClick={handleDelete}
+                  disabled={isPending}
+                >
+                  Confirm
+                </button>
+                <button
+                  className="btn btn-ghost btn-sm"
+                  onClick={() => setConfirming(false)}
+                  disabled={isPending}
+                >
+                  Cancel
+                </button>
+              </div>
+            ) : (
+              <button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
+                Delete
+              </button>
+            )}
+          </div>
+          <ShareLinkList links={shareLinks} />
         </div>
       </div>
 
@@ -79,51 +136,131 @@ export function ContainerDetail({ container }: Props) {
         </div>
       )}
 
-      <div>
+      {/* Tabs */}
-        <div className="flex items-center justify-between mb-3">
+      <div className="flex gap-6 border-b border-[var(--ink-faint)]">
-          <h2 className="text-lg font-semibold">Plants ({container.plantCount})</h2>
+        {(["info", "gallery"] as Tab[]).map((t) => (
-          <a
+          <button
-            href={`/garden/plants/new?containerId=${container.id}`}
+            key={t}
-            className="btn btn-ghost btn-sm"
+            onClick={() => setTab(t)}
+            className={`pb-2 text-sm font-medium capitalize transition-colors ${
+              tab === t
+                ? "border-b-2 border-[var(--ink)] text-[var(--ink)]"
+                : "text-[var(--ink-mute)] hover:text-[var(--ink)]"
+            }`}
           >
-            + Add plant
+            {t}
-          </a>
+          </button>
-        </div>
+        ))}
-        {container.plants.length === 0 ? (
-          <p className="text-sm text-[var(--ink-mute)]">No plants in this container yet.</p>
-        ) : (
-          <div className="grid gap-2 sm:grid-cols-2">
-            {container.plants.map((p) => (
-              <a
-                key={p.id}
-                href={`/garden/plants/${p.id}`}
-                className="card p-3 hover:bg-[var(--surface-2)] transition-colors"
-              >
-                <div className="flex items-center gap-3">
-                  {p.primaryImageUrl && (
-                    <img
-                      src={p.primaryImageUrl}
-                      alt=""
-                      className="w-10 h-10 rounded-full object-cover shrink-0"
-                    />
-                  )}
-                  <div>
-                    <p className="font-medium text-sm">{p.name}</p>
-                    {p.scientificName && (
-                      <p className="text-xs text-[var(--ink-mute)] italic">{p.scientificName}</p>
-                    )}
-                  </div>
-                  <span
-                    className={`ml-auto text-xs badge ${p.healthStatus === "healthy" ? "badge-success" : "badge-warning"}`}
-                  >
-                    {p.healthStatus}
-                  </span>
-                </div>
-              </a>
-            ))}
-          </div>
-        )}
       </div>
+
+      {/* Info */}
+      {tab === "info" && (
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-lg font-semibold">Plants ({container.plantCount})</h2>
+            <a
+              href={`/garden/plants/new?containerId=${container.id}`}
+              className="btn btn-ghost btn-sm"
+            >
+              + Add plant
+            </a>
+          </div>
+          {container.plants.length === 0 ? (
+            <p className="text-sm text-[var(--ink-mute)]">No plants in this container yet.</p>
+          ) : (
+            <div className="grid gap-2 sm:grid-cols-2">
+              {container.plants.map((p) => (
+                <a
+                  key={p.id}
+                  href={`/garden/plants/${p.id}`}
+                  className="card p-3 hover:bg-[var(--surface-2)] transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    {p.primaryImageUrl && (
+                      <img
+                        src={p.primaryImageUrl}
+                        alt=""
+                        className="w-10 h-10 rounded-full object-cover shrink-0"
+                      />
+                    )}
+                    <div>
+                      <p className="font-medium text-sm">{p.name}</p>
+                      {p.scientificName && (
+                        <p className="text-xs text-[var(--ink-mute)] italic">{p.scientificName}</p>
+                      )}
+                    </div>
+                    <span
+                      className={`ml-auto text-xs badge ${p.healthStatus === "healthy" ? "badge-success" : "badge-warning"}`}
+                    >
+                      {p.healthStatus}
+                    </span>
+                  </div>
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Gallery */}
+      {tab === "gallery" && (
+        <div className="flex flex-col gap-4">
+          {container.images.length === 0 ? (
+            <p className="text-sm text-[var(--ink-mute)]">No photos yet.</p>
+          ) : (
+            <div className="grid grid-cols-3 gap-2">
+              {container.images.map((url) => (
+                <div key={url} className="relative group">
+                  <img src={url} alt="" className="w-full aspect-square object-cover rounded-lg" />
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 rounded-lg flex items-center justify-center gap-3 transition-opacity">
+                    <button
+                      onClick={() => handleSetPrimary(url)}
+                      disabled={isPending}
+                      title="Set as cover"
+                      className={`text-lg leading-none ${url === container.coverImageUrl ? "text-yellow-400" : "text-white"}`}
+                    >
+                      ★
+                    </button>
+                    <button
+                      onClick={() => handleRemoveImage(url)}
+                      disabled={isPending}
+                      title="Remove"
+                      className="text-white text-lg leading-none"
+                    >
+                      ✕
+                    </button>
+                  </div>
+                  {url === container.coverImageUrl && (
+                    <span className="absolute top-1 left-1 text-xs px-1 bg-black/60 text-yellow-300 rounded">
+                      Cover
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {galleryError && <p className="text-sm text-red-500">{galleryError}</p>}
+
+          <div className="flex items-center gap-3">
+            {container.images.length < 10 && (
+              <label className="btn btn-ghost btn-sm cursor-pointer">
+                {uploadingImage ? "Uploading…" : "Upload photo"}
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleImageUpload}
+                  disabled={uploadingImage}
+                />
+              </label>
+            )}
+            <span className="text-xs text-[var(--ink-mute)]">
+              {container.images.length}/10 photos
+            </span>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/modules/garden/components/plant-detail.tsx

@@ -7,6 +7,8 @@ import { deletePlant, addPlantImage, removePlantImage, setPrimaryImage } from ".
 import type { CalendarDto } from "../server/calendar-bridge";
 import type { CareLogDto, CareScheduleDto, PlantDetailDto } from "../server/queries";
 import { ShareButton } from "@/components/share-button";
+import { ShareLinkList } from "@/components/share-link-list";
+import type { EntityShareLink } from "@/modules/_core/share";
 import { CareHistoryList } from "./care-history-list";
 import { CareLogForm } from "./care-log-form";
 import { CareScheduleEditor } from "./care-schedule-editor";
@@ -18,6 +20,7 @@ type Props = {
   careLogs: CareLogDto[];
   careSchedules: CareScheduleDto[];
   calendars: CalendarDto[];
+  shareLinks: EntityShareLink[];
 };
 
 function InfoRow({
@@ -44,7 +47,7 @@ function healthBadgeClass(status: string): string {
   return "badge-warning";
 }
 
-export function PlantDetail({ plant, careLogs, careSchedules, calendars }: Props) {
+export function PlantDetail({ plant, careLogs, careSchedules, calendars, shareLinks }: Props) {
   const [tab, setTab] = useState<Tab>("info");
   const [confirming, setConfirming] = useState(false);
   const [isPending, startTransition] = useTransition();
@@ -123,29 +126,36 @@ export function PlantDetail({ plant, careLogs, careSchedules, calendars }: Props
           </div>
         </div>
 
-        <div className="flex gap-2 shrink-0">
+        <div className="flex flex-col items-end gap-2 shrink-0">
-          <ShareButton entityType="garden.plant" entityId={plant.id} />
+          <div className="flex gap-2">
-          <Link href={`/garden/plants/${plant.id}/edit`} className="btn btn-ghost btn-sm">
+            <ShareButton entityType="garden.plant" entityId={plant.id} />
-            Edit
+            <Link href={`/garden/plants/${plant.id}/edit`} className="btn btn-ghost btn-sm">
-          </Link>
+              Edit
-          {confirming ? (
+            </Link>
-            <div className="flex gap-1">
+            {confirming ? (
-              <button className="btn btn-danger btn-sm" onClick={handleDelete} disabled={isPending}>
+              <div className="flex gap-1">
-                Confirm
+                <button
+                  className="btn btn-danger btn-sm"
+                  onClick={handleDelete}
+                  disabled={isPending}
+                >
+                  Confirm
+                </button>
+                <button
+                  className="btn btn-ghost btn-sm"
+                  onClick={() => setConfirming(false)}
+                  disabled={isPending}
+                >
+                  Cancel
+                </button>
+              </div>
+            ) : (
+              <button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
+                Delete
               </button>
-              <button
+            )}
-                className="btn btn-ghost btn-sm"
+          </div>
-                onClick={() => setConfirming(false)}
+          <ShareLinkList links={shareLinks} />
-                disabled={isPending}
-              >
-                Cancel
-              </button>
-            </div>
-          ) : (
-            <button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
-              Delete
-            </button>
-          )}
         </div>
       </div>
 

src/modules/garden/manifest.tsx

@@ -114,9 +114,28 @@ const gardenManifest: ModuleManifest = {
         const d = data as ContainerShareData;
         return (
           <div className="flex flex-col gap-3">
+            {d.coverImageUrl && (
+              <img
+                src={d.coverImageUrl}
+                alt=""
+                className="w-full max-h-48 object-cover rounded-lg"
+              />
+            )}
             <h2 className="text-xl font-bold">{d.name}</h2>
             <p className="text-sm capitalize text-[var(--ink-mute)]">{d.type}</p>
             {d.locationNotes && <p className="text-sm">{d.locationNotes}</p>}
+            {d.images.length > 1 && (
+              <div className="grid grid-cols-3 gap-2 mt-1">
+                {d.images.slice(1).map((url) => (
+                  <img
+                    key={url}
+                    src={url}
+                    alt=""
+                    className="w-full aspect-square object-cover rounded"
+                  />
+                ))}
+              </div>
+            )}
             {d.plants.length > 0 && (
               <div>
                 <p className="text-sm font-medium mb-1">Plants</p>

src/modules/garden/schema.ts

@@ -23,6 +23,7 @@ export const gardenContainers = pgTable(
     type: text("type").notNull().default("other"),
     locationNotes: text("location_notes"),
     coverImageUrl: text("cover_image_url"),
+    images: jsonb("images").notNull().default([]).$type<string[]>(),
     createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
     updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
   },

src/modules/garden/server/actions.ts

@@ -93,6 +93,80 @@ export async function deleteContainer(input: { id: string }) {
   revalidatePath("/garden");
 }
 
+export async function addContainerImage(input: { id: string; url: string }) {
+  const parsed = z.object({ id: z.string().uuid(), url: z.string().min(1) }).parse(input);
+  const { household } = await getCurrentSession();
+  await assertCanAccessContainer(parsed.id, household.id);
+
+  const [row] = await db
+    .select({ images: gardenContainers.images, coverImageUrl: gardenContainers.coverImageUrl })
+    .from(gardenContainers)
+    .where(eq(gardenContainers.id, parsed.id))
+    .limit(1);
+
+  if (!row) throw new Error("Container not found");
+  if (row.images.length >= 10) throw new Error("Maximum 10 images allowed");
+
+  const newImages = [...row.images, parsed.url];
+  await db
+    .update(gardenContainers)
+    .set({
+      images: newImages,
+      coverImageUrl: row.images.length === 0 ? parsed.url : row.coverImageUrl,
+      updatedAt: new Date(),
+    })
+    .where(eq(gardenContainers.id, parsed.id));
+
+  revalidatePath(`/garden/containers/${parsed.id}`);
+}
+
+export async function removeContainerImage(input: { id: string; url: string }) {
+  const parsed = z.object({ id: z.string().uuid(), url: z.string() }).parse(input);
+  const { household } = await getCurrentSession();
+  await assertCanAccessContainer(parsed.id, household.id);
+
+  const [row] = await db
+    .select({ images: gardenContainers.images, coverImageUrl: gardenContainers.coverImageUrl })
+    .from(gardenContainers)
+    .where(eq(gardenContainers.id, parsed.id))
+    .limit(1);
+
+  if (!row) throw new Error("Container not found");
+
+  const newImages = row.images.filter((u) => u !== parsed.url);
+  const wasPrimary = row.coverImageUrl === parsed.url;
+  const newCover = wasPrimary ? (newImages[0] ?? null) : row.coverImageUrl;
+
+  await db
+    .update(gardenContainers)
+    .set({ images: newImages, coverImageUrl: newCover, updatedAt: new Date() })
+    .where(eq(gardenContainers.id, parsed.id));
+
+  revalidatePath(`/garden/containers/${parsed.id}`);
+}
+
+export async function setContainerPrimaryImage(input: { id: string; url: string }) {
+  const parsed = z.object({ id: z.string().uuid(), url: z.string() }).parse(input);
+  const { household } = await getCurrentSession();
+  await assertCanAccessContainer(parsed.id, household.id);
+
+  const [row] = await db
+    .select({ images: gardenContainers.images })
+    .from(gardenContainers)
+    .where(eq(gardenContainers.id, parsed.id))
+    .limit(1);
+
+  if (!row) throw new Error("Container not found");
+  if (!row.images.includes(parsed.url)) throw new Error("Image not in container gallery");
+
+  await db
+    .update(gardenContainers)
+    .set({ coverImageUrl: parsed.url, updatedAt: new Date() })
+    .where(eq(gardenContainers.id, parsed.id));
+
+  revalidatePath(`/garden/containers/${parsed.id}`);
+}
+
 async function assertCanAccessContainer(id: string, householdId: string) {
   const [row] = await db
     .select({ id: gardenContainers.id })

src/modules/garden/server/queries.ts

@@ -10,6 +10,7 @@ export type ContainerDto = {
   type: string;
   locationNotes: string | null;
   coverImageUrl: string | null;
+  images: string[];
   plantCount: number;
   createdAt: string;
   updatedAt: string;
@@ -39,6 +40,7 @@ export async function listContainers(): Promise<ContainerDto[]> {
       type: gardenContainers.type,
       locationNotes: gardenContainers.locationNotes,
       coverImageUrl: gardenContainers.coverImageUrl,
+      images: gardenContainers.images,
       createdAt: gardenContainers.createdAt,
       updatedAt: gardenContainers.updatedAt,
       plantCount: sql<number>`count(${gardenPlants.id})::int`,
@@ -51,6 +53,7 @@ export async function listContainers(): Promise<ContainerDto[]> {
 
   return rows.map((r) => ({
     ...r,
+    images: r.images ?? [],
     plantCount: r.plantCount ?? 0,
     createdAt: r.createdAt.toISOString(),
     updatedAt: r.updatedAt.toISOString(),
@@ -68,6 +71,7 @@ export async function getContainer(id: string): Promise<ContainerDetailDto | nul
       type: gardenContainers.type,
       locationNotes: gardenContainers.locationNotes,
       coverImageUrl: gardenContainers.coverImageUrl,
+      images: gardenContainers.images,
       createdAt: gardenContainers.createdAt,
       updatedAt: gardenContainers.updatedAt,
       plantCount: sql<number>`(select count(*)::int from garden_plants where container_id = ${gardenContainers.id})`,
@@ -98,6 +102,7 @@ export async function getContainer(id: string): Promise<ContainerDetailDto | nul
     type: container.type,
     locationNotes: container.locationNotes,
     coverImageUrl: container.coverImageUrl,
+    images: container.images ?? [],
     plantCount: container.plantCount ?? 0,
     createdAt: container.createdAt.toISOString(),
     updatedAt: container.updatedAt.toISOString(),

src/modules/garden/server/share-queries.ts

@@ -8,6 +8,7 @@ export type ContainerShareData = {
   type: string;
   locationNotes: string | null;
   coverImageUrl: string | null;
+  images: string[];
   plants: { id: string; name: string; scientificName: string | null }[];
 };
 
@@ -74,6 +75,7 @@ export async function loadContainerForShare(id: string): Promise<ContainerShareD
     type: container.type,
     locationNotes: container.locationNotes,
     coverImageUrl: container.coverImageUrl,
+    images: container.images ?? [],
     plants,
   };
 }