eva-md 0.4.3 → 0.5.1

package/eva.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * EVA.md v0.3.3 — EVA Media Downloader by .maxon
+ * EVA.md v0.5.1 — EVA Media Downloader by .maxon
  * Pure Node.js Interactive TUI (Zero external npm dependencies!)
  * Works just like Gemini CLI (`node eva.js` or `./eva.js`), with full mouse & keyboard support.
  *
@@ -46,7 +46,7 @@ const { spawn, spawnSync } = require('child_process');
 // Constants & Configuration
 // ---------------------------------------------------------------------------
 
-const APP_VERSION = 'v0.4.3 (Node.js)';
+const APP_VERSION = 'v0.5.1 (Node.js)';
 const CONFIG_PATH = path.join(os.homedir(), '.config', 'eva_md', 'config.json');
 const MAX_LOG_LINES = 200;
 const MAX_LOG_LINE_LENGTH = 500;
@@ -104,7 +104,6 @@ const ANSI = {
   fgBlack: `${CSI}30m`,
   fgGray: `${CSI}38;2;105;105;105m`,
   fgOrange: `${CSI}38;2;222;91;9m`,   // Текст цвета RGB(222, 91, 9)
-  bgOrange: `${CSI}48;2;222;91;9m`,
   bgGray: `${CSI}48;2;105;105;105m`, 
   bgWhite: `${CSI}47m`,
   bgCyan: `${CSI}46m`,
@@ -143,6 +142,10 @@ function shellQuote(arg) {
   return arg;
 }
 
+function resolveOutputDir(outputDir) {
+  return outputDir.replace(/^~(?=$|\/|\\)/, os.homedir());
+}
+
 function formatBytesToMB(bytes) {
   if (!bytes || bytes <= 0) return '—';
   return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
@@ -341,7 +344,7 @@ function buildYtdlpArgs(opts, targetUrl = null) {
   if (opts.writeThumbnail) args.push('--write-thumbnail');
 
   // File Naming & Archive
-  const outDir = opts.outputDir.replace(/^~(?=$|\/|\\)/, os.homedir());
+  const outDir = resolveOutputDir(opts.outputDir);
   const tpl = opts.usePlaylistTemplate ? opts.outputTemplate : '%(title)s.%(ext)s';
   args.push('-o', path.join(outDir, tpl));
 
@@ -480,7 +483,7 @@ class DownloadManager {
   _createQueueItem(opts, url, title = null, entry = null, entryIndex = 0) {
     const src = detectSource(url, opts.sourceId);
     const fmt = opts.bestVideoMerge && !opts.extractAudio ? 'mp4/mkv' : opts.audioFormat;
-    const outDir = opts.outputDir.replace(/^~(?=$|\/|\\)/, os.homedir());
+    const outDir = resolveOutputDir(opts.outputDir);
     const itemOpts = { ...opts, usePlaylistItems: false, playlistReverse: false };
     if (entry && itemOpts.usePlaylistTemplate) {
       const playlistIndex = String(entry.playlist_index || entryIndex + 1).padStart(2, '0');
@@ -987,6 +990,7 @@ class ScreenBuffer {
   constructor(cols, rows) {
     this.cols = cols;
     this.rows = rows;
+    this.clipRight = null;
     this.chars = Array.from({ length: rows }, () => Array(cols).fill(' '));
     this.styles = Array.from({ length: rows }, () => Array(cols).fill(ANSI.fgWhite));
   }
@@ -996,7 +1000,7 @@ class ScreenBuffer {
     const str = String(text);
     for (let i = 0; i < str.length; i++) {
       const cx = x + i;
-      if (cx >= 0 && cx < this.cols - 1) {
+      if (cx >= 0 && cx < this.cols - 1 && (this.clipRight === null || cx <= this.clipRight)) {
         this.chars[y][cx] = str[i];
         this.styles[y][cx] = style;
       }
@@ -1053,10 +1057,11 @@ class EvaNodeTUI {
     this.hitboxes = [];
     this.selectedQueueIdx = 0;
     this.selectedQueueItem = null;
+    this.queueScrollOffset = 0;
+    this.queueViewport = null;
     this.statusBanner = '';
 
-    // Inline modal prompt state
-    this.modal = null; // { label, value, cursor, onConfirm }
+    this.modal = null;
   }
 
   start() {
@@ -1081,101 +1086,84 @@ class EvaNodeTUI {
     process.exit(0);
   }
 
-	registerWidget(scr, id, y, x, label, action, { checked = null, radio = null, isCta = false, maxWidth = 0 } = {}) {
-	this.focusOrder.push(id);
-	const isFocused = this.focusId === id;
-
-	// Префикс и его цвет
-	let prefix = '';
-	let prefixStyle = ANSI.fgWhite;
-
-	if (checked !== null) {
-		prefix = checked ? '[x] ' : '[ ] ';
-		prefixStyle = checked
-		? ANSI.fgGreen + ANSI.bold
-		: ANSI.dim + ANSI.fgWhite;
-	} else if (radio !== null) {
-		prefix = radio ? '(•) ' : '( ) ';
-		prefixStyle = radio
-		? ANSI.fgCyan + ANSI.bold
-		: ANSI.dim + ANSI.fgWhite;
-	}
-
-	// Стиль основного текста
-	let style = ANSI.fgGray;
-
-	if (isFocused) {
-		style = isCta
-		? ANSI.bgGray + ANSI.fgWhite + ANSI.bold
-		: ANSI.bgWhite + ANSI.fgBlack + ANSI.bold;
-	} else if (isCta) {
-   style = id === 'url_input'
-    ? ANSI.fgWhite + ANSI.bold
-  : id === 'btn_add_queue'
-  ? ANSI.fgGreen + ANSI.bold
-  : ANSI.fgCyan + ANSI.bold;
-	} else if (checked || radio) {
-		style = ANSI.fgOrange + ANSI.bold;
-  }
-	
-	// Вывод префикса с раздельными цветами
-	if (checked !== null) {
-	  scr.putStr(y, x, '[', ANSI.fgGray);
+  registerWidget(scr, id, y, x, label, action, { checked = null, radio = null, isCta = false, maxWidth = 0 } = {}) {
+    this.focusOrder.push(id);
+    const isFocused = this.focusId === id;
+    let prefix = '';
+
+    if (checked !== null) {
+      prefix = checked ? '[x] ' : '[ ] ';
+    } else if (radio !== null) {
+      prefix = radio ? '(•) ' : '( ) ';
+    }
+
+    let style = ANSI.fgGray;
+    if (isFocused) {
+      style = isCta
+        ? ANSI.bgGray + ANSI.fgWhite + ANSI.bold
+        : ANSI.bgWhite + ANSI.fgBlack + ANSI.bold;
+    } else if (isCta) {
+      style = id === 'url_input'
+        ? ANSI.fgWhite + ANSI.bold
+        : id === 'btn_add_queue'
+          ? ANSI.fgGreen + ANSI.bold
+          : ANSI.fgCyan + ANSI.bold;
+    } else if (checked || radio) {
+      style = ANSI.fgOrange + ANSI.bold;
+    }
+
+    if (checked !== null) {
+      scr.putStr(y, x, '[', ANSI.fgGray);
       scr.putStr(y, x + 1, checked ? 'x' : ' ', checked ? ANSI.fgOrange + ANSI.bold : ANSI.dim);
-	  scr.putStr(y, x + 2, '] ', ANSI.fgGray);
-	} else if (radio !== null) {
-	  scr.putStr(y, x, '(', ANSI.fgGray);
-	  scr.putStr(y, x + 1, radio ? '•' : ' ', radio ? ANSI.fgOrange + ANSI.bold : ANSI.dim);
-	  scr.putStr(y, x + 2, ') ', ANSI.fgGray);
-	}
-
-	// Расчёт доступной ширины текста
-	const availableWidth = maxWidth > 0
-		? Math.max(0, maxWidth - prefix.length)
-		: Infinity;
-	
-	let visibleLabel = label;
+      scr.putStr(y, x + 2, '] ', ANSI.fgGray);
+    } else if (radio !== null) {
+      scr.putStr(y, x, '(', ANSI.fgGray);
+      scr.putStr(y, x + 1, radio ? '•' : ' ', radio ? ANSI.fgOrange + ANSI.bold : ANSI.dim);
+      scr.putStr(y, x + 2, ') ', ANSI.fgGray);
+    }
 
-	if (visibleLabel.length > availableWidth) {
-		visibleLabel = availableWidth > 0
-		? visibleLabel.slice(0, availableWidth - 1) + '…'
-		: '';
-	}
-	
-	// Вывод основного текста
-  const textX = x + (prefix ? prefix.length : 0);
-  const editMarker = '[ред.]';
-  const editMarkerIndex = visibleLabel.lastIndexOf(editMarker);
-  if (!isFocused && editMarkerIndex >= 0) {
-    const folderLabel = 'Папка:';
-    const folderLabelIndex = visibleLabel.indexOf(folderLabel);
-    if (folderLabelIndex >= 0 && folderLabelIndex < editMarkerIndex) {
-      scr.putStr(y, textX, visibleLabel.slice(0, folderLabelIndex), style);
-      scr.putStr(y, textX + folderLabelIndex, folderLabel, ANSI.fgWhite);
-      const afterFolderIndex = folderLabelIndex + folderLabel.length;
-      scr.putStr(y, textX + afterFolderIndex, visibleLabel.slice(afterFolderIndex, editMarkerIndex), style);
+    const availableWidth = maxWidth > 0 ? Math.max(0, maxWidth - prefix.length) : Infinity;
+    let visibleLabel = label;
+    if (visibleLabel.length > availableWidth) {
+      visibleLabel = availableWidth > 0 ? visibleLabel.slice(0, availableWidth - 1) + '…' : '';
+    }
+
+    const textX = x + prefix.length;
+    const editMarker = '[ред.]';
+    const editMarkerIndex = visibleLabel.lastIndexOf(editMarker);
+    if (!isFocused && editMarkerIndex >= 0) {
+      const folderLabel = 'Папка:';
+      const folderLabelIndex = visibleLabel.indexOf(folderLabel);
+      if (folderLabelIndex >= 0 && folderLabelIndex < editMarkerIndex) {
+        scr.putStr(y, textX, visibleLabel.slice(0, folderLabelIndex), style);
+        scr.putStr(y, textX + folderLabelIndex, folderLabel, ANSI.fgWhite);
+        const afterFolderIndex = folderLabelIndex + folderLabel.length;
+        scr.putStr(y, textX + afterFolderIndex, visibleLabel.slice(afterFolderIndex, editMarkerIndex), style);
+      } else {
+        scr.putStr(y, textX, visibleLabel.slice(0, editMarkerIndex), style);
+      }
+      scr.putStr(y, textX + editMarkerIndex, editMarker, ANSI.fgWhite);
+      scr.putStr(
+        y,
+        textX + editMarkerIndex + editMarker.length,
+        visibleLabel.slice(editMarkerIndex + editMarker.length),
+        style
+      );
     } else {
-      scr.putStr(y, textX, visibleLabel.slice(0, editMarkerIndex), style);
+      scr.putStr(y, textX, visibleLabel, style);
     }
-    scr.putStr(y, textX + editMarkerIndex, editMarker, ANSI.fgWhite);
-    scr.putStr(y, textX + editMarkerIndex + editMarker.length, visibleLabel.slice(editMarkerIndex + editMarker.length), style);
-  } else {
-    scr.putStr(y, textX, visibleLabel, style);
+
+    const totalLength = prefix.length + visibleLabel.length;
+    this.hitboxes.push({
+      id,
+      y,
+      x1: x,
+      x2: Math.min(x + totalLength - 1, scr.clipRight === null ? scr.cols - 2 : scr.clipRight),
+      action,
+    });
+
+    return x + totalLength;
   }
-	
-	// Область взаимодействия
-	const totalLength = (prefix ? prefix.length : 0) + visibleLabel.length;
-	
-	this.hitboxes.push({
-		id,
-		y,
-		x1: x,
-		x2: x + totalLength - 1,
-		action
-	});
-	
-	return x + totalLength;
-	}
 
 
   openPrompt(label, currentVal, onConfirm) {
@@ -1183,7 +1171,6 @@ class EvaNodeTUI {
     this.modal = {
       label,
       value: val,
-      cursor: val.length,
       onConfirm,
     };
     this.render();
@@ -1206,6 +1193,7 @@ class EvaNodeTUI {
 
     this.focusOrder = [];
     this.hitboxes = [];
+    this.queueViewport = null;
 
     if (rows < 22 || cols < 76) {
       scr.putStr(1, 2, `Окно терминала слишком маленькое (${cols}x${rows}). Минимум: 78x22.`, ANSI.fgRed + ANSI.bold);
@@ -1213,7 +1201,19 @@ class EvaNodeTUI {
       return;
     }
 
-    // 1. Header Logo & Tagline
+    this._renderHeader(scr, cols);
+    const { x, w } = this._renderNavigation(scr, rows, cols);
+    this._renderActiveTab(scr, x, w, rows);
+
+    if (this.focusOrder.length > 0 && !this.focusOrder.includes(this.focusId)) {
+      this.focusId = this.focusOrder[0];
+    }
+
+    this._renderFooter(scr, cols, rows);
+    process.stdout.write(scr.renderToAnsi());
+  }
+
+  _renderHeader(scr, cols) {
     ASCII_LOGO.forEach((line, i) => {
       scr.putStr(1 + i, 2, line, ANSI.fgWhite + ANSI.bold);
     });
@@ -1224,8 +1224,9 @@ class EvaNodeTUI {
       scr.putStr(5, cols - tagline.length - 3, tagline, ANSI.fgWhite);
       scr.putStr(6, cols - tagline.length - 3, '─'.repeat(tagline.length), ANSI.fgCyan);
     }
+  }
 
-    // 2. Left Sidebar Navigation (Strictly 1-cell narrow CP437/WGL4 characters so borders NEVER shift)
+  _renderNavigation(scr, rows, cols) {
     const sidebarW = 19;
     const navItems = [
       { tab: 1, label: '≡ General' },
@@ -1258,21 +1259,20 @@ class EvaNodeTUI {
       scr.putStr(r, sidebarW + 1, '│', ANSI.fgWhite);
     }
 
-    // 3. Main Content Area
     const mainX = sidebarW + 3;
     const mainW = cols - mainX - 2;
+    return { x: mainX, w: mainW };
+  }
 
-    if (this.activeTab === 1) this._renderDownloadTab(scr, mainX, mainW, rows);
-    else if (this.activeTab === 2) this._renderQueueTab(scr, mainX, mainW, rows);
-    else if (this.activeTab === 3) this._renderLibraryTab(scr, mainX, mainW, rows);
-    else if (this.activeTab === 4) this._renderSettingsTab(scr, mainX, mainW, rows);
-    else if (this.activeTab === 5) this._renderAboutTab(scr, mainX, mainW, rows);
-
-    if (this.focusOrder.length > 0 && !this.focusOrder.includes(this.focusId)) {
-      this.focusId = this.focusOrder[0];
-    }
+  _renderActiveTab(scr, x, w, rows) {
+    if (this.activeTab === 1) this._renderDownloadTab(scr, x, w, rows);
+    else if (this.activeTab === 2) this._renderQueueTab(scr, x, w, rows);
+    else if (this.activeTab === 3) this._renderLibraryTab(scr, x, w, rows);
+    else if (this.activeTab === 4) this._renderSettingsTab(scr, x, w, rows);
+    else if (this.activeTab === 5) this._renderAboutTab(scr, x, w, rows);
+  }
 
-    // 4. Bottom Status Bar with Live Queue Counter & Progress Bar (or Modal Input)
+  _renderFooter(scr, cols, rows) {
     if (this.modal) {
       const prefix = ` * ${this.modal.label}: `;
       scr.putStr(rows - 2, 0, prefix, ANSI.bgCyan + ANSI.fgBlack + ANSI.bold);
@@ -1283,7 +1283,7 @@ class EvaNodeTUI {
       scr.putStr(rows - 1, 2, footerLeft, ANSI.fgCyan + ANSI.bold);
 
       const items = this.manager.items;
-      const activeItems = items.filter((i) => i.status === 'Downloading');
+      const activeItems = items.filter((item) => item.status === 'Downloading');
       const doneCnt = items.filter((i) => i.status === 'Done').length;
 
       let pct = 0;
@@ -1294,22 +1294,16 @@ class EvaNodeTUI {
         pct = 100;
       }
 
-      const barW = 12;
-      const filled = Math.round((pct / 100) * barW);
-      const bar = '█'.repeat(Math.max(0, filled)) + '░'.repeat(Math.max(0, barW - filled));
-
-	  const queueStatusStr = `│ ${activeItems.length}↓ ${doneCnt}✓ ${pct}%`;
-	  const qStyle = activeItems.length > 0 ? ANSI.fgGreen + ANSI.bold : ANSI.fgWhite;
-	  const qStartX = cols - queueStatusStr.length - 0;
-	  scr.putStr(rows - 1, qStartX, queueStatusStr, qStyle);
+      const queueStatus = `│ ${activeItems.length}↓ ${doneCnt}✓ ${pct}%`;
+      const queueStyle = activeItems.length > 0 ? ANSI.fgGreen + ANSI.bold : ANSI.fgWhite;
+      const queueStartX = cols - queueStatus.length;
+      scr.putStr(rows - 1, queueStartX, queueStatus, queueStyle);
 
-      const afterQueueX = qStartX + queueStatusStr.length + 2;
-      if (this.statusBanner && afterQueueX < cols - 10) {
-        scr.putStr(rows - 1, afterQueueX, `│ ${this.statusBanner}`.slice(0, cols - afterQueueX - 2), ANSI.fgCyan);
+      const statusX = queueStartX + queueStatus.length + 2;
+      if (this.statusBanner && statusX < cols - 10) {
+        scr.putStr(rows - 1, statusX, `│ ${this.statusBanner}`.slice(0, cols - statusX - 2), ANSI.fgCyan);
       }
     }
-
-    process.stdout.write(scr.renderToAnsi());
   }
 
   // -------------------------------------------------------------------------
@@ -1318,9 +1312,11 @@ class EvaNodeTUI {
 
   _renderDownloadTab(scr, x, w, rows) {
     let y = 8;
+    const previousClipRight = scr.clipRight;
 
     // --- Box 1: Select a source (1-9) & URL input ---
     scr.drawBox(y, x, 7, w, 'Select a source');
+    scr.clipRight = x + w - 2;
 	const colWidth = Math.floor(w / 3);
 	const col1X = x + 2;
 	const col2X = x + colWidth;
@@ -1344,7 +1340,9 @@ class EvaNodeTUI {
       );
     });
 
+    scr.clipRight = previousClipRight;
     scr.putStr(y + 4, x + 0, '├' + '─'.repeat(w - 2) + '┤', ANSI.fgWhite);
+    scr.clipRight = x + w - 2;
     const srcObj = SOURCES.find((s) => s.id === this.opts.sourceId) || SOURCES[0];
     const urlDisp = this.opts.url ? this.opts.url : `(нажмите 'u' или кликните для ввода URL — ${srcObj.hint})`;
     this.registerWidget(
@@ -1361,7 +1359,9 @@ class EvaNodeTUI {
 
     // --- Box 2: Download Options & yt-dlp Flags ---
     const box2H = 11;
+    scr.clipRight = previousClipRight;
     scr.drawBox(y, x, box2H, w, 'Download Options Flags');
+    scr.clipRight = x + w - 2;
     const c1 = x + 2;
 
     // Row 1: Audio (-x, metadata, thumbnail)
@@ -1472,43 +1472,47 @@ class EvaNodeTUI {
 
     // Row 6: Naming & Archive (-o & --download-archive)
     scr.putStr(y + 6, c1, 'ФАЙЛЫ:', ANSI.fgCyan + ANSI.bold);
-    const maxTplLen = Math.max(14, Math.floor((w - 20) / 4));
-    const shortTpl =
-      this.opts.outputTemplate.length > maxTplLen
-        ? this.opts.outputTemplate.slice(0, maxTplLen - 1) + '…'
-        : this.opts.outputTemplate;
-    let nx =
-      this.registerWidget(
-        scr,
-        'flag_otpl',
-        y + 6,
-        c1 + 9,
-        `-o "${shortTpl}"`,
-        () => this._toggle('usePlaylistTemplate'),
-        { checked: this.opts.usePlaylistTemplate }
-      ) + 1;
-    nx =
-      this.registerWidget(scr, 'edit_otpl', y + 6, nx, '[ред.]', () =>
-        this.openPrompt('Шаблон имени (-o)', this.opts.outputTemplate, (v) => {
-          this.opts.outputTemplate = v || '%(title)s.%(ext)s';
-        })
-      ) + 3;
+    const rowRight = x + w - 2;
+    const templateX = c1 + 9;
+    const rowWidth = rowRight - templateX + 1;
+    const templateMaxWidth = Math.max(4, 4 + Math.floor(Math.max(0, rowWidth - 24) / 2));
+    const templateEnd = this.registerWidget(
+      scr,
+      'flag_otpl',
+      y + 6,
+      templateX,
+      `-o "${this.opts.outputTemplate}"`,
+      () => this._toggle('usePlaylistTemplate'),
+      {
+        checked: this.opts.usePlaylistTemplate,
+        maxWidth: templateMaxWidth,
+      }
+    );
+    const templateEditEnd = this.registerWidget(scr, 'edit_otpl', y + 6, templateEnd + 1, '[ред.]', () => {
+      return this.openPrompt('Шаблон имени (-o)', this.opts.outputTemplate, (v) => {
+        this.opts.outputTemplate = v || '%(title)s.%(ext)s';
+      });
+    }, { maxWidth: 6 });
 
-    let arx =
-      this.registerWidget(
-        scr,
-        'flag_archive',
-        y + 6,
-        nx,
-        `История загрузки ${this.opts.archiveFile}`,
-        () => this._toggle('useDownloadArchive'),
-        { checked: this.opts.useDownloadArchive }
-      ) + 1;
-    this.registerWidget(scr, 'edit_archive', y + 6, arx, '[ред.]', () =>
-      this.openPrompt('Файл архива (--download-archive)', this.opts.archiveFile, (v) => {
-        this.opts.archiveFile = v || 'archive.txt';
-      })
+    const archiveX = templateEditEnd + 2;
+    const archiveMaxWidth = Math.max(4, rowRight - archiveX - '[ред.]'.length);
+    const archiveEnd = this.registerWidget(
+      scr,
+      'flag_archive',
+      y + 6,
+      archiveX,
+      `История загрузки ${this.opts.archiveFile}`,
+      () => this._toggle('useDownloadArchive'),
+      {
+        checked: this.opts.useDownloadArchive,
+        maxWidth: archiveMaxWidth,
+      }
     );
+    this.registerWidget(scr, 'edit_archive', y + 6, archiveEnd + 1, '[ред.]', () => {
+      return this.openPrompt('Файл архива (--download-archive)', this.opts.archiveFile, (v) => {
+        this.opts.archiveFile = v || 'archive.txt';
+      });
+    }, { maxWidth: 6 });
 
     // Row 7: Playlists (--playlist-items & --playlist-reverse)
     scr.putStr(y + 7, c1, 'ПЛЕЙЛИСТ:', ANSI.fgCyan + ANSI.bold);
@@ -1559,6 +1563,7 @@ class EvaNodeTUI {
     });
 
     y += box2H;
+    scr.clipRight = previousClipRight;
 
     // Word-wrapped CLI Preview Lines (never overflows the window width)
     const fullCliText = `CLI: ${buildCommandPreview(this.opts)}`;
@@ -1595,10 +1600,19 @@ class EvaNodeTUI {
     this.selectedQueueItem = items[this.selectedQueueIdx] || null;
 
     const listRows = Math.max(1, h - 6);
+    this.queueViewport = { x, right: x + w, top: y + 3, rows: listRows };
+    const maxScrollOffset = Math.max(0, items.length - listRows);
+    this.queueScrollOffset = Math.max(0, Math.min(this.queueScrollOffset, maxScrollOffset));
+    if (this.selectedQueueIdx < this.queueScrollOffset) {
+      this.queueScrollOffset = this.selectedQueueIdx;
+    } else if (this.selectedQueueIdx >= this.queueScrollOffset + listRows) {
+      this.queueScrollOffset = this.selectedQueueIdx - listRows + 1;
+    }
+
     if (items.length === 0) {
       scr.putStr(y + 3, x + 4, 'Очередь пуста. Добавьте трек во вкладке [1] Download.', ANSI.fgWhite);
     } else {
-      const startI = Math.max(0, this.selectedQueueIdx - listRows + 1);
+      const startI = this.queueScrollOffset;
       const slice = items.slice(startI, startI + listRows);
       slice.forEach((it, rowOffset) => {
         const idx = startI + rowOffset;
@@ -1647,6 +1661,35 @@ class EvaNodeTUI {
           },
         });
       });
+
+      if (items.length > listRows) {
+        const scrollbarX = x + w - 2;
+        const thumbSize = Math.max(1, Math.floor((listRows * listRows) / items.length));
+        const thumbTravel = listRows - thumbSize;
+        const thumbTop = maxScrollOffset > 0
+          ? Math.round((this.queueScrollOffset / maxScrollOffset) * thumbTravel)
+          : 0;
+        for (let rowOffset = 0; rowOffset < listRows; rowOffset++) {
+          const isThumb = rowOffset >= thumbTop && rowOffset < thumbTop + thumbSize;
+          const scrollbarY = y + 3 + rowOffset;
+          scr.putStr(scrollbarY, scrollbarX, isThumb ? '█' : '│', isThumb ? ANSI.fgCyan : ANSI.fgGray);
+          this.hitboxes.push({
+            id: 'q_scroll',
+            y: scrollbarY,
+            x1: scrollbarX,
+            x2: scrollbarX,
+            action: () => {
+              const nextThumbTop = Math.max(0, Math.min(thumbTravel, rowOffset - Math.floor(thumbSize / 2)));
+              this.queueScrollOffset = thumbTravel > 0
+                ? Math.round((nextThumbTop / thumbTravel) * maxScrollOffset)
+                : 0;
+              this.selectedQueueIdx = this.queueScrollOffset;
+              this.selectedQueueItem = items[this.selectedQueueIdx] || null;
+              this.render();
+            },
+          });
+        }
+      }
     }
 
     const ctrlY = y + h - 2;
@@ -1687,7 +1730,7 @@ class EvaNodeTUI {
   _renderLibraryTab(scr, x, w, rows) {
     const h = rows - 9;
     scr.drawBox(8, x, h, w, `Downloaded Media Library (${this.opts.outputDir})`);
-    const outDir = this.opts.outputDir.replace(/^~(?=$|\/|\\)/, os.homedir());
+    const outDir = resolveOutputDir(this.opts.outputDir);
     const exts = new Set(['.mp3', '.m4a', '.flac', '.wav', '.mp4', '.mkv', '.webm', '.opus', '.ogg']);
     let files = [];
     try {
@@ -1708,7 +1751,7 @@ class EvaNodeTUI {
     const numberColW = 4;
     const formatColW = 7;
     const sizeColW = 10;
-    const nameColW = Math.min(60, Math.max(1, contentWidth - numberColW - formatColW - sizeColW - 5));
+    const nameColW = Math.max(1, contentWidth - numberColW - formatColW - sizeColW - 5);
     const formatX = numberColW + 1 + nameColW + 1;
     const sizeX = formatX + formatColW + 1;
     if (files.length === 0) {
@@ -1722,13 +1765,11 @@ class EvaNodeTUI {
       files.slice(0, visibleFileCount).forEach((f, i) => {
         const mb = formatBytesToMB(f.stat.size);
         const row = 12 + i;
-        const filename = f.name.length > nameColW
-          ? `${f.name.slice(0, Math.max(0, nameColW - 1))}…`
-          : f.name;
+        const filename = fitTextToCellWidth(f.name, nameColW);
         scr.putStr(row, x + 3, String(i + 1).padEnd(numberColW), ANSI.fgWhite);
-        scr.putStr(row, x + 3 + numberColW + 1, filename.slice(0, nameColW).padEnd(nameColW), ANSI.fgWhite);
-        scr.putStr(row, x + 3 + formatX, f.ext.slice(1, formatColW + 1).padEnd(formatColW), ANSI.fgWhite);
-        scr.putStr(row, x + 3 + sizeX, mb.slice(0, sizeColW).padStart(sizeColW), ANSI.fgWhite);
+        scr.putStrWithin(row, x + 3 + numberColW + 1, filename, nameColW, ANSI.fgWhite);
+        scr.putStrWithin(row, x + 3 + formatX, f.ext.slice(1, formatColW + 1).padEnd(formatColW), formatColW, ANSI.fgWhite);
+        scr.putStrWithin(row, x + 3 + sizeX, mb.slice(0, sizeColW).padStart(sizeColW), sizeColW, ANSI.fgWhite);
       });
     }
   }
@@ -1965,7 +2006,6 @@ class EvaNodeTUI {
       }
       if (data === '\x15') {
         this.modal.value = '';
-        this.modal.cursor = 0;
         this.render();
         return;
       }
@@ -1990,12 +2030,24 @@ class EvaNodeTUI {
       const mx = parseInt(mouseMatch[2], 10) - 1;
       const my = parseInt(mouseMatch[3], 10) - 1;
       const isPress = mouseMatch[4] === 'M';
+      if (this.activeTab === 2 && (btn === 64 || btn === 65)) {
+        const viewport = this.queueViewport;
+        if (viewport && mx >= viewport.x && mx < viewport.right &&
+            my >= viewport.top && my < viewport.top + viewport.rows) {
+          const maxOffset = Math.max(0, this.manager.items.length - viewport.rows);
+          this.queueScrollOffset = Math.max(0, Math.min(maxOffset, this.queueScrollOffset + (btn === 64 ? -1 : 1)));
+          this.selectedQueueIdx = this.queueScrollOffset;
+          this.selectedQueueItem = this.manager.items[this.selectedQueueIdx] || null;
+          this.render();
+        }
+        return;
+      }
       if (isPress && btn === 0) {
         const hit = this.hitboxes.find((h) =>
           mx >= h.x1 && mx <= h.x2 && (h.y === my || (h.nav && Math.abs(h.y - my) === 1))
         );
         if (hit) {
-          this.focusId = hit.id;
+          if (hit.id !== 'q_scroll') this.focusId = hit.id;
           hit.action();
         }
       }
@@ -2142,6 +2194,7 @@ module.exports = {
   detectSource,
   isYouTubePlaylistUrl,
   playlistEntryUrl,
+  ScreenBuffer,
   DownloadManager,
   formatBytesToMB,
   fitTextToCellWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "eva-md",
-	"version": "0.4.3",
+	"version": "0.5.1",
 	"description": "EVA Media Downloader CLI",
 	"main": "eva.js",
 	"bin": {