dbn-cli 0.5.2 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbn-cli",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "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();
@@ -198,6 +198,12 @@ export class DBPeek {
         this.render();
         break;
 
+      case 'c':
+        if (this.navigator.getState().type === 'row-detail') {
+          this.navigator.copyToClipboard(() => this.render()).then(() => this.render());
+        }
+        break;
+
       case 'backspace': {
         const deleteState = this.navigator.getState();
         if (deleteState.type === 'table-detail' || deleteState.type === 'row-detail') {

package/src/types.ts

@@ -125,6 +125,9 @@ export interface RowDetailViewState extends BaseViewState {
   scrollOffset: number;
   totalLines: number;
   visibleHeight: number;
+  cachedLines?: string[];
+  cachedWidth?: number;
+  cachedRowIndex?: number;
   deleteConfirm?: DeleteConfirmationState;
   notice?: string;
 }

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/navigator.test.ts

@@ -294,6 +294,18 @@ describe('Navigator', () => {
       const state = navigator.getState();
       assert.strictEqual(state.type, 'table-detail');
     });
+
+    it('should set notice when copying to clipboard', async () => {
+      navigator.init();
+      navigator.enter();
+      navigator.enter();
+
+      const state = navigator.getState() as any;
+      assert.strictEqual(state.type, 'row-detail');
+
+      await navigator.copyToClipboard();
+      assert.ok(state.notice === 'Copied to clipboard' || state.notice === 'Failed to copy to clipboard');
+    });
   });
 
   describe('delete flow', () => {

package/src/ui/navigator.ts

@@ -1,6 +1,7 @@
 import type { DatabaseAdapter } from '../adapter/base.ts';
 import type { ViewState, TablesViewState, TableDetailViewState, SchemaViewState, RowDetailViewState, HealthViewState, ColumnSchema } from '../types.ts';
 import { getVisibleWidth, formatValue } from '../utils/format.ts';
+import { copyToClipboard } from '../utils/clipboard.ts';
 
 /**
  * Navigation state manager
@@ -15,6 +16,31 @@ export class Navigator {
     this.adapter = adapter;
   }
 
+  /**
+   * Copy current row to clipboard as JSON
+   * @param onUpdate - Callback called after notice is cleared to trigger a re-render
+   */
+  async copyToClipboard(onUpdate?: () => void): Promise<void> {
+    const state = this.currentState;
+    if (state && state.type === 'row-detail') {
+      const json = JSON.stringify(state.row, (_, v) => typeof v === 'bigint' ? v.toString() : v, 2);
+      const success = await copyToClipboard(json);
+      if (success) {
+        state.notice = 'Copied to clipboard';
+      } else {
+        state.notice = 'Failed to copy to clipboard';
+      }
+
+      // Clear notice after 3 seconds
+      setTimeout(() => {
+        if (state.notice === 'Copied to clipboard' || state.notice === 'Failed to copy to clipboard') {
+          state.notice = undefined;
+          if (onUpdate) onUpdate();
+        }
+      }, 3000);
+    }
+  }
+
   /**
    * Initialize navigator with tables list view
    */

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 {
@@ -216,11 +236,18 @@ export class Renderer {
   }
 
   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 });
 
+    // Check cache
+    if (state.cachedLines && state.cachedWidth === width && state.cachedRowIndex === state.rowIndex) {
+      state.visibleHeight = height;
+      return state.cachedLines.slice(state.scrollOffset, state.scrollOffset + height);
+    }
+
+    const allLines: string[] = [];
+    const { row, schema } = state;
+
     // Calculate max label width for alignment
     let maxLabelWidth = 0;
     schema.forEach(col => {
@@ -258,6 +285,9 @@ export class Renderer {
       }
     });
 
+    state.cachedLines = allLines;
+    state.cachedWidth = width;
+    state.cachedRowIndex = state.rowIndex;
     state.totalLines = allLines.length;
     state.visibleHeight = height;
 
@@ -291,6 +321,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 +330,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 +340,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' }
         ];
@@ -316,6 +349,7 @@ export class Renderer {
         helpItems = [
           { key: 'j/k', label: 'switch' },
           { key: '↑/↓', label: 'scroll' },
+          { key: 'c', label: 'copy' },
           { key: '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/clipboard.ts

@@ -0,0 +1,56 @@
+import { spawn } from 'node:child_process';
+import { platform } from 'node:os';
+
+/**
+ * Copy text to system clipboard
+ * Supports macOS (pbcopy), Windows (clip), and Linux (xclip/xsel)
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  const os = platform();
+  let command = '';
+  let args: string[] = [];
+
+  if (os === 'darwin') {
+    command = 'pbcopy';
+  } else if (os === 'win32') {
+    command = 'clip';
+  } else if (os === 'linux') {
+    // Try xclip first
+    command = 'xclip';
+    args = ['-selection', 'clipboard'];
+  } else {
+    return false;
+  }
+
+  return new Promise((resolve) => {
+    try {
+      const child = spawn(command, args);
+
+      child.on('error', () => {
+        if (os === 'linux' && command === 'xclip') {
+          // Fallback to xsel if xclip fails
+          try {
+            const fallback = spawn('xsel', ['--clipboard', '--input']);
+            fallback.on('error', () => resolve(false));
+            fallback.stdin.write(text);
+            fallback.stdin.end();
+            fallback.on('exit', (code) => resolve(code === 0));
+          } catch {
+            resolve(false);
+          }
+        } else {
+          resolve(false);
+        }
+      });
+
+      child.stdin.write(text);
+      child.stdin.end();
+
+      child.on('exit', (code) => {
+        resolve(code === 0);
+      });
+    } catch {
+      resolve(false);
+    }
+  });
+}

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);
+  };
+}

package/src/utils/format.ts

@@ -154,6 +154,21 @@ export function wrapText(text: string, maxWidth: number): string[] {
       continue;
     }
 
+    // Fast path for ASCII-only strings (no ANSI, no CJK/Emoji)
+    // Most JSON and technical data falls here.
+    // We include \t \r \n (though split by \n already) and space.
+    if (maxWidth > 0 && /^[\x20-\x7E\t\r\n]*$/.test(sourceLine)) {
+      if (sourceLine.length <= maxWidth) {
+        lines.push(sourceLine);
+      } else {
+        for (let i = 0; i < sourceLine.length; i += maxWidth) {
+          lines.push(sourceLine.slice(i, i + maxWidth));
+        }
+      }
+      continue;
+    }
+
+    // Slow path for complex strings (CJK, Emoji, ANSI)
     let currentLine = '';
     let currentWidth = 0;