@neuraiproject/neurai-depin-terminal 1.0.1 → 2.0.0

package/src/ui/RecipientSelector.js

@@ -0,0 +1,114 @@
+/**
+ * Recipient selector state for Charsm UI
+ * Manages loading, selection index, and scroll position.
+ * @module RecipientSelector
+ */
+
+export class RecipientSelector {
+  constructor() {
+    this.open = false;
+    this.loading = false;
+    this.items = [];
+    this.index = 0;
+    this.scroll = 0;
+    this.loadPromise = null;
+  }
+
+  isOpen() {
+    return this.open;
+  }
+
+  async openSelector({ cachedItems, loadItems, onUpdate, onError }) {
+    if (this.open || typeof loadItems !== 'function') {
+      return;
+    }
+
+    this.open = true;
+    this.loading = false;
+
+    if (cachedItems && cachedItems.length > 0) {
+      this.items = cachedItems;
+      this.index = 0;
+      this.scroll = 0;
+      if (onUpdate) {
+        onUpdate();
+      }
+    } else {
+      this.loading = true;
+      if (onUpdate) {
+        onUpdate();
+      }
+    }
+
+    try {
+      const recipients = await this.load(loadItems);
+      this.items = recipients;
+      this.index = 0;
+      this.scroll = 0;
+      this.loading = false;
+      if (onUpdate) {
+        onUpdate();
+      }
+    } catch (error) {
+      this.open = false;
+      this.loading = false;
+      if (onError) {
+        onError(error);
+      }
+    }
+  }
+
+  close() {
+    this.open = false;
+    this.loading = false;
+  }
+
+  handleKeypress(key) {
+    if (!key) {
+      return { action: 'noop' };
+    }
+
+    if (key.name === 'escape') {
+      return { action: 'close' };
+    }
+
+    if (key.name === 'up') {
+      if (this.index > 0) {
+        this.index -= 1;
+        if (this.index < this.scroll) {
+          this.scroll = this.index;
+        }
+        return { action: 'update' };
+      }
+      return { action: 'noop' };
+    }
+
+    if (key.name === 'down') {
+      if (this.index < this.items.length - 1) {
+        this.index += 1;
+        return { action: 'update' };
+      }
+      return { action: 'noop' };
+    }
+
+    if (key.name === 'return') {
+      return { action: 'select', address: this.items[this.index] };
+    }
+
+    return { action: 'noop' };
+  }
+
+  async load(loadItems) {
+    if (this.loadPromise) {
+      return this.loadPromise;
+    }
+
+    this.loadPromise = Promise.resolve(loadItems());
+
+    try {
+      return await this.loadPromise;
+    } finally {
+      this.loadPromise = null;
+    }
+  }
+}

package/src/ui/TabManager.js

