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/.prettierignore

@@ -0,0 +1,5 @@
+dist/
+storybook-static/
+node_modules/
+*.css
+*.json

client/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always"
+}

client/.storybook/main.ts

@@ -1,26 +1,23 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
-import { dirname } from "path"
+import { dirname } from 'path';
 
-import { fileURLToPath } from "url"
+import { fileURLToPath } from 'url';
 
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
 function getAbsolutePath(value: string) {
-  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)))
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
 }
 const config: StorybookConfig = {
-  "stories": [
-    "./stories/**/*.mdx",
-    "./stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
+  stories: ['./stories/**/*.mdx', './stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
     getAbsolutePath('@storybook/addon-vitest'),
     getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-docs')
+    getAbsolutePath('@storybook/addon-docs'),
   ],
-  "framework": getAbsolutePath('@storybook/react-vite')
+  framework: getAbsolutePath('@storybook/react-vite'),
 };
 export default config;

client/.storybook/preview.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import type { Preview } from '@storybook/react-vite'
-import '../src/ui/tokens.css'
+import React from 'react';
+import type { Preview } from '@storybook/react-vite';
+import '../src/ui/tokens.css';
 
 const preview: Preview = {
   globalTypes: {
@@ -20,13 +20,13 @@ const preview: Preview = {
   },
   decorators: [
     (Story, context) => {
-      const theme = (context.globals['theme'] as string) ?? 'light'
-      document.documentElement.setAttribute('data-theme', theme)
+      const theme = (context.globals['theme'] as string) ?? 'light';
+      document.documentElement.setAttribute('data-theme', theme);
       return (
         <div style={{ background: 'var(--color-bg)', minHeight: '100vh', padding: 0 }}>
           <Story />
         </div>
-      )
+      );
     },
   ],
   parameters: {
@@ -40,6 +40,6 @@ const preview: Preview = {
       test: 'todo',
     },
   },
-}
+};
 
-export default preview
+export default preview;

client/.storybook/stories/Breadcrumbs.stories.tsx

@@ -12,10 +12,7 @@ type Story = StoryObj<typeof Breadcrumbs>;
 
 export const Default: Story = {
   args: {
-    items: [
-      { label: 'Scenarios', href: '#' },
-      { label: 'Login flow' },
-    ],
+    items: [{ label: 'Scenarios', href: '#' }, { label: 'Login flow' }],
   },
 };
 

client/.storybook/stories/Card.stories.tsx

@@ -30,16 +30,29 @@ export const Default: Story = {
 export const ScenarioCard: Story = {
   render: () => (
     <Card>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          marginBottom: 8,
+        }}
+      >
         <span style={{ fontWeight: 600, fontSize: 14 }}>Login flow</span>
-        <Badge variant="success" dot>Passed</Badge>
+        <Badge variant="success" dot>
+          Passed
+        </Badge>
       </div>
       <p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--color-text-muted)' }}>
         Last run 2 minutes ago · 4 steps
       </p>
       <div style={{ display: 'flex', gap: 8 }}>
-        <Button size="sm" variant="primary">Run</Button>
-        <Button size="sm" variant="ghost">Edit</Button>
+        <Button size="sm" variant="primary">
+          Run
+        </Button>
+        <Button size="sm" variant="ghost">
+          Edit
+        </Button>
       </div>
     </Card>
   ),

client/.storybook/stories/Colors.stories.tsx

@@ -32,9 +32,20 @@ const surfaceColors = [
   { name: 'Primary fg', token: '--color-primary-fg', hex: '#2D3339' },
 ];
 
