用途：这是 Rayfin VS Code 扩展（packages/tools/vscode）中 React Webview 的架构模式与约定，供创建或修改 webview、在 src/webviews/ 下新增组件、使用 React Context 状态管理、集成 Monaco Editor、排查事件处理器闭包陈旧问题时参考。tRPC 消息相关约定另见 vscode-webview-trpc-messaging，完整参考为 references/REACT_ARCHITECTURE_GUIDELINES.md。
渲染管线：每个 webview 经 src/webviews/index.tsx 启动，根组件为 DynamicThemeProvider（适配 Fluent UI 与 VS Code 主题）包裹 WithWebviewContext（通过 React Context 提供 postMessage 的 vscodeApi），再挂载具体组件；WebviewRegistry 负责 webview 名到组件的映射；扩展宿主配置通过 useConfiguration<T>() 读取。
文件组织：按 viewName 目录拆分主组件、scss 样式、context、Controller、tRPC router、constants、components、hooks、types、utils。
状态管理：简单视图用 useState 与 props；复杂视图用 Context 的 [state, setState] 元组，依赖先前值时须使用函数式更新。注意闭包陈旧问题：初始化时绑定事件处理器的第三方组件不会随状态更新，需用 ref 保存最新数据并在回调中读取。
界面与样式：使用 @fluentui/react-components v9，配合 DynamicThemeProvider 主题，常用 ProgressBar、Button、TabList、Dropdown、Badge、MessageBar、Skeleton 等；每个组件单独 .scss，共享样式放 sharedStyles.scss 并 @extend，间距统一 10px，避免内联样式与负外边距。自定义 Hook 如 useSelectiveContextMenuPrevention() 在顶层视图调用一次，用于屏蔽除 Monaco 编辑器外的浏览器右键菜单。限制与更多细节资料未完全提供。