ivoryos 1.0.9__py3-none-any.whl → 1.4.4__py3-none-any.whl

ivoryos/routes/design/templates/components/info_modal.html

@@ -0,0 +1,318 @@
+{# Tips Button - Fixed Position #}
+<button id="tipsButton" class="btn btn-info tips-button" data-bs-toggle="modal" data-bs-target="#tipsModal" title="View Workflow Tips">
+<i class="bi bi-question-circle"></i>
+</button>
+{# Tips Modal #}
+<div class="modal fade" id="tipsModal" tabindex="-1" aria-labelledby="tipsModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header bg-info text-white">
+                <h5 class="modal-title" id="tipsModalLabel">
+                    <i class="bi bi-lightbulb"></i> Workflow Building Tips
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="accordion" id="tipsAccordion">
+                    {# Tip 1: Dynamic Variables #}
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingOne">
+                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                            <i class="bi bi-hash me-2"></i> Dynamic Variables
+                            </button>
+                        </h2>
+                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#tipsAccordion">
+                            <div class="accordion-body">
+                                <p><strong>Use <code>#name</code> to make variables dynamic</strong></p>
+                                <p>When you want a parameter to be adjustable across multiple workflow runs, use <code>#</code> followed by the parameter name in place of the actual value.</p>
+                                <div class="alert alert-success mb-0">
+                                    <strong>Example:</strong><br>
+                                    Instead of: <code>temperature = 300</code><br>
+                                    Use: <code>temperature = #temperature</code><br>
+                                    <small class="text-muted">This makes "temperature" a dynamic parameter that can be varied in parameter sweeps or optimization runs.</small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {# Tip 2: Repeat vs Dynamic #}
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingTwo">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                            <i class="bi bi-arrow-repeat me-2"></i> Repeat vs Dynamic Parameters
+                            </button>
+                        </h2>
+                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#tipsAccordion">
+                            <div class="accordion-body">
+                                <p><strong>Repeat is for static workflows only</strong></p>
+                                <ul>
+                                    <li><strong>Static (Repeat):</strong> Runs the exact same workflow multiple times with identical parameters</li>
+                                    <li><strong>Dynamic (#name):</strong> Automatically triggers the <span class="badge bg-primary">Parameter Sweep</span> option, allowing you to vary parameters across runs</li>
+                                </ul>
+                                <div class="alert alert-info mb-0">
+                                    <i class="bi bi-info-circle"></i> Use repeat when you want statistical averaging of identical runs. Use dynamic parameters (e.g., <code>#temperature</code>) when you want to explore different parameter values.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {# Tip 3: Parameter Sweep #}
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingThree">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                            <i class="bi bi-sliders me-2"></i> Parameter Sweep Mode
+                            </button>
+                        </h2>
+                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#tipsAccordion">
+                            <div class="accordion-body">
+                                <p><strong>Automatically enabled when using dynamic parameters</strong></p>
+                                <p>Parameter sweep allows you to systematically explore different combinations of parameter values.</p>
+                                <div class="alert alert-warning">
+                                    <strong>Triggered by:</strong> Using <code>#name</code> syntax (e.g., <code>#temperature</code>) in your workflow
+                                </div>
+                                <p class="mb-0"><strong>Use cases:</strong> Sensitivity analysis, parameter optimization, design space exploration</p>
+                            </div>
+                        </div>
+                    </div>
+                    {# Tip 4: Optimizer #}
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingFour">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                            <i class="bi bi-bullseye me-2"></i> Optimizer Mode
+                            </button>
+                        </h2>
+                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#tipsAccordion">
+                            <div class="accordion-body">
+                                <p><strong>Enabled when you have both dynamic parameters AND output values</strong></p>
+                                <p>The optimizer automatically finds the best parameter values to optimize your output metric.</p>
+                                <div class="alert alert-success">
+                                    <strong>Requirements:</strong>
+                                    <ul class="mb-0">
+                                        <li>At least one dynamic parameter using <code>#name</code> syntax (input)</li>
+                                        <li>At least one output value with "Save value as" name (objective function)</li>
+                                    </ul>
+                                </div>
+                                <p class="mt-2 mb-0"><small class="text-muted"><i class="bi bi-info-circle"></i> Note: Parameter sweep option remains available even in optimizer mode</small></p>
+                            </div>
+                        </div>
+                    </div>
+                    {# Tip 5: Output Values #}
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingFive">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
+                            <i class="bi bi-save me-2"></i> Saving Output Values
+                            </button>
+                        </h2>
+                        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#tipsAccordion">
+                            <div class="accordion-body">
+                                <p><strong>Use "Save value as" to capture important results</strong></p>
+                                <p>When you want to track or optimize a result from your workflow, give it a meaningful name in the "Save value as" field.</p>
+                                <div class="alert alert-info">
+                                    <strong>Naming conventions:</strong><br>
+                                    • Use descriptive names: <code>final_stress</code>, <code>total_energy</code>, <code>efficiency</code><br>
+                                    • Use underscores instead of spaces: <code>max_temperature</code> not <code>max temperature</code><br>
+                                    • Keep names concise but clear
+                                </div>
+                                <p class="mb-0"><small class="text-muted">Saved values become available for optimization and can be tracked across parameter sweeps.</small></p>
+                            </div>
+                        </div>
+                    </div>
+                    {# Tip 6: Batch Mode #}
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingSix">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
+                            <i class="bi bi-collection me-2"></i> Batch Mode Actions
+                            </button>
+                        </h2>
+                        <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#tipsAccordion">
+                            <div class="accordion-body">
+                                <p><strong>Mark steps as "Once per batch" to run them only once for multiple samples</strong></p>
+                                <p>Some actions apply to all samples at once (batch actions), while others must run for each individual sample (per-sample actions).</p>
+                                <div class="row">
+                                    <div class="col-md-6 mb-3">
+                                        <div class="card h-100">
+                                            <div class="card-header bg-light">
+                                                <strong>Workflow Steps</strong>
+                                            </div>
+                                            <div class="card-body">
+                                                <div class="workflow-left">
+                                                    <div class="step-box regular">Add Liquid<br><small>per-sample</small></div>
+                                                    <div class="arrow-down">↓</div>
+                                                    <div class="step-box regular">Add Solid<br><small>per-sample</small></div>
+                                                    <div class="arrow-down">↓</div>
+                                                    <div class="step-box batch">Heat Sample<br><small>batch action</small></div>
+                                                    <div class="arrow-down">↓</div>
+                                                    <div class="step-box regular">Analyze Sample<br><small>per-sample</small></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6 mb-3">
+                                        <div class="card h-100">
+                                            <div class="card-header bg-light">
+                                                <strong>Execution (n=3 samples)</strong>
+                                            </div>
+                                            <div class="card-body">
+                                                <div class="workflow-right">
+                                                    <div class="sample-group">
+                                                        <div class="step-box-small regular">Add Liquid S1</div>
+                                                        <div class="step-box-small regular">Add Liquid S2</div>
+                                                        <div class="step-box-small regular">Add Liquid S3</div>
+                                                    </div>
+                                                    <div class="arrow-down">↓</div>
+                                                    <div class="sample-group">
+                                                        <div class="step-box-small regular">Add Solid S1</div>
+                                                        <div class="step-box-small regular">Add Solid S2</div>
+                                                        <div class="step-box-small regular">Add Solid S3</div>
+                                                    </div>
+                                                    <div class="arrow-down">↓</div>
+                                                    <div class="step-box batch">Heat All Samples</div>
+                                                    <div class="arrow-down">↓</div>
+                                                    <div class="sample-group">
+                                                        <div class="step-box-small regular">Analyze S1</div>
+                                                        <div class="step-box-small regular">Analyze S2</div>
+                                                        <div class="step-box-small regular">Analyze S3</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="alert alert-warning mb-0">
+                                    <strong>Per-sample actions:</strong> Run individually for each sample (Add Liquid, Add Solid, Analyze)<br>
+                                    <strong>Batch actions:</strong> Run once for all samples together (Heat Sample)
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {# Tip 7: Best Practices #}
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingSeven">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
+                            <i class="bi bi-star me-2"></i> Best Practices
+                            </button>
+                        </h2>
+                        <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#tipsAccordion">
+                            <div class="accordion-body">
+                                <ul>
+                                    <li><strong>Name parameters clearly:</strong> Use descriptive names like <code>#mesh_size</code> instead of <code>#x</code></li>
+                                    <li><strong>Set reasonable ranges:</strong> Define min/max values that make physical sense for your problem</li>
+                                    <li><strong>Start simple:</strong> Begin with 1-2 parameters before adding more complexity</li>
+                                    <li><strong>Document outputs:</strong> Clearly label which outputs are optimization objectives</li>
+                                    <li><strong>Test first:</strong> Run a single workflow before launching sweeps or optimizations</li>
+                                    <li><strong>Use batch mode wisely:</strong> Mark setup steps as "once per batch" to avoid unnecessary repetition</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+    <style>
+        /* Tips button styling */
+        .tips-button {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            font-size: 24px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .tips-button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+        }
+
+        .tips-button i {
+            line-height: 1;
+        }
+
+
+        .accordion-body code {
+            background-color: #f8f9fa;
+            padding: 2px 6px;
+            border-radius: 3px;
+            color: #d63384;
+        }
+        /* Batch mode visual styling */
+        .workflow-left {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .workflow-right {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .sample-group {
+            display: flex;
+            gap: 8px;
+            padding: 10px;
+            background: #f8f9fa;
+            border-radius: 6px;
+            border: 1px dashed #dee2e6;
+        }
+
+        .step-box {
+            padding: 12px 20px;
+            border-radius: 6px;
+            font-size: 0.85em;
+            text-align: center;
+            min-width: 120px;
+        }
+
+        .step-box.regular {
+            background: white;
+            border: 2px solid #dee2e6;
+            color: #495057;
+        }
+
+        .step-box.batch {
+            background: #e7f3ff;
+            border: 2px solid #0d6efd;
+            color: #0d6efd;
+            font-weight: 600;
+        }
+
+        .step-box-small {
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-size: 0.75em;
+            text-align: center;
+            background: white;
+            border: 1px solid #dee2e6;
+            color: #495057;
+        }
+
+        .step-box-small.regular {
+            background: white;
+            border: 1px solid #dee2e6;
+        }
+
+        .arrow-down {
+            font-size: 1.5em;
+            color: #6c757d;
+            line-height: 1;
+        }
+
+        .arrow {
+            font-size: 1.2em;
+            color: #6c757d;
+        }
+    </style>
+</div>

ivoryos/routes/design/templates/components/instruments_panel.html

@@ -0,0 +1,88 @@
+{# Operations panel component #}
+<div style="margin-bottom: 4vh;"></div>
+<div class="accordion accordion-flush">
+    <div class="accordion-item design-control">
+        <h5 class="accordion-header">
+            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#flow" role="button" aria-expanded="false" aria-controls="collapseExample">
+                Flow control
+            </button>
+        </h5>
+        <div class="accordion-collapse collapse show" id="flow">
+            <ul class="list-group">
+                <button class="list-group-item list-group-item-action"
+                        type="button"
+                        name="device"
+                        value="flow_control"
+                        data-get-url="{{ url_for('design.get_operation_sidebar', instrument='flow_control') }}"
+                        onclick="updateInstrumentPanel(this)">
+                    Flow control
+                </button>
+            </ul>
+        </div>
+        <h5 class="accordion-header">
+            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#deck" role="button" aria-expanded="false" aria-controls="collapseExample">
+                Instruments
+            </button>
+        </h5>
+        <div class="accordion-collapse collapse show" id="deck">
+            <ul class="list-group">
+                {% for instrument in defined_variables %}
+                        <button class="list-group-item list-group-item-action"
+                                type="button"
+                                name="device"
+                                value="{{instrument}}"
+                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=instrument) }}"
+                                onclick="updateInstrumentPanel(this)">
+                            {{ instrument | format_name }}
+                        </button>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+    {% if block_variables %}
+        <div class="accordion-item  design-control">
+            <h5 class="accordion-header">
+                <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#block" role="button" aria-expanded="false" aria-controls="collapseExample">
+                    Methods
+                </button>
+            </h5>
+            <div class="accordion-collapse collapse show" id="block">
+                <ul class="list-group">
+                    {% for category in block_variables %}
+                        <button class="list-group-item list-group-item-action"
+                                type="button"
+                                name="device"
+                                value="{{category}}"
+                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=category) }}"
+                                onclick="updateInstrumentPanel(this)">
+                            {{ category|format_name }}
+                        </button>
+                    {% endfor%}
+                </ul>
+            </div>
+        </div>
+    {% endif %}
+    {% if local_variables %}
+        <div class="accordion-item  design-control">
+            <h5 class="accordion-header">
+                <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#local" role="button" aria-expanded="false" aria-controls="collapseExample">
+                    Temp instruments
+                </button>
+            </h5>
+            <div class="accordion-collapse collapse show" id="local">
+                <ul class="list-group">
+                    {% for instrument in local_variables %}
+                        <button class="list-group-item list-group-item-action"
+                                type="button"
+                                name="device"
+                                value="{{instrument}}"
+                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=instrument) }}"
+                                onclick="updateInstrumentPanel(this)">
+                            {{instrument}}
+                        </button>
+                    {% endfor%}
+                </ul>
+            </div>
+        </div>
+    {% endif %}
+</div> 

ivoryos/routes/design/templates/components/modals/drop_modal.html

@@ -0,0 +1,17 @@
+<div class="modal fade" id="dropModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="dropModalLabel">Configure Action</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Drop Position ID: <strong id="modalDropTarget"></strong></p>
+                <div id="modalFormFields"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>

ivoryos/routes/design/templates/components/modals/json_modal.html

@@ -0,0 +1,22 @@
+{# JSON import modal component #}
+<div class="modal fade" id="jsonModal" tabindex="-1" aria-labelledby="jsonModal" aria-hidden="true" >
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="jsonModal">Import from JSON</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="POST" action="{{ url_for('design.design_files.load_json') }}" enctype="multipart/form-data">
+                <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <input class="form-control" type="file" name="file" required="required">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button>
+                    <button type="submit" class="btn btn-primary"> Upload </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/new_script_modal.html

@@ -0,0 +1,17 @@
+{# New script modal component #}
+<div class="modal fade" id="newScriptModal" tabindex="-1" aria-labelledby="newScriptModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="newScriptModalLabel">Save your current editing!</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                The current editing won't be saved. Are you sure you want to proceed?
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Continue editing </button>
+                <button class="btn btn-danger" onclick="clearDraft()">Already saved, clear all</button>            </div>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/rename_modal.html

@@ -0,0 +1,23 @@
+{# Rename modal component #}
+<div class="modal fade" id="renameModal" tabindex="-1" aria-labelledby="renameModal" aria-hidden="true" >
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="renameModal">Rename your script</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form name="run_name" onsubmit="editScriptName(event)">
+            <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <label class="input-group-text" for="new-name">Run Name</label>
+                        <input class="form-control" type="text" name="new-name" id="new-name" value="{{ script['name'] }}" required="required">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button>
+                    <button type="submit" class="btn btn-primary"> Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals/saveas_modal.html

@@ -0,0 +1,27 @@
+{# Save as modal component #}
+<div class="modal fade" id="saveasModal" tabindex="-1" aria-labelledby="saveasModal" aria-hidden="true" >
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="saveasModal">Save your script as </h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="POST" name="save-as" action="{{ url_for('library.save_as') }}">
+                <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <label class="input-group-text" for="run_name">Run Name</label>
+                        <input class="form-control" type="text" name="run_name" id="run_name" placeholder="{{script['name']}}" required="required">
+                    </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" name="register_workflow" id="register_workflow">
+                        <label class="input-group-label" for="register_workflow">Register this workflow</label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button>
+                    <button type="submit"  class="btn btn-primary" > Save </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/components/modals.html

@@ -0,0 +1,6 @@
+{# Modals component for experiment builder #}
+{% include 'components/modals/new_script_modal.html' %}
+{% include 'components/modals/saveas_modal.html' %}
+{% include 'components/modals/rename_modal.html' %}
+{% include 'components/modals/json_modal.html' %}
+{% include 'components/modals/drop_modal.html' %} 

ivoryos/routes/design/templates/components/python_code_overlay.html

@@ -0,0 +1,56 @@
+{# Python code overlay component - Pure HTML #}
+<style>
+.code-overlay {
+    position: fixed;
+    right: 0;
+    top: 180px;
+    height: 100vh;
+    width: 400px;
+    z-index: 1000;
+    transition: transform 0.3s ease;
+    transform: translateX(100%);
+}
+
+.code-overlay.show {
+    transform: translateX(0);
+}
+</style>
+
+{% if session.get('show_code') %}
+<div id="pythonCodeOverlay" class="code-overlay bg-light border-start show">
+{% else %}
+<div id="pythonCodeOverlay" class="code-overlay bg-light border-start">
+{% endif %}
+    <div class="overlay-header d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
+        <strong>Python Code</strong>
+        <button class="btn btn-sm btn-outline-secondary" onclick="toggleCodeOverlay()">
+            <i class="bi bi-x-lg"></i>
+        </button>
+    </div>
+    <div class="overlay-content p-3">
+        <!-- Top toggles (Single / Batch) -->
+        <div class="btn-group mb-3">
+            <button type="button" class="btn btn-outline-primary mode-toggle active" data-mode="single">Single</button>
+            <button type="button" class="btn btn-outline-primary mode-toggle" data-mode="batch">Batch</button>
+        </div>
+
+{#        <!-- Secondary toggles (By Sample / By Step) TODO -->#}
+{#        <div class="btn-group mb-3" id="batch-options" style="display: none;">#}
+{#            <button type="button" class="btn btn-outline-secondary batch-toggle active" data-batch="sample">By Sample</button>#}
+{#            <button type="button" class="btn btn-outline-secondary batch-toggle" data-batch="step">By Step</button>#}
+{#        </div>#}
+
+        <!-- Code display -->
+        <pre><code id="python-code" class="language-python">Loading...</code></pre>
+
+        <!-- Action buttons -->
+        <div class="mt-2">
+            <button type="button" id="copy-code" class="btn btn-sm btn-outline-success">
+                <i class="bi bi-clipboard"></i> Copy
+            </button>
+            <button type="button" id="download-code" class="btn btn-sm btn-outline-primary">
+                <i class="bi bi-download"></i> Download
+            </button>
+        </div>
+    </div>
+</div>

ivoryos/routes/design/templates/components/sidebar.html

@@ -0,0 +1,15 @@
+{# Sidebar component for experiment builder #}
+<div class="instrument-panel" id="instrument-panel">
+    {% if instrument %}
+        <div class="instrument-methods" id="instrument-methods">
+        {% include 'components/actions_panel.html' %}
+        </div>
+    {% else %}
+        {# select deck if this is online#}
+        {% if off_line %}
+            {% include 'components/deck_selector.html' %}
+        {% endif %}
+
+        {% include 'components/instruments_panel.html' %}
+    {% endif %}
+</div>

ivoryos/routes/design/templates/components/text_to_code_panel.html

@@ -0,0 +1,20 @@
+{# Text-to-code panel component #}
+<div class="accordion-item text-to-code">
+    <h2 class="accordion-header">
+        <button class="accordion-button text-to-code" type="button" data-bs-toggle="collapse" data-bs-target="#text-to-code" aria-expanded="false" aria-controls="collapseExample">
+            Text-to-Code
+        </button>
+    </h2>
+    <div id="text-to-code" class="accordion-collapse collapse show" data-bs-parent="#accordionActions">
+        <div class="accordion-body">
+            <form role="form" method='POST' name="generate" id="generate" action="{{url_for('design.generate_code')}}">
+                <input type="hidden" id="instrument" name="instrument" value="{{instrument}}">
+                <textarea class="form-control" id="prompt" name="prompt" rows="6" aria-describedby="promptHelpBlock">{{ session['prompt'][instrument] if instrument in session['prompt'] else '' }}</textarea>
+                <div id="promptHelpBlock" class="form-text">
+                    This will overwrite current design.
+                </div>
+                <button type="submit" class="btn btn-dark" id="gen" name="gen">Generate</button>
+            </form>
+        </div>
+    </div>
+</div>