@pagebridge/sanity 0.0.2 → 0.1.1

package/dist/components/DecayAlertCard.d.ts

@@ -1,16 +0,0 @@
-interface DecayMetrics {
-    positionBefore?: number;
-    positionNow?: number;
-    positionDelta?: number;
-    ctrBefore?: number;
-    ctrNow?: number;
-    impressions?: number;
-}
-interface DecayAlertCardProps {
-    reason: "position_decay" | "low_ctr" | "impressions_drop" | "manual";
-    severity: "low" | "medium" | "high";
-    metrics?: DecayMetrics;
-}
-export declare function DecayAlertCard({ reason, severity, metrics, }: DecayAlertCardProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=DecayAlertCard.d.ts.map

package/dist/components/DecayAlertCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DecayAlertCard.d.ts","sourceRoot":"","sources":["../../src/components/DecayAlertCard.tsx"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,gBAAgB,GAAG,SAAS,GAAG,kBAAkB,GAAG,QAAQ,CAAC;IACrE,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpC,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAwBD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,OAAO,GACR,EAAE,mBAAmB,2CAkBrB"}

package/dist/components/DecayAlertCard.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Stack, Text, Flex } from "@sanity/ui";
-import { WarningOutlineIcon } from "@sanity/icons";
-function getDecayMessage(reason, metrics) {
-    switch (reason) {
-        case "position_decay":
-            if (metrics?.positionBefore != null && metrics?.positionNow != null) {
-                return `Position dropped ${metrics.positionBefore.toFixed(0)} \u2192 ${metrics.positionNow.toFixed(0)} over 30 days`;
-            }
-            return "Search position has declined over 30 days";
-        case "low_ctr":
-            if (metrics?.ctrNow != null) {
-                return `CTR at ${(metrics.ctrNow * 100).toFixed(1)}% despite top-10 position`;
-            }
-            return "Click-through rate is below threshold";
-        case "impressions_drop":
-            return "Impressions dropped significantly over 30 days";
-        case "manual":
-            return "Manually flagged for review";
-    }
-}
-export function DecayAlertCard({ reason, severity, metrics, }) {
-    return (_jsx(Card, { padding: 3, radius: 2, tone: "critical", children: _jsxs(Stack, { space: 2, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Text, { size: 1, children: _jsx(WarningOutlineIcon, {}) }), _jsx(Text, { size: 1, weight: "semibold", children: "Decay Detected" })] }), _jsx(Text, { size: 1, muted: true, children: getDecayMessage(reason, metrics) })] }) }));
-}

package/dist/components/DecayBadge.d.ts

@@ -1,3 +0,0 @@
-import type { DocumentBadgeComponent } from "sanity";
-export declare const DecayBadge: DocumentBadgeComponent;
-//# sourceMappingURL=DecayBadge.d.ts.map

package/dist/components/DecayBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DecayBadge.d.ts","sourceRoot":"","sources":["../../src/components/DecayBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAErD,eAAO,MAAM,UAAU,EAAE,sBAqBxB,CAAC"}

package/dist/components/DecayBadge.js

@@ -1,19 +0,0 @@
-import { useEffect, useState } from "react";
-import { useClient } from "sanity";
-export const DecayBadge = (props) => {
-    const client = useClient({ apiVersion: "2025-02-07" });
-    const [hasDecay, setHasDecay] = useState(false);
-    useEffect(() => {
-        client
-            .fetch(`count(*[_type == "gscRefreshTask" && linkedDocument._ref == $id && status == "open"])`, { id: props.id })
-            .then((count) => setHasDecay(count > 0))
-            .catch(() => setHasDecay(false));
-    }, [props.id, client]);
-    if (!hasDecay)
-        return null;
-    return {
-        label: "Decay detected",
-        title: "Content decay has been detected for this document",
-        color: "danger",
-    };
-};

package/dist/components/PerformanceChart.d.ts

