@pennyfarthing/cyclist 9.3.0 → 10.0.0

package/src/public/components/panels/ChangedPanel.tsx

@@ -1,77 +1,63 @@
 /**
- * ChangedPanel - Display changed files (FileTree wrapper)
+ * ChangedPanel - Full file tree with changed file highlighting
  *
  * Story MSSCI-12717 - React Migration
  * ADR-0020 - Changed to use git as source of truth instead of /ws/diffs
+ *
+ * Shows full project directory tree with changed files highlighted.
+ * Uses /api/files for tree structure and /ws/git for change status.
  */
 
 import React, { useCallback, useMemo } from 'react';
-import FileTree, { FileChange, FileStatus } from '../FileTree';
-import { useGitStatus, DirtyFile } from '../../hooks/useGitStatus';
+import { FullFileTree } from '../FullFileTree';
+import { useGitStatus } from '../../hooks/useGitStatus';
+import type { FileStatus } from '../FileTree';
+import type { DirectoryEntry } from '../../hooks/useFileBrowser';
 
 /**
  * Map git status code to FileStatus
- * Git porcelain format: XY where X=index, Y=worktree
- * ?: untracked, A: added, M: modified, D: deleted, R: renamed, C: copied
  */
 function gitStatusToFileStatus(gitStatus: string): FileStatus {
   const indexStatus = gitStatus[0] || ' ';
   const workTreeStatus = gitStatus[1] || ' ';
 
-  // Deleted in either index or worktree
-  if (indexStatus === 'D' || workTreeStatus === 'D') {
-    return 'deleted';
-  }
-
-  // Untracked or newly added
-  if (indexStatus === '?' || indexStatus === 'A') {
-    return 'created';
-  }
-
-  // Everything else is modified (M, R, C, etc.)
+  if (indexStatus === 'D' || workTreeStatus === 'D') return 'deleted';
+  if (indexStatus === '?' || indexStatus === 'A') return 'created';
   return 'modified';
 }
 
