fix: relative day display (#1117)

.goreleaser.yaml

@@ -13,11 +13,13 @@ builds:
 
 dockers:
   - ids: [ catalyst ]
-    dockerfile: docker/goreleaser.Dockerfile
+    dockerfile: docker/Dockerfile
     image_templates:
       - "ghcr.io/securitybrewery/catalyst:main"
-      - "ghcr.io/securitybrewery/catalyst:latest"
+      - "{{if not .Prerelease}}ghcr.io/securitybrewery/catalyst:latest{{end}}"
       - "ghcr.io/securitybrewery/catalyst:{{.Tag}}"
+    extra_files:
+      - docker/entrypoint.sh
 
 archives:
   - format: tar.gz

Makefile

@@ -39,23 +39,37 @@ build-ui:
 	cd ui && bun install
 	cd ui && bun build-only
 
+.PHONY: build
+build: build-ui
+	@echo "Building..."
+	go build -o catalyst .
+
+
+.PHONY: build-linux
+build-linux: build-ui
+	@echo "Building..."
+	GOOS=linux GOARCH=amd64 go build -o catalyst .
+
+.PHONY: docker
+docker: build-linux
+	@echo "Building Docker image..."
+	docker build -f docker/Dockerfile -t catalyst .
+
 .PHONY: dev
 dev:
 	@echo "Running..."
 	rm -rf catalyst_data
 	go run . admin create admin@catalyst-soar.com 1234567890
-	go run . set-feature-flags dev
 	go run . fake-data
-	go run . serve
+	go run . serve --app-url http://localhost:8090 --flags dev
 
 .PHONY: dev-10000
 dev-10000:
 	@echo "Running..."
 	rm -rf catalyst_data
 	go run . admin create admin@catalyst-soar.com 1234567890
-	go run . set-feature-flags dev
 	go run . fake-data --users 100 --tickets 10000
-	go run . serve
+	go run . serve --app-url http://localhost:8090 --flags dev
 
 .PHONY: serve-ui
 serve-ui:

app/app.go

@@ -1,7 +1,6 @@
 package app
 
 import (
-	"fmt"
 	"os"
 	"strings"
 
@@ -23,47 +22,30 @@ func App(dir string, test bool) (*pocketbase.PocketBase, error) {
 		DefaultDataDir: dir,
 	})
 
+	var appURL string
+
+	app.RootCmd.PersistentFlags().StringVar(&appURL, "app-url", "", "the app's URL")
+
+	var flags []string
+
+	app.RootCmd.PersistentFlags().StringSliceVar(&flags, "flags", nil, "feature flags")
+
+	_ = app.RootCmd.ParseFlags(os.Args[1:])
+
+	app.RootCmd.AddCommand(fakeDataCmd(app))
+
 	webhook.BindHooks(app)
 	reaction.BindHooks(app, test)
 
-	app.OnBeforeServe().Add(addRoutes())
-
 	app.OnAfterBootstrap().Add(func(e *core.BootstrapEvent) error {
-		if HasFlag(e.App, "demo") {
-			bindDemoHooks(e.App)
-		}
-
-		return nil
+		return MigrateDBs(e.App)
 	})
 
-	// Register additional commands
-	app.RootCmd.AddCommand(fakeDataCmd(app))
-	app.RootCmd.AddCommand(setFeatureFlagsCmd(app))
-	app.RootCmd.AddCommand(setAppURL(app))
-
-	if err := app.Bootstrap(); err != nil {
-		return nil, err
-	}
-
-	if err := MigrateDBs(app); err != nil {
-		return nil, err
-	}
+	app.OnBeforeServe().Add(setupServer(appURL, flags))
 
 	return app, nil
 }
 
-func bindDemoHooks(app core.App) {
-	app.OnRecordBeforeCreateRequest("files", "reactions").Add(func(e *core.RecordCreateEvent) error {
-		return fmt.Errorf("cannot create %s in demo mode", e.Record.Collection().Name)
-	})
-	app.OnRecordBeforeUpdateRequest("files", "reactions").Add(func(e *core.RecordUpdateEvent) error {
-		return fmt.Errorf("cannot update %s in demo mode", e.Record.Collection().Name)
-	})
-	app.OnRecordBeforeDeleteRequest("files", "reactions").Add(func(e *core.RecordDeleteEvent) error {
-		return fmt.Errorf("cannot delete %s in demo mode", e.Record.Collection().Name)
-	})
-}
-
 func dev() bool {
 	return strings.HasPrefix(os.Args[0], os.TempDir())
 }

