slash_migrate 0.1.0

data/app/views/slash_migrate/models/new.html.erb

@@ -0,0 +1,38 @@
+<% content_for :page_class, "page-form" %>
+
+<div class="page-head">
+  <div>
+    <h1 class="page-title">New table</h1>
+    <p class="page-sub">Pick a name and add columns. The migration and model files appear live below as you type.</p>
+  </div>
+</div>
+
+<%= form_with url: models_path, method: :post, class: "stack",
+      data: {
+        controller: "model-form",
+        action: "input->model-form#scheduleRefresh change->model-form#scheduleRefresh",
+        "model-form-preview-url-value": preview_models_path
+      } do |form| %>
+
+  <div class="panel panel-pad">
+    <div class="field">
+      <label class="label" for="model_name">Model name</label>
+      <%= form.text_field :model_name, id: "model_name", placeholder: "e.g. Article", class: "input mono", autocomplete: "off", data: {action: "input->model-form#modelNameInput"} %>
+      <div id="model-name-help"><%= render "name_help" %></div>
+    </div>
+
+    <h2 class="section-title">Columns</h2>
+    <%= render "slash_migrate/shared/column_builder", tables: @existing_tables, self_option: true, auto_columns: true %>
+  </div>
+
+  <%= render "slash_migrate/shared/flow_arrow" %>
+
+  <div id="sm-preview">
+    <%= render "preview" %>
+  </div>
+
+  <div class="actions-stack">
+    <%= form.submit "Create model & migration", class: "btn btn-accent" %>
+    <%= link_to "Reset", new_model_path, class: "btn btn-ghost" %>
+  </div>
+<% end %>

data/app/views/slash_migrate/models/preview.html.erb

@@ -0,0 +1,9 @@
+<%# Rendered as a Turbo Stream message and applied client-side via
+    Turbo.renderStreamMessage. We emit the <turbo-stream> element by hand so the
+    engine needs neither the turbo-rails gem nor a registered MIME type. %>
+<turbo-stream action="update" target="sm-preview">
+  <template><%= render "preview" %></template>
+</turbo-stream>
+<turbo-stream action="update" target="model-name-help">
+  <template><%= render "name_help" %></template>
+</turbo-stream>

data/app/views/slash_migrate/shared/_breadcrumbs.html.erb

@@ -0,0 +1,12 @@
+<%# trail: array of {label:, url:} hashes, in order. An entry without :url renders
+    as the current (non-link) page. %>
+<nav class="crumbs" aria-label="Breadcrumb">
+  <% trail.each_with_index do |item, i| %>
+    <% if i > 0 %><span class="crumb-sep"><%= sm_icon(:chevron) %></span><% end %>
+    <% if item[:url] %>
+      <%= link_to item[:label], item[:url], class: "crumb-link" %>
+    <% else %>
+      <span class="crumb-current" aria-current="page"><%= item[:label] %></span>
+    <% end %>
+  <% end %>
+</nav>

data/app/views/slash_migrate/shared/_callout.html.erb

@@ -0,0 +1,12 @@
+<%#
+  Wrap content with: render layout: "slash_migrate/shared/callout", locals: { kind: "warn", title: "…" } do … end
+  kind: "info" | "warn" | "ok" | "err". title: optional.
+%>
+<% icon = {"info" => :info, "warn" => :warn, "ok" => :check, "err" => :x}.fetch(kind.to_s) %>
+<div class="callout callout-<%= kind %>">
+  <span class="callout-ico"><%= sm_icon(icon) %></span>
+  <div class="callout-body">
+    <% if local_assigns[:title].present? %><p class="callout-title"><%= title %></p><% end %>
+    <div class="callout-text"><%= yield %></div>
+  </div>
+</div>

data/app/views/slash_migrate/shared/_code_file.html.erb

