@yuneta/gobj-ui 7.23.29 → 7.23.31

package/dist/gobj-ui.es.js

@@ -1,4 +1,4 @@
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
+import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, gobj_yuno_name, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
 import i18next, { t } from "i18next";
 import TomSelect from "tom-select";
 import { createJSONEditor } from "vanilla-jsoneditor";
@@ -3513,7 +3513,7 @@ function composed_title(gobj) {
 *   Below the mobile breakpoint the window is a full-screen
 *   sheet (no float / drag / resize).
 ************************************************************/
-function is_mobile$3() {
+function is_mobile$4() {
 	return (window.innerWidth || document.documentElement.offsetWidth) <= MOBILE_MAX;
 }
 /************************************************************
@@ -3546,7 +3546,7 @@ function do_minimize(gobj) {
 ************************************************************/
 function build_ui$15(gobj) {
 	ensure_window_style();
-	let mobile = is_mobile$3();
+	let mobile = is_mobile$4();
 	let header = gobj_read_attr(gobj, "header");
 	if (is_gobj(header)) header = gobj_read_attr(header, "$container");
 	if (!header) header = build_default_header(gobj);
@@ -3884,7 +3884,7 @@ function min$1(gobj) {
 *  handlers moving
 ************************************************************/
 function mvStart(gobj, evt) {
-	if (is_mobile$3()) return;
+	if (is_mobile$4()) return;
 	let $container = gobj_read_attr(gobj, "$container");
 	let window_rect = $container.getBoundingClientRect();
 	let x = evt.screenX;
@@ -4043,7 +4043,7 @@ function do_center(gobj, x, y, width, height) {
 function handleResize(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
-	if (is_mobile$3()) {
+	if (is_mobile$4()) {
 		$container.classList.add("is-mobile-sheet");
 		let vw = window.innerWidth || document.documentElement.offsetWidth;
 		let vh = window.innerHeight || document.documentElement.offsetHeight;
@@ -10978,6 +10978,26 @@ function make_toolbar$3(gobj) {
 	return $toolbar;
 }
 /************************************************************
+*  The element G6 mounts its canvas in.
+*
+*  Read from THIS gclass's own $container, never with
+*  `document.getElementById()`: a view is not always in the
+*  document when it is started -- a host that builds the
+*  viewer and mounts it into a window afterwards starts it
+*  DETACHED -- and a global lookup answers null there. It cost
+*  a resize that never worked: the ResizeObserver below was
+*  simply never attached, silently, and the canvas kept the
+*  size it was born with for the life of the window.
+*
+*  Null only if the UI was never built; that is a bug, and it
+*  is logged where it matters rather than skipped.
+************************************************************/
+function canvas_mount$1(gobj) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return null;
+	return $container.querySelector("#" + gobj.priv.canvas_id);
+}
+/************************************************************
 *  Build a G6 graph instance
 ************************************************************/
 function build_graph$3(gobj) {
@@ -11021,8 +11041,9 @@ function build_graph$3(gobj) {
 	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
-		let $canvas = document.getElementById(priv.canvas_id);
-		if ($canvas) {
+		let $canvas = canvas_mount$1(gobj);
+		if (!$canvas) log_error(`${gobj_short_name(gobj)}: no canvas mount, the graph will never resize`);
+		else {
 			let ro = new ResizeObserver(() => {
 				if (priv._resize_raf) cancelAnimationFrame(priv._resize_raf);
 				priv._resize_raf = requestAnimationFrame(() => {
@@ -11959,10 +11980,9 @@ function ac_node_click$4(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_show$8(gobj, event, kw, src) {
-	let priv = gobj.priv;
-	let graph = priv.graph;
+	let graph = gobj.priv.graph;
 	if (graph) {
-		let $canvas = document.getElementById(priv.canvas_id);
+		let $canvas = canvas_mount$1(gobj);
 		if ($canvas) {
 			let cw = $canvas.clientWidth;
 			let ch = $canvas.clientHeight;
@@ -11981,10 +12001,9 @@ function ac_show$8(gobj, event, kw, src) {
 *  No fitView: preserve the user's current pan/zoom.
 ************************************************************/
 function ac_resize$2(gobj, event, kw, src) {
-	let priv = gobj.priv;
-	let graph = priv.graph;
+	let graph = gobj.priv.graph;
 	if (graph) {
-		let $canvas = document.getElementById(priv.canvas_id);
+		let $canvas = canvas_mount$1(gobj);
 		if ($canvas) {
 			let cw = $canvas.clientWidth;
 			let ch = $canvas.clientHeight;
@@ -13200,7 +13219,7 @@ function ac_json_item_clicked(gobj, event, kw, src) {
 /************************************************************
 *   EV_LANGUAGE_CHANGED — re-translate chrome + re-render
 ************************************************************/
-function ac_language_changed$3(gobj, event, kw, src) {
+function ac_language_changed$4(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) {
@@ -13261,7 +13280,7 @@ function create_gclass$10(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$3,
+			ac_language_changed$4,
 			null
 		],
 		[
@@ -13337,7 +13356,7 @@ function create_gclass$10(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$3,
+			ac_language_changed$4,
 			null
 		],
 		[
@@ -13387,6 +13406,568 @@ function register_c_yui_json() {
 	return create_gclass$10(GCLASS_NAME$10);
 }
 //#endregion
+//#region src/gobj_tree_model.js
+/***********************************************************************
+*          gobj_tree_model.js
+*
+*          The gobj tree of a yuno, as plain data.
+*
+*          The view (C_YUI_GOBJ_TREE_JS) draws NODE DESCRIPTORS, never
+*          gobjs. There are two producers of a descriptor, because the
+*          view has to show the gobjs of the BACKEND too:
+*
+*            - describe_js_gobj()      the gobj tree of THIS browser yuno
+*            - describe_backend_tree() the answer of the backend command
+*                                      `view-gobj-tree` of another yuno
+*
+*          Both answer the SAME shape, and that shape is the backend's:
+*          the field names are the ones `gobj2json()` writes in
+*          `kernel/c/gobj-c/src/gobj.c` (fullname, shortname, gclass,
+*          name, parent, state, running, playing, service, disabled,
+*          volatil, bottom_gobj, gobj_flags, commands, gobj_trace_level).
+*          Anything the browser runtime cannot answer is simply absent,
+*          and every reader here treats absent as "not known", never as
+*          false.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  The role of a node: "yuno" | "service" | "volatil" | "pure" | "child"
+************************************************************/
+function node_role(d) {
+	if (!d) return "child";
+	if (d.is_yuno) return "yuno";
+	if (d.service) return "service";
+	if (d.volatil) return "volatil";
+	if (d.pure_child) return "pure";
+	return "child";
+}
+/************************************************************
+*  What the node is doing: "stopped" | "running" | "playing"
+************************************************************/
+function node_status(d) {
+	if (!d || !d.running) return "stopped";
+	return d.playing ? "playing" : "running";
+}
+/************************************************************
+*  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,
+*  and "running" alone never said which of the two it was.
+************************************************************/
+function node_status_key(d) {
+	switch (node_status(d)) {
+		case "playing": return "playing";
+		case "running": return "running (paused)";
+		default: return "stopped";
+	}
+}
+/******************************
+*      Producers
+******************************/
+/************************************************************
+*  A descriptor of a LIVE gobj of this browser yuno, children
+*  included (the whole subtree, depth-first).
+*
+*  `is_root` marks the yuno itself: the JS runtime has no
+*  gobj_flag_yuno test of its own.
+************************************************************/
+function describe_js_gobj(target_gobj, is_root) {
+	if (!target_gobj) return null;
+	let parent_gobj = gobj_parent(target_gobj);
+	let bottom = gobj_bottom_gobj(target_gobj);
+	let d = {
+		gclass: gobj_gclass_name(target_gobj) || "",
+		name: gobj_name(target_gobj) || "",
+		shortname: gobj_short_name(target_gobj) || "",
+		fullname: gobj_full_name(target_gobj) || "",
+		parent: parent_gobj ? gobj_short_name(parent_gobj) || "" : "",
+		state: gobj_current_state(target_gobj) || "",
+		running: !!gobj_is_running(target_gobj),
+		playing: !!gobj_is_playing(target_gobj),
+		service: !!gobj_is_service(target_gobj),
+		volatil: !!gobj_is_volatil(target_gobj),
+		pure_child: !!gobj_is_pure_child(target_gobj),
+		disabled: !!target_gobj.disabled,
+		bottom_gobj: bottom ? gobj_short_name(bottom) || "" : "",
+		commands: !!(target_gobj.gclass && target_gobj.gclass.command_table),
+		is_yuno: !!is_root,
+		children: []
+	};
+	let children = target_gobj.dl_children || [];
+	for (let child of children) {
+		let cd = describe_js_gobj(child, false);
+		if (cd) d.children.push(cd);
+	}
+	return d;
+}
+/******************************
+*      Readouts
+******************************/
+/************************************************************
+*  The i18n key of a role. Two of the five roles are not the
+*  word the reader wants ("pure" and "volatil" alone say
+*  nothing), so the map is explicit.
+************************************************************/
+function role_i18n_key(role) {
+	switch (role) {
+		case "yuno": return "yuno";
+		case "service": return "service";
+		case "volatil": return "volatil child";
+		case "pure": return "pure child";
+		default: return "child";
+	}
+}
+/************************************************************
+*  The marks a node carries besides its role: what the reader
+*  would otherwise have to open the popover to learn.
+*
+*  Returns i18n KEYS, in a fixed order, so the card and the
+*  popover cannot disagree about what a node is.
+************************************************************/
+function node_badge_keys(d) {
+	let badges = [];
+	if (!d) return badges;
+	let role = node_role(d);
+	if (role !== "child") badges.push(role_i18n_key(role));
+	if (d.disabled) badges.push("disabled");
+	if (d.bottom_gobj) badges.push("bottom");
+	if (d.commands) badges.push("commands");
+	return badges;
+}
+/************************************************************
+*  The vocabulary of this view, translated.
+*
+*  Written as literal t("...") calls and not as t(key): a key
+*  reached through a variable is invisible to the locale
+*  validator, which is how a fixed vocabulary ships in one
+*  language and never changes it.
+************************************************************/
+function node_labels(t) {
+	if (typeof t !== "function") t = (k) => k;
+	return {
+		role: {
+			"yuno": t("yuno"),
+			"service": t("service"),
+			"volatil child": t("volatil child"),
+			"pure child": t("pure child"),
+			"child": t("child")
+		},
+		status: {
+			"playing": t("playing"),
+			"running (paused)": t("running (paused)"),
+			"stopped": t("stopped")
+		},
+		status_short: {
+			"playing": t("playing"),
+			"running": t("running"),
+			"stopped": t("stopped")
+		},
+		badge: {
+			"yuno": t("yuno"),
+			"service": t("service"),
+			"volatil child": t("volatil child"),
+			"pure child": t("pure child"),
+			"disabled": t("disabled"),
+			"bottom": t("bottom"),
+			"commands": t("commands")
+		},
+		field: {
+			gclass: t("gclass"),
+			name: t("name"),
+			full_name: t("full name"),
+			role: t("role"),
+			status: t("status"),
+			state: t("state"),
+			disabled: t("disabled"),
+			parent: t("parent"),
+			bottom_gobj: t("bottom gobj"),
+			commands: t("commands"),
+			traces: t("traces"),
+			flags: t("flags"),
+			children: t("children"),
+			yes: t("yes"),
+			collapsed: t("(collapsed)")
+		}
+	};
+}
+/************************************************************
+*  The rows of the popover: [label, value], both translated.
+*
+*  `t` is the app's translator -- the library has none of its
+*  own. Values that are a fixed vocabulary (the role, the
+*  status, yes) go through it too; free text does not.
+************************************************************/
+function node_info_rows(d, t) {
+	let rows = [];
+	if (!d) return rows;
+	let L = node_labels(t);
+	let f = L.field;
+	rows.push([f.gclass, d.gclass || "—"]);
+	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 || "—"]);
+	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]);
+	if (d.commands) rows.push([f.commands, f.yes]);
+	if (Array.isArray(d.gobj_trace_level) && d.gobj_trace_level.length > 0) rows.push([f.traces, d.gobj_trace_level.join(", ")]);
+	if (Array.isArray(d.gobj_flags) && d.gobj_flags.length > 0) rows.push([f.flags, d.gobj_flags.join(", ")]);
+	let kids = Array.isArray(d.children) ? d.children.length : 0;
+	if (kids > 0) rows.push([f.children, d.is_collapsed ? kids + " " + f.collapsed : String(kids)]);
+	return rows;
+}
+//#endregion
+//#region src/gclass_describe.js
+/***********************************************************************
+*          gclass_describe.js
+*
+*          A gclass, as plain JSON, in the shape the BACKEND answers.
+*
+*          There is no gclass viewer in the framework: the C kernel
+*          answers `view-gclass` with `gclass2json()`
+*          (`kernel/c/gobj-c/src/gobj.c`) and nothing draws it. This
+*          module builds the same document for a gclass of the BROWSER
+*          yuno, out of the gobj-js registry, so one viewer can show a
+*          gclass of either side:
+*
+*              {id, gcflag, attrs, commands, gclass_methods,
+*               internal_methods, FSM: {events, states}}
+*
+*          Two keys the backend does not carry are added at the end,
+*          because the browser can answer them for free and the reader
+*          asks them first: `instances` and `trace_levels`.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*              Bit tables
+***************************************************************/
+var DATA_TYPE_NAMES = {
+	[data_type_t.DTP_STRING]: "DTP_STRING",
+	[data_type_t.DTP_BOOLEAN]: "DTP_BOOLEAN",
+	[data_type_t.DTP_INTEGER]: "DTP_INTEGER",
+	[data_type_t.DTP_REAL]: "DTP_REAL",
+	[data_type_t.DTP_LIST]: "DTP_LIST",
+	[data_type_t.DTP_DICT]: "DTP_DICT",
+	[data_type_t.DTP_JSON]: "DTP_JSON",
+	[data_type_t.DTP_POINTER]: "DTP_POINTER"
+};
+/************************************************************
+*  The names of the bits set in `bits`, in table order.
+************************************************************/
+function bits2names(table, bits) {
+	let names = [];
+	let value = Number(bits) || 0;
+	for (let name of Object.keys(table)) if ((value & table[name]) !== 0) names.push(name);
+	return names;
+}
+/************************************************************
+*  The name of a data type. An unknown type is reported as
+*  the number it is -- silently drawing "DTP_STRING" for a
+*  type nobody registered would be worse than saying "17".
+************************************************************/
+function data_type_name(type) {
+	return DATA_TYPE_NAMES[type] || String(type);
+}
+/************************************************************
+*  One SDATA descriptor -> one row.
+*
+*  A DTP_POINTER default is a live object (a DOM node, a
+*  gobj): it is never printed, only named, because a viewer
+*  that serializes it would either throw or dump the page.
+************************************************************/
+function sdatadesc2json(it) {
+	let row = {
+		id: it.name,
+		type: data_type_name(it.type),
+		flag: bits2names(sdata_flag_t, it.flag),
+		description: it.description || ""
+	};
+	if (it.type === data_type_t.DTP_POINTER) row.default_value = it.default_value === null || it.default_value === void 0 ? null : "<pointer>";
+	else row.default_value = it.default_value === void 0 ? null : it.default_value;
+	return row;
+}
+/************************************************************
+*  The attrs table of a gclass.
+************************************************************/
+function attrs2json(attrs_table) {
+	let rows = [];
+	if (!Array.isArray(attrs_table)) return rows;
+	for (let it of attrs_table) {
+		if (!it || !it.name) continue;
+		rows.push(sdatadesc2json(it));
+	}
+	return rows;
+}
+/************************************************************
+*  The command table of a gclass, with the parameters of
+*  each command (the `schema` slot of SDATACM).
+************************************************************/
+function commands2json(command_table) {
+	let rows = [];
+	if (!Array.isArray(command_table)) return rows;
+	for (let it of command_table) {
+		if (!it || !it.name) continue;
+		let row = {
+			id: it.name,
+			alias: it.alias || [],
+			description: it.description || ""
+		};
+		if (Array.isArray(it.schema)) row.parameters = attrs2json(it.schema);
+		rows.push(row);
+	}
+	return rows;
+}
+/************************************************************
+*  The methods the gclass actually implements. A table of
+*  every possible one, mostly empty, tells the reader nothing.
+************************************************************/
+function methods2json(mt) {
+	let names = [];
+	if (!mt || typeof mt !== "object") return names;
+	for (let key of Object.keys(mt)) if (typeof mt[key] === "function") names.push(key);
+	return names;
+}
+/************************************************************
+*  The FSM: the events the gclass declares, and what each
+*  state does with them.
+************************************************************/
+function fsm2json(gclass) {
+	let events = [];
+	for (let ev of gclass.dl_events || []) events.push({
+		event_name: ev.event_name,
+		event_flag: bits2names(event_flag_t, ev.event_flag)
+	});
+	let states = {};
+	for (let st of gclass.dl_states || []) {
+		let actions = [];
+		for (let ac of st.dl_actions || []) actions.push({
+			event_name: ac.event_name,
+			action: ac.action ? ac.action.name || "action" : "",
+			next_state: ac.next_state || ""
+		});
+		states[st.state_name] = actions;
+	}
+	return {
+		events,
+		states
+	};
+}
+/************************************************************
+*  The description of a gclass REGISTERED IN THIS BROWSER YUNO,
+*  or null when the registry does not know that name.
+*
+*  Null is the answer for a gclass of a BACKEND yuno too: the
+*  browser registry carries the GUI gclasses and nothing else,
+*  so the caller asks the backend `view-gclass` for those and
+*  shows whatever it answers -- this same shape.
+************************************************************/
+function describe_local_gclass(gclass_name) {
+	if (!gclass_name) return null;
+	let gclass = gclass_find_by_name(gclass_name, false);
+	if (!gclass) return null;
+	return {
+		id: gclass.gclass_name,
+		gcflag: bits2names(gclass_flag_t, gclass.gclass_flag),
+		attrs: attrs2json(gclass.attrs_table),
+		commands: commands2json(gclass.command_table),
+		gclass_methods: methods2json(gclass.gmt),
+		internal_methods: methods2json(gclass.lmt),
+		FSM: fsm2json(gclass),
+		instances: Number(gclass.instances) || 0,
+		trace_levels: Array.isArray(gclass.s_user_trace_level) ? gclass.s_user_trace_level : []
+	};
+}
+//#endregion
+//#region src/yui_gclass_view.js
+/***********************************************************************
+*          yui_gclass_view.js
+*
+*          The gclass viewer: what a GClass IS, in a window.
+*
+*          The framework had no such viewer. The C kernel answers
+*          `view-gclass` with a full description (attrs, commands,
+*          methods, FSM) and the only reader of it was a terminal.
+*          This one draws that same document with C_YUI_JSON, so the
+*          FSM of a gclass is a graph and its attrs table is a tree,
+*          and it takes the document from either side:
+*
+*            - a gclass of the browser yuno  -> describe_local_gclass()
+*            - a gclass of a backend yuno    -> `opts.description`, the
+*                                               answer of `view-gclass`
+*
+*          One window at a time per host: the caller keeps the handle
+*          and closes it, the way the treedb graph keeps its raw-JSON
+*          viewer.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  Can this app show a gclass at all?
+*
+*  The viewer is C_YUI_JSON, and an app registers only the
+*  gclasses it mounts. The caller asks this BEFORE drawing a
+*  button, so an app that does not carry the viewer shows no
+*  control instead of a control that fails.
+************************************************************/
+function gclass_view_available() {
+	return !!gclass_find_by_name("C_YUI_JSON", false);
+}
+/************************************************************
+*  Open the viewer on `gclass_name`.
+*
+*  opts:
+*      description   the document to draw. Omitted, it is
+*                    built from the browser registry.
+*      title_prefix  what the window says before the gclass
+*                    name (the yuno it belongs to).
+*      on_close      called when the reader dismisses it.
+*
+*  Returns a handle for close_gclass_view(), or null (and a
+*  logged reason) when there is nothing to show.
+************************************************************/
+function open_gclass_view(host, gclass_name, opts) {
+	opts = opts || {};
+	if (!host || !gclass_name) {
+		log_error(`yui_gclass_view: open without a host or a gclass name`);
+		return null;
+	}
+	let shell = yui_shell_of(host);
+	if (!gclass_view_available()) {
+		log_error(`${gobj_short_name(host)}: C_YUI_JSON not registered by the app`);
+		yui_shell_show_error(shell, "gclass viewer unavailable", { t });
+		return null;
+	}
+	let description = opts.description || describe_local_gclass(gclass_name);
+	if (!description) {
+		log_warning(`${gobj_short_name(host)}: gclass not registered here: ${gclass_name}`);
+		yui_shell_show_error(shell, "gclass not registered in this yuno", { t });
+		return null;
+	}
+	let jv = gobj_create_service(`gclass-view-${clean_name(gobj_name(host))}`, "C_YUI_JSON", {
+		json_data: description,
+		subscriber: null
+	}, host);
+	if (!jv) {
+		log_error(`${gobj_short_name(host)}: cannot create the gclass viewer`);
+		return null;
+	}
+	let handle = {
+		json_gobj: jv,
+		win: null,
+		modal: null
+	};
+	let $box = gobj_read_pointer_attr(jv, "$container");
+	let on_close = () => {
+		if (typeof opts.on_close === "function") opts.on_close();
+	};
+	if (is_mobile$3()) {
+		if (!shell) {
+			log_error(`${gobj_short_name(host)}: no shell, cannot open the gclass sheet`);
+			close_gclass_view(handle);
+			return null;
+		}
+		handle.modal = yui_shell_show_modal(shell, $box, {
+			dialog: true,
+			logical_class: "GCLASS_VIEW_SHEET",
+			title_prefix: opts.title_prefix || "",
+			title: gclass_name,
+			t,
+			on_close
+		});
+		gobj_start(jv);
+		return handle;
+	}
+	let $win_parent = window_layer_of(host, shell);
+	handle.win = gobj_create_service(`gclass-win-${clean_name(gobj_name(host))}`, "C_YUI_WINDOW", {
+		$parent: $win_parent,
+		subscriber: null,
+		modal: false,
+		showMax: true,
+		showFooter: false,
+		resizable: true,
+		center: true,
+		auto_save_size_and_position: true,
+		width: 720,
+		height: 640,
+		logical_class: "GCLASS_VIEW_WINDOW",
+		title_prefix: opts.title_prefix || "",
+		title: gclass_name,
+		icon: "yi-code",
+		body: $box,
+		manager: gobj_find_service("__window_manager__", false) || null,
+		on_close
+	}, host);
+	if (!handle.win) {
+		log_error(`${gobj_short_name(host)}: cannot create the gclass window`);
+		close_gclass_view(handle);
+		return null;
+	}
+	gobj_start(handle.win);
+	gobj_start(jv);
+	return handle;
+}
+/************************************************************
+*  Close whatever open_gclass_view() opened. Safe on null and
+*  on a handle whose window the reader already dismissed.
+************************************************************/
+function close_gclass_view(handle) {
+	if (!handle) return;
+	let jv = handle.json_gobj;
+	let win = handle.win;
+	let modal = handle.modal;
+	handle.json_gobj = null;
+	handle.win = null;
+	handle.modal = null;
+	if (win && is_gobj(win)) try {
+		if (gobj_is_running(win)) gobj_stop(win);
+		gobj_destroy(win);
+	} catch (e) {
+		log_warning(`yui_gclass_view: window already gone: ${e}`);
+	}
+	if (modal && typeof modal.close === "function") try {
+		modal.close();
+	} catch (e) {
+		log_warning(`yui_gclass_view: modal already gone: ${e}`);
+	}
+	if (jv && is_gobj(jv)) try {
+		if (gobj_is_running(jv)) gobj_stop(jv);
+		gobj_destroy(jv);
+	} catch (e) {
+		log_warning(`yui_gclass_view: viewer already gone: ${e}`);
+	}
+}
+/************************************************************
+*  Where to mount the window: the SAME element the caller's
+*  own window hangs from.
+*
+*  Not a preference -- a requirement. z-index only orders
+*  siblings of one stacking context, so a viewer opened from a
+*  window on `body` and mounted in the shell's popup layer
+*  lands BEHIND its opener whatever number it is given, and
+*  the button reads as one that did nothing.
+************************************************************/
+function window_layer_of(host, shell) {
+	let $c = gobj_read_pointer_attr(host, "$container");
+	if ($c && typeof $c.closest === "function") {
+		let $win = $c.closest(".C_YUI_WINDOW");
+		if ($win && $win.parentNode) return $win.parentNode;
+	}
+	return typeof document !== "undefined" && document.getElementById("top-layer") || shell && yui_shell_popup_layer(shell) || null;
+}
+/************************************************************
+*  A window is not a sheet: below this width there is no room
+*  for a title bar the reader can drag.
+************************************************************/
+function is_mobile$3() {
+	return typeof window !== "undefined" && window.innerWidth <= 768;
+}
+//#endregion
 //#region src/c_yui_gobj_tree_js.js
 /***********************************************************************
 *          c_yui_gobj_tree_js.js
@@ -13497,6 +14078,9 @@ var PRIVATE_DATA$9 = {
 	$popover: null,
 	$popover_title: null,
 	$popover_body: null,
+	$popover_gclass: null,
+	popover_node: null,
+	gclass_view: null,
 	node_by_id: null,
 	collapse_state: null,
 	resize_observer: null,
@@ -13511,34 +14095,92 @@ var PRIVATE_DATA$9 = {
 var __gclass__$9 = null;
 var __layout_registered__ = false;
 /***************************************************************
-*  Node colors by role
+*  Node colours by role.
+*
+*  Saturated hues, one family apart from the next, and the same
+*  five everywhere the reader meets a gobj. `stroke` draws the
+*  border and the edge; `accent` is the brighter sibling used
+*  for the bar down the left of the card and the toggle badge,
+*  so a card carries its colour twice at two intensities and is
+*  readable at the zoom where the text is not.
 ***************************************************************/
 var ROLE_COLORS = {
 	yuno: {
-		fill: "#E0F2FE",
-		stroke: "#075985"
+		stroke: "#0284c7",
+		accent: "#38bdf8"
 	},
 	service: {
-		fill: "#DCFCE7",
-		stroke: "#166534"
+		stroke: "#059669",
+		accent: "#34d399"
 	},
 	pure: {
-		fill: "#FEF9C3",
-		stroke: "#854D0E"
+		stroke: "#d97706",
+		accent: "#fbbf24"
 	},
 	volatil: {
-		fill: "#FCE7F3",
-		stroke: "#9D174D"
+		stroke: "#db2777",
+		accent: "#f472b6"
 	},
-	default: {
-		fill: "#F3F4F6",
-		stroke: "#374151"
+	child: {
+		stroke: "#7c3aed",
+		accent: "#a78bfa"
 	}
 };
-var STATE_COLORS = {
-	running_playing: "#15803D",
-	running: "#B45309",
-	stopped: "#B91C1C"
+/***************************************************************
+*  Status colours: what the gobj is DOING.
+*
+*  A pill and not a word: three states of one gobj are told
+*  apart across a whole tree by colour long before anybody
+*  reads them, and the dot alone never said which was which.
+*  `disabled` is a fourth entry and not a status -- a disabled
+*  gobj is still stopped or running -- but it takes the pill,
+*  because it is the fact that explains the other one.
+***************************************************************/
+var STATUS_COLORS = {
+	light: {
+		playing: {
+			fg: "#065f46",
+			bg: "#a7f3d0",
+			dot: "#10b981"
+		},
+		running: {
+			fg: "#92400e",
+			bg: "#fde68a",
+			dot: "#f59e0b"
+		},
+		stopped: {
+			fg: "#991b1b",
+			bg: "#fecaca",
+			dot: "#ef4444"
+		},
+		disabled: {
+			fg: "#334155",
+			bg: "#e2e8f0",
+			dot: "#94a3b8"
+		}
+	},
+	dark: {
+		playing: {
+			fg: "#6ee7b7",
+			bg: "rgba(16,185,129,0.28)",
+			dot: "#34d399"
+		},
+		running: {
+			fg: "#fcd34d",
+			bg: "rgba(245,158,11,0.28)",
+			dot: "#fbbf24"
+		},
+		stopped: {
+			fg: "#fca5a5",
+			bg: "rgba(239,68,68,0.28)",
+			dot: "#f87171"
+		},
+		disabled: {
+			fg: "#cbd5e1",
+			bg: "rgba(148,163,184,0.28)",
+			dot: "#94a3b8"
+		}
+	}
 };
 /***************************************************************
 *  Fixed node sizes per role (px).
@@ -13548,16 +14190,16 @@ var STATE_COLORS = {
 var NODE_SIZES = {
 	full: {
 		yuno: {
-			w: 240,
-			h: 72
+			w: 260,
+			h: 96
 		},
 		service: {
-			w: 210,
-			h: 68
+			w: 232,
+			h: 92
 		},
 		child: {
-			w: 160,
-			h: 60
+			w: 196,
+			h: 86
 		}
 	},
 	compact: {
@@ -13580,27 +14222,47 @@ var NODE_SIZES = {
 ***************************************************************/
 var GT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 /***************************************************************
-*  Soft, theme-aware card palette derived from the role colour
-*  (same visual language as the treedb graph cards): light tint
-*  fill + role-colour border, brightened on dark.
+*  Theme-aware card palette derived from the role colour.
+*
+*  Brighter than a tint: at 9% of the role colour every card
+*  was the same near-white rectangle and the tree read as a
+*  wireframe. The fill carries enough of the hue to be named
+*  from across the canvas, and the border and the accent bar
+*  carry the rest.
 ***************************************************************/
-function role_card_style(stroke, dark) {
+function role_card_style(colors, dark) {
+	let stroke = colors.stroke;
+	let accent = colors.accent;
 	return {
-		bg: dark ? `color-mix(in srgb, ${stroke} 30%, #2c3542)` : `color-mix(in srgb, ${stroke} 9%, #ffffff)`,
-		border: dark ? `color-mix(in srgb, ${stroke} 85%, #ffffff)` : stroke,
-		title: dark ? "#e8eaed" : "#0f172a",
-		sub: dark ? "#9aa4b2" : "#64748b",
-		tagbg: dark ? `color-mix(in srgb, ${stroke} 42%, #2c3542)` : `color-mix(in srgb, ${stroke} 14%, #ffffff)`,
-		shadow: dark ? "0 1px 3px rgba(0,0,0,0.45)" : "0 1px 3px rgba(15,23,42,0.12)"
+		bg: dark ? `color-mix(in srgb, ${stroke} 34%, #253044)` : `color-mix(in srgb, ${stroke} 13%, #ffffff)`,
+		border: dark ? accent : stroke,
+		accent: dark ? accent : stroke,
+		title: dark ? "#f1f5f9" : "#0f172a",
+		sub: dark ? "#a8b3c2" : "#475569",
+		tagbg: dark ? `color-mix(in srgb, ${stroke} 48%, #253044)` : `color-mix(in srgb, ${stroke} 20%, #ffffff)`,
+		tagfg: dark ? "#f1f5f9" : stroke,
+		shadow: dark ? "0 2px 6px rgba(0,0,0,0.50)" : "0 2px 5px rgba(15,23,42,0.16)"
 	};
 }
 /***************************************************************
-*  Map a gobj to its visual category.
+*  The pill colours of a node, for the theme in force.
 ***************************************************************/
-function get_node_category(target_gobj, is_root) {
-	if (is_root) return "yuno";
-	if (gobj_is_service(target_gobj)) return "service";
-	return "child";
+function status_card_style(d, dark) {
+	let table = dark ? STATUS_COLORS.dark : STATUS_COLORS.light;
+	if (d.disabled) return table.disabled;
+	return table[node_status(d)] || table.stopped;
+}
+/***************************************************************
+*  Map a node to its visual size class. Services are drawn
+*  bigger than plain children so the service boundary of the
+*  hierarchy is visible before anything is read.
+***************************************************************/
+function get_node_category(d) {
+	switch (node_role(d)) {
+		case "yuno": return "yuno";
+		case "service": return "service";
+		default: return "child";
+	}
 }
 /***************************************************************
 *  Layouts registry.
@@ -13713,13 +14375,21 @@ function mt_create$9(gobj) {
 ***************************************************************/
 function mt_start$9(gobj) {
 	restore_view_shape(gobj);
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	build_graph$2(gobj);
 	load_tree(gobj);
 }
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$9(gobj) {}
+function mt_stop$9(gobj) {
+	let priv = gobj.priv;
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	close_gclass_view(priv.gclass_view);
+	priv.gclass_view = null;
+}
 /***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
@@ -13745,6 +14415,8 @@ function mt_destroy$9(gobj) {
 	priv.$popover = null;
 	priv.$popover_title = null;
 	priv.$popover_body = null;
+	priv.$popover_gclass = null;
+	priv.popover_node = null;
 	priv.$layout_select = null;
 	priv.node_by_id = null;
 	priv.collapse_state = null;
@@ -13848,6 +14520,30 @@ function build_popover(gobj, $container) {
         text-overflow: ellipsis;
     `;
 	$header.appendChild($title);
+	if (gclass_view_available()) {
+		let $gclass = document.createElement("button");
+		$gclass.type = "button";
+		$gclass.className = "GOBJ_TREE_POPOVER_GCLASS button is-small";
+		$gclass.style.cssText = `
+            margin-right: 6px;
+            padding: 0 8px;
+            height: 22px;
+            font-size: 11px;
+            white-space: nowrap;
+        `;
+		$gclass.textContent = t("gclass");
+		$gclass.setAttribute("i18n", "gclass");
+		$gclass.title = t("view gclass");
+		$gclass.setAttribute("data-i18n-title", "view gclass");
+		$gclass.setAttribute("aria-label", t("view gclass"));
+		$gclass.setAttribute("data-i18n-aria-label", "view gclass");
+		$gclass.addEventListener("click", (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_OPEN_GCLASS", {}, gobj);
+		});
+		$header.appendChild($gclass);
+		priv.$popover_gclass = $gclass;
+	} else log_warning(`${gobj_short_name(gobj)}: no C_YUI_JSON registered, the gclass viewer is not offered`);
 	let $close = document.createElement("button");
 	$close.type = "button";
 	$close.className = "GOBJ_TREE_POPOVER_CLOSE";
@@ -13955,6 +14651,26 @@ function make_toolbar$1(gobj) {
 	return $toolbar;
 }
 /************************************************************
+*  The element G6 mounts its canvas in.
+*
+*  Read from THIS gclass's own $container, never with
+*  `document.getElementById()`: a view is not always in the
+*  document when it is started -- a host that builds the
+*  viewer and mounts it into a window afterwards starts it
+*  DETACHED -- and a global lookup answers null there. It cost
+*  a resize that never worked: the ResizeObserver below was
+*  simply never attached, silently, and the canvas kept the
+*  size it was born with for the life of the window.
+*
+*  Null only if the UI was never built; that is a bug, and it
+*  is logged where it matters rather than skipped.
+************************************************************/
+function canvas_mount(gobj) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return null;
+	return $container.querySelector("#" + gobj.priv.canvas_id);
+}
+/************************************************************
 *  Build a G6 graph instance
 ************************************************************/
 function build_graph$2(gobj) {
@@ -13998,8 +14714,9 @@ function build_graph$2(gobj) {
 		hide_popover(gobj);
 	});
 	if (typeof ResizeObserver !== "undefined") {
-		let $canvas = document.getElementById(priv.canvas_id);
-		if ($canvas) {
+		let $canvas = canvas_mount(gobj);
+		if (!$canvas) log_error(`${gobj_short_name(gobj)}: no canvas mount, the graph will never resize`);
+		else {
 			let ro = new ResizeObserver(() => {
 				if (priv._resize_raf) cancelAnimationFrame(priv._resize_raf);
 				priv._resize_raf = requestAnimationFrame(() => {
@@ -14032,22 +14749,20 @@ function apply_layout(gobj) {
 	});
 }
 /************************************************************
-*  Resolve role colors for a gobj
-************************************************************/
-function get_role_colors(target_gobj, is_root) {
-	if (is_root) return ROLE_COLORS.yuno;
-	if (gobj_is_volatil(target_gobj)) return ROLE_COLORS.volatil;
-	if (gobj_is_service(target_gobj)) return ROLE_COLORS.service;
-	if (gobj_is_pure_child(target_gobj)) return ROLE_COLORS.pure;
-	return ROLE_COLORS.default;
-}
-/************************************************************
-*  Resolve state color
+*  The role colours of a node.
+*
+*  Note the ORDER: volatil before service. A volatil gobj that
+*  is also a service is drawn volatil, because that is the fact
+*  that decides how long it lives.
 ************************************************************/
-function get_state_color(target_gobj) {
-	if (!gobj_is_running(target_gobj)) return STATE_COLORS.stopped;
-	if (gobj_is_playing(target_gobj)) return STATE_COLORS.running_playing;
-	return STATE_COLORS.running;
+function get_role_colors(d) {
+	switch (node_role(d)) {
+		case "yuno": return ROLE_COLORS.yuno;
+		case "volatil": return ROLE_COLORS.volatil;
+		case "service": return ROLE_COLORS.service;
+		case "pure": return ROLE_COLORS.pure;
+		default: return ROLE_COLORS.child;
+	}
 }
 /************************************************************
 *  Generate a unique node id
@@ -14079,72 +14794,135 @@ function is_node_collapsed(gobj, full_name, num_children) {
 ************************************************************/
 function render_toggle_html(node_id, collapsed, num_children, cs) {
 	let label = collapsed ? "+" + num_children : "−";
+	let title = collapsed ? t("expand children") : t("collapse children");
 	return `<span
         data-gobj-toggle="true"
         data-node-id="${node_id}"
-        title="${collapsed ? "Expand children" : "Collapse children"}"
+        title="${escapeHtml(title)}"
         style="
             flex: 0 0 auto;
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            min-width: 22px;
-            height: 16px;
-            padding: 0 5px;
+            min-width: 24px;
+            height: 18px;
+            padding: 0 6px;
             margin-left: 4px;
-            background: ${cs.tagbg};
-            color: ${cs.border};
-            border: 1px solid ${cs.border};
-            border-radius: 6px;
+            background: ${cs.accent};
+            color: #ffffff;
+            border: 1px solid ${cs.accent};
+            border-radius: 9px;
             font-size: 10px;
-            font-weight: 600;
+            font-weight: 700;
             line-height: 1;
             cursor: pointer;
             user-select: none;
         ">${label}</span>`;
 }
 /************************************************************
-*  Recursively build nodes and edges from the gobj tree
+*  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.
 ************************************************************/
-function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, compact) {
+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);
+	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>`;
+	return `<span title="${escapeHtml(full)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 1px 7px 1px 5px;
+        background: ${ss.bg};
+        color: ${ss.fg};
+        border-radius: 9px;
+        font-size: 10px;
+        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>`;
+}
+/************************************************************
+*  HTML for the badges: what the gobj IS, besides its colour.
+************************************************************/
+function render_badges_html(d, cs, labels) {
+	let html = "";
+	for (let key of node_badge_keys(d)) {
+		let label = labels.badge[key] || key;
+		html += `<span style="
+            font-size: 10px;
+            font-weight: 600;
+            padding: 0 6px;
+            margin-right: 4px;
+            background: ${cs.tagbg};
+            color: ${cs.tagfg};
+            border: 1px solid ${cs.accent};
+            border-radius: 9px;
+            white-space: nowrap;
+        ">${escapeHtml(label)}</span>`;
+	}
+	return html;
+}
+/************************************************************
+*  Recursively build nodes and edges from a NODE DESCRIPTOR
+*  tree (gobj_tree_model.js), never from gobjs: the same
+*  builder draws the browser yuno and a backend one.
+*
+*  The descriptor is also what the popover reads, so the view
+*  fields it needs are written onto it here (`full_name`,
+*  `short_name`, `num_children`, `is_collapsed`,
+*  `direct_children`) instead of copied into a second object
+*  that can then disagree with the first.
+************************************************************/
+function build_gobj_nodes(gobj, d, nodes, edges, parent_id, compact, labels) {
 	let priv = gobj.priv;
 	let node_id = gen_node_id(gobj);
-	let gclass_name = gobj_gclass_name(target_gobj) || "";
-	let instance_name = gobj_name(target_gobj) || "";
-	let state = gobj_current_state(target_gobj) || "";
-	let full_name = gobj_full_name(target_gobj);
-	let colors = get_role_colors(target_gobj, is_root);
 	let dark = yui_is_dark();
-	let cs = role_card_style(colors.stroke, dark);
-	let state_color = get_state_color(target_gobj);
-	let running = gobj_is_running(target_gobj);
-	let playing = gobj_is_playing(target_gobj);
-	let status_text = !running ? "stopped" : playing ? "playing" : "running";
-	let category = get_node_category(target_gobj, is_root);
+	let colors = get_role_colors(d);
+	let cs = role_card_style(colors, dark);
+	let ss = status_card_style(d, dark);
+	let category = get_node_category(d);
 	let size = NODE_SIZES[compact ? "compact" : "full"][category];
 	let width = size.w;
 	let height = size.h;
 	let border_width = category === "yuno" || category === "service" ? 2 : 1;
-	let children = target_gobj.dl_children || [];
+	let border_style = d.disabled ? "dashed" : "solid";
+	let children = d.children || [];
 	let num_children = children.length;
 	let has_children = num_children > 0;
-	let collapsed = has_children && is_node_collapsed(gobj, full_name, num_children);
+	let collapsed = has_children && is_node_collapsed(gobj, d.fullname, num_children);
 	let direct_children = [];
 	for (let child of children) direct_children.push({
-		full_name: gobj_full_name(child),
-		has_grandchildren: (child.dl_children || []).length > 0
+		full_name: child.fullname,
+		has_grandchildren: (child.children || []).length > 0
 	});
+	d.full_name = d.fullname;
+	d.short_name = d.shortname;
+	d.num_children = num_children;
+	d.is_collapsed = collapsed;
+	d.direct_children = direct_children;
+	d.node_id = node_id;
 	let toggle_html = has_children ? render_toggle_html(node_id, collapsed, num_children, cs) : "";
+	let card_title = d.gclass + (d.name ? "^" + d.name : "");
 	let node_html;
 	if (compact) {
-		let compact_label = escapeHtml(instance_name ? gclass_name + "^" + instance_name : gclass_name);
+		let compact_label = escapeHtml(card_title);
 		node_html = `
-<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(full_name)}" style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(d.fullname)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
-    border: ${border_width}px solid ${cs.border};
-    border-left: 5px solid ${cs.border};
+    border: ${border_width}px ${border_style} ${cs.border};
+    border-left: 6px solid ${cs.accent};
     border-radius: 7px;
     box-shadow: ${cs.shadow};
     font-family: ${GT_FONT};
@@ -14153,34 +14931,24 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
     padding: 0 8px;
     box-sizing: border-box;
     overflow: hidden;
+    opacity: ${d.disabled ? "0.72" : "1"};
     cursor: pointer;
 " title="${compact_label}">
     <span style="flex:1 1 auto; min-width:0; font-size:11px; font-weight:600; color:${cs.title}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${compact_label}</span>
-    <span title="${escapeHtml(state || status_text)}" style="
-        flex: 0 0 auto;
-        width: 8px; height: 8px; border-radius: 50%;
-        background: ${state_color}; margin-left: 6px;
-    "></span>
+    ${render_status_html(d, ss, labels, false)}
     ${toggle_html}
 </div>`;
 	} else {
-		let header_label = escapeHtml(gclass_name);
-		let name_label = escapeHtml(instance_name);
-		let state_label = escapeHtml(state);
-		let badges = [];
-		if (is_root) badges.push("yuno");
-		else {
-			if (gobj_is_service(target_gobj)) badges.push("service");
-			if (gobj_is_pure_child(target_gobj)) badges.push("pure");
-			if (gobj_is_volatil(target_gobj)) badges.push("volatil");
-		}
-		let badges_html = badges.map((b) => `<span style="font-size:10px; padding:0 5px; margin-right:4px; background:${cs.tagbg}; color:${cs.border}; border:1px solid ${cs.border}; border-radius:6px; white-space:nowrap;">${b}</span>`).join("");
+		let header_label = escapeHtml(d.gclass);
+		let name_label = escapeHtml(d.name);
+		let state_label = escapeHtml(d.state);
 		node_html = `
-<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(full_name)}" style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(d.fullname)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
-    border: ${border_width}px solid ${cs.border};
+    border: ${border_width}px ${border_style} ${cs.border};
+    border-left: 6px solid ${cs.accent};
     border-radius: 9px;
     box-shadow: ${cs.shadow};
     overflow: hidden;
@@ -14189,48 +14957,29 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 5px 9px;
-    gap: 1px;
+    padding: 6px 9px;
+    gap: 2px;
+    opacity: ${d.disabled ? "0.72" : "1"};
     cursor: pointer;
-" title="${escapeHtml(gclass_name + (instance_name ? "^" + instance_name : ""))}">
+" title="${escapeHtml(card_title)}">
     <div style="flex:0 0 auto; display:flex; align-items:center; gap:6px; overflow:hidden;">
-        <span style="flex:1 1 auto; min-width:0; font-size:12px; line-height:1.25; font-weight:600; color:${cs.title}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${header_label}</span>
+        <span style="flex:1 1 auto; min-width:0; font-size:12px; line-height:1.25; font-weight:700; color:${cs.title}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${header_label}</span>
         ${toggle_html}
     </div>
     <div style="flex:0 0 auto; font-size:12px; line-height:1.25; color:${cs.sub}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${name_label || "&nbsp;"}</div>
     <div style="flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:6px; overflow:hidden;">
-        <span style="flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${badges_html}</span>
-        <span style="flex:0 0 auto; display:flex; align-items:center; gap:4px; color:${state_color}; font-weight:600; font-size:11px; white-space:nowrap;">
-            <span style="width:7px; height:7px; border-radius:50%; background:${state_color};"></span>${state_label || status_text}
-        </span>
+        <span style="flex:1 1 auto; min-width:0; font-size:10px; line-height:1.25; color:${cs.sub}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${state_label || "&nbsp;"}</span>
+        ${render_status_html(d, ss, labels, true)}
     </div>
+    <div style="flex:0 0 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">${render_badges_html(d, cs, labels)}</div>
 </div>`;
 	}
-	let parent_gobj = gobj_parent(target_gobj);
-	let node_data = {
-		gclass: gclass_name,
-		name: instance_name,
-		short_name: gobj_short_name(target_gobj),
-		full_name,
-		parent_short_name: parent_gobj ? gobj_short_name(parent_gobj) : "",
-		state,
-		category,
-		is_yuno: is_root,
-		is_service: gobj_is_service(target_gobj),
-		is_pure_child: gobj_is_pure_child(target_gobj),
-		is_volatil: gobj_is_volatil(target_gobj),
-		is_running: running,
-		is_playing: playing,
-		num_children,
-		is_collapsed: collapsed,
-		direct_children
-	};
 	if (!priv.node_by_id) priv.node_by_id = {};
-	priv.node_by_id[node_id] = node_data;
+	priv.node_by_id[node_id] = d;
 	let node = {
 		id: node_id,
 		type: "html",
-		data: node_data,
+		data: d,
 		style: {
 			innerHTML: node_html,
 			size: [width, height],
@@ -14243,11 +14992,11 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
 		source: parent_id,
 		target: node_id,
 		style: {
-			stroke: colors.stroke,
-			lineWidth: 1
+			stroke: colors.accent,
+			lineWidth: 1.4
 		}
 	});
-	if (!collapsed) for (let child of children) build_gobj_nodes(gobj, child, nodes, edges, node_id, false, compact);
+	if (!collapsed) for (let child of children) build_gobj_nodes(gobj, child, nodes, edges, node_id, compact, labels);
 	return node_id;
 }
 /************************************************************
@@ -14264,9 +15013,13 @@ function load_tree(gobj) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (!graph) return;
-	let yuno = gobj_yuno();
-	if (!yuno) return;
+	let root = describe_js_gobj(gobj_yuno(), true);
+	if (!root) {
+		log_error(`${gobj_short_name(gobj)}: no yuno to draw`);
+		return;
+	}
 	let layout_cfg = get_layout_cfg(gobj_read_str_attr(gobj, "layout"));
+	let labels = node_labels(t);
 	let anchor = priv.pending_anchor || null;
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_anchor = null;
@@ -14275,7 +15028,7 @@ function load_tree(gobj) {
 	priv.node_by_id = {};
 	let nodes = [];
 	let edges = [];
-	build_gobj_nodes(gobj, yuno, nodes, edges, null, true, layout_cfg.compact);
+	build_gobj_nodes(gobj, root, nodes, edges, null, layout_cfg.compact, labels);
 	if (nodes.length > 0) {
 		let root_id = nodes[0].id;
 		graph.setData({
@@ -14376,46 +15129,17 @@ function refresh_tree(gobj, opts) {
 	}
 }
 /************************************************************
-*  Rows to show in the popover for a given node data.
-*
-*  This is the extension point: to surface a new attribute,
-*  collect it into `node_data` in build_gobj_nodes(), then
-*  append a `[label, value]` pair here.
-************************************************************/
-function get_node_info_rows(node_data) {
-	let rows = [];
-	rows.push([t("gclass"), node_data.gclass || "—"]);
-	rows.push([t("name"), node_data.name || "—"]);
-	if (node_data.full_name && node_data.full_name !== node_data.short_name) rows.push([t("full name"), node_data.full_name]);
-	let role;
-	if (node_data.is_yuno) role = "yuno";
-	else if (node_data.is_service) role = "service";
-	else if (node_data.is_volatil) role = "volatil child";
-	else if (node_data.is_pure_child) role = "pure child";
-	else role = "child";
-	rows.push([t("role"), role]);
-	let status;
-	if (!node_data.is_running) status = "stopped";
-	else if (node_data.is_playing) status = "running + playing";
-	else status = "running";
-	rows.push([t("status"), status]);
-	rows.push([t("state"), node_data.state || "—"]);
-	if (node_data.parent_short_name) rows.push([t("parent"), node_data.parent_short_name]);
-	if (typeof node_data.num_children === "number") {
-		let kids = node_data.num_children;
-		if (kids > 0 && node_data.is_collapsed) rows.push([t("children"), kids + " " + t("(collapsed)")]);
-		else if (kids > 0) rows.push([t("children"), String(kids)]);
-	}
-	return rows;
-}
-/************************************************************
 *  Render popover body from the info rows of a node.
+*
+*  The rows come from gobj_tree_model.js, so a node of the
+*  browser yuno and a node of a backend one are read out with
+*  the same words in the same order.
 ************************************************************/
 function render_popover_body(gobj, node_data) {
 	let $body = gobj.priv.$popover_body;
 	if (!$body) return;
-	$body.innerHTML = get_node_info_rows(node_data).map(([label, value]) => `
-        <div style="display:grid; grid-template-columns: 90px 1fr; column-gap:10px; padding: 2px 0;">
+	$body.innerHTML = node_info_rows(node_data, t).map(([label, value]) => `
+        <div style="display:grid; grid-template-columns: 96px 1fr; column-gap:10px; padding: 2px 0;">
             <span style="color:var(--bulma-text-weak, #6B7280); font-weight:500;">${escapeHtml(String(label))}</span>
             <span style="color:var(--bulma-text-strong, #1A1A1A); word-break:break-all;">${escapeHtml(String(value))}</span>
         </div>
@@ -14432,6 +15156,7 @@ function show_popover(gobj, node_data, client_x, client_y) {
 	let $title = priv.$popover_title;
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$popover || !$title || !$container) return;
+	priv.popover_node = node_data;
 	$title.textContent = node_data.short_name || node_data.gclass + (node_data.name ? "^" + node_data.name : "");
 	$title.title = $title.textContent;
 	render_popover_body(gobj, node_data);
@@ -14462,6 +15187,7 @@ function hide_popover(gobj) {
 	if (priv.$popover) priv.$popover.style.display = "none";
 	if (priv.$popover_body) priv.$popover_body.innerHTML = "";
 	if (priv.$popover_title) priv.$popover_title.textContent = "";
+	priv.popover_node = null;
 }
 /************************************************************
 *  Generic tree layout engine.
@@ -14988,12 +15714,11 @@ function ac_node_click$3(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_show$6(gobj, event, kw, src) {
-	let priv = gobj.priv;
-	let graph = priv.graph;
+	let graph = gobj.priv.graph;
 	save_view_state(gobj);
 	refresh_tree(gobj);
 	if (graph) {
-		let $canvas = document.getElementById(priv.canvas_id);
+		let $canvas = canvas_mount(gobj);
 		if ($canvas) {
 			let cw = $canvas.clientWidth;
 			let ch = $canvas.clientHeight;
@@ -15012,10 +15737,9 @@ function ac_show$6(gobj, event, kw, src) {
 *  No fitView: preserve the user's current pan/zoom.
 ************************************************************/
 function ac_resize$1(gobj, event, kw, src) {
-	let priv = gobj.priv;
-	let graph = priv.graph;
+	let graph = gobj.priv.graph;
 	if (graph) {
-		let $canvas = document.getElementById(priv.canvas_id);
+		let $canvas = canvas_mount(gobj);
 		if ($canvas) {
 			let cw = $canvas.clientWidth;
 			let ch = $canvas.clientHeight;
@@ -15031,6 +15755,68 @@ function ac_hide$5(gobj, event, kw, src) {
 	hide_popover(gobj);
 	return 0;
 }
+/************************************************************
+*  Open the gclass of the node the popover is showing.
+*
+*  One window at a time: opening a second gclass replaces the
+*  first rather than stacking windows nobody closes.
+************************************************************/
+function ac_open_gclass(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let node_data = priv.popover_node;
+	if (!node_data || !node_data.gclass) {
+		log_error(`${gobj_short_name(gobj)}: EV_OPEN_GCLASS with no node`);
+		return -1;
+	}
+	close_gclass_view(priv.gclass_view);
+	priv.gclass_view = null;
+	priv.gclass_view = open_gclass_view(gobj, node_data.gclass, {
+		title_prefix: gobj_yuno_name() || "",
+		on_close: () => {
+			if (gobj_is_destroying(gobj)) return;
+			gobj_send_event(gobj, "EV_GCLASS_CLOSED", {}, gobj);
+		}
+	});
+	return 0;
+}
+/************************************************************
+*  The reader dismissed the gclass window (its own ✕).
+*
+*  C_YUI_WINDOW.close_window() calls on_close and THEN destroys
+*  itself, so here we only drop our reference -- destroying it
+*  again would destroy it twice.
+************************************************************/
+function ac_gclass_closed(gobj, event, kw, src) {
+	gobj.priv.gclass_view = null;
+	return 0;
+}
+/************************************************************
+*  The gclass viewer asked for a subtree.
+*
+*  It cannot: the gclass description is a COMPLETE document,
+*  it carries no `__collapsed__` stub, so nothing in it is
+*  fetchable. The event is declared because the viewer is
+*  hosted as a child and subscribes its host to everything it
+*  publishes -- and it is logged, because arriving here means
+*  the document was not the one we built.
+************************************************************/
+function ac_gclass_expand_path(gobj, event, kw, src) {
+	log_error(`${gobj_short_name(gobj)}: EV_EXPAND_PATH on a complete document: ${kw && kw.path}`);
+	return -1;
+}
+/************************************************************
+*  The app switched language.
+*
+*  A rebuild, not a re-translation: the words live inside the
+*  innerHTML of G6 nodes, where refresh_language() cannot go.
+************************************************************/
+function ac_language_changed$3(gobj, event, kw, src) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if ($container) refresh_language($container, t);
+	hide_popover(gobj);
+	refresh_tree(gobj);
+	return 0;
+}
 /***************************
 *          FSM
 ***************************/
@@ -15064,7 +15850,11 @@ function create_gclass$9(gclass_name) {
 		["EV_CENTER_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
-		["EV_HIDE", 0]
+		["EV_HIDE", 0],
+		["EV_OPEN_GCLASS", 0],
+		["EV_GCLASS_CLOSED", 0],
+		["EV_EXPAND_PATH", 0],
+		["EV_LANGUAGE_CHANGED", 0]
 	], [["ST_IDLE", [
 		[
 			"EV_REFRESH",
@@ -15145,6 +15935,26 @@ function create_gclass$9(gclass_name) {
 			"EV_HIDE",
 			ac_hide$5,
 			null
+		],
+		[
+			"EV_OPEN_GCLASS",
+			ac_open_gclass,
+			null
+		],
+		[
+			"EV_GCLASS_CLOSED",
+			ac_gclass_closed,
+			null
+		],
+		[
+			"EV_EXPAND_PATH",
+			ac_gclass_expand_path,
+			null
+		],
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$3,
+			null
 		]
 	]]], gmt$9, 0, attrs_table$9, PRIVATE_DATA$9, 0, 0, 0, 0);
 	if (!__gclass__$9) return -1;
@@ -54590,7 +55400,6 @@ function open_json_viewer(gobj) {
 		return;
 	}
 	priv.json_gobj = jv;
-	gobj_start(jv);
 	let $box = gobj_read_pointer_attr(jv, "$container");
 	if (mobile) {
 		if (!shell) {
@@ -54609,6 +55418,7 @@ function open_json_viewer(gobj) {
 				gobj_send_event(gobj, "EV_JSON_CLOSED", {}, gobj);
 			}
 		});
+		gobj_start(jv);
 	} else {
 		let $win_parent = shell && yui_shell_popup_layer(shell) || typeof document !== "undefined" && document.getElementById("top-layer") || null;
 		priv.json_win = gobj_create_service(`treedb-jsonwin-${clean_name(gobj_name(gobj))}`, "C_YUI_WINDOW", {
@@ -54639,6 +55449,7 @@ function open_json_viewer(gobj) {
 			return;
 		}
 		gobj_start(priv.json_win);
+		gobj_start(jv);
 	}
 	request_print_tranger(gobj, "");
 }
@@ -54666,7 +55477,7 @@ function close_json_viewer(gobj) {
 		log_warning(`${gobj_short_name(gobj)}: already gone: ${e}`);
 	}
 	if (jv && is_gobj(jv)) try {
-		gobj_stop(jv);
+		if (gobj_is_running(jv)) gobj_stop(jv);
 		gobj_destroy(jv);
 	} catch (e) {
 		log_warning(`${gobj_short_name(gobj)}: already gone: ${e}`);