lopata 0.1.4 → 0.3.0

package/README.md

@@ -1,4 +1,4 @@
-# Lopata
+# Lopata 🪏
 
 > **This is a local development tool only.** Lopata is not intended for production use and never will be. Always deploy to Cloudflare Workers for production workloads.
 

package/dist/dashboard/{chunk-jrv1mhg9.css → chunk-paesqsyf.css}

@@ -25,7 +25,6 @@
     --color-emerald-700: oklch(50.8% .118 165.612);
     --color-cyan-400: oklch(78.9% .154 211.53);
     --color-cyan-500: oklch(71.5% .143 215.221);
-    --color-blue-200: oklch(88.2% .059 254.128);
     --color-blue-300: oklch(80.9% .105 251.813);
     --color-blue-400: oklch(70.7% .165 254.624);
     --color-blue-500: oklch(62.3% .214 259.815);
@@ -720,6 +719,10 @@
     max-height: 160px;
   }
 
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
+
   .min-h-\[2rem\] {
     min-height: 2rem;
   }
@@ -812,6 +815,11 @@
     width: 960px;
   }
 
+  .w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .w-full {
     width: 100%;
   }
@@ -1162,6 +1170,16 @@
     border-left-width: 3px;
   }
 
+  .border-amber-500\/20 {
+    border-color: #f99c0033;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-amber-500\/20 {
+      border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
+    }
+  }
+
   .border-amber-500\/30 {
     border-color: #f99c004d;
   }
@@ -1172,10 +1190,6 @@
     }
   }
 
-  .border-blue-200 {
-    border-color: var(--color-blue-200);
-  }
-
   .border-blue-500\/30 {
     border-color: #3080ff4d;
   }
@@ -1562,10 +1576,6 @@
     }
   }
 
-  .bg-white {
-    background-color: var(--color-white);
-  }
-
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
@@ -1751,6 +1761,10 @@
     padding-bottom: calc(var(--spacing) * 5);
   }
 
+  .pl-1 {
+    padding-left: calc(var(--spacing) * 1);
+  }
+
   .text-center {
     text-align: center;
   }
@@ -1892,6 +1906,16 @@
     color: var(--color-amber-400);
   }
 
+  .text-amber-400\/80 {
+    color: #fcbb00cc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-amber-400\/80 {
+      color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
+    }
+  }
+
   .text-amber-500 {
     color: var(--color-amber-500);
   }
@@ -2502,10 +2526,6 @@
     }
   }
 
-  .focus\:border-blue-400:focus {
-    border-color: var(--color-blue-400);
-  }
-
   .focus\:border-border:focus {
     border-color: var(--color-border);
   }
@@ -2523,10 +2543,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .focus\:ring-blue-300:focus {
-    --tw-ring-color: var(--color-blue-300);
-  }
-
   .focus\:ring-border:focus {
     --tw-ring-color: var(--color-border);
   }

package/dist/dashboard/{chunk-5j5em7qa.js → chunk-ymq225fp.js}

@@ -1005,6 +1005,12 @@ function parseHashRoute(hash) {
   const segments = pathname.split("/").filter(Boolean);
   return { segments, query: new URLSearchParams(queryStr) };
 }
