Upgrade to react 19

Author: jahooma

bun.lock

@@ -54,7 +54,7 @@
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
+    "@types/react": "19.2.14",
     "@types/react-reconciler": "^0.32.0",
     "react-dom": "^19.0.0",
     "strip-ansi": "^7.1.2"

cli/package.json

@@ -80,8 +80,9 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
     }
 
     if (React.isValidElement(value)) {
+      const elProps = value.props as Record<string, unknown>
       if (value.type === React.Fragment) {
-        return isTextRenderable(value.props.children)
+        return isTextRenderable(elProps.children as ReactNode)
       }
 
       if (typeof value.type === 'string') {
@@ -90,7 +91,7 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
           value.type === 'strong' ||
           value.type === 'em'
         ) {
-          return isTextRenderable(value.props.children)
+          return isTextRenderable(elProps.children as ReactNode)
         }
 
         return false

cli/src/components/blocks/agent-branch-item.tsx

@@ -28,18 +28,18 @@ export function makeTextUnselectable(node: ReactNode): ReactNode {
 
   if (!isValidElement(node)) return node
 
-  const el = node as ReactElement
+  const el = node as ReactElement<{ children?: ReactNode; [key: string]: unknown }>
   const type = el.type
 
   // Ensure text and span nodes are not selectable
   if (typeof type === 'string' && (type === 'text' || type === 'span')) {
     const nextProps = { ...el.props, selectable: false }
-    const nextChildren = el.props?.children ? makeTextUnselectable(el.props.children) : el.props?.children
+    const nextChildren = el.props.children ? makeTextUnselectable(el.props.children) : el.props.children
     return cloneElement(el, nextProps, nextChildren)
   }
 
   // Recurse into other host elements and components' children
-  const nextChildren = el.props?.children ? makeTextUnselectable(el.props.children) : el.props?.children
+  const nextChildren = el.props.children ? makeTextUnselectable(el.props.children) : el.props.children
   return cloneElement(el, el.props, nextChildren)
 }
 

cli/src/components/clickable.tsx

@@ -33,8 +33,9 @@ const isTextRenderable = (value: ReactNode): boolean => {
   }
 
   if (React.isValidElement(value)) {
+    const elProps = value.props as Record<string, unknown>
     if (value.type === React.Fragment) {
-      return isTextRenderable(value.props.children)
+      return isTextRenderable(elProps.children as ReactNode)
     }
 
     if (typeof value.type === 'string') {
@@ -43,7 +44,7 @@ const isTextRenderable = (value: ReactNode): boolean => {
         value.type === 'strong' ||
         value.type === 'em'
       ) {
-        return isTextRenderable(value.props.children)
+        return isTextRenderable(elProps.children as ReactNode)
       }
 
       return false

cli/src/components/tools/tool-call-item.tsx

@@ -0,0 +1,19 @@
+/**
+ * React 19 compatibility shim for OpenTUI JSX types.
+ *
+ * OpenTUI's JSX namespace defines `type Element = React.ReactNode`.
+ * In React 19, `FunctionComponent` returns `ReactNode | Promise<ReactNode>`,
+ * but `Promise<ReactNode>` is not assignable to `ReactNode`.
+ *
+ * This augmentation adds a narrower call signature to `FunctionComponent`
+ * that returns just `ReactNode`. Due to TypeScript's interface merging rules,
+ * the later declaration's overloads have higher precedence, so the narrower
+ * signature is resolved first — fixing all `React.FC` JSX compatibility errors.
+ */
+import 'react'
+
+declare module 'react' {
+  interface FunctionComponent<P = {}> {
+    (props: P): ReactNode
+  }
+}