thoughtfulllc · to-be-coder · Mar 24, 2026 · Mar 20, 2026 · Mar 20, 2026 · Mar 20, 2026
diff --git a/opentui b/opentui
diff --git a/packages/demo/demos/prompt-input.tsx b/packages/demo/demos/prompt-input.tsx
@@ -66,6 +66,7 @@ export function PromptInputApp() {
         files={files}
         placeholder="Message Claude..."
         showDividers
+        autoFocus
         useKeyboard={useKeyboard}
         onSubmit={handleSubmit}
       />

diff --git a/packages/demo/demos/spinner.tsx b/packages/demo/demos/spinner.tsx
@@ -1,16 +1,11 @@
 // @ts-nocheck
 import { useKeyboard } from "@gridland/utils"
-import { SpinnerPicker, StatusBar } from "@gridland/ui"
+import { SpinnerPicker } from "@gridland/ui"
 
 export function SpinnerApp() {
   return (
     <box flexDirection="column" flexGrow={1}>
-      <box flexGrow={1}>
-        <SpinnerPicker useKeyboard={useKeyboard} />
-      </box>
-      <box paddingX={1} paddingBottom={1}>
-        <StatusBar items={[{ key: "←→", label: "change variant" }]} />
-      </box>
+      <SpinnerPicker useKeyboard={useKeyboard} />
     </box>
   )
 }
diff --git a/packages/docs/components/demos/ai-chat-interface-demo.tsx b/packages/docs/components/demos/ai-chat-interface-demo.tsx
@@ -78,7 +78,7 @@ function AIChatInterfaceApp() {
 
 export default function AIChatInterfaceDemo() {
   return (
-    <DemoWindow title="AI Chat Interface" tuiStyle={{ width: "100%", height: 480 }}>
+    <DemoWindow title="AI Chat Interface" tuiStyle={{ width: "100%", height: 480 }} autoFocus>
       <AIChatInterfaceApp />
     </DemoWindow>
   )

diff --git a/packages/docs/components/demos/chain-of-thought-demo.tsx b/packages/docs/components/demos/chain-of-thought-demo.tsx
@@ -6,7 +6,7 @@ import { ChainOfThought, ChainOfThoughtHeader, ChainOfThoughtContent, ChainOfTho
 
 export default function ChainOfThoughtDemo() {
   return (
-    <DemoWindow title="Chain of Thought" tuiStyle={{ width: "100%", height: 340 }}>
+    <DemoWindow title="Chain of Thought" tuiStyle={{ width: "100%", height: 340 }} autoFocus>
       <ChainOfThoughtApp />
     </DemoWindow>
   )

diff --git a/packages/docs/components/demos/spinner-demo.tsx b/packages/docs/components/demos/spinner-demo.tsx
@@ -6,7 +6,7 @@ import { Spinner, SpinnerShowcase } from "@gridland/ui"
 
 export default function SpinnerPickerDemo() {
   return (
-    <DemoWindow title="Spinner" tuiStyle={{ width: "100%", height: 140 }}>
+    <DemoWindow title="Spinner" tuiStyle={{ width: "100%", height: 140 }} autoFocus>
       <SpinnerApp />
     </DemoWindow>
   )

diff --git a/packages/docs/components/demos/tabs-demo.tsx b/packages/docs/components/demos/tabs-demo.tsx
@@ -109,7 +109,7 @@ function ContentTabBarApp() {
 
 export function TabsSimpleDemo() {
   return (
-    <DemoWindow title="TabBar" tuiStyle={{ width: "100%", height: 120 }}>
+    <DemoWindow title="TabBar" tuiStyle={{ width: "100%", height: 120 }} autoFocus>
       <TabBarApp />
     </DemoWindow>
   )

diff --git a/packages/docs/components/demos/text-input-demo.tsx b/packages/docs/components/demos/text-input-demo.tsx
@@ -48,7 +48,7 @@ function TextInputPickerApp() {
 
 export function TextInputPickerDemo() {
   return (
-    <DemoWindow title="TextInput" tuiStyle={{ width: "100%", height: 200 }}>
+    <DemoWindow title="TextInput" tuiStyle={{ width: "100%", height: 200 }} autoFocus>
       <TextInputPickerApp />
     </DemoWindow>
   )

diff --git a/packages/docs/components/ui/demo-window.tsx b/packages/docs/components/ui/demo-window.tsx
@@ -22,6 +22,7 @@ export interface DemoWindowProps {
   cols?: number
   rows?: number
   cursorHighlight?: boolean
+  autoFocus?: boolean
   children: ReactNode
 }
 
@@ -32,6 +33,7 @@ export function DemoWindow({
   cols = 80,
   rows = 24,
   cursorHighlight = false,
+  autoFocus = false,
   children,
 }: DemoWindowProps) {
   const { resolvedTheme } = usePageTheme()
@@ -93,7 +95,7 @@ export function DemoWindow({
     <TerminalWindow title={title} className={className} titleBarRight={titleBarRight}>
       <div className="overflow-x-auto overscroll-x-none">
         <div style={{ display: mode === "browser" ? "block" : "none" }}>
-          <TUI style={tuiStyle} autoFocus={false} backgroundColor={tuiTheme.background} cursorHighlight={cursorHighlight}>
+          <TUI style={tuiStyle} autoFocus={autoFocus} backgroundColor={tuiTheme.background} cursorHighlight={cursorHighlight}>
             <ThemeProvider theme={tuiTheme}>{children}</ThemeProvider>
           </TUI>
         </div>

diff --git a/packages/docs/content/docs/components/ascii.mdx b/packages/docs/content/docs/components/ascii.mdx
@@ -11,7 +11,7 @@ Renders text as large ASCII art using the `<ascii-font>` OpenTUI intrinsic.
 Supports multiple font styles and custom colors.
 
 <div className="my-8">
-  <DemoWindow title="Ascii" tuiStyle={{ width: "100%", height: 280 }}>
+  <DemoWindow title="Ascii" tuiStyle={{ width: "100%", height: 280 }} autoFocus>
     <AsciiApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/chat.mdx b/packages/docs/content/docs/components/chat.mdx
@@ -12,7 +12,7 @@ call status cards, streaming text, a loading indicator, and a `PromptInput`.
 SDK-agnostic — the consumer passes messages and handles submission.
 
 <div className="my-8">
-  <DemoWindow title="Chat" tuiStyle={{ width: "100%", height: 280 }}>
+  <DemoWindow title="Chat" tuiStyle={{ width: "100%", height: 280 }} autoFocus>
     <ChatApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/gradient.mdx b/packages/docs/content/docs/components/gradient.mdx
@@ -11,7 +11,7 @@ Applies a color gradient across text characters. Choose from 13 named presets
 or provide custom hex colors.
 
 <div className="my-8">
-  <DemoWindow title="Gradient" tuiStyle={{ width: "100%", height: 280 }}>
+  <DemoWindow title="Gradient" tuiStyle={{ width: "100%", height: 280 }} autoFocus>
     <GradientApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/link.mdx b/packages/docs/content/docs/components/link.mdx
@@ -11,7 +11,7 @@ A clickable hyperlink for terminal UIs with configurable underline style and
 color.
 
 <div className="my-8">
-  <DemoWindow title="Link" tuiStyle={{ width: "100%", height: 120 }}>
+  <DemoWindow title="Link" tuiStyle={{ width: "100%", height: 120 }} autoFocus>
     <LinkApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/modal.mdx b/packages/docs/content/docs/components/modal.mdx
@@ -11,7 +11,7 @@ A bordered container that overlays content, optionally displays a title, and
 listens for the Escape key to trigger a close callback.
 
 <div className="my-8">
-  <DemoWindow title="Modal" tuiStyle={{ width: "100%", height: 200 }}>
+  <DemoWindow title="Modal" tuiStyle={{ width: "100%", height: 200 }} autoFocus>
     <ModalApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/multi-select.mdx b/packages/docs/content/docs/components/multi-select.mdx
@@ -11,7 +11,7 @@ A multi-selection list with checkbox indicators, keyboard navigation, group
 headers, a submit row, and a submitted state.
 
 <div className="my-8">
-  <DemoWindow title="MultiSelect" tuiStyle={{ width: "100%", height: 240 }}>
+  <DemoWindow title="MultiSelect" tuiStyle={{ width: "100%", height: 240 }} autoFocus>
     <MultiSelectApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/primitives.mdx b/packages/docs/content/docs/components/primitives.mdx
@@ -12,7 +12,7 @@ Gridland uses JSX intrinsic elements that map to renderable components in the op
 These are used inside `<TUI>`.
 
 <div className="my-8">
-  <DemoWindow title="Primitives" tuiStyle={{ width: "100%", height: 200 }}>
+  <DemoWindow title="Primitives" tuiStyle={{ width: "100%", height: 200 }} autoFocus>
     <PrimitivesApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/prompt-input.mdx b/packages/docs/content/docs/components/prompt-input.mdx
@@ -12,7 +12,7 @@ command history, and direct Vercel AI SDK integration. Supports both a
 self-contained default layout and a fully composable compound mode.
 
 <div className="my-8">
-  <DemoWindow title="PromptInput" tuiStyle={{ width: "100%", height: 300 }}>
+  <DemoWindow title="PromptInput" tuiStyle={{ width: "100%", height: 300 }} autoFocus>
     <PromptInputApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/select-input.mdx b/packages/docs/content/docs/components/select-input.mdx
@@ -11,7 +11,7 @@ A single-selection list with radio indicators, keyboard navigation, group
 headers, and a submitted state.
 
 <div className="my-8">
-  <DemoWindow title="SelectInput" tuiStyle={{ width: "100%", height: 240 }}>
+  <DemoWindow title="SelectInput" tuiStyle={{ width: "100%", height: 240 }} autoFocus>
     <SelectInputApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/status-bar.mdx b/packages/docs/content/docs/components/status-bar.mdx
@@ -11,7 +11,7 @@ A horizontal bar that displays keybinding hints with key labels and
 descriptions. Commonly placed at the bottom of a view.
 
 <div className="my-8">
-  <DemoWindow title="StatusBar" tuiStyle={{ width: "100%", height: 80 }}>
+  <DemoWindow title="StatusBar" tuiStyle={{ width: "100%", height: 80 }} autoFocus>
     <StatusBarApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/terminal-window.mdx b/packages/docs/content/docs/components/terminal-window.mdx
@@ -11,7 +11,7 @@ A decorative container that mimics a terminal window with traffic light buttons
 and an optional centered title. Defaults to a dark gray background.
 
 <div className="my-8">
-  <DemoWindow title="Terminal" tuiStyle={{ width: "100%", height: 120 }}>
+  <DemoWindow title="Terminal" tuiStyle={{ width: "100%", height: 120 }} autoFocus>
     <TerminalWindowApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/components/tui.mdx b/packages/docs/content/docs/components/tui.mdx
@@ -13,7 +13,7 @@ canvas. It handles client detection, canvas creation, React reconciler setup,
 and automatic resizing. Gridland is built on the [opentui](https://opentui.com) engine.
 
 <div className="my-8">
-  <DemoWindow title="Primitives" tuiStyle={{ width: "100%", height: 200 }}>
+  <DemoWindow title="Primitives" tuiStyle={{ width: "100%", height: 200 }} autoFocus>
     <PrimitivesApp />
   </DemoWindow>
 </div>

diff --git a/packages/docs/content/docs/guides/focus-and-navigation.mdx b/packages/docs/content/docs/guides/focus-and-navigation.mdx
@@ -24,7 +24,7 @@ Gridland provides a unified focus and input system that works identically in bot
 #### Focus with Multi-Select
 
 <div className="my-8">
-  <DemoWindow title="Focus & Navigation" tuiStyle={{ width: "100%", height: 340 }}>
+  <DemoWindow title="Focus & Navigation" tuiStyle={{ width: "100%", height: 340 }} autoFocus>
     <FocusApp />
   </DemoWindow>
 </div>

diff --git a/packages/ui/components/chat/__snapshots__/chat.snapshot.test.tsx.snap b/packages/ui/components/chat/__snapshots__/chat.snapshot.test.tsx.snap