@pennyfarthing/cyclist 10.0.3 → 10.2.0

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

@@ -5,7 +5,8 @@
  * Story MSSCI-14189 - Enhanced Sprint Panel with story management and epic actions
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Check, Loader, Circle, AlertTriangle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -85,6 +86,21 @@ export function SprintPanel(): React.ReactElement {
 // Enhanced Sprint Panel (MSSCI-14189)
 // =============================================================================
 
+/**
+ * Format email to short display name: "keith.avery@..." -> "K. Avery"
+ */
+function formatAssignee(email: string | null | undefined): string | null {
+  if (!email) return null;
+  const local = email.split('@')[0];
+  const parts = local.split('.');
+  if (parts.length >= 2) {
+    const first = parts[0].charAt(0).toUpperCase();
+    const last = parts[parts.length - 1].charAt(0).toUpperCase() + parts[parts.length - 1].slice(1);
+    return `${first}. ${last}`;
+  }
+  return local;
+}
+
 /**
  * Calculate epic progress (done points / total points)
  */
@@ -106,17 +122,18 @@ function isEpicCompleted(epic: SprintEpic): boolean {
 /**
  * Get status badge content and class for a story status
  */
-function getStatusBadgeInfo(status: SprintStory['status']): { icon: string; className: string } {
+function getStatusBadgeInfo(status: SprintStory['status']): { icon: React.ReactElement; className: string } {
+  const size = 12;
   switch (status) {
     case 'done':
-      return { icon: '✓', className: 'status-done' };
+      return { icon: <Check size={size} />, className: 'status-done' };
     case 'in_progress':
-      return { icon: '●', className: 'status-in-progress' };
+      return { icon: <Loader size={size} />, className: 'status-in-progress' };
     case 'blocked':
-      return { icon: '⚠', className: 'status-blocked' };
+      return { icon: <AlertTriangle size={size} />, className: 'status-blocked' };
     case 'backlog':
     default:
-      return { icon: '○', className: 'status-backlog' };
+      return { icon: <Circle size={size} />, className: 'status-backlog' };
   }
 }
 
@@ -157,6 +174,23 @@ function ContextIndicator({
   );
 }
 
+/**
+ * Priority label component - muted text abbreviation
+ */
+function PriorityDot({ priority, storyId }: { priority?: string | null; storyId: string }): React.ReactElement | null {
+  if (!priority) return null;
+  return (
+    <span
+      className="priority-label"
+      data-testid={`story-priority-${storyId}`}
+      data-priority={priority}
+      title={priority}
+    >
+      {priority}
+    </span>
+  );
+}
+
 /**
  * Status badge component for stories
  */
@@ -182,12 +216,16 @@ function JiraLink({ jiraKey, storyId }: { jiraKey: string; storyId: string }): R
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     const url = getJiraUrl(jiraKey);
-    // Use electronAPI if available, otherwise open in new tab
-    if (typeof window !== 'undefined' && (window as any).electronAPI?.shell?.openExternal) {
-      (window as any).electronAPI.shell.openExternal(url);
-    } else {
-      window.open(url, '_blank');
+    try {
+      const api = (window as any).electronAPI;
+      if (api?.shell?.openExternal) {
+        api.shell.openExternal(url);
+        return;
+      }
+    } catch {
+      // electronAPI not available or call failed
     }
+    window.open(url, '_blank');
   };
 
   return (
@@ -202,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
  */
@@ -213,12 +403,19 @@ 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
+  // 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 && expandedEpics.size === 0) {
-      setExpandedEpics(new Set(data.epics.map((e) => e.id)));
+    if (data?.epics && !hasInitializedExpansion.current) {
+      hasInitializedExpansion.current = true;
+      setExpandedEpics(new Set(activeEpics.map((e) => e.id)));
     }
-  }, [data?.epics, expandedEpics.size]);
+  }, [data?.epics]);
 
   // Toggle epic expansion
   const toggleEpic = useCallback((epicId: string) => {
@@ -374,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">
@@ -384,116 +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';
-                      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}`}
-                        >
-                          <StatusBadge status={story.status} storyId={story.id} />
-                          {story.jiraKey && <JiraLink jiraKey={story.jiraKey} storyId={story.id} />}
-                          <span className="story-title">{story.title}</span>
-                          <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/components/panels/index.ts

@@ -18,7 +18,6 @@ export { DebugPanel } from './DebugPanel';
 export { SettingsPanel } from './SettingsPanel';
 export { AuditLogPanel } from './AuditLogPanel';
 export { TTYPanel } from './TTYPanel';
-export { HotspotsPanel } from './HotspotsPanel';
 
 // Legacy exports - kept for backwards compatibility and tests
 export { AcceptanceCriteriaPanel, ConnectedAcceptanceCriteriaPanel } from './AcceptanceCriteriaPanel';

package/src/public/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--border)] bg-card text-card-foreground p-6 shadow-2xl shadow-black/40 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-base font-medium leading-none tracking-tight",
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-[var(--text-secondary)]", className)}
     {...props}
   />
 ))

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

@@ -108,18 +108,12 @@
 
 /* =============================================================================
    Utility Classes for Theme Colors
-   ============================================================================= */
-
-/* Backgrounds */
-.bg-primary { background-color: var(--bg-primary); }
-.bg-secondary { background-color: var(--bg-secondary); }
-.bg-tertiary { background-color: var(--bg-tertiary); }
 
-/* Text */
-.text-primary { color: var(--text-primary); }
-.text-secondary { color: var(--text-secondary); }
-.text-muted { color: var(--text-muted); }
-.text-accent { color: var(--accent); }
+   NOTE: .bg-primary, .text-secondary, .text-muted etc. are generated by
+   Tailwind from tailwind.config.js. Do NOT duplicate them here — specificity
+   conflicts cause unpredictable results. Only define classes that Tailwind
+   does NOT generate (status colors, border-default, border-focus).
+   ============================================================================= */
 
 /* Status */
 .text-success { color: var(--status-success); }
@@ -541,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/index.ts

@@ -43,3 +43,7 @@ export type { UseMarkdownParserResult } from './useMarkdownParser';
 
 export { useSyntaxHighlighter } from './useSyntaxHighlighter';
 export type { UseSyntaxHighlighterResult } from './useSyntaxHighlighter';
+
+// Agent load analysis
+export { useAgentLoad } from './useAgentLoad';
+export type { AgentLoadData, AgentLoadEntry, PruneResult } from './useAgentLoad';