@ventually/ui 0.0.0

package/src/dashboard.tsx

@@ -0,0 +1,835 @@
+import "./index.css";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+import { useEventuallyUI } from "./context.js";
+import type { EventuallyUIJob, EventuallyUIJobState } from "./types.js";
+
+const LIVE_EVENTS_MIN_HEIGHT = 144;
+const LIVE_EVENTS_MAX_HEIGHT = 480;
+
+function formatRelative(value: number) {
+  const delta = Math.max(0, Date.now() - value);
+  if (delta < 1_000) return `${delta}ms`;
+  if (delta < 60_000) return `${Math.floor(delta / 1_000)}s ago`;
+  return `${Math.floor(delta / 60_000)}m ago`;
+}
+
+function formatDuration(job: EventuallyUIJob) {
+  if (job.state === "delayed") {
+    const remaining = Math.max(0, job.availableAt - Date.now());
+    if (remaining < 60_000) return `in ${Math.ceil(remaining / 1_000)}s`;
+    const m = Math.floor(remaining / 60_000);
+    const s = Math.floor((remaining % 60_000) / 1_000);
+    return `in ${m}m ${s}s`;
+  }
+  if (job.finishedAt && job.processedAt)
+    return `${job.finishedAt - job.processedAt}ms`;
+  if (job.processedAt) return `${Math.max(0, Date.now() - job.processedAt)}ms`;
+  return "—";
+}
+
+const STATE_STYLES: Record<
+  EventuallyUIJobState,
+  { dot: string; badge: string; label: string }
+> = {
+  active: {
+    dot: "bg-amber-400",
+    badge: "bg-amber-400/10 text-amber-400 ring-1 ring-amber-400/25",
+    label: "active",
+  },
+  waiting: {
+    dot: "bg-blue-400",
+    badge: "bg-blue-400/10  text-blue-400  ring-1 ring-blue-400/25",
+    label: "waiting",
+  },
+  completed: {
+    dot: "bg-emerald-400",
+    badge: "bg-emerald-400/10 text-emerald-400 ring-1 ring-emerald-400/25",
+    label: "completed",
+  },
+  failed: {
+    dot: "bg-red-400",
+    badge: "bg-red-400/10   text-red-400   ring-1 ring-red-400/25",
+    label: "failed",
+  },
+  delayed: {
+    dot: "bg-violet-400",
+    badge: "bg-violet-400/10 text-violet-400 ring-1 ring-violet-400/25",
+    label: "delayed",
+  },
+  blocked: {
+    dot: "bg-violet-400",
+    badge: "bg-violet-400/10 text-violet-400 ring-1 ring-violet-400/25",
+    label: "blocked",
+  },
+};
+
+const QUEUE_ACCENT = [
+  "#f59e0b",
+  "#34d399",
+  "#60a5fa",
+  "#a78bfa",
+  "#f87171",
+  "#fb923c",
+];
+
+/* ── small reusable components ── */
+function Badge({ state }: { state: EventuallyUIJobState }) {
+  const s = STATE_STYLES[state];
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-[10px] font-mono font-medium tracking-wide ${s.badge}`}
+    >
+      <span
+        className={`w-1.5 h-1.5 rounded-full ${s.dot} ${state === "active" ? "animate-pulse" : ""}`}
+      />
+      {s.label}
+    </span>
+  );
+}
+
+function Stat({
+  label,
+  value,
+  color,
+}: {
+  label: string;
+  value: number;
+  color: string;
+}) {
+  return (
+    <div className="flex flex-col gap-1 min-w-0">
+      <span className="text-[9px] uppercase tracking-[0.12em] text-zinc-500 font-medium">
+        {label}
+      </span>
+      <span
+        className={`text-2xl font-mono font-semibold leading-none ${color}`}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+/* ── Config Modal ── */
+function ConfigModal({
+  config,
+  workerPaused,
+  queueName,
+  onClose,
+}: {
+  config: Record<string, unknown>;
+  workerPaused: boolean;
+  queueName: string;
+  onClose: () => void;
+}) {
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  const rows: [string, string][] = [
+    ["Purpose", String(config.description ?? "—")],
+    ["Concurrency", String(config.concurrency ?? "—")],
+    [
+      "Poll Interval",
+      config.pollIntervalMs != null ? `${config.pollIntervalMs}ms` : "—",
+    ],
+    ["Attempts", String(config.attempts ?? "—")],
+    ["Keep Completed", String(config.removeOnCompleteCount ?? "—")],
+    ["Keep Failed", String(config.removeOnFailCount ?? "—")],
+    ["Recurring", config.recurringEnabled ? "enabled" : "off"],
+    ["Worker", workerPaused ? "paused" : "running"],
+  ];
+
+  return (
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ background: "rgba(0,0,0,0.65)", backdropFilter: "blur(4px)" }}
+      onClick={(e) => {
+        if (e.target === backdropRef.current) onClose();
+      }}
+    >
+      <div className="w-full max-w-lg bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-800">
+          <div>
+            <p className="text-xs uppercase tracking-[0.12em] text-zinc-500 font-medium mb-0.5">
+              Configuration
+            </p>
+            <h2 className="text-sm font-mono font-semibold text-zinc-100">
+              {queueName}
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-7 h-7 flex items-center justify-center rounded text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 transition-colors"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            >
+              <path d="M1 1l12 12M13 1L1 13" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Grid */}
+        <div className="p-5 grid grid-cols-2 gap-3">
+          {rows.map(([label, value], i) => (
+            <div
+              key={label}
+              className={`${i === 0 ? "col-span-2" : ""} bg-zinc-800/50 border border-zinc-800 rounded-lg px-4 py-3`}
+            >
+              <p className="text-[9px] uppercase tracking-[0.12em] text-zinc-500 font-medium mb-1.5">
+                {label}
+              </p>
+              <p className="text-xs font-mono text-zinc-200 leading-relaxed">
+                {value}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Add Job Modal ── */
+function AddJobModal({
+  queueName,
+  onClose,
+  onSubmit,
+}: {
+  queueName: string;
+  onClose: () => void;
+  onSubmit: (payload: string) => Promise<string | null>;
+}) {
+  const [payload, setPayload] = useState("{\n  \n}");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  async function handleSubmit() {
+    setLoading(true);
+    const err = await onSubmit(payload);
+    setLoading(false);
+    if (err) setError(err);
+  }
+
+  return (
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ background: "rgba(0,0,0,0.65)", backdropFilter: "blur(4px)" }}
+      onClick={(e) => {
+        if (e.target === backdropRef.current) onClose();
+      }}
+    >
+      <div className="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-800">
+          <div>
+            <p className="text-xs uppercase tracking-[0.12em] text-zinc-500 font-medium mb-0.5">
+              Enqueue job
+            </p>
+            <h2 className="text-sm font-mono font-semibold text-zinc-100">
+              {queueName}
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-7 h-7 flex items-center justify-center rounded text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 transition-colors"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            >
+              <path d="M1 1l12 12M13 1L1 13" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="p-5 space-y-3">
+          <p className="text-xs text-zinc-500">
+            Provide a JSON payload for the new job.
+          </p>
+          <textarea
+            className="w-full h-44 resize-y bg-zinc-950 border border-zinc-800 focus:border-zinc-600 rounded-lg text-xs font-mono text-zinc-200 p-3 outline-none transition-colors"
+            value={payload}
+            onChange={(e) => {
+              setPayload(e.target.value);
+              setError(null);
+            }}
+            spellCheck={false}
+          />
+          {error && (
+            <p className="text-[11px] text-red-400 bg-red-400/8 border border-red-400/20 rounded-lg px-3 py-2">
+              {error}
+            </p>
+          )}
+          <div className="flex justify-end gap-2 pt-1">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-1.5 rounded text-xs font-mono text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 border border-zinc-800 hover:border-zinc-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() => void handleSubmit()}
+              disabled={loading}
+              className="px-4 py-1.5 rounded text-xs font-mono font-medium bg-zinc-100 text-zinc-900 hover:bg-white disabled:opacity-40 transition-colors"
+            >
+              {loading ? "Running…" : "Run job"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Main Dashboard ── */
+export function EventuallyDashboard() {
+  const { error, pending, perform, snapshot, stale } = useEventuallyUI();
+
+  const [selectedQueue, setSelectedQueue] = useState<string | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(
+    typeof window !== "undefined" ? window.innerWidth >= 768 : true,
+  );
+  const [configOpen, setConfigOpen] = useState(false);
+  const [addJobOpen, setAddJobOpen] = useState(false);
+  const [liveEventsHeight, setLiveEventsHeight] = useState(220);
+  const liveEventsResizeRef = useRef<{
+    pointerId: number;
+    startY: number;
+    startHeight: number;
+  } | null>(null);
+
+  /* close sidebar by default on small screens */
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 767px)");
+    const handle = (e: MediaQueryListEvent) => setSidebarOpen(!e.matches);
+    mq.addEventListener("change", handle);
+    return () => mq.removeEventListener("change", handle);
+  }, []);
+
+  /* deselect queue if it disappears */
+  useEffect(() => {
+    if (!selectedQueue) return;
+    if (!snapshot?.queues.some((q) => q.name === selectedQueue))
+      setSelectedQueue(null);
+  }, [selectedQueue, snapshot]);
+
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      const resizeState = liveEventsResizeRef.current;
+      if (!resizeState) return;
+
+      const delta = resizeState.startY - event.clientY;
+      const maxHeight = Math.min(
+        window.innerHeight * 0.6,
+        LIVE_EVENTS_MAX_HEIGHT,
+      );
+      setLiveEventsHeight(
+        Math.round(
+          Math.max(
+            LIVE_EVENTS_MIN_HEIGHT,
+            Math.min(maxHeight, resizeState.startHeight + delta),
+          ),
+        ),
+      );
+    };
+
+    const handlePointerUp = (event: PointerEvent) => {
+      if (liveEventsResizeRef.current?.pointerId !== event.pointerId) return;
+      liveEventsResizeRef.current = null;
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+  }, []);
+
+  const queue = selectedQueue
+    ? (snapshot?.queues.find((q) => q.name === selectedQueue) ?? null)
+    : null;
+  const worker = snapshot?.workers.find((w) => w.queue === queue?.name);
+  const queueConfig = queue?.config as Record<string, unknown> | undefined;
+  const queueEvents = queue
+    ? (snapshot?.events ?? []).filter((e) => e.queue === queue.name)
+    : [];
+
+  /* throughput bars (12 slots) */
+  const bars = (() => {
+    const raw = queueEvents.slice(0, 12).map((ev, i) => {
+      const base = 30 + ((queueEvents.length - i) % 6) * 10;
+      if (ev.type === "completed") return Math.min(90, base + 22);
+      if (ev.type === "active") return Math.min(90, base + 10);
+      return Math.max(20, base);
+    });
+    while (raw.length < 12) raw.push(30 + (raw.length % 5) * 8);
+    return raw;
+  })();
+
+  async function handleAddJob(payload: string): Promise<string | null> {
+    if (!queue) return null;
+    try {
+      const parsed = JSON.parse(payload) as unknown;
+      await perform(
+        { action: "enqueue-job", queue: queue.name, payload: parsed },
+        `run ${queue.name}`,
+      );
+      setAddJobOpen(false);
+      return null;
+    } catch (err) {
+      return err instanceof Error ? err.message : "Invalid JSON payload";
+    }
+  }
+
+  function handleLiveEventsResizeStart(
+    event: ReactPointerEvent<HTMLButtonElement>,
+  ) {
+    liveEventsResizeRef.current = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      startHeight: liveEventsHeight,
+    };
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "ns-resize";
+  }
+
+  return (
+    <div className="flex h-screen bg-zinc-950 text-zinc-300 font-mono overflow-hidden">
+      {/* ── Sidebar ── */}
+      <aside
+        className={`
+          flex-shrink-0 flex flex-col border-r border-zinc-800/60 bg-zinc-950
+          transition-all duration-200 overflow-hidden
+          ${sidebarOpen ? "w-52" : "w-0 md:w-12"}
+        `}
+      >
+        {/* Queue list — hidden when collapsed on desktop */}
+        {sidebarOpen && (
+          <div
+            className={`flex flex-col flex-1 min-h-0 ${sidebarOpen ? "opacity-100" : "opacity-0 md:opacity-0 pointer-events-none"} transition-opacity duration-150`}
+          >
+            <div className="px-4 pt-4 pb-2">
+              <p className="text-[9px] uppercase tracking-[0.14em] text-zinc-600 font-medium">
+                Queues
+              </p>
+            </div>
+            <nav className="flex flex-col gap-0.5 px-2 overflow-y-auto flex-1 pb-4">
+              {(snapshot?.queues ?? []).map((item, idx) => {
+                const accent = QUEUE_ACCENT[idx % QUEUE_ACCENT.length];
+                const isActive = item.name === queue?.name;
+                return (
+                  <button
+                    key={item.name}
+                    type="button"
+                    onClick={() => {
+                      setSelectedQueue(item.name);
+                      if (window.innerWidth < 768) setSidebarOpen(false);
+                    }}
+                    className={`
+                    w-full flex items-center gap-2.5 px-3 py-2 rounded text-left text-xs transition-colors truncate
+                    ${
+                      isActive
+                        ? "bg-zinc-800 text-zinc-100"
+                        : "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-900"
+                    }
+                  `}
+                  >
+                    <span
+                      className="w-2 h-2 rounded-full flex-shrink-0"
+                      style={{ background: accent }}
+                    />
+                    <span className="truncate">{item.name}</span>
+                  </button>
+                );
+              })}
+            </nav>
+          </div>
+        )}
+
+        {/* Collapsed icon state — desktop only */}
+        {!sidebarOpen && (
+          <div className="hidden md:flex flex-col items-center gap-2 py-4 px-1">
+            {(snapshot?.queues ?? []).slice(0, 8).map((item, idx) => {
+              const accent = QUEUE_ACCENT[idx % QUEUE_ACCENT.length];
+              const isActive = item.name === queue?.name;
+              return (
+                <button
+                  key={item.name}
+                  type="button"
+                  title={item.name}
+                  onClick={() => setSelectedQueue(item.name)}
+                  className={`w-6 h-6 rounded flex items-center justify-center transition-colors ${isActive ? "bg-zinc-800" : "hover:bg-zinc-900"}`}
+                >
+                  <span
+                    className="w-2 h-2 rounded-full"
+                    style={{ background: accent }}
+                  />
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </aside>
+
+      {/* ── Main ── */}
+      <div className="flex flex-col flex-1 min-w-0 min-h-0">
+        {/* Top bar */}
+        <header className="flex items-center gap-3 px-4 py-3 border-b border-zinc-800/60 flex-shrink-0 bg-zinc-950 z-10">
+          {/* Sidebar toggle */}
+          <button
+            type="button"
+            onClick={() => setSidebarOpen((v) => !v)}
+            className="w-7 h-7 flex items-center justify-center rounded text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 transition-colors flex-shrink-0"
+            aria-label="Toggle sidebar"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            >
+              <path d="M1 2h12M1 7h12M1 12h12" />
+            </svg>
+          </button>
+
+          {queue ? (
+            <>
+              <span className="text-sm font-semibold text-zinc-100 truncate">
+                {queue.name}
+              </span>
+              <Badge state={worker?.paused ? "delayed" : "active"} />
+
+              <div className="flex items-center gap-2 ml-auto flex-shrink-0">
+                {/* Worker pause/resume */}
+                <button
+                  type="button"
+                  onClick={() =>
+                    void perform(
+                      {
+                        action: worker?.paused
+                          ? "resume-worker"
+                          : "pause-worker",
+                        queue: queue.name,
+                      },
+                      `${worker?.paused ? "resume" : "pause"} ${queue.name}`,
+                    )
+                  }
+                  className="px-3 py-1.5 rounded text-[11px] text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 border border-zinc-800 hover:border-zinc-700 transition-colors"
+                >
+                  {worker?.paused ? "Resume" : "Pause"}
+                </button>
+
+                {/* Config */}
+                {queueConfig && (
+                  <button
+                    type="button"
+                    onClick={() => setConfigOpen(true)}
+                    className="px-3 py-1.5 rounded text-[11px] text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 border border-zinc-800 hover:border-zinc-700 transition-colors"
+                  >
+                    Config
+                  </button>
+                )}
+
+                {/* Add job */}
+                <button
+                  type="button"
+                  onClick={() => setAddJobOpen(true)}
+                  className="px-3 py-1.5 rounded text-[11px] text-zinc-100 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 transition-colors font-medium"
+                >
+                  + Add job
+                </button>
+              </div>
+
+              {/* Status string */}
+              <span className="hidden lg:block text-[10px] text-zinc-600 flex-shrink-0">
+                {pending ? `${pending} pending · ` : ""}
+                {queue.jobs.length} jobs · {queueEvents.length} events
+                {stale ? " · offline" : ""}
+              </span>
+            </>
+          ) : (
+            <span className="text-sm text-zinc-600">Select a queue</span>
+          )}
+        </header>
+
+        {/* Content */}
+        <main className="flex-1 overflow-hidden min-h-0">
+          {queue ? (
+            <div className="flex h-full min-h-0 flex-col">
+              {/* ── Stats row ── */}
+              <div className="grid grid-cols-5 border-b border-zinc-800/60 divide-x divide-zinc-800/60">
+                <div className="px-5 py-5">
+                  <Stat
+                    label="Waiting"
+                    value={queue.counts.waiting}
+                    color="text-blue-400"
+                  />
+                </div>
+                <div className="px-5 py-5">
+                  <Stat
+                    label="Active"
+                    value={queue.counts.active}
+                    color="text-amber-400"
+                  />
+                </div>
+                <div className="px-5 py-5">
+                  <Stat
+                    label="Completed"
+                    value={queue.counts.completed}
+                    color="text-emerald-400"
+                  />
+                </div>
+                <div className="px-5 py-5">
+                  <Stat
+                    label="Failed"
+                    value={queue.counts.failed}
+                    color="text-red-400"
+                  />
+                </div>
+                <div className="px-5 py-5">
+                  <Stat
+                    label="Delayed"
+                    value={queue.counts.delayed}
+                    color="text-violet-400"
+                  />
+                </div>
+              </div>
+
+              {/* ── Throughput chart ── */}
+              <div className="px-5 pt-5 pb-4 border-b border-zinc-800/60">
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-[9px] uppercase tracking-[0.14em] text-zinc-600 font-medium">
+                    Throughput · last 12 min
+                  </span>
+                  <span className="text-[10px] text-zinc-500">
+                    avg {Math.max(1, Math.round(queueEvents.length / 3))}{" "}
+                    jobs/min
+                  </span>
+                </div>
+                <div className="flex items-end gap-1 h-12">
+                  {bars.map((h, i) => (
+                    <div
+                      key={i}
+                      className="flex-1 bg-zinc-700 rounded-sm"
+                      style={{
+                        height: `${h}%`,
+                        opacity: 0.5 + (i / bars.length) * 0.5,
+                      }}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {/* ── Jobs table ── */}
+              <div className="flex flex-1 min-h-0 flex-col px-0">
+                <div className="flex flex-shrink-0 items-center px-5 py-3 border-b border-zinc-800/60">
+                  <span className="text-[9px] uppercase tracking-[0.14em] text-zinc-600 font-medium">
+                    Jobs · {queue.jobs.length}
+                  </span>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-auto">
+                  <table className="w-full text-xs">
+                    <thead>
+                      <tr className="border-b border-zinc-800/60">
+                        {[
+                          "ID",
+                          "Name",
+                          "Status",
+                          "Attempts",
+                          "Age",
+                          "Duration",
+                        ].map((h) => (
+                          <th
+                            key={h}
+                            className="px-5 py-2.5 text-left text-[9px] uppercase tracking-[0.14em] text-zinc-600 font-medium whitespace-nowrap"
+                          >
+                            {h}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-zinc-800/40">
+                      {queue.jobs
+                        .slice()
+                        .sort((a, b) => b.createdAt - a.createdAt)
+                        .slice(0, 10)
+                        .map((job) => (
+                          <tr
+                            key={job.id}
+                            className="group hover:bg-zinc-900/50 transition-colors"
+                          >
+                            <td className="px-5 py-3 text-zinc-600 font-mono">
+                              {job.id.slice(0, 8)}
+                            </td>
+                            <td className="px-5 py-3 text-zinc-200 font-medium">
+                              {job.name}
+                            </td>
+                            <td className="px-5 py-3">
+                              <Badge state={job.state} />
+                            </td>
+                            <td className="px-5 py-3 text-zinc-500">
+                              {job.attempt}/{job.attempts}
+                            </td>
+                            <td className="px-5 py-3 text-zinc-500 whitespace-nowrap">
+                              {formatRelative(job.createdAt)}
+                            </td>
+                            <td className="px-5 py-3 text-zinc-500 whitespace-nowrap">
+                              {formatDuration(job)}
+                            </td>
+                          </tr>
+                        ))}
+                    </tbody>
+                  </table>
+                  {queue.jobs.length === 0 && (
+                    <div className="px-5 py-10 text-center text-xs text-zinc-700">
+                      No jobs in queue
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* ── Live events ── */}
+              <div
+                className="border-t border-zinc-800/60 flex-shrink-0 min-h-0"
+                style={{ height: liveEventsHeight }}
+              >
+                <button
+                  type="button"
+                  onPointerDown={handleLiveEventsResizeStart}
+                  className="group relative flex h-3 w-full items-center justify-center touch-none"
+                  aria-label="Resize live events panel"
+                >
+                  <span className="h-px w-full bg-zinc-800/60 transition-colors group-hover:bg-zinc-700" />
+                  <span className="absolute rounded-full border border-zinc-700 bg-zinc-900 px-2 py-0.5 text-[9px] uppercase tracking-[0.14em] text-zinc-500 opacity-0 transition-opacity group-hover:opacity-100">
+                    Resize
+                  </span>
+                </button>
+
+                <div className="flex h-[calc(100%-0.75rem)] flex-col px-5 pb-4">
+                  <p className="text-[9px] uppercase tracking-[0.14em] text-zinc-600 font-medium mb-3">
+                    Live Events
+                  </p>
+                  {queueEvents.length === 0 ? (
+                    <p className="text-xs text-zinc-700">No recent events</p>
+                  ) : (
+                    <div className="flex min-h-0 flex-col gap-1 overflow-y-auto pr-1">
+                      {queueEvents.map((ev) => (
+                        <div
+                          key={ev.id}
+                          className="grid text-[11px] py-2 px-3 rounded bg-zinc-900 border border-zinc-800/60 hover:border-zinc-700 transition-colors"
+                          style={{ gridTemplateColumns: "120px 80px 1fr" }}
+                        >
+                          <span className="text-zinc-300 font-medium truncate">
+                            {ev.queue}
+                          </span>
+                          <span className="text-zinc-500 uppercase text-[9px] tracking-wider flex items-center">
+                            {ev.type}
+                          </span>
+                          <span className="text-zinc-600 truncate">
+                            {ev.detail}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            /* ── Empty state ── */
+            <div className="flex flex-col items-center justify-center h-full text-center px-8 py-16">
+              <div className="w-10 h-10 rounded-xl border border-zinc-800 flex items-center justify-center mb-5">
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 18 18"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.25"
+                  className="text-zinc-600"
+                >
+                  <rect x="2" y="2" width="14" height="14" rx="2" />
+                  <path d="M6 9h6M9 6v6" />
+                </svg>
+              </div>
+              <h3 className="text-sm font-semibold text-zinc-400 mb-2">
+                Select a queue
+              </h3>
+              <p className="text-xs text-zinc-700 max-w-xs leading-relaxed">
+                {snapshot?.queues.length
+                  ? `${snapshot.queues.length} queue${snapshot.queues.length !== 1 ? "s" : ""} available · ${snapshot.queues.reduce((n, q) => n + q.jobs.length, 0)} total jobs`
+                  : "Choose a queue from the sidebar to inspect jobs, metrics, and run payloads."}
+              </p>
+              {stale && <p className="mt-3 text-xs text-red-500/70">{error}</p>}
+            </div>
+          )}
+        </main>
+      </div>
+
+      {/* ── Modals ── */}
+      {configOpen && queueConfig && queue && (
+        <ConfigModal
+          config={queueConfig}
+          workerPaused={!!worker?.paused}
+          queueName={queue.name}
+          onClose={() => setConfigOpen(false)}
+        />
+      )}
+
+      {addJobOpen && queue && (
+        <AddJobModal
+          queueName={queue.name}
+          onClose={() => setAddJobOpen(false)}
+          onSubmit={handleAddJob}
+        />
+      )}
+    </div>
+  );
+}