amc/dashboard/components/SessionCard.js

import { html, useEffect, useRef } from '../lib/preact.js';
import { getStatusMeta } from '../utils/status.js';
import { formatDuration, getContextUsageSummary } from '../utils/formatting.js';
import { ChatMessages } from './ChatMessages.js';
import { QuestionBlock } from './QuestionBlock.js';
import { SimpleInput } from './SimpleInput.js';
import { AgentActivityIndicator } from './AgentActivityIndicator.js';

export function SessionCard({ session, onClick, conversation, onFetchConversation, onRespond, onDismiss, enlarged = false, autocompleteConfig = null, isNewlySpawned = false }) {
  const hasQuestions = session.pending_questions && session.pending_questions.length > 0;
  const statusMeta = getStatusMeta(session.status);
  const agent = session.agent === 'codex' ? 'codex' : 'claude';
  const agentHeaderClass = agent === 'codex' ? 'agent-header-codex' : 'agent-header-claude';
  const contextUsage = getContextUsageSummary(session.context_usage);

  // Fetch conversation when card mounts
  useEffect(() => {
    if (!conversation && onFetchConversation) {
      onFetchConversation(session.session_id, session.project_dir, agent);
    }
  }, [session.session_id, session.project_dir, agent, conversation, onFetchConversation]);

  const chatPaneRef = useRef(null);
  const stickyToBottomRef = useRef(true); // Start in "sticky" mode
  const scrollUpAccumulatorRef = useRef(0); // Track cumulative scroll-up distance
  const prevConversationLenRef = useRef(0);

  // Track user intent via wheel events (only fires from actual user scrolling)
  useEffect(() => {
    const el = chatPaneRef.current;
    if (!el) return;

    const handleWheel = (e) => {
      // User scrolling up - accumulate distance before disabling sticky
      if (e.deltaY < 0) {
        scrollUpAccumulatorRef.current += Math.abs(e.deltaY);
        // Only disable sticky mode after scrolling up ~50px (meaningful intent)
        if (scrollUpAccumulatorRef.current > 50) {
          stickyToBottomRef.current = false;
        }
      }

      // User scrolling down - reset accumulator and check if near bottom
      if (e.deltaY > 0) {
        scrollUpAccumulatorRef.current = 0;
        const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
        if (distanceFromBottom < 100) {
          stickyToBottomRef.current = true;
        }
      }
    };

    el.addEventListener('wheel', handleWheel, { passive: true });
    return () => el.removeEventListener('wheel', handleWheel);
  }, []);

  // Auto-scroll when conversation changes
  useEffect(() => {
    const el = chatPaneRef.current;
    if (!el || !conversation) return;

    const prevLen = prevConversationLenRef.current;
    const currLen = conversation.length;
    const hasNewMessages = currLen > prevLen;
    const isFirstLoad = prevLen === 0 && currLen > 0;

    // Check if user just submitted (always scroll for their own messages)
    const lastMsg = conversation[currLen - 1];
    const userJustSubmitted = hasNewMessages && lastMsg?.role === 'user';

    prevConversationLenRef.current = currLen;

    // Auto-scroll if in sticky mode, first load, or user just submitted
    if (isFirstLoad || userJustSubmitted || (hasNewMessages && stickyToBottomRef.current)) {
      requestAnimationFrame(() => {
        el.scrollTop = el.scrollHeight;
      });
    }
  }, [conversation]);

  const handleDismissClick = (e) => {
    e.stopPropagation();
    if (onDismiss) onDismiss(session.session_id);
  };

  // Container classes differ based on enlarged mode
  const spawnClass = isNewlySpawned ? ' session-card-spawned' : '';
  const containerClasses = enlarged
    ? 'glass-panel flex w-full max-w-[90vw] max-h-[90vh] flex-col overflow-hidden rounded-2xl border border-selection/80'
    : 'glass-panel flex h-[850px] max-h-[850px] w-[600px] cursor-pointer flex-col overflow-hidden rounded-xl border border-selection/70 transition-[border-color,box-shadow] duration-200 hover:border-starting/35 hover:shadow-panel' + spawnClass;

  return html`
    <div
      class=${containerClasses}
      style=${{ borderLeftWidth: '3px', borderLeftColor: statusMeta.borderColor }}
      onClick=${enlarged ? undefined : () => onClick && onClick(session)}
    >
      <!-- Card Header -->
      <div class="shrink-0 border-b px-4 py-3 ${agentHeaderClass}">
        <div class="flex items-start justify-between gap-2.5">
          <div class="min-w-0">
            <div class="flex items-center gap-2.5">
              <span class="h-2 w-2 shrink-0 rounded-full ${statusMeta.dot} ${statusMeta.spinning ? 'spinner-dot' : ''}" style=${{ color: statusMeta.borderColor }}></span>
              <span class="truncate font-display text-base font-medium text-bright">${session.project || session.name || 'Session'}</span>
            </div>
            <div class="mt-2 flex flex-wrap items-center gap-2">
              <span class="rounded-full border px-2.5 py-1 font-mono text-micro uppercase tracking-[0.14em] ${statusMeta.badge}">
                ${statusMeta.label}
              </span>
              <span class="rounded-full border px-2.5 py-1 font-mono text-micro uppercase tracking-[0.14em] ${agent === 'codex' ? 'border-emerald-400/45 bg-emerald-500/14 text-emerald-300' : 'border-violet-400/45 bg-violet-500/14 text-violet-300'}">
                ${agent}
              </span>
              ${session.project_dir && html`
                <span class="truncate rounded-full border border-selection bg-bg/40 px-2.5 py-1 font-mono text-micro text-dim">
                  ${session.project_dir.split('/').slice(-2).join('/')}
                </span>
              `}
            </div>
          </div>
          <div class="flex items-center gap-3 shrink-0 pt-0.5">
            <span class="font-mono text-xs tabular-nums text-dim">${formatDuration(session.started_at)}</span>
            ${session.status === 'done' && html`
              <button
                onClick=${handleDismissClick}
                class="flex h-7 w-7 items-center justify-center rounded-lg border border-selection/80 text-dim transition-colors hover:border-done/40 hover:bg-done/10 hover:text-bright"
                title="Dismiss"
              >
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
              </button>
            `}
          </div>
        </div>
      </div>

      <!-- Card Content Area (Chat) -->
      <div ref=${chatPaneRef} class="flex-1 min-h-0 overflow-y-auto bg-surface px-4 py-4">
        <${ChatMessages} messages=${conversation || []} status=${session.status} limit=${enlarged ? null : 20} />
      </div>

      <!-- Card Footer (Status + Input/Questions) -->
      <div class="shrink-0 border-t border-selection/70 bg-bg/55">
        <!-- Session Status Area -->
        <div class="flex items-center justify-between gap-3 px-4 py-2 border-b border-selection/50 bg-bg/60">
          <${AgentActivityIndicator} session=${session} />
          ${contextUsage && html`
            <div class="flex items-center gap-2 rounded-lg border border-selection/80 bg-bg/45 px-2.5 py-1.5 font-mono text-label text-dim" title=${contextUsage.title}>
              <span class="text-bright">${contextUsage.headline}</span>
              <span class="truncate">${contextUsage.detail}</span>
              ${contextUsage.trail && html`<span class="text-dim/80">${contextUsage.trail}</span>`}
            </div>
          `}
        </div>
        <!-- Actions Area -->
        <div class="p-4">
        ${hasQuestions ? html`
          <${QuestionBlock}
            questions=${session.pending_questions}
            sessionId=${session.session_id}
            status=${session.status}
            onRespond=${onRespond}
          />
        ` : html`
          <${SimpleInput}
            sessionId=${session.session_id}
            status=${session.status}
            onRespond=${onRespond}
            autocompleteConfig=${autocompleteConfig}
          />
        `}
        </div>
      </div>
    </div>
  `;
}