No documents yet. Upload an invoice to get started.
; + } + + return ( +-
+ {documents.map((doc) => (
+
- + + {doc.status} + {doc.status === 'failed' ? ( + + ) : null} + + + ))} +
+
+ );
+ }
+}
diff --git a/src/ui/Footer.test.tsx b/src/ui/Footer.test.tsx
new file mode 100644
index 0000000..03367f3
--- /dev/null
+++ b/src/ui/Footer.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { APP_VERSION } from '../lib/version.ts';
+import { ErrorBoundary } from './ErrorBoundary.tsx';
+import { Footer } from './Footer.tsx';
+
+describe('Footer', () => {
+ it('shows version, model id, and prompt versions', () => {
+ render();
+ expect(screen.getByText(new RegExp(`v${APP_VERSION}`))).toBeInTheDocument();
+ expect(screen.getByText(/LFM2\.5-VL-1\.6B-ONNX/)).toBeInTheDocument();
+ expect(screen.getByText(/PASS1_PROMPT_V1/)).toBeInTheDocument();
+ });
+});
+
+function Boom(): React.JSX.Element {
+ throw new Error('kaboom');
+}
+
+describe('ErrorBoundary', () => {
+ it('renders a fallback with a copy-diagnostics action on error', () => {
+ render(
+ Something went wrong
+Faturlens hit an unexpected error. Your data stays on this device.
+ +
+
+ {open ? (
+
+ );
+}
diff --git a/src/ui/Welcome.module.css b/src/ui/Welcome.module.css
new file mode 100644
index 0000000..22a90cf
--- /dev/null
+++ b/src/ui/Welcome.module.css
@@ -0,0 +1,62 @@
+.welcome {
+ max-width: 40rem;
+ margin: 2rem auto;
+ padding: 2rem;
+ border: 1px solid var(--fl-border, #d8d8d8);
+ border-radius: var(--fl-radius-lg, 0.75rem);
+ background: var(--fl-surface, #fafafa);
+ text-align: center;
+}
+
+.welcome h2 {
+ margin-top: 0;
+}
+
+.actions {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: center;
+ margin-top: 1.5rem;
+ flex-wrap: wrap;
+}
+
+.primary,
+.secondary {
+ font: inherit;
+ padding: 0.5rem 1.1rem;
+ border-radius: var(--fl-radius, 0.5rem);
+ cursor: pointer;
+}
+.primary {
+ border: 1px solid var(--fl-ok, #1a7f37);
+ background: var(--fl-ok, #1a7f37);
+ color: #fff;
+}
+.secondary {
+ border: 1px solid var(--fl-border, #bbb);
+ background: transparent;
+ color: inherit;
+}
+
+.card {
+ max-width: 36rem;
+ margin: 1.5rem auto;
+ padding: 1.25rem 1.5rem;
+ border-radius: var(--fl-radius-lg, 0.75rem);
+ border: 1px solid var(--fl-error, #b42318);
+ background: var(--fl-error-bg, #fde8e8);
+ color: var(--fl-error, #8a1f1f);
+}
+.card h3 {
+ margin: 0 0 0.5rem;
+}
+.card button {
+ font: inherit;
+ margin-top: 0.75rem;
+ padding: 0.4rem 0.9rem;
+ border-radius: var(--fl-radius, 0.5rem);
+ border: 1px solid currentColor;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+}
diff --git a/src/ui/Welcome.tsx b/src/ui/Welcome.tsx
new file mode 100644
index 0000000..987c56d
--- /dev/null
+++ b/src/ui/Welcome.tsx
@@ -0,0 +1,48 @@
+import styles from './Welcome.module.css';
+
+export interface WelcomeProps {
+ onLoadDemos: () => void;
+ onUpload: () => void;
+}
+
+/** First-run welcome with a demo loader. */
+export function Welcome({ onLoadDemos, onUpload }: WelcomeProps): React.JSX.Element {
+ return (
+
+ {timings.map((t) => (
+
+ ) : null}
+
+ {t.stage}
+ {Math.round(t.ms)} ms
+
+ ))}
+ {tokensPerSecond !== undefined ? (
+
+ throughput
+ {tokensPerSecond.toFixed(1)} tok/s
+
+ ) : null}
+ {peakMemoryEstimateMB !== undefined ? (
+
+ peak memory (est.)
+ ~{peakMemoryEstimateMB} MB
+
+ ) : null}
+ Welcome to Faturlens
++ Drop an invoice (PNG, JPEG, WebP, or PDF) and Faturlens extracts structured data entirely on + your device — no server, no upload, no data leaving your machine. +
+
+
+
+
+
+
+ );
+}
diff --git a/src/ui/a11y.test.tsx b/src/ui/a11y.test.tsx
new file mode 100644
index 0000000..0997ae6
--- /dev/null
+++ b/src/ui/a11y.test.tsx
@@ -0,0 +1,35 @@
+import { render } from '@testing-library/react';
+import axe from 'axe-core';
+import { describe, expect, it } from 'vitest';
+import { Welcome } from './Welcome.tsx';
+import { FailureCard } from './Welcome.tsx';
+
+async function seriousViolations(container: HTMLElement): Promise{title}
+{message}
+ {onRetry ? ( + + ) : null} +
+
+
+ {label}
+ {edited ? (
+
+ ✎
+
+ ) : null}
+
+ {
+ setDraft(e.target.value);
+ }}
+ onFocus={() => {
+ setFocused(true);
+ }}
+ onBlur={() => {
+ setFocused(false);
+ commit();
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ commit();
+ } else if (e.key === 'Escape') {
+ setDraft(initial);
+ }
+ }}
+ />
+
+ {focused && findings.length > 0 ? (
+ -
+ {findings.map((finding) => (
+
- + {finding.message} + {finding.suggestion !== undefined ? ` (suggested: ${finding.suggestion})` : ''} + + ))} +
+
+ );
+}
diff --git a/src/ui/review/ReviewForm.test.tsx b/src/ui/review/ReviewForm.test.tsx
new file mode 100644
index 0000000..b4b263f
--- /dev/null
+++ b/src/ui/review/ReviewForm.test.tsx
@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import type { Field, InvoiceV1, LineItem, Party } from '../../schema/invoice.ts';
+import type { RuleContext } from '../../schema/rules/index.ts';
+import { ReviewForm } from './ReviewForm.tsx';
+import { useReview } from './useReview.ts';
+
+const ctx: RuleContext = { today: new Date('2026-06-07T00:00:00Z') };
+
+function f
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+interface LineItemsProps {
+ state: ReviewState;
+ dispatch: (action: ReviewAction) => void;
+ clock: () => number;
+}
+
+function LineItems({ state, dispatch, clock }: LineItemsProps): React.JSX.Element {
+ const { invoice, validation } = state;
+ return (
+ Vendor
+ {renderRows(VENDOR_FIELDS)} +Invoice
+ {renderRows(META_FIELDS)} +Line items
+Totals
+ {renderRows(TOTAL_FIELDS)} +
+ {verdict}
+ {warnings ? (
+
+ ) : null}
+
+
+ | Description | +Qty | +Unit | +Amount | ++ | + { + dispatch({ + type: 'editField', + path: `lineItems.${String(i)}.${key}`, + value: e.target.value, + at: clock(), + }); + }} + /> + | + ); + return ( +
|---|---|---|---|---|
| + + | +||||
| + + {validation.fieldStatus.lineItems === 'error' ? ( + line items issue + ) : null} + | +
+
+ );
+}
diff --git a/src/ui/review/review.module.css b/src/ui/review/review.module.css
new file mode 100644
index 0000000..24cda27
--- /dev/null
+++ b/src/ui/review/review.module.css
@@ -0,0 +1,215 @@
+.screen {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ gap: 1rem;
+ height: 100%;
+ min-height: 0;
+}
+
+@media (max-width: 1280px) {
+ .screen {
+ grid-template-columns: 1fr;
+ }
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ overflow: auto;
+ padding-right: 0.5rem;
+}
+
+.group {
+ border: 1px solid var(--fl-border);
+ border-radius: var(--fl-radius-lg);
+ padding: 1rem;
+ background: var(--fl-surface);
+}
+
+.groupTitle {
+ margin: 0 0 0.75rem;
+ font-size: 0.95rem;
+ font-weight: 700;
+}
+
+.row {
+ display: grid;
+ grid-template-columns: 9rem 1fr;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.label {
+ font-size: 0.82rem;
+ color: var(--fl-text-muted);
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+}
+
+.dot {
+ width: 0.6rem;
+ height: 0.6rem;
+ border-radius: 50%;
+ display: inline-block;
+ flex: none;
+}
+.dotOk {
+ background: var(--fl-ok);
+}
+.dotWarning {
+ background: var(--fl-warning);
+}
+.dotError {
+ background: var(--fl-error);
+}
+
+.input {
+ font: inherit;
+ padding: 0.35rem 0.5rem;
+ border: 1px solid var(--fl-border);
+ border-radius: var(--fl-radius);
+ background: var(--fl-surface-raised);
+ color: var(--fl-text);
+ width: 100%;
+}
+.inputError {
+ border-color: var(--fl-error);
+}
+.inputWarning {
+ border-color: var(--fl-warning);
+}
+
+.edited {
+ color: var(--fl-text-muted);
+ font-size: 0.75rem;
+}
+
+.findings {
+ grid-column: 2;
+ margin: 0.15rem 0 0;
+ padding: 0;
+ list-style: none;
+ font-size: 0.75rem;
+}
+.findingError {
+ color: var(--fl-error);
+}
+.findingWarning {
+ color: var(--fl-warning);
+}
+
+.table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.82rem;
+}
+.table th,
+.table td {
+ border: 1px solid var(--fl-border);
+ padding: 0.25rem;
+}
+.cellInput {
+ font: inherit;
+ width: 100%;
+ border: none;
+ background: transparent;
+ color: inherit;
+}
+.disagree {
+ background: var(--fl-error-bg);
+}
+
+.iconButton {
+ font: inherit;
+ border: 1px solid var(--fl-border);
+ background: var(--fl-surface-raised);
+ border-radius: var(--fl-radius);
+ cursor: pointer;
+ padding: 0.15rem 0.5rem;
+}
+
+.approvalBar {
+ position: sticky;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.75rem;
+ border-top: 1px solid var(--fl-border);
+ background: var(--fl-surface);
+}
+
+.verdict {
+ font-weight: 700;
+ text-transform: uppercase;
+ font-size: 0.75rem;
+ letter-spacing: 0.04em;
+}
+.verdictClean {
+ color: var(--fl-ok);
+}
+.verdictNeedsReview {
+ color: var(--fl-warning);
+}
+.verdictRejected {
+ color: var(--fl-error);
+}
+
+.approveButton {
+ font: inherit;
+ margin-left: auto;
+ padding: 0.45rem 1.1rem;
+ border-radius: var(--fl-radius);
+ border: 1px solid var(--fl-ok);
+ background: var(--fl-ok);
+ color: #fff;
+ cursor: pointer;
+}
+.approveButton:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+ background: var(--fl-text-muted);
+ border-color: var(--fl-text-muted);
+}
+
+.imagePane {
+ border: 1px solid var(--fl-border);
+ border-radius: var(--fl-radius-lg);
+ background: var(--fl-surface);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+.imageControls {
+ display: flex;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ border-bottom: 1px solid var(--fl-border);
+}
+.imageViewport {
+ flex: 1;
+ overflow: hidden;
+ position: relative;
+ cursor: grab;
+ background: #2a2a2a;
+}
+.imageViewport img {
+ position: absolute;
+ transform-origin: 0 0;
+ user-select: none;
+}
+
+.drawer {
+ margin-top: 1rem;
+}
+.drawerToggle {
+ font: inherit;
+ background: none;
+ border: none;
+ color: var(--fl-text-muted);
+ cursor: pointer;
+ padding: 0.25rem 0;
+}
diff --git a/src/ui/review/state.test.ts b/src/ui/review/state.test.ts
new file mode 100644
index 0000000..ee968bd
--- /dev/null
+++ b/src/ui/review/state.test.ts
@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest';
+import type { Field, InvoiceV1, LineItem, Party } from '../../schema/invoice.ts';
+import type { RuleContext } from '../../schema/rules/index.ts';
+import {
+ canApprove,
+ initReviewState,
+ reviewReducer,
+ valueAtPath,
+ type ReviewState,
+} from './state.ts';
+
+const ctx: RuleContext = { today: new Date('2026-06-07T00:00:00Z') };
+
+function f
+
+
+
+
+
+ {showTranscript ? (
+
+ ) : null}
+