@klarkxy/dsh-zhihu 0.1.8 → 0.1.10

package/lib/client.js

@@ -167,10 +167,49 @@ window.__ModuleLoader__.load({
     var exports = module.exports;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
+let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/client-locale.ts
+function zhihuLocale(value) {
+	return String(value ?? "zh").startsWith("zh") ? "zh" : "en";
+}
+function translator(locale = "zh") {
+	return (zh, en) => locale === "en" ? en : zh;
+}
+/** Components below the settings root read the locale here instead of threading a prop. */
+const ZhihuLocaleContext = (0, react.createContext)("zh");
+function useZhihuLocale() {
+	return (0, react.useContext)(ZhihuLocaleContext);
+}
+const TRANSLATORS = {
+	zh: translator("zh"),
+	en: translator("en")
+};
+function useT() {
+	return TRANSLATORS[useZhihuLocale()];
+}
+/** Follow the host locale when the service is present; standalone renders stay Chinese. */
+function useHostLocale(service) {
+	const subscribe = (0, react.useCallback)((listener) => service ? service.subscribe(listener) : () => {}, [service]);
+	const snapshot = (0, react.useCallback)(() => service ? service.getSnapshot().active : "zh", [service]);
+	return zhihuLocale((0, react.useSyncExternalStore)(subscribe, snapshot, snapshot));
+}
+//#endregion
 //#region src/contracts.ts
 const ZHIHU_RPC_CHANNEL = "/zhihu";
 const ZHIHU_CREDENTIAL_REF = "ZHIHU_ACCESS_TOKEN";
+/** Official quota IDs, not local execution counters or predicted balances. */
+const ZHIHU_QUOTA_IDS = [
+	"global_search",
+	"zhihu_search",
+	"hot_list",
+	"question_answers",
+	"zhida_openai",
+	"tools",
+	"knowledge",
+	"user_data",
+	"creator"
+];
 //#endregion
 //#region src/client-state.ts
 /**
@@ -212,212 +251,504 @@ function createZhihuClientState() {
 		}
 	};
 }
-//#endregion
-//#region src/client-styles.ts
-const standaloneOutsideTheme = ":not(.radix-themes *)";
-const zhihuClientStyles = `
+Object.values({
+	/** Surfaces, from the page up to the topmost nested card. */
+	surface: [
+		"--dsw-alias-bg-base",
+		"--dsw-alias-bg-layer-1",
+		"--dsw-alias-bg-layer-2",
+		"--dsw-alias-bg-layer-3",
+		"--dsw-alias-bg-layer-4",
+		"--dsw-alias-bg-module-platform",
+		"--dsw-alias-bg-overlay"
+	],
+	/** Hairlines. l1 is near-invisible on a menu surface, so menus use l2+. */
+	border: [
+		"--dsw-alias-border-l1",
+		"--dsw-alias-border-l2",
+		"--dsw-alias-border-l3",
+		"--dsw-alias-border-l4"
+	],
+	/** Text. `caption` is menu shortcut text, `dimmed` is placeholder text. */
+	label: [
+		"--dsw-alias-label-primary",
+		"--dsw-alias-label-secondary",
+		"--dsw-alias-label-tertiary",
+		"--dsw-alias-label-caption",
+		"--dsw-alias-label-dimmed",
+		"--dsw-alias-label-error",
+		"--dsw-alias-label-primary-foreground"
+	],
+	/** Interactive fills. The `-danger` hover belongs to destructive rows. */
+	interactive: [
+		"--dsw-alias-interactive-bg-hover",
+		"--dsw-alias-interactive-bg-active",
+		"--dsw-alias-interactive-bg-hover-danger"
+	],
+	/** Accent and status. `business` is the focus ring's default colour. */
+	accent: [
+		"--dsw-alias-brand-primary",
+		"--dsw-alias-button-primary-fill",
+		"--dsw-alias-button-primary-hover",
+		"--dsw-alias-button-tool-bar-fill",
+		"--dsw-alias-button-tool-bar-hover",
+		"--dsw-alias-button-ghost-active-fill",
+		"--dsw-alias-button-ghost-active-border"
+	],
+	state: [
+		"--dsw-alias-state-business-primary",
+		"--dsw-alias-state-success-primary",
+		"--dsw-alias-state-warn-primary",
+		"--dsw-alias-state-error-primary",
+		"--dsw-alias-state-idle-primary"
+	],
+	/** Corner scale: sm 8, md 12, lg the large card, panel the modal. */
+	radius: [
+		"--dsw-radius-sm",
+		"--dsw-radius-md",
+		"--dsw-radius-lg",
+		"--dsw-radius-panel"
+	],
+	/** An elevated surface draws its edge in the shadow, so it keeps border: 0. */
+	elevation: [
+		"--dsw-elevation-soft",
+		"--dsw-elevation-stroke",
+		"--dsw-elevation-stroke-color",
+		"--dsw-elevation-panel",
+		"--dsw-elevation-prominent"
+	],
+	/** Floats, masks and scrollbars. */
+	overlay: [
+		"--dsw-menu-surface-fill",
+		"--dsw-menu-backdrop-filter",
+		"--dsw-mask-blur",
+		"--dsw-alias-bg-mask-1",
+		"--dsw-alias-menu-icon",
+		"--dsw-alias-scrollbar-bg-l2",
+		"--dsw-alias-scrollbar-hover-l2",
+		"--dsw-shadow-lv3"
+	],
+	/** Motion, focus and type axis, published by the host rather than by a component. */
+	system: [
+		"--dsw-focus-ring-width",
+		"--dsw-focus-ring-color",
+		"--dsw-font-markdown-code-font-family",
+		"--ds-transition-duration",
+		"--ds-ease-in-out",
+		"--ds-font-family-code",
+		"--dsh-scrollbar-thumb",
+		"--dsh-scrollbar-thumb-hover",
+		"--dsh-content-font-size-secondary",
+		"--dsh-content-font-delta",
+		"--dsh-frame-top-clearance"
+	]
+}).flat();
+/**
+* The host's focus ring shorthand, verbatim. Writing this per control is how
+* rings drift apart; a stylesheet that draws its own focus style should use
+* {@link officialFocus} instead. The colour fallback is the host's own default.
+*/
+const OFFICIAL_FOCUS_RING = "var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary))";
+/**
+* A complete `outline` declaration at the official geometry. `offset` defaults
+* to the 2px the native controls use; the host's inline field rules sit at 1px
+* and a segmented tab pulls the ring inside itself at -2px.
+*/
+function officialFocus(offset = "2px") {
+	return `outline: ${OFFICIAL_FOCUS_RING}; outline-offset: ${offset}`;
+}
+/**
+* An elevated surface. The host draws a raised surface's edge inside its
+* shadow rather than as a border, so a card sets `border: 0` and takes the edge
+* from the elevation — which is also why its border stays off the alias-border
+* set that a flat, non-elevated rule would use.
+*/
+function officialElevation(level) {
+	return `border: 0; box-shadow: var(--dsw-elevation-${level})`;
+}
+/**
+* The shared stylesheet for a plugin UI, scoped under that plugin's root class.
+*
+* Scoping is what keeps this safe to always-bundle into every client: the rules
+* can only match inside the plugin's own subtree, so two plugins can both mount
+* `dsh-ui-card` without either styling the other's markup.
+*
+* Each recipe matches the root element *and* its descendants, because the
+* commonest arrangement is one element that is both — a surface that carries
+* the root class and `dsh-ui-card`, or a portaled dialog that is the root and
+* the `dsh-ui-surface`. A descendant-only scope would silently leave those
+* unstyled, with no error anywhere.
+*
+* A caveat worth knowing: `Modal` and `Menu` portal to `document.body`, so their
+* content leaves the plugin's subtree entirely. A portaled surface therefore
+* needs its own root class on an element inside the portal.
+*
+* Only patterns that primitives do not provide live here. If a control appears
+* below that `Button`/`Input`/`Switch`/`Tag`/`Menu` already covers, that is a
+* bug in this file: use the primitive and delete the recipe.
+*/
+function officialUiCss(roots) {
+	const scope = (typeof roots === "string" ? [roots] : roots).map((root) => `.${root}`).join(", ");
+	return `
+/* Official DSH Web UI contract. Generated by @klarkxy/dsh-plugin-kit/official-ui.
+ * Do not hand-edit the copy inside a plugin: change this module so every plugin
+ * moves together. Scope: ${scope} */
+/* The scope rule below stays open for the whole sheet: every rule after it
+ * nests with the parent selector, so one stylesheet can cover several unrelated
+ * roots without leaking into a neighbouring plugin. Its closing brace is last. */
+${scope} {
+  color: var(--dsw-alias-label-primary);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  min-width: 0;
+
+& *, & *::before, & *::after { box-sizing: border-box; }
+& h1, & h2, & h3, & h4, & p, & figure { margin: 0; }
+/* Keyboard focus only: pointer input keeps the native resting appearance. The
+ * ring needs no radius of its own — the outline already follows the control's
+ * own border-radius, and overriding it here would flatten every control. */
+& :focus-visible { ${officialFocus()}; }
+& [hidden] { display: none !important; }
+
+/* --- Type tiers. The same 14/22 and 13/20 steps the primitives use. --- */
+& .dsh-ui-title { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--dsw-alias-label-primary); }
+& .dsh-ui-heading { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--dsw-alias-label-primary); }
+& .dsh-ui-compact { font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-primary); }
+& .dsh-ui-meta { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+& .dsh-ui-hint { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+& .dsh-ui-error { font-size: 12px; line-height: 18px; color: var(--dsw-alias-state-error-primary); }
+& .dsh-ui-warn { color: var(--dsw-alias-state-warn-primary); }
+& .dsh-ui-success { color: var(--dsw-alias-state-success-primary); }
+& .dsh-ui-muted { color: var(--dsw-alias-label-tertiary); }
+& .dsh-ui-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+& .dsh-ui-wrap { min-width: 0; overflow-wrap: anywhere; }
 
-.zhihu-settings-embed {
-  font: 400 var(--font-size-2)/1.5 var(--default-font-family);
-  color: var(--gray-12);
+/* --- Layout scaffolding. --- */
+& .dsh-ui-stack { display: flex; flex-direction: column; gap: 12px; }
+& .dsh-ui-stack-lg { display: flex; flex-direction: column; gap: 20px; }
+& .dsh-ui-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+& .dsh-ui-row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+& .dsh-ui-spacer { flex: 1; min-width: 0; }
+/* A 0.5px l2 rule is the host's section divider; reserve the same rhythm. */
+& .dsh-ui-divider { height: 0.5px; background: var(--dsw-alias-border-l2); }
+& .dsh-ui-section { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 0.5px solid var(--dsw-alias-border-l2); }
+
+/* --- Card: a raised surface whose edge lives in the shadow. --- */
+& .dsh-ui-card {
+  ${officialElevation("stroke")}
   display: flex;
   flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--dsw-radius-lg);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
   min-width: 0;
-  width: 100%;
-  max-width: 760px;
-  min-height: 0;
-  gap: 0;
 }
-.zhihu-settings-embed .zhihu-tabs {
-  margin: 0 0 var(--space-2);
-}
-.zhihu-settings-embed .zhihu-panel-body {
-  padding: var(--space-4) 0 0;
-  overflow: visible;
-}
-.zhihu-panel button:focus-visible,
-.zhihu-panel input:focus-visible,
-.zhihu-panel select:focus-visible,
-.zhihu-panel a:focus-visible {
-  box-shadow: 0 0 0 2px var(--accent-a8);
+& .dsh-ui-card--flat { border: 0.5px solid var(--dsw-alias-border-l3); box-shadow: none; }
+& .dsh-ui-card--nested { background: var(--dsw-alias-bg-layer-2); }
+& .dsh-ui-card--plain { background: none; }
+
+/* --- Field: label, control, help, error. The control itself is an
+ * official primitive, so this only owns the vertical rhythm. --- */
+& .dsh-ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+& .dsh-ui-field + .dsh-ui-field { border-top: 0.5px solid var(--dsw-alias-border-l2); padding-top: 12px; }
+& .dsh-ui-label { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--dsw-alias-label-primary); }
+& .dsh-ui-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+& .dsh-ui-help { font-size: 12px; line-height: 1.6; color: var(--dsw-alias-label-secondary); }
+& .dsh-ui-help p { margin: 0; }
+& .dsh-ui-help p + p { margin-top: 8px; }
+& .dsh-ui-required { color: var(--dsw-alias-state-error-primary); }
+& .dsh-ui-control { width: 100%; min-width: 0; }
+/* An invalid control is marked on the control, not only in the message. */
+& .dsh-ui-control[aria-invalid='true'] { border-color: var(--dsw-alias-state-error-primary); }
+& .dsh-ui-readonly { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+& .dsh-ui-readonly > dt { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+& .dsh-ui-readonly > dd { margin: 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
+
+/* --- Buttons row. A no-op container: it exists so actions line up on the
+ * trailing edge the way every native panel does. --- */
+& .dsh-ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
+& .dsh-ui-actions-end { justify-content: flex-end; }
+
+/* --- Banners. A banner is a left-rail notice, the shape used for warnings,
+ * deprecations and blocking instructions. --- */
+& .dsh-ui-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 14px;
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  border-left: 3px solid var(--dsw-alias-state-warn-primary);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-1);
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
 }
+& .dsh-ui-banner-title { font-weight: 500; color: var(--dsw-alias-state-warn-primary); }
+& .dsh-ui-banner--info { border-left-color: var(--dsw-alias-state-business-primary); }
+& .dsh-ui-banner--danger { border-left-color: var(--dsw-alias-state-error-primary); }
+& .dsh-ui-banner--success { border-left-color: var(--dsw-alias-state-success-primary); }
+& .dsh-ui-banner p { margin: 0; }
 
-.zhihu-panel {
-  font-family: var(--default-font-family);
-  font-size: var(--font-size-2);
-  color: var(--gray-12);
-  background: var(--color-panel-solid);
+/* --- Inline notice: a transient confirmation with no chrome of its own. --- */
+& .dsh-ui-notice { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-state-success-primary); }
+& .dsh-ui-notice--error { color: var(--dsw-alias-state-error-primary); }
+
+/* --- Empty and loading states. Both sit in a dashed well so an empty panel
+ * reads as "nothing here yet" rather than as a broken layout. --- */
+& .dsh-ui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 20px 16px;
+  border: 0.5px dashed var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-md);
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
 }
-.zhihu-tabs {
-  display: inline-flex;
-  gap: 2px;
-  padding: 2px;
-  margin: var(--space-2) var(--space-3) 0;
-  border-radius: var(--radius-3);
-  background: var(--gray-3);
-  box-shadow: 0 0 0 1px var(--gray-a5);
-  width: max-content;
-}
-.zhihu-tab {
-  font: inherit;
-  font-size: var(--font-size-2);
-  min-height: 28px;
-  padding: 0 var(--space-3);
+& .dsh-ui-loading { display: flex; align-items: center; gap: 8px; padding: 20px 0; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary); }
+
+/* --- Selectable list. A row is a button-sized target with a hover fill and
+ * a selected fill; the name carries the weight, the description does not. --- */
+& .dsh-ui-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+& .dsh-ui-list-scroll { max-height: min(66vh, 760px); overflow-y: auto; overflow-x: hidden; }
+& .dsh-ui-list-row { border-radius: var(--dsw-radius-md); }
+& .dsh-ui-list-row:hover { background: var(--dsw-alias-interactive-bg-hover); }
+& .dsh-ui-list-row[aria-selected='true'], & .dsh-ui-list-row[data-selected] { background: var(--dsw-alias-interactive-bg-active); }
+& .dsh-ui-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  padding: 10px 12px;
   border: 0;
-  border-radius: var(--radius-2);
-  background: transparent;
-  color: var(--gray-11);
+  border-radius: var(--dsw-radius-md);
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: start;
   cursor: pointer;
 }
-.zhihu-tab:hover { color: var(--gray-12); background: var(--gray-a3); }
-.zhihu-tab[aria-selected="true"] {
-  background: var(--accent-a3);
-  color: var(--accent-12, var(--accent-11));
-  box-shadow: 0 0 0 1px var(--gray-a5);
-  font-weight: var(--font-weight-medium);
-  transform: scale(1.04);
+& .dsh-ui-list-item:disabled { cursor: default; }
+& .dsh-ui-list-item:disabled:hover { background: none; }
+& .dsh-ui-list-name { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--dsw-alias-label-primary); overflow-wrap: anywhere; }
+& .dsh-ui-list-desc { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+
+/* --- Code and structured output. Wraps rather than scrolls, because a
+ * feature panel is read rather than scanned. --- */
+& .dsh-ui-code {
+  padding: 10px 12px;
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-1);
+  font-family: var(--ds-font-family-code, ui-monospace, 'Cascadia Mono', Consolas, monospace);
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
 }
-.zhihu-panel-body {
-  padding: var(--space-3);
+& .dsh-ui-scroll { max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
+
+/* --- A toggle row: label on the left, switch on the trailing edge. This is
+ * layout only; the switch itself is the official primitive. --- */
+& .dsh-ui-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 12px 0; }
+& .dsh-ui-toggle-row + .dsh-ui-toggle-row { border-top: 0.5px solid var(--dsw-alias-border-l2); }
+& .dsh-ui-toggle-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+& .dsh-ui-toggle-label { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--dsw-alias-label-primary); }
+
+/* --- Floating surface: a panel anchored to a trigger. This is the material
+ * a menu card is made of — the translucent fill plus its backdrop blur, with
+ * the edge riding inside the prominent elevation. A plugin that hand-rolls this
+ * is how tokens like --dsw-specific-menu get invented; use this instead. --- */
+& .dsh-ui-surface {
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
-  overflow-y: auto;
+  border: 0;
+  border-radius: var(--dsw-radius-lg);
+  background: var(--dsw-menu-surface-fill);
+  backdrop-filter: var(--dsw-menu-backdrop-filter);
+  box-shadow: var(--dsw-elevation-prominent);
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  line-height: 20px;
+  min-width: 0;
 }
-.zhihu-field { display: flex; flex-direction: column; gap: 4px; }
-.zhihu-field-label { color: var(--gray-11); font-weight: var(--font-weight-medium); }
-.zhihu-input, .zhihu-select {
-  width: 100%;
-  min-height: var(--control-h, 34px);
+& .dsh-ui-surface-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; overflow-y: auto; }
+& .dsh-ui-surface-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
+& .dsh-ui-surface-title { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--dsw-alias-label-primary); }
+
+/* --- Native select. The primitives ship no select, so a plugin that offers a
+ * closed list of choices keeps the platform control and matches the official
+ * settings field geometry exactly (34px, 0.5px l4, radius-md, layer-3). A
+ * SegmentedControl is the primitive to reach for when the choices are few
+ * enough to show at once. --- */
+& .dsh-ui-select {
   box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
   font: inherit;
-  font-family: var(--default-font-family);
-  font-size: var(--font-size-2);
-  color: var(--gray-12);
-  background: var(--color-surface);
-  border: 1px solid var(--gray-6);
-  border-radius: var(--radius-2);
-  padding: 0 8px;
-}
-.zhihu-row { display: flex; align-items: center; gap: var(--space-2); }
-.zhihu-button {
-  font: inherit; font-size: var(--font-size-2); min-height: var(--control-h, 34px); color: var(--gray-11); background: none;
-  border: 1px solid var(--gray-6); border-radius: var(--radius-2);
-  padding: 0 12px; cursor: pointer;
-}
-.zhihu-button:hover { background: var(--gray-a3); }
-.zhihu-button:disabled { opacity: 0.5; cursor: default; }
-.zhihu-button-primary {
-  color: var(--accent-contrast);
-  background: var(--accent-9);
-  border-color: var(--accent-9);
-}
-.zhihu-button-primary:hover:not(:disabled) { background: var(--accent-10); }
-.zhihu-button-danger { color: var(--red-11); }
-.zhihu-hint { color: var(--gray-11); font-size: var(--font-size-2); margin: 0; }
-.zhihu-intro { margin: 0; color: var(--gray-11); line-height: 1.6; }
-.zhihu-field > .zhihu-intro { margin-bottom: var(--space-2); }
-.zhihu-settings, .zhihu-knowledge { display: flex; flex-direction: column; gap: var(--space-3); }
-.zhihu-knowledge > p { margin: 0; }
-.zhihu-status { color: var(--gray-11); margin: 0; padding: var(--space-2) 0; }
-.zhihu-error { color: var(--red-11); margin: 0; padding: var(--space-2) 0; }
-.zhihu-warning { color: var(--red-11); margin: 0; }
-.zhihu-saved { color: var(--green-11); margin: 0; }
-.zhihu-link { color: var(--accent-11); }
-/* Ordinary DSH paints a light fill on bare <a>. Keep plugin links
-   transparent so computed contrast falls through to the panel surface. */
-.zhihu-panel .zhihu-link, .zhihu-panel .zhihu-result-title { background: transparent; }
-.zhihu-panel a.zhihu-link,
-.zhihu-panel a.zhihu-result-title {
-  background-color: transparent;
-}
-.zhihu-stale {
-  color: var(--gray-11);
-  background: var(--gray-a3);
-  border-radius: var(--radius-2);
-  padding: var(--space-2);
-}
-.zhihu-results { display: flex; flex-direction: column; gap: var(--space-2); }
-.zhihu-results-summary { color: var(--gray-11); font-weight: var(--font-weight-medium); margin: 0; }
-.zhihu-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
-.zhihu-result-item {
-  border: 1px solid var(--gray-6);
-  border-radius: var(--radius-2);
-  padding: var(--space-2);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+}
+& .dsh-ui-select:focus-visible { outline: none; border-color: var(--dsw-alias-state-business-primary); }
+& .dsh-ui-select:disabled { color: var(--dsw-alias-label-tertiary); cursor: default; }
+& .dsh-ui-select[aria-invalid='true'] { border-color: var(--dsw-alias-state-error-primary); }
+
+/* Long panels scroll inside themselves instead of growing the host page. */
+& .dsh-ui-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+& .dsh-ui-panel-wide { max-width: 100%; }
+
+@media (prefers-reduced-motion: reduce) {
+  & *, & *::before, & *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
+}
+}
+`.replace(/^& (\.dsh-ui-[a-z0-9-]+)(?![+>~])/gm, (_match, className) => `&${className}, & ${className}`);
+}
+//#endregion
+//#region src/client-styles.ts
+/**
+* The shared contract paints this page: the type tiers, the card, the field,
+* the banners, the empty state, the focus ring and every control's own recipe.
+* What is left here is only the geometry the contract does not cover — the
+* reading width of the plugin page, two inline SVG charts, the quota matrix and
+* the day table.
+*
+* Nothing below declares a colour of its own beyond naming a host token for a
+* feature the primitives have no equivalent for (a destructive hover, an inset
+* snippet well, a legend chip), and nothing carries a literal fallback: the
+* host publishes both themes and a literal would pin one of them.
+*
+* Every plugin rule nests under the plugin root, as the contract does, so a
+* .zhihu-* class never paints a neighbouring plugin. Content portaled into a
+* Modal carries the root class on its own element for the same reason.
+*/
+const zhihuClientStyles = `${officialUiCss("zhihu-panel")}
+.zhihu-panel {
+/* --- Plugin page. The contract's rules nest under the scope selector, so the
+ * root's own column and reading width are the one part it cannot reach. --- */
+&.zhihu-settings-embed {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  background: var(--color-panel-solid);
+  gap: 12px;
+  width: 100%;
+  max-width: 760px;
+  min-width: 0;
+}
+/* The tab strip is a primitive; this only places it in the page column. */
+.zhihu-tabs { margin: 0; }
+
+/* --- Fields. The official Input is an inline-flex wrapper, so a form-width
+ * field states that width once instead of per call site. --- */
+.zhihu-input { width: 100%; }
+
+/* --- Actions. A destructive button keeps the outlined resting appearance every
+ * other action uses and only shows its tone under the pointer or the keyboard. */
+.zhihu-button-danger:hover:not(:disabled),
+.zhihu-button-danger:focus-visible {
+  color: var(--dsw-alias-state-error-primary);
+  border-color: var(--dsw-alias-state-error-primary);
+  background: var(--dsw-alias-interactive-bg-hover-danger);
 }
-.zhihu-result-item:hover { background: var(--gray-3); }
-.zhihu-result-title { font-weight: var(--font-weight-medium); color: var(--gray-12); }
-.zhihu-result-meta { color: var(--gray-11); font-size: var(--font-size-2); }
-.zhihu-result-summary { color: var(--gray-11); }
+
+/* --- Disclosures. The capability and fine-print blocks use the host
+ * DisclosureRow; only the reasoning block is still a native <summary>. --- */
+.zhihu-ask-reasoning > summary { cursor: pointer; width: fit-content; }
+.zhihu-guide-list { margin: 4px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; }
+
+/* --- Result rows. The card, the row and the name all come from the contract; a
+ * matched snippet is the one inset well the panel needs of its own. --- */
 .zhihu-result-snippet {
-  color: var(--gray-11);
-  background: var(--gray-3);
-  border-radius: var(--radius-2);
-  padding: 4px 8px;
-}
-.zhihu-ask-content { white-space: pre-wrap; line-height: 1.7; color: var(--gray-12); }
-.zhihu-ask-reasoning { color: var(--gray-11); font-size: var(--font-size-2); }
-.zhihu-status-grid { display: flex; gap: var(--space-2); margin: 0; align-items: baseline; }
-.zhihu-status-label { color: var(--gray-11); font-weight: var(--font-weight-medium); }
-.zhihu-status-value { margin: 0; display: flex; align-items: center; gap: 6px; }
-.zhihu-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
-.zhihu-dot-configured { background: var(--green-11); }
-.zhihu-dot-missing { background: var(--gray-9); }
-.zhihu-dot-locked { background: var(--red-9); }
-.zhihu-field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
-.zhihu-settings .zhihu-guide { border: 0; padding: 0; color: var(--gray-11); font-size: var(--font-size-1); }
-.zhihu-settings .zhihu-guide summary { cursor: pointer; width: fit-content; }
-.zhihu-settings .zhihu-guide p { margin-top: var(--space-2); font-size: var(--font-size-1); }
-.zhihu-settings :is(.zhihu-field-heading a,.zhihu-status-grid) { font-size: var(--font-size-1); }
-.zhihu-settings :is(a,summary):focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; }
-.zhihu-guide {
-  border: 1px solid var(--gray-6);
-  border-radius: var(--radius-2);
-  padding: var(--space-2);
-}
-.zhihu-guide-title { margin: 0 0 4px; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); font-family: var(--default-font-family); }
-.zhihu-guide-steps { margin: 0; padding-left: 18px; color: var(--gray-11); line-height: 1.7; }
-.zhihu-scopes { display: flex; gap: var(--space-3); flex-wrap: wrap; }
-.zhihu-scope {
-  display: inline-flex; align-items: center; gap: 4px; color: var(--gray-11);
-  font: inherit; background: none; border: 1px solid var(--gray-6); border-radius: var(--radius-2);
-  padding: 0 10px; min-height: var(--control-h, 34px); cursor: pointer;
-}
-.zhihu-scope.is-on, .zhihu-scope[aria-pressed="true"] {
-  color: var(--accent-11); background: var(--accent-a3); border-color: var(--accent-a6);
-}
-.zhihu-input.ui-input { width: 100%; }
-.zhihu-usage { display: flex; flex-direction: column; gap: var(--space-3); }
-.zhihu-usage-intro { margin: 0; color: var(--gray-11); line-height: 1.6; }
-.zhihu-usage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-2); }
-.zhihu-usage-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: var(--space-2); border: 1px solid var(--gray-6); border-radius: var(--radius-2); background: var(--color-panel-solid); }
-.zhihu-usage-card:hover { background: var(--gray-a3); }
-.zhihu-usage-card-label { color: var(--gray-11); font-size: var(--font-size-2); }
-.zhihu-usage-card-value { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; color: var(--gray-12); }
-.zhihu-usage-card-unit { margin-left: 4px; color: var(--gray-11); font-size: var(--font-size-2); font-weight: 400; }
-.zhihu-usage-heading { margin: 0; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); color: var(--gray-11); font-family: var(--default-font-family); }
-.zhihu-usage-legend { display: flex; flex-wrap: wrap; gap: 6px var(--space-3); margin: 0; padding: 0; list-style: none; color: var(--gray-11); font-size: var(--font-size-2); }
-.zhihu-usage-legend li { display: inline-flex; align-items: center; gap: 6px; }
-.zhihu-chart-chip { width: 8px; height: 8px; border-radius: 2px; flex: none; }
-.zhihu-chart-chip-ok { background: var(--accent-9); }
-.zhihu-chart-chip-fail { background: var(--red-9); }
-.zhihu-chart { width: 100%; height: auto; aspect-ratio: 600 / 176; display: block; }
-.zhihu-chart-bar-ok { fill: var(--accent-9); }
-.zhihu-chart-bar-fail { fill: var(--red-9); }
-.zhihu-chart-hit { fill: transparent; }
-.zhihu-chart-grid { stroke: var(--gray-6); stroke-width: 1; }
-.zhihu-chart-axis { fill: var(--gray-11); font-size: var(--font-size-1); font-family: var(--code-font-family); }
-.zhihu-chart-tick { fill: var(--gray-11); font-size: var(--font-size-1); font-family: var(--code-font-family); }
-.zhihu-chart-value { fill: var(--gray-11); font-size: var(--font-size-1); font-family: var(--code-font-family); }
+  display: block;
+  padding: 6px 10px;
+  border-radius: var(--dsw-radius-sm);
+  background: var(--dsw-alias-bg-layer-2);
+}
+.zhihu-ask-content { white-space: pre-wrap; }
+
+/* --- Open platform. The section is the last block of its tab, so it keeps a
+ * trailing hairline; the raw response scrolls instead of growing the page. --- */
+.zhihu-open-platform { padding-bottom: 16px; border-bottom: 0.5px solid var(--dsw-alias-border-l2); }
+.zhihu-open-platform-quota > legend { padding: 0 8px 0 0; }
+.zhihu-open-platform-data { max-height: 480px; overflow: auto; margin: 8px 0 0; }
+
+/* --- Usage. The stat tiles are a grid and the day list is a table, neither of
+ * which the contract has a recipe for; figures align in the columns they sit
+ * in, so a column of counts scans as a column. --- */
+.zhihu-usage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 8px; }
+.zhihu-usage-value { font-variant-numeric: tabular-nums; }
 .zhihu-usage-table-wrap { overflow-x: auto; }
 .zhihu-usage-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
-.zhihu-usage-table th, .zhihu-usage-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--gray-6); color: var(--gray-11); }
-.zhihu-usage-table th:first-child, .zhihu-usage-table td:first-child { text-align: left; }
-.zhihu-usage-table th { color: var(--gray-11); font-weight: var(--font-weight-medium); }
+.zhihu-usage-table th,
+.zhihu-usage-table td { padding: 4px 6px; text-align: right; border-bottom: 0.5px solid var(--dsw-alias-border-l2); color: var(--dsw-alias-label-secondary); }
+.zhihu-usage-table th:first-child,
+.zhihu-usage-table td:first-child { text-align: start; }
+.zhihu-usage-table th { color: var(--dsw-alias-label-tertiary); font-weight: 500; }
+
+/* --- Usage chart. Inline SVG cannot read a CSS module, so the bars and their
+ * axis carry their own geometry and take every colour from a host token. --- */
+.zhihu-chart-chip { width: 8px; height: 8px; border-radius: var(--dsw-radius-sm); flex: none; }
+.zhihu-chart-chip-ok { background: var(--dsw-alias-state-business-primary); }
+.zhihu-chart-chip-fail { background: var(--dsw-alias-state-error-primary); }
+.zhihu-chart { width: 100%; height: auto; aspect-ratio: 600 / 176; display: block; }
+.zhihu-chart-bar-ok { fill: var(--dsw-alias-state-business-primary); }
+.zhihu-chart-bar-fail { fill: var(--dsw-alias-state-error-primary); }
+.zhihu-chart-hit { fill: transparent; }
+.zhihu-chart-grid { stroke: var(--dsw-alias-border-l2); stroke-width: 1; }
+.zhihu-chart-axis,
+.zhihu-chart-tick,
+.zhihu-chart-value { fill: var(--dsw-alias-label-secondary); font-size: var(--dsh-content-font-size-secondary); font-family: var(--ds-font-family-code); }
+
+/* --- Quota matrix. One row per API, one column per field: the header carries
+ * that field's own maximum, so a bar only ever states "this share of this
+ * column's maximum". The rule is a 3px underline under the figure, right-anchored
+ * to the digits it belongs to, so scanning one column is easy and the number
+ * stays the primary read. --- */
+.zhihu-quota-scroll { overflow-x: auto; }
+.zhihu-quota-table { width: 100%; border-collapse: collapse; }
+.zhihu-quota-table th,
+.zhihu-quota-table td { padding: 5px 8px; vertical-align: middle; }
+.zhihu-quota-name { text-align: start; font-weight: 400; color: var(--dsw-alias-label-primary); }
+.zhihu-quota-corner { text-align: start; font-weight: 500; color: var(--dsw-alias-label-secondary); }
+.zhihu-quota-head { text-align: end; }
+.zhihu-quota-head-label { display: block; font-weight: 500; color: var(--dsw-alias-label-secondary); }
+.zhihu-quota-head-scale { display: block; font-weight: 400; color: var(--dsw-alias-label-tertiary); }
+.zhihu-quota-cell { text-align: end; }
+.zhihu-quota-value { display: block; font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-primary); }
+/* The ceiling is already in the fraction, so it steps back: same figures, less
+ * weight on the part that only supplies the denominator. */
+.zhihu-quota-of { color: var(--dsw-alias-label-tertiary); }
+.zhihu-quota-track { display: block; height: 3px; margin-top: 3px; border-radius: var(--dsw-radius-sm); background: var(--dsw-alias-bg-layer-3); overflow: hidden; }
+.zhihu-quota-fill { display: block; height: 100%; margin-inline-start: auto; border-radius: inherit; background: var(--dsw-alias-state-business-primary); }
+@media (max-width: 480px) {
+  /* The columns keep their room and the wrapper scrolls; crushing three scales
+   * into a phone width is what made the bars meaningless in the first place. */
+  .zhihu-quota-table { min-width: 24rem; }
+  .zhihu-quota-table th,
+  .zhihu-quota-table td { padding: 5px 6px; }
+}
+
+/* --- File field. The input is visually hidden but stays focusable and in the
+ * accessibility tree; its <label> is the visible trigger, so a click on the
+ * label opens the file dialog natively and keyboard focus rings the label. --- */
 .zhihu-file {
   position: absolute;
   width: 1px;
@@ -429,151 +760,71 @@ const zhihuClientStyles = `
   white-space: nowrap;
   border: 0;
 }
