@phenx-inc/ctlsurf 0.3.16 → 0.4.0

package/src/renderer/App.tsx

@@ -71,6 +71,7 @@ declare global {
       getVersion: () => Promise<string>
       getUpdateInfo: () => Promise<UpdateInfo>
       onUpdateInfo: (callback: (info: UpdateInfo) => void) => () => void
+      copyEmailTable: (html: string, text: string) => Promise<{ ok: boolean }>
     }
   }
 }

package/src/renderer/components/TerminalPanel.tsx

@@ -1,8 +1,26 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Terminal } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import { WebLinksAddon } from '@xterm/addon-web-links'
 import '@xterm/xterm/css/xterm.css'
+import { convertToEmailTable } from '../lib/tableToHtml'
+
+// Convert the terminal's current selection into a rich HTML table on the
+// clipboard. Broadcasts an `email-table-result` event so the active panel can
+// show a toast. Reused by both the hotkey and the right-click menu.
+function copySelectionAsEmailTable(terminal: Terminal): void {
+  const result = convertToEmailTable(terminal.getSelection())
+  if (result) {
+    window.worker.copyEmailTable(result.html, result.text)
+  }
+  window.dispatchEvent(
+    new CustomEvent('email-table-result', {
+      detail: result
+        ? { ok: true, message: `Copied ${result.rows}×${result.cols} table to clipboard` }
+        : { ok: false, message: 'No table found in selection' },
+    })
+  )
+}
 
 interface AgentConfig {
   id: string
@@ -53,6 +71,9 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
 
   const terminal = new Terminal({
     cursorBlink: true,
+    // Off by default on macOS; without this a right-click would reselect the
+    // word under the cursor and clobber a multi-line table selection.
+    rightClickSelectsWord: false,
     fontSize: 14,
     fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace",
     theme: {
@@ -86,6 +107,18 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
   terminal.loadAddon(fitAddon)
   terminal.loadAddon(new WebLinksAddon())
 
+  // ⌘/Ctrl+Shift+E → convert the current selection to an email table. Handled
+  // here (not as a DOM listener) so it works even while a mouse-tracking TUI
+  // is running, where right-click is forwarded to the program instead.
+  terminal.attachCustomKeyEventHandler((e) => {
+    if (e.type !== 'keydown') return true
+    const isCombo = (e.metaKey || e.ctrlKey) && e.shiftKey && e.code === 'KeyE'
+    if (!isCombo) return true
+    e.preventDefault()
+    copySelectionAsEmailTable(terminal)
+    return false // consume — don't forward to the pty
+  })
+
   const state = {
     terminal,
     fitAddon,
@@ -140,6 +173,56 @@ export function destroyTerminal(tabId: string): void {
 
 export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: TerminalPanelProps) {
   const containerRef = useRef<HTMLDivElement>(null)
+  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null)
+  const [toast, setToast] = useState<string | null>(null)
+
+  // Right-click → offer "Copy as email table", but only when the current
+  // selection actually parses as a table; otherwise fall through to default.
+  const handleContextMenu = (e: React.MouseEvent) => {
+    const sel = _terminals.get(tabId)?.terminal.getSelection() ?? ''
+    if (!convertToEmailTable(sel)) return
+    e.preventDefault()
+    setMenu({ x: e.clientX, y: e.clientY })
+  }
+
+  const runConvert = () => {
+    const term = _terminals.get(tabId)?.terminal
+    if (term) copySelectionAsEmailTable(term)
+    setMenu(null)
+  }
+
+  // Show a transient toast when a conversion happens (hotkey or menu).
+  useEffect(() => {
+    const onResult = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { ok: boolean; message: string } | null
+      if (detail) setToast(detail.message)
+    }
+    window.addEventListener('email-table-result', onResult)
+    return () => window.removeEventListener('email-table-result', onResult)
+  }, [])
+
+  useEffect(() => {
+    if (!toast) return
+    const t = setTimeout(() => setToast(null), 2200)
+    return () => clearTimeout(t)
+  }, [toast])
+
+  // Dismiss the context menu on click-away, scroll, blur, or Escape.
+  useEffect(() => {
+    if (!menu) return
+    const close = () => setMenu(null)
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') close() }
+    window.addEventListener('click', close)
+    window.addEventListener('blur', close)
+    window.addEventListener('wheel', close, { passive: true })
+    document.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('click', close)
+      window.removeEventListener('blur', close)
+      window.removeEventListener('wheel', close)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [menu])
 
   // Attach terminal to DOM container
   useEffect(() => {
@@ -233,6 +316,16 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
   }, [isActive, tabId])
 
   return (
-    <div className="terminal-container" ref={containerRef} />
+    <>
+      <div className="terminal-container" ref={containerRef} onContextMenu={handleContextMenu} />
+      {menu && (
+        <div className="term-context-menu" style={{ position: 'fixed', left: menu.x, top: menu.y }}>
+          <button type="button" onMouseDown={(e) => { e.preventDefault(); runConvert() }}>
+            Copy as email table
+          </button>
+        </div>
+      )}
+      {toast && <div className="term-toast">{toast}</div>}
+    </>
   )
 }

package/src/renderer/lib/tableToHtml.ts

@@ -0,0 +1,146 @@
+// Converts a terminal box-drawing or markdown table (e.g. a selection copied
+// from the terminal) into an inline-styled HTML table that survives a paste
+// into an email client, plus a plain-text fallback.
+//
+// Ported from the standalone "console-to-email-table" app. Pure & dependency
+// free so it can run directly in the renderer.
+
+export interface ParsedTable {
+  rows: string[][]
+  hasHeader: boolean
+}
+
+export interface EmailTable {
+  html: string
+  text: string
+  rows: number
+  cols: number
+}
+
+// Vertical cell separators: box-drawing verticals + ASCII pipe.
+const VERTICAL = /[│┃┆┇┊┋|]/
+// Any box-drawing glyph (U+2500–U+257F): lines, corners, junctions.
+const BOX_CHARS = /[─-╿]/g
+
+// ESC-initiated ANSI/VT sequences (color/SGR, cursor moves) from terminals.
+const ANSI = /\x1B(?:\[[0-9;?]*[ -\/]*[@-~]|[@-_])/g
+// Zero-width space/joiners, word joiner, BOM — invisible paste gunk.
+const INVISIBLE = /[​-‍⁠]/g
+// Non-breaking / unusual spaces → normalize to a plain space.
+const ODD_SPACE = /[  -   　]/g
+
+function cleanInput(input: string): string {
+  return input.replace(ANSI, '').replace(INVISIBLE, '').replace(ODD_SPACE, ' ')
+}
+
+function splitRow(line: string): string[] {
+  const parts = line.split(VERTICAL).map((c) => c.trim())
+  if (parts.length && parts[0] === '') parts.shift()
+  if (parts.length && parts[parts.length - 1] === '') parts.pop()
+  return parts
+}
+
+function isBorderLine(line: string): boolean {
+  return line.replace(BOX_CHARS, '').trim() === ''
+}
+
+function isMarkdownSeparator(line: string): boolean {
+  return /-/.test(line) && /^[\s|:\-]+$/.test(line.trim())
+}
+
+function looksLikeBox(input: string): boolean {
+  return /[─-╿]/.test(input)
+}
+
+function normalizeWidth(rows: string[][]): string[][] {
+  const cols = rows.reduce((m, r) => Math.max(m, r.length), 0)
+  return rows.map((r) => {
+    const copy = r.slice()
+    while (copy.length < cols) copy.push('')
+    return copy
+  })
+}
+
+function parseBox(lines: string[]): ParsedTable {
+  const rows: string[][] = []
+  for (const line of lines) {
+    if (line.trim() === '') continue
+    if (isBorderLine(line)) continue
+    if (!VERTICAL.test(line)) continue
+    rows.push(splitRow(line))
+  }
+  return { rows: normalizeWidth(rows), hasHeader: rows.length > 1 }
+}
+
+function parseMarkdown(lines: string[]): ParsedTable {
+  const rows: string[][] = []
+  let separatorIndex = -1
+  for (const line of lines) {
+    if (line.trim() === '') continue
+    if (!line.includes('|') && !isMarkdownSeparator(line)) continue
+    if (isMarkdownSeparator(line)) {
+      separatorIndex = rows.length
+      continue
+    }
+    rows.push(splitRow(line))
+  }
+  return {
+    rows: normalizeWidth(rows),
+    hasHeader: separatorIndex === 1 || (separatorIndex === -1 && rows.length > 1),
+  }
+}
+
+export function parseTable(input: string): ParsedTable {
+  if (!input || !input.trim()) return { rows: [], hasHeader: false }
+  const cleaned = cleanInput(input)
+  const lines = cleaned.replace(/\r\n?/g, '\n').split('\n')
+  if (looksLikeBox(cleaned)) return parseBox(lines)
+  if (cleaned.includes('|')) return parseMarkdown(lines)
+  return parseBox(lines)
+}
+
+// ─── HTML rendering (inline styles only — email clients strip <style>) ───
+
+const TABLE_STYLE =
+  'border-collapse:collapse;border:1px solid #d0d7de;' +
+  'font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;' +
+  'font-size:14px;color:#1f2328;'
+const TH_STYLE =
+  'border:1px solid #d0d7de;padding:8px 12px;text-align:left;' +
+  'background:#f0f3f6;font-weight:600;'
+const TD_STYLE = 'border:1px solid #d0d7de;padding:8px 12px;text-align:left;vertical-align:top;'
+
+function escapeHtml(s: string): string {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function buildHtml(rows: string[][], hasHeader: boolean): string {
+  const out: string[] = ['<table cellspacing="0" cellpadding="0" style="' + TABLE_STYLE + '">']
+  rows.forEach((row, i) => {
+    const isHeader = hasHeader && i === 0
+    const tag = isHeader ? 'th' : 'td'
+    const style = isHeader ? TH_STYLE : TD_STYLE
+    out.push('<tr>')
+    for (const cell of row) {
+      out.push('<' + tag + ' style="' + style + '">' + escapeHtml(cell) + '</' + tag + '>')
+    }
+    out.push('</tr>')
+  })
+  out.push('</table>')
+  return out.join('')
+}
+
+/**
+ * Parse a raw terminal/markdown table selection and produce an email-ready
+ * HTML table plus plain-text fallback. Returns null if no table is detected.
+ */
+export function convertToEmailTable(raw: string): EmailTable | null {
+  const { rows, hasHeader } = parseTable(raw)
+  if (!rows.length || rows[0].length < 2) return null
+  return {
+    html: buildHtml(rows, hasHeader),
+    text: rows.map((r) => r.join('\t')).join('\n'),
+    rows: rows.length,
+    cols: rows[0].length,
+  }
+}

package/src/renderer/styles.css

@@ -1431,3 +1431,43 @@ html, body, #root {
   padding: 2px 8px;
   flex-shrink: 0;
 }
+
+/* ─── Terminal "Copy as email table" context menu + toast ─── */
+.term-context-menu {
+  z-index: 1000;
+  background: #1f2335;
+  border: 1px solid #414868;
+  border-radius: 6px;
+  padding: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  min-width: 180px;
+}
+.term-context-menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #c0caf5;
+  font-size: 13px;
+  padding: 7px 10px;
+  cursor: pointer;
+}
+.term-context-menu button:hover {
+  background: #2a2b3d;
+}
+.term-toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+  background: #1f2335;
+  border: 1px solid #7aa2f7;
+  color: #c0caf5;
+  font-size: 13px;
+  padding: 9px 14px;
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+}