From bbdbfe8bdf57dd15a5abe7f05b82218bd0bcae92 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Fri, 9 Jan 2026 15:01:40 +0000
Subject: [PATCH] Add autocomplete to text inputs: Update web templates with
 datalists for suggesting values, enhance UI test to verify autocomplete
 functionality.

---
 prompt.yml                                   |  2 +
 src/autometabuilder/web/templates/index.html | 49 ++++++++++++++++++--
 tests/ui/test_web_ui.py                      | 24 ++++++++++
 3 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/prompt.yml b/prompt.yml
index c4545eb..19794d2 100644
--- a/prompt.yml
+++ b/prompt.yml
@@ -22,6 +22,8 @@ messages:
       properly documented. Update ROADMAP.md as you complete tasks.
 model: openai/gpt-4o
 
+# Test Comment
+# Test Comment
 # Test Comment
 # Test Comment
 # Test Comment
\ No newline at end of file
diff --git a/src/autometabuilder/web/templates/index.html b/src/autometabuilder/web/templates/index.html
index 253b26a..11ec76b 100644
--- a/src/autometabuilder/web/templates/index.html
+++ b/src/autometabuilder/web/templates/index.html
@@ -48,7 +48,17 @@
             </ul>
             <form action="/translations" method="post" class="mt-2">
                 <div class="input-group">
-                    <input type="text" name="lang" class="form-control" placeholder="New lang code (e.g. de)">
+                    <input type="text" name="lang" class="form-control" placeholder="New lang code (e.g. de)" list="lang-suggestions">
+                    <datalist id="lang-suggestions">
+                        <option value="en">
+                        <option value="es">
+                        <option value="fr">
+                        <option value="nl">
+                        <option value="de">
+                        <option value="it">
+                        <option value="ja">
+                        <option value="zh">
+                    </datalist>
                     <button class="btn btn-primary" type="submit">Add</button>
                 </div>
             </form>
@@ -71,16 +81,37 @@
                         <tr>
                             <td>{{ key }}</td>
                             <td>
-                                <input type="text" name="env_{{ key }}" value="{{ value }}" class="form-control">
+                                <input type="text" name="env_{{ key }}" value="{{ value }}" class="form-control" list="env-value-suggestions">
                             </td>
                         </tr>
                         {% endfor %}
                         <tr>
-                            <td><input type="text" name="new_env_key" class="form-control" placeholder="NEW_KEY"></td>
-                            <td><input type="text" name="new_env_value" class="form-control" placeholder="New Value"></td>
+                            <td>
+                                <input type="text" name="new_env_key" class="form-control" placeholder="NEW_KEY" list="env-key-suggestions">
+                            </td>
+                            <td>
+                                <input type="text" name="new_env_value" class="form-control" placeholder="New Value" list="env-value-suggestions">
+                            </td>
                         </tr>
                     </tbody>
                 </table>
+                <datalist id="env-key-suggestions">
+                    {% for key in env_vars.keys() %}
+                    <option value="{{ key }}">
+                    {% endfor %}
+                    <option value="GITHUB_TOKEN">
+                    <option value="OPENAI_API_KEY">
+                    <option value="LOG_LEVEL">
+                </datalist>
+                <datalist id="env-value-suggestions">
+                    {% for value in env_vars.values() %}
+                    <option value="{{ value }}">
+                    {% endfor %}
+                    <option value="INFO">
+                    <option value="DEBUG">
+                    <option value="WARNING">
+                    <option value="ERROR">
+                </datalist>
                 <button type="submit" class="btn btn-success">Save Settings</button>
             </form>
         </div>
@@ -100,6 +131,14 @@
                 <!-- Visual builder will be rendered here -->
             </div>
             <form action="/workflow" method="post" id="workflow-form">
+                <datalist id="task-name-suggestions">
+                    <option value="Initialize Project">
+                    <option value="Analyze Requirements">
+                    <option value="Generate Code">
+                    <option value="Run Tests">
+                    <option value="Deploy">
+                    <option value="Iterative Refinement">
+                </datalist>
                 <textarea id="workflow-content" name="content" class="form-control d-none" rows="15">{{ workflow_content }}</textarea>
                 <button type="submit" class="btn btn-success mt-2">Save Workflow</button>
                 <button type="button" class="btn btn-secondary mt-2" onclick="toggleRawWorkflow()">Toggle Raw JSON</button>
@@ -133,7 +172,7 @@
                 taskCard.innerHTML = `
                     <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                         <div class="flex-grow-1">
-                            <input type="text" class="form-control form-control-sm d-inline-block w-auto" value="${task.name || ''}" onchange="updateTask(${taskIdx}, 'name', this.value)" placeholder="Task Name">
+                            <input type="text" class="form-control form-control-sm d-inline-block w-auto" value="${task.name || ''}" list="task-name-suggestions" onchange="updateTask(${taskIdx}, 'name', this.value)" placeholder="Task Name">
                             <select class="form-select form-select-sm d-inline-block w-auto ms-2" onchange="updateTask(${taskIdx}, 'type', this.value)">
                                 <option value="" ${!task.type ? 'selected' : ''}>Standard Sequence</option>
                                 <option value="loop" ${task.type === 'loop' ? 'selected' : ''}>Loop / Iterate</option>
diff --git a/tests/ui/test_web_ui.py b/tests/ui/test_web_ui.py
index 4a1e237..2c5e323 100644
--- a/tests/ui/test_web_ui.py
+++ b/tests/ui/test_web_ui.py
@@ -65,3 +65,27 @@ def test_update_settings(page: Page, server: str):
     # Verify it appeared in the table
     page.reload()
     expect(page.locator("input[name='env_TEST_SETTING']")).to_have_value("test_value")
+
+def test_all_text_inputs_have_autocomplete(page: Page, server: str):
+    auth_url = server.replace("http://", "http://testuser:testpass@")
+    page.goto(auth_url)
+    
+    # Wait for the workflow builder to render
+    page.wait_for_selector("#workflow-builder")
+    
+    # Select all text inputs
+    inputs = page.locator("input[type='text']")
+    
+    count = inputs.count()
+    assert count > 0, "No text inputs found on the page"
+    
+    for i in range(count):
+        input_element = inputs.nth(i)
+        # Check if the 'list' attribute is present and not empty
+        list_attr = input_element.get_attribute("list")
+        input_name = input_element.get_attribute("name") or input_element.get_attribute("placeholder") or f"index {i}"
+        assert list_attr, f"Input '{input_name}' does not have a 'list' attribute for autocomplete"
+        
+        # Check if the corresponding datalist exists
+        datalist = page.locator(f"datalist#{list_attr}")
+        expect(datalist).to_be_attached(), f"Datalist '{list_attr}' for input '{input_name}' is missing"