@yuneta/gobj-ui 7.23.38 → 7.23.39

package/README.md

@@ -1381,14 +1381,32 @@ because opening a popover per node to learn it is not reading a tree:
 | On the card | Says |
 |---|---|
 | Colour (border + left bar) | the ROLE: sky = the yuno, emerald = a service, amber = a pure child, pink = a volatil one, violet = a plain child |
-| Status pill | `stopped` / `running` / `playing`, coloured. `running` and `playing` are not the same thing: a gobj that runs and does not play is PAUSED, which is what the popover calls it in full |
+| Status pill | a SYMBOL and, where there is room, the word: `▶` playing, `‖` running but not playing (PAUSED, which is what the popover calls it in full), `■` stopped, `⊘` disabled. The symbol and not only a colour, because a dot has one shape and stopped is the state that has to be seen |
 | Badges | `service`, `pure child`, `volatil child`, `disabled`, `bottom` (it has a bottom gobj), `commands` (its gclass exposes commands) |
 | Its own line | the FSM state |
 | Dashed border, dimmed | disabled — that branch is out of the game |
 
 The popover adds the rest (`full name`, `parent`, `bottom gobj`, `traces`,
 `flags`, how many children a fold is hiding) and shows only the rows that have
-an answer.
+an answer. Its two state rows are `status` and **`fsm state`** — different
+keys on purpose: they used to be `status` and `state`, which every Spanish app
+translated to the same word, so the popover showed *Estado: Parado* directly
+above *Estado: ST_IDLE*.
+
+**The find box** matches gclass, name, full name and FSM state; a match wears
+an amber ring over its role colour (the card still has to say what it IS) and
+the chip counts them, because a graph that did not move looks the same whether
+nothing matched or the match was already on screen. A find is a REBUILD — an
+html node paints no G6 state, so the highlight lives in the card's own markup —
+which is why the box is rate-limited, and why the view is preserved: somebody
+who typed a letter did not ask to be moved.
+
+**A service the app creates is the app's to START.** `c_yuno`'s `mt_play` starts
+only the DEFAULT service, so anything else stays stopped unless its creator
+starts it — and a gclass with no `mt_start` (`C_YUI_WINDOW_MANAGER` builds its
+dock in `mt_create` and runs off events) WORKS stopped, which is how one shipped
+that way in two apps: nothing failed, it just read `!!C_YUI_WINDOW_MANAGER` in
+every trace line and *stopped* in this view.
 
 **It draws DESCRIPTORS, not gobjs** (`gobj_tree_model.js`), which is what lets
 this same view show a **backend** yuno. A descriptor is plain data whose field

package/dist/gobj-ui.cjs.js