-/**
- * Convert DirtyFile array to FileChange array
- */
-function dirtyFilesToFileChanges(dirtyFiles: DirtyFile[]): FileChange[] {
-  return dirtyFiles.map(file => ({
-    path: file.path,
-    status: gitStatusToFileStatus(file.status),
-  }));
-}
-
 export function ChangedPanel(): React.ReactElement {
   const { repos } = useGitStatus();
 
-  // Flatten all dirty files from all repos into FileChange array
-  const files = useMemo(() => {
-    const allFiles: FileChange[] = [];
+  // Build a Map<filePath, FileStatus> from all dirty files
+  const changedFiles = useMemo(() => {
+    const map = new Map<string, FileStatus>();
     for (const repo of repos) {
-      const repoFiles = dirtyFilesToFileChanges(repo.files);
-      // Prefix with repo name if multiple repos
-      if (repos.length > 1) {
-        for (const file of repoFiles) {
-          allFiles.push({
-            ...file,
-            path: `${repo.name}/${file.path}`,
-          });
-        }
-      } else {
-        allFiles.push(...repoFiles);
+      for (const file of repo.files) {
+        // Use full path from repo for matching against /api/files paths
+        const fullPath = repos.length > 1
+          ? `${repo.path}/${file.path}`
+          : `${repo.path}/${file.path}`;
+        map.set(fullPath, gitStatusToFileStatus(file.status));
+        // Also store relative path for fallback matching
+        map.set(file.path, gitStatusToFileStatus(file.status));
       }
     }
-    return allFiles;
+    return map;
   }, [repos]);
 
-  const handleFileClick = useCallback((file: FileChange) => {
-    console.log('[ChangedPanel] File clicked:', file.path);
+  const handleFileClick = useCallback((entry: DirectoryEntry, status?: FileStatus) => {
+    // Open file in editor via API
+    fetch('/api/files/edit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: entry.path }),
+    }).catch(err => console.error('[ChangedPanel] Failed to open file:', err));
   }, []);
 
   return (
     <div className="changed-panel" data-testid="changed-panel">
-      <FileTree files={files} onFileClick={handleFileClick} />
+      <FullFileTree changedFiles={changedFiles} onFileClick={handleFileClick} />
     </div>
   );
 }

package/src/public/components/panels/HotspotsPanel.tsx

@@ -0,0 +1,365 @@
+/**
+ * HotspotsPanel - Git history hotspot detector
+ *
+ * Shows files and directories with highest change frequency, bug fix concentration,
+ * and multi-author churn. Sortable table with time window controls.
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useHotspots, FileHotspot, DirectoryHotspot, HotspotRepoResult } from '../../hooks/useHotspots';
+
+type SortField = 'hotspot_score' | 'change_count' | 'bug_fix_count' | 'author_count' | 'churn' | 'path';
+type SortDirection = 'asc' | 'desc';
+type ViewMode = 'files' | 'dirs';
+
+const TIME_WINDOWS = [30, 60, 90] as const;
+
+function SortableHeader({
+  label,
+  field,
+  currentSort,
+  currentDirection,
+  onSort,
+  align = 'right',
+}: {
+  label: string;
+  field: SortField;
+  currentSort: SortField;
+  currentDirection: SortDirection;
+  onSort: (field: SortField) => void;
+  align?: 'left' | 'right';
+}) {
+  const isActive = currentSort === field;
+  const arrow = isActive ? (currentDirection === 'desc' ? ' v' : ' ^') : '';
+
+  return (
+    <th
+      className={`hotspots-th ${align === 'left' ? 'text-left' : 'text-right'} ${isActive ? 'active' : ''}`}
+      onClick={() => onSort(field)}
+      role="columnheader"
+      aria-sort={isActive ? (currentDirection === 'desc' ? 'descending' : 'ascending') : 'none'}
+      style={{ cursor: 'pointer', userSelect: 'none' }}
+    >
+      {label}{arrow}
+    </th>
+  );
+}
+
+function FileTable({
+  hotspots,
+  sortField,
+  sortDirection,
+  onSort,
+}: {
+  hotspots: FileHotspot[];
+  sortField: SortField;
+  sortDirection: SortDirection;
+  onSort: (field: SortField) => void;
+}) {
+  const sorted = useMemo(() => {
+    const items = [...hotspots];
+    items.sort((a, b) => {
+      const aVal = a[sortField as keyof FileHotspot];
+      const bVal = b[sortField as keyof FileHotspot];
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return sortDirection === 'desc' ? bVal - aVal : aVal - bVal;
+      }
+      const aStr = String(aVal);
+      const bStr = String(bVal);
+      return sortDirection === 'desc' ? bStr.localeCompare(aStr) : aStr.localeCompare(bStr);
+    });
+    return items;
+  }, [hotspots, sortField, sortDirection]);
+
+  return (
+    <table className="hotspots-table" role="table">
+      <thead>
+        <tr>
+          <SortableHeader label="Score" field="hotspot_score" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Changes" field="change_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Fixes" field="bug_fix_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Authors" field="author_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Churn" field="churn" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="File" field="path" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} align="left" />
+        </tr>
+      </thead>
+      <tbody>
+        {sorted.map((h) => (
+          <tr key={h.path}>
+            <td className="text-right">
+              <Badge variant={h.hotspot_score >= 50 ? 'destructive' : h.hotspot_score >= 25 ? 'outline' : 'secondary'}>
+                {h.hotspot_score.toFixed(1)}
+              </Badge>
+            </td>
+            <td className="text-right">{h.change_count}</td>
+            <td className="text-right">{h.bug_fix_count}</td>
+            <td className="text-right">{h.author_count}</td>
+            <td className="text-right">{h.churn}</td>
+            <td className="text-left">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="hotspots-filepath">{h.path}</span>
+                </TooltipTrigger>
+                <TooltipContent>{h.path}</TooltipContent>
+              </Tooltip>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function DirTable({
+  hotspots,
+  sortField,
+  sortDirection,
+  onSort,
+}: {
+  hotspots: DirectoryHotspot[];
+  sortField: SortField;
+  sortDirection: SortDirection;
+  onSort: (field: SortField) => void;
+}) {
+  const sorted = useMemo(() => {
+    const items = [...hotspots];
+    items.sort((a, b) => {
+      // Map file-centric fields to directory equivalents
+      const fieldMap: Record<string, keyof DirectoryHotspot> = {
+        change_count: 'total_changes',
+        bug_fix_count: 'total_bug_fixes',
+        author_count: 'avg_author_count',
+        churn: 'file_count',
+      };
+      const key = (fieldMap[sortField] || sortField) as keyof DirectoryHotspot;
+      const aVal = a[key];
+      const bVal = b[key];
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return sortDirection === 'desc' ? bVal - aVal : aVal - bVal;
+      }
+      return sortDirection === 'desc'
+        ? String(bVal).localeCompare(String(aVal))
+        : String(aVal).localeCompare(String(bVal));
+    });
+    return items;
+  }, [hotspots, sortField, sortDirection]);
+
+  return (
+    <table className="hotspots-table" role="table">
+      <thead>
+        <tr>
+          <SortableHeader label="Score" field="hotspot_score" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Changes" field="change_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Fixes" field="bug_fix_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Authors" field="author_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Files" field="churn" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
+          <SortableHeader label="Directory" field="path" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} align="left" />
+        </tr>
+      </thead>
+      <tbody>
+        {sorted.map((d) => (
+          <tr key={d.path}>
+            <td className="text-right">
+              <Badge variant={d.hotspot_score >= 50 ? 'destructive' : d.hotspot_score >= 25 ? 'outline' : 'secondary'}>
+                {d.hotspot_score.toFixed(1)}
+              </Badge>
+            </td>
+            <td className="text-right">{d.total_changes}</td>
+            <td className="text-right">{d.total_bug_fixes}</td>
+            <td className="text-right">{d.avg_author_count.toFixed(1)}</td>
+            <td className="text-right">{d.file_count}</td>
+            <td className="text-left">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="hotspots-filepath">{d.path}</span>
+                </TooltipTrigger>
+                <TooltipContent>{d.path}</TooltipContent>
+              </Tooltip>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export function HotspotsPanel(): React.ReactElement {
+  const [days, setDays] = useState<number>(90);
+  const [viewMode, setViewMode] = useState<ViewMode>('files');
+  const [sortField, setSortField] = useState<SortField>('hotspot_score');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  const { data, isLoading, error, refresh } = useHotspots({ days });
+
+  const handleSort = useCallback((field: SortField) => {
+    setSortField((prev) => {
+      if (prev === field) {
+        setSortDirection((d) => (d === 'desc' ? 'asc' : 'desc'));
+        return prev;
+      }
+      setSortDirection('desc');
+      return field;
+    });
+  }, []);
+
+  // Flatten results — single-repo returns fields directly, multi-repo has repo_results
+  const repoResults: HotspotRepoResult[] = useMemo(() => {
+    if (!data) return [];
+    if (data.repo_results) return data.repo_results;
+    // Single-repo result — wrap in array
+    if (data.file_hotspots) {
+      return [{
+        success: data.success,
+        repo_name: data.repo_name || '',
+        repo_path: data.repo_path || '',
+        time_window_days: data.time_window_days || days,
+        commit_count: data.commit_count || 0,
+        file_hotspots: data.file_hotspots || [],
+        directory_hotspots: data.directory_hotspots || [],
+      }];
+    }
+    return [];
+  }, [data, days]);
+
+  // Merge all file/dir hotspots across repos
+  const allFiles = useMemo(() => {
+    const files: FileHotspot[] = [];
+    for (const r of repoResults) {
+      if (r.success) files.push(...r.file_hotspots);
+    }
+    return files;
+  }, [repoResults]);
+
+  const allDirs = useMemo(() => {
+    const dirs: DirectoryHotspot[] = [];
+    for (const r of repoResults) {
+      if (r.success) dirs.push(...r.directory_hotspots);
+    }
+    return dirs;
+  }, [repoResults]);
+
+  const totalCommits = repoResults.reduce((sum, r) => sum + (r.commit_count || 0), 0);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="hotspots-panel loading" data-testid="hotspots-panel">
+        <div className="space-y-3 p-2">
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-3/4" />
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-5/6" />
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="hotspots-panel error" data-testid="hotspots-panel">
+        <div className="error-message">{error.message}</div>
+        <Button variant="outline" size="sm" onClick={refresh}>Retry</Button>
+      </div>
+    );
+  }
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className="hotspots-panel" data-testid="hotspots-panel">
+        {/* Controls bar */}
+        <div className="hotspots-controls">
+          <div className="hotspots-time-windows">
+            {TIME_WINDOWS.map((w) => (
+              <Button
+                key={w}
+                variant={days === w ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setDays(w)}
+              >
+                {w}d
+              </Button>
+            ))}
+          </div>
+
+          <div className="hotspots-view-toggle">
+            <Button
+              variant={viewMode === 'files' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setViewMode('files')}
+            >
+              Files
+            </Button>
+            <Button
+              variant={viewMode === 'dirs' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setViewMode('dirs')}
+            >
+              Dirs
+            </Button>
+          </div>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline" size="sm" onClick={refresh}>
+                Analyze
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Run hotspot analysis</TooltipContent>
+          </Tooltip>
+        </div>
+
+        {/* Summary */}
+        {data && (
+          <div className="hotspots-summary">
+            <span>{totalCommits} commits</span>
+            <span>{allFiles.length} files</span>
+            <span>{allDirs.length} dirs</span>
+          </div>
+        )}
+
+        {/* No data state */}
+        {!data && (
+          <div className="hotspots-empty">
+            <p>Click <strong>Analyze</strong> to detect code hotspots</p>
+          </div>
+        )}
+
+        {/* Table */}
+        {data && viewMode === 'files' && (
+          allFiles.length > 0 ? (
+            <FileTable
+              hotspots={allFiles.slice(0, 50)}
+              sortField={sortField}
+              sortDirection={sortDirection}
+              onSort={handleSort}
+            />
+          ) : (
+            <div className="hotspots-empty">No file hotspots found</div>
+          )
+        )}
+
+        {data && viewMode === 'dirs' && (
+          allDirs.length > 0 ? (
+            <DirTable
+              hotspots={allDirs.slice(0, 50)}
+              sortField={sortField}
+              sortDirection={sortDirection}
+              onSort={handleSort}
+            />
+          ) : (
+            <div className="hotspots-empty">No directory hotspots found</div>
+          )
+        )}
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export default HotspotsPanel;

package/src/public/components/panels/MessagePanel.tsx

@@ -15,6 +15,7 @@ import PersonaHeader from '../PersonaHeader';
 import StatsStrip from '../StatsStrip';
 import { useMessageQueueContext, QueuedMessage, InjectDependencies } from '../../contexts/MessageQueueContext';
 import { useClaudeContext } from '../../contexts/ClaudeContext';
+import { usePersona } from '../../hooks/usePersona';
 import type { ClaudeMessage } from '../../hooks/useClaude';
 import type { MessageData } from '../../types/message';
 
@@ -31,7 +32,14 @@ interface SDKToolUseBlock {
   input?: Record<string, unknown>;
 }
 
-type SDKContentBlock = SDKTextBlock | SDKToolUseBlock | { type: string; text?: string };
+interface SDKToolResultBlock {
+  type: 'tool_result';
+  tool_use_id?: string;
+  content?: string;
+  is_error?: boolean;
+}
+
+type SDKContentBlock = SDKTextBlock | SDKToolUseBlock | SDKToolResultBlock | { type: string; text?: string };
 
 interface SDKMessage {
   type: string;
@@ -140,7 +148,7 @@ function transformMessage(sdkMessage: SDKMessage): MessageData[] {
     return results;
   }
 
-  // Handle user messages
+  // Handle user messages (may contain tool_result blocks for completed Task tools)
   if (sdkMessage.type === 'user') {
     let content = '';
     const contentArray = sdkMessage.message?.content || sdkMessage.content;
@@ -151,6 +159,23 @@ function transformMessage(sdkMessage: SDKMessage): MessageData[] {
         )
         .map(block => block.text)
         .join('');
+
+      // MSSCI-14394: Extract tool_result blocks from user messages.
+      // The SDK delivers tool results inside user-type messages with tool_use_id
+      // matching the original tool_use's tool_id. Without extracting these,
+      // the subagent cleanup code never fires and spans accumulate forever.
+      const toolResultBlocks = contentArray.filter(
+        (block): block is SDKToolResultBlock => block.type === 'tool_result'
+      );
+      for (const resultBlock of toolResultBlocks) {
+        results.push({
+          type: 'tool_result',
+          tool_id: resultBlock.tool_use_id,
+          content: typeof resultBlock.content === 'string' ? resultBlock.content : '',
+          timestamp,
+          is_error: resultBlock.is_error,
+        });
+      }
     } else if (typeof contentArray === 'string') {
       content = contentArray;
     }
@@ -215,15 +240,23 @@ export function MessagePanel(): React.ReactElement {
     isStopping,
     bellMode,
     relayMode,
+    contextPercent,
+    currentAgent,
     handleStop,
     handleForceStop,
     handleReset,
     handleBellModeChange,
     handleRelayModeChange,
+    handleTirePump,
   } = useControlBar();
 
   // Claude context for WebSocket communication
-  const { send, abort, onMessage, onComplete, onError, onUserMessage, isConnected } = useClaudeContext();
+  const { send, abort, onMessage, onComplete, onError, onUserMessage, onClear, isConnected } = useClaudeContext();
+
+  // Persona context - capture current persona to stamp on agent messages
+  const { persona } = usePersona();
+  const personaRef = useRef(persona);
+  personaRef.current = persona;
 
   // Message queue context for turn complete handling and bell mode (shared with Editor)
   const { handleTurnComplete, pauseQueue, onBellConsumed, injectMessage } = useMessageQueueContext();
@@ -256,11 +289,36 @@ export function MessagePanel(): React.ReactElement {
     },
   };
 
-  // Handle incoming SDK message
+  // Handle incoming SDK message - stamp current persona on agent messages
   const handleSDKMessage = useCallback((sdkMessage: ClaudeMessage) => {
     const transformed = transformMessage(sdkMessage as SDKMessage);
     if (transformed.length > 0) {
-      setMessages(prev => [...prev, ...transformed]);
+      const p = personaRef.current;
+      const stamped = transformed.map(msg =>
+        msg.type === 'agent' && p
+          ? { ...msg, agentSlug: p.slug ?? undefined, agentTheme: p.theme ?? undefined, agentCharacter: p.character ?? undefined }
+          : msg
+      );
+
+      // MSSCI-14394: When tool_results arrive for completed Task tools, remove their
+      // subagent messages from the view (they have parent_id matching the tool_result's tool_id).
+      const completedTaskIds = stamped
+        .filter(m => m.type === 'tool_result' && !m.parent_id && m.tool_id)
+        .map(m => m.tool_id!);
+
+      if (completedTaskIds.length > 0) {
+        setMessages(prev => {
+          const idsToRemove = new Set(completedTaskIds.filter(id =>
+            prev.some(m => m.parent_id === id)
+          ));
+          if (idsToRemove.size > 0) {
+            return [...prev.filter(m => !m.parent_id || !idsToRemove.has(m.parent_id)), ...stamped];
+          }
+          return [...prev, ...stamped];
+        });
+      } else {
+        setMessages(prev => [...prev, ...stamped]);
+      }
     }
   }, []);
 
@@ -305,6 +363,19 @@ export function MessagePanel(): React.ReactElement {
     return cleanup;
   }, [onUserMessage]);
 
+  // Subscribe to clear events — insert a divider message
+  useEffect(() => {
+    const cleanup = onClear(() => {
+      setMessages(prev => [...prev, {
+        type: 'context_cleared',
+        content: 'Context cleared',
+        timestamp: Date.now(),
+      }]);
+      setIsProcessing(false);
+    });
+    return cleanup;
+  }, [onClear]);
+
   // Connect to Claude events via WebSocket context
   useEffect(() => {
     if (!isConnected) {
@@ -370,6 +441,9 @@ export function MessagePanel(): React.ReactElement {
             relayMode={relayMode}
             onBellModeChange={handleBellModeChange}
             onRelayModeChange={handleRelayModeChange}
+            contextPercent={contextPercent}
+            currentAgent={currentAgent}
+            onTirePump={handleTirePump}
           />
         </div>
       </div>

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

@@ -45,10 +45,6 @@ interface Settings {
     show_flow?: boolean;
     sidebar_width?: number;
   };
-  notifications?: {
-    phase_change?: boolean;
-    sound?: boolean;
-  };
   pennyfarthing?: {
     theme?: string;
   };
@@ -80,8 +76,8 @@ const PANEL_DISPLAY_NAMES: Record<string, string> = {
   settings: 'Settings',
 };
 
-// Panels that cannot be hidden (sacred center)
-const PROTECTED_PANELS = new Set(['message']);
+// Panels that cannot be hidden
+const PROTECTED_PANELS = new Set<string>();
 
 export function SettingsPanel(): React.ReactElement {
   const [settings, setSettings] = useState<Settings | null>(null);
@@ -147,6 +143,7 @@ export function SettingsPanel(): React.ReactElement {
 
     // Load color preset from project config
     loadPresetFromProject().then(presetId => {
+      applyPreset(presetId);
       setColorPreset(presetId);
     });
 
@@ -425,28 +422,6 @@ export function SettingsPanel(): React.ReactElement {
 
       <Separator className="my-2" />
 
-      <section className="settings-section">
-        <h4>Notifications</h4>
-        <div className="toggle-setting">
-          <Switch
-            checked={settings.notifications?.phase_change || false}
-            onCheckedChange={(checked: boolean) => handleToggle('notifications', 'phase_change', checked)}
-            disabled={saving}
-          />
-          Phase change alerts
-        </div>
-        <div className="toggle-setting">
-          <Switch
-            checked={settings.notifications?.sound || false}
-            onCheckedChange={(checked: boolean) => handleToggle('notifications', 'sound', checked)}
-            disabled={saving}
-          />
-          Sound effects
-        </div>
-      </section>
-
-      <Separator className="my-2" />
-
       <section className="settings-section">
         <h4>Panel Visibility</h4>
         <div className="panel-visibility-list">