agent-stream-nesting-logic
**agent-stream-nesting-logic** implements a recursive message sequencing architecture for the Wanwu platform that handles nested sub-conversations (skill calls, tool outputs, knowledge base results) within a parent message stream. Use this when building streaming SSE interfaces that require interleaved main text and multiple child conversation cards with proper ordering, Vue 2 reactivity preservation, and DOM anchor attributes for citation linking. The protocol enforces absolute ordering via `order` fields, maintains reactive object references to prevent typing animation loss in nested components, and distinguishes stable markdown output from active buffered text during streaming.
git clone --depth 1 https://github.com/UnicomAI/wanwu /tmp/agent-stream-nesting-logic && cp -r /tmp/agent-stream-nesting-logic/.agents/skills/agent-stream-nesting-logic ~/.claude/skills/agent-stream-nesting-logicSKILL.md
# 子会话递归嵌套渲染架构协议 (Nesting Architecture Protocol)
本指南针对万悟平台中「主消息 -> 子会话 (Skill/Tool/Knowledge) -> 孙级会话」的递归序列化渲染标准，定义了 AI 助手及后续维护者必须遵守的底层逻辑。
## 1. 核心模型：三明治序列 (The Sandwich Sequence)
为了支持正文与多个子会话（工具调用、知识库）的任意插空排列，我们不再按类型分块渲染，而是通过 `messageSequence` 数组实现**“三明治”交错结构**。
- **`type: 'main'`**: 文本片段。直接由 `StreamProcessor` 驱动打字机渲染。
- **`type: 'sub'`**: 子会话卡片。触发 `SubConversion.vue` 组件递归渲染。
### 核心映射逻辑：
- **顶级子会话**: `parentId` 为空的包，进入主消息的 `messageSequence`。
- **嵌套子会话**: 具有 `parentId` 的包，必须由对应的父组件 ID “领养”，存入其自身的 `messageSequence` 中。
## 2. 时序法则：Order 绝对排序
- **局部闭包排序**: 在每一个 `messageSequence` 内部，必须以 `order` 字段为唯一权重进行升序排列。
- **同 Order 追加协定**: 若同一个 ID 下出现多个 Order 相同的数据包，前端视为“内容的物理追加”而非“组件的新增”。
## 3. 动力学：动静 Chunk 分层
在渲染 `main` 片段时，必须区分两种状态以防止打字时界面闪烁：
- **`stableChunks`**: 已完成 Markdown 语法闭环解析并生成的 HTML 块集合。
- **`activeResponse`**: 正在缓冲区排队、尚未完成闭环解析的输入文本（打字动画部分）。
## 4. 引用溯源：Data Attributes 协议
所有生成的子会话 DOM 必须携带以下身份锚点，以支持「引文角标点击」的事件冒泡定位：
- **`data-sub-id`**: 该段文字所属的原子消息 ID（若是吸收片段，则为分片 ID）。
- **`data-parent-id`**: 视觉所属的容器组件 ID（父卡片 ID）。
## 5. 响应式红线 (CRITICAL) - Vue 2 专供
> [!IMPORTANT]
> **绝对禁止使用浅拷贝或快照！**
>
> 在将子会话（尤其是 `agentSkillText` 正文分段）注册进父组件序列时，**必须直接传递原始响应式对象的引用**（即 `parentSub.messageSequence.push(subConversion)`）。
>
> - **原因**: 只有保持引用一致，外部 `StreamProcessor` 对 `activeResponse` 的实时增长才能无缝穿透进多层嵌套的子组件 UI 中。若使用 `{...subConversion}` 浅拷贝，会导致打字效果丢失或不连续。
## 6. 生命周期管理
- **状态单向锁**: 状态 `status: 3/4`（结束/失败）一旦更新，不再受后续包干扰回退。
- **ID 纠错逻辑**: 若后端返回 `id === parentId`（自引用死循环），必须在 `sseMethod.js` 拦截层将其重刷 ID 为 `content_` 前缀的分片包。Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Build apps with the Claude API or Anthropic SDK. TRIGGER when: code imports `anthropic`/`@anthropic-ai/sdk`/`claude_agent_sdk`, or user asks to use Claude API, Anthropic SDKs, or Agent SDK. DO NOT TRIGGER when: code imports `openai`/other AI SDK, general programming, or ML/data-science tasks.
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).