fix(tui): fix border rendering in iocraft column layouts

Create component nodes as plain JavaScript objects instead of calling
native io.view() and io.text() functions. The native functions were
causing NAPI deserialization to lose Option<String> properties like
border_style, border_color, and flex_direction when nodes were passed
as array elements.

Changes:
- Text() now creates plain {type: 'Text', content: ...} objects
- Box() now creates plain {type: 'View', children: ...} objects
- Added padding and margin shorthand props to BoxProps
- Fixed padding_x/padding_y and margin_x/margin_y property names
- Added test-iocraft-layout.mjs for layout bug reproduction

All three TUI renderers (analytics, audit-log, threat-feed) now display
bordered sections correctly.

Author: jdalton

packages/cli/scripts/test-iocraft-layout.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+/**
+ * @fileoverview Minimal test case to demonstrate iocraft layout bug.
+ *
+ * ISSUE: Layout properties (flex_direction, border_style, etc.) are not being
+ * applied during rendering.
+ *
+ * Run: node scripts/test-iocraft-layout.mjs
+ */
+
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+const iocraft = require('@socketaddon/iocraft')
+const io = iocraft.default || iocraft
+
+io.init()
+
+console.log('Testing iocraft layout engine\n')
+console.log('=' .repeat(60))
+
+// Test 1: Column layout.
+console.log('\n1. Column Layout Test')
+console.log('-'.repeat(60))
+const columnBox = io.view([
+  io.text('Line 1'),
+  io.text('Line 2'),
+  io.text('Line 3'),
+])
+columnBox.flex_direction = 'column'
+
+console.log('Expected: Lines stacked vertically')
+console.log('Actual output:')
+io.printComponent(columnBox)
+console.log('\nComponent tree:', JSON.stringify(columnBox, null, 2))
+
+// Test 2: Border rendering.
+console.log('\n2. Border Test')
+console.log('-'.repeat(60))
+const borderBox = io.view([io.text('Content')])
+borderBox.border_style = 'single'
+borderBox.padding = 1
+
+console.log('Expected: Box with single-line border around padded content')
+console.log('Actual output:')
+io.printComponent(borderBox)
+console.log('\nComponent tree:', JSON.stringify(borderBox, null, 2))
+
+// Test 3: Gap spacing.
+console.log('\n3. Gap Test')
+console.log('-'.repeat(60))
+const gapBox = io.view([io.text('A'), io.text('B'), io.text('C')])
+gapBox.flex_direction = 'column'
+gapBox.gap = 1
+
+console.log('Expected: Items stacked vertically with 1 line gap between them')
+console.log('Actual output:')
+io.printComponent(gapBox)
+
+console.log('\n' + '='.repeat(60))
+console.log('\nSUMMARY:')
+console.log('- flex_direction: "column" → NOT WORKING (items render in row)')
+console.log('- border_style: "single" → NOT WORKING (no border drawn)')
+console.log('- gap → PARTIALLY WORKING (adds space in row layout)')
+console.log('\nThe layout engine does not appear to be processing flexbox properties.')

packages/cli/src/utils/terminal/iocraft.mts

@@ -69,6 +69,7 @@ export interface BoxProps {
     | 'center'
     | 'space-between'
     | 'space-around'
+  margin?: number
   marginBottom?: number
   marginLeft?: number
   marginRight?: number
@@ -77,6 +78,7 @@ export interface BoxProps {
   marginY?: number
   overflowX?: 'visible' | 'hidden'
   overflowY?: 'visible' | 'hidden'
+  padding?: number
   paddingBottom?: number
   paddingLeft?: number
   paddingRight?: number
@@ -102,18 +104,20 @@ export type Element = import('@socketaddon/iocraft').ComponentNode
  * Create a text element with styling.
  */
 export function Text(props: TextProps): Element {
-  const io = getIocraft()
   const content =
     typeof props.children === 'string'
       ? props.children
       : Array.isArray(props.children)
         ? props.children.join('')
         : ''
 
-  // Create basic text node.
-  const node = io.text(content)
+  // Create text node as plain object to avoid NAPI deserialization bugs
+  const node: Element = {
+    type: 'Text',
+    content,
+  }
 
-  // Apply styling properties.
+  // Apply styling properties
   if (props.bold) {
     node.bold = true
   }
@@ -134,17 +138,19 @@ export function Text(props: TextProps): Element {
  * Create a box/view element with layout properties.
  */
 export function Box(props: BoxProps): Element {
-  const io = getIocraft()
   const children = Array.isArray(props.children)
     ? props.children
     : props.children
       ? [props.children]
       : []
 
-  // Create basic view node.
-  const node = io.view(children)
+  // Create view node as plain object to avoid NAPI deserialization bugs
+  const node: Element = {
+    type: 'View',
+    children,
+  }
 
-  // Apply layout properties.
+  // Apply layout properties
   if (props.flexDirection) {
     node.flex_direction = props.flexDirection
   }
@@ -164,22 +170,23 @@ export function Box(props: BoxProps): Element {
     node.gap = props.gap
   }
 
-  // Dimensions.
+  // Dimensions
   if (props.width !== undefined) {
     node.width = props.width
   }
   if (props.height !== undefined) {
     node.height = props.height
   }
 
-  // Padding (handle both individual and shorthand).
+  // Padding (handle both individual and shorthand)
+  if (props.padding !== undefined) {
+    node.padding = props.padding
+  }
   if (props.paddingX !== undefined) {
-    node.padding_left = props.paddingX
-    node.padding_right = props.paddingX
+    node.padding_x = props.paddingX
   }
   if (props.paddingY !== undefined) {
-    node.padding_top = props.paddingY
-    node.padding_bottom = props.paddingY
+    node.padding_y = props.paddingY
   }
   if (props.paddingTop !== undefined) {
     node.padding_top = props.paddingTop
@@ -194,14 +201,15 @@ export function Box(props: BoxProps): Element {
     node.padding_left = props.paddingLeft
   }
 
-  // Margin (handle both individual and shorthand).
+  // Margin (handle both individual and shorthand)
+  if (props.margin !== undefined) {
+    node.margin = props.margin
+  }
   if (props.marginX !== undefined) {
-    node.margin_left = props.marginX
-    node.margin_right = props.marginX
+    node.margin_x = props.marginX
   }
   if (props.marginY !== undefined) {
-    node.margin_top = props.marginY
-    node.margin_bottom = props.marginY
+    node.margin_y = props.marginY
   }
   if (props.marginTop !== undefined) {
     node.margin_top = props.marginTop
@@ -216,15 +224,15 @@ export function Box(props: BoxProps): Element {
     node.margin_left = props.marginLeft
   }
 
-  // Border.
+  // Border
   if (props.borderStyle) {
     node.border_style = props.borderStyle
   }
   if (props.borderColor) {
     node.border_color = props.borderColor
   }
 
-  // Background.
+  // Background
   if (props.backgroundColor) {
     node.background_color = props.backgroundColor
   }