diff --git a/src/diagram/CLAUDE.md b/src/diagram/CLAUDE.md
index f4e85e027..4cf0810ea 100644
--- a/src/diagram/CLAUDE.md
+++ b/src/diagram/CLAUDE.md
@@ -1,6 +1,6 @@
 # @simlin/diagram
 
-Last verified: 2026-04-26
+Last verified: 2026-05-11
 
 React components for model visualization and editing. Designed as a general-purpose SD model editor toolkit without dependencies on the Simlin app or server API.
 
@@ -11,7 +11,9 @@ For build/test/lint commands, see [docs/dev/commands.md](/docs/dev/commands.md).
 
 ### Editor and Core Logic
 
-- `Editor.tsx` -- Main model editor: user interaction, state, and tool selection. Manages module navigation stack (`modelStack`), module CRUD handlers, and delegates to `ModuleDetails` for module editing. Optional `onSelectionChanged?: (idents: string[]) => void` prop fires after each selection change (used by `simlin-serve`'s `EditorHost` to forward selection state to backend listeners; `HostedWebEditor` in `src/app` does not subscribe). The callback runs through `setTimeout(..., 0)` so React commits the new selection before `getSelectionIdents()` reads `this.state.selection`.
+- `Editor.tsx` -- Main model editor: user interaction, state, and tool selection. Manages module navigation stack (`modelStack`), module CRUD handlers, and delegates to `ModuleDetails` for module editing. Optional `onSelectionChanged?: (idents: string[]) => void` prop fires after each selection change (used by `simlin-serve`'s `EditorHost` to forward selection state to backend listeners; `HostedWebEditor` in `src/app` does not subscribe). The callback runs through `setTimeout(..., 0)` so React commits the new selection before `getSelectionIdents()` reads `this.state.selection`. Optional `onDeleteProject?: () => Promise<void>` prop: when set and not `readOnlyMode`, `getDrawer()` forwards it to `ModelPropertiesDrawer` as the drawer's destructive "Delete project" action (hosts backed by a non-deletable project -- `simlin-serve`, embeds -- leave it undefined).
+- `ModelPropertiesDrawer.tsx` -- Hamburger-menu drawer: model name, sim-spec fields (start/stop/dt/time units), "Download model", and -- when `onDelete` is supplied -- a `DeleteProjectButton`.
+- `DeleteProjectButton.tsx` -- Low-emphasis destructive button + modal confirmation (`Dialog`) that calls `onDelete`; a rejected `onDelete` keeps the dialog open with the error message, a resolved one means the host has navigated away. Kept separate so the confirmation state lives in one small, reusable place.
 - `VariableDetails.tsx` -- Variable properties/equation panel (stocks, flows, auxes)
 - `ModuleDetails.tsx` -- Module properties panel: model reference selector, input wiring table, output ports, units/docs editors
 - `BreadcrumbBar.tsx` -- Breadcrumb navigation: back arrow + breadcrumb trail when inside a module, hamburger menu at root
@@ -22,7 +24,7 @@ For build/test/lint commands, see [docs/dev/commands.md](/docs/dev/commands.md).
 - `arc-utils.ts` -- Arc geometry helpers (`radToDeg`, `degToRad`, arc math)
 - `keyboard-shortcuts.ts` -- Keyboard shortcut handling
 - `StaticDiagram.tsx` -- Static (non-interactive) diagram renderer
-- `HostedWebEditor.tsx` -- Web editor wrapper
+- `HostedWebEditor.tsx` -- Web editor wrapper for `src/app`: loads/saves a hosted project via the server's project HTTP API and owns `handleDelete` (DELETEs the project route, then full-navigates to the project list). Passes `onDeleteProject` to `Editor` only when not `readOnlyMode`.
 - `LineChart.tsx` -- Chart visualization
 
 ### Module Logic (Functional Core)
diff --git a/src/diagram/DeleteProjectButton.module.css b/src/diagram/DeleteProjectButton.module.css
new file mode 100644
index 000000000..3b7febccd
--- /dev/null
+++ b/src/diagram/DeleteProjectButton.module.css
@@ -0,0 +1,9 @@
+.trigger {
+  justify-content: center;
+  width: 100%;
+  margin-top: 12px;
+}
+
+.errorText {
+  color: var(--color-error);
+}
diff --git a/src/diagram/DeleteProjectButton.tsx b/src/diagram/DeleteProjectButton.tsx
new file mode 100644
index 000000000..24c1e3ada
--- /dev/null
+++ b/src/diagram/DeleteProjectButton.tsx
@@ -0,0 +1,113 @@
+// Copyright 2026 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import Button from './components/Button';
+import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from './components/Dialog';
+import { DeleteIcon } from './components/icons';
+
+import styles from './DeleteProjectButton.module.css';
+
+interface DeleteProjectButtonProps {
+  /** Display name shown in the confirmation prompt. */
+  projectName: string;
+  /**
+   * Performs the deletion. Resolving means the caller has navigated away (so
+   * this component is about to unmount); rejecting surfaces the error in the
+   * still-open confirmation dialog so the user can retry.
+   */
+  onDelete: () => Promise<void>;
+}
+
+interface DeleteProjectButtonState {
+  confirmOpen: boolean;
+  deleting: boolean;
+  error?: string;
+}
+
+function errorMessage(err: unknown): string {
+  if (err instanceof Error && err.message) {
+    return err.message;
+  }
+  const s = String(err);
+  return s && s !== '[object Object]' ? s : 'unable to delete project';
+}
+
+/**
+ * "Delete project" action: a low-emphasis destructive button that opens a
+ * modal confirmation before invoking `onDelete`. Kept separate from
+ * `ModelPropertiesDrawer` so the confirmation state lives in one small place
+ * and can be reused by other surfaces (e.g. a project list).
+ */
+export class DeleteProjectButton extends React.PureComponent<DeleteProjectButtonProps, DeleteProjectButtonState> {
+  state: DeleteProjectButtonState = { confirmOpen: false, deleting: false };
+
+  private openConfirm = (): void => {
+    this.setState({ confirmOpen: true, error: undefined });
+  };
+
+  private closeConfirm = (): void => {
+    // Don't let an outside-click / Escape dismiss the dialog mid-delete.
+    if (this.state.deleting) {
+      return;
+    }
+    this.setState({ confirmOpen: false, error: undefined });
+  };
+
+  private confirmDelete = async (): Promise<void> => {
+    if (this.state.deleting) {
+      return;
+    }
+    this.setState({ deleting: true, error: undefined });
+    try {
+      await this.props.onDelete();
+      // Success: the caller navigates away and this component unmounts. Leave
+      // `deleting` set so the buttons stay disabled during that brief window.
+    } catch (err) {
+      this.setState({ deleting: false, error: errorMessage(err) });
+    }
+  };
+
+  render(): React.ReactNode {
+    const { projectName } = this.props;
+    const { confirmOpen, deleting, error } = this.state;
+
+    return (
+      <>
+        <Button
+          className={styles.trigger}
+          variant="outlined"
+          color="error"
+          size="large"
+          startIcon={<DeleteIcon />}
+          onClick={this.openConfirm}
+        >
+          Delete project
+        </Button>
+        <Dialog open={confirmOpen} onClose={this.closeConfirm} aria-labelledby="delete-project-title">
+          <DialogTitle id="delete-project-title">Delete this project?</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              This permanently deletes &ldquo;{projectName}&rdquo; and can&rsquo;t be undone.
+            </DialogContentText>
+            {error ? (
+              <DialogContentText className={styles.errorText}>
+                <b>{error}</b>
+              </DialogContentText>
+            ) : null}
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.closeConfirm} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button variant="contained" color="error" onClick={this.confirmDelete} disabled={deleting}>
+              {deleting ? 'Deleting…' : 'Delete'}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </>
+    );
+  }
+}
diff --git a/src/diagram/Editor.tsx b/src/diagram/Editor.tsx
index c17059384..56ec53847 100644
--- a/src/diagram/Editor.tsx
+++ b/src/diagram/Editor.tsx
@@ -235,6 +235,12 @@ interface EditorPropsBase {
   // (e.g. simlin-serve's EditorHost) use this to forward selection state
   // to backend listeners; HostedWebEditor in src/app does not subscribe.
   onSelectionChanged?: (idents: string[]) => void;
+  // When provided (and the editor is not read-only), the model-properties
+  // drawer offers a destructive "Delete project" action that calls this.
+  // Resolving means the host has navigated away; rejecting surfaces the
+  // error in the confirmation dialog. Hosts without a deletable backing
+  // project (the local file-backed viewer, embeds) leave this undefined.
+  onDeleteProject?: () => Promise<void>;
 }
 
 export type EditorProps = EditorPropsBase & ProjectInputProps;
@@ -1478,6 +1484,10 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     const simSpec = project.simSpecs;
     const dt = simSpec.dt.isReciprocal ? 1 / simSpec.dt.value : simSpec.dt.value;
 
+    // A read-only viewer should never see a delete affordance even if a host
+    // wired the callback.
+    const onDelete = !this.props.readOnlyMode ? this.props.onDeleteProject : undefined;
+
     return (
       <ModelPropertiesDrawer
         modelName={project.name}
@@ -1492,6 +1502,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
         onDtChange={this.handleDtChange}
         onTimeUnitsChange={this.handleTimeUnitsChange}
         onDownloadXmile={this.handleDownloadXmile}
+        onDelete={onDelete}
       />
     );
   }
