feat(admin): manage server updates and local configuration

apps/web/e2e/server-management.spec.ts

@@ -0,0 +1,66 @@
+import { expect, test, type Page } from '@playwright/test';
+
+async function login(page: Page, username = 'mobile-admin', target = '/') {
+  await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+  await page.goto(`/login?redirect=${encodeURIComponent(target)}`);
+  await page.getByLabel('Логин').fill(username);
+  await page.getByRole('textbox', { name: 'Пароль' }).fill(`${username}-password`);
+  await page.getByRole('button', { name: 'Войти' }).click();
+  await expect(page.getByRole('button', { name: 'Меню профиля' })).toBeVisible();
+}
+
+test('admin selects repository and version, confirms and sees persistent job log', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/updates');
+  await expect(page.getByRole('heading', { name: 'Обновления', exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Последний релиз', exact: true })).toHaveAttribute('aria-pressed', 'true');
+  await page.getByRole('button', { name: 'Источники обновлений', exact: true }).click();
+  await page.getByRole('button', { name: 'Добавить источник' }).click();
+  await page.getByLabel('Название', { exact: true }).last().fill('Тестовая репа');
+  await page.getByLabel('URL Git-репозитория').last().fill('https://git.example.org/pipu/testing.git');
+  await page.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.getByRole('dialog')).not.toBeVisible();
+  await page.getByLabel('Источник', { exact: true }).selectOption({ label: 'Тестовая репа' });
+  await page.getByRole('button', { name: 'Выбрать версию', exact: true }).click();
+  await page.getByLabel('Версия', { exact: true }).selectOption('v1.10.0');
+  await page.getByRole('button', { name: 'Установить обновление', exact: true }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toContainText('Тестовая репа');
+  await expect(dialog).toContainText('v1.10.0');
+  await dialog.getByRole('button', { name: 'Установить обновление' }).click();
+  await expect(page.getByRole('status').filter({ hasText: 'Выполняется' })).toBeVisible();
+  await expect(page.getByLabel('Журнал выполнения')).toContainText('build and restart');
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeDisabled();
+  await page.screenshot({ path: 'test-results/server-updates.png', fullPage: true });
+});
+
+test('config keeps secret unchanged, saves local override and applies separately', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/config');
+  await expect(page.getByRole('heading', { name: 'Конфигурация', exact: true })).toBeVisible();
+  await expect(page.getByLabel('GITEA_TOKEN · config.local', { exact: true })).toHaveValue('');
+  await page.getByLabel('LOG_LEVEL · config.local', { exact: true }).fill('debug');
+  await expect(page.getByText('В .env есть значение:', { exact: false })).toBeVisible();
+  await page.getByLabel('TRAIN_HOUR · config.local', { exact: true }).fill('6');
+  await expect(page.getByRole('button', { name: 'Применить и перезапустить', exact: true })).toBeDisabled();
+  await page.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.getByText('Изменения сохранены в config.local', { exact: true })).toBeVisible();
+  await expect(page.getByLabel('GITEA_TOKEN · config.local', { exact: true })).toHaveAttribute('placeholder', 'Секрет сохранён');
+  await expect(page.getByText('Выполняется', { exact: true })).not.toBeVisible();
+  await page.getByRole('main').evaluate((element) => { element.scrollTop = 0; });
+  await page.screenshot({ path: 'test-results/server-config.png', fullPage: true });
+  await page.getByRole('button', { name: 'Применить и перезапустить', exact: true }).click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Применить и перезапустить' }).click();
+  await expect(page.getByLabel('Журнал выполнения')).toContainText('build and restart');
+});
+
+test('update delegate can update but cannot open configuration', async ({ page }) => {
+  await login(page, 'update-manager', '/admin/updates');
+  await expect(page.getByRole('heading', { name: 'Обновления', exact: true })).toBeVisible();
+  await page.evaluate(() => { history.pushState({}, '', '/admin/config'); window.dispatchEvent(new PopStateEvent('popstate')); });
+  await expect(page).toHaveURL('/');
+  await expect(page.getByRole('heading', { name: 'Конфигурация', exact: true })).not.toBeVisible();
+});
+
+test('ordinary user is redirected away from server management', async ({ page }) => {
+  await login(page, 'alice', '/admin/updates');
+  await expect(page).toHaveURL('/');
+});

