dbn-cli 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbn-cli",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "A lightweight terminal-based database browser",
   "repository": "https://github.com/amio/dbn-cli",
   "type": "module",

package/src/index.ts

@@ -5,6 +5,7 @@ import { SQLiteAdapter } from './adapter/sqlite.ts';
 import { Screen } from './ui/screen.ts';
 import { Renderer } from './ui/renderer.ts';
 import { Navigator } from './ui/navigator.ts';
+import { debounce } from './utils/debounce.ts';
 import type { KeyPress } from './types.ts';
 
 /**
@@ -72,10 +73,9 @@ export class DBPeek {
     // Set up keyboard input
     this.setupInput();
 
-    // Handle screen resize
-    this.screen.on('resize', () => {
-      this.render();
-    });
+    // Handle screen resize with debounce to avoid flickering
+    const debouncedRender = debounce(() => this.render(), 50);
+    this.screen.on('resize', debouncedRender);
 
     // Initial render
     this.render();

package/src/ui/grit/index.ts

@@ -52,10 +52,16 @@ export class Box {
 
 export class Transition {
   static draw(width: number, topBg: Color, bottomBg: Color): string {
+    if (topBg === bottomBg) {
+      return `${ANSI.bg(bottomBg)}${' '.repeat(width)}${ANSI.reset}`;
+    }
     return `${ANSI.fg(topBg)}${ANSI.bg(bottomBg)}${ANSI.blockUpper.repeat(width)}${ANSI.reset}`;
   }
 
   static drawInverted(width: number, topBg: Color, bottomBg: Color): string {
+    if (topBg === bottomBg) {
+      return `${ANSI.bg(topBg)}${' '.repeat(width)}${ANSI.reset}`;
+    }
     return `${ANSI.fg(bottomBg)}${ANSI.bg(topBg)}${ANSI.blockLower.repeat(width)}${ANSI.reset}`;
   }
 }

package/src/ui/grit/utils.ts

@@ -5,11 +5,13 @@ export const ANSI = {
   inverse: '\x1b[7m',
   // TrueColor (24-bit) foreground
   fg: (hex: string) => {
+    if (!hex) return '\x1b[39m';
     const { r, g, b } = hexToRgb(hex);
     return `\x1b[38;2;${r};${g};${b}m`;
   },
   // TrueColor (24-bit) background
   bg: (hex: string) => {
+    if (!hex) return '\x1b[49m';
     const { r, g, b } = hexToRgb(hex);
     return `\x1b[48;2;${r};${g};${b}m`;
   },

package/src/ui/renderer.ts

@@ -10,6 +10,9 @@ import type { ViewState, TablesViewState, TableDetailViewState, SchemaViewState,
  */
 export class Renderer {
   private screen: Screen;
+  private lastLines: string[] = [];
+  private lastWidth: number = 0;
+  private lastHeight: number = 0;
 
   constructor(screen: Screen) {
     this.screen = screen;
@@ -38,9 +41,26 @@ export class Renderer {
     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;
   }
 
   private buildTitleBar(state: ViewState, dbPath: string, width: number): string {
@@ -291,6 +311,7 @@ export class Renderer {
       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' }
@@ -299,6 +320,7 @@ export class Renderer {
       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' },
@@ -308,6 +330,7 @@ export class Renderer {
       case 'schema-view':
         helpItems = [
           { key: 'j/k', label: 'scroll' },
+          { key: 'g/G', label: 'first/last' },
           { key: 's/h', label: 'back' },
           { key: 'q', label: 'quit' }
         ];

package/src/ui/theme.ts

@@ -17,7 +17,7 @@ export const THEME = {
   text: '#FFFFFF',
   textDim: '#8E8E93',
   headerBg: '#242426',
-  footerBg: '#1C1C1E',
+  footerBg: '',
   selectionBg: '#3A3A3C',
   success: '#34C759',
   warning: '#FF9500',

package/src/utils/debounce.ts

@@ -0,0 +1,16 @@
+/**
+ * Debounce a function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  ms: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null;
+  return (...args: Parameters<T>) => {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      fn(...args);
+      timeoutId = null;
+    }, ms);
+  };
+}