726 lines
30 KiB
TypeScript
726 lines
30 KiB
TypeScript
/**
|
|
* Project Models section (U9 / KTD-10).
|
|
*
|
|
* Project-scoped model configuration. The project DEFAULT model lane still saves
|
|
* as project settings. The common workflow model lanes (Plan/Triage, Executor,
|
|
* Reviewer) are now proxy-edited here for the active default workflow while
|
|
* persisting through workflow setting values, not tombstoned project keys.
|
|
*/
|
|
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { ModelPreset, Settings } from "@fusion/core";
|
|
import {
|
|
ApiRequestError,
|
|
fetchWorkflowSettingValues,
|
|
updateWorkflowSettingValues,
|
|
type ModelInfo,
|
|
type WorkflowSettingRejection,
|
|
type WorkflowSettingValuesPayload,
|
|
} from "../../../api";
|
|
import { CustomModelDropdown } from "../../CustomModelDropdown";
|
|
import { applyPresetToSelection } from "../../../utils/modelPresets";
|
|
import type { ToastType } from "../../../hooks/useToast";
|
|
import type { ModelLane, SectionBaseProps, SettingsFormState } from "./context";
|
|
|
|
type LaneStatus = "inherited" | "overridden";
|
|
|
|
export interface ProjectModelsSectionModelProps {
|
|
modelLanes: ModelLane[];
|
|
getLaneStatus: (lane: ModelLane) => LaneStatus;
|
|
getLaneValue: (lane: ModelLane) => string;
|
|
updateLaneValue: (lane: ModelLane, value: string) => void;
|
|
resetLaneValue: (lane: ModelLane) => void;
|
|
availableModels: ModelInfo[];
|
|
modelsLoading: boolean;
|
|
favoriteProviders: string[];
|
|
favoriteModels: string[];
|
|
onToggleFavorite: (provider: string) => void;
|
|
onToggleModelFavorite: (modelId: string) => void;
|
|
editingPresetId: string | null;
|
|
setEditingPresetId: (id: string | null) => void;
|
|
presetDraft: ModelPreset | null;
|
|
setPresetDraft: (updater: ModelPreset | null | ((prev: ModelPreset | null) => ModelPreset | null)) => void;
|
|
onSavePresetDraft: () => void;
|
|
confirmDelete: (options: { title: string; message: string; danger?: boolean }) => Promise<boolean>;
|
|
}
|
|
|
|
export interface ProjectModelsSectionProps extends SectionBaseProps {
|
|
scopeBanner: ReactNode;
|
|
models: ProjectModelsSectionModelProps;
|
|
projectId?: string;
|
|
addToast: (message: string, type?: ToastType) => void;
|
|
onOpenWorkflowSettings?: () => void;
|
|
}
|
|
|
|
interface WorkflowModelLane {
|
|
id: "planning" | "execution" | "validator";
|
|
label: string;
|
|
providerKey: string;
|
|
modelKey: string;
|
|
help: string;
|
|
}
|
|
|
|
const WORKFLOW_MODEL_LANES: WorkflowModelLane[] = [
|
|
{
|
|
id: "planning",
|
|
label: "Plan/Triage Model",
|
|
providerKey: "planningProvider",
|
|
modelKey: "planningModelId",
|
|
help: "Used when Fusion plans, breaks down, or triages tasks for this workflow.",
|
|
},
|
|
{
|
|
id: "execution",
|
|
label: "Executor Model",
|
|
providerKey: "executionProvider",
|
|
modelKey: "executionModelId",
|
|
help: "Used by implementation agents running this workflow.",
|
|
},
|
|
{
|
|
id: "validator",
|
|
label: "Reviewer Model",
|
|
providerKey: "validatorProvider",
|
|
modelKey: "validatorModelId",
|
|
help: "Used by review and validation agents for this workflow.",
|
|
},
|
|
];
|
|
|
|
function splitModelValue(value: string): { provider: string | null; modelId: string | null } {
|
|
if (!value) return { provider: null, modelId: null };
|
|
const slashIdx = value.indexOf("/");
|
|
if (slashIdx <= 0) return { provider: null, modelId: null };
|
|
return { provider: value.slice(0, slashIdx), modelId: value.slice(slashIdx + 1) };
|
|
}
|
|
|
|
export function ProjectModelsSection({
|
|
scopeBanner,
|
|
form,
|
|
setForm,
|
|
models,
|
|
projectId,
|
|
addToast,
|
|
onOpenWorkflowSettings,
|
|
}: ProjectModelsSectionProps) {
|
|
const { t } = useTranslation("app");
|
|
const {
|
|
modelLanes,
|
|
getLaneStatus,
|
|
getLaneValue,
|
|
updateLaneValue,
|
|
resetLaneValue,
|
|
availableModels,
|
|
modelsLoading,
|
|
favoriteProviders,
|
|
favoriteModels,
|
|
onToggleFavorite,
|
|
onToggleModelFavorite,
|
|
editingPresetId,
|
|
setEditingPresetId,
|
|
presetDraft,
|
|
setPresetDraft,
|
|
onSavePresetDraft,
|
|
confirmDelete,
|
|
} = models;
|
|
|
|
const presets = form.modelPresets || [];
|
|
const presetOptions = presets.map((preset) => ({ id: preset.id, name: preset.name }));
|
|
const inUsePresetIds = new Set(Object.values(form.defaultPresetBySize || {}).filter(Boolean));
|
|
const defaultWorkflowId = useMemo(() => {
|
|
const raw = typeof form.defaultWorkflowId === "string" ? form.defaultWorkflowId.trim() : "";
|
|
return raw || "builtin:coding";
|
|
}, [form.defaultWorkflowId]);
|
|
const [workflowPayload, setWorkflowPayload] = useState<WorkflowSettingValuesPayload | null>(null);
|
|
const [workflowPending, setWorkflowPending] = useState<Record<string, unknown>>({});
|
|
const [workflowRejections, setWorkflowRejections] = useState<Record<string, WorkflowSettingRejection>>({});
|
|
const [resolvedWorkflowId, setResolvedWorkflowId] = useState(defaultWorkflowId);
|
|
const [workflowLoading, setWorkflowLoading] = useState(false);
|
|
const [workflowSaving, setWorkflowSaving] = useState(false);
|
|
const reqSeq = useRef(0);
|
|
|
|
const loadWorkflowValues = useCallback(async () => {
|
|
const seq = ++reqSeq.current;
|
|
if (!projectId) {
|
|
setWorkflowPayload(null);
|
|
setWorkflowPending({});
|
|
setWorkflowRejections({});
|
|
setResolvedWorkflowId(defaultWorkflowId);
|
|
return;
|
|
}
|
|
setWorkflowLoading(true);
|
|
try {
|
|
let targetWorkflowId = defaultWorkflowId;
|
|
let payload: WorkflowSettingValuesPayload;
|
|
try {
|
|
payload = await fetchWorkflowSettingValues(targetWorkflowId, projectId);
|
|
} catch (err) {
|
|
if (targetWorkflowId === "builtin:coding" || !(err instanceof ApiRequestError) || err.status !== 404) {
|
|
throw err;
|
|
}
|
|
targetWorkflowId = "builtin:coding";
|
|
payload = await fetchWorkflowSettingValues(targetWorkflowId, projectId);
|
|
}
|
|
if (reqSeq.current === seq) {
|
|
setWorkflowPayload(payload);
|
|
setWorkflowPending({});
|
|
setWorkflowRejections({});
|
|
setResolvedWorkflowId(targetWorkflowId);
|
|
}
|
|
} catch {
|
|
if (reqSeq.current === seq) {
|
|
setWorkflowPayload(null);
|
|
setWorkflowRejections({});
|
|
setResolvedWorkflowId(defaultWorkflowId);
|
|
addToast(t("settings.models.workflowLanesLoadFailed", "Failed to load workflow model settings"), "error");
|
|
}
|
|
} finally {
|
|
if (reqSeq.current === seq) setWorkflowLoading(false);
|
|
}
|
|
}, [addToast, defaultWorkflowId, projectId, t]);
|
|
|
|
useEffect(() => {
|
|
void loadWorkflowValues();
|
|
}, [loadWorkflowValues]);
|
|
|
|
const workflowValueFor = useCallback(
|
|
(key: string): unknown => {
|
|
if (Object.prototype.hasOwnProperty.call(workflowPending, key)) {
|
|
return workflowPending[key];
|
|
}
|
|
return workflowPayload?.effective?.[key];
|
|
},
|
|
[workflowPayload, workflowPending],
|
|
);
|
|
|
|
const workflowLaneValue = useCallback(
|
|
(lane: WorkflowModelLane): string => {
|
|
const provider = workflowValueFor(lane.providerKey);
|
|
const modelId = workflowValueFor(lane.modelKey);
|
|
return typeof provider === "string" && provider && typeof modelId === "string" && modelId
|
|
? `${provider}/${modelId}`
|
|
: "";
|
|
},
|
|
[workflowValueFor],
|
|
);
|
|
|
|
const workflowLaneCustomized = useCallback(
|
|
(lane: WorkflowModelLane): boolean => {
|
|
const pendingProvider = workflowPending[lane.providerKey];
|
|
const pendingModel = workflowPending[lane.modelKey];
|
|
if (pendingProvider === null && pendingModel === null) return false;
|
|
if (pendingProvider !== undefined || pendingModel !== undefined) return true;
|
|
return Boolean(
|
|
workflowPayload?.stored &&
|
|
(Object.prototype.hasOwnProperty.call(workflowPayload.stored, lane.providerKey) ||
|
|
Object.prototype.hasOwnProperty.call(workflowPayload.stored, lane.modelKey)),
|
|
);
|
|
},
|
|
[workflowPayload, workflowPending],
|
|
);
|
|
|
|
const updateWorkflowLane = useCallback((lane: WorkflowModelLane, value: string) => {
|
|
const { provider, modelId } = splitModelValue(value);
|
|
setWorkflowPending((current) => ({
|
|
...current,
|
|
[lane.providerKey]: provider,
|
|
[lane.modelKey]: modelId,
|
|
}));
|
|
setWorkflowRejections((current) => {
|
|
if (!current[lane.providerKey] && !current[lane.modelKey]) return current;
|
|
const next = { ...current };
|
|
delete next[lane.providerKey];
|
|
delete next[lane.modelKey];
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
const saveWorkflowModelLanes = useCallback(async () => {
|
|
if (!projectId || Object.keys(workflowPending).length === 0) return;
|
|
setWorkflowSaving(true);
|
|
try {
|
|
const payload = await updateWorkflowSettingValues(resolvedWorkflowId, workflowPending, projectId);
|
|
setWorkflowPayload(payload);
|
|
setWorkflowPending({});
|
|
setWorkflowRejections({});
|
|
addToast(t("settings.models.workflowLanesSaved", "Workflow model settings saved"), "success");
|
|
} catch (err) {
|
|
if (err instanceof ApiRequestError && err.status === 400 && err.details) {
|
|
const rejList = (err.details.rejections as WorkflowSettingRejection[] | undefined) ?? [];
|
|
if (rejList.length > 0) {
|
|
const byId: Record<string, WorkflowSettingRejection> = {};
|
|
for (const r of rejList) byId[r.settingId] = r;
|
|
setWorkflowRejections(byId);
|
|
addToast(t("settings.models.workflowLanesRejected", "Some workflow model settings were rejected"), "error");
|
|
return;
|
|
}
|
|
}
|
|
addToast(t("settings.models.workflowLanesSaveFailed", "Failed to save workflow model settings"), "error");
|
|
} finally {
|
|
setWorkflowSaving(false);
|
|
}
|
|
}, [addToast, projectId, resolvedWorkflowId, t, workflowPending]);
|
|
|
|
const workflowDirty = Object.keys(workflowPending).length > 0;
|
|
|
|
// Only the project DEFAULT model lane survives in this modal. The
|
|
// per-phase execution/planning/validator lanes, their fallbacks, and the
|
|
// title-summarizer lane were hard-moved (U4) onto the workflow settings
|
|
// mechanism — they are no longer project settings keys and must never be
|
|
// renderable or savable here (redirect stub below).
|
|
const projectModelLanes = modelLanes.filter((lane) => lane.laneId === "default");
|
|
const getProjectLaneLabel = (lane: ModelLane) => lane.laneId === "default" ? "Project Default Model" : lane.label;
|
|
const getProjectLaneHelperText = (lane: ModelLane) =>
|
|
lane.laneId === "default"
|
|
? "Project-wide default AI model used when no more specific task or project lane override is set."
|
|
: lane.helperText;
|
|
|
|
return (
|
|
<>
|
|
{scopeBanner}
|
|
|
|
{/* --- Token Cap --- */}
|
|
<h4 className="settings-section-heading">Token Cap</h4>
|
|
<div className="form-group">
|
|
<label htmlFor="tokenCap">Token Cap</label>
|
|
<div className="settings-token-cap-row">
|
|
<input
|
|
id="tokenCap"
|
|
type="number"
|
|
placeholder="No cap"
|
|
value={form.tokenCap ?? ""}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
setForm((f) => ({ ...f, tokenCap: val ? parseInt(val, 10) : null } as SettingsFormState));
|
|
}}
|
|
/>
|
|
{form.tokenCap != null && (
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost btn-sm"
|
|
title="Reset to default (no cap)"
|
|
onClick={() => setForm((f) => ({ ...f, tokenCap: null } as unknown as SettingsFormState))}
|
|
style={{ whiteSpace: "nowrap" }}
|
|
>
|
|
Reset
|
|
</button>
|
|
)}
|
|
</div>
|
|
<small>Automatically compact context when approaching this token count. Leave empty for no cap (compact only on overflow errors). Set a number to proactively compact when reaching this token count.</small>
|
|
</div>
|
|
|
|
{/* --- Project Model Lanes --- */}
|
|
<h4 className="settings-section-heading settings-section-heading--spaced">Model Lanes</h4>
|
|
<p className="settings-description">
|
|
Override global model settings at the project level. Each lane controls a specific AI usage context.
|
|
Unset lanes inherit from the corresponding global lane.
|
|
The Project Default Model is the fallback for this project when a more specific lane is unset.
|
|
</p>
|
|
{modelsLoading ? (
|
|
<div className="settings-empty-state">Loading available models…</div>
|
|
) : availableModels.length === 0 ? (
|
|
<div className="settings-empty-state settings-muted">
|
|
No models available. Configure authentication first.
|
|
</div>
|
|
) : (
|
|
<>
|
|
{projectModelLanes.map((lane) => {
|
|
const status = getLaneStatus(lane);
|
|
const value = getLaneValue(lane);
|
|
const isOverridden = status === "overridden";
|
|
const laneLabel = getProjectLaneLabel(lane);
|
|
|
|
return (
|
|
<div className="form-group" key={lane.laneId}>
|
|
<div className="settings-model-lane-label-row">
|
|
<label htmlFor={`${lane.laneId}Model`}>{laneLabel}</label>
|
|
<span
|
|
className={`settings-lane-badge ${isOverridden ? "settings-lane-badge--override" : "settings-lane-badge--inherited"}`}
|
|
title={isOverridden ? "Explicitly set for this project" : "Inherited from global settings"}
|
|
>
|
|
{isOverridden ? "Override (Project)" : "Inherited (Global)"}
|
|
</span>
|
|
</div>
|
|
<div className="settings-model-lane-control-row">
|
|
<div className="settings-model-lane-control-main">
|
|
<CustomModelDropdown
|
|
id={`${lane.laneId}Model`}
|
|
label={laneLabel}
|
|
models={availableModels}
|
|
value={value}
|
|
onChange={(val) => updateLaneValue(lane, val)}
|
|
placeholder={lane.laneId === "default" ? "Use global default" : "Use global"}
|
|
favoriteProviders={favoriteProviders}
|
|
onToggleFavorite={onToggleFavorite}
|
|
favoriteModels={favoriteModels}
|
|
onToggleModelFavorite={onToggleModelFavorite}
|
|
/>
|
|
</div>
|
|
{isOverridden && (
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost btn-sm"
|
|
title="Reset to inherit from global"
|
|
onClick={() => resetLaneValue(lane)}
|
|
style={{ whiteSpace: "nowrap" }}
|
|
>
|
|
Reset
|
|
</button>
|
|
)}
|
|
</div>
|
|
<small>
|
|
{getProjectLaneHelperText(lane)} Falls back to: {lane.fallbackOrder}.
|
|
</small>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
|
|
{/* --- Default workflow model lanes (workflow setting values) --- */}
|
|
<h4 className="settings-section-heading settings-section-heading--spaced">Default workflow model lanes</h4>
|
|
<p className="settings-description">
|
|
These controls edit model values on this project's default workflow ({resolvedWorkflowId}).
|
|
They use workflow settings as the source of truth.
|
|
</p>
|
|
{!projectId ? (
|
|
<div className="settings-empty-state settings-muted">
|
|
Open a project to edit workflow model lanes.
|
|
</div>
|
|
) : modelsLoading || workflowLoading ? (
|
|
<div className="settings-empty-state">Loading workflow model settings…</div>
|
|
) : availableModels.length === 0 ? (
|
|
<div className="settings-empty-state settings-muted">
|
|
No models available. Configure authentication first.
|
|
</div>
|
|
) : (
|
|
<>
|
|
{WORKFLOW_MODEL_LANES.map((lane) => {
|
|
const value = workflowLaneValue(lane);
|
|
const customized = workflowLaneCustomized(lane);
|
|
const rejection = workflowRejections[lane.providerKey] ?? workflowRejections[lane.modelKey];
|
|
return (
|
|
<div className="form-group" key={lane.id} data-testid={`workflow-model-lane-${lane.id}`}>
|
|
<div className="settings-model-lane-label-row">
|
|
<label htmlFor={`workflow-${lane.id}-model`}>{lane.label}</label>
|
|
<span
|
|
className={`settings-lane-badge ${customized ? "settings-lane-badge--override" : "settings-lane-badge--inherited"}`}
|
|
title={customized ? "Explicitly set on the default workflow" : "Inherited through workflow/global defaults"}
|
|
>
|
|
{customized ? "Override (Workflow)" : "Inherited"}
|
|
</span>
|
|
</div>
|
|
<div className="settings-model-lane-control-row">
|
|
<div className="settings-model-lane-control-main">
|
|
<CustomModelDropdown
|
|
id={`workflow-${lane.id}-model`}
|
|
label={lane.label}
|
|
models={availableModels}
|
|
value={value}
|
|
onChange={(val) => updateWorkflowLane(lane, val)}
|
|
placeholder="Use workflow/global default"
|
|
defaultOptionLabel="Use workflow/global default"
|
|
favoriteProviders={favoriteProviders}
|
|
onToggleFavorite={onToggleFavorite}
|
|
favoriteModels={favoriteModels}
|
|
onToggleModelFavorite={onToggleModelFavorite}
|
|
/>
|
|
</div>
|
|
{customized && (
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost btn-sm"
|
|
title="Reset to inherit"
|
|
onClick={() => updateWorkflowLane(lane, "")}
|
|
style={{ whiteSpace: "nowrap" }}
|
|
>
|
|
Reset
|
|
</button>
|
|
)}
|
|
</div>
|
|
{rejection ? (
|
|
<small className="field-error" role="alert" data-testid={`workflow-model-lane-error-${lane.id}`}>
|
|
{rejection.message}
|
|
</small>
|
|
) : null}
|
|
<small>{lane.help}</small>
|
|
</div>
|
|
);
|
|
})}
|
|
<div className="settings-model-lane-actions">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
data-testid="save-workflow-model-lanes"
|
|
disabled={!workflowDirty || workflowSaving}
|
|
onClick={() => void saveWorkflowModelLanes()}
|
|
>
|
|
Save workflow models
|
|
</button>
|
|
{onOpenWorkflowSettings && (
|
|
<button type="button" className="btn btn-ghost btn-sm" onClick={onOpenWorkflowSettings}>
|
|
Advanced workflow policy
|
|
</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* --- Model Presets --- */}
|
|
<h4 className="settings-section-heading settings-section-heading--spaced">Model Presets</h4>
|
|
<div className="form-group settings-model-presets">
|
|
<label>Configured presets</label>
|
|
{presets.length === 0 ? (
|
|
<div className="settings-empty-state settings-muted">No presets configured yet.</div>
|
|
) : (
|
|
<div className="settings-preset-list">
|
|
{presets.map((preset) => {
|
|
const selection = applyPresetToSelection(preset);
|
|
const summary = `${selection.executorValue || "default"} / ${selection.validatorValue || "default"}`;
|
|
return (
|
|
<div key={preset.id} className="settings-preset-item">
|
|
<div className="settings-preset-item-meta">
|
|
<strong>{preset.name}</strong>
|
|
<span className="settings-muted settings-preset-summary">{summary}</span>
|
|
</div>
|
|
<div className="settings-preset-item-actions">
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm"
|
|
onClick={() => {
|
|
setEditingPresetId(preset.id);
|
|
setPresetDraft({ ...preset });
|
|
}}
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm"
|
|
onClick={async () => {
|
|
if (inUsePresetIds.has(preset.id)) {
|
|
const shouldDelete = await confirmDelete({
|
|
title: t("settings.models.deletePresetTitle", "Delete Preset"),
|
|
message: t("settings.models.deletePresetMessage", "Preset \"{{name}}\" is used in auto-selection. Delete it anyway?", { name: preset.name }),
|
|
danger: true,
|
|
});
|
|
if (!shouldDelete) {
|
|
return;
|
|
}
|
|
}
|
|
setForm((current) => ({
|
|
...current,
|
|
modelPresets: (current.modelPresets || []).filter((entry) => entry.id !== preset.id),
|
|
defaultPresetBySize: Object.fromEntries(
|
|
Object.entries(current.defaultPresetBySize || {}).filter(([, value]) => value !== preset.id),
|
|
) as Settings["defaultPresetBySize"],
|
|
}));
|
|
if (editingPresetId === preset.id) {
|
|
setEditingPresetId(null);
|
|
setPresetDraft(null);
|
|
}
|
|
}}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
{!presetDraft ? (
|
|
<div className="settings-preset-actions">
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm"
|
|
onClick={() => {
|
|
setEditingPresetId(null);
|
|
setPresetDraft({ id: "", name: "", executorProvider: undefined, executorModelId: undefined, validatorProvider: undefined, validatorModelId: undefined });
|
|
}}
|
|
>
|
|
Add Preset
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{presetDraft ? (
|
|
<div className="form-group settings-preset-editor">
|
|
<label>Preset editor</label>
|
|
<div className="settings-preset-editor-fields">
|
|
<div className="form-group">
|
|
<label htmlFor="preset-name">Name</label>
|
|
<input
|
|
id="preset-name"
|
|
type="text"
|
|
value={presetDraft.name}
|
|
onChange={(e) => {
|
|
const name = e.target.value;
|
|
setPresetDraft((current) => current ? { ...current, name } : current);
|
|
}}
|
|
/>
|
|
</div>
|
|
{availableModels.length === 0 ? (
|
|
<small>No models available. Configure authentication first.</small>
|
|
) : (
|
|
<>
|
|
<div className="form-group">
|
|
<label htmlFor="preset-executor-model">Executor model</label>
|
|
<CustomModelDropdown
|
|
id="preset-executor-model"
|
|
label="Preset executor model"
|
|
models={availableModels}
|
|
value={presetDraft.executorProvider && presetDraft.executorModelId ? `${presetDraft.executorProvider}/${presetDraft.executorModelId}` : ""}
|
|
onChange={(val) => {
|
|
if (!val) {
|
|
setPresetDraft((current) => current ? { ...current, executorProvider: undefined, executorModelId: undefined } : current);
|
|
return;
|
|
}
|
|
const slashIdx = val.indexOf("/");
|
|
setPresetDraft((current) => current ? {
|
|
...current,
|
|
executorProvider: val.slice(0, slashIdx),
|
|
executorModelId: val.slice(slashIdx + 1),
|
|
} : current);
|
|
}}
|
|
placeholder="Use default"
|
|
favoriteProviders={favoriteProviders}
|
|
onToggleFavorite={onToggleFavorite}
|
|
favoriteModels={favoriteModels}
|
|
onToggleModelFavorite={onToggleModelFavorite}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="preset-validator-model">Reviewer model</label>
|
|
<CustomModelDropdown
|
|
id="preset-validator-model"
|
|
label="Preset reviewer model"
|
|
models={availableModels}
|
|
value={presetDraft.validatorProvider && presetDraft.validatorModelId ? `${presetDraft.validatorProvider}/${presetDraft.validatorModelId}` : ""}
|
|
onChange={(val) => {
|
|
if (!val) {
|
|
setPresetDraft((current) => current ? { ...current, validatorProvider: undefined, validatorModelId: undefined } : current);
|
|
return;
|
|
}
|
|
const slashIdx = val.indexOf("/");
|
|
setPresetDraft((current) => current ? {
|
|
...current,
|
|
validatorProvider: val.slice(0, slashIdx),
|
|
validatorModelId: val.slice(slashIdx + 1),
|
|
} : current);
|
|
}}
|
|
placeholder="Use default"
|
|
favoriteProviders={favoriteProviders}
|
|
onToggleFavorite={onToggleFavorite}
|
|
favoriteModels={favoriteModels}
|
|
onToggleModelFavorite={onToggleModelFavorite}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="modal-actions settings-preset-editor-actions">
|
|
<button type="button" className="btn btn-primary btn-sm" onClick={onSavePresetDraft}>{t("settings.models.savePreset", "Save preset")}</button>
|
|
<button type="button" className="btn btn-sm" onClick={() => { setEditingPresetId(null); setPresetDraft(null); }}>{t("settings.actions.cancel", "Cancel")}</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="form-group settings-preset-auto-select">
|
|
<label htmlFor="autoSelectModelPreset" className="checkbox-label">
|
|
<input
|
|
id="autoSelectModelPreset"
|
|
type="checkbox"
|
|
checked={form.autoSelectModelPreset || false}
|
|
onChange={(e) => setForm((current) => ({ ...current, autoSelectModelPreset: e.target.checked }))}
|
|
/>
|
|
Auto-select preset based on task size
|
|
</label>
|
|
</div>
|
|
|
|
{form.autoSelectModelPreset ? (
|
|
<div className="settings-preset-size-grid">
|
|
{(["S", "M", "L"] as const).map((sizeKey) => (
|
|
<div className="form-group settings-preset-size-row" key={sizeKey}>
|
|
<label htmlFor={`preset-size-${sizeKey}`}>
|
|
{sizeKey === "S" ? "Small tasks (S):" : sizeKey === "M" ? "Medium tasks (M):" : "Large tasks (L):"}
|
|
</label>
|
|
<select
|
|
id={`preset-size-${sizeKey}`}
|
|
value={form.defaultPresetBySize?.[sizeKey] || ""}
|
|
onChange={(e) => {
|
|
const value = e.target.value || undefined;
|
|
setForm((current) => ({
|
|
...current,
|
|
defaultPresetBySize: {
|
|
...(current.defaultPresetBySize || {}),
|
|
[sizeKey]: value,
|
|
},
|
|
}));
|
|
}}
|
|
>
|
|
<option value="">No preset</option>
|
|
{presetOptions.map((preset) => (
|
|
<option key={preset.id} value={preset.id}>{preset.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* --- AI Title and Git Commit Message Summarization --- */}
|
|
<h4 className="settings-section-heading settings-section-heading--spaced">
|
|
AI Title and Git Commit Message Summarization
|
|
</h4>
|
|
<p className="settings-description">
|
|
Configures the model used for two short-summary jobs:
|
|
auto-generating task titles from long descriptions, and
|
|
generating merge commit summaries from step commits and diff stats.
|
|
</p>
|
|
<div className="form-group">
|
|
<label htmlFor="autoSummarizeTitles" className="checkbox-label">
|
|
<input
|
|
id="autoSummarizeTitles"
|
|
type="checkbox"
|
|
checked={form.autoSummarizeTitles || false}
|
|
onChange={(e) => setForm((f) => ({ ...f, autoSummarizeTitles: e.target.checked }))}
|
|
/>
|
|
Auto-summarize long descriptions as titles
|
|
</label>
|
|
<small>
|
|
When enabled, tasks created without a title but with descriptions over 200 characters
|
|
will automatically get an AI-generated title (max 60 characters). The same model is
|
|
also used to generate fallback merge commit message bodies when the branch's commit
|
|
log is empty (e.g. squash merges with no unique commits), and GitHub tracking issue
|
|
titles when a tracked task has no title yet.
|
|
</small>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="useAiMergeCommitSummary" className="checkbox-label">
|
|
<input
|
|
id="useAiMergeCommitSummary"
|
|
type="checkbox"
|
|
checked={form.useAiMergeCommitSummary || false}
|
|
onChange={(e) => setForm((f) => ({ ...f, useAiMergeCommitSummary: e.target.checked }))}
|
|
/>
|
|
AI merge commit summaries
|
|
</label>
|
|
<small>
|
|
When enabled, merge commit messages include an AI-generated subject plus body summary (narrative + bullets + diff-stat) instead of just listing step commit subjects. Uses the title summarization model.
|
|
</small>
|
|
</div>
|
|
|
|
{(form.autoSummarizeTitles || form.useAiMergeCommitSummary || form.githubTrackingEnabledByDefault || false) && (
|
|
<p className="settings-description">
|
|
{t(
|
|
"settings.movedStub.summarizerModelInline",
|
|
"The model used for summarization now lives on the workflow (title summarizer lane). Open workflow settings to choose it.",
|
|
)}
|
|
</p>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ProjectModelsSection;
|