@@ -11442,7 +11442,7 @@ function collect_foldable_paths(value, path, out, is_root) {
 *  move looks the same whether nothing matched or the match
 *  was already on screen.
 ************************************************************/
-function update_find_result(gobj) {
+function update_find_result$1(gobj) {
 	let priv = gobj.priv;
 	if (!priv.$find_result || !priv.$find_count) return;
 	if ((0, _yuneta_gobj_js.empty_string)(priv.search)) {
@@ -11707,7 +11707,7 @@ function ac_change_layout$2(gobj, event, kw, src) {
 		edge: { type: cfg.edge_type }
 	});
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11736,7 +11736,7 @@ function ac_toggle_fold(gobj, event, kw, src) {
 	}
 	priv.pending_keep = keep_of(gobj, kw && kw.keep || path);
 	refresh_json(gobj, { preserve_view: true });
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11747,11 +11747,11 @@ function ac_toggle_fold(gobj, event, kw, src) {
 *  keystroke is unusable.  The count says whether there is
 *  anything to look for elsewhere.
 ************************************************************/
-function ac_find_nodes$2(gobj, event, kw, src) {
+function ac_find_nodes$3(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.search = (kw && kw.text || "").trim().toLowerCase();
 	refresh_json(gobj, { preserve_view: true });
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11763,7 +11763,7 @@ function ac_expand_all$2(gobj, event, kw, src) {
 	priv.collapsed.clear();
 	priv.reserved.clear();
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11780,7 +11780,7 @@ function ac_collapse_all$2(gobj, event, kw, src) {
 	priv.collapsed = new Set(paths);
 	priv.reserved.clear();
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -12054,7 +12054,7 @@ function create_gclass$13(gclass_name) {
 		],
 		[
 			"EV_FIND_NODES",
-			ac_find_nodes$2,
+			ac_find_nodes$3,
 			null
 		],
 		[
@@ -16132,6 +16132,21 @@ function node_status(d) {
 	if (!d || !d.running) return "stopped";
 	return d.playing ? "playing" : "running";
 }
+var STATUS_SYMBOLS = {
+	"playing": "▶︎",
+	"running": "‖",
+	"stopped": "■︎"
+};
+var DISABLED_SYMBOL = "⊘";
+/************************************************************
+*  The symbol of a node's status, which is what the reader
+*  actually sees first. `disabled` overrides the rest: a
+*  disabled gobj is not going to run whatever it is doing now.
+************************************************************/
+function node_status_symbol(d) {
+	if (d && d.disabled) return DISABLED_SYMBOL;
+	return STATUS_SYMBOLS[node_status(d)] || STATUS_SYMBOLS.stopped;
+}
 /************************************************************
 *  The i18n key of the status, which is NOT the status itself:
 *  a gobj that runs and does not play is PAUSED to the reader,
@@ -16260,7 +16275,7 @@ function node_labels(t) {
 			full_name: t("full name"),
 			role: t("role"),
 			status: t("status"),
-			state: t("state"),
+			fsm_state: t("fsm state"),
 			disabled: t("disabled"),
 			parent: t("parent"),
 			bottom_gobj: t("bottom gobj"),
@@ -16289,8 +16304,8 @@ function node_info_rows(d, t) {
 	rows.push([f.name, d.name || "—"]);
 	if (d.fullname && d.fullname !== d.shortname) rows.push([f.full_name, d.fullname]);
 	rows.push([f.role, L.role[role_i18n_key(node_role(d))]]);
-	rows.push([f.status, L.status[node_status_key(d)]]);
-	rows.push([f.state, d.state || "—"]);
+	rows.push([f.status, node_status_symbol(d) + " " + L.status[node_status_key(d)]]);
+	rows.push([f.fsm_state, d.state || "—"]);
 	if (d.disabled) rows.push([f.disabled, f.yes]);
 	if (d.parent) rows.push([f.parent, d.parent]);
 	if (d.bottom_gobj) rows.push([f.bottom_gobj, d.bottom_gobj]);
@@ -16772,6 +16787,12 @@ var PRIVATE_DATA$9 = {
 	theme: null,
 	theme_observer: null,
 	$layout_select: null,
+	search: "",
+	match_count: 0,
+	find_timer: null,
+	$find_input: null,
+	$find_result: null,
+	$find_count: null,
 	$popover: null,
 	$popover_title: null,
 	$popover_body: null,
@@ -16917,6 +16938,7 @@ var NODE_SIZES = {
 /***************************************************************
 *  Shared card typography.
 ***************************************************************/
+var FIND_MATCH_COLOR = "#D9A23F";
 var GT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 /***************************************************************
 *  Theme-aware card palette derived from the role colour.
@@ -17289,11 +17311,107 @@ function destroy_ui$4(gobj) {
 /************************************************************
 *   Toolbar
 ************************************************************/
+/************************************************************
+*  The find box and its count.
+*
+*  A tree of a real yuno is a hundred cards, and the only way
+*  to locate one was to read them all. The COUNT is what makes
+*  it honest: a graph that did not move looks the same whether
+*  nothing matched or the match was already on screen -- the
+*  same reason the JSON graph carries one, and the same
+*  drawing, because the two sit in the same console.
+************************************************************/
+function make_find_items(gobj) {
+	let priv = gobj.priv;
+	let $find_input = (0, _yuneta_gobj_js.createElement2)([
+		"input",
+		{
+			class: "GOBJ_TREE_FIND_INPUT input",
+			type: "text",
+			placeholder: (0, i18next.t)("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": (0, i18next.t)("search"),
+			"data-i18n-aria-label": "search"
+		},
+		[],
+		{ input: (evt) => {
+			evt.stopPropagation();
+			let text = evt.target.value.trim();
+			if (priv.find_timer) clearTimeout(priv.find_timer);
+			priv.find_timer = setTimeout(function() {
+				priv.find_timer = null;
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
+			}, 250);
+		} }
+	]);
+	let $find_control = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{
+			class: "GOBJ_TREE_FIND control has-icons-left",
+			style: "margin-left:.5rem; margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[$find_input, [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]]
+	]);
+	attach_clear($find_control, $find_input);
+	priv.$find_input = $find_input;
+	return [$find_control, [
+		"div",
+		{
+			class: "GOBJ_TREE_FIND_RESULT is-hidden",
+			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+		},
+		[[
+			"span",
+			{ class: "GOBJ_TREE_FIND_COUNT" },
+			""
+		], [
+			"span",
+			{ i18n: "matches" },
+			(0, i18next.t)("matches")
+		]]
+	]];
+}
+/************************************************************
+*  Does this node answer the current find term?
+*
+*  What a reader types is a gclass, a name or a state -- the
+*  three things a card shows. The full name is searched too,
+*  because it is what the popover shows and what a log line
+*  carries.
+************************************************************/
+function node_matches(d, term) {
+	if (!term) return false;
+	return [
+		d.gclass,
+		d.name,
+		d.fullname,
+		d.state
+	].filter((x) => typeof x === "string").join(" ").toLowerCase().indexOf(term) >= 0;
+}
+/************************************************************
+*  Repaint the count chip. Hidden while nothing is typed:
+*  "0 matches" beside an empty box says nothing.
+************************************************************/
+function update_find_result(gobj) {
+	let priv = gobj.priv;
+	if (!priv.$find_result || !priv.$find_count) return;
+	if (!priv.search) {
+		priv.$find_result.classList.add("is-hidden");
+		priv.$find_count.textContent = "";
+		return;
+	}
+	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_result.classList.remove("is-hidden");
+}
 function make_toolbar$1(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide");
 	let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout");
-	let left_items = yui_graph_fold_items(gobj, toolbar_wide);
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat(make_find_items(gobj));
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
@@ -17344,6 +17462,8 @@ function make_toolbar$1(gobj) {
 			right_items
 		]
 	]);
+	priv.$find_result = $toolbar.querySelector(".GOBJ_TREE_FIND_RESULT");
+	priv.$find_count = $toolbar.querySelector(".GOBJ_TREE_FIND_COUNT");
 	(0, _yuneta_gobj_js.refresh_language)($toolbar, i18next.t);
 	return $toolbar;
 }
@@ -17519,26 +17639,32 @@ function render_toggle_html(node_id, collapsed, num_children, cs) {
 /************************************************************
 *  HTML for the status pill: what the gobj is DOING.
 *
-*  A dot plus a word, and the word is dropped in the compact
-*  card where there is no room for it -- the colour still
-*  carries it, and the `title` says it in full either way.
+*  A SYMBOL plus a word, and the word is dropped in the
+*  compact card where there is no room for it.
+*
+*  The symbol carries the state on its own, which a dot never
+*  did: a dot has one shape, so telling running from stopped
+*  meant telling green from red at 10 pixels -- and stopped is
+*  the one that has to be seen. Play, pause and stop are also
+*  the framework's own three verbs, not a borrowed metaphor.
 ************************************************************/
 function render_status_html(d, ss, labels, with_label) {
 	let full = d.disabled ? labels.field.disabled : labels.status[node_status_key(d)] || node_status_key(d);
 	let label = d.disabled ? labels.field.disabled : labels.status_short[node_status(d)] || node_status(d);
+	let symbol = node_status_symbol(d);
 	if (!with_label) return `<span title="${(0, _yuneta_gobj_js.escapeHtml)(full)}" style="
             flex: 0 0 auto;
-            width: 10px; height: 10px; border-radius: 50%;
-            background: ${ss.dot};
-            box-shadow: 0 0 0 2px ${ss.bg};
             margin-left: 6px;
-        "></span>`;
+            color: ${ss.dot};
+            font-size: 11px;
+            line-height: 1;
+        ">${(0, _yuneta_gobj_js.escapeHtml)(symbol)}</span>`;
 	return `<span title="${(0, _yuneta_gobj_js.escapeHtml)(full)}" style="
         flex: 0 0 auto;
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        padding: 1px 7px 1px 5px;
+        padding: 1px 7px 1px 6px;
         background: ${ss.bg};
         color: ${ss.fg};
         border-radius: 9px;
@@ -17546,7 +17672,8 @@ function render_status_html(d, ss, labels, with_label) {
         font-weight: 700;
         line-height: 1.45;
         white-space: nowrap;
-    "><span style="width:7px; height:7px; border-radius:50%; background:${ss.dot};"></span>${(0, _yuneta_gobj_js.escapeHtml)(label)}</span>`;
+    "><span style="color:${ss.dot}; font-size:11px; line-height:1;"
+    >${(0, _yuneta_gobj_js.escapeHtml)(symbol)}</span>${(0, _yuneta_gobj_js.escapeHtml)(label)}</span>`;
 }
 /************************************************************
 *  HTML for the badges: what the gobj IS, besides its colour.
@@ -17593,6 +17720,12 @@ function build_gobj_nodes(gobj, d, nodes, edges, parent_id, compact, labels) {
 	let height = size.h;
 	let border_width = category === "yuno" || category === "service" ? 2 : 1;
 	let border_style = d.disabled ? "dashed" : "solid";
+	if (node_matches(d, priv.search)) {
+		priv.match_count++;
+		border_width = 3;
+		border_style = "solid";
+		cs = Object.assign({}, cs, { border: FIND_MATCH_COLOR });
+	}
 	let children = d.children || [];
 	let num_children = children.length;
 	let has_children = num_children > 0;
@@ -17717,6 +17850,7 @@ function load_tree(gobj) {
 	}
 	let layout_cfg = get_layout_cfg((0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout"));
 	let labels = node_labels(i18next.t);
+	priv.match_count = 0;
 	let anchor = priv.pending_anchor || null;
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_anchor = null;
@@ -18146,6 +18280,23 @@ var GobjLanesHLayout = class extends _antv_g6.BaseLayout {
 /************************************************************
 *
 ************************************************************/
+/************************************************************
+*  EV_FIND_NODES {text}
+*
+*  The cards carry the highlight in their own markup (an html
+*  node paints no G6 state), so finding is a REBUILD -- which
+*  is also why the box is rate-limited. The view is preserved:
+*  a reader who typed a letter did not ask to be moved.
+************************************************************/
+function ac_find_nodes$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let text = String(kw && kw.text || "").trim().toLowerCase();
+	if (text === priv.search) return 0;
+	priv.search = text;
+	refresh_tree(gobj, { preserve_view: true });
+	update_find_result(gobj);
+	return 0;
+}
 function ac_refresh$3(gobj, event, kw, src) {
 	save_view_state(gobj);
 	refresh_tree(gobj);
@@ -18519,6 +18670,7 @@ function create_gclass$9(gclass_name) {
 		return -1;
 	}
 	__gclass__$9 = (0, _yuneta_gobj_js.gclass_create)(gclass_name, [
+		["EV_FIND_NODES", 0],
 		["EV_REFRESH", 0],
 		["EV_THEME", 0],
 		["EV_CHANGE_LAYOUT", 0],
@@ -18539,6 +18691,11 @@ function create_gclass$9(gclass_name) {
 		["EV_GCLASS_CLOSED", 0],
 		["EV_LANGUAGE_CHANGED", 0]
 	], [["ST_IDLE", [
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes$2,
+			null
+		],
 		[
 			"EV_REFRESH",
 			ac_refresh$3,

package/dist/gobj-ui.es.js

@@ -11437,7 +11437,7 @@ function collect_foldable_paths(value, path, out, is_root) {
 *  move looks the same whether nothing matched or the match
 *  was already on screen.
 ************************************************************/
-function update_find_result(gobj) {
+function update_find_result$1(gobj) {
 	let priv = gobj.priv;
 	if (!priv.$find_result || !priv.$find_count) return;
 	if (empty_string(priv.search)) {
@@ -11702,7 +11702,7 @@ function ac_change_layout$2(gobj, event, kw, src) {
 		edge: { type: cfg.edge_type }
 	});
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11731,7 +11731,7 @@ function ac_toggle_fold(gobj, event, kw, src) {
 	}
 	priv.pending_keep = keep_of(gobj, kw && kw.keep || path);
 	refresh_json(gobj, { preserve_view: true });
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11742,11 +11742,11 @@ function ac_toggle_fold(gobj, event, kw, src) {
 *  keystroke is unusable.  The count says whether there is
 *  anything to look for elsewhere.
 ************************************************************/
-function ac_find_nodes$2(gobj, event, kw, src) {
+function ac_find_nodes$3(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.search = (kw && kw.text || "").trim().toLowerCase();
 	refresh_json(gobj, { preserve_view: true });
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11758,7 +11758,7 @@ function ac_expand_all$2(gobj, event, kw, src) {
 	priv.collapsed.clear();
 	priv.reserved.clear();
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11775,7 +11775,7 @@ function ac_collapse_all$2(gobj, event, kw, src) {
 	priv.collapsed = new Set(paths);
 	priv.reserved.clear();
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -12049,7 +12049,7 @@ function create_gclass$13(gclass_name) {
 		],
 		[
 			"EV_FIND_NODES",
-			ac_find_nodes$2,
+			ac_find_nodes$3,
 			null
 		],
 		[
@@ -16127,6 +16127,21 @@ function node_status(d) {
 	if (!d || !d.running) return "stopped";
 	return d.playing ? "playing" : "running";
 }
+var STATUS_SYMBOLS = {
+	"playing": "▶︎",
+	"running": "‖",
+	"stopped": "■︎"
+};
+var DISABLED_SYMBOL = "⊘";
+/************************************************************
+*  The symbol of a node's status, which is what the reader
+*  actually sees first. `disabled` overrides the rest: a
+*  disabled gobj is not going to run whatever it is doing now.
+************************************************************/
+function node_status_symbol(d) {
+	if (d && d.disabled) return DISABLED_SYMBOL;
+	return STATUS_SYMBOLS[node_status(d)] || STATUS_SYMBOLS.stopped;
+}
 /************************************************************
 *  The i18n key of the status, which is NOT the status itself:
 *  a gobj that runs and does not play is PAUSED to the reader,
@@ -16255,7 +16270,7 @@ function node_labels(t) {
 			full_name: t("full name"),
 			role: t("role"),
 			status: t("status"),
-			state: t("state"),
+			fsm_state: t("fsm state"),
 			disabled: t("disabled"),
 			parent: t("parent"),
 			bottom_gobj: t("bottom gobj"),
@@ -16284,8 +16299,8 @@ function node_info_rows(d, t) {
 	rows.push([f.name, d.name || "—"]);
 	if (d.fullname && d.fullname !== d.shortname) rows.push([f.full_name, d.fullname]);
 	rows.push([f.role, L.role[role_i18n_key(node_role(d))]]);
-	rows.push([f.status, L.status[node_status_key(d)]]);
-	rows.push([f.state, d.state || "—"]);
+	rows.push([f.status, node_status_symbol(d) + " " + L.status[node_status_key(d)]]);
+	rows.push([f.fsm_state, d.state || "—"]);
 	if (d.disabled) rows.push([f.disabled, f.yes]);
 	if (d.parent) rows.push([f.parent, d.parent]);
 	if (d.bottom_gobj) rows.push([f.bottom_gobj, d.bottom_gobj]);
@@ -16767,6 +16782,12 @@ var PRIVATE_DATA$9 = {
 	theme: null,
 	theme_observer: null,
 	$layout_select: null,
+	search: "",
+	match_count: 0,
+	find_timer: null,
+	$find_input: null,
+	$find_result: null,
+	$find_count: null,
 	$popover: null,
 	$popover_title: null,
 	$popover_body: null,
@@ -16912,6 +16933,7 @@ var NODE_SIZES = {
 /***************************************************************
 *  Shared card typography.
 ***************************************************************/
+var FIND_MATCH_COLOR = "#D9A23F";
 var GT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 /***************************************************************
 *  Theme-aware card palette derived from the role colour.
@@ -17284,11 +17306,107 @@ function destroy_ui$4(gobj) {
 /************************************************************
 *   Toolbar
 ************************************************************/
+/************************************************************
+*  The find box and its count.
+*
+*  A tree of a real yuno is a hundred cards, and the only way
+*  to locate one was to read them all. The COUNT is what makes
+*  it honest: a graph that did not move looks the same whether
+*  nothing matched or the match was already on screen -- the
+*  same reason the JSON graph carries one, and the same
+*  drawing, because the two sit in the same console.
+************************************************************/
+function make_find_items(gobj) {
+	let priv = gobj.priv;
+	let $find_input = createElement2([
+		"input",
+		{
+			class: "GOBJ_TREE_FIND_INPUT input",
+			type: "text",
+			placeholder: t("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": t("search"),
+			"data-i18n-aria-label": "search"
+		},
+		[],
+		{ input: (evt) => {
+			evt.stopPropagation();
+			let text = evt.target.value.trim();
+			if (priv.find_timer) clearTimeout(priv.find_timer);
+			priv.find_timer = setTimeout(function() {
+				priv.find_timer = null;
+				gobj_send_event(gobj, "EV_FIND_NODES", { text }, gobj);
+			}, 250);
+		} }
+	]);
+	let $find_control = createElement2([
+		"div",
+		{
+			class: "GOBJ_TREE_FIND control has-icons-left",
+			style: "margin-left:.5rem; margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[$find_input, [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]]
+	]);
+	attach_clear($find_control, $find_input);
+	priv.$find_input = $find_input;
+	return [$find_control, [
+		"div",
+		{
+			class: "GOBJ_TREE_FIND_RESULT is-hidden",
+			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+		},
+		[[
+			"span",
+			{ class: "GOBJ_TREE_FIND_COUNT" },
+			""
+		], [
+			"span",
+			{ i18n: "matches" },
+			t("matches")
+		]]
+	]];
+}
+/************************************************************
+*  Does this node answer the current find term?
+*
+*  What a reader types is a gclass, a name or a state -- the
+*  three things a card shows. The full name is searched too,
+*  because it is what the popover shows and what a log line
+*  carries.
+************************************************************/
+function node_matches(d, term) {
+	if (!term) return false;
+	return [
+		d.gclass,
+		d.name,
+		d.fullname,
+		d.state
+	].filter((x) => typeof x === "string").join(" ").toLowerCase().indexOf(term) >= 0;
+}
+/************************************************************
+*  Repaint the count chip. Hidden while nothing is typed:
+*  "0 matches" beside an empty box says nothing.
+************************************************************/
+function update_find_result(gobj) {
+	let priv = gobj.priv;
+	if (!priv.$find_result || !priv.$find_count) return;
+	if (!priv.search) {
+		priv.$find_result.classList.add("is-hidden");
+		priv.$find_count.textContent = "";
+		return;
+	}
+	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_result.classList.remove("is-hidden");
+}
 function make_toolbar$1(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
 	let current_layout = gobj_read_str_attr(gobj, "layout");
-	let left_items = yui_graph_fold_items(gobj, toolbar_wide);
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat(make_find_items(gobj));
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
@@ -17339,6 +17457,8 @@ function make_toolbar$1(gobj) {
 			right_items
 		]
 	]);
+	priv.$find_result = $toolbar.querySelector(".GOBJ_TREE_FIND_RESULT");
+	priv.$find_count = $toolbar.querySelector(".GOBJ_TREE_FIND_COUNT");
 	refresh_language($toolbar, t);
 	return $toolbar;
 }
@@ -17514,26 +17634,32 @@ function render_toggle_html(node_id, collapsed, num_children, cs) {
 /************************************************************
 *  HTML for the status pill: what the gobj is DOING.
 *
-*  A dot plus a word, and the word is dropped in the compact
-*  card where there is no room for it -- the colour still
-*  carries it, and the `title` says it in full either way.
+*  A SYMBOL plus a word, and the word is dropped in the
+*  compact card where there is no room for it.
+*
+*  The symbol carries the state on its own, which a dot never
+*  did: a dot has one shape, so telling running from stopped
+*  meant telling green from red at 10 pixels -- and stopped is
+*  the one that has to be seen. Play, pause and stop are also
+*  the framework's own three verbs, not a borrowed metaphor.
 ************************************************************/
 function render_status_html(d, ss, labels, with_label) {
 	let full = d.disabled ? labels.field.disabled : labels.status[node_status_key(d)] || node_status_key(d);
 	let label = d.disabled ? labels.field.disabled : labels.status_short[node_status(d)] || node_status(d);
+	let symbol = node_status_symbol(d);
 	if (!with_label) return `<span title="${escapeHtml(full)}" style="
             flex: 0 0 auto;
-            width: 10px; height: 10px; border-radius: 50%;
-            background: ${ss.dot};
-            box-shadow: 0 0 0 2px ${ss.bg};
             margin-left: 6px;
-        "></span>`;
+            color: ${ss.dot};
+            font-size: 11px;
+            line-height: 1;
+        ">${escapeHtml(symbol)}</span>`;
 	return `<span title="${escapeHtml(full)}" style="
         flex: 0 0 auto;
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        padding: 1px 7px 1px 5px;
+        padding: 1px 7px 1px 6px;
         background: ${ss.bg};
         color: ${ss.fg};
         border-radius: 9px;
@@ -17541,7 +17667,8 @@ function render_status_html(d, ss, labels, with_label) {
         font-weight: 700;
         line-height: 1.45;
         white-space: nowrap;
-    "><span style="width:7px; height:7px; border-radius:50%; background:${ss.dot};"></span>${escapeHtml(label)}</span>`;
+    "><span style="color:${ss.dot}; font-size:11px; line-height:1;"
+    >${escapeHtml(symbol)}</span>${escapeHtml(label)}</span>`;
 }
 /************************************************************
 *  HTML for the badges: what the gobj IS, besides its colour.
@@ -17588,6 +17715,12 @@ function build_gobj_nodes(gobj, d, nodes, edges, parent_id, compact, labels) {
 	let height = size.h;
 	let border_width = category === "yuno" || category === "service" ? 2 : 1;
 	let border_style = d.disabled ? "dashed" : "solid";
+	if (node_matches(d, priv.search)) {
+		priv.match_count++;
+		border_width = 3;
+		border_style = "solid";
+		cs = Object.assign({}, cs, { border: FIND_MATCH_COLOR });
+	}
 	let children = d.children || [];
 	let num_children = children.length;
 	let has_children = num_children > 0;
@@ -17712,6 +17845,7 @@ function load_tree(gobj) {
 	}
 	let layout_cfg = get_layout_cfg(gobj_read_str_attr(gobj, "layout"));
 	let labels = node_labels(t);
+	priv.match_count = 0;
 	let anchor = priv.pending_anchor || null;
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_anchor = null;
@@ -18141,6 +18275,23 @@ var GobjLanesHLayout = class extends BaseLayout {
 /************************************************************
 *
 ************************************************************/
+/************************************************************
+*  EV_FIND_NODES {text}
+*
+*  The cards carry the highlight in their own markup (an html
+*  node paints no G6 state), so finding is a REBUILD -- which
+*  is also why the box is rate-limited. The view is preserved:
+*  a reader who typed a letter did not ask to be moved.
+************************************************************/
+function ac_find_nodes$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let text = String(kw && kw.text || "").trim().toLowerCase();
+	if (text === priv.search) return 0;
+	priv.search = text;
+	refresh_tree(gobj, { preserve_view: true });
+	update_find_result(gobj);
+	return 0;
+}
 function ac_refresh$3(gobj, event, kw, src) {
 	save_view_state(gobj);
 	refresh_tree(gobj);
@@ -18514,6 +18665,7 @@ function create_gclass$9(gclass_name) {
 		return -1;
 	}
 	__gclass__$9 = gclass_create(gclass_name, [
+		["EV_FIND_NODES", 0],
 		["EV_REFRESH", 0],
 		["EV_THEME", 0],
 		["EV_CHANGE_LAYOUT", 0],
@@ -18534,6 +18686,11 @@ function create_gclass$9(gclass_name) {
 		["EV_GCLASS_CLOSED", 0],
 		["EV_LANGUAGE_CHANGED", 0]
 	], [["ST_IDLE", [
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes$2,
+			null
+		],
 		[
 			"EV_REFRESH",
 			ac_refresh$3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.38",
+  "version": "7.23.39",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_gobj_tree_js.js

@@ -45,6 +45,7 @@ import {
     node_role,
     node_status,
     node_status_key,
+    node_status_symbol,
 } from "./gobj_tree_model.js";
 import {
     close_gclass_view,
@@ -54,6 +55,7 @@ import {
 import {yui_shell_of} from "./c_yui_shell.js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
     yui_graph_anchor_item,
@@ -257,6 +259,15 @@ let PRIVATE_DATA = {
     theme: null,
     theme_observer: null,    // MutationObserver on <html data-theme>
     $layout_select: null,
+
+    /*---------------- find ----------------*/
+    search:         "",     // current find term, lower-cased
+    match_count:    0,      // how many cards it matched, for the chip
+    find_timer:     null,   // rate-limits the find box
+    $find_input:    null,
+    $find_result:   null,
+    $find_count:    null,
+
     $popover: null,
     $popover_title: null,
     $popover_body: null,
@@ -351,6 +362,13 @@ const NODE_SIZES = {
 /***************************************************************
  *  Shared card typography.
  ***************************************************************/
+/*
+ *  The ring a find match wears. Amber, which in this library means
+ *  "here" -- the same colour the gclass viewer lights the current
+ *  state with -- and not one of the role colours, which are taken.
+ */
+const FIND_MATCH_COLOR = "#D9A23F";
+
 const GT_FONT =
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, " +
     "Helvetica, Arial, sans-serif";
@@ -836,6 +854,120 @@ function destroy_ui(gobj)
 /************************************************************
  *   Toolbar
  ************************************************************/
+/************************************************************
+ *  The find box and its count.
+ *
+ *  A tree of a real yuno is a hundred cards, and the only way
+ *  to locate one was to read them all. The COUNT is what makes
+ *  it honest: a graph that did not move looks the same whether
+ *  nothing matched or the match was already on screen -- the
+ *  same reason the JSON graph carries one, and the same
+ *  drawing, because the two sit in the same console.
+ ************************************************************/
+function make_find_items(gobj)
+{
+    let priv = gobj.priv;
+
+    /*  Materialised, not a spec: attach_clear() hangs the NORM clear (✕)
+     *  on a real element. Clearing dispatches a synthetic `input`, which
+     *  goes through the same rate-limited handler and fires
+     *  EV_FIND_NODES with an empty term -- box and highlight clear
+     *  together.  */
+    let $find_input = createElement2(
+        ['input', {
+            class: 'GOBJ_TREE_FIND_INPUT input',
+            type: 'text',
+            /*  A placeholder is not a text node, so the data-i18n walk
+             *  cannot reach it: it needs its own key.  */
+            placeholder: t('search'),
+            'data-i18n-placeholder': 'search',
+            'aria-label': t('search'),
+            'data-i18n-aria-label': 'search'
+        }, [], {
+            /*  Rate-limited, not delayed for effect: every keystroke
+             *  REBUILDS the cards -- an html node paints no G6 state, so
+             *  the highlight has to live in the card's own markup -- and
+             *  the first letter typed matches most of a tree.  */
+            input: (evt) => {
+                evt.stopPropagation();
+                let text = evt.target.value.trim();
+                if(priv.find_timer) {
+                    clearTimeout(priv.find_timer);
+                }
+                priv.find_timer = setTimeout(function() {
+                    priv.find_timer = null;
+                    gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
+                }, 250);
+            }
+        }]);
+
+    let $find_control = createElement2(
+        ['div', {class: 'GOBJ_TREE_FIND control has-icons-left',
+                 style: 'margin-left:.5rem; margin-right:.5rem; ' +
+                        'max-width:12rem; min-width:7rem;'}, [
+            $find_input,
+            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+        ]]);
+    attach_clear($find_control, $find_input);
+
+    priv.$find_input = $find_input;
+
+    return [
+        $find_control,
+        /*  Two spans, not one string: the number is DATA and "matches"
+         *  is the word, so a language switch re-translates the half that
+         *  is a word. `display:flex` inline and NOT the `is-flex` helper
+         *  -- both Bulma helpers carry !important, so `is-hidden is-flex`
+         *  on one element is decided by stylesheet order.  */
+        ['div', {class: 'GOBJ_TREE_FIND_RESULT is-hidden',
+                 style: 'display:flex; align-items:center; gap:.3rem; ' +
+                        'margin-right:.5rem; font-size:.85rem;'}, [
+            ['span', {class: 'GOBJ_TREE_FIND_COUNT'}, ''],
+            ['span', {i18n: 'matches'}, t('matches')]
+        ]]
+    ];
+}
+
+/************************************************************
+ *  Does this node answer the current find term?
+ *
+ *  What a reader types is a gclass, a name or a state -- the
+ *  three things a card shows. The full name is searched too,
+ *  because it is what the popover shows and what a log line
+ *  carries.
+ ************************************************************/
+function node_matches(d, term)
+{
+    if(!term) {
+        return false;
+    }
+    let hay = [d.gclass, d.name, d.fullname, d.state]
+        .filter((x) => typeof x === "string")
+        .join(" ")
+        .toLowerCase();
+    return hay.indexOf(term) >= 0;
+}
+
+/************************************************************
+ *  Repaint the count chip. Hidden while nothing is typed:
+ *  "0 matches" beside an empty box says nothing.
+ ************************************************************/
+function update_find_result(gobj)
+{
+    let priv = gobj.priv;
+
+    if(!priv.$find_result || !priv.$find_count) {
+        return;
+    }
+    if(!priv.search) {
+        priv.$find_result.classList.add("is-hidden");
+        priv.$find_count.textContent = "";
+        return;
+    }
+    priv.$find_count.textContent = String(priv.match_count);
+    priv.$find_result.classList.remove("is-hidden");
+}
+
 function make_toolbar(gobj)
 {
     let priv = gobj.priv;
@@ -846,7 +978,9 @@ function make_toolbar(gobj)
      *  and not a per-node one, so it sits on its own at the left — ahead
      *  of a find box where the toolbar has one.  The per-node handles
      *  live inside the cards, on the right of each header.  */
-    let left_items = yui_graph_fold_items(gobj, toolbar_wide);
+    let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat(
+        make_find_items(gobj)
+    );
     let center_items = [];
     let right_items = [];
 
@@ -899,6 +1033,11 @@ function make_toolbar(gobj)
         ['div', {class: 'yui-horizontal-toolbar-section right'}, right_items],
     ]);
 
+    /*  The count chip is built as a spec, so its elements only exist
+     *  once yui_toolbar() has materialised the row.  */
+    priv.$find_result = $toolbar.querySelector('.GOBJ_TREE_FIND_RESULT');
+    priv.$find_count = $toolbar.querySelector('.GOBJ_TREE_FIND_COUNT');
+
     refresh_language($toolbar, t);
     return $toolbar;
 }
@@ -1159,9 +1298,14 @@ function render_toggle_html(node_id, collapsed, num_children, cs)
 /************************************************************
  *  HTML for the status pill: what the gobj is DOING.
  *
- *  A dot plus a word, and the word is dropped in the compact
- *  card where there is no room for it -- the colour still
- *  carries it, and the `title` says it in full either way.
+ *  A SYMBOL plus a word, and the word is dropped in the
+ *  compact card where there is no room for it.
+ *
+ *  The symbol carries the state on its own, which a dot never
+ *  did: a dot has one shape, so telling running from stopped
+ *  meant telling green from red at 10 pixels -- and stopped is
+ *  the one that has to be seen. Play, pause and stop are also
+ *  the framework's own three verbs, not a borrowed metaphor.
  ************************************************************/
 function render_status_html(d, ss, labels, with_label)
 {
@@ -1171,15 +1315,16 @@ function render_status_html(d, ss, labels, with_label)
     let label = d.disabled?
         labels.field.disabled:
         (labels.status_short[node_status(d)] || node_status(d));
+    let symbol = node_status_symbol(d);
 
     if(!with_label) {
         return `<span title="${escapeHtml(full)}" style="
             flex: 0 0 auto;
-            width: 10px; height: 10px; border-radius: 50%;
-            background: ${ss.dot};
-            box-shadow: 0 0 0 2px ${ss.bg};
             margin-left: 6px;
-        "></span>`;
+            color: ${ss.dot};
+            font-size: 11px;
+            line-height: 1;
+        ">${escapeHtml(symbol)}</span>`;
     }
 
     return `<span title="${escapeHtml(full)}" style="
@@ -1187,7 +1332,7 @@ function render_status_html(d, ss, labels, with_label)
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        padding: 1px 7px 1px 5px;
+        padding: 1px 7px 1px 6px;
         background: ${ss.bg};
         color: ${ss.fg};
         border-radius: 9px;
@@ -1195,7 +1340,8 @@ function render_status_html(d, ss, labels, with_label)
         font-weight: 700;
         line-height: 1.45;
         white-space: nowrap;
-    "><span style="width:7px; height:7px; border-radius:50%; background:${ss.dot};"></span>${escapeHtml(label)}</span>`;
+    "><span style="color:${ss.dot}; font-size:11px; line-height:1;"
+    >${escapeHtml(symbol)}</span>${escapeHtml(label)}</span>`;
 }
 
 /************************************************************
@@ -1257,6 +1403,20 @@ function build_gobj_nodes(gobj, d, nodes, edges, parent_id, compact, labels)
      *  "this branch is out of the game" at any zoom.  */
     let border_style = d.disabled? "dashed": "solid";
 
+    /*
+     *  A card the find box matched. The ring is drawn OVER the role
+     *  colour and not instead of it -- the card still has to say what
+     *  it is -- and it is counted here, while every card passes
+     *  through, so the chip and the drawing can never disagree.
+     */
+    let matched = node_matches(d, priv.search);
+    if(matched) {
+        priv.match_count++;
+        border_width = 3;
+        border_style = "solid";
+        cs = Object.assign({}, cs, {border: FIND_MATCH_COLOR});
+    }
+
     let children = d.children || [];
     let num_children = children.length;
     let has_children = num_children > 0;
@@ -1442,6 +1602,11 @@ function load_tree(gobj)
     let layout_cfg = get_layout_cfg(gobj_read_str_attr(gobj, "layout"));
     let labels = node_labels(t);
 
+    /*  Counted as the cards are built, so it is reset HERE and nowhere
+     *  else: a count kept by the action would drift the moment the tree
+     *  was rebuilt for any other reason.  */
+    priv.match_count = 0;
+
     let anchor = priv.pending_anchor || null;
     let preserve_view = !!priv.pending_preserve_view;
     priv.pending_anchor = null;
@@ -2074,6 +2239,29 @@ class GobjLanesHLayout extends BaseLayout {
 /************************************************************
  *
  ************************************************************/
+/************************************************************
+ *  EV_FIND_NODES {text}
+ *
+ *  The cards carry the highlight in their own markup (an html
+ *  node paints no G6 state), so finding is a REBUILD -- which
+ *  is also why the box is rate-limited. The view is preserved:
+ *  a reader who typed a letter did not ask to be moved.
+ ************************************************************/
+function ac_find_nodes(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let text = String((kw && kw.text) || "").trim().toLowerCase();
+
+    if(text === priv.search) {
+        return 0;
+    }
+
+    priv.search = text;
+    refresh_tree(gobj, {preserve_view: true});
+    update_find_result(gobj);
+    return 0;
+}
+
 function ac_refresh(gobj, event, kw, src)
 {
     save_view_state(gobj);
@@ -2684,6 +2872,7 @@ function create_gclass(gclass_name)
      *---------------------------------------------*/
     const states = [
         ["ST_IDLE", [
+            ["EV_FIND_NODES",           ac_find_nodes,          null],
             ["EV_REFRESH",              ac_refresh,             null],
             ["EV_THEME",                ac_theme,               null],
             ["EV_CHANGE_LAYOUT",        ac_change_layout,       null],
@@ -2710,6 +2899,7 @@ function create_gclass(gclass_name)
      *          Events
      *---------------------------------------------*/
     const event_types = [
+        ["EV_FIND_NODES",           0],
         ["EV_REFRESH",              0],
         ["EV_THEME",                0],
         ["EV_CHANGE_LAYOUT",        0],

package/src/gobj_tree_model.js

@@ -88,6 +88,43 @@ function node_status(d)
     return d.playing? "playing": "running";
 }
 
+/*
+ *  What the status LOOKS like, before any word is read.
+ *
+ *  The transport vocabulary, because it is Yuneta's own: a yuno is RUN
+ *  (the process), PLAYED (the services) and PAUSED, so play / pause /
+ *  stop are not a metaphor here, they are the three verbs.
+ *
+ *  A coloured dot was the whole encoding before, and a dot has one
+ *  SHAPE: telling "running" from "stopped" meant telling green from
+ *  red, at 10px, which is no distinction at all for a reader who does
+ *  not see colour -- and stopped is the state that matters.
+ *
+ *  U+FE0E asks for the TEXT presentation: bare, several of these
+ *  render as colour emoji on some platforms, which would make the
+ *  glyph the loudest thing on a card.
+ */
+const STATUS_SYMBOLS = {
+    "playing": "\u25B6\uFE0E",     /*  play                */
+    "running": "\u2016",           /*  paused: two bars    */
+    "stopped": "\u25A0\uFE0E",     /*  stop                */
+};
+
+const DISABLED_SYMBOL = "\u2298";  /*  a slashed circle    */
+
+/************************************************************
+ *  The symbol of a node's status, which is what the reader
+ *  actually sees first. `disabled` overrides the rest: a
+ *  disabled gobj is not going to run whatever it is doing now.
+ ************************************************************/
+function node_status_symbol(d)
+{
+    if(d && d.disabled) {
+        return DISABLED_SYMBOL;
+    }
+    return STATUS_SYMBOLS[node_status(d)] || STATUS_SYMBOLS.stopped;
+}
+
 /************************************************************
  *  The i18n key of the status, which is NOT the status itself:
  *  a gobj that runs and does not play is PAUSED to the reader,
@@ -349,7 +386,7 @@ function node_labels(t)
             full_name:   t("full name"),
             role:        t("role"),
             status:      t("status"),
-            state:       t("state"),
+            fsm_state:   t("fsm state"),
             disabled:    t("disabled"),
             parent:      t("parent"),
             bottom_gobj: t("bottom gobj"),
@@ -387,8 +424,14 @@ function node_info_rows(d, t)
     }
 
     rows.push([f.role,   L.role[role_i18n_key(node_role(d))]]);
-    rows.push([f.status, L.status[node_status_key(d)]]);
-    rows.push([f.state,  d.state || "\u2014"]);
+    rows.push([
+        f.status,
+        node_status_symbol(d) + " " + L.status[node_status_key(d)]
+    ]);
+    /*  NOT `state`: both rows read "Estado" in Spanish, side by side,
+     *  one saying "Parado" and the other "ST_IDLE". They are different
+     *  questions -- what the gobj is DOING, and where its machine IS.  */
+    rows.push([f.fsm_state, d.state || "\u2014"]);
 
     if(d.disabled) {
         rows.push([f.disabled, f.yes]);
@@ -423,9 +466,11 @@ function node_info_rows(d, t)
 export {
     ROLES,
     STATUSES,
+    STATUS_SYMBOLS,
     node_role,
     node_status,
     node_status_key,
+    node_status_symbol,
     node_badge_keys,
     node_labels,
     node_info_rows,

package/src/gobj_tree_model.test.js

@@ -2,6 +2,7 @@ import {describe, it, expect} from "vitest";
 import {
     node_role,
     node_status,
+    node_status_symbol,
     node_status_key,
     node_badge_keys,
     node_info_rows,
@@ -148,8 +149,10 @@ describe("node_info_rows", () => {
         let timer = root.children.find(c => c.gclass === "C_TIMER");
         let r = rows_of(timer);
         expect(r["role"]).toBe("pure child");
-        expect(r["status"]).toBe("running (paused)");
-        expect(r["state"]).toBe("ST_IDLE");
+        /*  The symbol travels with the word: the popover is where a
+         *  reader learns which glyph means what.  */
+        expect(r["status"]).toBe("\u2016 running (paused)");
+        expect(r["fsm state"]).toBe("ST_IDLE");
     });
 
     it("shows the facts a card has no room for", () => {
@@ -158,7 +161,7 @@ describe("node_info_rows", () => {
         let r = rows_of(tcp);
         expect(r["disabled"]).toBe("yes");
         expect(r["bottom gobj"]).toBe("C_TCP^raw");
-        expect(r["status"]).toBe("stopped");
+        expect(r["status"]).toBe("\u2298 stopped");
     });
 
     it("carries the traces and the flags the backend reports", () => {
@@ -182,3 +185,21 @@ describe("node_info_rows", () => {
         expect(rows_of(root)["children"]).toBe("2 (collapsed)");
     });
 });
+
+describe("node_status_symbol", () => {
+    it("gives each status its own SHAPE, not only a colour", () => {
+        expect(node_status_symbol({running: true, playing: true})).toBe("\u25B6\uFE0E");
+        expect(node_status_symbol({running: true, playing: false})).toBe("\u2016");
+        expect(node_status_symbol({running: false})).toBe("\u25A0\uFE0E");
+    });
+
+    it("says disabled over anything else", () => {
+        expect(node_status_symbol({running: true, playing: true, disabled: true}))
+            .toBe("\u2298");
+    });
+
+    it("falls back to stopped for nothing at all", () => {
+        expect(node_status_symbol(null)).toBe("\u25A0\uFE0E");
+        expect(node_status_symbol(undefined)).toBe("\u25A0\uFE0E");
+    });
+});