@pennyfarthing/cyclist 10.1.0 → 10.2.0

package/src/public/components/panels/SprintPanel.tsx

@@ -175,18 +175,19 @@ function ContextIndicator({
 }
 
 /**
- * Priority dot component - small color-coded circle
+ * Priority label component - muted text abbreviation
  */
 function PriorityDot({ priority, storyId }: { priority?: string | null; storyId: string }): React.ReactElement | null {
   if (!priority) return null;
-  const colorClass = priority === 'P0' ? 'priority-p0' : priority === 'P1' ? 'priority-p1' : 'priority-p2';
   return (
     <span
-      className={`priority-dot ${colorClass}`}
+      className="priority-label"
       data-testid={`story-priority-${storyId}`}
       data-priority={priority}
       title={priority}
-    />
+    >
+      {priority}
+    </span>
   );
 }
 
@@ -239,6 +240,158 @@ function JiraLink({ jiraKey, storyId }: { jiraKey: string; storyId: string }): R
   );
 }
 
+/**
+ * EpicGroup - Renders a single epic with its stories
+ */
+function EpicGroup({
+  epic,
+  isExpanded,
+  isArchiving,
+  onToggle,
+  onKeyDown,
+  onArchive,
+}: {
+  epic: SprintEpic;
+  isExpanded: boolean;
+  isArchiving: boolean;
+  onToggle: (id: string) => void;
+  onKeyDown: (id: string, e: React.KeyboardEvent) => void;
+  onArchive: (id: string) => void;
+}): React.ReactElement {
+  const { done, total } = calculateEpicProgress(epic);
+  const completed = isEpicCompleted(epic);
+
+  return (
+    <div
+      className={`epic-group ${completed ? 'epic-completed' : ''}`}
+      data-testid={`epic-group-${epic.id}`}
+    >
+      {/* Epic Header */}
+      <div className="epic-header">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="epic-toggle"
+          data-testid={`epic-toggle-${epic.id}`}
+          onClick={() => onToggle(epic.id)}
+          onKeyDown={(e) => onKeyDown(epic.id, e)}
+          aria-expanded={isExpanded}
+        >
+          {isExpanded ? '▼' : '▶'}
+        </Button>
+        <span className="epic-title">{epic.title}</span>
+        {epic.jiraKey && <span className="epic-jira">{epic.jiraKey}</span>}
+        <ContextIndicator hasContext={epic.hasContext ?? false} testIdPrefix="epic" id={epic.id} />
+        {completed && epic.hasContext && (
+          <Badge variant="default" className="epic-ready-badge" data-testid={`epic-ready-badge-${epic.id}`}>
+            Ready
+          </Badge>
+        )}
+
+        {/* Progress bar */}
+        <div
+          className="epic-progress"
+          data-testid={`epic-progress-${epic.id}`}
+          data-done={String(done)}
+          data-total={String(total)}
+        >
+          <div
+            className="progress-bar"
+            style={{ width: `${total > 0 ? (done / total) * 100 : 0}%` }}
+          />
+        </div>
+        <span
+          className="epic-progress-label"
+          data-testid={`epic-progress-label-${epic.id}`}
+        >
+          {done}/{total} pts
+        </span>
+
+        {/* Archive button for completed epics */}
+        {completed && (
+          <>
+            {isArchiving && (
+              <span data-testid={`archive-loading-${epic.id}`}>...</span>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              className="archive-button"
+              data-testid={`archive-button-${epic.id}`}
+              aria-label={`Archive ${epic.id}`}
+              disabled={isArchiving}
+              onClick={() => onArchive(epic.id)}
+            >
+              Archive
+            </Button>
+          </>
+        )}
+      </div>
+
+      {/* Stories list (collapsible) */}
+      {isExpanded && (
+        <div className="epic-stories">
+          {epic.stories.map((story) => {
+            const hasContext = story.hasContext ?? false;
+            const isBlocked = story.status === 'blocked';
+            const assigneeDisplay = formatAssignee(story.assignedTo);
+            return (
+              <div
+                key={story.id}
+                className={`story-item ${!hasContext ? 'missing-context' : ''} ${isBlocked ? 'story-blocked' : ''}`}
+                data-testid={`story-item-${story.id}`}
+                data-status={story.status}
+                data-story-id={story.id}
+                aria-label={`${story.id}: ${story.title}`}
+              >
+                <PriorityDot priority={story.priority} storyId={story.id} />
+                <StatusBadge status={story.status} storyId={story.id} />
+                {story.jiraKey && <JiraLink jiraKey={story.jiraKey} storyId={story.id} />}
+                <div className="story-info">
+                  <span className="story-title">{story.title}</span>
+                  <span className="story-meta">
+                    {assigneeDisplay && (
+                      <span
+                        className="story-assignee"
+                        data-testid={`story-assignee-${story.id}`}
+                      >
+                        {assigneeDisplay}
+                      </span>
+                    )}
+                    {story.workflow && (
+                      <span
+                        className="story-workflow-badge"
+                        data-testid={`story-workflow-${story.id}`}
+                      >
+                        {story.workflow}
+                      </span>
+                    )}
+                    {story.status === 'done' && story.completed && (
+                      <span
+                        className="story-completed-date"
+                        data-testid={`story-completed-${story.id}`}
+                      >
+                        {story.completed}
+                      </span>
+                    )}
+                  </span>
+                </div>
+                <ContextIndicator hasContext={hasContext} testIdPrefix="story" id={story.id} />
+                <span
+                  className="story-points"
+                  data-testid={`story-points-${story.id}`}
+                >
+                  {story.points}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 /**
  * EnhancedSprintPanel - Full sprint management with epic actions
  */
@@ -250,12 +403,17 @@ export function EnhancedSprintPanel(): React.ReactElement {
   const [confirmArchive, setConfirmArchive] = useState<string | null>(null);
   const [actionError, setActionError] = useState<Error | null>(null);
 
-  // Expand all epics by default when data first loads (once only)
+  // Split epics into active (has non-done stories) vs completed (all stories done)
+  const activeEpics = data?.epics.filter((e) => !isEpicCompleted(e)) ?? [];
+  const completedEpics = data?.epics.filter((e) => isEpicCompleted(e)) ?? [];
+
+  // Expand only active epics by default when data first loads (once only)
+  // Completed epics start collapsed
   const hasInitializedExpansion = useRef(false);
   useEffect(() => {
     if (data?.epics && !hasInitializedExpansion.current) {
       hasInitializedExpansion.current = true;
-      setExpandedEpics(new Set(data.epics.map((e) => e.id)));
+      setExpandedEpics(new Set(activeEpics.map((e) => e.id)));
     }
   }, [data?.epics]);
 
@@ -413,7 +571,7 @@ export function EnhancedSprintPanel(): React.ReactElement {
 
       <Separator className="my-2" />
 
-      {/* Section 2: Epic Tree View */}
+      {/* Section 2: Active Epics */}
       <section data-section="epics">
         <h2>Current Epics</h2>
         <div data-testid="epic-tree-view">
@@ -423,146 +581,43 @@ export function EnhancedSprintPanel(): React.ReactElement {
               <p className="hint">Promote an epic from Future Initiatives to get started</p>
             </div>
           )}
-          {data?.epics.map((epic) => {
-            const { done, total } = calculateEpicProgress(epic);
-            const completed = isEpicCompleted(epic);
-            const isExpanded = expandedEpics.has(epic.id);
-            const isArchiving = loadingActions.has(`archive-${epic.id}`);
-
-            return (
-              <div
-                key={epic.id}
-                className={`epic-group ${completed ? 'epic-completed' : ''}`}
-                data-testid={`epic-group-${epic.id}`}
-              >
-                {/* Epic Header */}
-                <div className="epic-header">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="epic-toggle"
-                    data-testid={`epic-toggle-${epic.id}`}
-                    onClick={() => toggleEpic(epic.id)}
-                    onKeyDown={(e) => handleEpicKeyDown(epic.id, e)}
-                    aria-expanded={isExpanded}
-                  >
-                    {isExpanded ? '▼' : '▶'}
-                  </Button>
-                  <span className="epic-title">{epic.title}</span>
-                  {epic.jiraKey && <span className="epic-jira">{epic.jiraKey}</span>}
-                  <ContextIndicator hasContext={epic.hasContext ?? false} testIdPrefix="epic" id={epic.id} />
-                  {completed && epic.hasContext && (
-                    <Badge variant="default" className="epic-ready-badge" data-testid={`epic-ready-badge-${epic.id}`}>
-                      Ready
-                    </Badge>
-                  )}
-
-                  {/* Progress bar */}
-                  <div
-                    className="epic-progress"
-                    data-testid={`epic-progress-${epic.id}`}
-                    data-done={String(done)}
-                    data-total={String(total)}
-                  >
-                    <div
-                      className="progress-bar"
-                      style={{ width: `${total > 0 ? (done / total) * 100 : 0}%` }}
-                    />
-                  </div>
-                  <span
-                    className="epic-progress-label"
-                    data-testid={`epic-progress-label-${epic.id}`}
-                  >
-                    {done}/{total} pts
-                  </span>
-
-                  {/* Archive button for completed epics */}
-                  {completed && (
-                    <>
-                      {isArchiving && (
-                        <span data-testid={`archive-loading-${epic.id}`}>...</span>
-                      )}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="archive-button"
-                        data-testid={`archive-button-${epic.id}`}
-                        aria-label={`Archive ${epic.id}`}
-                        disabled={isArchiving}
-                        onClick={() => setConfirmArchive(epic.id)}
-                      >
-                        Archive
-                      </Button>
-                    </>
-                  )}
-                </div>
-
-                {/* Stories list (collapsible) */}
-                {isExpanded && (
-                  <div className="epic-stories">
-                    {epic.stories.map((story) => {
-                      const hasContext = story.hasContext ?? false;
-                      const isBlocked = story.status === 'blocked';
-                      const assigneeDisplay = formatAssignee(story.assignedTo);
-                      return (
-                        <div
-                          key={story.id}
-                          className={`story-item ${!hasContext ? 'missing-context' : ''} ${isBlocked ? 'story-blocked' : ''}`}
-                          data-testid={`story-item-${story.id}`}
-                          data-status={story.status}
-                          data-story-id={story.id}
-                          aria-label={`${story.id}: ${story.title}`}
-                        >
-                          <PriorityDot priority={story.priority} storyId={story.id} />
-                          <StatusBadge status={story.status} storyId={story.id} />
-                          {story.jiraKey && <JiraLink jiraKey={story.jiraKey} storyId={story.id} />}
-                          <div className="story-info">
-                            <span className="story-title">{story.title}</span>
-                            <span className="story-meta">
-                              {assigneeDisplay && (
-                                <span
-                                  className="story-assignee"
-                                  data-testid={`story-assignee-${story.id}`}
-                                >
-                                  {assigneeDisplay}
-                                </span>
-                              )}
-                              {story.workflow && (
-                                <span
-                                  className="story-workflow-badge"
-                                  data-testid={`story-workflow-${story.id}`}
-                                >
-                                  {story.workflow}
-                                </span>
-                              )}
-                              {story.status === 'done' && story.completed && (
-                                <span
-                                  className="story-completed-date"
-                                  data-testid={`story-completed-${story.id}`}
-                                >
-                                  {story.completed}
-                                </span>
-                              )}
-                            </span>
-                          </div>
-                          <ContextIndicator hasContext={hasContext} testIdPrefix="story" id={story.id} />
-                          <span
-                            className="story-points"
-                            data-testid={`story-points-${story.id}`}
-                          >
-                            {story.points}
-                          </span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            );
-          })}
+          {activeEpics.map((epic) => (
+            <EpicGroup
+              key={epic.id}
+              epic={epic}
+              isExpanded={expandedEpics.has(epic.id)}
+              isArchiving={loadingActions.has(`archive-${epic.id}`)}
+              onToggle={toggleEpic}
+              onKeyDown={handleEpicKeyDown}
+              onArchive={setConfirmArchive}
+            />
+          ))}
         </div>
       </section>
 
+      {/* Section 2b: Completed Epics */}
+      {completedEpics.length > 0 && (
+        <>
+          <Separator className="my-2" />
+          <section data-section="completed-epics">
+            <h2>Completed Epics</h2>
+            <div data-testid="completed-epics-section">
+              {completedEpics.map((epic) => (
+                <EpicGroup
+                  key={epic.id}
+                  epic={epic}
+                  isExpanded={expandedEpics.has(epic.id)}
+                  isArchiving={loadingActions.has(`archive-${epic.id}`)}
+                  onToggle={toggleEpic}
+                  onKeyDown={handleEpicKeyDown}
+                  onArchive={setConfirmArchive}
+                />
+              ))}
+            </div>
+          </section>
+        </>
+      )}
+
       <Separator className="my-2" />
 
       {/* Section 3: Future Initiatives */}

package/src/public/css/theme-system.css

@@ -535,3 +535,96 @@
 .tool-stack-content .tool-historical {
   opacity: 0.85;
 }
+
+/* =============================================================================
+   ACPanel Styling (MSSCI-14763) - Tufte Treatment
+   ============================================================================= */
+
+/* Panel container */
+.ac-panel {
+  padding: 0.5rem;
+}
+
+/* Content wrapper — Tufte left border accent */
+.ac-content {
+  border-left: 2px solid var(--border);
+  padding-left: 0.5rem;
+  transition: border-color 0.15s ease;
+}
+
+.ac-content:hover {
+  border-left-color: var(--accent);
+}
+
+/* Progress counter — above the bar, not overlaid */
+.ac-panel .progress-text {
+  font-size: 0.6875rem;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+  margin-bottom: 0.25rem;
+  display: block;
+}
+
+/* Progress bar — Tufte: thin line, no rounded corners */
+.ac-panel .progress-bar-container {
+  position: relative;
+  height: 4px;
+  background: var(--border);
+  border-radius: 0;
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+}
+
+.ac-panel .progress-bar {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 0;
+  transition: width 0.3s ease;
+}
+
+/* Criteria list */
+.ac-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+/* Individual criterion */
+.ac-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  padding: 0.125rem 0;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+}
+
+.ac-item.ac-done {
+  color: var(--text-muted);
+}
+
+/* Status icon */
+.ac-icon {
+  width: 1rem;
+  text-align: center;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.ac-done .ac-icon {
+  color: var(--status-success);
+}
+
+/* Criterion text */
+.ac-text {
+  flex: 1;
+  min-width: 0;
+  line-height: 1.4;
+}
+
+.ac-done .ac-text {
+  text-decoration: line-through;
+  text-decoration-color: var(--text-muted);
+}

package/src/public/hooks/useHealthScore.ts

@@ -18,17 +18,16 @@ export interface UseHealthScoreReturn {
   data: HealthScoreData | null;
   isLoading: boolean;
   error: Error | null;
+  lastFetchedAt: number | null;
   refresh: () => void;
 }
 
-const POLL_INTERVAL = 60_000;
-
 export function useHealthScore(): UseHealthScoreReturn {
   const [data, setData] = useState<HealthScoreData | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const [lastFetchedAt, setLastFetchedAt] = useState<number | null>(null);
   const abortRef = useRef<AbortController | null>(null);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   const refresh = useCallback(() => {
     if (abortRef.current) {
@@ -50,6 +49,7 @@ export function useHealthScore(): UseHealthScoreReturn {
       })
       .then((json: HealthScoreData) => {
         setData(json);
+        setLastFetchedAt(Date.now());
         setIsLoading(false);
       })
       .catch((err) => {
@@ -59,19 +59,11 @@ export function useHealthScore(): UseHealthScoreReturn {
       });
   }, []);
 
-  // Auto-poll on mount
   useEffect(() => {
-    intervalRef.current = setInterval(refresh, POLL_INTERVAL);
-
     return () => {
-      if (abortRef.current) {
-        abortRef.current.abort();
-      }
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
+      abortRef.current?.abort();
     };
-  }, [refresh]);
+  }, []);
 
-  return { data, isLoading, error, refresh };
+  return { data, isLoading, error, lastFetchedAt, refresh };
 }

package/src/public/hooks/usePersona.ts

@@ -13,22 +13,33 @@
 
 import { useState, useEffect, useRef } from 'react';
 
+export interface TandemAgentData {
+  character: string;
+  role: string;
+  slug: string;
+  theme: string;
+  isThinking: boolean;
+}
+
 export interface PersonaData {
   character: string | null;
   theme: string | null;
   role: string | null;
   slug: string | null;
   quote: string | null;  // Random catchphrase from theme
+  tandemAgent?: TandemAgentData | null;
 }
 
 interface UsePersonaResult {
   persona: PersonaData | null;
+  isStreaming: boolean;
   isLoading: boolean;
   error: Error | null;
 }
 
 export function usePersona(): UsePersonaResult {
   const [persona, setPersona] = useState<PersonaData | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
@@ -48,8 +59,19 @@ export function usePersona(): UsePersonaResult {
 
         wsRef.current.onmessage = (event) => {
           try {
-            const data = JSON.parse(event.data) as PersonaData;
-            setPersona(data);
+            const data = JSON.parse(event.data);
+
+            // Story 94-1: Handle streaming state updates
+            if (data.type === 'streaming') {
+              setIsStreaming(data.isStreaming ?? false);
+              return;
+            }
+
+            // Persona data (initial or agent change) — extract isStreaming if present
+            if (data.isStreaming !== undefined) {
+              setIsStreaming(data.isStreaming);
+            }
+            setPersona(data as PersonaData);
             setIsLoading(false);
             setError(null);
           } catch (err) {
@@ -59,6 +81,7 @@ export function usePersona(): UsePersonaResult {
 
         wsRef.current.onclose = () => {
           console.debug('[usePersona] WebSocket closed, reconnecting...');
+          setIsStreaming(false);
           reconnectTimeoutRef.current = setTimeout(connect, 2000);
         };
 
@@ -85,5 +108,5 @@ export function usePersona(): UsePersonaResult {
     };
   }, []);
 
-  return { persona, isLoading, error };
+  return { persona, isStreaming, isLoading, error };
 }

package/src/public/hooks/useSprint.ts

@@ -100,7 +100,7 @@ export function useSprint(): UseSprintResult {
             const msg = JSON.parse(event.data) as SprintMessage;
             if (msg.type === 'init' || msg.type === 'update') {
               // Extract data, excluding type field
-              const { type, ...sprintData } = msg;
+              const { type: _type, ...sprintData } = msg;
               setData((prev) => {
                 if (!prev) return sprintData as SprintData;
                 // Merge partial updates