Merge branch 'main' into pr/GGboya/356

2026-10-05 20:44:07 +08:00 · 2026-08-26 23:28:11 +08:00
parent 75babb7334 2c95d7f836
commit eff642fdcf
34 changed files with 765 additions and 255 deletions
@@ -1,5 +1,7 @@
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { init, Rect, type ElementEvent } from "zrender";
+import type { Locale } from "../../i18n/runtime";
+import { useI18n } from "../../i18n/store";
 import { Tooltip, type TooltipAnchor } from "../ui/Tooltip";
 import styles from "./ContributionCalendarChart.module.scss";

@@ -54,8 +56,6 @@ const CALENDAR_CONFIG = {
  axisLabelGap: 8,
  axisLabelWidth: 28,
 } as const;
-const tokenFormatter = new Intl.NumberFormat("zh-CN");
-
 function parseDate(date: string) {
  return new Date(`${date}T00:00:00Z`);
 }
@@ -72,9 +72,10 @@ function isCellExtra(value: unknown): value is CellExtra {
  return typeof value === "object" && value !== null && (value as CellExtra).kind === "calendar-cell";
 }

-function buildCalendarLayout(data: ContributionDay[]) {
+function buildCalendarLayout(data: ContributionDay[], locale: Locale) {
  if (data.length === 0) return null;

+  const monthFormatter = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" });
  const maximum = Math.max(1, ...data.map(({ tokens }) => tokens));
  const firstDate = parseDate(data[0].date);
  const calendarStart = new Date(firstDate.getTime() - mondayIndex(firstDate) * DAY_IN_MS);
@@ -88,20 +89,22 @@ function buildCalendarLayout(data: ContributionDay[]) {
  const monthTicks = cells.reduce<Array<{ key: string; text: string; column: number }>>((ticks, cell) => {
    const date = parseDate(cell.date);
    const key = `${date.getUTCFullYear()}-${date.getUTCMonth()}`;
-    if (ticks.at(-1)?.key !== key) ticks.push({ key, text: `${date.getUTCMonth() + 1}月`, column: cell.column });
+    if (ticks.at(-1)?.key !== key) ticks.push({ key, text: monthFormatter.format(date), column: cell.column });
    return ticks;
  }, []);
  return { cells, columnCount, monthTicks };
 }

 export function ContributionCalendarChart({ data }: ContributionCalendarChartProps) {
+  const { locale } = useI18n();
  const scrollerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLDivElement>(null);
  const layoutRef = useRef<ReturnType<typeof buildCalendarLayout>>(null);
  const scheduleDrawRef = useRef<() => void>(() => undefined);
  const [tooltip, setTooltip] = useState<TooltipState | null>(null);
  const [axisLabels, setAxisLabels] = useState<AxisLabel[]>([]);
-  const layout = useMemo(() => buildCalendarLayout(data), [data]);
+  const layout = useMemo(() => buildCalendarLayout(data, locale), [data, locale]);
+  const tokenFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
  layoutRef.current = layout;

  useLayoutEffect(() => {
@@ -1,25 +1,26 @@
+import type { IconifyIcon } from "@iconify/react/offline";
 import { useEffect, useRef } from "react";
 import Sortable from "sortablejs";
 import type { Model } from "../../api";
 import { Button } from "../ui/Button";
 import { Card } from "../ui/Card";
 import { Icon } from "../ui/Icon";
-import { claudeIcon, dragIcon, openAiIcon } from "../ui/icons";
+import { claudeIcon, dragIcon, flatColorOrganizationIcon, openAiIcon } from "../ui/icons";
 import { CursorModelTestResult, type CursorModelTestState } from "./CursorModelTestResult";
 import styles from "./CursorSettings.module.scss";

-export function CursorModelCards({
-  models,
-  disabled,
-  testingModelHashes,
-  testResults,
-  onTest,
-  onEdit,
-  onDuplicate,
-  onDelete,
-  onReorder,
-}: {
+export type CursorModelGrouping = "flat" | "provider" | "type";
+
+export type CursorModelGroup = {
+  key: string;
+  label: string;
+  icon: IconifyIcon;
  models: Model[];
+};
+
+type CursorModelCardsProps = {
+  models: Model[];
+  grouping: CursorModelGrouping;
  disabled: boolean;
  testingModelHashes: Set<string>;
  testResults: Map<string, CursorModelTestState>;
@@ -28,7 +29,54 @@ export function CursorModelCards({
  onDuplicate: (model: Model) => void;
  onDelete: (model: Model) => void;
  onReorder: (modelHashes: string[]) => void;
-}) {
+};
+
+type ModelGridProps = Omit<CursorModelCardsProps, "grouping"> & {
+  sortable: boolean;
+};
+
+export function cursorModelGroups(models: Model[], grouping: Exclude<CursorModelGrouping, "flat">): CursorModelGroup[] {
+  const groups = new Map<string, CursorModelGroup>();
+  for (const model of models) {
+    const descriptor = grouping === "provider" ? providerGroup(model) : typeGroup(model);
+    const group = groups.get(descriptor.key);
+    if (group) {
+      group.models.push(model);
+    } else {
+      groups.set(descriptor.key, { ...descriptor, models: [model] });
+    }
+  }
+  return [...groups.values()];
+}
+
+export function CursorModelCards(props: CursorModelCardsProps) {
+  if (props.grouping === "flat") return <div style={{ paddingTop: "10px" }}>
+    <ModelGrid {...props} sortable />
+  </div>;
+
+  return <div className={styles.modelGroups}>
+    {cursorModelGroups(props.models, props.grouping).map((group) => <section className={styles.modelGroup} key={group.key}>
+      <div className={styles.modelGroupHeader}>
+        <Icon icon={group.icon} size="1.1em" />
+        <span>{group.label}</span>
+      </div>
+      <ModelGrid {...props} models={group.models} sortable={false} />
+    </section>)}
+  </div>;
+}
+
+function ModelGrid({
+  models,
+  sortable: sortableEnabled,
+  disabled,
+  testingModelHashes,
+  testResults,
+  onTest,
+  onEdit,
+  onDuplicate,
+  onDelete,
+  onReorder,
+}: ModelGridProps) {
  const grid = useRef<HTMLDivElement>(null);
  const sortable = useRef<Sortable | null>(null);
  const currentModels = useRef(models);
@@ -37,7 +85,7 @@ export function CursorModelCards({
  reorder.current = onReorder;

  useEffect(() => {
-    if (!grid.current) return;
+    if (!sortableEnabled || !grid.current) return;
    sortable.current = Sortable.create(grid.current, {
      animation: 160,
      dataIdAttr: "data-model-hash",
@@ -72,7 +120,7 @@ export function CursorModelCards({
      sortable.current?.destroy();
      sortable.current = null;
    };
-  }, []);
+  }, [sortableEnabled]);

  useEffect(() => {
    sortable.current?.option("disabled", disabled);
@@ -84,14 +132,14 @@ export function CursorModelCards({
      const result = testResults.get(model.model_hash);
      const testing = testingModelHashes.has(model.model_hash);
      return <Card className={styles.modelCard} data-model-hash={model.model_hash} key={model.model_hash}>
-        <button type="button" className={styles.sortHandle} disabled={disabled} aria-label={t("拖动排序")} title={t("拖动排序")} onClick={(event) => event.stopPropagation()}>
+        {sortableEnabled && <button type="button" className={styles.sortHandle} disabled={disabled} aria-label={t("拖动排序")} title={t("拖动排序")} onClick={(event) => event.stopPropagation()}>
          <Icon icon={dragIcon} size="1.25em" />
-        </button>
+        </button>}
        <div className={styles.modelCardContent}>
          <div className={styles.modelCardTop}>
            <div className={styles.modelCardName}>
-              <strong>{model.display_name}</strong>
-              <span>{model.model_id}</span>
+              <span className={styles.modelCardNameText}>{model.display_name}</span>
+              <span className={styles.modelCardModelId}>{model.model_id}</span>
            </div>
            <span className={styles.modelTypeBadge}>
              <Icon icon={model.type === "anthropic" ? claudeIcon : openAiIcon} />
@@ -102,7 +150,7 @@ export function CursorModelCards({
            <CursorModelTestResult state={result} testing={testing} />
          </div>
          <div className={styles.modelCardActions}>
-            <Button size="small" disabled={disabled} onClick={() => onTest(model)}>{testing ? t("测试中…") : t("测试")}</Button>
+            <Button size="small" disabled={disabled && !testing} onClick={() => onTest(model)}>{testing ? t("取消测试") : t("测试")}</Button>
            <Button size="small" disabled={disabled} onClick={() => onEdit(model)}>{t("编辑")}</Button>
            <Button size="small" disabled={disabled} onClick={() => onDuplicate(model)}>{t("复制")}</Button>
            <Button size="small" className={styles.deleteButton} disabled={disabled} onClick={() => onDelete(model)}>{t("删除")}</Button>
@@ -112,3 +160,27 @@ export function CursorModelCards({
    })}
  </div>;
 }
+
+function providerGroup(model: Model) {
+  const label = providerDomain(model.base_url);
+  return { key: label, label, icon: flatColorOrganizationIcon };
+}
+
+function providerDomain(baseUrl: string) {
+  const value = baseUrl.trim();
+  try {
+    return new URL(value).hostname.toLowerCase() || value;
+  } catch {
+    try {
+      return new URL(`https://${value}`).hostname.toLowerCase() || value;
+    } catch {
+      return value;
+    }
+  }
+}
+
+function typeGroup(model: Model) {
+  if (model.type === "anthropic") return { key: "anthropic", label: "Anthropic", icon: claudeIcon };
+  if (model.openai_endpoint === "/v1/chat/completions") return { key: "openai-chat", label: "OpenAI Chat", icon: openAiIcon };
+  return { key: "openai-responses", label: "OpenAI Responses", icon: openAiIcon };
+}
@@ -26,7 +26,7 @@ export const emptyCursorModelDraft = (): CursorModelDraft => ({
    base_url: "",
    use_full_url: false,
    api_key: "",
-    tooltip_data: t("备注"),
+    tooltip_data: "",
    model_id: "",
    reasoning_effort: null,
    openai_endpoint: "/v1/responses",
@@ -142,17 +142,17 @@ export function CursorModelEditor({ draft, modelOptions, discovering, onChange,
      <FormField label="API Key" hint={t("访问模型服务所需的密钥。")}> <SecretTextInput placeholder="sk-xxxxxx" autoComplete="off" value={draft.model.api_key} onChange={(event) => setModel({ api_key: event.target.value })} /></FormField>

      <FormField label={t("模型名称")} hint={t("可以直接输入模型标识，也可以读取接口返回的模型列表。")}> <Combobox value={draft.model.model_id} options={combinedOptions} placeholder="gpt-5" append={<Button className={styles.discoverButton} disabled={discovering || !canDiscover} onClick={onDiscover}>{discovering ? t("获取中…") : t("获取模型")}</Button>} onChange={(model_id) => setModel({ model_id, display_name: draft.model.display_name || model_id })} /></FormField>
-      <FormField label={t("显示名称")} hint={t("仅用于界面展示，不会改变发送给模型服务的模型名称。")}> <TextInput value={draft.model.display_name} onChange={(event) => setModel({ display_name: event.target.value })} /></FormField>
-      <FormField className={styles.fullWidth} label={t("备注")} hint={t("显示在 Cursor 模型说明中。")}> <TextInput value={draft.model.tooltip_data} onChange={(event) => setModel({ tooltip_data: event.target.value })} /></FormField>
+      <FormField label={t("显示名称")} hint={t("仅用于界面展示，不会改变发送给模型服务的模型名称。")}> <TextInput placeholder={t("例如：主力模型")} value={draft.model.display_name} onChange={(event) => setModel({ display_name: event.target.value })} /></FormField>
+      <FormField className={styles.fullWidth} label={t("备注")} hint={t("显示在 Cursor 模型说明中。")}> <TextInput placeholder={t("请输入模型备注")} value={draft.model.tooltip_data} onChange={(event) => setModel({ tooltip_data: event.target.value })} /></FormField>

-      <FormField label={t("上下文窗口 Token")} hint={t("留空时使用默认值。")}> <TextInput type="number" min={1} step={1} value={draft.model.context_window_tokens ?? ""} onChange={(event) => setModel({ context_window_tokens: numberValue(event.target.value) })} /></FormField>
+      <FormField label={t("上下文窗口 Token")} hint={t("留空时使用默认值。")}> <TextInput type="number" min={1} step={1} placeholder={t("留空使用默认值")} value={draft.model.context_window_tokens ?? ""} onChange={(event) => setModel({ context_window_tokens: numberValue(event.target.value) })} /></FormField>
      {draft.model.type === "openai" ? <>
-        <FormField label={t("最大输出 Token")} hint={t("留空时使用默认值。")}> <TextInput type="number" min={1} step={1} value={draft.model.max_completion_tokens ?? ""} onChange={(event) => setModel({ max_completion_tokens: numberValue(event.target.value) })} /></FormField>
+        <FormField label={t("最大输出 Token")} hint={t("留空时使用默认值。")}> <TextInput type="number" min={1} step={1} placeholder={t("留空使用默认值")} value={draft.model.max_completion_tokens ?? ""} onChange={(event) => setModel({ max_completion_tokens: numberValue(event.target.value) })} /></FormField>
        <FormField label={t("推理强度")}> <Select ariaLabel={t("推理强度")} value={draft.model.reasoning_effort ?? ""} options={effortOptions(true)} onChange={(value) => setModel({ reasoning_effort: value || null })} /></FormField>
      </> : <>
-        <FormField label={t("最大输出 Token")} hint={t("留空时使用默认值。")}> <TextInput type="number" min={1} step={1} value={draft.model.anthropic_max_tokens ?? ""} onChange={(event) => setModel({ anthropic_max_tokens: numberValue(event.target.value) })} /></FormField>
+        <FormField label={t("最大输出 Token")} hint={t("留空时使用默认值。")}> <TextInput type="number" min={1} step={1} placeholder={t("留空使用默认值")} value={draft.model.anthropic_max_tokens ?? ""} onChange={(event) => setModel({ anthropic_max_tokens: numberValue(event.target.value) })} /></FormField>
        <FormField label={t("思考强度")}> <Select ariaLabel={t("思考强度")} value={draft.model.anthropic_thinking_effort ?? "xhigh"} options={effortOptions(false)} onChange={(anthropic_thinking_effort) => setModel({ anthropic_thinking_effort })} /></FormField>
-        <FormField label={t("思考预算 Token")} hint={t("留空时使用 adaptive thinking。")}> <TextInput type="number" min={1} step={1} value={draft.model.thinking_budget_tokens ?? ""} onChange={(event) => setModel({ thinking_budget_tokens: numberValue(event.target.value) })} /></FormField>
+        <FormField label={t("思考预算 Token")} hint={t("留空时使用 adaptive thinking。")}> <TextInput type="number" min={1} step={1} placeholder={t("留空使用 adaptive thinking")} value={draft.model.thinking_budget_tokens ?? ""} onChange={(event) => setModel({ thinking_budget_tokens: numberValue(event.target.value) })} /></FormField>
      </>}

      <ToggleJsonField
@@ -6,11 +6,13 @@ import styles from "./CursorModelTestResult.module.scss";

 export type CursorModelTestState =
  | { status: "success"; result: ModelConnectivityResult }
-  | { status: "error"; error: string };
+  | { status: "error"; error: string }
+  | { status: "cancelled" };

 export function CursorModelTestResult({ state, testing = false }: { state?: CursorModelTestState; testing?: boolean }) {
  if (testing) return <div className={`${styles.root} ${styles.testing}`}><span className={styles.summary}>{t("测试中…")}</span></div>;
  if (!state) return <div className={`${styles.root} ${styles.idle}`}><span className={styles.summary}>{t("未测试")}</span></div>;
+  if (state.status === "cancelled") return <div className={`${styles.root} ${styles.idle}`}><span className={styles.summary}>{t("测试已取消")}</span></div>;

  const success = state.status === "success";
  const summary = success
@@ -5,6 +5,29 @@
  gap: 16px;
 }

+.groupActions {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 5px;
+
+  button {
+    height: 25px;
+    padding: 0 8px;
+    color: var(--vscode-descriptionForeground);
+    background: transparent;
+    border: 0;
+    border-right: 1px solid var(--vscode-sideBar-border);
+    font-size: type.$font-size-xs;
+    white-space: nowrap;
+
+    &:last-child { border-right: 0; }
+    &:hover:not(:disabled) { color: var(--vscode-foreground); background: var(--vscode-list-hoverBackground); }
+    &[aria-pressed="true"] { color: var(--vscode-list-activeSelectionForeground); background: var(--vscode-list-activeSelectionBackground); }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+  }
+}
+
 .gateActions {
  display: flex;
  align-items: center;
@@ -39,13 +62,34 @@
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
+
+}
+.modelGroups {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-top: 10px;
+}
+.modelGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.modelGroupHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--vscode-foreground);
+  font-size: type.$font-size-base;
+  opacity: 0.6;
+  padding-left: 6px;
 }
 .modelCard {
  position: relative;
  padding: 16px;
 }
 .modelCardContent {
-  height: 150px;
+  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
@@ -64,19 +108,19 @@
  flex-direction: column;
  gap: 4px;

-  strong,
-  span {
+  .modelCardNameText,
+  .modelCardModelId {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
-  strong {
+  .modelCardNameText {
    color: var(--vscode-foreground);
    font-size: type.$font-size-base;
  }
-  span {
+  .modelCardModelId {
    color: var(--vscode-descriptionForeground);
-    font-size: type.$font-size-xs;
+    font-size: type.$font-size-2xs;
  }
 }
 .modelTypeBadge {
@@ -15,8 +15,8 @@
  top: var(--app-content-top);
  left: max(var(--app-page-padding), calc((100% - var(--app-page-max-width)) / 2));
  margin: 0;
-  padding-left: 10px;
-  font-size: type.$font-size-lg;
+  padding-left:0;
+  font-size: type.$font-size-xxl;
  font-weight: bolder;
  transform: translateY(-150%);
  -webkit-user-select: none;
@@ -26,8 +26,8 @@

  top: 0;
  margin: 0;
-  padding-left: 10px;
-  font-size: type.$font-size-lg;
+  padding-left: 0;
+  font-size: type.$font-size-xxl;
  font-weight: bolder;
  transform: translateY(-150%);
 }
@@ -18,7 +18,7 @@
  border-radius: 5px;

  button {
-    height: 30px;
+    height: 25px;
    padding: 0 8px;
    color: var(--vscode-descriptionForeground);
    background: transparent;
@@ -97,6 +97,7 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(

    const hostRef = useRef<HTMLDivElement | null>(null)
    const localViewportRef = useRef<HTMLDivElement | null>(null)
+    const localContentRef = useRef<HTMLDivElement | null>(null)
    const trackRef = useRef<HTMLDivElement | null>(null)
    const thumbRef = useRef<HTMLDivElement | null>(null)
    const dragRef = useRef<{
@@ -107,6 +108,7 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(

    const { state, api, metricsRef, scrollToNow } = useScrollableModel({
      viewportRef: localViewportRef,
+      contentRef: localContentRef,
      trackRef,
      thumbRef,
      contentHeight,
@@ -132,7 +134,10 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
    )

    const setContentRef = useCallback(
-      (node: HTMLDivElement | null) => assignRef(contentRef, node),
+      (node: HTMLDivElement | null) => {
+        localContentRef.current = node
+        assignRef(contentRef, node)
+      },
      [contentRef]
    )

@@ -33,6 +33,7 @@ export interface ScrollMetrics extends ScrollAreaState {

 interface UseScrollableModelOptions {
  viewportRef: RefObject<HTMLDivElement | null>
+  contentRef: RefObject<HTMLDivElement | null>
  trackRef: RefObject<HTMLDivElement | null>
  thumbRef: RefObject<HTMLDivElement | null>
  contentHeight?: number
@@ -131,6 +132,7 @@ function applyThumbStyle(
 export function useScrollableModel(options: UseScrollableModelOptions) {
  const {
    viewportRef,
+    contentRef,
    trackRef,
    thumbRef,
    contentHeight,
@@ -319,28 +321,30 @@ export function useScrollableModel(options: UseScrollableModelOptions) {

  useEffect(() => {
    const element = viewportRef.current
+    const content = contentRef.current
    const track = trackRef.current
-    if (!element || !track) return
+    if (!element || !content || !track) return

    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0]
-      if (entry) {
+      const viewportEntry = entries.find((entry) => entry.target === element)
+      if (viewportEntry) {
        onViewportResizeRef.current?.({
-          width: entry.contentRect.width,
-          height: entry.contentRect.height,
+          width: viewportEntry.contentRect.width,
+          height: viewportEntry.contentRect.height,
        })
      }
      snapshot(false)
    })

    resizeObserver.observe(element)
+    resizeObserver.observe(content)
    resizeObserver.observe(track)
    snapshot(false)

    return () => {
      resizeObserver.disconnect()
    }
-  }, [snapshot, trackRef, viewportRef])
+  }, [contentRef, snapshot, trackRef, viewportRef])

  useEffect(() => {
    snapshot(false)
@@ -8,6 +8,7 @@
  color: var(--vscode-foreground);
  font-size: type.$font-size-xs;
  cursor: pointer;
+  flex-shrink: 0;

  input {
    position: absolute;
@@ -34,8 +34,8 @@
 }

 .iconButton {
-  width: 30px;
-  height: 30px;
+  width: 25px;
+  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
@@ -47,6 +47,16 @@
 .input {
  height: 34px;
  padding: 0 10px;
+
+  &[type="number"] {
+    appearance: textfield;
+  }
+
+  &[type="number"]::-webkit-inner-spin-button,
+  &[type="number"]::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+  }
 }

 .secret {
@@ -34,12 +34,14 @@
  box-shadow: 0 20px 50px rgb(0 0 0 / 45%);

  header {
+    flex: 0 0 auto;
    padding: 10px 18px;
    border-bottom: 1px solid var(--vscode-editorWidget-border);
    font-size: type.$font-size-base;
    font-weight: 630;
  }
  footer {
+    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
@@ -52,6 +54,10 @@
  width: min(1080px, calc(100vw - 48px));
 }

+.fullHeight {
+  height: calc(100vh - var(--window-header-height) - 24px);
+}
+
 .banner {
  flex: 0 0 auto;
  padding: 12px 18px;
@@ -59,14 +65,8 @@
 }

 .body {
-  flex: 0 1 auto;
+  flex: 1 1 auto;
  min-height: 0;
-  max-height: calc(100vh - var(--window-header-height) - 112px);
-}
-
-.bodyViewport {
-  height: auto;
-  max-height: calc(100vh - var(--window-header-height) - 112px);
 }

 .bodyContent {
@@ -12,6 +12,7 @@ type ModalProps = {
  banner?: ReactNode;
  busy?: boolean;
  wide?: boolean;
+  fullHeight?: boolean;
  role?: "dialog" | "alertdialog";
  ariaDescribedBy?: string;
  initialFocus?: "first" | "submit";
@@ -36,7 +37,7 @@ function focusableElements(root: HTMLElement) {
    .filter((element) => element.getClientRects().length > 0);
 }

-export function Modal({ id, open, title, children, banner, busy, wide, role = "dialog", ariaDescribedBy, initialFocus = "first", onClose, onSubmit, secondaryAction, closeLabel = t("取消"), submitLabel = t("保存") }: ModalProps) {
+export function Modal({ id, open, title, children, banner, busy, wide, fullHeight, role = "dialog", ariaDescribedBy, initialFocus = "first", onClose, onSubmit, secondaryAction, closeLabel = t("取消"), submitLabel = t("保存") }: ModalProps) {
  const dialog = useRef<HTMLDivElement>(null);
  const submitButton = useRef<HTMLButtonElement>(null);
  const closeRef = useRef(onClose);
@@ -87,10 +88,10 @@ export function Modal({ id, open, title, children, banner, busy, wide, role = "d
  if (!open) return null;
  return createPortal(<div className={styles.mask}>
    <div className={styles.dragLayer} data-tauri-drag-region aria-hidden="true" />
-    <div id={id} ref={dialog} className={[styles.dialog, wide && styles.wide].filter(Boolean).join(" ")} role={role} aria-modal="true" aria-labelledby={titleId} aria-describedby={ariaDescribedBy} tabIndex={-1}>
+    <div id={id} ref={dialog} className={[styles.dialog, wide && styles.wide, fullHeight && styles.fullHeight].filter(Boolean).join(" ")} role={role} aria-modal="true" aria-labelledby={titleId} aria-describedby={ariaDescribedBy} tabIndex={-1}>
      <header id={titleId}>{title}</header>
      {banner && <div className={styles.banner}>{banner}</div>}
-      <ScrollableContent alwaysShowVertical className={styles.body} viewportClassName={styles.bodyViewport} contentClassName={styles.bodyContent}>{children}</ScrollableContent>
+      <ScrollableContent alwaysShowVertical className={styles.body} contentClassName={styles.bodyContent}>{children}</ScrollableContent>
      <footer>
        <button type="button" className={controls.primary} disabled={busy} onClick={onClose}>{closeLabel}</button>
        {secondaryAction}
@@ -15,7 +15,6 @@ export const flatColorSettingsIcon = icon('<path fill="#607D8B" d="M39.6 27.2c.1

 export const claudeIcon = icon('<path fill="#d97757" d="m50.228 170.321l50.357-28.257l.843-2.463l-.843-1.361h-2.462l-8.426-.518l-28.775-.778l-24.952-1.037l-24.175-1.296l-6.092-1.297L0 125.796l.583-3.759l5.12-3.434l7.324.648l16.202 1.101l24.304 1.685l17.629 1.037l26.118 2.722h4.148l.583-1.685l-1.426-1.037l-1.101-1.037l-25.147-17.045l-27.22-18.017l-14.258-10.37l-7.713-5.25l-3.888-4.925l-1.685-10.758l7-7.713l9.397.649l2.398.648l9.527 7.323l20.35 15.75L94.817 91.9l3.889 3.24l1.555-1.102l.195-.777l-1.75-2.917l-14.453-26.118l-15.425-26.572l-6.87-11.018l-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0l10.63 1.426l4.472 3.888l6.61 15.101l10.694 23.786l16.591 32.34l4.861 9.592l2.592 8.879l.973 2.722h1.685v-1.556l1.36-18.211l2.528-22.36l2.463-28.776l.843-8.1l4.018-9.722l7.971-5.25l6.222 2.981l5.12 7.324l-.713 4.73l-3.046 19.768l-5.962 30.98l-3.889 20.739h2.268l2.593-2.593l10.499-13.934l17.628-22.036l7.778-8.749l9.073-9.657l5.833-4.601h11.018l8.1 12.055l-3.628 12.443l-11.342 14.388l-9.398 12.184l-13.48 18.147l-8.426 14.518l.778 1.166l2.01-.194l30.46-6.481l16.462-2.982l19.637-3.37l8.88 4.148l.971 4.213l-3.5 8.62l-20.998 5.184l-24.628 4.926l-36.682 8.685l-.454.324l.519.648l16.526 1.555l7.065.389h17.304l32.21 2.398l8.426 5.574l5.055 6.805l-.843 5.184l-12.962 6.611l-17.498-4.148l-40.83-9.721l-14-3.5h-1.944v1.167l11.666 11.406l21.387 19.314l26.767 24.887l1.36 6.157l-3.434 4.86l-3.63-.518l-23.526-17.693l-9.073-7.972l-20.545-17.304h-1.36v1.814l4.73 6.935l25.017 37.59l1.296 11.536l-1.814 3.76l-6.481 2.268l-7.13-1.297l-14.647-20.544l-15.1-23.138l-12.185-20.739l-1.49.843l-7.194 77.448l-3.37 3.953l-7.778 2.981l-6.48-4.925l-3.436-7.972l3.435-15.749l4.148-20.544l3.37-16.333l3.046-20.285l1.815-6.74l-.13-.454l-1.49.194l-15.295 20.999l-23.267 31.433l-18.406 19.702l-4.407 1.75l-7.648-3.954l.713-7.064l4.277-6.286l25.47-32.405l15.36-20.092l9.917-11.6l-.065-1.686h-.583L44.07 198.125l-12.055 1.555l-5.185-4.86l.648-7.972l2.463-2.593l20.35-13.999z"/>', 256, 257);
 export const openAiIcon = icon('<path fill="currentColor" d="M20.57 10.18c.45-1.36.3-2.85-.43-4.09a5.03 5.03 0 0 0-5.42-2.42a5.05 5.05 0 0 0-7.14-.38c-.66.59-1.15 1.35-1.43 2.19A4.98 4.98 0 0 0 2.82 7.9c-1.1 1.9-.85 4.29.62 5.91c-.45 1.36-.3 2.85.43 4.09a5.045 5.045 0 0 0 5.43 2.42A5.03 5.03 0 0 0 13.06 22c2.19 0 4.14-1.41 4.81-3.5a4.98 4.98 0 0 0 3.33-2.42a5.04 5.04 0 0 0-.62-5.89Zm-7.52 10.51c-.88 0-1.72-.31-2.4-.87l.12-.07l3.98-2.3c.2-.12.33-.33.33-.57v-5.61l1.68.97s.03.02.03.04v4.65c0 2.07-1.68 3.74-3.75 3.75ZM5 17.25c-.44-.76-.6-1.65-.45-2.51l.12.07l3.99 2.3c.2.12.45.12.65 0l4.87-2.81v1.94s-.01.04-.03.05l-4.03 2.33A3.756 3.756 0 0 1 5 17.25M3.95 8.58a3.7 3.7 0 0 1 1.97-1.64v4.73c0 .23.12.45.32.56l4.85 2.8l-1.68.97h-.06l-4.03-2.32a3.754 3.754 0 0 1-1.37-5.12zm13.83 3.21l-4.86-2.82L14.6 8h.06l4.03 2.33a3.743 3.743 0 0 1 1.37 5.12a3.8 3.8 0 0 1-1.94 1.64v-4.73a.67.67 0 0 0-.34-.56Zm1.68-2.52l-.12-.07l-3.98-2.32a.63.63 0 0 0-.65 0L9.84 9.69V7.75s0-.04.02-.05l4.03-2.32a3.75 3.75 0 0 1 5.12 1.38c.44.76.59 1.64.45 2.51v.02ZM8.93 12.72l-1.68-.97s-.03-.03-.03-.05V7.06c0-2.07 1.68-3.75 3.75-3.74c.87 0 1.72.31 2.39.87l-.12.07l-3.98 2.3c-.2.12-.33.33-.33.57v5.6Zm.91-1.97l2.17-1.25l2.17 1.25v2.5l-2.16 1.25l-2.17-1.25v-2.5Z"/>');
-
 // Menu icons intentionally use filled glyphs from different collections so they
 // can be compared in context before settling on one visual family.
 export const homeIcon = icon('<g fill="currentColor"><path d="M13 15.4C13 13.3258 13 12.2887 13.659 11.6444C14.318 11 15.3787 11 17.5 11C19.6213 11 20.682 11 21.341 11.6444C22 12.2887 22 13.3258 22 15.4V17.6C22 19.6742 22 20.7113 21.341 21.3556C20.682 22 19.6213 22 17.5 22C15.3787 22 14.318 22 13.659 21.3556C13 20.7113 13 19.6742 13 17.6V15.4Z"/><path d="M2 8.6C2 10.6742 2 11.7113 2.65901 12.3556C3.31802 13 4.37868 13 6.5 13C8.62132 13 9.68198 13 10.341 12.3556C11 11.7113 11 10.6742 11 8.6V6.4C11 4.32582 11 3.28873 10.341 2.64437C9.68198 2 8.62132 2 6.5 2C4.37868 2 3.31802 2 2.65901 2.64437C2 3.28873 2 4.32582 2 6.4V8.6Z"/><path d="M13 5.5C13 4.4128 13 3.8692 13.1713 3.44041C13.3996 2.86867 13.8376 2.41443 14.389 2.17761C14.8024 2 15.3266 2 16.375 2H18.625C19.6734 2 20.1976 2 20.611 2.17761C21.1624 2.41443 21.6004 2.86867 21.8287 3.44041C22 3.8692 22 4.4128 22 5.5C22 6.5872 22 7.1308 21.8287 7.55959C21.6004 8.13133 21.1624 8.58557 20.611 8.82239C20.1976 9 19.6734 9 18.625 9H16.375C15.3266 9 14.8024 9 14.389 8.82239C13.8376 8.58557 13.3996 8.13133 13.1713 7.55959C13 7.1308 13 6.5872 13 5.5Z"/><path d="M2 18.5C2 19.5872 2 20.1308 2.17127 20.5596C2.39963 21.1313 2.83765 21.5856 3.38896 21.8224C3.80245 22 4.32663 22 5.375 22H7.625C8.67337 22 9.19755 22 9.61104 21.8224C10.1624 21.5856 10.6004 21.1313 10.8287 20.5596C11 20.1308 11 19.5872 11 18.5C11 17.4128 11 16.8692 10.8287 16.4404C10.6004 15.8687 10.1624 15.4144 9.61104 15.1776C9.19755 15 8.67337 15 7.625 15H5.375C4.32663 15 3.80245 15 3.38896 15.1776C2.83765 15.4144 2.39963 15.8687 2.17127 16.4404C2 16.8692 2 17.4128 2 18.5Z"/></g>');