@morlay/dsh-session-mode 0.0.1-alpha.4

package/src/client/SessionModeSeat.tsx

@@ -0,0 +1,109 @@
+/**
+ * 新会话屏幕上的模式 chip：**切换列表**就在这里（点开是 coding / chat 两项）。
+ *
+ * 为什么住在新会话屏幕而不是输入框上方：选择只在会话开始**之前**有效——一旦跑过 turn，那段历史是在某个
+ * 模式的工具与提示词下产生的，host 会拒绝换（与上游 `agentPresets.select` 同一条判据）。一个大半辈子都
+ * 该禁用的控件，放在它仍然可用的那块屏幕上更诚实。
+ */
+
+import { useState } from "react";
+import {
+  IconAgentPresetOutlineRegular,
+  IconChevronDownOutlineRegular,
+  Menu,
+} from "@deepseek-ai/dsh-client-ui-primitives";
+import type { PropsLocale, PropsRuntime } from "@deepseek-ai/dsh-client-ui-slots";
+// Type-only：拉入本包 host 半的 Context / 投影声明（`sessionMode`），让 `projectionValues` 有类型。
+import type {} from "../index.ts";
+// Type-only：拉入 ui-conversation 的 SlotMap 合并（hero 的座位）。
+import type {} from "@morlay/dsh-client-ui-conversation/client";
+import { selectMode } from "./api.ts";
+import { useRoster } from "./use-roster.ts";
+import css from "./SessionModeSeat.module.css";
+
+/** 完整 props：hero 槽位的运行时 props + 本包的字典。 */
+export type SessionModeSeatProps = PropsRuntime<"conversation.hero.agentPreset"> &
+  PropsLocale<"session-mode">;
+
+/**
+ * 渲染新会话的模式 chip。
+ * @param props - 槽位合成的 props。
+ * @returns chip；清单没读到、或不是主视图的会话时返回 null。
+ */
+export function SessionModeSeat({
+  sessionId,
+  useSessions,
+  useSessionRetainInfo,
+  t,
+}: SessionModeSeatProps) {
+  const roster = useRoster();
+  const selected = useSessions((state) => {
+    const value =
+      sessionId === undefined ? undefined : state.byId[sessionId]?.projectionValues?.sessionMode;
+    return typeof value === "string" ? value : undefined;
+  });
+  const main = useSessionRetainInfo(
+    (info) => sessionId === undefined || (info?.retainedBy.mainView ?? 0) > 0,
+  );
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!main || roster === undefined) return null;
+
+  const current = selected ?? roster.default;
+  const chosen = roster.modes.find((mode) => mode.id === current);
+  const label = chosen?.name ?? current;
+
+  return (
+    <Menu
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      items={roster.modes.map((mode) => ({
+        id: mode.id,
+        label: (
+          <span className={css.item}>
+            <span className={css.itemName}>{mode.name}</span>
+            <span className={css.itemDesc}>{mode.description ?? t("noDescription")}</span>
+          </span>
+        ),
+      }))}
+      selectedId={current}
+      onSelect={(id) => {
+        setOpen(false);
+        if (sessionId === undefined || id === current) return;
+        setBusy(true);
+        setError(null);
+        void selectMode(sessionId, id)
+          .catch((cause: unknown) => {
+            setError(cause instanceof Error ? cause.message : String(cause));
+          })
+          .finally(() => {
+            setBusy(false);
+          });
+      }}
+      align="start"
+      portal
+      className={css.menuAnchor}
+      anchor={
+        <button
+          type="button"
+          className={css.seat}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          title={error ?? t("seatHint")}
+          disabled={busy}
+          onClick={() => {
+            setOpen((value) => !value);
+          }}
+        >
+          <IconAgentPresetOutlineRegular className={css.seatIcon} />
+          <span className={css.seatLabel}>{label}</span>
+          <IconChevronDownOutlineRegular className={css.chevron} />
+        </button>
+      }
+    />
+  );
+}

package/src/client/api.ts