-.zhihu-upload-confirm {
-  border: 1px solid var(--gray-6);
-  border-radius: var(--radius-2);
-  padding: var(--space-2);
-  color: var(--gray-11);
+.zhihu-file-trigger {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-md);
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  flex: none;
 }
+.zhihu-file-trigger:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.zhihu-file-trigger[aria-disabled="true"] { opacity: .5; pointer-events: none; }
+.zhihu-file:focus-visible + .dsh-ui-row .zhihu-file-trigger { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px; }
+
 /* 活动反馈:三点呼吸(pulse-dots),参数改写自 Amicro(MIT License,
    Copyright (c) 2026 Syed Subhan Uddin);装饰元素 aria-hidden。 */
-@keyframes zhihu-activity-pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
-.zhihu-dots { display: inline-flex; align-items: center; gap: 3px; margin-inline-end: .4em; vertical-align: middle; color: var(--accent-9); }
+.zhihu-dots { display: inline-flex; align-items: center; gap: 3px; margin-inline-end: .4em; vertical-align: middle; color: var(--dsw-alias-state-business-primary); }
 .zhihu-dots i { width: .32em; height: .32em; min-width: 3px; min-height: 3px; border-radius: 50%; background: currentColor; animation: zhihu-activity-pulse 1.4s ease infinite; }
 .zhihu-dots i:nth-child(2) { animation-delay: .2s; }
 .zhihu-dots i:nth-child(3) { animation-delay: .4s; }
 @media (prefers-reduced-motion: reduce) {
-  .zhihu-panel, .zhihu-panel * {
-    animation: none !important; transition: none !important;
-    transform: none !important; filter: none !important;
-  }
+  /* Stop the loop outright so the three dots stay lit instead of flickering. */
   .zhihu-dots i { animation: none; }
 }
