173 lines
7.8 KiB
JavaScript
173 lines
7.8 KiB
JavaScript
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.cwd && html`
|
|
<span class="truncate rounded-full border border-selection bg-bg/40 px-2.5 py-1 font-mono text-micro text-dim">
|
|
${session.cwd.split('/').slice(-2).join('/')}
|
|
</span>
|
|
`}
|
|
</div>
|
|
${contextUsage && html`
|
|
<div class="mt-2 inline-flex max-w-full 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>
|
|
<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 (Activity + Input/Questions) -->
|
|
<div class="shrink-0 border-t border-selection/70 bg-bg/55">
|
|
<${AgentActivityIndicator} session=${session} />
|
|
<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>
|
|
`;
|
|
}
|