@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

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

@@ -0,0 +1,181 @@
+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/packages/core/src/public/components/Message.tsx

@@ -0,0 +1,225 @@
+/**
+ * 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/packages/core/src/public/components/MessageList.tsx

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