@tuskydp/cli 0.1.0 → 0.1.1

package/src/tui/dialogs.ts

@@ -0,0 +1,339 @@
+import blessed from 'blessed';
+import { readdirSync } from 'fs';
+import { resolve as pathResolve, dirname, join as pathJoin } from 'path';
+
+export function confirmDialog(
+  screen: blessed.Widgets.Screen,
+  message: string,
+): Promise<boolean> {
+  return new Promise((resolve) => {
+    const dialog = blessed.question({
+      parent: screen,
+      top: 'center',
+      left: 'center',
+      width: '50%',
+      height: 'shrink',
+      border: { type: 'line' },
+      style: {
+        border: { fg: 'yellow' },
+        fg: 'white',
+      },
+      label: ' Confirm ',
+      tags: true,
+      keys: true,
+      vi: true,
+    });
+    dialog.ask(message, (err, value) => {
+      dialog.destroy();
+      screen.render();
+      resolve(!err && !!value);
+    });
+  });
+}
+
+export function textInputDialog(
+  screen: blessed.Widgets.Screen,
+  label: string,
+  defaultValue = '',
+): Promise<string | null> {
+  return new Promise((resolve) => {
+    const form = blessed.form({
+      parent: screen,
+      top: 'center',
+      left: 'center',
+      width: '60%',
+      height: 7,
+      border: { type: 'line' },
+      style: {
+        border: { fg: 'cyan' },
+        fg: 'white',
+      },
+      label: ` ${label} `,
+      tags: true,
+      keys: true,
+    });
+
+    const input = blessed.textbox({
+      parent: form,
+      top: 1,
+      left: 1,
+      right: 1,
+      height: 1,
+      inputOnFocus: true,
+      style: {
+        fg: 'white',
+        bg: 'black',
+        focus: {
+          bg: 'black',
+          fg: 'cyan',
+        },
+      },
+      value: defaultValue,
+    });
+
+    const hint = blessed.box({
+      parent: form,
+      top: 3,
+      left: 1,
+      right: 1,
+      height: 1,
+      content: 'Enter to confirm, Escape to cancel',
+      style: { fg: 'gray' },
+    });
+
+    input.on('submit', (value: string) => {
+      form.destroy();
+      screen.render();
+      resolve(value || null);
+    });
+
+    input.on('cancel', () => {
+      form.destroy();
+      screen.render();
+      resolve(null);
+    });
+
+    input.focus();
+    screen.render();
+  });
+}
+
+export function selectDialog(
+  screen: blessed.Widgets.Screen,
+  label: string,
+  items: string[],
+): Promise<number> {
+  return new Promise((resolve) => {
+    const list = blessed.list({
+      parent: screen,
+      top: 'center',
+      left: 'center',
+      width: '50%',
+      height: items.length + 2,
+      border: { type: 'line' },
+      style: {
+        border: { fg: 'cyan' },
+        fg: 'white',
+        selected: {
+          bg: 'cyan',
+          fg: 'black',
+        },
+      },
+      label: ` ${label} `,
+      tags: true,
+      keys: true,
+      vi: true,
+      items,
+      interactive: true,
+    });
+
+    list.on('select', (_item: any, index: number) => {
+      list.destroy();
+      screen.render();
+      resolve(index);
+    });
+
+    list.on('cancel', () => {
+      list.destroy();
+      screen.render();
+      resolve(-1);
+    });
+
+    list.focus();
+    screen.render();
+  });
+}
+
+export function fileBrowserDialog(
+  screen: blessed.Widgets.Screen,
+  startDir = process.env.HOME || '/',
+): Promise<{ path: string; isDirectory: boolean } | null> {
+  return new Promise((res) => {
+    let currentDir = pathResolve(startDir);
+    let resolved = false;
+
+    function finish(result: { path: string; isDirectory: boolean } | null) {
+      if (resolved) return;
+      resolved = true;
+      box.destroy();
+      screen.render();
+      res(result);
+    }
+
+    const box = blessed.box({
+      parent: screen,
+      top: 'center',
+      left: 'center',
+      width: '70%',
+      height: '70%',
+      border: { type: 'line' },
+      style: {
+        border: { fg: 'cyan' },
+        fg: 'white',
+      },
+      label: ` Browse `,
+      tags: true,
+    });
+
+    const pathBar = blessed.box({
+      parent: box,
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: 1,
+      tags: true,
+      style: { fg: 'cyan' },
+    });
+
+    const list = blessed.list({
+      parent: box,
+      top: 2,
+      left: 0,
+      width: '100%',
+      height: '100%-5',
+      style: {
+        fg: 'white',
+        selected: { bg: 'cyan', fg: 'black' },
+      },
+      keys: true,
+      vi: true,
+      interactive: true,
+      scrollable: true,
+      alwaysScroll: true,
+      scrollbar: { style: { bg: 'cyan' } },
+      tags: true,
+      padding: { left: 1, right: 1 },
+    });
+
+    const hint = blessed.box({
+      parent: box,
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      height: 1,
+      tags: true,
+      style: { fg: 'gray' },
+      content: ' {bold}Enter{/bold} open/select  {bold}u{/bold} upload folder  {bold}Esc{/bold} cancel',
+    });
+
+    // Cache dir listing to avoid re-reading on selection
+    let cachedDirs: string[] = [];
+    let cachedFiles: string[] = [];
+
+    function loadDir(dir: string) {
+      currentDir = dir;
+      pathBar.setContent(` ${currentDir}`);
+      try {
+        const entries = readdirSync(dir, { withFileTypes: true });
+        cachedDirs = [];
+        cachedFiles = [];
+        for (const e of entries) {
+          if (e.name.startsWith('.')) continue;
+          if (e.isDirectory()) cachedDirs.push(e.name);
+          else if (e.isFile()) cachedFiles.push(e.name);
+        }
+        cachedDirs.sort((a, b) => a.localeCompare(b));
+        cachedFiles.sort((a, b) => a.localeCompare(b));
+        const items: string[] = ['{yellow-fg}../{/yellow-fg}'];
+        for (const d of cachedDirs) items.push(`{cyan-fg}📁 ${d}/{/cyan-fg}`);
+        for (const f of cachedFiles) items.push(`   ${f}`);
+        list.setItems(items as any);
+        list.select(0);
+        screen.render();
+      } catch {
+        list.setItems(['{red-fg}Permission denied{/red-fg}'] as any);
+        screen.render();
+      }
+    }
+
+    function getSelectedEntry(): { name: string; fullPath: string; isDir: boolean } | null {
+      const idx = (list as any).selected as number;
+      if (idx === 0) return { name: '..', fullPath: dirname(currentDir), isDir: true };
+      const dirOffset = 1;
+      if (idx < dirOffset + cachedDirs.length) {
+        const name = cachedDirs[idx - dirOffset];
+        return { name, fullPath: pathJoin(currentDir, name), isDir: true };
+      }
+      const fileOffset = dirOffset + cachedDirs.length;
+      if (idx < fileOffset + cachedFiles.length) {
+        const name = cachedFiles[idx - fileOffset];
+        return { name, fullPath: pathJoin(currentDir, name), isDir: false };
+      }
+      return null;
+    }
+
+    list.on('select', () => {
+      const entry = getSelectedEntry();
+      if (!entry) return;
+      if (entry.isDir) {
+        loadDir(entry.fullPath);
+      } else {
+        finish({ path: entry.fullPath, isDirectory: false });
+      }
+    });
+
+    list.key(['escape'], () => finish(null));
+    box.key(['escape'], () => finish(null));
+
+    list.key(['u'], () => {
+      finish({ path: currentDir, isDirectory: true });
+    });
+
+    loadDir(currentDir);
+    list.focus();
+    screen.render();
+  });
+}
+
+export function detailPopup(
+  screen: blessed.Widgets.Screen,
+  title: string,
+  content: string,
+) {
+  // Count content lines to auto-size height
+  const lines = content.split('\n').length;
+  const height = Math.min(lines + 5, Math.floor((screen.height as number) * 0.5));
+
+  const box = blessed.box({
+    parent: screen,
+    top: 'center',
+    left: 'center',
+    width: '55%',
+    height,
+    border: { type: 'line' },
+    style: {
+      border: { fg: 'cyan' },
+      fg: 'white',
+    },
+    label: ` ${title} `,
+    tags: true,
+    keys: true,
+    vi: true,
+    scrollable: true,
+    alwaysScroll: true,
+    scrollbar: {
+      style: { bg: 'cyan' },
+    },
+    padding: { top: 1, bottom: 1, left: 1, right: 1 },
+    content,
+  });
+
+  const hint = blessed.box({
+    parent: box,
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: 1,
+    content: '{gray-fg}Esc to close{/gray-fg}',
+    tags: true,
+    style: { fg: 'gray' },
+  });
+
+  box.key(['escape', 'q', 'enter'], () => {
+    box.destroy();
+    screen.render();
+  });
+
+  box.focus();
+  screen.render();
+}