@@ -0,0 +1,45 @@
+/**
+ * client 半与 host 的**唯一**通路：模式清单（`GET`）与切换（`POST`）。
+ *
+ * 当前模式不走这里——它是一条会话投影（`sessionMode`），随会话列表一起到页面，组件用 `useSessions`
+ * 读它。于是这里只剩两件事：拉清单、发一次切换。
+ */
+
+import {
+  SESSION_MODE_PATH,
+  type SessionModeRoster,
+  type SessionModeSelectResult,
+} from "../shared.ts";
+
+/** 读一次模式清单；清单在页面生命周期里是静态的（装配事实），调用方自己缓存。 */
+export async function fetchRoster(): Promise<SessionModeRoster> {
+  const response = await fetch(SESSION_MODE_PATH, {
+    method: "GET",
+    headers: { accept: "application/json" },
+  });
+  if (!response.ok) throw new Error(`HTTP ${String(response.status)}`);
+  return (await response.json()) as SessionModeRoster;
+}
+
+/**
+ * 把某个空白会话切到某个模式。
+ * @param sessionId - 目标会话。
+ * @param mode - 目标模式 id。
+ * @returns 提交后的模式 id。
+ * @throws 会话已开始、模式不存在、会话不存在——host 给的中文原因。
+ */
+export async function selectMode(sessionId: string, mode: string): Promise<string> {
+  const response = await fetch(SESSION_MODE_PATH, {
+    method: "POST",
+    headers: { accept: "application/json", "content-type": "application/json" },
+    body: JSON.stringify({ sessionId, mode }),
+  });
+  const value = (await response.json().catch(() => undefined)) as
+    | (Partial<SessionModeSelectResult> & { error?: unknown })
+    | undefined;
+  if (!response.ok) {
+    const error = value?.["error"];
+    throw new Error(typeof error === "string" ? error : `HTTP ${String(response.status)}`);
+  }
+  return value?.mode ?? mode;
+}

package/src/client/index.ts

