@mndrk/agx 2.0.26 → 2.0.32

package/cloud-runtime/standalone/components/chat-ui/Composer.tsx

@@ -14,6 +14,7 @@ import { useAttachments, type Attachment } from "@/hooks/useAttachments";
 import { useFileMention } from "@/hooks/useFileMention";
 import { useThreadMention, type Discussion } from "@/hooks/useThreadMention";
 import { useComposerAttachments } from "@/hooks/useComposerAttachments";
+import { useComposerHistory } from "@/hooks/useComposerHistory";
 import { buildAgentContext } from "@/lib/chat/agentContextBuilder";
 import type { ThreadRef } from "@/lib/thread-export";
 import {
@@ -55,6 +56,7 @@ interface Props {
   ) => void;
   onStop: () => void;
   loading: boolean;
+  activityStatus?: "ready" | "queued" | "working";
   /** Whether autonomous mode is currently active */
   autoMode?: boolean;
   /** Called when user toggles autonomous mode */
@@ -104,6 +106,7 @@ export function Composer({
   onSend,
   onStop,
   loading,
+  activityStatus,
   participants,
   projects = [],
   projectGroups = [],
@@ -117,7 +120,10 @@ export function Composer({
   autoMode = false,
   onAutoModeChange,
 }: Props) {
-  const [maxRounds, setMaxRounds] = useState(10);
+  const effectiveActivityStatus =
+    activityStatus ?? (loading ? "working" : "ready");
+  const isBusy = effectiveActivityStatus !== "ready";
+
   const [pinnedParticipantId, setPinnedParticipantId] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const isComposingRef = useRef(false);
@@ -134,6 +140,7 @@ export function Composer({
   const threadMention = useThreadMention({ messages: allMessages, maxSuggestions: 8 });
   const attachments = useAttachments();
   const fileAttachments = useComposerAttachments();
+  const composerHistory = useComposerHistory();
 
   useEffect(() => {
     if (pinnedParticipantId && !participants.some((participant) => participant.id === pinnedParticipantId)) {
@@ -241,6 +248,36 @@ export function Composer({
         if (threadMention.isOpen && threadMention.handleKeyDown(syntheticEvent)) return true;
         if (mention.handleKeyDown(syntheticEvent)) return true;
 
+        // ArrowUp/ArrowDown for composer history navigation
+        if (
+          (event.key === "ArrowUp" || event.key === "ArrowDown") &&
+          !mention.isOpen &&
+          !command.isOpen &&
+          !fileMention.isOpen &&
+          !threadMention.isOpen
+        ) {
+          const currentText = serializeToPlainText(editor!.getJSON()).trim();
+          const { state } = editor!.view;
+          const isUp = event.key === "ArrowUp";
+          // Only activate when cursor is at the boundary (start for up, end for down)
+          const cursorAtBoundary = isUp
+            ? state.selection.from <= 1
+            : state.selection.to >= state.doc.content.size - 1;
+
+          const result = composerHistory.navigate(
+            isUp ? "up" : "down",
+            currentText,
+            cursorAtBoundary
+          );
+          if (result !== null) {
+            event.preventDefault();
+            editor!.commands.setContent(result);
+            // Move cursor to end
+            editor!.commands.focus("end");
+            return true;
+          }
+        }
+
         // Enter to send
         if (event.key === "Enter" && !event.shiftKey) {
           event.preventDefault();
@@ -253,6 +290,10 @@ export function Composer({
     },
     onUpdate: ({ editor: ed }) => {
       if (isComposingRef.current) return;
+      // Reset history navigation when user types new content
+      if (composerHistory.historyIndex !== -1) {
+        composerHistory.resetNavigation();
+      }
       const info = getCurrentParagraphText(ed);
       if (!info) return;
       mention.handleInput(info.text, info.cursorPos);
@@ -480,9 +521,12 @@ export function Composer({
       }
     }
 
+    // Save to composer history before sending
+    if (trimmed) composerHistory.pushEntry(trimmed);
+
     const ids = attachments.attachmentIds.length > 0 ? attachments.attachmentIds : undefined;
     const metas = ids ? attachments.getAttachmentMetas() : undefined;
-    onSend(messageText, maxRounds, ids, metas, pinnedParticipantId ?? undefined);
+    onSend(messageText, 10, ids, metas, pinnedParticipantId ?? undefined);
 
     editor.commands.clearContent();
     setThreadRefs([]);
@@ -491,7 +535,7 @@ export function Composer({
     mention.close();
     command.close();
     threadMention.close();
-  }, [editor, maxRounds, mention, command, commands, onSend, attachments, fileAttachments, threadRefs, threadMention]);
+  }, [editor, mention, command, commands, onSend, attachments, fileAttachments, threadRefs, threadMention, composerHistory]);
 
   // ─── ARIA helpers ──────────────────────────────────────────────────────────
 
@@ -508,7 +552,6 @@ export function Composer({
 
   // Compute whether editor has content for disabled state
   const editorIsEmpty = !editor || editor.isEmpty;
-  const turnsMeterWidth = `${Math.max(12, Math.min(100, Math.round((maxRounds / 50) * 100)))}%`;
   const pinnedParticipant = participants.find((participant) => participant.id === pinnedParticipantId) ?? null;
 
   return (
@@ -587,16 +630,8 @@ export function Composer({
               </div>
             )}
 
-            <div className="flex items-end gap-2 p-2 relative">
-              <button
-                type="button"
-                onClick={handleAttachClick}
-                className="p-2.5 text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)] rounded-xl transition-all shrink-0"
-                aria-label="Attach file"
-                title="Attach file"
-              >
-                <Paperclip className="h-5 w-5" strokeWidth={1.75} />
-              </button>
+            {/* Input Area */}
+            <div className="p-2 relative">
               <input
                 ref={fileInputRef}
                 type="file"
@@ -654,12 +689,86 @@ export function Composer({
                   onSelect={applyThreadSelection}
                 />
               </div>
+            </div>
+
+            {/* Bottom Toolbar */}
+            <div className="flex items-center justify-between px-3 py-2 border-t border-gray-100 dark:border-gray-800/60 transition-colors">
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={handleAttachClick}
+                  className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded-lg transition-colors"
+                  aria-label="Attach file"
+                  title="Attach file"
+                >
+                  <Paperclip className="h-4 w-4" strokeWidth={1.75} />
+                </button>
+
+                <div className="w-px h-4 bg-[var(--app-shell-border)]" />
+
+                {/* Agent Selectors */}
+                <div className="flex items-center gap-1.5">
+                  <span className="text-[10px] font-semibold text-[var(--app-shell-muted)] uppercase tracking-wider mr-1">Agents</span>
+                  <div className="flex items-center -space-x-1.5">
+                    {participants.length === 0 ? (
+                      <span className="text-[10px] font-medium text-[var(--app-shell-muted)]">No agents</span>
+                    ) : (
+                      participants.map(p => (
+                        <div
+                          key={p.id}
+                          role="button"
+                          tabIndex={0}
+                          aria-pressed={pinnedParticipantId === p.id}
+                          onClick={() => setPinnedParticipantId((current) => current === p.id ? null : p.id)}
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              setPinnedParticipantId((current) => current === p.id ? null : p.id);
+                            }
+                          }}
+                          className={`relative w-6 h-6 rounded-full bg-[var(--app-shell-subtle)] border-2 border-[var(--app-shell-elevated)] shadow-sm flex items-center justify-center overflow-visible shrink-0 transition-all cursor-pointer ${
+                            pinnedParticipantId === p.id
+                              ? "-translate-y-0.5 ring-2 ring-[var(--ring)] ring-offset-1 ring-offset-[var(--background)]"
+                              : "hover:-translate-y-0.5"
+                          }`}
+                          title={p.name}
+                        >
+                          <img
+                            src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${p.id}&backgroundColor=${p.color ? p.color.replace('#', '') : 'e2e8f0'}`}
+                            alt={p.name}
+                            className="w-full h-full rounded-full object-cover"
+                          />
+                          {isBusy && (
+                            <span
+                              className={`absolute -bottom-0.5 -right-0.5 w-2 h-2 border border-[var(--app-shell-elevated)] rounded-full ${
+                                effectiveActivityStatus === "queued"
+                                  ? "bg-amber-400"
+                                  : "bg-emerald-400"
+                              }`}
+                            />
+                          )}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+
+                {pinnedParticipant && (
+                  <>
+                    <div className="w-px h-4 bg-[var(--app-shell-border)]" />
+                    <span className="text-[10px] font-medium text-[var(--app-shell-muted)]">
+                      Pinned: <span className="text-[var(--foreground)]">{pinnedParticipant.name}</span>
+                    </span>
+                  </>
+                )}
+              </div>
 
-              {loading ? (
+              {/* Send / Stop Button */}
+              {isBusy ? (
                 <button
                   type="button"
                   onClick={onStop}
-                  className="h-10 px-4 bg-[var(--destructive-muted)] text-[var(--destructive)] border border-[var(--status-failed-border)] rounded-xl font-bold text-sm hover:opacity-90 shadow-sm flex items-center gap-2 transition-all shrink-0"
+                  className="flex items-center gap-2 bg-[var(--destructive-muted)] text-[var(--destructive)] border border-[var(--status-failed-border)] px-4 py-1.5 rounded-lg text-sm font-semibold hover:opacity-90 transition-colors"
                 >
                   Stop
                 </button>
@@ -668,7 +777,7 @@ export function Composer({
                   type="button"
                   onClick={handleSubmit}
                   disabled={(editorIsEmpty && !attachments.hasUploaded && !fileAttachments.hasFilePaths) || uploadsInProgress}
-                  className="h-10 px-4 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-xl font-bold text-sm hover:bg-[var(--primary-hover)] disabled:opacity-50 disabled:cursor-not-allowed shadow-md flex items-center gap-2 transition-all shrink-0"
+                  className="flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primary-hover)] text-[var(--primary-foreground)] px-4 py-1.5 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
                 >
                   Send
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
@@ -676,89 +785,32 @@ export function Composer({
               )}
             </div>
 
-            {/* Meta Footer */}
-            <div className="px-4 pb-2.5 pt-1 flex items-center justify-between border-t border-gray-100 dark:border-gray-800/60 mt-1 transition-colors">
-              <div className="flex items-center gap-4">
-                {/* Turn Limit — progress bar + selector */}
-                <div className="flex items-center gap-2">
-                  <span className="text-[10px] font-bold text-[var(--app-shell-muted)] uppercase tracking-wider">Turns</span>
-                  <div className="flex items-center gap-1.5">
-                  <div className="h-1.5 w-14 bg-[var(--app-shell-border)] rounded-full overflow-hidden">
-                      <div
-                        className="h-full rounded-full transition-all duration-500 bg-[var(--primary)]"
-                        style={{ width: turnsMeterWidth }}
-                      />
-                    </div>
-                    <select
-                      value={maxRounds}
-                      onChange={(e) => setMaxRounds(Number(e.target.value))}
-                      className="bg-transparent border-none outline-none text-xs font-semibold text-[var(--app-shell-muted)] cursor-pointer appearance-none hover:text-[var(--primary)] transition-colors"
-                    >
-                      {[1, 3, 5, 10, 20, 50].map((n) => (
-                        <option key={n} value={n}>{n}</option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-
-                <div className="w-px h-4 bg-[var(--app-shell-border)]" />
-
-                {/* Agent Status — overlapping avatars with activity dots */}
-                <div className="flex items-center -space-x-1.5">
-                  {participants.length === 0 ? (
-                    <span className="text-[10px] font-medium text-[var(--app-shell-muted)]">No agents</span>
-                  ) : (
-                    participants.map(p => (
-                      <div
-                        key={p.id}
-                        role="button"
-                        tabIndex={0}
-                        aria-pressed={pinnedParticipantId === p.id}
-                        onClick={() => setPinnedParticipantId((current) => current === p.id ? null : p.id)}
-                        onKeyDown={(event) => {
-                          if (event.key === "Enter" || event.key === " ") {
-                            event.preventDefault();
-                            setPinnedParticipantId((current) => current === p.id ? null : p.id);
-                          }
-                        }}
-                        className={`relative w-6 h-6 rounded-full bg-[var(--app-shell-subtle)] border-2 border-[var(--app-shell-elevated)] shadow-sm flex items-center justify-center overflow-visible shrink-0 transition-all cursor-pointer ${
-                          pinnedParticipantId === p.id
-                            ? "-translate-y-0.5 ring-2 ring-[var(--ring)] ring-offset-1 ring-offset-[var(--background)]"
-                            : "hover:-translate-y-0.5"
-                        }`}
-                        title={p.name}
-                      >
-                        <img
-                          src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${p.id}&backgroundColor=${p.color ? p.color.replace('#', '') : 'e2e8f0'}`}
-                          alt={p.name}
-                          className="w-full h-full rounded-full object-cover"
-                        />
-                        {loading && (
-                          <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-emerald-400 border border-[var(--app-shell-elevated)] rounded-full" />
-                        )}
-                      </div>
-                    ))
-                  )}
-                </div>
-              </div>
-
-              {/* Status indicator */}
-              <div className="flex items-center gap-2 text-[var(--app-shell-muted)]">
-                {pinnedParticipant && (
-                  <span className="text-[10px] font-medium text-[var(--app-shell-muted)]">
-                    Pinned: <span className="text-[var(--foreground)]">{pinnedParticipant.name}</span>
-                  </span>
-                )}
-                <span className="text-[10px] font-medium uppercase tracking-tight">
-                  {loading ? "Working" : "Ready"}
-                </span>
-                <div className={`w-1.5 h-1.5 rounded-full ${loading ? "bg-amber-400 animate-pulse" : "bg-emerald-400"}`} />
-              </div>
-            </div>
-
           </div>
           </div>
         </ComposerDropZone>
+        <div className="mt-3 flex items-center justify-between text-xs text-[var(--app-shell-muted)] px-1">
+          <div className="flex items-center gap-1.5">
+            <div
+              className={`w-1.5 h-1.5 rounded-full ${
+                effectiveActivityStatus === "working"
+                  ? "bg-emerald-400 animate-pulse"
+                  : effectiveActivityStatus === "queued"
+                    ? "bg-amber-400"
+                    : "bg-emerald-400"
+              }`}
+            />
+            <span>
+              {effectiveActivityStatus === "working"
+                ? "Working"
+                : effectiveActivityStatus === "queued"
+                  ? "Queued"
+                  : "Ready"}
+            </span>
+          </div>
+          <span>
+            Press <kbd className="px-1 py-0.5 rounded bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] text-[var(--app-shell-muted)] shadow-sm text-[10px]">Enter</kbd> to send, <kbd className="px-1 py-0.5 rounded bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] text-[var(--app-shell-muted)] shadow-sm text-[10px]">Shift</kbd> + <kbd className="px-1 py-0.5 rounded bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] text-[var(--app-shell-muted)] shadow-sm text-[10px]">Enter</kbd> for new line
+          </span>
+        </div>
       </div>
     </div>
   );

package/cloud-runtime/standalone/components/chat-ui/ThreadView.tsx

@@ -8,6 +8,8 @@ import type { TaskDraftMessage } from "@/types/tasks";
 import type { AgentProcessEntry } from "@/lib/agent-process-registry";
 import { Markdown } from "./Markdown";
 import { Copy, Trash2, User, Link, MessageSquareText, Sparkles } from "lucide-react";
+import { ActionToolbar, ActionToolbarDivider } from "../ActionToolbar";
+import { IconButton } from "../IconButton";
 import { MessageAttachments } from "./MessageAttachments";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { MessageReactionsBar } from "./MessageReactionsBar";
@@ -18,6 +20,7 @@ interface Props {
     streaming: Record<string, StreamingEntry>;
     participants: Participant[];
     rootMessageId: string;
+    queued?: boolean;
     onClose: () => void;
     onCopyThread?: (rootMessageId: string) => void;
     onSummarize?: (rootMessageId: string) => void;
@@ -25,6 +28,7 @@ interface Props {
     onCreateTasks?: (rootMessageId: string) => void;
     onUpdateTaskDraft?: (rootMessageId: string, draft: TaskDraftMessage) => void;
     onDeleteThreadRoot?: (messageId: string) => void;
+    onDeleteMessage?: (messageId: string) => void;
     highlightedMessageId?: string;
     renderReplyComposer: (rootMessageId: string) => React.ReactNode;
     activeProcesses?: AgentProcessEntry[];
@@ -35,10 +39,12 @@ export function ThreadView({
     streaming,
     participants,
     rootMessageId,
+    queued = false,
     onClose,
     onCopyThread,
     onAddToChat,
     onDeleteThreadRoot,
+    onDeleteMessage,
     highlightedMessageId,
     renderReplyComposer,
     activeProcesses = [],
@@ -175,10 +181,7 @@ export function ThreadView({
                                     </div>
 
                                     <div
-                                        className={`rounded-2xl p-4 text-[15px] leading-relaxed transition-all shadow-sm border ${isUser
-                                            ? "bg-[var(--app-shell-subtle)] text-[var(--foreground)] border-[var(--app-shell-border)]"
-                                            : "bg-[var(--app-shell-surface)] text-[var(--foreground)] border-[var(--app-shell-border)] hover:shadow-md hover:border-[var(--app-shell-border-strong)]"
-                                            } ${msg.id === highlightedMessageId ? "ring-2 ring-[var(--ring)]" : ""}`}
+                                        className={`surface-card rounded-2xl p-5 text-[15px] leading-relaxed ${msg.id === highlightedMessageId ? "ring-2 ring-[var(--ring)]" : ""}`}
                                     >
                                         <Markdown content={stripMarkers(msg.content)} isUser={isUser} />
                                         {msg.attachments && msg.attachments.length > 0 && (
@@ -193,51 +196,87 @@ export function ThreadView({
                                     </div>
 
                                     {/* Actions on hover */}
-                                    <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] rounded-xl shadow-sm p-1 z-10 backdrop-blur-sm">
+                                    <ActionToolbar>
                                         {msg.id === rootMessageId && (
-                                            <button
-                                                onClick={() => {
-                                                    navigator.clipboard.writeText(msg.id);
-                                                }}
-                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--primary)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
+                                            <IconButton
+                                                variant="primary"
+                                                size="sm"
+                                                onClick={() => navigator.clipboard.writeText(msg.id)}
                                                 title="Copy message ID"
                                             >
-                                                <Link size={14} />
-                                            </button>
+                                                <Link className="w-3.5 h-3.5" />
+                                            </IconButton>
                                         )}
                                         {msg.id === rootMessageId && onCopyThread && (
-                                            <button
+                                            <IconButton
+                                                variant="neutral"
+                                                size="sm"
                                                 onClick={() => onCopyThread(msg.id)}
-                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
                                                 title="Copy Thread"
                                             >
-                                                <MessageSquareText size={14} />
-                                            </button>
+                                                <MessageSquareText className="w-3.5 h-3.5" />
+                                            </IconButton>
                                         )}
-                                        <button
-                                            onClick={() => {
-                                                navigator.clipboard.writeText(msg.content);
-                                            }}
-                                            className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
+                                        <IconButton
+                                            variant="neutral"
+                                            size="sm"
+                                            onClick={() => navigator.clipboard.writeText(msg.content)}
                                             title="Copy as Markdown"
                                         >
-                                            <Copy size={14} />
-                                        </button>
+                                            <Copy className="w-3.5 h-3.5" />
+                                        </IconButton>
                                         {msg.id === rootMessageId && onDeleteThreadRoot && (
-                                            <button
-                                                onClick={() => onDeleteThreadRoot(msg.id)}
-                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive-muted)] rounded transition-colors"
-                                                title="Delete Thread"
-                                            >
-                                                <Trash2 size={14} />
-                                            </button>
+                                            <>
+                                                <ActionToolbarDivider />
+                                                <IconButton
+                                                    variant="destructive"
+                                                    size="sm"
+                                                    onClick={() => onDeleteThreadRoot(msg.id)}
+                                                    title="Delete Thread"
+                                                >
+                                                    <Trash2 className="w-3.5 h-3.5" />
+                                                </IconButton>
+                                            </>
                                         )}
-                                    </div>
+                                        {msg.id !== rootMessageId && onDeleteMessage && (
+                                            <>
+                                                <ActionToolbarDivider />
+                                                <IconButton
+                                                    variant="destructive"
+                                                    size="sm"
+                                                    onClick={() => onDeleteMessage(msg.id)}
+                                                    title="Delete Message"
+                                                >
+                                                    <Trash2 className="w-3.5 h-3.5" />
+                                                </IconButton>
+                                            </>
+                                        )}
+                                    </ActionToolbar>
                                 </div>
                             </div>
                         );
                     })}
 
+                    {queued && activeProcesses.length === 0 && (
+                        <div className="flex gap-3 group relative opacity-80 animate-in fade-in slide-in-from-bottom-1 duration-300">
+                            <div className="flex-shrink-0 mt-0.5">
+                                <div className="w-7 h-7 rounded-full border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] flex items-center justify-center">
+                                    <Sparkles className="w-3.5 h-3.5 text-[var(--app-shell-soft-text)]" strokeWidth={1.5} />
+                                </div>
+                            </div>
+                            <div className="flex-1 max-w-full overflow-hidden">
+                                <div className="flex items-center gap-2 py-1">
+                                    <span className="text-xs tracking-wide text-[var(--app-shell-soft-text)]">Processing</span>
+                                    <span className="inline-flex items-center gap-[3px]">
+                                        <span className="w-1 h-1 rounded-full bg-[var(--app-shell-soft-text)]/50 animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
+                                        <span className="w-1 h-1 rounded-full bg-[var(--app-shell-soft-text)]/50 animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
+                                        <span className="w-1 h-1 rounded-full bg-[var(--app-shell-soft-text)]/50 animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
                     {/* Typing indicators */}
                     {Object.entries(streaming)
                         .filter(([, entry]) => entry.rootMessageId === rootMessageId)
@@ -245,7 +284,7 @@ export function ThreadView({
                             const sp = participantMap[pid];
                             const hasContent = entry.content.trim().length > 0;
                             return (
-                                <div key={`streaming-${pid}`} className="flex gap-4 group relative">
+                                <div key={`streaming-${pid}`} className="flex gap-4 group relative animate-in fade-in slide-in-from-bottom-2 duration-300">
                                     <div className="flex-shrink-0 mt-1">
                                         <NextLink href={`/agents/${sp?.id || pid}`} className="hover:ring-2 hover:ring-[var(--ring)] rounded-full transition-shadow">
                                             <img
@@ -273,7 +312,7 @@ export function ThreadView({
                                             )}
                                         </div>
                                         {hasContent && (
-                                            <div className="rounded-2xl p-4 text-[15px] leading-relaxed shadow-sm border bg-[var(--app-shell-surface)] text-[var(--foreground)] border-[var(--app-shell-border)]">
+                                            <div className="surface-card rounded-2xl p-5 text-[15px] leading-relaxed">
                                                 <Markdown content={stripMarkers(entry.content)} isUser={false} />
                                             </div>
                                         )}
@@ -286,7 +325,7 @@ export function ThreadView({
             </div>
 
             {/* Composer Area */}
-            <div className="z-20">
+            <div className="z-20 transition-colors duration-200">
                 {renderReplyComposer(rootMessageId)}
             </div>
         </div>