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

message-pipeline

GitHub

MessagePipeline是连接Player与Panel的核心数据总线，基于Zustand和React Context实现。涵盖状态流转、订阅合并、选择器通知及性能优化机制，为面板提供细粒度渲染支持。

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

触发场景

理解或修改消息管道架构排查Panel数据同步问题优化Zustand订阅性能

安装

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

更多选项

非标准路径

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

不安装直接使用

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