@pennyfarthing/cyclist 10.0.3 → 10.2.0

package/src/public/hooks/useSprint.ts

@@ -20,6 +20,12 @@ export interface SprintStory {
   status: 'backlog' | 'in_progress' | 'done' | 'cancelled' | 'blocked';
   jiraKey: string | null;
   hasContext?: boolean;
+  assignedTo?: string | null;
+  completed?: string | null;
+  started?: string | null;
+  workflow?: string | null;
+  priority?: string | null;
+  description?: string | null;
 }
 
 export interface SprintEpic {
@@ -94,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

package/src/public/styles/tailwind.css

@@ -7,6 +7,19 @@
    Docking Workspace Styles
    ============================================================================= */
 
+/* Screen reader only — visually hidden but accessible */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .cyclist-app {
   position: absolute;
   top: 0;
@@ -266,6 +279,8 @@
   border-bottom: 1px solid var(--border-color, #3c3c3c);
   flex-shrink: 0;
   position: relative;
+  overflow: visible;
+  min-width: 0;
 }
 
 .persona-header.empty {
@@ -287,10 +302,23 @@
   outline-offset: 2px;
 }
 
-/* Portrait group: portrait + badge positioned together */
+/* Portrait group: portrait + tandem positioned together */
 .persona-portrait-group {
-  position: relative;
+  container-type: inline-size;
+  container-name: portrait-group;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
   flex-shrink: 0;
+  width: 100px;
+}
+
+/* Container query: hide backseat portrait when panel is narrow */
+@container portrait-group (max-width: 180px) {
+  .persona-tandem-portrait {
+    display: none;
+  }
 }
 
 .persona-portrait {
@@ -299,6 +327,9 @@
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
+  min-width: 48px;
+  min-height: 48px;
+  aspect-ratio: 1;
   background: var(--bg-tertiary, #2d2d2d);
   display: flex;
   align-items: center;
@@ -333,8 +364,10 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  min-width: 0;
   flex: 1;
+  min-width: 0;
+  width: 0;
+  overflow: hidden;
 }
 
 .persona-branding {
@@ -356,10 +389,48 @@
   font-size: 1.2rem;
 }
 
+.persona-header.compact .persona-tandem-portrait {
+  display: none;
+}
+
 .persona-header.compact .persona-branding {
   height: 32px;
 }
 
+/* Tandem portrait: backseat agent below primary (Story 96-1) */
+.persona-tandem-portrait {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  opacity: 0.55;
+  transition: opacity 300ms ease-in-out;
+  position: relative;
+  overflow: hidden;
+}
+
+.persona-tandem-portrait .tandem-portrait-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.persona-tandem-portrait .tandem-portrait-fallback {
+  font-size: 1.2rem;
+}
+
+.tandem-role-badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent-color, #007acc);
+  color: #fff;
+}
+
 .persona-header.compact .persona-catchphrase {
   display: none;
 }
@@ -391,18 +462,25 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 
 .persona-character {
   font-weight: 600;
   color: var(--text-primary, #d4d4d4);
   font-size: 0.95rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .persona-theme {
   color: var(--text-secondary, #8b8b8b);
   font-size: 0.8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .persona-catchphrase {
@@ -429,10 +507,25 @@
   min-height: 0;
 }
 
+.message-panel-resize-handle {
+  height: 4px;
+  flex-shrink: 0;
+  cursor: row-resize;
+  background: var(--border-color, #3c3c3c);
+  transition: background 0.15s ease;
+}
+
+.message-panel-resize-handle:hover {
+  background: var(--accent-color, #007acc);
+}
+
 .message-panel-editor {
   flex-shrink: 0;
-  border-top: 1px solid var(--border-color, #3c3c3c);
   background: var(--bg-secondary, #252526);
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  min-height: 120px;
 }
 
 /* Message View - the conversation area */
@@ -616,6 +709,7 @@
   gap: 0.5rem;
   padding: 0.25rem 0;
   margin-bottom: 0.25rem;
+  padding-left: 2.75rem; /* align with message content: avatar 2rem + gap 0.75rem */
 }
 
 .turn-speaker {
@@ -752,6 +846,54 @@
   animation: avatar-throb 1.2s ease-in-out infinite;
 }
 
+/* Backseat thinking indicator - subtler throb for tandem portrait */
+@keyframes tandem-throb {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--accent-color, #007acc);
+  }
+  50% {
+    transform: scale(1.04);
+    box-shadow: 0 0 6px 1px var(--accent-color, #007acc);
+  }
+}
+
+.avatar-tandem-thinking {
+  animation: tandem-throb 1.8s ease-in-out infinite;
+}
+
+/* Observation pulse - one-shot on primary portrait when backseat observation injected */
+@keyframes observation-pulse {
+  0% {
+    box-shadow: 0 0 12px 4px var(--accent-color, #007acc);
+  }
+  100% {
+    box-shadow: 0 0 0 0 var(--accent-color, #007acc);
+  }
+}
+
+.avatar-observation-pulse {
+  animation: observation-pulse 600ms ease-out 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .avatar-thinking {
+    animation: none;
+    opacity: 0.85;
+    border: 2px solid var(--accent-color, #007acc);
+  }
+  .avatar-tandem-thinking {
+    animation: none;
+    opacity: 0.85;
+    border: 2px solid var(--accent-color, #007acc);
+  }
+  .avatar-observation-pulse {
+    animation: none;
+    opacity: 0.9;
+    border: 2px solid var(--accent-color, #007acc);
+  }
+}
+
 .message-avatar.avatar-fallback::after {
   content: '🤖';
   font-size: 1.25rem;
@@ -958,7 +1100,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  flex: 1;
   color: var(--text-secondary, #8b8b8b);
   font-size: 0.875rem;
   text-align: center;
@@ -986,12 +1128,15 @@
 .editor-with-controls {
   display: flex;
   gap: 8px;
-  align-items: flex-end;
+  align-items: stretch;
+  height: 100%;
 }
 
 .editor-area {
   flex: 1;
   min-width: 0; /* Prevent overflow */
+  display: flex;
+  flex-direction: column;
 }
 
 .editor-container {
@@ -999,6 +1144,7 @@
   flex-direction: column;
   padding: 8px;
   min-width: 0; /* Prevent overflow */
+  flex: 1;
 }
 
 .mode-toolbar {
@@ -1032,12 +1178,15 @@
 .editor-wrapper {
   position: relative;
   min-width: 0; /* Prevent overflow */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .editor-textarea {
   width: 100%;
   min-height: 60px;
-  max-height: 200px;
+  flex: 1;
   padding: 8px;
   background: var(--bg-primary, #1e1e1e);
   border: 1px solid var(--border-color, #3c3c3c);
@@ -1181,6 +1330,7 @@
   gap: 4px;
   padding: 8px;
   flex-shrink: 0;
+  align-self: flex-end;
 }
 
 .btn-stop {
@@ -1396,6 +1546,16 @@
   opacity: 0.7;
 }
 
+/* Completed Epics Section */
+.enhanced-sprint-panel [data-section="completed-epics"] .epic-group {
+  opacity: 0.5;
+  border-color: var(--border-color, #3c3c3c);
+}
+
+.enhanced-sprint-panel [data-section="completed-epics"] .epic-group:hover {
+  opacity: 0.7;
+}
+
 /* Epic Header */
 .enhanced-sprint-panel .epic-header {
   display: flex;
@@ -1510,15 +1670,59 @@
   background: var(--bg-hover, rgba(255, 255, 255, 0.03));
 }
 
-.enhanced-sprint-panel .story-item .story-title {
+.enhanced-sprint-panel .story-item .story-info {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.enhanced-sprint-panel .story-item .story-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.75rem;
 }
 
+.enhanced-sprint-panel .story-item .story-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.enhanced-sprint-panel .story-item .story-assignee {
+  font-size: 0.625rem;
+  color: var(--text-tertiary, #6b6b6b);
+  font-style: italic;
+}
+
+.enhanced-sprint-panel .story-item .story-workflow-badge {
+  font-size: 0.5625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary, #8b8b8b);
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.enhanced-sprint-panel .story-item .story-completed-date {
+  font-size: 0.625rem;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-tertiary, #6b6b6b);
+}
+
+.enhanced-sprint-panel .story-item .priority-label {
+  font-size: 0.6rem;
+  font-weight: 500;
+  color: var(--text-tertiary, #6b6b6b);
+  flex-shrink: 0;
+  opacity: 0.7;
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
 .enhanced-sprint-panel .story-item .story-points {
   font-size: 0.65rem;
   color: var(--text-secondary, #8b8b8b);
@@ -1791,42 +1995,41 @@
   margin-bottom: 4px;
 }
 
-/* Develop behind warning */
-.git-panel .develop-behind-warning {
+/* Develop-behind indicator */
+.git-panel .develop-behind {
+  color: var(--status-warning, #cca700);
+}
+
+/* Sync all repos action bar */
+.git-panel .git-panel-actions {
+  padding: 0 0 4px;
+}
+
+.git-panel .sync-all-btn {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  padding: 6px 8px;
-  margin-bottom: 8px;
-  background: rgba(204, 167, 0, 0.15);
-  border: 1px solid var(--warning-color, #cca700);
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.08));
   border-radius: 4px;
+  background: var(--bg-tertiary, #2d2d2d);
+  color: var(--text-secondary, #8b8b8b);
   font-size: 0.75rem;
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
-.git-panel .develop-behind-warning .warning-icon {
-  flex-shrink: 0;
-}
-
-.git-panel .develop-behind-warning .warning-text {
-  flex: 1;
-  color: var(--warning-color, #cca700);
-}
-
-.git-panel .develop-behind-warning .pull-develop-btn {
-  padding: 2px 8px;
-  background: var(--warning-color, #cca700);
-  color: #000;
-  border: none;
-  border-radius: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  cursor: pointer;
-  text-transform: uppercase;
+.git-panel .sync-all-btn:hover {
+  background: var(--bg-hover, #3d3d3d);
+  color: var(--text-primary, #e0e0e0);
+  border-color: var(--accent-color, #007acc);
 }
 
-.git-panel .develop-behind-warning .pull-develop-btn:hover {
-  opacity: 0.9;
+.git-panel .sync-all-btn:active {
+  background: var(--bg-active, #4d4d4d);
 }
 
 .git-panel .repo-status .file-status {
@@ -2196,38 +2399,6 @@
   padding: 8px 0;
 }
 
-/* AC content within Progress panel */
-.ac-content {
-  padding: 4px 0;
-}
-
-.ac-content .ac-list {
-  margin-top: 8px;
-}
-
-.ac-content .ac-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 4px 0;
-  font-size: 0.8rem;
-  color: var(--text-primary, #d4d4d4);
-}
-
-.ac-content .ac-item.ac-done {
-  color: var(--success-color, #4ec9b0);
-}
-
-.ac-content .ac-icon {
-  flex-shrink: 0;
-  width: 14px;
-}
-
-.ac-content .ac-text {
-  flex: 1;
-  line-height: 1.3;
-}
-
 /* Todo content wrapper */
 .todo-content {
   padding: 4px 0;
@@ -2457,6 +2628,17 @@
   background: var(--accent-color, #007acc);
 }
 
+.context-sparkline {
+  width: 100%;
+  height: 32px;
+  margin: 4px 0;
+}
+
+.context-sparkline svg {
+  width: 100%;
+  height: 100%;
+}
+
 .debug-panel .context-text {
   font-size: 0.75rem;
   color: var(--text-primary, #d4d4d4);
@@ -2626,6 +2808,84 @@
   font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
 }
 
+/* HealthGauge header and controls */
+
+.health-gauge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+
+.health-gauge-age {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.health-gauge-error {
+  font-size: 0.75rem;
+  color: var(--color-danger, #ef4444);
+}
+
+/* HealthGauge SVG */
+
+[data-testid="health-gauge"] svg {
+  display: block;
+  margin: 0 auto;
+}
+
+/* HealthGauge dimension breakdown */
+
+.health-gauge-partial {
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+
+.health-gauge-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--border);
+}
+
+.health-gauge-dimension {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+.health-gauge-dimension:hover {
+  background: var(--border);
+}
+
+.dimension-label {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.15s, color 0.15s;
+}
+
+.health-gauge-dimension:hover .dimension-label {
+  text-decoration-color: currentColor;
+  color: var(--text-primary);
+}
+
+.dimension-score {
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-primary);
+}
+
 /* Settings panel */
 .settings-panel {
   padding: 8px;
@@ -3998,6 +4258,54 @@
   margin-bottom: 4px;
 }
 
+/* Agent Quick Picker (MSSCI-14762) */
+.agent-quick-picker-wrapper {
+  position: relative;
+}
+
+.agent-quick-picker-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  min-width: 120px;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--bg-secondary, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  padding: 4px;
+}
+
+.agent-quick-picker-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.agent-quick-picker-option:hover {
+  background: var(--bg-hover, #3c3c3c);
+}
+
+.agent-quick-picker-option.current {
+  background: var(--bg-tertiary, #2d2d2d);
+  border-left: 2px solid var(--accent, #007acc);
+}
+
+.agent-option-role {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  color: var(--text-secondary, #8b8b8b);
+  min-width: 64px;
+}
+
+
 .btn-toggle {
   display: flex;
   align-items: center;
@@ -4017,15 +4325,13 @@
   border-color: var(--text-secondary, #8b8b8b);
 }
 
-.btn-toggle .toggle-icon {
-  font-size: 1rem;
-  line-height: 1;
-  filter: grayscale(100%) opacity(0.5);
-  transition: filter 0.15s ease;
+.btn-toggle svg {
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
 }
 
-.btn-toggle:hover .toggle-icon {
-  filter: grayscale(50%) opacity(0.8);
+.btn-toggle:hover svg {
+  opacity: 0.8;
 }
 
 /* Bell mode active */
@@ -4034,8 +4340,8 @@
   border-color: var(--color-warning, #f59e0b);
 }
 
-.btn-toggle.bell-toggle.active .toggle-icon {
-  filter: none;
+.btn-toggle.bell-toggle.active svg {
+  opacity: 1;
 }
 
 /* Relay mode active */
@@ -4044,8 +4350,8 @@
   border-color: var(--color-purple, #8b5cf6);
 }
 
-.btn-toggle.relay-toggle.active .toggle-icon {
-  filter: none;
+.btn-toggle.relay-toggle.active svg {
+  opacity: 1;
 }
 
 /* Active toggle colors (no animation - too distracting) */
@@ -4063,8 +4369,8 @@
   border-color: var(--color-cyan, #06b6d4);
 }
 
-.btn-toggle.pump-toggle .toggle-icon {
-  filter: none;
+.btn-toggle.pump-toggle svg {
+  opacity: 1;
 }
 
 /* TirePump warning state at 70%+ context */
@@ -4074,8 +4380,8 @@
   animation: pump-pulse 1.5s ease-in-out infinite;
 }
 
-.btn-toggle.pump-toggle.warning .toggle-icon {
-  filter: none;
+.btn-toggle.pump-toggle.warning svg {
+  opacity: 1;
 }
 
 @keyframes pump-pulse {