Fix chat comment alignment, avatars, and layout polish

- Agent messages: avatar outside left (matching feed items alignment),
  always shown, consistently uses icon avatar instead of initials
- User messages: avatar outside right, action bar moved below the
  gray bubble, gray darkened to bg-muted
- System events: right-aligned when actor is the current user
- Run messages: use agent icon avatar consistently
- Pass actorType/actorId in event metadata for current-user detection

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/IssueChatThread.tsx

@@ -360,13 +360,14 @@ function IssueChatUserMessage() {
 
   return (
     <MessagePrimitive.Root id={anchorId}>
-      <div className="flex justify-end">
+      <div className="group flex items-end justify-end gap-2">
+        <div className="flex max-w-[85%] flex-col items-end">
           <div
             className={cn(
-            "group relative max-w-[85%] min-w-0 overflow-hidden rounded-2xl px-4 py-2.5",
+              "min-w-0 overflow-hidden rounded-2xl px-4 py-2.5",
               queued
                 ? "bg-amber-50/80 dark:bg-amber-500/10"
-              : "bg-muted/60",
+                : "bg-muted",
               pending && "opacity-80",
             )}
           >
@@ -397,8 +398,9 @@ function IssueChatUserMessage() {
                 }}
               />
             </div>
+          </div>
 
-          <div className="mt-1 flex items-center justify-end gap-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+          <div className="mt-1 flex items-center justify-end gap-1.5 px-1 opacity-0 transition-opacity group-hover:opacity-100">
             <Tooltip>
               <TooltipTrigger asChild>
                 <a
@@ -432,6 +434,10 @@ function IssueChatUserMessage() {
             </button>
           </div>
         </div>
+
+        <Avatar size="sm" className="mb-6 shrink-0">
+          <AvatarFallback>You</AvatarFallback>
+        </Avatar>
       </div>
     </MessagePrimitive.Root>
   );
@@ -453,9 +459,11 @@ function IssueChatAssistantMessage() {
     : typeof custom.runAgentName === "string"
       ? custom.runAgentName
       : "Agent";
+  const authorAgentId = typeof custom.authorAgentId === "string" ? custom.authorAgentId : null;
   const runId = typeof custom.runId === "string" ? custom.runId : null;
   const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
-  const runAgentIcon = runAgentId ? agentMap?.get(runAgentId)?.icon : undefined;
+  const agentId = authorAgentId ?? runAgentId;
+  const agentIcon = agentId ? agentMap?.get(agentId)?.icon : undefined;
   const commentId = typeof custom.commentId === "string" ? custom.commentId : null;
   const notices = Array.isArray(custom.notices)
     ? custom.notices.filter((notice): notice is string => typeof notice === "string" && notice.length > 0)
@@ -476,18 +484,18 @@ function IssueChatAssistantMessage() {
 
   return (
     <MessagePrimitive.Root id={anchorId}>
-      <div className="min-w-0 overflow-hidden rounded-sm p-3">
-        <div className="mb-2 flex items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            {runAgentId ? (
-              <Avatar size="sm">
-                {runAgentIcon ? (
-                  <AvatarFallback><AgentIcon icon={runAgentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
+      <div className="flex items-start gap-2.5 py-1.5">
+        <Avatar size="sm" className="mt-0.5 shrink-0">
+          {agentIcon ? (
+            <AvatarFallback><AgentIcon icon={agentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
           ) : (
             <AvatarFallback>{initialsForName(authorName)}</AvatarFallback>
           )}
         </Avatar>
-            ) : null}
+
+        <div className="min-w-0 flex-1">
+          <div className="mb-1.5 flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
               <span className="text-sm font-medium text-foreground">{authorName}</span>
               {isRunning ? (
                 <span className="inline-flex items-center gap-1 rounded-full border border-cyan-400/40 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-700 dark:text-cyan-200">
@@ -569,6 +577,7 @@ function IssueChatAssistantMessage() {
             ) : null}
           </div>
         </div>
+      </div>
     </MessagePrimitive.Root>
   );
 }
@@ -803,6 +812,8 @@ function IssueChatSystemMessage() {
   const runAgentName = typeof custom.runAgentName === "string" ? custom.runAgentName : null;
   const runStatus = typeof custom.runStatus === "string" ? custom.runStatus : null;
   const actorName = typeof custom.actorName === "string" ? custom.actorName : null;
+  const actorType = typeof custom.actorType === "string" ? custom.actorType : null;
+  const actorId = typeof custom.actorId === "string" ? custom.actorId : null;
   const statusChange = typeof custom.statusChange === "object" && custom.statusChange
     ? custom.statusChange as { from: string | null; to: string | null }
     : null;
@@ -814,15 +825,13 @@ function IssueChatSystemMessage() {
     : null;
 
   if (custom.kind === "event" && actorName) {
-    return (
-      <MessagePrimitive.Root id={anchorId}>
-        <div className="flex items-start gap-2.5 py-1.5">
-          <Avatar size="sm" className="mt-0.5">
-            <AvatarFallback>{initialsForName(actorName)}</AvatarFallback>
-          </Avatar>
+    const isCurrentUser = actorType === "user" && !!currentUserId && actorId === currentUserId;
+    const isAgent = actorType === "agent";
+    const agentIcon = isAgent && actorId ? agentMap?.get(actorId)?.icon : undefined;
 
-          <div className="min-w-0 flex-1 space-y-1.5">
-            <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-1 text-sm">
+    const eventContent = (
+      <div className="min-w-0 space-y-1.5">
+        <div className={cn("flex flex-wrap items-baseline gap-x-1.5 gap-y-1 text-sm", isCurrentUser && "justify-end")}>
           <span className="font-medium text-foreground">{actorName}</span>
           <span className="text-muted-foreground">updated this task</span>
           <a
@@ -834,8 +843,8 @@ function IssueChatSystemMessage() {
         </div>
 
         {statusChange ? (
-              <div className="flex flex-wrap items-center gap-2 text-sm">
-                <span className="w-14 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+          <div className={cn("flex flex-wrap items-center gap-2 text-sm", isCurrentUser && "justify-end")}>
+            <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
               Status
             </span>
             <span className="text-muted-foreground">{humanizeValue(statusChange.from)}</span>
@@ -845,8 +854,8 @@ function IssueChatSystemMessage() {
         ) : null}
 
         {assigneeChange ? (
-              <div className="flex flex-wrap items-center gap-2 text-sm">
-                <span className="w-14 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+          <div className={cn("flex flex-wrap items-center gap-2 text-sm", isCurrentUser && "justify-end")}>
+            <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
               Assignee
             </span>
             <span className="text-muted-foreground">
@@ -859,18 +868,48 @@ function IssueChatSystemMessage() {
           </div>
         ) : null}
       </div>
+    );
+
+    if (isCurrentUser) {
+      return (
+        <MessagePrimitive.Root id={anchorId}>
+          <div className="flex items-start justify-end gap-2.5 py-1.5">
+            {eventContent}
+          </div>
+        </MessagePrimitive.Root>
+      );
+    }
+
+    return (
+      <MessagePrimitive.Root id={anchorId}>
+        <div className="flex items-start gap-2.5 py-1.5">
+          <Avatar size="sm" className="mt-0.5">
+            {agentIcon ? (
+              <AvatarFallback><AgentIcon icon={agentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
+            ) : (
+              <AvatarFallback>{initialsForName(actorName)}</AvatarFallback>
+            )}
+          </Avatar>
+          <div className="flex-1">
+            {eventContent}
+          </div>
         </div>
       </MessagePrimitive.Root>
     );
   }
 
   const displayedRunAgentName = runAgentName ?? (runAgentId ? agentMap?.get(runAgentId)?.name ?? runAgentId.slice(0, 8) : null);
+  const runAgentIcon = runAgentId ? agentMap?.get(runAgentId)?.icon : undefined;
   if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) {
     return (
       <MessagePrimitive.Root id={anchorId}>
         <div className="flex items-center gap-2.5 py-1.5">
           <Avatar size="sm">
+            {runAgentIcon ? (
+              <AvatarFallback><AgentIcon icon={runAgentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
+            ) : (
               <AvatarFallback>{initialsForName(displayedRunAgentName)}</AvatarFallback>
+            )}
           </Avatar>
 
           <div className="min-w-0 flex-1">

ui/src/lib/issue-chat-messages.ts

@@ -235,6 +235,8 @@ function createTimelineEventMessage(args: {
         anchorId: `activity-${event.id}`,
         eventId: event.id,
         actorName,
+        actorType: event.actorType,
+        actorId: event.actorId,
         statusChange: event.statusChange ?? null,
         assigneeChange: event.assigneeChange ?? null,
       },