@mndrk/agx 2.0.22 → 2.0.24

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

@@ -16,18 +16,16 @@ import { MessageSquare, Copy, Hash, Loader2, Trash2, User, Clock, Zap, ListTodo,
 import { agentAvatarUrl } from "./ParticipantBar";
 import { stripMarkers } from "@/lib/chat-utils";
 
-const INLINE_PREVIEW_COUNT = 2;
 
 const THREAD_STATUSES: { value: ThreadStatus; label: string; color: string }[] = [
-  { value: "thinking", label: "Thinking", color: "#f59e0b" },
-  { value: "converged", label: "Converged", color: "#10b981" },
-  { value: "resolved", label: "Resolved", color: "#3b82f6" },
+  { value: "active", label: "Active", color: "#f59e0b" },
+  { value: "paused", label: "Paused", color: "#f97316" },
   { value: "in-review", label: "In Review", color: "#6b7280" },
+  { value: "done", label: "Done", color: "#3b82f6" },
   { value: "archived", label: "Archived", color: "#9ca3af" },
-  { value: "paused", label: "Paused", color: "#f97316" },
 ];
 
-const COLLAPSED_STATUSES: Set<ThreadStatus> = new Set(["resolved", "in-review", "archived"]);
+const COLLAPSED_STATUSES: Set<ThreadStatus> = new Set(["done", "in-review", "archived"]);
 
 interface Props {
   messages: GroupMessage[];
@@ -53,8 +51,6 @@ interface Props {
 }
 
 interface ThreadData extends ThreadInfo {
-  /** Last N replies to show inline */
-  previewReplies: GroupMessage[];
   /** All replies for the full view */
   allReplies: GroupMessage[];
 }
@@ -71,7 +67,6 @@ function buildThreadDataMap(messages: GroupMessage[]): Map<string, ThreadData> {
         replyCount: 0,
         participants: [],
         lastActivityAt: 0,
-        previewReplies: [],
         allReplies: [],
       };
       map.set(rootId, data);
@@ -86,13 +81,8 @@ function buildThreadDataMap(messages: GroupMessage[]): Map<string, ThreadData> {
       data.participants.push("user");
     }
   }
-  // Sort replies and keep only last N for preview
   for (const data of map.values()) {
     data.allReplies.sort((a, b) => a.timestamp - b.timestamp);
-    data.previewReplies = [...data.allReplies];
-    if (data.previewReplies.length > INLINE_PREVIEW_COUNT) {
-      data.previewReplies = data.previewReplies.slice(-INLINE_PREVIEW_COUNT);
-    }
   }
   return map;
 }
@@ -123,7 +113,7 @@ export function MessageList({
 }: Props) {
   const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map());
   const [statusMenuMessageId, setStatusMenuMessageId] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<"active" | "paused" | "in-review" | "resolved" | "archived">("active");
+  const [activeTab, setActiveTab] = useState<"active" | "paused" | "in-review" | "done" | "archived">("active");
   const participantMap = Object.fromEntries(participants.map((p) => [p.id, p]));
 
   // Filter to only main chat messages (not thread replies), reverse chronological