apps/web/src/app/router.tsx

@@ -9,6 +9,8 @@ import {
 } from '@tanstack/react-router';
 import { lazy } from 'react';
 
+const ServerUpdatesPage = lazy(() => import('../features/server-management/UpdatesPage').then((m) => ({ default: m.UpdatesPage })));
+const ServerConfigPage = lazy(() => import('../features/server-management/ConfigPage').then((m) => ({ default: m.ConfigPage })));
 const AuditPage = lazy(() => import('../pages/admin/AuditPage').then((m) => ({ default: m.AuditPage })));
 const LibraryPage = lazy(() => import('../pages/admin/LibraryPage').then((m) => ({ default: m.LibraryPage })));
 const PatternsPage = lazy(() => import('../pages/admin/PatternsPage').then((m) => ({ default: m.PatternsPage })));
@@ -274,6 +276,14 @@ const adminSettingsRoute = createRoute({
   component: AdminSettingsPage,
 });
 
+const serverUpdatesRoute = createRoute({
+  getParentRoute: () => appRoute, path: '/admin/updates', component: ServerUpdatesPage,
+  beforeLoad: ({ context }) => {
+    if (context.user.role !== 'admin' && !context.user.manages_updates) throw redirect({ to: '/' });
+  },
+});
+const serverConfigRoute = createRoute({ getParentRoute: () => appRoute, path: '/admin/config', beforeLoad: adminOnly, component: ServerConfigPage });
+
 const routeTree = rootRoute.addChildren([
   downloadAppRoute,
   androidAppRoute,
@@ -304,6 +314,8 @@ const routeTree = rootRoute.addChildren([
     myUploadsRoute,
     uploadQueueRoute,
     adminSettingsRoute,
+    serverUpdatesRoute,
+    serverConfigRoute,
   ]),
 ]);
 

apps/web/src/features/server-management/ConfigPage.tsx

