{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "List-detail view"
  ],
  "animated": false,
  "apis": [
    {
      "name": "ctx.ui.custom",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "Component",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "KeybindingsManager.matches",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#handle-keyboard-input-and-focus"
    },
    {
      "name": "SelectList",
      "url": null
    },
    {
      "name": "truncateToWidth",
      "url": null
    }
  ],
  "applicability": [
    "Use this when heterogeneous jobs or records need a browseable detail view."
  ],
  "category": "lists",
  "categoryLabel": "Lists and pickers",
  "consequences": [
    "One selected snapshot drives consistent detail output.",
    "Projection must remain separate from job mutations and action callbacks."
  ],
  "family": "structural",
  "familyLabel": "Structural",
  "id": "detail-lens",
  "implementation": [
    "Do not mutate the underlying jobs during display projection.",
    "Pass actions and configurable keys into the mounted view."
  ],
  "intent": "Derive a selected item's detail sections from a read-only snapshot.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/detail-lens.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "fleet-detail-projection",
      "moreRefs": 0,
      "refs": [
        {
          "file": "src/tui/fleet.ts",
          "lines": "1-120",
          "sha": "6826b054",
          "url": "https://github.com/nicobailon/pi-subagents/blob/6826b0545216077195ae8ffe468a6434715814b7/src/tui/fleet.ts#L1-L120"
        },
        {
          "file": "src/tui/fleet.ts",
          "lines": "1360-1463",
          "sha": "6826b054",
          "url": "https://github.com/nicobailon/pi-subagents/blob/6826b0545216077195ae8ffe468a6434715814b7/src/tui/fleet.ts#L1360-L1463"
        }
      ],
      "repo": "pi-subagents",
      "repoUrl": "https://github.com/nicobailon/pi-subagents",
      "title": "Keep fleet selection stable while details are derived"
    },
    {
      "example": "adaptive-panel",
      "moreRefs": 0,
      "refs": [
        {
          "file": "mcp-setup-panel.ts",
          "lines": "12-37",
          "sha": "85db03d8",
          "url": "https://github.com/nicobailon/pi-mcp-adapter/blob/85db03d87cd0f7461b55eab8d25c10bce473b801/mcp-setup-panel.ts#L12-L37"
        },
        {
          "file": "mcp-setup-panel.ts",
          "lines": "45-84",
          "sha": "85db03d8",
          "url": "https://github.com/nicobailon/pi-mcp-adapter/blob/85db03d87cd0f7461b55eab8d25c10bce473b801/mcp-setup-panel.ts#L45-L84"
        }
      ],
      "repo": "pi-mcp-adapter",
      "repoUrl": "https://github.com/nicobailon/pi-mcp-adapter",
      "title": "Responsive list/detail TUI panels"
    }
  ],
  "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/detail-lens.md",
  "motivation": "The Subagents fleet browser derives detail sections for a selected heterogeneous run.",
  "name": "Detail Lens",
  "participants": [
    {
      "name": "ctx.ui.custom",
      "role": "Mounts one interaction and resolves through done.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "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": "KeybindingsManager.matches",
      "role": "Resolves input against configurable action bindings.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#handle-keyboard-input-and-focus"
    },
    {
      "name": "Snapshot projection",
      "role": "Derives detail for the currently selected item.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "keeps the selected identity stable",
      "id": "identity-anchor",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/identity-anchor.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/identity-anchor.md",
      "name": "Identity Anchor",
      "url": "https://pi-tui.ratstack.sh/patterns/identity-anchor/"
    }
  ],
  "sampleCode": {
    "code": "// Detail Lens: project selected run details from a read-only snapshot.\nimport { SelectList, truncateToWidth, type Component } from \"@earendil-works/pi-tui\";\nimport { getSelectListTheme } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"detail-lens\", title: \"Detail Lens\", kind: \"component\",\n  apis: [\"Component\", \"SelectList\", \"KeybindingsManager.matches\", \"truncateToWidth\"],\n  states: [\n    { id: \"default\", label: \"Selected detail\" },\n    { id: \"changed\", label: \"Different selection\", steps: [{ type: \"keys\", data: \"\\x1b[B\" }] },\n    { id: \"empty\", label: \"Empty snapshot\", steps: [{ type: \"action\", name: \"empty\" }] },\n  ],\n  setup({ theme, keybindings, tui, action }) {\n    const runs = [\n      { id: \"preview\", title: \"Render preview\", state: \"ready\", file: \"src/preview.ts\",\n        detail: \"Both themes rendered; review the narrow frame.\" },\n      { id: \"check\", title: \"Check task list\", state: \"waiting\", file: \"src/tasks.ts\",\n        detail: \"Waiting for the sample-code review.\" },\n    ] as const;\n    let snapshot: readonly (typeof runs)[number][] = runs;\n    const makeList = () => new SelectList(snapshot.map(run => ({\n      value: run.id, label: run.title, description: run.state,\n    })), 4, getSelectListTheme());\n    let list = makeList();\n    action(\"empty\", () => { snapshot = []; list = makeList(); tui.requestRender(); });\n    const component: Component = {\n      invalidate() { list.invalidate(); },\n      handleInput(data) {\n        const index = snapshot.findIndex(run => run.id === list.getSelectedItem()?.value);\n        if (keybindings.matches(data, \"tui.select.down\")) list.setSelectedIndex(Math.min(snapshot.length - 1, index + 1));\n        else if (keybindings.matches(data, \"tui.select.up\")) list.setSelectedIndex(Math.max(0, index - 1));\n        tui.requestRender();\n      },\n      render(width) {\n        const selected = snapshot.find(run => run.id === list.getSelectedItem()?.value);\n        if (!selected) return [\n          theme.fg(\"accent\", \"Runs · 0\"),\n          theme.fg(\"muted\", \"No runs in this snapshot.\"),\n          theme.fg(\"dim\", \"Start a task to see its details.\"),\n        ];\n        const detail = [selected.title, \"State: \" + selected.state, \"File: \" + selected.file, selected.detail];\n        return [\n          theme.fg(\"accent\", \"Runs · \" + snapshot.length),\n          ...list.render(width), \"\",\n          theme.fg(\"accent\", \"SELECTED RUN\"),\n          ...detail.map(line => theme.fg(\"text\", truncateToWidth(line, width))),\n          theme.fg(\"muted\", \"↑↓ select · snapshot stays unchanged\"),\n        ];\n      },\n    };\n    return component;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/structural/detail-lens.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-40-dark.0fc376b72feb.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-40-light.c8d2da4b6f44.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-60-dark.f92fb41c2864.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-60-light.36740118327f.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-80-dark.14778e7bb203.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-80-light.18ddc60d6d6e.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-120-dark.36748a35d43a.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Detail Lens, Selected detail 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/detail-lens/default-120-light.1891015790b8.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a list and details for its highlighted synthetic run.",
      "id": "default",
      "label": "Selected detail",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-40-dark.1d0eebb38b8a.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-40-light.7c64c3ab4124.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-60-dark.408518ed1dc7.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-60-light.de946656efdf.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-80-dark.1d4c5e0ce7a0.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-80-light.2a350e869e1f.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-120-dark.8c130010f608.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Detail Lens, Different selection 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/detail-lens/changed-120-light.2d7040c91f7b.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Select another run and derive its own detail sections.",
      "id": "changed",
      "label": "Different selection",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-40-dark.14afccbe7246.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-40-light.fa86468c56c4.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-60-dark.f1e9a93173c5.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-60-light.70408f15cbf5.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-80-dark.13e9a79f2e09.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-80-light.b6e665294dbc.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-120-dark.004f00ac89df.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Detail Lens, Empty snapshot 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/detail-lens/empty-120-light.2703224478c9.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a no-runs view without stale details.",
      "id": "empty",
      "label": "Empty snapshot",
      "problems": []
    }
  ],
  "structure": "snapshot -> selected item\nselected item -> detail sections",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/detail-lens/dark.b2f90e4e4965.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/detail-lens/light.a01f4ca41484.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/detail-lens/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}