refactor(tui): adjust panel chrome and dynamic visible items

Update PANEL_CHROME constant to better reflect actual padding needs
Add dynamic calculation of visible items based on terminal height

Author: moazbuilds

src/cli/tui/routes/workflow/constants.ts

@@ -7,7 +7,7 @@
 export const HEADER_HEIGHT = 3  // Branding header
 export const FOOTER_HEIGHT = 2  // Telemetry bar + status footer
 export const PANEL_BORDER = 2   // Top and bottom border of panel
-export const PANEL_CHROME = 4   // Extra buffer for panel headers, padding, etc.
+export const PANEL_CHROME = 2   // Extra buffer for padding
 
 /**
  * Calculate visible items based on terminal height

src/cli/tui/routes/workflow/context/ui-state/initial-state.ts

@@ -4,6 +4,15 @@
 
 import type { WorkflowState } from "./types"
 import packageJson from "../../../../../../../package.json" with { type: "json" }
+import { calculateVisibleItems } from "../../constants"
+
+/**
+ * Get initial visible item count based on actual terminal dimensions
+ */
+function getInitialVisibleItemCount(): number {
+  const termHeight = process.stdout.rows ?? 30
+  return calculateVisibleItems(termHeight)
+}
 
 /**
  * Create initial workflow UI state
@@ -30,7 +39,7 @@ export function createInitialState(workflowName: string, totalSteps = 0): Workfl
     selectedAgentId: null,
     selectedSubAgentId: null,
     selectedItemType: null,
-    visibleItemCount: 10,
+    visibleItemCount: getInitialVisibleItemCount(),
     scrollOffset: 0,
     totalSteps,
     workflowStatus: "running",