dbviewer 0.6.7 → 0.6.8

data/app/views/dbviewer/tables/query.html.erb

@@ -4,183 +4,10 @@
 
 <% content_for :head do %>
   <link href="https://cdn.jsdelivr.net/npm/vscode-codicons@0.0.17/dist/codicon.min.css" rel="stylesheet">
-  <style>
-    /* Monaco Editor styling */
-    #monaco-editor {
-      margin-bottom: 1rem;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    }
-    
-    .monaco-editor-container {
-      border: 1px solid #ced4da;
-      transition: border-color 0.3s ease, box-shadow 0.3s ease;
-    }
-    
-    [data-bs-theme="dark"] .monaco-editor-container {
-      border: 1px solid #495057;
-    }
-    
-    [data-bs-theme="dark"] #monaco-editor {
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-    }
-    
-    .example-queries {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 5px;
-      margin-top: 8px;
-    }
-    
-    .example-query {
-      display: inline-block;
-      transition: all 0.2s ease;
-      cursor: pointer;
-      font-size: 0.85rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-    }
-    
-    [data-bs-theme="light"] .example-query {
-      border-color: #ced4da;
-    }
-    
-    [data-bs-theme="dark"] .example-query {
-      border-color: #495057;
-      color: #f8f9fa;
-    }
-    
-    /* Result table styling */
-    .results-table {
-      border-collapse: collapse;
-    }
-    
-    [data-bs-theme="dark"] .results-table {
-      border-color: #495057;
-    }
-    
-    .example-query:hover {
-      background-color: #0d6efd;
-      color: white;
-      border-color: #0d6efd;
-    }
-    
-    /* Keyboard shortcut helper */
-    .keyboard-hint {
-      font-size: 0.8rem;
-      margin-left: 8px;
-      opacity: 0.7;
-    }
-    
-    [data-bs-theme="light"] .shortcut-hints {
-      color: #6c757d;
-    }
-    
-    [data-bs-theme="dark"] .shortcut-hints {
-      color: #adb5bd;
-    }
-    
-    /* Monaco status bar */
-    .monaco-status-bar {
-      display: flex;
-      justify-content: space-between;
-      padding: 3px 8px;
-      font-size: 0.75rem;
-      border-top: none;
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-    
-    [data-bs-theme="light"] .monaco-status-bar {
-      background-color: #f8f9fa;
-      border: 1px solid #ced4da;
-      color: #6c757d;
-    }
-    
-    [data-bs-theme="dark"] .monaco-status-bar {
-      background-color: #343a40;
-      border: 1px solid #495057;
-      color: #adb5bd;
-    }
-    
-    .monaco-status-bar .column-info {
-      font-weight: 500;
-    }
-    
-    /* Table structure styles */
-    #tableStructureHeader .btn-link {
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      text-align: left;
-    }
-    
-    [data-bs-theme="light"] #tableStructureHeader .btn-link {
-      color: #212529;
-    }
-    
-    [data-bs-theme="dark"] #tableStructureHeader .btn-link {
-      color: #f8f9fa;
-    }
-    
-    [data-bs-theme="light"] .table-columns-count {
-      color: #6c757d;
-    }
-    
-    [data-bs-theme="dark"] .table-columns-count {
-      color: #adb5bd;
-    }
-    
-    #tableStructureHeader .btn-link:hover,
-    #tableStructureHeader .btn-link:focus {
-      text-decoration: none;
-      color: #0d6efd;
-    }
-    
-    #tableStructureHeader .btn-link i {
-      transition: transform 0.2s ease-in-out;
-    }
-    
-    /* Table style overrides for query page */
-    [data-bs-theme="dark"] .table-sm th,
-    [data-bs-theme="dark"] .table-sm td {
-      border-color: #495057;
-    }
-    
-    /* Results card styling */
-    [data-bs-theme="dark"] .card-header h5 {
-      color: #f8f9fa;
-    }
-    
-    /* Alert styling for dark mode */
-    [data-bs-theme="dark"] .alert-warning {
-      background-color: rgba(255, 193, 7, 0.15);
-      border-color: rgba(255, 193, 7, 0.4);
-      color: #ffc107;
-    }
-    
-    [data-bs-theme="dark"] .alert-danger {
-      background-color: rgba(220, 53, 69, 0.15);
-      border-color: rgba(220, 53, 69, 0.4);
-      color: #f8d7da;
-    }
-    
-    /* Make headings stand out in dark mode */
-    [data-bs-theme="dark"] h1, 
-    [data-bs-theme="dark"] h2, 
-    [data-bs-theme="dark"] h3, 
-    [data-bs-theme="dark"] h4, 
-    [data-bs-theme="dark"] h5, 
-    [data-bs-theme="dark"] h6 {
-      color: #f8f9fa;
-    }
-  </style>
+  <%= stylesheet_link_tag "dbviewer/query", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "dbviewer/query", "data-turbo-track": "reload", type: :module %>
 <% end %>
 
