Every control in the composer area (the environment row above the input
and the control row below it) explains itself on hover with the same
tooltip, HoverTip from components/ui/tooltip.tsx, never the browser's
native title bubble. The tip body is TipBody:
Title line: what the control is and its current value, for example
"Project: fzkuji.github.io", "Permissions: Auto mode", "Thinking
effort: Medium", "Chat Agent: deepseek-flash".
Detail line (muted, optional): the specifics a chip cannot fit, such
as a full path, the full branch name and change counts, or what a click
does ("Click to turn off.").
The tip appears after the pointer rests for 1.5 s, never while the control's own menu is open,
and is wider than the chip (up to 320 px, paths wrap anywhere).
Control
Title
Detail
Channel (Local)
Channel:
where the conversation runs; click to switch
Project segment
Project:
folder path; fixed for this conversation, or click to choose
Working-folder segment
Working folder:
full path; the agent can read and edit it
✕ on a working folder
Remove from this conversation
files on disk stay
Git segment
·
uncommitted files and +/−; worktree path; what the menu offers
Add folder
Add working folder
give the agent another folder
Web page chip
Web page: </td>
<td>whether the agent can use it; click to toggle</td>
</tr>
<tr>
<td>Page preview chip</td>
<td>Show page preview</td>
<td>bring the page back as a floating preview</td>
</tr>
<tr>
<td>Goal chip</td>
<td>Goal</td>
<td>the goal text; click for progress and controls</td>
</tr>
<tr>
<td>Permission badge</td>
<td>Permissions: <mode></td>
<td>the mode's description</td>
</tr>
<tr>
<td>Options (+)</td>
<td>Options</td>
<td>attach files, toggle tools / web search / sandbox</td>
</tr>
<tr>
<td>Tool chips</td>
<td>Tools / Web search / Sandbox / Unattended on</td>
<td>what it does; click to turn off</td>
</tr>
<tr>
<td>Effort</td>
<td>Thinking effort: <level></td>
<td>how long the model thinks; click to adjust</td>
</tr>
<tr>
<td><code>?</code> in the effort card</td>
<td>Thinking effort</td>
<td>how long the model reasons; higher levels think longer and use more tokens, lower levels answer faster; Recommended marks the model's default (<a href="/docs/reference/design/ui/effort-picker.html">effort-picker.html</a>)</td>
</tr>
<tr>
<td>Model badges</td>
<td>Chat Agent / Execution Agent: <model></td>
<td>its role; click to change model</td>
</tr>
</tbody>
</table>
<h2 id="web-page-preview-header">Web page preview header<a class="header-anchor" href="#web-page-preview-header">#</a></h2>
<p>The floating page preview over chat (<code>components/center-tabs/web-tab-pip.tsx</code>)
uses the same <code>HoverTip</code> + <code>TipBody</code> on its header buttons. The eight
resize handles keep their <code>aria-label</code>s but show no tip: a bubble popping
up over the page while the pointer skims the edge is noise. The title and
status text are labels, not controls; they keep a native <code>title</code> with the
full text for when they truncate.</p>
<table>
<thead>
<tr>
<th>Control</th>
<th>Title</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Open page</td>
<td>Open page</td>
<td>Switch to this tab in the centre</td>
</tr>
<tr>
<td>Review request (while the agent waits for approval)</td>
<td>Review request</td>
<td>The agent is waiting for your confirmation</td>
</tr>
<tr>
<td>More (⋮)</td>
<td>More</td>
<td>Auto-follow, action markers and operation history</td>
</tr>
<tr>
<td>Close (✕)</td>
<td>Close preview</td>
<td>Hides the preview; the agent keeps working</td>
</tr>
</tbody>
</table>
<h2 id="implementation-status">Implementation status<a class="header-anchor" href="#implementation-status">#</a></h2>
<ul>
<li>All rows above: <strong>implemented</strong>.</li>
<li>The send button keeps the native <code>title</code>: it is disabled exactly when its
message matters most (paste lost, attachment loading), and a disabled
button fires no pointer events for <code>HoverTip</code>. <strong>Not migrated.</strong></li>
<li>The Fast toggle keeps its existing hint text. <strong>Unchanged by request.</strong></li>
</ul>
<div class="page-updated"><span data-i18n="updated">Last updated</span> · 2026-10-10</div><div class="prevnext"><a class="pn-link pn-prev" href="/docs/reference/design/ui/chat-recovery-copy.html"><span class="pn-dir" data-i18n="prev">Previous</span><span class="pn-title">History rendering and conversation links</span></a><a class="pn-link pn-next" href="/docs/reference/design/ui/icons.html" data-href-en="/docs/reference/design/ui/icons.html" data-href-zh="/docs/reference/design/ui/icons.zh.html"><span class="pn-dir" data-i18n="next">Next</span><span class="pn-title" data-title-zh="图标体系">Icon system</span></a></div></article></main>
<aside class="toc"><div class="toc-title" data-i18n="on_this_page">On this page</div>
<ul class="toc-list">
<li>
<a class="lvl-2" href="#web-page-preview-header">Web page preview header</a>
</li>
<li>
<a class="lvl-2" href="#implementation-status">Implementation status</a>
</li>
</ul></aside>
</div>
<div class="search-overlay">
<div class="search-box">
<input type="text" data-i18n-ph="search_ph" placeholder="Search titles or text…" autocomplete="off" spellcheck="false">
<div class="search-results"></div>
</div>
</div>
<script src="/docs/assets/site.js?v=6520ba46"></script>
</body>
</html>
OpenProgram Docs