feat(assistant): trip assistant chat with your own AI connection

Adds an in-app assistant that reads and plans the open trip. Users connect their own provider (Sign in with ChatGPT, or an Anthropic, OpenAI, Gemini or OpenRouter key) or use the one the admin set up, including a custom OpenAI-compatible server. It is an addon and only shows while a connection is usable. The chat runs on the existing MCP tools, pinned to the trip. Every change is held as a change card the user applies or discards, and applied changes can be undone. On the desktop it is a floating window that can be moved and resized; on the phone it is fullscreen. Search results show as place cards that can go onto a day, weather lookups as a strip, proposed places as ghost markers on the map with a before/after switch, and an answer can be shared into the trip chat. Booking files can be dropped in and are read into change cards.
2026-10-23 23:46:35 +00:00 · 2026-10-21 18:52:44 +02:00
parent bb3c0151d5
commit 214984f398
505 changed files with 51841 additions and 227 deletions
@@ -17,6 +17,7 @@ import { SettingsCard, SettingsHint, StatusPill, SETTINGS_BUTTON_PRIMARY } from
 import { type Addon, type CollabFeatures, ANTHROPIC_HINT, COLLAB_SUB_FEATURES, getAddonLabel, MASKED, RECOMMENDED_MODELS } from './addons/addonModel'
 import { useAddonManager } from './addons/useAddonManager'
 import { useLlmParsingConfig } from './addons/useLlmParsingConfig'
+import AiAdminConfig from './addons/AiAdminConfig'
 import { ImmichIcon, SynologyIcon } from './addons/PhotoProviderIcons'
 import WandererMark from '../Tours/wanderer/WandererMark'

@@ -182,6 +183,10 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
    if (addon.id === 'llm_parsing' && addon.enabled) {
      return <LlmParsingConfig addon={addon} />
    }
+    // The assistant's settings and the connection everyone runs on, the same way.
+    if (addon.id === 'ai_assistant' && addon.enabled) {
+      return <AiAdminConfig />
+    }
    return null
  }

