Commit 521f5b5a5682b18f2d59cf95226fc203cd314240 | the-knife

author	Bilal Bakr <62337003+Bil0000@users.noreply.github.com> 2026-10-07 19:34:41+03:00
committer	GitHub <noreply@github.com> 2026-10-07 09:34:41-07:00
log	521f5b5a5682b18f2d59cf95226fc203cd314240
tree	a6662d9242fb9d3a3b859f2ce43b3a20d4b8dec9
parent	611132c171f3a821bd2e32f22261135cef6330ac
signature	Signed by PGP key B5690EEEBB952194

fix(web): replace Lineage timers with Stop on hover (#16791)

2 files changed, 11 insertions(+), 4 deletions(-)

apps
- web
  - src
    components
    chat
    ThreadDetailsControl.tsx
    ThreadRelationshipsControl.tsx

apps/web/src/components/chat/ThreadDetailsControl.tsx+1

...	@@ -20,6 +20,7 @@ import { ChevronDownIcon } from "lucide-react";	...	@@ -20,6 +20,7 @@ import { ChevronDownIcon } from "lucide-react";
20		20
21	const parts = {	21	const parts = {
22	row: THREAD_DETAILS_PANEL_ROW_CLASS,	22	row: THREAD_DETAILS_PANEL_ROW_CLASS,
		23	"group-row": `${THREAD_DETAILS_PANEL_ROW_CLASS} hover:!bg-transparent dark:hover:!bg-transparent`,
23	select: THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,	24	select: THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,
24	primary: THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS,	25	primary: THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS,
25	secondary: THREAD_DETAILS_PANEL_SPLIT_SECONDARY_CLASS,	26	secondary: THREAD_DETAILS_PANEL_SPLIT_SECONDARY_CLASS,

apps/web/src/components/chat/ThreadRelationshipsControl.tsx+10-4

 @@ -388,6 +388,9 @@ export function ThreadRelationshipsPanel(props: {
                 agent?.origin === "app_owned" &&
                 agent.startedAt &&
                 ["pending", "running", "waiting"].includes(agent.status);
+              const trailingVisibilityClass = canStop
+                ? "group-hover:opacity-0 group-focus-within:opacity-0 pointer-coarse:opacity-0 [@media(hover:none)]:opacity-0"
+                : "";
               const threadTitle = relationshipThreadTitle({
                 title: node?.thread?.title ?? agent?.title ?? threadId,
                 isSubagent,
 @@ -444,13 +447,13 @@ export function ThreadRelationshipsPanel(props: {
                       carries status, so an agent with a known time shows only that. */}
                   {agent && !failed && deriveSubagentElapsedMs(agent, 0) !== null ? (
                     <span
-                      className={`shrink-0 text-2xs font-normal tabular-nums text-muted-foreground ${canStop ? "group-hover:opacity-0 group-focus-within:opacity-0 pointer-coarse:opacity-0 [@media(hover:none)]:opacity-0" : ""}`}
+                      className={`shrink-0 text-2xs font-normal tabular-nums text-muted-foreground ${trailingVisibilityClass}`}
                     >
                       <AgentElapsed agent={agent} compact />
                     </span>
                   ) : !isMergeTarget ? (
                     <span
-                      className={`shrink-0 text-2xs ${failed ? "text-destructive" : "text-muted-foreground"}`}
+                      className={`shrink-0 text-2xs ${failed ? "text-destructive" : "text-muted-foreground"} ${trailingVisibilityClass}`}
                     >
                       {threadRelationshipStatusLabel(status)}
                     </span>
 @@ -458,7 +461,10 @@ export function ThreadRelationshipsPanel(props: {
                 </>
               );
               return (
-                <li key={threadId} className="group relative flex h-8 items-center rounded-lg">
+                <li
+                  key={threadId}
+                  className={`group relative flex h-8 items-center rounded-lg ${canStop ? THREAD_DETAILS_PANEL_LINK_SPLIT_GROUP_CLASS : ""}`}
+                >
                   {isMergeTarget ? (
                     <div className={THREAD_DETAILS_PANEL_LINK_SPLIT_GROUP_CLASS}>
                       <Tooltip>
 @@ -528,7 +534,7 @@ export function ThreadRelationshipsPanel(props: {
                             variant="ghost"
                             disabled={node?.missing === true}
                             onClick={() => openThread(threadId)}
-                            part="row"
+                            part={canStop ? "group-row" : "row"}
                           />
                         }
                       >