fix(web): follow server job log output automatically

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

@@ -1,4 +1,5 @@
 import type { components } from '@pipu/api-client';
+import { useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import s from './management.module.css';
 
@@ -6,6 +7,15 @@ export type Job = components['schemas']['ServerJob'];
 
 export function JobPanel({ job, reconnecting }: { job: Job | null | undefined; reconnecting?: boolean }) {
   const { t } = useTranslation('admin');
+  const logRef = useRef<HTMLPreElement>(null);
+  const followLog = useRef(true);
+  useLayoutEffect(() => {
+    followLog.current = true;
+  }, [job?.id]);
+  useLayoutEffect(() => {
+    const log = logRef.current;
+    if (log && followLog.current) log.scrollTop = log.scrollHeight;
+  }, [job?.id, job?.log]);
   if (!job) return null;
   return <section className={s.card} aria-label={t('management.job')}>
     <div className={s.cardHead}>
@@ -15,6 +25,9 @@ export function JobPanel({ job, reconnecting }: { job: Job | null | undefined; r
     <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>
+    <pre ref={logRef} className={s.log} tabIndex={0} aria-label={t('management.log')} onScroll={(event) => {
+      const log = event.currentTarget;
+      followLog.current = log.scrollHeight - log.clientHeight - log.scrollTop <= 4;
+    }}>{job.log || t('management.waiting')}</pre>
   </section>;
 }