@castlekit/castle 0.1.6 → 0.3.0

package/src/components/chat/session-stats-panel.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp, Brain, Zap } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { SessionStatus } from "@/lib/types/chat";
+
+interface SessionStatsPanelProps {
+  stats: SessionStatus | null;
+  isLoading?: boolean;
+  className?: string;
+}
+
+/** Simple relative time helper — avoids adding date-fns dependency */
+function timeAgo(timestamp: number): string {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+  if (seconds < 5) return "just now";
+  if (seconds < 60) return `${seconds}s ago`;
+  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);
+  return `${days}d ago`;
+}
+
+/** Get context bar color based on usage percentage */
+function getContextColor(percentage: number): string {
+  if (percentage >= 90) return "bg-error";
+  if (percentage >= 80) return "bg-orange-500";
+  if (percentage >= 60) return "bg-yellow-500";
+  return "bg-success";
+}
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(n);
+}
+
+export function SessionStatsPanel({ stats, isLoading, className }: SessionStatsPanelProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!stats && !isLoading) return null;
+
+  const percentage = stats?.context?.percentage ?? 0;
+  const contextColor = getContextColor(percentage);
+
+  return (
+    <div className={cn("border-b border-border", className)}>
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="w-full px-4 py-2 flex items-center justify-between text-xs text-foreground-secondary hover:bg-surface-hover/50 transition-colors"
+      >
+        {/* Collapsed view */}
+        {stats ? (
+          <div className="flex items-center gap-3 min-w-0">
+            <span className="flex items-center gap-1">
+              <span className={cn("w-2 h-2 rounded-full", contextColor)} />
+              Context: {formatTokens(stats.context.used)}/{formatTokens(stats.context.limit)} ({percentage}%)
+            </span>
+            <span className="text-foreground-secondary/60">|</span>
+            <span>
+              Tokens: {formatTokens(stats.tokens.input)} in / {formatTokens(stats.tokens.output)} out
+            </span>
+          </div>
+        ) : (
+          <span className="text-foreground-secondary/60">
+            {isLoading ? "Loading session stats..." : "No session data"}
+          </span>
+        )}
+        {expanded ? (
+          <ChevronUp className="h-3 w-3 shrink-0 ml-2" />
+        ) : (
+          <ChevronDown className="h-3 w-3 shrink-0 ml-2" />
+        )}
+      </button>
+
+      {/* Expanded view */}
+      {expanded && stats && (
+        <div className="px-4 pb-3 space-y-3">
+          {/* Context progress bar */}
+          <div>
+            <div className="flex items-center justify-between text-xs mb-1">
+              <span className="text-foreground-secondary">Context Window</span>
+              <span className="font-mono">
+                {formatTokens(stats.context.used)} / {formatTokens(stats.context.limit)}
+              </span>
+            </div>
+            <div className="w-full h-2 bg-surface-hover rounded-full overflow-hidden">
+              <div
+                className={cn("h-full rounded-full transition-all duration-300", contextColor)}
+                style={{ width: `${Math.min(percentage, 100)}%` }}
+              />
+            </div>
+          </div>
+
+          {/* Details grid */}
+          <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-xs">
+            <div className="flex items-center gap-2">
+              <span className="text-foreground-secondary">Model</span>
+              <span className="font-medium truncate">{stats.model}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-foreground-secondary">Runtime</span>
+              <span className="font-medium">{stats.runtime}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Brain className="h-3 w-3 text-foreground-secondary" />
+              <span className="text-foreground-secondary">Thinking</span>
+              <span className="font-medium">{stats.thinking || "off"}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Zap className="h-3 w-3 text-foreground-secondary" />
+              <span className="text-foreground-secondary">Compactions</span>
+              <span className="font-medium">{stats.compactions}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-foreground-secondary">Input tokens</span>
+              <span className="font-medium">{stats.tokens.input.toLocaleString()}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-foreground-secondary">Output tokens</span>
+              <span className="font-medium">{stats.tokens.output.toLocaleString()}</span>
+            </div>
+          </div>
+
+          {/* Updated timestamp */}
+          {stats.updatedAt && (
+            <div className="text-xs text-foreground-secondary/60 text-right">
+              Updated {timeAgo(stats.updatedAt)}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/chat/storage-indicator.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { HardDrive, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface StorageData {
+  messages: number;
+  channels: number;
+  attachments: number;
+  totalAttachmentBytes: number;
+  dbSizeBytes: number;
+  attachmentsDirBytes: number;
+  warnings: string[];
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+
+interface StorageIndicatorProps {
+  className?: string;
+}
+
+export function StorageIndicator({ className }: StorageIndicatorProps) {
+  const [data, setData] = useState<StorageData | null>(null);
+
+  useEffect(() => {
+    async function fetchStats() {
+      try {
+        const res = await fetch("/api/openclaw/chat/storage");
+        if (res.ok) {
+          setData(await res.json());
+        }
+      } catch {
+        // Silently fail — storage indicator is non-critical
+      }
+    }
+
+    fetchStats();
+    // Refresh every 5 minutes
+    const interval = setInterval(fetchStats, 300000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!data) return null;
+
+  const hasWarnings = data.warnings && data.warnings.length > 0;
+  const totalSize = (data.dbSizeBytes || 0) + (data.attachmentsDirBytes || 0);
+
+  return (
+    <div className={cn("px-4 py-2 border-t border-border", className)}>
+      <div className="flex items-center justify-between text-xs text-foreground-secondary">
+        <div className="flex items-center gap-2">
+          {hasWarnings ? (
+            <AlertTriangle className="h-3 w-3 text-warning" />
+          ) : (
+            <HardDrive className="h-3 w-3" />
+          )}
+          <span>
+            {data.messages.toLocaleString()} messages · {formatBytes(totalSize)}
+          </span>
+        </div>
+        {hasWarnings && (
+          <span className="text-warning text-xs truncate ml-2 max-w-[200px]" title={data.warnings.join("; ")}>
+            {data.warnings[0]}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/layout/sidebar.tsx

@@ -1,15 +1,25 @@
 "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 { Fragment } from "react";
 import { CastleIcon } from "@/components/icons/castle-icon";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+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;
@@ -32,6 +42,12 @@ const navItems: NavItem[] = [
     icon: LayoutDashboard,
     href: "/",
   },
+  {
+    id: "chat",
+    label: "Chat",
+    icon: MessageCircle,
+    href: "/chat",
+  },
 ];
 
 function Sidebar({ 
@@ -41,11 +57,13 @@ function Sidebar({
   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";
   })();
 
@@ -54,54 +72,32 @@ function Sidebar({
   return (
     <aside
       className={cn(
-        "fixed top-5 left-6 bottom-5 flex flex-col z-40 shadow-xl shadow-black/20 rounded-[28px] w-14",
+        "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]">
-        {useLinks ? (
-          <Link
-            href="/"
-            aria-label="Go to Dashboard"
-            className="flex items-center justify-center transition-opacity hover:opacity-85"
-          >
-            <CastleIcon className="h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 text-[var(--logo-color)] -mt-[3px]" />
-          </Link>
-        ) : (
-          <button
-            type="button"
-            aria-label="Go to Dashboard"
-            onClick={() => 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>
-        )}
+        <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 = useLinks ? (
-            <Link
-              href={item.href}
-              className={cn(
-                "flex items-center justify-center w-full rounded-[20px] 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" />
-            </Link>
-          ) : (
+          const NavEl = (
             <button
-              onClick={() => onNavigate?.(item.id)}
+              onClick={() => useLinks ? router.push(item.href) : onNavigate?.(item.id)}
               className={cn(
-                "flex items-center justify-center w-full rounded-[20px] p-2.5 cursor-pointer",
+                "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"
@@ -111,18 +107,103 @@ function Sidebar({
             </button>
           );
 
-          return (
-            <Tooltip key={item.id} content={item.label} side="right">
-              {NavEl}
-            </Tooltip>
-          );
+          if (showTooltips) {
+            return (
+              <Tooltip key={item.id} content={item.label} side="right">
+                {NavEl}
+              </Tooltip>
+            );
+          }
+          return <div key={item.id}>{NavEl}</div>;
         })}
       </nav>
 
-      {/* Spacer at bottom for visual balance */}
-      <div className="pb-4" />
+      {/* 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/src/components/layout/user-menu.tsx

@@ -2,8 +2,10 @@
 
 import { useState, useRef, useEffect } from "react";
 import { useTheme } from "next-themes";
-import { User, Sun, Moon } from "lucide-react";
+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;
@@ -14,6 +16,8 @@ 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(() => {
@@ -37,15 +41,36 @@ function UserMenu({ className, variant = "solid" }: UserMenuProps) {
       <button
         onClick={() => setOpen(!open)}
         className={cn(
-          "flex items-center justify-center h-14 w-14 rounded-[28px] shadow-xl shadow-black/20 text-foreground-secondary hover:text-foreground cursor-pointer",
-          variant === "glass" ? "glass" : "bg-surface border border-border"
+          "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"
+              )
         )}
       >
-        <User className="h-5 w-5" />
+        {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={() => {

package/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/src/components/providers/search-provider.tsx

@@ -0,0 +1,81 @@
+"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);
+}
+
+// ============================================================================
+// 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 the floating search trigger on pages where it would overlap or isn't relevant
+  const showSearchBar = pathname !== "/settings" && pathname !== "/ui-kit";
+
+  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 — top right (hidden on settings/ui-kit) */}
+      {showSearchBar && (
+        <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>
+  );
+}