nuxt-devtools-observatory 0.1.26 → 0.1.30

package/client/src/views/ComposableTracker.vue

@@ -1,27 +1,24 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useObservatoryData, getObservatoryOrigin, type ComposableEntry as RuntimeComposableEntry } from '../stores/observatory'
+import {
+    useObservatoryData,
+    setComposableMode,
+    editComposableValue,
+    openInEditor as openInEditorFromStore,
+} from '@observatory-client/stores/observatory'
+import type { ComposableEntry as RuntimeComposableEntry } from '@observatory/types/snapshot'
 
 const { composables: rawEntries, connected, features, clearComposables } = useObservatoryData()
 
 const composableMode = computed<'route' | 'session'>(() => (features.value?.composableNavigationMode === 'session' ? 'session' : 'route'))
 
 function toggleComposableMode() {
-    const origin = getObservatoryOrigin()
-
-    if (!origin) {
-        return
-    }
-
     const nextMode = composableMode.value === 'route' ? 'session' : 'route'
-    window.top?.postMessage({ type: 'observatory:set-composable-mode', mode: nextMode }, origin)
+    setComposableMode(nextMode)
 }
 
 function clearSession() {
-    const origin = getObservatoryOrigin()
-    if (!origin) return
     clearComposables()
-    window.top?.postMessage({ type: 'observatory:clear-composables' }, origin)
 }
 
 // ── Flat per-instance display ─────────────────────────────────────────────
@@ -89,17 +86,7 @@ function basename(file: string) {
 }
 
 function openInEditor(file: string) {
-    if (!file || file === 'unknown') {
-        return
-    }
-
-    const origin = getObservatoryOrigin()
-
-    if (!origin) {
-        return
-    }
-
-    window.top?.postMessage({ type: 'observatory:open-in-editor', file }, origin)
+    openInEditorFromStore(file)
 }
 
 const filter = ref('all')
@@ -302,40 +289,26 @@ function applyEdit() {
         return
     }
 
-    const origin = getObservatoryOrigin()
-
-    if (!origin) {
-        return
-    }
-
-    window.top?.postMessage(
-        {
-            type: 'observatory:edit-composable',
-            id: editTarget.value.id,
-            key: editTarget.value.key,
-            value: parsed,
-        },
-        origin
-    )
+    editComposableValue(editTarget.value.id, editTarget.value.key, parsed)
 
     editTarget.value = null
 }
 </script>
 
 <template>
-    <div class="view">
-        <div class="stats-row">
+    <div class="composable-tracker tracker-view">
+        <div class="composable-tracker__stats tracker-stats-row">
             <div class="stat-card">
                 <div class="stat-label">total</div>
                 <div class="stat-val">{{ entries.length }}</div>
             </div>
             <div class="stat-card">
                 <div class="stat-label">mounted</div>
-                <div class="stat-val" style="color: var(--teal)">{{ counts.mounted }}</div>
+                <div class="stat-val stat-val--active">{{ counts.mounted }}</div>
             </div>
             <div class="stat-card">
                 <div class="stat-label">leaks</div>
-                <div class="stat-val" style="color: var(--red)">{{ counts.leaks }}</div>
+                <div class="stat-val stat-val--error">{{ counts.leaks }}</div>
             </div>
             <div class="stat-card">
                 <div class="stat-label">instances</div>
@@ -343,38 +316,47 @@ function applyEdit() {
             </div>
         </div>
 
-        <div class="toolbar">
+        <div class="composable-tracker__toolbar tracker-toolbar">
             <button :class="{ active: filter === 'all' }" @click="filter = 'all'">all</button>
             <button :class="{ active: filter === 'mounted' }" @click="filter = 'mounted'">mounted</button>
             <button :class="{ 'danger-active': filter === 'leak' }" @click="filter = 'leak'">leaks only</button>
             <button :class="{ active: filter === 'unmounted' }" @click="filter = 'unmounted'">unmounted</button>
             <button
-                class="mode-btn"
+                class="composable-tracker__mode-btn"
                 :title="`switch to ${composableMode === 'route' ? 'session' : 'route'} mode`"
                 @click="toggleComposableMode"
             >
                 mode: {{ composableMode }}
             </button>
-            <input v-model="search" type="search" placeholder="search name, file, or ref…" style="max-width: 220px; margin-left: auto" />
-            <button v-if="composableMode === 'session'" class="clear-btn" title="Clear session history" @click="clearSession">
+            <span class="tracker-toolbar__spacer"></span>
+            <input v-model="search" class="composable-tracker__search" type="search" placeholder="search name, file, or ref…" />
+            <button
+                v-if="composableMode === 'session'"
+                class="composable-tracker__clear-btn"
+                title="Clear session history"
+                @click="clearSession"
+            >
                 clear session
             </button>
         </div>
 
-        <div class="list">
+        <div class="composable-tracker__list">
             <div
                 v-for="entry in filtered"
                 :key="entry.id"
-                class="comp-card"
-                :class="{ leak: entry.leak, expanded: expanded === entry.id }"
+                class="composable-tracker__card"
+                :class="{
+                    'composable-tracker__card--leak': entry.leak,
+                    'composable-tracker__card--expanded': expanded === entry.id,
+                }"
                 @click="expanded = expanded === entry.id ? null : entry.id"
             >
