@castlekit/castle 0.1.6 → 0.3.0

package/src/app/api/settings/avatar/route.ts

@@ -0,0 +1,190 @@
+import { NextRequest, NextResponse } from "next/server";
+import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, unlinkSync } from "fs";
+import { join } from "path";
+import { homedir } from "os";
+import sharp from "sharp";
+import { setSetting } from "@/lib/db/queries";
+import { checkCsrf, checkRateLimit, rateLimitKey } from "@/lib/api-security";
+
+export const dynamic = "force-dynamic";
+
+const MAX_UPLOAD_SIZE = 5 * 1024 * 1024; // 5MB raw upload limit
+const AVATAR_SIZE = 256; // px (square)
+const MAX_OUTPUT_SIZE = 100 * 1024; // 100KB after processing
+
+const ALLOWED_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/gif",
+]);
+
+const AVATARS_DIR = join(homedir(), ".castle", "avatars");
+
+/**
+ * Resize and compress an avatar image to 256x256, under 100KB.
+ */
+async function processAvatar(input: Buffer): Promise<{ data: Buffer; ext: string }> {
+  const processed = sharp(input).resize(AVATAR_SIZE, AVATAR_SIZE, {
+    fit: "cover",
+    position: "centre",
+  });
+
+  // Try PNG first (transparency support)
+  let data = await processed.png({ quality: 80, compressionLevel: 9 }).toBuffer();
+  if (data.length <= MAX_OUTPUT_SIZE) return { data, ext: ".png" };
+
+  // WebP (better compression, keeps transparency)
+  data = await processed.webp({ quality: 80 }).toBuffer();
+  if (data.length <= MAX_OUTPUT_SIZE) return { data, ext: ".webp" };
+
+  // JPEG with lower quality
+  data = await processed.jpeg({ quality: 70 }).toBuffer();
+  if (data.length <= MAX_OUTPUT_SIZE) return { data, ext: ".jpg" };
+
+  // Last resort
+  data = await processed.jpeg({ quality: 40 }).toBuffer();
+  return { data, ext: ".jpg" };
+}
+
+// ============================================================================
+// GET /api/settings/avatar — Serve user avatar
+// ============================================================================
+
+const MIME_TYPES: Record<string, string> = {
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+};
+
+export async function GET() {
+  if (!existsSync(AVATARS_DIR)) {
+    return new NextResponse(null, { status: 404 });
+  }
+
+  // Find user avatar file
+  const files = readdirSync(AVATARS_DIR).filter((f) => f.startsWith("user."));
+  if (files.length === 0) {
+    return new NextResponse(null, { status: 404 });
+  }
+
+  const filePath = join(AVATARS_DIR, files[0]);
+  const data = readFileSync(filePath);
+  const ext = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
+  const contentType = MIME_TYPES[ext] || "image/png";
+
+  return new NextResponse(data, {
+    headers: {
+      "Content-Type": contentType,
+      "Cache-Control": "public, max-age=60",
+    },
+  });
+}
+
+// ============================================================================
+// POST /api/settings/avatar — Upload user avatar
+// ============================================================================
+
+export async function POST(request: NextRequest) {
+  const csrfError = checkCsrf(request);
+  if (csrfError) return csrfError;
+
+  // Rate limit: 10 avatar uploads per minute
+  const rl = checkRateLimit(rateLimitKey(request, "avatar:upload"), 10);
+  if (rl) return rl;
+
+  const formData = await request.formData();
+  const file = formData.get("avatar") as File | null;
+
+  if (!file) {
+    return NextResponse.json({ error: "No file provided" }, { status: 400 });
+  }
+
+  if (!ALLOWED_TYPES.has(file.type)) {
+    return NextResponse.json(
+      { error: "Unsupported format. Use PNG, JPEG, WebP, or GIF." },
+      { status: 400 }
+    );
+  }
+
+  if (file.size > MAX_UPLOAD_SIZE) {
+    return NextResponse.json(
+      { error: "File too large (max 5MB)" },
+      { status: 400 }
+    );
+  }
+
+  // Process image
+  let processed: { data: Buffer; ext: string };
+  try {
+    const rawBuffer = Buffer.from(await file.arrayBuffer());
+    processed = await processAvatar(rawBuffer);
+  } catch (err) {
+    return NextResponse.json(
+      { error: `Failed to process image: ${err instanceof Error ? err.message : "unknown"}` },
+      { status: 400 }
+    );
+  }
+
+  // Remove any existing user avatar files
+  try {
+    mkdirSync(AVATARS_DIR, { recursive: true, mode: 0o755 });
+    if (existsSync(AVATARS_DIR)) {
+      const existing = readdirSync(AVATARS_DIR).filter((f) => f.startsWith("user."));
+      for (const f of existing) {
+        unlinkSync(join(AVATARS_DIR, f));
+      }
+    }
+  } catch {
+    // silent
+  }
+
+  // Save new avatar
+  const fileName = `user${processed.ext}`;
+  const filePath = join(AVATARS_DIR, fileName);
+
+  try {
+    writeFileSync(filePath, processed.data);
+  } catch (err) {
+    return NextResponse.json(
+      { error: `Failed to save avatar: ${err instanceof Error ? err.message : "unknown"}` },
+      { status: 500 }
+    );
+  }
+
+  // Store the avatar path with a version timestamp for cache-busting
+  setSetting("avatarPath", `${fileName}?t=${Date.now()}`);
+
+  return NextResponse.json({
+    success: true,
+    avatar: `/api/settings/avatar?t=${Date.now()}`,
+    size: processed.data.length,
+  });
+}
+
+// ============================================================================
+// DELETE /api/settings/avatar — Remove user avatar
+// ============================================================================
+
+export async function DELETE(request: NextRequest) {
+  const csrfError = checkCsrf(request);
+  if (csrfError) return csrfError;
+
+  try {
+    if (existsSync(AVATARS_DIR)) {
+      const existing = readdirSync(AVATARS_DIR).filter((f) => f.startsWith("user."));
+      for (const f of existing) {
+        unlinkSync(join(AVATARS_DIR, f));
+      }
+    }
+    setSetting("avatarPath", "");
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    return NextResponse.json(
+      { error: `Failed to remove avatar: ${err instanceof Error ? err.message : "unknown"}` },
+      { status: 500 }
+    );
+  }
+}

