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/ui/Breadcrumbs/Breadcrumbs.tsx

@@ -16,7 +16,13 @@ export interface BreadcrumbsProps {
 export function Breadcrumbs({ items, separator, className }: BreadcrumbsProps) {
   const sep = separator ?? (
     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-      <path d="M4 2L8 6L4 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M4 2L8 6L4 10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
 
@@ -28,11 +34,17 @@ export function Breadcrumbs({ items, separator, className }: BreadcrumbsProps) {
           return (
             <li key={i} className={styles.item}>
               {isLast ? (
-                <span className={styles.current} aria-current="page">{item.label}</span>
+                <span className={styles.current} aria-current="page">
+                  {item.label}
+                </span>
               ) : item.href ? (
-                <a href={item.href} className={styles.link} onClick={item.onClick}>{item.label}</a>
+                <a href={item.href} className={styles.link} onClick={item.onClick}>
+                  {item.label}
+                </a>
               ) : (
-                <button type="button" className={styles.link} onClick={item.onClick}>{item.label}</button>
+                <button type="button" className={styles.link} onClick={item.onClick}>
+                  {item.label}
+                </button>
               )}
               {!isLast && <span className={styles.separator}>{sep}</span>}
             </li>

client/src/ui/Button/Button.tsx

@@ -18,7 +18,9 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={[styles.button, styles[variant], styles[size], className].filter(Boolean).join(' ')}
+      className={[styles.button, styles[variant], styles[size], className]
+        .filter(Boolean)
+        .join(' ')}
       disabled={disabled || loading}
       {...props}
     >

client/src/ui/Input/Input.tsx

@@ -18,7 +18,9 @@ export function Input({ label, hint, error, className, ...props }: InputProps) {
       )}
       <input
         id={id}
-        className={[styles.input, error ? styles.hasError : '', className].filter(Boolean).join(' ')}
+        className={[styles.input, error ? styles.hasError : '', className]
+          .filter(Boolean)
+          .join(' ')}
         aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}
         aria-invalid={error ? true : undefined}
         {...props}

client/src/ui/Select/Select.tsx

@@ -15,7 +15,15 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
   placeholder?: string;
 }
 
-export function Select({ label, hint, error, options, placeholder, className, ...props }: SelectProps) {
+export function Select({
+  label,
+  hint,
+  error,
+  options,
+  placeholder,
+  className,
+  ...props
+}: SelectProps) {
   const id = useId();
   return (
     <div className={styles.wrapper}>
@@ -27,7 +35,9 @@ export function Select({ label, hint, error, options, placeholder, className, ..
       <div className={styles.control}>
         <select
           id={id}
-          className={[styles.select, error ? styles.hasError : '', className].filter(Boolean).join(' ')}
+          className={[styles.select, error ? styles.hasError : '', className]
+            .filter(Boolean)
+            .join(' ')}
           aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}
           aria-invalid={error ? true : undefined}
           {...props}
@@ -45,7 +55,13 @@ export function Select({ label, hint, error, options, placeholder, className, ..
         </select>
         <span className={styles.chevron} aria-hidden="true">
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-            <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path
+              d="M2 4L6 8L10 4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
           </svg>
         </span>
       </div>

client/src/ui/SidePanel/SidePanel.tsx

@@ -32,7 +32,9 @@ export function SidePanel({
 
   return (
     <aside
-      className={[styles.panel, collapsed ? styles.collapsed : '', className].filter(Boolean).join(' ')}
+      className={[styles.panel, collapsed ? styles.collapsed : '', className]
+        .filter(Boolean)
+        .join(' ')}
       style={{ '--side-panel-width': `${width}px` } as React.CSSProperties}
       aria-expanded={!collapsed}
     >

client/src/ui/Timestamp/Timestamp.module.css

@@ -0,0 +1,18 @@
+.timestamp {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+  line-height: 1.6;
+  background: var(--color-neutral-bg);
+  color: var(--color-neutral-fg);
+  cursor: default;
+}
+
+.timestamp:hover {
+  background: var(--color-bg-subtle);
+}

client/src/ui/Timestamp/Timestamp.tsx

@@ -0,0 +1,18 @@
+import moment from 'moment';
+import styles from './Timestamp.module.css';
+
+export interface TimestampProps {
+  value: string | number | Date;
+}
+
+export function Timestamp({ value }: TimestampProps) {
+  const m = moment(value);
+  const iso = m.toISOString();
+  const relative = m.fromNow();
+
+  return (
+    <span className={styles.timestamp} title={iso} aria-label={iso}>
+      {relative}
+    </span>
+  );
+}

client/src/ui/index.ts

@@ -21,5 +21,8 @@ export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs/Breadcrumbs
 
 export { ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher';
 
+export { Timestamp } from './Timestamp/Timestamp';
+export type { TimestampProps } from './Timestamp/Timestamp';
+
 export { Table } from './Table/Table';
 export type { TableProps, TableColumn } from './Table/Table';