@@ -0,0 +1,24 @@
+<%#
+  A light, syntax-highlighted code panel — the hero of every form screen.
+  Locals: path: (dim dir, e.g. "db/migrate/"), name: (filename or, when timestamped,
+  the part after the version), kind: (meta label), source: (raw Ruby string).
+  Optional: foot:, foot_kind: ("ok" | "warn" | "info"), timestamped: (bool — prepends
+  the live migration version + "_" before name).
+%>
+<% foot_kind = local_assigns.fetch(:foot_kind, "ok") %>
+<div class="code-card">
+  <div class="code-head">
+    <span class="code-filename">
+      <%= sm_icon(:file) %>
+      <span><span class="dim"><%= path %></span><% if local_assigns[:timestamped] %><span class="code-ts" data-timestamp title="The current UTC time as YYYYMMDDHHMMSS — this becomes the migration's version number"><%= migration_version %></span>_<% end %><%= name %></span>
+    </span>
+    <span class="code-meta"><%= kind %></span>
+  </div>
+  <pre class="code-body"><%= ruby_code_body(source) %></pre>
+  <% if local_assigns[:foot].present? %>
+    <div class="code-foot is-<%= foot_kind %>">
+      <%= sm_icon(foot_kind == "warn" ? :warn : foot_kind == "info" ? :info : :check) %>
+      <span><%= foot %></span>
+    </div>
+  <% end %>
+</div>

data/app/views/slash_migrate/shared/_column_builder.html.erb

@@ -0,0 +1,37 @@
+<%# The repeating column-row builder, shared by New model and Add columns.
+    Locals: tables: (existing table names for reference pickers),
+    self_option: (offer a "(this table)" self-reference option — new tables only). %>
+<% self_option = local_assigns.fetch(:self_option, false) %>
+<% auto_columns = local_assigns.fetch(:auto_columns, false) %>
+<div class="col-heads">
+  <div class="col-head">Name</div>
+  <div class="col-head">Type</div>
+  <div class="col-head">Null</div>
+  <div class="col-head" data-model-form-target="optionHeader">Default</div>
+  <div class="col-head">Index</div>
+  <div></div>
+</div>
+<% if auto_columns %>
+  <%# id and the timestamps come with every create_table, so show them filled in
+      but locked — students see what Rails adds without us spelling it out. These
+      controls are disabled and unnamed: never submitted, and the builder writes
+      id and t.timestamps regardless. %>
+  <% [["id", "bigint", "primary key"], ["created_at", "datetime", "no index"], ["updated_at", "datetime", "no index"]].each do |name, type, index_note| %>
+    <div class="col-row is-locked">
+      <input type="text" class="input mono" value="<%= name %>" disabled>
+      <select class="select" disabled><option><%= type %></option></select>
+      <select class="select" disabled><option>NOT NULL</option></select>
+      <input type="text" class="input mono" value="—" disabled>
+      <select class="select" disabled><option><%= index_note %></option></select>
+      <span class="lock-cell" title="Added automatically by Rails"><%= sm_icon(:lock) %></span>
+    </div>
+  <% end %>
+<% end %>
+<div data-model-form-target="rows">
+  <%= render "slash_migrate/models/row", tables: tables, self_option: self_option %>
+</div>
+<template data-model-form-target="template">
+  <%= render "slash_migrate/models/row", tables: tables, self_option: self_option %>
+</template>
+<button type="button" class="add-row-btn" data-action="model-form#addRow"><%= sm_icon(:plus) %> Add another column</button>
+<p class="help-text is-warn" data-model-form-target="idWarning" hidden></p>

data/app/views/slash_migrate/shared/_flow_arrow.html.erb

@@ -0,0 +1,6 @@
+<%# Animated three-chevron indicator pointing from the form down to the live preview. %>
+<div class="stack-link" aria-hidden="true">
+  <span class="chev"></span>
+  <span class="chev"></span>
+  <span class="chev"></span>
+</div>

data/app/views/slash_migrate/shared/_terminal.html.erb