-/* Local tokens follow the host theme when the settings page is outside Radix. */
-.zhihu-panel${standaloneOutsideTheme} {
-
-  --default-font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
-  --code-font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
-  --font-weight-medium: 500;
-  --font-size-1: 13px;
-  --font-size-2: 14px;
-  --font-size-3: 16px;
-  --font-size-4: 18px;
-  --font-size-5: 20px;
-  --font-size-6: 24px;
-  --font-size-7: 28px;
-  --font-size-8: 35px;
-  --font-size-9: 60px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 24px;
-  --radius-2: 4px;
-  --radius-3: 6px;
-  --control-h: 34px;
-  --gray-1: #fcfcfc;
-  --gray-2: #f9f9f9;
-  --gray-3: #f0f0f0;
-  --gray-4: #e8e8e8;
-  --gray-5: #e0e0e0;
-  --gray-6: #d9d9d9;
-  --gray-7: #cecece;
-  --gray-8: #bbbbbb;
-  --gray-9: #8d8d8d;
-  --gray-10: #838383;
-  --gray-11: #646464;
-  --gray-12: #202020;
-  --gray-a2: #00000006;
-  --gray-a3: #0000000f;
-  --gray-a4: #00000017;
-  --gray-a5: #0000001f;
-  --gray-a6: #00000026;
-  --accent-8: #8da4ef;
-  --accent-9: #3e63dd;
-  --accent-10: #3358d4;
-  --accent-11: #3a5bc7;
-  --accent-a3: #0047f112;
-  --accent-a4: #0044ff1e;
-  --accent-a8: #0034dc72;
-  --accent-contrast: #ffffff;
-  --red-9: #e5484d;
-  --red-11: #ce2c31;
-  --green-9: #30a46c;
-  --green-11: #218358;
-  --amber-a4: #ffd40063;
-  --amber-a6: #eab5008c;
-  --color-background: #ffffff;
-  --color-panel-solid: #ffffff;
-  --color-surface: rgba(255, 255, 255, 0.85);
-  --shadow-2: 0 0 0 1px #0000000f, 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 1px 0 #00000006, 0 2px 1px -1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-  --shadow-3: 0 0 0 1px #0000000f, 0 2px 3px -2px #0000000f, 0 3px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 16px -8px rgba(0, 0, 0, 0.1);
-  --shadow-4: 0 0 0 1px #0000000f, 0 8px 40px rgba(0, 0, 0, 0.05), 0 12px 32px -16px #0000000f;
-  color-scheme: light;
-}
-html:not([data-theme]) body[data-ds-dark-theme] .zhihu-panel${standaloneOutsideTheme},
-:root[data-theme="dark"] .zhihu-panel${standaloneOutsideTheme} {
+}
 
-  --default-font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
-  --code-font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
-  --font-weight-medium: 500;
-  --font-size-1: 13px;
-  --font-size-2: 14px;
-  --font-size-3: 16px;
-  --font-size-4: 18px;
-  --font-size-5: 20px;
-  --font-size-6: 24px;
-  --font-size-7: 28px;
-  --font-size-8: 35px;
-  --font-size-9: 60px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 24px;
-  --radius-2: 4px;
-  --radius-3: 6px;
-  --control-h: 34px;
-  --gray-1: #111111;
-  --gray-2: #191919;
-  --gray-3: #222222;
-  --gray-4: #2a2a2a;
-  --gray-5: #313131;
-  --gray-6: #3a3a3a;
-  --gray-7: #484848;
-  --gray-8: #606060;
-  --gray-9: #6e6e6e;
-  --gray-10: #7b7b7b;
-  --gray-11: #b4b4b4;
-  --gray-12: #eeeeee;
-  --gray-a2: #ffffff09;
-  --gray-a3: #ffffff12;
-  --gray-a4: #ffffff1b;
-  --gray-a5: #ffffff22;
-  --gray-a6: #ffffff2c;
-  --accent-8: #435db1;
-  --accent-9: #3e63dd;
-  --accent-10: #5472e4;
-  --accent-11: #9eb1ff;
-  --accent-a3: #2f62ff3c;
-  --accent-a4: #3566ff57;
-  --accent-a8: #5b81feac;
-  --accent-contrast: #ffffff;
-  --red-9: #e5484d;
-  --red-11: #ff9592;
-  --green-9: #30a46c;
-  --green-11: #3dd68c;
-  --amber-a4: #fc820032;
-  --amber-a6: #fd9b0051;
-  --color-background: #111111;
-  --color-panel-solid: #191919;
-  --color-surface: rgba(0, 0, 0, 0.25);
-  --shadow-2: 0 0 0 1px #ffffff2c, 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
-  --shadow-3: 0 0 0 1px #ffffff2c, 0 2px 3px -2px rgba(0, 0, 0, 0.15), 0 3px 8px -2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
-  --shadow-4: 0 0 0 1px #ffffff2c, 0 8px 40px rgba(0, 0, 0, 0.15), 0 12px 32px -16px rgba(0, 0, 0, 0.3);
-  color-scheme: dark;
+/* --- Links. Ordinary DSH paints a light fill on a bare <a>, so plugin links
+ * stay transparent and the computed contrast falls through to the card behind
+ * them. Anchoring the selector here also outranks the contract's own row-name
+ * colour, so a result title reads as a link rather than as body text. It sits
+ * outside the nested block because it already names the root. */
+.zhihu-panel a.zhihu-link {
+  color: var(--dsw-alias-brand-primary);
+  background: none;
 }
