dbn-cli 0.4.0 → 0.5.3

package/src/ui/renderer.ts

@@ -1,13 +1,18 @@
-import { COLORS, BORDERS, UI } from './theme.ts';
-import { formatNumber, truncate, pad, formatValue, getVisibleWidth } from '../utils/format.ts';
+import { THEME, ANSI } from './theme.ts';
+import { formatNumber, truncate, pad, formatValue, getVisibleWidth, wrapText } from '../utils/format.ts';
+import { Box, Transition, Grid, type ColumnConfig } from './grit/index.ts';
 import type { Screen } from './screen.ts';
 import type { ViewState, TablesViewState, TableDetailViewState, SchemaViewState, RowDetailViewState, HealthViewState } from '../types.ts';
 
 /**
- * Renderer for ncdu-style TUI
+ * Modern Renderer (Manual ANSI Implementation)
+ * Emulates OpenTUI/OpenCode design with color blocks and no lines.
  */
 export class Renderer {
   private screen: Screen;
+  private lastLines: string[] = [];
+  private lastWidth: number = 0;
+  private lastHeight: number = 0;
 
   constructor(screen: Screen) {
     this.screen = screen;
@@ -15,571 +20,341 @@ export class Renderer {
 
   /**
    * Render the current state to screen
-   * @param state - Current navigation state
-   * @param dbPath - Database file path
    */
   render(state: ViewState, dbPath: string): void {
     const { width, height } = this.screen;
     const lines: string[] = [];
 
-    // Build all lines
+    // Header transition color can match table header if in table-detail
+    const contentTopBg = state.type === 'table-detail' ? THEME.surface : THEME.background;
+
+    // 1. Title Bar (Header Block)
     lines.push(this.buildTitleBar(state, dbPath, width));
-    lines.push(this.buildSeparator(width));
-    
-    const contentLines = this.buildContent(state, height - 3, width);
+    lines.push(Transition.draw(width, THEME.headerBg, contentTopBg));
+
+    // 2. Main Content area
+    const contentHeight = height - 4; // 1 header, 1 footer, 2 transitions
+    const contentLines = this.buildContent(state, contentHeight, width);
     lines.push(...contentLines);
-    
+
+    // 3. Help/Status Bar (Footer Block)
+    lines.push(Transition.draw(width, THEME.background, THEME.footerBg));
     lines.push(this.buildHelpBar(state, width));
 
-    // Clear and render
-    this.screen.clear();
-    this.screen.write(lines.join('\n'));
+    // Incremental Render Logic
+    if (width !== this.lastWidth || height !== this.lastHeight) {
+      // Screen resized: Full redraw from top, then clear remainder of screen
+      this.screen.moveCursor(1, 1);
+      this.screen.write(lines.join('\n'));
+      this.screen.write('\x1b[J'); // Clear remaining lines if new height is smaller
+    } else {
+      // Incremental update: Only write changed lines
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i] !== this.lastLines[i]) {
+          this.screen.moveCursor(i + 1, 1);
+          // Write line and clear to end of line to prevent ghosting
+          this.screen.write(lines[i] + '\x1b[K');
+        }
+      }
+    }
+
+    this.lastLines = lines;
+    this.lastWidth = width;
+    this.lastHeight = height;
   }
 