-<% content_for :sidebar_active do %>active<% end %>
-
 <div class="d-flex justify-content-between align-items-center mb-4">
   <h1>Query: <%= @table_name %></h1>
   <div>
@@ -189,408 +16,145 @@
     <% end %>
   </div>
 </div>
-  
-  <% if flash[:warning].present? %>
-    <div class="alert alert-warning alert-dismissible fade show" role="alert">
-      <%= flash[:warning] %>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-    </div>
-  <% end %>
-  
-  <div class="card mb-4">
-    <div class="card-header">
-      <h5>SQL Query (Read-Only)</h5>
-    </div>
-    <div class="card-body">
-      <%= form_with url: query_table_path(@table_name), method: :post, local: true, id: "sql-query-form" do |form| %>
-        <div class="mb-3">
-          <div id="monaco-editor" class="monaco-editor-container" style="min-height: 200px; border-radius: 4px; margin-bottom: 0rem;" 
-               data-initial-query="<%= CGI.escapeHTML(@query.to_s) %>"></div>
-          <%= form.hidden_field :query, id: "query-input", value: @query.to_s %>
-        </div>
-        
-        <div class="d-flex justify-content-between align-items-start">
-          <div class="form-text">
-            <strong>Examples:</strong><br>
-            <div class="example-queries">
-              <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT * FROM <%= @table_name %> LIMIT 100</code>
-              <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT 
-              <% 
-                # Display first 3 columns or all if less than 3
-                display_cols = @columns.present? ? @columns.first(3).map { |c| c[:name] }.join(", ") : "column1, column2"
-                # Get first non-ID column for WHERE example if available
-                where_col = @columns.present? ? (@columns.find { |c| !c[:name].to_s.downcase.include?("id") } || @columns.first)[:name] : "column_name"
-                # Get a numeric column for aggregation if available
-                num_col = @columns.present? ? (@columns.find { |c| c[:type].to_s.downcase.include?("int") || c[:type].to_s.downcase.include?("num") } || @columns.first)[:name] : "id"
-              %>
-              <%= display_cols %> FROM <%= @table_name %> WHERE <%= where_col %> = 'value'</code>
-              <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT COUNT(*) FROM <%= @table_name %> GROUP BY <%= num_col %></code>
-            </div>
-          </div>
-          <div>
-            <%= form.submit "Run Query", class: "btn btn-primary" %>
-            <span class="keyboard-hint d-none d-md-inline">(or press Cmd+Enter / Ctrl+Enter)</span>
-            <div class="small mt-2 d-none d-md-block shortcut-hints">
-              <strong>Shortcuts:</strong> 
-              <span class="me-2">Cmd+Alt+T: Toggle table structure</span>
-              <span class="me-2">Cmd+Alt+S: Insert SELECT</span>
-              <span>Cmd+Alt+W: Insert WHERE</span>
-            </div>
+
+<% if flash[:warning].present? %>
+  <div class="alert alert-warning alert-dismissible fade show" role="alert">
+    <%= flash[:warning] %>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+  </div>
+<% end %>
+
+<div class="card mb-4">
+  <div class="card-header">
+    <h5>SQL Query (Read-Only)</h5>
+  </div>
+  <div class="card-body">
+    <%= form_with url: query_table_path(@table_name), method: :post, local: true, id: "sql-query-form" do |form| %>
+      <div class="mb-3">
+        <div id="monaco-editor" class="monaco-editor-container" style="min-height: 200px; border-radius: 4px; margin-bottom: 0rem;" 
+              data-initial-query="<%= CGI.escapeHTML(@query.to_s) %>"></div>
+        <%= form.hidden_field :query, id: "query-input", value: @query.to_s %>
+      </div>
+      
+      <div class="d-flex justify-content-between align-items-start">
+        <div class="form-text">
+          <strong>Examples:</strong><br>
+          <div class="example-queries">
+            <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT * FROM <%= @table_name %> LIMIT 100</code>
+            <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT 
+            <% 
+              # Display first 3 columns or all if less than 3
+              display_cols = @columns.present? ? @columns.first(3).map { |c| c[:name] }.join(", ") : "column1, column2"
+              # Get first non-ID column for WHERE example if available
+              where_col = @columns.present? ? (@columns.find { |c| !c[:name].to_s.downcase.include?("id") } || @columns.first)[:name] : "column_name"
+              # Get a numeric column for aggregation if available
+              num_col = @columns.present? ? (@columns.find { |c| c[:type].to_s.downcase.include?("int") || c[:type].to_s.downcase.include?("num") } || @columns.first)[:name] : "id"
+            %>
+            <%= display_cols %> FROM <%= @table_name %> WHERE <%= where_col %> = 'value'</code>
+            <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT COUNT(*) FROM <%= @table_name %> GROUP BY <%= num_col %></code>
           </div>
         </div>
