@castlekit/castle 0.3.0 → 0.3.1

package/src/app/api/openclaw/session/status/route.ts

@@ -1,12 +1,110 @@
 import { NextRequest, NextResponse } from "next/server";
-import { ensureGateway } from "@/lib/gateway-connection";
+import { readFileSync, existsSync } from "fs";
+import { join } from "path";
+import { getOpenClawDir } from "@/lib/config";
 import { sanitizeForApi } from "@/lib/api-security";
 import type { SessionStatus } from "@/lib/types/chat";
+import JSON5 from "json5";
 
 // ============================================================================
-// GET /api/openclaw/session/status?sessionKey=X — Session stats
+// GET /api/openclaw/session/status?sessionKey=X — Real session stats
+//
+// Reads directly from the OpenClaw session store on the filesystem.
+// This is the source of truth — the same data the Gateway uses.
 // ============================================================================
 
+export const dynamic = "force-dynamic";
+
+/**
+ * OpenClaw's default context window when nothing is configured.
+ * Matches DEFAULT_CONTEXT_TOKENS in the Gateway source (2e5 = 200,000).
+ */
+const OPENCLAW_DEFAULT_CONTEXT_TOKENS = 200_000;
+
+/**
+ * Parse a session key like "agent:main:castle:2d16fadb-..." to extract the agent ID.
+ * Format: agent:<agentId>:<channel>:<channelId>
+ */
+function parseAgentId(sessionKey: string): string | null {
+  const parts = sessionKey.split(":");
+  // agent:<agentId>:...
+  if (parts[0] === "agent" && parts.length >= 2) {
+    return parts[1];
+  }
+  return null;
+}
+
+/**
+ * Load a session entry from the OpenClaw session store.
+ * Reads ~/.openclaw/agents/<agentId>/sessions/sessions.json
+ */
+function loadSessionEntry(
+  sessionKey: string,
+  agentId: string
+): Record<string, unknown> | null {
+  const openclawDir = getOpenClawDir();
+  const storePath = join(openclawDir, "agents", agentId, "sessions", "sessions.json");
+
+  if (!existsSync(storePath)) {
+    return null;
+  }
+
+  try {
+    const raw = readFileSync(storePath, "utf-8");
+    const store = JSON.parse(raw) as Record<string, Record<string, unknown>>;
+    return store[sessionKey] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Resolve the effective context window limit from OpenClaw config.
+ *
+ * Resolution order (matches Gateway logic):
+ *   1. agents.<agentId>.contextTokens  (per-agent override)
+ *   2. agents.defaults.contextTokens   (global default)
+ *   3. OPENCLAW_DEFAULT_CONTEXT_TOKENS  (200k — Gateway hardcoded default)
+ *
+ * Note: The session entry's `contextTokens` stores the MODEL's max context
+ * (e.g. 1M for Sonnet 4.5) which is NOT the operating limit. The real limit
+ * is set in config or defaults to 200k.
+ */
+function resolveEffectiveContextLimit(agentId: string): number {
+  const openclawDir = getOpenClawDir();
+  const configPaths = [
+    join(openclawDir, "openclaw.json"),
+    join(openclawDir, "openclaw.json5"),
+  ];
+
+  for (const configPath of configPaths) {
+    if (!existsSync(configPath)) continue;
+    try {
+      const raw = readFileSync(configPath, "utf-8");
+      const config = JSON5.parse(raw) as Record<string, unknown>;
+      const agents = config.agents as Record<string, unknown> | undefined;
+      if (!agents) continue;
+
+      // 1. Per-agent override: agents.<agentId>.contextTokens
+      const agentCfg = agents[agentId] as Record<string, unknown> | undefined;
+      if (agentCfg?.contextTokens && typeof agentCfg.contextTokens === "number") {
+        return agentCfg.contextTokens;
+      }
+
+      // 2. Global default: agents.defaults.contextTokens
+      const defaults = agents.defaults as Record<string, unknown> | undefined;
+      if (defaults?.contextTokens && typeof defaults.contextTokens === "number") {
+        return defaults.contextTokens;
+      }
+    } catch {
+      // Continue to next config path
+    }
+  }
+
+  // 3. Fallback: OpenClaw's hardcoded default
+  return OPENCLAW_DEFAULT_CONTEXT_TOKENS;
+}
+
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const sessionKey = searchParams.get("sessionKey");
@@ -19,20 +117,90 @@ export async function GET(request: NextRequest) {
   }
 
   try {
-    const gateway = ensureGateway();
-    const result = await gateway.request<SessionStatus>("session.status", {
+    const agentId = parseAgentId(sessionKey);
+    if (!agentId) {
+      return NextResponse.json(
+        { error: "Could not parse agentId from sessionKey" },
+        { status: 400 }
+      );
+    }
+
+    const entry = loadSessionEntry(sessionKey, agentId);
+    if (!entry) {
+      console.log(`[Session Status] No session data for key=${sessionKey} agent=${agentId}`);
+      return new NextResponse(null, { status: 204 });
+    }
+
+    // Map the raw SessionEntry to our SessionStatus type
+    const inputTokens = (entry.inputTokens as number) ?? 0;
+    const outputTokens = (entry.outputTokens as number) ?? 0;
+    const totalTokens = (entry.totalTokens as number) ?? 0;
+
+    // The session entry's contextTokens is the MODEL's max (e.g. 1M for Sonnet 4.5).
+    // The real operating limit comes from config or defaults to 200k.
+    const modelMaxContext = (entry.contextTokens as number) ?? 0;
+    const effectiveLimit = resolveEffectiveContextLimit(agentId);
+    const percentage = effectiveLimit > 0
+      ? Math.round((totalTokens / effectiveLimit) * 100)
+      : 0;
+
+    // Extract system prompt report if available
+    const spr = entry.systemPromptReport as Record<string, unknown> | undefined;
+    let systemPrompt: SessionStatus["systemPrompt"] = undefined;
+
+    if (spr) {
+      const sp = spr.systemPrompt as Record<string, number> | undefined;
+      const skills = spr.skills as Record<string, unknown> | undefined;
+      const tools = spr.tools as Record<string, unknown> | undefined;
+      const files = spr.injectedWorkspaceFiles as Array<Record<string, unknown>> | undefined;
+
+      systemPrompt = {
+        totalChars: sp?.chars ?? 0,
+        projectContextChars: sp?.projectContextChars ?? 0,
+        nonProjectContextChars: sp?.nonProjectContextChars ?? 0,
+        skills: {
+          promptChars: (skills?.promptChars as number) ?? 0,
+          count: Array.isArray(skills?.entries) ? (skills.entries as unknown[]).length : 0,
+        },
+        tools: {
+          listChars: (tools?.listChars as number) ?? 0,
+          schemaChars: (tools?.schemaChars as number) ?? 0,
+          count: Array.isArray(tools?.entries) ? (tools.entries as unknown[]).length : 0,
+        },
+        workspaceFiles: (files ?? []).map((f) => ({
+          name: (f.name as string) ?? "",
+          injectedChars: (f.injectedChars as number) ?? 0,
+          truncated: (f.truncated as boolean) ?? false,
+        })),
+      };
+    }
+
+    const result: SessionStatus = {
       sessionKey,
-    });
+      sessionId: (entry.sessionId as string) ?? "",
+      agentId,
+      model: (entry.model as string) ?? "unknown",
+      modelProvider: (entry.modelProvider as string) ?? "unknown",
+      tokens: {
+        input: inputTokens,
+        output: outputTokens,
+        total: totalTokens,
+      },
+      context: {
+        used: totalTokens,
+        limit: effectiveLimit,
+        modelMax: modelMaxContext,
+        percentage: Math.min(percentage, 100),
+      },
+      compactions: (entry.compactionCount as number) ?? 0,
+      thinkingLevel: (entry.thinkingLevel as string) ?? null,
+      updatedAt: (entry.updatedAt as number) ?? 0,
+      systemPrompt,
+    };
 
     return NextResponse.json(result);
   } catch (err) {
     const message = (err as Error).message;
-
-    // Session not found is not an error — just return empty
-    if (message.includes("not found") || message.includes("unknown")) {
-      return new NextResponse(null, { status: 204 });
-    }
-
     console.error("[Session Status] Failed:", message);
     return NextResponse.json(
       { error: sanitizeForApi(message) },

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

@@ -52,8 +52,10 @@ export async function GET() {
     // Sort by most recently modified
     sessions.sort((a, b) => new Date(b.modifiedAt).getTime() - new Date(a.modifiedAt).getTime());
 
+    console.log(`[Sessions API] GET OK — ${sessions.length} sessions`);
     return NextResponse.json({ sessions });
   } catch (err) {
+    console.error("[Sessions API] GET FAILED:", err instanceof Error ? err.message : "Unknown error");
     return NextResponse.json(
       { error: err instanceof Error ? err.message : "Failed to read sessions" },
       { status: 500 }

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

@@ -1,16 +1,19 @@
 "use client";
 
-import { use, useState, useEffect } from "react";
+import { use, useState, useEffect, useCallback, useRef } from "react";
 import { useSearchParams } from "next/navigation";
-import { WifiOff, X, AlertCircle } from "lucide-react";
+import { WifiOff, X, AlertCircle, Zap } 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 { useCompactionEvents } from "@/lib/hooks/use-compaction-events";
+import { useContextBoundary } from "@/lib/hooks/use-context-boundary";
 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 { SessionStatsIndicator } from "@/components/chat/session-stats-panel";
+import { SearchTrigger } from "@/components/providers/search-provider";
 import { ChatErrorBoundary } from "./error-boundary";
 import type { AgentInfo } from "@/components/chat/agent-mention-popup";
 
@@ -62,7 +65,7 @@ function ChatSkeleton() {
       </div>
 
       {/* Messages skeleton */}
-      <div className="flex-1 overflow-hidden py-[20px] pr-[20px]">
+      <div className="flex-1 overflow-hidden py-[20px] pr-[20px] flex flex-col justify-end">
         <div className="flex flex-col gap-6">
           <SkeletonMessage lines={3} offset={0} />
           <SkeletonMessage lines={1} short offset={3} />
@@ -184,10 +187,31 @@ function ChannelChatContent({ channelId }: { channelId: string }) {
     clearSendError,
   } = useChat({ channelId, defaultAgentId, anchorMessageId: highlightMessageId });
 
-  const { stats, isLoading: statsLoading } = useSessionStats({
+  const { stats, isLoading: statsLoading, refresh: refreshStats } = useSessionStats({
     sessionKey: currentSessionKey,
   });
 
+  const { boundaryMessageId, refresh: refreshBoundary } = useContextBoundary({
+    sessionKey: currentSessionKey,
+    channelId,
+  });
+
+  const { isCompacting, showBanner: showCompactionBanner, dismissBanner, compactionCount: liveCompactionCount } = useCompactionEvents({
+    sessionKey: currentSessionKey,
+    onCompactionComplete: () => {
+      refreshStats();
+      refreshBoundary();
+    },
+  });
+
+  // Ref to the navigate-between-messages function exposed by MessageList
+  const navigateRef = useRef<((direction: "up" | "down") => void) | null>(null);
+
+  // Handle Shift+ArrowUp/Down to navigate between messages
+  const handleNavigate = useCallback((direction: "up" | "down") => {
+    navigateRef.current?.(direction);
+  }, []);
+
   // Don't render until channel name, agents, and user settings have all loaded.
   const channelReady = channelName !== null && !agentsLoading && !userSettingsLoading;
 
@@ -201,34 +225,72 @@ function ChannelChatContent({ channelId }: { channelId: string }) {
   }
 
   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>
+    <div className="flex-1 flex flex-col h-full overflow-hidden">
+      {/* Channel header — always visible, never fades */}
+      <div className="pt-[7px] pb-[30px] border-b border-border shrink-0">
+        <div className="flex items-center justify-between gap-4">
+          {/* Left: channel name + participants */}
+          <div className="min-w-0 min-h-[45px]">
+            {channelName ? (
+              <>
+                <h2 className="text-lg font-semibold text-foreground leading-tight">
+                  {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 className="skeleton h-5 w-40 rounded mb-1.5" />
+                <div className="skeleton h-3.5 w-28 rounded" />
+              </>
             )}
-          </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>
+          {/* Right: session stats + search */}
+          <div className="flex items-center gap-5 shrink-0">
+            <SessionStatsIndicator
+              stats={stats}
+              isLoading={statsLoading}
+              isCompacting={isCompacting}
+              liveCompactionCount={liveCompactionCount}
+            />
+            <SearchTrigger />
+          </div>
         </div>
       </div>
 
+      {/* Content area */}
+      {!channelReady ? (
+        /* Skeleton messages while loading */
+        <div className="flex-1 overflow-hidden py-[20px] pr-[20px] flex flex-col justify-end">
+          <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} />
+          </div>
+        </div>
+      ) : (
+      <div className="flex-1 flex flex-col overflow-hidden">
+
       {/* 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">
@@ -237,10 +299,21 @@ function ChannelChatContent({ channelId }: { channelId: string }) {
         </div>
       )}
 
-      {/* Session stats — sticky */}
-      <div className="shrink-0">
-        <SessionStatsPanel stats={stats} isLoading={statsLoading} />
-      </div>
+      {/* Compaction banner */}
+      {showCompactionBanner && (
+        <div className="px-4 py-2 bg-yellow-500/10 border-b border-yellow-500/20 flex items-center justify-between text-sm text-yellow-600 dark:text-yellow-400 shrink-0">
+          <div className="flex items-center gap-2">
+            <Zap className="h-4 w-4" />
+            <span>Context compacted — older messages have been summarized</span>
+          </div>
+          <button
+            onClick={dismissBanner}
+            className="p-1 hover:bg-yellow-500/20 rounded"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </div>
+      )}
 
       {/* Messages — this is the ONLY scrollable area */}
       <MessageList
@@ -259,6 +332,9 @@ function ChannelChatContent({ channelId }: { channelId: string }) {
         channelName={channelName}
         channelCreatedAt={channelCreatedAt}
         highlightMessageId={highlightMessageId}
+        navigateRef={navigateRef}
+        compactionBoundaryMessageId={boundaryMessageId}
+        compactionCount={stats?.compactions ?? 0}
       />
 
       {/* Error toast — sticky above input */}
@@ -277,17 +353,21 @@ function ChannelChatContent({ channelId }: { channelId: string }) {
         </div>
       )}
 
-      {/* Input — sticky at bottom */}
+      </div>
+      )}
+
+      {/* Input — always visible, disabled until channel is ready */}
       <div className="shrink-0">
         <ChatInput
           onSend={sendMessage}
           onAbort={abortResponse}
           sending={sending}
           streaming={isStreaming}
-          disabled={!isConnected && !gatewayLoading}
+          disabled={!channelReady || (!isConnected && !gatewayLoading)}
           agents={chatAgents}
           defaultAgentId={defaultAgentId}
           channelId={channelId}
+          onNavigate={handleNavigate}
         />
       </div>
     </div>

package/src/app/globals.css

@@ -350,6 +350,16 @@ img.emoji {
   animation: highlight-flash 2s ease-out;
 }
 
+/* Typing indicator dot bounce */
+@keyframes dot-bounce {
+  0%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-5px);
+  }
+}
+
 /* Skeleton shimmer */
 @keyframes shimmer {
   0% {

package/src/app/page.tsx

@@ -11,6 +11,7 @@ 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";
+import { SearchTrigger } from "@/components/providers/search-provider";
 
 function getInitials(name: string) {
   return name.slice(0, 2).toUpperCase();
@@ -329,15 +330,16 @@ export default function HomePage() {
       <Sidebar 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>
+        {/* Header — full width */}
+        <div className="px-8 py-5 flex items-center justify-between gap-4 border-b border-border">
+          <PageHeader
+            title="Castle"
+            subtitle="The multi-agent workspace"
+          />
+          <SearchTrigger />
+        </div>
 
+        <div className="p-8 max-w-4xl">
           {/* OpenClaw Connection Status */}
           <ConnectionCard
             isConnected={isConnected}

package/src/components/chat/chat-input.tsx

@@ -16,6 +16,8 @@ interface ChatInputProps {
   defaultAgentId?: string;
   channelId?: string;
   className?: string;
+  /** Called when user presses Shift+ArrowUp/Down to navigate between messages */
+  onNavigate?: (direction: "up" | "down") => void;
 }
 
 export function ChatInput({
@@ -28,6 +30,7 @@ export function ChatInput({
   defaultAgentId,
   channelId,
   className,
+  onNavigate,
 }: ChatInputProps) {
   const [showMentions, setShowMentions] = useState(false);
   const [mentionFilter, setMentionFilter] = useState("");
@@ -218,6 +221,19 @@ export function ChatInput({
         }
       }
 
+      // Shift+ArrowUp/Down — navigate between messages
+      if (
+        (e.key === "ArrowUp" || e.key === "ArrowDown") &&
+        e.shiftKey &&
+        !e.ctrlKey &&
+        !e.metaKey &&
+        !e.altKey
+      ) {
+        e.preventDefault();
+        onNavigate?.(e.key === "ArrowUp" ? "up" : "down");
+        return;
+      }
+
       // Regular Enter to send
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -230,15 +246,17 @@ export function ChatInput({
         return;
       }
     },
-    [handleSubmit, showMentions, agents, mentionFilter, mentionHighlightIndex, insertMention]
+    [handleSubmit, showMentions, agents, mentionFilter, mentionHighlightIndex, insertMention, onNavigate]
   );
 
 
 
-  // Focus editor on mount
+  // Focus editor on channel change or when it becomes enabled
   useEffect(() => {
-    editorRef.current?.focus();
-  }, [channelId]);
+    if (!disabled) {
+      editorRef.current?.focus();
+    }
+  }, [channelId, disabled]);
 
   return (
     <div className={cn("space-y-3", className)}>
@@ -266,7 +284,7 @@ export function ChatInput({
               onPaste={handlePaste}
               data-placeholder="Message (Enter to send, Shift+Enter for new line, @ to mention)"
               className={cn(
-                "w-full px-4 py-3 rounded-[var(--radius-sm)] bg-surface border border-border resize-none min-h-[48px] max-h-[200px] overflow-y-auto text-sm focus:outline-none focus:border-accent/50 break-all",
+                "w-full px-4 py-3 rounded-[var(--radius-sm)] bg-surface border border-border resize-none min-h-[48px] max-h-[200px] overflow-y-auto text-sm focus:outline-none focus:border-accent/50 break-words",
                 "empty:before:content-[attr(data-placeholder)] empty:before:text-foreground-secondary/50 empty:before:pointer-events-none",
                 (sending || streaming || disabled) && "opacity-50 pointer-events-none"
               )}

package/src/components/chat/message-bubble.tsx

@@ -25,6 +25,8 @@ interface MessageBubbleProps {
   agentStatus?: AgentStatus;
   userStatus?: AgentStatus;
   highlighted?: boolean;
+  /** When true, shows bouncing dots instead of message content (typing indicator) */
+  isTypingIndicator?: boolean;
 }
 
 export function MessageBubble({
@@ -39,6 +41,7 @@ export function MessageBubble({
   agentStatus,
   userStatus,
   highlighted,
+  isTypingIndicator,
 }: MessageBubbleProps) {
   const formattedTime = formatTime(message.createdAt);
   const fullDateTime = formatDateTime(message.createdAt);
@@ -88,7 +91,7 @@ export function MessageBubble({
               {displayName}
             </span>
             <Tooltip content={fullDateTime} side="top" delay={800}>
-              <span className="text-xs text-foreground-secondary hover:text-foreground cursor-pointer transition-colors">
+              <span className={cn("text-xs text-foreground-secondary hover:text-foreground cursor-pointer transition-colors", isTypingIndicator && "opacity-0")}>
                 {formattedTime}
               </span>
             </Tooltip>
@@ -96,7 +99,7 @@ export function MessageBubble({
         )}
 
         {/* Attachments */}
-        {hasAttachments && (
+        {!isTypingIndicator && hasAttachments && (
           <div className="flex gap-2 flex-wrap mb-1">
             {message.attachments.map((att) => (
               <img
@@ -110,18 +113,31 @@ export function MessageBubble({
         )}
 
         {/* Message text — no bubble, just plain text */}
-        <div className="text-[15px] text-foreground leading-[26px] break-words">
-          <TwemojiText>
-            {isAgent && message.content ? (
-              <MarkdownContent content={message.content} />
-            ) : (
-              <span className="whitespace-pre-wrap">{message.content}</span>
-            )}
-          </TwemojiText>
+        <div className="text-[15px] text-foreground leading-[26px] break-words relative">
+          {isTypingIndicator ? (
+            <>
+              <span className="opacity-0" aria-hidden>Xxxxx</span>
+              <span className="absolute left-0 top-0 h-[26px] inline-flex items-center gap-1">
+                <span className="w-1.5 h-1.5 bg-foreground-secondary/60 rounded-full" style={{ animation: "dot-bounce 1.4s ease-in-out infinite", animationDelay: "0s" }} />
+                <span className="w-1.5 h-1.5 bg-foreground-secondary/60 rounded-full" style={{ animation: "dot-bounce 1.4s ease-in-out infinite", animationDelay: "0.16s" }} />
+                <span className="w-1.5 h-1.5 bg-foreground-secondary/60 rounded-full" style={{ animation: "dot-bounce 1.4s ease-in-out infinite", animationDelay: "0.32s" }} />
+              </span>
+            </>
+          ) : (
+            <>
+              <TwemojiText>
+                {isAgent && message.content ? (
+                  <MarkdownContent content={message.content} />
+                ) : (
+                  <span className="whitespace-pre-wrap">{message.content}</span>
+                )}
+              </TwemojiText>
 
-          {/* Streaming cursor */}
-          {isStreaming && (
-            <span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-0.5 align-text-bottom" />
+              {/* Streaming cursor */}
+              {isStreaming && (
+                <span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-0.5 align-text-bottom" />
+              )}
+            </>
           )}
         </div>