@@ -0,0 +1,18 @@
+<%#
+  A dark terminal panel for real command output — deliberately plain (no syntax
+  tinting), the way `rails db:migrate` actually prints. Locals: command:, output:.
+  Optional: meta:, meta_style:.
+%>
+<div class="code-card is-terminal">
+  <div class="code-head">
+    <span class="code-filename">
+      <%= sm_icon(:terminal) %>
+      <span class="code-prompt">$</span>
+      <strong><%= command %></strong>
+    </span>
+    <% if local_assigns[:meta].present? %>
+      <span class="code-meta" style="<%= local_assigns[:meta_style] %>"><%= meta %></span>
+    <% end %>
+  </div>
+  <pre class="code-body"><%= terminal_body(output) %></pre>
+</div>

data/app/views/slash_migrate/tables/index.html.erb

@@ -0,0 +1,36 @@
+<div class="page-head">
+  <div>
+    <h1 class="page-title">Tables</h1>
+    <p class="page-sub">The tables in this app's database. Open any one to inspect its columns, indexes, and foreign keys.</p>
+  </div>
+  <%= link_to new_model_path, class: "btn btn-accent" do %><%= sm_icon(:plus) %> New table<% end %>
+</div>
+
+<% if @table_names.empty? %>
+  <div class="panel">
+    <div class="empty">
+      <div class="empty-art"><%= sm_icon(:database) %></div>
+      <h3>No tables yet</h3>
+      <p>Once you create one, it shows up here. Start by giving it a name and a few columns.</p>
+      <%= link_to new_model_path, class: "btn btn-accent" do %><%= sm_icon(:plus) %> Create your first table<% end %>
+    </div>
+  </div>
+<% else %>
+  <div class="panel">
+    <table class="table">
+      <thead>
+        <tr><th>Table</th><th></th></tr>
+      </thead>
+      <tbody>
+        <% @table_names.each do |name| %>
+          <tr class="is-link">
+            <td><span class="mono"><%= name %></span></td>
+            <td class="col-actions">
+              <%= link_to table_path(name), class: "row-go", aria: {label: "Inspect #{name}"} do %><%= sm_icon(:chevron) %><% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/views/slash_migrate/tables/show.html.erb

@@ -0,0 +1,81 @@
+<%
+  columns = @table.columns
+  indexes = @table.indexes
+  foreign_keys = @table.foreign_keys
+  primary_key = @table.primary_key
+  fk_targets = foreign_keys.to_h { |fk| [fk.column, fk.to_table] }
+%>
+
+<div class="page-head">
+  <div>
+    <%= render "slash_migrate/shared/breadcrumbs", trail: [{label: "Tables", url: root_path}, {label: @table.name}] %>
+    <h1 class="page-title"><span class="mono"><%= @table.name %></span></h1>
+    <p class="page-sub">
+      <%= columns.size %> column<%= "s" unless columns.size == 1 %> ·
+      <%= indexes.size %> index<%= "es" unless indexes.size == 1 %> ·
+      <%= foreign_keys.size %> foreign key<%= "s" unless foreign_keys.size == 1 %>
+    </p>
+  </div>
+  <%= link_to new_table_column_path(@table.name), class: "btn btn-ghost" do %><%= sm_icon(:plus) %> Add columns<% end %>
+</div>
+
+<h2 class="section-title">Columns</h2>
+<div class="panel">
+  <table class="table">
+    <thead>
+      <tr><th>Name</th><th>Type</th><th>Null</th><th>Default</th><th>Notes</th><th></th></tr>
+    </thead>
+    <tbody>
+      <% columns.each do |column| %>
+        <tr>
+          <td><span class="mono"><%= column.name %></span></td>
+          <td class="col-type"><%= column.type %> <span class="sql">(<%= column.sql_type %>)</span></td>
+          <td>
+            <% if column.null %><span class="muted">—</span><% else %><span class="badge is-notnull no-dot">NOT NULL</span><% end %>
+          </td>
+          <td class="col-default">
+            <% if column.default.nil? %><em>—</em><% else %><span class="mono"><%= column.default %></span><% end %>
+          </td>
+          <td>
+            <div class="badges">
+              <% if column.name == primary_key %><span class="badge is-pk">primary key</span><% end %>
+              <% if fk_targets[column.name] %><span class="badge is-fk">foreign key (<%= fk_targets[column.name] %>)</span><% end %>
+            </div>
+          </td>
+          <td class="col-actions">
+            <% unless column.name == primary_key %>
+              <%= link_to "Edit", edit_table_column_path(@table.name, column.name), class: "row-action" %>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<h2 class="section-title">Indexes</h2>
+<div class="panel">
+  <table class="table">
+    <thead>
+      <tr><th>Name</th><th>Columns</th><th>Unique</th><th></th></tr>
+    </thead>
+    <tbody>
+      <% indexes.each do |index| %>
+        <tr>
+          <td><span class="mono"><%= index.name %></span></td>
+          <td><span class="mono"><%= Array(index.columns).join(", ") %></span></td>
+          <td><% if index.unique %><span class="badge is-unique">unique</span><% else %><span class="muted">—</span><% end %></td>
+          <td class="col-actions">
+            <%= button_to drop_table_index_path(@table.name, index.name), class: "row-action is-danger",
+                  data: {turbo_confirm: "Generate a migration to drop #{index.name}?"} do %>Drop<% end %>
+          </td>
+        </tr>
+      <% end %>
+      <tr>
+        <td colspan="4">
+          <%= link_to new_table_index_path(@table.name), class: "row-action" do %><%= sm_icon(:plus) %> Add index<% end %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