package/src/tui/files-panel.ts

@@ -0,0 +1,165 @@
+import blessed from 'blessed';
+import type { TuskyClient } from '@tuskydp/sdk';
+import { formatBytes, formatDate, formatRow, statusColor, statusColorClose, getCurrentTheme } from './helpers.js';
+
+export interface FileItem {
+  id: string;
+  name: string;
+  sizeBytes: number;
+  plaintextSizeBytes: number | null;
+  mimeType: string;
+  status: string;
+  createdAt: string;
+  walrusBlobId: string | null;
+  walrusBlobObjectId: string | null;
+  encrypted: boolean;
+}
+
+export class FilesPanel {
+  list: blessed.Widgets.ListElement;
+  private screen: blessed.Widgets.Screen;
+  private sdk: TuskyClient;
+  private files: FileItem[] = [];
+  private loading = false;
+  private currentVaultId: string | null = null;
+  private currentVaultName = '';
+
+  constructor(
+    screen: blessed.Widgets.Screen,
+    sdk: TuskyClient,
+    parent: blessed.Widgets.BoxElement,
+  ) {
+    this.screen = screen;
+    this.sdk = sdk;
+
+    this.list = blessed.list({
+      parent,
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      border: { type: 'line' },
+      style: {
+        border: { fg: 'cyan' },
+        fg: 'white',
+        selected: {
+          bg: 'cyan',
+          fg: 'black',
+        },
+        focus: {
+          border: { fg: 'green' },
+        },
+      },
+      label: ' Files ',
+      tags: true,
+      keys: true,
+      vi: true,
+      interactive: true,
+      scrollable: true,
+      alwaysScroll: true,
+      scrollbar: {
+        style: { bg: 'cyan' },
+      },
+    });
+  }
+
+  async loadForVault(vaultId: string, vaultName: string) {
+    if (this.loading) return;
+    this.loading = true;
+    this.currentVaultId = vaultId;
+    this.currentVaultName = vaultName;
+    this.list.setLabel(` Files — ${vaultName} `);
+    this.list.setItems(['Loading files...'] as any);
+    this.screen.render();
+
+    try {
+      const { files } = await this.sdk.files.list({ vaultId, limit: 100, sortBy: 'createdAt', order: 'desc' });
+      this.files = files.map((f) => ({
+        id: f.id,
+        name: f.name,
+        sizeBytes: f.sizeBytes || 0,
+        plaintextSizeBytes: f.plaintextSizeBytes || null,
+        mimeType: f.mimeType || '',
+        status: f.status || 'unknown',
+        createdAt: f.createdAt || '',
+        walrusBlobId: f.walrusBlobId || null,
+        walrusBlobObjectId: f.walrusBlobObjectId || null,
+        encrypted: f.encrypted || false,
+      }));
+
+      if (this.files.length === 0) {
+        this.list.setItems(['(no files — press u to upload)'] as any);
+      } else {
+        const totalW = (this.list.width as number) - 4;
+        const sizeW = 9;
+        const statusW = 8;
+        const dateW = 12;
+        const encW = 3;
+        const nameW = Math.max(10, totalW - sizeW - statusW - dateW - encW - 4);
+
+        const items = this.files.map((f) => {
+          const size = formatBytes(f.plaintextSizeBytes ?? f.sizeBytes);
+          const status = f.status;
+          const statusTagged = `${statusColor(f.status)}${f.status}${statusColorClose(f.status)}`;
+          const date = f.createdAt ? formatDate(f.createdAt) : '';
+          const enc = f.encrypted ? '🔒' : '';
+          const name = f.name.length > nameW ? f.name.slice(0, nameW - 1) + '…' : f.name;
+          return formatRow([
+            { text: name, width: nameW },
+            { text: size, width: sizeW, align: 'right' },
+            { text: status, tagged: statusTagged, width: statusW },
+            { text: enc, width: encW },
+            { text: date, width: dateW, align: 'right' },
+          ], totalW);
+        });
+        this.list.setItems(items as any);
+      }
+    } catch (err: any) {
+      this.list.setItems([`Error: ${err.message}`] as any);
+    }
+
+    this.loading = false;
+    this.screen.render();
+  }
+
+  clear() {
+    this.files = [];
+    this.currentVaultId = null;
+    this.currentVaultName = '';
+    this.list.setLabel(' Files ');
+    this.list.setItems(['Select a vault'] as any);
+    this.screen.render();
+  }
+
+  getSelected(): FileItem | null {
+    const idx = (this.list as any).selected as number;
+    return this.files[idx] || null;
+  }
+
+  getFiles(): FileItem[] {
+    return this.files;
+  }
+
+  getCurrentVaultId(): string | null {
+    return this.currentVaultId;
+  }
+
+  getCurrentVaultName(): string {
+    return this.currentVaultName;
+  }
+
+  focus() {
+    this.list.focus();
+    this.list.style.border = { fg: getCurrentTheme().borderFocus } as any;
+    this.screen.render();
+  }
+
+  blur() {
+    this.list.style.border = { fg: getCurrentTheme().border } as any;
+    this.screen.render();
+  }
+
+  destroy() {
+    this.list.destroy();
+  }
+}

