gigaclaw 1.4.0

package/lib/chat/components/triggers-page.jsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ZapIcon, ChevronDownIcon } from './icons.js';
+import { getSwarmConfig } from '../actions.js';
+
+const typeBadgeStyles = {
+  agent: 'bg-purple-500/10 text-purple-500',
+  command: 'bg-blue-500/10 text-blue-500',
+  webhook: 'bg-orange-500/10 text-orange-500',
+};
+
+const typeOrder = { agent: 0, command: 1, webhook: 2 };
+
+function sortByType(items) {
+  return [...items].sort((a, b) => {
+    const actions_a = a.actions || [];
+    const actions_b = b.actions || [];
+    const ta = typeOrder[(actions_a[0]?.type) || 'agent'] ?? 99;
+    const tb = typeOrder[(actions_b[0]?.type) || 'agent'] ?? 99;
+    return ta - tb;
+  });
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Group Header
+// ─────────────────────────────────────────────────────────────────────────────
+
+function GroupHeader({ label, count }) {
+  return (
+    <div className="flex items-center gap-2 pt-2 pb-1">
+      <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{label}</span>
+      <span className="text-xs text-muted-foreground">({count})</span>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Action Card (nested inside trigger)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ActionCard({ action, index }) {
+  const type = action.type || 'agent';
+
+  return (
+    <div className="rounded-md border bg-background p-3">
+      <div className="flex items-center gap-2 mb-2">
+        <span className="text-xs text-muted-foreground font-medium">Action {index + 1}</span>
+        <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${typeBadgeStyles[type] || typeBadgeStyles.agent}`}>
+          {type}
+        </span>
+      </div>
+      {type === 'agent' && action.job && (
+        <div>
+          <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+            {action.job}
+          </pre>
+          {(action.llm_provider || action.llm_model) && (
+            <div className="flex items-center gap-2 mt-2">
+              <span className="text-xs font-medium text-muted-foreground">LLM:</span>
+              <span className="inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium">
+                {[action.llm_provider, action.llm_model].filter(Boolean).join(' / ')}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+      {type === 'command' && action.command && (
+        <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+          {action.command}
+        </pre>
+      )}
+      {type === 'webhook' && (
+        <div className="flex flex-col gap-2">
+          <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto">
+            {action.method && action.method !== 'POST' ? `${action.method} ` : ''}{action.url}
+          </pre>
+          {action.vars && Object.keys(action.vars).length > 0 && (
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1">Variables</p>
+              <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+                {JSON.stringify(action.vars, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Trigger Card
+// ─────────────────────────────────────────────────────────────────────────────
+
+function TriggerCard({ trigger }) {
+  const [expanded, setExpanded] = useState(false);
+  const disabled = trigger.enabled === false;
+  const actions = trigger.actions || [];
+  const actionTypes = actions
+    .map((a) => a.type || 'agent')
+    .filter((v, i, arr) => arr.indexOf(v) === i);
+
+  return (
+    <div
+      className={`rounded-lg border bg-card transition-opacity ${disabled ? 'opacity-60' : ''}`}
+    >
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-3 w-full text-left p-4 hover:bg-accent/50 rounded-lg"
+      >
+        <div className="shrink-0 rounded-md bg-muted p-2">
+          <ZapIcon size={16} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{trigger.name}</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            <span className="font-mono">{trigger.watch_path}</span>
+            <span className="mx-1.5 text-border">|</span>
+            {actions.length} action{actions.length !== 1 ? 's' : ''}
+            {actionTypes.length > 0 && (
+              <span className="ml-1">({actionTypes.join(', ')})</span>
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <span
+            className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
+              disabled ? 'bg-muted text-muted-foreground' : 'bg-green-500/10 text-green-500'
+            }`}
+          >
+            {disabled ? 'disabled' : 'enabled'}
+          </span>
+          <span className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
+            <ChevronDownIcon size={14} />
+          </span>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t px-4 py-3 flex flex-col gap-2">
+          {actions.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No actions defined.</p>
+          ) : (
+            actions.map((action, i) => (
+              <ActionCard key={i} action={action} index={i} />
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Page
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function TriggersPage() {
+  const [triggers, setTriggers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getSwarmConfig()
+      .then((data) => {
+        if (data?.triggers) setTriggers(data.triggers);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const enabled = sortByType(triggers.filter((t) => t.enabled !== false));
+  const disabled = sortByType(triggers.filter((t) => t.enabled === false));
+
+  return (
+    <>
+      {!loading && (
+        <p className="text-sm text-muted-foreground mb-4">
+          {triggers.length} trigger{triggers.length !== 1 ? 's' : ''} configured, {enabled.length} enabled
+        </p>
+      )}
+
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="h-20 animate-pulse rounded-lg bg-border/50" />
+          ))}
+        </div>
+      ) : triggers.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="rounded-full bg-muted p-4 mb-4">
+            <ZapIcon size={24} />
+          </div>
+          <p className="text-sm font-medium mb-1">No triggers configured</p>
+          <p className="text-xs text-muted-foreground max-w-sm">
+            Add webhook triggers by editing <span className="font-mono">config/TRIGGERS.json</span> in your project.
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {enabled.length > 0 && (
+            <>
+              <GroupHeader label="Enabled" count={enabled.length} />
+              {enabled.map((trigger, i) => (
+                <TriggerCard key={`enabled-${i}`} trigger={trigger} />
+              ))}
+            </>
+          )}
+          {disabled.length > 0 && (
+            <>
+              <GroupHeader label="Disabled" count={disabled.length} />
+              {disabled.map((trigger, i) => (
+                <TriggerCard key={`disabled-${i}`} trigger={trigger} />
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/lib/chat/components/ui/combobox.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { ChevronDownIcon, CheckIcon, SearchIcon } from "../icons.js";
+import { cn } from "../../utils.js";
+function Combobox({ options = [], value, onChange, placeholder = "Select...", loading = false, disabled = false }) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const ref = useRef(null);
+  const inputRef = useRef(null);
+  const selectedLabel = options.find((o) => o.value === value)?.label || "";
+  const filtered = filter ? options.filter((o) => o.label.toLowerCase().includes(filter.toLowerCase())) : options;
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+        setFilter("");
+      }
+    };
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        setFilter("");
+      }
+    };
+    setTimeout(() => document.addEventListener("click", handleClick), 0);
+    document.addEventListener("keydown", handleEsc);
+    return () => {
+      document.removeEventListener("click", handleClick);
+      document.removeEventListener("keydown", handleEsc);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [open]);
+  const handleSelect = useCallback((val) => {
+    onChange(val);
+    setOpen(false);
+    setFilter("");
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => !disabled && setOpen(!open),
+        className: cn(
+          "flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-colors w-full",
+          disabled ? "border-border bg-muted text-muted-foreground cursor-not-allowed opacity-60" : "border-border bg-background text-foreground hover:bg-muted cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 text-left truncate", !value && "text-muted-foreground"), children: value ? selectedLabel : placeholder }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: cn("text-muted-foreground transition-transform shrink-0", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 mt-1 w-full min-w-[200px] overflow-hidden rounded-lg border border-border bg-background shadow-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+        /* @__PURE__ */ jsx(SearchIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: filter,
+            onChange: (e) => setFilter(e.target.value),
+            placeholder: "Search...",
+            className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-[200px] overflow-y-auto p-1", children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading..." }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No results" }) : filtered.map((opt) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleSelect(opt.value),
+          className: cn(
+            "flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-left transition-colors",
+            "hover:bg-muted",
+            opt.value === value && "bg-muted"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: opt.label }),
+            opt.value === value && /* @__PURE__ */ jsx(CheckIcon, { size: 14, className: "text-foreground shrink-0" })
+          ]
+        },
+        opt.value
+      )) })
+    ] })
+  ] });
+}
+export {
+  Combobox
+};