@@ -0,0 +1,84 @@
+import type { components } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession } from '../../app/session';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, Field, FormError, PageSkeleton } from '../../shared/ui/ui';
+import { JobPanel } from './JobPanel';
+import s from './management.module.css';
+
+export function ConfigPage() {
+  const { t } = useTranslation('admin');
+  const session = useSession();
+  const errorText = useErrorText();
+  const qc = useQueryClient();
+  const [draft, setDraft] = useState<Record<string, string | null>>({});
+  const [baseRevision, setBaseRevision] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [group, setGroup] = useState('all');
+  const [confirm, setConfirm] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const dirty = Object.keys(draft).length > 0;
+  const query = useQuery({ queryKey: ['server-config'], queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/server/config')), retry: false });
+  const status = useQuery({ queryKey: ['server-updates', 'config'], queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/server/updates')), refetchInterval: 3000, retry: false });
+  const running = status.data?.job?.state === 'running';
+  useEffect(() => {
+    if (!dirty) return;
+    const prevent = (e: BeforeUnloadEvent) => { e.preventDefault(); };
+    window.addEventListener('beforeunload', prevent);
+    return () => window.removeEventListener('beforeunload', prevent);
+  }, [dirty]);
+  useEffect(() => {
+    if (status.data?.job?.state === 'succeeded') void qc.invalidateQueries({ queryKey: ['server-config'] });
+  }, [status.data?.job?.id, status.data?.job?.state, qc]);
+  const save = useMutation({
+    mutationFn: async () => unwrap(await session.client.PATCH('/api/v1/admin/server/config', { body: { revision: baseRevision ?? query.data!.revision, values: draft } })),
+    onSuccess: (data) => { qc.setQueryData(['server-config'], data); setDraft({}); setBaseRevision(null); setSaved(true); },
+  });
+  const apply = useMutation({
+    mutationFn: async () => unwrap(await session.client.POST('/api/v1/admin/server/config/apply')),
+    onSuccess: (job) => {
+      setConfirm(false);
+      qc.setQueryData<components['schemas']['ServerUpdates']>(['server-updates', 'config'], (old) => old ? { ...old, job } : old);
+      void qc.invalidateQueries({ queryKey: ['server-updates'] });
+    },
+  });
+  const change = (key: string, value: string | null) => {
+    setBaseRevision((v) => v ?? query.data!.revision);
+    setDraft((v) => ({ ...v, [key]: value })); setSaved(false); save.reset();
+  };
+  if (query.isPending) return <PageSkeleton />;
+  const entries = query.data?.entries.filter((e) => (group === 'all' || e.group === group) && `${e.key} ${e.group}`.toLowerCase().includes(search.toLowerCase())) ?? [];
+  return <div className={s.page}>
+    <header className={s.header}><div><span className={s.eyebrow}>{t('management.server')}</span><h1>{t('management.config')}</h1><p>{t('management.config_intro')}</p></div></header>
+    {query.error && <FormError>{errorText(query.error)}</FormError>}
+    {query.data && <>
+      <section className={s.hero}><div><span className={s.eyebrow}>{t('management.priority')}</span><strong className={s.priority}>ENV → config.local → {t('management.defaults')}</strong></div><p>{t('management.priority_hint')}</p></section>
+      <div className={s.toolbar}><Field type="search" label={t('management.search')} value={search} onChange={setSearch} /><label className={s.selectLabel}>{t('management.group')}<select value={group} onChange={(e) => setGroup(e.target.value)}><option value="all">{t('management.all')}</option>{[...new Set(query.data.entries.map((v) => v.group))].map((v) => <option key={v} value={v}>{t(`management.groups.${v}`, { defaultValue: v })}</option>)}</select></label></div>
+      <p className={s.note}>{t('management.config_files_hint')}</p>
+      <div className={s.configList}>{entries.map((entry) => {
+        const changed = Object.hasOwn(draft, entry.key);
+        const value = changed ? draft[entry.key] ?? '' : entry.secret ? '' : entry.local ?? '';
+        return <section className={s.configRow} key={entry.key} data-changed={changed || undefined}>
+          <div className={s.configMeta}><code>{entry.key}</code><span className={s.tag}>{t(`management.groups.${entry.group}`, { defaultValue: entry.group })}</span><span className={s.note}>{t(`management.value_source.${entry.source}`)}</span></div>
+          <div className={s.values}><span>{t('management.effective')}: <code>{entry.effective || '—'}</code></span><span>ENV: <code>{entry.env ?? '—'}</code></span></div>
+          {entry.readonly ? <p className={s.note}>{t('management.readonly')}</p> : <div className={s.editor}>
+            <Field label={`${entry.key} · config.local`} type={entry.secret ? 'password' : 'text'} value={value} disabled={running || save.isPending} placeholder={entry.secret && entry.local ? t('management.secret_saved') : entry.default_value} hint={changed && draft[entry.key] === null ? t('management.will_reset') : entry.env !== null ? t('management.overridden') : entry.secret ? t('management.secret_hint') : `${t('management.default')}: ${entry.default_value || '—'}`} onChange={(v) => change(entry.key, v)} mono />
+            <Button disabled={running || save.isPending || (!changed && entry.local === null)} onClick={() => change(entry.key, null)}>{t('management.reset')}</Button>
+          </div>}
+        </section>;
+      })}</div>
+      {!entries.length && <p className={s.note}>{t('management.no_results')}</p>}
+      <section className={s.saveBar}>
+        <div role="status">{saved ? t('management.saved') : dirty ? t('management.unsaved', { count: Object.keys(draft).length }) : query.data.restart_required ? t('management.pending_restart') : t('management.no_changes')}</div>
+        <div className={s.actions}><Button disabled={!dirty || save.isPending} onClick={() => { setDraft({}); setBaseRevision(null); save.reset(); }}>{t('management.discard')}</Button><Button variant="primary" disabled={!dirty || running} busy={save.isPending} onClick={() => save.mutate()}>{t('management.save')}</Button><Button disabled={dirty || running || !query.data.restart_required} busy={apply.isPending} onClick={() => { apply.reset(); setConfirm(true); }}>{t('management.apply')}</Button></div>
+      </section>
+      {save.error && <FormError>{errorText(save.error)}</FormError>}
+      {apply.error && <FormError>{errorText(apply.error)}</FormError>}
+      <JobPanel job={status.data?.job} reconnecting={status.isError} />
+    </>}
+    {confirm && <Dialog title={t('management.apply')} onClose={() => !apply.isPending && setConfirm(false)}><p>{t('management.apply_warning')}</p>{apply.error && <FormError>{errorText(apply.error)}</FormError>}<div className={s.actions}><Button disabled={apply.isPending} onClick={() => setConfirm(false)}>{t('management.cancel')}</Button><Button variant="primary" busy={apply.isPending} onClick={() => apply.mutate()}>{t('management.apply')}</Button></div></Dialog>}
+  </div>;
+}

apps/web/src/features/server-management/JobPanel.tsx

@@ -0,0 +1,20 @@
+import type { components } from '@pipu/api-client';
+import { useTranslation } from 'react-i18next';
+import s from './management.module.css';
+
+export type Job = components['schemas']['ServerJob'];
+
+export function JobPanel({ job, reconnecting }: { job: Job | null | undefined; reconnecting?: boolean }) {
+  const { t } = useTranslation('admin');
+  if (!job) return null;
+  return <section className={s.card} aria-label={t('management.job')}>
+    <div className={s.cardHead}>
+      <div><span className={s.eyebrow}>{t('management.job')}</span><h2>{job.target}</h2></div>
+      <span className={s.status} data-state={job.state} role="status">{t(`management.state.${job.state}`)}</span>
+    </div>
+    <p className={s.note}>{t('management.started')}: {new Date(job.started_at).toLocaleString()}
+      {job.finished_at && <> · {t('management.finished')}: {new Date(job.finished_at).toLocaleString()}</>}</p>
+    {job.state === 'running' && <p className={s.note}>{t(reconnecting ? 'management.reconnecting' : 'management.running_hint')}</p>}
+    <pre className={s.log} tabIndex={0} aria-label={t('management.log')}>{job.log || t('management.waiting')}</pre>
+  </section>;
+}

apps/web/src/features/server-management/UpdatesPage.tsx

@@ -0,0 +1,92 @@
+import type { components } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession } from '../../app/session';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, Field, FormError, PageSkeleton, Segmented } from '../../shared/ui/ui';
+import { JobPanel } from './JobPanel';
+import s from './management.module.css';
+
+type Source = components['schemas']['ServerSource'];
+type Channel = components['schemas']['ServerUpdateRequest']['channel'];
+
+export function UpdatesPage() {
+  const { t } = useTranslation('admin');
+  const session = useSession();
+  const qc = useQueryClient();
+  const errorText = useErrorText();
+  const [sourceId, setSourceId] = useState('');
+  const [channel, setChannel] = useState<Channel>('latest');
+  const [version, setVersion] = useState('');
+  const [confirm, setConfirm] = useState(false);
+  const [editing, setEditing] = useState<Source[] | null>(null);
+  const query = useQuery({
+    queryKey: ['server-updates', sourceId],
+    queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/server/updates', {
+      params: { query: { source_id: sourceId || undefined } },
+    })),
+    refetchInterval: 3000,
+    retry: false,
+  });
+  const source = query.data?.sources.find((v) => v.id === sourceId) ?? query.data?.sources[0];
+  const running = query.data?.job?.state === 'running';
+  const refresh = () => qc.invalidateQueries({ queryKey: ['server-updates'] });
+  const save = useMutation({
+    mutationFn: async (sources: Source[]) => unwrap(await session.client.PUT('/api/v1/admin/server/update-sources', { body: { sources } })),
+    onSuccess: () => { setEditing(null); setSourceId(''); void refresh(); },
+  });
+  const start = useMutation({
+    mutationFn: async () => unwrap(await session.client.POST('/api/v1/admin/server/updates', {
+      body: { source_id: source!.id, channel, version: channel === 'version' ? version : undefined },
+    })),
+    onSuccess: (job) => {
+      setConfirm(false);
+      qc.setQueryData<components['schemas']['ServerUpdates']>(['server-updates', sourceId], (old) => old ? { ...old, job } : old);
+      void refresh();
+    },
+  });
+  if (query.isPending) return <PageSkeleton />;
+  return <div className={s.page}>
+    <header className={s.header}><div><span className={s.eyebrow}>{t('management.server')}</span><h1>{t('management.updates')}</h1><p>{t('management.updates_intro')}</p></div>
+      <Button onClick={() => void query.refetch()} busy={query.isFetching}>{t('management.refresh')}</Button>
+    </header>
+    {query.error && <FormError>{errorText(query.error)}</FormError>}
+    {query.data && <>
+      <section className={s.hero}><div><span className={s.eyebrow}>{t('management.current')}</span><strong>{query.data.current_version || '—'}</strong></div><p>{t('management.manual')}</p></section>
+      <section className={s.card}>
+        <div className={s.cardHead}><h2>{t('management.update_target')}</h2><Button disabled={running} onClick={() => { save.reset(); setEditing(query.data.sources.map((v) => ({ ...v }))); }}>{t('management.sources')}</Button></div>
+        <label className={s.selectLabel}>{t('management.source')}
+          <select aria-label={t('management.source')} value={source?.id ?? ''} disabled={running || start.isPending} onChange={(e) => { setSourceId(e.target.value); setVersion(''); start.reset(); }}>
+            {query.data.sources.map((v) => <option key={v.id} value={v.id}>{v.name}</option>)}
+          </select>
+        </label>
+        <p className={s.url}>{source?.url}</p>
+        <Segmented label={t('management.channel')} value={channel} options={(['latest', 'version', 'main'] as const).map((value) => ({ value, label: t(`management.channel_${value}`) }))} onChange={(v) => { setChannel(v); start.reset(); }} />
+        <p className={s.note}>{t(`management.hint_${channel}`)}</p>
+        {channel === 'version' && <label className={s.selectLabel}>{t('management.version')}<select aria-label={t('management.version')} value={version} onChange={(e) => setVersion(e.target.value)}><option value="">{t('management.choose_version')}</option>{query.data.versions.map((v) => <option key={v} value={v}>{v}</option>)}</select></label>}
+        {query.data.source_error && <FormError>{t('management.source_unavailable')}</FormError>}
+        {start.error && <FormError>{errorText(start.error)}</FormError>}
+        <div className={s.actions}><Button variant="primary" disabled={!source || running || !!query.data.source_error || (channel === 'version' && !version)} busy={start.isPending} onClick={() => { start.reset(); setConfirm(true); }}>{t('management.install')}</Button></div>
+      </section>
+      <JobPanel job={query.data.job} reconnecting={query.isError} />
+    </>}
+    {confirm && <Dialog title={t('management.confirm_update')} onClose={() => !start.isPending && setConfirm(false)}>
+      <p>{t('management.confirm_update_text', { source: source?.name, target: channel === 'version' ? version : t(`management.channel_${channel}`) })}</p>
+      <p className={s.note}>{t('management.update_warning')}</p>
+      {start.error && <FormError>{errorText(start.error)}</FormError>}
+      <div className={s.actions}><Button disabled={start.isPending} onClick={() => setConfirm(false)}>{t('management.cancel')}</Button><Button variant="primary" busy={start.isPending} onClick={() => start.mutate()}>{t('management.install')}</Button></div>
+    </Dialog>}
+    {editing && <Dialog title={t('management.sources')} onClose={() => !save.isPending && setEditing(null)}>
+      <p className={s.note}>{t('management.sources_hint')}</p>
+      <div className={s.sourceList}>{editing.map((item, index) => <div className={s.sourceEditor} key={item.id}>
+        <Field label={t('management.source_name')} value={item.name} maxLength={100} onChange={(name) => setEditing(editing.map((v, i) => i === index ? { ...v, name } : v))} />
+        <Field label={t('management.repository')} value={item.url} maxLength={2048} mono onChange={(url) => setEditing(editing.map((v, i) => i === index ? { ...v, url } : v))} />
+        <Button disabled={editing.length === 1 || save.isPending} onClick={() => setEditing(editing.filter((v) => v.id !== item.id))}>{t('management.remove_source')}</Button>
+      </div>)}</div>
+      {save.error && <FormError>{errorText(save.error)}</FormError>}
+      <div className={s.actions}><Button disabled={editing.length >= 20 || save.isPending} onClick={() => setEditing([...editing, { id: crypto.randomUUID(), name: '', url: '' }])}>{t('management.add_source')}</Button><Button variant="primary" disabled={editing.some((v) => !v.name.trim() || !v.url.trim())} busy={save.isPending} onClick={() => save.mutate(editing)}>{t('management.save')}</Button></div>
+    </Dialog>}
+  </div>;
+}

