lopata 0.0.1

package/runtime/dashboard/views/home.tsx

@@ -0,0 +1,287 @@
+import type { OverviewData, WorkerInfo } from "../rpc/types";
+import { useQuery } from "../rpc/hooks";
+import { StatusBadge } from "../components";
+
+/* ── Inventory items ── */
+
+const INVENTORY = [
+  { key: "kv", label: "KV", path: "/kv", icon: "⬡", color: "text-blue-400" },
+  { key: "r2", label: "R2", path: "/r2", icon: "◧", color: "text-violet-400" },
+  { key: "d1", label: "D1", path: "/d1", icon: "⊞", color: "text-cyan-400" },
+  { key: "cache", label: "Cache", path: "/cache", icon: "◎", color: "text-teal-400" },
+  { key: "do", label: "DO", path: "/do", icon: "⬢", color: "text-emerald-400" },
+  { key: "workflows", label: "Workflows", path: "/workflows", icon: "⇶", color: "text-amber-400" },
+  { key: "containers", label: "Containers", path: "/containers", icon: "▣", color: "text-indigo-400" },
+  { key: "scheduled", label: "Scheduled", path: "/scheduled", icon: "⏱\uFE0E", color: "text-orange-400" },
+  { key: "queue", label: "Queues", path: "/queue", icon: "☰", color: "text-yellow-400" },
+  { key: "email", label: "Email", path: "/email", icon: "✉\uFE0E", color: "text-pink-400" },
+  { key: "ai", label: "AI", path: "/ai", icon: "⚡", color: "text-purple-400" },
+] as const;
+
+const BINDING_COLORS: Record<string, string> = {
+  kv: "bg-blue-500/15 text-blue-400",
+  r2: "bg-violet-500/15 text-violet-400",
+  d1: "bg-cyan-500/15 text-cyan-400",
+  do: "bg-emerald-500/15 text-emerald-400",
+  queue: "bg-yellow-500/15 text-yellow-400",
+  workflow: "bg-amber-500/15 text-amber-400",
+  service: "bg-neutral-500/15 text-neutral-400",
+  images: "bg-pink-500/15 text-pink-400",
+  container: "bg-indigo-500/15 text-indigo-400",
+  ai: "bg-purple-500/15 text-purple-400",
+};
+
+/* ── Formatters ── */
+
+function fmtBytes(b: number): string {
+  if (b < 1024) return `${b} B`;
+  if (b < 1048576) return `${(b / 1024).toFixed(1)} KB`;
+  if (b < 1073741824) return `${(b / 1048576).toFixed(1)} MB`;
+  return `${(b / 1073741824).toFixed(2)} GB`;
+}
+
+function fmtUptime(s: number): string {
+  const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600),
+    m = Math.floor((s % 3600) / 60), sec = Math.floor(s % 60);
+  const p: string[] = [];
+  if (d) p.push(`${d}d`);
+  if (h) p.push(`${h}h`);
+  if (m) p.push(`${m}m`);
+  p.push(`${sec}s`);
+  return p.join(" ");
+}
+
+function fmtMicros(us: number): string {
+  if (us < 1000) return `${us}µs`;
+  if (us < 1_000_000) return `${(us / 1000).toFixed(1)}ms`;
+  return `${(us / 1_000_000).toFixed(2)}s`;
+}
+
+/* ── Gauge with semantic color ── */
+
+function gaugeColor(pct: number): string {
+  if (pct > 90) return "bg-red-500";
+  if (pct > 70) return "bg-amber-500";
+  return "bg-blue-500";
+}
+
+function MiniGauge({ value, max, label }: { value: number; max: number; label: string }) {
+  const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0;
+  return (
+    <div>
+      <div class="flex justify-between items-baseline mb-1.5">
+        <span class="text-xs text-text-muted">{label}</span>
+        <span class="text-xs font-mono tabular-nums text-ink">{fmtBytes(value)}</span>
+      </div>
+      <div class="h-2 rounded-full bg-bar overflow-hidden">
+        <div class={`h-full rounded-full transition-all ${gaugeColor(pct)}`} style={{ width: `${Math.max(pct, 2)}%` }} />
+      </div>
+    </div>
+  );
+}
+
+function Kv({ k, v }: { k: string; v: string }) {
+  return (
+    <div class="flex justify-between items-baseline gap-6 py-0.5">
+      <span class="text-xs text-text-muted shrink-0">{k}</span>
+      <span class="text-xs font-mono tabular-nums text-ink truncate text-right" title={v}>{v}</span>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: any }) {
+  return (
+    <div>
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">{title}</h2>
+      {children}
+    </div>
+  );
+}
+
+/* ── Main view ── */
+
+export function HomeView() {
+  const { data } = useQuery("overview.get");
+  const { data: workers } = useQuery("workers.list");
+
+  if (!data) {
+    return (
+      <div class="p-8 lg:p-10">
+        <h1 class="text-2xl font-bold text-ink mb-1">Overview</h1>
+        <p class="text-sm text-text-muted">Loading...</p>
+      </div>
+    );
+  }
+
+  const rt = data.runtime;
+  const hasErrors = data.errors > 0;
+  const envEntries = Object.entries(rt.env).filter(([k]) => k !== "PATH");
+
+  return (
+    <div class="p-8 lg:p-10 max-w-[1600px]">
+      {/* ── Header ── */}
+      <div class="flex items-start gap-4 mb-8">
+        <div class="flex-1">
+          <h1 class="text-2xl font-bold text-ink">Overview</h1>
+          <p class="text-sm text-text-muted mt-1">
+            Bun {rt.bunVersion} &middot; {rt.platform}/{rt.arch} &middot; up {fmtUptime(rt.uptime)}
+          </p>
+        </div>
+        <a
+          href="#/errors"
+          class={`flex items-center gap-2.5 px-4 py-2 rounded-full text-sm font-medium no-underline transition-colors ${
+            hasErrors
+              ? "bg-red-500/10 text-red-400 hover:bg-red-500/20"
+              : "bg-emerald-500/10 text-emerald-400"
+          }`}
+        >
+          <span class={`w-2.5 h-2.5 rounded-full ${hasErrors ? "bg-red-500" : "bg-emerald-500"}`} />
+          {hasErrors ? `${data.errors} error${data.errors > 1 ? "s" : ""}` : "Healthy"}
+        </a>
+      </div>
+
+      {/* ── Two-column layout ── */}
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-10">
+
+        {/* ── Left: main content ── */}
+        <div class="flex flex-col gap-10">
+
+          {/* ── Health: Errors hero card ── */}
+          {hasErrors && (
+            <a
+              href="#/errors"
+              class="flex items-center gap-5 bg-panel rounded-xl border border-red-500/30 border-l-[3px] border-l-red-500 px-6 py-5 no-underline hover:border-red-500/50 transition-colors"
+            >
+              <span class="text-3xl">⚠︎</span>
+              <div class="flex-1">
+                <div class="text-3xl font-bold text-red-400 tabular-nums">{data.errors}</div>
+                <div class="text-sm text-text-muted mt-0.5">Unresolved errors</div>
+              </div>
+              <span class="text-sm text-text-muted">View all &rarr;</span>
+            </a>
+          )}
+
+          {/* ── Inventory ── */}
+          <Section title="Bindings">
+            <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-3">
+              {INVENTORY.map(item => {
+                const count = data[item.key as keyof OverviewData] as number;
+                const active = count > 0;
+                return (
+                  <a
+                    key={item.key}
+                    href={`#${item.path}`}
+                    class={`bg-panel rounded-lg border px-4 py-3 no-underline transition-all hover:shadow-card-hover ${
+                      active
+                        ? "border-border hover:border-text-dim"
+                        : "border-border-subtle opacity-40 hover:opacity-65"
+                    }`}
+                  >
+                    <div class="flex items-center gap-2.5">
+                      <span class={`text-lg leading-none ${active ? item.color : "text-text-dim"}`}>{item.icon}</span>
+                      <span class={`text-xl font-bold tabular-nums leading-none ${active ? "text-ink" : "text-text-dim"}`}>{count}</span>
+                    </div>
+                    <div class="text-xs text-text-muted mt-1.5">{item.label}</div>
+                  </a>
+                );
+              })}
+            </div>
+          </Section>
+
+          {/* ── Workers ── */}
+          <Section title="Workers">
+            {workers && workers.length > 0 ? (
+              <div class="flex flex-col gap-3">
+                {workers.map((w: WorkerInfo) => {
+                  const errCount = data.workerErrors[w.name] ?? 0;
+                  const hasWorkerErrors = errCount > 0;
+                  return (
+                    <a
+                      key={w.name}
+                      href="#/workers"
+                      class={`group bg-panel rounded-xl border px-5 py-4 no-underline transition-colors ${
+                        hasWorkerErrors
+                          ? "border-red-500/20 hover:border-red-500/40"
+                          : "border-border hover:border-text-dim"
+                      }`}
+                    >
+                      <div class="flex items-center gap-2.5 mb-2">
+                        <span class={`w-2.5 h-2.5 rounded-full shrink-0 ${hasWorkerErrors ? "bg-red-500" : "bg-emerald-500"}`} />
+                        <span class="text-sm font-semibold text-ink">{w.name}</span>
+                        {w.isMain && (
+                          <span class="px-2 py-0.5 rounded text-[11px] font-medium bg-ink text-surface leading-none">main</span>
+                        )}
+                        {hasWorkerErrors && (
+                          <span class="px-2 py-0.5 rounded text-[11px] font-medium bg-red-500/15 text-red-400 leading-none">
+                            {errCount} err
+                          </span>
+                        )}
+                        <span class="text-xs text-text-muted ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
+                          View &rarr;
+                        </span>
+                      </div>
+                      {w.bindings.length > 0 && (
+                        <div class="flex flex-wrap gap-1.5 ml-5">
+                          {w.bindings.map(b => (
+                            <span key={b.name} title={b.name}>
+                              <StatusBadge status={b.type} colorMap={BINDING_COLORS} />
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </a>
+                  );
+                })}
+              </div>
+            ) : (
+              <div class="bg-panel rounded-xl border border-border-subtle px-5 py-8 text-center text-sm text-text-muted">
+                No workers configured
+              </div>
+            )}
+          </Section>
+        </div>
+
+        {/* ── Right: System sidebar ── */}
+        <div class="flex flex-col gap-5">
+          <div class="bg-panel rounded-xl border border-border p-5">
+            <div class="text-xs font-semibold uppercase tracking-wider text-text-muted mb-4">Resources</div>
+            <div class="flex flex-col gap-2">
+              <Kv k="RSS" v={fmtBytes(rt.memory.rss)} />
+              <Kv k="Heap" v={fmtBytes(rt.memory.heapUsed)} />
+              <Kv k="External" v={fmtBytes(rt.memory.external)} />
+            </div>
+            <div class="mt-3 pt-3 border-t border-border-subtle flex flex-col gap-2">
+              <Kv k="CPU user" v={fmtMicros(rt.cpuUsage.user)} />
+              <Kv k="CPU system" v={fmtMicros(rt.cpuUsage.system)} />
+            </div>
+          </div>
+
+          <div class="bg-panel rounded-xl border border-border p-5">
+            <div class="text-xs font-semibold uppercase tracking-wider text-text-muted mb-4">Runtime</div>
+            <div class="flex flex-col gap-2">
+              <Kv k="Bun" v={rt.bunVersion} />
+              <Kv k="Platform" v={`${rt.platform}/${rt.arch}`} />
+              <Kv k="PID" v={String(rt.pid)} />
+              <Kv k="Uptime" v={fmtUptime(rt.uptime)} />
+              <Kv k="Started" v={new Date(rt.startedAt).toLocaleTimeString()} />
+              <Kv k="CWD" v={rt.cwd} />
+            </div>
+          </div>
+
+          {envEntries.length > 0 && (
+            <details class="bg-panel rounded-xl border border-border overflow-hidden">
+              <summary class="p-5 cursor-pointer select-none text-xs font-semibold uppercase tracking-wider text-text-muted hover:text-text-secondary transition-colors">
+                Environment ({envEntries.length})
+              </summary>
+              <div class="px-5 pb-5 flex flex-col gap-2">
+                {envEntries.map(([key, value]) => (
+                  <Kv key={key} k={key} v={value} />
+                ))}
+              </div>
+            </details>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/runtime/dashboard/views/kv.tsx

@@ -0,0 +1,273 @@
+import { useState } from "preact/hooks";
+import { formatBytes } from "../lib";
+import { useQuery, usePaginatedQuery, useMutation } from "../rpc/hooks";
+import type { KvValue } from "../rpc/types";
+import { EmptyState, PageHeader, Breadcrumb, Table, DetailField, CodeBlock, FilterInput, LoadMoreButton, DeleteButton, TableLink, ServiceInfo, PillButton, RefreshButton } from "../components";
+
+export function KvView({ route }: { route: string }) {
+  const parts = route.split("/").filter(Boolean);
+
+  if (parts.length === 1) return <KvNamespaceList />;
+  if (parts.length === 2) return <KvKeyList ns={decodeURIComponent(parts[1]!)} />;
+  if (parts.length >= 3) return <KvKeyDetail ns={decodeURIComponent(parts[1]!)} keyName={decodeURIComponent(parts.slice(2).join("/"))} />;
+  return null;
+}
+
+function KvNamespaceList() {
+  const { data: namespaces, refetch } = useQuery("kv.listNamespaces");
+  const { data: configGroups } = useQuery("config.forService", { type: "kv" });
+
+  const totalKeys = namespaces?.reduce((s, ns) => s + ns.count, 0) ?? 0;
+
+  return (
+    <div class="p-8 max-w-6xl">
+      <PageHeader title="KV Namespaces" subtitle={`${namespaces?.length ?? 0} namespace(s)`} actions={<RefreshButton onClick={refetch} />} />
+      <div class="flex gap-6 items-start">
+        <div class="flex-1 min-w-0">
+          {!namespaces?.length ? (
+            <EmptyState message="No KV namespaces found" />
+          ) : (
+            <Table
+              headers={["Namespace", "Keys"]}
+              rows={namespaces.map(ns => [
+                <TableLink href={`#/kv/${encodeURIComponent(ns.namespace)}`}>{ns.namespace}</TableLink>,
+                <span class="tabular-nums">{ns.count}</span>,
+              ])}
+            />
+          )}
+        </div>
+        <ServiceInfo
+          description="Key-value storage for fast, globally distributed reads."
+          stats={[
+            { label: "Namespaces", value: namespaces?.length ?? 0 },
+            { label: "Total keys", value: totalKeys.toLocaleString() },
+          ]}
+          configGroups={configGroups}
+          links={[
+            { label: "Documentation", href: "https://developers.cloudflare.com/kv/" },
+            { label: "API Reference", href: "https://developers.cloudflare.com/api/resources/kv/" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ─── Put Key Form (add / edit) ─────────────────────────────────────
+
+interface KvPutFormProps {
+  ns: string;
+  /** Pre-fill for editing an existing key */
+  initial?: { key: string; value: string; metadata?: string; expiration?: number | null };
+  onSaved: () => void;
+  onCancel: () => void;
+}
+
+function KvPutForm({ ns, initial, onSaved, onCancel }: KvPutFormProps) {
+  const isEdit = !!initial;
+  const [key, setKey] = useState(initial?.key ?? "");
+  const [value, setValue] = useState(initial?.value ?? "");
+  const [metadata, setMetadata] = useState(initial?.metadata ?? "");
+  const [ttl, setTtl] = useState("");
+  const [error, setError] = useState("");
+  const putKey = useMutation("kv.putKey");
+
+  const handleSubmit = async () => {
+    setError("");
+    if (!key.trim()) { setError("Key is required"); return; }
+
+    const input: { ns: string; key: string; value: string; metadata?: string; expirationTtl?: number } = { ns, key, value };
+    if (metadata.trim()) input.metadata = metadata.trim();
+    if (ttl.trim()) {
+      const ttlNum = parseInt(ttl, 10);
+      if (isNaN(ttlNum) || ttlNum < 60) { setError("TTL must be at least 60 seconds"); return; }
+      input.expirationTtl = ttlNum;
+    }
+
+    const result = await putKey.mutate(input);
+    if (result) {
+      onSaved();
+    } else if (putKey.error) {
+      setError(putKey.error.message);
+    }
+  };
+
+  return (
+    <div class="bg-panel border border-border rounded-lg p-4 mb-6">
+      <div class="flex items-center justify-between mb-3">
+        <div class="text-sm font-semibold text-ink">{isEdit ? "Edit key" : "Add key"}</div>
+        <button onClick={onCancel} class="text-text-muted hover:text-text-data text-xs font-medium">
+          Cancel
+        </button>
+      </div>
+
+      <div class="space-y-3">
+        <div>
+          <label class="block text-xs font-medium text-text-secondary mb-1">Key</label>
+          <input
+            type="text"
+            value={key}
+            onInput={e => setKey((e.target as HTMLInputElement).value)}
+            placeholder="my-key"
+            disabled={isEdit}
+            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 disabled:opacity-50"
+          />
+        </div>
+
+        <div>
+          <label class="block text-xs font-medium text-text-secondary mb-1">Value</label>
+          <textarea
+            value={value}
+            onInput={e => setValue((e.target as HTMLTextAreaElement).value)}
+            placeholder="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={4}
+          />
+        </div>
+
+        <div class="flex gap-3">
+          <div class="flex-1">
+            <label class="block text-xs font-medium text-text-secondary mb-1">Metadata (JSON, optional)</label>
+            <input
+              type="text"
+              value={metadata}
+              onInput={e => setMetadata((e.target as HTMLInputElement).value)}
+              placeholder='{"type": "config"}'
+              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"
+            />
+          </div>
+          <div class="w-40">
+            <label class="block text-xs font-medium text-text-secondary mb-1">TTL (seconds)</label>
+            <input
+              type="text"
+              value={ttl}
+              onInput={e => setTtl((e.target as HTMLInputElement).value)}
+              placeholder="e.g. 3600"
+              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"
+            />
+          </div>
+        </div>
+      </div>
+
+      {error && <div class="text-red-500 text-xs mt-2">{error}</div>}
+      <div class="flex justify-end mt-3">
+        <button
+          onClick={handleSubmit}
+          disabled={putKey.isLoading || !key.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"
+        >
+          {putKey.isLoading ? "Saving..." : isEdit ? "Save" : "Add key"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Key list ───────────────────────────────────────────────────────
+
+function KvKeyList({ ns }: { ns: string }) {
+  const [prefix, setPrefix] = useState("");
+  const { items: keys, hasMore, loadMore, refetch } = usePaginatedQuery("kv.listKeys", { ns, prefix });
+  const deleteKey = useMutation("kv.deleteKey");
+  const [showAdd, setShowAdd] = useState(false);
+
+  const handleDelete = async (key: string) => {
+    if (!confirm(`Delete key "${key}"?`)) return;
+    await deleteKey.mutate({ ns, key });
+    refetch();
+  };
+
+  return (
+    <div class="p-8">
+      <Breadcrumb items={[{ label: "KV", href: "#/kv" }, { label: ns }]} />
+      <div class="mb-6 flex gap-3 items-center justify-between">
+        <FilterInput value={prefix} onInput={setPrefix} placeholder="Filter by prefix..." />
+        <div class="flex gap-2 items-center">
+          <RefreshButton onClick={refetch} />
+          {!showAdd && (
+            <button
+              onClick={() => setShowAdd(true)}
+              class="rounded-md px-3 py-1.5 text-sm font-medium bg-ink text-surface hover:opacity-80 transition-all"
+            >
+              Add key
+            </button>
+          )}
+        </div>
+      </div>
+      {showAdd && (
+        <KvPutForm
+          ns={ns}
+          onSaved={() => { setShowAdd(false); refetch(); }}
+          onCancel={() => setShowAdd(false)}
+        />
+      )}
+      {keys.length === 0 ? (
+        <EmptyState message="No keys found" />
+      ) : (
+        <>
+          <Table
+            headers={["Key", "Size", "Expiration", ""]}
+            rows={keys.map(k => [
+              <TableLink href={`#/kv/${encodeURIComponent(ns)}/${encodeURIComponent(k.key)}`} mono>{k.key}</TableLink>,
+              formatBytes(k.size),
+              k.expiration ? new Date(k.expiration * 1000).toLocaleString() : "—",
+              <DeleteButton onClick={() => handleDelete(k.key)} />,
+            ])}
+          />
+          {hasMore && <LoadMoreButton onClick={loadMore} />}
+        </>
+      )}
+    </div>
+  );
+}
+
+// ─── Key detail ─────────────────────────────────────────────────────
+
+function KvKeyDetail({ ns, keyName }: { ns: string; keyName: string }) {
+  const { data, refetch } = useQuery("kv.getKey", { ns, key: keyName });
+  const [editing, setEditing] = useState(false);
+
+  if (!data) return <div class="p-8 text-text-muted">Loading...</div>;
+
+  return (
+    <div class="p-8">
+      <Breadcrumb items={[{ label: "KV", href: "#/kv" }, { label: ns, href: `#/kv/${encodeURIComponent(ns)}` }, { label: keyName }]} />
+      {editing ? (
+        <KvPutForm
+          ns={ns}
+          initial={{
+            key: data.key,
+            value: data.value,
+            metadata: data.metadata ? JSON.stringify(data.metadata, null, 2) : "",
+            expiration: data.expiration,
+          }}
+          onSaved={() => { setEditing(false); refetch(); }}
+          onCancel={() => setEditing(false)}
+        />
+      ) : (
+        <div class="space-y-5">
+          <div class="flex justify-end">
+            <button
+              onClick={() => setEditing(true)}
+              class="rounded-md px-3 py-1.5 text-sm font-medium bg-panel border border-border text-text-data hover:bg-panel-hover transition-all"
+            >
+              Edit
+            </button>
+          </div>
+          <DetailField label="Key" value={data.key} />
+          <DetailField label="Value">
+            <CodeBlock class="max-h-96">{data.value}</CodeBlock>
+          </DetailField>
+          {data.metadata && (
+            <DetailField label="Metadata">
+              <CodeBlock>{JSON.stringify(data.metadata, null, 2)}</CodeBlock>
+            </DetailField>
+          )}
+          {data.expiration && (
+            <DetailField label="Expiration" value={new Date(data.expiration * 1000).toLocaleString()} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}