@pennyfarthing/cyclist 9.3.0 → 10.0.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';
@@ -21,10 +23,27 @@ import ToolCallBlock from './ToolCallBlock';
 import ToolStack from './ToolStack';
 import SubagentSpan from './SubagentSpan';
 import QuickActions from './QuickActions';
+import { Separator } from '@/components/ui/separator';
 import { isSkillContent } from '../utils/messageFilters';
 import { groupToolsIntoStacks, ToolStackData } from '../utils/toolStackGrouper';
+import { usePersona } from '../hooks/usePersona';
+import { useColorScheme } from '../hooks/useColorScheme';
+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 +60,38 @@ interface ToolStackGroup {
   stack: ToolStackData;
 }
 
+type RenderItem = MessageData | SubagentGroup | ToolStackGroup;
+
+interface Turn {
+  speaker: 'user' | 'agent' | 'system';
+  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' | 'system' {
+  if ('isToolStack' in item || 'messages' in item) return 'agent';
+  const msg = item as MessageData;
+  if (msg.type === 'context_cleared') return 'system';
+  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 colorScheme = useColorScheme();
+  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,132 +101,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);
-    });
-
-    // Third pass: group consecutive tool_use messages into stacks
-    const toolStacks = groupToolsIntoStacks(filteredMessages);
+      filtered.push(msg);
+    }
 
-    // Create a set of tool_ids that belong to stacks
-    const stackedToolIds = new Set<string>();
-    toolStacks.forEach(stack => {
-      stack.tools.forEach(tool => stackedToolIds.add(tool.tool_id));
-    });
+    // 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);
+    }
 
-    // Fourth pass: build result array, inserting ToolStackGroups where appropriate
-    let currentStackIndex = 0;
-    let pendingStack: ToolStackData | null = null;
+    const items: RenderItem[] = [];
+    const emittedStacks = new Set<string>();
+    const emittedSubagents = new Set<string>();
 
-    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);
+    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 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.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;
       } else {
-        // Non-tool message
-        result.push(msg);
-        pendingStack = null;
+        items.push(msg);
+      }
+    }
+
+    // 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);
       }
-    });
+    }
 
-    return { items: result, toolResults };
+    // 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 {
+        turnList.push({
+          speaker,
+          items: [item],
+          timestamp: ('timestamp' in item) ? (item as MessageData).timestamp : Date.now(),
+        });
+      }
+    }
+
+    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}`}
@@ -203,19 +252,25 @@ 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">
         <div className="message-view-empty">
           <div>
-            <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🚴</div>
+            <img
+              src={colorScheme === 'dark' ? '/images/cyclist-dark.png' : '/images/cyclist-light.png'}
+              alt="Cyclist"
+              style={{ height: '2.5rem', marginBottom: '0.5rem', opacity: 0.6 }}
+            />
             <div>Type <code style={{
               background: 'var(--bg-tertiary, #0f0f1a)',
               padding: '2px 6px',
@@ -228,6 +283,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
@@ -235,15 +293,71 @@ export default function MessageView({ messages }: MessageViewProps): React.React
         onScrollChange={handleScrollChange}
         autoScroll={isAtBottom}
       >
-        {groupedContent.items.map((item, index) => renderItem(item, index))}
+        {turns.map((turn, turnIndex) => {
+          // System turns (context_cleared) render as a divider bar
+          if (turn.speaker === 'system') {
+            // Still increment globalIdx for system items
+            turn.items.forEach(() => globalIdx++);
+            return (
+              <div key={`turn-${turnIndex}`} className="turn-group turn-system">
+                <div className="context-cleared-bar">
+                  <Separator className="context-cleared-line" />
+                  <span className="context-cleared-label">
+                    Context cleared
+                  </span>
+                  <span className="context-cleared-time">
+                    {formatTurnTime(turn.timestamp)}
+                  </span>
+                  <Separator className="context-cleared-line" />
+                </div>
+              </div>
+            );
+          }
+
+          // 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()}
@@ -251,7 +365,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

@@ -19,6 +19,7 @@ import React, { useState, useCallback } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { usePersona } from '../hooks/usePersona';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { AgentPopup } from './AgentPopup';
 
 // Agent colors matching CLI statusbar (statusline.sh)
@@ -35,6 +36,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
@@ -45,8 +60,10 @@ function humanizeTheme(theme: string): string {
 
 export default function PersonaHeader(): React.ReactElement {
   const { persona } = usePersona();
+  const colorScheme = useColorScheme();
   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 +91,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 +104,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 +113,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 +166,21 @@ export default function PersonaHeader(): React.ReactElement {
               </Tooltip>
             )}
           </div>
+          <img
+            src={colorScheme === 'dark' ? '/images/cyclist-dark.png' : '/images/cyclist-light.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/panels/BackgroundPanel.tsx

@@ -71,7 +71,7 @@ export function BackgroundPanel(): React.ReactElement {
   if (tasks.length === 0) {
     return (
       <div className="background-panel empty" data-testid="background-panel">
-        <div className="placeholder">No background tasks</div>
+        <div className="placeholder">No subagent tasks</div>
       </div>
     );
   }