☰

Grok Prompt Manager

4 prompt slots for Grok's Custom Instructions.

// ==UserScript==
// @name         Grok Prompt Manager
// @namespace    grok.prompt.manager
// @version      1.0
// @description  4 prompt slots for Grok's Custom Instructions.
// @author       Mr005K
// @match        https://grok.com/*
// @match        https://*.grok.com/*
// @match        https://x.ai/*
// @match        https://*.x.ai/*
// @license      MIT
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  const STORAGE_KEY = "grok-prompt-manager-v1";
  const UI_ATTR = "data-grok-prompt-manager";
  const DIALOG_ATTR = "data-gpm-installed";
  const TA_ATTR = "data-gpm-bound";
  const DEBUG = false;

  const log = (...a) => DEBUG && console.log("[GrokPM]", ...a);

  const DEFAULT_SLOTS = [
    { name: "Slot 1", text: "" },
    { name: "Slot 2", text: "" },
    { name: "Slot 3", text: "" },
    { name: "Slot 4", text: "" },
  ];

  function loadSlots() {
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (!raw) return [...DEFAULT_SLOTS];
      const parsed = JSON.parse(raw);
      if (!Array.isArray(parsed) || parsed.length !== 4) return [...DEFAULT_SLOTS];
      return parsed.map((s, i) => ({
        name: typeof s?.name === "string" && s.name.trim() ? s.name : `Slot ${i + 1}`,
        text: typeof s?.text === "string" ? s.text : "",
      }));
    } catch {
      return [...DEFAULT_SLOTS];
    }
  }
  function saveSlots(slots) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(slots));
    } catch {
      alert("Could not save slots (localStorage is blocked).");
    }
  }

  function findByText(root, selector, text) {
    const els = root.querySelectorAll(selector);
    text = (text || "").trim().toLowerCase();
    for (const el of els) {
      const t = (el.textContent || "").trim().toLowerCase();
      if (t.includes(text)) return el;
    }
    return null;
  }

  function getCustomTextarea(root = document) {
    // Primary: the known placeholder
    let ta = root.querySelector('textarea[placeholder="How should Grok behave?"]');
    if (ta) return ta;
    // Fallback: under "Custom Instructions"
    const label = findByText(root, "label, div, p", "custom instructions");
    if (label) {
      const container = label.closest("div")?.parentElement || label.parentElement;
      if (container) {
        ta = container.querySelector("textarea");
        if (ta) return ta;
      }
    }
    // Last resort: first visible textarea in the dialog
    const dialog = root.closest('[role="dialog"]') || root.querySelector('[role="dialog"]');
    if (dialog) {
      const candidates = [...dialog.querySelectorAll("textarea")].filter(isVisible);
      if (candidates.length) return candidates[0];
    }
    return null;
  }

  function isCustomizeDialog(root) {
    const header = findByText(root, "p, h2, h3, div", "customize grok's response");
    const label = findByText(root, "label, div, p", "custom instructions");
    return !!(header && label);
  }

  function isVisible(el) {
    if (!el) return false;
    const cs = getComputedStyle(el);
    const r = el.getBoundingClientRect();
    return cs.display !== "none" && cs.visibility !== "hidden" && r.width > 0 && r.height > 0;
  }

  function setTextareaValue(textarea, value) {
    const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")?.set;
    if (setter) setter.call(textarea, value);
    else textarea.value = value;
    textarea.dispatchEvent(new Event("input", { bubbles: true }));
    textarea.dispatchEvent(new Event("change", { bubbles: true }));
  }

  function escapeHtml(s) {
    return String(s)
      .replaceAll("&", "&")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;");
  }

  function buildUI(textarea) {
    const slots = loadSlots();
    const ui = document.createElement("div");
    ui.setAttribute(UI_ATTR, "1");
    ui.className =
      "flex flex-col gap-2 p-2 rounded-2xl ring-1 ring-inset ring-toggle-border hover:ring-card-border-focus bg-button-ghost-hover";
    ui.style.marginBottom = "8px";
    ui.innerHTML = `
      <div class="flex items-center justify-between gap-2">
        <div class="text-sm font-semibold">Prompt Manager</div>
        <div class="text-xs text-secondary">Insert into the box below. Use Grok’s own <b>Save</b> after.</div>
      </div>
      <div class="flex flex-wrap gap-2" role="tablist" aria-label="Prompt Slots">
        ${slots
          .map(
            (s, i) => `
          <button data-slot="${i}" data-role="slot-btn"
            class="inline-flex items-center justify-start gap-2 text-sm rounded-2xl px-3 py-2 ring-1 ring-inset ring-toggle-border hover:bg-card-hover text-primary">
            <span class="truncate max-w-[9rem]">${escapeHtml(s.name || `Slot ${i + 1}`)}</span>
          </button>`
          )
          .join("")}
      </div>
      <div data-role="editor" class="flex flex-col gap-2 hidden mt-2 rounded-xl border border-border-l2 p-2">
        <div class="flex items-center gap-2">
          <label class="text-xs text-secondary">Name</label>
          <input data-role="name" class="flex-1 text-sm bg-transparent rounded-xl border border-border-l2 px-2 py-1" placeholder="Slot name">
        </div>
        <textarea data-role="text" class="w-full text-sm bg-transparent rounded-xl border border-border-l2 p-2" style="min-height: 120px;" placeholder="Saved prompt here..."></textarea>
        <div class="flex flex-wrap gap-2 justify-end">
          <button data-action="import" class="text-xs rounded-xl px-3 py-2 ring-1 ring-inset ring-toggle-border hover:bg-card-hover">Import Current</button>
          <button data-action="clear"  class="text-xs rounded-xl px-3 py-2 ring-1 ring-inset ring-toggle-border hover:bg-card-hover">Clear</button>
          <div class="flex-1"></div>
          <button data-action="save"   class="text-xs rounded-xl px-3 py-2 bg-button-filled text-fg-invert hover:bg-button-filled-hover">Save Slot</button>
          <button data-action="insert" class="text-xs rounded-xl px-3 py-2 bg-button-filled text-fg-invert hover:bg-button-filled-hover">Insert into Custom</button>
        </div>
      </div>
    `;

    // Wire up editor
    const editor = ui.querySelector('[data-role="editor"]');
    const nameInput = editor.querySelector('[data-role="name"]');
    const textInput = editor.querySelector('[data-role="text"]');
    let currentSlots = slots;
    let openIndex = null;

    ui.addEventListener("click", (e) => {
      const slotBtn = e.target.closest("[data-role='slot-btn']");
      if (slotBtn) {
        openIndex = Number(slotBtn.getAttribute("data-slot"));
        const s = currentSlots[openIndex] || {};
        nameInput.value = s.name || `Slot ${openIndex + 1}`;
        textInput.value = s.text || "";
        editor.classList.remove("hidden");
        ui.querySelectorAll("[data-role='slot-btn']").forEach((b) => {
          const active = Number(b.getAttribute("data-slot")) === openIndex;
          b.classList.toggle("bg-button-ghost-hover", active);
          b.classList.toggle("ring-card-border-focus", active);
        });
        return;
      }

      const act = e.target.closest("[data-action]");
      if (!act) return;
      const action = act.getAttribute("data-action");

      if (action === "import") {
        textInput.value = textarea.value || "";
      } else if (action === "clear") {
        nameInput.value = currentSlots[openIndex]?.name || `Slot ${openIndex + 1}`;
        textInput.value = "";
      } else if (action === "save") {
        if (openIndex == null) return;
        const n = (nameInput.value || "").trim() || `Slot ${openIndex + 1}`;
        currentSlots[openIndex] = { name: n, text: textInput.value || "" };
        saveSlots(currentSlots);
        const labelSpan = ui.querySelector(`[data-role='slot-btn'][data-slot='${openIndex}'] span`);
        if (labelSpan) labelSpan.textContent = n;
        flash(act);
      } else if (action === "insert") {
        if (openIndex == null) return;
        setTextareaValue(textarea, textInput.value || "");
        flash(act);
      }
    });

    function flash(btn) {
      btn.animate([{ opacity: 0.4 }, { opacity: 1 }], { duration: 180, easing: "ease-out" });
    }

    return ui;
  }

  // Debounced attach routine
  let rafToken = null;
  function scheduleAttach() {
    if (rafToken) cancelAnimationFrame(rafToken);
    rafToken = requestAnimationFrame(tryAttach);
  }

  let pollTimer = setInterval(scheduleAttach, 1200);
  const observer = new MutationObserver(scheduleAttach);
  observer.observe(document.documentElement, { childList: true, subtree: true });

  function tryAttach() {
    rafToken = null;

    // Find visible dialogs
    const dialogs = [...document.querySelectorAll('[role="dialog"]')].filter(isVisible);
    let installedAny = false;

    for (const dlg of dialogs) {
      if (!isCustomizeDialog(dlg)) continue;

      // If already installed in this dialog, skip
      if (dlg.hasAttribute(DIALOG_ATTR) || dlg.querySelector(`[${UI_ATTR}]`)) {
        continue;
      }

      const ta = getCustomTextarea(dlg);
      if (!ta || !isVisible(ta)) continue;

      // Guard on the textarea as well
      if (ta.hasAttribute(TA_ATTR)) continue;

      // Build & insert UI directly before the textarea (lowest-risk spot).
      const ui = buildUI(ta);
      const parent = ta.parentElement || dlg;
      parent.insertBefore(ui, ta);

      // Mark installed
      dlg.setAttribute(DIALOG_ATTR, "1");
      ta.setAttribute(TA_ATTR, "1");
      installedAny = true;
      log("Installed Prompt Manager.");
    }

    // If we successfully installed at least once, stop the poller (observer remains).
    if (installedAny && pollTimer) {
      clearInterval(pollTimer);
      pollTimer = null;
    }
  }

  // First run
  scheduleAttach();
})();