@@ -0,0 +1,162 @@
+/**
+ * Tab manager for Charsm UI
+ * Tracks group and private tabs, unread state, and ordering.
+ * @module TabManager
+ */
+
+export class TabManager {
+  constructor() {
+    this.tabs = [];
+    this.activeTabId = 'group';
+    this.privateTabFirstSeen = new Map();
+    this.closedPrivateTabs = new Set();
+  }
+
+  initialize() {
+    this.tabs = [{
+      id: 'group',
+      label: 'Group',
+      type: 'group',
+      unread: false,
+      firstSeen: 0
+    }];
+    this.activeTabId = 'group';
+  }
+
+  getTabs() {
+    return this.tabs;
+  }
+
+  getActiveTabId() {
+    return this.activeTabId;
+  }
+
+  getActivePeerAddress() {
+    if (!this.activeTabId.startsWith('dm:')) {
+      return null;
+    }
+    return this.activeTabId.slice(3);
+  }
+
+  setActiveTab(tabId) {
+    const tab = this.tabs.find((entry) => entry.id === tabId);
+    if (!tab) {
+      return false;
+    }
+    this.activeTabId = tabId;
+    tab.unread = false;
+    return true;
+  }
+
+  activateNextTab() {
+    if (this.tabs.length === 0) {
+      return false;
+    }
+    const currentIndex = this.tabs.findIndex((tab) => tab.id === this.activeTabId);
+    const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % this.tabs.length;
+    return this.setActiveTab(this.tabs[nextIndex].id);
+  }
+
+  activatePrevTab() {
+    if (this.tabs.length === 0) {
+      return false;
+    }
+    const currentIndex = this.tabs.findIndex((tab) => tab.id === this.activeTabId);
+    const prevIndex = currentIndex === -1
+      ? 0
+      : (currentIndex - 1 + this.tabs.length) % this.tabs.length;
+    return this.setActiveTab(this.tabs[prevIndex].id);
+  }
+
+  closeActiveTab() {
+    if (this.activeTabId === 'group') {
+      return false;
+    }
+
+    const peerAddress = this.getActivePeerAddress();
+    this.tabs = this.tabs.filter((tab) => tab.id !== this.activeTabId);
+    if (peerAddress) {
+      this.closedPrivateTabs.add(peerAddress);
+    }
+    this.activeTabId = 'group';
+    this.sortTabs();
+    return true;
+  }
+
+  openPrivateTab(address, activate = false, timestamp = null) {
+    if (!address) {
+      return null;
+    }
+
+    const tabId = `dm:${address}`;
+    let tab = this.tabs.find((entry) => entry.id === tabId);
+
+    if (!this.privateTabFirstSeen.has(address)) {
+      const firstSeen = timestamp || Math.floor(Date.now() / 1000);
+      this.privateTabFirstSeen.set(address, firstSeen);
+    }
+
+    if (!tab) {
+      if (this.closedPrivateTabs.has(address)) {
+        this.closedPrivateTabs.delete(address);
+      }
+
+      tab = {
+        id: tabId,
+        label: this.formatTabLabel(address),
+        type: 'dm',
+        address: address,
+        unread: false,
+        firstSeen: this.privateTabFirstSeen.get(address)
+      };
+
+      this.tabs.push(tab);
+      this.sortTabs();
+    }
+
+    if (activate) {
+      this.setActiveTab(tabId);
+    }
+
+    return tab;
+  }
+
+  markUnread(tabId) {
+    const tab = this.tabs.find((entry) => entry.id === tabId);
+    if (tab) {
+      tab.unread = true;
+    }
+  }
+
+  markGroupUnread() {
+    if (this.activeTabId === 'group') {
+      return;
+    }
+    const groupTab = this.tabs.find((tab) => tab.id === 'group');
+    if (groupTab) {
+      groupTab.unread = true;
+    }
+  }
+
+  formatTabLabel(address) {
+    if (!address) {
+      return 'Unknown';
+    }
+
+    const trimmed = address.trim();
+    if (trimmed.length <= 6) {
+      return trimmed;
+    }
+
+    return `${trimmed.slice(0, 3)}...${trimmed.slice(-3)}`;
+  }
+
+  sortTabs() {
+    const groupTab = this.tabs.find((tab) => tab.type === 'group');
+    const dmTabs = this.tabs
+      .filter((tab) => tab.type === 'dm')
+      .sort((a, b) => a.firstSeen - b.firstSeen);
+
+    this.tabs = groupTab ? [groupTab, ...dmTabs] : dmTabs;
+  }
+}

package/src/ui/render.js

