ispbills-icli 8.1.1 → 8.3.0

package/src/tui/composer.js

@@ -1,11 +1,25 @@
 // Bottom-pinned input composer with cursor editing, input history, readline
 // key bindings and a Copilot-style slash-command palette that appears ABOVE
 // the input and is navigable with the arrow keys.
-import { html, useState, useEffect, useCallback } from './dom.js';
+import { html, useState, useEffect, useCallback, useRef } from './dom.js';
 import { Box, Text, useInput } from 'ink';
 import { C, glyphs, borderStyle } from './theme.js';
 import { SLASH_COMMANDS } from '../commands.js';
 
+// @-mention entity types. Selecting one inserts e.g. "@olt:" so the user can
+// append an identifier (@olt:3); the backend treats it as a scoped reference.
+const MENTIONS = [
+  { tag: '@device',   desc: 'Any device by name or id' },
+  { tag: '@olt',      desc: 'An OLT' },
+  { tag: '@router',   desc: 'A router / NAS' },
+  { tag: '@onu',      desc: 'An ONU' },
+  { tag: '@customer', desc: 'A customer' },
+  { tag: '@vlan',     desc: 'A VLAN id' },
+  { tag: '@circuit',  desc: 'A circuit / uplink' },
+  { tag: '@ip',       desc: 'An IP address' },
+  { tag: '@mac',      desc: 'A MAC address' },
+];
+
 export function Composer({ onSubmit, busy, width = 80 }) {
   const [value, setValue] = useState('');
   const [cursor, setCursor] = useState(0);
@@ -13,9 +27,29 @@ export function Composer({ onSubmit, busy, width = 80 }) {
   const [histIdx, setHistIdx] = useState(-1);
   const [sel, setSel] = useState(0);
 
-  // The slash palette is open while typing the command token (no space yet).
-  const matches = value.startsWith('/') && !value.includes(' ')
-    ? SLASH_COMMANDS.filter((s) => s.cmd.startsWith(value))
+  // Undo/redo history: snapshots of { value, cursor }. Consecutive typing is
+  // coalesced into a single undo step via `lastMut`.
+  const undoRef = useRef([]);
+  const redoRef = useRef([]);
+  const lastMut = useRef('');
+  const snapshot = (kind) => {
+    if (kind === 'type' && lastMut.current === 'type') return; // coalesce a typing run
+    undoRef.current.push({ value, cursor });
+    if (undoRef.current.length > 200) undoRef.current.shift();
+    redoRef.current = [];
+    lastMut.current = kind;
+  };
+
+  // Determine the token being typed at the cursor to drive the palette.
+  const upto = value.slice(0, cursor);
+  const tokStart = Math.max(upto.lastIndexOf(' '), upto.lastIndexOf('\n')) + 1;
+  const token = upto.slice(tokStart);
+  const slashMode = value.startsWith('/') && tokStart === 0;
+  const mentionMode = token.startsWith('@');
+  const matches = slashMode
+    ? SLASH_COMMANDS.filter((s) => s.cmd.startsWith(token))
+    : mentionMode
+    ? MENTIONS.filter((m) => m.tag.startsWith(token.toLowerCase()))
     : [];
   const menuOpen = matches.length > 0;
 
@@ -24,6 +58,7 @@ export function Composer({ onSubmit, busy, width = 80 }) {
   const submit = useCallback((text) => {
     const q = text.trim();
     setValue(''); setCursor(0); setHistIdx(-1); setSel(0);
+    undoRef.current = []; redoRef.current = []; lastMut.current = '';
     if (q) {
       setHistory((h) => (h[h.length - 1] === q ? h : [...h, q]));
       onSubmit(q);
@@ -32,22 +67,40 @@ export function Composer({ onSubmit, busy, width = 80 }) {
 
   const setText = (v, c) => { setValue(v); setCursor(c ?? v.length); };
 
+  // Complete the active token to the highlighted palette entry.
+  const complete = () => {
+    if (!menuOpen) return;
+    if (slashMode) { const c = matches[sel].cmd + ' '; setText(c, c.length); return; }
+    const ins = matches[sel].tag + ':';
+    const v = value.slice(0, tokStart) + ins + value.slice(cursor);
+    setText(v, tokStart + ins.length);
+  };
+
   useInput((input, key) => {
     if (busy) return; // ignore edits while a turn streams (App handles Ctrl+C/Esc)
 
     // ── Submit / complete ──
-    if (key.return) {
-      if (menuOpen) { submit(matches[sel].cmd); return; }
+    // Some terminals/PTYs deliver Enter as input="\r" without key.return, so
+    // treat a lone CR/LF as Enter too (a paste is a longer chunk, never "\r").
+    const enter = key.return || input === '\r' || input === '\n';
+    if (enter) {
+      // In slash mode Enter runs the command; in mention mode it completes.
+      if (menuOpen && slashMode) { submit(matches[sel].cmd); return; }
+      if (menuOpen && mentionMode) { complete(); return; }
       submit(value);
       return;
     }
-    if (input && /[\r\n]/.test(input)) {
-      const first = input.split(/[\r\n]/)[0];
-      submit(value.slice(0, cursor) + first + value.slice(cursor));
+    if (key.tab && !key.shift) { complete(); return; }
+
+    // ── Undo / redo ──
+    if (key.ctrl && input === 'z') {
+      const prev = undoRef.current.pop();
+      if (prev) { redoRef.current.push({ value, cursor }); setValue(prev.value); setCursor(prev.cursor); lastMut.current = 'undo'; }
       return;
     }
-    if (key.tab && !key.shift) {
-      if (menuOpen) { const c = matches[sel].cmd + ' '; setText(c, c.length); }
+    if (key.ctrl && (input === 'y' || (input === 'z' && key.shift))) {
+      const nx = redoRef.current.pop();
+      if (nx) { undoRef.current.push({ value, cursor }); setValue(nx.value); setCursor(nx.cursor); lastMut.current = 'redo'; }
       return;
     }
 
@@ -76,8 +129,8 @@ export function Composer({ onSubmit, busy, width = 80 }) {
     // ── Cursor movement ──
     if (key.leftArrow) { setCursor((c) => Math.max(0, c - 1)); return; }
     if (key.rightArrow) {
-      // At end of a slash token, Right accepts the highlighted completion.
-      if (menuOpen && cursor >= value.length) { const c = matches[sel].cmd + ' '; setText(c, c.length); return; }
+      // At end of the active token, Right accepts the highlighted completion.
+      if (menuOpen && cursor >= value.length) { complete(); return; }
       setCursor((c) => Math.min(value.length, c + 1));
       return;
     }
@@ -86,25 +139,30 @@ export function Composer({ onSubmit, busy, width = 80 }) {
 
     // ── Deletion ──
     if (key.backspace || key.delete) {
-      if (cursor > 0) { setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor)); setCursor((c) => c - 1); }
+      if (cursor > 0) { snapshot('del'); setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor)); setCursor((c) => c - 1); }
       return;
     }
-    if (key.ctrl && input === 'u') { setValue(value.slice(cursor)); setCursor(0); return; }        // to start
-    if (key.ctrl && input === 'k') { setValue(value.slice(0, cursor)); return; }                    // to end
+    if (key.ctrl && input === 'u') { snapshot('cut'); setValue(value.slice(cursor)); setCursor(0); return; }        // to start
+    if (key.ctrl && input === 'k') { snapshot('cut'); setValue(value.slice(0, cursor)); return; }                    // to end
     if (key.ctrl && input === 'w') {                                                                // prev word
       let i = cursor;
       while (i > 0 && value[i - 1] === ' ') i--;
       while (i > 0 && value[i - 1] !== ' ') i--;
+      snapshot('cut');
       setValue(value.slice(0, i) + value.slice(cursor)); setCursor(i);
       return;
     }
 
-    // ── Printable input ──
+    // ── Printable input & paste ──
     if (input && !key.ctrl && !key.meta) {
-      const printable = input.replace(/[\x00-\x1f\x7f]/g, '');
-      if (!printable) return;
-      setValue((v) => v.slice(0, cursor) + printable + v.slice(cursor));
-      setCursor((c) => c + printable.length);
+      // Strip bracketed-paste markers, then flatten newlines/tabs from a paste.
+      let text = input.replace(/\x1b\[20[01]~/g, '');
+      const isPaste = text.length > 1 || /[\r\n\t]/.test(text);
+      text = text.replace(/[\r\n\t]+/g, ' ').replace(/[\x00-\x1f\x7f]/g, '');
+      if (!text) return;
+      snapshot(isPaste ? 'paste' : 'type');
+      setValue((v) => v.slice(0, cursor) + text + v.slice(cursor));
+      setCursor((c) => c + text.length);
     }
   });
 
@@ -112,13 +170,14 @@ export function Composer({ onSubmit, busy, width = 80 }) {
   const at = value[cursor] ?? ' ';
   const after = value.slice(cursor + 1);
   const empty = value.length === 0;
-  const sug = menuOpen && matches[sel] ? matches[sel].cmd : '';
-  const ghost = sug && sug.startsWith(value) && cursor >= value.length ? sug.slice(value.length) : '';
+  const sugTok = menuOpen && matches[sel] ? (slashMode ? matches[sel].cmd : matches[sel].tag) : '';
+  const ghost = sugTok && sugTok.startsWith(token) && cursor >= value.length ? sugTok.slice(token.length) : '';
 
   return html`
     <${Box} flexDirection="column" width=${width}>
       ${menuOpen
         ? html`<${Box} flexDirection="column" paddingX=${1} marginBottom=${0}>
+            ${slashMode ? null : html`<${Box}><${Text} color=${C.cyan} bold>@ mention <//><${Text} color=${C.gray}>a device, customer or entity<//><//>`}
             ${(() => {
               const MAX = 8;
               let start = 0;
@@ -127,10 +186,11 @@ export function Composer({ onSubmit, busy, width = 80 }) {
               return window.map((s, wi) => {
                 const i = start + wi;
                 const on = i === sel;
-                const label = (s.cmd + (s.hint ? ' ' + s.hint : '')).padEnd(21);
+                const key = slashMode ? (s.cmd + (s.hint ? ' ' + s.hint : '')) : s.tag;
+                const label = key.padEnd(21);
                 return html`<${Box} key=${'m' + i}>
                   <${Text} color=${on ? C.accent : C.gray}>${on ? glyphs.prompt + ' ' : '  '}<//>
-                  <${Text} color=${on ? C.accent : C.white} bold=${on}>${label}<//>
+                  <${Text} color=${on ? C.accent : slashMode ? C.white : C.cyan} bold=${on}>${label}<//>
                   <${Text} color=${C.gray}>${s.desc}<//>
                 <//>`;
               });

package/src/tui/markdown.js

@@ -1,55 +1,145 @@
-// Minimal, dependency-free markdown → Ink renderer. Supports headings,
-// bold, inline code, bullet/numbered lists and fenced code blocks. Ink
+// Small, dependency-free markdown → Ink renderer. Supports headings, bold,
+// italic, strikethrough, inline code, links, bullet/numbered lists,
+// blockquotes, horizontal rules, fenced code blocks and GFM tables. Ink
 // handles wrapping to the available width automatically.
-import { html, React } from './dom.js';
+import { html } from './dom.js';
 import { Box, Text } from 'ink';
-import { C, glyphs } from './theme.js';
+import { C, glyphs, asciiSafe } from './theme.js';
 
 let keyId = 0;
 const k = () => `md${keyId++}`;
 
-/** Parse a single line into styled Ink <Text> spans (bold, `code`). */
+const stripInline = (s) =>
+  String(s)
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/(^|[^*])\*([^*]+)\*/g, '$1$2')
+    .replace(/_([^_]+)_/g, '$1')
+    .replace(/~~([^~]+)~~/g, '$1')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+
+const cellWidth = (s) => stripInline(s).length;
+
+/** Parse a single line into styled Ink <Text> spans. */
 function renderInline(line) {
   const spans = [];
-  // Tokenise on **bold** and `code`.
-  const re = /(\*\*([^*]+)\*\*|`([^`]+)`)/g;
+  // Order matters: links, bold, strike, italic, code.
+  const re = /(\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|~~([^~]+)~~|`([^`]+)`|\*([^*]+)\*|_([^_]+)_)/g;
   let last = 0;
   let m;
   while ((m = re.exec(line)) !== null) {
     if (m.index > last) spans.push(html`<${Text} key=${k()}>${line.slice(last, m.index)}<//>`);
-    if (m[2] !== undefined) spans.push(html`<${Text} key=${k()} bold>${m[2]}<//>`);
-    else if (m[3] !== undefined) spans.push(html`<${Text} key=${k()} color=${C.cyan}>${m[3]}<//>`);
+    if (m[2] !== undefined) spans.push(html`<${Text} key=${k()} color=${C.blue} underline>${m[2]}<//>`);
+    else if (m[4] !== undefined) spans.push(html`<${Text} key=${k()} bold>${m[4]}<//>`);
+    else if (m[5] !== undefined) spans.push(html`<${Text} key=${k()} strikethrough color=${C.gray}>${m[5]}<//>`);
+    else if (m[6] !== undefined) spans.push(html`<${Text} key=${k()} color=${C.cyan}>${m[6]}<//>`);
+    else if (m[7] !== undefined) spans.push(html`<${Text} key=${k()} italic>${m[7]}<//>`);
+    else if (m[8] !== undefined) spans.push(html`<${Text} key=${k()} italic>${m[8]}<//>`);
     last = m.index + m[0].length;
   }
   if (last < line.length) spans.push(html`<${Text} key=${k()}>${line.slice(last)}<//>`);
   return spans.length ? spans : [html`<${Text} key=${k()}> <//>`];
 }
 
+const isTableRow = (l) => /^\s*\|.*\|\s*$/.test(l);
+const isTableSep = (l) => /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)+\|?\s*$/.test(l);
+
+const splitCells = (l) =>
+  l.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map((c) => c.trim());
+
+/** Render a parsed GFM table as an aligned, bordered box. */
+function renderTable(header, rows) {
+  const cols = header.length;
+  const widths = header.map((h, i) =>
+    Math.max(cellWidth(h), ...rows.map((r) => cellWidth(r[i] || ''))),
+  );
+  const bar = glyphs.vbar;
+  const pad = (text, w) => {
+    const gap = Math.max(0, w - cellWidth(text));
+    return ' '.repeat(gap);
+  };
+  const rule = (l, mid, r) =>
+    l + widths.map((w) => (asciiSafe() ? '-' : '─').repeat(w + 2)).join(mid) + r;
+  const A = asciiSafe();
+  const [tl, tm, tr] = A ? ['+', '+', '+'] : ['┌', '┬', '┐'];
+  const [ml, mm, mr] = A ? ['+', '+', '+'] : ['├', '┼', '┤'];
+  const [bl, bm, br] = A ? ['+', '+', '+'] : ['└', '┴', '┘'];
+
+  const line = (cells, color, bold) => html`
+    <${Box} key=${k()}>
+      <${Text} color=${C.gray}>${bar}<//>
+      ${cells.map((cell, i) => html`
+        <${Box} key=${k()}>
+          <${Text}> <//>
+          <${Text} color=${color} bold=${bold}>${renderInline(cell || '')}<//><${Text}>${pad(cell || '', widths[i])} <//>
+          <${Text} color=${C.gray}>${bar}<//>
+        <//>`)}
+    <//>`;
+
+  return html`
+    <${Box} flexDirection="column" key=${k()} marginY=${0}>
+      <${Text} color=${C.gray}>${rule(tl, tm, tr)}<//>
+      ${line(header, C.accent, true)}
+      <${Text} color=${C.gray}>${rule(ml, mm, mr)}<//>
+      ${rows.map((r) => line(r, C.white, false))}
+      <${Text} color=${C.gray}>${rule(bl, bm, br)}<//>
+    <//>`;
+}
+
 /** Render a markdown string as a column of Ink lines. */
 export function Markdown({ content = '' }) {
   const rows = [];
   let inCode = false;
   const lines = String(content).replace(/\s+$/, '').split('\n');
 
-  for (const raw of lines) {
-    const line = raw.replace(/\t/g, '  ');
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].replace(/\t/g, '  ');
+
+    // Fenced code block.
+    if (line.trim().startsWith('```')) { inCode = !inCode; continue; }
+    if (inCode) { rows.push(html`<${Text} key=${k()} color=${C.green}>  ${line}<//>`); continue; }
 
-    if (line.trim().startsWith('```')) {
-      inCode = !inCode;
+    // GFM table: header row + separator + body rows.
+    if (isTableRow(line) && i + 1 < lines.length && isTableSep(lines[i + 1])) {
+      const header = splitCells(line);
+      const body = [];
+      i += 2;
+      while (i < lines.length && isTableRow(lines[i])) { body.push(splitCells(lines[i])); i++; }
+      i--;
+      rows.push(renderTable(header, body));
       continue;
     }
-    if (inCode) {
-      rows.push(html`<${Text} key=${k()} color=${C.gray}>  ${line}<//>`);
+
+    // Horizontal rule.
+    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      rows.push(html`<${Text} key=${k()} color=${C.gray}>${(asciiSafe() ? '-' : '─').repeat(40)}<//>`);
       continue;
     }
 
-    const h = line.match(/^(#{1,3})\s+(.*)$/);
+    // Headings.
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
     if (h) {
-      rows.push(html`<${Text} key=${k()} bold color=${C.white}>${h[2]}<//>`);
+      const color = h[1].length === 1 ? C.accent : h[1].length === 2 ? C.cyan : C.white;
+      rows.push(html`
+        <${Box} key=${k()} marginTop=${rows.length ? 1 : 0}>
+          <${Text} bold color=${color}>${stripInline(h[2])}<//>
+        <//>`);
+      continue;
+    }
+
+    // Blockquote.
+    const quote = line.match(/^\s*>\s?(.*)$/);
+    if (quote) {
+      rows.push(html`
+        <${Box} key=${k()}>
+          <${Text} color=${C.accent}>${glyphs.vbar} <//>
+          <${Text} color=${C.gray} italic>${renderInline(quote[1])}<//>
+        <//>`);
       continue;
     }
 
-    const bullet = line.match(/^(\s*)[-*]\s+(.*)$/);
+    // Bullet list.
+    const bullet = line.match(/^(\s*)[-*+]\s+(.*)$/);
     if (bullet) {
       rows.push(html`
         <${Box} key=${k()}>
@@ -59,11 +149,12 @@ export function Markdown({ content = '' }) {
       continue;
     }
 
+    // Numbered list.
     const num = line.match(/^(\s*)(\d+)\.\s+(.*)$/);
     if (num) {
       rows.push(html`
         <${Box} key=${k()}>
-          <${Text} color=${C.accent}>${num[1]}${num[2]}. <//>
+          <${Text} color=${C.accent} bold>${num[1]}${num[2]}. <//>
           <${Text}>${renderInline(num[3])}<//>
         <//>`);
       continue;

package/src/userdir.js

@@ -0,0 +1,18 @@
+import { mkdirSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
+
+const BASE = join(homedir(), '.config', 'ispbills-icli');
+
+/** A filesystem-safe key identifying the logged-in IspBills user. */
+export function userKey(cfg) {
+  const raw = cfg?.user?.email || cfg?.user?.name || (cfg?.user?.id != null ? 'id-' + cfg.user.id : '') || 'default';
+  return String(raw).toLowerCase().replace(/[^a-z0-9._-]+/g, '_').slice(0, 64) || 'default';
+}
+
+/** Ensure and return a per-user subdirectory under the config dir. */
+export function userDir(cfg, ...parts) {
+  const dir = join(BASE, ...parts, userKey(cfg));
+  mkdirSync(dir, { recursive: true });
+  return dir;
+}