package/src/app/api/settings/route.ts

@@ -0,0 +1,88 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAllSettings, setSetting } from "@/lib/db/queries";
+import { checkCsrf } from "@/lib/api-security";
+
+// Known setting keys and their validation
+const VALID_KEYS: Record<string, { maxLength: number }> = {
+  displayName: { maxLength: 100 },
+  avatarPath: { maxLength: 255 },
+  tooltips: { maxLength: 5 }, // "true" or "false"
+};
+
+// ============================================================================
+// GET /api/settings — Get all settings
+// ============================================================================
+
+export async function GET() {
+  try {
+    const all = getAllSettings();
+    return NextResponse.json(all);
+  } catch (err) {
+    console.error("[Settings] GET failed:", (err as Error).message);
+    return NextResponse.json(
+      { error: "Failed to load settings" },
+      { status: 500 }
+    );
+  }
+}
+
+// ============================================================================
+// POST /api/settings — Update one or more settings
+// ============================================================================
+
+export async function POST(request: NextRequest) {
+  const csrfError = checkCsrf(request);
+  if (csrfError) return csrfError;
+
+  let body: Record<string, string>;
+
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  if (!body || typeof body !== "object") {
+    return NextResponse.json({ error: "Body must be an object" }, { status: 400 });
+  }
+
+  try {
+    for (const [key, value] of Object.entries(body)) {
+      // Validate key
+      if (!VALID_KEYS[key]) {
+        return NextResponse.json(
+          { error: `Unknown setting: ${key}` },
+          { status: 400 }
+        );
+      }
+
+      // Validate value type
+      if (typeof value !== "string") {
+        return NextResponse.json(
+          { error: `Setting "${key}" must be a string` },
+          { status: 400 }
+        );
+      }
+
+      // Validate length
+      const trimmed = value.trim();
+      if (trimmed.length > VALID_KEYS[key].maxLength) {
+        return NextResponse.json(
+          { error: `Setting "${key}" must be at most ${VALID_KEYS[key].maxLength} characters` },
+          { status: 400 }
+        );
+      }
+
+      setSetting(key, trimmed);
+    }
+
+    const all = getAllSettings();
+    return NextResponse.json(all);
+  } catch (err) {
+    console.error("[Settings] POST failed:", (err as Error).message);
+    return NextResponse.json(
+      { error: "Failed to save settings" },
+      { status: 500 }
+    );
+  }
+}

