@morlay/dsh-session-mode 0.0.15 → 0.0.16

package/src/client/BundleConfigPage.tsx

@@ -1,631 +0,0 @@
-// bundle 配置页：装这个 bundle 的那一行（`session-mode`）的完整配置——新会话的默认模式 + 每个模式一张可折叠卡片。
-//
-// 注册进 `plugins.bundle.config`（key = bundle 包名），读写的命名空间是 `session-mode`。草稿、整段校验与保存都归通用
-// schema 表单的控制器（`bundle-config.ts` 的注入面），本文件只管布局与装配：**控件一律从
-// `@morlay/dsh-client-ui-primitives/client` 取**（它转出官方那套基础组件，并给出这套设置面自有的控件——
-// 字段行 `SettingsFieldRow`、可搜索选择器 `SearchSelect`、标签输入 `TagInput`、多行文本 `MultilineField`、图标按钮
-// `IconButton`），这一页自己的样式只剩结构布局。改动一律先落草稿，底部保存是唯一写盘点。
-
-import { useEffect, useId, useMemo, useState, type ReactNode } from "react";
-import {
-  Button,
-  DisclosureRow,
-  IconAgentPresetOutlineRegular,
-  IconButton,
-  IconPlusOutlineRegular,
-  IconTrashOutlineRegular,
-  Input,
-  Modal,
-  ModelRouteList,
-  MultilineField,
-  Row,
-  SegmentedControl,
-  SearchSelect,
-  SettingsFieldRow,
-  SettingsForm,
-  Stack,
-  Switch,
-  TagInput,
-  Text,
-  type SettingsFormLabels,
-} from "@morlay/dsh-client-ui-primitives";
-import type { InjectFace, PropsLocale, PropsRuntime } from "@deepseek-ai/dsh-client-ui-slots";
-import type { SchemaFormState } from "@morlay/dsh-client-ui-primitives";
-import {
-  SESSION_MODE_NS,
-  projectBundleConfig,
-  ROLES,
-  type BundleConfigActions,
-  type BundleConfigFace,
-  type ConfigStatus,
-  type BundleFieldView,
-  type BundleModeView,
-  type BundleModelsState,
-  type BundleTranslate,
-} from "./bundle-config.ts";
-import { routeKey } from "./llm-directory.ts";
-
-export type BundleConfigPageProps = PropsRuntime<"plugins.bundle.config"> &
-  PropsLocale<"session-mode-bundle"> &
-  InjectFace<BundleConfigFace>;
-
-// tri 控件的三个档：`unset` 是"配置里没写这个键"（按工具名单推导），另两档是显式开关值。
-type TriValue = "unset" | "on" | "off";
-
-export function BundleConfigPage(props: BundleConfigPageProps): ReactNode {
-  const { t, view } = props;
-  // 子组件只收动作面：读数走框架绑好的 `useBundleConfig`，动作是同一份注入面里的函数。
-  const face: BundleConfigActions = {
-    set: props.set,
-    editText: props.editText,
-    clear: props.clear,
-    appendItem: props.appendItem,
-    removeItem: props.removeItem,
-    addMode: props.addMode,
-    removeMode: props.removeMode,
-    save: props.save,
-    discard: props.discard,
-  };
-  // 读数取原始快照（引用稳定，uSES 语义正确），投影在渲染里做。
-  const snapshot = props.useBundleConfig((current: SchemaFormState) => current);
-  const status = props.useBundleStatus((current: ConfigStatus) => current);
-  const models = props.useBundleModels((current: BundleModelsState) => current);
-  const state = useMemo(() => projectBundleConfig(snapshot, t, status), [snapshot, t, status]);
-  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set<string>());
-  const [addingId, setAddingId] = useState("");
-  // "添加模式"的弹窗：由"模式"标题右边那个 + 图标按钮打开。
-  const [addingOpen, setAddingOpen] = useState(false);
-  // 要删的那个模式：删除是不可逆的一步，先过一次确认弹窗（保存之前仍可丢弃）。
-  const [removing, setRemoving] = useState<BundleModeView | null>(null);
-  // 挂载时强制重读一次 describe：视图晚到、通知没落上时，这一步把读数拉平（有草稿时它自己跳过）。
-  const resync = props.resync;
-  useEffect(() => {
-    resync();
-  }, [resync]);
-  // 槽位注册项只为 `page` 视图存在（bundle 页不给 `summary` 座位）。
-  if (view !== "page") return null;
-  if (state.readiness !== "ready") {
-    // 只有异常态才做诊断（它读 describe 与 schema，正常路径一次也不跑）。
-    const diagnosis = props.diagnose();
-    const message =
-      state.readiness === "loading"
-        ? t("configured.loading")
-        : state.readiness === "missing"
-          ? t("configured.missing")
-          : t("configured.unreadable", { problem: diagnosis.problem });
-    return (
-      <div data-bundle-config={state.readiness} data-namespace={SESSION_MODE_NS}>
-        <Text
-          as="p"
-          size="sm"
-          tone="tertiary"
-          data-namespaces={diagnosis.namespaces.join(",")}
-          data-problem={diagnosis.problem}
-          data-controller={diagnosis.controller}
-        >
-          {message}
-        </Text>
-        {state.readiness !== "unreadable" ? null : (
-          // 读不出来时把诊断也画出来：这时页面本来就用不了，原因说在明面上比藏在属性里有用。
-          <Text as="p" size="xs" tone="tertiary" mono data-diagnosis="true">
-            {`${diagnosis.problem} · ${diagnosis.controller} · namespaces=[${diagnosis.namespaces.join(", ")}]`}
-          </Text>
-        )}
-      </div>
-    );
-  }
-  const labels: SettingsFormLabels = {
-    unavailable: t("unavailable"),
-    readOnly: t("readOnly"),
-    saveFailed: t("saveFailed"),
-    save: t("save"),
-    saving: t("saving"),
-  };
-  const toggle = (id: string): void => {
-    setExpanded((previous) => {
-      const next = new Set(previous);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-  return (
-    <SettingsForm labels={labels} state={state} onSave={face.save} onDiscard={face.discard}>
-      <Stack gap={16} data-bundle-config="page">
-        <Stack as="section" gap={8} data-section="default">
-          <SettingsFieldRow
-            label={t("default.label")}
-            hint={t("default.hint")}
-            layout="inline"
-            {...(state.defaultMode.invalid === undefined
-              ? {}
-              : { invalid: state.defaultMode.invalid })}
-            data-field="default"
-            data-control="choice"
-          >
-            <SearchSelect
-              label={t("default.label")}
-              value={state.defaultMode.value}
-              emptyLabel={t("tri.unset")}
-              options={state.defaultMode.options.map((option) => ({
-                value: String(option.value),
-                ...(option.label === undefined ? {} : { label: option.label }),
-              }))}
-              searchLabel={t("select.search")}
-              noMatchLabel={t("select.noMatch")}
-              disabled={!state.writable}
-              onSelect={(next) => {
-                if (next === "") face.clear(["default"]);
-                else face.set(["default"], next);
-              }}
-            />
-          </SettingsFieldRow>
-        </Stack>
-
-        <Stack as="section" gap={8} data-section="modes">
-          {/* 这一段的第一个 child 是 `row(col(标题, 说明), 控件)`：左列标题与说明同列，添加入口贴最右。 */}
-          <Row gap={8} justify="between">
-            <Stack gap={2} grow>
-              <Text as="h4" size="md" tone="primary" weight="strong">
-                {t("modes.label")}
-              </Text>
-              <Text as="p" size="sm" tone="tertiary">
-                {t("modes.hint")}
-              </Text>
-            </Stack>
-            <IconButton
-              label={t("add.label")}
-              data-action="open-add-mode"
-              disabled={!state.writable}
-              onClick={() => {
-                setAddingId("");
-                setAddingOpen(true);
-              }}
-            >
-              <IconPlusOutlineRegular />
-            </IconButton>
-          </Row>
-          {state.modes.map((mode) => (
-            <ModeCard
-              key={mode.id}
-              mode={mode}
-              models={models}
-              open={expanded.has(mode.id)}
-              writable={state.writable}
-              t={t}
-              face={face}
-              onRequestRemove={() => {
-                setRemoving(mode);
-              }}
-              onToggle={() => {
-                toggle(mode.id);
-              }}
-            />
-          ))}
-        </Stack>
-      </Stack>
-      <Modal
-        open={addingOpen}
-        onClose={() => {
-          setAddingOpen(false);
-        }}
-        title={t("add.label")}
-        closeLabel={t("add.close")}
-        description={t("add.hint")}
-        footer={
-          <>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setAddingOpen(false);
-              }}
-            >
-              {t("add.cancel")}
-            </Button>
-            <Button
-              variant="primary"
-              data-action="add-mode"
-              disabled={addingId.trim() === ""}
-              onClick={() => {
-                const id = addingId.trim();
-                face.addMode(id);
-                setAddingId("");
-                setAddingOpen(false);
-                setExpanded((previous) => new Set(previous).add(id));
-              }}
-            >
-              {t("add.confirm")}
-            </Button>
-          </>
-        }
-      >
-        <Input
-          data-field="new-mode"
-          data-modal-autofocus
-          value={addingId}
-          placeholder={t("add.placeholder")}
-          aria-label={t("add.label")}
-          onChange={(event) => {
-            setAddingId(event.currentTarget.value);
-          }}
-        />
-      </Modal>
-      <Modal
-        open={removing !== null}
-        onClose={() => {
-          setRemoving(null);
-        }}
-        title={t("remove.title")}
-        closeLabel={t("remove.close")}
-        description={t("remove.description", { name: removing?.title ?? "" })}
-        footer={
-          <>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setRemoving(null);
-              }}
-            >
-              {t("remove.cancel")}
-            </Button>
-            <Button
-              variant="primary"
-              tone="danger"
-              data-action="confirm-remove"
-              onClick={() => {
-                if (removing !== null) face.removeMode(removing.id);
-                setRemoving(null);
-              }}
-            >
-              {t("remove.confirm")}
-            </Button>
-          </>
-        }
-      />
-    </SettingsForm>
-  );
-}
-
-// 一张模式卡片：折叠头显示名称与摘要，展开后是分组字段与删除入口。
-function ModeCard({
-  mode,
-  models,
-  open,
-  writable,
-  t,
-  face,
-  onRequestRemove,
-  onToggle,
-}: {
-  mode: BundleModeView;
-  // 部署里"已设置的模型"（默认模型那一组的清单用它）。
-  models: BundleModelsState;
-  open: boolean;
-  writable: boolean;
-  t: BundleTranslate;
-  face: BundleConfigActions;
-  // 删除要过确认弹窗：卡片只上报"想删这一个"，真正删谁由页面在弹窗里定。
-  onRequestRemove: () => void;
-  onToggle: () => void;
-}): ReactNode {
-  const hasModel = mode.model !== undefined;
-  return (
-    <Stack boxed pad="card" data-mode={mode.id} data-deletable={mode.deletable ? "true" : "false"}>
-      <DisclosureRow
-        icon={<IconAgentPresetOutlineRegular />}
-        title={mode.title}
-        open={open}
-        expandable
-        expandOnRowClick
-        onToggle={onToggle}
-        keepContentWhenOpen
-        collapsedContent={
-          // 两段：先是紧挨名称的 id，再是贴最右的摘要 + 删除。
-          <>
-            <Text as="code" size="sm" tone="tertiary" data-mode-id>
-              {mode.id}
-            </Text>
-            <Row gap={8} push>
-              <Text as="span" size="sm" tone="tertiary">
-                {mode.summary}
-              </Text>
-              {mode.deletable ? (
-                <IconButton
-                  size="sm"
-                  data-action="remove-mode"
-                  disabled={!writable}
-                  label={t("removeNamed", { name: mode.title })}
-                  onClick={(event) => {
-                    // 行本身是折叠开关：删除先拦下这次点击，别顺手把卡片收起来（确认弹窗照旧）。
-                    event.stopPropagation();
-                    onRequestRemove();
-                  }}
-                >
-                  <IconTrashOutlineRegular />
-                </IconButton>
-              ) : (
-                <Text as="span" size="sm" tone="tertiary" data-protected="true">
-                  {t("protected")}
-                </Text>
-              )}
-            </Row>
-          </>
-        }
-      >
-        <Stack gap={14} pad="body">
-          {mode.groups.map((group) => (
-            <Stack key={group.key} gap={0} data-group={group.key}>
-              <Row gap={8} justify="between">
-                <Text size="sm" tone="secondary" weight="strong">
-                  {group.label}
-                </Text>
-              </Row>
-              {group.key === "model" ? (
-                <>
-                  {/* 整块 `defaultModel` 是一个可加字段：开关开 = 这个模式自带默认模型，关 = 跟随全局。 */}
-                  <SettingsFieldRow
-                    label={t("field.defaultModel")}
-                    hint={t("hint.defaultModel")}
-                    layout="inline"
-                    data-control="default-model"
-                  >
-                    <Switch
-                      checked={hasModel}
-                      label={t("field.defaultModel")}
-                      disabled={!writable}
-                      onChange={(next) => {
-                        if (next) {
-                          face.set(["modes", mode.id, "defaultModel"], { provider: "", model: "" });
-                        } else {
-                          face.clear(["modes", mode.id, "defaultModel"]);
-                        }
-                      }}
-                    />
-                  </SettingsFieldRow>
-                  {!hasModel ? null : (
-                    <SettingsFieldRow
-                      label={t("field.modelRoute")}
-                      hint={t("hint.modelRoute")}
-                      divider
-                      data-control="model-routes"
-                    >
-                      <ModelRouteList
-                        label={t("field.modelRoute")}
-                        candidates={models.routes}
-                        selectedKey={
-                          mode.model === undefined || mode.model.provider === ""
-                            ? undefined
-                            : routeKey(mode.model.provider, mode.model.model)
-                        }
-                        disabled={!writable}
-                        status={models.status}
-                        loadingLabel={t("model.loading")}
-                        errorLabel={t("model.error")}
-                        emptyLabel={t("model.empty")}
-                        onSelect={(candidate) => {
-                          // 服务商与模型是一对：选一条路由等于把两个字段一起定下来。
-                          face.set(["modes", mode.id, "defaultModel"], {
-                            provider: candidate.provider,
-                            model: candidate.model,
-                          });
-                        }}
-                      />
-                    </SettingsFieldRow>
-                  )}
-                  {group.fields.map((field, index) => (
-                    <FieldRow
-                      key={field.key}
-                      field={field}
-                      writable={writable}
-                      t={t}
-                      face={face}
-                      divider={index > 0 || hasModel}
-                    />
-                  ))}
-                </>
-              ) : (
-                group.fields.map((field, index) => (
-                  <FieldRow
-                    key={field.key}
-                    field={field}
-                    writable={writable}
-                    t={t}
-                    face={face}
-                    divider={index > 0}
-                  />
-                ))
-              )}
-            </Stack>
-          ))}
-        </Stack>
-      </DisclosureRow>
-    </Stack>
-  );
-}
-
-// 一个字段：位置（标签 / 说明 / 徽标 / 分隔线）归 `SettingsFieldRow`，控件本体归 `FieldControl`。
-function FieldRow({
-  field,
-  writable,
-  divider,
-  t,
-  face,
-}: {
-  field: BundleFieldView;
-  writable: boolean;
-  // 不是这一组的第一个字段：与上一个之间画一条细分隔线（与官方设置面同一种口径）。
-  divider: boolean;
-  t: BundleTranslate;
-  face: BundleConfigActions;
-}): ReactNode {
-  // 选项类字段要有候选才画：候选按字段树里的路径给，`defaultModel` 整块没配时它的子字段不在树上，
-  // 这时画出来只会是一个没有可选值的空选择器（"设置默认模型"按钮才是那个状态下的入口）。
-  if (field.control === "choice" && !field.present) return null;
-  return (
-    <SettingsFieldRow
-      label={field.label}
-      hint={field.hint}
-      divider={divider}
-      // 开关 / 三态 / 多选按钮这一类是"右置排"：标签与说明在左，控件贴最右（官方设置页的开关行同一种）。
-      layout={
-        field.control === "switch" || field.control === "tri" || field.control === "roles"
-          ? "inline"
-          : "stack"
-      }
-      {...(field.overridden ? { overriddenLabel: t("overridden") } : {})}
-      {...(field.control === "text"
-        ? {
-            resetLabel: t("field.reset"),
-            onReset: () => {
-              face.clear(field.path);
-            },
-          }
-        : {})}
-      {...(field.invalid === undefined ? {} : { invalid: field.invalid })}
-      data-field={field.path.join(".")}
-      data-control={field.control}
-    >
-      <FieldControl field={field} writable={writable} t={t} face={face} />
-    </SettingsFieldRow>
-  );
-}
-
-function FieldControl({
-  field,
-  writable,
-  t,
-  face,
-}: {
-  field: BundleFieldView;
-  writable: boolean;
-  t: BundleTranslate;
-  face: BundleConfigActions;
-}): ReactNode {
-  const disabled = !writable;
-  const id = useId();
-  switch (field.control) {
-    case "multiline":
-      return (
-        <MultilineField
-          value={field.text}
-          rows={3}
-          disabled={disabled}
-          aria-label={field.label}
-          onChange={(event) => {
-            face.editText(field.path, event.currentTarget.value);
-          }}
-        />
-      );
-    case "choice":
-      return (
-        <SearchSelect
-          label={field.label}
-          value={field.text}
-          emptyLabel={t("tri.unset")}
-          options={field.options.map((option) => ({
-            value: String(option.value),
-            ...(option.label === undefined ? {} : { label: option.label }),
-          }))}
-          searchLabel={t("select.search")}
-          noMatchLabel={t("select.noMatch")}
-          disabled={disabled}
-          onSelect={(next) => {
-            if (next === "") face.clear(field.path);
-            else face.set(field.path, next);
-          }}
-        />
-      );
-    case "switch":
-      return (
-        <Switch
-          checked={field.value === true}
-          label={field.label}
-          disabled={disabled}
-          onChange={(next) => {
-            face.set(field.path, next);
-          }}
-        />
-      );
-    case "tri":
-      return (
-        <SegmentedControl<TriValue>
-          id={`${id}-tri`}
-          label={field.label}
-          value={triValue(field)}
-          disabled={disabled}
-          options={[
-            { value: "unset", label: t("tri.unset") },
-            { value: "on", label: t("tri.on") },
-            { value: "off", label: t("tri.off") },
-          ]}
-          onChange={(next) => {
-            if (next === "unset") face.clear(field.path);
-            else face.set(field.path, next === "on");
-          }}
-        />
-      );
-    case "roles":
-      return (
-        <Row gap={6} wrap data-control="roles">
-          {ROLES.map((role) => {
-            const active = Array.isArray(field.value) && field.value.includes(role);
-            return (
-              <Button
-                key={role}
-                variant={active ? "primary" : "outline"}
-                size="sm"
-                // `data-role` 归控件身份（见 primitives 的控件），这一处标的是"哪个模式角色"，所以另起一个名字。
-                data-mode-role={role}
-                disabled={disabled}
-                aria-pressed={active}
-                onClick={() => {
-                  const current = Array.isArray(field.value) ? field.value.map(String) : [];
-                  const wanted = active
-                    ? current.filter((value) => value !== role)
-                    : [...current.filter((value) => value !== role), role];
-                  face.set(field.path, wanted);
-                }}
-              >
-                {t(`role.${role}` as "role.main")}
-              </Button>
-            );
-          })}
-        </Row>
-      );
-    case "tags":
-      return (
-        <TagInput
-          value={Array.isArray(field.value) ? field.value.map(String) : []}
-          options={field.options.map((option) => ({
-            value: String(option.value),
-            ...(option.label === undefined ? {} : { label: option.label }),
-          }))}
-          placeholder={t("tags.placeholder")}
-          label={field.label}
-          noMatchLabel={t("select.noMatch")}
-          removeLabel={(name) => t("tags.remove", { name })}
-          disabled={disabled}
-          onChange={(next) => {
-            face.set(field.path, next);
-          }}
-        />
-      );
-    case "text":
-      return (
-        <Input
-          value={field.text}
-          aria-label={field.label}
-          disabled={disabled}
-          onChange={(event) => {
-            face.editText(field.path, event.currentTarget.value);
-          }}
-        />
-      );
-  }
-}
-
-function triValue(field: BundleFieldView): TriValue {
-  return field.value === "unset" || field.value === "on" || field.value === "off"
-    ? field.value
-    : "unset";
-}