@pennyfarthing/core 11.3.7 → 11.4.0

package/packages/core/src/public/utils/font-presets.ts

@@ -0,0 +1,362 @@
+/**
+ * Font Presets - MSSCI-12769
+ *
+ * Font customization system for Cyclist with UI and code font presets,
+ * Tailwind-like size scale, and global persistence.
+ */
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface FontPreset {
+  id: string;
+  name: string;
+  fontFamily: string;
+  isCustom?: boolean;
+}
+
+export type FontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+
+export interface FontSettings {
+  uiFont: string;
+  codeFont: string;
+  uiFontSize: FontSize;
+  codeFontSize: FontSize;
+  customUiFont?: string;
+  customCodeFont?: string;
+}
+
+export interface FontSizeScale {
+  xs: string;
+  sm: string;
+  base: string;
+  lg: string;
+  xl: string;
+}
+
+// =============================================================================
+// Font Presets
+// =============================================================================
+
+export const UI_FONT_PRESETS: FontPreset[] = [
+  {
+    id: 'system',
+    name: 'System',
+    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  },
+  {
+    id: 'inter',
+    name: 'Inter',
+    fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+  },
+  {
+    id: 'custom',
+    name: 'Custom',
+    fontFamily: '',
+    isCustom: true,
+  },
+];
+
+export const CODE_FONT_PRESETS: FontPreset[] = [
+  {
+    id: 'system-mono',
+    name: 'System Mono',
+    fontFamily: "ui-monospace, 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace",
+  },
+  {
+    id: 'jetbrains-mono',
+    name: 'JetBrains Mono',
+    fontFamily: "'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, monospace",
+  },
+  {
+    id: 'fira-code',
+    name: 'Fira Code',
+    fontFamily: "'Fira Code', ui-monospace, 'SF Mono', Monaco, monospace",
+  },
+  {
+    id: 'custom',
+    name: 'Custom',
+    fontFamily: '',
+    isCustom: true,
+  },
+];
+
+// =============================================================================
+// Font Size Scale (Tailwind-like)
+// =============================================================================
+
+export const FONT_SIZE_SCALE: FontSizeScale = {
+  xs: '0.75rem',
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+};
+
+const VALID_SIZES: FontSize[] = ['xs', 'sm', 'base', 'lg', 'xl'];
+
+// =============================================================================
+// Sanitization
+// =============================================================================
+
+/**
+ * Sanitize custom font family input to prevent CSS injection.
+ * Removes characters that could break out of font-family context.
+ */
+export function sanitizeFontFamily(input: string): string {
+  if (!input || typeof input !== 'string') {
+    return '';
+  }
+  // Remove dangerous characters that could break CSS context
+  // Allow: letters, numbers, spaces, quotes, commas, hyphens, underscores
+  return input
+    .replace(/[;{}()<>\\]/g, '')  // Remove CSS-breaking chars
+    .replace(/javascript:/gi, '') // Remove script protocol
+    .replace(/expression\s*\(/gi, '') // Remove IE expression()
+    .trim()
+    .slice(0, 500); // Limit length
+}
+
+// =============================================================================
+// Default Settings
+// =============================================================================
+
+export const DEFAULT_FONT_SETTINGS: FontSettings = {
+  uiFont: 'system',
+  codeFont: 'system-mono',
+  uiFontSize: 'base',
+  codeFontSize: 'base',
+};
+
+// =============================================================================
+// In-Memory State
+// =============================================================================
+
+let currentSettings: FontSettings = { ...DEFAULT_FONT_SETTINGS };
+
+// =============================================================================
+// UI Font Functions
+// =============================================================================
+
+export function getUIFont(): string {
+  return currentSettings.uiFont;
+}
+
+export function setUIFont(presetId: string, customFamily?: string): void {
+  currentSettings.uiFont = presetId;
+  if (presetId === 'custom' && customFamily) {
+    currentSettings.customUiFont = customFamily;
+  }
+  applyUIFont(presetId, customFamily);
+  persistSettings();
+}
+
+export function getCustomUIFont(): string | undefined {
+  return currentSettings.customUiFont;
+}
+
+// =============================================================================
+// Code Font Functions
+// =============================================================================
+
+export function getCodeFont(): string {
+  return currentSettings.codeFont;
+}
+
+export function setCodeFont(presetId: string, customFamily?: string): void {
+  currentSettings.codeFont = presetId;
+  if (presetId === 'custom' && customFamily) {
+    currentSettings.customCodeFont = customFamily;
+  }
+  applyCodeFont(presetId, customFamily);
+  persistSettings();
+}
+
+export function getCustomCodeFont(): string | undefined {
+  return currentSettings.customCodeFont;
+}
+
+// =============================================================================
+// Font Size Functions
+// =============================================================================
+
+export function getUIFontSize(): FontSize {
+  return currentSettings.uiFontSize;
+}
+
+export function setUIFontSize(size: FontSize): void {
+  if (!VALID_SIZES.includes(size)) {
+    throw new Error(`Invalid font size: ${size}. Must be one of: ${VALID_SIZES.join(', ')}`);
+  }
+  currentSettings.uiFontSize = size;
+  applyFontSizes(currentSettings.uiFontSize, currentSettings.codeFontSize);
+  persistSettings();
+}
+
+export function getCodeFontSize(): FontSize {
+  return currentSettings.codeFontSize;
+}
+
+export function setCodeFontSize(size: FontSize): void {
+  if (!VALID_SIZES.includes(size)) {
+    throw new Error(`Invalid font size: ${size}. Must be one of: ${VALID_SIZES.join(', ')}`);
+  }
+  currentSettings.codeFontSize = size;
+  applyFontSizes(currentSettings.uiFontSize, currentSettings.codeFontSize);
+  persistSettings();
+}
+
+// =============================================================================
+// Apply Functions (CSS Variables)
+// =============================================================================
+
+export function applyUIFont(presetId: string, customFamily?: string): void {
+  const preset = UI_FONT_PRESETS.find(p => p.id === presetId);
+  if (!preset) {
+    console.error(`[font-presets] Unknown UI font preset: ${presetId}`);
+    return;
+  }
+
+  const fontFamily = preset.isCustom && customFamily
+    ? sanitizeFontFamily(customFamily)
+    : preset.fontFamily;
+  document.documentElement.style.setProperty('--font-ui', fontFamily);
+}
+
+export function applyCodeFont(presetId: string, customFamily?: string): void {
+  const preset = CODE_FONT_PRESETS.find(p => p.id === presetId);
+  if (!preset) {
+    console.error(`[font-presets] Unknown code font preset: ${presetId}`);
+    return;
+  }
+
+  const fontFamily = preset.isCustom && customFamily
+    ? sanitizeFontFamily(customFamily)
+    : preset.fontFamily;
+  document.documentElement.style.setProperty('--font-mono', fontFamily);
+}
+
+export function applyFontSizes(uiSize: FontSize, codeSize: FontSize): void {
+  document.documentElement.style.setProperty('--font-size-ui', FONT_SIZE_SCALE[uiSize]);
+  document.documentElement.style.setProperty('--font-size-code', FONT_SIZE_SCALE[codeSize]);
+}
+
+export function applyFontSettings(settings: FontSettings): void {
+  // Apply UI font
+  const uiPreset = UI_FONT_PRESETS.find(p => p.id === settings.uiFont);
+  if (uiPreset) {
+    const uiFontFamily = uiPreset.isCustom && settings.customUiFont
+      ? sanitizeFontFamily(settings.customUiFont)
+      : uiPreset.fontFamily;
+    document.documentElement.style.setProperty('--font-ui', uiFontFamily);
+  }
+
+  // Apply code font
+  const codePreset = CODE_FONT_PRESETS.find(p => p.id === settings.codeFont);
+  if (codePreset) {
+    const codeFontFamily = codePreset.isCustom && settings.customCodeFont
+      ? sanitizeFontFamily(settings.customCodeFont)
+      : codePreset.fontFamily;
+    document.documentElement.style.setProperty('--font-mono', codeFontFamily);
+  }
+
+  // Apply sizes
+  applyFontSizes(settings.uiFontSize, settings.codeFontSize);
+
+  // Update in-memory state
+  currentSettings = { ...settings };
+}
+
+// =============================================================================
+// IPC Integration
+// =============================================================================
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      send?: (channel: string, data: unknown) => void;
+      invoke?: (channel: string, data: unknown) => Promise<unknown>;
+      font?: {
+        save: (settings: FontSettings) => Promise<boolean>;
+        load: () => Promise<FontSettings | null>;
+        getSettingsPath: () => Promise<string>;
+      };
+    };
+  }
+}
+
+export function notifyFontChange(type: 'ui' | 'code', presetId: string): void {
+  // Font change is broadcast via settings WebSocket
+  console.log('[font-presets] Font changed:', type, presetId);
+}
+
+// =============================================================================
+// Persistence Functions
+// =============================================================================
+
+export async function saveFontSettings(settings: FontSettings): Promise<void> {
+  currentSettings = { ...settings };
+  try {
+    // Use REST API to save font settings
+    await fetch('/api/settings', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ display: { fonts: settings } }),
+    });
+  } catch (err) {
+    console.error('[font-presets] Failed to save settings:', err);
+  }
+}
+
+/**
+ * Helper to persist current settings (async but not awaited for better UX)
+ */
+function persistSettings(): void {
+  saveFontSettings(currentSettings).catch(() => {
+    // Error already logged in saveFontSettings
+  });
+}
+
+export async function loadFontSettings(): Promise<FontSettings> {
+  try {
+    // Use REST API to load font settings
+    const response = await fetch('/api/settings');
+    if (response.ok) {
+      const settings = await response.json();
+      if (settings?.display?.fonts) {
+        currentSettings = { ...settings.display.fonts };
+        return currentSettings;
+      }
+    }
+  } catch (err) {
+    console.error('[font-presets] Failed to load settings:', err);
+  }
+  return { ...DEFAULT_FONT_SETTINGS };
+}
+
+export function getFontSettingsPath(): string {
+  // Global settings path (in user's home directory)
+  const home = typeof process !== 'undefined' ? process.env.HOME : '~';
+  return `${home}/.config/cyclist/font-settings.yaml`;
+}
+
+// =============================================================================
+// Preset Lookup Helpers
+// =============================================================================
+
+export function getUIFontPreset(id: string): FontPreset | undefined {
+  return UI_FONT_PRESETS.find(p => p.id === id);
+}
+
+export function getCodeFontPreset(id: string): FontPreset | undefined {
+  return CODE_FONT_PRESETS.find(p => p.id === id);
+}
+
+export function getUIFontPresetIds(): string[] {
+  return UI_FONT_PRESETS.map(p => p.id);
+}
+
+export function getCodeFontPresetIds(): string[] {
+  return CODE_FONT_PRESETS.map(p => p.id);
+}

