ivoryos 1.2.2__py3-none-any.whl → 1.2.4__py3-none-any.whl

ivoryos/__init__.py

@@ -6,7 +6,7 @@ from typing import Union
 from flask import Flask, redirect, url_for, g, Blueprint, session
 from flask_login import AnonymousUserMixin
 
-sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+# sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
 
 from ivoryos.config import Config, get_config
 from ivoryos.routes.auth.auth import auth, login_manager
@@ -25,7 +25,7 @@ from ivoryos.utils.global_config import GlobalConfig
 from ivoryos.optimizer.registry import OPTIMIZER_REGISTRY
 from ivoryos.utils.script_runner import ScriptRunner
 from ivoryos.version import __version__ as ivoryos_version
-from importlib.metadata import entry_points
+# from importlib.metadata import entry_points
 
 global_config = GlobalConfig()
 from sqlalchemy import event
@@ -210,22 +210,22 @@ def run(module=None, host="0.0.0.0", port=None, debug=None, llm_server=None, mod
     # return app
 
 
-def load_installed_plugins(app, socketio):
-    """
-    Dynamically load installed plugins and attach Flask-SocketIO.
-    """
-    plugin_names = []
-    for entry_point in entry_points().get("ivoryos.plugins", []):
-        plugin = entry_point.load()
-
-        # If the plugin has an `init_socketio()` function, pass socketio
-        if hasattr(plugin, 'init_socketio'):
-            plugin.init_socketio(socketio)
-
-        plugin_names.append(entry_point.name)
-        app.register_blueprint(getattr(plugin, entry_point.name), url_prefix=f"{url_prefix}/{entry_point.name}")
-
-    return plugin_names
+# def load_installed_plugins(app, socketio):
+#     """
+#     Dynamically load installed plugins and attach Flask-SocketIO.
+#     """
+#     plugin_names = []
+#     for entry_point in entry_points().get("ivoryos.plugins", []):
+#         plugin = entry_point.load()
+#
+#         # If the plugin has an `init_socketio()` function, pass socketio
+#         if hasattr(plugin, 'init_socketio'):
+#             plugin.init_socketio(socketio)
+#
+#         plugin_names.append(entry_point.name)
+#         app.register_blueprint(getattr(plugin, entry_point.name), url_prefix=f"{url_prefix}/{entry_point.name}")
+#
+#     return plugin_names
 
 
 def load_plugins(blueprints: Union[list, Blueprint], app, socketio):

ivoryos/routes/auth/templates/login.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{% block title %}IvoryOS | Login{% endblock %}
+
+
+{% block body %}
+    <div class= "login">
+        <div class="bg-white rounded shadow-sm flex-fill">
+            <div class="p-4" style="align-items: center">
+                <h5>Log in</h5>
+                <form role="form" method='POST' name="login" action="{{ url_for('auth.login') }}">
+                    <div class="input-group mb-3">
+                        <label class="input-group-text" for="username">Username</label>
+                        <input class="form-control" type="text" id="username" name="username">
+                    </div>
+                    <div class="input-group mb-3">
+                        <label class="input-group-text" for="password">Password</label>
+                        <input class="form-control" type="password" id="password" name="password">
+                    </div>
+                    <button type="submit" class="btn btn-secondary" name="login" style="width: 100%;">login</button>
+                </form>
+                <p class="message">Not registered? <a href="{{ url_for('auth.signup') }}">Create a new account</a>
+            </div>
+        </div>
+    </div>
+{% endblock %}

ivoryos/routes/auth/templates/signup.html

@@ -0,0 +1,32 @@
+{% extends 'base.html' %}
+{% block title %}IvoryOS | Signup{% endblock %}
+
+
+{% block body %}
+<div class= "login">
+    <div class="bg-white rounded shadow-sm flex-fill">
+        <div class="p-4" style="align: center">
+            <h5>Create a new account</h5>
+            <form role="form" method='POST' name="signup" action="{{ url_for('auth.signup') }}">
+
+                <div class="input-group mb-3">
+                    <label class="input-group-text" for="username">Username</label>
+                    <input class="form-control" type="text" id="username" name="username" required>
+                </div>
+                <div class="input-group mb-3">
+                    <label class="input-group-text" for="password">Password</label>
+                    <input class="form-control" type="password" id="password" name="password" required>
+                </div>
+{#                <div class="input-group mb-3">#}
+{#                    <label class="input-group-text" for="confirm_password">Confirm Password</label>#}
+{#                    <input class="form-control" type="confirm_password" id="confirm_password" name="confirm_password">#}
+{#                </div>#}
+
+                <button type="submit" class="btn btn-secondary" name="login" style="width: 100%;">Sign up</button>
+            </form>
+            <p class="message" >Already registered? <a href="{{ url_for('auth.login') }}">Sign In</a></p>
+        </div>
+    </div>
+</div>
+
+{% endblock %}

ivoryos/routes/control/templates/controllers.html

@@ -0,0 +1,166 @@
+{% extends 'base.html' %}
+{% block title %}IvoryOS | Controllers {% endblock %}
+
+{% block body %}
+<div id="overlay" class="overlay">
+    <div>
+        <h3 id="overlay-text"></h3>
+        <div class="spinner-border" role="status"></div>
+    </div>
+</div>
+<div class="container-fluid">
+  <div class="row">
+    <!-- Sidebar: Instruments -->
+    <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar py-3" style="height: 100vh; overflow-y: auto; position: sticky; top: 0;">
+      <div class="sidebar-sticky">
+        <!-- Deck Instruments -->
+        <div class="mb-4">
+          <div class="list-group">
+            {% for inst in defined_variables %}
+              <a class="list-group-item list-group-item-action d-flex align-items-center {% if instrument == inst %}active bg-primary text-white border-0{% else %}bg-light{% endif %}"
+                 href="{{ url_for('control.deck_controllers') }}?instrument={{ inst }}"
+                 style="border-radius: 0.5rem; margin-bottom: 0.5rem; transition: background 0.2s;">
+                <span class="flex-grow-1">{{ inst | format_name }}</span>
+                {% if instrument == inst %}
+                  <span class="ms-auto">&gt;</span>
+                {% endif %}
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+
+
+
+        <!-- Temp Instruments -->
+        {% if temp_variables %}
+          <div class="mb-4">
+            <h6 class="fw-bold text-secondary mb-2" style="letter-spacing: 1px;">Temp Instruments</h6>
+            <div class="list-group">
+              {% for inst in temp_variables %}
+                <a class="list-group-item list-group-item-action d-flex align-items-center {% if instrument == inst %}active bg-warning text-dark border-0{% else %}bg-light{% endif %}"
+                   href="{{ url_for('control.deck_controllers') }}?instrument={{ inst }}"
+                   style="border-radius: 0.5rem; margin-bottom: 0.5rem; transition: background 0.2s;">
+                  <span class="flex-grow-1">{{ inst | format_name }}</span>
+                  {% if instrument == inst %}
+                    <span class="ms-auto">&gt;</span>
+                  {% endif %}
+                </a>
+              {% endfor %}
+            </div>
+          </div>
+        {% endif %}
+        <!-- Action Buttons -->
+        <div class="mb-4">
+          <a href="{{ url_for('control.file.download_proxy', filetype='proxy') }}" class="btn btn-outline-primary w-100 mb-2">
+            Download proxy
+          </a>
+          <a href="{{ url_for('control.temp.new_controller') }}" class="btn btn-outline-success w-100">
+            New connection
+          </a>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main: Method Cards -->
+    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="height: 100vh; overflow-y: auto;">
+      {% if instrument%}
+{#        <h2 class="text-secondary">{{ instrument }} controller</h2>#}
+        <div class="grid-container" id="sortable-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1rem; width: 100%;">
+          {% set hidden = session.get('hidden_functions', {}) %}
+          {% set hidden_instrument = hidden.get(instrument, []) %}
+          {% for function, form in forms.items() %}
+            {% if function not in hidden_instrument %}
+              <div class="card" id="{{function}}" style="margin: 0;">
+                <div class="bg-white rounded shadow-sm h-100">
+                  <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" data-bs-placement="top" title='{{ form.hidden_name.description or "Docstring is not available" }}' ></i>
+                    <a href="{{ url_for('control.hide_function', instrument=instrument, function=function) }}"
+                       data-method="patch" data-payload='{"hidden":true}' class="toggle-visibility">
+                       <i style="float: right;" class="bi bi-eye-slash-fill text-muted" title="Hide function"></i>
+                    </a>
+                    <div class="form-control" style="border: none">
+                        <form role="form" method='POST' name="{{function}}" id="{{function}}" action="{{ url_for('control.deck_controllers') }}?instrument={{ instrument }}">
+                      <div class="form-group">
+                        {{ form.hidden_tag() }}
+                        {% for field in form %}
+                          {% if field.type not in ['CSRFTokenField', 'HiddenField'] %}
+                            <div class="input-group mb-3">
+                              <label class="input-group-text">{{ field.label.text | format_name }}</label>
+                              {% if field.type == "SubmitField" %}
+                                {{ field(class="btn btn-dark") }}
+                              {% elif field.type == "BooleanField" %}
+                                {{ field(class="form-check-input") }}
+                              {% else %}
+                                {{ field(class="form-control") }}
+                              {% endif %}
+                            </div>
+                          {% endif %}
+                        {% endfor %}
+                      </div>
+                      <div class="input-group mb-3">
+                        <button type="submit" name="{{ function }}" id="{{ function }}" class="form-control" style="background-color: #a5cece;">
+                            {{ function | format_name }}
+                        </button>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            {% endif %}
+          {% endfor %}
+        </div>
+        <!-- Hidden functions accordion -->
+        <div class="accordion accordion-flush" id="accordionActions" >
+          <div class="accordion-item">
+            <h4 class="accordion-header">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#hidden">
+                Hidden functions
+              </button>
+            </h4>
+          </div>
+          <div id="hidden" class="accordion-collapse collapse" data-bs-parent="#accordionActions">
+            <div class="accordion-body">
+              {% for function in hidden_instrument %}
+                <div>
+                  {{ function }}
+                    <a href="{{ url_for('control.hide_function', instrument=instrument, function=function) }}"
+                       data-method="patch" data-payload='{"hidden":false}' class="toggle-visibility">
+                       <i class="bi bi-eye-fill text-success" title="Show function"></i>
+                    </a>
+                </div>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+        <script>
+
+            document.querySelectorAll('.toggle-visibility').forEach(el => {
+              el.addEventListener('click', e => {
+                e.preventDefault();
+                const url = el.getAttribute('href');
+                const payload = JSON.parse(el.getAttribute('data-payload') || '{}');
+                fetch(url, {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json'
+                  },
+                  body: JSON.stringify(payload)
+                }).then(response => {
+                  if (response.ok) {
+                    location.reload(); // or update the DOM directly
+                  }
+                });
+              });
+            });
+
+          const saveOrderUrl = `{{ url_for('control.save_order', instrument=instrument) }}`;
+          const buttonIds = {{ session['card_order'][instrument] | tojson }};
+        </script>
+        <script src="{{ url_for('static', filename='js/sortable_card.js') }}"></script>
+        <script src="{{ url_for('static', filename='js/overlay.js') }}"></script>
+      {% else %}
+        <div class="alert alert-info mt-4">Select an instrument to view its methods.</div>
+      {% endif %}
+    </main>
+  </div>
+</div>
+{% endblock %}

ivoryos/routes/control/templates/controllers_new.html

@@ -0,0 +1,112 @@
+{% extends 'base.html' %}
+     {% block title %}IvoryOS | New devices{% endblock %}
+
+     {% block body %}
+     <div class="row">
+         <!-- Available Python API -->
+         <div class="col-xl-4 col-lg-4 col-md-6 mb-4">
+             <div class="card shadow-sm mb-4">
+                 <div class="card-header">
+                     <h5 class="mb-0">Available Python API</h5>
+                 </div>
+                 <div class="card-body">
+                     {% for instrument in api_variables %}
+                         <div class="card mb-2">
+                             <div class="card-body p-2">
+                                 <a href="{{ url_for('control.temp.new_controller', instrument=instrument) }}" class="text-dark stretched-link">{{ instrument }}</a>
+                             </div>
+                         </div>
+                     {% endfor %}
+                     <div class="card mt-3">
+                         <div class="card-body p-2">
+                             <a data-bs-toggle="modal" href="#importAPI" class="stretched-link">
+                                 <i class="bi bi-folder-plus"></i> Import API
+                             </a>
+                         </div>
+                     </div>
+                 </div>
+             </div>
+         </div>
+
+         <!-- Connecting Device -->
+         <div class="col-xl-5 col-lg-5 col-md-6 mb-4">
+             {% if device %}
+{#                 {{ device }}#}
+             <div class="card shadow-sm mb-4">
+                 <div class="card-header">
+                     <h5 class="mb-0">Connecting</h5>
+                 </div>
+                 <div class="card-body">
+                     <form role="form" method="POST" name="init" action="{{ url_for('control.temp.new_controller', instrument=instrument) }}">
+                         <div class="mb-3">
+                             <label class="form-label" for="device_name">Name this device</label>
+                             <input class="form-control" type="text" id="device_name" name="device_name" aria-describedby="nameHelpBlock" placeholder="e.g. {{device.__name__}}_1">
+                             <div id="nameHelpBlock" class="form-text">
+                                 Name your instrument, avoid names that are defined on the right
+                             </div>
+                         </div>
+                         {% for arg in device.__init__.__annotations__ %}
+                             {% if not arg == "return" %}
+                                 <div class="mb-3">
+                                     <label class="form-label" for="{{arg}}">{{arg}}</label>
+                                     <input class="form-control" type="text" id="{{arg}}" name="{{arg}}"
+                                         placeholder="{{device.__init__.__annotations__[arg].__name__}}"
+                                         value="{{args.parameters[arg].default if not args.parameters[arg].default.__name__ == '_empty' else ''}}">
+                                     {% if device.__init__.__annotations__[arg].__module__ is not in ["builtins", "typing"] %}
+                                         <a role="button" href="{{ url_for('control.temp.new_controller', instrument=device.__init__.__annotations__[arg].__name__) }}" class="btn btn-secondary btn-sm mt-2">Initialize {{device.__init__.__annotations__[arg].__name__}} first</a>
+                                     {% endif %}
+                                 </div>
+                             {% endif %}
+                         {% endfor %}
+                         <button type="submit" class="btn btn-dark">Connect</button>
+                     </form>
+                 </div>
+             </div>
+             {% endif %}
+         </div>
+
+         <!-- Defined Instruments -->
+         <div class="col-xl-3 col-lg-3 col-md-6 mb-4">
+             <div class="card shadow-sm mb-4">
+                 <div class="card-header">
+                     <h5 class="mb-0">Defined Instruments</h5>
+                 </div>
+                 <div class="card-body">
+                     {% if defined_variables %}
+                         <ul class="list-group">
+                             {% for instrument in defined_variables %}
+                                 <li class="list-group-item">{{ instrument }}</li>
+                             {% endfor %}
+                         </ul>
+                     {% else %}
+                         <span class="text-muted">No instruments defined.</span>
+                     {% endif %}
+                 </div>
+             </div>
+         </div>
+     </div>
+
+     <!-- Import API Modal -->
+     <div class="modal fade" id="importAPI" tabindex="-1" aria-labelledby="importModal" aria-hidden="true">
+         <div class="modal-dialog">
+             <div class="modal-content">
+                 <div class="modal-header">
+                     <h1 class="modal-title fs-5" id="importModal">Import API by file path</h1>
+                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                 </div>
+                 <form method="POST" action="{{ url_for('control.temp.import_api') }}" enctype="multipart/form-data">
+                     <div class="modal-body">
+                         <div class="mb-3">
+                             <label class="form-label" for="filepath">File Path:</label>
+                             <input type="text" class="form-control" name="filepath" id="filepath">
+                         </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>
+     {% endblock %}

ivoryos/routes/data/templates/components/step_card.html

@@ -0,0 +1,13 @@
+<div class="card mb-2 {{ 'border-danger text-danger bg-light' if step.run_error else 'border-secondary' }}">
+  <div class="card-body p-2">
+    <strong>{{ step.method_name | format_name }}</strong>
+    <small class="text-muted">
+      <i class="fas fa-play-circle me-1"></i> Start: {{ step.start_time.strftime('%H:%M:%S') if step.start_time else 'N/A' }}
+      <i class="fas fa-stop-circle ms-2 me-1"></i> End: {{ step.end_time.strftime('%H:%M:%S') if step.end_time else 'N/A' }}
+      <!-- {% if step.run_error %}
+        <i class="fas fa-stop-circle ms-2 me-1"></i> Error: {{ step.run_error if step.run_error else 'N/A' }}
+      {% endif %} -->
+    </small>
+    <!-- <small>Error: {{ step.run_error }}</small> -->
+  </div>
+</div>

ivoryos/routes/data/templates/workflow_database.html

@@ -0,0 +1,109 @@
+{% extends 'base.html' %}
+
+{% block title %}IvoryOS | Design Database{% endblock %}
+{% block body %}
+    <div class="div">
+        <form id="search" style="display: inline-block;float: right;" action="{{url_for('data.list_workflows',deck_name=deck_name)}}" method="GET">
+            <div class="input-group">
+                <div class="form-outline">
+                    <input type="search" name="keyword" id="keyword" class="form-control" placeholder="Search workflows...">
+                </div>
+                <button type="submit" class="btn btn-primary">
+                    <i class="bi bi-search"></i>
+                </button>
+            </div>
+        </form>
+    </div>
+
+    <table class="table table-hover" id="workflowResultLibrary">
+        <thead>
+            <tr>
+                <th scope="col">Workflow name</th>
+                <th scope="col">Workflow ID</th>
+                <th scope="col">Start time</th>
+                <th scope="col">End time</th>
+                <th scope="col">Data</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for workflow in workflows %}
+                <tr>
+                    <td><a href="{{ url_for('data.workflow_logs', workflow_id=workflow.id) }}">{{ workflow.name }}</a></td>
+                    <td>{{ workflow.id }}</td>
+                    <td>{{ workflow.start_time.strftime("%Y-%m-%d %H:%M:%S") if workflow.start_time else '' }}</td>
+                    <td>{{ workflow.end_time.strftime("%Y-%m-%d %H:%M:%S") if workflow.end_time else '' }}</td>
+
+                    <td>
+                        {% if workflow.data_path %}
+                          <a href="{{ url_for('data.download_results', filename=workflow.data_path) }}">{{ workflow.data_path }}</a>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if session['user'] == 'admin' or session['user'] == workflow.author %}
+{#                            <a href="{{ url_for('data.delete_workflow_data', workflow_id=workflow.id) }}">delete</a>#}
+                            <a href="#"
+                               class="text-danger"
+                               data-delete-url="{{ url_for('data.delete_workflow_record', workflow_id=workflow.id) }}"
+                               onclick="deleteWorkflow(this); return false;">
+                               Delete
+                            </a>
+                        {% else %}
+                            <a class="disabled-link">delete</a>
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+
+    {#    paging#}
+    <div class="pagination justify-content-center">
+        <div class="page-item {{ 'disabled' if not workflows.has_prev else '' }}">
+            <a class="page-link" href="{{ url_for('data.list_workflows', page=workflows.prev_num) }}">Previous</a>
+        </div>
+
+        {% for num in workflows.iter_pages() %}
+            {% if num %}
+                <div class="page-item {{ 'active' if num == workflows.page else '' }}">
+                    <a class="page-link" href="{{ url_for('data.list_workflows', page=num) }}">{{ num }}</a>
+                </div>
+            {% else %}
+                <div class="page-item disabled">
+                    <span class="page-link">…</span>
+                </div>
+            {% endif %}
+        {% endfor %}
+
+        <div class="page-item {{ 'disabled' if not workflows.has_next else '' }}">
+            <a class="page-link" href="{{ url_for('data.list_workflows', page=workflows.next_num) }}">Next</a>
+        </div>
+    </div>
+
+    <div id="steps-container"></div>
+
+    <script>
+        function showSteps(workflowId) {
+            fetch(`/workflow_steps/${workflowId}`)
+                .then(response => response.json())
+                .then(data => {
+                    const container = document.getElementById('steps-container');
+                    container.innerHTML = '';  // Clear previous content
+                    const stepsList = document.createElement('ul');
+
+                    data.steps.forEach(step => {
+                        const li = document.createElement('li');
+                        li.innerHTML = `
+                            <strong>Step: </strong> ${step.method_name} <br>
+                            <strong>Start Time:</strong> ${step.start_time} <br>
+                            <strong>End Time:</strong> ${step.end_time} <br>
+                            <strong>Human Intervention:</strong> ${step.run_error ? 'Yes' : 'No'}
+                        `;
+                        stepsList.appendChild(li);
+                    });
+
+                    container.appendChild(stepsList);
+                });
+        }
+    </script>
+    <script src="{{ url_for('static', filename='js/db_delete.js') }}"></script>
+{% endblock %}

ivoryos/routes/data/templates/workflow_view.html

@@ -0,0 +1,130 @@
+{% extends 'base.html' %}
+
+{% block title %}IvoryOS | Experiment Results{% endblock %}
+
+{% block body %}
+<style>
+  .vis-time-axis .vis-text.vis-minor,
+  .vis-time-axis .vis-text.vis-major {
+    color: #666;
+  }
+  .vis-item.stop {
+    background-color: red;
+    color: white;
+    border: none;
+    font-weight: bold;
+  }
+</style>
+
+<div id="timeline"></div>
+
+<script src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
+<link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
+
+<h1>Experiment Step View</h1>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+
+  const items = [
+    {% if grouped.prep %}
+      {
+        id: 'prep',
+        content: 'Prep Phase',
+        start: '{{ grouped.prep[0].start_time }}',
+        end: '{{ grouped.prep[-1].end_time }}',
+        className: 'prep',
+        group: 'prep'
+      },
+    {% endif %}
+
+    {% for repeat_index, step_list in grouped.script.items()|sort %}
+      {
+        id: 'iter{{ repeat_index }}',
+        content: 'Iteration {{ repeat_index }}',
+        start: '{{ step_list[0].start_time }}',
+        end: '{{ step_list[-1].end_time }}',
+        className: 'script',
+        group: 'iter{{ repeat_index }}'
+      },
+      {% for step in step_list %}
+        {% if step.method_name == "stop" %}
+          {
+            id: 'stop-{{ step.id }}',
+            content: '🛑 Stop',
+            start: '{{ step.start_time }}',
+            type: 'point',
+            className: 'stop',
+            group: 'iter{{ repeat_index }}'
+          },
+        {% endif %}
+      {% endfor %}
+    {% endfor %}
+
+    {% if grouped.cleanup %}
+      {
+        id: 'cleanup',
+        content: 'Cleanup Phase',
+        start: '{{ grouped.cleanup[0].start_time }}',
+        end: '{{ grouped.cleanup[-1].end_time }}',
+        className: 'cleanup',
+        group: 'cleanup'
+
+      },
+    {% endif %}
+  ];
+
+  const groups = [
+      {% if grouped.prep %}{ id: 'prep', content: 'Prep' },{% endif %}
+      {% for repeat_index in grouped.script.keys()|sort %}{ id: 'iter{{ repeat_index }}', content: 'Iteration {{ repeat_index }}' },{% endfor %}
+      {% if grouped.cleanup %}{ id: 'cleanup', content: 'Cleanup' },{% endif %}
+  ];
+
+  var options = {
+      clickToUse: true,
+      stack: false,  // important to keep point within group row
+      horizontalScroll: true,
+      zoomKey: 'ctrlKey'
+  };
+
+  // Initialize your timeline with the sorted groups
+  const timeline = new vis.Timeline(container, items, groups, options);
+
+  timeline.on('select', function (props) {
+    const id = props.items[0];
+    if (id && id.startsWith('iter')) {
+      const card = document.getElementById('card-' + id);
+      if (card) {
+        const yOffset = -80;
+        const y = card.getBoundingClientRect().top + window.pageYOffset + yOffset;
+        window.scrollTo({ top: y, behavior: 'smooth' });
+      }
+    }
+  });
+</script>
+
+<h2>Workflow: {{ workflow.name }}</h2>
+
+{% if grouped.prep %}
+  <h4 class="mt-4">Prep Phase</h4>
+  {% for step in grouped.prep %}
+    {% include "components/step_card.html" %}
+  {% endfor %}
+{% endif %}
+
+{% for repeat_index, step_list in grouped.script.items()|sort %}
+  <h4 class="mt-4" id="card-iter{{ repeat_index }}">Iteration {{ repeat_index }}</h4>
+  {% for step in step_list %}
+    {% include "components/step_card.html" %}
+  {% endfor %}
+{% endfor %}
+
+{% if grouped.cleanup %}
+  <h4 class="mt-4">Cleanup Phase</h4>
+  {% for step in grouped.cleanup %}
+    {% include "components/step_card.html" %}
+  {% endfor %}
+{% endif %}
+{% endblock %}

ivoryos/routes/design/design.py

@@ -173,7 +173,7 @@ def update_ui_state():
         autofill = data.get("autofill", False)
         session['autofill'] = autofill
         _, forms = _create_forms(instrument, script, autofill)
-        rendered_html = render_template("components/methods_panel.html", forms=forms, script=script, instrument=instrument)
+        rendered_html = render_template("components/actions_panel.html", forms=forms, script=script, instrument=instrument)
         return jsonify({"html": rendered_html})
 
     if "deck_name" in data: