feat: implement workflow panel and enhance workspace layout

- Introduced a new WorkflowPanel component to streamline the workflow process with structured steps for user interaction.
- Updated App.vue to replace the InvestigationPane with the WorkflowPanel, improving the workspace layout and usability.
- Adjusted resizing logic for the workspace columns to enhance responsiveness and user experience.
- Enhanced FileLoader component with visual feedback for loading actions and improved styling.
- Refactored StructureExplorer to support automatic scrolling to the first matched structure, improving navigation efficiency.
- Updated WorkspaceHeader to include an export button, enabling users to export pipeline steps.

Author: ctrl-escp

src/App.vue

@@ -5,54 +5,39 @@ import InputCodeEditor from './components/InputCodeEditor.vue';
 import ToasterView from './components/ToasterView.vue';
 import WorkspaceHeader from './components/WorkspaceHeader.vue';
 import ExportPanel from './components/ExportPanel.vue';
-import InvestigationPane from './components/InvestigationPane.vue';
-import ContextPanel from './components/ContextPanel.vue';
+import WorkflowPanel from './components/WorkflowPanel.vue';
 
 const workspaceGrid = ref(null);
-const leftWidth = ref(352);
-const rightWidth = ref(384);
+const leftWidth = ref(0);
 
 const MIN_LEFT_WIDTH = 288;
-const MIN_CENTER_WIDTH = 544;
-const MIN_RIGHT_WIDTH = 320;
+const MIN_RIGHT_WIDTH = 288;
 const HANDLE_WIDTH = 10;
-const GRID_GAP = 16;
 
 let activeResize = null;
 
 const workspaceGridStyle = computed(() => ({
-  '--left-column-width': `${leftWidth.value}px`,
-  '--right-column-width': `${rightWidth.value}px`,
+  '--left-column-width': leftWidth.value > 0 ? `${leftWidth.value}px` : '1fr',
+  '--right-column-width': leftWidth.value > 0 ? 'minmax(18rem, 1fr)' : '1fr',
 }));
 
 function getAvailableContentWidth() {
   const containerWidth = workspaceGrid.value?.clientWidth ?? 0;
-  return containerWidth - (HANDLE_WIDTH * 2) - (GRID_GAP * 4);
+  return containerWidth - HANDLE_WIDTH - 8;
 }
 
 function clampLeftWidth(width) {
-  const maxWidth = getAvailableContentWidth() - MIN_CENTER_WIDTH - rightWidth.value;
+  const maxWidth = getAvailableContentWidth() - MIN_RIGHT_WIDTH;
   return Math.min(Math.max(width, MIN_LEFT_WIDTH), Math.max(MIN_LEFT_WIDTH, maxWidth));
 }
 
