@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

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

@@ -0,0 +1,189 @@
+/**
+ * ProgressPanel - At-a-glance story dashboard
+ *
+ * Unified panel combining story context, workflow phase, AC completion,
+ * todo status, git changes, and context window usage.
+ *
+ * Story: MSSCI-14966 / 103-11
+ * Epic: 103 - BikeRack TUI
+ */
+
+import React from 'react';
+import { useStory } from '../../hooks/useStory';
+import { useSprint } from '../../hooks/useSprint';
+import { useTodos } from '../../hooks/useTodos';
+import { useGitStatus } from '../../hooks/useGitStatus';
+import { useStatsStrip } from '../../hooks/useStatsStrip';
+
+export function ProgressPanel(): React.ReactElement {
+  const { story, isLoading: storyLoading, error: storyError } = useStory();
+  const { data: sprintData, isLoading: sprintLoading } = useSprint();
+  const { todos } = useTodos();
+  const { gitStatus } = useGitStatus();
+  const { context } = useStatsStrip();
+
+  // Loading state
+  if (storyLoading || sprintLoading) {
+    return (
+      <div className="progress-panel loading" data-testid="progress-panel">
+        <div className="progress-loading">Loading...</div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (storyError) {
+    return (
+      <div className="progress-panel" data-testid="progress-panel">
+        <div className="error-message">{storyError.message}</div>
+      </div>
+    );
+  }
+
+  // Empty state
+  const currentStory = sprintData?.currentStory;
+  if (!story && !currentStory) {
+    return (
+      <div className="progress-panel" data-testid="progress-panel">
+        <div className="empty-state">
+          <div>No active story</div>
+          <div className="empty-hint">Run /sprint work to start</div>
+        </div>
+      </div>
+    );
+  }
+
+  // Merge data from story + sprint hooks
+  const storyId = story?.id ?? currentStory?.id ?? '';
+  const storyTitle = story?.title ?? currentStory?.title ?? '';
+  const storyPoints = story?.points ?? currentStory?.points ?? 0;
+  const jiraKey = currentStory?.jiraKey ?? '';
+  const storyStatus = story?.status ?? currentStory?.status ?? '';
+  const epic = story?.epic ?? currentStory?.epic ?? '';
+  const displayStatus = storyStatus.replace(/_/g, ' ');
+
+  // Workflow
+  const workflowType = story?.workflow ?? null;
+  const phases = story?.workflowPhases ?? null;
+  const hasWorkflow = workflowType || (phases && phases.length > 0);
+
+  // AC
+  const criteria = story?.criteria ?? null;
+  const hasCriteria = criteria != null && criteria.length > 0;
+  const completedAC = hasCriteria ? criteria.filter((c: any) => c.completed).length : 0;
+  const totalAC = hasCriteria ? criteria.length : 0;
+  const acPercent = totalAC > 0 ? Math.round((completedAC / totalAC) * 100) : 0;
+
+  // Todos
+  const hasTodos = todos && todos.length > 0;
+  const completedTodos = hasTodos ? todos.filter((t: any) => t.status === 'completed').length : 0;
+  const totalTodos = hasTodos ? todos.length : 0;
+  const activeTodo = hasTodos ? todos.find((t: any) => t.status === 'in_progress') : null;
+
+  // Git
+  const branch = gitStatus?.branch ?? '';
+  const modified = gitStatus?.modified ?? 0;
+  const untracked = gitStatus?.untracked ?? 0;
+  const ahead = gitStatus?.ahead ?? 0;
+  const behind = gitStatus?.behind ?? 0;
+
+  // Context
+  const contextPercent = context?.percent ?? 0;
+
+  return (
+    <div className="progress-panel" data-testid="progress-panel">
+      {/* Story Header (AC3) */}
+      <div className="progress-section" data-testid="progress-story-header">
+        <div className="story-header-row">
+          <span className="story-id">{storyId}</span>
+          <span className="story-points">{storyPoints}pt</span>
+          <span className="story-status">{displayStatus}</span>
+        </div>
+        <div className="story-title">{storyTitle}</div>
+        <div className="story-meta">
+          <span className="story-jira">{jiraKey}</span>
+          <span className="story-epic">{epic}</span>
+        </div>
+      </div>
+
+      {/* Workflow Row (AC4) */}
+      {hasWorkflow && (
+        <div className="progress-section" data-testid="progress-workflow-row">
+          {workflowType && (
+            <span className="workflow-badge">
+              {workflowType.toUpperCase() === 'TDD' || workflowType.toUpperCase() === 'BDD'
+                ? workflowType.toUpperCase()
+                : workflowType.charAt(0).toUpperCase() + workflowType.slice(1)}
+            </span>
+          )}
+          {phases && phases.length > 0 && (
+            <div className="phase-progress">
+              {phases.map((phase: any) => (
+                <div key={phase.name} className={`phase-step ${phase.status}`}>
+                  <span className="phase-label">{phase.label}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* AC Row (AC5) */}
+      {hasCriteria && (
+        <div className="progress-section" data-testid="progress-ac-row">
+          <span className="row-label">AC</span>
+          <span className="progress-count">{completedAC}/{totalAC}</span>
+          <div
+            className="progress-bar-container"
+            role="progressbar"
+            aria-valuenow={completedAC}
+            aria-valuemin={0}
+            aria-valuemax={totalAC}
+          >
+            <div className="progress-bar" style={{ width: `${acPercent}%` }} />
+          </div>
+        </div>
+      )}
+
+      {/* Todo Row (AC6) */}
+      {hasTodos && (
+        <div className="progress-section" data-testid="progress-todo-row">
+          <span className="row-label">Tasks</span>
+          <span className="progress-count">{completedTodos}/{totalTodos}</span>
+          <div className="progress-bar-container">
+            <div
+              className="progress-bar"
+              style={{ width: `${totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0}%` }}
+            />
+          </div>
+          {activeTodo && (
+            <span className="active-task">{activeTodo.activeForm || activeTodo.content}</span>
+          )}
+        </div>
+      )}
+
+      {/* Git Row (AC7) */}
+      <div className="progress-section" data-testid="progress-git-row">
+        <span className="git-branch">{branch}</span>
+        <span className="git-stats">{modified}M {untracked}U ↑{ahead} ↓{behind}</span>
+      </div>
+
+      {/* Context Row (AC8) */}
+      <div className="progress-section" data-testid="progress-context-row">
+        <span className="row-label">Context</span>
+        <span className="context-percent">{contextPercent}%</span>
+        <div
+          className="progress-bar-container"
+          role="progressbar"
+          aria-valuenow={contextPercent}
+          aria-valuemin={0}
+          aria-valuemax={100}
+        >
+          <div className="progress-bar" style={{ width: `${contextPercent}%` }} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProgressPanel;

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

@@ -0,0 +1,161 @@
+/**
+ * SettingsPanel - Read-only settings display with CLI reference
+ *
+ * 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 } 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?: string;
+    bell_mode?: boolean;
+    relay_mode?: boolean;
+    git_monitor?: boolean;
+    handoff_mode?: string;
+  };
+  pennyfarthing?: {
+    theme?: 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);
+}
+
+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 };
+
+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;
+
+  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);
+
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const response = await fetch('/api/settings');
+        if (response.ok) {
+          const data = await response.json();
+          setSettings(data as Settings);
+        }
+      } catch (err) {
+        console.error('[SettingsPanel] Failed to load settings:', err);
+      }
+    }
+
+    loadSettings();
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}/ws/settings`);
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'init' || data.type === 'update') {
+          setSettings(data.settings as Settings);
+        }
+      } catch (err) {
+        console.error('[SettingsPanel] Failed to parse WebSocket message:', err);
+      }
+    };
+
+    return () => ws.close();
+  }, []);
+
+  if (!settings) {
+    return (
+      <div className="settings-panel loading" data-testid="settings-panel">
+        <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" 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>
+
+      <section className="settings-section" style={sectionStyle}>
+        <h4>Fonts</h4>
+        <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>
+
+      <section className="settings-section" style={sectionStyle}>
+        <h4>Workflow</h4>
+        <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>
+  );
+}
+
+export default SettingsPanel;