feat(client): add Timestamp component, ESLint 10 + Prettier, and code quality fixes

- add Timestamp component with moment relative time and ISO tooltip
- add Timestamp stories (JustNow, MinutesAgo, HoursAgo, DaysAgo, MonthsAgo)
- add ESLint 10 with typescript-eslint, react-hooks, react-refresh, prettier
- add Prettier config with singleQuote, semi, trailingComma all, printWidth 100
- add lint, lint:fix, format, test:storybook scripts to package.json
- fix react-hooks/set-state-in-effect in all page components
- auto-fix 113 Prettier formatting issues across src and .storybook

client/src/pages/ScenariosPage.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { scenarios } from '../api';
 import type { Scenario } from '../api';
-import { Button, Table, type TableColumn } from '../ui';
+import { Button, Table, type TableColumn, Timestamp } from '../ui';
 import styles from './Page.module.css';
 
 export function ScenariosPage() {
@@ -12,14 +12,16 @@ export function ScenariosPage() {
   const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(() => {
-    setLoading(true);
-    scenarios.list()
+    scenarios
+      .list()
       .then((res) => setItems(res.data))
       .catch((err: Error) => setError(err.message))
       .finally(() => setLoading(false));
   }, []);
 
-  useEffect(load, [load]);
+  useEffect(() => {
+    load();
+  }, [load]);
 
   const handleRun = async (id: number) => {
     await scenarios.run(id);
@@ -27,17 +29,18 @@ export function ScenariosPage() {
 
   const handleDelete = async (id: number) => {
     await scenarios.remove(id);
+    setLoading(true);
     load();
   };
 
   const columns: TableColumn<Scenario>[] = [
-    { key: 'id',      header: t('scenarios.col_id'),      render: (s) => s.id,   width: 60 },
-    { key: 'name',    header: t('scenarios.col_name'),    render: (s) => s.name },
+    { key: 'id', header: t('scenarios.col_id'), render: (s) => s.id, width: 60 },
+    { key: 'name', header: t('scenarios.col_name'), render: (s) => s.name },
     {
       key: 'updated',
       header: t('scenarios.col_updated'),
-      width: 120,
-      render: (s) => new Date(s.updatedAt).toLocaleDateString(),
+      width: 140,
+      render: (s) => <Timestamp value={s.updatedAt} />,
     },
     {
       key: 'actions',
@@ -46,8 +49,12 @@ export function ScenariosPage() {
       align: 'right',
       render: (s) => (
         <span style={{ display: 'inline-flex', gap: 6 }}>
-          <Button size="sm" onClick={() => handleRun(s.id)}>{t('scenarios.action_run')}</Button>
-          <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>{t('scenarios.action_delete')}</Button>
+          <Button size="sm" onClick={() => handleRun(s.id)}>
+            {t('scenarios.action_run')}
+          </Button>
+          <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
+            {t('scenarios.action_delete')}
+          </Button>
         </span>
       ),
     },