mobux 0.6.0

A touch-friendly tmux web UI for unhinged people who run terminal sessions from their phone while walking the dog
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

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

// Notifications card. Ports settings.js: reads + writes
// GET|PUT /api/settings/notifications (snake_case fields), auto-saves on every
// checkbox change. Prefs act on the host that served the page, so this uses the
// host-pinned helpers (never the mesh peer).

const FIELDS = ["bell", "bell_emoji", "program_exit", "program_exit_nonzero"];
const prefs = signal({});
const status = signal(null); // { msg, ok }

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

  useEffect(() => {
    localGet("/api/settings/notifications")
      .then((p) => (prefs.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), 1500);
  };

  const onToggle = (field) => async (e) => {
    prefs.value = { ...prefs.value, [field]: e.target.checked };
    const body = {};
    for (const k of FIELDS) body[k] = !!prefs.value[k];
    try {
      const res = await localFetch("/api/settings/notifications", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      if (!res.ok) throw new Error("PUT " + res.status);
      flash("Saved.");
    } catch (err) {
      flash("Save failed: " + err.message, false);
    }
  };

  const row = (field, title, small) => (
    <label class="settings-row">
      <input
        type="checkbox"
        name={field}
        checked={!!prefs.value[field]}
        onChange={onToggle(field)}
      />
      <span class="settings-label">
        <strong>{title}</strong>
        <small>{small}</small>
      </span>
    </label>
  );

  return (
    <section class="settings-card">
      <h2>Notifications</h2>
      <p class="settings-lede">
        Pick what fires a push to subscribed devices. Everything is detected by
        parsing the PTY stream — no shell hooks needed except the OSC-133 prompt
        for the exit toggles.
      </p>
      {row(
        "bell",
        "Terminal bell (\\x07)",
        "Standard ASCII BEL byte. Most apps fire this on tab-complete failures, vim errors, irc highlights.",
      )}
      {row(
        "bell_emoji",
        "🔔 emoji in output",
        "Used for intentional pings — Claude, scripts, anything that prints the bell glyph.",
      )}
      {row(
        "program_exit",
        "Program exit (any code)",
        "Detected via OSC 133;D semantic prompt. Requires Starship, Powerlevel10k, or a PS1 that emits the exit marker.",
      )}
      {row(
        "program_exit_nonzero",
        "Program exit (non-zero only)",
        "Same OSC 133;D detection, fires only on failures.",
      )}
      {status.value && (
        <div
          class="settings-status"
          style={{ color: status.value.ok ? "" : "#f87171" }}
        >
          {status.value.msg}
        </div>
      )}
    </section>
  );
}