@castlekit/castle 0.1.5 → 0.3.0

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>
+  );
+}

package/src/app/chat/layout.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Archive } from "lucide-react";
+import { Sidebar } from "@/components/layout/sidebar";
+
+import { ChannelList } from "@/components/chat/channel-list";
+import { ArchivedChannels } from "@/components/chat/archived-channels";
+import { CreateChannelDialog } from "@/components/chat/create-channel-dialog";
+import { useParams, useRouter } from "next/navigation";
+import type { Channel } from "@/lib/types/chat";
+
+export default function ChatLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const params = useParams();
+  const router = useRouter();
+  const channelId = params?.channelId as string | undefined;
+  const [showCreate, setShowCreate] = useState(false);
+  const [showArchived, setShowArchived] = useState(false);
+  const [newChannel, setNewChannel] = useState<Channel | null>(null);
+
+  const handleChannelCreated = (channel: Channel) => {
+    setNewChannel(channel);
+    setShowCreate(false);
+    router.push(`/chat/${channel.id}`);
+  };
+
+  return (
+    <div className="h-screen overflow-hidden bg-background">
+      <Sidebar variant="solid" />
+
+      <div className="h-screen ml-[80px] flex py-[20px]">
+        {/* Channel sidebar — floating glass panel, aligned with sidebar pill */}
+        <div className="w-[290px] shrink-0 px-[25px]">
+          <div className="h-full panel flex flex-col">
+            <div className="pl-4 pr-3 py-3 flex items-center justify-between shrink-0 border-b border-border">
+              <h2 className="text-sm font-semibold text-foreground">
+                Channels
+              </h2>
+              <button
+                onClick={() => setShowCreate(true)}
+                title="New channel"
+                className="flex items-center justify-center h-7 w-7 rounded-[var(--radius-sm)] bg-accent text-white hover:bg-accent/90 transition-colors cursor-pointer"
+              >
+                <Plus className="h-4 w-4 stroke-[2.5]" />
+              </button>
+            </div>
+            <div className="flex-1 overflow-y-auto px-3 py-3">
+              <ChannelList
+                activeChannelId={channelId}
+                showCreateDialog={showCreate}
+                onCreateDialogChange={setShowCreate}
+                newChannel={newChannel}
+              />
+            </div>
+            <div className="shrink-0 px-3 pb-3">
+              <button
+                onClick={() => setShowArchived(true)}
+                className="flex items-center justify-center gap-2 w-full px-2 py-2 text-xs text-foreground-secondary hover:text-foreground transition-colors cursor-pointer rounded-[var(--radius-sm)] hover:bg-surface-hover"
+              >
+                <Archive className="h-3.5 w-3.5" />
+                Archived channels
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Main content — fills remaining space, aligned with floating boxes */}
+        <div className="flex-1 min-w-0 h-full overflow-hidden pr-[20px] flex flex-col">
+          {children}
+        </div>
+      </div>
+
+      {/* Create channel dialog — rendered at layout root, outside glass panel */}
+      <CreateChannelDialog
+        open={showCreate}
+        onOpenChange={setShowCreate}
+        onCreated={handleChannelCreated}
+      />
+
+      {/* Archived channels dialog */}
+      <ArchivedChannels
+        open={showArchived}
+        onOpenChange={setShowArchived}
+        onRestored={(channel) => {
+          setNewChannel(channel);
+          setShowArchived(false);
+          router.push(`/chat/${channel.id}`);
+        }}
+      />
+    </div>
+  );
+}