-  /**
-   * Build title bar (top line)
-   */
   private buildTitleBar(state: ViewState, dbPath: string, width: number): string {
     const fileName = dbPath.split('/').pop() || dbPath;
-    let title = ` ${fileName}`;
+    let breadcrumb = ` ${fileName}`;
     
-    if (state.type === 'table-detail') {
-      title += ` ${COLORS.dim}>${COLORS.reset} ${state.tableName}`;
-    } else if (state.type === 'schema-view') {
-      title += ` ${COLORS.dim}>${COLORS.reset} ${state.tableName} ${COLORS.dim}> schema${COLORS.reset}`;
-    } else if (state.type === 'row-detail') {
-      title += ` ${COLORS.dim}>${COLORS.reset} ${state.tableName} ${COLORS.dim}> row ${state.rowIndex + 1}${COLORS.reset}`;
-    } else if (state.type === 'health') {
-      title += ` ${COLORS.dim}>${COLORS.reset} health`;
+    if (state.type === 'table-detail' || state.type === 'schema-view' || state.type === 'row-detail') {
+      breadcrumb += ` > ${state.tableName}`;
     }
-    
-    title = `${COLORS.bold}${title}${COLORS.reset}`;
-    
-    // Build right info
-    let rightInfo = '';
+    if (state.type === 'schema-view') breadcrumb += ` > schema`;
+    if (state.type === 'row-detail') breadcrumb += ` > row ${state.rowIndex + 1}`;
+    if (state.type === 'health') breadcrumb += ` > health`;
+
+    const leftPart = `${ANSI.bold}${ANSI.fg(THEME.primary)}${breadcrumb}${ANSI.reset}`;
+
+    let rightPart = '';
     if (state.type === 'tables') {
-      const totalTables = state.tables.length;
-      const currentPos = state.cursor + 1;
-      rightInfo = `${COLORS.dim}${currentPos}/${totalTables} tables${COLORS.reset}`;
+      rightPart = `${state.cursor + 1}/${state.tables.length} tables`;
     } else if (state.type === 'table-detail') {
-      const totalRows = formatNumber(state.totalRows);
-      const currentRow = state.dataOffset + state.dataCursor + 1;
-      rightInfo = `${COLORS.dim}row ${formatNumber(currentRow)}/${totalRows}${COLORS.reset}`;
+      const current = state.dataOffset + state.dataCursor + 1;
+      rightPart = `row ${formatNumber(current)}/${formatNumber(state.totalRows)}`;
     } else if (state.type === 'schema-view') {
-      const totalCols = state.schema.length;
-      const currentPos = state.cursor + 1;
-      rightInfo = `${COLORS.dim}${currentPos}/${totalCols} columns${COLORS.reset}`;
+      rightPart = `${state.cursor + 1}/${state.schema.length} columns`;
     } else if (state.type === 'row-detail') {
-      const colCount = state.schema.length;
-      rightInfo = `${COLORS.dim}${colCount} fields${COLORS.reset}`;
-    } else if (state.type === 'health') {
-      rightInfo = `${COLORS.dim}overview${COLORS.reset}`;
-    }
-    
-    // Calculate spacing using visible width (accounts for CJK double-width)
-    const titleWidth = getVisibleWidth(title);
-    const rightInfoWidth = getVisibleWidth(rightInfo);
-    const availableSpace = width - titleWidth - rightInfoWidth;
-    
-    // Adjust width to prevent wrapping issues with ambiguous width characters
-    const safeWidth = width - 1;
-
-    if (availableSpace > 0) {
-      // Ensure we don't exceed safeWidth
-      let result = title + ' '.repeat(availableSpace) + rightInfo;
-      const resultWidth = getVisibleWidth(result);
-      if (resultWidth > safeWidth) {
-        return truncate(result, safeWidth);
-      }
-      return result;
-    } else {
-      // Not enough space, truncate title
-      const maxTitleWidth = safeWidth - rightInfoWidth - 3; // Reserve space for "..."
-      if (maxTitleWidth > 10) {
-        const truncatedTitle = truncate(title.replace(/\x1b\[[0-9;]*m/g, ''), maxTitleWidth);
-        const truncatedWidth = getVisibleWidth(truncatedTitle);
-        const padding = safeWidth - truncatedWidth - rightInfoWidth;
-        return `${COLORS.bold}${truncatedTitle}${COLORS.reset}` + ' '.repeat(Math.max(0, padding)) + rightInfo;
-      } else {
-        // Very narrow screen, just show title
-        return truncate(title.replace(/\x1b\[[0-9;]*m/g, ''), safeWidth);
-      }
+      rightPart = `${state.schema.length} fields`;
     }
-  }
 
-  /**
-   * Build separator line
-   */
-  private buildSeparator(width: number): string {
-    return `${COLORS.dim}${BORDERS.horizontal.repeat(width)}${COLORS.reset}`;
+    const rightPartStyled = `${ANSI.fg(THEME.textDim)}${rightPart}${ANSI.reset}`;
+
+    const padding = ' '.repeat(Math.max(0, width - 2 - getVisibleWidth(leftPart) - getVisibleWidth(rightPartStyled)));
+    const rowContent = `${leftPart}${padding}${rightPartStyled}`;
+
+    const box = new Box({ width, padding: 1, background: THEME.headerBg });
+    return box.render(rowContent);
   }
 
-  /**
-   * Build main content area
-   */
   private buildContent(state: ViewState, height: number, width: number): string[] {
+    let content: string[] = [];
+    const bgBox = new Box({ width, background: THEME.background, padding: 1 });
+
     if (state.type === 'tables') {
-      return this.buildTablesList(state, height, width);
+      content = this.renderTables(state, height, width);
     } else if (state.type === 'table-detail') {
-      return this.buildTableDetail(state, height, width);
+      content = this.renderTableDetail(state, height, width);
     } else if (state.type === 'schema-view') {
-      return this.buildSchemaView(state, height, width);
+      content = this.renderSchema(state, height, width);
     } else if (state.type === 'row-detail') {
-      return this.buildRowDetail(state, height, width);
+      content = this.renderRowDetail(state, height, width);
     } else if (state.type === 'health') {
-      return this.buildHealthView(state, height, width);
+      content = this.renderHealth(state, height, width);
+    }
+
+    // Fill remaining lines with background
+    while (content.length < height) {
+      content.push(bgBox.render(''));
     }
-    return [];
+    return content;
   }
 
-  /**
-   * Build tables list view
-   */
-  private buildTablesList(state: TablesViewState, height: number, width: number): string[] {
+  private renderTables(state: TablesViewState, height: number, width: number): string[] {
     const lines: string[] = [];
     const { tables, cursor } = state;
+    const box = new Box({ width, padding: 1 });
 
-    if (tables.length === 0) {
-      lines.push('');
-      lines.push(pad('No tables found', width, 'center'));
-      while (lines.length < height) {
-        lines.push('');
-      }
-      return lines;
-    }
-
-    // Calculate visible window
-    const halfHeight = Math.floor(height / 2);
-    let startIdx = Math.max(0, cursor - halfHeight);
-    let endIdx = Math.min(tables.length, startIdx + height);
-    
-    // Adjust if at the end
-    if (endIdx - startIdx < height) {
-      startIdx = Math.max(0, endIdx - height);
-    }
+    const half = Math.floor(height / 2);
+    let start = Math.max(0, cursor - half);
+    let end = Math.min(tables.length, start + height);
+    if (end - start < height) start = Math.max(0, end - height);
 
-    for (let i = startIdx; i < endIdx; i++) {
-      const table = tables[i];
+    for (let i = start; i < end; i++) {
       const isSelected = i === cursor;
+      const table = tables[i];
       
-      // Build line without color codes first
-      const cursorChar = isSelected ? ` ${UI.cursor}` : '  ';
-      const maxNameWidth = width - 20; // Reserve space for row count
-      const name = truncate(table.name, maxNameWidth - 5);
-      const namePadded = pad(name, maxNameWidth - 3);
-      const count = formatNumber(table.row_count) + ' rows';
-      const countPadded = pad(count, 15, 'right');
-      
-      let content = `${cursorChar} ${namePadded} ${countPadded}`;
-      
-      // Ensure exact width before adding color codes
-      const safeWidth = width - 1; // Subtract 1 to prevent wrapping issues
-      const contentWidth = getVisibleWidth(content);
-      if (contentWidth > safeWidth) {
-        content = truncate(content, safeWidth);
-      } else if (contentWidth < safeWidth) {
-        content += ' '.repeat(safeWidth - contentWidth);
-      }
-      
-      // Apply color codes to properly sized line
-      let line: string;
-      if (isSelected) {
-        line = COLORS.inverse + content + COLORS.reset;
-      } else {
-        line = content;
-      }
-      
-      lines.push(line);
-    }
+      const name = isSelected ? `${ANSI.bold}${table.name}` : `${table.name}`;
+      const count = `${formatNumber(table.row_count)} rows`;
 
-    // Fill remaining lines
-    while (lines.length < height) {
-      lines.push(' '.repeat(width));
-    }
+      const bg = isSelected ? THEME.selectionBg : THEME.background;
+      const fg = isSelected ? THEME.primary : THEME.text;
 
+      const leftPart = `${ANSI.fg(fg)}${name}${ANSI.reset}`;
+      const rightPart = `${ANSI.fg(isSelected ? fg : THEME.textDim)}${count}${ANSI.reset}`;
+
+      const padding = ' '.repeat(Math.max(0, width - 2 - getVisibleWidth(leftPart) - getVisibleWidth(rightPart)));
+      const rowContent = `${leftPart}${padding}${rightPart}`;
+      lines.push(box.render(rowContent, { background: bg }));
+    }
     return lines;
   }
 
-  /**
-   * Build table detail view
-   */
-  private buildTableDetail(state: TableDetailViewState, height: number, width: number): string[] {
+  private renderTableDetail(state: TableDetailViewState, height: number, width: number): string[] {
     const lines: string[] = [];
-    const { data, totalRows, dataOffset, dataCursor } = state;
+    const { data, dataOffset, dataCursor, bufferOffset } = state;
+    const box = new Box({ width, padding: 1 });
 
-    if (data.length === 0) {
-      lines.push(pad('No data', width, 'center'));
-    } else {
-      // Get column names
-      const columns = Object.keys(data[0]);
-      
-      // Calculate optimal column widths based on content
+    if (data.length === 0) return [box.render('No data', { align: 'center' })];
+
+    const columns = Object.keys(data[0]).slice(0, 8);
+
+    // Calculate or use cached column widths
+    if (!state.cachedColWidths || state.cachedScreenWidth !== width) {
+      const numCols = columns.length;
       const minColWidth = 8;
-      const maxColWidth = 50; // Maximum width for any single column
-      const maxVisibleCols = 8;
-      const visibleColumns = columns.slice(0, maxVisibleCols);
-      const availableWidth = width - 4; // Reserve space for padding and cursor
-      const spacingWidth = visibleColumns.length - 1; // Space between columns
-      const usableWidth = availableWidth - spacingWidth;
-      
-      // Calculate ideal width for each column based on content
-      const idealWidths = visibleColumns.map(col => {
-        // Check column name length
-        let maxWidth = col.length;
-        
-        // Check data values length (sample first few rows for performance)
-        const sampleSize = Math.min(data.length, 20);
-        for (let i = 0; i < sampleSize; i++) {
-          const value = formatValue(data[i][col]);
-          maxWidth = Math.max(maxWidth, value.length);
-        }
-        
-        // Apply constraints: add 2 for padding, cap at maxColWidth
-        return Math.max(minColWidth, Math.min(maxWidth + 2, maxColWidth));
-      });
-      
-      // Calculate total ideal width
-      let totalIdealWidth = idealWidths.reduce((sum, w) => sum + w, 0);
-      
-      // Allocate widths
-      const colWidths: number[] = [];
-      
-      if (totalIdealWidth <= usableWidth) {
-        // We have extra space - distribute it intelligently
-        const extraSpace = usableWidth - totalIdealWidth;
-        
-        // Find columns that could use more space (those at maxColWidth)
-        const expandableIndices = idealWidths
-          .map((w, i) => ({ width: w, index: i }))
-          .filter(item => item.width === maxColWidth)
-          .map(item => item.index);
-        
-        // Distribute extra space only to expandable columns
-        if (expandableIndices.length > 0) {
-          const extraPerCol = Math.floor(extraSpace / expandableIndices.length);
-          for (let i = 0; i < visibleColumns.length; i++) {
-            if (expandableIndices.includes(i)) {
-              colWidths[i] = idealWidths[i] + extraPerCol;
-            } else {
-              colWidths[i] = idealWidths[i];
-            }
-          }
-          // Add remainder to last expandable column
-          const remainder = extraSpace - (extraPerCol * expandableIndices.length);
-          colWidths[expandableIndices[expandableIndices.length - 1]] += remainder;
-        } else {
-          // No expandable columns, distribute evenly to all
-          const extraPerCol = Math.floor(extraSpace / visibleColumns.length);
-          for (let i = 0; i < visibleColumns.length; i++) {
-            colWidths[i] = idealWidths[i] + extraPerCol;
-          }
-          const remainder = extraSpace - (extraPerCol * visibleColumns.length);
-          colWidths[colWidths.length - 1] += remainder;
-        }
-      } else {
-        // Need to scale down - use proportional scaling
-        const scale = usableWidth / totalIdealWidth;
-        for (let i = 0; i < visibleColumns.length; i++) {
-          colWidths[i] = Math.max(minColWidth, Math.floor(idealWidths[i] * scale));
-        }
-        
-        // Adjust to fill exact width
-        const totalWidth = colWidths.reduce((sum, w) => sum + w, 0);
-        const diff = usableWidth - totalWidth;
-        if (diff !== 0) {
-          colWidths[colWidths.length - 1] += diff;
-        }
-      }
-      
-      // Render table header
-      const headerCells = visibleColumns.map((col, idx) => {
-        const truncatedCol = truncate(col, colWidths[idx] - 1);
-        return pad(truncatedCol, colWidths[idx] - 1);
-      });
-      
-      let headerLine = `  ${COLORS.dim} ${headerCells.join(' ')}${COLORS.reset}`;
-      const headerWidth = getVisibleWidth(headerLine);
-      
-      if (headerWidth < width) {
-        headerLine += ' '.repeat(width - headerWidth);
-      } else if (headerWidth > width) {
-        // Truncate if somehow too wide
-        const plainHeader = `   ${headerCells.map(c => c.replace(/\x1b\[[0-9;]*m/g, '')).join(' ')}`;
-        headerLine = truncate(plainHeader, width);
-      }
-      
-      lines.push(headerLine);
-      
-      // Update visible rows for navigator (subtract 1 for header)
-      state.visibleRows = height - 1;
-      
-      // Render data rows
-      const maxRows = Math.min(data.length, height - 1);
-      
-      for (let i = 0; i < maxRows; i++) {
-        const row = data[i];
-        const isSelected = i === dataCursor;
-        
-        const cells = visibleColumns.map((col, idx) => {
-          const value = formatValue(row[col]);
-          return truncate(value, colWidths[idx] - 1);
-        });
-        
-        // Build content without color codes first
-        const prefix = isSelected ? ` ${UI.cursor}` : '  ';
-        const contentWithoutPrefix = cells.map((cell, idx) => pad(cell, colWidths[idx] - 1)).join(' ');
-        
-        // Ensure exact width before adding color codes (using visible width for CJK)
-        const safeWidth = width - 1; // Subtract 1 to prevent wrapping issues
-        let content = prefix + ' ' + contentWithoutPrefix;
-        const contentWidth = getVisibleWidth(content);
-        
-        if (contentWidth > safeWidth) {
-          content = truncate(content, safeWidth);
-        } else if (contentWidth < safeWidth) {
-          content += ' '.repeat(safeWidth - contentWidth);
-        }
-        
-        // Apply color codes to properly sized line
-        let line: string;
-        if (isSelected) {
-          line = COLORS.inverse + content + COLORS.reset;
-        } else {
-          line = content;
-        }
-        
-        lines.push(line);
-      }
-    }
 
-    // Fill remaining lines
-    while (lines.length < height) {
-      lines.push(' '.repeat(width));
+      const configs: ColumnConfig[] = columns.map((_, i) => ({
+        weight: (state.columnWeights && state.columnWeights[i]) || 1,
+        minWidth: minColWidth
+      }));
+
+      state.cachedColWidths = Grid.calculateWidths(width - 2, configs);
+      state.cachedScreenWidth = width;
     }
 
+    const colWidths = state.cachedColWidths!;
+
+    // Table Header Block
+    let headerContent = `${ANSI.fg(THEME.textDim)}${ANSI.bold}`;
+    columns.forEach((col, i) => {
+      const w = colWidths[i];
+      headerContent += pad(col, w - 1).slice(0, w - 1) + ' ';
+    });
+    lines.push(box.render(headerContent, { background: THEME.surface }));
+    lines.push(Transition.draw(width, THEME.surface, THEME.background));
+
+    // Data Rows
+    const relativeOffset = dataOffset - bufferOffset;
+    const displayData = data.slice(relativeOffset, relativeOffset + height - 2);
+    state.visibleRows = height - 2;
+
+    displayData.forEach((row, idx) => {
+      const isSelected = idx === dataCursor;
+      const rowBg = isSelected ? THEME.selectionBg : THEME.background;
+      const rowFg = isSelected ? THEME.primary : THEME.text;
+
+      let rowContent = `${ANSI.fg(rowFg)}`;
+      columns.forEach((col, i) => {
+        const w = colWidths[i];
+        const val = formatValue(row[col], w - 1);
+        rowContent += pad(val, w - 1).slice(0, w - 1) + ' ';
+      });
+      lines.push(box.render(rowContent, { background: rowBg }));
+    });
+
     return lines;
   }
 
-  /**
-   * Build schema view (full screen)
-   */
-  private buildSchemaView(state: SchemaViewState, height: number, width: number): string[] {
+  private renderSchema(state: SchemaViewState, height: number, width: number): string[] {
     const lines: string[] = [];
-    const { schema, cursor, scrollOffset } = state;
-
-    if (schema.length === 0) {
-      lines.push(pad('No schema information', width, 'center'));
-      while (lines.length < height) {
-        lines.push(' '.repeat(width));
-      }
-      return lines;
-    }
-
-    // Calculate visible window
-    const contentHeight = height; // Use full height
-    const halfHeight = Math.floor(contentHeight / 2);
-    let startIdx = Math.max(0, cursor - halfHeight);
-    let endIdx = Math.min(schema.length, startIdx + contentHeight);
-    
-    // Adjust if at the end
-    if (endIdx - startIdx < contentHeight) {
-      startIdx = Math.max(0, endIdx - contentHeight);
-    }
+    const { schema, cursor } = state;
+    const box = new Box({ width, padding: 1 });
 
-    // Calculate column widths
-    const nameWidth = Math.min(30, Math.max(...schema.map(col => col.name.length)) + 2);
-    const typeWidth = Math.min(20, Math.max(...schema.map(col => col.type.length)) + 2);
-    const attrWidth = width - nameWidth - typeWidth - 10;
+    const half = Math.floor(height / 2);
+    let start = Math.max(0, cursor - half);
+    let end = Math.min(schema.length, start + height);
+    if (end - start < height) start = Math.max(0, end - height);
 
-    // Render schema rows
-    for (let i = startIdx; i < endIdx; i++) {
+    for (let i = start; i < end; i++) {
       const col = schema[i];
       const isSelected = i === cursor;
+      const rowBg = isSelected ? THEME.selectionBg : THEME.background;
       
-      const name = pad(truncate(col.name, nameWidth - 1), nameWidth);
-      const type = pad(truncate(col.type, typeWidth - 1), typeWidth);
-      
-      // Build attributes string
-      const attrs: string[] = [];
+      const name = pad(col.name, 25);
+      const type = pad(col.type, 15);
+      const attrs = [];
       if (col.pk) attrs.push('PK');
       if (col.notnull) attrs.push('NOT NULL');
-      if (col.dflt_value !== null) attrs.push(`DEFAULT ${col.dflt_value}`);
-      const attrStr = attrs.length > 0 ? truncate(attrs.join(', '), attrWidth) : '';
-      
-      // Build content without selection color first
-      const cursorChar = isSelected ? ` ${UI.cursor}` : '  ';
-      const content = `${cursorChar} ${name} ${COLORS.cyan}${type}${COLORS.reset} ${COLORS.dim}${attrStr}${COLORS.reset}`;
-      
-      // Calculate visible width (accounting for CJK and ANSI codes)
-      const contentWidth = getVisibleWidth(content);
       
-      // Build line with exact width
-      const safeWidth = width - 1; // Subtract 1 to prevent wrapping issues
-      let line: string;
-      if (contentWidth < safeWidth) {
-        line = content + ' '.repeat(safeWidth - contentWidth);
-      } else if (contentWidth > safeWidth) {
-        // Need to truncate - build without colors first
-        const basicContent = `${cursorChar} ${name} ${type} ${attrStr}`;
-        const truncatedBasic = truncate(basicContent, safeWidth);
-        line = truncatedBasic;
+      let rowContent = `${ANSI.fg(isSelected ? THEME.primary : THEME.text)}${name}`;
+      rowContent += `${ANSI.fg(THEME.secondary)}${type}`;
+      rowContent += `${ANSI.fg(THEME.textDim)}${attrs.join(', ')}`;
+      lines.push(box.render(rowContent, { background: rowBg }));
+    }
+    return lines;
+  }
+
+  private renderRowDetail(state: RowDetailViewState, height: number, width: number): string[] {
+    const allLines: string[] = [];
+    const { row, schema } = state;
+    const innerWidth = width - 2;
+    const box = new Box({ width, padding: 1, background: THEME.background });
+
+    // Calculate max label width for alignment
+    let maxLabelWidth = 0;
+    schema.forEach(col => {
+      maxLabelWidth = Math.max(maxLabelWidth, getVisibleWidth(col.name));
+    });
+    const labelPad = maxLabelWidth + 2; // +2 for ": "
+
+    schema.forEach((col) => {
+      const label = `${ANSI.bold}${ANSI.fg(THEME.secondary)}${pad(col.name, maxLabelWidth)}${ANSI.reset}: `;
+      const val = formatValue(row[col.name], undefined, true);
+
+      if (labelPad > innerWidth * 0.4) {
+        // Label too long, fallback to simpler layout
+        const simpleLabel = `${ANSI.bold}${ANSI.fg(THEME.secondary)}${col.name}${ANSI.reset}: `;
+        allLines.push(box.render(simpleLabel));
+        const wrappedLines = wrapText(val, innerWidth);
+        wrappedLines.forEach(line => {
+          allLines.push(box.render(`${ANSI.fg(THEME.text)}${line}`));
+        });
       } else {
-        line = content;
-      }
-      
-      // Apply inverse color for selected row (wraps entire line)
-      if (isSelected) {
-        line = COLORS.inverse + line + COLORS.reset;
+        const firstLineMax = innerWidth - labelPad;
+        const wrappedLines = wrapText(val, firstLineMax);
+
+        if (wrappedLines.length === 0 || (wrappedLines.length === 1 && wrappedLines[0] === '')) {
+           allLines.push(box.render(`${label}`));
+        } else {
+           allLines.push(box.render(`${label}${ANSI.fg(THEME.text)}${wrappedLines[0]}`));
+
+           if (wrappedLines.length > 1) {
+             wrappedLines.slice(1).forEach(line => {
+                allLines.push(box.render(`${' '.repeat(labelPad)}${ANSI.fg(THEME.text)}${line}`));
+             });
+           }
+        }
       }
-      
-      lines.push(line);
-    }
+    });
 
-    // Fill remaining lines
-    while (lines.length < height) {
-      lines.push(' '.repeat(width));
-    }
+    state.totalLines = allLines.length;
+    state.visibleHeight = height;
 
-    return lines;
+    // Apply scroll offset
+    return allLines.slice(state.scrollOffset, state.scrollOffset + height);
   }
 
-  /**
-   * Build row detail view
-   */
-  private buildRowDetail(state: RowDetailViewState, height: number, width: number): string[] {
+  private renderHealth(state: HealthViewState, height: number, width: number): string[] {
     const lines: string[] = [];
-    const { row, schema, tableName, rowIndex } = state;
-    
-    // Get max column name length for alignment
-    const maxColNameLength = Math.max(...schema.map(col => col.name.length), 10);
-    const rightMargin = 2; // Right side margin
-    const valueWidth = width - maxColNameLength - 5 - rightMargin;
-    
-    // Display each field (one line per field)
-    let lineCount = 0;
-    for (const col of schema) {
-      if (lineCount >= height) break;
-      
-      const colName = `${COLORS.cyan}${pad(col.name, maxColNameLength)}${COLORS.reset}`;
-      const value = formatValue(row[col.name]);
-      
-      // Truncate value to fit in single line
-      const truncatedValue = truncate(value, valueWidth);
-      
-      let line = `  ${colName} ${COLORS.dim}:${COLORS.reset} ${truncatedValue}`;
-      const lineWidth = getVisibleWidth(line);
-      if (lineWidth < width - rightMargin) {
-        line += ' '.repeat(width - rightMargin - lineWidth);
-      }
-      lines.push(line);
-      lineCount++;
-    }
-    
-    // Fill remaining lines
-    while (lines.length < height) {
-      lines.push(' '.repeat(width));
-    }
-    
+    const entries = Object.entries(state.info);
+    const box = new Box({ width, padding: 1, background: THEME.background });
+
+    entries.forEach(([key, val], idx) => {
+        if (idx >= height) return;
+        const label = pad(key.replace(/_/g, ' '), 25);
+        const rowContent = `${ANSI.fg(THEME.secondary)}${label}${ANSI.reset} : ${val}`;
+        lines.push(box.render(rowContent));
+    });
     return lines;
   }
 
-  /**
-   * Build health overview view
-   */
-  private buildHealthView(state: HealthViewState, height: number, width: number): string[] {
-    const lines: string[] = [];
-    const { info } = state;
-
-    const title = `${COLORS.bold}Core health overview${COLORS.reset}`;
-    lines.push(pad(title, width));
-
-    const formatBool = (value: string): string => (value === '1' ? 'on' : value === '0' ? 'off' : value);
-    const formatAutoVacuum = (value: string): string => {
-      if (value === '0') return 'none';
-      if (value === '1') return 'full';
-      if (value === '2') return 'incremental';
-      return value;
-    };
-
-    const entries: Array<[string, string]> = [
-      ['SQLite version', info.sqlite_version],
-      ['Journal mode', info.journal_mode],
-      ['Synchronous', info.synchronous],
-      ['Locking mode', info.locking_mode],
-      ['Page size', formatNumber(info.page_size)],
-      ['Page count', formatNumber(info.page_count)],
-      ['Freelist pages', formatNumber(info.freelist_count)],
-      ['Cache size', formatNumber(info.cache_size)],
-      ['WAL autocheckpoint', formatNumber(info.wal_autocheckpoint)],
-      ['Auto vacuum', formatAutoVacuum(info.auto_vacuum)],
-      ['User version', String(info.user_version)],
-      ['Application id', String(info.application_id)],
-      ['Encoding', info.encoding],
-      ['Foreign keys', formatBool(info.foreign_keys)],
-      ['Temp store', info.temp_store],
-      ['Mmap size', formatNumber(info.mmap_size)],
-      ['Busy timeout', `${formatNumber(info.busy_timeout)} ms`]
-    ];
-
-    const labelWidth = Math.min(24, Math.max(...entries.map(([label]) => label.length)) + 1);
-    const contentWidth = width - labelWidth - 4;
-
-    for (const [label, value] of entries) {
-      if (lines.length >= height) break;
-      const labelText = pad(label, labelWidth, 'right');
-      const valueText = truncate(value, contentWidth);
-      const line = ` ${COLORS.cyan}${labelText}${COLORS.reset} ${COLORS.dim}:${COLORS.reset} ${valueText}`;
-      const lineWidth = getVisibleWidth(line);
-      if (lineWidth < width) {
-        lines.push(line + ' '.repeat(width - lineWidth));
-      } else {
-        const basicLine = ` ${labelText} : ${valueText}`;
-        lines.push(truncate(basicLine, width - 1));
-      }
+  private buildHelpBar(state: ViewState, width: number): string {
+    const box = new Box({ width, padding: 1, background: THEME.footerBg });
+
+    if ((state as any).notice) {
+      return box.render(`${ANSI.fg(THEME.textDim)}${(state as any).notice}`);
     }
 
-    while (lines.length < height) {
-      lines.push(' '.repeat(width));
+    let helpItems: { key: string; label: string }[] = [];
+    switch (state.type) {
+      case 'tables':
+        helpItems = [
+          { key: 'j/k', label: 'select' },
+          { key: 'g/G', label: 'first/last' },
+          { key: 'Enter/l', label: 'open' },
+          { key: 'i', label: 'info' },
+          { key: 'q', label: 'quit' }
+        ];
+        break;
+      case 'table-detail':
+        helpItems = [
+          { key: 'j/k', label: 'scroll' },
+          { key: 'g/G', label: 'first/last' },
+          { key: 'Enter/l', label: 'row' },
+          { key: 's', label: 'schema' },
+          { key: 'h', label: 'back' },
+          { key: 'q', label: 'quit' }
+        ];
+        break;
+      case 'schema-view':
+        helpItems = [
+          { key: 'j/k', label: 'scroll' },
+          { key: 'g/G', label: 'first/last' },
+          { key: 's/h', label: 'back' },
+          { key: 'q', label: 'quit' }
+        ];
+        break;
+      case 'row-detail':
+        helpItems = [
+          { key: 'j/k', label: 'switch' },
+          { key: '↑/↓', label: 'scroll' },
+          { key: 'h', label: 'back' },
+          { key: 'q', label: 'quit' }
+        ];
+        break;
+      default:
+        helpItems = [
+          { key: 'h', label: 'back' },
+          { key: 'q', label: 'quit' }
+        ];
+        break;
     }
 
-    return lines;
-  }
+    const styledHelp = helpItems
+      .map(item => `${ANSI.fg(THEME.text)}${item.key} ${ANSI.fg(THEME.textDim)}${item.label}`)
+      .join('  ');
 
-  /**
-   * Build help bar (bottom line)
-   */
-  private buildHelpBar(state: ViewState, width: number): string {
-    let help = '';
-    const notice =
-      (state.type === 'table-detail' || state.type === 'row-detail') ? state.notice : undefined;
-    const deleteStep =
-      (state.type === 'table-detail' || state.type === 'row-detail') ? state.deleteConfirm?.step : undefined;
-    const isDeleteConfirm =
-      (state.type === 'table-detail' || state.type === 'row-detail') ? Boolean(state.deleteConfirm) : false;
-    
-    if (notice && isDeleteConfirm) {
-      const stepLabel = deleteStep ? `Step ${deleteStep}/2` : '';
-      const actionLabel = deleteStep === 2 ? 'delete' : 'confirm';
-      help = ` ${COLORS.red}${COLORS.bold}${stepLabel ? `${stepLabel} ` : ''}${notice}${COLORS.reset}  ${COLORS.yellow}[y] ${actionLabel}${COLORS.reset}  [h/Esc] cancel`;
-      const paddedHelp = pad(help, width);
-      return paddedHelp;
-    } else if (notice) {
-      help = ` ${COLORS.yellow}${notice}${COLORS.reset}`;
-      const paddedHelp = pad(help, width);
-      return paddedHelp;
-    } else if (state.type === 'tables') {
-      help = ' [j/k] select  [Enter/l] open  [i] info  [g/G] top/bottom  [q] quit';
-    } else if (state.type === 'table-detail') {
-      help = ' [j/k] scroll  [Enter/l] view row  [Backspace] delete  [s] toggle schema  [h/Esc] back  [q] quit';
-    } else if (state.type === 'schema-view') {
-      help = ' [j/k] scroll  [g/G] top/bottom  [s/h/Esc] back  [q] quit';
-    } else if (state.type === 'row-detail') {
-      help = ' [Backspace] delete  [h/Esc] back  [q] quit';
-    } else if (state.type === 'health') {
-      help = ' [i] back  [h/Esc] back  [q] quit';
-    }
-    
-    const paddedHelp = pad(help, width);
-    return `${COLORS.dim}${paddedHelp}${COLORS.reset}`;
+    return box.render(styledHelp, { align: 'right' });
   }
 }