npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

pi-grok-tui

v0.2.1

Published

Grok-styled theme and TUI chrome for the pi coding agent: framed logo header with a real startup animation, single-line footer, square editor frame.

Readme

pi-grok-tui

pi 的一套 Grok 风格外观——主题管颜色,扩展管布局。

English

┌─ pi v0.84.2 ───────────────────────────────────────────────────────────────┐
│                                         Welcome                            │
│      █████████                          Ask pi anything                    │
│      ███   ███                          ──────────                         │
│      ██████   ███                       Commands 7                         │
│      ███      ███                       /review                            │
│                                         /changelog                         │
│      Let's build something great        /grok-tui                          │
│      DeepSeek Chat · high               /compact                           │
│      ~/Projects/pi-grok-tui             /help for all                      │
└────────────────────────────────────────────────────────────────────────────┘

~/Projects/pi-grok-tui | DeepSeek Chat | high | 18k/128k · 86% left

这是什么

一起装进来的两半。

主题是那套配色,深浅各一份。扩展重画 pi 交给扩展的那部分界面:带框的两栏 header,启动动画真的会播;单行 footer;闭合的编辑器边框;不上下浮动的 spinner;带秒数和输出 token 的 working 行。工具输出默认折叠。

从零写的,只用 pi 的公开 API(setHeader / setFooter / setEditorComponent),没有 fork 也没有打补丁。这套 API 够不到的地方仍归 pi:消息流、工具框、语法高亮。主题能给它们换颜色,换不了结构。

安装

pi install npm:pi-grok-tui

然后在 /settings 里选主题,或者写进 ~/.pi/agent/settings.json

{ "theme": "grok" }

重启 pi。/grok-tui 会打印当前解析到的配置,背后的文件是 ~/.pi/agent/grok-tui.json,界面的每个部件都能在那里单独关掉。

两件值得知道的事。setHeadersetFootersetEditorComponent 各只有一个槽位,最后加载的扩展赢,所以同时装了别的改界面的扩展就得二选一。另外,比起装它,你要是更想改它——克隆仓库跑 ./install.sh,主题走软链、扩展按路径注册,改完就地生效。

设计

强调色是白。 层次靠灰阶,不靠色相。彩色留给有语义的东西——footer 里唯一让颜色回来的地方是上下文那段,快满时转琥珀,再满转红。

给能据以行动的数字。 footer 写的是 18k/128k · 86% left,不是光一个百分比。同样是剩 20%,128k 的窗口只剩 25k,1M 的窗口还有 200k,而你据以决定要不要 compact 的是绝对值。

不许浮动。 pi 原生 spinner 是两个亮点在 2×4 的 braille 点阵里绕圈,字形重心每帧移动约字号的 21%——转起来相对旁边的文字明显在飘。这里改成八点亮七点、转的是那个缺口:还是同一个 braille 字格,包围盒恒定,抖动归零。

动画会播。 logo 有 22 帧的启动编排,pi-open-tui 把数据带上了却从没播过——只有最后一帧被画出来。这里让它播,每次会话一遍,换成灰阶。

属于终端的还给终端。 画布颜色和字体属于你的终端模拟器,不属于主题;光标也交回终端自己画,这样它尊重你的 cursor-style。深色配色是照着 Ghostty 的 Grok 主题校的,所以 pi 和同一个窗口里的 lsgitvim 是一套颜色。你的终端主题不同就得重校——不变的是三条:强调色是白,层次靠灰阶,彩色只在有语义时出现。

致谢

logo 的网格坐标和 22 帧编排来自 pi-open-tui(MIT),它又源自 pi 官方安装脚本里的标记。tagline 那句话也是从它的 header 继承来的。

MIT,见 LICENSE