spoon/apps/next/src/components/machine/box-status-card.tsx

'use client';

import type { ReactNode } from 'react';
import { Loader2, Play, RotateCw, Server, Square } from 'lucide-react';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@spoon/ui';

export type BoxStatus = {
  running: boolean;
  image: string | null;
  startedAt: string | null;
  memoryLimitBytes: number | null;
  containerName: string;
};

export type LifecycleAction = 'start' | 'stop' | 'restart';

const formatUptime = (startedAt: string | null): string => {
  if (!startedAt) return '—';
  const started = new Date(startedAt).getTime();
  if (Number.isNaN(started)) return '—';
  const seconds = Math.max(0, Math.floor((Date.now() - started) / 1000));
  const days = Math.floor(seconds / 86_400);
  const hours = Math.floor((seconds % 86_400) / 3_600);
  const minutes = Math.floor((seconds % 3_600) / 60);
  if (days > 0) return `${days}d ${hours}h`;
  if (hours > 0) return `${hours}h ${minutes}m`;
  if (minutes > 0) return `${minutes}m`;
  return `${seconds}s`;
};

const formatMemory = (bytes: number | null): string => {
  if (bytes === null) return 'Unlimited';
  const gib = bytes / 1024 ** 3;
  return `${gib.toFixed(gib < 10 ? 1 : 0)} GiB`;
};

const Detail = ({ label, value }: { label: string; value: string }) => (
  <div className='min-w-0'>
    <p className='text-muted-foreground text-[11px] font-medium tracking-wide uppercase'>
      {label}
    </p>
    <p className='truncate font-mono text-sm'>{value}</p>
  </div>
);

// Stopping or restarting the box tears down the SAME per-user container that a
// running agent thread job executes in, so both actions are destructive and get
// a confirmation step. Start is safe and stays a plain button.
const ConfirmLifecycleButton = ({
  icon,
  label,
  busy,
  title,
  description,
  confirmLabel,
  onConfirm,
}: {
  icon: ReactNode;
  label: string;
  busy: boolean;
  title: string;
  description: string;
  confirmLabel: string;
  onConfirm: () => void;
}) => (
  <AlertDialog>
    <AlertDialogTrigger asChild>
      <Button type='button' variant='outline' size='sm' disabled={busy}>
        {icon}
        {label}
      </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>{title}</AlertDialogTitle>
        <AlertDialogDescription>{description}</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction variant='destructive' onClick={onConfirm}>
          {confirmLabel}
        </AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);

export const BoxStatusCard = ({
  status,
  pendingAction,
  onAction,
}: {
  status: BoxStatus | null | undefined;
  pendingAction: LifecycleAction | null;
  onAction: (action: LifecycleAction) => void;
}) => {
  const loading = status === undefined;
  const running = Boolean(status?.running);
  const busy = pendingAction !== null;

  return (
    <Card className='shadow-none'>
      <CardHeader className='flex flex-row items-center justify-between gap-4 space-y-0'>
        <CardTitle className='flex items-center gap-2 text-base'>
          <Server className='size-4' />
          My Machine
        </CardTitle>
        {loading ? (
          <Badge variant='outline' className='gap-1'>
            <Loader2 className='size-3 animate-spin' />
            Checking…
          </Badge>
        ) : running ? (
          <Badge className='gap-1'>Running</Badge>
        ) : (
          <Badge variant='secondary'>Stopped</Badge>
        )}
      </CardHeader>
      <CardContent className='space-y-4'>
        <div className='grid grid-cols-2 gap-4 sm:grid-cols-3'>
          <Detail label='Image' value={status?.image ?? '—'} />
          <Detail
            label='Uptime'
            value={running ? formatUptime(status?.startedAt ?? null) : '—'}
          />
          <Detail
            label='Memory'
            value={formatMemory(status?.memoryLimitBytes ?? null)}
          />
        </div>
        <div className='flex flex-wrap gap-2'>
          {running ? (
            <>
              <ConfirmLifecycleButton
                label='Stop'
                busy={busy}
                icon={
                  pendingAction === 'stop' ? (
                    <Loader2 className='size-4 animate-spin' />
                  ) : (
                    <Square className='size-4' />
                  )
                }
                title='Stop this machine?'
                description='Stopping the machine shuts down the container it runs in. Any agent thread job currently running in this machine will be interrupted and lose its in-progress work.'
                confirmLabel='Stop machine'
                onConfirm={() => onAction('stop')}
              />
              <ConfirmLifecycleButton
                label='Restart'
                busy={busy}
                icon={
                  pendingAction === 'restart' ? (
                    <Loader2 className='size-4 animate-spin' />
                  ) : (
                    <RotateCw className='size-4' />
                  )
                }
                title='Restart this machine?'
                description='Restarting the machine recreates the container it runs in. Any agent thread job currently running in this machine will be interrupted and lose its in-progress work.'
                confirmLabel='Restart machine'
                onConfirm={() => onAction('restart')}
              />
            </>
          ) : (
            <Button
              type='button'
              size='sm'
              disabled={busy || loading}
              onClick={() => onAction('start')}
            >
              {pendingAction === 'start' ? (
                <Loader2 className='size-4 animate-spin' />
              ) : (
                <Play className='size-4' />
              )}
              Start
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  );
};