@pennyfarthing/core 11.4.0 → 12.0.0

package/packages/core/src/public/components/panels/SettingsPanel.tsx

@@ -1,93 +1,85 @@
 /**
- * SettingsPanel - Settings/preferences panel
+ * SettingsPanel - Read-only settings display with CLI reference
  *
- * Story MSSCI-12717 - React Migration
- * Updated to match actual config.local.yaml structure
- * Story MSSCI-12817 - Added Color Palette section with ThemePalette
- * Story MSSCI-12769 - Added Fonts section with FontPicker
+ * Story 122-1: Converted from interactive controls to read-only display.
+ * Story 122-2: Added styling, fixed undefined values, removed Notifications, added CLI reference.
+ * Settings are changed via /pf-settings CLI, not through this panel.
+ * Panel updates live via WebSocket when settings change.
  */
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Switch } from '@/components/ui/switch';
-import { Separator } from '@/components/ui/separator';
-import { Skeleton } from '@/components/ui/skeleton';
-import { ThemePalette } from '../ThemePalette';
-import { FontPicker, FontSizePicker } from '../FontPicker';
-import {
-  applyPreset,
-  savePresetToProject,
-  loadPresetFromProject,
-  DEFAULT_PRESET,
-} from '../../utils/color-presets';
-import {
-  loadFontSettings,
-  saveFontSettings,
-  applyFontSettings,
-  DEFAULT_FONT_SETTINGS,
-  FontSettings,
-  FontSize,
-} from '../../utils/font-presets';
+import React, { useState, useEffect } from 'react';
 
 interface Settings {
+  theme?: string;
+  display?: {
+    colorPreset?: string;
+    fonts?: {
+      uiFont?: string;
+      uiFontSize?: string;
+      codeFont?: string;
+      codeFontSize?: string;
+      customUiFont?: string;
+      customCodeFont?: string;
+    };
+  };
   workflow?: {
-    permission_mode?: 'plan' | 'manual' | 'accept';
+    permission_mode?: string;
     bell_mode?: boolean;
     relay_mode?: boolean;
+    git_monitor?: boolean;
     handoff_mode?: string;
   };
-  display?: {
-    show_flow?: boolean;
-    sidebar_width?: number;
-  };
   pennyfarthing?: {
     theme?: string;
   };
 }
 