diff --git a/src/diagram/HostedWebEditor.tsx b/src/diagram/HostedWebEditor.tsx
index 4c1b862cd..fc9d81684 100644
--- a/src/diagram/HostedWebEditor.tsx
+++ b/src/diagram/HostedWebEditor.tsx
@@ -97,6 +97,45 @@ export class HostedWebEditor extends React.PureComponent<HostedWebEditorProps, H
     return projectVersion;
   };
 
+  handleDelete = async (): Promise<void> => {
+    if (this.props.readOnlyMode) return;
+
+    const base = this.getBaseURL();
+    const apiPath = `${base}/api/projects/${this.props.username}/${this.props.projectName}`;
+    const response = await fetch(apiPath, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      cache: 'no-cache',
+    });
+
+    const status = response.status;
+    if (!(status >= 200 && status < 400)) {
+      let errorMsg = `HTTP ${status} while deleting project`;
+      try {
+        const body = await response.json();
+        if (body && typeof body.error === 'string') {
+          errorMsg = body.error as string;
+        }
+      } catch {
+        // keep the status-bearing fallback
+      }
+      // Surface this to the in-editor confirmation dialog (which stays open
+      // for a retry) rather than appendModelError(): once a project loads,
+      // serviceErrors are no longer rendered.
+      throw new Error(errorMsg);
+    }
+
+    // Full navigation back to the project list so it refetches without the
+    // just-deleted project.
+    this.redirectToHome(`${base}/`);
+  };
+
+  // Extracted so tests can observe the post-delete navigation without
+  // assigning to jsdom's non-writable window.location.
+  redirectToHome(url: string): void {
+    window.location.assign(url);
+  }
+
   async loadProject(): Promise<void> {
     const base = this.getBaseURL();
     const apiPath = `${base}/api/projects/${this.props.username}/${this.props.projectName}`;
@@ -138,6 +177,7 @@ export class HostedWebEditor extends React.PureComponent<HostedWebEditorProps, H
           name={this.props.projectName}
           embedded={this.props.embedded}
           onSave={this.handleSave}
+          onDeleteProject={this.props.readOnlyMode ? undefined : this.handleDelete}
           readOnlyMode={this.props.readOnlyMode}
         />
       </div>
diff --git a/src/diagram/ModelPropertiesDrawer.tsx b/src/diagram/ModelPropertiesDrawer.tsx
index c662d4dc4..1316059fc 100644
--- a/src/diagram/ModelPropertiesDrawer.tsx
+++ b/src/diagram/ModelPropertiesDrawer.tsx
@@ -11,6 +11,7 @@ import Drawer from './components/Drawer';
 import TextField from './components/TextField';
 import { ArrowBackIcon, ClearIcon, CloudDownloadIcon } from './components/icons';
 
+import { DeleteProjectButton } from './DeleteProjectButton';
 import { ModelIcon } from './ModelIcon';
 
 import styles from './ModelPropertiesDrawer.module.css';
@@ -28,6 +29,10 @@ interface ModelPropertiesDrawerProps {
   onDtChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onTimeUnitsChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onDownloadXmile: () => void;
+  // When provided, a destructive "Delete project" action is shown. Hosts that
+  // can't (or shouldn't) delete -- read-only viewers, embeds, the local
+  // file-backed viewer -- simply leave this undefined.
+  onDelete?: () => Promise<void>;
 }
 
 export class ModelPropertiesDrawer extends React.PureComponent<ModelPropertiesDrawerProps> {
@@ -106,6 +111,9 @@ export class ModelPropertiesDrawer extends React.PureComponent<ModelPropertiesDr
             >
               Download model
             </Button>
+            {this.props.onDelete ? (
+              <DeleteProjectButton projectName={modelName} onDelete={this.props.onDelete} />
+            ) : null}
           </div>
         </div>
       </Drawer>
diff --git a/src/diagram/components/Button.module.css b/src/diagram/components/Button.module.css
index 9a4e33254..ec906346c 100644
--- a/src/diagram/components/Button.module.css
+++ b/src/diagram/components/Button.module.css
@@ -63,6 +63,16 @@
   background-color: rgba(220, 0, 78, 0.04);
 }
 
+/* text + error */
+.textError {
+  color: var(--color-error);
+  background: transparent;
+}
+
+.textError:hover {
+  background-color: rgba(198, 40, 40, 0.04);
+}
+
 /* contained + primary */
 .containedPrimary {
   color: #fff;
@@ -85,6 +95,17 @@
   background-color: #9a0036;
 }
 
+/* contained + error */
+.containedError {
+  color: #fff;
+  background-color: var(--color-error);
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+}
+
+.containedError:hover {
+  background-color: #b71c1c;
+}
+
 /* disabled states */
 .disabledText {
   color: rgba(0, 0, 0, 0.26);
@@ -122,6 +143,18 @@
   background-color: rgba(220, 0, 78, 0.04);
 }
 
+/* outlined + error */
+.outlinedError {
+  color: var(--color-error);
+  border: 1px solid rgba(198, 40, 40, 0.5);
+  background: transparent;
+}
+
+.outlinedError:hover {
+  border-color: var(--color-error);
+  background-color: rgba(198, 40, 40, 0.04);
+}
+
 /* outlined + inherit */
 .outlinedInherit {
   color: inherit;
diff --git a/src/diagram/components/Button.tsx b/src/diagram/components/Button.tsx
index da06257a1..77751953e 100644
--- a/src/diagram/components/Button.tsx
+++ b/src/diagram/components/Button.tsx
@@ -10,7 +10,7 @@ import styles from './Button.module.css';
 
 interface ButtonProps {
   variant?: 'text' | 'contained' | 'outlined';
-  color?: 'primary' | 'secondary' | 'inherit';
+  color?: 'primary' | 'secondary' | 'error' | 'inherit';
   size?: 'small' | 'medium' | 'large';
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -49,19 +49,32 @@ export default class Button extends React.PureComponent<ButtonProps> {
     let variantColorClass: string;
     let disabledClass: string | undefined;
     if (variant === 'contained') {
-      variantColorClass = color === 'secondary' ? styles.containedSecondary : styles.containedPrimary;
+      variantColorClass =
+        color === 'secondary'
+          ? styles.containedSecondary
+          : color === 'error'
+            ? styles.containedError
+            : styles.containedPrimary;
       disabledClass = disabled ? styles.disabledContained : undefined;
     } else if (variant === 'outlined') {
       variantColorClass =
         color === 'secondary'
           ? styles.outlinedSecondary
-          : color === 'inherit'
-            ? styles.outlinedInherit
-            : styles.outlinedPrimary;
+          : color === 'error'
+            ? styles.outlinedError
+            : color === 'inherit'
+              ? styles.outlinedInherit
+              : styles.outlinedPrimary;
       disabledClass = disabled ? styles.disabledOutlined : undefined;
     } else {
       variantColorClass =
-        color === 'secondary' ? styles.textSecondary : color === 'inherit' ? styles.textInherit : styles.textPrimary;
+        color === 'secondary'
+          ? styles.textSecondary
+          : color === 'error'
+            ? styles.textError
+            : color === 'inherit'
+              ? styles.textInherit
+              : styles.textPrimary;
       disabledClass = disabled ? styles.disabledText : undefined;
     }
 
diff --git a/src/diagram/components/icons.tsx b/src/diagram/components/icons.tsx
index 52fbb74af..e6ae1ad65 100644
--- a/src/diagram/components/icons.tsx
+++ b/src/diagram/components/icons.tsx
@@ -22,6 +22,12 @@ export const EditIcon = (props: IconProps) => (
   </SvgIcon>
 );
 
+export const DeleteIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z" />
+  </SvgIcon>
+);
+
 export const MenuIcon = (props: IconProps) => (
   <SvgIcon {...props}>
     <path d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z" />
diff --git a/src/diagram/tests/button.test.tsx b/src/diagram/tests/button.test.tsx
index e505b92d3..88d53b368 100644
--- a/src/diagram/tests/button.test.tsx
+++ b/src/diagram/tests/button.test.tsx
@@ -69,6 +69,29 @@ describe('Button', () => {
     expect(button.className).toContain('textPrimary');
   });
 
+  test('applies contained error classes', () => {
+    render(
+      <Button variant="contained" color="error">
+        Delete
+      </Button>,
+    );
+    expect(screen.getByRole('button').className).toContain('containedError');
+  });
+
+  test('applies outlined error classes', () => {
+    render(
+      <Button variant="outlined" color="error">
+        Delete
+      </Button>,
+    );
+    expect(screen.getByRole('button').className).toContain('outlinedError');
+  });
+
+  test('applies text error classes', () => {
+    render(<Button color="error">Delete</Button>);
+    expect(screen.getByRole('button').className).toContain('textError');
+  });
+
   test('applies outlined primary classes', () => {
     render(
       <Button variant="outlined" color="primary">
diff --git a/src/diagram/tests/delete-project-button.test.tsx b/src/diagram/tests/delete-project-button.test.tsx
new file mode 100644
index 000000000..6012299ef
--- /dev/null
+++ b/src/diagram/tests/delete-project-button.test.tsx
@@ -0,0 +1,69 @@
+// Copyright 2026 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+
+import { DeleteProjectButton } from '../DeleteProjectButton';
+
+describe('DeleteProjectButton', () => {
+  test('renders a Delete project button with the confirmation dialog initially closed', () => {
+    render(<DeleteProjectButton projectName="climate" onDelete={jest.fn()} />);
+    expect(screen.getByRole('button', { name: /delete project/i })).not.toBeNull();
+    expect(screen.queryByText(/delete this project\?/i)).toBeNull();
+  });
+
+  test('clicking the trigger opens a confirmation dialog naming the project', () => {
+    render(<DeleteProjectButton projectName="climate-101" onDelete={jest.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: /delete project/i }));
+    expect(screen.getByText(/delete this project\?/i)).not.toBeNull();
+    expect(screen.getByText(/climate-101/)).not.toBeNull();
+  });
+
+  test('Cancel closes the dialog without calling onDelete', () => {
+    const onDelete = jest.fn();
+    render(<DeleteProjectButton projectName="climate" onDelete={onDelete} />);
+    fireEvent.click(screen.getByRole('button', { name: /delete project/i }));
+    fireEvent.click(screen.getByRole('button', { name: /^cancel$/i }));
+    expect(screen.queryByText(/delete this project\?/i)).toBeNull();
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  test('confirming calls onDelete', async () => {
+    const onDelete = jest.fn().mockResolvedValue(undefined);
+    render(<DeleteProjectButton projectName="climate" onDelete={onDelete} />);
+    fireEvent.click(screen.getByRole('button', { name: /delete project/i }));
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /^delete$/i }));
+    });
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  test('a rejected onDelete keeps the dialog open and shows the error', async () => {
+    const onDelete = jest.fn().mockRejectedValue(new Error('network is down'));
+    render(<DeleteProjectButton projectName="climate" onDelete={onDelete} />);
+    fireEvent.click(screen.getByRole('button', { name: /delete project/i }));
+    fireEvent.click(screen.getByRole('button', { name: /^delete$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/network is down/i)).not.toBeNull();
+    });
+    // dialog is still open and the action buttons are usable again
+    expect(screen.getByText(/delete this project\?/i)).not.toBeNull();
+    const confirmButton = screen.getByRole('button', { name: /^delete$/i }) as HTMLButtonElement;
+    expect(confirmButton.disabled).toBe(false);
+  });
+
+  test('the action buttons are disabled while the delete is in flight', async () => {
+    // Never-resolving promise: the component should stay in its "deleting" state.
+    const onDelete = jest.fn().mockReturnValue(new Promise<void>(() => {}));
+    render(<DeleteProjectButton projectName="climate" onDelete={onDelete} />);
+    fireEvent.click(screen.getByRole('button', { name: /delete project/i }));
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /^delete$/i }));
+    });
+    expect((screen.getByRole('button', { name: /^cancel$/i }) as HTMLButtonElement).disabled).toBe(true);
+    expect((screen.getByRole('button', { name: /deleting/i }) as HTMLButtonElement).disabled).toBe(true);
+  });
+});
diff --git a/src/diagram/tests/editor-drawer-delete.test.ts b/src/diagram/tests/editor-drawer-delete.test.ts
new file mode 100644
index 000000000..f7933f4c8
--- /dev/null
+++ b/src/diagram/tests/editor-drawer-delete.test.ts
@@ -0,0 +1,81 @@
+/**
+ * @jest-environment node
+ *
+ * Copyright 2026 The Simlin Authors. All rights reserved.
+ * Use of this source code is governed by the Apache License,
+ * Version 2.0, that can be found in the LICENSE file.
+ */
+
+// getDrawer() decides whether the model-properties drawer offers a "Delete
+// project" action: it forwards the host's onDeleteProject callback only when
+// the editor is editable (not read-only) and a callback was actually
+// supplied. We poke getDrawer() directly via Object.create(Editor.prototype)
+// to avoid spinning up WASM / React in the constructor; only the state and
+// props getDrawer() reads are seeded.
+
+import * as React from 'react';
+
+import { Editor } from '../Editor';
+import { ModelPropertiesDrawer } from '../ModelPropertiesDrawer';
+
+type EditorInstance = InstanceType<typeof Editor>;
+
+function makeEditor(propsOverride: Record<string, unknown> = {}): EditorInstance {
+  const editor = Object.create(Editor.prototype) as EditorInstance;
+
+  editor.state = {
+    drawerOpen: false,
+    modelName: 'main',
+    activeProject: {
+      name: 'test-project',
+      models: new Map([['main', { name: 'main' }]]),
+      simSpecs: {
+        start: 0,
+        stop: 100,
+        dt: { isReciprocal: false, value: 1 },
+        timeUnits: 'years',
+      },
+    },
+  } as unknown as EditorInstance['state'];
+
+  editor.props = {
+    embedded: false,
+    readOnlyMode: false,
+    ...propsOverride,
+  } as unknown as EditorInstance['props'];
+
+  return editor;
+}
+
+function drawerElement(editor: EditorInstance): React.ReactElement<React.ComponentProps<typeof ModelPropertiesDrawer>> {
+  const el = editor.getDrawer();
+  if (!el || !React.isValidElement(el)) {
+    throw new Error('expected getDrawer() to return a ModelPropertiesDrawer element');
+  }
+  expect(el.type).toBe(ModelPropertiesDrawer);
+  return el as React.ReactElement<React.ComponentProps<typeof ModelPropertiesDrawer>>;
+}
+
+describe('Editor.getDrawer() delete wiring', () => {
+  test('forwards onDeleteProject as the drawer onDelete when editable', () => {
+    const onDeleteProject = jest.fn(async () => {});
+    const editor = makeEditor({ onDeleteProject });
+    expect(drawerElement(editor).props.onDelete).toBe(onDeleteProject);
+  });
+
+  test('omits onDelete when the editor is read-only', () => {
+    const onDeleteProject = jest.fn(async () => {});
+    const editor = makeEditor({ onDeleteProject, readOnlyMode: true });
+    expect(drawerElement(editor).props.onDelete).toBeUndefined();
+  });
+
+  test('omits onDelete when no onDeleteProject callback is supplied', () => {
+    const editor = makeEditor();
+    expect(drawerElement(editor).props.onDelete).toBeUndefined();
+  });
+
+  test('renders no drawer at all when embedded', () => {
+    const editor = makeEditor({ onDeleteProject: jest.fn(async () => {}), embedded: true });
+    expect(editor.getDrawer()).toBeUndefined();
+  });
+});
diff --git a/src/diagram/tests/hosted-web-editor-delete.test.ts b/src/diagram/tests/hosted-web-editor-delete.test.ts
new file mode 100644
index 000000000..6d269f5f6
--- /dev/null
+++ b/src/diagram/tests/hosted-web-editor-delete.test.ts
@@ -0,0 +1,105 @@
+/**
+ * @jest-environment node
+ *
+ * Copyright 2026 The Simlin Authors. All rights reserved.
+ * Use of this source code is governed by the Apache License,
+ * Version 2.0, that can be found in the LICENSE file.
+ */
+
+// HostedWebEditor.handleDelete() issues DELETE /api/projects/:user/:name and,
+// on success, navigates back to the project list. On any non-2xx/3xx response
+// it throws so the in-editor confirmation dialog can surface the message and
+// keep itself open for a retry. loadProject() (kicked off by the constructor)
+// and redirectToHome() (a real navigation) are stubbed so the test can drive
+// handleDelete() in isolation.
+
+import { HostedWebEditor } from '../HostedWebEditor';
+
+function mockFetch(impl: (input: string, init?: RequestInit) => Promise<Response>): jest.Mock {
+  const fn = jest.fn(impl);
+  (globalThis as unknown as { fetch: typeof fetch }).fetch = fn as unknown as typeof fetch;
+  return fn;
+}
+
+function jsonResponse(status: number, body: unknown): Response {
+  return { status, json: async () => body } as unknown as Response;
+}
+
+function makeEditor(
+  props: Partial<InstanceType<typeof HostedWebEditor>['props']> = {},
+): InstanceType<typeof HostedWebEditor> {
+  return new HostedWebEditor({
+    username: 'alice',
+    projectName: 'climate',
+    readOnlyMode: false,
+    ...props,
+  } as InstanceType<typeof HostedWebEditor>['props']);
+}
+
+describe('HostedWebEditor.handleDelete', () => {
+  const originalFetch = globalThis.fetch;
+  let redirectSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    jest.spyOn(HostedWebEditor.prototype, 'loadProject').mockResolvedValue(undefined);
+    redirectSpy = jest.spyOn(HostedWebEditor.prototype, 'redirectToHome').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    (globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch;
+    jest.restoreAllMocks();
+  });
+
+  test('DELETEs the project endpoint and navigates home on success', async () => {
+    // `App.tsx` passes baseURL="" in production, so a relative path is the
+    // realistic case.
+    const fetchMock = mockFetch(async () => jsonResponse(200, {}));
+    const editor = makeEditor({ username: 'alice', projectName: 'climate', baseURL: '' });
+
+    await editor.handleDelete();
+
+    const deleteCall = fetchMock.mock.calls.find((c) => (c[1] as RequestInit | undefined)?.method === 'DELETE');
+    expect(deleteCall).toBeDefined();
+    expect(deleteCall![0]).toBe('/api/projects/alice/climate');
+    expect((deleteCall![1] as RequestInit).credentials).toBe('same-origin');
+    expect(redirectSpy).toHaveBeenCalledWith('/');
+  });
+
+  test('honors a custom baseURL for both the request and the redirect', async () => {
+    const fetchMock = mockFetch(async () => jsonResponse(200, {}));
+    const editor = makeEditor({ username: 'bob', projectName: 'world3', baseURL: 'https://example.test' });
+
+    await editor.handleDelete();
+
+    const deleteCall = fetchMock.mock.calls.find((c) => (c[1] as RequestInit | undefined)?.method === 'DELETE');
+    expect(deleteCall![0]).toBe('https://example.test/api/projects/bob/world3');
+    expect(redirectSpy).toHaveBeenCalledWith('https://example.test/');
+  });
+
+  test('throws the server error message and does not navigate on failure', async () => {
+    mockFetch(async () => jsonResponse(401, { error: 'unauthorized' }));
+    const editor = makeEditor();
+
+    await expect(editor.handleDelete()).rejects.toThrow('unauthorized');
+    expect(redirectSpy).not.toHaveBeenCalled();
+  });
+
+  test('throws a status-bearing message when the error response has no body message', async () => {
+    mockFetch(async () => jsonResponse(500, {}));
+    const editor = makeEditor();
+
+    await expect(editor.handleDelete()).rejects.toThrow(/500/);
+    expect(redirectSpy).not.toHaveBeenCalled();
+  });
+
+  test('is a no-op in read-only mode', async () => {
+    const fetchMock = mockFetch(async () => jsonResponse(200, {}));
+    const editor = makeEditor({ readOnlyMode: true });
+
+    await editor.handleDelete();
+
+    const deleteCall = fetchMock.mock.calls.find((c) => (c[1] as RequestInit | undefined)?.method === 'DELETE');
+    expect(deleteCall).toBeUndefined();
+    expect(redirectSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/diagram/tests/model-properties-drawer.test.tsx b/src/diagram/tests/model-properties-drawer.test.tsx
new file mode 100644
index 000000000..61e50daaa
--- /dev/null
+++ b/src/diagram/tests/model-properties-drawer.test.tsx
@@ -0,0 +1,57 @@
+// Copyright 2026 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+
+import { ModelPropertiesDrawer } from '../ModelPropertiesDrawer';
+
+function renderDrawer(overrides: Partial<React.ComponentProps<typeof ModelPropertiesDrawer>> = {}) {
+  const noop = () => {};
+  return render(
+    <ModelPropertiesDrawer
+      modelName="climate"
+      open={true}
+      onDrawerToggle={noop}
+      startTime={0}
+      stopTime={100}
+      dt={1}
+      timeUnits="years"
+      onStartTimeChange={noop}
+      onStopTimeChange={noop}
+      onDtChange={noop}
+      onTimeUnitsChange={noop}
+      onDownloadXmile={noop}
+      {...overrides}
+    />,
+  );
+}
+
+describe('ModelPropertiesDrawer', () => {
+  test('always offers the model download', () => {
+    renderDrawer();
+    expect(screen.getByRole('button', { name: /download model/i })).not.toBeNull();
+  });
+
+  test('does not show a delete action when onDelete is not provided', () => {
+    renderDrawer();
+    expect(screen.queryByRole('button', { name: /delete project/i })).toBeNull();
+  });
+
+  test('shows a delete action when onDelete is provided', () => {
+    renderDrawer({ onDelete: jest.fn() });
+    expect(screen.getByRole('button', { name: /delete project/i })).not.toBeNull();
+  });
+
+  test('confirming the delete dialog invokes onDelete', async () => {
+    const onDelete = jest.fn().mockResolvedValue(undefined);
+    renderDrawer({ onDelete });
+    fireEvent.click(screen.getByRole('button', { name: /delete project/i }));
+    await waitFor(() => expect(screen.getByText(/delete this project\?/i)).not.toBeNull());
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /^delete$/i }));
+    });
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/server/api.ts b/src/server/api.ts
index 370f6208f..13187e076 100644
--- a/src/server/api.ts
+++ b/src/server/api.ts
@@ -11,6 +11,7 @@ import { Database } from './models/db-interfaces';
 import { populateExamples } from './new-user';
 import { createFile, createProject, emptyProject } from './project-creation';
 import { renderToPNG } from './render';
+import { createDeleteProjectHandler } from './route-handlers';
 import { Preview as PreviewPb } from './schemas/preview_pb';
 import { Project as ProjectPb } from './schemas/project_pb';
 import { User as UserPb } from './schemas/user_pb';
@@ -306,6 +307,8 @@ export const apiRouter = (app: Application): Router => {
     res.status(200).json({ version: newVersion });
   });
 
+  api.delete('/projects/:username/:projectName', createDeleteProjectHandler({ db: app.db }));
+
   api.patch('/user', async (req: Request, res: Response): Promise<void> => {
     const userModel = getUser(req, res);
 
diff --git a/src/server/route-handlers.ts b/src/server/route-handlers.ts
index 1ba1060e4..88e03cefd 100644
--- a/src/server/route-handlers.ts
+++ b/src/server/route-handlers.ts
@@ -28,6 +28,31 @@ export interface ProjectRouteHandlerDeps {
   db: { project: ProjectDb };
 }
 
+/**
+ * Database operations needed to delete a project: looking the project up to
+ * verify ownership, then removing the project document. Deleting the project
+ * doc is what makes the project disappear from listings and the SSR route;
+ * the (orphaned) `File` documents are intentionally left behind, consistent
+ * with how every save already orphans the prior `File` doc.
+ */
+export interface DeletableProjectDb extends ProjectDb {
+  deleteOne(id: string): Promise<void>;
+}
+
+/**
+ * Database operations needed to clean up a project's cached preview PNG.
+ */
+export interface DeletablePreviewDb {
+  deleteOne(id: string): Promise<void>;
+}
+
+export interface DeleteProjectHandlerDeps {
+  db: {
+    project: DeletableProjectDb;
+    preview: DeletablePreviewDb;
+  };
+}
+
 /**
  * Create the route handler for /:username/:projectName
  *
@@ -94,3 +119,57 @@ export function createProjectRouteHandler(deps: ProjectRouteHandlerDeps) {
     next();
   };
 }
+
+/**
+ * Create the route handler for DELETE /api/projects/:username/:projectName.
+ *
+ * Permanently deletes the project (no soft-delete / undo). Only the project's
+ * owner may delete it. Ownership is checked twice: once against the URL
+ * username before any DB lookup -- so a logged-in user can't probe whether
+ * another user's private project exists via the 404-vs-401 distinction -- and
+ * again against the stored record's ownerId as defense in depth. The cached
+ * preview PNG is removed on a best-effort basis; the underlying `File`
+ * documents are intentionally left orphaned.
+ */
+export function createDeleteProjectHandler(deps: DeleteProjectHandlerDeps) {
+  return async (req: Request, res: Response): Promise<void> => {
+    const authUser = getAuthenticatedUser(req);
+    if (!authUser) {
+      res.status(401).json({ error: 'unauthorized' });
+      return;
+    }
+
+    const username = req.params.username as string;
+    const projectName = req.params.projectName as string;
+
+    if (authUser.userId !== username) {
+      res.status(401).json({ error: 'unauthorized' });
+      return;
+    }
+
+    const projectId = `${username}/${projectName}`;
+    const project = await deps.db.project.findOne(projectId);
+    if (!project) {
+      res.status(404).json({});
+      return;
+    }
+
+    if (!isResourceOwner(authUser, project.getOwnerId())) {
+      res.status(401).json({ error: 'unauthorized' });
+      return;
+    }
+
+    await deps.db.project.deleteOne(projectId);
+
+    // A stale preview is harmless once the project doc is gone (the preview
+    // route 404s without a project), so don't fail the request if it can't
+    // be removed -- just leave it for any future GC.
+    try {
+      await deps.db.preview.deleteOne(projectId);
+    } catch (err) {
+      logger.warn(`unable to delete preview for ${projectId}: ${err}`);
+    }
+
+    res.status(200).json({});
+  };
+}
diff --git a/src/server/tests/delete-project.test.ts b/src/server/tests/delete-project.test.ts
new file mode 100644
index 000000000..80c4aa252
--- /dev/null
+++ b/src/server/tests/delete-project.test.ts
@@ -0,0 +1,177 @@
+// Copyright 2026 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import { Request, Response } from 'express';
+
+import { createDeleteProjectHandler, DeleteProjectHandlerDeps } from '../route-handlers';
+
+interface MockProjectRecord {
+  getId(): string;
+  getOwnerId(): string;
+  getIsPublic(): boolean;
+  getFileId(): string | undefined;
+}
+
+function mockProject(id: string, ownerId?: string): MockProjectRecord {
+  const owner = ownerId ?? (id.split('/')[0] as string);
+  return {
+    getId: () => id,
+    getOwnerId: () => owner,
+    getIsPublic: () => false,
+    getFileId: () => 'file-abc',
+  };
+}
+
+interface MockDeps {
+  deps: DeleteProjectHandlerDeps;
+  projectFindOne: jest.Mock;
+  projectDeleteCalls: string[];
+  previewDeleteCalls: string[];
+}
+
+function mockDeps(opts: { project?: MockProjectRecord; previewDeleteRejects?: boolean } = {}): MockDeps {
+  const projectDeleteCalls: string[] = [];
+  const previewDeleteCalls: string[] = [];
+  const projectFindOne = jest.fn().mockResolvedValue(opts.project);
+  return {
+    projectFindOne,
+    projectDeleteCalls,
+    previewDeleteCalls,
+    deps: {
+      db: {
+        project: {
+          findOne: projectFindOne,
+          deleteOne: jest.fn(async (id: string) => {
+            projectDeleteCalls.push(id);
+          }),
+        },
+        preview: {
+          deleteOne: jest.fn(async (id: string) => {
+            previewDeleteCalls.push(id);
+            if (opts.previewDeleteRejects) {
+              throw new Error('preview delete failed');
+            }
+          }),
+        },
+      },
+    },
+  };
+}
+
+interface MockResponse {
+  res: Response;
+  statusCode: () => number | undefined;
+  jsonBody: () => unknown;
+}
+
+function mockResponse(): MockResponse {
+  let code: number | undefined;
+  let body: unknown;
+  const res = {
+    status: jest.fn((c: number) => {
+      code = c;
+      return res;
+    }),
+    json: jest.fn((b: unknown) => {
+      body = b;
+      return res;
+    }),
+  } as unknown as Response;
+  return { res, statusCode: () => code, jsonBody: () => body };
+}
+
+function mockRequest(opts: { username?: string; projectName?: string; userId?: string } = {}): Request {
+  const username = opts.username ?? 'alice';
+  const projectName = opts.projectName ?? 'climate';
+  const authed = opts.userId !== undefined;
+  return {
+    params: { username, projectName },
+    // passport stores { id } in the session; the deserialized User (with
+    // getId()) lives on req.user. getAuthenticatedUser() requires both.
+    session: authed ? { passport: { user: { id: opts.userId } } } : undefined,
+    user: authed ? { getId: () => opts.userId } : undefined,
+  } as unknown as Request;
+}
+
+describe('createDeleteProjectHandler', () => {
+  it('deletes the project and preview docs and returns 200 for the owner', async () => {
+    const { deps, projectDeleteCalls, previewDeleteCalls } = mockDeps({ project: mockProject('alice/climate') });
+    const handler = createDeleteProjectHandler(deps);
+    const { res, statusCode, jsonBody } = mockResponse();
+
+    await handler(mockRequest({ username: 'alice', projectName: 'climate', userId: 'alice' }), res);
+
+    expect(projectDeleteCalls).toEqual(['alice/climate']);
+    expect(previewDeleteCalls).toEqual(['alice/climate']);
+    expect(statusCode()).toBe(200);
+    expect(jsonBody()).toEqual({});
+  });
+
+  it('still returns 200 when preview deletion fails', async () => {
+    // (route-handlers logs a winston warning here on purpose; winston's
+    // module-level methods are non-configurable so we can't silence it.)
+    const { deps, projectDeleteCalls } = mockDeps({
+      project: mockProject('alice/climate'),
+      previewDeleteRejects: true,
+    });
+    const handler = createDeleteProjectHandler(deps);
+    const { res, statusCode } = mockResponse();
+
+    await handler(mockRequest({ userId: 'alice' }), res);
+
+    expect(projectDeleteCalls).toEqual(['alice/climate']);
+    expect(statusCode()).toBe(200);
+  });
+
+  it('returns 404 when the project does not exist', async () => {
+    const { deps, projectDeleteCalls, previewDeleteCalls } = mockDeps({ project: undefined });
+    const handler = createDeleteProjectHandler(deps);
+    const { res, statusCode } = mockResponse();
+
+    await handler(mockRequest({ userId: 'alice' }), res);
+
+    expect(statusCode()).toBe(404);
+    expect(projectDeleteCalls).toEqual([]);
+    expect(previewDeleteCalls).toEqual([]);
+  });
+
+  it('returns 401 when the request is unauthenticated', async () => {
+    const { deps, projectFindOne, projectDeleteCalls } = mockDeps({ project: mockProject('alice/climate') });
+    const handler = createDeleteProjectHandler(deps);
+    const { res, statusCode } = mockResponse();
+
+    await handler(mockRequest({}), res);
+
+    expect(statusCode()).toBe(401);
+    expect(projectFindOne).not.toHaveBeenCalled();
+    expect(projectDeleteCalls).toEqual([]);
+  });
+
+  it('returns 401 without consulting the database when the auth user is not the URL owner', async () => {
+    // No project-existence leak: a logged-in user must not learn whether
+    // someone else's private project exists by observing 404 vs 401.
+    const { deps, projectFindOne, projectDeleteCalls } = mockDeps({ project: mockProject('alice/climate') });
+    const handler = createDeleteProjectHandler(deps);
+    const { res, statusCode } = mockResponse();
+
+    await handler(mockRequest({ username: 'alice', projectName: 'climate', userId: 'bob' }), res);
+
+    expect(statusCode()).toBe(401);
+    expect(projectFindOne).not.toHaveBeenCalled();
+    expect(projectDeleteCalls).toEqual([]);
+  });
+
+  it('returns 401 when the stored project owner differs from the authenticated user', async () => {
+    // The URL username matches the auth user, but the project record's
+    // ownerId says someone else owns it (legacy/inconsistent doc key).
+    const { deps, projectDeleteCalls } = mockDeps({ project: mockProject('alice/climate', 'realowner') });
+    const handler = createDeleteProjectHandler(deps);
+    const { res, statusCode } = mockResponse();
+
+    await handler(mockRequest({ username: 'alice', projectName: 'climate', userId: 'alice' }), res);
+
+    expect(statusCode()).toBe(401);
+    expect(projectDeleteCalls).toEqual([]);
+  });
+});