From 74f3e9d18b902df234bbc2e905d659053ad4a7a3 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Tue, 9 Sep 2025 20:12:19 -0500
Subject: [PATCH 01/15] fix workflow modal selector

---
 .../components/misc/WorkflowSelectDialog.vue  | 391 ++++++++++++++++--
 1 file changed, 347 insertions(+), 44 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index 6f9a509a..80303462 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -8,7 +8,7 @@
         <Divider></Divider>
         <div class="attached-workflow">
             <div v-if="attachedWorkflow">
-                <p class="attached-label">Selected:</p>
+                <p class="attached-label">Currently Active:</p>
                 <div class="attached-workflow-inner">
                     <Button
                         @click="clear"
@@ -39,35 +39,92 @@
             </InputGroup>
         </div>
         <Divider></Divider>
-        <div class="card-container">
-            <Card
-                v-for="workflow, id in searchResults"
-                style="width: 23rem"
-                :pt = "{
-                    root: {
-                        style:
-                            'transition: background-color 150ms linear;' +
-                            (hoveredCard === id
-                                ? 'background-color: var(--p-surface-100); cursor: pointer;'
-                                : '')
-                    }
-                }"
-                @click="setWorkflow(id)"
-                @mouseleave="hoveredCard = undefined"
-                @mouseenter="hoveredCard = id"
-            >
-                <template #title>{{
-                    id === attachedWorkflowId
-                    ? `${workflow.title} (Selected)`
-                    : workflow.title }}
-                </template>
-                <template #subtitle>{{ workflow.category }}</template>
-                <template #content>
-                    <p style="margin: 0">
-                        {{ workflow.human_description }}
-                    </p>
-                </template>
-            </Card>
+        
+        <div class="workflow-content">
+            <div class="workflow-list">
+                <Card
+                    v-for="workflow, id in searchResults"
+                    class="workflow-card"
+                    :class="{ 
+                        'selected-card': selectedWorkflowId === id,
+                        'current-card': id === attachedWorkflowId
+                    }"
+                    @click="selectWorkflow(id)"
+                    @mouseleave="hoveredCard = undefined"
+                    @mouseenter="hoveredCard = id"
+                >
+                    <template #title>
+                        <div class="card-title">
+                            {{ workflow.title }}
+                            <span v-if="id === attachedWorkflowId" class="current-badge">Current</span>
+                            <span v-if="workflow.category" class="category-badge">{{ workflow.category }}</span>
+                        </div>
+                    </template>
+                    <template #content>
+                        <p class="card-description">{{ workflow.human_description }}</p>
+                        <div class="card-meta">
+                            <span class="stages-count">{{ workflow.stages?.length || 0 }} stages</span>
+                        </div>
+                    </template>
+                </Card>
+            </div>
+            
+            <div class="workflow-preview" v-if="selectedWorkflow">
+                <Card class="preview-card">
+                    <template #title>{{ selectedWorkflow.title }}</template>
+                    <template #subtitle>
+                        <div class="preview-badges">
+                            <span v-if="selectedWorkflow.category" class="category-badge large">{{ selectedWorkflow.category }}</span>
+                            <span class="stages-badge">{{ selectedWorkflow.stages?.length || 0 }} stages</span>
+                        </div>
+                    </template>
+                    <template #content>
+                        <div class="preview-content">
+                            <div class="section">
+                                <h4>Description</h4>
+                                <p>{{ selectedWorkflow.human_description }}</p>
+                            </div>
+                            
+                            <div class="section" v-if="selectedWorkflow.example_prompt">
+                                <h4>Example Usage</h4>
+                                <div class="example-prompt">{{ selectedWorkflow.example_prompt }}</div>
+                            </div>
+                            
+                            <div class="section" v-if="selectedWorkflow.stages?.length">
+                                <h4>Workflow Stages</h4>
+                                <div class="stages-list">
+                                    <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
+                                        <span class="stage-number">{{ index + 1 }}</span>
+                                        <span class="stage-name">{{ stage.name }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #footer>
+                        <div class="preview-actions">
+                            <Button 
+                                :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
+                                :disabled="selectedWorkflowId === attachedWorkflowId"
+                                @click="confirmSelection"
+                                icon="pi pi-play"
+                                class="select-button"
+                            />
+                        </div>
+                    </template>
+                </Card>
+            </div>
+            
+            <div class="workflow-preview empty-preview" v-else>
+                <Card class="preview-card">
+                    <template #content>
+                        <div class="empty-state">
+                            <i class="pi pi-arrow-left" style="font-size: 2rem; color: var(--p-surface-400);"></i>
+                            <p>Select a workflow to see details</p>
+                        </div>
+                    </template>
+                </Card>
+            </div>
         </div>
     </div>
 </template>
@@ -84,7 +141,7 @@ const session = inject<BeakerSession>('session');
 const dialogRef: ComputedRef = inject('dialogRef');
 
 const hoveredCard = ref<undefined|string>(undefined);
-
+const selectedWorkflowId = ref<undefined|string>(undefined);
 const searchText = ref<undefined|string>(undefined);
 
 const setWorkflow = (id?: string) => {
@@ -93,25 +150,49 @@ const setWorkflow = (id?: string) => {
     dialogRef.value.close();
 }
 
+const selectWorkflow = (id: string) => {
+    selectedWorkflowId.value = id;
+}
+
+const confirmSelection = () => {
+    if (selectedWorkflowId.value) {
+        setWorkflow(selectedWorkflowId.value);
+    }
+}
+
 const clear = () => setWorkflow(null);
 
 const { workflows, attachedWorkflowId, attachedWorkflow } = useWorkflows(beakerSession);
 
-const searchResults = computed<{[key in string]: any}>(() => Object.fromEntries(
-    Object.entries(workflows.value).filter(([_, workflow]) =>
-        searchText.value === ""
-        || searchText.value === undefined
-        || [
-            workflow.human_description,
-            workflow.title,
-            workflow.category
-        ].join(' ').toLocaleLowerCase().includes(searchText.value.toLocaleLowerCase()))))
+const selectedWorkflow = computed(() => {
+    if (!selectedWorkflowId.value || !workflows.value) return null;
+    return workflows.value[selectedWorkflowId.value];
+});
+
+const searchResults = computed<{[key in string]: any}>(() => {
+    if (!workflows.value) return {};
+    return Object.fromEntries(
+        Object.entries(workflows.value).filter(([_, workflow]) =>
+            searchText.value === ""
+            || searchText.value === undefined
+            || [
+                workflow.human_description,
+                workflow.title,
+                workflow.category
+            ].join(' ').toLocaleLowerCase().includes(searchText.value.toLocaleLowerCase()))
+    );
+});
 
 </script>
 
 <style>
 .workflow-dialog {
-    width: 48rem;
+    width: 80vw;
+    max-width: 1200px;
+    height: 80vh;
+    max-height: 800px;
+    display: flex;
+    flex-direction: column;
 
     p {
         margin-top: 0.75rem;
@@ -128,17 +209,239 @@ const searchResults = computed<{[key in string]: any}>(() => Object.fromEntries(
             gap: 1rem;
         }
     }
+    
     .attached-label {
         font-weight: 600;
     }
-    .card-container {
+    
+    .workflow-content {
+        display: flex;
+        flex: 1;
+        gap: 1.5rem;
+        min-height: 0;
+    }
+    
+    .workflow-list {
+        flex: 1;
         display: flex;
-        max-height: 24rem;
+        flex-direction: column;
+        gap: 0.75rem;
         overflow-y: auto;
-        flex-direction: row;
+        padding-right: 0.5rem;
+        min-width: 0;
+    }
+    
+    .workflow-card {
+        cursor: pointer;
+        transition: all 150ms ease;
+        border: 2px solid transparent;
+        
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        
+        &.selected-card {
+            border-color: var(--p-primary-color);
+            background: var(--p-primary-50);
+        }
+        
+        &.current-card {
+            border-color: var(--p-green-500);
+            background: var(--p-green-50);
+        }
+    }
+    
+    .card-title {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
         flex-wrap: wrap;
+        font-size: 1.1rem;
+        font-weight: 600;
+    }
+    
+    .current-badge {
+        background: var(--p-green-500);
+        color: white;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+    
+    .category-badge {
+        background: var(--p-surface-200);
+        color: var(--p-surface-700);
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        
+        &.large {
+            font-size: 0.85rem;
+            padding: 0.3rem 0.7rem;
+        }
+    }
+    
+    .card-description {
+        margin: 0.5rem 0;
+        line-height: 1.4;
+        color: var(--p-text-color-secondary);
+    }
+    
+    .card-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 0.5rem;
+    }
+    
+    .stages-count {
+        font-size: 0.85rem;
+        color: var(--p-text-color-secondary);
+        font-weight: 500;
+    }
+    
+    .workflow-preview {
+        flex: 1.2;
+        min-width: 400px;
+    }
+    
+    .preview-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .preview-badges {
+        display: flex;
         gap: 0.5rem;
+        align-items: center;
+        margin-top: 0.5rem;
+    }
+    
+    .stages-badge {
+        background: var(--p-primary-100);
+        color: var(--p-primary-700);
+        padding: 0.3rem 0.7rem;
+        border-radius: 4px;
+        font-size: 0.85rem;
+        font-weight: 500;
+    }
+    
+    .preview-content {
+        flex: 1;
+    }
+    
+    .section {
+        margin-bottom: 1.5rem;
+        
+        h4 {
+            margin: 0 0 0.5rem 0;
+            color: var(--p-text-color);
+            font-size: 1rem;
+            font-weight: 600;
+        }
+        
+        p {
+            margin: 0;
+            line-height: 1.5;
+            color: var(--p-text-color-secondary);
+        }
+    }
+    
+    .example-prompt {
+        background: var(--p-surface-100);
+        border: 1px solid var(--p-surface-200);
+        border-radius: 6px;
+        padding: 0.75rem;
+        font-family: var(--p-font-family-monospace, monospace);
+        font-size: 0.9rem;
+        line-height: 1.4;
+        color: var(--p-text-color);
+    }
+    
+    .stages-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .stage-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
         padding: 0.5rem;
+        background: var(--p-surface-50);
+        border-radius: 4px;
+        border-left: 3px solid var(--p-primary-300);
+    }
+    
+    .stage-number {
+        background: var(--p-primary-color);
+        color: white;
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.8rem;
+        font-weight: 600;
+        flex-shrink: 0;
+    }
+    
+    .stage-name {
+        font-weight: 500;
+        color: var(--p-text-color);
+    }
+    
+    .preview-actions {
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 1rem;
+    }
+    
+    .select-button {
+        min-width: 200px;
+    }
+    
+    .empty-preview .preview-card {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .empty-state {
+        text-align: center;
+        color: var(--p-text-color-secondary);
+        
+        p {
+            margin-top: 0.5rem;
+            font-size: 1rem;
+        }
+    }
+}
+
+/* Responsive design */
+@media (max-width: 1000px) {
+    .workflow-dialog {
+        width: 95vw;
+        height: 90vh;
+        
+        .workflow-content {
+            flex-direction: column;
+        }
+        
+        .workflow-list {
+            max-height: 40vh;
+        }
+        
+        .workflow-preview {
+            min-width: unset;
+            flex: 1;
+        }
     }
 }
 </style>

From a82bb8e50c301e1ae35557750e1be73f431ac7c0 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Tue, 9 Sep 2025 20:34:39 -0500
Subject: [PATCH 02/15] streamline implementation of new workflow select dialog

---
 .../components/misc/WorkflowSelectDialog.vue  | 404 +++++++-----------
 1 file changed, 144 insertions(+), 260 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index 80303462..68cc5149 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -53,18 +53,16 @@
                     @mouseleave="hoveredCard = undefined"
                     @mouseenter="hoveredCard = id"
                 >
-                    <template #title>
-                        <div class="card-title">
-                            {{ workflow.title }}
-                            <span v-if="id === attachedWorkflowId" class="current-badge">Current</span>
-                            <span v-if="workflow.category" class="category-badge">{{ workflow.category }}</span>
+                    <template #title>{{ workflow.title }}</template>
+                    <template #subtitle>
+                        <div class="card-badges">
+                            <Badge v-if="id === attachedWorkflowId" value="Current" severity="success" />
+                            <Chip v-if="workflow.category" :label="workflow.category" class="p-chip-sm" />
                         </div>
                     </template>
                     <template #content>
-                        <p class="card-description">{{ workflow.human_description }}</p>
-                        <div class="card-meta">
-                            <span class="stages-count">{{ workflow.stages?.length || 0 }} stages</span>
-                        </div>
+                        <p>{{ workflow.human_description }}</p>
+                        <small class="text-muted">{{ workflow.stages?.length || 0 }} stages</small>
                     </template>
                 </Card>
             </div>
@@ -73,9 +71,9 @@
                 <Card class="preview-card">
                     <template #title>{{ selectedWorkflow.title }}</template>
                     <template #subtitle>
-                        <div class="preview-badges">
-                            <span v-if="selectedWorkflow.category" class="category-badge large">{{ selectedWorkflow.category }}</span>
-                            <span class="stages-badge">{{ selectedWorkflow.stages?.length || 0 }} stages</span>
+                        <div class="flex gap-2 mt-2">
+                            <Chip v-if="selectedWorkflow.category" :label="selectedWorkflow.category" />
+                            <Badge :value="`${selectedWorkflow.stages?.length || 0} stages`" severity="info" />
                         </div>
                     </template>
                     <template #content>
@@ -85,17 +83,22 @@
                                 <p>{{ selectedWorkflow.human_description }}</p>
                             </div>
                             
-                            <div class="section" v-if="selectedWorkflow.example_prompt">
-                                <h4>Example Usage</h4>
-                                <div class="example-prompt">{{ selectedWorkflow.example_prompt }}</div>
+                            <Divider v-if="selectedWorkflow.example_prompt" />
+                            <div v-if="selectedWorkflow.example_prompt" class="mb-4">
+                                <h4 class="text-lg font-semibold mb-2">Example Usage</h4>
+                                <div class="bg-surface-100 border border-surface-200 rounded p-3 font-mono text-sm">
+                                    {{ selectedWorkflow.example_prompt }}
+                                </div>
                             </div>
                             
-                            <div class="section" v-if="selectedWorkflow.stages?.length">
-                                <h4>Workflow Stages</h4>
-                                <div class="stages-list">
-                                    <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
-                                        <span class="stage-number">{{ index + 1 }}</span>
-                                        <span class="stage-name">{{ stage.name }}</span>
+                            <Divider v-if="selectedWorkflow.stages?.length" />
+                            <div v-if="selectedWorkflow.stages?.length" class="mb-4">
+                                <h4 class="text-lg font-semibold mb-3">Workflow Stages</h4>
+                                <div class="flex flex-col gap-2">
+                                    <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" 
+                                         class="flex items-center gap-3 p-2 bg-surface-50 rounded border-l-4 border-primary-300">
+                                        <Badge :value="index + 1" severity="contrast" class="w-6 h-6 rounded-full" />
+                                        <span class="font-medium">{{ stage.name }}</span>
                                     </div>
                                 </div>
                             </div>
@@ -132,7 +135,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref, watch, type ComputedRef } from "vue";
 import type { BeakerSessionComponentType } from '../session/BeakerSession.vue';
-import { Button, Divider, Card, InputGroup, InputGroupAddon, InputText} from "primevue";
+import { Button, Divider, Card, InputGroup, InputGroupAddon, InputText, Chip, Badge } from "primevue";
 import { type BeakerSession } from "beaker-kernel";
 import { useWorkflows } from '../../composables/useWorkflows';
 
@@ -185,263 +188,144 @@ const searchResults = computed<{[key in string]: any}>(() => {
 
 </script>
 
-<style>
+<style scoped>
 .workflow-dialog {
     width: 80vw;
     max-width: 1200px;
     height: 80vh;
     max-height: 800px;
+}
+
+.attached-workflow {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.attached-workflow-inner {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.attached-label {
+    font-weight: 600;
+}
+
+.workflow-content {
+    display: flex;
+    flex: 1;
+    gap: 1.5rem;
+    min-height: 0;
+}
+
+.workflow-list {
+    flex: 1;
     display: flex;
     flex-direction: column;
+    gap: 0.75rem;
+    overflow-y: auto;
+    padding-right: 0.5rem;
+}
 
-    p {
-        margin-top: 0.75rem;
-    }
+.workflow-card {
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border: 2px solid transparent;
+}
 
-    .attached-workflow {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 0rem;
-        .attached-workflow-inner {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-    }
-    
-    .attached-label {
-        font-weight: 600;
+.workflow-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.workflow-card.selected-card {
+    border-color: var(--p-primary-color);
+    background: var(--p-primary-50);
+}
+
+.workflow-card.current-card {
+    border-color: var(--p-green-500);
+    background: var(--p-green-50);
+}
+
+.card-badges {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-top: 0.25rem;
+}
+
+.workflow-preview {
+    flex: 1.2;
+    min-width: 400px;
+}
+
+.preview-card {
+    height: 100%;
+}
+
+.preview-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 1rem;
+}
+
+.select-button {
+    min-width: 200px;
+}
+
+.empty-state {
+    text-align: center;
+    color: var(--p-text-color-secondary);
+}
+
+/* Responsive */
+@media (max-width: 1000px) {
+    .workflow-dialog {
+        width: 95vw;
+        height: 90vh;
     }
     
     .workflow-content {
-        display: flex;
-        flex: 1;
-        gap: 1.5rem;
-        min-height: 0;
-    }
-    
-    .workflow-list {
-        flex: 1;
-        display: flex;
         flex-direction: column;
-        gap: 0.75rem;
-        overflow-y: auto;
-        padding-right: 0.5rem;
-        min-width: 0;
     }
     
-    .workflow-card {
-        cursor: pointer;
-        transition: all 150ms ease;
-        border: 2px solid transparent;
-        
-        &:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
-        
-        &.selected-card {
-            border-color: var(--p-primary-color);
-            background: var(--p-primary-50);
-        }
-        
-        &.current-card {
-            border-color: var(--p-green-500);
-            background: var(--p-green-50);
-        }
-    }
-    
-    .card-title {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        flex-wrap: wrap;
-        font-size: 1.1rem;
-        font-weight: 600;
-    }
-    
-    .current-badge {
-        background: var(--p-green-500);
-        color: white;
-        padding: 0.2rem 0.5rem;
-        border-radius: 4px;
-        font-size: 0.75rem;
-        font-weight: 500;
-    }
-    
-    .category-badge {
-        background: var(--p-surface-200);
-        color: var(--p-surface-700);
-        padding: 0.2rem 0.5rem;
-        border-radius: 4px;
-        font-size: 0.75rem;
-        font-weight: 500;
-        
-        &.large {
-            font-size: 0.85rem;
-            padding: 0.3rem 0.7rem;
-        }
-    }
-    
-    .card-description {
-        margin: 0.5rem 0;
-        line-height: 1.4;
-        color: var(--p-text-color-secondary);
-    }
-    
-    .card-meta {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 0.5rem;
-    }
-    
-    .stages-count {
-        font-size: 0.85rem;
-        color: var(--p-text-color-secondary);
-        font-weight: 500;
+    .workflow-list {
+        max-height: 40vh;
     }
     
     .workflow-preview {
-        flex: 1.2;
-        min-width: 400px;
-    }
-    
-    .preview-card {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .preview-badges {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        margin-top: 0.5rem;
-    }
-    
-    .stages-badge {
-        background: var(--p-primary-100);
-        color: var(--p-primary-700);
-        padding: 0.3rem 0.7rem;
-        border-radius: 4px;
-        font-size: 0.85rem;
-        font-weight: 500;
-    }
-    
-    .preview-content {
-        flex: 1;
-    }
-    
-    .section {
-        margin-bottom: 1.5rem;
-        
-        h4 {
-            margin: 0 0 0.5rem 0;
-            color: var(--p-text-color);
-            font-size: 1rem;
-            font-weight: 600;
-        }
-        
-        p {
-            margin: 0;
-            line-height: 1.5;
-            color: var(--p-text-color-secondary);
-        }
-    }
-    
-    .example-prompt {
-        background: var(--p-surface-100);
-        border: 1px solid var(--p-surface-200);
-        border-radius: 6px;
-        padding: 0.75rem;
-        font-family: var(--p-font-family-monospace, monospace);
-        font-size: 0.9rem;
-        line-height: 1.4;
-        color: var(--p-text-color);
-    }
-    
-    .stages-list {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    
-    .stage-item {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        padding: 0.5rem;
-        background: var(--p-surface-50);
-        border-radius: 4px;
-        border-left: 3px solid var(--p-primary-300);
-    }
-    
-    .stage-number {
-        background: var(--p-primary-color);
-        color: white;
-        width: 1.5rem;
-        height: 1.5rem;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 0.8rem;
-        font-weight: 600;
-        flex-shrink: 0;
-    }
-    
-    .stage-name {
-        font-weight: 500;
-        color: var(--p-text-color);
-    }
-    
-    .preview-actions {
-        display: flex;
-        justify-content: flex-end;
-        padding-top: 1rem;
-    }
-    
-    .select-button {
-        min-width: 200px;
-    }
-    
-    .empty-preview .preview-card {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .empty-state {
-        text-align: center;
-        color: var(--p-text-color-secondary);
-        
-        p {
-            margin-top: 0.5rem;
-            font-size: 1rem;
-        }
+        min-width: unset;
     }
 }
 
-/* Responsive design */
-@media (max-width: 1000px) {
-    .workflow-dialog {
-        width: 95vw;
-        height: 90vh;
-        
-        .workflow-content {
-            flex-direction: column;
-        }
-        
-        .workflow-list {
-            max-height: 40vh;
-        }
-        
-        .workflow-preview {
-            min-width: unset;
-            flex: 1;
-        }
-    }
-}
+/* Utility classes (if not available in PrimeVue) */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.items-center { align-items: center; }
+.mt-2 { margin-top: 0.5rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.rounded { border-radius: 0.375rem; }
+.border { border-width: 1px; }
+.border-l-4 { border-left-width: 4px; }
+.font-mono { font-family: monospace; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.text-sm { font-size: 0.875rem; }
+.text-lg { font-size: 1.125rem; }
+.text-muted { color: var(--p-text-color-secondary); }
+.w-6 { width: 1.5rem; }
+.h-6 { height: 1.5rem; }
+.rounded-full { border-radius: 9999px; }
+.bg-surface-50 { background-color: var(--p-surface-50); }
+.bg-surface-100 { background-color: var(--p-surface-100); }
+.border-surface-200 { border-color: var(--p-surface-200); }
+.border-primary-300 { border-color: var(--p-primary-300); }
 </style>

From 3b8c625f9c16c316e03708b4edd8d0cdd0eac4f2 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Tue, 9 Sep 2025 20:43:45 -0500
Subject: [PATCH 03/15] bring back workflow stage accents in modal

---
 .../components/misc/WorkflowSelectDialog.vue  | 44 ++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index 68cc5149..09b0974e 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -94,11 +94,10 @@
                             <Divider v-if="selectedWorkflow.stages?.length" />
                             <div v-if="selectedWorkflow.stages?.length" class="mb-4">
                                 <h4 class="text-lg font-semibold mb-3">Workflow Stages</h4>
-                                <div class="flex flex-col gap-2">
-                                    <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" 
-                                         class="flex items-center gap-3 p-2 bg-surface-50 rounded border-l-4 border-primary-300">
-                                        <Badge :value="index + 1" severity="contrast" class="w-6 h-6 rounded-full" />
-                                        <span class="font-medium">{{ stage.name }}</span>
+                                <div class="stages-list">
+                                    <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
+                                        <div class="stage-number">{{ index + 1 }}</div>
+                                        <span class="stage-name">{{ stage.name }}</span>
                                     </div>
                                 </div>
                             </div>
@@ -280,6 +279,41 @@ const searchResults = computed<{[key in string]: any}>(() => {
     color: var(--p-text-color-secondary);
 }
 
+.stages-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.stage-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: var(--p-surface-50);
+    border-radius: 8px;
+    border-left: 4px solid var(--p-primary-300);
+}
+
+.stage-number {
+    background: var(--p-primary-color);
+    color: white;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.stage-name {
+    font-weight: 500;
+    color: var(--p-text-color);
+}
+
 /* Responsive */
 @media (max-width: 1000px) {
     .workflow-dialog {

From 255c0407af8faf147c928f9d078a630692485b57 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Tue, 9 Sep 2025 21:00:19 -0500
Subject: [PATCH 04/15] fix workflow dialog styling

---
 .../components/misc/WorkflowSelectDialog.vue  | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index 09b0974e..b3bd4ade 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -92,11 +92,11 @@
                             </div>
                             
                             <Divider v-if="selectedWorkflow.stages?.length" />
-                            <div v-if="selectedWorkflow.stages?.length" class="mb-4">
-                                <h4 class="text-lg font-semibold mb-3">Workflow Stages</h4>
+                            <div v-if="selectedWorkflow.stages?.length" class="section">
+                                <h4>Workflow Stages</h4>
                                 <div class="stages-list">
                                     <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
-                                        <div class="stage-number">{{ index + 1 }}</div>
+                                        <span class="stage-number">{{ index + 1 }}</span>
                                         <span class="stage-name">{{ stage.name }}</span>
                                     </div>
                                 </div>
@@ -279,6 +279,23 @@ const searchResults = computed<{[key in string]: any}>(() => {
     color: var(--p-text-color-secondary);
 }
 
+.section {
+    margin-bottom: 1.5rem;
+}
+
+.section h4 {
+    margin: 0 0 0.5rem 0;
+    color: var(--p-text-color);
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.section p {
+    margin: 0;
+    line-height: 1.5;
+    color: var(--p-text-color-secondary);
+}
+
 .stages-list {
     display: flex;
     flex-direction: column;
@@ -289,22 +306,22 @@ const searchResults = computed<{[key in string]: any}>(() => {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    padding: 0.75rem;
+    padding: 0.5rem;
     background: var(--p-surface-50);
-    border-radius: 8px;
-    border-left: 4px solid var(--p-primary-300);
+    border-radius: 4px;
+    border-left: 3px solid var(--p-primary-300);
 }
 
 .stage-number {
     background: var(--p-primary-color);
     color: white;
-    width: 1.75rem;
-    height: 1.75rem;
+    width: 1.5rem;
+    height: 1.5rem;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.875rem;
+    font-size: 0.8rem;
     font-weight: 600;
     flex-shrink: 0;
 }

From 17712c6605fbe93d84406a767cf56841efd5c681 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Wed, 10 Sep 2025 10:31:02 -0500
Subject: [PATCH 05/15] split workflow modal into 2 columns with selector as a
 sticky footer

---
 .../components/misc/WorkflowSelectDialog.vue  | 108 ++++++++++++------
 1 file changed, 71 insertions(+), 37 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index b3bd4ade..e22bc9f9 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -68,42 +68,48 @@
             </div>
             
             <div class="workflow-preview" v-if="selectedWorkflow">
-                <Card class="preview-card">
-                    <template #title>{{ selectedWorkflow.title }}</template>
-                    <template #subtitle>
-                        <div class="flex gap-2 mt-2">
-                            <Chip v-if="selectedWorkflow.category" :label="selectedWorkflow.category" />
-                            <Badge :value="`${selectedWorkflow.stages?.length || 0} stages`" severity="info" />
-                        </div>
-                    </template>
-                    <template #content>
-                        <div class="preview-content">
-                            <div class="section">
-                                <h4>Description</h4>
-                                <p>{{ selectedWorkflow.human_description }}</p>
-                            </div>
-                            
-                            <Divider v-if="selectedWorkflow.example_prompt" />
-                            <div v-if="selectedWorkflow.example_prompt" class="mb-4">
-                                <h4 class="text-lg font-semibold mb-2">Example Usage</h4>
-                                <div class="bg-surface-100 border border-surface-200 rounded p-3 font-mono text-sm">
-                                    {{ selectedWorkflow.example_prompt }}
+                <div class="preview-container">
+                    <div class="preview-content-scrollable">
+                        <Card class="preview-card">
+                            <template #title>{{ selectedWorkflow.title }}</template>
+                            <template #subtitle>
+                                <div class="flex gap-2 mt-2">
+                                    <Chip v-if="selectedWorkflow.category" :label="selectedWorkflow.category" />
+                                    <Badge :value="`${selectedWorkflow.stages?.length || 0} stages`" severity="info" />
                                 </div>
-                            </div>
-                            
-                            <Divider v-if="selectedWorkflow.stages?.length" />
-                            <div v-if="selectedWorkflow.stages?.length" class="section">
-                                <h4>Workflow Stages</h4>
-                                <div class="stages-list">
-                                    <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
-                                        <span class="stage-number">{{ index + 1 }}</span>
-                                        <span class="stage-name">{{ stage.name }}</span>
+                            </template>
+                            <template #content>
+                                <div class="preview-content">
+                                    <div class="section">
+                                        <h4>Description</h4>
+                                        <p>{{ selectedWorkflow.human_description }}</p>
+                                    </div>
+                                    
+                                    <Divider v-if="selectedWorkflow.example_prompt" />
+                                    <div v-if="selectedWorkflow.example_prompt" class="mb-4">
+                                        <h4 class="text-lg font-semibold mb-2">Example Usage</h4>
+                                        <div class="bg-surface-100 border border-surface-200 rounded p-3 font-mono text-sm">
+                                            {{ selectedWorkflow.example_prompt }}
+                                        </div>
+                                    </div>
+                                    
+                                    <Divider v-if="selectedWorkflow.stages?.length" />
+                                    <div v-if="selectedWorkflow.stages?.length" class="section">
+                                        <h4>Workflow Stages</h4>
+                                        <div class="stages-list">
+                                            <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
+                                                <span class="stage-number">{{ index + 1 }}</span>
+                                                <span class="stage-name">{{ stage.name }}</span>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
-                    </template>
-                    <template #footer>
+                            </template>
+                        </Card>
+                    </div>
+                    
+                    <div class="sticky-footer">
+                        <Divider />
                         <div class="preview-actions">
                             <Button 
                                 :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
@@ -113,8 +119,8 @@
                                 class="select-button"
                             />
                         </div>
-                    </template>
-                </Card>
+                    </div>
+                </div>
             </div>
             
             <div class="workflow-preview empty-preview" v-else>
@@ -216,6 +222,7 @@ const searchResults = computed<{[key in string]: any}>(() => {
     flex: 1;
     gap: 1.5rem;
     min-height: 0;
+    height: 60vh;
 }
 
 .workflow-list {
@@ -260,14 +267,36 @@ const searchResults = computed<{[key in string]: any}>(() => {
     min-width: 400px;
 }
 
-.preview-card {
+.preview-container {
     height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.preview-content-scrollable {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.preview-card {
+    height: auto;
+}
+
+.sticky-footer {
+    flex-shrink: 0;
+    background: var(--p-surface-0);
+    padding: 1rem;
+    border-top: 1px solid var(--p-surface-200);
+}
+
+.sticky-footer .p-divider {
+    margin: 0 0 1rem 0;
 }
 
 .preview-actions {
     display: flex;
     justify-content: flex-end;
-    padding-top: 1rem;
 }
 
 .select-button {
@@ -348,6 +377,11 @@ const searchResults = computed<{[key in string]: any}>(() => {
     
     .workflow-preview {
         min-width: unset;
+        flex: 1;
+    }
+    
+    .sticky-footer {
+        padding: 0.75rem;
     }
 }
 

From 115bff7ad295def9cad49f9ef9f04bb4abe1e233 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Wed, 10 Sep 2025 10:38:45 -0500
Subject: [PATCH 06/15] fix sticky submit workflow button

---
 beaker-vue/src/components/misc/WorkflowSelectDialog.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index e22bc9f9..49825862 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -109,7 +109,6 @@
                     </div>
                     
                     <div class="sticky-footer">
-                        <Divider />
                         <div class="preview-actions">
                             <Button 
                                 :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
@@ -117,6 +116,7 @@
                                 @click="confirmSelection"
                                 icon="pi pi-play"
                                 class="select-button"
+                                size="large"
                             />
                         </div>
                     </div>
@@ -288,11 +288,9 @@ const searchResults = computed<{[key in string]: any}>(() => {
     background: var(--p-surface-0);
     padding: 1rem;
     border-top: 1px solid var(--p-surface-200);
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.sticky-footer .p-divider {
-    margin: 0 0 1rem 0;
-}
 
 .preview-actions {
     display: flex;

From 4e475fbea96b939505cbd37124a6640ed179681c Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Wed, 10 Sep 2025 10:46:40 -0500
Subject: [PATCH 07/15] fix sticky submit workflow button with absolute
 positioning

---
 .../components/misc/WorkflowSelectDialog.vue  | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index 49825862..6362cb16 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -103,22 +103,26 @@
                                             </div>
                                         </div>
                                     </div>
+                                    
+                                    <!-- Add bottom padding to prevent content from hiding behind sticky footer -->
+                                    <div style="height: 80px;"></div>
                                 </div>
                             </template>
                         </Card>
                     </div>
-                    
-                    <div class="sticky-footer">
-                        <div class="preview-actions">
-                            <Button 
-                                :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
-                                :disabled="selectedWorkflowId === attachedWorkflowId"
-                                @click="confirmSelection"
-                                icon="pi pi-play"
-                                class="select-button"
-                                size="large"
-                            />
-                        </div>
+                </div>
+                
+                <!-- Sticky footer completely outside the scrollable area -->
+                <div class="sticky-footer-absolute">
+                    <div class="preview-actions">
+                        <Button 
+                            :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
+                            :disabled="selectedWorkflowId === attachedWorkflowId"
+                            @click="confirmSelection"
+                            icon="pi pi-play"
+                            class="select-button"
+                            size="large"
+                        />
                     </div>
                 </div>
             </div>
@@ -265,6 +269,7 @@ const searchResults = computed<{[key in string]: any}>(() => {
 .workflow-preview {
     flex: 1.2;
     min-width: 400px;
+    position: relative;
 }
 
 .preview-container {
@@ -283,12 +288,16 @@ const searchResults = computed<{[key in string]: any}>(() => {
     height: auto;
 }
 
-.sticky-footer {
-    flex-shrink: 0;
+.sticky-footer-absolute {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
     background: var(--p-surface-0);
     padding: 1rem;
     border-top: 1px solid var(--p-surface-200);
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
 }
 
 
@@ -378,7 +387,7 @@ const searchResults = computed<{[key in string]: any}>(() => {
         flex: 1;
     }
     
-    .sticky-footer {
+    .sticky-footer-absolute {
         padding: 0.75rem;
     }
 }

From 79b8ecf00483858e0c61b6f0f4b3a3bd1ef593f0 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Wed, 10 Sep 2025 10:56:09 -0500
Subject: [PATCH 08/15] another fix attempt

---
 .../components/misc/WorkflowSelectDialog.vue  | 87 ++++++++-----------
 1 file changed, 37 insertions(+), 50 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index 6362cb16..b716fc79 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -68,52 +68,48 @@
             </div>
             
             <div class="workflow-preview" v-if="selectedWorkflow">
-                <div class="preview-container">
-                    <div class="preview-content-scrollable">
-                        <Card class="preview-card">
-                            <template #title>{{ selectedWorkflow.title }}</template>
-                            <template #subtitle>
-                                <div class="flex gap-2 mt-2">
-                                    <Chip v-if="selectedWorkflow.category" :label="selectedWorkflow.category" />
-                                    <Badge :value="`${selectedWorkflow.stages?.length || 0} stages`" severity="info" />
+                <!-- Scrollable content area -->
+                <div class="preview-content-scrollable">
+                    <Card class="preview-card">
+                        <template #title>{{ selectedWorkflow.title }}</template>
+                        <template #subtitle>
+                            <div class="flex gap-2 mt-2">
+                                <Chip v-if="selectedWorkflow.category" :label="selectedWorkflow.category" />
+                                <Badge :value="`${selectedWorkflow.stages?.length || 0} stages`" severity="info" />
+                            </div>
+                        </template>
+                        <template #content>
+                            <div class="preview-content">
+                                <div class="section">
+                                    <h4>Description</h4>
+                                    <p>{{ selectedWorkflow.human_description }}</p>
                                 </div>
-                            </template>
-                            <template #content>
-                                <div class="preview-content">
-                                    <div class="section">
-                                        <h4>Description</h4>
-                                        <p>{{ selectedWorkflow.human_description }}</p>
+                                
+                                <Divider v-if="selectedWorkflow.example_prompt" />
+                                <div v-if="selectedWorkflow.example_prompt" class="mb-4">
+                                    <h4 class="text-lg font-semibold mb-2">Example Usage</h4>
+                                    <div class="bg-surface-100 border border-surface-200 rounded p-3 font-mono text-sm">
+                                        {{ selectedWorkflow.example_prompt }}
                                     </div>
-                                    
-                                    <Divider v-if="selectedWorkflow.example_prompt" />
-                                    <div v-if="selectedWorkflow.example_prompt" class="mb-4">
-                                        <h4 class="text-lg font-semibold mb-2">Example Usage</h4>
-                                        <div class="bg-surface-100 border border-surface-200 rounded p-3 font-mono text-sm">
-                                            {{ selectedWorkflow.example_prompt }}
-                                        </div>
-                                    </div>
-                                    
-                                    <Divider v-if="selectedWorkflow.stages?.length" />
-                                    <div v-if="selectedWorkflow.stages?.length" class="section">
-                                        <h4>Workflow Stages</h4>
-                                        <div class="stages-list">
-                                            <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
-                                                <span class="stage-number">{{ index + 1 }}</span>
-                                                <span class="stage-name">{{ stage.name }}</span>
-                                            </div>
+                                </div>
+                                
+                                <Divider v-if="selectedWorkflow.stages?.length" />
+                                <div v-if="selectedWorkflow.stages?.length" class="section">
+                                    <h4>Workflow Stages</h4>
+                                    <div class="stages-list">
+                                        <div v-for="(stage, index) in selectedWorkflow.stages" :key="index" class="stage-item">
+                                            <span class="stage-number">{{ index + 1 }}</span>
+                                            <span class="stage-name">{{ stage.name }}</span>
                                         </div>
                                     </div>
-                                    
-                                    <!-- Add bottom padding to prevent content from hiding behind sticky footer -->
-                                    <div style="height: 80px;"></div>
                                 </div>
-                            </template>
-                        </Card>
-                    </div>
+                            </div>
+                        </template>
+                    </Card>
                 </div>
                 
-                <!-- Sticky footer completely outside the scrollable area -->
-                <div class="sticky-footer-absolute">
+                <!-- Fixed footer that never scrolls -->
+                <div class="sticky-footer-flex">
                     <div class="preview-actions">
                         <Button 
                             :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
@@ -269,11 +265,6 @@ const searchResults = computed<{[key in string]: any}>(() => {
 .workflow-preview {
     flex: 1.2;
     min-width: 400px;
-    position: relative;
-}
-
-.preview-container {
-    height: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -288,16 +279,12 @@ const searchResults = computed<{[key in string]: any}>(() => {
     height: auto;
 }
 
-.sticky-footer-absolute {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+.sticky-footer-flex {
+    flex-shrink: 0;
     background: var(--p-surface-0);
     padding: 1rem;
     border-top: 1px solid var(--p-surface-200);
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
-    z-index: 10;
 }
 
 

From ddd2ffc108733b1cf9b93e40a938d57001b45181 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Wed, 10 Sep 2025 11:17:53 -0500
Subject: [PATCH 09/15] trying again with sticky submit on workflow modal

---
 .../components/misc/WorkflowSelectDialog.vue  | 48 +++++++++----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index b716fc79..ffe1f282 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -103,23 +103,23 @@
                                         </div>
                                     </div>
                                 </div>
+                                <!-- Add some bottom padding to ensure content doesn't get hidden behind floating button -->
+                                <div style="height: 80px;"></div>
                             </div>
                         </template>
                     </Card>
                 </div>
                 
-                <!-- Fixed footer that never scrolls -->
-                <div class="sticky-footer-flex">
-                    <div class="preview-actions">
-                        <Button 
-                            :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
-                            :disabled="selectedWorkflowId === attachedWorkflowId"
-                            @click="confirmSelection"
-                            icon="pi pi-play"
-                            class="select-button"
-                            size="large"
-                        />
-                    </div>
+                <!-- Floating action gutter - positioned absolutely within the preview panel -->
+                <div class="floating-action-gutter">
+                    <Button 
+                        :label="selectedWorkflowId === attachedWorkflowId ? 'Already Active' : `Start ${selectedWorkflow.title}`"
+                        :disabled="selectedWorkflowId === attachedWorkflowId"
+                        @click="confirmSelection"
+                        icon="pi pi-play"
+                        class="select-button"
+                        size="large"
+                    />
                 </div>
             </div>
             
@@ -265,32 +265,28 @@ const searchResults = computed<{[key in string]: any}>(() => {
 .workflow-preview {
     flex: 1.2;
     min-width: 400px;
-    display: flex;
-    flex-direction: column;
+    position: relative;
 }
 
 .preview-content-scrollable {
-    flex: 1;
+    height: 100%;
     overflow-y: auto;
-    min-height: 0;
 }
 
 .preview-card {
     height: auto;
 }
 
-.sticky-footer-flex {
-    flex-shrink: 0;
+.floating-action-gutter {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 10;
     background: var(--p-surface-0);
     padding: 1rem;
-    border-top: 1px solid var(--p-surface-200);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
-}
-
-
-.preview-actions {
-    display: flex;
-    justify-content: flex-end;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--p-surface-200);
 }
 
 .select-button {

From 56a4088241903783c6fbd323988dc0d29b8b0fb0 Mon Sep 17 00:00:00 2001
From: Brandon Rose <rose.brandon.m@gmail.com>
Date: Wed, 10 Sep 2025 11:46:34 -0500
Subject: [PATCH 10/15] fix positioning of submit button

---
 beaker-vue/src/components/misc/WorkflowSelectDialog.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
index ffe1f282..8c684081 100644
--- a/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
+++ b/beaker-vue/src/components/misc/WorkflowSelectDialog.vue
@@ -278,10 +278,10 @@ const searchResults = computed<{[key in string]: any}>(() => {
 }
 
 .floating-action-gutter {
-    position: absolute;
-    bottom: 1rem;
-    right: 1rem;
-    z-index: 10;
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 1000;
     background: var(--p-surface-0);
     padding: 1rem;
     border-radius: 8px;

From d127f75caf43595b82a6899dad1839138eb4e302 Mon Sep 17 00:00:00 2001
From: "J.Quiles" <joel@radcoding.com>
Date: Thu, 11 Sep 2025 16:01:48 -0400
Subject: [PATCH 11/15] Download as docx button, added functionality to
 workflow output pane. Needs `npm install`.

---
 beaker-vue/package-lock.json                  | 241 +++++++-
 beaker-vue/package.json                       |   2 +
 .../components/panels/WorkflowOutputPanel.vue | 121 +++-
 .../src/components/sidemenu/SideMenuPanel.vue |   1 +
 beaker-vue/src/utils/exportUtils.ts           | 532 ++++++++++++++++++
 5 files changed, 891 insertions(+), 6 deletions(-)
 create mode 100644 beaker-vue/src/utils/exportUtils.ts

diff --git a/beaker-vue/package-lock.json b/beaker-vue/package-lock.json
index f6aaeb06..cdadf0f2 100644
--- a/beaker-vue/package-lock.json
+++ b/beaker-vue/package-lock.json
@@ -30,9 +30,11 @@
         "content-disposition": "^0.5.4",
         "cookie": "^1.0.2",
         "cytoscape": "^3.31.2",
+        "docx": "^9.5.0",
         "escape-html": "^1.0.3",
         "filesize": "^10.1.6",
         "hash-sum": "^2.0.0",
+        "html2canvas": "^1.4.1",
         "isomorphic-fetch": "^3.0.0",
         "json5": "^2.2.3",
         "katex": "^0.16.22",
@@ -4578,6 +4580,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4999,6 +5010,12 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -5020,6 +5037,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5197,6 +5223,56 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/docx": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-9.5.1.tgz",
+      "integrity": "sha512-ABDI7JEirFD2+bHhOBlsGZxaG1UgZb2M/QMKhLSDGgVNhxDesTCDcP+qoDnDGjZ4EOXTRfUjUgwHVuZ6VSTfWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^24.0.1",
+        "hash.js": "^1.1.7",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.1.3",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "24.3.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz",
+      "integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.10.0"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/docx/node_modules/undici-types": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
+      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -6183,6 +6259,16 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "license": "MIT"
     },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -6237,6 +6323,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -6337,6 +6436,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
@@ -6376,6 +6481,12 @@
       "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
       "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg=="
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
@@ -6567,6 +6678,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -6827,6 +6944,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/katex": {
       "version": "0.16.22",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
@@ -6914,6 +7043,15 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/loader-utils": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
@@ -7098,6 +7236,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -7477,6 +7621,12 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/panel": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/panel/-/panel-6.2.0.tgz",
@@ -7879,6 +8029,12 @@
         "node": ">=12.11.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -7993,6 +8149,27 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -8580,6 +8757,12 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "license": "ISC"
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -8666,6 +8849,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8816,6 +9005,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -9062,6 +9266,15 @@
       "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
       "license": "MIT"
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -9374,9 +9587,17 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
@@ -10164,6 +10385,24 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "license": "MIT"
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/beaker-vue/package.json b/beaker-vue/package.json
index 5c3c999f..1ad644c3 100644
--- a/beaker-vue/package.json
+++ b/beaker-vue/package.json
@@ -48,9 +48,11 @@
     "content-disposition": "^0.5.4",
     "cookie": "^1.0.2",
     "cytoscape": "^3.31.2",
+    "docx": "^9.5.0",
     "escape-html": "^1.0.3",
     "filesize": "^10.1.6",
     "hash-sum": "^2.0.0",
+    "html2canvas": "^1.4.1",
     "isomorphic-fetch": "^3.0.0",
     "json5": "^2.2.3",
     "katex": "^0.16.22",
diff --git a/beaker-vue/src/components/panels/WorkflowOutputPanel.vue b/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
index 1c88ab17..9404e3b9 100644
--- a/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
+++ b/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
@@ -3,36 +3,147 @@
         <p v-if="!attachedWorkflow">
             No workflow selected. Select one above or ask the agent about which workflow could work for your task.
         </p>
-        <div class="final-response p-steppanel" v-html="finalResponse">
+
+        <div v-if="hasContent" class="export-button-container">
+            <button
+                @click="exportToDocx"
+                :disabled="isExporting"
+                class="export-button"
+                title="Export to DOCX"
+            >
+                <i v-if="!isExporting" class="pi pi-download"></i>
+                <i v-else class="pi pi-spin pi-spinner"></i>
+                <span class="export-button-text">{{ isExporting ? 'Exporting...' : 'Export DOCX' }}</span>
+            </button>
+        </div>
+
+        <div ref="finalResponseElement" class="final-response p-steppanel" v-html="finalResponse">
 
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from "vue";
+import { computed, inject, ref } from "vue";
 import type { BeakerSessionComponentType } from '../session/BeakerSession.vue';
 import { useWorkflows } from '../../composables/useWorkflows';
 import { marked } from "marked";
+import { DocumentExporter } from '../../utils/exportUtils';
 
 const beakerSession = inject<BeakerSessionComponentType>("beakerSession");
 const { attachedWorkflow, attachedWorkflowFinalResponse } = useWorkflows(beakerSession);
 
+const finalResponseElement = ref<HTMLElement>();
+const isExporting = ref(false);
+
 const finalResponse = computed(() => {
     const workflow_response = attachedWorkflowFinalResponse.value;
-    // clone the response before filtering empty rows on markdown tables
     let response = `${workflow_response}`;
     if (response === "") {
         response = "### No workflow output yet\nThis panel will be populated as the workflow stages complete."
     }
     response = response.split('\n').filter(line => !line.match(/^[|\s]+$/)).join('\n');
-    return marked.parse(response)
-})
+    let parsedResponse = marked.parse(response);
+    
+    return parsedResponse;
+});
+
+const hasContent = computed(() => {
+    const workflow_response = attachedWorkflowFinalResponse.value;
+    return workflow_response && workflow_response.trim() !== "";
+});
+
+const exportToDocx = async () => {
+    if (!finalResponseElement.value || !hasContent.value) {
+        return;
+    }
+
+    isExporting.value = true;
+
+    try {
+        const exporter = new DocumentExporter();
+        const title = attachedWorkflow.value?.title || 'Workflow Output';
+        await exporter.exportToDocx(finalResponseElement.value, title);
+    } catch (error) {
+        console.error('Error exporting DOCX:', error);
+    } finally {
+        isExporting.value = false;
+    }
+};
 
 </script>
 
 <style lang="scss">
 
+.export-button-container {
+    position: absolute;
+    top: 5px;
+    right: 0.75rem;
+    z-index: 10;
+}
+
+.export-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background-color: var(--p-primary-color);
+    color: var(--p-primary-contrast-color);
+    border: none;
+    border-radius: var(--p-border-radius);
+    cursor: pointer;
+    transition: all 0.3s;
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+
+    &:hover:not(:disabled) {
+        background-color: var(--p-primary-hover-color);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    i {
+        font-size: 1rem;
+        flex-shrink: 0;
+    }
+
+    .export-button-text {
+        transition: opacity 0.3s;
+    }
+}
+
+:global(.sidemenu.right) {
+    &:has(.workflow-container) {
+        container-type: inline-size;
+    }
+}
+
+@container (max-width: 600px) {
+    .export-button {
+        padding: 0.5rem;
+        
+        .export-button-text {
+            display: none;
+        }
+    }
+}
+
+.sidemenu.right {
+    &[style*="width: 1"] .export-button .export-button-text,
+    &[style*="width: 2"] .export-button .export-button-text {
+        display: none;
+    }
+    
+    &[style*="width: 1"] .export-button,
+    &[style*="width: 2"] .export-button {
+        padding: 0.5rem;
+    }
+}
+
 .final-response {
     h1 { font-size: 1.3rem; }
     h2 { font-size: 1.2rem; }
diff --git a/beaker-vue/src/components/sidemenu/SideMenuPanel.vue b/beaker-vue/src/components/sidemenu/SideMenuPanel.vue
index 4c33df55..bf9cd0d0 100644
--- a/beaker-vue/src/components/sidemenu/SideMenuPanel.vue
+++ b/beaker-vue/src/components/sidemenu/SideMenuPanel.vue
@@ -48,6 +48,7 @@ watch(props, (newProps) => {
 
 <style lang="scss">
 .side-panel {
+    position: relative;
     height: 100%;
     display: grid;
     grid:
diff --git a/beaker-vue/src/utils/exportUtils.ts b/beaker-vue/src/utils/exportUtils.ts
new file mode 100644
index 00000000..63797486
--- /dev/null
+++ b/beaker-vue/src/utils/exportUtils.ts
@@ -0,0 +1,532 @@
+import html2canvas from 'html2canvas';
+import { Document, Packer, Paragraph, ImageRun, LevelFormat, HeadingLevel, TextRun, IImageOptions, AlignmentType, convertInchesToTwip, INumberingOptions, Table, TableRow, TableCell, WidthType, TableLayoutType } from 'docx';
+
+export class DocumentExporter {
+
+  private getNumberingConfig(): INumberingOptions {
+    return {
+      config: [
+        {
+          reference: "bullet-list",
+          levels: [
+            {
+              level: 0,
+              format: LevelFormat.BULLET,
+              text: "•",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(0.5), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+            {
+              level: 1,
+              format: LevelFormat.BULLET,
+              text: "◦",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(1), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+          ],
+        },
+        {
+          reference: "numbered-list",
+          levels: [
+            {
+              level: 0,
+              format: LevelFormat.DECIMAL,
+              text: "%1.",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(0.5), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+            {
+              level: 1,
+              format: LevelFormat.LOWER_LETTER,
+              text: "%2.",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(1), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  async captureImages(container: HTMLElement): Promise<string[]> {
+    const images = container.querySelectorAll('img');
+    const imagePromises: Promise<string | null>[] = [];
+
+    images.forEach(img => {
+      imagePromises.push(this.captureImageAsBase64(img));
+    });
+
+    const results = await Promise.all(imagePromises);
+    return results.filter(result => result !== null) as string[];
+  }
+
+  private async captureImageAsBase64(img: HTMLImageElement): Promise<string | null> {
+    try {
+      const canvas = await html2canvas(img, {
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: null,
+        scale: 1,
+        logging: false,
+      });
+      return canvas.toDataURL('image/png');
+    } catch (error) {
+      console.error('Error capturing image:', error);
+      return null;
+    }
+  }
+
+  private getDocumentStyles() {
+    return {
+      paragraphStyles: [
+        {
+          id: "Normal",
+          name: "Normal",
+          basedOn: "Normal",
+          next: "Normal",
+          run: {
+            font: "Calibri",
+            size: 22,
+          },
+          paragraph: {
+            spacing: {
+              before: 120,
+              after: 120,
+            },
+          },
+        },
+        {
+          id: "ListParagraph",
+          name: "List Paragraph",
+          basedOn: "Normal",
+          run: {
+            font: "Calibri",
+            size: 22,
+          },
+          paragraph: {
+            spacing: {
+              before: 60,
+              after: 60,
+            },
+          },
+        },
+      ],
+    };
+  }
+
+  async exportToDocx(elementDOM: HTMLElement, title: string): Promise<void> {
+    const doc = new Document({
+      numbering: this.getNumberingConfig(),
+      styles: this.getDocumentStyles(),
+      sections: [{
+        properties: {},
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: title,
+                font: "Calibri",
+                size: 32,
+                bold: true,
+              }),
+            ],
+            heading: HeadingLevel.TITLE,
+            spacing: { after: 300 },
+          }),
+          
+          ...(await this.htmlToDocxParagraphs(elementDOM)),
+        ],
+      }],
+    });
+
+    const blob = await Packer.toBlob(doc);
+    this.downloadBlob(blob, `${title}.docx`);
+  }
+
+  private async htmlToDocxParagraphs(contentDiv: HTMLElement): Promise<(Paragraph | Table)[]> {
+    const elements: (Paragraph | Table)[] = [];
+
+    for (const element of Array.from(contentDiv.children)) {
+      await this.processElement(element, elements);
+    }
+
+    return elements;
+  }
+
+  private async processElement(element: Element, elements: (Paragraph | Table)[]): Promise<void> {
+    const tagName = element.tagName.toLowerCase();
+
+    switch (tagName) {
+      case 'h1':
+        const h1Text = this.extractTextFromElement(element);
+        if (h1Text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: h1Text,
+                font: "Calibri",
+                size: 32,
+                bold: true,
+                color: "263238",
+              }),
+            ],
+            heading: HeadingLevel.HEADING_1,
+            spacing: { before: 480, after: 240 },
+          }));
+        }
+        break;
+
+      case 'h2':
+        const h2Text = this.extractTextFromElement(element);
+        if (h2Text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: h2Text,
+                font: "Calibri",
+                size: 30,
+                bold: true,
+                color: "37474F",
+              }),
+            ],
+            heading: HeadingLevel.HEADING_2,
+            spacing: { before: 360, after: 180 },
+          }));
+        }
+        break;
+
+      case 'h3':
+        const h3Text = this.extractTextFromElement(element);
+        if (h3Text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: h3Text,
+                font: "Calibri",
+                size: 26,
+                bold: true,
+                color: "455A64",
+              }),
+            ],
+            heading: HeadingLevel.HEADING_3,
+            spacing: { before: 240, after: 120 },
+          }));
+        }
+        break;
+
+      case 'ul':
+        this.processListElement(element, elements, true, 0);
+        break;
+
+      case 'ol':
+        this.processListElement(element, elements, false, 0);
+        break;
+
+      case 'table':
+        this.processTableElement(element, elements);
+        break;
+
+      case 'img':
+        await this.processImageElement(element as HTMLImageElement, elements);
+        break;
+
+      case 'p':
+        const textRuns = this.extractFormattedTextRuns(element);
+        if (textRuns.length > 0) {
+          elements.push(new Paragraph({
+            children: textRuns,
+            style: "Normal",
+            spacing: { before: 120, after: 120 }
+          }));
+        }
+        break;
+
+      default:
+        if (element.children.length > 0) {
+          for (const child of Array.from(element.children)) {
+            await this.processElement(child, elements);
+          }
+        }
+        break;
+    }
+  }
+
+  private processTableElement(tableElement: Element, elements: (Paragraph | Table)[]): void {
+    const rows: TableRow[] = [];
+    
+    const tbody = tableElement.querySelector('tbody');
+    const thead = tableElement.querySelector('thead');
+    
+    const firstRow = tableElement.querySelector('tr');
+    let columnCount = 0;
+    if (firstRow) {
+      columnCount = firstRow.querySelectorAll('th, td').length;
+    }
+    
+    if (thead) {
+      const headerRows = thead.querySelectorAll('tr');
+      headerRows.forEach(row => {
+        const cells = row.querySelectorAll('th, td');
+        const tableCells: TableCell[] = [];
+        
+        cells.forEach(cell => {
+          const cellText = this.extractTextFromElement(cell);
+          tableCells.push(new TableCell({
+            children: [new Paragraph({
+              children: [new TextRun({
+                text: cellText,
+                font: "Calibri",
+                size: 22,
+                bold: true,
+              })],
+            })],
+          }));
+        });
+        
+        if (tableCells.length > 0) {
+          rows.push(new TableRow({
+            children: tableCells,
+          }));
+        }
+      });
+    }
+    
+    if (tbody) {
+      const bodyRows = tbody.querySelectorAll('tr');
+      bodyRows.forEach(row => {
+        const cells = row.querySelectorAll('th, td');
+        const tableCells: TableCell[] = [];
+        
+        cells.forEach(cell => {
+          const cellText = this.extractTextFromElement(cell);
+          tableCells.push(new TableCell({
+            children: [new Paragraph({
+              children: [new TextRun({
+                text: cellText,
+                font: "Calibri",
+                size: 22,
+              })],
+            })],
+          }));
+        });
+        
+        if (tableCells.length > 0) {
+          rows.push(new TableRow({
+            children: tableCells,
+          }));
+        }
+      });
+    }
+    
+    if (rows.length > 0) {
+      const table = new Table({
+        rows: rows,
+        columnWidths: Array(columnCount).fill(5000),
+        margins: {
+          top: 200,
+          bottom: 200,
+        },
+      });
+      elements.push(table);
+    }
+  }
+
+  private async processImageElement(imgElement: HTMLImageElement, elements: (Paragraph | Table)[]): Promise<void> {
+    try {
+      const imageData = await this.captureImageAsBase64(imgElement);
+      if (imageData) {
+        const imageBuffer = this.base64ToBuffer(imageData);
+        
+        const img = new Image();
+        img.src = imageData;
+        
+        await new Promise((resolve) => {
+          img.onload = resolve;
+        });
+
+        const originalWidth = img.width;
+        const originalHeight = img.height;
+        const aspectRatio = originalWidth / originalHeight;
+        
+        const maxWidth = 600;
+        const maxHeight = 450;
+        
+        let finalWidth: number;
+        let finalHeight: number;
+
+        if (aspectRatio > maxWidth / maxHeight) {
+          finalWidth = maxWidth;
+          finalHeight = maxWidth / aspectRatio;
+        } else {
+          finalHeight = maxHeight;
+          finalWidth = maxHeight * aspectRatio;
+        }
+
+        elements.push(new Paragraph({
+          children: [
+            new ImageRun({
+              data: imageBuffer,
+              transformation: {
+                width: finalWidth,
+                height: finalHeight,
+              },
+            } as IImageOptions),
+          ],
+          spacing: { before: 200, after: 200 },
+        }));
+      }
+    } catch (error) {
+      console.error('Error processing image:', error);
+      elements.push(new Paragraph({
+        children: [
+          new TextRun({
+            text: `[Image could not be processed: ${imgElement.src}]`,
+            font: "Calibri",
+            size: 22,
+            italics: true,
+          }),
+        ],
+      }));
+    }
+  }
+
+  private extractTextFromElement(element: Element): string {
+    return element.textContent?.trim() || '';
+  }
+
+  private extractFormattedTextRuns(element: Element): TextRun[] {
+    const textRuns: TextRun[] = [];
+    this.processTextNodes(element, textRuns);
+    return textRuns;
+  }
+
+  private processTextNodes(node: Node, textRuns: TextRun[]): void {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || '';
+      if (text.trim()) {
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+        }));
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as Element;
+      const tagName = element.tagName.toLowerCase();
+
+      if (tagName === 'br') {
+        textRuns.push(new TextRun({
+          text: '',
+          break: 1,
+        }));
+        return;
+      }
+
+      const text = element.textContent || '';
+      if (text.trim() && (tagName === 'strong' || tagName === 'b' || tagName === 'em' || tagName === 'i')) {
+        const isBold = tagName === 'strong' || tagName === 'b';
+        const isItalic = tagName === 'em' || tagName === 'i';
+
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+          bold: isBold,
+          italics: isItalic,
+        }));
+      } else {
+        Array.from(element.childNodes).forEach(child => {
+          this.processTextNodes(child, textRuns);
+        });
+      }
+    }
+  }
+
+  private processListElement(listElement: Element, elements: (Paragraph | Table)[], isBulletList: boolean, level: number = 0): void {
+    const numberingReference = isBulletList ? "bullet-list" : "numbered-list";
+    let isFirstListItem = true;
+    
+    Array.from(listElement.children).forEach((li) => {
+      if (li.tagName.toLowerCase() === 'li') {
+        const text = this.extractTextFromListItem(li);
+        if (text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: text,
+                font: "Calibri",
+                size: 22,
+              }),
+            ],
+            style: "ListParagraph",
+            numbering: {
+              reference: numberingReference,
+              level: level,
+            },
+            spacing: { 
+              before: isFirstListItem ? 240 : 60,
+              after: 60
+            }
+          }));
+          isFirstListItem = false;
+        }
+
+        const nestedLists = li.querySelectorAll(':scope > ul, :scope > ol');
+        nestedLists.forEach(nestedList => {
+          const isNestedBullet = nestedList.tagName.toLowerCase() === 'ul';
+          const shouldUseBullets = !isBulletList && isNestedBullet;
+          this.processListElement(
+            nestedList as Element, 
+            elements, 
+            shouldUseBullets, 
+            shouldUseBullets ? 0 : level + 1
+          );
+        });
+      }
+    });
+  }
+
+  private extractTextFromListItem(li: Element): string {
+    const clone = li.cloneNode(true) as Element;
+    const nestedLists = clone.querySelectorAll('ul, ol');
+    nestedLists.forEach(list => list.remove());
+    return this.extractTextFromElement(clone);
+  }
+
+  private base64ToBuffer(base64: string): Uint8Array {
+    const base64Data = base64.split(',')[1];
+    const binaryString = window.atob(base64Data);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes;
+  }
+
+  private downloadBlob(blob: Blob, filename: string): void {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+}
\ No newline at end of file

From 679f2ef131fd73401a7fef74c6e8426fda13da44 Mon Sep 17 00:00:00 2001
From: "J.Quiles" <joel@radcoding.com>
Date: Thu, 11 Sep 2025 16:09:31 -0400
Subject: [PATCH 12/15] workflow output html table has some <br> tags to create
 newlines between the fake bullets (its unicode, not html lists). Parsing
 those <br /> tags and adding newlines on the exported docx as well.

---
 beaker-vue/src/utils/exportUtils.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/beaker-vue/src/utils/exportUtils.ts b/beaker-vue/src/utils/exportUtils.ts
index 63797486..62cda413 100644
--- a/beaker-vue/src/utils/exportUtils.ts
+++ b/beaker-vue/src/utils/exportUtils.ts
@@ -286,11 +286,16 @@ export class DocumentExporter {
         const tableCells: TableCell[] = [];
         
         cells.forEach(cell => {
-          const cellText = this.extractTextFromElement(cell);
+          const cellRuns = this.extractFormattedTextRuns(cell);
           tableCells.push(new TableCell({
             children: [new Paragraph({
-              children: [new TextRun({
-                text: cellText,
+              children: cellRuns.length > 0 ? cellRuns.map(run => 
+                new TextRun({
+                  ...run,
+                  bold: true,
+                })
+              ) : [new TextRun({
+                text: this.extractTextFromElement(cell),
                 font: "Calibri",
                 size: 22,
                 bold: true,
@@ -314,11 +319,11 @@ export class DocumentExporter {
         const tableCells: TableCell[] = [];
         
         cells.forEach(cell => {
-          const cellText = this.extractTextFromElement(cell);
+          const cellRuns = this.extractFormattedTextRuns(cell);
           tableCells.push(new TableCell({
             children: [new Paragraph({
-              children: [new TextRun({
-                text: cellText,
+              children: cellRuns.length > 0 ? cellRuns : [new TextRun({
+                text: this.extractTextFromElement(cell),
                 font: "Calibri",
                 size: 22,
               })],

From 12c8800945bc33f12ca498ed051098439eee17fa Mon Sep 17 00:00:00 2001
From: "J.Quiles" <joel@radcoding.com>
Date: Thu, 11 Sep 2025 16:17:58 -0400
Subject: [PATCH 13/15] Fix type issues and "regression"

---
 beaker-vue/src/utils/exportUtils.ts | 69 ++++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 10 deletions(-)

diff --git a/beaker-vue/src/utils/exportUtils.ts b/beaker-vue/src/utils/exportUtils.ts
index 62cda413..1696651e 100644
--- a/beaker-vue/src/utils/exportUtils.ts
+++ b/beaker-vue/src/utils/exportUtils.ts
@@ -1,5 +1,6 @@
 import html2canvas from 'html2canvas';
-import { Document, Packer, Paragraph, ImageRun, LevelFormat, HeadingLevel, TextRun, IImageOptions, AlignmentType, convertInchesToTwip, INumberingOptions, Table, TableRow, TableCell, WidthType, TableLayoutType } from 'docx';
+import { Document, Packer, Paragraph, ImageRun, LevelFormat, HeadingLevel, TextRun, AlignmentType, convertInchesToTwip, Table, TableRow, TableCell, TableLayoutType } from 'docx';
+import type { IImageOptions, INumberingOptions } from 'docx';
 
 export class DocumentExporter {
 
@@ -286,16 +287,14 @@ export class DocumentExporter {
         const tableCells: TableCell[] = [];
         
         cells.forEach(cell => {
-          const cellRuns = this.extractFormattedTextRuns(cell);
+          // headers: use simpler approach that allows bold formatting
+          const cellText = this.extractTextFromElement(cell);
+          const cellRuns = this.createFormattedCellRuns(cell, true); // true = bold headers
+          
           tableCells.push(new TableCell({
             children: [new Paragraph({
-              children: cellRuns.length > 0 ? cellRuns.map(run => 
-                new TextRun({
-                  ...run,
-                  bold: true,
-                })
-              ) : [new TextRun({
-                text: this.extractTextFromElement(cell),
+              children: cellRuns.length > 0 ? cellRuns : [new TextRun({
+                text: cellText,
                 font: "Calibri",
                 size: 22,
                 bold: true,
@@ -319,7 +318,8 @@ export class DocumentExporter {
         const tableCells: TableCell[] = [];
         
         cells.forEach(cell => {
-          const cellRuns = this.extractFormattedTextRuns(cell);
+          const cellRuns = this.createFormattedCellRuns(cell, false); // false = not bold
+          
           tableCells.push(new TableCell({
             children: [new Paragraph({
               children: cellRuns.length > 0 ? cellRuns : [new TextRun({
@@ -421,6 +421,55 @@ export class DocumentExporter {
     return textRuns;
   }
 
+  private createFormattedCellRuns(element: Element, forceBold: boolean = false): TextRun[] {
+    const textRuns: TextRun[] = [];
+    this.processCellTextNodes(element, textRuns, forceBold);
+    return textRuns;
+  }
+
+  private processCellTextNodes(node: Node, textRuns: TextRun[], forceBold: boolean): void {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || '';
+      if (text.trim()) {
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+          bold: forceBold,
+        }));
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as Element;
+      const tagName = element.tagName.toLowerCase();
+
+      if (tagName === 'br') {
+        textRuns.push(new TextRun({
+          text: '',
+          break: 1,
+        }));
+        return;
+      }
+
+      const text = element.textContent || '';
+      if (text.trim() && (tagName === 'strong' || tagName === 'b' || tagName === 'em' || tagName === 'i')) {
+        const isBold = forceBold || tagName === 'strong' || tagName === 'b';
+        const isItalic = tagName === 'em' || tagName === 'i';
+
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+          bold: isBold,
+          italics: isItalic,
+        }));
+      } else {
+        Array.from(element.childNodes).forEach(child => {
+          this.processCellTextNodes(child, textRuns, forceBold);
+        });
+      }
+    }
+  }
+
   private processTextNodes(node: Node, textRuns: TextRun[]): void {
     if (node.nodeType === Node.TEXT_NODE) {
       const text = node.textContent || '';

From 96e9818f8da7ca6a9b3d92cae37db445ee01ec30 Mon Sep 17 00:00:00 2001
From: "J.Quiles" <joel@radcoding.com>
Date: Wed, 26 Nov 2025 17:34:28 -0500
Subject: [PATCH 14/15] updated package-lock after merge with dev

---
 beaker-vue/package-lock.json | 241 ++++++++++++++++++++++++++++++++++-
 1 file changed, 240 insertions(+), 1 deletion(-)

diff --git a/beaker-vue/package-lock.json b/beaker-vue/package-lock.json
index 601ec80b..dcdd189a 100644
--- a/beaker-vue/package-lock.json
+++ b/beaker-vue/package-lock.json
@@ -30,9 +30,11 @@
         "content-disposition": "^0.5.4",
         "cookie": "^1.0.2",
         "cytoscape": "^3.31.2",
+        "docx": "^9.5.0",
         "escape-html": "^1.0.3",
         "filesize": "^10.1.6",
         "hash-sum": "^2.0.0",
+        "html2canvas": "^1.4.1",
         "isomorphic-fetch": "^3.0.0",
         "json5": "^2.2.3",
         "katex": "^0.16.22",
@@ -4932,6 +4934,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5367,6 +5378,12 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -5388,6 +5405,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5565,6 +5591,56 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/docx": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-9.5.1.tgz",
+      "integrity": "sha512-ABDI7JEirFD2+bHhOBlsGZxaG1UgZb2M/QMKhLSDGgVNhxDesTCDcP+qoDnDGjZ4EOXTRfUjUgwHVuZ6VSTfWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^24.0.1",
+        "hash.js": "^1.1.7",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.1.3",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "24.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
+      "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/docx/node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -6577,6 +6653,16 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "license": "MIT"
     },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -6631,6 +6717,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -6731,6 +6830,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
@@ -6780,6 +6885,12 @@
       "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
       "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg=="
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
@@ -6971,6 +7082,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -7299,6 +7416,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/katex": {
       "version": "0.16.22",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
@@ -7386,6 +7515,15 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/loader-utils": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
@@ -7588,6 +7726,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -7999,6 +8143,12 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/panel": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/panel/-/panel-6.2.0.tgz",
@@ -8416,6 +8566,12 @@
         "node": ">=12.11.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -8547,6 +8703,27 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -9154,6 +9331,12 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/sax": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
+      "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -9240,6 +9423,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9407,6 +9596,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -9663,6 +9867,15 @@
       "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
       "license": "MIT"
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -9982,9 +10195,17 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
@@ -10841,6 +11062,24 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "license": "MIT"
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",

From b8ee859e3f410a94c4f3a8b8aa2070ae9eb907d0 Mon Sep 17 00:00:00 2001
From: "J.Quiles" <joel@radcoding.com>
Date: Wed, 26 Nov 2025 17:45:46 -0500
Subject: [PATCH 15/15] Fixing mobile sizing of export button (icon vs icon and
 label). Also exporting images when rendered from markdown (wrapped by a p
 tag.. now handled).

---
 .../components/panels/WorkflowOutputPanel.vue | 28 +++++++--------
 beaker-vue/src/utils/exportUtils.ts           | 36 +++++++++++++++----
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/beaker-vue/src/components/panels/WorkflowOutputPanel.vue b/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
index 5c0b209b..8d3a073b 100644
--- a/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
+++ b/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
@@ -45,7 +45,7 @@ const finalResponse = computed(() => {
         response = "### No workflow output yet\nThis panel will be populated as the workflow stages complete."
     }
     response = response.split('\n').filter(line => !line.match(/^[|\s]+$/)).join('\n');
-    let parsedResponse = marked.parse(response);
+    const parsedResponse = marked.parse(response);
     
     return parsedResponse;
 });
@@ -155,17 +155,18 @@ const handleImageClick = (event: MouseEvent) => {
     }
 
     .export-button-text {
+        display: inline;
         transition: opacity 0.3s;
     }
 }
 
-:global(.sidemenu.right) {
-    &:has(.workflow-container) {
-        container-type: inline-size;
-    }
+.workflow-container {
+    container-type: inline-size;
+    container-name: workflow-panel;
 }
 
-@container (max-width: 600px) {
+// Hide text when container is narrow (less space)
+@container workflow-panel (max-width: 600px) {
     .export-button {
         padding: 0.5rem;
         
@@ -175,15 +176,12 @@ const handleImageClick = (event: MouseEvent) => {
     }
 }
 
-.sidemenu.right {
-    &[style*="width: 1"] .export-button .export-button-text,
-    &[style*="width: 2"] .export-button .export-button-text {
-        display: none;
-    }
-    
-    &[style*="width: 1"] .export-button,
-    &[style*="width: 2"] .export-button {
-        padding: 0.5rem;
+// Keep text visible for all other sizes (medium and large)
+@container workflow-panel (min-width: 601px) {
+    .export-button {
+        .export-button-text {
+            display: inline;
+        }
     }
 }
 
diff --git a/beaker-vue/src/utils/exportUtils.ts b/beaker-vue/src/utils/exportUtils.ts
index 1696651e..fd576cc3 100644
--- a/beaker-vue/src/utils/exportUtils.ts
+++ b/beaker-vue/src/utils/exportUtils.ts
@@ -248,13 +248,35 @@ export class DocumentExporter {
         break;
 
       case 'p':
-        const textRuns = this.extractFormattedTextRuns(element);
-        if (textRuns.length > 0) {
-          elements.push(new Paragraph({
-            children: textRuns,
-            style: "Normal",
-            spacing: { before: 120, after: 120 }
-          }));
+        // Check if paragraph contains images (common with markdown-rendered images)
+        const imagesInParagraph = element.querySelectorAll('img');
+        if (imagesInParagraph.length > 0) {
+          // Process all images in the paragraph
+          for (const img of Array.from(imagesInParagraph)) {
+            await this.processImageElement(img as HTMLImageElement, elements);
+          }
+          // Then process any remaining text content (excluding images)
+          const textContent = element.cloneNode(true) as Element;
+          const imgClones = textContent.querySelectorAll('img');
+          imgClones.forEach(img => img.remove());
+          const textRuns = this.extractFormattedTextRuns(textContent);
+          if (textRuns.length > 0) {
+            elements.push(new Paragraph({
+              children: textRuns,
+              style: "Normal",
+              spacing: { before: 120, after: 120 }
+            }));
+          }
+        } else {
+          // No image, process as normal paragraph
+          const textRuns = this.extractFormattedTextRuns(element);
+          if (textRuns.length > 0) {
+            elements.push(new Paragraph({
+              children: textRuns,
+              style: "Normal",
+              spacing: { before: 120, after: 120 }
+            }));
+          }
         }
         break;