@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/contexts/MessageQueueContext.tsx

@@ -1,143 +0,0 @@
-/**
- * MessageQueueContext
- *
- * React context for shared message queue state.
- * Story MSSCI-14191 - Bug fix for dual hook instances
- *
- * THE BUG: Editor.tsx and MessagePanel.tsx each called useMessageQueue() separately,
- * creating TWO independent state instances. Editor displayed the queue correctly,
- * but MessagePanel's injectMessage and handleTurnComplete operated on an empty queue.
- *
- * THE FIX: This context wraps useMessageQueue and provides a single shared instance
- * to all components that need queue access.
- */
-
-import React, { createContext, useContext, useMemo } from 'react';
-import {
-  useMessageQueue,
-  QueuedMessage,
-  BellConsumedCallback,
-  InjectDependencies,
-} from '../hooks/useMessageQueue';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-interface MessageQueueContextValue {
-  queue: QueuedMessage[];
-  queueCount: number;
-  isProcessing: boolean;
-  bellMode: boolean;
-  queuePaused: boolean;
-  queueMessage: (message: QueuedMessage) => boolean;
-  dequeueMessage: () => QueuedMessage | null;
-  removeFromQueue: (index: number) => void;
-  clearQueue: () => void;
-  setProcessing: (value: boolean) => void;
-  setBellMode: (value: boolean) => void;
-  pauseQueue: () => void;
-  resumeQueue: () => void;
-  handleTurnComplete: (onSubmit: (text: string, images: QueuedMessage['images']) => void) => void;
-  onBellConsumed: (callback: BellConsumedCallback) => () => void;
-  injectMessage: (index: number, deps: InjectDependencies) => Promise<boolean>;
-}
-
-// =============================================================================
-// Context
-// =============================================================================
-
-const MessageQueueContext = createContext<MessageQueueContextValue | null>(null);
-
-// =============================================================================
-// Provider
-// =============================================================================
-
-interface MessageQueueProviderProps {
-  children: React.ReactNode;
-}
-
-export function MessageQueueProvider({ children }: MessageQueueProviderProps): React.ReactElement {
-  // Single instance of useMessageQueue for the entire app
-  const {
-    queue,
-    queueCount,
-    isProcessing,
-    bellMode,
-    queuePaused,
-    queueMessage,
-    dequeueMessage,
-    removeFromQueue,
-    clearQueue,
-    setProcessing,
-    setBellMode,
-    pauseQueue,
-    resumeQueue,
-    handleTurnComplete,
-    onBellConsumed,
-    injectMessage,
-  } = useMessageQueue();
-
-  const value = useMemo(() => ({
-    queue,
-    queueCount,
-    isProcessing,
-    bellMode,
-    queuePaused,
-    queueMessage,
-    dequeueMessage,
-    removeFromQueue,
-    clearQueue,
-    setProcessing,
-    setBellMode,
-    pauseQueue,
-    resumeQueue,
-    handleTurnComplete,
-    onBellConsumed,
-    injectMessage,
-  }), [
-    queue,
-    queueCount,
-    isProcessing,
-    bellMode,
-    queuePaused,
-    queueMessage,
-    dequeueMessage,
-    removeFromQueue,
-    clearQueue,
-    setProcessing,
-    setBellMode,
-    pauseQueue,
-    resumeQueue,
-    handleTurnComplete,
-    onBellConsumed,
-    injectMessage,
-  ]);
-
-  return (
-    <MessageQueueContext.Provider value={value}>
-      {children}
-    </MessageQueueContext.Provider>
-  );
-}
-
-// =============================================================================
-// Hook
-// =============================================================================
-
-/**
- * Use the shared message queue context.
- * This replaces direct useMessageQueue() calls in components that need shared state.
- */
-export function useMessageQueueContext(): MessageQueueContextValue {
-  const context = useContext(MessageQueueContext);
-  if (!context) {
-    throw new Error('useMessageQueueContext must be used within a MessageQueueProvider');
-  }
-  return context;
-}
-
-// Re-export types for convenience
-export type { QueuedMessage, BellConsumedCallback, InjectDependencies };
-
-export default MessageQueueContext;

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

