@pennyfarthing/core 11.3.7 → 11.4.0

package/packages/core/src/public/components/panels/TandemPanel.tsx

@@ -0,0 +1,104 @@
+/**
+ * TandemPanel - Tandem consultation dialogue viewer
+ *
+ * Story 86-11: Cyclist: Tandem dialogue panel
+ *
+ * Features:
+ * - Display tandem observation exchanges with agent portraits
+ * - Real-time updates via WebSocket
+ * - Outcome badges (applied/deferred/rejected)
+ * - Metrics summary (exchange count, token overhead, confidence)
+ * - Empty state when no tandem activity
+ */
+
+import React, { useState } from 'react';
+import { useTandemObservations } from '../../hooks/useTandemObservations';
+
+// =============================================================================
+// TandemPanel Component
+// =============================================================================
+
+export function TandemPanel(): React.ReactElement {
+  const { header, observations, metrics, isLoading, error } = useTandemObservations();
+  const [portraitError, setPortraitError] = useState(false);
+
+  const showEmptyState = !isLoading && !error && !header && observations.length === 0;
+
+  return (
+    <div className="tandem-panel">
+      {/* Error state */}
+      {error && (
+        <div data-testid="tandem-error" className="tandem-error">
+          Connection failed — tandem data unavailable
+        </div>
+      )}
+
+      {/* Observer header with portrait and role */}
+      {header && (
+        <div className="tandem-header">
+          {!portraitError ? (
+            <img
+              data-testid="observer-portrait"
+              src={`/portraits/${header.theme}/medium/${header.slug}.png`}
+              alt={header.character}
+              className="observer-portrait"
+              onError={() => setPortraitError(true)}
+            />
+          ) : (
+            <span data-testid="observer-portrait" className="observer-portrait-fallback" aria-hidden="true">🤖</span>
+          )}
+          <div className="tandem-header-info">
+            <span className="observer-name">{header.character}</span>
+            <span data-testid="observer-role-badge" className="observer-role-badge">
+              {header.observer}
+            </span>
+            <span data-testid="observer-phase" className="observer-phase">{header.phase}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {showEmptyState && (
+        <div data-testid="tandem-empty-state" className="tandem-empty-state">
+          No tandem activity
+        </div>
+      )}
+
+      {/* Observation cards */}
+      {observations.map((obs, i) => (
+        <div key={obs.timestamp + i} data-testid="tandem-observation" className="tandem-observation">
+          <div className="observation-time">{obs.time}</div>
+          <div className="observation-trigger">
+            <span className="trigger-scope">{obs.trigger.scope}</span>
+            <span className="trigger-detail">{obs.trigger.detail}</span>
+          </div>
+          <div className="observation-content">{obs.content}</div>
+          {obs.outcome && (
+            <span
+              data-testid="outcome-badge"
+              data-outcome={obs.outcome}
+              className={`outcome-badge outcome-${obs.outcome}`}
+            >
+              {obs.outcome}
+            </span>
+          )}
+        </div>
+      ))}
+
+      {/* Metrics summary */}
+      {metrics && (
+        <div data-testid="tandem-metrics" className="tandem-metrics">
+          <div className="metric">{metrics.exchangeCount} exchanges</div>
+          <div className="metric">{metrics.tokenOverhead}% overhead</div>
+          <div className="confidence-distribution">
+            <span>High: {metrics.confidenceDistribution.high}</span>
+            <span>Medium: {metrics.confidenceDistribution.medium}</span>
+            <span>Low: {metrics.confidenceDistribution.low}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TandemPanel;

package/packages/core/src/public/components/panels/TaskTracker.tsx

@@ -0,0 +1,48 @@
+/**
+ * TaskTracker - Shared task list with dependencies
+ *
+ * Story 86-12: Cyclist: Native team panel
+ */
+
+import React from 'react';
+import type { TaskListItem } from '../../hooks/useTeamMembers';
+
+export interface TaskTrackerProps {
+  tasks: TaskListItem[];
+}
+
+export function TaskTracker({ tasks }: TaskTrackerProps): React.ReactElement {
+  if (tasks.length === 0) {
+    return (
+      <div data-testid="task-tracker">
+        <div data-testid="tasks-empty">No tasks</div>
+      </div>
+    );
+  }
+
+  const completed = tasks.filter(t => t.status === 'completed').length;
+
+  return (
+    <div data-testid="task-tracker">
+      <div data-testid="task-progress-summary">
+        {completed} of {tasks.length} completed
+      </div>
+      {tasks.map(task => (
+        <div key={task.id} data-testid="task-item">
+          <span>{task.title}</span>
+          <span data-testid="task-owner">{task.owner ?? 'unassigned'}</span>
+          <span data-testid="task-status" data-status={task.status}>
+            {task.status}
+          </span>
+          {task.blockedBy && task.blockedBy.length > 0 && (
+            <span data-testid="task-blocked-indicator">
+              Blocked by: {task.blockedBy.join(', ')}
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default TaskTracker;

package/packages/core/src/public/components/panels/TeamPanel.tsx

@@ -0,0 +1,64 @@
+/**
+ * TeamPanel - Native team visualization panel
+ *
+ * Story 86-12: Cyclist: Native team panel
+ *
+ * Features:
+ * - Team member roster with persona portraits and status
+ * - Task list with completion progress and dependencies
+ * - Message feed between agents
+ * - Click agent to view output
+ * - Hidden when native teams not active
+ */
+
+import React, { useState } from 'react';
+import { useTeamMembers } from '../../hooks/useTeamMembers';
+import { TeamRoster } from './TeamRoster';
+import { TaskTracker } from './TaskTracker';
+import { MessageFeed } from './MessageFeed';
+import type { TeamMember } from '../../hooks/useTeamMembers';
+
+export function TeamPanel(): React.ReactElement {
+  const { isActive, teamName, members, tasks, messages, isLoading, error } = useTeamMembers();
+  const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
+
+  return (
+    <div data-testid="team-panel" className="team-panel">
+      {isLoading && (
+        <div data-testid="team-loading">Connecting to team...</div>
+      )}
+
+      {error && (
+        <div data-testid="team-error">Connection failed — team data unavailable</div>
+      )}
+
+      {!isActive && (
+        <div data-testid="team-empty-state">No active team</div>
+      )}
+
+      {teamName && (
+        <div data-testid="team-name">{teamName}</div>
+      )}
+
+      <TeamRoster members={members} onMemberClick={setSelectedMember} />
+      <TaskTracker tasks={tasks} />
+      <MessageFeed messages={messages} />
+
+      {selectedMember && (
+        <div data-testid="agent-output-view">
+          <div>{selectedMember.name}</div>
+          <div>Role: {selectedMember.agentType}</div>
+          <div>Status: {selectedMember.status}</div>
+          <button
+            data-testid="agent-output-close"
+            onClick={() => setSelectedMember(null)}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TeamPanel;

package/packages/core/src/public/components/panels/TeamRoster.tsx

@@ -0,0 +1,67 @@
+/**
+ * TeamRoster - Agent member list with portraits and status
+ *
+ * Story 86-12: Cyclist: Native team panel
+ */
+
+import React, { useState } from 'react';
+import type { TeamMember } from '../../hooks/useTeamMembers';
+
+export interface TeamRosterProps {
+  members: TeamMember[];
+  onMemberClick?: (member: TeamMember) => void;
+}
+
+function MemberPortrait({ member }: { member: TeamMember }) {
+  const [imgError, setImgError] = useState(false);
+  const src = member.portrait
+    ? `/portraits/${member.portrait.theme}/medium/${member.portrait.slug}.png`
+    : '';
+
+  return (
+    <div data-testid="member-portrait">
+      {!imgError && src ? (
+        <img
+          src={src}
+          alt={member.name}
+          onError={() => setImgError(true)}
+        />
+      ) : (
+        <span>🤖</span>
+      )}
+    </div>
+  );
+}
+
+export function TeamRoster({ members, onMemberClick }: TeamRosterProps): React.ReactElement {
+  if (members.length === 0) {
+    return (
+      <div data-testid="team-roster">
+        <div data-testid="roster-empty">No team members</div>
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="team-roster">
+      {members.map(member => (
+        <div
+          key={member.name}
+          data-testid="team-member"
+          role="button"
+          onClick={() => onMemberClick?.(member)}
+        >
+          <MemberPortrait member={member} />
+          <span>{member.name}</span>
+          <span data-testid="member-role" title={member.agentType} className={`role-badge role-${member.agentType}`} />
+          <span data-testid="member-status" data-status={member.status}>
+            {member.status}
+          </span>
+          {member.currentTask && <span>{member.currentTask}</span>}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default TeamRoster;

package/packages/core/src/public/components/panels/TodoPanel.tsx

@@ -0,0 +1,142 @@
+/**
+ * TodoPanel - Task list with progress panel
+ *
+ * Extracted from ProgressPanel as part of MSSCI-14188.
+ * Shows todos grouped by status with progress bar.
+ *
+ * Story: MSSCI-14188 - Split Progress panel into Workflow, AC, and Todo panels
+ * Epic: epic-76 (Dockview Panel Migration)
+ */
+
+import React from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useTodos, TodoItem } from '../../hooks/useTodos';
+
+// =============================================================================
+// Todo Item Component
+// =============================================================================
+
+function TodoItemView({ todo }: { todo: TodoItem }): React.ReactElement {
+  const statusIcon = {
+    pending: '\u25CB',
+    in_progress: '\u25CF',
+    completed: '\u2713',
+  }[todo.status];
+
+  const statusClass = `todo-item todo-${todo.status}`;
+
+  // Use activeForm for in_progress (more descriptive), content for others
+  const displayText = todo.status === 'in_progress' && todo.activeForm
+    ? todo.activeForm
+    : todo.content;
+
+  return (
+    <div className={statusClass} data-testid={`todo-${todo.id}`}>
+      <span className="todo-status">{statusIcon}</span>
+      <span className="todo-subject">{displayText}</span>
+      {todo.blockedBy && todo.blockedBy.length > 0 && (
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="todo-blocked">
+                (blocked)
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{`Blocked by: ${todo.blockedBy.join(', ')}`}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// TodoPanel Component
+// =============================================================================
+
+export function TodoPanel(): React.ReactElement {
+  const { todos, isLoading, error } = useTodos();
+
+  if (isLoading) {
+    return (
+      <div className="todo-panel loading" data-testid="todo-panel">
+        <div className="space-y-2 p-2">
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-4 w-4/5" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="todo-panel error" data-testid="todo-panel">
+        <div className="error-message">{error.message}</div>
+      </div>
+    );
+  }
+
+  if (todos.length === 0) {
+    return (
+      <div className="todo-panel" data-testid="todo-panel">
+        <div className="placeholder">No active tasks</div>
+      </div>
+    );
+  }
+
+  // Group by status
+  const inProgress = todos.filter(t => t.status === 'in_progress');
+  const pending = todos.filter(t => t.status === 'pending');
+  const completed = todos.filter(t => t.status === 'completed');
+
+  // Calculate progress
+  const totalCount = todos.length;
+  const completedCount = completed.length;
+  const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+
+  return (
+    <div className="todo-panel" data-testid="todo-panel">
+      <div className="todo-content">
+        <div className="progress-bar-container">
+          <div
+            className="progress-bar"
+            style={{ width: `${progressPercent}%` }}
+          />
+          <span className="progress-text">{completedCount}/{totalCount}</span>
+        </div>
+
+        {inProgress.length > 0 && (
+          <div className="todo-section">
+            <h4>In Progress</h4>
+            {inProgress.map(todo => (
+              <TodoItemView key={todo.id} todo={todo} />
+            ))}
+          </div>
+        )}
+
+        {pending.length > 0 && (
+          <div className="todo-section">
+            <h4>Pending</h4>
+            {pending.map(todo => (
+              <TodoItemView key={todo.id} todo={todo} />
+            ))}
+          </div>
+        )}
+
+        {completed.length > 0 && (
+          <div className="todo-section todo-completed">
+            <h4>Completed ({completed.length})</h4>
+            {completed.map(todo => (
+              <TodoItemView key={todo.id} todo={todo} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TodoPanel;

package/packages/core/src/public/components/panels/WorkflowPanel.tsx

@@ -0,0 +1,224 @@
+/**
+ * WorkflowPanel - BikeLane phase visualization panel
+ *
+ * Extracted from ProgressPanel as part of MSSCI-14188.
+ * Shows workflow type badge (TDD/BDD/Trivial) and phase progress.
+ * MSSCI-14300: Added stepped workflow "Step N of M" display.
+ * MSSCI-14301: Added available workflows discovery list.
+ *
+ * Story: MSSCI-14188 - Split Progress panel into Workflow, AC, and Todo panels
+ * Epic: epic-76 (Dockview Panel Migration)
+ */
+
+import React, { useCallback } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useClaudeContext } from '../../contexts/ClaudeContext';
+import { useStory } from '../../hooks/useStory';
+import type { WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+function getPhaseIcon(status: 'done' | 'current' | 'pending'): string {
+  switch (status) {
+    case 'done':
+      return '\u2713';
+    case 'current':
+      return '\u25CF';
+    case 'pending':
+    default:
+      return '\u25CB';
+  }
+}
+
+function formatWorkflowType(type: string | null): string {
+  if (!type) return '\u2014';
+
+  const upperTypes = ['tdd', 'bdd'];
+  if (upperTypes.includes(type.toLowerCase())) {
+    return type.toUpperCase();
+  }
+
+  return type.charAt(0).toUpperCase() + type.slice(1);
+}
+
+// =============================================================================
+// Phase Step Component (for phased workflows)
+// =============================================================================
+
+function PhaseStep({ phase, isLast }: { phase: WorkflowPhase; isLast: boolean }): React.ReactElement {
+  const icon = getPhaseIcon(phase.status);
+  const statusClass = `phase-step ${phase.status}`;
+
+  return (
+    <>
+      <div className={statusClass}>
+        <span className="phase-icon">{icon}</span>
+        <span className="phase-label">{phase.label}</span>
+      </div>
+      {!isLast && <span className="phase-arrow">{'\u2192'}</span>}
+    </>
+  );
+}
+
+// =============================================================================
+// Stepped Progress Component (for stepped workflows)
+// =============================================================================
+
+function SteppedProgress({ phases }: { phases: WorkflowPhase[] }): React.ReactElement {
+  const total = phases.length;
+  const currentIndex = phases.findIndex(p => p.status === 'current');
+  const doneCount = phases.filter(p => p.status === 'done').length;
+
+  // If all done, current step = total; otherwise use 1-based index of current
+  const currentStep = currentIndex >= 0 ? currentIndex + 1 : (doneCount === total ? total : 1);
+  const currentPhase = currentIndex >= 0 ? phases[currentIndex] : null;
+
+  return (
+    <div className="stepped-progress">
+      <span className="stepped-counter">Step {currentStep} of {total}</span>
+      {currentPhase && (
+        <span className="stepped-current-label">{currentPhase.label}</span>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// Available Workflows List (MSSCI-14301)
+// =============================================================================
+
+function AvailableWorkflowsList({ workflows, onStart }: {
+  workflows: AvailableWorkflow[];
+  onStart?: (workflow: AvailableWorkflow) => void;
+}): React.ReactElement {
+  return (
+    <div className="available-workflows">
+      <div className="available-workflows-header">
+        <span className="available-workflows-title">Available Workflows ({workflows.length})</span>
+      </div>
+      <div className="available-workflows-list">
+        {workflows.map((wf) => (
+          <div
+            key={wf.name}
+            className="workflow-entry"
+            data-testid="workflow-entry"
+            data-workflow-entry-type={wf.type}
+          >
+            <div className="workflow-entry-header">
+              <span className="workflow-entry-name">{wf.name}</span>
+              <Badge variant="outline" className="workflow-entry-type-badge">
+                {wf.type}
+              </Badge>
+            </div>
+            <div className="workflow-entry-description">{wf.description}</div>
+            {wf.type === 'stepped' && (
+              <div className="workflow-entry-hint">/workflow start {wf.name}</div>
+            )}
+            <div className="workflow-entry-footer">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="workflow-start-button"
+                data-testid="workflow-start-button"
+                onClick={() => onStart?.(wf)}
+              >
+                Start
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// WorkflowPanel Component
+// =============================================================================
+
+export function WorkflowPanel(): React.ReactElement {
+  const { story, isLoading, error, availableWorkflows } = useStory();
+  const { send, isConnected } = useClaudeContext();
+
+  const handleStartWorkflow = useCallback((wf: AvailableWorkflow) => {
+    if (!isConnected) return;
+    send(`/workflow start ${wf.name}`);
+  }, [send, isConnected]);
+
+  if (isLoading) {
+    return (
+      <div className="workflow-panel loading" data-testid="workflow-panel">
+        <div className="space-y-2 p-2">
+          <Skeleton className="h-6 w-16 rounded-full" />
+          <div className="flex gap-2 items-center">
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-4 w-12" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="workflow-panel error" data-testid="workflow-panel">
+        <div className="error-message">{error.message}</div>
+      </div>
+    );
+  }
+
+  const workflowType = story?.workflow ?? null;
+  const phases = story?.workflowPhases ?? null;
+  const isStepped = story?.workflowType === 'stepped';
+
+  if (!workflowType && (!phases || phases.length === 0)) {
+    // MSSCI-14301: Show available workflows when no active workflow
+    if (availableWorkflows && availableWorkflows.length > 0) {
+      return (
+        <div className="workflow-panel" data-testid="workflow-panel">
+          <AvailableWorkflowsList workflows={availableWorkflows} onStart={handleStartWorkflow} />
+        </div>
+      );
+    }
+    return (
+      <div className="workflow-panel" data-testid="workflow-panel">
+        <div className="placeholder">No active workflow</div>
+      </div>
+    );
+  }
+
+  const formattedType = formatWorkflowType(workflowType);
+
+  return (
+    <div className="workflow-panel" data-testid="workflow-panel">
+      <div className="workflow-content">
+        <Badge variant="secondary" className="workflow-type-badge" data-workflow-type={workflowType || ''}>
+          {formattedType}
+        </Badge>
+
+        {phases && phases.length > 0 && (
+          isStepped ? (
+            <SteppedProgress phases={phases} />
+          ) : (
+            <div className="phase-progress">
+              {phases.map((phase, index) => (
+                <PhaseStep
+                  key={phase.name}
+                  phase={phase}
+                  isLast={index === phases.length - 1}
+                />
+              ))}
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default WorkflowPanel;

package/packages/core/src/public/components/panels/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Panel Components Index
+ *
+ * Story MSSCI-12717 - React Migration
+ * Story MSSCI-14188 - Split Progress panel into Workflow, AC, and Todo panels
+ */
+
+export { MessagePanel } from './MessagePanel';
+export { SprintPanel, EnhancedSprintPanel } from './SprintPanel';
+export { GitPanel } from './GitPanel';
+export { WorkflowPanel } from './WorkflowPanel';
+export { ACPanel } from './ACPanel';
+export { TodoPanel } from './TodoPanel';
+export { BackgroundPanel } from './BackgroundPanel';
+export { DiffsPanel } from './DiffsPanel';
+export { DiffView } from './DiffView';
+export { DebugPanel } from './DebugPanel';
+export { SettingsPanel } from './SettingsPanel';
+export { AuditLogPanel } from './AuditLogPanel';
+export { ProgressPanel } from './ProgressPanel';
+export { TandemPanel } from './TandemPanel';
+// Legacy exports - kept for backwards compatibility and tests
+export { AcceptanceCriteriaPanel, ConnectedAcceptanceCriteriaPanel } from './AcceptanceCriteriaPanel';
+export { BikeLanePanel, ConnectedBikeLanePanel } from './BikeLanePanel';