refactor: render Scrollable content as React elements

Author: ph-fritsche

src/ui/cli/Blocks.tsx

@@ -3,10 +3,12 @@ import { Box, BoxProps } from 'ink'
 
 export function Block(props: React.PropsWithChildren<BoxProps>) {
     return <Box
-        {...props}
+        flexShrink={0}
+        flexGrow={0}
         flexDirection="column"
         justifyContent="flex-start"
         flexWrap="nowrap"
+        {...props}
     />
 }
 

src/ui/cli/Error.tsx

@@ -3,7 +3,7 @@ import { StackEntry, XError } from '../../error/XError'
 import { useTester } from '../TesterContext'
 import { useSubscribers } from './useSubscribers'
 import { Text } from 'ink'
-import { Scrollable } from './Scrollable'
+import { Block, Line } from './Blocks'
 
 export function StackEntryText({
     entry,
@@ -19,29 +19,29 @@ export function StackEntryText({
     return <Text color="redBright" dimColor>at {String(entry)}</Text>
 }
 
-export function* renderError(
-    error: XError,
-    renderLine: (l: React.ReactNode, isLast: boolean) => React.ReactNode,
-) {
-    const text = error.text.split('\n')
-    for(let i = 0; i < text.length; i++) {
-        yield renderLine((
-            <Text color="redBright">{text[i]}</Text>
-        ), !error.stackEntries && i === text.length -1)
-    }
-    if (error.stackEntries) {
-        for(let i = 0; i < error.stackEntries.length; i++) {
-            yield renderLine((
-                <StackEntryText key={`stackEntry-${i}`} entry={error.stackEntries[i]}/>
-            ), i === error.stackEntries.length -1)
-        }
-    }
-}
-
-export function ScrollableError({
+export function XErrorComponent({
     error,
+    border = false,
 }: {
     error: XError,
+    border?: boolean,
 }) {
-    return <Scrollable key={error.stack ?? error.text}>{Array.from(renderError(error, l => l))}</Scrollable>
+    return <Block>
+        {error.text.split('\n').map((t, i, a) => (
+            <Line key={`${i}-${t}`}>
+                {border && (<Text color="grey" dimColor>{
+                    (!error.stackEntries && i === a.length - 1) ? '╰ ' : '╎ '
+                }</Text>)}
+                <Text color="redBright">{t}</Text>
+            </Line>
+        ))}
+        {error.stackEntries?.map((entry, i, a) => (
+            <Line key={`stack-${i}`}>
+                {border && (<Text color="grey" dimColor>{
+                    (i === a.length - 1) ? '╰ ' : '╎ '
+                }</Text>)}
+                <StackEntryText entry={entry}/>
+            </Line>
+        ))}
+    </Block>
 }

src/ui/cli/Errors.tsx

@@ -7,7 +7,8 @@ import { TestGroup, TestGroupStack } from '../../conductor/TestRun/TestGroup'
 import { findNodeFrom, hasError } from './helper'
 import { TreeExcerpt } from './Tree'
 import { Element } from './Blocks'
-import { ScrollableError } from './Error'
+import { Scrollable } from './Scrollable'
+import { XErrorComponent } from './Error'
 
 export function Errors({
     run,
@@ -102,7 +103,9 @@ export function Errors({
                     </Box>
                 )}
                 <Box height={1}/>
-                <ScrollableError error={error[0]}/>
+                <Scrollable key={error[0].stack}>
+                    <XErrorComponent error={error[0]}/>
+                </Scrollable>
                 {error.length > 1 && (
                     <Element>
                         <Text color="grey">…and {error.length - 1} more on this node/hook</Text>

src/ui/cli/Results.tsx

@@ -9,7 +9,8 @@ import { Element } from './Blocks'
 import { FunctionStatusIcon } from './StatusIcons'
 import { findNodeFrom } from './helper'
 import { NodeConductor } from './Node'
-import { ScrollableError } from './Error'
+import { Scrollable } from './Scrollable'
+import { XErrorComponent } from './Error'
 
 export function Results({
     run,
@@ -134,7 +135,9 @@ function Result({
         return null
     }
 
-    return <ScrollableError error={result.error}/>
+    return <Scrollable key={result.error.stack}>
+        <XErrorComponent error={result.error}/>
+    </Scrollable>
 }
 
 function nextRunInstance(