Push client boundary down from page to AgentRunner component

Static header markup now renders server-side instead of shipping
as client JS.

Author: D-K-P

cursor-cli-demo/app/page.tsx

@@ -1,13 +1,6 @@
-"use client";
-
-import { ControlBar, useRunState } from "@/components/control-bar";
-import { Terminal } from "@/components/terminal";
+import { AgentRunner } from "@/components/agent-runner";
 
 export default function Home() {
-  const { runState, startRun, reset, markComplete } = useRunState();
-
-  const showTerminal = runState.status === "running" || runState.status === "complete";
-
   return (
     <main className="min-h-screen p-6 md:p-10 max-w-4xl mx-auto flex flex-col gap-6">
       <div>
@@ -19,21 +12,7 @@ export default function Home() {
         </p>
       </div>
 
-      <ControlBar runState={runState} onRun={startRun} onReset={reset} />
-
-      {showTerminal && (
-        <Terminal
-          runId={runState.runId}
-          publicAccessToken={runState.publicAccessToken}
-          onComplete={markComplete}
-        />
-      )}
-
-      {runState.status === "failed" && (
-        <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 text-sm text-red-400 font-mono">
-          {runState.error}
-        </div>
-      )}
+      <AgentRunner />
     </main>
   );
 }

cursor-cli-demo/components/agent-runner.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ControlBar, useRunState } from "@/components/control-bar";
+import { Terminal } from "@/components/terminal";
+
+export function AgentRunner() {
+  const { runState, startRun, reset, markComplete } = useRunState();
+
+  const showTerminal = runState.status === "running" || runState.status === "complete";
+
+  return (
+    <>
+      <ControlBar runState={runState} onRun={startRun} onReset={reset} />
+
+      {showTerminal && (
+        <Terminal
+          runId={runState.runId}
+          publicAccessToken={runState.publicAccessToken}
+          onComplete={markComplete}
+        />
+      )}
+
+      {runState.status === "failed" && (
+        <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 text-sm text-red-400 font-mono">
+          {runState.error}
+        </div>
+      )}
+    </>
+  );
+}