init: push source

src/lib/claudeSyntaxTheme.ts

@@ -0,0 +1,175 @@
+/**
+ * Claude-themed syntax highlighting theme
+ * Features orange, purple, and violet colors to match Claude's aesthetic
+ */
+export const claudeSyntaxTheme: any = {
+  'code[class*="language-"]': {
+    color: '#e3e8f0',
+    background: 'transparent',
+    textShadow: 'none',
+    fontFamily: 'var(--font-mono)',
+    fontSize: '0.875em',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none',
+  },
+  'pre[class*="language-"]': {
+    color: '#e3e8f0',
+    background: 'transparent',
+    textShadow: 'none',
+    fontFamily: 'var(--font-mono)',
+    fontSize: '0.875em',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none',
+    padding: '1em',
+    margin: '0',
+    overflow: 'auto',
+  },
+  ':not(pre) > code[class*="language-"]': {
+    background: 'rgba(139, 92, 246, 0.1)',
+    padding: '0.1em 0.3em',
+    borderRadius: '0.3em',
+    whiteSpace: 'normal',
+  },
+  'comment': {
+    color: '#6b7280',
+    fontStyle: 'italic',
+  },
+  'prolog': {
+    color: '#6b7280',
+  },
+  'doctype': {
+    color: '#6b7280',
+  },
+  'cdata': {
+    color: '#6b7280',
+  },
+  'punctuation': {
+    color: '#9ca3af',
+  },
+  'namespace': {
+    opacity: '0.7',
+  },
+  'property': {
+    color: '#f59e0b', // Amber/Orange
+  },
+  'tag': {
+    color: '#8b5cf6', // Violet
+  },
+  'boolean': {
+    color: '#f59e0b', // Amber/Orange
+  },
+  'number': {
+    color: '#f59e0b', // Amber/Orange
+  },
+  'constant': {
+    color: '#f59e0b', // Amber/Orange
+  },
+  'symbol': {
+    color: '#f59e0b', // Amber/Orange
+  },
+  'deleted': {
+    color: '#ef4444',
+  },
+  'selector': {
+    color: '#a78bfa', // Light Purple
+  },
+  'attr-name': {
+    color: '#a78bfa', // Light Purple
+  },
+  'string': {
+    color: '#10b981', // Emerald Green
+  },
+  'char': {
+    color: '#10b981', // Emerald Green
+  },
+  'builtin': {
+    color: '#8b5cf6', // Violet
+  },
+  'url': {
+    color: '#10b981', // Emerald Green
+  },
+  'inserted': {
+    color: '#10b981', // Emerald Green
+  },
+  'entity': {
+    color: '#a78bfa', // Light Purple
+    cursor: 'help',
+  },
+  'atrule': {
+    color: '#c084fc', // Light Violet
+  },
+  'attr-value': {
+    color: '#10b981', // Emerald Green
+  },
+  'keyword': {
+    color: '#c084fc', // Light Violet
+  },
+  'function': {
+    color: '#818cf8', // Indigo
+  },
+  'class-name': {
+    color: '#f59e0b', // Amber/Orange
+  },
+  'regex': {
+    color: '#06b6d4', // Cyan
+  },
+  'important': {
+    color: '#f59e0b', // Amber/Orange
+    fontWeight: 'bold',
+  },
+  'variable': {
+    color: '#a78bfa', // Light Purple
+  },
+  'bold': {
+    fontWeight: 'bold',
+  },
+  'italic': {
+    fontStyle: 'italic',
+  },
+  'operator': {
+    color: '#9ca3af',
+  },
+  'script': {
+    color: '#e3e8f0',
+  },
+  'parameter': {
+    color: '#fbbf24', // Yellow
+  },
+  'method': {
+    color: '#818cf8', // Indigo
+  },
+  'field': {
+    color: '#f59e0b', // Amber/Orange
+  },
+  'annotation': {
+    color: '#6b7280',
+  },
+  'type': {
+    color: '#a78bfa', // Light Purple
+  },
+  'module': {
+    color: '#8b5cf6', // Violet
+  },
+}; 

src/lib/date-utils.ts

