@pennyfarthing/cyclist 9.3.0 → 10.0.0

package/dist/workflow-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-presets.js","sourceRoot":"","sources":["../src/workflow-presets.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAyC1D;;GAEG;AACH,MAAM,UAAU,4BAA4B,CAC1C,WAAmC;IAEnC,OAAO,WAAW,CAAC,WAAW,IAAI,EAAE,CAAC;AACvC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,OAAmC;IAEnC,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC;IAClC,MAAM,OAAO,GAA+B,EAAE,CAAC;IAC/C,MAAM,OAAO,GAA+B,EAAE,CAAC;IAE/C,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CACjC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAC1D,CAAC;QACF,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,OAAO;QACL,UAAU,EAAE,OAAO,CAAC,MAAM,KAAK,CAAC;QAChC,OAAO;QACP,OAAO;KACR,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,+BAA+B,CAC7C,WAAuC,EACvC,OAAkE;IAElE,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,IAAI,EAAE,0BAA0B;QAChC,WAAW;KACZ,CAAC,CAAC;IACH,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,CAAC;YAC5B,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAChC,WAAuC,EACvC,YAAoB;IAEpB,OAAO;QACL,IAAI,EAAE,0BAA0B;QAChC,YAAY;QACZ,WAAW;KACZ,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,WAAuC,EACvC,UAAyC;IAEzC,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;QAC/B,QAAQ,CAAC;YACP,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,UAAU,EAAE,UAAU;YACtB,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;SACrC,CAAC,CAAC;IACL,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO;QACL,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,yCAAyC;KAClD,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,2BAA2B,CACzC,OAAe;IAEf,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjC,OAAO;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pennyfarthing/cyclist",
-  "version": "9.3.0",
+  "version": "10.0.0",
   "description": "Visual terminal interface for Claude Code",
   "author": "1898andCo",
   "type": "module",
@@ -115,7 +115,7 @@
   "build": {
     "appId": "com.cyclist.app",
     "productName": "Cyclist",
-    "copyright": "Copyright © 2026",
+    "copyright": "Copyright \u00a9 2026",
     "asar": true,
     "directories": {
       "output": "release",

package/src/public/App.tsx

@@ -9,7 +9,7 @@
  * Persists layout changes to config.local.yaml.
  */
 
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import {
   DockviewWorkspace,
   registerPanelComponent,
@@ -20,7 +20,11 @@ import { ClaudeProvider } from './contexts/ClaudeContext';
 import { MessageQueueProvider } from './contexts/MessageQueueContext';
 import { useLayoutPersistence } from './hooks/useLayoutPersistence';
 import { loadFontSettings, applyFontSettings } from './utils/font-presets';
+import { loadPresetFromProject, applyPreset } from './utils/color-presets';
 import { ErrorBoundary } from './components/ErrorBoundary';
+import ApprovalModal, { useApprovalModal } from './components/ApprovalModal';
+import { subscribeToPermissionRequests, sendPermissionResponse, createApprovalResponse } from './components/ApprovalModal';
+import type { ApprovalRequest, GrantScope } from './components/ApprovalModal';
 
 // Import all panel components
 // Note: ProgressPanel split into Workflow/AC/Todo panels (MSSCI-14188)
@@ -38,6 +42,7 @@ import {
   SettingsPanel,
   AuditLogPanel,
   TTYPanel,
+  HotspotsPanel,
 } from './components/panels';
 
 // =============================================================================
@@ -63,6 +68,7 @@ registerPanelComponent(PANEL_INVENTORY.AC, ACPanel);
 registerPanelComponent(PANEL_INVENTORY.TODO, TodoPanel);
 registerPanelComponent(PANEL_INVENTORY.BACKGROUND, BackgroundPanel);
 registerPanelComponent(PANEL_INVENTORY.GIT, GitPanel);
+registerPanelComponent(PANEL_INVENTORY.HOTSPOTS, HotspotsPanel);
 registerPanelComponent(PANEL_INVENTORY.SETTINGS, SettingsPanel);
 
 // =============================================================================
@@ -206,6 +212,50 @@ export default function App(): React.ReactElement {
     });
   }, []);
 
