@buoy-gg/images 7.0.3

package/src/components/ImageDetailFooter.tsx

@@ -0,0 +1,270 @@
+/**
+ * ImageDetailFooter — bottom navbar for the detail view: previous/next
+ * stepping through the captured list at the edges, per-image actions in the
+ * middle (hard reload / retry), with inline action feedback. Styling matches
+ * shared-ui's EventStepperFooter so it reads like the rest of Buoy.
+ *
+ * Mount with key={record.id} so action feedback resets when stepping.
+ */
+
+import { useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import {
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
+  macOSColors,
+  useSafeAreaInsets,
+} from "@buoy-gg/shared-ui";
+import { hardReloadRecord, retryRecord } from "../capture/actions";
+import type { ActionResult } from "../capture/actions";
+import { clearOverride, flashRecord, setOverride } from "../capture/overrides";
+import type { ImageRecord } from "../types";
+
+interface ImageDetailFooterProps {
+  record: ImageRecord;
+  hasPrevious: boolean;
+  hasNext: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+}
+
+export function ImageDetailFooter({
+  record,
+  hasPrevious,
+  hasNext,
+  onPrevious,
+  onNext,
+}: ImageDetailFooterProps) {
+  const insets = useSafeAreaInsets();
+  const [message, setMessage] = useState<string | null>(null);
+
+  const runAction = (action: () => Promise<ActionResult>) => {
+    setMessage("…");
+    action()
+      .then((result) => setMessage(result.message))
+      .catch((error) => setMessage(String(error?.message ?? error)));
+  };
+
+  const actionsDisabled = !record.mounted;
+  const overrideActive = record.overrideLabel != null;
+
+  const simulate = (
+    source: { type: "error" } | { type: "hang" } | { type: "blank" },
+    label: string
+  ) => {
+    setOverride(record.id, { source, label });
+    setMessage(`${label} — Restore to undo`);
+  };
+
+  return (
+    <View style={[styles.footer, { paddingBottom: 12 + insets.bottom }]}>
+      {message ? (
+        <Text style={styles.message} numberOfLines={1}>
+          {message}
+        </Text>
+      ) : actionsDisabled ? (
+        <Text style={styles.hint} numberOfLines={1}>
+          Instance unmounted — reload actions need the image on screen.
+        </Text>
+      ) : null}
+
+      <View style={styles.row}>
+        <TouchableOpacity
+          onPress={onPrevious}
+          disabled={!hasPrevious}
+          style={[styles.navButton, !hasPrevious && styles.disabled]}
+          activeOpacity={0.7}
+          accessibilityLabel="Previous image"
+        >
+          <ChevronLeft
+            size={20}
+            color={hasPrevious ? macOSColors.text.primary : macOSColors.text.muted}
+          />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => runAction(() => hardReloadRecord(record))}
+          disabled={actionsDisabled}
+          style={[styles.actionButton, actionsDisabled && styles.disabled]}
+          activeOpacity={0.7}
+        >
+          <RefreshCw
+            size={13}
+            color={actionsDisabled ? macOSColors.text.muted : macOSColors.semantic.info}
+          />
+          <Text style={[styles.actionText, actionsDisabled && styles.actionTextDisabled]}>
+            Hard reload
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => runAction(() => retryRecord(record))}
+          disabled={actionsDisabled}
+          style={[styles.actionButton, actionsDisabled && styles.disabled]}
+          activeOpacity={0.7}
+        >
+          <Text style={[styles.actionText, actionsDisabled && styles.actionTextDisabled]}>
+            {record.status === "error" ? "Retry" : "Reload"}
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={onNext}
+          disabled={!hasNext}
+          style={[styles.navButton, !hasNext && styles.disabled]}
+          activeOpacity={0.7}
+          accessibilityLabel="Next image"
+        >
+          <ChevronRight
+            size={20}
+            color={hasNext ? macOSColors.text.primary : macOSColors.text.muted}
+          />
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.row}>
+        <SimButton
+          label="Error"
+          disabled={actionsDisabled}
+          onPress={() => simulate({ type: "error" }, "Forced error")}
+        />
+        <SimButton
+          label="Loading"
+          disabled={actionsDisabled}
+          onPress={() => simulate({ type: "hang" }, "Forced loading")}
+        />
+        <SimButton
+          label="Blank"
+          disabled={actionsDisabled}
+          onPress={() => simulate({ type: "blank" }, "Blanked")}
+        />
+        <SimButton
+          label="Find"
+          disabled={actionsDisabled}
+          onPress={() => {
+            flashRecord(record.id);
+            setMessage("Flashing a red border on the image (2.5s)");
+          }}
+        />
+        <SimButton
+          label="Restore"
+          accent
+          disabled={!overrideActive}
+          onPress={() => {
+            clearOverride(record.id);
+            setMessage("Override removed — original source restored");
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+function SimButton({
+  label,
+  onPress,
+  disabled,
+  accent,
+}: {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  accent?: boolean;
+}) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      style={[styles.simButton, disabled && styles.disabled]}
+      activeOpacity={0.7}
+    >
+      <Text
+        style={[
+          styles.simText,
+          accent && !disabled && styles.simTextAccent,
+          disabled && styles.actionTextDisabled,
+        ]}
+      >
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  footer: {
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    backgroundColor: macOSColors.background.base,
+    borderTopWidth: 1,
+    borderTopColor: macOSColors.border.default,
+    gap: 8,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  navButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actionButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.default,
+  },
+  actionText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+  },
+  actionTextDisabled: {
+    color: macOSColors.text.muted,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+  simButton: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 7,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.default,
+  },
+  simText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+  },
+  simTextAccent: {
+    color: macOSColors.semantic.warning,
+  },
+  message: {
+    color: macOSColors.semantic.info,
+    fontSize: 10,
+    fontFamily: "monospace",
+  },
+  hint: {
+    color: macOSColors.text.muted,
+    fontSize: 10,
+  },
+});

