BA pane: group bars by P?L? key, render as inline chips

Bars in the BA sub-objects pane are now visually grouped by the
P\d+L\d+ fragment extracted from their opaque IDs (e.g. P1L1, P2L3).
Each group renders as a row of compact inline-block chips; groups are
separated by a line break. Fallback: if an ID contains no P?L?
pattern, trailing digits are stripped instead, yielding singleton rows.

The grouping is a display-only heuristic — no semantic meaning is
derived from the ID. Chips are clickable, highlight when focused.

static/components/PaneSubObjects.js

@@ -2,6 +2,14 @@ import { h } from 'vue';
 import { ObjectShort } from './ObjectShort.js';
 import { getKindGroups } from '../subobject-kinds.js';
 
+// Extract the P?L? fragment as a visual grouping key.
+// Falls back to stripping trailing digits if the pattern is absent,
+// which yields singleton groups — not a crash, just no visual grouping.
+function barGroupKey(id) {
+    const m = id.match(/P\d+L\d+/);
+    return m ? m[0] : id.replace(/\d+$/, '');
+}
+
 export const PaneSubObjects = {
     props: ['store', 'kind', 'onFocusFO'],
     setup(props) {
@@ -20,6 +28,33 @@ export const PaneSubObjects = {
 
             if (!items.length) return h('div', null, h('em', null, 'No sub-objects'));
 
+            if (props.kind === 'bar') {
+                // Group bars by shared P?L? key; render each group as a row of inline chips.
+                const barGroups = [];
+                const seen = new Map();
+                for (const item of items) {
+                    const key = barGroupKey(item.label);
+                    if (!seen.has(key)) {
+                        const g = { key, items: [] };
+                        barGroups.push(g);
+                        seen.set(key, g);
+                    }
+                    seen.get(key).items.push(item);
+                }
+
+                return h('div', { class: 'se-bar-groups' }, barGroups.map(g =>
+                    h('div', { key: g.key, class: 'se-bar-group' },
+                        g.items.map((item, idx) =>
+                            h('button', {
+                                key: idx,
+                                class: ['se-bar-chip', props.store.focusPath.includes(item.node) ? 'focused' : null],
+                                onClick: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
+                            }, item.label)
+                        )
+                    )
+                ));
+            }
+
             return h('div', null,
                 h('ul', { class: 'se-object-list' }, items.map((item, idx) =>
                     h(ObjectShort, {

static/style.css

@@ -308,6 +308,41 @@
     font-family: monospace;
 }
 
+/* Bar sub-objects: grouped by P?L? key, chips inline per group */
+.se-bar-groups {
+    padding: 0.2rem 0;
+}
+
+.se-bar-group {
+    padding: 0.15rem 0.1rem;
+    border-bottom: 1px solid #1e1e1e;
+    line-height: 1.8;
+}
+
+.se-bar-chip {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-family: monospace;
+    padding: 0.1rem 0.25rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: #777;
+    cursor: pointer;
+    margin: 1px;
+    line-height: 1.4;
+}
+
+.se-bar-chip:hover {
+    color: #ccc;
+    border-color: #555;
+}
+
+.se-bar-chip.focused {
+    background: #1a3a5a;
+    color: #ddd;
+    border-color: #4a7aaa;
+}
+
 /* Export log (shown in CP pane after export) */
 .se-export-log {
     font-size: 0.75rem;