@@ -1,12 +0,0 @@
-export interface ChartBar {
-    /** Weekly click value for this bar */
-    value: number;
-    /** Whether this segment is trending down relative to the longer-term average */
-    declining: boolean;
-}
-interface PerformanceChartProps {
-    bars: ChartBar[];
-}
-export declare function PerformanceChart({ bars }: PerformanceChartProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=PerformanceChart.d.ts.map

package/dist/components/PerformanceChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PerformanceChart.d.ts","sourceRoot":"","sources":["../../src/components/PerformanceChart.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,QAAQ;IACvB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,2CA+C/D"}

package/dist/components/PerformanceChart.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Stack, Text, Flex } from "@sanity/ui";
-export function PerformanceChart({ bars }) {
-    const maxValue = Math.max(...bars.map((b) => b.value), 1);
-    return (_jsx(Card, { padding: 3, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsxs(Stack, { space: 1, children: [_jsx(Text, { size: 0, weight: "semibold", muted: true, children: "PERFORMANCE (30D)" }), _jsx(Text, { size: 0, muted: true, children: "Weekly clicks trend" })] }), _jsx("div", { style: {
-                        display: "flex",
-                        alignItems: "flex-end",
-                        height: 120,
-                        gap: 3,
-                        padding: "0 4px",
-                    }, children: bars.map((bar, i) => (_jsx("div", { style: {
-                            flex: 1,
-                            height: `${Math.max((bar.value / maxValue) * 100, 4)}%`,
-                            backgroundColor: bar.declining ? "#f4726d" : "#43d675",
-                            borderRadius: "3px 3px 0 0",
-                            minHeight: 4,
-                        } }, i))) }), _jsxs(Flex, { justify: "space-between", style: { padding: "0 4px" }, children: [_jsx(Text, { size: 0, muted: true, children: "older" }), _jsx(Text, { size: 0, muted: true, children: "recent" })] })] }) }));
-}

package/dist/components/PerformanceInspector.d.ts

