@pennyfarthing/cyclist 9.3.0 → 10.0.0

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

@@ -6,7 +6,7 @@
  * Story MSSCI-12777 - User Avatar from GitHub
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { parseMarkdown } from '../utils/markdown';
@@ -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,66 @@ function UserAvatar(): React.ReactElement {
   return <span className="avatar-emoji">👤</span>;
 }
 
-export default function Message({ message }: MessageProps): React.ReactElement {
+function useSortableTables(contentRef: React.RefObject<HTMLDivElement | null>) {
+  const attachSort = useCallback(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const headers = el.querySelectorAll<HTMLTableCellElement>('th.sortable-th');
+    headers.forEach((th) => {
+      if (th.dataset.sortBound) return;
+      th.dataset.sortBound = '1';
+      th.style.cursor = 'pointer';
+      th.addEventListener('click', () => {
+        const colIdx = parseInt(th.dataset.col || '0', 10);
+        const table = th.closest('table');
+        if (!table) return;
+        const tbody = table.querySelector('tbody');
+        if (!tbody) return;
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+        const currentDir = th.dataset.sortDir === 'asc' ? 'desc' : 'asc';
+
+        // Clear all indicators in this table
+        table.querySelectorAll<HTMLTableCellElement>('th.sortable-th').forEach((h) => {
+          h.dataset.sortDir = '';
+          const ind = h.querySelector('.sort-indicator');
+          if (ind) ind.textContent = '';
+        });
+
+        th.dataset.sortDir = currentDir;
+        const indicator = th.querySelector('.sort-indicator');
+        if (indicator) indicator.textContent = currentDir === 'asc' ? ' \u25B2' : ' \u25BC';
+
+        rows.sort((a, b) => {
+          const aText = (a.children[colIdx]?.textContent || '').trim();
+          const bText = (b.children[colIdx]?.textContent || '').trim();
+          const aNum = parseFloat(aText);
+          const bNum = parseFloat(bText);
+          // Numeric sort if both parse as numbers
+          if (!isNaN(aNum) && !isNaN(bNum)) {
+            return currentDir === 'asc' ? aNum - bNum : bNum - aNum;
+          }
+          const cmp = aText.localeCompare(bText, undefined, { sensitivity: 'base' });
+          return currentDir === 'asc' ? cmp : -cmp;
+        });
+
+        for (const row of rows) {
+          tbody.appendChild(row);
+        }
+      });
+    });
+  }, [contentRef]);
+
+  useEffect(() => {
+    attachSort();
+  });
+}
+
+export default function Message({ message, isLastAgentMessage, isFirstInTurn = true }: MessageProps): React.ReactElement {
+  const contentRef = useRef<HTMLDivElement>(null);
+  useSortableTables(contentRef);
   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 +142,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 +171,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 +195,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}`} ref={contentRef}>
       <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 }} />