-      <% end %>
-    </div>
-  </div>
-  <div class="card mb-3">
-    <div class="card-header" id="tableStructureHeader">
-      <h6 class="mb-0">
-        <button class="btn btn-link btn-sm text-decoration-none p-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tableStructureContent" aria-expanded="false" aria-controls="tableStructureContent">
-          <i class="bi bi-chevron-down me-1"></i>
-          Table Structure Reference
-          <small class="table-columns-count ms-2">(<%= @columns.present? ? @columns.size : 0 %> columns)</small>
-        </button>
-      </h6>
-    </div>
-    <div id="tableStructureContent" class="collapse" aria-labelledby="tableStructureHeader">
-      <div class="card-body p-2">
-        <% if @columns.present? %>
-          <div class="table-responsive">
-            <table class="table table-sm table-bordered mb-0">
-              <thead>
-                <tr>
-                  <th>Column</th>
-                  <th>Type</th>
-                </tr>
-              </thead>
-              <tbody>
-                <% @columns.each do |column| %>
-                  <tr>
-                    <td><code><%= column[:name] %><%= " (PK)" if column[:primary] %></code></td>
-                    <td><span class="badge bg-secondary"><%= column[:type] %></span></td>
-                  </tr>
-                <% end %>
-              </tbody>
-            </table>
+        <div>
+          <%= form.submit "Run Query", class: "btn btn-primary" %>
+          <span class="keyboard-hint d-none d-md-inline">(or press Cmd+Enter / Ctrl+Enter)</span>
+          <div class="small mt-2 d-none d-md-block shortcut-hints">
+            <strong>Shortcuts:</strong> 
+            <span class="me-2">Cmd+Alt+T: Toggle table structure</span>
+            <span class="me-2">Cmd+Alt+S: Insert SELECT</span>
+            <span>Cmd+Alt+W: Insert WHERE</span>
           </div>
-        <% else %>
-          <p class="mb-0">No column information available.</p>
-        <% end %>
+        </div>
       </div>
-    </div>
+    <% end %>
   </div>
-      
-  
-  <% if @error.present? %>
-    <div class="alert alert-danger" role="alert">
-      <strong>Error:</strong> <%= @error %>
-    </div>
-  <% end %>
-  
-  <% if @records.present? %>
-    <div class="card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5>Results</h5>
-        <span class="badge bg-info">Rows: <%= @records.rows.count %></span>
-      </div>
-      <div class="card-body">
+</div>
+
+<div class="card mb-3">
+  <div class="card-header" id="tableStructureHeader">
+    <h6 class="mb-0">
+      <button class="btn btn-link btn-sm text-decoration-none p-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tableStructureContent" aria-expanded="false" aria-controls="tableStructureContent">
+        <i class="bi bi-chevron-down me-1"></i>
+        Table Structure Reference
+        <small class="table-columns-count ms-2">(<%= @columns.present? ? @columns.size : 0 %> columns)</small>
+      </button>
+    </h6>
+  </div>
+  <div id="tableStructureContent" class="collapse" aria-labelledby="tableStructureHeader">
+    <div class="card-body p-2">
+      <% if @columns.present? %>
         <div class="table-responsive">
