fix(ui): reflect update availability and config changes; expand mobile player metadata

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

@@ -1,7 +1,7 @@
 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 { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSession } from '../../app/session';
 import { useErrorText } from '../../shared/lib/errors';
@@ -22,16 +22,26 @@ export function UpdatesPage() {
   const [version, setVersion] = useState('');
   const [confirm, setConfirm] = useState(false);
   const [editing, setEditing] = useState<Source[] | null>(null);
+  const fresh = useRef(false);
+  const queryKey = ['server-updates', sourceId, channel, version];
   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,
+    queryKey,
+    queryFn: async () => {
+      const force = fresh.current;
+      fresh.current = false;
+      return unwrap(await session.client.GET('/api/v1/admin/server/updates', {
+        params: { query: { source_id: sourceId || undefined, channel, version: channel === 'version' ? version : undefined, fresh: force } },
+      }));
+    },
+    placeholderData: keepPreviousData,
+    refetchInterval: (q) => q.state.data?.job?.state === 'running' ? 3000 : 60000,
     retry: false,
   });
   const source = query.data?.sources.find((v) => v.id === sourceId) ?? query.data?.sources[0];
   const running = query.data?.job?.state === 'running';
+  const checking = query.isFetching;
+  const availability = query.isError ? 'unavailable' : query.data?.update_state || 'unknown';
+  const canInstall = availability === 'available' && !checking && !query.isPlaceholderData && !query.isError && !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 } })),
@@ -39,18 +49,19 @@ export function UpdatesPage() {
   });
   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 },
+      body: { source_id: source!.id, channel, version: channel === 'version' ? version : undefined, expected_commit: query.data!.target_commit },
     })),
     onSuccess: (job) => {
       setConfirm(false);
-      qc.setQueryData<components['schemas']['ServerUpdates']>(['server-updates', sourceId], (old) => old ? { ...old, job } : old);
+      qc.setQueryData<components['schemas']['ServerUpdates']>(queryKey, (old) => old ? { ...old, job } : old);
       void refresh();
     },
+    onError: () => { 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>
+      <Button onClick={() => { fresh.current = true; void query.refetch(); }} busy={query.isFetching}>{t('management.check_updates')}</Button>
     </header>
     {query.error && <FormError>{errorText(query.error)}</FormError>}
     {query.data && <>
@@ -68,15 +79,21 @@ export function UpdatesPage() {
         {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>
+        <div className={s.updateAction}>
+          <div role="status" aria-live="polite">
+            <strong>{t(`management.availability.${checking ? 'checking' : running ? 'running' : availability}`)}</strong>
+            {query.data.target_version && <p className={s.note}>{query.data.target_version} · {query.data.target_commit.slice(0, 12)}</p>}
+          </div>
+          {canInstall && <Button variant="primary" disabled={!source || !!query.data.source_error} 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>{t('management.confirm_update_text', { source: source?.name, target: query.data?.target_version || version })}</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>
+      <div className={s.actions}><Button disabled={start.isPending} onClick={() => setConfirm(false)}>{t('management.cancel')}</Button><Button variant="primary" disabled={!canInstall} 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>