From c4f9cca2d70a5737bc65eb975f96b2c3310fc3e5 Mon Sep 17 00:00:00 2001
From: wuyang6 <wuyang6@xiaomi.com>
Date: Fri, 12 Jun 2026 18:42:20 +0800
Subject: [PATCH] Tighten session list status slot

---
 .../components/assistant-ui/thread-list.tsx   | 76 ++++++++++---------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/frontend/app/components/assistant-ui/thread-list.tsx b/frontend/app/components/assistant-ui/thread-list.tsx
index 4bcbeda..5d86b6f 100644
--- a/frontend/app/components/assistant-ui/thread-list.tsx
+++ b/frontend/app/components/assistant-ui/thread-list.tsx
@@ -482,7 +482,7 @@ const ClawSessionList: FC = () => {
 					return (
 						<div
 							key={`claw-session-${session.session_id}-${session.modified_at}`}
-							className="aui-thread-list-item group relative flex h-9 items-center gap-2 rounded-lg transition-colors hover:bg-muted data-[active=true]:bg-muted"
+							className="aui-thread-list-item group relative flex h-9 items-center rounded-lg transition-colors hover:bg-muted data-[active=true]:bg-muted"
 							data-active={active}
 						>
 							{renamingSessionId === session.session_id ? (
@@ -515,7 +515,7 @@ const ClawSessionList: FC = () => {
 							) : (
 								<button
 									type="button"
-									className="aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center truncate px-3 text-start text-sm"
+									className="aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center overflow-hidden px-3 text-start text-sm"
 									onClick={async () => {
 										console.log("[session-list] click", {
 											sessionId: session.session_id,
@@ -525,33 +525,24 @@ const ClawSessionList: FC = () => {
 										await openSession(session.session_id);
 									}}
 								>
-									<span className="truncate">
+									<span className="min-w-0 overflow-hidden text-clip whitespace-nowrap">
 										{loading
 											? "回放中..."
 											: session.preview || session.session_id}
 									</span>
 								</button>
 							)}
-							<SessionRunBadge
+							<SessionActionSlot
 								running={badge?.running === true}
 								unread={badge?.unread === true}
-							/>
-							<button
-								type="button"
-								className="aui-thread-list-item-more mr-2 flex size-7 shrink-0 items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 data-[busy=true]:opacity-100 data-[open=true]:bg-accent data-[open=true]:opacity-100"
-								data-busy={deletingSessionId === session.session_id}
-								data-open={openMenuSessionId === session.session_id}
-								aria-expanded={openMenuSessionId === session.session_id}
-								aria-label="打开历史会话菜单"
-								title="更多选项"
-								onClick={() => {
+								busy={deletingSessionId === session.session_id}
+								open={openMenuSessionId === session.session_id}
+								onOpenChange={() => {
 									setOpenMenuSessionId((current) =>
 										current === session.session_id ? null : session.session_id,
 									);
 								}}
-							>
-								<MoreHorizontalIcon className="size-4" />
-							</button>
+							/>
 							{openMenuSessionId === session.session_id ? (
 								<div className="aui-thread-list-item-more-content absolute top-8 right-1 z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md">
 									<button
@@ -712,34 +703,49 @@ function useSessionRunBadges(
 	return { bySessionId, markRead };
 }
 
-function SessionRunBadge({
+function SessionActionSlot({
 	running,
 	unread,
+	busy,
+	open,
+	onOpenChange,
 }: {
 	running: boolean;
 	unread: boolean;
+	busy: boolean;
+	open: boolean;
+	onOpenChange: () => void;
 }) {
-	if (running) {
-		return (
+	const hasBadge = running || unread;
+	return (
+		<div className="relative mr-2 flex size-7 shrink-0 items-center justify-center">
 			<span
-				className="flex size-5 shrink-0 items-center justify-center text-muted-foreground"
-				title="运行中"
+				aria-hidden={!hasBadge}
+				className="pointer-events-none absolute inset-0 flex items-center justify-center text-muted-foreground transition-opacity group-hover:opacity-0 data-[hidden=true]:opacity-0 data-[open=true]:opacity-0"
+				data-hidden={!hasBadge}
+				data-open={open || busy}
+				title={running ? "运行中" : unread ? "已完成，未查看" : undefined}
 			>
-				<Loader2Icon className="size-3.5 animate-spin" />
+				{running ? (
+					<Loader2Icon className="size-3.5 animate-spin" />
+				) : unread ? (
+					<span className="size-2 rounded-full bg-sky-300" />
+				) : null}
 			</span>
-		);
-	}
-	if (unread) {
-		return (
-			<span
-				className="flex size-5 shrink-0 items-center justify-center"
-				title="已完成，未查看"
+			<button
+				type="button"
+				className="aui-thread-list-item-more absolute inset-0 flex items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 data-[busy=true]:opacity-100 data-[open=true]:bg-accent data-[open=true]:opacity-100"
+				data-busy={busy}
+				data-open={open}
+				aria-expanded={open}
+				aria-label="打开历史会话菜单"
+				title="更多选项"
+				onClick={onOpenChange}
 			>
-				<span className="size-2 rounded-full bg-sky-300" />
-			</span>
-		);
-	}
-	return <span aria-hidden="true" className="size-5 shrink-0" />;
+				<MoreHorizontalIcon className="size-4" />
+			</button>
+		</div>
+	);
 }
 
 function dedupeSessions(payload: unknown[]) {