-          <table class="table table-bordered table-striped">
-            <% if @records.columns.any? %>
-              <thead>
-                <tr>
-                  <% @records.columns.each do |column_name| %>
-                    <th><%= column_name %></th>
-                  <% end %>
-                </tr>
-              </thead>
-              <tbody>
-                <% if @records.rows.any? %>
-                  <% @records.rows.each do |row| %>
-                    <tr>
-                      <% row.each do |cell| %>
-                        <td><%= format_cell_value(cell) %></td>
-                      <% end %>
-                    </tr>
-                  <% end %>
-                <% else %>
-                  <tr>
-                    <td colspan="<%= @records.columns.count %>">Query executed successfully, but returned no rows.</td>
-                  </tr>
-                <% end %>
-              </tbody>
-            <% else %>
+          <table class="table table-sm table-bordered mb-0">
+            <thead>
               <tr>
-                <td>Query executed successfully, but returned no columns.</td>
+                <th>Column</th>
+                <th>Type</th>
               </tr>
-            <% end %>
+            </thead>
+            <tbody>
+              <% @columns.each do |column| %>
+                <tr>
+                  <td><code><%= column[:name] %><%= " (PK)" if column[:primary] %></code></td>
+                  <td><span class="badge bg-secondary"><%= column[:type] %></span></td>
+                </tr>
+              <% end %>
+            </tbody>
           </table>
         </div>
-      </div>
+      <% else %>
+        <p class="mb-0">No column information available.</p>
+      <% end %>
     </div>
-  <% end %>
+  </div>
 </div>
 