apps/web/src/features/server-management/management.module.css

@@ -0,0 +1,34 @@
+.page { max-width: 1050px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
+.header, .cardHead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
+.header h1 { margin: 6px 0; font-family: var(--font-display); font-size: 30px; }
+.header p, .note { color: var(--text2); font-size: 13px; line-height: 1.6; margin: 0; }
+.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text2); font-weight: 600; }
+.hero { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--accent-soft), var(--surface-a)); }
+.hero strong { display: block; font-family: var(--font-display); font-size: 30px; margin-top: 8px; overflow-wrap: anywhere; }
+.hero strong.priority { font-size: 19px; }
+.hero p { color: var(--text2); max-width: 340px; line-height: 1.6; font-size: 13px; }
+.card { padding: 24px; background: var(--surface-a); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 18px; }
+.card h2 { margin: 0; font-size: 18px; }
+.selectLabel { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
+.selectLabel select { height: 42px; padding: 0 12px; font: inherit; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); max-width: 100%; }
+.selectLabel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.url { color: var(--text2); font: 12px monospace; overflow-wrap: anywhere; margin: -8px 0 0; }
+.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
+.status, .tag { padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--text2); font-size: 12px; }
+.status[data-state='running'] { background: var(--accent-soft); color: var(--accent); }
+.status[data-state='succeeded'] { color: var(--ok); }
+.status[data-state='failed'] { color: var(--danger); }
+.log { margin: 0; padding: 18px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); max-height: 380px; min-height: 100px; overflow: auto; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
+.sourceList { display: flex; flex-direction: column; gap: 16px; max-height: 50vh; overflow: auto; margin-bottom: 18px; }
+.sourceEditor { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
+.toolbar { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: end; }
+.configList { display: flex; flex-direction: column; gap: 12px; }
+.configRow { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-a); display: flex; flex-direction: column; gap: 14px; }
+.configRow[data-changed] { border-color: var(--accent); }
+.configMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.configMeta > code { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
+.values { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--text2); font-size: 12px; }
+.values code { overflow-wrap: anywhere; }
+.editor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
+.saveBar { position: sticky; bottom: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); box-shadow: 0 8px 32px #0003; font-size: 13px; }
+@media (max-width: 650px) { .hero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; } .hero p { max-width: none; } .toolbar { grid-template-columns: 1fr; } .editor { grid-template-columns: 1fr; } .card, .configRow { padding: 16px; } .actions { justify-content: flex-start; } }