+
+/* Keyframes cannot nest inside a style rule; the name is plugin-prefixed. */
+@keyframes zhihu-activity-pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
 `;
+//#endregion
+//#region src/client-host-ui.tsx
+/**
+* Folded fine print: one concise sentence stays in the flow, the detail list
+* sits behind the host disclosure row. Children are `<li>` items.
+*/
+function ZhihuDetails(props) {
+	const [open, setOpen] = (0, react.useState)(props.defaultOpen === true);
+	const toggle = (0, react.useCallback)(() => setOpen((value) => !value), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "zhihu-guide",
+		"data-testid": props.testId,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.DisclosureRow, {
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChecklistOutlineRegular, {}),
+			title: props.title,
+			open,
+			expandable: true,
+			expandOnRowClick: true,
+			onToggle: toggle,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "zhihu-guide-list dsh-ui-help",
+				children: props.children
+			})
+		})
+	});
+}
 /** React KeyboardEvent: isComposing/keyCode live on nativeEvent, not the synthetic event. */
 function nativeKeyFlags(event) {
 	const native = event.nativeEvent;
@@ -620,8 +871,8 @@ function hostComponentsFromRenderProps(props) {
 }
 function renderInput(Input, props) {
 	if (Input) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, { ...props });
-	const { onChange, ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+	const { onChange, ref, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
 		...rest,
 		onChange: (event) => onChange(event.target.value)
 	});
@@ -629,6 +880,7 @@ function renderInput(Input, props) {
 function renderSelect(Select, props, className) {
 	if (Select) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, { ...props });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		id: props.id,
 		className,
 		value: props.value,
 		disabled: props.disabled,
@@ -640,7 +892,21 @@ function renderSelect(Select, props, className) {
 		}, option.value === "" ? "__empty" : option.value))
 	});
 }
-/** Prefer a structurally supplied host control; standalone Web needs no private UI package. */
+/**
+* The host's own Button still wins whenever the slot supplies one, so a page
+* rendered inside DSH keeps the surrounding chrome. Standalone there is no host
+* to defer to, and the plugin renders the official primitive instead of a
+* hand-rolled `<button>`: the two legacy variant names the call sites use are
+* mapped onto it here. `danger` has no primitive variant, so it keeps the
+* outlined appearance and takes its tone from a class in the plugin stylesheet
+* — the way every other destructive action in the host reads.
+*/
+const BUTTON_VARIANT = {
+	default: "outline",
+	primary: "primary",
+	danger: "outline",
+	icon: "ghost"
+};
 const ZhihuButton = (0, react.forwardRef)(function ZhihuButton({ host, variant, className, ...rest }, ref) {
 	if (host) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(host, {
 		ref,
@@ -648,21 +914,861 @@ const ZhihuButton = (0, react.forwardRef)(function ZhihuButton({ host, variant,
 		className,
 		...rest
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 		ref,
-		type: "button",
-		className: [variant === "primary" ? "primary-action" : variant === "danger" ? "danger-action" : variant === "icon" ? "icon-button" : "", className].filter(Boolean).join(" "),
+		variant: BUTTON_VARIANT[variant ?? "default"],
+		className,
 		...rest
 	});
 });
 //#endregion
+//#region src/client-open-platform.tsx
+const OPERATION_COPY = [
+	{
+		value: "question.recommendations",
+		zh: "适合回答的问题",
+		en: "Questions to answer"
+	},
+	{
+		value: "question.answers",
+		zh: "问题回答摘要（非全文）",
+		en: "Answer summaries (not full text)"
+	},
+	{
+		value: "content.detail",
+		zh: "本人创作全文",
+		en: "My content (full text)"
+	},
+	{
+		value: "content.comments",
+		zh: "本人创作评论",
+		en: "Comments on my content"
+	},
+	{
+		value: "creator.account.stats",
+		zh: "账号创作数据",
+		en: "Account creator stats"
+	},
+	{
+		value: "creator.content.stats",
+		zh: "单篇创作数据",
+		en: "Per-post creator stats"
+	},
+	{
+		value: "quota",
+		zh: "官方每日额度",
+		en: "Official daily quota"
+	}
+];
+function openPlatformOptions(t = translator()) {
+	return OPERATION_COPY.map((option) => ({
+		value: option.value,
+		label: t(option.zh, option.en)
+	}));
+}
+openPlatformOptions();
+const createOpenPlatformForm = () => ({
+	query: "",
+	count: "5",
+	questionUrl: "",
+	contentUrl: "",
+	offset: "0",
+	limit: "20",
+	order: "score",
+	contentType: "all",
+	startDate: "",
+	endDate: "",
+	apiIds: []
+});
+const isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+/** Int64 stays decimal text throughout the browser; never round-trip through Number. */
+function openPlatformOffset(value) {
+	if (typeof value !== "string" || !/^\d+$/.test(value)) return null;
+	const decimal = value.replace(/^0+(?=\d)/, "");
+	return decimal.length < 19 || decimal.length === 19 && decimal <= "9223372036854775807" ? decimal : null;
+}
+/** `field` is the user-facing name; `param` stays in the message so a log still maps to the API. */
+function integer(value, maximum, field, param, t) {
+	const message = t(`${field}（${param}）必须是 1–${maximum} 的整数。`, `${field} (${param}) must be a whole number from 1 to ${maximum}.`);
+	if (!/^\d+$/.test(value.trim())) throw new Error(message);
+	const n = Number(value);
+	if (!Number.isInteger(n) || n < 1 || n > maximum) throw new Error(message);
+	return n;
+}
+function contentUrl(value, question, t) {
+	const clean = value.trim();
+	const invalid = t("须为有效的 HTTPS 知乎链接。", "Must be a valid HTTPS Zhihu link.");
+	if (!clean || /[\u0000-\u0020\u007f\\]/.test(clean)) throw new Error(invalid);
+	let url;
+	try {
+		url = new URL(clean);
+	} catch {
+		throw new Error(invalid);
+	}
+	const pathOk = question ? url.hostname === "www.zhihu.com" && /^\/question\/\d+\/?$/.test(url.pathname) : url.hostname === "www.zhihu.com" && /^\/(?:answer\/\d+|question\/\d+\/answer\/\d+|pin\/\d+|zvideo\/\d+)\/?$/.test(url.pathname) || url.hostname === "zhuanlan.zhihu.com" && /^\/p\/\d+\/?$/.test(url.pathname);
+	if (url.protocol !== "https:" || url.username || url.password || url.port || !pathOk) throw new Error(question ? t("问题链接须为 https://www.zhihu.com/question/{id}。", "The question link must be https://www.zhihu.com/question/{id}.") : t("内容链接须为知乎回答、文章、想法或视频。", "The content link must be a Zhihu answer, article, pin or video."));
+	return clean;
+}
+function validDate(value) {
+	if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || value.startsWith("0000")) return false;
+	const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+	return Number.isFinite(date.getTime()) && date.toISOString().slice(0, 10) === value;
+}
+/** Browser-only validation; authoritative validation remains with the existing RPC. */
+function buildOpenPlatformParams(operation, form, t = translator()) {
+	if (!OPERATION_COPY.some((option) => option.value === operation)) throw new Error(t("未知操作。", "Unknown operation."));
+	const params = {};
+	if (operation === "question.recommendations") {
+		if (form.query.trim()) params.query = form.query.trim();
+		params.count = integer(form.count, 20, t("数量", "Count"), "count", t);
+	}
+	if (operation === "question.answers") params.questionUrl = contentUrl(form.questionUrl, true, t);
+	if ([
+		"content.detail",
+		"content.comments",
+		"creator.content.stats"
+	].includes(operation)) params.contentUrl = contentUrl(form.contentUrl, false, t);
+	if (operation === "question.answers" || operation === "content.comments") {
+		const offset = openPlatformOffset(form.offset.trim());
+		if (offset === null) throw new Error(t("起始位置（offset）必须是非负整数。", "Start position (offset) must be a non-negative whole number."));
+		params.offset = offset;
+		params.limit = integer(form.limit, 50, t("每页数量", "Page size"), "limit", t);
+	}
+	if (operation === "content.comments") {
+		if (![
+			"score",
+			"reverse",
+			"ascending"
+		].includes(form.order)) throw new Error(t("评论排序无效。", "Invalid comment order."));
+		params.order = form.order;
+	}
+	if (operation === "creator.account.stats") {
+		if (![
+			"all",
+			"answer",
+			"article",
+			"pin",
+			"zvideo"
+		].includes(form.contentType)) throw new Error(t("内容类型无效。", "Invalid content type."));
+		params.contentType = form.contentType;
+	}
+	if (operation === "creator.account.stats" || operation === "creator.content.stats") {
+		const start = form.startDate.trim(), end = form.endDate.trim();
+		if (start || end) {
+			if (!validDate(start) || !validDate(end)) throw new Error(t("开始与结束日期须同时填写有效的 YYYY-MM-DD，或同时留空。", "Fill both start and end dates as YYYY-MM-DD, or leave both empty."));
+			if (end < start) throw new Error(t("结束日期不得早于开始日期。", "The end date cannot be before the start date."));
+			params.startDate = start;
+			params.endDate = end;
+		}
+	}
+	if (operation === "quota") {
+		if (!Array.isArray(form.apiIds) || form.apiIds.some((id) => !ZHIHU_QUOTA_IDS.includes(id))) throw new Error(t("包含未知的额度项。", "Contains an unknown quota item."));
+		if (form.apiIds.length) params.apiIds = [...new Set(form.apiIds)];
+	}
+	return params;
+}
+function jsonValue(value, depth = 0) {
+	if (depth > 64) return false;
+	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+	if (typeof value === "number") return Number.isFinite(value);
+	if (Array.isArray(value)) return value.every((item) => jsonValue(item, depth + 1));
+	return isRecord(value) && Object.values(value).every((item) => jsonValue(item, depth + 1));
+}
+function parseOpenPlatformResponse(operation, raw) {
+	if (!isRecord(raw) || raw.ok !== true) {
+		if (isRecord(raw) && raw.ok === false && isRecord(raw.error) && typeof raw.error.message === "string") throw new Error(`${typeof raw.error.code === "string" ? raw.error.code + "：" : ""}${raw.error.message}`);
+		throw new Error("RPC 返回格式无效。");
+	}
+	const value = raw.value;
+	if (!isRecord(value) || value.version !== 1 || value.operation !== operation || !isRecord(value.data) || !jsonValue(value.data)) throw new Error("开放平台响应格式无效。");
+	if (value.quotaId !== void 0 && !ZHIHU_QUOTA_IDS.includes(value.quotaId)) throw new Error("响应额度项无效。");
+	if (value.paging !== void 0 && (!isRecord(value.paging) || typeof value.paging.canContinue !== "boolean" || value.paging.isEnd !== void 0 && typeof value.paging.isEnd !== "boolean" || value.paging.warning !== void 0 && typeof value.paging.warning !== "string")) throw new Error("分页响应格式无效。");
+	return value;
+}
+function openPlatformNextOffset(result, currentOffset) {
+	if (!result || !["question.answers", "content.comments"].includes(result.operation) || result.paging?.canContinue !== true || result.paging.isEnd === true) return null;
+	const next = openPlatformOffset(result.paging.nextOffset), current = openPlatformOffset(currentOffset);
+	if (next === null || current === null) return null;
+	return next.length > current.length || next.length === current.length && next > current ? next : null;
+}
+/** Shared lineage executor, also testable without a DOM. Cancelled/superseded replies never publish. */
+async function requestOpenPlatform(rpc, state, operation, params, publish) {
+	const { ticket, signal } = state.begin();
+	try {
+		const raw = await rpc.call(ZHIHU_RPC_CHANNEL, operation, params, signal);
+		if (!state.isCurrent(ticket)) return;
+		publish({ value: parseOpenPlatformResponse(operation, raw) });
+	} catch (error) {
+		if (state.isCurrent(ticket)) publish({ error: error instanceof Error ? error.message : String(error) });
+	}
+}
+function ZhihuOpenPlatformSection({ rpc, Button, Input, Select, quotaOnly = false, selectedOperation }) {
+	const t = useT();
+	const [operation, setOperation] = (0, react.useState)(quotaOnly ? "quota" : "question.recommendations");
+	const [form, setForm] = (0, react.useState)(createOpenPlatformForm);
+	const [result, setResult] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)("");
+	const [loading, setLoading] = (0, react.useState)(false);
+	const [stale, setStale] = (0, react.useState)(false);
+	const state = (0, react.useRef)(createZhihuClientState()).current;
+	const activeOperation = quotaOnly ? "quota" : selectedOperation ?? operation;
+	/** Switching operation or transport: the old result no longer belongs here. */
+	const reset = () => {
+		state.noteInput();
+		setLoading(false);
+		setResult(null);
+		setStale(false);
+		setError("");
+	};
+	/** Editing a field: abort in flight, keep the last result, flag it stale. */
+	const edited = () => {
+		state.noteInput();
+		setLoading(false);
+		setError("");
+		setStale(true);
+	};
+	(0, react.useEffect)(() => {
+		reset();
+		return () => state.cancel();
+	}, [
+		rpc,
+		quotaOnly,
+		selectedOperation,
+		state
+	]);
+	const change = (key, value) => {
+		edited();
+		setForm((previous) => ({
+			...previous,
+			[key]: value
+		}));
+	};
+	/** Label is user copy; the API parameter name rides in the hint for people cross-checking the docs. */
+	const field = (key, label, hint, placeholder) => {
+		const hintId = `zhihu-op-${key}-hint`;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "dsh-ui-field",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-ui-label",
+					children: label
+				}),
+				renderInput(Input, {
+					value: form[key],
+					onChange: (value) => change(key, value),
+					"aria-label": label,
+					"aria-describedby": hintId,
+					placeholder,
+					className: "zhihu-input"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-ui-hint",
+					id: hintId,
+					children: hint
+				})
+			]
+		}, key);
+	};
+	const select = (key, label, hint, options) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: "dsh-ui-field",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-ui-label",
+				children: label
+			}),
+			renderSelect(Select, {
+				value: form[key],
+				onChange: (value) => change(key, value),
+				"aria-label": label,
+				options
+			}, "dsh-ui-select"),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-ui-hint",
+				children: hint
+			})
+		]
+	});
+	const run = (offset) => {
+		let params;
+		const nextForm = offset === void 0 ? form : {
+			...form,
+			offset
+		};
+		try {
+			params = buildOpenPlatformParams(activeOperation, nextForm, t);
+		} catch (cause) {
+			setError(cause instanceof Error ? cause.message : String(cause));
+			return;
+		}
+		if (offset !== void 0) setForm(nextForm);
+		setLoading(true);
+		setError("");
+		requestOpenPlatform(rpc, state, activeOperation, params, (outcome) => {
+			setLoading(false);
+			if ("value" in outcome) {
+				setResult(outcome.value);
+				setStale(false);
+			} else setError(outcome.error);
+		});
+	};
+	const nextOffset = stale ? null : openPlatformNextOffset(result, form.offset.trim());
+	const paged = activeOperation === "question.answers" || activeOperation === "content.comments";
+	const dated = activeOperation === "creator.account.stats" || activeOperation === "creator.content.stats";
+	const options = openPlatformOptions(t);
+	const title = quotaOnly ? t("官方每日额度", "Official daily quota") : t("问题与创作", "Questions and creator");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "zhihu-open-platform dsh-ui-stack",
+		"aria-label": title,
+		children: [
+			selectedOperation === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "dsh-ui-heading",
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-help",
+				children: quotaOnly ? t("查询知乎返回的官方额度，不推算余额。", "Shows the quota Zhihu reports; no balance is inferred.") : t("手动触发，不自动翻页或重试。", "Manual trigger only; no automatic paging or retry.")
+			}),
+			!quotaOnly && selectedOperation === void 0 && renderSelect(Select, {
+				value: activeOperation,
+				options,
+				"aria-label": t("开放平台操作", "Open Platform operation"),
+				onChange: (value) => {
+					if (options.some((option) => option.value === value)) {
+						reset();
+						setOperation(value);
+					}
+				}
+			}, "dsh-ui-select"),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenPlatformDetails, { quotaOnly }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ui-stack",
+				children: [
+					activeOperation === "question.recommendations" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [field("query", t("主题关键词", "Topic keywords"), t("query · 留空按账号画像推荐", "query · leave empty to recommend from your profile")), field("count", t("推荐数量", "Number of questions"), t("count · 1–20", "count · 1–20"))] }),
+					activeOperation === "question.answers" && field("questionUrl", t("知乎问题链接", "Zhihu question link"), "questionUrl", "https://www.zhihu.com/question/123"),
+					[
+						"content.detail",
+						"content.comments",
+						"creator.content.stats"
+					].includes(activeOperation) && field("contentUrl", t("本人内容链接", "Link to your content"), t("contentUrl · 回答、文章、想法或视频", "contentUrl · answer, article, pin or video"), "https://www.zhihu.com/answer/123"),
+					paged && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [field("offset", t("起始位置", "Start position"), t("offset · 非负整数，从 0 开始", "offset · non-negative whole number, starting at 0")), field("limit", t("每页数量", "Page size"), t("limit · 1–50", "limit · 1–50"))] }),
+					activeOperation === "content.comments" && select("order", t("评论排序", "Comment order"), "order", [
+						{
+							value: "score",
+							label: t("热度", "Top")
+						},
+						{
+							value: "reverse",
+							label: t("最新", "Newest")
+						},
+						{
+							value: "ascending",
+							label: t("最早", "Oldest")
+						}
+					]),
+					activeOperation === "creator.account.stats" && select("contentType", t("内容类型", "Content type"), "contentType", [
+						{
+							value: "all",
+							label: t("全部", "All")
+						},
+						{
+							value: "answer",
+							label: t("回答", "Answers")
+						},
+						{
+							value: "article",
+							label: t("文章", "Articles")
+						},
+						{
+							value: "pin",
+							label: t("想法", "Pins")
+						},
+						{
+							value: "zvideo",
+							label: t("视频", "Videos")
+						}
+					]),
+					dated && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [field("startDate", t("开始日期", "Start date"), t("startDate · YYYY-MM-DD，与结束日期成对填写", "startDate · YYYY-MM-DD, set together with the end date")), field("endDate", t("结束日期", "End date"), t("endDate · YYYY-MM-DD，不早于开始日期", "endDate · YYYY-MM-DD, not before the start date"))] }),
+					activeOperation === "quota" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+						className: "zhihu-open-platform-quota dsh-ui-card dsh-ui-card--flat",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+								className: "dsh-ui-label",
+								children: t("额度项", "Quota items")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-ui-hint",
+								children: t("apiIds · 不选表示全部", "apiIds · none selected means all")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Checkbox, {
+								checked: form.apiIds.length === 0,
+								onChange: () => change("apiIds", []),
+								label: t("全部额度项", "All quota items")
+							}),
+							ZHIHU_QUOTA_IDS.map((id) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Checkbox, {
+								checked: form.apiIds.includes(id),
+								onChange: (next) => change("apiIds", next ? [...form.apiIds, id] : form.apiIds.filter((value) => value !== id)),
+								label: id
+							}, id))
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ui-actions",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+						host: Button,
+						variant: "primary",
+						disabled: loading,
+						onClick: () => run(),
+						children: activeOperation === "quota" ? t("查询官方额度", "Check quota") : t("执行请求", "Run request")
+					}),
+					loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+						host: Button,
+						onClick: () => {
+							state.cancel();
+							setLoading(false);
+							setError(t("已取消；晚到的结果将被丢弃。", "Cancelled; a late response will be discarded."));
+						},
+						children: t("取消请求", "Cancel")
+					}),
+					nextOffset !== null && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+						host: Button,
+						onClick: () => run(nextOffset),
+						children: t("下一页", "Next page")
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: loading ? "dsh-ui-loading" : "dsh-ui-hint",
+				role: "status",
+				children: loading ? t("等待响应…", "Waiting for response…") : ""
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-error",
+				role: "alert",
+				children: error
+			}),
+			result && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ui-stack",
+				children: [
+					stale && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-banner",
+						children: t("参数已变化，结果对应旧参数，请重新请求。", "Parameters changed; results are from the previous request. Run it again.")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+						className: "dsh-ui-heading",
+						children: activeOperation === "quota" ? t("官方原始额度字段", "Raw quota fields") : t("返回数据", "Response data")
+					}),
+					result.paging?.warning && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-banner",
+						children: result.paging.warning
+					}),
+					!stale && paged && result.paging?.canContinue && nextOffset === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-banner",
+						children: t("下一页位置缺失或未前进，已停止翻页。", "The next page position is missing or did not advance; paging stopped.")
+					}),
+					activeOperation === "content.detail" && (typeof result.data.Body !== "string" || !result.data.Body.trim()) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-banner dsh-ui-banner--danger",
+						children: t("响应缺少正文（Body），未取得全文。", "The response has no body (Body); full text was not retrieved.")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						className: "zhihu-open-platform-data dsh-ui-code",
+						children: JSON.stringify(result.data, null, 2)
+					})
+				]
+			})
+		]
+	});
+}
+/** The fine print, folded: one line stays in the flow, the rest sits here. */
+function OpenPlatformDetails({ quotaOnly }) {
+	const t = useT();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ZhihuDetails, {
+		title: t("说明", "Details"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("只使用当前 Access Secret，不使用 OAuth，也不切换身份。", "Uses the current Access Secret only; no OAuth or identity switching.") }),
+			!quotaOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("问题回答仅提供摘要，非全文；本人创作全文、评论和数据仅限当前凭据对应的本人内容。", "Answer results are summaries, not full text. Your content, comments and stats are limited to the account behind this key.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("业务请求可能消耗官方额度或产生费用，以知乎控制台为准；本地调用计数不是账单。", "Requests may consume official quota or incur cost; the Zhihu console is authoritative. Local counts are not billing.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("额度查询不计入本地调用次数，不推算余额，不为缺失字段补零。", "Quota checks are not counted locally; no balance is inferred and missing fields are not zero-filled.") })
+		]
+	});
+}
+//#endregion
+//#region src/client-quota.tsx
+const record = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const identityFields = /* @__PURE__ */ new Set([
+	"APIID",
+	"ApiId",
+	"apiId",
+	"api_id",
+	"id",
+	"Name",
+	"name",
+	"APIName",
+	"ApiName",
+	"Description",
+	"description",
+	"Date",
+	"date",
+	"Period",
+	"period",
+	"Unit",
+	"unit",
+	"Timestamp",
+	"timestamp",
+	"version"
+]);
+/** Friendly name first, official field in parentheses so it still maps to the Zhihu docs. */
+function fieldLabel(field, t) {
+	switch (field) {
+		case "RemainingQuota": return t("剩余额度（RemainingQuota）", "Remaining (RemainingQuota)");
+		case "TotalQuota": return t("总额度（TotalQuota）", "Total (TotalQuota)");
+		case "UsedQuota": return t("已用额度（UsedQuota）", "Used (UsedQuota)");
+		case "TotalUsed": return t("已用额度（TotalUsed）", "Used (TotalUsed)");
+		default: return field;
+	}
+}
+function quotaFieldRole(field) {
+	if (field === "RemainingQuota") return "remaining";
+	if (field === "TotalQuota") return "total";
+	if (field === "UsedQuota" || field === "TotalUsed") return "used";
+	return "other";
+}
+/** Only nonnegative finite, safe magnitudes are chartable; exact decimal text is retained. */
+function quotaNumericValue(value) {
+	if (typeof value !== "number" && typeof value !== "string") return null;
+	if (typeof value === "string") {
+		const decimal = value.trim();
+		if (!/^\+?\d+(?:\.\d+)?$/.test(decimal)) return null;
+		const [whole, fraction = ""] = decimal.replace(/^\+/, "").split(".");
+		const integer = whole.replace(/^0+(?=\d)/, "");
+		const limit = String(Number.MAX_SAFE_INTEGER);
+		if (integer.length > limit.length || integer.length === limit.length && (integer > limit || integer === limit && /[1-9]/.test(fraction))) return null;
+	}
+	const n = typeof value === "number" ? value : Number(value.trim());
+	if (!Number.isFinite(n) || n < 0 || n > Number.MAX_SAFE_INTEGER) return null;
+	if (typeof value === "string" && n === 0 && /[1-9]/.test(value)) return null;
+	return n;
+}
+function quotaMetric(field, raw, t = translator()) {
+	const value = quotaNumericValue(raw);
+	let text = t("不可用", "Unavailable");
+	if (value !== null) text = typeof raw === "string" ? raw.trim() : String(raw);
+	else if (typeof raw === "number" && Number.isFinite(raw) || typeof raw === "string" && (/^[+-]?\d+(?:\.\d+)?$/.test(raw.trim()) || /^(?:unlimited|infinite|infinity|不限|无限|无限制)$/i.test(raw.trim()))) text = String(raw).trim() + t("（原始标记，不绘图）", " (raw marker, not charted)");
+	return {
+		field,
+		label: fieldLabel(field, t),
+		text,
+		value
+	};
+}
+const chartableRole = (category, role) => {
+	const metric = category.metrics.find((value) => quotaFieldRole(value.field) === role);
+	return metric !== void 0 && metric.value !== null;
+};
+/** The one meter worth drawing: what is left of this API's own ceiling. Both
+*  figures are the server's, for this row; without both the cell stays a number
+*  and never borrows a scale from a neighbouring row or field. */
+function quotaMeter(metrics) {
+	const remaining = metrics.find((value) => quotaFieldRole(value.field) === "remaining" && value.value !== null);
+	const total = metrics.find((value) => quotaFieldRole(value.field) === "total" && value.value !== null);
+	if (!remaining || !total || !total.value) return null;
+	return {
+		remaining,
+		total,
+		share: remaining.value / total.value
+	};
+}
+function quotaColumns(categories, fields, t = translator()) {
+	const holders = categories.filter((category) => category.metrics.some((value) => quotaFieldRole(value.field) === "used"));
+	const derivable = holders.length > 0 && holders.every((category) => chartableRole(category, "total") && chartableRole(category, "remaining"));
+	const rest = fields.filter((field) => {
+		const role = quotaFieldRole(field);
+		if (role === "total" || role === "remaining") return false;
+		if (role === "used") return !derivable;
+		return true;
+	}).map((field) => ({
+		kind: "field",
+		field,
+		label: fieldLabel(field, t),
+		role: quotaFieldRole(field)
+	}));
+	return fields.some((field) => {
+		const role = quotaFieldRole(field);
+		return role === "total" || role === "remaining";
+	}) ? [{
+		kind: "meter",
+		field: "",
+		label: t("剩余 / 上限", "Remaining / ceiling"),
+		role: "meter"
+	}, ...rest] : rest;
+}
+/** The one cell every row is read through: the fraction when the row has both
+*  halves, otherwise whichever single figure the server sent, named so a lone
+*  number is never read as the other half. */
+function quotaFractionCell(category, t) {
+	const total = category.metrics.find((value) => quotaFieldRole(value.field) === "total");
+	const remaining = category.metrics.find((value) => quotaFieldRole(value.field) === "remaining");
+	const lone = (metric, role) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "zhihu-quota-value",
+		children: [metric.text, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "zhihu-quota-of",
+			children: role === "total" ? t(" 上限", " ceiling") : t(" 剩余", " remaining")
+		})]
+	});
+	const meter = quotaMeter(category.metrics);
+	if (meter) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "zhihu-quota-value",
+		children: [
+			meter.remaining.text,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "zhihu-quota-of",
+				children: [" / ", meter.total.text]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "zhihu-quota-track",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "zhihu-quota-fill",
+					style: { width: `${Number((meter.share * 100).toFixed(2))}%` }
+				})
+			})
+		]
+	});
+	if (remaining) return lone(remaining, "remaining");
+	if (total) return lone(total, "total");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "zhihu-quota-value",
+		children: t("不可用", "Unavailable")
+	});
+}
+/** Supports direct per-API rows only. No recursive guessing, aggregation, or balance derivation. */
+function projectQuota(data, t = translator()) {
+	if (!record(data)) return {
+		categories: [],
+		fields: []
+	};
+	const source = Object.hasOwn(data, "Items") ? data.Items : data;
+	const rows = [];
+	if (Array.isArray(source)) {
+		for (const raw of source) if (record(raw)) rows.push({ raw });
+	} else if (record(source)) {
+		if ([
+			"APIID",
+			"ApiId",
+			"apiId",
+			"api_id",
+			"id"
+		].some((key) => typeof source[key] === "string" && !!source[key].trim() || typeof source[key] === "number" && Number.isSafeInteger(source[key]))) rows.push({ raw: source });
+		else for (const [key, raw] of Object.entries(source)) if (record(raw)) rows.push({
+			raw,
+			key
+		});
+	}
+	const fields = /* @__PURE__ */ new Set();
+	return {
+		categories: rows.map(({ raw, key }, index) => {
+			const identifier = [
+				raw.APIID,
+				raw.ApiId,
+				raw.apiId,
+				raw.api_id,
+				raw.id,
+				key
+			].find((value) => typeof value === "string" && value.trim() || typeof value === "number" && Number.isSafeInteger(value));
+			const id = identifier === void 0 ? t(`类别 ${index + 1}`, `Category ${index + 1}`) : String(identifier);
+			const name = [
+				raw.APIName,
+				raw.ApiName,
+				raw.Name,
+				raw.name
+			].find((value) => typeof value === "string" && value.trim());
+			const metrics = Object.entries(raw).filter(([field, value]) => !identityFields.has(field) && !record(value) && !Array.isArray(value)).map(([field, value]) => {
+				fields.add(field);
+				return quotaMetric(field, value, t);
+			});
+			return {
+				id,
+				label: name ? `${String(name)}（${id}）` : id,
+				metrics
+			};
+		}),
+		fields: [...fields]
+	};
+}
+/**
+* One row per API, read as `remaining / ceiling` with the bar under it. The
+* total earns no column of its own — it is the denominator the fraction already
+* prints — and the consumed figure is the gap between the two numbers, so it
+* earns none either. An earlier version gave all three their own panel, which
+* repeated the API list three times and let a full bar mean "exhausted" in one
+* place and "untouched" in another, in the same colour and the same length.
+*/
+function QuotaCharts({ data }) {
+	const t = useT();
+	const { categories, fields } = projectQuota(data, t);
+	if (!categories.length || !fields.length) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "dsh-ui-empty",
+		children: t("官方额度数据不可用：响应中没有可识别的额度字段。", "Official quota data is unavailable: the response has no recognisable quota fields.")
+	});
+	const columns = quotaColumns(categories, fields, t);
+	const metered = columns[0]?.kind === "meter";
+	const api = t("接口", "API");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dsh-ui-stack",
+		children: [
+			metered && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-help",
+				children: t("蓝条＝该接口还剩自己上限的多少。各接口上限不同，条长不跨行比较。", "A bar is what an API has left of its own ceiling. Limits differ per API, so lengths are not comparable across rows.")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ZhihuDetails, {
+				title: t("如何阅读", "How to read this"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("「剩余 / 上限」中的上限是知乎给该接口的总额度，蓝条是其中未消耗的部分。", "The ceiling in “remaining / ceiling” is the total Zhihu reports for that API, and the bar is the unconsumed part of it.") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("已消耗是上限减剩余，因此不单列；官方未返回上限时只显示剩余数字，不画条。", "Consumed is the ceiling minus the remaining, so it gets no column. With no total returned, only the remaining shows and no bar is drawn.") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("不合计不同 API，不推算已用、总额或余额。", "Different APIs are not summed; used, total and balance are never inferred.") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("统计周期以官方定义为准，不把累计数据当作今日用量。", "Periods follow the official definition; cumulative figures are not treated as today’s usage.") })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "zhihu-quota-scroll",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+					className: "zhihu-quota-table",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+						scope: "col",
+						className: "zhihu-quota-corner",
+						children: api
+					}), columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
+						scope: "col",
+						className: "zhihu-quota-head",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "zhihu-quota-head-label",
+							children: column.label
+						}), column.kind === "meter" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "zhihu-quota-head-scale",
+							children: "RemainingQuota / TotalQuota"
+						})]
+					}, column.field || "meter"))] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: categories.map((category, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+						scope: "row",
+						className: "zhihu-quota-name",
+						children: category.label
+					}), columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+						className: "zhihu-quota-cell",
+						children: column.kind === "meter" ? quotaFractionCell(category, t) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "zhihu-quota-value",
+							children: (category.metrics.find((value) => value.field === column.field) ?? quotaMetric(column.field, void 0, t)).text
+						})
+					}, column.field || "meter"))] }, `${category.id}-${index}`)) })]
+				})
+			}),
+			categories.filter((category) => !category.metrics.length).map((category, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-hint",
+				children: t(`${category.label}：额度字段不可用。`, `${category.label}: quota fields unavailable.`)
+			}, `${category.id}-${index}`))
+		]
+	});
+}
+function ZhihuQuotaSection({ rpc, Button }) {
+	const state = (0, react.useRef)(createZhihuClientState()).current;
+	const [snapshot, setSnapshot] = (0, react.useState)(null);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)("");
+	const [stale, setStale] = (0, react.useState)(false);
+	const t = useT();
+	const locale = useZhihuLocale();
+	const refresh = (0, react.useCallback)(() => {
+		setLoading(true);
+		setError("");
+		requestOpenPlatform(rpc, state, "quota", {}, (outcome) => {
+			setLoading(false);
+			if ("value" in outcome) {
+				setSnapshot({
+					data: outcome.value.data,
+					timestamp: (/* @__PURE__ */ new Date()).toISOString()
+				});
+				setStale(false);
+			} else {
+				setError(outcome.error);
+				setStale(true);
+			}
+		});
+	}, [rpc, state]);
+	(0, react.useEffect)(() => {
+		refresh();
+		return () => state.cancel();
+	}, [refresh, state]);
+	const title = t("官方额度用量", "Official quota");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "dsh-ui-stack",
+		"aria-label": title,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "dsh-ui-heading",
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-help",
+				children: t("打开此页时自动查询，不自动重试。", "Loads when this tab opens; never retried automatically.")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ZhihuDetails, {
+				title: t("说明", "Details"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("仅显示官方返回字段，不补零，不推算费用。", "Shows only the fields Zhihu returns; nothing is zero-filled or priced.") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("官方额度与本地每日调用计数分开，额度查询不计入本地调用次数。", "Official quota is separate from local daily counts; quota checks are not counted locally.") })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ui-actions",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+					host: Button,
+					variant: "primary",
+					disabled: loading,
+					onClick: refresh,
+					children: t("刷新官方额度", "Refresh quota")
+				}), loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+					host: Button,
+					onClick: () => {
+						state.cancel();
+						setLoading(false);
+						setError(t("已取消；晚到的结果将被丢弃。", "Cancelled; a late response will be discarded."));
+					},
+					children: t("取消请求", "Cancel")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: loading ? "dsh-ui-loading" : "dsh-ui-hint",
+				role: "status",
+				children: loading ? t("正在查询官方额度…", "Checking official quota…") : !snapshot && !error ? t("等待查询官方额度。", "Waiting to check official quota.") : ""
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-error",
+				role: "alert",
+				children: error
+			}),
+			snapshot && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ui-stack",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: stale ? "dsh-ui-warn" : "dsh-ui-hint",
+					children: [stale ? t("旧数据（刷新未成功） · ", "Old data (refresh failed) · ") : t("最近成功查询 · ", "Last checked · "), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+						dateTime: snapshot.timestamp,
+						children: new Date(snapshot.timestamp).toLocaleString(locale === "en" ? "en" : "zh-CN")
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaCharts, { data: snapshot.data })]
+			}),
+			!snapshot && !loading && error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-empty",
+				children: t("官方额度暂不可用，请稍后手动刷新。", "Official quota is unavailable. Refresh again later.")
+			})
+		]
+	});
+}
+//#endregion
 //#region src/client.tsx
 const name = "dsh-zhihu-client";
 const inject = [
 	"slots",
 	"connection",
 	"remote",
-	"remote.credentials"
+	"remote.credentials",
+	"locale"
 ];
 const PACKAGE_NAME = "@klarkxy/dsh-zhihu";
 const SLOT_ORDER = 120;
@@ -706,29 +1812,85 @@ function safeUrl(url) {
 	return /^https?:\/\//i.test(url) ? url : null;
 }
 /** Credential absence and transport failure read differently from a plain bad request. */
-function failureOf(code, message) {
+function failureOf(code, message, t = translator()) {
 	if (code === "token-missing") return {
 		kind: "credential",
-		text: "未配置知乎 Access Secret 或凭证不可用，请到「设置」页完成配置。"
+		text: t("未配置知乎 Access Secret 或凭证不可用，请到「设置」页配置。", "Zhihu Access Secret is missing or unavailable. Set it on the Settings tab.")
 	};
 	return {
 		kind: "request",
-		text: `请求失败：${message}`
+		text: t(`请求失败：${message}`, `Request failed: ${message}`)
 	};
 }
-function networkFailure(cause) {
+function networkFailure(cause, t = translator()) {
+	const detail = cause instanceof Error ? cause.message : String(cause);
 	return {
 		kind: "network",
-		text: `网络或连接失败：${cause instanceof Error ? cause.message : String(cause)}`
+		text: t(`网络或连接失败：${detail}`, `Network or connection failed: ${detail}`)
 	};
 }
-const MODE_LABEL = {
-	search: "站内搜索",
-	global: "全网搜索",
-	hot: "知乎热榜",
-	knowledge: "知识库检索",
-	ask: "直答"
-};
+/**
+* One external-link behaviour for the whole page: an http(s) anchor that the
+* desktop bridge opens in the system browser when present, and a plain new tab
+* otherwise. Anything that is not http(s) degrades to text.
+*/
+function ExternalLink(props) {
+	const url = safeUrl(props.url);
+	if (!url) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: props.className,
+		children: props.children
+	});
+	const open = (event) => {
+		const bridge = globalThis.dshWindow;
+		if (bridge?.openExternal) {
+			event.preventDefault();
+			bridge.openExternal(url);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: props.className ?? "zhihu-link",
+		href: url,
+		target: "_blank",
+		rel: "noreferrer noopener",
+		onClick: open,
+		children: props.children
+	});
+}
+const MODES = [
+	"search",
+	"global",
+	"hot",
+	"knowledge",
+	"ask"
+];
+function modeLabel(mode, t) {
+	switch (mode) {
+		case "search": return t("站内搜索", "Zhihu search");
+		case "global": return t("全网搜索", "Web search");
+		case "hot": return t("知乎热榜", "Trending");
+		case "knowledge": return t("知识库检索", "Knowledge base search");
+		case "ask": return t("直答", "Direct answer");
+	}
+}
+function testOptions(t) {
+	return [...MODES.map((value) => ({
+		value,
+		label: modeLabel(value, t)
+	})), ...openPlatformOptions(t).filter((option) => option.value !== "quota")];
+}
+const TEST_OPTIONS = testOptions(translator("zh"));
+function ZhihuTestSelector({ value, onChange, Select }) {
+	const t = useT();
+	const options = testOptions(t);
+	return renderSelect(Select, {
+		"aria-label": t("测试功能", "Feature to test"),
+		value,
+		options,
+		onChange: (next) => {
+			if (options.some((option) => option.value === next)) onChange(next);
+		}
+	}, "dsh-ui-select");
+}
 const MODE_ENDPOINT = {
 	search: "search",
 	global: "global.search",
@@ -739,29 +1901,35 @@ const MODE_ENDPOINT = {
 const ASK_MODELS = [
 	{
 		value: "zhida-thinking-1p5",
-		label: "思考"
+		zh: "思考",
+		en: "Thinking"
 	},
 	{
 		value: "zhida-fast-1p5",
-		label: "快速"
+		zh: "快速",
+		en: "Fast"
 	},
 	{
 		value: "zhida-agent",
-		label: "智能体"
+		zh: "智能体",
+		en: "Agent"
 	}
 ];
 const SCOPE_OPTIONS = [
 	{
 		value: "public",
-		label: "公开库"
+		zh: "公开库",
+		en: "Public"
 	},
 	{
 		value: "personal",
-		label: "个人库"
+		zh: "个人库",
+		en: "Personal"
 	},
 	{
 		value: "subscription",
-		label: "订阅库"
+		zh: "订阅库",
+		en: "Subscribed"
 	}
 ];
 function objectItems(value) {
@@ -793,7 +1961,7 @@ function parseOutcome(mode, value) {
 	if (mode === "hot") return {
 		mode: "hot",
 		items: items.map((item) => ({
-			title: text(item.title, "(无标题)"),
+			title: text(item.title, "—"),
 			url: text(item.url),
 			summary: text(item.summary)
 		}))
@@ -801,7 +1969,7 @@ function parseOutcome(mode, value) {
 	if (mode === "knowledge") return {
 		mode: "knowledge",
 		items: items.map((item) => ({
-			docName: text(item.docName, "(未命名文档)"),
+			docName: text(item.docName, "—"),
 			originUrl: text(item.originUrl),
 			snippets: Array.isArray(item.snippets) ? item.snippets.filter((s) => typeof s === "string") : []
 		}))
@@ -810,67 +1978,68 @@ function parseOutcome(mode, value) {
 		mode,
 		emptyReason: typeof value.emptyReason === "string" ? value.emptyReason : void 0,
 		items: items.map((item) => ({
-			title: text(item.title, "(无标题)"),
-			type: text(item.type, "内容"),
+			title: text(item.title, "—"),
+			type: text(item.type),
 			url: text(item.url),
 			summary: text(item.summary),
 			votes: typeof item.votes === "number" ? item.votes : 0,
 			comments: typeof item.comments === "number" ? item.comments : 0,
-			author: text(item.author, "匿名"),
+			author: text(item.author),
 			editTime: text(item.editTime)
 		}))
 	};
 }
 function LinkOrText(props) {
-	const url = safeUrl(props.url);
-	if (!url) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExternalLink, {
+		url: props.url,
 		className: props.className,
 		children: props.label
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		className: props.className ?? "zhihu-link",
-		href: url,
-		target: "_blank",
-		rel: "noreferrer",
-		children: props.label
-	});
 }
 function OutcomeView(props) {
 	const { outcome, stale } = props;
+	const t = useT();
+	const staleBanner = stale ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "dsh-ui-banner",
+		role: "status",
+		children: t("查询已变化，结果对应旧查询，请重新搜索。", "The query changed; results are from the previous query. Search again.")
+	}) : null;
 	let body = null;
 	let summary = "";
 	if (outcome.mode === "ask") {
-		summary = `直答（${outcome.answer.model || "默认模型"}）`;
+		summary = t(`直答（${outcome.answer.model || "默认模型"}）`, `Direct answer (${outcome.answer.model || "default model"})`);
 		body = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [outcome.answer.reasoning ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-			className: "zhihu-ask-reasoning",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: "思考过程" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: outcome.answer.reasoning })]
+			className: "zhihu-ask-reasoning dsh-ui-card dsh-ui-card--flat",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
+				className: "dsh-ui-heading",
+				children: t("思考过程", "Reasoning")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-help",
+				children: outcome.answer.reasoning
+			})]
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "zhihu-ask-content",
+			className: "zhihu-ask-content dsh-ui-wrap",
 			children: outcome.answer.content
 		})] });
 	} else if (outcome.items.length === 0) {
 		const reason = outcome.mode === "search" || outcome.mode === "global" ? outcome.emptyReason : void 0;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-testid": "zhihu-results",
-			className: "zhihu-results",
-			children: [stale ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "zhihu-stale",
-				role: "status",
-				children: "查询已变化，以下内容对应旧查询，请重新搜索。"
-			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "zhihu-results-summary",
-				children: `未找到相关结果${reason ? `（${reason}）` : ""}。`
+			className: "dsh-ui-stack",
+			children: [staleBanner, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-empty",
+				children: t(`未找到相关结果${reason ? `（${reason}）` : ""}。`, `No results${reason ? ` (${reason})` : ""}.`)
 			})]
 		});
 	} else if (outcome.mode === "knowledge") {
-		summary = `知识库检索共 ${outcome.items.length} 条`;
+		summary = t(`知识库检索共 ${outcome.items.length} 条`, `${outcome.items.length} knowledge base results`);
 		body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "zhihu-result-list",
+			className: "dsh-ui-list",
 			children: outcome.items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "zhihu-result-item",
+				className: "dsh-ui-card dsh-ui-card--flat dsh-ui-list-row",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-result-title",
+						className: "dsh-ui-list-name",
 						children: item.docName
 					}),
 					item.originUrl && safeUrl(item.originUrl) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkOrText, {
@@ -878,46 +2047,46 @@ function OutcomeView(props) {
 						label: item.originUrl
 					}) : null,
 					item.snippets.map((snippet, snippetIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-result-snippet",
+						className: "zhihu-result-snippet dsh-ui-help",
 						children: snippet
 					}, snippetIndex))
 				]
 			}, `${item.docName}:${index}`))
 		});
 	} else if (outcome.mode === "hot") {
-		summary = `知乎热榜共 ${outcome.items.length} 条`;
+		summary = t(`知乎热榜共 ${outcome.items.length} 条`, `${outcome.items.length} trending items`);
 		body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "zhihu-result-list",
+			className: "dsh-ui-list",
 			children: outcome.items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "zhihu-result-item",
+				className: "dsh-ui-card dsh-ui-card--flat dsh-ui-list-row",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkOrText, {
 					url: item.url,
 					label: item.title,
-					className: "zhihu-result-title zhihu-link"
+					className: "dsh-ui-list-name zhihu-link"
 				}), item.summary ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "zhihu-result-summary",
+					className: "dsh-ui-meta",
 					children: item.summary
 				}) : null]
 			}, `${index}`))
 		});
 	} else {
-		summary = `${MODE_LABEL[outcome.mode]}共 ${outcome.items.length} 条`;
+		summary = t(`${modeLabel(outcome.mode, t)}共 ${outcome.items.length} 条`, `${modeLabel(outcome.mode, t)}: ${outcome.items.length} results`);
 		body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "zhihu-result-list",
+			className: "dsh-ui-list",
 			children: outcome.items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "zhihu-result-item",
+				className: "dsh-ui-card dsh-ui-card--flat dsh-ui-list-row",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkOrText, {
 						url: item.url,
 						label: item.title,
-						className: "zhihu-result-title zhihu-link"
+						className: "dsh-ui-list-name zhihu-link"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-result-meta",
-						children: `类型：${item.type}　作者：${item.author}　赞同 ${item.votes}　评论 ${item.comments}${item.editTime ? `　时间：${item.editTime}` : ""}`
+						className: "dsh-ui-list-desc",
+						children: t(`${item.type || "内容"} · ${item.author || "匿名"} · 赞同 ${item.votes} · 评论 ${item.comments}${item.editTime ? ` · ${item.editTime}` : ""}`, `${item.type || "Content"} · ${item.author || "Anonymous"} · ${item.votes} upvotes · ${item.comments} comments${item.editTime ? ` · ${item.editTime}` : ""}`)
 					}),
 					item.summary ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-result-summary",
+						className: "dsh-ui-meta",
 						children: item.summary
 					}) : null
 				]
@@ -926,16 +2095,11 @@ function OutcomeView(props) {
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": "zhihu-results",
-		className: "zhihu-results",
+		className: "dsh-ui-stack",
 		children: [
-			stale ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "zhihu-stale",
-				role: "status",
-				children: "查询已变化，以下内容对应旧查询，请重新搜索。"
-			}) : null,
+			staleBanner,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "zhihu-results-summary",
-				"aria-live": "polite",
+				className: "dsh-ui-heading",
 				children: summary
 			}),
 			body
@@ -967,32 +2131,56 @@ function useAlive() {
 	}, []);
 	return alive;
 }
-function CapabilitiesNote() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-		className: "zhihu-guide",
-		"data-testid": "zhihu-capabilities",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: "可用能力" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "zhihu-hint",
-			children: "站内搜索、全网搜索、热榜、直答和知识库检索。全网搜索可在「网络搜索」中启用。"
-		})]
+/**
+* Collapsible detail block. The primitive owns the row chrome; the body keeps
+* the contract's help tier so a long explanation never sits in the page flow.
+*/
+function CapabilitiesNote(props) {
+	const t = useT();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ZhihuDetails, {
+		title: t("可用能力", "Capabilities"),
+		defaultOpen: props.defaultOpen,
+		testId: "zhihu-capabilities",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("测试：站内搜索、全网搜索、热榜、直答、知识库检索与问题创作查询。", "Test: Zhihu search, web search, trending, direct answers, knowledge base search, question and creator queries.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("问题与创作：问题推荐、回答摘要、本人已发布内容及评论、账号与单篇创作数据。", "Questions and creator: question recommendations, answer summaries, your published content and comments, account and per-post stats.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("统计：本地记录的每日调用、失败与结果条数。", "Stats: daily calls, failures and result counts recorded locally.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("官方用量：知乎返回的官方剩余额度。", "Official quota: the remaining quota Zhihu reports.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("知识库：读取列表与上传参考资料，文件进入知乎云端。", "Knowledge base: list bases and upload references; files go to Zhihu cloud.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("全部能力共用此 Access Secret，不支持 OAuth 身份切换。", "Every feature shares this Access Secret; OAuth identity switching is not supported.") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+				t("模型工具需在 Agent 中加载 ", "For model tools, load "),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: "@klarkxy/dsh-zhihu/tools" }),
+				t("，仅配置密钥不会启用工具。", " in the Agent; a key alone does not enable them.")
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("请求手动触发（官方用量在打开页签时加载），不会自动重试。", "Requests run only when you trigger them (official quota loads when its tab opens) and are never retried automatically.") })
+		]
 	});
 }
 function SettingsShell(props) {
+	const t = useT();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "zhihu-settings",
+		className: "dsh-ui-stack",
 		"data-testid": "zhihu-settings",
-		"aria-label": "知乎凭证设置",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilitiesNote, {}), props.children]
+		"aria-label": t("知乎凭证设置", "Zhihu credential settings"),
+		children: [props.children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilitiesNote, {})]
 	});
 }
 function SettingsSection(props) {
 	const { credentials } = props;
+	const t = useT();
 	const alive = useAlive();
 	const [state, setState] = (0, react.useState)({ status: "loading" });
 	const [keyDraft, setKeyDraft] = (0, react.useState)("");
-	const [busy, setBusy] = (0, react.useState)(false);
+	const [pending, setPending] = (0, react.useState)(null);
+	const [confirmClear, setConfirmClear] = (0, react.useState)(false);
 	const [failure, setFailure] = (0, react.useState)(void 0);
 	const [note, setNote] = (0, react.useState)(void 0);
+	const busy = pending !== null;
+	const editDraft = (value) => {
+		setKeyDraft(value);
+		setNote(void 0);
+	};
 	const load = (0, react.useCallback)(async () => {
 		setState((current) => current.status === "ready" ? current : { status: "loading" });
 		try {
@@ -1021,32 +2209,35 @@ function SettingsSection(props) {
 		load();
 	}, [load]);
 	if (state.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsShell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-		className: "zhihu-status",
+		className: "dsh-ui-loading",
 		role: "status",
-		children: [activityDots(), "正在读取凭证状态…"]
+		children: [activityDots(), t("正在读取凭证状态…", "Loading credential status…")]
 	}) });
-	if (state.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsShell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-		className: "zhihu-error",
+	if (state.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsShell, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "dsh-ui-error",
 		role: "alert",
-		children: [`读取失败：${state.error} `, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+		children: t(`读取失败：${state.error}`, `Could not load: ${state.error}`)
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "dsh-ui-actions",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
 			host: props.Button,
-			className: "zhihu-button",
 			onClick: () => void load(),
-			children: "重试"
-		})]
-	}) });
+			children: t("重试", "Retry")
+		})
+	})] });
 	const credential = state.credential;
 	const keyLocked = credential?.writable === false;
 	const configured = credential?.configured === true;
 	const draftFailure = keyFailure(keyDraft);
 	const keyValue = keyDraft.trim();
-	const statusText = keyLocked ? "由环境变量提供（只读）" : configured ? `已保存${credential?.source ? `（来源：${credential.source}）` : ""}` : "未配置";
-	const dotClass = keyLocked ? "zhihu-dot zhihu-dot-locked" : configured ? "zhihu-dot zhihu-dot-configured" : "zhihu-dot zhihu-dot-missing";
-	const placeholder = keyLocked ? "由环境变量提供，无法在界面修改" : configured ? "已保存，输入新密钥可覆盖" : "粘贴知乎开放平台 Access Secret";
+	const statusText = keyLocked ? t("由环境变量提供（只读）", "Provided by an environment variable (read-only)") : configured ? t(`已保存${credential?.source ? `（来源：${credential.source}）` : ""}`, `Saved${credential?.source ? ` (source: ${credential.source})` : ""}`) : t("未配置", "Not set");
+	const dotState = keyLocked ? "warning" : configured ? "done" : "idle";
+	const placeholder = keyLocked ? t("由环境变量提供，无法在界面修改", "Set by an environment variable; cannot be edited here") : configured ? t("已保存，输入新密钥可覆盖", "Saved. Enter a new key to replace it") : t("粘贴知乎开放平台 Access Secret", "Paste your Zhihu Open Platform Access Secret");
 	const save = async () => {
 		if (keyLocked || draftFailure !== void 0 || keyValue.length === 0 || busy) return;
-		setBusy(true);
+		setPending("save");
 		setFailure(void 0);
+		setNote(void 0);
 		try {
 			const result = await credentials.set({
 				ref: ZHIHU_CREDENTIAL_REF,
@@ -1058,19 +2249,21 @@ function SettingsSection(props) {
 				return;
 			}
 			setKeyDraft("");
-			setNote("已保存。");
+			setNote(t("已保存。", "Saved."));
 			await load();
 		} catch (cause) {
 			if (!alive.current) return;
 			setFailure(cause instanceof Error ? cause.message : String(cause));
 		} finally {
-			if (alive.current) setBusy(false);
+			if (alive.current) setPending(null);
 		}
 	};
 	const clear = async () => {
+		setConfirmClear(false);
 		if (keyLocked || !configured || busy) return;
-		setBusy(true);
+		setPending("clear");
 		setFailure(void 0);
+		setNote(void 0);
 		try {
 			const result = await credentials.unset({ ref: ZHIHU_CREDENTIAL_REF });
 			if (!alive.current) return;
@@ -1079,51 +2272,35 @@ function SettingsSection(props) {
 				return;
 			}
 			setKeyDraft("");
-			setNote("已清除。");
+			setNote(t("已清除。", "Cleared."));
 			await load();
 		} catch (cause) {
 			if (!alive.current) return;
 			setFailure(cause instanceof Error ? cause.message : String(cause));
 		} finally {
-			if (alive.current) setBusy(false);
+			if (alive.current) setPending(null);
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsShell, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
-			className: "zhihu-status-grid",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-				className: "zhihu-status-label",
-				children: "状态"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
-				className: "zhihu-status-value",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: dotClass,
-					"aria-hidden": true
-				}), statusText]
+			className: "dsh-ui-readonly",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("状态", "Status") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
+				className: "dsh-ui-row",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: dotState }), statusText]
 			})]
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "zhihu-field",
+			className: "dsh-ui-field",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "zhihu-field-heading",
+					className: "dsh-ui-label-row",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-field-label",
+						className: "dsh-ui-label",
 						id: "zhihu-access-secret-label",
 						children: "Access Secret"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						className: "zhihu-link",
-						href: ZHIHU_CONSOLE_URL,
-						target: "_blank",
-						rel: "noreferrer noopener",
-						onClick: (event) => {
-							const bridge = globalThis.dshWindow;
-							if (bridge?.openExternal) {
-								event.preventDefault();
-								bridge.openExternal(ZHIHU_CONSOLE_URL);
-							}
-						},
-						children: "获取密钥"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExternalLink, {
+						url: ZHIHU_CONSOLE_URL,
+						children: t("获取密钥", "Get a key")
 					})]
 				}),
 				renderInput(props.Input, {
@@ -1133,42 +2310,66 @@ function SettingsSection(props) {
 					placeholder,
 					disabled: busy || keyLocked,
 					"aria-label": "Access Secret",
-					onChange: setKeyDraft
+					onChange: editDraft
 				}),
 				draftFailure === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "zhihu-warning",
+					className: "dsh-ui-error",
 					role: "alert",
-					children: draftFailure === "blank" ? "密钥不能只包含空白字符。" : "密钥含有非法字符（应为可打印 ASCII，且不是 ENV 赋值行）。"
+					children: draftFailure === "blank" ? t("密钥不能只包含空白字符。", "The key cannot be only whitespace.") : t("密钥含非法字符（应为可打印 ASCII，且不是 ENV 赋值行）。", "The key has invalid characters (use printable ASCII, not an ENV assignment line).")
 				})
 			]
 		}),
 		failure !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "zhihu-warning",
+			className: "dsh-ui-error",
 			role: "alert",
 			children: failure
 		}) : null,
 		note !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "zhihu-saved",
+			className: "dsh-ui-notice",
 			role: "status",
 			children: note
 		}) : null,
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "zhihu-row",
+			className: "dsh-ui-actions",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
 				host: props.Button,
 				variant: "danger",
-				className: "zhihu-button zhihu-button-danger",
+				className: "zhihu-button-danger",
 				disabled: busy || keyLocked || !configured,
-				onClick: () => void clear(),
-				children: busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), "处理中…"] }) : "清除"
+				onClick: () => setConfirmClear(true),
+				children: pending === "clear" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), t("清除中…", "Clearing…")] }) : t("清除", "Clear")
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
 				host: props.Button,
 				variant: "primary",
-				className: "zhihu-button zhihu-button-primary",
 				disabled: busy || keyLocked || keyValue.length === 0 || draftFailure !== void 0,
 				onClick: () => void save(),
-				children: busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), "保存中…"] }) : "保存"
+				children: pending === "save" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), t("保存中…", "Saving…")] }) : t("保存", "Save")
 			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+			open: confirmClear,
+			onClose: () => setConfirmClear(false),
+			title: t("清除 Access Secret？", "Clear Access Secret?"),
+			closeLabel: t("关闭", "Close"),
+			className: "zhihu-panel",
+			footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ui-actions",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+					host: props.Button,
+					onClick: () => setConfirmClear(false),
+					children: t("取消", "Cancel")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+					host: props.Button,
+					variant: "danger",
+					className: "zhihu-button-danger",
+					onClick: () => void clear(),
+					children: t("清除", "Clear")
+				})]
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-help",
+				children: t("清除后，搜索、工具和知识库请求会失败，直到重新保存密钥。", "Search, tools and knowledge base requests will fail until you save a key again.")
+			})
 		})
 	] });
 }
@@ -1259,7 +2460,26 @@ const CHART_PAD = {
 	bottom: 24,
 	left: 36
 };
+/** Indexes whose bar prints its count: the first maximum and the latest active day. */
+function usageValueLabels(days) {
+	const chosen = /* @__PURE__ */ new Set();
+	let max = -1;
+	let maxIndex = -1;
+	let latest = -1;
+	days.forEach((day, index) => {
+		if (day.calls <= 0) return;
+		if (day.calls > max) {
+			max = day.calls;
+			maxIndex = index;
+		}
+		latest = index;
+	});
+	if (maxIndex >= 0) chosen.add(maxIndex);
+	if (latest >= 0) chosen.add(latest);
+	return chosen;
+}
 function UsageChart(props) {
+	const t = useT();
 	const days = props.days;
 	const maxCalls = Math.max(1, ...days.map((day) => day.calls));
 	const plotLeft = CHART_PAD.left;
@@ -1287,12 +2507,13 @@ function UsageChart(props) {
 			children: String(value)
 		})] }, `y-${value}`);
 	});
+	const labelled = usageValueLabels(days);
 	const bars = days.map((day, index) => {
 		const x = plotLeft + index * slot + (slot - barWidth) / 2;
 		const okCalls = Math.max(0, day.calls - day.failures);
 		const failHeight = day.failures / maxCalls * plotHeight;
 		const okHeight = okCalls / maxCalls * plotHeight;
-		const label = `${day.date}：调用 ${day.calls} 次，成功 ${okCalls} 次，失败 ${day.failures} 次，结果 ${day.results} 条`;
+		const label = t(`${day.date}：调用 ${day.calls} 次，成功 ${okCalls} 次，失败 ${day.failures} 次，结果 ${day.results} 条`, `${day.date}: ${day.calls} calls, ${okCalls} succeeded, ${day.failures} failed, ${day.results} results`);
 		const parts = [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 			className: "zhihu-chart-hit",
 			x: plotLeft + index * slot,
@@ -1314,7 +2535,7 @@ function UsageChart(props) {
 			width: barWidth,
 			height: failHeight
 		}, "fail"));
-		if (day.calls > 0) parts.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+		if (day.calls > 0 && labelled.has(index)) parts.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 			className: "zhihu-chart-value",
 			x: x + barWidth / 2,
 			y: plotBottom - okHeight - failHeight - 4,
@@ -1341,7 +2562,7 @@ function UsageChart(props) {
 		className: "zhihu-chart",
 		viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`,
 		role: "img",
