feat(dev): copy everything a view shows with shift-y

docs/dev.md

@@ -88,6 +88,8 @@ In an interactive terminal, `nuxt dev` renders a pinned panel: the server URLs,
 | `?`         | Show all shortcuts                            |
 | `q`         | Quit                                          |
 
+Inside a view, `y` copies the selected row and `shift-y` copies every row the filters and search leave, keeping the newest when there is too much to paste. In the info view, `shift-y` copies the [`nuxt info`](/docs/api/commands/info) table instead.
+
 Pass `--no-tui` to stream logs instead, which is also what `NUXT_TUI=plain` does for good. `NUXT_TUI=1` forces the UI on where the environment checks would otherwise turn it off, but never where the output is piped or redirected.
 
 ![nuxt dev with plain output](/capture/output/nuxt-dev-plain-static.svg)

packages/nuxi/src/run.ts

@@ -4,7 +4,7 @@ globalThis.__nuxt_cli__ = globalThis.__nuxt_cli__ || {
   // Programmatic usage fallback
   startTime: Date.now(),
   entry: fileURLToPath(
-    new URL('../../bin/nuxi.mjs', import.meta.url),
+    new URL('../bin/nuxi.mjs', import.meta.url),
   ),
 }
 

packages/nuxt-cli/src/commands/info.ts

@@ -195,6 +195,18 @@ async function resolveDependencyVersion(
     ?? devDependencies[name]
 }
 
