lopata 0.0.1

package/runtime/dashboard/views/queue.tsx

@@ -0,0 +1,193 @@
+import { useState } from "preact/hooks";
+import { formatTime } from "../lib";
+import { useQuery, useMutation } from "../rpc/hooks";
+import { EmptyState, Breadcrumb, Table, PageHeader, PillButton, DeleteButton, TableLink, StatusBadge, ServiceInfo, RefreshButton } from "../components";
+
+const QUEUE_STATUS_COLORS: Record<string, string> = {
+  pending: "bg-amber-100 text-amber-700",
+  acked: "bg-emerald-100 text-emerald-700",
+  failed: "bg-red-100 text-red-700",
+};
+
+export function QueueView({ route }: { route: string }) {
+  const parts = route.split("/").filter(Boolean);
+  if (parts.length === 1) return <QueueList />;
+  if (parts.length >= 2) return <QueueMessages name={decodeURIComponent(parts[1]!)} />;
+  return null;
+}
+
+function QueueList() {
+  const { data: queues, refetch } = useQuery("queue.listQueues");
+  const { data: configGroups } = useQuery("config.forService", { type: "queue" });
+
+  const totalPending = queues?.reduce((s, q) => s + q.pending, 0) ?? 0;
+  const totalAcked = queues?.reduce((s, q) => s + q.acked, 0) ?? 0;
+  const totalFailed = queues?.reduce((s, q) => s + q.failed, 0) ?? 0;
+
+  return (
+    <div class="p-8 max-w-6xl">
+      <PageHeader title="Queues" subtitle={`${queues?.length ?? 0} queue(s)`} actions={<RefreshButton onClick={refetch} />} />
+      <div class="flex gap-6 items-start">
+        <div class="flex-1 min-w-0">
+          {!queues?.length ? (
+            <EmptyState message="No queues found" />
+          ) : (
+            <Table
+              headers={["Queue", "Pending", "Acked", "Failed"]}
+              rows={queues.map(q => [
+                <TableLink href={`#/queue/${encodeURIComponent(q.queue)}`}>{q.queue}</TableLink>,
+                <span class="tabular-nums">{q.pending}</span>,
+                <span class="tabular-nums">{q.acked}</span>,
+                <span class="tabular-nums">{q.failed}</span>,
+              ])}
+            />
+          )}
+        </div>
+        <ServiceInfo
+          description="Message queues for asynchronous task processing."
+          stats={[
+            { label: "Pending", value: totalPending.toLocaleString() },
+            { label: "Processed", value: totalAcked.toLocaleString() },
+            { label: "Failed", value: totalFailed.toLocaleString() },
+            { label: "Queues", value: queues?.length ?? 0 },
+          ]}
+          configGroups={configGroups}
+          links={[
+            { label: "Documentation", href: "https://developers.cloudflare.com/queues/" },
+            { label: "API Reference", href: "https://developers.cloudflare.com/api/resources/queues/" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+function PublishForm({ queue, onPublished }: { queue: string; onPublished: () => void }) {
+  const [open, setOpen] = useState(false);
+  const [body, setBody] = useState("");
+  const [contentType, setContentType] = useState("json");
+  const [error, setError] = useState("");
+  const publish = useMutation("queue.publishMessage");
+
+  const handleSubmit = async () => {
+    setError("");
+    const result = await publish.mutate({ queue, body, contentType });
+    if (result) {
+      setBody("");
+      setOpen(false);
+      onPublished();
+    } else if (publish.error) {
+      setError(publish.error.message);
+    }
+  };
+
+  if (!open) {
+    return (
+      <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"
+      >
+        Publish message
+      </button>
+    );
+  }
+
+  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">Publish message</div>
+        <button onClick={() => { setOpen(false); setError(""); }} class="text-text-muted hover:text-text-data text-xs font-medium">
+          Cancel
+        </button>
+      </div>
+      <div class="flex gap-2 mb-3">
+        {["json", "text"].map(ct => (
+          <PillButton key={ct} onClick={() => setContentType(ct)} active={contentType === ct}>
+            {ct.toUpperCase()}
+          </PillButton>
+        ))}
+      </div>
+      <textarea
+        value={body}
+        onInput={e => setBody((e.target as HTMLTextAreaElement).value)}
+        placeholder={contentType === "json" ? '{"key": "value"}' : "Message body..."}
+        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}
+      />
+      {error && <div class="text-red-500 text-xs mt-1">{error}</div>}
+      <div class="flex justify-end mt-3">
+        <button
+          onClick={handleSubmit}
+          disabled={publish.isLoading || !body.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"
+        >
+          {publish.isLoading ? "Publishing..." : "Publish"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function RequeueButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button onClick={onClick} class="text-amber-500 hover:text-amber-700 text-xs font-medium rounded-md px-2 py-1 hover:bg-amber-50 transition-all">
+      Requeue
+    </button>
+  );
+}
+
+function QueueMessages({ name }: { name: string }) {
+  const [filter, setFilter] = useState("");
+  const { data: messages, refetch } = useQuery("queue.listMessages", { queue: name, status: filter || undefined });
+  const deleteMsg = useMutation("queue.deleteMessage");
+  const requeueMsg = useMutation("queue.requeueMessage");
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Delete this message?")) return;
+    await deleteMsg.mutate({ queue: name, id });
+    refetch();
+  };
+
+  const handleRequeue = async (id: string) => {
+    await requeueMsg.mutate({ queue: name, id });
+    refetch();
+  };
+
+  return (
+    <div class="p-8">
+      <Breadcrumb items={[{ label: "Queues", href: "#/queue" }, { label: name }]} />
+      <div class="mb-6 flex gap-2 items-center justify-between">
+        <div class="flex gap-2">
+          {["", "pending", "acked", "failed"].map(s => (
+            <PillButton key={s} onClick={() => setFilter(s)} active={filter === s}>
+              {s || "All"}
+            </PillButton>
+          ))}
+        </div>
+        <div class="flex gap-2 items-center">
+          <RefreshButton onClick={refetch} />
+          <PublishForm queue={name} onPublished={refetch} />
+        </div>
+      </div>
+      {!messages?.length ? (
+        <EmptyState message="No messages found" />
+      ) : (
+        <Table
+          headers={["ID", "Body", "Status", "Attempts", "Created", "Completed", ""]}
+          rows={messages.map(m => [
+            <span class="font-mono text-xs">{m.id.slice(0, 12)}...</span>,
+            <pre class="text-xs max-w-md truncate font-mono">{m.body}</pre>,
+            <StatusBadge status={m.status} colorMap={QUEUE_STATUS_COLORS} />,
+            m.attempts,
+            formatTime(m.created_at),
+            m.completed_at ? formatTime(m.completed_at) : "—",
+            <div class="flex gap-1">
+              {m.status !== "pending" && <RequeueButton onClick={() => handleRequeue(m.id)} />}
+              <DeleteButton onClick={() => handleDelete(m.id)} />
+            </div>,
+          ])}
+        />
+      )}
+    </div>
+  );
+}

package/runtime/dashboard/views/r2.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef } from "preact/hooks";
+import { formatBytes } from "../lib";
+import { useQuery, usePaginatedQuery, useMutation } from "../rpc/hooks";
+import { EmptyState, Breadcrumb, Table, PageHeader, FilterInput, LoadMoreButton, DeleteButton, TableLink, ServiceInfo, RefreshButton } from "../components";
+
+export function R2View({ route }: { route: string }) {
+  const parts = route.split("/").filter(Boolean);
+  if (parts.length === 1) return <R2BucketList />;
+  if (parts.length >= 2) return <R2ObjectList bucket={decodeURIComponent(parts[1]!)} />;
+  return null;
+}
+
+function R2BucketList() {
+  const { data: buckets, refetch } = useQuery("r2.listBuckets");
+  const { data: configGroups } = useQuery("config.forService", { type: "r2" });
+
+  const totalObjects = buckets?.reduce((s, b) => s + b.count, 0) ?? 0;
+  const totalSize = buckets?.reduce((s, b) => s + b.total_size, 0) ?? 0;
+
+  return (
+    <div class="p-8 max-w-6xl">
+      <PageHeader title="R2 Buckets" subtitle={`${buckets?.length ?? 0} bucket(s)`} actions={<RefreshButton onClick={refetch} />} />
+      <div class="flex gap-6 items-start">
+        <div class="flex-1 min-w-0">
+          {!buckets?.length ? (
+            <EmptyState message="No R2 buckets found" />
+          ) : (
+            <Table
+              headers={["Bucket", "Objects", "Total Size"]}
+              rows={buckets.map(b => [
+                <TableLink href={`#/r2/${encodeURIComponent(b.bucket)}`}>{b.bucket}</TableLink>,
+                <span class="tabular-nums">{b.count}</span>,
+                formatBytes(b.total_size),
+              ])}
+            />
+          )}
+        </div>
+        <ServiceInfo
+          description="Object storage with S3-compatible API. Zero egress fees."
+          stats={[
+            { label: "Buckets", value: buckets?.length ?? 0 },
+            { label: "Objects", value: totalObjects.toLocaleString() },
+            { label: "Storage", value: formatBytes(totalSize) },
+          ]}
+          configGroups={configGroups}
+          links={[
+            { label: "Documentation", href: "https://developers.cloudflare.com/r2/" },
+            { label: "API Reference", href: "https://developers.cloudflare.com/api/resources/r2/" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+function UploadForm({ bucket, onUploaded }: { bucket: string; onUploaded: () => void }) {
+  const [open, setOpen] = useState(false);
+  const [key, setKey] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [error, setError] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const selected = input.files?.[0] ?? null;
+    setFile(selected);
+    if (selected && !key) setKey(selected.name);
+  };
+
+  const handleSubmit = async () => {
+    if (!file || !key.trim()) return;
+    setError("");
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("bucket", bucket);
+      formData.append("key", key.trim());
+      formData.append("file", file);
+      const res = await fetch("/__dashboard/api/r2/upload", { method: "POST", body: formData });
+      const data = await res.json() as { error?: string };
+      if (!res.ok) throw new Error(data.error ?? "Upload failed");
+      setKey("");
+      setFile(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      setOpen(false);
+      onUploaded();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  if (!open) {
+    return (
+      <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"
+      >
+        Upload object
+      </button>
+    );
+  }
+
+  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">Upload object</div>
+        <button onClick={() => { setOpen(false); setError(""); }} class="text-text-muted hover:text-text-data text-xs font-medium">
+          Cancel
+        </button>
+      </div>
+      <div class="space-y-3">
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={handleFileChange}
+          class="w-full text-sm text-text-secondary file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-panel-hover file:text-ink hover:file:bg-panel-active file:cursor-pointer file:transition-all"
+        />
+        <input
+          type="text"
+          value={key}
+          onInput={e => setKey((e.target as HTMLInputElement).value)}
+          placeholder="Object key (defaults to filename)"
+          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>
+      {error && <div class="text-red-500 text-xs mt-2">{error}</div>}
+      <div class="flex justify-end mt-3">
+        <button
+          onClick={handleSubmit}
+          disabled={uploading || !file || !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"
+        >
+          {uploading ? "Uploading..." : "Upload"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function R2ObjectList({ bucket }: { bucket: string }) {
+  const [prefix, setPrefix] = useState("");
+  const { items: objects, hasMore, loadMore, refetch } = usePaginatedQuery("r2.listObjects", { bucket, prefix });
+  const deleteObject = useMutation("r2.deleteObject");
+  const renameObject = useMutation("r2.renameObject");
+
+  const handleDelete = async (key: string) => {
+    if (!confirm(`Delete object "${key}"?`)) return;
+    await deleteObject.mutate({ bucket, key });
+    refetch();
+  };
+
+  const handleRename = async (oldKey: string) => {
+    const newKey = prompt("New key:", oldKey);
+    if (!newKey || newKey === oldKey) return;
+    await renameObject.mutate({ bucket, oldKey, newKey });
+    refetch();
+  };
+
+  return (
+    <div class="p-8">
+      <Breadcrumb items={[{ label: "R2", href: "#/r2" }, { label: bucket }]} />
+      <div class="mb-6 flex gap-2 items-center justify-between">
+        <FilterInput value={prefix} onInput={setPrefix} placeholder="Filter by prefix..." />
+        <div class="flex gap-2 items-center">
+          <RefreshButton onClick={refetch} />
+          <UploadForm bucket={bucket} onUploaded={refetch} />
+        </div>
+      </div>
+      {objects.length === 0 ? (
+        <EmptyState message="No objects found" />
+      ) : (
+        <>
+          <Table
+            headers={["Key", "Size", "ETag", "Uploaded", ""]}
+            rows={objects.map(o => [
+              <span class="font-mono text-xs font-medium">{o.key}</span>,
+              formatBytes(o.size),
+              <span class="font-mono text-xs text-text-muted">{o.etag.slice(0, 12)}</span>,
+              o.uploaded,
+              <div class="flex gap-1">
+                <a
+                  href={`/__dashboard/api/r2/download?bucket=${encodeURIComponent(bucket)}&key=${encodeURIComponent(o.key)}`}
+                  class="text-blue-500 hover:text-blue-700 text-xs font-medium rounded-md px-2 py-1 hover:bg-blue-50 transition-all"
+                >
+                  Download
+                </a>
+                <button onClick={() => handleRename(o.key)} class="text-text-secondary hover:text-ink text-xs font-medium rounded-md px-2 py-1 hover:bg-panel-hover transition-all">
+                  Rename
+                </button>
+                <DeleteButton onClick={() => handleDelete(o.key)} />
+              </div>,
+            ])}
+          />
+          {hasMore && <LoadMoreButton onClick={loadMore} />}
+        </>
+      )}
+    </div>
+  );
+}

package/runtime/dashboard/views/scheduled.tsx

@@ -0,0 +1,89 @@
+import { useState } from "preact/hooks";
+import { useQuery, useMutation } from "../rpc/hooks";
+import { PageHeader, Table, EmptyState, ServiceInfo, RefreshButton } from "../components";
+
+export function ScheduledView({ route }: { route: string }) {
+  return <ScheduledList />;
+}
+
+function ScheduledList() {
+  const { data: triggers, refetch } = useQuery("scheduled.listTriggers");
+  const { data: configGroups } = useQuery("config.forService", { type: "scheduled" });
+  const runNow = useMutation("scheduled.trigger");
+  const [runningCron, setRunningCron] = useState<string | null>(null);
+  const [lastResult, setLastResult] = useState<{ cron: string; ok: boolean; error?: string } | null>(null);
+
+  const handleRun = async (cron: string, workerName: string | null) => {
+    setRunningCron(cron);
+    setLastResult(null);
+    const result = await runNow.mutate({ cron, workerName });
+    setRunningCron(null);
+    if (result) {
+      setLastResult({ cron, ok: true });
+    } else if (runNow.error) {
+      setLastResult({ cron, ok: false, error: runNow.error.message });
+    }
+  };
+
+  return (
+    <div class="p-8 max-w-6xl">
+      <PageHeader title="Scheduled" subtitle={`${triggers?.length ?? 0} cron trigger(s)`} actions={<RefreshButton onClick={refetch} />} />
+
+      {lastResult && (
+        <div class={`mb-6 px-4 py-3 rounded-lg text-sm font-medium ${
+          lastResult.ok
+            ? "bg-emerald-50 text-emerald-700"
+            : "bg-red-50 text-red-600"
+        }`}>
+          {lastResult.ok
+            ? `Triggered "${lastResult.cron}" successfully`
+            : `Failed to trigger "${lastResult.cron}": ${lastResult.error}`}
+        </div>
+      )}
+
+      <div class="flex gap-6 items-start">
+        <div class="flex-1 min-w-0">
+          {!triggers?.length ? (
+            <EmptyState message="No scheduled triggers configured" />
+          ) : (
+            <Table
+              headers={["Cron Expression", "Schedule", ...(triggers.some(t => t.workerName) ? ["Worker"] : []), ""]}
+              rows={triggers.map(t => {
+                const row = [
+                  <span class="font-mono text-xs font-medium">{t.expression}</span>,
+                  <span class="text-sm text-text-secondary">{t.description}</span>,
+                ];
+                if (triggers.some(t => t.workerName)) {
+                  row.push(
+                    <span class="text-xs text-text-muted font-mono">{t.workerName ?? "main"}</span>,
+                  );
+                }
+                row.push(
+                  <button
+                    onClick={() => handleRun(t.expression, t.workerName)}
+                    disabled={runningCron === t.expression}
+                    class="rounded-md px-3 py-1.5 text-xs font-medium bg-ink text-surface hover:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+                  >
+                    {runningCron === t.expression ? "Running..." : "Trigger"}
+                  </button>,
+                );
+                return row;
+              })}
+            />
+          )}
+        </div>
+        <ServiceInfo
+          description="Cron-based scheduled triggers. Each expression defines when the worker's scheduled handler is invoked."
+          stats={[
+            { label: "Triggers", value: triggers?.length ?? 0 },
+          ]}
+          configGroups={configGroups}
+          links={[
+            { label: "Cron Triggers", href: "https://developers.cloudflare.com/workers/configuration/cron-triggers/" },
+            { label: "Crontab Guru", href: "https://crontab.guru/" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}