@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/MessageView.tsx

@@ -1,400 +0,0 @@
-/**
- * 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/src/public/components/ModeSwitch/ModeSwitch.css

@@ -1,165 +0,0 @@
-/**
- * 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;
-}