@lunora/studio 0.0.0 → 1.0.0-alpha.2

package/dist/packem_shared/LogsPanel-CWdqAGpQ.js

@@ -0,0 +1,839 @@
+import { c } from 'react/compiler-runtime';
+import { useLunora } from '@lunora/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useState, useMemo, useRef } from 'react';
+import { L as LiveError } from './live-status-bPff1O7Y.js';
+import { ShardInput } from './ShardInput-DNCsT1KW.js';
+import { B as Badge } from './badge-B2PKA1-5.js';
+import { E as EmptyState } from './empty-state-DY_oe0k6.js';
+import { I as Input } from './input-XH4r1Pt1.js';
+import { u as useLiveAdmin } from './use-live-admin-D1h1Fzsd.js';
+import { useT } from './createStudioI18n-CgvlmDkN.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTION_PREFIX-DmBqMZ-z.js';
+import { a as CLOUDFLARE_OBSERVABILITY_URL } from './cf-links-BZfRdxSE.js';
+import { c as callOptions, e as errorMessage, a as adminRef } from './internal-BBZYexre.js';
+import { r as recordShard } from './shard-history-DyebH1R5.js';
+import { c as cn } from './utils-B05Dmz_H.js';
+import { f as flooredRectObserver } from './virtual-rect-CVMUskSm.js';
+import { u as useLiveShardSeed } from './use-live-shard-seed-B74RYcOy.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const SCROLL_HEIGHT = 400;
+const ROW_HEIGHT = 36;
+const SCROLL_STYLE = {
+  height: SCROLL_HEIGHT,
+  overflow: "auto"
+};
+const ROW_BASE_STYLE = {
+  left: 0,
+  position: "absolute",
+  top: 0,
+  width: "100%"
+};
+const LEVEL_VARIANT = {
+  debug: "secondary",
+  error: "destructive",
+  info: "outline",
+  warn: "secondary"
+};
+const OUTCOME_VARIANT = {
+  error: "destructive",
+  ok: "secondary"
+};
+const LogRow = (t0) => {
+  const $ = c(21);
+  const {
+    entry,
+    index,
+    measureRef,
+    start
+  } = t0;
+  const t1 = `translateY(${String(start)}px)`;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      ...ROW_BASE_STYLE,
+      transform: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const style = t2;
+  let t3;
+  if ($[2] !== entry.timestamp) {
+    t3 = new Date(entry.timestamp).toLocaleString();
+    $[2] = entry.timestamp;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-44 shrink-0 tabular-nums text-muted-foreground",
+      role: "gridcell",
+      children: t3
+    }, void 0, false);
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = LEVEL_VARIANT[entry.level];
+  let t6;
+  if ($[6] !== entry.level || $[7] !== t5) {
+    t6 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-20 shrink-0",
+      role: "gridcell",
+      children: /* @__PURE__ */ jsxDEV(Badge, {
+        variant: t5,
+        children: entry.level
+      }, void 0, false)
+    }, void 0, false);
+    $[6] = entry.level;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  const t7 = entry.functionPath ?? "—";
+  let t8;
+  if ($[9] !== t7) {
+    t8 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-48 shrink-0 truncate text-muted-foreground",
+      role: "gridcell",
+      children: t7
+    }, void 0, false);
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== entry.message) {
+    t9 = /* @__PURE__ */ jsxDEV("span", {
+      className: "flex-1 truncate",
+      role: "gridcell",
+      children: entry.message
+    }, void 0, false);
+    $[11] = entry.message;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== index || $[14] !== measureRef || $[15] !== style || $[16] !== t4 || $[17] !== t6 || $[18] !== t8 || $[19] !== t9) {
+    t10 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center border-b border-border px-3 py-1.5 font-mono text-xs hover:bg-muted/50",
+      "data-index": index,
+      "data-testid": "lg-row",
+      ref: measureRef,
+      role: "row",
+      style,
+      children: [t4, t6, t8, t9]
+    }, void 0, true);
+    $[13] = index;
+    $[14] = measureRef;
+    $[15] = style;
+    $[16] = t4;
+    $[17] = t6;
+    $[18] = t8;
+    $[19] = t9;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  return t10;
+};
+const tablesLabel = (tables) => tables.length === 0 ? "—" : tables.join(", ");
+const RequestRow = (t0) => {
+  const $ = c(37);
+  const {
+    entry,
+    index,
+    measureRef,
+    start
+  } = t0;
+  const t1 = `translateY(${String(start)}px)`;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      ...ROW_BASE_STYLE,
+      transform: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const style = t2;
+  let t3;
+  if ($[2] !== entry.ts) {
+    t3 = new Date(entry.ts).toLocaleString();
+    $[2] = entry.ts;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-40 shrink-0 tabular-nums text-muted-foreground",
+      role: "gridcell",
+      children: t3
+    }, void 0, false);
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = OUTCOME_VARIANT[entry.outcome];
+  let t6;
+  if ($[6] !== entry.outcome || $[7] !== t5) {
+    t6 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-16 shrink-0",
+      role: "gridcell",
+      children: /* @__PURE__ */ jsxDEV(Badge, {
+        variant: t5,
+        children: entry.outcome
+      }, void 0, false)
+    }, void 0, false);
+    $[6] = entry.outcome;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== entry.functionPath) {
+    t7 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-44 shrink-0 truncate",
+      role: "gridcell",
+      title: entry.functionPath,
+      children: entry.functionPath
+    }, void 0, false);
+    $[9] = entry.functionPath;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  const t8 = entry.shardKey ?? "—";
+  let t9;
+  if ($[11] !== t8) {
+    t9 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-24 shrink-0 truncate text-muted-foreground",
+      role: "gridcell",
+      children: t8
+    }, void 0, false);
+    $[11] = t8;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  const t10 = entry.userId ?? "—";
+  let t11;
+  if ($[13] !== t10) {
+    t11 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-24 shrink-0 truncate text-muted-foreground",
+      role: "gridcell",
+      children: t10
+    }, void 0, false);
+    $[13] = t10;
+    $[14] = t11;
+  } else {
+    t11 = $[14];
+  }
+  let t12;
+  if ($[15] !== entry.durationMs) {
+    t12 = Math.round(entry.durationMs);
+    $[15] = entry.durationMs;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  const t13 = `${String(t12)}ms`;
+  let t14;
+  if ($[17] !== t13) {
+    t14 = /* @__PURE__ */ jsxDEV("span", {
+      className: "w-16 shrink-0 tabular-nums text-muted-foreground",
+      role: "gridcell",
+      children: t13
+    }, void 0, false);
+    $[17] = t13;
+    $[18] = t14;
+  } else {
+    t14 = $[18];
+  }
+  let t15;
+  if ($[19] !== entry.errorMessage || $[20] !== entry.outcome || $[21] !== entry.tablesRead || $[22] !== entry.tablesWritten) {
+    t15 = entry.outcome === "error" && entry.errorMessage !== void 0 ? entry.errorMessage : `r:${tablesLabel(entry.tablesRead)} · w:${tablesLabel(entry.tablesWritten)}`;
+    $[19] = entry.errorMessage;
+    $[20] = entry.outcome;
+    $[21] = entry.tablesRead;
+    $[22] = entry.tablesWritten;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== t15) {
+    t16 = /* @__PURE__ */ jsxDEV("span", {
+      className: "flex-1 truncate text-muted-foreground",
+      role: "gridcell",
+      children: t15
+    }, void 0, false);
+    $[24] = t15;
+    $[25] = t16;
+  } else {
+    t16 = $[25];
+  }
+  let t17;
+  if ($[26] !== index || $[27] !== measureRef || $[28] !== style || $[29] !== t11 || $[30] !== t14 || $[31] !== t16 || $[32] !== t4 || $[33] !== t6 || $[34] !== t7 || $[35] !== t9) {
+    t17 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center border-b border-border px-3 py-1.5 font-mono text-xs hover:bg-muted/50",
+      "data-index": index,
+      "data-testid": "lg-req-row",
+      ref: measureRef,
+      role: "row",
+      style,
+      children: [t4, t6, t7, t9, t11, t14, t16]
+    }, void 0, true);
+    $[26] = index;
+    $[27] = measureRef;
+    $[28] = style;
+    $[29] = t11;
+    $[30] = t14;
+    $[31] = t16;
+    $[32] = t4;
+    $[33] = t6;
+    $[34] = t7;
+    $[35] = t9;
+    $[36] = t17;
+  } else {
+    t17 = $[36];
+  }
+  return t17;
+};
+const GET_LOGS = adminRef(ADMIN_FUNCTIONS.getLogs);
+const GET_REQUEST_LOG = adminRef(ADMIN_FUNCTIONS.getRequestLog);
+const entriesOf = (result) => {
+  const {
+    entries
+  } = result ?? {};
+  return Array.isArray(entries) ? entries : [];
+};
+const buildRequestQuery = (filters) => {
+  const query = {};
+  if (filters.functionPathPrefix.trim() !== "") {
+    query.functionPathPrefix = filters.functionPathPrefix.trim();
+  }
+  if (filters.userId.trim() !== "") {
+    query.userId = filters.userId.trim();
+  }
+  if (filters.tableTouched.trim() !== "") {
+    query.tableTouched = filters.tableTouched.trim();
+  }
+  if (filters.outcome === "ok" || filters.outcome === "error") {
+    query.outcome = filters.outcome;
+  }
+  return query;
+};
+const LOG_LEVELS = ["debug", "info", "warn", "error"];
+const TIME_RANGE_MS = {
+  "5m": 5 * 60 * 1e3,
+  "15m": 15 * 60 * 1e3,
+  "1h": 60 * 60 * 1e3
+};
+const filterLogs = (entries, criteria) => {
+  const needle = criteria.search.trim().toLowerCase();
+  const pathNeedle = criteria.path.trim().toLowerCase();
+  const floor = criteria.range === "all" ? Number.NEGATIVE_INFINITY : criteria.now - TIME_RANGE_MS[criteria.range];
+  return entries.filter((entry) => {
+    if (criteria.levels.size > 0 && !criteria.levels.has(entry.level)) {
+      return false;
+    }
+    if (entry.timestamp < floor) {
+      return false;
+    }
+    if (pathNeedle !== "" && !(entry.functionPath ?? "").toLowerCase().includes(pathNeedle)) {
+      return false;
+    }
+    return needle === "" || entry.message.toLowerCase().includes(needle);
+  });
+};
+const NO_PATH_KEY = "—";
+const summarizeLogs = (entries) => {
+  const levelCounts = /* @__PURE__ */ new Map();
+  const pathCounts = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    levelCounts.set(entry.level, (levelCounts.get(entry.level) ?? 0) + 1);
+    const pathKey = entry.functionPath ?? NO_PATH_KEY;
+    pathCounts.set(pathKey, (pathCounts.get(pathKey) ?? 0) + 1);
+  }
+  const byLevel = LOG_LEVELS.filter((level) => levelCounts.has(level)).map((level) => {
+    return {
+      count: levelCounts.get(level) ?? 0,
+      key: level
+    };
+  });
+  const byPath = [...pathCounts.entries()].map(([key, count]) => {
+    return {
+      count,
+      key
+    };
+  }).toSorted((a, b) => b.count === a.count ? a.key.localeCompare(b.key) : b.count - a.count);
+  return {
+    byLevel,
+    byPath,
+    total: entries.length
+  };
+};
+const LevelToggle = (t0) => {
+  const $ = c(11);
+  const {
+    level,
+    onToggle,
+    selected
+  } = t0;
+  let t1;
+  if ($[0] !== level || $[1] !== onToggle) {
+    t1 = () => {
+      onToggle(level);
+    };
+    $[0] = level;
+    $[1] = onToggle;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onClick = t1;
+  const t2 = selected ? "border-border bg-muted font-medium" : "border-input text-muted-foreground";
+  let t3;
+  if ($[3] !== t2) {
+    t3 = cn("rounded-md border px-2 py-1 text-xs", t2);
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const t4 = `logs-level-${level}`;
+  let t5;
+  if ($[5] !== level || $[6] !== onClick || $[7] !== selected || $[8] !== t3 || $[9] !== t4) {
+    t5 = /* @__PURE__ */ jsxDEV("button", {
+      "aria-pressed": selected,
+      className: t3,
+      "data-testid": t4,
+      onClick,
+      type: "button",
+      children: level
+    }, void 0, false);
+    $[5] = level;
+    $[6] = onClick;
+    $[7] = selected;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+};
+const SummaryBucketRow = (t0) => {
+  const $ = c(7);
+  const {
+    bucket
+  } = t0;
+  let t1;
+  if ($[0] !== bucket.key) {
+    t1 = /* @__PURE__ */ jsxDEV("span", {
+      className: "truncate text-muted-foreground",
+      role: "gridcell",
+      children: bucket.key
+    }, void 0, false);
+    $[0] = bucket.key;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== bucket.count) {
+    t2 = /* @__PURE__ */ jsxDEV("span", {
+      className: "shrink-0 tabular-nums",
+      role: "gridcell",
+      children: bucket.count
+    }, void 0, false);
+    $[2] = bucket.count;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center justify-between gap-4 px-3 py-1 font-mono text-xs",
+      "data-testid": "logs-summary-row",
+      role: "row",
+      children: [t1, t2]
+    }, void 0, true);
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+};
+const LogsPanel = ({
+  initialShardKey
+}) => {
+  const client = useLunora();
+  const t = useT();
+  const [view, setView] = useState("requests");
+  const [shardKey, setShardKey] = useState(initialShardKey ?? "");
+  const [entries, setEntries] = useState([]);
+  const [requests, setRequests] = useState([]);
+  const [error, setError] = useState(null);
+  const [search, setSearch] = useState("");
+  const [levelFilter, setLevelFilter] = useState(() => /* @__PURE__ */ new Set());
+  const [pathFilter, setPathFilter] = useState("");
+  const [timeRange, setTimeRange] = useState("all");
+  const [showSummary, setShowSummary] = useState(false);
+  const [pathPrefix, setPathPrefix] = useState("");
+  const [userIdFilter, setUserIdFilter] = useState("");
+  const [tableFilter, setTableFilter] = useState("");
+  const [outcomeFilter, setOutcomeFilter] = useState("all");
+  const [liveError, setLiveError] = useState(void 0);
+  const requestQuery = buildRequestQuery({
+    functionPathPrefix: pathPrefix,
+    outcome: outcomeFilter,
+    tableTouched: tableFilter,
+    userId: userIdFilter
+  });
+  const refresh = async (shard) => {
+    setError(null);
+    try {
+      if (view === "requests") {
+        const result = await client.query(GET_REQUEST_LOG, requestQuery, callOptions(shard));
+        recordShard(shard);
+        setRequests(entriesOf(result));
+      } else {
+        const result_0 = await client.query(GET_LOGS, {}, callOptions(shard));
+        recordShard(shard);
+        setEntries(entriesOf(result_0));
+      }
+    } catch (error_) {
+      setEntries([]);
+      setRequests([]);
+      setError(errorMessage(error_));
+      throw error_;
+    }
+  };
+  const committedShard = useLiveShardSeed(shardKey, refresh, [view, requestQuery]);
+  useLiveAdmin(ADMIN_FUNCTIONS.getRequestLog, requestQuery, committedShard ?? "", (result_1) => {
+    setError(null);
+    setLiveError(void 0);
+    setRequests(entriesOf(result_1));
+  }, view === "requests" && committedShard !== void 0, setLiveError);
+  useLiveAdmin(ADMIN_FUNCTIONS.getLogs, {}, committedShard ?? "", (result_2) => {
+    setError(null);
+    setLiveError(void 0);
+    setEntries(entriesOf(result_2));
+  }, view === "errors" && committedShard !== void 0, setLiveError);
+  const filtered = filterLogs(entries, {
+    levels: levelFilter,
+    now: Date.now(),
+    path: pathFilter,
+    range: timeRange,
+    search
+  });
+  const summary = summarizeLogs(filtered);
+  const activeCount = view === "requests" ? requests.length : filtered.length;
+  const summaryVisible = view === "errors" && showSummary;
+  const readout = useMemo(() => {
+    if (error !== null) {
+      return "error";
+    }
+    if (activeCount === 0) {
+      return "empty";
+    }
+    return summaryVisible ? "summary" : "list";
+  }, [activeCount, error, summaryVisible]);
+  const scrollRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: activeCount,
+    estimateSize: () => ROW_HEIGHT,
+    getScrollElement: () => scrollRef.current,
+    initialRect: {
+      height: SCROLL_HEIGHT,
+      width: 800
+    },
+    observeElementRect: (instance, callback) => flooredRectObserver(instance, callback, SCROLL_HEIGHT),
+    overscan: 8
+  });
+  const virtualRows = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const gridStyle = {
+    height: totalSize,
+    position: "relative",
+    width: "100%"
+  };
+  const onSearchChange = (event) => {
+    setSearch(event.target.value);
+  };
+  const toggleLevel = (level) => {
+    setLevelFilter((previous) => {
+      const next = new Set(previous);
+      if (next.has(level)) {
+        next.delete(level);
+      } else {
+        next.add(level);
+      }
+      return next;
+    });
+  };
+  const onLogPathChange = (event_0) => {
+    setPathFilter(event_0.target.value);
+  };
+  const onTimeRangeChange = (event_1) => {
+    setTimeRange(event_1.target.value);
+  };
+  const toggleSummary = () => {
+    setShowSummary((previous_0) => !previous_0);
+  };
+  const onPathChange = (event_2) => {
+    setPathPrefix(event_2.target.value);
+  };
+  const onUserChange = (event_3) => {
+    setUserIdFilter(event_3.target.value);
+  };
+  const onTableChange = (event_4) => {
+    setTableFilter(event_4.target.value);
+  };
+  const onOutcomeChange = (event_5) => {
+    setOutcomeFilter(event_5.target.value);
+  };
+  const showRequests = () => {
+    setView("requests");
+    setShowSummary(false);
+  };
+  const showErrors = () => {
+    setView("errors");
+    setShowSummary(false);
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col gap-4",
+    "data-testid": "lunora-logs",
+    children: [/* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: [/* @__PURE__ */ jsxDEV("div", {
+        className: "inline-flex overflow-hidden rounded-lg border border-border",
+        role: "tablist",
+        children: [/* @__PURE__ */ jsxDEV("button", {
+          "aria-selected": view === "requests",
+          className: cn("px-3 py-1 text-sm", view === "requests" ? "bg-muted font-medium" : "text-muted-foreground"),
+          "data-testid": "lg-view-requests",
+          onClick: showRequests,
+          role: "tab",
+          type: "button",
+          children: t("Requests")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
+          "aria-selected": view === "errors",
+          className: cn("px-3 py-1 text-sm", view === "errors" ? "bg-muted font-medium" : "text-muted-foreground"),
+          "data-testid": "lg-view-errors",
+          onClick: showErrors,
+          role: "tab",
+          type: "button",
+          children: t("Errors")
+        }, void 0, false)]
+      }, void 0, true), /* @__PURE__ */ jsxDEV(ShardInput, {
+        onChange: setShardKey,
+        testId: "lg-shard-input",
+        value: shardKey
+      }, void 0, false), /* @__PURE__ */ jsxDEV(LiveError, {
+        message: liveError,
+        prefix: "lg"
+      }, void 0, false), /* @__PURE__ */ jsxDEV("a", {
+        className: "text-sm text-primary underline-offset-4 hover:underline",
+        "data-testid": "lg-cf-link",
+        href: CLOUDFLARE_OBSERVABILITY_URL,
+        rel: "noreferrer",
+        target: "_blank",
+        children: t("Open in Cloudflare")
+      }, void 0, false)]
+    }, void 0, true), view === "errors" && /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: [/* @__PURE__ */ jsxDEV(Input, {
+        "aria-label": t("Search messages"),
+        className: "h-8 w-48",
+        "data-testid": "lg-search",
+        onChange: onSearchChange,
+        placeholder: t("search message"),
+        value: search
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Input, {
+        "aria-label": t("Function path"),
+        className: "h-8 w-40",
+        "data-testid": "logs-path-filter",
+        onChange: onLogPathChange,
+        placeholder: t("filter path"),
+        value: pathFilter
+      }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+        "aria-label": t("Level filter"),
+        className: "inline-flex items-center gap-1",
+        "data-testid": "logs-level-filter",
+        role: "group",
+        children: LOG_LEVELS.map((level_0) => /* @__PURE__ */ jsxDEV(LevelToggle, {
+          level: level_0,
+          onToggle: toggleLevel,
+          selected: levelFilter.has(level_0)
+        }, level_0, false))
+      }, void 0, false), /* @__PURE__ */ jsxDEV("select", {
+        "aria-label": t("Time range"),
+        className: "h-8 rounded-md border border-input bg-transparent px-2 text-sm shadow-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none",
+        "data-testid": "logs-time-range",
+        onChange: onTimeRangeChange,
+        value: timeRange,
+        children: [/* @__PURE__ */ jsxDEV("option", {
+          value: "all",
+          children: t("All time")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("option", {
+          value: "5m",
+          children: t("Last 5m")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("option", {
+          value: "15m",
+          children: t("Last 15m")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("option", {
+          value: "1h",
+          children: t("Last hour")
+        }, void 0, false)]
+      }, void 0, true), /* @__PURE__ */ jsxDEV("button", {
+        "aria-pressed": showSummary,
+        className: cn("h-8 rounded-md border px-3 text-sm", showSummary ? "border-border bg-muted font-medium" : "border-input text-muted-foreground"),
+        "data-testid": "logs-summary-toggle",
+        onClick: toggleSummary,
+        type: "button",
+        children: showSummary ? t("List") : t("Summary")
+      }, void 0, false)]
+    }, void 0, true), view === "requests" && /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: [/* @__PURE__ */ jsxDEV(Input, {
+        "aria-label": t("Function path"),
+        className: "h-8 w-44",
+        "data-testid": "lg-req-path",
+        onChange: onPathChange,
+        placeholder: t("file:function"),
+        value: pathPrefix
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Input, {
+        "aria-label": t("User id"),
+        className: "h-8 w-32",
+        "data-testid": "lg-req-user",
+        onChange: onUserChange,
+        placeholder: t("userId"),
+        value: userIdFilter
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Input, {
+        "aria-label": t("Table touched"),
+        className: "h-8 w-32",
+        "data-testid": "lg-req-table",
+        onChange: onTableChange,
+        placeholder: t("table"),
+        value: tableFilter
+      }, void 0, false), /* @__PURE__ */ jsxDEV("select", {
+        "aria-label": t("Outcome filter"),
+        className: "h-8 rounded-md border border-input bg-transparent px-2 text-sm shadow-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none",
+        "data-testid": "lg-req-outcome",
+        onChange: onOutcomeChange,
+        value: outcomeFilter,
+        children: [/* @__PURE__ */ jsxDEV("option", {
+          value: "all",
+          children: t("all")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("option", {
+          value: "ok",
+          children: t("ok")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("option", {
+          value: "error",
+          children: t("error")
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true), readout === "error" && /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-destructive",
+      "data-testid": "lg-error",
+      role: "alert",
+      children: error
+    }, void 0, false), readout === "empty" && /* @__PURE__ */ jsxDEV(EmptyState, {
+      description: t("Function and request logs for this shard show up here as your app handles traffic."),
+      icon: /* @__PURE__ */ jsxDEV("svg", {
+        "aria-hidden": "true",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.6,
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxDEV("path", {
+          d: "M4 5h16M4 12h16M4 19h10"
+        }, void 0, false)
+      }, void 0, false),
+      testId: "lg-empty",
+      title: t("No logs.")
+    }, void 0, false), readout === "summary" && /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-4 rounded-xl border border-border bg-card p-4 shadow-xs",
+      "data-testid": "logs-summary",
+      children: [/* @__PURE__ */ jsxDEV("p", {
+        className: "text-xs text-muted-foreground",
+        "data-testid": "logs-summary-total",
+        children: t("{count} entries", {
+          count: summary.total
+        })
+      }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+        children: [/* @__PURE__ */ jsxDEV("h4", {
+          className: "mb-1 font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+          children: t("By level")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+          className: "overflow-hidden rounded-lg border border-border",
+          "data-testid": "logs-summary-levels",
+          role: "grid",
+          children: summary.byLevel.map((bucket) => /* @__PURE__ */ jsxDEV(SummaryBucketRow, {
+            bucket
+          }, bucket.key, false))
+        }, void 0, false)]
+      }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+        children: [/* @__PURE__ */ jsxDEV("h4", {
+          className: "mb-1 font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+          children: t("By function")
+        }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+          className: "overflow-hidden rounded-lg border border-border",
+          "data-testid": "logs-summary-paths",
+          role: "grid",
+          children: summary.byPath.map((bucket_0) => /* @__PURE__ */ jsxDEV(SummaryBucketRow, {
+            bucket: bucket_0
+          }, bucket_0.key, false))
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true), readout === "list" && /* @__PURE__ */ jsxDEV("div", {
+      className: "rounded-xl border border-border shadow-xs",
+      "data-testid": "lg-scroll",
+      ref: scrollRef,
+      style: SCROLL_STYLE,
+      children: /* @__PURE__ */ jsxDEV("div", {
+        "aria-label": t("Recent logs"),
+        "data-testid": "lg-table",
+        role: "grid",
+        style: gridStyle,
+        children: virtualRows.map((virtualRow) => view === "requests" ? /* @__PURE__ */ jsxDEV(RequestRow, {
+          entry: requests[virtualRow.index],
+          index: virtualRow.index,
+          measureRef: virtualizer.measureElement,
+          start: virtualRow.start
+        }, virtualRow.key, false) : /* @__PURE__ */ jsxDEV(LogRow, {
+          entry: filtered[virtualRow.index],
+          index: virtualRow.index,
+          measureRef: virtualizer.measureElement,
+          start: virtualRow.start
+        }, virtualRow.key, false))
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
+};
+
+export { LogsPanel, filterLogs, summarizeLogs };