@@ -133,24 +123,24 @@ export function MessageList({
   );
 
   const TAB_FILTERS: Record<typeof activeTab, Set<ThreadStatus>> = {
-    active: new Set(["thinking", "converged"]),
+    active: new Set(["active"]),
     paused: new Set(["paused"]),
     "in-review": new Set(["in-review"]),
-    resolved: new Set(["resolved"]),
+    done: new Set(["done"]),
     archived: new Set(["archived"]),
   };
 
   const mainMessages = useMemo(
-    () => allMainMessages.filter((msg) => TAB_FILTERS[activeTab].has(msg.threadStatus ?? "thinking")),
+    () => allMainMessages.filter((msg) => TAB_FILTERS[activeTab].has(msg.threadStatus ?? "active")),
     [allMainMessages, activeTab]
   );
 
   const tabCounts = useMemo(() => ({
-    active: allMainMessages.filter((m) => TAB_FILTERS.active.has(m.threadStatus ?? "thinking")).length,
-    paused: allMainMessages.filter((m) => TAB_FILTERS.paused.has(m.threadStatus ?? "thinking")).length,
-    "in-review": allMainMessages.filter((m) => TAB_FILTERS["in-review"].has(m.threadStatus ?? "thinking")).length,
-    resolved: allMainMessages.filter((m) => TAB_FILTERS.resolved.has(m.threadStatus ?? "thinking")).length,
-    archived: allMainMessages.filter((m) => TAB_FILTERS.archived.has(m.threadStatus ?? "thinking")).length,
+    active: allMainMessages.filter((m) => TAB_FILTERS.active.has(m.threadStatus ?? "active")).length,
+    paused: allMainMessages.filter((m) => TAB_FILTERS.paused.has(m.threadStatus ?? "active")).length,
+    "in-review": allMainMessages.filter((m) => TAB_FILTERS["in-review"].has(m.threadStatus ?? "active")).length,
+    done: allMainMessages.filter((m) => TAB_FILTERS.done.has(m.threadStatus ?? "active")).length,
+    archived: allMainMessages.filter((m) => TAB_FILTERS.archived.has(m.threadStatus ?? "active")).length,
   }), [allMainMessages]);
 
   const threadDataMap = useMemo(() => buildThreadDataMap(messages), [messages]);
@@ -180,7 +170,7 @@ export function MessageList({
     { key: "active", label: "Active" },
     { key: "paused", label: "Paused" },
     { key: "in-review", label: "In Review" },
-    { key: "resolved", label: "Resolved" },
+    { key: "done", label: "Done" },
     { key: "archived", label: "Archived" },
   ];
 
@@ -188,7 +178,7 @@ export function MessageList({
     <div className="chat-scrollbar flex-1 overflow-y-auto p-4">
       <div className="max-w-3xl mx-auto">
         {allMainMessages.length > 0 && (
-          <div className="max-w-2xl mx-auto flex items-center gap-1 mb-4 border-b border-slate-100 pb-2">
+          <div className="flex items-center justify-center gap-1 p-1 rounded-lg w-fit mx-auto border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] mb-4">
             {TABS.map((tab) => {
               const count = tabCounts[tab.key];
               const isActive = activeTab === tab.key;
@@ -197,15 +187,15 @@ export function MessageList({
                   key={tab.key}
                   type="button"
                   onClick={() => setActiveTab(tab.key)}
-                  className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-colors ${
+                  className={`px-3 py-1.5 text-xs font-bold rounded-md transition-all ${
                     isActive
-                      ? "bg-slate-900 text-white"
-                      : "text-slate-400 hover:text-slate-600 hover:bg-slate-50"
+                      ? "bg-[var(--app-shell-surface)] text-[var(--foreground)] shadow-sm"
+                      : "text-[var(--app-shell-muted)] hover:text-[var(--foreground)]"
                   }`}
                 >
                   {tab.label}
                   {count > 0 && (
-                    <span className={`ml-1.5 text-[10px] ${isActive ? "text-slate-300" : "text-slate-300"}`}>
+                    <span className={`ml-1.5 text-[10px] ${isActive ? "opacity-60" : "opacity-50"}`}>
                       {count}
                     </span>
                   )}
@@ -216,13 +206,13 @@ export function MessageList({
         )}
         {/* Top-level streaming indicators are now rendered inside their triggering message card */}
         {allMainMessages.length === 0 && Object.keys(streaming).length === 0 && (
-          <div className="flex flex-col items-center justify-center text-slate-400 mt-32 space-y-3">
+          <div className="flex flex-col items-center justify-center text-[var(--app-shell-muted)] mt-32 space-y-3">
             <MessageSquare className="h-6 w-6" strokeWidth={1.5} />
             <span className="text-sm font-medium tracking-wide">Start a thread</span>
           </div>
         )}
         {allMainMessages.length > 0 && mainMessages.length === 0 && (
-          <div className="flex flex-col items-center justify-center text-slate-400 mt-16 space-y-2">
+          <div className="flex flex-col items-center justify-center text-[var(--app-shell-muted)] mt-16 space-y-2">
             <span className="text-sm font-medium">No {activeTab} threads</span>
           </div>
         )}
@@ -236,8 +226,8 @@ export function MessageList({
             ? summaryMsg.content.slice(SUMMARY_MARKER.length).trim()
             : null;
 
-          const repliesToShow = (threadData?.previewReplies || []).filter((r) => !r.content.startsWith(SUMMARY_MARKER));
-          const msgStatus = msg.threadStatus ?? "thinking";
+
+          const msgStatus = msg.threadStatus ?? "active";
           const isCollapsed = COLLAPSED_STATUSES.has(msgStatus);
           const statusInfo = THREAD_STATUSES.find((s) => s.value === msgStatus) ?? THREAD_STATUSES[0];
           const hasActiveAgents = Object.values(streaming).some((entry) => entry.rootMessageId === msg.id);
@@ -248,13 +238,13 @@ export function MessageList({
                 key={msg.id}
                 ref={(element) => setMessageRef(msg.id, element)}
                 data-message-id={msg.id}
-                className="max-w-2xl mx-auto bg-slate-50 rounded-xl border border-slate-200 mb-3 group transition-all hover:border-slate-300 relative cursor-pointer"
+                className={`max-w-2xl mx-auto bg-[var(--app-shell-subtle)] rounded-xl border border-[var(--app-shell-border)] mb-3 group transition-all hover:border-[var(--app-shell-border-strong)] relative cursor-pointer ${statusMenuMessageId === msg.id ? 'z-50' : ''}`}
                 onClick={() => onOpenThread?.(msg.id)}
               >
                 <div className="px-4 py-2.5">
                   <div className="flex items-center gap-3">
-                    <Hash className="w-3.5 h-3.5 text-slate-400 shrink-0" />
-                    <span className="text-sm font-medium text-slate-500 truncate flex-1">
+                    <Hash className="w-3.5 h-3.5 text-[var(--app-shell-muted)] shrink-0" />
+                    <span className="text-sm font-medium text-[var(--app-shell-muted)] truncate flex-1">
                       {stripMarkers(msg.content.split('\n')[0])}
                     </span>
                     {shipModeThreads?.has(msg.id) && (
@@ -270,9 +260,9 @@ export function MessageList({
                       </span>
                     )}
                     {msg.outcomeNote && (
-                      <span className="text-[11px] text-slate-400 truncate max-w-[200px]">{msg.outcomeNote}</span>
+                      <span className="text-[11px] text-[var(--app-shell-soft-text)] truncate max-w-[200px]">{msg.outcomeNote}</span>
                     )}
-                    <span className="text-[10px] text-slate-400 shrink-0">
+                    <span className="text-[10px] text-[var(--app-shell-soft-text)] shrink-0">
                       {new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(msg.timestamp)}
                     </span>
                   {onUpdateMessageThreadStatus && (() => {
@@ -285,7 +275,7 @@ export function MessageList({
                             e.stopPropagation();
                             setStatusMenuMessageId(isOpen ? null : msg.id);
                           }}
-                          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold border transition-colors hover:bg-white"
+                          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold border transition-colors hover:bg-[var(--app-shell-elevated)]"
                           style={{ borderColor: statusInfo.color + "40", color: statusInfo.color }}
                         >
                           <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusInfo.color }} />
@@ -293,14 +283,14 @@ export function MessageList({
                         </button>
                         {isOpen && (
                           <div
-                            className="absolute top-full right-0 mt-1 z-50 bg-white border border-slate-200 rounded-lg shadow-lg p-1 min-w-[8.5rem]"
+                            className="absolute top-full right-0 mt-1 z-50 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] rounded-lg shadow-lg p-1 min-w-[8.5rem]"
                             onClick={(e) => e.stopPropagation()}
                           >
                             {THREAD_STATUSES.map((s) => (
                               <button
                                 key={s.value}
                                 type="button"
-                                className={`flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs font-medium transition-colors ${s.value === msgStatus ? "bg-indigo-50 text-indigo-700" : "text-slate-600 hover:bg-slate-50"}`}
+                                className={`flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs font-medium transition-colors ${s.value === msgStatus ? "bg-[var(--primary-muted)] text-[var(--primary)]" : "text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)]"}`}
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   onUpdateMessageThreadStatus(msg.id, s.value);
@@ -317,18 +307,18 @@ export function MessageList({
                     );
                   })()}
                   {threadData && threadData.replyCount > 0 && (
-                    <span className="text-[10px] text-slate-400 shrink-0">{threadData.replyCount} replies</span>
+                    <span className="text-[10px] text-[var(--app-shell-muted)] shrink-0">{threadData.replyCount} replies</span>
                   )}
                   </div>
                   {(summaryText || taskDrafts?.[msg.id]) && (
                     <div className="mt-1.5 pl-6 flex flex-col gap-1">
                       {summaryText && (
-                        <div className="text-sm text-slate-600 leading-relaxed prose prose-sm prose-slate max-w-none">
+                        <div className="text-sm text-[var(--muted-foreground)] leading-relaxed prose prose-sm prose-neutralmax-w-none">
                           <Markdown content={summaryText} isUser={false} />
                         </div>
                       )}
                       {taskDrafts?.[msg.id] && taskDrafts[msg.id].tasks.length > 0 && (
-                        <span className="text-[10px] text-slate-400 flex items-center gap-1">
+                        <span className="text-[10px] text-[var(--app-shell-muted)] flex items-center gap-1">
                           <ListTodo className="w-3 h-3" />
                           {taskDrafts[msg.id].tasks.length} {taskDrafts[msg.id].tasks.length === 1 ? "task" : "tasks"}
                         </span>
@@ -341,7 +331,7 @@ export function MessageList({
           }
 
           return (
-            <div key={msg.id} className="max-w-2xl mx-auto bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden mb-6 group transition-all hover:border-slate-300 relative">
+            <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' : ''}`}>
               {(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"
@@ -350,7 +340,7 @@ export function MessageList({
                     <button
                       type="button"
                       onClick={() => onAddToChat(msg.id)}
-                      className="p-1.5 text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 rounded-md transition-colors"
+                      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" />
@@ -359,7 +349,7 @@ export function MessageList({
                   <button
                     type="button"
                     onClick={() => { navigator.clipboard.writeText(msg.id); }}
-                    className="p-1.5 text-slate-400 hover:bg-slate-100 rounded-md transition-colors"
+                    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" />
@@ -368,7 +358,7 @@ export function MessageList({
                     <button
                       type="button"
                       onClick={() => onCopyThread(msg.id)}
-                      className="p-1.5 text-slate-400 hover:bg-slate-100 rounded-md transition-colors"
+                      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" />
@@ -379,7 +369,7 @@ export function MessageList({
                       type="button"
                       onClick={() => onDeleteThreadRoot(msg.id)}
                       disabled={isDeletingRoot}
-                      className="p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                      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" />}
@@ -394,7 +384,7 @@ export function MessageList({
                     {/* User Info & Title */}
                     <div className="flex gap-3 mb-4">
                       {msg.role !== 'user' && (
-                        <NextLink href={`/agents/${p?.id || msg.participantId || "assistant"}`} className="w-10 h-10 rounded-full bg-slate-100 overflow-hidden border border-slate-100 shadow-sm flex items-center justify-center shrink-0 hover:ring-2 hover:ring-blue-300 transition-shadow">
+                        <NextLink href={`/agents/${p?.id || msg.participantId || "assistant"}`} className="w-10 h-10 rounded-full bg-[var(--app-shell-subtle)] overflow-hidden border border-[var(--app-shell-border)] shadow-sm flex items-center justify-center shrink-0 hover:ring-2 hover:ring-[var(--ring)] transition-shadow">
                           {p ? (
                             <img
                               src={agentAvatarUrl(p.id, 40, p.color)}
@@ -413,7 +403,7 @@ export function MessageList({
                       <div className="flex-1 min-w-0 pt-0.5">
                         {msg.role !== 'user' && (
                           <div className="flex items-center gap-2 mb-0.5">
-                            <NextLink href={`/agents/${p?.id || msg.participantId || "assistant"}`} className="font-bold text-sm text-slate-900 hover:underline">
+                            <NextLink href={`/agents/${p?.id || msg.participantId || "assistant"}`} className="font-bold text-sm text-[var(--foreground)] hover:underline">
                               {p?.name || msg.participantId || "Assistant"}
                             </NextLink>
                           </div>
@@ -422,11 +412,11 @@ export function MessageList({
                           className="cursor-pointer group/msg-title mb-1"
                           onClick={() => onOpenThread?.(msg.id)}
                         >
-                          <h3 className="text-lg font-bold text-slate-900 leading-tight group-hover/msg-title:text-indigo-600 transition-colors line-clamp-1">
+                          <h3 className="text-lg font-bold text-[var(--foreground)] leading-tight group-hover/msg-title:text-[var(--primary)] transition-colors line-clamp-1">
                             {stripMarkers(msg.content.split('\n')[0])}
                           </h3>
                           <div className="mt-1 flex items-center gap-2">
-                            <span className="text-[11px] font-medium text-slate-400">
+                            <span className="text-[11px] font-medium text-[var(--app-shell-soft-text)]">
                               {new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }).format(msg.timestamp)}
                             </span>
                             {onUpdateMessageThreadStatus && (() => {
@@ -439,7 +429,7 @@ export function MessageList({
                                       e.stopPropagation();
                                       setStatusMenuMessageId(isOpen ? null : msg.id);
                                     }}
-                                    className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold border transition-colors hover:bg-slate-50"
+                                    className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold border transition-colors hover:bg-[var(--app-shell-subtle)]"
                                     style={{ borderColor: statusInfo.color + "40", color: statusInfo.color }}
                                   >
                                     <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusInfo.color }} />
@@ -447,14 +437,14 @@ export function MessageList({
                                   </button>
                                   {isOpen && (
                                     <div
-                                      className="absolute top-full left-0 mt-1 z-50 bg-white border border-slate-200 rounded-lg shadow-lg p-1 min-w-[8.5rem]"
+                                      className="absolute top-full left-0 mt-1 z-50 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] rounded-lg shadow-lg p-1 min-w-[8.5rem]"
                                       onClick={(e) => e.stopPropagation()}
                                     >
                                       {THREAD_STATUSES.map((s) => (
                                         <button
                                           key={s.value}
                                           type="button"
-                                          className={`flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs font-medium transition-colors ${s.value === msgStatus ? "bg-indigo-50 text-indigo-700" : "text-slate-600 hover:bg-slate-50"}`}
+                                          className={`flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs font-medium transition-colors ${s.value === msgStatus ? "bg-[var(--primary-muted)] text-[var(--primary)]" : "text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)]"}`}
                                           onClick={(e) => {
                                             e.stopPropagation();
                                             onUpdateMessageThreadStatus(msg.id, s.value);
@@ -465,28 +455,6 @@ export function MessageList({
                                           {s.label}
                                         </button>
                                       ))}
-                                      {msgStatus === "converged" && onUpdateMessageOutcomeNote && (
-                                        <div className="px-2 py-1.5 border-t border-slate-100 mt-1">
-                                          <input
-                                            type="text"
-                                            className="w-full border border-slate-200 rounded px-2 py-1 text-[11px] text-slate-700 outline-none focus:border-indigo-400"
-                                            placeholder="Outcome note…"
-                                            defaultValue={msg.outcomeNote ?? ""}
-                                            onClick={(e) => e.stopPropagation()}
-                                            onKeyDown={(e) => {
-                                              if (e.key === "Enter") {
-                                                onUpdateMessageOutcomeNote(msg.id, (e.target as HTMLInputElement).value);
-                                                setStatusMenuMessageId(null);
-                                              }
-                                            }}
-                                            onBlur={(e) => {
-                                              if (e.target.value !== (msg.outcomeNote ?? "")) {
-                                                onUpdateMessageOutcomeNote(msg.id, e.target.value);
-                                              }
-                                            }}
-                                          />
-                                        </div>
-                                      )}
                                     </div>
                                   )}
                                 </div>
@@ -506,7 +474,7 @@ export function MessageList({
                             )}
                           </div>
                           {(msg.content.length > 80 || msg.content.includes('\n')) && (
-                            <div className="mt-2 text-[15px] text-slate-600 leading-relaxed line-clamp-3">
+                            <div className="mt-2 text-[15px] text-[var(--muted-foreground)] leading-relaxed line-clamp-3">
                               <Markdown content={stripMarkers(msg.content.split('\n').slice(1).join('\n').trimStart())} isUser={msg.role === 'user'} />
                             </div>
                           )}
@@ -521,7 +489,7 @@ export function MessageList({
                     )}
 
                     {summaryText && (
-                      <div className="mb-4 text-sm text-slate-600 leading-relaxed">
+                      <div className="mb-4 text-sm text-[var(--muted-foreground)] leading-relaxed">
                         <Markdown content={summaryText} isUser={false} />
                       </div>
                     )}
@@ -533,12 +501,12 @@ export function MessageList({
                           type="button"
                           onClick={() => onSummarize(msg.id)}
                           disabled={summarizingThreads?.has(msg.id)}
-                          className="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-200 rounded-full text-xs font-bold text-slate-600 hover:bg-slate-50 transition-colors shadow-sm disabled:opacity-50"
+                          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"
                         >
                           {summarizingThreads?.has(msg.id) ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin text-slate-400" />
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--app-shell-muted)]" />
                           ) : (
-                            <Clock className="w-3.5 h-3.5 text-slate-400" />
+                            <Clock className="w-3.5 h-3.5 text-[var(--app-shell-muted)]" />
                           )}
                           {summarizingThreads?.has(msg.id) ? "Summarizing\u2026" : "Summarize"}
                         </button>
@@ -549,12 +517,12 @@ 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-white border border-slate-200 rounded-full text-xs font-bold text-slate-600 hover:bg-slate-50 transition-colors shadow-sm disabled:opacity-50"
+                          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"
                         >
                           {extractingTasks?.has(msg.id) ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin text-slate-400" />
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--app-shell-muted)]" />
                           ) : (
-                            <ListTodo className="w-3.5 h-3.5 text-slate-400" />
+                            <ListTodo className="w-3.5 h-3.5 text-[var(--app-shell-muted)]" />
                           )}
                           {extractingTasks?.has(msg.id) ? "Extracting…" : taskDrafts?.[msg.id] ? "Re-extract tasks" : "Create tasks"}
                         </button>
@@ -564,14 +532,14 @@ export function MessageList({
                         <button
                           type="button"
                           onClick={() => onOpenThread(msg.id)}
-                          className="flex items-center gap-2 px-3 py-1.5 bg-slate-50 border border-slate-100 rounded-full text-xs font-bold text-slate-500 hover:bg-slate-100 transition-colors"
+                          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">
                             {threadData.participants.slice(0, 3).map((pid) => {
                               if (pid === 'user') {
                                 return (
-                                  <div key="user" className="w-4 h-4 rounded-full bg-slate-200 flex items-center justify-center ring-1 ring-white">
-                                    <User className="w-2.5 h-2.5 text-slate-400" />
+                                  <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>
                                 );
                               }
@@ -581,10 +549,10 @@ export function MessageList({
                                   key={pid}
                                   src={agentAvatarUrl(pid, 16, tp.color)}
                                   alt={tp.name}
-                                  className="w-4 h-4 rounded-full ring-1 ring-white"
+                                  className="w-4 h-4 rounded-full ring-1 ring-[var(--card-bg)]"
                                 />
                               ) : (
-                                <div key={pid} className="w-4 h-4 rounded-full bg-slate-200 ring-1 ring-white" />
+                                <div key={pid} className="w-4 h-4 rounded-full bg-[var(--app-shell-subtle)] ring-1 ring-[var(--card-bg)]" />
                               );
                             })}
                           </div>
@@ -617,7 +585,7 @@ export function MessageList({
 
                     {/* Extracting tasks spinner */}
                     {extractingTasks?.has(msg.id) && (
-                      <div className="mt-4 flex items-center gap-2 text-xs text-slate-400">
+                      <div className="mt-4 flex items-center gap-2 text-xs text-[var(--app-shell-muted)]">
                         <Loader2 className="w-3.5 h-3.5 animate-spin" />
                         <span>Extracting tasks…</span>
                       </div>
@@ -625,49 +593,6 @@ export function MessageList({
                   </div>
                 </div>
 
-                {/* Inline Replies Section - Only when NO summary exists */}
-                {!summaryText && threadData && threadData.replyCount > 0 && (
-                  <div className="p-6 pt-0 border-t border-slate-100 bg-slate-50/10">
-                    <div className="pt-4 max-h-[320px] overflow-hidden relative">
-                      {threadData.replyCount > repliesToShow.length && (
-                        <div className="flex items-center gap-4 mb-4">
-                          <div className="flex-1 h-px bg-slate-100" />
-                          <button
-                            onClick={() => onOpenThread?.(msg.id)}
-                            className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-slate-400 hover:text-indigo-600 transition-colors shrink-0"
-                          >
-                            <MessageSquare className="w-3.5 h-3.5" />
-                            <span>Show {threadData.replyCount - repliesToShow.length} more {threadData.replyCount - repliesToShow.length === 1 ? 'reply' : 'replies'}</span>
-                          </button>
-                          <div className="flex-1 h-px bg-slate-100" />
-                        </div>
-                      )}
-                      <div className="space-y-1">
-                        {repliesToShow.map((reply) => {
-                          const rp = reply.participantId ? participantMap[reply.participantId] : null;
-                          return (
-                            <div
-                              key={reply.id}
-                              ref={(element) => setMessageRef(reply.id, element)}
-                              data-message-id={reply.id}
-                            >
-                              <MessageBubble
-                                isRoot={false}
-                                message={reply}
-                                participantName={rp?.name || reply.participantId || "Assistant"}
-                                participantColor={rp?.color}
-                                participantId={rp?.id || reply.participantId || undefined}
-                                onOpenThread={onOpenThread}
-                                highlighted={reply.id === highlightedMessageId}
-                              />
-                            </div>
-                          );
-                        })}
-                      </div>
-                      <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-slate-50 via-slate-50/80 to-transparent pointer-events-none z-10" />
-                    </div>
-                  </div>
-                )}
 
                 {/* Typing indicators for this thread */}
                 {Object.entries(streaming)