@mtharrison/loupe 1.1.0 → 1.2.0

package/dist/client/app.css

@@ -1,3 +1,5 @@
+@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap";
+
 /* client/src/styles.css */
 :root {
   color-scheme: light;
@@ -19,28 +21,40 @@
   --shadow: 0 22px 60px rgba(30, 48, 72, 0.16);
   --radius: 22px;
   --page-gutter: 1.5rem;
+  --brand-font:
+    "Space Grotesk",
+    "Avenir Next",
+    "Segoe UI",
+    sans-serif;
 }
 :root[data-theme=dark] {
   color-scheme: dark;
-  --background: #0e1723;
-  --background-strong: #050b14;
-  --panel: rgba(18, 27, 40, 0.94);
-  --panel-strong: rgba(23, 33, 49, 0.98);
-  --panel-soft: rgba(88, 144, 219, 0.12);
-  --foreground: #e6edf8;
-  --muted-foreground: #95a8c1;
-  --line: rgba(128, 153, 189, 0.18);
-  --line-strong: rgba(116, 169, 255, 0.42);
-  --primary: #86b8ff;
-  --primary-strong: #d6e5ff;
-  --secondary: rgba(108, 142, 194, 0.14);
-  --warning: #e4b05c;
-  --danger: #ef8798;
-  --success: #69c59c;
-  --shadow: 0 28px 80px rgba(1, 8, 20, 0.48);
+  --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);
 }
 * {
   box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+*::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background: transparent;
 }
 html,
 body,
@@ -77,17 +91,17 @@ body {
   background:
     radial-gradient(
       circle at top left,
-      rgba(95, 137, 205, 0.24),
-      transparent 30rem),
+      rgba(108, 158, 235, 0.2),
+      transparent 34rem),
     radial-gradient(
       circle at top right,
-      rgba(194, 210, 231, 0.22),
-      transparent 24rem),
+      rgba(138, 164, 207, 0.12),
+      transparent 28rem),
     linear-gradient(
       180deg,
-      #cad6e2 0%,
-      #a5b7c9 42%,
-      #7c90a8 100%);
+      #1a2638 0%,
+      #101a28 45%,
+      #09111c 100%);
 }
 button,
 input,
