@pennyfarthing/core 11.3.8 → 11.4.0

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

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

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

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

@@ -0,0 +1,72 @@
+/**
+ * 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/packages/core/src/public/components/ThemePalette/ThemePalette.css

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