-		"aria-label": `近 ${USAGE_DAYS} 天知乎工具调用 ${props.totals.calls} 次，失败 ${props.totals.failures} 次，结果 ${props.totals.results} 条`,
+		"aria-label": t(`近 ${USAGE_DAYS} 天知乎工具调用 ${props.totals.calls} 次，失败 ${props.totals.failures} 次，结果 ${props.totals.results} 条`, `Last ${USAGE_DAYS} days: ${props.totals.calls} Zhihu calls, ${props.totals.failures} failed, ${props.totals.results} results`),
 		children: [
 			grid,
 			bars,
@@ -1351,6 +2572,7 @@ function UsageChart(props) {
 }
 function UsageSection(props) {
 	const { rpc } = props;
+	const t = useT();
 	const gateRef = (0, react.useRef)(null);
 	if (!gateRef.current) gateRef.current = createZhihuClientState();
 	const gate = gateRef.current;
@@ -1373,7 +2595,7 @@ function UsageSection(props) {
 			if (!isUsageSummary(result.value)) {
 				setState({
 					status: "error",
-					error: "响应格式与契约不符。"
+					error: "invalid response shape"
 				});
 				return;
 			}
@@ -1392,87 +2614,106 @@ function UsageSection(props) {
 	(0, react.useEffect)(() => {
 		load();
 	}, [load]);
+	const sectionLabel = t("知乎调用用量", "Zhihu call usage");
 	if (state.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 		"data-testid": "zhihu-usage",
-		"aria-label": "知乎调用用量",
+		"aria-label": sectionLabel,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-			className: "zhihu-status",
+			className: "dsh-ui-loading",
 			role: "status",
-			children: [activityDots(), "正在读取用量…"]
+			children: [activityDots(), t("正在读取用量…", "Loading usage…")]
 		})
 	});
-	if (state.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+	if (state.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "dsh-ui-stack",
 		"data-testid": "zhihu-usage",
-		"aria-label": "知乎调用用量",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-			className: "zhihu-error",
+		"aria-label": sectionLabel,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "dsh-ui-error",
 			role: "alert",
-			children: [`读取失败：${state.error} `, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+			children: t(`读取失败：${state.error}`, `Could not load: ${state.error}`)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "dsh-ui-actions",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
 				host: props.Button,
-				className: "zhihu-button",
 				onClick: () => void load(),
-				children: "重试"
-			})]
-		})
+				children: t("重试", "Retry")
+			})
+		})]
 	});
 	const totals = summarizeUsage(state.days, localDayKey());
 	const hasAny = totals.calls > 0;
