nose-pluto/src/js/scrollback.ts
2025-09-20 21:08:43 -07:00

54 lines
1.4 KiB
TypeScript

////
// The scrollback shows your history of interacting with the shell.
// input, output, etc
import { scrollback, $$ } from "./dom.js"
type InputStatus = "waiting" | "streaming" | "ok" | "error"
export function addInput(id: string, input: string) {
const parent = $$("li.input")
const status = $$("span.status.yellow", "•")
const content = $$("span.content", input)
parent.append(status, content)
parent.dataset.id = id
scrollback.append(parent)
}
export function setStatus(id: string, status: InputStatus) {
const statusEl = document.querySelector(`[data-id="${id}"].input .status`)
if (!statusEl) return
statusEl.className = ""
switch (status) {
case "waiting":
statusEl.classList.add("yellow")
break
case "streaming":
statusEl.classList.add("purple")
break
case "ok":
statusEl.classList.add("green")
break
case "error":
statusEl.classList.add("red")
break
}
}
export function addOutput(id: string, output: string) {
const item = $$("li", output)
item.classList.add("output")
item.dataset.id = id
scrollback.append(item)
autoScroll()
}
export function autoScroll() {
setTimeout(() => {
requestAnimationFrame(() => scrollback.scrollTop = scrollback.scrollHeight)
}, 10)
}