const root = document.getElementById("bds-shell-app");
const bootstrapNode = document.getElementById("bds-shell-bootstrap");
if (!root || !bootstrapNode) {
throw new Error("Missing shell bootstrap payload");
}
const SIDEBAR_STORAGE_KEY = "bds-panel-sidebar";
const ASSISTANT_STORAGE_KEY = "bds-panel-assistant-sidebar";
const bootstrap = JSON.parse(bootstrapNode.textContent);
const state = {
session: hydrateSession(clone(bootstrap.session)),
tabMeta: {},
};
render();
function render() {
root.style.setProperty("--sidebar-width", state.session.sidebar_visible ? `${state.session.sidebar_width}px` : "0px");
root.style.setProperty("--assistant-width", state.session.assistant_sidebar_visible ? `${state.session.assistant_sidebar_width}px` : "0px");
renderTitlebar();
renderActivityBar();
renderSidebar();
renderTabs();
renderEditor();
renderPanel();
renderAssistant();
renderStatusBar();
applyVisibility();
bindEvents();
}
function renderTitlebar() {
root.querySelector(".window-titlebar").innerHTML = `
${escapeHtml(bootstrap.title)}
${renderTitlebarAction("toggle-sidebar", "toggle-sidebar", "Toggle sidebar", `
`)}
${renderTitlebarAction("toggle-panel", "toggle-panel", "Toggle panel", `
`)}
${renderTitlebarAction("toggle-assistant", "toggle-assistant", "Toggle assistant", `
`)}
`;
}
function renderTitlebarAction(command, testId, label, iconMarkup) {
return `
${iconMarkup}
`;
}
function renderActivityBar() {
const top = sidebarViews().filter((view) => view.activity_group === "top");
const bottom = sidebarViews().filter((view) => view.activity_group === "bottom");
root.querySelector(".activity-bar").innerHTML = `
${top.map(renderActivityButton).join("")}
${bottom.map(renderActivityButton).join("")}
`;
}
function renderActivityButton(view) {
const active = state.session.sidebar_visible && state.session.active_view === view.id;
return `
${activityIcon(view.id)}
`;
}
function renderSidebar() {
const view = currentSidebarView();
const data = currentSidebarData();
root.querySelector(".sidebar").innerHTML = `
`;
}
function renderSidebarItem(item, view) {
const tabRef = currentTabRef();
const itemRoute = item.route || view.editor_route;
const tabId = tabIdForItem(item, itemRoute);
const active = tabRef && tabRef.type === itemRoute && tabRef.id === tabId;
return `
`;
}
function renderTabs() {
const tabs = state.session.tabs;
const node = root.querySelector(".tab-bar");
if (tabs.length === 0) {
node.innerHTML = `Dashboard
`;
return;
}
node.innerHTML = `
${tabs.map(renderTab).join("")}
`;
}
function renderTab(tab) {
const active = sameTab(tab, currentTabRef());
const meta = tabMetadata(tab);
return `
${tabIcon(tab.type)}
${escapeHtml(meta.title)}
${tab.is_transient ? "Preview" : "Pinned"}
`;
}
function renderEditor() {
const route = currentRoute();
const meta = currentEditorMeta();
const node = root.querySelector(".editor-shell");
node.innerHTML = `
${escapeHtml(routeLabel(route))}
${escapeHtml(editorTitle())}
${escapeHtml(editorSubtitle(route))}
${renderEditorBody(route)}
`;
}
function renderEditorBody(route) {
if (route === "dashboard") {
const dashboard = bootstrap.content.dashboard;
return `
${dashboard.summary_cards
.map((card) => `${escapeHtml(card.label)}: ${escapeHtml(card.value)} ${escapeHtml(card.detail)}
Workbench Notes
${dashboard.checklist.map((entry) => `${escapeHtml(entry)} `).join("")}
`;
}
const active = activeItem();
return `
Open
Preview
Metadata
${escapeHtml(active?.title || routeLabel(route))}
${escapeHtml(active?.meta || "Desktop workbench content routed through the Elixir shell.")}
`;
}
function renderPanel() {
const tabs = [state.session.panel.active_tab, "output", "git_log"].filter(uniqueValue);
root.querySelector(".panel-shell").innerHTML = `
${escapeHtml(routeLabel(state.session.panel.active_tab))}
The shared lower panel is available for tasks, output, git details, and editor-specific diagnostics.
`;
}
function renderAssistant() {
root.querySelector(".assistant-sidebar").innerHTML = `
${bootstrap.content.assistant_cards
.map(
(card) => `
${escapeHtml(card.label)}
${escapeHtml(card.text)}
`
)
.join("")}
`;
}
function renderStatusBar() {
const status = bootstrap.status;
root.querySelector(".status-bar").innerHTML = `
${escapeHtml(status.left.running_task_message || "Idle")}
${escapeHtml(status.right.post_count)}
${escapeHtml(status.right.media_count)}
${escapeHtml(status.right.theme_badge)}
${status.right.offline_mode ? "Offline" : "Online"}
${escapeHtml(status.right.ui_language.toUpperCase())}
${escapeHtml(status.right.brand)}
`;
}
function applyVisibility() {
root.querySelector(".sidebar-shell").classList.toggle("is-hidden", !state.session.sidebar_visible);
root.querySelector(".assistant-sidebar-shell").classList.toggle("is-hidden", !state.session.assistant_sidebar_visible);
root.querySelector(".panel-shell").classList.toggle("is-hidden", !state.session.panel.visible);
}
function bindEvents() {
root.querySelectorAll("[data-command]").forEach((button) => {
button.onclick = () => {
const command = button.dataset.command;
if (command === "toggle-sidebar") {
state.session.sidebar_visible = !state.session.sidebar_visible;
persistSessionWidths();
}
if (command === "toggle-panel") {
state.session.panel.visible = !state.session.panel.visible;
}
if (command === "toggle-assistant") {
state.session.assistant_sidebar_visible = !state.session.assistant_sidebar_visible;
persistSessionWidths();
}
render();
};
});
root.querySelectorAll("[data-activity]").forEach((button) => {
button.onclick = () => {
const next = button.dataset.activity;
bindResizeHandle("sidebar", {
key: SIDEBAR_STORAGE_KEY,
min: 200,
max: 500,
get: () => state.session.sidebar_width,
set: (value) => {
state.session.sidebar_width = value;
state.session.sidebar_visible = true;
},
});
bindResizeHandle("assistant", {
key: ASSISTANT_STORAGE_KEY,
min: 280,
max: 640,
get: () => state.session.assistant_sidebar_width,
set: (value) => {
state.session.assistant_sidebar_width = value;
state.session.assistant_sidebar_visible = true;
},
invert: true,
});
if (state.session.active_view === next && state.session.sidebar_visible) {
state.session.sidebar_visible = false;
} else {
state.session.active_view = next;
state.session.sidebar_visible = true;
}
render();
};
});
root.querySelectorAll("[data-open-tab]").forEach((button) => {
button.onclick = () => {
openTab(button.dataset.openRoute, button.dataset.openTab, button.dataset.openTitle, true);
};
button.ondblclick = () => {
openTab(button.dataset.openRoute, button.dataset.openTab, button.dataset.openTitle, false);
};
});
root.querySelectorAll("[data-tab-id]").forEach((button) => {
button.onclick = () => {
state.session.active_tab = { type: button.dataset.tabType, id: button.dataset.tabId };
render();
};
});
root.querySelectorAll("[data-panel-tab]").forEach((button) => {
button.onclick = () => {
state.session.panel.active_tab = button.dataset.panelTab;
state.session.panel.visible = true;
render();
};
});
}
function openTab(type, id, title, transient) {
const existingIndex = state.session.tabs.findIndex((tab) => tab.type === type && tab.id === id);
if (existingIndex >= 0) {
state.session.tabs[existingIndex].is_transient = transient ? state.session.tabs[existingIndex].is_transient : false;
} else if (transient) {
const transientIndex = state.session.tabs.findIndex((tab) => tab.type === type && tab.is_transient);
const nextTab = { type, id, is_transient: true };
if (transientIndex >= 0) {
state.session.tabs.splice(transientIndex, 1, nextTab);
} else {
state.session.tabs.push(nextTab);
}
} else {
state.session.tabs.push({ type, id, is_transient: false });
}
state.tabMeta[`${type}:${id}`] = { title };
state.session.active_tab = { type, id };
render();
}
function activeItem() {
const tab = currentTabRef();
if (!tab) {
return null;
}
const sections = Object.values(bootstrap.content.sidebar).flatMap((view) => view.sections);
return sections.flatMap((section) => section.items).find((item) => tabIdForItem(item, item.route) === tab.id) || null;
}
function tabMetadata(tab) {
const lookup = state.tabMeta[`${tab.type}:${tab.id}`];
if (lookup) {
return lookup;
}
const item = activeItem();
if (item && tab.id === tabIdForItem(item, item.route)) {
return { title: item.title };
}
return { title: routeLabel(tab.type) };
}
function currentSidebarView() {
return sidebarViews().find((view) => view.id === state.session.active_view) || sidebarViews()[0];
}
function currentSidebarData() {
return bootstrap.content.sidebar[state.session.active_view] || bootstrap.content.sidebar[bootstrap.registry.default_sidebar_view];
}
function currentTabRef() {
return state.session.active_tab;
}
function currentRoute() {
return currentTabRef()?.type || "dashboard";
}
function currentEditorMeta() {
return bootstrap.content.editor_meta[currentRoute()] || bootstrap.content.editor_meta.dashboard;
}
function editorTitle() {
const item = activeItem();
return item?.title || bootstrap.content.dashboard.title;
}
function editorSubtitle(route) {
if (route === "dashboard") {
return bootstrap.content.dashboard.subtitle;
}
const item = activeItem();
return item?.meta || `${routeLabel(route)} content loaded through the desktop shell.`;
}
function routeLabel(route) {
if (!route) {
return "Dashboard";
}
return (
bootstrap.registry.editor_routes.find((item) => item.id === route)?.title ||
sidebarViews().find((item) => item.id === route)?.label ||
titleCase(route)
);
}
function tabIdForItem(item, route) {
if (route === "settings" || route === "tags") {
return route;
}
return item.id;
}
function sidebarViews() {
return bootstrap.registry.sidebar_views;
}
function sameTab(tab, ref) {
return Boolean(ref) && tab.type === ref.type && tab.id === ref.id;
}
function uniqueValue(value, index, array) {
return Boolean(value) && array.indexOf(value) === index;
}
function titleCase(value) {
return value
.split("_")
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
.join(" ");
}
function clone(value) {
return JSON.parse(JSON.stringify(value));
}
function hydrateSession(session) {
const next = session;
next.sidebar_width = readStoredSize(SIDEBAR_STORAGE_KEY, next.sidebar_width, 200, 500);
next.assistant_sidebar_width = readStoredSize(ASSISTANT_STORAGE_KEY, next.assistant_sidebar_width, 280, 640);
return next;
}
function bindResizeHandle(name, options) {
const handle = root.querySelector(`[data-resize='${name}']`);
if (!handle) {
return;
}
handle.onmousedown = (event) => {
event.preventDefault();
const startX = event.clientX;
const startWidth = options.get();
const onMouseMove = (moveEvent) => {
const delta = options.invert ? startX - moveEvent.clientX : moveEvent.clientX - startX;
const width = clamp(startWidth + delta, options.min, options.max);
options.set(width);
persistSessionWidths();
render();
};
const onMouseUp = () => {
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
};
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
};
}
function persistSessionWidths() {
localStorage.setItem(SIDEBAR_STORAGE_KEY, String(state.session.sidebar_width));
localStorage.setItem(ASSISTANT_STORAGE_KEY, String(state.session.assistant_sidebar_width));
}
function readStoredSize(key, fallback, min, max) {
const raw = localStorage.getItem(key);
if (!raw) {
return fallback;
}
const parsed = Number.parseInt(raw, 10);
if (Number.isNaN(parsed)) {
return fallback;
}
return clamp(parsed, min, max);
}
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
function activityIcon(id) {
const icons = {
posts: '