@pennyfarthing/cyclist 9.2.0 → 9.4.0

package/src/public/components/MessageView.tsx

@@ -8,12 +8,14 @@
  * - Render messages list with proper roles
  * - Handle streaming content display
  * - Markdown rendering with syntax highlighting
- * - Tool call blocks
+ * - Tool call blocks with stacking
  * - Subagent span grouping
+ * - Turn-based grouping with speaker labels
  * - Auto-scroll behavior
  */
 
 import React, { useRef, useState, useCallback, useMemo } from 'react';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import MessageList, { MessageListHandle } from './MessageList';
 import Message from './Message';
@@ -23,8 +25,23 @@ import SubagentSpan from './SubagentSpan';
 import QuickActions from './QuickActions';
 import { isSkillContent } from '../utils/messageFilters';
 import { groupToolsIntoStacks, ToolStackData } from '../utils/toolStackGrouper';
+import { usePersona } from '../hooks/usePersona';
+import { useStatsStrip } from '../hooks/useStatsStrip';
 import type { MessageData } from '../types/message';
 
+// Agent colors matching CLI statusbar (from PersonaHeader)
+const AGENT_COLORS: Record<string, string> = {
+  pm: '#a78bfa', sm: '#60a5fa', dev: '#4ade80', tea: '#2dd4bf',
+  reviewer: '#f87171', architect: '#fb923c', devops: '#22d3ee',
+  'ux-designer': '#f0abfc', 'tech-writer': '#e5e5e5', orchestrator: '#e879f9',
+};
+
+const AGENT_ABBREV: Record<string, string> = {
+  pm: 'PM', sm: 'SM', dev: 'DEV', tea: 'TEA', reviewer: 'REV',
+  architect: 'ARC', devops: 'OPS', 'ux-designer': 'UX', 'tech-writer': 'TW',
+  orchestrator: 'ORC',
+};
+
 interface MessageViewProps {
   messages: MessageData[];
 }
@@ -41,9 +58,36 @@ interface ToolStackGroup {
   stack: ToolStackData;
 }
 