@@ -0,0 +1,106 @@
+/**
+ * Formats a Unix timestamp to a human-readable date string
+ * @param timestamp - Unix timestamp in seconds
+ * @returns Formatted date string
+ * 
+ * @example
+ * formatUnixTimestamp(1735555200) // "Dec 30, 2024"
+ */
+export function formatUnixTimestamp(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  const now = new Date();
+  
+  // If it's today, show time
+  if (isToday(date)) {
+    return formatTime(date);
+  }
+  
+  // If it's yesterday
+  if (isYesterday(date)) {
+    return `Yesterday, ${formatTime(date)}`;
+  }
+  
+  // If it's within the last week, show day of week
+  if (isWithinWeek(date)) {
+    return `${getDayName(date)}, ${formatTime(date)}`;
+  }
+  
+  // If it's this year, don't show year
+  if (date.getFullYear() === now.getFullYear()) {
+    return date.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric' 
+    });
+  }
+  
+  // Otherwise show full date
+  return date.toLocaleDateString('en-US', { 
+    month: 'short', 
+    day: 'numeric',
+    year: 'numeric'
+  });
+}
+
+/**
+ * Formats an ISO timestamp string to a human-readable date
+ * @param isoString - ISO timestamp string
+ * @returns Formatted date string
+ * 
+ * @example
+ * formatISOTimestamp("2025-01-04T10:13:29.000Z") // "Jan 4, 2025"
+ */
+export function formatISOTimestamp(isoString: string): string {
+  const date = new Date(isoString);
+  return formatUnixTimestamp(Math.floor(date.getTime() / 1000));
+}
+
+/**
+ * Truncates text to a specified length with ellipsis
+ * @param text - Text to truncate
+ * @param maxLength - Maximum length
+ * @returns Truncated text
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + '...';
+}
+
+/**
+ * Gets the first line of text
+ * @param text - Text to process
+ * @returns First line of text
+ */
+export function getFirstLine(text: string): string {
+  const lines = text.split('\n');
+  return lines[0] || '';
+}
+
+// Helper functions
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('en-US', { 
+    hour: 'numeric', 
+    minute: '2-digit',
+    hour12: true 
+  });
+}
+
+function isToday(date: Date): boolean {
+  const today = new Date();
+  return date.toDateString() === today.toDateString();
+}
+
+function isYesterday(date: Date): boolean {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  return date.toDateString() === yesterday.toDateString();
+}
+
+function isWithinWeek(date: Date): boolean {
+  const weekAgo = new Date();
+  weekAgo.setDate(weekAgo.getDate() - 7);
+  return date > weekAgo;
+}
+
+function getDayName(date: Date): string {
+  return date.toLocaleDateString('en-US', { weekday: 'long' });
+} 

src/lib/outputCache.tsx

