[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81490":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":15,"starSnapshotCount":15,"syncStatus":13,"lastSyncTime":45,"discoverSource":46},81490,"vue-tui","Simon-He95\u002Fvue-tui","Simon-He95","Vue 3 terminal UI toolkit for browser DOM and CLI stdout: components, ANSI rendering, markdown transcripts, log views, and agent consoles.","https:\u002F\u002Fvue-tui.pages.dev\u002F",null,"TypeScript",114,2,1,0,10,38,85,30,88.93,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,5,41],"agent-console","ansi","cli-ui","dom-renderer","log-viewer","markdown","stdout-renderer","terminal","terminal-components","terminal-ui","tui","ui","virtual-list","vue","vue-terminal","vue3","2026-06-12 04:01:34","\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Fdocs\u002Fpublic\u002Fbrand\u002Fvue-tui-logo-on-dark.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\".\u002Fdocs\u002Fpublic\u002Fbrand\u002Fvue-tui-logo-on-light.svg\">\n    \u003Cimg alt=\"Vue TUI\" src=\".\u002Fdocs\u002Fpublic\u002Fbrand\u002Fvue-tui-logo-on-light.svg\" width=\"360\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n# @simon_he\u002Fvue-tui\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@simon_he\u002Fvue-tui)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@simon_he\u002Fvue-tui)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@simon_he\u002Fvue-tui)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@simon_he\u002Fvue-tui)\n[![CI](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\u002Factions\u002Fworkflows\u002Fci.yml)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg)](.\u002Flicense)\n\n[Docs](https:\u002F\u002Fvue-tui.pages.dev\u002F) | [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@simon_he\u002Fvue-tui) | [GitHub](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui) | [Issues](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\u002Fissues)\n\nVue TUI is a Vue 3 terminal UI component library and renderer toolkit for browser-hosted terminal surfaces and real CLI stdout apps. It gives you Vue components, terminal cell rendering, event dispatch, markdown rendering, and high-throughput primitives for lists, logs, and streaming transcripts.\n\nUse it when you want:\n\n- Browser-hosted terminal interfaces, dashboards, demos, and playgrounds.\n- CLI apps that use Vue component composition instead of imperative stdout drawing.\n- Shared UI code that can run against a DOM renderer, a stdout renderer, or headless tests.\n- Large terminal surfaces such as virtual lists, append-only logs, markdown transcripts, and agent console UIs.\n\n## Agent UI Showcase\n\nA real agent console built on `@simon_he\u002Fvue-tui` can stream agent output, markdown content, tool-call status, and input chrome in one terminal surface.\n\n[![Agent console rendering built with vue-tui](.\u002Fdocs\u002Fpublic\u002Fagent-console-rendering-poster.png)](.\u002Fdocs\u002Fpublic\u002Fagent-console-rendering.mp4)\n\n[Watch the rendering demo](.\u002Fdocs\u002Fpublic\u002Fagent-console-rendering.mp4)\n\n## Install\n\n```bash\npnpm add @simon_he\u002Fvue-tui vue\n```\n\nVue is a peer dependency. The current package supports Vue `>=3.3.0 \u003C4`.\n\n## Runtime Support\n\nThe published package supports Node.js `>=16.17` for CLI\u002Fruntime consumers.\n\nDevelopment, release validation, and documentation builds are run on Node.js 20 in CI because the repository toolchain uses modern build\u002Ftest tooling.\n\n## Entry Points\n\n| Import                            | Stability    | Use it for                                                                                                                  |\n| --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------- |\n| `@simon_he\u002Fvue-tui`               | Public       | Browser-safe terminal core, DOM renderer, stable Vue components, and input host plugin factory                              |\n| `@simon_he\u002Fvue-tui\u002Fcore`          | Public       | Terminal core, buffer-facing types, ANSI\u002Ftheme\u002Fpath\u002Fhyperlink helpers                                                       |\n| `@simon_he\u002Fvue-tui\u002Frenderer\u002Fdom`  | Public       | DOM renderer factory and renderer capabilities                                                                              |\n| `@simon_he\u002Fvue-tui\u002Fvue`           | Advanced     | Extended Vue components, composables, router helpers, and Vue runtime internals                                             |\n| `@simon_he\u002Fvue-tui\u002Fruntime`       | Advanced     | Runtime wiring, selection helpers, and clipboard abstraction                                                                |\n| `@simon_he\u002Fvue-tui\u002Fobservability` | Advanced     | Frame perf store, profiler hooks, and trace helpers                                                                         |\n| `@simon_he\u002Fvue-tui\u002Fcli`           | Public       | Node-only headless Vue app runtime, stdin driver, stdout renderer, path provider, recording, and terminal clipboard helpers |\n| `@simon_he\u002Fvue-tui\u002Fmarkdown`      | Public       | `TMarkdownText`, `TVirtualMarkdown`, markdown parser and layout helpers, streaming markdown block sources                   |\n| `@simon_he\u002Fvue-tui\u002Fexperimental`  | Experimental | `TVirtualList`, `TTranscriptView`, `TLogView`, TLog search\u002Flink\u002Fminimap companions, append-only log store, and TLog plugins |\n| `@simon_he\u002Fvue-tui\u002Fagent`         | Experimental | Agent\u002Fconsole transcript, tool-call header, log, markdown, virtual list, render plane, and overlay component aggregation    |\n\nThe stable surface is terminal core, DOM rendering, CLI runtime, basic Vue components, and markdown APIs. High-throughput log, virtualization, and agent\u002Fconsole aggregation APIs stay under `\u002Fexperimental` or `\u002Fagent` until their public surface settles; keep those imports isolated in application code.\n\nDo not deep import from `@simon_he\u002Fvue-tui\u002Fdist\u002F...`; only the entry points above are part of the supported package contract.\n\n### Migration: Node Host Adapter Moved To `\u002Fcli`\n\nNode-specific input host defaults are no longer exported from the browser-safe root entrypoint.\n\nBefore:\n\n```ts\nimport { createDefaultTInputHostAdapter, defaultTInputHostPlugin } from \"@simon_he\u002Fvue-tui\";\n```\n\nAfter:\n\n```ts\nimport { createTInputHostPlugin } from \"@simon_he\u002Fvue-tui\";\nimport { createDefaultTInputHostAdapter, defaultTInputHostPlugin } from \"@simon_he\u002Fvue-tui\u002Fcli\";\n```\n\n### Migration: Root Entry Was Narrowed\n\nThe root entrypoint now keeps only stable browser-safe APIs. Extended Vue components and Vue router\u002Fcomposable helpers move to `@simon_he\u002Fvue-tui\u002Fvue`.\n\n| Before root import | New import              |\n| ------------------ | ----------------------- |\n| `TAnchor`          | `@simon_he\u002Fvue-tui\u002Fvue` |\n| `TFlow`            | `@simon_he\u002Fvue-tui\u002Fvue` |\n| `TInputBox`        | `@simon_he\u002Fvue-tui\u002Fvue` |\n| `TPathPicker`      | `@simon_he\u002Fvue-tui\u002Fvue` |\n| `TJsonEditor`      | `@simon_he\u002Fvue-tui\u002Fvue` |\n| `TRenderPlane`     | `@simon_he\u002Fvue-tui\u002Fvue` |\n| `TRenderLayer`     | `@simon_he\u002Fvue-tui\u002Fvue` |\n| `TTransition`      | `@simon_he\u002Fvue-tui\u002Fvue` |\n| router\u002Fcomposables | `@simon_he\u002Fvue-tui\u002Fvue` |\n| Node host defaults | `@simon_he\u002Fvue-tui\u002Fcli` |\n\nBefore:\n\n```ts\nimport { TAnchor, TFlow } from \"@simon_he\u002Fvue-tui\";\n```\n\nAfter:\n\n```ts\nimport { TAnchor, TFlow } from \"@simon_he\u002Fvue-tui\u002Fvue\";\n```\n\n### Hyperlinks\n\nDOM renderer link rendering is opt-in through `domRendererOptions.links`. Once enabled, DOM anchors allow safe absolute and relative targets such as `https:`, `http:`, `mailto:`, `\u002Fpath`, `.\u002Fpath`, `..\u002Fpath`, `#hash`, and `?q=1`. Link callbacks preserve native browser behavior unless they return `false`.\n\nCLI\u002Fstdout rendering uses OSC8 hyperlinks and keeps a stricter boundary: only safe absolute `https:`, `http:`, and `mailto:` hrefs are emitted by default. `file:` links stay opt-in for terminal-specific providers and lower-level `Style.href` writers.\n\n`TLink` is the public component-level link primitive. It renders DOM-safe `Style.href` metadata for absolute `https:` \u002F `http:` \u002F `mailto:` and relative targets, supports focus, click, keyboard activation, and host-controlled attempted opens through `TerminalProvider.linkOpener` or `createTerminalApp({ linkOpener })`. `TLinkifyText` detects safe URLs in plain text and writes the same href metadata without owning activation. Browser `TerminalProvider` defaults to `window.open`; CLI\u002Fheadless apps must opt in. `TLink` intentionally rejects `file:` URLs; use lower-level `Style.href` writers plus terminal-specific opt-in when exposing file links.\n\n## Browser Usage\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { TerminalProvider, TBox, TInput, TLink, TLinkifyText, TText } from \"@simon_he\u002Fvue-tui\";\n\nconst input = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTerminalProvider :cols=\"80\" :rows=\"24\" :default-style=\"{ fg: 'whiteBright' }\">\n    \u003CTBox :x=\"0\" :y=\"0\" :w=\"80\" :h=\"24\" border title=\"Demo\" :padding=\"1\">\n      \u003CTText :x=\"0\" :y=\"0\" :w=\"78\" value=\"Vue TUI is running\" \u002F>\n      \u003CTLink :x=\"0\" :y=\"2\" href=\"https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\" label=\"Project link\" \u002F>\n      \u003CTLinkifyText :x=\"0\" :y=\"3\" :w=\"78\" value=\"Docs: https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\" \u002F>\n      \u003CTInput :x=\"0\" :y=\"20\" :w=\"78\" v-model=\"input\" placeholder=\"Type...\" \u002F>\n    \u003C\u002FTBox>\n  \u003C\u002FTerminalProvider>\n\u003C\u002Ftemplate>\n```\n\n`TerminalProvider` wires the terminal buffer, DOM renderer, event manager, scheduler, runtime, layout context, and input plugins for browser Vue apps.\n\n## CLI Usage\n\nFor a real terminal, mount a headless Vue app and attach stdout\u002Fstdin:\n\n```ts\nimport {\n  createStdinDriver,\n  createStdoutRenderer,\n  createTerminalApp,\n  installTerminalCleanup,\n  type TerminalCleanupHandle,\n} from \"@simon_he\u002Fvue-tui\u002Fcli\";\nimport App from \".\u002FApp.vue\";\n\nconst app = createTerminalApp({\n  cols: process.stdout.columns || 80,\n  rows: process.stdout.rows || 24,\n  component: App as any,\n  defaultStyle: { fg: \"whiteBright\" },\n});\n\napp.mount();\n\nconst renderer = createStdoutRenderer(app.terminal, {\n  output: process.stdout,\n  hideCursor: true,\n  colorMode: \"auto\",\n  allowFileUrls: true,\n});\n\napp.scheduler.flush();\n\nlet driver: ReturnType\u003Ctypeof createStdinDriver> | null = null;\nlet terminalCleanup: TerminalCleanupHandle | null = null;\nlet disposed = false;\n\nconst cleanup = () => {\n  if (disposed) return;\n  disposed = true;\n  terminalCleanup?.uninstall();\n  driver?.dispose();\n  renderer.dispose();\n  app.dispose();\n};\n\nconst exit = () => {\n  cleanup();\n  process.exit(0);\n};\n\nterminalCleanup = installTerminalCleanup(cleanup, {\n  signalPolicy: \"reraise\",\n  cleanupOnUnhandledRejection: false,\n});\ndriver = createStdinDriver({\n  dispatch(event) {\n    const prevented = app.events.dispatch(event);\n    app.scheduler.flush();\n    return prevented;\n  },\n  enableMouse: true,\n  onExit: exit,\n});\n```\n\nSignal cleanup restores terminal state first. `installTerminalCleanup()` returns a cleanup handle: call `handle.uninstall()` to remove process listeners without disposing the app, or `handle.cleanup()` to run cleanup manually. By default, signal handling uses `signalPolicy: \"reraise\"`: the helper cleans up, removes its own listeners, and re-sends the original signal when no other listener owns that signal. If the host process has other listeners for the same signal, those listeners keep ownership of termination. Set `signalPolicy: \"cleanup-only\"` only when the host explicitly owns termination, or `signalPolicy: \"exit\"` when vue-tui should exit with the conventional signal exit code after cleanup.\n\nUnhandled promise rejections stay host-owned by default. Setting `cleanupOnUnhandledRejection: true` cleans up and rethrows by default. Set `rethrowUnhandledRejection: false` only when the host explicitly wants to suppress the rejection.\n\n## Core Concepts\n\n- `createTerminal({ cols, rows })` owns the cell buffer, cursor, planes, scrollback, and commit events.\n- `createDomRenderer(terminal, container)` renders terminal cells to DOM with row caching and fast paths for plain and styled rows.\n- `createStdoutRenderer(terminal, options)` emits ANSI output for real terminal UIs from `\u002Fcli`.\n- `TerminalProvider` is the browser-facing Vue runtime provider.\n- `createTerminalApp()` is the headless runtime for CLI apps and deterministic tests.\n- `TRenderPlane` separates transcript, chrome, input, and overlay surfaces so small updates do not repaint large panes.\n\n## Components\n\n| Area           | Import                           | Components \u002F APIs                                                                                                                                                          |\n| -------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Stable layout  | `@simon_he\u002Fvue-tui`              | `TBox`, `TView`                                                                                                                                                            |\n| Stable text    | `@simon_he\u002Fvue-tui`              | `TText`, `TLink`, `TLinkifyText`                                                                                                                                           |\n| Stable input   | `@simon_he\u002Fvue-tui`              | `TInput`, `TList`, `TSelect`                                                                                                                                               |\n| Stable overlay | `@simon_he\u002Fvue-tui`              | `TDialog`                                                                                                                                                                  |\n| Vue extended   | `@simon_he\u002Fvue-tui\u002Fvue`          | `TAnchor`, `TFlow`, `TRenderPlane`, `TRenderLayer`, `TTransition`, `TInputBox`, `TPathPicker`, `TJsonEditor`, `TMultilineModal`, `TDebugOverlay`, composables, router APIs |\n| Markdown       | `@simon_he\u002Fvue-tui\u002Fmarkdown`     | `TMarkdownText`, `TVirtualMarkdown`                                                                                                                                        |\n| Experimental   | `@simon_he\u002Fvue-tui\u002Fexperimental` | `TVirtualList`, `TTranscriptView`, `TLogView`, `TLogSearchBar`, `TLogLinksPanel`, `TLogScrollbar`, `TLogMinimap`                                                           |\n| Agent console  | `@simon_he\u002Fvue-tui\u002Fagent`        | `TAgentTranscript`, `TToolCallView`, `TToolLogView`, `TVirtualMarkdown`, `TVirtualList`, `TRenderPlane`                                                                    |\n| Runtime        | `@simon_he\u002Fvue-tui\u002Fruntime`      | runtime, event, and selection APIs                                                                                                                                         |\n| CLI            | `@simon_he\u002Fvue-tui\u002Fcli`          | `createTerminalApp`, `createStdoutRenderer`, `createStdinDriver`, Node host adapters                                                                                       |\n\nThis table is a category overview. The generated API reference for root, `\u002Fvue`, and `\u002Fexperimental` components lives in [docs\u002Fgenerated\u002Fcomponents-api.md](.\u002Fdocs\u002Fgenerated\u002Fcomponents-api.md) for humans and [docs\u002Fgenerated\u002Fapi-manifest.json](.\u002Fdocs\u002Fgenerated\u002Fapi-manifest.json) for CI, release checks, and README\u002Fdocs drift checks; the manifest also tracks package entrypoint exports.\n\n## Documentation\n\n| Page                                                               | Purpose                                                              |\n| ------------------------------------------------------------------ | -------------------------------------------------------------------- |\n| [Docs home](.\u002Fdocs\u002Findex.md)                                       | Product overview and reading path                                    |\n| [Examples index](.\u002Fdocs\u002Fexamples.md)                               | Browser, terminal, and smoke example commands                        |\n| [Core API](.\u002Fdocs\u002Fapi.md)                                          | Terminal, renderer, events, runtime, planes, and scheduler contracts |\n| [Terminal UI best practices](.\u002Fdocs\u002Fterminal-ui-best-practices.md) | Cell layout, input focus, render invalidation, transcripts, tests    |\n| [Performance](.\u002Fdocs\u002Fperformance.md)                               | Practical performance guidance                                       |\n| [Benchmarks](.\u002Fdocs\u002Fbenchmarks.md)                                 | Release benchmark budgets, sample results, and comparison boundaries |\n| [OpenTUI Solid comparison](.\u002Fdocs\u002Fcompare-opentui-solid.md)        | Same-scenario comparison protocol and public claim boundaries        |\n| [High-throughput rendering](.\u002Fdocs\u002Fhigh-throughput-rendering.md)   | Scheduler, dirty rows, mailbox, log, and renderer architecture       |\n| [Component acceptance](.\u002Fdocs\u002Fcomponents-acceptance.md)            | Release readiness checks for component API and behavior              |\n| [Agent Console](.\u002Fdocs\u002Fagent-console.md)                           | Streaming transcript example stack                                   |\n| [Release candidate](.\u002Fdocs\u002Frelease-candidate.md)                   | 1.0 RC validation, package export checks, and migration notes        |\n| [Security policy](.\u002FSECURITY.md)                                   | Vulnerability reporting and terminal permission boundaries           |\n\nRun the docs locally:\n\n```bash\npnpm run docs:dev\npnpm run docs:build\n```\n\n## Examples\n\n```bash\npnpm -C examples\u002Fbasic dev\npnpm run build:examples\npnpm run build:examples:terminal\npnpm run run:basic:terminal\npnpm run run:agent-console:terminal\npnpm run example:tlog-view-lab\npnpm run example:agent-console\npnpm run example:agent-console:smoke\npnpm run example:agent-console:terminal:smoke\n```\n\nThe smoke commands are deterministic and avoid real LLM APIs, real TTY dependencies, and timing-only pass\u002Ffail gates.\n\n## Performance Notes\n\n- Use `TVirtualList` instead of rendering thousands of row components.\n- Use `TLogView` with `createAppendOnlyLogStore({ maxLines })` for retained streaming logs.\n- Provide stable line keys for custom `TLogView` sources; mutable rows should change keys or call the explicit invalidation APIs.\n- Split high-volume content and frequently changing chrome into different `TRenderPlane`s.\n- Style objects are treated as immutable. Reuse stable style objects on hot paths, but pass a new object when a style changes.\n\nUseful checks:\n\n```bash\npnpm run bench:dom-renderer\npnpm run bench:scroll-mailbox\npnpm run bench:phase2\n```\n\n## Issues And Feedback\n\n- Report bugs: [new bug report](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\u002Fissues\u002Fnew?template=bug_report.yml)\n- Request features: [new feature request](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\u002Fissues\u002Fnew?template=feature_request.yml)\n- Report documentation issues: [new docs issue](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\u002Fissues\u002Fnew?template=docs.yml)\n- Report vulnerabilities privately: [Security policy](.\u002FSECURITY.md)\n- Browse existing issues: [GitHub issues](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvue-tui\u002Fissues)\n\nFor renderer, scheduler, or terminal behavior bugs, include the renderer target (`DOM`, `stdout`, or headless), the relevant command, and a minimal reproduction when possible.\n\n## Development\n\nUse Node.js 20 for repository development, release validation, and documentation builds. This is a toolchain requirement, not the runtime requirement for the published package.\n\n```bash\npnpm install\npnpm run format:check\npnpm run lint\npnpm run typecheck\npnpm run test\npnpm run build\n```\n\nRelease validation:\n\n```bash\npnpm run release:dry-run\n```\n\n`release:dry-run` runs checks, tests, docs build, benchmarks, examples smoke, and packed package install smoke.\n`release:ci` aliases `release:dry-run` for validation-only CI usage. The GitHub Release workflow is preferred because it publishes the already-verified tarball with npm provenance. If workflow token\u002Fprovenance is unavailable, `release:local:dry-run` and `release:local` publish the locally verified tarball with the `rc` dist-tag. `release` and `release:workflow-only` intentionally fail to avoid accidental direct publishing.\n\n## Package Notes\n\n- The published package ships `dist` only.\n- Root, core, runtime, DOM renderer, observability, Vue, CLI, markdown, experimental, and agent entrypoints are available as ESM, CJS, and type declarations after build.\n- The root browser\u002Fcore API does not require a Node runtime, but CLI usage expects a Node-like stdout\u002Fstdin environment.\n- Terminal emoji and East Asian width behavior still depends on the user terminal and font.\n\n## License\n\n[MIT](.\u002Flicense)\n","Vue TUI 是一个基于 Vue 3 的终端 UI 组件库和渲染工具包，支持在浏览器中创建终端界面以及CLI应用的stdout输出。其核心功能包括Vue组件、终端单元渲染、事件分发、Markdown渲染及适用于列表、日志和流式转录的大吞吐量原语。该项目采用TypeScript编写，提供了丰富的终端UI组件，适用于构建浏览器托管的终端界面（如仪表板、演示和实验环境）、使用Vue组件组合而非命令式stdout绘制的CLI应用程序，以及需要跨DOM渲染器、stdout渲染器或无头测试共享UI代码的场景。此外，它还特别适合于需要处理大量数据展示的终端表面，比如虚拟列表、追加日志、Markdown转录本和代理控制台UI等。","2026-06-11 04:05:15","CREATED_QUERY"]