@sanity/ailf-studio 0.1.20 → 0.1.21

package/dist/index.js

@@ -2834,7 +2834,7 @@ import {
   TabPanel as TabPanel2,
   Text as Text29
 } from "@sanity/ui";
-import { useCallback as useCallback19 } from "react";
+import { useCallback as useCallback20 } from "react";
 import { useRouter as useRouter3 } from "sanity/router";
 
 // src/components/ComparisonView.tsx
@@ -3505,7 +3505,7 @@ function formatOption(r) {
 
 // src/components/LatestReports.tsx
 import { Button, Card as Card7, Flex as Flex10, Stack as Stack10, Text as Text14 } from "@sanity/ui";
-import { useCallback as useCallback9, useEffect as useEffect4, useMemo as useMemo4, useState as useState4 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
 import { useClient as useClient4 } from "sanity";
 import { useRouter } from "sanity/router";
 
@@ -3518,7 +3518,8 @@ var BAR_STYLE = {
   alignItems: "center",
   background: "var(--card-bg-color)",
   display: "flex",
-  gap: 12,
+  flexWrap: "wrap",
+  gap: 8,
   padding: "8px 12px"
 };
 var PILL_GROUP_STYLE = {
@@ -3575,7 +3576,7 @@ function FilterBar({
     [onQueryChange]
   );
   return /* @__PURE__ */ jsxs11("div", { style: BAR_STYLE, children: [
-    /* @__PURE__ */ jsx13("div", { style: { maxWidth: 320, minWidth: 180, flex: "0 1 320px" }, children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx13("div", { style: { maxWidth: 320, minWidth: 140, flex: "1 1 200px" }, children: /* @__PURE__ */ jsx13(
       TextInput,
       {
         fontSize: 2,
@@ -3612,7 +3613,7 @@ function FilterBar({
         value: trigger
       }
     ),
-    /* @__PURE__ */ jsx13("div", { style: { flex: 1 } }),
+    /* @__PURE__ */ jsx13("div", { style: { flex: "1 0 0px" } }),
     hasActiveFilters && /* @__PURE__ */ jsxs11(
       "button",
       {
@@ -3759,8 +3760,50 @@ import {
   Stack as Stack9,
   Text as Text13
 } from "@sanity/ui";
+
+// src/components/report-table/useContainerWidth.ts
+import { useCallback as useCallback8, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+var FULL_MIN = 900;
+var COMPACT_MIN = 600;
+function getTier(width) {
+  if (width >= FULL_MIN) return "full";
+  if (width >= COMPACT_MIN) return "compact";
+  return "narrow";
+}
+function useContainerWidth() {
+  const [width, setWidth] = useState4(1200);
+  const observerRef = useRef3(null);
+  const elementRef = useRef3(null);
+  const ref = useCallback8((node) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    elementRef.current = node;
+    if (node) {
+      setWidth(node.getBoundingClientRect().width);
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setWidth(entry.contentRect.width);
+        }
+      });
+      observer.observe(node);
+      observerRef.current = observer;
+    }
+  }, []);
+  useEffect4(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  return { ref, tier: getTier(width), width };
+}
+
+// src/components/report-table/ReportTable.tsx
 import { ClockIcon, TrendUpwardIcon } from "@sanity/icons";
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 
 // src/components/report-card/types.ts
 function formatCardDate(iso) {
@@ -3804,22 +3847,10 @@ var SCORE_COLORS = {
   "needs-work": { bg: "rgba(230, 126, 34, 0.15)", fg: "#e67e22" },
   critical: { bg: "rgba(231, 76, 60, 0.15)", fg: "#e74c3c" }
 };
-var GRID_COLUMNS = "72px 1fr 130px 100px 100px 100px";
-var HEADER_STYLE = {
-  borderBottom: "1px solid var(--card-border-color)",
-  display: "grid",
-  gap: "0 16px",
-  gridTemplateColumns: GRID_COLUMNS,
-  padding: "12px 12px 8px"
-};
-var ROW_STYLE = {
-  alignItems: "start",
-  borderBottom: "1px solid var(--card-border-color)",
-  cursor: "pointer",
-  display: "grid",
-  gap: "0 16px",
-  gridTemplateColumns: GRID_COLUMNS,
-  padding: "14px 12px"
+var GRID = {
+  full: "72px 1fr 130px 100px 100px 100px",
+  compact: "56px 1fr 110px",
+  narrow: "48px 1fr"
 };
 var TABLE_HOVER_STYLES = `
 .ailf-row:hover { background: var(--card-muted-bg-color); }
@@ -3830,47 +3861,63 @@ function ReportTable({
   sort,
   onSortChange
 }) {
+  const { ref, tier } = useContainerWidth();
   return /* @__PURE__ */ jsxs12(Fragment4, { children: [
     /* @__PURE__ */ jsx15("style", { children: TABLE_HOVER_STYLES }),
-    /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsxs12("div", { style: HEADER_STYLE, children: [
-        /* @__PURE__ */ jsx15("div", {}),
-        /* @__PURE__ */ jsx15(
-          ColHeader,
-          {
-            active: sort.field === "name",
-            direction: sort.direction,
-            label: "Report",
-            onClick: () => onSortChange("name")
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          ColHeader,
-          {
-            active: sort.field === "score",
-            direction: sort.direction,
-            label: "Change",
-            onClick: () => onSortChange("score")
-          }
-        ),
-        /* @__PURE__ */ jsx15(ColHeader, { label: "Mode" }),
-        /* @__PURE__ */ jsx15(ColHeader, { label: "Trigger" }),
-        /* @__PURE__ */ jsx15(
-          ColHeader,
-          {
-            active: sort.field === "date",
-            direction: sort.direction,
-            label: "Time",
-            onClick: () => onSortChange("date"),
-            align: "right"
-          }
-        )
-      ] }),
+    /* @__PURE__ */ jsxs12("div", { ref, children: [
+      /* @__PURE__ */ jsxs12(
+        "div",
+        {
+          style: {
+            borderBottom: "1px solid var(--card-border-color)",
+            display: "grid",
+            gap: "0 16px",
+            gridTemplateColumns: GRID[tier],
+            padding: "12px 12px 8px"
+          },
+          children: [
+            /* @__PURE__ */ jsx15("div", {}),
+            /* @__PURE__ */ jsx15(
+              ColHeader,
+              {
+                active: sort.field === "name",
+                direction: sort.direction,
+                label: "Report",
+                onClick: () => onSortChange("name")
+              }
+            ),
+            tier !== "narrow" && /* @__PURE__ */ jsx15(
+              ColHeader,
+              {
+                active: sort.field === "score",
+                direction: sort.direction,
+                label: "Change",
+                onClick: () => onSortChange("score")
+              }
+            ),
+            tier === "full" && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+              /* @__PURE__ */ jsx15(ColHeader, { label: "Mode" }),
+              /* @__PURE__ */ jsx15(ColHeader, { label: "Trigger" }),
+              /* @__PURE__ */ jsx15(
+                ColHeader,
+                {
+                  active: sort.field === "date",
+                  direction: sort.direction,
+                  label: "Time",
+                  onClick: () => onSortChange("date"),
+                  align: "right"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
       reports.map((report) => /* @__PURE__ */ jsx15(
         ReportRow,
         {
           onSelect: onSelectReport,
-          report
+          report,
+          tier
         },
         report._id
       ))
@@ -3879,9 +3926,10 @@ function ReportTable({
 }
 function ReportRow({
   report,
-  onSelect
+  onSelect,
+  tier
 }) {
-  const handleClick = useCallback8(() => {
+  const handleClick = useCallback9(() => {
     onSelect(report.reportId);
   }, [onSelect, report.reportId]);
   const rounded = Math.round(report.overall);
@@ -3895,123 +3943,176 @@ function ReportRow({
   const hasAreas = report.areas && report.areas.length > 0;
   const hasDocs = report.targetDocuments && report.targetDocuments.length > 0;
   const git = report.git;
-  return /* @__PURE__ */ jsxs12("div", { className: "ailf-row", onClick: handleClick, style: ROW_STYLE, children: [
-    /* @__PURE__ */ jsx15(Flex9, { align: "center", justify: "center", style: { paddingTop: 2 }, children: /* @__PURE__ */ jsx15(
-      "div",
-      {
-        style: {
-          alignItems: "center",
-          background: colors.bg,
-          border: `1px solid ${colors.fg}40`,
-          borderRadius: 8,
-          color: colors.fg,
-          display: "flex",
-          fontSize: 22,
-          fontWeight: 700,
-          height: 48,
-          justifyContent: "center",
-          lineHeight: 1,
-          width: 56
-        },
-        children: rounded
-      }
-    ) }),
-    /* @__PURE__ */ jsxs12(Stack9, { space: 2, children: [
-      /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 2, wrap: "wrap", children: [
-        /* @__PURE__ */ jsx15(Text13, { size: 3, weight: "semibold", children: report.tag ?? formatCardDate(report.completedAt) }),
-        git && /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 2, children: [
-          /* @__PURE__ */ jsxs12(Inline, { space: 1, children: [
-            /* @__PURE__ */ jsx15(GitBranchIcon, { style: { opacity: 0.6 } }),
-            /* @__PURE__ */ jsx15(Code, { size: 2, children: git.branch })
-          ] }),
-          git.prNumber && /* @__PURE__ */ jsxs12(Text13, { muted: true, size: 2, children: [
-            "#",
-            git.prNumber
-          ] }),
-          /* @__PURE__ */ jsx15(Code, { size: 1, style: { opacity: 0.5 }, children: git.sha.slice(0, 7) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 2, wrap: "wrap", children: [
-        report.source && /* @__PURE__ */ jsx15(
-          Badge4,
+  const isSmall = tier !== "full";
+  const scoreSize = isSmall ? 40 : 48;
+  const scoreWidth = isSmall ? 44 : 56;
+  const scoreFontSize = isSmall ? 18 : 22;
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: "ailf-row",
+      onClick: handleClick,
+      style: {
+        alignItems: "start",
+        borderBottom: "1px solid var(--card-border-color)",
+        cursor: "pointer",
+        display: "grid",
+        gap: "0 16px",
+        gridTemplateColumns: GRID[tier],
+        padding: isSmall ? "10px 8px" : "14px 12px"
+      },
+      children: [
+        /* @__PURE__ */ jsx15(Flex9, { align: "center", justify: "center", style: { paddingTop: 2 }, children: /* @__PURE__ */ jsx15(
+          "div",
           {
-            fontSize: 1,
-            padding: 1,
-            radius: 1,
-            tone: SOURCE_TONE[report.source] ?? "default",
-            children: report.source
+            style: {
+              alignItems: "center",
+              background: colors.bg,
+              border: `1px solid ${colors.fg}40`,
+              borderRadius: isSmall ? 6 : 8,
+              color: colors.fg,
+              display: "flex",
+              fontSize: scoreFontSize,
+              fontWeight: 700,
+              height: scoreSize,
+              justifyContent: "center",
+              lineHeight: 1,
+              width: scoreWidth
+            },
+            children: rounded
           }
-        ),
-        report.models?.map((model) => /* @__PURE__ */ jsx15(
-          Badge4,
-          {
-            fontSize: 1,
-            padding: 1,
-            radius: 1,
-            tone: "default",
-            children: model
-          },
-          model
-        )),
-        report.perspective && /* @__PURE__ */ jsx15(OutlineBadge, { tone: "cyan", children: report.perspective }),
-        report.durationMs != null && report.durationMs > 0 && /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 1, children: [
-          /* @__PURE__ */ jsx15(ClockIcon, { style: { fontSize: 13, opacity: 0.5 } }),
-          /* @__PURE__ */ jsx15(Text13, { muted: true, size: 1, children: formatDuration(report.durationMs) })
-        ] })
-      ] }),
-      (hasAreas || hasDocs) && /* @__PURE__ */ jsxs12(Flex9, { gap: 2, wrap: "wrap", children: [
-        hasAreas && report.areas.map((area) => /* @__PURE__ */ jsx15(OutlineBadge, { tone: "purple", children: area }, `a-${area}`)),
-        hasDocs && report.targetDocuments.map((doc) => /* @__PURE__ */ jsx15(OutlineBadge, { tone: "positive", children: doc }, `d-${doc}`))
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs12(
-      Flex9,
-      {
-        align: "flex-start",
-        direction: "column",
-        gap: 2,
-        style: { paddingTop: 2 },
-        children: [
-          hasDelta && /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 1, children: [
-            /* @__PURE__ */ jsx15(
-              TrendUpwardIcon,
+        ) }),
+        /* @__PURE__ */ jsxs12(Stack9, { space: 2, children: [
+          /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx15(Text13, { size: isSmall ? 2 : 3, weight: "semibold", children: report.tag ?? formatCardDate(report.completedAt) }),
+            git && /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ jsxs12(Inline, { space: 1, children: [
+                /* @__PURE__ */ jsx15(GitBranchIcon, { style: { opacity: 0.6 } }),
+                /* @__PURE__ */ jsx15(Code, { size: isSmall ? 1 : 2, children: git.branch })
+              ] }),
+              git.prNumber && /* @__PURE__ */ jsxs12(Text13, { muted: true, size: isSmall ? 1 : 2, children: [
+                "#",
+                git.prNumber
+              ] }),
+              tier === "full" && /* @__PURE__ */ jsx15(Code, { size: 1, style: { opacity: 0.5 }, children: git.sha.slice(0, 7) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 2, wrap: "wrap", children: [
+            report.source && /* @__PURE__ */ jsx15(
+              Badge4,
               {
-                style: {
-                  color: deltaUp ? "var(--card-badge-positive-dot-color)" : "var(--card-badge-critical-dot-color)",
-                  fontSize: 17,
-                  transform: deltaUp ? void 0 : "scaleY(-1)"
-                }
+                fontSize: isSmall ? 0 : 1,
+                padding: 1,
+                radius: 1,
+                tone: SOURCE_TONE[report.source] ?? "default",
+                children: report.source
               }
             ),
-            /* @__PURE__ */ jsxs12(
-              Text13,
+            report.models?.map((model) => /* @__PURE__ */ jsx15(
+              Badge4,
               {
-                size: 3,
-                style: {
-                  color: deltaUp ? "var(--card-badge-positive-dot-color)" : "var(--card-badge-critical-dot-color)",
-                  fontWeight: 600
-                },
-                children: [
-                  deltaUp ? "+" : "",
-                  Math.round(delta)
-                ]
-              }
-            )
+                fontSize: isSmall ? 0 : 1,
+                padding: 1,
+                radius: 1,
+                tone: "default",
+                children: model
+              },
+              model
+            )),
+            report.perspective && /* @__PURE__ */ jsx15(OutlineBadge, { tone: "cyan", children: report.perspective }),
+            report.durationMs != null && report.durationMs > 0 && /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 1, children: [
+              /* @__PURE__ */ jsx15(ClockIcon, { style: { fontSize: 13, opacity: 0.5 } }),
+              /* @__PURE__ */ jsx15(Text13, { muted: true, size: isSmall ? 0 : 1, children: formatDuration(report.durationMs) })
+            ] })
           ] }),
-          improvedCount > 0 && /* @__PURE__ */ jsxs12(OutlineBadge, { tone: "positive", children: [
-            improvedCount,
-            " improved"
+          (hasAreas || hasDocs) && /* @__PURE__ */ jsxs12(Flex9, { gap: 2, wrap: "wrap", children: [
+            hasAreas && report.areas.map((area) => /* @__PURE__ */ jsx15(OutlineBadge, { tone: "purple", children: area }, `a-${area}`)),
+            hasDocs && report.targetDocuments.map((doc) => /* @__PURE__ */ jsx15(OutlineBadge, { tone: "positive", children: doc }, `d-${doc}`))
           ] }),
-          regressedCount > 0 && /* @__PURE__ */ jsxs12(OutlineBadge, { tone: "critical", children: [
-            regressedCount,
-            " regressed"
+          isSmall && /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx15(OutlineBadge, { tone: MODE_TONE[report.mode] ?? "default", children: report.mode }),
+            report.trigger && /* @__PURE__ */ jsx15(OutlineBadge, { tone: TRIGGER_TONE[report.trigger] ?? "default", children: report.trigger }),
+            /* @__PURE__ */ jsx15(
+              Text13,
+              {
+                muted: true,
+                size: 0,
+                title: new Date(report.completedAt).toISOString(),
+                children: formatRelativeTime(report.completedAt)
+              }
+            ),
+            tier === "narrow" && hasDelta && /* @__PURE__ */ jsx15(DeltaInline, { delta, deltaUp }),
+            tier === "narrow" && improvedCount > 0 && /* @__PURE__ */ jsxs12(OutlineBadge, { tone: "positive", children: [
+              improvedCount,
+              " improved"
+            ] }),
+            tier === "narrow" && regressedCount > 0 && /* @__PURE__ */ jsxs12(OutlineBadge, { tone: "critical", children: [
+              regressedCount,
+              " regressed"
+            ] })
           ] })
-        ]
+        ] }),
+        tier !== "narrow" && /* @__PURE__ */ jsxs12(
+          Flex9,
+          {
+            align: "flex-start",
+            direction: "column",
+            gap: 2,
+            style: { paddingTop: 2 },
+            children: [
+              hasDelta && /* @__PURE__ */ jsx15(DeltaInline, { delta, deltaUp }),
+              improvedCount > 0 && /* @__PURE__ */ jsxs12(OutlineBadge, { tone: "positive", children: [
+                improvedCount,
+                " improved"
+              ] }),
+              regressedCount > 0 && /* @__PURE__ */ jsxs12(OutlineBadge, { tone: "critical", children: [
+                regressedCount,
+                " regressed"
+              ] })
+            ]
+          }
+        ),
+        tier === "full" && /* @__PURE__ */ jsx15("div", { style: { paddingTop: 2 }, children: /* @__PURE__ */ jsx15(OutlineBadge, { tone: MODE_TONE[report.mode] ?? "default", children: report.mode }) }),
+        tier === "full" && /* @__PURE__ */ jsx15("div", { style: { paddingTop: 2 }, children: report.trigger && /* @__PURE__ */ jsx15(OutlineBadge, { tone: TRIGGER_TONE[report.trigger] ?? "default", children: report.trigger }) }),
+        tier === "full" && /* @__PURE__ */ jsx15("div", { style: { paddingTop: 2, textAlign: "right" }, children: /* @__PURE__ */ jsx15(
+          Text13,
+          {
+            muted: true,
+            size: 2,
+            title: new Date(report.completedAt).toISOString(),
+            children: formatRelativeTime(report.completedAt)
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DeltaInline({ delta, deltaUp }) {
+  return /* @__PURE__ */ jsxs12(Flex9, { align: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx15(
+      TrendUpwardIcon,
+      {
+        style: {
+          color: deltaUp ? "var(--card-badge-positive-dot-color)" : "var(--card-badge-critical-dot-color)",
+          fontSize: 15,
+          transform: deltaUp ? void 0 : "scaleY(-1)"
+        }
       }
     ),
-    /* @__PURE__ */ jsx15("div", { style: { paddingTop: 2 }, children: /* @__PURE__ */ jsx15(OutlineBadge, { tone: MODE_TONE[report.mode] ?? "default", children: report.mode }) }),
-    /* @__PURE__ */ jsx15("div", { style: { paddingTop: 2 }, children: report.trigger && /* @__PURE__ */ jsx15(OutlineBadge, { tone: TRIGGER_TONE[report.trigger] ?? "default", children: report.trigger }) }),
-    /* @__PURE__ */ jsx15("div", { style: { paddingTop: 2, textAlign: "right" }, children: /* @__PURE__ */ jsx15(Text13, { muted: true, size: 2, title: new Date(report.completedAt).toISOString(), children: formatRelativeTime(report.completedAt) }) })
+    /* @__PURE__ */ jsxs12(
+      Text13,
+      {
+        size: 2,
+        style: {
+          color: deltaUp ? "var(--card-badge-positive-dot-color)" : "var(--card-badge-critical-dot-color)",
+          fontWeight: 600
+        },
+        children: [
+          deltaUp ? "+" : "",
+          Math.round(delta)
+        ]
+      }
+    )
   ] });
 }
 var MODE_TONE = {
@@ -4040,7 +4141,7 @@ function ColHeader({
   onClick,
   align
 }) {
-  const handleKeyDown = useCallback8(
+  const handleKeyDown = useCallback9(
     (e) => {
       if (onClick && (e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
@@ -4105,19 +4206,19 @@ function LatestReports({
   const router = useRouter();
   const routerState = router.state;
   const urlParams = routerState._searchParams;
-  const [searchQuery, setSearchQuery] = useState4(
+  const [searchQuery, setSearchQuery] = useState5(
     () => readParam(urlParams, "q") ?? ""
   );
-  const [mode, setMode] = useState4(
+  const [mode, setMode] = useState5(
     () => readParam(urlParams, "mode")
   );
-  const [source, setSource] = useState4(
+  const [source, setSource] = useState5(
     () => readParam(urlParams, "source")
   );
-  const [trigger, setTrigger] = useState4(
+  const [trigger, setTrigger] = useState5(
     () => readParam(urlParams, "trigger")
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const params = buildSearchParams({
       q: searchQuery,
       mode,
@@ -4126,18 +4227,18 @@ function LatestReports({
     });
     router.navigate({ ...router.state, _searchParams: params });
   }, [searchQuery, mode, source, trigger]);
-  const [initialLoading, setInitialLoading] = useState4(true);
-  const [loadingMore, setLoadingMore] = useState4(false);
-  const [reports, setReports] = useState4([]);
-  const [hasMore, setHasMore] = useState4(true);
-  const [modes, setModes] = useState4([]);
-  const [sources, setSources] = useState4([]);
-  const [triggers, setTriggers] = useState4([]);
-  const [sort, setSort] = useState4({
+  const [initialLoading, setInitialLoading] = useState5(true);
+  const [loadingMore, setLoadingMore] = useState5(false);
+  const [reports, setReports] = useState5([]);
+  const [hasMore, setHasMore] = useState5(true);
+  const [modes, setModes] = useState5([]);
+  const [sources, setSources] = useState5([]);
+  const [triggers, setTriggers] = useState5([]);
+  const [sort, setSort] = useState5({
     direction: "desc",
     field: "date"
   });
-  useEffect4(() => {
+  useEffect5(() => {
     setHasMore(true);
     client.fetch(latestReportsQuery, {
       limit: pageSize,
@@ -4154,7 +4255,7 @@ function LatestReports({
       setInitialLoading(false);
     });
   }, [client, pageSize, mode, source]);
-  const handleLoadMore = useCallback9(() => {
+  const handleLoadMore = useCallback10(() => {
     if (loadingMore || !hasMore) return;
     setLoadingMore(true);
     const nextLimit = reports.length + pageSize;
@@ -4171,7 +4272,7 @@ function LatestReports({
       setLoadingMore(false);
     });
   }, [client, hasMore, loadingMore, mode, pageSize, reports.length, source]);
-  useEffect4(() => {
+  useEffect5(() => {
     client.fetch(distinctModesQuery).then((data) => setModes((data ?? []).sort())).catch(() => setModes([]));
     client.fetch(distinctSourcesQuery).then((data) => setSources((data ?? []).sort())).catch(() => setSources([]));
     client.fetch(distinctTriggersQuery).then((data) => setTriggers((data ?? []).sort())).catch(() => setTriggers([]));
@@ -4213,12 +4314,12 @@ function LatestReports({
     });
     return result;
   }, [reports, searchQuery, trigger, sort]);
-  const handleSortFieldChange = useCallback9((field) => {
+  const handleSortFieldChange = useCallback10((field) => {
     setSort(
       (prev) => prev.field === field ? { ...prev, direction: prev.direction === "asc" ? "desc" : "asc" } : { direction: "desc", field }
     );
   }, []);
-  const handleReset = useCallback9(() => {
+  const handleReset = useCallback10(() => {
     setSearchQuery("");
     setMode(null);
     setSource(null);
@@ -4296,15 +4397,15 @@ import {
   Tooltip as Tooltip8
 } from "@sanity/ui";
 import {
-  useCallback as useCallback17,
-  useEffect as useEffect6,
+  useCallback as useCallback18,
+  useEffect as useEffect7,
   useMemo as useMemo6,
-  useState as useState12
+  useState as useState13
 } from "react";
 import { useClient as useClient10 } from "sanity";
 
 // src/components/report-detail/AgentActivitySection.tsx
-import { useMemo as useMemo5, useState as useState5 } from "react";
+import { useMemo as useMemo5, useState as useState6 } from "react";
 import { HelpCircleIcon as HelpCircleIcon5, SearchIcon as SearchIcon3 } from "@sanity/icons";
 import {
   Badge as Badge5,
@@ -4479,7 +4580,7 @@ function FeatureActivityCard({
   ] }) });
 }
 function SearchQueryList({ queries }) {
-  const [filter, setFilter] = useState5("");
+  const [filter, setFilter] = useState6("");
   const filtered = useMemo5(() => {
     if (!filter) return queries;
     const lower = filter.toLowerCase();
@@ -4868,7 +4969,7 @@ function AreaBadgeGroup({
 // src/components/report-detail/LineageCard.tsx
 import { LinkIcon as LinkIcon2 } from "@sanity/icons";
 import { Badge as Badge7, Card as Card13, Flex as Flex13, Stack as Stack15, Text as Text20 } from "@sanity/ui";
-import { useCallback as useCallback10, useEffect as useEffect5, useState as useState6 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect6, useState as useState7 } from "react";
 import { useClient as useClient5 } from "sanity";
 import { useRouter as useRouter2 } from "sanity/router";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -4887,8 +4988,8 @@ function LineageCard({ provenance, reportId }) {
   const { lineage } = provenance;
   const router = useRouter2();
   const client = useClient5({ apiVersion: API_VERSION });
-  const [spawned, setSpawned] = useState6([]);
-  useEffect5(() => {
+  const [spawned, setSpawned] = useState7([]);
+  useEffect6(() => {
     let cancelled = false;
     client.fetch(SPAWNED_REPORTS_QUERY, {
       reportId,
@@ -4935,7 +5036,7 @@ function LineageLink({
   reportId,
   router
 }) {
-  const handleClick = useCallback10(() => {
+  const handleClick = useCallback11(() => {
     router.navigate({ reportId });
   }, [reportId, router]);
   return /* @__PURE__ */ jsxs18(Flex13, { align: "center", gap: 2, children: [
@@ -4964,7 +5065,7 @@ function SpawnedReportRow({
   report,
   router
 }) {
-  const handleClick = useCallback10(() => {
+  const handleClick = useCallback11(() => {
     router.navigate({ reportId: report.reportId });
   }, [report.reportId, router]);
   const dateLabel = formatShortDate(report.completedAt);
@@ -4999,7 +5100,7 @@ function formatShortDate(iso) {
 }
 
 // src/components/report-detail/JudgmentList.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { HelpCircleIcon as HelpCircleIcon6 } from "@sanity/icons";
 import { Badge as Badge8, Box as Box11, Card as Card14, Flex as Flex14, Stack as Stack16, Text as Text21, Tooltip as Tooltip6 } from "@sanity/ui";
 
@@ -5074,7 +5175,7 @@ function JudgmentList({ judgments }) {
   ] }) });
 }
 function JudgmentCard({ judgment }) {
-  const [expanded, setExpanded] = useState7(false);
+  const [expanded, setExpanded] = useState8(false);
   const dimLabel = DIMENSION_LABELS[judgment.dimension] ?? judgment.dimension;
   const sep = judgment.taskId.indexOf(" - ");
   const taskName = sep > 0 ? judgment.taskId.substring(sep + 3) : judgment.taskId;
@@ -5131,7 +5232,7 @@ var editLinkStyle = {
 function DocBadge({
   doc
 }) {
-  const [hovered, setHovered] = useState7(false);
+  const [hovered, setHovered] = useState8(false);
   const isLinked = Boolean(doc.documentId);
   const tooltipLabel = isLinked ? `Edit "${doc.title || doc.slug}"` : doc.title || doc.slug;
   const badge = /* @__PURE__ */ jsx24(Badge8, { mode: "outline", tone: isLinked && hovered ? "caution" : "primary", children: doc.slug });
@@ -5519,20 +5620,20 @@ import {
   MenuDivider,
   useToast as useToast7
 } from "@sanity/ui";
-import { useCallback as useCallback16, useState as useState11 } from "react";
+import { useCallback as useCallback17, useState as useState12 } from "react";
 import { useClient as useClient9 } from "sanity";
 
 // src/components/report-detail/report-actions/CopyReportAction.tsx
 import { ClipboardIcon } from "@sanity/icons";
 import { MenuItem, useToast as useToast2 } from "@sanity/ui";
-import { useCallback as useCallback11, useState as useState8 } from "react";
+import { useCallback as useCallback12, useState as useState9 } from "react";
 import { useClient as useClient6 } from "sanity";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function CopyReportAction({ documentId }) {
   const client = useClient6({ apiVersion: API_VERSION });
   const toast = useToast2();
-  const [copying, setCopying] = useState8(false);
-  const handleClick = useCallback11(async () => {
+  const [copying, setCopying] = useState9(false);
+  const handleClick = useCallback12(async () => {
     setCopying(true);
     try {
       const doc = await client.fetch(
@@ -5578,11 +5679,11 @@ function CopyReportAction({ documentId }) {
 // src/components/report-detail/report-actions/CopyReportIdAction.tsx
 import { CopyIcon } from "@sanity/icons";
 import { MenuItem as MenuItem2, useToast as useToast3 } from "@sanity/ui";
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 function CopyReportIdAction({ reportId }) {
   const toast = useToast3();
-  const handleClick = useCallback12(() => {
+  const handleClick = useCallback13(() => {
     navigator.clipboard.writeText(reportId).then(
       () => {
         toast.push({
@@ -5606,13 +5707,13 @@ function CopyReportIdAction({ reportId }) {
 // src/components/report-detail/report-actions/CopyVisionQueryAction.tsx
 import { SearchIcon as SearchIcon4 } from "@sanity/icons";
 import { MenuItem as MenuItem3, useToast as useToast4 } from "@sanity/ui";
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback14 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 function CopyVisionQueryAction({
   reportId
 }) {
   const toast = useToast4();
-  const handleClick = useCallback13(() => {
+  const handleClick = useCallback14(() => {
     const query = `*[_type == "ailf.report" && reportId == "${reportId}"][0]`;
     navigator.clipboard.writeText(query).then(
       () => {
@@ -5715,7 +5816,7 @@ function DeleteReportAction({
 // src/components/report-detail/report-actions/DownloadReportAction.tsx
 import { DownloadIcon } from "@sanity/icons";
 import { MenuItem as MenuItem5, useToast as useToast5 } from "@sanity/ui";
-import { useCallback as useCallback14, useState as useState9 } from "react";
+import { useCallback as useCallback15, useState as useState10 } from "react";
 import { useClient as useClient7 } from "sanity";
 import { jsx as jsx33 } from "react/jsx-runtime";
 function DownloadReportAction({
@@ -5724,8 +5825,8 @@ function DownloadReportAction({
 }) {
   const client = useClient7({ apiVersion: API_VERSION });
   const toast = useToast5();
-  const [downloading, setDownloading] = useState9(false);
-  const handleClick = useCallback14(async () => {
+  const [downloading, setDownloading] = useState10(false);
+  const handleClick = useCallback15(async () => {
     setDownloading(true);
     try {
       const doc = await client.fetch(
@@ -5779,7 +5880,7 @@ function DownloadReportAction({
 // src/components/report-detail/report-actions/RerunEvaluationAction.tsx
 import { PlayIcon as PlayIcon2 } from "@sanity/icons";
 import { MenuItem as MenuItem6, useToast as useToast6 } from "@sanity/ui";
-import { useCallback as useCallback15, useState as useState10 } from "react";
+import { useCallback as useCallback16, useState as useState11 } from "react";
 import { useClient as useClient8, useCurrentUser as useCurrentUser2 } from "sanity";
 
 // src/lib/eval-scope.ts
@@ -5834,8 +5935,8 @@ function RerunEvaluationAction({
   const client = useClient8({ apiVersion: API_VERSION });
   const currentUser = useCurrentUser2();
   const toast = useToast6();
-  const [requesting, setRequesting] = useState10(false);
-  const handleClick = useCallback15(async () => {
+  const [requesting, setRequesting] = useState11(false);
+  const handleClick = useCallback16(async () => {
     setRequesting(true);
     try {
       const scope = extractEvalScope(provenance);
@@ -5883,7 +5984,7 @@ function ReportActions({
 }) {
   const client = useClient9({ apiVersion: API_VERSION });
   const toast = useToast7();
-  const handleCopyId = useCallback16(() => {
+  const handleCopyId = useCallback17(() => {
     navigator.clipboard.writeText(reportId).then(
       () => {
         toast.push({
@@ -5901,15 +6002,15 @@ function ReportActions({
       }
     );
   }, [reportId, toast]);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState11(false);
-  const [deleting, setDeleting] = useState11(false);
-  const handleRequestDelete = useCallback16(() => {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState12(false);
+  const [deleting, setDeleting] = useState12(false);
+  const handleRequestDelete = useCallback17(() => {
     setDeleteDialogOpen(true);
   }, []);
-  const handleDeleteClose = useCallback16(() => {
+  const handleDeleteClose = useCallback17(() => {
     if (!deleting) setDeleteDialogOpen(false);
   }, [deleting]);
-  const handleDeleteConfirm = useCallback16(async () => {
+  const handleDeleteConfirm = useCallback17(async () => {
     setDeleting(true);
     try {
       await client.delete(documentId);
@@ -6183,9 +6284,9 @@ function ReportDetail({
   reportId
 }) {
   const client = useClient10({ apiVersion: API_VERSION });
-  const [loading, setLoading] = useState12(true);
-  const [report, setReport] = useState12(null);
-  useEffect6(() => {
+  const [loading, setLoading] = useState13(true);
+  const [report, setReport] = useState13(null);
+  useEffect7(() => {
     let cancelled = false;
     setLoading(true);
     client.fetch(reportDetailQuery, { reportId }).then((data) => {
@@ -6222,7 +6323,7 @@ function ReportDetail({
     if (disabledTabs.has(parsed)) return "overview";
     return tabs.some((t) => t.id === parsed) ? parsed : "overview";
   }, [activeTab, disabledTabs, tabs]);
-  const handleTabClick = useCallback17(
+  const handleTabClick = useCallback18(
     (tabId) => {
       onTabChange(tabId === "overview" ? null : tabId);
     },
@@ -6375,7 +6476,7 @@ function getDisabledTabTooltip(tabId, summary) {
 
 // src/components/ScoreTimeline.tsx
 import { Card as Card19, Flex as Flex21, Select as Select2, Stack as Stack23, Text as Text28 } from "@sanity/ui";
-import { useCallback as useCallback18, useEffect as useEffect7, useMemo as useMemo7, useState as useState13 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect8, useMemo as useMemo7, useState as useState14 } from "react";
 import { useClient as useClient11 } from "sanity";
 import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var CHART_HEIGHT = 220;
@@ -6412,10 +6513,10 @@ function scoreForPoint(point, area) {
 }
 function ScoreTimeline({ mode = null, source = null }) {
   const client = useClient11({ apiVersion: API_VERSION });
-  const [dataPoints, setDataPoints] = useState13([]);
-  const [loading, setLoading] = useState13(true);
-  const [rangeDays, setRangeDays] = useState13(30);
-  const [selectedArea, setSelectedArea] = useState13(null);
+  const [dataPoints, setDataPoints] = useState14([]);
+  const [loading, setLoading] = useState14(true);
+  const [rangeDays, setRangeDays] = useState14(30);
+  const [selectedArea, setSelectedArea] = useState14(null);
   const areaNames = useMemo7(() => {
     const names = /* @__PURE__ */ new Set();
     for (const dp of dataPoints) {
@@ -6425,7 +6526,7 @@ function ScoreTimeline({ mode = null, source = null }) {
     }
     return Array.from(names).sort();
   }, [dataPoints]);
-  const fetchData = useCallback18(async () => {
+  const fetchData = useCallback19(async () => {
     setLoading(true);
     try {
       const startDate = rangeDays ? daysAgo(rangeDays) : "1970-01-01T00:00:00Z";
@@ -6440,7 +6541,7 @@ function ScoreTimeline({ mode = null, source = null }) {
       setLoading(false);
     }
   }, [client, mode, rangeDays, source]);
-  useEffect7(() => {
+  useEffect8(() => {
     void fetchData();
   }, [fetchData]);
   const chartPoints = useMemo7(() => {
@@ -6461,14 +6562,14 @@ function ScoreTimeline({ mode = null, source = null }) {
     if (chartPoints.length === 0) return 0;
     return chartPoints.reduce((sum, p) => sum + p.score, 0) / chartPoints.length;
   }, [chartPoints]);
-  const handleRangeChange = useCallback18(
+  const handleRangeChange = useCallback19(
     (e) => {
       const val = e.currentTarget.value;
       setRangeDays(val === "all" ? null : Number(val));
     },
     []
   );
-  const handleAreaChange = useCallback18(
+  const handleAreaChange = useCallback19(
     (e) => {
       const val = e.currentTarget.value;
       setSelectedArea(val || null);
@@ -6606,7 +6707,7 @@ function Dashboard() {
   const reportId = routerState.reportId ?? null;
   const isDetail = reportId !== null;
   const activeTab = isDetail ? "latest" : VIEW_PARAM_MAP[routerState.view ?? ""] ?? "latest";
-  const navigateToTab = useCallback19(
+  const navigateToTab = useCallback20(
     (tab) => {
       if (tab === "latest") {
         router.navigate({});
@@ -6616,13 +6717,13 @@ function Dashboard() {
     },
     [router]
   );
-  const handleSelectReport = useCallback19(
+  const handleSelectReport = useCallback20(
     (id) => {
       router.navigate({ reportId: id });
     },
     [router]
   );
-  const handleTabChange = useCallback19(
+  const handleTabChange = useCallback20(
     (tab) => {
       if (!routerState.reportId) return;
       if (tab) {
@@ -6633,7 +6734,7 @@ function Dashboard() {
     },
     [router, routerState.reportId]
   );
-  const handleBack = useCallback19(() => {
+  const handleBack = useCallback20(() => {
     router.navigate({});
   }, [router]);
   return /* @__PURE__ */ jsx40(Container, { width: 4, children: /* @__PURE__ */ jsxs29(Stack24, { padding: 4, space: 4, children: [
@@ -6706,7 +6807,7 @@ function ailfTool(options = {}) {
 // src/actions/RunEvaluationAction.tsx
 import { BarChartIcon as BarChartIcon2 } from "@sanity/icons";
 import { useToast as useToast8 } from "@sanity/ui";
-import { useCallback as useCallback20, useEffect as useEffect8, useRef as useRef3, useState as useState14 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect9, useRef as useRef4, useState as useState15 } from "react";
 import {
   getReleaseIdFromReleaseDocumentId as getReleaseIdFromReleaseDocumentId3,
   useClient as useClient12,
@@ -6737,10 +6838,10 @@ function createRunEvaluationAction(options = {}) {
     const projectId = useProjectId2();
     const currentUser = useCurrentUser3();
     const toast = useToast8();
-    const [state, setState] = useState14({ status: "loading" });
-    const requestedAtRef = useRef3(null);
+    const [state, setState] = useState15({ status: "loading" });
+    const requestedAtRef = useRef4(null);
     const perspectiveId = getReleaseIdFromReleaseDocumentId3(release._id);
-    useEffect8(() => {
+    useEffect9(() => {
       let cancelled = false;
       client.fetch(contentImpactQuery, buildReportQueryParams(perspectiveId)).then((results) => {
         if (cancelled) return;
@@ -6763,7 +6864,7 @@ function createRunEvaluationAction(options = {}) {
         cancelled = true;
       };
     }, [client, perspectiveId]);
-    useEffect8(() => {
+    useEffect9(() => {
       if (state.status !== "requested" && state.status !== "polling") return;
       const { requestId, startedAt } = state;
       if (state.status === "requested") {
@@ -6813,7 +6914,7 @@ function createRunEvaluationAction(options = {}) {
       }, POLL_INTERVAL_MS2);
       return () => clearInterval(interval);
     }, [client, perspectiveId, state]);
-    useEffect8(() => {
+    useEffect9(() => {
       if (state.status !== "error") return;
       const timer = setTimeout(() => {
         client.fetch(contentImpactQuery, buildReportQueryParams(perspectiveId)).then((results) => {
@@ -6833,7 +6934,7 @@ function createRunEvaluationAction(options = {}) {
       }, 15e3);
       return () => clearTimeout(timer);
     }, [client, perspectiveId, state]);
-    const handleRequest = useCallback20(async () => {
+    const handleRequest = useCallback21(async () => {
       const releaseTitle = release.metadata?.title ?? perspectiveId ?? "release";
       const tag = `release-${slugify3(releaseTitle)}-${dateStamp3()}`;
       const now = Date.now();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ailf-studio",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "AI Literacy Framework — Sanity Studio dashboard plugin",
   "type": "module",
   "license": "MIT",