agent-ecosystem/src/renderer/components/chat/CompactBoundary.tsx

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';

import {
  CODE_BG,
  CODE_BORDER,
  COLOR_TEXT_MUTED,
  COLOR_TEXT_SECONDARY,
  TOOL_CALL_BG,
  TOOL_CALL_BORDER,
  TOOL_CALL_TEXT,
} from '@renderer/constants/cssVariables';
import { formatTokensCompact as formatTokens } from '@shared/utils/tokenFormatting';
import { format } from 'date-fns';
import { ChevronRight, Layers } from 'lucide-react';
import remarkGfm from 'remark-gfm';

import { CopyButton } from '../common/CopyButton';

import { markdownComponents } from './markdownComponents';

import type { CompactGroup } from '@renderer/types/groups';

interface CompactBoundaryProps {
  compactGroup: CompactGroup;
}

/**
 * CompactBoundary displays an interactive, collapsible marker indicating where
 * the conversation was compacted.
 *
 * Features:
 * - Minimalist design with subtle border and hover states
 * - Click to expand/collapse compacted content
 * - Scrollable content area with enforced max-height
 * - Linear/Notion-inspired aesthetics
 */
export const CompactBoundary = ({
  compactGroup,
}: Readonly<CompactBoundaryProps>): React.JSX.Element => {
  const { timestamp, message } = compactGroup;
  const [isExpanded, setIsExpanded] = useState(false);

  // Extract content from message
  const getCompactContent = (): string => {
    if (!message?.content) return '';

    if (typeof message.content === 'string') {
      return message.content;
    }

    // If it's an array of content blocks, extract text
    if (Array.isArray(message.content)) {
      return message.content
        .filter((block: { type: string; text?: string }) => block.type === 'text')
        .map((block: { type: string; text?: string }) => block.text ?? '')
        .join('\n\n');
    }

    return '';
  };

  const compactContent = getCompactContent();

  return (
    <div className="my-6">
      {/* Collapsible Header - Amber/orange accent for distinction */}
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="group flex w-full cursor-pointer items-center gap-3 overflow-hidden rounded-lg px-4 py-2.5 transition-all duration-200"
        style={{
          backgroundColor: TOOL_CALL_BG,
          border: `1px solid ${TOOL_CALL_BORDER}`,
        }}
        aria-expanded={isExpanded}
        aria-label="Toggle compacted content"
      >
        {/* Icon Stack */}
        <div
          className="flex shrink-0 items-center gap-2 transition-colors"
          style={{ color: TOOL_CALL_TEXT }}
        >
          <ChevronRight
            size={16}
            className={`transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
          />
          <Layers size={16} />
        </div>

        {/* Label */}
        <span
          className="shrink-0 whitespace-nowrap text-sm font-medium transition-colors"
          style={{ color: TOOL_CALL_TEXT }}
        >
          Compacted
        </span>

        {/* Token delta info */}
        {compactGroup.tokenDelta && (
          <span
            className="ml-2 min-w-0 truncate text-xs tabular-nums"
            style={{ color: COLOR_TEXT_MUTED }}
          >
            {formatTokens(compactGroup.tokenDelta.preCompactionTokens)} →{' '}
            {formatTokens(compactGroup.tokenDelta.postCompactionTokens)}
            <span style={{ color: '#4ade80' }}>
              {' '}
              ({formatTokens(Math.abs(compactGroup.tokenDelta.delta))} freed)
            </span>
          </span>
        )}

        {/* Phase badge */}
        {compactGroup.startingPhaseNumber && (
          <span
            className="shrink-0 whitespace-nowrap rounded px-1.5 py-0.5 text-[10px]"
            style={{ backgroundColor: 'rgba(99, 102, 241, 0.15)', color: '#818cf8' }}
          >
            Phase {compactGroup.startingPhaseNumber}
          </span>
        )}

        {/* Timestamp */}
        <span
          className="ml-auto shrink-0 whitespace-nowrap text-xs transition-colors"
          style={{ color: COLOR_TEXT_MUTED }}
        >
          {format(timestamp, 'h:mm:ss a')}
        </span>
      </button>

      {/* Expanded Content */}
      {isExpanded && (
        <div
          className="group relative mt-2 overflow-hidden rounded-lg"
          style={{
            backgroundColor: CODE_BG,
            border: `1px solid ${CODE_BORDER}`,
          }}
        >
          {compactContent && <CopyButton text={compactContent} />}

          {/* Content - scrollable with left accent bar */}
          <div
            className="max-h-96 overflow-y-auto border-l-2 px-4 py-3"
            style={{ borderColor: 'var(--chat-ai-border)' }}
          >
            {compactContent ? (
              <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
                {compactContent}
              </ReactMarkdown>
            ) : (
              <div className="flex items-start gap-2">
                <Layers size={14} className="mt-0.5 shrink-0" style={{ color: COLOR_TEXT_MUTED }} />
                <div className="text-xs leading-relaxed" style={{ color: COLOR_TEXT_MUTED }}>
                  <p className="mb-1 font-medium" style={{ color: COLOR_TEXT_SECONDARY }}>
                    Conversation Compacted
                  </p>
                  <p>
                    Previous messages were summarized to save context. The full conversation history
                    is preserved in the session file.
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};