@bastani/atomic 0.8.31-alpha.4 → 0.9.0-alpha.1

package/examples/extensions/gondolin/package-lock.json

@@ -1,185 +1,185 @@
 {
-  "name": "atomic-extension-gondolin",
-  "version": "0.79.7",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "atomic-extension-gondolin",
-      "version": "0.79.7",
-      "dependencies": {
-        "@earendil-works/gondolin": "0.12.0"
-      }
-    },
-    "node_modules/@cto.af/wtf8": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@cto.af/wtf8/-/wtf8-0.0.5.tgz",
-      "integrity": "sha512-LfUFi+Vv4eDzj+XAtR89e3wwjXA/NZjUSwU5NhwbBrLecxPaBYFy3exCuc1j+D4UZeOVdqlsl8G7LmOt18V0tg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/@earendil-works/gondolin": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@earendil-works/gondolin/-/gondolin-0.12.0.tgz",
-      "integrity": "sha512-BXbvzQKb5QmxY5NtthRDONJTu7+IDKbzqWGrJyyNXMP7N681Tx0Q9TK8pK1ba8nUvYQTipNJyGZOsJfYiZll1A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "cbor2": "^2.3.0",
-        "node-forge": "^1.3.3",
-        "ssh2": "^1.17.0",
-        "undici": "^6.21.0"
-      },
-      "bin": {
-        "gondolin": "dist/bin/gondolin.js"
-      },
-      "engines": {
-        "node": ">=23.6.0"
-      },
-      "optionalDependencies": {
-        "@earendil-works/gondolin-krun-runner-darwin-arm64": "0.12.0",
-        "@earendil-works/gondolin-krun-runner-linux-x64": "0.12.0"
-      }
-    },
-    "node_modules/@earendil-works/gondolin-krun-runner-darwin-arm64": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@earendil-works/gondolin-krun-runner-darwin-arm64/-/gondolin-krun-runner-darwin-arm64-0.12.0.tgz",
-      "integrity": "sha512-ftDlusht4PcT7Y3TuPrZIKrCXy3isiBTVMvlXYK0pcud2uXY6uwFTGeunYgP+8ND/60ddb+MImqbfmkcK8B84A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "bin": {
-        "gondolin-krun-runner": "bin/gondolin-krun-runner"
-      }
-    },
-    "node_modules/@earendil-works/gondolin-krun-runner-linux-x64": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@earendil-works/gondolin-krun-runner-linux-x64/-/gondolin-krun-runner-linux-x64-0.12.0.tgz",
-      "integrity": "sha512-RRYsgwe2r5ApKmFNy469QgwnyjAHpAs9XANdWpTd9ol4iUYOY3sX7e0xIooAKxd+ktxGI4N/xRWicwGen3D/Ow==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "bin": {
-        "gondolin-krun-runner": "bin/gondolin-krun-runner"
-      }
-    },
-    "node_modules/asn1": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
-    "node_modules/bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
-    "node_modules/buildcheck": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/buildcheck/-/buildcheck-0.0.7.tgz",
-      "integrity": "sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA==",
-      "optional": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/cbor2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cbor2/-/cbor2-2.3.0.tgz",
-      "integrity": "sha512-76WB3hq8BoaGkMkBVJ27fW5LJU+qqDLEpgRNCG/SYKhODWXpVPOTD4UcUto3IEzYLA52nsvbhb0wabhHDn3qXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@cto.af/wtf8": "0.0.5"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/cpu-features": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/cpu-features/-/cpu-features-0.0.10.tgz",
-      "integrity": "sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "buildcheck": "~0.0.6",
-        "nan": "^2.19.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/nan": {
-      "version": "2.27.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.27.0.tgz",
-      "integrity": "sha512-hC+0LidcL3XE4rp1C4H54KujgXKzbfyTngZTwBByQxsOxCEKZT0MPQ4hOKUH2jU1OYstqdDH4onyHPDzcV0XdQ==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/node-forge": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.4.0.tgz",
-      "integrity": "sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==",
-      "license": "(BSD-3-Clause OR GPL-2.0)",
-      "engines": {
-        "node": ">= 6.13.0"
-      }
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
-    },
-    "node_modules/ssh2": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.17.0.tgz",
-      "integrity": "sha512-wPldCk3asibAjQ/kziWQQt1Wh3PgDFpC0XpwclzKcdT1vql6KeYxf5LIt4nlFkUeR8WuphYMKqUA56X4rjbfgQ==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "asn1": "^0.2.6",
-        "bcrypt-pbkdf": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      },
-      "optionalDependencies": {
-        "cpu-features": "~0.0.10",
-        "nan": "^2.23.0"
-      }
-    },
-    "node_modules/tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-      "license": "Unlicense"
-    },
-    "node_modules/undici": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.26.0.tgz",
-      "integrity": "sha512-4yqz8a3n5HmGTlsbADNtr/dJlhkh/55Rq798G6ibiULcXbDtaLpTl1pvdqcbFfeoj3iSi52lePFM7h9H21cw/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.17"
-      }
-    }
-  }
+	"name": "atomic-extension-gondolin",
+	"version": "0.79.7",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "atomic-extension-gondolin",
+			"version": "0.79.7",
+			"dependencies": {
+				"@earendil-works/gondolin": "0.12.0"
+			}
+		},
+		"node_modules/@cto.af/wtf8": {
+			"version": "0.0.5",
+			"resolved": "https://registry.npmjs.org/@cto.af/wtf8/-/wtf8-0.0.5.tgz",
+			"integrity": "sha512-LfUFi+Vv4eDzj+XAtR89e3wwjXA/NZjUSwU5NhwbBrLecxPaBYFy3exCuc1j+D4UZeOVdqlsl8G7LmOt18V0tg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=20"
+			}
+		},
+		"node_modules/@earendil-works/gondolin": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/@earendil-works/gondolin/-/gondolin-0.12.0.tgz",
+			"integrity": "sha512-BXbvzQKb5QmxY5NtthRDONJTu7+IDKbzqWGrJyyNXMP7N681Tx0Q9TK8pK1ba8nUvYQTipNJyGZOsJfYiZll1A==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"cbor2": "^2.3.0",
+				"node-forge": "^1.3.3",
+				"ssh2": "^1.17.0",
+				"undici": "^6.21.0"
+			},
+			"bin": {
+				"gondolin": "dist/bin/gondolin.js"
+			},
+			"engines": {
+				"node": ">=23.6.0"
+			},
+			"optionalDependencies": {
+				"@earendil-works/gondolin-krun-runner-darwin-arm64": "0.12.0",
+				"@earendil-works/gondolin-krun-runner-linux-x64": "0.12.0"
+			}
+		},
+		"node_modules/@earendil-works/gondolin-krun-runner-darwin-arm64": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/@earendil-works/gondolin-krun-runner-darwin-arm64/-/gondolin-krun-runner-darwin-arm64-0.12.0.tgz",
+			"integrity": "sha512-ftDlusht4PcT7Y3TuPrZIKrCXy3isiBTVMvlXYK0pcud2uXY6uwFTGeunYgP+8ND/60ddb+MImqbfmkcK8B84A==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"bin": {
+				"gondolin-krun-runner": "bin/gondolin-krun-runner"
+			}
+		},
+		"node_modules/@earendil-works/gondolin-krun-runner-linux-x64": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/@earendil-works/gondolin-krun-runner-linux-x64/-/gondolin-krun-runner-linux-x64-0.12.0.tgz",
+			"integrity": "sha512-RRYsgwe2r5ApKmFNy469QgwnyjAHpAs9XANdWpTd9ol4iUYOY3sX7e0xIooAKxd+ktxGI4N/xRWicwGen3D/Ow==",
+			"cpu": [
+				"x64"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"bin": {
+				"gondolin-krun-runner": "bin/gondolin-krun-runner"
+			}
+		},
+		"node_modules/asn1": {
+			"version": "0.2.6",
+			"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+			"integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": "~2.1.0"
+			}
+		},
+		"node_modules/bcrypt-pbkdf": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+			"integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"tweetnacl": "^0.14.3"
+			}
+		},
+		"node_modules/buildcheck": {
+			"version": "0.0.7",
+			"resolved": "https://registry.npmjs.org/buildcheck/-/buildcheck-0.0.7.tgz",
+			"integrity": "sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA==",
+			"optional": true,
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/cbor2": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/cbor2/-/cbor2-2.3.0.tgz",
+			"integrity": "sha512-76WB3hq8BoaGkMkBVJ27fW5LJU+qqDLEpgRNCG/SYKhODWXpVPOTD4UcUto3IEzYLA52nsvbhb0wabhHDn3qXg==",
+			"license": "MIT",
+			"dependencies": {
+				"@cto.af/wtf8": "0.0.5"
+			},
+			"engines": {
+				"node": ">=20"
+			}
+		},
+		"node_modules/cpu-features": {
+			"version": "0.0.10",
+			"resolved": "https://registry.npmjs.org/cpu-features/-/cpu-features-0.0.10.tgz",
+			"integrity": "sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA==",
+			"hasInstallScript": true,
+			"optional": true,
+			"dependencies": {
+				"buildcheck": "~0.0.6",
+				"nan": "^2.19.0"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/nan": {
+			"version": "2.27.0",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.27.0.tgz",
+			"integrity": "sha512-hC+0LidcL3XE4rp1C4H54KujgXKzbfyTngZTwBByQxsOxCEKZT0MPQ4hOKUH2jU1OYstqdDH4onyHPDzcV0XdQ==",
+			"license": "MIT",
+			"optional": true
+		},
+		"node_modules/node-forge": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.4.0.tgz",
+			"integrity": "sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==",
+			"license": "(BSD-3-Clause OR GPL-2.0)",
+			"engines": {
+				"node": ">= 6.13.0"
+			}
+		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"license": "MIT"
+		},
+		"node_modules/ssh2": {
+			"version": "1.17.0",
+			"resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.17.0.tgz",
+			"integrity": "sha512-wPldCk3asibAjQ/kziWQQt1Wh3PgDFpC0XpwclzKcdT1vql6KeYxf5LIt4nlFkUeR8WuphYMKqUA56X4rjbfgQ==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"asn1": "^0.2.6",
+				"bcrypt-pbkdf": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=10.16.0"
+			},
+			"optionalDependencies": {
+				"cpu-features": "~0.0.10",
+				"nan": "^2.23.0"
+			}
+		},
+		"node_modules/tweetnacl": {
+			"version": "0.14.5",
+			"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+			"integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+			"license": "Unlicense"
+		},
+		"node_modules/undici": {
+			"version": "6.27.0",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-6.27.0.tgz",
+			"integrity": "sha512-YmfV3YnEDzXRC5lZ2jWtWWHKGUm1zIt8AhesR1tens+HTNv+YZlN/dp6G727LOvMJ8xjP9Be7Y2Sdr96LDm+pg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.17"
+			}
+		}
+	}
 }

