@harbinger-ai/harbinger 0.1.0

package/lib/chat/components/tool-panel.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../utils.js";
+import { SpinnerIcon, CheckIcon, XIcon } from "./icons.js";
+function getToolDisplayName(toolName) {
+  const names = {
+    create_job: "Create Job",
+    get_job_status: "Check Job Status",
+    get_system_technical_specs: "Read Tech Docs",
+    get_skill_building_guide: "Read Skill Docs"
+  };
+  return names[toolName] || toolName.replace(/_/g, " ");
+}
+function formatContent(content) {
+  if (content == null) return null;
+  if (typeof content === "string") {
+    try {
+      return JSON.stringify(JSON.parse(content), null, 2);
+    } catch {
+      return content.length > 200 ? content.slice(0, 200) + "..." : content;
+    }
+  }
+  const str = JSON.stringify(content, null, 2);
+  return str.length > 200 ? str.slice(0, 200) + "..." : str;
+}
+function ToolItem({ part }) {
+  const toolName = part.toolName || (part.type?.startsWith("tool-") ? part.type.slice(5) : "tool");
+  const displayName = getToolDisplayName(toolName);
+  const state = part.state || "input-available";
+  const isRunning = state === "input-streaming" || state === "input-available";
+  const isDone = state === "output-available";
+  const isError = state === "output-error";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-white/[0.06] bg-black/20 p-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+      /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-[--cyan] shrink-0", children: /* @__PURE__ */ jsx("path", { d: "M13 2 3 14h9l-1 10 10-12h-9l1-10z" }) }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] font-medium text-foreground/80 truncate flex-1", children: displayName }),
+      isRunning && /* @__PURE__ */ jsx(SpinnerIcon, { size: 10, className: "text-[--cyan]" }),
+      isDone && /* @__PURE__ */ jsx(CheckIcon, { size: 10, className: "text-[--success]" }),
+      isError && /* @__PURE__ */ jsx(XIcon, { size: 10, className: "text-[--destructive]" })
+    ] }),
+    isDone && part.output != null && /* @__PURE__ */ jsx("pre", { className: "font-mono text-[10px] text-muted-foreground whitespace-pre-wrap break-all max-h-20 overflow-hidden", children: formatContent(part.output) }),
+    isError && part.output != null && /* @__PURE__ */ jsx("pre", { className: "font-mono text-[10px] text-[--destructive]/80 whitespace-pre-wrap break-all max-h-20 overflow-hidden", children: formatContent(part.output) })
+  ] });
+}
+function ToolPanel({ messages, show }) {
+  const toolParts = useMemo(() => {
+    const parts = [];
+    for (const msg of messages) {
+      if (!msg.parts) continue;
+      for (const part of msg.parts) {
+        if (part.type?.startsWith("tool-")) {
+          parts.push(part);
+        }
+      }
+    }
+    return parts;
+  }, [messages]);
+  const activeParts = toolParts.filter((p) => {
+    const s = p.state || "input-available";
+    return s === "input-streaming" || s === "input-available";
+  });
+  const completedParts = toolParts.filter((p) => {
+    const s = p.state || "input-available";
+    return s === "output-available" || s === "output-error";
+  });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { width: 0, opacity: 0 },
+      animate: { width: 300, opacity: 1 },
+      exit: { width: 0, opacity: 0 },
+      transition: { duration: 0.25, ease: "easeInOut" },
+      className: "hidden md:flex flex-col h-full border-l border-white/[0.06] bg-[--card]/50 backdrop-blur-sm overflow-hidden shrink-0",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "p-3 border-b border-white/[0.06]", children: /* @__PURE__ */ jsx("h3", { className: "font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: "Tool Activity" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3 space-y-3 scrollbar-thin", children: [
+          activeParts.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "font-mono text-[9px] uppercase tracking-wider text-[--cyan] mb-2 flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-[--cyan] animate-pulse" }),
+              "Running (",
+              activeParts.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-2", children: activeParts.map((p, i) => /* @__PURE__ */ jsx(ToolItem, { part: p }, p.toolCallId || `active-${i}`)) })
+          ] }),
+          completedParts.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "font-mono text-[9px] uppercase tracking-wider text-muted-foreground mb-2", children: [
+              "Recent (",
+              completedParts.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-2", children: completedParts.slice(-10).reverse().map((p, i) => /* @__PURE__ */ jsx(ToolItem, { part: p }, p.toolCallId || `done-${i}`)) })
+          ] }),
+          toolParts.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+            /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-muted-foreground/40 mb-2", children: /* @__PURE__ */ jsx("path", { d: "M13 2 3 14h9l-1 10 10-12h-9l1-10z" }) }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground/40", children: "No tool activity yet" })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  ToolPanel
+};

