From 548550dd1dc783ab223e882939a1fb4da7af3705 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Mon, 11 Dec 2023 15:28:21 -0800
Subject: [PATCH 01/16] Copy Paste Data

---
 .../loads/handlers/preview-load-files.ts      |  1 +
 apps/zui/src/domain/loads/messages.ts         |  2 ++
 apps/zui/src/domain/loads/operations/index.ts |  1 +
 apps/zui/src/domain/loads/operations/paste.ts | 14 ++++++++++++++
 .../src/electron/windows/search/app-menu.ts   | 19 ++++++++++++++++++-
 5 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 apps/zui/src/domain/loads/operations/paste.ts

diff --git a/apps/zui/src/domain/loads/handlers/preview-load-files.ts b/apps/zui/src/domain/loads/handlers/preview-load-files.ts
index 00aed02002..176d46f246 100644
--- a/apps/zui/src/domain/loads/handlers/preview-load-files.ts
+++ b/apps/zui/src/domain/loads/handlers/preview-load-files.ts
@@ -5,6 +5,7 @@ import Pools from "src/js/state/Pools"
 import {quickLoadFiles} from "./quick-load-files"
 
 export const previewLoadFiles = createHandler(
+  "loads.previewLoadFiles",
   async (
     {dispatch, invoke, select},
     opts: {files: string[]; poolId?: string}
diff --git a/apps/zui/src/domain/loads/messages.ts b/apps/zui/src/domain/loads/messages.ts
index 7de843963f..4c53d42897 100644
--- a/apps/zui/src/domain/loads/messages.ts
+++ b/apps/zui/src/domain/loads/messages.ts
@@ -21,8 +21,10 @@ export type LoadsOperations = {
   "loads.getFileTypes": typeof ops.getFileTypes
   "loads.abortPreview": typeof ops.abortPreview
   "loads.abort": typeof ops.abort
+  "loads.paste": typeof ops.paste
 }
 
 export type LoadsHandlers = {
   "loads.chooseFiles": typeof handlers.chooseFiles
+  "loads.previewLoadFiles": typeof handlers.previewLoadFiles
 }
diff --git a/apps/zui/src/domain/loads/operations/index.ts b/apps/zui/src/domain/loads/operations/index.ts
index 508f809550..2aa73dcc1f 100644
--- a/apps/zui/src/domain/loads/operations/index.ts
+++ b/apps/zui/src/domain/loads/operations/index.ts
@@ -2,3 +2,4 @@ export * from "./get-file-types"
 export * from "./preview"
 export * from "./create"
 export * from "./abort"
+export * from "./paste"
diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
new file mode 100644
index 0000000000..32139a29fd
--- /dev/null
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -0,0 +1,14 @@
+import {clipboard} from "electron"
+import {createOperation} from "src/core/operations"
+import path from "path"
+import os from "os"
+import {writeFileSync} from "fs-extra"
+import {sendToFocusedWindow} from "src/core/ipc"
+
+export const paste = createOperation("loads.paste", () => {
+  const data = clipboard.readText()
+  const file = path.join(os.tmpdir(), "clipboard.txt")
+  writeFileSync(file, data)
+  sendToFocusedWindow("loads.previewLoadFiles", {files: [file]})
+  return path
+})
diff --git a/apps/zui/src/electron/windows/search/app-menu.ts b/apps/zui/src/electron/windows/search/app-menu.ts
index d03b793384..f499fafd6f 100644
--- a/apps/zui/src/electron/windows/search/app-menu.ts
+++ b/apps/zui/src/electron/windows/search/app-menu.ts
@@ -13,6 +13,7 @@ import {showReleaseNotesOp} from "../../ops/show-release-notes-op"
 import {SearchWindow} from "./search-window"
 import {sendToFocusedWindow} from "src/core/ipc"
 import {open as openUpdateWindow} from "src/domain/updates/operations"
+import {paste} from "src/domain/loads/operations"
 
 export const defaultAppMenuState = () => ({
   showRightPane: true,
@@ -85,6 +86,12 @@ export function compileTemplate(
     accelerator: "CmdOrCtrl+O",
   }
 
+  const pasteData: MenuItemConstructorOptions = {
+    label: "Paste Data...",
+    click: paste,
+    accelerator: "CmdOrCtrl+Shift+V",
+  }
+
   const appNameMenu: MenuItemConstructorOptions = {
     label: app.getName(),
     submenu: [
@@ -104,12 +111,22 @@ export function compileTemplate(
 
   function fileSubmenu(): MenuItemConstructorOptions[] {
     if (mac) {
-      return [newWindow, __, openFile, exportResults, __, closeTab, closeWindow]
+      return [
+        newWindow,
+        __,
+        openFile,
+        pasteData,
+        exportResults,
+        __,
+        closeTab,
+        closeWindow,
+      ]
     } else {
       return [
         newWindow,
         __,
         openFile,
+        pasteData,
         exportResults,
         __,
         settings,

From e82a489a86c944656ca665ebc75ea1fd3e02d18c Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Thu, 14 Dec 2023 10:50:20 -0800
Subject: [PATCH 02/16] Add Integration Test

---
 apps/zui/src/domain/loads/operations/paste.ts |  2 +-
 packages/zui-player/helpers/test-app.ts       | 27 +++++++++++++++++--
 packages/zui-player/tests/copy-paste.spec.ts  | 12 +++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 packages/zui-player/tests/copy-paste.spec.ts

diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
index 32139a29fd..61ad934244 100644
--- a/apps/zui/src/domain/loads/operations/paste.ts
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -10,5 +10,5 @@ export const paste = createOperation("loads.paste", () => {
   const file = path.join(os.tmpdir(), "clipboard.txt")
   writeFileSync(file, data)
   sendToFocusedWindow("loads.previewLoadFiles", {files: [file]})
-  return path
+  return file
 })
diff --git a/packages/zui-player/helpers/test-app.ts b/packages/zui-player/helpers/test-app.ts
index e66e848c1d..7aa030ee5f 100644
--- a/packages/zui-player/helpers/test-app.ts
+++ b/packages/zui-player/helpers/test-app.ts
@@ -146,8 +146,8 @@ export default class TestApp {
     return wins[winTitles.findIndex((wTitle) => wTitle === title)];
   }
 
-  sleep(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+  sleep(s: number) {
+    return new Promise((resolve) => setTimeout(resolve, s * 1000));
   }
 
   get results() {
@@ -189,6 +189,29 @@ export default class TestApp {
       return this.mainWin.getByRole(role, { name });
     }
   }
+
+  async invoke(name: string, ...args: any[]) {
+    return await this.page.evaluate(
+      ({ name, args }) => {
+        // @ts-ignore
+        window.zui.invoke(name, ...args);
+      },
+      { name, args }
+    );
+  }
+
+  get evalMain() {
+    return this.zui.evaluate.bind(this.zui);
+  }
+
+  get evalPage() {
+    return this.page.evaluate.bind(this.page);
+  }
+
+  debugLogs() {
+    this.zui.process().stdout.on('data', console.log);
+    this.zui.process().stderr.on('data', console.log);
+  }
 }
 
 const getAppInfo = () => {
diff --git a/packages/zui-player/tests/copy-paste.spec.ts b/packages/zui-player/tests/copy-paste.spec.ts
new file mode 100644
index 0000000000..0005d2c3d2
--- /dev/null
+++ b/packages/zui-player/tests/copy-paste.spec.ts
@@ -0,0 +1,12 @@
+import { play } from 'zui-player';
+
+play('Copy Paste Data', (app, test) => {
+  test('copy data from the clipboard', async () => {
+    await app.evalMain(({ clipboard }) => clipboard.writeText('{a: 1}'));
+    await app.invoke('loads.paste');
+    await app.click('button', 'Load');
+    await app.click('button', 'Query Pool');
+    const results = await app.getViewerResults();
+    test.expect(results).toEqual(['a', '1']);
+  });
+});

From 2e116990e8532f53d8648c1590db3eb0ec24e1d1 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Thu, 14 Dec 2023 16:48:57 -0800
Subject: [PATCH 03/16] Clean Up Pasted Files

---
 apps/zui/src/components/dialog/dialog.tsx     |  9 +++-
 apps/zui/src/domain/app/plugin-api.ts         |  7 +++
 .../loads/handlers/preview-load-files.ts      | 11 +++--
 apps/zui/src/domain/loads/load-context.ts     | 17 +++-----
 apps/zui/src/domain/loads/load-model.ts       |  4 +-
 apps/zui/src/domain/loads/load-ref.ts         | 18 ++++++++
 apps/zui/src/domain/loads/messages.ts         |  1 +
 .../zui/src/domain/loads/operations/cancel.ts | 10 +++++
 apps/zui/src/domain/loads/operations/index.ts |  1 +
 apps/zui/src/domain/loads/operations/paste.ts | 22 ++++++++--
 apps/zui/src/domain/loads/plugin-api.ts       | 10 ++++-
 apps/zui/src/domain/loads/temp-file-holder.ts | 43 +++++++++++++++++++
 apps/zui/src/domain/plugin-api.ts             |  2 +
 apps/zui/src/domain/pools/plugin-api.ts       | 22 ++--------
 apps/zui/src/domain/pools/utils.ts            | 11 +----
 apps/zui/src/util/basename.ts                 |  3 ++
 apps/zui/src/util/get-uniq-name.ts            |  9 ++++
 apps/zui/src/util/typed-emitter.ts            | 22 ++++++++++
 apps/zui/src/views/load-pane/form.tsx         | 12 ++++--
 apps/zui/src/views/load-pane/index.tsx        | 20 +++++----
 apps/zui/src/views/load-pane/sidebar.tsx      |  8 +++-
 packages/zui-player/helpers/test-app.ts       |  8 ++--
 packages/zui-player/tests/copy-paste.spec.ts  |  2 +
 23 files changed, 206 insertions(+), 66 deletions(-)
 create mode 100644 apps/zui/src/domain/app/plugin-api.ts
 create mode 100644 apps/zui/src/domain/loads/load-ref.ts
 create mode 100644 apps/zui/src/domain/loads/operations/cancel.ts
 create mode 100644 apps/zui/src/domain/loads/temp-file-holder.ts
 create mode 100644 apps/zui/src/util/basename.ts
 create mode 100644 apps/zui/src/util/get-uniq-name.ts
 create mode 100644 apps/zui/src/util/typed-emitter.ts

diff --git a/apps/zui/src/components/dialog/dialog.tsx b/apps/zui/src/components/dialog/dialog.tsx
index be8224bf02..5500638ba8 100644
--- a/apps/zui/src/components/dialog/dialog.tsx
+++ b/apps/zui/src/components/dialog/dialog.tsx
@@ -8,6 +8,7 @@ import {omit} from "lodash"
 export type DialogProps = {
   isOpen: boolean
   onClose: () => void
+  onCancel: () => void
   modal?: boolean
   onOutsideClick?: (e: globalThis.MouseEvent) => void
   onClick?: MouseEventHandler<HTMLDialogElement>
@@ -44,11 +45,17 @@ export function Dialog(props: DialogProps) {
     props.onClose()
   }
 
+  function onCancel(e) {
+    e.preventDefault()
+    props.onCancel()
+    props.onClose()
+  }
+
   return (
     <dialog
       // @ts-ignore
       onClose={onClose}
-      onCancel={onClose}
+      onCancel={onCancel}
       ref={setNode}
       style={style}
       {...omit(props, ...nonHTMLProps)}
diff --git a/apps/zui/src/domain/app/plugin-api.ts b/apps/zui/src/domain/app/plugin-api.ts
new file mode 100644
index 0000000000..7c557f0974
--- /dev/null
+++ b/apps/zui/src/domain/app/plugin-api.ts
@@ -0,0 +1,7 @@
+import {TypedEmitter} from "src/util/typed-emitter"
+
+type Events = {
+  quit: () => void
+}
+
+export class AppApi extends TypedEmitter<Events> {}
diff --git a/apps/zui/src/domain/loads/handlers/preview-load-files.ts b/apps/zui/src/domain/loads/handlers/preview-load-files.ts
index 176d46f246..0824b18a8b 100644
--- a/apps/zui/src/domain/loads/handlers/preview-load-files.ts
+++ b/apps/zui/src/domain/loads/handlers/preview-load-files.ts
@@ -18,9 +18,14 @@ export const previewLoadFiles = createHandler(
     if (files.length === 1 && files[0].type === "pcap") {
       quickLoadFiles({files: files.map((f) => f.path), poolId})
     } else {
-      dispatch(LoadDataForm.setPoolId(poolId))
-      dispatch(LoadDataForm.setFiles(opts.files))
-      dispatch(LoadDataForm.setShow(true))
+      if (select(LoadDataForm.getShow)) {
+        // The preview load is already opened
+        dispatch(LoadDataForm.addFiles(opts.files))
+      } else {
+        dispatch(LoadDataForm.setFiles(opts.files))
+        dispatch(LoadDataForm.setShow(true))
+        dispatch(LoadDataForm.setPoolId(poolId))
+      }
     }
   }
 )
diff --git a/apps/zui/src/domain/loads/load-context.ts b/apps/zui/src/domain/loads/load-context.ts
index f9dea2cb9d..77a24e7c09 100644
--- a/apps/zui/src/domain/loads/load-context.ts
+++ b/apps/zui/src/domain/loads/load-context.ts
@@ -4,6 +4,8 @@ import Loads from "src/js/state/Loads"
 import {syncPoolOp} from "src/electron/ops/sync-pool-op"
 import {SearchWindow} from "src/electron/windows/search/search-window"
 import {MainObject} from "../../core/main/main-object"
+import {createLoadRef} from "./load-ref"
+import {select} from "src/core/main/select"
 
 export class LoadContext {
   private ctl = new AbortController()
@@ -23,16 +25,7 @@ export class LoadContext {
     this.window.loadsInProgress++
     this.main.abortables.add({id: this.id, abort: () => this.ctl.abort()})
     this.main.dispatch(
-      Loads.create({
-        id: this.id,
-        poolId: this.opts.poolId,
-        progress: 0,
-        files: this.opts.files,
-        startedAt: new Date().toISOString(),
-        finishedAt: null,
-        abortedAt: null,
-        errors: [],
-      })
+      Loads.create(createLoadRef(this.id, this.opts.poolId, this.opts.files))
     )
   }
 
@@ -66,6 +59,10 @@ export class LoadContext {
     this.ctl.abort()
   }
 
+  get ref() {
+    return select((s) => Loads.find(s, this.id))
+  }
+
   get signal() {
     return this.ctl.signal
   }
diff --git a/apps/zui/src/domain/loads/load-model.ts b/apps/zui/src/domain/loads/load-model.ts
index 9f028eda4f..5e5c67f372 100644
--- a/apps/zui/src/domain/loads/load-model.ts
+++ b/apps/zui/src/domain/loads/load-model.ts
@@ -1,4 +1,5 @@
 import {LoadReference} from "src/js/state/Loads/types"
+import {basename} from "src/util/basename"
 
 export class LoadModel {
   constructor(private ref: LoadReference) {}
@@ -8,8 +9,7 @@ export class LoadModel {
   }
 
   get humanizeFiles() {
-    // basename
-    return this.ref.files.join(", ")
+    return this.ref.files.map(basename).join(", ")
   }
 
   get status() {
diff --git a/apps/zui/src/domain/loads/load-ref.ts b/apps/zui/src/domain/loads/load-ref.ts
new file mode 100644
index 0000000000..d0d27796c8
--- /dev/null
+++ b/apps/zui/src/domain/loads/load-ref.ts
@@ -0,0 +1,18 @@
+import {LoadReference} from "src/js/state/Loads/types"
+
+export function createLoadRef(
+  id: string,
+  poolId: string,
+  files: string[]
+): LoadReference {
+  return {
+    id,
+    poolId,
+    progress: 0,
+    files,
+    startedAt: new Date().toISOString(),
+    finishedAt: null,
+    abortedAt: null,
+    errors: [],
+  }
+}
diff --git a/apps/zui/src/domain/loads/messages.ts b/apps/zui/src/domain/loads/messages.ts
index 4c53d42897..3a705c1ce2 100644
--- a/apps/zui/src/domain/loads/messages.ts
+++ b/apps/zui/src/domain/loads/messages.ts
@@ -22,6 +22,7 @@ export type LoadsOperations = {
   "loads.abortPreview": typeof ops.abortPreview
   "loads.abort": typeof ops.abort
   "loads.paste": typeof ops.paste
+  "loads.cancel": typeof ops.cancel
 }
 
 export type LoadsHandlers = {
diff --git a/apps/zui/src/domain/loads/operations/cancel.ts b/apps/zui/src/domain/loads/operations/cancel.ts
new file mode 100644
index 0000000000..a010e46922
--- /dev/null
+++ b/apps/zui/src/domain/loads/operations/cancel.ts
@@ -0,0 +1,10 @@
+import {loads} from "src/zui"
+import {createLoadRef} from "../load-ref"
+import {createOperation} from "src/core/operations"
+
+export const cancel = createOperation(
+  "loads.cancel",
+  (ctx, poolId: string, files: string[]) => {
+    loads.emit("abort", createLoadRef("new", poolId, files))
+  }
+)
diff --git a/apps/zui/src/domain/loads/operations/index.ts b/apps/zui/src/domain/loads/operations/index.ts
index 2aa73dcc1f..87f1038cc0 100644
--- a/apps/zui/src/domain/loads/operations/index.ts
+++ b/apps/zui/src/domain/loads/operations/index.ts
@@ -3,3 +3,4 @@ export * from "./preview"
 export * from "./create"
 export * from "./abort"
 export * from "./paste"
+export * from "./cancel"
diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
index 61ad934244..c887a60766 100644
--- a/apps/zui/src/domain/loads/operations/paste.ts
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -1,14 +1,28 @@
 import {clipboard} from "electron"
 import {createOperation} from "src/core/operations"
-import path from "path"
 import os from "os"
-import {writeFileSync} from "fs-extra"
+import * as zui from "src/zui"
 import {sendToFocusedWindow} from "src/core/ipc"
+import {TempFileHolder} from "../temp-file-holder"
+
+const namespace = os.userInfo().username + "_pastes"
+const pastes = new TempFileHolder(namespace)
 
 export const paste = createOperation("loads.paste", () => {
   const data = clipboard.readText()
-  const file = path.join(os.tmpdir(), "clipboard.txt")
-  writeFileSync(file, data)
+  const file = pastes.createFile("paste", data)
   sendToFocusedWindow("loads.previewLoadFiles", {files: [file]})
   return file
 })
+
+function removeFiles(loadFiles: string[]) {
+  for (let file of loadFiles) {
+    if (pastes.has(file)) pastes.removeFile(file)
+  }
+}
+
+zui.loads.on("error", (load) => removeFiles(load.files))
+zui.loads.on("abort", (load) => removeFiles(load.files))
+zui.loads.on("success", (load) => removeFiles(load.files))
+
+// TODO zui.app.on("quit", () => pastes.destroy())
diff --git a/apps/zui/src/domain/loads/plugin-api.ts b/apps/zui/src/domain/loads/plugin-api.ts
index 2ff44ddb2b..7f561e04f4 100644
--- a/apps/zui/src/domain/loads/plugin-api.ts
+++ b/apps/zui/src/domain/loads/plugin-api.ts
@@ -3,8 +3,16 @@ import {LoadContext} from "./load-context"
 import {Loader} from "src/core/loader/types"
 import Loads from "src/js/state/Loads"
 import {select} from "src/core/main/select"
+import {TypedEmitter} from "src/util/typed-emitter"
+import {LoadReference} from "src/js/state/Loads/types"
 
-export class LoadsApi {
+type Events = {
+  success: (load: LoadReference) => void
+  abort: (load: LoadReference) => void
+  error: (load: LoadReference) => void
+}
+
+export class LoadsApi extends TypedEmitter<Events> {
   private list: LoaderApi[] = []
 
   // Don't use this...or rename to addLoader
diff --git a/apps/zui/src/domain/loads/temp-file-holder.ts b/apps/zui/src/domain/loads/temp-file-holder.ts
new file mode 100644
index 0000000000..1c299f841e
--- /dev/null
+++ b/apps/zui/src/domain/loads/temp-file-holder.ts
@@ -0,0 +1,43 @@
+import os from "os"
+import path from "path"
+import * as fs from "fs-extra"
+import {getUniqName} from "src/util/get-uniq-name"
+
+export class TempFileHolder {
+  files: string[] = []
+  dir: string
+
+  constructor(namespace: string) {
+    this.dir = path.join(os.tmpdir(), namespace)
+    fs.ensureDirSync(this.dir)
+  }
+
+  createFile(prefix: string, data: string) {
+    const file = this.nextFile(prefix)
+    fs.writeFileSync(file, data)
+    this.files.push(file)
+    return file
+  }
+
+  removeFile(filePath: string) {
+    fs.removeSync(filePath)
+    this.files = this.files.filter((f) => f !== filePath)
+  }
+
+  has(filePath: string) {
+    return this.files.find((f) => f === filePath)
+  }
+
+  destroy() {
+    fs.removeSync(this.dir)
+  }
+
+  private nextFile(prefix: string) {
+    console.log(prefix, this.fileNames)
+    return path.join(this.dir, getUniqName(prefix, this.fileNames))
+  }
+
+  private get fileNames() {
+    return this.files.map((f) => path.basename(f))
+  }
+}
diff --git a/apps/zui/src/domain/plugin-api.ts b/apps/zui/src/domain/plugin-api.ts
index d4ec913fed..ea6d965a77 100644
--- a/apps/zui/src/domain/plugin-api.ts
+++ b/apps/zui/src/domain/plugin-api.ts
@@ -1,3 +1,4 @@
+import {AppApi} from "./app/plugin-api"
 import {ConfigurationsApi} from "./configurations/plugin-api"
 import {CorrelationsApi} from "./correlations/plugin-api"
 import {EnvApi} from "./env/plugin-api"
@@ -19,3 +20,4 @@ export const session = new SessionApi()
 export const correlations = new CorrelationsApi()
 export const configurations = new ConfigurationsApi()
 export const pools = new PoolsApi()
+export const app = new AppApi()
diff --git a/apps/zui/src/domain/pools/plugin-api.ts b/apps/zui/src/domain/pools/plugin-api.ts
index 2b54e0a7a7..f0b8241292 100644
--- a/apps/zui/src/domain/pools/plugin-api.ts
+++ b/apps/zui/src/domain/pools/plugin-api.ts
@@ -1,4 +1,3 @@
-import {EventEmitter} from "events"
 import {CreatePoolOpts, Pool} from "@brimdata/zed-js"
 import {updateSettings} from "./operations"
 import Pools from "src/js/state/Pools"
@@ -9,13 +8,13 @@ import {LoadContext} from "src/domain/loads/load-context"
 import {syncPoolOp} from "src/electron/ops/sync-pool-op"
 import {LoadOptions} from "src/core/loader/types"
 import {getMainObject} from "src/core/main"
+import {TypedEmitter} from "src/util/typed-emitter"
 
 type Events = {
   create: (event: {pool: Pool}) => void
 }
-export class PoolsApi {
-  private emitter = new EventEmitter()
 
+export class PoolsApi extends TypedEmitter<Events> {
   configure(poolId: string) {
     return new PoolConfiguration(poolId)
   }
@@ -45,28 +44,15 @@ export class PoolsApi {
       await context.setup()
       await loader.run(context)
       await waitForPoolStats(context)
+      loads.emit("success", context.ref)
     } catch (e) {
       await loader.rollback(context)
+      loads.emit("error", context.ref)
       throw e
     } finally {
       context.teardown()
     }
   }
-
-  on<K extends string & keyof Events>(name: K, handler: Events[K]) {
-    this.emitter.on(name, handler)
-  }
-
-  emit<K extends string & keyof Events>(
-    name: K,
-    ...args: Parameters<Events[K]>
-  ) {
-    this.emitter.emit(name, ...args)
-  }
-
-  _teardown() {
-    this.emitter.removeAllListeners()
-  }
 }
 
 type ConfigMap = {
diff --git a/apps/zui/src/domain/pools/utils.ts b/apps/zui/src/domain/pools/utils.ts
index 81ca550f72..8628d56b7e 100644
--- a/apps/zui/src/domain/pools/utils.ts
+++ b/apps/zui/src/domain/pools/utils.ts
@@ -1,4 +1,5 @@
 import * as path from "path"
+import {getUniqName} from "src/util/get-uniq-name"
 
 export function deriveName(files: string[], existingNames: string[]) {
   let name: string
@@ -22,13 +23,3 @@ function inSameDir(paths: string[]) {
   }
   return true
 }
-
-function join(name: string, num: number) {
-  return num === 0 ? name : [name, num.toString()].join("_")
-}
-
-function getUniqName(proposal: string, existing: string[]) {
-  let i = 0
-  while (existing.includes(join(proposal, i))) i++
-  return join(proposal, i)
-}
diff --git a/apps/zui/src/util/basename.ts b/apps/zui/src/util/basename.ts
new file mode 100644
index 0000000000..a0702b40c0
--- /dev/null
+++ b/apps/zui/src/util/basename.ts
@@ -0,0 +1,3 @@
+export function basename(fullPath: string) {
+  return fullPath.replace(/^.*[\\/]/, "")
+}
diff --git a/apps/zui/src/util/get-uniq-name.ts b/apps/zui/src/util/get-uniq-name.ts
new file mode 100644
index 0000000000..3a0a7d6053
--- /dev/null
+++ b/apps/zui/src/util/get-uniq-name.ts
@@ -0,0 +1,9 @@
+function join(name: string, num: number) {
+  return num === 0 ? name : [name, num.toString()].join("_")
+}
+
+export function getUniqName(proposal: string, existing: string[]) {
+  let i = 0
+  while (existing.includes(join(proposal, i))) i++
+  return join(proposal, i)
+}
diff --git a/apps/zui/src/util/typed-emitter.ts b/apps/zui/src/util/typed-emitter.ts
new file mode 100644
index 0000000000..845ba22121
--- /dev/null
+++ b/apps/zui/src/util/typed-emitter.ts
@@ -0,0 +1,22 @@
+import EventEmitter from "events"
+
+type EventMap = {[name: string]: (...args: any[]) => void}
+
+export class TypedEmitter<Events extends EventMap> {
+  private emitter = new EventEmitter()
+
+  on<K extends string & keyof Events>(name: K, handler: Events[K]) {
+    this.emitter.on(name, handler)
+  }
+
+  emit<K extends string & keyof Events>(
+    name: K,
+    ...args: Parameters<Events[K]>
+  ) {
+    this.emitter.emit(name, ...args)
+  }
+
+  _teardown() {
+    this.emitter.removeAllListeners()
+  }
+}
diff --git a/apps/zui/src/views/load-pane/form.tsx b/apps/zui/src/views/load-pane/form.tsx
index 6b7236c205..f999e9a1fc 100644
--- a/apps/zui/src/views/load-pane/form.tsx
+++ b/apps/zui/src/views/load-pane/form.tsx
@@ -18,7 +18,11 @@ import {LoadFormat} from "@brimdata/zed-js"
 import {ErrorWell} from "src/components/error-well"
 import {errorToString} from "src/util/error-to-string"
 
-export function Form(props: {onClose: () => any; isValid: boolean}) {
+export function Form(props: {
+  onClose: () => any
+  onCancel: () => any
+  isValid: boolean
+}) {
   const dispatch = useDispatch()
   const select = useSelect()
   const pools = useSelector(Current.getPools)
@@ -37,7 +41,6 @@ export function Form(props: {onClose: () => any; isValid: boolean}) {
   const [error, setError] = useState(null)
 
   const onSubmit = async (data) => {
-    console.log("on submit")
     const shaper = select(LoadDataForm.getShaper)
     // @ts-ignore
     const windowId = window.windowId
@@ -218,7 +221,10 @@ export function Form(props: {onClose: () => any; isValid: boolean}) {
         <div className={classNames(styles.submission)}>
           <button
             type="button"
-            onClick={props.onClose}
+            onClick={() => {
+              props.onCancel()
+              props.onClose()
+            }}
             className={forms.button}
           >
             Cancel
diff --git a/apps/zui/src/views/load-pane/index.tsx b/apps/zui/src/views/load-pane/index.tsx
index 23899bdc70..00f1f1fc9a 100644
--- a/apps/zui/src/views/load-pane/index.tsx
+++ b/apps/zui/src/views/load-pane/index.tsx
@@ -5,7 +5,6 @@ import {useSelector} from "react-redux"
 import styles from "./index.module.css"
 import * as _ from "lodash"
 import LoadDataForm from "src/js/state/LoadDataForm"
-import {useFilesDrop} from "src/util/hooks/use-files-drop"
 import {useDispatch} from "src/app/core/state"
 import {useCallback, useEffect, useRef} from "react"
 import {ResultsControl, useResultsControl} from "./results"
@@ -19,6 +18,7 @@ import {Dialog} from "src/components/dialog/dialog"
 import {ErrorWell} from "src/components/error-well"
 import {errorToString} from "src/util/error-to-string"
 import {call} from "src/util/call"
+import {invoke} from "src/core/invoke"
 
 export function LoadPane() {
   const dispatch = useDispatch()
@@ -55,14 +55,9 @@ function Main(props: {
 
 function Grid(props: {children: any}) {
   const gridStyle = useSelector(LoadDataForm.getGridStyle)
-  const dispatch = useDispatch()
-  const [_props, ref] = useFilesDrop({
-    onDrop: (files: File[]) =>
-      dispatch(LoadDataForm.addFiles(files.map((f) => f.path))),
-  })
 
   return (
-    <div className={styles.grid} ref={ref} style={gridStyle}>
+    <div className={styles.grid} style={gridStyle}>
       {props.children}
     </div>
   )
@@ -85,6 +80,13 @@ function Pane(props: {onClose: any}) {
     abortSubmit.current = abort
   }, [files, format])
 
+  const onCancel = () => {
+    const files = select(LoadDataForm.getFiles)
+    const poolId = select(LoadDataForm.getPoolId)
+    invoke("loads.cancel", poolId, files)
+    debut.exit()
+  }
+
   useEffect(() => onSubmit(), [files, format])
   useEffect(() => cancelSubmit, [files, format])
   useEffect(() => {
@@ -96,7 +98,8 @@ function Pane(props: {onClose: any}) {
     <Debut {...debut.props} classNames="modal">
       <Dialog
         aria-label="preview-load"
-        onClose={() => debut.exit()}
+        onClose={debut.exit}
+        onCancel={onCancel}
         dialogPoint="center center"
         isOpen={true}
         className={modal.modal}
@@ -106,6 +109,7 @@ function Pane(props: {onClose: any}) {
           <Main original={original} preview={preview} onSubmit={onSubmit} />
           <Sidebar
             onClose={debut.exit}
+            onCancel={onCancel}
             isValid={!original.error && !preview.error}
           />
         </Grid>
diff --git a/apps/zui/src/views/load-pane/sidebar.tsx b/apps/zui/src/views/load-pane/sidebar.tsx
index 77004f869e..48e3582b95 100644
--- a/apps/zui/src/views/load-pane/sidebar.tsx
+++ b/apps/zui/src/views/load-pane/sidebar.tsx
@@ -29,7 +29,11 @@ function useSidebarDrag() {
   return {anchorProps: {onStart, onDrag, onEnd}, ref}
 }
 
-export function Sidebar(props: {onClose: () => any; isValid: boolean}) {
+export function Sidebar(props: {
+  onClose: () => any
+  onCancel: () => any
+  isValid: boolean
+}) {
   const sidebarDrag = useSidebarDrag()
   return (
     <aside className={styles.aside} ref={sidebarDrag.ref}>
@@ -39,7 +43,7 @@ export function Sidebar(props: {onClose: () => any; isValid: boolean}) {
           <hr />
         </h2>
       </header>
-      <Form onClose={props.onClose} isValid={props.isValid} />
+      <Form {...props} />
       <DragAnchor
         position="left"
         {...sidebarDrag.anchorProps}
diff --git a/packages/zui-player/helpers/test-app.ts b/packages/zui-player/helpers/test-app.ts
index 7aa030ee5f..ab182451bc 100644
--- a/packages/zui-player/helpers/test-app.ts
+++ b/packages/zui-player/helpers/test-app.ts
@@ -146,8 +146,8 @@ export default class TestApp {
     return wins[winTitles.findIndex((wTitle) => wTitle === title)];
   }
 
-  sleep(s: number) {
-    return new Promise((resolve) => setTimeout(resolve, s * 1000));
+  sleep(sec: number) {
+    return new Promise((resolve) => setTimeout(resolve, sec * 1000));
   }
 
   get results() {
@@ -209,8 +209,8 @@ export default class TestApp {
   }
 
   debugLogs() {
-    this.zui.process().stdout.on('data', console.log);
-    this.zui.process().stderr.on('data', console.log);
+    this.zui.process().stdout.on('data', (d) => console.log(d.toString()));
+    this.zui.process().stderr.on('data', (d) => console.log(d.toString()));
   }
 }
 
diff --git a/packages/zui-player/tests/copy-paste.spec.ts b/packages/zui-player/tests/copy-paste.spec.ts
index 0005d2c3d2..5906dac4f4 100644
--- a/packages/zui-player/tests/copy-paste.spec.ts
+++ b/packages/zui-player/tests/copy-paste.spec.ts
@@ -2,11 +2,13 @@ import { play } from 'zui-player';
 
 play('Copy Paste Data', (app, test) => {
   test('copy data from the clipboard', async () => {
+    app.debugLogs();
     await app.evalMain(({ clipboard }) => clipboard.writeText('{a: 1}'));
     await app.invoke('loads.paste');
     await app.click('button', 'Load');
     await app.click('button', 'Query Pool');
     const results = await app.getViewerResults();
     test.expect(results).toEqual(['a', '1']);
+    app.sleep(10);
   });
 });

From 7a99f08d5d0565df178523681be02725aeb856e7 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Fri, 15 Dec 2023 07:53:06 -0800
Subject: [PATCH 04/16] Use File System as Source of Truth

---
 apps/zui/src/domain/loads/temp-file-holder.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/zui/src/domain/loads/temp-file-holder.ts b/apps/zui/src/domain/loads/temp-file-holder.ts
index 1c299f841e..89c591e407 100644
--- a/apps/zui/src/domain/loads/temp-file-holder.ts
+++ b/apps/zui/src/domain/loads/temp-file-holder.ts
@@ -4,7 +4,6 @@ import * as fs from "fs-extra"
 import {getUniqName} from "src/util/get-uniq-name"
 
 export class TempFileHolder {
-  files: string[] = []
   dir: string
 
   constructor(namespace: string) {
@@ -15,17 +14,17 @@ export class TempFileHolder {
   createFile(prefix: string, data: string) {
     const file = this.nextFile(prefix)
     fs.writeFileSync(file, data)
-    this.files.push(file)
     return file
   }
 
   removeFile(filePath: string) {
     fs.removeSync(filePath)
-    this.files = this.files.filter((f) => f !== filePath)
   }
 
   has(filePath: string) {
-    return this.files.find((f) => f === filePath)
+    const dir = path.dirname(filePath)
+    const name = path.basename(filePath)
+    return this.dir === dir && this.fileNames.includes(name)
   }
 
   destroy() {
@@ -33,11 +32,10 @@ export class TempFileHolder {
   }
 
   private nextFile(prefix: string) {
-    console.log(prefix, this.fileNames)
     return path.join(this.dir, getUniqName(prefix, this.fileNames))
   }
 
   private get fileNames() {
-    return this.files.map((f) => path.basename(f))
+    return fs.readdirSync(this.dir)
   }
 }

From 8d1b40f3b5075ebb66bd5d87130799c8c9618f35 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Fri, 15 Dec 2023 13:28:09 -0800
Subject: [PATCH 05/16] Refactor Dialog Component

---
 .../app-wrapper/data-dropzone-controller.tsx  |  35 +++++
 .../app-wrapper/data-dropzone.module.css      |  34 +++--
 .../app/routes/app-wrapper/data-dropzone.tsx  |  72 +++-------
 .../dialog/{dialog.tsx => index.tsx}          |  25 ++--
 .../zui/src/components/dialog/parse-margin.ts |  27 ----
 apps/zui/src/components/dialog/parse-point.ts |  14 --
 apps/zui/src/components/dialog/use-opener.ts  |   2 +-
 .../components/dialog/use-outside-click.ts    |   2 +-
 .../zui/src/components/dialog/use-position.ts | 135 ------------------
 apps/zui/src/components/modal.tsx             |   2 +-
 apps/zui/src/js/components/Modals.tsx         |   2 +-
 .../fixed-positioner.test.ts}                 |   2 +-
 apps/zui/src/util/fixed-positioner.ts         | 119 +++++++++++++++
 apps/zui/src/util/hooks/use-fixed-position.ts |  24 ++++
 .../views/histogram-pane/settings-button.tsx  |   2 +-
 apps/zui/src/views/load-pane/index.tsx        |   2 +-
 .../zui/src/views/preferences-modal/index.tsx |   2 +-
 17 files changed, 239 insertions(+), 262 deletions(-)
 create mode 100644 apps/zui/src/app/routes/app-wrapper/data-dropzone-controller.tsx
 rename apps/zui/src/components/dialog/{dialog.tsx => index.tsx} (69%)
 delete mode 100644 apps/zui/src/components/dialog/parse-margin.ts
 delete mode 100644 apps/zui/src/components/dialog/parse-point.ts
 delete mode 100644 apps/zui/src/components/dialog/use-position.ts
 rename apps/zui/src/{components/dialog/parse-point.test.ts => util/fixed-positioner.test.ts} (92%)
 create mode 100644 apps/zui/src/util/fixed-positioner.ts
 create mode 100644 apps/zui/src/util/hooks/use-fixed-position.ts

diff --git a/apps/zui/src/app/routes/app-wrapper/data-dropzone-controller.tsx b/apps/zui/src/app/routes/app-wrapper/data-dropzone-controller.tsx
new file mode 100644
index 0000000000..6a23481602
--- /dev/null
+++ b/apps/zui/src/app/routes/app-wrapper/data-dropzone-controller.tsx
@@ -0,0 +1,35 @@
+import {previewLoadFiles, quickLoadFiles} from "src/domain/loads/handlers"
+
+export class DataDropzoneController {
+  constructor(
+    private shift: boolean,
+    private previewing: boolean,
+    private poolId: string
+  ) {}
+
+  // prettier-ignore
+  get title() {
+    if (this.previewing) return (<>Add <em>Files</em></>)
+    if (this.shift) return (<>Quick Load <em>Data</em></>)
+    return <>Preview & Load <em>Data</em></>
+  }
+
+  // prettier-ignore
+  get note() {
+    if (this.previewing) return null
+    if (this.shift) return <>Release <b>{"Shift"}</b> to preview data first.</>
+    return <>Hold <b>{"Shift"}</b> to quick load into new pool with defaults.</>
+  }
+
+  onDrop(fileObjects: File[]) {
+    const files = fileObjects.map((f) => f.path)
+    const poolId = this.poolId
+    if (this.previewing) {
+      previewLoadFiles({files, poolId})
+    } else if (this.shift) {
+      quickLoadFiles({files})
+    } else {
+      previewLoadFiles({files, poolId})
+    }
+  }
+}
diff --git a/apps/zui/src/app/routes/app-wrapper/data-dropzone.module.css b/apps/zui/src/app/routes/app-wrapper/data-dropzone.module.css
index 1ba1055e1b..5d37752bac 100644
--- a/apps/zui/src/app/routes/app-wrapper/data-dropzone.module.css
+++ b/apps/zui/src/app/routes/app-wrapper/data-dropzone.module.css
@@ -1,17 +1,19 @@
 .dropzone {
-    position: relative;    
+    position: relative;
 }
 
 .overlay {
-    width: 100%;
-    height: 100%;
-    z-index: 3;
+    width: 100vw;
+    height: 100vh;
+    max-width: none;
+    max-height: none;
+    border: none;
     background: var(--orange);
-    position: absolute;
+    position: fixed;
     top: 0;
-    left:0;
-    right:0;
-    bottom:0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,8 +26,8 @@
     flex-direction: column;
     gap: 1em;
     animation:
-                700ms popup cubic-bezier(0.16, 1, 0.3, 1) forwards,
-                300ms fade-opacity ease-in forwards;
+        700ms popup cubic-bezier(0.16, 1, 0.3, 1) forwards,
+        300ms fade-opacity ease-in forwards;
 }
 
 .title {
@@ -33,7 +35,7 @@
     font-weight: 900;
     text-align: center;
     color: white;
-    
+
     margin: 0;
 }
 
@@ -58,11 +60,12 @@
     border-radius: 3px;
     margin: 0 0.2em;
     border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
     text-transform: uppercase;
     font-size: 0.85em;
     font-weight: 500;
-    letter-spacing: 1px;;
+    letter-spacing: 1px;
+    ;
 
 }
 
@@ -72,7 +75,6 @@
     height: 3rem;
     margin: 0;
     animation: 700ms margin-in cubic-bezier(0.16, 1, 0.3, 1) forwards
-    
 }
 
 .hair div:first-child {
@@ -119,6 +121,7 @@
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
@@ -137,7 +140,8 @@
 @keyframes margin-in {
     from {
         margin: 0;
-    } 
+    }
+
     to {
         margin: 10vmin;
     }
diff --git a/apps/zui/src/app/routes/app-wrapper/data-dropzone.tsx b/apps/zui/src/app/routes/app-wrapper/data-dropzone.tsx
index d16f875440..3a773f3dc9 100644
--- a/apps/zui/src/app/routes/app-wrapper/data-dropzone.tsx
+++ b/apps/zui/src/app/routes/app-wrapper/data-dropzone.tsx
@@ -1,27 +1,22 @@
 import styles from "./data-dropzone.module.css"
 import {useFilesDrop} from "src/util/hooks/use-files-drop"
 import usePoolId from "src/app/router/hooks/use-pool-id"
-import {previewLoadFiles, quickLoadFiles} from "src/domain/loads/handlers"
 import useListener from "src/js/components/hooks/useListener"
 import {useEffect, useState} from "react"
+import {Dialog} from "src/components/dialog"
+import LoadDataForm from "src/js/state/LoadDataForm"
+import {useSelector} from "react-redux"
+import {DataDropzoneController} from "./data-dropzone-controller"
 
 export function DataDropzone({children}) {
   const poolId = usePoolId()
   const [shiftKey, setShiftKey] = useState(false)
-  const onDrop = async (webFiles: File[]) => {
-    const files = webFiles.map((f) => f.path)
-    if (shiftKey) {
-      quickLoadFiles({files})
-    } else {
-      previewLoadFiles({files, poolId})
-    }
-  }
-
-  let [props, ref] = useFilesDrop({onDrop})
+  const previewing = useSelector(LoadDataForm.getShow)
+  const dropzone = new DataDropzoneController(shiftKey, previewing, poolId)
+  let [props, ref] = useFilesDrop({onDrop: (files) => dropzone.onDrop(files)})
 
   useListener(document.body, "dragover", (e: KeyboardEvent) => {
-    if (!props.isOver) return
-    setShiftKey(e.shiftKey)
+    if (props.isOver) setShiftKey(e.shiftKey)
   })
 
   useEffect(() => {
@@ -32,49 +27,18 @@ export function DataDropzone({children}) {
     <div className={styles.dropzone} ref={ref}>
       {children}
       {props.isOver && (
-        <div className={styles.overlay}>
-          <div className={styles.hair}>
-            <div />
-            <div />
-          </div>
-          <div className={styles.hair}>
-            <div />
-            <div />
-          </div>
-          <div className={styles.hair}>
-            <div />
-            <div />
-          </div>
-          <div className={styles.hair}>
-            <div />
-            <div />
-          </div>
+        <Dialog modal isOpen className={styles.overlay}>
+          {[1, 2, 3, 4].map((i) => (
+            <div className={styles.hair} key={i}>
+              <div />
+              <div />
+            </div>
+          ))}
           <div className={styles.message}>
-            <h1 className={styles.title}>
-              {shiftKey ? (
-                <>
-                  Quick Load <em>Data</em>
-                </>
-              ) : (
-                <>
-                  Preview & Load <em>Data</em>
-                </>
-              )}
-            </h1>
-            <p className={styles.note}>
-              {shiftKey ? (
-                <>
-                  Release <b>{"Shift"}</b> to preview data first.
-                </>
-              ) : (
-                <>
-                  Hold <b>{"Shift"}</b> to quick load into new pool with
-                  defaults.
-                </>
-              )}
-            </p>
+            <h1 className={styles.title}>{dropzone.title}</h1>
+            <p className={styles.note}>{dropzone.note}</p>
           </div>
-        </div>
+        </Dialog>
       )}
     </div>
   )
diff --git a/apps/zui/src/components/dialog/dialog.tsx b/apps/zui/src/components/dialog/index.tsx
similarity index 69%
rename from apps/zui/src/components/dialog/dialog.tsx
rename to apps/zui/src/components/dialog/index.tsx
index 5500638ba8..bd7678245e 100644
--- a/apps/zui/src/components/dialog/dialog.tsx
+++ b/apps/zui/src/components/dialog/index.tsx
@@ -1,14 +1,15 @@
 import {HTMLAttributes, MouseEventHandler} from "react"
-import {usePosition} from "./use-position"
 import {useOpener} from "./use-opener"
 import {useOutsideClick} from "./use-outside-click"
 import useCallbackRef from "src/js/components/hooks/useCallbackRef"
 import {omit} from "lodash"
+import {call} from "src/util/call"
+import {useFixedPosition} from "src/util/hooks/use-fixed-position"
 
 export type DialogProps = {
   isOpen: boolean
-  onClose: () => void
-  onCancel: () => void
+  onClose?: () => void
+  onCancel?: () => void
   modal?: boolean
   onOutsideClick?: (e: globalThis.MouseEvent) => void
   onClick?: MouseEventHandler<HTMLDialogElement>
@@ -35,20 +36,26 @@ const nonHTMLProps: (keyof DialogProps)[] = [
 
 export function Dialog(props: DialogProps) {
   const [node, setNode] = useCallbackRef<HTMLDialogElement>()
-  const style = usePosition(node, props)
-
-  useOpener(node, props)
+  useOpener(node, props) // Make sure we open it before positioning it
   useOutsideClick(node, props)
+  const style = useFixedPosition({
+    anchor: props.anchor,
+    anchorPoint: props.anchorPoint,
+    target: node && props.isOpen ? node : null,
+    targetPoint: props.dialogPoint,
+    targetMargin: props.dialogMargin,
+    keepOnScreen: props.keepOnScreen,
+  })
 
   function onClose(e) {
     e.preventDefault()
-    props.onClose()
+    call(props.onClose)
   }
 
   function onCancel(e) {
     e.preventDefault()
-    props.onCancel()
-    props.onClose()
+    call(props.onCancel)
+    call(props.onClose)
   }
 
   return (
diff --git a/apps/zui/src/components/dialog/parse-margin.ts b/apps/zui/src/components/dialog/parse-margin.ts
deleted file mode 100644
index 5c21a5847f..0000000000
--- a/apps/zui/src/components/dialog/parse-margin.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export function parseMargin(s: string) {
-  const parts = s
-    .split(/\s+/)
-    .map((s) => s.trim())
-    .map(toPixels)
-  if (parts.length === 0) throw new Error("Invalid margin")
-  if (parts.length === 1) {
-    return {left: parts[0], right: parts[0], top: parts[0], bottom: parts[0]}
-  }
-  if (parts.length === 2) {
-    return {top: parts[0], bottom: parts[0], left: parts[1], right: parts[1]}
-  }
-  if (parts.length === 3) {
-    return {top: parts[0], right: parts[1], left: parts[1], bottom: parts[2]}
-  }
-  if (parts.length === 4) {
-    return {top: parts[0], right: parts[1], left: parts[2], bottom: parts[3]}
-  }
-  throw new Error("Invalid margin")
-}
-
-function toPixels(s: string) {
-  if (s === "0") return 0
-  if (/\d+px/.test(s)) return parseInt(s)
-
-  throw new Error("Only pixel values accepted")
-}
diff --git a/apps/zui/src/components/dialog/parse-point.ts b/apps/zui/src/components/dialog/parse-point.ts
deleted file mode 100644
index 69ddb51361..0000000000
--- a/apps/zui/src/components/dialog/parse-point.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export function parsePoint(point: string): [string, string] {
-  const words = point.split(/\s+/).map((s) => s.trim())
-  if (words.length === 0) throw new Error("No words passed to point")
-  if (words.length === 1) throw new Error("Must pass two words to point")
-  if (words.length > 2) throw new Error("Too many words passed to point")
-
-  return words.sort((a, b) => {
-    if (a === "left" || a === "right") return -1
-    if (a === "top" || a === "bottom") return 1
-    if (b === "top" || b === "bottom") return -1
-    if (b === "left" || b === "right") return 1
-    return 0
-  }) as [string, string]
-}
diff --git a/apps/zui/src/components/dialog/use-opener.ts b/apps/zui/src/components/dialog/use-opener.ts
index ae015e5584..dd65d3cb53 100644
--- a/apps/zui/src/components/dialog/use-opener.ts
+++ b/apps/zui/src/components/dialog/use-opener.ts
@@ -1,5 +1,5 @@
 import {useLayoutEffect} from "react"
-import {DialogProps} from "./dialog"
+import {DialogProps} from "."
 
 export function useOpener(dialog: HTMLDialogElement, props: DialogProps) {
   useLayoutEffect(() => {
diff --git a/apps/zui/src/components/dialog/use-outside-click.ts b/apps/zui/src/components/dialog/use-outside-click.ts
index 86c43f49ca..3efca899fb 100644
--- a/apps/zui/src/components/dialog/use-outside-click.ts
+++ b/apps/zui/src/components/dialog/use-outside-click.ts
@@ -1,6 +1,6 @@
 import {useEffect, useRef} from "react"
 import {clickIsWithinElement} from "./click-is-within-element"
-import {DialogProps} from "./dialog"
+import {DialogProps} from "."
 
 export function useOutsideClick(dialog: HTMLDialogElement, props: DialogProps) {
   const callback = useRef<(e: globalThis.MouseEvent) => void>(() => {})
diff --git a/apps/zui/src/components/dialog/use-position.ts b/apps/zui/src/components/dialog/use-position.ts
deleted file mode 100644
index c872e1ebbb..0000000000
--- a/apps/zui/src/components/dialog/use-position.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import {useLayoutEffect, useState} from "react"
-import useListener from "src/js/components/hooks/useListener"
-import {DialogProps} from "./dialog"
-import {CSSProperties} from "react"
-import {parsePoint} from "./parse-point"
-import {parseMargin} from "./parse-margin"
-
-export function usePosition(dialog: HTMLDialogElement, props: DialogProps) {
-  const doc = document.documentElement
-  const anchor = props.anchor ?? doc
-  const anchorPoint = props.anchorPoint ?? "center center"
-  const dialogPoint = props.dialogPoint ?? "center center"
-  const dialogMargin = props.dialogMargin ?? "0 0 0 0"
-  const keepOnScreen = props.keepOnScreen ?? true
-  const [position, setPosition] = useState<CSSProperties>({
-    top: 0,
-    left: 0,
-    position: "fixed",
-  })
-
-  const run = () => {
-    if (!props.isOpen || !dialog) return
-    const anchorRect = anchor.getBoundingClientRect()
-    const dialogRect = dialog.getBoundingClientRect()
-    dialogRect.width = dialog.clientWidth
-    dialogRect.height = dialog.clientHeight
-    let left = anchorRect.left
-    let top = anchorRect.top
-    const leftMin = 0
-    const leftMax = doc.clientWidth - leftMin
-    const topMin = 0
-    const topMax = doc.clientHeight - topMin
-    const [anchorX, anchorY] = parsePoint(anchorPoint)
-    const [dialogX, dialogY] = parsePoint(dialogPoint)
-    const margin = parseMargin(dialogMargin)
-
-    // first we line of the top left to where we want it on the anchor.
-    // then we adjust the dialog to that point.
-    // then we make sure we don't overflow the window
-    switch (anchorX) {
-      case "center":
-        left = anchorRect.left + anchorRect.width / 2
-        break
-      case "left":
-        left = left + 0
-        break
-      case "right":
-        left = left + anchorRect.width
-        break
-      default:
-        break
-    }
-
-    switch (anchorY) {
-      case "center":
-        top = anchorRect.top + anchorRect.height / 2
-        break
-      case "top":
-        top = top + 0
-        break
-      case "bottom":
-        top = top + anchorRect.height
-        break
-    }
-
-    // Adjust dialog
-    switch (dialogX) {
-      case "center":
-        left = left - dialogRect.width / 2
-        break
-      case "left":
-        left = left + 0 + margin.left
-        break
-      case "right":
-        left = left - dialogRect.width - margin.right
-        break
-      default:
-        //  handle % and px heres
-        break
-    }
-
-    switch (dialogY) {
-      case "center":
-        top = top - dialogRect.height / 2
-        break
-      case "top":
-        top = top + 0 + margin.top
-        break
-      case "bottom":
-        top = top - dialogRect.height - margin.bottom
-        break
-      default:
-        // handle % and px here
-        break
-    }
-
-    if (keepOnScreen) {
-      const {width, height} = dialogRect
-      if (left + width > leftMax) {
-        const diff = left + width - leftMax
-        left -= diff
-      }
-      // then If you overflow to the left, set at left limit
-      if (left < leftMin) {
-        left = leftMin
-      }
-      // If you overflow on the bottom, back up
-      if (top + height > topMax) {
-        const diff = top + height - topMax
-        top -= diff
-      }
-      // then If you overflow on the top, set at top limit
-      if (top < topMin) {
-        top = topMin
-      }
-    }
-    setPosition((s) => ({...s, left, top}))
-  }
-
-  useLayoutEffect(() => {
-    run()
-  }, [
-    dialog && dialog.open,
-    anchor,
-    anchorPoint,
-    dialogPoint,
-    dialogMargin,
-    props.isOpen,
-    keepOnScreen,
-  ])
-
-  useListener(global.window, "resize", run)
-
-  return position
-}
diff --git a/apps/zui/src/components/modal.tsx b/apps/zui/src/components/modal.tsx
index cc17eaeb38..894db0485a 100644
--- a/apps/zui/src/components/modal.tsx
+++ b/apps/zui/src/components/modal.tsx
@@ -1,6 +1,6 @@
 import styles from "./modals.module.css"
 import {Debut, useDebut} from "src/components/debut"
-import {Dialog} from "src/components/dialog/dialog"
+import {Dialog} from "src/components/dialog"
 
 export function Modal(props: {children: any; onClose: () => any}) {
   const debut = useDebut({afterExit: props.onClose})
diff --git a/apps/zui/src/js/components/Modals.tsx b/apps/zui/src/js/components/Modals.tsx
index 8d99259929..bad489bc40 100644
--- a/apps/zui/src/js/components/Modals.tsx
+++ b/apps/zui/src/js/components/Modals.tsx
@@ -7,7 +7,7 @@ import ViewLakeModal from "./LakeModals/ViewLakeModal"
 import ExportModal from "./ExportModal"
 import {NewPoolModal} from "src/views/new-pool-modal"
 import {Debut, useDebut} from "src/components/debut"
-import {Dialog} from "src/components/dialog/dialog"
+import {Dialog} from "src/components/dialog"
 import modalStyle from "src/components/modals.module.css"
 
 const MODALS = {
diff --git a/apps/zui/src/components/dialog/parse-point.test.ts b/apps/zui/src/util/fixed-positioner.test.ts
similarity index 92%
rename from apps/zui/src/components/dialog/parse-point.test.ts
rename to apps/zui/src/util/fixed-positioner.test.ts
index 6b7b9a0470..72f01fcc2c 100644
--- a/apps/zui/src/components/dialog/parse-point.test.ts
+++ b/apps/zui/src/util/fixed-positioner.test.ts
@@ -1,4 +1,4 @@
-import {parsePoint} from "./parse-point"
+import {parsePoint} from "./fixed-positioner"
 
 test("left top", () => {
   expect(parsePoint("left top")).toEqual(["left", "top"])
diff --git a/apps/zui/src/util/fixed-positioner.ts b/apps/zui/src/util/fixed-positioner.ts
new file mode 100644
index 0000000000..b6794fc289
--- /dev/null
+++ b/apps/zui/src/util/fixed-positioner.ts
@@ -0,0 +1,119 @@
+export function fixedPositioner(props: {
+  target: HTMLElement
+  anchor?: HTMLElement
+  targetPoint?: string
+  anchorPoint?: string
+  targetMargin?: string
+  keepOnScreen?: boolean
+}) {
+  /* Default Fallbacks */
+  const doc = document.documentElement
+  const target = props.target
+  const anchor = props.anchor ?? doc
+  const anchorPoint = props.anchorPoint ?? "center center"
+  const targetPoint = props.targetPoint ?? "center center"
+  const targetMargin = props.targetMargin ?? "0 0 0 0"
+  const keepOnScreen = props.keepOnScreen ?? true
+
+  /* Set Up Variables */
+  const anchorRect = anchor.getBoundingClientRect()
+  const targetRect = target.getBoundingClientRect()
+  const leftMin = 0
+  const leftMax = doc.clientWidth - leftMin
+  const topMin = 0
+  const topMax = doc.clientHeight - topMin
+  const [anchorX, anchorY] = parsePoint(anchorPoint)
+  const [targetX, targetY] = parsePoint(targetPoint)
+  const margin = parseMargin(targetMargin)
+
+  console.log({a: anchorRect, t: targetRect})
+
+  /* 1. Start with the anchor's top left position */
+  let left = anchorRect.left
+  let top = anchorRect.top
+
+  /* 2. Move target's top left corner to the anchor's point */
+  if (anchorX === "center") left = anchorRect.left + anchorRect.width / 2
+  if (anchorX === "left") left = left + 0
+  if (anchorX === "right") left = left + anchorRect.width
+  if (anchorY === "center") top = anchorRect.top + anchorRect.height / 2
+  if (anchorY === "top") top = top + 0
+  if (anchorY === "bottom") top = top + anchorRect.height
+
+  /* 3. Move the target so that the targetPoint is on top of the anchorPoint */
+  if (targetX === "center") left = left - targetRect.width / 2
+  if (targetX === "left") left = left + 0 + margin.left
+  if (targetX === "right") left = left - targetRect.width - margin.right
+  if (targetY === "center") top = top - targetRect.height / 2
+  if (targetY === "top") top = top + 0 + margin.top
+  if (targetY === "bottom") top = top - targetRect.height - margin.bottom
+
+  /* 4. Try to keep the target on the screen */
+  if (keepOnScreen) {
+    const {width, height} = targetRect
+    if (left + width > leftMax) {
+      const diff = left + width - leftMax
+      left -= diff
+    }
+    // then If you overflow to the left, set at left limit
+    if (left < leftMin) {
+      left = leftMin
+    }
+    // If you overflow on the bottom, back up
+    if (top + height > topMax) {
+      const diff = top + height - topMax
+      top -= diff
+    }
+    // then If you overflow on the top, set at top limit
+    if (top < topMin) {
+      top = topMin
+    }
+  }
+
+  return {top, left}
+}
+
+/* Private Functions */
+
+export function parsePoint(point: string): [string, string] {
+  const words = point.split(/\s+/).map((s) => s.trim())
+  if (words.length === 0) throw new Error("No words passed to point")
+  if (words.length === 1) throw new Error("Must pass two words to point")
+  if (words.length > 2) throw new Error("Too many words passed to point")
+
+  return words.sort((a, b) => {
+    if (a === "left" || a === "right") return -1
+    if (a === "top" || a === "bottom") return 1
+    if (b === "top" || b === "bottom") return -1
+    if (b === "left" || b === "right") return 1
+    return 0
+  }) as [string, string]
+}
+
+function parseMargin(s: string) {
+  const parts = s
+    .split(/\s+/)
+    .map((s) => s.trim())
+    .map(toPixels)
+  if (parts.length === 0) throw new Error("Invalid margin")
+  if (parts.length === 1) {
+    return {left: parts[0], right: parts[0], top: parts[0], bottom: parts[0]}
+  }
+  if (parts.length === 2) {
+    return {top: parts[0], bottom: parts[0], left: parts[1], right: parts[1]}
+  }
+  if (parts.length === 3) {
+    return {top: parts[0], right: parts[1], left: parts[1], bottom: parts[2]}
+  }
+  if (parts.length === 4) {
+    return {top: parts[0], right: parts[1], left: parts[2], bottom: parts[3]}
+  }
+  throw new Error("Invalid margin")
+}
+
+function toPixels(s: string) {
+  if (s === "0") return 0
+  if (/\d+px/.test(s)) return parseInt(s)
+
+  throw new Error("Only pixel values accepted")
+}
diff --git a/apps/zui/src/util/hooks/use-fixed-position.ts b/apps/zui/src/util/hooks/use-fixed-position.ts
new file mode 100644
index 0000000000..89968a5662
--- /dev/null
+++ b/apps/zui/src/util/hooks/use-fixed-position.ts
@@ -0,0 +1,24 @@
+import {useLayoutEffect, useState} from "react"
+import useListener from "src/js/components/hooks/useListener"
+import {CSSProperties} from "react"
+import {fixedPositioner} from "../fixed-positioner"
+
+type Props = Parameters<typeof fixedPositioner>[0]
+
+export function useFixedPosition(props: Props) {
+  const [style, setStyle] = useState<CSSProperties>({
+    top: 0,
+    left: 0,
+    position: "fixed",
+  })
+
+  function run() {
+    if (!props.target) return
+    setStyle((prev) => ({...prev, ...fixedPositioner(props)}))
+  }
+
+  useLayoutEffect(run, Object.values(props))
+  useListener(global.window, "resize", run)
+
+  return style
+}
diff --git a/apps/zui/src/views/histogram-pane/settings-button.tsx b/apps/zui/src/views/histogram-pane/settings-button.tsx
index cc99bc1261..2130adb407 100644
--- a/apps/zui/src/views/histogram-pane/settings-button.tsx
+++ b/apps/zui/src/views/histogram-pane/settings-button.tsx
@@ -1,6 +1,6 @@
 import {useRef, useState} from "react"
 import styles from "./histogram-pane.module.css"
-import {Dialog} from "src/components/dialog/dialog"
+import {Dialog} from "src/components/dialog"
 import {SettingsForm} from "./settings-form"
 import {useSelector} from "react-redux"
 import Current from "src/js/state/Current"
diff --git a/apps/zui/src/views/load-pane/index.tsx b/apps/zui/src/views/load-pane/index.tsx
index 00f1f1fc9a..311bba4915 100644
--- a/apps/zui/src/views/load-pane/index.tsx
+++ b/apps/zui/src/views/load-pane/index.tsx
@@ -14,7 +14,7 @@ import {Sidebar} from "./sidebar"
 import {ResultsGroup} from "./results-group"
 import useSelect from "src/app/core/hooks/use-select"
 import {Debut, useDebut} from "src/components/debut"
-import {Dialog} from "src/components/dialog/dialog"
+import {Dialog} from "src/components/dialog"
 import {ErrorWell} from "src/components/error-well"
 import {errorToString} from "src/util/error-to-string"
 import {call} from "src/util/call"
diff --git a/apps/zui/src/views/preferences-modal/index.tsx b/apps/zui/src/views/preferences-modal/index.tsx
index 59acfaf6b9..1c2c23a714 100644
--- a/apps/zui/src/views/preferences-modal/index.tsx
+++ b/apps/zui/src/views/preferences-modal/index.tsx
@@ -5,7 +5,7 @@ import useCallbackRef from "src/js/components/hooks/useCallbackRef"
 import {Form} from "./form"
 import forms from "src/components/forms.module.css"
 import classNames from "classnames"
-import {Dialog} from "src/components/dialog/dialog"
+import {Dialog} from "src/components/dialog"
 import {Debut, useDebut} from "src/components/debut"
 import modals from "src/components/modals.module.css"
 import styles from "./index.module.css"

From d1af4d896602efe43f3e1e05515c8961ea77511b Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Fri, 15 Dec 2023 14:01:52 -0800
Subject: [PATCH 06/16] Cleanup On Quit

---
 apps/zui/src/core/main/main-object.ts         | 2 ++
 apps/zui/src/domain/loads/operations/paste.ts | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/zui/src/core/main/main-object.ts b/apps/zui/src/core/main/main-object.ts
index 13f6565b05..1387de199b 100644
--- a/apps/zui/src/core/main/main-object.ts
+++ b/apps/zui/src/core/main/main-object.ts
@@ -28,6 +28,7 @@ import {PathName, getPath} from "../../js/api/core/get-path"
 import createLake from "src/js/models/lake"
 import {getAuthToken} from "../../js/api/core/get-zealot"
 import {Abortables} from "src/app/core/models/abortables"
+import * as zui from "src/zui"
 
 export class MainObject {
   public isQuitting = false
@@ -92,6 +93,7 @@ export class MainObject {
 
   onBeforeQuit() {
     if (this.isQuitting) return
+    zui.app.emit("quit")
     this.saveSession()
     this.isQuitting = true
   }
diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
index c887a60766..6e62066a43 100644
--- a/apps/zui/src/domain/loads/operations/paste.ts
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -24,5 +24,4 @@ function removeFiles(loadFiles: string[]) {
 zui.loads.on("error", (load) => removeFiles(load.files))
 zui.loads.on("abort", (load) => removeFiles(load.files))
 zui.loads.on("success", (load) => removeFiles(load.files))
-
-// TODO zui.app.on("quit", () => pastes.destroy())
+zui.app.on("quit", () => pastes.destroy())

From 54dc7d72846db901c64f88efdd2a4a9290907248 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Fri, 15 Dec 2023 14:03:49 -0800
Subject: [PATCH 07/16] Refactor Paste Operation

---
 apps/zui/src/domain/loads/operations/paste.ts | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
index 6e62066a43..d16770f5e4 100644
--- a/apps/zui/src/domain/loads/operations/paste.ts
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -5,23 +5,20 @@ import * as zui from "src/zui"
 import {sendToFocusedWindow} from "src/core/ipc"
 import {TempFileHolder} from "../temp-file-holder"
 
-const namespace = os.userInfo().username + "_pastes"
-const pastes = new TempFileHolder(namespace)
-
-export const paste = createOperation("loads.paste", () => {
-  const data = clipboard.readText()
-  const file = pastes.createFile("paste", data)
-  sendToFocusedWindow("loads.previewLoadFiles", {files: [file]})
-  return file
-})
+const pastes = new TempFileHolder(os.userInfo().username + "_pastes")
 
 function removeFiles(loadFiles: string[]) {
-  for (let file of loadFiles) {
-    if (pastes.has(file)) pastes.removeFile(file)
-  }
+  for (let file of loadFiles) if (pastes.has(file)) pastes.removeFile(file)
 }
 
 zui.loads.on("error", (load) => removeFiles(load.files))
 zui.loads.on("abort", (load) => removeFiles(load.files))
 zui.loads.on("success", (load) => removeFiles(load.files))
 zui.app.on("quit", () => pastes.destroy())
+
+export const paste = createOperation("loads.paste", () => {
+  const data = clipboard.readText()
+  const file = pastes.createFile("paste", data)
+  sendToFocusedWindow("loads.previewLoadFiles", {files: [file]})
+  return file
+})

From 0510282a60786f8747e56e85e4d6e5b35de9385b Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Fri, 15 Dec 2023 14:34:45 -0800
Subject: [PATCH 08/16] Update Integration Test

---
 apps/zui/src/views/load-pane/form.tsx        |  9 ++++--
 packages/zui-player/helpers/test-app.ts      |  2 +-
 packages/zui-player/package.json             |  5 +++-
 packages/zui-player/tests/copy-paste.spec.ts | 30 ++++++++++++++++++--
 yarn.lock                                    | 13 +++++++++
 5 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/apps/zui/src/views/load-pane/form.tsx b/apps/zui/src/views/load-pane/form.tsx
index f999e9a1fc..1624771ef4 100644
--- a/apps/zui/src/views/load-pane/form.tsx
+++ b/apps/zui/src/views/load-pane/form.tsx
@@ -17,6 +17,7 @@ import {DataFormatOptions} from "src/components/data-format-select"
 import {LoadFormat} from "@brimdata/zed-js"
 import {ErrorWell} from "src/components/error-well"
 import {errorToString} from "src/util/error-to-string"
+import {basename} from "src/util/basename"
 
 export function Form(props: {
   onClose: () => any
@@ -96,14 +97,18 @@ export function Form(props: {
             </div>
             <ul className={styles.files}>
               {files.map((f: string, i) => (
-                <li key={i} className={styles.fileItem}>
+                <li
+                  key={i}
+                  className={styles.fileItem}
+                  aria-label={basename(f)}
+                >
                   <Icon
                     name="doc-plain"
                     size={16}
                     fill="var(--primary-color)"
                   />
                   <span title={f} className={styles.fileName}>
-                    {f.split(/[\\/]/).pop()}
+                    {basename(f)}
                   </span>
                   <IconButton iconName="close" onClick={() => removeFile(f)} />
                 </li>
diff --git a/packages/zui-player/helpers/test-app.ts b/packages/zui-player/helpers/test-app.ts
index ab182451bc..73510a5686 100644
--- a/packages/zui-player/helpers/test-app.ts
+++ b/packages/zui-player/helpers/test-app.ts
@@ -194,7 +194,7 @@ export default class TestApp {
     return await this.page.evaluate(
       ({ name, args }) => {
         // @ts-ignore
-        window.zui.invoke(name, ...args);
+        return window.zui.invoke(name, ...args);
       },
       { name, args }
     );
diff --git a/packages/zui-player/package.json b/packages/zui-player/package.json
index acd16f17cb..c353e36ae3 100644
--- a/packages/zui-player/package.json
+++ b/packages/zui-player/package.json
@@ -1,5 +1,8 @@
 {
   "name": "zui-player",
   "private": true,
-  "main": "./index.ts"
+  "main": "./index.ts",
+  "dependencies": {
+    "fs-extra": "^11.2.0"
+  }
 }
diff --git a/packages/zui-player/tests/copy-paste.spec.ts b/packages/zui-player/tests/copy-paste.spec.ts
index 5906dac4f4..717b6738cb 100644
--- a/packages/zui-player/tests/copy-paste.spec.ts
+++ b/packages/zui-player/tests/copy-paste.spec.ts
@@ -1,14 +1,38 @@
 import { play } from 'zui-player';
+import * as fs from 'fs-extra';
 
 play('Copy Paste Data', (app, test) => {
-  test('copy data from the clipboard', async () => {
-    app.debugLogs();
+  test('paste cleans up after itself', async () => {
+    await app.evalMain(({ clipboard }) => clipboard.writeText('{a: 1}'));
+    const file = await app.invoke('loads.paste');
+    test.expect(fs.existsSync(file)).toBe(true);
+    await app.click('button', 'Load');
+    await app.attached(/Successfully loaded/);
+    await app.click('button', 'Query Pool');
+    test.expect(fs.existsSync(file)).toBe(false);
+  });
+
+  test('pasting data loads into pool', async () => {
     await app.evalMain(({ clipboard }) => clipboard.writeText('{a: 1}'));
     await app.invoke('loads.paste');
     await app.click('button', 'Load');
     await app.click('button', 'Query Pool');
     const results = await app.getViewerResults();
     test.expect(results).toEqual(['a', '1']);
-    app.sleep(10);
+  });
+
+  test('pasting multiple times', async () => {
+    await app.evalMain(({ clipboard }) => clipboard.writeText('{a: 1}'));
+    await app.invoke('loads.paste');
+    await app.evalMain(({ clipboard }) => clipboard.writeText('{b: 2}'));
+    await app.invoke('loads.paste');
+    await app.evalMain(({ clipboard }) => clipboard.writeText('{c: 3}'));
+    await app.invoke('loads.paste');
+
+    await app.attached('listitem', 'paste');
+    await app.attached('listitem', 'paste_1');
+    await app.attached('listitem', 'paste_2');
+    await app.click('button', 'Load');
+    await app.attached(/Successfully loaded into jkerr_pastes/);
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 231e742f19..76bca36f6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10161,6 +10161,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^11.2.0":
+  version: 11.2.0
+  resolution: "fs-extra@npm:11.2.0"
+  dependencies:
+    graceful-fs: ^4.2.0
+    jsonfile: ^6.0.1
+    universalify: ^2.0.0
+  checksum: b12e42fa40ba47104202f57b8480dd098aa931c2724565e5e70779ab87605665594e76ee5fb00545f772ab9ace167fe06d2ab009c416dc8c842c5ae6df7aa7e8
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^8.1.0":
   version: 8.1.0
   resolution: "fs-extra@npm:8.1.0"
@@ -19130,6 +19141,8 @@ __metadata:
 "zui-player@workspace:packages/zui-player":
   version: 0.0.0-use.local
   resolution: "zui-player@workspace:packages/zui-player"
+  dependencies:
+    fs-extra: ^11.2.0
   languageName: unknown
   linkType: soft
 

From b6dbf39c68ff3c248b5aa6cb6ce427cc00b52efc Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Fri, 15 Dec 2023 14:36:04 -0800
Subject: [PATCH 09/16] Do not cache the integration tests

---
 packages/zui-player/project.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/zui-player/project.json b/packages/zui-player/project.json
index 16755cd53b..4b36914a92 100644
--- a/packages/zui-player/project.json
+++ b/packages/zui-player/project.json
@@ -16,7 +16,6 @@
     },
     "test": {
       "executor": "@nxkit/playwright:test",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
       "options": {
         "outputPath": "dist/packages/zui-player/test-results",
         "playwrightConfig": "packages/zui-player/playwright.config.js",

From f0040e145d4929392531dd850aecacd789c19552 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Mon, 18 Dec 2023 13:22:01 -0800
Subject: [PATCH 10/16] Remove User Name From Test

---
 packages/zui-player/tests/copy-paste.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/zui-player/tests/copy-paste.spec.ts b/packages/zui-player/tests/copy-paste.spec.ts
index 717b6738cb..f137f36abf 100644
--- a/packages/zui-player/tests/copy-paste.spec.ts
+++ b/packages/zui-player/tests/copy-paste.spec.ts
@@ -33,6 +33,6 @@ play('Copy Paste Data', (app, test) => {
     await app.attached('listitem', 'paste_1');
     await app.attached('listitem', 'paste_2');
     await app.click('button', 'Load');
-    await app.attached(/Successfully loaded into jkerr_pastes/);
+    await app.attached(/Successfully loaded into .*_pastes/);
   });
 });

From c9b896ebd07b198d9ff61b001325cd867f2212a5 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Mon, 18 Dec 2023 13:27:20 -0800
Subject: [PATCH 11/16] Use mkdtemp

---
 apps/zui/src/domain/loads/temp-file-holder.ts | 4 +---
 apps/zui/src/util/fixed-positioner.ts         | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/zui/src/domain/loads/temp-file-holder.ts b/apps/zui/src/domain/loads/temp-file-holder.ts
index 89c591e407..fcd5cfee97 100644
--- a/apps/zui/src/domain/loads/temp-file-holder.ts
+++ b/apps/zui/src/domain/loads/temp-file-holder.ts
@@ -1,4 +1,3 @@
-import os from "os"
 import path from "path"
 import * as fs from "fs-extra"
 import {getUniqName} from "src/util/get-uniq-name"
@@ -7,8 +6,7 @@ export class TempFileHolder {
   dir: string
 
   constructor(namespace: string) {
-    this.dir = path.join(os.tmpdir(), namespace)
-    fs.ensureDirSync(this.dir)
+    this.dir = fs.mkdtempSync(namespace)
   }
 
   createFile(prefix: string, data: string) {
diff --git a/apps/zui/src/util/fixed-positioner.ts b/apps/zui/src/util/fixed-positioner.ts
index b6794fc289..eaefa853ea 100644
--- a/apps/zui/src/util/fixed-positioner.ts
+++ b/apps/zui/src/util/fixed-positioner.ts
@@ -26,8 +26,6 @@ export function fixedPositioner(props: {
   const [targetX, targetY] = parsePoint(targetPoint)
   const margin = parseMargin(targetMargin)
 
-  console.log({a: anchorRect, t: targetRect})
-
   /* 1. Start with the anchor's top left position */
   let left = anchorRect.left
   let top = anchorRect.top

From 3374d9a9b25a55eac2f22a346e2e13dd78932ded Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Tue, 19 Dec 2023 15:44:12 -0800
Subject: [PATCH 12/16] Add Way to Start Electron Only

---
 apps/zui/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/zui/package.json b/apps/zui/package.json
index 0de188155c..6595293221 100644
--- a/apps/zui/package.json
+++ b/apps/zui/package.json
@@ -16,6 +16,7 @@
     "start:main": "yarn build:main --watch",
     "start:renderer": "next dev -p 4567",
     "start:electron": "nodemon --watch dist ../../node_modules/electron/cli.js .",
+    "start:production": "node ../../node_modules/electron/cli.js .",
     "watch-code": "run-p start:main start:renderer",
     "build": "run-p -l 'build:**'",
     "build:main": "node scripts/esbuild.mjs",

From 24c8ed91eb2461a47138d1a633da1c6e36da144a Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Tue, 19 Dec 2023 15:44:50 -0800
Subject: [PATCH 13/16] Create Temp Dir in Temp Location

---
 apps/zui/src/domain/loads/operations/paste.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
index d16770f5e4..3893c55c36 100644
--- a/apps/zui/src/domain/loads/operations/paste.ts
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -1,11 +1,13 @@
-import {clipboard} from "electron"
+import {app, clipboard} from "electron"
 import {createOperation} from "src/core/operations"
 import os from "os"
 import * as zui from "src/zui"
 import {sendToFocusedWindow} from "src/core/ipc"
 import {TempFileHolder} from "../temp-file-holder"
+import {join} from "path"
 
-const pastes = new TempFileHolder(os.userInfo().username + "_pastes")
+const pasteDirPrefix = join(app.getPath("temp"), "zui_pastes_")
+const pastes = new TempFileHolder(pasteDirPrefix)
 
 function removeFiles(loadFiles: string[]) {
   for (let file of loadFiles) if (pastes.has(file)) pastes.removeFile(file)

From 5320ef36adffb1482ae231e3f2de15189d68ed07 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Tue, 19 Dec 2023 16:01:31 -0800
Subject: [PATCH 14/16] Avoid Ending Test Too Fast

---
 packages/zui-player/tests/copy-paste.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/zui-player/tests/copy-paste.spec.ts b/packages/zui-player/tests/copy-paste.spec.ts
index f137f36abf..c2b9fc6c9c 100644
--- a/packages/zui-player/tests/copy-paste.spec.ts
+++ b/packages/zui-player/tests/copy-paste.spec.ts
@@ -33,6 +33,7 @@ play('Copy Paste Data', (app, test) => {
     await app.attached('listitem', 'paste_1');
     await app.attached('listitem', 'paste_2');
     await app.click('button', 'Load');
+    await app.click('button', 'Query Pool');
     await app.attached(/Successfully loaded into .*_pastes/);
   });
 });

From dba8f90206809cb6ecead81515a04053b5a76e4b Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Tue, 19 Dec 2023 16:15:01 -0800
Subject: [PATCH 15/16] Lint

---
 apps/zui/src/domain/loads/operations/paste.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
index 3893c55c36..3c32a1143b 100644
--- a/apps/zui/src/domain/loads/operations/paste.ts
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -1,6 +1,5 @@
 import {app, clipboard} from "electron"
 import {createOperation} from "src/core/operations"
-import os from "os"
 import * as zui from "src/zui"
 import {sendToFocusedWindow} from "src/core/ipc"
 import {TempFileHolder} from "../temp-file-holder"

From d9bd9aa6bf4abdd2ba86c22070bb6a6cf4100695 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Tue, 19 Dec 2023 16:17:00 -0800
Subject: [PATCH 16/16] Use OS Module Rather Than Electron

---
 apps/zui/src/domain/loads/operations/paste.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/zui/src/domain/loads/operations/paste.ts b/apps/zui/src/domain/loads/operations/paste.ts
index 3c32a1143b..f7e2c8fe30 100644
--- a/apps/zui/src/domain/loads/operations/paste.ts
+++ b/apps/zui/src/domain/loads/operations/paste.ts
@@ -1,11 +1,12 @@
-import {app, clipboard} from "electron"
+import {clipboard} from "electron"
 import {createOperation} from "src/core/operations"
 import * as zui from "src/zui"
 import {sendToFocusedWindow} from "src/core/ipc"
 import {TempFileHolder} from "../temp-file-holder"
 import {join} from "path"
+import os from "os"
 
-const pasteDirPrefix = join(app.getPath("temp"), "zui_pastes_")
+const pasteDirPrefix = join(os.tmpdir(), "zui_pastes_")
 const pastes = new TempFileHolder(pasteDirPrefix)
 
 function removeFiles(loadFiles: string[]) {