diff --git a/app/web/src/components/AssetFuncListPanel.vue b/app/web/src/components/AssetFuncListPanel.vue
index 7bb1ad851e..f32f88a31a 100644
--- a/app/web/src/components/AssetFuncListPanel.vue
+++ b/app/web/src/components/AssetFuncListPanel.vue
@@ -10,7 +10,7 @@
           <AssetFuncAttachDropdown
             v-if="assetStore.selectedAssetId"
             :disabled="!assetStore.selectedAsset?.schemaVariantId"
-            label="Attach Function"
+            label="Attach"
             @selected-attach-type="openAttachFuncModal"
           />
         </SidebarSubpanelTitle>
diff --git a/app/web/src/components/AssetPalette.vue b/app/web/src/components/AssetPalette.vue
index 8ceb81929a..018eaab54f 100644
--- a/app/web/src/components/AssetPalette.vue
+++ b/app/web/src/components/AssetPalette.vue
@@ -14,6 +14,7 @@
               v-tooltip="
                 'Drag the assets that you wish to include in your application into the canvas to the right.'
               "
+              class="cursor-pointer"
               name="question-circle"
             />
           </SidebarSubpanelTitle>
diff --git a/app/web/src/components/AttributeDebugView.vue b/app/web/src/components/AttributeDebugView.vue
index 4dcbfdad7b..518d7704dd 100644
--- a/app/web/src/components/AttributeDebugView.vue
+++ b/app/web/src/components/AttributeDebugView.vue
@@ -1,60 +1,39 @@
 <template>
-  <div class="overflow-x-scroll my-2 p-4 border-opacity-10 border-l-2">
+  <div class="overflow-hidden my-xs p-xs border-opacity-10 border-l-2">
     <dl>