-function Swatch({ name, token, hex, role }: { name: string; token: string; hex: string; role?: string }) {
+function Swatch({
+  name,
+  token,
+  hex,
+  role,
+}: {
+  name: string;
+  token: string;
+  hex: string;
+  role?: string;
+}) {
   return (
-    <div style={{
+    <div
+      style={{
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
@@ -43,16 +54,29 @@ function Swatch({ name, token, hex, role }: { name: string; token: string; hex:
         minWidth: 160,
         flex: '1 1 160px',
         maxWidth: 220,
-    }}>
-      <div style={{
+      }}
+    >
+      <div
+        style={{
           background: `var(${token}, ${hex})`,
           height: 80,
-      }} />
+        }}
+      />
       <div style={{ padding: '10px 12px', background: 'var(--color-bg)' }}>
-        <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--color-text)', marginBottom: 2 }}>{name}</div>
-        {role && <div style={{ fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 4 }}>{role}</div>}
-        <div style={{ fontSize: 11, fontFamily: 'monospace', color: 'var(--color-text-muted)' }}>{hex}</div>
-        <div style={{ fontSize: 11, fontFamily: 'monospace', color: 'var(--color-text-muted)' }}>{token}</div>
+        <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--color-text)', marginBottom: 2 }}>
+          {name}
+        </div>
+        {role && (
+          <div style={{ fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 4 }}>
+            {role}
+          </div>
+        )}
+        <div style={{ fontSize: 11, fontFamily: 'monospace', color: 'var(--color-text-muted)' }}>
+          {hex}
+        </div>
+        <div style={{ fontSize: 11, fontFamily: 'monospace', color: 'var(--color-text-muted)' }}>
+          {token}
+        </div>
       </div>
     </div>
   );
@@ -61,12 +85,20 @@ function Swatch({ name, token, hex, role }: { name: string; token: string; hex:
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div style={{ marginBottom: 40 }}>
-      <h2 style={{ fontFamily: 'var(--font-family)', color: 'var(--color-text)', fontSize: 14, fontWeight: 600, marginBottom: 16, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
+      <h2
+        style={{
+          fontFamily: 'var(--font-family)',
+          color: 'var(--color-text)',
+          fontSize: 14,
+          fontWeight: 600,
+          marginBottom: 16,
+          textTransform: 'uppercase',
+          letterSpacing: '0.08em',
+        }}
+      >
         {title}
       </h2>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
-        {children}
-      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>{children}</div>
     </div>
   );
 }
@@ -74,18 +106,27 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function ColorPalette() {
   return (
     <div style={{ padding: 32, fontFamily: 'var(--font-family)' }}>
-      <h1 style={{ color: 'var(--color-text)', fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Color Palette</h1>
+      <h1 style={{ color: 'var(--color-text)', fontSize: 22, fontWeight: 700, marginBottom: 8 }}>
+        Color Palette
+      </h1>
       <p style={{ color: 'var(--color-text-muted)', fontSize: 14, marginBottom: 40 }}>
-        All colors are exposed as CSS custom properties on <code>:root</code> via <code>tokens.css</code>.
+        All colors are exposed as CSS custom properties on <code>:root</code> via{' '}
+        <code>tokens.css</code>.
       </p>
       <Section title="Brand">
-        {palette.map(c => <Swatch key={c.token} {...c} />)}
+        {palette.map((c) => (
+          <Swatch key={c.token} {...c} />
+        ))}
       </Section>
       <Section title="Semantic">
-        {semanticColors.map(c => <Swatch key={c.token} {...c} />)}
+        {semanticColors.map((c) => (
+          <Swatch key={c.token} {...c} />
+        ))}
       </Section>
       <Section title="Surface & Action">
-        {surfaceColors.map(c => <Swatch key={c.token} {...c} />)}
+        {surfaceColors.map((c) => (
+          <Swatch key={c.token} {...c} />
+        ))}
       </Section>
     </div>
   );

client/.storybook/stories/SidePanel.stories.tsx

@@ -5,7 +5,16 @@ const NAV_ITEMS = ['Dashboard', 'Scenarios', 'Environments', 'Reports', 'Setting
 
 function NavList() {
   return (
-    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
+    <ul
+      style={{
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       {NAV_ITEMS.map((item) => (
         <li key={item}>
           <button
@@ -41,7 +50,14 @@ const meta: Meta<typeof SidePanel> = {
     (Story) => (
       <div style={{ display: 'flex', height: 420, background: 'var(--color-bg)' }}>
         <Story />
-        <div style={{ flex: 1, padding: 'var(--space-6)', color: 'var(--color-text-muted)', fontSize: 'var(--font-size-sm)' }}>
+        <div
+          style={{
+            flex: 1,
+            padding: 'var(--space-6)',
+            color: 'var(--color-text-muted)',
+            fontSize: 'var(--font-size-sm)',
+          }}
+        >
           Main content area
         </div>
       </div>

client/.storybook/stories/Table.stories.tsx

@@ -37,9 +37,7 @@ export const Default: StoryObj<typeof Table<User>> = {
         header: 'Status',
         width: 110,
         render: (u) => (
-          <Badge variant={u.status === 'active' ? 'success' : 'neutral'}>
-            {u.status}
-          </Badge>
+          <Badge variant={u.status === 'active' ? 'success' : 'neutral'}>{u.status}</Badge>
         ),
       },
     ],

client/.storybook/stories/Timestamp.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Timestamp } from '../../src/ui/Timestamp/Timestamp';
+
+const meta: Meta<typeof Timestamp> = {
+  title: 'UI/Timestamp',
+  component: Timestamp,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof Timestamp>;
+
+const minutesAgo = (n: number) => new Date(Date.now() - n * 60_000).toISOString();
+const hoursAgo = (n: number) => new Date(Date.now() - n * 3_600_000).toISOString();
+const daysAgo = (n: number) => new Date(Date.now() - n * 86_400_000).toISOString();
+
+export const JustNow: Story = { args: { value: minutesAgo(1) } };
+export const MinutesAgo: Story = { args: { value: minutesAgo(15) } };
+export const HoursAgo: Story = { args: { value: hoursAgo(3) } };
+export const DaysAgo: Story = { args: { value: daysAgo(5) } };
+export const MonthsAgo: Story = { args: { value: daysAgo(90) } };

client/eslint.config.mjs

@@ -0,0 +1,34 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import prettier from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+export default tseslint.config(
+  { ignores: ['dist', 'storybook-static'] },
+
+  // Base JS rules
+  js.configs.recommended,
+
+  // TypeScript rules
+  ...tseslint.configs.recommended,
+
+  // React rules
+  {
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      prettier,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      'prettier/prettier': 'warn',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    },
+  },
+
+  // Disable ESLint formatting rules that conflict with Prettier
+  prettierConfig,
+);

client/package.json

@@ -8,17 +8,23 @@
     "build": "tsc -b && vite build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test:storybook": "vitest run --project storybook",
+    "lint": "eslint src .storybook",
+    "lint:fix": "eslint src .storybook --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \".storybook/**/*.{ts,tsx}\""
   },
   "dependencies": {
     "i18next": "^26.0.4",
     "lucide-react": "^1.7.0",
+    "moment": "^2.30.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^17.0.2",
     "react-router-dom": "^7.14.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-vitest": "^10.3.5",
@@ -28,9 +34,16 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser-playwright": "^4.1.3",
     "@vitest/coverage-v8": "^4.1.3",
+    "eslint": "^10.2.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "playwright": "^1.59.1",
+    "prettier": "^3.8.1",
     "storybook": "^10.3.5",
     "typescript": "~5.8.3",
+    "typescript-eslint": "^8.58.1",
     "vite": "^6.3.1",
     "vitest": "^4.1.3"
   }

client/src/hooks/useTheme.ts

@@ -19,7 +19,7 @@ export function useTheme() {
   }, [theme]);
 
   function toggleTheme() {
-    setTheme(t => (t === 'light' ? 'dark' : 'light'));
+    setTheme((t) => (t === 'light' ? 'dark' : 'light'));
   }
 
   return { theme, toggleTheme } as const;

client/src/i18n/index.ts

@@ -2,9 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import en from './locales/en.json';
 
-i18n
-  .use(initReactI18next)
-  .init({
+i18n.use(initReactI18next).init({
   resources: { en: { translation: en } },
   lng: 'en',
   fallbackLng: 'en',

client/src/main.tsx

@@ -1,9 +1,9 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { HashRouter } from 'react-router-dom'
-import './i18n'
-import './ui/tokens.css'
-import App from './App'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
+import './i18n';
+import './ui/tokens.css';
+import App from './App';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -11,4 +11,4 @@ createRoot(document.getElementById('root')!).render(
       <App />
     </HashRouter>
   </StrictMode>,
-)
+);

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() {
@@ -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,6 +29,7 @@ export function ScenariosPage() {
 
   const handleDelete = async (id: number) => {
     await scenarios.remove(id);
+    setLoading(true);
     load();
   };
 
@@ -36,8 +39,8 @@ export function ScenariosPage() {
     {
       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,17 +12,20 @@ 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();
   };
 
@@ -34,16 +37,14 @@ export function SessionsPage() {
       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',

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';