feat(web): emphasize running tool rows and dim settled titles

Author: elkaix

apps/pythinker-web/src/components/chat/ToolRow.vue

@@ -47,6 +47,7 @@ function onHeadClick(): void {
     :class="{
       open,
       stacked,
+      run: status === 'running' || status === 'suspended',
       err: status === 'error',
       'stack-first': stackPosition === 'first',
       'stack-middle': stackPosition === 'middle',
@@ -110,6 +111,10 @@ function onHeadClick(): void {
   border-top: 1px solid var(--color-line);
 }
 
+/* Head text emphasis, inherited by slotted titles too: a settled row sits
+   dimmed, hover/open restores legibility, and a running/suspended row holds
+   full strength — then fades back out once it finishes. Slotted content
+   (Edit/Read tool titles) picks this up via custom-property inheritance. */
 .bh {
   display: flex;
   align-items: center;
@@ -119,10 +124,15 @@ function onHeadClick(): void {
   cursor: pointer;
   font: var(--text-sm) var(--font-mono);
   color: var(--color-text);
+  --emph: var(--color-text-muted);
 }
 .box.open .bh,
 .bh:hover {
   background: var(--color-surface-sunken);
+  --emph: var(--color-text);
+}
+.box.run .bh {
+  --emph: var(--color-text-strong);
 }
 .box.err .bh {
   background: color-mix(in srgb, var(--color-danger) 4%, var(--bg));
@@ -145,9 +155,10 @@ function onHeadClick(): void {
   min-width: 0;
 }
 .a {
-  color: var(--color-text);
+  color: var(--emph);
   font-weight: var(--weight-medium);
   flex: none;
+  transition: color var(--duration-slow) var(--ease-out);
 }
 .p {
   color: var(--color-text-muted);

apps/pythinker-web/src/components/chat/tool-calls/EditTool.vue

@@ -118,9 +118,10 @@ function openFile(): void {
 
 <style scoped>
 .tl-name {
-  color: var(--color-text);
+  color: var(--emph, var(--color-text));
   font-weight: var(--weight-medium);
   flex: none;
+  transition: color var(--duration-slow) var(--ease-out);
 }
 .tl-ficon {
   display: inline-flex;
@@ -132,7 +133,7 @@ function openFile(): void {
   display: block;
 }
 .tl-file {
-  color: var(--color-text);
+  color: var(--emph, var(--color-text));
   line-height: var(--leading-tight);
   flex: none;
   max-width: 60%;
@@ -146,6 +147,7 @@ function openFile(): void {
   font-family: inherit;
   font-size: inherit;
   cursor: pointer;
+  transition: color var(--duration-slow) var(--ease-out);
 }
 .tl-file:hover {
   color: var(--color-accent);

apps/pythinker-web/src/components/chat/tool-calls/ReadTool.vue

@@ -184,12 +184,13 @@ watch(
   display: block;
 }
 .tl-name {
-  color: var(--color-text);
+  color: var(--emph, var(--color-text));
   font-weight: var(--weight-medium);
   flex: none;
+  transition: color var(--duration-slow) var(--ease-out);
 }
 .tl-file {
-  color: var(--color-text);
+  color: var(--emph, var(--color-text));
   line-height: var(--leading-tight);
   flex: none;
   max-width: 60%;
@@ -203,6 +204,7 @@ watch(
   font-family: inherit;
   font-size: inherit;
   cursor: pointer;
+  transition: color var(--duration-slow) var(--ease-out);
 }
 .tl-file:hover {
   color: var(--color-accent);