@ventually/ui 0.0.0

package/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/index.ts

@@ -0,0 +1,11 @@
+export { EventuallyUIProvider, useEventuallyUI } from "./context.js";
+export { EventuallyDashboard } from "./dashboard.js";
+export type {
+  EventuallyUIAction,
+  EventuallyUIEvent,
+  EventuallyUIJob,
+  EventuallyUIJobState,
+  EventuallyUIQueueSnapshot,
+  EventuallyUISnapshot,
+  EventuallyUIWorker,
+} from "./shared-types.js";

package/src/runtime.ts

@@ -0,0 +1,414 @@
+import {
+  FlowProducer,
+  Queue,
+  Scheduler,
+  UnrecoverableError,
+  Worker,
+} from "@ventually/core";
+import { MemoryAdapter, type MemoryQueueSnapshot } from "@ventually/memory";
+
+import type { EventuallyUISnapshot } from "./types.js";
+
+type EmailJob = {
+  to: string;
+  subject: string;
+  html: string;
+};
+
+type EmailResult = {
+  messageId: string;
+};
+
+type ImportJob = {
+  value: string;
+};
+
+type EventEntry = EventuallyUISnapshot["events"][number];
+
+const QUEUE_CONFIG = {
+  email: {
+    description: "Transactional email delivery with retries and recurring heartbeats.",
+    concurrency: 3,
+    pollIntervalMs: 20,
+    attempts: 3,
+    removeOnCompleteCount: 30,
+    removeOnFailCount: 30,
+    recurringEnabled: true,
+  },
+  fetcher: {
+    description: "Fetches raw document content before downstream processing.",
+    concurrency: 1,
+    pollIntervalMs: 20,
+    attempts: 1,
+    removeOnCompleteCount: 0,
+    removeOnFailCount: 0,
+    recurringEnabled: false,
+  },
+  chunker: {
+    description: "Splits fetched content into smaller processing chunks.",
+    concurrency: 1,
+    pollIntervalMs: 20,
+    attempts: 1,
+    removeOnCompleteCount: 0,
+    removeOnFailCount: 0,
+    recurringEnabled: false,
+  },
+  embeddings: {
+    description: "Generates embeddings for prepared chunks.",
+    concurrency: 1,
+    pollIntervalMs: 20,
+    attempts: 1,
+    removeOnCompleteCount: 0,
+    removeOnFailCount: 0,
+    recurringEnabled: false,
+  },
+  vectorstore: {
+    description: "Persists vectors into the final storage layer.",
+    concurrency: 1,
+    pollIntervalMs: 20,
+    attempts: 1,
+    removeOnCompleteCount: 0,
+    removeOnFailCount: 0,
+    recurringEnabled: false,
+  },
+} satisfies Record<string, EventuallyUISnapshot["queues"][number]["config"]>;
+
+export class EventuallyUIRuntime {
+  private offsetMs = 0;
+  readonly adapter = new MemoryAdapter();
+  readonly events: EventEntry[] = [];
+  readonly workers = new Map<
+    string,
+    Worker<unknown, unknown, unknown> & { __paused?: boolean }
+  >();
+  readonly scheduleHandles = new Map<string, { cancel(): void }>();
+  readonly emailQueue = new Queue<EmailJob, EmailResult>("email", {
+    adapter: this.adapter,
+    now: () => this.now(),
+    defaultJobOptions: {
+      attempts: 3,
+      removeOnComplete: { count: 30 },
+      removeOnFail: { count: 30 },
+    },
+  });
+  readonly scheduler = new Scheduler<EmailJob, EmailResult>("email", {
+    adapter: this.adapter,
+    now: () => this.now(),
+    defaultJobOptions: {
+      removeOnComplete: { count: 30 },
+      removeOnFail: { count: 30 },
+    },
+  });
+  readonly flowProducer = new FlowProducer({
+    adapter: this.adapter,
+    now: () => this.now(),
+  });
+
+  constructor() {
+    this.registerWorker(
+      "email",
+      new Worker<EmailJob, EmailResult>(
+        "email",
+        async (job) => {
+          await job.updateProgress(25);
+          await this.sleep(50);
+          if (job.data.subject.toLowerCase().includes("fail")) {
+            throw new UnrecoverableError("Simulated delivery failure");
+          }
+          await job.updateProgress(100);
+          return {
+            messageId: `msg_${job.id.slice(0, 8)}`,
+          };
+        },
+        { adapter: this.adapter, concurrency: 3, pollInterval: 20, now: () => this.now() },
+      ),
+    );
+
+    this.registerWorker(
+      "fetcher",
+      new Worker<ImportJob, { body: string }>(
+        "fetcher",
+        async (job) => {
+          await this.sleep(30);
+          return { body: `Fetched: ${job.data.value}` };
+        },
+        { adapter: this.adapter, pollInterval: 20, now: () => this.now() },
+      ),
+    );
+
+    this.registerWorker(
+      "chunker",
+      new Worker<{ body: string }, { chunks: string[] }>(
+        "chunker",
+        async (job) => {
+          await this.sleep(30);
+          return { chunks: job.data.body.split(/\s+/).filter(Boolean) };
+        },
+        { adapter: this.adapter, pollInterval: 20, now: () => this.now() },
+      ),
+    );
+
+    this.registerWorker(
+      "embeddings",
+      new Worker<{ chunks: string[] }, { vectors: number }>(
+        "embeddings",
+        async (job) => {
+          await this.sleep(40);
+          return { vectors: job.data.chunks.length || 4 };
+        },
+        { adapter: this.adapter, pollInterval: 20, now: () => this.now() },
+      ),
+    );
+
+    this.registerWorker(
+      "vectorstore",
+      new Worker<{ vectors: number }, { upserted: number }>(
+        "vectorstore",
+        async (job) => {
+          await this.sleep(40);
+          return { upserted: job.data.vectors || 4 };
+        },
+        { adapter: this.adapter, pollInterval: 20, now: () => this.now() },
+      ),
+    );
+  }
+
+  start(): void {
+    for (const worker of this.workers.values()) {
+      void worker.run();
+    }
+  }
+
+  snapshot(): EventuallyUISnapshot {
+    const queues = this.adapter.getAllQueuesSnapshot().map((queue) =>
+      this.toQueueSnapshot(queue),
+    );
+
+    return {
+      now: this.now(),
+      queues,
+      events: this.events.slice(-80).reverse(),
+      workers: [...this.workers.entries()].map(([queue, worker]) => ({
+        queue,
+        paused: worker.__paused ?? false,
+      })),
+    };
+  }
+
+  async enqueueEmail(kind: "welcome" | "digest" | "failure"): Promise<void> {
+    const subjectMap = {
+      welcome: "Welcome aboard",
+      digest: "Daily digest",
+      failure: "Fail this message",
+    } as const;
+
+    await this.emailQueue.add(
+      kind,
+      {
+        to: "alice@example.com",
+        subject: subjectMap[kind],
+        html: `<p>${subjectMap[kind]}</p>`,
+      },
+      {
+        priority: kind === "welcome" ? 10 : 3,
+        delay: kind === "digest" ? "5s" : 0,
+      },
+    );
+  }
+
+  async enqueueFlow(): Promise<void> {
+    await this.flowProducer.add({
+      name: "upsert-vectors",
+      queueName: "vectorstore",
+      data: { vectors: 0 },
+      children: [
+        {
+          name: "embed-chunks",
+          queueName: "embeddings",
+          data: { chunks: [] },
+          children: [
+            {
+              name: "chunk-document",
+              queueName: "chunker",
+              data: { body: "" },
+              children: [
+                {
+                  name: "fetch-document",
+                  queueName: "fetcher",
+                  data: { value: "https://example.com/doc.pdf" },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  }
+
+  createRecurringEmail(): string {
+    const handle = this.scheduler.every(
+      "heartbeat",
+      {
+        to: "ops@example.com",
+        subject: "Heartbeat",
+        html: "<p>System pulse</p>",
+      },
+      "15s",
+      { jitter: "2s" },
+    );
+    this.scheduleHandles.set(handle.id, handle);
+    this.pushEvent({
+      queue: "email",
+      type: "scheduled",
+      jobId: handle.id,
+      name: "heartbeat",
+      detail: "Recurring email schedule started",
+    });
+    return handle.id;
+  }
+
+  cancelSchedule(id: string): void {
+    this.scheduleHandles.get(id)?.cancel();
+    this.scheduleHandles.delete(id);
+  }
+
+  pauseWorker(queue: string): void {
+    const worker = this.workers.get(queue);
+    if (!worker) {
+      return;
+    }
+    worker.pause();
+    worker.__paused = true;
+  }
+
+  resumeWorker(queue: string): void {
+    const worker = this.workers.get(queue);
+    if (!worker) {
+      return;
+    }
+    worker.resume();
+    worker.__paused = false;
+  }
+
+  advanceTime(ms: number): void {
+    this.offsetMs += ms;
+    this.adapter.advanceTime(ms);
+  }
+
+  private toQueueSnapshot(queue: MemoryQueueSnapshot) {
+    const config =
+      QUEUE_CONFIG[queue.name as keyof typeof QUEUE_CONFIG] ?? {
+        description: "Queue configuration is not available.",
+        concurrency: 1,
+        pollIntervalMs: 20,
+        attempts: 1,
+        removeOnCompleteCount: 0,
+        removeOnFailCount: 0,
+        recurringEnabled: false,
+      };
+
+    return {
+      name: queue.name,
+      config,
+      counts: queue.counts,
+      jobs: queue.jobs.map((job) => ({
+        id: job.id,
+        name: job.name,
+        state: job.state,
+        attempt: job.attempt,
+        attempts: job.attempts,
+        createdAt: job.createdAt,
+        processedAt: job.processedAt,
+        finishedAt: job.finishedAt,
+        availableAt: job.availableAt,
+        failedReason: job.failedReason,
+      })),
+    };
+  }
+
+  private registerWorker<TData, TResult>(
+    queue: string,
+    worker: Worker<TData, TResult>,
+  ): void {
+    worker.on("active", (job) => {
+      this.pushEvent({
+        queue,
+        type: "active",
+        jobId: job.id,
+        name: job.name,
+        detail: `attempt ${job.attempt}/${job.attempts}`,
+      });
+    });
+    worker.on("progress", (job, progress) => {
+      this.pushEvent({
+        queue,
+        type: "progress",
+        jobId: job.id,
+        name: job.name,
+        detail: JSON.stringify(progress),
+      });
+    });
+    worker.on("completed", (job, result) => {
+      this.pushEvent({
+        queue,
+        type: "completed",
+        jobId: job.id,
+        name: job.name,
+        detail: JSON.stringify(result),
+      });
+    });
+    worker.on("failed", (job, error) => {
+      this.pushEvent({
+        queue,
+        type: "failed",
+        jobId: job.id,
+        name: job.name,
+        detail: error.message,
+      });
+    });
+    worker.on("retrying", (job, error, nextRetryAt) => {
+      this.pushEvent({
+        queue,
+        type: "retrying",
+        jobId: job.id,
+        name: job.name,
+        detail: `${error.message} -> ${new Date(nextRetryAt).toLocaleTimeString()}`,
+      });
+    });
+    this.workers.set(
+      queue,
+      worker as Worker<unknown, unknown, unknown> & { __paused?: boolean },
+    );
+  }
+
+  private pushEvent(entry: Omit<EventEntry, "id" | "at">): void {
+    this.events.push({
+      ...entry,
+      id: `${entry.queue}:${entry.jobId}:${this.now()}:${this.events.length}`,
+      at: this.now(),
+    });
+
+    if (this.events.length > 200) {
+      this.events.splice(0, this.events.length - 200);
+    }
+  }
+
+  private now(): number {
+    return Date.now() + this.offsetMs;
+  }
+
+  private async sleep(ms: number): Promise<void> {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  }
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __eventuallyUIRuntime: EventuallyUIRuntime | undefined;
+}
+
+export function getEventuallyUIRuntime(): EventuallyUIRuntime {
+  globalThis.__eventuallyUIRuntime ??= new EventuallyUIRuntime();
+  globalThis.__eventuallyUIRuntime.start();
+  return globalThis.__eventuallyUIRuntime;
+}

package/src/shared-types.ts

@@ -0,0 +1,67 @@
+export type EventuallyUIJobState =
+  | "waiting"
+  | "blocked"
+  | "active"
+  | "delayed"
+  | "completed"
+  | "failed";
+
+export interface EventuallyUIJob {
+  id: string;
+  name: string;
+  state: EventuallyUIJobState;
+  attempt: number;
+  attempts: number;
+  createdAt: number;
+  processedAt: number | null;
+  finishedAt: number | null;
+  availableAt: number;
+  failedReason: string | null;
+}
+
+export interface EventuallyUIQueueSnapshot {
+  name: string;
+  config: {
+    description: string;
+    concurrency: number;
+    pollIntervalMs: number;
+    attempts: number;
+    removeOnCompleteCount: number;
+    removeOnFailCount: number;
+    recurringEnabled: boolean;
+  };
+  counts: Record<EventuallyUIJobState, number>;
+  jobs: EventuallyUIJob[];
+}
+
+export interface EventuallyUIEvent {
+  id: string;
+  queue: string;
+  type: string;
+  jobId: string;
+  name: string;
+  at: number;
+  detail: string;
+}
+
+export interface EventuallyUIWorker {
+  queue: string;
+  paused: boolean;
+}
+
+export interface EventuallyUISnapshot {
+  now: number;
+  queues: EventuallyUIQueueSnapshot[];
+  events: EventuallyUIEvent[];
+  workers: EventuallyUIWorker[];
+}
+
+export type EventuallyUIAction =
+  | { action: "enqueue-job"; queue: string; payload: unknown }
+  | { action: "enqueue-email"; kind: "welcome" | "digest" | "failure" }
+  | { action: "enqueue-flow" }
+  | { action: "schedule-heartbeat" }
+  | { action: "cancel-schedule"; id: string }
+  | { action: "pause-worker"; queue: string }
+  | { action: "resume-worker"; queue: string }
+  | { action: "advance-time"; ms: number };

package/src/standalone/App.tsx

@@ -0,0 +1,31 @@
+import { EventuallyDashboard, EventuallyUIProvider } from "../index.js";
+import "../../dist/index.css"
+
+declare global {
+  interface Window {
+    __EVENTUALLY_UI_ENDPOINT__?: string;
+  }
+}
+
+const DEFAULT_ENDPOINT = "/api/playground";
+
+export function App() {
+  const endpoint =
+    typeof window !== "undefined"
+      ? (window.__EVENTUALLY_UI_ENDPOINT__ ?? DEFAULT_ENDPOINT)
+      : DEFAULT_ENDPOINT;
+
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        background:
+          "radial-gradient(circle at top, rgba(245, 158, 11, 0.1), transparent 24%), linear-gradient(180deg, #090a0d 0%, #0b0b0f 100%)",
+      }}
+    >
+      <EventuallyUIProvider endpoint={endpoint}>
+        <EventuallyDashboard />
+      </EventuallyUIProvider>
+    </div>
+  );
+}

package/src/standalone/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@ventually/ui</title>
+  </head>
+  <body style="margin:0">
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+  </html>

package/src/standalone/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import { App } from "./App.js";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/types.ts

@@ -0,0 +1,9 @@
+export type {
+  EventuallyUIAction,
+  EventuallyUIEvent,
+  EventuallyUIJob,
+  EventuallyUIJobState,
+  EventuallyUIQueueSnapshot,
+  EventuallyUISnapshot,
+  EventuallyUIWorker,
+} from "./shared-types.js";