@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/HealthGauge.tsx

@@ -1,181 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-
-export interface HealthGaugeDimension {
-  name: string;
-  score: number | null;
-  weight: number;
-}
-
-export interface HealthGaugeProps {
-  score: number | null;
-  dimensions: HealthGaugeDimension[];
-  totalDimensions?: number;
-  onDimensionClick?: (dimensionName: string) => void;
-  isLoading?: boolean;
-  lastFetchedAt?: number | null;
-  onRefresh?: () => void;
-  error?: Error | null;
-}
-
-const GRADE_BANDS: { min: number; grade: string; color: string }[] = [
-  { min: 90, grade: 'A', color: '#22c55e' },
-  { min: 75, grade: 'B', color: '#84cc16' },
-  { min: 60, grade: 'C', color: '#eab308' },
-  { min: 40, grade: 'D', color: '#f97316' },
-  { min: 0,  grade: 'F', color: '#ef4444' },
-];
-
-const DIMENSION_LABELS: Record<string, string> = {
-  churn: 'Churn',
-  todo_density: 'TODO Density',
-  complexity: 'Complexity',
-  test_gaps: 'Test Gaps',
-  dead_code: 'Dead Code',
-  deprecation_debt: 'Deprecation Debt',
-  dependency_freshness: 'Dependency Freshness',
-  agent_context_efficiency: 'Agent Context Efficiency',
-};
-
-function getGrade(score: number): { grade: string; color: string } {
-  for (const band of GRADE_BANDS) {
-    if (score >= band.min) {
-      return { grade: band.grade, color: band.color };
-    }
-  }
-  return { grade: 'F', color: '#ef4444' };
-}
-
-// SVG arc helper for a semicircle gauge
-function describeArc(cx: number, cy: number, r: number, startAngle: number, endAngle: number): string {
-  const start = polarToCartesian(cx, cy, r, endAngle);
-  const end = polarToCartesian(cx, cy, r, startAngle);
-  const largeArc = endAngle - startAngle <= 180 ? '0' : '1';
-  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 0 ${end.x} ${end.y}`;
-}
-
-function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
-  const rad = ((angleDeg - 90) * Math.PI) / 180;
-  return {
-    x: cx + r * Math.cos(rad),
-    y: cy + r * Math.sin(rad),
-  };
-}
-
-function formatAge(ms: number): string {
-  const seconds = Math.floor(ms / 1000);
-  if (seconds < 60) return `${seconds}s ago`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  return `${hours}h ago`;
-}
-
-export function HealthGauge({ score, dimensions, totalDimensions, onDimensionClick, isLoading, lastFetchedAt, onRefresh, error }: HealthGaugeProps): React.ReactElement {
-  const hasData = score !== null && score !== undefined;
-  const gradeInfo = hasData ? getGrade(score) : null;
-  const fillAngle = hasData ? (score / 100) * 180 : 0;
-
-  // Live-updating age display
-  const [ageText, setAgeText] = useState<string | null>(null);
-  useEffect(() => {
-    if (!lastFetchedAt) {
-      setAgeText(null);
-      return;
-    }
-    const tick = () => setAgeText(formatAge(Date.now() - lastFetchedAt));
-    tick();
-    const id = setInterval(tick, 10_000);
-    return () => clearInterval(id);
-  }, [lastFetchedAt]);
-
-  // Use all 8 dimension keys so rows always render (even before data arrives)
-  const allDimKeys = Object.keys(DIMENSION_LABELS);
-  const dimMap = new Map(dimensions.map((d) => [d.name, d]));
-
-  return (
-    <div
-      data-testid="health-gauge"
-      data-grade={gradeInfo?.grade ?? null}
-    >
-      <div className="health-gauge-header">
-        <div className="health-gauge-status">
-          {ageText && <span className="health-gauge-age" data-testid="health-gauge-age">{ageText}</span>}
-          {error && <span className="health-gauge-error" data-testid="health-gauge-error">Failed</span>}
-        </div>
-        {onRefresh && (
-          <Button
-            variant="outline"
-            size="sm"
-            className="health-gauge-refresh"
-            data-testid="health-gauge-refresh"
-            onClick={onRefresh}
-            disabled={isLoading}
-          >
-            {isLoading ? 'Analyzing...' : hasData ? 'Refresh' : 'Analyze'}
-          </Button>
-        )}
-      </div>
-
-      <svg viewBox="0 0 200 120" width="200" height="120" className={isLoading ? 'opacity-50' : ''}>
-        {/* Background arc (grey) */}
-        <path
-          d={describeArc(100, 100, 80, 0, 180)}
-          fill="none"
-          stroke="#333"
-          strokeWidth="12"
-          strokeLinecap="round"
-        />
-        {/* Fill arc (colored by grade) */}
-        {hasData && fillAngle > 0 && (
-          <path
-            d={describeArc(100, 100, 80, 0, fillAngle)}
-            fill="none"
-            stroke={gradeInfo!.color}
-            strokeWidth="12"
-            strokeLinecap="round"
-          />
-        )}
-        {/* Score text */}
-        <text x="100" y="85" textAnchor="middle" fontSize="28" fill="currentColor">
-          {hasData ? String(Math.round(score)) : '--'}
-        </text>
-        {/* Grade letter */}
-        {gradeInfo && (
-          <text x="100" y="108" textAnchor="middle" fontSize="16" fill={gradeInfo.color}>
-            {gradeInfo.grade}
-          </text>
-        )}
-      </svg>
-
-      {/* Dimension count for partial data */}
-      {hasData && totalDimensions && dimensions.length < totalDimensions && (
-        <div className="health-gauge-partial">
-          {dimensions.length} of {totalDimensions} dimensions
-        </div>
-      )}
-
-      {/* Dimension breakdown — always visible, each row opens its dialog */}
-      <div data-testid="dimension-breakdown" className="health-gauge-breakdown">
-        {allDimKeys.map((dimName) => {
-          const dim = dimMap.get(dimName);
-          return (
-            <div
-              key={dimName}
-              data-testid={`dimension-${dimName}`}
-              className="health-gauge-dimension"
-              onClick={() => onDimensionClick?.(dimName)}
-            >
-              <span className="dimension-label">
-                {DIMENSION_LABELS[dimName] || dimName}
-              </span>
-              <span className="dimension-score">
-                {dim?.score !== null && dim?.score !== undefined ? dim.score.toFixed(1) : '--'}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/src/public/components/Message.tsx

@@ -1,225 +0,0 @@
-/**
- * Message Component
- *
- * Renders a single message with avatar and content.
- * Story MSSCI-12698 - MessageView Component with Streaming
- * Story MSSCI-12777 - User Avatar from GitHub
- */
-
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { parseMarkdown } from '../utils/markdown';
-import StreamingContent from './StreamingContent';
-import { usePersona } from '../hooks/usePersona';
-import { useUserAvatar } from '../hooks/useUserAvatar';
-import type { MessageData } from '../types/message';
-
-interface MessageProps {
-  message: MessageData;
-  isLastAgentMessage?: boolean;
-  /** Whether this is the first message in a turn (shows avatar) */
-  isFirstInTurn?: boolean;
-}
-
-interface AssistantAvatarProps {
-  isStreaming?: boolean;
-  agentSlug?: string;
-  agentTheme?: string;
-  agentCharacter?: string;
-}
-
-function AssistantAvatar({ isStreaming, agentSlug, agentTheme, agentCharacter }: AssistantAvatarProps): React.ReactElement {
-  const { persona } = usePersona();
-  const [imageError, setImageError] = useState(false);
-
-  // Use per-message persona if available, fall back to current global persona
-  const slug = agentSlug || persona?.slug;
-  const theme = agentTheme || persona?.theme;
-  const character = agentCharacter || persona?.character;
-  const avatarClass = isStreaming ? 'avatar-portrait avatar-thinking' : 'avatar-portrait';
-
-  if (slug && theme && !imageError) {
-    return (
-      <img
-        src={`/portraits/${theme}/small/${slug}.png`}
-        alt={character || 'Agent'}
-        className={avatarClass}
-        onError={() => setImageError(true)}
-      />
-    );
-  }
-
-  return <span className={isStreaming ? 'avatar-emoji avatar-thinking' : 'avatar-emoji'}>🤖</span>;
-}
-
-function UserAvatar(): React.ReactElement {
-  const { avatarUrl, isLoading } = useUserAvatar();
-  const [imageError, setImageError] = useState(false);
-
-  if (isLoading) {
-    return <span className="avatar-emoji">👤</span>;
-  }
-
-  if (avatarUrl && !imageError) {
-    return (
-      <img
-        src={avatarUrl}
-        alt="User"
-        className="avatar-portrait"
-        onError={() => setImageError(true)}
-      />
-    );
-  }
-
-  return <span className="avatar-emoji">👤</span>;
-}
-
-function useSortableTables(contentRef: React.RefObject<HTMLDivElement | null>) {
-  const attachSort = useCallback(() => {
-    const el = contentRef.current;
-    if (!el) return;
-    const headers = el.querySelectorAll<HTMLTableCellElement>('th.sortable-th');
-    headers.forEach((th) => {
-      if (th.dataset.sortBound) return;
-      th.dataset.sortBound = '1';
-      th.style.cursor = 'pointer';
-      th.addEventListener('click', () => {
-        const colIdx = parseInt(th.dataset.col || '0', 10);
-        const table = th.closest('table');
-        if (!table) return;
-        const tbody = table.querySelector('tbody');
-        if (!tbody) return;
-        const rows = Array.from(tbody.querySelectorAll('tr'));
-        const currentDir = th.dataset.sortDir === 'asc' ? 'desc' : 'asc';
-
-        // Clear all indicators in this table
-        table.querySelectorAll<HTMLTableCellElement>('th.sortable-th').forEach((h) => {
-          h.dataset.sortDir = '';
-          const ind = h.querySelector('.sort-indicator');
-          if (ind) ind.textContent = '';
-        });
-
-        th.dataset.sortDir = currentDir;
-        const indicator = th.querySelector('.sort-indicator');
-        if (indicator) indicator.textContent = currentDir === 'asc' ? ' \u25B2' : ' \u25BC';
-
-        rows.sort((a, b) => {
-          const aText = (a.children[colIdx]?.textContent || '').trim();
-          const bText = (b.children[colIdx]?.textContent || '').trim();
-          const aNum = parseFloat(aText);
-          const bNum = parseFloat(bText);
-          // Numeric sort if both parse as numbers
-          if (!isNaN(aNum) && !isNaN(bNum)) {
-            return currentDir === 'asc' ? aNum - bNum : bNum - aNum;
-          }
-          const cmp = aText.localeCompare(bText, undefined, { sensitivity: 'base' });
-          return currentDir === 'asc' ? cmp : -cmp;
-        });
-
-        for (const row of rows) {
-          tbody.appendChild(row);
-        }
-      });
-    });
-  }, [contentRef]);
-
-  useEffect(() => {
-    attachSort();
-  });
-}
-
-export default function Message({ message, isLastAgentMessage, isFirstInTurn = true }: MessageProps): React.ReactElement {
-  const contentRef = useRef<HTMLDivElement>(null);
-  useSortableTables(contentRef);
-  const roleClass = `message-${message.type}`;
-  const testId = `message-${message.type}`;
-  const continuationClass = !isFirstInTurn ? ' continuation' : '';
-
-  // For bell-injected messages (queued messages injected via PostToolUse hook)
-  // Show with 🔔 indicator so user knows it was sent mid-turn
-  if (message.type === 'bell_injected') {
-    const html = message.content ? parseMarkdown(message.content) : '';
-    return (
-      <TooltipProvider delayDuration={300}>
-        <div data-testid="message-bell-injected" className={`message message-user message-bell-injected${continuationClass}`}>
-          <div data-testid="avatar" className="message-avatar">
-            <UserAvatar />
-          </div>
-          <div className="message-content">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Badge variant="secondary" className="bell-indicator">🔔</Badge>
-              </TooltipTrigger>
-              <TooltipContent>Injected via Bell Mode</TooltipContent>
-            </Tooltip>
-            <div dangerouslySetInnerHTML={{ __html: html }} />
-            {message.imageCount && message.imageCount > 0 && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Badge variant="outline" className="message-attachment-indicator">
-                    📎 {message.imageCount}
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent>{`${message.imageCount} image${message.imageCount > 1 ? 's' : ''} attached`}</TooltipContent>
-              </Tooltip>
-            )}
-          </div>
-        </div>
-      </TooltipProvider>
-    );
-  }
-
-  // For streaming agent messages, use StreamingContent with throbbing avatar
-  // Only throb the last agent message's avatar
-  if (message.type === 'agent' && message.isStreaming) {
-    const showThrob = isLastAgentMessage !== false;
-    return (
-      <div data-testid={testId} className={`message ${roleClass}${continuationClass}`}>
-        <div data-testid="avatar" className="message-avatar">
-          <AssistantAvatar
-            isStreaming={showThrob}
-            agentSlug={message.agentSlug}
-            agentTheme={message.agentTheme}
-            agentCharacter={message.agentCharacter}
-          />
-        </div>
-        <div className="message-content">
-          <StreamingContent content={message.content || ''} isStreaming={message.isStreaming ?? false} />
-        </div>
-      </div>
-    );
-  }
-
-  // For regular messages, render markdown
-  const html = message.content ? parseMarkdown(message.content) : '';
-
-  return (
-    <div data-testid={testId} className={`message ${roleClass}${continuationClass}`} ref={contentRef}>
-      <div data-testid="avatar" className="message-avatar">
-        {message.type === 'user' ? <UserAvatar /> : (
-          <AssistantAvatar
-            agentSlug={message.agentSlug}
-            agentTheme={message.agentTheme}
-            agentCharacter={message.agentCharacter}
-          />
-        )}
-      </div>
-      <div className="message-content">
-        <div dangerouslySetInnerHTML={{ __html: html }} />
-        {message.type === 'user' && message.imageCount && message.imageCount > 0 && (
-          <TooltipProvider delayDuration={300}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Badge variant="outline" className="message-attachment-indicator">
-                  📎 {message.imageCount}
-                </Badge>
-              </TooltipTrigger>
-              <TooltipContent>{`${message.imageCount} image${message.imageCount > 1 ? 's' : ''} attached`}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/public/components/MessageList.tsx

@@ -1,98 +0,0 @@
-/**
- * MessageList Component
- *
- * Scrolling container for message list with auto-scroll support.
- * Story MSSCI-12698 - MessageView Component with Streaming
- */
-
-import React, { useRef, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
-
-interface MessageListProps {
-  children: React.ReactNode;
-  onScrollChange?: (isAtBottom: boolean) => void;
-  autoScroll?: boolean;
-}
-
-export interface MessageListHandle {
-  scrollToBottom: (behavior?: ScrollBehavior) => void;
-}
-
-const MessageList = forwardRef<MessageListHandle, MessageListProps>(
-  ({ children, onScrollChange, autoScroll = true }, ref) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const isAtBottomRef = useRef(true);
-
-    const checkIfAtBottom = useCallback((scrollTopOverride?: number) => {
-      const container = containerRef.current;
-      if (!container) return true;
-
-      const scrollTop = scrollTopOverride ?? container.scrollTop;
-      const scrollHeight = container.scrollHeight || 0;
-      const clientHeight = container.clientHeight || 0;
-
-      // Test environment: scrollHeight may be 0 but we have children
-      // If scrollTop is explicitly 0 and we have children, assume not at bottom
-      if (scrollTop === 0 && scrollHeight === 0 && container.children.length > 0) {
-        return false;
-      }
-
-      // If scrollTop is 0 and there's scrollable content, we're at top (not bottom)
-      if (scrollTop === 0 && scrollHeight > clientHeight) {
-        return false;
-      }
-
-      // If there's no scrollable area, consider it at bottom
-      if (scrollHeight <= clientHeight) {
-        return true;
-      }
-
-      const threshold = 50; // pixels from bottom
-      const isAtBottom = scrollHeight - scrollTop - clientHeight < threshold;
-      return isAtBottom;
-    }, []);
-
-    const scrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {
-      const container = containerRef.current;
-      if (!container) return;
-
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior,
-      });
-    }, []);
-
-    // Expose scrollToBottom to parent via ref
-    useImperativeHandle(ref, () => ({
-      scrollToBottom,
-    }));
-
-    const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
-      const target = event.target as HTMLDivElement;
-      const isAtBottom = checkIfAtBottom(target.scrollTop);
-      isAtBottomRef.current = isAtBottom;
-      onScrollChange?.(isAtBottom);
-    }, [checkIfAtBottom, onScrollChange]);
-
-    // Auto-scroll when children change (new messages)
-    useEffect(() => {
-      if (autoScroll && isAtBottomRef.current) {
-        scrollToBottom();
-      }
-    }, [children, autoScroll, scrollToBottom]);
-
-    return (
-      <div
-        ref={containerRef}
-        data-testid="message-list"
-        className="message-list"
-        onScroll={handleScroll}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-MessageList.displayName = 'MessageList';
-
-export default MessageList;