dsh-packycode-api 1.2.5 → 1.2.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 1.2.7
+
+- **Image keys can be renamed.** Settings → PackyCode → Image generation and editing gains the same **Rename** action as conversation keys, through a new `images/keys/rename` endpoint on the image key ring (`packycode-api/image-keys`). Both cards share one rename form: the name becomes a text field, Enter or **Save** stores it, Escape or **Cancel** keeps the old one, and only the key id and the new label reach the host.
+- **One quota hover for both key rings.** The PackyCode quota beside the model picker now uses the same component as the image-key quota: the help cursor marks it, and hovering or focusing it shows the same lines — which quota it is, the current key, its account, remaining, used and total quota, and when it was read or that the last read failed. The composer figure's details open leftward so they stay inside the composer.
+- **Registration invite in Settings.** While no conversation key is stored, **Accounts and keys** shows PackyCode's registration invite link (`https://www.packyapi.ai/register?aff=Im3l`) under the empty-state note. It is a new-window link, which DSH desktop hands to the system browser (a web profile opens a tab). It appears only after the host has answered the status read and disappears as soon as any key is stored.
+- **README: install with an exact version.** The Plugins page's install prompt shows the newest npm version, but DSH's bundled pnpm 11 resolves a bare `dsh-packycode-api` to the newest version published at least 24 hours ago (`minimumReleaseAge`). During the 1.1.x/1.2.x release burst a first install therefore landed on 1.1.1 or 1.1.5, whose settings channel needed a DSH restart and answered every call with HTTP 405 until then. The install guide now always enters `dsh-packycode-api@<version>` (pnpm then adds it to `minimumReleaseAgeExclude` itself), the FAQ explains the 405 symptom with a version check and the recovery, and the README links the registration invite for readers without a key.
+- Validation, 2026-10-15: 422 offline tests (6 new for key rename and the shared quota hover, 4 for the invite), both rebuilt bundles and the versioned tarball. The first-install 405 was reproduced against the DSH 0.2.0-rc.2 runtime in an isolated `DSH_HOME`: a Plugins-page install of the bare name prompted 1.2.6, installed 1.1.5 and answered HTTP 405 until restart, while `dsh-packycode-api@1.2.6` installed 1.2.6 and answered at once. A browser replay of the built settings page showed the invite in light and dark themes and no invite with a stored key. No DSH restart, paid request or live gateway call.
+
+## 1.2.6
+
+- Clicking black space around a large image now closes the preview, including the canvas inside the full-size dialog. The image hit area fits its actual displayed dimensions instead of covering letterboxing; image clicks, download controls and error notices keep the viewer open.
+- Added a regression for canvas/dialog whitespace and nested button icons. Browser verification reproduced the old no-op on the black image margin, then confirmed the same click dismisses the updated viewer and restores focus, while clicking the image keeps it open.
+- Validation, 2026-10-15: 412 tests, both rebuilt bundles and the versioned tarball. No paid image request or DSH restart was needed.
+
 ## 1.2.5
 
 - Fixed generated-image clicks doing nothing in DSH desktop. The optional `nativeImageViewer` service is absent in the current desktop build, and its popup policy denies the previous `window.open(blob:...)` fallback. PackyCode now owns an in-app large-image overlay shared by main-chat and tool-detail results, with Escape/close, focus restoration and viewport fitting.

package/README.en.md

@@ -41,23 +41,25 @@ The `PackyCode` model group ships with the plugin. No YAML edits and no separate
 
 ## Install
 
