☰

T3 Chat Enhanced UI with Code Execution

Adds a zoomed-out preview scrollbar, code block list, download functionality, and code execution to T3 Chat

  1. // ==UserScript==
  2. // @name         T3 Chat Enhanced UI with Code Execution
  3. // @namespace    http://tampermonkey.net/
  4. // @version      3.4
  5. // @description  Adds a zoomed-out preview scrollbar, code block list, download functionality, and code execution to T3 Chat
  6. // @author       T3 Chat
  7. // @license      MIT
  8. // @match        https://t3.chat/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.   "use strict";
  14.   const C = {
  15.     scale: 0.2,
  16.     thumbHeightVh: 10,
  17.     scrollbarOffset: 20,
  18.     throttleDelay: 3000,
  19.     codeListWidth: 300,
  20.     codeListOffset: 20,
  21.   };
  22.   const EXT = {
  23.     javascript: ".js", js: ".js", typescript: ".ts", ts: ".ts", python: ".py", py: ".py", java: ".java", csharp: ".cs", c: ".c", cpp: ".cpp", "c++": ".cpp", php: ".php", ruby: ".rb", rust: ".rs", go: ".go", html: ".html", css: ".css", scss: ".scss", sql: ".sql", json: ".json", xml: ".xml", yaml: ".yml", bash: ".sh", shell: ".sh", powershell: ".ps1", markdown: ".md", swift: ".swift", kotlin: ".kt", dart: ".dart", r: ".r", perl: ".pl", lua: ".lua", haskell: ".hs", scala: ".scala", elixir: ".ex", clojure: ".clj", dockerfile: "Dockerfile", makefile: "Makefile", plaintext: ".txt", text: ".txt"
  24.   };
  25.   const COMM = {
  26.     javascript: "//", js: "//", typescript: "//", ts: "//", java: "//", csharp: "//", c: "//", cpp: "//", "c++": "//", go: "//", swift: "//", kotlin: "//", dart: "//", php: "//", python: "#", py: "#", ruby: "#", rust: "//", bash: "#", shell: "#", powershell: "#", r: "#", perl: "#", lua: "--", haskell: "--", sql: "--", elixir: "#", clojure: ";;", scala: "//", scss: "//", css: "/*", html: "<!--", xml: "<!--", yaml: "#", json: "", markdown: "", plaintext: "", text: ""
  27.   };
  28.   // Define runnable language types
  29.   const RUNNABLE = {
  30.     javascript: true,
  31.     js: true,
  32.     html: true
  33.   };
  34.   let state = { lastContentUpdate: 0, elements: {}, observers: {}, codeBlocks: [], codeBlockGroups: [] };
  35.   if (window.t3ChatUICleanup) window.t3ChatUICleanup();
  36.  
  37.   function el(tag, css, html) {
  38.     const e = document.createElement(tag);
  39.     if (css) e.style.cssText = css;
  40.     if (html) e.innerHTML = html;
  41.     return e;
  42.   }
  43.  
  44.   function createScrollbar() {
  45.     const s = el("div", `position:fixed;top:0;right:${C.scrollbarOffset}px;width:150px;height:100vh;background:rgba(0,0,0,0.1);overflow:hidden;z-index:1000;`);
  46.     s.id = "t3-chat-preview-scrollbar";
  47.     const pc = el("div", `position:relative;transform:scale(${C.scale});transform-origin:top left;overflow:hidden;pointer-events:none;top:0;`);
  48.     pc.id = "t3-chat-preview-content";
  49.     s.appendChild(pc);
  50.     const t = el("div", `position:absolute;top:0;left:0;width:100%;height:${C.thumbHeightVh}vh;background:rgba(66,135,245,0.5);cursor:grab;`);
  51.     t.id = "t3-chat-preview-thumb";
  52.     s.appendChild(t);
  53.     document.body.appendChild(s);
  54.     t.addEventListener("mousedown", handleThumbDrag);
  55.     s.addEventListener("mousedown", handleScrollbarClick);
  56.     return { scrollbar: s, previewContent: pc, thumb: t };
  57.   }
  58.  
  59.   function createCodeList() {
  60.     const main = document.querySelector("main");
  61.     if (!main) return { codeList: null, listContainer: null };
  62.     const cl = el("div", `position:relative;top:0;left:20px;width:fit-content;height:auto;background:rgba(0,0,0,0.2);overflow-y:auto;z-index:1000;font-family:system-ui,-apple-system,sans-serif;box-shadow:rgba(0,0,0,0.1) 2px 0px 5px;padding:10px;`);
  63.     cl.id = "t3-chat-code-list";
  64.     cl.appendChild(el("div", `font-size:16px;font-weight:bold;margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.2);color:#fff;`, "Code Blocks"));
  65.     const lc = el("div");
  66.     lc.id = "t3-chat-code-list-container";
  67.     cl.appendChild(lc);
  68.     main.appendChild(cl);
  69.     return { codeList: cl, listContainer: lc };
  70.   }
  71.  
  72.   function detectLanguage(cb) {
  73.     const p = cb.parentNode, l = p.querySelector(".font-mono");
  74.     if (l) return l.textContent.trim().toLowerCase();
  75.     const c = cb.getAttribute("data-language") || cb.className.match(/language-(\w+)/)?.[1];
  76.     return c ? c.toLowerCase() : "";
  77.   }
  78.  
  79.   function getFileExtension(l) { return EXT[l.toLowerCase()] || ".txt"; }
  80.   function cleanCodeContent(c) { return c.replace(/^\s*\d+\s*\|/gm, "").trim(); }
  81.   function downloadTextAsFile(f, t) {
  82.     const a = el("a");
  83.     a.href = "data:text/plain;charset=utf-8," + encodeURIComponent(t);
  84.     a.download = f;
  85.     a.style.display = "none";
  86.     document.body.appendChild(a);
  87.     a.click();
  88.     document.body.removeChild(a);
  89.   }
  90.  
  91.   // Create a container to display code execution results
  92.   function createResultDisplay() {
  93.     const existingDisplay = document.getElementById("t3-code-execution-result");
  94.     if (existingDisplay) return existingDisplay;
  95.  
  96.     const display = el("div", `
  97.       position: fixed;
  98.       bottom: 20px;
  99.       right: 20px;
  100.       width: 400px;
  101.       max-height: 300px;
  102.       background: rgba(0, 0, 0, 0.8);
  103.       color: #fff;
  104.       border-radius: 8px;
  105.       padding: 12px;
  106.       font-family: monospace;
  107.       z-index: 10000;
  108.       overflow: auto;
  109.       display: none;
  110.       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  111.     `);
  112.     display.id = "t3-code-execution-result";
  113.  
  114.     const header = el("div", `
  115.       display: flex;
  116.       justify-content: space-between;
  117.       align-items: center;
  118.       margin-bottom: 8px;
  119.       padding-bottom: 8px;
  120.       border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  121.     `, "<span>Code Execution Result</span>");
  122.  
  123.     const closeBtn = el("button", `
  124.       background: transparent;
  125.       border: none;
  126.       color: #fff;
  127.       cursor: pointer;
  128.       font-size: 14px;
  129.       padding: 2px 6px;
  130.     `, "×");
  131.     closeBtn.onclick = () => { display.style.display = "none"; };
  132.     header.appendChild(closeBtn);
  133.  
  134.     const content = el("div", `white-space: pre-wrap;`);
  135.     content.id = "t3-code-execution-content";
  136.  
  137.     display.appendChild(header);
  138.     display.appendChild(content);
  139.     document.body.appendChild(display);
  140.  
  141.     return display;
  142.   }
  143.  
  144.   // Execute code safely
  145.   function executeCode(code, language) {
  146.     const resultDisplay = createResultDisplay();
  147.     const resultContent = document.getElementById("t3-code-execution-content");
  148.     resultDisplay.style.display = "block";
  149.  
  150.     // Capture console output
  151.     const originalLog = console.log;
  152.     const originalError = console.error;
  153.     const originalWarn = console.warn;
  154.     const originalInfo = console.info;
  155.  
  156.     let output = [];
  157.  
  158.     // Override console methods
  159.     console.log = (...args) => {
  160.       originalLog.apply(console, args);
  161.       output.push(`<span style="color:#aaffaa;">LOG:</span> ${args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);
  162.       updateOutput();
  163.     };
  164.  
  165.     console.error = (...args) => {
  166.       originalError.apply(console, args);
  167.       output.push(`<span style="color:#ffaaaa;">ERROR:</span> ${args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);
  168.       updateOutput();
  169.     };
  170.  
  171.     console.warn = (...args) => {
  172.       originalWarn.apply(console, args);
  173.       output.push(`<span style="color:#ffdd99;">WARN:</span> ${args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);
  174.       updateOutput();
  175.     };
  176.  
  177.     console.info = (...args) => {
  178.       originalInfo.apply(console, args);
  179.       output.push(`<span style="color:#99ddff;">INFO:</span> ${args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);
  180.       updateOutput();
  181.     };
  182.  
  183.     function updateOutput() {
  184.       resultContent.innerHTML = output.join('<br>');
  185.       resultContent.scrollTop = resultContent.scrollHeight;
  186.     }
  187.  
  188.     resultContent.innerHTML = '<span style="color:#aaaaff;">Executing code...</span>';
  189.  
  190.     // Special handling for HTML
  191.     if (language === 'html') {
  192.       try {
  193.         // Create a sandbox iframe
  194.         const sandbox = document.createElement('iframe');
  195.         sandbox.style.cssText = 'width:100%;height:200px;border:none;';
  196.         resultContent.innerHTML = '';
  197.         resultContent.appendChild(sandbox);
  198.  
  199.         // Set the HTML content
  200.         const iframeDocument = sandbox.contentDocument || sandbox.contentWindow.document;
  201.         iframeDocument.open();
  202.         iframeDocument.write(code);
  203.         iframeDocument.close();
  204.  
  205.         output.push('<span style="color:#aaffaa;">HTML rendered in iframe</span>');
  206.         updateOutput();
  207.       } catch (error) {
  208.         output.push(`<span style="color:#ffaaaa;">ERROR:</span> ${error.message}`);
  209.         updateOutput();
  210.       }
  211.     } else {
  212.       // For JavaScript
  213.       try {
  214.         // Execute the code
  215.         const result = eval(code);
  216.  
  217.         // Show the return value if any
  218.         if (result !== undefined) {
  219.           let displayResult;
  220.           try {
  221.             displayResult = typeof result === 'object' ?
  222.               JSON.stringify(result, null, 2) :
  223.               String(result);
  224.           } catch (e) {
  225.             displayResult = '[Complex object]';
  226.           }
  227.  
  228.           output.push(`<span style="color:#aaffff;">RESULT:</span> ${displayResult}`);
  229.         }
  230.  
  231.         if (output.length === 0) {
  232.           output.push('<span style="color:#aaffaa;">Code executed successfully with no output</span>');
  233.         }
  234.       } catch (error) {
  235.         output.push(`<span style="color:#ffaaaa;">ERROR:</span> ${error.message}`);
  236.       }
  237.  
  238.       updateOutput();
  239.     }
  240.  
  241.     // Restore console methods
  242.     setTimeout(() => {
  243.       console.log = originalLog;
  244.       console.error = originalError;
  245.       console.warn = originalWarn;
  246.       console.info = originalInfo;
  247.     }, 0);
  248.   }
  249.  
  250.   // Add run button to a code block element
  251.   function addRunButtonToCodeBlock(pre, language, content) {
  252.     // Check if we already added a run button
  253.     if (pre.querySelector('.t3-run-code-btn')) return;
  254.  
  255.     // Only add run button for supported languages
  256.     if (!RUNNABLE[language]) return;
  257.  
  258.     const runBtn = el("button", `
  259.       position: absolute;
  260.       top: 5px;
  261.       right: 5px;
  262.       background: rgba(66, 135, 245, 0.8);
  263.       color: white;
  264.       border: none;
  265.       border-radius: 4px;
  266.       padding: 3px 8px;
  267.       font-size: 12px;
  268.       cursor: pointer;
  269.       opacity: 0.7;
  270.       transition: opacity 0.2s;
  271.       z-index: 10;
  272.     `, "Run");
  273.  
  274.     runBtn.className = "t3-run-code-btn";
  275.     runBtn.title = "Execute this code in the browser";
  276.  
  277.     runBtn.addEventListener("mouseover", () => {
  278.       runBtn.style.opacity = "1";
  279.     });
  280.  
  281.     runBtn.addEventListener("mouseout", () => {
  282.       runBtn.style.opacity = "0.7";
  283.     });
  284.  
  285.     runBtn.addEventListener("click", (e) => {
  286.       e.stopPropagation();
  287.       executeCode(content, language);
  288.     });
  289.  
  290.     // Set the code block to relative positioning if not already set
  291.     if (pre.style.position !== "relative") {
  292.       pre.style.position = "relative";
  293.     }
  294.  
  295.     pre.appendChild(runBtn);
  296.   }
  297.  
  298.   function findCodeBlocks() {
  299.     const groups = [];
  300.     const seen = new Set();
  301.     // Only search within the original document's log div, not in the preview
  302.     const logDiv = document.querySelector('[role="log"]');
  303.     if (!logDiv) return groups;
  304.  
  305.     [["Assistant message", "assistant"], ["Your message", "user"]].forEach(([aria, type]) => {
  306.       logDiv.querySelectorAll(`div[aria-label="${aria}"]`).forEach((msg, mi) => {
  307.         const pres = msg.querySelectorAll(".shiki.not-prose");
  308.         if (!pres.length) return;
  309.         const blocks = [];
  310.         pres.forEach((pre, bi) => {
  311.           if (seen.has(pre)) return;
  312.           seen.add(pre);
  313.           const code = pre.querySelector("code");
  314.           if (!code) return;
  315.           const content = cleanCodeContent(code.textContent || "");
  316.           const lines = content.split("\n");
  317.           const lang = detectLanguage(pre), comm = COMM[lang] || "";
  318.           let name = lines[0]?.trim() || `Code Block ${bi + 1}`;
  319.           if (comm && name.startsWith(comm)) name = name.slice(comm.length).trim();
  320.           if (name.length > 20) name = name.slice(0, 17) + "...";
  321.           const ext = getFileExtension(lang);
  322.           if (ext && !name.endsWith(ext)) name += ext;
  323.  
  324.           // Add run button to the code block in the chat
  325.           addRunButtonToCodeBlock(pre, lang, content);
  326.  
  327.           blocks.push({ id: `${type}-msg-${mi}-block-${bi}`, name, language: lang, element: pre, content, messageType: type });
  328.         });
  329.         if (blocks.length) groups.push({ messageType: type, messageIndex: mi, blocks });
  330.       });
  331.     });
  332.     return groups;
  333.   }
  334.  
  335.   function updateCodeList() {
  336.     const { listContainer } = state.elements;
  337.     if (!listContainer) return;
  338.     const groups = findCodeBlocks();
  339.     state.codeBlockGroups = groups;
  340.     state.codeBlocks = groups.flatMap(g => g.blocks);
  341.     listContainer.innerHTML = "";
  342.     if (!groups.length) {
  343.       listContainer.appendChild(el("div", `color:#666;font-style:italic;padding:10px 0;text-align:center;`, "No code blocks found"));
  344.       return;
  345.     }
  346.     groups.forEach(g => {
  347.       listContainer.appendChild(el("div", `font-size:14px;font-weight:bold;margin-top:15px;margin-bottom:8px;padding:5px;border-radius:4px;color:white;background:${g.messageType === "assistant" ? "rgba(66,135,245,0.6)" : "rgba(120,120,120,0.6)"};`, `${g.messageType === "assistant" ? "Assistant" : "User"} Message #${g.messageIndex + 1}`));
  348.       g.blocks.forEach(b => {
  349.         const item = el("div", `display:flex;justify-content:space-between;align-items:center;padding:8px;margin-bottom:8px;background:${b.messageType === "assistant" ? "rgba(0,0,0,0.4)" : "rgba(60,60,60,0.4)"};border-radius:4px;cursor:pointer;transition:background-color 0.2s;border-left:3px solid ${b.messageType === "assistant" ? "rgba(66,135,245,0.8)" : "rgba(180,180,180,0.8)"};`);
  350.         item.addEventListener("mouseover", () => {
  351.           item.style.backgroundColor = b.messageType === "assistant"
  352.             ? "rgba(66,135,245,0.2)"
  353.             : "rgba(120,120,120,0.2)";
  354.         });
  355.         item.addEventListener("mouseout", () => {
  356.           item.style.backgroundColor = b.messageType === "assistant"
  357.             ? "rgba(0,0,0,0.4)"
  358.             : "rgba(60,60,60,0.4)";
  359.         });
  360.  
  361.         const nameSpan = el("div", `flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;`);
  362.         if (b.language) nameSpan.appendChild(el("span", `background:rgba(66,135,245,0.3);color:white;font-size:10px;padding:1px 4px;border-radius:3px;margin-right:5px;`, b.language));
  363.         nameSpan.appendChild(document.createTextNode(b.name));
  364.         const btns = el("div", `display:flex;gap:5px;`);
  365.  
  366.         // Copy
  367.         const copyBtn = el("button", `background:transparent;border:none;color:rgba(66,135,245,0.8);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:3px;`, `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg>`);
  368.         copyBtn.title = "Copy code";
  369.         copyBtn.onclick = e => {
  370.           e.stopPropagation();
  371.           navigator.clipboard.writeText(b.content).then(() => {
  372.             const o = copyBtn.innerHTML;
  373.             copyBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="2"><path d="M20 6L9 17l-5-5"></path></svg>`;
  374.             setTimeout(() => { copyBtn.innerHTML = o; }, 1500);
  375.           });
  376.         };
  377.  
  378.         // Download
  379.         const dlBtn = el("button", `background:transparent;border:none;color:rgba(66,135,245,0.8);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:3px;`, `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`);
  380.         dlBtn.title = "Download code";
  381.         dlBtn.onclick = e => {
  382.           e.stopPropagation();
  383.           downloadTextAsFile(b.name, b.content);
  384.           const o = dlBtn.innerHTML;
  385.           dlBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="2"><path d="M20 6L9 17l-5-5"></path></svg>`;
  386.           setTimeout(() => (dlBtn.innerHTML = o), 1500);
  387.         };
  388.  
  389.         // Run (only for supported languages)
  390.         if (RUNNABLE[b.language]) {
  391.           const runBtn = el("button", `background:transparent;border:none;color:rgba(66,135,245,0.8);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:3px;`, `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>`);
  392.           runBtn.title = "Run code";
  393.           runBtn.onclick = e => {
  394.             e.stopPropagation();
  395.             executeCode(b.content, b.language);
  396.             const o = runBtn.innerHTML;
  397.             runBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="2"><path d="M20 6L9 17l-5-5"></path></svg>`;
  398.             setTimeout(() => (runBtn.innerHTML = o), 1500);
  399.           };
  400.           btns.appendChild(runBtn);
  401.         }
  402.  
  403.         btns.appendChild(copyBtn);
  404.         btns.appendChild(dlBtn);
  405.         item.appendChild(nameSpan);
  406.         item.appendChild(btns);
  407.         item.onclick = () => {
  408.           b.element.scrollIntoView({ behavior: "smooth", block: "center" });
  409.           const o = b.element.style.outline, ob = b.element.style.backgroundColor;
  410.           b.element.style.outline = "3px solid rgba(66,135,245,0.8)";
  411.           b.element.style.backgroundColor = "rgba(66,135,245,0.1)";
  412.           setTimeout(() => {
  413.             b.element.style.outline = o;
  414.             b.element.style.backgroundColor = ob;
  415.           }, 2000);
  416.         };
  417.         listContainer.appendChild(item);
  418.       });
  419.     });
  420.   }
  421.  
  422.   function updatePreviewContent() {
  423.     const { logDiv, previewContent } = state.elements;
  424.     if (!logDiv || !previewContent) return;
  425.     const now = Date.now();
  426.     if (now - state.lastContentUpdate < C.throttleDelay) return;
  427.     const clone = logDiv.cloneNode(true);
  428.     clone.querySelectorAll("*").forEach(e => { e.style.pointerEvents = "none"; e.style.userSelect = "none"; });
  429.     clone.querySelectorAll(".shiki.not-prose").forEach(e => { e.style.outline = "2px solid #ff9800"; e.style.background = "rgba(255,152,0,0.2)"; e.style.borderRadius = "4px"; });
  430.     previewContent.innerHTML = "";
  431.     previewContent.appendChild(clone);
  432.     previewContent.style.width = logDiv.getBoundingClientRect().width + "px";
  433.     state.lastContentUpdate = now;
  434.   }
  435.  
  436.   function updateThumbPosition() {
  437.     const { scrollParent, thumb, scrollbar, previewContent } = state.elements;
  438.     if (!scrollParent || !thumb || !scrollbar || !previewContent) return;
  439.     const sh = scrollParent.scrollHeight, ch = scrollParent.clientHeight, st = scrollParent.scrollTop, sbh = scrollbar.offsetHeight, th = (C.thumbHeightVh / 100) * window.innerHeight;
  440.     let tp = (sbh - th) * (st / (sh - ch));
  441.     tp = Math.min(Math.max(0, tp), sbh - th);
  442.     thumb.style.height = th + "px";
  443.     thumb.style.top = tp + "px";
  444.     const tc = tp + th / 2;
  445.     previewContent.style.top = `-${st * C.scale - tc}px`;
  446.   }
  447.  
  448.   function handleThumbDrag(e) {
  449.     const { scrollParent, thumb, scrollbar, previewContent } = state.elements;
  450.     if (!scrollParent || !thumb || !scrollbar || !previewContent) return;
  451.     const sh = scrollParent.scrollHeight, ch = scrollParent.clientHeight, sbh = scrollbar.offsetHeight, th = (C.thumbHeightVh / 100) * window.innerHeight, sy = e.clientY, st = thumb.offsetTop;
  452.     function drag(ev) {
  453.       const dy = ev.clientY - sy, nt = Math.max(0, Math.min(st + dy, sbh - th));
  454.       thumb.style.top = nt + "px";
  455.       const sp = (nt / (sbh - th)) * (sh - ch);
  456.       scrollParent.scrollTop = sp;
  457.       const tc = nt + th / 2;
  458.       previewContent.style.top = `-${sp * C.scale - tc}px`;
  459.     }
  460.     function stop() {
  461.       document.removeEventListener("mousemove", drag);
  462.       document.removeEventListener("mouseup", stop);
  463.     }
  464.     document.addEventListener("mousemove", drag);
  465.     document.addEventListener("mouseup", stop);
  466.     e.preventDefault();
  467.   }
  468.  
  469.   function handleScrollbarClick(e) {
  470.     if (e.target === state.elements.thumb) return;
  471.     const { scrollParent, thumb, scrollbar } = state.elements;
  472.     if (!scrollParent || !thumb || !scrollbar) return;
  473.     const r = scrollbar.getBoundingClientRect(), y = e.clientY - r.top, th = (C.thumbHeightVh / 100) * window.innerHeight, tc = thumb.offsetTop + th / 2, dy = y - tc;
  474.     scrollParent.scrollTop = Math.max(0, Math.min(scrollParent.scrollTop + dy / C.scale, scrollParent.scrollHeight - scrollParent.clientHeight));
  475.     updateThumbPosition();
  476.   }
  477.  
  478.   function updateDimensions() {
  479.     const { logDiv, scrollbar, previewContent } = state.elements;
  480.     if (!logDiv || !scrollbar || !previewContent) return;
  481.     const w = logDiv.getBoundingClientRect().width;
  482.     scrollbar.style.width = w * C.scale + "px";
  483.     previewContent.style.width = w + "px";
  484.     updatePreviewContent();
  485.     updateThumbPosition();
  486.     state.observers.height = requestAnimationFrame(updateDimensions);
  487.   }
  488.  
  489.   function initialize() {
  490.     const s = createScrollbar(), c = createCodeList(), logDiv = document.querySelector('[role="log"]'), scrollParent = logDiv?.parentNode;
  491.     state.elements = { ...s, ...c, logDiv, scrollParent };
  492.     if (!logDiv || !scrollParent) return;
  493.  
  494.     // Initial update of code list
  495.     updateCodeList();
  496.  
  497.     // Set up observers
  498.     state.observers.content = new MutationObserver(() => {
  499.       updatePreviewContent();
  500.       updateCodeList();
  501.     });
  502.     state.observers.content.observe(logDiv, { childList: true, subtree: true, characterData: true });
  503.  
  504.     window.addEventListener("resize", () => {
  505.       updatePreviewContent();
  506.       updateCodeList();
  507.     });
  508.  
  509.     scrollParent.addEventListener("scroll", updateThumbPosition);
  510.     updateDimensions();
  511.   }
  512.  
  513.   function cleanup() {
  514.     const { scrollbar, scrollParent, codeList } = state.elements;
  515.     if (scrollbar) scrollbar.remove();
  516.     if (codeList) codeList.remove();
  517.     const main = document.querySelector("main");
  518.     if (main) main.style.paddingLeft = "";
  519.     window.removeEventListener("resize", updatePreviewContent);
  520.     if (scrollParent) scrollParent.removeEventListener("scroll", updateThumbPosition);
  521.     if (state.observers.content) state.observers.content.disconnect();
  522.     if (state.observers.height) cancelAnimationFrame(state.observers.height);
  523.  
  524.     // Clean up the result display
  525.     const resultDisplay = document.getElementById("t3-code-execution-result");
  526.     if (resultDisplay) resultDisplay.remove();
  527.  
  528.     state = { lastContentUpdate: 0, elements: {}, observers: {}, codeBlocks: [], codeBlockGroups: [] };
  529.   }
  530.  
  531.   function waitForLogDiv() {
  532.     const logDiv = document.querySelector('[role="log"]');
  533.     if (logDiv) initialize();
  534.     else setTimeout(waitForLogDiv, 200);
  535.   }
  536.  
  537.   window.t3ChatUICleanup = () => { cleanup(); delete window.t3ChatUICleanup; };
  538.   waitForLogDiv();
  539. })();