feat: add UI for capture time override

apps/web/app/components/MediaPanel.tsx

@@ -65,6 +65,10 @@ export function MediaPanel(props: { selectedDayIso: string | null }) {
   const [albumId, setAlbumId] = useState("");
   const [adminError, setAdminError] = useState<string | null>(null);
   const [adminBusy, setAdminBusy] = useState(false);
+  const [overrideInput, setOverrideInput] = useState("");
+  const [overrideError, setOverrideError] = useState<string | null>(null);
+  const [overrideBusy, setOverrideBusy] = useState(false);
+  const [baseCaptureTs, setBaseCaptureTs] = useState<string | null>(null);
 
   const range = useMemo(() => {
     if (!props.selectedDayIso) return null;
@@ -183,6 +187,9 @@ export function MediaPanel(props: { selectedDayIso: string | null }) {
             ? "video_mp4"
             : playback.variant.kind;
         setViewer({ asset, url: playback.url, variant: variantLabel });
+        setBaseCaptureTs(asset.capture_ts_utc);
+        setOverrideInput(asset.capture_ts_utc ?? "");
+        setOverrideError(null);
         void loadAdminLists();
         return;
       }
@@ -190,6 +197,9 @@ export function MediaPanel(props: { selectedDayIso: string | null }) {
       const variant: "original" | "thumb_med" | "poster" = "original";
       const url = await loadSignedUrl(asset.id, variant);
       setViewer({ asset, url, variant });
+      setBaseCaptureTs(asset.capture_ts_utc);
+      setOverrideInput(asset.capture_ts_utc ?? "");
+      setOverrideError(null);
       void loadAdminLists();
     } catch (err) {
       setViewer(null);
@@ -199,6 +209,87 @@ export function MediaPanel(props: { selectedDayIso: string | null }) {
     }
   }
 
+  async function handleOverrideCaptureTs() {
+    if (!viewer) return;
+    setOverrideError(null);
+    setOverrideBusy(true);
+    try {
+      const token = sessionStorage.getItem("porthole_admin_token") ?? "";
+      if (!token) throw new Error("missing_admin_token");
+
+      const trimmed = overrideInput.trim();
+      if (!trimmed) throw new Error("enter_iso_timestamp");
+
+      const res = await fetch(
+        `/api/assets/${viewer.asset.id}/override-capture-ts`,
+        {
+          method: "POST",
+          headers: {
+            "X-Porthole-Admin-Token": token,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ captureTsUtcOverride: trimmed }),
+        },
+      );
+      if (!res.ok) throw new Error(`override_failed:${res.status}`);
+      setViewer((prev) =>
+        prev
+          ? {
+              ...prev,
+              asset: {
+                ...prev.asset,
+                capture_ts_utc: trimmed,
+              },
+            }
+          : prev,
+      );
+      setOverrideError("Override saved.");
+    } catch (err) {
+      setOverrideError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setOverrideBusy(false);
+    }
+  }
+
+  async function handleClearOverride() {
+    if (!viewer) return;
+    setOverrideError(null);
+    setOverrideBusy(true);
+    try {
+      const token = sessionStorage.getItem("porthole_admin_token") ?? "";
+      if (!token) throw new Error("missing_admin_token");
+      const res = await fetch(
+        `/api/assets/${viewer.asset.id}/override-capture-ts`,
+        {
+          method: "POST",
+          headers: {
+            "X-Porthole-Admin-Token": token,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ captureTsUtcOverride: null }),
+        },
+      );
+      if (!res.ok) throw new Error(`override_clear_failed:${res.status}`);
+      setViewer((prev) =>
+        prev
+          ? {
+              ...prev,
+              asset: {
+                ...prev.asset,
+                capture_ts_utc: baseCaptureTs,
+              },
+            }
+          : prev,
+      );
+      setOverrideInput(baseCaptureTs ?? "");
+      setOverrideError("Override cleared.");
+    } catch (err) {
+      setOverrideError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setOverrideBusy(false);
+    }
+  }
+
   async function loadAdminLists() {
     setAdminError(null);
     setAdminBusy(true);
@@ -527,6 +618,49 @@ export function MediaPanel(props: { selectedDayIso: string | null }) {
                   {viewer.asset.id}
                 </div>
 
+                <div
+                  style={{
+                    borderTop: "1px solid #eee",
+                    paddingTop: 12,
+                    display: "grid",
+                    gap: 8,
+                  }}
+                >
+                  <strong style={{ fontSize: 13 }}>Capture time override</strong>
+                  <div style={{ fontSize: 12, color: "#555" }}>
+                    Effective: {viewer.asset.capture_ts_utc ?? "(unset)"}
+                  </div>
+                  <div style={{ fontSize: 12, color: "#555" }}>
+                    Base: {baseCaptureTs ?? "(unknown)"}
+                  </div>
+                  <div style={{ display: "grid", gap: 6 }}>
+                    <label style={{ fontSize: 12, color: "#555" }}>
+                      ISO timestamp
+                    </label>
+                    <input
+                      type="text"
+                      placeholder="2026-02-01T12:34:56.000Z"
+                      value={overrideInput}
+                      onChange={(e) => setOverrideInput(e.target.value)}
+                      style={{ padding: 6, borderRadius: 6, border: "1px solid #ccc" }}
+                      disabled={overrideBusy}
+                    />
+                    <div style={{ display: "flex", gap: 8 }}>
+                      <button type="button" onClick={handleOverrideCaptureTs}>
+                        Save override
+                      </button>
+                      <button type="button" onClick={handleClearOverride}>
+                        Clear override
+                      </button>
+                    </div>
+                    {overrideError ? (
+                      <div style={{ fontSize: 12, color: "#b00" }}>
+                        {overrideError}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+
                 <div
                   style={{
                     borderTop: "1px solid #eee",

docs/plans/2026-02-03-capture-time-override-ui.md

@@ -0,0 +1,138 @@
+# Capture Time Override UI Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add a capture-time override form in the MediaPanel viewer to POST override timestamps and display current effective/base timestamps.
+
+**Architecture:** Extend the existing MediaPanel viewer admin controls with a small form that reads/writes to `/api/assets/:id/override-capture-ts` using the existing admin token from sessionStorage. Keep UI state local to MediaPanel and refresh the viewer asset timestamps after submit.
+
+**Tech Stack:** React (Next.js app router), TypeScript, fetch API
+
+### Task 1: Add override state and helpers
+
+**Files:**
+- Modify: `apps/web/app/components/MediaPanel.tsx`
+
+**Step 1: Write the failing test**
+
+No tests (user-approved).
+
+**Step 2: Add state for override input, status, and effective/base timestamps**
+
+```ts
+const [captureOverrideInput, setCaptureOverrideInput] = useState("");
+const [captureOverrideError, setCaptureOverrideError] = useState<string | null>(null);
+const [captureOverrideBusy, setCaptureOverrideBusy] = useState(false);
+```
+
+**Step 3: Add helper to derive effective/base timestamp**
+
+```ts
+const effectiveTs = viewer?.asset.capture_ts_utc ?? null;
+const baseTs = viewer?.asset.capture_ts_utc ?? null; // updated when override applied
+```
+
+**Step 4: Commit**
+
+No commit yet; continue tasks.
+
+### Task 2: Add override POST handler
+
+**Files:**
+- Modify: `apps/web/app/components/MediaPanel.tsx`
+
+**Step 1: Write the failing test**
+
+No tests (user-approved).
+
+**Step 2: Implement submit handler**
+
+```ts
+async function handleOverrideCaptureTs() {
+  if (!viewer) return;
+  setCaptureOverrideError(null);
+  setCaptureOverrideBusy(true);
+  try {
+    const token = sessionStorage.getItem("porthole_admin_token") ?? "";
+    if (!token) throw new Error("missing_admin_token");
+    const res = await fetch(`/api/assets/${viewer.asset.id}/override-capture-ts`, {
+      method: "POST",
+      headers: {
+        "X-Porthole-Admin-Token": token,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ capture_ts_utc: captureOverrideInput || null }),
+    });
+    if (!res.ok) throw new Error(`override_failed:${res.status}`);
+    // refresh viewer asset timestamps (re-fetch list or update local)
+  } catch (err) {
+    setCaptureOverrideError(err instanceof Error ? err.message : String(err));
+  } finally {
+    setCaptureOverrideBusy(false);
+  }
+}
+```
+
+**Step 3: Commit**
+
+No commit yet; continue tasks.
+
+### Task 3: Add UI above Tags & Albums
+
+**Files:**
+- Modify: `apps/web/app/components/MediaPanel.tsx`
+
+**Step 1: Write the failing test**
+
+No tests (user-approved).
+
+**Step 2: Add form UI**
+
+```tsx
+<div style={{ display: "grid", gap: 6 }}>
+  <strong style={{ fontSize: 13 }}>Capture time override</strong>
+  <div style={{ color: "#666", fontSize: 12 }}>
+    Effective: {effectiveTs ?? "(none)"}
+  </div>
+  <div style={{ color: "#999", fontSize: 12 }}>
+    Base: {baseTs ?? "(unknown)"}
+  </div>
+  <div style={{ display: "flex", gap: 8 }}>
+    <input
+      type="text"
+      placeholder="2026-01-01T00:00:00.000Z"
+      value={captureOverrideInput}
+      onChange={(e) => setCaptureOverrideInput(e.target.value)}
+      style={{ flex: 1, padding: 6 }}
+      disabled={captureOverrideBusy}
+    />
+    <button type="button" onClick={handleOverrideCaptureTs}>
+      Save
+    </button>
+  </div>
+  {captureOverrideError ? (
+    <div style={{ color: "#b00", fontSize: 12 }}>{captureOverrideError}</div>
+  ) : null}
+</div>
+```
+
+**Step 3: Commit**
+
+No commit yet; continue tasks.
+
+### Task 4: Finalize, verify, and commit
+
+**Files:**
+- Modify: `apps/web/app/components/MediaPanel.tsx`
+
+**Step 1: Quick manual check**
+
+Run: `npm test` (skip)
+Expected: (skipped per user)
+
+**Step 2: Commit**
+
+```bash
+git add apps/web/app/components/MediaPanel.tsx
+git commit -m "feat: add UI for capture time override"
+```