@@ -0,0 +1,173 @@
+/**
+ * Rendering helpers for Charsm UI
+ * @module ui/render
+ */
+
+import { ADDRESS, TIME } from '../constants.js';
+import { formatTimestamp, parseRpcHost } from '../utils.js';
+
+export const stripAnsi = (value) => {
+  if (!value) {
+    return '';
+  }
+  return value.replace(/\x1b\[[0-9;]*m/g, '');
+};
+
+export const padLine = (value, width) => {
+  const raw = value || '';
+  const len = stripAnsi(raw).length;
+  if (len >= width) {
+    return raw;
+  }
+  return raw + ' '.repeat(width - len);
+};
+
+export const renderHeaderLines = ({
+  config,
+  myAddress,
+  totalMessages,
+  messageExpiryHours,
+  encryptionType,
+  lastConnectionStatus,
+  lastPollTime
+}) => {
+  const rpcUrl = parseRpcHost(config.rpc_url);
+  const connectedIndicator = lastConnectionStatus ? '●' : '○';
+  const lastPollStr = lastPollTime
+    ? formatTimestamp(lastPollTime, config.timezone)
+    : TIME.PLACEHOLDER;
+
+  let timezoneDisplay = config.timezone || 'UTC';
+  if (timezoneDisplay !== 'UTC') {
+    if (!timezoneDisplay.startsWith('+') && !timezoneDisplay.startsWith('-')) {
+      timezoneDisplay = `+${timezoneDisplay}`;
+    }
+    timezoneDisplay = `UTC${timezoneDisplay}`;
+  }
+
+  const line1 = `Neurai DePIN | ${connectedIndicator} RPC: ${rpcUrl} | Token: ${config.token} | Time: ${timezoneDisplay}`;
+  const line2 = `Address: ${myAddress} | Total: ${totalMessages} | Expiry: ${messageExpiryHours}h | Encryption: ${encryptionType} | Last check: ${lastPollStr}`;
+
+  return [line1, line2];
+};
+
+export const renderTabLines = ({ tabs, activeTabId, applyStyle }) => {
+  const blocks = tabs.map((tab) => {
+    const label = tab.unread ? `${tab.label}*` : tab.label;
+    const content = ` ${label} `;
+    const borderChar = tab.id === activeTabId ? '═' : '─';
+    const isActive = tab.id === activeTabId;
+    const top = `┌${borderChar.repeat(content.length)}┐`;
+    const middle = `│${content}│`;
+    return {
+      lines: [top, middle],
+      styleId: isActive ? 'tabActive' : 'tabInactive',
+      isActive
+    };
+  });
+
+  if (blocks.length === 0) {
+    return { lines: [''], activeRange: null };
+  }
+
+  const height = 2;
+  const combined = [];
+  let activeRange = null;
+  let cursor = 0;
+  blocks.forEach((block, index) => {
+    const blockWidth = block.lines[0].length;
+    if (block.isActive) {
+      activeRange = { start: cursor, end: cursor + blockWidth - 1 };
+    }
+    cursor += blockWidth;
+    if (index < blocks.length - 1) {
+      cursor += 1;
+    }
+  });
+  for (let i = 0; i < height; i += 1) {
+    const line = blocks.map((block) => {
+      return applyStyle(block.lines[i], block.styleId);
+    }).join(' ');
+    combined.push(line);
+  }
+
+  return { lines: combined, activeRange };
+};
+
+export const formatMessageLine = (msg, { config, myAddress, applyStyle }) => {
+  const time = formatTimestamp(msg.timestamp, config.timezone);
+  const isMe = msg.sender === myAddress;
+  const senderLabel = isMe ? 'YOU' : msg.sender.slice(0, ADDRESS.TRUNCATE_LENGTH);
+  const line = `[${time}] ${senderLabel}: ${msg.message}`;
+
+  if (msg.isSystem) {
+    const styleId = msg.systemType === 'error'
+      ? 'msgError'
+      : msg.systemType === 'success'
+        ? 'msgSuccess'
+        : 'msgInfo';
+    return applyStyle(line, styleId);
+  }
+
+  const styleId = isMe ? 'msgMe' : 'msgOther';
+  return applyStyle(line, styleId);
+};
+
+export const renderRecipientOverlay = ({ availableHeight, width, selector }) => {
+  const contentLines = [];
+
+  if (selector.loading) {
+    contentLines.push('(loading recipients...)');
+  } else if (!selector.items.length) {
+    contentLines.push('(no recipients available)');
+  } else {
+    const maxVisible = Math.max(1, availableHeight - 2);
+    if (selector.index >= selector.scroll + maxVisible) {
+      selector.scroll = selector.index - maxVisible + 1;
+    }
+
+    const slice = selector.items.slice(selector.scroll, selector.scroll + maxVisible);
+    slice.forEach((address, idx) => {
+      const absoluteIndex = selector.scroll + idx;
+      const prefix = absoluteIndex === selector.index ? '>' : ' ';
+      contentLines.push(`${prefix} ${address}`);
+    });
+  }
+
+  const frameWidth = Math.min(Math.max(width || 40, 40), 70);
+  const innerWidth = frameWidth - 2;
+  const top = `┌${'─'.repeat(innerWidth)}┐`;
+  const bottom = `└${'─'.repeat(innerWidth)}┘`;
+  const framed = [top, ...contentLines.map((line) => `│${padLine(line, innerWidth)}│`), bottom];
+
+  const frameHeight = framed.length;
+  const leftPadding = Math.max(Math.floor((width - frameWidth) / 2), 0);
+  const topPadding = Math.max(Math.floor((availableHeight - frameHeight) / 2), 0);
+  const paddedFrame = framed.map((line) => `${' '.repeat(leftPadding)}${line}`);
+
+  const output = [];
+  for (let i = 0; i < topPadding; i += 1) {
+    output.push('');
+  }
+  output.push(...paddedFrame);
+
+  while (output.length < availableHeight) {
+    output.push('');
+  }
+
+  return output.slice(0, availableHeight);
+};
+
+export const renderInputLine = (inputValue) => `> ${inputValue}`;
+
+export const renderStatusLine = (statusMessage, statusType, applyStyle) => {
+  if (!statusMessage) {
+    return '';
+  }
+  const styleId = statusType === 'error'
+    ? 'statusError'
+    : statusType === 'success'
+      ? 'statusSuccess'
+      : 'statusInfo';
+  return applyStyle(statusMessage, styleId);
+};