mobux 0.6.0

import { useEffect, useRef } from "preact/hooks";
import { signal } from "@preact/signals";
import { localGet, localFetch } from "../../lib/api.js";

// Shell integration installer. Ports shell-integration.js: reads
// GET /api/shell-integration/status, drives Install/Uninstall via
// POST /api/shell-integration/{install,uninstall} with a {shell} body. Acts on
// the host that served the page (host-pinned helpers). The OSC-133 snippets are
// static display content (verbatim from the Rust template).

const SHELLS = [
  {
    id: "bash",
    rc: "~/.bashrc",
    snippet: `if [ -n "$TMUX" ]; then
    PS0='\\ePtmux;\\e\\e]133;C\\a\\e\\\\'
    PS1='\\[\\ePtmux;\\e\\e]133;D;$?\\a\\e]133;A\\a\\e\\\\\\]'"$PS1"'\\[\\ePtmux;\\e\\e]133;B\\a\\e\\\\\\]'
else
    PS0='\\e]133;C\\a'
    PS1='\\[\\e]133;D;$?\\a\\e]133;A\\a\\]'"$PS1"'\\[\\e]133;B\\a\\]'
fi`,
  },
  {
    id: "zsh",
    rc: "~/.zshrc",
    snippet: `if [ -n "$TMUX" ]; then
    preexec() { print -Pn '\\ePtmux;\\e\\e]133;C\\a\\e\\\\' }
    precmd()  { print -Pn '\\ePtmux;\\e\\e]133;D;'$?'\\a\\e]133;A\\a\\e\\\\' }
else
    preexec() { print -Pn '\\e]133;C\\a' }
    precmd()  { print -Pn '\\e]133;D;'$?'\\a\\e]133;A\\a' }
fi`,
  },
  {
    id: "fish",
    rc: "~/.config/fish/config.fish",
    snippet: `if test -n "$TMUX"
    function __mobux_osc133_preexec --on-event fish_preexec
        printf '\\ePtmux;\\e\\e]133;C\\a\\e\\\\'
    end
    function __mobux_osc133_postexec --on-event fish_postexec
        printf '\\ePtmux;\\e\\e]133;D;%s\\a\\e\\\\' $status
    end
    function __mobux_osc133_prompt --on-event fish_prompt
        printf '\\ePtmux;\\e\\e]133;A\\a\\e\\\\'
    end
else
    function __mobux_osc133_preexec --on-event fish_preexec
        printf '\\e]133;C\\a'
    end
    function __mobux_osc133_postexec --on-event fish_postexec
        printf '\\e]133;D;%s\\a' $status
    end
    function __mobux_osc133_prompt --on-event fish_prompt
        printf '\\e]133;A\\a'
    end
end`,
  },
];

const states = signal({}); // { bash: {state, version}, ... }
const status = signal(null); // { msg, ok }

function describe(s) {
  if (!s || !s.state) return { label: "unknown", cls: "" };
  switch (s.state) {
    case "not_present":
      return { label: "rc file not present", cls: "shell-state--missing" };
    case "not_installed":
      return { label: "not installed", cls: "shell-state--off" };
    case "installed":
      return { label: `installed v${s.version}`, cls: "shell-state--on" };
    case "outdated":
      return {
        label: `outdated (v${s.version}→current)`,
        cls: "shell-state--warn",
      };
    default:
      return { label: s.state, cls: "" };
  }
}

export function ShellIntegrationCard() {
  const t = useRef(null);

  useEffect(() => {
    localGet("/api/shell-integration/status")
      .then((p) => (states.value = p || {}))
      .catch((e) => flash("Load failed: " + e.message, false));
  }, []);

  const flash = (msg, ok = true) => {
    status.value = { msg, ok };
    clearTimeout(t.current);
    t.current = setTimeout(() => (status.value = null), 2000);
  };

  const act = async (action, shell) => {
    try {
      const res = await localFetch(`/api/shell-integration/${action}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ shell }),
      });
      if (!res.ok)
        throw new Error(`${action} ${res.status}: ${await res.text()}`);
      states.value = await res.json();
      flash(`${shell}: ${action} ok`);
    } catch (err) {
      flash(`${shell} ${action} failed: ${err.message}`, false);
    }
  };

  return (
    <section class="settings-card" id="shell-integration">
      <h2>Shell integration</h2>
      <p class="settings-lede">
        The reader view classifies prompts and command output deterministically
        when your shell emits{" "}
        <a
          href="https://gitlab.freedesktop.org/Per_Bothner/specifications/blob/master/proposals/semantic-prompts.md"
          target="_blank"
          rel="noopener"
        >
          OSC 133
        </a>{" "}
        (FinalTerm) markers. Click install — mobux appends a managed, fenced
        block to your rc file and keeps a timestamped backup. Nothing outside
        the fence is touched. The snippet detects <code>$TMUX</code> and wraps
        OSC 133 in tmux's DCS passthrough envelope.
      </p>

      {SHELLS.map((sh) => {
        const s = states.value[sh.id];
        const d = describe(s);
        const isInstalled = s && s.state === "installed";
        const isOutdated = s && s.state === "outdated";
        return (
          <div class="shell-card" data-shell={sh.id} key={sh.id}>
            <div class="shell-card-head">
              <strong>{sh.id}</strong> <code>{sh.rc}</code>
              <span class={"shell-state " + d.cls} data-role="state">
                {d.label}
              </span>
            </div>
            <div class="shell-card-actions">
              <button
                type="button"
                disabled={isInstalled}
                onClick={() => act("install", sh.id)}
              >
                {isInstalled ? "Reinstall" : isOutdated ? "Update" : "Install"}
              </button>
              <button
                type="button"
                disabled={!(isInstalled || isOutdated)}
                onClick={() => act("uninstall", sh.id)}
              >
                Uninstall
              </button>
            </div>
            <details class="settings-detail">
              <summary>Show snippet</summary>
              <pre class="settings-snippet">
                <code>{sh.snippet}</code>
              </pre>
            </details>
          </div>
        );
      })}

      {status.value && (
        <div
          class="settings-status"
          style={{ color: status.value.ok ? "" : "#f87171" }}
        >
          {status.value.msg}
        </div>
      )}
      <p class="settings-foot">
        Reload the shell after installing. The fenced block is the contract —
        mobux only ever modifies what's between the fences. A timestamped{" "}
        <code>.mobux.bak.&lt;ts&gt;</code> is written next to the rc file before
        any change.
      </p>
    </section>
  );
}