fix(studio): quiet the activity group so the reply stands out

Fixes #12953

desktop/frontend-next/perf/stickyfold.mjs

@@ -27,7 +27,14 @@ try {
     await page.locator("#scroller").evaluate((el) => { el.scrollTop = 0; });
     const rest = await page.evaluate(() => Math.round(document.querySelector(".activity-group > summary").getBoundingClientRect().top - document.querySelector("#scroller").getBoundingClientRect().top));
     assert.ok(rest >= 0, `${scheme}: at rest the header sits where it did`);
-    console.log(`${scheme}: header held at the top of the scroller, opaque`);
+    await page.locator(".activity-group > summary").click();
+    const quiet = await page.evaluate(() => {
+      const group = getComputedStyle(document.querySelector(".activity-group"));
+      return { border: group.borderTopWidth, bg: group.backgroundColor };
+    });
+    assert.equal(quiet.border, "0px", `${scheme}: a folded group is a quiet line, not a bordered card`);
+    assert.equal(quiet.bg, "rgba(0, 0, 0, 0)", `${scheme}: a folded group paints no ground of its own`);
+    console.log(`${scheme}: header held at the top of the scroller, opaque; folded group is a quiet line`);
     await page.close();
   }
 } finally {

desktop/frontend-next/src/styles/studio.css

@@ -860,16 +860,13 @@ body { background: var(--page) !important; }
   color: var(--text); font-family: var(--ui); font-size: var(--read); font-weight: var(--w-reg); line-height: 1.72;
   letter-spacing: 0; -webkit-font-smoothing: antialiased;
 }
-.activity-group {
-  margin: var(--sp-6) 0 0; border: 1px solid var(--hair); border-radius: 9px;
-  overflow: clip;
-}
+.activity-group { margin: var(--sp-4) 0 0; overflow: clip; }
 .activity-group > summary {
-  min-height: 38px; padding: 0 var(--sp-6); display: flex; align-items: center; gap: var(--sp-4);
-  color: var(--muted); font-size: 11px; font-weight: 590; line-height: 1.5;
+  min-height: 28px; padding: 0; display: flex; align-items: center; gap: var(--sp-3);
+  color: var(--faint); font-size: 11px; font-weight: 500; line-height: 1.5;
   cursor: pointer; user-select: none;
 }
-.activity-group > summary:hover { background: var(--overlay); color: var(--text); }
+.activity-group > summary:hover { color: var(--muted); }
 .activity-group > summary .studio-icon { width: 12px; height: 12px; flex: none; }
 .activity-status-icon { color: var(--faint); }
 .activity-group[data-failed] .activity-status-icon { color: var(--err-ink); }
@@ -891,19 +888,19 @@ body { background: var(--page) !important; }
   background: var(--net-wash);
   font: 650 11px/1.3 var(--ui);
 }
-.activity-title { color: var(--text); font: 590 11px/1.5 var(--ui); }
+.activity-title { color: inherit; font: 500 11px/1.5 var(--ui); }
 .activity-errors { color: var(--err-ink); font: 500 9.5px/1.5 var(--ui); }
-.activity-count { margin-left: auto; color: var(--faint); font: 450 10px/1.5 var(--ui); }
+.activity-count { margin-left: 0; color: var(--faint); font: 450 10px/1.5 var(--ui); }
 .activity-fold-icon { margin-left: 2px; color: var(--faint); transition: transform 140ms ease; }
 .activity-group[open] .activity-fold-icon { transform: rotate(180deg); }
-.activity-group[open] > summary { position: sticky; top: 0; z-index: 1; background: var(--raised); border-bottom: 1px solid var(--hair); }
+.activity-group[open] > summary { position: sticky; top: 0; z-index: 1; }
 .activity-group::details-content {
   block-size: 0; overflow: hidden; opacity: 0;
   transition: block-size 150ms ease-out, opacity 110ms ease-out,
               content-visibility 150ms allow-discrete;
 }
 .activity-group[open]::details-content { block-size: auto; opacity: 1; }
-.activity-body { padding: 4px 11px 2px; }
+.activity-body { margin-left: 5px; padding: 2px 0 2px 12px; border-left: 1px solid var(--hair); }
 .activity-body .call { min-height: 38px; display: block; }
 .activity-body .call > .g { display: none; }
 .activity-body .call:not([data-k="me"]):not([data-k="say"]) > .c {
@@ -3062,20 +3059,17 @@ body { font-size: 14px; line-height: 1.75; }
 .flow .call[data-k="say"] > .g .sym::after { color: var(--page); }
 .flow .call > .g .line { background: var(--border); }
 
-.activity-group,
 .flow .call[data-call] > .c,
 .flow .ask { background: var(--raised) !important; border-color: var(--border) !important; }
-.activity-group > summary:hover,
 .tool-disclosure > summary.hl:hover,
 .activity-body .tool-disclosure[open] > summary.hl,
 .reads-disclosure .peek button.row[data-on] { background: var(--overlay); }
-.activity-group[open] > summary,
 .activity-body .call[data-call] > .c,
 .activity-call-input,
 .activity-call-result,
 .flow .tool-disclosure .dif { border-color: var(--hair) !important; }
+.activity-group[open] > summary,
 .flow .tool-disclosure .dif-hd { background: var(--surface); }
-.activity-title,
 .activity-body .hl .nm,
 .activity-call-input > header b,
 .activity-call-result b { color: var(--text); }

release-notes/studio/unreleased.md

@@ -13,3 +13,5 @@
 - Studio 增强 Linux 两种安装包及全部 12 个发布产物的校验，GitHub Actions 验证安装后的通信、第二次启动、重装、正常退出和卸载。（#12906）
 - 展开很长的执行过程时，头部会吸在顶部，随时可以直接折叠，不用再往上翻。关联 #12931。
 - A long expanded process group keeps its header at the top while you scroll, so it can be folded without scrolling back up. Fixes #12931.
+- 对话里的「执行过程」不再是带边框的卡片，改成和「思考」一样的淡色一行，展开后只在左侧留一条细线，让回复和结论更突出。关联 #12953。
+- The activity group in a conversation is now a quiet line like the thinking row instead of a bordered card, with a thin rule at its left when open, so the reply and conclusion stand out. Fixes #12953.