package/packages/core/src/public/utils/formatDuration.ts

@@ -0,0 +1,14 @@
+/**
+ * Format duration in milliseconds to human-readable string
+ *
+ * Story MSSCI-13402 - Tool use visual design polish
+ *
+ * @param ms - Duration in milliseconds
+ * @returns Formatted string like "245ms" or "2.3s"
+ */
+export function formatDuration(ms: number | undefined): string {
+  if (ms === undefined || ms === null) return '—';
+  if (ms < 0) return '0ms';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}

package/packages/core/src/public/utils/markdown.ts

@@ -0,0 +1,249 @@
+/**
+ * Markdown Utilities
+ *
+ * Story MSSCI-13969: TypeScript markdown parsing utilities extracted from
+ * js/components/message-view/markdown-parser.js
+ *
+ * Security: XSS prevention via HTML escaping BEFORE markdown processing.
+ */
+
+import { highlightCode } from './syntax';
+
+/**
+ * Strip CYCLIST structured markers from text before rendering.
+ * These markers are used for machine parsing (quick actions) but should
+ * be invisible to users.
+ * @param text - Text that may contain CYCLIST markers
+ * @returns Text with markers removed
+ */
+export function stripMarkers(text: string | null | undefined): string {
+  if (!text) return text as string;
+  // Remove CYCLIST markers: <!-- CYCLIST:TYPE --> or <!-- CYCLIST:TYPE:value -->
+  return text.replace(/<!--\s*CYCLIST:[^>]+?\s*-->/gi, '').trim();
+}
+
+/**
+ * Escape HTML special characters to prevent XSS.
+ * @param text - Raw text that may contain HTML
+ * @returns Escaped text safe for HTML rendering
+ */
+export function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;',
+  };
+  return text.replace(/[&<>"']/g, (c) => map[c]);
+}
+
+/**
+ * Parse cells from a table line: | cell1 | cell2 | cell3 |
+ * @param line - Table row line
+ * @returns Array of cell contents
+ */
+function parseCells(line: string): string[] {
+  return line
+    .split('|')
+    .map((cell) => cell.trim())
+    .filter((cell, index, arr) => {
+      // Filter out empty first/last cells from leading/trailing |
+      if (index === 0 && cell === '') return false;
+      if (index === arr.length - 1 && cell === '') return false;
+      return true;
+    });
+}
+
+/**
+ * Check if a line is a separator row (|---|---|)
+ * @param line - Table row line
+ * @returns boolean
+ */
+function isSeparator(line: string): boolean {
+  const cells = parseCells(line);
+  return cells.every((cell) => /^[-:]+$/.test(cell));
+}
+
+/**
+ * Convert array of table lines to HTML table
+ * @param lines - Array of | delimited lines
+ * @returns HTML table string
+ */
+function convertTableLinesToHtml(lines: string[]): string {
+  if (lines.length === 0) return '';
+
+  // Filter out separator rows and identify header
+  const dataLines: string[] = [];
+  let headerLine: string | null = null;
+  let foundSeparator = false;
+
+  for (const line of lines) {
+    if (isSeparator(line)) {
+      foundSeparator = true;
+      continue; // Skip separator rows
+    }
+    if (!foundSeparator && headerLine === null) {
+      headerLine = line; // First non-separator row is header
+    } else {
+      dataLines.push(line);
+    }
+  }
+
+  // Build HTML table
+  let html = '<div class="table-wrapper"><table>';
+
+  // Header row
+  if (headerLine) {
+    const headerCells = parseCells(headerLine);
+    html += '<thead><tr>';
+    for (let i = 0; i < headerCells.length; i++) {
+      html += `<th data-col="${i}" class="sortable-th">${headerCells[i]} <span class="sort-indicator"></span></th>`;
+    }
+    html += '</tr></thead>';
+  }
+
+  // Body rows
+  if (dataLines.length > 0) {
+    html += '<tbody>';
+    for (const line of dataLines) {
+      const cells = parseCells(line);
+      html += '<tr>';
+      for (const cell of cells) {
+        html += `<td>${cell}</td>`;
+      }
+      html += '</tr>';
+    }
+    html += '</tbody>';
+  }
+
+  html += '</table></div>';
+  return html;
+}
+
+/**
+ * Parse markdown tables to HTML
+ * Detects consecutive lines starting with | and converts to <table>
+ * @param text - Text with escaped HTML
+ * @returns Text with tables converted to HTML
+ */
+function parseMarkdownTables(text: string): string {
+  const lines = text.split('\n');
+  const result: string[] = [];
+  let tableLines: string[] = [];
+  let inTable = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+
+    // Check if line is a table row (starts and ends with |, or starts with |)
+    const isTableRow = line.startsWith('|') && line.includes('|', 1);
+
+    if (isTableRow) {
+      if (!inTable) {
+        inTable = true;
+        tableLines = [];
+      }
+      tableLines.push(line);
+    } else {
+      // End of table or not a table line
+      if (inTable && tableLines.length > 0) {
+        result.push(convertTableLinesToHtml(tableLines));
+        tableLines = [];
+        inTable = false;
+      }
+      result.push(lines[i]); // Preserve original line (not trimmed)
+    }
+  }
+
+  // Handle table at end of text
+  if (inTable && tableLines.length > 0) {
+    result.push(convertTableLinesToHtml(tableLines));
+  }
+
+  return result.join('\n');
+}
+
+/**
+ * Parse markdown text to HTML with XSS protection.
+ * @param markdown - Raw markdown text
+ * @returns HTML string
+ */
+export function parseMarkdown(markdown: string | null | undefined): string {
+  if (!markdown) return '';
+
+  // Strip CYCLIST structured markers BEFORE escaping HTML
+  // These are for quick-actions parsing, not display
+  const cleaned = stripMarkers(markdown);
+
+  // SECURITY: Escape HTML special characters FIRST to prevent XSS
+  // This ensures any <script>, <img onerror>, etc. are neutralized before processing
+  // Markdown syntax chars (*, #, `, -) are NOT escaped, so regexes still work
+  let html = escapeHtml(cleaned);
+
+  // Code blocks with syntax highlighting (must be first to avoid conflicts)
+  // Content is already escaped, apply highlighting then wrap
+  html = html.replace(/```(\w+)?\n?([\s\S]*?)```/g, (_, lang, code) => {
+    const langClass = lang ? ` class="language-${lang}"` : '';
+    const highlighted = lang ? highlightCode(code.trim(), lang) : code.trim();
+    return `<pre><code${langClass}>${highlighted}</code></pre>`;
+  });
+
+  // B-15: Join multi-line list items BEFORE other processing
+  // Indented continuation lines (2+ spaces) are joined to previous list item
+  // Stop at blank lines or new list items
+  html = html.replace(/^(\d+\.\s+.+)\n((?:  +[^\n]+\n)+)/gm, (_, firstLine, continuation) => {
+    // Join continuation lines with spaces, removing leading whitespace
+    // Preserve trailing newline for next list item
+    const joined = continuation.trim().replace(/\n\s*/g, ' ');
+    return `${firstLine} ${joined}\n`;
+  });
+
+  // Inline code - content already escaped
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Tables - convert | delimited rows to HTML tables
+  // Must be after code blocks to avoid parsing tables in code
+  html = parseMarkdownTables(html);
+
+  // Headers (h1-h6) - content already escaped
+  html = html.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
+  html = html.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
+  html = html.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
+  html = html.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+  html = html.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+  html = html.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
+
+  // Bold and italic - content already escaped
+  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+
+  // Unordered lists - mark with data attribute to distinguish from ordered
+  html = html.replace(/^- (.+)$/gm, '<li data-ul>$1</li>');
+
+  // Ordered lists - mark with data attribute
+  // B-15: Match ordered list items that may contain inline formatting
+  html = html.replace(/^\d+\.\s+(.+)$/gm, '<li data-ol>$1</li>');
+
+  // Wrap consecutive unordered list items
+  html = html.replace(/(<li data-ul>.*?<\/li>\n?)+/g, (match) => {
+    return `<ul>${match.replace(/ data-ul/g, '')}</ul>`;
+  });
+
+  // Wrap consecutive ordered list items
+  html = html.replace(/(<li data-ol>.*?<\/li>\n?)+/g, (match) => {
+    return `<ol>${match.replace(/ data-ol/g, '')}</ol>`;
+  });
+
+  // Paragraphs (lines not already wrapped) - content already escaped
+  // Excludes: h1-6, ul, ol, li, pre, div (table-wrapper), table elements
+  html = html.replace(/^(?!<[hulodtp]|<pre|<li)(.+)$/gm, '<p>$1</p>');
+
+  return html;
+}
+
+export default {
+  parseMarkdown,
+  escapeHtml,
+  stripMarkers,
+};