ok

Author: AmanVarshney01

apps/cli/src/tui/app.tsx

@@ -526,14 +526,33 @@ export async function renderTui(options: TuiOptions): Promise<void> {
 
   return new Promise((resolve) => {
     const handleExit = () => {
+      // Clean up the renderer before exiting (following opencode pattern)
+      try {
+        renderer.destroy();
+      } catch {
+        // Ignore errors during cleanup
+      }
       options.onCancel();
+      resolve();
       process.exit(0);
     };
 
+    // Handle SIGINT (Ctrl+C) for clean exit
+    process.on("SIGINT", handleExit);
+
     createRoot(renderer).render(
       <App
         initialConfig={options.initialConfig}
-        onComplete={options.onComplete}
+        onComplete={async (config) => {
+          await options.onComplete(config);
+          // Clean up after successful completion
+          try {
+            renderer.destroy();
+          } catch {
+            // Ignore errors during cleanup
+          }
+          resolve();
+        }}
         onExit={handleExit}
       />,
     );
@@ -717,13 +736,13 @@ function App(props: {
     <box style={{ width, height, backgroundColor: theme.bg, flexDirection: "column" }}>
       <box
         style={{
-          height: 5,
+          height: 6,
           justifyContent: "center",
           alignItems: "center",
           backgroundColor: theme.surface,
         }}
       >
-        <ascii-font text="Better T Stack" font="tiny" />
+        <ascii-font text="Better T Stack" font="block" />
       </box>
 
       <box
@@ -735,11 +754,12 @@ function App(props: {
           overflow: "scroll",
         }}
       >
-        {/* Prompts Phase */}
+        {/* Prompts Phase - Sequential like clack */}
         {phase === "prompts" && (
-          <>
+          <box style={{ flexDirection: "column" }}>
+            {/* Completed steps - compact list */}
             {visibleSteps.slice(0, currentVisibleIndex).map(({ step }) => (
-              <box key={step.id} style={{ flexDirection: "row" }}>
+              <box key={step.id} style={{ flexDirection: "row", marginBottom: 0 }}>
                 <text>
                   <span fg={theme.success}>◆</span>
                   <span fg={theme.muted}> {step.title}: </span>
@@ -748,8 +768,9 @@ function App(props: {
               </box>
             ))}
 
+            {/* Current step - prominent with spacing */}
             {!completed && currentStep && (
-              <box style={{ marginTop: 1 }}>
+              <box style={{ marginTop: currentVisibleIndex > 0 ? 1 : 0, flexDirection: "column" }}>
                 <box style={{ flexDirection: "row", marginBottom: 1 }}>
                   <text>
                     <span fg={theme.primary}>◇</span>
@@ -805,23 +826,15 @@ function App(props: {
               </box>
             )}
 
+            {/* Confirmation step */}
             {completed && (
               <ConfirmStep
                 config={config}
                 onComplete={handleComplete}
                 onBack={() => setCompleted(false)}
               />
             )}
-
-            {!completed &&
-              visibleSteps.slice(currentVisibleIndex + 1).map(({ step }) => (
-                <box key={step.id} style={{ flexDirection: "row" }}>
-                  <text>
-                    <span fg={theme.muted}>○ {step.title}</span>
-                  </text>
-                </box>
-              ))}
-          </>
+          </box>
         )}
 
         {/* Creating Phase - Show spinner and logs */}
@@ -905,34 +918,76 @@ function App(props: {
                 </span>
               </text>
             </box>
-
-            <box style={{ marginTop: 3 }}>
-              <text>
-                <span fg={theme.muted}>Press any key to exit...</span>
-              </text>
-            </box>
           </box>
         )}
       </box>
 
-      <box
-        style={{
-          height: 1,
-          backgroundColor: theme.surface,
-          paddingLeft: 2,
-          paddingRight: 2,
-          flexDirection: "row",
-          justifyContent: "space-between",
-        }}
-      >
-        <text>
-          <span fg={theme.muted}>ctrl+c</span>
-          <span fg={theme.subtext}> exit</span>
-        </text>
-        <text>
-          <span fg={theme.primary}>better-t-stack.dev</span>
-        </text>
-      </box>
+      {/* Status Bar */}
+      <StatusBar phase={phase} canGoBack={stepIndex > 0} />
+    </box>
+  );
+}
+
+// Version from package.json
+const VERSION = "3.11.0";
+
+// Status bar component showing keybinds and version
+function StatusBar(props: { phase: Phase; canGoBack: boolean }) {
+  const keybinds = () => {
+    switch (props.phase) {
+      case "prompts":
+        return (
+          <>
+            <span fg={theme.muted}>↑↓</span>
+            <span fg={theme.subtext}> navigate </span>
+            <span fg={theme.muted}>⏎</span>
+            <span fg={theme.subtext}> select </span>
+            {props.canGoBack && (
+              <>
+                <span fg={theme.muted}>esc</span>
+                <span fg={theme.subtext}> back </span>
+              </>
+            )}
+            <span fg={theme.muted}>ctrl+c</span>
+            <span fg={theme.subtext}> exit</span>
+          </>
+        );
+      case "creating":
+        return (
+          <>
+            <span fg={theme.muted}>ctrl+c</span>
+            <span fg={theme.subtext}> cancel</span>
+          </>
+        );
+      case "done":
+        return (
+          <>
+            <span fg={theme.muted}>any key</span>
+            <span fg={theme.subtext}> exit</span>
+          </>
+        );
+    }
+  };
+
+  return (
+    <box
+      style={{
+        height: 1,
+        backgroundColor: theme.surface,
+        paddingLeft: 2,
+        paddingRight: 2,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+    >
+      <text>
+        <span fg={theme.muted}>v{VERSION}</span>
+      </text>
+      <text>{keybinds()}</text>
+      <text>
+        <span fg={theme.primary}>better-t-stack.dev</span>
+      </text>
     </box>
   );
 }