fix(studio): a thought the reader set to Open is not capped to the live six-line window

The cap keyed on data-live alone, so Open and Open-while-running looked the same while the model thought. SayCard now marks data-full when the thinking mode is open and the cap skips it.

desktop/frontend-next/perf/model-menu-badge.mjs

@@ -0,0 +1,28 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const PAGE = process.env.PERF_URL ?? "http://localhost:4399/perf.html?pref=zh";
+const browser = await chromium.launch();
+try {
+  const page = await browser.newPage({ viewport: { width: 1300, height: 900 } });
+  const errors = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  await page.goto(PAGE, { waitUntil: "networkidle" });
+  await page.waitForSelector(".model-picker");
+  await page.locator(".model-picker").first().click();
+  await page.waitForSelector(".studio-model-menu .studio-item-line");
+  const sizes = await page.evaluate(() => {
+    const lines = [...document.querySelectorAll(".studio-model-menu .studio-item-line")].filter((line) => line.querySelector(".studio-item-badge"));
+    for (const line of lines) line.querySelector(".lb").textContent = "workbuddy/deepseek-v4.1-flash-preview-extended";
+    return lines.map((line) => {
+      const badge = line.querySelector(".studio-item-badge").getBoundingClientRect();
+      return { width: Math.round(badge.width), height: Math.round(badge.height) };
+    });
+  });
+  assert.ok(sizes.length > 0, "the menu has a model that reads images");
+  for (const size of sizes) assert.ok(size.height <= 20, `a long model name leaves the badge on one line (${JSON.stringify(size)})`);
+  assert.deepEqual(errors, []);
+  console.log(`PASS model menu badge stays on one line beside a long name (${sizes.length} rows)`);
+} finally {
+  await browser.close();
+}

desktop/frontend-next/perf/session-row-pin.mjs

@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const PAGE = process.env.PERF_URL ?? "http://localhost:4399/perf.html?pref=zh";
+const browser = await chromium.launch();
+try {
+  const page = await browser.newPage({ viewport: { width: 1300, height: 900 } });
+  const errors = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  await page.addInitScript(() => localStorage.setItem("rx-session-quick-actions", "on"));
+  await page.goto(PAGE, { waitUntil: "networkidle" });
+  await page.waitForSelector(".ds-row.sessrow");
+  await page.waitForTimeout(500);
+  const shown = (row, selector) =>
+    row.evaluate((el, sel) => {
+      const node = el.querySelector(sel);
+      return !!node && getComputedStyle(node).display !== "none" && node.getBoundingClientRect().width > 0;
+    }, selector);
+  const rows = page.locator(".ds-row.sessrow");
+  await page.mouse.move(700, 450);
+  for (let i = 0; i < Math.min(await rows.count(), 5); i++) {
+    assert.equal(await shown(rows.nth(i), ".sesspin-action"), false, `row ${i}: a resting row shows no pin button`);
+    assert.equal(await shown(rows.nth(i), ".sesspin-marker"), false, `row ${i}: an unpinned row shows no pin marker`);
+  }
+  const first = rows.first();
+  await first.hover();
+  assert.equal(await shown(first, ".sesspin-action"), true, "hovering a row offers the pin button");
+  await first.locator(".sesspin-action").click();
+  await page.waitForTimeout(400);
+  await page.evaluate(() => document.activeElement?.blur());
+  await page.mouse.move(700, 450);
+  await page.waitForTimeout(200);
+  const pinned = page.locator('.ds-row.sessrow:has(.sesspin-marker)').first();
+  assert.equal(await shown(pinned, ".sesspin-marker"), true, "a pinned row keeps its marker while the pointer is away");
+  assert.equal(await shown(pinned, ".sesspin-action"), false, "and still hides the button");
+  await pinned.hover();
+  assert.equal(await shown(pinned, ".sesspin-marker"), false, "the marker gives way to the button under the pointer");
+  assert.equal(await shown(pinned, ".sesspin-action"), true);
+  assert.deepEqual(errors, []);
+  console.log("PASS session row pin button and marker");
+} finally {
+  await browser.close();
+}

desktop/frontend-next/perf/settings-page-column.mjs

