@pennyfarthing/cyclist 9.3.0 → 10.0.0

package/src/public/hooks/usePlanModeExit.ts

@@ -0,0 +1,105 @@
+/**
+ * usePlanModeExit - Smooth plan mode exit with tirepump choice
+ *
+ * Story: MSSCI-14327
+ *
+ * Handles the transition from plan mode to accept mode after plan approval,
+ * and offers the user a choice to tirepump (commit/push) changes.
+ */
+
+import { useState, useCallback } from 'react';
+import type { Mode } from '../components/ModeSwitch/index';
+
+/** The Claude CLI mode to transition to after plan exit */
+export const PLAN_EXIT_MODE = 'acceptEdits';
+
+export interface PlanModeExitOptions {
+  currentMode: Mode;
+  setMode: (mode: Mode) => void;
+  approved: boolean;
+  wsConnected?: boolean;
+}
+
+export interface TirepumpOption {
+  action: 'tirepump' | 'continue';
+  label: string;
+}
+
+export interface PlanModeExitResult {
+  showTirepumpChoice: boolean;
+  options?: TirepumpOption[];
+  localOnly?: boolean;
+}
+
+export interface TirepumpChoiceOptions {
+  choice: 'tirepump' | 'continue';
+  currentAgent?: string;
+  setMode?: (mode: Mode) => void;
+  onContextClear?: (data: { agent: string }) => void;
+}
+
+export interface TirepumpChoiceResult {
+  contextCleared: boolean;
+  action: 'tirepump' | 'continue';
+}
+
+const TIREPUMP_OPTIONS: TirepumpOption[] = [
+  { action: 'tirepump', label: 'Commit & push changes' },
+  { action: 'continue', label: 'Continue without committing' },
+];
+
+export async function handlePlanModeExit(
+  options: PlanModeExitOptions
+): Promise<PlanModeExitResult> {
+  const { currentMode, setMode, approved, wsConnected } = options;
+
+  if (!approved) {
+    return { showTirepumpChoice: false };
+  }
+
+  // Transition from plan to accept if not already there
+  if (currentMode !== 'accept') {
+    setMode('accept');
+  }
+
+  const localOnly = wsConnected === false;
+
+  return {
+    showTirepumpChoice: true,
+    options: TIREPUMP_OPTIONS,
+    ...(localOnly && { localOnly: true }),
+  };
+}
+
+export async function handleTirepumpChoice(
+  options: TirepumpChoiceOptions
+): Promise<TirepumpChoiceResult> {
+  const { choice, currentAgent, onContextClear } = options;
+
+  if (choice === 'tirepump') {
+    onContextClear?.({ agent: currentAgent ?? '' });
+    return { contextCleared: true, action: 'tirepump' };
+  }
+
+  return { contextCleared: false, action: 'continue' };
+}
+
+export function usePlanModeExit() {
+  const [showChoice, setShowChoice] = useState(false);
+  const [exitResult, setExitResult] = useState<PlanModeExitResult | null>(null);
+
+  const exitPlanMode = useCallback(async (options: PlanModeExitOptions) => {
+    const result = await handlePlanModeExit(options);
+    setExitResult(result);
+    setShowChoice(result.showTirepumpChoice);
+    return result;
+  }, []);
+
+  const chooseTirepump = useCallback(async (options: TirepumpChoiceOptions) => {
+    const result = await handleTirepumpChoice(options);
+    setShowChoice(false);
+    return result;
+  }, []);
+
+  return { showChoice, exitResult, exitPlanMode, chooseTirepump };
+}

package/src/public/hooks/useStory.ts

@@ -11,7 +11,7 @@
 import { useState, useEffect, useRef } from 'react';
 
 // Import types from story-parser for criteria and workflow
