fix: simplify topbar Runtime status

The topbar repeated a textual state after the Runtime or model name even
though it already displayed a compact status indicator. It now uses green,
yellow, and gray dots for ready, connecting, and unavailable states while
keeping detailed status available to assistive technology and tooltips.

Release note: 顶栏 Runtime 状态改用绿、黄、灰三色标记，不再重复显示“就绪”“连接中”或“不可用”文字。

src/renderer/src/App.test.tsx

@@ -1429,7 +1429,11 @@ describe('App', () => {
     )
     expect(runtimeStatus).not.toBeNull()
     expect(
-      within(runtimeStatus!).getByText('就绪')
+      within(runtimeStatus!).queryByText('就绪')
+    ).not.toBeInTheDocument()
+    expect(runtimeStatus).toHaveClass('runtime-status--ready')
+    expect(
+      runtimeStatus?.querySelector('.runtime-status__dot')
     ).toBeInTheDocument()
     expect(runtimeStatus).toHaveAttribute(
       'aria-describedby',
@@ -1449,6 +1453,16 @@ describe('App', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('uses a compact color indicator while connecting to a Runtime', () => {
+    render(<App />)
+    const connectingStatus = document.querySelector<HTMLElement>(
+      '.runtime-status'
+    )
+    expect(connectingStatus).toHaveClass('runtime-status--connecting')
+    expect(within(connectingStatus!).queryByText('连接中'))
+      .not.toBeInTheDocument()
+  })
+
   it('loads customized branding into the primary sidebar', async () => {
     expect(
       saveBrandingPreferences({

src/renderer/src/App.tsx

@@ -9127,20 +9127,13 @@ function App(): React.JSX.Element {
           <div className="topbar__actions">
             <span
               aria-describedby={runtimeDetailId}
-              className={
-                runtimeState === 'ready'
-                  ? 'runtime-status runtime-status--online'
-                  : 'runtime-status'
-              }
+              className={`runtime-status runtime-status--${runtimeState}`}
               title={runtimeDetail}
             >
               <span className="runtime-status__dot" />
               <span className="runtime-status__label">
                 {runtime?.label ?? t('runtime.detecting')}
               </span>
-              <span className="runtime-status__state">
-                {t(`runtime.state.${runtimeState}`)}
-              </span>
               {runtime?.capability === 'image-generation' && (
                 <span className="runtime-capability-badge">
                   {t('runtime.imageGeneration')}

src/renderer/src/WorkspacePrimitives.test.tsx

@@ -80,6 +80,18 @@ describe('WorkspacePrimitives', () => {
     cleanup()
   })
 
+  it('uses semantic colors for compact Runtime status dots', () => {
+    expect(stylesheet).toMatch(
+      /\.runtime-status--ready \.runtime-status__dot\s*\{[^}]*background:\s*var\(--success\);/u
+    )
+    expect(stylesheet).toMatch(
+      /\.runtime-status--connecting \.runtime-status__dot\s*\{[^}]*background:\s*var\(--warning\);/u
+    )
+    expect(stylesheet).toMatch(
+      /\.runtime-status--unavailable \.runtime-status__dot\s*\{[^}]*background:\s*var\(--text-muted\);/u
+    )
+  })
+
   it('keeps shared switch rows aligned without standalone dividers', () => {
     const toggleRowStyles = stylesheet.match(
       /\.toggle-row\s*\{(?<rules>[^}]*)\}/u

src/renderer/src/styles.css

@@ -5061,12 +5061,16 @@ button > svg {
   background: var(--text-muted);
 }
 
-.runtime-status--online {
-  color: var(--success);
+.runtime-status--ready .runtime-status__dot {
+  background: var(--success);
 }
 
-.runtime-status--online .runtime-status__dot {
-  background: var(--success);
+.runtime-status--connecting .runtime-status__dot {
+  background: var(--warning);
+}
+
+.runtime-status--unavailable .runtime-status__dot {
+  background: var(--text-muted);
 }
 
 .chat-scroll-region {