mobux 0.14.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

/* SPA shell chrome. Copies the old Rust-rendered home header: the .app-header /
   .app-header h1 / .header-icon rules come from web/static/style.css (loaded in
   index.html via the proxy), so the header already matches the old UI's colors,
   spacing, and typography. This file only adds what's SPA-specific: making the
   wordmark behave as a home link, placing the native host <select>, and giving
   the gear a <button> the same look as the old <a class="header-icon">. */
.spa-shell {
  min-height: 100dvh;
}

/* ── Terminal route layout ───────────────────────────────────────────
   The terminal route is a full-bleed island with no SPA chrome. The old
   Rust page keyed its full-screen terminal layout off `body.term-body`
   (web/static/style.css: position:fixed; 100dvh; flex column). In the SPA
   the engine's children live one level deeper — inside `#app` →
   `.term-body-spa` — so we have to extend that full-height flex column the
   whole way down, or `#terminal` (flex:1; min-height:0) collapses to ~0
   and the backend computes far too few rows on mount (the stranded
   status-bar / dead-black-bottom bug). These rules only apply on the
   terminal route, gated by `body.term-body`. */
body.term-body #app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.term-body-spa {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Control-key ribbon ──────────────────────────────────────────────
   The ribbon (^C, arrows, Tab, Esc, …) is a horizontal strip that must
   scroll sideways by touch and never wrap. The base rules already come
   from web/static/style.css `.input-ribbon`; these reassert them in the
   SPA context so a stray parent `touch-action`/flex rule can't clip or
   wrap the strip (the "ribbon won't scroll by touch" regression). Mirrors
   the old `.input-ribbon`: overflow-x:auto + touch momentum + nowrap, with
   touch-action:pan-x so the browser hands horizontal pans to the strip. */
.term-body-spa .input-ribbon {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.term-body-spa .input-ribbon button {
  flex: 0 0 auto;
}

/* Wordmark = home link. `.app-header h1` already has `flex: 1` (style.css),
   which shoves the lone gear to the far edge — just add the pointer cursor. */
.app-header .app-wordmark {
  cursor: pointer;
}

.spa-main {
  padding: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

/* Gear — a <button> that wears the old `.header-icon` look (color/font-size/
   padding/radius come from style.css). These rules only reset the native button
   chrome and keep it from ever being squeezed off-screen. */
.header-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  font-family: inherit;
}

/* ── Node picker (Home) ──────────────────────────────────────────────
   Compact local/node switch above the session list. Rendered only when
   nodes are configured; palette stays on the muted theme vars. */
.node-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 12px;
}
.node-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  padding: 4px 12px;
}
.node-chip.active {
  border-color: var(--accent);
  color: var(--text);
}
/* Unreachable nodes stay selectable — the failure surfaces loudly at
   connect — but are clearly marked. */
.node-chip .node-dead {
  color: var(--danger);
  font-size: 11px;
  margin-left: 6px;
}

/* ── Nodes settings card ─────────────────────────────────────────────
   Row layout for the inventory + the add form; inputs wear the same
   muted look as the new-session dialog's input (style.css). */
.node-row .node-name {
  font-family: var(--mono);
}
.node-row .node-target {
  color: var(--muted);
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  margin-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-row .node-remove {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--danger);
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 10px;
}
.node-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.node-add input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--mono);
}
.node-add input:focus {
  border-color: var(--accent);
  outline: none;
}
.node-add button {
  flex-shrink: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 14px;
}