+  // Load and apply color preset on startup
+  useEffect(() => {
+    loadPresetFromProject().then(presetId => {
+      applyPreset(presetId);
+    });
+  }, []);
+
+  // ApprovalModal state management (MSSCI-14322)
+  const [requestQueue, setRequestQueue] = useState<ApprovalRequest[]>([]);
+  const { request, isOpen, show, hide } = useApprovalModal();
+
+  // Subscribe to permission requests via WebSocket
+  useEffect(() => {
+    const unsub = subscribeToPermissionRequests((incoming: ApprovalRequest) => {
+      setRequestQueue((prev) => [...prev, incoming]);
+    });
+    return unsub;
+  }, []);
+
+  // Show the next queued request when the current one is resolved
+  useEffect(() => {
+    if (!isOpen && requestQueue.length > 0) {
+      const [next, ...rest] = requestQueue;
+      setRequestQueue(rest);
+      show(next);
+    }
+  }, [isOpen, requestQueue, show]);
+
+  const handleApprove = useCallback((grantScope: GrantScope) => {
+    if (request) {
+      const response = createApprovalResponse(request.toolId, true, grantScope);
+      sendPermissionResponse(response);
+    }
+    hide();
+  }, [request, hide]);
+
+  const handleReject = useCallback(() => {
+    if (request) {
+      const response = createApprovalResponse(request.toolId, false);
+      sendPermissionResponse(response);
+    }
+    hide();
+  }, [request, hide]);
+
   return (
     <ErrorBoundary fallback={<RootErrorFallback />} panelName="App">
       <ClaudeProvider>
@@ -240,6 +290,16 @@ export default function App(): React.ReactElement {
               {/* Message input target (for skip link) */}
               <div id="message-input" tabIndex={-1} style={{ display: 'contents' }} aria-hidden="true" />
             </div>
+
+            {/* ApprovalModal - renders via Radix Portal outside the React tree (MSSCI-14322) */}
+            <ApprovalModal
+              isOpen={isOpen}
+              toolName={request?.toolName ?? ''}
+              toolId={request?.toolId ?? ''}
+              input={request?.input ?? {}}
+              onApprove={handleApprove}
+              onReject={handleReject}
+            />
           </CommandPaletteProvider>
         </MessageQueueProvider>
       </ClaudeProvider>

package/src/public/components/ApprovalModal/index.tsx

@@ -40,6 +40,7 @@ export const TOOL_NAME_TESTID = 'tool-name';
 export const APPROVE_BUTTON_TESTID = 'approve-button';
 export const REJECT_BUTTON_TESTID = 'reject-button';
 export const ALWAYS_ALLOW_TESTID = 'always-allow-checkbox';
+export const WARNING_TESTID = 'approval-modal-warning';
 
 // ============================================================================
 // Constants - Keyboard Shortcuts
@@ -120,6 +121,9 @@ export interface ApprovalRequest {
   toolName: string;
   input: ToolInput;
   reason?: string;
+  severity?: ActionSeverity;
+  warning?: string;
+  agent?: string;
 }
 
 export interface ApprovalResponse {
@@ -145,6 +149,12 @@ export interface ApprovalModalProps {
   onDismiss?: () => void;
   /** Additional CSS class name */
   className?: string;
+  /** Server-provided severity classification (MSSCI-14323) */
+  severity?: ActionSeverity;
+  /** Server-provided warning text for destructive operations (MSSCI-14323) */
+  warning?: string;
+  /** Agent name requesting permission (MSSCI-14392) */
+  agent?: string;
 }
 
 interface UseApprovalModalResult {
@@ -361,6 +371,9 @@ interface HookRequestMessage {
   toolId: string;
   toolName: string;
   input: Record<string, unknown>;
+  severity?: 'safe' | 'normal' | 'destructive';
+  warning?: string;
+  agent?: string;
   context?: {
     percentage: number;
     isHigh: boolean;
@@ -417,6 +430,9 @@ export function subscribeToPermissionRequests(
               toolId: msg.toolId,
               toolName: msg.toolName,
               input: msg.input as ToolInput,
+              severity: msg.severity as ActionSeverity | undefined,
+              warning: msg.warning,
+              agent: msg.agent,
             });
           }
         } catch (err) {
@@ -487,6 +503,9 @@ export default function ApprovalModal({
   onReject,
   onDismiss,
   className = '',
+  severity: serverSeverity,
+  warning,
+  agent,
 }: ApprovalModalProps): React.ReactElement {
   const [alwaysAllow, setAlwaysAllow] = useState(false);
 
@@ -506,7 +525,7 @@ export default function ApprovalModal({
     return () => document.removeEventListener('keydown', handleKey);
   }, [isOpen, alwaysAllow, onApprove]);
 
-  const severity = classifyActionSeverity(toolName, input);
+  const severity = serverSeverity ?? classifyActionSeverity(toolName, input);
   const severityClass = SEVERITY_CLASSNAMES[severity];
   const preview = formatCommandPreview(toolName, input);
   const icon = getToolIcon(toolName);
@@ -546,6 +565,8 @@ export default function ApprovalModal({
             <div>
               <div className="flex items-center gap-2 mb-3 text-sm text-muted-foreground">
                 <span className="approval-modal__icon" data-icon={icon} />
+                {agent && <span data-testid="agent-name" className="font-medium">{agent}</span>}
+                {agent && <span className="text-muted-foreground/50">/</span>}
                 <span data-testid={TOOL_NAME_TESTID}>{toolName}</span>
               </div>
 
@@ -564,6 +585,15 @@ export default function ApprovalModal({
           </DialogDescription>
         </DialogHeader>
 
+        {warning && (
+          <div
+            data-testid={WARNING_TESTID}
+            className="text-sm text-destructive font-medium"
+          >
+            {warning}
+          </div>
+        )}
+
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <Checkbox
             id="always-allow"

package/src/public/components/ControlBar.tsx

@@ -168,31 +168,30 @@ export function ControlBar({
                 aria-pressed={relayMode}
                 aria-label="Relay mode - auto-handoff to next agent"
               >
-                <span className="toggle-icon">🚲</span>
+                <span className="toggle-icon">✋</span>
               </Button>
             </TooltipTrigger>
             <TooltipContent>Relay Mode: Auto-handoff to next agent (Cmd+4)</TooltipContent>
           </Tooltip>
 
-          {/* TirePump Button - visible at 50%+ context, warning at 70%+ */}
-          {contextPercent >= 50 && currentAgent && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  type="button"
-                  className={`btn-toggle pump-toggle ${contextPercent >= 70 ? 'warning' : ''}`}
-                  data-testid="pump-toggle"
-                  onClick={onTirePump}
-                  aria-label="TirePump: Clear context and reload agent"
-                >
-                  <span className="toggle-icon">🫧</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>{`TirePump: Clear context (${contextPercent}%) and reload ${currentAgent}`}</TooltipContent>
-            </Tooltip>
-          )}
+          {/* TirePump Button - always visible, warning style at 70%+ */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                type="button"
+                className={`btn-toggle pump-toggle ${contextPercent >= 70 ? 'warning' : ''}`}
+                data-testid="pump-toggle"
+                onClick={onTirePump}
+                disabled={!currentAgent}
+                aria-label="TirePump: Clear context and reload agent"
+              >
+                <span className="toggle-icon">⬆️</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{currentAgent ? `TirePump: Clear context (${contextPercent}%) and reload ${currentAgent}` : 'TirePump: No agent loaded'}</TooltipContent>
+          </Tooltip>
         </div>
 
       {/* Stop button - always visible, disabled when not running */}

package/src/public/components/DockviewWorkspace.tsx

@@ -49,6 +49,7 @@ export const PANEL_INVENTORY = {
   TODO: 'todo',
   BACKGROUND: 'background',
   GIT: 'git',
+  HOTSPOTS: 'hotspots',
   SETTINGS: 'settings',
 } as const;
 
@@ -90,6 +91,7 @@ export const RIGHT_SIDEBAR_PANELS = [
   PANEL_INVENTORY.TODO,
   PANEL_INVENTORY.BACKGROUND,
   PANEL_INVENTORY.GIT,
+  PANEL_INVENTORY.HOTSPOTS,
   PANEL_INVENTORY.SETTINGS,
 ] as const;
 
@@ -105,8 +107,9 @@ const PANEL_TITLES: Record<string, string> = {
   workflow: 'Workflow',
   ac: 'AC',
   todo: 'Todo',
-  background: 'Background',
+  background: 'Subagents',
   git: 'Git',
+  hotspots: 'Hotspots',
   settings: 'Settings',
 };
 
@@ -254,6 +257,7 @@ export function createDefaultDockviewLayout(): SerializedDockview {
               views: [PANEL_INVENTORY.MESSAGE],
               activeView: PANEL_INVENTORY.MESSAGE,
               id: 'center',
+              hideHeader: true,
             },
             size: 600, // Center takes remaining space
           },
@@ -430,10 +434,11 @@ export function DockviewWorkspace({
       try {
         api.fromJSON(initialLayout);
 
-        // After restoring, lock the message panel's group
+        // After restoring, lock the message panel's group and hide its tab bar
         const messagePanel = api.getPanel(PANEL_INVENTORY.MESSAGE);
         if (messagePanel?.group) {
           messagePanel.group.locked = 'no-drop-target';
+          messagePanel.group.model.header.hidden = true;
         }
 
         setIsReady(true);
@@ -500,8 +505,10 @@ export function DockviewWorkspace({
     }
 
     // Lock the center group - MessagePanel cannot be closed or moved
+    // Hide the tab bar so users can't accidentally close the message tab
     if (messagePanel?.group) {
       messagePanel.group.locked = 'no-drop-target';
+      messagePanel.group.model.header.hidden = true;
     }
 
     // Set initial sidebar sizes
@@ -552,9 +559,9 @@ export function DockviewWorkspace({
         handleLayoutChange();
       }),
       api.onDidRemovePanel((e) => {
-        // Track closed panels (except message which can't be closed)
+        // Track closed panels for restoration
         const panelId = e?.panel?.id;
-        if (panelId && panelId !== PANEL_INVENTORY.MESSAGE) {
+        if (panelId) {
           closedPanels.add(panelId);
           updateClosedPanelsList();
         }
@@ -619,6 +626,32 @@ export function DockviewWorkspace({
     };
   }, []);
 
+  // Listen for panel toggle commands via WebSocket (View menu integration)
+  useEffect(() => {
+    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 === 'panel:toggle' && data.panelId) {
+          const api = dockviewApiRef;
+          if (!api) return;
+          const existing = api.getPanel(data.panelId);
+          if (existing) {
+            existing.api.close();
+          } else {
+            restorePanel(data.panelId);
+          }
+        }
+      } catch {
+        // ignore parse errors
+      }
+    };
+
+    return () => ws.close();
+  }, []);
+
   // Component map for Dockview
   const components = {
     PanelAdapter,
@@ -635,8 +668,9 @@ export function DockviewWorkspace({
     workflow: 'Workflow',
     ac: 'AC',
     todo: 'Todo',
-    background: 'Background',
+    background: 'Subagents',
     git: 'Git',
+    hotspots: 'Hotspots',
     settings: 'Settings',
   };
 

package/src/public/components/FontPicker/index.tsx

@@ -58,41 +58,99 @@ interface SystemFont {
 }
 
 // =============================================================================
-// Monospace Detection
+// Monospace Detection via OpenType `post` table
 // =============================================================================
 
-const monoCache = new Map<string, boolean>();
-
-function detectMonospace(fontFamily: string): boolean {
-  if (monoCache.has(fontFamily)) {
-    return monoCache.get(fontFamily)!;
+/**
+ * Parse SFNT table directory to find a table's offset and length.
+ * SFNT header: version(4) + numTables(2) + searchRange(2) + entrySelector(2) + rangeShift(2) = 12
+ * Each table record: tag(4) + checksum(4) + offset(4) + length(4) = 16
+ */
+function findSfntTable(view: DataView, tag: string): { offset: number; length: number } | null {
+  const numTables = view.getUint16(4);
+  for (let i = 0; i < numTables; i++) {
+    const recordOffset = 12 + i * 16;
+    const tableTag = String.fromCharCode(
+      view.getUint8(recordOffset),
+      view.getUint8(recordOffset + 1),
+      view.getUint8(recordOffset + 2),
+      view.getUint8(recordOffset + 3),
+    );
+    if (tableTag === tag) {
+      return {
+        offset: view.getUint32(recordOffset + 8),
+        length: view.getUint32(recordOffset + 12),
+      };
+    }
   }
+  return null;
+}
 
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  if (!ctx) {
-    monoCache.set(fontFamily, false);
+/**
+ * Read `isFixedPitch` from the `post` table.
+ * post layout: version(4) + italicAngle(4) + underlinePosition(2) + underlineThickness(2) = offset 12
+ * isFixedPitch is uint32 at offset 12: 0 = proportional, non-zero = monospace.
+ */
+async function detectMonospaceFromBlob(fontData: { blob: () => Promise<Blob> }): Promise<boolean> {
+  try {
+    const blob = await fontData.blob();
+    const buffer = await blob.arrayBuffer();
+    const view = new DataView(buffer);
+
+    const post = findSfntTable(view, 'post');
+    if (post) {
+      const isFixedPitch = view.getUint32(post.offset + 12);
+      return isFixedPitch !== 0;
+    }
+    return false;
+  } catch {
     return false;
   }
-
-  ctx.font = `16px "${fontFamily}", monospace`;
-  const wideChar = ctx.measureText('W').width;
-  const narrowChar = ctx.measureText('i').width;
-  const isMono = Math.abs(wideChar - narrowChar) < 1;
-
-  monoCache.set(fontFamily, isMono);
-  return isMono;
 }
 
 // =============================================================================
 // System Font Discovery
 // =============================================================================
 
-let systemFontsCache: SystemFont[] | null = null;
+interface FontDataEntry {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  style: string;
+  blob: () => Promise<Blob>;
+}
+
+const FONT_CACHE_KEY = 'cyclist-system-fonts';
+
+interface FontCacheData {
+  fonts: SystemFont[];
+  count: number; // number of font families — if it changes, fonts were installed/removed
+}
+
+function loadCachedFonts(): SystemFont[] | null {
+  try {
+    const raw = localStorage.getItem(FONT_CACHE_KEY);
+    if (!raw) return null;
+    const data: FontCacheData = JSON.parse(raw);
+    if (data.fonts?.length > 0) return data.fonts;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function saveCachedFonts(fonts: SystemFont[], count: number): void {
+  try {
+    const data: FontCacheData = { fonts, count };
+    localStorage.setItem(FONT_CACHE_KEY, JSON.stringify(data));
+  } catch {
+    // localStorage full or unavailable — not critical
+  }
+}
+
 let systemFontsPromise: Promise<SystemFont[]> | null = null;
 
 async function getSystemFonts(): Promise<SystemFont[]> {
-  if (systemFontsCache) return systemFontsCache;
   if (systemFontsPromise) return systemFontsPromise;
 
   systemFontsPromise = (async () => {
@@ -101,24 +159,48 @@ async function getSystemFonts(): Promise<SystemFont[]> {
     }
 
     try {
-      const fonts = await (window as unknown as { queryLocalFonts: () => Promise<Array<{ family: string }>> }).queryLocalFonts();
+      const fonts: FontDataEntry[] = await (window as unknown as { queryLocalFonts: () => Promise<FontDataEntry[]> }).queryLocalFonts();
 
-      // Deduplicate by family name
-      const families = new Set<string>();
+      // Deduplicate by family name, keep one FontData per family for mono detection
+      const familyMap = new Map<string, FontDataEntry>();
       for (const font of fonts) {
-        families.add(font.family);
+        if (!familyMap.has(font.family)) {
+          familyMap.set(font.family, font);
+        }
       }
 
-      const result: SystemFont[] = [];
-      for (const family of families) {
-        result.push({
-          family,
-          isMonospace: detectMonospace(family),
-        });
+      const familyCount = familyMap.size;
+
+      // Check localStorage cache — reuse if font count hasn't changed
+      const cached = loadCachedFonts();
+      if (cached && cached.length > 0) {
+        // Load raw cached data to check count
+        try {
+          const raw = localStorage.getItem(FONT_CACHE_KEY);
+          if (raw) {
+            const data: FontCacheData = JSON.parse(raw);
+            if (data.count === familyCount) {
+              return cached;
+            }
+          }
+        } catch {
+          // Fall through to re-detect
+        }
       }
 
+      // Detect monospace via post table in parallel
+      const entries = Array.from(familyMap.entries());
+      const monoResults = await Promise.all(
+        entries.map(([, fontData]) => detectMonospaceFromBlob(fontData))
+      );
+
+      const result: SystemFont[] = entries.map(([family], i) => ({
+        family,
+        isMonospace: monoResults[i],
+      }));
+
       result.sort((a, b) => a.family.localeCompare(b.family));
-      systemFontsCache = result;
+      saveCachedFonts(result, familyCount);
       return result;
     } catch {
       // Permission denied or API error
@@ -161,10 +243,13 @@ export function FontPicker({
     }
   }, [fontsLoaded]);
 
-  // Filter system fonts for code type (monospace only)
+  // Filter system fonts: English-only (Latin names), monospace-only for code
   const filteredSystemFonts = useMemo(() => {
     let fonts = systemFonts;
 
+    // Filter to fonts with Latin-script names (excludes CJK, Arabic, Devanagari, etc.)
+    fonts = fonts.filter(f => /^[\x20-\x7E\u00C0-\u024F]+$/.test(f.family));
+
     // For code fonts, only show monospace
     if (type === 'code') {
       fonts = fonts.filter(f => f.isMonospace);
@@ -237,7 +322,7 @@ export function FontPicker({
         >
           <SelectValue placeholder="Select font..." />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="max-h-[300px]">
           {/* Presets section */}
           {displayPresets.length > 0 && (
             <SelectGroup>