@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const PAGE = process.env.PERF_URL ?? "http://localhost:4399/perf.html?pref=zh";
+const browser = await chromium.launch();
+try {
+  const page = await browser.newPage({ viewport: { width: 1600, height: 900 } });
+  const errors = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  await page.goto(PAGE, { waitUntil: "networkidle" });
+  await page.evaluate(() => document.querySelector('[data-action="chrome.settings"]')?.click());
+  await page.waitForSelector(".prefs-nav button");
+  const lefts = () =>
+    page.evaluate(() => {
+      const left = (selector) => Math.round(document.querySelector(selector).getBoundingClientRect().left);
+      return { title: left(".prefs-main .prefs-pagetitle"), index: left(".prefs-main .page-index"), col: left(".prefs-main .prefs-col") };
+    });
+  for (const name of ["模型", "连接", "常用"]) {
+    await page.locator(".prefs-nav button", { hasText: new RegExp(`^${name}`) }).first().click();
+    await page.waitForTimeout(400);
+    const at = await lefts();
+    assert.equal(at.index, at.title, `${name}: the page index starts where the title does (${JSON.stringify(at)})`);
+    assert.equal(at.col, at.title, `${name}: the cards start where the title does (${JSON.stringify(at)})`);
+    console.log(`PASS ${name}: title, index and cards all start at ${at.title}px`);
+  }
+  await page.locator(".prefs-nav button", { hasText: /^操作与性能/ }).first().click();
+  await page.waitForTimeout(400);
+  await page.getByRole("button", { name: "调整导航" }).click();
+  await page.waitForTimeout(600);
+  const shown = await page.evaluate(() => {
+    const card = document.querySelector(".prefs-col .deep-page").closest(".prefs-card");
+    return [...card.children].filter((c) => !c.classList.contains("deep-page") && getComputedStyle(c).display !== "none").length;
+  });
+  assert.equal(shown, 0, "an open sub-page shows nothing of the page it was opened from");
+  console.log("PASS sub-page: nothing of the parent page remains above it");
+  assert.deepEqual(errors, []);
+} finally {
+  await browser.close();
+}

desktop/frontend-next/perf/think-full-open.mjs

@@ -0,0 +1,26 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const PAGE = process.env.PERF_URL ?? "http://localhost:4399/perf.html?pref=zh";
+const browser = await chromium.launch();
+try {
+  const page = await browser.newPage({ viewport: { width: 1300, height: 900 } });
+  await page.goto(PAGE, { waitUntil: "networkidle" });
+  await page.waitForSelector(".app");
+  const heights = await page.evaluate(() => {
+    const long = Array.from({ length: 30 }, (_, i) => `line ${i}`).join("\n");
+    const host = document.querySelector(".app");
+    const make = (attrs) => {
+      const box = document.createElement("div");
+      box.innerHTML = `<details class="think" open ${attrs}><summary>t</summary><div class="tk"><div class="tk-in" style="white-space:pre-wrap">${long}</div></div></details>`;
+      host.appendChild(box);
+      return box.querySelector(".tk").getBoundingClientRect().height;
+    };
+    return { windowed: make("data-live"), full: make("data-live data-full") };
+  });
+  assert.ok(heights.windowed < 200, `a live thought is a window of a few lines (${heights.windowed}px)`);
+  assert.ok(heights.full > heights.windowed * 2, `a thought the reader asked to keep open grows with its text (${heights.full}px)`);
+  console.log(`PASS live thinking window ${Math.round(heights.windowed)}px, always-open ${Math.round(heights.full)}px`);
+} finally {
+  await browser.close();
+}

desktop/frontend-next/src/design/composer.css

@@ -132,6 +132,7 @@
 :root .composer-menu.studio-model-menu .studio-item-line { flex-wrap: nowrap; align-items: center; gap: 8px; }
 :root .composer-menu.studio-model-menu .studio-item-line > .lb { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--w-med) var(--fs-ui)/1.3 var(--ui); }
 :root .composer-menu.studio-model-menu .studio-item-meta { flex: none; color: var(--faint); font: var(--w-reg) var(--fs-micro)/1.3 var(--ui); white-space: nowrap; }
+:root .composer-menu.studio-model-menu .studio-item-badge { flex: none; white-space: nowrap; }
 :root .composer-menu.studio-model-menu .mi[data-on]::after { color: var(--net-ink); }
 :root .composer-menu.studio-effort-menu .mi.head { padding: 12px 14px 8px; }
 :root .composer-menu.studio-effort-menu .mi.head:first-child .lb { color: var(--text); font: var(--w-semi) var(--fs-ui)/1.3 var(--ui); }

