455 lines
17 KiB
JavaScript
455 lines
17 KiB
JavaScript
(function () {
|
|
/**
|
|
* Nexus Terminal — snippet / command library.
|
|
* Provides a panel for managing and sending reusable commands to active sessions.
|
|
*/
|
|
|
|
const { createElement, escapeHtml, dismissContextMenus } =
|
|
window.NexusTerminal;
|
|
|
|
class SnippetLibrary {
|
|
/**
|
|
* @param {App} app
|
|
*/
|
|
constructor(app) {
|
|
this.app = app;
|
|
/** @type {Array<Object>} */
|
|
this.snippets = [];
|
|
this.searchQuery = "";
|
|
}
|
|
|
|
// ── Public API ───────────────────────────────────────────────────
|
|
|
|
/**
|
|
* Opens the snippet library modal.
|
|
*/
|
|
async open() {
|
|
await this._loadSnippets();
|
|
this._showModal();
|
|
}
|
|
|
|
/**
|
|
* Sends a snippet command to the active session.
|
|
* Supports {{variable}} placeholders that prompt the user for values.
|
|
* Built-in variables: {{hostname}}, {{date}}, {{time}}, {{timestamp}}.
|
|
* @param {string} command
|
|
*/
|
|
sendToActiveSession(command) {
|
|
const sessionId = this.app.state.activeSessionId;
|
|
if (!sessionId) {
|
|
this.app.notifications.error("No active session");
|
|
return;
|
|
}
|
|
const session = this.app.state.getSession(sessionId);
|
|
if (!session || session.state !== "connected") {
|
|
this.app.notifications.error("Session is not connected");
|
|
return;
|
|
}
|
|
|
|
// Check for template variables
|
|
const varPattern = /\{\{([^}]+)\}\}/g;
|
|
const matches = [];
|
|
let match;
|
|
while ((match = varPattern.exec(command)) !== null) {
|
|
matches.push(match[1].trim());
|
|
}
|
|
|
|
// Resolve built-in variables first
|
|
const builtins = {
|
|
hostname: session.host || "unknown",
|
|
date: new Date().toISOString().split("T")[0],
|
|
time: new Date().toTimeString().split(" ")[0],
|
|
timestamp: Math.floor(Date.now() / 1000).toString(),
|
|
};
|
|
|
|
let resolved = command;
|
|
const userVars = [];
|
|
for (const varName of matches) {
|
|
const lower = varName.toLowerCase();
|
|
if (builtins[lower] !== undefined) {
|
|
resolved = resolved.replace("{{" + varName + "}}", builtins[lower]);
|
|
} else if (!userVars.includes(varName)) {
|
|
userVars.push(varName);
|
|
}
|
|
}
|
|
|
|
if (userVars.length === 0) {
|
|
this._sendCommand(sessionId, resolved);
|
|
return;
|
|
}
|
|
|
|
// Prompt for user-defined variables
|
|
this._promptVariables(userVars, (values) => {
|
|
let final = resolved;
|
|
for (let i = 0; i < userVars.length; i++) {
|
|
final = final.split("{{" + userVars[i] + "}}").join(values[i] || "");
|
|
}
|
|
this._sendCommand(sessionId, final);
|
|
});
|
|
}
|
|
|
|
/** @private */
|
|
_sendCommand(sessionId, command) {
|
|
try {
|
|
const b64 = window.NexusTerminal.utf8ToBase64(command + "\n");
|
|
window.go.api.Service.WriteSession(sessionId, b64);
|
|
this.app.notifications.info("Snippet sent");
|
|
} catch (err) {
|
|
this.app.notifications.error("Failed to send snippet: " + err);
|
|
}
|
|
}
|
|
|
|
/** @private */
|
|
_promptVariables(varNames, onConfirm) {
|
|
const backdrop = createElement("div", "modal-backdrop");
|
|
const modal = createElement("div", "modal modal-sm");
|
|
|
|
let inputsHtml = "";
|
|
for (const v of varNames) {
|
|
inputsHtml += `
|
|
<div class="form-group" style="margin-bottom:var(--space-2);">
|
|
<label class="form-label">${escapeHtml(v)}</label>
|
|
<input type="text" class="form-input snippet-var-input" data-var="${escapeHtml(v)}" placeholder="Enter value for ${escapeHtml(v)}" />
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
modal.innerHTML = `
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Snippet Variables</h3>
|
|
<button class="btn btn-icon btn-xs modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">${inputsHtml}</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-sm btn-ghost snippet-var-cancel">Cancel</button>
|
|
<button class="btn btn-sm btn-primary snippet-var-send">Send</button>
|
|
</div>
|
|
`;
|
|
|
|
backdrop.appendChild(modal);
|
|
document.body.appendChild(backdrop);
|
|
requestAnimationFrame(() => {
|
|
backdrop.classList.add("is-visible");
|
|
modal.classList.add("is-visible");
|
|
const firstInput = modal.querySelector(".snippet-var-input");
|
|
if (firstInput) firstInput.focus();
|
|
});
|
|
|
|
const close = () => {
|
|
backdrop.classList.remove("is-visible");
|
|
modal.classList.remove("is-visible");
|
|
setTimeout(() => backdrop.remove(), 200);
|
|
};
|
|
|
|
modal.querySelector(".modal-close").addEventListener("click", close);
|
|
modal
|
|
.querySelector(".snippet-var-cancel")
|
|
.addEventListener("click", close);
|
|
backdrop.addEventListener("click", (e) => {
|
|
if (e.target === backdrop) close();
|
|
});
|
|
|
|
modal.querySelector(".snippet-var-send").addEventListener("click", () => {
|
|
const inputs = modal.querySelectorAll(".snippet-var-input");
|
|
const values = Array.from(inputs).map((inp) => inp.value);
|
|
close();
|
|
onConfirm(values);
|
|
});
|
|
|
|
// Enter to send
|
|
modal.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
modal.querySelector(".snippet-var-send").click();
|
|
}
|
|
if (e.key === "Escape") close();
|
|
});
|
|
}
|
|
|
|
// ── Data ─────────────────────────────────────────────────────────
|
|
|
|
/** @private */
|
|
async _loadSnippets() {
|
|
try {
|
|
this.snippets = (await window.go.api.Service.ListSnippets()) || [];
|
|
} catch (err) {
|
|
this.snippets = [];
|
|
console.error("Failed to load snippets:", err);
|
|
}
|
|
}
|
|
|
|
// ── Modal ────────────────────────────────────────────────────────
|
|
|
|
/** @private */
|
|
_showModal() {
|
|
const backdrop = createElement("div", "modal-backdrop");
|
|
const modal = createElement("div", "modal modal-lg");
|
|
|
|
modal.innerHTML = `
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Command Library</h3>
|
|
<button class="btn btn-icon btn-xs modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body snippet-body" style="display:flex;gap:var(--space-3);height:400px;">
|
|
<div class="snippet-list-panel" style="flex:1;display:flex;flex-direction:column;gap:var(--space-2);overflow:hidden;">
|
|
<div style="display:flex;gap:var(--space-2);">
|
|
<input type="text" class="form-input snippet-search" placeholder="Search snippets…" style="flex:1;" />
|
|
<button class="btn btn-sm btn-primary snippet-add-btn">+ New</button>
|
|
</div>
|
|
<div class="snippet-list" style="flex:1;overflow-y:auto;"></div>
|
|
</div>
|
|
<div class="snippet-detail-panel" style="flex:1;display:flex;flex-direction:column;gap:var(--space-2);overflow:hidden;">
|
|
<div class="snippet-detail-empty" style="display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-tertiary);font-size:var(--text-sm);">
|
|
Select a snippet or create a new one
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
backdrop.appendChild(modal);
|
|
document.body.appendChild(backdrop);
|
|
requestAnimationFrame(() => {
|
|
backdrop.classList.add("is-visible");
|
|
modal.classList.add("is-visible");
|
|
});
|
|
|
|
const close = () => {
|
|
backdrop.classList.remove("is-visible");
|
|
modal.classList.remove("is-visible");
|
|
setTimeout(() => backdrop.remove(), 200);
|
|
};
|
|
|
|
modal.querySelector(".modal-close").addEventListener("click", close);
|
|
backdrop.addEventListener("click", (e) => {
|
|
if (e.target === backdrop) close();
|
|
});
|
|
|
|
// Search
|
|
const searchInput = modal.querySelector(".snippet-search");
|
|
searchInput.addEventListener("input", () => {
|
|
this.searchQuery = searchInput.value.trim().toLowerCase();
|
|
this._renderList(modal, close);
|
|
});
|
|
|
|
// New snippet button
|
|
modal.querySelector(".snippet-add-btn").addEventListener("click", () => {
|
|
this._showEditor(modal, null, close);
|
|
});
|
|
|
|
this._renderList(modal, close);
|
|
}
|
|
|
|
/** @private */
|
|
_renderList(modal, closeFn) {
|
|
const listEl = modal.querySelector(".snippet-list");
|
|
if (!listEl) return;
|
|
listEl.innerHTML = "";
|
|
|
|
const filtered = this.snippets.filter((sn) => {
|
|
if (!this.searchQuery) return true;
|
|
return (
|
|
sn.name.toLowerCase().includes(this.searchQuery) ||
|
|
sn.command.toLowerCase().includes(this.searchQuery) ||
|
|
(sn.description || "").toLowerCase().includes(this.searchQuery)
|
|
);
|
|
});
|
|
|
|
if (filtered.length === 0) {
|
|
listEl.innerHTML =
|
|
'<div style="color:var(--text-tertiary);font-size:var(--text-sm);padding:var(--space-3);text-align:center;">No snippets found</div>';
|
|
return;
|
|
}
|
|
|
|
for (const sn of filtered) {
|
|
const item = createElement("div", "snippet-item", {
|
|
dataset: { id: sn.id },
|
|
});
|
|
item.style.cssText =
|
|
"padding:var(--space-2);border-radius:var(--radius-md);cursor:pointer;border:1px solid var(--border-subtle);";
|
|
item.innerHTML = `
|
|
<div style="font-weight:var(--weight-medium);font-size:var(--text-sm);color:var(--text-primary);">${escapeHtml(sn.name)}</div>
|
|
<div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(sn.command)}</div>
|
|
`;
|
|
item.addEventListener("click", () =>
|
|
this._showDetail(modal, sn, closeFn),
|
|
);
|
|
item.addEventListener("mousedown", (e) => e.preventDefault());
|
|
item.addEventListener("mouseenter", () => {
|
|
item.style.background = "var(--bg-hover)";
|
|
});
|
|
item.addEventListener("mouseleave", () => {
|
|
item.style.background = "";
|
|
});
|
|
listEl.appendChild(item);
|
|
}
|
|
}
|
|
|
|
/** @private */
|
|
_showDetail(modal, snippet, closeFn) {
|
|
const detailPanel = modal.querySelector(".snippet-detail-panel");
|
|
if (!detailPanel) return;
|
|
detailPanel.innerHTML = "";
|
|
|
|
const nameEl = createElement("div", "", {
|
|
innerHTML: `<strong style="font-size:var(--text-base);">${escapeHtml(snippet.name)}</strong>`,
|
|
});
|
|
detailPanel.appendChild(nameEl);
|
|
|
|
if (snippet.description) {
|
|
const descEl = createElement("div", "", {
|
|
textContent: snippet.description,
|
|
});
|
|
descEl.style.cssText =
|
|
"font-size:var(--text-sm);color:var(--text-secondary);";
|
|
detailPanel.appendChild(descEl);
|
|
}
|
|
|
|
const cmdEl = createElement("pre", "", {
|
|
textContent: snippet.command,
|
|
});
|
|
cmdEl.style.cssText =
|
|
"flex:1;font-family:var(--font-mono);font-size:var(--text-sm);background:var(--bg-base);padding:var(--space-3);border-radius:var(--radius-md);overflow:auto;color:var(--text-primary);margin:0;white-space:pre-wrap;word-break:break-all;";
|
|
detailPanel.appendChild(cmdEl);
|
|
|
|
// Action buttons
|
|
const actions = createElement("div", "", {});
|
|
actions.style.cssText = "display:flex;gap:var(--space-2);";
|
|
|
|
const sendBtn = createElement("button", "btn btn-sm btn-primary", {
|
|
textContent: "Send to Session",
|
|
});
|
|
sendBtn.addEventListener("click", () => {
|
|
this.sendToActiveSession(snippet.command);
|
|
});
|
|
|
|
const editBtn = createElement("button", "btn btn-sm btn-secondary", {
|
|
textContent: "Edit",
|
|
});
|
|
editBtn.addEventListener("click", () => {
|
|
this._showEditor(modal, snippet, closeFn);
|
|
});
|
|
|
|
const deleteBtn = createElement("button", "btn btn-sm btn-danger", {
|
|
textContent: "Delete",
|
|
});
|
|
deleteBtn.addEventListener("click", async () => {
|
|
try {
|
|
await window.go.api.Service.DeleteSnippet(snippet.id);
|
|
this.snippets = this.snippets.filter((s) => s.id !== snippet.id);
|
|
this._renderList(modal, closeFn);
|
|
detailPanel.innerHTML =
|
|
'<div class="snippet-detail-empty" style="display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-tertiary);font-size:var(--text-sm);">Snippet deleted</div>';
|
|
} catch (err) {
|
|
this.app.notifications.error("Failed to delete: " + err);
|
|
}
|
|
});
|
|
|
|
actions.appendChild(sendBtn);
|
|
actions.appendChild(editBtn);
|
|
actions.appendChild(deleteBtn);
|
|
detailPanel.appendChild(actions);
|
|
}
|
|
|
|
/** @private */
|
|
_showEditor(modal, snippet, closeFn) {
|
|
const detailPanel = modal.querySelector(".snippet-detail-panel");
|
|
if (!detailPanel) return;
|
|
detailPanel.innerHTML = "";
|
|
|
|
const isNew = !snippet;
|
|
const title = isNew ? "New Snippet" : "Edit Snippet";
|
|
|
|
detailPanel.innerHTML = `
|
|
<div style="font-weight:var(--weight-medium);font-size:var(--text-sm);">${title}</div>
|
|
<div class="form-group" style="margin-bottom:var(--space-2);">
|
|
<label class="form-label">Name</label>
|
|
<input type="text" class="form-input snippet-ed-name" value="${isNew ? "" : escapeHtml(snippet.name)}" />
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:var(--space-2);">
|
|
<label class="form-label">Description</label>
|
|
<input type="text" class="form-input snippet-ed-desc" value="${isNew ? "" : escapeHtml(snippet.description || "")}" />
|
|
</div>
|
|
<div class="form-group" style="flex:1;display:flex;flex-direction:column;">
|
|
<label class="form-label">Command</label>
|
|
<textarea class="form-input snippet-ed-cmd" style="flex:1;font-family:var(--font-mono);font-size:var(--text-sm);resize:none;">${isNew ? "" : escapeHtml(snippet.command)}</textarea>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:var(--space-2);">
|
|
<label class="form-label">Folder</label>
|
|
<input type="text" class="form-input snippet-ed-folder" value="${isNew ? "" : escapeHtml(snippet.folder || "")}" placeholder="e.g. Networking, Debugging" />
|
|
</div>
|
|
<div style="display:flex;gap:var(--space-2);">
|
|
<button class="btn btn-sm btn-primary snippet-save-btn">Save</button>
|
|
<button class="btn btn-sm snippet-cancel-btn">Cancel</button>
|
|
</div>
|
|
`;
|
|
|
|
detailPanel
|
|
.querySelector(".snippet-save-btn")
|
|
.addEventListener("click", async () => {
|
|
const name = detailPanel
|
|
.querySelector(".snippet-ed-name")
|
|
.value.trim();
|
|
const command = detailPanel.querySelector(".snippet-ed-cmd").value;
|
|
const description = detailPanel
|
|
.querySelector(".snippet-ed-desc")
|
|
.value.trim();
|
|
const folder = detailPanel
|
|
.querySelector(".snippet-ed-folder")
|
|
.value.trim();
|
|
|
|
if (!name) {
|
|
this.app.notifications.error("Name is required");
|
|
return;
|
|
}
|
|
if (!command) {
|
|
this.app.notifications.error("Command is required");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = {
|
|
id: isNew ? "" : snippet.id,
|
|
name,
|
|
command,
|
|
description,
|
|
folder,
|
|
tags: isNew ? [] : snippet.tags || [],
|
|
};
|
|
|
|
let saved;
|
|
if (isNew) {
|
|
saved = await window.go.api.Service.CreateSnippet(data);
|
|
this.snippets.push(saved);
|
|
} else {
|
|
saved = await window.go.api.Service.UpdateSnippet(data);
|
|
const idx = this.snippets.findIndex((s) => s.id === saved.id);
|
|
if (idx !== -1) this.snippets[idx] = saved;
|
|
}
|
|
|
|
this._renderList(modal, closeFn);
|
|
this._showDetail(modal, saved, closeFn);
|
|
this.app.notifications.info(
|
|
isNew ? "Snippet created" : "Snippet updated",
|
|
);
|
|
} catch (err) {
|
|
this.app.notifications.error("Failed to save snippet: " + err);
|
|
}
|
|
});
|
|
|
|
detailPanel
|
|
.querySelector(".snippet-cancel-btn")
|
|
.addEventListener("click", () => {
|
|
if (snippet) {
|
|
this._showDetail(modal, snippet, closeFn);
|
|
} else {
|
|
detailPanel.innerHTML =
|
|
'<div class="snippet-detail-empty" style="display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-tertiary);font-size:var(--text-sm);">Select a snippet or create a new one</div>';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
window.NexusTerminal = window.NexusTerminal || {};
|
|
window.NexusTerminal.SnippetLibrary = SnippetLibrary;
|
|
})();
|