@accounter/scraper-app 0.0.1

package/src/ui/__tests__/sources-tab.test.tsx

@@ -0,0 +1,139 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { SourcesTab } from '../screens/config/sources-tab.js';
+import type { SourceConfig } from '../screens/config/source-types.js';
+
+function mockFetch(sources: SourceConfig[]) {
+  const fetchMock = vi.fn(async (url: string, options?: RequestInit) => {
+    const method = options?.method ?? 'GET';
+
+    if (method === 'GET') {
+      return { ok: true, json: async () => sources } as Response;
+    }
+
+    if (method === 'POST') {
+      const body = JSON.parse(options!.body as string) as Partial<SourceConfig>;
+      const added = { ...body, id: 'new-id-1' } as SourceConfig;
+      sources = [...sources, added];
+      return { ok: true, json: async () => sources } as Response;
+    }
+
+    if (method === 'PUT') {
+      const id = (url as string).split('/').pop()!;
+      const patch = JSON.parse(options!.body as string) as Partial<SourceConfig>;
+      sources = sources.map(s => (s.id === id ? { ...s, ...patch } : s));
+      return { ok: true, json: async () => sources } as Response;
+    }
+
+    if (method === 'DELETE') {
+      const id = (url as string).split('/').pop()!;
+      sources = sources.filter(s => s.id !== id);
+      return { ok: true, json: async () => sources } as Response;
+    }
+
+    return { ok: false, json: async () => ({}) } as Response;
+  });
+
+  vi.stubGlobal('fetch', fetchMock);
+  return fetchMock;
+}
+
+beforeEach(() => {
+  mockFetch([]);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('SourcesTab', () => {
+  it('renders empty state message', async () => {
+    render(<SourcesTab />);
+    await waitFor(() => {
+      expect(screen.getByText(/no sources configured/i)).toBeTruthy();
+    });
+  });
+
+  it('renders a list of existing sources', async () => {
+    const sources: SourceConfig[] = [
+      { id: 's1', type: 'poalim', userCode: 'u1', password: 'p1', nickname: 'My Poalim' },
+    ];
+    vi.unstubAllGlobals();
+    mockFetch(sources);
+
+    render(<SourcesTab />);
+    await waitFor(() => {
+      expect(screen.getByText(/My Poalim/)).toBeTruthy();
+    });
+  });
+
+  it('opens add form when Add Source is clicked', async () => {
+    render(<SourcesTab />);
+    await waitFor(() => screen.getByText(/no sources/i));
+
+    await userEvent.click(screen.getByRole('button', { name: /add source/i }));
+    expect(screen.getByRole('button', { name: /save/i })).toBeTruthy();
+  });
+
+  it('adds a poalim source via form submission', async () => {
+    render(<SourcesTab />);
+    await waitFor(() => screen.getByText(/no sources/i));
+
+    await userEvent.click(screen.getByRole('button', { name: /add source/i }));
+
+    await userEvent.type(screen.getByLabelText(/user code/i), 'user123');
+    await userEvent.type(screen.getByLabelText(/^password/i), 'pass456');
+    await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: /^save$/i })).toBeNull();
+    });
+  });
+
+  it('opens edit form with existing values', async () => {
+    const sources: SourceConfig[] = [
+      { id: 's1', type: 'max', username: 'maxuser', password: 'pw', nickname: 'Max Account' },
+    ];
+    vi.unstubAllGlobals();
+    mockFetch(sources);
+
+    render(<SourcesTab />);
+    await waitFor(() => screen.getByText(/Max Account/));
+
+    await userEvent.click(screen.getByRole('button', { name: /edit/i }));
+    expect((screen.getByLabelText(/username/i) as HTMLInputElement).value).toBe('maxuser');
+  });
+
+  it('deletes a source when Delete is clicked', async () => {
+    const sources: SourceConfig[] = [
+      { id: 's1', type: 'max', username: 'maxuser', password: 'pw' },
+    ];
+    vi.unstubAllGlobals();
+    mockFetch(sources);
+
+    render(<SourcesTab />);
+    await waitFor(() => screen.getByRole('button', { name: /^delete$/i }));
+
+    await userEvent.click(screen.getByRole('button', { name: /^delete$/i }));
+    await waitFor(() => screen.getByRole('button', { name: /confirm delete/i }));
+    await userEvent.click(screen.getByRole('button', { name: /confirm delete/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/no sources/i)).toBeTruthy();
+    });
+  });
+
+  it('closes form on Cancel', async () => {
+    render(<SourcesTab />);
+    await waitFor(() => screen.getByText(/no sources/i));
+
+    await userEvent.click(screen.getByRole('button', { name: /add source/i }));
+    await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+
+    expect(screen.queryByRole('button', { name: /^save$/i })).toBeNull();
+  });
+});

