@omnixal/openclaw-nats-plugin 0.2.4 → 0.2.5

package/dashboard/src/lib/RoutesPanel.svelte

@@ -3,8 +3,10 @@
   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';
+  import { Modal } from '$lib/components/ui/modal';
+  import LogsPanel from '$lib/LogsPanel.svelte';
+  import { type EventRoute, createRoute, deleteRoute, updateRoute } from '$lib/api';
+  import { relativeAge, formatDuration, isValidAgentSubject } from '$lib/utils';
 
   interface Props {
     routes: EventRoute[];
@@ -13,6 +15,7 @@
 
   let { routes, onRefresh }: Props = $props();
 
+  // Create form state
   let showForm: boolean = $state(false);
   let formPattern: string = $state('agent.events.');
   let formTarget: string = $state('main');
@@ -21,6 +24,15 @@
   let actionError: string | null = $state(null);
   let loading: boolean = $state(false);
 
+  // Modal state
+  let selectedRoute: EventRoute | null = $state(null);
+  let activeTab: 'details' | 'logs' = $state('details');
+  let editTarget: string = $state('');
+  let editPriority: number = $state(5);
+  let editEnabled: boolean = $state(true);
+  let editError: string | null = $state(null);
+  let showDeleteConfirm: boolean = $state(false);
+
   function priorityVariant(p: number): 'default' | 'secondary' | 'destructive' {
     if (p >= 8) return 'destructive';
     if (p >= 5) return 'default';
@@ -37,8 +49,8 @@
 
   async function handleCreate() {
     formError = null;
-    if (!formPattern.startsWith('agent.events.')) {
-      formError = 'Pattern must start with "agent.events."';
+    if (!isValidAgentSubject(formPattern)) {
+      formError = 'Pattern must start with "agent.events." followed by at least one token and must not end with "."';
       return;
     }
     try {
@@ -57,20 +69,156 @@
     }
   }
 
-  async function handleDelete(id: string) {
+  function openRouteModal(route: EventRoute) {
+    selectedRoute = route;
+    activeTab = 'details';
+    editTarget = route.target;
+    editPriority = route.priority;
+    editEnabled = route.enabled;
+    editError = null;
+    showDeleteConfirm = false;
+  }
+
+  function closeModal() {
+    selectedRoute = null;
+    editError = null;
+    showDeleteConfirm = false;
+  }
+
+  async function handleSave() {
+    if (!selectedRoute) return;
+    try {
+      editError = null;
+      loading = true;
+      await updateRoute(selectedRoute.id, {
+        target: editTarget,
+        priority: editPriority,
+        enabled: editEnabled,
+      });
+      closeModal();
+      onRefresh();
+    } catch (e: any) {
+      editError = e.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleDelete() {
+    if (!selectedRoute) return;
     try {
-      actionError = null;
+      editError = null;
       loading = true;
-      await deleteRoute(id);
+      await deleteRoute(selectedRoute.id);
+      closeModal();
       onRefresh();
     } catch (e: any) {
-      actionError = e.message;
+      editError = e.message;
     } finally {
       loading = false;
     }
   }
 </script>
 
+{#if selectedRoute}
+  <Modal
+    open={true}
+    title="Route: {selectedRoute.pattern}"
+    onClose={closeModal}
+  >
+    {#snippet children()}
+      <!-- Tabs -->
+      <div class="flex gap-1 border-b mb-4">
+        <button
+          class="px-3 py-1.5 text-sm font-medium border-b-2 transition-colors {activeTab === 'details' ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}"
+          onclick={() => (activeTab = 'details')}
+        >Details</button>
+        <button
+          class="px-3 py-1.5 text-sm font-medium border-b-2 transition-colors {activeTab === 'logs' ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}"
+          onclick={() => (activeTab = 'logs')}
+        >Logs</button>
+      </div>
+
+      {#if activeTab === 'details'}
+        {#if editError}
+          <div class="rounded-md bg-destructive/10 p-2 text-xs text-destructive mb-3">{editError}</div>
+        {/if}
+
+        {#if showDeleteConfirm}
+          <div class="rounded-md border border-destructive/50 bg-destructive/5 p-4 space-y-3">
+            <p class="text-sm">Are you sure you want to delete route <span class="font-mono font-semibold">{selectedRoute.pattern}</span>?</p>
+            <p class="text-xs text-muted-foreground">This action cannot be undone.</p>
+            <div class="flex gap-2">
+              <Button variant="destructive" size="sm" onclick={handleDelete} disabled={loading}>
+                {loading ? 'Deleting...' : 'Confirm Delete'}
+              </Button>
+              <Button variant="outline" size="sm" onclick={() => (showDeleteConfirm = false)}>Cancel</Button>
+            </div>
+          </div>
+        {:else}
+          <div class="space-y-3">
+            <div class="space-y-1">
+              <label class="text-xs text-muted-foreground" for="edit-target">Target</label>
+              <input
+                id="edit-target"
+                type="text"
+                bind:value={editTarget}
+                class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              />
+            </div>
+            <div class="grid grid-cols-2 gap-3">
+              <div class="space-y-1">
+                <label class="text-xs text-muted-foreground" for="edit-priority">Priority</label>
+                <input
+                  id="edit-priority"
+                  type="number"
+                  min="1"
+                  max="10"
+                  bind:value={editPriority}
+                  class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+                />
+              </div>
+              <div class="space-y-1">
+                <label for="edit-enabled" class="text-xs text-muted-foreground">Enabled</label>
+                <div class="flex items-center gap-2 pt-1">
+                  <input id="edit-enabled" type="checkbox" bind:checked={editEnabled} />
+                  <label for="edit-enabled" class="text-sm">{editEnabled ? 'Active' : 'Disabled'}</label>
+                </div>
+              </div>
+            </div>
+
+            <div class="text-xs text-muted-foreground pt-2 space-y-1">
+              <div>Deliveries: <span class="font-medium text-foreground">{selectedRoute.deliveryCount}</span></div>
+              <div>Last delivered: <span class="font-medium text-foreground">{selectedRoute.lastDeliveredAt ? relativeAge(new Date(selectedRoute.lastDeliveredAt).getTime()) : '\u2014'}</span></div>
+              {#if selectedRoute.lastEventSubject}
+                <div>Last subject: <span class="font-mono font-medium text-foreground">{selectedRoute.lastEventSubject}</span></div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      {:else}
+        <LogsPanel entityType="route" entityId={selectedRoute.id} />
+      {/if}
+    {/snippet}
+
+    {#snippet actions()}
+      {#if activeTab === 'details' && !showDeleteConfirm}
+        <div class="flex w-full justify-between">
+          <Button variant="ghost" size="sm" class="text-destructive" onclick={() => (showDeleteConfirm = true)}>
+            Delete
+          </Button>
+          <div class="flex gap-2">
+            <Button variant="outline" size="sm" onclick={closeModal}>Cancel</Button>
+            <Button size="sm" onclick={handleSave} disabled={loading}>
+              {loading ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        </div>
+      {/if}
+    {/snippet}
+  </Modal>
+{/if}
+
 <Card.Root>
   <Card.Header class="pb-2 flex flex-row items-center justify-between">
     <Card.Title class="text-sm font-medium">Routes</Card.Title>
@@ -143,12 +291,11 @@
             <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.Row class="cursor-pointer hover:bg-muted/50" onclick={() => openRouteModal(route)}>
               <Table.Cell class="font-mono text-xs">{route.pattern}</Table.Cell>
               <Table.Cell>{route.target}</Table.Cell>
               <Table.Cell>
@@ -166,9 +313,6 @@
               <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>

package/dashboard/src/lib/api.ts

@@ -76,6 +76,20 @@ export async function createRoute(body: {
   });
 }
 
+export interface UpdateRouteBody {
+  target?: string;
+  priority?: number;
+  enabled?: boolean;
+}
+
+export async function updateRoute(id: string, body: UpdateRouteBody): Promise<EventRoute> {
+  return fetchJSON(`/routes/${encodeURIComponent(id)}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+}
+
 export async function deleteRoute(id: string): Promise<void> {
   await fetchJSON(`/routes/${encodeURIComponent(id)}`, { method: 'DELETE' });
 }
@@ -114,6 +128,22 @@ export async function createCronJob(body: {
   });
 }
 
+export interface UpdateCronBody {
+  cron?: string;
+  subject?: string;
+  payload?: unknown;
+  timezone?: string;
+  enabled?: boolean;
+}
+
+export async function updateCronJob(name: string, body: UpdateCronBody): Promise<CronJob> {
+  return fetchJSON(`/cron/${encodeURIComponent(name)}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+}
+
 export async function deleteCronJob(name: string): Promise<void> {
   await fetchJSON(`/cron/${encodeURIComponent(name)}`, { method: 'DELETE' });
 }
@@ -139,3 +169,50 @@ export interface SubjectMetric {
 export async function getMetrics(): Promise<SubjectMetric[]> {
   return fetchJSON('/metrics');
 }
+
+// ── Execution Logs ──────────────────────────────────────────────────
+
+export interface ExecutionLog {
+  id: string;
+  entityType: string;
+  entityId: string;
+  action: string;
+  subject: string;
+  detail: string | null;
+  success: boolean;
+  createdAt: number;
+}
+
+export interface LogFilters {
+  success?: boolean;
+  action?: string;
+  subject?: string;
+}
+
+export interface LogsResult {
+  items: ExecutionLog[];
+  total: number;
+}
+
+export async function getLogs(
+  entityType: string,
+  entityId: string,
+  limit: number = 50,
+  offset: number = 0,
+  filters?: LogFilters,
+): Promise<LogsResult> {
+  const params = new URLSearchParams({
+    entityType,
+    entityId,
+    limit: String(limit),
+    offset: String(offset),
+  });
+  if (filters?.success !== undefined) params.set('success', String(filters.success));
+  if (filters?.action) params.set('action', filters.action);
+  if (filters?.subject) params.set('subject', filters.subject);
+  return fetchJSON(`/logs?${params}`);
+}
+
+export async function getRecentLogs(limit: number = 20): Promise<ExecutionLog[]> {
+  return fetchJSON(`/logs/recent?limit=${limit}`);
+}

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

@@ -0,0 +1 @@
+export { default as Modal } from './modal.svelte';

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    children: Snippet;
+    actions?: Snippet;
+  }
+
+  let {
+    open,
+    title,
+    onClose,
+    children,
+    actions,
+  }: Props = $props();
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose();
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    onkeydown={handleKeydown}
+  >
+    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <div class="fixed inset-0" onclick={onClose}></div>
+    <div class="relative z-10 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-semibold">{title}</h3>
+        <Button variant="ghost" size="icon-sm" onclick={onClose}>
+          <span class="text-lg leading-none">&times;</span>
+        </Button>
+      </div>
+      {@render children()}
+      {#if actions}
+        <div class="mt-4 flex justify-end gap-2">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dashboard/src/lib/utils.ts

@@ -27,3 +27,11 @@ export function formatDuration(ms: number | null): string {
   if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
   return `${Math.floor(seconds / 3600)}h`;
 }
+
+export function isValidAgentSubject(subject: string): boolean {
+  if (!subject.startsWith('agent.events.')) return false;
+  const rest = subject.slice('agent.events.'.length);
+  if (rest.length === 0) return false;
+  if (rest.endsWith('.')) return false;
+  return true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnixal/openclaw-nats-plugin",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "NATS JetStream event-driven plugin for OpenClaw",
   "license": "MIT",
   "type": "module",

package/sidecar/bun.lock

@@ -5,7 +5,7 @@
     "": {
       "name": "@ai-entrepreneur/nats-sidecar",
       "dependencies": {
-        "@onebun/core": "^0.2.14",
+        "@onebun/core": "^0.2.15",
         "@onebun/drizzle": "^0.2.4",
         "@onebun/envs": "^0.2.2",
         "@onebun/logger": "^0.2.1",
@@ -104,7 +104,7 @@
 
     "@nats-io/transport-node": ["@nats-io/transport-node@3.3.1", "", { "dependencies": { "@nats-io/nats-core": "3.3.1", "@nats-io/nkeys": "2.0.3", "@nats-io/nuid": "2.0.3" } }, "sha512-GBvY0VcvyQEILgy5bjpqU1GpDYmSF06bW59I7cewZuNGS9u3AoV/gf+a+3ep45T/Z+UC661atq/b7x+QV12w+Q=="],
 
-    "@onebun/core": ["@onebun/core@0.2.14", "", { "dependencies": { "@onebun/envs": "^0.2.2", "@onebun/logger": "^0.2.1", "@onebun/metrics": "^0.2.2", "@onebun/requests": "^0.2.1", "@onebun/trace": "^0.2.1", "arktype": "^2.0.0", "effect": "^3.13.10" }, "peerDependencies": { "testcontainers": ">=10.0.0" }, "optionalPeers": ["testcontainers"] }, "sha512-uClu4Oez18y6BldubdE6R/I02Brrk5eXCoxxPatgRJ9qYRM+jKSTNmeZVoqqo7ai/rMYM9lJ1WuF9d7p6/RtDA=="],
+    "@onebun/core": ["@onebun/core@0.2.15", "", { "dependencies": { "@onebun/envs": "^0.2.2", "@onebun/logger": "^0.2.1", "@onebun/metrics": "^0.2.2", "@onebun/requests": "^0.2.1", "@onebun/trace": "^0.2.1", "arktype": "^2.0.0", "effect": "^3.13.10" }, "peerDependencies": { "testcontainers": ">=10.0.0" }, "optionalPeers": ["testcontainers"] }, "sha512-oofGNjLhnG2EVErl4erxrX6u8x/FANLM/NMg5OpMA6jvdWyXsWwt5Hk6Pe11WD8EA69zV8MLC/1tiYyG/bERlQ=="],
 
     "@onebun/drizzle": ["@onebun/drizzle@0.2.4", "", { "dependencies": { "@onebun/envs": "^0.2.1", "@onebun/logger": "^0.2.1", "arktype": "^2.0.0", "drizzle-arktype": "^0.1.3", "drizzle-kit": "^0.31.6", "drizzle-orm": "^0.44.7", "effect": "^3.13.10" }, "peerDependencies": { "@onebun/core": ">=0.2.0" }, "bin": { "onebun-drizzle": "bin/drizzle-kit.ts" } }, "sha512-LbkW2hU9pTKZU/rlrHNdwhI4jYoMl+v22c3G2zc0L0aW77nW7ZCfp5YqOJYufWJbfOTSWEnNOVZQXMueYhBxsA=="],
 

package/sidecar/package.json

@@ -14,7 +14,7 @@
     "db:studio": "bunx onebun-drizzle studio",
   },
   "dependencies": {
-    "@onebun/core": "^0.2.14",
+    "@onebun/core": "^0.2.15",
     "@onebun/drizzle": "^0.2.4",
     "@onebun/envs": "^0.2.2",
     "@onebun/logger": "^0.2.1",

package/sidecar/src/app.module.ts

@@ -11,6 +11,7 @@ import { HealthModule } from './health/health.module';
 import { RouterModule } from './router/router.module';
 import { SchedulerModule } from './scheduler/scheduler.module';
 import { MetricsModule } from './metrics/metrics.module';
+import { LogModule } from './logs/log.module';
 
 const config = getConfig<AppConfig>(envSchema);
 
@@ -35,6 +36,7 @@ const config = getConfig<AppConfig>(envSchema);
     RouterModule,
     SchedulerModule,
     MetricsModule,
+    LogModule,
   ],
 })
 export class AppModule {}

package/sidecar/src/consumer/consumer.controller.ts

@@ -4,6 +4,7 @@ import { GatewayClientService } from '../gateway/gateway-client.service';
 import { PendingService } from '../pending/pending.service';
 import { RouterService } from '../router/router.service';
 import { MetricsService } from '../metrics/metrics.service';
+import { LogService } from '../logs/log.service';
 import type { NatsEventEnvelope } from '../publisher/envelope';
 
 @Controller('/consumer')
@@ -14,6 +15,7 @@ export class ConsumerController extends BaseController {
     private pendingService: PendingService,
     private routerService: RouterService,
     private metrics: MetricsService,
+    private logService: LogService,
   ) {
     super();
   }
@@ -49,18 +51,24 @@ export class ConsumerController extends BaseController {
       // Deliver to each matching target
       if (this.gatewayClient.isAlive()) {
         for (const route of routes) {
-          await this.gatewayClient.inject({
-            target: route.target,
-            message: this.formatMessage(envelope),
-            metadata: {
-              source: 'nats',
-              eventId: envelope.id,
-              subject: envelope.subject,
-              priority: (ctx.enrichments['priority'] as number) ?? envelope.meta?.priority ?? 5,
-            },
-          });
-          await this.routerService.recordDelivery(route.id, envelope.subject);
-          this.metrics.recordConsume(envelope.subject);
+          try {
+            await this.gatewayClient.inject({
+              target: route.target,
+              message: this.formatMessage(envelope),
+              metadata: {
+                source: 'nats',
+                eventId: envelope.id,
+                subject: envelope.subject,
+                priority: (ctx.enrichments['priority'] as number) ?? envelope.meta?.priority ?? 5,
+              },
+            });
+            await this.routerService.recordDelivery(route.id, envelope.subject);
+            this.metrics.recordConsume(envelope.subject);
+            await this.logService.logDelivery(route.id, envelope.subject, JSON.stringify({ eventId: envelope.id, target: route.target }));
+          } catch (routeErr) {
+            await this.logService.logError('route', route.id, envelope.subject, routeErr);
+            throw routeErr;
+          }
         }
         await message.ack();
       } else {

package/sidecar/src/consumer/consumer.module.ts

@@ -4,9 +4,10 @@ import { PreHandlersModule } from '../pre-handlers/pre-handlers.module';
 import { PendingModule } from '../pending/pending.module';
 import { RouterModule } from '../router/router.module';
 import { MetricsModule } from '../metrics/metrics.module';
+import { LogModule } from '../logs/log.module';
 
 @Module({
-  imports: [PreHandlersModule, PendingModule, RouterModule, MetricsModule],
+  imports: [PreHandlersModule, PendingModule, RouterModule, MetricsModule, LogModule],
   controllers: [ConsumerController],
 })
 export class ConsumerModule {}

package/sidecar/src/db/migrations/0005_strong_supernaut.sql

@@ -0,0 +1,13 @@
+CREATE TABLE `execution_logs` (
+	`id` text PRIMARY KEY NOT NULL,
+	`entity_type` text NOT NULL,
+	`entity_id` text NOT NULL,
+	`action` text NOT NULL,
+	`subject` text NOT NULL,
+	`detail` text,
+	`success` integer DEFAULT true NOT NULL,
+	`created_at` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE INDEX `execution_logs_entity_idx` ON `execution_logs` (`entity_type`,`entity_id`);--> statement-breakpoint
+CREATE INDEX `execution_logs_created_at_idx` ON `execution_logs` (`created_at`);