+	const times = t("次", "");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "zhihu-usage",
+		className: "dsh-ui-stack",
 		"data-testid": "zhihu-usage",
-		"aria-label": "知乎调用用量",
+		"aria-label": sectionLabel,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "zhihu-usage-intro",
-				children: "本机搜索、问答、热榜和知识库的调用次数，不是知乎官方配额或费用。"
+				className: "dsh-ui-help",
+				children: t("本地调用计数，非知乎官方额度或费用。", "Calls recorded locally; not Zhihu official quota or billing.")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ui-actions",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+					host: props.Button,
+					onClick: () => void load(),
+					children: t("刷新统计", "Refresh")
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "zhihu-usage-cards",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
-						label: "今日调用",
+						label: t("今日调用", "Today"),
 						value: totals.todayCalls,
-						unit: "次"
+						unit: times
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
-						label: `近 ${USAGE_DAYS} 天`,
+						label: t(`近 ${USAGE_DAYS} 天`, `Last ${USAGE_DAYS} days`),
 						value: totals.calls,
-						unit: "次"
+						unit: times
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
-						label: "失败",
+						label: t("失败", "Failed"),
 						value: totals.failures,
-						unit: "次"
+						unit: times
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
-						label: "结果条数",
+						label: t("结果条数", "Results"),
 						value: totals.results,
