@castlekit/castle 0.3.1 → 0.4.0

package/.next/standalone/src/components/layout/sidebar.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "next-themes";
+import {
+  LayoutDashboard,
+  MessageCircle,
+  User,
+  Sun,
+  Moon,
+  Settings,
+  Loader2,
+  type LucideIcon,
+} from "lucide-react";
+import { CastleIcon } from "@/components/icons/castle-icon";
+import { Tooltip } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { usePathname, useRouter } from "next/navigation";
+import { useUserSettings } from "@/lib/hooks/use-user-settings";
+// Search is now a floating bar (top-right), no longer in sidebar
+import { useAgentStatus, USER_STATUS_ID } from "@/lib/hooks/use-agent-status";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  href: string;
+}
+
+export interface SidebarProps {
+  activeItem?: string;
+  onNavigate?: (id: string) => void;
+  className?: string;
+  variant?: "glass" | "solid";
+}
+
+const navItems: NavItem[] = [
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    icon: LayoutDashboard,
+    href: "/",
+  },
+  {
+    id: "chat",
+    label: "Chat",
+    icon: MessageCircle,
+    href: "/chat",
+  },
+];
+
+function Sidebar({ 
+  activeItem = "dashboard", 
+  onNavigate, 
+  className,
+  variant = "solid"
+}: SidebarProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const useLinks = !onNavigate;
+  const { tooltips: showTooltips } = useUserSettings();
+  const activeFromPath = (() => {
+    if (!pathname) return "dashboard";
+    if (pathname === "/") return "dashboard";
+    if (pathname.startsWith("/chat")) return "chat";
+    return "dashboard";
+  })();
+
+  const effectiveActive = useLinks ? activeFromPath : activeItem;
+
+  return (
+    <aside
+      className={cn(
+        "fixed top-[20px] left-[24px] bottom-[20px] flex flex-col z-40 rounded-[var(--radius-md)] w-14",
+        variant === "glass" ? "glass" : "bg-surface border border-border",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-center pt-5 pb-[60px]">
+        <button
+          type="button"
+          aria-label="Go to Dashboard"
+          onClick={() => useLinks ? router.push("/") : onNavigate?.("dashboard")}
+          className="flex items-center justify-center transition-opacity hover:opacity-85 cursor-pointer"
+        >
+          <CastleIcon className="h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 text-[var(--logo-color)] -mt-[3px]" />
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 px-2">
+        {navItems.map((item) => {
+          const isActive = effectiveActive === item.id;
+          const NavEl = (
+            <button
+              onClick={() => useLinks ? router.push(item.href) : onNavigate?.(item.id)}
+              className={cn(
+                "flex items-center justify-center w-full rounded-[4px] p-2.5 cursor-pointer",
+                isActive
+                  ? "bg-accent/10 text-accent"
+                  : "text-foreground-secondary hover:text-foreground hover:bg-surface-hover"
+              )}
+            >
+              <item.icon className="h-5 w-5 shrink-0" />
+            </button>
+          );
+
+          if (showTooltips) {
+            return (
+              <Tooltip key={item.id} content={item.label} side="right">
+                {NavEl}
+              </Tooltip>
+            );
+          }
+          return <div key={item.id}>{NavEl}</div>;
+        })}
+      </nav>
+
+      {/* User menu at bottom */}
+      <SidebarUserMenu />
+    </aside>
+  );
+}
+
+function SidebarUserMenu() {
+  const [open, setOpen] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const router = useRouter();
+  const { avatarUrl, isLoading: settingsLoading } = useUserSettings();
+  const { getStatus } = useAgentStatus();
+  const userStatus = getStatus(USER_STATUS_ID);
+  const avatarDotStatus = userStatus === "active" ? "online" as const : "offline" as const;
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const isDark = theme === "dark";
+
+  return (
+    <div ref={menuRef} className="relative flex justify-center pb-[8px]">
+      <button
+        onClick={() => setOpen(!open)}
+        className="group flex items-center justify-center rounded-[4px] cursor-pointer transition-opacity"
+      >
+        <Avatar size="sm" status={avatarDotStatus}>
+          {settingsLoading ? (
+            <AvatarFallback className="skeleton" />
+          ) : avatarUrl ? (
+            <AvatarImage
+              src={avatarUrl}
+              alt="You"
+              className="grayscale group-hover:grayscale-0 transition-all duration-200"
+            />
+          ) : (
+            <AvatarFallback className="text-foreground-secondary">
+              <User className="h-5 w-5" />
+            </AvatarFallback>
+          )}
+        </Avatar>
+      </button>
+
+      {open && (
+        <div className="absolute left-[calc(100%+8px)] bottom-0 w-48 rounded-[var(--radius-md)] bg-surface border border-border shadow-xl py-1 z-50">
+          <button
+            onClick={() => { setOpen(false); router.push("/settings"); }}
+            className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+          >
+            <Settings className="h-4 w-4" />
+            Settings
+          </button>
+
+          {mounted && (
+            <button
+              onClick={() => {
+                setTheme(isDark ? "light" : "dark");
+                setOpen(false);
+              }}
+              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+            >
+              {isDark ? (
+                <Sun className="h-4 w-4" />
+              ) : (
+                <Moon className="h-4 w-4" />
+              )}
+              {isDark ? "Light mode" : "Dark mode"}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Sidebar };

package/.next/standalone/src/components/layout/theme-toggle.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Sun, Moon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+
+export interface ThemeToggleProps {
+  className?: string;
+  collapsed?: boolean;
+}
+
+function ThemeToggle({ className, collapsed = false }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        className={cn(
+          "flex items-center gap-3 p-2 rounded-[var(--radius-md)] hover:bg-surface transition-colors",
+          collapsed ? "justify-center" : "",
+          className
+        )}
+      >
+        <div className="h-5 w-5" />
+      </button>
+    );
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className={cn(
+        "flex items-center gap-3 p-2 rounded-[var(--radius-md)] hover:bg-surface transition-colors text-foreground-secondary hover:text-foreground",
+        collapsed ? "justify-center" : "",
+        className
+      )}
+      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {isDark ? (
+        <Sun className="h-5 w-5" />
+      ) : (
+        <Moon className="h-5 w-5" />
+      )}
+      {!collapsed && (
+        <span className="text-sm">{isDark ? "Light mode" : "Dark mode"}</span>
+      )}
+    </button>
+  );
+}
+
+export { ThemeToggle };

package/.next/standalone/src/components/layout/user-menu.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "next-themes";
+import { useRouter } from "next/navigation";
+import { User, Sun, Moon, Settings } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useUserSettings } from "@/lib/hooks/use-user-settings";
+
+export interface UserMenuProps {
+  className?: string;
+  variant?: "glass" | "solid";
+}
+
+function UserMenu({ className, variant = "solid" }: UserMenuProps) {
+  const [open, setOpen] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const router = useRouter();
+  const { avatarUrl } = useUserSettings();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const isDark = theme === "dark";
+
+  return (
+    <div ref={menuRef} className={cn("relative", className)}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "flex items-center justify-center h-14 w-14 rounded-[28px] shadow-xl shadow-black/20 cursor-pointer overflow-hidden",
+          avatarUrl
+            ? ""
+            : cn(
+                "text-foreground-secondary hover:text-foreground",
+                variant === "glass" ? "glass" : "bg-surface border border-border"
+              )
+        )}
+      >
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt="You"
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <User className="h-5 w-5" />
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-[calc(100%+8px)] w-48 rounded-[var(--radius-md)] bg-surface border border-border shadow-xl py-1 z-50">
+          <button
+            onClick={() => { setOpen(false); router.push("/settings"); }}
+            className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+          >
+            <Settings className="h-4 w-4" />
+            Settings
+          </button>
+
+          {mounted && (
+            <button
+              onClick={() => {
+                setTheme(isDark ? "light" : "dark");
+                setOpen(false);
+              }}
+              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+            >
+              {isDark ? (
+                <Sun className="h-4 w-4" />
+              ) : (
+                <Moon className="h-4 w-4" />
+              )}
+              {isDark ? "Light mode" : "Dark mode"}
+            </button>
+          )}
+
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { UserMenu };

package/.next/standalone/src/components/providers/presence-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { useUserPresence } from "@/lib/hooks/use-agent-status";
+
+export function PresenceProvider({ children }: { children: React.ReactNode }) {
+  useUserPresence();
+  return <>{children}</>;
+}

package/.next/standalone/src/components/providers/search-provider.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { usePathname } from "next/navigation";
+import { Search } from "lucide-react";
+import { SearchDialog } from "@/components/search/search-dialog";
+
+// ============================================================================
+// Context
+// ============================================================================
+
+interface SearchContextValue {
+  isSearchOpen: boolean;
+  openSearch: () => void;
+  closeSearch: () => void;
+}
+
+const SearchContext = createContext<SearchContextValue>({
+  isSearchOpen: false,
+  openSearch: () => {},
+  closeSearch: () => {},
+});
+
+export function useSearchContext() {
+  return useContext(SearchContext);
+}
+
+// ============================================================================
+// Reusable search trigger button (flow element — no fixed positioning)
+// ============================================================================
+
+export function SearchTrigger({ className }: { className?: string }) {
+  const { openSearch } = useSearchContext();
+  const [isMac, setIsMac] = useState(true);
+
+  useEffect(() => {
+    setIsMac(navigator.platform?.toUpperCase().includes("MAC") ?? true);
+  }, []);
+
+  return (
+    <button
+      onClick={openSearch}
+      className={className ?? "flex items-center gap-3 pl-3 pr-2.5 h-[38px] w-[320px] rounded-[var(--radius-sm)] bg-surface border border-border hover:border-border-hover text-foreground-secondary hover:text-foreground transition-colors cursor-pointer shadow-sm"}
+    >
+      <Search className="h-4 w-4 shrink-0" strokeWidth={2.5} />
+      <span className="text-sm text-foreground-secondary/50 flex-1 text-left">Search Castle...</span>
+      <kbd className="flex items-center justify-center h-[22px] px-1.5 gap-1 rounded-[4px] bg-surface-hover border border-border font-medium text-foreground-secondary">
+        {isMac ? <span className="text-[15px]">⌘</span> : <span className="text-[11px]">Ctrl</span>}
+        <span className="text-[11px]">K</span>
+      </kbd>
+    </button>
+  );
+}
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+export function SearchProvider({ children }: { children: React.ReactNode }) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isMac, setIsMac] = useState(true);
+  const pathname = usePathname();
+
+  // Detect platform for keyboard shortcut display
+  useEffect(() => {
+    setIsMac(navigator.platform?.toUpperCase().includes("MAC") ?? true);
+  }, []);
+
+  // Hide floating trigger on pages that render their own SearchTrigger in the header
+  const showFloatingSearch =
+    !["/settings", "/ui-kit", "/"].includes(pathname) &&
+    !pathname.startsWith("/chat");
+
+  const openSearch = useCallback(() => setIsSearchOpen(true), []);
+  const closeSearch = useCallback(() => setIsSearchOpen(false), []);
+
+  // Global shortcut: Cmd+K / Ctrl+K to open search
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsSearchOpen((prev) => !prev);
+      }
+    };
+
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, []);
+
+  return (
+    <SearchContext.Provider value={{ isSearchOpen, openSearch, closeSearch }}>
+      {children}
+      {/* Floating search trigger — only on pages without an embedded header trigger */}
+      {showFloatingSearch && (
+        <button
+          onClick={openSearch}
+          className="fixed top-[28px] right-[28px] z-40 flex items-center gap-3 pl-3 pr-2.5 h-[38px] w-[320px] rounded-[var(--radius-sm)] bg-surface border border-border hover:border-border-hover text-foreground-secondary hover:text-foreground transition-colors cursor-pointer shadow-sm"
+        >
+          <Search className="h-4 w-4 shrink-0" strokeWidth={2.5} />
+          <span className="text-sm text-foreground-secondary/50 flex-1 text-left">Search Castle...</span>
+          <kbd className="flex items-center justify-center h-[22px] px-1.5 gap-1 rounded-[4px] bg-surface-hover border border-border font-medium text-foreground-secondary">
+            {isMac ? <span className="text-[15px]">⌘</span> : <span className="text-[11px]">Ctrl</span>}
+            <span className="text-[11px]">K</span>
+          </kbd>
+        </button>
+      )}
+      <SearchDialog open={isSearchOpen} onClose={closeSearch} />
+    </SearchContext.Provider>
+  );
+}