thepopebot 1.2.26 → 1.2.27

package/lib/chat/actions.js

@@ -7,6 +7,8 @@ import {
   getMessagesByChatId,
   deleteChat as dbDeleteChat,
   deleteAllChatsByUser,
+  updateChatTitle,
+  toggleChatStarred,
 } from '../db/chats.js';
 import {
   getNotifications as dbGetNotifications,
@@ -83,6 +85,37 @@ export async function deleteChat(chatId) {
   return { success: true };
 }
 
+/**
+ * Rename a chat (with ownership check).
+ * @param {string} chatId
+ * @param {string} title
+ * @returns {Promise<{success: boolean}>}
+ */
+export async function renameChat(chatId, title) {
+  const user = await requireAuth();
+  const chat = getChatById(chatId);
+  if (!chat || chat.userId !== user.id) {
+    return { success: false };
+  }
+  updateChatTitle(chatId, title);
+  return { success: true };
+}
+
+/**
+ * Toggle a chat's starred status (with ownership check).
+ * @param {string} chatId
+ * @returns {Promise<{success: boolean, starred?: number}>}
+ */
+export async function starChat(chatId) {
+  const user = await requireAuth();
+  const chat = getChatById(chatId);
+  if (!chat || chat.userId !== user.id) {
+    return { success: false };
+  }
+  const starred = toggleChatStarred(chatId);
+  return { success: true, starred };
+}
+
 /**
  * Delete all chats for the authenticated user.
  * @returns {Promise<{success: boolean}>}

package/lib/chat/components/app-sidebar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { SquarePenIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ClockIcon, ZapIcon } from "./icons.js";
+import { SquarePenIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon } from "./icons.js";
 import { getUnreadNotificationCount } from "../actions.js";
 import { SidebarHistory } from "./sidebar-history.js";
 import { SidebarUserNav } from "./sidebar-user-nav.js";
@@ -113,38 +113,6 @@ function AppSidebar({ user }) {
             }
           ) }),
           collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Swarm" })
-        ] }) }),
-        /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-            SidebarMenuButton,
-            {
-              className: collapsed ? "justify-center" : "",
-              onClick: () => {
-                window.location.href = "/crons";
-              },
-              children: [
-                /* @__PURE__ */ jsx(ClockIcon, { size: 16 }),
-                !collapsed && /* @__PURE__ */ jsx("span", { children: "Cron Jobs" })
-              ]
-            }
-          ) }),
-          collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Cron Jobs" })
-        ] }) }),
-        /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-            SidebarMenuButton,
-            {
-              className: collapsed ? "justify-center" : "",
-              onClick: () => {
-                window.location.href = "/triggers";
-              },
-              children: [
-                /* @__PURE__ */ jsx(ZapIcon, { size: 16 }),
-                !collapsed && /* @__PURE__ */ jsx("span", { children: "Triggers" })
-              ]
-            }
-          ) }),
-          collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Triggers" })
         ] }) })
       ] })
     ] }),

package/lib/chat/components/app-sidebar.jsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { SquarePenIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ClockIcon, ZapIcon } from './icons.js';
+import { SquarePenIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon } from './icons.js';
 import { getUnreadNotificationCount } from '../actions.js';
 import { SidebarHistory } from './sidebar-history.js';
 import { SidebarUserNav } from './sidebar-user-nav.js';