+type RenderItem = MessageData | SubagentGroup | ToolStackGroup;
+
+interface Turn {
+  speaker: 'user' | 'agent';
+  items: RenderItem[];
+  timestamp: number;
+}
+
+function formatTurnTime(timestamp: number): string {
+  return new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+/**
+ * Classify an item as 'user' or 'agent' for turn grouping.
+ * Tools, subagents, and stacks are all part of the agent's turn.
+ */
+function speakerOf(item: RenderItem): 'user' | 'agent' {
+  if ('isToolStack' in item || 'messages' in item) return 'agent';
+  const msg = item as MessageData;
+  return (msg.type === 'user' || msg.type === 'bell_injected') ? 'user' : 'agent';
+}
+
 export default function MessageView({ messages }: MessageViewProps): React.ReactElement {
   const messageListRef = useRef<MessageListHandle>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const { persona } = usePersona();
+  const { projectInfo } = useStatsStrip();
+
+  // Persist subagent collapsed state across re-renders/remounts
+  const subagentCollapsedRef = useRef<Map<string, boolean>>(new Map());
 
   const handleScrollChange = useCallback((atBottom: boolean) => {
     setIsAtBottom(atBottom);
@@ -53,134 +97,133 @@ export default function MessageView({ messages }: MessageViewProps): React.React
     messageListRef.current?.scrollToBottom('smooth');
   }, []);
 
-  // Find the last assistant message for QuickActions
+  // Find the last non-streaming assistant message for QuickActions
   const lastAssistantMessage = useMemo(() => {
     for (let i = messages.length - 1; i >= 0; i--) {
-      if (messages[i].type === 'agent' && !messages[i].isStreaming) {
-        return messages[i];
-      }
+      if (messages[i].type === 'agent' && !messages[i].isStreaming) return messages[i];
     }
     return null;
   }, [messages]);
 
-  // Group messages by subagent parent_id and consecutive tool uses
-  const groupedContent = useMemo(() => {
-    const result: (MessageData | SubagentGroup | ToolStackGroup)[] = [];
+  // Single memo: messages → flat render items → turns
+  const { turns, toolResults, lastAgentItemIndex } = useMemo(() => {
+    // 1. Index tool results by ID
+    const results = new Map<string, MessageData>();
+    for (const msg of messages) {
+      if (msg.type === 'tool_result' && msg.tool_id) results.set(msg.tool_id, msg);
+    }
+
+    // 2. Filter and collect subagent groups in one pass
+    const filtered: MessageData[] = [];
     const subagentGroups = new Map<string, SubagentGroup>();
 
-    // First pass: collect tool results for matching
-    const toolResults = new Map<string, MessageData>();
-    messages.forEach(msg => {
-      if (msg.type === 'tool_result' && msg.tool_id) {
-        toolResults.set(msg.tool_id, msg);
-      }
-    });
-
-    // Second pass: filter messages and group by subagent (excluding tool_use for now)
-    const filteredMessages: MessageData[] = [];
-    messages.forEach(msg => {
-      // Filter out skill content from user messages (MSSCI-12783)
-      if (msg.type === 'user' && isSkillContent(msg.content)) {
-        return;
-      }
-      // Skip tool_result - rendered with tool_use
-      if (msg.type === 'tool_result') {
-        return;
-      }
-      // Skip messages with parent_id (subagent messages handled separately)
+    for (const msg of messages) {
+      if (msg.type === 'tool_result') continue;
+      if (msg.type === 'user' && isSkillContent(msg.content)) continue;
       if (msg.parent_id) {
         let group = subagentGroups.get(msg.parent_id);
         if (!group) {
-          group = {
-            parent_id: msg.parent_id,
-            type: msg.subagent_type || 'unknown',
-            name: msg.subagent_name || 'unnamed',
-            messages: [],
-          };
+          group = { parent_id: msg.parent_id, type: msg.subagent_type || 'unknown', name: msg.subagent_name || 'unnamed', messages: [] };
           subagentGroups.set(msg.parent_id, group);
         }
         group.messages.push(msg);
-        return;
+        continue;
       }
-      filteredMessages.push(msg);
-    });
+      filtered.push(msg);
+    }
+
+    // 3. Build flat render list, replacing consecutive tool_use runs with stacks
+    const stacks = groupToolsIntoStacks(filtered);
+    const stackByToolId = new Map<string, ToolStackData>();
+    for (const stack of stacks) {
+      for (const tool of stack.tools) stackByToolId.set(tool.tool_id, stack);
+    }
 
-    // Third pass: group consecutive tool_use messages into stacks
-    const toolStacks = groupToolsIntoStacks(filteredMessages);
+    const items: RenderItem[] = [];
+    const emittedStacks = new Set<string>();
+    const emittedSubagents = new Set<string>();
 
-    // Create a set of tool_ids that belong to stacks (2+ tools)
-    const stackedToolIds = new Set<string>();
-    toolStacks.forEach(stack => {
-      if (stack.count >= 2) {
-        stack.tools.forEach(tool => stackedToolIds.add(tool.tool_id));
+    for (const msg of filtered) {
+      if (msg.type === 'tool_use' && msg.tool_id && stackByToolId.has(msg.tool_id)) {
+        const stack = stackByToolId.get(msg.tool_id)!;
+        if (!emittedStacks.has(stack.stackId)) {
+          emittedStacks.add(stack.stackId);
+          items.push({ isToolStack: true, stack });
+        }
+      } else {
+        items.push(msg);
       }
-    });
+    }
 
-    // Fourth pass: build result array, inserting ToolStackGroups where appropriate
-    let currentStackIndex = 0;
-    let pendingStack: ToolStackData | null = null;
+    // Insert subagent groups at the position of their first parent_id occurrence
+    // (They appear in the agent's turn, after the Task tool_use that spawned them)
+    // For now, just append them — they'll naturally land in the agent turn
+    for (const [, group] of subagentGroups) {
+      if (!emittedSubagents.has(group.parent_id)) {
+        emittedSubagents.add(group.parent_id);
+        items.push(group);
+      }
+    }
 
-    filteredMessages.forEach(msg => {
-      if (msg.parent_id) {
-        // Subagent messages - insert the group when we first see a message from it
-        const group = subagentGroups.get(msg.parent_id);
-        if (group && !result.includes(group)) {
-          result.push(group);
-        }
-      } else if (msg.type === 'tool_use' && msg.tool_id && stackedToolIds.has(msg.tool_id)) {
-        // This tool belongs to a stack
-        const stack = toolStacks.find(s =>
-          s.count >= 2 && s.tools.some(t => t.tool_id === msg.tool_id)
-        );
-        if (stack && (!pendingStack || pendingStack.stackId !== stack.stackId)) {
-          // New stack - add it
-          result.push({ isToolStack: true, stack });
-          pendingStack = stack;
-        }
-        // Skip individual rendering - handled by ToolStack
-      } else if (msg.type === 'tool_use') {
-        // Single tool - render normally
-        result.push(msg);
-        pendingStack = null;
+    // 4. Find last agent message index (for throb control)
+    let lastAgent = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+      const item = items[i];
+      if (!('isToolStack' in item) && !('messages' in item) && (item as MessageData).type === 'agent') {
+        lastAgent = i;
+        break;
+      }
+    }
+
+    // 5. Group into turns
+    const turnList: Turn[] = [];
+    for (const item of items) {
+      const speaker = speakerOf(item);
+      const last = turnList[turnList.length - 1];
+      if (last && last.speaker === speaker) {
+        last.items.push(item);
       } else {
-        // Non-tool message
-        result.push(msg);
-        pendingStack = null;
+        turnList.push({
+          speaker,
+          items: [item],
+          timestamp: ('timestamp' in item) ? (item as MessageData).timestamp : Date.now(),
+        });
       }
-    });
+    }
 
-    return { items: result, toolResults };
+    return { turns: turnList, toolResults: results, lastAgentItemIndex: lastAgent };
   }, [messages]);
 
-  const renderItem = (item: MessageData | SubagentGroup | ToolStackGroup, index: number) => {
-    // Check if this is a tool stack group
-    if ('isToolStack' in item && item.isToolStack) {
+  const renderItem = (item: RenderItem, globalIndex: number, isFirstInTurn: boolean) => {
+    if ('isToolStack' in item) {
       return (
         <ToolStack
           key={`stack-${item.stack.stackId}`}
           stack={item.stack}
-          toolResults={groupedContent.toolResults as Map<string, { type: 'tool_result'; tool_id: string; content: string; timestamp: number }>}
+          toolResults={toolResults as Map<string, { type: 'tool_result'; tool_id: string; content: string; timestamp: number }>}
         />
       );
     }
 
-    // Check if this is a subagent group
-    if ('messages' in item && Array.isArray(item.messages)) {
+    if ('messages' in item && 'parent_id' in item) {
+      const group = item as SubagentGroup;
+      const collapsed = subagentCollapsedRef.current.get(group.parent_id) ?? true;
       return (
         <SubagentSpan
-          key={`subagent-${(item as SubagentGroup).parent_id}`}
-          type={(item as SubagentGroup).type}
-          name={(item as SubagentGroup).name}
-          messages={(item as SubagentGroup).messages as any}
+          key={`subagent-${group.parent_id}`}
+          type={group.type}
+          name={group.name}
+          messages={group.messages as any}
+          defaultCollapsed={collapsed}
+          onCollapseChange={(c) => subagentCollapsedRef.current.set(group.parent_id, c)}
         />
       );
     }
 
-    // It's a regular message
     const msg = item as MessageData;
 
     if (msg.type === 'tool_use' && msg.tool_name && msg.tool_id) {
-      const result = groupedContent.toolResults.get(msg.tool_id);
+      const result = toolResults.get(msg.tool_id);
       return (
         <ToolCallBlock
           key={`tool-${msg.tool_id}`}
@@ -205,13 +248,15 @@ export default function MessageView({ messages }: MessageViewProps): React.React
 
     return (
       <Message
-        key={`msg-${index}-${msg.timestamp}`}
+        key={`msg-${globalIndex}-${msg.timestamp}`}
         message={msg}
+        isLastAgentMessage={globalIndex === lastAgentItemIndex}
+        isFirstInTurn={isFirstInTurn}
       />
     );
   };
 
-  // Show empty state when no messages - prompt to start with /sm
+  // Empty state
   if (messages.length === 0) {
     return (
       <div data-testid="message-view" className="message-view">
@@ -230,6 +275,9 @@ export default function MessageView({ messages }: MessageViewProps): React.React
     );
   }
 
+  // Track a running global index across turns for lastAgentItemIndex matching
+  let globalIdx = 0;
+
   return (
     <div data-testid="message-view" className="message-view" role="log" aria-live="polite">
       <MessageList
@@ -237,15 +285,51 @@ export default function MessageView({ messages }: MessageViewProps): React.React
         onScrollChange={handleScrollChange}
         autoScroll={isAtBottom}
       >
-        {groupedContent.items.map((item, index) => renderItem(item, index))}
+        {turns.map((turn, turnIndex) => {
+          // Track which items in this turn are "first message" (non-tool, non-stack)
+          let seenMessage = false;
+
+          const agentName = persona?.character || 'Agent';
+          const role = persona?.role || null;
+          const roleAbbrev = role ? (AGENT_ABBREV[role] || role) : null;
+          const roleColor = role ? (AGENT_COLORS[role] || '#e879f9') : undefined;
+          const userName = projectInfo?.githubUsername || 'You';
+
+          return (
+            <div key={`turn-${turnIndex}`} className={`turn-group turn-${turn.speaker}`}>
+              <div className="turn-label">
+                <span className="turn-speaker">
+                  {turn.speaker === 'user' ? userName : agentName}
+                </span>
+                <span className="turn-timestamp">
+                  {formatTurnTime(turn.timestamp)}
+                </span>
+                {turn.speaker === 'agent' && roleAbbrev && (
+                  <Badge
+                    variant="default"
+                    className="turn-role-badge"
+                    style={{ backgroundColor: roleColor }}
+                  >
+                    {roleAbbrev}
+                  </Badge>
+                )}
+              </div>
+              {turn.items.map((item) => {
+                const idx = globalIdx++;
+                const isMessage = !('isToolStack' in item) && !('messages' in item) && (item as MessageData).type !== 'tool_use';
+                const isFirst = isMessage && !seenMessage;
+                if (isMessage) seenMessage = true;
+                return renderItem(item, idx, isFirst);
+              })}
+            </div>
+          );
+        })}
       </MessageList>
 
-      {/* Quick Actions - dedicated area outside message scroll */}
       {lastAssistantMessage && (
         <QuickActions message={lastAssistantMessage} />
       )}
 
-      {/* Auto-scroll indicator */}
       <div
         data-testid="auto-scroll-indicator"
         data-active={isAtBottom.toString()}
@@ -253,7 +337,6 @@ export default function MessageView({ messages }: MessageViewProps): React.React
         style={{ display: 'none' }}
       />
 
-      {/* Scroll to bottom button */}
       <Button
         variant="ghost"
         size="icon"

package/src/public/components/PersonaHeader.tsx

@@ -35,6 +35,20 @@ const AGENT_COLORS: Record<string, string> = {
   orchestrator: '#e879f9', // Magenta - coordination
 };
 
+// Abbreviated role names for compact badge display
+const AGENT_ABBREV: Record<string, string> = {
+  pm: 'PM',
+  sm: 'SM',
+  dev: 'DEV',
+  tea: 'TEA',
+  reviewer: 'REV',
+  architect: 'ARC',
+  devops: 'OPS',
+  'ux-designer': 'UX',
+  'tech-writer': 'TW',
+  orchestrator: 'ORC',
+};
+
 // Convert kebab-case theme name to Title Case (e.g., "princess-bride" -> "Princess Bride")
 function humanizeTheme(theme: string): string {
   return theme
@@ -47,6 +61,7 @@ export default function PersonaHeader(): React.ReactElement {
   const { persona } = usePersona();
   const [portraitError, setPortraitError] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
 
   const character = persona?.character || 'Agent';
   const theme = persona?.theme || 'default';
@@ -74,7 +89,7 @@ export default function PersonaHeader(): React.ReactElement {
     <>
       <TooltipProvider delayDuration={300}>
         <div
-          className="persona-header clickable"
+          className={`persona-header clickable${isCompact ? ' compact' : ''}`}
           data-testid="persona-header"
           role="button"
           tabIndex={0}
@@ -87,7 +102,7 @@ export default function PersonaHeader(): React.ReactElement {
             <div className="persona-portrait" data-testid="persona-portrait">
               {slug && theme && !portraitError ? (
                 <img
-                  src={`/portraits/${theme}/small/${slug}.png`}
+                  src={`/portraits/${theme}/medium/${slug}.png`}
                   alt={character}
                   className="portrait-image"
                   onError={() => setPortraitError(true)}
@@ -96,22 +111,22 @@ export default function PersonaHeader(): React.ReactElement {
                 <span className="portrait-fallback">🤖</span>
               )}
             </div>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Badge
-                  variant="default"
-                  className="persona-role"
-                  data-testid="persona-role"
-                  style={{ backgroundColor: roleColor }}
-                >
-                  {role}
-                </Badge>
-              </TooltipTrigger>
-              <TooltipContent>{role}</TooltipContent>
-            </Tooltip>
           </div>
           <div className="persona-info">
             <div className="persona-name-row">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="default"
+                    className="persona-role"
+                    data-testid="persona-role"
+                    style={{ backgroundColor: roleColor }}
+                  >
+                    {AGENT_ABBREV[role] || role}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent>{role}</TooltipContent>
+              </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span
@@ -149,6 +164,21 @@ export default function PersonaHeader(): React.ReactElement {
               </Tooltip>
             )}
           </div>
+          <img
+            src="/images/cyclist-dark.png"
+            alt="Cyclist"
+            className="persona-branding"
+          />
+          <button
+            className="persona-collapse-toggle"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsCompact(!isCompact);
+            }}
+            aria-label={isCompact ? 'Expand header' : 'Collapse header'}
+          >
+            {isCompact ? '▼' : '▲'}
+          </button>
         </div>
       </TooltipProvider>
 

package/src/public/components/SubagentSpan.tsx

@@ -20,6 +20,7 @@ interface SubagentSpanProps {
   name: string;
   messages: SubagentMessage[];
   defaultCollapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
   // MSSCI-12776: Theme-aware helper display (optional - can be overridden by props for testing)
   helperName?: string | null;
   helperStyle?: string | null;
@@ -30,7 +31,8 @@ export default function SubagentSpan({
   type,
   name,
   messages,
-  defaultCollapsed = false,
+  defaultCollapsed = true,
+  onCollapseChange,
   helperName: propHelperName,
   helperStyle: propHelperStyle,
   friendlyMessage: propFriendlyMessage,
@@ -55,6 +57,9 @@ export default function SubagentSpan({
   const displayName = helperName || type;
   const displayMessage = friendlyMessage || name;
 
+  // Count non-result messages for the collapsed summary
+  const messageCount = messages.filter(m => m.type !== 'tool_result').length;
+
   // Group tool_use and tool_result by tool_id
   const toolResults = new Map<string, SubagentMessage>();
   messages.forEach(msg => {
@@ -92,16 +97,16 @@ export default function SubagentSpan({
       return null;
     }
 
-    // Subagent prompts (user messages within subagent) get special styling
+    // Subagent prompts (user messages within subagent) — truncated single line
     if (msg.type === 'user') {
+      const truncated = (msg.content || '').slice(0, 120).replace(/\n/g, ' ');
       return (
         <div
           key={`subagent-prompt-${index}`}
           data-testid="subagent-prompt"
           className="message message-subagent-prompt"
         >
-          <div className="message-avatar">📋</div>
-          <div className="message-content">{msg.content}</div>
+          <div className="message-content">{truncated}{(msg.content || '').length > 120 ? '...' : ''}</div>
         </div>
       );
     }
@@ -127,7 +132,11 @@ export default function SubagentSpan({
       <div
         data-testid="subagent-span-header"
         className="subagent-header"
-        onClick={() => setIsCollapsed(!isCollapsed)}
+        onClick={() => {
+          const next = !isCollapsed;
+          setIsCollapsed(next);
+          onCollapseChange?.(next);
+        }}
       >
         <span className="subagent-toggle">{isCollapsed ? '▶' : '▼'}</span>
 
@@ -159,9 +168,7 @@ export default function SubagentSpan({
           {type}
         </Badge>
 
-        {isCollapsed && (
-          <span className="subagent-count">{messages.length} messages</span>
-        )}
+        <span className="subagent-count">{messageCount}</span>
       </div>
       {!isCollapsed && (
         <div className="subagent-content">

package/src/public/components/ThemePalette/ThemePalette.css

@@ -59,6 +59,8 @@
 
 .theme-palette-popover {
   width: 260px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
 }
 
 /* ==========================================================================

package/src/public/components/ToolStack.tsx

@@ -43,19 +43,25 @@ export default function ToolStack({ stack, toolResults }: ToolStackProps): React
     prevIsActiveRef.current = stack.isActive;
   }, [stack.isActive]);
 
-  // AC2: Count display with singular/plural
-  const countText = stack.count === 1 ? '1 tool' : `${stack.count} tools`;
+  // Count display - just the number
+  const countText = `${stack.count}`;
+
+  // Active tool summary - show what's happening RIGHT NOW
+  const activeSummary = useMemo(() => {
+    if (stack.isActive && stack.tools.length > 0) {
+      // Show the most recent (last) tool's summary
+      const lastTool = stack.tools[stack.tools.length - 1];
+      return generateToolIntentSummary(lastTool.tool_name, lastTool.input);
+    }
+    return null;
+  }, [stack.tools, stack.isActive]);
 
   // Generate summary of tool intents for collapsed view
   const collapsedSummary = useMemo(() => {
-    // Show first 2 tool intents, abbreviated
-    const summaries = stack.tools.slice(0, 2).map(tool =>
-      generateToolIntentSummary(tool.tool_name, tool.input)
-    );
-    if (stack.tools.length > 2) {
-      return summaries.join(', ') + '...';
-    }
-    return summaries.join(', ');
+    // Show last tool's summary as the main description
+    if (stack.tools.length === 0) return '';
+    const lastTool = stack.tools[stack.tools.length - 1];
+    return generateToolIntentSummary(lastTool.tool_name, lastTool.input);
   }, [stack.tools]);
 
   // Compute tool type counts for mini badges
@@ -133,11 +139,15 @@ export default function ToolStack({ stack, toolResults }: ToolStackProps): React
         </span>
         <span
           data-testid="tool-stack-count"
-          className="tool-stack-count"
+          className="tool-stack-count-badge"
         >
-          {countText} {stack.isActive ? 'running' : 'completed'}
+          {countText}
         </span>
-        {isCollapsed && !stack.isActive && (
+        {stack.isActive && activeSummary ? (
+          <span className="tool-stack-active-summary">
+            {activeSummary}
+          </span>
+        ) : (
           <>
             <span className="tool-stack-badges">
               <TooltipProvider delayDuration={300}>