lopata 0.0.1

package/runtime/dashboard/rpc/types.ts

@@ -0,0 +1,396 @@
+// ─── Shared data types ───────────────────────────────────────────────
+
+export type { GenerationInfo } from "../../generation";
+import type { GenerationInfo } from "../../generation";
+
+export interface Paginated<T> {
+  items: T[];
+  cursor: string | null;
+}
+
+export interface OkResponse {
+  ok: true;
+}
+
+// Overview
+export interface OverviewData {
+  kv: number;
+  r2: number;
+  queue: number;
+  do: number;
+  workflows: number;
+  d1: number;
+  containers: number;
+  cache: number;
+  errors: number;
+  scheduled: number;
+  email: number;
+  ai: number;
+  analyticsEngine: number;
+  generations: GenerationInfo[];
+  runtime: {
+    bunVersion: string;
+    platform: string;
+    arch: string;
+    pid: number;
+    cwd: string;
+    uptime: number;
+    startedAt: number;
+    memory: {
+      rss: number;
+      heapUsed: number;
+      heapTotal: number;
+      external: number;
+    };
+    cpuUsage: {
+      user: number;
+      system: number;
+    };
+    env: Record<string, string>;
+  };
+  workerErrors: Record<string, number>;
+}
+
+// Containers
+export interface ContainerSummary {
+  className: string;
+  image: string;
+  maxInstances: number | null;
+  bindingName: string;
+  instanceCount: number;
+  runningCount: number;
+}
+
+export interface ContainerInstance {
+  id: string;
+  doName: string | null;
+  containerName: string;
+  state: string;
+  ports: Record<string, string>;
+}
+
+export interface ContainerDetail {
+  id: string;
+  doName: string | null;
+  containerName: string;
+  image: string;
+  state: string;
+  exitCode: number | null;
+  ports: Record<string, string>;
+  created: string | null;
+  config: {
+    defaultPort: number;
+    sleepAfter: string | number | null;
+    enableInternet: boolean;
+    pingEndpoint: string;
+  };
+}
+
+// KV
+export interface KvNamespace {
+  namespace: string;
+  count: number;
+}
+
+export interface KvKey {
+  key: string;
+  size: number;
+  metadata: string | null;
+  expiration: number | null;
+}
+
+export interface KvValue {
+  key: string;
+  value: string;
+  metadata: unknown;
+  expiration: number | null;
+}
+
+// R2
+export interface R2Bucket {
+  bucket: string;
+  count: number;
+  total_size: number;
+}
+
+export interface R2Object {
+  key: string;
+  size: number;
+  etag: string;
+  uploaded: string;
+  http_metadata: string | null;
+  custom_metadata: string | null;
+}
+
+// Queue
+export interface QueueInfo {
+  queue: string;
+  pending: number;
+  acked: number;
+  failed: number;
+}
+
+export interface QueueMessage {
+  id: string;
+  body: string;
+  content_type: string;
+  status: string;
+  attempts: number;
+  visible_at: number;
+  created_at: number;
+  completed_at: number | null;
+}
+
+// Durable Objects
+export interface DoNamespace {
+  namespace: string;
+  count: number;
+}
+
+export interface DoInstance {
+  id: string;
+  name?: string | null;
+  key_count: number;
+  alarm: number | null;
+}
+
+export interface DoDetail {
+  entries: { key: string; value: string }[];
+  alarm: number | null;
+  hasAlarmHandler: boolean;
+}
+
+// Workflows
+export interface WorkflowSummary {
+  name: string;
+  total: number;
+  byStatus: Record<string, number>;
+}
+
+export interface WorkflowInstance {
+  id: string;
+  status: string;
+  params: string | null;
+  output: string | null;
+  error: string | null;
+  created_at: number;
+  updated_at: number;
+}
+
+export interface WorkflowStepAttempt {
+  step_name: string;
+  failed_attempts: number;
+  last_error: string | null;
+  last_error_name: string | null;
+  last_error_id: string | null;
+  updated_at: number | null;
+}
+
+export interface WorkflowDetail extends WorkflowInstance {
+  steps: { step_name: string; output: string | null; completed_at: number }[];
+  stepAttempts: WorkflowStepAttempt[];
+  events: { id: number; event_type: string; payload: string | null; created_at: number }[];
+  activeSleep: { stepName: string; until: number } | null;
+  waitingForEvents: string[];
+}
+
+// D1
+export interface D1Database {
+  name: string;
+  tables: number;
+}
+
+export interface D1Table {
+  name: string;
+  sql: string;
+  rows: number;
+}
+
+export interface QueryResult {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  count: number;
+  message?: string;
+  error?: string;
+}
+
+// Cache
+export interface CacheName {
+  cache_name: string;
+  count: number;
+}
+
+export interface CacheEntry {
+  url: string;
+  status: number;
+  headers: string;
+  expires_at: number | null;
+}
+
+// Generations
+export interface WorkerGenerations {
+  workerName: string;
+  generations: GenerationInfo[];
+  gracePeriodMs: number;
+}
+
+export interface GenerationsData {
+  generations: GenerationInfo[];
+  gracePeriodMs: number;
+  workers?: WorkerGenerations[];
+}
+
+// Workers
+export interface WorkerBinding {
+  type: string;
+  name: string;
+  target: string;
+  href: string | null;
+}
+
+export interface WorkerInfo {
+  name: string;
+  isMain: boolean;
+  bindings: WorkerBinding[];
+}
+
+// Errors
+export interface ErrorSummary {
+  id: string;
+  timestamp: number;
+  errorName: string;
+  errorMessage: string;
+  requestMethod: string | null;
+  requestUrl: string | null;
+  workerName: string | null;
+  traceId: string | null;
+  spanId: string | null;
+  source: string | null;
+}
+
+export interface ErrorDetail {
+  id: string;
+  timestamp: number;
+  traceId: string | null;
+  spanId: string | null;
+  source: string | null;
+  data: {
+    error: {
+      name: string;
+      message: string;
+      stack: string;
+      frames: Array<{
+        file: string;
+        line: number;
+        column: number;
+        function: string;
+        source?: string[];
+        sourceLine?: number;
+      }>;
+    };
+    request: {
+      method: string;
+      url: string;
+      headers: Record<string, string>;
+    };
+    env: Record<string, string>;
+    bindings: Array<{ name: string; type: string }>;
+    runtime: {
+      bunVersion: string;
+      platform: string;
+      arch: string;
+      workerName?: string;
+      configName?: string;
+    };
+  };
+}
+
+export interface TraceErrorSummary {
+  id: string;
+  timestamp: number;
+  errorName: string;
+  errorMessage: string;
+  source: string | null;
+}
+
+// AI
+export interface AiRequest {
+  id: string;
+  model: string;
+  input_summary: string | null;
+  output_summary: string | null;
+  duration_ms: number;
+  status: string;
+  error: string | null;
+  is_streaming: number;
+  created_at: number;
+}
+
+// Analytics Engine
+export interface AnalyticsEngineDataPoint {
+	id: string;
+	dataset: string;
+	timestamp: number;
+	_sample_interval: number;
+	index1: string | null;
+	blob1: string | null;
+	blob2: string | null;
+	blob3: string | null;
+	blob4: string | null;
+	blob5: string | null;
+	double1: number | null;
+	double2: number | null;
+	double3: number | null;
+	double4: number | null;
+	double5: number | null;
+}
+
+// Email
+export interface EmailRecord {
+  id: string;
+  binding: string;
+  from_addr: string;
+  to_addr: string;
+  raw_size: number;
+  status: string;
+  reject_reason: string | null;
+  created_at: number;
+}
+
+// Traces (re-export from tracing module)
+export type { TraceSummary, TraceDetail, SpanData, SpanEventData, TraceEvent } from "../../tracing/types";
+
+// ─── Handler context ─────────────────────────────────────────────────
+
+import type { WranglerConfig } from "../../config";
+import type { GenerationManager } from "../../generation-manager";
+import type { WorkerRegistry } from "../../worker-registry";
+
+export interface HandlerContext {
+  config: WranglerConfig | null;
+  manager: GenerationManager | null;
+  registry: WorkerRegistry | null;
+}
+
+/** Collect configs from all workers (registry) or fall back to single config. */
+export function getAllConfigs(ctx: HandlerContext): WranglerConfig[] {
+  if (ctx.registry) {
+    return Array.from(ctx.registry.listManagers().values()).map(m => m.config);
+  }
+  return ctx.config ? [ctx.config] : [];
+}
+
+/** Find a DO namespace by class name across all active generations. */
+export function getDoNamespace(ctx: HandlerContext, ns: string) {
+  if (ctx.registry) {
+    for (const manager of ctx.registry.listManagers().values()) {
+      const entry = manager.active?.registry.durableObjects.find(d => d.className === ns);
+      if (entry) return entry.namespace;
+    }
+  }
+  if (ctx.manager) {
+    const entry = ctx.manager.active?.registry.durableObjects.find(d => d.className === ns);
+    if (entry) return entry.namespace;
+  }
+  return null;
+}