-      <dt class="uppercase text-xs italic opacity-80">Attribute Value Id</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10">
-        <pre>{{ data.valueId }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">Type</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10">
-        <pre>{{ data.kind ?? "any" }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">Set By Function</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10">
-        <pre>{{ data.funcName }} {{ data.funcId }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">Input</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10 overflow-x-scroll">
-        <pre>{{ data.funcArgs ?? "NULL" }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">Input sources</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10 overflow-x-scroll">
-        <ul v-if="data.argSources && Object.keys(data.argSources).length">
-          <li v-for="[k, v] in Object.entries(data.argSources)" :key="k">
-            <strong>{{ k }}</strong>
-            : {{ v ?? "?" }}
-          </li>
-        </ul>
-        <p v-else>No input sources</p>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">Value</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10 overflow-x-scroll">
-        <pre>{{ data.value ?? "NULL" }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">Prototype Id</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10">
-        <pre>{{ data.prototypeId }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">Prototype Context</dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10">
-        <pre>{{ data.prototypeContext }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">
-        Implicit Attribute Value
-      </dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10 overflow-x-scroll">
-        <pre>{{
-          typeof data.implicitValue === "undefined"
-            ? "none"
-            : data.implicitValue ?? "NULL"
-        }}</pre>
-      </dd>
-      <dt class="uppercase text-xs italic opacity-80">
-        Implicit Set By Function
-      </dt>
-      <dd class="p-2 my-2 border-2 border-opacity-10">
-        <pre>{{ data.implicitFuncName }} </pre>
-      </dd>
+      <DebugViewItem title="Attribute Value Id" :data="data.valueId" />
+      <DebugViewItem :data="data.kind ?? 'any'" title="Type" />
+      <DebugViewItem
+        :data="`${data.funcName} ${data.funcId}`"
+        title="Set By Function"
+      />
+      <DebugViewItem title="Input" :data="data.funcArgs ?? 'NULL'" />
+      <DebugViewItem title="Input sources">
+        <template #data>
+          <ul v-if="data.argSources && Object.keys(data.argSources).length">
+            <li v-for="[k, v] in Object.entries(data.argSources)" :key="k">
+              <strong>{{ k }}</strong>
+              : {{ v ?? "?" }}
+            </li>
+          </ul>
+          <p v-else>No input sources</p>
+        </template>
+      </DebugViewItem>
+      <DebugViewItem title="Value" :data="data.value ?? 'NULL'" />
+      <DebugViewItem title="Prototype Id" :data="data.prototypeId" />
+      <DebugViewItem title="Prototype Context" :data="data.prototypeContext" />
+      <DebugViewItem
+        title="Implicit Attribute Value"
+        :data="
+          typeof data.implicitValue === 'undefined'
+            ? 'none'
+            : data.implicitValue ?? 'NULL'
+        "
+      />
+      <DebugViewItem
+        title="Implicit Set By Function"
+        :data="data.implicitFuncName"
+      />
       <p class="text-2xs p-2 my-2 border-2 border-opacity-10">
         prototype in change set?
         {{ data.prototypeInChangeSet ? "y" : "n" }} value in change set?
@@ -66,6 +45,7 @@
 
 <script setup lang="ts">
 import { AttributeDebugData } from "@/store/components.store";
+import DebugViewItem from "./DebugViewItem.vue";
 
 defineProps<{ data: AttributeDebugData }>();
 </script>
diff --git a/app/web/src/components/ComponentDebugDetails.vue b/app/web/src/components/ComponentDebugDetails.vue
index 39615ab602..4bb34f16a0 100644
--- a/app/web/src/components/ComponentDebugDetails.vue
+++ b/app/web/src/components/ComponentDebugDetails.vue
@@ -10,18 +10,18 @@
     </template>
     <template v-else-if="fetchDebugReqStatus.isSuccess && debugData">
       <div class="border border-neutral-500 m-xs">
+        <!-- Component -->
         <Collapsible label="Component" defaultOpen textSize="lg">
-          <dl class="border-l-2 p-2">
-            <dt class="uppercase text-xs italic opacity-80">Id</dt>
-            <dd class="p-2 my-2 border-2 border-opacity-10">
-              <pre>{{ componentId }}</pre>
-            </dd>
-            <dt class="uppercase text-xs italic opacity-80">Variant Id</dt>
-            <dd class="p-2 my-2 border-2 border-opacity-10">
-              <pre>{{ debugData.schemaVariantId }}</pre>
-            </dd>
+          <dl class="border-l-2 p-xs">
+            <DebugViewItem title="Id" :data="componentId" />
+            <DebugViewItem
+              title="Variant Id"
+              :data="debugData.schemaVariantId"
+            />
           </dl>
         </Collapsible>
+
+        <!-- Attributes -->
         <Collapsible
           label="Attributes"
           :defaultOpen="false"
@@ -39,6 +39,8 @@
             <AttributeDebugView :data="attribute.debugData" />
           </Collapsible>
         </Collapsible>
+
+        <!-- Input Sockets -->
         <Collapsible
           label="Input Sockets"
           :defaultOpen="false"
@@ -56,6 +58,8 @@
             <AttributeDebugView :data="attribute.debugData" />
           </Collapsible>
         </Collapsible>
+
+        <!-- Output Sockets -->
         <Collapsible
           label="Output Sockets"
           :defaultOpen="false"
@@ -87,6 +91,7 @@ import {
 import { PropType, computed, onMounted } from "vue";
 import { ComponentId, useComponentsStore } from "@/store/components.store";
 import AttributeDebugView from "./AttributeDebugView.vue";
+import DebugViewItem from "./DebugViewItem.vue";
 
 const componentsStore = useComponentsStore();
 
diff --git a/app/web/src/components/ComponentDetails.vue b/app/web/src/components/ComponentDetails.vue
index 8aea1d23b6..9e3f76c862 100644
--- a/app/web/src/components/ComponentDetails.vue
+++ b/app/web/src/components/ComponentDetails.vue
@@ -91,27 +91,7 @@
                 <AttributesPanel />
               </TabGroupItem>
               <TabGroupItem label="Code" slug="code">
-                <template v-if="codeReqStatus.isPending">
-                  Loading code...</template
-                >
-                <template v-else-if="codeReqStatus.isError">
-                  <ErrorMessage :requestStatus="codeReqStatus" />
-                </template>
-                <template
-                  v-else-if="codeReqStatus.isSuccess && selectedComponentCode"
-                >
-                  <div class="absolute inset-xs">
-                    <ErrorMessage
-                      v-if="selectedComponentCode[0]?.message"
-                      class="mx-1 mb-2"
-                    >
-                      {{ selectedComponentCode[0]?.message }}
-                    </ErrorMessage>
-                    <CodeViewer
-                      :code="formattedCode || '#No code generated yet'"
-                    />
-                  </div>
-                </template>
+                <ComponentDetailsCode />
               </TabGroupItem>
               <TabGroupItem slug="qualifications">
                 <template #label>
@@ -177,7 +157,7 @@
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
-import { computed, onBeforeMount, ref, watch } from "vue";
+import { computed, watch, onBeforeMount, ref } from "vue";
 import {
   Icon,
   ErrorMessage,
@@ -192,7 +172,6 @@ import {
 import { useComponentsStore } from "@/store/components.store";
 import { useStatusStore } from "@/store/status.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
-import CodeViewer from "@/components/CodeViewer.vue";
 import { useQualificationsStore } from "@/store/qualifications.store";
 import { useActionsStore } from "@/store/actions.store";
 import ComponentCard from "./ComponentCard.vue";
@@ -205,6 +184,9 @@ import SidebarSubpanelTitle from "./SidebarSubpanelTitle.vue";
 import AssetDiffDetails from "./AssetDiffDetails.vue";
 import StatusIndicatorIcon from "./StatusIndicatorIcon.vue";
 import AttributesPanel from "./AttributesPanel/AttributesPanel.vue";
+import ComponentDetailsCode from "./ComponentDetailsCode.vue";
+
+const emit = defineEmits(["delete", "restore"]);
 
 const componentsStore = useComponentsStore();
 const qualificationsStore = useQualificationsStore();
@@ -232,21 +214,6 @@ const selectedComponentFailingQualificationsCount = computed(
     ]?.failed || 0,
 );
 
-const selectedComponentCode = computed(
-  () => componentsStore.selectedComponentCode,
-);
-
-const formattedCode = computed(() => {
-  const compCode = componentsStore.selectedComponentCode;
-  if (compCode && compCode.length > 0) {
-    if (compCode[0]?.language === "json") {
-      return JSON.stringify(JSON.parse(compCode[0]?.code || ""), null, 2);
-    }
-    return compCode[0]?.code;
-  }
-  return "# No code generated yet";
-});
-
 const selectedComponentActionsCount = computed(() => {
   return _.filter(
     actionsStore.actionsByComponentId[selectedComponentId.value],
@@ -265,11 +232,6 @@ onBeforeMount(() => {
   }
 });
 
-const codeReqStatus = componentsStore.getRequestStatus(
-  "FETCH_COMPONENT_CODE",
-  selectedComponentId,
-);
-
 const statusStore = useStatusStore();
 const currentStatus = computed(() =>
   selectedComponentId.value
diff --git a/app/web/src/components/ComponentDetailsCode.vue b/app/web/src/components/ComponentDetailsCode.vue
new file mode 100644
index 0000000000..ae664e3313
--- /dev/null
+++ b/app/web/src/components/ComponentDetailsCode.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <template v-if="codeReqStatus.isPending"> Loading code...</template>
+    <template v-else-if="codeReqStatus.isError">
+      <ErrorMessage :requestStatus="codeReqStatus" />
+    </template>
+    <template v-else-if="codeReqStatus.isSuccess && selectedComponentCode">
+      <div v-if="selectedComponentCode[0]?.code" class="absolute inset-xs">
+        <template v-for="(item, index) in selectedComponentCode" :key="index">
+          <div v-if="item.code || item.message" class="pb-md">
+            <div
+              v-if="selectedComponentCode.length > 1"
+              class="text-lg font-bold pb-xs px-xs"
+            >
+              Code Output {{ index + 1 }}:
+            </div>
+            <ErrorMessage v-if="item.message" class="mx-1 mb-2">
+              {{ item.message }}
+            </ErrorMessage>
+            <div class="relative">
+              <CodeViewer v-if="item.code" :code="item.code" />
+            </div>
+          </div>
+        </template>
+      </div>
+      <div
+        v-else
+        class="flex flex-row items-center justify-center p-md text-lg italic text-neutral-500 dark:text-neutral-400"
+      >
+        No code generated yet
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { ErrorMessage } from "@si/vue-lib/design-system";
+import { useComponentsStore } from "@/store/components.store";
+import CodeViewer from "./CodeViewer.vue";
+
+const componentsStore = useComponentsStore();
+
+const selectedComponentId = computed(
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  () => componentsStore.selectedComponentId!,
+);
+
+const codeReqStatus = componentsStore.getRequestStatus(
+  "FETCH_COMPONENT_CODE",
+  selectedComponentId,
+);
+
+const selectedComponentCode = computed(
+  () => componentsStore.selectedComponentCode,
+);
+</script>
diff --git a/app/web/src/components/ComponentDetailsResource.vue b/app/web/src/components/ComponentDetailsResource.vue
index e3eb146381..62e27f3a00 100644
--- a/app/web/src/components/ComponentDetailsResource.vue
+++ b/app/web/src/components/ComponentDetailsResource.vue
@@ -50,11 +50,11 @@
         </div>
       </template>
     </CodeViewer>
-    <div
-      v-else
-      class="w-full text-center text-lg mt-5 dark:text-neutral-50 text-neutral-900"
-    >
-      This component does not have a resource associated with it yet
+    <div v-else class="flex flex-col items-center p-sm">
+      <div class="w-64"><EmptyStateIcon name="no-changes" /></div>
+      <div class="w-full text-center text-xl text-neutral-400">
+        This component does not have a resource associated with it yet
+      </div>
     </div>
   </div>
 </template>
@@ -66,6 +66,7 @@ import { useComponentsStore } from "@/store/components.store";
 import CodeViewer from "./CodeViewer.vue";
 import FixDetails from "./FixDetails.vue";
 import StatusIndicatorIcon from "./StatusIndicatorIcon.vue";
+import EmptyStateIcon from "./EmptyStateIcon.vue";
 
 const componentsStore = useComponentsStore();
 const selectedComponent = computed(() => componentsStore.selectedComponent);
diff --git a/app/web/src/components/DebugViewItem.vue b/app/web/src/components/DebugViewItem.vue
new file mode 100644
index 0000000000..5498f195f1
--- /dev/null
+++ b/app/web/src/components/DebugViewItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <dt class="uppercase text-xs italic opacity-80">
+      <template v-if="title">{{ title }}</template>
+      <slot v-else name="title" />
+    </dt>
+    <dd class="p-2 my-2 border-2 border-opacity-10 overflow-x-auto text-xs">
+      <pre><template v-if="data">{{ data }}</template><slot v-else name="data" /></pre>
+    </dd>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from "vue";
+
+defineProps({
+  data: {
+    type: [Object, String, Number, Boolean, null] as PropType<
+      object | string | number | boolean | null
+    >,
+  },
+  title: { type: String },
+});
+</script>
diff --git a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
index 9bfaefc3c2..9fcac5d520 100644
--- a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
+++ b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
@@ -7,7 +7,7 @@ overflow hidden */
     class="absolute inset-0 overflow-hidden"
     :style="{ cursor }"
   >
-    <DiagramEmptyState v-if="componentsStore.modelIsEmpty" />
+    <DiagramEmptyState v-if="componentsStore.diagramIsEmpty" />
     <div
       v-if="showDebugBar"
       class="absolute bg-black text-white flex space-x-10 z-10 opacity-50"
@@ -264,8 +264,6 @@ import DiagramHelpModal from "./DiagramHelpModal.vue";
 import DiagramIcon from "./DiagramIcon.vue";
 import DiagramEmptyState from "./DiagramEmptyState.vue";
 
-// zoom config - zoom value of 1 is 100% zoom level
-const ZOOM_SCROLL_FACTOR = 0.001; // scroll delta multiplied by this while zooming
 // scroll pan multiplied by this and zoom level when panning
 const ZOOM_PAN_FACTOR = 0.5;
 
@@ -380,36 +378,19 @@ function onMouseWheel(e: KonvaEventObject<WheelEvent>) {
   e.evt.preventDefault();
   if (props.controlsDisabled) return;
 
+  // is it a mouse wheel or a trackpad pinch to zoom?
+  const isTrackpadPinch = !_.isInteger(e.evt.deltaY);
   // if CMD key, treat wheel as zoom, otherwise pan
-  if (e.evt.metaKey) {
-    // e.evt.metaKey
-    // zoom
-    let newZoomLevel = zoomLevel.value - e.evt.deltaY * ZOOM_SCROLL_FACTOR;
-    if (newZoomLevel < MIN_ZOOM) newZoomLevel = MIN_ZOOM;
-    if (newZoomLevel > MAX_ZOOM) newZoomLevel = MAX_ZOOM;
-
+  if (e.evt.metaKey || (e.evt.ctrlKey && isTrackpadPinch)) {
     // need to move origin to zoom centered on pointer position
     if (containerPointerPos.value && gridPointerPos.value) {
       // this a little confusing, but we're recreating the same calculations as above, but but at the new zoom level
       // so we know where the pointer _would_ move and then offset the pointer position stays constant
-      const newGridWidth = containerWidth.value / newZoomLevel;
-      const newMinX = gridOrigin.value.x - newGridWidth / 2;
-      const newGridHeight = containerHeight.value / newZoomLevel;
-      const newMinY = gridOrigin.value.y - newGridHeight / 2;
-      const pointerXAtNewZoom =
-        newMinX + containerPointerPos.value.x / newZoomLevel;
-      const pointerYAtNewZoom =
-        newMinY + containerPointerPos.value.y / newZoomLevel;
-
-      gridOrigin.value = {
-        x: gridOrigin.value.x - (pointerXAtNewZoom - gridPointerPos.value.x),
-        y: gridOrigin.value.y - (pointerYAtNewZoom - gridPointerPos.value.y),
-      };
+      zoomAtPoint(e.evt.deltaY, containerPointerPos.value, isTrackpadPinch);
     }
-    zoomLevel.value = newZoomLevel;
   } else {
     // pan
-    const panFactor = zoomLevel.value * ZOOM_PAN_FACTOR;
+    const panFactor = ZOOM_PAN_FACTOR / zoomLevel.value;
     gridOrigin.value = {
       x: gridOrigin.value.x + e.evt.deltaX * panFactor,
       y: gridOrigin.value.y + e.evt.deltaY * panFactor,
@@ -417,6 +398,32 @@ function onMouseWheel(e: KonvaEventObject<WheelEvent>) {
   }
 }
 
+function zoomAtPoint(delta: number, zoomPos: Vector2d, isPinchToZoom = false) {
+  // e.evt.metaKey
+  // zoom
+  if (!gridPointerPos.value) return;
+
+  const panSpeed = 0.001 * (isPinchToZoom ? 20 : 1) * zoomLevel.value;
+
+  let newZoomLevel = zoomLevel.value - delta * panSpeed;
+  if (newZoomLevel < MIN_ZOOM) newZoomLevel = MIN_ZOOM;
+  if (newZoomLevel > MAX_ZOOM) newZoomLevel = MAX_ZOOM;
+
+  const newGridWidth = containerWidth.value / newZoomLevel;
+  const newMinX = gridOrigin.value.x - newGridWidth / 2;
+  const newGridHeight = containerHeight.value / newZoomLevel;
+  const newMinY = gridOrigin.value.y - newGridHeight / 2;
+  const pointerXAtNewZoom = newMinX + zoomPos.x / newZoomLevel;
+  const pointerYAtNewZoom = newMinY + zoomPos.y / newZoomLevel;
+
+  gridOrigin.value = {
+    x: gridOrigin.value.x - (pointerXAtNewZoom - gridPointerPos.value.x),
+    y: gridOrigin.value.y - (pointerYAtNewZoom - gridPointerPos.value.y),
+  };
+
+  zoomLevel.value = newZoomLevel;
+}
+
 // not sure why but TS couldnt quite find the ResizeObserverCallback type...
 type ResizeObserverCallback = ConstructorParameters<typeof ResizeObserver>[0];
 const onResize: ResizeObserverCallback = (entries) => {
@@ -468,6 +475,12 @@ function onMountedAndReady() {
   window.addEventListener("mouseup", onMouseUp);
   window.addEventListener("keydown", onKeyDown);
   window.addEventListener("keyup", onKeyUp);
+  // window.addEventListener("pointerdown", onPointerDown);
+  // window.addEventListener("pointermove", onPointerMove);
+  // window.addEventListener("pointerup", onPointerUp);
+  // window.addEventListener("pointercancel", onPointerUp);
+  // window.addEventListener("pointerout", onPointerUp);
+  // window.addEventListener("pointerleave", onPointerUp);
 }
 
 onBeforeUnmount(() => {
@@ -476,6 +489,12 @@ onBeforeUnmount(() => {
   window.removeEventListener("mouseup", onMouseUp);
   window.removeEventListener("keydown", onKeyDown);
   window.removeEventListener("keyup", onKeyUp);
+  // window.removeEventListener("pointerdown", onPointerDown);
+  // window.removeEventListener("pointermove", onPointerMove);
+  // window.removeEventListener("pointerup", onPointerUp);
+  // window.removeEventListener("pointercancel", onPointerUp);
+  // window.removeEventListener("pointerout", onPointerUp);
+  // window.removeEventListener("pointerleave", onPointerUp);
   resizeObserver.unobserve(containerRef.value!);
 });
 
@@ -658,7 +677,7 @@ function checkIfDragStarted(_e: MouseEvent) {
   } else if (lastMouseDownElement.value instanceof DiagramEdgeData) {
     // not sure what dragging an edge means... maybe nothing?
     /* eslint-disable-next-line no-console */
-    console.log("dragging edge ?");
+    // console.log("dragging edge ?");
   } else if (
     lastMouseDownElement.value instanceof DiagramNodeData ||
     lastMouseDownElement.value instanceof DiagramGroupData
@@ -678,6 +697,41 @@ function checkIfDragStarted(_e: MouseEvent) {
   }
 }
 
+// Pointer events (for touch screens)
+// const pointerEventCache = {} as Record<number, PointerEvent>;
+// let previousPointerDiff: number | undefined;
+
+// function onPointerDown(e: PointerEvent) {
+//   pointerEventCache[e.pointerId] = e;
+// }
+
+// function onPointerMove(e: PointerEvent) {
+//   const events = _.values(pointerEventCache);
+//   if (events.length === 2 && events[0] && events[1]) {
+//     // time to zoom!
+//     const point1 = { x: events[0].clientX, y: events[0].clientY };
+//     const point2 = { x: events[1].clientX, y: events[1].clientY };
+//     const zoomCenter = pointAlongLinePct(point1, point2, 0.5);
+//     const newPointerDiff = vectorDistance(point1, point2);
+
+//     if (!previousPointerDiff) {
+//       previousPointerDiff = newPointerDiff;
+//     } else {
+//       const delta = newPointerDiff - previousPointerDiff;
+//       zoomAtPoint(delta, zoomCenter);
+//     }
+//     previousPointerDiff = newPointerDiff;
+//   }
+// }
+
+// function onPointerUp(e: PointerEvent) {
+//   delete pointerEventCache[e.pointerId];
+
+//   if (_.values(pointerEventCache).length < 2) {
+//     previousPointerDiff = undefined;
+//   }
+// }
+
 // Mode and cursor
 const cursor = computed(() => {
   if (dragToPanActive.value) return "grabbing";
diff --git a/app/web/src/components/Workspace/WorkspaceModelAndView.vue b/app/web/src/components/Workspace/WorkspaceModelAndView.vue
index 8bdd553976..12331b830f 100644
--- a/app/web/src/components/Workspace/WorkspaceModelAndView.vue
+++ b/app/web/src/components/Workspace/WorkspaceModelAndView.vue
@@ -48,8 +48,8 @@
   <ResizablePanel
     rememberSizeKey="details-panel"
     side="right"
-    :defaultSize="380"
-    :minSize="350"
+    :defaultSize="430"
+    :minSize="430"
   >
     <div class="h-full overflow-hidden relative">
       <EdgeDetailsPanel v-if="selectedEdge" />
diff --git a/app/web/src/components/layout/navbar/ChangeSetPanel.vue b/app/web/src/components/layout/navbar/ChangeSetPanel.vue
index 43586cd3bc..ae9423604f 100644
--- a/app/web/src/components/layout/navbar/ChangeSetPanel.vue
+++ b/app/web/src/components/layout/navbar/ChangeSetPanel.vue
@@ -31,9 +31,7 @@
           icon="trash"
           size="sm"
           :disabled="fixesStore.fixesAreInProgress || !selectedChangeSetName"
-          :requestStatus="abandonChangeSetReqStatus"
-          loadingText="Abandoning Changeset..."
-          @click="abandonChangesetHandler"
+          @click="abandonConfirmationModalRef.open"
         />
       </div>
     </div>
@@ -73,6 +71,37 @@
       </form>
     </Modal>
 
+    <Modal ref="abandonConfirmationModalRef" title="Abandon Change Set?">
+      <div class="flex flex-col gap-sm">
+        <div class="text-md">
+          Are you sure that you want to abandon change set
+          <span class="italic font-bold">"{{ selectedChangeSetName }}"</span>
+          and return to HEAD?
+        </div>
+        <div class="text-md">
+          Once abandoned, a change set cannot be recovered.
+        </div>
+        <div class="flex flex-row items-center gap-sm">
+          <VButton
+            class="flex-grow"
+            label="Confirm"
+            tone="action"
+            icon="trash"
+            :requestStatus="abandonChangeSetReqStatus"
+            loadingText="Abandoning Changeset..."
+            @click="abandonChangesetHandler"
+          />
+          <VButton
+            class="flex-grow"
+            label="Cancel"
+            tone="destructive"
+            icon="x"
+            @click="abandonConfirmationModalRef.close"
+          />
+        </div>
+      </div>
+    </Modal>
+
     <Wipe ref="wipeRef">
       <template #duringWipe>
         <VButton
@@ -118,7 +147,7 @@ import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import Wipe from "../../Wipe.vue";
 
 const dropdownRef = ref();
-
+const abandonConfirmationModalRef = ref();
 const wipeRef = ref<InstanceType<typeof Wipe>>();
 
 const changeSetsStore = useChangeSetsStore();
@@ -211,6 +240,8 @@ const abandonChangeSetReqStatus =
 async function abandonChangesetHandler() {
   await changeSetsStore.ABANDON_CHANGE_SET();
 
+  abandonConfirmationModalRef.value.close();
+
   if (route.name) {
     router.push({
       name: route.name,
@@ -222,5 +253,9 @@ async function abandonChangesetHandler() {
   }
 
   await changeSetsStore.FETCH_CHANGE_SETS();
+
+  // TODO(Wendy) - a temporary fix until we figure out and fix the bug where components from the abandoned changeset do not disappear from the diagram
+  // eslint-disable-next-line no-restricted-globals
+  location.reload();
 }
 </script>
diff --git a/app/web/src/store/components.store.ts b/app/web/src/store/components.store.ts
index 7596eb2556..93950cd178 100644
--- a/app/web/src/store/components.store.ts
+++ b/app/web/src/store/components.store.ts
@@ -425,6 +425,11 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
           modelIsEmpty(): boolean {
             return !this.diagramNodes.length;
           },
+          diagramIsEmpty(): boolean {
+            return (
+              this.modelIsEmpty && _.isEmpty(this.pendingInsertedComponents)
+            );
+          },
 
           diagramEdges(): DiagramEdgeDef[] {
             // Note(victor): The code below checks whether was only created implicitly, through inheritance from an aggregation frame