data/config/routes.rb

@@ -0,0 +1,33 @@
+SlashMigrate::Engine.routes.draw do
+  root to: "tables#index"
+
+  resources :tables, only: [:index, :show] do
+    resources :columns, only: [:new, :create, :edit, :update], param: :name do
+      post :preview, on: :collection
+      member do
+        post :drop
+        post :update_preview
+      end
+    end
+
+    resources :indexes, only: [:new, :create], param: :name do
+      post :preview, on: :collection
+      member do
+        post :drop
+      end
+    end
+  end
+
+  resources :models, only: [:new, :create] do
+    post :preview, on: :collection
+  end
+
+  get "migrations", to: "migrations#index", as: :migrations
+  post "migrations/run", to: "migrations#run", as: :run_migrations
+  post "migrations/rollback", to: "migrations#rollback", as: :rollback_migrations
+  delete "migrations/:version", to: "migrations#destroy", as: :migration, constraints: {version: /\d+/}
+
+  # The engine serves its own JS/CSS so it never depends on the host app's asset
+  # pipeline (importmap / esbuild / Sprockets / Propshaft). See AssetsController.
+  get "assets/:name", to: "assets#show", as: :asset_file, constraints: {name: /[\w.-]+/}
+end

data/lib/slash_migrate/assets/controllers.js

