integrate cleanup time from playground-mono

apps/playground-web/components/Playground/TerminalUI.tsx

@@ -6,8 +6,10 @@ import { useState } from 'react';
 import Tooltip from '../Overlays/Tooltip';
 export function TerminalUI({ initialCommandsLeft = 1000 }) {
   const [commandsLeft, setCommandsLeft] = useState(initialCommandsLeft);
-  const handleCommandExecuted = (commands: number) => {
+  const [cleanupTimeLeft, setCleanupTimeLeft] = useState(15 * 60);
+  const handleCommandExecuted = (commands: number, cleanup: number) => {
     setCommandsLeft(commands);
+    setCleanupTimeLeft(cleanup);
   };
 
   return (
@@ -27,13 +29,21 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) {
           <Shell onCommandExecuted={handleCommandExecuted} />
         </div>
       </div>
-      <TerminalCounter commandsLeft={commandsLeft} />
+      <TerminalCounter
+        commandsLeft={commandsLeft}
+        cleanupTimeLeft={cleanupTimeLeft}
+      />
     </>
   );
 }
 
-function TerminalCounter({ commandsLeft }: { commandsLeft: number }) {
-  const { timeLeft } = useTimer(15 * 60);
+function TerminalCounter({
+  commandsLeft,
+  cleanupTimeLeft,
+}: {
+  commandsLeft: number;
+  cleanupTimeLeft: number;
+}) {
   return (
     <div className="flex flex-col" data-testid="terminal-counter">
       <div className="flex flex-row justify-between text-gray-900 mt-4">
@@ -42,7 +52,7 @@ function TerminalCounter({ commandsLeft }: { commandsLeft: number }) {
             className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
             data-testid="cleanup-timer"
           >
-            <span>Cleanup in: {formatTime(timeLeft)} mins</span>
+            <span>Cleanup in: {formatTime(cleanupTimeLeft)} mins</span>
           </div>
           <Tooltip message="The time remaining until cleanup is initiated." />
         </div>

apps/playground-web/components/Shell/Shell.tsx

@@ -5,7 +5,7 @@
 import { useShell } from './hooks/useShell';
 
 interface ShellProps {
-  onCommandExecuted: (commandsLeft: number) => void;
+  onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void;
 }
 
 export default function Shell({ onCommandExecuted }: ShellProps) {

apps/playground-web/components/Shell/hooks/useShell.tsx

@@ -5,7 +5,9 @@ import { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from 'react';
 import { handleCommand } from '@/shared/utils/shellUtils';
 import blocklistedCommands from '@/shared/utils/blocklist';
 
-export const useShell = (onCommandExecuted: (commandsLeft: number) => void) => {
+export const useShell = (
+  onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void,
+) => {
   // states
   const [command, setCommand] = useState('');
   const [output, setOutput] = useState<string[]>([]);

apps/playground-web/shared/utils/commonUtils.ts

@@ -13,7 +13,7 @@ interface HandleResultProps {
   };
   newOutput: string;
   setOutput: (prevOutput: any) => any; // Adjust type as necessary
-  onCommandExecuted: (commandsLeft: number) => void; // Allow undefined
+  onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void; // Allow undefined
 }
 
 export const handleResult = ({
@@ -37,5 +37,6 @@ export const handleResult = ({
   }
 
   const commandsLeft = Number(result.headers['x-ratelimit-remaining']);
-  onCommandExecuted(commandsLeft);
+  const cleanupTimeLeft = Number(result.headers['x-next-cleanup-time']);
+  onCommandExecuted(commandsLeft, cleanupTimeLeft);
 };

apps/playground-web/types/index.d.ts

@@ -3,5 +3,5 @@ import * as React from 'react';
 export interface CommandHandler {
   command: string;
   setOutput: React.Dispatch<React.SetStateAction<string[]>>;
-  onCommandExecuted: (commandsLeft: number) => void;
+  onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void;
 }