@@ -1,3 +0,0 @@
-import type { DocumentInspectorProps } from "sanity";
-export declare function PerformanceInspector({ documentId, }: DocumentInspectorProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PerformanceInspector.d.ts.map

package/dist/components/PerformanceInspector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PerformanceInspector.d.ts","sourceRoot":"","sources":["../../src/components/PerformanceInspector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAiJrD,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,GACX,EAAE,sBAAsB,2CA+RxB"}

package/dist/components/PerformanceInspector.js

@@ -1,174 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useCallback } from "react";
-import { useClient } from "sanity";
-import { Card, Stack, Text, Badge, Flex, Spinner, Box, TextInput, Button, } from "@sanity/ui";
-import { AddIcon, TrashIcon, CheckmarkCircleIcon, CircleIcon, } from "@sanity/icons";
-import { PerformanceChart } from "./PerformanceChart";
-import { DecayAlertCard } from "./DecayAlertCard";
-/**
- * Deduplicate snapshots — keep only the most recent per period.
- */
-function deduplicateSnapshots(snapshots) {
-    const byPeriod = new Map();
-    for (const snap of snapshots) {
-        const existing = byPeriod.get(snap.period);
-        if (!existing || snap.fetchedAt > existing.fetchedAt) {
-            byPeriod.set(snap.period, snap);
-        }
-    }
-    return byPeriod;
-}
-/**
- * Build ~12 weekly bars from period aggregates.
- *
- * Derives weekly click totals from the 3 period snapshots, then colors
- * each bar based on the overall trend direction:
- * - If the page is declining (recent < older), older bars are green
- *   and recent bars are red — showing the transition from healthy to declining.
- * - If the page is stable/growing, all bars are green.
- */
-function buildChartBars(snapshots) {
-    const s7 = snapshots.get("last7");
-    const s28 = snapshots.get("last28");
-    const s90 = snapshots.get("last90");
-    if (!s28 && !s7)
-        return [];
-    const clicks7 = s7?.clicks ?? 0;
-    const clicks28 = s28?.clicks ?? clicks7;
-    const clicks90 = s90?.clicks ?? clicks28;
-    // Derive weekly values for each segment
-    const recentWeekly = clicks7; // most recent week
-    const midWeekly = Math.max(clicks28 - clicks7, 0) / 3; // weeks 2-4 avg
-    const olderWeekly = s90 ? Math.max(clicks90 - clicks28, 0) / 8 : 0; // weeks 5-12 avg
-    // Determine overall trend: is recent worse than historical?
-    const historicalWeeklyAvg = s90
-        ? (clicks90 - clicks7) / 11
-        : s28
-            ? (clicks28 - clicks7) / 3
-            : clicks7;
-    const isDeclining = recentWeekly < historicalWeeklyAvg * 0.85;
-    const bars = [];
-    // Older weeks (5-12) — 8 bars — green if declining (these were the good days)
-    if (s90) {
-        for (let i = 0; i < 8; i++) {
-            bars.push({ value: olderWeekly, declining: false });
-        }
-    }
-    // Middle weeks (2-4) — 3 bars — transition zone
-    if (s28) {
-        for (let i = 0; i < 3; i++) {
-            bars.push({
-                value: midWeekly,
-                declining: isDeclining && midWeekly < historicalWeeklyAvg * 0.85,
-            });
-        }
-    }
-    // Most recent week — 1 bar — red if the page is declining
-    bars.push({ value: recentWeekly, declining: isDeclining });
-    return bars;
-}
-/**
- * Check if a target keyword matches any of the top queries.
- * Uses case-insensitive substring matching.
- */
-function isKeywordInQueries(keyword, queries) {
-    const lower = keyword.toLowerCase();
-    return queries.some((q) => q.query.toLowerCase().includes(lower));
-}
-/**
- * Check if a query matches any of the target keywords.
- */
-function isQueryInTargets(query, targets) {
-    const lower = query.toLowerCase();
-    return targets.some((t) => lower.includes(t.toLowerCase()));
-}
-export function PerformanceInspector({ documentId, }) {
-    const client = useClient({ apiVersion: "2024-01-01" });
-    const [snapshots, setSnapshots] = useState(new Map());
-    const [decayTask, setDecayTask] = useState(null);
-    const [keywordTarget, setKeywordTarget] = useState(null);
-    const [newKeyword, setNewKeyword] = useState("");
-    const [loading, setLoading] = useState(true);
-    const fetchData = useCallback(async () => {
-        const [snapshotResults, taskResult, keywordResult] = await Promise.all([
-            client.fetch(`*[_type == "gscSnapshot" && linkedDocument._ref == $id] | order(fetchedAt desc) {
-            period,
-            clicks,
-            impressions,
-            ctr,
-            position,
-            topQueries,
-            fetchedAt
-          }`, { id: documentId }),
-            client.fetch(`*[_type == "gscRefreshTask" && linkedDocument._ref == $id && status == "open"] | order(severity desc)[0] {
-            reason,
-            severity,
-            metrics
-          }`, { id: documentId }),
-            client.fetch(`*[_type == "gscKeywordTarget" && linkedDocument._ref == $id][0] {
-            _id,
-            keywords
-          }`, { id: documentId }),
-        ]);
-        setSnapshots(deduplicateSnapshots(snapshotResults ?? []));
-        setDecayTask(taskResult);
-        setKeywordTarget(keywordResult);
-        setLoading(false);
-    }, [documentId, client]);
-    useEffect(() => {
-        fetchData();
-    }, [fetchData]);
-    const addKeyword = useCallback(async () => {
-        const keyword = newKeyword.trim();
-        if (!keyword)
-            return;
-        if (keywordTarget) {
-            const updated = [...(keywordTarget.keywords ?? []), keyword];
-            await client.patch(keywordTarget._id).set({ keywords: updated }).commit();
-            setKeywordTarget({ ...keywordTarget, keywords: updated });
-        }
-        else {
-            const doc = await client.create({
-                _type: "gscKeywordTarget",
-                linkedDocument: { _type: "reference", _ref: documentId },
-                keywords: [keyword],
-            });
-            setKeywordTarget({ _id: doc._id, keywords: [keyword] });
-        }
-        setNewKeyword("");
-    }, [newKeyword, keywordTarget, documentId, client]);
-    const removeKeyword = useCallback(async (keyword) => {
-        if (!keywordTarget)
-            return;
-        const updated = keywordTarget.keywords.filter((k) => k !== keyword);
-        await client.patch(keywordTarget._id).set({ keywords: updated }).commit();
-        setKeywordTarget({ ...keywordTarget, keywords: updated });
-    }, [keywordTarget, client]);
-    if (loading) {
-        return (_jsx(Card, { padding: 4, children: _jsx(Flex, { justify: "center", align: "center", style: { minHeight: 200 }, children: _jsx(Spinner, {}) }) }));
-    }
-    const snapshot28 = snapshots.get("last28");
-    const chartBars = buildChartBars(snapshots);
-    const topQueries = snapshot28?.topQueries?.slice(0, 5) ?? [];
-    const targetKeywords = keywordTarget?.keywords ?? [];
-    return (_jsx(Card, { padding: 4, style: { height: "100%", overflowY: "auto" }, children: _jsxs(Stack, { space: 4, children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx("div", { style: {
-                                        width: 10,
-                                        height: 10,
-                                        borderRadius: "50%",
-                                        backgroundColor: "#43d675",
-                                        flexShrink: 0,
-                                    } }), _jsx(Text, { weight: "semibold", size: 2, children: "PageBridge" })] }), _jsx(Badge, { tone: "primary", fontSize: 0, children: "Live GSC data" })] }), chartBars.length > 0 ? (_jsx(PerformanceChart, { bars: chartBars })) : (_jsx(Card, { padding: 4, tone: "caution", radius: 2, children: _jsx(Text, { size: 1, children: "No performance data available yet." }) })), decayTask && (_jsx(DecayAlertCard, { reason: decayTask.reason, severity: decayTask.severity, metrics: decayTask.metrics })), snapshot28 && (_jsxs(Flex, { gap: 3, children: [_jsx(Card, { padding: 3, radius: 2, shadow: 1, style: { flex: 1 }, children: _jsxs(Stack, { space: 2, children: [_jsx(Text, { size: 0, muted: true, children: "Clicks" }), _jsx(Text, { size: 3, weight: "semibold", children: snapshot28.clicks.toLocaleString() })] }) }), _jsx(Card, { padding: 3, radius: 2, shadow: 1, style: { flex: 1 }, children: _jsxs(Stack, { space: 2, children: [_jsx(Text, { size: 0, muted: true, children: "CTR" }), _jsxs(Text, { size: 3, weight: "semibold", children: [(snapshot28.ctr * 100).toFixed(1), "%"] })] }) })] })), topQueries.length > 0 && (_jsxs(Box, { children: [_jsx(Text, { size: 1, weight: "semibold", style: { marginBottom: 8 }, children: "Top Queries" }), _jsx(Stack, { space: 2, children: topQueries.map((q, i) => {
-                                const isTarget = isQueryInTargets(q.query, targetKeywords);
-                                return (_jsx(Card, { padding: 2, radius: 2, tone: isTarget ? "positive" : "default", shadow: isTarget ? 1 : 0, children: _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { align: "center", gap: 2, style: { flex: 1, minWidth: 0 }, children: [isTarget && (_jsx(Text, { size: 0, children: _jsx(CheckmarkCircleIcon, {}) })), _jsx(Text, { size: 1, style: {
-                                                            overflow: "hidden",
-                                                            textOverflow: "ellipsis",
-                                                            whiteSpace: "nowrap",
-                                                        }, children: q.query })] }), _jsxs(Text, { size: 0, muted: true, style: { flexShrink: 0, marginLeft: 8 }, children: [q.clicks, "cl \u00B7 pos ", q.position.toFixed(1)] })] }) }, i));
-                            }) })] })), _jsxs(Box, { children: [_jsx(Text, { size: 1, weight: "semibold", style: { marginBottom: 8 }, children: "Target Keywords" }), _jsxs(Stack, { space: 2, children: [targetKeywords.map((kw) => {
-                                    const isRanking = isKeywordInQueries(kw, topQueries);
-                                    return (_jsx(Card, { padding: 2, radius: 2, tone: isRanking ? "positive" : "caution", shadow: 1, children: _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { align: "center", gap: 2, style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { size: 0, children: isRanking ? _jsx(CheckmarkCircleIcon, {}) : _jsx(CircleIcon, {}) }), _jsx(Text, { size: 1, children: kw })] }), _jsxs(Flex, { align: "center", gap: 2, style: { flexShrink: 0 }, children: [isRanking && (_jsx(Badge, { tone: "positive", fontSize: 0, children: "Ranking" })), _jsx(Button, { icon: TrashIcon, mode: "ghost", tone: "critical", fontSize: 0, padding: 1, onClick: () => removeKeyword(kw) })] })] }) }, kw));
-                                }), targetKeywords.length === 0 && (_jsx(Text, { size: 1, muted: true, children: "No target keywords set." })), _jsxs(Flex, { gap: 2, children: [_jsx(Box, { style: { flex: 1 }, children: _jsx(TextInput, { fontSize: 1, placeholder: "Add target keyword...", value: newKeyword, onChange: (e) => setNewKeyword(e.target.value), onKeyDown: (e) => {
-                                                    if (e.key === "Enter")
-                                                        addKeyword();
-                                                } }) }), _jsx(Button, { icon: AddIcon, mode: "ghost", fontSize: 1, padding: 2, onClick: addKeyword, disabled: !newKeyword.trim() })] })] })] })] }) }));
-}