package/lib/chat/components/tool-panel.jsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../utils.js';
+import { SpinnerIcon, CheckIcon, XIcon } from './icons.js';
+
+function getToolDisplayName(toolName) {
+  const names = {
+    create_job: 'Create Job',
+    get_job_status: 'Check Job Status',
+    get_system_technical_specs: 'Read Tech Docs',
+    get_skill_building_guide: 'Read Skill Docs',
+  };
+  return names[toolName] || toolName.replace(/_/g, ' ');
+}
+
+function formatContent(content) {
+  if (content == null) return null;
+  if (typeof content === 'string') {
+    try {
+      return JSON.stringify(JSON.parse(content), null, 2);
+    } catch {
+      return content.length > 200 ? content.slice(0, 200) + '...' : content;
+    }
+  }
+  const str = JSON.stringify(content, null, 2);
+  return str.length > 200 ? str.slice(0, 200) + '...' : str;
+}
+
+function ToolItem({ part }) {
+  const toolName = part.toolName || (part.type?.startsWith('tool-') ? part.type.slice(5) : 'tool');
+  const displayName = getToolDisplayName(toolName);
+  const state = part.state || 'input-available';
+  const isRunning = state === 'input-streaming' || state === 'input-available';
+  const isDone = state === 'output-available';
+  const isError = state === 'output-error';
+
+  return (
+    <div className="rounded-md border border-white/[0.06] bg-black/20 p-2.5">
+      <div className="flex items-center gap-2 mb-1.5">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="text-[--cyan] shrink-0">
+          <path d="M13 2 3 14h9l-1 10 10-12h-9l1-10z" />
+        </svg>
+        <span className="font-mono text-[11px] font-medium text-foreground/80 truncate flex-1">{displayName}</span>
+        {isRunning && <SpinnerIcon size={10} className="text-[--cyan]" />}
+        {isDone && <CheckIcon size={10} className="text-[--success]" />}
+        {isError && <XIcon size={10} className="text-[--destructive]" />}
+      </div>
+      {isDone && part.output != null && (
+        <pre className="font-mono text-[10px] text-muted-foreground whitespace-pre-wrap break-all max-h-20 overflow-hidden">
+          {formatContent(part.output)}
+        </pre>
+      )}
+      {isError && part.output != null && (
+        <pre className="font-mono text-[10px] text-[--destructive]/80 whitespace-pre-wrap break-all max-h-20 overflow-hidden">
+          {formatContent(part.output)}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+export function ToolPanel({ messages, show }) {
+  // Extract all tool parts from messages (client-side only, no backend changes)
+  const toolParts = useMemo(() => {
+    const parts = [];
+    for (const msg of messages) {
+      if (!msg.parts) continue;
+      for (const part of msg.parts) {
+        if (part.type?.startsWith('tool-')) {
+          parts.push(part);
+        }
+      }
+    }
+    return parts;
+  }, [messages]);
+
+  const activeParts = toolParts.filter(p => {
+    const s = p.state || 'input-available';
+    return s === 'input-streaming' || s === 'input-available';
+  });
+  const completedParts = toolParts.filter(p => {
+    const s = p.state || 'input-available';
+    return s === 'output-available' || s === 'output-error';
+  });
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          initial={{ width: 0, opacity: 0 }}
+          animate={{ width: 300, opacity: 1 }}
+          exit={{ width: 0, opacity: 0 }}
+          transition={{ duration: 0.25, ease: 'easeInOut' }}
+          className="hidden md:flex flex-col h-full border-l border-white/[0.06] bg-[--card]/50 backdrop-blur-sm overflow-hidden shrink-0"
+        >
+          <div className="p-3 border-b border-white/[0.06]">
+            <h3 className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">Tool Activity</h3>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-3 space-y-3 scrollbar-thin">
+            {/* Active tools */}
+            {activeParts.length > 0 && (
+              <div>
+                <div className="font-mono text-[9px] uppercase tracking-wider text-[--cyan] mb-2 flex items-center gap-1.5">
+                  <div className="w-1.5 h-1.5 rounded-full bg-[--cyan] animate-pulse" />
+                  Running ({activeParts.length})
+                </div>
+                <div className="space-y-2">
+                  {activeParts.map((p, i) => (
+                    <ToolItem key={p.toolCallId || `active-${i}`} part={p} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Completed tools */}
+            {completedParts.length > 0 && (
+              <div>
+                <div className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground mb-2">
+                  Recent ({completedParts.length})
+                </div>
+                <div className="space-y-2">
+                  {completedParts.slice(-10).reverse().map((p, i) => (
+                    <ToolItem key={p.toolCallId || `done-${i}`} part={p} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {toolParts.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground/40 mb-2">
+                  <path d="M13 2 3 14h9l-1 10 10-12h-9l1-10z" />
+                </svg>
+                <span className="font-mono text-[10px] text-muted-foreground/40">No tool activity yet</span>
+              </div>
+            )}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

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

@@ -0,0 +1,153 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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;
+  });
+}
+function GroupHeader({ label, count }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2 pb-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      "(",
+      count,
+      ")"
+    ] })
+  ] });
+}
+function ActionCard({ action, index }) {
+  const type = action.type || "agent";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-background p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground font-medium", children: [
+        "Action ",
+        index + 1
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${typeBadgeStyles[type] || typeBadgeStyles.agent}`, children: type })
+    ] }),
+    type === "agent" && action.job && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: action.job }),
+      (action.llm_provider || action.llm_model) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "LLM:" }),
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium", children: [action.llm_provider, action.llm_model].filter(Boolean).join(" / ") })
+      ] })
+    ] }),
+    type === "command" && action.command && /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: action.command }),
+    type === "webhook" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto", children: [
+        action.method && action.method !== "POST" ? `${action.method} ` : "",
+        action.url
+      ] }),
+      action.vars && Object.keys(action.vars).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Variables" }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: JSON.stringify(action.vars, null, 2) })
+      ] })
+    ] })
+  ] });
+}
+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 /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-lg border bg-card transition-opacity ${disabled ? "opacity-60" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "flex items-center gap-3 w-full text-left p-4 hover:bg-accent/50 rounded-lg",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(ZapIcon, { size: 16 }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: trigger.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono", children: trigger.watch_path }),
+                  /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-border", children: "|" }),
+                  actions.length,
+                  " action",
+                  actions.length !== 1 ? "s" : "",
+                  actionTypes.length > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
+                    "(",
+                    actionTypes.join(", "),
+                    ")"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                /* @__PURE__ */ jsx(
+                  "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"}`,
+                    children: disabled ? "disabled" : "enabled"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `transition-transform ${expanded ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }) })
+              ] })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-3 flex flex-col gap-2", children: actions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No actions defined." }) : actions.map((action, i) => /* @__PURE__ */ jsx(ActionCard, { action, index: i }, i)) })
+      ]
+    }
+  );
+}
+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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    !loading && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      triggers.length,
+      " trigger",
+      triggers.length !== 1 ? "s" : "",
+      " configured, ",
+      enabled.length,
+      " enabled"
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-lg bg-border/50" }, i)) }) : triggers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(ZapIcon, { size: 24 }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "No triggers configured" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-sm", children: [
+        "Add webhook triggers by editing ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: "config/TRIGGERS.json" }),
+        " in your project."
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      enabled.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GroupHeader, { label: "Enabled", count: enabled.length }),
+        enabled.map((trigger, i) => /* @__PURE__ */ jsx(TriggerCard, { trigger }, `enabled-${i}`))
+      ] }),
+      disabled.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GroupHeader, { label: "Disabled", count: disabled.length }),
+        disabled.map((trigger, i) => /* @__PURE__ */ jsx(TriggerCard, { trigger }, `disabled-${i}`))
+      ] })
+    ] })
+  ] });
+}
+export {
+  TriggersPage
+};

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>
+      )}
+    </>
+  );
+}