@harbinger-ai/harbinger 0.1.0

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

@@ -0,0 +1,244 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ClockIcon, SpinnerIcon, ChevronDownIcon } from './icons.js';
+import { getSwarmConfig } from '../actions.js';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Utilities
+// ─────────────────────────────────────────────────────────────────────────────
+
+function describeCron(schedule) {
+  const parts = schedule.trim().split(/\s+/);
+  if (parts.length !== 5) return schedule;
+
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+
+  // Every N minutes
+  if (minute.startsWith('*/') && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    const n = parseInt(minute.slice(2), 10);
+    if (n === 1) return 'Every minute';
+    return `Every ${n} minutes`;
+  }
+
+  // Every N hours
+  if (hour.startsWith('*/') && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    const n = parseInt(hour.slice(2), 10);
+    if (n === 1) return 'Every hour';
+    return `Every ${n} hours`;
+  }
+
+  // Specific time daily
+  if (minute !== '*' && hour !== '*' && !hour.includes('/') && !minute.includes('/') && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    const h = parseInt(hour, 10);
+    const m = parseInt(minute, 10);
+    const period = h >= 12 ? 'PM' : 'AM';
+    const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
+    return `Daily at ${displayH}:${String(m).padStart(2, '0')} ${period}`;
+  }
+
+  // Specific time on specific weekdays
+  if (minute !== '*' && hour !== '*' && dayOfMonth === '*' && month === '*' && dayOfWeek !== '*') {
+    const dayNames = { '0': 'Sun', '1': 'Mon', '2': 'Tue', '3': 'Wed', '4': 'Thu', '5': 'Fri', '6': 'Sat' };
+    const days = dayOfWeek.split(',').map(d => dayNames[d] || d).join(', ');
+    const h = parseInt(hour, 10);
+    const m = parseInt(minute, 10);
+    const period = h >= 12 ? 'PM' : 'AM';
+    const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
+    return `${days} at ${displayH}:${String(m).padStart(2, '0')} ${period}`;
+  }
+
+  return schedule;
+}
+
+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 ta = typeOrder[a.type || 'agent'] ?? 99;
+    const tb = typeOrder[b.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>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Cron Card
+// ─────────────────────────────────────────────────────────────────────────────
+
+function CronCard({ cron }) {
+  const [expanded, setExpanded] = useState(false);
+  const type = cron.type || 'agent';
+  const disabled = cron.enabled === false;
+
+  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">
+          <ClockIcon size={16} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{cron.name}</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            <span className="font-mono">{cron.schedule}</span>
+            <span className="mx-1.5 text-border">|</span>
+            {describeCron(cron.schedule)}
+          </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 ${typeBadgeStyles[type] || typeBadgeStyles.agent}`}>
+            {type}
+          </span>
+          <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">
+          {type === 'agent' && cron.job && (
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5">Job prompt</p>
+              <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+                {cron.job}
+              </pre>
+              {(cron.llm_provider || cron.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">
+                    {[cron.llm_provider, cron.llm_model].filter(Boolean).join(' / ')}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+          {type === 'command' && cron.command && (
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5">Command</p>
+              <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+                {cron.command}
+              </pre>
+            </div>
+          )}
+          {type === 'webhook' && (
+            <div className="flex flex-col gap-2">
+              <div>
+                <p className="text-xs font-medium text-muted-foreground mb-1.5">URL</p>
+                <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto">
+                  {cron.method && cron.method !== 'POST' ? `${cron.method} ` : ''}{cron.url}
+                </pre>
+              </div>
+              {cron.vars && Object.keys(cron.vars).length > 0 && (
+                <div>
+                  <p className="text-xs font-medium text-muted-foreground mb-1.5">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(cron.vars, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Page
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function CronsPage() {
+  const [crons, setCrons] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getSwarmConfig()
+      .then((data) => {
+        if (data?.crons) setCrons(data.crons);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const enabled = sortByType(crons.filter((c) => c.enabled !== false));
+  const disabled = sortByType(crons.filter((c) => c.enabled === false));
+
+  return (
+    <>
+      {!loading && (
+        <p className="text-sm text-muted-foreground mb-4">
+          {crons.length} job{crons.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>
+      ) : crons.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">
+            <ClockIcon size={24} />
+          </div>
+          <p className="text-sm font-medium mb-1">No cron jobs configured</p>
+          <p className="text-xs text-muted-foreground max-w-sm">
+            Add scheduled jobs by editing <span className="font-mono">config/CRONS.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((cron, i) => (
+                <CronCard key={`enabled-${i}`} cron={cron} />
+              ))}
+            </>
+          )}
+          {disabled.length > 0 && (
+            <>
+              <GroupHeader label="Disabled" count={disabled.length} />
+              {disabled.map((cron, i) => (
+                <CronCard key={`disabled-${i}`} cron={cron} />
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/lib/chat/components/enhanced-tool-call.js

@@ -0,0 +1,103 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../utils.js";
+import { SpinnerIcon, CheckIcon, XIcon } from "./icons.js";
+const TOOL_DISPLAY_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"
+};
+function getToolDisplayName(toolName) {
+  return TOOL_DISPLAY_NAMES[toolName] || toolName.replace(/_/g, " ");
+}
+function formatContent(content) {
+  if (content == null) return null;
+  if (typeof content === "string") {
+    try {
+      const parsed = JSON.parse(content);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return content;
+    }
+  }
+  return JSON.stringify(content, null, 2);
+}
+function EnhancedToolCall({ part }) {
+  const [expanded, setExpanded] = useState(false);
+  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(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3, ease: "easeOut" },
+      className: "my-2 rounded-lg border border-white/[0.06] bg-[--card] overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "flex w-full items-center gap-3 px-3 py-2.5 text-left hover:bg-white/[0.02] transition-colors",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#ff5f57]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#febc2e]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#28c840]" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("svg", { width: "14", height: "14", 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-xs font-medium text-[--cyan] truncate", children: displayName })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs shrink-0", children: [
+                isRunning && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(SpinnerIcon, { size: 12, className: "text-[--cyan]" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono", children: "running" })
+                ] }),
+                isDone && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CheckIcon, { size: 12, className: "text-[--success]" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[--success] font-mono", children: "done" })
+                ] }),
+                isError && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(XIcon, { size: 12, className: "text-[--destructive]" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[--destructive] font-mono", children: "error" })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "px-3 pb-2 flex items-center gap-1.5 text-[11px] font-mono text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[--cyan]", children: "harbinger:~$" }),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground/60", children: toolName }),
+          isRunning && /* @__PURE__ */ jsx("span", { className: "w-1.5 h-3.5 bg-[--cyan] animate-terminal-cursor" })
+        ] }),
+        expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/[0.06] px-3 py-3 text-xs", children: [
+          part.input != null && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Input" }),
+            /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-all rounded-md bg-black/30 p-2.5 text-foreground/80 overflow-x-auto font-mono text-[11px] border border-white/[0.04]", children: formatContent(part.input) })
+          ] }),
+          part.output != null && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Output" }),
+            /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-all rounded-md bg-black/30 p-2.5 text-foreground/80 overflow-x-auto max-h-64 overflow-y-auto font-mono text-[11px] border border-white/[0.04] scrollbar-thin", children: formatContent(part.output) })
+          ] }),
+          part.input == null && part.output == null && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground italic font-mono", children: "Waiting for data..." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "h-0.5 w-full bg-white/[0.04]", children: [
+          isRunning && /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-[--cyan] rounded-full animate-progress-shimmer" }),
+          isDone && /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-[--success] transition-all duration-500" }),
+          isError && /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-[--destructive] transition-all duration-500" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  EnhancedToolCall
+};

package/lib/chat/components/enhanced-tool-call.jsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '../utils.js';
+import { SpinnerIcon, CheckIcon, XIcon } from './icons.js';
+
+const TOOL_DISPLAY_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',
+};
+
+function getToolDisplayName(toolName) {
+  return TOOL_DISPLAY_NAMES[toolName] || toolName.replace(/_/g, ' ');
+}
+
+function formatContent(content) {
+  if (content == null) return null;
+  if (typeof content === 'string') {
+    try {
+      const parsed = JSON.parse(content);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return content;
+    }
+  }
+  return JSON.stringify(content, null, 2);
+}
+
+export function EnhancedToolCall({ part }) {
+  const [expanded, setExpanded] = useState(false);
+
+  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 (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: 'easeOut' }}
+      className="my-2 rounded-lg border border-white/[0.06] bg-[--card] overflow-hidden"
+    >
+      {/* Terminal header */}
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center gap-3 px-3 py-2.5 text-left hover:bg-white/[0.02] transition-colors"
+      >
+        {/* Traffic light dots */}
+        <div className="flex items-center gap-1.5 shrink-0">
+          <div className="w-2.5 h-2.5 rounded-full bg-[#ff5f57]" />
+          <div className="w-2.5 h-2.5 rounded-full bg-[#febc2e]" />
+          <div className="w-2.5 h-2.5 rounded-full bg-[#28c840]" />
+        </div>
+
+        {/* Tool name */}
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <svg width="14" height="14" 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-xs font-medium text-[--cyan] truncate">{displayName}</span>
+        </div>
+
+        {/* Status */}
+        <span className="flex items-center gap-1.5 text-xs shrink-0">
+          {isRunning && (
+            <>
+              <SpinnerIcon size={12} className="text-[--cyan]" />
+              <span className="text-muted-foreground font-mono">running</span>
+            </>
+          )}
+          {isDone && (
+            <>
+              <CheckIcon size={12} className="text-[--success]" />
+              <span className="text-[--success] font-mono">done</span>
+            </>
+          )}
+          {isError && (
+            <>
+              <XIcon size={12} className="text-[--destructive]" />
+              <span className="text-[--destructive] font-mono">error</span>
+            </>
+          )}
+        </span>
+      </button>
+
+      {/* Terminal prompt line */}
+      <div className="px-3 pb-2 flex items-center gap-1.5 text-[11px] font-mono text-muted-foreground">
+        <span className="text-[--cyan]">harbinger:~$</span>
+        <span className="text-foreground/60">{toolName}</span>
+        {isRunning && <span className="w-1.5 h-3.5 bg-[--cyan] animate-terminal-cursor" />}
+      </div>
+
+      {/* Expandable detail */}
+      {expanded && (
+        <div className="border-t border-white/[0.06] px-3 py-3 text-xs">
+          {part.input != null && (
+            <div className="mb-3">
+              <div className="font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1.5">Input</div>
+              <pre className="whitespace-pre-wrap break-all rounded-md bg-black/30 p-2.5 text-foreground/80 overflow-x-auto font-mono text-[11px] border border-white/[0.04]">
+                {formatContent(part.input)}
+              </pre>
+            </div>
+          )}
+          {part.output != null && (
+            <div>
+              <div className="font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1.5">Output</div>
+              <pre className="whitespace-pre-wrap break-all rounded-md bg-black/30 p-2.5 text-foreground/80 overflow-x-auto max-h-64 overflow-y-auto font-mono text-[11px] border border-white/[0.04] scrollbar-thin">
+                {formatContent(part.output)}
+              </pre>
+            </div>
+          )}
+          {part.input == null && part.output == null && (
+            <div className="text-muted-foreground italic font-mono">Waiting for data...</div>
+          )}
+        </div>
+      )}
+
+      {/* Progress bar */}
+      <div className="h-0.5 w-full bg-white/[0.04]">
+        {isRunning && (
+          <div className="h-full w-1/3 bg-[--cyan] rounded-full animate-progress-shimmer" />
+        )}
+        {isDone && (
+          <div className="h-full w-full bg-[--success] transition-all duration-500" />
+        )}
+        {isError && (
+          <div className="h-full w-full bg-[--destructive] transition-all duration-500" />
+        )}
+      </div>
+    </motion.div>
+  );
+}