package/dist/schemas/gscKeywordTarget.d.ts

@@ -1,22 +0,0 @@
-export interface GscKeywordTargetOptions {
-    contentTypes?: string[];
-}
-export declare const createGscKeywordTarget: (options?: GscKeywordTargetOptions) => {
-    type: "document";
-    name: "gscKeywordTarget";
-} & Omit<import("sanity").DocumentDefinition, "preview"> & {
-    preview?: import("sanity").PreviewConfig<{
-        title: string;
-        keywords: string;
-    }, Record<"title" | "keywords", any>> | undefined;
-};
-export declare const gscKeywordTarget: {
-    type: "document";
-    name: "gscKeywordTarget";
-} & Omit<import("sanity").DocumentDefinition, "preview"> & {
-    preview?: import("sanity").PreviewConfig<{
-        title: string;
-        keywords: string;
-    }, Record<"title" | "keywords", any>> | undefined;
-};
-//# sourceMappingURL=gscKeywordTarget.d.ts.map

package/dist/schemas/gscKeywordTarget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"gscKeywordTarget.d.ts","sourceRoot":"","sources":["../../src/schemas/gscKeywordTarget.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,GACjC,UAAS,uBAA4B;;;;;;;;CA0CtC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;CAA2B,CAAC"}

package/dist/schemas/gscKeywordTarget.js

