ioncache · ioncache · Jun 29, 2026 · Jun 28, 2026 · Jun 29, 2026 · Jun 29, 2026
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <meta
+      name="theme-color"
+      content="#4f7a90"
+    />
+    <link
+      rel="manifest"
+      href="/manifest.webmanifest"
+    />
+    <title>ShotLab</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
+  </body>
+  </html>
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@shotlab/web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite --host 0.0.0.0",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "lint": "oxlint -f default",
+    "lint:ci": "oxlint -f github",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@shotlab/meticulous-client": "workspace:*",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.1.1",
+    "@mui/material": "^9.1.2",
+    "@mui/system": "^9.1.2",
+    "@mui/x-charts": "^9.7.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.3",
+    "jsdom": "^29.1.1",
+    "vite": "^8.1.0"
+  }
+}
diff --git a/apps/web/public/icon.svg b/apps/web/public/icon.svg
diff --git a/apps/web/public/manifest.webmanifest b/apps/web/public/manifest.webmanifest
@@ -0,0 +1,16 @@
+{
+  "name": "ShotLab",
+  "short_name": "ShotLab",
+  "display": "standalone",
+  "background_color": "#edf1f4",
+  "theme_color": "#4f7a90",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
@@ -0,0 +1,5 @@
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', (event) =>
+  event.waitUntil(self.clients.claim()),
+);
+self.addEventListener('fetch', () => {});
diff --git a/apps/web/src/app.test.tsx b/apps/web/src/app.test.tsx
@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => {
+  function createDeferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((nextResolve, nextReject) => {
+      resolve = nextResolve;
+      reject = nextReject;
+    });
+
+    return { promise, reject, resolve };
+  }
+
+  const deferreds = {
+    history: createDeferred<{ history: [] }>(),
+    lastProfile: createDeferred<{ title: string }>(),
+    machine: createDeferred<{
+      state: string;
+      water_temperature: number;
+      weight: number;
+    }>(),
+    settings: createDeferred<{ preheat: boolean }>(),
+  };
+
+  const client = {
+    getHistory: vi.fn(() => deferreds.history.promise),
+    getLastProfile: vi.fn(() => deferreds.lastProfile.promise),
+    getMachine: vi.fn(() => deferreds.machine.promise),
+    getSettings: vi.fn(() => deferreds.settings.promise),
+  };
+
+  return { client, deferreds };
+});
+
+vi.mock('./config', () => ({
+  readAppConfig: () => ({
+    meticulousBaseUrl: 'http://machine.local:8080',
+  }),
+}));
+
+vi.mock('./lib/create-dashboard-client', () => ({
+  createDashboardClient: () => mocks.client,
+}));
+
+import { App } from './app';
+
+describe('App', () => {
+  it('renders machine fields before the other requests finish', async () => {
+    render(<App />);
+
+    mocks.deferreds.machine.resolve({
+      state: 'Idle',
+      water_temperature: 93.4,
+      weight: 0.2,
+    });
+
+    await screen.findByText('93.4 C');
+    expect(screen.getAllByText('Idle')).toHaveLength(2);
+    expect(screen.getByText('0.2 g')).toBeDefined();
+    expect(screen.queryByText('Bloom')).toBeNull();
+    expect(screen.queryByText('Off')).toBeNull();
+
+    mocks.deferreds.lastProfile.resolve({ title: 'Bloom' });
+    await screen.findByText('Bloom');
+    expect(screen.queryByText('Off')).toBeNull();
+
+    mocks.deferreds.settings.resolve({ preheat: false });
+    await screen.findByText('Off');
+
+    mocks.deferreds.history.resolve({ history: [] });
+    await screen.findByText('No history rows have been mapped yet.');
+  });
+});