dsh-ntr 0.1.0 → 0.1.2

package/lib/types/client/acp-ui.d.ts

@@ -281,6 +281,14 @@ export declare function closeAcpMenu(): void;
 export declare function setAcpMenuError(error?: string): void;
 /** Subscribe to the open-picker state (both the chips and the overlay read it). */
 export declare function useAcpMenu(): MenuState | null;
+/** Open the NTR settings dialog (the empty agent roster's way forward). */
+export declare function openAcpSettingsDialog(): void;
+/** Close the NTR settings dialog (close button, mask click, Escape). */
+export declare function closeAcpSettingsDialog(): void;
+/** Current dialog state, for tests and non-React readers. */
+export declare function acpSettingsDialogIsOpen(): boolean;
+/** Subscribe to the dialog state (the root overlay entry reads it). */
+export declare function useAcpSettingsDialogOpen(): boolean;
 /** One selectable row of a picker. */
 export interface AcpMenuItem {
     id: string;

package/lib/types/client/session-controls.d.ts

@@ -49,10 +49,12 @@
  * different slots, so they share that module's phase clock rather than trying
  * to animate across slot boundaries.
  *
- * It is deliberately quiet: the base renders NOTHING for a conversation no ACP
- * agent has served, so an ordinary chat is untouched even before the gate
- * stands down. The ACP view tab is the entry point for those (and for re-entry
- * after a detour through another provider).
+ * It is deliberately quiet: outside ACP mode the gate never mounts it, and
+ * before the host has answered the agent roster it renders nothing. Once the
+ * roster is KNOWN to be empty the base stays and its picker carries the
+ * "open NTR settings" action — an NTR conversation with nothing configured
+ * still has a way forward instead of an empty cell. The ACP view tab remains
+ * the entry point for conversations no agent has served.
  */
 import type { CSSProperties } from 'react';
 import type { AcpChatInjected, AcpMenuKind, AcpMenuSection, AcpSessionHook } from './acp-ui.tsx';
@@ -88,6 +90,16 @@ interface RouteInfo {
     effectiveEffort?: string;
     effortLabel?: string;
 }
+/**
+ * Whether the agent base has anything honest to show.
+ *
+ * An empty roster has two meanings, and they must not be conflated: before the
+ * host answers `agents/list` it means "not read yet" (rendering a setup entry
+ * there would accuse a correctly configured deployment on every page load),
+ * while after the answer it means "nothing is configured" — exactly the state
+ * that must keep the base and offer the way into NTR settings.
+ */
+export declare function agentBaseHasData(bound: ChatSessionView | undefined, agents: readonly AgentView[], rosterLoaded: boolean): boolean;
 /**
  * The agent this conversation is LOCKED to, if its first ACP turn has run.
  *
@@ -202,9 +214,11 @@ export declare function advancedOptions(catalog: AgentCatalogResult | undefined,
  * The tooltip claims only what the menu behind the chip does: switch the agent.
  * The agent's models and thought levels have chips of their own (user decision,
  * 2026-10-17), so the previous wording — "switch the agent, its model and the
- * thought level" — promised a menu that holds the roster alone.
+ * thought level" — promised a menu that holds the roster alone. An EMPTY
+ * roster is its own case: the menu cannot switch to anything, it offers the
+ * way into NTR settings, so the tooltip says that instead of promising a pick.
  */
-export declare function agentBaseChip(route: RouteInfo, routed: boolean, acp: AcpChatInjected['acp']): {
+export declare function agentBaseChip(route: RouteInfo, routed: boolean, acp: AcpChatInjected['acp'], rosterEmpty?: boolean): {
     label: string;
     title: string;
 };
@@ -269,6 +283,13 @@ export interface MenuContext {
  * `agentId@value`.
  */
 export declare const REFRESH_CATALOG_ITEM = "__refresh-catalog__";
+/**
+ * The empty roster's setup action. Like the model picker's refresh row it is an
+ * ACTION inside the picker, not an agent: agent ids match
+ * `[a-z0-9][a-z0-9._-]{0,63}` (no leading underscore), so no real id can
+ * collide with it.
+ */
+export declare const OPEN_SETTINGS_ITEM = "__open-settings__";
 /**
  * REMOVED on purpose (2026-10-17): the agent's own `session/set_mode` list used
  * to ride inside the agent base's menu. It has its own control

package/lib/types/client/settings-dialog.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The NTR settings dialog, opened from the agent base's empty-roster menu.
+ *
+ * WHY A DIALOG OF OUR OWN: the host settings shell owns its open state and
+ * exposes no programmatic way in. The sidebar seat that receives `openSettings`
+ * (`settings.launcher`) is a single-occupant slot already held by the account
+ * menu, and `openSection` is only handed to `settings.onboarding` registrants —
+ * so a conversation surface cannot drive the shell's modal. This dialog mounts
+ * the SAME `AcpSettingsSection` the shell mounts, on the frame's overlay layer
+ * (`shell.overlay`): one settings surface, two entrances, no duplicated
+ * configuration logic.
+ *
+ * The trigger (composer model seat) and this dialog (root overlay) live in
+ * unrelated slot trees, so the open state is the module-level store in
+ * `acp-ui.tsx` (`openAcpSettingsDialog`).
+ */
+import type { AcpStore } from './store.ts';
+/** The root overlay entry's inject face. */
+export interface AcpSettingsDialogProps {
+    acp: AcpStore;
+}
+/** Frame-wide NTR settings surface; renders nothing while closed. */
+export declare function AcpSettingsDialog(props: AcpSettingsDialogProps): import("react").JSX.Element | null;

package/lib/types/client/store.d.ts

@@ -110,8 +110,20 @@ export interface ChatTranscript {
 }
 export interface UiState {
     open: boolean;
+    /**
+     * Bumped by {@link AcpStore.refreshLocale}. Labels resolve while rendering,
+     * but memoized transcript rows compare props — this counter is what tells
+     * them the language switched.
+     */
+    localeRev: number;
     stream: 'init' | 'live' | 'down';
     agents: AgentView[];
+    /**
+     * Whether the host has answered `agents/list` at least once in this page.
+     * `agents: []` alone cannot tell "no agent configured" from "not read yet";
+     * a surface that offers a setup entry on an empty roster must wait for this.
+     */
+    agentsLoaded: boolean;
     sessions: SessionView[];
     activeSessionId?: string;
     blocks: Block[];
@@ -332,6 +344,8 @@ export declare class AcpStore {
     private readonly seatCatalogReads;
     /** In-flight `agent/cached-models` reads, keyed by agent id. */
     private readonly cachedModelReads;
+    /** Counts behind the last successful explicit re-detect, so a locale switch can re-render its summary. */
+    private detectCounts;
     constructor(rpc: RpcCall, locale: (zh: string, en: string) => string);
     subscribe(listener: Listener): () => void;
     getSnapshot(): UiState;
@@ -356,6 +370,7 @@ export declare class AcpStore {
     /** Snapshot refresh used on panel open and after a stream outage. */
     resync(): Promise<void>;
     detectAgents(): Promise<void>;
+    private detectSummaryOf;
     saveAgent(payload: AgentSavePayload): Promise<void>;
     /**
      * Dry-run the connection form: the host spawns a throwaway process from
@@ -580,6 +595,13 @@ export declare class AcpStore {
      * renders or every row re-renders on every store notification.
      */
     label: (zh: string, en: string) => string;
+    /**
+     * Republish the snapshot after a locale switch. Every `label()` resolves
+     * against the current language while rendering, so a notification is all
+     * that is needed — except the detect summary, which the store owns as an
+     * already-resolved string and rebuilds from its counts here.
+     */
+    refreshLocale(): void;
     clearNotice(): void;
     private flashError;
     private applyEvent;

package/locale/en.json

@@ -0,0 +1,5 @@
+{
+  "meta": {
+    "description": "Interactive Agent Client Protocol (ACP) client for the DSH web UI: attach any ACP-capable agent and stream its session."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,5 @@
+{
+  "meta": {
+    "description": "面向 DSH Web 界面的 ACP（Agent Client Protocol）客户端：接入任意支持 ACP 的 agent，实时展示它的会话。"
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-ntr",
-  "version": "0.1.0",
-  "description": "Interactive Agent Client Protocol (ACP) client for the DSH web UI: attach any ACP-capable agent, stream its session, answer permission requests as a human.",
+  "version": "0.1.2",
+  "description": "Interactive Agent Client Protocol (ACP) client for the DSH web UI: attach any ACP-capable agent and stream its session.",
   "repository": "https://github.com/GDWhisper/dsh-ntr.git",
   "type": "module",
   "main": "lib/index.js",
@@ -17,12 +17,14 @@
     },
     "./cordis.patch.yml": "./cordis.patch.yml",
     "./package.json": "./package.json",
-    "./acp-guard": "./presets/acp/acp-guard.mjs"
+    "./acp-guard": "./presets/acp/acp-guard.mjs",
+    "./locale/*.json": "./locale/*.json"
   },
   "files": [
     "lib",
     "src",
     "presets",
+    "locale",
     "cordis.patch.yml"
   ],
   "scripts": {

package/src/client/acp-ui.tsx

@@ -434,6 +434,54 @@ export function useAcpMenu(): MenuState | null {
   )
 }
 
+// ---- The NTR settings dialog ----
+
+/**
+ * Open state of the frame-wide NTR settings dialog (`settings-dialog.tsx`).
+ *
+ * Module-level because the two ends live in unrelated slot trees: the trigger
+ * is the composer's agent base (a session-scoped model-seat entry) and the
+ * dialog itself rides the root `shell.overlay` layer. A React context cannot
+ * span that boundary, so this is the same tiny external-store seam the menu
+ * uses above.
+ */
+let settingsDialogOpen = false
+const settingsDialogListeners = new Set<() => void>()
+
+function emitSettingsDialog(): void {
+  for (const listener of [...settingsDialogListeners]) listener()
+}
+
+/** Open the NTR settings dialog (the empty agent roster's way forward). */
+export function openAcpSettingsDialog(): void {
+  if (settingsDialogOpen) return
+  settingsDialogOpen = true
+  emitSettingsDialog()
+}
+
+/** Close the NTR settings dialog (close button, mask click, Escape). */
+export function closeAcpSettingsDialog(): void {
+  if (!settingsDialogOpen) return
+  settingsDialogOpen = false
+  emitSettingsDialog()
+}
+
+/** Current dialog state, for tests and non-React readers. */
+export function acpSettingsDialogIsOpen(): boolean {
+  return settingsDialogOpen
+}
+
+/** Subscribe to the dialog state (the root overlay entry reads it). */
+export function useAcpSettingsDialogOpen(): boolean {
+  return useSyncExternalStore(
+    cb => {
+      settingsDialogListeners.add(cb)
+      return () => { settingsDialogListeners.delete(cb) }
+    },
+    acpSettingsDialogIsOpen,
+  )
+}
+
 // ---- Menu presentation ----
 
 /** One selectable row of a picker. */
@@ -883,6 +931,26 @@ const STYLE = `
 .ntr-acp-empty-hint { color: var(--dsw-alias-text-secondary, #6b7280); font-size: 12px; }
 .ntr-acp-seat-diag { font-family: var(--dsw-alias-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); opacity: 0.72; word-break: break-word; }
 .ntr-acp-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+/* ---- NTR settings dialog (shell.overlay) ---- */
+/* Frame-wide surface opened from the agent base's empty-roster menu. The
+   overlay layer itself is click-through, so the layer opts back in and blocks
+   the app while it is up. */
+.ntr-acp-dialog-layer { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
+.ntr-acp-dialog-mask { position: absolute; inset: 0; background: var(--dsw-alias-bg-mask-1, rgba(0, 0, 0, 0.4)); }
+.ntr-acp-dialog {
+  position: relative; display: flex; flex-direction: column; overflow: hidden;
+  width: min(920px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: inherit;
+  border-radius: 24px; box-shadow: var(--dsw-elevation-prominent, 0 24px 60px rgba(0, 0, 0, 0.25));
+}
+.ntr-acp-dialog-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px 24px; }
+.ntr-acp-dialog-title { flex: 1; font-size: 16px; font-weight: 600; }
+.ntr-acp-dialog-close { font: inherit; font-size: 14px; line-height: 1; width: 30px; height: 30px; padding: 0; border: none; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
+.ntr-acp-dialog-close:hover { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
+.ntr-acp-dialog-body { flex: 1; min-height: 0; overflow: auto; }
+/* The section brings its own page scroll for the settings shell's content
+   column; the dialog body is the scroll owner here. */
+.ntr-acp-dialog-body > .dwa-root { max-width: none; overflow: visible; }
 `
 
 let styleMounted = false

package/src/client/acp-view.tsx

@@ -301,13 +301,14 @@ function PlanCard({ entries, t }: { entries: Extract<Block, { kind: 'plan' }>['e
 }
 
 /**
- * One stream block, dispatched by kind. Memoized on its props — `block` and
- * the store's instance-bound `label` — so a folded batch re-renders only the
- * rows whose block object changed (`foldUpdate` replaces blocks immutably)
+ * One stream block, dispatched by kind. Memoized on its props — `block`, the
+ * store's instance-bound `label`, and `localeRev` (it moves on a language
+ * switch, so translated copy re-renders) — so a folded batch re-renders only
+ * the rows whose block object changed (`foldUpdate` replaces blocks immutably)
  * instead of the whole transcript on every store notification. `key` stays the
  * index on purpose: blocks fold append-only, and identity is the block object.
  */
-const BlockView = memo(function BlockView({ block, label }: { block: Block; label: Translate }) {
+const BlockView = memo(function BlockView({ block, label }: { block: Block; label: Translate; localeRev: number }) {
   const t = label
   switch (block.kind) {
     case 'user':
@@ -547,7 +548,7 @@ export function AcpConversationView(props: AcpViewProps) {
       >
         {transcript.blocks.length === 0
           ? <div className="ntr-acp-empty-hint">{t('还没有消息：在下面的输入框里发给它。', 'Nothing yet — send it a message below.')}</div>
-          : transcript.blocks.map((block, index) => <BlockView key={index} block={block} label={acp.label} />)}
+          : transcript.blocks.map((block, index) => <BlockView key={index} block={block} label={acp.label} localeRev={ui.localeRev} />)}
       </div>
     </div>
   )

package/src/client/index.tsx

@@ -18,6 +18,7 @@ import { AcpSettingsSection } from './panel.tsx'
 import { AcpComposerMode } from './composer-mode.tsx'
 import { AcpComposerAgentTag, AcpSessionControls, AcpSessionMenu } from './session-controls.tsx'
 import { AcpConversationView } from './acp-view.tsx'
+import { AcpSettingsDialog } from './settings-dialog.tsx'
 import {
   createModelSeatClaim,
   createPermissionSeatClaim,
@@ -59,7 +60,19 @@ interface StructuralServices {
   }
 }
 
-const zh = typeof navigator !== 'undefined' && /^zh\b/i.test(navigator.language)
+const browserPrefersZh = typeof navigator !== 'undefined' && /^zh\b/i.test(navigator.language)
+
+/**
+ * Structural view of the shell's locale service (`@deepseek-ai/dsh-client-locale`).
+ *
+ * Read through {@link ctx.get} rather than injected: a composition without the
+ * service must still load, and the label pairs carry their own browser-derived
+ * fallback for exactly that case.
+ */
+interface LocaleFace {
+  resolveText?(text: Record<string, string>): string
+  subscribe?(listener: () => void): () => void
+}
 
 /**
  * How long a host verdict may stand as the gate's ONLY fact source before the
@@ -97,8 +110,6 @@ export function apply(ctx: Context): void {
     throw new Error('dsh-ntr: browser connection.rpc is unavailable')
   }
   const call: RpcCall = (channel, endpoint, payload) => rpc.call(channel, endpoint, payload)
-  const store = new AcpStore(call, (zhText, enText) => (zh ? zhText : enText))
-  store.start()
 
   /**
    * Resolve one optional service without injecting it. A plain `ctx.get` at
@@ -108,6 +119,37 @@ export function apply(ctx: Context): void {
    */
   const service = <T,>(name: string): T | undefined => (ctx as unknown as { get(key: string): unknown }).get(name) as T | undefined
 
+  /**
+   * Resolve a Chinese/English pair against the shell's active locale. Read per
+   * call, so a language switch reaches every render-time `label()` call without
+   * rebuilding the store. A host without the locale service keeps the
+   * browser-derived choice the pairs shipped with.
+   */
+  const label = (zhText: string, enText: string): string => {
+    const resolved = service<LocaleFace>('locale')?.resolveText?.({ zh: zhText, en: enText })
+    return typeof resolved === 'string' && resolved !== '' ? resolved : browserPrefersZh ? zhText : enText
+  }
+
+  const store = new AcpStore(call, label)
+  store.start()
+
+  // A locale switch changes no data, only which side of each pair renders;
+  // republishing the snapshot is what re-runs them. Attached through
+  // `internal/service` so a late-arriving locale service is still hooked.
+  ctx.effect(() => {
+    let stop: (() => void) | undefined
+    const attach = (): void => {
+      if (stop !== undefined) return
+      stop = service<LocaleFace>('locale')?.subscribe?.(() => { store.refreshLocale() })
+    }
+    attach()
+    const stopService = ctx.on('internal/service', attach)
+    return () => {
+      stopService()
+      stop?.()
+    }
+  }, 'dsh-ntr: locale switch re-render')
+
   /** This session's command/projection face (`ctx.sessions`); `undefined` before it materializes. */
   const faceFor = (sessionId: string): AcpSessionFace | undefined => {
     try {
@@ -132,6 +174,19 @@ export function apply(ctx: Context): void {
     inject: () => ({ acp: store }),
   }, AcpSettingsSection)), 'dsh-ntr: settings section')
 
+  // The same NTR settings, opened from the composer when the agent roster is
+  // empty (the agent base's picker action). It rides the frame's overlay layer
+  // because the composer seat and the dialog live in unrelated slot trees; the
+  // host settings shell has no programmatic open seam, so the dialog mounts the
+  // same section the shell mounts (see settings-dialog.tsx). Renders nothing
+  // while closed.
+  ctx.effect(() => ctx.slots.inject('shell.overlay', () => ctx.slots.register({
+    name: 'shell.overlay',
+    id: 'acp-settings-dialog',
+    order: 30,
+    inject: () => ({ acp: store }),
+  }, AcpSettingsDialog as unknown as SlotComponent<any>)), 'dsh-ntr: NTR settings dialog')
+
   // The agent's OWN modes sit in the composer tool row — the seat the slot
   // contract reserves for exactly this ("entries sit beside that chrome, never
   // replace it"). They are a different layer from everything the host controls:

package/src/client/panel.tsx

@@ -147,16 +147,18 @@ const STYLE = `
 .dwa-inline-setting { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-2, #f9fafb); }
 .dwa-inline-setting .dwa-switch { flex-shrink: 0; margin-top: 1px; }
 .dwa-setting-copy { color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
-/* Panes stay flush (equal height) whatever the two list lengths are; the
-   shorter list's list body grows to fill, so its leftover is scrolling room
-   inside the list rather than a detached block under the last row. */
-.dwa-model-transfer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
-/* Tall enough for a comfortable selection (about ten rows) before scrolling:
-   both panes share this ceiling, so equal heights cost at most one row of
-   slack on the shorter side instead of a whole empty half. */
+/* Stacked, not side by side: the rows carry name, id and credit, and a
+   half-width pane truncated them at every realistic settings width. Each list
+   gets the whole column instead. */
+.dwa-model-transfer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
+/* Tall enough for a comfortable selection (about ten rows) before scrolling;
+   the cap keeps the two stacked panes from pushing the rest of the card away. */
 .dwa-model-pane { min-width: 0; max-height: 360px; display: flex; flex-direction: column; border: var(--ntr-line); border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-1, #fff); overflow: hidden; }
 .dwa-model-pane-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: var(--ntr-line); font-size: var(--ntr-font-xs); font-weight: 600; color: var(--dsw-alias-text-secondary, #4b5563); }
 .dwa-model-pane-head .dwa-btn { margin-left: auto; min-height: 26px; padding: 2px 8px; font-size: var(--ntr-font-xs); }
+.dwa-model-pane-head .dwa-caret-btn { flex: none; width: 22px; height: 22px; background: transparent; }
+.dwa-model-pane-head .dwa-caret-btn:hover { background: var(--dsw-alias-interactive-bg-active, #e5e7eb); }
+.dwa-model-pane.is-collapsed .dwa-model-list { display: none; }
 .dwa-model-list { display: flex; flex-direction: column; gap: 2px; padding: 5px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
 .dwa-model-section { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
 .dwa-model-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@@ -173,7 +175,19 @@ const STYLE = `
 .dwa-model-row.is-on { background: #3b82f614; color: #2563eb; }
 .dwa-model-row-mark { width: 12px; flex: none; text-align: center; opacity: 0.75; }
 .dwa-model-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dwa-model-row-value { flex: 0 1 auto; max-width: 45%; opacity: 0.55; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Name and credit keep their room; the id is the only cell that collapses. */
+.dwa-model-row-desc { flex: 0 0 auto; max-width: 45%; opacity: 0.75; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The trailing 14px is reserved for the fade mask: while the id fits, the
+   gradient only covers empty padding; once it overflows, its tail dissolves
+   instead of ending in a hard ellipsis. armModelIdMarquee reads the same
+   padding to scroll the full text under the pointer. */
+.dwa-model-row-value { flex: 0 1 auto; flex-shrink: 1000; box-sizing: border-box; min-width: 0; max-width: 45%; padding-right: 14px; opacity: 0.55; font-size: 10px; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); }
+.dwa-model-row-value-text { display: inline-block; white-space: nowrap; }
+.dwa-model-row:hover .dwa-model-row-value-text { animation: dwa-model-id-marquee var(--dwa-id-duration, 1.4s) ease-in-out 0.2s infinite alternate; }
+@keyframes dwa-model-id-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(var(--dwa-id-shift, 0px)); }
+}
 .dwa-model-row-remove { flex: none; opacity: 0.5; padding: 0 2px; }
 .dwa-model-row:hover .dwa-model-row-remove { opacity: 1; }
 .dwa-seg { display: inline-flex; border-radius: var(--ntr-radius-sm); border: 1px solid var(--dsw-alias-border-l2, #d1d5db); overflow: hidden; vertical-align: middle; }
@@ -190,7 +204,6 @@ const STYLE = `
   .dwa-page-header { flex-direction: column; }
   .dwa-page-actions { width: 100%; }
   .dwa-page-actions .dwa-btn { width: 100%; }
-  .dwa-model-transfer { grid-template-columns: 1fr; }
   .dwa-model-toolbar-actions { width: 100%; }
   .dwa-model-search { flex: 1 1 auto; width: auto; }
   .dwa-subsection-head, .dwa-preference-row { align-items: flex-start; flex-direction: column; }
@@ -198,6 +211,7 @@ const STYLE = `
 }
 @media (prefers-reduced-motion: reduce) {
   .dwa-root *, .dwa-root *::before, .dwa-root *::after { transition: none !important; }
+  .dwa-model-row:hover .dwa-model-row-value-text { animation: none !important; }
 }
 `
 
@@ -1535,6 +1549,23 @@ function RowMenu({
   )
 }
 
+/**
+ * Measure the id cell on row hover so its CSS marquee can reach the end of the
+ * text. The id is the only cell that yields width, and the panel is resizable,
+ * so the overflow is re-read on every entry rather than cached. The animation
+ * itself lives in CSS and only runs while the row is hovered; `title` on the
+ * row stays the fallback for reduced-motion users.
+ */
+function armModelIdMarquee(row: HTMLElement): void {
+  const view = row.querySelector<HTMLElement>('.dwa-model-row-value')
+  const text = view?.querySelector<HTMLElement>('.dwa-model-row-value-text')
+  if (view === null || view === undefined || text === null || text === undefined) return
+  const fade = Number.parseFloat(getComputedStyle(view).paddingRight) || 0
+  const shift = Math.max(0, text.offsetWidth - (view.clientWidth - fade))
+  row.style.setProperty('--dwa-id-shift', `${String(-shift)}px`)
+  row.style.setProperty('--dwa-id-duration', `${String(Math.min(4, Math.max(1.2, shift / 30)))}s`)
+}
+
 /**
  * Model / thought-level catalog display plus the native-selector visibility
  * filter, as a two-pane transfer list: every known model on the left, the
@@ -1597,6 +1628,11 @@ function ModelCatalogBlock({
   const modelChoices = result?.catalog.model?.choices ?? []
   /** Result of the last click on 「检测可用模型」 (what the refresh changed). */
   const [detectNote, setDetectNote] = useState<string | undefined>(undefined)
+  // Each list folds on its own so a long selection can be parked while the
+  // other pane keeps the full column. The list stays mounted (display-toggled)
+  // to keep its scroll position.
+  const [allCollapsed, setAllCollapsed] = useState(false)
+  const [selectedCollapsed, setSelectedCollapsed] = useState(false)
 
   // Display read, not a probe: the host answers from its persisted catalog
   // cache, so the panes already list the known models the first time the card
@@ -1846,7 +1882,7 @@ function ModelCatalogBlock({
         </div>
 
         <div className="dwa-model-transfer">
-          <div className="dwa-model-pane">
+          <div className={`dwa-model-pane${allCollapsed ? ' is-collapsed' : ''}`}>
             <div className="dwa-model-pane-head">
               <span>{acp.label('全部模型', 'All models')}</span>
               {result !== undefined && <span className="dwa-badge">{modelChoices.length}</span>}
@@ -1859,6 +1895,15 @@ function ModelCatalogBlock({
               >
                 {acp.label('全部加入', 'Add all')}
               </button>
+              <button
+                type="button"
+                className="dwa-caret-btn"
+                aria-expanded={!allCollapsed}
+                onClick={() => setAllCollapsed(value => !value)}
+                title={allCollapsed ? acp.label('展开全部模型', 'Expand all models') : acp.label('收起全部模型', 'Collapse all models')}
+              >
+                <span className="dwa-caret" aria-hidden>{allCollapsed ? '▸' : '▾'}</span>
+              </button>
             </div>
             <div className="dwa-model-list">
               {visibleChoices.map(choice => {
@@ -1876,6 +1921,7 @@ function ModelCatalogBlock({
                     className={`dwa-model-row${checked ? ' is-on' : ''}`}
                     title={title}
                     onClick={() => toggleChoice(choice.value)}
+                    onPointerEnter={event => { armModelIdMarquee(event.currentTarget) }}
                   >
                     <span className="dwa-model-row-mark">{checked ? '✓' : '+'}</span>
                     <span className="dwa-model-row-name">
@@ -1883,7 +1929,17 @@ function ModelCatalogBlock({
                       {choice.name}
                     </span>
                     {choice.value !== choice.name && (
-                      <span className="dwa-model-row-value">{choice.value}</span>
+                      <span className="dwa-model-row-value">
+                        <span className="dwa-model-row-value-text">{choice.value}</span>
+                      </span>
+                    )}
+                    {/* Credit / capability notes belong on the row itself: the
+                        list exists to compare models, and a hover-only price
+                        cannot be scanned. Grouped choices reuse the group label
+                        as their fallback description — that one is already
+                        printed before the name. */}
+                    {choice.description !== undefined && choice.description !== choice.group && (
+                      <span className="dwa-model-row-desc">{choice.description}</span>
                     )}
                   </button>
                 )
@@ -1892,7 +1948,7 @@ function ModelCatalogBlock({
             </div>
           </div>
 
-          <div className="dwa-model-pane">
+          <div className={`dwa-model-pane${selectedCollapsed ? ' is-collapsed' : ''}`}>
             <div className="dwa-model-pane-head">
               <span>{acp.label('已选模型', 'Selected models')}</span>
               <span className="dwa-badge dwa-badge-info">{basis.length}</span>
@@ -1904,6 +1960,15 @@ function ModelCatalogBlock({
               >
                 {acp.label('清空', 'Clear')}
               </button>
+              <button
+                type="button"
+                className="dwa-caret-btn"
+                aria-expanded={!selectedCollapsed}
+                onClick={() => setSelectedCollapsed(value => !value)}
+                title={selectedCollapsed ? acp.label('展开已选模型', 'Expand selected models') : acp.label('收起已选模型', 'Collapse selected models')}
+              >
+                <span className="dwa-caret" aria-hidden>{selectedCollapsed ? '▸' : '▾'}</span>
+              </button>
             </div>
             <div className="dwa-model-list">
               {selectedChoices.length === 0 && (
@@ -1918,13 +1983,19 @@ function ModelCatalogBlock({
                   className="dwa-model-row is-on"
                   title={choice.description === undefined ? choice.value : `${choice.value}\n${choice.description}`}
                   onClick={() => toggleChoice(choice.value)}
+                  onPointerEnter={event => { armModelIdMarquee(event.currentTarget) }}
                 >
                   <span className="dwa-model-row-name">
                     {choice.group !== undefined && <span style={{ opacity: 0.7 }}>{choice.group} · </span>}
                     {choice.name}
                   </span>
                   {choice.value !== choice.name && (
-                    <span className="dwa-model-row-value">{choice.value}</span>
+                    <span className="dwa-model-row-value">
+                      <span className="dwa-model-row-value-text">{choice.value}</span>
+                    </span>
+                  )}
+                  {choice.description !== undefined && choice.description !== choice.group && (
+                    <span className="dwa-model-row-desc">{choice.description}</span>
                   )}
                   <span className="dwa-model-row-remove" aria-hidden="true">×</span>
                 </button>