{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Footer segments"
  ],
  "animated": false,
  "apis": [
    {
      "name": "ctx.ui.setFooter",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user"
    },
    {
      "name": "ReadonlyFooterDataProvider",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#choose-an-integration-point"
    },
    {
      "name": "visibleWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "truncateToWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    }
  ],
  "applicability": [
    "Use this when several optional signals compete for one footer line."
  ],
  "category": "layout",
  "categoryLabel": "Layout",
  "consequences": [
    "Independent segments support responsive visibility.",
    "Hidden segments and spacing need explicit width accounting."
  ],
  "family": "structural",
  "familyLabel": "Structural",
  "id": "status-ribbon",
  "implementation": [
    "Hidden segments must not consume spacing.",
    "The read-only footer provider has no session-ID getter."
  ],
  "intent": "Compose a footer from independently visible and measured status segments.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/status-ribbon.json",
  "kind": "screen",
  "knownUses": [
    {
      "example": "segment-composition",
      "moreRefs": 0,
      "refs": [
        {
          "file": "segments.ts",
          "lines": "540-576",
          "sha": "859dee67",
          "url": "https://github.com/nicobailon/pi-powerline-footer/blob/859dee671b633fb533b07ceba3e6c1ab1c43360a/segments.ts#L540-L576"
        },
        {
          "file": "index.ts",
          "lines": "1085-1150",
          "sha": "859dee67",
          "url": "https://github.com/nicobailon/pi-powerline-footer/blob/859dee671b633fb533b07ceba3e6c1ab1c43360a/index.ts#L1085-L1150"
        }
      ],
      "repo": "pi-powerline-footer",
      "repoUrl": "https://github.com/nicobailon/pi-powerline-footer",
      "title": "Compose a footer from independently rendered segments"
    },
    {
      "example": "nico-footer-data-provider",
      "moreRefs": 0,
      "refs": [
        {
          "file": "packages/coding-agent/src/core/footer-data-provider.ts",
          "lines": "40-80",
          "sha": "7b902612",
          "url": "https://github.com/earendil-works/pi/blob/7b902612e96a8bf49cf6f34345f09a44e5ca6926/packages/coding-agent/src/core/footer-data-provider.ts#L40-L80"
        }
      ],
      "repo": "earendil-works/pi",
      "repoUrl": "https://github.com/earendil-works/pi",
      "title": "Expose read-only footer data to custom footer components"
    },
    {
      "example": "nico-footer-data-provider",
      "moreRefs": 0,
      "refs": [],
      "repo": "pi-powerline-footer",
      "repoUrl": "https://github.com/nicobailon/pi-powerline-footer",
      "title": "Expose read-only footer data to custom footer components"
    }
  ],
  "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/status-ribbon.md",
  "motivation": "Powerline Footer must order optional segments and move secondary content when the footer runs out of columns.",
  "name": "Status Ribbon",
  "participants": [
    {
      "name": "ctx.ui.setFooter",
      "role": "Installs a footer factory with read-only footer data.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user"
    },
    {
      "name": "ReadonlyFooterDataProvider",
      "role": "Provides branch, status and provider data without mutation.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#choose-an-integration-point"
    },
    {
      "name": "visibleWidth",
      "role": "Measures rendered terminal columns rather than string length.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "truncateToWidth",
      "role": "Clips text to its allotted columns and can pad the result.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "Segment list",
      "role": "Keeps visibility, ordering and measured output separate.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "supplies keyed footer signals",
      "id": "keyed-slot",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/keyed-slot.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/keyed-slot.md",
      "name": "Keyed Slot",
      "url": "https://pi-tui.ratstack.sh/patterns/keyed-slot/"
    }
  ],
  "sampleCode": {
    "code": "// Status Ribbon: measure independent visible footer segments before composing rows.\nimport { truncateToWidth, visibleWidth } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"status-ribbon\", title: \"Status Ribbon\", kind: \"screen\",\n  apis: [\"ctx.ui.setFooter\", \"ReadonlyFooterDataProvider\", \"visibleWidth\", \"truncateToWidth\"],\n  states: [\n    { id: \"default\", label: \"All segments\" },\n    { id: \"compact\", label: \"Secondary segments\", steps: [{ type: \"action\", name: \"compact\" }] },\n    { id: \"empty\", label: \"Hidden segment\", steps: [{ type: \"action\", name: \"hide-preview\" }] },\n  ],\n  setup({ ui, theme, action, tui }) {\n    let compact = false;\n    ui.setEditorText(\"Review src/preview.ts\");\n    ui.setStatus(\"checks\", theme.fg(\"warning\", \"checks 2/3\"));\n    ui.setStatus(\"preview\", theme.fg(\"success\", \"preview ready\"));\n    ui.setFooter((footerTui, footerTheme, footerData) => {\n      const unsubscribe = footerData.onBranchChange(() => footerTui.requestRender());\n      return {\n        dispose: unsubscribe,\n        invalidate() {},\n        render(width) {\n          const segments = [\n            footerTheme.fg(\"accent\", \"branch \" + (footerData.getGitBranch() ?? \"none\")),\n            compact ? \"\" : footerTheme.fg(\"muted\", \"model sample-small\"),\n            ...footerData.getExtensionStatuses().values(),\n          ].filter(segment => visibleWidth(segment) > 0);\n          const separator = footerTheme.fg(\"dim\", \" · \");\n          const rows: string[] = [];\n          let row = \"\";\n          // Hidden segments are removed before separators or width allocation.\n          for (const segment of segments) {\n            const fitted = truncateToWidth(segment, width);\n            const next = row ? row + separator + fitted : fitted;\n            if (visibleWidth(next) > width && row) { rows.push(row); row = fitted; }\n            else row = next;\n          }\n          if (row) rows.push(row);\n          return rows;\n        },\n      };\n    });\n    action(\"compact\", () => { compact = true; tui.requestRender(); });\n    action(\"hide-preview\", () => { ui.setStatus(\"preview\", undefined); });\n    return () => {\n      ui.setStatus(\"checks\", undefined); ui.setStatus(\"preview\", undefined); ui.setFooter(undefined);\n    };\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/structural/status-ribbon.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Status Ribbon, All segments state, 40 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-40-dark.c7d711cd43b3.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Status Ribbon, All segments state, 40 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-40-light.79bfdd5de044.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Status Ribbon, All segments state, 60 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-60-dark.546dc43822a8.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Status Ribbon, All segments state, 60 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-60-light.3d5010dc8d0d.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Status Ribbon, All segments state, 80 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-80-dark.38544c181497.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Status Ribbon, All segments state, 80 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-80-light.ee826ec6c019.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Status Ribbon, All segments state, 120 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-120-dark.106d4ae8984b.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Status Ribbon, All segments state, 120 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/default-120-light.6147d7ea4d89.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show branch, model and two keyed statuses in a synthetic footer.",
      "id": "default",
      "label": "All segments",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Status Ribbon, Secondary segments state, 40 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-40-dark.ded43728d068.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Status Ribbon, Secondary segments state, 40 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-40-light.d56fe0a39900.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Status Ribbon, Secondary segments state, 60 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-60-dark.a54daafb9e32.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Status Ribbon, Secondary segments state, 60 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-60-light.64512596d3cc.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Status Ribbon, Secondary segments state, 80 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-80-dark.a82dbec1ae84.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Status Ribbon, Secondary segments state, 80 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-80-light.3539c422376a.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Status Ribbon, Secondary segments state, 120 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-120-dark.ae270add3f15.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Status Ribbon, Secondary segments state, 120 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/status-ribbon/compact-120-light.7b54b6ee8f49.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Move or omit secondary segments when the width cannot fit them.",
      "id": "compact",
      "label": "Secondary segments",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-40-dark.5077e07bf2c4.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-40-light.44253ac270d2.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-60-dark.5bc19c0ddab2.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-60-light.27336f9e42d9.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-80-dark.af94c058bb3b.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-80-light.67478dfd07fb.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-120-dark.1a142e3ce5c9.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Status Ribbon, Hidden segment 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/status-ribbon/empty-120-light.548044da014b.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Hide an empty segment without leaving a gap.",
      "id": "empty",
      "label": "Hidden segment",
      "problems": []
    }
  ],
  "structure": "footer data -> segments\nsegments -> measure -> footer",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/status-ribbon/dark.702deae308dc.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/status-ribbon/light.b3800a2292d1.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/status-ribbon/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}