@pennyfarthing/core 11.3.8 → 11.4.0

package/packages/core/src/public/components/QuickActions.tsx

@@ -0,0 +1,267 @@
+/**
+ * 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/packages/core/src/public/components/SpanTimeline.tsx

@@ -0,0 +1,352 @@
+/**
+ * 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/packages/core/src/public/components/StandalonePanel.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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,
+  ACPanel,
+  DebugPanel,
+  BikeLanePanel,
+  SettingsPanel,
+  ProgressPanel,
+} 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,
+  ac: ACPanel,
+  debug: DebugPanel,
+  bikelane: BikeLanePanel,
+  settings: SettingsPanel,
+  progress: ProgressPanel,
+};
+
+/**
+ * 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="/" 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>
+  );
+}