-interface ThemeMetadata {
-  id: string;
-  name: string;
-  tier: string;
+const DEFAULTS: Record<string, string> = {
+  'theme': 'firefly',
+  'display.colorPreset': 'tokyo-night',
+  'display.fonts.uiFont': 'system',
+  'display.fonts.uiFontSize': 'base',
+  'display.fonts.codeFont': 'jetbrains-mono',
+  'display.fonts.codeFontSize': 'base',
+  'workflow.bell_mode': 'false',
+  'workflow.relay_mode': 'false',
+  'workflow.permission_mode': 'plan',
+  'workflow.git_monitor': 'false',
+};
+
+function formatValue(val: unknown): string {
+  if (typeof val === 'boolean') return val ? 'true' : 'false';
+  return String(val);
 }
 
-// Tier sort order: S=0, A=1, B=2, unranked=3
-const TIER_ORDER: Record<string, number> = { S: 0, A: 1, B: 2 };
+const sectionStyle: React.CSSProperties = { padding: '8px 0' };
+const rowStyle: React.CSSProperties = { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '2px 0' };
+const labelStyle: React.CSSProperties = { opacity: 0.7 };
 
-// Panel display names for the visibility toggles
-const PANEL_DISPLAY_NAMES: Record<string, string> = {
-  changed: 'Changed Files',
-  diffs: 'Diffs',
-  debug: 'Debug',
-  'audit-log': 'Audit Log',
-  message: 'Message',
-  sprint: 'Sprint',
-  workflow: 'Workflow',
-  ac: 'AC',
-  todo: 'Todo',
-  background: 'Background',
-  git: 'Git',
-  settings: 'Settings',
-};
+function SettingRow({ label, dotPath, value }: { label: string; dotPath: string; value: unknown }) {
+  const isSet = value !== undefined && value !== null && value !== '';
+  const displayText = isSet ? formatValue(value) : DEFAULTS[dotPath] ?? '\u2014';
+  const isDefault = !isSet && dotPath in DEFAULTS;
 
-// Panels that cannot be hidden
-const PROTECTED_PANELS = new Set<string>();
+  return (
+    <div className="setting-row" style={rowStyle}>
+      <span className="setting-label" style={labelStyle}>{label} <span style={{ fontSize: '0.8em', opacity: 0.6 }}>{dotPath}</span></span>
+      <span className="setting-value" style={isDefault ? { fontStyle: 'italic', opacity: 0.6 } : undefined}>
+        {displayText}
+      </span>
+    </div>
+  );
+}
 
 export function SettingsPanel(): React.ReactElement {
   const [settings, setSettings] = useState<Settings | null>(null);
-  const [themes, setThemes] = useState<ThemeMetadata[]>([]);
-  const [saving, setSaving] = useState(false);
-  const [colorPreset, setColorPreset] = useState<string>(DEFAULT_PRESET);
-  const [fontSettings, setFontSettings] = useState<FontSettings>(DEFAULT_FONT_SETTINGS);
 
   useEffect(() => {
-    // Load settings via REST
     async function loadSettings() {
       try {
-        console.log('[SettingsPanel] Loading settings via REST');
         const response = await fetch('/api/settings');
         if (response.ok) {
           const data = await response.json();
-          console.log('[SettingsPanel] Settings loaded:', data);
           setSettings(data as Settings);
         }
       } catch (err) {
@@ -95,24 +87,8 @@ export function SettingsPanel(): React.ReactElement {
       }
     }
 
-    // Load theme metadata via REST
-    async function loadThemes() {
-      try {
-        const response = await fetch('/api/settings/themes');
-        if (response.ok) {
-          const data = await response.json();
-          setThemes((data.themes || []) as ThemeMetadata[]);
-        }
-      } catch (err) {
-        console.error('[SettingsPanel] Failed to load themes:', err);
-      }
-    }
-
     loadSettings();
-    loadThemes();
 
-    // WebSocket subscription for real-time sync
-    console.log('[SettingsPanel] Connecting to /ws/settings for real-time sync');
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const ws = new WebSocket(`${protocol}//${window.location.host}/ws/settings`);
 
@@ -120,7 +96,6 @@ export function SettingsPanel(): React.ReactElement {
       try {
         const data = JSON.parse(event.data);
         if (data.type === 'init' || data.type === 'update') {
-          console.log('[SettingsPanel] Settings update via WebSocket:', data.settings);
           setSettings(data.settings as Settings);
         }
       } catch (err) {
@@ -128,232 +103,57 @@ export function SettingsPanel(): React.ReactElement {
       }
     };
 
-    ws.onerror = (err) => {
-      console.error('[SettingsPanel] WebSocket error:', err);
-    };
-
-    // Load color preset from project config
-    loadPresetFromProject().then(presetId => {
-      applyPreset(presetId);
-      setColorPreset(presetId);
-    });
-
-    // Load font settings
-    loadFontSettings().then(settings => {
-      setFontSettings(settings);
-      applyFontSettings(settings);
-    });
-
     return () => ws.close();
   }, []);
 
-
-
-  // Sort themes: by tier (S > A > B > U), then alphabetically by name
-  const sortedThemes = useMemo(() => {
-    return [...themes].sort((a, b) => {
-      const tierDiff = (TIER_ORDER[a.tier] ?? 3) - (TIER_ORDER[b.tier] ?? 3);
-      if (tierDiff !== 0) return tierDiff;
-      return a.name.localeCompare(b.name);
-    });
-  }, [themes]);
-
-  const handleThemeChange = useCallback(async (theme: string) => {
-    if (!settings) return;
-
-    setSaving(true);
-    try {
-      const updated = {
-        ...settings,
-        pennyfarthing: { ...settings.pennyfarthing, theme },
-      };
-
-      // Use REST API
-      await fetch('/api/settings', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ pennyfarthing: { theme } }),
-      });
-      setSettings(updated);
-    } finally {
-      setSaving(false);
-    }
-  }, [settings]);
-
-  const handleToggle = useCallback(async (section: string, key: string, value: boolean) => {
-    if (!settings) return;
-
-    console.log(`[SettingsPanel] Toggle ${section}.${key} = ${value}`);
-    setSaving(true);
-    try {
-      const updated = {
-        ...settings,
-        [section]: { ...(settings as Record<string, Record<string, unknown>>)[section], [key]: value },
-      };
-
-      // Use REST API
-      console.log('[SettingsPanel] Saving via REST');
-      await fetch('/api/settings', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ [section]: { [key]: value } }),
-      });
-      console.log('[SettingsPanel] Save complete, updating local state');
-      setSettings(updated);
-    } finally {
-      setSaving(false);
-    }
-  }, [settings]);
-
-  const handleColorPresetChange = useCallback(async (presetId: string) => {
-    setSaving(true);
-    try {
-      applyPreset(presetId);
-      await savePresetToProject(presetId);
-      setColorPreset(presetId);
-    } finally {
-      setSaving(false);
-    }
-  }, []);
-
-  const handleFontChange = useCallback(async (
-    type: 'ui' | 'code',
-    presetId: string,
-    customFamily?: string
-  ) => {
-    setSaving(true);
-    try {
-      const updated: FontSettings = {
-        ...fontSettings,
-        [type === 'ui' ? 'uiFont' : 'codeFont']: presetId,
-        ...(presetId === 'custom' && customFamily
-          ? { [type === 'ui' ? 'customUiFont' : 'customCodeFont']: customFamily }
-          : {}),
-      };
-      applyFontSettings(updated);
-      await saveFontSettings(updated);
-      setFontSettings(updated);
-    } finally {
-      setSaving(false);
-    }
-  }, [fontSettings]);
-
-  const handleFontSizeChange = useCallback(async (type: 'ui' | 'code', size: FontSize) => {
-    setSaving(true);
-    try {
-      const updated: FontSettings = {
-        ...fontSettings,
-        [type === 'ui' ? 'uiFontSize' : 'codeFontSize']: size,
-      };
-      applyFontSettings(updated);
-      await saveFontSettings(updated);
-      setFontSettings(updated);
-    } finally {
-      setSaving(false);
-    }
-  }, [fontSettings]);
-
   if (!settings) {
     return (
       <div className="settings-panel loading" data-testid="settings-panel">
-        <div className="space-y-4 p-2">
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-8 w-full" />
-          <Skeleton className="h-4 w-32" />
-          <Skeleton className="h-8 w-full" />
-          <Skeleton className="h-4 w-20" />
-          <Skeleton className="h-6 w-48" />
-        </div>
+        <div className="space-y-4 p-2">Loading settings...</div>
       </div>
     );
   }
 
