diff --git a/docs/svelte-migration/reference/dash-1024-mode.png b/docs/svelte-migration/reference/dash-1024-mode.png
new file mode 100644
index 0000000..4427922
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1024-mode.png differ
diff --git a/docs/svelte-migration/reference/dash-1024-segmentation.png b/docs/svelte-migration/reference/dash-1024-segmentation.png
new file mode 100644
index 0000000..5847637
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1024-segmentation.png differ
diff --git a/docs/svelte-migration/reference/dash-1440-configuration.png b/docs/svelte-migration/reference/dash-1440-configuration.png
new file mode 100644
index 0000000..6ae43d6
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1440-configuration.png differ
diff --git a/docs/svelte-migration/reference/dash-1440-empty.png b/docs/svelte-migration/reference/dash-1440-empty.png
new file mode 100644
index 0000000..2620fc8
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1440-empty.png differ
diff --git a/docs/svelte-migration/reference/dash-1440-export.png b/docs/svelte-migration/reference/dash-1440-export.png
new file mode 100644
index 0000000..27a2d9a
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1440-export.png differ
diff --git a/docs/svelte-migration/reference/dash-1440-inpainting.png b/docs/svelte-migration/reference/dash-1440-inpainting.png
new file mode 100644
index 0000000..1baae61
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1440-inpainting.png differ
diff --git a/docs/svelte-migration/reference/dash-1440-mode.png b/docs/svelte-migration/reference/dash-1440-mode.png
new file mode 100644
index 0000000..20f9b57
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1440-mode.png differ
diff --git a/docs/svelte-migration/reference/dash-1440-segmentation.png b/docs/svelte-migration/reference/dash-1440-segmentation.png
new file mode 100644
index 0000000..4e14505
Binary files /dev/null and b/docs/svelte-migration/reference/dash-1440-segmentation.png differ
diff --git a/e2e/drivers/svelte.ts b/e2e/drivers/svelte.ts
new file mode 100644
index 0000000..4c5c75d
--- /dev/null
+++ b/e2e/drivers/svelte.ts
@@ -0,0 +1,255 @@
+import { expect, type Download, type Locator, type Page } from '@playwright/test';
+import { waitForImage } from '../helpers/image';
+import { fetchFixture } from '../helpers/oracle';
+import type {
+  MainTab,
+  Modifier,
+  SegmentationMode,
+  SliderName,
+  UiDriver,
+  UiTarget,
+  Workflow,
+} from './types';
+
+/**
+ * Svelte-specific implementation of `UiDriver`, built during the migration's
+ * first vertical slice (upload -> depth -> thresholds -> slices, plus legacy
+ * state restore and the log pane). Every Svelte selector and gesture used by
+ * the shared behavioral scenarios lives here; the scenario file itself never
+ * mentions a Svelte `data-testid`.
+ *
+ * Only `upload-depth-slices` is supported so far: every other workflow
+ * (segmentation, inpainting, export, ...) is not yet implemented in the new
+ * UI (see docs/svelte-migration/PARITY.md), so those methods throw.
+ */
+export class SvelteDriver implements UiDriver {
+  readonly target: UiTarget = 'svelte';
+
+  constructor(private readonly page: Page) {}
+
+  supports(workflow: Workflow): boolean {
+    return workflow === 'upload-depth-slices';
+  }
+
+  // Navigation
+
+  async goto(): Promise<void> {
+    await this.page.goto('/next/', { waitUntil: 'domcontentloaded' });
+    await expect(this.page.getByRole('heading', { name: 'Parallax Maker' })).toBeVisible();
+  }
+
+  async openTab(tab: MainTab): Promise<void> {
+    const button = this.page.getByRole('tab', { name: tab, exact: true });
+    await expect(button).toHaveCount(1);
+    await button.click();
+    await expect(button).toHaveAttribute('aria-selected', 'true');
+  }
+
+  // Observable elements
+
+  mainImage(): Locator {
+    return this.page.getByTestId('main-image');
+  }
+
+  depthImage(): Locator {
+    return this.page.getByTestId('depth-image');
+  }
+
+  sliceImages(): Locator {
+    return this.page.getByTestId('slice-thumbnail');
+  }
+
+  candidateImages(): Locator {
+    return this.page.getByTestId('candidate-image');
+  }
+
+  thresholdHandles(): Locator {
+    return this.page.getByTestId('threshold-handle');
+  }
+
+  log(): Locator {
+    return this.page.getByTestId('log');
+  }
+
+  // Upload / depth / slices
+
+  async uploadInputImage(): Promise<void> {
+    const response = await fetchFixture(this.page, 'input.png');
+    expect(response.ok(), 'GET /__e2e__/fixture/input.png').toBeTruthy();
+    await this.page.getByTestId('upload-image-input').setInputFiles({
+      name: 'e2e-input.png',
+      mimeType: 'image/png',
+      buffer: await response.body(),
+    });
+    await waitForImage(this.mainImage());
+    await waitForImage(this.depthImage());
+  }
+
+  async restoreFixtureState(): Promise<string> {
+    const response = await fetchFixture(this.page, 'state.json');
+    expect(response.ok(), 'GET /__e2e__/fixture/state.json').toBeTruthy();
+    const buffer = await response.body();
+    const fixture = JSON.parse(buffer.toString('utf8')) as { filename?: unknown };
+    expect(typeof fixture.filename).toBe('string');
+
+    let input = this.page.getByTestId('restore-state-input');
+    if ((await input.count()) === 0) {
+      await this.openTab('Configuration');
+      input = this.page.getByTestId('restore-state-input');
+    }
+    await input.setInputFiles({
+      name: 'appstate.json',
+      mimeType: 'application/json',
+      buffer,
+    });
+
+    await waitForImage(this.mainImage());
+    await waitForImage(this.depthImage());
+
+    // Slice thumbnails are only rendered in the Segmentation tab; check the
+    // same way DashDriver does (no tab switch needed there), falling back to
+    // opening it here and returning to whichever tab was active before.
+    const slices = this.sliceImages();
+    if ((await slices.count()) < 3) {
+      const previousTab = await this.activeMainTab();
+      await this.openTab('Segmentation');
+      await expect(slices).toHaveCount(3);
+      if (previousTab && previousTab !== 'Segmentation') {
+        await this.openTab(previousTab);
+      }
+    } else {
+      await expect(slices).toHaveCount(3);
+    }
+
+    return fixture.filename as string;
+  }
+
+  async generateSlices(): Promise<void> {
+    await this.page.getByTestId('generate-slices').click();
+  }
+
+  private async activeMainTab(): Promise<MainTab | null> {
+    // Scoped to the workflow tablist specifically: the viewer (2D/3D) tabs
+    // also use role="tab" and are also selected by default, so a
+    // page-wide `getByRole('tab', { selected: true })` would be ambiguous.
+    const active = this.page.locator('[role="tablist"][aria-label="Workflow"] [role="tab"][aria-selected="true"]');
+    const count = await active.count();
+    if (count === 0) return null;
+    const name = await active.first().textContent();
+    const trimmed = name?.trim();
+    const known: MainTab[] = ['Mode', 'Segmentation', 'Inpainting', 'Export', 'Configuration'];
+    return (known.find((tab) => tab === trimmed) as MainTab | undefined) ?? null;
+  }
+
+  // Segmentation
+
+  async setSegmentationMode(_mode: SegmentationMode): Promise<void> {
+    throw new Error('SvelteDriver: setSegmentationMode not implemented yet');
+  }
+
+  async expectSegmentationMode(_mode: SegmentationMode): Promise<void> {
+    throw new Error('SvelteDriver: expectSegmentationMode not implemented yet');
+  }
+
+  async clickImagePixel(_x: number, _y: number, _modifiers?: Modifier[]): Promise<void> {
+    throw new Error('SvelteDriver: clickImagePixel not implemented yet');
+  }
+
+  async selectSlice(_projectId: string, _index: number): Promise<Locator> {
+    throw new Error('SvelteDriver: selectSlice not implemented yet');
+  }
+
+  async toggleMultiPoint(): Promise<void> {
+    throw new Error('SvelteDriver: toggleMultiPoint not implemented yet');
+  }
+
+  async expectMultiPointEnabled(_enabled: boolean): Promise<void> {
+    throw new Error('SvelteDriver: expectMultiPointEnabled not implemented yet');
+  }
+
+  async commitMultiPoint(): Promise<void> {
+    throw new Error('SvelteDriver: commitMultiPoint not implemented yet');
+  }
+
+  // Canvas / inpainting
+
+  async drawMaskStroke(): Promise<void> {
+    throw new Error('SvelteDriver: drawMaskStroke not implemented yet');
+  }
+
+  async expectGenerateEnabled(): Promise<void> {
+    throw new Error('SvelteDriver: expectGenerateEnabled not implemented yet');
+  }
+
+  async fillPrompts(_positive: string, _negative: string): Promise<void> {
+    throw new Error('SvelteDriver: fillPrompts not implemented yet');
+  }
+
+  async expectPrompts(_positive: string, _negative: string): Promise<void> {
+    throw new Error('SvelteDriver: expectPrompts not implemented yet');
+  }
+
+  async generateInpainting(): Promise<void> {
+    throw new Error('SvelteDriver: generateInpainting not implemented yet');
+  }
+
+  async fillInpainting(): Promise<void> {
+    throw new Error('SvelteDriver: fillInpainting not implemented yet');
+  }
+
+  async enhance(): Promise<void> {
+    throw new Error('SvelteDriver: enhance not implemented yet');
+  }
+
+  async erase(): Promise<void> {
+    throw new Error('SvelteDriver: erase not implemented yet');
+  }
+
+  async selectCandidate(_index: number): Promise<void> {
+    throw new Error('SvelteDriver: selectCandidate not implemented yet');
+  }
+
+  async applyCandidate(): Promise<void> {
+    throw new Error('SvelteDriver: applyCandidate not implemented yet');
+  }
+
+  undoButton(_index: number): Locator {
+    throw new Error('SvelteDriver: undoButton not implemented yet');
+  }
+
+  redoButton(_index: number): Locator {
+    throw new Error('SvelteDriver: redoButton not implemented yet');
+  }
+
+  // Project / configuration
+
+  async expectDarkTheme(): Promise<void> {
+    throw new Error('SvelteDriver: expectDarkTheme not implemented yet');
+  }
+
+  async expectSliderValue(_name: SliderName, _value: number): Promise<void> {
+    throw new Error('SvelteDriver: expectSliderValue not implemented yet');
+  }
+
+  async setSlider(_name: SliderName, _value: number): Promise<void> {
+    throw new Error('SvelteDriver: setSlider not implemented yet');
+  }
+
+  async expectDepthModel(_label: string): Promise<void> {
+    throw new Error('SvelteDriver: expectDepthModel not implemented yet');
+  }
+
+  async expectInpaintingModel(_label: string): Promise<void> {
+    throw new Error('SvelteDriver: expectInpaintingModel not implemented yet');
+  }
+
+  // Export
+
+  async exportGltf(): Promise<Download> {
+    throw new Error('SvelteDriver: exportGltf not implemented yet');
+  }
+
+  async exportAnimation(): Promise<void> {
+    throw new Error('SvelteDriver: exportAnimation not implemented yet');
+  }
+}
diff --git a/e2e/drivers/types.ts b/e2e/drivers/types.ts
index 68a5cef..954fc21 100644
--- a/e2e/drivers/types.ts
+++ b/e2e/drivers/types.ts
@@ -27,7 +27,7 @@ export type Workflow =
   | 'configuration'
   | 'export';
 