@@ -0,0 +1,195 @@
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { api } from './api';
+
+// Use the same message interface as AgentExecution for consistency
+export interface ClaudeStreamMessage {
+  type: "system" | "assistant" | "user" | "result";
+  subtype?: string;
+  message?: {
+    content?: any[];
+    usage?: {
+      input_tokens: number;
+      output_tokens: number;
+    };
+  };
+  usage?: {
+    input_tokens: number;
+    output_tokens: number;
+  };
+  [key: string]: any;
+}
+
+interface CachedSessionOutput {
+  output: string;
+  messages: ClaudeStreamMessage[];
+  lastUpdated: number;
+  status: string;
+}
+
+interface OutputCacheContextType {
+  getCachedOutput: (sessionId: number) => CachedSessionOutput | null;
+  setCachedOutput: (sessionId: number, data: CachedSessionOutput) => void;
+  updateSessionStatus: (sessionId: number, status: string) => void;
+  clearCache: (sessionId?: number) => void;
+  isPolling: boolean;
+  startBackgroundPolling: () => void;
+  stopBackgroundPolling: () => void;
+}
+
+const OutputCacheContext = createContext<OutputCacheContextType | null>(null);
+
+export function useOutputCache() {
+  const context = useContext(OutputCacheContext);
+  if (!context) {
+    throw new Error('useOutputCache must be used within an OutputCacheProvider');
+  }
+  return context;
+}
+
+interface OutputCacheProviderProps {
+  children: React.ReactNode;
+}
+
+export function OutputCacheProvider({ children }: OutputCacheProviderProps) {
+  const [cache, setCache] = useState<Map<number, CachedSessionOutput>>(new Map());
+  const [isPolling, setIsPolling] = useState(false);
+  const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null);
+
+  const getCachedOutput = useCallback((sessionId: number): CachedSessionOutput | null => {
+    return cache.get(sessionId) || null;
+  }, [cache]);
+
+  const setCachedOutput = useCallback((sessionId: number, data: CachedSessionOutput) => {
+    setCache(prev => new Map(prev.set(sessionId, data)));
+  }, []);
+
+  const updateSessionStatus = useCallback((sessionId: number, status: string) => {
+    setCache(prev => {
+      const existing = prev.get(sessionId);
+      if (existing) {
+        const updated = new Map(prev);
+        updated.set(sessionId, { ...existing, status });
+        return updated;
+      }
+      return prev;
+    });
+  }, []);
+
+  const clearCache = useCallback((sessionId?: number) => {
+    if (sessionId) {
+      setCache(prev => {
+        const updated = new Map(prev);
+        updated.delete(sessionId);
+        return updated;
+      });
+    } else {
+      setCache(new Map());
+    }
+  }, []);
+
+  const parseOutput = useCallback((rawOutput: string): ClaudeStreamMessage[] => {
+    if (!rawOutput) return [];
+
+    const lines = rawOutput.split('\n').filter(line => line.trim());
+    const parsedMessages: ClaudeStreamMessage[] = [];
+
+    for (const line of lines) {
+      try {
+        const message = JSON.parse(line) as ClaudeStreamMessage;
+        parsedMessages.push(message);
+      } catch (err) {
+        console.error("Failed to parse message:", err, line);
+        // Add a fallback message for unparseable content
+        parsedMessages.push({
+          type: 'result',
+          subtype: 'error',
+          error: 'Failed to parse message',
+          raw_content: line
+        });
+      }
+    }
+
+    return parsedMessages;
+  }, []);
+
+  const updateSessionCache = useCallback(async (sessionId: number, status: string) => {
+    try {
+      const rawOutput = await api.getSessionOutput(sessionId);
+      const messages = parseOutput(rawOutput);
+      
+      setCachedOutput(sessionId, {
+        output: rawOutput,
+        messages,
+        lastUpdated: Date.now(),
+        status
+      });
+    } catch (error) {
+      console.warn(`Failed to update cache for session ${sessionId}:`, error);
+    }
+  }, [parseOutput, setCachedOutput]);
+
+  const pollRunningSessions = useCallback(async () => {
+    try {
+      const runningSessions = await api.listRunningAgentSessions();
+      
+      // Update cache for all running sessions
+      for (const session of runningSessions) {
+        if (session.id && session.status === 'running') {
+          await updateSessionCache(session.id, session.status);
+        }
+      }
+
+      // Clean up cache for sessions that are no longer running
+      const runningIds = new Set(runningSessions.map(s => s.id).filter(Boolean));
+      setCache(prev => {
+        const updated = new Map();
+        for (const [sessionId, data] of prev) {
+          if (runningIds.has(sessionId) || data.status !== 'running') {
+            updated.set(sessionId, data);
+          }
+        }
+        return updated;
+      });
+    } catch (error) {
+      console.warn('Failed to poll running sessions:', error);
+    }
+  }, [updateSessionCache]);
+
+  const startBackgroundPolling = useCallback(() => {
+    if (pollingInterval) return;
+
+    setIsPolling(true);
+    const interval = setInterval(pollRunningSessions, 3000); // Poll every 3 seconds
+    setPollingInterval(interval);
+  }, [pollingInterval, pollRunningSessions]);
+
+  const stopBackgroundPolling = useCallback(() => {
+    if (pollingInterval) {
+      clearInterval(pollingInterval);
+      setPollingInterval(null);
+    }
+    setIsPolling(false);
+  }, [pollingInterval]);
+
+  // Auto-start polling when provider mounts
+  useEffect(() => {
+    startBackgroundPolling();
+    return () => stopBackgroundPolling();
+  }, [startBackgroundPolling, stopBackgroundPolling]);
+
+  const value: OutputCacheContextType = {
+    getCachedOutput,
+    setCachedOutput,
+    updateSessionStatus,
+    clearCache,
+    isPolling,
+    startBackgroundPolling,
+    stopBackgroundPolling,
+  };
+
+  return (
+    <OutputCacheContext.Provider value={value}>
+      {children}
+    </OutputCacheContext.Provider>
+  );
+}

src/lib/utils.ts

@@ -0,0 +1,17 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Combines multiple class values into a single string using clsx and tailwind-merge.
+ * This utility function helps manage dynamic class names and prevents Tailwind CSS conflicts.
+ * 
+ * @param inputs - Array of class values that can be strings, objects, arrays, etc.
+ * @returns A merged string of class names with Tailwind conflicts resolved
+ * 
+ * @example
+ * cn("px-2 py-1", condition && "bg-blue-500", { "text-white": isActive })
+ * // Returns: "px-2 py-1 bg-blue-500 text-white" (when condition and isActive are true)
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}