-                <div class="comp-header">
-                    <div class="comp-identity">
-                        <span class="comp-name mono">{{ entry.name }}</span>
-                        <span class="comp-file muted mono">{{ basename(entry.componentFile) }}</span>
+                <div class="composable-tracker__card-header">
+                    <div class="composable-tracker__identity">
+                        <span class="composable-tracker__name mono">{{ entry.name }}</span>
+                        <span class="composable-tracker__file muted mono">{{ basename(entry.componentFile) }}</span>
                     </div>
-                    <div class="comp-meta">
+                    <div class="composable-tracker__meta">
                         <span v-if="entry.watcherCount > 0 && !entry.leak" class="badge badge-warn">{{ entry.watcherCount }}w</span>
                         <span v-if="entry.intervalCount > 0 && !entry.leak" class="badge badge-warn">{{ entry.intervalCount }}t</span>
                         <span v-if="entry.leak" class="badge badge-err">leak</span>
@@ -384,33 +366,33 @@ function applyEdit() {
                 </div>
 
                 <!-- Inline ref preview — shows up to 3 refs without expanding -->
-                <div v-if="Object.keys(entry.refs).length" class="refs-preview">
+                <div v-if="Object.keys(entry.refs).length" class="composable-tracker__refs-preview">
                     <span
                         v-for="[k, v] in Object.entries(entry.refs).slice(0, 3)"
                         :key="k"
-                        class="ref-chip"
+                        class="composable-tracker__ref-chip"
                         :class="{
-                            'ref-chip--reactive': v.type === 'reactive',
-                            'ref-chip--computed': v.type === 'computed',
-                            'ref-chip--shared': entry.sharedKeys?.includes(k),
+                            'composable-tracker__ref-chip--reactive': v.type === 'reactive',
+                            'composable-tracker__ref-chip--computed': v.type === 'computed',
+                            'composable-tracker__ref-chip--shared': entry.sharedKeys?.includes(k),
                         }"
                         :title="entry.sharedKeys?.includes(k) ? 'shared global state' : ''"
                     >
-                        <span class="ref-chip-key">{{ k }}</span>
-                        <span class="ref-chip-val">{{ formatVal(v.value) }}</span>
-                        <span v-if="entry.sharedKeys?.includes(k)" class="ref-chip-shared-dot" title="global"></span>
+                        <span class="composable-tracker__ref-chip-key">{{ k }}</span>
+                        <span class="composable-tracker__ref-chip-val">{{ formatVal(v.value) }}</span>
+                        <span v-if="entry.sharedKeys?.includes(k)" class="composable-tracker__ref-chip-shared-dot" title="global"></span>
                     </span>
                     <span v-if="Object.keys(entry.refs).length > 3" class="muted text-sm">
                         +{{ Object.keys(entry.refs).length - 3 }} more
                     </span>
                 </div>
 
-                <div v-if="expanded === entry.id" class="comp-detail" @click.stop>
-                    <div v-if="entry.leak" class="leak-banner">{{ entry.leakReason }}</div>
+                <div v-if="expanded === entry.id" class="composable-tracker__detail" @click.stop>
+                    <div v-if="entry.leak" class="composable-tracker__leak-banner">{{ entry.leakReason }}</div>
 
                     <!-- Global state warning -->
-                    <div v-if="entry.sharedKeys?.length" class="global-banner">
-                        <span class="global-dot"></span>
+                    <div v-if="entry.sharedKeys?.length" class="composable-tracker__global-banner">
+                        <span class="composable-tracker__global-dot"></span>
                         <span>
                             <strong>global state</strong>
                             — {{ entry.sharedKeys.join(', ') }}