-import type { CriteriaItem, WorkflowPhase } from '../../../story-parser.js';
+import type { CriteriaItem, WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
 
 export interface StoryData {
   id: string;
@@ -24,15 +24,19 @@ export interface StoryData {
   // MSSCI-12849: AC and BikeLane panel data
   criteria?: CriteriaItem[] | null;
   workflowPhases?: WorkflowPhase[] | null;
+  // MSSCI-14300: Distinguish phased vs stepped workflow rendering
+  workflowType?: string;
 }
 
 // Re-export types for panel components
-export type { CriteriaItem, WorkflowPhase };
+export type { CriteriaItem, WorkflowPhase, AvailableWorkflow };
 
 interface UseStoryResult {
   story: StoryData | null;
   isLoading: boolean;
   error: Error | null;
+  // MSSCI-14301: Available workflows for discovery panel
+  availableWorkflows: AvailableWorkflow[] | null;
 }
 
 /** WebSocket message format from /ws/story */
@@ -44,7 +48,9 @@ interface StoryMessage {
   status?: string | null;
   points?: number | null;
   workflow?: WorkflowPhase[] | null;
+  workflowType?: string | null;
   criteria?: CriteriaItem[] | null;
+  availableWorkflows?: AvailableWorkflow[] | null;
   [key: string]: unknown;
 }
 
@@ -59,6 +65,7 @@ function transformMessage(msg: StoryMessage): StoryData | null {
     points: msg.points ?? undefined,
     criteria: msg.criteria,
     workflowPhases: msg.workflow,
+    workflowType: msg.workflowType ?? undefined,
   };
 }
 
@@ -66,6 +73,7 @@ export function useStory(): UseStoryResult {
   const [story, setStory] = useState<StoryData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  const [availableWorkflows, setAvailableWorkflows] = useState<AvailableWorkflow[] | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -86,6 +94,7 @@ export function useStory(): UseStoryResult {
             const msg = JSON.parse(event.data) as StoryMessage;
             if (msg.type === 'init' || msg.type === 'update') {
               setStory(transformMessage(msg));
+              setAvailableWorkflows(msg.availableWorkflows ?? null);
               setIsLoading(false);
               setError(null);
             }
@@ -122,5 +131,5 @@ export function useStory(): UseStoryResult {
     };
   }, []);
 
-  return { story, isLoading, error };
+  return { story, isLoading, error, availableWorkflows };
 }

package/src/public/styles/dockview-theme.css

