gigaclaw 1.4.0

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

@@ -0,0 +1,220 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { SidebarHistoryItem } from './sidebar-history-item.js';
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu } from './ui/sidebar.js';
+import { useChatNav } from './chat-nav-context.js';
+import { getChats, deleteChat, renameChat, starChat } from '../actions.js';
+import { cn } from '../utils.js';
+import { MessageIcon, CodeIcon } from './icons.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;
+}
+
+const FILTERS = [
+  { value: 'all', label: 'All', icon: null },
+  { value: 'chat', label: 'Chat', icon: MessageIcon },
+  { value: 'code', label: 'Code', icon: CodeIcon },
+];
+
+function ChatTypeFilter({ filter, setFilter }) {
+  return (
+    <div className="flex items-center gap-0.5 px-2 mb-1">
+      {FILTERS.map(({ value, label, icon: Icon }) => (
+        <button
+          key={value}
+          onClick={() => setFilter(value)}
+          className={cn(
+            'flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium transition-colors',
+            filter === value
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          {Icon && <Icon size={12} />}
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+const isCodeChat = (chat) => Boolean(chat.codeWorkspaceId && chat.containerName);
+
+export function SidebarHistory() {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  // Always initialise with 'all' so SSR and client render the same HTML (prevents hydration mismatch).
+  // After mount, read the persisted value from localStorage and update state.
+  const [filter, setFilter] = useState('all');
+  const updateFilter = (v) => { setFilter(v); try { localStorage.setItem('sidebar-chat-filter', v); } catch {} };
+  useEffect(() => {
+    try {
+      const v = localStorage.getItem('sidebar-chat-filter');
+      if (v === 'chat' || v === 'code') setFilter(v);
+    } catch {}
+  }, []);
+  const { activeChatId, navigateToChat } = useChatNav();
+
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error('Failed to load chats:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Load chats on mount and refresh when navigating between pages
+  useEffect(() => {
+    loadChats();
+  }, [activeChatId]);
+
+  // Reload when chats change (new chat created or title updated)
+  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) {
+      if (chatId === activeChatId) {
+        navigateToChat(null);
+      }
+    } else {
+      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();
+  };
+
+  if (loading && chats.length === 0) {
+    return (
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <ChatTypeFilter filter={filter} setFilter={updateFilter} />
+          <div className="flex flex-col gap-2 px-2">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="h-8 animate-pulse rounded-md bg-border/50" />
+            ))}
+          </div>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
+  if (chats.length === 0) {
+    return (
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <p className="px-4 py-2 text-sm text-muted-foreground">
+            No chats yet. Start a conversation!
+          </p>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
+  const filteredChats = filter === 'all' ? chats
+    : filter === 'code' ? chats.filter(isCodeChat)
+    : chats.filter((c) => !isCodeChat(c));
+  const grouped = groupChatsByDate(filteredChats);
+
+  const hasResults = Object.values(grouped).some((g) => g.length > 0);
+
+  return (
+    <>
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <ChatTypeFilter filter={filter} setFilter={updateFilter} />
+        </SidebarGroupContent>
+      </SidebarGroup>
+      {hasResults ? (
+        Object.entries(grouped).map(
+          ([label, groupChats]) =>
+            groupChats.length > 0 && (
+              <SidebarGroup key={label}>
+                <SidebarGroupLabel>{label}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {groupChats.map((chat) => (
+                      <SidebarHistoryItem
+                        key={chat.id}
+                        chat={chat}
+                        isActive={chat.id === activeChatId}
+                        onDelete={handleDelete}
+                        onStar={handleStar}
+                        onRename={handleRename}
+                      />
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            )
+        )
+      ) : (
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <p className="px-4 py-2 text-sm text-muted-foreground">
+              No {filter === 'code' ? 'code' : 'chat'} chats yet.
+            </p>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      )}
+    </>
+  );
+}

package/lib/chat/components/sidebar-user-nav.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { signOut } from "next-auth/react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./ui/dropdown-menu.js";
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from "./ui/sidebar.js";
+import { SettingsIcon, SunIcon, MoonIcon, BugIcon, LogOutIcon } from "./icons.js";
+import { cn } from "../utils.js";
+function SidebarUserNav({ user, collapsed }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuButton, { className: cn("bg-background text-foreground hover:bg-muted", collapsed ? "justify-center" : "justify-between"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center overflow-hidden", collapsed ? "" : "gap-2"), children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium", children: (user?.email?.[0] || "U").toUpperCase() }),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: user?.email || "User" })
+      ] }),
+      !collapsed && /* @__PURE__ */ jsxs("svg", { className: "size-4 text-muted-foreground", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "top", className: "w-56", children: [
+      /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs("a", { href: "/settings", className: "flex items-center gap-2", style: { textDecoration: "inherit", color: "inherit" }, children: [
+        /* @__PURE__ */ jsx(SettingsIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: "Settings" })
+      ] }) }),
+      mounted && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme(theme === "dark" ? "light" : "dark"), children: [
+        theme === "dark" ? /* @__PURE__ */ jsx(SunIcon, { size: 14 }) : /* @__PURE__ */ jsx(MoonIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: theme === "dark" ? "Light Mode" : "Dark Mode" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs("a", { href: "https://github.com/gignaati/gigaclaw/issues", target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2", style: { textDecoration: "inherit", color: "inherit" }, children: [
+        /* @__PURE__ */ jsx(BugIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: "Report Issues" })
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => signOut({ callbackUrl: "/" }),
+          className: "text-destructive",
+          children: [
+            /* @__PURE__ */ jsx(LogOutIcon, { size: 14 }),
+            /* @__PURE__ */ jsx("span", { children: "Sign Out" })
+          ]
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  SidebarUserNav
+};

package/lib/chat/components/sidebar-user-nav.jsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { signOut } from 'next-auth/react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './ui/sidebar.js';
+import { SettingsIcon, SunIcon, MoonIcon, BugIcon, LogOutIcon } from './icons.js';
+import { cn } from '../utils.js';
+
+export function SidebarUserNav({ user, collapsed }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className={cn('bg-background text-foreground hover:bg-muted', collapsed ? 'justify-center' : 'justify-between')}>
+              <div className={cn('flex items-center overflow-hidden', collapsed ? '' : 'gap-2')}>
+                <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">
+                  {(user?.email?.[0] || 'U').toUpperCase()}
+                </div>
+                {!collapsed && (
+                  <span className="truncate text-sm">{user?.email || 'User'}</span>
+                )}
+              </div>
+              {!collapsed && (
+                <svg className="size-4 text-muted-foreground" width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                  <path d="m7 15 5 5 5-5" />
+                  <path d="m7 9 5-5 5 5" />
+                </svg>
+              )}
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" side="top" className="w-56">
+            <DropdownMenuItem asChild>
+              <a href="/settings" className="flex items-center gap-2" style={{ textDecoration: 'inherit', color: 'inherit' }}>
+                <SettingsIcon size={14} />
+                <span>Settings</span>
+              </a>
+            </DropdownMenuItem>
+            {mounted && (
+              <DropdownMenuItem onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+                {theme === 'dark' ? <SunIcon size={14} /> : <MoonIcon size={14} />}
+                <span>{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem asChild>
+              <a href="https://github.com/gignaati/gigaclaw/issues" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2" style={{ textDecoration: 'inherit', color: 'inherit' }}>
+                <BugIcon size={14} />
+                <span>Report Issues</span>
+              </a>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => signOut({ callbackUrl: '/' })}
+              className="text-destructive"
+            >
+              <LogOutIcon size={14} />
+              <span>Sign Out</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

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

@@ -0,0 +1,157 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { PageLayout } from "./page-layout.js";
+import { SpinnerIcon, RefreshIcon } from "./icons.js";
+import { getSwarmStatus } from "../actions.js";
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${secs}s`;
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return `${hours}h ${mins}m`;
+}
+function timeAgo(timestamp) {
+  const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1e3);
+  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`;
+}
+function LoadingSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) });
+}
+const conclusionBadgeStyles = {
+  success: "bg-green-500/10 text-green-500",
+  failure: "bg-red-500/10 text-red-500",
+  cancelled: "bg-yellow-500/10 text-yellow-500",
+  skipped: "bg-muted text-muted-foreground"
+};
+function SwarmWorkflowList({ runs }) {
+  if (!runs || runs.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground py-4 text-center", children: "No workflow runs." });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border", children: runs.map((run) => {
+    const isActive = run.status === "in_progress" || run.status === "queued";
+    const isRunning = run.status === "in_progress";
+    const isQueued = run.status === "queued";
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: run.html_url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-3 py-3 px-2 -mx-2 rounded-md hover:bg-accent transition-colors no-underline text-inherit",
+        children: [
+          isRunning && /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full bg-green-500 animate-pulse" }),
+          isQueued && /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full bg-yellow-500" }),
+          !isActive && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium uppercase shrink-0 ${conclusionBadgeStyles[run.conclusion] || "bg-muted text-muted-foreground"}`,
+              children: run.conclusion || "unknown"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: run.workflow_name || run.branch }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground shrink-0", children: isActive ? formatDuration(run.duration_seconds) : timeAgo(run.updated_at || run.started_at) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-blue-500 shrink-0", children: "View" })
+        ]
+      },
+      run.run_id
+    );
+  }) });
+}
+function SwarmPage({ session }) {
+  const [runs, setRuns] = useState([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const fetchPage = useCallback(async (p) => {
+    try {
+      const data = await getSwarmStatus(p);
+      setRuns(data.runs || []);
+      setHasMore(data.hasMore || false);
+      setPage(p);
+    } catch (err) {
+      console.error("Failed to fetch swarm status:", err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+  useEffect(() => {
+    fetchPage(1);
+  }, [fetchPage]);
+  useEffect(() => {
+    const interval = setInterval(() => fetchPage(page), 1e4);
+    return () => clearInterval(interval);
+  }, [fetchPage, page]);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Swarm" }),
+      !loading && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            setRefreshing(true);
+            fetchPage(1);
+          },
+          disabled: refreshing,
+          className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
+          children: refreshing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
+            "Refreshing..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(RefreshIcon, { size: 14 }),
+            "Refresh"
+          ] })
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsx(LoadingSkeleton, {}) : /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SwarmWorkflowList, { runs }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-4 pt-4 border-t border-border", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setRefreshing(true);
+              fetchPage(page - 1);
+            },
+            disabled: page <= 1 || refreshing,
+            className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          "Page ",
+          page
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setRefreshing(true);
+              fetchPage(page + 1);
+            },
+            disabled: !hasMore || refreshing,
+            className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  SwarmPage
+};