@@ -419,31 +401,31 @@ function applyEdit() {
                         </span>
                     </div>
 
-                    <div class="section-label">reactive state</div>
-                    <div v-if="!Object.keys(entry.refs).length" class="muted text-sm" style="padding: 2px 0 6px">
+                    <div class="composable-tracker__section-label tracker-section-label">reactive state</div>
+                    <div v-if="!Object.keys(entry.refs).length" class="composable-tracker__compact-muted muted text-sm">
                         no tracked state returned
                     </div>
-                    <div v-for="[k, v] in Object.entries(entry.refs)" :key="k" class="ref-row">
+                    <div v-for="[k, v] in Object.entries(entry.refs)" :key="k" class="composable-tracker__ref-row">
                         <span
-                            class="mono text-sm ref-key ref-key--clickable"
+                            class="composable-tracker__ref-key composable-tracker__ref-key--clickable mono text-sm"
                             :title="`click to see all instances exposing '${k}'`"
                             @click.stop="openLookup(k)"
                         >
                             {{ k }}
                         </span>
                         <span
-                            class="mono text-sm ref-val"
+                            class="composable-tracker__ref-val mono text-sm"
                             :class="{
-                                'ref-val--full': isLongValue(v.value) && isRefExpanded(entry.id, k),
-                                'ref-val--collapsed': isLongValue(v.value) && !isRefExpanded(entry.id, k),
+                                'composable-tracker__ref-val--full': isLongValue(v.value) && isRefExpanded(entry.id, k),
+                                'composable-tracker__ref-val--collapsed': isLongValue(v.value) && !isRefExpanded(entry.id, k),
                             }"
                         >
                             {{ isLongValue(v.value) && !isRefExpanded(entry.id, k) ? formatVal(v.value) : formatValFull(v.value) }}
                         </span>
-                        <div class="ref-row-actions">
+                        <div class="composable-tracker__ref-row-actions">
                             <button
                                 v-if="isLongValue(v.value)"
-                                class="expand-btn"
+                                class="composable-tracker__expand-btn"
                                 :title="isRefExpanded(entry.id, k) ? 'Collapse' : 'Expand'"
                                 @click.stop="toggleRefExpand(entry.id, k)"
                             >
