const n = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));

const [x, y] = [n(a), n(b)];

return `#${x.map((v, i) => Math.round(v + (y[i] - v) * t).toString(16).padStart(2, "0")).join("")}`;

const b = $("#machine");

if (!b) return;

const r = S.remotes.find((x) => x.id === S.machine);

b.querySelector(".m-name").textContent = machineName();

b.querySelector(".m-sub").textContent = r ? `${r.user ? `${r.user}@` : ""}${r.host}` : "this computer";

b.classList.toggle("remote", !!r);

S.machine = id === "local" || S.remotes.some((r) => r.id === id) ? id : "local";

store.set("machine", S.machine);

renderMachine();

setWorkspace(S.workspace); // workspaces are per machine; renders the sidebar

const { addMachineDialog, connect } = await import("./remotes.js");

menu(anchor, [

{ label: "Local (this computer)", icon: S.machine === "local" ? "play" : "terminal", onClick: () => setMachine("local") },

...S.remotes.map((r) => ({ label: r.name, hint: `${r.user ? `${r.user}@` : ""}${r.host}`, icon: S.machine === r.id ? "play" : "share", onClick: () => setMachine(r.id) })),

...(S.desktops.length ? ["sep", ...S.desktops.map((r) => ({ label: `${r.name} (remote desktop)`, hint: r.host, icon: "external", onClick: () => connect(r.id) }))] : []),

"sep",

{ label: "Add machine…", icon: "plus", onClick: () => addMachineDialog(async (r) => { await refreshProjects(); setMachine(r.id); toast({ title: `${r.name} added`, body: "Its root folder (/) is a project; New terminal opens a shell there. Add more folders with the folder button." }); }) },

{ label: "Manage machines", icon: "settings", onClick: () => switchView("remotes") },

]);

const b = $("#workspace");

if (!b) return;

b.querySelector("span").textContent = S.workspace || "All projects";

b.classList.toggle("on", !!S.workspace);

S.workspace = workspaces().includes(name) ? name : "";

store.set("workspace", S.workspace);

renderWorkspace();

renderSidebar();

if (S.view === "agents") views.show("agents", $("#view-agents"));

menu(anchor, [

{ label: "All projects", icon: S.workspace ? "folder" : "play", onClick: () => setWorkspace("") },

...workspaces().map((w) => ({ label: w, icon: S.workspace === w ? "play" : "layers", hint: `${S.projects.filter((p) => p.workspace === w && (p.remote_id || "local") === S.machine).length}`, onClick: () => setWorkspace(w) })),

"sep",

{ label: "Add folder or .code-workspace…", icon: "folder-plus", onClick: addProject },

]);

const name = await promptDialog("Move to workspace", p.workspace || S.workspace, { label: "Workspace (a new name creates it; empty takes the project out)", ok: "Move", optional: true });

if (name === null) return;

try {

await api(`/api/projects/${p.id}`, { method: "PATCH", body: { workspace: name } });

await refreshProjects();

} catch (e) {

toastError(e);

}

if (S.machine === "local") return views.addProjectDialog();

const path = await promptDialog(`Add a folder on ${machineName()}`, "~/", { label: "Folder on the remote machine (e.g. ~/code/app or /srv/app)", ok: "Add" });

if (!path) return;

try {

const p = await api("/api/projects", { method: "POST", body: { remote_id: S.machine, path } });

if (S.workspace) await api(`/api/projects/${p.id}`, { method: "PATCH", body: { workspace: S.workspace } });

await refreshProjects();

S.collapsed.delete(p.id);

renderSidebar();

} catch (e) {

toastError(e);

}

const [black, red, green, yellow, blue, magenta, cyan, white, bBlack, bRed, bGreen, bYellow, bBlue, bMagenta, bCyan, bWhite] = c.split(" ");

return {

background: bg, foreground: fg, cursor, cursorAccent: bg, selectionBackground: sel,

black, red, green, yellow, blue, magenta, cyan, white,

brightBlack: bBlack, brightRed: bRed, brightGreen: bGreen, brightYellow: bYellow, brightBlue: bBlue, brightMagenta: bMagenta, brightCyan: bCyan, brightWhite: bWhite,

};

const f = (S.settings.font_family || "").trim();

if (!f) return DEFAULT_FONT;

return `${/[,"']/.test(f) ? f : `"${f}"`}, ${DEFAULT_FONT}`;

const mode = resolvedTheme();

const name = S.settings.terminal_theme;

for (const p of [PRESETS[name], PRESETS[PAIR[name]]]) if (p && isDark(p) === (mode === "dark")) return p;

return XTERM_THEMES[mode];

const base = terminalBase();

const dark = isDark(base);

const s = findSession(sid);

if (!s || S.settings.project_tint === "off") return base;

const bg = mix(base.background, projectColor(s.project), dark ? 0.09 : 0.07);

return { ...base, background: bg, cursorAccent: bg };

document.documentElement.dataset.theme = resolvedTheme();

for (const t of S.terms.values()) {

t.xterm.options.theme = themeFor(t.sid);

t.xterm.options.fontSize = +S.settings.font_size || 13;

t.xterm.options.fontFamily = fontFamily();

t.fit();

}