@@ -151,46 +151,6 @@ export function AppSidebar({ user }) {
             </Tooltip>
           </SidebarMenuItem>
 
-          {/* Cron Jobs */}
-          <SidebarMenuItem>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <SidebarMenuButton
-                  className={collapsed ? 'justify-center' : ''}
-                  onClick={() => {
-                    window.location.href = '/crons';
-                  }}
-                >
-                  <ClockIcon size={16} />
-                  {!collapsed && <span>Cron Jobs</span>}
-                </SidebarMenuButton>
-              </TooltipTrigger>
-              {collapsed && (
-                <TooltipContent side="right">Cron Jobs</TooltipContent>
-              )}
-            </Tooltip>
-          </SidebarMenuItem>
-
-          {/* Triggers */}
-          <SidebarMenuItem>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <SidebarMenuButton
-                  className={collapsed ? 'justify-center' : ''}
-                  onClick={() => {
-                    window.location.href = '/triggers';
-                  }}
-                >
-                  <ZapIcon size={16} />
-                  {!collapsed && <span>Triggers</span>}
-                </SidebarMenuButton>
-              </TooltipTrigger>
-              {collapsed && (
-                <TooltipContent side="right">Triggers</TooltipContent>
-              )}
-            </Tooltip>
-          </SidebarMenuItem>
-
         </SidebarMenu>
       </SidebarHeader>
 

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { PageLayout } from "./page-layout.js";
-import { MessageIcon, TrashIcon, SearchIcon, PlusIcon } from "./icons.js";
-import { getChats, deleteChat } from "../actions.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 { cn } from "../utils.js";
 function groupChatsByDate(chats) {
   const now = /* @__PURE__ */ new Date();
@@ -12,6 +13,7 @@ function groupChatsByDate(chats) {
   const last7Days = new Date(today.getTime() - 7 * 864e5);
   const last30Days = new Date(today.getTime() - 30 * 864e5);
   const groups = {
+    Starred: [],
     Today: [],
     Yesterday: [],
     "Last 7 Days": [],
@@ -19,6 +21,10 @@ function groupChatsByDate(chats) {
     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);
@@ -72,10 +78,23 @@ function ChatsPage({ session }) {
     return () => window.removeEventListener("chatsupdated", handler);
   }, []);
   const handleDelete = async (chatId) => {
+    setChats((prev) => prev.filter((c) => c.id !== chatId));
     const { success } = await deleteChat(chatId);
-    if (success) {
-      setChats((prev) => prev.filter((c) => c.id !== 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);
@@ -120,7 +139,9 @@ function ChatsPage({ session }) {
           {
             chat,
             onNavigate: navigateToChat,
-            onDelete: handleDelete
+            onDelete: handleDelete,
+            onStar: handleStar,
+            onRename: handleRename
           },
           chat.id
         )) })
@@ -128,39 +149,130 @@ function ChatsPage({ session }) {
     ) })
   ] });
 }
-function ChatRow({ chat, onNavigate, onDelete }) {
-  const [showDelete, setShowDelete] = useState(false);
+function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
+  const [showMenu, setShowMenu] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(chat.title || "");
+  const inputRef = useRef(null);
+  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 /* @__PURE__ */ jsxs(
     "div",
     {
       className: "relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md",
-      onMouseEnter: () => setShowDelete(true),
-      onMouseLeave: () => setShowDelete(false),
-      onClick: () => onNavigate(chat.id),
+      onMouseEnter: () => setShowMenu(true),
+      onMouseLeave: () => setShowMenu(false),
+      onClick: () => !editing && onNavigate(chat.id),
       children: [
         /* @__PURE__ */ jsx(MessageIcon, { size: 16 }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm truncate block", children: chat.title || "New Chat" }),
+          editing ? /* @__PURE__ */ jsx(
+            "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"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-sm truncate block",
+              onDoubleClick: (e) => {
+                e.stopPropagation();
+                startRename();
+              },
+              children: chat.title || "New Chat"
+            }
+          ),
           /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
             "Last message ",
             timeAgo(chat.updatedAt)
           ] })
         ] }),
