fix: /workflows 面板默认只显示运行中 run,根治 tab 行乱码

之前几次渲染层修复都失败,因为没动 tab 列表的数据源:打开 /workflows 会
自动 hydrate 最多 20 个历史 done/killed run,全部塞进一行 TabsBar,超出
终端宽度后 Ink 把字符画到屏外造成重影乱码。

- selectors.ts 加 filterActiveRuns(只留 status === 'running')和
  capTabsForDisplay(超额 fold 成 +N)两个 pure function
- WorkflowsPanel 接线 activeRuns:focus clamp、focused、nextTab/prevTab、
  TabsBar 全部基于过滤后的 activeRuns
- TabsBar 复用 truncateLabel 限制每个 tab 名 18 字符 + 最多 6 个 tab,
  多余显示 +N,从结构上钉死单行总宽度

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>
This commit is contained in:
claude-code-best
2026-06-20 23:17:03 +08:00
parent ade9babee1
commit 1638728305
4 changed files with 154 additions and 18 deletions

View File

@@ -54,6 +54,37 @@ export function filterAgentsByPhase(
return agents.filter(a => a.phase === selectedPhase)
}
/**
* Keep only runs still in flight. The /workflows panel defaults to this view: opening the panel
* no longer floods the tab row with months of persisted historical runs (which overflowed the
* terminal width and produced garbled overlapping text). Terminal runs (completed/failed/killed)
* stay on disk and remain resumable via getRunAsync; only the tab row filters them out.
*
* Pure + order-preserving: callers rely on the same relative order as the input (store.list()
* already returns newest-first by updatedAt).
*/
export function filterActiveRuns(runs: RunProgress[]): RunProgress[] {
return runs.filter(r => r.status === 'running')
}
/**
* Cap how many runs reach the tab row. Defensive fallback: even if active runs accumulate
* (long-lived session, runaway launcher), the row must never overflow the terminal width and
* re-introduce the garbled render. Anything past maxTabs is folded into an `overflow` count
* that the panel renders as `+N`.
*
* `runs` is sliced as-is (no re-sort); the caller is expected to have already applied
* filterActiveRuns and any ordering upstream.
*/
export function capTabsForDisplay(
runs: RunProgress[],
maxTabs: number,
): { runs: RunProgress[]; overflow: number } {
const cap = Math.max(0, Math.trunc(maxTabs))
const visible = runs.slice(0, cap)
return { runs: visible, overflow: Math.max(0, runs.length - visible.length) }
}
/** tab label: workflow name + `#` + last 4 chars of runId (disambiguates same-name runs). */
export function tabLabel(workflowName: string, runId: string): string {
return `${workflowName}#${runId.slice(-4)}`