app/fakedata.go

@@ -12,10 +12,8 @@ func fakeDataCmd(app core.App) *cobra.Command {
 
 	cmd := &cobra.Command{
 		Use: "fake-data",
-		Run: func(_ *cobra.Command, _ []string) {
-			if err := fakedata.Generate(app, userCount, ticketCount); err != nil {
-				app.Logger().Error(err.Error())
-			}
+		RunE: func(_ *cobra.Command, _ []string) error {
+			return fakedata.Generate(app, userCount, ticketCount)
 		},
 	}
 

app/flags.go

@@ -6,7 +6,6 @@ import (
 	"github.com/pocketbase/dbx"
 	"github.com/pocketbase/pocketbase/core"
 	"github.com/pocketbase/pocketbase/models"
-	"github.com/spf13/cobra"
 
 	"github.com/SecurityBrewery/catalyst/migrations"
 )
@@ -85,40 +84,3 @@ func SetFlags(app core.App, args []string) error {
 
 	return nil
 }
-
-func setFeatureFlagsCmd(app core.App) *cobra.Command {
-	return &cobra.Command{
-		Use: "set-feature-flags",
-		Run: func(_ *cobra.Command, args []string) {
-			if err := SetFlags(app, args); err != nil {
-				app.Logger().Error(err.Error())
-			}
-		},
-	}
-}
-
-func setAppURL(app core.App) *cobra.Command {
-	return &cobra.Command{
-		Use: "set-app-url",
-		Run: func(_ *cobra.Command, args []string) {
-			if len(args) != 1 {
-				app.Logger().Error("missing app url")
-
-				return
-			}
-
-			settings, err := app.Settings().Clone()
-			if err != nil {
-				app.Logger().Error(err.Error())
-
-				return
-			}
-
-			settings.Meta.AppUrl = args[0]
-
-			if err := app.Dao().SaveSettings(settings); err != nil {
-				app.Logger().Error(err.Error())
-			}
-		},
-	}
-}

app/routes.go

@@ -1,6 +1,7 @@
 package app
 
 import (
+	"fmt"
 	"net/http"
 	"net/http/httputil"
 	"net/url"
@@ -12,12 +13,36 @@ import (
 	"github.com/SecurityBrewery/catalyst/ui"
 )
 
-func addRoutes() func(*core.ServeEvent) error {
+func setupServer(appURL string, flags []string) func(e *core.ServeEvent) error {
 	return func(e *core.ServeEvent) error {
+		if err := SetFlags(e.App, flags); err != nil {
+			return err
+		}
+
+		if HasFlag(e.App, "demo") {
+			bindDemoHooks(e.App)
+		}
+
+		if appURL != "" {
+			s := e.App.Settings()
+			s.Meta.AppUrl = appURL
+
+			if err := e.App.Dao().SaveSettings(s); err != nil {
+				return err
+			}
+		}
+
 		e.Router.GET("/", func(c echo.Context) error {
 			return c.Redirect(http.StatusFound, "/ui/")
 		})
 		e.Router.GET("/ui/*", staticFiles())
+		e.Router.GET("/health", func(c echo.Context) error {
+			if _, err := Flags(e.App); err != nil {
+				return err
+			}
+
+			return c.String(http.StatusOK, "OK")
+		})
 
 		e.Router.GET("/api/config", func(c echo.Context) error {
 			flags, err := Flags(e.App)
@@ -30,10 +55,22 @@ func addRoutes() func(*core.ServeEvent) error {
 			})
 		})
 
-		return nil
+		return e.App.RefreshSettings()
 	}
 }
 
+func bindDemoHooks(app core.App) {
+	app.OnRecordBeforeCreateRequest("files", "reactions").Add(func(e *core.RecordCreateEvent) error {
+		return fmt.Errorf("cannot create %s in demo mode", e.Record.Collection().Name)
+	})
+	app.OnRecordBeforeUpdateRequest("files", "reactions").Add(func(e *core.RecordUpdateEvent) error {
+		return fmt.Errorf("cannot update %s in demo mode", e.Record.Collection().Name)
+	})
+	app.OnRecordBeforeDeleteRequest("files", "reactions").Add(func(e *core.RecordDeleteEvent) error {
+		return fmt.Errorf("cannot delete %s in demo mode", e.Record.Collection().Name)
+	})
+}
+
 func staticFiles() func(echo.Context) error {
 	return func(c echo.Context) error {
 		if dev() {

docker/Dockerfile

@@ -1,24 +1,18 @@
-FROM oven/bun:debian
-RUN apt-get update && apt-get install -y make
-COPY .. /tmp/catalyst
-
-WORKDIR /tmp/catalyst
-
-RUN make build-ui
-
-FROM golang:1.23
-COPY --from=0 /tmp/catalyst /tmp/catalyst
-
-WORKDIR /tmp/catalyst
-
-RUN go build -o /usr/local/bin/catalyst
-
 FROM ubuntu:24.04
 
-COPY --from=1 /usr/local/bin/catalyst /usr/local/bin/catalyst
+RUN apt-get update && apt-get install -y curl python3 python3-pip python3-venv
+
+COPY catalyst /usr/local/bin/catalyst
 
 EXPOSE 8080
 
 VOLUME /usr/local/bin/catalyst_data
 
-CMD ["/usr/local/bin/catalyst", "serve", "--http", "0.0.0.0:8080"]
+HEALTHCHECK --interval=5s --timeout=3s --retries=3 \
+  CMD curl -f http://localhost:8080/health || exit 1
+
+COPY docker/entrypoint.sh /entrypoint.sh
+
+RUN chmod +x /entrypoint.sh
+
+CMD ["/entrypoint.sh"]

docker/entrypoint.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# Set the flags
+FLAGS=""
+if [ -n "$CATALYST_FLAGS" ]; then
+    FLAGS="$CATALYST_FLAGS"
+fi
+
+# Set the app url
+APP_URL=""
+if [ -n "$CATALYST_APP_URL" ]; then
+    APP_URL="$CATALYST_APP_URL"
+fi
+
+/usr/local/bin/catalyst serve --http 0.0.0.0:8080 --flags "$FLAGS" --app-url "$APP_URL"

docker/goreleaser.Dockerfile

@@ -1,9 +0,0 @@
-FROM ubuntu:24.04
-
-COPY catalyst /usr/local/bin/catalyst
-
-EXPOSE 8080
-
-VOLUME /usr/local/bin/catalyst_data
-
-CMD ["/usr/local/bin/catalyst", "serve", "--http", "0.0.0.0:8080"]

fakedata/records.go

@@ -248,6 +248,28 @@ func linkRecords(dao *daos.Dao, created time.Time, record *models.Record) []*mod
 	return records
 }
 
+const createTicketPy = `import sys
+import json
+import random
+import os
+
+from pocketbase import PocketBase
+
+# Connect to the PocketBase server
+client = PocketBase(os.environ["CATALYST_APP_URL"])
+client.auth_store.save(token=os.environ["CATALYST_TOKEN"])
+
+newtickets = client.collection("tickets").get_list(1, 200, {"filter": 'name = "New Ticket"'})
+for ticket in newtickets.items:
+	client.collection("tickets").delete(ticket.id)
+
+# Create a new ticket
+client.collection("tickets").create({
+	"name": "New Ticket",
+	"type": "alert",
+	"open": True,
+})`
+
 const alertIngestPy = `import sys
 import json
 import random
@@ -294,8 +316,9 @@ client.collection("tickets").update(ticket["record"]["id"], {
 })`
 
 const (
-	triggerWebhook = `{"token":"1234567890","path":"webhook"}`
-	triggerHook    = `{"collections":["tickets"],"events":["create"]}`
+	triggerSchedule = `{"expression":"12 * * * *"}`
+	triggerWebhook  = `{"token":"1234567890","path":"webhook"}`
+	triggerHook     = `{"collections":["tickets"],"events":["create"]}`
 )
 
 func reactionRecords(dao *daos.Dao) []*models.Record {
@@ -306,6 +329,24 @@ func reactionRecords(dao *daos.Dao) []*models.Record {
 		panic(err)
 	}
 
+	createTicketActionData, err := json.Marshal(map[string]interface{}{
+		"requirements": "pocketbase",
+		"script":       createTicketPy,
+	})
+	if err != nil {
+		panic(err)
+	}
+
+	record := models.NewRecord(collection)
+	record.SetId("w_" + security.PseudorandomString(10))
+	record.Set("name", "Create New Ticket")
+	record.Set("trigger", "schedule")
+	record.Set("triggerdata", triggerSchedule)
+	record.Set("action", "python")
+	record.Set("actiondata", string(createTicketActionData))
+
+	records = append(records, record)
+
 	alertIngestActionData, err := json.Marshal(map[string]interface{}{
 		"requirements": "pocketbase",
 		"script":       alertIngestPy,
@@ -314,7 +355,7 @@ func reactionRecords(dao *daos.Dao) []*models.Record {
 		panic(err)
 	}
 
-	record := models.NewRecord(collection)
+	record = models.NewRecord(collection)
 	record.SetId("w_" + security.PseudorandomString(10))
 	record.Set("name", "Alert Ingest Webhook")
 	record.Set("trigger", "webhook")

migrations/9_reactions_update.go

@@ -0,0 +1,28 @@
+package migrations
+
+import (
+	"fmt"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	"github.com/pocketbase/pocketbase/models/schema"
+)
+
+func reactionsUpdateUp(db dbx.Builder) error {
+	dao := daos.New(db)
+
+	triggers := []string{"webhook", "hook", "schedule"}
+
+	col, err := dao.FindCollectionByNameOrId(ReactionCollectionName)
+	if err != nil {
+		return fmt.Errorf("failed to find collection %s: %w", ReactionCollectionName, err)
+	}
+
+	field := col.Schema.GetFieldByName("trigger")
+
+	field.Options = &schema.SelectOptions{MaxSelect: 1, Values: triggers}
+
+	col.Schema.AddField(field)
+
+	return dao.SaveCollection(col)
+}

migrations/migrations.go

@@ -13,4 +13,5 @@ func Register() {
 	migrations.Register(systemuserUp, systemuserDown, "1700000006_systemuser.go")
 	migrations.Register(searchViewUp, searchViewDown, "1700000007_search_view.go")
 	migrations.Register(dashboardCountsViewUpdateUp, dashboardCountsViewUpdateDown, "1700000008_dashboardview.go")
+	migrations.Register(reactionsUpdateUp, nil, "1700000009_reactions_update.go")
 }

reaction/schedule/schedule.go

@@ -0,0 +1,101 @@
+package schedule
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"log/slog"
+	"time"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase"
+	"github.com/pocketbase/pocketbase/core"
+	"github.com/pocketbase/pocketbase/daos"
+	"github.com/pocketbase/pocketbase/models"
+	"github.com/pocketbase/pocketbase/tools/cron"
+	"go.uber.org/multierr"
+
+	"github.com/SecurityBrewery/catalyst/migrations"
+	"github.com/SecurityBrewery/catalyst/reaction/action"
+)
+
+type Schedule struct {
+	Expression string `json:"expression"`
+}
+
+func Start(pb *pocketbase.PocketBase) {
+	scheduler := cron.New()
+
+	if err := scheduler.Add("reactions", "* * * * *", func() {
+		ctx := context.Background()
+
+		moment := cron.NewMoment(time.Now())
+
+		if err := runSchedule(ctx, pb.App, moment); err != nil {
+			slog.ErrorContext(ctx, fmt.Sprintf("failed to run hook reaction: %v", err))
+		}
+	}); err != nil {
+		slog.Error(fmt.Sprintf("failed to add cron job: %v", err))
+	}
+
+	scheduler.Start()
+}
+
+func runSchedule(ctx context.Context, app core.App, moment *cron.Moment) error {
+	var errs error
+
+	records, err := findByScheduleTrigger(app.Dao(), moment)
+	if err != nil {
+		errs = multierr.Append(errs, fmt.Errorf("failed to find schedule reaction: %w", err))
+	}
+
+	if len(records) == 0 {
+		return nil
+	}
+
+	for _, hook := range records {
+		_, err = action.Run(ctx, app, hook.GetString("action"), hook.GetString("actiondata"), "{}")
+		if err != nil {
+			errs = multierr.Append(errs, fmt.Errorf("failed to run hook reaction: %w", err))
+		}
+	}
+
+	return errs
+}
+
+func findByScheduleTrigger(dao *daos.Dao, moment *cron.Moment) ([]*models.Record, error) {
+	records, err := dao.FindRecordsByExpr(migrations.ReactionCollectionName, dbx.HashExp{"trigger": "schedule"})
+	if err != nil {
+		return nil, fmt.Errorf("failed to find schedule reaction: %w", err)
+	}
+
+	if len(records) == 0 {
+		return nil, nil
+	}
+
+	var errs error
+
+	var matchedRecords []*models.Record
+
+	for _, record := range records {
+		var schedule Schedule
+		if err := json.Unmarshal([]byte(record.GetString("triggerdata")), &schedule); err != nil {
+			errs = multierr.Append(errs, err)
+
+			continue
+		}
+
+		s, err := cron.NewSchedule(schedule.Expression)
+		if err != nil {
+			errs = multierr.Append(errs, err)
+
+			continue
+		}
+
+		if s.IsDue(moment) {
+			matchedRecords = append(matchedRecords, record)
+		}
+	}
+
+	return matchedRecords, errs
+}

reaction/trigger.go

@@ -3,11 +3,13 @@ package reaction
 import (
 	"github.com/pocketbase/pocketbase"
 
+	"github.com/SecurityBrewery/catalyst/reaction/schedule"
 	"github.com/SecurityBrewery/catalyst/reaction/trigger/hook"
 	"github.com/SecurityBrewery/catalyst/reaction/trigger/webhook"
 )
 
 func BindHooks(pb *pocketbase.PocketBase, test bool) {
+	schedule.Start(pb)
 	hook.BindHooks(pb, test)
 	webhook.BindHooks(pb)
 }

testing/testapp.go

@@ -26,6 +26,10 @@ func App(t *testing.T) (*pocketbase.PocketBase, *Counter, func()) {
 		t.Fatal(err)
 	}
 
+	if err := baseApp.Bootstrap(); err != nil {
+		t.Fatal(fmt.Errorf("failed to bootstrap: %w", err))
+	}
+
 	baseApp.Settings().Logs.MaxDays = 0
 
 	defaultTestData(t, baseApp)

ui/src/components/dashboard/OpenTickets.vue

@@ -30,8 +30,14 @@ const {
   }
 })
 
-const age = (ticket: Ticket) =>
-  intervalToDuration({ start: new Date(ticket.created), end: new Date() }).days
+const age = (ticket: Ticket) => {
+  const days = intervalToDuration({ start: new Date(ticket.created), end: new Date() }).days
+
+  if (!days) return 'today'
+  if (days === 1) return 'yesterday'
+
+  return `${days} days`
+}
 </script>
 
 <template>
@@ -45,7 +51,7 @@ const age = (ticket: Ticket) =>
         <Separator orientation="vertical" class="hidden h-4 sm:block" />
         <span class="text-sm text-muted-foreground">{{ ticket.expand.type.singular }}</span>
         <Separator orientation="vertical" class="hidden h-4 sm:block" />
-        <span class="text-sm text-muted-foreground">Open since {{ age(ticket) }} days</span>
+        <span class="text-sm text-muted-foreground">Open since {{ age(ticket) }}</span>
         <RouterLink
           :to="{
             name: 'tickets',

ui/src/components/reaction/ReactionForm.vue

@@ -2,6 +2,7 @@
 import ActionPythonFormFields from '@/components/reaction/ActionPythonFormFields.vue'
 import ActionWebhookFormFields from '@/components/reaction/ActionWebhookFormFields.vue'
 import TriggerHookFormFields from '@/components/reaction/TriggerHookFormFields.vue'
+import TriggerScheduleFormFields from '@/components/reaction/TriggerScheduleFormFields.vue'
 import TriggerWebhookFormFields from '@/components/reaction/TriggerWebhookFormFields.vue'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
@@ -67,6 +68,25 @@ defineRule('required', (value: string) => {
   return true
 })
 
+defineRule('triggerdata.expression', (value: string) => {
+  if (values.trigger !== 'schedule') {
+    return true
+  }
+  if (!value) {
+    return 'This field is required'
+  }
+  const macros = ['@yearly', '@annually', '@monthly', '@weekly', '@daily', '@midnight', '@hourly']
+  if (macros.includes(value)) {
+    return true
+  }
+  const expression =
+    /^(\*|([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])|\*\/([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])) (\*|([0-9]|1[0-9]|2[0-3])|\*\/([0-9]|1[0-9]|2[0-3])) (\*|([1-9]|1[0-9]|2[0-9]|3[0-1])|\*\/([1-9]|1[0-9]|2[0-9]|3[0-1])) (\*|([1-9]|1[0-2])|\*\/([1-9]|1[0-2])) (\*|([0-6])|\*\/([0-6]))$/
+  if (value.match(expression)) {
+    return true
+  }
+  return 'Invalid cron expression'
+})
+
 defineRule('triggerdata.token', (value: string) => {
   return true
 })
@@ -160,6 +180,7 @@ const { handleSubmit, validate, values } = useForm({
   validationSchema: {
     name: 'required',
     trigger: 'required',
+    'triggerdata.expression': 'triggerdata.expression',
     'triggerdata.token': 'triggerdata.token',
     'triggerdata.path': 'triggerdata.path',
     'triggerdata.collections': 'triggerdata.collections',
@@ -263,6 +284,7 @@ const curlExample = computed(() => {
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>
+                    <SelectItem value="schedule">Schedule</SelectItem>
                     <SelectItem value="webhook">HTTP / Webhook</SelectItem>
                     <SelectItem value="hook">Collection Hook</SelectItem>
                   </SelectGroup>
@@ -277,7 +299,8 @@ const curlExample = computed(() => {
           </FormItem>
         </FormField>
 
-        <TriggerWebhookFormFields v-if="values.trigger === 'webhook'" />
+        <TriggerScheduleFormFields v-if="values.trigger === 'schedule'" />
+        <TriggerWebhookFormFields v-else-if="values.trigger === 'webhook'" />
         <TriggerHookFormFields v-else-if="values.trigger === 'hook'" />
 
         <div v-if="values.trigger === 'webhook'">

ui/src/components/reaction/ReactionList.vue

@@ -32,7 +32,9 @@ const subtitle = (reaction: Reaction) =>
   triggerNiceName(reaction) + ' to ' + reactionNiceName(reaction)
 
 const triggerNiceName = (reaction: Reaction) => {
-  if (reaction.trigger === 'hook') {
+  if (reaction.trigger === 'schedule') {
+    return 'Schedule'
+  } else if (reaction.trigger === 'hook') {
     return 'Collection Hook'
   } else if (reaction.trigger === 'webhook') {
     return 'HTTP / Webhook'

ui/src/components/reaction/TriggerScheduleFormFields.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+</script>
+
+<template>
+  <FormField name="triggerdata.expression" v-slot="{ componentField }" validate-on-input>
+    <FormItem>
+      <FormLabel for="expression" class="text-right"> Cron Expression </FormLabel>
+      <FormControl>
+        <Input
+          id="expression"
+          class="col-span-3"
+          v-bind="componentField"
+          placeholder="Enter a cron expression"
+        />
+      </FormControl>
+      <FormDescription>
+        <p class="text-sm text-gray-500">
+          A cron expression or macro to schedule the trigger. Example: <code>0 * * * *</code> (every
+          hour) or <code>@daily</code> (every day).
+          <a
+            href="https://en.wikipedia.org/wiki/Cron#CRON_expression"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-blue-600 underline"
+          >
+            Learn more
+          </a>
+        </p>
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>

ui/src/components/reaction/TriggerWebhookFormFields.vue

@@ -15,15 +15,11 @@ import { Input } from '@/components/ui/input'
     <FormItem>
       <FormLabel for="token" class="text-right">Token</FormLabel>
       <FormControl>
-        <Input
-          id="token"
-          class="col-span-3"
-          v-bind="componentField"
-          placeholder="Enter a token (e.g. 'xyz...')"
-        />
+        <Input id="token" class="col-span-3" v-bind="componentField" placeholder="Enter a token" />
       </FormControl>
       <FormDescription>
-        Optional. Include an authorization token in the request headers.
+        Optional. Include an authorization token in the request headers. Example:
+        <code>Bearer YOUR_TOKEN</code>
       </FormDescription>
       <FormMessage />
     </FormItem>
@@ -33,14 +29,11 @@ import { Input } from '@/components/ui/input'
     <FormItem>
       <FormLabel for="path" class="text-right">Path</FormLabel>
       <FormControl>
-        <Input
-          id="path"
-          class="col-span-3"
-          v-bind="componentField"
-          placeholder="Enter a path (e.g. 'action1')"
-        />
+        <Input id="path" class="col-span-3" v-bind="componentField" placeholder="Enter a path" />
       </FormControl>
-      <FormDescription> Specify the path to trigger the reaction. </FormDescription>
+      <FormDescription>
+        Specify the path to trigger the reaction. Example: <code>action1</code>
+      </FormDescription>
       <FormMessage />
     </FormItem>
   </FormField>