@mtharrison/loupe 1.3.0 → 1.5.0

package/README.md

@@ -4,6 +4,8 @@
 
 # @mtharrison/loupe
 
+
+
 Loupe is a lightweight local tracing dashboard for LLM applications and agent systems. It captures full request and response payloads with tags and hierarchy context, then serves an inspector UI on `127.0.0.1` with no database, no containers, and no persistence.
 
 This package is for local development. Traces live in memory and are cleared on restart.
@@ -38,16 +40,18 @@ npm install @mtharrison/loupe
 
 ### Requirements
 
-- Node.js 18 or newer
+- Node.js 20 or newer
 
 ## Quick Start
 
-Enable tracing:
+Enable tracing explicitly:
 
 ```bash
 export LLM_TRACE_ENABLED=1
 ```
 
+Or just run your app with `NODE_ENV=development`. Loupe now enables tracing implicitly in development and opens the dashboard automatically on first start in an interactive local terminal.
+
 If your app already uses a higher-level model interface or the official OpenAI client, Loupe can wrap that directly instead of requiring manual `record*` calls.
 
 ### `wrapOpenAIClient(client, getContext, config?)`
@@ -93,6 +97,8 @@ When the server starts, Loupe prints the local URL:
 [llm-trace] dashboard: http://127.0.0.1:4319
 ```
 
+In `NODE_ENV=development`, Loupe also opens that URL in your browser automatically unless `CI` is set, the terminal is non-interactive, or `LOUPE_OPEN_BROWSER=0`.
+
 If `4319` is already in use and you did not explicitly configure a port, Loupe falls back to another free local port and prints that URL instead.
 
 `wrapOpenAIClient()` is structurally typed, so Loupe's runtime API does not require the OpenAI SDK for normal library usage. The repo includes `openai` as a dev dependency for the bundled demo; if your own app instantiates `new OpenAI()` or runs the published example from a consumer install, install `openai` there too.
@@ -142,6 +148,25 @@ export LLM_TRACE_ENABLED=1
 node examples/nested-tool-call.js
 ```
 
+### Runnable Fully Featured Demo
+
+`examples/fully-featured.js` is a credential-free demo that combines the main local tracing features in one session:
+
+- a top-level input guardrail span recorded with the low-level lifecycle API
+- a wrapped `invoke()` call with a nested stage span and child actor span
+- a handled child-span error so the dashboard shows both success and failure states
+- a wrapped `stream()` call with reconstructed output and usage
+
+Run it with:
+
+```bash
+npm install
+export LLM_TRACE_ENABLED=1
+node examples/fully-featured.js
+```
+
+Supported demo environment variables: `LLM_TRACE_PORT`, `LOUPE_OPEN_BROWSER`.
+
 ## Low-Level Lifecycle API
 
 If you need full control over trace boundaries, Loupe exposes a lower-level span lifecycle API modeled on OpenTelemetry concepts: start a span, add events, end it, and record exceptions.
@@ -343,11 +368,12 @@ Environment variables:
 
 | Variable | Default | Description |
 | --- | --- | --- |
-| `LLM_TRACE_ENABLED` | `false` | Enables Loupe. |
+| `LLM_TRACE_ENABLED` | `true` when `NODE_ENV=development`, otherwise `false` | Enables Loupe. |
 | `LLM_TRACE_HOST` | `127.0.0.1` | Host for the local dashboard server. |
 | `LLM_TRACE_PORT` | `4319` | Port for the local dashboard server. If unset, Loupe tries `4319` first and falls back to a free local port if it is already in use. |
 | `LLM_TRACE_MAX_TRACES` | `1000` | Maximum number of traces kept in memory. |
 | `LLM_TRACE_UI_HOT_RELOAD` | auto in local interactive dev | Enables UI rebuild + reload while developing the dashboard itself. |
+| `LOUPE_OPEN_BROWSER` | `enabled` in local `NODE_ENV=development` sessions | Opens the dashboard in your browser on first server start. Set `0` to suppress it. |
 
 Programmatic configuration is also available through `getLocalLLMTracer(config)`.
 

