dsh-packycode-api 1.1.9 → 1.2.1

package/lib/client.js

@@ -39,6 +39,39 @@ window.__ModuleLoader__.load({
 			nav: "PackyCode",
 			intro: "填入 PackyCode（PackyAPI）的 API Key 即可使用内置模型路由。多个 Key 按顺序使用：额度用尽或失效时自动切到下一个；某个 Key 的分组用不了所选模型时，自动改用分组合适的 Key。",
 			accountsTitle: "账户与 Key",
+			imagesTitle: "图片生成与编辑",
+			imagesSeparateKey: "独立图片 Key",
+			imagesBalanceLoading: "正在读取图片 Key 余额…",
+			imagesBalanceFailed: "图片余额读取失败",
+			imagesBalanceHint: "仅汇总图片 Key 的额度，每分钟自动更新；也可手动刷新。与对话 Key 的余额分开统计。",
+			imagesIntro: "使用独立图片 Key 调用 PackyCode 图片接口。生成新图或上传图片后描述修改要求；图片模型独立于对话模型。原始 PNG 保存在本机，聊天中显示图片预览。",
+			imagesEnabled: "图片生成与编辑",
+			imagesOn: "启用",
+			imagesOff: "停用",
+			imagesModel: "请求型号",
+			imagesQuality: "请求质量",
+			imagesQuality_auto: "自动",
+			imagesQuality_low: "低",
+			imagesQuality_medium: "中",
+			imagesQuality_high: "高",
+			imagesQuality_xhigh: "超高（xhigh）",
+			imagesQuality_max: "最高（max）",
+			imagesQualityHint: "2.5 支持额外的 xhigh / max；质量越高，耗时和费用通常越高。网关实际支持情况需用图片 Key 验证。不会自动换型号或降低质量。",
+			imagesAddKey: "添加图片 Key",
+			imagesKeyPlaceholder: "粘贴专用的图片 API Key",
+			imagesNoKey: "尚未添加图片 Key。添加后可使用图片工具；对话 Key 不会用于图片请求。",
+			imagesLoadFailed: "图片设置读取失败。若刚更新本地插件，请重新加载插件后再打开设置。",
+			imagesUnavailable: "当前 Host 未提供图片附件服务，图片工具暂不可用。",
+			imagesCreate: "创建图片",
+			imagesShortcutHint: "在草稿中加入 PackyCode 生图指令，再补充图片描述后发送。",
+			imagesDraft: "请使用 packycode_image_generate 工具，跟随 PackyCode 已保存的图片型号和质量。有参考图时编辑参考图，没有参考图时生成新图。图片要求：",
+			imagesDraftBusy: "输入框正忙或已有引用，请直接在草稿里描述图片要求。",
+			imagesGenerating: "正在生成…",
+			imagesFailed: "生成失败",
+			imagesDone: "已生成",
+			imagesOpen: "打开图片",
+			imagesRetryPreview: "预览加载失败，点击重试",
+			imagesLoadingPreview: "正在加载图片…",
 			refresh: "刷新",
 			refreshing: "刷新中…",
 			totalRemaining: "合计剩余",
@@ -68,6 +101,7 @@ window.__ModuleLoader__.load({
 			resetMonthly: "每月重置",
 			resetWeekly: "每周重置",
 			resetDaily: "每日重置",
+			resetNever: "不重置",
 			loadFailed: "读取失败",
 			removeAll: "清空全部",
 			addTitle: "添加 Key",
@@ -180,6 +214,39 @@ window.__ModuleLoader__.load({
 			modelsEmpty: "No models selected. PackyCode models are hidden from the picker.",
 			intro: "Paste a PackyCode (PackyAPI) API key to use the built-in model route. Keys are used in order: an exhausted or rejected key hands over to the next one, and a key whose groups cannot reach the selected model is passed over for one whose groups can.",
 			accountsTitle: "Accounts and keys",
+			imagesTitle: "Image generation and editing",
+			imagesSeparateKey: "Separate image key",
+			imagesBalanceLoading: "Reading image key balances…",
+			imagesBalanceFailed: "Could not read image balances",
+			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",
+			imagesOn: "Enabled",
+			imagesOff: "Disabled",
+			imagesModel: "Image model",
+			imagesQuality: "Request quality",
+			imagesQuality_auto: "Auto",
+			imagesQuality_low: "Low",
+			imagesQuality_medium: "Medium",
+			imagesQuality_high: "High",
+			imagesQuality_xhigh: "Extra high (xhigh)",
+			imagesQuality_max: "Maximum (max)",
+			imagesQualityHint: "The 2.5 engines also support xhigh / max. Higher quality usually takes longer and costs more. Gateway support needs testing with an image key. Models and quality are never changed automatically.",
+			imagesAddKey: "Add an image key",
+			imagesKeyPlaceholder: "Paste the dedicated image API key",
+			imagesNoKey: "No image key yet. Add one to enable the image tool. Conversation keys are never used for images.",
+			imagesLoadFailed: "Could not read image settings. If you just updated the local plugin, reload it and reopen settings.",
+			imagesUnavailable: "This host does not provide image attachments; the image tool is unavailable.",
+			imagesCreate: "Create image",
+			imagesShortcutHint: "Add a PackyCode image instruction to the draft, describe the image, then send.",
+			imagesDraft: "Use packycode_image_generate with the saved PackyCode image model and quality. Edit the attached references when provided; otherwise generate a new image. Image requirements:",
+			imagesDraftBusy: "The composer is busy or contains references. Describe the image requirements directly in the draft.",
+			imagesGenerating: "Generating…",
+			imagesFailed: "Generation failed",
+			imagesDone: "Generated",
+			imagesOpen: "Open image",
+			imagesRetryPreview: "Preview failed; click to retry",
+			imagesLoadingPreview: "Loading image…",
 			refresh: "Refresh",
 			refreshing: "Refreshing…",
 			totalRemaining: "Total remaining",
@@ -209,6 +276,7 @@ window.__ModuleLoader__.load({
 			resetMonthly: "resets monthly",
 			resetWeekly: "resets weekly",
 			resetDaily: "resets daily",
+			resetNever: "does not reset",
 			loadFailed: "Read failed",
 			removeAll: "Remove all",
 			addTitle: "Add a key",
@@ -339,6 +407,11 @@ window.__ModuleLoader__.load({
 .pkc-input:focus{border-color:var(--dsw-alias-state-business-primary)}
 .pkc-input::placeholder{color:var(--dsw-alias-label-caption)}
 .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-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}
 .pkc-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 
 .pkc-chip{flex:none;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;line-height:18px;white-space:nowrap}
@@ -416,6 +489,68 @@ window.__ModuleLoader__.load({
   .pkc-setting>.pkc-label{padding-top:0}
 }
 `;
+		//#endregion
+		//#region src/image-conversation.js
+		/** Project this plugin's durable image results into chat without duplicating context. */
+		const IMAGE_CHAT_KIND = "packycode-image-output";
+		const IMAGE_TOOLS = /* @__PURE__ */ new Set(["packycode_image_generate", "claude_code"]);
+		const hasImage = (content) => Array.isArray(content) && content.some((part) => part.type === "image" && part.attachment);
+		function successfulImages(event) {
+			if (event?.type === "tool/result" && event.data?.meta?.kind === "packycode-image") return (event.data.message?.content ?? []).filter((block) => block.type === "tool-result" && !block.isError && hasImage(block.content)).map((block) => ({
+				...block,
+				meta: event.data.meta
+			}));
+			if (event?.type === "tool/ptc-dispatch" && IMAGE_TOOLS.has(event.data?.name) && event.data.isError === false && typeof event.data.subCallId === "string" && hasImage(event.data.content)) return [{
+				type: "tool-result",
+				toolCallId: event.data.subCallId,
+				content: event.data.content,
+				meta: { kind: "packycode-image" }
+			}];
+			const source = event?.data?.message?.source;
+			if (event?.type !== "assistant/message" || source?.kind !== "model" || source.provider !== "packycode" || !/^claude-/u.test(source.model ?? "")) return [];
+			return (event.data.message.content ?? []).flatMap((block, index) => block.type === "image" && block.attachment ? [{
+				type: "tool-result",
+				toolCallId: `packycode-cli-image-${event.seq}-${index}`,
+				content: [block]
+			}] : []);
+		}
+		const imageConversationNode = {
+			kind: IMAGE_CHAT_KIND,
+			target: "chat",
+			match(event) {
+				return event.type === "turn/end" || successfulImages(event).length > 0 ? {
+					id: String(event.data.turn),
+					role: "update"
+				} : null;
+			},
+			start: () => void 0,
+			update: (context) => context.state,
+			buildViewNode(context) {
+				const finished = context.matches.find((match) => match.event.type === "turn/end");
+				if (finished === void 0) return null;
+				const results = context.matches.filter((match) => successfulImages(match.event).length > 0);
+				if (results.length === 0) return null;
+				const blocks = [...new Map(results.flatMap(({ event }) => successfulImages(event).map((block) => [block.toolCallId, {
+					...block,
+					kind: "tool-result"
+				}]))).values()];
+				const answerSeq = finished.location.turn?.steps?.at(-1)?.data.get("assistant-step")?.finalNode?.seq;
+				const lastImageSeq = Math.max(...results.map((match) => match.event.seq));
+				return {
+					key: context.key,
+					id: context.id,
+					kind: IMAGE_CHAT_KIND,
+					target: "chat",
+					location: { kind: "session" },
+					visibility: "visible",
+					anchorSeq: answerSeq > lastImageSeq ? answerSeq + .025 : finished.event.seq - .025,
+					data: {
+						turn: finished.event.data.turn,
+						blocks
+					}
+				};
+			}
+		};
 		//#endregion
 		//#region src/totals.js
 		/**
@@ -468,6 +603,584 @@ window.__ModuleLoader__.load({
 			return total;
 		}
 		//#endregion
+		//#region src/client-balance.jsx
+		const fill = (text, values) => text.replace(/\{(\w+)\}/gu, (match, name) => values[name] === void 0 ? match : String(values[name]));
+		function formatUsd(value) {
+			if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+			try {
+				return new Intl.NumberFormat(void 0, {
+					style: "currency",
+					currency: "USD"
+				}).format(value);
+			} catch {
+				return `$${value.toFixed(2)}`;
+			}
+		}
+		function readTime(ms) {
+			if (typeof ms !== "number" || !Number.isFinite(ms)) return "—";
+			try {
+				return new Date(ms).toLocaleTimeString(void 0, {
+					hour: "2-digit",
+					minute: "2-digit"
+				});
+			} catch {
+				return new Date(ms).toISOString().slice(11, 16);
+			}
+		}
+		const RESET_KEYS = {
+			monthly: "resetMonthly",
+			weekly: "resetWeekly",
+			daily: "resetDaily",
+			never: "resetNever"
+		};
+		/** The same quota presentation for conversation and image credential records. */
+		function KeyBalance({ row, t }) {
+			const usage = row?.usage;
+			const figures = [
+				usage?.unlimitedQuota === true ? [t("keyRemaining"), t("keyUnlimited")] : usage?.availableUsd === void 0 ? void 0 : [t("keyRemaining"), formatUsd(usage.availableUsd)],
+				usage?.usedUsd === void 0 ? void 0 : [t("keyUsed"), formatUsd(usage.usedUsd)],
+				usage?.limitUsd === void 0 ? void 0 : [t("accountLimit"), formatUsd(usage.limitUsd)]
+			].filter(Boolean);
+			const meta = [usage?.name === void 0 ? t("keyNameUnknown") : `${t("keyName")} ${usage.name}`, RESET_KEYS[usage?.resetPeriod] === void 0 ? void 0 : t(RESET_KEYS[usage.resetPeriod])].filter(Boolean).join(" · ");
+			const share = usage?.unlimitedQuota !== true && typeof usage?.limitUsd === "number" && usage.limitUsd > 0 && typeof usage.availableUsd === "number" ? Math.max(0, Math.min(1, usage.availableUsd / usage.limitUsd)) : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pkc-meta",
+					children: meta
+				}),
+				figures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pkc-figures",
+					children: figures.map(([label, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: value })] }, label))
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pkc-meta",
+					children: row?.error === void 0 ? t("keyNoBalance") : `${t("loadFailed")}: ${row.error}`
+				}),
+				share !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pkc-bar",
+					"data-level": share < .1 ? "low" : share < .3 ? "warn" : "ok",
+					role: "presentation",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { width: `${Math.round(share * 100)}%` } })
+				}),
+				row?.stale !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pkc-warn",
+					children: fill(t("staleNote"), {
+						time: readTime(row.stale.fetchedAt),
+						error: row.stale.error ?? ""
+					})
+				})
+			] });
+		}
+		/** Only this card's keys contribute; account-wide billing is never added. */
+		function BalanceTotals({ rows, t }) {
+			const totals = sumBalances(rows);
+			const stale = rows.filter((row) => row.stale !== void 0).length;
+			const known = (field) => rows.some((row) => row.usage?.unlimitedQuota !== true && Number.isFinite(row.usage?.[field]));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "pkc-stats",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pkc-stat",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pkc-stat-label",
+							children: t("totalRemaining")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "pkc-stat-value",
+							children: [known("availableUsd") ? formatUsd(totals.remainingUsd) : totals.unlimited > 0 ? t("keyUnlimited") : "—", known("availableUsd") && totals.unlimited > 0 && ` + ${t("keyUnlimited")}`]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pkc-stat",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pkc-stat-label",
+							children: t("totalUsed")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pkc-stat-value",
+							children: known("usedUsd") ? formatUsd(totals.usedUsd) : "—"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pkc-stat",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pkc-stat-label",
+							children: t("totalLimit")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pkc-stat-value",
+							children: totals.unlimited > 0 ? t("keyUnlimited") : known("limitUsd") ? formatUsd(totals.limitUsd) : "—"
+						})]
+					})
+				]
+			}), (totals.unread > 0 || stale > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "pkc-note",
+				children: [totals.unread > 0 ? fill(t("totalPartial"), { count: totals.unread }) : void 0, stale > 0 ? fill(t("totalStale"), { count: stale }) : void 0].filter(Boolean).join(" ")
+			})] });
+		}
+		//#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. */
+		function PackyCodeImagesCard({ call, t }) {
+			const [state, setState] = react.useState();
+			const [draft, setDraft] = react.useState({
+				key: "",
+				label: ""
+			});
+			const [busy, setBusy] = react.useState(false);
+			const [error, setError] = react.useState();
+			const [balance, setBalance] = react.useState();
+			const [balanceError, setBalanceError] = react.useState();
+			const [balanceLoading, setBalanceLoading] = react.useState(true);
+			const balanceGeneration = react.useRef(0);
+			const mounted = react.useRef(false);
+			const readBalance = async (force = false) => {
+				if (!mounted.current) return;
+				const generation = ++balanceGeneration.current;
+				setBalanceLoading(true);
+				setBalanceError(void 0);
+				try {
+					const value = await call("images/balance", { force });
+					if (mounted.current && balanceGeneration.current === generation) setBalance(value);
+				} catch (failure) {
+					if (mounted.current && balanceGeneration.current === generation) setBalanceError(String(failure?.message ?? t("imagesBalanceFailed")).slice(0, 200));
+				} finally {
+					if (mounted.current && balanceGeneration.current === generation) setBalanceLoading(false);
+				}
+			};
+			react.useEffect(() => {
+				mounted.current = true;
+				call("images/status").then((value) => {
+					if (mounted.current) setState(value);
+				}).catch(() => {
+					if (mounted.current) setError(t("imagesLoadFailed"));
+				});
+				readBalance();
+				const timer = window.setInterval(() => {
+					readBalance();
+				}, 6e4);
+				return () => {
+					mounted.current = false;
+					balanceGeneration.current += 1;
+					window.clearInterval(timer);
+				};
+			}, [call, t]);
+			const mutate = async (endpoint, payload = {}) => {
+				setBusy(true);
+				setError(void 0);
+				try {
+					const value = await call(endpoint, payload);
+					if (mounted.current) setState(value);
+					if (mounted.current && endpoint.startsWith("images/keys/")) {
+						setBalance(void 0);
+						readBalance(true);
+					}
+					window.dispatchEvent(new Event("packycode-images-updated"));
+					return true;
+				} catch (failure) {
+					if (mounted.current) setError(String(failure?.message ?? t("imagesLoadFailed")).slice(0, 200));
+					return false;
+				} finally {
+					if (mounted.current) setBusy(false);
+				}
+			};
+			const disabled = busy || state?.writable !== true;
+			const models = state?.models ?? [];
+			const qualities = models.find((model) => model.id === state?.imageModel)?.qualities ?? [];
+			const rows = (state?.keys ?? []).map((entry) => balance?.keys?.find((row) => row.id === entry.id) ?? { id: entry.id });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "pkc-card",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+						className: "pkc-head",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: "pkc-title",
+							children: t("imagesTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "pkc-actions",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "pkc-chip",
+								"data-tone": "neutral",
+								children: t("imagesSeparateKey")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "pkc-btn",
+								type: "button",
+								disabled: busy || balanceLoading,
+								onClick: () => {
+									readBalance(true);
+								},
+								children: balanceLoading ? t("refreshing") : t("refresh")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "pkc-note",
+						children: t("imagesIntro")
+					}),
+					state !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pkc-setting",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "pkc-label",
+								children: t("imagesEnabled")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								className: "pkc-input pkc-image-choice",
+								value: String(state.imageEnabled),
+								disabled,
+								onChange: (event) => {
+									mutate("images/update", { imageEnabled: event.target.value === "true" });
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: "true",
+									children: t("imagesOn")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: "false",
+									children: t("imagesOff")
+								})]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pkc-setting",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "pkc-label",
+								children: t("imagesModel")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+								className: "pkc-input pkc-image-choice",
+								value: state.imageModel,
+								disabled: disabled || !state.imageEnabled,
+								onChange: (event) => {
+									mutate("images/update", {
+										imageModel: event.target.value,
+										imageQuality: "auto"
+									});
+								},
+								children: models.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: model.id,
+									children: imageModelLabel(model.id)
+								}, model.id))
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pkc-setting",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "pkc-label",
+								children: t("imagesQuality")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+								className: "pkc-input pkc-image-choice",
+								value: state.imageQuality,
+								disabled: disabled || !state.imageEnabled,
+								onChange: (event) => {
+									mutate("images/update", { imageQuality: event.target.value });
+								},
+								children: qualities.map((quality) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: quality,
+									children: t(`imagesQuality_${quality}`)
+								}, quality))
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "pkc-note",
+							children: t("imagesQualityHint")
+						}),
+						(state.keys ?? []).length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BalanceTotals, {
+							rows,
+							t
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "pkc-note",
+							children: balanceLoading ? t("imagesBalanceLoading") : t("imagesBalanceHint")
+						})] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pkc-list",
+							children: (state.keys ?? []).map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "pkc-row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "pkc-row-top",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "pkc-row-name",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "pkc-name",
+											children: entry.label
+										}), entry.active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "pkc-chip",
+											"data-tone": "success",
+											children: t("keyActive")
+										})]
+									}), /* @__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")
+										})]
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyBalance, {
+									row: rows.find((row) => row.id === entry.id),
+									t
+								})]
+							}, entry.id))
+						}),
+						(state.keys ?? []).length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "pkc-note",
+							children: t("imagesNoKey")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+							className: "pkc-add",
+							onSubmit: (event) => {
+								event.preventDefault();
+								if (busy || draft.key.trim() === "") return;
+								mutate("images/keys/add", draft).then((saved) => {
+									if (saved && mounted.current) setDraft({
+										key: "",
+										label: ""
+									});
+								});
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "pkc-label",
+								children: t("imagesAddKey")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "pkc-form",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: "pkc-input",
+										type: "password",
+										autoComplete: "off",
+										"aria-label": t("imagesAddKey"),
+										placeholder: t("imagesKeyPlaceholder"),
+										value: draft.key,
+										disabled: busy,
+										onChange: (event) => setDraft((current) => ({
+											...current,
+											key: event.target.value
+										}))
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: "pkc-input",
+										type: "text",
+										maxLength: 60,
+										"aria-label": t("addLabelPlaceholder"),
+										placeholder: t("addLabelPlaceholder"),
+										value: draft.label,
+										disabled: busy,
+										onChange: (event) => setDraft((current) => ({
+											...current,
+											label: event.target.value
+										}))
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										className: "pkc-btn",
+										"data-variant": "primary",
+										"data-size": "md",
+										type: "submit",
+										disabled: busy || draft.key.trim() === "",
+										children: t("add")
+									})
+								]
+							})]
+						}),
+						!state.available && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "pkc-note",
+							children: t("imagesUnavailable")
+						}),
+						!state.writable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "pkc-note",
+							children: t("searchNotWritable")
+						})
+					] }),
+					error !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "pkc-error",
+						role: "alert",
+						children: error
+					}),
+					balanceError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "pkc-error",
+						role: "alert",
+						children: `${t("imagesBalanceFailed")}: ${balanceError}`
+					})
+				]
+			});
+		}
+		/** A draft shortcut names this provider explicitly when other image tools exist. */
+		function PackyCodeImageShortcut({ call, t, directory, prepare }) {
+			const active = react.useSyncExternalStore((listener) => directory.subscribe(listener), () => directory.getSnapshot())?.current?.provider === "packycode";
+			const [ready, setReady] = react.useState(false);
+			const [error, setError] = react.useState();
+			react.useEffect(() => {
+				let live = true;
+				const refresh = () => {
+					if (active) call("images/status").then((value) => {
+						if (live) setReady(value.imageEnabled && value.available && value.keys.some((key) => !key.disabled));
+					}).catch(() => {
+						if (live) setReady(false);
+					});
+				};
+				setReady(false);
+				refresh();
+				window.addEventListener("packycode-images-updated", refresh);
+				return () => {
+					live = false;
+					window.removeEventListener("packycode-images-updated", refresh);
+				};
+			}, [call, active]);
+			if (!active || !ready) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "pkc-image-shortcut",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "pkc-btn",
+					type: "button",
+					title: t("imagesShortcutHint"),
+					onClick: () => {
+						try {
+							prepare(t("imagesDraft"));
+							setError(void 0);
+						} catch {
+							setError(t("imagesDraftBusy"));
+						}
+					},
+					children: t("imagesCreate")
+				}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pkc-error",
+					role: "alert",
+					children: error
+				})]
+			});
+		}
+		function GeneratedImage({ attachment, loadImage, openImage, t }) {
+			const [url, setUrl] = react.useState();
+			const [failed, setFailed] = react.useState(false);
+			const [attempt, setAttempt] = react.useState(0);
+			react.useEffect(() => {
+				let live = true;
+				setUrl(void 0);
+				setFailed(false);
+				Promise.resolve().then(() => loadImage(attachment)).then((value) => {
+					if (live) setUrl(value);
+				}, () => {
+					if (live) setFailed(true);
+				});
+				return () => {
+					live = false;
+				};
+			}, [
+				attachment,
+				loadImage,
+				attempt
+			]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: "pkc-generated-image",
+				type: "button",
+				title: t("imagesOpen"),
+				"aria-label": t("imagesOpen"),
+				disabled: !url && !failed,
+				onClick: (event) => {
+					if (failed) {
+						setAttempt((value) => value + 1);
+						return;
+					}
+					openImage(url, attachment, event.currentTarget);
+				},
+				children: url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: url,
+					alt: attachment.name ?? t("imagesTitle")
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: failed ? t("imagesRetryPreview") : t("imagesLoadingPreview") })
+			});
+		}
+		function PackyCodeImageResult({ block, t, loadImage, openImage }) {
+			const settled = block?.kind === "tool-result";
+			const failed = settled && block.isError === true;
+			const images = settled ? (block.content ?? []).filter((part) => part.type === "image" && part.attachment) : [];
+			const error = failed ? block.content?.find((part) => part.type === "text")?.text : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "pkc-image-result",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pkc-status",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: t("imagesTitle") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "pkc-meta",
+							children: ["PackyCode · ", t(!settled ? "imagesGenerating" : failed ? "imagesFailed" : "imagesDone")]
+						})]
+					}),
+					images.map((part) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneratedImage, {
+						attachment: part.attachment,
+						t,
+						loadImage,
+						openImage
+					}, part.attachment.attachmentId)),
+					typeof block?.meta?.requestedModel === "string" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "pkc-meta",
+						children: [
+							block.meta.requestedModel,
+							" · ",
+							String(block.meta.requestedQuality ?? "auto"),
+							" · ",
+							block.meta.width,
+							" × ",
+							block.meta.height
+						]
+					}),
+					error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "pkc-error",
+						role: "alert",
+						children: error
+					})
+				]
+			});
+		}
+		function ImageChatOutput({ node, ...props }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pkc-image-chat",
+				children: node.data.blocks.map((block) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackyCodeImageResult, {
+					block,
+					...props
+				}, block.toolCallId))
+			});
+		}
+		function installImagePresentation(ctx, t) {
+			ctx.inject(["uiConversation"], (scope) => {
+				const conversation = scope.get("uiConversation");
+				if (typeof conversation?.events?.register !== "function" || typeof conversation?.imageUrl !== "function") return;
+				const imageProps = (sessionId) => ({
+					t,
+					loadImage: (attachment) => conversation.imageUrl(sessionId, attachment),
+					openImage: (src, attachment, opener) => {
+						if (scope.get("nativeImageViewer")?.open?.({
+							items: [{
+								id: attachment.attachmentId,
+								src,
+								name: attachment.name ?? "packycode-generated.png",
+								width: attachment.width,
+								height: attachment.height
+							}],
+							opener,
+							source: "packycode-generated"
+						}) === true) return;
+						window.open(src, "_blank", "noopener,noreferrer");
+					}
+				});
+				scope.effect(() => conversation.events.register(imageConversationNode), "packycode-api: image results in chat");
+				scope.slots.inject("conversation.chat.node", () => scope.slots.register({
+					name: "conversation.chat.node",
+					key: IMAGE_CHAT_KIND,
+					inject: imageProps
+				}, ImageChatOutput));
+				scope.slots.inject("tool.call.toolview", () => scope.slots.register({
+					name: "tool.call.toolview",
+					key: "packycode_image_generate",
+					inject: imageProps
+				}, PackyCodeImageResult));
+			});
+		}
+		//#endregion
 		//#region src/client.jsx
 		/**
 		* Browser half: the PackyCode settings page and the composer balance chip.
@@ -517,52 +1230,15 @@ window.__ModuleLoader__.load({
 			});
 		}
 		const useCaller = (rpc) => react.useMemo(() => channelCaller(rpc), [rpc]);
-		/** Substitute `{name}` placeholders in a copy string. */
-		const fill = (text, values) => text.replace(/\{(\w+)\}/gu, (match, name) => values[name] === void 0 ? match : String(values[name]));
-		function formatUsd(value) {
-			if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
-			try {
-				return new Intl.NumberFormat(void 0, {
-					style: "currency",
-					currency: "USD"
-				}).format(value);
-			} catch {
-				return `$${value.toFixed(2)}`;
-			}
-		}
-		/** The clock time of an epoch-millisecond reading, for a "last read at" note. */
-		function readTime(ms) {
-			if (typeof ms !== "number" || !Number.isFinite(ms)) return "—";
-			try {
-				return new Date(ms).toLocaleTimeString(void 0, {
-					hour: "2-digit",
-					minute: "2-digit"
-				});
-			} catch {
-				return new Date(ms).toISOString().slice(11, 16);
-			}
-		}
 		function clearMessage(error) {
 			const text = typeof error?.message === "string" && error.message.length > 0 ? error.message : String(error);
 			return text.length > 200 ? text.slice(0, 200) : text;
 		}
-		const RESET_KEYS = {
-			monthly: "resetMonthly",
-			weekly: "resetWeekly",
-			daily: "resetDaily"
-		};
-		const resetLabel = (period, t) => RESET_KEYS[period] === void 0 ? void 0 : t(RESET_KEYS[period]);
 		/** Active key's usage row, preferring the key the ring currently points at. */
 		function activeUsage(balance) {
 			if (balance === void 0) return void 0;
 			return balance.keys?.find((entry) => entry.id === balance.activeId) ?? balance.keys?.[0];
 		}
-		/** How much of a key's limit is left, for its bar; undefined without a limit. */
-		function remainingShare(usage) {
-			if (usage?.unlimitedQuota === true || typeof usage?.limitUsd !== "number" || usage.limitUsd <= 0) return void 0;
-			if (typeof usage.availableUsd !== "number") return void 0;
-			return Math.max(0, Math.min(1, usage.availableUsd / usage.limitUsd));
-		}
 		/** Which catalog families a key reaches, from its per-model coverage. */
 		function reachOf(coverage) {
 			return MODEL_FAMILIES.flatMap(([name, models]) => {
@@ -661,14 +1337,6 @@ window.__ModuleLoader__.load({
 			] });
 		}
 		function KeyRow({ entry, row, group, descriptions, groupsLoading, busy, renaming, onRename, onAction, t }) {
-			const usage = row?.usage;
-			const share = remainingShare(usage);
-			const figures = [
-				usage?.unlimitedQuota === true ? [t("keyRemaining"), t("keyUnlimited")] : usage?.availableUsd === void 0 ? void 0 : [t("keyRemaining"), formatUsd(usage.availableUsd)],
-				usage?.usedUsd === void 0 ? void 0 : [t("keyUsed"), formatUsd(usage.usedUsd)],
-				usage?.limitUsd === void 0 ? void 0 : [t("accountLimit"), formatUsd(usage.limitUsd)]
-			].filter(Boolean);
-			const meta = [usage?.name === void 0 ? t("keyNameUnknown") : `${t("keyName")} ${usage.name}`, resetLabel(usage?.resetPeriod, t)].filter(Boolean).join(" · ");
 			const editing = renaming?.id === entry.id;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "pkc-row",
@@ -750,29 +1418,9 @@ window.__ModuleLoader__.load({
 							]
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "pkc-meta",
-						children: meta
-					}),
-					figures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "pkc-figures",
-						children: figures.map(([label, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: value })] }, label))
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "pkc-meta",
-						children: row?.error === void 0 ? t("keyNoBalance") : `${t("loadFailed")}: ${row.error}`
-					}),
-					share !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "pkc-bar",
-						"data-level": share < .1 ? "low" : share < .3 ? "warn" : "ok",
-						role: "presentation",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { width: `${Math.round(share * 100)}%` } })
-					}),
-					row?.stale !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "pkc-warn",
-						children: fill(t("staleNote"), {
-							time: readTime(row.stale.fetchedAt),
-							error: row.stale.error ?? ""
-						})
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyBalance, {
+						row,
+						t
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyGroups, {
 						group,
@@ -861,8 +1509,6 @@ window.__ModuleLoader__.load({
 			};
 			const keys = status?.keys ?? [];
 			const rows = balance?.keys ?? [];
-			const totals = sumBalances(rows);
-			const staleCount = rows.filter((row) => row.stale !== void 0).length;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
 				title: t("accountsTitle"),
 				aside: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -883,44 +1529,9 @@ window.__ModuleLoader__.load({
 						className: "pkc-note",
 						children: t("empty")
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "pkc-stats",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "pkc-stat",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "pkc-stat-label",
-										children: t("totalRemaining")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										className: "pkc-stat-value",
-										children: [totals.counted === 0 ? "—" : formatUsd(totals.remainingUsd) ?? "—", totals.unlimited > 0 && ` + ${t("keyUnlimited")}`]
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "pkc-stat",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "pkc-stat-label",
-										children: t("totalUsed")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "pkc-stat-value",
-										children: totals.counted === 0 ? "—" : formatUsd(totals.usedUsd) ?? "—"
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "pkc-stat",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "pkc-stat-label",
-										children: t("totalLimit")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "pkc-stat-value",
-										children: totals.counted === 0 ? "—" : totals.unlimited > 0 ? t("keyUnlimited") : formatUsd(totals.limitUsd) ?? "—"
-									})]
-								})
-							]
-						}),
-						(totals.unread > 0 || staleCount > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "pkc-note",
-							children: [totals.unread > 0 ? fill(t("totalPartial"), { count: totals.unread }) : void 0, staleCount > 0 ? fill(t("totalStale"), { count: staleCount }) : void 0].filter(Boolean).join(" ")
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BalanceTotals, {
+							rows,
+							t
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "pkc-list",
@@ -1584,6 +2195,10 @@ window.__ModuleLoader__.load({
 						call,
 						t
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackyCodeImagesCard, {
+						call,
+						t
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelsCard, {
 						call,
 						t
@@ -1661,6 +2276,8 @@ window.__ModuleLoader__.load({
 			}, "packycode-api: style");
 			const connection = ctx.get("connection");
 			const t = ctx.locale.bind(NS);
+			installImagePresentation(ctx, t);
+			const call = channelCaller(connection.rpc);
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",
 				id: "packycode-api",
@@ -1683,6 +2300,29 @@ window.__ModuleLoader__.load({
 					directory: ctx.modelDirectories.directoryFor(sessionId).store
 				})
 			}, PackyCodeComposerQuota));
+			ctx.inject(["sessions", "conversation"], (scope) => {
+				const sessions = scope.get("sessions");
+				const conversation = scope.get("conversation");
+				if (typeof sessions?.scope !== "function" || typeof conversation?.input?.for !== "function") return;
+				scope.slots.inject("conversation.input.left", () => scope.slots.register({
+					name: "conversation.input.left",
+					id: "packycode-image-create",
+					order: 31,
+					inject: (sessionId) => ({
+						call,
+						t,
+						directory: ctx.modelDirectories.directoryFor(sessionId).store,
+						prepare: (text) => {
+							const session = sessions.scope(sessionId);
+							if (session === void 0) throw new Error("Composer unavailable");
+							const input = conversation.input.for(session);
+							const draft = input.state.getSnapshot();
+							if (draft.phase !== "plain" || draft.occurrences?.length) throw new Error("Composer busy");
+							input.setDraft([draft.draft, text].filter(Boolean).join("\n\n"));
+						}
+					})
+				}, PackyCodeImageShortcut));
+			});
 		}
 		//#endregion
 		exports.apply = apply;