@mndrk/agx 2.0.25 → 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,19 +521,21 @@ 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();
-    setPinnedParticipantId(null);
     setThreadRefs([]);
     attachments.clear();
     fileAttachments.clearFilePaths();
     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 ──────────────────────────────────────────────────────────
 
@@ -509,17 +552,16 @@ 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 (
     <div className="pb-6">
       <div className="max-w-3xl mx-auto">
         <ComposerDropZone onDrop={attachments.stageFiles}>
-          <div className={`bg-[var(--app-shell-elevated)] rounded-2xl border border-[var(--app-shell-border)] shadow-[0_8px_30px_rgb(0,0,0,0.12)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.5)] transition-all duration-300`}>
+          <div className="bg-white border border-gray-200 shadow-sm focus-within:border-gray-300 focus-within:ring-1 focus-within:ring-gray-300 dark:bg-gray-900 dark:border-gray-800 dark:shadow-lg dark:focus-within:border-gray-600 dark:focus-within:ring-gray-600 transition-all flex flex-col rounded-2xl">
           {/* Ship Mode header */}
           {onAutoModeChange && (
-            <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50 dark:border-orange-500/30" : "border-[var(--app-shell-border)]"}`}>
+            <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50 dark:border-orange-500/30" : "border-gray-100 dark:border-gray-800/60"}`}>
               {/* Animated gradient background when active */}
               <div
                 className={`absolute inset-0 transition-opacity duration-700 ${autoMode ? "opacity-100" : "opacity-0"}`}
@@ -576,7 +618,7 @@ export function Composer({
               </div>
             </div>
           )}
-          <div className="p-1.5 focus-within:ring-4 focus-within:ring-[var(--app-shell-border-strong)] transition-all">
+          <div className="p-1.5 transition-all">
 
             {attachments.staged.length > 0 && (
               <div className="mx-2 mt-2 mb-1">
@@ -588,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"
@@ -655,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>
@@ -669,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>
@@ -677,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-[var(--app-shell-border)] mt-1">
-              <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/FileMentionPopoverItem.tsx

@@ -47,7 +47,7 @@ export function FileMentionPopoverItem({
 
   return (
     <div
-      className={`flex items-center gap-2 px-3 py-2 text-sm transition-colors ${
+      className={`flex items-center gap-2 px-3 py-2 text-sm transition-colors duration-200 ${
         isActive ? "bg-[var(--primary-muted)]" : "hover:bg-[var(--app-shell-subtle)]"
       }`}
     >
@@ -109,7 +109,7 @@ export function FileMentionPopoverItem({
       {isFolder && !isContentsMode && (
         <button
           type="button"
-          className="shrink-0 rounded px-1.5 py-0.5 text-xs text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
+          className="shrink-0 rounded px-1.5 py-0.5 text-xs text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)] transition-colors duration-200"
           title="Attach full directory contents instead of manifest"
           aria-label={`Attach full contents of ${displayPath}`}
           onMouseDown={(e) => e.preventDefault()}

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

@@ -12,6 +12,8 @@ import { Markdown } from "./Markdown";
 import { MessageAttachments } from "./MessageAttachments";
 import { TaskDraftCard } from "./TaskDraftCard";
 import { TaskStatusCard } from "./TaskStatusCard";
+import { ActionToolbar, ActionToolbarDivider } from "../ActionToolbar";
+import { IconButton } from "../IconButton";
 import { MessageSquare, Copy, Hash, Loader2, Trash2, User, Clock, Zap, ListTodo, CheckCircle2, Circle, Link, AtSign, Rocket } from "lucide-react";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { stripMarkers } from "@/lib/chat-utils";
@@ -331,51 +333,56 @@ export function MessageList({
           }
 
           return (
-            <div key={msg.id} className={`max-w-2xl mx-auto bg-[var(--card-bg)] rounded-2xl border border-[var(--card-border)] shadow-sm mb-6 group transition-all hover:border-[var(--card-hover-border)] relative ${statusMenuMessageId === msg.id ? 'z-50' : ''}`}>
+            <div key={msg.id} className={`max-w-2xl mx-auto surface-card mb-6 group relative ${statusMenuMessageId === msg.id ? 'z-50' : ''}`}>
               {(onCopyThread || onAddToChat || onDeleteThreadRoot) && (
-                <div
-                  className="absolute top-4 right-4 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                >
+                <ActionToolbar className="z-10">
                   {onAddToChat && (
-                    <button
+                    <IconButton
                       type="button"
+                      variant="primary"
+                      size="sm"
                       onClick={() => onAddToChat(msg.id)}
-                      className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--primary-muted)] hover:text-[var(--primary)] rounded-md transition-colors"
                       title="Mention in chat"
                     >
                       <AtSign className="w-3.5 h-3.5" />
-                    </button>
+                    </IconButton>
                   )}
-                  <button
+                  <IconButton
                     type="button"
+                    variant="neutral"
+                    size="sm"
                     onClick={() => { navigator.clipboard.writeText(msg.id); }}
-                    className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] rounded-md transition-colors"
                     title="Copy message ID"
                   >
                     <Link className="w-3.5 h-3.5" />
-                  </button>
+                  </IconButton>
                   {onCopyThread && (
-                    <button
+                    <IconButton
                       type="button"
+                      variant="neutral"
+                      size="sm"
                       onClick={() => onCopyThread(msg.id)}
-                      className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] rounded-md transition-colors"
                       title="Copy thread as markdown"
                     >
                       <Copy className="w-3.5 h-3.5" />
-                    </button>
+                    </IconButton>
                   )}
                   {onDeleteThreadRoot && (
-                    <button
-                      type="button"
-                      onClick={() => onDeleteThreadRoot(msg.id)}
-                      disabled={isDeletingRoot}
-                      className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--destructive-muted)] hover:text-[var(--destructive)] rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                      title="Delete this thread"
-                    >
-                      {isDeletingRoot ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
-                    </button>
+                    <>
+                      <ActionToolbarDivider />
+                      <IconButton
+                        type="button"
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => onDeleteThreadRoot(msg.id)}
+                        disabled={isDeletingRoot}
+                        title="Delete this thread"
+                      >
+                        {isDeletingRoot ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
+                      </IconButton>
+                    </>
                   )}
-                </div>
+                </ActionToolbar>
               )}
               <div className="flex flex-col">
                 <div className="p-5">
@@ -495,18 +502,18 @@ export function MessageList({
                     )}
 
                     {/* Action Pills */}
-                    <div className="flex flex-wrap items-center gap-2 mt-2">
+                    <div className="flex flex-wrap items-center gap-2 pt-2 mt-2 border-t border-[var(--card-border)]">
                       {onSummarize && threadData && threadData.replyCount > 0 && (
                         <button
                           type="button"
                           onClick={() => onSummarize(msg.id)}
                           disabled={summarizingThreads?.has(msg.id)}
-                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--card-bg)] border border-[var(--card-border)] rounded-full text-xs font-bold text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors shadow-sm disabled:opacity-50"
+                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--app-shell-subtle)] hover:bg-[var(--item-hover-bg)] text-[var(--foreground)] border border-[var(--card-border)] text-xs font-medium rounded-lg transition-colors disabled:opacity-50"
                         >
                           {summarizingThreads?.has(msg.id) ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--app-shell-muted)]" />
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--muted-foreground)]" />
                           ) : (
-                            <Clock className="w-3.5 h-3.5 text-[var(--app-shell-muted)]" />
+                            <Clock className="w-3.5 h-3.5 text-[var(--muted-foreground)]" />
                           )}
                           {summarizingThreads?.has(msg.id) ? "Summarizing\u2026" : "Summarize"}
                         </button>
@@ -517,29 +524,26 @@ export function MessageList({
                           type="button"
                           onClick={() => onCreateTasks(msg.id)}
                           disabled={extractingTasks?.has(msg.id)}
-                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--card-bg)] border border-[var(--card-border)] rounded-full text-xs font-bold text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors shadow-sm disabled:opacity-50"
+                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--app-shell-subtle)] hover:bg-[var(--item-hover-bg)] text-[var(--foreground)] border border-[var(--card-border)] text-xs font-medium rounded-lg transition-colors disabled:opacity-50"
                         >
                           {extractingTasks?.has(msg.id) ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--app-shell-muted)]" />
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--muted-foreground)]" />
                           ) : (
-                            <ListTodo className="w-3.5 h-3.5 text-[var(--app-shell-muted)]" />
+                            <ListTodo className="w-3.5 h-3.5 text-[var(--muted-foreground)]" />
                           )}
                           {extractingTasks?.has(msg.id) ? "Extracting…" : taskDrafts?.[msg.id] ? "Re-extract tasks" : "Create tasks"}
                         </button>
                       )}
 
                       {threadData && threadData.replyCount > 0 && onOpenThread && (
-                        <button
-                          type="button"
-                          onClick={() => onOpenThread(msg.id)}
-                          className="flex items-center gap-2 px-3 py-1.5 bg-[var(--app-shell-subtle)] border border-[var(--app-shell-border)] rounded-full text-xs font-bold text-[var(--app-shell-muted)] hover:bg-[var(--item-hover-bg)] transition-colors"
-                        >
-                          <div className="flex -space-x-1.5">
+                        <div className="ml-auto flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenThread(msg.id)}>
+                          <span className="text-xs text-[var(--muted-foreground)] font-medium">{threadData.replyCount} replies</span>
+                          <div className="flex -space-x-2">
                             {threadData.participants.slice(0, 3).map((pid) => {
                               if (pid === 'user') {
                                 return (
-                                  <div key="user" className="w-4 h-4 rounded-full bg-[var(--app-shell-subtle)] flex items-center justify-center ring-1 ring-[var(--card-bg)]">
-                                    <User className="w-2.5 h-2.5 text-[var(--app-shell-muted)]" />
+                                  <div key="user" className="w-6 h-6 rounded-full bg-[var(--app-shell-subtle)] border-2 border-[var(--card-bg)] flex items-center justify-center z-10">
+                                    <User className="w-3 h-3 text-[var(--muted-foreground)]" />
                                   </div>
                                 );
                               }
@@ -547,17 +551,16 @@ export function MessageList({
                               return tp ? (
                                 <img
                                   key={pid}
-                                  src={agentAvatarUrl(pid, 16, tp.color)}
+                                  src={agentAvatarUrl(pid, 24, tp.color)}
                                   alt={tp.name}
-                                  className="w-4 h-4 rounded-full ring-1 ring-[var(--card-bg)]"
+                                  className="w-6 h-6 rounded-full border-2 border-[var(--card-bg)] object-cover z-10"
                                 />
                               ) : (
-                                <div key={pid} className="w-4 h-4 rounded-full bg-[var(--app-shell-subtle)] ring-1 ring-[var(--card-bg)]" />
+                                <div key={pid} className="w-6 h-6 rounded-full bg-[var(--app-shell-subtle)] border-2 border-[var(--card-bg)] z-10" />
                               );
                             })}
                           </div>
-                          <span>{threadData.replyCount} replies</span>
-                        </button>
+                        </div>
                       )}
                     </div>