+/** Render `nuxt info --json` output as the Markdown table `nuxt info` copies. */
+export function formatJsonAsMarkdownTable(json: Record<string, unknown>): string {
+  const labels = Object.fromEntries(Object.entries(JSON_KEYS).map(([label, key]) => [key, label]))
+  const info: Record<string, string | undefined> = {}
+  for (const [key, value] of Object.entries(json)) {
+    if (labels[key]) {
+      info[labels[key]] = Array.isArray(value) ? value.map(item => `\`${item}\``).join(', ') : (value as string | null) ?? undefined
+    }
+  }
+  return formatMarkdownTable(info)
+}
+
 export function formatMarkdownTable(info: Record<string, string | undefined>): string {
   const entries = Object.entries(info).map(([label, value]) => [label, value || '-'] as const)
   const labelWidth = Math.max(...entries.map(([label]) => label.length + 4))

packages/nuxt-cli/src/dev/tui/help-overlay.ts

@@ -13,6 +13,12 @@ export interface HelpEntry {
   description: string
 }
 
+const VIEW_ENTRIES: HelpEntry[] = [
+  { keys: ['y', 'enter'], description: 'copy the selected line' },
+  { keys: ['Y'], description: 'copy the whole view' },
+  { keys: ['/'], description: 'search' },
+]
+
 /** The keyboard shortcuts, as a view rather than a wall of log output. */
 export class HelpOverlay extends ScreenOverlay {
   #entries: () => HelpEntry[]
@@ -32,10 +38,15 @@ export class HelpOverlay extends ScreenOverlay {
 
   protected renderEntries(): OverlayEntry[] {
     const entries = this.#entries()
-    const width = Math.max(...entries.map(entry => formatKeys(entry).length))
-    return entries.map(entry => ({
+    const width = Math.max(...[...entries, ...VIEW_ENTRIES].map(entry => formatKeys(entry).length))
+    const row = (entry: HelpEntry): OverlayEntry => ({
       lines: [`${styleText('bold', formatKeys(entry).padEnd(width))}   ${styleText(MUTED, entry.description)}`],
-    }))
+    })
+    return [
+      ...entries.map(row),
+      { lines: ['', styleText('bold', 'in a view')] },
+      ...VIEW_ENTRIES.map(row),
+    ]
   }
 
   protected renderHints(columns: number): string {

packages/nuxt-cli/src/dev/tui/index.ts

@@ -31,6 +31,7 @@ import { attachKeys } from './keys'
 import { LOGO_FRAME_MS } from './logo'
 import { LogOverlay } from './overlay'
 import { describeListenURLs, URL_LABELS, URL_STYLES } from './panel'
+import { readProjectReport } from './project-report'
 import { RequestOverlay } from './request-overlay'
 import { RequestLog } from './requests'
 import { RouteOverlay } from './route-overlay'
@@ -140,6 +141,7 @@ export function setupDevUI(context: ShortcutContext, options: DevUIOptions = {})
     write,
     release,
     () => qrCode,
+    () => readProjectReport(cwd),
   )
   const views = [overlay, trafficOverlay, routeOverlay, helpOverlay, infoOverlay]
   const openOverlay = () => views.find(view => view.isOpen)

packages/nuxt-cli/src/dev/tui/info-overlay.ts

@@ -25,12 +25,15 @@ const VALUE_STYLES: Array<{ pattern: RegExp, style: Parameters<typeof styleText>
 export class InfoOverlay extends ScreenOverlay {
   #sections: () => InfoSection[]
   #panel: () => string | undefined
+  #report?: () => Promise<string>
 
   constructor(
     sections: () => InfoSection[],
     write: (chunk: string) => void,
     onClose: () => void,
     panel: () => string | undefined = () => undefined,
+    /** The text `Y` copies in place of the rows. */
+    report?: () => Promise<string>,
   ) {
     super({
       write,
@@ -44,6 +47,15 @@ export class InfoOverlay extends ScreenOverlay {
     })
     this.#sections = sections
     this.#panel = panel
+    this.#report = report
+  }
+
+  protected async copyAllText(): Promise<string | undefined> {
+    if (!this.#report) {
+      return undefined
+    }
+    this.notify('collecting project info…')
+    return this.#report()
   }
 
   protected get closeKeys(): readonly string[] {
@@ -68,13 +80,17 @@ export class InfoOverlay extends ScreenOverlay {
 
     return withSidePanel(rows, this.#panel(), columns).map(line => ({
       lines: [line],
-      // Copying a whole info screen is rarely useful; a single value is.
       copy: stripAnsi(line).trim().split(/\s{2,}/).at(-1),
     }))
   }
 
   protected renderHints(columns: number): string {
-    return formatHints([['q', 'close']], columns)
+    return formatHints([
+      ['↑/↓', 'select'],
+      ['y', 'copy'],
+      ...this.#report ? [['Y', 'copy for an issue'] as [string, string]] : [],
+      ['q', 'close'],
+    ], columns)
   }
 }
 

packages/nuxt-cli/src/dev/tui/overlay.ts

@@ -107,7 +107,8 @@ export class LogOverlay extends ScreenOverlay {
       ['c/b/r', 'cli/build/runtime'],
       ['/', 'search'],
       ['x', 'clear'],
-      ['enter', 'copy'],
+      ['y', 'copy'],
+      ['Y', 'copy all'],
       ['q', 'close'],
     ], columns)
   }

packages/nuxt-cli/src/dev/tui/project-report.ts

@@ -0,0 +1,14 @@
+import { execFile } from 'node:child_process'
+import process from 'node:process'
+import { promisify } from 'node:util'
+
+/** The `nuxt info` table for the project in `cwd`, gathered in a separate process. */
+export async function readProjectReport(cwd: string): Promise<string> {
+  const { stdout } = await promisify(execFile)(
+    process.execPath,
+    [globalThis.__nuxt_cli__!.entry, 'info', '--json', cwd],
+    { cwd, timeout: 30_000 },
+  )
+  const { formatJsonAsMarkdownTable } = await import('../../commands/info')
+  return formatJsonAsMarkdownTable(JSON.parse(stdout))
+}

packages/nuxt-cli/src/dev/tui/request-overlay.ts

@@ -132,7 +132,8 @@ export class RequestOverlay extends ScreenOverlay {
     if (this.#detail) {
       return formatHints([
         ['↑/↓', 'select'],
-        ['enter', 'copy'],
+        ['y', 'copy'],
+        ['Y', 'copy all'],
         ['esc', 'back'],
       ], columns)
     }
@@ -146,6 +147,7 @@ export class RequestOverlay extends ScreenOverlay {
       ['b', 'bundler'],
       ['/', 'search'],
       ['y', 'copy'],
+      ['Y', 'copy all'],
       ['q', 'close'],
     ], columns)
   }

packages/nuxt-cli/src/dev/tui/route-overlay.ts

@@ -108,7 +108,8 @@ export class RouteOverlay extends ScreenOverlay {
       ['s', 'server'],
       ['a', 'all'],
       ['/', 'search'],
-      ['enter', 'copy'],
+      ['y', 'copy'],
+      ['Y', 'copy all'],
       ['q', 'close'],
     ], columns)
   }

packages/nuxt-cli/src/dev/tui/screen.ts

@@ -12,6 +12,9 @@ const RENDER_DELAY_MS = 50
 /** How long a copy confirmation stays in the hint line. */
 const NOTICE_MS = 2000
 
+/** Most characters copying a whole view puts on the clipboard, keeping the newest entries. */
+const COPY_ALL_MAX_CHARS = 60_000
+
 /** Marks the selected entry; the same width is reserved on every row. */
 const SELECTED_GUTTER = '▎ '
 const GUTTER = '  '
@@ -77,6 +80,11 @@ export abstract class ScreenOverlay {
     return false
   }
 
+  /** Text `Y` copies instead of every entry's own. */
+  protected copyAllText(): Promise<string | undefined> | string | undefined {
+    return undefined
+  }
+
   get isOpen(): boolean {
     return this.#open
   }