-        showDelete && /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: cn(
-              "shrink-0 rounded-md p-1.5",
-              "text-muted-foreground hover:text-destructive hover:bg-muted"
+        showMenu && !editing && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                "shrink-0 rounded-md p-1.5",
+                "text-muted-foreground hover:text-foreground hover:bg-muted"
+              ),
+              onClick: (e) => e.stopPropagation(),
+              "aria-label": "Chat options",
+              children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { size: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onStar(chat.id);
+                },
+                children: [
+                  chat.starred ? /* @__PURE__ */ jsx(StarFilledIcon, { size: 14 }) : /* @__PURE__ */ jsx(StarIcon, { size: 14 }),
+                  chat.starred ? "Unstar" : "Star"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  startRename();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(PencilIcon, { size: 14 }),
+                  "Rename"
+                ]
+              }
             ),
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete(chat.id);
-            },
-            "aria-label": "Delete chat",
-            children: /* @__PURE__ */ jsx(TrashIcon, { size: 14 })
-          }
-        )
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                className: "text-destructive hover:text-destructive",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDelete(chat.id);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
+                  "Delete"
+                ]
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );

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

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { PageLayout } from './page-layout.js';
-import { MessageIcon, TrashIcon, SearchIcon, PlusIcon } from './icons.js';
-import { getChats, deleteChat } from '../actions.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 { cn } from '../utils.js';
 
 function groupChatsByDate(chats) {
@@ -14,6 +15,7 @@ function groupChatsByDate(chats) {
   const last30Days = new Date(today.getTime() - 30 * 86400000);
 
   const groups = {
+    Starred: [],
     Today: [],
     Yesterday: [],
     'Last 7 Days': [],
@@ -22,6 +24,10 @@ function groupChatsByDate(chats) {
   };
 
   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);
@@ -83,10 +89,25 @@ export function ChatsPage({ session }) {
   }, []);
 
   const handleDelete = async (chatId) => {
+    setChats((prev) => prev.filter((c) => c.id !== chatId));
     const { success } = await deleteChat(chatId);
-    if (success) {
-      setChats((prev) => prev.filter((c) => c.id !== 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
@@ -154,6 +175,8 @@ export function ChatsPage({ session }) {
                       chat={chat}
                       onNavigate={navigateToChat}
                       onDelete={handleDelete}
+                      onStar={handleStar}
+                      onRename={handleRename}
                     />
                   ))}
                 </div>
@@ -166,37 +189,121 @@ export function ChatsPage({ session }) {
   );
 }
 
-function ChatRow({ chat, onNavigate, onDelete }) {
-  const [showDelete, setShowDelete] = useState(false);
+function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
+  const [showMenu, setShowMenu] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(chat.title || '');
+  const inputRef = useRef(null);
+
+  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={() => setShowDelete(true)}
-      onMouseLeave={() => setShowDelete(false)}
-      onClick={() => onNavigate(chat.id)}
+      onMouseEnter={() => setShowMenu(true)}
+      onMouseLeave={() => setShowMenu(false)}
+      onClick={() => !editing && onNavigate(chat.id)}
     >
       <MessageIcon size={16} />
       <div className="flex-1 min-w-0">
-        <span className="text-sm truncate block">{chat.title || 'New Chat'}</span>
+        {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>
-      {showDelete && (
-        <button
-          className={cn(
-            'shrink-0 rounded-md p-1.5',
-            'text-muted-foreground hover:text-destructive hover:bg-muted'
-          )}
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete(chat.id);
-          }}
-          aria-label="Delete chat"
-        >
-          <TrashIcon size={14} />
-        </button>
+      {showMenu && !editing && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              className={cn(
+                'shrink-0 rounded-md p-1.5',
+                'text-muted-foreground hover:text-foreground hover:bg-muted'
+              )}
+              onClick={(e) => e.stopPropagation()}
+              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();
+                onDelete(chat.id);
+              }}
+            >
+              <TrashIcon size={14} />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       )}
     </div>
   );

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

@@ -1,7 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { PageLayout } from "./page-layout.js";
 import { ClockIcon, SpinnerIcon, ChevronDownIcon } from "./icons.js";
 import { getSwarmConfig } from "../actions.js";
 function describeCron(schedule) {
@@ -41,6 +40,24 @@ const typeBadgeStyles = {
   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";
@@ -106,7 +123,7 @@ function CronCard({ cron }) {
     }
   );
 }
-function CronsPage({ session }) {
+function CronsPage() {
   const [crons, setCrons] = useState([]);
   const [loading, setLoading] = useState(true);
   useEffect(() => {
@@ -115,18 +132,16 @@ function CronsPage({ session }) {
     }).catch(() => {
     }).finally(() => setLoading(false));
   }, []);
-  const enabledCount = crons.filter((c) => c.enabled !== false).length;
-  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Cron Jobs" }),
-      !loading && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
-        crons.length,
-        " job",
-        crons.length !== 1 ? "s" : "",
-        " configured, ",
-        enabledCount,
-        " enabled"
-      ] })
+  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 }) }),
@@ -136,7 +151,16 @@ function CronsPage({ session }) {
         /* @__PURE__ */ jsx("span", { className: "font-mono", children: "config/CRONS.json" }),
         " in your project."
       ] })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: crons.map((cron, i) => /* @__PURE__ */ jsx(CronCard, { cron }, i)) })
+    ] }) : /* @__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 {