-<script type="module">
-  import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/+esm';
-
-  // Helper function to decode HTML entities
-  function decodeHTMLEntities(text) {
-    const textarea = document.createElement('textarea');
-    textarea.innerHTML = text;
-    return textarea.value;
-  }
-
-  // Get initial query value from a data attribute to avoid string escaping issues
-  const initialQueryEncoded = document.getElementById('monaco-editor').getAttribute('data-initial-query');
-  const initialQuery = decodeHTMLEntities(initialQueryEncoded);
-  
-  // Determine initial theme based on document theme
-  const initialTheme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'vs-dark' : 'vs';
-  
-  // Initialize Monaco Editor with SQL syntax highlighting
-  const editor = monaco.editor.create(document.getElementById('monaco-editor'), {
-    value: initialQuery || '',
-    language: 'sql',
-    theme: initialTheme,
-    automaticLayout: true, // Resize automatically
-    minimap: { enabled: true },
-    scrollBeyondLastLine: false,
-    lineNumbers: 'on',
-    renderLineHighlight: 'all',
-    tabSize: 2,
-    wordWrap: 'on',
-    formatOnPaste: true,
-    formatOnType: true,
-    autoIndent: 'full',
-    folding: true,
-    glyphMargin: false,
-    suggestOnTriggerCharacters: true,
-    fixedOverflowWidgets: true,
-    quickSuggestions: {
-      other: true,
-      comments: true,
-      strings: true
-    },
-    suggest: {
-      showKeywords: true,
-      showSnippets: true,
-      preview: true,
-      showIcons: true,
-      maxVisibleSuggestions: 12
-    }
-  });
-
-  // Theme change listener
-  document.addEventListener('dbviewerThemeChanged', (event) => {
-    const newTheme = event.detail.theme === 'dark' ? 'vs-dark' : 'vs';
-    monaco.editor.setTheme(newTheme);
-    
-    // Update editor container border color
-    const editorContainer = document.querySelector('.monaco-editor-container');
-    if (editorContainer) {
-      editorContainer.style.borderColor = event.detail.theme === 'dark' ? '#495057' : '#ced4da';
-    }
-    
-    // Update status bar styling based on theme
-    updateStatusBarTheme(event.detail.theme);
-    
-    // Update example query buttons
-    const exampleQueries = document.querySelectorAll('.example-query');
-    exampleQueries.forEach(query => {
-      if (event.detail.theme === 'dark') {
-        query.style.borderColor = '#495057';
-        if (!query.classList.contains('btn-primary')) {
-          query.style.color = '#f8f9fa';
-        }
-      } else {
-        query.style.borderColor = '#ced4da';
-        if (!query.classList.contains('btn-primary')) {
-          query.style.color = '';
-        }
-      }
-    });
-  });
-  
-  function updateStatusBarTheme(theme) {
-    const statusBar = document.querySelector('.monaco-status-bar');
-    if (!statusBar) return;
-    
-    if (theme === 'dark') {
-      statusBar.style.backgroundColor = '#343a40';
-      statusBar.style.borderColor = '#495057';
-      statusBar.style.color = '#adb5bd';
-    } else {
-      statusBar.style.backgroundColor = '#f8f9fa';
-      statusBar.style.borderColor = '#ced4da';
-      statusBar.style.color = '#6c757d';
-    }
-  }
-
-  // Set up SQL intellisense with table/column completions
-  const tableName = "<%= @table_name %>";
-  const columns = [
-    <% if @columns.present? %>
-      <% @columns.each do |column| %>
-        { name: "<%= column[:name] %>", type: "<%= column[:type] %>" },
-      <% end %>
-    <% end %>
-  ];
-
-  // Register SQL completion providers
-  monaco.languages.registerCompletionItemProvider('sql', {
-    provideCompletionItems: function(model, position) {
-      const textUntilPosition = model.getValueInRange({
-        startLineNumber: position.lineNumber,
-        startColumn: 1,
-        endLineNumber: position.lineNumber,
-        endColumn: position.column
-      });
-      
-      const suggestions = [];
-      
-      // Add table name suggestion
-      suggestions.push({
-        label: tableName,
-        kind: monaco.languages.CompletionItemKind.Class,
-        insertText: tableName,
-        detail: 'Table name'
-      });
-
-      // Add column name suggestions
-      columns.forEach(col => {
-        suggestions.push({
-          label: col.name,
-          kind: monaco.languages.CompletionItemKind.Field,
-          insertText: col.name,
-          detail: `Column (${col.type})`
-        });
-      });
-
-      // Add common SQL keywords
-      const keywords = [
-        { label: 'SELECT', insertText: 'SELECT ' },
-        { label: 'FROM', insertText: 'FROM ' },
-        { label: 'WHERE', insertText: 'WHERE ' },
-        { label: 'ORDER BY', insertText: 'ORDER BY ' },
-        { label: 'GROUP BY', insertText: 'GROUP BY ' },
-        { label: 'HAVING', insertText: 'HAVING ' },
-        { label: 'LIMIT', insertText: 'LIMIT ' },
-        { label: 'JOIN', insertText: 'JOIN ' },
-        { label: 'LEFT JOIN', insertText: 'LEFT JOIN ' },
-        { label: 'INNER JOIN', insertText: 'INNER JOIN ' }
-      ];
-      
-      keywords.forEach(kw => {
-        suggestions.push({
-          label: kw.label,
-          kind: monaco.languages.CompletionItemKind.Keyword,
-          insertText: kw.insertText
-        });
-      });
-      
-      return { suggestions };
-    }
-  });
-
-  // Handle form submission - transfer content to hidden input before submitting
-  document.getElementById('sql-query-form').addEventListener('submit', function(event) {
-    // Stop the form from submitting immediately
-    event.preventDefault();
-    
-    // Get the query value from the editor and set it to the hidden input
-    const queryValue = editor.getValue();
-    document.getElementById('query-input').value = queryValue;
-    
-    // Log for debugging
-    console.log('Submitting query:', queryValue);
-    
-    // Now manually submit the form
-    this.submit();
-  });
+<% if @error.present? %>
+  <div class="alert alert-danger" role="alert">
+    <strong>Error:</strong> <%= @error %>
+  </div>
+<% end %>
 
