@mndrk/agx 2.0.19 → 2.0.21

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

@@ -4,7 +4,11 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
-import { useMentionAutocomplete, type MentionSuggestion } from "@/hooks/useMentionAutocomplete";
+import {
+  useMentionAutocomplete,
+  type MentionProject,
+  type MentionSuggestion,
+} from "@/hooks/useMentionAutocomplete";
 import { useCommandAutocomplete, type SlashCommand } from "@/hooks/useCommandAutocomplete";
 import { useAttachments, type Attachment } from "@/hooks/useAttachments";
 import { useFileMention } from "@/hooks/useFileMention";
@@ -12,7 +16,12 @@ import { useThreadMention, type Discussion } from "@/hooks/useThreadMention";
 import { useComposerAttachments } from "@/hooks/useComposerAttachments";
 import { buildAgentContext } from "@/lib/chat/agentContextBuilder";
 import type { ThreadRef } from "@/lib/thread-export";
-import { ParticipantMention, FileMention, ThreadMention } from "@/lib/tiptap/composer-mentions";
+import {
+  ParticipantMention,
+  ProjectMention,
+  FileMention,
+  ThreadMention,
+} from "@/lib/tiptap/composer-mentions";
 import { serializeToPlainText } from "@/lib/tiptap/serialize-composer";
 import { getCurrentParagraphText, plainTextRangeToPos } from "@/lib/tiptap/editor-utils";
 import { MentionPopover } from "./MentionPopover";
@@ -23,7 +32,7 @@ import { AttachmentTray } from "./AttachmentTray";
 import { ComposerDropZone } from "./ComposerDropZone";
 import type { Participant, GroupMessage } from "@/lib/types";
 import type { Team } from "@/hooks/useTeams";
-import { Paperclip } from "lucide-react";
+import { Paperclip, Rocket } from "lucide-react";
 
 import "@/styles/composer-pills.css";
 