@@ -1,43 +0,0 @@
-import { defineType, defineField } from "sanity";
-export const createGscKeywordTarget = (options = {}) => {
-    const contentTypes = options.contentTypes ?? [];
-    return defineType({
-        name: "gscKeywordTarget",
-        title: "GSC Keyword Target",
-        type: "document",
-        fields: [
-            ...(contentTypes.length > 0
-                ? [
-                    defineField({
-                        name: "linkedDocument",
-                        title: "Linked Document",
-                        type: "reference",
-                        to: contentTypes.map((type) => ({ type })),
-                        validation: (Rule) => Rule.required(),
-                    }),
-                ]
-                : []),
-            defineField({
-                name: "keywords",
-                title: "Target Keywords",
-                type: "array",
-                of: [{ type: "string" }],
-                description: "Keywords you want this page to rank for",
-            }),
-        ],
-        preview: {
-            select: {
-                title: "linkedDocument.title",
-                keywords: "keywords",
-            },
-            prepare({ title, keywords }) {
-                const count = keywords?.length ?? 0;
-                return {
-                    title: title || "Untitled",
-                    subtitle: `${count} target keyword${count !== 1 ? "s" : ""}`,
-                };
-            },
-        },
-    });
-};
-export const gscKeywordTarget = createGscKeywordTarget();

package/eslint.config.js

@@ -1,3 +0,0 @@
-import { config } from "@pagebridge/eslint-config/react-internal";
-
-export default [...config];

package/src/components/RefreshQueueTool.tsx

