@pennyfarthing/cyclist 10.0.3 → 10.2.0

package/src/public/components/DockviewWorkspace.tsx

@@ -49,7 +49,6 @@ export const PANEL_INVENTORY = {
   TODO: 'todo',
   BACKGROUND: 'background',
   GIT: 'git',
-  HOTSPOTS: 'hotspots',
   SETTINGS: 'settings',
 } as const;
 
@@ -91,7 +90,6 @@ export const RIGHT_SIDEBAR_PANELS = [
   PANEL_INVENTORY.TODO,
   PANEL_INVENTORY.BACKGROUND,
   PANEL_INVENTORY.GIT,
-  PANEL_INVENTORY.HOTSPOTS,
   PANEL_INVENTORY.SETTINGS,
 ] as const;
 
@@ -109,7 +107,6 @@ const PANEL_TITLES: Record<string, string> = {
   todo: 'Todo',
   background: 'Subagents',
   git: 'Git',
-  hotspots: 'Hotspots',
   settings: 'Settings',
 };
 

package/src/public/components/FullFileTree.tsx

@@ -93,15 +93,29 @@ function TreeDirectoryNode({
   cache: Record<string, DirectoryEntry[]>;
   loading: Set<string>;
 }): React.ReactElement {
-  const [isOpen, setIsOpen] = useState(false);
-  const children = cache[entry.path];
-  const isLoading = loading.has(entry.path);
-
   // Check if this directory contains any changed files
   const hasChanges = Array.from(changedFiles.keys()).some(
     (filePath) => filePath.startsWith(entry.path + '/')
   );
 
+  const [isOpen, setIsOpen] = useState(hasChanges);
+  const children = cache[entry.path];
+  const isLoading = loading.has(entry.path);
+
+  // Auto-fetch children when directory has changes and is opened by default
+  useEffect(() => {
+    if (hasChanges && !children && !loading.has(entry.path)) {
+      fetchDirectory(entry.path);
+    }
+  }, [hasChanges, children, entry.path, fetchDirectory, loading]);
+
+  // Auto-open when changes appear in this directory
+  useEffect(() => {
+    if (hasChanges) {
+      setIsOpen(true);
+    }
+  }, [hasChanges]);
+
   const handleToggle = useCallback(() => {
     const willOpen = !isOpen;
     setIsOpen(willOpen);

package/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/src/public/components/MessageView.tsx

@@ -24,7 +24,7 @@ import ToolStack from './ToolStack';
 import SubagentSpan from './SubagentSpan';
 import QuickActions from './QuickActions';
 import { Separator } from '@/components/ui/separator';
-import { isSkillContent } from '../utils/messageFilters';
+import { isSkillContent, extractSkillLabel } from '../utils/messageFilters';
 import { groupToolsIntoStacks, ToolStackData } from '../utils/toolStackGrouper';
 import { usePersona } from '../hooks/usePersona';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -121,9 +121,26 @@ export default function MessageView({ messages }: MessageViewProps): React.React
     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)) 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) {
@@ -271,7 +288,7 @@ export default function MessageView({ messages }: MessageViewProps): React.React
             <img
               src={colorScheme === 'dark' ? '/images/cyclist-dark.png' : '/images/cyclist-light.png'}
               alt="Cyclist"
-              style={{ height: '2.5rem', marginBottom: '0.5rem', opacity: 0.6 }}
+              style={{ height: '2.5rem', opacity: 0.6, display: 'block', margin: '0 auto 0.5rem' }}
             />
             <div>Type <code style={{
               background: 'var(--bg-tertiary, #0f0f1a)',
@@ -331,9 +348,6 @@ export default function MessageView({ messages }: MessageViewProps): React.React
                 <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"
@@ -343,6 +357,9 @@ export default function MessageView({ messages }: MessageViewProps): React.React
                     {roleAbbrev}
                   </Badge>
                 )}
+                <span className="turn-timestamp">
+                  {formatTurnTime(turn.timestamp)}
+                </span>
               </div>
               {turn.items.map((item) => {
                 const idx = globalIdx++;

package/src/public/components/PersonaHeader.tsx

@@ -15,12 +15,13 @@
  * - Accessible with ARIA labels
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef, useEffect } 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';
+import TandemPortrait from './TandemPortrait';
 
 // Agent colors matching CLI statusbar (statusline.sh)
 const AGENT_COLORS: Record<string, string> = {
@@ -59,7 +60,7 @@ function humanizeTheme(theme: string): string {
 }
 
 export default function PersonaHeader(): React.ReactElement {
-  const { persona } = usePersona();
+  const { persona, isStreaming } = usePersona();
   const colorScheme = useColorScheme();
   const [portraitError, setPortraitError] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
@@ -70,6 +71,26 @@ export default function PersonaHeader(): React.ReactElement {
   const role = persona?.role || 'agent';
   const slug = persona?.slug;
   const quote = persona?.quote;
+  const tandemAgent = persona?.tandemAgent;
+
+  // Observation pulse: one-shot animation on primary portrait when backseat starts thinking
+  const [observationPulse, setObservationPulse] = useState(false);
+  const prevThinkingRef = useRef(false);
+  const portraitRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const wasThinking = prevThinkingRef.current;
+    const isThinking = tandemAgent?.isThinking ?? false;
+    prevThinkingRef.current = isThinking;
+
+    if (!wasThinking && isThinking) {
+      setObservationPulse(true);
+    }
+  }, [tandemAgent?.isThinking]);
+
+  const handlePulseEnd = useCallback(() => {
+    setObservationPulse(false);
+  }, []);
 
   const handleOpenPopup = useCallback(() => {
     setIsPopupOpen(true);
@@ -101,7 +122,12 @@ export default function PersonaHeader(): React.ReactElement {
           onKeyDown={(e) => e.key === 'Enter' && handleOpenPopup()}
         >
           <div className="persona-portrait-group">
-            <div className="persona-portrait" data-testid="persona-portrait">
+            <div
+              className={`persona-portrait${isStreaming ? ' avatar-thinking' : ''}${observationPulse ? ' avatar-observation-pulse' : ''}`}
+              data-testid="persona-portrait"
+              ref={portraitRef}
+              onAnimationEnd={handlePulseEnd}
+            >
               {slug && theme && !portraitError ? (
                 <img
                   src={`/portraits/${theme}/medium/${slug}.png`}
@@ -113,6 +139,23 @@ export default function PersonaHeader(): React.ReactElement {
                 <span className="portrait-fallback">🤖</span>
               )}
             </div>
+            {tandemAgent && (
+              <TandemPortrait
+                character={tandemAgent.character}
+                role={tandemAgent.role}
+                slug={tandemAgent.slug}
+                theme={tandemAgent.theme}
+                isActive={true}
+                isThinking={tandemAgent.isThinking}
+              />
+            )}
+            {tandemAgent && (
+              <span className="visually-hidden" role="status" aria-live="polite" data-testid="tandem-sr-status">
+                {tandemAgent.isThinking
+                  ? `${tandemAgent.character} is thinking`
+                  : `${tandemAgent.character} observing`}
+              </span>
+            )}
           </div>
           <div className="persona-info">
             <div className="persona-name-row">

package/src/public/components/TandemPortrait.tsx

@@ -0,0 +1,71 @@
+/**
+ * TandemPortrait Component
+ *
+ * Renders backseat agent portrait below primary in PersonaHeader.
+ * Story: MSSCI-14674 (96-1) - TandemPortrait Component
+ * Epic: MSSCI-14673 (Cyclist Tandem UI)
+ */
+
+import React, { useState } from 'react';
+
+export interface TandemPortraitProps {
+  character: string;
+  role: string;
+  slug: string;
+  theme: string;
+  isActive: boolean;
+  isThinking: boolean;
+}
+
+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',
+};
+
+export default function TandemPortrait({
+  character,
+  role,
+  slug,
+  theme,
+  isActive,
+  isThinking,
+}: TandemPortraitProps): React.ReactElement | null {
+  const [portraitError, setPortraitError] = useState(false);
+
+  if (!isActive) return null;
+
+  const abbrev = AGENT_ABBREV[role] || role.toUpperCase();
+
+  return (
+    <div
+      className={`persona-tandem-portrait${isThinking ? ' avatar-tandem-thinking' : ''}`}
+      data-testid="tandem-portrait"
+      role="img"
+      aria-label={`${character} (${role}) - observing`}
+      tabIndex={-1}
+    >
+      {!portraitError ? (
+        <img
+          src={`/portraits/${theme}/medium/${slug}.png`}
+          alt=""
+          aria-hidden="true"
+          className="tandem-portrait-image"
+          onError={() => setPortraitError(true)}
+        />
+      ) : (
+        <span className="tandem-portrait-fallback" aria-hidden="true">🤖</span>
+      )}
+      <span className="tandem-role-badge" data-testid="tandem-role-badge" aria-hidden="true">
+        {abbrev}
+      </span>
+    </div>
+  );
+}

package/src/public/components/ToolCallBlock.tsx

@@ -104,6 +104,7 @@ export function getToolBadgeLabel(toolName: string): string {
 export default function ToolCallBlock({ toolUse, result, className }: ToolCallBlockProps): React.ReactElement {
   // AC1: Start collapsed by default
   const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isPromptCollapsed, setIsPromptCollapsed] = useState(true);
   // AC3: Track whether showing full content or truncated
   const [showFullContent, setShowFullContent] = useState(false);
   // AC4: Track copy state
@@ -112,6 +113,7 @@ export default function ToolCallBlock({ toolUse, result, className }: ToolCallBl
   // MSSCI-13402: Determine error state for styling
   const isError = result?.is_error === true;
   const inputDisplay = formatToolInput(toolUse.tool_name, toolUse.input);
+  const paramCount = Object.keys(toolUse.input).length;
 
   // MSSCI-13402: Get tool type CSS class
   const toolTypeClass = getToolTypeClass(toolUse.tool_name);
@@ -178,17 +180,30 @@ export default function ToolCallBlock({ toolUse, result, className }: ToolCallBl
             </TooltipTrigger>
             <TooltipContent>{toolUse.tool_name}</TooltipContent>
           </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="tool-name">{intentSummary}</span>
-            </TooltipTrigger>
-            <TooltipContent>{inputDisplay}</TooltipContent>
-          </Tooltip>
+          <span className="tool-name">{intentSummary}</span>
           {/* MSSCI-13402: Duration display */}
           <span data-testid="tool-duration" className="tool-duration">
             {result?.durationMs !== undefined ? formatDuration(result.durationMs) : ''}
           </span>
         </div>
+      {/* Prompt section - collapsible tool input display */}
+      <div className="tool-result-header">
+        <Button
+          variant="ghost"
+          size="sm"
+          data-testid="tool-prompt-toggle"
+          className="tool-result-toggle"
+          onClick={() => setIsPromptCollapsed(!isPromptCollapsed)}
+        >
+          {isPromptCollapsed ? '▶' : '▼'} Prompt ({paramCount} {paramCount === 1 ? 'param' : 'params'})
+        </Button>
+      </div>
+      <div
+        data-testid="tool-prompt-content"
+        className={`tool-result-content ${isPromptCollapsed ? 'collapsed' : ''}`}
+      >
+        <pre>{inputDisplay}</pre>
+      </div>
       {result && (
         <>
           <div className="tool-result-header">