package/src/app/chat/[channelId]/error-boundary.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+export class ChatErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error("[Chat Error Boundary]", error, info.componentStack);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: undefined });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex-1 flex items-center justify-center p-8">
+          <div className="text-center space-y-4 max-w-md">
+            <AlertTriangle className="h-10 w-10 mx-auto text-warning" />
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">
+                Something went wrong
+              </h3>
+              <p className="text-sm text-foreground-secondary mt-1">
+                The chat encountered an unexpected error. Your messages are safe in the database.
+              </p>
+              {this.state.error && (
+                <p className="text-xs text-foreground-secondary/60 mt-2 font-mono">
+                  {this.state.error.message}
+                </p>
+              )}
+            </div>
+            <Button onClick={this.handleRetry} variant="primary" size="sm">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              Try Again
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/app/chat/[channelId]/page.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import { use, useState, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import { WifiOff, X, AlertCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useOpenClaw } from "@/lib/hooks/use-openclaw";
+import { useChat } from "@/lib/hooks/use-chat";
+import { useSessionStats } from "@/lib/hooks/use-session-stats";
+import { useUserSettings } from "@/lib/hooks/use-user-settings";
+import { MessageList } from "@/components/chat/message-list";
+import { ChatInput } from "@/components/chat/chat-input";
+import { SessionStatsPanel } from "@/components/chat/session-stats-panel";
+import { ChatErrorBoundary } from "./error-boundary";
+import type { AgentInfo } from "@/components/chat/agent-mention-popup";
+
+interface ChannelPageProps {
+  params: Promise<{ channelId: string }>;
+}
+
+// Module-level flag: once any channel has rendered real content, subsequent
+// channel switches use a smooth opacity transition instead of the skeleton.
+// NOTE: This persists for the entire browser session and never resets.
+// If Castle ever supports logout or multi-user, this will need a reset mechanism.
+let hasEverRendered = false;
+
+// ---------------------------------------------------------------------------
+// Skeleton loader — Facebook-style placeholder while data loads
+// ---------------------------------------------------------------------------
+const LINE_WIDTHS = ["80%", "60%", "40%", "75%", "55%", "85%", "45%", "70%", "50%"];
+
+function SkeletonMessage({ lines = 2, short = false, offset = 0 }: { lines?: number; short?: boolean; offset?: number }) {
+  return (
+    <div className="flex gap-3 mb-[4px]">
+      <div className="skeleton w-9 h-9 rounded-full shrink-0 mt-0.5" />
+      <div className="flex flex-col gap-1.5 flex-1">
+        <div className="flex items-center gap-2">
+          <div className={cn("skeleton h-3.5", short ? "w-16" : "w-24")} />
+          <div className="skeleton h-3 w-14" />
+        </div>
+        {Array.from({ length: lines }).map((_, i) => (
+          <div
+            key={i}
+            className="skeleton h-3.5"
+            style={{ width: LINE_WIDTHS[(offset + i) % LINE_WIDTHS.length] }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChatSkeleton() {
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-hidden">
+      {/* Header skeleton */}
+      <div className="py-4 border-b border-border shrink-0 min-h-[83px] flex items-center">
+        <div>
+          <div className="skeleton h-5 w-40 mb-1.5" />
+          <div className="skeleton h-3.5 w-28" />
+        </div>
+      </div>
+
+      {/* Messages skeleton */}
+      <div className="flex-1 overflow-hidden py-[20px] pr-[20px]">
+        <div className="flex flex-col gap-6">
+          <SkeletonMessage lines={3} offset={0} />
+          <SkeletonMessage lines={1} short offset={3} />
+          <SkeletonMessage lines={2} offset={4} />
+          <SkeletonMessage lines={1} short offset={6} />
+          <SkeletonMessage lines={2} offset={7} />
+          <SkeletonMessage lines={3} offset={1} />
+          <SkeletonMessage lines={1} short offset={5} />
+        </div>
+      </div>
+
+      {/* Real input, just disabled while loading */}
+      <div className="shrink-0">
+        <ChatInput
+          onSend={() => Promise.resolve()}
+          onAbort={() => Promise.resolve()}
+          sending={false}
+          streaming={false}
+          disabled
+          agents={[]}
+          channelId=""
+        />
+      </div>
+    </div>
+  );
+}
+
+function ChannelChatContent({ channelId }: { channelId: string }) {
+  // Read ?m= param for scroll-to-message from search results.
+  // useSearchParams() is reactive — it updates when the query string
+  // changes, even for same-channel navigation (e.g. clicking two
+  // different search results in the same channel).
+  const searchParams = useSearchParams();
+  const highlightMessageId = searchParams.get("m") || undefined;
+  const { agents, isConnected, isLoading: gatewayLoading, agentsLoading } = useOpenClaw();
+  const [channelName, setChannelName] = useState<string | null>(null);
+  const [channelAgentIds, setChannelAgentIds] = useState<string[]>([]);
+  const [channelCreatedAt, setChannelCreatedAt] = useState<number | null>(null);
+  const [channelArchived, setChannelArchived] = useState(false);
+  const { displayName, avatarUrl: userAvatar, isLoading: userSettingsLoading } = useUserSettings();
+
+  // Mark this channel as last accessed and fetch channel info
+  useEffect(() => {
+    // Touch (mark as last accessed)
+    fetch("/api/openclaw/chat/channels", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "touch", id: channelId }),
+    }).catch(() => {});
+
+    // Fetch channel details for the name and agents.
+    // Try active channels first, then archived if not found.
+    // Falls back to channelId as name if both fail (prevents stuck loading).
+    fetch("/api/openclaw/chat/channels")
+      .then((r) => r.json())
+      .then((data) => {
+        const ch = (data.channels || []).find(
+          (c: { id: string; name: string; agents?: string[] }) =>
+            c.id === channelId
+        );
+        if (ch) {
+          setChannelName(ch.name);
+          setChannelAgentIds(ch.agents || []);
+          setChannelCreatedAt(ch.createdAt ?? null);
+          setChannelArchived(false);
+        } else {
+          // Channel not in active list — check archived channels
+          return fetch("/api/openclaw/chat/channels?archived=1")
+            .then((r) => r.json())
+            .then((archived) => {
+              const archivedCh = (archived.channels || []).find(
+                (c: { id: string; name: string; agents?: string[] }) =>
+                  c.id === channelId
+              );
+              if (archivedCh) {
+                setChannelName(archivedCh.name);
+                setChannelAgentIds(archivedCh.agents || []);
+                setChannelCreatedAt(archivedCh.createdAt ?? null);
+                setChannelArchived(true);
+              } else {
+                // Channel not found anywhere — use ID as fallback name
+                setChannelName("Chat");
+              }
+            });
+        }
+      })
+      .catch(() => {
+        // Network error — fall back so page doesn't stay stuck
+        setChannelName("Chat");
+      });
+  }, [channelId]);
+
+  // Map agents to the AgentInfo format used by chat components
+  const chatAgents: AgentInfo[] = agents.map((a) => ({
+    id: a.id,
+    name: a.name,
+    avatar: a.avatar,
+  }));
+
+  // Get default agent (first in list)
+  const defaultAgentId = agents[0]?.id;
+
+  const {
+    messages,
+    isLoading,
+    hasMore,
+    loadMore,
+    loadingMore,
+    hasMoreAfter,
+    loadNewer,
+    loadingNewer,
+    streamingMessages,
+    isStreaming,
+    currentSessionKey,
+    sendMessage,
+    abortResponse,
+    sending,
+    sendError,
+    clearSendError,
+  } = useChat({ channelId, defaultAgentId, anchorMessageId: highlightMessageId });
+
+  const { stats, isLoading: statsLoading } = useSessionStats({
+    sessionKey: currentSessionKey,
+  });
+
+  // Don't render until channel name, agents, and user settings have all loaded.
+  const channelReady = channelName !== null && !agentsLoading && !userSettingsLoading;
+
+  // First cold load → skeleton. If agents/user are already cached (e.g.
+  // navigated from dashboard) or we've rendered before, use opacity transition.
+  const dataAlreadyCached = !agentsLoading && !userSettingsLoading;
+  if (channelReady) hasEverRendered = true;
+
+  if (!channelReady && !hasEverRendered && !dataAlreadyCached) {
+    return <ChatSkeleton />;
+  }
+
+  return (
+    <div className={cn("flex-1 flex flex-col h-full overflow-hidden transition-opacity duration-150", channelReady ? "opacity-100" : "opacity-0")}>
+      {/* Channel header — sticky */}
+      <div className="pb-4 border-b border-border flex items-center justify-between shrink-0 min-h-[83px]">
+        <div>
+          <h2 className="text-lg font-semibold text-foreground">
+            {channelName}
+            {channelArchived && (
+              <span className="ml-2 text-sm font-normal text-foreground-secondary">(Archived)</span>
+            )}
+          </h2>
+          {(displayName || channelAgentIds.length > 0) && agents.length > 0 && (
+            <p className="text-sm text-foreground-secondary mt-0.5">
+              with{" "}
+              {(() => {
+                const names = [
+                  displayName,
+                  ...channelAgentIds.map(
+                    (id) => agents.find((a) => a.id === id)?.name || id
+                  ),
+                ].filter(Boolean);
+                if (names.length <= 2) return names.join(" & ");
+                return names.slice(0, -1).join(", ") + " & " + names[names.length - 1];
+              })()}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Connection warning banner — sticky */}
+      {!isConnected && !gatewayLoading && (
+        <div className="px-4 py-2 bg-error/10 border-b border-error/20 flex items-center gap-2 text-sm text-error shrink-0">
+          <WifiOff className="h-4 w-4" />
+          <span>Gateway disconnected. Reconnecting...</span>
+        </div>
+      )}
+
+      {/* Session stats — sticky */}
+      <div className="shrink-0">
+        <SessionStatsPanel stats={stats} isLoading={statsLoading} />
+      </div>
+
+      {/* Messages — this is the ONLY scrollable area */}
+      <MessageList
+        messages={messages}
+        loading={isLoading}
+        loadingMore={loadingMore}
+        hasMore={hasMore}
+        agents={chatAgents}
+        userAvatar={userAvatar}
+        streamingMessages={streamingMessages}
+        onLoadMore={loadMore}
+        hasMoreAfter={hasMoreAfter}
+        onLoadNewer={loadNewer}
+        loadingNewer={loadingNewer}
+        channelId={channelId}
+        channelName={channelName}
+        channelCreatedAt={channelCreatedAt}
+        highlightMessageId={highlightMessageId}
+      />
+
+      {/* Error toast — sticky above input */}
+      {sendError && (
+        <div className="mx-4 mb-2 px-4 py-2 rounded-lg bg-error/10 border border-error/20 flex items-center justify-between shrink-0">
+          <div className="flex items-center gap-2 text-sm text-error">
+            <AlertCircle className="h-4 w-4 shrink-0" />
+            <span>{sendError}</span>
+          </div>
+          <button
+            onClick={clearSendError}
+            className="p-1 hover:bg-error/20 rounded"
+          >
+            <X className="h-3 w-3 text-error" />
+          </button>
+        </div>
+      )}
+
+      {/* Input — sticky at bottom */}
+      <div className="shrink-0">
+        <ChatInput
+          onSend={sendMessage}
+          onAbort={abortResponse}
+          sending={sending}
+          streaming={isStreaming}
+          disabled={!isConnected && !gatewayLoading}
+          agents={chatAgents}
+          defaultAgentId={defaultAgentId}
+          channelId={channelId}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function ChannelPage({ params }: ChannelPageProps) {
+  const { channelId } = use(params);
+
+  return (
+    <ChatErrorBoundary>
+      <ChannelChatContent channelId={channelId} />
+    </ChatErrorBoundary>
+  );
+}