@castlekit/castle 0.1.6 → 0.3.0

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>

package/src/app/page.tsx

@@ -3,18 +3,46 @@
 import { useRef, useState, useCallback } from "react";
 import { Bot, Wifi, WifiOff, Crown, RefreshCw, Loader2, AlertCircle, Camera } from "lucide-react";
 import { Sidebar } from "@/components/layout/sidebar";
-import { UserMenu } from "@/components/layout/user-menu";
+
 import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
 import { useOpenClaw, type OpenClawAgent } from "@/lib/hooks/use-openclaw";
+import { useAgentStatus, type AgentStatus } from "@/lib/hooks/use-agent-status";
 
 function getInitials(name: string) {
   return name.slice(0, 2).toUpperCase();
 }
 
+function getStatusLabel(status: AgentStatus, isConnected: boolean): string {
+  if (!isConnected) return "Offline";
+  switch (status) {
+    case "thinking": return "Thinking";
+    case "active": return "Active";
+    default: return "Idle";
+  }
+}
+
+function getStatusBadgeVariant(status: AgentStatus, isConnected: boolean): "success" | "warning" | "outline" {
+  if (!isConnected) return "outline";
+  switch (status) {
+    case "thinking": return "warning";
+    case "active": return "success";
+    default: return "outline";
+  }
+}
+
+function getAvatarStatus(status: AgentStatus, isConnected: boolean): "online" | "offline" | "busy" | "away" {
+  if (!isConnected) return "offline";
+  switch (status) {
+    case "thinking": return "away";
+    case "active": return "online";
+    default: return "offline";
+  }
+}
+
 function AgentCard({
   agent,
   isPrimary,
@@ -28,6 +56,8 @@ function AgentCard({
 }) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
+  const { getStatus } = useAgentStatus();
+  const agentStatus = getStatus(agent.id);
 
   const handleAvatarClick = useCallback(() => {
     if (!isConnected) return;
@@ -79,23 +109,23 @@ function AgentCard({
     <Card
       variant="bordered"
       className={cn(
-        "p-4 transition-colors",
+        "py-4 pl-5 pr-4 transition-colors min-h-[80px] flex items-center",
         isConnected
           ? "hover:border-border-hover"
           : "opacity-60"
       )}
     >
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between flex-1">
         <div className="flex items-center gap-3">
           {/* Clickable avatar with upload overlay */}
           <button
             type="button"
             onClick={handleAvatarClick}
             disabled={!isConnected || uploading}
-            className="relative group rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            className="relative group rounded-[4px] focus:outline-none focus-visible:ring-2 focus-visible:ring-accent leading-[0]"
             title={isConnected ? "Click to change avatar" : undefined}
           >
-            <Avatar size="md" status={isConnected ? "online" : "offline"}>
+            <Avatar size="md" status={getAvatarStatus(agentStatus, isConnected)} statusPulse={agentStatus === "thinking"}>
               {agent.avatar ? (
                 <AvatarImage
                   src={agent.avatar}
@@ -109,12 +139,12 @@ function AgentCard({
               )}
             </Avatar>
             {isConnected && !uploading && (
-              <div className="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+              <div className="absolute inset-0 rounded-[4px] bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                 <Camera className="h-4 w-4 text-white" />
               </div>
             )}
             {uploading && (
-              <div className="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center">
+              <div className="absolute inset-0 rounded-[4px] bg-black/50 flex items-center justify-center">
                 <Loader2 className="h-4 w-4 text-white animate-spin" />
               </div>
             )}
@@ -146,10 +176,10 @@ function AgentCard({
           </div>
         </div>
         <Badge
-          variant={isConnected ? "success" : "outline"}
+          variant={getStatusBadgeVariant(agentStatus, isConnected)}
           size="sm"
         >
-          {isConnected ? "Active" : "Offline"}
+          {getStatusLabel(agentStatus, isConnected)}
         </Badge>
       </div>
     </Card>
@@ -230,13 +260,16 @@ function AgentsSkeleton() {
   return (
     <div className="grid gap-3">
       {[1, 2, 3].map((i) => (
-        <Card key={i} variant="bordered" className="p-4">
-          <div className="flex items-center gap-3">
-            <div className="h-10 w-10 rounded-full bg-surface-hover animate-pulse" />
-            <div className="space-y-2">
-              <div className="h-4 w-24 bg-surface-hover rounded animate-pulse" />
-              <div className="h-3 w-32 bg-surface-hover rounded animate-pulse" />
+        <Card key={i} variant="bordered" className="p-4 min-h-[80px] flex items-center">
+          <div className="flex items-center justify-between flex-1">
+            <div className="flex items-center gap-3">
+              <div className="skeleton h-10 w-10 rounded-full" />
+              <div className="space-y-2">
+                <div className="skeleton h-4 w-24 rounded" />
+                <div className="skeleton h-3 w-32 rounded" />
+              </div>
             </div>
+            <div className="skeleton h-5 w-14 rounded-full" />
           </div>
         </Card>
       ))}
@@ -294,7 +327,6 @@ export default function HomePage() {
   return (
     <div className="min-h-screen bg-background">
       <Sidebar variant="solid" />
-      <UserMenu className="fixed top-5 right-6 z-50" variant="solid" />
 
       <main className="min-h-screen ml-[80px]">
         <div className="p-8 max-w-4xl">
@@ -331,7 +363,7 @@ export default function HomePage() {
               )}
             </div>
 
-            {agentsLoading && isLoading ? (
+            {agentsLoading || (isLoading && agents.length === 0) ? (
               <AgentsSkeleton />
             ) : agents.length > 0 ? (
               <div className="grid gap-3">