@castlekit/castle 0.0.1 → 0.1.0

package/src/app/api/openclaw/sessions/route.ts

@@ -0,0 +1,62 @@
+import { NextResponse } from "next/server";
+import { readdirSync, readFileSync, existsSync, statSync } from "fs";
+import { join, basename } from "path";
+import { getOpenClawDir } from "@/lib/config";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/openclaw/sessions
+ * God mode: reads session files directly from ~/.openclaw/ filesystem.
+ * Returns a list of sessions with basic metadata.
+ */
+export async function GET() {
+  const openclawDir = getOpenClawDir();
+  const agentsDir = join(openclawDir, "agents");
+
+  if (!existsSync(agentsDir)) {
+    return NextResponse.json({ sessions: [] });
+  }
+
+  try {
+    const sessions: Array<{
+      agentId: string;
+      sessionId: string;
+      sizeBytes: number;
+      modifiedAt: string;
+    }> = [];
+
+    // Scan all agent directories
+    const agentDirs = readdirSync(agentsDir, { withFileTypes: true })
+      .filter((d) => d.isDirectory());
+
+    for (const agentDir of agentDirs) {
+      const sessionsDir = join(agentsDir, agentDir.name, "sessions");
+      if (!existsSync(sessionsDir)) continue;
+
+      const files = readdirSync(sessionsDir)
+        .filter((f) => f.endsWith(".jsonl"));
+
+      for (const file of files) {
+        const filePath = join(sessionsDir, file);
+        const stat = statSync(filePath);
+        sessions.push({
+          agentId: agentDir.name,
+          sessionId: basename(file, ".jsonl"),
+          sizeBytes: stat.size,
+          modifiedAt: stat.mtime.toISOString(),
+        });
+      }
+    }
+
+    // Sort by most recently modified
+    sessions.sort((a, b) => new Date(b.modifiedAt).getTime() - new Date(a.modifiedAt).getTime());
+
+    return NextResponse.json({ sessions });
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Failed to read sessions" },
+      { status: 500 }
+    );
+  }
+}

package/src/app/globals.css

