@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/QuickActions.tsx

@@ -1,267 +0,0 @@
-/**
- * QuickActions Component
- *
- * Renders action buttons based on CYCLIST markers detected in assistant messages.
- * Supports handoff buttons, yes/no questions, choices, and continue.
- *
- * For open questions with suggestions (<!-- CYCLIST:QUESTION:open:suggested text -->),
- * pre-fills the editor via 'cyclist:suggest-prompt' event instead of showing buttons.
- *
- * Story: MSSCI-12787 - Implement CYCLIST Marker Parsing and Action Buttons
- * Story: MSSCI-12771 - Accessibility Compliance (ARIA labels)
- */
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import { useMarkerActions } from '../hooks/useMarkerActions';
-import { useClaudeContext } from '../contexts/ClaudeContext';
-import type { MessageData } from '../types/message';
-
-interface ActionItem {
-  label: string;
-  command: string;
-}
-
-interface QuickActionsPropsWithMessage {
-  message: MessageData;
-  actions?: never;
-  onAction?: (response: string) => void;
-}
-
-interface QuickActionsPropsWithActions {
-  message?: never;
-  actions: ActionItem[];
-  onAction?: (response: string) => void;
-}
-
-type QuickActionsProps = QuickActionsPropsWithMessage | QuickActionsPropsWithActions;
-
-/**
- * Get relay mode setting from REST API
- */
-async function getRelayMode(): Promise<boolean> {
-  try {
-    const response = await fetch('/api/settings');
-    if (response.ok) {
-      const settings = await response.json();
-      return settings?.workflow?.relay_mode ?? false;
-    }
-  } catch {
-    // Ignore errors
-  }
-  return false;
-}
-
-export default function QuickActions(props: QuickActionsProps): React.ReactElement | null {
-  // Get send function from Claude context
-  const { send: claudeSend } = useClaudeContext();
-
-  /**
-   * Send a message to Claude via WebSocket context
-   */
-  const sendMessage = useCallback((text: string): void => {
-    console.log('[QuickActions] sendMessage called:', text);
-    claudeSend(text, []);
-  }, [claudeSend]);
-  const { onAction } = props;
-  const [isDisabled, setIsDisabled] = useState(false);
-  const [relayMode, setRelayMode] = useState(false);
-
-  // Support both message-based and actions-based props
-  const message = 'message' in props ? props.message : undefined;
-  const directActions = 'actions' in props ? props.actions : undefined;
-
-  const markerActions = useMarkerActions(message?.content);
-
-  // Reset disabled state when message changes (new assistant response)
-  useEffect(() => {
-    setIsDisabled(false);
-  }, [message?.timestamp]);
-
-  // Check relay mode on mount
-  useEffect(() => {
-    getRelayMode().then(setRelayMode);
-  }, []);
-
-  // Clear QuickActions when user submits any message
-  useEffect(() => {
-    const handleUserSubmit = () => {
-      setIsDisabled(true);
-    };
-    window.addEventListener('cyclist:user-submit', handleUserSubmit);
-    return () => {
-      window.removeEventListener('cyclist:user-submit', handleUserSubmit);
-    };
-  }, []);
-
-  // Auto-execute handoff when relay mode is ON
-  useEffect(() => {
-    if (markerActions?.type === 'handoff' && relayMode && markerActions.value) {
-      // Auto-execute after short delay
-      const timer = setTimeout(() => {
-        sendMessage(markerActions.value!);
-        setIsDisabled(true);
-        onAction?.(markerActions.value!);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-
-    if (markerActions?.type === 'invoke' && markerActions.value) {
-      // INVOKE always auto-executes
-      const timer = setTimeout(() => {
-        sendMessage(markerActions.value!);
-        setIsDisabled(true);
-        onAction?.(markerActions.value!);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [markerActions, relayMode, onAction]);
-
-  // Pre-fill editor with suggested prompt for open questions
-  useEffect(() => {
-    if (markerActions?.type === 'open' && markerActions.responses && markerActions.responses.length > 0) {
-      const suggestion = markerActions.responses[0];
-      window.dispatchEvent(new CustomEvent('cyclist:suggest-prompt', {
-        detail: { prompt: suggestion }
-      }));
-    }
-  }, [markerActions]);
-
-  const handleButtonClick = useCallback((response: string) => {
-    console.log('[QuickActions] Button clicked:', response);
-    setIsDisabled(true);
-    sendMessage(response);
-    onAction?.(response);
-  }, [onAction]);
-
-  // If using direct actions prop (for accessibility testing), render those
-  if (directActions && directActions.length > 0) {
-    return (
-      <div className="quick-actions">
-        <div className="quick-actions-buttons">
-          {directActions.map((action) => (
-            <Button
-              variant="secondary"
-              size="sm"
-              type="button"
-              key={action.command}
-              className="quick-action-btn"
-              onClick={() => handleButtonClick(action.command)}
-              disabled={isDisabled}
-              aria-label={`${action.label}: ${action.command}`}
-            >
-              {action.label}
-            </Button>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  // No marker actions to render
-  if (!markerActions) {
-    return null;
-  }
-
-  // Open questions - no buttons needed, editor is pre-filled via useEffect
-  if (markerActions.type === 'open') {
-    return null;
-  }
-
-  // Continue marker - suppress the generic Continue button entirely
-  // Users can always type to continue; showing a disabled button is confusing
-  if (markerActions.type === 'continue') {
-    return null;
-  }
-
-  // Auto-execute types don't render buttons
-  if (markerActions.type === 'invoke') {
-    return (
-      <div className="quick-actions">
-        <span className="auto-invoke-status">Invoking {markerActions.value}...</span>
-      </div>
-    );
-  }
-
-  // Auto-executing handoff in relay mode
-  if (markerActions.type === 'handoff' && relayMode) {
-    return (
-      <div className="quick-actions">
-        <span className="auto-invoke-status">Handing off to {markerActions.value}...</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="quick-actions">
-      {/* Handoff buttons */}
-      {markerActions.type === 'handoff' && markerActions.responses && (
-        <div className="quick-actions-buttons">
-          {markerActions.responses.map((response) => (
-            <Button
-              variant="secondary"
-              size="sm"
-              type="button"
-              key={response}
-              className="quick-action-btn"
-              onClick={() => handleButtonClick(response)}
-              disabled={isDisabled}
-              aria-label={`Continue with ${response}`}
-            >
-              {response}
-            </Button>
-          ))}
-        </div>
-      )}
-
-      {/* Yes/No buttons */}
-      {markerActions.type === 'yesno' && (
-        <div className="quick-actions-buttons">
-          <Button
-            variant="secondary"
-            size="sm"
-            type="button"
-            className="quick-action-btn"
-            onClick={() => handleButtonClick('Yes')}
-            disabled={isDisabled}
-            aria-label="Answer Yes"
-          >
-            Yes
-          </Button>
-          <Button
-            variant="secondary"
-            size="sm"
-            type="button"
-            className="quick-action-btn"
-            onClick={() => handleButtonClick('No')}
-            disabled={isDisabled}
-            aria-label="Answer No"
-          >
-            No
-          </Button>
-        </div>
-      )}
-
-      {/* Choice buttons */}
-      {markerActions.type === 'choices' && markerActions.choices && (
-        <div className="quick-actions-buttons">
-          {markerActions.choices.map((choice) => (
-            <Button
-              variant="secondary"
-              size="sm"
-              type="button"
-              key={choice.number}
-              className="quick-action-btn"
-              onClick={() => handleButtonClick(choice.text)}
-              disabled={isDisabled}
-              aria-label={`Choose option ${choice.number}: ${choice.text}`}
-            >
-              {choice.text}
-            </Button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-

package/src/public/components/SpanTimeline.tsx

@@ -1,352 +0,0 @@
-/**
- * SpanTimeline Component
- *
- * Visual timeline of OTEL spans showing tool execution over time.
- *
- * Features:
- * - Horizontal timeline with spans as bars
- * - Color-coded by tool type
- * - Click to expand span details
- * - Real-time updates via WebSocket
- * - Zoom and scroll controls
- */
-
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-interface EnrichedSpan {
-  spanId: string;
-  traceId: string;
-  toolName: string;
-  startTime: number;
-  endTime?: number;
-  durationMs: number;
-  status: 'running' | 'completed' | 'error';
-  success: boolean;
-  error?: string;
-  enrichment: {
-    filePath?: string;
-    command?: string;
-    pattern?: string;
-    summary?: string;
-  };
-}
-
-interface SpanTimelineProps {
-  /** Height of the timeline in pixels */
-  height?: number;
-  /** Whether to auto-scroll to newest spans */
-  autoScroll?: boolean;
-}
-
-// Tool colors for visual distinction
-const TOOL_COLORS: Record<string, string> = {
-  Read: '#4ade80',      // Green
-  Write: '#f87171',     // Red
-  Edit: '#fb923c',      // Orange
-  Bash: '#60a5fa',      // Blue
-  Grep: '#a78bfa',      // Purple
-  Glob: '#2dd4bf',      // Teal
-  Task: '#e879f9',      // Magenta
-  WebFetch: '#22d3ee',  // Cyan
-  WebSearch: '#fbbf24', // Yellow
-};
-
-// =============================================================================
-// Helper Functions
-// =============================================================================
-
-function formatTime(timestamp: number): string {
-  return new Date(timestamp).toLocaleTimeString();
-}
-
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-  return `${(ms / 60000).toFixed(1)}m`;
-}
-
-function getToolColor(toolName: string): string {
-  return TOOL_COLORS[toolName] || '#888888';
-}
-
-// =============================================================================
-// Component
-// =============================================================================
-
-export function SpanTimeline({ height = 200, autoScroll = true }: SpanTimelineProps): React.ReactElement {
-  const [spans, setSpans] = useState<EnrichedSpan[]>([]);
-  const [selectedSpan, setSelectedSpan] = useState<EnrichedSpan | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [zoomLevel, setZoomLevel] = useState(1); // 1 = 1px per 100ms
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Fetch initial spans
-  useEffect(() => {
-    fetch('/api/spans?limit=100')
-      .then(res => res.ok ? res.json() : { spans: [] })
-      .then(data => {
-        setSpans(data.spans || []);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, []);
-
-  // Subscribe to real-time updates
-  useEffect(() => {
-    const ws = new WebSocket(`ws://${window.location.host}/ws/spans`);
-
-    ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'span' && data.span) {
-          setSpans(prev => {
-            // Update existing span or add new one
-            const existing = prev.findIndex(s => s.spanId === data.span.spanId);
-            if (existing >= 0) {
-              const updated = [...prev];
-              updated[existing] = data.span;
-              return updated;
-            }
-            return [...prev, data.span].slice(-100); // Keep last 100
-          });
-        }
-      } catch (err) {
-        console.error('[SpanTimeline] WebSocket parse error:', err);
-      }
-    };
-
-    return () => ws.close();
-  }, []);
-
-  // Auto-scroll to right (newest spans)
-  useEffect(() => {
-    if (autoScroll && containerRef.current) {
-      containerRef.current.scrollLeft = containerRef.current.scrollWidth;
-    }
-  }, [spans, autoScroll]);
-
-  // Calculate timeline bounds
-  const { minTime, maxTime, timeRange } = useMemo(() => {
-    if (spans.length === 0) {
-      const now = Date.now();
-      return { minTime: now - 60000, maxTime: now, timeRange: 60000 };
-    }
-
-    const times = spans.flatMap(s => [s.startTime, s.endTime || s.startTime + s.durationMs]);
-    const min = Math.min(...times);
-    const max = Math.max(...times);
-    const range = Math.max(max - min, 10000); // At least 10 seconds
-
-    return { minTime: min, maxTime: max, timeRange: range };
-  }, [spans]);
-
-  // Calculate timeline width based on zoom
-  const timelineWidth = useMemo(() => {
-    return Math.max(800, (timeRange / 100) * zoomLevel);
-  }, [timeRange, zoomLevel]);
-
-  // Handle span click
-  const handleSpanClick = useCallback((span: EnrichedSpan) => {
-    setSelectedSpan(selectedSpan?.spanId === span.spanId ? null : span);
-  }, [selectedSpan]);
-
-  // Zoom controls
-  const handleZoomIn = useCallback(() => {
-    setZoomLevel(prev => Math.min(prev * 1.5, 10));
-  }, []);
-
-  const handleZoomOut = useCallback(() => {
-    setZoomLevel(prev => Math.max(prev / 1.5, 0.1));
-  }, []);
-
-  const handleZoomReset = useCallback(() => {
-    setZoomLevel(1);
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="span-timeline-loading p-2 space-y-2">
-        <div className="flex gap-2 items-center">
-          <Skeleton className="h-4 w-20" />
-          <div className="flex-1" />
-          <Skeleton className="h-6 w-6" />
-          <Skeleton className="h-6 w-6" />
-          <Skeleton className="h-6 w-6" />
-        </div>
-        <Skeleton className="h-[120px] w-full" />
-      </div>
-    );
-  }
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="span-timeline" style={{ height }}>
-        {/* Toolbar */}
-        <div className="span-timeline-toolbar">
-          <span className="span-count">{spans.length} spans</span>
-          <div className="zoom-controls">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={handleZoomOut}>−</Button>
-              </TooltipTrigger>
-              <TooltipContent>Zoom out</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={handleZoomReset}>⟳</Button>
-              </TooltipTrigger>
-              <TooltipContent>Reset zoom</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={handleZoomIn}>+</Button>
-              </TooltipTrigger>
-              <TooltipContent>Zoom in</TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-
-        {/* Timeline container */}
-        <div className="span-timeline-container" ref={containerRef}>
-          <div
-            className="span-timeline-track"
-            ref={timelineRef}
-            style={{ width: timelineWidth }}
-          >
-            {/* Time axis */}
-            <div className="span-timeline-axis">
-              {Array.from({ length: Math.ceil(timeRange / 10000) + 1 }, (_, i) => {
-                const time = minTime + i * 10000;
-                const left = ((time - minTime) / timeRange) * timelineWidth;
-                return (
-                  <div
-                    key={i}
-                    className="axis-tick"
-                    style={{ left }}
-                  >
-                    <span className="tick-label">{formatTime(time)}</span>
-                  </div>
-                );
-              })}
-            </div>
-
-            {/* Span bars */}
-            <div className="span-timeline-bars">
-              {spans.map((span, index) => {
-                const left = ((span.startTime - minTime) / timeRange) * timelineWidth;
-                const width = Math.max(4, (span.durationMs / timeRange) * timelineWidth);
-                const top = (index % 5) * 28 + 4; // Stack in 5 rows
-
-                return (
-                  <Tooltip key={span.spanId}>
-                    <TooltipTrigger asChild>
-                      <div
-                        className={`span-bar ${span.success ? '' : 'error'} ${
-                          selectedSpan?.spanId === span.spanId ? 'selected' : ''
-                        }`}
-                        style={{
-                          left,
-                          width,
-                          top,
-                          backgroundColor: getToolColor(span.toolName),
-                        }}
-                        onClick={() => handleSpanClick(span)}
-                      >
-                        <span className="span-bar-label">{span.toolName}</span>
-                      </div>
-                    </TooltipTrigger>
-                    <TooltipContent>{`${span.toolName}: ${formatDuration(span.durationMs)}`}</TooltipContent>
-                  </Tooltip>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {/* Selected span details */}
-        {selectedSpan && (
-          <div className="span-timeline-details">
-            <div className="detail-header">
-              <Badge
-                variant="default"
-                className="tool-badge"
-                style={{ backgroundColor: getToolColor(selectedSpan.toolName) }}
-              >
-                {selectedSpan.toolName}
-              </Badge>
-              <span className="duration">{formatDuration(selectedSpan.durationMs)}</span>
-              <span className={`status ${selectedSpan.success ? 'success' : 'error'}`}>
-                {selectedSpan.success ? '✓' : '✗'}
-              </span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="close-details"
-                onClick={() => setSelectedSpan(null)}
-              >
-                ×
-              </Button>
-            </div>
-            <div className="detail-body">
-              <div className="detail-row">
-                <label>Time:</label>
-                <span>{formatTime(selectedSpan.startTime)}</span>
-              </div>
-              {selectedSpan.enrichment.filePath && (
-                <div className="detail-row">
-                  <label>File:</label>
-                  <span className="mono">{selectedSpan.enrichment.filePath}</span>
-                </div>
-              )}
-              {selectedSpan.enrichment.command && (
-                <div className="detail-row">
-                  <label>Command:</label>
-                  <span className="mono">{selectedSpan.enrichment.command}</span>
-                </div>
-              )}
-              {selectedSpan.enrichment.pattern && (
-                <div className="detail-row">
-                  <label>Pattern:</label>
-                  <span className="mono">{selectedSpan.enrichment.pattern}</span>
-                </div>
-              )}
-              {selectedSpan.enrichment.summary && (
-                <div className="detail-row">
-                  <label>Summary:</label>
-                  <span>{selectedSpan.enrichment.summary}</span>
-                </div>
-              )}
-              {selectedSpan.error && (
-                <div className="detail-row error">
-                  <label>Error:</label>
-                  <span>{selectedSpan.error}</span>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Legend */}
-        <div className="span-timeline-legend">
-          {Object.entries(TOOL_COLORS).slice(0, 6).map(([tool, color]) => (
-            <div key={tool} className="legend-item">
-              <span className="legend-color" style={{ backgroundColor: color }} />
-              <span className="legend-label">{tool}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </TooltipProvider>
-  );
-}
-
-export default SpanTimeline;

package/src/public/components/StandalonePanel.tsx

@@ -1,84 +0,0 @@
-/**
- * StandalonePanel - Full-screen panel wrapper for BikeRack mode
- *
- * Story MSSCI-14821: StandalonePanel wrapper and ?panel=X client routing
- * Epic: 101 (BikeRack Mode)
- *
- * Renders a single panel full-screen based on ?panel=X URL parameter.
- * PANEL_REGISTRY is the single source of truth for routing (CE-2).
- *
- * Rules:
- * - No dockview-react imports (Rule 7)
- * - No BikeRack-specific props to panels (Rule 2)
- * - URL-based detection only (Rule 10)
- */
-
-import React from 'react';
-import {
-  EnhancedSprintPanel,
-  GitPanel,
-  DiffsPanel,
-  TodoPanel,
-  WorkflowPanel,
-  BackgroundPanel,
-  AuditLogPanel,
-  ChangedPanel,
-  ACPanel,
-  TTYPanel,
-  DebugPanel,
-  BikeLanePanel,
-  SettingsPanel,
-} from './panels';
-
-/**
- * Registry mapping panel URL names to their components.
- * Single source of truth for standalone panel routing (CE-2).
- */
-export const PANEL_REGISTRY: Record<string, React.ComponentType> = {
-  sprint: EnhancedSprintPanel,
-  git: GitPanel,
-  diffs: DiffsPanel,
-  todos: TodoPanel,
-  workflow: WorkflowPanel,
-  background: BackgroundPanel,
-  audit: AuditLogPanel,
-  changed: ChangedPanel,
-  ac: ACPanel,
-  tty: TTYPanel,
-  debug: DebugPanel,
-  bikelane: BikeLanePanel,
-  settings: SettingsPanel,
-};
-
-/**
- * Detect standalone panel mode from URL parameters (Rule 10).
- */
-export function getStandalonePanelName(): string | null {
-  const params = new URLSearchParams(window.location.search);
-  return params.get('panel');
-}
-
-/**
- * StandalonePanel wrapper - renders a single panel full-screen.
- */
-export function StandalonePanel(): React.ReactElement {
-  const panelName = getStandalonePanelName();
-  const PanelComponent = panelName ? PANEL_REGISTRY[panelName] : null;
-
-  if (!PanelComponent) {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', width: '100vw', backgroundColor: 'var(--bg-primary, #1a1a2e)', color: 'var(--text-primary, #e4e4e7)' }}>
-        <h1>Panel not found</h1>
-        <p>
-          <a href="/bikerack" style={{ color: 'var(--accent, #818cf8)' }}>Back to BikeRack</a>
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ height: '100vh', width: '100vw', overflow: 'auto', backgroundColor: 'var(--bg-primary, #1a1a2e)', color: 'var(--text-primary, #e4e4e7)' }}>
-      <PanelComponent />
-    </div>
-  );
-}