Phase 13 release

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 5173
+    }
+  ]
+}

README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="docs/assets/banner.png" alt="Faturlens — browser-native invoice OCR" width="100%" />
+</p>
+
 # Faturlens
 
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](./LICENSE)
@@ -11,7 +15,7 @@ download.
 
 ## Architecture
 
-![Architecture](docs/architecture.svg)
+![Faturlens architecture](docs/assets/architecture.png)
 
 A two-pass pipeline runs entirely in a dedicated Web Worker: **Pass 1**
 transcribes the whole invoice to Markdown; **Pass 2** extracts schema-constrained

package.json

@@ -23,7 +23,7 @@
     "ci": "npm run typecheck && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@huggingface/transformers": "^3.8.1",
+    "@huggingface/transformers": "^4.2.0",
     "dexie": "^4.4.3",
     "dexie-react-hooks": "^1.1.7",
     "fflate": "^0.8.3",

src/App.module.css

@@ -4,6 +4,12 @@
   padding: 2rem 1.5rem;
 }
 
+.shellWide {
+  max-width: 90rem;
+  margin: 0 auto;
+  padding: 1.25rem 1.5rem;
+}
+
 .title {
   font-size: 2rem;
   font-weight: 700;
@@ -14,3 +20,42 @@
   margin: 0;
   opacity: 0.7;
 }
+
+.processing {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  border: 1px solid var(--fl-border, #d8d8d8);
+  border-radius: var(--fl-radius-lg, 0.75rem);
+  background: var(--fl-surface, #fafafa);
+}
+
+.stageLabel {
+  margin: 0 0 0.75rem;
+  font-weight: 600;
+}
+
+.progressBar {
+  height: 0.5rem;
+  border-radius: 999px;
+  background: #e4e4e4;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--fl-ok, #1a7f37);
+  transition: width 120ms linear;
+}
+
+.streamOut {
+  margin-top: 1rem;
+  max-height: 16rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  font-family: ui-monospace, monospace;
+  font-size: 0.8rem;
+  background: var(--fl-surface-raised, #fff);
+  border: 1px solid var(--fl-border, #e0e0e0);
+  border-radius: var(--fl-radius, 0.5rem);
+  padding: 0.75rem;
+}

src/App.test.tsx

@@ -1,15 +1,24 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import { App } from './App.tsx';
+import { DeviceProfileProvider } from './capability/useDeviceProfile.tsx';
+
+function renderApp() {
+  return render(
+    <DeviceProfileProvider>
+      <App />
+    </DeviceProfileProvider>,
+  );
+}
 
 describe('App', () => {
   it('renders the product name', () => {
-    render(<App />);
+    renderApp();
     expect(screen.getByRole('heading', { name: 'Faturlens' })).toBeInTheDocument();
   });
 
   it('renders the privacy tagline', () => {
-    render(<App />);
+    renderApp();
     expect(screen.getByText(/no data leaves your machine/i)).toBeInTheDocument();
   });
 });