@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/StatsStrip.tsx

@@ -1,162 +0,0 @@
-/**
- * StatsStrip Component
- *
- * Displays context percentage, model badge, PWD, and identity info.
- * Story MSSCI-12699 - StatsStrip Component
- *
- * Features:
- * - Context percentage with color thresholds (safe < 70%, warning 70-85%, danger >= 85%)
- * - Model badge showing current model name
- * - PWD showing current working directory (folder name)
- * - Identity section showing Jira email and GitHub username
- * - Real-time updates via IPC subscriptions
- */
-
-import React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { useStatsStrip } from '../hooks/useStatsStrip';
-
-/**
- * Extract short model name from full model ID
- * e.g., 'claude-opus-4-5-20251101' -> 'opus'
- *       'claude-3-5-sonnet-20241022' -> 'sonnet'
- */
-function formatModelName(model: string | null): string {
-  if (!model) return '\u2014'; // em dash placeholder
-
-  // Extract model family name
-  const lowerModel = model.toLowerCase();
-  if (lowerModel.includes('opus')) return 'opus';
-  if (lowerModel.includes('sonnet')) return 'sonnet';
-  if (lowerModel.includes('haiku')) return 'haiku';
-
-  // Fallback: return last segment before date
-  const parts = model.split('-');
-  if (parts.length >= 2) {
-    // Find the part that's not a date (YYYYMMDD)
-    for (let i = parts.length - 2; i >= 0; i--) {
-      if (!/^\d{8}$/.test(parts[i])) {
-        return parts[i];
-      }
-    }
-  }
-
-  return model;
-}
-
-/**
- * Determine context level class based on percentage
- */
-function getContextLevel(percent: number): string {
-  if (percent >= 85) return 'level-danger';
-  if (percent >= 70) return 'level-warning';
-  return 'level-safe';
-}
-
-/**
- * Extract folder name from full path
- */
-function getFolderName(pwd: string): string {
-  if (!pwd) return '';
-  const parts = pwd.split('/');
-  return parts[parts.length - 1] || parts[parts.length - 2] || pwd;
-}
-
-export default function StatsStrip(): React.ReactElement {
-  const { context, stats, projectInfo } = useStatsStrip();
-
-  const percent = context?.percent ?? 0;
-  const model = stats?.model ?? null;
-  const pwd = projectInfo?.pwd ?? '';
-  const jiraEmail = projectInfo?.jiraEmail ?? null;
-  const githubUsername = projectInfo?.githubUsername ?? null;
-
-  const contextLevel = getContextLevel(percent);
-  const folderName = getFolderName(pwd);
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="stats-strip" data-testid="stats-strip">
-        {/* Left side: identity info */}
-        <div className="stats-left" data-testid="stats-left">
-          {/* PWD */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span
-                className="stats-pwd"
-                data-testid="stats-pwd"
-                data-full-path={pwd}
-              >
-                {folderName}
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>{pwd}</TooltipContent>
-          </Tooltip>
-
-          {/* Jira email - only show if configured */}
-          {jiraEmail && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span
-                  className="stats-jira-email"
-                  data-testid="jira-email"
-                >
-                  {jiraEmail}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>{`Jira: ${jiraEmail}`}</TooltipContent>
-            </Tooltip>
-          )}
-
-          {/* GitHub user - only show if configured */}
-          {githubUsername && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span
-                  className="stats-github-user"
-                  data-testid="github-user"
-                >
-                  @{githubUsername}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>{`GitHub: ${githubUsername}`}</TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* Right side: metrics */}
-        <div className="stats-right" data-testid="stats-right">
-          {/* Model badge */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Badge
-                variant="secondary"
-                className="stats-model-badge"
-                data-testid="model-badge"
-              >
-                {formatModelName(model)}
-              </Badge>
-            </TooltipTrigger>
-            {model && <TooltipContent>{model}</TooltipContent>}
-          </Tooltip>
-
-          {/* Context meter */}
-          <div
-            className={`stats-context-meter ${contextLevel}`}
-            data-testid="context-meter"
-          >
-            <span className="context-percent" data-testid="context-percent">
-              {percent}%
-            </span>
-            <div
-              className="context-fill"
-              data-testid="context-fill"
-              style={{ width: `${percent}%` }}
-            />
-          </div>
-        </div>
-      </div>
-    </TooltipProvider>
-  );
-}

package/src/public/components/StreamingContent.tsx

