@pennyfarthing/core 11.3.7 → 11.4.0

package/packages/core/src/public/components/MessageView.tsx

@@ -0,0 +1,400 @@
+/**
+ * MessageView Component
+ *
+ * Main container component for displaying conversation messages.
+ * Story MSSCI-12698 - MessageView Component with Streaming
+ *
+ * Features:
+ * - Render messages list with proper roles
+ * - Handle streaming content display
+ * - Markdown rendering with syntax highlighting
+ * - 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';
+import ToolCallBlock from './ToolCallBlock';
+import ToolStack from './ToolStack';
+import SubagentSpan from './SubagentSpan';
+import QuickActions from './QuickActions';
+import { Separator } from '@/components/ui/separator';
+import { isSkillContent, extractSkillLabel } 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',
+  ba: '#a3e635',
+};
+
+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', ba: 'BA',
+};
+
+interface MessageViewProps {
+  messages: MessageData[];
+}
+
+interface SubagentGroup {
+  parent_id: string;
+  type: string;
+  name: string;
+  messages: MessageData[];
+}
+
+interface ToolStackGroup {
+  isToolStack: true;
+  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);
+  }, []);
+
+  const handleScrollToBottom = useCallback(() => {
+    messageListRef.current?.scrollToBottom('smooth');
+  }, []);
+
+  // 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];
+    }
+    return null;
+  }, [messages]);
+
+  // 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>();
+
+    // Track whether we've already emitted a skill label for this skill invocation.
+    // The first skill message gets replaced with a label; subsequent ones are dropped.
+    let pendingSkillLabel = false;
+
+    for (const msg of messages) {
+      if (msg.type === 'tool_result') continue;
+      if (msg.type === 'user' && isSkillContent(msg.content)) {
+        const label = extractSkillLabel(msg.content);
+        if (label && !pendingSkillLabel) {
+          // Replace the first skill message with a short label
+          pendingSkillLabel = true;
+          filtered.push({ ...msg, content: label });
+        }
+        // Drop all other skill body messages (pf agent start, <purpose>, etc.)
+        continue;
+      }
+      // Any non-skill user message resets the skill label tracker
+      if (msg.type === 'user') {
+        pendingSkillLabel = false;
+      }
+      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: [] };
+          subagentGroups.set(msg.parent_id, group);
+        }
+        group.messages.push(msg);
+        continue;
+      }
+      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);
+    }
+
+    const items: RenderItem[] = [];
+    const emittedStacks = new Set<string>();
+    const emittedSubagents = new Set<string>();
+
+    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);
+      }
+    }
+
+    // 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);
+      }
+    }
+
+    // 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: RenderItem, globalIndex: number, isFirstInTurn: boolean) => {
+    if ('isToolStack' in item) {
+      return (
+        <ToolStack
+          key={`stack-${item.stack.stackId}`}
+          stack={item.stack}
+          toolResults={toolResults as Map<string, { type: 'tool_result'; tool_id: string; content: string; timestamp: number }>}
+        />
+      );
+    }
+
+    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-${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)}
+        />
+      );
+    }
+
+    const msg = item as MessageData;
+
+    if (msg.type === 'tool_use' && msg.tool_name && msg.tool_id) {
+      // AskUserQuestion is handled by the Reflector system (CYCLIST markers → QuickActions)
+      if (msg.tool_name === 'AskUserQuestion') return null;
+      const result = toolResults.get(msg.tool_id);
+      return (
+        <ToolCallBlock
+          key={`tool-${msg.tool_id}`}
+          toolUse={{
+            type: 'tool_use',
+            tool_name: msg.tool_name,
+            tool_id: msg.tool_id,
+            input: msg.input || {},
+            timestamp: msg.timestamp,
+          }}
+          result={result ? {
+            type: 'tool_result',
+            tool_id: result.tool_id!,
+            content: result.content || '',
+            timestamp: result.timestamp,
+            is_error: result.is_error,
+            durationMs: result.durationMs,
+          } : undefined}
+        />
+      );
+    }
+
+    return (
+      <Message
+        key={`msg-${globalIndex}-${msg.timestamp}`}
+        message={msg}
+        isLastAgentMessage={globalIndex === lastAgentItemIndex}
+        isFirstInTurn={isFirstInTurn}
+      />
+    );
+  };
+
+  // Empty state
+  if (messages.length === 0) {
+    return (
+      <div data-testid="message-view" className="message-view">
+        <div className="message-view-empty">
+          <div>
+            <img
+              src={colorScheme === 'dark' ? '/images/cyclist-dark.png' : '/images/cyclist-light.png'}
+              alt="Cyclist"
+              style={{ height: '2.5rem', opacity: 0.6, display: 'block', margin: '0 auto 0.5rem' }}
+            />
+            <div>Type <code style={{
+              background: 'var(--bg-tertiary, #0f0f1a)',
+              padding: '2px 6px',
+              borderRadius: '3px',
+              fontFamily: 'var(--font-mono, monospace)'
+            }}>/sm</code> to start</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 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
+        ref={messageListRef}
+        onScrollChange={handleScrollChange}
+        autoScroll={isAtBottom}
+      >
+        {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>
+                {turn.speaker === 'agent' && roleAbbrev && (
+                  <Badge
+                    variant="default"
+                    className="turn-role-badge"
+                    style={{ backgroundColor: roleColor }}
+                  >
+                    {roleAbbrev}
+                  </Badge>
+                )}
+                <span className="turn-timestamp">
+                  {formatTurnTime(turn.timestamp)}
+                </span>
+              </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>
+
+      {lastAssistantMessage && (
+        <QuickActions message={lastAssistantMessage} />
+      )}
+
+      <div
+        data-testid="auto-scroll-indicator"
+        data-active={isAtBottom.toString()}
+        className="auto-scroll-indicator"
+        style={{ display: 'none' }}
+      />
+
+      <Button
+        variant="ghost"
+        size="icon"
+        data-testid="scroll-to-bottom-button"
+        className="scroll-to-bottom-button"
+        onClick={handleScrollToBottom}
+        style={{ visibility: isAtBottom ? 'hidden' : 'visible' }}
+      >
+        ↓
+      </Button>
+    </div>
+  );
+}

package/packages/core/src/public/components/ModeSwitch/ModeSwitch.css

@@ -0,0 +1,165 @@
+/**
+ * ModeSwitch Component Styles
+ *
+ * Story MSSCI-12773 - ModeSwitch Component
+ *
+ * Color scheme:
+ * - Plan: Teal (#14b8a6)
+ * - Manual: Gray (#6b7280)
+ * - Accept: Purple/Lavender (#a78bfa)
+ *
+ * Note: The mode-option buttons are rendered as shadcn ToggleGroupItems which
+ * apply Tailwind utility classes from toggleVariants. We override those defaults
+ * here to preserve the custom ModeSwitch appearance and sliding highlight effect.
+ */
+
+.mode-switch {
+  display: flex;
+  position: relative;
+  background: var(--bg-tertiary, rgba(0, 0, 0, 0.3));
+  border-radius: 6px;
+  padding: 2px;
+  gap: 0;
+  width: fit-content;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mode-switch--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Sliding highlight element */
+.mode-switch__highlight {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(33.333% - 1.33px);
+  height: calc(100% - 4px);
+  border-radius: 4px;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              background-color 0.2s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Highlight colors based on mode */
+.mode-switch__highlight[data-mode="plan"] {
+  background: var(--color-plan, #14b8a6);
+  box-shadow: 0 0 8px rgba(20, 184, 166, 0.4);
+}
+
+.mode-switch__highlight[data-mode="manual"] {
+  background: var(--color-manual, #6b7280);
+  box-shadow: 0 0 8px rgba(107, 114, 128, 0.3);
+}
+
+.mode-switch__highlight[data-mode="accept"] {
+  background: var(--color-accept, #a78bfa);
+  box-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
+}
+
+/*
+ * Mode option buttons (ToggleGroupItem overrides)
+ *
+ * The shadcn ToggleGroupItem applies toggleVariants Tailwind classes including
+ * bg-transparent, hover:bg-muted, data-[state=on]:bg-accent, rounded-md, h-9, etc.
+ * We reset those here so the custom sliding highlight + color scheme takes effect.
+ */
+.mode-option {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  padding: 6px 12px !important;
+  height: auto !important;
+  min-height: unset !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
+  font-size: 12px;
+  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, sans-serif);
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  white-space: nowrap;
+  min-width: 60px;
+  text-align: center;
+  /* Reset shadcn shadow */
+  box-shadow: none !important;
+}
+
+/* Subtle color hints for inactive options */
+.mode-option[data-mode="plan"]:not(.active) {
+  color: rgba(20, 184, 166, 0.7);
+}
+
+.mode-option[data-mode="manual"]:not(.active) {
+  color: rgba(156, 163, 175, 0.8);
+}
+
+.mode-option[data-mode="accept"]:not(.active) {
+  color: rgba(167, 139, 250, 0.7);
+}
+
+.mode-option:hover:not(.active):not(:disabled) {
+  background: transparent !important;
+  filter: brightness(1.3);
+}
+
+.mode-option.active {
+  color: var(--text-on-highlight, #ffffff);
+  background: transparent !important;
+}
+
+.mode-option:focus {
+  outline: none;
+}
+
+.mode-option:focus-visible {
+  outline: 2px solid var(--color-focus, #60a5fa) !important;
+  outline-offset: 2px;
+  border-radius: 4px !important;
+  /* Override shadcn ring styles */
+  box-shadow: none !important;
+}
+
+.mode-option:disabled {
+  cursor: not-allowed;
+}
+
+/*
+ * Text color adjustments for active states (contrast).
+ *
+ * The ToggleGroupItems are now nested inside a ToggleGroup wrapper (not direct
+ * siblings of the highlight div), so we use parent-scoped descendant selectors.
+ */
+.mode-switch:has(.mode-switch__highlight[data-mode="plan"]) .mode-option[data-mode="plan"].active {
+  color: #ffffff;
+}
+
+.mode-switch:has(.mode-switch__highlight[data-mode="manual"]) .mode-option[data-mode="manual"].active {
+  color: #ffffff;
+}
+
+.mode-switch:has(.mode-switch__highlight[data-mode="accept"]) .mode-option[data-mode="accept"].active {
+  color: #1a1a2e;
+}
+
+/* Editor-specific positioning */
+.editor-mode-switch {
+  margin-bottom: 8px;
+}
+
+/* Screen reader only text */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}