spb/claude-remote

1import type { SessionState, TaskState } from '@cr/shared';2import { Badge, Dot } from '@/components/ui/badge';3import { SESSION_STATE, TASK_STATE, sessionStateHint } from '@/lib/states';4import { cn } from '@/lib/cn';5import { useBrand } from '@/stores/branding';67export function SessionDot({ state, className }: { state: SessionState; className?: string }) {8  const m = SESSION_STATE[state];9  if (state === 'STOPPED' || state === 'CREATED') return <span role="img" aria-label={m.label} className={cn('inline-block size-2 shrink-0 rounded-full border-[1.5px] border-faint', className)} />;10  return <Dot tone={m.tone} pulse={m.pulse} label={m.label} className={className} />;11}12export function SessionStateBadge({ state, className }: { state: SessionState; className?: string }) {13  const brand = useBrand();14  const m = SESSION_STATE[state];15  return (16    <Badge tone={m.tone} className={className} title={sessionStateHint(state, brand)} data-state={state}>17      {m.label}18    </Badge>19  );20}21export function TaskStateBadge({ state, className }: { state: TaskState; className?: string }) {22  const m = TASK_STATE[state];23  return (24    <Badge tone={m.tone} className={className} data-state={state}>25      {m.pulse && <Dot tone={m.tone} pulse className="size-1.5" />}26      {m.label}27    </Badge>28  );29}30