@@ -0,0 +1,142 @@
+/**
+ * client 半：会话里的两个面（模式 chip 与头部标签）+ 设置页里那张「会话模式」卡片。
+ *
+ * | 槽位                                     | 呈现                                          |
+ * | ---------------------------------------- | --------------------------------------------- |
+ * | `conversation.hero.agentPreset`          | 新会话屏幕的顶部占位——chip 点开就是切换列表   |
+ * | `conversation.session.header.actions`    | 会话头部的只读模式标签（`order: -10`，贴标题） |
+ * | `plugins.row.config`（key 见下）         | 设置页里**本行**的配置入口：各模式的默认模型（`config.models`） |
+ *
+ * 官方的 `@deepseek-ai/dsh-client-ui-agent-preset` 在装配里被禁用（它同时带来设置页那块 roster 面板），
+ * 所以这两个面归我们。设置页那张卡片编辑的是**各模式的默认模型**——配置事实（`config.models`），不是模式
+ * 清单；模式清单仍然是装配配置，改它不需要页面。
+ *
+ * 卡片的数据面是 host 行的 settings namespace `session-mode`（namespace 名就是行 id）：host 行被描述出来
+ * 之后（`configForms.whileServed`）条目才注册，行不在时条目也一起消失。注册到 `plugins.row.config` 而不是
+ * 官方分组 `plugins.item`：后者按上游契约由官方那几张设置卡占用（一个 host 命名空间一个伴生包），行自己的
+ * 配置就该挂在自己的行上——key 由 `SESSION_MODE_ROW_CONFIG_KEY` 给出。
+ */
+
+import type { Context } from "@deepseek-ai/cordis";
+import type {} from "@deepseek-ai/dsh-api-remotes/client";
+import type {} from "@deepseek-ai/dsh-client-locale/client";
+import type {} from "@deepseek-ai/dsh-client-ui-plugin-manager/client";
+import type {} from "@deepseek-ai/dsh-client-ui-settings/client";
+import type {} from "@deepseek-ai/dsh-client-ui-slots";
+// Type-only：槽位声明与 standard props（session / session-maybe / global）。
+import type {} from "@morlay/dsh-client-ui-conversation/client";
+import { ModelDefaultsCard } from "./ModelDefaultsCard.tsx";
+import { SESSION_MODE_NS, ModelDefaultsCardController } from "./model-defaults-card-controller.ts";
+import { SessionModeLabel } from "./SessionModeLabel.tsx";
+import { SessionModeSeat } from "./SessionModeSeat.tsx";
+import { fetchRoster } from "./api.ts";
+import { en, zh, type SessionModeLocaleKey } from "./locales.ts";
+
+declare module "@deepseek-ai/dsh-client-ui-slots" {
+  interface LocaleNamespaceMap {
+    /** 模式选择面与设置卡片的文案。 */
+    "session-mode": SessionModeLocaleKey;
+  }
+}
+
+/** 浏览器半插件的字典命名空间。 */
+const NS = "session-mode";
+
+/**
+ * 本行的配置入口 key：`<bundle 包名>#<行 id>`。
+ *
+ * 页面侧由 `ui-plugin-manager` 的 `rowConfigKey(bundle, rowId)` 生成同一个串——bundle 是本包
+ * （`dsh.profile.bundles` 里那一项），行 id 是本包 patch 里插的 `session-mode`。
+ */
+export const SESSION_MODE_ROW_CONFIG_KEY = "@morlay/dsh-session-mode#session-mode";
+
+export type { ModelDefaultsCardProps } from "./ModelDefaultsCard.tsx";
+export type {
+  ModelDefaultsCardFace,
+  ModelDefaultsCardState,
+  ModelDefaultsRow,
+  ModelDirectory,
+  ModelDefaultsSources,
+  SessionModeSettings,
+} from "./model-defaults-card-controller.ts";
+export { ModelDefaultsCardController, SESSION_MODE_NS } from "./model-defaults-card-controller.ts";
+export type { SessionModeLabelProps } from "./SessionModeLabel.tsx";
+export type { SessionModeSeatProps } from "./SessionModeSeat.tsx";
+export type { SessionModeLocaleKey } from "./locales.ts";
+
+/** 需要的服务：槽位与字典（会话列表经槽位的标准 props 到达组件，不必自己 inject）。 */
+export const inject = ["slots", "locale"];
+
+/**
+ * 装上三个面。
+ * @param ctx - 浏览器插件上下文。
+ */
+export function apply(ctx: Context): void {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), "session-mode: dictionaries");
+
+  // 会话里的两个面都要求会话流的上下文（hero 的座位与头部动作行挂在 conversation 上）。
+  ctx.inject(["slots", "conversation"], (scope) => {
+    scope.effect(() => {
+      const seat = scope.slots.register(
+        { name: "conversation.hero.agentPreset", locale: NS },
+        SessionModeSeat,
+      );
+      const label = scope.slots.register(
+        {
+          name: "conversation.session.header.actions",
+          id: "session-mode",
+          // 静态会话上下文占头部前导的负序位（与官方那一行同位）。
+          order: -10,
+          locale: NS,
+        },
+        SessionModeLabel,
+      );
+      return () => {
+        seat();
+        label();
+      };
+    }, "session-mode: hero chip and header label");
+  });
+
+  // 设置页那张卡片要 `configForms`（共享配置表单）、`remote.session`（模型目录）与 `plugins.item`
+  // （Plugins 页的槽）。它们都可能比本行晚到、或在这个部署里根本没有，所以走 `ctx.inject` 与
+  // `slots.inject` 等它们就位——本行的基础 `inject` 不点它们，缺了也不影响上面两个面。
+  ctx.inject(["slots", "locale", "configForms", "remote", "remote.session"], (forms) => {
+    const t = forms.locale.bind(NS);
+    forms.effect(() => {
+      const controller = new ModelDefaultsCardController(
+        forms.configForms.get(SESSION_MODE_NS),
+        {
+          roster: fetchRoster,
+          // 目录只在打开卡片时读一次：它决定选择器的选项，页面生命周期里不会变。
+          directory: async () => {
+            const response = await forms.remote.session.modelCatalog();
+            if (!response.ok) throw new Error("model catalog is unavailable");
+            return {
+              groups: response.value.groups,
+              failures: response.value.failures.map((failure) => failure.name),
+            };
+          },
+        },
+      );
+      const face = controller.inject();
+      const page = forms.configForms.whileServed([SESSION_MODE_NS], () =>
+        forms.slots.inject("plugins.row.config", () =>
+          forms.slots.register(
+            {
+              name: "plugins.row.config",
+              key: SESSION_MODE_ROW_CONFIG_KEY,
+              // 文案经我们自己的注入面传：keyed 槽的注册项不带 `locale` 声明，不赌页面一定注入字典。
+              inject: () => ({ ...face, t }),
+            },
+            ModelDefaultsCard,
+          ),
+        ),
+      );
+      return () => {
+        page();
+        controller.dispose();
+      };
+    }, "session-mode: settings card");
+  });
+}

