@castlekit/castle 0.1.6 → 0.3.0

package/src/components/search/search-dialog.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { Search, Clock, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatDateTime } from "@/lib/date-utils";
+import { useSearch } from "@/lib/hooks/use-search";
+import type {
+  SearchResult,
+  SearchResultType,
+  MessageSearchResult,
+} from "@/lib/types/search";
+
+// ============================================================================
+// Result renderers — one per content type (pluggable registry)
+// ============================================================================
+
+function MessageResultRow({ result }: { result: MessageSearchResult }) {
+  const timeStr = formatDateTime(result.timestamp);
+
+  return (
+    <div className="flex items-start gap-3 min-w-0">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2 text-xs text-foreground-secondary mb-0.5">
+          <span className="px-1.5 py-0.5 rounded bg-accent/10 text-accent font-medium text-[11px]">
+            {result.title}
+          </span>
+          {result.archived && (
+            <span className="text-[11px] text-foreground-secondary/50 italic">archived</span>
+          )}
+          <span className="font-medium">{result.subtitle}</span>
+          <span className="text-foreground-secondary/60">{timeStr}</span>
+        </div>
+        <p className="text-sm text-foreground truncate">{result.snippet}</p>
+      </div>
+    </div>
+  );
+}
+
+// Registry: map each SearchResultType to its renderer
+const resultRenderers: Record<
+  SearchResultType,
+  ((result: SearchResult) => ReactNode) | null
+> = {
+  message: (r) => <MessageResultRow result={r as MessageSearchResult} />,
+  task: null,    // Future
+  note: null,    // Future
+  project: null, // Future
+};
+
+// ============================================================================
+// SearchDialog
+// ============================================================================
+
+interface SearchDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function SearchDialog({ open, onClose }: SearchDialogProps) {
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const { query, setQuery, results, isSearching, recentSearches, clearRecentSearches } =
+    useSearch();
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  // Focus input on open
+  useEffect(() => {
+    if (open) {
+      // Small delay to ensure the DOM is ready
+      requestAnimationFrame(() => inputRef.current?.focus());
+      setSelectedIndex(-1);
+    }
+  }, [open]);
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(-1);
+  }, [results]);
+
+  // Determine what items are shown (results or recent searches)
+  const showRecent = !query.trim() && recentSearches.length > 0;
+  const itemCount = showRecent ? recentSearches.length : results.length;
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev < itemCount - 1 ? prev + 1 : 0));
+      return;
+    }
+
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : itemCount - 1));
+      return;
+    }
+
+    if (e.key === "Enter" && selectedIndex >= 0) {
+      e.preventDefault();
+      if (showRecent) {
+        // Fill input with the recent search
+        setQuery(recentSearches[selectedIndex]);
+      } else if (results[selectedIndex]) {
+        navigateToResult(results[selectedIndex]);
+      }
+      return;
+    }
+  };
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (selectedIndex < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll("[data-search-item]");
+    items[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const navigateToResult = (result: SearchResult) => {
+    router.push(result.href);
+    // Close after navigation is dispatched — ensures router.push isn't
+    // interrupted by the dialog unmounting
+    setTimeout(onClose, 0);
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+
+      {/* Dialog */}
+      <div
+        className="relative w-full max-w-[560px] rounded-[var(--radius-md)] bg-surface border border-border shadow-2xl overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search className="h-5 w-5 text-foreground-secondary shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search across all channels..."
+            className="flex-1 bg-transparent text-[15px] focus:outline-none placeholder:text-foreground-secondary/50"
+          />
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[11px] font-medium text-foreground-secondary/60 bg-surface-hover rounded border border-border/50">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results / Recent searches */}
+        <div ref={listRef} className="max-h-[400px] overflow-y-auto">
+          {/* Recent searches (before typing) */}
+          {showRecent && (
+            <div>
+              <div className="flex items-center justify-between px-4 pt-3 pb-1.5">
+                <span className="text-xs font-medium text-foreground-secondary/60 uppercase tracking-wider">
+                  Recent searches
+                </span>
+                <button
+                  onClick={clearRecentSearches}
+                  className="text-xs text-foreground-secondary/60 hover:text-foreground-secondary transition-colors cursor-pointer"
+                >
+                  Clear
+                </button>
+              </div>
+              {recentSearches.map((recent, i) => (
+                <button
+                  key={recent}
+                  data-search-item
+                  onClick={() => setQuery(recent)}
+                  className={cn(
+                    "flex items-center gap-3 w-full px-4 py-2.5 text-sm text-left transition-colors cursor-pointer",
+                    selectedIndex === i
+                      ? "bg-accent/10 text-accent"
+                      : "text-foreground hover:bg-surface-hover"
+                  )}
+                >
+                  <Clock className="h-4 w-4 text-foreground-secondary/60 shrink-0" />
+                  <span className="truncate">{recent}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Empty state — no query, no recent */}
+          {!query.trim() && recentSearches.length === 0 && (
+            <div className="px-4 py-8 text-center text-sm text-foreground-secondary/60">
+              Search across all channels
+            </div>
+          )}
+
+          {/* Loading skeleton */}
+          {query.trim() && isSearching && results.length === 0 && (
+            <div className="px-2">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="px-2 py-3 border-b border-border/20 last:border-b-0">
+                  <div className="flex items-center gap-2 mb-1.5">
+                    <div className="skeleton h-4 w-16 rounded" />
+                    <div className="skeleton h-3 w-12 rounded" />
+                    <div className="skeleton h-3 w-10 rounded" />
+                  </div>
+                  <div className="skeleton h-3.5 rounded" style={{ width: `${55 + i * 8}%` }} />
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Results */}
+          {query.trim() && !isSearching && results.length === 0 && (
+            <div className="px-4 py-8 text-center text-sm text-foreground-secondary">
+              No results found
+            </div>
+          )}
+
+          {query.trim() &&
+            results.map((result, i) => {
+              const renderer = resultRenderers[result.type];
+              if (!renderer) return null;
+              return (
+                <button
+                  key={result.id}
+                  data-search-item
+                  onClick={() => navigateToResult(result)}
+                  className={cn(
+                    "w-full px-4 py-3 text-left transition-colors cursor-pointer border-b border-border/20 last:border-b-0",
+                    selectedIndex === i
+                      ? "bg-accent/10"
+                      : "hover:bg-surface-hover"
+                  )}
+                >
+                  {renderer(result)}
+                </button>
+              );
+            })}
+        </div>
+
+        {/* Footer hint */}
+        {query.trim() && results.length > 0 && (
+          <div className="px-4 py-2 border-t border-border/50 text-[11px] text-foreground-secondary/50 flex items-center gap-3">
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">↑↓</kbd> Navigate
+            </span>
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">↵</kbd> Open
+            </span>
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">esc</kbd> Close
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/avatar.tsx

@@ -4,17 +4,18 @@ import { cn } from "@/lib/utils";
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
   status?: "online" | "offline" | "busy" | "away";
+  statusPulse?: boolean;
 }
 
 const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  ({ className, size = "md", status, children, ...props }, ref) => {
+  ({ className, size = "md", status, statusPulse, children, ...props }, ref) => {
     return (
-      <div className="relative inline-block">
+      <div className="relative inline-block shrink-0">
         <div
           className={cn(
-            "relative flex shrink-0 overflow-hidden rounded-[var(--radius-full)] bg-surface border border-border",
+            "relative flex shrink-0 overflow-hidden rounded-[4px] bg-surface border border-border",
             {
-              "h-8 w-8": size === "sm",
+              "h-9 w-9": size === "sm",
               "h-10 w-10": size === "md",
               "h-12 w-12": size === "lg",
             },
@@ -28,18 +29,19 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
         {status && (
           <span
             className={cn(
-              "absolute bottom-0 right-0 block rounded-[var(--radius-full)] ring-2 ring-background",
+              "absolute block rounded-full ring-2 ring-background",
               {
-                "h-2.5 w-2.5": size === "sm",
-                "h-3 w-3": size === "md",
-                "h-3.5 w-3.5": size === "lg",
+                "h-2.5 w-2.5 -bottom-0.5 -right-0.5": size === "sm",
+                "h-3 w-3 -bottom-0.5 -right-0.5": size === "md",
+                "h-3.5 w-3.5 -bottom-0.5 -right-0.5": size === "lg",
               },
               {
                 "bg-success": status === "online",
                 "bg-foreground-muted": status === "offline",
                 "bg-error": status === "busy",
                 "bg-warning": status === "away",
-              }
+              },
+              statusPulse && "animate-pulse"
             )}
           />
         )}

package/src/components/ui/dialog.tsx

@@ -7,17 +7,23 @@ import { cn } from "@/lib/utils";
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
   open?: boolean;
   onClose?: () => void;
+  onOpenChange?: (open: boolean) => void;
 }
 
 const Dialog = forwardRef<HTMLDivElement, DialogProps>(
-  ({ className, open = false, onClose, children, ...props }, ref) => {
+  ({ className, open = false, onClose, onOpenChange, children, ...props }, ref) => {
     if (!open) return null;
 
+    const handleClose = () => {
+      onClose?.();
+      onOpenChange?.(false);
+    };
+
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center">
         <div
           className="fixed inset-0 bg-black/50 backdrop-blur-sm"
-          onClick={onClose}
+          onClick={handleClose}
         />
         <div
           className={cn(
@@ -27,9 +33,9 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(
           ref={ref}
           {...props}
         >
-          {onClose && (
+          {(onClose || onOpenChange) && (
             <button
-              onClick={onClose}
+              onClick={handleClose}
               className="absolute right-4 top-4 p-1 rounded-[var(--radius-sm)] text-foreground-muted hover:text-foreground hover:bg-surface-hover transition-colors"
             >
               <X className="h-4 w-4" />

package/src/components/ui/tooltip.tsx

@@ -9,16 +9,20 @@ export interface TooltipProps {
   content: string;
   side?: "top" | "right" | "bottom" | "left";
   className?: string;
+  /** Delay in ms before showing the tooltip (default 0) */
+  delay?: number;
 }
 
 function Tooltip({ 
   children, 
   content, 
   side = "right",
-  className 
+  className,
+  delay = 0,
 }: TooltipProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const delayRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isPositioned, setIsPositioned] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -26,6 +30,10 @@ function Tooltip({
 
   useEffect(() => {
     setMounted(true);
+    return () => {
+      // Clean up delay timer on unmount to prevent setState on unmounted component
+      if (delayRef.current) clearTimeout(delayRef.current);
+    };
   }, []);
 
   const updatePosition = useCallback(() => {
@@ -83,8 +91,17 @@ function Tooltip({
     <>
       <div
         ref={triggerRef}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
+        onMouseEnter={() => {
+          if (delay > 0) {
+            delayRef.current = setTimeout(() => setIsHovered(true), delay);
+          } else {
+            setIsHovered(true);
+          }
+        }}
+        onMouseLeave={() => {
+          if (delayRef.current) { clearTimeout(delayRef.current); delayRef.current = null; }
+          setIsHovered(false);
+        }}
         className={className}
       >
         {children}
@@ -110,26 +127,26 @@ function Tooltip({
                   side === "bottom" && (isPositioned ? "translate-y-0" : "-translate-y-2")
                 )}
               >
-                <div className="relative bg-foreground text-background text-sm font-medium px-3 py-1.5 rounded-[4px] whitespace-nowrap shadow-xl shadow-black/25">
+                <div className="relative bg-[#1a1a1a] text-white text-sm font-medium px-3 py-1.5 rounded-[4px] whitespace-nowrap shadow-xl shadow-black/25">
                   {content}
                   {side === "right" && (
                     <div className="absolute -left-[7px] top-1/2 -translate-y-1/2">
-                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-r-[8px] border-r-foreground" />
+                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-r-[8px] border-r-[#1a1a1a]" />
                     </div>
                   )}
                   {side === "left" && (
                     <div className="absolute -right-[7px] top-1/2 -translate-y-1/2">
-                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-l-[8px] border-l-foreground" />
+                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-l-[8px] border-l-[#1a1a1a]" />
                     </div>
                   )}
                   {side === "top" && (
                     <div className="absolute -bottom-[7px] left-1/2 -translate-x-1/2">
-                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-foreground" />
+                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-[#1a1a1a]" />
                     </div>
                   )}
                   {side === "bottom" && (
                     <div className="absolute -top-[7px] left-1/2 -translate-x-1/2">
-                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-foreground" />
+                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-[#1a1a1a]" />
                     </div>
                   )}
                 </div>

package/src/components/ui/twemoji-text.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useRef, useEffect, memo } from "react";
+import twemoji from "@twemoji/api";
+
+interface TwemojiTextProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Wraps children and replaces native Unicode emojis with Twemoji SVG images.
+ * Uses twemoji.parse() on the rendered DOM node after mount/update.
+ */
+export const TwemojiText = memo(function TwemojiText({
+  children,
+  className,
+}: TwemojiTextProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      twemoji.parse(ref.current, {
+        folder: "svg",
+        ext: ".svg",
+        // Use jsDelivr CDN for the SVG assets
+        base: "https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/",
+      });
+    }
+  });
+
+  return (
+    <span ref={ref} className={className}>
+      {children}
+    </span>
+  );
+});

package/src/lib/api-security.ts

@@ -1,5 +1,130 @@
 import { NextRequest, NextResponse } from "next/server";
 
+// ============================================================================
+// Localhost guard — reject requests from non-local IPs
+// ============================================================================
+
+const LOCALHOST_IPS = new Set([
+  "127.0.0.1",
+  "::1",
+  "::ffff:127.0.0.1",
+  "localhost",
+]);
+
+/**
+ * Reject requests that don't originate from localhost.
+ * Uses x-forwarded-for (if behind a proxy) or falls back to the host header.
+ * Returns a 403 response if the request is from a non-local IP, or null if OK.
+ */
+export function checkLocalhost(request: NextRequest): NextResponse | null {
+  // If running in development, skip the check
+  if (process.env.NODE_ENV === "development") return null;
+
+  const forwarded = request.headers.get("x-forwarded-for");
+  const host = request.headers.get("host") || "";
+
+  // Check x-forwarded-for first (proxy scenario)
+  if (forwarded) {
+    const clientIp = forwarded.split(",")[0].trim();
+    if (!LOCALHOST_IPS.has(clientIp)) {
+      return NextResponse.json(
+        { error: "Forbidden — Castle is only accessible from localhost" },
+        { status: 403 }
+      );
+    }
+  }
+
+  // Check host header — reject if it's not a localhost variant
+  const hostname = host.split(":")[0];
+  if (hostname && !LOCALHOST_IPS.has(hostname)) {
+    return NextResponse.json(
+      { error: "Forbidden — Castle is only accessible from localhost" },
+      { status: 403 }
+    );
+  }
+
+  return null;
+}
+
+// ============================================================================
+// Rate limiting — in-memory sliding window
+// ============================================================================
+
+interface RateLimitEntry {
+  timestamps: number[];
+}
+
+const rateLimitStore = new Map<string, RateLimitEntry>();
+
+// Clean up stale entries every 5 minutes
+let cleanupTimer: ReturnType<typeof setInterval> | null = null;
+function ensureCleanup() {
+  if (cleanupTimer) return;
+  cleanupTimer = setInterval(() => {
+    const now = Date.now();
+    for (const [key, entry] of rateLimitStore.entries()) {
+      entry.timestamps = entry.timestamps.filter((t) => now - t < 60_000);
+      if (entry.timestamps.length === 0) rateLimitStore.delete(key);
+    }
+  }, 5 * 60_000);
+  // Don't prevent process exit
+  if (typeof cleanupTimer === "object" && "unref" in cleanupTimer) {
+    cleanupTimer.unref();
+  }
+}
+
+/**
+ * Simple in-memory rate limiter using a sliding window.
+ *
+ * @param key    — Unique key for the rate limit bucket (e.g. "chat:send" or IP-based)
+ * @param limit  — Max requests allowed within the window
+ * @param windowMs — Window duration in milliseconds (default: 60 seconds)
+ * @returns 429 response if rate limit exceeded, or null if OK
+ */
+export function checkRateLimit(
+  key: string,
+  limit: number,
+  windowMs = 60_000
+): NextResponse | null {
+  ensureCleanup();
+
+  const now = Date.now();
+  let entry = rateLimitStore.get(key);
+
+  if (!entry) {
+    entry = { timestamps: [] };
+    rateLimitStore.set(key, entry);
+  }
+
+  // Drop timestamps outside the window
+  entry.timestamps = entry.timestamps.filter((t) => now - t < windowMs);
+
+  if (entry.timestamps.length >= limit) {
+    return NextResponse.json(
+      { error: "Too many requests — please slow down" },
+      { status: 429 }
+    );
+  }
+
+  entry.timestamps.push(now);
+  return null;
+}
+
+/**
+ * Helper to build a rate-limit key from the request IP + route.
+ */
+export function rateLimitKey(request: NextRequest, route: string): string {
+  const ip =
+    request.headers.get("x-forwarded-for")?.split(",")[0].trim() ||
+    request.headers.get("x-real-ip") ||
+    "local";
+  return `${ip}:${route}`;
+}
+
+// ============================================================================
+// CSRF protection
+// ============================================================================
+
 /**
  * Verify that a mutating API request originated from the Castle UI itself,
  * not from a cross-origin attacker (CSRF protection).

package/src/lib/date-utils.ts

@@ -0,0 +1,79 @@
+// ============================================================================
+// Shared date formatting — consistent across the app
+// ============================================================================
+//
+// Formats:
+//   formatDate(ts)        → "9 February 2026"
+//   formatDateTime(ts)    → "9 February 2026 at 2:24 am"
+//   formatTime(ts)        → "2:24 am"
+//   formatTimeAgo(ts)     → "3 hours ago", "2 days ago", etc.
+//   formatDateShort(ts)   → "9 Feb" (for compact UI like search results)
+
+/**
+ * "9 February 2026"
+ */
+export function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+}
+
+/**
+ * "9 February 2026 at 2:24 am"
+ */
+export function formatDateTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  const datePart = date.toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+  const timePart = date.toLocaleTimeString("en-GB", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+  return `${datePart} at ${timePart}`;
+}
+
+/**
+ * "2:24 am"
+ */
+export function formatTime(timestamp: number): string {
+  return new Date(timestamp).toLocaleTimeString("en-GB", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
+/**
+ * "3 hours ago", "2 days ago", "just now", etc.
+ */
+export function formatTimeAgo(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+
+  const seconds = Math.floor(diff / 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 < 7) return `${days}d ago`;
+
+  const weeks = Math.floor(days / 7);
+  if (weeks < 5) return `${weeks}w ago`;
+
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+
+  const years = Math.floor(days / 365);
+  return `${years}y ago`;
+}