feat: support suspending ui (#173)

Co-authored-by: Shubham Naik <shub@memgpt.ai>

src/cli/App.tsx

@@ -65,6 +65,7 @@ import { generatePlanFilePath } from "./helpers/planName";
 import { safeJsonParseOr } from "./helpers/safeJsonParse";
 import { type ApprovalRequest, drainStreamWithResume } from "./helpers/stream";
 import { getRandomThinkingMessage } from "./helpers/thinkingMessages";
+import { useSuspend } from "./hooks/useSuspend/useSuspend.ts";
 import { useTerminalWidth } from "./hooks/useTerminalWidth";
 
 const CLEAR_SCREEN_AND_HOME = "\u001B[2J\u001B[H";
@@ -240,6 +241,8 @@ export default function App({
   const [agentId, setAgentId] = useState(initialAgentId);
   const [agentState, setAgentState] = useState(initialAgentState);
 
+  const resumeKey = useSuspend();
+
   // Sync with prop changes (e.g., when parent updates from "loading" to actual ID)
   useEffect(() => {
     if (initialAgentId !== agentId) {
@@ -2899,7 +2902,7 @@ Plan file path: ${planFilePath}`;
   ]);
 
   return (
-    <Box flexDirection="column" gap={1}>
+    <Box key={resumeKey} flexDirection="column" gap={1}>
       <Static
         key={staticRenderEpoch}
         items={staticItems}