claude-code/packages/remote-control-server/web/components/ThreadHistory.tsx

import { useState, useEffect, useCallback, useMemo } from 'react';
import { Search, Clock, RefreshCw } from 'lucide-react';
import type { ACPClient } from '../src/acp/client';
import type { AgentSessionInfo } from '../src/acp/types';
import { Input } from './ui/input';
import { ScrollArea } from './ui/scroll-area';
import { Button } from './ui/button';
import { cn } from '../src/lib/utils';

// Reference: Zed's TimeBucket in thread_history.rs
type TimeBucket = 'today' | 'yesterday' | 'thisWeek' | 'pastWeek' | 'all';

// Reference: Zed's Display impl for TimeBucket
const BUCKET_LABELS: Record<TimeBucket, string> = {
  today: 'Today',
  yesterday: 'Yesterday',
  thisWeek: 'This Week',
  pastWeek: 'Past Week',
  all: 'All', // Zed uses "All", not "Older"
};

// Reference: Zed's TimeBucket::from_dates (line 1028-1051)
// Rust's IsoWeek includes year, so we need to compare both year and week number
function getTimeBucket(date: Date): TimeBucket {
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);

  const entryDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());

  if (entryDate.getTime() === today.getTime()) return 'today';
  if (entryDate.getTime() === yesterday.getTime()) return 'yesterday';

  // This week: same ISO week AND year
  const todayIsoWeek = getISOWeekYear(today);
  const entryIsoWeek = getISOWeekYear(entryDate);
  if (todayIsoWeek.year === entryIsoWeek.year && todayIsoWeek.week === entryIsoWeek.week) {
    return 'thisWeek';
  }

  // Past week: (reference - 7days).iso_week()
  const lastWeekDate = new Date(today);
  lastWeekDate.setDate(lastWeekDate.getDate() - 7);
  const lastWeekIsoWeek = getISOWeekYear(lastWeekDate);
  if (lastWeekIsoWeek.year === entryIsoWeek.year && lastWeekIsoWeek.week === entryIsoWeek.week) {
    return 'pastWeek';
  }

  return 'all';
}

// Returns ISO week number AND ISO week year (important for year boundaries)
function getISOWeekYear(date: Date): { week: number; year: number } {
  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  const dayNum = d.getUTCDay() || 7;
  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
  const week = Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
  return { week, year: d.getUTCFullYear() }; // ISO week year, not calendar year
}

// Reference: Zed's formatted_time in HistoryEntryElement (line 904-921)
// Exact format: Xd, Xh ago, Xm ago, Just now, Unknown
function formatRelativeTime(date: Date | null): string {
  if (!date) return 'Unknown'; // Zed uses "Unknown" for missing updatedAt

  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffMinutes = Math.floor(diffMs / (1000 * 60));

  if (diffDays > 0) return `${diffDays}d`;
  if (diffHours > 0) return `${diffHours}h ago`;
  if (diffMinutes > 0) return `${diffMinutes}m ago`;
  return 'Just now';
}

interface ThreadHistoryProps {
  client: ACPClient;
  // Returns Promise to allow loading state tracking; resolves when session is loaded
  onSelectSession: (session: AgentSessionInfo) => void | Promise<void>;
}

interface GroupedSessions {
  bucket: TimeBucket;
  sessions: AgentSessionInfo[];
}