desktop/frontend-next/src/design/rows.css

@@ -48,8 +48,10 @@
 @media (hover: none) { .ds-row .ds-more { display: grid; } }
 .ds-row .ds-pin { width: 12px; height: 12px; flex: none; }
 .ds-row .sessquick, .ds-row .sesspin-action { flex: none; display: none; }
-.ds-row:is(:hover, :focus-within) .sessquick, .ds-row:is(:hover, :focus-within) .sesspin-action { display: flex; }
-.ds-row .sessquick > button, .ds-row .sesspin-action { width: 24px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--faint); cursor: pointer; }
+.ds-row:is(:hover, :focus-within) .sessquick { display: flex; }
+.ds-row:is(:hover, :focus-within) .sesspin-action { display: grid; }
+.ds-row .sessquick > button, .ds-row .sesspin-action { width: 24px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--faint); cursor: pointer; }
+.ds-row .sessquick > button { display: grid; }
 .ds-row .sessquick > button:hover, .ds-row .sesspin-action:hover { background: var(--raised); color: var(--text); }
 .ds-row .sessquick > button:disabled, .ds-row .sesspin-action:disabled { opacity: .35; cursor: default; }
 .ds-row .sessquick .studio-icon, .ds-row .sesspin-action .studio-icon { width: 14px; height: 14px; }

desktop/frontend-next/src/design/rows.test.ts

@@ -32,4 +32,10 @@ describe("session and project rows follow the board", () => {
     expect(rule(".ds-row:is(:hover, :focus-within) > :is(.ds-meta, .ds-pin)")).toMatch(/display:\s*none/);
     expect(rule(".ds-row:is(:hover, :focus-within) .ds-more")).toMatch(/display:\s*grid/);
   });
+
+  it("keeps the pin button hidden until the row is hovered or focused", () => {
+    expect(rule(".ds-row .sessquick, .ds-row .sesspin-action")).toMatch(/display:\s*none/);
+    expect(rule(".ds-row .sessquick > button, .ds-row .sesspin-action")).not.toMatch(/display:/);
+    expect(rule(".ds-row:is(:hover, :focus-within) .sesspin-action")).toMatch(/display:\s*grid/);
+  });
 });

desktop/frontend-next/src/design/settings.css

@@ -263,7 +263,7 @@
 .grp-row-t small { overflow: hidden; color: var(--faint); font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); white-space: nowrap; text-overflow: ellipsis; }
 .grp-row > .now { flex: none; color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); }
 .grp-row > .studio-icon { flex: none; width: 14px; height: 14px; color: var(--faint); }
-.prefs-col[data-deep] :not(.deep-page, .deep-page *, :has(.deep-page)) { display: none; }
+.prefs-col[data-deep] :not(.deep-page, .deep-page *, :has(.deep-page)) { display: none !important; }
 .prefs-col[data-deep] :is(.prefs-card, .grp):has(.deep-page) { padding: 0; border: 0; background: none; box-shadow: none; }
 .deep-page { display: flex; flex-direction: column; gap: 12px; animation: m-panel var(--t-panel) var(--ease-out, ease-out); }
 .deep-crumb { display: flex; align-items: center; gap: 6px; color: var(--faint); font: var(--w-med) var(--fs-meta) var(--ui); }
@@ -436,9 +436,9 @@
 .changed-keys { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 8px 0 2px; border-top: 1px solid var(--hair); list-style: none; }
 .changed-keys li { color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--mono); }
 .prefs-card > .grp { grid-template-columns: minmax(0, 1fr) fit-content(320px); }
-.prefs-main > .prefs-pagetitle { max-width: 880px; margin-inline: auto; }
+.prefs-main > :is(.prefs-pagetitle, .page-index) { max-width: 880px; margin-inline: auto; }
 @container prefsmain (min-width: 860px) {
-  .prefs-main:has(.prefs-col[data-cols="2"]) > .prefs-pagetitle { max-width: 1400px; }
+  .prefs-main:has(.prefs-col[data-cols="2"]) > :is(.prefs-pagetitle, .page-index) { max-width: 1400px; }
 }
 .apply[data-usual] { display: none; }
 .prefs-card > .grp > .apply { display: none; }