apps/web/src/pages/admin/UsersPage.tsx

@@ -140,6 +140,11 @@ export function UsersPage() {
         label: t(u.reviews_uploads ? 'users.revoke_review' : 'users.grant_review'),
         onSelect: () => patch.mutate({ id: u.id, body: { reviews_uploads: !u.reviews_uploads } }),
       });
+    if (me.role === 'admin' && u.role !== 'admin')
+      items.push({
+        label: t(u.manages_updates ? 'users.revoke_updates' : 'users.grant_updates'),
+        onSelect: () => patch.mutate({ id: u.id, body: { manages_updates: !u.manages_updates } }),
+      });
     if (can('delete'))
       items.push({ label: t('users.delete'), danger: true, onSelect: () => setConfirm({ kind: 'delete', user: u }) });
     return items;
@@ -214,6 +219,7 @@ export function UsersPage() {
                   </td>
                   <td data-label={t('users.col_role')}>
                     <span className={cx(s.badge, s[`role_${u.role}`])}>{t(`common:roles.${u.role}`)}</span>
+                    {u.manages_updates && <span className={cx(s.badge, s.role_moderator)}>{t('users.manage_updates')}</span>}
                     {u.reviews_uploads && <span className={cx(s.badge, s.role_moderator)}>{t('users.review_uploads')}</span>}
                   </td>
                   <td data-label={t('users.col_status')}>

apps/web/src/test/e2eBridge.ts

@@ -6,6 +6,7 @@ export function installE2EFetch() {
   const api = fakeApi([
     makeUser('admin', 'admin', { must_change_credentials: true }),
     makeUser('alice', 'user'),
+    makeUser('update-manager', 'user', { manages_updates: true }),
     makeUser('mobile-admin', 'admin', { reviews_uploads: true }),
     makeUser('moderator', 'moderator', { reviews_uploads: true }),
   ]);

apps/web/src/test/fakeApi.ts

@@ -79,12 +79,27 @@ export function fakeApi(initial: FakeUser[]) {
   const playlistOwners = new Map<string, string>();
   const playlists = new Map<string, components['schemas']['Playlist']>();
 
+  let managementSources = [{ id: 'origin', name: 'Текущий репозиторий', url: 'https://git.example.org/pipu/music.git' }];
+  let managementJob: components['schemas']['ServerJob'] | null = null;
+  let configRevision = 1;
+  let configPending = false;
+  const configValues: Record<string, string> = {};
+  const configEntries: components['schemas']['ServerConfigEntry'][] = [
+    { key: 'LOG_LEVEL', group: 'shared', type: 'string', secret: false, readonly: false, effective: 'info', env: 'info', local: null, default_value: 'info', source: 'env' },
+    { key: 'TRAIN_HOUR', group: 'recommender', type: 'integer', secret: false, readonly: false, effective: '3', env: null, local: null, default_value: '3', source: 'default' },
+    { key: 'GITEA_TOKEN', group: 'api', type: 'string', secret: true, readonly: false, effective: '••••••••', env: null, local: '••••••••', default_value: '', source: 'local' },
+  ];
+  const serverConfig = () => ({ revision: String(configRevision), restart_required: configPending, entries: configEntries.map((entry) => {
+    const local = configValues[entry.key] ?? entry.local;
+    return { ...entry, local, effective: entry.env ?? local ?? entry.default_value, source: entry.env !== null ? 'env' : local !== null ? 'local' : 'default' };
+  }) });
   const me = (u: FakeUser): Me => ({
     id: u.id,
     username: u.username,
     display_name: u.display_name,
     role: u.role,
     reviews_uploads: u.reviews_uploads,
+    manages_updates: u.role === 'admin' || !!u.manages_updates,
     locale: u.locale,
     ui_prefs: prefs.get(u.id) ?? {},
     must_change_password: u.must_change_password,
@@ -107,6 +122,25 @@ export function fakeApi(initial: FakeUser[]) {
     calls.push({ method: req.method, path, body });
     const route = `${req.method} ${path}`;
     const user = current ? users.get(current) : undefined;
+    if (path.startsWith('/api/v1/admin/server/')) {
+      if (!user) return problem(401, 'auth.unauthorized');
+      const configs = path.includes('/config');
+      if (configs ? user.role !== 'admin' : user.role !== 'admin' && !user.manages_updates) return problem(403, 'auth.forbidden');
+      if (route === 'GET /api/v1/admin/server/updates') return json({ sources: managementSources, versions: ['v1.10.0', 'v1.9.0', 'v2.0.0-rc.1'], current_version: '1.9.0', source_error: '', job: managementJob });
+      if (route === 'PUT /api/v1/admin/server/update-sources') { managementSources = body?.sources as typeof managementSources; return json({ sources: managementSources }); }
+      if (route === 'GET /api/v1/admin/server/config') return json(serverConfig());
+      if (route === 'PATCH /api/v1/admin/server/config') {
+        if (body?.revision !== String(configRevision)) return problem(409, 'management.config_conflict');
+        for (const [key, value] of Object.entries(body?.values as Record<string, string | null>)) {
+          if (value === null) delete configValues[key]; else configValues[key] = value;
+        }
+        configRevision++; configPending = true; return json(serverConfig());
+      }
+      if (route === 'POST /api/v1/admin/server/updates' || route === 'POST /api/v1/admin/server/config/apply') {
+        managementJob = { id: 'job-1', kind: configs ? 'config' : 'update', state: 'running', target: configs ? 'config.local' : body?.channel === 'version' ? String(body.version) : body?.channel === 'main' ? 'main' : 'v1.10.0', started_at: '2026-10-22T09:00:00Z', finished_at: '', log: '→ build and restart' };
+        return json(managementJob, 202);
+      }
+    }
 
     switch (route) {
       case 'GET /api/v1/server-info':
@@ -323,6 +357,10 @@ export function fakeApi(initial: FakeUser[]) {
           return problem(422, 'auth.username_taken', { errors: [{ field: 'username', code: 'auth.username_taken' }] });
         target.username = username;
       }
+      if (typeof body?.manages_updates === 'boolean') {
+        if (user.role !== 'admin') return problem(403, 'auth.forbidden');
+        target.manages_updates = body.manages_updates;
+      }
       if (typeof body?.reviews_uploads === 'boolean') {
         if (user.role !== 'admin') return problem(403, 'auth.forbidden');
         target.reviews_uploads = body.reviews_uploads;

apps/web/src/widgets/AppShell.tsx

@@ -48,6 +48,8 @@ type NavPath =
   | '/admin/uploads'
   | '/uploads/new'
   | '/uploads/mine'
+  | '/admin/updates'
+  | '/admin/config'
   | '/admin/settings'
   | '/collection/playlists'
   | '/collection/downloads'
@@ -197,6 +199,7 @@ function Shell() {
             badge={pending}
           />
         )}
+        {!staff && user.manages_updates && <NavLink to="/admin/updates" label={t('nav.server_updates')} icon={downloadIcon} activeIcon={downloadIcon} />}
         {staff && (
           <NavSection mobile={mobile} id="admin" title={t('nav.admin')} badge={reviews ? pending : undefined} defaultFolded>
             <NavLink to="/admin/users" label={t('nav.users')} icon={groupIcon} activeIcon={groupFillIcon} />
@@ -215,8 +218,10 @@ function Shell() {
                 badge={pending}
               />
             )}
+            {(user.role === 'admin' || user.manages_updates) && <NavLink to="/admin/updates" label={t('nav.server_updates')} icon={downloadIcon} activeIcon={downloadIcon} />}
             {user.role === 'admin' && (
               <>
+                <NavLink to="/admin/config" label={t('nav.server_config')} icon={tuneIcon} activeIcon={tuneFillIcon} />
                 <NavLink to="/admin/settings" label={t('nav.admin_settings')} icon={tuneIcon} activeIcon={tuneFillIcon} />
                 <NavLink to="/admin/audit" label={t('nav.audit')} icon={auditIcon} activeIcon={auditFillIcon} />
               </>