package/src/ui/__tests__/vault-setup.test.tsx

@@ -0,0 +1,105 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { VaultContext, type VaultStatus } from '../contexts/vault-context.js';
+import { VaultSetup } from '../screens/vault-setup.js';
+
+function makeCtx(create: () => Promise<void> = vi.fn().mockResolvedValue(undefined)) {
+  return {
+    status: 'no-file' as VaultStatus,
+    error: null as string | null,
+    unlock: vi.fn(),
+    create,
+  };
+}
+
+function renderSetup(ctx = makeCtx()) {
+  return render(
+    <VaultContext.Provider value={ctx}>
+      <VaultSetup />
+    </VaultContext.Provider>,
+  );
+}
+
+describe('VaultSetup', () => {
+  it('renders step 1 on mount', () => {
+    renderSetup();
+    expect(screen.getByText(/step 1/i)).toBeTruthy();
+    expect(screen.getByLabelText(/master password/i)).toBeTruthy();
+  });
+
+  it('shows error when passwords do not match', async () => {
+    renderSetup();
+    await userEvent.type(screen.getByLabelText(/master password/i), 'password1!');
+    await userEvent.type(screen.getByLabelText(/confirm password/i), 'different!');
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert').textContent).toContain('do not match');
+    });
+  });
+
+  it('shows error when password is too short', async () => {
+    renderSetup();
+    await userEvent.type(screen.getByLabelText(/master password/i), 'short');
+    await userEvent.type(screen.getByLabelText(/confirm password/i), 'short');
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert').textContent).toContain('8 characters');
+    });
+  });
+
+  it('advances to step 2 after valid password', async () => {
+    renderSetup();
+    await userEvent.type(screen.getByLabelText(/master password/i), 'securePwd1!');
+    await userEvent.type(screen.getByLabelText(/confirm password/i), 'securePwd1!');
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/step 2/i)).toBeTruthy();
+    });
+  });
+
+  it('completes the full wizard and calls create', async () => {
+    const create = vi.fn().mockResolvedValue(undefined);
+    renderSetup(makeCtx(create));
+
+    // Step 1
+    await userEvent.type(screen.getByLabelText(/master password/i), 'securePwd1!');
+    await userEvent.type(screen.getByLabelText(/confirm password/i), 'securePwd1!');
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
+
+    // Step 2
+    await waitFor(() => screen.getByLabelText(/server url/i));
+    await userEvent.type(screen.getByLabelText(/server url/i), 'http://localhost:4000');
+    await userEvent.type(screen.getByLabelText(/api key/i), 'my-api-key');
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
+
+    // Step 3
+    await waitFor(() => screen.getByText(/step 3/i));
+    expect(screen.getByText(/http:\/\/localhost:4000/)).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: /create vault/i }));
+
+    await waitFor(() => {
+      expect(create).toHaveBeenCalledWith('securePwd1!', 'http://localhost:4000', 'my-api-key');
+    });
+  });
+
+  it('can navigate back from step 2 to step 1', async () => {
+    renderSetup();
+    await userEvent.type(screen.getByLabelText(/master password/i), 'securePwd1!');
+    await userEvent.type(screen.getByLabelText(/confirm password/i), 'securePwd1!');
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
+
+    await waitFor(() => screen.getByText(/step 2/i));
+    await userEvent.click(screen.getByRole('button', { name: /back/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/step 1/i)).toBeTruthy();
+    });
+  });
+});

package/src/ui/__tests__/vault-unlock.test.tsx