export function ThreadHistory({ client, onSelectSession }: ThreadHistoryProps) {
  const [sessions, setSessions] = useState<AgentSessionInfo[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  // Start with isLoading=true to prevent flash of "no threads" message
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedIndex, setSelectedIndex] = useState(0);
  // Track which session is currently being loaded to show loading state and prevent double-clicks
  const [loadingSessionId, setLoadingSessionId] = useState<string | null>(null);

  // Check if session history is supported
  const supportsHistory = client.supportsSessionHistory;

  const loadSessions = useCallback(async () => {
    if (!client.supportsSessionList) {
      setError('Session list not supported by this agent');
      setIsLoading(false);
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      const response = await client.listSessions();
      setSessions(response.sessions);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setIsLoading(false);
    }
  }, [client]);

  useEffect(() => {
    if (supportsHistory) {
      loadSessions();
    } else {
      // Not supported, clear loading state
      setIsLoading(false);
    }
  }, [supportsHistory, loadSessions]);

  // Filter and group sessions
  // Reference: Zed's add_list_separators and filter_search_results
  const groupedSessions = useMemo((): GroupedSessions[] => {
    let filtered = sessions;

    // Simple search filter (Zed uses fuzzy matching, we use substring for simplicity)
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = sessions.filter(
        s => s.title?.toLowerCase().includes(query) || s.sessionId.toLowerCase().includes(query),
      );
    }

    // Sort by updatedAt descending (most recent first)
    // Zed expects the API to return sorted data, but we ensure it client-side
    const sorted = [...filtered].sort((a, b) => {
      const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
      const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
      return dateB - dateA; // Descending
    });

    // Group by time bucket (preserving sort order within each bucket)
    const groups = new Map<TimeBucket, AgentSessionInfo[]>();
    for (const session of sorted) {
      const date = session.updatedAt ? new Date(session.updatedAt) : new Date(0);
      const bucket = getTimeBucket(date);
      if (!groups.has(bucket)) groups.set(bucket, []);
      groups.get(bucket)!.push(session);
    }

    // Return in chronological bucket order
    const bucketOrder: TimeBucket[] = ['today', 'yesterday', 'thisWeek', 'pastWeek', 'all'];
    return bucketOrder.filter(b => groups.has(b)).map(bucket => ({ bucket, sessions: groups.get(bucket)! }));
  }, [sessions, searchQuery]);

  const handleSelectSession = useCallback(
    async (session: AgentSessionInfo) => {
      // Prevent double-clicks while loading
      if (loadingSessionId) return;

      setLoadingSessionId(session.sessionId);
      try {
        await onSelectSession(session);
      } finally {
        setLoadingSessionId(null);
      }
    },
    [onSelectSession, loadingSessionId],
  );

  if (!supportsHistory) {
    return (
      <div className="flex flex-col items-center justify-center h-full p-4 text-center">
        <Clock className="h-12 w-12 text-muted-foreground mb-4" />
        <p className="text-muted-foreground">Session history is not supported by this agent.</p>
      </div>
    );
  }

  const flatItems = groupedSessions.flatMap(g => g.sessions);

  return (
    <div className="flex flex-col h-full">
      {/* Search header - Reference: Zed's search_editor */}
      <div className="flex items-center gap-2 p-2 border-b border-border">
        <Search className="h-4 w-4 text-muted-foreground shrink-0" />
        <Input
          placeholder="Search threads..."
          value={searchQuery}
          onChange={e => setSearchQuery(e.target.value)}
          className="h-8 border-0 focus-visible:ring-0 shadow-none"
        />
        <Button variant="ghost" size="sm" onClick={loadSessions} disabled={isLoading} className="shrink-0">
          <RefreshCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
        </Button>
      </div>

      {/* Session list */}
      <ScrollArea className="flex-1 min-h-0">
        {error && <div className="p-4 text-center text-destructive text-sm">{error}</div>}

        {!error && isLoading && sessions.length === 0 && (
          <div className="flex flex-col items-center justify-center h-full p-8 text-center">
            <RefreshCw className="h-6 w-6 text-muted-foreground animate-spin mb-2" />
            <p className="text-muted-foreground text-sm">Loading threads...</p>
          </div>
        )}

        {!error && !isLoading && sessions.length === 0 && (
          <div className="flex flex-col items-center justify-center h-full p-8 text-center">
            <p className="text-muted-foreground text-sm">You don't have any past threads yet.</p>
          </div>
        )}

        {!error && sessions.length > 0 && groupedSessions.length === 0 && (
          <div className="flex flex-col items-center justify-center h-full p-8 text-center">
            <p className="text-muted-foreground text-sm">No threads match your search.</p>
          </div>
        )}

        {/* p-2 ensures rounded corners of buttons are not clipped */}
        <div className="p-2">
          {groupedSessions.map((group, groupIndex) => (
            <div key={group.bucket}>
              {/* Bucket separator - Reference: Zed's BucketSeparator */}
              <div className={cn('px-2 pb-1', groupIndex > 0 && 'pt-3')}>
                <span className="text-xs text-muted-foreground font-medium">{BUCKET_LABELS[group.bucket]}</span>
              </div>

              {/* Session entries */}
              {group.sessions.map(session => {
                const globalIdx = flatItems.indexOf(session);
                const isSelected = globalIdx === selectedIndex;
                const isLoadingThis = loadingSessionId === session.sessionId;
                const isAnyLoading = loadingSessionId !== null;
                const date = session.updatedAt ? new Date(session.updatedAt) : null;

                return (
                  <button
                    key={session.sessionId}
                    disabled={isAnyLoading}
                    onClick={() => {
                      setSelectedIndex(globalIdx);
                      handleSelectSession(session);
                    }}
                    className={cn(
                      // min-w-0 is required for truncate to work in flex containers
                      'w-full min-w-0 flex items-center gap-2 px-3 py-2 rounded-md text-left transition-colors',
                      'hover:bg-accent',
                      isSelected && 'bg-accent',
                      isAnyLoading && !isLoadingThis && 'opacity-50 cursor-not-allowed',
                      isLoadingThis && 'bg-accent',
                    )}
                  >
                    {/* min-w-0 + truncate ensures long titles are clipped with ellipsis */}
                    <span className="text-sm truncate flex-1 min-w-0">
                      {session.title && session.title.trim() ? session.title : 'New Thread'}
                    </span>
                    <span className="text-xs text-muted-foreground shrink-0 whitespace-nowrap">
                      {isLoadingThis ? <RefreshCw className="h-3 w-3 animate-spin" /> : formatRelativeTime(date)}
                    </span>
                  </button>
                );
              })}
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}