yoyo-pi 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kenx
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# yoyo-pi
+
+<p align="right">
+  <a href="README.md"><img src="https://img.shields.io/badge/Language-English-blue" alt="English"></a>
+  <a href="README.zh-CN.md"><img src="https://img.shields.io/badge/%E8%AF%AD%E8%A8%80-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-brightgreen" alt="简体中文"></a>
+</p>
+
+A polished extension pack for [pi](https://pi.dev) that makes the terminal coding-agent workflow faster, cleaner, and more ergonomic.
+
+This is Kenx's daily pi setup, packaged as a reusable GitHub install: Vim-style prompt editing, custom TUI themes and status bars, Grok-style agent-status variants, right-side file/todo overlays, interactive choice pickers, context snapshots, and a read-only planning mode.
+
+## Highlights
+
+- **Vim prompt editing** — toggle `/vim` for normal/insert/visual-style prompt control, with a status pill and external-editor fallback.
+- **Custom TUI chrome** — switch themes, full-screen background coverage, and eight status bar/input layouts with `/theme`, `/theme-bg`, and `/switch-statusbar`.
+- **Grok-style agent status** — `/switch-agentStatus <1-9|v1-v9>` switches among nine terminal-native thinking/executing/reading/writing readouts with the latest assistant text or latest tool log and current file, while edit/write renderers hide diffs and file contents. Hidden thinking placeholders are suppressed while this UI is enabled.
+- **File tree / todo overlays** — open a right-side file picker with `/filetree` or `Ctrl+Shift+F`; monitor `.plan/*.jsonl` todos with `/todo` or `Ctrl+Shift+T`.
+- **Agent-friendly choice pickers** — `single_choice`, `multiple_choice`, and `choice_questions` give models structured ways to ask users for decisions.
+- **Context snapshots** — `/clear` saves the current branch context, then `/restore <name>` brings it back later.
+- **Plan mode** — `/plan` exposes a sandboxed `plan_agent` that writes implementation plans and todos under `.plan/`, previews the plan before exit, and carries forward only the original prompt plus plan context after approval.
+
+## Preview
+
+### Status bar & input variations
+
+<img src="docs/previews/status-bar.png" alt="Status bar and input variation preview" width="760">
+
+Interactive HTML preview: [open the status bar playground](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-status-bar.html?v=9d4f442).
+
+### Agent status variations
+
+<img src="docs/previews/agent-status.svg" alt="Grok-style agent status variation preview" width="760">
+
+Interactive HTML preview: [open the agent status playground](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v1).
+
+Direct jumps: [V1](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v1) · [V2 phase tag](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v2) · [V3](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v3) · [V4](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v4) · [V5](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v5) · [V6](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v6) · [V7](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v7) · [V8](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v8) · [V9](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v9).
+
+### File tree overlay
+
+<img src="docs/previews/filetree.png" alt="File tree overlay preview" width="260">
+
+### Todo timeline sidebar
+
+<img src="docs/previews/todo-sidebar.png" alt="Todo timeline sidebar preview" width="360">
+
+### Choice pickers
+
+<img src="docs/previews/single-choice.png" alt="Single choice picker preview" width="720">
+
+<img src="docs/previews/multiple-choice.png" alt="Multiple choice picker preview" width="720">
+
+## Install
+
+From npm after publishing:
+
+```bash
+pi install npm:yoyo-pi
+```
+
+Or install directly from GitHub:
+
+```bash
+pi install git:git@github.com:kenxcomp/yoyo-pi.git
+```
+
+Temporary test without installing:
+
+```bash
+pi -e git:git@github.com:kenxcomp/yoyo-pi.git
+```
+
+The unpinned Git URL follows `main` when you run `pi update`. Pin a tag only when you want a reproducible release, for example `git:git@github.com:kenxcomp/yoyo-pi.git@v0.1.4`.
+
+After installing this package, remove or move the old local copies under `~/.pi/agent/extensions/` to avoid duplicate slash commands.
+
+## Commands and tools
+
+| Area | Commands / tools | What it adds |
+| --- | --- | --- |
+| Context snapshots | `/clear`, `/restore <name>` | Save current branch context to `.tmp/<name>.jsonl` and restore it later. |
+| Vim prompt mode | `/vim [on\|off\|status]` | Vim-like modal prompt editor with external-editor fallback. |
+| Choice pickers | `single_choice`, `multiple_choice`, `choice_questions`, `/choice-demo [multi\|questions]` | Inline-pill single select, compact multi-select, and tabbed batched questions. |
+| TUI infrastructure | `/theme <paper\|light\|dark>`, `/theme-bg <true\|false>`, `/filetree`, `Ctrl+Shift+F`, `/switch-statusbar <1-8\|0>` | Themes, optional full-TUI background fill, right-side overlay file picker, and custom statusbar/input UI. Runtime preferences are stored under `~/.pi/agent/state/kenx-infra.json`. |
+| Agent status UI | `/switch-agentStatus <1-9\|v1-v9\|0\|off\|status>` | Nine Grok-style status widgets for thinking/executing/reading/writing plus compact built-in tool renderers. V2 uses a meaningful `[agent]` phase tag instead of a fake step count. See the [HTML playground](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v1) for matching previews. Edit/write show changed file names only; diffs, file contents, and duplicate hidden-thinking placeholders are hidden. Preferences are stored under `~/.pi/agent/state/gr0k-hack.json`. |
+| Plan/todo workflow | `/plan`, `/todo <goal>`, `/todo [show\|off\|status]`, `Ctrl+Shift+T`, `plan_agent` | Read-only plan mode delegates planning to `agents/plan-agent.md`; before exiting it displays the plan and asks whether to execute, shelve, or revise. Approved exits prune active LLM context to the original prompt plus plan handoff; todo mode writes/monitors `.plan/todo.jsonl` and asks the agent to keep statuses updated while executing. |
+
+## Development
+
+This package intentionally lists Pi core packages as optional `peerDependencies` because Pi provides them at runtime.
+
+The `pi.extensions` manifest explicitly lists entrypoints so `extensions/plan-mode/sandbox.ts` is not auto-loaded as a normal extension; it is only loaded by the child plan-agent process.

package/README.zh-CN.md

@@ -0,0 +1,91 @@
+# yoyo-pi
+
+<p align="right">
+  <a href="README.md"><img src="https://img.shields.io/badge/Language-English-blue" alt="English"></a>
+  <a href="README.zh-CN.md"><img src="https://img.shields.io/badge/%E8%AF%AD%E8%A8%80-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-brightgreen" alt="简体中文"></a>
+</p>
+
+一个为 [pi](https://pi.dev) 打磨的扩展包，让终端里的 coding-agent 工作流更快、更清爽，也更顺手。
+
+这是 Kenx 日常使用的 pi 配置，并封装成可复用的 GitHub 安装包：Vim 风格提示词编辑、自定义 TUI 主题和状态栏、Grok 风格 Agent 状态变体、右侧文件/待办覆盖层、交互式选择器、上下文快照，以及只读规划模式。
+
+## 亮点
+
+- **Vim 提示词编辑** — 使用 `/vim` 切换普通/插入/可视风格的提示词控制，包含状态提示和外部编辑器兜底。
+- **自定义 TUI 外观** — 通过 `/theme`、`/theme-bg` 和 `/switch-statusbar` 切换主题、全屏背景覆盖，以及 8 种状态栏/输入框布局。
+- **Grok 风格 Agent 状态** — `/switch-agentStatus <1-9|v1-v9>` 可切换 9 种终端原生的 thinking/executing/reading/writing 状态视图，显示最新 assistant 文本或最新工具日志以及当前文件；edit/write 渲染器会隐藏 diff 和文件内容。启用该 UI 时会隐藏重复的 thinking 占位提示。
+- **文件树 / 待办覆盖层** — 使用 `/filetree` 或 `Ctrl+Shift+F` 打开右侧文件选择器；使用 `/todo` 或 `Ctrl+Shift+T` 监控 `.plan/*.jsonl` 待办。
+- **对 Agent 友好的选择器** — `single_choice`、`multiple_choice` 和 `choice_questions` 让模型可以用结构化方式向用户确认决策。
+- **上下文快照** — `/clear` 保存当前分支上下文，然后用 `/restore <name>` 在之后恢复。
+- **规划模式** — `/plan` 提供沙盒化的 `plan_agent`，用于在 `.plan/` 下编写实现计划和待办；退出前会预览 plan，批准后只把原始 prompt 和 plan 作为后续上下文交接。
+
+## 预览
+
+### 状态栏与输入框变化
+
+<img src="docs/previews/status-bar.png" alt="状态栏与输入框变化预览" width="760">
+
+交互式 HTML 预览：[打开状态栏 playground](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-status-bar.html?v=9d4f442)。
+
+### Agent 状态变化
+
+<img src="docs/previews/agent-status.svg" alt="Grok 风格 Agent 状态变化预览" width="760">
+
+交互式 HTML 预览：[打开 Agent status playground](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v1)。
+
+直接跳转：[V1](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v1) · [V2 phase tag](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v2) · [V3](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v3) · [V4](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v4) · [V5](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v5) · [V6](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v6) · [V7](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v7) · [V8](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v8) · [V9](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v9)。
+
+### 文件树覆盖层
+
+<img src="docs/previews/filetree.png" alt="文件树覆盖层预览" width="260">
+
+### Todo 时间线侧边栏
+
+<img src="docs/previews/todo-sidebar.png" alt="Todo 时间线侧边栏预览" width="360">
+
+### 选择器
+
+<img src="docs/previews/single-choice.png" alt="单选选择器预览" width="720">
+
+<img src="docs/previews/multiple-choice.png" alt="多选选择器预览" width="720">
+
+## 安装
+
+发布到 npm 后可以这样安装：
+
+```bash
+pi install npm:yoyo-pi
+```
+
+也可以继续直接从 GitHub 安装：
+
+```bash
+pi install git:git@github.com:kenxcomp/yoyo-pi.git
+```
+
+不安装的临时测试方式：
+
+```bash
+pi -e git:git@github.com:kenxcomp/yoyo-pi.git
+```
+
+未固定版本的 Git URL 会在你运行 `pi update` 时跟随 `main`。只有在需要可复现版本时才固定 tag，例如 `git:git@github.com:kenxcomp/yoyo-pi.git@v0.1.4`。
+
+安装本包后，请删除或移走 `~/.pi/agent/extensions/` 下旧的本地副本，避免重复注册 slash commands。
+
+## 命令与工具
+
+| 区域 | 命令 / 工具 | 提供能力 |
+| --- | --- | --- |
+| 上下文快照 | `/clear`, `/restore <name>` | 将当前分支上下文保存到 `.tmp/<name>.jsonl`，之后可恢复。 |
+| Vim 提示词模式 | `/vim [on\|off\|status]` | 类 Vim 的模态提示词编辑器，带外部编辑器兜底。 |
+| 选择器 | `single_choice`, `multiple_choice`, `choice_questions`, `/choice-demo [multi\|questions]` | 行内胶囊单选、紧凑多选，以及分 tab 的批量问题。 |
+| TUI 基础设施 | `/theme <paper\|light\|dark>`, `/theme-bg <true\|false>`, `/filetree`, `Ctrl+Shift+F`, `/switch-statusbar <1-8\|0>` | 主题、可选全 TUI 背景填充、右侧文件选择覆盖层，以及自定义状态栏/输入框 UI。运行时偏好存储在 `~/.pi/agent/state/kenx-infra.json`。 |
+| Agent 状态 UI | `/switch-agentStatus <1-9\|v1-v9\|0\|off\|status>` | 9 种 Grok 风格 thinking/executing/reading/writing 状态组件，以及紧凑的内置工具渲染器。V2 使用有意义的 `[agent]` phase tag，不再显示模拟步数。可在 [HTML playground](https://htmlpreview.github.io/?https://github.com/kenxcomp/yoyo-pi/blob/main/docs/previews/pi-tui-agent-status.html?v=gr0k-hack-3#v1) 查看对应预览。edit/write 只显示改动文件名，不显示 diff、文件内容和重复的 hidden-thinking 占位；偏好存储在 `~/.pi/agent/state/gr0k-hack.json`。 |
+| 规划 / Todo 工作流 | `/plan`, `/todo <goal>`, `/todo [show\|off\|status]`, `Ctrl+Shift+T`, `plan_agent` | 只读规划模式会委托 `agents/plan-agent.md` 进行规划；退出前展示 plan，并让用户选择开始执行、先搁置或继续修改。批准退出后，活跃 LLM 上下文会剪裁为原始 prompt + plan 交接；todo 模式会写入/监控 `.plan/todo.jsonl`，并要求 agent 在执行过程中持续更新状态。 |
+
+## 开发
+
+本包有意将 Pi 核心包列为可选 `peerDependencies`，因为 Pi 会在运行时提供它们。
+
+`pi.extensions` manifest 会显式列出入口，因此 `extensions/plan-mode/sandbox.ts` 不会被当作普通扩展自动加载；它只会由子级 plan-agent 进程加载。

package/docs/previews/agent-status.svg

@@ -0,0 +1,83 @@
+<svg width="760" height="560" viewBox="0 0 760 560" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">gr0k-hack agent status variations</title>
+  <desc id="desc">Nine selectable terminal-native agent status variants for pi.</desc>
+  <rect width="760" height="560" rx="18" fill="#1A1916"/>
+  <rect x="30" y="28" width="700" height="504" rx="14" fill="#2E322E" stroke="rgba(236,231,220,0.12)"/>
+  <g font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" font-size="12">
+    <text x="56" y="60" fill="#777768">/switch-agentStatus 1-9 · V1-V9 mirror the HTML playground</text>
+
+    <g transform="translate(56 84)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V1 hairline</text>
+      <text x="14" y="48" fill="#D9B670" font-weight="700"> THINKING ⠋ ✱</text>
+      <text x="14" y="70" fill="#B0B0A5"> planning the refactor...</text>
+      <text x="14" y="92" fill="#8FB4CE"> ↳ .../FilePicker.tsx</text>
+    </g>
+
+    <g transform="translate(280 84)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V2 phase tag</text>
+      <text x="14" y="48" fill="#777768">[agent] <tspan fill="#D89B7E" font-weight="700">EXECUTING</tspan>...</text>
+      <text x="14" y="70" fill="#B0B0A5">❝ applying edit... ❞</text>
+      <text x="14" y="92" fill="#D89B7E">file .../PickerContext.tsx</text>
+    </g>
+
+    <g transform="translate(504 84)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V3 left rail</text>
+      <text x="14" y="48" fill="#8FB4CE">▌ <tspan fill="#ECE7DC" font-weight="700">READING</tspan> ⠋</text>
+      <text x="14" y="70" fill="#8FB4CE">▌ <tspan fill="#B0B0A5">scanning callers...</tspan></text>
+      <text x="14" y="92" fill="#8FB4CE">▌ ↳ .../usePickerState.ts</text>
+    </g>
+
+    <g transform="translate(56 222)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V4 soft card</text>
+      <text x="14" y="45" fill="#777768">╭────────────────────╮</text>
+      <text x="14" y="63" fill="#ECE7DC">│ ⠋ <tspan font-weight="700">WRITING</tspan>...       │</text>
+      <text x="14" y="81" fill="#777768">├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┤</text>
+      <text x="14" y="99" fill="#ADC79A">│ ↳ .../FilePicker.tsx│</text>
+    </g>
+
+    <g transform="translate(280 222)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V5 margin labels</text>
+      <text x="14" y="48" fill="#777768">state     <tspan fill="#D9B670" font-weight="700"> THINKING </tspan> ⠋</text>
+      <text x="14" y="70" fill="#777768">thought   <tspan fill="#B0B0A5">planning...</tspan></text>
+      <text x="14" y="92" fill="#777768">file      <tspan fill="#D9B670">.../FilePicker.tsx</tspan></text>
+    </g>
+
+    <g transform="translate(504 222)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V6 sigil prefix</text>
+      <text x="14" y="48" fill="#777768">:: <tspan fill="#D89B7E">executing</tspan>... turn 7</text>
+      <text x="14" y="70" fill="#777768"> › <tspan fill="#B0B0A5">applying edit...</tspan></text>
+      <text x="14" y="92" fill="#777768"> ⌁ <tspan fill="#D89B7E">.../PickerContext.tsx</tspan></text>
+    </g>
+
+    <g transform="translate(56 360)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V7 split-bar</text>
+      <text x="14" y="46" fill="#777768">╴ <tspan fill="#8FB4CE" font-weight="700"> READING </tspan> turn 7 ╴──</text>
+      <text x="14" y="70" fill="#B0B0A5"> ⠋ scanning callers...</text>
+      <text x="14" y="94" fill="#777768">╴ file <tspan fill="#8FB4CE">.../hooks.ts</tspan> ╴──</text>
+    </g>
+
+    <g transform="translate(280 360)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V8 micro-log</text>
+      <text x="14" y="48" fill="#D9B670">● <tspan fill="#ECE7DC" font-weight="700">thinking</tspan>...</text>
+      <text x="14" y="70" fill="#777768">│  <tspan fill="#B0B0A5">planning the refactor</tspan></text>
+      <text x="14" y="92" fill="#777768">╰─file <tspan fill="#D9B670">.../FilePicker.tsx</tspan></text>
+    </g>
+
+    <g transform="translate(504 360)">
+      <rect width="200" height="118" rx="10" fill="rgba(26,25,22,0.35)" stroke="rgba(236,231,220,0.08)"/>
+      <text x="14" y="22" fill="#D89B7E">V9 stamp head</text>
+      <text x="14" y="48" fill="#D89B7E" font-weight="700"> EXECUTING </text>
+      <text x="92" y="48" fill="#B0B0A5">⠋ applying edit...</text>
+      <text x="14" y="70" fill="#777768">           ─────────────</text>
+      <text x="14" y="92" fill="#777768">           ↳ file <tspan fill="#D89B7E">.../ctx.tsx</tspan></text>
+    </g>
+  </g>
+</svg>