☰

TweetFilter AI

A highly customizable AI rates tweets 1-10 and removes all the slop, saving your braincells!

当前为 2025-04-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         TweetFilter AI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      Version 1.3
  5. // @description  A highly customizable AI rates tweets 1-10 and removes all the slop, saving your braincells!
  6. // @author       Obsxrver(3than)
  7. // @match        *://twitter.com/*
  8. // @match        *://x.com/*
  9. // @grant        GM_addStyle
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @grant        GM_xmlhttpRequest
  13. // @grant        GM_getResourceText
  14. // @connect      openrouter.ai
  15. // @run-at       document-idle
  16. // @license      MIT
  17. // ==/UserScript==
  18. (function() {
  19.     'use strict';
  20.     console.log("X/Twitter Tweet De-Sloppification Activated (Combined Version)");
  21.  
  22.     // Embedded Menu.html
  23.     const MENU = `
  24. <style>
  25. /*
  26.         Modern X-Inspired Styles - Enhanced
  27.         ---------------------------------
  28.     */
  29.  
  30.     /* Main tweet filter container */
  31.     #tweet-filter-container {
  32.         position: fixed;
  33.         top: 70px;
  34.         right: 15px;
  35.         background-color: rgba(22, 24, 28, 0.95);
  36.         color: #e7e9ea;
  37.         padding: 10px 12px;
  38.         border-radius: 12px;
  39.         z-index: 9999;
  40.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  41.         font-size: 13px;
  42.         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  43.         display: flex;
  44.         align-items: center;
  45.         gap: 10px;
  46.         border: 1px solid rgba(255, 255, 255, 0.1);
  47.     }
  48.  
  49.     /* Close button styles */
  50.     .close-button {
  51.         background: none;
  52.         border: none;
  53.         color: #e7e9ea;
  54.         font-size: 16px;
  55.         cursor: pointer;
  56.         padding: 0;
  57.         width: 28px;
  58.         height: 28px;
  59.         display: flex;
  60.         align-items: center;
  61.         justify-content: center;
  62.         opacity: 0.8;
  63.         transition: opacity 0.2s;
  64.         border-radius: 50%;
  65.     }
  66.  
  67.     .close-button:hover {
  68.         opacity: 1;
  69.         background-color: rgba(255, 255, 255, 0.1);
  70.     }
  71.  
  72.     /* Hidden state */
  73.     .hidden {
  74.         display: none !important;
  75.     }
  76.  
  77.     /* Show/hide button */
  78.     .toggle-button {
  79.         position: fixed;
  80.         right: 15px;
  81.         background-color: rgba(22, 24, 28, 0.95);
  82.         color: #e7e9ea;
  83.         padding: 8px 12px;
  84.         border-radius: 8px;
  85.         cursor: pointer;
  86.         font-size: 12px;
  87.         z-index: 9999;
  88.         border: 1px solid rgba(255, 255, 255, 0.1);
  89.         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  90.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  91.         display: flex;
  92.         align-items: center;
  93.         gap: 6px;
  94.         transition: all 0.2s ease;
  95.     }
  96.     
  97.     .toggle-button:hover {
  98.         background-color: rgba(29, 155, 240, 0.2);
  99.     }
  100.  
  101.     #filter-toggle {
  102.         top: 70px;
  103.     }
  104.  
  105.     #settings-toggle {
  106.         top: 120px;
  107.     }
  108.  
  109.     #tweet-filter-container label {
  110.         margin: 0;
  111.         font-weight: bold;
  112.     }
  113.  
  114.     #tweet-filter-slider {
  115.         cursor: pointer;
  116.         width: 120px;
  117.         vertical-align: middle;
  118.         accent-color: #1d9bf0;
  119.     }
  120.  
  121.     #tweet-filter-value {
  122.         min-width: 20px;
  123.         text-align: center;
  124.         font-weight: bold;
  125.         background-color: rgba(255, 255, 255, 0.1);
  126.         padding: 2px 5px;
  127.         border-radius: 4px;
  128.     }
  129.  
  130.     /* Settings UI with Tabs */
  131.     #settings-container {
  132.         position: fixed;
  133.         top: 70px;
  134.         right: 15px;
  135.         background-color: rgba(22, 24, 28, 0.95);
  136.         color: #e7e9ea;
  137.         padding: 0; /* Remove padding to accommodate sticky header */
  138.         border-radius: 16px;
  139.         z-index: 9999;
  140.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  141.         font-size: 13px;
  142.         box-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  143.         display: flex;
  144.         flex-direction: column;
  145.         width: 380px;
  146.         max-height: 85vh;
  147.         overflow: hidden; /* Hide overflow to make the sticky header work properly */
  148.         border: 1px solid rgba(255, 255, 255, 0.1);
  149.         line-height: 1.3;
  150.         transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  151.         transform-origin: top right;
  152.     }
  153.     
  154.     #settings-container.hidden {
  155.         opacity: 0;
  156.         transform: scale(0.9);
  157.         pointer-events: none;
  158.     }
  159.     
  160.     /* Header section */
  161.     .settings-header {
  162.         padding: 12px 15px;
  163.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  164.         display: flex;
  165.         justify-content: space-between;
  166.         align-items: center;
  167.         position: sticky;
  168.         top: 0;
  169.         background-color: rgba(22, 24, 28, 0.98);
  170.         z-index: 20;
  171.         border-radius: 16px 16px 0 0;
  172.     }
  173.     
  174.     .settings-title {
  175.         font-weight: bold;
  176.         font-size: 16px;
  177.     }
  178.     
  179.     /* Content area with scrolling */
  180.     .settings-content {
  181.         overflow-y: auto;
  182.         max-height: calc(85vh - 110px); /* Account for header and tabs */
  183.         padding: 0;
  184.     }
  185.     
  186.     /* Scrollbar styling for settings container */
  187.     .settings-content::-webkit-scrollbar {
  188.         width: 6px;
  189.     }
  190.  
  191.     .settings-content::-webkit-scrollbar-track {
  192.         background: rgba(255, 255, 255, 0.05);
  193.         border-radius: 3px;
  194.     }
  195.  
  196.     .settings-content::-webkit-scrollbar-thumb {
  197.         background: rgba(255, 255, 255, 0.2);
  198.         border-radius: 3px;
  199.     }
  200.  
  201.     .settings-content::-webkit-scrollbar-thumb:hover {
  202.         background: rgba(255, 255, 255, 0.3);
  203.     }
  204.  
  205.     /* Tab Navigation */
  206.     .tab-navigation {
  207.         display: flex;
  208.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  209.         position: sticky;
  210.         top: 0;
  211.         background-color: rgba(22, 24, 28, 0.98);
  212.         z-index: 10;
  213.         padding: 10px 15px;
  214.         gap: 8px;
  215.     }
  216.  
  217.     .tab-button {
  218.         padding: 6px 10px;
  219.         background: none;
  220.         border: none;
  221.         color: #e7e9ea;
  222.         font-weight: bold;
  223.         cursor: pointer;
  224.         border-radius: 8px;
  225.         transition: all 0.2s ease;
  226.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  227.         font-size: 13px;
  228.         flex: 1;
  229.         text-align: center;
  230.     }
  231.  
  232.     .tab-button:hover {
  233.         background-color: rgba(255, 255, 255, 0.1);
  234.     }
  235.  
  236.     .tab-button.active {
  237.         color: #1d9bf0;
  238.         background-color: rgba(29, 155, 240, 0.1);
  239.         border-bottom: 2px solid #1d9bf0;
  240.     }
  241.  
  242.     /* Tab Content */
  243.     .tab-content {
  244.         display: none;
  245.         animation: fadeIn 0.3s ease;
  246.         padding: 15px;
  247.     }
  248.     
  249.     @keyframes fadeIn {
  250.         from { opacity: 0; }
  251.         to { opacity: 1; }
  252.     }
  253.  
  254.     .tab-content.active {
  255.         display: block;
  256.     }
  257.  
  258.     /* Enhanced dropdowns */
  259.     .select-container {
  260.         position: relative;
  261.         margin-bottom: 15px;
  262.     }
  263.     
  264.     .select-container .search-field {
  265.         position: sticky;
  266.         top: 0;
  267.         background-color: rgba(39, 44, 48, 0.95);
  268.         padding: 8px;
  269.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  270.         z-index: 1;
  271.     }
  272.     
  273.     .select-container .search-input {
  274.         width: 100%;
  275.         padding: 8px 10px;
  276.         border-radius: 8px;
  277.         border: 1px solid rgba(255, 255, 255, 0.2);
  278.         background-color: rgba(39, 44, 48, 0.9);
  279.         color: #e7e9ea;
  280.         font-size: 12px;
  281.         transition: border-color 0.2s;
  282.     }
  283.     
  284.     .select-container .search-input:focus {
  285.         border-color: #1d9bf0;
  286.         outline: none;
  287.     }
  288.     
  289.     .custom-select {
  290.         position: relative;
  291.         display: inline-block;
  292.         width: 100%;
  293.     }
  294.     
  295.     .select-selected {
  296.         background-color: rgba(39, 44, 48, 0.95);
  297.         color: #e7e9ea;
  298.         padding: 10px 12px;
  299.         border: 1px solid rgba(255, 255, 255, 0.2);
  300.         border-radius: 8px;
  301.         cursor: pointer;
  302.         user-select: none;
  303.         display: flex;
  304.         justify-content: space-between;
  305.         align-items: center;
  306.         font-size: 13px;
  307.         transition: border-color 0.2s;
  308.     }
  309.     
  310.     .select-selected:hover {
  311.         border-color: rgba(255, 255, 255, 0.4);
  312.     }
  313.     
  314.     .select-selected:after {
  315.         content: "";
  316.         width: 8px;
  317.         height: 8px;
  318.         border: 2px solid #e7e9ea;
  319.         border-width: 0 2px 2px 0;
  320.         display: inline-block;
  321.         transform: rotate(45deg);
  322.         margin-left: 10px;
  323.         transition: transform 0.2s;
  324.     }
  325.     
  326.     .select-selected.select-arrow-active:after {
  327.         transform: rotate(-135deg);
  328.     }
  329.     
  330.     .select-items {
  331.         position: absolute;
  332.         background-color: rgba(39, 44, 48, 0.98);
  333.         top: 100%;
  334.         left: 0;
  335.         right: 0;
  336.         z-index: 99;
  337.         max-height: 300px;
  338.         overflow-y: auto;
  339.         border: 1px solid rgba(255, 255, 255, 0.2);
  340.         border-radius: 8px;
  341.         margin-top: 5px;
  342.         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  343.         display: none;
  344.     }
  345.     
  346.     .select-items div {
  347.         color: #e7e9ea;
  348.         padding: 10px 12px;
  349.         cursor: pointer;
  350.         user-select: none;
  351.         transition: background-color 0.2s;
  352.         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  353.     }
  354.     
  355.     .select-items div:hover {
  356.         background-color: rgba(29, 155, 240, 0.1);
  357.     }
  358.     
  359.     .select-items div.same-as-selected {
  360.         background-color: rgba(29, 155, 240, 0.2);
  361.     }
  362.     
  363.     /* Scrollbar for select items */
  364.     .select-items::-webkit-scrollbar {
  365.         width: 6px;
  366.     }
  367.     
  368.     .select-items::-webkit-scrollbar-track {
  369.         background: rgba(255, 255, 255, 0.05);
  370.     }
  371.     
  372.     .select-items::-webkit-scrollbar-thumb {
  373.         background: rgba(255, 255, 255, 0.2);
  374.         border-radius: 3px;
  375.     }
  376.     
  377.     .select-items::-webkit-scrollbar-thumb:hover {
  378.         background: rgba(255, 255, 255, 0.3);
  379.     }
  380.     
  381.     /* Form elements */
  382.     #openrouter-api-key,
  383.     #user-instructions {
  384.         width: 100%;
  385.         padding: 10px 12px;
  386.         border-radius: 8px;
  387.         border: 1px solid rgba(255, 255, 255, 0.2);
  388.         margin-bottom: 12px;
  389.         background-color: rgba(39, 44, 48, 0.95);
  390.         color: #e7e9ea;
  391.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  392.         font-size: 13px;
  393.         transition: border-color 0.2s;
  394.     }
  395.     
  396.     #openrouter-api-key:focus,
  397.     #user-instructions:focus {
  398.         border-color: #1d9bf0;
  399.         outline: none;
  400.     }
  401.  
  402.     #user-instructions {
  403.         height: 120px;
  404.         resize: vertical;
  405.     }
  406.  
  407.     /* Parameter controls */
  408.     .parameter-row {
  409.         display: flex;
  410.         align-items: center;
  411.         margin-bottom: 12px;
  412.         gap: 8px;
  413.         padding: 6px;
  414.         border-radius: 8px;
  415.         transition: background-color 0.2s;
  416.     }
  417.     
  418.     .parameter-row:hover {
  419.         background-color: rgba(255, 255, 255, 0.05);
  420.     }
  421.  
  422.     .parameter-label {
  423.         flex: 1;
  424.         font-size: 13px;
  425.         color: #e7e9ea;
  426.     }
  427.  
  428.     .parameter-control {
  429.         flex: 1.5;
  430.         display: flex;
  431.         align-items: center;
  432.         gap: 8px;
  433.     }
  434.  
  435.     .parameter-value {
  436.         min-width: 28px;
  437.         text-align: center;
  438.         background-color: rgba(255, 255, 255, 0.1);
  439.         padding: 3px 5px;
  440.         border-radius: 4px;
  441.         font-size: 12px;
  442.     }
  443.  
  444.     .parameter-slider {
  445.         flex: 1;
  446.         -webkit-appearance: none;
  447.         height: 4px;
  448.         border-radius: 4px;
  449.         background: rgba(255, 255, 255, 0.2);
  450.         outline: none;
  451.         cursor: pointer;
  452.     }
  453.  
  454.     .parameter-slider::-webkit-slider-thumb {
  455.         -webkit-appearance: none;
  456.         appearance: none;
  457.         width: 14px;
  458.         height: 14px;
  459.         border-radius: 50%;
  460.         background: #1d9bf0;
  461.         cursor: pointer;
  462.         transition: transform 0.1s;
  463.     }
  464.     
  465.     .parameter-slider::-webkit-slider-thumb:hover {
  466.         transform: scale(1.2);
  467.     }
  468.  
  469.     /* Section styles */
  470.     .section-title {
  471.         font-weight: bold;
  472.         margin-top: 20px;
  473.         margin-bottom: 8px;
  474.         color: #e7e9ea;
  475.         display: flex;
  476.         align-items: center;
  477.         gap: 6px;
  478.         font-size: 14px;
  479.     }
  480.     
  481.     .section-title:first-child {
  482.         margin-top: 0;
  483.     }
  484.  
  485.     .section-description {
  486.         font-size: 12px;
  487.         margin-bottom: 8px;
  488.         opacity: 0.8;
  489.         line-height: 1.4;
  490.     }
  491.     
  492.     /* Advanced options section */
  493.     .advanced-options {
  494.         margin-top: 5px;
  495.         margin-bottom: 15px;
  496.         border: 1px solid rgba(255, 255, 255, 0.1);
  497.         border-radius: 8px;
  498.         padding: 12px;
  499.         background-color: rgba(255, 255, 255, 0.03);
  500.         overflow: hidden;
  501.     }
  502.     
  503.     .advanced-toggle {
  504.         display: flex;
  505.         justify-content: space-between;
  506.         align-items: center;
  507.         cursor: pointer;
  508.         margin-bottom: 5px;
  509.     }
  510.     
  511.     .advanced-toggle-title {
  512.         font-weight: bold;
  513.         font-size: 13px;
  514.         color: #e7e9ea;
  515.     }
  516.     
  517.     .advanced-toggle-icon {
  518.         transition: transform 0.3s;
  519.     }
  520.     
  521.     .advanced-toggle-icon.expanded {
  522.         transform: rotate(180deg);
  523.     }
  524.     
  525.     .advanced-content {
  526.         max-height: 0;
  527.         overflow: hidden;
  528.         transition: max-height 0.3s ease-in-out;
  529.     }
  530.     
  531.     .advanced-content.expanded {
  532.         max-height: 300px;
  533.     }
  534.  
  535.     /* Handle list styling */
  536.     .handle-list {
  537.         margin-top: 10px;
  538.         max-height: 120px;
  539.         overflow-y: auto;
  540.         border: 1px solid rgba(255, 255, 255, 0.1);
  541.         border-radius: 8px;
  542.         padding: 5px;
  543.     }
  544.  
  545.     .handle-item {
  546.         display: flex;
  547.         align-items: center;
  548.         justify-content: space-between;
  549.         padding: 6px 10px;
  550.         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  551.         border-radius: 4px;
  552.         transition: background-color 0.2s;
  553.     }
  554.     
  555.     .handle-item:hover {
  556.         background-color: rgba(255, 255, 255, 0.05);
  557.     }
  558.  
  559.     .handle-item:last-child {
  560.         border-bottom: none;
  561.     }
  562.  
  563.     .handle-text {
  564.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  565.         font-size: 12px;
  566.     }
  567.  
  568.     .remove-handle {
  569.         background: none;
  570.         border: none;
  571.         color: #ff5c5c;
  572.         cursor: pointer;
  573.         font-size: 14px;
  574.         padding: 0 3px;
  575.         opacity: 0.7;
  576.         transition: opacity 0.2s;
  577.     }
  578.     
  579.     .remove-handle:hover {
  580.         opacity: 1;
  581.     }
  582.  
  583.     .add-handle-btn {
  584.         background-color: #1d9bf0;
  585.         color: white;
  586.         border: none;
  587.         border-radius: 6px;
  588.         padding: 7px 10px;
  589.         cursor: pointer;
  590.         font-weight: bold;
  591.         font-size: 12px;
  592.         margin-left: 5px;
  593.         transition: background-color 0.2s;
  594.     }
  595.     
  596.     .add-handle-btn:hover {
  597.         background-color: #1a8cd8;
  598.     }
  599.  
  600.     /* Button styling */
  601.     .settings-button {
  602.         background-color: #1d9bf0;
  603.         color: white;
  604.         border: none;
  605.         border-radius: 8px;
  606.         padding: 10px 14px;
  607.         cursor: pointer;
  608.         font-weight: bold;
  609.         transition: background-color 0.2s;
  610.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  611.         margin-top: 8px;
  612.         width: 100%;
  613.         font-size: 13px;
  614.     }
  615.  
  616.     .settings-button:hover {
  617.         background-color: #1a8cd8;
  618.     }
  619.  
  620.     .settings-button.secondary {
  621.         background-color: rgba(255, 255, 255, 0.1);
  622.     }
  623.     
  624.     .settings-button.secondary:hover {
  625.         background-color: rgba(255, 255, 255, 0.15);
  626.     }
  627.  
  628.     .settings-button.danger {
  629.         background-color: #ff5c5c;
  630.     }
  631.  
  632.     .settings-button.danger:hover {
  633.         background-color: #e53935;
  634.     }
  635.     
  636.     /* For smaller buttons that sit side by side */
  637.     .button-row {
  638.         display: flex;
  639.         gap: 8px;
  640.         margin-top: 10px;
  641.     }
  642.     
  643.     .button-row .settings-button {
  644.         margin-top: 0;
  645.     }
  646.     
  647.     /* Stats display */
  648.     .stats-container {
  649.         background-color: rgba(255, 255, 255, 0.05);
  650.         padding: 10px;
  651.         border-radius: 8px;
  652.         margin-bottom: 15px;
  653.     }
  654.     
  655.     .stats-row {
  656.         display: flex;
  657.         justify-content: space-between;
  658.         padding: 5px 0;
  659.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  660.     }
  661.     
  662.     .stats-row:last-child {
  663.         border-bottom: none;
  664.     }
  665.     
  666.     .stats-label {
  667.         font-size: 12px;
  668.         opacity: 0.8;
  669.     }
  670.     
  671.     .stats-value {
  672.         font-weight: bold;
  673.     }
  674.  
  675.     /* Rating indicator shown on tweets */ 
  676.     .score-indicator {
  677.         position: absolute;
  678.         top: 10px;
  679.         right: 10.5%;
  680.         background-color: rgba(22, 24, 28, 0.9);
  681.         color: #e7e9ea;
  682.         padding: 4px 10px;
  683.         border-radius: 8px;
  684.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  685.         font-size: 14px;
  686.         font-weight: bold;
  687.         z-index: 100;
  688.         cursor: pointer;
  689.         border: 1px solid rgba(255, 255, 255, 0.1);
  690.         min-width: 20px;
  691.         text-align: center;
  692.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  693.         transition: transform 0.15s ease;
  694.     }
  695.     
  696.     .score-indicator:hover {
  697.         transform: scale(1.05);
  698.     }
  699.  
  700.     /* Refresh animation */
  701.     .refreshing {
  702.         animation: spin 1s infinite linear;
  703.     }
  704.  
  705.     @keyframes spin {
  706.         0% { transform: rotate(0deg); }
  707.         100% { transform: rotate(360deg); }
  708.     }
  709.  
  710.     /* The description box for ratings */
  711.     .score-description {
  712.         display: none;
  713.         background-color: rgba(22, 24, 28, 0.95);
  714.         color: #e7e9ea;
  715.         padding: 16px 20px;
  716.         border-radius: 12px;
  717.         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  718.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  719.         font-size: 16px;
  720.         line-height: 1.5;
  721.         z-index: 99999999;
  722.         position: absolute;
  723.         width: clamp(300px, 30vw, 500px);
  724.         max-height: 60vh;
  725.         overflow-y: auto;
  726.         border: 1px solid rgba(255, 255, 255, 0.1);
  727.         word-wrap: break-word;
  728.     }
  729.  
  730.     /* Rating status classes */
  731.     .cached-rating {
  732.         background-color: rgba(76, 175, 80, 0.9) !important;
  733.         color: white !important;
  734.     }
  735.  
  736.     .blacklisted-rating {
  737.         background-color: rgba(255, 193, 7, 0.9) !important;
  738.         color: black !important;
  739.     }
  740.  
  741.     .pending-rating {
  742.         background-color: rgba(255, 152, 0, 0.9) !important;
  743.         color: white !important;
  744.     }
  745.  
  746.     .error-rating {
  747.         background-color: rgba(244, 67, 54, 0.9) !important;
  748.         color: white !important;
  749.     }
  750.  
  751.     /* Status indicator at bottom-right */
  752.     #status-indicator {
  753.         position: fixed;
  754.         bottom: 20px;
  755.         right: 20px;
  756.         background-color: rgba(22, 24, 28, 0.95);
  757.         color: #e7e9ea;
  758.         padding: 10px 15px;
  759.         border-radius: 8px;
  760.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  761.         font-size: 12px;
  762.         z-index: 9999;
  763.         display: none;
  764.         border: 1px solid rgba(255, 255, 255, 0.1);
  765.         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  766.         transform: translateY(100px);
  767.         transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  768.     }
  769.  
  770.     #status-indicator.active {
  771.         display: block;
  772.         transform: translateY(0);
  773.     }
  774.     
  775.     /* Toggle switch styling */
  776.     .toggle-switch {
  777.         position: relative;
  778.         display: inline-block;
  779.         width: 36px;
  780.         height: 20px;
  781.     }
  782.     
  783.     .toggle-switch input {
  784.         opacity: 0;
  785.         width: 0;
  786.         height: 0;
  787.     }
  788.     
  789.     .toggle-slider {
  790.         position: absolute;
  791.         cursor: pointer;
  792.         top: 0;
  793.         left: 0;
  794.         right: 0;
  795.         bottom: 0;
  796.         background-color: rgba(255, 255, 255, 0.2);
  797.         transition: .3s;
  798.         border-radius: 34px;
  799.     }
  800.     
  801.     .toggle-slider:before {
  802.         position: absolute;
  803.         content: "";
  804.         height: 16px;
  805.         width: 16px;
  806.         left: 2px;
  807.         bottom: 2px;
  808.         background-color: white;
  809.         transition: .3s;
  810.         border-radius: 50%;
  811.     }
  812.     
  813.     input:checked + .toggle-slider {
  814.         background-color: #1d9bf0;
  815.     }
  816.     
  817.     input:checked + .toggle-slider:before {
  818.         transform: translateX(16px);
  819.     }
  820.     
  821.     .toggle-row {
  822.         display: flex;
  823.         align-items: center;
  824.         justify-content: space-between;
  825.         padding: 8px 10px;
  826.         margin-bottom: 12px;
  827.         background-color: rgba(255, 255, 255, 0.05);
  828.         border-radius: 8px;
  829.         transition: background-color 0.2s;
  830.     }
  831.     
  832.     .toggle-row:hover {
  833.         background-color: rgba(255, 255, 255, 0.08);
  834.     }
  835.     
  836.     .toggle-label {
  837.         font-size: 13px;
  838.         color: #e7e9ea;
  839.     }
  840.  
  841.     /* Existing styles */
  842.     
  843.     /* Sort container styles */
  844.     .sort-container {
  845.         margin: 10px 0;
  846.         display: flex;
  847.         align-items: center;
  848.         gap: 10px;
  849.     }
  850.     
  851.     .sort-container label {
  852.         font-size: 14px;
  853.         color: var(--text-color);
  854.     }
  855.     
  856.     .sort-container select {
  857.         padding: 5px 10px;
  858.         border-radius: 4px;
  859.         border: 1px solid rgba(255, 255, 255, 0.2);
  860.         background-color: rgba(39, 44, 48, 0.95);
  861.         color: #e7e9ea;
  862.         font-size: 14px;
  863.         cursor: pointer;
  864.     }
  865.     
  866.     .sort-container select:hover {
  867.         border-color: #1d9bf0;
  868.     }
  869.     
  870.     .sort-container select:focus {
  871.         outline: none;
  872.         border-color: #1d9bf0;
  873.         box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2);
  874.     }
  875.     
  876.     /* Dropdown option styling */
  877.     .sort-container select option {
  878.         background-color: rgba(39, 44, 48, 0.95);
  879.         color: #e7e9ea;
  880.     }
  881. </style>
  882. <div id="tweetfilter-root-container">
  883.     <button id="filter-toggle" class="toggle-button" style="display: none;">Filter Slider</button>
  884.     <div id="tweet-filter-container">
  885.         <button class="close-button" data-action="close-filter">×</button>
  886.         <label for="tweet-filter-slider">SlopScore:</label>
  887.         <input type="range" id="tweet-filter-slider" min="1" max="10" step="1">
  888.         <span id="tweet-filter-value">5</span>
  889.     </div>
  890.  
  891.     <button id="settings-toggle" class="toggle-button">
  892.         <span style="font-size: 14px;">⚙️</span> Settings
  893.     </button>
  894.     <div id="settings-container" class="hidden">
  895.         <div class="settings-header">
  896.             <div class="settings-title">Twitter De-Sloppifier</div>
  897.             <button class="close-button" data-action="close-settings">×</button>
  898.         </div>
  899.         <div class="settings-content">
  900.             <div class="tab-navigation">
  901.                 <button class="tab-button active" data-tab="general">General</button>
  902.                 <button class="tab-button" data-tab="models">Models</button>
  903.                 <button class="tab-button" data-tab="instructions">Instructions</button>
  904.             </div>
  905.             <div id="general-tab" class="tab-content active">
  906.                 <div class="section-title"><span style="font-size: 14px;">🔑</span> OpenRouter API Key <a href="https://openrouter.ai/" target="_blank">Get one here</a></div>
  907.                 <input id="openrouter-api-key" placeholder="Enter your OpenRouter API key">
  908.                 <button class="settings-button" data-action="save-api-key">Save API Key</button>
  909.                 <div class="section-title" style="margin-top: 20px;"><span style="font-size: 14px;">🗄️</span> Cache Statistics</div>
  910.                 <div class="stats-container">
  911.                     <div class="stats-row">
  912.                         <div class="stats-label">Cached Tweet Ratings</div>
  913.                         <div class="stats-value" id="cached-ratings-count">0</div>
  914.                     </div>
  915.                     <div class="stats-row">
  916.                         <div class="stats-label">Whitelisted Handles</div>
  917.                         <div class="stats-value" id="whitelisted-handles-count">0</div>
  918.                     </div>
  919.                 </div>
  920.                 <button id="clear-cache" class="settings-button danger" data-action="clear-cache">Clear Rating Cache</button>
  921.                 <div class="section-title" style="margin-top: 20px;">
  922.                     <span style="font-size: 14px;">💾</span> Backup &amp; Restore
  923.                 </div>
  924.                 <div class="section-description">
  925.                     Export your settings and cached ratings to a file for backup, or import previously saved settings.
  926.                 </div>
  927.                 <div class="button-row">
  928.                     <button class="settings-button secondary" data-action="export-settings">Export Settings</button>
  929.                     <button class="settings-button secondary" data-action="import-settings">Import Settings</button>
  930.                 </div>
  931.                 <button class="settings-button danger" style="margin-top: 15px;" data-action="reset-settings">Reset to Defaults</button>
  932.                 <div id="version-info" style="margin-top: 20px; font-size: 11px; opacity: 0.6; text-align: center;">Twitter De-Sloppifier v?.?</div>
  933.             </div>
  934.             <div id="models-tab" class="tab-content">
  935.                 <div class="section-title">
  936.                     <span style="font-size: 14px;">🧠</span> Tweet Rating Model
  937.                 </div>
  938.                 <div class="section-description">
  939.                     Hint: If you want to rate tweets with images, you need to select an image model.
  940.                 </div>
  941.                 <div class="sort-container">
  942.                     <label for="model-sort-order">Sort models by: </label>
  943.                     <select id="model-sort-order" data-setting="modelSortOrder">
  944.                         <option value="price-low-to-high">Price (Low to High)</option>
  945.                         <option value="price-high-to-low">Price (High to Low)</option>
  946.                         <option value="throughput-high-to-low">Throughput (High to Low)</option>
  947.                         <option value="throughput-low-to-high">Throughput (Low to High)</option>
  948.                         <option value="latency-low-to-high">Latency (Low to High)</option>
  949.                         <option value="latency-high-to-low">Latency (High to Low)</option>
  950.                     </select>
  951.                 </div>
  952.                 <div class="select-container" id="model-select-container">
  953.                 </div>
  954.                 <div class="advanced-options" id="rating-advanced-options">
  955.                     <div class="advanced-toggle" data-toggle="rating-advanced-content">
  956.                         <div class="advanced-toggle-title">Advanced Options</div>
  957.                         <div class="advanced-toggle-icon">▼</div>
  958.                     </div>
  959.                     <div class="advanced-content" id="rating-advanced-content">
  960.                         <div class="parameter-row" data-param-name="modelTemperature">
  961.                             <div class="parameter-label" title="How random the model responses should be (0.0-1.0)">Temperature</div>
  962.                             <div class="parameter-control">
  963.                                 <input type="range" class="parameter-slider" min="0" max="1" step="0.1">
  964.                                 <input type="number" class="parameter-value" min="0" max="1" step="0.1" style="width: 60px;">
  965.                             </div>
  966.                         </div>
  967.                         <div class="parameter-row" data-param-name="modelTopP">
  968.                             <div class="parameter-label" title="Nucleus sampling parameter (0.0-1.0)">Top-p</div>
  969.                             <div class="parameter-control">
  970.                                 <input type="range" class="parameter-slider" min="0" max="1" step="0.1">
  971.                                 <input type="number" class="parameter-value" min="0" max="1" step="0.1" style="width: 60px;">
  972.                             </div>
  973.                         </div>
  974.                         <div class="parameter-row" data-param-name="maxTokens">
  975.                             <div class="parameter-label" title="Maximum number of tokens for the response (0 means no limit)">Max Tokens</div>
  976.                             <div class="parameter-control">
  977.                                 <input type="range" class="parameter-slider" min="0" max="2000" step="100">
  978.                                 <input type="number" class="parameter-value" min="0" max="2000" step="100" style="width: 60px;">
  979.                             </div>
  980.                         </div>
  981.                     </div>
  982.                 </div>
  983.                 <div class="section-title" style="margin-top: 25px;"><span style="font-size: 14px;">🖼️</span> Image Processing Model</div>
  984.                 <div class="section-description">This model generates <strong>text descriptions</strong> of images, which are then sent to the rating model above. If you've selected an image-capable model (🖼️) as your main rating model above, you can disable this to process images directly.</div>
  985.                 <div class="toggle-row">
  986.                     <div class="toggle-label">Enable Image Descriptions</div>
  987.                     <label class="toggle-switch">
  988.                         <input type="checkbox" data-setting="enableImageDescriptions">
  989.                         <span class="toggle-slider"></span>
  990.                     </label>
  991.                 </div>
  992.                 <div id="image-model-container" style="display: none;">
  993.                     <div class="section-description">Select a model with vision capabilities to describe images in tweets.</div>
  994.                     <div class="select-container" id="image-model-select-container">
  995.                     </div>
  996.                     <div class="advanced-options" id="image-advanced-options">
  997.                         <div class="advanced-toggle" data-toggle="image-advanced-content">
  998.                             <div class="advanced-toggle-title">Advanced Options</div>
  999.                             <div class="advanced-toggle-icon">▼</div>
  1000.                         </div>
  1001.                         <div class="advanced-content" id="image-advanced-content">
  1002.                             <div class="parameter-row" data-param-name="imageModelTemperature">
  1003.                                 <div class="parameter-label" title="Randomness for image descriptions (0.0-1.0)">Temperature</div>
  1004.                                 <div class="parameter-control">
  1005.                                     <input type="range" class="parameter-slider" min="0" max="1" step="0.1">
  1006.                                     <input type="number" class="parameter-value" min="0" max="1" step="0.1" style="width: 60px;">
  1007.                                 </div>
  1008.                             </div>
  1009.                             <div class="parameter-row" data-param-name="imageModelTopP">
  1010.                                 <div class="parameter-label" title="Nucleus sampling for image model (0.0-1.0)">Top-p</div>
  1011.                                 <div class="parameter-control">
  1012.                                     <input type="range" class="parameter-slider" min="0" max="1" step="0.1">
  1013.                                     <input type="number" class="parameter-value" min="0" max="1" step="0.1" style="width: 60px;">
  1014.                                 </div>
  1015.                             </div>
  1016.                         </div>
  1017.                     </div>
  1018.                 </div>
  1019.             </div>
  1020.             <div id="instructions-tab" class="tab-content">
  1021.                 <div class="section-title">Custom Tweet Rating Instructions</div>
  1022.                 <div class="section-description">Add custom instructions for how the model should score tweets:</div>
  1023.                 <textarea id="user-instructions" placeholder="Examples:
  1024.                 - Give high scores to tweets about technology
  1025.                 - Penalize clickbait-style tweets
  1026.                 - Rate educational content higher" data-setting="userDefinedInstructions" value=""></textarea>
  1027.                 <button class="settings-button" data-action="save-instructions">Save Instructions</button>
  1028.                 <div class="section-title" style="margin-top: 20px;">Auto-Rate Handles as 10/10</div>
  1029.                 <div class="section-description">Add Twitter handles to automatically rate as 10/10:</div>
  1030.                 <div style="display: flex; align-items: center; gap: 5px;">
  1031.                     <input id="handle-input" type="text" placeholder="Twitter handle (without @)">
  1032.                     <button class="add-handle-btn" data-action="add-handle">Add</button>
  1033.                 </div>
  1034.                 <div class="handle-list" id="handle-list">
  1035.                 </div>
  1036.             </div>
  1037.         </div>
  1038.         <div id="status-indicator" class=""></div>
  1039.     </div>
  1040. </div>`;
  1041.  
  1042.     // Embedded style.css
  1043.     const STYLE = `/*
  1044.         Modern X-Inspired Styles - Enhanced
  1045.         ---------------------------------
  1046.     */
  1047.  
  1048.     /* Main tweet filter container */
  1049.     #tweet-filter-container {
  1050.         position: fixed;
  1051.         top: 70px;
  1052.         right: 15px;
  1053.         background-color: rgba(22, 24, 28, 0.95);
  1054.         color: #e7e9ea;
  1055.         padding: 10px 12px;
  1056.         border-radius: 12px;
  1057.         z-index: 9999;
  1058.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1059.         font-size: 13px;
  1060.         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  1061.         display: flex;
  1062.         align-items: center;
  1063.         gap: 10px;
  1064.         border: 1px solid rgba(255, 255, 255, 0.1);
  1065.     }
  1066.  
  1067.     /* Close button styles */
  1068.     .close-button {
  1069.         background: none;
  1070.         border: none;
  1071.         color: #e7e9ea;
  1072.         font-size: 16px;
  1073.         cursor: pointer;
  1074.         padding: 0;
  1075.         width: 28px;
  1076.         height: 28px;
  1077.         display: flex;
  1078.         align-items: center;
  1079.         justify-content: center;
  1080.         opacity: 0.8;
  1081.         transition: opacity 0.2s;
  1082.         border-radius: 50%;
  1083.     }
  1084.  
  1085.     .close-button:hover {
  1086.         opacity: 1;
  1087.         background-color: rgba(255, 255, 255, 0.1);
  1088.     }
  1089.  
  1090.     /* Hidden state */
  1091.     .hidden {
  1092.         display: none !important;
  1093.     }
  1094.  
  1095.     /* Show/hide button */
  1096.     .toggle-button {
  1097.         position: fixed;
  1098.         right: 15px;
  1099.         background-color: rgba(22, 24, 28, 0.95);
  1100.         color: #e7e9ea;
  1101.         padding: 8px 12px;
  1102.         border-radius: 8px;
  1103.         cursor: pointer;
  1104.         font-size: 12px;
  1105.         z-index: 9999;
  1106.         border: 1px solid rgba(255, 255, 255, 0.1);
  1107.         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  1108.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1109.         display: flex;
  1110.         align-items: center;
  1111.         gap: 6px;
  1112.         transition: all 0.2s ease;
  1113.     }
  1114.     
  1115.     .toggle-button:hover {
  1116.         background-color: rgba(29, 155, 240, 0.2);
  1117.     }
  1118.  
  1119.     #filter-toggle {
  1120.         top: 70px;
  1121.     }
  1122.  
  1123.     #settings-toggle {
  1124.         top: 120px;
  1125.     }
  1126.  
  1127.     #tweet-filter-container label {
  1128.         margin: 0;
  1129.         font-weight: bold;
  1130.     }
  1131.  
  1132.     #tweet-filter-slider {
  1133.         cursor: pointer;
  1134.         width: 120px;
  1135.         vertical-align: middle;
  1136.         accent-color: #1d9bf0;
  1137.     }
  1138.  
  1139.     #tweet-filter-value {
  1140.         min-width: 20px;
  1141.         text-align: center;
  1142.         font-weight: bold;
  1143.         background-color: rgba(255, 255, 255, 0.1);
  1144.         padding: 2px 5px;
  1145.         border-radius: 4px;
  1146.     }
  1147.  
  1148.     /* Settings UI with Tabs */
  1149.     #settings-container {
  1150.         position: fixed;
  1151.         top: 70px;
  1152.         right: 15px;
  1153.         background-color: rgba(22, 24, 28, 0.95);
  1154.         color: #e7e9ea;
  1155.         padding: 0; /* Remove padding to accommodate sticky header */
  1156.         border-radius: 16px;
  1157.         z-index: 9999;
  1158.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1159.         font-size: 13px;
  1160.         box-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  1161.         display: flex;
  1162.         flex-direction: column;
  1163.         width: 380px;
  1164.         max-height: 85vh;
  1165.         overflow: hidden; /* Hide overflow to make the sticky header work properly */
  1166.         border: 1px solid rgba(255, 255, 255, 0.1);
  1167.         line-height: 1.3;
  1168.         transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  1169.         transform-origin: top right;
  1170.     }
  1171.     
  1172.     #settings-container.hidden {
  1173.         opacity: 0;
  1174.         transform: scale(0.9);
  1175.         pointer-events: none;
  1176.     }
  1177.     
  1178.     /* Header section */
  1179.     .settings-header {
  1180.         padding: 12px 15px;
  1181.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  1182.         display: flex;
  1183.         justify-content: space-between;
  1184.         align-items: center;
  1185.         position: sticky;
  1186.         top: 0;
  1187.         background-color: rgba(22, 24, 28, 0.98);
  1188.         z-index: 20;
  1189.         border-radius: 16px 16px 0 0;
  1190.     }
  1191.     
  1192.     .settings-title {
  1193.         font-weight: bold;
  1194.         font-size: 16px;
  1195.     }
  1196.     
  1197.     /* Content area with scrolling */
  1198.     .settings-content {
  1199.         overflow-y: auto;
  1200.         max-height: calc(85vh - 110px); /* Account for header and tabs */
  1201.         padding: 0;
  1202.     }
  1203.     
  1204.     /* Scrollbar styling for settings container */
  1205.     .settings-content::-webkit-scrollbar {
  1206.         width: 6px;
  1207.     }
  1208.  
  1209.     .settings-content::-webkit-scrollbar-track {
  1210.         background: rgba(255, 255, 255, 0.05);
  1211.         border-radius: 3px;
  1212.     }
  1213.  
  1214.     .settings-content::-webkit-scrollbar-thumb {
  1215.         background: rgba(255, 255, 255, 0.2);
  1216.         border-radius: 3px;
  1217.     }
  1218.  
  1219.     .settings-content::-webkit-scrollbar-thumb:hover {
  1220.         background: rgba(255, 255, 255, 0.3);
  1221.     }
  1222.  
  1223.     /* Tab Navigation */
  1224.     .tab-navigation {
  1225.         display: flex;
  1226.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  1227.         position: sticky;
  1228.         top: 0;
  1229.         background-color: rgba(22, 24, 28, 0.98);
  1230.         z-index: 10;
  1231.         padding: 10px 15px;
  1232.         gap: 8px;
  1233.     }
  1234.  
  1235.     .tab-button {
  1236.         padding: 6px 10px;
  1237.         background: none;
  1238.         border: none;
  1239.         color: #e7e9ea;
  1240.         font-weight: bold;
  1241.         cursor: pointer;
  1242.         border-radius: 8px;
  1243.         transition: all 0.2s ease;
  1244.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1245.         font-size: 13px;
  1246.         flex: 1;
  1247.         text-align: center;
  1248.     }
  1249.  
  1250.     .tab-button:hover {
  1251.         background-color: rgba(255, 255, 255, 0.1);
  1252.     }
  1253.  
  1254.     .tab-button.active {
  1255.         color: #1d9bf0;
  1256.         background-color: rgba(29, 155, 240, 0.1);
  1257.         border-bottom: 2px solid #1d9bf0;
  1258.     }
  1259.  
  1260.     /* Tab Content */
  1261.     .tab-content {
  1262.         display: none;
  1263.         animation: fadeIn 0.3s ease;
  1264.         padding: 15px;
  1265.     }
  1266.     
  1267.     @keyframes fadeIn {
  1268.         from { opacity: 0; }
  1269.         to { opacity: 1; }
  1270.     }
  1271.  
  1272.     .tab-content.active {
  1273.         display: block;
  1274.     }
  1275.  
  1276.     /* Enhanced dropdowns */
  1277.     .select-container {
  1278.         position: relative;
  1279.         margin-bottom: 15px;
  1280.     }
  1281.     
  1282.     .select-container .search-field {
  1283.         position: sticky;
  1284.         top: 0;
  1285.         background-color: rgba(39, 44, 48, 0.95);
  1286.         padding: 8px;
  1287.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  1288.         z-index: 1;
  1289.     }
  1290.     
  1291.     .select-container .search-input {
  1292.         width: 100%;
  1293.         padding: 8px 10px;
  1294.         border-radius: 8px;
  1295.         border: 1px solid rgba(255, 255, 255, 0.2);
  1296.         background-color: rgba(39, 44, 48, 0.9);
  1297.         color: #e7e9ea;
  1298.         font-size: 12px;
  1299.         transition: border-color 0.2s;
  1300.     }
  1301.     
  1302.     .select-container .search-input:focus {
  1303.         border-color: #1d9bf0;
  1304.         outline: none;
  1305.     }
  1306.     
  1307.     .custom-select {
  1308.         position: relative;
  1309.         display: inline-block;
  1310.         width: 100%;
  1311.     }
  1312.     
  1313.     .select-selected {
  1314.         background-color: rgba(39, 44, 48, 0.95);
  1315.         color: #e7e9ea;
  1316.         padding: 10px 12px;
  1317.         border: 1px solid rgba(255, 255, 255, 0.2);
  1318.         border-radius: 8px;
  1319.         cursor: pointer;
  1320.         user-select: none;
  1321.         display: flex;
  1322.         justify-content: space-between;
  1323.         align-items: center;
  1324.         font-size: 13px;
  1325.         transition: border-color 0.2s;
  1326.     }
  1327.     
  1328.     .select-selected:hover {
  1329.         border-color: rgba(255, 255, 255, 0.4);
  1330.     }
  1331.     
  1332.     .select-selected:after {
  1333.         content: "";
  1334.         width: 8px;
  1335.         height: 8px;
  1336.         border: 2px solid #e7e9ea;
  1337.         border-width: 0 2px 2px 0;
  1338.         display: inline-block;
  1339.         transform: rotate(45deg);
  1340.         margin-left: 10px;
  1341.         transition: transform 0.2s;
  1342.     }
  1343.     
  1344.     .select-selected.select-arrow-active:after {
  1345.         transform: rotate(-135deg);
  1346.     }
  1347.     
  1348.     .select-items {
  1349.         position: absolute;
  1350.         background-color: rgba(39, 44, 48, 0.98);
  1351.         top: 100%;
  1352.         left: 0;
  1353.         right: 0;
  1354.         z-index: 99;
  1355.         max-height: 300px;
  1356.         overflow-y: auto;
  1357.         border: 1px solid rgba(255, 255, 255, 0.2);
  1358.         border-radius: 8px;
  1359.         margin-top: 5px;
  1360.         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  1361.         display: none;
  1362.     }
  1363.     
  1364.     .select-items div {
  1365.         color: #e7e9ea;
  1366.         padding: 10px 12px;
  1367.         cursor: pointer;
  1368.         user-select: none;
  1369.         transition: background-color 0.2s;
  1370.         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  1371.     }
  1372.     
  1373.     .select-items div:hover {
  1374.         background-color: rgba(29, 155, 240, 0.1);
  1375.     }
  1376.     
  1377.     .select-items div.same-as-selected {
  1378.         background-color: rgba(29, 155, 240, 0.2);
  1379.     }
  1380.     
  1381.     /* Scrollbar for select items */
  1382.     .select-items::-webkit-scrollbar {
  1383.         width: 6px;
  1384.     }
  1385.     
  1386.     .select-items::-webkit-scrollbar-track {
  1387.         background: rgba(255, 255, 255, 0.05);
  1388.     }
  1389.     
  1390.     .select-items::-webkit-scrollbar-thumb {
  1391.         background: rgba(255, 255, 255, 0.2);
  1392.         border-radius: 3px;
  1393.     }
  1394.     
  1395.     .select-items::-webkit-scrollbar-thumb:hover {
  1396.         background: rgba(255, 255, 255, 0.3);
  1397.     }
  1398.     
  1399.     /* Form elements */
  1400.     #openrouter-api-key,
  1401.     #user-instructions {
  1402.         width: 100%;
  1403.         padding: 10px 12px;
  1404.         border-radius: 8px;
  1405.         border: 1px solid rgba(255, 255, 255, 0.2);
  1406.         margin-bottom: 12px;
  1407.         background-color: rgba(39, 44, 48, 0.95);
  1408.         color: #e7e9ea;
  1409.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1410.         font-size: 13px;
  1411.         transition: border-color 0.2s;
  1412.     }
  1413.     
  1414.     #openrouter-api-key:focus,
  1415.     #user-instructions:focus {
  1416.         border-color: #1d9bf0;
  1417.         outline: none;
  1418.     }
  1419.  
  1420.     #user-instructions {
  1421.         height: 120px;
  1422.         resize: vertical;
  1423.     }
  1424.  
  1425.     /* Parameter controls */
  1426.     .parameter-row {
  1427.         display: flex;
  1428.         align-items: center;
  1429.         margin-bottom: 12px;
  1430.         gap: 8px;
  1431.         padding: 6px;
  1432.         border-radius: 8px;
  1433.         transition: background-color 0.2s;
  1434.     }
  1435.     
  1436.     .parameter-row:hover {
  1437.         background-color: rgba(255, 255, 255, 0.05);
  1438.     }
  1439.  
  1440.     .parameter-label {
  1441.         flex: 1;
  1442.         font-size: 13px;
  1443.         color: #e7e9ea;
  1444.     }
  1445.  
  1446.     .parameter-control {
  1447.         flex: 1.5;
  1448.         display: flex;
  1449.         align-items: center;
  1450.         gap: 8px;
  1451.     }
  1452.  
  1453.     .parameter-value {
  1454.         min-width: 28px;
  1455.         text-align: center;
  1456.         background-color: rgba(255, 255, 255, 0.1);
  1457.         padding: 3px 5px;
  1458.         border-radius: 4px;
  1459.         font-size: 12px;
  1460.     }
  1461.  
  1462.     .parameter-slider {
  1463.         flex: 1;
  1464.         -webkit-appearance: none;
  1465.         height: 4px;
  1466.         border-radius: 4px;
  1467.         background: rgba(255, 255, 255, 0.2);
  1468.         outline: none;
  1469.         cursor: pointer;
  1470.     }
  1471.  
  1472.     .parameter-slider::-webkit-slider-thumb {
  1473.         -webkit-appearance: none;
  1474.         appearance: none;
  1475.         width: 14px;
  1476.         height: 14px;
  1477.         border-radius: 50%;
  1478.         background: #1d9bf0;
  1479.         cursor: pointer;
  1480.         transition: transform 0.1s;
  1481.     }
  1482.     
  1483.     .parameter-slider::-webkit-slider-thumb:hover {
  1484.         transform: scale(1.2);
  1485.     }
  1486.  
  1487.     /* Section styles */
  1488.     .section-title {
  1489.         font-weight: bold;
  1490.         margin-top: 20px;
  1491.         margin-bottom: 8px;
  1492.         color: #e7e9ea;
  1493.         display: flex;
  1494.         align-items: center;
  1495.         gap: 6px;
  1496.         font-size: 14px;
  1497.     }
  1498.     
  1499.     .section-title:first-child {
  1500.         margin-top: 0;
  1501.     }
  1502.  
  1503.     .section-description {
  1504.         font-size: 12px;
  1505.         margin-bottom: 8px;
  1506.         opacity: 0.8;
  1507.         line-height: 1.4;
  1508.     }
  1509.     
  1510.     /* Advanced options section */
  1511.     .advanced-options {
  1512.         margin-top: 5px;
  1513.         margin-bottom: 15px;
  1514.         border: 1px solid rgba(255, 255, 255, 0.1);
  1515.         border-radius: 8px;
  1516.         padding: 12px;
  1517.         background-color: rgba(255, 255, 255, 0.03);
  1518.         overflow: hidden;
  1519.     }
  1520.     
  1521.     .advanced-toggle {
  1522.         display: flex;
  1523.         justify-content: space-between;
  1524.         align-items: center;
  1525.         cursor: pointer;
  1526.         margin-bottom: 5px;
  1527.     }
  1528.     
  1529.     .advanced-toggle-title {
  1530.         font-weight: bold;
  1531.         font-size: 13px;
  1532.         color: #e7e9ea;
  1533.     }
  1534.     
  1535.     .advanced-toggle-icon {
  1536.         transition: transform 0.3s;
  1537.     }
  1538.     
  1539.     .advanced-toggle-icon.expanded {
  1540.         transform: rotate(180deg);
  1541.     }
  1542.     
  1543.     .advanced-content {
  1544.         max-height: 0;
  1545.         overflow: hidden;
  1546.         transition: max-height 0.3s ease-in-out;
  1547.     }
  1548.     
  1549.     .advanced-content.expanded {
  1550.         max-height: 300px;
  1551.     }
  1552.  
  1553.     /* Handle list styling */
  1554.     .handle-list {
  1555.         margin-top: 10px;
  1556.         max-height: 120px;
  1557.         overflow-y: auto;
  1558.         border: 1px solid rgba(255, 255, 255, 0.1);
  1559.         border-radius: 8px;
  1560.         padding: 5px;
  1561.     }
  1562.  
  1563.     .handle-item {
  1564.         display: flex;
  1565.         align-items: center;
  1566.         justify-content: space-between;
  1567.         padding: 6px 10px;
  1568.         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  1569.         border-radius: 4px;
  1570.         transition: background-color 0.2s;
  1571.     }
  1572.     
  1573.     .handle-item:hover {
  1574.         background-color: rgba(255, 255, 255, 0.05);
  1575.     }
  1576.  
  1577.     .handle-item:last-child {
  1578.         border-bottom: none;
  1579.     }
  1580.  
  1581.     .handle-text {
  1582.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1583.         font-size: 12px;
  1584.     }
  1585.  
  1586.     .remove-handle {
  1587.         background: none;
  1588.         border: none;
  1589.         color: #ff5c5c;
  1590.         cursor: pointer;
  1591.         font-size: 14px;
  1592.         padding: 0 3px;
  1593.         opacity: 0.7;
  1594.         transition: opacity 0.2s;
  1595.     }
  1596.     
  1597.     .remove-handle:hover {
  1598.         opacity: 1;
  1599.     }
  1600.  
  1601.     .add-handle-btn {
  1602.         background-color: #1d9bf0;
  1603.         color: white;
  1604.         border: none;
  1605.         border-radius: 6px;
  1606.         padding: 7px 10px;
  1607.         cursor: pointer;
  1608.         font-weight: bold;
  1609.         font-size: 12px;
  1610.         margin-left: 5px;
  1611.         transition: background-color 0.2s;
  1612.     }
  1613.     
  1614.     .add-handle-btn:hover {
  1615.         background-color: #1a8cd8;
  1616.     }
  1617.  
  1618.     /* Button styling */
  1619.     .settings-button {
  1620.         background-color: #1d9bf0;
  1621.         color: white;
  1622.         border: none;
  1623.         border-radius: 8px;
  1624.         padding: 10px 14px;
  1625.         cursor: pointer;
  1626.         font-weight: bold;
  1627.         transition: background-color 0.2s;
  1628.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1629.         margin-top: 8px;
  1630.         width: 100%;
  1631.         font-size: 13px;
  1632.     }
  1633.  
  1634.     .settings-button:hover {
  1635.         background-color: #1a8cd8;
  1636.     }
  1637.  
  1638.     .settings-button.secondary {
  1639.         background-color: rgba(255, 255, 255, 0.1);
  1640.     }
  1641.     
  1642.     .settings-button.secondary:hover {
  1643.         background-color: rgba(255, 255, 255, 0.15);
  1644.     }
  1645.  
  1646.     .settings-button.danger {
  1647.         background-color: #ff5c5c;
  1648.     }
  1649.  
  1650.     .settings-button.danger:hover {
  1651.         background-color: #e53935;
  1652.     }
  1653.     
  1654.     /* For smaller buttons that sit side by side */
  1655.     .button-row {
  1656.         display: flex;
  1657.         gap: 8px;
  1658.         margin-top: 10px;
  1659.     }
  1660.     
  1661.     .button-row .settings-button {
  1662.         margin-top: 0;
  1663.     }
  1664.     
  1665.     /* Stats display */
  1666.     .stats-container {
  1667.         background-color: rgba(255, 255, 255, 0.05);
  1668.         padding: 10px;
  1669.         border-radius: 8px;
  1670.         margin-bottom: 15px;
  1671.     }
  1672.     
  1673.     .stats-row {
  1674.         display: flex;
  1675.         justify-content: space-between;
  1676.         padding: 5px 0;
  1677.         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  1678.     }
  1679.     
  1680.     .stats-row:last-child {
  1681.         border-bottom: none;
  1682.     }
  1683.     
  1684.     .stats-label {
  1685.         font-size: 12px;
  1686.         opacity: 0.8;
  1687.     }
  1688.     
  1689.     .stats-value {
  1690.         font-weight: bold;
  1691.     }
  1692.  
  1693.     /* Rating indicator shown on tweets */ 
  1694.     .score-indicator {
  1695.         position: absolute;
  1696.         top: 10px;
  1697.         right: 10.5%;
  1698.         background-color: rgba(22, 24, 28, 0.9);
  1699.         color: #e7e9ea;
  1700.         padding: 4px 10px;
  1701.         border-radius: 8px;
  1702.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1703.         font-size: 14px;
  1704.         font-weight: bold;
  1705.         z-index: 100;
  1706.         cursor: pointer;
  1707.         border: 1px solid rgba(255, 255, 255, 0.1);
  1708.         min-width: 20px;
  1709.         text-align: center;
  1710.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  1711.         transition: transform 0.15s ease;
  1712.     }
  1713.     
  1714.     .score-indicator:hover {
  1715.         transform: scale(1.05);
  1716.     }
  1717.  
  1718.     /* Refresh animation */
  1719.     .refreshing {
  1720.         animation: spin 1s infinite linear;
  1721.     }
  1722.  
  1723.     @keyframes spin {
  1724.         0% { transform: rotate(0deg); }
  1725.         100% { transform: rotate(360deg); }
  1726.     }
  1727.  
  1728.     /* The description box for ratings */
  1729.     .score-description {
  1730.         display: none;
  1731.         background-color: rgba(22, 24, 28, 0.95);
  1732.         color: #e7e9ea;
  1733.         padding: 16px 20px;
  1734.         border-radius: 12px;
  1735.         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  1736.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1737.         font-size: 16px;
  1738.         line-height: 1.5;
  1739.         z-index: 99999999;
  1740.         position: absolute;
  1741.         width: clamp(300px, 30vw, 500px);
  1742.         max-height: 60vh;
  1743.         overflow-y: auto;
  1744.         border: 1px solid rgba(255, 255, 255, 0.1);
  1745.         word-wrap: break-word;
  1746.     }
  1747.  
  1748.     /* Rating status classes */
  1749.     .cached-rating {
  1750.         background-color: rgba(76, 175, 80, 0.9) !important;
  1751.         color: white !important;
  1752.     }
  1753.  
  1754.     .blacklisted-rating {
  1755.         background-color: rgba(255, 193, 7, 0.9) !important;
  1756.         color: black !important;
  1757.     }
  1758.  
  1759.     .pending-rating {
  1760.         background-color: rgba(255, 152, 0, 0.9) !important;
  1761.         color: white !important;
  1762.     }
  1763.  
  1764.     .error-rating {
  1765.         background-color: rgba(244, 67, 54, 0.9) !important;
  1766.         color: white !important;
  1767.     }
  1768.  
  1769.     /* Status indicator at bottom-right */
  1770.     #status-indicator {
  1771.         position: fixed;
  1772.         bottom: 20px;
  1773.         right: 20px;
  1774.         background-color: rgba(22, 24, 28, 0.95);
  1775.         color: #e7e9ea;
  1776.         padding: 10px 15px;
  1777.         border-radius: 8px;
  1778.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1779.         font-size: 12px;
  1780.         z-index: 9999;
  1781.         display: none;
  1782.         border: 1px solid rgba(255, 255, 255, 0.1);
  1783.         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  1784.         transform: translateY(100px);
  1785.         transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  1786.     }
  1787.  
  1788.     #status-indicator.active {
  1789.         display: block;
  1790.         transform: translateY(0);
  1791.     }
  1792.     
  1793.     /* Toggle switch styling */
  1794.     .toggle-switch {
  1795.         position: relative;
  1796.         display: inline-block;
  1797.         width: 36px;
  1798.         height: 20px;
  1799.     }
  1800.     
  1801.     .toggle-switch input {
  1802.         opacity: 0;
  1803.         width: 0;
  1804.         height: 0;
  1805.     }
  1806.     
  1807.     .toggle-slider {
  1808.         position: absolute;
  1809.         cursor: pointer;
  1810.         top: 0;
  1811.         left: 0;
  1812.         right: 0;
  1813.         bottom: 0;
  1814.         background-color: rgba(255, 255, 255, 0.2);
  1815.         transition: .3s;
  1816.         border-radius: 34px;
  1817.     }
  1818.     
  1819.     .toggle-slider:before {
  1820.         position: absolute;
  1821.         content: "";
  1822.         height: 16px;
  1823.         width: 16px;
  1824.         left: 2px;
  1825.         bottom: 2px;
  1826.         background-color: white;
  1827.         transition: .3s;
  1828.         border-radius: 50%;
  1829.     }
  1830.     
  1831.     input:checked + .toggle-slider {
  1832.         background-color: #1d9bf0;
  1833.     }
  1834.     
  1835.     input:checked + .toggle-slider:before {
  1836.         transform: translateX(16px);
  1837.     }
  1838.     
  1839.     .toggle-row {
  1840.         display: flex;
  1841.         align-items: center;
  1842.         justify-content: space-between;
  1843.         padding: 8px 10px;
  1844.         margin-bottom: 12px;
  1845.         background-color: rgba(255, 255, 255, 0.05);
  1846.         border-radius: 8px;
  1847.         transition: background-color 0.2s;
  1848.     }
  1849.     
  1850.     .toggle-row:hover {
  1851.         background-color: rgba(255, 255, 255, 0.08);
  1852.     }
  1853.     
  1854.     .toggle-label {
  1855.         font-size: 13px;
  1856.         color: #e7e9ea;
  1857.     }
  1858.  
  1859.     /* Existing styles */
  1860.     
  1861.     /* Sort container styles */
  1862.     .sort-container {
  1863.         margin: 10px 0;
  1864.         display: flex;
  1865.         align-items: center;
  1866.         gap: 10px;
  1867.     }
  1868.     
  1869.     .sort-container label {
  1870.         font-size: 14px;
  1871.         color: var(--text-color);
  1872.     }
  1873.     
  1874.     .sort-container select {
  1875.         padding: 5px 10px;
  1876.         border-radius: 4px;
  1877.         border: 1px solid rgba(255, 255, 255, 0.2);
  1878.         background-color: rgba(39, 44, 48, 0.95);
  1879.         color: #e7e9ea;
  1880.         font-size: 14px;
  1881.         cursor: pointer;
  1882.     }
  1883.     
  1884.     .sort-container select:hover {
  1885.         border-color: #1d9bf0;
  1886.     }
  1887.     
  1888.     .sort-container select:focus {
  1889.         outline: none;
  1890.         border-color: #1d9bf0;
  1891.         box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2);
  1892.     }
  1893.     
  1894.     /* Dropdown option styling */
  1895.     .sort-container select option {
  1896.         background-color: rgba(39, 44, 48, 0.95);
  1897.         color: #e7e9ea;
  1898.     }`;
  1899.  
  1900.     // Apply CSS
  1901.     GM_addStyle(STYLE);
  1902.  
  1903.     // Set menu HTML
  1904.     GM_setValue('menuHTML', MENU);
  1905.  
  1906.     // ----- twitter-desloppifier.js -----
  1907. (function () {
  1908.     'use strict';
  1909.     console.log("X/Twitter Tweet De-Sloppification Activated (v1.3 - Enhanced)");
  1910.     
  1911.     // Load CSS stylesheet
  1912.     //const css = GM_getResourceText('STYLESHEET');
  1913.     let menuhtml = GM_getResourceText("MENU_HTML");
  1914.     GM_setValue('menuHTML', menuhtml);
  1915.     let firstRun = GM_getValue('firstRun', true);
  1916.     
  1917.     //GM_addStyle(css);
  1918.  
  1919.     // ----- Initialization -----
  1920.     
  1921.     /**
  1922.      * Initializes the observer on the main content area, adds the UI elements,
  1923.      * starts processing visible tweets, and sets up periodic checks.
  1924.      */
  1925.     function initializeObserver() {
  1926.         const target = document.querySelector('main') || document.querySelector('div[data-testid="primaryColumn"]');
  1927.         if (target) {
  1928.             observedTargetNode = target;
  1929.             console.log("X/Twitter Tweet De-Sloppification: Target node found. Observing...");
  1930.             initialiseUI();
  1931.             if (firstRun){
  1932.                 resetSettings(true);
  1933.                 GM_setValue('firstRun', false);
  1934.             }
  1935.             // If no API key is found, prompt the user
  1936.             const apiKey = GM_getValue('openrouter-api-key', '');
  1937.             if (!apiKey) {
  1938.                 apiKey = prompt("<TweetFilter AI>\nPlease enter your OpenRouter API key. You can get one at https://openrouter.ai/");
  1939.                 if (apiKey) {
  1940.                     GM_setValue('openrouter-api-key', apiKey);
  1941.                 }
  1942.                 showStatus("No API key found. Please enter your OpenRouter API key.");
  1943.             } else {
  1944.                 showStatus(`Loaded ${Object.keys(tweetIDRatingCache).length} cached ratings. Starting to rate visible tweets...`);
  1945.                 fetchAvailableModels();
  1946.             }
  1947.             // Process all currently visible tweets
  1948.             observedTargetNode.querySelectorAll(TWEET_ARTICLE_SELECTOR).forEach(scheduleTweetProcessing);
  1949.             const observer = new MutationObserver(handleMutations);
  1950.             observer.observe(observedTargetNode, { childList: true, subtree: true });
  1951.             // Periodically ensure all tweets have been processed
  1952.             setInterval(ensureAllTweetsRated, 3000);
  1953.             window.addEventListener('beforeunload', () => {
  1954.                 saveTweetRatings();
  1955.                 observer.disconnect();
  1956.                 const sliderUI = document.getElementById('tweet-filter-container');
  1957.                 if (sliderUI) sliderUI.remove();
  1958.                 const settingsUI = document.getElementById('settings-container');
  1959.                 if (settingsUI) settingsUI.remove();
  1960.                 const statusIndicator = document.getElementById('status-indicator');
  1961.                 if (statusIndicator) statusIndicator.remove();
  1962.                 // Clean up all description elements
  1963.                 cleanupDescriptionElements();
  1964.                 console.log("X/Twitter Tweet De-Sloppification Deactivated.");
  1965.             });
  1966.         } else {
  1967.             setTimeout(initializeObserver, 1000);
  1968.         }
  1969.     }
  1970.     // Start observing tweets and initializing the UI
  1971.     initializeObserver();
  1972. })();
  1973.  
  1974.     // ----- config.js -----
  1975. const processedTweets = new Set(); // Set of tweet IDs already processed in this session
  1976. const tweetIDRatingCache = {}; // ID-based cache for persistent storage
  1977. const PROCESSING_DELAY_MS = 500; // Delay before processing a tweet (ms)
  1978. const API_CALL_DELAY_MS = 250; // Minimum delay between API calls (ms)
  1979. let USER_DEFINED_INSTRUCTIONS = GM_getValue('userDefinedInstructions', `- Give high scores to insightful and impactful tweets
  1980. - Give low scores to clickbait, fearmongering, and ragebait
  1981. - Give high scores to high-effort content and artistic content`);
  1982. let currentFilterThreshold = GM_getValue('filterThreshold', 1); // Filter threshold for tweet visibility
  1983. let observedTargetNode = null;
  1984. let lastAPICallTime = 0;
  1985. let pendingRequests = 0;
  1986. const MAX_RETRIES = 3;
  1987. let availableModels = []; // List of models fetched from API
  1988. let selectedModel = GM_getValue('selectedModel', 'google/gemini-flash-1.5-8b');
  1989. let selectedImageModel = GM_getValue('selectedImageModel', 'google/gemini-flash-1.5-8b');
  1990. let blacklistedHandles = GM_getValue('blacklistedHandles', '').split('\n').filter(h => h.trim() !== '');
  1991.  
  1992. let storedRatings = GM_getValue('tweetRatings', '{}');
  1993. // Settings variables
  1994. let enableImageDescriptions = GM_getValue('enableImageDescriptions', false);
  1995.  
  1996.  
  1997. // Model parameters
  1998. let modelTemperature = GM_getValue('modelTemperature', 0.5);
  1999. let modelTopP = GM_getValue('modelTopP', 0.9);
  2000. let imageModelTemperature = GM_getValue('imageModelTemperature', 0.5);
  2001. let imageModelTopP = GM_getValue('imageModelTopP', 0.9);
  2002. let maxTokens = GM_getValue('maxTokens', 0); // Maximum number of tokens for API requests, 0 means no limit
  2003. let imageModelMaxTokens = GM_getValue('imageModelMaxTokens', 0); // Maximum number of tokens for image model API requests, 0 means no limit
  2004. //let menuHTML= "";
  2005.  
  2006. // ----- DOM Selectors (for tweet elements) -----
  2007. const TWEET_ARTICLE_SELECTOR = 'article[data-testid="tweet"]';
  2008. const QUOTE_CONTAINER_SELECTOR = 'div[role="link"][tabindex="0"]';
  2009. const USER_NAME_SELECTOR = 'div[data-testid="User-Name"] span > span';
  2010. const USER_HANDLE_SELECTOR = 'div[data-testid="User-Name"] a[role="link"]';
  2011. const TWEET_TEXT_SELECTOR = 'div[data-testid="tweetText"]';
  2012. const MEDIA_IMG_SELECTOR = 'div[data-testid="tweetPhoto"] img, img[src*="pbs.twimg.com/media"]';
  2013. const MEDIA_VIDEO_SELECTOR = 'video[poster*="pbs.twimg.com"], video';
  2014. const PERMALINK_SELECTOR = 'a[href*="/status/"] time';
  2015. // ----- Dom Elements -----
  2016. /**
  2017.  * Helper function to check if a model supports images based on its architecture
  2018.  * @param {string} modelId - The model ID to check
  2019.  * @returns {boolean} - Whether the model supports image input
  2020.  */
  2021. function modelSupportsImages(modelId) {
  2022.     if (!availableModels || availableModels.length === 0) {
  2023.         return false; // If we don't have model info, assume it doesn't support images
  2024.     }
  2025.  
  2026.     const model = availableModels.find(m => m.slug === modelId);
  2027.     if (!model) {
  2028.         return false; // Model not found in available models list
  2029.     }
  2030.  
  2031.     // Check if model supports images based on its architecture
  2032.     return model.input_modalities &&
  2033.         model.input_modalities.includes('image');
  2034. }
  2035.  
  2036. try {
  2037.     Object.assign(tweetIDRatingCache, JSON.parse(storedRatings));
  2038.     console.log(`Loaded ${Object.keys(tweetIDRatingCache).length} cached tweet ratings`);
  2039. } catch (e) {
  2040.     console.error('Error loading stored ratings:', e);
  2041. }
  2042.  
  2043.  
  2044.     // ----- api.js -----
  2045. /**
  2046.  * @typedef {Object} CompletionResponse
  2047.  * @property {string} id - Response ID from OpenRouter
  2048.  * @property {string} model - Model used for completion
  2049.  * @property {Array<{
  2050.  *   message: {
  2051.  *     role: string,
  2052.  *     content: string
  2053.  *   },
  2054.  *   finish_reason: string,
  2055.  *   index: number
  2056.  * }>} choices - Array of completion choices
  2057.  * @property {Object} usage - Token usage statistics
  2058.  * @property {number} usage.prompt_tokens - Number of tokens in prompt
  2059.  * @property {number} usage.completion_tokens - Number of tokens in completion
  2060.  * @property {number} usage.total_tokens - Total tokens used
  2061.  */
  2062.  
  2063. /**
  2064.  * @typedef {Object} CompletionRequest
  2065.  * @property {string} model - Model ID to use
  2066.  * @property {Array<{role: string, content: Array<{type: string, text?: string, image_url?: {url: string}}>}>} messages - Messages for completion
  2067.  * @property {number} temperature - Temperature for sampling
  2068.  * @property {number} top_p - Top P for sampling
  2069.  * @property {number} max_tokens - Maximum tokens to generate
  2070.  * @property {Object} provider - Provider settings
  2071.  * @property {string} provider.sort - Sort order for models
  2072.  * @property {boolean} provider.allow_fallbacks - Whether to allow fallback models
  2073.  */
  2074.  
  2075. /**
  2076.  * @typedef {Object} CompletionResult
  2077.  * @property {boolean} error - Whether an error occurred
  2078.  * @property {string} message - Error or success message
  2079.  * @property {CompletionResponse|null} data - The completion response data if successful
  2080.  */
  2081.  
  2082. /**
  2083.  * Gets a completion from OpenRouter API
  2084.  * 
  2085.  * @param {CompletionRequest} request - The completion request
  2086.  * @param {string} apiKey - OpenRouter API key
  2087.  * @param {number} [timeout=30000] - Request timeout in milliseconds
  2088.  * @returns {Promise<CompletionResult>} The completion result
  2089.  */
  2090. async function getCompletion(request, apiKey, timeout = 30000) {
  2091.     return new Promise((resolve) => {
  2092.         GM_xmlhttpRequest({
  2093.             method: "POST",
  2094.             url: "https://openrouter.ai/api/v1/chat/completions",
  2095.             headers: {
  2096.                 "Content-Type": "application/json",
  2097.                 "Authorization": `Bearer ${apiKey}`,
  2098.                 "HTTP-Referer": "https://greasyfork.org/en/scripts/532182-twitter-x-ai-tweet-filter",
  2099.                 "X-Title": "Tweet Rating Tool"
  2100.             },
  2101.             data: JSON.stringify(request),
  2102.             timeout: timeout,
  2103.             onload: function (response) {
  2104.                 if (response.status >= 200 && response.status < 300) {
  2105.                     try {
  2106.                         const data = JSON.parse(response.responseText);
  2107.                         resolve({
  2108.                             error: false,
  2109.                             message: "Request successful",
  2110.                             data: data
  2111.                         });
  2112.                     } catch (error) {
  2113.                         resolve({
  2114.                             error: true,
  2115.                             message: `Failed to parse response: ${error.message}`,
  2116.                             data: null
  2117.                         });
  2118.                     }
  2119.                 } else {
  2120.                     resolve({
  2121.                         error: true,
  2122.                         message: `Request failed with status ${response.status}: ${response.responseText}`,
  2123.                         data: null
  2124.                     });
  2125.                 }
  2126.             },
  2127.             onerror: function (error) {
  2128.                 resolve({
  2129.                     error: true,
  2130.                     message: `Request error: ${error.toString()}`,
  2131.                     data: null
  2132.                 });
  2133.             },
  2134.             ontimeout: function () {
  2135.                 resolve({
  2136.                     error: true,
  2137.                     message: `Request timed out after ${timeout}ms`,
  2138.                     data: null
  2139.                 });
  2140.             }
  2141.         });
  2142.     });
  2143. }
  2144. const safetySettings = [
  2145.     {
  2146.         category: "HARM_CATEGORY_HARASSMENT",
  2147.         threshold: "BLOCK_NONE",
  2148.     },
  2149.     {
  2150.         category: "HARM_CATEGORY_HATE_SPEECH",
  2151.         threshold: "BLOCK_NONE",
  2152.     },
  2153.     {
  2154.         category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
  2155.         threshold: "BLOCK_NONE",
  2156.     },
  2157.     {
  2158.         category: "HARM_CATEGORY_DANGEROUS_CONTENT",
  2159.         threshold: "BLOCK_NONE",
  2160.     },
  2161.     {
  2162.         category: "HARM_CATEGORY_CIVIC_INTEGRITY",
  2163.         threshold: "BLOCK_NONE",
  2164.     },
  2165. ];
  2166. /**
  2167.  * Rates a tweet using the OpenRouter API with automatic retry functionality.
  2168.  * 
  2169.  * @param {string} tweetText - The text content of the tweet
  2170.  * @param {string} tweetId - The unique tweet ID
  2171.  * @param {string} apiKey - The API key for authentication
  2172.  * @param {string[]} mediaUrls - Array of media URLs associated with the tweet
  2173.  * @param {number} [maxRetries=3] - Maximum number of retry attempts
  2174.  * @returns {Promise<{score: number, content: string, error: boolean}>} The rating result
  2175.  */
  2176. async function rateTweetWithOpenRouter(tweetText, tweetId, apiKey, mediaUrls, maxRetries = 3) {
  2177.     const request = {
  2178.         model: selectedModel,
  2179.         messages: [{
  2180.             role: "user",
  2181.             content: [{
  2182.                 type: "text",
  2183.                 text: `
  2184.                 You will be given a Tweet, structured like this:
  2185.                 _______TWEET SCHEMA_______
  2186.                 _______BEGIN TWEET_______
  2187.                 [TWEET TweetID]
  2188.                 [the text of the tweet being replied to]
  2189.                 [MEDIA_DESCRIPTION]:
  2190.                 [IMAGE 1]: [description], [IMAGE 2]: [description], etc.
  2191.                 [REPLY] (if the author is replying to another tweet)
  2192.                 [TWEET TweetID]: (the tweet which you are to review)
  2193.                 @[the author of the tweet]
  2194.                 [the text of the tweet]
  2195.                 [MEDIA_DESCRIPTION]:
  2196.                 [IMAGE 1]: [description], [IMAGE 2]: [description], etc.
  2197.                 [QUOTED_TWEET]: (if the author is quoting another tweet)
  2198.                 [the text of the quoted tweet]
  2199.                 [QUOTED_TWEET_MEDIA_DESCRIPTION]:
  2200.                 [IMAGE 1]: [description], [IMAGE 2]: [description], etc.
  2201.                 _______END TWEET_______
  2202.                 _______END TWEET SCHEMA_______
  2203.  
  2204.                 You are an expert critic of tweets. You are to review and provide a rating for the tweet with tweet ID ${tweetId}.
  2205.                 Ensure that you consider these user-defined instructions in your analysis and scoring:
  2206.                 [USER-DEFINED INSTRUCTIONS]:
  2207.                 ${USER_DEFINED_INSTRUCTIONS}
  2208.                 Provide a concise explanation of your reasoning and then, on a new line, output your final rating in the exact format:
  2209.                 SCORE_X where X is a number from 1 (lowest quality) to 10 (highest quality).
  2210.                 for example: SCORE_1, SCORE_2, SCORE_3, etc.
  2211.                 If one of the above is not present, the program will not be able to parse the response and will return an error.
  2212.                 _______BEGIN TWEET_______
  2213.                 ${tweetText}
  2214.                 _______END TWEET_______`
  2215.             }]
  2216.         }],
  2217.         temperature: modelTemperature,
  2218.         top_p: modelTopP,
  2219.         max_tokens: maxTokens,
  2220.         provider: {
  2221.             sort: GM_getValue('modelSortOrder', 'throughput-high-to-low').split('-')[0],
  2222.             allow_fallbacks: true
  2223.         }
  2224.     };
  2225.     if (selectedModel.includes('gemini')){
  2226.         request.config = {
  2227.             safetySettings: safetySettings,
  2228.         }
  2229.     }
  2230.  
  2231.     // Add image URLs if present and supported
  2232.     if (mediaUrls?.length > 0 && modelSupportsImages(selectedModel)) {
  2233.         for (const url of mediaUrls) {
  2234.             request.messages[0].content.push({
  2235.                 type: "image_url",
  2236.                 image_url: { url }
  2237.             });
  2238.         }
  2239.     }
  2240.  
  2241.     // Add model parameters
  2242.     request.temperature = modelTemperature;
  2243.     request.top_p = modelTopP;
  2244.     request.max_tokens = maxTokens;
  2245.  
  2246.     // Add provider settings
  2247.     const sortOrder = GM_getValue('modelSortOrder', 'throughput-high-to-low');
  2248.     request.provider = {
  2249.         sort: sortOrder.split('-')[0],
  2250.         allow_fallbacks: true
  2251.     };
  2252.  
  2253.     // Implement retry logic with exponential backoff
  2254.     let attempt = 0;
  2255.     while (attempt < maxRetries) {
  2256.         attempt++;
  2257.  
  2258.         // Rate limiting
  2259.         const now = Date.now();
  2260.         const timeElapsed = now - lastAPICallTime;
  2261.         if (timeElapsed < API_CALL_DELAY_MS) {
  2262.             await new Promise(resolve => setTimeout(resolve, API_CALL_DELAY_MS - timeElapsed));
  2263.         }
  2264.         lastAPICallTime = now;
  2265.  
  2266.         // Update status
  2267.         pendingRequests++;
  2268.         showStatus(`Rating tweet... (${pendingRequests} pending)`);
  2269.  
  2270.         // Make API request
  2271.         const result = await getCompletion(request, apiKey);
  2272.         pendingRequests--;
  2273.         showStatus(`Rating tweet... (${pendingRequests} pending)`);
  2274.  
  2275.         if (!result.error && result.data?.choices?.[0]?.message?.content) {
  2276.             const content = result.data.choices[0].message.content;
  2277.             const scoreMatch = content.match(/\SCORE_(\d+)/);
  2278.  
  2279.             if (scoreMatch) {
  2280.                 const score = parseInt(scoreMatch[1], 10);
  2281.                 
  2282.                 tweetIDRatingCache[tweetId] = {
  2283.                     tweetContent: tweetText,
  2284.                     score: score,
  2285.                     description: content
  2286.                 };
  2287.                 saveTweetRatings();
  2288.                 return { score, content, error: false };
  2289.             }
  2290.         }
  2291.  
  2292.         // Handle retries
  2293.         if (attempt < maxRetries) {
  2294.             const backoffDelay = Math.pow(attempt, 2) * 1000;
  2295.             console.log(`Attempt ${attempt}/${maxRetries} failed. Retrying in ${backoffDelay}ms...`);
  2296.             console.log('Response:', {
  2297.                 error: result.error,
  2298.                 message: result.message,
  2299.                 data: result.data,
  2300.                 content: result.data?.choices?.[0]?.message?.content
  2301.             });
  2302.             await new Promise(resolve => setTimeout(resolve, backoffDelay));
  2303.         }
  2304.     }
  2305.  
  2306.     return {
  2307.         score: 5,
  2308.         content: "Failed to get valid rating after multiple attempts",
  2309.         error: true
  2310.     };
  2311. }
  2312.  
  2313. /**
  2314.  * Gets descriptions for images using the OpenRouter API
  2315.  * 
  2316.  * @param {string[]} urls - Array of image URLs to get descriptions for
  2317.  * @param {string} apiKey - The API key for authentication
  2318.  * @param {string} tweetId - The unique tweet ID
  2319.  * @param {string} userHandle - The Twitter user handle
  2320.  * @returns {Promise<string>} Combined image descriptions
  2321.  */
  2322. async function getImageDescription(urls, apiKey, tweetId, userHandle) {
  2323.     if (!urls?.length || !enableImageDescriptions) {
  2324.         return !enableImageDescriptions ? '[Image descriptions disabled]' : '';
  2325.     }
  2326.  
  2327.     let descriptions = [];
  2328.     for (const url of urls) {
  2329.         const request = {
  2330.             model: selectedImageModel,
  2331.             messages: [{
  2332.                 role: "user",
  2333.                 content: [
  2334.                     {
  2335.                         type: "text",
  2336.                         text: "Describe what you see in this image in a concise way, focusing on the main elements and any text visible. Keep the description under 100 words."
  2337.                     },
  2338.                     {
  2339.                         type: "image_url",
  2340.                         image_url: { url }
  2341.                     }
  2342.                 ]
  2343.             }],
  2344.             temperature: imageModelTemperature,
  2345.             top_p: imageModelTopP,
  2346.             max_tokens: maxTokens,
  2347.             provider: {
  2348.                 sort: GM_getValue('modelSortOrder', 'throughput-high-to-low').split('-')[0],
  2349.                 allow_fallbacks: true
  2350.             }
  2351.         };
  2352.         if (selectedImageModel.includes('gemini')){
  2353.             request.config = {
  2354.                 safetySettings: safetySettings,
  2355.             }
  2356.         }
  2357.         const result = await getCompletion(request, apiKey);
  2358.         if (!result.error && result.data?.choices?.[0]?.message?.content) {
  2359.             descriptions.push(result.data.choices[0].message.content);
  2360.         } else {
  2361.             descriptions.push('[Error getting image description]');
  2362.         }
  2363.     }
  2364.  
  2365.     return descriptions.map((desc, i) => `[IMAGE ${i + 1}]: ${desc}`).join('\n');
  2366. }
  2367.  
  2368. /**
  2369.  * Fetches the list of available models from the OpenRouter API.
  2370.  * Uses the stored API key, and updates the model selector upon success.
  2371.  */
  2372. function fetchAvailableModels() {
  2373.     const apiKey = GM_getValue('openrouter-api-key', '');
  2374.     if (!apiKey) {
  2375.         console.log('No API key available, skipping model fetch');
  2376.         showStatus('Please enter your OpenRouter API key');
  2377.         return;
  2378.     }
  2379.     showStatus('Fetching available models...');
  2380.     const sortOrder = GM_getValue('modelSortOrder', 'throughput-high-to-low');
  2381.     GM_xmlhttpRequest({
  2382.         method: "GET",
  2383.         url: `https://openrouter.ai/api/frontend/models/find?order=${sortOrder}`,
  2384.         headers: {
  2385.             "Authorization": `Bearer ${apiKey}`,
  2386.             "HTTP-Referer": "https://greasyfork.org/en/scripts/532182-twitter-x-ai-tweet-filter", // Use a more generic referer if preferred
  2387.             "X-Title": "Tweet Rating Tool"
  2388.         },
  2389.         onload: function (response) {
  2390.             try {
  2391.                 const data = JSON.parse(response.responseText);
  2392.                 if (data.data && data.data.models) {
  2393.                     availableModels = data.data.models || [];
  2394.                     refreshModelsUI();
  2395.                     showStatus('Models updated!');
  2396.                 }
  2397.             } catch (error) {
  2398.                 console.error('Error parsing model list:', error);
  2399.                 showStatus('Error parsing models list');
  2400.             }
  2401.         },
  2402.         onerror: function (error) {
  2403.             console.error('Error fetching models:', error);
  2404.             showStatus('Error fetching models!');
  2405.         }
  2406.     });
  2407. }
  2408.  
  2409.  
  2410.     // ----- domScraper.js -----
  2411. /**
  2412.      * Extracts and returns trimmed text content from the given element(s).
  2413.      * @param {Node|NodeList} elements - A DOM element or a NodeList.
  2414.      * @returns {string} The trimmed text content.
  2415.      */
  2416. function getElementText(elements) {
  2417.     if (!elements) return '';
  2418.     const elementList = elements instanceof NodeList ? Array.from(elements) : [elements];
  2419.     for (const element of elementList) {
  2420.         const text = element?.textContent?.trim();
  2421.         if (text) return text;
  2422.     }
  2423.     return '';
  2424. }
  2425. /**
  2426.  * Extracts the tweet ID from a tweet article element.
  2427.  * @param {Element} tweetArticle - The tweet article element.
  2428.  * @returns {string} The tweet ID.
  2429.  */
  2430. function getTweetID(tweetArticle) {
  2431.     const timeEl = tweetArticle.querySelector(PERMALINK_SELECTOR);
  2432.     let tweetId = timeEl?.parentElement?.href;
  2433.     if (tweetId && tweetId.includes('/status/')) {
  2434.         const match = tweetId.match(/\/status\/(\d+)/);
  2435.         if (match && match[1]) {
  2436.             return match[1];
  2437.         }
  2438.         return tweetId.substring(tweetId.indexOf('/status/') + 1);
  2439.     }
  2440.     return `tweet-${Math.random().toString(36).substring(2, 15)}-${Date.now()}`;
  2441. }
  2442.  
  2443. /**
  2444.  * Extracts the Twitter handle from a tweet article element.
  2445.  * @param {Element} tweetArticle - The tweet article element.
  2446.  * @returns {array} The user and quoted user handles.
  2447.  */
  2448. function getUserHandles(tweetArticle) {
  2449.     const handleElement = tweetArticle.querySelectorAll(USER_HANDLE_SELECTOR);
  2450.     let handles=[];
  2451.     if (handleElement) {
  2452.         /*
  2453.         const href = handleElement.getAttribute('href');
  2454.         if (href && href.startsWith('/')) {
  2455.             return href.slice(1);
  2456.         }
  2457.         */
  2458.        handleElement.forEach(element => {
  2459.         const href = element.getAttribute('href');
  2460.         if (href && href.startsWith('/')) {
  2461.             handles.push(href.slice(1));
  2462.         }
  2463.        });
  2464.     }
  2465.     return handles.length>0?handles:[''];
  2466. }
  2467.  
  2468.  
  2469. /**
  2470.  * Extracts and returns an array of media URLs from the tweet element.
  2471.  * @param {Element} scopeElement - The tweet element.
  2472.  * @param {string} tweetIdForDebug - The tweet ID (for logging).
  2473.  * @returns {string[]} An array of media URLs.
  2474.  */
  2475. function extractMediaLinks(scopeElement) {
  2476.     if (!scopeElement) return [];
  2477.     
  2478.     const mediaLinks = new Set();
  2479.     
  2480.     // Find all images and videos in the tweet
  2481.     scopeElement.querySelectorAll(`${MEDIA_IMG_SELECTOR}, ${MEDIA_VIDEO_SELECTOR}`).forEach(mediaEl => {
  2482.         // Get the source URL (src for images, poster for videos)
  2483.         const sourceUrl = mediaEl.tagName === 'IMG' ? mediaEl.src : mediaEl.poster;
  2484.         
  2485.         // Skip if not a Twitter media URL
  2486.         /*
  2487.         if (!sourceUrl || 
  2488.            !(sourceUrl.includes('pbs.twimg.com/') || 
  2489.              sourceUrl.includes('pbs.twimg.com/amplify_video_thumb'))) {
  2490.             return;
  2491.         }*/
  2492.         
  2493.         try {
  2494.             // Parse the URL to handle format parameters
  2495.             const url = new URL(sourceUrl);
  2496.             const format = url.searchParams.get('format');
  2497.             const name = url.searchParams.get('name'); // 'small', 'medium', 'large', etc.
  2498.             
  2499.             // Create the final URL with the right format and size
  2500.             let finalUrl = sourceUrl;
  2501.             
  2502.             // Try to get the original size by removing size indicator
  2503.             if (name && name !== 'orig') {
  2504.                 // Replace format=jpg&name=small with format=jpg&name=orig
  2505.                 finalUrl = sourceUrl.replace(`name=${name}`, 'name=orig');
  2506.             }
  2507.             
  2508.             // Log both the original and final URLs for debugging
  2509.             //console.log(`[Tweet ${tweetIdForDebug}] Processing media: ${sourceUrl} → ${finalUrl}`);
  2510.             
  2511.             mediaLinks.add(finalUrl);
  2512.         } catch (error) {
  2513.             //console.error(`[Tweet ${tweetIdForDebug}] Error processing media URL: ${sourceUrl}`, error);
  2514.             // Fallback: just add the raw URL as is
  2515.             mediaLinks.add(sourceUrl);
  2516.         }
  2517.     });
  2518.     
  2519.     return Array.from(mediaLinks);
  2520. }
  2521.  
  2522. // ----- Rating Indicator Functions -----
  2523.  
  2524. /**
  2525.  * Processes a single tweet after a delay.
  2526.  * It first sets a pending indicator, then either applies a cached rating,
  2527.  * or calls the API to rate the tweet (with retry logic).
  2528.  * Finally, it applies the filtering logic.
  2529.  * @param {Element} tweetArticle - The tweet element.
  2530.  * @param {string} tweetId - The tweet ID.
  2531.  */
  2532. // Helper function to determine if a tweet is the original tweet in a conversation.
  2533. // We check if the tweet article has a following sibling with data-testid="inline_reply_offscreen".
  2534. function isOriginalTweet(tweetArticle) {
  2535.     let sibling = tweetArticle.nextElementSibling;
  2536.     while (sibling) {
  2537.         if (sibling.matches && sibling.matches('div[data-testid="inline_reply_offscreen"]')) {
  2538.             return true;
  2539.         }
  2540.         sibling = sibling.nextElementSibling;
  2541.     }
  2542.     return false;
  2543. }
  2544.  
  2545.  
  2546. // ----- MutationObserver Setup -----
  2547. /**
  2548.  * Handles DOM mutations to detect new tweets added to the timeline.
  2549.  * @param {MutationRecord[]} mutationsList - List of observed mutations.
  2550.  */
  2551. function handleMutations(mutationsList) {
  2552.  
  2553.     for (const mutation of mutationsList) {
  2554.         handleThreads();
  2555.         if (mutation.type === 'childList') {
  2556.             // Process added nodes
  2557.             if (mutation.addedNodes.length > 0) {
  2558.                 mutation.addedNodes.forEach(node => {
  2559.                     if (node.nodeType === Node.ELEMENT_NODE) {
  2560.                         if (node.matches && node.matches(TWEET_ARTICLE_SELECTOR)) {
  2561.                             scheduleTweetProcessing(node);
  2562.                         }
  2563.                         else if (node.querySelectorAll) {
  2564.                             const tweetsInside = node.querySelectorAll(TWEET_ARTICLE_SELECTOR);
  2565.                             tweetsInside.forEach(scheduleTweetProcessing);
  2566.                         }
  2567.                     }
  2568.                 });
  2569.             }
  2570.  
  2571.             // Process removed nodes to clean up description elements
  2572.             if (mutation.removedNodes.length > 0) {
  2573.                 mutation.removedNodes.forEach(node => {
  2574.                     if (node.nodeType === Node.ELEMENT_NODE) {
  2575.                         // Check if the removed node is a tweet article or contains tweet articles
  2576.                         const isTweet = node.matches && node.matches(TWEET_ARTICLE_SELECTOR);
  2577.                         const removedTweets = isTweet ? [node] :
  2578.                             (node.querySelectorAll ? Array.from(node.querySelectorAll(TWEET_ARTICLE_SELECTOR)) : []);
  2579.  
  2580.                         // For each removed tweet, find and remove its description element
  2581.                         removedTweets.forEach(tweet => {
  2582.                             const indicator = tweet.querySelector('.score-indicator');
  2583.                             if (indicator && indicator.dataset.id) {
  2584.                                 const descId = 'desc-' + indicator.dataset.id;
  2585.                                 const descBox = document.getElementById(descId);
  2586.                                 if (descBox) {
  2587.                                     descBox.remove();
  2588.                                     //console.debug(`Removed description box ${descId} for tweet that was removed from the DOM`);
  2589.                                 }
  2590.                             }
  2591.                         });
  2592.                     }
  2593.                 });
  2594.             }
  2595.         }
  2596.     }
  2597. }
  2598.     // ----- ratingEngine.js -----
  2599. /**
  2600.  * Applies filtering to a single tweet by hiding it if its score is below the threshold.
  2601.  * Also updates the rating indicator.
  2602.  * @param {Element} tweetArticle - The tweet element.
  2603.  */
  2604. function filterSingleTweet(tweetArticle) {
  2605.     const score = parseInt(tweetArticle.dataset.sloppinessScore || '0', 10);
  2606.     // Update the indicator based on the tweet's rating status
  2607.     setScoreIndicator(tweetArticle, score, tweetArticle.dataset.ratingStatus || 'rated', tweetArticle.dataset.ratingDescription);
  2608.     // If the tweet is still pending a rating, keep it visible
  2609.     if (tweetArticle.dataset.ratingStatus === 'pending') {
  2610.         tweetArticle.style.display = '';
  2611.     } else if (isNaN(score) || score < currentFilterThreshold) {
  2612.         tweetArticle.style.display = 'none';
  2613.     } else {
  2614.         tweetArticle.style.display = '';
  2615.     }
  2616. }
  2617.  
  2618. /**
  2619.  * Applies a cached rating (if available) to a tweet article.
  2620.  * Also sets the rating status to 'rated' and updates the indicator.
  2621.  * @param {Element} tweetArticle - The tweet element.
  2622.  * @returns {boolean} True if a cached rating was applied.
  2623.  */
  2624. function applyTweetCachedRating(tweetArticle) {
  2625.     const tweetId = getTweetID(tweetArticle);
  2626.     const handles = getUserHandles(tweetArticle);
  2627.     const userHandle = handles.length > 0 ? handles[0] : '';
  2628.     // Blacklisted users are automatically given a score of 10
  2629.     if (userHandle && isUserBlacklisted(userHandle)) {
  2630.         //console.debug(`Blacklisted user detected: ${userHandle}, assigning score 10`);
  2631.         tweetArticle.dataset.sloppinessScore = '10';
  2632.         tweetArticle.dataset.blacklisted = 'true';
  2633.         tweetArticle.dataset.ratingStatus = 'blacklisted';
  2634.         tweetArticle.dataset.ratingDescription = 'Whtielisted user';
  2635.         setScoreIndicator(tweetArticle, 10, 'blacklisted', "User is whitelisted");
  2636.         filterSingleTweet(tweetArticle);
  2637.         return true;
  2638.     }
  2639.     // Check ID-based cache
  2640.     if (tweetIDRatingCache[tweetId]) {
  2641.         const score = tweetIDRatingCache[tweetId].score;
  2642.         const desc = tweetIDRatingCache[tweetId].description;
  2643.         //console.debug(`Applied cached rating for tweet ${tweetId}: ${score}`);
  2644.         tweetArticle.dataset.sloppinessScore = score.toString();
  2645.         tweetArticle.dataset.cachedRating = 'true';
  2646.         tweetArticle.dataset.ratingStatus = 'cached';
  2647.         tweetArticle.dataset.ratingDescription = desc;
  2648.         setScoreIndicator(tweetArticle, score, 'cached', desc);
  2649.         filterSingleTweet(tweetArticle);
  2650.         return true;
  2651.     }
  2652.  
  2653.     return false;
  2654. }
  2655. // ----- UI Helper Functions -----
  2656.  
  2657. /**
  2658.  * Saves the tweet ratings (by tweet ID) to persistent storage.
  2659.  */
  2660. function saveTweetRatings() {
  2661.     GM_setValue('tweetRatings', JSON.stringify(tweetIDRatingCache));
  2662.     //console.log(`Saved ${Object.keys(tweetIDRatingCache).length} tweet ratings to storage`);
  2663. }
  2664. /**
  2665.  * Checks if a given user handle is in the blacklist.
  2666.  * @param {string} handle - The Twitter handle.
  2667.  * @returns {boolean} True if blacklisted, false otherwise.
  2668.  */
  2669. function isUserBlacklisted(handle) {
  2670.     if (!handle) return false;
  2671.     handle = handle.toLowerCase().trim();
  2672.     return blacklistedHandles.some(h => h.toLowerCase().trim() === handle);
  2673. }
  2674.  
  2675. async function delayedProcessTweet(tweetArticle, tweetId) {
  2676.     const apiKey = GM_getValue('openrouter-api-key', '');
  2677.     if (!apiKey) {
  2678.         tweetArticle.dataset.ratingStatus = 'error';
  2679.         tweetArticle.dataset.ratingDescription = "No API key";
  2680.         setScoreIndicator(tweetArticle, 5, 'error', "No API key");
  2681.         filterSingleTweet(tweetArticle);
  2682.         return;
  2683.     }
  2684.     let score = 5; // Default score if rating fails
  2685.     let description = "";
  2686.  
  2687.     try {
  2688.         // Get user handle
  2689.         const handles = getUserHandles(tweetArticle);
  2690.         const userHandle = handles.length > 0 ? handles[0] : '';
  2691.         const quotedHandle = handles.length > 1 ? handles[1] : '';
  2692.         const allMediaLinks = extractMediaLinks(tweetArticle);
  2693.         // Check if tweet's author is blacklisted (fast path)
  2694.         if (userHandle && isUserBlacklisted(userHandle)) {
  2695.             tweetArticle.dataset.sloppinessScore = '10';
  2696.             tweetArticle.dataset.blacklisted = 'true';
  2697.             tweetArticle.dataset.ratingStatus = 'blacklisted';
  2698.             tweetArticle.dataset.ratingDescription = "Blacklisted user";
  2699.             setScoreIndicator(tweetArticle, 10, 'blacklisted', "User is blacklisted");
  2700.             filterSingleTweet(tweetArticle);
  2701.             return;
  2702.         }
  2703.         // Check if a cached rating exists
  2704.         if (applyTweetCachedRating(tweetArticle)) {
  2705.             return;
  2706.         }
  2707.        
  2708.         const fullContextWithImageDescription = await getFullContext(tweetArticle, tweetId, apiKey);
  2709.         // --- API Call or Fallback ---
  2710.         if (apiKey && fullContextWithImageDescription) {
  2711.             try {
  2712.                 const rating = await rateTweetWithOpenRouter(fullContextWithImageDescription, tweetId, apiKey, allMediaLinks);
  2713.                 score = rating.score;
  2714.                 description = rating.content;
  2715.                 tweetArticle.dataset.ratingStatus = rating.error ? 'error' : 'rated';
  2716.                 tweetArticle.dataset.ratingDescription = description || "not available";
  2717.                 tweetArticle.dataset.sloppinessScore = score.toString();
  2718.                 setScoreIndicator(tweetArticle, score, tweetArticle.dataset.ratingStatus, tweetArticle.dataset.ratingDescription);
  2719.                 filterSingleTweet(tweetArticle);
  2720.  
  2721.             } catch (apiError) {
  2722.                 score = Math.floor(Math.random() * 10) + 1; // Fallback to a random score
  2723.                 tweetArticle.dataset.ratingStatus = 'error';
  2724.             }
  2725.         } else {
  2726.             // If there's no API key or textual content (e.g., only media), use a fallback random score.
  2727.             score = Math.floor(Math.random() * 10) + 1;
  2728.             tweetArticle.dataset.ratingStatus = 'rated';
  2729.         }
  2730.  
  2731.         tweetArticle.dataset.sloppinessScore = score.toString();
  2732.         filterSingleTweet(tweetArticle);
  2733.         
  2734.         // Log all collected information at once
  2735.         console.log(`Tweet ${tweetId}:
  2736. ${fullContextWithImageDescription} - ${score} Model response: - ${description}`);
  2737.  
  2738.     } catch (error) {
  2739.         if (!tweetArticle.dataset.sloppinessScore) {
  2740.             tweetArticle.dataset.sloppinessScore = '5';
  2741.             tweetArticle.dataset.ratingStatus = 'error';
  2742.             tweetArticle.dataset.ratingDescription = "error processing tweet";
  2743.             console.error(`Error processing tweet ${tweetId}: ${error}`);
  2744.             setScoreIndicator(tweetArticle, 5, 'error', 'Error processing tweet');
  2745.             filterSingleTweet(tweetArticle);
  2746.         }
  2747.     }
  2748. }
  2749.  
  2750. /**
  2751.  * Schedules processing of a tweet if it hasn't been processed yet.
  2752.  * @param {Element} tweetArticle - The tweet element.
  2753.  */
  2754. function scheduleTweetProcessing(tweetArticle) {
  2755.     const tweetId = getTweetID(tweetArticle);
  2756.     // Fast-path: if author is blacklisted, assign score immediately
  2757.     const handles = getUserHandles(tweetArticle);
  2758.     const userHandle = handles.length > 0 ? handles[0] : '';
  2759.     if (userHandle && isUserBlacklisted(userHandle)) {
  2760.         tweetArticle.dataset.sloppinessScore = '10';
  2761.         tweetArticle.dataset.blacklisted = 'true';
  2762.         tweetArticle.dataset.ratingStatus = 'rated';
  2763.  
  2764.         tweetArticle.dataset.ratingDescription = "Whitelisted user";
  2765.         setScoreIndicator(tweetArticle, 10, 'blacklisted', "User is whitelisted");
  2766.         filterSingleTweet(tweetArticle);
  2767.         return;
  2768.     }
  2769.     // If a cached rating is available, use it immediately
  2770.     if (tweetIDRatingCache[tweetId]) {
  2771.         applyTweetCachedRating(tweetArticle);
  2772.         return;
  2773.     }
  2774.     // Skip if already processed in this session
  2775.     if (processedTweets.has(tweetId)) {
  2776.         return;
  2777.     }
  2778.  
  2779.     // Immediately mark as pending before scheduling actual processing
  2780.     processedTweets.add(tweetId);
  2781.     tweetArticle.dataset.ratingStatus = 'pending';
  2782.     setScoreIndicator(tweetArticle, null, 'pending');
  2783.  
  2784.     // Now schedule the actual rating processing
  2785.     setTimeout(() => { delayedProcessTweet(tweetArticle, tweetId); }, PROCESSING_DELAY_MS);
  2786. }
  2787.  
  2788.  
  2789. /**
  2790.  * Extracts the full context of a tweet article and returns a formatted string.
  2791.  *
  2792.  * Schema:
  2793.  * [TWEET]:
  2794.  * @[the author of the tweet]
  2795.  * [the text of the tweet]
  2796.  * [MEDIA_DESCRIPTION]:
  2797.  * [IMAGE 1]: [description], [IMAGE 2]: [description], etc.
  2798.  * [QUOTED_TWEET]:
  2799.  * [the text of the quoted tweet]
  2800.  * [QUOTED_TWEET_MEDIA_DESCRIPTION]:
  2801.  * [IMAGE 1]: [description], [IMAGE 2]: [description], etc.
  2802.  *
  2803.  * @param {Element} tweetArticle - The tweet article element.
  2804.  * @param {string} tweetId - The tweet's ID.
  2805.  * @param {string} apiKey - API key used for getting image descriptions.
  2806.  * @returns {Promise<string>} - The full context string.
  2807.  */
  2808. async function getFullContext(tweetArticle, tweetId, apiKey) {
  2809.     const handles = getUserHandles(tweetArticle);
  2810.     const userHandle = handles.length > 0 ? handles[0] : '';
  2811.     const quotedHandle = handles.length > 1 ? handles[1] : '';
  2812.     // --- Extract Main Tweet Content ---
  2813.     const mainText = getElementText(tweetArticle.querySelector(TWEET_TEXT_SELECTOR));
  2814.     let allMediaLinks = extractMediaLinks(tweetArticle);
  2815.  
  2816.         // --- Extract Quoted Tweet Content (if any) ---
  2817.         let quotedText = "";
  2818.         let quotedMediaLinks = [];
  2819.         const quoteContainer = tweetArticle.querySelector(QUOTE_CONTAINER_SELECTOR);
  2820.         if (quoteContainer) {
  2821.             quotedText = getElementText(quoteContainer.querySelector(TWEET_TEXT_SELECTOR));
  2822.             quotedMediaLinks = extractMediaLinks(quoteContainer);
  2823.         }
  2824.         // Remove any media links from the main tweet that also appear in the quoted tweet
  2825.         let mainMediaLinks = allMediaLinks.filter(link => !quotedMediaLinks.includes(link));
  2826.         let fullContextWithImageDescription = `[TWEET ${tweetId}]
  2827.  Author:@${userHandle}:
  2828. ` + mainText;
  2829.  
  2830.         if (mainMediaLinks.length > 0) {
  2831.             // Process main tweet images only if image descriptions are enabled
  2832.             if (enableImageDescriptions) {
  2833.                 let mainMediaLinksDescription = await getImageDescription(mainMediaLinks, apiKey, tweetId, userHandle);
  2834.                 fullContextWithImageDescription += `
  2835. [MEDIA_DESCRIPTION]:
  2836. ${mainMediaLinksDescription}`;
  2837.             }
  2838.             // Just add the URLs when descriptions are disabled
  2839.             fullContextWithImageDescription += `
  2840. [MEDIA_URLS]:
  2841. ${mainMediaLinks.join(", ")}`;
  2842.         }
  2843.         // --- Quoted Tweet Handling ---
  2844.         if (quotedText) {
  2845.             fullContextWithImageDescription += `
  2846. [QUOTED_TWEET]:
  2847.  Author:@${quotedHandle}:
  2848. ${quotedText}`;
  2849.             if (quotedMediaLinks.length > 0) {
  2850.                 // Process quoted tweet images only if image descriptions are enabled
  2851.                 if (enableImageDescriptions) {
  2852.                     let quotedMediaLinksDescription = await getImageDescription(quotedMediaLinks, apiKey, tweetId, userHandle);
  2853.                     fullContextWithImageDescription += `
  2854. [QUOTED_TWEET_MEDIA_DESCRIPTION]:
  2855. ${quotedMediaLinksDescription}`;
  2856.                 } else {
  2857.                     // Just add the URLs when descriptions are disabled
  2858.                     fullContextWithImageDescription += `
  2859. [QUOTED_TWEET_MEDIA_URLS]:
  2860. ${quotedMediaLinks.join(", ")}`;
  2861.                 }
  2862.             }
  2863.         }
  2864.  
  2865.         // --- Conversation Thread Handling ---
  2866.         const conversation = document.querySelector('div[aria-label="Timeline: Conversation"]');
  2867.         if (conversation && conversation.dataset.threadHist) {
  2868.             // If this tweet is not the original tweet, prepend the thread history.
  2869.             if (!isOriginalTweet(tweetArticle)) {
  2870.                 fullContextWithImageDescription = conversation.dataset.threadHist + `
  2871. [REPLY]
  2872. ` + fullContextWithImageDescription;
  2873.             }
  2874.         }
  2875.         tweetArticle.dataset.fullContext = fullContextWithImageDescription;
  2876.         return fullContextWithImageDescription;
  2877.     
  2878. }
  2879.  
  2880.  
  2881. /**
  2882.  * Applies filtering to all tweets currently in the observed container.
  2883.  */
  2884. function applyFilteringToAll() {
  2885.     if (!observedTargetNode) return;
  2886.     const tweets = observedTargetNode.querySelectorAll(TWEET_ARTICLE_SELECTOR);
  2887.     tweets.forEach(filterSingleTweet);
  2888. }
  2889.  
  2890. /**
  2891.  * Periodically checks and processes tweets that might have been added without triggering mutations.
  2892.  */
  2893. function ensureAllTweetsRated() {
  2894.     if (!observedTargetNode) return;
  2895.     const tweets = observedTargetNode.querySelectorAll(TWEET_ARTICLE_SELECTOR);
  2896.     tweets.forEach(tweet => {
  2897.         if (!tweet.dataset.sloppinessScore) {
  2898.             scheduleTweetProcessing(tweet);
  2899.         }
  2900.     });
  2901. }
  2902.  
  2903. async function handleThreads() {
  2904.     let conversation = document.querySelector('div[aria-label="Timeline: Conversation"]');
  2905.     if (conversation) {
  2906.  
  2907.         if (conversation.dataset.threadHist == undefined) {
  2908.  
  2909.             threadHist = "";
  2910.             const firstArticle = document.querySelector('article[data-testid="tweet"]');
  2911.             if (firstArticle) {
  2912.                 conversation.dataset.threadHist = 'pending';
  2913.                 const tweetId = getTweetID(firstArticle);
  2914.                 if (tweetIDRatingCache[tweetId]) {
  2915.                     threadHist = tweetIDRatingCache[tweetId].tweetContent;
  2916.                 } else {
  2917.                     const apiKey = GM_getValue('openrouter-api-key', '');
  2918.                     const fullcxt = await getFullContext(firstArticle, tweetId, apiKey);
  2919.                     threadHist = fullcxt;
  2920.                 }
  2921.                 conversation.dataset.threadHist = threadHist;
  2922.                 //this lets us know if we are still on the main post of the conversation or if we are on a reply to the main post. Will disapear every time we dive deeper
  2923.                 conversation.firstChild.dataset.canary = "true";
  2924.             }
  2925.         }
  2926.         else if (conversation.dataset.threadHist == "pending") {
  2927.             return;
  2928.         }
  2929.         else if (conversation.dataset.threadHist != "pending" && conversation.firstChild.dataset.canary == undefined) {
  2930.             conversation.firstChild.dataset.canary = "pending";
  2931.             const nextArticle = document.querySelector('article[data-testid="tweet"]:has(~ div[data-testid="inline_reply_offscreen"])');
  2932.             const tweetId = getTweetID(nextArticle);
  2933.             if (tweetIDRatingCache[tweetId]) {
  2934.                 threadHist = threadHist + "\n[REPLY]\n" + tweetIDRatingCache[tweetId].tweetContent;
  2935.             } else {
  2936.                 const apiKey = GM_getValue('openrouter-api-key', '');
  2937.                 await new Promise(resolve => setTimeout(resolve, 500));
  2938.                 const newContext = await getFullContext(nextArticle, tweetId, apiKey);
  2939.                 threadHist = threadHist + "\n[REPLY]\n" + newContext;
  2940.                 conversation.dataset.threadHist = threadHist;
  2941.             }
  2942.         }
  2943.     }
  2944. }
  2945.  
  2946.  
  2947.     // ----- ui.js -----
  2948. // --- Constants ---
  2949. const VERSION = '1.3'; // Update version here
  2950.  
  2951. // --- Utility Functions ---
  2952.  
  2953. /**
  2954.  * Displays a temporary status message on the screen.
  2955.  * @param {string} message - The message to display.
  2956.  */
  2957. function showStatus(message) {
  2958.     const indicator = document.getElementById('status-indicator');
  2959.     if (!indicator) {
  2960.         console.error('#status-indicator element not found.');
  2961.         return;
  2962.     }
  2963.     indicator.textContent = message;
  2964.     indicator.classList.add('active');
  2965.     setTimeout(() => { indicator.classList.remove('active'); }, 3000);
  2966. }
  2967.  
  2968. /**
  2969.  * Toggles the visibility of an element and updates the corresponding toggle button text.
  2970.  * @param {HTMLElement} element - The element to toggle.
  2971.  * @param {HTMLElement} toggleButton - The button that controls the toggle.
  2972.  * @param {string} openText - Text for the button when the element is open.
  2973.  * @param {string} closedText - Text for the button when the element is closed.
  2974.  */
  2975. function toggleElementVisibility(element, toggleButton, openText, closedText) {
  2976.     if (!element || !toggleButton) return;
  2977.  
  2978.     const isHidden = element.classList.toggle('hidden');
  2979.     toggleButton.innerHTML = isHidden ? closedText : openText;
  2980.  
  2981.     // Special case for filter slider button (hide it when panel is shown)
  2982.     if (element.id === 'tweet-filter-container') {
  2983.         const filterToggle = document.getElementById('filter-toggle');
  2984.         if (filterToggle) {
  2985.             filterToggle.style.display = isHidden ? 'block' : 'none';
  2986.         }
  2987.     }
  2988. }
  2989.  
  2990. // --- Core UI Logic ---
  2991.  
  2992. /**
  2993.  * Injects the UI elements from the HTML resource into the page.
  2994.  */
  2995. function injectUI() {
  2996.     //combined userscript has a const named MENU. If it exists, use it.
  2997.     let menuHTML;
  2998.     if(MENU){
  2999.         menuHTML = MENU;
  3000.     }else{
  3001.         menuHTML = GM_getValue('menuHTML');
  3002.     }
  3003.     
  3004.     if (!menuHTML) {
  3005.         console.error('Failed to load Menu.html resource!');
  3006.         showStatus('Error: Could not load UI components.');
  3007.         return null;
  3008.     }
  3009.  
  3010.     // Create a container to inject HTML
  3011.     const containerId = 'tweetfilter-root-container'; // Use the ID from the updated HTML
  3012.     let uiContainer = document.getElementById(containerId);
  3013.     if (uiContainer) {
  3014.         console.warn('UI container already exists. Skipping injection.');
  3015.         return uiContainer; // Return existing container
  3016.     }
  3017.  
  3018.     uiContainer = document.createElement('div');
  3019.     uiContainer.id = containerId;
  3020.     uiContainer.innerHTML = menuHTML;
  3021.  
  3022.     // Inject styles
  3023.     const stylesheet = uiContainer.querySelector('style');
  3024.     if (stylesheet) {
  3025.         GM_addStyle(stylesheet.textContent);
  3026.         console.log('Injected styles from Menu.html');
  3027.         stylesheet.remove(); // Remove style tag after injecting
  3028.     } else {
  3029.         console.warn('No <style> tag found in Menu.html');
  3030.     }
  3031.  
  3032.     // Append the rest of the UI elements
  3033.     document.body.appendChild(uiContainer);
  3034.     console.log('TweetFilter UI Injected from HTML resource.');
  3035.  
  3036.     // Set version number
  3037.     const versionInfo = uiContainer.querySelector('#version-info');
  3038.     if (versionInfo) {
  3039.         versionInfo.textContent = `Twitter De-Sloppifier v${VERSION}`;
  3040.     }
  3041.  
  3042.     return uiContainer; // Return the newly created container
  3043. }
  3044.  
  3045. /**
  3046.  * Initializes all UI event listeners using event delegation.
  3047.  * @param {HTMLElement} uiContainer - The root container element for the UI.
  3048.  */
  3049. function initializeEventListeners(uiContainer) {
  3050.     if (!uiContainer) {
  3051.         console.error('UI Container not found for event listeners.');
  3052.         return;
  3053.     }
  3054.  
  3055.     console.log('Wiring UI events...');
  3056.  
  3057.     const settingsContainer = uiContainer.querySelector('#settings-container');
  3058.     const filterContainer = uiContainer.querySelector('#tweet-filter-container');
  3059.     const settingsToggleBtn = uiContainer.querySelector('#settings-toggle');
  3060.     const filterToggleBtn = uiContainer.querySelector('#filter-toggle');
  3061.  
  3062.     // --- Delegated Event Listener for Clicks ---
  3063.     uiContainer.addEventListener('click', (event) => {
  3064.         const target = event.target;
  3065.         const action = target.dataset.action;
  3066.         const setting = target.dataset.setting;
  3067.         const paramName = target.closest('.parameter-row')?.dataset.paramName;
  3068.         const tab = target.dataset.tab;
  3069.         const toggleTargetId = target.closest('[data-toggle]')?.dataset.toggle;
  3070.  
  3071.         // Button Actions
  3072.         if (action) {
  3073.             switch (action) {
  3074.                 case 'close-filter':
  3075.                     toggleElementVisibility(filterContainer, filterToggleBtn, 'Filter Slider', 'Filter Slider');
  3076.                     break;
  3077.                 case 'close-settings':
  3078.                     toggleElementVisibility(settingsContainer, settingsToggleBtn, '<span style="font-size: 14px;">✕</span> Close', '<span style="font-size: 14px;">⚙️</span> Settings');
  3079.                     break;
  3080.                 case 'save-api-key':
  3081.                     saveApiKey();
  3082.                     break;
  3083.                 case 'clear-cache':
  3084.                     clearTweetRatingsAndRefreshUI();
  3085.                     break;
  3086.                 case 'export-settings':
  3087.                     exportSettings();
  3088.                     break;
  3089.                 case 'import-settings':
  3090.                     importSettings();
  3091.                     break;
  3092.                 case 'reset-settings':
  3093.                     resetSettings();
  3094.                     break;
  3095.                 case 'save-instructions':
  3096.                     saveInstructions();
  3097.                     break;
  3098.                 case 'add-handle':
  3099.                     addHandleFromInput();
  3100.                     break;
  3101.             }
  3102.         }
  3103.  
  3104.         // Handle List Removal (delegated)
  3105.         if (target.classList.contains('remove-handle')) {
  3106.             const handleItem = target.closest('.handle-item');
  3107.             const handleTextElement = handleItem?.querySelector('.handle-text');
  3108.             if (handleTextElement) {
  3109.                 const handle = handleTextElement.textContent.substring(1); // Remove '@'
  3110.                 removeHandleFromBlacklist(handle);
  3111.             }
  3112.         }
  3113.  
  3114.         // Tab Switching
  3115.         if (tab) {
  3116.             switchTab(tab);
  3117.         }
  3118.  
  3119.         // Advanced Options Toggle
  3120.         if (toggleTargetId) {
  3121.             toggleAdvancedOptions(toggleTargetId);
  3122.         }
  3123.     });
  3124.  
  3125.     // --- Delegated Event Listener for Input/Change ---
  3126.     uiContainer.addEventListener('input', (event) => {
  3127.         const target = event.target;
  3128.         const setting = target.dataset.setting;
  3129.         const paramName = target.closest('.parameter-row')?.dataset.paramName;
  3130.  
  3131.         // Settings Inputs / Toggles
  3132.         if (setting) {
  3133.             handleSettingChange(target, setting);
  3134.         }
  3135.  
  3136.         // Parameter Controls (Sliders/Number Inputs)
  3137.         if (paramName) {
  3138.             handleParameterChange(target, paramName);
  3139.         }
  3140.  
  3141.         // Filter Slider
  3142.         if (target.id === 'tweet-filter-slider') {
  3143.             handleFilterSliderChange(target);
  3144.         }
  3145.     });
  3146.  
  3147.     uiContainer.addEventListener('change', (event) => {
  3148.         const target = event.target;
  3149.         const setting = target.dataset.setting;
  3150.  
  3151.          // Settings Inputs / Toggles (for selects like sort order)
  3152.          if (setting === 'modelSortOrder') {
  3153.             handleSettingChange(target, setting);
  3154.             fetchAvailableModels(); // Refresh models on sort change
  3155.          }
  3156.  
  3157.           // Settings Checkbox toggle (need change event for checkboxes)
  3158.           if (setting === 'enableImageDescriptions') {
  3159.              handleSettingChange(target, setting);
  3160.           }
  3161.     });
  3162.  
  3163.     // --- Direct Event Listeners (Less common cases) ---
  3164.  
  3165.     // Settings Toggle Button
  3166.     if (settingsToggleBtn) {
  3167.         settingsToggleBtn.onclick = () => {
  3168.             toggleElementVisibility(settingsContainer, settingsToggleBtn, '<span style="font-size: 14px;">✕</span> Close', '<span style="font-size: 14px;">⚙️</span> Settings');
  3169.         };
  3170.     }
  3171.  
  3172.     // Filter Toggle Button
  3173.     if (filterToggleBtn) {
  3174.         filterToggleBtn.onclick = () => {
  3175.              // Ensure filter container is shown and button is hidden
  3176.              if (filterContainer) filterContainer.classList.remove('hidden');
  3177.              filterToggleBtn.style.display = 'none';
  3178.         };
  3179.     }
  3180.  
  3181.     // Close custom selects when clicking outside
  3182.     document.addEventListener('click', closeAllSelectBoxes);
  3183.  
  3184.     console.log('UI events wired.');
  3185. }
  3186.  
  3187. // --- Event Handlers ---
  3188.  
  3189. /** Saves the API key from the input field. */
  3190. function saveApiKey() {
  3191.     const apiKeyInput = document.getElementById('openrouter-api-key');
  3192.     const apiKey = apiKeyInput.value.trim();
  3193.     let previousAPIKey = GM_getValue('openrouter-api-key', '').length>0?true:false;
  3194.     if (apiKey) {
  3195.         if (!previousAPIKey){
  3196.             resetSettings(true);
  3197.             //jank hack to get the UI defaults to load correctly
  3198.         }
  3199.         GM_setValue('openrouter-api-key', apiKey);
  3200.         showStatus('API key saved successfully!');
  3201.         fetchAvailableModels(); // Refresh model list
  3202.     } else {
  3203.         showStatus('Please enter a valid API key');
  3204.     }
  3205. }
  3206.  
  3207. /** Clears tweet ratings and updates the relevant UI parts. */
  3208. function clearTweetRatingsAndRefreshUI() {
  3209.     if (confirm('Are you sure you want to clear all cached tweet ratings?')) {
  3210.         Object.keys(tweetIDRatingCache).forEach(key => delete tweetIDRatingCache[key]);
  3211.         GM_setValue('tweetRatings', '{}');
  3212.         showStatus('All cached ratings cleared!');
  3213.         console.log('Cleared all tweet ratings');
  3214.  
  3215.         updateCacheStatsUI();
  3216.  
  3217.         // Re-process visible tweets
  3218.         if (observedTargetNode) {
  3219.             observedTargetNode.querySelectorAll(TWEET_ARTICLE_SELECTOR).forEach(tweet => {
  3220.                 tweet.dataset.sloppinessScore = ''; // Clear potential old score attribute
  3221.                 delete tweet.dataset.cachedRating;
  3222.                 delete tweet.dataset.blacklisted;
  3223.                 processedTweets.delete(getTweetID(tweet));
  3224.                 scheduleTweetProcessing(tweet);
  3225.             });
  3226.         }
  3227.     }
  3228. }
  3229.  
  3230. /** Saves the custom instructions from the textarea. */
  3231. function saveInstructions() {
  3232.     const instructionsTextarea = document.getElementById('user-instructions');
  3233.     USER_DEFINED_INSTRUCTIONS = instructionsTextarea.value;
  3234.     GM_setValue('userDefinedInstructions', USER_DEFINED_INSTRUCTIONS);
  3235.     showStatus('Scoring instructions saved! New tweets will use these instructions.');
  3236.     if (confirm('Do you want to clear the rating cache to apply these instructions to all tweets?')) {
  3237.         clearTweetRatingsAndRefreshUI();
  3238.     }
  3239. }
  3240.  
  3241. /** Adds a handle from the input field to the blacklist. */
  3242. function addHandleFromInput() {
  3243.     const handleInput = document.getElementById('handle-input');
  3244.     const handle = handleInput.value.trim();
  3245.     if (handle) {
  3246.         addHandleToBlacklist(handle);
  3247.         handleInput.value = ''; // Clear input after adding
  3248.     }
  3249. }
  3250.  
  3251. /**
  3252.  * Handles changes to general setting inputs/toggles.
  3253.  * @param {HTMLElement} target - The input/toggle element that changed.
  3254.  * @param {string} settingName - The name of the setting (from data-setting).
  3255.  */
  3256. function handleSettingChange(target, settingName) {
  3257.     let value;
  3258.     if (target.type === 'checkbox') {
  3259.         value = target.checked;
  3260.     } else {
  3261.         value = target.value;
  3262.     }
  3263.  
  3264.     // Update global variable if it exists
  3265.     if (window[settingName] !== undefined) {
  3266.         window[settingName] = value;
  3267.     }
  3268.  
  3269.     // Save to GM storage
  3270.     GM_setValue(settingName, value);
  3271.  
  3272.     // Special UI updates for specific settings
  3273.     if (settingName === 'enableImageDescriptions') {
  3274.         const imageModelContainer = document.getElementById('image-model-container');
  3275.         if (imageModelContainer) {
  3276.             imageModelContainer.style.display = value ? 'block' : 'none';
  3277.         }
  3278.         showStatus('Image descriptions ' + (value ? 'enabled' : 'disabled'));
  3279.     }
  3280. }
  3281.  
  3282. /**
  3283.  * Handles changes to parameter control sliders/number inputs.
  3284.  * @param {HTMLElement} target - The slider or number input element.
  3285.  * @param {string} paramName - The name of the parameter (from data-param-name).
  3286.  */
  3287. function handleParameterChange(target, paramName) {
  3288.     const row = target.closest('.parameter-row');
  3289.     if (!row) return;
  3290.  
  3291.     const slider = row.querySelector('.parameter-slider');
  3292.     const valueInput = row.querySelector('.parameter-value');
  3293.     const min = parseFloat(slider.min);
  3294.     const max = parseFloat(slider.max);
  3295.     let newValue = parseFloat(target.value);
  3296.  
  3297.     // Clamp value if it's from the number input
  3298.     if (target.type === 'number' && !isNaN(newValue)) {
  3299.         newValue = Math.max(min, Math.min(max, newValue));
  3300.     }
  3301.  
  3302.     // Update both slider and input
  3303.     if (slider && valueInput) {
  3304.             slider.value = newValue;
  3305.         valueInput.value = newValue;
  3306.     }
  3307.  
  3308.     // Update global variable
  3309.     if (window[paramName] !== undefined) {
  3310.         window[paramName] = newValue;
  3311.     }
  3312.  
  3313.     // Save to GM storage
  3314.     GM_setValue(paramName, newValue);
  3315. }
  3316.  
  3317. /**
  3318.  * Handles changes to the main filter slider.
  3319.  * @param {HTMLElement} slider - The filter slider element.
  3320.  */
  3321. function handleFilterSliderChange(slider) {
  3322.     const valueDisplay = document.getElementById('tweet-filter-value');
  3323.     currentFilterThreshold = parseInt(slider.value, 10);
  3324.     if (valueDisplay) {
  3325.         valueDisplay.textContent = currentFilterThreshold.toString();
  3326.     }
  3327.     GM_setValue('filterThreshold', currentFilterThreshold);
  3328.     applyFilteringToAll();
  3329. }
  3330.  
  3331. /**
  3332.  * Switches the active tab in the settings panel.
  3333.  * @param {string} tabName - The name of the tab to activate (from data-tab).
  3334.  */
  3335. function switchTab(tabName) {
  3336.     const settingsContent = document.querySelector('#settings-container .settings-content');
  3337.     if (!settingsContent) return;
  3338.  
  3339.     const tabs = settingsContent.querySelectorAll('.tab-content');
  3340.     const buttons = settingsContent.querySelectorAll('.tab-navigation .tab-button');
  3341.  
  3342.     tabs.forEach(tab => tab.classList.remove('active'));
  3343.     buttons.forEach(btn => btn.classList.remove('active'));
  3344.  
  3345.     const tabToShow = settingsContent.querySelector(`#${tabName}-tab`);
  3346.     const buttonToActivate = settingsContent.querySelector(`.tab-navigation .tab-button[data-tab="${tabName}"]`);
  3347.  
  3348.     if (tabToShow) tabToShow.classList.add('active');
  3349.     if (buttonToActivate) buttonToActivate.classList.add('active');
  3350. }
  3351.  
  3352. /**
  3353.  * Toggles the visibility of advanced options sections.
  3354.  * @param {string} contentId - The ID of the content element to toggle.
  3355.  */
  3356. function toggleAdvancedOptions(contentId) {
  3357.     const content = document.getElementById(contentId);
  3358.     const toggle = document.querySelector(`[data-toggle="${contentId}"]`);
  3359.     if (!content || !toggle) return;
  3360.  
  3361.     const icon = toggle.querySelector('.advanced-toggle-icon');
  3362.     const isExpanded = content.classList.toggle('expanded');
  3363.  
  3364.     if (icon) {
  3365.         icon.classList.toggle('expanded', isExpanded);
  3366.     }
  3367.  
  3368.     // Adjust max-height for smooth animation
  3369.     if (isExpanded) {
  3370.         content.style.maxHeight = content.scrollHeight + 'px';
  3371.     } else {
  3372.         content.style.maxHeight = '0';
  3373.     }
  3374. }
  3375.  
  3376. // --- UI Update Functions ---
  3377.  
  3378. /** Updates the cache statistics display in the General tab. */
  3379. function updateCacheStatsUI() {
  3380.     const cachedCountEl = document.getElementById('cached-ratings-count');
  3381.     const whitelistedCountEl = document.getElementById('whitelisted-handles-count');
  3382.  
  3383.     if (cachedCountEl) {
  3384.         cachedCountEl.textContent = Object.keys(tweetIDRatingCache).length;
  3385.     }
  3386.     if (whitelistedCountEl) {
  3387.         whitelistedCountEl.textContent = blacklistedHandles.length;
  3388.     }
  3389. }
  3390.  
  3391. /**
  3392.  * Refreshes the entire settings UI to reflect current settings.
  3393.  */
  3394. function refreshSettingsUI() {
  3395.     // Update general settings inputs/toggles
  3396.     document.querySelectorAll('[data-setting]').forEach(input => {
  3397.         const settingName = input.dataset.setting;
  3398.         const value = GM_getValue(settingName, window[settingName]); // Get saved or default value
  3399.         if (input.type === 'checkbox') {
  3400.             input.checked = value;
  3401.             // Trigger change handler for side effects (like hiding/showing image model section)
  3402.             handleSettingChange(input, settingName);
  3403.         } else {
  3404.             input.value = value;
  3405.         }
  3406.     });
  3407.  
  3408.     // Update parameter controls (sliders/number inputs)
  3409.     document.querySelectorAll('.parameter-row[data-param-name]').forEach(row => {
  3410.         const paramName = row.dataset.paramName;
  3411.         const slider = row.querySelector('.parameter-slider');
  3412.         const valueInput = row.querySelector('.parameter-value');
  3413.         const value = GM_getValue(paramName, window[paramName]);
  3414.  
  3415.         if (slider) slider.value = value;
  3416.         if (valueInput) valueInput.value = value;
  3417.     });
  3418.  
  3419.     // Update filter slider
  3420.     const filterSlider = document.getElementById('tweet-filter-slider');
  3421.     const filterValueDisplay = document.getElementById('tweet-filter-value');
  3422.     if (filterSlider && filterValueDisplay) {
  3423.         filterSlider.value = currentFilterThreshold.toString();
  3424.         filterValueDisplay.textContent = currentFilterThreshold.toString();
  3425.     }
  3426.  
  3427.     // Refresh dynamically populated lists/dropdowns
  3428.         refreshHandleList(document.getElementById('handle-list'));
  3429.     refreshModelsUI(); // Refreshes model dropdowns
  3430.  
  3431.     // Update cache stats
  3432.     updateCacheStatsUI();
  3433.  
  3434.     // Set initial state for advanced sections (collapsed by default unless CSS specifies otherwise)
  3435.     document.querySelectorAll('.advanced-content').forEach(content => {
  3436.         if (!content.classList.contains('expanded')) {
  3437.             content.style.maxHeight = '0';
  3438.         }
  3439.     });
  3440.     document.querySelectorAll('.advanced-toggle-icon.expanded').forEach(icon => {
  3441.         // Ensure icon matches state if CSS defaults to expanded
  3442.         if (!icon.closest('.advanced-toggle')?.nextElementSibling?.classList.contains('expanded')) {
  3443.            icon.classList.remove('expanded');
  3444.         }
  3445.     });
  3446. }
  3447.  
  3448. /**
  3449.  * Refreshes the handle list UI.
  3450.  * @param {HTMLElement} listElement - The list element to refresh.
  3451.  */
  3452. function refreshHandleList(listElement) {
  3453.     if (!listElement) return;
  3454.  
  3455.     listElement.innerHTML = ''; // Clear existing list
  3456.  
  3457.     if (blacklistedHandles.length === 0) {
  3458.         const emptyMsg = document.createElement('div');
  3459.         emptyMsg.style.cssText = 'padding: 8px; opacity: 0.7; font-style: italic;';
  3460.         emptyMsg.textContent = 'No handles added yet';
  3461.         listElement.appendChild(emptyMsg);
  3462.         return;
  3463.     }
  3464.  
  3465.     blacklistedHandles.forEach(handle => {
  3466.         const item = document.createElement('div');
  3467.         item.className = 'handle-item';
  3468.  
  3469.         const handleText = document.createElement('div');
  3470.         handleText.className = 'handle-text';
  3471.         handleText.textContent = '@' + handle;
  3472.         item.appendChild(handleText);
  3473.  
  3474.         const removeBtn = document.createElement('button');
  3475.         removeBtn.className = 'remove-handle';
  3476.         removeBtn.textContent = '×';
  3477.         removeBtn.title = 'Remove from list';
  3478.         // removeBtn listener is handled by delegation in initializeEventListeners
  3479.         item.appendChild(removeBtn);
  3480.  
  3481.         listElement.appendChild(item);
  3482.     });
  3483. }
  3484.  
  3485. /**
  3486.  * Updates the model selection dropdowns based on availableModels.
  3487.  */
  3488. function refreshModelsUI() {
  3489.     const modelSelectContainer = document.getElementById('model-select-container');
  3490.     const imageModelSelectContainer = document.getElementById('image-model-select-container');
  3491.  
  3492.     const models = availableModels || []; // Ensure availableModels is an array
  3493.  
  3494.     // Update main model selector
  3495.     if (modelSelectContainer) {
  3496.         modelSelectContainer.innerHTML = ''; // Clear current
  3497.     createCustomSelect(
  3498.         modelSelectContainer,
  3499.             'model-selector', // ID for the custom select element
  3500.             models.map(model => ({ value: model.slug || model.id, label: formatModelLabel(model) })),
  3501.             selectedModel, // Current selected value
  3502.             (newValue) => { // onChange callback
  3503.             selectedModel = newValue;
  3504.             GM_setValue('selectedModel', selectedModel);
  3505.             showStatus('Rating model updated');
  3506.         },
  3507.             'Search rating models...' // Placeholder
  3508.         );
  3509.     }
  3510.  
  3511.     // Update image model selector
  3512.     if (imageModelSelectContainer) {
  3513.         const visionModels = models.filter(model =>
  3514.             model.input_modalities?.includes('image') ||
  3515.             model.architecture?.input_modalities?.includes('image') ||
  3516.             model.architecture?.modality?.includes('image')
  3517.         );
  3518.  
  3519.         imageModelSelectContainer.innerHTML = ''; // Clear current
  3520.     createCustomSelect(
  3521.         imageModelSelectContainer,
  3522.             'image-model-selector', // ID for the custom select element
  3523.             visionModels.map(model => ({ value: model.slug || model.id, label: formatModelLabel(model) })),
  3524.             selectedImageModel, // Current selected value
  3525.             (newValue) => { // onChange callback
  3526.             selectedImageModel = newValue;
  3527.             GM_setValue('selectedImageModel', selectedImageModel);
  3528.             showStatus('Image model updated');
  3529.         },
  3530.             'Search vision models...' // Placeholder
  3531.         );
  3532.     }
  3533. }
  3534.  
  3535. /**
  3536.  * Formats a model object into a string for display in dropdowns.
  3537.  * @param {Object} model - The model object from the API.
  3538.  * @returns {string} A formatted label string.
  3539.  */
  3540. function formatModelLabel(model) {
  3541.     let label = model.slug || model.id || model.name || 'Unknown Model';
  3542.     let pricingInfo = '';
  3543.  
  3544.     // Extract pricing
  3545.     const pricing = model.endpoint?.pricing || model.pricing;
  3546.     if (pricing) {
  3547.         const promptPrice = parseFloat(pricing.prompt);
  3548.         const completionPrice = parseFloat(pricing.completion);
  3549.  
  3550.         if (!isNaN(promptPrice)) {
  3551.             pricingInfo += ` - $${promptPrice.toFixed(7)}/in`;
  3552.             if (!isNaN(completionPrice) && completionPrice !== promptPrice) {
  3553.                 pricingInfo += ` $${completionPrice.toFixed(7)}/out`;
  3554.             }
  3555.         } else if (!isNaN(completionPrice)) {
  3556.             // Handle case where only completion price is available (less common)
  3557.             pricingInfo += ` - $${completionPrice.toFixed(7)}/out`;
  3558.         }
  3559.     }
  3560.  
  3561.     // Add vision icon
  3562.     const isVision = model.input_modalities?.includes('image') ||
  3563.                      model.architecture?.input_modalities?.includes('image') ||
  3564.                      model.architecture?.modality?.includes('image');
  3565.     if (isVision) {
  3566.         label = '🖼️ ' + label;
  3567.     }
  3568.  
  3569.     return label + pricingInfo;
  3570. }
  3571.  
  3572. // --- Custom Select Dropdown Logic (largely unchanged, but included for completeness) ---
  3573.  
  3574. /**
  3575.  * Creates a custom select dropdown with search functionality.
  3576.  * @param {HTMLElement} container - Container to append the custom select to.
  3577.  * @param {string} id - ID for the root custom-select div.
  3578.  * @param {Array<{value: string, label: string}>} options - Options for the dropdown.
  3579.  * @param {string} initialSelectedValue - Initially selected value.
  3580.  * @param {Function} onChange - Callback function when selection changes.
  3581.  * @param {string} searchPlaceholder - Placeholder text for the search input.
  3582.  */
  3583. function createCustomSelect(container, id, options, initialSelectedValue, onChange, searchPlaceholder) {
  3584.     let currentSelectedValue = initialSelectedValue;
  3585.  
  3586.     const customSelect = document.createElement('div');
  3587.     customSelect.className = 'custom-select';
  3588.     customSelect.id = id;
  3589.  
  3590.     const selectSelected = document.createElement('div');
  3591.     selectSelected.className = 'select-selected';
  3592.  
  3593.     const selectItems = document.createElement('div');
  3594.     selectItems.className = 'select-items';
  3595.     selectItems.style.display = 'none'; // Initially hidden
  3596.  
  3597.     const searchField = document.createElement('div');
  3598.     searchField.className = 'search-field';
  3599.     const searchInput = document.createElement('input');
  3600.     searchInput.type = 'text';
  3601.     searchInput.className = 'search-input';
  3602.     searchInput.placeholder = searchPlaceholder || 'Search...';
  3603.     searchField.appendChild(searchInput);
  3604.     selectItems.appendChild(searchField);
  3605.  
  3606.     // Function to render options
  3607.     function renderOptions(filter = '') {
  3608.         // Clear previous options (excluding search field)
  3609.         while (selectItems.childNodes.length > 1) {
  3610.             selectItems.removeChild(selectItems.lastChild);
  3611.         }
  3612.  
  3613.         const filteredOptions = options.filter(opt =>
  3614.             opt.label.toLowerCase().includes(filter.toLowerCase())
  3615.         );
  3616.  
  3617.         if (filteredOptions.length === 0) {
  3618.             const noResults = document.createElement('div');
  3619.             noResults.textContent = 'No matches found';
  3620.             noResults.style.cssText = 'opacity: 0.7; font-style: italic; padding: 10px; text-align: center; cursor: default;';
  3621.             selectItems.appendChild(noResults);
  3622.         }
  3623.  
  3624.         filteredOptions.forEach(option => {
  3625.             const optionDiv = document.createElement('div');
  3626.             optionDiv.textContent = option.label;
  3627.             optionDiv.dataset.value = option.value;
  3628.             if (option.value === currentSelectedValue) {
  3629.                 optionDiv.classList.add('same-as-selected');
  3630.             }
  3631.  
  3632.             optionDiv.addEventListener('click', (e) => {
  3633.                 e.stopPropagation(); // Prevent closing immediately
  3634.                 currentSelectedValue = option.value;
  3635.                 selectSelected.textContent = option.label;
  3636.                 selectItems.style.display = 'none';
  3637.                 selectSelected.classList.remove('select-arrow-active');
  3638.  
  3639.                 // Update classes for all items
  3640.                 selectItems.querySelectorAll('div[data-value]').forEach(div => {
  3641.                     div.classList.toggle('same-as-selected', div.dataset.value === currentSelectedValue);
  3642.             });
  3643.  
  3644.                 onChange(currentSelectedValue);
  3645.             });
  3646.             selectItems.appendChild(optionDiv);
  3647.         });
  3648.     }
  3649.  
  3650.     // Set initial display text
  3651.     const initialOption = options.find(opt => opt.value === currentSelectedValue);
  3652.     selectSelected.textContent = initialOption ? initialOption.label : 'Select an option';
  3653.  
  3654.     customSelect.appendChild(selectSelected);
  3655.     customSelect.appendChild(selectItems);
  3656.     container.appendChild(customSelect);
  3657.  
  3658.     // Initial rendering
  3659.     renderOptions();
  3660.  
  3661.     // Event listeners
  3662.     searchInput.addEventListener('input', () => renderOptions(searchInput.value));
  3663.     searchInput.addEventListener('click', e => e.stopPropagation()); // Prevent closing
  3664.  
  3665.     selectSelected.addEventListener('click', (e) => {
  3666.         e.stopPropagation();
  3667.         closeAllSelectBoxes(customSelect); // Close others
  3668.         const isHidden = selectItems.style.display === 'none';
  3669.         selectItems.style.display = isHidden ? 'block' : 'none';
  3670.         selectSelected.classList.toggle('select-arrow-active', isHidden);
  3671.         if (isHidden) {
  3672.             searchInput.focus();
  3673.             searchInput.select(); // Select text for easy replacement
  3674.             renderOptions(); // Re-render in case options changed
  3675.         }
  3676.     });
  3677. }
  3678.  
  3679. /** Closes all custom select dropdowns except the one passed in. */
  3680. function closeAllSelectBoxes(exceptThisOne = null) {
  3681.     document.querySelectorAll('.custom-select').forEach(select => {
  3682.         if (select === exceptThisOne) return;
  3683.         const items = select.querySelector('.select-items');
  3684.         const selected = select.querySelector('.select-selected');
  3685.         if (items) items.style.display = 'none';
  3686.         if (selected) selected.classList.remove('select-arrow-active');
  3687.     });
  3688. }
  3689.  
  3690. // --- Rating Indicator Logic (Simplified, assuming CSS handles most styling) ---
  3691.  
  3692. /**
  3693.  * Updates or creates the rating indicator on a tweet article.
  3694.  * @param {Element} tweetArticle - The tweet article element.
  3695.  * @param {number|null} score - The numeric rating (null if pending/error).
  3696.  * @param {string} status - 'pending', 'rated', 'error', 'cached', 'blacklisted'.
  3697.  * @param {string} [description] - Optional description for hover tooltip.
  3698.  */
  3699. function setScoreIndicator(tweetArticle, score, status, description = "") {
  3700.     let indicator = tweetArticle.querySelector('.score-indicator');
  3701.     if (!indicator) {
  3702.         indicator = document.createElement('div');
  3703.         indicator.className = 'score-indicator';
  3704.         tweetArticle.style.position = 'relative'; // Ensure parent is positioned
  3705.         tweetArticle.appendChild(indicator);
  3706.         
  3707.         // Add hover listeners only once when creating the indicator
  3708.         indicator.addEventListener('mouseenter', handleIndicatorMouseEnter);
  3709.         indicator.addEventListener('mouseleave', handleIndicatorMouseLeave);
  3710.     }
  3711.  
  3712.     // Update status class and text content
  3713.     indicator.classList.remove('pending-rating', 'rated-rating', 'error-rating', 'cached-rating', 'blacklisted-rating'); // Clear previous
  3714.     indicator.dataset.description = description || ''; // Store description
  3715.  
  3716.     switch (status) {
  3717.         case 'pending':
  3718.         indicator.classList.add('pending-rating');
  3719.         indicator.textContent = '⏳';
  3720.             break;
  3721.         case 'error':
  3722.         indicator.classList.add('error-rating');
  3723.         indicator.textContent = '⚠️';
  3724.             break;
  3725.         case 'cached':
  3726.             indicator.classList.add('cached-rating');
  3727.         indicator.textContent = score;
  3728.              break;
  3729.         case 'blacklisted':
  3730.              indicator.classList.add('blacklisted-rating');
  3731.              indicator.textContent = score; // Typically 10 for blacklisted
  3732.              break;
  3733.         case 'rated': // Default/normal rated
  3734.         default:
  3735.             indicator.classList.add('rated-rating'); // Add a general rated class
  3736.             indicator.textContent = score;
  3737.             break;
  3738.     }
  3739. }
  3740.  
  3741. /** Global tooltip element */
  3742. let scoreTooltip = null;
  3743.  
  3744. /** Creates or gets the shared tooltip element. */
  3745. function getScoreTooltip() {
  3746.     if (!scoreTooltip) {
  3747.         scoreTooltip = document.createElement('div');
  3748.         scoreTooltip.className = 'score-description'; // Use the class from HTML/CSS
  3749.         scoreTooltip.style.display = 'none'; // Initially hidden
  3750.         scoreTooltip.style.position = 'fixed'; // Use fixed positioning
  3751.         scoreTooltip.style.zIndex = '99999999';
  3752.         document.body.appendChild(scoreTooltip);
  3753.  
  3754.         // Keep tooltip visible when hovering over it
  3755.         scoreTooltip.addEventListener('mouseenter', () => {
  3756.             scoreTooltip.style.display = 'block';
  3757.         });
  3758.         scoreTooltip.addEventListener('mouseleave', () => {
  3759.             scoreTooltip.style.display = 'none';
  3760.         });
  3761.     }
  3762.     return scoreTooltip;
  3763. }
  3764.  
  3765. /** Formats description text for the tooltip. */
  3766. function formatTooltipDescription(description) {
  3767.     if (!description) return '';
  3768.     // Basic formatting, can be expanded
  3769.         description = description.replace(/\{score:\s*(\d+)\}/g, '<span style="display:inline-block;background-color:#1d9bf0;color:white;padding:3px 10px;border-radius:9999px;margin:8px 0;font-weight:bold;">SCORE: $1</span>');
  3770.     description = description.replace(/\n\n/g, '</p><p style="margin-top: 10px;">'); // Smaller margin
  3771.         description = description.replace(/\n/g, '<br>');
  3772.     return `<p>${description}</p>`;
  3773. }
  3774.  
  3775. /** Handles mouse enter event for score indicators. */
  3776. function handleIndicatorMouseEnter(event) {
  3777.     const indicator = event.target;
  3778.     const description = indicator.dataset.description;
  3779.     if (!description) return;
  3780.  
  3781.     const tooltip = getScoreTooltip();
  3782.     tooltip.innerHTML = formatTooltipDescription(description);
  3783.  
  3784.     // Position the tooltip
  3785.         const rect = indicator.getBoundingClientRect();
  3786.     const tooltipWidth = tooltip.offsetWidth; // Get width after setting content
  3787.     const tooltipHeight = tooltip.offsetHeight;
  3788.     const margin = 10;
  3789.  
  3790.     let left = rect.right + margin;
  3791.     let top = rect.top + (rect.height / 2) - (tooltipHeight / 2);
  3792.  
  3793.     // Adjust if going off-screen
  3794.     if (left + tooltipWidth > window.innerWidth - margin) {
  3795.         left = rect.left - tooltipWidth - margin;
  3796.     }
  3797.     if (top < margin) {
  3798.         top = margin;
  3799.     }
  3800.     if (top + tooltipHeight > window.innerHeight - margin) {
  3801.         top = window.innerHeight - tooltipHeight - margin;
  3802.     }
  3803.  
  3804.     tooltip.style.left = `${left}px`;
  3805.     tooltip.style.top = `${top}px`;
  3806.     tooltip.style.display = 'block';
  3807. }
  3808.  
  3809. /** Handles mouse leave event for score indicators. */
  3810. function handleIndicatorMouseLeave() {
  3811.     const tooltip = getScoreTooltip();
  3812.     // Hide with a slight delay to allow moving cursor to the tooltip
  3813.         setTimeout(() => {
  3814.         if (tooltip && tooltip.style.display !== 'none' && !tooltip.matches(':hover')) {
  3815.            tooltip.style.display = 'none';
  3816.         }
  3817.         }, 100);
  3818. }
  3819.  
  3820. /** Cleans up the global score tooltip element. */
  3821. function cleanupDescriptionElements() {
  3822.     if (scoreTooltip) {
  3823.         scoreTooltip.remove();
  3824.         scoreTooltip = null;
  3825.     }
  3826. }
  3827.  
  3828. // --- Settings Import/Export (Simplified) ---
  3829.  
  3830. /**
  3831.  * Exports all settings and cache to a JSON file.
  3832.  */
  3833. function exportSettings() {
  3834.     try {
  3835.         const settingsToExport = {
  3836.             apiKey: GM_getValue('openrouter-api-key', ''),
  3837.             selectedModel: GM_getValue('selectedModel', 'google/gemini-flash-1.5-8b'),
  3838.             selectedImageModel: GM_getValue('selectedImageModel', 'google/gemini-flash-1.5-8b'),
  3839.             enableImageDescriptions: GM_getValue('enableImageDescriptions', false),
  3840.             modelTemperature: GM_getValue('modelTemperature', 0.5),
  3841.             modelTopP: GM_getValue('modelTopP', 0.9),
  3842.             imageModelTemperature: GM_getValue('imageModelTemperature', 0.5),
  3843.             imageModelTopP: GM_getValue('imageModelTopP', 0.9),
  3844.             maxTokens: GM_getValue('maxTokens', 0),
  3845.             filterThreshold: GM_getValue('filterThreshold', 1),
  3846.             userDefinedInstructions: GM_getValue('userDefinedInstructions', 'Rate the tweet on a scale from 1 to 10 based on its clarity, insight, creativity, and overall quality.'),
  3847.             modelSortOrder: GM_getValue('modelSortOrder', 'throughput-high-to-low')
  3848.         };
  3849.  
  3850.         const data = {
  3851.             version: VERSION,
  3852.             date: new Date().toISOString(),
  3853.             settings: settingsToExport,
  3854.             blacklistedHandles: blacklistedHandles || [],
  3855.             tweetRatings: tweetIDRatingCache || {}
  3856.         };
  3857.  
  3858.         const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  3859.         const url = URL.createObjectURL(blob);
  3860.         const a = document.createElement('a');
  3861.         a.href = url;
  3862.         a.download = `tweetfilter-ai-backup-${new Date().toISOString().split('T')[0]}.json`;
  3863.         a.click();
  3864.         URL.revokeObjectURL(url);
  3865.         showStatus('Settings exported successfully!');
  3866.     } catch (error) {
  3867.         console.error('Error exporting settings:', error);
  3868.         showStatus('Error exporting settings: ' + error.message);
  3869.     }
  3870. }
  3871.  
  3872. /**
  3873.  * Imports settings and cache from a JSON file.
  3874.  */
  3875. function importSettings() {
  3876.     try {
  3877.         const input = document.createElement('input');
  3878.         input.type = 'file';
  3879.         input.accept = '.json';
  3880.  
  3881.         input.onchange = (e) => {
  3882.             const file = e.target.files[0];
  3883.             if (!file) return;
  3884.  
  3885.             const reader = new FileReader();
  3886.             reader.onload = (event) => {
  3887.                 try {
  3888.                     const data = JSON.parse(event.target.result);
  3889.                     if (!data.settings) throw new Error('Invalid backup file format');
  3890.  
  3891.                     // Import settings
  3892.                     for (const key in data.settings) {
  3893.                         if (window[key] !== undefined) {
  3894.                             window[key] = data.settings[key];
  3895.                         }
  3896.                         GM_setValue(key, data.settings[key]);
  3897.                     }
  3898.  
  3899.                     // Import blacklisted handles
  3900.                     if (data.blacklistedHandles && Array.isArray(data.blacklistedHandles)) {
  3901.                         blacklistedHandles = data.blacklistedHandles;
  3902.                         GM_setValue('blacklistedHandles', blacklistedHandles.join('\n'));
  3903.                     }
  3904.  
  3905.                     // Import tweet ratings (merge with existing)
  3906.                     if (data.tweetRatings && typeof data.tweetRatings === 'object') {
  3907.                         Object.assign(tweetIDRatingCache, data.tweetRatings);
  3908.                         saveTweetRatings();
  3909.                     }
  3910.  
  3911.                     refreshSettingsUI();
  3912.                     fetchAvailableModels();
  3913.                     showStatus('Settings imported successfully!');
  3914.  
  3915.                 } catch (error) {
  3916.                     console.error('Error parsing settings file:', error);
  3917.                     showStatus('Error importing settings: ' + error.message);
  3918.                 }
  3919.             };
  3920.             reader.readAsText(file);
  3921.         };
  3922.         input.click();
  3923.     } catch (error) {
  3924.         console.error('Error importing settings:', error);
  3925.         showStatus('Error importing settings: ' + error.message);
  3926.     }
  3927. }
  3928.  
  3929. /**
  3930.  * Resets all configurable settings to their default values.
  3931.  */
  3932. function resetSettings(noconfirm=false) {
  3933.     if (noconfirm || confirm('Are you sure you want to reset all settings to their default values? This will not clear your cached ratings or blacklisted handles.')) {
  3934.         // Define defaults (should match config.js ideally)
  3935.         const defaults = {
  3936.             selectedModel: 'google/gemini-flash-1.5-8b',
  3937.             selectedImageModel: 'google/gemini-flash-1.5-8b',
  3938.             enableImageDescriptions: false,
  3939.             modelTemperature: 0.5,
  3940.             modelTopP: 0.9,
  3941.             imageModelTemperature: 0.5,
  3942.             imageModelTopP: 0.9,
  3943.             maxTokens: 0,
  3944.             filterThreshold: 1,
  3945.             userDefinedInstructions: 'Rate the tweet on a scale from 1 to 10 based on its clarity, insight, creativity, and overall quality.',
  3946.             modelSortOrder: 'throughput-high-to-low'
  3947.         };
  3948.  
  3949.         // Apply defaults
  3950.         for (const key in defaults) {
  3951.             if (window[key] !== undefined) {
  3952.                 window[key] = defaults[key];
  3953.             }
  3954.             GM_setValue(key, defaults[key]);
  3955.         }
  3956.  
  3957.         refreshSettingsUI();
  3958.         fetchAvailableModels();
  3959.         showStatus('Settings reset to defaults');
  3960.     }
  3961. }
  3962.  
  3963. // --- Blacklist/Whitelist Logic ---
  3964.  
  3965. /**
  3966.  * Adds a handle to the blacklist, saves, and refreshes the UI.
  3967.  * @param {string} handle - The Twitter handle to add (with or without @).
  3968.  */
  3969. function addHandleToBlacklist(handle) {
  3970.     handle = handle.trim().replace(/^@/, ''); // Clean handle
  3971.     if (handle === '' || blacklistedHandles.includes(handle)) {
  3972.         showStatus(handle === '' ? 'Handle cannot be empty.' : `@${handle} is already on the list.`);
  3973.             return;
  3974.         }
  3975.     blacklistedHandles.push(handle);
  3976.     GM_setValue('blacklistedHandles', blacklistedHandles.join('\n'));
  3977.     refreshHandleList(document.getElementById('handle-list'));
  3978.     updateCacheStatsUI();
  3979.     showStatus(`Added @${handle} to auto-rate list.`);
  3980. }
  3981.  
  3982. /**
  3983.  * Removes a handle from the blacklist, saves, and refreshes the UI.
  3984.  * @param {string} handle - The Twitter handle to remove (without @).
  3985.  */
  3986. function removeHandleFromBlacklist(handle) {
  3987.     const index = blacklistedHandles.indexOf(handle);
  3988.     if (index > -1) {
  3989.         blacklistedHandles.splice(index, 1);
  3990.         GM_setValue('blacklistedHandles', blacklistedHandles.join('\n'));
  3991.         refreshHandleList(document.getElementById('handle-list'));
  3992.         updateCacheStatsUI();
  3993.         showStatus(`Removed @${handle} from auto-rate list.`);
  3994.                 } else {
  3995.         console.warn(`Attempted to remove non-existent handle: ${handle}`);
  3996.     }
  3997. }
  3998.  
  3999. // --- Initialization ---
  4000.  
  4001. /**
  4002.  * Main initialization function for the UI module.
  4003.  */
  4004. function initialiseUI() {
  4005.     const uiContainer = injectUI();
  4006.     if (!uiContainer) return; // Stop if injection failed
  4007.  
  4008.     initializeEventListeners(uiContainer);
  4009.     refreshSettingsUI(); // Set initial state from saved settings
  4010.     fetchAvailableModels(); // Fetch models async
  4011. }
  4012.  
  4013. })();