package/src/tui/helpers.ts

@@ -0,0 +1,206 @@
+import blessed from 'blessed';
+
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+export function formatDate(date: string | Date): string {
+  const d = new Date(date);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return d.toLocaleDateString();
+}
+
+export function statusColor(status: string): string {
+  switch (status) {
+    case 'hot': return '{green-fg}';
+    case 'synced': return '{blue-fg}';
+    case 'cold': return '{yellow-fg}';
+    case 'error': return '{red-fg}';
+    case 'uploading': return '{gray-fg}';
+    default: return '';
+  }
+}
+
+export function statusColorClose(status: string): string {
+  switch (status) {
+    case 'hot': return '{/green-fg}';
+    case 'synced': return '{/blue-fg}';
+    case 'cold': return '{/yellow-fg}';
+    case 'error': return '{/red-fg}';
+    case 'uploading': return '{/gray-fg}';
+    default: return '';
+  }
+}
+
+/**
+ * Format columns into a fixed-width row.
+ * Each col: { text, taggedText?, width, align? }
+ * `text` is used for width calc, `taggedText` (with color tags) for display.
+ */
+export function formatRow(
+  cols: { text: string; tagged?: string; width: number; align?: 'left' | 'right' }[],
+  totalWidth: number,
+): string {
+  // Last column gets remaining space
+  const parts: string[] = [];
+  for (let i = 0; i < cols.length; i++) {
+    const col = cols[i];
+    const w = i === cols.length - 1
+      ? Math.max(col.width, totalWidth - cols.slice(0, i).reduce((s, c) => s + c.width + 1, 0))
+      : col.width;
+    const display = col.tagged ?? col.text;
+    const plain = col.text;
+    if (col.align === 'right') {
+      const pad = Math.max(0, w - plain.length);
+      parts.push(' '.repeat(pad) + display);
+    } else {
+      const pad = Math.max(0, w - plain.length);
+      parts.push(display + ' '.repeat(pad));
+    }
+  }
+  return parts.join(' ');
+}
+
+export interface Theme {
+  name: string;
+  border: string;
+  borderFocus: string;
+  selected: { bg: string; fg: string };
+  fg: string;
+  accent: string;
+  statusBar: { bg: string; fg: string };
+  hint: string;
+}
+
+export const themes: Theme[] = [
+  {
+    name: 'Tusky',
+    border: 'cyan', borderFocus: 'green',
+    selected: { bg: 'cyan', fg: 'black' },
+    fg: 'white', accent: 'cyan',
+    statusBar: { bg: 'cyan', fg: 'black' },
+    hint: 'gray',
+  },
+  {
+    name: 'Claude',
+    border: '#d97706', borderFocus: '#f59e0b',
+    selected: { bg: '#d97706', fg: 'black' },
+    fg: 'white', accent: '#f59e0b',
+    statusBar: { bg: '#d97706', fg: 'black' },
+    hint: '#a3a3a3',
+  },
+  {
+    name: 'OpenClaw',
+    border: '#6366f1', borderFocus: '#818cf8',
+    selected: { bg: '#6366f1', fg: 'white' },
+    fg: 'white', accent: '#818cf8',
+    statusBar: { bg: '#6366f1', fg: 'white' },
+    hint: '#71717a',
+  },
+  {
+    name: 'Matrix',
+    border: 'green', borderFocus: '#00ff00',
+    selected: { bg: 'green', fg: 'black' },
+    fg: 'green', accent: '#00ff00',
+    statusBar: { bg: 'green', fg: 'black' },
+    hint: '#006600',
+  },
+  {
+    name: 'Dracula',
+    border: '#bd93f9', borderFocus: '#ff79c6',
+    selected: { bg: '#bd93f9', fg: '#282a36' },
+    fg: '#f8f8f2', accent: '#ff79c6',
+    statusBar: { bg: '#44475a', fg: '#f8f8f2' },
+    hint: '#6272a4',
+  },
+  {
+    name: 'Monokai',
+    border: '#f92672', borderFocus: '#a6e22e',
+    selected: { bg: '#f92672', fg: 'white' },
+    fg: '#f8f8f2', accent: '#a6e22e',
+    statusBar: { bg: '#49483e', fg: '#f8f8f2' },
+    hint: '#75715e',
+  },
+  {
+    name: 'Nord',
+    border: '#5e81ac', borderFocus: '#88c0d0',
+    selected: { bg: '#5e81ac', fg: '#eceff4' },
+    fg: '#d8dee9', accent: '#88c0d0',
+    statusBar: { bg: '#3b4252', fg: '#d8dee9' },
+    hint: '#4c566a',
+  },
+  {
+    name: 'Sunset',
+    border: '#e11d48', borderFocus: '#fb923c',
+    selected: { bg: '#e11d48', fg: 'white' },
+    fg: '#fecdd3', accent: '#fb923c',
+    statusBar: { bg: '#9f1239', fg: 'white' },
+    hint: '#be123c',
+  },
+];
+
+let currentThemeIdx = 0;
+
+export function getCurrentTheme(): Theme {
+  return themes[currentThemeIdx];
+}
+
+export function cycleTheme(): Theme {
+  currentThemeIdx = (currentThemeIdx + 1) % themes.length;
+  return themes[currentThemeIdx];
+}
+
+export function showError(screen: blessed.Widgets.Screen, message: string) {
+  const msg = blessed.message({
+    parent: screen,
+    top: 'center',
+    left: 'center',
+    width: '50%',
+    height: 'shrink',
+    border: { type: 'line' },
+    style: {
+      border: { fg: 'red' },
+      fg: 'red',
+    },
+    label: ' Error ',
+    tags: true,
+  });
+  msg.display(message, 0, () => {
+    msg.destroy();
+    screen.render();
+  });
+}
+
+export function showMessage(screen: blessed.Widgets.Screen, message: string, label = ' Info ') {
+  const msg = blessed.message({
+    parent: screen,
+    top: 'center',
+    left: 'center',
+    width: '50%',
+    height: 'shrink',
+    border: { type: 'line' },
+    style: {
+      border: { fg: 'green' },
+      fg: 'white',
+    },
+    label,
+    tags: true,
+  });
+  msg.display(message, 0, () => {
+    msg.destroy();
+    screen.render();
+  });
+}