package/lib/chat/components/ui/combobox.jsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { ChevronDownIcon, CheckIcon, SearchIcon } from '../icons.js';
+import { cn } from '../../utils.js';
+
+export function Combobox({ options = [], value, onChange, placeholder = 'Select...', loading = false, disabled = false }) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState('');
+  const ref = useRef(null);
+  const inputRef = useRef(null);
+
+  const selectedLabel = options.find((o) => o.value === value)?.label || '';
+
+  const filtered = filter
+    ? options.filter((o) => o.label.toLowerCase().includes(filter.toLowerCase()))
+    : options;
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+        setFilter('');
+      }
+    };
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        setFilter('');
+      }
+    };
+    setTimeout(() => document.addEventListener('click', handleClick), 0);
+    document.addEventListener('keydown', handleEsc);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [open]);
+
+  // Auto-focus search input when opened
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [open]);
+
+  const handleSelect = useCallback((val) => {
+    onChange(val);
+    setOpen(false);
+    setFilter('');
+  }, [onChange]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => !disabled && setOpen(!open)}
+        className={cn(
+          'flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-colors w-full',
+          disabled
+            ? 'border-border bg-muted text-muted-foreground cursor-not-allowed opacity-60'
+            : 'border-border bg-background text-foreground hover:bg-muted cursor-pointer'
+        )}
+      >
+        <span className={cn('flex-1 text-left truncate', !value && 'text-muted-foreground')}>
+          {value ? selectedLabel : placeholder}
+        </span>
+        <ChevronDownIcon size={14} className={cn('text-muted-foreground transition-transform shrink-0', open && 'rotate-180')} />
+      </button>
+
+      {open && (
+        <div className="absolute z-50 mt-1 w-full min-w-[200px] overflow-hidden rounded-lg border border-border bg-background shadow-lg">
+          <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+            <SearchIcon size={14} className="text-muted-foreground shrink-0" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              placeholder="Search..."
+              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+            />
+          </div>
+          <div className="max-h-[200px] overflow-y-auto p-1">
+            {loading ? (
+              <div className="px-3 py-2 text-sm text-muted-foreground">Loading...</div>
+            ) : filtered.length === 0 ? (
+              <div className="px-3 py-2 text-sm text-muted-foreground">No results</div>
+            ) : (
+              filtered.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => handleSelect(opt.value)}
+                  className={cn(
+                    'flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-left transition-colors',
+                    'hover:bg-muted',
+                    opt.value === value && 'bg-muted'
+                  )}
+                >
+                  <span className="flex-1 truncate">{opt.label}</span>
+                  {opt.value === value && <CheckIcon size={14} className="text-foreground shrink-0" />}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/lib/chat/components/ui/confirm-dialog.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../utils.js";
+function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel = "Delete", cancelLabel = "Cancel", variant = "destructive" }) {
+  const cancelRef = useRef(null);
+  useEffect(() => {
+    if (open && cancelRef.current) {
+      cancelRef.current.focus();
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [open, onCancel]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onCancel }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-50 w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: cancelRef,
+            onClick: onCancel,
+            className: "rounded-md px-3 py-1.5 text-sm font-medium border border-input bg-background hover:bg-muted",
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onConfirm,
+            className: cn(
+              "rounded-md px-3 py-1.5 text-sm font-medium text-white",
+              variant === "destructive" ? "bg-destructive hover:bg-destructive/90" : "bg-foreground hover:bg-foreground/90"
+            ),
+            children: confirmLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  ConfirmDialog
+};

package/lib/chat/components/ui/confirm-dialog.jsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { cn } from '../../utils.js';
+
+export function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel = 'Delete', cancelLabel = 'Cancel', variant = 'destructive' }) {
+  const cancelRef = useRef(null);
+
+  useEffect(() => {
+    if (open && cancelRef.current) {
+      cancelRef.current.focus();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onCancel} />
+      <div className="relative z-50 w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-lg" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-lg font-semibold">{title}</h3>
+        {description && (
+          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+        )}
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            ref={cancelRef}
+            onClick={onCancel}
+            className="rounded-md px-3 py-1.5 text-sm font-medium border border-input bg-background hover:bg-muted"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            className={cn(
+              'rounded-md px-3 py-1.5 text-sm font-medium text-white',
+              variant === 'destructive'
+                ? 'bg-destructive hover:bg-destructive/90'
+                : 'bg-foreground hover:bg-foreground/90'
+            )}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}