@@ -160,7 +168,7 @@ export abstract class ScreenOverlay {
         void this.#copySelected()
         return
       case 'y':
-        void this.#copySelected()
+        void (key.sequence === 'Y' ? this.#copyAll() : this.#copySelected())
         return
       default:
         if ((key.name && this.closeKeys.includes(key.name)) || (key.sequence && this.closeKeys.includes(key.sequence))) {
@@ -329,29 +337,57 @@ export abstract class ScreenOverlay {
     const entries = this.#entries()
     const text = this.#selected === undefined ? undefined : entries[this.#selected]?.copy
     if (!text) {
-      this.#notify('nothing selected to copy')
+      this.notify('nothing selected to copy')
       return
     }
+    await this.#copy(text, 'copied')
+  }
+
+  async #copyAll(): Promise<void> {
+    let custom: string | undefined
+    try {
+      custom = await this.copyAllText()
+    }
+    catch {
+      this.notify('could not gather what to copy')
+      return
+    }
+    if (custom) {
+      return this.#copy(custom.slice(0, COPY_ALL_MAX_CHARS), 'copied')
+    }
+    const texts = this.#entries().map(entry => entry.copy).filter(text => !!text) as string[]
+    if (!texts.length) {
+      this.notify('nothing to copy')
+      return
+    }
+    let length = 0
+    let start = texts.length
+    while (start > 0 && length + texts[start - 1]!.length + 1 <= COPY_ALL_MAX_CHARS) {
+      length += texts[--start]!.length + 1
+    }
+    const kept = start === texts.length ? [texts.at(-1)!.slice(0, COPY_ALL_MAX_CHARS)] : texts.slice(start)
+    const count = kept.length === texts.length ? `${kept.length}` : `the last ${kept.length} of ${texts.length}`
+    await this.#copy(kept.join('\n'), `copied ${count} ${texts.length === 1 ? 'entry' : 'entries'}`)
+  }
+
+  async #copy(text: string, done: string): Promise<void> {
     try {
       const { writeText } = await import('tinyclip')
       // What lands on the clipboard is going into an issue or a search box,
       // so it should carry no colour or hyperlink escapes.
       await writeText(stripAnsi(text))
-      this.#notify('copied to clipboard')
+      this.notify(`${done} to clipboard`)
     }
     catch {
-      this.#notify('no clipboard available')
+      this.notify('no clipboard available')
     }
   }
 
-  #notify(text: string): void {
+  /** Replace the hint line with `text` for a moment. */
+  protected notify(text: string): void {
     this.#notice = { text: `  ${text}`, until: Date.now() + NOTICE_MS }
-    this.render()
-    setTimeout(() => {
-      if (this.#open) {
-        this.render()
-      }
-    }, NOTICE_MS + 50).unref?.()
+    this.repaint()
+    setTimeout(() => this.repaint(), NOTICE_MS + 50).unref?.()
   }
 
   #scheduleRender(): void {

packages/nuxt-cli/src/run.ts

@@ -12,7 +12,7 @@ globalThis.__nuxt_cli__ = globalThis.__nuxt_cli__ || {
   // Programmatic usage fallback
   startTime: Date.now(),
   entry: fileURLToPath(
-    new URL('../../bin/nuxi.mjs', import.meta.url),
+    new URL('../bin/nuxi.mjs', import.meta.url),
   ),
   devEntry: fileURLToPath(
     new URL('../dev/index.mjs', import.meta.url),

packages/nuxt-cli/test/unit/commands/info-run.spec.ts

@@ -6,7 +6,7 @@ import { runCommand } from 'citty'
 import { join } from 'pathe'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import info from '../../../src/commands/info'
+import info, { formatJsonAsMarkdownTable } from '../../../src/commands/info'
 import { render, screen } from '../../utils/terminal'
 
 vi.mock('tinyclip', () => ({ writeText: () => Promise.reject(new Error('no clipboard')) }))
@@ -83,6 +83,19 @@ describe('info command', () => {
     expect(payload.modules).toEqual(['./modules/a, b.ts'])
   })
 
+  it('should render `--json` output as the table it prints', async () => {
+    await writeFile(join(cwd, 'package.json'), JSON.stringify({ name: 'app', private: true }))
+    await writeFile(join(cwd, 'nuxt.config.mjs'), `export default { modules: ['@nuxt/image'], app: {} }`)
+
+    const table = formatJsonAsMarkdownTable(await runInfoJSON())
+    vi.restoreAllMocks()
+    const output = await runInfo()
+
+    for (const row of table.trim().split('\n')) {
+      expect(output).toContain(row)
+    }
+  })
+
   it('should still report on a project with no config', async () => {
     await writeFile(join(cwd, 'package.json'), JSON.stringify({ name: 'app', private: true }))