@@ -0,0 +1,286 @@
+@import "tailwindcss";
+
+/* ============================================
+   Castle Design System - Design Tokens
+   ============================================ */
+
+:root {
+  /* Typography */
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+
+  /* Spacing (8px base) */
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-24: 96px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-full: 9999px;
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+}
+
+/* Light Mode (default) */
+:root {
+  --background: #f8fafc;
+  --background-secondary: #f1f5f9;
+  --surface: #ffffff;
+  --surface-hover: #f8fafc;
+  --border: #e2e8f0;
+  --border-hover: #cbd5e1;
+  
+  --foreground: #0f172a;
+  --foreground-secondary: #475569;
+  --foreground-muted: #94a3b8;
+  
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --accent-foreground: #ffffff;
+  
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #3b82f6;
+  
+  /* Glass effect (light mode) */
+  --glass-bg: #ffffff7a;
+  --glass-border: #ffffff3d;
+  --glass-shadow: #0000000d;
+  
+  /* Input (light mode) */
+  --input-background: #ffffff;
+  --input-border: #e2e8f0;
+  --input-focus: #3b82f6;
+  
+  /* Logo */
+  --logo-color: #18181b;
+  
+  /* Dashboard container */
+  --dashboard-bg: #f1f5f9;
+  --dashboard-overlay: transparent;
+  --greeting-text: #000000;
+  --greeting-text-secondary: rgba(0, 0, 0, 0.7);
+  
+  /* Glass card background */
+  --glass-card-bg: rgba(255, 255, 255, 0.85);
+}
+
+/* Dark Mode */
+.dark, :root.dark, html.dark {
+  --background: #1a1a1f;
+  --background-secondary: #141418;
+  --surface: #222228;
+  --surface-hover: #2a2a30;
+  --border: #35353d;
+  --border-hover: #45454d;
+  
+  --foreground: #fafafa;
+  --foreground-secondary: #a1a1aa;
+  --foreground-muted: #71717a;
+  
+  --accent: #3b82f6;
+  --accent-hover: #60a5fa;
+  --accent-foreground: #ffffff;
+  
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #3b82f6;
+  
+  /* Glass effect (dark mode) */
+  --glass-bg: rgba(30, 30, 35, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: rgba(0, 0, 0, 0.3);
+  
+  /* Input (dark mode) */
+  --input-background: #141418;
+  --input-border: #35353d;
+  --input-focus: #3b82f6;
+  
+  /* Logo */
+  --logo-color: #e8e8ec;
+  
+  /* Dashboard container */
+  --dashboard-bg: #141418;
+  --dashboard-overlay: rgba(0, 0, 0, 0.5);
+  --greeting-text: #ffffff;
+  --greeting-text-secondary: rgba(255, 255, 255, 0.7);
+  
+  /* Glass card background */
+  --glass-card-bg: rgba(255, 255, 255, 0.05);
+}
+
+@theme inline {
+  /* Colors */
+  --color-background: var(--background);
+  --color-background-secondary: var(--background-secondary);
+  --color-surface: var(--surface);
+  --color-surface-hover: var(--surface-hover);
+  --color-border: var(--border);
+  --color-border-hover: var(--border-hover);
+  
+  --color-foreground: var(--foreground);
+  --color-foreground-secondary: var(--foreground-secondary);
+  --color-foreground-muted: var(--foreground-muted);
+  
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-foreground: var(--accent-foreground);
+  
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error: var(--error);
+  --color-info: var(--info);
+  
+  /* Input specific */
+  --color-input-background: var(--input-background);
+  --color-input-border: var(--input-border);
+  --color-input-focus: var(--input-focus);
+  
+  /* Typography */
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  
+  /* Border Radius */
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-full: var(--radius-full);
+}
+
+/* Base styles */
+html {
+  /* Prevent viewport scrollbar "blink" during hydration/layout settling */
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+  overscroll-behavior: none;
+}
+
+/* Hint native controls/scrollbars about theme */
+:root {
+  color-scheme: light;
+}
+.dark, :root.dark, html.dark {
+  color-scheme: dark;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans), system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* Disable overscroll bounce effect */
+  overscroll-behavior: none;
+}
+
+/* ============================================
+   Reusable Component Patterns
+   ============================================ */
+
+/* Glass effect - frosted glass style for dashboard/ambient UI */
+.glass {
+  backdrop-filter: blur(3px);
+  border: 1px solid var(--glass-border);
+  background-color: var(--glass-bg);
+  box-shadow: 0 1px 2px var(--glass-shadow);
+}
+
+@layer utilities {
+  /* Focus ring - consistent focus state across interactive elements */
+  .focus-ring {
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+  }
+
+  /* Disabled state - consistent disabled styling */
+  .disabled-state {
+    @apply disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  /* Label - consistent form label styling */
+  .form-label {
+    @apply block text-sm text-foreground-muted mb-2;
+  }
+}
+
+@layer components {
+  /* Interactive base - combines cursor, focus, and disabled */
+  .interactive {
+    @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;
+  }
+
+  /* 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;
+    @apply bg-[var(--input-background)] border-[var(--input-border)];
+    @apply focus:outline-none focus:border-[var(--input-focus)];
+    @apply disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  .input-base[aria-invalid="true"],
+  .input-base.error {
+    @apply border-error focus:border-error;
+  }
+}
+
+/* Scrollbar styling (global) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* Heart glow animation */
+@keyframes heart-glow {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* Heart beat pulse animation */
+@keyframes heart-beat {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.3);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Castle",
+  description: "The multi-agent workspace",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { Bot, Wifi, WifiOff, Crown, RefreshCw, Loader2, AlertCircle } 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";
+
+function getInitials(name: string) {
+  return name.slice(0, 2).toUpperCase();
+}
+
+function AgentCard({ agent, isPrimary, isConnected }: { agent: OpenClawAgent; isPrimary: boolean; isConnected: boolean }) {
+  return (
+    <Card
+      variant="bordered"
+      className={cn(
+        "p-4 transition-colors",
+        isConnected
+          ? "hover:border-border-hover"
+          : "opacity-60"
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Avatar size="md" status={isConnected ? "online" : "offline"}>
+            {agent.avatar ? (
+              <AvatarImage
+                src={agent.avatar}
+                alt={agent.name}
+                className={cn(!isConnected && "grayscale")}
+              />
+            ) : (
+              <AvatarFallback>
+                {agent.emoji || getInitials(agent.name)}
+              </AvatarFallback>
+            )}
+          </Avatar>
+          <div>
+            <div className="flex items-center gap-2">
+              <p className="text-sm font-medium text-foreground">
+                {agent.name}
+              </p>
+              {isPrimary && (
+                <span className="flex items-center gap-1 text-xs text-accent">
+                  <Crown className="h-3 w-3" />
+                  Primary
+                </span>
+              )}
+            </div>
+            <p className="text-xs text-foreground-muted">
+              {isConnected
+                ? (agent.description || "OpenClaw Agent")
+                : "Unreachable"}
+            </p>
+          </div>
+        </div>
+        <Badge
+          variant={isConnected ? "success" : "outline"}
+          size="sm"
+        >
+          {isConnected ? "Active" : "Offline"}
+        </Badge>
+      </div>
+    </Card>
+  );
+}
+
+function ConnectionCard({
+  isConnected,
+  isLoading,
+  isConfigured,
+  serverVersion,
+  latency,
+  error,
+  onRefresh,
+}: {
+  isConnected: boolean;
+  isLoading: boolean;
+  isConfigured: boolean;
+  serverVersion?: string;
+  latency?: number;
+  error?: string;
+  onRefresh: () => void;
+}) {
+  const getSubtitle = () => {
+    if (isLoading) return "Connecting to Gateway...";
+    if (!isConfigured) return "Run 'castle setup' to configure";
+    if (isConnected) {
+      const parts = ["Connected"];
+      if (serverVersion) parts[0] = `Connected to OpenClaw v${serverVersion}`;
+      if (latency) parts.push(`${latency}ms`);
+      return parts.join(" · ");
+    }
+    return error || "Not connected";
+  };
+
+  return (
+    <Card variant="bordered" className="mb-8">
+      <CardContent className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {isLoading ? (
+            <Loader2 className="h-5 w-5 text-foreground-muted animate-spin" />
+          ) : isConnected ? (
+            <Wifi className="h-5 w-5 text-success" />
+          ) : (
+            <WifiOff className="h-5 w-5 text-error" />
+          )}
+          <div>
+            <p className="text-sm font-medium text-foreground">
+              OpenClaw Gateway
+            </p>
+            <p className="text-xs text-foreground-muted">
+              {getSubtitle()}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onRefresh}
+            className="p-1.5 rounded-md text-foreground-muted hover:text-foreground hover:bg-surface-hover transition-colors"
+            title="Refresh connection"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </button>
+          {isLoading ? (
+            <Badge variant="outline">Connecting...</Badge>
+          ) : (
+            <Badge variant={isConnected ? "success" : "error"}>
+              {isConnected ? "Connected" : "Disconnected"}
+            </Badge>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+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" />
+            </div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function EmptyState({ isConfigured }: { isConfigured: boolean }) {
+  return (
+    <Card variant="bordered" className="p-8">
+      <div className="flex flex-col items-center text-center gap-3">
+        {isConfigured ? (
+          <>
+            <AlertCircle className="h-8 w-8 text-foreground-muted" />
+            <div>
+              <p className="text-sm font-medium text-foreground">
+                No agents discovered
+              </p>
+              <p className="text-xs text-foreground-muted mt-1">
+                Make sure OpenClaw Gateway is running and agents are configured.
+              </p>
+            </div>
+          </>
+        ) : (
+          <>
+            <Bot className="h-8 w-8 text-foreground-muted" />
+            <div>
+              <p className="text-sm font-medium text-foreground">
+                Welcome to Castle
+              </p>
+              <p className="text-xs text-foreground-muted mt-1">
+                Run <code className="px-1 py-0.5 bg-surface-hover rounded text-xs">castle setup</code> to connect to your OpenClaw Gateway.
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+export default function HomePage() {
+  const {
+    status,
+    isLoading,
+    isConnected,
+    isConfigured,
+    latency,
+    serverVersion,
+    agents,
+    agentsLoading,
+    refresh,
+  } = useOpenClaw();
+
+  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">
+          {/* Header */}
+          <div className="mb-8">
+            <PageHeader
+              title="Castle"
+              subtitle="The multi-agent workspace"
+            />
+          </div>
+
+          {/* OpenClaw Connection Status */}
+          <ConnectionCard
+            isConnected={isConnected}
+            isLoading={isLoading}
+            isConfigured={isConfigured}
+            serverVersion={serverVersion}
+            latency={latency}
+            error={status?.error}
+            onRefresh={refresh}
+          />
+
+          {/* Agents */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
+                <Bot className="h-5 w-5 text-foreground-secondary" />
+                Agents
+              </h2>
+              {!isLoading && agents.length > 0 && (
+                <span className="text-sm text-foreground-muted">
+                  {agents.length} agent{agents.length !== 1 ? "s" : ""} discovered
+                </span>
+              )}
+            </div>
+
+            {agentsLoading && isLoading ? (
+              <AgentsSkeleton />
+            ) : agents.length > 0 ? (
+              <div className="grid gap-3">
+                {agents.map((agent, idx) => (
+                  <AgentCard
+                    key={agent.id}
+                    agent={agent}
+                    isPrimary={idx === 0}
+                    isConnected={isConnected}
+                  />
+                ))}
+              </div>
+            ) : (
+              <EmptyState isConfigured={isConfigured} />
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}