@buoy-gg/images 7.0.3

package/src/components/ImageDetail.tsx

@@ -0,0 +1,456 @@
+/**
+ * ImageDetail — full record view: preview, source, load timeline, dimensions
+ * with the oversize verdict + estimated decoded/wasted memory, cache verdict,
+ * and error details (including HTTP status/headers when the platform provides
+ * them). Cache actions live here too (expo-image global clears).
+ */
+
+import { useState, type ReactNode } from "react";
+import {
+  Image,
+  PixelRatio,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { clearOverride, setOverride } from "../capture/overrides";
+import { proveSavings } from "../capture/savings";
+import type { SavingsResult } from "../capture/savings";
+import {
+  estDecodedBytes,
+  estWastedBytes,
+  neededPixels,
+} from "../store/imageEventStore";
+import { cacheBadge, formatBytes, formatMs, sizeVerdict } from "../format";
+import type { ImageRecord } from "../types";
+
+interface ImageDetailProps {
+  record: ImageRecord;
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      <View style={styles.sectionBody}>{children}</View>
+    </View>
+  );
+}
+
+function Row({ label, value, color }: { label: string; value: string; color?: string }) {
+  return (
+    <View style={styles.kvRow}>
+      <Text style={styles.kvLabel}>{label}</Text>
+      <Text style={[styles.kvValue, color ? { color } : null]} selectable>
+        {value}
+      </Text>
+    </View>
+  );
+}
+
+/** expo-image global cache clears (no-ops if expo-image is absent). */
+function clearExpoCache(kind: "memory" | "disk"): void {
+  try {
+    const expo = require("expo-image");
+    if (kind === "memory") void expo.Image.clearMemoryCache();
+    else void expo.Image.clearDiskCache();
+  } catch {
+    // expo-image not installed
+  }
+}
+
+/** Free-text source swap: test another URL/format/CDN param on the live view. */
+function SwapUrlSection({ record }: { record: ImageRecord }) {
+  const [url, setUrl] = useState(record.uri);
+  const trimmed = url.trim();
+  const canApply = record.mounted && trimmed.length > 0 && trimmed !== record.uri;
+
+  return (
+    <Section title="SWAP SOURCE URL">
+      <TextInput
+        style={styles.urlInput}
+        value={url}
+        onChangeText={setUrl}
+        placeholder="https://…"
+        placeholderTextColor={macOSColors.text.muted}
+        autoCapitalize="none"
+        autoCorrect={false}
+        multiline
+      />
+      <View style={styles.actionsRow}>
+        <TouchableOpacity
+          style={[styles.actionButton, !canApply && styles.actionDisabled]}
+          disabled={!canApply}
+          onPress={() =>
+            setOverride(record.id, {
+              source: { type: "url", uri: trimmed },
+              label: "URL swapped",
+            })
+          }
+        >
+          <Text style={styles.actionText}>Apply</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={() => setUrl(record.uri)}
+        >
+          <Text style={styles.actionText}>Reset field</Text>
+        </TouchableOpacity>
+      </View>
+    </Section>
+  );
+}
+
+/**
+ * Real, on-device savings proof: re-encode at displayed size as WebP via
+ * expo-image-manipulator, report actual bytes, offer an in-place preview.
+ */
+function SavingsSection({ record }: { record: ImageRecord }) {
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState<SavingsResult | null>(null);
+
+  const run = () => {
+    setBusy(true);
+    proveSavings(record)
+      .then(setResult)
+      .catch((error) => setResult({ ok: false, message: String(error?.message ?? error) }))
+      .finally(() => setBusy(false));
+  };
+
+  return (
+    <Section title="PROVE SAVINGS (re-encode on device)">
+      {result == null ? (
+        <View style={styles.actionsRow}>
+          <TouchableOpacity style={styles.actionButton} onPress={run} disabled={busy}>
+            <Text style={styles.actionText}>
+              {busy ? "Re-encoding…" : "Re-encode at displayed size (WebP)"}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <>
+          <Row
+            label="Result"
+            value={result.message || (result.ok ? "done" : "failed")}
+            color={result.ok ? macOSColors.semantic.success : macOSColors.semantic.error}
+          />
+          {result.originalBytes != null ? (
+            <Row
+              label="Original"
+              value={`${formatBytes(result.originalBytes)} (${result.originalBytesSource})`}
+            />
+          ) : null}
+          {result.optimizedBytes != null ? (
+            <Row
+              label="Optimized"
+              value={`${formatBytes(result.optimizedBytes)} — ${result.optimizedDims?.width}×${result.optimizedDims?.height} WebP`}
+              color={macOSColors.semantic.success}
+            />
+          ) : null}
+          {result.savedBytes != null ? (
+            <Row
+              label="Saved"
+              value={`${formatBytes(result.savedBytes)} (${result.savedPct}%)`}
+              color={macOSColors.semantic.success}
+            />
+          ) : null}
+          <View style={styles.actionsRow}>
+            {result.ok && result.optimizedUri && record.mounted ? (
+              <TouchableOpacity
+                style={styles.actionButton}
+                onPress={() =>
+                  setOverride(record.id, {
+                    source: { type: "url", uri: result.optimizedUri! },
+                    label: "Optimized preview",
+                  })
+                }
+              >
+                <Text style={styles.actionText}>Preview in place</Text>
+              </TouchableOpacity>
+            ) : null}
+            <TouchableOpacity style={styles.actionButton} onPress={run} disabled={busy}>
+              <Text style={styles.actionText}>{busy ? "Re-encoding…" : "Re-run"}</Text>
+            </TouchableOpacity>
+          </View>
+        </>
+      )}
+    </Section>
+  );
+}
+
+export function ImageDetail({ record }: ImageDetailProps) {
+  const verdict = sizeVerdict(record);
+  const cache = cacheBadge(record);
+  const needed = neededPixels(record);
+  const decoded = estDecodedBytes(record);
+  const wasted = estWastedBytes(record);
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      {record.overrideLabel ? (
+        <View style={styles.overrideBanner}>
+          <Text style={styles.overrideText}>
+            Simulation active: {record.overrideLabel} — stats below describe the
+            override, not the original source.
+          </Text>
+          <TouchableOpacity onPress={() => clearOverride(record.id)}>
+            <Text style={styles.overrideRestore}>RESTORE</Text>
+          </TouchableOpacity>
+        </View>
+      ) : null}
+
+      {record.uri && record.sourceKind !== "data" ? (
+        <View style={styles.previewBox}>
+          <Image
+            testID="buoy-internal-images-preview"
+            source={{ uri: record.uri }}
+            style={styles.preview}
+            resizeMode="contain"
+          />
+        </View>
+      ) : null}
+
+      <Section title="SOURCE">
+        <Row label="URI" value={record.uri || "(none)"} />
+        <Row label="Kind" value={record.sourceKind} />
+        <Row label="Library" value={record.lib === "expo" ? "expo-image" : "RN <Image>"} />
+        {record.hasAltText === false ? (
+          <Row
+            label="Alt text"
+            value="missing — add alt/accessibilityLabel"
+            color={macOSColors.semantic.warning}
+          />
+        ) : null}
+        {record.mediaType != null ? <Row label="Media type" value={String(record.mediaType)} /> : null}
+        {record.isAnimated != null ? (
+          <Row label="Animated" value={record.isAnimated ? "yes" : "no"} />
+        ) : null}
+      </Section>
+
+      <Section title="LOAD">
+        <Row
+          label="Status"
+          value={record.status}
+          color={
+            record.status === "error"
+              ? macOSColors.semantic.error
+              : record.status === "loaded"
+                ? macOSColors.semantic.success
+                : macOSColors.semantic.warning
+          }
+        />
+        <Row label="Duration" value={formatMs(record.durationMs)} />
+        {record.displayedAt && record.loadedAt ? (
+          <Row
+            label="Decode → display"
+            value={formatMs(Math.max(0, record.displayedAt - record.loadedAt))}
+          />
+        ) : null}
+        <Row label="Cache" value={`${cache.label}`} color={cache.color} />
+        {record.cacheVerdictSource ? (
+          <Row
+            label="Cache source"
+            value={
+              record.cacheVerdictSource === "event"
+                ? "reported by expo-image onLoad"
+                : "Image.queryCache after load"
+            }
+          />
+        ) : null}
+        {record.progressSeen ? (
+          <Row
+            label="Downloaded"
+            value={
+              record.bytesTotal
+                ? `${formatBytes(record.bytesLoaded ?? 0)} / ${formatBytes(record.bytesTotal)}`
+                : "network transfer observed"
+            }
+          />
+        ) : null}
+        <Row label="Load cycles" value={String(record.loadCount)} />
+        <Row label="Still mounted" value={record.mounted ? "yes" : "no"} />
+      </Section>
+
+      <Section title="DIMENSIONS">
+        {record.intrinsic ? (
+          <Row
+            label="Decoded"
+            value={`${record.intrinsic.width}×${record.intrinsic.height} px`}
+          />
+        ) : (
+          <Row label="Decoded" value="unknown" />
+        )}
+        {record.layout ? (
+          <Row
+            label="Displayed"
+            value={`${Math.round(record.layout.width)}×${Math.round(record.layout.height)} dp (needs ${
+              needed ? `${needed.width}×${needed.height}` : "?"
+            } px @${PixelRatio.get()}x)`}
+          />
+        ) : (
+          <Row label="Displayed" value="no layout yet" />
+        )}
+        {verdict.label ? <Row label="Verdict" value={verdict.label} color={verdict.color} /> : null}
+        {decoded > 0 ? <Row label="Est. decoded memory" value={formatBytes(decoded)} /> : null}
+        {wasted > 0 ? (
+          <Row
+            label="Est. wasted"
+            value={`${formatBytes(wasted)} — resize the source to ${
+              needed ? `${needed.width}×${needed.height}` : "the displayed size"
+            }`}
+            color={macOSColors.semantic.warning}
+          />
+        ) : null}
+        {(record.layoutShifts ?? 0) > 0 ? (
+          <Row
+            label="Layout shifts"
+            value={`${record.layoutShifts} — box resized after load; reserve explicit width/height`}
+            color={macOSColors.semantic.warning}
+          />
+        ) : null}
+      </Section>
+
+      {record.sourceKind === "network" || record.sourceKind === "asset" ? (
+        <SavingsSection key={`savings-${record.id}`} record={record} />
+      ) : null}
+
+      {record.status === "error" ? (
+        <Section title="ERROR">
+          <Row label="Message" value={record.error ?? "unknown"} color={macOSColors.semantic.error} />
+          {record.errorCode != null ? <Row label="HTTP status" value={String(record.errorCode)} /> : null}
+          {record.errorHeaders
+            ? Object.entries(record.errorHeaders).map(([k, v]) => (
+                <Row key={k} label={k} value={String(v)} />
+              ))
+            : null}
+        </Section>
+      ) : null}
+
+      {record.sourceKind === "network" && record.mounted ? (
+        <SwapUrlSection key={record.id} record={record} />
+      ) : null}
+
+      {record.lib === "expo" ? (
+        <Section title="CACHE ACTIONS (expo-image, global)">
+          <View style={styles.actionsRow}>
+            <TouchableOpacity style={styles.actionButton} onPress={() => clearExpoCache("memory")}>
+              <Text style={styles.actionText}>Clear memory cache</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.actionButton} onPress={() => clearExpoCache("disk")}>
+              <Text style={styles.actionText}>Clear disk cache</Text>
+            </TouchableOpacity>
+          </View>
+        </Section>
+      ) : null}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 12,
+    gap: 12,
+  },
+  previewBox: {
+    height: 140,
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.input,
+    overflow: "hidden",
+  },
+  preview: {
+    width: "100%",
+    height: "100%",
+  },
+  section: {
+    gap: 6,
+  },
+  sectionTitle: {
+    color: macOSColors.text.muted,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.8,
+  },
+  sectionBody: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.default,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+  },
+  kvRow: {
+    flexDirection: "row",
+    paddingVertical: 5,
+    gap: 12,
+  },
+  kvLabel: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    width: 110,
+  },
+  kvValue: {
+    color: macOSColors.text.primary,
+    fontSize: 11,
+    flex: 1,
+  },
+  actionsRow: {
+    flexDirection: "row",
+    gap: 8,
+    paddingVertical: 8,
+  },
+  actionButton: {
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.default,
+  },
+  actionText: {
+    color: macOSColors.text.primary,
+    fontSize: 11,
+    fontWeight: "600",
+  },
+  actionDisabled: {
+    opacity: 0.4,
+  },
+  urlInput: {
+    color: macOSColors.text.primary,
+    fontSize: 11,
+    fontFamily: "monospace",
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 6,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.input,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    marginTop: 8,
+  },
+  overrideBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: 10,
+    borderRadius: 8,
+    backgroundColor: macOSColors.semantic.warningBackground,
+  },
+  overrideText: {
+    flex: 1,
+    color: macOSColors.semantic.warning,
+    fontSize: 11,
+    lineHeight: 15,
+  },
+  overrideRestore: {
+    color: macOSColors.semantic.warning,
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+  },
+});