+ )
+}
+
+type AISettingsProps = {
+ // Called with whether the form holds unsaved changes.
+ onDirtyChange: (dirty: boolean) => void
+}
+
+// AIAssistantCard is the AI assistant's fields as a card, for the desktop
+// settings (handoff mock 2e): the system prompt grows to fill the card.
+export function AIAssistantCard({ onDirtyChange }: AISettingsProps) {
+ const titleId = useId()
+ return (
+
+
+
+ AI assistant
+
+ Admin
+
+
+
+ )
+}
+
+// AIAssistantSettings is the AI assistant's form once its settings load.
+function AIAssistantSettings({ onDirtyChange }: AISettingsProps) {
+ const settings = useAISettings()
+ return (
+ <>
+ {settings.isPending && }
+ {settings.isError && (
+ void settings.refetch()}>
+ AI settings could not load: {settings.error.message}
+
+ )}
+ {settings.isSuccess && }
+
+ )
+}
+
+function Header() {
+ const navigate = useNavigate()
+ return (
+
+ void navigate('/settings')}>
+
+
+
+
Settings · Admin
+
AI assistant
+
+
+ )
+}
+
+type Draft = {
+ provider: AIProvider
+ base_url: string
+ model: string
+ temperature: number
+ system_prompt: string
+}
+
+function draftOf(saved: AISettings): Draft {
+ return {
+ provider: saved.provider,
+ base_url: saved.base_url,
+ model: saved.model,
+ temperature: saved.temperature,
+ system_prompt: saved.system_prompt ?? '',
+ }
+}
+
+// patchOf is the PATCH body for the fields draft changes.
+function patchOf(saved: AISettings, draft: Draft): AISettingsPatch {
+ const before = draftOf(saved)
+ const patch: AISettingsPatch = {}
+ if (draft.provider !== before.provider) patch.provider = draft.provider
+ if (draft.base_url !== before.base_url) patch.base_url = draft.base_url
+ if (draft.model !== before.model) patch.model = draft.model
+ if (draft.temperature !== before.temperature) patch.temperature = draft.temperature
+ if (draft.system_prompt !== before.system_prompt) patch.system_prompt = draft.system_prompt
+ return patch
+}
+
+type AISettingsFormProps = AISettingsProps & {
+ saved: AISettings
+}
+
+function AISettingsForm({ saved, onDirtyChange }: AISettingsFormProps) {
+ const [draft, setDraft] = useState(() => draftOf(saved))
+ const [typingModel, setTypingModel] = useState(false)
+ const [confirmingReset, setConfirmingReset] = useState(false)
+ const save = useSaveAISettings()
+ const resetPrompt = useResetAIPrompt()
+ const patch = patchOf(saved, draft)
+ const dirty = Object.keys(patch).length > 0
+ const providerChanged = draft.provider !== saved.provider
+ // The server keeps a stored key's provider and base URL fixed until the
+ // key is removed.
+ const keyLocked = saved.api_key_last4 !== null && (providerChanged || draft.base_url !== saved.base_url)
+ const temperatureId = useId()
+ // The model list is the saved provider's, so it is asked for only while
+ // that provider is chosen and has the key it needs.
+ const canList =
+ !providerChanged && (aiKeyPolicy[saved.provider] !== 'required' || saved.api_key_last4 !== null)
+ const models = useAIModels(canList)
+ const listed = canList && models.isSuccess ? models.data : []
+ const typedModel = typingModel || !(draft.model === '' || listed.some((m) => m.id === draft.model))
+
+ useEffect(() => {
+ onDirtyChange(dirty)
+ }, [dirty, onDirtyChange])
+ useEffect(() => () => onDirtyChange(false), [onDirtyChange])
+
+ function edit(change: Partial) {
+ save.reset()
+ setDraft((current) => ({ ...current, ...change }))
+ }
+
+ function chooseProvider(provider: AIProvider) {
+ setTypingModel(provider !== saved.provider)
+ if (provider === saved.provider) {
+ edit({ provider, base_url: saved.base_url, model: saved.model })
+ return
+ }
+ // A fixed-URL preset refuses any other base URL, and the old model is
+ // another provider's: the household types the new one.
+ edit({ provider, base_url: providersWithBaseURL.has(provider) ? draft.base_url : '', model: '' })
+ }
+
+ function onSave() {
+ save.mutate(patch, {
+ onSuccess: (settings) => {
+ setDraft(draftOf(settings))
+ setTypingModel(false)
+ },
+ })
+ }
+
+ function onConfirmReset() {
+ resetPrompt.mutate(undefined, {
+ onSuccess: (settings) => {
+ setDraft((current) => ({ ...current, system_prompt: settings.system_prompt ?? '' }))
+ setConfirmingReset(false)
+ },
+ })
+ }
+
+ return (
+
+ )
+}
+
+// formatVerifiedDate turns key_verified_at into the handoff's "Oct 1".
+export function formatVerifiedDate(timestamp: string): string {
+ const date = new Date(timestamp)
+ if (Number.isNaN(date.getTime())) throw new Error(`key_verified_at "${timestamp}" is not a timestamp`)
+ return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' }).format(date)
+}
+
+// keyLockedGuidance is how to change the provider or base URL while a key
+// is stored.
+const keyLockedGuidance =
+ 'An API key is stored. Remove it (Replace → Remove key) before changing the provider or base URL.'
+
+// APIKey stays mounted whatever provider the draft names, so a key stored
+// (and the verify that follows it) completes even if the household changes
+// the provider meanwhile, and a stored key can always be removed.
+function APIKey({ saved, draftProvider }: { saved: AISettings; draftProvider: AIProvider }) {
+ const [replacing, setReplacing] = useState(false)
+ const [key, setKey] = useState('')
+ const store = useSetAIKey()
+ const verify = useVerifyAIKey()
+ const labelId = useId()
+ const sheetTitleId = useId()
+ const last4 = saved.api_key_last4
+ const providerChanged = draftProvider !== saved.provider
+
+ function open() {
+ store.reset()
+ setReplacing(true)
+ }
+
+ // close keeps the store mutation: a key already sent is still stored and
+ // verified after the sheet is dismissed.
+ function close() {
+ setReplacing(false)
+ setKey('')
+ }
+
+ function onStore() {
+ verify.reset()
+ store.mutate(key, {
+ onSuccess: () => {
+ close()
+ verify.mutate(undefined)
+ },
+ })
+ }
+
+ function onRemove() {
+ verify.reset()
+ store.mutate('', { onSuccess: close })
+ }
+
+ const storeError = store.isError && (
+
+ )
+}
+
+type KeyStatusProps = {
+ saved: AISettings
+ verify: ReturnType
+}
+
+// KeyStatus is the line under the key: verifying, the verify error, when it
+// was verified, or that it has not been.
+function KeyStatus({ saved, verify }: KeyStatusProps) {
+ if (saved.api_key_last4 === null) return null
+ if (verify.isPending) return