package/runtime/dashboard/sql-browser/data-browser-tab.tsx

@@ -0,0 +1,122 @@
+import { useState, useEffect } from "preact/hooks";
+import type { D1Table, QueryResult } from "../rpc/types";
+import { navigate, replaceRoute } from "../lib";
+import type { SortDir, BrowserHistoryEntry } from "./types";
+import type { useHistory, useBrowserHistory } from "./hooks";
+import { TableDataView } from "./table-data-view";
+import { TableSidebar } from "./table-sidebar";
+
+export function DataBrowserTab({ tables, execQuery, onOpenInConsole, history, browserHistory, historyScope, basePath, routeTable, routeQuery }: {
+  tables?: D1Table[] | null;
+  execQuery: (sql: string) => Promise<QueryResult>;
+  onOpenInConsole: (sql: string) => void;
+  history: ReturnType<typeof useHistory>;
+  browserHistory: ReturnType<typeof useBrowserHistory>;
+  historyScope?: string;
+  basePath?: string;
+  routeTable?: string | null;
+  routeQuery?: URLSearchParams;
+}) {
+  // Table selection: URL-driven when basePath is set, local state otherwise
+  const [localTable, setLocalTable] = useState<string | null>(null);
+  const [localRestoredState, setLocalRestoredState] = useState<{ filters: Record<string, string>; sortCol: string | null; sortDir: SortDir } | null>(null);
+  const selectedTable = basePath ? (routeTable ?? null) : localTable;
+
+  // Auto-select first table
+  useEffect(() => {
+    if (!selectedTable && tables?.length) {
+      if (basePath) {
+        replaceRoute(basePath + "/data/" + encodeURIComponent(tables[0]!.name));
+      } else {
+        setLocalTable(tables[0]!.name);
+      }
+    }
+  }, [tables, selectedTable, basePath]);
+
+  const tableInfo = tables?.find(t => t.name === selectedTable) ?? null;
+
+  const handleRestoreHistory = (entry: BrowserHistoryEntry) => {
+    if (basePath) {
+      const params = new URLSearchParams();
+      for (const [col, val] of Object.entries(entry.filters)) {
+        if (val.trim()) params.set("f." + col, val);
+      }
+      if (entry.sortCol) {
+        params.set("s", entry.sortCol);
+        params.set("d", entry.sortDir);
+      }
+      const qs = params.toString();
+      navigate(basePath + "/data/" + encodeURIComponent(entry.table) + (qs ? "?" + qs : ""));
+    } else {
+      setLocalTable(entry.table);
+      setLocalRestoredState({ filters: entry.filters, sortCol: entry.sortCol, sortDir: entry.sortDir });
+    }
+  };
+
+  const handleNavigateFK = (targetTable: string, targetColumn: string, value: unknown) => {
+    if (!tables?.some(t => t.name === targetTable)) return;
+    if (basePath) {
+      const params = new URLSearchParams();
+      params.set("f." + targetColumn, `=${String(value)}`);
+      navigate(basePath + "/data/" + encodeURIComponent(targetTable) + "?" + params.toString());
+    } else {
+      setLocalTable(targetTable);
+      setLocalRestoredState({ filters: { [targetColumn]: `=${String(value)}` }, sortCol: null, sortDir: "ASC" });
+    }
+  };
+
+  const handleTableSelect = (name: string) => {
+    if (basePath) {
+      navigate(basePath + "/data/" + encodeURIComponent(name));
+    } else {
+      setLocalTable(name);
+      setLocalRestoredState(null);
+    }
+  };
+
+  // Build effective query: from URL route or from local restored state
+  const effectiveQuery = (() => {
+    if (basePath) return routeQuery;
+    if (!localRestoredState) return undefined;
+    const params = new URLSearchParams();
+    for (const [col, val] of Object.entries(localRestoredState.filters)) {
+      if (val.trim()) params.set("f." + col, val);
+    }
+    if (localRestoredState.sortCol) {
+      params.set("s", localRestoredState.sortCol);
+      params.set("d", localRestoredState.sortDir);
+    }
+    return params;
+  })();
+
+  return (
+    <div class="flex gap-5">
+      <TableSidebar
+        tables={tables}
+        selected={selectedTable}
+        onSelect={handleTableSelect}
+      />
+      <div class="flex-1 min-w-0">
+        {tableInfo ? (
+          <TableDataView
+            key={tableInfo.name + "?" + (effectiveQuery?.toString() ?? "")}
+            table={tableInfo}
+            execQuery={execQuery}
+            onOpenInConsole={onOpenInConsole}
+            history={history}
+            browserHistory={browserHistory}
+            onRestoreHistory={handleRestoreHistory}
+            onNavigateFK={handleNavigateFK}
+            historyScope={historyScope}
+            basePath={basePath}
+            routeQuery={effectiveQuery}
+          />
+        ) : (
+          <div class="text-center py-16 text-text-muted text-sm font-medium">
+            {tables?.length ? "Select a table" : "No tables found"}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/runtime/dashboard/sql-browser/editable-cell.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect, useRef } from "preact/hooks";
+import type { ForeignKeyInfo } from "./types";
+
+export function EditableCell({ value, onSave, foreignKey, onNavigateFK, onInspect, alignRight }: {
+  value: unknown;
+  onSave: (v: unknown) => void;
+  foreignKey?: ForeignKeyInfo | null;
+  onNavigateFK?: (fk: ForeignKeyInfo) => void;
+  onInspect?: () => void;
+  alignRight?: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const [isNull, setIsNull] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const isLong = value !== null && value !== undefined && String(value).length > 80;
+
+  const startEdit = () => {
+    setIsNull(value === null);
+    setEditValue(value === null ? "" : String(value));
+    setEditing(true);
+  };
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+
+  const save = () => {
+    const newValue = isNull ? null : editValue;
+    setEditing(false);
+    // Only save if value actually changed
+    if (newValue !== (value === null ? null : String(value))) {
+      onSave(newValue);
+    }
+  };
+
+  const cancel = () => {
+    setEditing(false);
+  };
+
+  if (editing) {
+    return (
+      <div class="flex items-center gap-1 py-1">
+        <input
+          ref={inputRef}
+          type="text"
+          value={isNull ? "" : editValue}
+          disabled={isNull}
+          onInput={e => setEditValue((e.target as HTMLInputElement).value)}
+          onKeyDown={e => {
+            if (e.key === "Enter") save();
+            else if (e.key === "Escape") cancel();
+          }}
+          class={`w-full bg-panel-secondary border border-border rounded px-2 py-1 font-mono text-xs outline-none focus:border-ink focus:ring-1 focus:ring-border ${isNull ? "opacity-40" : ""}`}
+        />
+        <button
+          onClick={() => { setIsNull(!isNull); if (!isNull) setEditValue(""); }}
+          title={isNull ? "Set to value" : "Set to NULL"}
+          class={`flex-shrink-0 rounded px-1.5 py-1 text-xs font-bold transition-colors ${
+            isNull ? "bg-amber-100 text-amber-700" : "bg-panel-hover text-text-muted hover:bg-panel-active"
+          }`}
+        >
+          N
+        </button>
+      </div>
+    );
+  }
+
+  const isFkNav = foreignKey && value != null && onNavigateFK;
+
+  return (
+    <div class={`group/cell flex items-center gap-1 font-mono text-xs py-2 min-h-[2rem] ${alignRight ? "justify-end" : ""}`}>
+      {isFkNav ? (
+        <>
+          <span
+            onClick={() => onNavigateFK!(foreignKey!)}
+            class="truncate max-w-xs text-link hover:underline cursor-pointer"
+            title={`${String(value)} \u2192 ${foreignKey!.targetTable}.${foreignKey!.targetColumn}`}
+          >
+            {String(value)}
+          </span>
+          <button
+            onClick={(e) => { e.stopPropagation(); startEdit(); }}
+            class="flex-shrink-0 opacity-0 group-hover/cell:opacity-100 text-xs text-text-muted hover:text-text-data px-1.5 py-0.5 rounded hover:bg-panel-hover transition-all"
+            title="Edit value"
+          >
+            edit
+          </button>
+        </>
+      ) : (
+        <div
+          onClick={startEdit}
+          class={`cursor-pointer flex-1 min-w-0 flex items-center ${alignRight ? "justify-end" : ""}`}
+        >
+          {value === null ? (
+            <span class="text-text-dim italic">NULL</span>
+          ) : (
+            <span class="truncate max-w-xs" title={String(value)}>{String(value)}</span>
+          )}
+        </div>
+      )}
+      {isLong && onInspect && (
+        <button
+          onClick={e => { e.stopPropagation(); onInspect(); }}
+          class="flex-shrink-0 text-[10px] text-text-muted hover:text-text-data px-1 py-0.5 rounded hover:bg-panel-hover transition-colors"
+          title="Inspect value"
+        >
+          &#x2922;
+        </button>
+      )}
+    </div>
+  );
+}