Making log window colorful

Guide/database.markdown

@@ -853,3 +853,21 @@ CREATE TABLE users (
     UNIQUE (email, username)
 );
 ```
+
+PostgreSQL constraint names have a **63-byte** limit.
+
+For a multi-column unique constraint, Postgres auto-generates a name from table + column names.  
+For `strategy_factor_regime_online` + `(symbol_id, timeframe, ts, version)`, this becomes a long name (truncated form: `strategy_factor_regime_online_symbol_id_timeframe_ts_version_ke`) and can trigger noisy migrations like:
+
+```sql
+ALTER TABLE strategy_factor_regime_online DROP CONSTRAINT strategy_factor_regime_online_symbol_id_timeframe_ts_version_ke;
+```
+
+Solution: use a short explicit constraint name after `CREATE TABLE strategy_factor_regime_online`:
+
+```sql
+ALTER TABLE strategy_factor_regime_online
+    ADD CONSTRAINT uq_sfr_on_main UNIQUE (symbol_id, timeframe, ts, version);
+```
+
+Alternative: use `CREATE UNIQUE INDEX ...`.

ihp-ide/IHP/IDE/ToolServer/Layout.hs

@@ -24,7 +24,7 @@ toolServerLayout inner = [hsx|
         <script src={assetPath "/vendor/timeago.js"}></script>
         <script src={assetPath "/vendor/popper.min.js"}></script>
         <script src={assetPath "/vendor/bootstrap.min.js"}></script>
-
+        <script type="module" src={assetPath "/vendor/ansi-up.min.js"}></script>
 
         <script src={assetPath "/vendor/turbolinks.js"}></script>
         <script src={assetPath "/vendor/morphdom-umd.min.js"}></script>
@@ -45,6 +45,7 @@ toolServerLayout inner = [hsx|
         <script src={assetPath "/IDE/query-editor.js"}></script>
         <script src={assetPath "/IDE/data-hovercard.js"}></script>
         <script src={assetPath "/IDE/migration-editor.js"}></script>
+        <script type="module" src={assetPath "/IDE/log-color.js"}></script>
 
 
         <title>IHP IDE</title>

ihp-ide/data/static/IDE/log-color.js

@@ -0,0 +1,18 @@
+import { AnsiUp } from "/vendor/ansi-up.min.js";
+
+function renderAnsiLogs() {
+  const pres = document.querySelectorAll('#logs pre');
+  if (pres.length === 0) return;
+
+  const ansiUp = new AnsiUp();
+  ansiUp.use_classes = false;
+
+  pres.forEach(pre => {
+    const ESC = "\u001b";
+    const text = pre.textContent.replace(/\\ESC\[/g, ESC + "[");
+    const html = ansiUp.ansi_to_html(text);
+
+    pre.innerHTML = html;
+  });
+}
+document.addEventListener('turbolinks:load', renderAnsiLogs);