@@ -1,550 +0,0 @@
-/**
- * Theme Browser Styles (Story 24-5)
- *
- * Styles for the searchable, filterable theme browser component.
- */
-
-/* =============================================================================
-   Browser Container
-   ============================================================================= */
-
-
-.theme-browser-header {
-  display: flex;
-  gap: 12px;
-  padding: 12px;
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-  background: var(--header-bg, #f5f5f5);
-}
-
-.theme-browser-content {
-  display: flex;
-  gap: 16px;
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-  min-height: 300px;
-  max-height: 400px;
-}
-
-/* Grid wrapper takes remaining space (24-6) */
-.theme-grid-wrapper {
-  flex: 1 1 auto;
-  min-width: 350px;  /* Ensure cards don't get cut off */
-  overflow-y: auto;
-}
-
-.theme-browser-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px;
-  border-top: 1px solid var(--border-color, #e0e0e0);
-  background: var(--footer-bg, #f5f5f5);
-}
-
-/* =============================================================================
-   Search and Filter Controls
-   ============================================================================= */
-
-.theme-search-input {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid var(--input-border, #ccc);
-  border-radius: 4px;
-  font-size: 14px;
-  background: var(--input-bg, #fff);
-  color: var(--input-color, #333);
-}
-
-.theme-search-input:focus {
-  outline: none;
-  border-color: var(--accent-color, #0066cc);
-  box-shadow: 0 0 0 2px var(--accent-shadow, rgba(0, 102, 204, 0.2));
-}
-
-.theme-search-input::placeholder {
-  color: var(--placeholder-color, #999);
-}
-
-.theme-category-filter {
-  padding: 8px 12px;
-  border: 1px solid var(--input-border, #ccc);
-  border-radius: 4px;
-  font-size: 14px;
-  background: var(--input-bg, #fff);
-  color: var(--input-color, #333);
-  min-width: 150px;
-}
-
-.theme-category-filter:focus {
-  outline: none;
-  border-color: var(--accent-color, #0066cc);
-}
-
-/* =============================================================================
-   Theme Grid
-   ============================================================================= */
-
-.theme-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 12px;
-}
-
-/* =============================================================================
-   Theme Card
-   ============================================================================= */
-
-.theme-card {
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  border: 2px solid var(--card-border, #e0e0e0);
-  border-radius: 8px;
-  background: var(--card-bg, #fff);
-  cursor: pointer;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
-}
-
-.theme-card:hover {
-  border-color: var(--card-hover-border, #b0b0b0);
-  box-shadow: 0 2px 8px var(--card-hover-shadow, rgba(0, 0, 0, 0.1));
-}
-
-.theme-card:focus {
-  outline: none;
-  border-color: var(--accent-color, #0066cc);
-  box-shadow: 0 0 0 3px var(--accent-shadow, rgba(0, 102, 204, 0.3));
-}
-
-.theme-card.selected {
-  border-color: var(--selected-border, #0066cc);
-  background: var(--selected-bg, #e6f2ff);
-  box-shadow: 0 0 0 3px var(--selected-shadow, rgba(0, 102, 204, 0.2));
-}
-
-.theme-card.selected:hover {
-  border-color: var(--selected-border, #0066cc);
-}
-
-/* =============================================================================
-   Card Content
-   ============================================================================= */
-
-.theme-card-name {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--card-name-color, #333);
-  margin-bottom: 6px;
-  line-height: 1.3;
-}
-
-.theme-card-description {
-  font-size: 12px;
-  color: var(--card-desc-color, #666);
-  line-height: 1.4;
-  flex: 1;
-  margin-bottom: 8px;
-}
-
-.theme-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 11px;
-  padding-top: 8px;
-  border-top: 1px solid var(--card-divider, #eee);
-}
-
-.theme-card-category {
-  color: var(--card-category-color, #888);
-  background: var(--card-category-bg, #f0f0f0);
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-.theme-card-tier {
-  font-weight: 500;
-}
-
-/* =============================================================================
-   Tier Colors
-   ============================================================================= */
-
-.tier-s .theme-card-tier {
-  color: var(--tier-s-color, #ffd700);
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-}
-
-.tier-s {
-  border-left: 3px solid var(--tier-s-color, #ffd700);
-}
-
-.tier-a .theme-card-tier {
-  color: var(--tier-a-color, #c0c0c0);
-}
-
-.tier-a {
-  border-left: 3px solid var(--tier-a-color, #c0c0c0);
-}
-
-.tier-b .theme-card-tier {
-  color: var(--tier-b-color, #cd7f32);
-}
-
-.tier-b {
-  border-left: 3px solid var(--tier-b-color, #cd7f32);
-}
-
-.tier-u .theme-card-tier {
-  color: var(--tier-u-color, #888);
-}
-
-.tier-u {
-  border-left: 3px solid var(--tier-u-color, #888);
-}
-
-/* =============================================================================
-   Loading and Empty States
-   ============================================================================= */
-
-.theme-browser-loading,
-.theme-browser-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  color: var(--empty-color, #888);
-  font-size: 14px;
-}
-
-.theme-browser-loading {
-  font-style: italic;
-}
-
-/* =============================================================================
-   Buttons
-   ============================================================================= */
-
-.theme-browser-apply,
-.theme-browser-cancel {
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.theme-browser-cancel {
-  background: var(--cancel-bg, #f0f0f0);
-  border: 1px solid var(--cancel-border, #ccc);
-  color: var(--cancel-color, #333);
-}
-
-.theme-browser-cancel:hover {
-  background: var(--cancel-hover-bg, #e0e0e0);
-}
-
-.theme-browser-apply {
-  background: var(--apply-bg, #0066cc);
-  border: 1px solid var(--apply-border, #0055aa);
-  color: var(--apply-color, #fff);
-}
-
-.theme-browser-apply:hover:not(:disabled) {
-  background: var(--apply-hover-bg, #0055aa);
-}
-
-.theme-browser-apply:disabled {
-  background: var(--apply-disabled-bg, #ccc);
-  border-color: var(--apply-disabled-border, #bbb);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* =============================================================================
-   Dark Mode Support (via CSS variables)
-   ============================================================================= */
-
-@media (prefers-color-scheme: dark) {
-  .theme-browser-header,
-  .theme-browser-footer {
-    --header-bg: #2a2a2a;
-    --footer-bg: #2a2a2a;
-    --border-color: #444;
-  }
-
-  .theme-search-input,
-  .theme-category-filter {
-    --input-bg: #333;
-    --input-border: #555;
-    --input-color: #eee;
-    --placeholder-color: #777;
-  }
-
-  .theme-card {
-    --card-bg: #2a2a2a;
-    --card-border: #444;
-    --card-hover-border: #666;
-    --card-hover-shadow: rgba(0, 0, 0, 0.3);
-    --card-name-color: #eee;
-    --card-desc-color: #aaa;
-    --card-category-bg: #444;
-    --card-category-color: #aaa;
-    --card-divider: #444;
-  }
-
-  .theme-card.selected {
-    --selected-bg: #1a3a5a;
-    --selected-border: #4499dd;
-  }
-
-  .theme-browser-cancel {
-    --cancel-bg: #444;
-    --cancel-border: #555;
-    --cancel-color: #eee;
-    --cancel-hover-bg: #555;
-  }
-
-  .theme-preview-panel {
-    --preview-bg: #2a2a2a;
-    --preview-border: #444;
-    --preview-title-color: #eee;
-    --preview-meta-color: #aaa;
-    --preview-desc-color: #ccc;
-    --preview-role-bg: #444;
-    --preview-role-color: #ddd;
-    --preview-char-color: #eee;
-    --preview-quote-border: #666;
-    --preview-quote-color: #bbb;
-    --preview-empty-color: #777;
-  }
-}
-
-/* =============================================================================
-   Preview Panel (Story 24-6)
-   ============================================================================= */
-
-.theme-preview-panel {
-  width: 280px;
-  flex-shrink: 0;
-  border-left: 1px solid var(--preview-border, #e0e0e0);
-  padding: 16px;
-  overflow-y: auto;
-  background: var(--preview-bg, #fff);
-}
-
-.theme-preview-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.theme-preview-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--preview-empty-color, #888);
-  font-style: italic;
-  text-align: center;
-  padding: 20px;
-}
-
-.preview-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--preview-title-color, #333);
-}
-
-.preview-meta {
-  font-size: 12px;
-  color: var(--preview-meta-color, #666);
-}
-
-.preview-description {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--preview-desc-color, #555);
-}
-
-/* Agents list */
-.preview-agents {
-  margin-top: 8px;
-}
-
-.preview-agents h4 {
-  margin: 0 0 8px 0;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--preview-meta-color, #666);
-}
-
-.preview-agent {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-  border-bottom: 1px solid var(--card-divider, #eee);
-}
-
-.preview-agent:last-child {
-  border-bottom: none;
-}
-
-.preview-agent-role {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: var(--preview-role-bg, #f0f0f0);
-  color: var(--preview-role-color, #666);
-  min-width: 60px;
-  text-align: center;
-}
-
-.preview-agent-character {
-  font-size: 13px;
-  color: var(--preview-char-color, #333);
-}
-
-/* Quote styling */
-.preview-quote {
-  margin: 8px 0 0 0;
-  padding: 10px 12px;
-  border-left: 3px solid var(--preview-quote-border, #ccc);
-  font-style: italic;
-  font-size: 13px;
-  color: var(--preview-quote-color, #666);
-  background: var(--card-category-bg, rgba(0, 0, 0, 0.03));
-  border-radius: 0 4px 4px 0;
-}
-
-/* Tier styling for preview panel */
-.theme-preview-panel.tier-s {
-  border-left-color: var(--tier-s-color, #ffd700);
-}
-
-.theme-preview-panel.tier-s .preview-title {
-  color: var(--tier-s-color, #ffd700);
-}
-
-.theme-preview-panel.tier-a {
-  border-left-color: var(--tier-a-color, #c0c0c0);
-}
-
-.theme-preview-panel.tier-b {
-  border-left-color: var(--tier-b-color, #cd7f32);
-}
-
-.theme-preview-panel.tier-u {
-  border-left-color: var(--tier-u-color, #888);
-}
-
-/* =============================================================================
-   Favorites Section (Story 24-7)
-   ============================================================================= */
-
-.theme-favorites-section {
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-}
-
-.theme-favorites-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 12px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--favorites-header-color, #333);
-}
-
-.favorites-icon {
-  color: var(--favorites-star-color, #ffc107);
-  font-size: 16px;
-}
-
-.favorites-count {
-  font-weight: 400;
-  color: var(--favorites-count-color, #666);
-  font-size: 12px;
-}
-
-.theme-all-header {
-  margin-bottom: 12px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--all-header-color, #333);
-}
-
-/* Favorite button on card */
-.theme-card-favorite {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  color: var(--favorite-inactive-color, #ccc);
-  transition: color 0.15s ease, transform 0.1s ease;
-  z-index: 1;
-}
-
-.theme-card-favorite:hover {
-  color: var(--favorite-hover-color, #ffc107);
-  transform: scale(1.15);
-}
-
-.theme-card-favorite.is-favorite {
-  color: var(--favorite-active-color, #ffc107);
-}
-
-.theme-card-favorite:focus {
-  outline: none;
-}
-
-/* Card needs relative positioning for absolute favorite button */
-.theme-card {
-  position: relative;
-}
-
-/* Adjust card name to not overlap favorite button */
-.theme-card-name {
-  padding-right: 28px;
-}
-
-/* Dark mode support for favorites */
-@media (prefers-color-scheme: dark) {
-  .theme-favorites-section {
-    --border-color: #444;
-  }
-
-  .theme-favorites-header,
-  .theme-all-header {
-    --favorites-header-color: #eee;
-    --all-header-color: #eee;
-  }
-
-  .favorites-count {
-    --favorites-count-color: #aaa;
-  }
-
-  .theme-card-favorite {
-    --favorite-inactive-color: #555;
-    --favorite-hover-color: #ffc107;
-    --favorite-active-color: #ffc107;
-  }
-}