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/EnvironmentsPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { environments } from '../api';
 import type { Environment } from '../api';
-import { Table, type TableColumn } from '../ui';
+import { Table, type TableColumn, Timestamp } from '../ui';
 import styles from './Page.module.css';
 
 export function EnvironmentsPage() {
@@ -12,8 +12,8 @@ export function EnvironmentsPage() {
   const [error, setError] = useState<string | null>(null);
 
   const columns: TableColumn<Environment>[] = [
-    { key: 'id',      header: t('environments.col_id'),      render: (e) => e.id,   width: 60 },
-    { key: 'name',    header: t('environments.col_name'),    render: (e) => e.name },
+    { key: 'id', header: t('environments.col_id'), render: (e) => e.id, width: 60 },
+    { key: 'name', header: t('environments.col_name'), render: (e) => e.name },
     {
       key: 'urls',
       header: t('environments.col_urls'),
@@ -26,14 +26,14 @@ export function EnvironmentsPage() {
     {
       key: 'updated',
       header: t('environments.col_updated'),
-      width: 120,
-      render: (e) => new Date(e.updatedAt).toLocaleDateString(),
+      width: 140,
+      render: (e) => <Timestamp value={e.updatedAt} />,
     },
   ];
 
   useEffect(() => {
-    setLoading(true);
-    environments.list()
+    environments
+      .list()
       .then((res) => setItems(res.data))
       .catch((err: Error) => setError(err.message))
       .finally(() => setLoading(false));

client/src/pages/KeysPage.tsx

@@ -4,7 +4,9 @@ import { keys } from '../api';
 import { Table, type TableColumn } from '../ui';
 import styles from './Page.module.css';
 
-interface KeyRow { name: string }
+interface KeyRow {
+  name: string;
+}
 
 export function KeysPage() {
   const { t } = useTranslation();
@@ -17,8 +19,8 @@ export function KeysPage() {
   ];
 
   useEffect(() => {
-    setLoading(true);
-    keys.list()
+    keys
+      .list()
       .then((res) => setItems(res.keys.map((name) => ({ name }))))
       .catch((err: Error) => setError(err.message))
       .finally(() => setLoading(false));

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>
       ),
     },

client/src/pages/SessionsPage.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { sessions } from '../api';
 import type { Session } from '../api';
-import { Badge, Button, Table, type TableColumn } from '../ui';
+import { Badge, Button, Table, type TableColumn, Timestamp } from '../ui';
 import styles from './Page.module.css';
 
 export function SessionsPage() {
@@ -12,38 +12,39 @@ export function SessionsPage() {
   const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(() => {
-    setLoading(true);
-    sessions.list()
+    sessions
+      .list()
       .then((res) => setItems(res.data))
       .catch((err: Error) => setError(err.message))
       .finally(() => setLoading(false));
   }, []);
 
-  useEffect(load, [load]);
+  useEffect(() => {
+    load();
+  }, [load]);
 
   const handleDelete = async (id: number) => {
     await sessions.remove(id);
+    setLoading(true);
     load();
   };
 
   const columns: TableColumn<Session>[] = [
-    { key: 'id',      header: t('sessions.col_id'),       render: (s) => s.id,          width: 60 },
-    { key: 'name',    header: t('sessions.col_name'),     render: (s) => s.sessionName },
+    { key: 'id', header: t('sessions.col_id'), render: (s) => s.id, width: 60 },
+    { key: 'name', header: t('sessions.col_name'), render: (s) => s.sessionName },
     {
       key: 'status',
       header: t('sessions.col_status'),
       width: 100,
       render: (s) => (
-        <Badge variant={s.status === 'open' ? 'success' : 'neutral'}>
-          {s.status}
-        </Badge>
+        <Badge variant={s.status === 'open' ? 'success' : 'neutral'}>{s.status}</Badge>
       ),
     },
     {
       key: 'lastUsed',
       header: t('sessions.col_lastUsed'),
       width: 160,
-      render: (s) => s.lastUsedAt ? new Date(s.lastUsedAt).toLocaleString() : '—',
+      render: (s) => (s.lastUsedAt ? <Timestamp value={s.lastUsedAt} /> : '—'),
     },
     {
       key: 'actions',