@@ -0,0 +1,100 @@
+// FE-COMP-AI-ADMIN-001 to FE-COMP-AI-ADMIN-004: the AI assistant's form on its addon tile.
+import userEvent from '@testing-library/user-event';
+import type { AiAdminConnectionResponse, AiAdminSettings } from '@trek/shared';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '../../../../tests/helpers/render';
+import { useAssistantStore } from '../../../store/assistantStore';
+
+const repo = vi.hoisted(() => ({
+  status: vi.fn(),
+  adminSettings: vi.fn(),
+  saveAdminSettings: vi.fn(),
+  adminConnection: vi.fn(),
+  saveAdminConnection: vi.fn(),
+  removeAdminConnection: vi.fn(),
+  adminModels: vi.fn(),
+}));
+vi.mock('../../../repo/aiConnectionsRepo', () => ({ aiConnectionsRepo: repo }));
+
+const { default: AiAdminConfig } = await import('./AiAdminConfig');
+
+const SETTINGS: AiAdminSettings = { policy: 'instance_or_user', dailyTurns: 50, retention: { mode: 'days', days: 90 } };
+const LIVE: AiAdminConnectionResponse = {
+  connection: {
+    scope: 'instance',
+    kind: 'openai',
+    model: 'gpt-5.5',
+    hint: '…9f3c',
+    status: 'ok',
+    host: 'api.openai.com',
+    baseUrl: null,
+  },
+  prefill: null,
+};
+
+function renderConfig() {
+  return render(
+    <ul>
+      <AiAdminConfig />
+    </ul>
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  useAssistantStore.setState({ status: null });
+  repo.status.mockRejectedValue(new Error('not needed'));
+  repo.adminSettings.mockResolvedValue(SETTINGS);
+  repo.saveAdminSettings.mockImplementation(async (next: AiAdminSettings) => next);
+  repo.adminConnection.mockResolvedValue({ connection: null, prefill: null });
+  repo.removeAdminConnection.mockResolvedValue(undefined);
+  repo.adminModels.mockResolvedValue([{ id: 'gpt-5.5', label: 'GPT-5.5', supportsTools: true }]);
+});
+
+describe('AiAdminConfig', () => {
+  it('FE-COMP-AI-ADMIN-001: shows who pays, the setup for everyone, the daily limit and the retention', async () => {
+    renderConfig();
+    expect(await screen.findByRole('radio', { name: 'I pay, own allowed' })).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByText('Everyone uses the connection below unless they connect their own.')).toBeInTheDocument();
+    expect(screen.getByText('No connection yet.')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Own server/ })).toBeInTheDocument();
+    expect(screen.queryByText('Sign in with ChatGPT')).not.toBeInTheDocument();
+    expect(screen.getByDisplayValue('50')).toBeInTheDocument();
+    expect(screen.getByText('Keep chats')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-AI-ADMIN-002: "Everyone uses their own" drops the connection and the limit', async () => {
+    const user = userEvent.setup();
+    renderConfig();
+    await user.click(await screen.findByRole('radio', { name: 'Everyone uses their own account' }));
+    await waitFor(() => expect(screen.queryByText('No connection yet.')).not.toBeInTheDocument());
+    expect(repo.saveAdminSettings).toHaveBeenCalledWith({ ...SETTINGS, policy: 'user' });
+    expect(screen.queryByText('Messages per person per day')).not.toBeInTheDocument();
+    expect(screen.getByText('Everyone connects their own provider. Nothing is charged to you.')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-AI-ADMIN-003: a live connection shows its provider and opens the setup only to change it', async () => {
+    const user = userEvent.setup();
+    repo.adminConnection.mockResolvedValue(LIVE);
+    renderConfig();
+    expect(await screen.findByText('OpenAI')).toBeInTheDocument();
+    expect(screen.getByText('…9f3c')).toBeInTheDocument();
+    expect(screen.queryByText('What would you like to chat with?')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Change' }));
+    expect(screen.getByText('What would you like to chat with?')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(screen.getByText('OpenAI')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-AI-ADMIN-004: removing the connection asks first', async () => {
+    const user = userEvent.setup();
+    repo.adminConnection.mockResolvedValueOnce(LIVE).mockResolvedValue({ connection: null, prefill: null });
+    renderConfig();
+    await user.click(await screen.findByRole('button', { name: 'Remove connection' }));
+    expect(screen.getByText('Disconnect OpenAI? Your chats stay.')).toBeInTheDocument();
+    const buttons = screen.getAllByRole('button', { name: 'Remove connection' });
+    await user.click(buttons[buttons.length - 1]);
+    expect(await screen.findByText('No connection yet.')).toBeInTheDocument();
+    expect(repo.removeAdminConnection).toHaveBeenCalledTimes(1);
+  });
+});
@@ -0,0 +1,190 @@
+import { Check, Loader2 } from 'lucide-react';
+import React, { useId } from 'react';
+import { useTranslation } from '../../../i18n';
+import AiConnectPanel, { ProviderMark } from '../../Settings/ai/AiConnectPanel';
+import { CONNECTION_STATUS } from '../../Settings/ai/aiConnectModel';
+import { SETTINGS_BUTTON, SETTINGS_BUTTON_DANGER, SettingsHint, StatusPill } from '../../Settings/settingsKit';
+import ConfirmDialog from '../../shared/ConfirmDialog';
+import CustomSelect from '../../shared/CustomSelect';
+import { fs } from '../../shared/DialogShell';
+import { NumericInput } from '../../shared/NumericInput';
+import { EditorField, INPUT } from '../../shared/dialogParts';
+import { POLICY_CHOICES, useAiAdminConfig } from './useAiAdminConfig';
+
+type AiAdmin = ReturnType<typeof useAiAdminConfig>;
+
+const EYEBROW = 'font-geist font-bold uppercase tracking-[.08em] text-content-faint';
+
+/** Who pays, as three rows to pick one from: the labels are too long for a segmented track in a shelf. */
+function PolicyChoice({ A }: { A: AiAdmin }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col gap-2">
+      <span className={EYEBROW} style={fs(9.5)}>
+        {t('assistant.admin.policy')}
+      </span>
+      <div role="radiogroup" aria-label={t('assistant.admin.policy')} className="flex flex-col gap-1.5">
+        {POLICY_CHOICES.map((choice) => {
+          const on = A.policy === choice.value;
+          return (
+            <button
+              key={choice.value}
+              type="button"
+              role="radio"
+              aria-checked={on}
+              onClick={() => A.setPolicy(choice.value)}
+              className={`flex items-center gap-2 rounded-[10px] border px-3 py-2 text-start transition-colors ${on ? 'border-[color:var(--text-primary)] bg-surface-card shadow-sm' : 'border-edge bg-surface-card hover:border-edge-secondary'}`}
+            >
+              <span
+                className={`min-w-0 flex-1 font-medium ${on ? 'text-content' : 'text-content-muted'}`}
+                style={fs(12.5, 'body')}
+              >
+                {t(choice.labelKey)}
+              </span>
+              {on && <Check size={14} strokeWidth={2.4} className="flex-none text-content" />}
+            </button>
+          );
+        })}
+      </div>
+      {A.policyHintKey && <SettingsHint>{t(A.policyHintKey)}</SettingsHint>}
+    </div>
+  );
+}
+
+/** The connection everyone runs on, once set up: who answers, its model, and replacing or removing it. */
+function LiveConnection({ A }: { A: AiAdmin }) {
+  const { t } = useTranslation();
+  const { live, provider, models, busy, setModel, replace, askRemove } = A.instance;
+  if (!live) return null;
+  const status = CONNECTION_STATUS[live.status];
+  return (
+    <div
+      className={`flex flex-col gap-3 rounded-[12px] border border-edge-faint bg-surface-card p-3 ${busy ? 'opacity-60' : ''}`}
+    >
+      <div className="flex items-center gap-2.5">
+        <ProviderMark kind={live.kind} />
+        <div className="min-w-0 flex-1">
+          <p className="m-0 truncate font-medium text-content" style={fs(13, 'body')}>
+            {provider}
+          </p>
+          <p className="m-0 truncate font-geist text-content-faint" style={fs(11)}>
+            {live.hint ?? live.host}
+          </p>
+        </div>
+        <StatusPill tone={status.tone}>{t(status.labelKey)}</StatusPill>
+      </div>
+      {live.status === 'ok' && (
+        <EditorField label={t('assistant.connect.model')} hint={t('assistant.connect.modelHint')}>
+          <CustomSelect
+            ariaLabel={t('assistant.connect.model')}
+            value={live.model}
+            onChange={(v) => setModel(String(v))}
+            options={models}
+            size="sm"
+            disabled={busy}
+            searchable={models.length > 8}
+          />
+        </EditorField>
+      )}
+      <div className="flex flex-wrap gap-2" style={fs(12.5, 'body')}>
+        <button type="button" onClick={replace} disabled={busy} className={SETTINGS_BUTTON}>
+          {t('common.change')}
+        </button>
+        <button type="button" onClick={askRemove} disabled={busy} className={SETTINGS_BUTTON_DANGER}>
+          {t('assistant.admin.connectionRemove')}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function InstanceConnection({ A }: { A: AiAdmin }) {
+  const { t } = useTranslation();
+  const { live, connection, replacing, cancelReplace, onConnected } = A.instance;
+  return (
+    <div className="flex flex-col gap-2.5">
+      <span className={EYEBROW} style={fs(9.5)}>
+        {t('assistant.admin.connection')}
+      </span>
+      {!replacing && <LiveConnection A={A} />}
+      {!live && <SettingsHint>{t('assistant.admin.connectionNone')}</SettingsHint>}
+      {A.showPanel && (
+        <AiConnectPanel scope="instance" onConnected={onConnected} prefill={connection?.prefill ?? null} />
+      )}
+      {replacing && (
+        <button
+          type="button"
+          onClick={cancelReplace}
+          className={`${SETTINGS_BUTTON} self-start`}
+          style={fs(12.5, 'body')}
+        >
+          {t('common.cancel')}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The AI assistant's settings on its addon tile, as a form in the shelf like
+ * AI parsing's: who pays, the connection for everyone, the daily limit while
+ * the instance pays, and how long chats are kept. Each change saves at once.
+ */
+export default function AiAdminConfig(): React.ReactElement {
+  const { t } = useTranslation();
+  const A = useAiAdminConfig();
+  const fieldId = useId();
+
+  if (!A.loaded) {
+    return (
+      <li className="grid place-items-center p-4">
+        <Loader2 size={18} className="animate-spin text-content-faint" />
+      </li>
+    );
+  }
+
+  return (
+    <li className="flex flex-col gap-4 p-3">
+      <PolicyChoice A={A} />
+      {A.instancePays && <InstanceConnection A={A} />}
+      {A.instancePays && (
+        <EditorField
+          label={t('assistant.admin.dailyLimit')}
+          htmlFor={`${fieldId}-daily`}
+          hint={t('assistant.admin.dailyLimitHint')}
+        >
+          <NumericInput
+            id={`${fieldId}-daily`}
+            mode="integer"
+            className={`${INPUT} tabular-nums`}
+            value={A.dailyDraft}
+            onValueChange={A.setDailyDraft}
+            onBlur={A.commitDailyLimit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') e.currentTarget.blur();
+            }}
+          />
+        </EditorField>
+      )}
+      <EditorField label={t('assistant.admin.retention')}>
+        <CustomSelect
+          ariaLabel={t('assistant.admin.retention')}
+          value={A.retention}
+          onChange={(v) => A.setRetention(String(v))}
+          options={A.retentionOptions}
+          size="sm"
+        />
+      </EditorField>
+
+      <ConfirmDialog
+        isOpen={A.instance.confirmingRemove}
+        onClose={A.instance.cancelRemove}
+        onConfirm={A.instance.remove}
+        title={t('assistant.admin.connectionRemove')}
+        message={t('assistant.connect.disconnectConfirm', { provider: A.instance.provider })}
+        confirmLabel={t('assistant.admin.connectionRemove')}
+        danger
+      />
+    </li>
+  );
+}
@@ -0,0 +1,167 @@
+// FE-HOOK-AI-ADMIN-001 to FE-HOOK-AI-ADMIN-007: the AI assistant's settings and connection for everyone.
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { AiAdminConnectionResponse, AiAdminSettings } from '@trek/shared';
+import { MASKED_SETTING_VALUE } from '@trek/shared';
+import { createElement, type ReactNode } from 'react';
+import { MemoryRouter } from 'react-router';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { TranslationProvider } from '../../../i18n/TranslationContext';
+import { useAssistantStore } from '../../../store/assistantStore';
+
+const repo = vi.hoisted(() => ({
+  status: vi.fn(),
+  adminSettings: vi.fn(),
+  saveAdminSettings: vi.fn(),
+  adminConnection: vi.fn(),
+  saveAdminConnection: vi.fn(),
+  removeAdminConnection: vi.fn(),
+  adminModels: vi.fn(),
+}));
+const toast = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn() }));
+vi.mock('../../../repo/aiConnectionsRepo', () => ({ aiConnectionsRepo: repo }));
+vi.mock('../../shared/Toast', () => ({ useToast: () => toast }));
+
+const { useAiAdminConfig } = await import('./useAiAdminConfig');
+
+const wrapper = ({ children }: { children: ReactNode }) =>
+  createElement(
+    MemoryRouter,
+    { initialEntries: ['/admin?tab=addons'] },
+    createElement(TranslationProvider, null, children)
+  );
+
+const SETTINGS: AiAdminSettings = { policy: 'instance_or_user', dailyTurns: 50, retention: { mode: 'days', days: 90 } };
+const NONE: AiAdminConnectionResponse = { connection: null, prefill: null };
+const LIVE: AiAdminConnectionResponse = {
+  connection: {
+    scope: 'instance',
+    kind: 'anthropic',
+    model: 'claude-sonnet',
+    hint: '…a1b2',
+    status: 'ok',
+    host: 'api.anthropic.com',
+    baseUrl: null,
+  },
+  prefill: null,
+};
+
+async function renderLoaded() {
+  const view = renderHook(() => useAiAdminConfig(), { wrapper });
+  await waitFor(() => expect(view.result.current.loaded).toBe(true));
+  return view;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  useAssistantStore.setState({ status: null });
+  repo.status.mockRejectedValue(new Error('not needed'));
+  repo.adminSettings.mockResolvedValue(SETTINGS);
+  repo.saveAdminSettings.mockImplementation(async (next: AiAdminSettings) => next);
+  repo.adminConnection.mockResolvedValue(NONE);
+  repo.saveAdminConnection.mockResolvedValue(LIVE);
+  repo.removeAdminConnection.mockResolvedValue(undefined);
+  repo.adminModels.mockResolvedValue([{ id: 'claude-sonnet', label: 'Claude Sonnet', supportsTools: true }]);
+});
+
+describe('useAiAdminConfig', () => {
+  it('FE-HOOK-AI-ADMIN-001: loads the settings and, without a connection, opens the setup for everyone', async () => {
+    const { result } = await renderLoaded();
+    expect(result.current.policy).toBe('instance_or_user');
+    expect(result.current.policyHintKey).toBe('assistant.admin.policy.instanceOrUserHint');
+    expect(result.current.instancePays).toBe(true);
+    expect(result.current.showPanel).toBe(true);
+    expect(result.current.dailyDraft).toBe('50');
+    expect(result.current.retention).toBe('90');
+    expect(result.current.retentionOptions.map((o) => o.label)).toEqual(['30 days', '90 days', '365 days', 'Forever']);
+    expect(repo.status).toHaveBeenCalled();
+  });
+
+  it('FE-HOOK-AI-ADMIN-002: a policy change saves at once, and a refused one is taken back', async () => {
+    const { result } = await renderLoaded();
+    await act(async () => result.current.setPolicy('user'));
+    await waitFor(() => expect(result.current.policy).toBe('user'));
+    expect(repo.saveAdminSettings).toHaveBeenCalledWith({ ...SETTINGS, policy: 'user' });
+    expect(result.current.instancePays).toBe(false);
+
+    repo.saveAdminSettings.mockRejectedValueOnce(new Error('nope'));
+    await act(async () => result.current.setPolicy('instance'));
+    await waitFor(() => expect(toast.error).toHaveBeenCalledTimes(1));
+    expect(result.current.policy).toBe('user');
+  });
+
+  it('FE-HOOK-AI-ADMIN-003: the daily limit is kept within 1 to 10000 and saved when the field is left', async () => {
+    const { result } = await renderLoaded();
+    act(() => result.current.setDailyDraft('20000'));
+    await act(async () => result.current.commitDailyLimit());
+    expect(result.current.dailyDraft).toBe('10000');
+    expect(repo.saveAdminSettings).toHaveBeenCalledWith({ ...SETTINGS, dailyTurns: 10000 });
+
+    vi.clearAllMocks();
+    act(() => result.current.setDailyDraft(''));
+    await act(async () => result.current.commitDailyLimit());
+    expect(result.current.dailyDraft).toBe('10000');
+    expect(repo.saveAdminSettings).not.toHaveBeenCalled();
+  });
+
+  it('FE-HOOK-AI-ADMIN-004: a retention period set elsewhere stays selectable', async () => {
+    repo.adminSettings.mockResolvedValue({ ...SETTINGS, retention: { mode: 'days', days: 120 } });
+    const { result } = await renderLoaded();
+    expect(result.current.retentionOptions.map((o) => o.value)).toEqual(['30', '90', '120', '365', 'forever']);
+    await act(async () => result.current.setRetention('forever'));
+    expect(repo.saveAdminSettings).toHaveBeenCalledWith({ ...SETTINGS, retention: { mode: 'forever' } });
+  });
+
+  it('FE-HOOK-AI-ADMIN-005: another model keeps the stored key by sending the mask', async () => {
+    repo.adminConnection.mockResolvedValue(LIVE);
+    const { result } = await renderLoaded();
+    expect(result.current.showPanel).toBe(false);
+    await waitFor(() => expect(result.current.instance.models).toHaveLength(1));
+    await act(async () => result.current.instance.setModel('claude-haiku'));
+    await waitFor(() => expect(repo.saveAdminConnection).toHaveBeenCalledTimes(1));
+    expect(repo.saveAdminConnection).toHaveBeenCalledWith({
+      kind: 'anthropic',
+      apiKey: MASKED_SETTING_VALUE,
+      model: 'claude-haiku',
+    });
+  });
+
+  it('FE-HOOK-AI-ADMIN-006: an own server without a key sends none', async () => {
+    repo.adminConnection.mockResolvedValue({
+      connection: {
+        scope: 'instance',
+        kind: 'custom',
+        model: 'llama3',
+        hint: null,
+        status: 'ok',
+        host: 'ollama:11434',
+        baseUrl: 'http://ollama:11434/v1',
+      },
+      prefill: null,
+    });
+    const { result } = await renderLoaded();
+    await act(async () => result.current.instance.setModel('qwen3:8b'));
+    await waitFor(() => expect(repo.saveAdminConnection).toHaveBeenCalledTimes(1));
+    expect(repo.saveAdminConnection).toHaveBeenCalledWith({
+      kind: 'custom',
+      baseUrl: 'http://ollama:11434/v1',
+      model: 'qwen3:8b',
+    });
+  });
+
+  it('FE-HOOK-AI-ADMIN-007: removing asks first, then shows the setup again; replacing opens it beside the old one', async () => {
+    repo.adminConnection.mockResolvedValueOnce(LIVE).mockResolvedValue(NONE);
+    const { result } = await renderLoaded();
+    act(() => result.current.instance.replace());
+    expect(result.current.showPanel).toBe(true);
+    act(() => result.current.instance.cancelReplace());
+    expect(result.current.showPanel).toBe(false);
+
+    act(() => result.current.instance.askRemove());
+    expect(result.current.instance.confirmingRemove).toBe(true);
+    act(() => result.current.instance.remove());
+    await waitFor(() => expect(result.current.instance.live).toBeNull());
+    expect(repo.removeAdminConnection).toHaveBeenCalledTimes(1);
+    expect(result.current.instance.confirmingRemove).toBe(false);
+    expect(result.current.showPanel).toBe(true);
+  });
+});
@@ -0,0 +1,218 @@
+import {
+  MASKED_SETTING_VALUE,
+  type AiAdminConnectionResponse,
+  type AiAdminSettings,
+  type AiInstanceConnectionRequest,
+  type AiPolicy,
+  type AiRetention,
+} from '@trek/shared';
+import { useEffect, useEffectEvent, useState } from 'react';
+import { useTranslation } from '../../../i18n';
+import { aiConnectionsRepo } from '../../../repo/aiConnectionsRepo';
+import { useAssistantStore } from '../../../store/assistantStore';
+import { providerLabel } from '../../Assistant/providerCatalog';
+import { connectErrorKey } from '../../Settings/ai/aiConnectModel';
+import { useOpenrouterReturn } from '../../Settings/ai/useAiConnect';
+import { modelOptions, useAiModels } from '../../Settings/ai/useAiConnections';
+import { useToast } from '../../shared/Toast';
+
+/** Who pays, as the admin reads it ("I pay" rather than "the instance"); the first is the default. */
+export const POLICY_CHOICES: readonly { value: AiPolicy; labelKey: string; hintKey: string }[] = [
+  {
+    value: 'instance_or_user',
+    labelKey: 'assistant.admin.policy.instanceOrUser',
+    hintKey: 'assistant.admin.policy.instanceOrUserHint',
+  },
+  { value: 'instance', labelKey: 'assistant.admin.policy.instance', hintKey: 'assistant.admin.policy.instanceHint' },
+  { value: 'user', labelKey: 'assistant.admin.policy.user', hintKey: 'assistant.admin.policy.userHint' },
+];
+
+const RETENTION_DAYS = [30, 90, 365];
+const FOREVER = 'forever';
+const MAX_DAILY_TURNS = 10_000;
+
+/** A retention as the select's value: its days, or `forever`. */
+function retentionValue(retention: AiRetention): string {
+  return retention.mode === 'forever' ? FOREVER : String(retention.days);
+}
+
+function retentionOf(value: string): AiRetention {
+  return value === FOREVER ? { mode: 'forever' } : { mode: 'days', days: Number(value) };
+}
+
+/** Policy, daily limit and retention: each change is saved at once and taken back when the server refuses it. */
+function useAdminSettings(onSaved: () => void) {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [settings, setSettings] = useState<AiAdminSettings | null>(null);
+  const [dailyDraft, setDailyDraft] = useState('');
+
+  const adopt = (next: AiAdminSettings) => {
+    setSettings(next);
+    setDailyDraft(String(next.dailyTurns));
+  };
+
+  const save = async (patch: Partial<AiAdminSettings>) => {
+    if (!settings) return;
+    const before = settings;
+    setSettings({ ...settings, ...patch });
+    try {
+      adopt(await aiConnectionsRepo.saveAdminSettings({ ...settings, ...patch }));
+      onSaved();
+    } catch {
+      adopt(before);
+      toast.error(t('assistant.error.generic'));
+    }
+  };
+
+  /** The typed limit, kept within what the server takes, saved when the field is left. */
+  const commitDailyLimit = () => {
+    if (!settings) return;
+    const typed = Number.parseInt(dailyDraft, 10);
+    const next = Number.isFinite(typed) ? Math.min(MAX_DAILY_TURNS, Math.max(1, typed)) : settings.dailyTurns;
+    setDailyDraft(String(next));
+    if (next !== settings.dailyTurns) void save({ dailyTurns: next });
+  };
+
+  const current = settings ? retentionValue(settings.retention) : '';
+  // A period set some other way stays selectable instead of reading as blank.
+  const unlisted = current !== '' && current !== FOREVER && !RETENTION_DAYS.includes(Number(current));
+  const days = unlisted ? [...RETENTION_DAYS, Number(current)].sort((a, b) => a - b) : RETENTION_DAYS;
+
+  return {
+    settings,
+    adopt,
+    setPolicy: (policy: AiPolicy) => void save({ policy }),
+    dailyDraft,
+    setDailyDraft,
+    commitDailyLimit,
+    retention: current,
+    retentionOptions: [
+      ...days.map((d) => ({ value: String(d), label: t('assistant.admin.retentionDays', { count: d }) })),
+      { value: FOREVER, label: t('assistant.admin.retentionForever') },
+    ],
+    setRetention: (value: string) => void save({ retention: retentionOf(value) }),
+  };
+}
+
+/** The connection for everyone: shown, its model switched, replaced or removed. */
+function useInstanceConnection(onChanged: () => void) {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [connection, setConnection] = useState<AiAdminConnectionResponse | null>(null);
+  const [replacing, setReplacing] = useState(false);
+  const [confirmingRemove, setConfirmingRemove] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const live = connection?.connection ?? null;
+  const provider = live ? providerLabel(live.kind, live.host) : '';
+  const models = useAiModels(
+    live?.status === 'ok' ? () => aiConnectionsRepo.adminModels() : null,
+    live ? `${live.kind}@${live.host}` : ''
+  );
+
+  const act = async (action: () => Promise<AiAdminConnectionResponse>, doneKey: string | null) => {
+    setBusy(true);
+    try {
+      setConnection(await action());
+      onChanged();
+      if (doneKey) toast.success(t(doneKey));
+    } catch (err) {
+      toast.error(t(connectErrorKey(err), { provider }));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  /** Another model on the same connection: the stored key is kept by sending the mask in its place. */
+  const setModel = (model: string) => {
+    if (!live || live.kind === 'chatgpt') return;
+    const request: AiInstanceConnectionRequest =
+      live.kind === 'custom'
+        ? { kind: 'custom', baseUrl: live.baseUrl ?? '', model, ...(live.hint ? { apiKey: MASKED_SETTING_VALUE } : {}) }
+        : { kind: live.kind, apiKey: MASKED_SETTING_VALUE, model };
+    void act(() => aiConnectionsRepo.saveAdminConnection(request), 'common.saved');
+  };
+
+  const remove = () => {
+    setConfirmingRemove(false);
+    void act(async () => {
+      await aiConnectionsRepo.removeAdminConnection();
+      return aiConnectionsRepo.adminConnection();
+    }, null);
+  };
+
+  const onConnected = () => {
+    setReplacing(false);
+    void act(() => aiConnectionsRepo.adminConnection(), null);
+  };
+
+  return {
+    connection,
+    setConnection,
+    live,
+    provider,
+    models: live
+      ? modelOptions(models, live.model, { free: t('assistant.model.free'), recommended: t('assistant.model.recommended') })
+      : [],
+    busy,
+    setModel,
+    replacing,
+    replace: () => setReplacing(true),
+    cancelReplace: () => setReplacing(false),
+    onConnected,
+    confirmingRemove,
+    askRemove: () => setConfirmingRemove(true),
+    cancelRemove: () => setConfirmingRemove(false),
+    remove,
+  };
+}
+
+/**
+ * The AI assistant's admin settings behind both admin shells, on the addon's
+ * own tile: who pays, the connection everyone runs on, the daily limit while
+ * the instance pays, and how long chats are kept. The assistant's status is
+ * reloaded after every change, so the launcher appears or goes at once.
+ */
+export function useAiAdminConfig() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const loadStatus = useAssistantStore((s) => s.loadStatus);
+  const refreshStatus = () => void loadStatus();
+  const form = useAdminSettings(refreshStatus);
+  const instance = useInstanceConnection(refreshStatus);
+  useOpenrouterReturn(instance.onConnected);
+
+  const loadOnMount = useEffectEvent((isCancelled: () => boolean) => {
+    Promise.all([aiConnectionsRepo.adminSettings(), aiConnectionsRepo.adminConnection()]).then(
+      ([settings, connection]) => {
+        if (isCancelled()) return;
+        form.adopt(settings);
+        instance.setConnection(connection);
+      },
+      () => {
+        if (!isCancelled()) toast.error(t('assistant.error.generic'));
+      }
+    );
+    // The connect panel reads whether OpenRouter can return here from the status.
+    refreshStatus();
+  });
+  useEffect(() => {
+    let cancelled = false;
+    loadOnMount(() => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const policy = form.settings?.policy ?? null;
+  return {
+    ...form,
+    instance,
+    loaded: form.settings !== null && instance.connection !== null,
+    policy,
+    policyHintKey: POLICY_CHOICES.find((c) => c.value === policy)?.hintKey ?? null,
+    /** Policy `user` charges nothing to the instance: no connection and no limit to set. */
+    instancePays: policy !== null && policy !== 'user',
+    showPanel: instance.live === null || instance.replacing,
+  };
+}