package/dist/client/app.css

@@ -29,22 +29,26 @@
 }
 :root[data-theme=dark] {
   color-scheme: dark;
-  --background: #111b29;
-  --background-strong: #09111c;
-  --panel: rgba(22, 32, 47, 0.96);
-  --panel-strong: rgba(28, 40, 59, 0.98);
-  --panel-soft: rgba(115, 170, 255, 0.16);
-  --foreground: #f3f7ff;
-  --muted-foreground: #b6c5d9;
-  --line: rgba(140, 164, 197, 0.24);
-  --line-strong: rgba(145, 193, 255, 0.52);
-  --primary: #9dc8ff;
-  --primary-strong: #f4f8ff;
-  --secondary: rgba(120, 155, 212, 0.18);
-  --warning: #f2bf67;
-  --danger: #f39bac;
-  --success: #7ad1aa;
-  --shadow: 0 30px 90px rgba(1, 8, 20, 0.56);
+  --background: #0b1523;
+  --background-strong: #040913;
+  --panel: rgba(16, 27, 41, 0.9);
+  --panel-strong: rgba(12, 22, 35, 0.94);
+  --panel-soft: rgba(91, 186, 255, 0.14);
+  --surface-elevated: rgba(20, 34, 52, 0.96);
+  --surface-overlay: rgba(15, 25, 39, 0.94);
+  --surface-highlight: rgba(33, 57, 87, 0.98);
+  --surface-code: rgba(7, 13, 23, 0.96);
+  --foreground: #ecf4ff;
+  --muted-foreground: #9bb0c8;
+  --line: rgba(117, 146, 180, 0.24);
+  --line-strong: rgba(126, 196, 255, 0.5);
+  --primary: #88d0ff;
+  --primary-strong: #f5fbff;
+  --secondary: rgba(91, 138, 200, 0.18);
+  --warning: #ffc57b;
+  --danger: #ff9eae;
+  --success: #72ddb7;
+  --shadow: 0 34px 96px rgba(1, 8, 20, 0.62);
 }
 * {
   box-sizing: border-box;
@@ -90,18 +94,22 @@ body {
 :root[data-theme=dark] body {
   background:
     radial-gradient(
-      circle at top left,
-      rgba(108, 158, 235, 0.2),
-      transparent 34rem),
+      circle at 12% 0%,
+      rgba(86, 166, 255, 0.28),
+      transparent 30rem),
     radial-gradient(
-      circle at top right,
-      rgba(138, 164, 207, 0.12),
-      transparent 28rem),
+      circle at 88% 8%,
+      rgba(52, 197, 182, 0.14),
+      transparent 26rem),
+    radial-gradient(
+      circle at 50% 115%,
+      rgba(33, 86, 146, 0.4),
+      transparent 38rem),
     linear-gradient(
       180deg,
-      #1a2638 0%,
-      #101a28 45%,
-      #09111c 100%);
+      #162436 0%,
+      #0a1320 46%,
+      #030811 100%);
 }
 button,
 input,
@@ -402,7 +410,7 @@ pre {
 .workspace-grid {
   display: grid;
   flex: 1;
-  grid-template-columns: minmax(30rem, 36rem) minmax(0, 1fr);
+  grid-template-columns: clamp(34rem, 38vw, 42rem) minmax(0, 1fr);
   gap: 0.9rem;
   align-items: stretch;
   min-height: 0;
@@ -493,7 +501,7 @@ pre {
   min-height: 0;
   flex: 1;
   overflow: auto;
-  padding-right: 0.12rem;
+  padding-right: 0.4rem;
   scrollbar-gutter: stable;
 }
 .session-sidebar-empty {
@@ -1183,13 +1191,24 @@ pre {
   overflow: auto;
   padding-right: 0.2rem;
 }
+.hierarchy-timeline-empty-state {
+  padding: 0.8rem 0.55rem 0.4rem;
+  color: var(--muted-foreground);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
 .hierarchy-timeline-row {
   --timeline-time-column: 4.75rem;
   --timeline-column-gap: 0.45rem;
   --timeline-indent: 1rem;
   --timeline-gutter-base: 1.25rem;
   --timeline-connector-base: 0.22rem;
+  --timeline-row-padding-x: 0.55rem;
+  --timeline-card-radius: 12px;
+  --timeline-card-inset-y: 0.14rem;
   --timeline-gutter-width: calc( var(--timeline-depth, 0) * var(--timeline-indent) + var(--timeline-gutter-base) );
+  --timeline-card-left: calc( var(--timeline-row-padding-x) + var(--timeline-time-column) + var(--timeline-column-gap) + var(--timeline-gutter-width) );
+  --timeline-card-right: var(--timeline-row-padding-x);
   --timeline-row-color: rgba(92, 121, 171, 0.9);
   --timeline-bar-stroke: color-mix(in srgb, var(--timeline-row-color) 74%, white);
   --timeline-connector-color: color-mix( in srgb, var(--timeline-row-color) 28%, rgba(84, 100, 125, 0.18) );
@@ -1201,7 +1220,7 @@ pre {
   width: 100%;
   border: 0;
   background: transparent;
-  padding: 0.12rem 0.55rem;
+  padding: 0.12rem var(--timeline-row-padding-x);
   color: inherit;
   cursor: default;
   font: inherit;
@@ -1213,11 +1232,11 @@ pre {
 .hierarchy-timeline-row::before {
   content: "";
   position: absolute;
-  top: 0.14rem;
-  right: 0.55rem;
-  bottom: 0.14rem;
-  left: calc(0.55rem + var(--timeline-time-column) + var(--timeline-column-gap) + var(--timeline-gutter-width));
-  border-radius: 12px;
+  top: var(--timeline-card-inset-y);
+  right: var(--timeline-card-right);
+  bottom: var(--timeline-card-inset-y);
+  left: var(--timeline-card-left);
+  border-radius: var(--timeline-card-radius);
   border: 1px solid transparent;
   background: rgba(255, 255, 255, 0.42);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(32, 50, 76, 0.03);
@@ -1248,8 +1267,18 @@ pre {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(32, 50, 76, 0.02);
 }
 .hierarchy-timeline-row:focus-visible {
-  outline: 2px solid rgba(40, 93, 168, 0.22);
-  outline-offset: 2px;
+  outline: none;
+}
+.hierarchy-timeline-row:focus-visible::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--timeline-card-inset-y) - 0.08rem);
+  right: calc(var(--timeline-card-right) - 0.08rem);
+  bottom: calc(var(--timeline-card-inset-y) - 0.08rem);
+  left: calc(var(--timeline-card-left) - 0.08rem);
+  border-radius: calc(var(--timeline-card-radius) + 2px);
+  box-shadow: 0 0 0 2px rgba(40, 93, 168, 0.18);
+  pointer-events: none;
 }
 .hierarchy-timeline-row.is-in-path::before {
   background: rgba(240, 246, 255, 0.54);
@@ -1280,6 +1309,13 @@ pre {
 .hierarchy-timeline-row.is-guardrail {
   --timeline-row-color: rgba(184, 129, 44, 0.92);
 }
+.hierarchy-timeline-row.is-guardrail-trace {
+  --timeline-row-color: rgba(184, 129, 44, 0.92);
+}
+.hierarchy-timeline-row.is-guardrail-group::before {
+  border-color: color-mix(in srgb, var(--timeline-row-color) 18%, rgba(84, 100, 125, 0.08));
+  background: color-mix(in srgb, var(--timeline-row-color) 10%, rgba(255, 255, 255, 0.72));
+}
 .hierarchy-timeline-row.is-trace {
   --timeline-row-color: rgba(92, 121, 171, 0.9);
 }
@@ -1381,6 +1417,20 @@ pre {
   min-width: 0;
   flex-wrap: wrap;
 }
+.hierarchy-timeline-row-toggle-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.3rem;
+  padding: 0.12rem 0.46rem;
+  border-radius: 999px;
+  border: 1px solid rgba(184, 129, 44, 0.16);
+  background: rgba(184, 129, 44, 0.08);
+  color: #865815;
+  font-size: 0.67rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
 .hierarchy-timeline-row-flag {
   display: inline-flex;
   align-items: center;
@@ -1484,6 +1534,25 @@ pre {
   text-align: right;
   white-space: nowrap;
 }
+.hierarchy-timeline-row.is-guardrail-group .hierarchy-timeline-row-labels,
+.hierarchy-timeline-row.is-guardrail-compact .hierarchy-timeline-row-labels {
+  gap: 0.14rem;
+  padding-top: 0.42rem;
+  padding-bottom: 0.42rem;
+}
+.hierarchy-timeline-row.is-guardrail-group .hierarchy-timeline-row-bars,
+.hierarchy-timeline-row.is-guardrail-compact .hierarchy-timeline-row-bars {
+  padding-top: 0.42rem;
+  padding-bottom: 0.42rem;
+}
+.hierarchy-timeline-row.is-guardrail-group .hierarchy-timeline-row-title-text,
+.hierarchy-timeline-row.is-guardrail-compact .hierarchy-timeline-row-title-text {
+  font-size: 0.84rem;
+}
+.hierarchy-timeline-row.is-guardrail-group .hierarchy-timeline-row-meta,
+.hierarchy-timeline-row.is-guardrail-compact .hierarchy-timeline-row-meta {
+  font-size: 0.73rem;
+}
 .trace-detail-header {
   display: flex;
   align-items: flex-start;
@@ -1900,27 +1969,97 @@ pre {
   flex-wrap: wrap;
 }
 .session-tree-timeline-shell {
-  padding: 0 0.1rem 0.2rem 2.35rem;
+  padding: 0.08rem 0.1rem 0.24rem 0.5rem;
+}
+.session-tree-timeline-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+  padding: 0.1rem 0.2rem 0.45rem 0.08rem;
+}
+.session-tree-timeline-toolbar-copy {
+  color: var(--muted-foreground);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
 }
 .session-tree-timeline-list {
   display: flex;
   flex-direction: column;
-  gap: 0.45rem;
+  gap: 0;
 }
 .session-tree-timeline-list .hierarchy-timeline-row {
-  grid-template-columns: 4rem minmax(0, 1fr) minmax(6rem, 7.25rem);
-  gap: 0.4rem;
+  --timeline-time-column: 4.8rem;
+  --timeline-column-gap: 0.4rem;
+  --timeline-indent: 0.72rem;
+  --timeline-gutter-base: 0.75rem;
+  --embedded-bars-space: clamp(10.75rem, 49%, 15.6rem);
+  --timeline-row-padding-x: 0.18rem;
+  --timeline-card-radius: 18px;
+  --timeline-card-inset-y: 0.24rem;
+  --timeline-card-left: calc( var(--timeline-row-padding-x) + var(--timeline-time-column) + var(--timeline-column-gap) + var(--timeline-gutter-width) - 0.12rem );
+  --timeline-card-right: 0.1rem;
+  display: flex;
+  gap: var(--timeline-column-gap);
+  align-items: stretch;
+  max-width: 100%;
+  overflow: visible;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-time {
+  flex: 0 0 var(--timeline-time-column);
+  justify-content: flex-start;
+  text-align: left;
+  padding-right: 0;
+  padding-left: 0.08rem;
+  overflow: visible;
+  font-size: 0.74rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-branch {
+  flex: 1 1 0;
+  min-width: 0;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-labels {
-  padding: 0.72rem 0.5rem 0.72rem 1.05rem;
+  min-width: 0;
+  gap: 0.24rem;
+  padding: 0.84rem calc(var(--embedded-bars-space) + 0.8rem) 0.84rem 0.92rem;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-bars {
-  grid-template-columns: minmax(4.8rem, 1fr) auto;
-  column-gap: 0.35rem;
-  padding: 0.72rem 0.8rem 0.72rem 0.2rem;
+  position: absolute;
+  top: 0.84rem;
+  right: 0.92rem;
+  width: var(--embedded-bars-space);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.36rem;
+  padding: 0;
+  overflow: hidden;
+  z-index: 2;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-title {
-  flex-wrap: nowrap;
+  position: relative;
+  display: block;
+  min-height: 0;
+  padding-top: 2.05rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row.is-guardrail-group .hierarchy-timeline-row-labels,
+.session-tree-timeline-list .hierarchy-timeline-row.is-guardrail-compact .hierarchy-timeline-row-labels {
+  padding-top: 0.62rem;
+  padding-bottom: 0.62rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row.is-guardrail-group .hierarchy-timeline-row-title,
+.session-tree-timeline-list .hierarchy-timeline-row.is-guardrail-compact .hierarchy-timeline-row-title {
+  padding-top: 1.7rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row.is-guardrail-group .hierarchy-timeline-row-bars,
+.session-tree-timeline-list .hierarchy-timeline-row.is-guardrail-compact .hierarchy-timeline-row-bars {
+  top: 0.62rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row.has-semantic-indent .hierarchy-timeline-row-ancestor,
+.session-tree-timeline-list .hierarchy-timeline-row.has-semantic-indent .hierarchy-timeline-row-connector {
+  display: none;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-title-text,
 .session-tree-timeline-list .hierarchy-timeline-row-meta {
@@ -1929,13 +2068,53 @@ pre {
   white-space: nowrap;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-title-text {
-  font-size: 0.84rem;
+  display: block;
+  font-size: 0.86rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-pill {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-flag {
+  margin-top: 0.35rem;
+  margin-right: 0.35rem;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-meta,
 .session-tree-timeline-list .hierarchy-timeline-row-time,
 .session-tree-timeline-list .hierarchy-timeline-row-duration {
   font-size: 0.72rem;
 }
+.session-tree-timeline-list .hierarchy-timeline-row-track {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 1.3rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-track::before {
+  height: 0.4rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-bar {
+  width: max(0.65rem, calc(var(--timeline-span, 0.1) * 100%));
+  height: 0.65rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-bar::before,
+.session-tree-timeline-list .hierarchy-timeline-row-bar::after {
+  height: 0.9rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-duration {
+  flex: 0 0 auto;
+}
+.session-tree-timeline-list .hierarchy-timeline-row.is-active::before {
+  border-color: rgba(40, 93, 168, 0.16);
+  background: rgba(236, 244, 255, 0.9);
+  box-shadow: inset 2px 0 0 rgba(40, 93, 168, 0.54), 0 8px 20px rgba(32, 50, 76, 0.06);
+}
+.session-tree-timeline-list .hierarchy-timeline-row.is-detail-trace:not(.is-active)::before {
+  box-shadow: inset 2px 0 0 rgba(40, 93, 168, 0.42), 0 6px 18px rgba(32, 50, 76, 0.05);
+}
+.session-tree-timeline-list .hierarchy-timeline-row:focus-visible::after {
+  box-shadow: 0 0 0 2px rgba(40, 93, 168, 0.14);
+}
 .session-tree-timeline {
   display: inline-flex;
   min-width: 0;
@@ -2384,86 +2563,11 @@ pre {
   padding: 0.9rem 1rem;
   box-shadow: inset 3px 0 0 var(--message-accent), inset 0 1px 0 rgba(255, 255, 255, 0.72);
 }
-.message-insight-banner {
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
-  margin-bottom: 0.85rem;
-}
-.message-insight-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  padding: 0.7rem 0.8rem;
-  border: 1px solid rgba(184, 129, 44, 0.16);
-  border-radius: 12px;
-  background: rgba(255, 248, 236, 0.9);
-}
-.message-insight-card.is-highlight {
-  border-color: rgba(86, 107, 147, 0.16);
-  background: rgba(241, 246, 255, 0.88);
-}
-.message-insight-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.message-insight-card-tags,
 .structured-markup-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
 }
-.message-insight-card-copy {
-  color: var(--foreground);
-  font-size: 0.82rem;
-  line-height: 1.45;
-}
-.trace-insights-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
-}
-.trace-insight-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  padding: 0.78rem 0.85rem;
-  border: 1px solid rgba(86, 107, 147, 0.14);
-  border-radius: 12px;
-  background: rgba(243, 247, 255, 0.84);
-}
-.trace-insight-item.is-structured {
-  border-color: rgba(34, 154, 161, 0.16);
-  background: rgba(240, 252, 252, 0.9);
-}
-.trace-insight-item-header,
-.trace-insight-item-tags {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  flex-wrap: wrap;
-}
-.trace-insight-item-header {
-  justify-content: space-between;
-}
-.trace-insight-item-source {
-  color: var(--muted-foreground);
-  font-size: 0.74rem;
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Consolas,
-    monospace;
-}
-.trace-insight-item-copy {
-  color: var(--foreground);
-  font-size: 0.83rem;
-  line-height: 1.5;
-}
 .structured-markup-block {
   display: flex;
   flex-direction: column;
@@ -3139,7 +3243,6 @@ pre {
 :root[data-theme=dark] .trace-detail-subtitle,
 :root[data-theme=dark] .trace-detail-json-toggle,
 :root[data-theme=dark] .message-card-hint,
-:root[data-theme=dark] .trace-insight-item-source,
 :root[data-theme=dark] .tool-call-label,
 :root[data-theme=dark] .metadata-grid dt,
 :root[data-theme=dark] .metadata-secondary,
@@ -3381,6 +3484,10 @@ pre {
   background: rgba(36, 52, 77, 0.96);
   box-shadow: inset 3px 0 0 rgba(134, 184, 255, 0.82), 0 10px 22px rgba(2, 10, 24, 0.18);
 }
+:root[data-theme=dark] .hierarchy-timeline-row.is-guardrail-group::before {
+  border-color: color-mix(in srgb, var(--timeline-row-color) 24%, rgba(128, 153, 189, 0.12));
+  background: color-mix(in srgb, var(--timeline-row-color) 12%, rgba(20, 29, 43, 0.94));
+}
 :root[data-theme=dark] .hierarchy-timeline-row-gutter::before,
 :root[data-theme=dark] .hierarchy-timeline-row-gutter::after {
   background: color-mix(in srgb, var(--timeline-row-color) 24%, rgba(128, 153, 189, 0.14));
@@ -3402,6 +3509,11 @@ pre {
   background: rgba(184, 129, 44, 0.18);
   color: #f0c780;
 }
+:root[data-theme=dark] .hierarchy-timeline-row-toggle-label {
+  border-color: rgba(240, 199, 128, 0.18);
+  background: rgba(184, 129, 44, 0.16);
+  color: #f0c780;
+}
 :root[data-theme=dark] .trace-detail-breadcrumb {
   color: rgba(182, 197, 219, 0.74);
 }
@@ -3549,22 +3661,6 @@ pre {
 :root[data-theme=dark] .tool-call-bubble {
   --expandable-fade-color: rgba(44, 31, 16, 0.99);
 }
-:root[data-theme=dark] .message-insight-card {
-  border-color: rgba(184, 129, 44, 0.24);
-  background: rgba(61, 45, 18, 0.8);
-}
-:root[data-theme=dark] .message-insight-card.is-highlight {
-  border-color: rgba(86, 107, 147, 0.24);
-  background: rgba(27, 38, 57, 0.82);
-}
-:root[data-theme=dark] .trace-insight-item {
-  border-color: rgba(86, 107, 147, 0.24);
-  background: rgba(27, 38, 57, 0.82);
-}
-:root[data-theme=dark] .trace-insight-item.is-structured {
-  border-color: rgba(34, 154, 161, 0.22);
-  background: rgba(14, 43, 46, 0.58);
-}
 :root[data-theme=dark] .structured-markup-pre {
   border-color: rgba(34, 154, 161, 0.22);
   background: rgba(14, 43, 46, 0.58);
@@ -3872,6 +3968,10 @@ pre {
   .session-tree-timeline-meta {
     justify-content: flex-start;
   }
+  .session-tree-timeline-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
   .trace-detail-secondary .hierarchy-timeline-axis,
   .trace-detail-secondary .hierarchy-timeline-row {
     grid-template-columns: minmax(0, 1fr);