-function clampRightWidth(width) {
-  const maxWidth = getAvailableContentWidth() - MIN_CENTER_WIDTH - leftWidth.value;
-  return Math.min(Math.max(width, MIN_RIGHT_WIDTH), Math.max(MIN_RIGHT_WIDTH, maxWidth));
-}
-
 function updateResize(event) {
   if (!activeResize) {
     return;
   }
 
   const delta = event.clientX - activeResize.startX;
-
-  if (activeResize.side === 'left') {
-    leftWidth.value = clampLeftWidth(activeResize.startWidth + delta);
-    return;
-  }
-
-  rightWidth.value = clampRightWidth(activeResize.startWidth - delta);
+  leftWidth.value = clampLeftWidth(activeResize.startWidth + delta);
 }
 
 function stopResize() {
@@ -69,7 +54,7 @@ function startResize(side, event) {
   activeResize = {
     side,
     startX: event.clientX,
-    startWidth: side === 'left' ? leftWidth.value : rightWidth.value,
+    startWidth: leftWidth.value,
   };
 
   window.addEventListener('pointermove', updateResize);
@@ -89,30 +74,20 @@ onBeforeUnmount(() => {
       </section>
 
       <aside class="workspace-column left-column">
-        <investigation-pane />
+        <workflow-panel />
       </aside>
 
       <div
         class="resize-handle resize-left"
-        title="Drag to make the code editor narrower or wider"
+        title="Drag to resize the workflow and code panels"
         @pointerdown.prevent="startResize('left', $event)"
       ></div>
 
-      <section class="workspace-column center-column">
+      <section class="workspace-column right-column">
         <section class="workspace-panel code-panel">
           <input-code-editor />
         </section>
       </section>
-
-      <div
-        class="resize-handle resize-right"
-        title="Drag to make the code editor narrower or wider"
-        @pointerdown.prevent="startResize('right', $event)"
-      ></div>
-
-      <aside class="workspace-column right-column">
-        <context-panel />
-      </aside>
     </div>
   </main>
   <export-panel v-if="store.exportPanelOpen" />
@@ -132,13 +107,11 @@ onBeforeUnmount(() => {
   grid-template-columns:
     minmax(18rem, var(--left-column-width))
     10px
-    minmax(34rem, 1fr)
-    10px
-    minmax(20rem, var(--right-column-width));
+    var(--right-column-width);
   grid-template-rows: auto minmax(0, 1fr);
   grid-template-areas:
-    'header header header header right'
-    'left left-handle center right-handle right';
+    'header header header'
+    'left left-handle right';
   gap: .5rem;
   align-items: stretch;
   flex: 1;
@@ -156,10 +129,6 @@ onBeforeUnmount(() => {
   grid-area: left;
 }
 
-.center-column {
-  grid-area: center;
-}
-
 .right-column {
   grid-area: right;
 }
@@ -195,10 +164,6 @@ onBeforeUnmount(() => {
   grid-area: left-handle;
 }
 
-.resize-right {
-  grid-area: right-handle;
-}
-
 .workspace-panel {
   border: 1px solid var(--panel-border);
   border-radius: 14px;
@@ -207,7 +172,7 @@ onBeforeUnmount(() => {
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
 }
 
-.center-column {
+.right-column {
   min-width: 0;
   overflow: auto;
   padding-right: 0.1rem;
@@ -222,11 +187,10 @@ onBeforeUnmount(() => {
 
 @media (max-width: 1280px) {
   .workspace-grid {
-    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
+    grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
     grid-template-areas:
       'header header'
-      'left center'
-      'right right';
+      'left right';
   }
 
   .resize-handle {
@@ -242,10 +206,14 @@ onBeforeUnmount(() => {
 
   .workspace-grid {
     grid-template-columns: 1fr;
+    grid-template-areas:
+      'header'
+      'left'
+      'right';
   }
 
   .workspace-column,
-  .center-column {
+  .right-column {
     overflow: visible;
   }
 }

src/components/FileLoader.vue

@@ -11,6 +11,10 @@ const inputCodeEditorId = store.editorIds.inputCodeEditor;
 const fileInput = ref(null);
 const isOpen = ref(false);
 const showSamples = ref(false);
+const shouldHighlightLoad = computed(() =>
+  store.currentScriptKind === 'custom' &&
+  !store.isCurrentScriptModified,
+);
 const canClearEditor = computed(() => !!(
   store.getCurrentScriptContent().length ||
   store.isCurrentInputParsed() ||
@@ -101,6 +105,7 @@ function loadSample(sampleId) {
   <div class="file-loader">
     <button
       class="toolbar-btn icon-btn"
+      :class="{highlighted: shouldHighlightLoad}"
       type="button"
       title="Open script actions for loading, sampling, or clearing the current script"
       aria-label="Open script actions"
@@ -158,6 +163,7 @@ function loadSample(sampleId) {
 <style scoped>
 .file-loader {
   position: relative;
+  isolation: isolate;
 }
 
 .toolbar-btn {
@@ -170,11 +176,42 @@ function loadSample(sampleId) {
   cursor: pointer;
 }
 
+.toolbar-btn.highlighted {
+  border-color: rgba(0, 204, 255, 0.95);
+  background: rgba(0, 204, 255, 0.22);
+  box-shadow: 0 0 0 0 rgba(0, 204, 255, 0.7);
+  animation: pulse-glow 2s infinite;
+  position: relative;
+  z-index: 1;
+}
+
+.toolbar-btn.highlighted:hover,
+.toolbar-btn.highlighted:focus-visible {
+  border-color: rgba(0, 204, 255, 1);
+  background: rgba(0, 204, 255, 0.28);
+  outline: none;
+}
+
 .toolbar-icon {
   width: 1.2rem;
   height: 1.2rem;
 }
 
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 0 rgba(0, 204, 255, 0.7),
+      0 0 18px rgba(0, 204, 255, 0.32);
+  }
+
+  70% {
+    box-shadow:
+      0 0 0 15px rgba(0, 204, 255, 0),
+      0 0 24px rgba(0, 204, 255, 0.14);
+  }
+}
+
 .load-menu {
   position: absolute;
   top: calc(100% + 0.45rem);

src/components/StructureExplorer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue';
+import {computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue';
 import store from '../store';
 import IconSearch from './icons/IconSearch.vue';
 import IconTrash from './icons/IconTrash.vue';
@@ -24,6 +24,7 @@ const currentPage = ref(0);
 const exampleStructureId = ref('');
 const showMatchesOnly = ref(false);
 const showDefineStructure = ref(false);
+const structureList = ref(null);
 
 const categories = computed(() => [...new Set(
   store.availableKnownStructures.map((structure) => structure.category),
@@ -74,6 +75,8 @@ const activePreview = computed(() => store.getKnownStructureTransformPreview(act
 const exampleStructure = computed(() => store.getKnownStructureById(exampleStructureId.value));
 const canFindMatches = computed(() => store.hasPendingKnownStructureScan());
 const canClearResults = computed(() => store.hasKnownStructureResultsToClear());
+const firstMatchedStructureId = computed(() =>
+  visibleStructures.value.find((structure) => hasStructureMatches(structure))?.id ?? null);
 
 function toggleSelection(structureId) {
   const nextIds = store.selectedKnownStructureIds.includes(structureId)
@@ -204,6 +207,46 @@ function prevPage() {
   currentPage.value = currentPage.value <= 0 ? totalPages.value - 1 : currentPage.value - 1;
 }
 
+async function scrollFirstMatchedStructureIntoView() {
+  const targetStructureId = firstMatchedStructureId.value;
+
+  if (!targetStructureId) {
+    return;
+  }
+
+  const targetIndex = visibleStructures.value.findIndex((structure) => structure.id === targetStructureId);
+
+  if (targetIndex === -1) {
+    return;
+  }
+
+  const targetPage = Math.floor(targetIndex / PAGE_SIZE);
+
+  if (currentPage.value !== targetPage) {
+    currentPage.value = targetPage;
+  }
+
+  await nextTick();
+
+  const container = structureList.value;
+  const targetCard = container?.querySelector(`[data-structure-id="${targetStructureId}"]`);
+
+  if (!container || !targetCard) {
+    return;
+  }
+
+  const maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+  const targetScrollTop = Math.min(
+    Math.max(0, targetCard.offsetTop - container.offsetTop),
+    maxScrollTop,
+  );
+
+  container.scrollTo({
+    top: targetScrollTop,
+    behavior: 'smooth',
+  });
+}
+
 watch(
   [
     () => filters.search,
@@ -224,6 +267,17 @@ watch(totalPages, (nextTotalPages) => {
   }
 });
 
+watch(
+  () => store.knownStructureExecutionStatus.lastRunAt,
+  async (lastRunAt, previousLastRunAt) => {
+    if (!lastRunAt || lastRunAt === previousLastRunAt) {
+      return;
+    }
+
+    await scrollFirstMatchedStructureIntoView();
+  },
+);
+
 function handleWindowKeydown(event) {
   if (event.key === 'Escape' && exampleStructure.value) {
     closeExample();
@@ -336,10 +390,11 @@ onBeforeUnmount(() => {
       @complete="handleStructureCreated"
     />
 
-    <div v-else class="structure-list">
+    <div v-else ref="structureList" class="structure-list">
       <article
         v-for="structure in pagedStructures"
         :key="structure.id"
+        :data-structure-id="structure.id"
         class="structure-card"
         :class="{
           active: structure.id === store.activeKnownStructureId,