-						unit: "条"
+						unit: t("条", "")
 					})
 				]
 			}),
 			hasAny ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-					className: "zhihu-usage-heading",
-					children: "每日调用次数"
+					className: "dsh-ui-heading",
+					children: t("每日调用次数", "Daily calls")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageChart, {
 					days: state.days,
 					totals
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-					className: "zhihu-usage-legend",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-chart-chip zhihu-chart-chip-ok",
-						"aria-hidden": "true"
-					}), "成功"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-chart-chip zhihu-chart-chip-fail",
-						"aria-hidden": "true"
-					}), "失败"] })]
+					className: "dsh-ui-row-wrap dsh-ui-meta",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: "dsh-ui-row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "zhihu-chart-chip zhihu-chart-chip-ok",
+							"aria-hidden": "true"
+						}), t("成功", "Succeeded")]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: "dsh-ui-row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "zhihu-chart-chip zhihu-chart-chip-fail",
+							"aria-hidden": "true"
+						}), t("失败", "Failed")]
+					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-					className: "zhihu-usage-heading",
-					children: "有记录的日期"
+					className: "dsh-ui-heading",
+					children: t("有记录的日期", "Days with calls")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "zhihu-usage-table-wrap",
@@ -1481,23 +2722,23 @@ function UsageSection(props) {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 								scope: "col",
-								children: "日期"
+								children: t("日期", "Date")
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 								scope: "col",
-								children: "调用"
+								children: t("调用", "Calls")
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 								scope: "col",
-								children: "成功"
+								children: t("成功", "Succeeded")
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 								scope: "col",
-								children: "失败"
+								children: t("失败", "Failed")
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 								scope: "col",
-								children: "结果条数"
+								children: t("结果条数", "Results")
 							})
 						] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: totals.active.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
@@ -1512,22 +2753,22 @@ function UsageSection(props) {
 					})
 				})
 			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "zhihu-status",
-				children: "近 30 天暂无调用记录。"
+				className: "dsh-ui-empty",
+				children: t(`近 ${USAGE_DAYS} 天暂无调用记录。`, `No calls in the last ${USAGE_DAYS} days.`)
 			})
 		]
 	});
 }
 function UsageCard(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "zhihu-usage-card",
+		className: "dsh-ui-card dsh-ui-card--flat dsh-ui-list-row",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "zhihu-usage-card-label",
+			className: "dsh-ui-meta",
 			children: props.label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "zhihu-usage-card-value",
+			className: "dsh-ui-heading zhihu-usage-value",
 			children: [String(props.value), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "zhihu-usage-card-unit",
+				className: "dsh-ui-meta",
 				children: props.unit
 			})]
 		})]
@@ -1554,6 +2795,7 @@ function formatSize(size) {
 }
 function KnowledgeSection(props) {
 	const { rpc } = props;
+	const t = useT();
 	const gateRef = (0, react.useRef)(null);
 	if (!gateRef.current) gateRef.current = createZhihuClientState();
 	const gate = gateRef.current;
@@ -1561,7 +2803,6 @@ function KnowledgeSection(props) {
 	const [baseId, setBaseId] = (0, react.useState)("");
 	const [file, setFile] = (0, react.useState)(void 0);
 	const [fileKey, setFileKey] = (0, react.useState)(0);
-	const fileRef = (0, react.useRef)(null);
 	const [busy, setBusy] = (0, react.useState)(false);
 	const [note, setNote] = (0, react.useState)(void 0);
 	const [failure, setFailure] = (0, react.useState)(void 0);
@@ -1576,7 +2817,7 @@ function KnowledgeSection(props) {
 			if (!result.ok) {
 				setList({
 					status: "error",
-					failure: failureOf(result.error.code, result.error.message)
+					failure: failureOf(result.error.code, result.error.message, t)
 				});
 				return;
 			}
@@ -1585,7 +2826,7 @@ function KnowledgeSection(props) {
 					status: "error",
 					failure: {
 						kind: "request",
-						text: "响应格式与契约不符。"
+						text: t("响应格式与契约不符。", "The response does not match the expected shape.")
 					}
 				});
 				return;
@@ -1598,10 +2839,14 @@ function KnowledgeSection(props) {
 			if (!gate.isCurrent(ticket)) return;
 			setList({
 				status: "error",
-				failure: networkFailure(cause)
+				failure: networkFailure(cause, t)
 			});
 		}
-	}, [gate, rpc]);
+	}, [
+		gate,
+		rpc,
+		t
+	]);
 	(0, react.useEffect)(() => {
 		load();
 	}, [load]);
@@ -1610,7 +2855,7 @@ function KnowledgeSection(props) {
 		setFailure(void 0);
 		setNote(void 0);
 		if (file.size > KB_MAX_BYTES) {
-			setFailure("文件超过 20 MB 上限。");
+			setFailure(t("文件超过 20 MB 上限。", "The file exceeds the 20 MB limit."));
 			return;
 		}
 		const { ticket, signal } = gate.begin();
@@ -1626,161 +2871,183 @@ function KnowledgeSection(props) {
 			if (!gate.isCurrent(ticket)) return;
 			const result = raw;
 			if (!result.ok) {
-				setFailure(`上传失败：${result.error.message}`);
+				setFailure(t(`上传失败：${result.error.message}`, `Upload failed: ${result.error.message}`));
 				return;
 			}
-			setNote("已上传到知乎知识库。");
+			setNote(t("已上传到知乎知识库。", "Uploaded to the Zhihu knowledge base."));
 			setFile(void 0);
 			setFileKey((key) => key + 1);
 			await load();
 		} catch (cause) {
 			if (!gate.isCurrent(ticket)) return;
-			setFailure(`上传失败：${cause instanceof Error ? cause.message : String(cause)}`);
+			const detail = cause instanceof Error ? cause.message : String(cause);
+			setFailure(t(`上传失败：${detail}`, `Upload failed: ${detail}`));
 		} finally {
 			setBusy(false);
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "zhihu-knowledge",
+		className: "dsh-ui-stack",
 		"data-testid": "zhihu-knowledge",
-		"aria-label": "知乎知识库",
+		"aria-label": t("知乎知识库", "Zhihu knowledge base"),
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "zhihu-intro",
-				children: "把参考资料上传到知乎知识库，供搭档检索。文件会进入知乎云端，请勿上传未发表手稿。"
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "dsh-ui-help",
+				children: [
+					t("上传参考资料供检索；文件进入知乎云端，勿上传未发表手稿。", "Upload references for retrieval. Files go to Zhihu cloud, so avoid unpublished drafts."),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExternalLink, {
+						url: KB_MANAGE_URL,
+						children: t("管理知识库", "Manage knowledge bases")
+					})
+				]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-				className: "zhihu-link",
-				href: KB_MANAGE_URL,
-				target: "_blank",
-				rel: "noreferrer",
-				children: "管理知识库"
-			}) }),
 			list.status === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "zhihu-status",
+				className: "dsh-ui-loading",
 				role: "status",
-				children: [activityDots(), "正在读取知识库列表…"]
+				children: [activityDots(), t("正在读取知识库列表…", "Loading knowledge bases…")]
 			}) : null,
-			list.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "zhihu-error",
+			list.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-error",
 				role: "alert",
-				children: [`${list.failure.text} `, list.failure.kind !== "credential" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+				children: list.failure.text
+			}), list.failure.kind !== "credential" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ui-actions",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
 					host: props.Button,
-					className: "zhihu-button",
 					onClick: () => void load(),
-					children: "重试"
-				}) : null]
-			}) : null,
+					children: t("重试", "Retry")
+				})
+			}) : null] }) : null,
 			list.status === "ready" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "zhihu-field",
+				className: "dsh-ui-field",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-						className: "zhihu-field-label",
+						className: "dsh-ui-label",
 						htmlFor: "zhihu-kb-base",
-						children: "目标知识库"
+						children: t("目标知识库", "Target knowledge base")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "zhihu-row",
+						className: "dsh-ui-row",
 						children: [renderSelect(props.Select, {
+							id: "zhihu-kb-base",
 							value: baseId,
 							disabled: busy,
-							"aria-label": "目标知识库",
+							"aria-label": t("目标知识库", "Target knowledge base"),
 							onChange: setBaseId,
 							options: [{
 								value: "",
-								label: "默认知识库"
+								label: t("默认知识库", "Default knowledge base")
 							}, ...list.bases.map((base) => ({
 								value: base.id,
-								label: `${base.name}${base.isDefault ? "（默认）" : ""} · ${base.contentCount} 篇`
+								label: t(`${base.name}${base.isDefault ? "（默认）" : ""} · ${base.contentCount} 篇`, `${base.name}${base.isDefault ? " (default)" : ""} · ${base.contentCount} docs`)
 							}))]
-						}, "zhihu-select"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+						}, "dsh-ui-select"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
 							host: props.Button,
-							className: "zhihu-button",
 							disabled: busy,
 							onClick: () => void load(),
-							children: "刷新"
+							children: t("刷新", "Refresh")
 						})]
 					}),
 					list.bases.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "zhihu-hint",
-						children: "暂无可用知识库。"
+						className: "dsh-ui-hint",
+						children: t("暂无可用知识库，将上传到默认知识库。", "No knowledge bases yet; uploads go to the default one.")
 					}) : null
 				]
 			}) : null,
 			list.status === "ready" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "zhihu-field",
+				className: "dsh-ui-field",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "zhihu-field-label",
-						children: "选择文件"
+						className: "dsh-ui-label",
+						id: "zhihu-kb-file-label",
+						children: t("参考资料", "Reference file")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						ref: fileRef,
 						id: "zhihu-kb-file",
 						type: "file",
 						accept: KB_ACCEPT,
-						hidden: true,
 						className: "zhihu-file",
+						"aria-labelledby": "zhihu-kb-file-label",
 						disabled: busy,
 						onChange: (event) => setFile(event.target.files?.[0])
 					}, fileKey),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
-						host: props.Button,
-						className: "zhihu-button",
-						disabled: busy,
-						onClick: () => fileRef.current?.click(),
-						children: file ? file.name : "选择文件"
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ui-row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							htmlFor: "zhihu-kb-file",
+							className: "zhihu-file-trigger",
+							"aria-disabled": busy || void 0,
+							children: t("选择文件", "Choose file")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ui-meta dsh-ui-wrap",
+							children: file ? `${file.name} · ${formatSize(file.size)}` : t("未选择文件（最大 20 MB）", "No file chosen (max 20 MB)")
+						})]
 					})
 				]
 			}) : null,
 			list.status === "ready" && file ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "zhihu-upload-confirm",
