@omnixal/openclaw-nats-plugin 0.2.1 → 0.2.3

package/dashboard/src/lib/PendingTable.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import * as Table from '$lib/components/ui/table';
+  import { Badge } from '$lib/components/ui/badge';
+  import { Button } from '$lib/components/ui/button';
+  import { type PendingEvent, markDelivered } from '$lib/api';
+
+  interface Props {
+    events: PendingEvent[];
+    onRefresh: () => void;
+  }
+
+  let { events, onRefresh }: Props = $props();
+
+  function relativeAge(ts: number): string {
+    const seconds = Math.floor((Date.now() - ts) / 1000);
+    if (seconds < 60) return `${seconds}s ago`;
+    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+    return `${Math.floor(seconds / 3600)}h ago`;
+  }
+
+  function priorityVariant(p: number): 'default' | 'secondary' | 'destructive' {
+    if (p >= 8) return 'destructive';
+    if (p >= 5) return 'default';
+    return 'secondary';
+  }
+
+  let ackError: string | null = $state(null);
+
+  async function ack(id: string) {
+    try {
+      ackError = null;
+      await markDelivered([id]);
+      onRefresh();
+    } catch (e: any) {
+      ackError = e.message;
+    }
+  }
+</script>
+
+{#if ackError}
+  <div class="rounded-md bg-destructive/10 p-2 text-xs text-destructive mb-2">{ackError}</div>
+{/if}
+
+{#if events.length === 0}
+  <p class="text-sm text-muted-foreground py-4">No pending events</p>
+{:else}
+  <Table.Root>
+    <Table.Header>
+      <Table.Row>
+        <Table.Head>Subject</Table.Head>
+        <Table.Head>Priority</Table.Head>
+        <Table.Head>Age</Table.Head>
+        <Table.Head class="w-16"></Table.Head>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {#each events as event}
+        <Table.Row>
+          <Table.Cell class="font-mono text-xs">{event.subject}</Table.Cell>
+          <Table.Cell>
+            <Badge variant={priorityVariant(event.priority)}>{event.priority}</Badge>
+          </Table.Cell>
+          <Table.Cell class="text-xs text-muted-foreground">
+            {relativeAge(event.createdAt)}
+          </Table.Cell>
+          <Table.Cell>
+            <Button variant="ghost" size="sm" onclick={() => ack(event.id)}>Ack</Button>
+          </Table.Cell>
+        </Table.Row>
+      {/each}
+    </Table.Body>
+  </Table.Root>
+{/if}

package/dashboard/src/lib/RoutesPanel.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import * as Card from '$lib/components/ui/card';
+  import * as Table from '$lib/components/ui/table';
+  import { Badge } from '$lib/components/ui/badge';
+  import { Button } from '$lib/components/ui/button';
+  import { type EventRoute, createRoute, deleteRoute } from '$lib/api';
+  import { relativeAge, formatDuration } from '$lib/utils';
+
+  interface Props {
+    routes: EventRoute[];
+    onRefresh: () => void;
+  }
+
+  let { routes, onRefresh }: Props = $props();
+
+  let showForm: boolean = $state(false);
+  let formPattern: string = $state('agent.events.');
+  let formTarget: string = $state('main');
+  let formPriority: number = $state(5);
+  let formError: string | null = $state(null);
+  let actionError: string | null = $state(null);
+  let loading: boolean = $state(false);
+
+  function priorityVariant(p: number): 'default' | 'secondary' | 'destructive' {
+    if (p >= 8) return 'destructive';
+    if (p >= 5) return 'default';
+    return 'secondary';
+  }
+
+  function resetForm() {
+    formPattern = 'agent.events.';
+    formTarget = 'main';
+    formPriority = 5;
+    formError = null;
+    showForm = false;
+  }
+
+  async function handleCreate() {
+    formError = null;
+    if (!formPattern.startsWith('agent.events.')) {
+      formError = 'Pattern must start with "agent.events."';
+      return;
+    }
+    try {
+      loading = true;
+      await createRoute({
+        pattern: formPattern,
+        target: formTarget || undefined,
+        priority: formPriority,
+      });
+      resetForm();
+      onRefresh();
+    } catch (e: any) {
+      formError = e.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      actionError = null;
+      loading = true;
+      await deleteRoute(id);
+      onRefresh();
+    } catch (e: any) {
+      actionError = e.message;
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<Card.Root>
+  <Card.Header class="pb-2 flex flex-row items-center justify-between">
+    <Card.Title class="text-sm font-medium">Routes</Card.Title>
+    <Button variant="outline" size="sm" onclick={() => (showForm = !showForm)}>
+      {showForm ? 'Cancel' : '+ New Route'}
+    </Button>
+  </Card.Header>
+  <Card.Content>
+    {#if actionError}
+      <div class="rounded-md bg-destructive/10 p-2 text-xs text-destructive mb-2">{actionError}</div>
+    {/if}
+
+    {#if showForm}
+      <div class="rounded-md border p-3 mb-4 space-y-3">
+        {#if formError}
+          <div class="rounded-md bg-destructive/10 p-2 text-xs text-destructive">{formError}</div>
+        {/if}
+        <div class="space-y-1">
+          <label class="text-xs text-muted-foreground" for="route-pattern">Pattern</label>
+          <input
+            id="route-pattern"
+            type="text"
+            bind:value={formPattern}
+            class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+            placeholder="agent.events.>"
+          />
+        </div>
+        <div class="grid grid-cols-2 gap-3">
+          <div class="space-y-1">
+            <label class="text-xs text-muted-foreground" for="route-target">Target</label>
+            <input
+              id="route-target"
+              type="text"
+              bind:value={formTarget}
+              class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              placeholder="main"
+            />
+          </div>
+          <div class="space-y-1">
+            <label class="text-xs text-muted-foreground" for="route-priority">Priority</label>
+            <input
+              id="route-priority"
+              type="number"
+              min="1"
+              max="10"
+              bind:value={formPriority}
+              class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+            />
+          </div>
+        </div>
+        <div class="flex gap-2">
+          <Button size="sm" onclick={handleCreate} disabled={loading}>
+            {loading ? 'Creating...' : 'Create'}
+          </Button>
+          <Button variant="ghost" size="sm" onclick={resetForm}>Cancel</Button>
+        </div>
+      </div>
+    {/if}
+
+    {#if routes.length === 0}
+      <p class="text-sm text-muted-foreground py-4">No routes configured</p>
+    {:else}
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.Head>Pattern</Table.Head>
+            <Table.Head>Target</Table.Head>
+            <Table.Head>Priority</Table.Head>
+            <Table.Head>Enabled</Table.Head>
+            <Table.Head>Deliveries</Table.Head>
+            <Table.Head>Last Delivered</Table.Head>
+            <Table.Head>Lag</Table.Head>
+            <Table.Head class="w-16"></Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {#each routes as route}
+            <Table.Row>
+              <Table.Cell class="font-mono text-xs">{route.pattern}</Table.Cell>
+              <Table.Cell>{route.target}</Table.Cell>
+              <Table.Cell>
+                <Badge variant={priorityVariant(route.priority)}>{route.priority}</Badge>
+              </Table.Cell>
+              <Table.Cell>
+                <Badge variant={route.enabled ? 'default' : 'secondary'}>
+                  {route.enabled ? 'on' : 'off'}
+                </Badge>
+              </Table.Cell>
+              <Table.Cell>{route.deliveryCount}</Table.Cell>
+              <Table.Cell class="text-xs text-muted-foreground">
+                {route.lastDeliveredAt ? relativeAge(new Date(route.lastDeliveredAt).getTime()) : '\u2014'}
+              </Table.Cell>
+              <Table.Cell class="text-xs text-muted-foreground">
+                {formatDuration(route.lagMs)}
+              </Table.Cell>
+              <Table.Cell>
+                <Button variant="ghost" size="sm" onclick={() => handleDelete(route.id)}>Delete</Button>
+              </Table.Cell>
+            </Table.Row>
+          {/each}
+        </Table.Body>
+      </Table.Root>
+    {/if}
+  </Card.Content>
+</Card.Root>

package/dashboard/src/lib/ThemeToggle.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Monitor from '@lucide/svelte/icons/monitor';
+  import Moon from '@lucide/svelte/icons/moon';
+  import Sun from '@lucide/svelte/icons/sun';
+
+  type Theme = 'system' | 'dark' | 'light';
+
+  let theme: Theme = $state('system');
+
+  const modes: { id: Theme; icon: typeof Monitor; label: string }[] = [
+    { id: 'system', icon: Monitor, label: 'System' },
+    { id: 'dark', icon: Moon, label: 'Dark' },
+    { id: 'light', icon: Sun, label: 'Light' },
+  ];
+
+  function apply(t: Theme) {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDark = t === 'dark' || (t === 'system' && prefersDark);
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+
+  function setTheme(t: Theme) {
+    theme = t;
+    localStorage.setItem('nats-theme', t);
+    apply(t);
+  }
+
+  onMount(() => {
+    const saved = localStorage.getItem('nats-theme') as Theme | null;
+    theme = saved && ['system', 'dark', 'light'].includes(saved) ? saved : 'system';
+    apply(theme);
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = () => { if (theme === 'system') apply('system'); };
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  });
+</script>
+
+<div class="flex items-center gap-0.5 rounded-lg bg-secondary p-0.5">
+  {#each modes as mode}
+    <button
+      class="inline-flex items-center justify-center rounded-md p-1.5 transition-colors
+        {theme === mode.id
+          ? 'bg-accent text-foreground shadow-sm'
+          : 'text-muted-foreground hover:text-foreground'}"
+      onclick={() => setTheme(mode.id)}
+      title={mode.label}
+    >
+      <mode.icon size={14} />
+    </button>
+  {/each}
+</div>

package/dashboard/src/lib/api.ts

@@ -0,0 +1,141 @@
+const BASE = import.meta.env.BASE_URL + 'api';
+
+async function fetchJSON<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, init);
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  const json = await res.json();
+  return json.result ?? json;
+}
+
+export interface HealthStatus {
+  nats: { connected: boolean; url: string };
+  gateway: { connected: boolean; url: string };
+  pendingCount: number;
+  uptimeSeconds: number;
+  config: {
+    streams: string[];
+    consumerName: string;
+    dedupTtlSeconds: number;
+  };
+}
+
+export interface PendingEvent {
+  id: string;
+  sessionKey: string;
+  subject: string;
+  payload: unknown;
+  priority: number;
+  createdAt: number;
+  deliveredAt: number | null;
+}
+
+export async function getHealth(): Promise<HealthStatus> {
+  return fetchJSON('/health');
+}
+
+export async function getPending(sessionKey: string): Promise<PendingEvent[]> {
+  return fetchJSON(`/pending/${encodeURIComponent(sessionKey)}`);
+}
+
+export async function markDelivered(ids: string[]): Promise<void> {
+  await fetchJSON('/pending/mark-delivered', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ids }),
+  });
+}
+
+// ── Routes ──────────────────────────────────────────────────────────
+
+export interface EventRoute {
+  id: string;
+  pattern: string;
+  target: string;
+  priority: number;
+  enabled: boolean;
+  deliveryCount: number;
+  lastDeliveredAt: string | null;
+  lastEventSubject: string | null;
+  lagMs: number | null;
+  createdAt: number;
+}
+
+export async function getRoutes(): Promise<EventRoute[]> {
+  return fetchJSON('/routes/health');
+}
+
+export async function createRoute(body: {
+  pattern: string;
+  target?: string;
+  priority?: number;
+}): Promise<EventRoute> {
+  return fetchJSON('/routes', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+}
+
+export async function deleteRoute(id: string): Promise<void> {
+  await fetchJSON(`/routes/${encodeURIComponent(id)}`, { method: 'DELETE' });
+}
+
+// ── Cron Jobs ───────────────────────────────────────────────────────
+
+export interface CronJob {
+  id: string;
+  name: string;
+  expr: string;
+  subject: string;
+  payload: unknown;
+  timezone: string;
+  enabled: boolean;
+  lastRunAt: number | null;
+  createdAt: number;
+  nextRun: string | null;
+  isRunning: boolean;
+}
+
+export async function getCronJobs(): Promise<CronJob[]> {
+  return fetchJSON('/cron');
+}
+
+export async function createCronJob(body: {
+  name: string;
+  cron: string;
+  subject: string;
+  payload?: unknown;
+  timezone?: string;
+}): Promise<CronJob> {
+  return fetchJSON('/cron', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+}
+
+export async function deleteCronJob(name: string): Promise<void> {
+  await fetchJSON(`/cron/${encodeURIComponent(name)}`, { method: 'DELETE' });
+}
+
+export async function toggleCronJob(name: string): Promise<CronJob> {
+  return fetchJSON(`/cron/${encodeURIComponent(name)}/toggle`, { method: 'PATCH' });
+}
+
+export async function runCronJobNow(name: string): Promise<void> {
+  await fetchJSON(`/cron/${encodeURIComponent(name)}/run`, { method: 'POST' });
+}
+
+// ── Metrics ─────────────────────────────────────────────────────────
+
+export interface SubjectMetric {
+  subject: string;
+  published: number;
+  consumed: number;
+  lastPublishedAt: number | null;
+  lastConsumedAt: number | null;
+}
+
+export async function getMetrics(): Promise<SubjectMetric[]> {
+  return fetchJSON('/metrics');
+}

package/dashboard/src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

package/dashboard/src/lib/components/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

package/dashboard/src/lib/components/ui/button/button.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+				destructive:
+					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+				outline:
+					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dashboard/src/lib/components/ui/button/index.ts

@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};

package/dashboard/src/lib/components/ui/card/card-action.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dashboard/src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dashboard/src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/dashboard/src/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>