+  const theme = settings.theme || settings.pennyfarthing?.theme;
+
   return (
     <div className="settings-panel" data-testid="settings-panel">
-      <section className="settings-section">
-        <h4>Theme</h4>
-        <select
-          value={settings.pennyfarthing?.theme || ''}
-          onChange={(e) => handleThemeChange(e.target.value)}
-          disabled={saving}
-          className="theme-select"
-        >
-          {sortedThemes.map(theme => (
-            <option key={theme.id} value={theme.id}>
-              [{theme.tier || 'Unranked'}] {theme.name}
-            </option>
-          ))}
-        </select>
+      <section className="settings-section" style={sectionStyle}>
+        <h4>Theme &amp; Display</h4>
+        <SettingRow label="Theme" dotPath="theme" value={theme} />
+        <SettingRow label="Color Preset" dotPath="display.colorPreset" value={settings.display?.colorPreset} />
       </section>
 
-      <Separator className="my-2" />
-
-      <section className="settings-section">
-        <h4>Color Palette</h4>
-        <ThemePalette
-          currentPreset={colorPreset}
-          onSelect={handleColorPresetChange}
-        />
-      </section>
-
-      <Separator className="my-2" />
-
-      <section className="settings-section">
+      <section className="settings-section" style={sectionStyle}>
         <h4>Fonts</h4>
-        <div className="font-setting">
-          <label>UI Font</label>
-          <FontPicker
-            type="ui"
-            currentFont={fontSettings.uiFont}
-            customFont={fontSettings.customUiFont}
-            onSelect={(id, custom) => handleFontChange('ui', id, custom)}
-          />
-          <FontSizePicker
-            currentSize={fontSettings.uiFontSize}
-            onSelect={(size) => handleFontSizeChange('ui', size)}
-          />
-        </div>
-        <div className="font-setting">
-          <label>Code Font</label>
-          <FontPicker
-            type="code"
-            currentFont={fontSettings.codeFont}
-            customFont={fontSettings.customCodeFont}
-            onSelect={(id, custom) => handleFontChange('code', id, custom)}
-          />
-          <FontSizePicker
-            currentSize={fontSettings.codeFontSize}
-            onSelect={(size) => handleFontSizeChange('code', size)}
-          />
-        </div>
+        <SettingRow label="UI Font" dotPath="display.fonts.uiFont"
+          value={settings.display?.fonts?.uiFont === 'custom'
+            ? settings.display?.fonts?.customUiFont
+            : settings.display?.fonts?.uiFont} />
+        <SettingRow label="UI Font Size" dotPath="display.fonts.uiFontSize" value={settings.display?.fonts?.uiFontSize} />
+        <SettingRow label="Code Font" dotPath="display.fonts.codeFont"
+          value={settings.display?.fonts?.codeFont === 'custom'
+            ? settings.display?.fonts?.customCodeFont
+            : settings.display?.fonts?.codeFont} />
+        <SettingRow label="Code Font Size" dotPath="display.fonts.codeFontSize" value={settings.display?.fonts?.codeFontSize} />
       </section>
 
-      <Separator className="my-2" />
-
-      <section className="settings-section">
+      <section className="settings-section" style={sectionStyle}>
         <h4>Workflow</h4>
-        {window.__CYCLIST_MODE__ === 'cyclist' && (
-          <div className="toggle-setting">
-            <Switch
-              checked={settings.workflow?.bell_mode || false}
-              onCheckedChange={(checked: boolean) => handleToggle('workflow', 'bell_mode', checked)}
-              disabled={saving}
-            />
-            Bell Mode
-            <span className="setting-description">Inject queued messages via PostToolUse hook instead of waiting</span>
-          </div>
-        )}
-        <div className="toggle-setting">
-          <Switch
-            checked={settings.workflow?.relay_mode || false}
-            onCheckedChange={(checked: boolean) => handleToggle('workflow', 'relay_mode', checked)}
-            disabled={saving}
-          />
-          Relay Mode
-          <span className="setting-description">Auto-handoff to next agent</span>
-        </div>
+        <SettingRow label="Bell Mode" dotPath="workflow.bell_mode" value={settings.workflow?.bell_mode} />
+        <SettingRow label="Relay Mode" dotPath="workflow.relay_mode" value={settings.workflow?.relay_mode} />
+        <SettingRow label="Permission Mode" dotPath="workflow.permission_mode" value={settings.workflow?.permission_mode} />
+        <SettingRow label="Git Monitor" dotPath="workflow.git_monitor" value={settings.workflow?.git_monitor} />
       </section>
 
+      <section className="settings-section" style={sectionStyle}>
+        <h4>CLI Reference</h4>
+        <div style={{ fontSize: '0.85em', opacity: 0.8 }}>
+          <div>/pf-settings show</div>
+          <div>/pf-settings get &lt;key&gt;</div>
+          <div>/pf-settings set &lt;key&gt; &lt;value&gt;</div>
+        </div>
+      </section>
     </div>
   );
 }