@@ -21,7 +21,7 @@
   /* Dockview CSS variable mappings to Cyclist theme */
   --dv-group-view-background-color: var(--bg-secondary, #0f0f1a);
   --dv-tabs-and-actions-container-background-color: var(--bg-tertiary, #1a1a2e);
-  --dv-activegroup-visiblepanel-tab-background-color: var(--accent-color, #6366f1);
+  --dv-activegroup-visiblepanel-tab-background-color: var(--accent, #6366f1);
   --dv-activegroup-visiblepanel-tab-color: var(--text-primary, #ffffff);
   --dv-activegroup-hiddenpanel-tab-background-color: var(--bg-tertiary, #1a1a2e);
   --dv-activegroup-hiddenpanel-tab-color: var(--text-secondary, #a1a1aa);
@@ -29,11 +29,11 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--text-secondary, #a1a1aa);
   --dv-inactivegroup-hiddenpanel-tab-background-color: var(--bg-tertiary, #1a1a2e);
   --dv-inactivegroup-hiddenpanel-tab-color: var(--text-muted, #71717a);
-  --dv-separator-border: var(--border-color, #27272a);
-  --dv-paneview-header-border-color: var(--border-color, #27272a);
+  --dv-separator-border: var(--border, #27272a);
+  --dv-paneview-header-border-color: var(--border, #27272a);
   --dv-tab-close-icon: var(--text-muted, #71717a);
   --dv-drag-over-background-color: rgba(99, 102, 241, 0.2);
-  --dv-drag-over-border-color: var(--accent-color, #6366f1);
+  --dv-drag-over-border-color: var(--accent, #6366f1);
 }
 
 .dockview-container {
@@ -70,12 +70,12 @@
 }
 
 .cyclist-dockview .dv-tab:hover {
-  background-color: var(--bg-hover, #27272a);
+  background-color: var(--bg-tertiary, #27272a);
 }
 
 /* Active tab indicator */
 .cyclist-dockview .dv-tab.dv-active-tab {
-  border-bottom: 2px solid var(--accent-color, #6366f1);
+  border-bottom: 2px solid var(--accent, #6366f1);
 }
 
 /* Tab close button */
@@ -93,13 +93,11 @@
    ============================================================================= */
 
 .cyclist-dockview .dv-group-panel {
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
 }
 
-/* Message panel - hide close button (sacred, cannot be closed) */
-.cyclist-dockview .dv-tab[data-panel-id="message"] .dv-close-action {
-  display: none !important;
-}
+/* Message panel tab bar is hidden via Dockview API (group.headerVisible = false)
+   in DockviewWorkspace.tsx - no CSS selector needed */
 
 /* =============================================================================
    Resize Sash Styles
@@ -111,11 +109,11 @@
 }
 
 .cyclist-dockview .dv-resize-container .dv-sash:hover {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
 }
 
 .cyclist-dockview .dv-resize-container .dv-sash:active {
-  background-color: var(--accent-color-bright, #818cf8);
+  background-color: var(--accent-hover, #818cf8);
 }
 
 /* =============================================================================
@@ -151,12 +149,12 @@
 
 /* Focus indicators */
 .cyclist-dockview .dv-tab:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
   outline-offset: -2px;
 }
 
 .cyclist-dockview .dv-sash:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
 }
 
 /* Reduced motion */
@@ -206,7 +204,7 @@
   padding: 4px 8px;
   margin: 4px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 4px;
   color: var(--text-secondary, #a1a1aa);
   font-size: 12px;
@@ -215,9 +213,9 @@
 }
 
 .cyclist-dockview .dv-tabs-overflow-dropdown-default:hover {
-  background-color: var(--bg-hover, #27272a);
+  background-color: var(--bg-tertiary, #27272a);
   color: var(--text-primary, #ffffff);
-  border-color: var(--accent-color, #6366f1);
+  border-color: var(--accent, #6366f1);
 }
 
 /* Overflow dropdown container (list of hidden tabs) */
@@ -229,7 +227,7 @@
   max-height: 300px;
   overflow-y: auto;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 1000;
@@ -249,12 +247,12 @@
 }
 
 .cyclist-dockview .dv-tabs-overflow-container .dv-tab:hover {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   color: var(--text-primary, #ffffff);
 }
 
 .cyclist-dockview .dv-tabs-overflow-container .dv-tab:not(:last-child) {
-  border-bottom: 1px solid var(--border-color, #27272a);
+  border-bottom: 1px solid var(--border, #27272a);
 }
 
 /* =============================================================================
@@ -293,7 +291,7 @@
   gap: 4px;
   padding: 6px 10px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 6px;
   color: var(--text-secondary, #a1a1aa);
   cursor: pointer;
@@ -302,9 +300,9 @@
 }
 
 .panel-restore-button:hover {
-  background-color: var(--bg-hover, #27272a);
+  background-color: var(--bg-tertiary, #27272a);
   color: var(--text-primary, #ffffff);
-  border-color: var(--accent-color, #6366f1);
+  border-color: var(--accent, #6366f1);
 }
 
 .panel-restore-icon {
@@ -314,7 +312,7 @@
 }
 
 .panel-restore-count {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   color: var(--text-primary, #ffffff);
   padding: 2px 6px;
   border-radius: 10px;
@@ -329,7 +327,7 @@
   margin-top: 4px;
   min-width: 160px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   overflow: hidden;
@@ -342,7 +340,7 @@
   color: var(--text-muted, #71717a);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  border-bottom: 1px solid var(--border-color, #27272a);
+  border-bottom: 1px solid var(--border, #27272a);
 }
 
 .panel-restore-item {
@@ -359,12 +357,12 @@
 }
 
 .panel-restore-item:hover {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   color: var(--text-primary, #ffffff);
 }
 
 .panel-restore-item:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
   outline-offset: -2px;
 }
 
@@ -396,7 +394,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(10, 10, 15, 0.9);
+  background-color: color-mix(in srgb, var(--bg-primary, #0a0a0f) 90%, transparent);
   z-index: 10;
 }
 
@@ -407,7 +405,7 @@
   gap: 12px;
   padding: 24px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 8px;
   text-align: center;
 }
@@ -424,7 +422,7 @@
 
 .tty-restart-button {
   padding: 8px 16px;
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   border: none;
   border-radius: 6px;
   color: var(--text-primary, #ffffff);
@@ -439,7 +437,7 @@
 }
 
 .tty-restart-button:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
   outline-offset: 2px;
 }