-You need **DeepSeek Harness** and a **PackyCode (PackyAPI) API key**. For DSH setup, see the [official instructions](https://github.com/deepseek-ai/deepseek-harness#run).
+You need **DeepSeek Harness** and a **PackyCode (PackyAPI) API key**. For DSH setup, see the [official instructions](https://github.com/deepseek-ai/deepseek-harness#run). No API key yet? You can register with PackyCode and apply for one through [this invite link](https://www.packyapi.ai/register?aff=Im3l).
 
 ### 1. Install the plugin
 
-Open the desktop application's **Plugins** page, click **Add plugin**, and enter this as the **package name or address**:
+Open the desktop application's **Plugins** page, click **Add plugin**, and enter the package name **with a version** as the **package name or address**:
 
 ```text
-dsh-packycode-api
+dsh-packycode-api@1.2.7
 ```
 
-Choose the **official** install source, then click **Install**. To pin a version, enter `dsh-packycode-api@1.2.5`.
+Choose the **official** install source, then click **Install**. `1.2.7` was the latest release when this was written; the [npm page](https://www.npmjs.com/package/dsh-packycode-api) shows the current one.
 
-A **first install requires no DSH restart**: open **Settings → PackyCode** and add a key immediately. When updating an already loaded older version, follow the restart guidance in the **Plugin version** card.
+> **Always include the version.** With a bare `dsh-packycode-api`, the install prompt shows the newest version on npm, but DSH's bundled pnpm by default installs only versions published at least 24 hours ago, so you can end up several releases behind with no sign of it in the prompt. With an exact version, pnpm installs that version and adds it to the profile's `minimumReleaseAgeExclude` itself. Afterwards, check **Current version** under **Settings → PackyCode → Plugin version**.
+
+A **first install requires no DSH restart**: open **Settings → PackyCode** and add a key immediately. This holds from 1.1.7 on; earlier versions need one restart after a first install, see the FAQ. When updating an already loaded older version, follow the restart guidance in the **Plugin version** card.
 
 ### 2. Add a key
 
-Open **Settings → PackyCode**. Paste the API key under **Add a key**. A label is optional and only distinguishes keys. Click **Add**.
+Open **Settings → PackyCode**. Paste the API key under **Add a key**. A label is optional and only distinguishes keys. Click **Add**. Until a key has been added, **Accounts and keys** shows the same registration invite link, which opens in the system browser; it disappears once a key is stored.
 
 > Do not paste a key into a public issue, chat, or screenshot. The plugin does not read `PACKY_CODE_API_KEY` from the environment, and it does not silently switch to another provider when a request fails.
 
@@ -70,7 +72,7 @@ Choose a model from the `PackyCode` group. `deepseek-flash`, `gpt-6.1-sol`, `gpt
 
 The **Plugins** page shows the installed state and version, and is also where you enable, disable, or uninstall.
 
-**For non-desktop profiles only:** `dsh plugin --profile <name> add dsh-packycode-api@1.2.5`. Do not use it for `desktop` — the CLI refuses it (`profile "desktop" is managed exclusively by the Electron application`).
+**For non-desktop profiles only:** `dsh plugin --profile <name> add dsh-packycode-api@1.2.7`. Do not use it for `desktop` — the CLI refuses it (`profile "desktop" is managed exclusively by the Electron application`).
 
 For a local checkout, keep the `link:` prefix: `dsh plugin --profile <name> add link:/path/to/dsh-packycode-api`. **Do not pass a bare path or `file:`** — that install copies the whole checkout, `node_modules` included, into the profile, where it then shadows the packages the DSH installation itself provides and the plugin looks uninstalled; see the FAQ. If you already installed that way, uninstall first and reinstall as above.
 
@@ -211,7 +213,7 @@ Only GPT Responses requests keep `prompt_cache_key`; other Responses models omit
 
 ## Update and uninstall
 
-**Update:** open **Settings → PackyCode** and, when a newer version is listed, click **Update plugin**. It installs that exact version into the owning profile with DSH's bundled pnpm and reads `package.json` back before reporting success. A local `link:` checkout does not get the button. Then quit and reopen the desktop application. A page refresh does not reload the Host. Reinstalling `dsh-packycode-api` from the **Plugins** page does the same job.
+**Update:** open **Settings → PackyCode** and, when a newer version is listed, click **Update plugin**. It installs that exact version into the owning profile with DSH's bundled pnpm and reads `package.json` back before reporting success. A local `link:` checkout does not get the button. Then quit and reopen the desktop application. A page refresh does not reload the Host. Reinstalling from the **Plugins** page works too, again with the version in the package name (for example `dsh-packycode-api@1.2.7`); without it you may get a version that is merely the newest one published at least 24 hours ago.
 
 **Coming back from a local-path install, uninstall first.** An update is a `pnpm add`: it rewrites the files inside the package directory and leaves a `node_modules` that an earlier local-path install left there. That older tree keeps shadowing the packages the DSH installation provides, so the plugin row fails to load with no visible reason. **Uninstall** runs `pnpm remove`, which deletes the package directory outright — only a reinstall after that is clean. `node scripts/install-check.mjs` reports whether a profile is in that state.
 
@@ -227,7 +229,15 @@ ls ~/.dsh/profiles/desktop/node_modules/dsh-packycode-api/node_modules
 
 Output means a leftover tree: a registry install ships no `node_modules`, so this one usually comes from an earlier local-path install (`file:`, or a bare path instead of `link:`). It sits inside the profile directory, and DSH resolves a plugin's imports from inside the profile first, so the plugin gets those old copies — for example `@deepseek-ai/schemastery` 3.18.2, which has no `Schema.volatile()`, so the module throws while it is imported. When an import fails the Loader creates no fiber for that row and no client bundle is composed either, so the model route, the RPC channel, and the settings panel all stay absent.
 
-Recovery: **uninstall** the plugin on the **Plugins** page, **install** `dsh-packycode-api` again, then quit and reopen the desktop application. Uninstall runs `pnpm remove` and deletes the whole package directory; reinstalling or clicking **Update** only rewrites files and keeps the leftover tree. Deleting that `node_modules` by hand and restarting works too.
+Recovery: **uninstall** the plugin on the **Plugins** page, **install** it again with the version in the package name (for example `dsh-packycode-api@1.2.7`), then quit and reopen the desktop application. Uninstall runs `pnpm remove` and deletes the whole package directory; reinstalling or clicking **Update** only rewrites files and keeps the leftover tree. Deleting that `node_modules` by hand and restarting works too.
+
+**Right after a first install, every card in Settings shows `transport failure for /packycode-api/…: HTTP 405`?** The installed version is 1.1.6 or earlier, usually because only the bare package name was entered: the install prompt shows the newest version, but pnpm installs the newest one published at least 24 hours ago (see **Install the plugin**). Those older versions can register their settings channel only after DSH restarts and rebuilds its `connection` service. So right after a first install `/packycode-api` does not exist yet, requests fall through to the static page, and it answers 405; the model route and the settings panel itself load normally. From 1.1.7 on, a first install needs no restart. Check which version was installed:
+
+```sh
+grep '"version"' ~/.dsh/profiles/desktop/node_modules/dsh-packycode-api/package.json
+```
+
+Recovery: quit and reopen the desktop application, and the old version works. Then click **Check for updates** → **Update plugin** under **Settings → PackyCode → Plugin version** (it installs the exact latest version and is not subject to the 24-hour rule), and restart once more.
 
 **Web search says "no stored API key's group covers …"?** The search backend's model is not in your token groups (or the gateway currently routes it to another supplier). Pick the other backend under **Settings → PackyCode → Web search**, or add a key whose group covers it.
 
@@ -243,7 +253,7 @@ Recovery: **uninstall** the plugin on the **Plugins** page, **install** `dsh-pac
 
 **A rate limit disabled the key?** It should not. HTTP 429 does not rotate. Exhausted quota or HTTP 401 does; after a top-up, click **Re-enable**.
 
-**Installing from the Plugins page fails with `ERR_PNPM_MINIMUM_RELEASE_AGE_VIOLATION`?** pnpm refuses packages published less than 24 hours ago and checks the whole profile lockfile. The package it names is often another plugin that was just updated, not this one. Retry once it is 24 hours old, or add the reported `name@version` under `minimumReleaseAgeExclude` in the profile's `pnpm-workspace.yaml`. Once this plugin is installed, **Update plugin** in Settings is not subject to that check.
+**Installing from the Plugins page fails with `ERR_PNPM_MINIMUM_RELEASE_AGE_VIOLATION`?** By default pnpm accepts only versions published at least 24 hours ago and checks the whole profile lockfile. (Entering only this plugin's bare name does not raise this error; it silently installs an older version that has passed 24 hours instead, see **Install the plugin**.) The package it names is often another plugin that was just updated, not this one. Retry once it is 24 hours old, or add the reported `name@version` under `minimumReleaseAgeExclude` in the profile's `pnpm-workspace.yaml`. Once this plugin is installed, **Update plugin** in Settings is not subject to that check.
 
 **The CLI is installed, but Claude still fails?** A host launched from Finder or the Start menu usually has a shorter `PATH` than a terminal. The plugin also checks the official install location, common package-manager directories, and `npm prefix -g`. If it still cannot find the binary, set `claudeCliPath` or click **Check again**. After a Host change or a reinstall, quit and reopen the desktop application.
 

package/README.md

@@ -41,23 +41,25 @@
 
 ## 安装
 
-先准备好 **DeepSeek Harness** 和 **PackyCode（PackyAPI）的 API Key**。尚未安装 DSH，可查看 [DSH 官方说明](https://github.com/deepseek-ai/deepseek-harness#run)。
+先准备好 **DeepSeek Harness** 和 **PackyCode（PackyAPI）的 API Key**。尚未安装 DSH，可查看 [DSH 官方说明](https://github.com/deepseek-ai/deepseek-harness#run)。还没有 API Key 的，可以通过[这个邀请链接](https://www.packyapi.ai/register?aff=Im3l)注册 PackyCode 申请。
 
 ### 1. 安装插件
 
-打开桌面应用的**插件**页，点击**添加插件**，在**包名或地址**中填入：
+打开桌面应用的**插件**页，点击**添加插件**，在**包名或地址**中填入**带版本号**的包名：
 
 ```text
-dsh-packycode-api
+dsh-packycode-api@1.2.7
 ```
 
-在**安装源**中选择**官方源**，然后点击**安装**。需要固定版本时填入 `dsh-packycode-api@1.2.5`。
+在**安装源**中选择**官方源**，然后点击**安装**。`1.2.7` 是写这份说明时的最新版，当前最新版本号以 [npm 页面](https://www.npmjs.com/package/dsh-packycode-api) 为准。
 
-首次安装后**无需重启 DSH**，可直接打开**设置 → PackyCode** 添加 Key。更新已加载的旧版时，按「插件版本」卡片的重启提示操作。
+> **一定要带版本号。** 只填 `dsh-packycode-api` 时，安装前的提示显示的是 npm 上的最新版，但 DSH 自带的 pnpm 默认只安装发布满 24 小时的版本，实际装上的可能是好几个版本之前的旧版，而安装提示里看不出这一点。填写精确版本时，pnpm 会直接安装这个版本，并自动把它加入 profile 的 `minimumReleaseAgeExclude`。装好后可以在 **设置 → PackyCode → 插件版本** 核对「当前版本」。
+
+首次安装后**无需重启 DSH**，可直接打开**设置 → PackyCode** 添加 Key。这适用于 1.1.7 及以后的版本；更早的版本首次安装后要重启一次，见「常见问题」。更新已加载的旧版时，按「插件版本」卡片的重启提示操作。
 
 ### 2. 添加 Key
 
-打开 **设置 → PackyCode**，在「添加 Key」里粘贴 API Key。备注可选，用来区分多个 Key。点「添加」。
+打开 **设置 → PackyCode**，在「添加 Key」里粘贴 API Key。备注可选，用来区分多个 Key。点「添加」。还没有添加过 Key 时，「账户与 Key」里会显示同一个注册邀请链接，点击后在系统浏览器中打开；添加 Key 之后就不再显示。
 
 > 不要把 Key 粘贴到公开 Issue、聊天记录或截图里。插件不会读取环境变量 `PACKY_CODE_API_KEY`，也不会在失败时偷偷改用别的 provider。
 
@@ -70,7 +72,7 @@ dsh-packycode-api
 
 桌面应用的**插件**页可以看到已安装状态与版本，也可以在那里启用、停用或卸载。
 
-**仅用于非 desktop profile：** `dsh plugin --profile <name> add dsh-packycode-api@1.2.5`。不要对 `desktop` 使用它 —— CLI 会直接拒绝（`profile "desktop" is managed exclusively by the Electron application`）。
+**仅用于非 desktop profile：** `dsh plugin --profile <name> add dsh-packycode-api@1.2.7`。不要对 `desktop` 使用它 —— CLI 会直接拒绝（`profile "desktop" is managed exclusively by the Electron application`）。
 
 本地开发要加 `link:` 前缀：`dsh plugin --profile <name> add link:/path/to/dsh-packycode-api`。**不要直接写路径（或 `file:`）** —— 那样的安装会把整个仓库目录（连同 `node_modules`）复制进 profile，之后它会在 profile 内部挡住 DSH 自带的包，插件看起来像没装，见「常见问题」。已经那样装过的话，先卸载再按上面的方式重装。
 
@@ -211,7 +213,7 @@ Responses 请求只有 GPT 模型保留 `prompt_cache_key`，其他 Responses
 
 ## 更新与卸载
 
-**更新：** 打开 **设置 → PackyCode**，有新版本时点「更新插件」。它会在当前 profile 目录里用 DSH 自带的 pnpm 安装精确版本，并读回 `package.json` 确认版本落地。本地 `link:` 开发安装不会出现这个按钮。完成后完全退出并重新打开桌面应用。只刷新页面不会重载 Host。也可以在**插件**页重新安装 `dsh-packycode-api`。
+**更新：** 打开 **设置 → PackyCode**，有新版本时点「更新插件」。它会在当前 profile 目录里用 DSH 自带的 pnpm 安装精确版本，并读回 `package.json` 确认版本落地。本地 `link:` 开发安装不会出现这个按钮。完成后完全退出并重新打开桌面应用。只刷新页面不会重载 Host。也可以在**插件**页重新安装，同样要填写带版本号的包名（例如 `dsh-packycode-api@1.2.7`），否则装上的可能是发布满 24 小时的旧版。
 
 **从本地路径安装切回官方源时，必须先卸载。** 「更新」是 `pnpm add`，它只重写包目录里的文件，不会删除更早一次本地路径安装留在包目录内的 `node_modules`；那份旧依赖会继续挡住 DSH 自带的包，插件行加载失败且看不出原因。「卸载」执行的是 `pnpm remove`，会删掉整个包目录，重装才是干净的。用 `node scripts/install-check.mjs` 可以确认当前 profile 是否处于这个状态。
 
@@ -227,7 +229,15 @@ ls ~/.dsh/profiles/desktop/node_modules/dsh-packycode-api/node_modules
 
 有输出就是残留：从 npm 安装的包不会自带 `node_modules`，这一份通常来自更早一次「本地路径」安装（`file:` 或直接写路径，而不是 `link:`）。它位于 profile 目录内部，而 DSH 解析插件导入时优先使用 profile 内的副本，所以插件拿到的仍是那份旧依赖 —— 例如 `@deepseek-ai/schemastery` 3.18.2 没有 `Schema.volatile()`，模块在导入阶段就抛错。导入失败时 Loader 不会为这一行创建 fiber，客户端 bundle 也不会被组合，于是模型路由、RPC 通道和设置页全都不会出现。
 
-修复：到**插件**页**卸载**本插件，再重新**安装** `dsh-packycode-api`，然后完全退出并重新打开桌面应用。卸载执行的是 `pnpm remove`，会删掉整个包目录；直接重装或点「更新」只重写文件，不会清掉这份残留。也可以手动删掉上面那个 `node_modules` 再重启。
+修复：到**插件**页**卸载**本插件，再用带版本号的包名重新**安装**（例如 `dsh-packycode-api@1.2.7`），然后完全退出并重新打开桌面应用。卸载执行的是 `pnpm remove`，会删掉整个包目录；直接重装或点「更新」只重写文件，不会清掉这份残留。也可以手动删掉上面那个 `node_modules` 再重启。
+
+**首次安装后，设置页每张卡片都显示 `transport failure for /packycode-api/…: HTTP 405`？** 实际装上的是 1.1.6 或更早的版本，通常是因为安装时只填了包名：安装提示显示的是最新版，pnpm 实际装的却是发布满 24 小时的旧版（见「安装插件」）。这些旧版要等 DSH 重启、重建它的 `connection` 服务之后，才能注册设置通道。所以首次安装后 `/packycode-api` 通道还不存在，请求落到静态页面，返回 405；模型路由和设置页本身照常加载。1.1.7 起首次安装不需要重启。先确认装上的版本：
+
+```sh
+grep '"version"' ~/.dsh/profiles/desktop/node_modules/dsh-packycode-api/package.json
+```
+
+处理：完全退出并重新打开桌面应用，旧版即可正常使用。然后在 **设置 → PackyCode → 插件版本** 点「检查更新」→「更新插件」（它会固定安装最新版，不受 24 小时规则限制），再重启一次。
 
 **某个模型不可用，但 Key 是有效的？** 看「账户与 Key」里这个 Key 的分组和 ✓ / ✕：分组不覆盖这个模型时，换一个分组合适的 Key，或在 PackyCode 控制台给 Key 加上对应分组。存了分组合适的 Key 时，插件会自动用它跑这个模型。分组拒绝不会停用 Key。
 
@@ -241,7 +251,7 @@ ls ~/.dsh/profiles/desktop/node_modules/dsh-packycode-api/node_modules
 
 **限速之后 Key 被停用了？** 不该发生。429 不会切换 Key。额度用尽或 401 才会停用；充值后点「重新启用」。
 
-**插件页安装报 `ERR_PNPM_MINIMUM_RELEASE_AGE_VIOLATION`？** pnpm 默认拒绝发布不满 24 小时的包，并且会检查 profile 里的整个 lockfile。报错里点名的往往是另一个刚更新过的插件，不是本插件。等它发布满 24 小时再重试，或把报错里的 `包名@版本` 加到 profile 目录 `pnpm-workspace.yaml` 的 `minimumReleaseAgeExclude` 下。已安装本插件后，设置页的「更新插件」不受这个限制。
+**插件页安装报 `ERR_PNPM_MINIMUM_RELEASE_AGE_VIOLATION`？** pnpm 默认只接受发布满 24 小时的版本，并且会检查 profile 里的整个 lockfile。（只填本插件的包名不会报这个错，而是悄悄装上满 24 小时的旧版，见「安装插件」。）报错里点名的往往是另一个刚更新过的插件，不是本插件。等它发布满 24 小时再重试，或把报错里的 `包名@版本` 加到 profile 目录 `pnpm-workspace.yaml` 的 `minimumReleaseAgeExclude` 下。已安装本插件后，设置页的「更新插件」不受这个限制。
 
 **网页搜索报「no stored API key's group covers …」？** 所选搜索后端的模型不在你的令牌分组里（或网关暂时把它路由到了别的供应商）。在 **设置 → PackyCode → 网页搜索** 换一个后端，或添加分组覆盖它的 Key。
 

package/lib/client.js

@@ -44,7 +44,6 @@ window.__ModuleLoader__.load({
 			imagesBalanceFailed: "图片余额读取失败",
 			imagesComposerLabel: "图片剩余额度",
 			imagesBalanceKey: "当前图片 Key",
-			imagesBalanceReadAt: "更新于 {time}",
 			imagesBalanceHint: "仅汇总图片 Key 的额度，每分钟自动更新；也可手动刷新。与对话 Key 的余额分开统计。",
 			imagesIntro: "使用独立图片 Key 调用 PackyCode 图片接口。生成新图或上传图片后描述修改要求；图片模型独立于对话模型。原始 PNG 保存在本机，聊天中显示图片预览。",
 			imagesEnabled: "图片生成与编辑",
@@ -88,6 +87,8 @@ window.__ModuleLoader__.load({
 			totalStale: "其中 {count} 个 Key 本次读取失败，显示的是上次读到的余额。",
 			staleNote: "上次读取于 {time}，本次读取失败：{error}",
 			empty: "还没有 Key。添加一个即可在模型选择器里看到 PackyCode 的模型。",
+			inviteLead: "还没有 PackyCode 的 API Key？可以通过邀请链接注册：",
+			inviteLink: "www.packyapi.ai/register ↗",
 			keysHint: "按顺序使用：当前 Key 不可用时自动切到下一个；「切到此 Key」指定优先使用的 Key。",
 			keyActive: "使用中",
 			keyDisabled: "已停用",
@@ -137,9 +138,11 @@ window.__ModuleLoader__.load({
 			apiHost: "模型接口地址",
 			statusHost: "余额接口地址",
 			composerLabel: "PackyCode 剩余额度",
+			composerKey: "当前 Key",
 			composerNoKey: "无可用 Key",
 			composerUnread: "余额读取失败",
 			composerStale: "上次读取于 {time}，本次读取失败",
+			quotaReadAt: "更新于 {time}",
 			cliTitle: "Claude Code CLI",
 			cliChecking: "正在检测本机的 Claude Code CLI…",
 			cliInstalled: "已安装",
@@ -226,7 +229,6 @@ window.__ModuleLoader__.load({
 			imagesBalanceFailed: "Could not read image balances",
 			imagesComposerLabel: "Image balance",
 			imagesBalanceKey: "Current image key",
-			imagesBalanceReadAt: "Updated at {time}",
 			imagesBalanceHint: "Only image key quotas are counted here. Updates every minute, or use Refresh. Conversation key balances are separate.",
 			imagesIntro: "Use a dedicated image key with PackyCode’s Images API. Describe a new image or attach images with editing instructions. The image engine is independent of the conversation model. Original PNGs are saved locally and previews appear in chat.",
 			imagesEnabled: "Generate and edit images",
@@ -270,6 +272,8 @@ window.__ModuleLoader__.load({
 			totalStale: "{count} of these keys failed this read and show their last read balance.",
 			staleNote: "Last read at {time}; this read failed: {error}",
 			empty: "No keys yet. Add one and the PackyCode models appear in the model picker.",
+			inviteLead: "No PackyCode API key yet? You can register through this invite link:",
+			inviteLink: "www.packyapi.ai/register ↗",
 			keysHint: "Used in order: when the active key cannot serve a request, the next one takes over. “Use this key” picks the preferred key.",
 			keyActive: "Active",
 			keyDisabled: "Disabled",
@@ -311,9 +315,11 @@ window.__ModuleLoader__.load({
 			apiHost: "Model endpoint",
 			statusHost: "Balance endpoint",
 			composerLabel: "PackyCode remaining balance",
+			composerKey: "Current key",
 			composerNoKey: "No usable key",
 			composerUnread: "Balance unavailable",
-			composerStale: "last read at {time}; this read failed",
+			composerStale: "Last read at {time}; this read failed",
+			quotaReadAt: "Updated at {time}",
 			cliTitle: "Claude Code CLI",
 			cliChecking: "Checking this device for the Claude Code CLI…",
 			cliInstalled: "Installed",
@@ -400,6 +406,8 @@ window.__ModuleLoader__.load({
 .pkc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
 .pkc-title{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600;line-height:22px}
 .pkc-note{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.pkc-link{color:var(--dsw-alias-link,#3964fe);font-weight:500;text-decoration:none;word-break:break-all}
+.pkc-link:hover,.pkc-link:focus{outline:none;text-decoration:underline dotted var(--dsw-alias-link,#3964fe);text-underline-offset:3px}
 .pkc-warn{margin:0;color:var(--dsw-alias-state-warn-label,#dd8629);font-size:12px;line-height:18px}
 .pkc-error{margin:0;color:var(--dsw-alias-state-error-primary,#ec1313);font-size:12px;line-height:18px}
 .pkc-label{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:500;line-height:18px}
@@ -423,11 +431,12 @@ window.__ModuleLoader__.load({
 .pkc-input:disabled{opacity:.5}
 .pkc-image-choice{flex:none;width:100%;max-width:300px;cursor:pointer}
 .pkc-image-shortcut{display:inline-flex;align-items:center;gap:8px}
-.pkc-image-balance{position:relative;display:inline-flex;align-items:center}
-.pkc-image-balance-value{cursor:help;border-radius:var(--dsw-radius-xs,4px)}
-.pkc-image-balance-value:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);outline-offset:2px}
-.pkc-image-balance-tooltip{position:absolute;bottom:calc(100% + 8px);left:0;z-index:100;box-sizing:border-box;width:max-content;max-width:min(320px,calc(100vw - 32px));padding:10px 12px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:var(--dsw-shadow-lv1);font-size:12px;line-height:20px;white-space:pre-line;overflow-wrap:anywhere;visibility:hidden;opacity:0;pointer-events:none}
-.pkc-image-balance:hover>.pkc-image-balance-tooltip,.pkc-image-balance:focus-within>.pkc-image-balance-tooltip{visibility:visible;opacity:1}
+.pkc-quota{position:relative;display:inline-flex;align-items:center}
+.pkc-quota-value{cursor:help;border-radius:var(--dsw-radius-xs,4px)}
+.pkc-quota-value:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);outline-offset:2px}
+.pkc-quota-tooltip{position:absolute;bottom:calc(100% + 8px);left:0;z-index:100;box-sizing:border-box;width:max-content;max-width:min(320px,calc(100vw - 32px));padding:10px 12px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:var(--dsw-shadow-lv1);font-size:12px;line-height:20px;white-space:pre-line;overflow-wrap:anywhere;visibility:hidden;opacity:0;pointer-events:none}
+.pkc-quota[data-align=end]>.pkc-quota-tooltip{left:auto;right:0}
+.pkc-quota:hover>.pkc-quota-tooltip,.pkc-quota:focus-within>.pkc-quota-tooltip{visibility:visible;opacity:1}
 .pkc-image-result,.pkc-image-chat{display:flex;flex-direction:column;gap:10px;padding:8px 0}
 .pkc-generated-image{display:grid;place-items:center;align-self:flex-start;max-width:100%;width:320px;min-height:80px;padding:0;overflow:hidden;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);cursor:zoom-in}
 .pkc-generated-image img{display:block;max-width:100%;max-height:480px;object-fit:contain}
@@ -441,7 +450,7 @@ window.__ModuleLoader__.load({
 .pkc-image-viewer-button:disabled{opacity:.55;cursor:wait}
 .pkc-image-viewer-close{width:36px;padding:0;border-color:transparent;background:transparent}
 .pkc-image-viewer-canvas{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden}
-.pkc-image-viewer-canvas img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
+.pkc-image-viewer-canvas img{display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain}
 .pkc-image-viewer-error{align-self:center;flex:none;margin:12px 0 0;padding:8px 12px;border-radius:8px;background:#4d2222;color:#ffd3d3;text-align:center}
 .pkc-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 
@@ -720,6 +729,54 @@ window.__ModuleLoader__.load({
 				})
 			] });
 		}
+		/**
+		* A composer quota figure with the same details for either key ring. The help
+		* cursor marks it; hovering or focusing it shows the key, its account, the
+		* remaining, used and total quota and when it was read, and asks the caller
+		* for an unforced read.
+		* @param props.copy - the ring's own lines: `title`, `key`, `failed`, `loading`.
+		* @param props.empty - what the figure shows while the remaining quota is unknown.
+		* @param props.align - `end` opens the details leftward, for the composer's right side.
+		*/
+		function QuotaHover({ row, fetchedAt, loading = false, failed = false, empty, copy, align, onRefresh, t }) {
+			const tooltipId = react.useId();
+			const usage = row?.usage;
+			const unlimited = usage?.unlimitedQuota === true;
+			const remaining = unlimited ? t("keyUnlimited") : formatUsd(usage?.availableUsd);
+			const stale = usage !== void 0 && (failed || row.stale !== void 0);
+			const display = remaining ?? empty;
+			const details = [
+				copy.title,
+				row?.label ? `${copy.key}: ${row.label}` : void 0,
+				usage?.name ? `${t("keyName")}: ${usage.name}` : void 0,
+				`${t("keyRemaining")}: ${remaining ?? "—"}`,
+				`${t("keyUsed")}: ${formatUsd(usage?.usedUsd) ?? "—"}`,
+				`${t("accountLimit")}: ${unlimited ? t("keyUnlimited") : formatUsd(quotaTotalUsd(usage)) ?? "—"}`,
+				stale ? fill(t("composerStale"), { time: readTime(row.stale?.fetchedAt ?? fetchedAt) }) : failed || row?.error ? copy.failed : loading ? copy.loading : fetchedAt === void 0 ? void 0 : fill(t("quotaReadAt"), { time: readTime(fetchedAt) })
+			].filter(Boolean).join("\n");
+			const refresh = () => {
+				onRefresh?.();
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "pkc-quota",
+				"data-align": align,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pkc-composer pkc-quota-value",
+					role: "status",
+					tabIndex: 0,
+					"aria-label": `${copy.title}: ${stale ? "≈" : ""}${display}`,
+					"aria-describedby": tooltipId,
+					onMouseEnter: refresh,
+					onFocus: refresh,
+					children: stale ? `≈${display}` : display
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pkc-quota-tooltip",
+					id: tooltipId,
+					role: "tooltip",
+					children: details
+				})]
+			});
+		}
 		/** Only this card's keys contribute; account-wide billing is never added. */
 		function BalanceTotals({ rows, t }) {
 			const totals = sumBalances(rows);
@@ -779,7 +836,6 @@ window.__ModuleLoader__.load({
 		function ImageShortcutBalance({ call, t }) {
 			const [view, setView] = react.useState({ loading: true });
 			const refresh = react.useRef(() => {});
-			const tooltipId = react.useId();
 			react.useEffect(() => {
 				let live = true, generation = 0, pending = false;
 				const read = async (force = false, reset = false) => {
@@ -823,42 +879,22 @@ window.__ModuleLoader__.load({
 					window.removeEventListener("packycode-images-updated", changed);
 				};
 			}, [call]);
-			const row = currentImageKey(view.balance);
-			const usage = row?.usage;
-			const unlimited = usage?.unlimitedQuota === true;
-			const remaining = unlimited ? t("keyUnlimited") : formatUsd(usage?.availableUsd);
-			const stale = usage !== void 0 && (view.failed || row.stale !== void 0);
-			const display = remaining ?? (view.loading ? "…" : "—");
-			const details = [
-				t("imagesComposerLabel"),
-				row?.label ? `${t("imagesBalanceKey")}: ${row.label}` : void 0,
-				usage?.name ? `${t("keyName")}: ${usage.name}` : void 0,
-				`${t("keyRemaining")}: ${remaining ?? "—"}`,
-				`${t("keyUsed")}: ${formatUsd(usage?.usedUsd) ?? "—"}`,
-				`${t("accountLimit")}: ${unlimited ? t("keyUnlimited") : formatUsd(quotaTotalUsd(usage)) ?? "—"}`,
-				stale ? fill(t("composerStale"), { time: readTime(row.stale?.fetchedAt ?? view.balance?.fetchedAt) }) : view.failed || row?.error ? t("imagesBalanceFailed") : view.loading ? t("imagesBalanceLoading") : view.balance?.fetchedAt === void 0 ? void 0 : fill(t("imagesBalanceReadAt"), { time: readTime(view.balance.fetchedAt) })
-			].filter(Boolean).join("\n");
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "pkc-image-balance",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "pkc-composer pkc-image-balance-value",
-					role: "status",
-					tabIndex: 0,
-					"aria-label": `${t("imagesComposerLabel")}: ${stale ? "≈" : ""}${display}`,
-					"aria-describedby": tooltipId,
-					onMouseEnter: () => {
-						refresh.current();
-					},
-					onFocus: () => {
-						refresh.current();
-					},
-					children: stale ? `≈${display}` : display
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "pkc-image-balance-tooltip",
-					id: tooltipId,
-					role: "tooltip",
-					children: details
-				})]
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaHover, {
+				row: currentImageKey(view.balance),
+				fetchedAt: view.balance?.fetchedAt,
+				loading: view.loading,
+				failed: view.failed === true,
+				empty: view.loading ? "…" : "—",
+				copy: {
+					title: t("imagesComposerLabel"),
+					key: t("imagesBalanceKey"),
+					failed: t("imagesBalanceFailed"),
+					loading: t("imagesBalanceLoading")
+				},
+				onRefresh: () => {
+					refresh.current();
+				},
+				t
 			});
 		}
 		//#endregion
@@ -1039,7 +1075,7 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "pkc-image-backdrop",
 				onClick: (event) => {
-					if (event.target === event.currentTarget) viewer.close();
+					if (event.target.closest("img, button, [role=\"alert\"]") === null) viewer.close();
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "pkc-image-viewer",
@@ -1116,6 +1152,79 @@ window.__ModuleLoader__.load({
 			}, image.revision);
 		}
 		//#endregion
+		//#region src/client-key-rename.jsx
+		/**
+		* Renaming a stored key, the same way in the conversation and image key
+		* cards: the name becomes a text field; Enter or Save stores it, Escape or
+		* Cancel keeps the old one. Only the key's id and the new label reach the host.
+		*
+		* @module dsh-packycode-api/client-key-rename
+		*/
+		/**
+		* The rename state a key card keeps.
+		* @param save - `({ id, label }) => Promise`; the field closes once it settles.
+		* @returns `{ renaming, start, change, cancel, submit }`.
+		*/
+		function useKeyRename(save) {
+			const [renaming, setRenaming] = react.useState();
+			return {
+				renaming,
+				start: (entry) => setRenaming({
+					id: entry.id,
+					label: entry.label
+				}),
+				change: (label) => setRenaming((current) => ({
+					...current,
+					label
+				})),
+				cancel: () => setRenaming(void 0),
+				submit: () => {
+					if (renaming === void 0 || renaming.label.trim() === "") return;
+					save({
+						id: renaming.id,
+						label: renaming.label
+					}).then(() => setRenaming(void 0));
+				}
+			};
+		}
+		/** The field and buttons that stand in for a key's name while it is renamed. */
+		function KeyRenameForm({ rename, busy, t }) {
+			const label = rename.renaming.label;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "pkc-form",
+				onSubmit: (event) => {
+					event.preventDefault();
+					rename.submit();
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "pkc-input",
+						type: "text",
+						maxLength: 60,
+						autoFocus: true,
+						placeholder: t("keyRenamePlaceholder"),
+						value: label,
+						onChange: (event) => rename.change(event.target.value),
+						onKeyDown: (event) => event.key === "Escape" && rename.cancel()
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "submit",
+						className: "pkc-btn",
+						"data-variant": "primary",
+						disabled: busy || label.trim() === "",
+						children: t("keyRenameSave")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "pkc-btn",
+						"data-variant": "ghost",
+						onClick: rename.cancel,
+						children: t("keyRenameCancel")
+					})
+				]
+			});
+		}
+		//#endregion
 		//#region src/client-images.jsx
 		const imageModelLabel = (id) => id.replace("gpt-image-", "GPT Image ").replace("-flare", " Flare").replace("-sunburst", " Sunburst");
 		/** Only projections come back from the host; the password draft is cleared on success. */
@@ -1182,6 +1291,10 @@ window.__ModuleLoader__.load({
 					if (mounted.current) setBusy(false);
 				}
 			};
+			const rename = useKeyRename(({ id, label }) => mutate("images/keys/rename", {
+				id,
+				label
+			}));
 			const disabled = busy || state?.writable !== true;
 			const models = state?.models ?? [];
 			const qualities = models.find((model) => model.id === state?.imageModel)?.qualities ?? [];
@@ -1291,7 +1404,11 @@ window.__ModuleLoader__.load({
 									className: "pkc-row-top",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 										className: "pkc-row-name",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										children: [rename.renaming?.id === entry.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyRenameForm, {
+											rename,
+											busy,
+											t
+										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "pkc-name",
 											children: entry.label
 										}), entry.active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1299,26 +1416,37 @@ window.__ModuleLoader__.load({
 											"data-tone": "success",
 											children: t("keyActive")
 										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									}), rename.renaming?.id !== entry.id && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 										className: "pkc-actions",
-										children: [!entry.active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											className: "pkc-btn",
-											type: "button",
-											disabled: busy,
-											onClick: () => {
-												mutate("images/keys/select", { id: entry.id });
-											},
-											children: t("keyUse")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											className: "pkc-btn",
-											"data-variant": "danger",
-											type: "button",
-											disabled: busy,
-											onClick: () => {
-												mutate("images/keys/remove", { id: entry.id });
-											},
-											children: t("keyRemove")
-										})]
+										children: [
+											!entry.active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												className: "pkc-btn",
+												type: "button",
+												disabled: busy,
+												onClick: () => {
+													mutate("images/keys/select", { id: entry.id });
+												},
+												children: t("keyUse")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												className: "pkc-btn",
+												"data-variant": "ghost",
+												type: "button",
+												disabled: busy,
+												onClick: () => rename.start(entry),
+												children: t("keyRename")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												className: "pkc-btn",
+												"data-variant": "danger",
+												type: "button",
+												disabled: busy,
+												onClick: () => {
+													mutate("images/keys/remove", { id: entry.id });
+												},
+												children: t("keyRemove")
+											})
+										]
 									})]
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyBalance, {
 									row: rows.find((row) => row.id === entry.id),
@@ -1607,6 +1735,8 @@ window.__ModuleLoader__.load({
 		const PROVIDER = "packycode";
 		const CHANNEL = "/packycode-api";
 		const REFRESH_MS = 6e4;
+		/** PackyCode registration through the author's invite link, offered only until a key is stored. */
+		const INVITE_URL = "https://www.packyapi.ai/register?aff=Im3l";
 		const INSTALL_POLL_MS = 2e3;
 		/** How long after a search change the panel re-reads what DSH applied (the patch hot-reloads). */
 		const SEARCH_SETTLE_MS = 1500;
@@ -1748,8 +1878,8 @@ window.__ModuleLoader__.load({
 				})
 			] });
 		}
-		function KeyRow({ entry, row, group, descriptions, groupsLoading, busy, renaming, onRename, onAction, t }) {
-			const editing = renaming?.id === entry.id;
+		function KeyRow({ entry, row, group, descriptions, groupsLoading, busy, rename, onAction, t }) {
+			const editing = rename.renaming?.id === entry.id;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "pkc-row",
 				children: [
@@ -1758,35 +1888,10 @@ window.__ModuleLoader__.load({
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "pkc-row-name",
 							children: [
-								editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-									className: "pkc-form",
-									onSubmit: (event) => {
-										event.preventDefault();
-										onRename.submit();
-									},
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											className: "pkc-input",
-											type: "text",
-											maxLength: 60,
-											autoFocus: true,
-											placeholder: t("keyRenamePlaceholder"),
-											value: renaming.label,
-											onChange: (event) => onRename.change(event.target.value),
-											onKeyDown: (event) => event.key === "Escape" && onRename.cancel()
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-											type: "submit",
-											variant: "primary",
-											disabled: busy || renaming.label.trim() === "",
-											children: t("keyRenameSave")
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-											variant: "ghost",
-											onClick: onRename.cancel,
-											children: t("keyRenameCancel")
-										})
-									]
+								editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyRenameForm, {
+									rename,
+									busy,
+									t
 								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "pkc-name",
 									children: entry.label
@@ -1818,7 +1923,7 @@ window.__ModuleLoader__.load({
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 									variant: "ghost",
 									disabled: busy,
-									onClick: () => onRename.start(entry),
+									onClick: () => rename.start(entry),
 									children: t("keyRename")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -1843,6 +1948,27 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/**
+		* Where to get a key, for a profile that has none. A new-window link: the
+		* desktop shell hands http(s) window opens to the system browser, and a web
+		* profile opens a new tab.
+		*/
+		function RegisterInvite({ t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "pkc-note",
+				children: [
+					t("inviteLead"),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						className: "pkc-link",
+						href: INVITE_URL,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: t("inviteLink")
+					})
+				]
+			});
+		}
 		function AccountsCard({ call, t }) {
 			const [status, setStatus] = react.useState();
 			const [balance, setBalance] = react.useState();
@@ -1854,7 +1980,6 @@ window.__ModuleLoader__.load({
 				key: "",
 				label: ""
 			});
-			const [renaming, setRenaming] = react.useState();
 			const generation = react.useRef(0);
 			const readGroups = react.useCallback((force = false) => {
 				setGroupsLoading(true);
@@ -1901,24 +2026,10 @@ window.__ModuleLoader__.load({
 					label: ""
 				}));
 			};
-			const rename = {
-				start: (entry) => setRenaming({
-					id: entry.id,
-					label: entry.label
-				}),
-				change: (label) => setRenaming((current) => ({
-					...current,
-					label
-				})),
-				cancel: () => setRenaming(void 0),
-				submit: () => {
-					if (renaming === void 0 || renaming.label.trim() === "") return;
-					mutate("keys/rename", {
-						id: renaming.id,
-						label: renaming.label
-					}).then(() => setRenaming(void 0));
-				}
-			};
+			const rename = useKeyRename(({ id, label }) => mutate("keys/rename", {
+				id,
+				label
+			}));
 			const keys = status?.keys ?? [];
 			const rows = balance?.keys ?? [];
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
@@ -1937,10 +2048,10 @@ window.__ModuleLoader__.load({
 					})]
 				}),
 				children: [
-					keys.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					keys.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "pkc-note",
 						children: t("empty")
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					}), status !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RegisterInvite, { t })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BalanceTotals, {
 							rows,
 							t
@@ -1954,8 +2065,7 @@ window.__ModuleLoader__.load({
 								descriptions: groups?.descriptions,
 								groupsLoading,
 								busy,
-								renaming,
-								onRename: rename,
+								rename,
 								onAction: mutate,
 								t
 							}, entry.id))
@@ -2634,38 +2744,48 @@ window.__ModuleLoader__.load({
 			const call = useCaller(rpc);
 			const enabled = react.useSyncExternalStore((listener) => directory.subscribe(listener), () => directory.getSnapshot())?.current?.provider === PROVIDER;
 			const [balance, setBalance] = react.useState();
+			const refresh = react.useRef(() => {});
 			react.useEffect(() => {
 				if (!enabled) {
 					setBalance(void 0);
 					return;
 				}
 				let live = true;
+				let pending = false;
 				const tick = () => {
+					if (pending) return;
+					pending = true;
 					call("balance").then((value) => {
 						if (live) setBalance(value);
 					}).catch(() => {
 						if (live) setBalance(void 0);
+					}).finally(() => {
+						pending = false;
 					});
 				};
+				refresh.current = tick;
 				tick();
 				const timer = window.setInterval(tick, REFRESH_MS);
 				return () => {
 					live = false;
+					refresh.current = () => {};
 					window.clearInterval(timer);
 				};
 			}, [call, enabled]);
 			if (!enabled || balance === void 0) return null;
 			const row = activeUsage(balance);
-			const usage = row?.usage;
-			const display = usage?.unlimitedQuota === true ? t("keyUnlimited") : formatUsd(usage?.availableUsd) ?? (row?.error === void 0 ? t("composerNoKey") : t("composerUnread"));
-			const stale = row?.stale !== void 0 && usage !== void 0;
-			const label = stale ? `${t("composerLabel")}: ${display}（${fill(t("composerStale"), { time: readTime(row.stale.fetchedAt) })}）` : `${t("composerLabel")}: ${display}`;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "pkc-composer",
-				role: "status",
-				"aria-label": label,
-				title: label,
-				children: stale ? `≈${display}` : display
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaHover, {
+				row,
+				fetchedAt: balance.fetchedAt,
+				empty: row?.error === void 0 ? t("composerNoKey") : t("composerUnread"),
+				copy: {
+					title: t("composerLabel"),
+					key: t("composerKey"),
+					failed: t("composerUnread")
+				},
+				align: "end",
+				onRefresh: () => refresh.current(),
+				t
 			});
 		}
 		const inject = [

package/lib/index.js

@@ -5631,6 +5631,7 @@ function createImageController({ ring, balance, readPreference, writePreference,
 		async mutate(operation, payload = {}) {
 			const operations = {
 				add: () => ring.add(payload.key, payload.label),
+				rename: () => ring.rename(String(payload.id ?? ""), payload.label),
 				remove: () => ring.remove(String(payload.id ?? "")),
 				select: () => ring.select(String(payload.id ?? "")),
 				enable: () => ring.enable(String(payload.id ?? ""))
@@ -7080,6 +7081,10 @@ function createPackyCodeRpc({ ring, balance, groups, hosts, preference, claudeCl
 			key: payload?.key,
 			label: payload?.label
 		}),
+		"images/keys/rename": (payload) => imageSupport().mutate("rename", {
+			id: payload?.id,
+			label: payload?.label
+		}),
 		"images/keys/remove": (payload) => imageSupport().mutate("remove", { id: payload?.id }),
 		"images/keys/select": (payload) => imageSupport().mutate("select", { id: payload?.id }),
 		"images/keys/enable": (payload) => imageSupport().mutate("enable", { id: payload?.id })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-packycode-api",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Use PackyCode API keys in DeepSeek Harness with multi-protocol models, image generation and editing, separate key rings, and balance display",
   "type": "module",
   "main": "./lib/index.js",