-  // Make example queries clickable
-  document.querySelectorAll('.example-query').forEach(example => {
-    example.style.cursor = 'pointer';
-    example.addEventListener('click', () => {
-      const query = decodeHTMLEntities(example.textContent);
-      editor.setValue(query);
-      editor.focus();
-    });
-  });
+<% if @records.present? %>
+  <div class="card">
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <h5>Results</h5>
+      <span class="badge bg-info">Rows: <%= @records.rows.count %></span>
+    </div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table class="table table-bordered table-striped">
+          <% if @records.columns.any? %>
+            <thead>
+              <tr>
+                <% @records.columns.each do |column_name| %>
+                  <th><%= column_name %></th>
+                <% end %>
+              </tr>
+            </thead>
+            <tbody>
+              <% if @records.rows.any? %>
+                <% @records.rows.each do |row| %>
+                  <tr>
+                    <% row.each do |cell| %>
+                      <td><%= format_cell_value(cell) %></td>
+                    <% end %>
+                  </tr>
+                <% end %>
+              <% else %>
+                <tr>
+                  <td colspan="<%= @records.columns.count %>">Query executed successfully, but returned no rows.</td>
+                </tr>
+              <% end %>
+            </tbody>
+          <% else %>
+            <tr>
+              <td>Query executed successfully, but returned no columns.</td>
+            </tr>
+          <% end %>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>
 
-  // Setup editor keybindings
-  editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function() {
-    // Get the query value from the editor and set it to the hidden input
-    const queryValue = editor.getValue();
-    document.getElementById('query-input').value = queryValue;
-    
-    // Log for debugging
-    console.log('Submitting query via keyboard shortcut:', queryValue);
-    
-    // Submit the form
-    document.getElementById('sql-query-form').submit();
-  });
-  
-  // Add keyboard shortcuts for common SQL statements
-  editor.addAction({
-    id: 'insert-select-all',
-    label: 'Insert SELECT * FROM statement',
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KeyS],
-    run: function() {
-      editor.trigger('keyboard', 'type', { text: `SELECT * FROM ${tableName} LIMIT 100` });
-      return null;
-    }
-  });
-  
-  editor.addAction({
-    id: 'insert-where',
-    label: 'Insert WHERE clause',
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KeyW],
-    run: function() {
-      editor.trigger('keyboard', 'type', { text: ' WHERE ' });
-      return null;
-    }
-  });
-  
-  editor.addAction({
-    id: 'toggle-table-structure',
-    label: 'Toggle Table Structure Reference',
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KeyT],
-    run: function() {
-      // Use Bootstrap's collapse API to toggle
-      bootstrap.Collapse.getOrCreateInstance(document.getElementById('tableStructureContent')).toggle();
-      return null;
-    }
-  });
-  
-  // Create a status bar showing cursor position and columns info
-  const statusBarDiv = document.createElement('div');
-  statusBarDiv.className = 'monaco-status-bar';
-  statusBarDiv.innerHTML = `<div class="status-info">Ready</div>
-                          <div class="column-info">Table: ${tableName} (${columns.length} columns)</div>`;
-  document.getElementById('monaco-editor').after(statusBarDiv);
-  
-  // Apply initial theme to status bar
-  const currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light';
-  updateStatusBarTheme(currentTheme);
-  
-  // Update status bar with cursor position
-  editor.onDidChangeCursorPosition(e => {
-    const position = `Ln ${e.position.lineNumber}, Col ${e.position.column}`;
-    statusBarDiv.querySelector('.status-info').textContent = position;
-  });
-  
-  // Focus the editor when page loads
-  window.addEventListener('load', () => {
-    editor.focus();
-  });
-  
-  // Toggle icon when table structure collapses or expands
-  document.getElementById('tableStructureContent').addEventListener('show.bs.collapse', function() {
-    document.querySelector('#tableStructureHeader button i').classList.replace('bi-chevron-down', 'bi-chevron-up');
-  });
-  
-  document.getElementById('tableStructureContent').addEventListener('hide.bs.collapse', function() {
-    document.querySelector('#tableStructureHeader button i').classList.replace('bi-chevron-up', 'bi-chevron-down');
-  });
-</script>
+<input type="text" id="table_name" class="d-none" value="<%= @table_name %>">
+<input type="text" id="columns_data" class="d-none" value="<%= @columns.map { |column| { name: column[:name], type: column[:type] } }.to_json %>">