package/src/app/chat/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { MessageCircle, Loader2 } from "lucide-react";
+
+export default function ChatPage() {
+  const router = useRouter();
+  const [checking, setChecking] = useState(true);
+
+  useEffect(() => {
+    // Ask the DB for the last accessed channel
+    fetch("/api/openclaw/chat/channels?last=1")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (data?.channelId) {
+          router.replace(`/chat/${data.channelId}`);
+          return;
+        }
+        // No last accessed — try the most recent channel
+        return fetch("/api/openclaw/chat/channels")
+          .then((res) => (res.ok ? res.json() : null))
+          .then((chData) => {
+            const channels = chData?.channels;
+            if (channels && channels.length > 0) {
+              router.replace(`/chat/${channels[0].id}`);
+            } else {
+              setChecking(false);
+            }
+          });
+      })
+      .catch(() => setChecking(false));
+  }, [router]);
+
+  if (checking) {
+    return <div className="flex-1" />;
+  }
+
+  return (
+    <div className="flex-1 flex items-center justify-center">
+      <div className="text-center space-y-3">
+        <MessageCircle className="h-12 w-12 mx-auto text-foreground-secondary/30" />
+        <div>
+          <h2 className="text-lg font-semibold text-foreground">Welcome to Chat</h2>
+          <p className="text-sm text-foreground-secondary mt-1">
+            Select a channel from the sidebar or create a new one to start chatting.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/globals.css

@@ -86,8 +86,8 @@
   --border: #35353d;
   --border-hover: #45454d;
   
-  --foreground: #fafafa;
-  --foreground-secondary: #a1a1aa;
+  --foreground: #d1d2d3;
+  --foreground-secondary: #9a9b9e;
   --foreground-muted: #71717a;
   
   --accent: #3b82f6;
@@ -186,6 +186,43 @@ body {
   overscroll-behavior: none;
 }
 
+/* Twemoji — inline emoji images matching text size exactly.
+   Sized to 1em so the img is no taller than a capital letter,
+   preventing any line-height expansion. */
+img.emoji {
+  display: inline;
+  height: 1em;
+  width: 1em;
+  margin: 0 0.05em;
+  vertical-align: -0.1em;
+}
+
+/* Custom scrollbar — overlay style, just the thumb, no track */
+/* WebKit (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 6px;
+  background: none;
+}
+::-webkit-scrollbar-track {
+  background: none;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+::-webkit-scrollbar-corner {
+  background: none;
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
 /* ============================================
    Reusable Component Patterns
    ============================================ */
@@ -221,6 +258,21 @@ body {
     @apply cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50;
   }
 
+  /* Panel — standard container style matching dashboard cards (bg-surface, bordered, rounded).
+     Use for sidebars, floating panels, content sections. */
+  .panel {
+    @apply rounded-[var(--radius-md)] bg-surface border border-border;
+  }
+
+  /* Selectable list — compact spacing for checkbox/radio lists, nav lists, etc.
+     Apply .selectable-list to the container; .selectable-list-item to each row. */
+  .selectable-list {
+    @apply space-y-0.5;
+  }
+  .selectable-list-item {
+    @apply flex items-center gap-2.5 px-2 py-1.5 rounded-[var(--radius-sm)] hover:bg-surface-hover cursor-pointer text-sm;
+  }
+
   /* Input base - shared input/select/textarea styles */
   .input-base {
     @apply h-11 w-full rounded-[var(--radius-sm)] border px-3 py-2 text-sm text-foreground transition-all;
@@ -284,3 +336,38 @@ body {
     transform: scale(1);
   }
 }
+
+/* Search result highlight flash */
+@keyframes highlight-flash {
+  0% {
+    background-color: oklch(from var(--color-accent) l c h / 0.15);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+.animate-highlight-flash {
+  animation: highlight-flash 2s ease-out;
+}
+
+/* Skeleton shimmer */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    oklch(from var(--color-foreground) l c h / 0.06) 25%,
+    oklch(from var(--color-foreground) l c h / 0.12) 50%,
+    oklch(from var(--color-foreground) l c h / 0.06) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+

package/src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { ThemeProvider } from "next-themes";
+import { PresenceProvider } from "@/components/providers/presence-provider";
+import { SearchProvider } from "@/components/providers/search-provider";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -34,7 +36,11 @@ export default function RootLayout({
           enableSystem={false}
           disableTransitionOnChange
         >
-          {children}
+          <PresenceProvider>
+            <SearchProvider>
+              {children}
+            </SearchProvider>
+          </PresenceProvider>
         </ThemeProvider>
       </body>
     </html>