@accounter/scraper-app 0.0.1

package/src/ui/components/task-row.tsx

@@ -0,0 +1,241 @@
+import { useState, type ReactElement } from 'react';
+import type { TaskState } from '../lib/ws.js';
+
+type Props = {
+  sourceId: string;
+  nickname: string;
+  state: TaskState;
+  onNavigateAccounts?: () => void;
+};
+
+const BADGE_STYLES: Record<string, { background: string; color: string }> = {
+  pending: { background: '#e5e7eb', color: '#374151' },
+  running: { background: '#dbeafe', color: '#1d4ed8' },
+  done: { background: '#dcfce7', color: '#15803d' },
+  error: { background: '#fee2e2', color: '#b91c1c' },
+  blocked: { background: '#fef9c3', color: '#854d0e' },
+  'otp-required': { background: '#ede9fe', color: '#6d28d9' },
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  pending: 'Pending',
+  running: 'Running…',
+  done: 'Done',
+  error: 'Error',
+  blocked: 'Blocked',
+  'otp-required': 'OTP Required',
+};
+
+export function TaskRow({
+  sourceId: _sourceId,
+  nickname,
+  state,
+  onNavigateAccounts,
+}: Props): ReactElement {
+  const [expanded, setExpanded] = useState(false);
+  const badgeStyle = BADGE_STYLES[state.status] ?? BADGE_STYLES['pending']!;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+        padding: '10px 12px',
+        border: '1px solid #e5e7eb',
+        borderRadius: 6,
+        marginBottom: 8,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <span
+          style={{
+            ...badgeStyle,
+            padding: '2px 8px',
+            borderRadius: 12,
+            fontSize: '0.8em',
+            fontWeight: 600,
+            minWidth: 80,
+            textAlign: 'center',
+          }}
+        >
+          {state.status === 'running' ? '⟳ ' : ''}
+          {STATUS_LABELS[state.status] ?? state.status}
+        </span>
+        <span style={{ fontWeight: 500 }}>{nickname}</span>
+
+        {state.status === 'done' && (
+          <>
+            <span style={{ marginLeft: 'auto', fontSize: '0.9em', color: '#555' }}>
+              ↑ {state.inserted ?? 0} new / {state.skipped ?? 0} skipped
+              {(state.changedTransactions?.length ?? 0) > 0 && (
+                <> / {state.changedTransactions!.length} changed</>
+              )}
+            </span>
+            {((state.insertedTransactions?.length ?? 0) > 0 ||
+              (state.changedTransactions?.length ?? 0) > 0) && (
+              <button
+                type="button"
+                onClick={() => setExpanded(e => !e)}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  color: '#374151',
+                  fontSize: '0.85em',
+                }}
+              >
+                {expanded ? '▲ Hide' : '▼ Details'}
+              </button>
+            )}
+          </>
+        )}
+
+        {state.status === 'error' && (
+          <button
+            type="button"
+            onClick={() => setExpanded(e => !e)}
+            style={{
+              marginLeft: 'auto',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: '#b91c1c',
+              fontSize: '0.85em',
+            }}
+          >
+            {expanded ? '▲ Hide' : '▼ Details'}
+          </button>
+        )}
+      </div>
+
+      {state.status === 'error' && expanded && (
+        <div
+          style={{
+            background: '#fef2f2',
+            border: '1px solid #fecaca',
+            borderRadius: 4,
+            padding: 10,
+            fontSize: '0.85em',
+            fontFamily: 'monospace',
+          }}
+        >
+          <div style={{ fontWeight: 600, marginBottom: 4 }}>{state.error}</div>
+          {state.stack && (
+            <pre style={{ margin: 0, whiteSpace: 'pre-wrap', color: '#7f1d1d' }}>{state.stack}</pre>
+          )}
+        </div>
+      )}
+
+      {state.status === 'done' && expanded && (
+        <div style={{ fontSize: '0.85em', display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {(state.insertedTransactions?.length ?? 0) > 0 && (
+            <div>
+              <div style={{ fontWeight: 600, marginBottom: 4 }}>
+                New transactions ({state.insertedTransactions!.length})
+              </div>
+              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                <thead>
+                  <tr style={{ color: '#6b7280', textAlign: 'left' }}>
+                    <th style={{ padding: '2px 8px 2px 0' }}>Date</th>
+                    <th style={{ padding: '2px 8px 2px 0' }}>Description</th>
+                    <th style={{ padding: '2px 8px 2px 0' }}>Amount</th>
+                    <th style={{ padding: '2px 0' }}>Account</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {state.insertedTransactions!.map(t => (
+                    <tr key={t.id} style={{ borderTop: '1px solid #f3f4f6' }}>
+                      <td style={{ padding: '2px 8px 2px 0', color: '#6b7280' }}>
+                        {t.date ?? '—'}
+                      </td>
+                      <td style={{ padding: '2px 8px 2px 0' }}>{t.description ?? '—'}</td>
+                      <td style={{ padding: '2px 8px 2px 0', fontVariantNumeric: 'tabular-nums' }}>
+                        {t.amount ?? '—'}
+                      </td>
+                      <td style={{ padding: '2px 0', color: '#6b7280' }}>{t.account ?? '—'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {(state.changedTransactions?.length ?? 0) > 0 && (
+            <div>
+              <div style={{ fontWeight: 600, marginBottom: 4, color: '#b45309' }}>
+                Changed transactions ({state.changedTransactions!.length})
+              </div>
+              {state.changedTransactions!.map(ct => (
+                <div
+                  key={ct.id}
+                  style={{
+                    marginBottom: 6,
+                    padding: '6px 8px',
+                    background: '#fffbeb',
+                    border: '1px solid #fde68a',
+                    borderRadius: 4,
+                  }}
+                >
+                  <div style={{ color: '#6b7280', marginBottom: 4, fontFamily: 'monospace' }}>
+                    {ct.id}
+                  </div>
+                  <table style={{ borderCollapse: 'collapse' }}>
+                    <thead>
+                      <tr style={{ color: '#6b7280', textAlign: 'left' }}>
+                        <th style={{ padding: '1px 12px 1px 0' }}>Field</th>
+                        <th style={{ padding: '1px 12px 1px 0' }}>Old</th>
+                        <th style={{ padding: '1px 0' }}>New</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {ct.changedFields.map(f => (
+                        <tr key={f.field} style={{ borderTop: '1px solid #fde68a' }}>
+                          <td style={{ padding: '1px 12px 1px 0', fontFamily: 'monospace' }}>
+                            {f.field}
+                          </td>
+                          <td style={{ padding: '1px 12px 1px 0', color: '#b91c1c' }}>
+                            {f.oldValue ?? '—'}
+                          </td>
+                          <td style={{ padding: '1px 0', color: '#15803d' }}>
+                            {f.newValue ?? '—'}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {state.status === 'blocked' && (
+        <div style={{ fontSize: '0.85em', color: '#713f12', paddingLeft: 4 }}>
+          <div>Unknown accounts: {(state.blockedAccounts ?? []).join(', ')}</div>
+          {onNavigateAccounts ? (
+            <button
+              type="button"
+              onClick={onNavigateAccounts}
+              style={{
+                marginTop: 4,
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: '#1d4ed8',
+                padding: 0,
+                textDecoration: 'underline',
+                fontSize: '0.95em',
+              }}
+            >
+              Go to Accounts tab
+            </button>
+          ) : (
+            <span style={{ color: '#1d4ed8' }}>Go to Accounts tab</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/contexts/vault-context.tsx

@@ -0,0 +1,77 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import {
+  vaultCreate as apiCreate,
+  ApiError,
+  vaultStatus as apiStatus,
+  vaultUnlock as apiUnlock,
+} from '../lib/api.js';
+
+export type VaultStatus = 'loading' | 'locked' | 'no-file' | 'unlocked';
+
+type VaultContextValue = {
+  status: VaultStatus;
+  error: string | null;
+  unlock(password: string): Promise<void>;
+  create(password: string, serverUrl: string, apiKey: string): Promise<void>;
+};
+
+export const VaultContext = createContext<VaultContextValue | null>(null);
+
+export function VaultProvider({ children }: { children: ReactNode }): ReactElement {
+  const [status, setStatus] = useState<VaultStatus>('loading');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    apiStatus()
+      .then(s => {
+        if (!s.hasFile) setStatus('no-file');
+        else if (s.locked) setStatus('locked');
+        else setStatus('unlocked');
+      })
+      .catch(() => setStatus('locked'));
+  }, []);
+
+  const unlock = useCallback(async (password: string) => {
+    setError(null);
+    try {
+      await apiUnlock(password);
+      setStatus('unlocked');
+    } catch (e) {
+      setError(
+        e instanceof ApiError && e.status === 404
+          ? 'Vault not found.'
+          : 'Wrong password. Please try again.',
+      );
+    }
+  }, []);
+
+  const create = useCallback(async (password: string, serverUrl: string, apiKey: string) => {
+    setError(null);
+    try {
+      await apiCreate(password, serverUrl, apiKey);
+      setStatus('unlocked');
+    } catch {
+      setError('Failed to create vault. Please try again.');
+    }
+  }, []);
+
+  return (
+    <VaultContext.Provider value={{ status, error, unlock, create }}>
+      {children}
+    </VaultContext.Provider>
+  );
+}
+
+export function useVault(): VaultContextValue {
+  const ctx = useContext(VaultContext);
+  if (!ctx) throw new Error('useVault must be used inside VaultProvider');
+  return ctx;
+}

package/src/ui/lib/api.ts

@@ -0,0 +1,117 @@
+import type { BankAccount, Settings } from '../../server/vault.js';
+import type { RunRecord } from '../../shared/types.js';
+
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    message: string,
+  ) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}
+
+async function apiFetch<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, init);
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string };
+    throw new ApiError(res.status, body.error ?? `HTTP ${res.status}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+export function vaultStatus(): Promise<{ locked: boolean; hasFile: boolean }> {
+  return apiFetch('/api/vault/status');
+}
+
+export function vaultUnlock(password: string): Promise<{ ok: boolean }> {
+  return apiFetch('/api/vault/unlock', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password }),
+  });
+}
+
+export function vaultCreate(
+  password: string,
+  serverUrl: string,
+  apiKey: string,
+): Promise<{ ok: boolean }> {
+  return apiFetch('/api/vault/create', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password, serverUrl, apiKey }),
+  });
+}
+
+// ── Sources ───────────────────────────────────────────────────────────────────
+
+export function getSources<T>(): Promise<T[]> {
+  return apiFetch('/api/vault/sources');
+}
+
+export function createSource<T>(data: unknown): Promise<T[]> {
+  return apiFetch('/api/vault/sources', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+}
+
+export function updateSource<T>(id: string, data: unknown): Promise<T[]> {
+  return apiFetch(`/api/vault/sources/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+}
+
+export function deleteSource<T>(id: string): Promise<T[]> {
+  return apiFetch(`/api/vault/sources/${id}`, { method: 'DELETE' });
+}
+
+export function loadSettings(): Promise<Settings> {
+  return apiFetch('/api/vault/settings');
+}
+
+export function saveSettings(patch: Partial<Settings>): Promise<Settings> {
+  return apiFetch('/api/vault/settings', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(patch),
+  });
+}
+
+export function fetchAccounts(): Promise<BankAccount[]> {
+  return apiFetch('/api/vault/accounts');
+}
+
+export function updateStatus(id: string, status: 'accepted' | 'ignored'): Promise<BankAccount[]> {
+  return apiFetch(`/api/vault/accounts/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ status }),
+  });
+}
+
+export function deleteAccount(id: string): Promise<BankAccount[]> {
+  return apiFetch(`/api/vault/accounts/${id}`, { method: 'DELETE' });
+}
+
+// ── Vault path ────────────────────────────────────────────────────────────────
+
+export function getVaultPath(): Promise<{ path: string }> {
+  return apiFetch('/api/vault/path');
+}
+
+// ── Connection test ───────────────────────────────────────────────────────────
+
+export function testConnection(): Promise<{ ok: boolean; latencyMs?: number; error?: string }> {
+  return apiFetch('/api/vault/test-connection');
+}
+
+// ── History ───────────────────────────────────────────────────────────────────
+
+export function getHistory(): Promise<RunRecord[]> {
+  return apiFetch('/api/history');
+}

package/src/ui/lib/ws.ts

@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ClientMessage, RunCompleteMessage } from '../../shared/ws-protocol.js';
+import { ServerMessageSchema } from '../../shared/ws-protocol.js';
+
+export type TaskStatus = 'pending' | 'running' | 'done' | 'error' | 'blocked' | 'otp-required';
+
+export type InsertedTransactionSummary = {
+  id: string;
+  date?: string | null | undefined;
+  description?: string | null | undefined;
+  amount?: string | null | undefined;
+  account?: string | null | undefined;
+};
+
+export type ChangedTransaction = {
+  id: string;
+  changedFields: {
+    field: string;
+    oldValue?: string | null | undefined;
+    newValue?: string | null | undefined;
+  }[];
+};
+
+export type TaskState = {
+  status: TaskStatus;
+  inserted?: number;
+  skipped?: number;
+  error?: string;
+  stack?: string;
+  blockedAccounts?: string[];
+  otpSourceId?: string;
+  insertedTransactions?: InsertedTransactionSummary[];
+  changedTransactions?: ChangedTransaction[];
+};
+
+export type RunStatus = 'idle' | 'running' | 'complete';
+
+export type UseRunSocketResult = {
+  send: (msg: ClientMessage) => void;
+  taskStates: Map<string, TaskState>;
+  runStatus: RunStatus;
+  summary: RunCompleteMessage | null;
+};
+
+function wsUrl(): string {
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${window.location.host}/ws`;
+}
+
+export function useRunSocket(): UseRunSocketResult {
+  const [taskStates, setTaskStates] = useState<Map<string, TaskState>>(new Map());
+  const [runStatus, setRunStatus] = useState<RunStatus>('idle');
+  const [summary, setSummary] = useState<RunCompleteMessage | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    const ws = new WebSocket(wsUrl());
+    wsRef.current = ws;
+
+    ws.onmessage = event => {
+      let raw: unknown;
+      try {
+        raw = JSON.parse(event.data as string);
+      } catch {
+        return;
+      }
+
+      const result = ServerMessageSchema.safeParse(raw);
+      if (!result.success) return;
+      const msg = result.data;
+
+      setTaskStates(prev => {
+        const next = new Map(prev);
+        switch (msg.type) {
+          case 'task-pending':
+            next.set(msg.sourceId, { status: 'pending' });
+            break;
+          case 'task-running':
+            next.set(msg.sourceId, { ...next.get(msg.sourceId), status: 'running' });
+            break;
+          case 'task-done':
+            next.set(msg.sourceId, {
+              status: 'done',
+              inserted: msg.inserted,
+              skipped: msg.skipped,
+              insertedTransactions: msg.insertedTransactions,
+              changedTransactions: msg.changedTransactions,
+            });
+            break;
+          case 'task-error':
+            next.set(msg.sourceId, { status: 'error', error: msg.message, stack: msg.stack });
+            break;
+          case 'task-blocked':
+            next.set(msg.sourceId, {
+              status: 'blocked',
+              blockedAccounts: msg.unknownAccounts,
+            });
+            break;
+          case 'otp-required':
+            next.set(msg.sourceId, {
+              ...next.get(msg.sourceId),
+              status: 'otp-required',
+              otpSourceId: msg.sourceId,
+            });
+            break;
+          default:
+            break;
+        }
+        return next;
+      });
+
+      if (msg.type === 'run-complete') {
+        setRunStatus('complete');
+        setSummary(msg);
+      } else if (msg.type === 'task-running') {
+        setRunStatus('running');
+      }
+    };
+
+    return () => {
+      wsRef.current = null;
+      if (ws.readyState === WebSocket.CONNECTING) {
+        ws.onopen = () => ws.close();
+      } else {
+        ws.close();
+      }
+    };
+  }, []);
+
+  const send = useCallback((msg: ClientMessage) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(msg));
+    }
+  }, []);
+
+  return { send, taskStates, runStatus, summary };
+}

package/src/ui/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './app.js';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);