From 8cb3c4053cc0765833b16b1f01a26f34c617efe8 Mon Sep 17 00:00:00 2001
From: cmliu <cmliu@users.noreply.github.com>
Date: Fri, 31 Jul 2026 03:10:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E4=BC=9A=E8=AF=9DID?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=96=87=E6=9C=AC=E6=BA=A2=E5=87=BA=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/main.ts   | 9 ++++++++-
 frontend/src/style.css | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9ae4b5c..61b9134 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1082,6 +1082,11 @@ function updateConnectionStatus(message: LocalizedMessage): void {
   }
 }
 
+function formatSessionId(id: string): string {
+  if (!id) return '';
+  return id.length > 8 ? `${id.slice(0, 8)}…` : id;
+}
+
 function setState(state: ConnectionState, label?: string): void {
   connectionState = state;
   const stateLabel = label ?? ({
@@ -1095,10 +1100,11 @@ function setState(state: ConnectionState, label?: string): void {
   ui.liveOrbLabel.textContent = stateLabel;
   ui.liveOrb.title = stateLabel;
   const control = resolveConnectionControl(state, historyPasswordLoading);
+  const sessionPrefix = formatSessionId(currentSessionId);
   const controlLabel = control.action === 'cancel'
     ? bilingual('取消连接', 'Cancel connection')
     : control.action === 'disconnect'
-      ? (currentSessionId ? `${currentSessionId} ${bilingual('断开', 'Disconnect')}` : bilingual('断开', 'Disconnect'))
+      ? (sessionPrefix ? `${sessionPrefix} ${bilingual('断开', 'Disconnect')}` : bilingual('断开', 'Disconnect'))
       : control.action === 'disconnecting'
         ? bilingual('断开中...', 'Disconnecting...')
         : bilingual('连接', 'Connect');
@@ -1108,6 +1114,7 @@ function setState(state: ConnectionState, label?: string): void {
   ui.connect.querySelector<HTMLElement>('.button-icon')!.textContent = control.danger ? 'x' : '>_';
   ui.connect.querySelector<HTMLElement>('span:last-child')!.textContent = controlLabel;
   ui.connect.setAttribute('aria-label', controlLabel);
+  ui.connect.title = currentSessionId || controlLabel;
 }
 
 function event(message: string, category = 'session', error = false, alternate?: string): void {
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4876c14..944686f 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -864,10 +864,18 @@ button:disabled {
   align-items: center;
   justify-content: center;
   gap: 8px;
+  min-width: 0;
   background: var(--accent);
   color: #06130e;
 }
 
+.primary-button > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 [data-theme='light'] .primary-button {
   color: #fff;
 }