@pennyfarthing/cyclist 9.3.0 → 9.4.0

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>

package/src/public/components/FullFileTree.tsx

@@ -0,0 +1,223 @@
+/**
+ * FullFileTree - Complete directory tree with changed file highlighting
+ *
+ * Displays the full project file tree with lazy-loaded directories.
+ * Changed files are highlighted with git status colors (created/modified/deleted).
+ * Uses /api/files for directory listing and /ws/git for change status.
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { useFileBrowser, DirectoryEntry } from '../hooks/useFileBrowser';
+import type { FileStatus } from './FileTree';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface FullFileTreeProps {
+  /** Map of file path → git status for highlighting */
+  changedFiles: Map<string, FileStatus>;
+  /** Callback when a file is clicked */
+  onFileClick?: (entry: DirectoryEntry, status?: FileStatus) => void;
+}
+
+// =============================================================================
+// File Item Component
+// =============================================================================
+
+function TreeFileItem({
+  entry,
+  status,
+  depth,
+  onFileClick,
+}: {
+  entry: DirectoryEntry;
+  status?: FileStatus;
+  depth: number;
+  onFileClick?: (entry: DirectoryEntry, status?: FileStatus) => void;
+}): React.ReactElement {
+  const statusIcon = status === 'created' ? '+' : status === 'modified' ? '~' : status === 'deleted' ? '-' : null;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          role="treeitem"
+          className={`file-item${status ? ` file-${status}` : ''}`}
+          style={{ paddingLeft: `${12 + depth * 16}px` }}
+          tabIndex={0}
+          aria-label={`${entry.name}${status ? `, ${status}` : ''}`}
+          onClick={() => onFileClick?.(entry, status)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onFileClick?.(entry, status);
+            }
+          }}
+        >
+          {statusIcon && (
+            <span className={`status-icon status-${status}`} aria-hidden="true">
+              {statusIcon}
+            </span>
+          )}
+          <span className={`file-name${status === 'deleted' ? '' : ''}`}>{entry.name}</span>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{entry.path}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+// =============================================================================
+// Directory Node Component (recursive)
+// =============================================================================
+
+function TreeDirectoryNode({
+  entry,
+  depth,
+  changedFiles,
+  onFileClick,
+  fetchDirectory,
+  cache,
+  loading,
+}: {
+  entry: DirectoryEntry;
+  depth: number;
+  changedFiles: Map<string, FileStatus>;
+  onFileClick?: (entry: DirectoryEntry, status?: FileStatus) => void;
+  fetchDirectory: (path: string) => Promise<void>;
+  cache: Record<string, DirectoryEntry[]>;
+  loading: Set<string>;
+}): React.ReactElement {
+  const [isOpen, setIsOpen] = useState(false);
+  const children = cache[entry.path];
+  const isLoading = loading.has(entry.path);
+
+  // Check if this directory contains any changed files
+  const hasChanges = Array.from(changedFiles.keys()).some(
+    (filePath) => filePath.startsWith(entry.path + '/')
+  );
+
+  const handleToggle = useCallback(() => {
+    const willOpen = !isOpen;
+    setIsOpen(willOpen);
+    if (willOpen && !children) {
+      fetchDirectory(entry.path);
+    }
+  }, [isOpen, children, entry.path, fetchDirectory]);
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={handleToggle}>
+      <CollapsibleTrigger asChild>
+        <div
+          className={`directory-header${hasChanges ? ' has-changes' : ''}`}
+          style={{ paddingLeft: `${4 + depth * 16}px` }}
+        >
+          <span className="directory-toggle">
+            <span className="toggle-icon">{isOpen ? '▼' : '▶'}</span>
+          </span>
+          <span className="directory-name">{entry.name}</span>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        {isLoading && (
+          <div
+            className="tree-loading"
+            style={{ paddingLeft: `${12 + (depth + 1) * 16}px` }}
+          >
+            Loading...
+          </div>
+        )}
+        {children?.map((child) =>
+          child.type === 'directory' ? (
+            <TreeDirectoryNode
+              key={child.path}
+              entry={child}
+              depth={depth + 1}
+              changedFiles={changedFiles}
+              onFileClick={onFileClick}
+              fetchDirectory={fetchDirectory}
+              cache={cache}
+              loading={loading}
+            />
+          ) : (
+            <TreeFileItem
+              key={child.path}
+              entry={child}
+              status={changedFiles.get(child.path)}
+              depth={depth + 1}
+              onFileClick={onFileClick}
+            />
+          )
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// =============================================================================
+// FullFileTree Component
+// =============================================================================
+
+export function FullFileTree({ changedFiles, onFileClick }: FullFileTreeProps): React.ReactElement {
+  const { cache, loading, error, fetchDirectory } = useFileBrowser();
+
+  // Load root directory on mount
+  useEffect(() => {
+    fetchDirectory('');
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const rootEntries = cache['__root__'];
+  const changedCount = changedFiles.size;
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div role="tree" aria-label="Project files" className="filetree full-filetree">
+        {changedCount > 0 && (
+          <Badge
+            variant="secondary"
+            data-testid="file-count-badge"
+            className="file-count-badge"
+            aria-label={`${changedCount} files changed`}
+          >
+            {changedCount}
+          </Badge>
+        )}
+        <ScrollArea className="filetree-scroll">
+          {error && <div className="tree-error">{error}</div>}
+          {!rootEntries && !error && (
+            <div className="tree-loading">Loading project files...</div>
+          )}
+          {rootEntries?.map((entry) =>
+            entry.type === 'directory' ? (
+              <TreeDirectoryNode
+                key={entry.path}
+                entry={entry}
+                depth={0}
+                changedFiles={changedFiles}
+                onFileClick={onFileClick}
+                fetchDirectory={fetchDirectory}
+                cache={cache}
+                loading={loading}
+              />
+            ) : (
+              <TreeFileItem
+                key={entry.path}
+                entry={entry}
+                status={changedFiles.get(entry.path)}
+                depth={0}
+                onFileClick={onFileClick}
+              />
+            )
+          )}
+        </ScrollArea>
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export default FullFileTree;

package/src/public/components/Message.tsx

@@ -17,25 +17,33 @@ import type { MessageData } from '../types/message';
 
 interface MessageProps {
   message: MessageData;
+  isLastAgentMessage?: boolean;
+  /** Whether this is the first message in a turn (shows avatar) */
+  isFirstInTurn?: boolean;
 }
 
 interface AssistantAvatarProps {
   isStreaming?: boolean;
+  agentSlug?: string;
+  agentTheme?: string;
+  agentCharacter?: string;
 }
 
-function AssistantAvatar({ isStreaming }: AssistantAvatarProps): React.ReactElement {
+function AssistantAvatar({ isStreaming, agentSlug, agentTheme, agentCharacter }: AssistantAvatarProps): React.ReactElement {
   const { persona } = usePersona();
   const [imageError, setImageError] = useState(false);
 
-  const slug = persona?.slug;
-  const theme = persona?.theme;
+  // Use per-message persona if available, fall back to current global persona
+  const slug = agentSlug || persona?.slug;
+  const theme = agentTheme || persona?.theme;
+  const character = agentCharacter || persona?.character;
   const avatarClass = isStreaming ? 'avatar-portrait avatar-thinking' : 'avatar-portrait';
 
   if (slug && theme && !imageError) {
     return (
       <img
         src={`/portraits/${theme}/small/${slug}.png`}
-        alt={persona?.character || 'Agent'}
+        alt={character || 'Agent'}
         className={avatarClass}
         onError={() => setImageError(true)}
       />
@@ -67,9 +75,10 @@ function UserAvatar(): React.ReactElement {
   return <span className="avatar-emoji">👤</span>;
 }
 
-export default function Message({ message }: MessageProps): React.ReactElement {
+export default function Message({ message, isLastAgentMessage, isFirstInTurn = true }: MessageProps): React.ReactElement {
   const roleClass = `message-${message.type}`;
   const testId = `message-${message.type}`;
+  const continuationClass = !isFirstInTurn ? ' continuation' : '';
 
   // For bell-injected messages (queued messages injected via PostToolUse hook)
   // Show with 🔔 indicator so user knows it was sent mid-turn
@@ -77,7 +86,7 @@ export default function Message({ message }: MessageProps): React.ReactElement {
     const html = message.content ? parseMarkdown(message.content) : '';
     return (
       <TooltipProvider delayDuration={300}>
-        <div data-testid="message-bell-injected" className="message message-user message-bell-injected">
+        <div data-testid="message-bell-injected" className={`message message-user message-bell-injected${continuationClass}`}>
           <div data-testid="avatar" className="message-avatar">
             <UserAvatar />
           </div>
@@ -106,11 +115,18 @@ export default function Message({ message }: MessageProps): React.ReactElement {
   }
 
   // For streaming agent messages, use StreamingContent with throbbing avatar
+  // Only throb the last agent message's avatar
   if (message.type === 'agent' && message.isStreaming) {
+    const showThrob = isLastAgentMessage !== false;
     return (
-      <div data-testid={testId} className={`message ${roleClass}`}>
+      <div data-testid={testId} className={`message ${roleClass}${continuationClass}`}>
         <div data-testid="avatar" className="message-avatar">
-          <AssistantAvatar isStreaming={true} />
+          <AssistantAvatar
+            isStreaming={showThrob}
+            agentSlug={message.agentSlug}
+            agentTheme={message.agentTheme}
+            agentCharacter={message.agentCharacter}
+          />
         </div>
         <div className="message-content">
           <StreamingContent content={message.content || ''} isStreaming={message.isStreaming ?? false} />
@@ -123,9 +139,15 @@ export default function Message({ message }: MessageProps): React.ReactElement {
   const html = message.content ? parseMarkdown(message.content) : '';
 
   return (
-    <div data-testid={testId} className={`message ${roleClass}`}>
+    <div data-testid={testId} className={`message ${roleClass}${continuationClass}`}>
       <div data-testid="avatar" className="message-avatar">
-        {message.type === 'user' ? <UserAvatar /> : <AssistantAvatar />}
+        {message.type === 'user' ? <UserAvatar /> : (
+          <AssistantAvatar
+            agentSlug={message.agentSlug}
+            agentTheme={message.agentTheme}
+            agentCharacter={message.agentCharacter}
+          />
+        )}
       </div>
       <div className="message-content">
         <div dangerouslySetInnerHTML={{ __html: html }} />