Improve the transcript: tool grouping, report auto-ack, context meter, spinner, Enter to send

web/style.css

@@ -449,23 +449,23 @@ textarea {
   flex-shrink: 0;
 }
 
-.state {
+.context-meter {
   font-size: 12px;
-  padding: 1px 8px;
-  border-radius: 10px;
-  background: var(--surface);
-  color: var(--muted);
 }
 
-.state.running {
+.context-meter.ok {
   color: var(--ok);
 }
 
-.state.queued {
-  background: var(--warn-tint);
+.context-meter.warn {
   color: var(--warn);
 }
 
+.context-meter.danger {
+  color: var(--danger);
+  font-weight: 700;
+}
+
 .transcript {
   flex: 1;
   overflow-y: auto;
@@ -473,6 +473,29 @@ textarea {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  border: 1px solid transparent;
+  transition: border-color 0.3s;
+}
+
+.transcript.running {
+  border-color: var(--accent);
+}
+
+.spinner {
+  flex-shrink: 0;
+  width: 8px;
+  height: 16px;
+  background: url(/img/spinner-light.gif) no-repeat 0 0 / 8px 16px;
+}
+
+.spinner[hidden] {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .spinner {
+    background-image: url(/img/spinner-dark.gif);
+  }
 }
 
 .empty {
@@ -591,7 +614,8 @@ textarea {
 }
 
 .thinking,
-.tool {
+.tool,
+.tool-group {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 4px 10px;
@@ -599,10 +623,31 @@ textarea {
 }
 
 .thinking summary,
-.tool summary {
+.tool summary,
+.tool-group summary {
   cursor: pointer;
 }
 
+.tool-group-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px 0 4px;
+}
+
+.tool-group-body .thinking,
+.tool-group-body .tool {
+  background: var(--raised);
+}
+
+.tool-group.errored {
+  border-color: var(--danger);
+}
+
+.tool-count {
+  color: var(--muted);
+}
+
 .thinking summary {
   color: var(--muted);
 }