Function SessionCard

apps/vis/web/src/components/sessions/SessionCard.tsx:12–110

({ session, onDelete, deleting }: SessionCardProps)

}

export function SessionCard({ session, onDelete, deleting }: SessionCardProps) {
  const { sessionId } = useParams<{ sessionId: string }>();
  const selected = sessionId === session.sessionId;
  const workspaceLabel = session.workDir
    ? session.workDir.split('/').slice(-2).join('/')
    : '(no workspace)';
  const shortId = session.sessionId.replace(/^session_/, '').slice(0, 10);
  const title = session.title;
  const subagentCount = Math.max(0, session.agentCount - 1);

  function handleDeleteClick(e: MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    e.stopPropagation();
    onDelete(session);
  }

  return (
    <div
      className={[
        'group relative border-b border-border transition-colors',
        selected ? 'bg-surface-2' : 'hover:bg-surface-1',
      ].join(' ')}
    >
      {selected ? (
        <span className="absolute inset-y-0 left-0 w-[2px] bg-[var(--color-cat-conversation)]" />
      ) : null}
      <Link to={`/sessions/${session.sessionId}`} className="block px-3 py-2 pr-10">
        <div className="flex items-center justify-between gap-2">
          <div className="flex min-w-0 items-center gap-2">
            <span
              className="inline-block h-[7px] w-[7px] shrink-0 rounded-full"
              style={{ backgroundColor: session.imported ? 'var(--color-cat-subagent)' : 'var(--color-fg-3)' }}
            />
            <span className="shrink-0 font-mono text-[12px] text-fg-0">{shortId}</span>
            {session.imported ? (
              <span
                className="shrink-0 border px-1 py-0 font-mono text-[9px] uppercase tracking-[0.08em]"
                style={{ borderColor: 'var(--color-cat-subagent)', color: 'var(--color-cat-subagent)' }}
                title={
                  session.importMeta?.originalName
                    ? `imported from ${session.importMeta.originalName}`
                    : 'imported debug bundle'
                }
              >
                imported
              </span>
            ) : null}
          </div>
          <span className="shrink-0 font-mono text-[10.5px] text-fg-3 tabular">
            {formatRelativeTime(session.updatedAt)}
          </span>
        </div>
        <div className="mt-1 flex items-center gap-3 font-mono text-[10.5px] text-fg-2">
          <span className="truncate" title={session.workDir ?? ''}>
            {workspaceLabel}
          </span>
          <span className="tabular text-fg-3">
            {session.mainWireRecordCount}ev