@pennyfarthing/core 11.3.7 → 11.4.0

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

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

@@ -0,0 +1,252 @@
+/**
+ * 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>
+  );
+}