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: 修复任务中心监督反馈按钮样式和布局，显示会话或任务名称，并改善窄侧栏下的阅读与操作体验。
2026-09-23 21:52:36 +08:00
parent bf8ff7f78e
commit b16fc900bb
7 changed files with 153 additions and 17 deletions
@@ -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()'
@@ -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>
 )