-export type MainTab = 'Segmentation' | 'Inpainting' | 'Export' | 'Configuration';
+export type MainTab = 'Mode' | 'Segmentation' | 'Inpainting' | 'Export' | 'Configuration';
 export type SegmentationMode = 'Depth Map' | 'Instance Segmentation';
 export type Modifier = 'Alt' | 'Control' | 'Meta' | 'Shift';
 export type SliderName =
diff --git a/e2e/fixtures.ts b/e2e/fixtures.ts
index e16839a..32d918b 100644
--- a/e2e/fixtures.ts
+++ b/e2e/fixtures.ts
@@ -1,5 +1,6 @@
 import { test as base, expect, type ConsoleMessage, type Page } from '@playwright/test';
 import { DashDriver } from './drivers/dash';
+import { SvelteDriver } from './drivers/svelte';
 import type { UiDriver, UiTarget, Workflow } from './drivers/types';
 
 type BrowserDiagnostics = {
@@ -45,7 +46,8 @@ export const test = base.extend<Fixtures & Options>({
       return;
     }
     if (uiTarget === 'svelte') {
-      throw new Error('Svelte driver not implemented yet');
+      await use(new SvelteDriver(page));
+      return;
     }
     throw new Error(`Unknown uiTarget: ${String(uiTarget)}`);
   },
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index 3dce728..364bf36 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -47,6 +47,10 @@ export default defineConfig<{ uiTarget: UiTarget }>({
       name: 'dash',
       use: { uiTarget: 'dash' },
     },
+    {
+      name: 'svelte',
+      use: { uiTarget: 'svelte' },
+    },
   ],
   webServer:
     process.env.E2E_SKIP_SERVER === '1'
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index c4f9cfc..eb97cef 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,80 +1,42 @@
 <script lang="ts">
-  import { health, ApiError } from './lib/api/client';
-
-  type Status = 'checking' | 'ok' | 'error';
-
-  let status = $state<Status>('checking');
-  let statusDetail = $state<string>('');
-
+  import { uiStore } from './lib/state/ui.svelte';
+  import Header from './lib/components/shell/Header.svelte';
+  import Footer from './lib/components/shell/Footer.svelte';
+  import LogPanel from './lib/components/shell/LogPanel.svelte';
+  import ViewerTabs from './lib/components/upload/ViewerTabs.svelte';
+  import MainTabs from './lib/components/shell/MainTabs.svelte';
+
+  // Theme tokens in app.css switch on `:root.dark`.
   $effect(() => {
-    const controller = new AbortController();
-
-    health(controller.signal)
-      .then((res) => {
-        status = res.ok ? 'ok' : 'error';
-        statusDetail = res.ok ? res.version : 'unhealthy';
-      })
-      .catch((err) => {
-        if (err instanceof DOMException && err.name === 'AbortError') return;
-        status = 'error';
-        statusDetail = err instanceof ApiError ? err.message : 'unreachable';
-      });
-
-    return () => controller.abort();
+    document.documentElement.classList.toggle('dark', uiStore.theme === 'dark');
   });
 </script>
 
-<div id="app-container" class="min-h-screen flex flex-col">
-  <header class="title-header flex items-center justify-between p-4">
-    <h1 class="text-2xl font-bold" data-testid="app-title">Parallax Maker</h1>
-    <p class="text-sm" data-testid="health-status" data-status={status}>
-      {#if status === 'checking'}
-        Checking server&hellip;
-      {:else if status === 'ok'}
-        Server ok{statusDetail ? ` (${statusDetail})` : ''}
-      {:else}
-        Server error{statusDetail ? `: ${statusDetail}` : ''}
-      {/if}
-    </p>
-  </header>
+<div id="app-container" class="app-root" class:dark={uiStore.theme === 'dark'}>
+  <Header />
 
-  <main class="flex flex-1 gap-4 p-4">
-    <section
-      class="app-panel flex-1"
-      data-testid="main-image-area"
-      aria-label="Main image area"
-    >
-      <p class="text-muted">Image workspace placeholder.</p>
-    </section>
-
-    <aside class="app-panel w-80" data-testid="tabs-panel" aria-label="Tabs">
-      <p class="text-muted">Tabs placeholder.</p>
-    </aside>
+  <main class="app-main">
+    <ViewerTabs />
+    <MainTabs />
   </main>
 
-  <footer class="footer p-2 text-center" data-testid="app-footer">
-    &copy; 2024 Niels Provos
-  </footer>
+  <LogPanel />
+  <Footer />
 </div>
 
 <style>
-  .title-header {
-    background-color: var(--color-header-bg);
-    color: var(--color-header-text);
-  }
-
-  .footer {
-    color: var(--color-text-muted);
-  }
-
-  .app-panel {
-    background-color: var(--color-bg-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: var(--space-4);
+  .app-root {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-bg);
+    color: var(--color-text);
   }
 
-  .text-muted {
-    color: var(--color-text-muted);
+  .app-main {
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+    gap: var(--space-4);
+    padding: var(--space-2) var(--space-2) 0;
   }
 </style>
diff --git a/frontend/src/App.test.ts b/frontend/src/App.test.ts
index 5a3c6f4..1b13e6a 100644
--- a/frontend/src/App.test.ts
+++ b/frontend/src/App.test.ts
@@ -1,41 +1,129 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import App from './App.svelte';
+import { projectStore } from './lib/state/project.svelte';
+import { jobStore } from './lib/state/jobs.svelte';
+import { logStore } from './lib/state/logs.svelte';
+import { uiStore } from './lib/state/ui.svelte';
+import type { ProjectView } from './lib/api/types';
+
+function jsonResponse(status: number, body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+function makeView(overrides: Partial<ProjectView> = {}): ProjectView {
+  return {
+    id: 'appstate-e2e-test',
+    revision: 1,
+    image: { width: 320, height: 240 },
+    assets: { input: null, depth: null },
+    depthModel: 'dinov2',
+    numSlices: 3,
+    thresholds: [],
+    slices: [],
+    selectedSlice: null,
+    busy: null,
+    ...overrides,
+  };
+}
 
 describe('App', () => {
   afterEach(() => {
     vi.unstubAllGlobals();
+    projectStore.reset();
+    jobStore.end();
+    logStore.reset();
+    uiStore.reset();
   });
 
-  it('renders the "Parallax Maker" heading and workspace placeholders', () => {
-    const fetchMock = vi.fn().mockResolvedValue(
-      new Response(JSON.stringify({ ok: true, version: 'test' }), {
-        status: 200,
-        headers: { 'Content-Type': 'application/json' },
-      }),
-    );
-    vi.stubGlobal('fetch', fetchMock);
-
+  it('renders the header, viewer and workflow tabs, and footer', () => {
     render(App);
 
     expect(screen.getByTestId('app-title')).toHaveTextContent('Parallax Maker');
-    expect(screen.getByTestId('main-image-area')).toBeInTheDocument();
-    expect(screen.getByTestId('tabs-panel')).toBeInTheDocument();
-    expect(screen.getByTestId('health-status')).toBeInTheDocument();
+    expect(screen.getByTestId('theme-toggle')).toBeInTheDocument();
+    expect(screen.getByTestId('input-image-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('main-image')).toBeInTheDocument();
+    expect(screen.getByTestId('depth-image')).toBeInTheDocument();
+    expect(screen.getByTestId('log')).toBeInTheDocument();
+    expect(screen.getByTestId('app-footer')).toHaveTextContent('2024 Niels Provos');
   });
 
-  it('shows an error status when the health check fails', async () => {
-    const fetchMock = vi.fn().mockResolvedValue(
-      new Response(JSON.stringify({ error: { code: 'internal', message: 'down' } }), {
-        status: 500,
-        headers: { 'Content-Type': 'application/json' },
-      }),
-    );
+  it('the theme toggle switches the root dark class used by the theme tokens', async () => {
+    render(App);
+    const root = document.documentElement;
+    const initiallyDark = root.classList.contains('dark');
+
+    await fireEvent.click(screen.getByTestId('theme-toggle'));
+    await waitFor(() => expect(root.classList.contains('dark')).toBe(!initiallyDark));
+
+    await fireEvent.click(screen.getByTestId('theme-toggle'));
+    await waitFor(() => expect(root.classList.contains('dark')).toBe(initiallyDark));
+  });
+
+  it('uploading an image creates a project, starts a depth job, and renders both images', async () => {
+    const projectId = 'appstate-e2e-test';
+
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      const url = String(input);
+      const method = init?.method ?? 'GET';
+
+      if (url === '/api/v1/projects' && method === 'POST') {
+        return jsonResponse(
+          201,
+          makeView({ assets: { input: { url: '/api/v1/projects/appstate-e2e-test/assets/input' }, depth: null } }),
+        );
+      }
+      if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) {
+        return jsonResponse(200, { entries: [], next: 0 });
+      }
+      if (url === `/api/v1/projects/${projectId}/depth` && method === 'POST') {
+        return jsonResponse(202, { job: { id: 'job-1', kind: 'depth', status: 'queued', progress: 0 } });
+      }
+      if (url === '/api/v1/jobs/job-1') {
+        return jsonResponse(200, {
+          id: 'job-1',
+          kind: 'depth',
+          status: 'succeeded',
+          progress: 1,
+          project: makeView({
+            assets: {
+              input: { url: '/api/v1/projects/appstate-e2e-test/assets/input' },
+              depth: { url: '/api/v1/projects/appstate-e2e-test/assets/depth' },
+            },
+            thresholds: [0, 85, 170, 255],
+          }),
+        });
+      }
+      throw new Error(`Unexpected fetch: ${method} ${url}`);
+    });
     vi.stubGlobal('fetch', fetchMock);
 
     render(App);
 
-    const status = await screen.findByText(/Server error/);
-    expect(status).toBeInTheDocument();
+    const file = new File(['fake-png-bytes'], 'input.png', { type: 'image/png' });
+    const input = screen.getByTestId('upload-image-input') as HTMLInputElement;
+    await fireEvent.change(input, { target: { files: [file] } });
+
+    await waitFor(() =>
+      expect(screen.getByTestId('main-image')).toHaveAttribute(
+        'src',
+        '/api/v1/projects/appstate-e2e-test/assets/input',
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId('depth-image')).toHaveAttribute(
+        'src',
+        '/api/v1/projects/appstate-e2e-test/assets/depth',
+      ),
+    );
+
+    expect(fetchMock).toHaveBeenCalledWith('/api/v1/projects', expect.objectContaining({ method: 'POST' }));
+    expect(fetchMock).toHaveBeenCalledWith(
+      `/api/v1/projects/${projectId}/depth`,
+      expect.objectContaining({ method: 'POST' }),
+    );
   });
 });
diff --git a/frontend/src/app.css b/frontend/src/app.css
index f502ed1..5c54921 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -58,6 +58,8 @@
 
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
+
+  --color-depth-number: rgb(146 64 14 / 50%); /* amber-800 @ 50% */
 }
 
 :root.dark {
@@ -93,6 +95,8 @@
   --color-help-bg: #fef08a; /* yellow-200 */
   --color-help-border: #374151; /* gray-700 */
   --color-help-text: #334155; /* slate-700 */
+
+  --color-depth-number: rgb(252 211 77 / 50%); /* amber-300 @ 50% */
 }
 
 html,
@@ -106,3 +110,120 @@ body {
   color: var(--color-text);
   font-family: var(--font-sans);
 }
+
+/*
+ * Shared, framework-agnostic look-alike classes for the Dash "general-*"
+ * utilities (see ../../tailwind.css). Kept here (rather than duplicated in
+ * every component's <style>) since they express the shell's visual
+ * language: dashed panel borders, solid blue buttons, tab underlines.
+ */
+
+.panel {
+  border: 2px dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2);
+}
+
+.tab-strip {
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--space-4);
+  margin: 0 0 var(--space-2) var(--space-3);
+}
+
+.tab-strip button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  font-weight: 700;
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.tab-strip button.active {
+  text-decoration: underline;
+}
+
+.tab-strip button:disabled {
+  cursor: default;
+  color: var(--color-text-muted);
+}
+
+.panel-label {
+  display: block;
+  font-weight: 700;
+  margin: 0 0 var(--space-2) var(--space-3);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  background-color: var(--color-accent);
+  color: var(--color-accent-text);
+  border: none;
+  border-radius: var(--radius-md);
+  padding: var(--space-2);
+  font: inherit;
+  cursor: pointer;
+}
+
+.btn:hover:not(:disabled) {
+  background-color: var(--color-accent-hover);
+}
+
+.btn:disabled {
+  background-color: var(--color-disabled-bg);
+  color: var(--color-disabled-text);
+  cursor: default;
+}
+
+.field-label {
+  display: block;
+  margin-bottom: var(--space-1);
+}
+
+.select,
+.text-input {
+  width: 100%;
+  background-color: var(--color-surface-muted);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-2);
+  font: inherit;
+}
+
+.progress-bar {
+  height: 0.75rem;
+  width: 100%;
+  background-color: var(--color-surface-muted);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background-color: var(--color-success);
+  border-radius: var(--radius-lg);
+  transition: width 0.2s ease;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.hidden {
+  display: none !important;
+}
diff --git a/frontend/src/lib/components/config/ConfigurationTab.svelte b/frontend/src/lib/components/config/ConfigurationTab.svelte
new file mode 100644
index 0000000..3f56b7f
--- /dev/null
+++ b/frontend/src/lib/components/config/ConfigurationTab.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { projectStore } from '../../state/project.svelte';
+  import { uiStore } from '../../state/ui.svelte';
+  import { isBusy } from '../../state/busy.svelte';
+  import * as workflow from '../../workflow';
+
+  // Keep the slider in sync with the project once one exists (including
+  // after a restore), the same way Dash's slider reflects state.
+  $effect(() => {
+    const view = projectStore.view;
+    if (view) uiStore.setPendingNumSlices(view.numSlices);
+  });
+
+  function onNumSlicesChange(event: Event): void {
+    const value = Number((event.currentTarget as HTMLInputElement).value);
+    uiStore.setPendingNumSlices(value);
+    if (projectStore.view) void workflow.updateSliceCount(value);
+  }
+
+  let restoreInput: HTMLInputElement | undefined;
+
+  function onRestoreChange(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement;
+    const file = target.files?.[0];
+    target.value = '';
+    if (file) void workflow.restoreProject(file);
+  }
+</script>
+
+<div class="configuration-tab" data-testid="tab-configuration">
+  <div class="field">
+    <label class="field-label" for="num-slices">Number of Slices</label>
+    <input
+      id="num-slices"
+      type="range"
+      min="2"
+      max="10"
+      step="1"
+      data-testid="num-slices"
+      value={uiStore.pendingNumSlices}
+      disabled={isBusy()}
+      onchange={onNumSlicesChange}
+    />
+    <div class="range-marks">
+      {#each Array.from({ length: 9 }, (_, i) => i + 2) as mark (mark)}
+        <span>{mark}</span>
+      {/each}
+    </div>
+  </div>
+
+  <div class="field">
+    <span class="field-label">Export/Import State</span>
+    <div class="state-actions">
+      <label class="btn" for="restore-state-input">
+        Load State
+        <input
+          bind:this={restoreInput}
+          id="restore-state-input"
+          type="file"
+          accept="application/json"
+          class="sr-only"
+          data-testid="restore-state-input"
+          onchange={onRestoreChange}
+        />
+      </label>
+      <button type="button" class="btn" disabled title="Not available yet">Save State</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .field {
+    margin-bottom: var(--space-4);
+  }
+
+  .range-marks {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+  }
+
+  input[type='range'] {
+    width: 100%;
+  }
+
+  .state-actions {
+    display: flex;
+    gap: var(--space-4);
+  }
+
+  .state-actions .btn {
+    cursor: pointer;
+  }
+</style>
diff --git a/frontend/src/lib/components/depth/ModeTab.svelte b/frontend/src/lib/components/depth/ModeTab.svelte
new file mode 100644
index 0000000..49b5694
--- /dev/null
+++ b/frontend/src/lib/components/depth/ModeTab.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { projectStore } from '../../state/project.svelte';
+  import { uiStore, type SegmentationMode } from '../../state/ui.svelte';
+  import { jobStore } from '../../state/jobs.svelte';
+  import { isBusy } from '../../state/busy.svelte';
+  import * as workflow from '../../workflow';
+
+  // Same labels/values as components.py's DROPDOWN_DEPTH_MODEL.
+  const depthOptions: Array<{ value: string; label: string }> = [
+    { value: 'midas', label: 'MiDaS' },
+    { value: 'dinov2', label: 'DINOv2' },
+  ];
+
+  // Same labels/values as components.py's DROPDOWN_MODE_SELECTOR.
+  const modeOptions: Array<{ value: SegmentationMode; label: string }> = [
+    { value: 'depth', label: 'Depth Map' },
+    { value: 'segment', label: 'Instance Segmentation' },
+  ];
+
+  // Keep the dropdown in sync with the project once it reports a model
+  // (e.g. after a restore), the same way Dash's dropdown reflects state.
+  $effect(() => {
+    const model = projectStore.view?.depthModel;
+    if (model) uiStore.setDepthModel(model);
+  });
+
+  function onDepthModelChange(event: Event): void {
+    uiStore.setDepthModel((event.currentTarget as HTMLSelectElement).value);
+  }
+
+  function onModeChange(event: Event): void {
+    uiStore.setSegmentationMode((event.currentTarget as HTMLSelectElement).value as SegmentationMode);
+  }
+
+  function regenerate(): void {
+    if (isBusy() || !projectStore.view) return;
+    void workflow.startDepth(uiStore.depthModel);
+  }
+
+  const showProgress = $derived(jobStore.active === 'depth' || jobStore.active === 'upload');
+  const progressPercent = $derived(Math.round((showProgress ? jobStore.progress : 0) * 100));
+</script>
+
+<div class="mode-tab" data-testid="tab-mode">
+  <span class="panel-label">Depth Map</span>
+  <div class="panel depth-box">
+    <img data-testid="depth-image" alt="" src={projectStore.view?.assets.depth?.url} />
+  </div>
+
+  <div class="depth-controls">
+    <div>
+      <label class="field-label" for="depth-model">Depth Module Algorithm</label>
+      <select
+        id="depth-model"
+        class="select"
+        data-testid="depth-model"
+        value={uiStore.depthModel}
+        onchange={onDepthModelChange}
+        disabled={isBusy()}
+      >
+        {#each depthOptions as option (option.value)}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </select>
+    </div>
+    <button
+      type="button"
+      class="btn"
+      data-testid="regenerate-depth"
+      disabled={isBusy() || !projectStore.view}
+      onclick={regenerate}
+    >
+      Regenerate Depth Map
+    </button>
+  </div>
+
+  <div class="progress-bar" data-testid="depth-progress">
+    <div class="progress-bar-fill" style={`width: ${showProgress ? progressPercent : 0}%`}></div>
+  </div>
+
+  <div class="mode-selector">
+    <span class="panel-label">Mode Selector</span>
+    <div class="mode-selector-row">
+      <select
+        class="select"
+        data-testid="mode-selector"
+        value={uiStore.segmentationMode}
+        onchange={onModeChange}
+      >
+        {#each modeOptions as option (option.value)}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </select>
+      <p class="help-text">
+        Switch between depth map and instance segmentation. Depth map allows the creation of
+        slices from bands of depth based on the depth map. Instance segmentation allows the
+        creation of slices from selected objects on the image.
+      </p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .depth-box {
+    min-height: 15rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .depth-box img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  /* See InputImagePanel.svelte: hide Chromium's "broken image" glyph until
+     there is a depth map to show. */
+  .depth-box img:not([src]) {
+    visibility: hidden;
+  }
+
+  .depth-controls {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--space-2);
+    align-items: end;
+    padding: var(--space-2) 0;
+  }
+
+  .mode-selector-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2);
+    align-items: start;
+  }
+
+  .help-text {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--color-text);
+  }
+</style>
diff --git a/frontend/src/lib/components/segmentation/SegmentationTab.svelte b/frontend/src/lib/components/segmentation/SegmentationTab.svelte
new file mode 100644
index 0000000..903695f
--- /dev/null
+++ b/frontend/src/lib/components/segmentation/SegmentationTab.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+  import { projectStore } from '../../state/project.svelte';
+  import { isBusy } from '../../state/busy.svelte';
+  import * as workflow from '../../workflow';
+
+  type ActionButton = { label: string; testId?: string; onClick?: () => void };
+
+  // Same 8 buttons as components.py's make_slice_generation_container Actions
+  // panel; only Generate is wired up in this PR.
+  const actions: ActionButton[] = [
+    { label: 'Generate', testId: 'generate-slices', onClick: () => void workflow.generateSlices() },
+    { label: 'Balance' },
+    { label: 'Create' },
+    { label: 'Delete' },
+    { label: 'Add' },
+    { label: 'Remove' },
+    { label: 'Copy' },
+    { label: 'Paste' },
+  ];
+
+  // Interior threshold boundaries only (length numSlices - 1); the backend
+  // rejects any other length (see UpdateThresholdValues.update_threshold_values).
+  const interiorThresholds = $derived.by((): number[] => {
+    const view = projectStore.view;
+    if (!view || view.numSlices < 2 || view.thresholds.length !== view.numSlices + 1) return [];
+    return view.thresholds.slice(1, view.numSlices);
+  });
+
+  // Local editable copy so dragging feels smooth; re-synced whenever the
+  // server's thresholds change (including our own applied response).
+  let localValues = $state<number[]>([]);
+  $effect(() => {
+    localValues = [...interiorThresholds];
+  });
+
+  function onSliderInput(index: number, event: Event): void {
+    const value = Number((event.currentTarget as HTMLInputElement).value);
+    localValues = localValues.map((v, i) => (i === index ? value : v));
+  }
+
+  function onSliderChange(): void {
+    void workflow.updateThresholds([...localValues]);
+  }
+</script>
+
+<div class="segmentation-tab" data-testid="tab-segmentation">
+  <div class="segmentation-grid">
+    <div class="thresholds-column">
+      <span class="panel-label">Thresholds</span>
+      <div class="panel thresholds-box" data-testid="thresholds-container">
+        {#each localValues as value, index (index)}
+          <input
+            type="range"
+            min="0"
+            max="255"
+            step="1"
+            data-testid="threshold-handle"
+            aria-label={`Threshold ${index + 1}`}
+            value={value}
+            disabled={isBusy() || !projectStore.view}
+            oninput={(event) => onSliderInput(index, event)}
+            onchange={onSliderChange}
+          />
+        {/each}
+      </div>
+    </div>
+
+    <div class="actions-column">
+      <span class="panel-label">Actions</span>
+      <div class="actions-grid">
+        {#each actions as action (action.label)}
+          <button
+            type="button"
+            class="btn"
+            data-testid={action.testId}
+            title={action.onClick ? undefined : 'Not available yet'}
+            disabled={action.onClick ? isBusy() || !projectStore.view : true}
+            onclick={action.onClick}
+          >
+            {action.label}
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+
+  <div class="panel slice-strip">
+    {#each projectStore.view?.slices ?? [] as slice (slice.index)}
+      <div class="slice-thumb">
+        <span class="depth-number">{slice.depth}</span>
+        <img data-testid="slice-thumbnail" alt={`image_slice_${slice.index}`} src={slice.thumbnail.url} />
+        <span class="slice-label">{`image_slice_${slice.index}`}</span>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .segmentation-grid {
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+    gap: var(--space-4);
+    padding: var(--space-2);
+  }
+
+  .thresholds-box {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-height: 2rem;
+  }
+
+  .thresholds-box input[type='range'] {
+    width: 100%;
+  }
+
+  .actions-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2);
+  }
+
+  .slice-strip {
+    margin: var(--space-2);
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-1);
+    min-height: 2rem;
+  }
+
+  .slice-thumb {
+    position: relative;
+  }
+
+  .slice-thumb img {
+    width: 100%;
+    display: block;
+  }
+
+  .depth-number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2.5rem;
+    color: var(--color-depth-number);
+    pointer-events: none;
+  }
+
+  .slice-label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    font-size: 0.75rem;
+    padding: 2px;
+    background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
+    color: var(--color-text);
+  }
+</style>
diff --git a/frontend/src/lib/components/segmentation/SegmentationTab.test.ts b/frontend/src/lib/components/segmentation/SegmentationTab.test.ts
new file mode 100644
index 0000000..a799b5d
--- /dev/null
+++ b/frontend/src/lib/components/segmentation/SegmentationTab.test.ts
@@ -0,0 +1,116 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import SegmentationTab from './SegmentationTab.svelte';
+import { projectStore } from '../../state/project.svelte';
+import { jobStore } from '../../state/jobs.svelte';
+import { logStore } from '../../state/logs.svelte';
+import type { ProjectView, SliceView } from '../../api/types';
+
+function jsonResponse(status: number, body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+function makeSlice(index: number, depth: number): SliceView {
+  return {
+    index,
+    depth,
+    version: 1,
+    canUndo: false,
+    canRedo: false,
+    positivePrompt: '',
+    negativePrompt: '',
+    image: { url: `/api/v1/projects/appstate-test/assets/slice-${index}` },
+    thumbnail: { url: `/api/v1/projects/appstate-test/assets/slice-${index}-thumb` },
+  };
+}
+
+function makeView(overrides: Partial<ProjectView> = {}): ProjectView {
+  return {
+    id: 'appstate-test',
+    revision: 1,
+    image: { width: 320, height: 240 },
+    assets: { input: { url: '/input' }, depth: { url: '/depth' } },
+    depthModel: 'dinov2',
+    numSlices: 3,
+    thresholds: [0, 85, 170, 255],
+    slices: [],
+    selectedSlice: null,
+    busy: null,
+    ...overrides,
+  };
+}
+
+describe('SegmentationTab', () => {
+  beforeEach(() => {
+    projectStore.reset();
+    jobStore.end();
+    logStore.reset();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('renders one thumbnail per slice', () => {
+    projectStore.applyView(
+      makeView({ slices: [makeSlice(0, 85), makeSlice(1, 170), makeSlice(2, 255)] }),
+    );
+    render(SegmentationTab);
+
+    const thumbnails = screen.getAllByTestId('slice-thumbnail');
+    expect(thumbnails).toHaveLength(3);
+    expect(thumbnails.map((img) => img.getAttribute('alt'))).toEqual([
+      'image_slice_0',
+      'image_slice_1',
+      'image_slice_2',
+    ]);
+  });
+
+  it('disables the Generate button while a job is in flight, and re-enables it after', async () => {
+    projectStore.applyView(makeView());
+    render(SegmentationTab);
+
+    expect(screen.getByTestId('generate-slices')).toBeEnabled();
+
+    jobStore.begin('slices');
+    await waitFor(() => expect(screen.getByTestId('generate-slices')).toBeDisabled());
+
+    jobStore.end();
+    await waitFor(() => expect(screen.getByTestId('generate-slices')).toBeEnabled());
+  });
+
+  it('sends baseRevision on threshold change, and retries once on stale_revision', async () => {
+    projectStore.applyView(makeView());
+
+    const fetchMock = vi.fn();
+    fetchMock.mockResolvedValueOnce(
+      jsonResponse(409, { error: { code: 'stale_revision', message: 'stale' } }),
+    );
+    fetchMock.mockResolvedValueOnce(jsonResponse(200, makeView({ revision: 2 })));
+    fetchMock.mockResolvedValueOnce(jsonResponse(200, { ...makeView({ revision: 3 }), changed: true }));
+    fetchMock.mockResolvedValueOnce(jsonResponse(200, { entries: [], next: 0 }));
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(SegmentationTab);
+    const [firstHandle] = screen.getAllByTestId('threshold-handle');
+    await fireEvent.input(firstHandle, { target: { value: '90' } });
+    await fireEvent.change(firstHandle, { target: { value: '90' } });
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(4));
+
+    const [firstUrl, firstInit] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(firstUrl).toBe('/api/v1/projects/appstate-test/thresholds');
+    expect(firstInit.method).toBe('PUT');
+    expect(JSON.parse(firstInit.body as string)).toMatchObject({ baseRevision: 1, values: [90, 170] });
+
+    const [secondUrl] = fetchMock.mock.calls[1] as [string, RequestInit];
+    expect(secondUrl).toBe('/api/v1/projects/appstate-test');
+
+    const [thirdUrl, thirdInit] = fetchMock.mock.calls[2] as [string, RequestInit];
+    expect(thirdUrl).toBe('/api/v1/projects/appstate-test/thresholds');
+    expect(JSON.parse(thirdInit.body as string)).toMatchObject({ baseRevision: 2, values: [90, 170] });
+  });
+});
diff --git a/frontend/src/lib/components/shared/TabPlaceholder.svelte b/frontend/src/lib/components/shared/TabPlaceholder.svelte
new file mode 100644
index 0000000..2c93cb1
--- /dev/null
+++ b/frontend/src/lib/components/shared/TabPlaceholder.svelte
@@ -0,0 +1,9 @@
+<div class="placeholder" data-testid="tab-placeholder">Not yet available in the new UI.</div>
+
+<style>
+  .placeholder {
+    padding: var(--space-4);
+    color: var(--color-text-muted);
+    text-align: center;
+  }
+</style>
diff --git a/frontend/src/lib/components/shell/Footer.svelte b/frontend/src/lib/components/shell/Footer.svelte
new file mode 100644
index 0000000..859ed98
--- /dev/null
+++ b/frontend/src/lib/components/shell/Footer.svelte
@@ -0,0 +1,9 @@
+<footer class="footer" data-testid="app-footer">&copy; 2024 Niels Provos</footer>
+
+<style>
+  .footer {
+    text-align: center;
+    color: var(--color-text-muted);
+    padding: var(--space-2);
+  }
+</style>
diff --git a/frontend/src/lib/components/shell/Header.svelte b/frontend/src/lib/components/shell/Header.svelte
new file mode 100644
index 0000000..5e8b3a7
--- /dev/null
+++ b/frontend/src/lib/components/shell/Header.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { uiStore } from '../../state/ui.svelte';
+</script>
+
+<header class="app-header">
+  <div class="header-side">
+    <button
+      type="button"
+      class="theme-toggle"
+      data-testid="theme-toggle"
+      aria-label="Toggle dark mode"
+      aria-pressed={uiStore.theme === 'dark'}
+      onclick={() => uiStore.toggleTheme()}
+    >
+      <span class="thumb"></span>
+    </button>
+  </div>
+  <h1 data-testid="app-title">Parallax Maker</h1>
+  <div class="header-side" aria-hidden="true"></div>
+</header>
+
+<style>
+  .app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--color-header-bg);
+    color: var(--color-header-text);
+    padding: var(--space-4);
+  }
+
+  .header-side {
+    width: 7rem;
+    display: flex;
+    align-items: center;
+  }
+
+  h1 {
+    flex: 1;
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .theme-toggle {
+    width: 3rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    border: none;
+    background-color: var(--color-toggle-bg);
+    cursor: pointer;
+    padding: 2px;
+    display: flex;
+    align-items: center;
+  }
+
+  .theme-toggle:hover {
+    background-color: var(--color-toggle-bg-hover);
+  }
+
+  .thumb {
+    width: 1.35rem;
+    height: 1.35rem;
+    border-radius: 50%;
+    background-color: white;
+    display: block;
+  }
+
+  .theme-toggle[aria-pressed='true'] .thumb {
+    margin-left: auto;
+  }
+</style>
diff --git a/frontend/src/lib/components/shell/LogPanel.svelte b/frontend/src/lib/components/shell/LogPanel.svelte
new file mode 100644
index 0000000..274ea6e
--- /dev/null
+++ b/frontend/src/lib/components/shell/LogPanel.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { logStore } from '../../state/logs.svelte';
+</script>
+
+<div class="log-panel-outer">
+  <div class="log-panel panel" data-testid="log">
+    {#each logStore.last3 as entry (entry.seq)}
+      <div class="log-entry" class:log-error={entry.level === 'error'}>{entry.message}</div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .log-panel-outer {
+    padding: var(--space-2);
+  }
+
+  .log-panel {
+    height: 6rem;
+    overflow-y: auto;
+  }
+
+  .log-entry {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  .log-error {
+    color: var(--color-danger-strong);
+  }
+</style>
diff --git a/frontend/src/lib/components/shell/MainTabs.svelte b/frontend/src/lib/components/shell/MainTabs.svelte
new file mode 100644
index 0000000..f114eaf
--- /dev/null
+++ b/frontend/src/lib/components/shell/MainTabs.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { uiStore, MAIN_TABS } from '../../state/ui.svelte';
+  import ModeTab from '../depth/ModeTab.svelte';
+  import SegmentationTab from '../segmentation/SegmentationTab.svelte';
+  import ConfigurationTab from '../config/ConfigurationTab.svelte';
+  import TabPlaceholder from '../shared/TabPlaceholder.svelte';
+</script>
+
+<div class="main-tabs">
+  <div class="tab-strip" role="tablist" aria-label="Workflow">
+    {#each MAIN_TABS as tab (tab)}
+      <button
+        type="button"
+        role="tab"
+        aria-selected={uiStore.mainTab === tab}
+        class:active={uiStore.mainTab === tab}
+        onclick={() => uiStore.setMainTab(tab)}
+      >
+        {tab}
+      </button>
+    {/each}
+  </div>
+
+  <!--
+    Every tab's content stays mounted (hidden via CSS) rather than being
+    conditionally created/destroyed, mirroring Dash's make_tabs(): e2e
+    scenarios query threshold sliders and slice thumbnails without first
+    switching to the Segmentation tab (see e2e/parallax-maker.spec.ts).
+  -->
+  <div class="panel tab-content" class:hidden={uiStore.mainTab !== 'Mode'}>
+    <ModeTab />
+  </div>
+  <div class="panel tab-content" class:hidden={uiStore.mainTab !== 'Segmentation'}>
+    <SegmentationTab />
+  </div>
+  <div class="panel tab-content" class:hidden={uiStore.mainTab !== 'Inpainting'}>
+    <TabPlaceholder />
+  </div>
+  <div class="panel tab-content" class:hidden={uiStore.mainTab !== 'Export'}>
+    <TabPlaceholder />
+  </div>
+  <div class="panel tab-content" class:hidden={uiStore.mainTab !== 'Configuration'}>
+    <ConfigurationTab />
+  </div>
+</div>
+
+<style>
+  .main-tabs {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tab-content {
+    min-height: 20rem;
+  }
+</style>
diff --git a/frontend/src/lib/components/upload/InputImagePanel.svelte b/frontend/src/lib/components/upload/InputImagePanel.svelte
new file mode 100644
index 0000000..5d52ce6
--- /dev/null
+++ b/frontend/src/lib/components/upload/InputImagePanel.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { projectStore } from '../../state/project.svelte';
+  import { uiStore } from '../../state/ui.svelte';
+  import { isBusy } from '../../state/busy.svelte';
+  import * as workflow from '../../workflow';
+
+  let fileInput: HTMLInputElement | undefined;
+  let dragging = $state(false);
+
+  function pickFile(): void {
+    if (isBusy()) return;
+    fileInput?.click();
+  }
+
+  function handleFile(file: File | undefined | null): void {
+    if (!file || isBusy()) return;
+    void workflow.uploadImage(file, uiStore.depthModel);
+  }
+
+  function onInputChange(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement;
+    handleFile(target.files?.[0]);
+    target.value = '';
+  }
+
+  function onDrop(event: DragEvent): void {
+    event.preventDefault();
+    dragging = false;
+    handleFile(event.dataTransfer?.files?.[0]);
+  }
+
+  function onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    dragging = true;
+  }
+
+  function onDragLeave(): void {
+    dragging = false;
+  }
+
+  function onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      pickFile();
+    }
+  }
+</script>
+
+<div class="input-image-outer panel">
+  <span class="panel-label">Input Image</span>
+  <div
+    class="drop-zone panel"
+    class:dragging
+    role="button"
+    tabindex="0"
+    aria-label="Upload input image"
+    data-testid="input-image-panel"
+    onclick={pickFile}
+    onkeydown={onKeydown}
+    ondrop={onDrop}
+    ondragover={onDragOver}
+    ondragleave={onDragLeave}
+  >
+    <img data-testid="main-image" alt="" src={projectStore.view?.assets.input?.url} />
+    <input
+      bind:this={fileInput}
+      type="file"
+      accept="image/*"
+      class="sr-only"
+      data-testid="upload-image-input"
+      onchange={onInputChange}
+    />
+  </div>
+  <div class="tools-row-placeholder"></div>
+</div>
+
+<style>
+  .input-image-outer {
+    display: flex;
+    flex-direction: column;
+    min-height: 30rem;
+  }
+
+  .drop-zone {
+    position: relative;
+    flex: 1;
+    min-height: 24rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .drop-zone.dragging {
+    border-color: var(--color-accent);
+  }
+
+  .drop-zone img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  /* Chromium renders a "broken image" glyph for an <img> with layout space
+     and no loaded resource, even with no `src` attribute at all. Hide it
+     until there is something to show, matching Dash's empty panel look. */
+  .drop-zone img:not([src]) {
+    visibility: hidden;
+  }
+
+  .tools-row-placeholder {
+    min-height: 2.75rem;
+  }
+</style>
diff --git a/frontend/src/lib/components/upload/ViewerTabs.svelte b/frontend/src/lib/components/upload/ViewerTabs.svelte
new file mode 100644
index 0000000..8e279c8
--- /dev/null
+++ b/frontend/src/lib/components/upload/ViewerTabs.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { uiStore, type ViewerTab } from '../../state/ui.svelte';
+  import InputImagePanel from './InputImagePanel.svelte';
+
+  const tabs: ViewerTab[] = ['2D', '3D'];
+</script>
+
+<div class="viewer-column">
+  <div class="tab-strip" role="tablist" aria-label="Viewer">
+    {#each tabs as tab (tab)}
+      <button
+        type="button"
+        role="tab"
+        aria-selected={uiStore.viewerTab === tab}
+        class:active={uiStore.viewerTab === tab}
+        onclick={() => uiStore.setViewerTab(tab)}
+      >
+        {tab}
+      </button>
+    {/each}
+  </div>
+
+  <div class:hidden={uiStore.viewerTab !== '2D'}>
+    <InputImagePanel />
+  </div>
+  <div class="panel viewer-3d" class:hidden={uiStore.viewerTab !== '3D'} data-testid="viewer-3d-placeholder">
+    3D viewer is not yet available in the new UI.
+  </div>
+</div>
+
+<style>
+  .viewer-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .viewer-3d {
+    min-height: 30rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+  }
+</style>
diff --git a/frontend/src/lib/state/busy.svelte.ts b/frontend/src/lib/state/busy.svelte.ts
new file mode 100644
index 0000000..172d7c9
--- /dev/null
+++ b/frontend/src/lib/state/busy.svelte.ts
@@ -0,0 +1,13 @@
+import { projectStore } from './project.svelte';
+import { jobStore } from './jobs.svelte';
+
+/**
+ * Whether mutating controls should be disabled: either a locally-initiated
+ * request/job is in flight (`jobStore.active`), or the server itself
+ * reports the project as busy (`ProjectView.busy`, e.g. a job started from
+ * another tab). Per the architecture doc's "Concurrency" section, the UI
+ * must never send a request it knows will be rejected with `409 busy`.
+ */
+export function isBusy(): boolean {
+  return jobStore.active !== null || projectStore.view?.busy != null;
+}
diff --git a/frontend/src/lib/state/jobs.svelte.ts b/frontend/src/lib/state/jobs.svelte.ts
new file mode 100644
index 0000000..8f3702b
--- /dev/null
+++ b/frontend/src/lib/state/jobs.svelte.ts
@@ -0,0 +1,40 @@
+/**
+ * Tracks a locally-initiated, in-flight request/job so controls can be
+ * disabled immediately -- before the server's `ProjectView.busy` would
+ * reflect it (e.g. the window between `createProject` returning and
+ * `startDepth` being submitted), and for the duration of synchronous
+ * mutations (thresholds, slice-count) that don't have a job id at all.
+ *
+ * `busy.svelte.ts` combines this with `ProjectView.busy` to answer "should
+ * mutating controls be disabled right now?".
+ */
+
+export type JobKind = 'upload' | 'depth' | 'slices' | 'thresholds' | 'slice-count' | 'restore';
+
+function createJobStore() {
+  let active = $state<JobKind | null>(null);
+  let progress = $state<number>(0);
+
+  return {
+    get active(): JobKind | null {
+      return active;
+    },
+    get progress(): number {
+      return progress;
+    },
+    begin(kind: JobKind): void {
+      active = kind;
+      progress = 0;
+    },
+    setProgress(value: number): void {
+      progress = value;
+    },
+    end(): void {
+      active = null;
+      progress = 0;
+    },
+  };
+}
+
+export const jobStore = createJobStore();
+export type JobStore = ReturnType<typeof createJobStore>;
diff --git a/frontend/src/lib/state/logs.svelte.ts b/frontend/src/lib/state/logs.svelte.ts
new file mode 100644
index 0000000..717c071
--- /dev/null
+++ b/frontend/src/lib/state/logs.svelte.ts
@@ -0,0 +1,59 @@
+import { getLogs } from '../api/client';
+
+/**
+ * The log pane's entries: server-side log entries (from
+ * `GET /projects/{id}/logs?after=`, per the architecture doc) merged with
+ * client-side entries (e.g. `ApiError` messages) in the order they occur.
+ * Client entries use negative `seq` values so they never collide with the
+ * server's monotonically increasing sequence numbers.
+ */
+export type DisplayLogEntry = {
+  seq: number;
+  level: string;
+  message: string;
+};
+
+function createLogStore() {
+  let entries = $state<DisplayLogEntry[]>([]);
+  let after = 0;
+  let nextClientSeq = -1;
+
+  function pushClient(message: string, level: string = 'error'): void {
+    entries = [...entries, { seq: nextClientSeq, level, message }];
+    nextClientSeq -= 1;
+  }
+
+  async function refresh(projectId: string): Promise<void> {
+    try {
+      const page = await getLogs(projectId, after);
+      if (page.entries.length > 0) {
+        entries = [...entries, ...page.entries];
+        after = page.next;
+      }
+    } catch {
+      // Best-effort: a failed log fetch should not itself surface as an
+      // error (that would recurse), and should not block the caller.
+    }
+  }
+
+  function reset(): void {
+    entries = [];
+    after = 0;
+    nextClientSeq = -1;
+  }
+
+  return {
+    get entries(): DisplayLogEntry[] {
+      return entries;
+    },
+    get last3(): DisplayLogEntry[] {
+      return entries.slice(-3);
+    },
+    pushClient,
+    refresh,
+    reset,
+  };
+}
+
+export const logStore = createLogStore();
+export type LogStore = ReturnType<typeof createLogStore>;
diff --git a/frontend/src/lib/state/ui.svelte.ts b/frontend/src/lib/state/ui.svelte.ts
new file mode 100644
index 0000000..429fdc3
--- /dev/null
+++ b/frontend/src/lib/state/ui.svelte.ts
@@ -0,0 +1,87 @@
+/**
+ * Transient, client-only UI state: active tabs, theme, and controls whose
+ * value is not (yet) persisted by the backend. Per the architecture doc
+ * ("Frontend layout"), backend state comes only from `ProjectView`; this
+ * store never holds anything the server would consider authoritative.
+ */
+
+export type ViewerTab = '2D' | '3D';
+export type MainTab = 'Mode' | 'Segmentation' | 'Inpainting' | 'Export' | 'Configuration';
+export type SegmentationMode = 'depth' | 'segment';
+export type Theme = 'light' | 'dark';
+
+export const MAIN_TABS: MainTab[] = ['Mode', 'Segmentation', 'Inpainting', 'Export', 'Configuration'];
+
+/** Matches components.py's DROPDOWN_DEPTH_MODEL default. */
+const DEFAULT_DEPTH_MODEL = 'dinov2';
+/** Matches components.py's SLIDER_NUM_SLICES default. */
+const DEFAULT_NUM_SLICES = 3;
+
+function createUiStore() {
+  let viewerTab = $state<ViewerTab>('2D');
+  let mainTab = $state<MainTab>('Mode');
+  let theme = $state<Theme>('light');
+  let segmentationMode = $state<SegmentationMode>('depth');
+  let depthModel = $state<string>(DEFAULT_DEPTH_MODEL);
+  let pendingNumSlices = $state<number>(DEFAULT_NUM_SLICES);
+
+  return {
+    get viewerTab(): ViewerTab {
+      return viewerTab;
+    },
+    setViewerTab(tab: ViewerTab): void {
+      viewerTab = tab;
+    },
+
+    get mainTab(): MainTab {
+      return mainTab;
+    },
+    setMainTab(tab: MainTab): void {
+      mainTab = tab;
+    },
+
+    get theme(): Theme {
+      return theme;
+    },
+    toggleTheme(): void {
+      theme = theme === 'light' ? 'dark' : 'light';
+    },
+    setTheme(next: Theme): void {
+      theme = next;
+    },
+
+    get segmentationMode(): SegmentationMode {
+      return segmentationMode;
+    },
+    setSegmentationMode(mode: SegmentationMode): void {
+      segmentationMode = mode;
+    },
+
+    get depthModel(): string {
+      return depthModel;
+    },
+    setDepthModel(model: string): void {
+      depthModel = model;
+    },
+
+    get pendingNumSlices(): number {
+      return pendingNumSlices;
+    },
+    setPendingNumSlices(value: number): void {
+      pendingNumSlices = value;
+    },
+
+    /** Test-only: restores default values so stores don't leak between tests. */
+    reset(): void {
+      viewerTab = '2D';
+      mainTab = 'Mode';
+      theme = 'light';
+      segmentationMode = 'depth';
+      depthModel = DEFAULT_DEPTH_MODEL;
+      pendingNumSlices = DEFAULT_NUM_SLICES;
+    },
+  };
+}
+
+export const uiStore = createUiStore();
+export type UiStore = ReturnType<typeof createUiStore>;
diff --git a/frontend/src/lib/workflow.test.ts b/frontend/src/lib/workflow.test.ts
new file mode 100644
index 0000000..03ca0bf
--- /dev/null
+++ b/frontend/src/lib/workflow.test.ts
@@ -0,0 +1,139 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import * as workflow from './workflow';
+import { projectStore } from './state/project.svelte';
+import { jobStore } from './state/jobs.svelte';
+import { logStore } from './state/logs.svelte';
+import type { ProjectView } from './api/types';
+
+function jsonResponse(status: number, body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+function makeView(overrides: Partial<ProjectView> = {}): ProjectView {
+  return {
+    id: 'appstate-test',
+    revision: 1,
+    image: { width: 320, height: 240 },
+    assets: { input: null, depth: null },
+    depthModel: 'dinov2',
+    numSlices: 3,
+    thresholds: [],
+    slices: [],
+    selectedSlice: null,
+    busy: null,
+    ...overrides,
+  };
+}
+
+describe('workflow', () => {
+  beforeEach(() => {
+    projectStore.reset();
+    jobStore.end();
+    logStore.reset();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('uploadImage creates a project and starts a depth job with the given model', async () => {
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      const url = String(input);
+      const method = init?.method ?? 'GET';
+
+      if (url === '/api/v1/projects' && method === 'POST') {
+        return jsonResponse(201, makeView());
+      }
+      if (url.startsWith('/api/v1/projects/appstate-test/logs')) {
+        return jsonResponse(200, { entries: [], next: 0 });
+      }
+      if (url === '/api/v1/projects/appstate-test/depth' && method === 'POST') {
+        expect(JSON.parse(init!.body as string)).toEqual({ model: 'midas' });
+        return jsonResponse(202, { job: { id: 'job-1', kind: 'depth', status: 'queued', progress: 0 } });
+      }
+      if (url === '/api/v1/jobs/job-1') {
+        return jsonResponse(200, {
+          id: 'job-1',
+          kind: 'depth',
+          status: 'succeeded',
+          progress: 1,
+          project: makeView({
+            assets: { input: { url: '/input' }, depth: { url: '/depth' } },
+            thresholds: [0, 85, 170, 255],
+          }),
+        });
+      }
+      throw new Error(`Unexpected fetch: ${method} ${url}`);
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const file = new File(['bytes'], 'input.png', { type: 'image/png' });
+    await workflow.uploadImage(file, 'midas');
+
+    expect(jobStore.active).toBeNull();
+    expect(projectStore.view?.assets.depth?.url).toBe('/depth');
+    expect(projectStore.view?.thresholds).toEqual([0, 85, 170, 255]);
+  });
+
+  it('records an ApiError message in the log store when a mutation fails', async () => {
+    projectStore.applyView(makeView());
+
+    const fetchMock = vi.fn(async () =>
+      jsonResponse(409, { error: { code: 'busy', message: 'the project is busy' } }),
+    );
+    vi.stubGlobal('fetch', fetchMock);
+
+    await workflow.updateSliceCount(4);
+
+    expect(jobStore.active).toBeNull();
+    expect(logStore.entries.at(-1)?.message).toBe('the project is busy');
+  });
+
+  it('generateSlices polls the job and applies the resulting slices', async () => {
+    projectStore.applyView(makeView());
+
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      const url = String(input);
+      const method = init?.method ?? 'GET';
+
+      if (url === '/api/v1/projects/appstate-test/slices' && method === 'POST') {
+        return jsonResponse(202, { job: { id: 'job-2', kind: 'slices', status: 'queued', progress: 0 } });
+      }
+      if (url === '/api/v1/jobs/job-2') {
+        return jsonResponse(200, {
+          id: 'job-2',
+          kind: 'slices',
+          status: 'succeeded',
+          progress: 1,
+          project: makeView({
+            slices: [
+              {
+                index: 0,
+                depth: 85,
+                version: 1,
+                canUndo: false,
+                canRedo: false,
+                positivePrompt: '',
+                negativePrompt: '',
+                image: { url: '/slice-0' },
+                thumbnail: { url: '/slice-0-thumb' },
+              },
+            ],
+          }),
+        });
+      }
+      if (url.startsWith('/api/v1/projects/appstate-test/logs')) {
+        return jsonResponse(200, { entries: [], next: 0 });
+      }
+      throw new Error(`Unexpected fetch: ${method} ${url}`);
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    await workflow.generateSlices();
+
+    expect(projectStore.view?.slices).toHaveLength(1);
+  });
+});
diff --git a/frontend/src/lib/workflow.ts b/frontend/src/lib/workflow.ts
new file mode 100644
index 0000000..f54bfc5
--- /dev/null
+++ b/frontend/src/lib/workflow.ts
@@ -0,0 +1,151 @@
+/**
+ * Orchestrates API calls with the reactive stores: applies `ProjectView`s
+ * through `projectStore.applyView` (revision-guarded), tracks locally
+ * in-flight requests through `jobStore`, and mirrors errors and job
+ * completion into `logStore` (client-side entries plus a log re-fetch, per
+ * the architecture doc's "Logs" behavior). Components call these functions
+ * rather than `lib/api/client.ts` directly, so the busy/log/error handling
+ * stays in one place and is unit-testable without rendering a component.
+ */
+
+import * as api from './api/client';
+import { ApiError } from './api/client';
+import { projectStore } from './state/project.svelte';
+import { jobStore } from './state/jobs.svelte';
+import { logStore } from './state/logs.svelte';
+
+function errorMessage(err: unknown): string {
+  if (err instanceof ApiError) return err.message;
+  if (err instanceof Error) return err.message;
+  return String(err);
+}
+
+async function refreshLogs(projectId: string): Promise<void> {
+  await logStore.refresh(projectId);
+}
+
+/**
+ * Uploads a new source image, then immediately starts a depth job using
+ * `depthModel` (the currently selected value of the Mode tab's dropdown).
+ */
+export async function uploadImage(file: File, depthModel: string): Promise<void> {
+  jobStore.begin('upload');
+  let projectId: string | null = null;
+  try {
+    const view = await api.createProject(file);
+    projectId = view.id;
+    projectStore.applyView(view);
+  } catch (err) {
+    logStore.pushClient(errorMessage(err));
+    jobStore.end();
+    return;
+  }
+  jobStore.end();
+  if (projectId) await refreshLogs(projectId);
+  await startDepth(depthModel);
+}
+
+/** Starts (or restarts) the depth job for the current project and polls it to completion. */
+export async function startDepth(model: string): Promise<void> {
+  const projectId = projectStore.view?.id;
+  if (!projectId) return;
+
+  jobStore.begin('depth');
+  try {
+    const { job } = await api.startDepth(projectId, model);
+    const finished = await api.pollJob(job.id, {
+      onProgress: (j) => jobStore.setProgress(j.progress),
+    });
+    if (finished.project) projectStore.applyView(finished.project);
+  } catch (err) {
+    logStore.pushClient(errorMessage(err));
+  } finally {
+    jobStore.end();
+    await refreshLogs(projectId);
+  }
+}
+
+/** Starts the slice-generation job for the current project and polls it to completion. */
+export async function generateSlices(): Promise<void> {
+  const projectId = projectStore.view?.id;
+  if (!projectId) return;
+
+  jobStore.begin('slices');
+  try {
+    const { job } = await api.startSlices(projectId);
+    const finished = await api.pollJob(job.id, {
+      onProgress: (j) => jobStore.setProgress(j.progress),
+    });
+    if (finished.project) projectStore.applyView(finished.project);
+  } catch (err) {
+    logStore.pushClient(errorMessage(err));
+  } finally {
+    jobStore.end();
+    await refreshLogs(projectId);
+  }
+}
+
+/**
+ * Sends the full interior thresholds `values` array with the current
+ * revision as `baseRevision`. On `stale_revision`, refetches the project
+ * once and retries with the fresh revision (per the architecture doc's
+ * "Concurrency" section).
+ */
+export async function updateThresholds(values: number[]): Promise<void> {
+  const view = projectStore.view;
+  if (!view) return;
+
+  jobStore.begin('thresholds');
+  try {
+    let result: Awaited<ReturnType<typeof api.setThresholds>>;
+    try {
+      result = await api.setThresholds(view.id, values, view.revision);
+    } catch (err) {
+      if (err instanceof ApiError && err.code === 'stale_revision') {
+        const fresh = await api.getProject(view.id);
+        projectStore.applyView(fresh);
+        result = await api.setThresholds(view.id, values, fresh.revision);
+      } else {
+        throw err;
+      }
+    }
+    projectStore.applyView(result);
+  } catch (err) {
+    logStore.pushClient(errorMessage(err));
+  } finally {
+    jobStore.end();
+    await refreshLogs(view.id);
+  }
+}
+
+/** Updates the slice count for the current project (Configuration tab). */
+export async function updateSliceCount(numSlices: number): Promise<void> {
+  const view = projectStore.view;
+  if (!view) return;
+
+  jobStore.begin('slice-count');
+  try {
+    const result = await api.setSliceCount(view.id, numSlices);
+    projectStore.applyView(result);
+  } catch (err) {
+    logStore.pushClient(errorMessage(err));
+  } finally {
+    jobStore.end();
+    await refreshLogs(view.id);
+  }
+}
+
+/** Restores a legacy `appstate.json` (Configuration tab's Load State). */
+export async function restoreProject(file: File): Promise<void> {
+  jobStore.begin('restore');
+  try {
+    const view = await api.restoreProject(file);
+    logStore.reset();
+    projectStore.applyView(view);
+    await refreshLogs(view.id);
+  } catch (err) {
+    logStore.pushClient(errorMessage(err));
+  } finally {
+    jobStore.end();
+  }
+}
diff --git a/package.json b/package.json
index e291f51..f707490 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "build": "tailwindcss -i ./tailwind.css -o ./parallax_maker/assets/css/tailwind_compiled.css",
     "watch": "tailwindcss -i ./tailwind.css -o ./parallax_maker/assets/css/tailwind_compiled.css --watch",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "pretest:e2e": "npm run build:frontend",
     "test:e2e": "playwright test --config=e2e/playwright.config.ts",
     "test:e2e:headed": "playwright test --config=e2e/playwright.config.ts --headed",
     "check:e2e": "tsc --noEmit -p e2e/tsconfig.json",