for (const p of $$(".pane[data-sid]")) paintPane(p, p.dataset.sid);

for (const b of $$("[data-action=split]")) b.hidden = isFree();

$("[data-action=tile]").hidden = !isFree();

const mode = S.settings.layout_mode;

if (lastMode && mode !== lastMode) {

if (mode === "free" && !Object.keys(S.free).length) {

for (const sid of leaves(S.layout)) S.free[sid] = {};

tileAll(false);

}

renderLayout();

}

lastMode = mode;

const s = findSession(sid);

pane.style.setProperty("--proj", s ? projectColor(s.project) : "transparent");

pane.style.background = themeFor(sid).background;

constructor(sid) {

this.sid = sid;

this.el = document.createElement("div");

this.el.className = "term-host";

this.el.style.height = "100%";

this.xterm = new Terminal({

fontFamily: fontFamily(),

fontSize: +S.settings.font_size || 13,

lineHeight: 1.15,

cursorBlink: true,

scrollback: 10000,

allowProposedApi: true,

theme: themeFor(sid),

});

this.fitAddon = new FitAddon.FitAddon();

this.xterm.loadAddon(this.fitAddon);

this.xterm.loadAddon(new WebLinksAddon.WebLinksAddon((e, uri) => window.open(uri, "_blank", "noopener")));

this.search = new SearchAddon.SearchAddon();

this.xterm.loadAddon(this.search);

this.lastSnapshot = "";

this.changed = false; // output since the last snapshot

// shell integration (shelldeck/integration): 133 = prompt/command marks, 633 = command line + cwd

this.integrated = false;

this.prompts = []; // xterm markers at each prompt, for Ctrl+Shift+Up/Down

this.running = null; // {cmd, at} from Enter until the shell reports the command finished

this.xterm.parser.registerOscHandler(133, (data) => this.osc133(data));

this.xterm.parser.registerOscHandler(633, (data) => this.osc633(data));

this.opened = false;

this.ws = null;

this.connectedOnce = false;

this.closed = false;

this.retry = 0;

this.size = null;

this.readyWaiters = [];

// ignore xterm's auto-replies (e.g. to DA queries) while replaying scrollback

this.replaying = 0; // replay writes still being parsed (a restored block and the scrollback can overlap)

this.xterm.onData((data) => {

if (this.replaying) return;

data = withCtrl(data);

if (data === "?" && this.atPrompt()) return inlineCommands(this);

this.track(data);

this.send({ type: "input", data });

});

this.line = "";

this.edited = false; // arrows/tab used: typed buffer no longer matches the line

this.cmd = "";

this.xterm.attachCustomKeyEventHandler((e) => this.keyHandler(e));

}

keyHandler(e) {

if (e.type !== "keydown") return true;

const k = e.key.toLowerCase();

if (isAppShortcut(e)) return false;

if (e.ctrlKey && !e.altKey && !e.shiftKey && k === "i" && this.atPrompt()) {

e.preventDefault();

inlineCommands(this, { askOnly: true }); // Ctrl+I: Ask, like Devin's terminal Command (elsewhere it stays Tab)

return false;

}

if (e.ctrlKey && !e.altKey && !e.shiftKey && k === "f") {

e.preventDefault();

this.openFind();

return false;

}

if (e.ctrlKey && e.shiftKey && !e.altKey && (k === "arrowup" || k === "arrowdown")) {

e.preventDefault();

this.jumpPrompt(k === "arrowup" ? -1 : 1);

return false;

}

if (e.ctrlKey && !e.altKey && (k === "c" || k === "insert") && this.xterm.hasSelection()) {

navigator.clipboard.writeText(this.xterm.getSelection()).catch(() => {});

this.xterm.clearSelection();

e.preventDefault();

return false;

}

if (e.ctrlKey && e.shiftKey && k === "c") {

if (this.xterm.hasSelection()) navigator.clipboard.writeText(this.xterm.getSelection()).catch(() => {});

e.preventDefault();

return false;

}

// let the browser fire a paste event; xterm handles it

if ((e.ctrlKey && !e.altKey && k === "v") || (e.shiftKey && k === "insert")) return false;

return true;

}