@@ -1,196 +0,0 @@
-import { useClient } from "sanity";
-import {
-  Card,
-  Stack,
-  Text,
-  Button,
-  Flex,
-  Badge,
-  Menu,
-  MenuButton,
-  MenuItem,
-  type BadgeTone,
-} from "@sanity/ui";
-import {
-  EllipsisVerticalIcon,
-  CheckmarkIcon,
-  ClockIcon,
-  CloseIcon,
-} from "@sanity/icons";
-import { useEffect, useState, useCallback } from "react";
-
-interface RefreshTask {
-  _id: string;
-  reason: "position_decay" | "low_ctr" | "impressions_drop" | "manual";
-  severity: "low" | "medium" | "high";
-  status: string;
-  snoozedUntil?: string;
-  metrics?: {
-    positionBefore?: number;
-    positionNow?: number;
-    positionDelta?: number;
-  };
-  documentTitle?: string;
-  documentSlug?: string;
-  createdAt: string;
-}
-
-type FilterType = "open" | "snoozed" | "all";
-
-const severityTone: Record<string, BadgeTone> = {
-  high: "critical",
-  medium: "caution",
-  low: "default",
-};
-
-const reasonLabels: Record<string, string> = {
-  position_decay: "Position Drop",
-  low_ctr: "Low CTR",
-  impressions_drop: "Traffic Drop",
-  manual: "Manual",
-};
-
-export function RefreshQueueTool() {
-  const client = useClient({ apiVersion: "2024-01-01" });
-  const [tasks, setTasks] = useState<RefreshTask[]>([]);
-  const [filter, setFilter] = useState<FilterType>("open");
-
-  const fetchTasks = useCallback(async () => {
-    const query =
-      filter === "all"
-        ? `*[_type == "gscRefreshTask" && status != "done" && status != "dismissed"]`
-        : `*[_type == "gscRefreshTask" && status == $status]`;
-
-    const results = await client.fetch<RefreshTask[]>(
-      `${query} | order(severity desc, createdAt desc) {
-        _id,
-        reason,
-        severity,
-        status,
-        snoozedUntil,
-        metrics,
-        "documentTitle": linkedDocument->title,
-        "documentSlug": linkedDocument->slug.current,
-        createdAt
-      }`,
-      { status: filter },
-    );
-    setTasks(results);
-  }, [filter, client]);
-
-  useEffect(() => {
-    fetchTasks();
-  }, [fetchTasks]);
-
-  const updateStatus = async (
-    taskId: string,
-    status: string,
-    snoozeDays?: number,
-  ) => {
-    const patch: Record<string, unknown> = { status };
-
-    if (status === "snoozed" && snoozeDays) {
-      const until = new Date();
-      until.setDate(until.getDate() + snoozeDays);
-      patch.snoozedUntil = until.toISOString();
-    }
-
-    if (status === "done") {
-      patch.resolvedAt = new Date().toISOString();
-    }
-
-    await client.patch(taskId).set(patch).commit();
-    setTasks((prev) =>
-      prev.filter((t) => t._id !== taskId || status === filter),
-    );
-  };
-
-  return (
-    <Card padding={4}>
-      <Stack space={4}>
-        <Flex justify="space-between" align="center">
-          <Text size={3} weight="semibold">
-            Content Refresh Queue
-          </Text>
-          <Flex gap={2}>
-            {(["open", "snoozed", "all"] as const).map((f) => (
-              <Button
-                key={f}
-                mode={filter === f ? "default" : "ghost"}
-                text={f.charAt(0).toUpperCase() + f.slice(1)}
-                onClick={() => setFilter(f)}
-                fontSize={1}
-              />
-            ))}
-          </Flex>
-        </Flex>
-
-        {tasks.length === 0 ? (
-          <Card padding={5} tone="positive" radius={2}>
-            <Text align="center">🎉 No pending refresh tasks!</Text>
-          </Card>
-        ) : (
-          <Stack space={2}>
-            {tasks.map((task) => (
-              <Card key={task._id} padding={3} radius={2} shadow={1}>
-                <Flex justify="space-between" align="flex-start">
-                  <Stack space={2} style={{ flex: 1 }}>
-                    <Flex gap={2} align="center">
-                      <Badge tone={severityTone[task.severity]}>
-                        {task.severity}
-                      </Badge>
-                      <Badge>{reasonLabels[task.reason]}</Badge>
-                    </Flex>
-                    <Text weight="semibold">
-                      {task.documentTitle || "Untitled"}
-                    </Text>
-                    <Text size={1} muted>
-                      /{task.documentSlug}
-                    </Text>
-                    {task.metrics && (
-                      <Text size={1} muted>
-                        Position: {task.metrics.positionBefore?.toFixed(1)} →{" "}
-                        {task.metrics.positionNow?.toFixed(1)} (
-                        {(task.metrics.positionDelta ?? 0) > 0 ? "+" : ""}
-                        {task.metrics.positionDelta?.toFixed(1)})
-                      </Text>
-                    )}
-                  </Stack>
-                  <MenuButton
-                    button={<Button icon={EllipsisVerticalIcon} mode="ghost" />}
-                    id={`menu-${task._id}`}
-                    menu={
-                      <Menu>
-                        <MenuItem
-                          icon={CheckmarkIcon}
-                          text="Mark as Done"
-                          onClick={() => updateStatus(task._id, "done")}
-                        />
-                        <MenuItem
-                          icon={ClockIcon}
-                          text="Snooze 7 days"
-                          onClick={() => updateStatus(task._id, "snoozed", 7)}
-                        />
-                        <MenuItem
-                          icon={ClockIcon}
-                          text="Snooze 30 days"
-                          onClick={() => updateStatus(task._id, "snoozed", 30)}
-                        />
-                        <MenuItem
-                          icon={CloseIcon}
-                          text="Dismiss"
-                          tone="critical"
-                          onClick={() => updateStatus(task._id, "dismissed")}
-                        />
-                      </Menu>
-                    }
-                  />
-                </Flex>
-              </Card>
-            ))}
-          </Stack>
-        )}
-      </Stack>
-    </Card>
-  );
-}