+function parseBrowserRoute(segments, baseLen) {
+  const rawTab = segments[baseLen];
+  const tab = rawTab === "schema" || rawTab === "sql" ? rawTab : "data";
+  const table = segments[baseLen + 1] ? decodeURIComponent(segments[baseLen + 1]) : null;
+  return { tab, table };
+}
 function formatBytes(bytes) {
   if (bytes === 0)
     return "0 B";
@@ -2600,7 +2606,7 @@ function TableSidebar({ tables, selected, onSelect }) {
 function DataBrowserTab({ tables, execQuery, onOpenInConsole, history: history2, browserHistory, historyScope, basePath, routeTable, routeQuery }) {
   const [localTable, setLocalTable] = d2(null);
   const [localRestoredState, setLocalRestoredState] = d2(null);
-  const selectedTable = basePath ? routeTable ?? null : localTable;
+  const selectedTable = basePath ? routeTable ?? tables?.[0]?.name ?? null : localTable;
   y2(() => {
     if (!selectedTable && tables?.length) {
       if (basePath) {
@@ -2824,12 +2830,15 @@ function SchemaBrowserTab({ tables }) {
 }
 
 // src/dashboard/sql-browser/sql-console-tab.tsx
-function SqlConsoleTab({ execQuery, initialSql, history: history2 }) {
+function SqlConsoleTab({ execQuery, generateSql, initialSql, history: history2 }) {
   const [sql, setSql] = d2(initialSql ?? "");
   const [result, setResult] = d2(null);
   const [error, setError] = d2(null);
   const [loading, setLoading] = d2(false);
   const [showHistory, setShowHistory] = d2(false);
+  const [aiPrompt, setAiPrompt] = d2("");
+  const [aiLoading, setAiLoading] = d2(false);
+  const [aiError, setAiError] = d2(null);
   y2(() => {
     if (initialSql)
       setSql(initialSql);
@@ -2853,11 +2862,56 @@ function SqlConsoleTab({ execQuery, initialSql, history: history2 }) {
       setLoading(false);
     }
   };
+  const generate = async () => {
+    if (!generateSql || !aiPrompt.trim() || aiLoading)
+      return;
+    setAiLoading(true);
+    setAiError(null);
+    try {
+      const result2 = await generateSql(aiPrompt);
+      setSql(result2);
+    } catch (e3) {
+      setAiError(e3.message ?? String(e3));
+    } finally {
+      setAiLoading(false);
+    }
+  };
   return /* @__PURE__ */ u3(k, {
     children: [
       /* @__PURE__ */ u3("div", {
         class: "bg-panel rounded-lg border border-border p-5 mb-6",
         children: [
+          generateSql && /* @__PURE__ */ u3("div", {
+            class: "mb-4",
+            children: [
+              /* @__PURE__ */ u3("div", {
+                class: "flex gap-2",
+                children: [
+                  /* @__PURE__ */ u3("input", {
+                    type: "text",
+                    value: aiPrompt,
+                    onInput: (e3) => setAiPrompt(e3.target.value),
+                    onKeyDown: (e3) => {
+                      if (e3.key === "Enter")
+                        generate();
+                    },
+                    placeholder: "Describe query in natural language...",
+                    class: "flex-1 bg-panel-secondary border border-border rounded-lg px-4 py-2 text-sm outline-none focus:border-border focus:ring-1 focus:ring-border transition-all"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ u3("button", {
+                    onClick: generate,
+                    disabled: aiLoading || !aiPrompt.trim(),
+                    class: "rounded-md px-4 py-2 text-sm font-medium bg-panel border border-border text-text-secondary hover:bg-panel-hover disabled:opacity-40 disabled:cursor-not-allowed transition-all",
+                    children: aiLoading ? "Generating..." : "Generate SQL"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              aiError && /* @__PURE__ */ u3("div", {
+                class: "text-red-500 text-xs mt-1",
+                children: aiError
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
           /* @__PURE__ */ u3("textarea", {
             value: sql,
             onInput: (e3) => setSql(e3.target.value),
@@ -2960,7 +3014,7 @@ function ResultTable({ columns, rows }) {
 }
 
 // src/dashboard/sql-browser/sql-browser.tsx
-function SqlBrowser({ tables, execQuery, historyScope, basePath, routeTab, routeTable, routeQuery }) {
+function SqlBrowser({ tables, execQuery, generateSql, historyScope, basePath, routeTab, routeTable, routeQuery }) {
   const [localTab, setLocalTab] = d2("data");
   const tab = basePath ? routeTab ?? "data" : localTab;
   const [consoleSql, setConsoleSql] = d2("");
@@ -3005,6 +3059,7 @@ function SqlBrowser({ tables, execQuery, historyScope, basePath, routeTab, route
       }, undefined, false, undefined, this),
       tab === "sql" && /* @__PURE__ */ u3(SqlConsoleTab, {
         execQuery,
+        generateSql,
         initialSql: consoleSql,
         history: history2
       }, undefined, false, undefined, this)
@@ -4274,15 +4329,13 @@ function D1View({ route }) {
   if (segments.length <= 1)
     return /* @__PURE__ */ u3(D1DatabaseList, {}, undefined, false, undefined, this);
   const dbName = decodeURIComponent(segments[1]);
-  const rawTab = segments[2];
-  const tab = rawTab === "schema" || rawTab === "sql" ? rawTab : "data";
-  const tableName = segments[3] ? decodeURIComponent(segments[3]) : null;
+  const { tab, table } = parseBrowserRoute(segments, 2);
   const basePath = `/d1/${encodeURIComponent(dbName)}`;
   return /* @__PURE__ */ u3(D1DatabaseDetail, {
     dbName,
     basePath,
     routeTab: tab,
-    routeTable: tableName,
+    routeTable: table,
     routeQuery: query
   }, undefined, false, undefined, this);
 }
@@ -4349,6 +4402,10 @@ function D1DatabaseDetail({ dbName, basePath, routeTab, routeTable, routeQuery }
       /* @__PURE__ */ u3(SqlBrowser, {
         tables,
         execQuery: (sql) => rpc("d1.query", { dbName, sql }),
+        generateSql: async (prompt2) => {
+          const res = await rpc("d1.generateSql", { dbName, prompt: prompt2 });
+          return res.sql;
+        },
         historyScope: `d1:${dbName}`,
         basePath,
         routeTab,
@@ -4371,16 +4428,14 @@ function DoView({ route }) {
   if (segments.length >= 3) {
     const ns = decodeURIComponent(segments[1]);
     const id = decodeURIComponent(segments[2]);
-    const rawTab = segments[3];
-    const tab = rawTab === "schema" || rawTab === "sql" ? rawTab : "data";
-    const tableName = segments[4] ? decodeURIComponent(segments[4]) : null;
+    const { tab, table } = parseBrowserRoute(segments, 3);
     const basePath = `/do/${encodeURIComponent(ns)}/${encodeURIComponent(id)}`;
     return /* @__PURE__ */ u3(DoInstanceDetail, {
       ns,
       id,
       basePath,
       routeTab: tab,
-      routeTable: tableName,
+      routeTable: table,
       routeQuery: query
     }, undefined, false, undefined, this);
   }
@@ -4552,6 +4607,10 @@ function DoInstanceDetail({ ns, id, basePath, routeTab, routeTable, routeQuery }
         children: /* @__PURE__ */ u3(SqlBrowser, {
           tables: sqlTables,
           execQuery: (sql) => rpc("do.sqlQuery", { ns, id, sql }),
+          generateSql: async (prompt2) => {
+            const res = await rpc("do.generateSql", { ns, id, prompt: prompt2 });
+            return res.sql;
+          },
           historyScope: `do:${ns}:${id}`,
           basePath,
           routeTab,
@@ -4954,7 +5013,10 @@ function TraceWaterfall({ spans, events, highlightSpanId, onAddAttributeFilter }
       childMap.set(key, []);
     childMap.get(key).push(s3);
   }
-  const getAutoExpanded = () => {
+  const spanIdKey = spans.map((s3) => s3.spanId).join(",");
+  y2(() => {
+    if (spans.length === 0)
+      return;
     const autoCollapsed = new Set;
     function walk(parentId, depth) {
       const children = childMap.get(parentId) ?? [];
@@ -4971,14 +5033,9 @@ function TraceWaterfall({ spans, events, highlightSpanId, onAddAttributeFilter }
       }
     }
     walk(null, 0);
-    return autoCollapsed;
-  };
-  y2(() => {
-    if (spans.length > 0) {
-      setCollapsedSpans(getAutoExpanded());
-      setExpandedSpan(null);
-    }
-  }, [spans, getAutoExpanded]);
+    setCollapsedSpans(autoCollapsed);
+    setExpandedSpan(null);
+  }, [spanIdKey]);
   const toggleCollapse = (spanId) => {
     setCollapsedSpans((prev) => {
       const next = new Set(prev);
@@ -5064,37 +5121,34 @@ function TraceWaterfall({ spans, events, highlightSpanId, onAddAttributeFilter }
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ u3("div", {
-                    class: "flex-1 h-6 relative bg-panel-secondary rounded",
-                    children: [
-                      /* @__PURE__ */ u3("div", {
-                        class: `absolute top-0.5 bottom-0.5 rounded flex items-center overflow-hidden ${span.status !== "error" && span.status !== "ok" ? "animate-pulse" : ""}`,
-                        style: {
-                          left: `${offset}%`,
-                          width: `${Math.max(width, 0.5)}%`,
-                          background: span.status === "error" ? "var(--color-span-error)" : span.status === "ok" ? "var(--color-span-ok)" : "#d1d5db"
-                        },
-                        children: [
-                          keyAttrs.length > 0 && /* @__PURE__ */ u3("span", {
-                            class: "text-[9px] text-white px-1 truncate whitespace-nowrap",
-                            children: keyAttrs.map(([k3, v3]) => `${k3}=${String(v3)}`).join(" ")
-                          }, undefined, false, undefined, this),
-                          spanEvents.map((ev) => {
-                            const evOffset = (ev.timestamp - span.startTime) / ((span.endTime ?? Date.now()) - span.startTime || 1) * 100;
-                            return /* @__PURE__ */ u3("div", {
-                              class: `absolute top-0 w-1.5 h-full rounded-full ${ev.name === "exception" ? "bg-red-600" : "bg-panel-secondary0"}`,
-                              style: { left: `${Math.min(evOffset, 100)}%` },
-                              title: ev.message ?? ev.name
-                            }, ev.id, false, undefined, this);
-                          })
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ u3("span", {
-                        class: "absolute top-0.5 text-[10px] text-text-secondary whitespace-nowrap",
-                        style: { left: `${offset + width + 1}%` },
-                        children: span.durationMs !== null ? formatDuration(span.durationMs) : "..."
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
+                    class: "flex-1 h-6 relative bg-panel-secondary rounded overflow-hidden",
+                    children: /* @__PURE__ */ u3("div", {
+                      class: `absolute top-0.5 bottom-0.5 rounded flex items-center overflow-hidden ${span.status !== "error" && span.status !== "ok" ? "animate-pulse" : ""}`,
+                      style: {
+                        left: `${offset}%`,
+                        width: `${Math.max(width, 0.5)}%`,
+                        background: span.status === "error" ? "var(--color-span-error)" : span.status === "ok" ? "var(--color-span-ok)" : "#d1d5db"
+                      },
+                      children: [
+                        keyAttrs.length > 0 && /* @__PURE__ */ u3("span", {
+                          class: "text-[9px] text-white px-1 truncate whitespace-nowrap",
+                          children: keyAttrs.map(([k3, v3]) => `${k3}=${String(v3)}`).join(" ")
+                        }, undefined, false, undefined, this),
+                        spanEvents.map((ev) => {
+                          const evOffset = (ev.timestamp - span.startTime) / ((span.endTime ?? Date.now()) - span.startTime || 1) * 100;
+                          return /* @__PURE__ */ u3("div", {
+                            class: `absolute top-0 w-1.5 h-full rounded-full ${ev.name === "exception" ? "bg-red-600" : "bg-panel-secondary0"}`,
+                            style: { left: `${Math.min(evOffset, 100)}%` },
+                            title: ev.message ?? ev.name
+                          }, ev.id, false, undefined, this);
+                        })
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ u3("span", {
+                    class: "text-[10px] text-text-secondary whitespace-nowrap w-14 text-right flex-shrink-0 pl-1",
+                    children: span.durationMs !== null ? formatDuration(span.durationMs) : "..."
+                  }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
               isExpanded && /* @__PURE__ */ u3("div", {
@@ -6219,6 +6273,50 @@ function Section2({ title, children }) {
     ]
   }, undefined, true, undefined, this);
 }
+function OptionalDepsCard() {
+  const { data: deps } = useQuery("warnings.optionalDeps");
+  if (!deps)
+    return null;
+  const missing = deps.filter((d3) => !d3.installed);
+  if (!missing.length)
+    return null;
+  return /* @__PURE__ */ u3("div", {
+    class: "bg-panel rounded-lg border border-amber-500/20 p-5",
+    children: [
+      /* @__PURE__ */ u3("div", {
+        class: "text-xs font-semibold uppercase tracking-wider text-amber-400 mb-3",
+        children: "Optional packages"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u3("div", {
+        class: "flex flex-col gap-2",
+        children: deps.map((dep) => /* @__PURE__ */ u3("div", {
+          children: [
+            /* @__PURE__ */ u3("div", {
+              class: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ u3("span", {
+                  class: `text-xs ${dep.installed ? "text-emerald-400" : "text-amber-400"}`,
+                  children: dep.installed ? "✓" : "✗"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u3("span", {
+                  class: `text-xs ${dep.installed ? "text-text-muted" : "text-text-secondary"}`,
+                  children: dep.description
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            !dep.installed && /* @__PURE__ */ u3("code", {
+              class: "block ml-5 mt-0.5 text-[10px] text-amber-400/80 bg-amber-500/10 px-1.5 py-0.5 rounded w-fit",
+              children: [
+                dep.install,
+                " --dev"
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, dep.id, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 function HomeView() {
   const { data } = useQuery("overview.get");
   const { data: workers } = useQuery("workers.list");
@@ -6402,6 +6500,7 @@ function HomeView() {
           /* @__PURE__ */ u3("div", {
             class: "flex flex-col gap-5",
             children: [
+              /* @__PURE__ */ u3(OptionalDepsCard, {}, undefined, false, undefined, this),
               /* @__PURE__ */ u3("div", {
                 class: "bg-panel rounded-lg border border-border p-5",
                 children: [
@@ -7724,7 +7823,7 @@ function TracesView() {
             }, i3, true, undefined, this))
           }, undefined, false, undefined, this),
           /* @__PURE__ */ u3("div", {
-            class: "flex-1 overflow-y-auto scrollbar-thin",
+            class: "flex-1 overflow-y-auto scrollbar-thin min-h-0",
             children: isSearching ? /* @__PURE__ */ u3("div", {
               class: "text-text-muted font-medium text-center py-12",
               children: "Searching..."
@@ -8463,52 +8562,45 @@ function CreateWorkflowForm({ name, onCreated }) {
       setError(create.error.message);
     }
   };
-  if (!open) {
-    return /* @__PURE__ */ u3("button", {
-      onClick: () => setOpen(true),
-      class: "rounded-md px-3 py-1.5 text-sm font-medium bg-ink text-surface hover:opacity-80 transition-all",
-      children: "Create instance"
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ u3("div", {
-    class: "bg-panel border border-border rounded-lg p-4 mb-6",
+  const handleClose = () => {
+    setOpen(false);
+    setError("");
+  };
+  return /* @__PURE__ */ u3(k, {
     children: [
-      /* @__PURE__ */ u3("div", {
-        class: "flex items-center justify-between mb-3",
-        children: [
-          /* @__PURE__ */ u3("div", {
-            class: "text-sm font-semibold text-ink",
-            children: "Create workflow instance"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ u3("button", {
-            onClick: () => {
-              setOpen(false);
-              setError("");
-            },
-            class: "text-text-muted hover:text-text-data text-xs font-medium",
-            children: "Cancel"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ u3("textarea", {
-        value: params,
-        onInput: (e3) => setParams(e3.target.value),
-        placeholder: '{"key": "value"}',
-        class: "w-full bg-panel-secondary border border-border rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-border focus:ring-1 focus:ring-border transition-all resize-y min-h-[80px]",
-        rows: 3
-      }, undefined, false, undefined, this),
-      error && /* @__PURE__ */ u3("div", {
-        class: "text-red-500 text-xs mt-1",
-        children: error
+      /* @__PURE__ */ u3("button", {
+        onClick: () => setOpen(true),
+        class: "rounded-md px-3 py-1.5 text-sm font-medium bg-ink text-surface hover:opacity-80 transition-all",
+        children: "Create instance"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ u3("div", {
-        class: "flex justify-end mt-3",
-        children: /* @__PURE__ */ u3("button", {
-          onClick: handleSubmit,
-          disabled: create.isLoading || !params.trim(),
-          class: "rounded-md px-4 py-1.5 text-sm font-medium bg-ink text-surface hover:opacity-80 transition-all disabled:opacity-50 disabled:cursor-not-allowed",
-          children: create.isLoading ? "Creating..." : "Create"
-        }, undefined, false, undefined, this)
+      open && /* @__PURE__ */ u3(Modal, {
+        title: "Create workflow instance",
+        onClose: handleClose,
+        children: /* @__PURE__ */ u3("div", {
+          class: "p-5",
+          children: [
+            /* @__PURE__ */ u3("textarea", {
+              value: params,
+              onInput: (e3) => setParams(e3.target.value),
+              placeholder: '{"key": "value"}',
+              class: "w-full bg-panel-secondary border border-border rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-border focus:ring-1 focus:ring-border transition-all resize-y min-h-[80px]",
+              rows: 3
+            }, undefined, false, undefined, this),
+            error && /* @__PURE__ */ u3("div", {
+              class: "text-red-500 text-xs mt-1",
+              children: error
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ u3("div", {
+              class: "flex justify-end mt-3",
+              children: /* @__PURE__ */ u3("button", {
+                onClick: handleSubmit,
+                disabled: create.isLoading || !params.trim(),
+                class: "rounded-md px-4 py-1.5 text-sm font-medium bg-ink text-surface hover:opacity-80 transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+                children: create.isLoading ? "Creating..." : "Create"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
@@ -8815,13 +8907,13 @@ function SendEventForm({ name, id, waitingForEvents, refetch }) {
                 value: eventType,
                 onInput: (e3) => setEventType(e3.target.value),
                 placeholder: "Event type",
-                class: "w-full bg-white border border-blue-200 rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-300 transition-all mb-2"
+                class: "w-full bg-panel-secondary border border-border rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-border focus:ring-1 focus:ring-border transition-all mb-2"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ u3("textarea", {
                 value: payload,
                 onInput: (e3) => setPayload(e3.target.value),
                 placeholder: '{"key": "value"}',
-                class: "w-full bg-white border border-blue-200 rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-300 transition-all resize-y min-h-[60px]",
+                class: "w-full bg-panel-secondary border border-border rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-border focus:ring-1 focus:ring-border transition-all resize-y min-h-[60px]",
                 rows: 2
               }, undefined, false, undefined, this),
               error && /* @__PURE__ */ u3("div", {

package/dist/dashboard/index.html

@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
   
-<link rel="stylesheet" crossorigin href="/__dashboard/assets/chunk-jrv1mhg9.css"><script type="module" crossorigin src="/__dashboard/assets/chunk-5j5em7qa.js"></script></head>
+<link rel="stylesheet" crossorigin href="/__dashboard/assets/chunk-paesqsyf.css"><script type="module" crossorigin src="/__dashboard/assets/chunk-ymq225fp.js"></script></head>
 <body class="h-full bg-surface text-ink" style="font-family: system-ui, -apple-system, sans-serif;">
   <script>
     // Apply saved theme before first paint to prevent flash

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lopata",
-	"version": "0.1.4",
+	"version": "0.3.0",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
@@ -32,25 +32,21 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.13",
+		"@cloudflare/sandbox": "^0.7.4",
 		"@types/bun": "latest",
-		"dprint": "^0.51.1",
 		"bun-plugin-tailwind": "^0.1.2",
-		"vite": "^7.3.1",
-		"wrangler": "^4.65.0"
-	},
-	"peerDependencies": {
-		"typescript": "^5"
-	},
-	"optionalDependencies": {
-		"puppeteer": "*",
-		"puppeteer-core": "*"
-	},
-	"dependencies": {
-		"@cloudflare/sandbox": "^0.7.4",
+		"dprint": "^0.51.1",
 		"html-rewriter-wasm": "^0.4.1",
 		"preact": "^10.28.3",
+		"puppeteer": "*",
+		"puppeteer-core": "*",
 		"sharp": "^0.34.5",
-		"smol-toml": "^1.6.0",
-		"tailwindcss": "^4.1.18"
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5",
+		"vite": "^7.3.1",
+		"wrangler": "^4.67.0"
+	},
+	"dependencies": {
+		"smol-toml": "^1.6.0"
 	}
 }

package/src/api/dispatch.ts

@@ -15,6 +15,7 @@ import { handlers as queue } from './handlers/queue'
 import { handlers as r2 } from './handlers/r2'
 import { handlers as scheduled } from './handlers/scheduled'
 import { handlers as traces } from './handlers/traces'
+import { handlers as warnings } from './handlers/warnings'
 import { handlers as workers } from './handlers/workers'
 import { handlers as workflows } from './handlers/workflows'
 import type { HandlerContext } from './types'
@@ -38,6 +39,7 @@ const allHandlers = {
 	...email,
 	...ai,
 	...analyticsEngine,
+	...warnings,
 }
 
 export type Procedures = {