feat(web): animate structured session interactions

web/src/styles.css

@@ -2601,6 +2601,7 @@ input.leaf-rename:focus {
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-3);
   min-width: 0;
+  transition: background var(--dur-fast) var(--ease-out);
 }
 
 .st-tool-head:hover {
@@ -2650,11 +2651,38 @@ input.leaf-rename:focus {
 }
 
 .st-tool-out {
-  border-top: 1px solid var(--border);
-  padding: var(--sp-2) var(--sp-3);
+  border-top: 1px solid transparent;
+}
+
+.st-disclosure {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--dur) var(--ease-out),
+    opacity var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+
+.st-disclosure.is-expanded {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.st-disclosure-clip {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.st-tool-out.is-expanded {
+  border-top-color: var(--border);
+}
+
+.st-tool-out .st-disclosure-inner {
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
+  padding: var(--sp-2) var(--sp-3);
 }
 
 /* `display: flex` above outranks the UA sheet's `[hidden]` (same pitfall as
@@ -2723,6 +2751,7 @@ input.leaf-rename:focus {
   gap: var(--sp-2);
   padding: 0;
   min-width: 0;
+  transition: color var(--dur-fast) var(--ease-out);
 }
 
 .st-tool-group-head:hover {
@@ -2753,12 +2782,16 @@ input.leaf-rename:focus {
 }
 
 .st-tool-group-body {
-  padding-top: var(--sp-2);
-  display: flex;
-  flex-direction: column;
+  padding-top: 0;
 }
 
-.st-tool-group-body > .st-row-tool {
+.st-tool-group-body .st-disclosure-inner {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--sp-2);
+}
+
+.st-tool-group-body .st-disclosure-inner > .st-row-tool {
   padding: var(--sp-1) 0;
 }
 
@@ -2766,6 +2799,21 @@ input.leaf-rename:focus {
   display: none;
 }
 
+/* Live transcript rows resolve into the stream through a short occlusion,
+   matching data becoming concrete without replaying on token patches. */
+.st-row-enter {
+  animation: structured-row-enter var(--dur) var(--ease-out) both;
+}
+
+@keyframes structured-row-enter {
+  from {
+    opacity: 0.2;
+    transform: translateY(3px);
+    clip-path: inset(0 0 18% 0);
+    filter: blur(1px);
+  }
+}
+
 .st-diff-block {
   display: flex;
   flex-direction: column;
@@ -3134,10 +3182,16 @@ input.leaf-rename:focus {
   .act,
   .st-copyable,
   .st-copyable::after,
+  .st-disclosure,
+  .st-tool-head,
   .st-tool-group-glyph {
     transition-duration: 0.01ms;
   }
 
+  .st-row-enter {
+    animation: none;
+  }
+
   .structured-activity-pulse {
     animation: none;
   }