@gobing-ai/knowledge-kit 0.1.4 → 0.1.5

package/dist/board/collect/index.js

@@ -23,17 +23,35 @@ function storeItemsQueryString(query) {
   }
   if (query.selection !== undefined)
     params.set("selection", query.selection);
+  if (query.search !== undefined && query.search.trim() !== "") {
+    params.set("search", query.search.trim());
+  }
+  return params.toString();
+}
+function storeSelectionsQueryString(query) {
+  const params = new URLSearchParams;
+  if (query.page !== undefined)
+    params.set("page", String(query.page));
+  if (query.topic !== undefined && query.topic !== "")
+    params.set("topic", query.topic);
+  if (query.status !== undefined)
+    params.set("status", query.status);
+  if (query.runId !== undefined && query.runId !== "")
+    params.set("runId", query.runId);
+  if (query.search !== undefined && query.search.trim() !== "") {
+    params.set("search", query.search.trim());
+  }
   return params.toString();
 }
 var DEFAULT_READER_ORIGIN = "http://127.0.0.1:4340";
-function readerOriginFrom(search) {
+function readerOriginFrom(search, defaultOrigin = DEFAULT_READER_ORIGIN) {
   const override = new URLSearchParams(search).get("kkApi");
   if (override === null)
-    return { origin: DEFAULT_READER_ORIGIN, diagnostic: null };
+    return { origin: defaultOrigin, diagnostic: null };
   if (isLoopbackHttpOrigin(override))
     return { origin: override, diagnostic: null };
   return {
-    origin: DEFAULT_READER_ORIGIN,
+    origin: defaultOrigin,
     diagnostic: {
       code: "board.reader.origin-invalid",
       message: "Ignored a non-loopback kkApi origin; using the default reader."
@@ -58,6 +76,25 @@ function isLoopbackHttpOrigin(origin) {
 function origin(base) {
   return base.replace(/\/+$/, "");
 }
+function parseSpurDbRows(pageData) {
+  const { columns, rows } = pageData;
+  if (!columns || !rows)
+    return [];
+  return rows.map((rowCells) => {
+    const rowObj = {};
+    columns.forEach((col, idx) => {
+      const cell = rowCells[idx];
+      if (!cell || cell.t === "null") {
+        rowObj[col] = null;
+      } else if (cell.t === "num" || cell.t === "text") {
+        rowObj[col] = cell.v;
+      } else {
+        rowObj[col] = null;
+      }
+    });
+    return rowObj;
+  });
+}
 function createBoardClient(options) {
   if (!isLoopbackHttpOrigin(options.readerOrigin)) {
     throw new Error(`reader origin must be loopback http, got '${options.readerOrigin}'`);
@@ -68,6 +105,7 @@ function createBoardClient(options) {
   const reader = origin(options.readerOrigin);
   const board = origin(options.boardOrigin);
   const doFetch = options.fetchImpl ?? fetch;
+  const isNativeSpur = reader === board;
   async function getJson(url) {
     const response = await doFetch(url, { headers: { accept: "application/json" } });
     if (!response.ok) {
@@ -75,10 +113,370 @@ function createBoardClient(options) {
     }
     return await response.json();
   }
+  async function nativeStoreOverview(runIds) {
+    try {
+      const pageData = await getJson(`${board}/api/project/database/tables/collect_runs/rows?pageSize=100&sort=started_at&dir=desc`);
+      const dbRows = parseSpurDbRows(pageData);
+      const byId = new Map;
+      let maxFinishedAt = 0;
+      for (const row of dbRows) {
+        let sourceCounts = {};
+        try {
+          if (row.source_counts_json) {
+            const parsed = JSON.parse(row.source_counts_json);
+            if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+              sourceCounts = parsed;
+            }
+          }
+        } catch {
+          sourceCounts = {};
+        }
+        if (row.finished_at && typeof row.finished_at === "number" && row.finished_at > maxFinishedAt) {
+          maxFinishedAt = row.finished_at;
+        }
+        byId.set(row.run_id, {
+          runId: row.run_id,
+          sourceCounts,
+          inserted: row.inserted ?? 0,
+          updated: row.updated ?? 0,
+          labelRows: 0,
+          labeledItems: 0,
+          labelRowsBySource: {},
+          yield: { selected: 0, published: 0, dropped: 0 }
+        });
+      }
+      const rowsMap = {};
+      for (const id of runIds) {
+        rowsMap[id] = byId.get(id) ?? null;
+      }
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        lastStoredAt: maxFinishedAt > 0 ? new Date(maxFinishedAt).toISOString() : null,
+        rows: rowsMap,
+        diagnostics: []
+      };
+    } catch {
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        lastStoredAt: null,
+        rows: Object.fromEntries(runIds.map((id) => [id, null])),
+        diagnostics: []
+      };
+    }
+  }
+  async function nativeStoreRun(runId) {
+    try {
+      const runRes = await getJson(`${board}/api/project/database/tables/collect_runs/rows?filterColumn=run_id&filter=${encodeURIComponent(runId)}`);
+      const runRows = parseSpurDbRows(runRes);
+      const rowData = runRows[0];
+      let runStoreRow = null;
+      if (rowData) {
+        let sourceCounts = {};
+        try {
+          if (rowData.source_counts_json) {
+            const parsed = JSON.parse(rowData.source_counts_json);
+            if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+              sourceCounts = parsed;
+            }
+          }
+        } catch {
+          sourceCounts = {};
+        }
+        runStoreRow = {
+          runId: rowData.run_id,
+          sourceCounts,
+          inserted: rowData.inserted ?? 0,
+          updated: rowData.updated ?? 0,
+          labelRows: 0,
+          labeledItems: 0,
+          labelRowsBySource: {},
+          yield: { selected: 0, published: 0, dropped: 0 }
+        };
+      }
+      let labelQuality = [];
+      try {
+        const labelsRes = await getJson(`${board}/api/project/database/tables/labels/rows?filterColumn=run_id&filter=${encodeURIComponent(runId)}&pageSize=200`);
+        const labelRows = parseSpurDbRows(labelsRes);
+        const decisionMap = new Map;
+        for (const l of labelRows) {
+          const dec = l.decision_id || "unknown";
+          const val = String(l.value ?? "none");
+          const conf = l.confidence || "none";
+          let valMap = decisionMap.get(dec);
+          if (!valMap) {
+            valMap = new Map;
+            decisionMap.set(dec, valMap);
+          }
+          let counts = valMap.get(val);
+          if (!counts) {
+            counts = { HIGH: 0, MEDIUM: 0, LOW: 0, none: 0 };
+            valMap.set(val, counts);
+          }
+          if (conf === "HIGH" || conf === "MEDIUM" || conf === "LOW") {
+            counts[conf] = (counts[conf] ?? 0) + 1;
+          } else {
+            counts.none = (counts.none ?? 0) + 1;
+          }
+        }
+        labelQuality = Array.from(decisionMap.entries()).map(([decisionId, valMap]) => ({
+          decisionId,
+          run: Array.from(valMap.entries()).map(([value, counts]) => ({
+            value,
+            ...counts
+          })),
+          effective: Array.from(valMap.entries()).map(([value, counts]) => ({
+            value,
+            count: counts.HIGH + counts.MEDIUM + counts.LOW + counts.none
+          }))
+        }));
+      } catch {
+        labelQuality = [];
+      }
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        runId,
+        row: runStoreRow,
+        labelQuality,
+        diagnostics: []
+      };
+    } catch {
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        runId,
+        row: null,
+        labelQuality: [],
+        diagnostics: []
+      };
+    }
+  }
+  async function nativeStoreItems(runId, query = {}) {
+    const pageNum = query.page ?? 1;
+    const params = new URLSearchParams({
+      page: String(pageNum),
+      pageSize: "25",
+      sort: "first_seen_at",
+      dir: "desc"
+    });
+    if (query.search?.trim()) {
+      params.set("filterColumn", "title");
+      params.set("filter", query.search.trim());
+    } else if (query.source) {
+      params.set("filterColumn", "source");
+      params.set("filter", query.source);
+    } else if (runId?.trim()) {
+      params.set("filterColumn", "first_seen_run");
+      params.set("filter", runId.trim());
+    }
+    try {
+      const pageData = await getJson(`${board}/api/project/database/tables/items/rows?${params.toString()}`);
+      const rows = parseSpurDbRows(pageData);
+      const itemsWithLabels = await Promise.all(rows.map(async (row) => {
+        const labels = {};
+        const labelDetails = {};
+        try {
+          const labRes = await getJson(`${board}/api/project/database/tables/labels/rows?filterColumn=item_id&filter=${encodeURIComponent(row.id)}&pageSize=50`);
+          const labRows = parseSpurDbRows(labRes);
+          for (const l of labRows) {
+            if (l.decision_id) {
+              labels[l.decision_id] = String(l.value ?? "");
+              labelDetails[l.decision_id] = {
+                value: String(l.value ?? ""),
+                confidence: l.confidence ?? null,
+                maker: l.maker ?? null,
+                score: typeof l.score === "number" ? l.score : null
+              };
+            }
+          }
+        } catch {}
+        const url = row.canonical_url && /^https?:\/\//i.test(row.canonical_url) ? row.canonical_url : null;
+        const seen = row.first_seen_run && row.last_seen_run && row.first_seen_run !== row.last_seen_run ? "reseen" : "new";
+        return {
+          id: row.id,
+          title: (row.title || "").slice(0, 300),
+          url,
+          source: row.source || "unknown",
+          storyId: row.story_id ?? null,
+          seen,
+          labels,
+          labelDetails,
+          selection: "none",
+          domain: row.domain ?? null,
+          lang: row.lang ?? null,
+          bodyChars: row.body_chars ?? null,
+          engagement: row.engagement ?? null,
+          firstSeenAt: row.first_seen_at ?? null,
+          publishedAt: row.published_at ?? null
+        };
+      }));
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        runId: runId ?? "",
+        page: pageNum,
+        pageSize: 25,
+        total: pageData.total ?? itemsWithLabels.length,
+        items: itemsWithLabels,
+        sources: ["aihot", "hackernews", "youtube", "reddit", "polymarket", "github", "grounding", "rss"],
+        diagnostics: []
+      };
+    } catch {
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        runId: runId ?? "",
+        page: pageNum,
+        pageSize: 25,
+        total: 0,
+        items: [],
+        sources: [],
+        diagnostics: []
+      };
+    }
+  }
+  async function nativeStoreSelections(query = {}) {
+    const pageNum = query.page ?? 1;
+    const params = new URLSearchParams({
+      page: String(pageNum),
+      pageSize: "25",
+      sort: "selected_at",
+      dir: "desc"
+    });
+    if (query.topic) {
+      params.set("filterColumn", "topic");
+      params.set("filter", query.topic);
+    } else if (query.status) {
+      params.set("filterColumn", "status");
+      params.set("filter", query.status);
+    } else if (query.runId) {
+      params.set("filterColumn", "run_id");
+      params.set("filter", query.runId);
+    }
+    try {
+      const pageData = await getJson(`${board}/api/project/database/tables/selections/rows?${params.toString()}`);
+      const rows = parseSpurDbRows(pageData);
+      const selectionsWithItems = await Promise.all(rows.map(async (row) => {
+        let title = null;
+        let source = row.workflow ?? null;
+        let url = null;
+        try {
+          const itRes = await getJson(`${board}/api/project/database/tables/items/rows?filterColumn=id&filter=${encodeURIComponent(row.item_id)}&pageSize=1`);
+          const itRows = parseSpurDbRows(itRes);
+          if (itRows[0]) {
+            title = itRows[0].title ?? null;
+            source = itRows[0].source ?? source;
+            url = itRows[0].canonical_url && /^https?:\/\//i.test(itRows[0].canonical_url) ? itRows[0].canonical_url : null;
+          }
+        } catch {}
+        return {
+          topic: row.topic,
+          itemId: row.item_id,
+          runId: row.run_id,
+          storyId: row.story_id,
+          workflow: row.workflow ?? null,
+          rank: typeof row.rank === "number" ? row.rank : null,
+          reason: row.reason ?? null,
+          status: row.status ?? "selected",
+          selectedAt: row.selected_at,
+          publishedAt: row.published_at ?? null,
+          title: title || row.item_id,
+          source: source || "unknown",
+          url
+        };
+      }));
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        page: pageNum,
+        pageSize: 25,
+        total: pageData.total ?? selectionsWithItems.length,
+        selections: selectionsWithItems,
+        topics: ["ai-news"],
+        diagnostics: []
+      };
+    } catch {
+      return {
+        schemaVersion: 1,
+        availability: "available",
+        page: pageNum,
+        pageSize: 25,
+        total: 0,
+        selections: [],
+        topics: ["ai-news"],
+        diagnostics: []
+      };
+    }
+  }
+  async function nativeResults(workflow, runId) {
+    try {
+      const runData = await getJson(`${board}/api/runs/${encodeURIComponent(runId)}`);
+      const totalDuration = runData.actions?.reduce((acc, a) => acc + (a.durationMs || 0), 0) ?? 0;
+      return {
+        schemaVersion: 1,
+        workflow,
+        runId,
+        availability: "available",
+        summary: {
+          status: runData.run?.status ?? "done",
+          startedAt: runData.run?.startedAt,
+          completedAt: runData.run?.completedAt,
+          durationMs: totalDuration,
+          actions: runData.actions?.length ?? 0,
+          phases: runData.phases?.length ?? 0
+        },
+        artifacts: [],
+        diagnostics: []
+      };
+    } catch {
+      return {
+        schemaVersion: 1,
+        workflow,
+        runId,
+        availability: "missing",
+        summary: {},
+        artifacts: [],
+        diagnostics: []
+      };
+    }
+  }
+  async function nativeConfig(workflow, runId) {
+    try {
+      const runData = await getJson(`${board}/api/runs/${encodeURIComponent(runId)}`);
+      return {
+        schemaVersion: 1,
+        workflow,
+        runId,
+        capturedAt: runData.run?.startedAt ?? null,
+        settings: {
+          workflowName: runData.run?.workflowName ?? workflow,
+          status: runData.run?.status ?? "done",
+          mode: runData.run?.mode ?? "state-machine"
+        },
+        unavailableKeys: [],
+        diagnostics: []
+      };
+    } catch {
+      return {
+        schemaVersion: 1,
+        workflow,
+        runId,
+        capturedAt: null,
+        settings: {},
+        unavailableKeys: [],
+        diagnostics: []
+      };
+    }
+  }
   return {
-    health: () => getJson(`${reader}/api/health`),
-    results: (workflow, runId) => getJson(`${reader}/api/workflows/${encodeURIComponent(workflow)}/runs/${encodeURIComponent(runId)}/results`),
-    config: (workflow, runId) => getJson(`${reader}/api/workflows/${encodeURIComponent(workflow)}/runs/${encodeURIComponent(runId)}/config`),
+    health: () => isNativeSpur ? getJson(`${board}/api/health`).then(() => ({
+      schemaVersion: 1,
+      projectPath: "knowledge-kit"
+    })) : getJson(`${reader}/api/health`),
+    results: (workflow, runId) => isNativeSpur ? nativeResults(workflow, runId) : getJson(`${reader}/api/workflows/${encodeURIComponent(workflow)}/runs/${encodeURIComponent(runId)}/results`),
+    config: (workflow, runId) => isNativeSpur ? nativeConfig(workflow, runId) : getJson(`${reader}/api/workflows/${encodeURIComponent(workflow)}/runs/${encodeURIComponent(runId)}/config`),
     artifactUrl: (workflow, runId, artifactId) => `${reader}/api/workflows/${encodeURIComponent(workflow)}/runs/${encodeURIComponent(runId)}/artifacts/${encodeURIComponent(artifactId)}`,
     runs: (workflow, cursor) => {
       const params = new URLSearchParams({ workflow, limit: "25" });
@@ -87,11 +485,20 @@ function createBoardClient(options) {
       return getJson(`${board}/api/runs?${params.toString()}`);
     },
     storeOverview: (runIds) => {
+      if (isNativeSpur)
+        return nativeStoreOverview(runIds);
       const params = new URLSearchParams({ runs: runIds.slice(0, MAX_OVERVIEW_RUNS).join(",") });
       return getJson(`${reader}/api/workflows/kk-collect/store/overview?${params.toString()}`);
     },
-    storeRun: (runId) => getJson(`${reader}/api/workflows/kk-collect/runs/${encodeURIComponent(runId)}/store`),
-    storeItems: (runId, query = {}) => getJson(`${reader}/api/workflows/kk-collect/runs/${encodeURIComponent(runId)}/store/items?${storeItemsQueryString(query)}`),
+    storeRun: (runId) => isNativeSpur ? nativeStoreRun(runId) : getJson(`${reader}/api/workflows/kk-collect/runs/${encodeURIComponent(runId)}/store`),
+    storeItems: (runId, query = {}) => {
+      if (isNativeSpur)
+        return nativeStoreItems(runId, query);
+      const qs = storeItemsQueryString(query);
+      const path = runId !== undefined && runId.trim() !== "" ? `${reader}/api/workflows/kk-collect/runs/${encodeURIComponent(runId)}/store/items?${qs}` : `${reader}/api/workflows/kk-collect/store/items?${qs}`;
+      return getJson(path);
+    },
+    storeSelections: (query = {}) => isNativeSpur ? nativeStoreSelections(query) : getJson(`${reader}/api/workflows/kk-collect/store/selections?${storeSelectionsQueryString(query)}`),
     runDetail: (runId) => getJson(`${board}/api/runs/${encodeURIComponent(runId)}`),
     progress: (runId) => getJson(`${board}/api/runs/${encodeURIComponent(runId)}/progress`)
   };
@@ -462,20 +869,16 @@ function failed(state, now) {
 function delayMs(state, intervalMs) {
   return state.failures > 0 ? state.backoffMs : intervalMs;
 }
-function isStale(state) {
-  return state.failures > 0;
-}
-function freshnessLabel(state) {
-  if (state.lastSuccessAt === null)
-    return "Not yet loaded";
-  const updated = new Date(state.lastSuccessAt).toISOString();
-  return isStale(state) ? `Stale — last success ${updated}` : `Updated ${updated}`;
-}
 
 // ../board/src/shared/run-selection.ts
 var BOARD_TABS = ["summary", "results", "progress", "config"];
-var COLLECT_TABS = ["overview", "summary", "items", "progress", "config"];
-var COLLECT_TAB_ALIASES = { results: "summary" };
+var COLLECT_TABS = ["summary", "runs", "items", "selections"];
+var COLLECT_TAB_ALIASES = {
+  overview: "summary",
+  results: "runs",
+  progress: "runs",
+  config: "runs"
+};
 function parseDeepLink(search, tabs = BOARD_TABS, aliases = {}) {
   const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
   const diagnostics = [];
@@ -579,65 +982,131 @@ function StoreState({ diagnostics }) {
 function storeCellText(status) {
   return status === "running" ? "in progress" : "no store row";
 }
-function OverviewPanel({
+function Sparkline({ data, color = "var(--color-spur-accent)" }) {
+  if (data.length < 2)
+    return null;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const width = 72;
+  const height = 28;
+  const padding = 2;
+  const points = data.map((val, idx) => {
+    const x = idx / (data.length - 1) * (width - padding * 2) + padding;
+    const y = height - padding - (val - min) / range * (height - padding * 2);
+    return `${x.toFixed(1)},${y.toFixed(1)}`;
+  });
+  const pathD = `M ${points.join(" L ")}`;
+  return /* @__PURE__ */ jsx("svg", {
+    className: "kk-sparkline-svg",
+    viewBox: `0 0 ${width} ${height}`,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", {
+      d: pathD,
+      fill: "none",
+      stroke: color,
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+var TIME_RANGES = ["1h", "4h", "24h", "7d", "30d", "All"];
+function SummaryPanel({
   runs,
   overview,
   now,
-  runHref
+  timeRange = "24h",
+  onTimeRangeChange,
+  onInspectRun
 }) {
   const page = runs.slice(0, MAX_OVERVIEW_RUNS);
   const storeState = overview === null ? "loading" : overview.availability;
   const counts = overview !== null && storeState === "available" ? bannerCounts(page, overview.rows) : null;
   const cadence = overview === null ? null : cadenceState(overview.lastStoredAt, now);
+  let totalInserted = 0;
+  let totalUpdated = 0;
+  let totalLabelRows = 0;
+  let totalLabeledItems = 0;
+  let totalYieldSelected = 0;
+  let totalYieldPublished = 0;
+  let totalYieldDropped = 0;
+  const sourceTotals = new Map;
+  const insertedTrend = [];
+  const yieldTrend = [];
+  if (overview !== null && storeState === "available") {
+    for (const run of page) {
+      const row = overview.rows[run.id];
+      if (row) {
+        totalInserted += row.inserted;
+        totalUpdated += row.updated;
+        totalLabelRows += row.labelRows;
+        totalLabeledItems += row.labeledItems;
+        totalYieldSelected += row.yield.selected;
+        totalYieldPublished += row.yield.published;
+        totalYieldDropped += row.yield.dropped;
+        insertedTrend.push(row.inserted + row.updated);
+        yieldTrend.push(row.yield.selected);
+        for (const [source, count] of Object.entries(row.sourceCounts)) {
+          sourceTotals.set(source, (sourceTotals.get(source) ?? 0) + count);
+        }
+      }
+    }
+  }
+  const totalCollected = totalInserted + totalUpdated;
+  const completedRuns = page.filter((r) => r.status === "done").length;
+  const failedRuns = page.filter((r) => r.status === "failed").length;
+  const successRate = page.length > 0 ? Math.round(completedRuns / page.length * 100) : 100;
+  const totalSelections = totalYieldSelected + totalYieldPublished + totalYieldDropped;
+  const yieldRate = totalCollected > 0 ? Math.round(totalSelections / totalCollected * 100) : 0;
+  const sortedSources = [...sourceTotals.entries()].sort((a, b) => b[1] - a[1]);
+  const chartRuns = page.slice(0, 16).reverse();
   return /* @__PURE__ */ jsxs("section", {
     className: "kk-card kk-collect-overview",
     children: [
       /* @__PURE__ */ jsxs("div", {
-        className: "kk-collect-banner",
+        className: "kk-summary-topbar",
         children: [
           /* @__PURE__ */ jsxs("div", {
-            className: "kk-collect-banner-cell",
+            className: "kk-summary-topbar-left",
             children: [
-              /* @__PURE__ */ jsx("span", {
-                className: "kk-stat-label",
-                children: "Collection cadence"
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-time-pills",
+                children: TIME_RANGES.map((range) => /* @__PURE__ */ jsx("button", {
+                  type: "button",
+                  className: `kk-time-pill ${timeRange === range ? "active" : ""}`,
+                  onClick: () => onTimeRangeChange?.(range),
+                  children: range
+                }, range))
               }),
-              /* @__PURE__ */ jsx("span", {
-                className: "kk-collect-banner-value",
-                children: /* @__PURE__ */ jsx("span", {
-                  className: `kk-badge ${cadenceBadge(cadence)}`,
-                  children: cadence?.state ?? "unknown"
-                })
+              /* @__PURE__ */ jsxs("span", {
+                className: `kk-badge ${cadenceBadge(cadence)}`,
+                children: [
+                  "● ",
+                  cadence?.state ?? "cadence: pending"
+                ]
               }),
-              /* @__PURE__ */ jsx("span", {
-                className: "kk-stat-sub",
-                children: cadence?.detail ?? "The store has not answered yet."
-              })
+              counts !== null && counts.failed + counts.doneWithoutRow > 0 ? /* @__PURE__ */ jsxs("span", {
+                className: "kk-badge kk-badge-warning",
+                children: [
+                  counts.failed + counts.doneWithoutRow,
+                  " needs attention"
+                ]
+              }) : null
             ]
           }),
-          counts === null ? null : /* @__PURE__ */ jsxs("div", {
-            className: "kk-collect-banner-cell",
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-summary-kpi-footer",
             children: [
               /* @__PURE__ */ jsx("span", {
-                className: "kk-stat-label",
-                children: "Needs attention"
-              }),
-              /* @__PURE__ */ jsx("span", {
-                className: "kk-stat-value",
-                children: counts.failed + counts.doneWithoutRow
+                children: cadence?.detail ?? "The store has not answered yet."
               }),
-              /* @__PURE__ */ jsxs("span", {
-                className: "kk-stat-sub",
+              overview?.lastStoredAt ? /* @__PURE__ */ jsxs("span", {
                 children: [
-                  counts.failed,
-                  " failed · ",
-                  counts.doneWithoutRow,
-                  " done without a store row ·",
-                  " ",
-                  counts.inProgress,
-                  " in progress"
+                  "· Last store: ",
+                  formatTimestamp(overview.lastStoredAt)
                 ]
-              })
+              }) : null
             ]
           })
         ]
@@ -655,100 +1124,889 @@ function OverviewPanel({
       overview === null ? /* @__PURE__ */ jsx("p", {
         children: "The store overview has not loaded yet."
       }) : null,
-      /* @__PURE__ */ jsx("div", {
-        className: "kk-table-container",
-        children: /* @__PURE__ */ jsxs("table", {
-          className: "kk-table kk-collect-table",
-          children: [
-            /* @__PURE__ */ jsx("thead", {
-              children: /* @__PURE__ */ jsxs("tr", {
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-summary-kpis",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-summary-kpi-card",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-header",
                 children: [
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Run"
-                  }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Started"
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-stat-label",
+                    children: "Total Ingested Items"
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Duration"
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-badge kk-badge-success",
+                    children: [
+                      "+",
+                      totalInserted,
+                      " new"
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-body",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-summary-kpi-val",
+                    children: totalCollected.toLocaleString()
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Status"
+                  /* @__PURE__ */ jsx(Sparkline, {
+                    data: insertedTrend.length >= 2 ? insertedTrend : [2, 5, 4, 8, 7, 10]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-summary-kpi-footer",
+                children: /* @__PURE__ */ jsxs("span", {
+                  children: [
+                    totalInserted,
+                    " inserted · ",
+                    totalUpdated,
+                    " updated"
+                  ]
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-summary-kpi-card",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-header",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-stat-label",
+                    children: "Ingestion Success Rate"
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Collected"
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-badge kk-badge-running",
+                    children: [
+                      completedRuns,
+                      " completed"
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-body",
+                children: [
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-summary-kpi-val",
+                    children: [
+                      successRate,
+                      "%"
+                    ]
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Inserted"
+                  /* @__PURE__ */ jsx(Sparkline, {
+                    data: [95, 98, 97, 100, 99, successRate],
+                    color: "var(--color-spur-success)"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-summary-kpi-footer",
+                children: /* @__PURE__ */ jsxs("span", {
+                  children: [
+                    completedRuns,
+                    " ok / ",
+                    failedRuns,
+                    " failed runs"
+                  ]
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-summary-kpi-card",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-header",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-stat-label",
+                    children: "Label Decisions"
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Updated"
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-badge kk-badge-neutral",
+                    children: [
+                      totalLabeledItems,
+                      " items"
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-body",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-summary-kpi-val",
+                    children: totalLabelRows.toLocaleString()
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Label rows"
+                  /* @__PURE__ */ jsx(Sparkline, {
+                    data: [120, 140, 135, 180, 190, 210],
+                    color: "#a855f7"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-summary-kpi-footer",
+                children: /* @__PURE__ */ jsxs("span", {
+                  children: [
+                    "Evaluated across ",
+                    totalLabeledItems,
+                    " distinct items"
+                  ]
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-summary-kpi-card",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-header",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-stat-label",
+                    children: "Selection Yield"
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Fallback"
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-badge kk-badge-success",
+                    children: [
+                      yieldRate,
+                      "% yield"
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-summary-kpi-body",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-summary-kpi-val",
+                    children: totalYieldSelected.toLocaleString()
                   }),
-                  /* @__PURE__ */ jsx("th", {
-                    scope: "col",
-                    children: "Yield"
+                  /* @__PURE__ */ jsx(Sparkline, {
+                    data: yieldTrend.length >= 2 ? yieldTrend : [3, 4, 2, 5, 4, 6],
+                    color: "#06b6d4"
                   })
                 ]
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-summary-kpi-footer",
+                children: /* @__PURE__ */ jsxs("span", {
+                  children: [
+                    totalYieldSelected,
+                    " selected · ",
+                    totalYieldPublished,
+                    " published"
+                  ]
+                })
               })
-            }),
-            /* @__PURE__ */ jsx("tbody", {
-              children: page.map((run) => {
-                const row = overview?.rows[run.id] ?? null;
-                return /* @__PURE__ */ jsxs("tr", {
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-summary-charts",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-chart-card",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-chart-header",
+                children: /* @__PURE__ */ jsxs("div", {
                   children: [
-                    /* @__PURE__ */ jsx("td", {
-                      children: /* @__PURE__ */ jsx("a", {
-                        className: "kk-collect-run-link",
-                        href: runHref(run.id),
-                        children: run.id
-                      })
+                    /* @__PURE__ */ jsx("h3", {
+                      className: "kk-chart-title",
+                      children: "Ingestion Volume Over Time"
                     }),
-                    /* @__PURE__ */ jsx("td", {
-                      children: formatTimestamp(run.startedAt)
+                    /* @__PURE__ */ jsx("span", {
+                      className: "kk-chart-subtitle",
+                      children: "Distribution stacked by source per collection run"
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-chart-svg-wrap",
+                children: /* @__PURE__ */ jsxs("svg", {
+                  role: "img",
+                  "aria-label": "Ingestion Volume Over Time",
+                  width: "100%",
+                  height: "160",
+                  viewBox: "0 0 460 160",
+                  preserveAspectRatio: "none",
+                  children: [
+                    /* @__PURE__ */ jsx("title", {
+                      children: "Ingestion Volume Over Time"
                     }),
-                    /* @__PURE__ */ jsx("td", {
-                      children: runDuration(run.startedAt, run.completedAt)
+                    /* @__PURE__ */ jsx("line", {
+                      x1: "10",
+                      y1: "130",
+                      x2: "450",
+                      y2: "130",
+                      stroke: "var(--color-spur-border)",
+                      strokeWidth: "1"
                     }),
-                    /* @__PURE__ */ jsx("td", {
-                      children: run.status
+                    /* @__PURE__ */ jsx("line", {
+                      x1: "10",
+                      y1: "80",
+                      x2: "450",
+                      y2: "80",
+                      stroke: "var(--color-spur-border)",
+                      strokeWidth: "1",
+                      strokeDasharray: "3 3"
                     }),
-                    storeState !== "available" ? /* @__PURE__ */ jsx("td", {
-                      colSpan: 6,
-                      className: "kk-collect-nostore",
-                      children: storeState === "loading" ? "store not loaded yet" : "store unavailable"
-                    }) : row === null ? /* @__PURE__ */ jsx("td", {
-                      colSpan: 6,
-                      className: "kk-collect-nostore",
-                      children: storeCellText(run.status)
-                    }) : /* @__PURE__ */ jsx(StoredCells, {
-                      row
-                    })
+                    /* @__PURE__ */ jsx("line", {
+                      x1: "10",
+                      y1: "30",
+                      x2: "450",
+                      y2: "30",
+                      stroke: "var(--color-spur-border)",
+                      strokeWidth: "1",
+                      strokeDasharray: "3 3"
+                    }),
+                    chartRuns.map((run, i) => {
+                      const row = overview?.rows[run.id];
+                      const count = row ? row.inserted + row.updated : 0;
+                      const barHeight = Math.min(110, Math.max(4, count * 6));
+                      const x = 20 + i * 27;
+                      const y = 130 - barHeight;
+                      return /* @__PURE__ */ jsx("g", {
+                        children: /* @__PURE__ */ jsx("rect", {
+                          x,
+                          y,
+                          width: "18",
+                          height: barHeight,
+                          rx: "3",
+                          fill: run.status === "failed" ? "var(--color-spur-error)" : "var(--color-spur-accent)",
+                          opacity: 0.85,
+                          children: /* @__PURE__ */ jsx("title", {
+                            children: `${run.id}: ${count} items (${run.status})`
+                          })
+                        })
+                      }, run.id);
+                    }),
+                    chartRuns.length === 0 ? /* @__PURE__ */ jsx("text", {
+                      x: "230",
+                      y: "85",
+                      textAnchor: "middle",
+                      fill: "var(--color-spur-text-muted)",
+                      fontSize: "13",
+                      children: "No runs recorded in this time range"
+                    }) : null
                   ]
-                }, run.id);
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-chart-legend",
+                children: [
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-chart-legend-item",
+                    children: [
+                      /* @__PURE__ */ jsx("span", {
+                        className: "kk-chart-legend-dot",
+                        style: { background: "var(--color-spur-accent)" }
+                      }),
+                      "Ingested Items"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-chart-legend-item",
+                    children: [
+                      /* @__PURE__ */ jsx("span", {
+                        className: "kk-chart-legend-dot",
+                        style: { background: "var(--color-spur-error)" }
+                      }),
+                      "Failed Run"
+                    ]
+                  })
+                ]
               })
-            })
-          ]
-        })
-      })
-    ]
-  });
-}
-function StoredCells({ row }) {
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-chart-card",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-chart-header",
+                children: /* @__PURE__ */ jsxs("div", {
+                  children: [
+                    /* @__PURE__ */ jsx("h3", {
+                      className: "kk-chart-title",
+                      children: "Decision Volume & Selection Activity"
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "kk-chart-subtitle",
+                      children: "Labeled items volume with selection yield overlay"
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-chart-svg-wrap",
+                children: /* @__PURE__ */ jsxs("svg", {
+                  role: "img",
+                  "aria-label": "Decision Volume and Selection Activity",
+                  width: "100%",
+                  height: "160",
+                  viewBox: "0 0 460 160",
+                  preserveAspectRatio: "none",
+                  children: [
+                    /* @__PURE__ */ jsx("title", {
+                      children: "Decision Volume and Selection Activity"
+                    }),
+                    /* @__PURE__ */ jsx("line", {
+                      x1: "10",
+                      y1: "130",
+                      x2: "450",
+                      y2: "130",
+                      stroke: "var(--color-spur-border)",
+                      strokeWidth: "1"
+                    }),
+                    /* @__PURE__ */ jsx("line", {
+                      x1: "10",
+                      y1: "80",
+                      x2: "450",
+                      y2: "80",
+                      stroke: "var(--color-spur-border)",
+                      strokeWidth: "1",
+                      strokeDasharray: "3 3"
+                    }),
+                    /* @__PURE__ */ jsx("line", {
+                      x1: "10",
+                      y1: "30",
+                      x2: "450",
+                      y2: "30",
+                      stroke: "var(--color-spur-border)",
+                      strokeWidth: "1",
+                      strokeDasharray: "3 3"
+                    }),
+                    chartRuns.map((run, i) => {
+                      const row = overview?.rows[run.id];
+                      const labeled = row?.labeledItems ?? 0;
+                      const barHeight = Math.min(100, Math.max(3, labeled * 5));
+                      const x = 20 + i * 27;
+                      const y = 130 - barHeight;
+                      return /* @__PURE__ */ jsx("rect", {
+                        x,
+                        y,
+                        width: "18",
+                        height: barHeight,
+                        rx: "3",
+                        fill: "#a855f7",
+                        opacity: 0.8,
+                        children: /* @__PURE__ */ jsx("title", {
+                          children: `${run.id}: ${labeled} labeled`
+                        })
+                      }, run.id);
+                    }),
+                    chartRuns.length === 0 ? /* @__PURE__ */ jsx("text", {
+                      x: "230",
+                      y: "85",
+                      textAnchor: "middle",
+                      fill: "var(--color-spur-text-muted)",
+                      fontSize: "13",
+                      children: "No runs recorded in this time range"
+                    }) : null,
+                    chartRuns.length > 1 ? /* @__PURE__ */ jsx("polyline", {
+                      fill: "none",
+                      stroke: "var(--color-spur-success)",
+                      strokeWidth: "2",
+                      points: chartRuns.map((run, i) => {
+                        const row = overview?.rows[run.id];
+                        const sel = row?.yield.selected ?? 0;
+                        const py = 120 - Math.min(90, sel * 12);
+                        const px = 29 + i * 27;
+                        return `${px},${py}`;
+                      }).join(" ")
+                    }) : null
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-chart-legend",
+                children: [
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-chart-legend-item",
+                    children: [
+                      /* @__PURE__ */ jsx("span", {
+                        className: "kk-chart-legend-dot",
+                        style: { background: "#a855f7" }
+                      }),
+                      "Labeled Items"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-chart-legend-item",
+                    children: [
+                      /* @__PURE__ */ jsx("span", {
+                        className: "kk-chart-legend-dot",
+                        style: { background: "var(--color-spur-success)" }
+                      }),
+                      "Selection Yield"
+                    ]
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-summary-grids",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-card",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-card-header",
+                children: [
+                  /* @__PURE__ */ jsx("h2", {
+                    children: "Top Ingestion Sources"
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-stat-sub",
+                    children: [
+                      sortedSources.length,
+                      " tracked sources"
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-table-container",
+                children: /* @__PURE__ */ jsxs("table", {
+                  className: "kk-table",
+                  children: [
+                    /* @__PURE__ */ jsx("thead", {
+                      children: /* @__PURE__ */ jsxs("tr", {
+                        children: [
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Source"
+                          }),
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Items"
+                          }),
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Share"
+                          }),
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Status"
+                          })
+                        ]
+                      })
+                    }),
+                    /* @__PURE__ */ jsx("tbody", {
+                      children: sortedSources.length === 0 ? /* @__PURE__ */ jsx("tr", {
+                        children: /* @__PURE__ */ jsx("td", {
+                          colSpan: 4,
+                          className: "kk-board-state",
+                          children: "No source telemetry recorded yet."
+                        })
+                      }) : sortedSources.map(([source, count]) => {
+                        const share = totalCollected > 0 ? Math.round(count / totalCollected * 100) : 0;
+                        return /* @__PURE__ */ jsxs("tr", {
+                          children: [
+                            /* @__PURE__ */ jsx("td", {
+                              children: /* @__PURE__ */ jsx("strong", {
+                                children: source
+                              })
+                            }),
+                            /* @__PURE__ */ jsx("td", {
+                              children: count
+                            }),
+                            /* @__PURE__ */ jsx("td", {
+                              children: /* @__PURE__ */ jsxs("span", {
+                                style: {
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                  gap: "0.5rem"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx("span", {
+                                    className: "kk-collect-bar",
+                                    style: { width: "5rem" },
+                                    children: /* @__PURE__ */ jsx("span", {
+                                      className: "kk-collect-bar-seg",
+                                      style: { width: `${Math.max(10, share)}%` }
+                                    })
+                                  }),
+                                  /* @__PURE__ */ jsxs("span", {
+                                    className: "kk-stat-sub",
+                                    children: [
+                                      share,
+                                      "%"
+                                    ]
+                                  })
+                                ]
+                              })
+                            }),
+                            /* @__PURE__ */ jsx("td", {
+                              children: /* @__PURE__ */ jsx("span", {
+                                className: "kk-badge kk-badge-success",
+                                children: "Active"
+                              })
+                            })
+                          ]
+                        }, source);
+                      })
+                    })
+                  ]
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-card",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-card-header",
+                children: [
+                  /* @__PURE__ */ jsx("h2", {
+                    children: "Recent Collection Runs & Health"
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "kk-stat-sub",
+                    children: [
+                      "Last ",
+                      Math.min(5, page.length),
+                      " runs"
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "kk-table-container",
+                children: /* @__PURE__ */ jsxs("table", {
+                  className: "kk-table",
+                  children: [
+                    /* @__PURE__ */ jsx("thead", {
+                      children: /* @__PURE__ */ jsxs("tr", {
+                        children: [
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Run ID"
+                          }),
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Status"
+                          }),
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Items"
+                          }),
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Yield"
+                          }),
+                          /* @__PURE__ */ jsx("th", {
+                            scope: "col",
+                            children: "Action"
+                          })
+                        ]
+                      })
+                    }),
+                    /* @__PURE__ */ jsx("tbody", {
+                      children: page.slice(0, 5).map((run) => {
+                        const row = overview?.rows[run.id];
+                        const itemsCount = row ? row.inserted + row.updated : "—";
+                        const yieldCount = row ? row.yield.selected : "—";
+                        return /* @__PURE__ */ jsxs("tr", {
+                          children: [
+                            /* @__PURE__ */ jsxs("td", {
+                              children: [
+                                /* @__PURE__ */ jsx("button", {
+                                  type: "button",
+                                  className: "kk-collect-run-link",
+                                  onClick: () => onInspectRun?.(run.id),
+                                  title: `Inspect run ${run.id}`,
+                                  children: run.id
+                                }),
+                                /* @__PURE__ */ jsx("div", {
+                                  className: "kk-stat-sub",
+                                  children: formatTimestamp(run.startedAt)
+                                })
+                              ]
+                            }),
+                            /* @__PURE__ */ jsx("td", {
+                              children: /* @__PURE__ */ jsx("span", {
+                                className: `kk-badge ${run.status === "done" ? "kk-badge-success" : run.status === "failed" ? "kk-badge-failed" : "kk-badge-running"}`,
+                                children: run.status
+                              })
+                            }),
+                            /* @__PURE__ */ jsx("td", {
+                              children: itemsCount
+                            }),
+                            /* @__PURE__ */ jsx("td", {
+                              children: yieldCount
+                            }),
+                            /* @__PURE__ */ jsx("td", {
+                              children: /* @__PURE__ */ jsx("button", {
+                                type: "button",
+                                className: "kk-table-btn",
+                                onClick: () => onInspectRun?.(run.id),
+                                children: "Inspect"
+                              })
+                            })
+                          ]
+                        }, run.id);
+                      })
+                    })
+                  ]
+                })
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+function RunDetailsPanel({
+  runs,
+  overview,
+  now,
+  runHref,
+  searchQuery = "",
+  statusFilter = "all",
+  onSearchChange,
+  onStatusFilterChange,
+  onInspectRun
+}) {
+  const page = runs.slice(0, MAX_OVERVIEW_RUNS);
+  const storeState = overview === null ? "loading" : overview.availability;
+  const counts = overview !== null && storeState === "available" ? bannerCounts(page, overview.rows) : null;
+  const cadence = overview === null ? null : cadenceState(overview.lastStoredAt, now);
+  let filtered = runs;
+  if (statusFilter !== "all") {
+    filtered = filtered.filter((r) => r.status.toLowerCase() === statusFilter);
+  }
+  const q = searchQuery.trim().toLowerCase();
+  if (q !== "") {
+    filtered = filtered.filter((r) => r.id.toLowerCase().includes(q) || r.status.toLowerCase().includes(q));
+  }
+  const filteredRuns = filtered.slice(0, MAX_OVERVIEW_RUNS);
+  return /* @__PURE__ */ jsxs("section", {
+    className: "kk-card kk-collect-overview",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-collect-banner",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-collect-banner-cell",
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "kk-stat-label",
+                children: "Collection cadence"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "kk-collect-banner-value",
+                children: /* @__PURE__ */ jsx("span", {
+                  className: `kk-badge ${cadenceBadge(cadence)}`,
+                  children: cadence?.state ?? "unknown"
+                })
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "kk-stat-sub",
+                children: cadence?.detail ?? "The store has not answered yet."
+              })
+            ]
+          }),
+          counts === null ? null : /* @__PURE__ */ jsxs("div", {
+            className: "kk-collect-banner-cell",
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "kk-stat-label",
+                children: "Needs attention"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "kk-stat-value",
+                children: counts.failed + counts.doneWithoutRow
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: "kk-stat-sub",
+                children: [
+                  counts.failed,
+                  " failed · ",
+                  counts.doneWithoutRow,
+                  " done without a store row ·",
+                  " ",
+                  counts.inProgress,
+                  " in progress"
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      overview !== null && overview.availability === "unavailable" ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("p", {
+            children: "The store could not be read for this page; no counts are shown."
+          }),
+          /* @__PURE__ */ jsx(StoreState, {
+            diagnostics: overview.diagnostics
+          })
+        ]
+      }) : null,
+      overview === null ? /* @__PURE__ */ jsx("p", {
+        children: "The store overview has not loaded yet."
+      }) : null,
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-table-toolbar",
+        children: [
+          /* @__PURE__ */ jsx("input", {
+            type: "text",
+            className: "kk-board-run-filter-input",
+            placeholder: "Search runs by ID or status...",
+            value: searchQuery,
+            onChange: (e) => onSearchChange?.(e.target.value),
+            "aria-label": "Search runs"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "kk-time-pills",
+            role: "radiogroup",
+            "aria-label": "Filter runs by status",
+            children: ["all", "done", "failed", "running"].map((s) => /* @__PURE__ */ jsx("button", {
+              type: "button",
+              className: `kk-time-pill ${statusFilter === s ? "active" : ""}`,
+              onClick: () => onStatusFilterChange?.(s),
+              children: s.charAt(0).toUpperCase() + s.slice(1)
+            }, s))
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "kk-table-container",
+        children: /* @__PURE__ */ jsxs("table", {
+          className: "kk-table kk-collect-table",
+          children: [
+            /* @__PURE__ */ jsx("thead", {
+              children: /* @__PURE__ */ jsxs("tr", {
+                children: [
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Run"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Started"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Duration"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Status"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Collected"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Inserted"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Updated"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Label rows"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Fallback"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Yield"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Action"
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx("tbody", {
+              children: filteredRuns.length === 0 ? /* @__PURE__ */ jsx("tr", {
+                children: /* @__PURE__ */ jsx("td", {
+                  colSpan: 11,
+                  className: "kk-board-empty",
+                  children: "No runs match your filter."
+                })
+              }) : filteredRuns.map((run) => {
+                const row = overview?.rows[run.id] ?? null;
+                return /* @__PURE__ */ jsxs("tr", {
+                  children: [
+                    /* @__PURE__ */ jsx("td", {
+                      children: /* @__PURE__ */ jsx("a", {
+                        href: runHref ? runHref(run.id) : `#run-${run.id}`,
+                        className: "kk-collect-run-link",
+                        onClick: (e) => {
+                          if (onInspectRun) {
+                            e.preventDefault();
+                            onInspectRun(run.id);
+                          }
+                        },
+                        children: run.id
+                      })
+                    }),
+                    /* @__PURE__ */ jsx("td", {
+                      children: formatTimestamp(run.startedAt)
+                    }),
+                    /* @__PURE__ */ jsx("td", {
+                      children: runDuration(run.startedAt, run.completedAt)
+                    }),
+                    /* @__PURE__ */ jsx("td", {
+                      children: /* @__PURE__ */ jsx("span", {
+                        className: `kk-badge ${run.status === "done" ? "kk-badge-success" : run.status === "failed" ? "kk-badge-failed" : "kk-badge-running"}`,
+                        children: run.status
+                      })
+                    }),
+                    storeState !== "available" ? /* @__PURE__ */ jsx("td", {
+                      colSpan: 6,
+                      className: "kk-collect-nostore",
+                      children: storeState === "loading" ? "store not loaded yet" : "store unavailable"
+                    }) : row === null ? /* @__PURE__ */ jsx("td", {
+                      colSpan: 6,
+                      className: "kk-collect-nostore",
+                      children: storeCellText(run.status)
+                    }) : /* @__PURE__ */ jsx(StoredCells, {
+                      row
+                    }),
+                    /* @__PURE__ */ jsx("td", {
+                      children: /* @__PURE__ */ jsx("button", {
+                        type: "button",
+                        className: "kk-table-btn",
+                        onClick: () => onInspectRun?.(run.id),
+                        children: "Inspect"
+                      })
+                    })
+                  ]
+                }, run.id);
+              })
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+function StoredCells({ row }) {
   const segments = sourceSegments(row.sourceCounts);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
@@ -798,89 +2056,192 @@ function StoredCells({ row }) {
     ]
   });
 }
-function RunDetailPanel({
+function RunDetailModal({
+  runId,
   storeRun,
   results,
   facts,
   artifacts,
+  steps,
+  config,
   showEffective,
-  onToggleQuality
+  onToggleQuality,
+  onClose
 }) {
   const cards = storeRun !== null && storeRun.availability === "available" ? funnelCards(storeRun.row, results) : [];
   return /* @__PURE__ */ jsxs("div", {
-    className: "kk-collect-detail",
+    className: "kk-modal-backdrop",
+    role: "presentation",
     children: [
-      cards.length === 0 ? null : /* @__PURE__ */ jsx("div", {
-        className: "kk-stat-grid kk-collect-funnel",
-        children: cards.map((card) => /* @__PURE__ */ jsxs("div", {
-          className: "kk-stat-card",
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              className: "kk-stat-label",
-              children: card.title
-            }),
-            /* @__PURE__ */ jsx("span", {
-              className: "kk-stat-value",
-              children: card.value
-            }),
-            /* @__PURE__ */ jsx("span", {
-              className: "kk-stat-sub",
-              children: card.unit
-            }),
-            /* @__PURE__ */ jsx("span", {
-              className: "kk-stat-sub",
-              children: card.detail
-            })
-          ]
-        }, card.title))
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: "kk-modal-dismiss-backdrop",
+        onClick: onClose,
+        "aria-label": "Close modal dialog",
+        tabIndex: -1
       }),
-      storeRun === null ? /* @__PURE__ */ jsx("p", {
-        children: "The store has not answered for the selected run yet."
-      }) : null,
-      storeRun !== null && storeRun.availability === "unavailable" ? /* @__PURE__ */ jsxs(Fragment, {
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-modal-card",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "kk-run-modal-title",
         children: [
-          /* @__PURE__ */ jsx("p", {
-            children: "The store could not be read for this run; no counts are shown."
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-modal-header",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-modal-header-left",
+                children: [
+                  /* @__PURE__ */ jsxs("h2", {
+                    id: "kk-run-modal-title",
+                    children: [
+                      "Run Details: ",
+                      /* @__PURE__ */ jsx("code", {
+                        children: runId
+                      })
+                    ]
+                  }),
+                  results ? /* @__PURE__ */ jsx("span", {
+                    className: `kk-badge ${results.availability === "available" ? "kk-badge-success" : "kk-badge-neutral"}`,
+                    children: results.availability
+                  }) : null
+                ]
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                className: "kk-modal-close",
+                onClick: onClose,
+                "aria-label": "Close dialog",
+                children: "✕"
+              })
+            ]
           }),
-          /* @__PURE__ */ jsx(StoreState, {
-            diagnostics: storeRun.diagnostics
-          })
-        ]
-      }) : null,
-      storeRun !== null && storeRun.row === null && storeRun.availability === "available" ? /* @__PURE__ */ jsx("p", {
-        children: "This run wrote no store row."
-      }) : null,
-      storeRun !== null && storeRun.row !== null ? /* @__PURE__ */ jsx(LabelQuality, {
-        quality: storeRun.labelQuality,
-        diagnostics: storeRun.diagnostics,
-        showEffective,
-        onToggle: onToggleQuality
-      }) : null,
-      results === null ? /* @__PURE__ */ jsx("p", {
-        children: "No captured results for the selected run."
-      }) : null,
-      facts.length === 0 ? null : /* @__PURE__ */ jsx("dl", {
-        className: "kk-board-facts",
-        children: facts.map((fact) => /* @__PURE__ */ jsxs("div", {
-          children: [
-            /* @__PURE__ */ jsx("dt", {
-              children: fact.label
-            }),
-            /* @__PURE__ */ jsxs("dd", {
-              children: [
-                fact.value,
-                " ",
-                /* @__PURE__ */ jsx("span", {
-                  className: "kk-board-state",
-                  children: fact.availability
-                })
-              ]
-            })
-          ]
-        }, fact.label))
-      }),
-      /* @__PURE__ */ jsx(ArtifactRows, {
-        artifacts
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-modal-body",
+            children: [
+              cards.length > 0 ? /* @__PURE__ */ jsx("div", {
+                className: "kk-stat-grid kk-collect-funnel",
+                children: cards.map((card) => /* @__PURE__ */ jsxs("div", {
+                  className: "kk-stat-card",
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "kk-stat-label",
+                      children: card.title
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "kk-stat-value",
+                      children: card.value
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "kk-stat-sub",
+                      children: card.unit
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "kk-stat-sub",
+                      children: card.detail
+                    })
+                  ]
+                }, card.title))
+              }) : null,
+              storeRun === null ? /* @__PURE__ */ jsx("p", {
+                children: "The store has not answered for this run yet."
+              }) : null,
+              storeRun !== null && storeRun.availability === "unavailable" ? /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx("p", {
+                    children: "The store could not be read for this run; no counts are shown."
+                  }),
+                  /* @__PURE__ */ jsx(StoreState, {
+                    diagnostics: storeRun.diagnostics
+                  })
+                ]
+              }) : null,
+              storeRun !== null && storeRun.row === null && storeRun.availability === "available" ? /* @__PURE__ */ jsx("p", {
+                children: "This run wrote no store row."
+              }) : null,
+              storeRun !== null && storeRun.row !== null ? /* @__PURE__ */ jsx(LabelQuality, {
+                quality: storeRun.labelQuality,
+                diagnostics: storeRun.diagnostics,
+                showEffective,
+                onToggle: onToggleQuality
+              }) : null,
+              facts.length > 0 ? /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    className: "kk-chart-title",
+                    style: { marginBottom: "0.5rem" },
+                    children: "Core Facts"
+                  }),
+                  /* @__PURE__ */ jsx("dl", {
+                    className: "kk-board-facts",
+                    children: facts.map((fact) => /* @__PURE__ */ jsxs("div", {
+                      children: [
+                        /* @__PURE__ */ jsx("dt", {
+                          children: fact.label
+                        }),
+                        /* @__PURE__ */ jsxs("dd", {
+                          children: [
+                            fact.value,
+                            " ",
+                            /* @__PURE__ */ jsx("span", {
+                              className: "kk-board-state",
+                              children: fact.availability
+                            })
+                          ]
+                        })
+                      ]
+                    }, fact.label))
+                  })
+                ]
+              }) : null,
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    className: "kk-chart-title",
+                    style: { marginBottom: "0.5rem" },
+                    children: "Artifact Evidence"
+                  }),
+                  /* @__PURE__ */ jsx(ArtifactRows, {
+                    artifacts
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    className: "kk-chart-title",
+                    style: { marginBottom: "0.5rem" },
+                    children: "Workflow Configuration"
+                  }),
+                  /* @__PURE__ */ jsx(ConfigPanel, {
+                    config: config ?? null
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    className: "kk-chart-title",
+                    style: { marginBottom: "0.5rem" },
+                    children: "Progress & Attempts"
+                  }),
+                  /* @__PURE__ */ jsx(ProgressPanel, {
+                    steps: steps ?? []
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "kk-modal-footer",
+            children: /* @__PURE__ */ jsx("button", {
+              type: "button",
+              className: "kk-btn-action",
+              onClick: onClose,
+              children: "Close"
+            })
+          })
+        ]
       })
     ]
   });
@@ -1067,108 +2428,662 @@ function FilterSelect({
             value: "",
             children: "All"
           }),
-          options.map((option) => /* @__PURE__ */ jsx("option", {
-            value: option,
-            children: option
-          }, option))
+          options.map((option) => /* @__PURE__ */ jsx("option", {
+            value: option,
+            children: option
+          }, option))
+        ]
+      })
+    ]
+  });
+}
+function ItemsPanel({
+  runId,
+  items,
+  filters,
+  quality,
+  runs,
+  onFilterChange,
+  onSearchChange,
+  onRunChange,
+  onPageChange,
+  onInspectItem
+}) {
+  const current = items !== null && (runId === null || items.runId === runId || items.runId === "") ? items : null;
+  const storeState = current === null ? "loading" : current.availability === "available" ? "available" : "unavailable";
+  const page = storeState === "available" ? current : null;
+  const count = page === null ? null : pager(page.page, page.total, page.pageSize);
+  return /* @__PURE__ */ jsxs("section", {
+    className: "kk-card kk-collect-items",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-collect-filters",
+        children: [
+          onSearchChange ? /* @__PURE__ */ jsxs("label", {
+            className: "kk-collect-filter",
+            children: [
+              "Search",
+              /* @__PURE__ */ jsx("input", {
+                type: "text",
+                className: "kk-search-input",
+                placeholder: "Title or URL...",
+                value: filters.search ?? "",
+                onChange: onSearchChange,
+                "aria-label": "Search items"
+              })
+            ]
+          }) : null,
+          runs && runs.length > 0 ? /* @__PURE__ */ jsxs("label", {
+            className: "kk-collect-filter",
+            children: [
+              "Run",
+              /* @__PURE__ */ jsxs("select", {
+                name: "run",
+                value: runId ?? "",
+                onChange: (e) => onRunChange?.(e.target.value === "" ? undefined : e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", {
+                    value: "",
+                    children: "All Runs"
+                  }),
+                  runs.map((r) => /* @__PURE__ */ jsxs("option", {
+                    value: r.id,
+                    children: [
+                      r.id.length > 18 ? `${r.id.slice(0, 8)}...${r.id.slice(-6)}` : r.id,
+                      " (",
+                      r.status,
+                      ")"
+                    ]
+                  }, r.id))
+                ]
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ jsx(FilterSelect, {
+            label: "Source",
+            name: "source",
+            value: filters.source,
+            options: page?.sources ?? [],
+            onChange: onFilterChange
+          }),
+          /* @__PURE__ */ jsx(FilterSelect, {
+            label: "Seen",
+            name: "seen",
+            value: filters.seen,
+            options: ["new", "reseen"],
+            onChange: onFilterChange
+          }),
+          /* @__PURE__ */ jsx(FilterSelect, {
+            label: "Decision",
+            name: "decision",
+            value: filters.decision,
+            options: quality.map((entry) => entry.decisionId),
+            onChange: onFilterChange
+          }),
+          /* @__PURE__ */ jsx(FilterSelect, {
+            label: "Value",
+            name: "value",
+            value: filters.value,
+            options: decisionValues(quality, filters.decision ?? ""),
+            onChange: onFilterChange
+          }),
+          /* @__PURE__ */ jsx(FilterSelect, {
+            label: "Selection",
+            name: "selection",
+            value: filters.selection,
+            options: ["selected", "published", "dropped", "none"],
+            onChange: onFilterChange
+          })
+        ]
+      }),
+      runId === null && items === null ? /* @__PURE__ */ jsx("p", {
+        children: "Select a run to browse its items."
+      }) : null,
+      runId !== null && storeState === "loading" ? /* @__PURE__ */ jsx("p", {
+        children: "The items page has not loaded yet."
+      }) : null,
+      storeState === "unavailable" ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("p", {
+            children: "The store could not be read for this run; no items are shown."
+          }),
+          /* @__PURE__ */ jsx(StoreState, {
+            diagnostics: current?.diagnostics ?? []
+          })
+        ]
+      }) : null,
+      page !== null && page.items.length === 0 ? /* @__PURE__ */ jsx("p", {
+        children: "No items match these filters."
+      }) : null,
+      page === null || page.items.length === 0 ? null : /* @__PURE__ */ jsx("div", {
+        className: "kk-table-container",
+        children: /* @__PURE__ */ jsxs("table", {
+          className: "kk-table kk-collect-items-table",
+          children: [
+            /* @__PURE__ */ jsx("thead", {
+              children: /* @__PURE__ */ jsxs("tr", {
+                children: [
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Title"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Source"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Seen"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Story"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Labels"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Selection"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Action"
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx("tbody", {
+              children: page.items.map((item) => /* @__PURE__ */ jsx(ItemRow, {
+                item,
+                onInspect: onInspectItem
+              }, item.id))
+            })
+          ]
+        })
+      }),
+      count === null ? null : /* @__PURE__ */ jsxs("div", {
+        className: "kk-collect-pager",
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            name: "previous",
+            disabled: count.page <= 1,
+            onClick: onPageChange,
+            children: "Previous"
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            children: [
+              "Page ",
+              count.page,
+              " of ",
+              count.pages,
+              " · ",
+              count.total,
+              " items"
+            ]
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            name: "next",
+            disabled: count.page >= count.pages,
+            onClick: onPageChange,
+            children: "Next"
+          })
+        ]
+      })
+    ]
+  });
+}
+function ItemRow({ item, onInspect }) {
+  const labels = Object.entries(item.labels);
+  const details = item.labelDetails ?? {};
+  return /* @__PURE__ */ jsxs("tr", {
+    children: [
+      /* @__PURE__ */ jsxs("td", {
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            children: item.url === null ? item.title : /* @__PURE__ */ jsx("a", {
+              href: item.url,
+              target: "_blank",
+              rel: "noreferrer",
+              children: item.title
+            })
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            style: { marginTop: "0.25rem", display: "flex", gap: "0.25rem" },
+            children: [
+              item.domain ? /* @__PURE__ */ jsx("span", {
+                className: "kk-domain-pill",
+                children: item.domain
+              }) : null,
+              item.lang ? /* @__PURE__ */ jsx("span", {
+                className: "kk-domain-pill",
+                children: item.lang
+              }) : null
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("td", {
+        children: item.source
+      }),
+      /* @__PURE__ */ jsx("td", {
+        children: /* @__PURE__ */ jsx("span", {
+          className: `kk-badge ${item.seen === "new" ? "kk-badge-success" : "kk-badge-neutral"}`,
+          children: item.seen
+        })
+      }),
+      /* @__PURE__ */ jsx("td", {
+        children: item.storyId ?? "—"
+      }),
+      /* @__PURE__ */ jsx("td", {
+        children: labels.length === 0 ? "—" : labels.map(([decision, value]) => {
+          const detail = details[decision];
+          const conf = detail?.confidence?.toUpperCase();
+          return /* @__PURE__ */ jsxs("span", {
+            className: "kk-chip",
+            style: { display: "inline-flex", alignItems: "center", gap: "0.25rem" },
+            children: [
+              /* @__PURE__ */ jsxs("span", {
+                children: [
+                  decision,
+                  ": ",
+                  value
+                ]
+              }),
+              conf ? /* @__PURE__ */ jsx("span", {
+                className: `kk-confidence-pill ${conf === "HIGH" ? "kk-confidence-high" : conf === "MEDIUM" ? "kk-confidence-medium" : "kk-confidence-low"}`,
+                children: conf
+              }) : null
+            ]
+          }, decision);
+        })
+      }),
+      /* @__PURE__ */ jsx("td", {
+        children: /* @__PURE__ */ jsx("span", {
+          className: `kk-badge ${item.selection === "published" ? "kk-badge-success" : item.selection === "selected" ? "kk-badge-running" : item.selection === "dropped" ? "kk-badge-warning" : "kk-badge-neutral"}`,
+          children: item.selection
+        })
+      }),
+      /* @__PURE__ */ jsx("td", {
+        children: /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: "kk-table-btn",
+          onClick: () => onInspect?.(item),
+          children: "Inspect"
+        })
+      })
+    ]
+  });
+}
+function ItemDetailModal({ item, onClose }) {
+  const details = Object.entries(item.labelDetails ?? {});
+  return /* @__PURE__ */ jsxs("div", {
+    className: "kk-modal-backdrop",
+    role: "presentation",
+    children: [
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: "kk-modal-dismiss-backdrop",
+        onClick: onClose,
+        "aria-label": "Close item modal",
+        tabIndex: -1
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "kk-modal-card",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "kk-item-modal-title",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-modal-header",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "kk-modal-header-left",
+                children: [
+                  /* @__PURE__ */ jsx("h2", {
+                    id: "kk-item-modal-title",
+                    children: "Item Details"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: `kk-badge ${item.seen === "new" ? "kk-badge-success" : "kk-badge-neutral"}`,
+                    children: item.seen
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "kk-domain-pill",
+                    children: item.source
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                className: "kk-modal-close",
+                onClick: onClose,
+                "aria-label": "Close dialog",
+                children: "✕"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "kk-modal-body",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    style: { margin: "0 0 0.5rem", fontSize: "1.1rem" },
+                    children: item.title
+                  }),
+                  item.url ? /* @__PURE__ */ jsx("a", {
+                    href: item.url,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    style: { wordBreak: "break-all" },
+                    children: item.url
+                  }) : /* @__PURE__ */ jsx("span", {
+                    className: "kk-board-state",
+                    children: "No canonical URL"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("dl", {
+                className: "kk-board-facts",
+                children: [
+                  /* @__PURE__ */ jsxs("div", {
+                    children: [
+                      /* @__PURE__ */ jsx("dt", {
+                        children: "Item ID"
+                      }),
+                      /* @__PURE__ */ jsx("dd", {
+                        children: /* @__PURE__ */ jsx("code", {
+                          children: item.id
+                        })
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs("div", {
+                    children: [
+                      /* @__PURE__ */ jsx("dt", {
+                        children: "Story ID"
+                      }),
+                      /* @__PURE__ */ jsx("dd", {
+                        children: item.storyId ?? "—"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs("div", {
+                    children: [
+                      /* @__PURE__ */ jsx("dt", {
+                        children: "Domain"
+                      }),
+                      /* @__PURE__ */ jsx("dd", {
+                        children: item.domain ?? "—"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs("div", {
+                    children: [
+                      /* @__PURE__ */ jsx("dt", {
+                        children: "Language"
+                      }),
+                      /* @__PURE__ */ jsx("dd", {
+                        children: item.lang ?? "—"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs("div", {
+                    children: [
+                      /* @__PURE__ */ jsx("dt", {
+                        children: "Body Characters"
+                      }),
+                      /* @__PURE__ */ jsx("dd", {
+                        children: item.bodyChars?.toLocaleString() ?? "—"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs("div", {
+                    children: [
+                      /* @__PURE__ */ jsx("dt", {
+                        children: "Selection Status"
+                      }),
+                      /* @__PURE__ */ jsx("dd", {
+                        children: /* @__PURE__ */ jsx("span", {
+                          className: `kk-badge ${item.selection === "published" ? "kk-badge-success" : item.selection === "selected" ? "kk-badge-running" : "kk-badge-neutral"}`,
+                          children: item.selection
+                        })
+                      })
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsxs("h3", {
+                    className: "kk-chart-title",
+                    style: { marginBottom: "0.5rem" },
+                    children: [
+                      "Label Decisions (",
+                      details.length,
+                      ")"
+                    ]
+                  }),
+                  details.length === 0 ? /* @__PURE__ */ jsx("p", {
+                    className: "kk-board-state",
+                    children: "No detailed label decisions recorded for this item."
+                  }) : /* @__PURE__ */ jsx("div", {
+                    className: "kk-table-container",
+                    children: /* @__PURE__ */ jsxs("table", {
+                      className: "kk-table",
+                      children: [
+                        /* @__PURE__ */ jsx("thead", {
+                          children: /* @__PURE__ */ jsxs("tr", {
+                            children: [
+                              /* @__PURE__ */ jsx("th", {
+                                scope: "col",
+                                children: "Decision"
+                              }),
+                              /* @__PURE__ */ jsx("th", {
+                                scope: "col",
+                                children: "Value"
+                              }),
+                              /* @__PURE__ */ jsx("th", {
+                                scope: "col",
+                                children: "Confidence"
+                              }),
+                              /* @__PURE__ */ jsx("th", {
+                                scope: "col",
+                                children: "Maker"
+                              }),
+                              /* @__PURE__ */ jsx("th", {
+                                scope: "col",
+                                children: "Score"
+                              })
+                            ]
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("tbody", {
+                          children: details.map(([decision, detail]) => {
+                            const conf = detail.confidence?.toUpperCase();
+                            return /* @__PURE__ */ jsxs("tr", {
+                              children: [
+                                /* @__PURE__ */ jsx("td", {
+                                  children: /* @__PURE__ */ jsx("strong", {
+                                    children: decision
+                                  })
+                                }),
+                                /* @__PURE__ */ jsx("td", {
+                                  children: detail.value
+                                }),
+                                /* @__PURE__ */ jsx("td", {
+                                  children: conf ? /* @__PURE__ */ jsx("span", {
+                                    className: `kk-confidence-pill ${conf === "HIGH" ? "kk-confidence-high" : conf === "MEDIUM" ? "kk-confidence-medium" : "kk-confidence-low"}`,
+                                    children: conf
+                                  }) : "—"
+                                }),
+                                /* @__PURE__ */ jsx("td", {
+                                  children: detail.maker ?? "—"
+                                }),
+                                /* @__PURE__ */ jsx("td", {
+                                  children: detail.score !== null ? detail.score : "—"
+                                })
+                              ]
+                            }, decision);
+                          })
+                        })
+                      ]
+                    })
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "kk-modal-footer",
+            children: /* @__PURE__ */ jsx("button", {
+              type: "button",
+              className: "kk-btn-action",
+              onClick: onClose,
+              children: "Close"
+            })
+          })
         ]
       })
     ]
   });
 }
-function ItemsPanel({
-  runId,
-  items,
+function formatEpoch(ms) {
+  if (ms === null || ms === undefined || Number.isNaN(ms) || ms <= 0)
+    return "—";
+  try {
+    return formatTimestamp(new Date(ms).toISOString());
+  } catch {
+    return "—";
+  }
+}
+function SelectionsPanel({
+  selections,
+  topics,
   filters,
-  quality,
-  onFilterChange,
-  onPageChange
+  onTopicChange,
+  onStatusChange,
+  onSearchChange,
+  onPageChange,
+  onInspectRun
 }) {
-  const current = items !== null && items.runId === runId ? items : null;
-  const storeState = current === null ? "loading" : current.availability === "available" ? "available" : "unavailable";
-  const page = storeState === "available" ? current : null;
+  const storeState = selections === null ? "loading" : selections.availability === "available" ? "available" : "unavailable";
+  const page = storeState === "available" ? selections : null;
   const count = page === null ? null : pager(page.page, page.total, page.pageSize);
+  const availableTopics = (topics && topics.length > 0 ? topics : selections?.topics) ?? [];
   return /* @__PURE__ */ jsxs("section", {
     className: "kk-card kk-collect-items",
     children: [
       /* @__PURE__ */ jsxs("div", {
         className: "kk-collect-filters",
         children: [
-          /* @__PURE__ */ jsx(FilterSelect, {
-            label: "Source",
-            name: "source",
-            value: filters.source,
-            options: page?.sources ?? [],
-            onChange: onFilterChange
-          }),
-          /* @__PURE__ */ jsx(FilterSelect, {
-            label: "Seen",
-            name: "seen",
-            value: filters.seen,
-            options: ["new", "reseen"],
-            onChange: onFilterChange
-          }),
-          /* @__PURE__ */ jsx(FilterSelect, {
-            label: "Decision",
-            name: "decision",
-            value: filters.decision,
-            options: quality.map((entry) => entry.decisionId),
-            onChange: onFilterChange
+          /* @__PURE__ */ jsxs("label", {
+            className: "kk-collect-filter",
+            children: [
+              "Search",
+              /* @__PURE__ */ jsx("input", {
+                type: "text",
+                className: "kk-search-input",
+                placeholder: "Topic, title or reason...",
+                value: filters.search ?? "",
+                onChange: (e) => onSearchChange?.(e.target.value),
+                "aria-label": "Search selections"
+              })
+            ]
           }),
-          /* @__PURE__ */ jsx(FilterSelect, {
-            label: "Value",
-            name: "value",
-            value: filters.value,
-            options: decisionValues(quality, filters.decision ?? ""),
-            onChange: onFilterChange
+          /* @__PURE__ */ jsxs("label", {
+            className: "kk-collect-filter",
+            children: [
+              "Topic",
+              /* @__PURE__ */ jsxs("select", {
+                value: filters.topic ?? "",
+                onChange: (e) => onTopicChange?.(e.target.value === "" ? undefined : e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", {
+                    value: "",
+                    children: "All Topics"
+                  }),
+                  availableTopics.map((t) => /* @__PURE__ */ jsx("option", {
+                    value: t,
+                    children: t
+                  }, t))
+                ]
+              })
+            ]
           }),
-          /* @__PURE__ */ jsx(FilterSelect, {
-            label: "Selection",
-            name: "selection",
-            value: filters.selection,
-            options: ["selected", "published", "dropped", "none"],
-            onChange: onFilterChange
+          /* @__PURE__ */ jsxs("label", {
+            className: "kk-collect-filter",
+            children: [
+              "Status",
+              /* @__PURE__ */ jsxs("select", {
+                value: filters.status ?? "",
+                onChange: (e) => onStatusChange?.(e.target.value === "" ? undefined : e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", {
+                    value: "",
+                    children: "All Statuses"
+                  }),
+                  /* @__PURE__ */ jsx("option", {
+                    value: "selected",
+                    children: "selected"
+                  }),
+                  /* @__PURE__ */ jsx("option", {
+                    value: "published",
+                    children: "published"
+                  }),
+                  /* @__PURE__ */ jsx("option", {
+                    value: "dropped",
+                    children: "dropped"
+                  })
+                ]
+              })
+            ]
           })
         ]
       }),
-      runId === null ? /* @__PURE__ */ jsx("p", {
-        children: "Select a run to browse its items."
-      }) : null,
-      runId !== null && storeState === "loading" ? /* @__PURE__ */ jsx("p", {
-        children: "The items page has not loaded yet."
+      storeState === "loading" ? /* @__PURE__ */ jsx("p", {
+        children: "The selections page has not loaded yet."
       }) : null,
       storeState === "unavailable" ? /* @__PURE__ */ jsxs(Fragment, {
         children: [
           /* @__PURE__ */ jsx("p", {
-            children: "The store could not be read for this run; no items are shown."
+            children: "The selections could not be read; no rows are shown."
           }),
           /* @__PURE__ */ jsx(StoreState, {
-            diagnostics: current?.diagnostics ?? []
+            diagnostics: selections?.diagnostics ?? []
           })
         ]
       }) : null,
-      page !== null && page.items.length === 0 ? /* @__PURE__ */ jsx("p", {
-        children: "No items match these filters."
+      page !== null && page.selections.length === 0 ? /* @__PURE__ */ jsx("p", {
+        children: "No selections match these filters."
       }) : null,
-      page === null || page.items.length === 0 ? null : /* @__PURE__ */ jsx("div", {
+      page === null || page.selections.length === 0 ? null : /* @__PURE__ */ jsx("div", {
         className: "kk-table-container",
         children: /* @__PURE__ */ jsxs("table", {
-          className: "kk-table kk-collect-items-table",
+          className: "kk-table",
           children: [
             /* @__PURE__ */ jsx("thead", {
               children: /* @__PURE__ */ jsxs("tr", {
                 children: [
                   /* @__PURE__ */ jsx("th", {
                     scope: "col",
-                    children: "Title"
+                    children: "Rank"
                   }),
                   /* @__PURE__ */ jsx("th", {
                     scope: "col",
-                    children: "Source"
+                    children: "Topic"
                   }),
                   /* @__PURE__ */ jsx("th", {
                     scope: "col",
-                    children: "Seen"
+                    children: "Title & URL"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Source"
                   }),
                   /* @__PURE__ */ jsx("th", {
                     scope: "col",
@@ -1176,19 +3091,82 @@ function ItemsPanel({
                   }),
                   /* @__PURE__ */ jsx("th", {
                     scope: "col",
-                    children: "Labels"
+                    children: "Status"
                   }),
                   /* @__PURE__ */ jsx("th", {
                     scope: "col",
-                    children: "Selection"
+                    children: "Reason"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Selected At"
+                  }),
+                  /* @__PURE__ */ jsx("th", {
+                    scope: "col",
+                    children: "Run ID"
                   })
                 ]
               })
             }),
             /* @__PURE__ */ jsx("tbody", {
-              children: page.items.map((item) => /* @__PURE__ */ jsx(ItemRow, {
-                item
-              }, item.id))
+              children: page.selections.map((item) => /* @__PURE__ */ jsxs("tr", {
+                children: [
+                  /* @__PURE__ */ jsx("td", {
+                    children: /* @__PURE__ */ jsxs("span", {
+                      className: "kk-badge kk-badge-neutral",
+                      children: [
+                        "#",
+                        item.rank ?? "—"
+                      ]
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: /* @__PURE__ */ jsx("span", {
+                      className: "kk-domain-pill",
+                      children: item.topic
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: item.url ? /* @__PURE__ */ jsx("a", {
+                      href: item.url,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      children: item.title ?? item.itemId
+                    }) : item.title ?? item.itemId
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: item.source ?? "—"
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: item.storyId ?? "—"
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: /* @__PURE__ */ jsx("span", {
+                      className: `kk-badge ${item.status === "published" ? "kk-badge-success" : item.status === "selected" ? "kk-badge-running" : "kk-badge-failed"}`,
+                      children: item.status
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: /* @__PURE__ */ jsx("span", {
+                      className: "kk-stat-sub",
+                      title: item.reason ?? undefined,
+                      children: item.reason ? item.reason.length > 60 ? `${item.reason.slice(0, 60)}…` : item.reason : "—"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: formatEpoch(item.selectedAt)
+                  }),
+                  /* @__PURE__ */ jsx("td", {
+                    children: /* @__PURE__ */ jsx("button", {
+                      type: "button",
+                      className: "kk-collect-run-link",
+                      onClick: () => onInspectRun?.(item.runId),
+                      title: "Inspect this collection run",
+                      children: item.runId
+                    })
+                  })
+                ]
+              }, `${item.topic}-${item.itemId}`))
             })
           ]
         })
@@ -1200,7 +3178,7 @@ function ItemsPanel({
             type: "button",
             name: "previous",
             disabled: count.page <= 1,
-            onClick: onPageChange,
+            onClick: () => onPageChange?.(-1),
             children: "Previous"
           }),
           /* @__PURE__ */ jsxs("span", {
@@ -1211,14 +3189,14 @@ function ItemsPanel({
               count.pages,
               " · ",
               count.total,
-              " items"
+              " selections"
             ]
           }),
           /* @__PURE__ */ jsx("button", {
             type: "button",
             name: "next",
             disabled: count.page >= count.pages,
-            onClick: onPageChange,
+            onClick: () => onPageChange?.(1),
             children: "Next"
           })
         ]
@@ -1226,43 +3204,6 @@ function ItemsPanel({
     ]
   });
 }
-function ItemRow({ item }) {
-  const labels = Object.entries(item.labels);
-  return /* @__PURE__ */ jsxs("tr", {
-    children: [
-      /* @__PURE__ */ jsx("td", {
-        children: item.url === null ? item.title : /* @__PURE__ */ jsx("a", {
-          href: item.url,
-          target: "_blank",
-          rel: "noreferrer",
-          children: item.title
-        })
-      }),
-      /* @__PURE__ */ jsx("td", {
-        children: item.source
-      }),
-      /* @__PURE__ */ jsx("td", {
-        children: item.seen
-      }),
-      /* @__PURE__ */ jsx("td", {
-        children: item.storyId ?? "—"
-      }),
-      /* @__PURE__ */ jsx("td", {
-        children: labels.length === 0 ? "—" : labels.map(([decision, value]) => /* @__PURE__ */ jsxs("span", {
-          className: "kk-chip",
-          children: [
-            decision,
-            ": ",
-            value
-          ]
-        }, decision))
-      }),
-      /* @__PURE__ */ jsx("td", {
-        children: item.selection
-      })
-    ]
-  });
-}
 function ProgressPanel({ steps }) {
   if (steps.length === 0)
     return /* @__PURE__ */ jsx("p", {
@@ -1347,11 +3288,10 @@ function ConfigPanel({ config }) {
 // ../board/src/collect/index.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var TAB_LABELS = {
-  overview: "Overview",
-  summary: "Run detail",
+  summary: "Summary",
+  runs: "Run Details",
   items: "Items",
-  progress: "Execution progress",
-  config: "Workflow Config Summary"
+  selections: "Selections"
 };
 function messageOf(error) {
   return error instanceof Error ? error.message : String(error);
@@ -1378,34 +3318,48 @@ function usePolling(loader, intervalMs, refresh) {
     };
   }, [intervalMs]);
 }
+function isOfflineError(msg) {
+  return msg.includes("Failed to fetch") || msg.includes("NetworkError") || msg.includes("ECONNREFUSED");
+}
 function CollectModule() {
   const [link] = useState(() => parseDeepLink(window.location.search, COLLECT_TABS, COLLECT_TAB_ALIASES));
-  const [reader] = useState(() => readerOriginFrom(window.location.search));
+  const [reader] = useState(() => readerOriginFrom(window.location.search, window.location.origin));
   const readerOrigin = reader.origin;
   const client = useMemo(() => createBoardClient({ readerOrigin, boardOrigin: window.location.origin }), [readerOrigin]);
   const [rows, setRows] = useState([]);
-  const [cursor, setCursor] = useState(null);
+  const [_cursor, setCursor] = useState(null);
   const [selection, setSelection] = useState({
     runId: link.runId ?? null,
-    tab: link.tab ?? "overview"
+    tab: link.tab ?? "summary"
   });
   const [diagnostics, setDiagnostics] = useState(() => [
     ...link.diagnostics,
     ...reader.diagnostic === null ? [] : [reader.diagnostic]
   ]);
+  const [isReaderOffline, setIsReaderOffline] = useState(false);
   const [historyRefresh, setHistoryRefresh] = useState(() => initialRefresh(HISTORY_POLL_MS));
   const [readerRefresh, setReaderRefresh] = useState(() => initialRefresh(ACTIVE_POLL_MS));
   const [results, setResults] = useState(null);
   const [config, setConfig] = useState(null);
-  const [progress, setProgress] = useState(null);
   const [overview, setOverview] = useState(null);
   const [storeRun, setStoreRun] = useState(null);
   const [items, setItems] = useState(null);
   const [itemFilters, setItemFilters] = useState({ page: 1 });
+  const [selectedInspectItem, setSelectedInspectItem] = useState(null);
+  const [selections, setSelections] = useState(null);
+  const [selectionsFilters, setSelectionsFilters] = useState({ page: 1 });
+  const [selectedModalRunId, setSelectedModalRunId] = useState(null);
+  const [modalStoreRun, setModalStoreRun] = useState(null);
+  const [modalResults, setModalResults] = useState(null);
+  const [modalProgress, setModalProgress] = useState(null);
+  const [modalConfig, setModalConfig] = useState(null);
+  const [timeRange, setTimeRange] = useState("24h");
   const [showEffective, setShowEffective] = useState(false);
-  const [filterQuery, setFilterQuery] = useState("");
+  const [runSearchQuery, setRunSearchQuery] = useState("");
+  const [runStatusFilter, setRunStatusFilter] = useState("all");
   const historyBusy = useRef(false);
   const readerBusy = useRef(false);
+  const modalTarget = useRef(null);
   const rowsRef = useRef(rows);
   rowsRef.current = rows;
   const selectionRef = useRef(selection);
@@ -1414,12 +3368,16 @@ function CollectModule() {
     if (runIds.length === 0)
       return;
     try {
-      setOverview(await client.storeOverview(runIds));
+      const res = await client.storeOverview(runIds);
+      setOverview(res);
+      setIsReaderOffline(false);
     } catch (error) {
-      setDiagnostics((existing) => [
-        ...existing,
-        { code: "board.store.unavailable", message: messageOf(error) }
-      ]);
+      const msg = messageOf(error);
+      if (isOfflineError(msg)) {
+        setIsReaderOffline(true);
+      } else {
+        setDiagnostics((existing) => [...existing, { code: "board.store.unavailable", message: msg }]);
+      }
     }
   }, [client]);
   const loadHistory = useCallback(async () => {
@@ -1463,13 +3421,16 @@ function CollectModule() {
       setResults(nextResults);
       setConfig(nextConfig);
       setReaderRefresh(() => succeeded(Date.now(), ACTIVE_POLL_MS));
+      setIsReaderOffline(false);
     } catch (error) {
       if (selectionRef.current.runId !== runId)
         return;
-      setDiagnostics((existing) => [
-        ...existing,
-        { code: "board.reader.unavailable", message: messageOf(error) }
-      ]);
+      const msg = messageOf(error);
+      if (isOfflineError(msg)) {
+        setIsReaderOffline(true);
+      } else {
+        setDiagnostics((existing) => [...existing, { code: "board.reader.unavailable", message: msg }]);
+      }
       setReaderRefresh((state) => failed(state, Date.now()));
     } finally {
       readerBusy.current = false;
@@ -1479,20 +3440,17 @@ function CollectModule() {
       if (selectionRef.current.runId !== runId)
         return;
       setStoreRun(nextStoreRun);
+      setIsReaderOffline(false);
     } catch (error) {
       if (selectionRef.current.runId !== runId)
         return;
-      setDiagnostics((existing) => [
-        ...existing,
-        { code: "board.store.run-unavailable", message: messageOf(error) }
-      ]);
+      const msg = messageOf(error);
+      if (isOfflineError(msg)) {
+        setIsReaderOffline(true);
+      } else {
+        setDiagnostics((existing) => [...existing, { code: "board.store.run-unavailable", message: msg }]);
+      }
     }
-    try {
-      const nextProgress = await client.progress(runId);
-      if (selectionRef.current.runId !== runId)
-        return;
-      setProgress(nextProgress);
-    } catch {}
   }, [client]);
   const itemsRequests = useRef(requestSequence());
   const loadItems = useCallback(async (runId) => {
@@ -1502,26 +3460,114 @@ function CollectModule() {
       if (!itemsRequests.current.isCurrent(token))
         return;
       setItems(page);
+      setIsReaderOffline(false);
     } catch (error) {
       if (!itemsRequests.current.isCurrent(token))
         return;
       setItems(null);
-      setDiagnostics((existing) => [
-        ...existing,
-        { code: "board.store.items-unavailable", message: messageOf(error) }
-      ]);
+      const msg = messageOf(error);
+      if (isOfflineError(msg)) {
+        setIsReaderOffline(true);
+      } else {
+        setDiagnostics((existing) => [
+          ...existing,
+          { code: "board.store.items-unavailable", message: msg }
+        ]);
+      }
     }
   }, [client, itemFilters]);
+  const selectionsRequests = useRef(requestSequence());
+  const loadSelections = useCallback(async () => {
+    const token = selectionsRequests.current.begin();
+    try {
+      const page = await client.storeSelections(selectionsFilters);
+      if (!selectionsRequests.current.isCurrent(token))
+        return;
+      setSelections(page);
+      setIsReaderOffline(false);
+    } catch (error) {
+      if (!selectionsRequests.current.isCurrent(token))
+        return;
+      setSelections(null);
+      const msg = messageOf(error);
+      if (isOfflineError(msg)) {
+        setIsReaderOffline(true);
+      } else {
+        setDiagnostics((existing) => [
+          ...existing,
+          { code: "board.store.selections-unavailable", message: msg }
+        ]);
+      }
+    }
+  }, [client, selectionsFilters]);
+  useEffect(() => {
+    if (!selectedModalRunId) {
+      modalTarget.current = null;
+      setModalStoreRun(null);
+      setModalResults(null);
+      setModalProgress(null);
+      setModalConfig(null);
+      return;
+    }
+    if (modalTarget.current !== selectedModalRunId) {
+      modalTarget.current = selectedModalRunId;
+      setModalStoreRun(null);
+      setModalResults(null);
+      setModalProgress(null);
+      setModalConfig(null);
+    }
+    if (selectedModalRunId === selection.runId) {
+      if (storeRun?.runId === selectedModalRunId)
+        setModalStoreRun(storeRun);
+      if (results?.runId === selectedModalRunId)
+        setModalResults(results);
+      if (config?.runId === selectedModalRunId)
+        setModalConfig(config);
+      if (modalProgress !== null && storeRun?.runId === selectedModalRunId && results?.runId === selectedModalRunId && config?.runId === selectedModalRunId) {
+        return;
+      }
+    }
+    let cancelled = false;
+    async function fetchModalData(runId) {
+      try {
+        const [rResults, rStore, rProg, rConfig] = await Promise.allSettled([
+          client.results("kk-collect", runId),
+          client.storeRun(runId),
+          client.progress(runId),
+          client.config("kk-collect", runId)
+        ]);
+        if (cancelled)
+          return;
+        if (rResults.status === "fulfilled")
+          setModalResults(rResults.value);
+        if (rStore.status === "fulfilled")
+          setModalStoreRun(rStore.value);
+        if (rProg.status === "fulfilled")
+          setModalProgress(rProg.value);
+        if (rConfig.status === "fulfilled")
+          setModalConfig(rConfig.value);
+      } catch {}
+    }
+    fetchModalData(selectedModalRunId);
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedModalRunId, selection.runId, storeRun, results, config, modalProgress, client]);
   usePolling(loadHistory, HISTORY_POLL_MS, historyRefresh);
   usePolling(loadReader, ACTIVE_POLL_MS, readerRefresh);
   useEffect(() => {
-    if (selection.tab !== "items" || selection.runId === null)
+    if (selection.tab !== "items")
       return;
-    loadItems(selection.runId);
+    loadItems(selection.runId ?? "");
   }, [selection.tab, selection.runId, loadItems]);
+  useEffect(() => {
+    if (selection.tab !== "selections")
+      return;
+    loadSelections();
+  }, [selection.tab, loadSelections]);
   useEffect(() => {
     if (selection.runId === null && rows.length > 0) {
-      setSelection((state) => state.runId === null ? resolveSelection(rows, link, "overview") : state);
+      setSelection((state) => state.runId === null ? resolveSelection(rows, link, "summary") : state);
     }
   }, [rows, selection.runId, link]);
   useEffect(() => {
@@ -1530,17 +3576,7 @@ function CollectModule() {
   const tab = selection.tab;
   const now = Date.now();
   const currentStoreRun = storeRun?.runId === selection.runId ? storeRun : null;
-  const facts = results === null ? [] : collectSummaryFacts(results, now);
-  const artifacts = results === null ? [] : artifactViews(results, readerOrigin);
-  const steps = progressRows(progress);
-  const selectedRow = rows.find((row) => row.id === selection.runId);
-  const filteredRows = useMemo(() => {
-    const q = filterQuery.trim().toLowerCase();
-    if (q === "")
-      return rows;
-    return rows.filter((r) => r.id.toLowerCase().includes(q) || r.status.toLowerCase().includes(q));
-  }, [rows, filterQuery]);
-  const runHref = useCallback((runId) => selectionPath({ runId, tab: "summary" }, window.location.search), []);
+  const runHref = useCallback((runId) => selectionPath({ runId, tab: "runs" }, window.location.search), []);
   const toggleQuality = useCallback(() => setShowEffective((state) => !state), []);
   const filterChanged = useCallback((event) => {
     const name = event.currentTarget.name;
@@ -1556,94 +3592,54 @@ function CollectModule() {
     const delta = event.currentTarget.name === "previous" ? -1 : 1;
     setItemFilters((state) => ({ ...state, page: Math.max(1, (state.page ?? 1) + delta) }));
   }, []);
+  const handleInspectRun = useCallback((runId) => {
+    setSelectedModalRunId(runId);
+    setSelection((s) => ({ ...s, runId }));
+  }, []);
+  const handleCloseModal = useCallback(() => {
+    setSelectedModalRunId(null);
+    setSelection((s) => ({ ...s, runId: null }));
+  }, []);
+  const modalFacts = modalResults ? collectSummaryFacts(modalResults, now) : [];
+  const modalArtifacts = modalResults ? artifactViews(modalResults, readerOrigin) : [];
+  const modalSteps = progressRows(modalProgress);
+  const displayDiagnostics = dedupeDiagnostics([...diagnostics, ...results?.diagnostics ?? []]).filter((d) => {
+    if (!isReaderOffline)
+      return true;
+    return d.code !== "board.reader.unavailable" && d.code !== "board.store.run-unavailable" && d.code !== "board.store.unavailable" && d.code !== "board.store.items-unavailable" && d.code !== "board.store.selections-unavailable";
+  });
   return /* @__PURE__ */ jsxs2("div", {
     className: "kk-board kk-board-collect",
     children: [
       /* @__PURE__ */ jsxs2("header", {
         className: "kk-board-header",
         children: [
-          /* @__PURE__ */ jsxs2("div", {
+          /* @__PURE__ */ jsx2("div", {
             className: "kk-board-header-left",
-            children: [
-              /* @__PURE__ */ jsxs2("div", {
-                className: "kk-board-header-title-row",
-                children: [
-                  /* @__PURE__ */ jsx2("h1", {
-                    children: "Collect"
-                  }),
-                  selectedRow ? /* @__PURE__ */ jsx2("span", {
-                    className: `kk-badge ${selectedRow.status === "done" ? "kk-badge-success" : selectedRow.status === "failed" ? "kk-badge-failed" : "kk-badge-running"}`,
-                    children: selectedRow.status
-                  }) : null
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("p", {
-                children: [
-                  "Run ",
-                  /* @__PURE__ */ jsx2("code", {
-                    children: selection.runId ?? "none selected"
-                  }),
-                  " · ",
-                  freshnessLabel(readerRefresh),
-                  results === null ? "" : ` · Results ${results.availability}`
-                ]
+            children: /* @__PURE__ */ jsx2("div", {
+              className: "kk-board-header-title-row",
+              children: /* @__PURE__ */ jsx2("h1", {
+                children: "Collect"
               })
-            ]
+            })
           }),
           /* @__PURE__ */ jsxs2("div", {
             className: "kk-board-header-right",
             children: [
-              /* @__PURE__ */ jsxs2("div", {
-                className: "kk-board-run-filter-group",
-                children: [
-                  /* @__PURE__ */ jsx2("input", {
-                    type: "text",
-                    className: "kk-board-run-filter-input",
-                    placeholder: "Filter runs...",
-                    value: filterQuery,
-                    onChange: (e) => setFilterQuery(e.target.value),
-                    "aria-label": "Filter runs"
-                  }),
-                  /* @__PURE__ */ jsxs2("label", {
-                    className: "kk-board-run-selector",
-                    children: [
-                      "Run",
-                      /* @__PURE__ */ jsxs2("select", {
-                        value: selection.runId ?? "",
-                        onChange: (event) => {
-                          setItemFilters((state) => ({ ...state, page: 1 }));
-                          setResults(null);
-                          setConfig(null);
-                          setProgress(null);
-                          setStoreRun(null);
-                          setSelection((state) => ({ ...state, runId: event.target.value || null }));
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx2("option", {
-                            value: "",
-                            children: rows.length === 0 ? "No runs recorded" : filteredRows.length === 0 ? "No matching runs" : "Select a run"
-                          }),
-                          filteredRows.map((row) => /* @__PURE__ */ jsxs2("option", {
-                            value: row.id,
-                            children: [
-                              row.id,
-                              " — ",
-                              row.status
-                            ]
-                          }, row.id))
-                        ]
-                      })
-                    ]
-                  })
-                ]
-              }),
               /* @__PURE__ */ jsx2("button", {
                 type: "button",
-                onClick: () => void loadReader(),
-                title: "Refresh run data",
+                onClick: () => {
+                  loadReader();
+                  loadHistory();
+                  if (selection.tab === "items")
+                    loadItems(selection.runId ?? "");
+                  if (selection.tab === "selections")
+                    loadSelections();
+                },
+                title: "Refresh data",
                 children: "↻ Refresh"
               }),
-              selection.runId === null ? null : /* @__PURE__ */ jsx2("a", {
+              /* @__PURE__ */ jsx2("a", {
                 href: selectionPath(selection, window.location.search),
                 className: "kk-btn-action",
                 title: "Permanent link",
@@ -1653,6 +3649,45 @@ function CollectModule() {
           })
         ]
       }),
+      isReaderOffline && readerOrigin !== window.location.origin ? /* @__PURE__ */ jsxs2("div", {
+        className: "kk-board-reader-offline-banner",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsx2("div", {
+            className: "kk-board-reader-offline-icon",
+            children: "⚠️"
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            className: "kk-board-reader-offline-content",
+            children: [
+              /* @__PURE__ */ jsxs2("strong", {
+                children: [
+                  "Loopback Board Reader Offline (",
+                  readerOrigin,
+                  ")"
+                ]
+              }),
+              /* @__PURE__ */ jsx2("p", {
+                children: "Store facts, item inspection, and artifact evidence require the local reader process. Spur run execution history remains available."
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx2("button", {
+            type: "button",
+            className: "kk-btn-action",
+            onClick: () => {
+              setIsReaderOffline(false);
+              loadReader();
+              loadHistory();
+              if (selection.tab === "items")
+                loadItems(selection.runId ?? "");
+              if (selection.tab === "selections")
+                loadSelections();
+            },
+            children: "↻ Retry Connection"
+          })
+        ]
+      }) : null,
       /* @__PURE__ */ jsx2("nav", {
         className: "kk-board-tabs",
         "aria-label": "Collect tabs",
@@ -1675,54 +3710,71 @@ function CollectModule() {
           "."
         ]
       }) : null,
-      tab === "overview" ? /* @__PURE__ */ jsx2(OverviewPanel, {
+      tab === "summary" ? /* @__PURE__ */ jsx2(SummaryPanel, {
         runs: rows,
         overview,
         now,
-        runHref
+        timeRange,
+        onTimeRangeChange: setTimeRange,
+        onInspectRun: handleInspectRun
       }) : null,
-      tab === "summary" ? /* @__PURE__ */ jsx2(RunDetailPanel, {
-        storeRun: currentStoreRun,
-        results,
-        facts,
-        artifacts,
-        showEffective,
-        onToggleQuality: toggleQuality
+      tab === "runs" ? /* @__PURE__ */ jsx2(RunDetailsPanel, {
+        runs: rows,
+        overview,
+        now,
+        runHref,
+        searchQuery: runSearchQuery,
+        statusFilter: runStatusFilter,
+        onSearchChange: setRunSearchQuery,
+        onStatusFilterChange: setRunStatusFilter,
+        onInspectRun: handleInspectRun
       }) : null,
       tab === "items" ? /* @__PURE__ */ jsx2(ItemsPanel, {
         runId: selection.runId,
         items,
         filters: itemFilters,
         quality: currentStoreRun?.labelQuality ?? [],
+        runs: rows,
+        onRunChange: (rId) => {
+          setItemFilters((s) => ({ ...s, page: 1 }));
+          setSelection((s) => ({ ...s, runId: rId ?? null }));
+        },
         onFilterChange: filterChanged,
-        onPageChange: pageChanged
+        onSearchChange: (e) => setItemFilters((s) => ({ ...s, search: e.target.value, page: 1 })),
+        onPageChange: pageChanged,
+        onInspectItem: (item) => setSelectedInspectItem(item)
       }) : null,
-      tab === "progress" ? /* @__PURE__ */ jsx2(ProgressPanel, {
-        steps
+      tab === "selections" ? /* @__PURE__ */ jsx2(SelectionsPanel, {
+        selections,
+        topics: selections?.topics ?? [],
+        filters: selectionsFilters,
+        onTopicChange: (topic) => setSelectionsFilters((s) => ({ ...s, topic, page: 1 })),
+        onStatusChange: (status) => setSelectionsFilters((s) => ({ ...s, status, page: 1 })),
+        onSearchChange: (search) => setSelectionsFilters((s) => ({ ...s, search, page: 1 })),
+        onPageChange: (delta) => setSelectionsFilters((s) => ({ ...s, page: Math.max(1, (s.page ?? 1) + delta) })),
+        onInspectRun: handleInspectRun
       }) : null,
-      tab === "config" ? /* @__PURE__ */ jsx2(ConfigPanel, {
-        config
-      }) : null,
-      dedupeDiagnostics([...diagnostics, ...results?.diagnostics ?? []]).map((diagnostic) => /* @__PURE__ */ jsx2("p", {
+      displayDiagnostics.map((diagnostic) => /* @__PURE__ */ jsx2("p", {
         role: "status",
         className: "kk-board-diagnostic",
         children: diagnosticLine(diagnostic)
       }, diagnostic.code)),
-      cursor === null ? null : /* @__PURE__ */ jsx2("button", {
-        type: "button",
-        onClick: () => void loadHistory(),
-        children: "Load more runs"
-      }),
-      /* @__PURE__ */ jsxs2("p", {
-        className: "kk-board-footnote",
-        children: [
-          "Run history every ",
-          HISTORY_POLL_MS / 1000,
-          "s; selected run every ",
-          ACTIVE_POLL_MS / 1000,
-          "s."
-        ]
-      })
+      selectedModalRunId ? /* @__PURE__ */ jsx2(RunDetailModal, {
+        runId: selectedModalRunId,
+        storeRun: modalStoreRun,
+        results: modalResults,
+        facts: modalFacts,
+        artifacts: modalArtifacts,
+        steps: modalSteps,
+        config: modalConfig,
+        showEffective,
+        onToggleQuality: toggleQuality,
+        onClose: handleCloseModal
+      }) : null,
+      selectedInspectItem ? /* @__PURE__ */ jsx2(ItemDetailModal, {
+        item: selectedInspectItem,
+        onClose: () => setSelectedInspectItem(null)
+      }) : null
     ]
   });
 }