package/src/client/locales.ts

@@ -0,0 +1,88 @@
+/**
+ * client 半的文案：命名空间 `session-mode`（与 locale 注册时用的 key 一致）。
+ *
+ * 两个面共用这一份字典：会话里的两个槽位（模式 chip 与头部标签）与设置页那张卡片。模式的名字与说明由
+ * host 的清单给（那是数据，不是文案）。
+ */
+
+import type { SettingsFormLabels } from "@morlay/dsh-client-ui-primitives/client";
+
+export const zh = {
+  seatHint: "选择这个会话的模式",
+  headerHint: "这个会话运行的模式",
+  noDescription: "（无说明）",
+  switchRefused: "切换失败：{reason}",
+  loadFailed: "读不到模式清单",
+  cardTitle: "会话模式",
+  cardDescription: "给每个会话模式指定默认模型；不指定就跟全局默认模型。",
+  defaultsTitle: "各模式的默认模型",
+  defaultsHint:
+    "只在会话还没有模型事实（没选过模型、也还没跑过请求）时生效；留空就是跟全局默认模型。改完按下面的保存写进设置。",
+  providerLabel: "服务商",
+  modelLabel: "模型",
+  effortLabel: "思考档位",
+  inheritOption: "跟全局默认",
+  chooseModel: "选择模型…",
+  effortDefaultOption: "跟模型默认",
+  staleOption: "{value}（不在目录里）",
+  overridden: "已覆盖",
+  reset: "恢复默认",
+  modelRequired: "还没选模型",
+  readOnly: "本部署的设置为只读。",
+  unavailable: "本插件当前未加载，暂时无法配置。",
+  save: "保存",
+  saving: "保存中…",
+  saveFailed: "本部署没有接受这些值，已保留供你修改。",
+  rosterFailed: "读不到会话模式清单，暂时列不出模式。",
+  directoryFailed: "读不到模型目录，暂时只能看当前值或恢复默认。",
+  directoryPartial: "这些服务商的目录没读到：{names}",
+};
+
+export const en: Record<keyof typeof zh, string> = {
+  seatHint: "Pick the mode for this session",
+  headerHint: "The mode this session runs",
+  noDescription: "(no description)",
+  switchRefused: "Switch refused: {reason}",
+  loadFailed: "Could not load the mode roster",
+  cardTitle: "Session mode",
+  cardDescription: "Set the default model of each session mode; unset follows the global default.",
+  defaultsTitle: "Default model per mode",
+  defaultsHint:
+    "Applies only while a session has no model fact yet (no model picked, no request made); unset follows the global default model. Save writes it into the settings document.",
+  providerLabel: "Provider",
+  modelLabel: "Model",
+  effortLabel: "Reasoning effort",
+  inheritOption: "Same as global default",
+  chooseModel: "Choose a model…",
+  effortDefaultOption: "Model default",
+  staleOption: "{value} (not in the directory)",
+  overridden: "Overridden",
+  reset: "Reset to default",
+  modelRequired: "No model picked yet",
+  readOnly: "This deployment stores settings read-only.",
+  unavailable: "This plugin is not loaded, so it cannot be configured right now.",
+  save: "Save",
+  saving: "Saving…",
+  saveFailed: "The deployment did not accept these values; they were left for you to correct.",
+  rosterFailed: "Could not load the session mode roster, so no mode can be listed.",
+  directoryFailed:
+    "Could not read the model directory, so only the current value or a reset is available.",
+  directoryPartial: "These providers could not be read: {names}",
+};
+
+export type SessionModeLocaleKey = keyof typeof zh;
+
+/**
+ * 共享设置表单外框的文案，从本页字典里读。
+ * @param t - 本页的字典读取器。
+ * @returns `SettingsForm` 渲染用的标签。
+ */
+export function formLabels(t: (key: SessionModeLocaleKey) => string): SettingsFormLabels {
+  return {
+    unavailable: t("unavailable"),
+    readOnly: t("readOnly"),
+    saveFailed: t("saveFailed"),
+    save: t("save"),
+    saving: t("saving"),
+  };
+}