{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Lazy preview picker"
  ],
  "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": "TUI.requestRender",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "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": null
    }
  ],
  "applicability": [
    "Use this when eagerly loading every record would make a picker expensive."
  ],
  "category": "lists",
  "categoryLabel": "Lists and pickers",
  "consequences": [
    "Only inspected items need loaded preview detail.",
    "The cache needs a bound and dismissal stays distinct from selection."
  ],
  "family": "presentation",
  "familyLabel": "Presentation",
  "id": "lazy-peek",
  "implementation": [
    "Bound the preview cache.",
    "Keep dismissal distinct from a confirmed selection."
  ],
  "intent": "Load and cache preview detail only for items the user inspects.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/lazy-peek.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "session-switch-lazy-preview",
      "moreRefs": 0,
      "refs": [
        {
          "file": "extensions/session-switch/picker.ts",
          "lines": "1-45",
          "sha": "17cce138",
          "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/session-switch/picker.ts#L1-L45"
        }
      ],
      "repo": "dot314",
      "repoUrl": "https://github.com/nicobailon/dot314",
      "title": "Reuse cached previews in a session-switch selector"
    }
  ],
  "linkedFrom": [
    {
      "how": "caches loaded data instead of 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/"
    }
  ],
  "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/lazy-peek.md",
  "motivation": "Dot314's session switcher avoids loading every full transcript before the user inspects an item.",
  "name": "Lazy Peek",
  "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": "TUI.requestRender",
      "role": "Requests a coalesced redraw after state changes.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "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": "Preview cache",
      "role": "Loads inspected detail and limits retained previews.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "caches layout rather than fetched detail",
      "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": "// Lazy Peek: load and cache detail only for inspected sessions.\nimport { wrapTextWithAnsi, type Component } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"lazy-peek\", title: \"Lazy Peek\", kind: \"component\",\n  apis: [\"Component\", \"wrapTextWithAnsi\", \"TUI.requestRender\"], rows: 12,\n  states: [\n    { id: \"loading\", label: \"Preview pending\" },\n    { id: \"loaded\", label: \"Preview loaded\", steps: [{ type: \"wait\", ms: 300 }] },\n    { id: \"revisit\", label: \"Cached preview\", steps: [\n      { type: \"action\", name: \"inspect-next\" }, { type: \"wait\", ms: 300 },\n      { type: \"action\", name: \"revisit\" },\n    ] },\n  ],\n  setup({ theme, tui, action }) {\n    const sessions = [\"Parser tests\", \"Release notes\", \"Theme audit\"];\n    const details = [\n      \"Fixed the token parser. All six synthetic cases pass.\",\n      \"Drafted the upgrade notes. Two review items remain.\",\n      \"Checked the compact footer in both appearances.\",\n    ];\n    const previewCache = new Map<number, string>();\n    let selected = 0, loads = 0, source = \"pending\";\n    let pending: ReturnType<typeof setTimeout> | undefined;\n    function inspect(index: number) {\n      selected = index;\n      if (pending !== undefined) clearTimeout(pending);\n      if (previewCache.has(index)) { source = \"cache hit\"; tui.requestRender(); return; }\n      source = \"pending\";\n      loads++;\n      pending = setTimeout(() => {\n        if (previewCache.size === 2) previewCache.delete(previewCache.keys().next().value!);\n        previewCache.set(index, details[index]!);\n        source = \"loaded\"; pending = undefined; tui.requestRender();\n      }, 300);\n      tui.requestRender();\n    }\n    inspect(0);\n    action(\"inspect-next\", () => inspect(1));\n    action(\"revisit\", () => inspect(0));\n    const view: Component & { dispose(): void } = {\n      invalidate() {},\n      render(width) {\n        const lines = [theme.fg(\"accent\", \"Session previews\"),\n          ...sessions.map((name, i) => theme.fg(i === selected ? \"accent\" : \"muted\",\n            (i === selected ? \"> \" : \"  \") + name)), \"\",\n          theme.fg(\"toolTitle\", sessions[selected]!),\n          ...wrapTextWithAnsi(previewCache.get(selected) ?? \"Loading inspected preview…\", width)\n            .map(line => theme.fg(source === \"pending\" ? \"warning\" : \"text\", line)), \"\",\n          theme.fg(\"dim\", source + \" · reads \" + loads + \" · cached \" + previewCache.size + \"/2\")];\n        return lines;\n      },\n      dispose() { if (pending !== undefined) clearTimeout(pending); },\n    };\n    return view;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/presentation/lazy-peek.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-40-dark.08ece0ae3058.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-40-light.83f418bb43c6.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-60-dark.0170ba8ccd1e.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-60-light.ca7c98f7428d.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-80-dark.50c48ef22486.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-80-light.02e0b20c6d35.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-120-dark.2efdfb3c0ac2.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Lazy Peek, Preview pending 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/lazy-peek/loading-120-light.d6a75dd59664.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Select a synthetic session while its preview is loading.",
      "id": "loading",
      "label": "Preview pending",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-40-dark.e364fe53d6a3.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-40-light.985581cc225b.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-60-dark.933bd3fa13ed.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-60-light.5df5de633a4b.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-80-dark.8b39b4d7b95c.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-80-light.63a105eb9147.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-120-dark.78d60eb4b654.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Lazy Peek, Preview loaded 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/lazy-peek/loaded-120-light.886be22abc66.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show the selected item's detail once available.",
      "id": "loaded",
      "label": "Preview loaded",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-40-dark.59244ae379a1.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-40-light.2bd9d78769a3.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-60-dark.f86436383dd7.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-60-light.6fe55875183a.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-80-dark.dc918a3b6745.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-80-light.500fbd794795.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-120-dark.171e29ecdd5a.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Lazy Peek, Cached preview 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/lazy-peek/revisit-120-light.3e0eb9fd1fd1.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Revisit the previous item and reuse its cached preview.",
      "id": "revisit",
      "label": "Cached preview",
      "problems": []
    }
  ],
  "structure": "highlight -> cache lookup\nmiss -> load -> cache -> preview",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/lazy-peek/dark.f8c3fdfc697c.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/lazy-peek/light.bdc74e9f2313.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/lazy-peek/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}