@mtharrison/loupe 1.0.0 → 1.0.1

package/dist/client/app.css

@@ -97,6 +97,17 @@ select {
 button {
   cursor: pointer;
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 pre {
   margin: 0;
   white-space: pre-wrap;
@@ -421,7 +432,12 @@ pre {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  padding: 0.95rem 0.95rem 0;
+  margin: 0.4rem 0.4rem 0;
+  padding: 0.88rem 0.92rem;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(250, 252, 255, 0.9);
+  box-shadow: 0 8px 22px rgba(32, 50, 76, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 .session-sidebar-toolbar-copy {
   display: flex;
@@ -551,10 +567,10 @@ pre {
 .theme-switch {
   display: inline-flex;
   align-items: center;
-  gap: 0.28rem;
-  min-height: 2.75rem;
-  padding: 0.18rem;
-  border-radius: 14px;
+  gap: 0.18rem;
+  min-height: 2.5rem;
+  padding: 0.14rem;
+  border-radius: 999px;
   border: 1px solid var(--line);
   background: rgba(245, 249, 253, 0.92);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
@@ -563,13 +579,15 @@ pre {
 .theme-switch-button {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: center;
+  gap: 0;
   border: 0;
   background: transparent;
   color: var(--muted-foreground);
-  border-radius: 10px;
-  min-height: 2.35rem;
-  padding: 0.5rem 0.92rem;
+  border-radius: 999px;
+  width: 2.2rem;
+  min-height: 2.2rem;
+  padding: 0;
   font-weight: 650;
   line-height: 1;
 }
@@ -578,6 +596,11 @@ pre {
   color: var(--primary-strong);
   box-shadow: inset 0 0 0 1px rgba(40, 93, 168, 0.2), 0 1px 2px rgba(19, 46, 72, 0.08);
 }
+.tag-filter-toggle.is-active {
+  border-color: rgba(40, 93, 168, 0.2);
+  background: rgba(40, 93, 168, 0.08);
+  color: var(--primary-strong);
+}
 .clear-traces-button.is-confirming {
   border-color: rgba(181, 82, 93, 0.34);
   background: rgba(181, 82, 93, 0.08);
@@ -1017,13 +1040,16 @@ pre {
   line-height: 1.4;
 }
 .hierarchy-timeline-axis {
+  --timeline-time-column: 4.75rem;
+  --timeline-column-gap: 0.45rem;
   display: grid;
-  grid-template-columns: 4.75rem minmax(0, 1fr) minmax(13rem, 19rem);
-  gap: 0.75rem;
+  grid-template-columns: var(--timeline-time-column) minmax(0, 1fr) minmax(13rem, 19rem);
+  gap: var(--timeline-column-gap);
   align-items: end;
 }
 .hierarchy-timeline-axis-track,
 .hierarchy-timeline-row-track {
+  box-sizing: border-box;
   background-image:
     linear-gradient(
       90deg,
@@ -1036,6 +1062,7 @@ pre {
 .hierarchy-timeline-axis-track {
   position: relative;
   height: 1.6rem;
+  padding: 0 0.82rem 0 0.18rem;
 }
 .hierarchy-timeline-axis-track::before {
   content: "";
@@ -1085,22 +1112,28 @@ pre {
 .hierarchy-timeline-list {
   display: flex;
   flex-direction: column;
-  gap: 0.22rem;
+  gap: 0;
   max-height: 28rem;
   overflow: auto;
   padding-right: 0.2rem;
 }
 .hierarchy-timeline-row {
+  --timeline-time-column: 4.75rem;
+  --timeline-column-gap: 0.45rem;
+  --timeline-indent: 0.94rem;
+  --timeline-gutter-base: 1.16rem;
+  --timeline-gutter-width: calc( var(--timeline-depth, 0) * var(--timeline-indent) + var(--timeline-gutter-base) );
+  --timeline-branch-offset: calc( var(--timeline-depth, 0) * var(--timeline-indent) + 0.12rem );
   --timeline-row-color: rgba(69, 104, 222, 0.88);
+  position: relative;
   display: grid;
-  grid-template-columns: 4.75rem minmax(0, 1fr) minmax(13rem, 19rem);
-  gap: 0.75rem;
+  grid-template-columns: var(--timeline-time-column) minmax(0, 1fr) minmax(13rem, 19rem);
+  gap: var(--timeline-column-gap);
   align-items: center;
   width: 100%;
-  padding: 0.44rem 0.55rem;
-  border-radius: 12px;
-  border: 1px solid transparent;
-  background: rgba(255, 255, 255, 0.42);
+  border: 0;
+  background: transparent;
+  padding: 0.12rem 0.55rem;
   color: inherit;
   cursor: default;
   font: inherit;
@@ -1109,38 +1142,59 @@ pre {
   content-visibility: auto;
   contain-intrinsic-size: 3rem;
 }
+.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;
+  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);
+  pointer-events: none;
+  z-index: 0;
+}
+.hierarchy-timeline-row > * {
+  position: relative;
+  z-index: 1;
+}
 .hierarchy-timeline-row.is-clickable {
   cursor: pointer;
+}
+.hierarchy-timeline-row.is-clickable::before {
   border-color: rgba(40, 93, 168, 0.08);
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.72);
   box-shadow: 0 6px 18px rgba(32, 50, 76, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.72);
 }
-.hierarchy-timeline-row.is-clickable:hover {
+.hierarchy-timeline-row.is-clickable:hover::before {
   border-color: rgba(40, 93, 168, 0.14);
   background: rgba(242, 248, 255, 0.86);
 }
 .hierarchy-timeline-row.is-structure {
-  border-style: dashed;
-  border-color: rgba(84, 100, 125, 0.08);
-  background: rgba(255, 255, 255, 0.24);
-  box-shadow: none;
+}
+.hierarchy-timeline-row.is-structure::before {
+  border-color: color-mix(in srgb, var(--timeline-row-color) 12%, rgba(84, 100, 125, 0.08));
+  background: color-mix(in srgb, var(--timeline-row-color) 5%, rgba(255, 255, 255, 0.56));
+  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;
 }
-.hierarchy-timeline-row.is-in-path {
+.hierarchy-timeline-row.is-in-path::before {
   background: rgba(240, 246, 255, 0.54);
 }
-.hierarchy-timeline-row.is-structure.is-in-path {
+.hierarchy-timeline-row.is-structure.is-in-path::before {
   background: rgba(240, 246, 255, 0.38);
 }
-.hierarchy-timeline-row.is-detail-trace:not(.is-active) {
+.hierarchy-timeline-row.is-detail-trace:not(.is-active)::before {
   border-color: rgba(40, 93, 168, 0.16);
   background: rgba(238, 246, 255, 0.76);
   box-shadow: inset 2px 0 0 rgba(40, 93, 168, 0.58), 0 8px 18px rgba(32, 50, 76, 0.05);
 }
-.hierarchy-timeline-row.is-active {
+.hierarchy-timeline-row.is-active::before {
   border-color: rgba(40, 93, 168, 0.18);
   background: rgba(234, 243, 255, 0.82);
   box-shadow: inset 3px 0 0 rgba(40, 93, 168, 0.74), 0 8px 20px rgba(32, 50, 76, 0.06);
@@ -1162,6 +1216,10 @@ pre {
   --timeline-row-color: rgba(61, 108, 225, 0.9);
 }
 .hierarchy-timeline-row-time {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   color: var(--muted-foreground);
   font-family:
     ui-monospace,
@@ -1174,26 +1232,47 @@ pre {
   text-align: right;
   white-space: nowrap;
 }
-.hierarchy-timeline-row-labels {
+.hierarchy-timeline-row-branch {
+  display: grid;
+  grid-template-columns: var(--timeline-gutter-width) minmax(0, 1fr);
+  align-items: stretch;
+  min-width: 0;
+}
+.hierarchy-timeline-row-gutter {
   position: relative;
-  display: flex;
   min-width: 0;
-  flex-direction: column;
-  gap: 0.15rem;
-  padding-left: calc(var(--timeline-depth, 0) * 0.95rem);
 }
-.hierarchy-timeline-row-labels::before {
+.hierarchy-timeline-row-gutter::before {
   content: "";
   position: absolute;
-  left: calc(var(--timeline-depth, 0) * 0.95rem - 0.42rem);
-  top: 0.2rem;
-  bottom: 0.2rem;
+  top: -0.14rem;
+  left: var(--timeline-branch-offset);
+  bottom: -0.14rem;
   width: 1px;
-  background: rgba(84, 100, 125, 0.12);
+  background: color-mix(in srgb, var(--timeline-row-color) 18%, rgba(84, 100, 125, 0.12));
+}
+.hierarchy-timeline-row-gutter::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: var(--timeline-branch-offset);
+  right: 0.08rem;
+  height: 1px;
+  background: color-mix(in srgb, var(--timeline-row-color) 18%, rgba(84, 100, 125, 0.12));
+  transform: translateY(-50%);
 }
-.hierarchy-timeline-row.is-root .hierarchy-timeline-row-labels::before {
+.hierarchy-timeline-row.is-root .hierarchy-timeline-row-gutter::before,
+.hierarchy-timeline-row.is-root .hierarchy-timeline-row-gutter::after {
   display: none;
 }
+.hierarchy-timeline-row-labels {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.18rem;
+  padding: 0.58rem 0 0.58rem 0.82rem;
+}
 .hierarchy-timeline-row-title {
   display: flex;
   align-items: center;
@@ -1218,6 +1297,7 @@ pre {
 .hierarchy-timeline-row.is-structure .hierarchy-timeline-row-title-text {
   font-size: 0.88rem;
   font-weight: 600;
+  color: color-mix(in srgb, var(--timeline-row-color) 42%, var(--foreground));
 }
 .hierarchy-timeline-row.is-structure .hierarchy-timeline-row-meta {
   font-size: 0.74rem;
@@ -1229,6 +1309,7 @@ pre {
   column-gap: 0.65rem;
   row-gap: 0.45rem;
   align-items: center;
+  padding: 0.58rem 0.82rem 0.58rem 0.18rem;
 }
 .hierarchy-timeline-row-track {
   grid-area: track;
@@ -1330,7 +1411,31 @@ pre {
   min-width: 0;
   flex: 1;
   flex-direction: column;
-  gap: 0.45rem;
+  gap: 0.55rem;
+}
+.trace-detail-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.28rem 0.4rem;
+  color: var(--muted-foreground);
+  font-size: 0.8rem;
+  font-weight: 650;
+  line-height: 1.4;
+}
+.trace-detail-breadcrumb-separator {
+  width: 0.9rem;
+  height: 0.9rem;
+  color: rgba(84, 100, 125, 0.5);
+}
+.trace-detail-breadcrumb-segment {
+  white-space: nowrap;
+}
+.trace-detail-breadcrumb-segment.is-current {
+  border-radius: 999px;
+  padding: 0.18rem 0.56rem;
+  background: rgba(40, 93, 168, 0.08);
+  color: var(--primary-strong);
 }
 .trace-detail-title-row {
   display: flex;
@@ -1341,7 +1446,7 @@ pre {
 }
 .trace-detail-title-row h2 {
   margin: 0;
-  font-size: 1.24rem;
+  font-size: 1.34rem;
   letter-spacing: -0.02em;
 }
 .trace-detail-heading p {
@@ -1351,7 +1456,8 @@ pre {
 }
 .trace-detail-subtitle {
   color: var(--muted-foreground);
-  font-size: 0.84rem;
+  font-size: 0.82rem;
+  line-height: 1.45;
 }
 .trace-detail-meta {
   display: flex;
@@ -1454,6 +1560,11 @@ pre {
   justify-content: space-between;
   gap: 0.65rem;
 }
+.trace-detail-json-toggle {
+  min-height: 2.4rem;
+  padding: 0.52rem 0.82rem;
+  color: var(--muted-foreground);
+}
 .trace-detail-scroll {
   min-height: 0;
   flex: 1;
@@ -1671,6 +1782,18 @@ pre {
   color: var(--foreground);
   opacity: 1;
 }
+.detail-tabs {
+  padding: 0.24rem;
+  border-radius: 16px;
+  background: rgba(243, 247, 251, 0.98);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(32, 50, 76, 0.04);
+}
+.detail-tabs .tabs-trigger {
+  padding: 0.62rem 0.94rem;
+  font-size: 0.84rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
 .tabs-root[data-value=conversation] .tabs-trigger[data-tab-value=conversation],
 .tabs-root[data-value=request] .tabs-trigger[data-tab-value=request],
 .tabs-root[data-value=response] .tabs-trigger[data-tab-value=response],
@@ -1922,19 +2045,21 @@ pre {
 }
 .expandable-toggle {
   align-self: flex-start;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
+  margin-top: 0.22rem;
+  border: 1px solid rgba(40, 93, 168, 0.12);
+  border-radius: 999px;
+  background: rgba(40, 93, 168, 0.06);
   color: var(--primary-strong);
   cursor: pointer;
-  font-size: 0.82rem;
+  font-size: 0.78rem;
   font-weight: 650;
   line-height: 1;
-  padding: 0;
+  padding: 0.42rem 0.7rem;
 }
 .expandable-toggle:hover {
-  text-decoration: underline;
-  text-underline-offset: 0.18em;
+  text-decoration: none;
+  border-color: rgba(40, 93, 168, 0.18);
+  background: rgba(40, 93, 168, 0.1);
 }
 .conversation-bubble p {
   margin: 0;
@@ -2527,6 +2652,16 @@ pre {
   color: var(--primary-strong);
   box-shadow: inset 0 0 0 1px rgba(134, 184, 255, 0.2), 0 1px 2px rgba(1, 7, 18, 0.24);
 }
+:root[data-theme=dark] .tag-filter-toggle.is-active {
+  border-color: rgba(134, 184, 255, 0.24);
+  background: rgba(134, 184, 255, 0.14);
+  color: var(--primary-strong);
+}
+:root[data-theme=dark] .session-sidebar-toolbar {
+  border-color: rgba(128, 153, 189, 0.14);
+  background: rgba(16, 24, 36, 0.82);
+  box-shadow: 0 10px 24px rgba(2, 10, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
 :root[data-theme=dark] .trace-group-button,
 :root[data-theme=dark] .nav-item,
 :root[data-theme=dark] .tree-node-card,
@@ -2622,33 +2757,37 @@ pre {
   color: color-mix(in srgb, var(--semantic-badge-color) 74%, white);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
-:root[data-theme=dark] .hierarchy-timeline-row {
-  background: rgba(22, 32, 47, 0.52);
-}
 :root[data-theme=dark] .hierarchy-timeline-hint {
   color: rgba(182, 197, 219, 0.72);
 }
-:root[data-theme=dark] .hierarchy-timeline-row.is-clickable {
+:root[data-theme=dark] .hierarchy-timeline-row::before {
+  background: rgba(22, 32, 47, 0.52);
+}
+:root[data-theme=dark] .hierarchy-timeline-row.is-clickable::before {
   border-color: rgba(134, 184, 255, 0.12);
   background: rgba(24, 35, 52, 0.74);
   box-shadow: 0 8px 20px rgba(2, 10, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
-:root[data-theme=dark] .hierarchy-timeline-row.is-structure {
-  border-color: rgba(128, 153, 189, 0.08);
-  background: rgba(18, 27, 40, 0.26);
+:root[data-theme=dark] .hierarchy-timeline-row.is-clickable:hover::before {
+  border-color: rgba(134, 184, 255, 0.2);
+  background: rgba(29, 43, 64, 0.88);
+}
+:root[data-theme=dark] .hierarchy-timeline-row.is-structure::before {
+  border-color: color-mix(in srgb, var(--timeline-row-color) 18%, rgba(128, 153, 189, 0.08));
+  background: color-mix(in srgb, var(--timeline-row-color) 8%, rgba(18, 27, 40, 0.4));
 }
-:root[data-theme=dark] .hierarchy-timeline-row.is-in-path {
+:root[data-theme=dark] .hierarchy-timeline-row.is-in-path::before {
   background: rgba(27, 40, 60, 0.7);
 }
-:root[data-theme=dark] .hierarchy-timeline-row.is-structure.is-in-path {
+:root[data-theme=dark] .hierarchy-timeline-row.is-structure.is-in-path::before {
   background: rgba(24, 35, 52, 0.38);
 }
-:root[data-theme=dark] .hierarchy-timeline-row.is-detail-trace:not(.is-active) {
+:root[data-theme=dark] .hierarchy-timeline-row.is-detail-trace:not(.is-active)::before {
   border-color: rgba(134, 184, 255, 0.16);
   background: rgba(26, 38, 57, 0.84);
   box-shadow: inset 2px 0 0 rgba(134, 184, 255, 0.6), 0 8px 18px rgba(2, 10, 24, 0.18);
 }
-:root[data-theme=dark] .hierarchy-timeline-row.is-active {
+:root[data-theme=dark] .hierarchy-timeline-row.is-active::before {
   border-color: rgba(134, 184, 255, 0.2);
   background: rgba(31, 45, 66, 0.94);
   box-shadow: inset 3px 0 0 rgba(134, 184, 255, 0.82), 0 10px 22px rgba(2, 10, 24, 0.18);
@@ -2660,6 +2799,13 @@ pre {
 :root[data-theme=dark] .hierarchy-timeline-title {
   color: rgba(182, 197, 219, 0.78);
 }
+: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));
+}
+:root[data-theme=dark] .hierarchy-timeline-row.is-structure .hierarchy-timeline-row-title-text {
+  color: color-mix(in srgb, var(--timeline-row-color) 48%, white);
+}
 :root[data-theme=dark] .hierarchy-timeline-row-inspect {
   border-color: rgba(134, 184, 255, 0.18);
   background: rgba(134, 184, 255, 0.12);
@@ -2669,12 +2815,26 @@ pre {
   border-color: rgba(134, 184, 255, 0.24);
   background: rgba(134, 184, 255, 0.18);
 }
+:root[data-theme=dark] .trace-detail-breadcrumb {
+  color: rgba(182, 197, 219, 0.74);
+}
+:root[data-theme=dark] .trace-detail-breadcrumb-separator {
+  color: rgba(182, 197, 219, 0.42);
+}
+:root[data-theme=dark] .trace-detail-breadcrumb-segment.is-current {
+  background: rgba(134, 184, 255, 0.14);
+  color: rgba(186, 214, 255, 0.96);
+}
+:root[data-theme=dark] .trace-detail-subtitle,
+:root[data-theme=dark] .trace-detail-json-toggle {
+  color: rgba(182, 197, 219, 0.74);
+}
 :root[data-theme=dark] .hierarchy-timeline-row-title-text {
   color: var(--foreground);
 }
 :root[data-theme=dark] .hierarchy-timeline-axis-track::before,
 :root[data-theme=dark] .hierarchy-timeline-axis-tick::before,
-:root[data-theme=dark] .hierarchy-timeline-row-labels::before,
+:root[data-theme=dark] .hierarchy-timeline-row-gutter::before,
 :root[data-theme=dark] .hierarchy-timeline-row-track::before {
   background: rgba(128, 153, 189, 0.14);
 }
@@ -2706,6 +2866,10 @@ pre {
 :root[data-theme=dark] .tabs-list {
   background: rgba(16, 24, 36, 0.92);
 }
+:root[data-theme=dark] .detail-tabs {
+  background: rgba(16, 24, 36, 0.96);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(1, 7, 18, 0.22);
+}
 :root[data-theme=dark] .tabs-trigger:hover {
   background: rgba(134, 184, 255, 0.08);
   color: var(--foreground);
@@ -2806,6 +2970,15 @@ pre {
   background: rgba(29, 42, 60, 0.92);
   border-color: rgba(128, 153, 189, 0.12);
 }
+:root[data-theme=dark] .expandable-toggle {
+  border-color: rgba(134, 184, 255, 0.18);
+  background: rgba(134, 184, 255, 0.1);
+  color: rgba(186, 214, 255, 0.96);
+}
+:root[data-theme=dark] .expandable-toggle:hover {
+  border-color: rgba(134, 184, 255, 0.24);
+  background: rgba(134, 184, 255, 0.16);
+}
 :root[data-theme=dark] .workspace-grid::-webkit-scrollbar-thumb {
   background: rgba(128, 153, 189, 0.28);
 }
@@ -2877,10 +3050,12 @@ pre {
     padding-right: 0;
   }
   .hierarchy-timeline-axis {
-    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(11rem, 1fr);
+    --timeline-time-column: 4.5rem;
+    grid-template-columns: var(--timeline-time-column) minmax(0, 1fr) minmax(11rem, 1fr);
   }
   .hierarchy-timeline-row {
-    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(11rem, 1fr);
+    --timeline-time-column: 4.5rem;
+    grid-template-columns: var(--timeline-time-column) minmax(0, 1fr) minmax(11rem, 1fr);
   }
   .sheet-panel {
     width: min(100vw, 48rem);
@@ -2969,6 +3144,17 @@ pre {
   .trace-detail-secondary .hierarchy-timeline-row-time {
     text-align: left;
   }
+  .trace-detail-secondary .hierarchy-timeline-row::before {
+    top: 1.7rem;
+    left: 0;
+    right: 0;
+  }
+  .trace-detail-secondary .hierarchy-timeline-row-branch {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .trace-detail-secondary .hierarchy-timeline-row-gutter {
+    display: none;
+  }
   .trace-detail-secondary .hierarchy-timeline-row-bars {
     grid-column: auto;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -2989,10 +3175,24 @@ pre {
   }
   .hierarchy-timeline-row {
     grid-template-columns: minmax(0, 1fr);
+    padding-left: 0;
+    padding-right: 0;
   }
   .hierarchy-timeline-row-time {
+    justify-content: flex-start;
     text-align: left;
   }
+  .hierarchy-timeline-row::before {
+    top: 1.7rem;
+    left: 0;
+    right: 0;
+  }
+  .hierarchy-timeline-row-branch {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .hierarchy-timeline-row-gutter {
+    display: none;
+  }
   .hierarchy-timeline-row-bars {
     grid-column: auto;
     grid-template-columns: minmax(0, 1fr) auto;

package/dist/client/app.js

@@ -21696,25 +21696,35 @@ var init_check = __esm({
   }
 });
 
+// node_modules/lucide-react/dist/esm/icons/chevron-right.js
+var __iconNode6, ChevronRight;
+var init_chevron_right = __esm({
+  "node_modules/lucide-react/dist/esm/icons/chevron-right.js"() {
+    init_createLucideIcon();
+    __iconNode6 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+    ChevronRight = createLucideIcon("chevron-right", __iconNode6);
+  }
+});
+
 // node_modules/lucide-react/dist/esm/icons/copy.js
-var __iconNode6, Copy;
+var __iconNode7, Copy;
 var init_copy = __esm({
   "node_modules/lucide-react/dist/esm/icons/copy.js"() {
     init_createLucideIcon();
-    __iconNode6 = [
+    __iconNode7 = [
       ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
       ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
     ];
-    Copy = createLucideIcon("copy", __iconNode6);
+    Copy = createLucideIcon("copy", __iconNode7);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/funnel.js
-var __iconNode7, Funnel;
+var __iconNode8, Funnel;
 var init_funnel = __esm({
   "node_modules/lucide-react/dist/esm/icons/funnel.js"() {
     init_createLucideIcon();
-    __iconNode7 = [
+    __iconNode8 = [
       [
         "path",
         {
@@ -21723,16 +21733,16 @@ var init_funnel = __esm({
         }
       ]
     ];
-    Funnel = createLucideIcon("funnel", __iconNode7);
+    Funnel = createLucideIcon("funnel", __iconNode8);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/moon.js
-var __iconNode8, Moon;
+var __iconNode9, Moon;
 var init_moon = __esm({
   "node_modules/lucide-react/dist/esm/icons/moon.js"() {
     init_createLucideIcon();
-    __iconNode8 = [
+    __iconNode9 = [
       [
         "path",
         {
@@ -21741,45 +21751,45 @@ var init_moon = __esm({
         }
       ]
     ];
-    Moon = createLucideIcon("moon", __iconNode8);
+    Moon = createLucideIcon("moon", __iconNode9);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/network.js
-var __iconNode9, Network;
+var __iconNode10, Network;
 var init_network = __esm({
   "node_modules/lucide-react/dist/esm/icons/network.js"() {
     init_createLucideIcon();
-    __iconNode9 = [
+    __iconNode10 = [
       ["rect", { x: "16", y: "16", width: "6", height: "6", rx: "1", key: "4q2zg0" }],
       ["rect", { x: "2", y: "16", width: "6", height: "6", rx: "1", key: "8cvhb9" }],
       ["rect", { x: "9", y: "2", width: "6", height: "6", rx: "1", key: "1egb70" }],
       ["path", { d: "M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3", key: "1jsf9p" }],
       ["path", { d: "M12 12V8", key: "2874zd" }]
     ];
-    Network = createLucideIcon("network", __iconNode9);
+    Network = createLucideIcon("network", __iconNode10);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode10, Search;
+var __iconNode11, Search;
 var init_search = __esm({
   "node_modules/lucide-react/dist/esm/icons/search.js"() {
     init_createLucideIcon();
-    __iconNode10 = [
+    __iconNode11 = [
       ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
       ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
     ];
-    Search = createLucideIcon("search", __iconNode10);
+    Search = createLucideIcon("search", __iconNode11);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/sun.js
-var __iconNode11, Sun;
+var __iconNode12, Sun;
 var init_sun = __esm({
   "node_modules/lucide-react/dist/esm/icons/sun.js"() {
     init_createLucideIcon();
-    __iconNode11 = [
+    __iconNode12 = [
       ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
       ["path", { d: "M12 2v2", key: "tus03m" }],
       ["path", { d: "M12 20v2", key: "1lh1kg" }],
@@ -21790,20 +21800,20 @@ var init_sun = __esm({
       ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
       ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
     ];
-    Sun = createLucideIcon("sun", __iconNode11);
+    Sun = createLucideIcon("sun", __iconNode12);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode12, X;
+var __iconNode13, X;
 var init_x = __esm({
   "node_modules/lucide-react/dist/esm/icons/x.js"() {
     init_createLucideIcon();
-    __iconNode12 = [
+    __iconNode13 = [
       ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
       ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
     ];
-    X = createLucideIcon("x", __iconNode12);
+    X = createLucideIcon("x", __iconNode13);
   }
 });
 
@@ -21816,6 +21826,7 @@ var init_lucide_react = __esm({
     init_bot();
     init_boxes();
     init_check();
+    init_chevron_right();
     init_copy();
     init_moon();
     init_network();
@@ -37067,6 +37078,7 @@ function App() {
   const hasActiveFilters = Boolean(
     filters.search || filters.status || filters.kind || filters.tags
   );
+  const activeTagFilterCount = countTagFilters(filters.tags);
   const onFilterChange = (key, value) => {
     (0, import_react4.startTransition)(() => {
       setFilters((current) => ({ ...current, [key]: value }));
@@ -37243,11 +37255,7 @@ function App() {
                   eventsConnected ? "Connected" : "Reconnecting"
                 ]
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "inspector-meta", children: [
-              data.traces.total,
-              " stored"
-            ] })
+            )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "inspector-header-actions", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -37301,10 +37309,14 @@ function App() {
               Button,
               {
                 variant: "outline",
+                className: cn(
+                  "tag-filter-toggle",
+                  (showAdvancedFilters || activeTagFilterCount > 0) && "is-active"
+                ),
                 onClick: () => setShowAdvancedFilters((current) => !current),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Funnel, { "data-icon": "inline-start" }),
-                  showAdvancedFilters || filters.tags ? "Hide filters" : "More filters"
+                  showAdvancedFilters || filters.tags ? "Hide tag filters" : activeTagFilterCount > 0 ? `Tag filters \xB7 ${activeTagFilterCount}` : "Tag filters"
                 ]
               }
             ),
@@ -37413,10 +37425,12 @@ function ThemeSwitcher({
         type: "button",
         className: cn("theme-switch-button", theme === "light" && "is-active"),
         "aria-pressed": theme === "light",
+        "aria-label": "Use light theme",
+        title: "Light theme",
         onClick: () => onChange("light"),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Sun, { "data-icon": "inline-start" }),
-          "Light"
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: "Light theme" })
         ]
       }
     ),
@@ -37426,10 +37440,12 @@ function ThemeSwitcher({
         type: "button",
         className: cn("theme-switch-button", theme === "dark" && "is-active"),
         "aria-pressed": theme === "dark",
+        "aria-label": "Use dark theme",
+        title: "Dark theme",
         onClick: () => onChange("dark"),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Moon, { "data-icon": "inline-start" }),
-          "Dark"
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: "Dark theme" })
         ]
       }
     )
@@ -37523,20 +37539,29 @@ function HierarchyTimelineOverview({
           };
           const rowContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hierarchy-timeline-row-time", children: formatTimelineTimestamp(row.startedAt) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hierarchy-timeline-row-labels", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hierarchy-timeline-row-title", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hierarchy-timeline-row-title-text", children: row.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  Badge,
-                  {
-                    variant: "secondary",
-                    className: "hierarchy-timeline-pill",
-                    semantic: row.badge,
-                    children: row.badge
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hierarchy-timeline-row-meta", children: row.meta })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hierarchy-timeline-row-branch", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  className: "hierarchy-timeline-row-gutter",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hierarchy-timeline-row-labels", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hierarchy-timeline-row-title", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hierarchy-timeline-row-title-text", children: row.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    Badge,
+                    {
+                      variant: "secondary",
+                      className: "hierarchy-timeline-pill",
+                      semantic: row.badge,
+                      children: row.badge
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hierarchy-timeline-row-meta", children: row.meta })
+              ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hierarchy-timeline-row-bars", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -37612,13 +37637,32 @@ function TraceDetailPanel({
   const detailCopy = detail ? getTraceDisplayCopy(detail) : fallbackTrace ? getTraceDisplayCopy(fallbackTrace) : null;
   const detailStatus = detail?.status ?? fallbackTrace?.status ?? null;
   const detailDuration = detail ? formatTraceDuration(detail) : fallbackTrace ? fallbackTrace.durationMs == null ? "Running" : `${fallbackTrace.durationMs} ms` : null;
-  const detailSubtitle = detail ? detailCopy?.subtitle : fallbackTrace ? detailCopy?.subtitle : null;
+  const detailSubtitle = formatTraceProviderSummary(detail ?? fallbackTrace);
   const detailCostUsd = detail ? getUsageCostUsd(detail.usage) : fallbackTrace?.costUsd ?? null;
   const detailCostLabel = formatUsdCost(detailCostUsd);
   const hasSecondaryInspector = Boolean(detail && timelineModel);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "trace-detail-panel", role: "region", "aria-label": "Trace detail", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "trace-detail-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "trace-detail-heading", children: [
+        detailCopy?.pathParts?.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "trace-detail-breadcrumb", "aria-label": "Trace path", children: detailCopy.pathParts.map((part, index2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.Fragment, { children: [
+          index2 > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ChevronRight,
+            {
+              className: "trace-detail-breadcrumb-separator",
+              "aria-hidden": "true"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              className: cn(
+                "trace-detail-breadcrumb-segment",
+                index2 === detailCopy.pathParts.length - 1 && "is-current"
+              ),
+              children: part
+            }
+          )
+        ] }, `${part}-${index2}`)) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "trace-detail-title-row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: detailCopy?.title || "Loading trace" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "trace-detail-meta", children: [
@@ -37627,8 +37671,7 @@ function TraceDetailPanel({
             detailCostLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TraceMetricPill, { tone: "cost", children: detailCostLabel }) : null
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: detailCopy?.path || "Loading the full request and response context." }),
-        detailSubtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "trace-detail-subtitle", children: detailSubtitle }) : null
+        detailSubtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "trace-detail-subtitle", children: detailSubtitle }) : detailCopy?.path ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "trace-detail-subtitle", children: detailCopy.path }) : null
       ] }),
       onBack ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "trace-detail-actions", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "outline", onClick: onBack, children: "Show hierarchy" }) }) : null
     ] }),
@@ -37648,6 +37691,7 @@ function TraceDetailPanel({
                 Button,
                 {
                   variant: "outline",
+                  className: "trace-detail-json-toggle",
                   onClick: () => onToggleJsonMode(activeTab),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Boxes, { "data-icon": "inline-start" }),
@@ -38615,6 +38659,15 @@ function getHierarchyNodeCopy(node2, traceById) {
 }
 function getTraceDisplayCopy(trace) {
   const actor = trace.hierarchy.childActorId || trace.hierarchy.rootActorId;
+  const pathParts = getTracePathParts(trace);
+  return {
+    path: pathParts.join(" / "),
+    pathParts,
+    subtitle: formatList([actor, trace.provider, trace.model]),
+    title: getTraceTitle(trace)
+  };
+}
+function getTracePathParts(trace) {
   const pathParts = [
     `Session ${shortId(trace.hierarchy.sessionId)}`,
     trace.hierarchy.rootActorId
@@ -38633,11 +38686,13 @@ function getTraceDisplayCopy(trace) {
       pathParts.push(`Stage: ${trace.hierarchy.stage}`);
     }
   }
-  return {
-    path: pathParts.join(" / "),
-    subtitle: formatList([actor, trace.provider, trace.model]),
-    title: getTraceTitle(trace)
-  };
+  return pathParts;
+}
+function formatTraceProviderSummary(trace) {
+  if (!trace) {
+    return null;
+  }
+  return formatList([trace.provider, trace.model]);
 }
 function groupTracesForNav(items) {
   const groups = /* @__PURE__ */ new Map();
@@ -39003,6 +39058,12 @@ function mergeTagFilter(current, nextEntry) {
   }
   return [...existing, nextEntry].join(",");
 }
+function countTagFilters(value) {
+  if (!value.trim()) {
+    return 0;
+  }
+  return value.split(",").map((entry) => entry.trim()).filter(Boolean).length;
+}
 function getHierarchyNodeCostUsd(node2) {
   return typeof node2?.meta?.costUsd === "number" && Number.isFinite(node2.meta.costUsd) ? node2.meta.costUsd : null;
 }
@@ -39086,7 +39147,7 @@ function createCurrencyMetadataEntry(label, rawValue, secondary) {
     label,
     monospace: false,
     secondary,
-    value: formatUsdCost(rawValue) || `$${rawValue.toFixed(4)}`
+    value: formatUsdCost(rawValue) ?? "$0.0000"
   };
 }
 function getUsageSegmentCostUsd(usage, segment) {
@@ -39759,13 +39820,13 @@ var init_app = __esm({
     init_theme();
     import_jsx_runtime2 = __toESM(require_jsx_runtime());
     MESSAGE_COLLAPSE_CHAR_LIMIT = 900;
-    MESSAGE_COLLAPSE_LINE_LIMIT = 12;
-    MESSAGE_COLLAPSE_HEIGHT_PROSE = "6.5rem";
-    MESSAGE_COLLAPSE_HEIGHT_STRUCTURED = "10.75rem";
-    MESSAGE_COLLAPSE_CHAR_LIMIT_SYSTEM = 320;
-    MESSAGE_COLLAPSE_LINE_LIMIT_SYSTEM = 4;
-    MESSAGE_COLLAPSE_HEIGHT_PROSE_SYSTEM = "4.6rem";
-    MESSAGE_COLLAPSE_HEIGHT_STRUCTURED_SYSTEM = "7rem";
+    MESSAGE_COLLAPSE_LINE_LIMIT = 10;
+    MESSAGE_COLLAPSE_HEIGHT_PROSE = "9rem";
+    MESSAGE_COLLAPSE_HEIGHT_STRUCTURED = "9rem";
+    MESSAGE_COLLAPSE_CHAR_LIMIT_SYSTEM = 500;
+    MESSAGE_COLLAPSE_LINE_LIMIT_SYSTEM = 5;
+    MESSAGE_COLLAPSE_HEIGHT_PROSE_SYSTEM = "9rem";
+    MESSAGE_COLLAPSE_HEIGHT_STRUCTURED_SYSTEM = "9rem";
     TIMELINE_AXIS_STOPS = [0, 0.25, 0.5, 0.75, 1];
     STATUS_OPTIONS = [
       { label: "All statuses", value: "" },
@@ -39872,6 +39933,7 @@ lucide-react/dist/esm/icons/arrow-up-right.js:
 lucide-react/dist/esm/icons/bot.js:
 lucide-react/dist/esm/icons/boxes.js:
 lucide-react/dist/esm/icons/check.js:
+lucide-react/dist/esm/icons/chevron-right.js:
 lucide-react/dist/esm/icons/copy.js:
 lucide-react/dist/esm/icons/funnel.js:
 lucide-react/dist/esm/icons/moon.js:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mtharrison/loupe",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Lightweight local tracing dashboard for LLM calls",
   "author": "Matt Harrison",
   "license": "MIT",