Tab the PC detail page, and let a panel say which tab it belongs to

The page had grown to roughly ten cards in one flow, and three more surfaces
were wanted on it: installed software, live metrics, and the service controls.
Stacking those into the same column would have buried what the page is for.

Tabs were mocked and rejected on 2026-08-28, on the grounds that the strip
duplicated the sidebar and cost hero space. That objection is answered by
where the strip sits: the hero and the triage band stay above it and never
move, so "is this machine OK" is still answered without a click, and the strip
partitions the detail underneath rather than navigating anywhere.

WHY A PANEL DECLARES ITS OWN GROUP

Most cards on a detail page are not the page's. They arrive through the
ADR-010 get_asset_panels hook, so a page that sorted panels into tabs by
knowing their ids would defeat the hook it is built on. Panels now carry an
optional group instead, and the page only knows the five group names.

Resolution happens server-side, in the asset-panels route, so that an absent
or misspelled group becomes 'details' before the client ever sees it. The
client renders known groups only; an unrecognised value that survived to it
would be a panel that exists and is displayed nowhere. Contract 0.28.0 ->
0.29.0, additive - every existing plugin keeps working untouched, and the
endpoints status panel is deliberately left ungrouped so the default path is
exercised by a shipped plugin and not only by tests.

A tab is offered only when something fills it. An empty tab reads as broken
rather than as "this site does not collect that", so the strip is built from
the groups that actually returned data, and a tab that disappears on refetch
falls back to Details rather than leaving the page blank.

AssetDetailTabs is core, not a PCDetail component: machines, printers,
network devices and measuring tools all have the same shape, and the shared
asset-detail shell they need starts here.

Scope: product

frontend/src/components/PluginAssetPanels.vue

@@ -2,7 +2,7 @@
   <!-- Generic renderer for ADR-010 get_asset_panels (Path A). A plugin declares
        a panel as JSON (title, endpoint, render mode, field map); this renders it
        on any asset detail page, so a plugin adds detail-page UI with no Vue. -->
-  <template v-for="panel in panels" :key="panel.id">
+  <template v-for="panel in groupedPanels" :key="panel.id">
     <div v-if="panelVisible(panel)" class="section-card">
       <!-- collapsible panels get a clickable header with a caret and, when the
            panel declares a status rollup, a green/yellow/red dot for the worst
@@ -149,7 +149,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import api from '../api'
 import { colorStyle } from '@/utils/colorStyle'
 import {
@@ -183,10 +183,29 @@ function visibleRows(panel) {
 
 const props = defineProps({
   assetid: { type: [Number, String], default: null },
+  // Which detail-page tab to render. Null renders every panel, which is what
+  // the detail pages that have not adopted tabs still do - so this stays
+  // additive and no existing page changes behaviour.
+  group: { type: String, default: null },
 })
 
 const panels = ref([])
 
+// The server resolves every panel's group before we see it, so an unknown or
+// absent one is already 'details' by the time it arrives here. Filtering can
+// therefore be a plain equality check and nothing falls through the gap.
+const groupedPanels = computed(() =>
+  props.group ? panels.value.filter((p) => p.group === props.group) : panels.value
+)
+
+// Which groups actually have a panel with data, so a parent can hide a tab
+// rather than offering an empty one.
+const populatedGroups = computed(() => {
+  const seen = new Set()
+  panels.value.forEach((p) => { if (panelVisible(p)) seen.add(p.group || 'details') })
+  return seen
+})
+
 // Which tab each 'tabs' panel is showing, keyed by panel id. Kept here rather
 // than on the panel object because panels are replaced wholesale on refetch.
 const tabs = ref({})
@@ -334,7 +353,7 @@ watch(() => props.assetid, load, { immediate: true })
 
 // Let a parent detail page (for example PCDetail's header Refresh button)
 // trigger a panel reload without duplicating the fetch plumbing.
-defineExpose({ refresh: load })
+defineExpose({ refresh: load, populatedGroups })
 </script>
 
 <style scoped>