{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Renderer decoration"
  ],
  "animated": false,
  "apis": [
    {
      "name": "pi.registerToolRenderer",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "ToolDefinition.renderCall",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "ToolDefinition.renderResult",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "ToolRendererResolver",
      "url": null
    },
    {
      "name": "ToolExecutionComponent",
      "url": null
    },
    {
      "name": "Container",
      "url": null
    }
  ],
  "applicability": [
    "Use this when rendering extensions must compose rather than overwrite each other."
  ],
  "category": "tools",
  "categoryLabel": "Tool and message output",
  "consequences": [
    "Current resolver composition can retain or wrap an existing renderer.",
    "The old registerTool interception and teardown strategy must not be copied as the default."
  ],
  "family": "presentation",
  "familyLabel": "Presentation",
  "id": "renderer-chain",
  "implementation": [
    "Use the current resolver and next() rather than copying registerTool interception.",
    "The source adapter's teardown and override policy are historical implementation details."
  ],
  "intent": "Add tool rendering while preserving an existing renderer or fallback.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/renderer-chain.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "adapter-decoration",
      "moreRefs": 0,
      "refs": [
        {
          "file": "src/tool-overrides.ts",
          "lines": "1500-1538",
          "sha": "fca8c858",
          "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/tool-overrides.ts#L1500-L1538"
        },
        {
          "file": "src/tool-overrides.ts",
          "lines": "2040-2072",
          "sha": "fca8c858",
          "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/tool-overrides.ts#L2040-L2072"
        }
      ],
      "repo": "pi-tool-display",
      "repoUrl": "https://github.com/nicobailon/pi-tool-display",
      "title": "Composable renderer adapters"
    }
  ],
  "linkedFrom": [
    {
      "how": "selects or wraps the renderer",
      "id": "call-capsule",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/call-capsule.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/call-capsule.md",
      "name": "Call Capsule",
      "url": "https://pi-tui.ratstack.sh/patterns/call-capsule/"
    }
  ],
  "links": {
    "agentGuide": "https://pi-tui.ratstack.sh/llms.txt",
    "index": "https://pi-tui.ratstack.sh/patterns.md",
    "skill": "https://pi-tui.ratstack.sh/skills/build-pi-tui-component.md"
  },
  "mdUrl": "https://pi-tui.ratstack.sh/patterns/renderer-chain.md",
  "motivation": "Tool Display preserves existing renderers unless its explicit override policy requests replacement.",
  "name": "Renderer Chain",
  "participants": [
    {
      "name": "pi.registerToolRenderer",
      "role": "Composes tool-renderer resolution through next.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "ToolDefinition.renderCall",
      "role": "Renders the call before or during execution.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "ToolDefinition.renderResult",
      "role": "Renders partial or final tool output.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "Prior renderer",
      "role": "Provides output to preserve, wrap or fall back from.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "retains per-execution renderer state",
      "id": "call-capsule",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/call-capsule.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/call-capsule.md",
      "name": "Call Capsule",
      "url": "https://pi-tui.ratstack.sh/patterns/call-capsule/"
    }
  ],
  "sampleCode": {
    "code": "// Renderer Chain: preserve next() or decorate it; use a fallback only if absent.\nimport { Container, Text } from \"@earendil-works/pi-tui\";\nimport { ToolExecutionComponent, type ToolRenderers, type ToolRendererResolver } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"renderer-chain\", title: \"Renderer Chain\", kind: \"component\",\n  apis: [\"ToolRendererResolver\", \"ToolExecutionComponent\", \"Container\"], rows: 12,\n  states: [\n    { id: \"fallback\", label: \"No existing renderer\" },\n    { id: \"preserved\", label: \"Existing renderer\", steps: [{ type: \"action\", name: \"preserve\" }] },\n    { id: \"decorated\", label: \"Decorated output\", steps: [{ type: \"action\", name: \"decorate\" }] },\n  ],\n  setup({ theme, tui, action }) {\n    let existing = false, decorate = false;\n    const prior: ToolRenderers = {\n      renderCall: () => new Text(theme.fg(\"toolTitle\", \"lint_preview · original renderer\"), 0, 0),\n      renderResult: () => new Text(theme.fg(\"success\", \"Original result: 6 checks passed\"), 0, 0),\n    };\n    const fallback: ToolRenderers = {\n      renderCall: () => new Text(theme.fg(\"toolTitle\", \"lint_preview · fallback renderer\"), 0, 0),\n      renderResult: () => new Text(theme.fg(\"muted\", \"Fallback result: no prior renderer\"), 0, 0),\n    };\n    // Register this typed callback with pi.registerToolRenderer in an extension.\n    // The component harness has no extension registry; it drives the callback.\n    const resolver: ToolRendererResolver = (toolName, next) => {\n      const previous = next();\n      if (toolName !== \"lint_preview\") return previous;\n      if (!previous) return fallback;\n      if (!decorate || !previous.renderResult) return previous;\n      const renderResult = previous.renderResult;\n      return {\n        ...previous,\n        renderResult(result, options, activeTheme, context) {\n          const decorated = new Container();\n          decorated.addChild(new Text(activeTheme.fg(\"accent\", \"Review badge · output below unchanged\"), 0, 0));\n          decorated.addChild(renderResult(result, options, activeTheme, context));\n          return decorated;\n        },\n      };\n    };\n    const slot = new Container();\n    function mount() {\n      const renderers = resolver(\"lint_preview\", () => existing ? prior : undefined);\n      const tool = new ToolExecutionComponent(\"lint_preview\", \"example-lint-1\", {},\n        undefined, renderers, tui, \"/workspace/example\");\n      tool.updateResult({ content: [], isError: false }, false);\n      slot.children = [tool];\n      tui.requestRender();\n    }\n    mount();\n    action(\"preserve\", () => { existing = true; mount(); });\n    action(\"decorate\", () => { decorate = true; mount(); });\n    return slot;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/presentation/renderer-chain.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Renderer Chain, No existing renderer state, 40 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-40-dark.cd11dd96c73a.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Renderer Chain, No existing renderer state, 40 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-40-light.989286f2dedc.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Renderer Chain, No existing renderer state, 60 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-60-dark.4b1f865a1eab.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Renderer Chain, No existing renderer state, 60 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-60-light.7443c68a0b45.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Renderer Chain, No existing renderer state, 80 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-80-dark.fbabb775feba.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Renderer Chain, No existing renderer state, 80 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-80-light.ef127dcca8cb.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Renderer Chain, No existing renderer state, 120 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-120-dark.ae6ac8608601.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Renderer Chain, No existing renderer state, 120 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/fallback-120-light.e3931a71241b.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a synthetic tool using the supplied fallback renderer.",
      "id": "fallback",
      "label": "No existing renderer",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Renderer Chain, Existing renderer state, 40 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-40-dark.3c00589da6d8.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Renderer Chain, Existing renderer state, 40 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-40-light.197316da6e6e.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Renderer Chain, Existing renderer state, 60 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-60-dark.097567875c29.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Renderer Chain, Existing renderer state, 60 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-60-light.7c50e1866458.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Renderer Chain, Existing renderer state, 80 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-80-dark.cb11e875f46e.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Renderer Chain, Existing renderer state, 80 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-80-light.4287f2d41890.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Renderer Chain, Existing renderer state, 120 columns, dark theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-120-dark.67080898d8ba.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Renderer Chain, Existing renderer state, 120 columns, light theme, 5 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/preserved-120-light.77d19421ed4e.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Keep an earlier renderer's output intact.",
      "id": "preserved",
      "label": "Existing renderer",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Renderer Chain, Decorated output state, 40 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-40-dark.b3ef81983ed2.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Renderer Chain, Decorated output state, 40 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-40-light.d698dd2f5e64.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Renderer Chain, Decorated output state, 60 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-60-dark.c9faa96ee6ff.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Renderer Chain, Decorated output state, 60 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-60-light.5cfb4775add4.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Renderer Chain, Decorated output state, 80 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-80-dark.f8e5b3b26501.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Renderer Chain, Decorated output state, 80 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-80-light.d9d90e312003.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Renderer Chain, Decorated output state, 120 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-120-dark.bcbe9cbae23b.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Renderer Chain, Decorated output state, 120 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/renderer-chain/decorated-120-light.b24ba594e030.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Wrap an existing renderer's component with a small extra label.",
      "id": "decorated",
      "label": "Decorated output",
      "problems": []
    }
  ],
  "structure": "resolver -> next() -> prior renderer\nprior / fallback -> component",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/renderer-chain/dark.4fdfcebfc386.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/renderer-chain/light.d39b820dfa26.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/renderer-chain/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}