-				children: `确认将「${file.name}」（${formatSize(file.size)}）上传到${baseId ? "所选知识库" : "默认知识库"}？文件会进入知乎云端。`
+				className: "dsh-ui-banner",
+				children: t(`将「${file.name}」上传到${baseId ? "所选知识库" : "默认知识库"}？文件进入知乎云端。`, `Upload "${file.name}" to the ${baseId ? "selected" : "default"} knowledge base? It goes to Zhihu cloud.`)
 			}) : null,
 			list.status === "ready" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "zhihu-row",
+				className: "dsh-ui-actions",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
 					host: props.Button,
 					variant: "primary",
-					className: "zhihu-button zhihu-button-primary",
 					disabled: busy || !file,
 					onClick: () => void upload(),
-					children: busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), "上传中…"] }) : "确认上传"
+					children: busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), t("上传中…", "Uploading…")] }) : t("确认上传", "Upload")
 				})
 			}) : null,
 			note ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "zhihu-saved",
+				className: "dsh-ui-notice",
 				role: "status",
 				children: note
 			}) : null,
 			failure ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "zhihu-warning",
+				className: "dsh-ui-error",
 				role: "alert",
 				children: failure
 			}) : null
 		]
 	});
 }
-const TAB_LABEL = {
-	search: "搜索",
-	settings: "设置",
-	usage: "用量",
-	knowledge: "知识库"
-};
+function tabLabel(tab, t) {
+	switch (tab) {
+		case "settings": return t("设置", "Settings");
+		case "usage": return t("统计", "Stats");
+		case "quota": return t("官方用量", "Official quota");
+		case "knowledge": return t("知识库", "Knowledge base");
+		case "test": return t("测试", "Test");
+	}
+}
 const SETTINGS_TABS = [
 	"settings",
 	"usage",
+	"quota",
 	"knowledge",
-	"search"
+	"test"
 ];
+/**
+* Tabs that have been opened stay mounted (hidden when inactive), so their
+* loaded data is cached here instead of being refetched on every switch.
+*/
+function nextVisitedTabs(visited, next) {
+	return visited.includes(next) ? [...visited] : [...visited, next];
+}
 function ZhihuSettings(props) {
 	const { rpc, credentials, Select, Button, Input } = props;
+	const t = useT();
 	const gateRef = (0, react.useRef)(null);
 	if (!gateRef.current) gateRef.current = createZhihuClientState();
 	const gate = gateRef.current;
 	const [tab, setTab] = (0, react.useState)("settings");
+	const [visited, setVisited] = (0, react.useState)(["settings"]);
 	const [query, setQuery] = (0, react.useState)("");
-	const [mode, setMode] = (0, react.useState)("search");
+	const [testOperation, setTestOperation] = (0, react.useState)("search");
+	const isSearchOperation = MODES.includes(testOperation);
+	const mode = isSearchOperation ? testOperation : "search";
 	const [askModel, setAskModel] = (0, react.useState)("zhida-thinking-1p5");
 	const [scopes, setScopes] = (0, react.useState)(["public"]);
 	const [phase, setPhase] = (0, react.useState)("idle");
@@ -1788,7 +3055,6 @@ function ZhihuSettings(props) {
 	const [outcome, setOutcome] = (0, react.useState)(null);
 	const [revision, setRevision] = (0, react.useState)(0);
 	const [resultRevision, setResultRevision] = (0, react.useState)(0);
-	const queryRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => () => gate.cancel(), [gate]);
 	const runSearch = (0, react.useCallback)(async () => {
 		if (mode !== "hot" && !query.trim()) return;
@@ -1817,7 +3083,7 @@ function ZhihuSettings(props) {
 				if (!parsed) {
 					setFailure({
 						kind: "request",
-						text: "响应格式与契约不符。"
+						text: t("响应格式与契约不符。", "The response does not match the expected shape.")
 					});
 					setPhase("error");
 					return;
@@ -1827,12 +3093,12 @@ function ZhihuSettings(props) {
 				setPhase("done");
 			} else if (response.error.code === "cancelled") setPhase("idle");
 			else {
-				setFailure(failureOf(response.error.code, response.error.message));
+				setFailure(failureOf(response.error.code, response.error.message, t));
 				setPhase("error");
 			}
 		} catch (cause) {
 			if (!gate.isCurrent(ticket)) return;
-			setFailure(networkFailure(cause));
+			setFailure(networkFailure(cause, t));
 			setPhase("error");
 		}
 	}, [
@@ -1841,7 +3107,8 @@ function ZhihuSettings(props) {
 		mode,
 		query,
 		askModel,
-		scopes
+		scopes,
+		t
 	]);
 	const resetToIdle = () => {
 		setPhase((current) => current === "loading" || current === "error" ? "idle" : current);
@@ -1852,25 +3119,26 @@ function ZhihuSettings(props) {
 		setRevision(gate.noteInput());
 		resetToIdle();
 	};
-	const onModeChange = (next) => {
-		if (next === mode) return;
+	const onTestOperationChange = (next) => {
+		if (next === testOperation) return;
 		setRevision(gate.noteInput());
-		setMode(next);
-		resetToIdle();
+		setTestOperation(next);
+		setOutcome(null);
+		setPhase("idle");
+		setFailure(null);
 	};
 	const onTabChange = (next) => {
 		if (next === tab) return;
 		gate.cancel();
 		setPhase((current) => current === "loading" ? "idle" : current);
 		setTab(next);
+		setVisited((current) => nextVisitedTabs(current, next));
 	};
 	const toggleScope = (scope) => {
+		if (scopes.length === 1 && scopes[0] === scope) return;
 		setRevision(gate.noteInput());
 		resetToIdle();
-		setScopes((current) => {
-			const next = current.includes(scope) ? current.filter((item) => item !== scope) : [...current, scope];
-			return next.length > 0 ? next : current;
-		});
+		setScopes((current) => current.includes(scope) ? current.filter((item) => item !== scope) : [...current, scope]);
 	};
 	const onAskModelChange = (next) => {
 		if (next === askModel) return;
@@ -1889,150 +3157,154 @@ function ZhihuSettings(props) {
 	const isSearchDisabled = () => phase === "loading" || mode !== "hot" && !query.trim();
 	const stale = outcome !== null && resultRevision !== revision;
 	const searchDisabled = isSearchDisabled();
-	const tablist = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	const [firstTab, ...restTabs] = SETTINGS_TABS.map((key) => ({
+		value: key,
+		label: tabLabel(key, t),
+		id: `zhihu-tab-${key}`,
+		panelId: `zhihu-tabpanel-${key}`
+	}));
+	const tablist = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
+		value: tab,
+		onChange: onTabChange,
+		label: t("知乎分区", "Zhihu sections"),
 		className: "zhihu-tabs",
-		role: "tablist",
-		"aria-label": "知乎资料分区",
-		onKeyDown: (event) => {
-			if (![
-				"ArrowLeft",
-				"ArrowRight",
-				"Home",
-				"End"
-			].includes(event.key)) return;
-			const buttons = [...event.currentTarget.querySelectorAll("[role=\"tab\"]")];
-			const index = buttons.indexOf(event.target);
-			if (index < 0) return;
-			event.preventDefault();
-			const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + buttons.length) % buttons.length;
-			buttons[next]?.focus();
-			buttons[next]?.click();
-		},
-		children: SETTINGS_TABS.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
-			host: Button,
-			type: "button",
-			role: "tab",
-			"aria-selected": tab === key,
-			tabIndex: tab === key ? 0 : -1,
-			className: "zhihu-tab",
-			onClick: () => onTabChange(key),
-			children: TAB_LABEL[key]
-		}, key))
-	}, "tabs");
-	const body = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "zhihu-panel-body",
-		children: [
-			tab === "search" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				role: "tabpanel",
-				className: "zhihu-field",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "zhihu-row",
-						children: [renderSelect(Select, {
-							"aria-label": "搜索方式",
-							value: mode,
-							onChange: (next) => onModeChange(next),
-							options: Object.keys(MODE_LABEL).map((key) => ({
-								value: key,
-								label: MODE_LABEL[key]
-							}))
-						}, "zhihu-select"), mode === "ask" ? renderSelect(Select, {
-							"aria-label": "直答模型",
-							value: askModel,
-							onChange: (next) => onAskModelChange(next),
-							options: ASK_MODELS.map((model) => ({
-								value: model.value,
-								label: model.label
-							}))
-						}, "zhihu-select") : null]
-					}),
-					mode === "knowledge" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "zhihu-scopes",
-						role: "group",
-						"aria-label": "检索范围",
-						children: SCOPE_OPTIONS.map((scope) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
-							host: Button,
-							role: "checkbox",
-							"aria-checked": scopes.includes(scope.value),
-							className: `zhihu-scope${scopes.includes(scope.value) ? " is-on" : ""}`,
-							onClick: () => toggleScope(scope.value),
-							children: scope.label
-						}, scope.value))
-					}) : null,
-					renderInput(Input, {
-						ref: queryRef,
-						type: "search",
-						className: "zhihu-input",
-						"data-testid": "zhihu-query",
-						"aria-label": "搜索关键词",
-						placeholder: mode === "hot" ? "热榜无需关键词" : "输入关键词…",
-						value: query,
-						disabled: mode === "hot",
-						onChange: onQueryChange,
-						onKeyDown: onQueryKeyDown
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "zhihu-row",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
-							host: Button,
-							variant: "primary",
-							className: "zhihu-button zhihu-button-primary",
-							"data-testid": "zhihu-search",
-							disabled: searchDisabled,
-							onClick: () => void runSearch(),
-							children: phase === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), "请求中…"] }) : mode === "hot" ? "获取热榜" : "搜索"
-						}), phase === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
-							host: Button,
-							className: "zhihu-button",
-							onClick: () => {
-								gate.cancel();
-								setPhase("idle");
-							},
-							children: "取消"
-						}) : null]
-					}),
-					phase === "idle" && mode !== "hot" && !query.trim() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "zhihu-status",
-						role: "status",
-						children: "输入关键词后搜索。"
-					}) : null,
-					phase === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "zhihu-status",
-						role: "status",
-						children: [activityDots(), "正在请求知乎…"]
-					}) : null,
-					phase === "error" && failure ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "zhihu-error",
-						role: "alert",
-						children: failure.text
-					}) : null,
-					phase === "done" && outcome ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutcomeView, {
-						outcome,
-						stale
-					}) : null
-				]
+		items: [firstTab, ...restTabs]
+	});
+	const panel = (key, content) => visited.includes(key) || key === tab ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		id: `zhihu-tabpanel-${key}`,
+		role: "tabpanel",
+		"aria-labelledby": `zhihu-tab-${key}`,
+		hidden: key !== tab,
+		className: "dsh-ui-panel",
+		children: content
+	}, key) : null;
+	const testPanel = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dsh-ui-field",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuTestSelector, {
+			value: testOperation,
+			onChange: onTestOperationChange,
+			Select
+		}), isSearchOperation ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ui-row",
+				children: mode === "ask" ? renderSelect(Select, {
+					"aria-label": t("直答模型", "Answer model"),
+					value: askModel,
+					onChange: (next) => onAskModelChange(next),
+					options: ASK_MODELS.map((model) => ({
+						value: model.value,
+						label: t(model.zh, model.en)
+					}))
+				}, "dsh-ui-select") : null
+			}),
+			mode === "knowledge" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ui-row-wrap",
+				role: "group",
+				"aria-label": t("检索范围", "Search scope"),
+				"aria-describedby": "zhihu-scope-hint",
+				children: SCOPE_OPTIONS.map((scope) => {
+					const checked = scopes.includes(scope.value);
+					const locked = checked && scopes.length === 1;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Pill, {
+						active: checked,
+						role: "checkbox",
+						"aria-checked": checked,
+						"aria-disabled": locked || void 0,
+						onClick: () => toggleScope(scope.value),
+						children: t(scope.zh, scope.en)
+					}, scope.value);
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-ui-hint",
+				id: "zhihu-scope-hint",
+				children: t("至少保留一个检索范围。", "Keep at least one scope selected.")
+			})] }) : null,
+			renderInput(Input, {
+				type: "search",
+				className: "zhihu-input",
+				"data-testid": "zhihu-query",
+				"aria-label": t("搜索关键词", "Search keywords"),
+				placeholder: mode === "hot" ? t("热榜无需关键词", "Trending needs no keywords") : t("输入关键词…", "Enter keywords…"),
+				value: query,
+				disabled: mode === "hot",
+				onChange: onQueryChange,
+				onKeyDown: onQueryKeyDown
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ui-actions",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+					host: Button,
+					variant: "primary",
+					"data-testid": "zhihu-search",
+					disabled: searchDisabled,
+					onClick: () => void runSearch(),
+					children: mode === "hot" ? t("获取热榜", "Get trending") : t("搜索", "Search")
+				}), phase === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuButton, {
+					host: Button,
+					onClick: () => {
+						gate.cancel();
+						setPhase("idle");
+					},
+					children: t("取消", "Cancel")
+				}) : null]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: phase === "loading" ? "dsh-ui-loading" : "dsh-ui-hint",
+				role: "status",
+				children: phase === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [activityDots(), t("正在请求知乎…", "Requesting Zhihu…")] }) : phase === "idle" && mode !== "hot" && !query.trim() ? t("输入关键词后搜索。", "Enter keywords to search.") : null
+			}),
+			phase === "error" && failure ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ui-error",
+				role: "alert",
+				children: failure.text
 			}) : null,
-			tab === "settings" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsSection, {
+			phase === "done" && outcome ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutcomeView, {
+				outcome,
+				stale
+			}) : null
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuOpenPlatformSection, {
+			selectedOperation: testOperation,
+			rpc,
+			Button,
+			Input,
+			Select
+		}, testOperation)]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "zhihu-panel zhihu-settings-embed",
+		"data-testid": "zhihu-settings-embed",
+		"aria-label": t("知乎", "Zhihu"),
+		children: [
+			tablist,
+			panel("settings", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsSection, {
 				credentials,
 				Button,
 				Input
-			}) : null,
-			tab === "usage" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageSection, {
+			})),
+			panel("usage", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageSection, {
 				rpc,
 				Button
-			}) : null,
-			tab === "knowledge" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnowledgeSection, {
+			})),
+			panel("quota", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuQuotaSection, {
+				rpc,
+				Button
+			})),
+			panel("knowledge", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnowledgeSection, {
 				rpc,
 				Select,
 				Button
-			}) : null
+			})),
+			panel("test", testPanel)
 		]
-	}, "body");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "zhihu-panel zhihu-settings-embed",
-		"data-testid": "zhihu-settings-embed",
-		"aria-label": SLOT_LABEL,
-		children: [tablist, body]
+	});
+}
+/** Settings root: resolves the host locale once and hands it to every section. */
+function ZhihuSettingsRoot(props) {
+	const { locale, ...rest } = props;
+	const active = useHostLocale(locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuLocaleContext.Provider, {
+		value: active,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuSettings, { ...rest })
 	});
 }
 function apply(ctx) {
@@ -2041,9 +3313,16 @@ function apply(ctx) {
 		return () => style?.remove();
 	}, "zhihu.styles");
 	const client = ctx;
-	const settingsRender = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuSettings, {
+	let locale;
+	try {
+		locale = client.locale;
+	} catch {
+		locale = void 0;
+	}
+	const settingsRender = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZhihuSettingsRoot, {
 		rpc: client.connection.rpc,
 		credentials: wrapCredentials(client.remote.credentials),
+		locale,
 		...hostComponentsFromRenderProps(props)
 	});
 	ctx.effect(() => client.slots.inject("plugins.bundle.config", () => client.slots.register({
@@ -2054,12 +3333,19 @@ function apply(ctx) {
 	}, settingsRender)), "zhihu.settings");
 }
 //#endregion
+exports.CapabilitiesNote = CapabilitiesNote;
+exports.ExternalLink = ExternalLink;
+exports.SETTINGS_TABS = SETTINGS_TABS;
+exports.TEST_OPTIONS = TEST_OPTIONS;
+exports.ZhihuTestSelector = ZhihuTestSelector;
 exports.apply = apply;
 exports.formatUsageDate = formatUsageDate;
 exports.inject = inject;
 exports.name = name;
+exports.nextVisitedTabs = nextVisitedTabs;
 exports.summarizeUsage = summarizeUsage;
 exports.usageChartTicks = usageChartTicks;
+exports.usageValueLabels = usageValueLabels;
 
 //# sourceMappingURL=client.inner.cjs.map
     return module.exports;