@@ -1,77 +0,0 @@
-/**
- * StreamingContent Component
- *
- * Displays progressively streaming text with cursor indicator.
- * Story MSSCI-12698 - MessageView Component with Streaming
- * Story MSSCI-12771 - Accessibility Compliance (screen reader announcements)
- */
-
-import React, { useEffect, useRef, useState } from 'react';
-import { parseMarkdown } from '../utils/markdown';
-
-interface StreamingContentProps {
-  content: string;
-  isStreaming: boolean;
-}
-
-export default function StreamingContent({ content, isStreaming }: StreamingContentProps): React.ReactElement {
-  const html = parseMarkdown(content);
-  const [statusMessage, setStatusMessage] = useState<string>('');
-  const lastAnnouncedLength = useRef(0);
-  const announceThrottleRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Announce streaming state changes
-  useEffect(() => {
-    if (isStreaming) {
-      setStatusMessage('Claude is thinking...');
-    } else if (content && lastAnnouncedLength.current > 0) {
-      setStatusMessage('Response complete');
-    }
-  }, [isStreaming, content]);
-
-  // Throttled content announcements during streaming
-  useEffect(() => {
-    if (!isStreaming) {
-      lastAnnouncedLength.current = content.length;
-      return;
-    }
-
-    // Clear any pending announcement
-    if (announceThrottleRef.current) {
-      clearTimeout(announceThrottleRef.current);
-    }
-
-    // Throttle announcements to every 2 seconds to avoid screen reader overload
-    announceThrottleRef.current = setTimeout(() => {
-      if (content.length > lastAnnouncedLength.current) {
-        lastAnnouncedLength.current = content.length;
-      }
-    }, 2000);
-
-    return () => {
-      if (announceThrottleRef.current) {
-        clearTimeout(announceThrottleRef.current);
-      }
-    };
-  }, [content, isStreaming]);
-
-  return (
-    <>
-      {/* Status region for streaming state changes */}
-      <div role="status" aria-live="polite" className="visually-hidden">
-        {statusMessage}
-      </div>
-
-      {/* Main streaming content */}
-      <div
-        data-testid="streaming-content"
-        className="streaming-content"
-        aria-busy={isStreaming}
-        aria-atomic="false"
-        aria-live="polite"
-      >
-        <div dangerouslySetInnerHTML={{ __html: html }} />
-      </div>
-    </>
-  );
-}

package/src/public/components/SubagentSpan.tsx