package/examples/extensions/overlay-qa-animation-components.ts

@@ -0,0 +1,255 @@
+import type { Theme } from "@bastani/atomic";
+import type { TUI } from "@earendil-works/pi-tui";
+import { matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+import { spawn } from "child_process";
+import { BaseOverlay } from "./overlay-qa-shared.js";
+
+export class StreamingOverflowComponent extends BaseOverlay {
+	private tui: TUI;
+	private lines: string[] = [];
+	private proc: ReturnType<typeof spawn> | null = null;
+	private scrollOffset = 0;
+	private maxVisibleLines = 15;
+	private finished = false;
+	private disposed = false;
+	private done: () => void;
+
+	constructor(tui: TUI, theme: Theme, done: () => void) {
+		super(theme);
+		this.tui = tui;
+		this.done = done;
+		this.startProcess();
+	}
+
+	private startProcess(): void {
+		// Run a command that produces many lines with ANSI colors
+		// Using find with -ls produces file listings, or use ls --color
+		this.proc = spawn("bash", [
+			"-c",
+			`
+			echo "Starting streaming overflow test (30+ seconds)..."
+			echo "This simulates subagent output with colors, hyperlinks, and long paths"
+			echo ""
+			for i in $(seq 1 100); do
+				# Simulate long file paths with OSC 8 hyperlinks (clickable) - tests width overflow
+				DIR="/Users/example/Documents/development/atomic/packages/coding-agent/src/modes/interactive"
+				FILE="\${DIR}/components/very-long-component-name-that-exceeds-width-\${i}.ts"
+				echo -e "\\033]8;;file://\${FILE}\\007▶ read: \${FILE}\\033]8;;\\007"
+
+				# Add some colored status messages with long text
+				if [ $((i % 5)) -eq 0 ]; then
+					echo -e "  \\033[32m✓ Successfully processed \${i} files in /Users/example/Documents/development/atomic\\033[0m"
+				fi
+				if [ $((i % 7)) -eq 0 ]; then
+					echo -e "  \\033[33m⚠ Warning: potential issue detected at line \${i} in very-long-component-name-that-exceeds-width.ts\\033[0m"
+				fi
+				if [ $((i % 11)) -eq 0 ]; then
+					echo -e "  \\033[31m✗ Error: file not found /some/really/long/path/that/definitely/exceeds/the/overlay/width/limit/file-\${i}.ts\\033[0m"
+				fi
+				sleep 0.3
+			done
+			echo ""
+			echo -e "\\033[32m✓ Complete - 100 files processed in 30 seconds\\033[0m"
+			echo "Press Esc to close"
+			`,
+		]);
+
+		this.proc.stdout?.on("data", (data: Buffer) => {
+			if (this.disposed) return; // Guard against callbacks after dispose
+			const text = data.toString();
+			const newLines = text.split("\n");
+			for (const line of newLines) {
+				if (line) this.lines.push(line);
+			}
+			// Auto-scroll to bottom
+			this.scrollOffset = Math.max(0, this.lines.length - this.maxVisibleLines);
+			this.tui.requestRender();
+		});
+
+		this.proc.stderr?.on("data", (data: Buffer) => {
+			if (this.disposed) return; // Guard against callbacks after dispose
+			this.lines.push(this.theme.fg("error", data.toString().trim()));
+			this.tui.requestRender();
+		});
+
+		this.proc.on("close", () => {
+			if (this.disposed) return; // Guard against callbacks after dispose
+			this.finished = true;
+			this.tui.requestRender();
+		});
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.proc?.kill();
+			this.done();
+		} else if (matchesKey(data, "up")) {
+			this.scrollOffset = Math.max(0, this.scrollOffset - 1);
+			this.tui.requestRender(); // Trigger re-render after scroll
+		} else if (matchesKey(data, "down")) {
+			this.scrollOffset = Math.min(Math.max(0, this.lines.length - this.maxVisibleLines), this.scrollOffset + 1);
+			this.tui.requestRender(); // Trigger re-render after scroll
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const innerW = Math.max(1, width - 2);
+		const padLine = (s: string) => truncateToWidth(s, innerW, "...", true);
+		const border = (c: string) => th.fg("border", c);
+
+		const result: string[] = [];
+		const title = truncateToWidth(` Streaming Output (${this.lines.length} lines) `, innerW);
+		const titlePad = Math.max(0, innerW - visibleWidth(title));
+		result.push(border("╭") + th.fg("accent", title) + border(`${"─".repeat(titlePad)}╮`));
+
+		// Scroll indicators
+		const canScrollUp = this.scrollOffset > 0;
+		const canScrollDown = this.scrollOffset < this.lines.length - this.maxVisibleLines;
+		const scrollInfo = `↑${this.scrollOffset} | ↓${Math.max(0, this.lines.length - this.maxVisibleLines - this.scrollOffset)}`;
+
+		result.push(
+			border("│") + padLine(canScrollUp || canScrollDown ? th.fg("dim", ` ${scrollInfo}`) : "") + border("│"),
+		);
+
+		// Visible lines - truncate long lines to fit within border
+		const visibleLines = this.lines.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleLines);
+		for (const line of visibleLines) {
+			result.push(border("│") + padLine(` ${line}`) + border("│"));
+		}
+
+		// Pad to maxVisibleLines
+		for (let i = visibleLines.length; i < this.maxVisibleLines; i++) {
+			result.push(border("│") + padLine("") + border("│"));
+		}
+
+		const status = this.finished ? th.fg("success", "✓ Done") : th.fg("warning", "● Running");
+		result.push(border("│") + padLine(` ${status} ${th.fg("dim", "| ↑↓ scroll | Esc close")}`) + border("│"));
+		result.push(border(`╰${"─".repeat(innerW)}╯`));
+
+		return result;
+	}
+
+	dispose(): void {
+		this.disposed = true;
+		this.proc?.kill();
+	}
+}
+
+// Edge position test
+
+export class AnimationDemoComponent extends BaseOverlay {
+	private tui: TUI;
+	private frame = 0;
+	private interval: ReturnType<typeof setInterval> | null = null;
+	private fps = 0;
+	private lastFpsUpdate = Date.now();
+	private framesSinceLastFps = 0;
+	private done: () => void;
+
+	constructor(tui: TUI, theme: Theme, done: () => void) {
+		super(theme);
+		this.tui = tui;
+		this.done = done;
+		this.startAnimation();
+	}
+
+	private startAnimation(): void {
+		// Run at ~30 FPS (same as DOOM target)
+		this.interval = setInterval(() => {
+			this.frame++;
+			this.framesSinceLastFps++;
+
+			// Update FPS counter every second
+			const now = Date.now();
+			if (now - this.lastFpsUpdate >= 1000) {
+				this.fps = this.framesSinceLastFps;
+				this.framesSinceLastFps = 0;
+				this.lastFpsUpdate = now;
+			}
+
+			this.tui.requestRender();
+		}, 1000 / 30);
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.dispose();
+			this.done();
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const innerW = Math.max(1, width - 2);
+		const padLine = (s: string) => truncateToWidth(s, innerW, "...", true);
+		const border = (c: string) => th.fg("border", c);
+
+		const lines: string[] = [];
+		lines.push(border(`╭${"─".repeat(innerW)}╮`));
+		lines.push(border("│") + padLine(th.fg("accent", " Animation Demo (~30 FPS)")) + border("│"));
+		lines.push(border("│") + padLine(``) + border("│"));
+		lines.push(border("│") + padLine(` Frame: ${th.fg("accent", String(this.frame))}`) + border("│"));
+		lines.push(border("│") + padLine(` FPS: ${th.fg("success", String(this.fps))}`) + border("│"));
+		lines.push(border("│") + padLine(``) + border("│"));
+
+		// Animated content - bouncing bar
+		const barWidth = Math.max(12, innerW - 4); // Ensure enough space for bar
+		const pos = Math.max(0, Math.floor(((Math.sin(this.frame / 10) + 1) * (barWidth - 10)) / 2));
+		const bar = " ".repeat(pos) + th.fg("accent", "██████████") + " ".repeat(Math.max(0, barWidth - 10 - pos));
+		lines.push(border("│") + padLine(` ${bar}`) + border("│"));
+
+		// Spinning character
+		const spinChars = ["◐", "◓", "◑", "◒"];
+		const spin = spinChars[this.frame % spinChars.length];
+		lines.push(border("│") + padLine(` Spinner: ${th.fg("warning", spin!)}`) + border("│"));
+
+		// Color cycling
+		const hue = (this.frame * 3) % 360;
+		const rgb = hslToRgb(hue / 360, 0.8, 0.5);
+		const colorBlock = `\x1b[48;2;${rgb[0]};${rgb[1]};${rgb[2]}m${"  ".repeat(10)}\x1b[0m`;
+		lines.push(border("│") + padLine(` Color: ${colorBlock}`) + border("│"));
+
+		lines.push(border("│") + padLine(``) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " This proves overlays can handle")) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " real-time game-like rendering.")) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " (Atomic doom uses same approach)")) + border("│"));
+		lines.push(border("│") + padLine(``) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " Press Esc to close")) + border("│"));
+		lines.push(border(`╰${"─".repeat(innerW)}╯`));
+
+		return lines;
+	}
+
+	dispose(): void {
+		if (this.interval) {
+			clearInterval(this.interval);
+			this.interval = null;
+		}
+	}
+}
+
+// HSL to RGB helper for color cycling animation
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+	let r: number, g: number, b: number;
+	if (s === 0) {
+		r = g = b = l;
+	} else {
+		const hue2rgb = (p: number, q: number, t: number) => {
+			if (t < 0) t += 1;
+			if (t > 1) t -= 1;
+			if (t < 1 / 6) return p + (q - p) * 6 * t;
+			if (t < 1 / 2) return q;
+			if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+			return p;
+		};
+		const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+		const p = 2 * l - q;
+		r = hue2rgb(p, q, h + 1 / 3);
+		g = hue2rgb(p, q, h);
+		b = hue2rgb(p, q, h - 1 / 3);
+	}
+	return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+// Toggle demo - demonstrates OverlayHandle.setHidden() via onHandle callback