desktop/frontend-next/src/design/turn.css

@@ -68,8 +68,8 @@
 .think-swap > .think-label { grid-area: 1 / 1; }
 .think[data-settled] .think-label:not(.think-out) { animation: m-fade var(--t-card) var(--ease-out) both; }
 .think-out { animation: m-exit var(--t-card) var(--ease-out) both; pointer-events: none; }
-.think[data-live] .tk { max-height: calc(1.75em * 6); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
-.think[data-live] .tk-in { flex: none; }
+.think[data-live]:not([data-full]) .tk { max-height: calc(1.75em * 6); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
+.think[data-live]:not([data-full]) .tk-in { flex: none; }
 .think[data-cut] > summary .fold, .think[data-cut] > summary:hover .fold { color: var(--warn-ink); }
 .think-note { margin: 4px 0 0 16px; color: var(--faint); font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); }
 @media (prefers-reduced-motion: reduce) {

desktop/frontend-next/src/ui/SessionRowActions.tsx

@@ -12,14 +12,18 @@ export function SessionPinAction({ target, title, pinned, enabled, disabled, onP
   enabled: boolean;
   onPin: () => void;
 }) {
-  if (!enabled) return pinned ? <StudioIcon name="pin" className="sesspin-marker ds-pin" aria-label={t("session.pinned")} /> : null;
-  return <button className="sesspin-action" data-action="session.pin" data-target={target}
-    aria-pressed={pinned} disabled={disabled}
-    title={t(pinned ? "common.unpin" : "common.pin_session")}
-    aria-label={t(pinned ? "session.unpin_session_title" : "session.pin_session_title", { title })}
-    onClick={(event) => { event.stopPropagation(); onPin(); }}>
-    <StudioIcon name="pin" aria-label={pinned ? t("session.pinned") : undefined} />
-  </button>;
+  const marker = pinned ? <StudioIcon name="pin" className="sesspin-marker ds-pin" aria-label={enabled ? undefined : t("session.pinned")} aria-hidden={enabled ? true : undefined} /> : null;
+  if (!enabled) return marker;
+  return <>
+    {marker}
+    <button className="sesspin-action" data-action="session.pin" data-target={target}
+      aria-pressed={pinned} disabled={disabled}
+      title={t(pinned ? "common.unpin" : "common.pin_session")}
+      aria-label={t(pinned ? "session.unpin_session_title" : "session.pin_session_title", { title })}
+      onClick={(event) => { event.stopPropagation(); onPin(); }}>
+      <StudioIcon name="pin" aria-label={pinned ? t("session.pinned") : undefined} />
+    </button>
+  </>;
 }
 
 export function SessionArchiveAction({ target, title, archived, disabled, onArchive }: Target & {

desktop/frontend-next/src/ui/cards/SayCard.think.interaction.test.tsx

@@ -4,6 +4,7 @@ import { act, cleanup, render } from "@testing-library/react";
 import "../testkit";
 import { SayCard } from "./SayCard";
 import { appendText } from "../../state/say";
+import { setFoldModes } from "../../state/prefs";
 import type { Item } from "../../state/session";
 
 afterEach(() => { cleanup(); vi.useRealTimers(); });
@@ -23,6 +24,18 @@ describe("the thinking block, as the Think-Exec board draws it", () => {
     expect(label().textContent).toBe("思考 1.2 秒 · 1 字");
   });
 
+  it("tells the stylesheet when the reader asked for every thought open, so the live window does not cap it", () => {
+    act(() => setFoldModes({ thinking: "open" }));
+    const view = render(<SayCard item={appendText([], "想", "reasoning")[0] as Say} />);
+    expect(think().hasAttribute("data-live")).toBe(true);
+    expect(think().hasAttribute("data-full")).toBe(true);
+    view.unmount();
+    act(() => setFoldModes({ thinking: "live" }));
+    render(<SayCard item={appendText([], "想", "reasoning")[0] as Say} />);
+    expect(think().hasAttribute("data-full")).toBe(false);
+    act(() => setFoldModes({ thinking: "folded" }));
+  });
+
   it("keeps a caret only on reasoning still arriving", () => {
     const view = render(<SayCard item={appendText([], "想", "reasoning")[0] as Say} />);
     think().open = true;

desktop/frontend-next/src/ui/cards/SayCard.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
-import { useThinkingPreview, useStartsOpen } from "../../state/foldpref";
+import { useThinkingPreview, useStartsOpen, useFoldModes } from "../../state/foldpref";
 import { StudioIcon } from "../StudioIcon";
 import { t } from "../../i18n";
 import { count, decimals } from "../../i18n/format";
@@ -109,6 +109,7 @@ export function SayCard({ item, afterAnswer, settled = true, reply, quiet }: { i
   const [branching, setBranching] = useState(false);
   const thinking = !item.done && item.thoughtMs === undefined;
   const start = useStartsOpen("thinking", thinking && !item.text);
+  const alwaysOpen = useFoldModes().thinking === "open";
   // The title changes once, when a thought this card watched finishes; a
   // thought drawn already finished is not that change happening.
   const watchedThinking = useRef(thinking);
@@ -171,7 +172,7 @@ export function SayCard({ item, afterAnswer, settled = true, reply, quiet }: { i
         </div>
         <div className="out">
           {item.reasoning?.trim() && (
-            <details className="think" open={open} data-live={thinking ? "" : undefined} data-cut={item.cut}
+            <details className="think" open={open} data-live={thinking ? "" : undefined} data-full={alwaysOpen ? "" : undefined} data-cut={item.cut}
               data-settled={settledHere ? "" : undefined} onToggle={(e) => {
                 const next = e.currentTarget.open;
                 if (next === open) return;

release-notes/studio/unreleased/session-pin-and-model-badge.md

@@ -0,0 +1,12 @@
+## 修复
+
+- 修复 2.58.0 里，开着「会话行快捷按钮」时，侧栏每一行会话都一直显示一个置顶图标（不管有没有置顶）：现在这个按钮只在鼠标移上去或键盘聚焦时才出现；已置顶的会话在没悬停时会一直显示一个小图钉，方便一眼看出（#15012）。
+- 修复输入框右下角的模型选单里，模型名字较长时，右边的「读图」标签被挤成两行竖着排的问题；现在标签始终在一行里完整显示（#15012）。
+
+---
+<!-- lang:en -->
+
+## Fixed
+
+- With "Quick buttons on session rows" turned on, every session row in the sidebar showed a pin icon all the time, pinned or not (2.58.0). The button now appears only when the pointer is over the row or it has keyboard focus, and a pinned session keeps a small pin on the row while nothing is hovered (#15012).
+- In the model menu next to the message box, the "reads images" tag was squeezed into two stacked characters beside a long model name; it now stays whole on one line (#15012).

release-notes/studio/unreleased/settings-page-index-column.md

@@ -0,0 +1,12 @@
+## 修复
+
+- 修复 2.58.0 里设置的「模型」「连接」等单栏页面：顶部「本页包含」目录和下面的标题、卡片没有对齐，卡片左边多出一大块空白（现在三者对齐到同一条左边线）（#15008）。
+- 修复从「操作与性能」点开「导航入口」这类二级页时，顶部多出几条空白的横条；现在二级页里只显示它自己（#15009）。
+
+---
+<!-- lang:en -->
+
+## Fixed
+
+- In Settings, single-column pages such as Model and Connection no longer draw the "On this page" index out of line with the title and cards, which left a wide empty strip beside the cards in 2.58.0; all three now share one left edge (#15008).
+- Opening a sub-page such as Navigation entries from Operation and performance no longer leaves a few empty bars above it; the sub-page shows only itself (#15009).

release-notes/studio/unreleased/thinking-open-mode-uncapped.md

@@ -0,0 +1,10 @@
+## 修复
+
+- 修复设置里「思考过程」选成「展开」后，模型思考时仍然只显示最新六行、要等整段思考结束才一下子全部显示的问题：选「展开」时，运行中的思考块现在随内容一直完整展开；「进行中展开」仍是最新六行的滚动窗口（#15013）。
+
+---
+<!-- lang:en -->
+
+## Fixed
+
+- With Thinking set to "Open", a thought still showed only its latest six lines while the model was thinking and then jumped to the full text when it finished. In "Open" the running thought now grows with its text; "Open while running" keeps the six-line rolling window (#15013).