lopata 0.0.1

package/runtime/dashboard/views/analytics-engine.tsx

@@ -0,0 +1,169 @@
+import { useState } from "preact/hooks";
+import { formatTime } from "../lib";
+import { useQuery, useMutation } from "../rpc/hooks";
+import { EmptyState, Table, PageHeader, DeleteButton, ServiceInfo, RefreshButton } from "../components";
+import type { AnalyticsEngineDataPoint } from "../rpc/types";
+
+export function AnalyticsEngineView({ route }: { route: string }) {
+	const parts = route.split("/").filter(Boolean);
+	if (parts.length >= 2) return <DataPointDetail id={parts[1]!} />;
+	return <DataPointList />;
+}
+
+function DataPointList() {
+	const [datasetFilter, setDatasetFilter] = useState("");
+	const { data: points, refetch } = useQuery("analyticsEngine.list", {
+		dataset: datasetFilter || undefined,
+	});
+	const { data: stats } = useQuery("analyticsEngine.stats");
+	const { data: datasets } = useQuery("analyticsEngine.datasets");
+	const { data: configGroups } = useQuery("config.forService", { type: "analytics_engine" });
+	const deletePoint = useMutation("analyticsEngine.delete");
+
+	const handleDelete = async (id: string) => {
+		if (!confirm("Delete this data point?")) return;
+		await deletePoint.mutate({ id });
+		refetch();
+	};
+
+	return (
+		<div class="p-8 max-w-6xl">
+			<PageHeader title="Analytics Engine" subtitle={`${stats?.total ?? 0} data point(s)`} actions={<RefreshButton onClick={refetch} />} />
+			<div class="flex gap-6 items-start">
+				<div class="flex-1 min-w-0">
+					<div class="mb-6 flex gap-2 items-center flex-wrap">
+						{(datasets?.length ?? 0) > 0 && (
+							<select
+								value={datasetFilter}
+								onChange={e => setDatasetFilter((e.target as HTMLSelectElement).value)}
+								class="text-xs bg-panel-secondary border border-border rounded-md px-2 py-1 outline-none"
+							>
+								<option value="">All datasets</option>
+								{datasets!.map(d => (
+									<option key={d} value={d}>{d}</option>
+								))}
+							</select>
+						)}
+					</div>
+					{!points?.length ? (
+						<EmptyState message="No data points found" />
+					) : (
+						<Table
+							headers={["Dataset", "Index", "Doubles", "Blobs", "Time", ""]}
+							rows={points.map(p => [
+								<a href={`#/analytics/${p.id}`} class="font-mono text-xs text-blue-600 hover:underline">{p.dataset}</a>,
+								<span class="font-mono text-xs text-text-muted">{p.index1 ?? "-"}</span>,
+								<span class="text-xs text-text-muted tabular-nums">{formatDoubles(p)}</span>,
+								<span class="text-xs text-text-muted truncate max-w-[150px] block">{formatBlobs(p)}</span>,
+								<span class="text-xs text-text-muted">{formatTime(p.timestamp)}</span>,
+								<DeleteButton onClick={() => handleDelete(p.id)} />,
+							])}
+						/>
+					)}
+				</div>
+				<ServiceInfo
+					description="Analytics Engine — write-only data point storage for custom metrics, events, and clickstream data."
+					stats={[
+						{ label: "Total", value: stats?.total ?? 0 },
+						...(stats?.byDataset ? Object.entries(stats.byDataset).map(([k, v]) => ({ label: k, value: v })) : []),
+					]}
+					configGroups={configGroups}
+					links={[
+						{ label: "Analytics Engine docs", href: "https://developers.cloudflare.com/analytics/analytics-engine/" },
+						{ label: "SQL API", href: "https://developers.cloudflare.com/analytics/analytics-engine/sql-api/" },
+					]}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function DataPointDetail({ id }: { id: string }) {
+	const { data } = useQuery("analyticsEngine.get", { id });
+
+	if (!data) {
+		return (
+			<div class="p-8">
+				<a href="#/analytics" class="text-sm text-blue-600 hover:underline mb-4 inline-block">Back to data points</a>
+				<EmptyState message="Data point not found" />
+			</div>
+		);
+	}
+
+	const doubles: { name: string; value: number }[] = [];
+	const blobs: { name: string; value: string | null }[] = [];
+	const row = data as unknown as Record<string, unknown>;
+	for (let i = 1; i <= 20; i++) {
+		const dv = row[`double${i}`] as number | null;
+		if (dv != null) doubles.push({ name: `double${i}`, value: dv });
+		const bv = row[`blob${i}`] as string | null;
+		if (bv != null) blobs.push({ name: `blob${i}`, value: bv });
+	}
+
+	return (
+		<div class="p-8 max-w-4xl">
+			<a href="#/analytics" class="text-sm text-blue-600 hover:underline mb-4 inline-block">Back to data points</a>
+			<div class="bg-panel border border-border rounded-lg p-6">
+				<h2 class="text-lg font-semibold text-ink mb-4">Data Point Detail</h2>
+				<div class="grid grid-cols-2 gap-4 mb-4 text-sm">
+					<div>
+						<span class="text-text-muted">Dataset:</span>{" "}
+						<span class="font-mono">{data.dataset}</span>
+					</div>
+					<div>
+						<span class="text-text-muted">Time:</span>{" "}
+						{formatTime(data.timestamp)}
+					</div>
+					<div>
+						<span class="text-text-muted">Index:</span>{" "}
+						<span class="font-mono">{data.index1 ?? "-"}</span>
+					</div>
+					<div>
+						<span class="text-text-muted">Sample interval:</span>{" "}
+						<span class="tabular-nums">{data._sample_interval}</span>
+					</div>
+				</div>
+				{doubles.length > 0 && (
+					<div class="mb-4">
+						<div class="text-xs text-text-muted mb-2">Doubles</div>
+						<div class="bg-panel-secondary border border-border rounded-lg p-4">
+							<div class="grid grid-cols-4 gap-2 text-sm">
+								{doubles.map(d => (
+									<div key={d.name}>
+										<span class="text-text-muted text-xs">{d.name}:</span>{" "}
+										<span class="font-mono tabular-nums">{d.value}</span>
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
+				)}
+				{blobs.length > 0 && (
+					<div>
+						<div class="text-xs text-text-muted mb-2">Blobs</div>
+						<div class="bg-panel-secondary border border-border rounded-lg p-4">
+							<div class="space-y-1 text-sm">
+								{blobs.map(b => (
+									<div key={b.name}>
+										<span class="text-text-muted text-xs">{b.name}:</span>{" "}
+										<span class="font-mono">{b.value}</span>
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function formatDoubles(p: AnalyticsEngineDataPoint): string {
+	const vals = [p.double1, p.double2, p.double3, p.double4, p.double5].filter((v): v is number => v != null);
+	return vals.length ? vals.join(", ") : "-";
+}
+
+function formatBlobs(p: AnalyticsEngineDataPoint): string {
+	const vals = [p.blob1, p.blob2, p.blob3, p.blob4, p.blob5].filter((v): v is string => v != null);
+	return vals.length ? vals.join(", ") : "-";
+}

package/runtime/dashboard/views/cache.tsx

@@ -0,0 +1,93 @@
+import { useQuery, useMutation } from "../rpc/hooks";
+import { EmptyState, Breadcrumb, Table, PageHeader, DeleteButton, TableLink, ServiceInfo, RefreshButton } from "../components";
+
+const HTTP_STATUS_COLORS: Record<string, string> = {
+  "2xx": "bg-emerald-100 text-emerald-700",
+  "3xx": "bg-amber-100 text-amber-700",
+  "4xx": "bg-red-100 text-red-700",
+  "5xx": "bg-red-100 text-red-700",
+};
+
+function httpStatusColor(status: number): string {
+  if (status < 300) return HTTP_STATUS_COLORS["2xx"]!;
+  if (status < 400) return HTTP_STATUS_COLORS["3xx"]!;
+  return HTTP_STATUS_COLORS["4xx"]!;
+}
+
+export function CacheView({ route }: { route: string }) {
+  const parts = route.split("/").filter(Boolean);
+  if (parts.length === 1) return <CacheNameList />;
+  if (parts.length >= 2) return <CacheEntryList name={decodeURIComponent(parts[1]!)} />;
+  return null;
+}
+
+function CacheNameList() {
+  const { data: caches, refetch } = useQuery("cache.listCaches");
+
+  const totalEntries = caches?.reduce((s, c) => s + c.count, 0) ?? 0;
+
+  return (
+    <div class="p-8 max-w-6xl">
+      <PageHeader title="Cache" subtitle={`${caches?.length ?? 0} cache(s)`} actions={<RefreshButton onClick={refetch} />} />
+      <div class="flex gap-6 items-start">
+        <div class="flex-1 min-w-0">
+          {!caches?.length ? (
+            <EmptyState message="No cache entries found" />
+          ) : (
+            <Table
+              headers={["Cache Name", "Entries"]}
+              rows={caches.map(c => [
+                <TableLink href={`#/cache/${encodeURIComponent(c.cache_name)}`}>{c.cache_name}</TableLink>,
+                <span class="tabular-nums">{c.count}</span>,
+              ])}
+            />
+          )}
+        </div>
+        <ServiceInfo
+          description="Cache API for programmatic HTTP response caching."
+          stats={[
+            { label: "Caches", value: caches?.length ?? 0 },
+            { label: "Entries", value: totalEntries.toLocaleString() },
+          ]}
+          links={[
+            { label: "Documentation", href: "https://developers.cloudflare.com/cache/" },
+            { label: "API Reference", href: "https://developers.cloudflare.com/api/resources/cache/" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+function CacheEntryList({ name }: { name: string }) {
+  const { data: entries, refetch } = useQuery("cache.listEntries", { name });
+  const deleteEntry = useMutation("cache.deleteEntry");
+
+  const handleDelete = async (url: string) => {
+    if (!confirm(`Delete cache entry for "${url}"?`)) return;
+    await deleteEntry.mutate({ name, url });
+    refetch();
+  };
+
+  return (
+    <div class="p-8">
+      <Breadcrumb items={[{ label: "Cache", href: "#/cache" }, { label: name }]} />
+      <div class="mb-6 flex justify-end">
+        <RefreshButton onClick={refetch} />
+      </div>
+      {!entries?.length ? (
+        <EmptyState message="No cache entries" />
+      ) : (
+        <Table
+          headers={["URL", "Status", "Expires", ""]}
+          rows={entries.map(e => [
+            <span class="font-mono text-xs max-w-md truncate block">{e.url}</span>,
+            <span class={`inline-flex px-2 py-0.5 rounded-md text-xs font-medium ${httpStatusColor(e.status)}`}>{e.status}</span>,
+            e.expires_at ? new Date(e.expires_at * 1000).toLocaleString() : "—",
+            <DeleteButton onClick={() => handleDelete(e.url)} />,
+          ])}
+        />
+      )}
+    </div>
+  );
+}

package/runtime/dashboard/views/containers.tsx

@@ -0,0 +1,197 @@
+import { useState } from "preact/hooks";
+import { useQuery, useMutation } from "../rpc/hooks";
+import { EmptyState, Breadcrumb, Table, PageHeader, TableLink, StatusBadge, ServiceInfo, RefreshButton, DetailField, CodeBlock } from "../components";
+
+const CONTAINER_STATE_COLORS: Record<string, string> = {
+  running: "bg-emerald-100 text-emerald-700",
+  healthy: "bg-emerald-100 text-emerald-700",
+  exited: "bg-panel-active text-text-data",
+  stopped: "bg-panel-active text-text-data",
+  created: "bg-accent-blue text-ink",
+  paused: "bg-yellow-100 text-yellow-700",
+  dead: "bg-red-100 text-red-700",
+};
+
+export function ContainersView({ route }: { route: string }) {
+  const parts = route.split("/").filter(Boolean);
+  if (parts.length === 1) return <ContainerList />;
+  if (parts.length === 2) return <ContainerInstanceList className={decodeURIComponent(parts[1]!)} />;
+  if (parts.length >= 3) return <ContainerDetailView className={decodeURIComponent(parts[1]!)} id={decodeURIComponent(parts[2]!)} />;
+  return null;
+}
+
+function ContainerList() {
+  const { data: containers, refetch } = useQuery("containers.list");
+  const { data: configGroups } = useQuery("config.forService", { type: "containers" });
+
+  const totalInstances = containers?.reduce((s, c) => s + c.instanceCount, 0) ?? 0;
+  const totalRunning = containers?.reduce((s, c) => s + c.runningCount, 0) ?? 0;
+
+  return (
+    <div class="p-8 max-w-6xl">
+      <PageHeader title="Containers" subtitle={`${containers?.length ?? 0} container class(es)`} actions={<RefreshButton onClick={refetch} />} />
+      <div class="flex gap-6 items-start">
+        <div class="flex-1 min-w-0">
+          {!containers?.length ? (
+            <EmptyState message="No containers configured" />
+          ) : (
+            <Table
+              headers={["Class Name", "Image", "Max Instances", "Instances", "Running"]}
+              rows={containers.map(c => [
+                <TableLink href={`#/containers/${encodeURIComponent(c.className)}`}>{c.className}</TableLink>,
+                <span class="font-mono text-xs">{c.image}</span>,
+                c.maxInstances ?? "unlimited",
+                <span class="tabular-nums">{c.instanceCount}</span>,
+                <span class={`tabular-nums font-medium ${c.runningCount > 0 ? "text-emerald-600" : ""}`}>{c.runningCount}</span>,
+              ])}
+            />
+          )}
+        </div>
+        <ServiceInfo
+          description="Docker-backed container instances managed as Durable Objects."
+          stats={[
+            { label: "Classes", value: String(containers?.length ?? 0) },
+            { label: "Instances", value: String(totalInstances) },
+            { label: "Running", value: String(totalRunning) },
+          ]}
+          configGroups={configGroups}
+          links={[
+            { label: "Documentation", href: "https://developers.cloudflare.com/containers/" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ContainerInstanceList({ className }: { className: string }) {
+  const { data: instances, refetch } = useQuery("containers.listInstances", { className });
+
+  return (
+    <div class="p-8">
+      <Breadcrumb items={[{ label: "Containers", href: "#/containers" }, { label: className }]} />
+      <div class="mb-6 flex justify-end">
+        <RefreshButton onClick={refetch} />
+      </div>
+      {!instances?.length ? (
+        <EmptyState message="No container instances found" />
+      ) : (
+        <Table
+          headers={["Instance", "Docker State", "Ports"]}
+          rows={instances.map(inst => [
+            <div>
+              <TableLink href={`#/containers/${encodeURIComponent(className)}/${encodeURIComponent(inst.id)}`} mono>
+                {inst.containerName}
+              </TableLink>
+              {inst.doName && <span class="text-text-muted text-xs ml-2">({inst.doName})</span>}
+            </div>,
+            <StatusBadge status={inst.state} colorMap={CONTAINER_STATE_COLORS} />,
+            Object.keys(inst.ports).length > 0
+              ? <span class="font-mono text-xs">{Object.entries(inst.ports).map(([k, v]) => `${v}->${k}`).join(", ")}</span>
+              : <span class="text-text-muted">—</span>,
+          ])}
+        />
+      )}
+    </div>
+  );
+}
+
+function ContainerDetailView({ className, id }: { className: string; id: string }) {
+  const [tail, setTail] = useState(100);
+  const { data: detail, refetch: refetchDetail } = useQuery("containers.getDetail", { className, id });
+  const { data: logsData, refetch: refetchLogs } = useQuery("containers.getLogs", { className, id, tail });
+  const stopMutation = useMutation("containers.stop");
+  const destroyMutation = useMutation("containers.destroy");
+
+  const refetch = () => {
+    refetchDetail();
+    refetchLogs();
+  };
+
+  if (!detail) return <div class="p-8 text-text-muted font-medium">Loading...</div>;
+
+  const isRunning = detail.state === "running" || detail.state === "healthy";
+
+  const handleStop = async () => {
+    if (!confirm("Stop this container?")) return;
+    await stopMutation.mutate({ className, id });
+    refetch();
+  };
+
+  const handleDestroy = async () => {
+    if (!confirm("Force remove this container? This cannot be undone.")) return;
+    await destroyMutation.mutate({ className, id });
+    refetch();
+  };
+
+  return (
+    <div class="p-8 max-w-5xl">
+      <Breadcrumb items={[
+        { label: "Containers", href: "#/containers" },
+        { label: className, href: `#/containers/${encodeURIComponent(className)}` },
+        { label: id.slice(0, 16) + "..." },
+      ]} />
+
+      {/* Status + Actions */}
+      <div class="mb-6 flex items-center gap-4">
+        <StatusBadge status={detail.state} colorMap={CONTAINER_STATE_COLORS} />
+        {detail.exitCode !== null && (
+          <span class="text-sm text-text-muted">Exit code: <span class="font-mono">{detail.exitCode}</span></span>
+        )}
+        <div class="flex-1" />
+        {isRunning && (
+          <button
+            onClick={handleStop}
+            disabled={stopMutation.isLoading}
+            class="px-3 py-1.5 text-sm rounded-md bg-yellow-100 text-yellow-800 hover:bg-yellow-200 border border-yellow-300 disabled:opacity-50"
+          >
+            {stopMutation.isLoading ? "Stopping..." : "Stop"}
+          </button>
+        )}
+        <button
+          onClick={handleDestroy}
+          disabled={destroyMutation.isLoading}
+          class="px-3 py-1.5 text-sm rounded-md bg-red-100 text-red-800 hover:bg-red-200 border border-red-300 disabled:opacity-50"
+        >
+          {destroyMutation.isLoading ? "Removing..." : "Force Remove"}
+        </button>
+        <RefreshButton onClick={refetch} />
+      </div>
+
+      {/* Info Grid */}
+      <div class="grid grid-cols-2 gap-4 mb-8">
+        <DetailField label="Container Name" value={detail.containerName} />
+        <DetailField label="Instance ID"><span class="font-mono text-sm font-medium break-all">{detail.id}</span></DetailField>
+        <DetailField label="Image" value={detail.image || "—"} />
+        <DetailField label="DO Name" value={detail.doName || "—"} />
+        <DetailField label="Ports">
+          {Object.keys(detail.ports).length > 0
+            ? <span class="font-mono text-sm">{Object.entries(detail.ports).map(([k, v]) => `${v} -> ${k}`).join(", ")}</span>
+            : <span class="text-text-muted">No ports mapped</span>
+          }
+        </DetailField>
+        <DetailField label="Default Port" value={String(detail.config.defaultPort)} />
+        <DetailField label="Sleep After" value={detail.config.sleepAfter != null ? String(detail.config.sleepAfter) : "disabled"} />
+        <DetailField label="Internet" value={detail.config.enableInternet ? "enabled" : "disabled"} />
+        <DetailField label="Ping Endpoint" value={detail.config.pingEndpoint} />
+      </div>
+
+      {/* Logs */}
+      <div class="mb-4 flex items-center gap-3">
+        <h3 class="text-lg font-semibold text-text-data">Logs</h3>
+        <select
+          value={tail}
+          onChange={(e) => setTail(Number((e.target as HTMLSelectElement).value))}
+          class="text-sm border border-border rounded px-2 py-1 bg-panel text-text-data"
+        >
+          <option value={50}>Last 50 lines</option>
+          <option value={100}>Last 100 lines</option>
+          <option value={500}>Last 500 lines</option>
+          <option value={1000}>Last 1000 lines</option>
+        </select>
+        <RefreshButton onClick={refetchLogs} />
+      </div>
+      <CodeBlock>{logsData?.logs || "(no logs)"}</CodeBlock>
+    </div>
+  );
+}

package/runtime/dashboard/views/d1.tsx

@@ -0,0 +1,81 @@
+import { useQuery } from "../rpc/hooks";
+import { rpc } from "../rpc/client";
+import { Breadcrumb, PageHeader, Table, TableLink, ServiceInfo, EmptyState, SqlBrowser, RefreshButton } from "../components";
+import { parseHashRoute } from "../lib";
+import type { Tab } from "../sql-browser/index";
+
+export function D1View({ route }: { route: string }) {
+  const { segments, query } = parseHashRoute(route);
+  if (segments.length <= 1) return <D1DatabaseList />;
+  const dbName = decodeURIComponent(segments[1]!);
+  const rawTab = segments[2] as Tab | undefined;
+  const tab: Tab = rawTab === "schema" || rawTab === "sql" ? rawTab : "data";
+  const tableName = segments[3] ? decodeURIComponent(segments[3]) : null;
+  const basePath = `/d1/${encodeURIComponent(dbName)}`;
+  return <D1DatabaseDetail dbName={dbName} basePath={basePath} routeTab={tab} routeTable={tableName} routeQuery={query} />;
+}
+
+function D1DatabaseList() {
+  const { data: databases, refetch } = useQuery("d1.listDatabases");
+  const { data: configGroups } = useQuery("config.forService", { type: "d1" });
+
+  const totalTables = databases?.reduce((s, db) => s + db.tables, 0) ?? 0;
+
+  return (
+    <div class="p-8 max-w-6xl">
+      <PageHeader title="D1 Databases" subtitle={`${databases?.length ?? 0} database(s)`} actions={<RefreshButton onClick={refetch} />} />
+      <div class="flex gap-6 items-start">
+        <div class="flex-1 min-w-0">
+          {!databases?.length ? (
+            <EmptyState message="No D1 databases found" />
+          ) : (
+            <Table
+              headers={["Database", "Tables"]}
+              rows={databases.map(db => [
+                <TableLink href={`#/d1/${encodeURIComponent(db.name)}`}>{db.name}</TableLink>,
+                <span class="tabular-nums">{db.tables}</span>,
+              ])}
+            />
+          )}
+        </div>
+        <ServiceInfo
+          description="Serverless SQLite databases at the edge."
+          stats={[
+            { label: "Databases", value: databases?.length ?? 0 },
+            { label: "Tables", value: totalTables.toLocaleString() },
+          ]}
+          configGroups={configGroups}
+          links={[
+            { label: "Documentation", href: "https://developers.cloudflare.com/d1/" },
+            { label: "API Reference", href: "https://developers.cloudflare.com/api/resources/d1/" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+function D1DatabaseDetail({ dbName, basePath, routeTab, routeTable, routeQuery }: {
+  dbName: string;
+  basePath: string;
+  routeTab: Tab;
+  routeTable: string | null;
+  routeQuery: URLSearchParams;
+}) {
+  const { data: tables } = useQuery("d1.listTables", { dbName });
+
+  return (
+    <div class="p-8">
+      <Breadcrumb items={[{ label: "D1", href: "#/d1" }, { label: dbName }]} />
+      <SqlBrowser
+        tables={tables}
+        execQuery={(sql) => rpc("d1.query", { dbName, sql })}
+        historyScope={`d1:${dbName}`}
+        basePath={basePath}
+        routeTab={routeTab}
+        routeTable={routeTable}
+        routeQuery={routeQuery}
+      />
+    </div>
+  );
+}