@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/ThemePalette/index.tsx

@@ -1,326 +0,0 @@
-/**
- * ThemePalette Component
- *
- * A dropdown component for quick theme switching between color presets.
- * Story MSSCI-12768 - Color Palette System
- *
- * Features:
- * - Popover menu with presets grouped by variant (dark/light)
- * - Searchable preset list via Command input
- * - 4-swatch visual preview (bg, bgSecondary, text, accent)
- * - Keyboard navigation (handled by Popover + Command primitives)
- * - ARIA attributes for accessibility
- */
-
-import React, { useMemo, useState } from 'react';
-import { Check, ChevronsUpDown } from 'lucide-react';
-import { getPresetIds, getPreset } from '../../utils/color-presets';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
-import {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandGroup,
-  CommandItem,
-  CommandEmpty,
-} from '@/components/ui/command';
-import './ThemePalette.css';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-export interface ThemePaletteProps {
-  currentPreset: string;
-  onSelect?: (presetId: string) => void;
-  className?: string;
-}
-
-export interface RenderThemePaletteOptions {
-  currentPreset: string;
-  onSelect?: (presetId: string) => void;
-}
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-interface GroupedPresets {
-  dark: string[];
-  light: string[];
-}
-
-function groupPresetsByVariant(): GroupedPresets {
-  const ids = getPresetIds();
-  const dark: string[] = [];
-  const light: string[] = [];
-
-  for (const id of ids) {
-    const preset = getPreset(id);
-    if (!preset) continue;
-    if (preset.variant === 'light') {
-      light.push(id);
-    } else {
-      dark.push(id);
-    }
-  }
-
-  dark.sort((a, b) => (getPreset(a)?.name || '').localeCompare(getPreset(b)?.name || ''));
-  light.sort((a, b) => (getPreset(a)?.name || '').localeCompare(getPreset(b)?.name || ''));
-
-  return { dark, light };
-}
-
-// =============================================================================
-// Swatch rendering
-// =============================================================================
-
-function PresetSwatches({ presetId }: { presetId: string }) {
-  const preset = getPreset(presetId);
-  if (!preset) return null;
-
-  return (
-    <div className="preset-swatches">
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.bgPrimary }}
-        title="Background"
-      />
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.bgSecondary }}
-        title="Surface"
-      />
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.textPrimary }}
-        title="Text"
-      />
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.accent }}
-        title="Accent"
-      />
-    </div>
-  );
-}
-
-// =============================================================================
-// ThemePalette Component
-// =============================================================================
-
-export function ThemePalette({ currentPreset, onSelect, className = '' }: ThemePaletteProps) {
-  const [open, setOpen] = useState(false);
-  const grouped = useMemo(() => groupPresetsByVariant(), []);
-  const currentPresetData = getPreset(currentPreset);
-
-  const handleSelect = (presetId: string) => {
-    onSelect?.(presetId);
-    setOpen(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn('theme-palette-button', className)}
-          aria-label={`Select theme, current: ${currentPresetData?.name || currentPreset}`}
-        >
-          <span className="theme-palette-current">
-            {currentPresetData && (
-              <span
-                className="preset-swatch"
-                style={{ backgroundColor: currentPresetData.colors.bgPrimary }}
-              />
-            )}
-            <span className="theme-palette-name">
-              {currentPresetData?.name || currentPreset}
-            </span>
-          </span>
-          <ChevronsUpDown className="theme-palette-chevron" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="theme-palette-popover p-0" align="start">
-        <Command>
-          <CommandInput placeholder="Search themes..." />
-          <CommandList>
-            <CommandEmpty>No theme found.</CommandEmpty>
-            <CommandGroup heading={`Dark (${grouped.dark.length})`}>
-              {grouped.dark.map((id) => {
-                const preset = getPreset(id);
-                if (!preset) return null;
-                const isActive = id === currentPreset;
-                return (
-                  <CommandItem
-                    key={id}
-                    value={preset.name}
-                    onSelect={() => handleSelect(id)}
-                    data-preset-id={id}
-                  >
-                    <PresetSwatches presetId={id} />
-                    <span className="preset-name">{preset.name}</span>
-                    <Check
-                      className={cn(
-                        'preset-check-icon ml-auto',
-                        isActive ? 'opacity-100' : 'opacity-0'
-                      )}
-                    />
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            <CommandGroup heading={`Light (${grouped.light.length})`}>
-              {grouped.light.map((id) => {
-                const preset = getPreset(id);
-                if (!preset) return null;
-                const isActive = id === currentPreset;
-                return (
-                  <CommandItem
-                    key={id}
-                    value={preset.name}
-                    onSelect={() => handleSelect(id)}
-                    data-preset-id={id}
-                  >
-                    <PresetSwatches presetId={id} />
-                    <span className="preset-name">{preset.name}</span>
-                    <Check
-                      className={cn(
-                        'preset-check-icon ml-auto',
-                        isActive ? 'opacity-100' : 'opacity-0'
-                      )}
-                    />
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-// =============================================================================
-// Render Function (for vanilla JS usage)
-// =============================================================================
-
-export function renderThemePalette(
-  container: HTMLElement,
-  options: RenderThemePaletteOptions
-): void {
-  const { currentPreset, onSelect } = options;
-
-  const wrapper = document.createElement('div');
-  wrapper.className = 'theme-palette';
-
-  const button = document.createElement('button');
-  button.className = 'theme-palette-button';
-  const preset = getPreset(currentPreset);
-  button.setAttribute('aria-label', `Select theme, current: ${preset?.name || currentPreset}`);
-  button.setAttribute('aria-expanded', 'false');
-  button.setAttribute('aria-haspopup', 'listbox');
-
-  button.innerHTML = `
-    <span class="theme-palette-current">
-      ${preset ? `<span class="preset-swatch" style="background-color: ${preset.colors.bgPrimary}"></span>` : ''}
-      <span class="theme-palette-name">${preset?.name || currentPreset}</span>
-    </span>
-    <span class="theme-palette-chevron" aria-hidden="true">&#x25BC;</span>
-  `;
-
-  const menu = document.createElement('div');
-  menu.className = 'theme-palette-menu';
-  menu.setAttribute('role', 'listbox');
-  menu.setAttribute('aria-label', 'Available themes');
-
-  const grouped = groupPresetsByVariant();
-
-  const renderGroup = (ids: string[], label: string) => {
-    const header = document.createElement('div');
-    header.className = 'preset-group-header';
-    header.setAttribute('role', 'presentation');
-    header.textContent = `${label} (${ids.length})`;
-    menu.appendChild(header);
-
-    ids.forEach((id) => {
-      const p = getPreset(id);
-      if (!p) return;
-
-      const option = document.createElement('button');
-      option.className = `theme-palette-option ${id === currentPreset ? 'active' : ''}`;
-      option.setAttribute('role', 'option');
-      option.setAttribute('aria-selected', id === currentPreset ? 'true' : 'false');
-      option.setAttribute('data-preset-id', id);
-      option.tabIndex = -1;
-
-      option.innerHTML = `
-        <div class="preset-swatches">
-          <span class="preset-swatch" style="background-color: ${p.colors.bgPrimary}" title="Background"></span>
-          <span class="preset-swatch" style="background-color: ${p.colors.bgSecondary}" title="Surface"></span>
-          <span class="preset-swatch" style="background-color: ${p.colors.textPrimary}" title="Text"></span>
-          <span class="preset-swatch" style="background-color: ${p.colors.accent}" title="Accent"></span>
-        </div>
-        <span class="preset-name">${p.name}</span>
-        ${id === currentPreset ? '<span class="preset-check" aria-hidden="true">&#x2713;</span>' : ''}
-      `;
-
-      option.addEventListener('click', () => {
-        onSelect?.(id);
-        menu.classList.remove('open');
-        button.setAttribute('aria-expanded', 'false');
-      });
-
-      menu.appendChild(option);
-    });
-  };
-
-  renderGroup(grouped.dark, 'Dark');
-  renderGroup(grouped.light, 'Light');
-
-  // Toggle menu
-  button.addEventListener('click', () => {
-    const isOpen = menu.classList.toggle('open');
-    button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-  });
-
-  // Close on click outside
-  document.addEventListener('click', (e) => {
-    if (!wrapper.contains(e.target as Node)) {
-      menu.classList.remove('open');
-      button.setAttribute('aria-expanded', 'false');
-    }
-  });
-
-  // Close on escape
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && menu.classList.contains('open')) {
-      menu.classList.remove('open');
-      button.setAttribute('aria-expanded', 'false');
-    }
-  });
-
-  // Keyboard navigation
-  menu.addEventListener('keydown', (e) => {
-    const options = Array.from(menu.querySelectorAll('.theme-palette-option'));
-    const focusedIdx = options.findIndex((el) => el === document.activeElement);
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      const nextIndex = (focusedIdx + 1) % options.length;
-      (options[nextIndex] as HTMLElement).focus();
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      const prevIndex = (focusedIdx - 1 + options.length) % options.length;
-      (options[prevIndex] as HTMLElement).focus();
-    }
-  });
-
-  wrapper.appendChild(button);
-  wrapper.appendChild(menu);
-  container.appendChild(wrapper);
-}
-
-export default ThemePalette;

package/src/public/components/ToolCallBlock.tsx

@@ -1,252 +0,0 @@
-/**
- * ToolCallBlock Component
- *
- * Displays tool use and result in a distinct block.
- * Story MSSCI-12698 - MessageView Component with Streaming
- * Story MSSCI-13398 - Collapsible tool result display
- * Story MSSCI-13402 - Tool use visual design polish
- */
-
-import React, { useState, useMemo } from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { getToolTypeClass } from '../utils/toolTypeColors.js';
-import { formatDuration } from '../utils/formatDuration.js';
-import { generateToolIntentSummary } from '../utils/toolIntentSummarizer.js';
-
-interface ToolUseMessage {
-  type: 'tool_use';
-  tool_name: string;
-  tool_id: string;
-  input: Record<string, unknown>;
-  timestamp: number;
-}
-
-interface ToolResultMessage {
-  type: 'tool_result';
-  tool_id: string;
-  content: string;
-  timestamp: number;
-  /** Whether this result represents an error */
-  is_error?: boolean;
-  /** Duration in milliseconds */
-  durationMs?: number;
-}
-
-interface ToolCallBlockProps {
-  toolUse: ToolUseMessage;
-  result?: ToolResultMessage;
-  className?: string;
-}
-
-const TRUNCATION_THRESHOLD = 50;
-
-/**
- * Count lines in content, handling both Unix and Windows line endings
- */
-function countLines(content: string): number {
-  if (!content) return 0;
-  // Normalize CRLF to LF, then count
-  const normalized = content.replace(/\r\n/g, '\n');
-  return normalized.split('\n').length;
-}
-
-/**
- * Get truncated content (first N lines)
- */
-function getTruncatedContent(content: string, maxLines: number): string {
-  const normalized = content.replace(/\r\n/g, '\n');
-  const lines = normalized.split('\n');
-  return lines.slice(0, maxLines).join('\n');
-}
-
-function formatToolInput(toolName: string, input: Record<string, unknown>): string {
-  // Display the most relevant input field based on tool type
-  if (toolName === 'Read' && input.file_path) {
-    return String(input.file_path);
-  }
-  if (toolName === 'Bash' && input.command) {
-    return String(input.command);
-  }
-  if (toolName === 'Glob' && input.pattern) {
-    return String(input.pattern);
-  }
-  if (toolName === 'Grep' && input.pattern) {
-    return String(input.pattern);
-  }
-  if (toolName === 'Write' && input.file_path) {
-    return String(input.file_path);
-  }
-  // Default: show JSON
-  return JSON.stringify(input, null, 2);
-}
-
-/**
- * Get single-letter badge label for tool type
- */
-export function getToolBadgeLabel(toolName: string): string {
-  const labels: Record<string, string> = {
-    Read: 'R',
-    Write: 'W',
-    Bash: 'B',
-    Glob: 'G',
-    Grep: 'S',  // S for Search
-    Edit: 'E',
-    Task: 'T',
-    WebFetch: 'F',
-    WebSearch: 'W',
-    TodoWrite: 'D',  // D for Do/Tasks
-  };
-  return labels[toolName] || toolName.charAt(0).toUpperCase();
-}
-
-export default function ToolCallBlock({ toolUse, result, className }: ToolCallBlockProps): React.ReactElement {
-  // AC1: Start collapsed by default
-  const [isCollapsed, setIsCollapsed] = useState(true);
-  const [isPromptCollapsed, setIsPromptCollapsed] = useState(true);
-  // AC3: Track whether showing full content or truncated
-  const [showFullContent, setShowFullContent] = useState(false);
-  // AC4: Track copy state
-  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
-
-  // MSSCI-13402: Determine error state for styling
-  const isError = result?.is_error === true;
-  const inputDisplay = formatToolInput(toolUse.tool_name, toolUse.input);
-  const paramCount = Object.keys(toolUse.input).length;
-
-  // MSSCI-13402: Get tool type CSS class
-  const toolTypeClass = getToolTypeClass(toolUse.tool_name);
-
-  // Generate human-readable intent summary (Story 74-1)
-  const intentSummary = useMemo(() => {
-    return generateToolIntentSummary(toolUse.tool_name, toolUse.input);
-  }, [toolUse.tool_name, toolUse.input]);
-
-  // AC2: Memoize line count for performance
-  const lineCount = useMemo(() => {
-    return result ? countLines(result.content) : 0;
-  }, [result?.content]);
-
-  // AC3: Determine if truncation applies
-  const shouldTruncate = lineCount > TRUNCATION_THRESHOLD;
-  const isTruncated = shouldTruncate && !showFullContent;
-
-  // AC3: Get display content (truncated or full)
-  const displayContent = useMemo(() => {
-    if (!result) return '';
-    if (isTruncated) {
-      return getTruncatedContent(result.content, TRUNCATION_THRESHOLD);
-    }
-    return result.content;
-  }, [result?.content, isTruncated]);
-
-  // AC4: Handle copy to clipboard
-  const handleCopy = async () => {
-    if (!result) return;
-    try {
-      await navigator.clipboard.writeText(result.content);
-      setCopyState('copied');
-      setTimeout(() => setCopyState('idle'), 2000);
-    } catch {
-      setCopyState('error');
-    }
-  };
-
-  // AC2: Format line count text
-  const lineCountText = lineCount === 1 ? '1 line' : `${lineCount} lines`;
-
-  // MSSCI-13402: Build class list with tool type and error state
-  const blockClasses = [
-    'tool-call-block',
-    toolTypeClass,
-    isError ? 'tool-error' : '',
-    className || '',
-  ].filter(Boolean).join(' ');
-
-  // Get badge label for tool type
-  const badgeLabel = getToolBadgeLabel(toolUse.tool_name);
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div data-testid="tool-call-block" className={blockClasses}>
-        <div className="tool-header">
-          {/* Tool type badge - colored pill for instant recognition */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Badge variant="default" className="tool-type-badge">
-                {badgeLabel}
-              </Badge>
-            </TooltipTrigger>
-            <TooltipContent>{toolUse.tool_name}</TooltipContent>
-          </Tooltip>
-          <span className="tool-name">{intentSummary}</span>
-          {/* MSSCI-13402: Duration display */}
-          <span data-testid="tool-duration" className="tool-duration">
-            {result?.durationMs !== undefined ? formatDuration(result.durationMs) : ''}
-          </span>
-        </div>
-      {/* Prompt section - collapsible tool input display */}
-      <div className="tool-result-header">
-        <Button
-          variant="ghost"
-          size="sm"
-          data-testid="tool-prompt-toggle"
-          className="tool-result-toggle"
-          onClick={() => setIsPromptCollapsed(!isPromptCollapsed)}
-        >
-          {isPromptCollapsed ? '▶' : '▼'} Prompt ({paramCount} {paramCount === 1 ? 'param' : 'params'})
-        </Button>
-      </div>
-      <div
-        data-testid="tool-prompt-content"
-        className={`tool-result-content ${isPromptCollapsed ? 'collapsed' : ''}`}
-      >
-        <pre>{inputDisplay}</pre>
-      </div>
-      {result && (
-        <>
-          <div className="tool-result-header">
-            <Button
-              variant="ghost"
-              size="sm"
-              data-testid="tool-result-toggle"
-              className="tool-result-toggle"
-              onClick={() => setIsCollapsed(!isCollapsed)}
-            >
-              {isCollapsed ? '▶' : '▼'} Result ({lineCountText})
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              data-testid="tool-result-copy"
-              className={`tool-result-copy ${copyState === 'copied' ? 'copied' : ''} ${copyState === 'error' ? 'copy-error' : ''}`}
-              onClick={handleCopy}
-              aria-label="Copy result to clipboard"
-            >
-              {copyState === 'copied' ? '✓' : '📋'}
-            </Button>
-          </div>
-          <div
-            data-testid="tool-result-content"
-            className={`tool-result-content ${isCollapsed ? 'collapsed' : ''} ${isTruncated && !isCollapsed ? 'truncated' : ''} ${isError ? 'error-content' : ''}`}
-          >
-            <pre>{displayContent}</pre>
-            {shouldTruncate && !isCollapsed && isTruncated && (
-              <Button
-                variant="link"
-                size="sm"
-                data-testid="tool-result-expand"
-                className="tool-result-expand"
-                onClick={() => setShowFullContent(true)}
-              >
-                Show all ({lineCount} lines)
-              </Button>
-            )}
-          </div>
-        </>
-      )}
-      </div>
-    </TooltipProvider>
-  );
-}