/** An empty line at a shell prompt: `?` there opens Ask instead of reaching the shell. Needs shell

atPrompt() {

return this.integrated && !this.running && !this.line && !this.edited && !S.agents[this.sid] && this.xterm.buffer.active.type === "normal";

}

// ponytail: heuristic command tracking from keystrokes; shell integration (OSC 633) if it proves flaky.

track(data) {

data = data.replace(TERM_REPLIES, ""); // xterm answering the shell (a new ConPTY asks for the cursor), not typing

for (const part of data.split(/(\r)/)) {

if (part === "\r") this.commit();

else if (part === "\x03") (this.line = ""), (this.edited = false);

else if (part === "\x7f" || part === "\b") this.line = this.line.slice(0, -1);

else if (part.startsWith("\x1b") || part.includes("\t")) this.edited = true;

else if (part >= " ") this.line += part;

}

}

commit() {

let cmd = this.line;

if (this.edited || !cmd.trim()) {

const b = this.xterm.buffer.active;

// join soft-wrapped rows so long commands read as one line

let y = b.baseY + b.cursorY;

let text = b.getLine(y)?.translateToString(true) || "";

while (y > 0 && b.getLine(y)?.isWrapped) text = (b.getLine(--y)?.translateToString(true) || "") + text;

cmd = text.match(/[>$#❯➜%]\s+(.+)$/)?.[1] || (this.edited ? "" : cmd);

}

this.line = "";

this.edited = false;

cmd = cmd.trim().split(/\s{3,}/)[0]; // drop right-aligned prompt segments

if (!cmd) return;

this.cmd = cmd;

if (!this.running) this.running = { cmd, at: Date.now() };

if (!this.integrated) this.send({ type: "command", cmd, at: new Date().toISOString() });

this.exit = null;

this.paintCmd();

}

paintCmd() {

const el = document.querySelector(`.pane[data-sid="${this.sid}"] .title .cmd`);

if (!el) return;

el.textContent = shortCmd(this.cmd);

el.title = this.exit ? `${this.cmd} (exit ${this.exit})` : this.cmd;

el.classList.toggle("fail", !!this.exit);

}

osc133(data) {

const [kind, code] = data.split(";");

this.integrated = true;

if (kind === "A") {

this.running = null; // a prompt means nothing runs (an empty Enter sets running but gets no D)

const m = this.xterm.registerMarker(0);

if (m) this.prompts.push(m);

if (this.prompts.length > 500) this.prompts.shift().dispose();

} else if (kind === "D") {

const r = this.running;

this.running = null;

if (!r || this.replaying || r.restored) return true; // restored: started before this page loaded

this.exit = code ? +code || 0 : null;

this.paintCmd();

this.send({ type: "command", cmd: this.cmd || r.cmd, exit: this.exit, ms: Date.now() - r.at, at: new Date(r.at).toISOString() });

if (Date.now() - r.at >= LONG_CMD_MS) notifyDone(this, this.cmd || r.cmd, Date.now() - r.at);

}

return true;

}

osc633(data) {

if (data.startsWith("E;")) {

this.cmd = data.slice(2).trim() || this.cmd;

this.paintCmd();

}

return true; // P;Cwd= is recorded server-side

}

/** Send the terminal's text to the server; it is what comes back after a restart. */

snapshot() {

if (!this.changed || this.replaying || this.closed) return;

this.changed = false;

const data = this.text();

if (data === this.lastSnapshot) return;

this.lastSnapshot = data;

this.send({ type: "snapshot", data });

}

/** Plain lines with wrapped rows joined: scrollback and screen, then an open TUI's screen. */

text() {

const lines = [];

for (const b of new Set([this.xterm.buffer.normal, this.xterm.buffer.active])) {

for (let i = 0; i < b.length; i++) {

const line = b.getLine(i);

const s = line.translateToString(!b.getLine(i + 1)?.isWrapped);

if (line.isWrapped && lines.length) lines[lines.length - 1] += s;

else lines.push(s);

}

}

while (lines.length && !lines.at(-1)) lines.pop();

return lines.join("\r\n");

}

jumpPrompt(dir) {

const top = this.xterm.buffer.active.viewportY;

const lines = this.prompts.filter((m) => !m.isDisposed && m.line >= 0).map((m) => m.line);

const target = dir < 0 ? lines.filter((l) => l < top).pop() : lines.find((l) => l > top);

if (target === undefined) return dir > 0 && this.xterm.scrollToBottom();

this.xterm.scrollToLine(target);

}

openFind(query = "") {

let bar = this.el.querySelector(".find-bar");

if (!bar) {

bar = document.createElement("div");

bar.className = "find-bar";

bar.innerHTML = `<input type="text" placeholder="Find" spellcheck="false" aria-label="Find in terminal" />

const input = bar.querySelector("input");

const count = bar.querySelector(".find-count");

this.search.onDidChangeResults(({ resultIndex, resultCount }) => {

count.textContent = !input.value ? "" : resultCount ? `${resultIndex + 1}/${resultCount}` : "No results";

});

const go = (dir, incremental = false) => {

if (!input.value) return this.search.clearDecorations();

const opts = { incremental, decorations: FIND_DECORATIONS };

dir < 0 ? this.search.findPrevious(input.value, opts) : this.search.findNext(input.value, opts);

};

input.addEventListener("input", () => go(1, true));

input.addEventListener("keydown", (e) => {

e.stopPropagation();

if (e.key === "Enter") go(e.shiftKey ? -1 : 1);

else if (e.key === "Escape") this.closeFind();

else if (e.key.toLowerCase() === "f" && e.ctrlKey) {

e.preventDefault();

input.select();

}

});

bar.addEventListener("click", (e) => {

const a = e.target.closest("[data-find]")?.dataset.find;

if (a === "close") this.closeFind();

else if (a) go(a === "prev" ? -1 : 1);

});

this.el.append(bar);

}

const input = bar.querySelector("input");

const sel = query || this.xterm.getSelection();

if (sel && !sel.includes("\n")) input.value = sel;