@@ -0,0 +1,250 @@
+// Self-contained Stimulus controllers for the engine. Loaded as a plain script
+// after the vendored Stimulus + Turbo UMD builds, so it relies only on the
+// `Stimulus` and `Turbo` globals — no bundler, importmap, or host JS.
+(function () {
+  "use strict";
+
+  var application = Stimulus.Application.start();
+
+  // Drives the "new model" form: add/remove column rows and stream a live
+  // preview of the migration the form would generate.
+  var ModelFormController = class extends Stimulus.Controller {
+    static targets = ["rows", "template", "preview", "optionHeader", "idWarning"];
+    static values = { previewUrl: String };
+
+    connect() {
+      this.timer = null;
+      this.syncRows();
+      this.refreshHints();
+      this.refresh();
+    }
+
+    addRow() {
+      this.rowsTarget.appendChild(this.templateTarget.content.cloneNode(true));
+      this.syncRows();
+      this.refreshHints();
+      this.refresh();
+    }
+
+    removeRow(event) {
+      var row = event.target.closest("[data-row]");
+      if (row) row.remove();
+      this.refreshHints();
+      this.refresh();
+    }
+
+    // A reference column points at a table (and takes no default), so swap the
+    // default input for the "references table" picker on reference rows.
+    typeChanged(event) {
+      var row = event.target.closest("[data-row]");
+      if (row) this.syncRow(row);
+      this.refreshHints();
+    }
+
+    // As a column name is typed, point its foreign key at the table Rails would
+    // infer — but only if that table actually exists.
+    nameInput(event) {
+      var row = event.target.closest("[data-row]");
+      if (row) this.autoTarget(row);
+      this.updateIdWarning();
+    }
+
+    // Once the student picks a target themselves, stop auto-steering it.
+    pickerTouched(event) {
+      event.target.dataset.touched = "1";
+    }
+
+    // The "→ this table" self-reference option mirrors the model name above.
+    modelNameInput() {
+      this.updateSelfSuggestions();
+    }
+
+    // Header, _id warning, and self-reference suggestion all derive from the
+    // whole row set, so refresh them together after structural changes.
+    refreshHints() {
+      this.updateOptionHeader();
+      this.updateIdWarning();
+      this.updateSelfSuggestions();
+    }
+
+    syncRows() {
+      this.rowsTarget.querySelectorAll("[data-row]").forEach((row) => this.syncRow(row));
+    }
+
+    syncRow(row) {
+      var type = row.querySelector('select[name="attributes[][type]"]').value;
+      var isReference = type === "references" || type === "belongs_to";
+      var picker = row.querySelector("[data-row-table]");
+      var defaultField = row.querySelector("[data-row-default]");
+      if (picker) picker.style.display = isReference ? "" : "none";
+      if (defaultField) defaultField.style.display = isReference ? "none" : "";
+      this.autoTarget(row);
+    }
+
+    // Select the existing table the column name points at (column "zebra" ->
+    // "zebras"), or fall back to "no foreign key" when no such table exists — so
+    // the default never produces a foreign key to a missing table. Leaves a
+    // target the student picked themselves alone.
+    autoTarget(row) {
+      var picker = row.querySelector("[data-row-table]");
+      if (!picker || picker.dataset.touched) return;
+      var type = row.querySelector('select[name="attributes[][type]"]').value;
+      if (type !== "references" && type !== "belongs_to") return;
+      var field = row.querySelector('input[name="attributes[][name]"]');
+      var raw = field ? field.value.trim() : "";
+      var inferred = raw ? this.pluralize(this.underscore(raw)) : "";
+      var match = inferred && Array.from(picker.options).some((option) => option.value === inferred);
+      picker.value = match ? inferred : "";
+    }
+
+    pluralize(word) {
+      if (/[^aeiou]y$/i.test(word)) return word.replace(/y$/i, "ies");
+      if (/(s|ss|sh|ch|x|z)$/i.test(word)) return word + "es";
+      return word + "s";
+    }
+
+    // The shared fourth-column header reflects the row types currently in play:
+    // "Default", "To table", or both when the builder mixes them.
+    updateOptionHeader() {
+      if (!this.hasOptionHeaderTarget) return;
+      var types = Array.from(this.rowsTarget.querySelectorAll('select[name="attributes[][type]"]')).map((select) => select.value);
+      var hasReference = types.some((type) => type === "references" || type === "belongs_to");
+      var hasOther = types.some((type) => type !== "references" && type !== "belongs_to");
+      this.optionHeaderTarget.textContent = hasReference ? (hasOther ? "Default / to table" : "To table") : "Default";
+    }
+
+    // The self-reference option ("→ this table") names the table the model maps
+    // to, derived from the model-name field (model "Zebra" -> table "zebras").
+    updateSelfSuggestions() {
+      var options = this.element.querySelectorAll("[data-self-suggestion]");
+      if (!options.length) return;
+      var field = this.element.querySelector('input[name="model_name"]');
+      var name = field ? field.value.trim() : "";
+      var label = name ? "→ " + this.pluralize(this.underscore(name)) : "→ this table";
+      options.forEach((option) => { option.textContent = label; });
+    }
+
+    underscore(word) {
+      return word.replace(/([a-z0-9])([A-Z])/g, "$1_$2").replace(/[\s-]+/g, "_").toLowerCase();
+    }
+
+    // references appends _id itself, so a column named foo_id becomes foo_id_id.
+    // Surface any such rows as inline helper text below the builder.
+    updateIdWarning() {
+      if (!this.hasIdWarningTarget) return;
+      var offenders = [];
+      this.rowsTarget.querySelectorAll("[data-row]").forEach((row) => {
+        var type = row.querySelector('select[name="attributes[][type]"]').value;
+        if (type !== "references" && type !== "belongs_to") return;
+        var name = (row.querySelector('input[name="attributes[][name]"]').value || "").trim();
+        if (/_id$/i.test(name)) offenders.push(name);
+      });
+      var el = this.idWarningTarget;
+      el.replaceChildren();
+      if (!offenders.length) {
+        el.hidden = true;
+        return;
+      }
+      el.hidden = false;
+      el.append("references adds ", this.code("_id"), " for you — drop it: ");
+      offenders.forEach((name, index) => {
+        if (index > 0) el.append(", ");
+        el.append(this.code(name), " → ", this.code(name.replace(/_id$/i, "")));
+      });
+      el.append(".");
+    }
+
+    code(text) {
+      var node = document.createElement("code");
+      node.textContent = text;
+      return node;
+    }
+
+    // Debounced so we don't fire a request on every keystroke.
+    scheduleRefresh() {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => this.refresh(), 300);
+    }
+
+    refresh() {
+      fetch(this.previewUrlValue, {
+        method: "POST",
+        body: new FormData(this.element),
+        headers: {
+          Accept: "text/vnd.turbo-stream.html",
+          "X-CSRF-Token": this.csrfToken()
+        }
+      })
+        .then((response) => response.text())
+        .then((html) => Turbo.renderStreamMessage(html));
+    }
+
+    csrfToken() {
+      var meta = document.querySelector('meta[name="csrf-token"]');
+      return meta ? meta.content : "";
+    }
+  };
+
+  application.register("model-form", ModelFormController);
+
+  // Debounced live preview for a single form (the edit-column form): POST the
+  // form to its preview URL and render the returned Turbo Stream.
+  var LivePreviewController = class extends Stimulus.Controller {
+    static values = { url: String };
+
+    connect() {
+      this.timer = null;
+      this.refresh();
+    }
+
+    scheduleRefresh() {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => this.refresh(), 300);
+    }
+
+    refresh() {
+      // Drop Rails' _method override so this preview stays a POST even when the
+      // form itself submits as PATCH.
+      var body = new FormData(this.element);
+      body.delete("_method");
+      fetch(this.urlValue, {
+        method: "POST",
+        body: body,
+        headers: {
+          Accept: "text/vnd.turbo-stream.html",
+          "X-CSRF-Token": this.csrfToken()
+        }
+      })
+        .then((response) => response.text())
+        .then((html) => Turbo.renderStreamMessage(html));
+    }
+
+    csrfToken() {
+      var meta = document.querySelector('meta[name="csrf-token"]');
+      return meta ? meta.content : "";
+    }
+  };
+
+  application.register("live-preview", LivePreviewController);
+
+  // Tick the would-be migration version (a UTC timestamp) once a second, so the
+  // 14-digit number in a preview filename visibly counts up — showing students
+  // exactly where that number comes from. Re-queries the DOM each tick, so it
+  // keeps working after the live preview swaps in fresh markup.
+  function pad(n) {
+    return String(n).padStart(2, "0");
+  }
+  function migrationVersion() {
+    var d = new Date();
+    return "" + d.getUTCFullYear() + pad(d.getUTCMonth() + 1) + pad(d.getUTCDate()) +
+      pad(d.getUTCHours()) + pad(d.getUTCMinutes()) + pad(d.getUTCSeconds());
+  }
+  function tickTimestamps() {
+    var stamp = migrationVersion();
+    document.querySelectorAll("[data-timestamp]").forEach(function (el) {
+      el.textContent = stamp;
+    });
+  }
+  setInterval(tickTimestamps, 1000);
+  tickTimestamps();
+})();