@@ -1,180 +0,0 @@
-/**
- * SubagentSpan Component
- *
- * Collapsible container for subagent message groups.
- * Story MSSCI-12698 - MessageView Component with Streaming
- * Story MSSCI-12776 - Theme-Aware Subagent Display Messages
- */
-
-import React, { useState, useMemo } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import Message from './Message';
-import ToolCallBlock from './ToolCallBlock';
-import { useSubagentHelper } from '../hooks/useSubagentHelper';
-import { generateFriendlyMessage } from '../utils/subagent-display';
-import type { SubagentMessage } from '../types/message';
-
-interface SubagentSpanProps {
-  type: string;
-  name: string;
-  messages: SubagentMessage[];
-  defaultCollapsed?: boolean;
-  onCollapseChange?: (collapsed: boolean) => void;
-  // MSSCI-12776: Theme-aware helper display (optional - can be overridden by props for testing)
-  helperName?: string | null;
-  helperStyle?: string | null;
-  friendlyMessage?: string | null;
-}
-
-export default function SubagentSpan({
-  type,
-  name,
-  messages,
-  defaultCollapsed = true,
-  onCollapseChange,
-  helperName: propHelperName,
-  helperStyle: propHelperStyle,
-  friendlyMessage: propFriendlyMessage,
-}: SubagentSpanProps): React.ReactElement {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-
-  // MSSCI-12776: Fetch themed helper from current persona (AC2)
-  const { helper } = useSubagentHelper();
-
-  // Generate friendly message from subagent context (AC3)
-  const generatedFriendlyMessage = useMemo(() => {
-    return generateFriendlyMessage({ subagent_type: type, description: name }, { plural: helper?.plural });
-  }, [type, name, helper?.plural]);
-
-  // Use truthy props if provided (for testing), otherwise use hook/generated values (AC4, AC5)
-  // Treating null same as undefined - both mean "use fallback"
-  const helperName = propHelperName ?? helper?.name;
-  const helperStyle = propHelperStyle ?? helper?.style;
-  const friendlyMessage = propFriendlyMessage ?? generatedFriendlyMessage;
-
-  // Determine display values with fallbacks (AC5)
-  const displayName = helperName || type;
-  const displayMessage = friendlyMessage || name;
-
-  // Count non-result messages for the collapsed summary
-  const messageCount = messages.filter(m => m.type !== 'tool_result').length;
-
-  // Group tool_use and tool_result by tool_id
-  const toolResults = new Map<string, SubagentMessage>();
-  messages.forEach(msg => {
-    if (msg.type === 'tool_result' && msg.tool_id) {
-      toolResults.set(msg.tool_id, msg);
-    }
-  });
-
-  const renderMessage = (msg: SubagentMessage, index: number) => {
-    if (msg.type === 'tool_use' && msg.tool_name && msg.tool_id) {
-      const result = toolResults.get(msg.tool_id);
-      return (
-        <div key={`tool-wrapper-${msg.tool_id}`} data-testid="message-tool_use" className="message message-tool_use">
-          <ToolCallBlock
-            toolUse={{
-              type: 'tool_use',
-              tool_name: msg.tool_name,
-              tool_id: msg.tool_id,
-              input: msg.input || {},
-              timestamp: msg.timestamp,
-            }}
-            result={result ? {
-              type: 'tool_result',
-              tool_id: result.tool_id!,
-              content: result.content || '',
-              timestamp: result.timestamp,
-            } : undefined}
-          />
-        </div>
-      );
-    }
-
-    if (msg.type === 'tool_result') {
-      // Skip tool_result - it's rendered with tool_use
-      return null;
-    }
-
-    // Subagent prompts (user messages within subagent) — truncated single line
-    if (msg.type === 'user') {
-      const truncated = (msg.content || '').slice(0, 120).replace(/\n/g, ' ');
-      return (
-        <div
-          key={`subagent-prompt-${index}`}
-          data-testid="subagent-prompt"
-          className="message message-subagent-prompt"
-        >
-          <div className="message-content">{truncated}{(msg.content || '').length > 120 ? '...' : ''}</div>
-        </div>
-      );
-    }
-
-    return (
-      <Message
-        key={`msg-${index}`}
-        message={{
-          type: msg.type,
-          content: msg.content,
-          timestamp: msg.timestamp,
-        }}
-      />
-    );
-  };
-
-  return (
-    <div
-      data-testid="subagent-span"
-      data-collapsible="true"
-      className={`subagent-span subagent-${type} ${isCollapsed ? 'collapsed' : ''}`}
-    >
-      <div
-        data-testid="subagent-span-header"
-        className="subagent-header"
-        onClick={() => {
-          const next = !isCollapsed;
-          setIsCollapsed(next);
-          onCollapseChange?.(next);
-        }}
-      >
-        <span className="subagent-toggle">{isCollapsed ? '▶' : '▼'}</span>
-
-        {/* Helper name or fallback to type (AC4, AC5) */}
-        <TooltipProvider delayDuration={300}>
-          {helperStyle ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className="subagent-helper-name">
-                  {displayName}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>{helperStyle}</TooltipContent>
-            </Tooltip>
-          ) : (
-            <span className="subagent-helper-name">
-              {displayName}
-            </span>
-          )}
-        </TooltipProvider>
-
-        {/* Friendly message or fallback to name (AC4, AC5) */}
-        <span className="subagent-friendly-message">
-          {displayMessage}
-        </span>
-
-        {/* Type badge for debugging context (AC4) */}
-        <Badge variant="outline" data-testid="subagent-type-badge" className="subagent-type-badge">
-          {type}
-        </Badge>
-
-        <span className="subagent-count">{messageCount}</span>
-      </div>
-      {!isCollapsed && (
-        <div className="subagent-content">
-          {messages.map((msg, index) => renderMessage(msg, index))}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/public/components/TandemPortrait.tsx

@@ -1,72 +0,0 @@
-/**
- * TandemPortrait Component
- *
- * Renders backseat agent portrait below primary in PersonaHeader.
- * Story: MSSCI-14674 (96-1) - TandemPortrait Component
- * Epic: MSSCI-14673 (Cyclist Tandem UI)
- */
-
-import React, { useState } from 'react';
-
-export interface TandemPortraitProps {
-  character: string;
-  role: string;
-  slug: string;
-  theme: string;
-  isActive: boolean;
-  isThinking: boolean;
-}
-
-const AGENT_ABBREV: Record<string, string> = {
-  pm: 'PM',
-  sm: 'SM',
-  dev: 'DEV',
-  tea: 'TEA',
-  reviewer: 'REV',
-  architect: 'ARC',
-  devops: 'OPS',
-  'ux-designer': 'UX',
-  'tech-writer': 'TW',
-  orchestrator: 'ORC',
-  ba: 'BA',
-};
-
-export default function TandemPortrait({
-  character,
-  role,
-  slug,
-  theme,
-  isActive,
-  isThinking,
-}: TandemPortraitProps): React.ReactElement | null {
-  const [portraitError, setPortraitError] = useState(false);
-
-  if (!isActive) return null;
-
-  const abbrev = AGENT_ABBREV[role] || role.toUpperCase();
-
-  return (
-    <div
-      className={`persona-tandem-portrait${isThinking ? ' avatar-tandem-thinking' : ''}`}
-      data-testid="tandem-portrait"
-      role="img"
-      aria-label={`${character} (${role}) - observing`}
-      tabIndex={-1}
-    >
-      {!portraitError ? (
-        <img
-          src={`/portraits/${theme}/medium/${slug}.png`}
-          alt=""
-          aria-hidden="true"
-          className="tandem-portrait-image"
-          onError={() => setPortraitError(true)}
-        />
-      ) : (
-        <span className="tandem-portrait-fallback" aria-hidden="true">🤖</span>
-      )}
-      <span className="tandem-role-badge" data-testid="tandem-role-badge" aria-hidden="true">
-        {abbrev}
-      </span>
-    </div>
-  );
-}

package/src/public/components/ThemePalette/ThemePalette.css

@@ -1,179 +0,0 @@
-/**
- * ThemePalette Component Styles
- * Story MSSCI-12768 - Color Palette System
- *
- * The React component uses shadcn Popover + Command primitives for the
- * dropdown, search, keyboard nav, and click-outside handling.
- * These styles cover the trigger button, swatch rendering, and the
- * vanilla JS renderThemePalette() fallback which still uses custom DOM.
- */
-
-/* ==========================================================================
-   Trigger button (shared between React + vanilla)
-   ========================================================================== */
-
-.theme-palette-button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text-primary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease;
-}
-
-.theme-palette-button:hover {
-  border-color: var(--border-focus);
-  background: var(--bg-tertiary);
-}
-
-.theme-palette-button:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
-}
-
-.theme-palette-current {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.theme-palette-name {
-  font-weight: 500;
-}
-
-.theme-palette-chevron {
-  width: 14px;
-  height: 14px;
-  opacity: 0.6;
-}
-
-/* ==========================================================================
-   Popover content (React component)
-   ========================================================================== */
-
-.theme-palette-popover {
-  width: 260px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-}
-
-/* ==========================================================================
-   Swatches (shared between React + vanilla)
-   ========================================================================== */
-
-.preset-swatches {
-  display: flex;
-  gap: 2px;
-}
-
-.preset-swatch {
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  flex-shrink: 0;
-}
-
-.preset-name {
-  flex: 1;
-}
-
-.preset-check-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-/* ==========================================================================
-   Vanilla JS fallback (renderThemePalette)
-   These styles are only used by the imperative DOM-based renderer.
-   ========================================================================== */
-
-.theme-palette {
-  position: relative;
-  display: inline-block;
-}
-
-.theme-palette-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 100;
-  min-width: 220px;
-  max-height: 360px;
-  overflow-y: auto;
-  margin-top: 4px;
-  padding: 4px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-8px);
-  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
-}
-
-.theme-palette-menu.open {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-.theme-palette-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 8px 10px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-primary);
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 0.1s ease;
-}
-
-.theme-palette-option:hover,
-.theme-palette-option.focused {
-  background: var(--bg-tertiary);
-}
-
-.theme-palette-option.active {
-  background: rgba(79, 70, 229, 0.15);
-}
-
-.theme-palette-option:focus {
-  outline: none;
-  background: var(--bg-tertiary);
-  box-shadow: inset 0 0 0 1px var(--accent);
-}
-
-.preset-check {
-  color: var(--accent);
-  font-size: 12px;
-}
-
-.preset-group-header {
-  padding: 6px 10px 4px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  user-select: none;
-}
-
-.preset-group-header:not(:first-child) {
-  margin-top: 4px;
-  border-top: 1px solid var(--border);
-  padding-top: 8px;
-}