package/src/components/ImageRow.tsx

@@ -0,0 +1,148 @@
+/**
+ * ImageRow — one captured image in the list: thumbnail, filename, library +
+ * cache badges, load time, and the size verdict.
+ *
+ * Thumbnails carry the buoy-internal testID so the capture layer skips them —
+ * the tool must never appear in its own registry.
+ */
+
+import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { cacheBadge, formatMs, sizeVerdict, statusColor, uriTail } from "../format";
+import type { ImageRecord } from "../types";
+
+interface ImageRowProps {
+  record: ImageRecord;
+  onPress: (id: number) => void;
+}
+
+export function ImageRow({ record, onPress }: ImageRowProps) {
+  const verdict = sizeVerdict(record);
+  const cache = cacheBadge(record);
+  const showThumb =
+    record.sourceKind === "network" ||
+    record.sourceKind === "asset" ||
+    record.sourceKind === "file";
+
+  return (
+    <TouchableOpacity
+      style={styles.row}
+      testID={`buoy-image-row-${record.id}`}
+      onPress={() => onPress(record.id)}
+    >
+      <View style={styles.thumbBox}>
+        {showThumb && record.uri ? (
+          <Image
+            testID="buoy-internal-images-thumb"
+            source={{ uri: record.uri }}
+            style={styles.thumb}
+            resizeMode="cover"
+          />
+        ) : (
+          <Text style={styles.thumbFallback}>?</Text>
+        )}
+        <View style={[styles.statusDot, { backgroundColor: statusColor(record) }]} />
+      </View>
+
+      <View style={styles.main}>
+        <Text style={styles.name} numberOfLines={1}>
+          {uriTail(record.uri)}
+        </Text>
+        <View style={styles.metaRow}>
+          <Text style={[styles.badge, { color: macOSColors.text.muted }]}>
+            {record.lib === "expo" ? "EXPO" : "RN"}
+          </Text>
+          <Text style={[styles.badge, { color: cache.color }]}>{cache.label}</Text>
+          {record.overrideLabel ? (
+            <Text style={[styles.badge, { color: macOSColors.semantic.warning }]}>SIM</Text>
+          ) : null}
+          <Text style={styles.meta}>{formatMs(record.durationMs)}</Text>
+          {record.intrinsic ? (
+            <Text style={styles.meta}>
+              {record.intrinsic.width}×{record.intrinsic.height}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      <View style={styles.right}>
+        {record.status === "error" ? (
+          <Text style={[styles.verdict, { color: macOSColors.semantic.error }]}>FAILED</Text>
+        ) : verdict.label ? (
+          <Text style={[styles.verdict, { color: verdict.color }]}>{verdict.label}</Text>
+        ) : null}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: macOSColors.border.default,
+    gap: 10,
+  },
+  thumbBox: {
+    width: 40,
+    height: 40,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.input,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  thumb: {
+    width: 40,
+    height: 40,
+  },
+  thumbFallback: {
+    color: macOSColors.text.muted,
+    fontSize: 16,
+    fontWeight: "700",
+  },
+  statusDot: {
+    position: "absolute",
+    right: 2,
+    bottom: 2,
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: macOSColors.background.base,
+  },
+  main: {
+    flex: 1,
+    gap: 2,
+  },
+  name: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  metaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  badge: {
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+  },
+  meta: {
+    color: macOSColors.text.secondary,
+    fontSize: 10,
+    fontVariant: ["tabular-nums"],
+  },
+  right: {
+    alignItems: "flex-end",
+  },
+  verdict: {
+    fontSize: 10,
+    fontWeight: "700",
+  },
+});

package/src/components/ImagesHeader.tsx

@@ -0,0 +1,77 @@
+/**
+ * ImagesHeader — shared ModalHeader wiring for the Images tool, matching the
+ * Console/Network header pattern. List mode shows aggregate stats, the shared
+ * ToolbarCopyButton (full registry report) and the shared ToolbarClearButton;
+ * detail mode shows back navigation plus the copy button for that record's
+ * report. Copy behavior (Pro gating, hint banner, success/error feedback)
+ * comes from shared-ui — identical to every other tool.
+ */
+
+import {
+  ModalHeader,
+  ToolbarClearButton,
+  ToolbarCopyButton,
+} from "@buoy-gg/shared-ui";
+import { formatBytes } from "../format";
+import type { ImageStats } from "../types";
+
+interface ImagesHeaderProps {
+  stats: ImageStats;
+  detailOpen: boolean;
+  /** Index of the open record in the list (-1 when unknown). */
+  detailIndex?: number;
+  detailTotal?: number;
+  onCloseDetail: () => void;
+  onClear: () => void;
+  /** Builds the mode-appropriate report (registry or single record). */
+  getReport: () => string;
+  /** App-stack back (from the floating menu's AppHost). */
+  onBack?: () => void;
+}
+
+export function ImagesHeader({
+  stats,
+  detailOpen,
+  detailIndex = -1,
+  detailTotal = 0,
+  onCloseDetail,
+  onClear,
+  getReport,
+  onBack,
+}: ImagesHeaderProps) {
+  if (detailOpen) {
+    const counter =
+      detailIndex >= 0 && detailTotal > 0
+        ? `${detailIndex + 1} of ${detailTotal}`
+        : undefined;
+    return (
+      <ModalHeader>
+        <ModalHeader.Navigation onBack={onCloseDetail} />
+        <ModalHeader.Content title="Image detail" subtitle={counter} />
+        <ModalHeader.Actions>
+          <ToolbarCopyButton value={getReport} />
+        </ModalHeader.Actions>
+      </ModalHeader>
+    );
+  }
+
+  const subtitleParts = [
+    `${stats.total} images`,
+    `${stats.errors} failed`,
+    `≈${formatBytes(stats.estDecodedBytes)} decoded`,
+  ];
+  if (stats.estWastedBytes > 0) {
+    subtitleParts.push(`${formatBytes(stats.estWastedBytes)} wasted`);
+  }
+
+  return (
+    <ModalHeader>
+      {onBack ? <ModalHeader.Navigation onBack={onBack} /> : null}
+      <ModalHeader.Content title="Images" subtitle={subtitleParts.join(" · ")} />
+      <ModalHeader.Actions>
+        <ToolbarCopyButton value={getReport} />
+        <ToolbarClearButton onPress={onClear} />
+      </ModalHeader.Actions>
+    </ModalHeader>
+  );
+}

package/src/components/ImagesIcon.tsx

@@ -0,0 +1,66 @@
+import { View, Text, StyleSheet } from "react-native";
+
+/** Tool accent color (photo violet). */
+export const IMAGES_ICON_COLOR = "#C084FC";
+
+interface ImagesIconProps {
+  size: number;
+  color?: string;
+}
+
+/**
+ * Dependency-free "picture" glyph: rounded frame with a sun dot and a
+ * mountain-ish baseline, rendered from plain views.
+ */
+export function ImagesIcon({ size, color = IMAGES_ICON_COLOR }: ImagesIconProps) {
+  return (
+    <View
+      style={[
+        styles.frame,
+        {
+          width: size,
+          height: size,
+          borderRadius: size * 0.2,
+          borderColor: color,
+        },
+      ]}
+    >
+      <View
+        style={[
+          styles.sun,
+          {
+            width: size * 0.18,
+            height: size * 0.18,
+            borderRadius: size * 0.09,
+            backgroundColor: color,
+            top: size * 0.18,
+            right: size * 0.2,
+          },
+        ]}
+      />
+      <Text
+        style={{
+          color,
+          fontSize: size * 0.52,
+          fontWeight: "700",
+          lineHeight: size * 0.62,
+          marginTop: size * 0.28,
+        }}
+      >
+        {"▲"}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: {
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "flex-end",
+    overflow: "hidden",
+  },
+  sun: {
+    position: "absolute",
+  },
+});