hunk.code_window: 	return (
   		<Card className="flex w-[280px] shrink-0 flex-col  bg-app-box/50 !p-0 ">
   			<div className="flex flex-row items-center gap-5 p-4 px-6 ">
   				{!!stats.freeSpace && (
   					<CircularProgress
   						radius={40}
   						progress={progress}
   						strokeWidth={6}
   						trackStrokeWidth={6}
  
hunk.labels: keep keep keep keep replace keep keep keep keep keep
hunk.after_edit: 				{stats.freeSpace && (
  
hunk.file_path: interface/app/$libraryId/overview/StatCard.tsx
hunk.type: replace
file: import { inferSubscriptionResult } from '@oscartbeaumont-sd/rspc-client';
  import { useMemo, useState } from 'react';
  import { Procedures, useLibraryMutation, useLibrarySubscription } from '@sd/client';
  import { Button } from '@sd/ui';
  import { useRouteTitle } from '~/hooks/useRouteTitle';
  
  export const Component = () => {
  	useRouteTitle('Actors');
  
  	const [data, setData] = useState<inferSubscriptionResult<Procedures, 'library.actors'>>({});
  
  	useLibrarySubscription(['library.actors'], { onData: setData });
  
  	const sortedData = useMemo(() => {
  		const sorted = Object.entries(data).sort(([a], [b]) => a.localeCompare(b));
  		return sorted;
  	}, [data]);
  
  	return (
  		<div className="h-full w-full">
  			<table>
  				<tr>
  					<th>Name</th>
  					<th>Running</th>
  				</tr>
  				{sortedData.map(([name, running]) => (
  					<tr key={name}>
  						<td className="pl-2 pr-4 text-left">{name}</td>
  						<td className="pl-2 pr-4 text-left">
  							{running ? 'Running' : 'Not Running'}
  						</td>
  						<td className="py-1">
  							{running ? <StopButton name={name} /> : <StartButton name={name} />}
  						</td>
  					</tr>
  				))}
  			</table>
  		</div>
  	);
  };
  
  function StartButton({ name }: { name: string }) {
  	const startActor = useLibraryMutation(['library.startActor']);
  
  	return (
  		<Button
  			variant="accent"
  			disabled={startActor.isLoading}
  			onClick={() => startActor.mutate(name)}
  		>
  			{startActor.isLoading ? 'Starting...' : 'Start'}
  		</Button>
  	);
  }
  
  function StopButton({ name }: { name: string }) {
  	const stopActor = useLibraryMutation(['library.stopActor']);
  
  	return (
  		<Button
  			variant="accent"
  			disabled={stopActor.isLoading}
  			onClick={() => stopActor.mutate(name)}
  		>
  			{stopActor.isLoading ? 'Stopping...' : 'Stop'}
  		</Button>
  	);
  }
  