fix: restore supervision feedback sidebar layout

Replace unstyled full-width pin and refresh controls with shared icon buttons in the feedback header. Show conversation and task titles instead of raw IDs, with responsive spacing and keyboard focus coverage.

Release note: 修复任务中心监督反馈按钮样式和布局，显示会话或任务名称，并改善窄侧栏下的阅读与操作体验。

tests/supervisor-layout.electron.test.ts

@@ -8,7 +8,9 @@ import { createServer } from 'vite'
 import react from '@vitejs/plugin-react'
 import { expect, it } from 'vitest'
 
-it('renders the production supervisor at desktop, narrow, and mobile widths', async () => {
+it(process.env.GOODBUDDY_SUPERVISOR_SIDEBAR
+  ? 'renders the production supervision card at narrow widths in both themes'
+  : 'renders the production supervisor at desktop, narrow, and mobile widths', async () => {
   const directory = await mkdtemp(join(tmpdir(), 'goodbuddy-supervisor-'))
   const css = await readFile(
     'src/renderer/src/supervisor-workspace.css',
@@ -45,7 +47,7 @@ it('renders the production supervisor at desktop, narrow, and mobile widths', as
     const env: NodeJS.ProcessEnv = {
       ...process.env,
       GOODBUDDY_SUPERVISOR_URL:
-        server.resolvedUrls!.local[0] + 'supervisor.html',
+        server.resolvedUrls!.local[0] + 'supervisor.html' + (process.env.GOODBUDDY_SUPERVISOR_SIDEBAR ? '?sidebar=1' : ''),
       GOODBUDDY_SUPERVISOR_DIRECTORY: directory,
       GOODBUDDY_SUPERVISOR_TOKENS: JSON.stringify([
         ...new Set(

tests/support/supervisor-layout-driver.mjs

@@ -61,6 +61,51 @@ app
       await settle()
     }
     const reports = []
+    if (process.env.GOODBUDDY_SUPERVISOR_SIDEBAR) {
+      await win.loadURL(process.env.GOODBUDDY_SUPERVISOR_URL)
+      await wait('!!document.querySelector(".supervision-card")')
+      await js('document.fonts.ready')
+      win.show()
+      win.focus()
+      for (const theme of ['light', 'dark']) {
+        await js(`document.documentElement.dataset.theme = '${theme}'`)
+        for (const width of [480, 300, 200]) {
+          win.setContentSize(width, 640)
+          await js('document.querySelector(".supervision-card__header button").focus()')
+          win.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Tab' })
+          win.webContents.sendInputEvent({ type: 'keyUp', keyCode: 'Tab' })
+          await settle()
+          const report = await js(`(() => {
+            const card = document.querySelector('.supervision-card');
+            const header = card.querySelector('.supervision-card__header');
+            const buttons = [...header.querySelectorAll('button')];
+            return {
+              width: innerWidth, scrollWidth: document.documentElement.scrollWidth,
+              cardWidth: card.clientWidth, cardScrollWidth: card.scrollWidth,
+              headerHeight: header.getBoundingClientRect().height,
+              buttons: buttons.map(b => ({ width: b.getBoundingClientRect().width,
+                height: b.getBoundingClientRect().height, background: getComputedStyle(b).backgroundColor })),
+              focus: getComputedStyle(document.activeElement).outlineStyle,
+              text: card.textContent
+            };
+          })()`)
+          assert(report.scrollWidth <= report.width, `Page overflow: ${JSON.stringify(report)}`)
+          assert(report.cardScrollWidth <= report.cardWidth, 'Card overflow')
+          assert.equal(report.headerHeight, 34)
+          assert(report.buttons.every(b => b.width === 34 && b.height === 34), 'Compact shared buttons')
+          assert.equal(report.focus, 'solid')
+          assert(!report.text.includes('simulated-conversation-uuid'), 'Raw UUID visible')
+          reports.push({ theme, ...report })
+          await writeFile(join(artifacts, `sidebar-${theme}-${width}.png`), (await win.webContents.capturePage()).toPNG())
+        }
+      }
+      assert.deepEqual(errors, [])
+      await writeFile(join(artifacts, 'sidebar-measurements.json'), JSON.stringify(reports, null, 2))
+      console.log(JSON.stringify({ artifacts, cases: reports.length, errors }))
+      win.destroy()
+      app.quit()
+      return
+    }
     await open(false)
     await js(
       'document.querySelector(".supervisor-workspace__legend .link-button").click()'

tests/support/supervisor-layout-regression.tsx

@@ -1,6 +1,7 @@
 // Simulated visual fixture only. No preload, user database, or model is used.
 import { createRoot } from 'react-dom/client'
 import { HeartbeatCenter } from '../../src/renderer/src/HeartbeatCenter'
+import { SupervisionCard } from '../../src/renderer/src/RightAssistantSidebar'
 import { PageShell } from '../../src/renderer/src/WorkspacePrimitives'
 import { UiLocaleProvider } from '../../src/renderer/src/i18n/UiLocaleProvider'
 import type { SupervisionGraphView } from '../../src/shared/supervision-contracts'
@@ -202,6 +203,7 @@ createRoot(document.getElementById('root')!).render(
           color: 'var(--text-secondary)',
           display: 'flex',
           flexWrap: 'wrap',
+          overflowWrap: 'anywhere',
           gap: 'var(--space-3)'
         }}
       >
@@ -212,7 +214,14 @@ createRoot(document.getElementById('root')!).render(
           </a>
         ))}
       </div>
-      <PageShell variant="supervisor">
+      {params.has('sidebar') ? <div className="assistant-sidebar__section task-center">
+        <SupervisionCard
+          target={{ type: 'conversation', conversationId: 'simulated-conversation-uuid' }}
+          conversationTitle={'模拟会话：核对项目交付清单与阶段回顾'.repeat(3)}
+          pinned
+          onTogglePinned={() => {}}
+        />
+      </div> : <PageShell variant="supervisor">
         <HeartbeatCenter
           configs={[]}
           runs={[]}
@@ -231,7 +240,7 @@ createRoot(document.getElementById('root')!).render(
           onUseFollowUpTask={() => {}}
           onRetryLoad={noop}
         />
-      </PageShell>
+      </PageShell>}
     </div>
   </UiLocaleProvider>
 )