package/packages/core/src/public/components/panels/SprintPanel.tsx

@@ -13,7 +13,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { Skeleton } from '@/components/ui/skeleton';
 import { Separator } from '@/components/ui/separator';
 import { useStory } from '../../hooks/useStory';
-import { useSprint, type SprintStory, type SprintEpic, type FutureEpic, type FutureEpicChild } from '../../hooks/useSprint';
+import { useSprint, type SprintStory, type SprintEpic, type SprintRegistry, type FutureEpic, type FutureEpicChild } from '../../hooks/useSprint';
 
 // =============================================================================
 // Original SprintPanel (unchanged)
@@ -308,6 +308,7 @@ function EpicGroup({
         >
           {isExpanded ? '▼' : '▶'}
         </Button>
+        <span className="epic-ordinal">{epic.id}</span>
         <span className="epic-title">{epic.title}</span>
         {epic.jiraKey && <span className="epic-jira">{epic.jiraKey}</span>}
         <CopyButton text={`${epic.id} ${epic.title}`} />
@@ -376,6 +377,7 @@ function EpicGroup({
               >
                 <PriorityDot priority={story.priority} storyId={story.id} />
                 <StatusBadge status={story.status} storyId={story.id} />
+                <span className="story-ordinal" data-testid={`story-ordinal-${story.id}`}>{story.id}</span>
                 {story.jiraKey && <JiraLink jiraKey={story.jiraKey} storyId={story.id} />}
                 <CopyButton text={`${story.id} ${story.title}`} />
                 <div className="story-info">
@@ -575,6 +577,14 @@ export function EnhancedSprintPanel(): React.ReactElement {
       {errorToast}
       {confirmDialog}
 
+      {/* Provenance indicator for non-default sprint */}
+      {data?.registry && !data.registry.isDefault && (
+        <div className="sprint-provenance flex flex-row items-center gap-2" data-testid="sprint-provenance">
+          <Badge variant="secondary" data-testid="sprint-type-badge">{data.registry.type}</Badge>
+          <span data-testid="sprint-name">{data.registry.name}</span>
+        </div>
+      )}
+
       {/* Section 1: Current Story */}
       <section data-section="current-story">
         <h2>Current Story</h2>

package/packages/core/src/public/components/panels/index.ts

@@ -11,7 +11,6 @@ export { GitPanel } from './GitPanel';
 export { WorkflowPanel } from './WorkflowPanel';
 export { ACPanel } from './ACPanel';
 export { TodoPanel } from './TodoPanel';
-export { BackgroundPanel } from './BackgroundPanel';
 export { DiffsPanel } from './DiffsPanel';
 export { DiffView } from './DiffView';
 export { DebugPanel } from './DebugPanel';

package/packages/core/src/public/data-source.ts

@@ -0,0 +1,117 @@
+/**
+ * DataSource<T> — Abstract data provider interface.
+ *
+ * Story 124-3: Decouples panel hooks from transport (WebSocket, REST, mock).
+ * Implementations live in their respective packages:
+ * - WebSocketDataSource: packages/bikerack/
+ * - MockDataSource: here (for testing)
+ */
+
+// =============================================================================
+// Configuration
+// =============================================================================
+
+/** Options for parameterized queries and multi-session composition */
+export interface DataSourceOptions {
+  /** Query parameters passed to the data source */
+  params?: Record<string, string>;
+  /** Session identifier for multi-session support */
+  sessionId?: string;
+  /** Custom endpoint path override */
+  endpoint?: string;
+}
+
+// =============================================================================
+// DataSource<T> Interface
+// =============================================================================
+
+/** Callback for unsubscribing from data updates */
+export type Unsubscribe = () => void;
+
+/**
+ * Abstract data provider interface.
+ *
+ * Implementations handle transport details (WebSocket, HTTP, in-memory).
+ * Consumers subscribe to typed data updates without knowing the transport.
+ */
+export interface DataSource<T> {
+  /** Connect to the data source and begin receiving updates */
+  connect(options?: DataSourceOptions): void;
+
+  /** Disconnect and clean up resources */
+  disconnect(): void;
+
+  /** Subscribe to data updates. Returns an unsubscribe function. */
+  subscribe(callback: (data: T) => void): Unsubscribe;
+
+  /** Register an error handler */
+  onError(callback: (error: Error) => void): Unsubscribe;
+
+  /** Whether the data source is currently connected */
+  isConnected(): boolean;
+
+  /** Send a message back to the data source (for bidirectional sources) */
+  send?(message: unknown): void;
+}
+
+// =============================================================================
+// MockDataSource<T> — Test implementation
+// =============================================================================
+
+/**
+ * In-memory DataSource for testing. Allows pushing data to subscribers
+ * without any network transport.
+ */
+export class MockDataSource<T> implements DataSource<T> {
+  private subscribers: Set<(data: T) => void> = new Set();
+  private errorSubscribers: Set<(error: Error) => void> = new Set();
+  private connected = false;
+  private sentMessages: unknown[] = [];
+
+  connect(): void {
+    this.connected = true;
+  }
+
+  disconnect(): void {
+    this.connected = false;
+    this.subscribers.clear();
+    this.errorSubscribers.clear();
+  }
+
+  subscribe(callback: (data: T) => void): Unsubscribe {
+    this.subscribers.add(callback);
+    return () => this.subscribers.delete(callback);
+  }
+
+  onError(callback: (error: Error) => void): Unsubscribe {
+    this.errorSubscribers.add(callback);
+    return () => this.errorSubscribers.delete(callback);
+  }
+
+  isConnected(): boolean {
+    return this.connected;
+  }
+
+  send(message: unknown): void {
+    this.sentMessages.push(message);
+  }
+
+  /** Emit data to all subscribers (test helper) */
+  emit(data: T): void {
+    for (const cb of this.subscribers) {
+      cb(data);
+    }
+  }
+
+  /** Emit an error to all error subscribers (test helper) */
+  emitError(error: Error): void {
+    for (const cb of this.errorSubscribers) {
+      cb(error);
+    }
+  }
+
+  /** Get all messages sent via send() (test helper) */
+  getSentMessages(): unknown[] {
+    return [...this.sentMessages];
+  }
+}

package/packages/core/src/public/hooks/index.ts

@@ -14,9 +14,6 @@ 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';
 

package/packages/core/src/public/hooks/useAgentLoad.ts

@@ -1,3 +1,4 @@
+// Story 124-3: REST-based DataSource<T> variant
 import { useState, useCallback, useRef, useEffect } from 'react';
 
 export interface AgentLoadComponent {

package/packages/core/src/public/hooks/useCodeMarkers.ts

@@ -1,5 +1,6 @@
 /**
  * useCodeMarkers React hook — Story 80-3 (MSSCI-14456)
+ * Story 124-3 - DataSource<T> pattern (REST variant)
  *
  * Wraps /api/code-markers endpoint with AbortController,
  * loading/error/data state management, and manual refresh.

package/packages/core/src/public/hooks/useComplexity.ts

@@ -1,3 +1,4 @@
+// Story 124-3: REST-based DataSource<T> variant
 import { useState, useCallback, useRef, useEffect } from 'react';
 
 export interface FileComplexity {