Agent Skills › lichtblick-suite/lichtblick › message-pipeline

message-pipeline

GitHub

解析 MessagePipeline 数据总线架构，涵盖 zustand 状态管理、React Context 及面板订阅机制。用于指导前端组件间通信、状态同步与性能优化相关的开发工作。

.github/skills/message-pipeline/SKILL.md lichtblick-suite/lichtblick

Trigger Scenarios

查询播放器与面板间的数据流逻辑排查状态更新或订阅合并问题了解 zustand store 结构以进行功能开发

Install

npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y

More Options

Non-standard path

npx skills add https://github.com/lichtblick-suite/lichtblick/tree/develop/.github/skills/message-pipeline -g -y

Use without installing

npx skills use lichtblick-suite/lichtblick@message-pipeline

指定 Agent (Claude Code)

npx skills add lichtblick-suite/lichtblick --skill message-pipeline -a claude-code -g -y

安装 repo 全部 skill

npx skills add lichtblick-suite/lichtblick --all -g -y

预览 repo 内 skill

npx skills add lichtblick-suite/lichtblick --list

SKILL.md

Frontmatter

{
    "name": "message-pipeline",
    "description": "Deep MessagePipeline implementation knowledge: zustand store shape, React context provider, subscription merging\/memoization, render-state flow, and the Player→panel data bus."
}

Message Pipeline Skill

The MessagePipeline is the central data bus connecting Players to Panels.

Data Flow

Player (emits PlayerState)
    │  playerListener callback
    ▼
MessagePipeline (zustand store + React context)
    │  selector-based notifications
    ▼
PanelExtensionAdapter (per-panel bridge)
    │
    ▼
Panel (receives RenderState)

Core Files

File	Role
`packages/suite-base/src/components/MessagePipeline/index.tsx`	React context provider; creates the zustand store and connects to the Player
`packages/suite-base/src/components/MessagePipeline/store.ts`	`MessagePipelineInternalState` + dispatch actions
`packages/suite-base/src/components/MessagePipeline/types.ts`	`MessagePipelineContext` — the interface panels see
`packages/suite-base/src/components/MessagePipeline/subscriptions.ts`	Subscription merging + memoization
`packages/suite-base/src/components/MessagePipeline/selectors.ts`	Selector helpers for fine-grained subscriptions

Store Update Flow

Player emits state → the playerListener callback fires
Store dispatch → the "update" action merges the new PlayerState into internal state
Selectors react → zustand subscribers (panels) are notified via selector equality checks
Render state built → PanelExtensionAdapter incrementally builds RenderState per panel

Internal Store Actions

"update" — new PlayerState received from the player listener
"set-subscriptions" — a panel's subscriptions changed
"playback-seek" — user seeks to a new time
"set-playback-speed" — playback rate changed

Subscription System

Panels declare the topics they need:

context.subscribe([{ topic: "/camera/image" }]);

The pipeline:

Collects subscriptions from all active panels
Merges overlapping subscriptions (deduplicates topics)
Forwards the merged set to the Player via player.setSubscriptions()
The Player only iterates topics that are actually subscribed

Subscription Memoization

subscriptions.ts uses reference equality to avoid recomputing the merged subscription set
A Player update is only triggered when the effective topic set changes

MessagePipelineContext (what panels access)

playerState — current player status (playing, paused, error)
activeData — messages, currentTime, startTime, endTime, topics, datatypes
messagesByTopic — Map<topic, messages> for the current frame
sortedTopics — alphabetically sorted topic list
subscriptions — currently active subscriptions
seekPlayback(time) — seek to a specific time
setPlaybackSpeed(speed) — change playback rate

Performance Notes

Zustand selectors enable per-panel, fine-grained updates (no full re-renders)
messagesByTopic is rebuilt only when new messages arrive (not every frame)
Subscription merging prevents redundant data iteration in the Player
Render state is built incrementally — only changed fields are recomputed

Skills Reference

For the panel-side bridge and RenderState contract: load panel-extension-api skill
For Player internals upstream of the pipeline: load player-internals skill