@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

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

@@ -0,0 +1,630 @@
+/**
+ * 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/packages/core/src/public/hooks/index.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { 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';