@@ -453,7 +435,7 @@ function applyEdit() {
                             <span v-if="entry.sharedKeys?.includes(k)" class="badge badge-amber text-xs">global</span>
                             <button
                                 v-if="v.type === 'ref'"
-                                class="edit-btn"
+                                class="composable-tracker__edit-btn"
                                 title="Edit value"
                                 @click.stop="openEdit(entry.id, k, v.value)"
                             >
@@ -463,103 +445,127 @@ function applyEdit() {
                     </div>
 
                     <template v-if="entry.history && entry.history.length">
-                        <div class="section-label" style="margin-top: 10px">
+                        <div class="composable-tracker__section-label composable-tracker__section-label--spaced tracker-section-label">
                             change history
-                            <span class="muted" style="font-weight: 400; text-transform: none; letter-spacing: 0">
-                                ({{ entry.history.length }} events)
-                            </span>
+                            <span class="composable-tracker__section-label-meta muted">({{ entry.history.length }} events)</span>
                         </div>
-                        <div class="history-list">
-                            <div v-for="(evt, idx) in [...entry.history].reverse().slice(0, 20)" :key="idx" class="history-row">
-                                <span class="history-time mono muted">+{{ (evt.t / 1000).toFixed(2) }}s</span>
-                                <span class="history-key mono">{{ evt.key }}</span>
-                                <span class="history-val mono">{{ formatVal(evt.value) }}</span>
+                        <div class="composable-tracker__history-list">
+                            <div
+                                v-for="(evt, idx) in [...entry.history].reverse().slice(0, 20)"
+                                :key="idx"
+                                class="composable-tracker__history-row"
+                            >
+                                <span class="composable-tracker__history-time mono muted">+{{ (evt.t / 1000).toFixed(2) }}s</span>
+                                <span class="composable-tracker__history-key mono">{{ evt.key }}</span>
+                                <span class="composable-tracker__history-val mono">{{ formatVal(evt.value) }}</span>
                             </div>
-                            <div v-if="entry.history.length > 20" class="muted text-sm" style="padding: 2px 0">
+                            <div v-if="entry.history.length > 20" class="composable-tracker__compact-muted muted text-sm">
                                 … {{ entry.history.length - 20 }} earlier events
                             </div>
                         </div>
                     </template>
 
-                    <div class="section-label" style="margin-top: 10px">lifecycle</div>
-                    <div v-for="row in lifecycleRows(entry)" :key="row.label" class="lc-row">
-                        <span class="lc-dot" :style="{ background: row.ok ? 'var(--teal)' : 'var(--red)' }"></span>
-                        <span class="muted text-sm" style="min-width: 120px">{{ row.label }}</span>
-                        <span class="text-sm" :style="{ color: row.ok ? 'var(--teal)' : 'var(--red)' }">{{ row.status }}</span>
+                    <div class="composable-tracker__section-label composable-tracker__section-label--spaced tracker-section-label">
+                        lifecycle
+                    </div>
+                    <div v-for="row in lifecycleRows(entry)" :key="row.label" class="composable-tracker__lifecycle-row">
+                        <span
+                            class="composable-tracker__lifecycle-dot"
+                            :class="row.ok ? 'composable-tracker__lifecycle-dot--ok' : 'composable-tracker__lifecycle-dot--error'"
+                        ></span>
+                        <span class="composable-tracker__context-label muted text-sm">{{ row.label }}</span>
+                        <span
+                            class="composable-tracker__lifecycle-status text-sm"
+                            :class="row.ok ? 'composable-tracker__lifecycle-status--ok' : 'composable-tracker__lifecycle-status--error'"
+                        >
+                            {{ row.status }}
+                        </span>
                     </div>
 
-                    <div class="section-label" style="margin-top: 10px">context</div>
-                    <div class="lc-row">
-                        <span class="muted text-sm" style="min-width: 120px">component</span>
-                        <span class="mono text-sm">{{ basename(entry.componentFile) }}</span>
+                    <div class="composable-tracker__section-label composable-tracker__section-label--spaced tracker-section-label">
+                        context
                     </div>
-                    <div class="lc-row">
-                        <span class="muted text-sm" style="min-width: 120px">uid</span>
-                        <span class="mono text-sm muted">{{ entry.componentUid }}</span>
+                    <div class="composable-tracker__lifecycle-row">
+                        <span class="composable-tracker__context-label muted text-sm">component</span>
+                        <span class="composable-tracker__context-value mono text-sm">{{ basename(entry.componentFile) }}</span>
                     </div>
-                    <div class="lc-row">
-                        <span class="muted text-sm" style="min-width: 120px">defined in</span>
-                        <span class="mono text-sm muted" style="display: flex; align-items: center; gap: 6px">
+                    <div class="composable-tracker__lifecycle-row">
+                        <span class="composable-tracker__context-label muted text-sm">uid</span>
+                        <span class="composable-tracker__context-value composable-tracker__context-value--muted mono text-sm muted">
+                            {{ entry.componentUid }}
+                        </span>
+                    </div>
+                    <div class="composable-tracker__lifecycle-row">
+                        <span class="composable-tracker__context-label muted text-sm">defined in</span>
+                        <span
+                            class="composable-tracker__context-value composable-tracker__context-value--row composable-tracker__context-value--muted mono text-sm muted"
+                        >
                             {{ entry.file }}:{{ entry.line }}
-                            <button class="jump-btn" title="Open in editor" @click.stop="openInEditor(entry.file)">open ↗</button>
+                            <button class="composable-tracker__jump-btn" title="Open in editor" @click.stop="openInEditor(entry.file)">
+                                open ↗
+                            </button>
                         </span>
                     </div>
-                    <div class="lc-row">
-                        <span class="muted text-sm" style="min-width: 120px">route</span>
-                        <span class="mono text-sm muted">{{ entry.route }}</span>
+                    <div class="composable-tracker__lifecycle-row">
+                        <span class="composable-tracker__context-label muted text-sm">route</span>
+                        <span class="composable-tracker__context-value composable-tracker__context-value--muted mono text-sm muted">
+                            {{ entry.route }}
+                        </span>
                     </div>
-                    <div class="lc-row">
-                        <span class="muted text-sm" style="min-width: 120px">watchers</span>
-                        <span class="mono text-sm">{{ entry.watcherCount }}</span>
+                    <div class="composable-tracker__lifecycle-row">
+                        <span class="composable-tracker__context-label muted text-sm">watchers</span>
+                        <span class="composable-tracker__context-value mono text-sm">{{ entry.watcherCount }}</span>
                     </div>
-                    <div class="lc-row">
-                        <span class="muted text-sm" style="min-width: 120px">intervals</span>
-                        <span class="mono text-sm">{{ entry.intervalCount }}</span>
+                    <div class="composable-tracker__lifecycle-row">
+                        <span class="composable-tracker__context-label muted text-sm">intervals</span>
+                        <span class="composable-tracker__context-value mono text-sm">{{ entry.intervalCount }}</span>
                     </div>
                 </div>
             </div>
 
-            <div v-if="!filtered.length" class="muted text-sm" style="padding: 16px 0">
+            <div v-if="!filtered.length" class="composable-tracker__empty muted text-sm">
                 {{ connected ? 'No composables recorded yet.' : 'Waiting for connection to the Nuxt app…' }}
             </div>
         </div>
 
         <!-- ── Reverse lookup panel ──────────────────────────────────────── -->
         <Transition name="slide">
-            <div v-if="lookupKey" class="lookup-panel">
-                <div class="lookup-header">
+            <div v-if="lookupKey" class="composable-tracker__lookup-panel">
+                <div class="composable-tracker__lookup-header">
                     <span class="mono text-sm">{{ lookupKey }}</span>
                     <span class="muted text-sm">— {{ lookupResults.length }} instance{{ lookupResults.length !== 1 ? 's' : '' }}</span>
-                    <button class="clear-btn" style="margin-left: auto" @click="lookupKey = null">✕</button>
+                    <button class="composable-tracker__clear-btn composable-tracker__lookup-close" @click="lookupKey = null">✕</button>
+                </div>
+                <div v-if="!lookupResults.length" class="composable-tracker__lookup-empty muted text-sm">
+                    No mounted instances expose this key.
                 </div>
-                <div v-if="!lookupResults.length" class="muted text-sm" style="padding: 6px 0">No mounted instances expose this key.</div>
-                <div v-for="r in lookupResults" :key="r.id" class="lookup-row">
+                <div v-for="r in lookupResults" :key="r.id" class="composable-tracker__lookup-row">
                     <span class="mono text-sm">{{ r.name }}</span>
                     <span class="muted text-sm">{{ basename(r.componentFile) }}</span>
-                    <span class="muted text-sm" style="margin-left: auto">{{ r.route }}</span>
+                    <span class="composable-tracker__lookup-route muted text-sm">{{ r.route }}</span>
                 </div>
             </div>
         </Transition>
 
         <!-- ── Edit value dialog ─────────────────────────────────────────── -->
         <Transition name="fade">
-            <div v-if="editTarget" class="edit-overlay" @click.self="editTarget = null">
-                <div class="edit-dialog">
-                    <div class="edit-dialog-header">
+            <div v-if="editTarget" class="composable-tracker__edit-overlay" @click.self="editTarget = null">
+                <div class="composable-tracker__edit-dialog">
+                    <div class="composable-tracker__edit-dialog-header">
                         edit
                         <span class="mono">{{ editTarget.key }}</span>
-                        <button class="clear-btn" style="margin-left: auto" @click="editTarget = null">✕</button>
+                        <button class="composable-tracker__clear-btn composable-tracker__dialog-close" @click="editTarget = null">✕</button>
                     </div>
-                    <p class="muted text-sm" style="padding: 4px 0 8px">
+                    <p class="composable-tracker__edit-help muted text-sm">
                         Value applied immediately to the live ref. Only
                         <span class="mono">ref</span>
                         values are writable.
                     </p>
-                    <textarea v-model="editTarget.rawValue" class="edit-textarea" rows="6" spellcheck="false" />
-                    <div v-if="editError" class="edit-error text-sm">{{ editError }}</div>
-                    <div class="edit-actions">
+                    <textarea v-model="editTarget.rawValue" class="composable-tracker__edit-textarea" rows="6" spellcheck="false" />
+                    <div v-if="editError" class="composable-tracker__edit-error text-sm">{{ editError }}</div>
+                    <div class="composable-tracker__edit-actions">
                         <button @click="applyEdit">apply</button>
-                        <button class="clear-btn" @click="editTarget = null">cancel</button>
+                        <button class="composable-tracker__clear-btn" @click="editTarget = null">cancel</button>
                     </div>
                 </div>
             </div>
@@ -568,239 +574,222 @@ function applyEdit() {
 </template>
 
 <style scoped>
-.view {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    padding: 12px;
-    gap: 10px;
-}
-
-.stats-row {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 8px;
-    flex-shrink: 0;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-}
-
-.clear-btn {
+.composable-tracker__clear-btn {
     color: var(--text3);
     border-color: var(--border);
     flex-shrink: 0;
 }
 
-.clear-btn:hover {
+.composable-tracker__clear-btn:hover {
     color: var(--red);
     border-color: var(--red);
     background: transparent;
 }
 
-.mode-btn {
+.composable-tracker__mode-btn {
     border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
     color: var(--blue);
 }
 
-.mode-btn:hover {
+.composable-tracker__mode-btn:hover {
     border-color: var(--blue);
     background: color-mix(in srgb, var(--blue) 12%, transparent);
 }
 
-.list {
+.composable-tracker__search {
+    max-width: 220px;
+}
+
+.composable-tracker__list {
     flex: 1;
     overflow: auto;
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: var(--tracker-space-2);
     min-height: 0;
 }
 
-.comp-card {
+.composable-tracker__card {
     background: var(--bg3);
-    border: 0.5px solid var(--border);
+    border: var(--tracker-border-width) solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     cursor: pointer;
     flex-shrink: 0;
 }
 
-.comp-card:hover {
+.composable-tracker__card:hover {
     border-color: var(--text3);
 }
 
-.comp-card.leak {
+.composable-tracker__card--leak {
     border-left: 2px solid var(--red);
     border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
 }
 
-.comp-card.expanded {
+.composable-tracker__card--expanded {
     border-color: var(--purple);
 }
 
-.comp-header {
+.composable-tracker__card-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px 12px;
-    gap: 8px;
+    padding: var(--tracker-space-3) var(--tracker-space-4);
+    gap: var(--tracker-space-3);
 }
 
-.comp-identity {
+.composable-tracker__identity {
     display: flex;
     align-items: baseline;
-    gap: 6px;
+    gap: var(--tracker-space-2);
     min-width: 0;
     flex: 1;
 }
 
-.comp-name {
-    font-size: 12px;
+.composable-tracker__name {
+    font-size: var(--tracker-font-size-md);
     font-weight: 500;
     color: var(--text);
     flex-shrink: 0;
 }
 
-.comp-file {
-    font-size: 11px;
+.composable-tracker__file {
+    font-size: var(--tracker-font-size-sm);
     color: var(--text3);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.comp-meta {
+.composable-tracker__meta {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: var(--tracker-space-2);
     flex-shrink: 0;
 }
 
-/* Inline ref preview chips */
-.refs-preview {
+.composable-tracker__refs-preview {
     display: flex;
     flex-wrap: wrap;
-    gap: 4px;
-    padding: 0 12px 8px;
+    gap: var(--tracker-space-1);
+    padding: 0 var(--tracker-space-4) var(--tracker-space-3);
     align-items: center;
 }
 
-.ref-chip {
+.composable-tracker__ref-chip {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--tracker-space-1);
     padding: 2px 7px;
     border-radius: 4px;
     background: var(--bg2);
-    border: 0.5px solid var(--border);
-    font-size: 11px;
+    border: var(--tracker-border-width) solid var(--border);
+    font-size: var(--tracker-font-size-sm);
     font-family: var(--mono);
     max-width: 220px;
     overflow: hidden;
 }
 
-.ref-chip--reactive {
+.composable-tracker__ref-chip--reactive {
     border-color: color-mix(in srgb, var(--purple) 40%, var(--border));
     background: color-mix(in srgb, var(--purple) 8%, var(--bg2));
 }
 
-.ref-chip--computed {
+.composable-tracker__ref-chip--computed {
     border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
     background: color-mix(in srgb, var(--blue) 8%, var(--bg2));
 }
 
-.ref-chip-key {
+.composable-tracker__ref-chip-key {
     color: var(--text2);
     flex-shrink: 0;
 }
 
-.ref-chip-val {
+.composable-tracker__ref-chip-val {
     color: var(--teal);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-/* Expanded detail */
-.comp-detail {
-    padding: 4px 12px 12px;
-    border-top: 0.5px solid var(--border);
+.composable-tracker__detail {
+    padding: var(--tracker-space-1) var(--tracker-space-4) var(--tracker-space-4);
+    border-top: var(--tracker-border-width) solid var(--border);
     display: flex;
     flex-direction: column;
-    gap: 3px;
+    gap: var(--tracker-space-1);
 }
 
-.leak-banner {
+.composable-tracker__leak-banner {
     background: color-mix(in srgb, var(--red) 12%, transparent);
-    border: 0.5px solid color-mix(in srgb, var(--red) 40%, var(--border));
+    border: var(--tracker-border-width) solid color-mix(in srgb, var(--red) 40%, var(--border));
     border-radius: var(--radius);
     padding: 6px 10px;
-    font-size: 11px;
+    font-size: var(--tracker-font-size-sm);
     color: var(--red);
-    margin-bottom: 6px;
+    margin-bottom: var(--tracker-space-2);
     font-family: var(--mono);
 }
 
-.section-label {
-    font-size: 10px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
-    color: var(--text3);
-    margin-top: 6px;
-    margin-bottom: 3px;
+.composable-tracker__section-label {
+    margin-top: var(--tracker-space-2);
+    margin-bottom: var(--tracker-space-1);
+}
+
+.composable-tracker__section-label--spaced {
+    margin-top: var(--tracker-space-4);
+}
+
+.composable-tracker__section-label-meta {
+    font-weight: 400;
+    text-transform: none;
+    letter-spacing: 0;
 }
 
-.ref-row {
+.composable-tracker__ref-row {
     display: flex;
     align-items: flex-start;
-    gap: 8px;
+    gap: var(--tracker-space-3);
     padding: 3px 0;
 }
 
-.ref-key {
+.composable-tracker__ref-key {
     min-width: 90px;
     color: var(--text2);
     flex-shrink: 0;
 }
 
-.ref-val {
+.composable-tracker__ref-val {
     flex: 1;
     color: var(--teal);
     min-width: 0;
 }
 
-.ref-val--collapsed {
+.composable-tracker__ref-val--collapsed {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.ref-val--full {
+.composable-tracker__ref-val--full {
     white-space: pre-wrap;
     word-break: break-all;
     line-height: 1.5;
 }
 
-.ref-row-actions {
+.composable-tracker__ref-row-actions {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--tracker-space-1);
     flex-shrink: 0;
 }
 
-.expand-btn {
-    font-size: 9px;
+.composable-tracker__expand-btn {
+    font-size: var(--tracker-font-size-xs);
     padding: 1px 5px;
     border-radius: 4px;
-    border: 0.5px solid var(--border);
+    border: var(--tracker-border-width) solid var(--border);
     background: var(--bg2);
     color: var(--text3);
     cursor: pointer;
@@ -808,31 +797,66 @@ function applyEdit() {
     flex-shrink: 0;
 }
 
-.expand-btn:hover {
+.composable-tracker__expand-btn:hover {
     border-color: var(--text3);
     color: var(--text);
 }
 
-.lc-row {
+.composable-tracker__lifecycle-row {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--tracker-space-3);
     padding: 2px 0;
 }
 
-.lc-dot {
+.composable-tracker__lifecycle-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     flex-shrink: 0;
 }
 
-.ref-chip--shared {
+.composable-tracker__lifecycle-dot--ok {
+    background: var(--teal);
+}
+
+.composable-tracker__lifecycle-dot--error {
+    background: var(--red);
+}
+
+.composable-tracker__lifecycle-status--ok {
+    color: var(--teal);
+}
+
+.composable-tracker__lifecycle-status--error {
+    color: var(--red);
+}
+
+.composable-tracker__context-label {
+    min-width: 120px;
+}
+
+.composable-tracker__context-value {
+    min-width: 0;
+}
+
+.composable-tracker__context-value--row {
+    display: flex;
+    align-items: center;
+    gap: var(--tracker-space-2);
+    flex-wrap: wrap;
+}
+
+.composable-tracker__context-value--muted {
+    color: var(--text3);
+}
+
+.composable-tracker__ref-chip--shared {
     border-color: color-mix(in srgb, var(--amber) 50%, var(--border));
     background: color-mix(in srgb, var(--amber) 10%, var(--bg2));
 }
 
-.ref-chip-shared-dot {
+.composable-tracker__ref-chip-shared-dot {
     display: inline-block;
     width: 5px;
     height: 5px;
@@ -842,20 +866,20 @@ function applyEdit() {
     margin-left: 1px;
 }
 
-.global-banner {
+.composable-tracker__global-banner {
     display: flex;
     align-items: flex-start;
-    gap: 8px;
+    gap: var(--tracker-space-3);
     background: color-mix(in srgb, var(--amber) 10%, transparent);
-    border: 0.5px solid color-mix(in srgb, var(--amber) 40%, var(--border));
+    border: var(--tracker-border-width) solid color-mix(in srgb, var(--amber) 40%, var(--border));
     border-radius: var(--radius);
     padding: 7px 10px;
-    font-size: 11px;
+    font-size: var(--tracker-font-size-sm);
     color: var(--text2);
-    margin-bottom: 6px;
+    margin-bottom: var(--tracker-space-2);
 }
 
-.global-dot {
+.composable-tracker__global-dot {
     display: inline-block;
     width: 6px;
     height: 6px;
@@ -871,7 +895,7 @@ function applyEdit() {
     border: 0.5px solid color-mix(in srgb, var(--amber) 40%, var(--border));
 }
 
-.history-list {
+.composable-tracker__history-list {
     display: flex;
     flex-direction: column;
     gap: 1px;
@@ -882,33 +906,33 @@ function applyEdit() {
     overflow-y: auto;
 }
 
-.history-row {
+.composable-tracker__history-row {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--tracker-space-3);
     padding: 2px 0;
-    font-size: 11px;
+    font-size: var(--tracker-font-size-sm);
     font-family: var(--mono);
-    border-bottom: 0.5px solid var(--border);
+    border-bottom: var(--tracker-border-width) solid var(--border);
 }
 
-.history-row:last-child {
+.composable-tracker__history-row:last-child {
     border-bottom: none;
 }
 
-.history-time {
+.composable-tracker__history-time {
     min-width: 52px;
     color: var(--text3);
     flex-shrink: 0;
 }
 
-.history-key {
+.composable-tracker__history-key {
     min-width: 80px;
     color: var(--text2);
     flex-shrink: 0;
 }
 
-.history-val {
+.composable-tracker__history-val {
     color: var(--amber);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -916,48 +940,22 @@ function applyEdit() {
     flex: 1;
 }
 
-/* Stat cards */
-.stat-card {
-    background: var(--bg3);
-    border: 0.5px solid var(--border);
-    border-radius: var(--radius-lg);
-    padding: 10px 14px;
-}
-
-.stat-label {
-    font-size: 10px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
-    color: var(--text3);
-    margin-bottom: 4px;
-}
-
-.stat-val {
-    font-size: 22px;
-    font-weight: 500;
-    line-height: 1;
-    color: var(--text);
-}
-
-/* Clickable ref key */
-.ref-key--clickable {
+.composable-tracker__ref-key--clickable {
     cursor: pointer;
     text-decoration: underline dotted var(--text3);
     text-underline-offset: 2px;
 }
 
-.ref-key--clickable:hover {
+.composable-tracker__ref-key--clickable:hover {
     color: var(--purple);
     text-decoration-color: var(--purple);
 }
 
-/* Edit button inline with ref row */
-.edit-btn {
-    font-size: 10px;
+.composable-tracker__edit-btn {
+    font-size: var(--tracker-font-size-xs);
     padding: 1px 6px;
     border-radius: var(--radius);
-    border: 0.5px solid var(--border);
+    border: var(--tracker-border-width) solid var(--border);
     background: transparent;
     color: var(--text3);
     cursor: pointer;
@@ -966,44 +964,60 @@ function applyEdit() {
     font-family: var(--mono);
 }
 
-.edit-btn:hover {
+.composable-tracker__edit-btn:hover {
     border-color: var(--purple);
     color: var(--purple);
     background: color-mix(in srgb, var(--purple) 8%, transparent);
 }
 
-/* Reverse lookup panel — appears below the list */
-.lookup-panel {
+.composable-tracker__empty {
+    padding: 16px 0;
+}
+
+.composable-tracker__compact-muted {
+    padding: 2px 0 6px;
+}
+
+.composable-tracker__lookup-panel {
     flex-shrink: 0;
-    border: 0.5px solid var(--border);
+    border: var(--tracker-border-width) solid var(--border);
     border-radius: var(--radius-lg);
     background: var(--bg3);
     overflow: hidden;
 }
 
-.lookup-header {
+.composable-tracker__lookup-header {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: var(--tracker-space-2);
     padding: 7px 12px;
-    border-bottom: 0.5px solid var(--border);
+    border-bottom: var(--tracker-border-width) solid var(--border);
     background: var(--bg2);
 }
 
-.lookup-row {
+.composable-tracker__lookup-close,
+.composable-tracker__dialog-close,
+.composable-tracker__lookup-route {
+    margin-left: auto;
+}
+
+.composable-tracker__lookup-empty {
+    padding: 6px 12px;
+}
+
+.composable-tracker__lookup-row {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--tracker-space-3);
     padding: 5px 12px;
-    border-bottom: 0.5px solid var(--border);
+    border-bottom: var(--tracker-border-width) solid var(--border);
 }
 
-.lookup-row:last-child {
+.composable-tracker__lookup-row:last-child {
     border-bottom: none;
 }
 
-/* Edit overlay + dialog */
-.edit-overlay {
+.composable-tracker__edit-overlay {
     position: fixed;
     inset: 0;
     background: rgb(0 0 0 / 40%);
@@ -1013,9 +1027,9 @@ function applyEdit() {
     justify-content: center;
 }
 
-.edit-dialog {
+.composable-tracker__edit-dialog {
     background: var(--bg1, var(--bg2));
-    border: 0.5px solid var(--border);
+    border: var(--tracker-border-width) solid var(--border);
     border-radius: var(--radius-lg);
     padding: 14px 16px;
     width: 380px;
@@ -1026,44 +1040,47 @@ function applyEdit() {
     box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
 }
 
-.edit-dialog-header {
+.composable-tracker__edit-dialog-header {
     display: flex;
     align-items: center;
-    gap: 6px;
-    font-size: 12px;
+    gap: var(--tracker-space-2);
+    font-size: var(--tracker-font-size-md);
     color: var(--text2);
     margin-bottom: 2px;
 }
 
-.edit-textarea {
+.composable-tracker__edit-help {
+    padding: 4px 0 8px;
+}
+
+.composable-tracker__edit-textarea {
     width: 100%;
     font-family: var(--mono);
-    font-size: 12px;
+    font-size: var(--tracker-font-size-md);
     padding: 8px 10px;
     background: var(--bg2);
-    border: 0.5px solid var(--border);
+    border: var(--tracker-border-width) solid var(--border);
     border-radius: var(--radius);
     color: var(--text);
     resize: vertical;
     outline: none;
 }
 
-.edit-textarea:focus {
+.composable-tracker__edit-textarea:focus {
     border-color: var(--purple);
 }
 
-.edit-error {
+.composable-tracker__edit-error {
     color: var(--red);
     font-family: var(--mono);
 }
 
-.edit-actions {
+.composable-tracker__edit-actions {
     display: flex;
-    gap: 6px;
+    gap: var(--tracker-space-2);
     padding-top: 4px;
 }
 
-/* Slide / fade transitions for the panels */
 .slide-enter-active,
 .slide-leave-active {
     transition:
@@ -1087,10 +1104,10 @@ function applyEdit() {
     opacity: 0;
 }
 
-.jump-btn {
-    font-size: 10px;
+.composable-tracker__jump-btn {
+    font-size: var(--tracker-font-size-xs);
     padding: 1px 6px;
-    border: 0.5px solid var(--border);
+    border: var(--tracker-border-width) solid var(--border);
     border-radius: var(--radius);
     background: transparent;
     color: var(--text3);
@@ -1099,9 +1116,25 @@ function applyEdit() {
     font-family: var(--mono);
 }
 
-.jump-btn:hover {
+.composable-tracker__jump-btn:hover {
     border-color: var(--teal);
     color: var(--teal);
     background: color-mix(in srgb, var(--teal) 8%, transparent);
 }
+
+@media (width <= 900px) {
+    .composable-tracker__card-header,
+    .composable-tracker__ref-row,
+    .composable-tracker__lifecycle-row,
+    .composable-tracker__lookup-row {
+        flex-wrap: wrap;
+    }
+
+    .composable-tracker__identity,
+    .composable-tracker__context-label,
+    .composable-tracker__lookup-route {
+        min-width: 100%;
+        margin-left: 0;
+    }
+}
 </style>