Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): blackflame theming pass — edit toggle, md tables, back button, Little Blue action cards

Browse Source 
- markdown_editor Edit toggle uses themed ghost button
- .md-preview gets full blackflame styling incl. tables (migrated BookStack tables now render as tables)
- reusable back button on page/reference/project/resource reading views
- Little Blue actions regrouped into themed cards, pairing Start/Stop per guest

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
root
2026-06-04 23:02:32 +10:00
parent f5c7b24d81
commit 16f2083253
8 changed files with 115 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
public/views/little_blue.js
View File

@@ -1,5 +1,6 @@
// #/little-blue — the caretaker page: Little Blue's chat (reuses agent_chat) +
// a manual Actions panel (run whitelisted actions; approve/reject risky ones).
// a manual Actions panel. Actions are grouped into cards (Start/Stop of the same
// guest pair together); risky ones queue for owner approval.
import { el, mount, clear } from '../dom.js';
import { api } from '../api.js';
import { wireAgentChat } from '../components/agent_chat.js';
@@ -7,6 +8,8 @@ import { wireAgentChat } from '../components/agent_chat.js';
const BLUE_LABELS = {
search: '🔍 looking', list_actions: '📋 checking what she can do', propose_action: '🔧 taking action'
};
const VERB = { start: 'Start', stop: 'Stop', shutdown: 'Shutdown', reboot: 'Reboot' };
const stripVerb = (l) => ((l || '').replace(/^(Start|Stop|Restart|Reboot|Shutdown)\s+/i, '').trim() || l);
function toast(host, msg, kind) {
const t = el('div', { class: 'lb-toast' + (kind === 'err' ? ' err' : '') }, msg);
@@ -14,48 +17,70 @@ function toast(host, msg, kind) {
setTimeout(() => t.remove(), 4000);
}
function actionButton(a, panel, toastHost) {
const verb = a.kind === 'guest_power' ? (VERB[a.op] || a.op) : 'Restart';
const btn = el('button', {
class: 'lb-act ' + (a.tier === 'risky' ? 'risky' : 'safe'),
title: a.tier === 'risky' ? 'Needs your approval' : 'Runs immediately',
onclick: async () => {
btn.disabled = true;
try {
const r = await api.post(`/api/actions/${a.id}/run`);
toast(toastHost, r.executed ? `Ran: ${a.label}` : `Queued for approval: ${a.label}`);
renderActions(panel, toastHost);
} catch (e) { toast(toastHost, 'Failed: ' + e.message, 'err'); btn.disabled = false; }
}
}, verb);
return btn;
}
async function renderActions(panel, toastHost) {
clear(panel);
let actions = [], pending = [];
try { ({ actions } = await api.get('/api/actions')); } catch (e) { actions = []; }
try { ({ pending } = await api.get('/api/actions/pending')); } catch (e) { pending = []; }
try { ({ actions } = await api.get('/api/actions')); } catch { /* */ }
try { ({ pending } = await api.get('/api/actions/pending')); } catch { /* */ }
panel.appendChild(el('div', { class: 'lb-sec-t' }, 'Actions'));
if (!actions.length) {
panel.appendChild(el('div', { class: 'muted' }, 'No actions configured yet (populate config/actions.json).'));
}
panel.appendChild(el('div', { class: 'lb-sec' }, 'Actions'));
if (!actions.length) panel.appendChild(el('p', { class: 'muted' }, 'No actions configured yet.'));
// Group guest power by guest (pairs Start/Stop); service restarts stand alone.
const groups = new Map();
for (const a of actions) {
panel.appendChild(el('div', { class: 'lb-action' },
el('span', { class: 'lb-a-label' }, a.label || a.id),
el('span', { class: 'lb-a-tier ' + a.tier }, a.tier),
el('button', { class: 'lb-run', onclick: async (ev) => {
ev.target.disabled = true;
try {
const r = await api.post(`/api/actions/${a.id}/run`);
toast(toastHost, r.executed ? `Ran "${a.label || a.id}"` : `Queued "${a.label || a.id}" for approval`);
renderActions(panel, toastHost);
} catch (e) { toast(toastHost, 'Failed: ' + e.message, 'err'); ev.target.disabled = false; }
} }, a.tier === 'risky' ? 'Request' : 'Run')));
const key = a.kind === 'guest_power' ? `g:${a.node}:${a.vmid}` : `s:${a.id}`;
if (!groups.has(key)) groups.set(key, { name: stripVerb(a.label), acts: [] });
groups.get(key).acts.push(a);
}
if (actions.length) {
const cards = el('div', { class: 'lb-cards' });
for (const { name, acts } of groups.values()) {
acts.sort((x, y) => (x.op === 'start' ? -1 : y.op === 'start' ? 1 : 0));
cards.appendChild(el('div', { class: 'card lb-card' },
el('div', { class: 'lb-card-title' }, name),
el('div', { class: 'lb-btn-row' }, acts.map(a => actionButton(a, panel, toastHost)))));
}
panel.appendChild(cards);
}
if (pending.length) {
panel.appendChild(el('div', { class: 'lb-sec-t' }, 'Awaiting approval'));
panel.appendChild(el('div', { class: 'lb-sec' }, 'Awaiting approval'));
const resolve = async (id, verb) => {
try { await api.post(`/api/actions/pending/${id}/${verb}`); toast(toastHost, verb === 'approve' ? 'Approved' : 'Rejected'); renderActions(panel, toastHost); }
catch (e) { toast(toastHost, 'Failed: ' + e.message, 'err'); }
};
const pcards = el('div', { class: 'lb-cards' });
for (const p of pending) {
const row = el('div', { class: 'lb-pending' },
el('span', { class: 'lb-a-label' }, p.action_id),
el('button', { class: 'ok', onclick: () => resolve(p.id, 'approve') }, 'Approve'),
el('button', { class: 'no', onclick: () => resolve(p.id, 'reject') }, 'Reject'));
panel.appendChild(row);
async function resolve(id, verb) {
try { await api.post(`/api/actions/pending/${id}/${verb}`); toast(toastHost, verb === 'approve' ? 'Approved' : 'Rejected'); renderActions(panel, toastHost); }
catch (e) { toast(toastHost, 'Failed: ' + e.message, 'err'); }
}
pcards.appendChild(el('div', { class: 'card lb-pending-card' },
el('div', { class: 'lb-card-title' }, p.action_id),
el('div', { class: 'lb-btn-row' },
el('button', { class: 'lb-act safe', onclick: () => resolve(p.id, 'approve') }, 'Approve'),
el('button', { class: 'lb-act risky', onclick: () => resolve(p.id, 'reject') }, 'Reject'))));
}
panel.appendChild(pcards);
}
}
export async function render(main) {
const log = el('div', { class: 'rail-log sentinel-log' });
const log = el('div', { class: 'rail-log lb-log' });
const input = el('textarea', { class: 'rail-input', rows: 1, placeholder: 'Tell Little Blue what’s wrong…' });
const actionsPanel = el('div', { class: 'lb-actions' });
const toastHost = el('div', { class: 'lb-toasts' });

2
public/views/page.js
View File

@@ -2,6 +2,7 @@
import { api } from '../api.js';
import { el, mount } from '../dom.js';
import { markdownEditor } from '../components/markdown_editor.js';
import { backButton } from '../components/backbtn.js';
export async function render(main, ctx) {
const id = ctx.params.id;
@@ -28,6 +29,7 @@ export async function render(main, ctx) {
);
mount(main,
backButton(),
el('h1', { class: 'view-h1' }, page.title),
el('p', { class: 'view-sub muted' }, '/' + page.slug),
editor,

2
public/views/project.js
View File

@@ -1,6 +1,7 @@
// Project view — header + tasks (with inline status toggle) + pages + refs + add-task form.
import { api } from '../api.js';
import { el, mount, clear } from '../dom.js';
import { backButton } from '../components/backbtn.js';
const STATUSES = ['todo', 'doing', 'blocked', 'done'];
const STATUS_CLASS = { todo: 'idle', doing: 'warn', blocked: 'bad', done: 'ok' };
@@ -75,6 +76,7 @@ export async function render(main, ctx) {
newTitle.addEventListener('keydown', (e) => { if (e.key === 'Enter') addTask(); });
mount(main,
backButton(),
el('h1', { class: 'view-h1' }, proj.name),
el('p', { class: 'view-sub' },
el('span', { class: 'status ' + (proj.status === 'done' ? 'ok' : proj.status === 'paused' ? 'warn' : '') }, proj.status),

2
public/views/reference.js
View File

@@ -1,6 +1,7 @@
// Reference detail: media block + summary + metadata + tag attach/detach + linked-from.
import { api } from '../api.js';
import { el, mount, clear, safeHref } from '../dom.js';
import { backButton } from '../components/backbtn.js';
function mediaBlock(ref) {
if (ref.kind === 'image' && (ref.source_url || ref.blob_path)) {
@@ -108,6 +109,7 @@ export async function render(main, ctx) {
);
mount(main,
backButton(),
el('h1', { class: 'view-h1' }, ref.title || '(untitled reference)'),
el('p', { class: 'view-sub' },
el('span', { class: 'status idle' }, ref.kind),

2
public/views/resource.js
View File

@@ -1,6 +1,7 @@
// Resource detail: status header + dependencies + source docs + runbook pages + change history.
import { api } from '../api.js';
import { el, mount, clear, safeHref } from '../dom.js';
import { backButton } from '../components/backbtn.js';
function statusClass(s) {
return s === 'running' ? 'ok' : s === 'stopped' ? 'warn' : s === 'down' ? 'bad' : 'idle';
@@ -108,6 +109,7 @@ export async function render(main, ctx) {
}
mount(main,
backButton(),
el('h1', { class: 'view-h1' }, res.name),
el('p', { class: 'view-sub' },
el('span', { class: 'status ' + statusClass(res.status) }, res.status),