feat(web): React UI v2.0 — Phase 5 Task 43 (Monitor wrapper)

web/src/monitors/Monitor.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+interface MonitorProps {
+  title: string;
+  count?: number;
+  pinned: boolean;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}
+
+const wrap: CSSProperties = {
+  borderBottom: '1px solid var(--hair)',
+};
+
+const header: CSSProperties = {
+  height: 32,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '0 12px',
+  fontFamily: 'var(--ff-sans)',
+  fontSize: 11,
+  color: 'var(--ink-2)',
+  cursor: 'pointer',
+  userSelect: 'none',
+  background: 'var(--bg-page)',
+};
+
+export function Monitor({ title, count, pinned, defaultOpen = false, children }: MonitorProps) {
+  const [open, setOpen] = useState<boolean>(pinned || defaultOpen);
+  return (
+    <section data-monitor={title} data-pinned={pinned} data-collapsed={!open} style={wrap}>
+      <header
+        onClick={() => setOpen((v) => !v)}
+        style={header}
+      >
+        <span aria-hidden style={{ fontSize: 9, color: 'var(--ink-3)', width: 8 }}>
+          {open ? '▾' : '▸'}
+        </span>
+        {pinned && (
+          <span
+            data-pinned-dot
+            aria-hidden
+            style={{
+              display: 'inline-block',
+              width: 5,
+              height: 5,
+              borderRadius: '50%',
+              background: 'var(--acc)',
+            }}
+          />
+        )}
+        <span style={{ fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
+          {title}
+        </span>
+        {count !== undefined && (
+          <span style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--ff-mono)' }}>
+            {count}
+          </span>
+        )}
+      </header>
+      {open && (
+        <div style={{ padding: '8px 12px 12px', background: 'var(--bg-elev)' }}>
+          {children}
+        </div>
+      )}
+    </section>
+  );
+}

web/tests/component/Monitor.test.tsx

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '../_helpers/render';
+import { Monitor } from '@/monitors/Monitor';
+
+describe('<Monitor>', () => {
+  it('renders title + optional count', () => {
+    render(
+      <Monitor title="Selected" count={3} pinned>
+        <div>body content</div>
+      </Monitor>,
+    );
+    expect(screen.getByText('Selected')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('body content')).toBeInTheDocument();
+  });
+
+  it('omits count display when count is undefined', () => {
+    render(
+      <Monitor title="Health" pinned={false}>
+        <div>body</div>
+      </Monitor>,
+    );
+    expect(screen.getByText('Health')).toBeInTheDocument();
+    expect(screen.queryByText(/^\d+$/)).not.toBeInTheDocument();
+  });
+
+  it('renders pinned dot when pinned=true', () => {
+    const { container } = render(
+      <Monitor title="X" pinned>
+        <div>body</div>
+      </Monitor>,
+    );
+    expect(container.firstChild).toHaveAttribute('data-pinned', 'true');
+    expect(container.querySelector('[data-pinned-dot]')).not.toBeNull();
+  });
+
+  it('starts collapsed by default unless defaultOpen', () => {
+    const { container, rerender } = render(
+      <Monitor title="X" pinned={false}>
+        <div>body</div>
+      </Monitor>,
+    );
+    expect(container.firstChild).toHaveAttribute('data-collapsed', 'true');
+    expect(screen.queryByText('body')).not.toBeInTheDocument();
+
+    rerender(
+      <Monitor title="X" pinned={false} defaultOpen>
+        <div>body</div>
+      </Monitor>,
+    );
+    expect(screen.getByText('body')).toBeInTheDocument();
+  });
+
+  it('toggles open/closed on header click', () => {
+    const { container } = render(
+      <Monitor title="X" pinned={false}>
+        <div>body</div>
+      </Monitor>,
+    );
+    expect(screen.queryByText('body')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('X'));
+    expect(screen.getByText('body')).toBeInTheDocument();
+    expect(container.firstChild).toHaveAttribute('data-collapsed', 'false');
+  });
+});