{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Collapsible message"
  ],
  "animated": false,
  "apis": [
    {
      "name": "pi.registerMessageRenderer",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#state-management"
    },
    {
      "name": "Component",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "wrapTextWithAnsi",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "CustomMessageComponent",
      "url": null
    },
    {
      "name": "MessageRenderer",
      "url": null
    }
  ],
  "applicability": [
    "Use this when injected context or attachments should stay identifiable but compact."
  ],
  "category": "tools",
  "categoryLabel": "Tool and message output",
  "consequences": [
    "Named message content can stay compact until expanded.",
    "Collapsed output omits lines and the extractor ignores non-text blocks."
  ],
  "family": "presentation",
  "familyLabel": "Presentation",
  "id": "message-fold",
  "implementation": [
    "Keep a remaining-line count when the preview is clipped.",
    "The skill-context extractor omits non-text blocks."
  ],
  "intent": "Render custom message content as a preview with expanded detail.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/message-fold.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "skill-context-collapsible-renderer",
      "moreRefs": 0,
      "refs": [
        {
          "file": "index.ts",
          "lines": "850-887",
          "sha": "a5c4429b",
          "url": "https://github.com/nicobailon/pi-skill-palette/blob/a5c4429b8c2e33ab903d07856497014f3d5ad34e/index.ts#L850-L887"
        }
      ],
      "repo": "pi-skill-palette",
      "repoUrl": "https://github.com/nicobailon/pi-skill-palette",
      "title": "Render skill context as a collapsible message preview"
    },
    {
      "example": "inline-message-cache",
      "moreRefs": 0,
      "refs": [
        {
          "file": "ui/inline-message.ts",
          "lines": "10-125",
          "sha": "a5fad4df",
          "url": "https://github.com/nicobailon/pi-intercom/blob/a5fad4df2a9fe4909bf4d9b06263c8316976b57d/ui/inline-message.ts#L10-L125"
        }
      ],
      "repo": "pi-intercom",
      "repoUrl": "https://github.com/nicobailon/pi-intercom",
      "title": "Cache message layout separately from live theme styling"
    }
  ],
  "linkedFrom": [],
  "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/message-fold.md",
  "motivation": "Skill Palette injects context that needs an identifiable preview without filling the transcript.",
  "name": "Message Fold",
  "participants": [
    {
      "name": "pi.registerMessageRenderer",
      "role": "Renders a named custom-message type.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#state-management"
    },
    {
      "name": "Component",
      "role": "Renders width-bounded lines and invalidates cached output.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "wrapTextWithAnsi",
      "role": "Wraps text while preserving styling across lines.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "Text preview",
      "role": "Retains an identity label and omitted-line count when collapsed.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "reuses wrapped message layout",
      "id": "late-paint",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/late-paint.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/late-paint.md",
      "name": "Late Paint",
      "url": "https://pi-tui.ratstack.sh/patterns/late-paint/"
    }
  ],
  "sampleCode": {
    "code": "// Message Fold: keep injected context identifiable while hiding its longer body.\nimport { Container, wrapTextWithAnsi } from \"@earendil-works/pi-tui\";\nimport { CustomMessageComponent, type MessageRenderer } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"message-fold\", title: \"Message Fold\", kind: \"component\",\n  apis: [\"CustomMessageComponent\", \"MessageRenderer\", \"wrapTextWithAnsi\"], rows: 16,\n  states: [\n    { id: \"collapsed\", label: \"Preview\" },\n    { id: \"expanded\", label: \"Full message\", steps: [{ type: \"action\", name: \"expand\" }] },\n    { id: \"non-text\", label: \"Non-text content\", steps: [{ type: \"action\", name: \"non-text\" }] },\n  ],\n  setup({ theme, tui, action, clock }) {\n    const renderer: MessageRenderer = (message, options) => {\n      const details = message.details;\n      const attachment = typeof details === \"object\" && details !== null &&\n        \"attachment\" in details && typeof details.attachment === \"string\" ? details.attachment : undefined;\n      const content = typeof message.content === \"string\" ? message.content :\n        message.content.filter(block => block.type === \"text\").map(block => block.text).join(\"\\n\");\n      return {\n        invalidate() {},\n        render(width) {\n          const body = wrapTextWithAnsi(content, width);\n          const preview = options.expanded ? body : body.slice(0, 2);\n          const omitted = body.length - preview.length;\n          return [\n            theme.fg(\"customMessageLabel\", \"[review-context]\"),\n            ...preview.map(row => theme.fg(\"customMessageText\", row)),\n            ...(omitted ? [theme.fg(\"muted\", \"+\" + omitted + \" lines · expand to read\")] : []),\n            ...(options.expanded && attachment\n              ? wrapTextWithAnsi(\"Attachment: \" + attachment, width)\n                .map(row => theme.fg(\"dim\", row)) : []),\n          ];\n        },\n      };\n    };\n    // This is the same callback pi.registerMessageRenderer accepts.\n    const message: Parameters<typeof renderer>[0] = {\n      role: \"custom\", customType: \"review-context\", display: true, timestamp: clock.now(),\n      content: \"Review the parser boundary.\\nKeep the narrow preview readable.\\nCheck both themes.\\nRetain the completion summary.\\nNo network calls in this fixture.\",\n      details: { attachment: \"review-notes.txt · synthetic metadata\" },\n    };\n    const slot = new Container();\n    let view = new CustomMessageComponent(message, renderer);\n    slot.addChild(view);\n    action(\"expand\", () => { view.setExpanded(true); tui.requestRender(); });\n    action(\"non-text\", () => {\n      view = new CustomMessageComponent({ ...message, details: undefined, content: [\n        { type: \"text\", text: \"Supported text: inspect the preview.\" },\n        { type: \"image\", data: \"\", mimeType: \"image/png\" },\n      ] }, renderer);\n      slot.children = [view]; tui.requestRender();\n    });\n    return slot;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/presentation/message-fold.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-40-dark.32a6f5ac9a36.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-40-light.791fe8ccc3d2.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-60-dark.2bf0e97bc816.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-60-light.70064c0da1e0.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-80-dark.de8bac3398f6.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-80-light.83ca1c7aa095.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-120-dark.2bc5f07bec9f.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Message Fold, Preview 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/message-fold/collapsed-120-light.39105cdb3f81.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a named synthetic context block and a remaining-line count.",
      "id": "collapsed",
      "label": "Preview",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Message Fold, Full message state, 40 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-40-dark.bef084e028d5.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Message Fold, Full message state, 40 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-40-light.dba4dd70f76c.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Message Fold, Full message state, 60 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-60-dark.fe8015526f5c.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Message Fold, Full message state, 60 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-60-light.ebfb26dd186a.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Message Fold, Full message state, 80 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-80-dark.0a5a731911c5.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Message Fold, Full message state, 80 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-80-light.8a68a4b09a44.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Message Fold, Full message state, 120 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-120-dark.8726abd586f2.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Message Fold, Full message state, 120 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/expanded-120-light.91d0a23fd160.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show its full text and synthetic attachment metadata.",
      "id": "expanded",
      "label": "Full message",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Message Fold, Non-text content state, 40 columns, dark theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-40-dark.cd5c064af112.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Message Fold, Non-text content state, 40 columns, light theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-40-light.02e622442eaa.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Message Fold, Non-text content state, 60 columns, dark theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-60-dark.d9b9064cc531.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Message Fold, Non-text content state, 60 columns, light theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-60-light.8113fa809861.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Message Fold, Non-text content state, 80 columns, dark theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-80-dark.bc6174036990.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Message Fold, Non-text content state, 80 columns, light theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-80-light.b9c10008652a.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Message Fold, Non-text content state, 120 columns, dark theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-120-dark.46d97cb16796.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Message Fold, Non-text content state, 120 columns, light theme, 3 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": 132,
          "rows": 3,
          "still": "https://pi-tui.ratstack.sh/frames/message-fold/non-text-120-light.27d8f0477b2f.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show only supported text without fabricating content for a non-text block.",
      "id": "non-text",
      "label": "Non-text content",
      "problems": []
    }
  ],
  "structure": "custom message -> text blocks\ntext -> preview + count / full view",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/message-fold/dark.12cdafcbed8e.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/message-fold/light.2ea915e5b852.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/message-fold/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}