@@ -40,7 +49,12 @@ interface Props {
   onSend: (message: string, maxRounds: number, attachmentIds?: string[], attachments?: Attachment[]) => void;
   onStop: () => void;
   loading: boolean;
+  /** Whether autonomous mode is currently active */
+  autoMode?: boolean;
+  /** Called when user toggles autonomous mode */
+  onAutoModeChange?: (enabled: boolean) => void;
   participants: Participant[];
+  projects?: MentionProject[];
   /** Teams for the current workspace */
   teams?: Team[];
   /** All messages in the current workspace — used for @# discussion mentions */
@@ -85,6 +99,7 @@ export function Composer({
   onStop,
   loading,
   participants,
+  projects = [],
   teams = [],
   messages: allMessages = [],
   commands,
@@ -93,6 +108,8 @@ export function Composer({
   onConfigureRoots,
   pendingThreadInsert,
   onClearPendingThread,
+  autoMode = false,
+  onAutoModeChange,
 }: Props) {
   const [maxRounds, setMaxRounds] = useState(10);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -104,7 +121,7 @@ export function Composer({
 
   const [threadRefs, setThreadRefs] = useState<ThreadRef[]>([]);
 
-  const mention = useMentionAutocomplete({ participants, teams, maxSuggestions: 8 });
+  const mention = useMentionAutocomplete({ participants, teams, projects, maxSuggestions: 8 });
   const command = useCommandAutocomplete({ commands, maxSuggestions: 6 });
   const fileMention = useFileMention({ maxSuggestions: 8 });
   const threadMention = useThreadMention({ messages: allMessages, maxSuggestions: 8 });
@@ -131,6 +148,7 @@ export function Composer({
       }),
       Placeholder.configure({ placeholder }),
       ParticipantMention,
+      ProjectMention,
       FileMention,
       ThreadMention,
     ],
@@ -294,25 +312,35 @@ export function Composer({
 
     const isParallel = replacement.text.startsWith("@@");
 
-    const content = suggestion.kind === "team"
-      ? {
-          type: "participantMention",
-          attrs: {
-            id: suggestion.team.id,
-            name: suggestion.team.name,
-            mode: isParallel ? "parallel" : "sequential",
-            kind: "team",
-          },
-        }
-      : {
-          type: "participantMention",
-          attrs: {
-            id: suggestion.participant.id,
-            name: suggestion.participant.name,
-            mode: isParallel ? "parallel" : "sequential",
-            kind: "agent",
-          },
-        };
+    const content =
+      suggestion.kind === "team"
+        ? {
+            type: "participantMention",
+            attrs: {
+              id: suggestion.team.id,
+              name: suggestion.team.name,
+              mode: isParallel ? "parallel" : "sequential",
+              kind: "team",
+            },
+          }
+        : suggestion.kind === "project"
+          ? {
+              type: "projectMention",
+              attrs: {
+                id: suggestion.project.id,
+                slug: suggestion.project.slug,
+                name: suggestion.project.name,
+              },
+            }
+          : {
+              type: "participantMention",
+              attrs: {
+                id: suggestion.participant.id,
+                name: suggestion.participant.name,
+                mode: isParallel ? "parallel" : "sequential",
+                kind: "agent",
+              },
+            };
 
     replaceRangeWithNode(editor, info.blockStart, replacement.startIndex, replacement.endIndex, content);
     mention.close();
@@ -472,7 +500,66 @@ export function Composer({
     <div className="pb-6">
       <div className="max-w-3xl mx-auto">
         <ComposerDropZone onDrop={attachments.stageFiles}>
-          <div className="bg-white rounded-2xl border border-slate-200 shadow-lg p-1.5 focus-within:ring-4 focus-within:ring-slate-900/5 transition-all">
+          <div className={`bg-white rounded-2xl border border-slate-200 shadow-xl shadow-slate-200/50 transition-all duration-300`}>
+          {/* Ship Mode header */}
+          {onAutoModeChange && (
+            <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50" : "border-slate-100"}`}>
+              {/* Animated gradient background when active */}
+              <div
+                className={`absolute inset-0 transition-opacity duration-700 ${autoMode ? "opacity-100" : "opacity-0"}`}
+                style={{
+                  background: "linear-gradient(120deg, #fff7ed 0%, #ffedd5 25%, #fed7aa 50%, #ffedd5 75%, #fff7ed 100%)",
+                  backgroundSize: "200% 100%",
+                  animation: autoMode ? "shipBgSweep 4s ease-in-out infinite" : "none",
+                }}
+              />
+              {/* Speed lines when active */}
+              {autoMode && (
+                <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                  {[...Array(8)].map((_, i) => (
+                    <div
+                      key={i}
+                      className="absolute h-[1.5px] rounded-full"
+                      style={{
+                        top: `${12 + i * 10}%`,
+                        right: "-10%",
+                        width: `${20 + (i % 3) * 15}%`,
+                        background: `linear-gradient(to left, transparent, rgba(251, 146, 60, ${0.15 + (i % 3) * 0.1}))`,
+                        animation: `shipSpeedLine ${0.8 + (i % 4) * 0.3}s ${i * 0.1}s ease-in-out infinite`,
+                      }}
+                    />
+                  ))}
+                </div>
+              )}
+              <div className="relative px-3 py-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={`p-1 rounded-md transition-all duration-300 ${autoMode ? "bg-indigo-500 text-white shadow-md shadow-indigo-500/30" : "bg-slate-100 text-slate-400"}`}
+                      style={autoMode ? { animation: "shipPulse 2s ease-in-out infinite" } : {}}
+                    >
+                      <Rocket size={14} />
+                    </div>
+                    <span className={`text-sm font-semibold transition-colors duration-300 ${autoMode ? "text-indigo-900" : "text-slate-800"}`}>Ship Mode</span>
+                    <span className={`text-xs transition-colors duration-300 ${autoMode ? "text-indigo-600/60" : "text-slate-400"}`}>|</span>
+                    <span className={`text-xs font-medium transition-colors duration-300 ${autoMode ? "text-indigo-700/70" : "text-slate-500"}`}>
+                      {autoMode
+                        ? "Agents work continuously until this thread ships"
+                        : "Agents work continuously until this thread ships"}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => onAutoModeChange(!autoMode)}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${autoMode ? "bg-orange-500" : "bg-slate-200"}`}
+                  >
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${autoMode ? "translate-x-6" : "translate-x-1"}`} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="p-1.5 focus-within:ring-4 focus-within:ring-slate-900/5 transition-all">
 
             {attachments.staged.length > 0 && (
               <div className="mx-2 mt-2 mb-1">
@@ -573,34 +660,69 @@ export function Composer({
               )}
             </div>
 
-            <div className="px-4 pb-2 flex items-center gap-3 mt-1">
-              <div className="flex items-center gap-1.5">
-                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Turn Limit</span>
-                <select
-                  value={maxRounds}
-                  onChange={(e) => setMaxRounds(Number(e.target.value))}
-                  className="bg-transparent border-none outline-none text-[11px] font-bold text-slate-900 cursor-pointer appearance-none hover:text-indigo-600 transition-colors"
-                >
-                  {[1, 3, 5, 10, 20, 50].map((n) => (
-                    <option key={n} value={n}>{n}</option>
-                  ))}
-                </select>
-              </div>
-              <div className="w-px h-3 bg-slate-200" />
-              <div className="flex gap-1 items-center overflow-x-auto no-scrollbar">
-                {participants.length === 0 ? (
-                  <span className="text-[10px] font-medium text-slate-400">No agents active</span>
-                ) : (
-                  participants.map(p => (
-                    <div key={p.id} className="w-4 h-4 rounded-full bg-slate-100 shadow-sm flex items-center justify-center overflow-hidden shrink-0" 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 ring-1 ring-slate-200 object-cover" />
+            {/* Meta Footer */}
+            <div className="px-4 pb-2.5 pt-1 flex items-center justify-between border-t border-slate-100 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-slate-400 uppercase tracking-wider">Turns</span>
+                  <div className="flex items-center gap-1.5">
+                    <div className="h-1.5 w-14 bg-slate-100 rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full transition-all duration-500 bg-indigo-500"
+                        style={{ width: "0%" }}
+                      />
                     </div>
-                  ))
-                )}
+                    <select
+                      value={maxRounds}
+                      onChange={(e) => setMaxRounds(Number(e.target.value))}
+                      className="bg-transparent border-none outline-none text-xs font-semibold text-slate-600 cursor-pointer appearance-none hover:text-indigo-600 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-slate-100" />
+
+                {/* 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-slate-400">No agents</span>
+                  ) : (
+                    participants.map(p => (
+                      <div
+                        key={p.id}
+                        className="relative w-6 h-6 rounded-full bg-slate-100 border-2 border-white shadow-sm flex items-center justify-center overflow-visible shrink-0 hover:-translate-y-0.5 transition-transform cursor-pointer"
+                        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-white rounded-full" />
+                        )}
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+
+              {/* Status indicator */}
+              <div className="flex items-center gap-1.5 text-slate-400">
+                <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>
     </div>

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/chat-ui/Markdown.tsx

@@ -101,7 +101,7 @@ const userComponents: Components = {
   ),
   hr: () => <hr className="my-4 border-white/20" />,
   a: ({ children, href }) => (
-    <a href={href} className="text-white underline underline-offset-2" target="_blank" rel="noopener noreferrer">
+    <a href={href} className="text-blue-400 underline underline-offset-2 hover:text-blue-300" target="_blank" rel="noopener noreferrer">
       {children}
     </a>
   ),

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/chat-ui/MentionPopover.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import type { MentionSuggestion } from "@/hooks/useMentionAutocomplete";
-import { Users } from "lucide-react";
+import { FolderKanban, Users } from "lucide-react";
 
 interface MentionPopoverProps {
   isOpen: boolean;
@@ -50,7 +50,12 @@ export function MentionPopover({
       >
         {suggestions.map((suggestion, index) => {
           const isActive = index === activeIndex;
-          const id = suggestion.kind === "team" ? `team-${suggestion.team.id}` : suggestion.participant.id;
+          const id =
+            suggestion.kind === "team"
+              ? `team-${suggestion.team.id}`
+              : suggestion.kind === "project"
+                ? `project-${suggestion.project.id}`
+                : suggestion.participant.id;
           const group = suggestion.group;
 
           // Show group header if this is a new non-empty group
@@ -96,6 +101,36 @@ export function MentionPopover({
             );
           }
 
+          if (suggestion.kind === "project") {
+            return (
+              <div key={id}>
+                {groupHeader}
+                <button
+                  type="button"
+                  role="option"
+                  id={`${optionIdPrefix}-${id}`}
+                  aria-selected={isActive}
+                  ref={(element) => {
+                    optionRefs.current[index] = element;
+                  }}
+                  className={`w-full px-3 py-2 text-left text-sm transition-colors ${
+                    isActive ? "bg-blue-50 text-zinc-900" : "text-zinc-700 hover:bg-zinc-50"
+                  }`}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                  }}
+                  onClick={() => onSelect(suggestion)}
+                >
+                  <span className="inline-flex items-center gap-2">
+                    <FolderKanban className="h-3.5 w-3.5 text-zinc-500" aria-hidden />
+                    <span className="font-medium">{suggestion.project.name}</span>
+                    <span className="text-xs text-zinc-400">{suggestion.project.slug}</span>
+                  </span>
+                </button>
+              </div>
+            );
+          }
+
           const participant = suggestion.participant;
           return (
             <div key={id}>

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

@@ -12,7 +12,7 @@ import { Markdown } from "./Markdown";
 import { MessageAttachments } from "./MessageAttachments";
 import { TaskDraftCard } from "./TaskDraftCard";
 import { TaskStatusCard } from "./TaskStatusCard";
-import { MessageSquare, Copy, Hash, Loader2, Trash2, User, Clock, Zap, ListTodo, CheckCircle2, Circle, Link } from "lucide-react";
+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";
 
@@ -22,11 +22,12 @@ 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: "parked", label: "Parked", color: "#6b7280" },
+  { value: "in-review", label: "In Review", color: "#6b7280" },
   { value: "archived", label: "Archived", color: "#9ca3af" },
+  { value: "paused", label: "Paused", color: "#f97316" },
 ];
 
-const COLLAPSED_STATUSES: Set<ThreadStatus> = new Set(["resolved", "parked", "archived"]);
+const COLLAPSED_STATUSES: Set<ThreadStatus> = new Set(["resolved", "in-review", "archived"]);
 
 interface Props {
   messages: GroupMessage[];
@@ -48,6 +49,7 @@ interface Props {
   highlightedMessageId?: string | null;
   onUpdateMessageThreadStatus?: (messageId: string, status: ThreadStatus) => void;
   onUpdateMessageOutcomeNote?: (messageId: string, note: string) => void;
+  shipModeThreads?: Set<string>;
 }
 
 interface ThreadData extends ThreadInfo {
@@ -117,10 +119,11 @@ export function MessageList({
   highlightedMessageId,
   onUpdateMessageThreadStatus,
   onUpdateMessageOutcomeNote,
+  shipModeThreads,
 }: Props) {
   const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map());
   const [statusMenuMessageId, setStatusMenuMessageId] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<"active" | "parked" | "resolved" | "archived">("active");
+  const [activeTab, setActiveTab] = useState<"active" | "paused" | "in-review" | "resolved" | "archived">("active");
   const participantMap = Object.fromEntries(participants.map((p) => [p.id, p]));
 
   // Filter to only main chat messages (not thread replies), reverse chronological
@@ -131,7 +134,8 @@ export function MessageList({
 
   const TAB_FILTERS: Record<typeof activeTab, Set<ThreadStatus>> = {
     active: new Set(["thinking", "converged"]),
-    parked: new Set(["parked"]),
+    paused: new Set(["paused"]),
+    "in-review": new Set(["in-review"]),
     resolved: new Set(["resolved"]),
     archived: new Set(["archived"]),
   };
@@ -143,7 +147,8 @@ export function MessageList({
 
   const tabCounts = useMemo(() => ({
     active: allMainMessages.filter((m) => TAB_FILTERS.active.has(m.threadStatus ?? "thinking")).length,
-    parked: allMainMessages.filter((m) => TAB_FILTERS.parked.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,
   }), [allMainMessages]);
@@ -158,8 +163,12 @@ export function MessageList({
     messageRefs.current.delete(messageId);
   }, []);
 
+  const prevHighlightedRef = useRef<string | null>(null);
   useEffect(() => {
-    if (!highlightedMessageId) return;
+    if (!highlightedMessageId) { prevHighlightedRef.current = null; return; }
+    // Only scroll when the highlighted message actually changes
+    if (highlightedMessageId === prevHighlightedRef.current) return;
+    prevHighlightedRef.current = highlightedMessageId;
     const element = messageRefs.current.get(highlightedMessageId);
     if (!element) return;
     element.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -169,7 +178,8 @@ export function MessageList({
 
   const TABS: { key: typeof activeTab; label: string }[] = [
     { key: "active", label: "Active" },
-    { key: "parked", label: "Parked" },
+    { key: "paused", label: "Paused" },
+    { key: "in-review", label: "In Review" },
     { key: "resolved", label: "Resolved" },
     { key: "archived", label: "Archived" },
   ];
@@ -230,6 +240,7 @@ export function MessageList({
           const msgStatus = msg.threadStatus ?? "thinking";
           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);
 
           if (isCollapsed) {
             return (
@@ -246,6 +257,18 @@ export function MessageList({
                     <span className="text-sm font-medium text-slate-500 truncate flex-1">
                       {stripMarkers(msg.content.split('\n')[0])}
                     </span>
+                    {shipModeThreads?.has(msg.id) && (
+                      <span className="inline-flex items-center gap-1 text-[10px] text-indigo-500 font-medium shrink-0" title="Ship Mode active">
+                        <Rocket size={11} style={{ animation: "shipPulse 2s ease-in-out infinite" }} />
+                        Ship
+                      </span>
+                    )}
+                    {hasActiveAgents && (
+                      <span className="inline-flex items-center gap-1 text-[10px] text-green-600 font-medium shrink-0">
+                        <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+                        Working
+                      </span>
+                    )}
                     {msg.outcomeNote && (
                       <span className="text-[11px] text-slate-400 truncate max-w-[200px]">{msg.outcomeNote}</span>
                     )}
@@ -328,11 +351,19 @@ export function MessageList({
                       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"
-                      title="Add to chat"
+                      title="Mention in chat"
                     >
-                      <Link className="w-3.5 h-3.5" />
+                      <AtSign className="w-3.5 h-3.5" />
                     </button>
                   )}
+                  <button
+                    type="button"
+                    onClick={() => { navigator.clipboard.writeText(msg.id); }}
+                    className="p-1.5 text-slate-400 hover:bg-slate-100 rounded-md transition-colors"
+                    title="Copy message ID"
+                  >
+                    <Link className="w-3.5 h-3.5" />
+                  </button>
                   {onCopyThread && (
                     <button
                       type="button"
@@ -461,10 +492,22 @@ export function MessageList({
                                 </div>
                               );
                             })()}
+                            {shipModeThreads?.has(msg.id) && (
+                              <span className="inline-flex items-center gap-1 text-[10px] text-indigo-500 font-medium" title="Ship Mode active">
+                                <Rocket size={11} style={{ animation: "shipPulse 2s ease-in-out infinite" }} />
+                                Ship
+                              </span>
+                            )}
+                            {hasActiveAgents && (
+                              <span className="inline-flex items-center gap-1 text-[10px] text-green-600 font-medium">
+                                <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+                                Working
+                              </span>
+                            )}
                           </div>
                           {(msg.content.length > 80 || msg.content.includes('\n')) && (
-                            <div className="mt-2 text-[15px] text-slate-600 leading-relaxed">
-                              <Markdown content={stripMarkers(msg.content)} isUser={msg.role === 'user'} />
+                            <div className="mt-2 text-[15px] text-slate-600 leading-relaxed line-clamp-3">
+                              <Markdown content={stripMarkers(msg.content.split('\n').slice(1).join('\n').trimStart())} isUser={msg.role === 'user'} />
                             </div>
                           )}
                         </div>