dsh-codinput 0.3.2 → 0.3.6

package/src/client/components/slotEntry.tsx

@@ -1,11 +1,12 @@
 /**
  * 槽位条目渲染的共享件：检视任意槽位的条目快照（检测即兼容）、按条目 locale
- * 绑定官方词典、以及条目崩溃兜底边界。语音输入（VoiceActivity）与模型名
- * 标签（ModelLabel）共用同一套合成公式，抽到这里避免两份漂移。
+ * 绑定官方词典、快照 store 的选择器钩子合成、条目崩溃兜底边界，以及宿主 kit
+ * 减去 owner props 的 standard 面（座位镜像 InputSlotSeat 与语音/模型标签
+ * 共用同一套合成公式，抽到这里避免多份漂移）。
  */
 
-import { useCallback, useSyncExternalStore, Component } from 'react';
-import type { SlotEntryLike } from '../host-types';
+import { createElement, useCallback, useSyncExternalStore, Component } from 'react';
+import type { HostObservable, SlotEntryLike } from '../host-types';
 import { bindForeign } from '../i18n';
 import { diagError } from '../diag';
 import { stash } from '../services';
@@ -41,15 +42,225 @@ export function useSlotEntries(key: string): readonly unknown[] {
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
+/**
+ * React 可作为元素类型使用的「组件包装」符号（memo / forwardRef / lazy）。
+ * 只认这三类，不做「任意 symbol `$$typeof`」放行——element / context / 伪造
+ * 对象都不是可渲染组件类型：放行后 React 会在为子元素创建 Fiber 时抛 #130，
+ * 而该错误发生在 EntryBoundary 自身的工作单元内（边界只捕获后代错误），会
+ * 冒泡到宿主的 SlotErrorBoundary 并废黜 conversation.composer.bar（接管整体
+ * 退回官方输入框）。收紧后这类坏条目回到静默跳过，与 v0.3.5 行为一致。
+ */
+const RENDERABLE_OBJECT_TYPES: readonly symbol[] = [
+  Symbol.for('react.memo'),
+  Symbol.for('react.forward_ref'),
+  Symbol.for('react.lazy'),
+];
+
+/** 组件位是否为 React 可渲染类型（函数组件 / memo / forwardRef / lazy 包装）。 */
+export function isRenderableComponent(value: unknown): boolean {
+  if (typeof value === 'function') return true;
+  if (value === null || typeof value !== 'object') return false;
+  const type = (value as { $$typeof?: unknown }).$$typeof;
+  return typeof type === 'symbol' && RENDERABLE_OBJECT_TYPES.includes(type);
+}
+
 /** single 槽位赢家 = entries 首个带组件的条目（register 即按优先级排序）。 */
 export function firstComponentEntry(entries: readonly unknown[]): SlotEntryLike | null {
   for (const candidate of entries) {
     const record = candidate as SlotEntryLike | null | undefined;
-    if (record && typeof record === 'object' && typeof record.component === 'function') return record;
+    if (record && typeof record === 'object' && isRenderableComponent(record.component)) return record;
   }
   return null;
 }
 
+/**
+ * 列表槽位行合成：复刻官方 renderer 的 list 分支——
+ * entries 已由 SlotCore 按（priority↑, order↑）排序，同 id 首个占位（去重），
+ * 剩余行再按 order 升序稳定排序（官方 `[...rows].sort(a.order - b.order)`）。
+ * 无组件的条目跳过（官方 deadCell 是废黜兜底，插件侧无法复现其内部状态）。
+ */
+export function listRows(entries: readonly unknown[]): SlotEntryLike[] {
+  const byId = new Map<unknown, SlotEntryLike>();
+  for (const candidate of entries) {
+    const record = candidate as (SlotEntryLike & { options?: { id?: unknown } }) | null | undefined;
+    if (!record || typeof record !== 'object' || !isRenderableComponent(record.component)) continue;
+    const id = (record as { options?: { id?: unknown } }).options?.id;
+    if (byId.has(id)) continue;
+    byId.set(id, record);
+  }
+  const rows = [...byId.values()];
+  rows.sort((a, b) => orderOf(a) - orderOf(b));
+  return rows;
+}
+
+function orderOf(entry: SlotEntryLike): number {
+  const options = (entry as { options?: { order?: number } }).options;
+  return options?.order ?? 0;
+}
+
+/** 条目 options.id（React key 用；官方 renderer 同轴）。 */
+export function entryId(entry: SlotEntryLike, index: number): string {
+  const options = (entry as { options?: { id?: string } }).options;
+  return options?.id ?? `#${index}`;
+}
+
+/**
+ * 座位「第三方遮蔽者」判据（单值座让位用）。
+ *
+ * 宿主的动态包守卫（dsh-cordis-client-runner 的 `guardedSlots`）对非 chain
+ * 槽位的 register 做两件事：① **强制**用页内遮蔽秩覆盖插件自报的 priority
+ * （`--nextPriority`，负数且唯一——插件写 priority:-1 也会被覆盖成分配值）；
+ * ② fiber 名取 `dyn/<pluginId>`，而条目 `registrant` = `options.registrant ??
+ * fiber.name`。出厂自带占用者（如 client-ui-model-selection 的 ModelSelect）
+ * 不经过该守卫：不带 priority（≡0），registrant 也没有 `dyn/` 前缀。
+ *
+ * 据此把「第三方遮蔽者」与「出厂占用者」分开：前者应当让位（镜像它），
+ * 后者继续由 Codinput 自绘控件代表（镜像出厂条目会与自绘控件重复）。
+ * 负 priority 是主判据（分配秩即遮蔽意图）；`dyn/` 前缀是兜底（防旧宿主/
+ * 未来守卫变化下 priority 未落进条目 options 的形态）。
+ */
+export function isShadowingOccupant(entry: SlotEntryLike): boolean {
+  const options = (entry as { options?: { priority?: number; registrant?: string } }).options;
+  const priority = options?.priority;
+  if (typeof priority === 'number' && priority < 0) return true;
+  const registrant = entry.registrant ?? options?.registrant;
+  return typeof registrant === 'string' && registrant.startsWith('dyn/');
+}
+
+/**
+ * 单条目渲染（座位镜像与单值座共用）：官方 SessionEntry → renderEntry 的
+ * props 展开式 `{...standard(kit), sessionId, ...entryInjectProps, ...t,
+ * ...ownerProps}`——owner props 最后展开（如模型座的 `locked` 不被 kit 覆盖）。
+ * 逐条目 EntryBoundary 隔离：单个条目崩溃只丢本座位。
+ */
+export function renderSlotEntry(
+  entry: SlotEntryLike,
+  key: string,
+  options: {
+    sessionId: string;
+    standard: Record<string, unknown> | undefined;
+    /** 官方 renderSlot 第二参数的 owner props（如模型座 { locked }）。 */
+    ownerProps?: Record<string, unknown> | undefined;
+    /** 条目崩溃时的兜底渲染（单值座让位用：回退自绘控件；缺省 null）。 */
+    fallback?: React.ReactNode;
+  },
+): JSX.Element {
+  const { sessionId, standard, ownerProps, fallback } = options;
+  const Comp = entry.component as React.ComponentType<Record<string, unknown>>;
+  // 条目词典的 t（官方 localeSeat 同款）；无 locale 或绑定失败 → 不下发，
+  // 组件按各自回退（如 enhancer 回退内置中文词典）。
+  let t: unknown;
+  try {
+    t = translatorFor(entry) ?? undefined;
+  } catch {
+    t = undefined;
+  }
+  let injected: Record<string, unknown> | null = null;
+  try {
+    injected = entryInjectProps(entry, sessionId);
+  } catch (error) {
+    diagError('slot.seat.inject', error);
+  }
+  return createElement(
+    EntryBoundary,
+    { key, fallback },
+    createElement(Comp, {
+      ...(standard ?? {}),
+      sessionId,
+      ...(injected ?? {}),
+      ...(t !== undefined ? { t } : {}),
+      ...(ownerProps ?? {}),
+    }),
+  );
+}
+
+export type SnapshotSelectorHook = <S>(sel: (s: any) => S, eq?: (a: S, b: S) => boolean) => S;
+
+/** 快照 store → use<Name> 选择器钩子（官方 observableHook 同款，按源缓存）。 */
+const snapshotHookCache = new WeakMap<object, SnapshotSelectorHook>();
+export function snapshotHookFor(source: unknown): SnapshotSelectorHook | null {
+  const face = source as HostObservable<unknown> | undefined;
+  if (!face || typeof face.subscribe !== 'function' || typeof face.getSnapshot !== 'function') return null;
+  let hook = snapshotHookCache.get(face);
+  if (!hook) {
+    hook = <S,>(sel: (s: unknown) => S): S =>
+      useSyncExternalStore(
+        (fn: () => void) => face.subscribe(fn) ?? (() => {}),
+        () => sel(face.getSnapshot()),
+        () => sel(face.getSnapshot()),
+      );
+    snapshotHookCache.set(face, hook);
+  }
+  return hook;
+}
+
+/** 官方 standardHookPropName：name → use<Name>（首字母大写）。 */
+export function standardHookPropName(name: string): string {
+  if (!name) return name;
+  return `use${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+}
+
+/**
+ * 条目自带 inject 的 props 面（官方 runInject + bindInjectSources 的插件侧
+ * 复刻）：以 sessionId 调 inject，把 hooks 子表折成 use<Name> 钩子、其余
+ * 原样下传；keyedHooks 需要官方 keyed resolver 面，插件侧不可复现 → 跳过
+ * （现网条目无键控钩子）。结果按（条目 × 会话）缓存——官方同款缓存轴。
+ *
+ * 为什么额外记「失败」：官方 renderer 是在**宿主自己的 fiber 上下文里**调
+ * 这个 inject 闭包；插件侧从自己的 fiber 调会丢掉条目所属插件的 ctx 绑定，
+ * 于是依赖宿主服务面的 inject 会抛 `cannot get property "remote.session"
+ * without inject`（实测 dsh-model-accordion 0.2.1 的 `directoryFor`）。这是
+ * 插件侧不可复现的边界——单值座镜像据此让位降级（回退自绘控件），而不是把
+ * 空 props 下发给一个必然崩溃的组件。
+ */
+interface InjectBound {
+  props: Record<string, unknown> | null;
+  failed: boolean;
+}
+const entryInjectCache = new WeakMap<object, Map<string, InjectBound>>();
+
+function boundInject(entry: SlotEntryLike, sessionId: string): InjectBound {
+  let perSession = entryInjectCache.get(entry);
+  if (!perSession) {
+    perSession = new Map();
+    entryInjectCache.set(entry, perSession);
+  }
+  const cached = perSession.get(sessionId);
+  if (cached) return cached;
+  let bound: InjectBound = { props: null, failed: false };
+  try {
+    const face = entry.inject?.(sessionId);
+    if (face && typeof face === 'object') {
+      const { hooks: _hooks, keyedHooks: _keyed, ...rest } = face as Record<string, unknown> & {
+        hooks?: Record<string, unknown>;
+        keyedHooks?: Record<string, unknown>;
+      };
+      void _keyed;
+      for (const [name, source] of Object.entries(_hooks ?? {})) {
+        const hook = snapshotHookFor(source);
+        if (hook) rest[standardHookPropName(name)] = hook;
+      }
+      bound = { props: rest, failed: false };
+    }
+  } catch (error) {
+    diagError('slot.inject', error);
+    bound = { props: null, failed: true };
+  }
+  perSession.set(sessionId, bound);
+  return bound;
+}
+
+export function entryInjectProps(entry: SlotEntryLike, sessionId: string): Record<string, unknown> | null {
+  if (typeof entry.inject !== 'function') return null;
+  return boundInject(entry, sessionId).props;
+}
+
+/** 该条目 inject 是否抛错（宿主 ctx 绑定面缺失的判据，见上）。 */
+export function entryInjectFailed(entry: SlotEntryLike, sessionId: string): boolean {
+  if (typeof entry.inject !== 'function') return false;
+  return boundInject(entry, sessionId).failed;
+}
+
 /** 官方 renderer 的 locale 座位：locale.bind(entry.locale)，按 ns 缓存。 */
 export function translatorFor(entry: SlotEntryLike, fallbackNs?: string): Translator | null {
   const ns = entry.locale ?? fallbackNs;
@@ -73,3 +284,36 @@ export class EntryBoundary extends Component<
     return this.state.failed ? this.props.fallback ?? null : this.props.children;
   }
 }
+
+/**
+ * 宿主 kit 减去 owner props 的原样面：供槽位条目按官方契约消费
+ * （sessionId + 选择器 hook + inputActions 等）。bar 条目的 kit 里 owner
+ * 专属字段（variant/blocked/disabled/placeholder/…）不该下发给子槽位条目；
+ * 侧栏 body 再额外剔除注入的 useTabInfo。
+ */
+export function kitFromBarProps(
+  props: Record<string, unknown>,
+  extraOmit: readonly string[] = [],
+): Record<string, unknown> {
+  const {
+    variant: _variant,
+    blocked: _blocked,
+    disabled: _disabled,
+    placeholder: _placeholder,
+    workspacePickerOpen: _workspacePickerOpen,
+    onRequestWorkspace: _onRequestWorkspace,
+    accessory: _accessory,
+    hero: _hero,
+    ...kit
+  } = props;
+  void _variant;
+  void _blocked;
+  void _disabled;
+  void _placeholder;
+  void _workspacePickerOpen;
+  void _onRequestWorkspace;
+  void _accessory;
+  void _hero;
+  for (const key of extraOmit) delete kit[key];
+  return kit;
+}

package/src/client/host-types.ts

@@ -61,7 +61,15 @@ export interface SlotEntryLike {
   readonly inject?: (...args: unknown[]) => Record<string, unknown>;
   /** 条目词典命名空间（locale.bind(ns) 即官方传给组件的 t）。 */
   readonly locale?: string;
+  /** 归属（options.registrant ?? fiber.name；动态包为 dyn/<pluginId>）。 */
   readonly registrant?: string;
+  /** 注册选项切面：priority 负数 = 动态包被守卫分配的页内遮蔽秩（见 slotEntry）。 */
+  readonly options?: {
+    readonly id?: string;
+    readonly order?: number;
+    readonly priority?: number;
+    readonly registrant?: string;
+  };
 }
 
 // ---------- input machine ----------

package/src/client/sidebar.tsx

@@ -21,6 +21,7 @@ import { claimSidebarInput, subscribeSidebarTabClose, useSidebarCarryOwner, type
 import { loadPrefs, savePrefs, subscribePrefs } from './prefs';
 import { diagError, diagWindow } from './diag';
 import { CodinputSurface } from './components/CodinputSurface';
+import { kitFromBarProps } from './components/slotEntry';
 import { IconBrandLogo } from './icons';
 import { t, useT } from './i18n';
 
@@ -98,6 +99,9 @@ export function SidebarCodinputTitle(props: { useTabInfo?: () => SidebarTabInfo
 export function SidebarCodinputBody(props: SessionStandard & { useTabInfo?: () => SidebarTabInfo }): JSX.Element {
   const { sessionId, useInput, inputActions, useProjection, useSession, useTabInfo } = props;
   const state = useInput((s) => s);
+  // conversation.input.left/.right 第三方条目的 standard props 原样面（本条目
+  // kit 减去注入的 useTabInfo；见 components/InputSlotSeat）。
+  const inputStandard = kitFromBarProps(props as unknown as Record<string, unknown>, ['useTabInfo']);
   // 会话运行中：侧栏形态的主按钮同样变停止（官方同款）。
   const running = useSession ? useSession((s: unknown) => (s as { running?: boolean } | undefined)?.running) === true : false;
   useT();
@@ -198,6 +202,7 @@ export function SidebarCodinputBody(props: SessionStandard & { useTabInfo?: () =
         state={state}
         actions={inputActions}
         useProjection={useProjection}
+        inputStandard={inputStandard}
         running={running}
         side={true}
       />

package/src/client/styles.ts

@@ -3,6 +3,9 @@
  * 工具行/菜单/发送按钮的属性值逐条复刻官方 InputBar.module.css 与
  * PermissionSelect/ModelSelection 的触发器与菜单（含 --dsw-* 主题变量，
  * 随宿主主题自动切换）；编辑器/设置等自有部分用 currentColor 适配。
+ * 主题/皮肤插件兼容约定：官方走 --dsw-* token 的取值这里也走 token（皮肤
+ * 改 token 即全盘跟随）；官方写死的（发送钮前景 #fff、小圈 tools 紫）同样
+ * 写死保持逐值对齐——多跟一分就会在换肤下与官方脱队。
  */
 
 const STYLE_ID = 'dsh-codinput-styles';
@@ -77,7 +80,8 @@ const CSS = `
 .dci-preview blockquote { margin: 0.5em 0; padding: 0.1em 0.9em; border-left: 3px solid color-mix(in srgb, currentColor 22%, transparent); opacity: 0.85; }
 .dci-preview table { border-collapse: collapse; margin: 0.6em 0; }
 .dci-preview th, .dci-preview td { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding: 4px 9px; }
-.dci-preview a { color: #4c8dff; } .dci-preview img { max-width: 100%; } .dci-preview hr { border: none;
+/* 预览链接走官方 markdown 同款 alias-link token（官方 _markdown_ a 逐值核对）。 */
+.dci-preview a { color: var(--dsw-alias-link, #4c8dff); } .dci-preview img { max-width: 100%; } .dci-preview hr { border: none;
   border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
 
 /* ===== 工具行（官方 InputBar .row / .tools / .trailing）===== */
@@ -126,14 +130,19 @@ const CSS = `
 .dci-send:hover:not(:disabled) { background: var(--dsw-alias-button-info-hover, color-mix(in srgb, currentColor 70%, transparent)); }
 .dci-send:disabled { opacity: 0.4; cursor: default; }
 
-/* ===== 菜单（官方 primitives Menu：r20 卡片 / item r10 / side-top 弹出）===== */
+/* ===== 菜单（官方 primitives Menu / ModelSelect .menu 逐值复刻：r20 卡片 / item r10 / 上方弹出）
+   卡片 overflow:hidden + max-height:min(360px,100vh-96px)（官方 .menu 同款），
+   列表在 .dci-viewport 内滚；--dsh-scrollbar-thumb(l2) 由卡片注入（官方同款），
+   宿主全局 ::-webkit-scrollbar-thumb{background:var(--dsh-scrollbar-thumb)} 据此出条。 ===== */
 .dci-menu { position: fixed; z-index: 1100; box-sizing: border-box; padding: 4px; display: flex; flex-direction: column;
-  min-width: 218px; max-width: min(360px, 100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto;
+  min-width: 218px; max-width: min(360px, 100vw - 24px); max-height: min(360px, calc(100vh - 96px)); overflow: hidden;
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2, color-mix(in srgb, currentColor 18%, transparent));
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2, color-mix(in srgb, currentColor 26%, transparent));
   background: var(--dsw-menu-surface-fill, var(--dsw-specific-menu, rgba(28, 28, 32, 0.98)));
   backdrop-filter: var(--dsw-menu-backdrop-filter, none); color: var(--dsw-alias-label-primary, #ececf1);
   --dsw-elevation-stroke-color: var(--dsw-alias-border-l1, transparent);
   box-shadow: var(--dsw-elevation-prominent, 0 10px 34px rgba(0, 0, 0, 0.35)); border: 0; border-radius: var(--dsw-radius-lg, 20px); font-size: 13px; }
-.dci-viewport { display: flex; flex-direction: column; min-height: 0; }
+.dci-viewport { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
 .dci-menuLabel { padding: 8px 10px; font-size: 12px; line-height: 16px; color: var(--dsw-alias-label-tertiary, currentColor);
   user-select: none; text-align: left; }
 .dci-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: none;
@@ -210,7 +219,7 @@ const CSS = `
 .dci-search { width: calc(100% - 8px); margin: 2px 4px 4px; padding: 5px 9px; font-size: 13px;
   border-radius: 8px; border: 1px solid var(--dsw-alias-border-l2, color-mix(in srgb, currentColor 18%, transparent));
   background: transparent; color: inherit; outline: none; }
-.dci-error { padding: 6px 10px; color: var(--dsw-alias-state-error-primary, #ff6b6b); font-size: 12px; }
+.dci-error { padding: 6px 10px; color: var(--dsw-alias-state-error-primary, #d54941); font-size: 12px; }
 
 /* ===== 模型/推理等级 cell 行（官方 ModelSelection .cell）===== */
 .dci-cell { box-sizing: border-box; width: auto; min-width: 100%; height: 40px; color: var(--dsw-alias-label-primary, inherit);
@@ -225,7 +234,7 @@ const CSS = `
 /* ===== 完全权限确认（官方 RiskConfirmation 语义）===== */
 .dci-confirm-warning { display: flex; align-items: flex-start; gap: 10px; color: var(--dsw-alias-label-secondary, currentColor);
   font-size: 14px; line-height: 22px; padding: 6px 8px 0; }
-.dci-confirm-warning svg { flex: none; margin-top: 2px; color: var(--dsw-alias-state-error-primary, #ff6b6b); }
+.dci-confirm-warning svg { flex: none; margin-top: 2px; color: var(--dsw-alias-state-error-primary, #d54941); }
 .dci-confirm-warning p { margin: 0; }
 .dci-confirm-ack { display: flex; align-items: flex-start; gap: 10px; margin: 14px 8px 0; cursor: pointer;
   color: var(--dsw-alias-label-primary, inherit); font-size: 14px; line-height: 22px; }
@@ -237,7 +246,7 @@ const CSS = `
 .dci-btn { border: 1px solid var(--dsw-alias-border-l2, color-mix(in srgb, currentColor 22%, transparent)); border-radius: 10px;
   background: transparent; color: inherit; padding: 6px 14px; cursor: pointer; font-size: 14px; line-height: 20px; }
 .dci-btn[data-primary="true"] { background: var(--dsw-alias-button-primary-fill, color-mix(in srgb, currentColor 85%, transparent));
-  color: #fff; border-color: transparent; }
+  color: var(--dsw-alias-label-primary-foreground, #fff); border-color: transparent; }
 .dci-btn:disabled { opacity: 0.4; cursor: default; }
 
 /* ===== 草稿附件轨（官方 ComposerAttachments/AttachmentRail/FileCard 逐值复刻）=====
@@ -513,7 +522,7 @@ button.dci-attach-body { color: inherit; font: inherit; text-align: left; backgr
 .dci-confirm-warning { display: flex; align-items: flex-start; gap: 10px; color: var(--dsw-alias-label-secondary, inherit);
   font-size: 14px; line-height: 22px; }
 .dci-confirm-warning p { margin: 0; }
-.dci-confirm-warningIcon { flex: none; margin-top: 2px; color: var(--dsw-alias-state-error-primary, #e5484d); }
+.dci-confirm-warningIcon { flex: none; margin-top: 2px; color: var(--dsw-alias-state-error-primary, #d54941); }
 .dci-confirm-ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; cursor: pointer;
   color: var(--dsw-alias-label-primary, inherit); font-size: 14px; line-height: 22px; }
 .dci-confirm-ack input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; cursor: pointer;