@harbinger-ai/harbinger 0.1.0

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

@@ -0,0 +1,330 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { PageLayout } from './page-layout.js';
+import { MessageIcon, TrashIcon, SearchIcon, PlusIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from './icons.js';
+import { getChats, deleteChat, renameChat, starChat } from '../actions.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './ui/dropdown-menu.js';
+import { ConfirmDialog } from './ui/confirm-dialog.js';
+import { cn } from '../utils.js';
+
+function groupChatsByDate(chats) {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 86400000);
+  const last7Days = new Date(today.getTime() - 7 * 86400000);
+  const last30Days = new Date(today.getTime() - 30 * 86400000);
+
+  const groups = {
+    Starred: [],
+    Today: [],
+    Yesterday: [],
+    'Last 7 Days': [],
+    'Last 30 Days': [],
+    Older: [],
+  };
+
+  for (const chat of chats) {
+    if (chat.starred) {
+      groups.Starred.push(chat);
+      continue;
+    }
+    const date = new Date(chat.updatedAt);
+    if (date >= today) {
+      groups.Today.push(chat);
+    } else if (date >= yesterday) {
+      groups.Yesterday.push(chat);
+    } else if (date >= last7Days) {
+      groups['Last 7 Days'].push(chat);
+    } else if (date >= last30Days) {
+      groups['Last 30 Days'].push(chat);
+    } else {
+      groups.Older.push(chat);
+    }
+  }
+
+  return groups;
+}
+
+function timeAgo(date) {
+  const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
+export function ChatsPage({ session }) {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState('');
+
+  const navigateToChat = (id) => {
+    window.location.href = id ? `/chat/${id}` : '/';
+  };
+
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error('Failed to load chats:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadChats();
+  }, []);
+
+  useEffect(() => {
+    const handler = () => loadChats();
+    window.addEventListener('chatsupdated', handler);
+    return () => window.removeEventListener('chatsupdated', handler);
+  }, []);
+
+  const handleDelete = async (chatId) => {
+    setChats((prev) => prev.filter((c) => c.id !== chatId));
+    const { success } = await deleteChat(chatId);
+    if (!success) loadChats();
+  };
+
+  const handleStar = async (chatId) => {
+    setChats((prev) =>
+      prev.map((c) => (c.id === chatId ? { ...c, starred: c.starred ? 0 : 1 } : c))
+    );
+    const { success } = await starChat(chatId);
+    if (!success) loadChats();
+  };
+
+  const handleRename = async (chatId, title) => {
+    setChats((prev) =>
+      prev.map((c) => (c.id === chatId ? { ...c, title } : c))
+    );
+    const { success } = await renameChat(chatId, title);
+    if (!success) loadChats();
+  };
+
+  const filtered = query
+    ? chats.filter((c) => c.title?.toLowerCase().includes(query.toLowerCase()))
+    : chats;
+
+  const grouped = groupChatsByDate(filtered);
+
+  return (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Chats</h1>
+        <button
+          onClick={() => navigateToChat(null)}
+          className="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium bg-foreground text-background hover:bg-foreground/90"
+        >
+          <PlusIcon size={14} />
+          New chat
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="relative mb-4">
+        <input
+          type="text"
+          placeholder="Search your chats..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full rounded-md border border-input bg-background px-9 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
+          <SearchIcon size={16} />
+        </div>
+      </div>
+
+      {/* Count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {filtered.length} {filtered.length === 1 ? 'chat' : 'chats'}
+      </p>
+
+      {/* Chat list */}
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-14 animate-pulse rounded-md bg-border/50" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-8 text-center">
+          {query ? 'No chats match your search.' : 'No chats yet. Start a conversation!'}
+        </p>
+      ) : (
+        <div className="flex flex-col">
+          {Object.entries(grouped).map(([label, groupChats]) =>
+            groupChats.length > 0 ? (
+              <div key={label} className="mb-4">
+                <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+                  {label}
+                </h2>
+                <div className="flex flex-col divide-y divide-border">
+                  {groupChats.map((chat) => (
+                    <ChatRow
+                      key={chat.id}
+                      chat={chat}
+                      onNavigate={navigateToChat}
+                      onDelete={handleDelete}
+                      onStar={handleStar}
+                      onRename={handleRename}
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : null
+          )}
+        </div>
+      )}
+    </PageLayout>
+  );
+}
+
+function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(chat.title || '');
+  const inputRef = useRef(null);
+
+  const showMenu = hovered || dropdownOpen;
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+
+  const startRename = () => {
+    setEditTitle(chat.title || '');
+    setEditing(true);
+  };
+
+  const saveRename = () => {
+    const trimmed = editTitle.trim();
+    if (trimmed && trimmed !== chat.title) {
+      onRename(chat.id, trimmed);
+    }
+    setEditing(false);
+  };
+
+  const cancelRename = () => {
+    setEditing(false);
+    setEditTitle(chat.title || '');
+  };
+
+  return (
+    <div
+      className="relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={() => !editing && onNavigate(chat.id)}
+    >
+      <MessageIcon size={16} />
+      <div className="flex-1 min-w-0">
+        {editing ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') saveRename();
+              if (e.key === 'Escape') cancelRename();
+            }}
+            onBlur={saveRename}
+            onClick={(e) => e.stopPropagation()}
+            className="w-full text-sm bg-background border border-input rounded px-1.5 py-0.5 focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+        ) : (
+          <span
+            className="text-sm truncate block"
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              startRename();
+            }}
+          >
+            {chat.title || 'New Chat'}
+          </span>
+        )}
+        <span className="text-xs text-muted-foreground">
+          Last message {timeAgo(chat.updatedAt)}
+        </span>
+      </div>
+      {!editing && (
+        <div className={cn(
+          'shrink-0',
+          showMenu ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}>
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <button
+                className={cn(
+                  'rounded-md p-1.5',
+                  'text-muted-foreground hover:text-foreground hover:bg-muted'
+                )}
+                aria-label="Chat options"
+              >
+                <MoreHorizontalIcon size={14} />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="bottom">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onStar(chat.id);
+                }}
+              >
+                {chat.starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
+                {chat.starred ? 'Unstar' : 'Star'}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  startRename();
+                }}
+              >
+                <PencilIcon size={14} />
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive hover:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmDelete(true);
+                }}
+              >
+                <TrashIcon size={14} />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete chat?"
+        description="This will permanently delete this chat and all its messages."
+        confirmLabel="Delete"
+        onConfirm={() => {
+          setConfirmDelete(false);
+          onDelete(chat.id);
+        }}
+        onCancel={() => setConfirmDelete(false)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,172 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ClockIcon, SpinnerIcon, ChevronDownIcon } from "./icons.js";
+import { getSwarmConfig } from "../actions.js";
+function describeCron(schedule) {
+  const parts = schedule.trim().split(/\s+/);
+  if (parts.length !== 5) return schedule;
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+  if (minute.startsWith("*/") && hour === "*" && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    const n = parseInt(minute.slice(2), 10);
+    if (n === 1) return "Every minute";
+    return `Every ${n} minutes`;
+  }
+  if (hour.startsWith("*/") && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    const n = parseInt(hour.slice(2), 10);
+    if (n === 1) return "Every hour";
+    return `Every ${n} hours`;
+  }
+  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}`;
+  }
+  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;
+  });
+}
+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 CronCard({ cron }) {
+  const [expanded, setExpanded] = useState(false);
+  const type = cron.type || "agent";
+  const disabled = cron.enabled === false;
+  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(ClockIcon, { size: 16 }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: cron.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono", children: cron.schedule }),
+                  /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-border", children: "|" }),
+                  describeCron(cron.schedule)
+                ] })
+              ] }),
+              /* @__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 ${typeBadgeStyles[type] || typeBadgeStyles.agent}`, children: type }),
+                /* @__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__ */ jsxs("div", { className: "border-t px-4 py-3", children: [
+          type === "agent" && cron.job && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Job prompt" }),
+            /* @__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: cron.job }),
+            (cron.llm_provider || cron.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: [cron.llm_provider, cron.llm_model].filter(Boolean).join(" / ") })
+            ] })
+          ] }),
+          type === "command" && cron.command && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "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: cron.command })
+          ] }),
+          type === "webhook" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "URL" }),
+              /* @__PURE__ */ jsxs("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto", children: [
+                cron.method && cron.method !== "POST" ? `${cron.method} ` : "",
+                cron.url
+              ] })
+            ] }),
+            cron.vars && Object.keys(cron.vars).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", 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(cron.vars, null, 2) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    !loading && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      crons.length,
+      " job",
+      crons.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)) }) : crons.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(ClockIcon, { size: 24 }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "No cron jobs configured" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-sm", children: [
+        "Add scheduled jobs by editing ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: "config/CRONS.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((cron, i) => /* @__PURE__ */ jsx(CronCard, { cron }, `enabled-${i}`))
+      ] }),
+      disabled.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GroupHeader, { label: "Disabled", count: disabled.length }),
+        disabled.map((cron, i) => /* @__PURE__ */ jsx(CronCard, { cron }, `disabled-${i}`))
+      ] })
+    ] })
+  ] });
+}
+export {
+  CronsPage
+};