@@ -179,14 +193,16 @@ pre {
   min-height: 100dvh;
   padding: var(--page-gutter);
   justify-items: center;
-  align-items: center;
+  align-items: stretch;
   justify-self: center;
+  width: 100%;
 }
 .board-shell {
   display: flex;
   flex: 1;
   flex-direction: column;
   height: 100%;
+  width: 100%;
   gap: 0.85rem;
   min-height: 0;
   overflow: hidden;
@@ -205,6 +221,7 @@ pre {
   box-shadow: 0 0 72px rgba(37, 57, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 .inspector-shell {
+  width: 100%;
   min-height: 0;
   gap: 0.9rem;
 }
@@ -247,10 +264,13 @@ pre {
   align-items: center;
   color: #132e48;
 }
-.brand-wordmark-svg {
+.brand-wordmark-text {
   display: block;
-  width: clamp(8rem, 13vw, 10.15rem);
-  height: auto;
+  font-family: var(--brand-font);
+  font-size: clamp(1.65rem, 2.5vw, 2.15rem);
+  font-weight: 700;
+  letter-spacing: -0.06em;
+  line-height: 0.95;
 }
 .brand-subtitle {
   color: var(--muted-foreground);
@@ -382,19 +402,18 @@ pre {
 .workspace-grid {
   display: grid;
   flex: 1;
-  grid-template-columns: minmax(40rem, 46rem) minmax(0, 1fr);
+  grid-template-columns: minmax(30rem, 36rem) minmax(0, 1fr);
   gap: 0.9rem;
-  align-items: start;
+  align-items: stretch;
   min-height: 0;
   overflow: auto;
   padding-right: 0.2rem;
 }
-.workspace-grid::-webkit-scrollbar {
-  width: 10px;
+.workspace-grid.is-sidebar-collapsed {
+  grid-template-columns: minmax(0, 1fr);
 }
-.workspace-grid::-webkit-scrollbar-thumb {
-  background: rgba(148, 163, 184, 0.22);
-  border-radius: 999px;
+.workspace-grid.is-sidebar-collapsed .session-sidebar-card {
+  display: none;
 }
 .ui-card {
   display: flex;
@@ -407,9 +426,11 @@ pre {
 }
 .sidebar-card {
   min-width: 0;
+  height: 100%;
 }
 .timeline-card {
   min-width: 0;
+  height: 100%;
 }
 .navigator-card,
 .content-card {
@@ -426,59 +447,69 @@ pre {
   min-height: 0;
   flex: 1;
   flex-direction: column;
+  padding: 0.8rem;
 }
-.session-sidebar-toolbar {
+.session-tree-section {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin: 0.4rem 0.4rem 0;
-  padding: 0.88rem 0.92rem;
+  flex-direction: column;
+  gap: 0.7rem;
+  min-height: 0;
+  flex: 1;
+  padding: 0.72rem 0.78rem;
   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 {
+.session-tree-header {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.session-tree-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   min-width: 0;
-  flex-direction: column;
-  gap: 0.18rem;
 }
-.session-sidebar-toolbar-title {
+.session-tree-title {
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--muted-foreground);
 }
-.session-sidebar-toolbar-meta {
+.session-tree-filter-badge {
+  min-height: 1.3rem;
+  padding: 0.12rem 0.44rem;
+  font-size: 0.66rem;
+}
+.session-tree-meta {
   color: var(--muted-foreground);
   font-size: 0.84rem;
 }
-.session-sidebar-select {
-  width: auto;
-  min-width: min(14rem, 100%);
-  max-width: 16rem;
-}
-.session-sidebar-shell .hierarchy-timeline-panel {
-  margin: 0;
-  flex: 1;
+.session-tree-scroll {
   min-height: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-.session-sidebar-shell .hierarchy-timeline-list {
-  max-height: none;
   flex: 1;
+  overflow: auto;
+  padding-right: 0.12rem;
+  scrollbar-gutter: stable;
 }
 .session-sidebar-empty {
   display: flex;
   flex: 1;
   min-height: 0;
-  padding: 0.95rem;
+  padding: 0.2rem;
+}
+.session-sidebar-empty-state {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.85rem;
 }
 .content-card {
   overflow: hidden;
@@ -533,12 +564,15 @@ pre {
 .sheet-close:focus-visible,
 .nav-item:focus-visible,
 .nav-switch-button:focus-visible,
+.session-tree-select:focus-visible,
 .theme-switch-button:focus-visible,
 .expandable-toggle:focus-visible,
 .tree-node-toggle:focus-visible,
 .tree-node-select:focus-visible,
 .trace-row:focus-visible,
 .tabs-trigger:focus-visible,
+.trace-detail-breadcrumb-segment:focus-visible,
+.ui-badge-button:focus-visible,
 .ui-input:focus-visible,
 .ui-select:focus-visible {
   outline: 2px solid rgba(40, 93, 168, 0.28);
@@ -601,6 +635,11 @@ pre {
   background: rgba(40, 93, 168, 0.08);
   color: var(--primary-strong);
 }
+.session-panel-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);
@@ -617,6 +656,18 @@ pre {
   letter-spacing: 0.03em;
   text-transform: uppercase;
 }
+.ui-badge-button {
+  border: 0;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    filter 160ms ease,
+    box-shadow 160ms ease;
+}
+.ui-badge-button:hover {
+  transform: translateY(-1px);
+  filter: brightness(0.98);
+}
 .ui-badge-secondary {
   background: rgba(73, 102, 148, 0.1);
   color: var(--muted-foreground);
@@ -628,20 +679,20 @@ pre {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
 }
 .ui-badge[data-semantic=session] {
-  --semantic-badge-color: rgba(54, 103, 214, 0.92);
+  --semantic-badge-color: rgba(86, 107, 147, 0.92);
 }
 .ui-badge[data-semantic=actor] {
-  --semantic-badge-color: rgba(71, 160, 92, 0.9);
+  --semantic-badge-color: rgba(60, 110, 214, 0.9);
 }
 .ui-badge[data-semantic=child-actor],
 .ui-badge[data-semantic=stage] {
-  --semantic-badge-color: rgba(130, 95, 214, 0.9);
+  --semantic-badge-color: rgba(34, 154, 161, 0.9);
 }
 .ui-badge[data-semantic=guardrail] {
-  --semantic-badge-color: rgba(219, 150, 58, 0.92);
+  --semantic-badge-color: rgba(184, 129, 44, 0.92);
 }
 .ui-badge[data-semantic=call] {
-  --semantic-badge-color: rgba(61, 108, 225, 0.9);
+  --semantic-badge-color: rgba(92, 121, 171, 0.9);
 }
 .ui-badge[data-semantic=system] {
   --semantic-badge-color: rgba(40, 93, 168, 0.92);
@@ -1135,11 +1186,13 @@ pre {
 .hierarchy-timeline-row {
   --timeline-time-column: 4.75rem;
   --timeline-column-gap: 0.45rem;
-  --timeline-indent: 0.94rem;
-  --timeline-gutter-base: 1.16rem;
+  --timeline-indent: 1rem;
+  --timeline-gutter-base: 1.25rem;
+  --timeline-connector-base: 0.22rem;
   --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);
+  --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) );
   position: relative;
   display: grid;
   grid-template-columns: var(--timeline-time-column) minmax(0, 1fr) minmax(13rem, 19rem);
@@ -1215,20 +1268,20 @@ pre {
   box-shadow: inset 3px 0 0 rgba(40, 93, 168, 0.74), 0 8px 20px rgba(32, 50, 76, 0.06);
 }
 .hierarchy-timeline-row.is-session {
-  --timeline-row-color: rgba(54, 103, 214, 0.92);
+  --timeline-row-color: rgba(86, 107, 147, 0.92);
 }
 .hierarchy-timeline-row.is-actor {
-  --timeline-row-color: rgba(71, 160, 92, 0.9);
+  --timeline-row-color: rgba(60, 110, 214, 0.9);
 }
 .hierarchy-timeline-row.is-child-actor,
 .hierarchy-timeline-row.is-stage {
-  --timeline-row-color: rgba(130, 95, 214, 0.9);
+  --timeline-row-color: rgba(34, 154, 161, 0.9);
 }
 .hierarchy-timeline-row.is-guardrail {
-  --timeline-row-color: rgba(219, 150, 58, 0.92);
+  --timeline-row-color: rgba(184, 129, 44, 0.92);
 }
 .hierarchy-timeline-row.is-trace {
-  --timeline-row-color: rgba(61, 108, 225, 0.9);
+  --timeline-row-color: rgba(92, 121, 171, 0.9);
 }
 .hierarchy-timeline-row-time {
   align-self: stretch;
@@ -1258,27 +1311,60 @@ pre {
   min-width: 0;
 }
 .hierarchy-timeline-row-gutter::before {
+  display: none;
+}
+.hierarchy-timeline-row-gutter::after {
+  display: none;
+}
+.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-ancestor,
+.hierarchy-timeline-row-connector {
+  position: absolute;
+  top: -0.15rem;
+  bottom: -0.15rem;
+  width: var(--timeline-indent);
+  left: calc(var(--timeline-connector-index, 0) * var(--timeline-indent) + var(--timeline-connector-base));
+}
+.hierarchy-timeline-row-ancestor::before,
+.hierarchy-timeline-row-connector-top,
+.hierarchy-timeline-row-connector-bottom {
   content: "";
   position: absolute;
-  top: -0.14rem;
-  left: var(--timeline-branch-offset);
-  bottom: -0.14rem;
+  left: calc(var(--timeline-indent) * 0.5);
   width: 1px;
-  background: color-mix(in srgb, var(--timeline-row-color) 18%, rgba(84, 100, 125, 0.12));
+  background: var(--timeline-connector-color);
 }
-.hierarchy-timeline-row-gutter::after {
-  content: "";
+.hierarchy-timeline-row-ancestor::before {
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+}
+.hierarchy-timeline-row-ancestor.has-line::before {
+  opacity: 1;
+}
+.hierarchy-timeline-row-connector-top {
+  top: 0;
+  bottom: 50%;
+}
+.hierarchy-timeline-row-connector-elbow {
   position: absolute;
   top: 50%;
-  left: var(--timeline-branch-offset);
-  right: 0.08rem;
+  left: calc(var(--timeline-indent) * 0.5);
+  width: calc(var(--timeline-indent) * 0.62);
   height: 1px;
-  background: color-mix(in srgb, var(--timeline-row-color) 18%, rgba(84, 100, 125, 0.12));
+  background: var(--timeline-connector-color);
   transform: translateY(-50%);
 }
-.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-connector-bottom {
+  top: 50%;
+  bottom: 0;
+  opacity: 0;
+}
+.hierarchy-timeline-row-connector-bottom.has-line {
+  opacity: 1;
 }
 .hierarchy-timeline-row-labels {
   position: relative;
@@ -1295,6 +1381,23 @@ pre {
   min-width: 0;
   flex-wrap: wrap;
 }
+.hierarchy-timeline-row-flag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.3rem;
+  padding: 0.12rem 0.42rem;
+  border-radius: 999px;
+  background: rgba(34, 154, 161, 0.1);
+  color: #1d6970;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.hierarchy-timeline-row-flag.is-highlight {
+  background: rgba(184, 129, 44, 0.1);
+  color: #865815;
+}
 .hierarchy-timeline-row-title-text {
   min-width: 0;
   font-size: 0.92rem;
@@ -1320,14 +1423,11 @@ pre {
 .hierarchy-timeline-row-bars {
   display: grid;
   grid-template-columns: minmax(10rem, 1fr) auto;
-  grid-template-areas: "track duration" "action action";
   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;
   position: relative;
   height: 1rem;
 }
@@ -1337,7 +1437,8 @@ pre {
   left: 0;
   right: 0;
   top: 50%;
-  height: 1px;
+  height: 0.3rem;
+  border-radius: 999px;
   background: rgba(84, 100, 125, 0.12);
   transform: translateY(-50%);
 }
@@ -1346,10 +1447,10 @@ pre {
   top: 50%;
   left: calc(var(--timeline-offset, 0) * 100%);
   width: max(0.5rem, calc(var(--timeline-span, 0.1) * 100%));
-  height: 0.72rem;
+  height: 0.5rem;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--timeline-row-color) 24%, transparent);
-  border: 1px solid color-mix(in srgb, var(--timeline-row-color) 72%, white);
+  background: color-mix(in srgb, var(--timeline-row-color) 24%, white);
+  border: 1px solid var(--timeline-bar-stroke);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 1px 2px rgba(32, 50, 76, 0.08);
   transform: translateY(-50%);
 }
@@ -1359,9 +1460,9 @@ pre {
   position: absolute;
   top: 50%;
   width: 2px;
-  height: 0.9rem;
+  height: 0.7rem;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--timeline-row-color) 92%, white);
+  background: var(--timeline-bar-stroke);
   transform: translateY(-50%);
 }
 .hierarchy-timeline-row-bar::before {
@@ -1371,7 +1472,6 @@ pre {
   right: -1px;
 }
 .hierarchy-timeline-row-duration {
-  grid-area: duration;
   color: var(--muted-foreground);
   font-family:
     ui-monospace,
@@ -1384,36 +1484,6 @@ pre {
   text-align: right;
   white-space: nowrap;
 }
-.hierarchy-timeline-row-action {
-  grid-area: action;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: 0;
-}
-.hierarchy-timeline-row-inspect {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-end;
-  min-height: 2rem;
-  padding: 0.42rem 0.72rem;
-  border: 1px solid rgba(40, 93, 168, 0.18);
-  border-radius: 999px;
-  border-color: rgba(40, 93, 168, 0.18);
-  background: rgba(40, 93, 168, 0.08);
-  color: var(--primary-strong);
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1;
-  pointer-events: none;
-  user-select: none;
-  white-space: nowrap;
-}
-.hierarchy-timeline-row.is-clickable:hover .hierarchy-timeline-row-inspect {
-  border-color: rgba(40, 93, 168, 0.26);
-  background: rgba(40, 93, 168, 0.12);
-}
 .trace-detail-header {
   display: flex;
   align-items: flex-start;
@@ -1444,13 +1514,34 @@ pre {
   color: rgba(84, 100, 125, 0.5);
 }
 .trace-detail-breadcrumb-segment {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
   white-space: nowrap;
+  transition:
+    color 160ms ease,
+    text-decoration-color 160ms ease,
+    background 160ms ease;
+}
+.trace-detail-breadcrumb-segment:hover {
+  color: var(--primary-strong);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
 }
 .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);
+  text-decoration: none;
+}
+.trace-detail-filter-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
 }
 .trace-detail-title-row {
   display: flex;
@@ -1521,8 +1612,9 @@ pre {
   flex: 1;
   min-height: 0;
   grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
   gap: 1rem;
-  align-items: start;
+  align-items: stretch;
 }
 .trace-detail-main.has-secondary-inspector {
   grid-template-columns: minmax(0, 2.05fr) minmax(14.5rem, 0.72fr);
@@ -1574,18 +1666,52 @@ pre {
   align-items: center;
   justify-content: space-between;
   gap: 0.65rem;
+  min-width: 0;
+}
+.trace-detail-tabs-shell {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+.trace-detail-tabs-shell::-webkit-scrollbar {
+  display: none;
+}
+.trace-detail-tabs-shell > .tabs-root {
+  min-width: max-content;
 }
 .trace-detail-json-toggle {
+  flex: 0 0 auto;
   min-height: 2.4rem;
   padding: 0.52rem 0.82rem;
   color: var(--muted-foreground);
 }
 .trace-detail-scroll {
+  display: flex;
+  flex-direction: column;
   min-height: 0;
   flex: 1;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
   padding-right: 0.2rem;
 }
+.trace-detail-pane {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+.trace-detail-pane > .detail-grid,
+.trace-detail-pane > .conversation-layout,
+.trace-detail-pane > .empty-state {
+  min-height: 100%;
+}
+.trace-detail-pane > .detail-grid {
+  align-content: start;
+}
 .trace-detail-empty {
   display: flex;
   min-height: 0;
@@ -1601,14 +1727,15 @@ pre {
   flex-direction: column;
   gap: 0.45rem;
   width: 100%;
-  padding-left: calc(var(--depth, 0) * 0.75rem);
   content-visibility: auto;
   contain-intrinsic-size: 4rem;
 }
 .tree-node-card {
-  display: flex;
+  --tree-timeline-width: minmax(8.75rem, 10.5rem);
+  display: grid;
+  grid-template-columns: 1.8rem minmax(0, 1fr);
   align-items: center;
-  gap: 0.7rem;
+  column-gap: 0.7rem;
   width: 100%;
   padding: 0.28rem;
   border-radius: 12px;
@@ -1626,6 +1753,14 @@ pre {
     0 0 0 1px rgba(40, 93, 168, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.72);
 }
+.tree-node-card.is-in-path:not(.is-active) {
+  border-color: rgba(40, 93, 168, 0.18);
+  background: rgba(247, 251, 255, 0.96);
+  box-shadow:
+    inset 2px 0 0 rgba(40, 93, 168, 0.42),
+    0 8px 18px rgba(32, 50, 76, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.72);
+}
 .tree-node-card.is-trace {
   background: rgba(246, 249, 253, 0.88);
   box-shadow: 0 4px 12px rgba(32, 50, 76, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
@@ -1670,24 +1805,45 @@ pre {
   cursor: default;
 }
 .tree-node-select {
-  display: flex;
-  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--tree-timeline-width);
   min-width: 0;
+  align-items: center;
+  gap: 0.85rem;
   text-align: left;
   font: inherit;
   padding: 0.48rem 0;
 }
-.tree-trace-select {
+.tree-structure-select {
   align-items: center;
-  justify-content: space-between;
-  gap: 0.85rem;
+}
+.tree-trace-select {
   padding: 0.48rem 0.1rem 0.48rem 0;
 }
+.tree-session-card {
+  align-items: flex-start;
+}
+.session-tree-select {
+  padding-right: 0.1rem;
+}
 .tree-node-copy {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 0.16rem;
+  padding-left: calc(var(--depth, 0) * 0.9rem);
+}
+.session-tree-copy {
+  gap: 0.32rem;
+}
+.tree-node-heading {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+}
+.tree-node-inline-badge {
+  flex: 0 0 auto;
 }
 .tree-trace-wrap {
   contain-intrinsic-size: 5.5rem;
@@ -1701,6 +1857,135 @@ pre {
   color: var(--muted-foreground);
   font-size: 0.8rem;
 }
+.session-tree-card-header,
+.session-tree-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+}
+.session-tree-card-title {
+  min-width: 0;
+  font-size: 0.92rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-tree-card-time {
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+  font-size: 0.74rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.session-tree-card-id {
+  min-width: 0;
+  color: var(--muted-foreground);
+  font-family:
+    "SFMono-Regular",
+    ui-monospace,
+    "Cascadia Code",
+    "Source Code Pro",
+    Menlo,
+    monospace;
+  font-size: 0.71rem;
+}
+.session-tree-card-badges {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+.session-tree-timeline-shell {
+  padding: 0 0.1rem 0.2rem 2.35rem;
+}
+.session-tree-timeline-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row {
+  grid-template-columns: 4rem minmax(0, 1fr) minmax(6rem, 7.25rem);
+  gap: 0.4rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-labels {
+  padding: 0.72rem 0.5rem 0.72rem 1.05rem;
+}
+.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;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-title {
+  flex-wrap: nowrap;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-title-text,
+.session-tree-timeline-list .hierarchy-timeline-row-meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-title-text {
+  font-size: 0.84rem;
+}
+.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 {
+  display: inline-flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.28rem;
+  align-items: stretch;
+}
+.session-tree-timeline-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+  color: var(--muted-foreground);
+  font-size: 0.68rem;
+  font-weight: 600;
+}
+.session-tree-timeline-start,
+.session-tree-timeline-duration {
+  white-space: nowrap;
+}
+.session-tree-timeline-track {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0.9rem;
+}
+.session-tree-timeline-track::before {
+  content: "";
+  position: absolute;
+  inset: 50% 0 auto;
+  height: 2px;
+  border-radius: 999px;
+  background: rgba(84, 100, 125, 0.18);
+  transform: translateY(-50%);
+}
+.session-tree-timeline-bar {
+  position: absolute;
+  left: calc(var(--session-tree-offset, 0) * 100%);
+  top: 50%;
+  width: max(0.5rem, calc(var(--session-tree-span, 0.08) * 100%));
+  height: 0.45rem;
+  border-radius: 999px;
+  border: 1px solid rgba(40, 93, 168, 0.28);
+  background:
+    linear-gradient(
+      90deg,
+      rgba(92, 121, 171, 0.22),
+      rgba(40, 93, 168, 0.52));
+  transform: translateY(-50%);
+}
 .tree-node-children {
   display: flex;
   flex-direction: column;
@@ -1798,16 +2083,22 @@ pre {
   opacity: 1;
 }
 .detail-tabs {
+  display: inline-flex;
+  width: max-content;
+  min-width: max-content;
+  flex-wrap: nowrap;
   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 {
+  flex: 0 0 auto;
   padding: 0.62rem 0.94rem;
   font-size: 0.84rem;
   font-weight: 700;
   letter-spacing: -0.01em;
+  white-space: nowrap;
 }
 .tabs-root[data-value=conversation] .tabs-trigger[data-tab-value=conversation],
 .tabs-root[data-value=request] .tabs-trigger[data-tab-value=request],
@@ -1955,12 +2246,60 @@ pre {
   display: flex;
   flex-direction: column;
   gap: 0;
+  min-width: 0;
 }
 .conversation-thread > * + * {
   margin-top: 0.95rem;
   padding-top: 0.95rem;
   border-top: 1px solid rgba(88, 105, 130, 0.12);
 }
+.conversation-context-rail {
+  display: none;
+  min-width: 0;
+}
+.conversation-context-rail-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.18rem;
+}
+.conversation-context-rail-title {
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+.conversation-context-rail-copy {
+  color: var(--muted-foreground);
+  font-size: 0.82rem;
+  line-height: 1.4;
+}
+.conversation-context-rail .detail-grid {
+  gap: 0.75rem;
+}
+.detail-inline-context-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(24rem, 32rem);
+  align-items: start;
+  gap: 1rem;
+  min-width: 0;
+}
+.detail-inline-context-main {
+  min-width: 0;
+}
+.detail-inline-context-layout .conversation-thread > * {
+  width: 100%;
+}
+.detail-inline-context-layout .conversation-thread .conversation-row {
+  width: 100%;
+  max-width: none;
+}
+.detail-inline-context-layout .conversation-context-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+}
 .conversation-row {
   --message-accent: rgba(120, 137, 159, 0.24);
   --message-border-color: rgba(88, 105, 130, 0.12);
@@ -1974,8 +2313,14 @@ pre {
   gap: 0.45rem;
   max-width: min(52rem, 100%);
 }
+.conversation-row.is-user,
+.conversation-row.is-assistant,
+.conversation-row.is-system,
+.conversation-row.is-tool,
+.conversation-row.is-tool-call {
+  align-self: flex-start;
+}
 .conversation-row.is-user {
-  align-self: flex-end;
   --message-accent: rgba(46, 181, 129, 0.58);
   --message-border-color: rgba(46, 181, 129, 0.28);
   --message-surface: rgba(232, 251, 242, 0.98);
@@ -1983,12 +2328,6 @@ pre {
   --message-label-border: rgba(46, 181, 129, 0.26);
   --message-label-surface: rgba(46, 181, 129, 0.16);
 }
-.conversation-row.is-assistant,
-.conversation-row.is-system,
-.conversation-row.is-tool,
-.conversation-row.is-tool-call {
-  align-self: flex-start;
-}
 .conversation-row.is-assistant {
   --message-accent: rgba(151, 96, 255, 0.48);
   --message-border-color: rgba(151, 96, 255, 0.24);
@@ -2045,8 +2384,120 @@ pre {
   padding: 0.9rem 1rem;
   box-shadow: inset 3px 0 0 var(--message-accent), inset 0 1px 0 rgba(255, 255, 255, 0.72);
 }
-.conversation-row.is-user .conversation-role {
-  align-self: flex-end;
+.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;
+  gap: 0.75rem;
+}
+.structured-markup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.structured-markup-pre {
+  margin: 0;
+  padding: 0.9rem 1rem;
+  border-radius: 12px;
+  border: 1px solid rgba(34, 154, 161, 0.18);
+  background: rgba(240, 252, 252, 0.92);
+  line-height: 1.5;
+  overflow: auto;
+}
+.structured-markup-token.is-tag-name {
+  color: #1b6a72;
+  font-weight: 700;
+}
+.structured-markup-token.is-tag-punctuation,
+.structured-markup-token.is-attr-punctuation {
+  color: var(--muted-foreground);
+}
+.structured-markup-token.is-attr-name {
+  color: #7a4d13;
+}
+.structured-markup-token.is-attr-value {
+  color: #245fd6;
 }
 .conversation-row.is-user .conversation-bubble {
   --expandable-fade-color: rgba(232, 251, 242, 0.98);
@@ -2624,7 +3075,7 @@ pre {
   line-height: 1.6;
 }
 :root[data-theme=dark] .background-glow {
-  opacity: 0.06;
+  opacity: 0.08;
 }
 :root[data-theme=dark] .glow-teal {
   background: rgba(134, 184, 255, 0.14);
@@ -2641,17 +3092,17 @@ pre {
       transparent 1px);
 }
 :root[data-theme=dark] .board-shell {
-  border-color: rgba(128, 153, 189, 0.16);
+  border-color: rgba(140, 164, 197, 0.22);
   background:
     linear-gradient(
       180deg,
-      rgba(18, 27, 40, 0.98),
-      rgba(11, 18, 29, 0.96)),
+      rgba(21, 31, 46, 0.98),
+      rgba(12, 19, 31, 0.98)),
     linear-gradient(
       135deg,
-      rgba(255, 255, 255, 0.04),
-      transparent);
-  box-shadow: 0 28px 90px rgba(1, 7, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+      rgba(157, 200, 255, 0.08),
+      transparent 60%);
+  box-shadow: 0 32px 96px rgba(1, 7, 18, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 :root[data-theme=dark] .brand-logo {
   border-color: rgba(128, 153, 189, 0.16);
@@ -2670,20 +3121,63 @@ pre {
 :root[data-theme=dark] .brand-wordmark {
   color: #f3f7ff;
 }
+:root[data-theme=dark] .brand-subtitle,
+:root[data-theme=dark] .ui-card-description,
+:root[data-theme=dark] .filter-label,
+:root[data-theme=dark] .session-tree-meta,
+:root[data-theme=dark] .session-tree-card-time,
+:root[data-theme=dark] .session-tree-card-id,
+:root[data-theme=dark] .trace-group-meta,
+:root[data-theme=dark] .nav-item-meta,
+:root[data-theme=dark] .trace-nav-meta-row,
+:root[data-theme=dark] .hierarchy-timeline-hint,
+:root[data-theme=dark] .hierarchy-timeline-row-time,
+:root[data-theme=dark] .hierarchy-timeline-row-meta,
+:root[data-theme=dark] .hierarchy-timeline-row-duration,
+:root[data-theme=dark] .hierarchy-timeline-meta,
+:root[data-theme=dark] .hierarchy-timeline-title,
+: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,
+:root[data-theme=dark] .kv-grid dt,
+:root[data-theme=dark] .timing-legend,
+:root[data-theme=dark] .muted-copy {
+  color: rgba(205, 217, 234, 0.92);
+}
+:root[data-theme=dark] .session-tree-card-title,
+:root[data-theme=dark] .trace-group-title,
+:root[data-theme=dark] .nav-item-title,
+:root[data-theme=dark] .trace-row-title,
+:root[data-theme=dark] .trace-detail-title-row h2,
+:root[data-theme=dark] .trace-detail-heading p strong,
+:root[data-theme=dark] .tree-node-label {
+  color: rgba(244, 248, 255, 0.98);
+}
 :root[data-theme=dark] .inspector-status,
 :root[data-theme=dark] .toolbar-card,
 :root[data-theme=dark] .ui-card,
 :root[data-theme=dark] .inspector-card,
 :root[data-theme=dark] .detail-section {
-  background: rgba(18, 27, 40, 0.78);
+  background: var(--panel);
 }
 :root[data-theme=dark] .inspector-status {
-  background: rgba(14, 21, 32, 0.78);
+  background: rgba(15, 23, 35, 0.96);
 }
 :root[data-theme=dark] .inspector-chip {
   background: rgba(134, 184, 255, 0.12);
   color: var(--primary-strong);
 }
+:root[data-theme=dark] .inspector-live-status {
+  color: rgba(216, 228, 243, 0.94);
+}
+:root[data-theme=dark] .inspector-live-status.is-live {
+  background: rgba(105, 197, 156, 0.14);
+  color: #99e0bf;
+}
 :root[data-theme=dark] .ui-button-outline,
 :root[data-theme=dark] .filter-input-shell,
 :root[data-theme=dark] .ui-select,
@@ -2692,8 +3186,9 @@ pre {
 :root[data-theme=dark] .metadata-action-button,
 :root[data-theme=dark] .sheet-close {
   border-color: var(--line);
-  background: rgba(20, 29, 43, 0.92);
+  background: var(--panel-strong);
   color: var(--foreground);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 :root[data-theme=dark] .ui-input::placeholder {
   color: rgba(149, 168, 193, 0.82);
@@ -2702,7 +3197,10 @@ pre {
 :root[data-theme=dark] .sheet-close:focus-visible,
 :root[data-theme=dark] .nav-item:focus-visible,
 :root[data-theme=dark] .nav-switch-button:focus-visible,
+:root[data-theme=dark] .session-tree-select:focus-visible,
 :root[data-theme=dark] .theme-switch-button:focus-visible,
+:root[data-theme=dark] .trace-detail-breadcrumb-segment:focus-visible,
+:root[data-theme=dark] .ui-badge-button:focus-visible,
 :root[data-theme=dark] .expandable-toggle:focus-visible,
 :root[data-theme=dark] .tree-node-toggle:focus-visible,
 :root[data-theme=dark] .tree-node-select:focus-visible,
@@ -2731,10 +3229,10 @@ pre {
   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] .session-tree-section {
+  border-color: rgba(140, 164, 197, 0.18);
+  background: rgba(15, 23, 35, 0.92);
+  box-shadow: 0 12px 28px rgba(2, 10, 24, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 :root[data-theme=dark] .trace-group-button,
 :root[data-theme=dark] .nav-item,
@@ -2745,15 +3243,15 @@ pre {
 :root[data-theme=dark] .tool-call-stack-item,
 :root[data-theme=dark] .stream-segment,
 :root[data-theme=dark] .conversation-bubble {
-  border-color: rgba(128, 153, 189, 0.16);
-  background: rgba(21, 31, 46, 0.94);
-  box-shadow: 0 10px 24px rgba(2, 10, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  border-color: rgba(140, 164, 197, 0.18);
+  background: rgba(22, 33, 48, 0.97);
+  box-shadow: 0 12px 28px rgba(2, 10, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 :root[data-theme=dark] .nav-list > .nav-item:nth-child(even),
 :root[data-theme=dark] .tree-node-card.is-trace,
 :root[data-theme=dark] .message-card.role-tool {
-  --expandable-fade-color: rgba(18, 27, 40, 0.99);
-  background: rgba(18, 27, 40, 0.96);
+  --expandable-fade-color: rgba(19, 29, 43, 0.99);
+  background: rgba(19, 29, 43, 0.97);
 }
 :root[data-theme=dark] .tree-node-card.is-detail-trace:not(.is-active) {
   border-color: rgba(134, 184, 255, 0.18);
@@ -2763,6 +3261,14 @@ pre {
     0 10px 24px rgba(2, 10, 24, 0.18),
     inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
+:root[data-theme=dark] .tree-node-card.is-in-path:not(.is-active) {
+  border-color: rgba(145, 193, 255, 0.18);
+  background: rgba(27, 40, 59, 0.98);
+  box-shadow:
+    inset 2px 0 0 rgba(134, 184, 255, 0.56),
+    0 12px 26px rgba(2, 10, 24, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
 :root[data-theme=dark] .trace-group.has-active-trace .trace-group-button,
 :root[data-theme=dark] .trace-group-button:hover,
 :root[data-theme=dark] .nav-item:hover,
@@ -2772,7 +3278,7 @@ pre {
 :root[data-theme=dark] .trace-row:hover,
 :root[data-theme=dark] .trace-row.is-active {
   border-color: var(--line-strong);
-  background: rgba(29, 43, 64, 0.99);
+  background: rgba(35, 50, 74, 0.99);
   box-shadow:
     inset 4px 0 0 rgba(134, 184, 255, 0.82),
     0 14px 32px rgba(2, 10, 24, 0.26),
@@ -2780,19 +3286,23 @@ pre {
     inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 :root[data-theme=dark] .trace-row-preview {
-  color: rgba(230, 238, 249, 0.84);
+  color: rgba(235, 242, 251, 0.92);
 }
 :root[data-theme=dark] .trace-group-body,
 :root[data-theme=dark] .conversation-thread > * + * {
-  border-color: rgba(128, 153, 189, 0.12);
+  border-color: rgba(140, 164, 197, 0.16);
 }
 :root[data-theme=dark] .trace-nav-meta-row span:first-child,
-:root[data-theme=dark] .trace-elapsed-label {
-  color: rgba(182, 197, 219, 0.76);
+:root[data-theme=dark] .trace-elapsed-label,
+:root[data-theme=dark] .session-tree-timeline-meta {
+  color: rgba(196, 210, 229, 0.9);
 }
 :root[data-theme=dark] .trace-elapsed-track::before {
   background: rgba(128, 153, 189, 0.22);
 }
+:root[data-theme=dark] .session-tree-timeline-track::before {
+  background: rgba(128, 153, 189, 0.2);
+}
 :root[data-theme=dark] .trace-elapsed-span {
   background:
     linear-gradient(
@@ -2801,6 +3311,14 @@ pre {
       rgba(104, 158, 255, 0.96));
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 4px rgba(134, 184, 255, 0.08);
 }
+:root[data-theme=dark] .session-tree-timeline-bar {
+  border-color: rgba(134, 184, 255, 0.3);
+  background:
+    linear-gradient(
+      90deg,
+      rgba(134, 184, 255, 0.24),
+      rgba(134, 184, 255, 0.62));
+}
 :root[data-theme=dark] .trace-elapsed-bar.is-pending .trace-elapsed-span {
   background:
     linear-gradient(
@@ -2809,9 +3327,9 @@ pre {
       rgba(134, 184, 255, 0.9));
 }
 :root[data-theme=dark] .hierarchy-timeline-panel {
-  border-color: rgba(128, 153, 189, 0.16);
-  background: rgba(18, 27, 40, 0.8);
-  box-shadow: 0 14px 32px rgba(2, 10, 24, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  border-color: rgba(140, 164, 197, 0.18);
+  background: rgba(18, 27, 40, 0.92);
+  box-shadow: 0 16px 36px rgba(2, 10, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 :root[data-theme=dark] .hierarchy-timeline-axis-track,
 :root[data-theme=dark] .hierarchy-timeline-row-track {
@@ -2823,7 +3341,7 @@ pre {
       transparent 1px);
 }
 :root[data-theme=dark] .hierarchy-timeline-axis-label {
-  color: rgba(182, 197, 219, 0.76);
+  color: rgba(209, 220, 236, 0.9);
 }
 :root[data-theme=dark] .ui-badge[data-semantic] {
   border-color: color-mix(in srgb, var(--semantic-badge-color) 30%, rgba(128, 153, 189, 0.14));
@@ -2831,27 +3349,24 @@ 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-hint {
-  color: rgba(182, 197, 219, 0.72);
-}
 :root[data-theme=dark] .hierarchy-timeline-row::before {
-  background: rgba(22, 32, 47, 0.52);
+  background: rgba(23, 33, 49, 0.74);
 }
 :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);
+  background: rgba(28, 40, 59, 0.88);
   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-clickable:hover::before {
   border-color: rgba(134, 184, 255, 0.2);
-  background: rgba(29, 43, 64, 0.88);
+  background: rgba(35, 50, 74, 0.94);
 }
 :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::before {
-  background: rgba(27, 40, 60, 0.7);
+  background: rgba(31, 45, 66, 0.82);
 }
 :root[data-theme=dark] .hierarchy-timeline-row.is-structure.is-in-path::before {
   background: rgba(24, 35, 52, 0.38);
@@ -2863,31 +3378,29 @@ pre {
 }
 :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);
+  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-time,
-:root[data-theme=dark] .hierarchy-timeline-row-meta,
-:root[data-theme=dark] .hierarchy-timeline-row-duration,
-:root[data-theme=dark] .hierarchy-timeline-meta,
-: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-ancestor::before,
+:root[data-theme=dark] .hierarchy-timeline-row-connector-top,
+:root[data-theme=dark] .hierarchy-timeline-row-connector-elbow,
+:root[data-theme=dark] .hierarchy-timeline-row-connector-bottom {
+  background: color-mix(in srgb, var(--timeline-row-color) 32%, rgba(128, 153, 189, 0.18));
+}
 :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);
-  color: rgba(186, 214, 255, 0.96);
+:root[data-theme=dark] .hierarchy-timeline-row-flag {
+  background: rgba(34, 154, 161, 0.18);
+  color: #9be5e8;
 }
-:root[data-theme=dark] .hierarchy-timeline-row.is-clickable:hover .hierarchy-timeline-row-inspect {
-  border-color: rgba(134, 184, 255, 0.24);
-  background: rgba(134, 184, 255, 0.18);
+:root[data-theme=dark] .hierarchy-timeline-row-flag.is-highlight {
+  background: rgba(184, 129, 44, 0.18);
+  color: #f0c780;
 }
 :root[data-theme=dark] .trace-detail-breadcrumb {
   color: rgba(182, 197, 219, 0.74);
@@ -2899,6 +3412,9 @@ pre {
   background: rgba(134, 184, 255, 0.14);
   color: rgba(186, 214, 255, 0.96);
 }
+:root[data-theme=dark] .trace-detail-breadcrumb-segment:hover {
+  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);
@@ -2937,11 +3453,15 @@ pre {
   background: rgba(105, 197, 156, 0.12);
   color: var(--success);
 }
+:root[data-theme=dark] .tabs-trigger {
+  color: rgba(203, 216, 235, 0.92);
+  opacity: 1;
+}
 :root[data-theme=dark] .tabs-list {
-  background: rgba(16, 24, 36, 0.92);
+  background: rgba(15, 23, 35, 0.96);
 }
 :root[data-theme=dark] .detail-tabs {
-  background: rgba(16, 24, 36, 0.96);
+  background: rgba(15, 23, 35, 0.98);
   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 {
@@ -2963,61 +3483,65 @@ pre {
 }
 :root[data-theme=dark] .sheet-panel {
   border-left-color: rgba(128, 153, 189, 0.14);
-  background: rgba(12, 18, 28, 0.96);
+  background: rgba(10, 16, 25, 0.98);
   box-shadow: -24px 0 70px rgba(1, 7, 18, 0.42);
 }
 :root[data-theme=dark] .conversation-row,
 :root[data-theme=dark] .message-card {
   --message-role-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  color: rgba(244, 248, 255, 0.97);
+}
+:root[data-theme=dark] .conversation-role {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(1, 7, 18, 0.18);
 }
 :root[data-theme=dark] .conversation-row.is-user .conversation-bubble,
 :root[data-theme=dark] .message-card.role-user {
   --message-accent: rgba(76, 218, 157, 0.58);
   --message-border-color: rgba(76, 218, 157, 0.28);
-  --message-surface: rgba(10, 72, 49, 0.98);
+  --message-surface: rgba(14, 78, 55, 0.98);
   --message-label-color: rgba(209, 255, 234, 0.98);
   --message-label-border: rgba(76, 218, 157, 0.24);
-  --message-label-surface: rgba(76, 218, 157, 0.18);
-  --expandable-fade-color: rgba(10, 72, 49, 0.99);
+  --message-label-surface: rgba(76, 218, 157, 0.22);
+  --expandable-fade-color: rgba(14, 78, 55, 0.99);
 }
 :root[data-theme=dark] .conversation-row.is-assistant .conversation-bubble,
 :root[data-theme=dark] .message-card.role-assistant {
   --message-accent: rgba(177, 108, 255, 0.54);
   --message-border-color: rgba(177, 108, 255, 0.24);
-  --message-surface: rgba(54, 24, 89, 0.98);
+  --message-surface: rgba(58, 34, 94, 0.98);
   --message-label-color: rgba(231, 208, 255, 0.98);
   --message-label-border: rgba(177, 108, 255, 0.22);
-  --message-label-surface: rgba(177, 108, 255, 0.16);
-  --expandable-fade-color: rgba(22, 32, 48, 0.99);
+  --message-label-surface: rgba(177, 108, 255, 0.2);
+  --expandable-fade-color: rgba(58, 34, 94, 0.99);
 }
 :root[data-theme=dark] .conversation-row.is-system .conversation-bubble,
 :root[data-theme=dark] .message-card.role-system {
   --message-accent: rgba(79, 136, 255, 0.62);
   --message-border-color: rgba(79, 136, 255, 0.28);
-  --message-surface: rgba(17, 42, 96, 0.98);
+  --message-surface: rgba(21, 48, 102, 0.98);
   --message-label-color: rgba(203, 221, 255, 0.98);
   --message-label-border: rgba(79, 136, 255, 0.26);
-  --message-label-surface: rgba(79, 136, 255, 0.18);
-  --expandable-fade-color: rgba(26, 39, 57, 0.99);
+  --message-label-surface: rgba(79, 136, 255, 0.22);
+  --expandable-fade-color: rgba(21, 48, 102, 0.99);
 }
 :root[data-theme=dark] .conversation-row.is-tool .conversation-bubble,
 :root[data-theme=dark] .message-card.role-tool {
   --message-accent: rgba(60, 212, 144, 0.56);
   --message-border-color: rgba(60, 212, 144, 0.26);
-  --message-surface: rgba(11, 63, 42, 0.98);
+  --message-surface: rgba(14, 69, 47, 0.98);
   --message-label-color: rgba(203, 255, 229, 0.98);
   --message-label-border: rgba(60, 212, 144, 0.22);
-  --message-label-surface: rgba(60, 212, 144, 0.16);
-  --expandable-fade-color: rgba(18, 34, 33, 0.99);
+  --message-label-surface: rgba(60, 212, 144, 0.2);
+  --expandable-fade-color: rgba(14, 69, 47, 0.99);
 }
 :root[data-theme=dark] .conversation-row.is-tool-call .conversation-bubble {
   --message-accent: rgba(255, 170, 66, 0.6);
   --message-border-color: rgba(255, 170, 66, 0.28);
-  --message-surface: rgba(84, 43, 5, 0.98);
+  --message-surface: rgba(94, 49, 10, 0.98);
   --message-label-color: rgba(255, 228, 184, 0.98);
   --message-label-border: rgba(255, 170, 66, 0.24);
-  --message-label-surface: rgba(255, 170, 66, 0.16);
-  --expandable-fade-color: rgba(44, 31, 16, 0.99);
+  --message-label-surface: rgba(255, 170, 66, 0.2);
+  --expandable-fade-color: rgba(94, 49, 10, 0.99);
 }
 :root[data-theme=dark] .tool-result-bubble {
   --expandable-fade-color: rgba(18, 34, 33, 0.99);
@@ -3025,6 +3549,39 @@ 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);
+}
+:root[data-theme=dark] .structured-markup-token.is-tag-name {
+  color: #8de0e6;
+}
+:root[data-theme=dark] .structured-markup-token.is-attr-name {
+  color: #efc27d;
+}
+:root[data-theme=dark] .structured-markup-token.is-attr-value {
+  color: #9bc0ff;
+}
+:root[data-theme=dark] .structured-markup-token.is-tag-punctuation,
+:root[data-theme=dark] .structured-markup-token.is-attr-punctuation {
+  color: rgba(211, 222, 237, 0.82);
+}
 :root[data-theme=dark] .markdown-body code {
   background: rgba(101, 134, 182, 0.18);
 }
@@ -3058,13 +3615,19 @@ pre {
   background: rgba(13, 20, 31, 0.99);
 }
 :root[data-theme=dark] .json-syntax {
-  color: #dde7f6;
+  color: #ebf2ff;
+}
+:root[data-theme=dark] .stream-segment-copy,
+:root[data-theme=dark] .tool-result-content pre,
+:root[data-theme=dark] .markdown-body,
+:root[data-theme=dark] .message-card-body {
+  color: rgba(241, 246, 255, 0.97);
 }
 :root[data-theme=dark] .json-token-key {
-  color: #acd0ff;
+  color: #bfdbff;
 }
 :root[data-theme=dark] .json-token-string {
-  color: #d2dced;
+  color: #dfe8f7;
 }
 :root[data-theme=dark] .json-token-number {
   color: #cba8ff;
@@ -3088,9 +3651,6 @@ pre {
   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);
-}
 [data-icon=inline-start] {
   width: 1rem;
   height: 1rem;
@@ -3133,7 +3693,9 @@ pre {
   }
 }
 @media (max-width: 1180px) {
-  .workspace-grid,
+  .workspace-grid {
+    grid-template-columns: minmax(24rem, 28rem) minmax(0, 1fr);
+  }
   .filters-grid,
   .filters-secondary-row {
     grid-template-columns: minmax(0, 1fr);
@@ -3146,8 +3708,7 @@ pre {
   .inspector-status {
     justify-content: space-between;
   }
-  .navigator-header,
-  .trace-detail-toolbar {
+  .navigator-header {
     flex-direction: column;
     align-items: stretch;
   }
@@ -3170,6 +3731,62 @@ pre {
     width: min(100vw, 48rem);
   }
 }
+@media (max-width: 960px) {
+  .app-shell {
+    height: auto;
+    min-height: 100dvh;
+    overflow-y: auto;
+  }
+  .app-frame {
+    height: auto;
+    min-height: 100dvh;
+  }
+  .board-shell {
+    flex: 0 0 auto;
+    height: auto;
+    min-height: calc(100dvh - (var(--page-gutter) * 2));
+    overflow: visible;
+  }
+  .workspace-grid,
+  .filters-grid,
+  .filters-secondary-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .workspace-grid {
+    flex: 0 0 auto;
+    overflow: visible;
+    min-height: auto;
+  }
+  .sidebar-card,
+  .timeline-card,
+  .session-sidebar-shell,
+  .trace-detail-panel,
+  .trace-detail-main,
+  .trace-detail-primary,
+  .trace-detail-secondary {
+    min-height: auto;
+    height: auto;
+  }
+  .content-scroll,
+  .session-tree-scroll,
+  .hierarchy-timeline-list,
+  .session-sidebar-shell .hierarchy-timeline-list,
+  .trace-detail-scroll,
+  .trace-detail-secondary {
+    overflow: visible;
+    max-height: none;
+  }
+  .trace-detail-scroll {
+    padding-right: 0;
+  }
+  .session-sidebar-shell .hierarchy-timeline-panel {
+    flex: 0 0 auto;
+  }
+  .trace-detail-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
 @media (max-width: 720px) {
   :root {
     --page-gutter: 1rem;
@@ -3208,7 +3825,7 @@ pre {
   .sheet-header-actions {
     justify-content: flex-end;
   }
-  .tabs-list {
+  .tabs-list:not(.detail-tabs) {
     width: 100%;
   }
   .trace-detail-title-row {
@@ -3235,12 +3852,24 @@ pre {
     min-width: 0;
     width: 100%;
   }
-  .tree-trace-select {
-    flex-direction: column;
+  .tree-node-card {
+    grid-template-columns: 1.8rem minmax(0, 1fr);
+  }
+  .tree-node-select,
+  .tree-structure-select,
+  .tree-trace-select,
+  .session-tree-select {
+    grid-template-columns: minmax(0, 1fr);
     align-items: stretch;
   }
+  .session-tree-timeline {
+    min-width: 0;
+    width: 100%;
+    flex-basis: auto;
+  }
   .trace-elapsed-bar,
-  .nav-item-side-meta {
+  .nav-item-side-meta,
+  .session-tree-timeline-meta {
     justify-content: flex-start;
   }
   .trace-detail-secondary .hierarchy-timeline-axis,
@@ -3268,9 +3897,6 @@ pre {
     grid-column: auto;
     grid-template-columns: minmax(0, 1fr) auto;
   }
-  .trace-detail-secondary .hierarchy-timeline-row-action {
-    justify-content: flex-start;
-  }
   .hierarchy-timeline-header,
   .hierarchy-timeline-header-side {
     flex-direction: column;
@@ -3306,7 +3932,4 @@ pre {
     grid-column: auto;
     grid-template-columns: minmax(0, 1fr) auto;
   }
-  .hierarchy-timeline-row-action {
-    justify-content: flex-start;
-  }
 }