@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/css/theme-system.css

@@ -1,630 +0,0 @@
-/**
- * Theme System CSS
- *
- * Defines CSS custom properties for the color theme system.
- * These variables are updated dynamically when themes are applied.
- *
- * Story 35-7: Custom Styling Themes
- */
-
-/* =============================================================================
-   Root CSS Custom Properties (Default Dark Theme)
-   ============================================================================= */
-
-:root {
-  /* Font Settings (Story 35-6, MSSCI-12769) */
-  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', monospace;
-  --font-size-ui: 1rem;
-  --font-size-code: 1rem;
-
-  /* UI Colors */
-  --bg-primary: #1a1a2e;
-  --bg-secondary: #16213e;
-  --bg-tertiary: #0f0f1a;
-  --text-primary: #e4e4e7;
-  --text-secondary: #a1a1aa;
-  --text-muted: #71717a;
-  --accent: #4f46e5;
-  --accent-hover: #6366f1;
-  --border: #27272a;
-  --border-focus: #4f46e5;
-  --shadow: rgba(0,0,0,0.3);
-
-  /* Panel Colors */
-  --sidebar-bg: #16213e;
-  --message-bg: #1a1a2e;
-  --tool-bg: #0f0f1a;
-  --header-bg: #16213e;
-  --footer-bg: #16213e;
-
-  /* Status Colors */
-  --status-success: #22c55e;
-  --status-warning: #eab308;
-  --status-error: #ef4444;
-  --status-info: #3b82f6;
-
-  /* Tool Type Colors (MSSCI-13402) */
-  --tool-read-color: #3b82f6;    /* blue */
-  --tool-write-color: #f97316;   /* orange */
-  --tool-bash-color: #22c55e;    /* green */
-  --tool-glob-color: #a855f7;    /* purple */
-  --tool-grep-color: #06b6d4;    /* cyan */
-  --tool-edit-color: #eab308;    /* yellow */
-  --tool-task-color: #ec4899;    /* pink */
-  --tool-default-color: #6b7280; /* gray */
-
-  /* Terminal Colors */
-  --terminal-background: #0f0f1a;
-  --terminal-foreground: #e4e4e7;
-  --terminal-cursor: #e4e4e7;
-  --terminal-cursor-accent: #0f0f1a;
-  --terminal-selection-background: #4f46e5;
-  --terminal-black: #1a1a2e;
-  --terminal-red: #ff6b6b;
-  --terminal-green: #69db7c;
-  --terminal-yellow: #ffd43b;
-  --terminal-blue: #4f46e5;
-  --terminal-magenta: #cc5de8;
-  --terminal-cyan: #22b8cf;
-  --terminal-white: #e4e4e7;
-  --terminal-bright-black: #52525b;
-  --terminal-bright-red: #ff8787;
-  --terminal-bright-green: #8ce99a;
-  --terminal-bright-yellow: #ffe066;
-  --terminal-bright-blue: #748ffc;
-  --terminal-bright-magenta: #da77f2;
-  --terminal-bright-cyan: #66d9e8;
-  --terminal-bright-white: #fafafa;
-
-  /* Syntax Highlighting Colors */
-  --syntax-keyword: #c678dd;
-  --syntax-string: #98c379;
-  --syntax-number: #d19a66;
-  --syntax-comment: #5c6370;
-  --syntax-function: #61afef;
-  --syntax-variable: #e06c75;
-  --syntax-type: #e5c07b;
-  --syntax-operator: #56b6c2;
-  --syntax-punctuation: #abb2bf;
-  --syntax-tag: #e06c75;
-  --syntax-attribute: #d19a66;
-  --syntax-property: #61afef;
-}
-
-/* =============================================================================
-   Theme Application Helpers
-   ============================================================================= */
-
-/* Transition for smooth theme switching */
-.theme-transition,
-.theme-transition *,
-.theme-transition *::before,
-.theme-transition *::after {
-  transition: background-color 0.3s ease,
-              border-color 0.3s ease,
-              color 0.3s ease !important;
-}
-
-/* =============================================================================
-   Utility Classes for Theme Colors
-
-   NOTE: .bg-primary, .text-secondary, .text-muted etc. are generated by
-   Tailwind from tailwind.config.js. Do NOT duplicate them here — specificity
-   conflicts cause unpredictable results. Only define classes that Tailwind
-   does NOT generate (status colors, border-default, border-focus).
-   ============================================================================= */
-
-/* Status */
-.text-success { color: var(--status-success); }
-.text-warning { color: var(--status-warning); }
-.text-error { color: var(--status-error); }
-.text-info { color: var(--status-info); }
-
-/* Borders */
-.border-default { border-color: var(--border); }
-.border-focus { border-color: var(--border-focus); }
-
-/* =============================================================================
-   Syntax Highlighting
-   ============================================================================= */
-
-.syntax-keyword { color: var(--syntax-keyword); }
-.syntax-string { color: var(--syntax-string); }
-.syntax-number { color: var(--syntax-number); }
-.syntax-comment { color: var(--syntax-comment); }
-.syntax-function { color: var(--syntax-function); }
-.syntax-variable { color: var(--syntax-variable); }
-.syntax-type { color: var(--syntax-type); }
-.syntax-operator { color: var(--syntax-operator); }
-.syntax-punctuation { color: var(--syntax-punctuation); }
-.syntax-tag { color: var(--syntax-tag); }
-.syntax-attribute { color: var(--syntax-attribute); }
-.syntax-property { color: var(--syntax-property); }
-
-/* =============================================================================
-   Tool Call Block Styling (MSSCI-13402) - Klinger Redesign
-   ============================================================================= */
-
-/* Base tool call block — Tufte: indented, no border box */
-.tool-call-block {
-  background: none;
-  border-radius: 0;
-  border: none;
-  border-left: 2px solid var(--border);
-  overflow: hidden;
-  margin-left: 2.75rem; /* align with message content (avatar + gap) */
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  padding-left: 0.5rem;
-  transition: border-color 0.15s ease;
-}
-
-.tool-call-block:hover {
-  border-left-color: var(--accent);
-}
-
-/* Tool Header - compact single-line */
-.tool-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.125rem 0;
-  background: none;
-}
-
-/* Tool Type Badge - colored pill for instant recognition */
-.tool-type-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  padding: 0 0.375rem;
-  border-radius: 4px;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  text-transform: uppercase;
-  color: white;
-  flex-shrink: 0;
-  background-color: var(--tool-default-color);
-}
-
-/* Badge colors by tool type */
-.tool-call-block.tool-read .tool-type-badge { background-color: var(--tool-read-color); }
-.tool-call-block.tool-write .tool-type-badge { background-color: var(--tool-write-color); }
-.tool-call-block.tool-bash .tool-type-badge { background-color: var(--tool-bash-color); }
-.tool-call-block.tool-glob .tool-type-badge { background-color: var(--tool-glob-color); }
-.tool-call-block.tool-grep .tool-type-badge { background-color: var(--tool-grep-color); }
-.tool-call-block.tool-edit .tool-type-badge { background-color: var(--tool-edit-color); }
-.tool-call-block.tool-task .tool-type-badge { background-color: var(--tool-task-color); }
-
-/* Color the left border by tool type */
-.tool-call-block.tool-read { border-left-color: var(--tool-read-color); }
-.tool-call-block.tool-write { border-left-color: var(--tool-write-color); }
-.tool-call-block.tool-bash { border-left-color: var(--tool-bash-color); }
-.tool-call-block.tool-glob { border-left-color: var(--tool-glob-color); }
-.tool-call-block.tool-grep { border-left-color: var(--tool-grep-color); }
-.tool-call-block.tool-edit { border-left-color: var(--tool-edit-color); }
-.tool-call-block.tool-task { border-left-color: var(--tool-task-color); }
-
-/* Intent summary - the human-readable description */
-.tool-name {
-  flex: 1;
-  min-width: 0;
-  font-size: 0.8125rem;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Status indicator positioning */
-.tool-status {
-  display: flex;
-  align-items: center;
-}
-
-/* Duration display */
-.tool-duration {
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-  min-width: 3.5rem;
-  text-align: right;
-}
-
-/* Error state styling */
-.tool-call-block.tool-error {
-  border-left-color: var(--status-error) !important;
-}
-
-.tool-call-block.tool-error .tool-type-badge {
-  background-color: var(--status-error);
-}
-
-/* Result section header */
-.tool-result-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.125rem 0;
-  background: none;
-}
-
-.tool-result-toggle {
-  background: none;
-  border: none;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  border-radius: 4px;
-  transition: background-color 0.15s ease;
-}
-
-.tool-result-toggle:hover {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-}
-
-.tool-result-copy {
-  margin-left: auto;
-  background: none;
-  border: 1px solid var(--border);
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-  border-radius: 4px;
-  transition: all 0.15s ease;
-}
-
-.tool-result-copy:hover {
-  background-color: var(--bg-secondary);
-  border-color: var(--accent);
-  color: var(--text-primary);
-}
-
-.tool-result-copy.copied {
-  background-color: var(--status-success);
-  border-color: var(--status-success);
-  color: white;
-}
-
-/* Result content area */
-.tool-result-content {
-  max-height: 300px;
-  overflow: auto;
-  padding: 0.75rem;
-  background-color: var(--bg-tertiary);
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-}
-
-.tool-result-content.collapsed {
-  display: none;
-}
-
-.tool-result-content pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.tool-result-content.error-content {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-left: 3px solid var(--status-error);
-}
-
-/* Truncation expand button */
-.tool-result-expand {
-  display: block;
-  width: 100%;
-  margin-top: 0.5rem;
-  padding: 0.375rem;
-  background-color: var(--bg-secondary);
-  border: 1px dashed var(--border);
-  border-radius: 4px;
-  color: var(--accent);
-  font-size: 0.75rem;
-  cursor: pointer;
-  text-align: center;
-  transition: all 0.15s ease;
-}
-
-.tool-result-expand:hover {
-  background-color: var(--bg-tertiary);
-  border-color: var(--accent);
-}
-
-/* Status indicator styling */
-.tool-status-pending { color: var(--status-warning); }
-.tool-status-success { color: var(--status-success); }
-.tool-status-error { color: var(--status-error); }
-
-/* ToolStatus indicator component */
-.tool-status-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  font-size: 0.75rem;
-}
-
-.tool-status-indicator.status-pending {
-  color: var(--status-warning);
-}
-
-.tool-status-indicator.status-success {
-  color: var(--status-success);
-}
-
-.tool-status-indicator.status-error {
-  color: var(--status-error);
-}
-
-/* Spinner animation for pending state */
-.tool-status-indicator .spinner {
-  width: 0.75rem;
-  height: 0.75rem;
-  border: 2px solid var(--status-warning);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* =============================================================================
-   Tool Stack Styling (MSSCI-13400) - Klinger Redesign
-   ============================================================================= */
-
-/* Container for grouped tool calls */
-.tool-stack {
-  margin: 0.5rem 0;
-  margin-left: 2.75rem; /* align with message content */
-  border-radius: 0;
-  background: none;
-  border: none;
-  border-left: 2px solid var(--border);
-  padding-left: 0.5rem;
-}
-
-.tool-stack.collapsed {
-  /* Header always visible in collapsed state */
-}
-
-/* Stack Header - always visible */
-.tool-stack-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0;
-  cursor: pointer;
-  user-select: none;
-  background: none;
-  border-bottom: none;
-  transition: background-color 0.15s ease;
-}
-
-.tool-stack:not(.collapsed) .tool-stack-header {
-  border-bottom-color: transparent;
-}
-
-.tool-stack-header:hover {
-  background-color: var(--bg-secondary);
-}
-
-.tool-stack-header:focus {
-  outline: 2px solid var(--border-focus);
-  outline-offset: -2px;
-}
-
-/* Toggle chevron */
-.tool-stack-toggle {
-  font-size: 0.625rem;
-  color: var(--text-muted);
-  width: 0.875rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease;
-}
-
-/* Tool count - small de-emphasized badge */
-.tool-stack-count-badge {
-  font-weight: 600;
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-  background-color: var(--bg-tertiary);
-  padding: 0.0625rem 0.375rem;
-  border-radius: 9999px;
-  font-family: var(--font-mono);
-  min-width: 1.25rem;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-/* Active tool summary - the main visual element while running */
-.tool-stack-active-summary {
-  font-weight: 500;
-  font-size: 0.8125rem;
-  color: var(--text-primary);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Mini tool badges in collapsed header */
-.tool-stack-badges {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.tool-mini-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 3px;
-  font-size: 0.5625rem;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  color: white;
-}
-
-.tool-mini-badge.badge-read { background-color: var(--tool-read-color); }
-.tool-mini-badge.badge-write { background-color: var(--tool-write-color); }
-.tool-mini-badge.badge-bash { background-color: var(--tool-bash-color); }
-.tool-mini-badge.badge-glob { background-color: var(--tool-glob-color); }
-.tool-mini-badge.badge-grep { background-color: var(--tool-grep-color); }
-.tool-mini-badge.badge-edit { background-color: var(--tool-edit-color); }
-.tool-mini-badge.badge-task { background-color: var(--tool-task-color); }
-
-/* Summary in collapsed state - still prominent */
-.tool-stack-summary {
-  color: var(--text-secondary);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
-
-/* Total duration on the right */
-.tool-stack-duration {
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-  margin-left: auto;
-}
-
-/* Expanded content area */
-.tool-stack-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.25rem 0;
-  background: none;
-}
-
-/* Within a stack, tool blocks don't need extra indent or left border */
-.tool-stack-content .tool-call-block {
-  margin-left: 0;
-  border-left: none;
-  padding-left: 0;
-}
-
-/* Tool state classes within stack */
-.tool-stack-content .tool-current {
-  opacity: 1;
-}
-
-.tool-stack-content .tool-historical {
-  opacity: 0.85;
-}
-
-/* =============================================================================
-   ACPanel Styling (MSSCI-14763) - Tufte Treatment
-   ============================================================================= */
-
-/* Panel container */
-.ac-panel {
-  padding: 0.5rem;
-}
-
-/* Content wrapper — Tufte left border accent */
-.ac-content {
-  border-left: 2px solid var(--border);
-  padding-left: 0.5rem;
-  transition: border-color 0.15s ease;
-}
-
-.ac-content:hover {
-  border-left-color: var(--accent);
-}
-
-/* Progress counter — above the bar, not overlaid */
-.ac-panel .progress-text {
-  font-size: 0.6875rem;
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-muted);
-  margin-bottom: 0.25rem;
-  display: block;
-}
-
-/* Progress bar — Tufte: thin line, no rounded corners */
-.ac-panel .progress-bar-container {
-  position: relative;
-  height: 4px;
-  background: var(--border);
-  border-radius: 0;
-  margin-bottom: 0.5rem;
-  overflow: hidden;
-}
-
-.ac-panel .progress-bar {
-  height: 100%;
-  background: var(--accent);
-  border-radius: 0;
-  transition: width 0.3s ease;
-}
-
-/* Criteria list */
-.ac-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-/* Individual criterion */
-.ac-item {
-  display: flex;
-  align-items: baseline;
-  gap: 0.375rem;
-  padding: 0.125rem 0;
-  font-size: 0.8125rem;
-  color: var(--text-primary);
-}
-
-.ac-item.ac-done {
-  color: var(--text-muted);
-}
-
-/* Status icon */
-.ac-icon {
-  width: 1rem;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.ac-done .ac-icon {
-  color: var(--status-success);
-}
-
-/* Criterion text */
-.ac-text {
-  flex: 1;
-  min-width: 0;
-  line-height: 1.4;
-}
-
-.ac-done .ac-text {
-  text-decoration: line-through;
-  text-decoration-color: var(--text-muted);
-}

package/src/public/hooks/index.ts

@@ -1,49 +0,0 @@
-/**
- * React Hooks Index
- *
- * Story MSSCI-12717 - React Migration
- */
-
-// Data hooks
-export { useStory } from './useStory';
-export type { StoryData } from './useStory';
-
-export { useGitStatus } from './useGitStatus';
-export type { GitStatusData } from './useGitStatus';
-
-export { useTodos } from './useTodos';
-export type { TodoItem } from './useTodos';
-
-export { useBackgroundTasks } from './useBackgroundTasks';
-export type { BackgroundTask } from './useBackgroundTasks';
-
-export { useDiffs } from './useDiffs';
-export type { DiffData } from './useDiffs';
-
-// useMessageStream is deprecated - use ClaudeContext instead
-
-export { useStatsStrip } from './useStatsStrip';
-
-export { usePersona } from './usePersona';
-export type { PersonaData } from './usePersona';
-
-// Editor hooks
-export { useCommandHistory } from './useCommandHistory';
-export { useTabCompletion } from './useTabCompletion';
-export { useMessageQueue } from './useMessageQueue';
-export type { QueuedMessage } from './useMessageQueue';
-
-// Claude API hooks
-export { useClaude } from './useClaude';
-export type { UseClaudeResult, UseClaudeCallbacks, ClaudeMessage, PermissionMode, PastedImage } from './useClaude';
-
-// Content processing hooks
-export { useMarkdownParser } from './useMarkdownParser';
-export type { UseMarkdownParserResult } from './useMarkdownParser';
-
-export { useSyntaxHighlighter } from './useSyntaxHighlighter';
-export type { UseSyntaxHighlighterResult } from './useSyntaxHighlighter';
-
-// Agent load analysis
-export { useAgentLoad } from './useAgentLoad';
-export type { AgentLoadData, AgentLoadEntry, PruneResult } from './useAgentLoad';