@@ -0,0 +1,78 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React, { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { VaultContext, type VaultStatus } from '../contexts/vault-context.js';
+import { VaultUnlock } from '../screens/vault-unlock.js';
+
+function makeCtx(
+  overrides: Partial<{
+    status: VaultStatus;
+    error: string | null;
+    unlock: (pw: string) => Promise<void>;
+  }> = {},
+) {
+  return {
+    status: 'locked' as VaultStatus,
+    error: null as string | null,
+    unlock: vi.fn().mockResolvedValue(undefined),
+    create: vi.fn(),
+    ...overrides,
+  };
+}
+
+function renderUnlock(ctx = makeCtx()) {
+  return render(
+    <VaultContext.Provider value={ctx}>
+      <VaultUnlock />
+    </VaultContext.Provider>,
+  );
+}
+
+describe('VaultUnlock', () => {
+  it('renders the password input and submit button', () => {
+    renderUnlock();
+    expect(screen.getByLabelText(/master password/i)).toBeTruthy();
+    expect(screen.getByRole('button', { name: /unlock/i })).toBeTruthy();
+  });
+
+  it('calls unlock with the entered password on submit', async () => {
+    const unlock = vi.fn().mockResolvedValue(undefined);
+    renderUnlock(makeCtx({ unlock }));
+
+    await userEvent.type(screen.getByLabelText(/master password/i), 'secret123');
+    await userEvent.click(screen.getByRole('button', { name: /unlock/i }));
+
+    expect(unlock).toHaveBeenCalledWith('secret123');
+  });
+
+  it('shows an error message when unlock sets vault.error', async () => {
+    // Stateful wrapper simulates the real context updating error after a failed unlock.
+    function UnlockWrapper() {
+      const [error, setError] = useState<string | null>(null);
+      const unlock = vi.fn().mockImplementation(async () => {
+        setError('Wrong password. Please try again.');
+      });
+      return (
+        <VaultContext.Provider value={{ status: 'locked', error, unlock, create: vi.fn() }}>
+          <VaultUnlock />
+        </VaultContext.Provider>
+      );
+    }
+    render(<UnlockWrapper />);
+
+    await userEvent.type(screen.getByLabelText(/master password/i), 'badpass');
+    await userEvent.click(screen.getByRole('button', { name: /unlock/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert').textContent).toContain('Wrong password');
+    });
+  });
+
+  it('does not show an error on initial render', () => {
+    renderUnlock();
+    expect(screen.queryByRole('alert')).toBeNull();
+  });
+});

package/src/ui/app.tsx

@@ -0,0 +1,109 @@
+import { useState, type ReactElement } from 'react';
+import { ErrorBoundary } from './components/error-boundary.js';
+import { useVault, VaultContext, VaultProvider } from './contexts/vault-context.js';
+import { useRunSocket } from './lib/ws.js';
+import { Config } from './screens/config/config.js';
+import { History } from './screens/history.js';
+import { Run } from './screens/run.js';
+import { VaultSetup } from './screens/vault-setup.js';
+import { VaultUnlock } from './screens/vault-unlock.js';
+
+export { VaultContext };
+
+type AppTab = 'run' | 'history' | 'config';
+
+const TABS: { id: AppTab; label: string }[] = [
+  { id: 'run', label: 'Run' },
+  { id: 'history', label: 'History' },
+  { id: 'config', label: 'Config' },
+];
+
+function hidden(visible: boolean): React.CSSProperties {
+  return visible ? {} : { display: 'none' };
+}
+
+function AppContent(): ReactElement {
+  const { status } = useVault();
+
+  if (status === 'loading') return <div>Loading…</div>;
+  if (status === 'no-file')
+    return (
+      <ErrorBoundary label="VaultSetup">
+        <VaultSetup />
+      </ErrorBoundary>
+    );
+  if (status === 'locked')
+    return (
+      <ErrorBoundary label="VaultUnlock">
+        <VaultUnlock />
+      </ErrorBoundary>
+    );
+
+  return (
+    <ErrorBoundary label="App">
+      <AppUnlocked />
+    </ErrorBoundary>
+  );
+}
+
+function AppUnlocked(): ReactElement {
+  const [tab, setTab] = useState<AppTab>('run');
+  const socket = useRunSocket();
+
+  return (
+    <main style={{ maxWidth: 800, margin: '0 auto', padding: 24 }}>
+      <nav
+        role="tablist"
+        style={{ display: 'flex', gap: 4, borderBottom: '2px solid #ddd', marginBottom: 20 }}
+      >
+        {TABS.map(({ id, label }) => (
+          <button
+            key={id}
+            role="tab"
+            aria-selected={tab === id}
+            onClick={() => setTab(id)}
+            style={{
+              padding: '8px 16px',
+              border: 'none',
+              background: 'none',
+              cursor: 'pointer',
+              borderBottom: tab === id ? '2px solid #333' : '2px solid transparent',
+              fontWeight: tab === id ? 'bold' : 'normal',
+              marginBottom: -2,
+            }}
+          >
+            {label}
+            {id === 'run' && socket.runStatus === 'running' && (
+              <span style={{ marginLeft: 6, color: '#2563eb', fontSize: '0.75em' }}>●</span>
+            )}
+          </button>
+        ))}
+      </nav>
+
+      {/* Always mounted — visibility toggled via CSS so WS state survives tab switches */}
+      <div style={hidden(tab === 'run')}>
+        <ErrorBoundary label="Run">
+          <Run {...socket} onNavigateAccounts={() => setTab('config')} isVisible={tab === 'run'} />
+        </ErrorBoundary>
+      </div>
+      {tab === 'history' && (
+        <ErrorBoundary label="History">
+          <History />
+        </ErrorBoundary>
+      )}
+      {tab === 'config' && (
+        <ErrorBoundary label="Config">
+          <Config />
+        </ErrorBoundary>
+      )}
+    </main>
+  );
+}
+
+export function App(): ReactElement {
+  return (
+    <VaultProvider>
+      <AppContent />
+    </VaultProvider>
+  );
+}

package/src/ui/components/error-boundary.tsx

@@ -0,0 +1,54 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+
+type Props = { children: ReactNode; label?: string };
+type State = { error: Error | null };
+
+export class ErrorBoundary extends Component<Props, State> {
+  override state: State = { error: null };
+
+  static override getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
+    // Log to Fastify server log via console.error so it appears in server output
+    console.error(`[ErrorBoundary:${this.props.label ?? 'unknown'}]`, error, info.componentStack);
+  }
+
+  override render(): ReactNode {
+    if (this.state.error) {
+      return (
+        <div
+          role="alert"
+          style={{
+            padding: 24,
+            margin: 16,
+            border: '1px solid #fca5a5',
+            borderRadius: 8,
+            background: '#fef2f2',
+          }}
+        >
+          <h3 style={{ margin: '0 0 8px', color: '#b91c1c' }}>Something went wrong</h3>
+          <p
+            style={{
+              margin: '0 0 16px',
+              color: '#7f1d1d',
+              fontSize: '0.9em',
+              fontFamily: 'monospace',
+            }}
+          >
+            {this.state.error.message}
+          </p>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            style={{ padding: '6px 16px', cursor: 'pointer' }}
+          >
+            Reload
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/ui/components/otp-modal.tsx

@@ -0,0 +1,82 @@
+import { useState, type ReactElement } from 'react';
+import type { ClientMessage } from '../../shared/ws-protocol.js';
+
+type Props = {
+  sourceId: string;
+  onSubmit: (msg: ClientMessage) => void;
+};
+
+export function OtpModal({ sourceId, onSubmit }: Props): ReactElement {
+  const [otp, setOtp] = useState('');
+
+  function handleSubmit() {
+    if (!otp.trim()) return;
+    onSubmit({ type: 'otp-submit', sourceId, otp: otp.trim() });
+    setOtp('');
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="OTP required"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0,0,0,0.45)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+      }}
+    >
+      <div
+        style={{
+          background: '#fff',
+          borderRadius: 8,
+          padding: 28,
+          minWidth: 320,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
+        }}
+      >
+        <h2 style={{ margin: '0 0 8px', fontSize: '1.1em' }}>One-Time Password Required</h2>
+        <p style={{ margin: '0 0 16px', color: '#555', fontSize: '0.9em' }}>
+          Source: <strong>{sourceId}</strong>
+        </p>
+        <label htmlFor="otp-input" style={{ display: 'block', marginBottom: 6, fontWeight: 500 }}>
+          OTP Code
+        </label>
+        <input
+          id="otp-input"
+          type="text"
+          value={otp}
+          onChange={e => setOtp(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') handleSubmit();
+          }}
+          autoFocus
+          placeholder="Enter OTP…"
+          style={{ width: '100%', padding: '6px 10px', fontSize: '1em', boxSizing: 'border-box' }}
+        />
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!otp.trim()}
+            style={{
+              padding: '6px 20px',
+              background: '#2563eb',
+              color: '#fff',
+              border: 'none',
+              borderRadius: 5,
+              cursor: otp.trim() ? 'pointer' : 'default',
+              opacity: otp.trim() ? 1 : 0.5,
+            }}
+          >
+            Submit OTP
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/components/skeleton.tsx

@@ -0,0 +1,58 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+const pulse: CSSProperties = {
+  background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
+  backgroundSize: '200% 100%',
+  animation: 'skeleton-pulse 1.4s ease infinite',
+  borderRadius: 4,
+};
+
+// Inject keyframes once via a style tag approach — no CSS file needed
+let injected = false;
+function ensureKeyframes() {
+  if (injected || typeof document === 'undefined') return;
+  injected = true;
+  const style = document.createElement('style');
+  style.textContent = `@keyframes skeleton-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }`;
+  document.head.appendChild(style);
+}
+
+export function SkeletonRow({
+  height = 18,
+  width = '100%',
+}: {
+  height?: number;
+  width?: number | string;
+}): ReactElement {
+  ensureKeyframes();
+  return <div style={{ ...pulse, height, width, marginBottom: 8 }} />;
+}
+
+export function SkeletonTable({
+  rows = 4,
+  cols = 5,
+}: {
+  rows?: number;
+  cols?: number;
+}): ReactElement {
+  ensureKeyframes();
+  return (
+    <table
+      style={{ width: '100%', borderCollapse: 'collapse' }}
+      aria-busy="true"
+      aria-label="Loading…"
+    >
+      <tbody>
+        {Array.from({ length: rows }, (_, r) => (
+          <tr key={r} style={{ borderBottom: '1px solid #f0f0f0' }}>
+            {Array.from({ length: cols }, (_, c) => (
+              <td key={c} style={{ padding: '10px 8px' }}>
+                <div style={{ ...pulse, height: 14, width: c === 0 ? '70%' : '50%' }} />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}